1.更换背景 2.更改右侧列表结构

src/App.vue

@@ -29,10 +29,10 @@ export default {
     background: #ababab7d;
     box-shadow: 50px 20px 60px #8d8d8d, -50px -20px 60px #ffffff; */
     border-radius: 50px;
-    /* background: linear-gradient(179deg, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0) 100%); */
+    background: linear-gradient(179deg, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0.1) 100%);
     /* background: linear-gradient(135deg, rgb(0 0 0 / 36%) 0%, rgb(255 255 255 / 20%) 100%); */
-    background: #afafaf;
-    box-shadow:  20px 20px 60px #8d8d8d, -20px -20px 60px #ffffff;
+    /* background: #afafaf; */
+    /* box-shadow:  20px 20px 60px #8d8d8d, -20px -20px 60px #ffffff; */
     /* box-shadow:  20px 20px 60px #bebebe; */
   }
 </style>

src/components/MyLayout/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-container class="el-container" id="elcontainerid">   
+  <el-container class="el-container" id="elcontainerid">
     <!-- <div class="el-aside">
       <div class="side-menu">
         <div class="top">
@@ -14,68 +14,62 @@
       </div>
     </div> -->
     <el-main class="el-main">
-        <router-view></router-view>
+      <router-view></router-view>
     </el-main>
+    <audiLogoComp></audiLogoComp>
   </el-container>
 </template>
 <script>
-    import './reset.less'
-    import './index.less'
-    import NavMenu from './NavMenu';
-    export default {
-      data() {
-        return {
-          mode: 'floorplan'
-        }
-      },
-      components: {NavMenu},
-      methods:{
-        modeChange() {
-          // window.sdkInstance.changeMode("panorama");
-          // this.$router.push({path: '/home?m=8b934420_ZJUb_b6f9'})
-          if(window.location.href.indexOf('home')!==-1)
-          {
-            window.location.href = '/?m=8b934420_ZJUb_b6f9';
-          }
-          else
-          {
-            this.$store.dispatch('common/setSquareStatus', false)
-          }
-        },
-        goMantis() {
-          window.location.href = 'http://139.196.158.57:8080/mantis/#/dashboard';
-        },
-        goKpm() {
-          window.location.href = 'http://106.14.237.165/kpm/#/list/kpm-list';
-        },
-        goAutoGo() {
-          window.location.href = 'http://139.196.158.57/#/Overview';
-        },
-        goHome() {
-          window.location.href = '/?m=8b934420_ZJUb_b6f9';
-        }
-      },
-      created() { 
-        setTimeout(
-        function () {
-          let container = document.getElementById('elcontainerid');
-          container.style.backgroundImage = window.location.href.indexOf('home')!==-1?'none':"url('../../images/3d.png')";
-          container.style.backgroundColor = '#2a2d45';
-          },
-          50
-        );
-        
-      },
-    }
+import "./reset.less";
+import "./index.less";
+import NavMenu from "./NavMenu";
+import audiLogoComp from "../audiLogoAnimation/index.vue";
+export default {
+  data() {
+    return {
+      mode: "floorplan",
+    };
+  },
+  components: { NavMenu, audiLogoComp },
+  methods: {
+    modeChange() {
+      // window.sdkInstance.changeMode("panorama");
+      // this.$router.push({path: '/home?m=8b934420_ZJUb_b6f9'})
+      if (window.location.href.indexOf("home") !== -1) {
+        window.location.href = "/?m=8b934420_ZJUb_b6f9";
+      } else {
+        this.$store.dispatch("common/setSquareStatus", false);
+      }
+    },
+    goMantis() {
+      window.location.href = "http://139.196.158.57:8080/mantis/#/dashboard";
+    },
+    goKpm() {
+      window.location.href = "http://106.14.237.165/kpm/#/list/kpm-list";
+    },
+    goAutoGo() {
+      window.location.href = "http://139.196.158.57/#/Overview";
+    },
+    goHome() {
+      window.location.href = "/?m=8b934420_ZJUb_b6f9";
+    },
+  },
+  created() {
+    setTimeout(function () {
+      let container = document.getElementById("elcontainerid");
+      // container.style.backgroundImage = window.location.href.indexOf('home')!==-1?'none':"url('../../images/3d.png')";
+      // container.style.backgroundColor = '#2a2d45';
+    }, 50);
+  },
+};
 </script>
 <style scoped>
-.el-aside .side-menu{
+.el-aside .side-menu {
   padding: 30px 10px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
-
 }
 .bottom .btn {
   width: 100%;
@@ -105,25 +99,45 @@
 .icon.home {
   background-image: url(../../assets/home.png);
 }
-:deep(.el-main){
+:deep(.el-main) {
   height: 800;
   overflow: auto;
   scrollbar-width: 0px; /* 定义滚动条的宽度 */
   scrollbar-color: transparent transparent; /* 定义滚动条的颜色 */
 }
- 
+
 /* 隐藏滚动条 */
 :deep(.el-main::-webkit-scrollbar) {
   width: 0px; /* 定义滚动条宽度 */
   height: 0px;
   background-color: transparent; /* 滚动条背景颜色 */
 }
- 
 </style>
 <style scoped>
-.el-container{
+.el-container {
   background-repeat: no-repeat;
   background-size: 100% 100%;
   background-position: center;
+  /* min-height: 100vh; */
+  /* color: #e2e4f3; */
+  background-image: linear-gradient(
+      -147deg,
+      rgba(95, 104, 133, 0.75),
+      rgba(30, 34, 51, 0.75)
+    ),
+    url(../../images/mountainBg.jpg);
+  position: relative;
+  overflow: hidden;
+}
+
+.audiLogoBox {
+  position: absolute;
+  z-index: 5;
+  right: 0;
+  bottom: 50px;
+  transform: scale(0.5);
+  height: 20%;
+  width: 30%;
+  opacity: 0.2;
 }
 </style>

src/components/TabList/index.vue

@@ -10,6 +10,17 @@
         {{ tab.title }}
       </div>
     </div>
+    <div
+      class="square-count backgroundBox"
+      v-if="activeTab === 0 && ifSquare"
+      v-show="!currentBench.selected"
+    >
+      <status-bar
+        :ready="readyCount"
+        :occupied="occupiedCount"
+        :offline="offlineCount"
+      ></status-bar>
+    </div>
     <div
       class="origin-basic backgroundBox"
       v-if="activeTab === 0"
@@ -469,15 +480,17 @@
 <script>
 import bus from "@/service/bus";
 import { mapState } from "vuex";
+import StatusBar from "../../components/StatusBar";
 export default {
+  components: { StatusBar },
   props: {
     tabs: {
       type: Array,
-      required: true,
+      // required: true,
     },
     itemRender: {
       type: Function,
-      required: true,
+      // required: true,
     },
     TextTrackListRender: {
       type: Function,
@@ -485,19 +498,19 @@ export default {
     },
     taskRender: {
       type: Function,
-      required: true,
+      // required: true,
     },
     planRender: {
       type: Function,
-      required: true,
+      // required: true,
     },
     issueRender: {
       type: Function,
-      required: true,
+      // required: true,
     },
     planBack: {
       type: Function,
-      required: true,
+      // required: true,
     },
     size: {
       type: String,
@@ -541,11 +554,13 @@ export default {
     clickBackToIssueList: Function,
     submitAutoCase: Function,
     clickBackToAutoCaseList: Function,
+    readyCount: Number,
+    occupiedCount: Number,
+    offlineCount: Number,
   },
   mounted() {
     bus.on("benchInfoVisible", (param) => {
       this.currentBench = param;
-      console.log("this.currentBench", this.currentBench);
     });
 
     bus.on("benchDisplayLowerVisibleChange", (param) => {
@@ -553,7 +568,6 @@ export default {
     });
 
     bus.on("benchImgChange", (param) => {
-      console.log("param", param);
       if (param.benchImgUpper) {
         this.benchImgUpper = param.benchImgUpper;
       } else if (param.benchImgLower) {
@@ -586,6 +600,9 @@ export default {
     activeTabItems() {
       return this.tabs[this.activeTab].list;
     },
+    ifSquare() {
+      return window.location.href.indexOf("squarePage") >= 0;
+    },
     dots() {
       return this.tabs.map((_, index) => index);
     },
@@ -1191,4 +1208,8 @@ export default {
   border-radius: 6px;
   height: 100%;
 }
+.panel-container {
+  height: 60vh;
+  overflow: auto;
+}
 </style>

src/views/squarePage/index.less

@@ -44,32 +44,37 @@
 
   .square-right {
     margin-right: 2.29vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 20px;
   }
 
   .square-count {
-    height: 22.38vh;
+    height: 15.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;
+    // 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;
-
-  }
+  // .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;

src/views/squarePage/list.vue

@@ -43,14 +43,14 @@
       </div>
     </div>
     <div class="square-right">
-      <div class="square-count backgroundBox" v-show="!currentBench.selected">
+      <!-- <div class="square-count backgroundBox" v-show="!currentBench.selected">
         <status-bar
           :ready="readyCount"
           :occupied="occupiedCount"
           :offline="offlineCount"
         ></status-bar>
-      </div>
-      <div
+      </div> -->
+      <!-- <div
         class="origin-basic"
         v-show="currentBench.selected"
         @dblclick="handleInfoDblClick(currentBench.benchId)"
@@ -79,12 +79,15 @@
           <span>Box Version</span>
           <span>{{ currentBench.equipment?.version }}</span>
         </div>
-      </div>
+      </div> -->
       <div class="square-list">
         <TabList
           :tabs="tabs"
           :itemRender="itemRender"
           :tabClass="tabClass"
+          :readyCount="readyCount"
+          :occupiedCount="occupiedCount"
+          :offlineCount="offlineCount"
         ></TabList>
       </div>
     </div>
@@ -97,6 +100,7 @@ import TabList from "../../components/TabList";
 import SearchBar from "../../components/SearchBar";
 import { mapState } from "vuex";
 import webSocket from "../../service/ws";
+import bus from "../../service/bus";
 
 const ws = new webSocket();
 let wsArray = [];
@@ -233,9 +237,9 @@ export default {
           readyCount++;
         } else if (element.status == "error") {
           offlineCount++;
-        } else if(element.status == "offline") {
+        } else if (element.status == "offline") {
           offlineCount++;
-        }else {
+        } else {
           occupiedCount++;
         }
       });
@@ -482,6 +486,7 @@ export default {
             this.currentBench.selected = true;
           }
         }
+        bus.emit("benchInfoVisible", this.currentBench);
       });
     },
     handleListDbClick(benchId, itemtype) {