fixed

src/components/MyLayout/index.vue

@@ -39,7 +39,7 @@
           }
           else
           {
-            window.location.href = '/home?m=8b934420_ZJUb_b6f9';
+            this.$store.dispatch('common/setSquareStatus', false)
           }
         },
         goMantis() {

src/components/SearchBar/index.vue

@@ -60,7 +60,7 @@ export default {
       if (window.location.href.indexOf("home") !== -1) {
         window.location.href = "/?m=8b934420_ZJUb_b6f9";
       } else {
-        window.location.href = "/home?m=8b934420_ZJUb_b6f9";
+        this.$store.dispatch('common/setSquareStatus', false)
       }
     },
     goMantis() {

src/store/modules/common/actions.js

@@ -8,5 +8,8 @@ export default {
     } catch (err) {
       console.log("error", "服务异常", 1000);
     }
+  },
+  setSquareStatus({ commit }, data) {
+    commit('setSquareStatus', data);
   }
 };

src/store/modules/common/getters.js

@@ -19,5 +19,8 @@ export default {
   },
   getTBTypeOptions(state) {
     return state.TBTypeOptions
+  },
+  getSquareStatus(state) {
+    return state.isOpenSquare
   }
 };

src/store/modules/common/index.js

@@ -16,7 +16,8 @@ export default {
       clusterOptions:[],
       marketOptions:[],
       resultOptions: [],
-      TBTypeOptions: []
+      TBTypeOptions: [],
+      isOpenSquare: false
     };
   },
   mutations,

src/store/modules/common/mutations.js

@@ -78,4 +78,7 @@ export default {
       }
     }
   },
+  setSquareStatus(state, data) {
+    state.isOpenSquare = data;
+  }
 };

src/views/ordinaryPage/index.less

@@ -184,6 +184,7 @@
   position: absolute;
   top: 10px;
   right: 10px;
+  z-index: 9999;
 }
 .ordinary-map-hidden {
   width: 100%;

src/views/ordinaryPage/square.less

@@ -0,0 +1,166 @@
+.ordinary-container {
+    display: flex;
+    float: right;
+  
+    .ordinary-left {
+      display: flex;
+      width: 63.48vw;
+      flex-direction: column;
+      align-items: center;
+      .search-container {
+        height: 7.4vh;
+        width: 44.9vw;
+        margin-top: 11.29vh;
+        margin-bottom: 2vh;
+      }
+  
+      .square-map {
+        overflow-y: auto;
+        position: relative;
+        width: 63.34vw;
+        height: 67.79vh;
+        // margin-top: -30vh;
+  
+        .grid-item-close {
+          margin-left: 16.69vw;
+          margin-top: -21.94vh;
+          margin-bottom: 14.5vh;
+  
+        }
+  
+        .grid-item {
+          width: 18.6vw;
+          height: 16.74vh;
+          margin-right: 1.39vw;
+          margin-bottom: 1.94vh;
+  
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+  
+    .square-right {
+      margin-right: 2.29vw;
+    }
+  
+    .square-count {
+      height: 22.38vh;
+      margin-bottom: 1.85vh;
+      background: rgba(0, 0, 0, 0.49);
+      border-radius: 2.08vw;
+      border: 1px solid #707070;
+      margin-left: 1.56vw;
+      margin-top: 11.29vh;
+      padding: 1.75vh 2.08vw;
+      color: #dfdfdf;
+      font-size: 16px;
+    }
+  
+    .origin-basic {
+      height: 22.38vh;
+      margin-top: 11.29vh;
+      ;
+      margin-bottom: 1.85vh;
+      background: rgba(0, 0, 0, 0.49);
+      border-radius: 2.08vw;
+      border: 1px solid #707070;
+      margin-left: 1.56vw;
+  
+    }
+  
+    .square-list {
+      width: 26.36vw;
+      //height: 49.27vh;
+      margin-left: 1.56vw;
+    }
+  
+    .square-list {
+      .item-image {
+        width: 7.29vw;
+        height: 7.29vw;
+        border-radius: 15px;
+        border: 2px solid #dfdfdf;
+  
+        img {
+          width: 100%;
+          height: 100%;
+          border-radius: 15px;
+        }
+      }
+  
+      .item-box {
+        width: 100%;
+        padding: 1.04vw 1.66vh 1.04vw;
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 20px 20px 20px 20px;
+        opacity: 1;
+        display: flex;
+  
+        .item-text {
+          margin-left: 1.2vw;
+  
+          .item-title {
+            height: 4.17vh;
+            font-size: 28px;
+            font-family: PingFang SC-Bold, PingFang SC;
+            font-weight: 400;
+            color: #fbfbfb;
+            line-height: 4.17vh;
+          }
+  
+          .item-description {
+            margin-top: 0.37vh;
+            height: 2.31vh;
+            font-size: 16px;
+            font-family: PingFang SC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #dfdfdf;
+            line-height: 2.31vh;
+          }
+  
+          .item-tag {
+            display: flex;
+            margin-top: 0vh;
+            width: 10vw;
+  
+            .tag {
+              margin-bottom: 0.2vh;
+              //width: 3.13vw;
+              height: 1.96vh;
+              font-size: xx-small;
+              line-height: 1.96vh;
+              text-align: center;
+              background-color: #5d9a6d;
+              border-radius: 10px;
+              color: #f2f2f2;
+              margin-right: 0.2vw;
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  *::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 6px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 1px;
+  }
+  
+  *::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 5px;
+    box-shadow: inset 0 0 5px rgba(180, 180, 180, 0.5);
+    background: rgba(180, 180, 180, 0.2);
+  }
+  
+  *::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+    /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
+    border-radius: 10px;
+    background: transparent;
+  }

src/views/originPage/list.vue

@@ -9,6 +9,39 @@
         @blur="onBulr"
         ref="searchbar"
       />
+      <div class="square-map">
+        <el-row>
+          <el-col v-for="(item, index) in images" :key="item" :span="8">
+            <div
+              class="grid-item-background"
+              style="
+                background-color: black;
+                padding-top: 30px;
+                padding-bottom: 30px;
+                padding-left: 5px;
+                padding-right: 5px;
+                margin: 10px;
+                border-radius: 20px;
+              "
+            >
+              <div class="grid-item">
+                <img
+                  :src="item.url"
+                  @dblclick="handleDblClickImg(item.alt)"
+                  @click="handleClickImg(item.alt, index)"
+                />
+              </div>
+              <div class="grid-item-close">
+                <img
+                  width="30px"
+                  src="../../images/closeremotebench.png"
+                  @click="handleCloseImg(item.alt)"
+                />
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
       <div class="origin-map">
         <Transition name="slide">
           <div class="bmMap" v-if="false">
@@ -200,6 +233,13 @@
       </el-row>
     </div>
     <div class="origin-right">
+      <div class="square-count" v-show="!currentBench.selected">
+        <status-bar
+          :ready="readyCount"
+          :occupied="occupiedCount"
+          :offline="offlineCount"
+        ></status-bar>
+      </div>
       <div
         class="origin-basic"
         v-show="currentBench.type == 2"
@@ -267,6 +307,7 @@
 </template>
 <script>
 import "./index.less";
+import StatusBar from "../../components/StatusBar";
 import Dropdown from "./components/DropDown";
 import TableComponent from "./components/TableComponent/index.vue";
 import TabList from "../../components/TabList";
@@ -286,6 +327,7 @@ export default {
     SearchBar,
     ImageList,
     BenchDetail,
+    StatusBar
   },
   data() {
     return {

src/views/squarePage/list.vue

@@ -233,7 +233,9 @@ export default {
           readyCount++;
         } else if (element.status == "error") {
           offlineCount++;
-        } else {
+        } else if(element.status == "offline") {
+          offlineCount++;
+        }else {
           occupiedCount++;
         }
       });