修改完bug

src/views/ordinaryPage/index.vue

@@ -388,7 +388,7 @@
                 {
                   readyCount++;
                 }
-                else if(element.status == "error")
+                else if(element.status == "offline")
                 {
                   offlineCount++;
                 }
@@ -1606,10 +1606,10 @@
     color: #cdd0cf !important;
     font-size: 30px;
 }
-.offline {
+/*.offline {
     color: red !important;
     font-size: 30px;
-}
+}*/
 .bmInfoMsSlideNameStatus.ready {
     color: #65c94c !important;
     border: 3px solid #65c94c;

src/views/originPage/list.vue

@@ -180,23 +180,23 @@
       </el-row>
     </div>
     <div class="origin-right">
-      <div class="origin-basic" v-show="currentBench.type == 2">
+      <div class="origin-basic" v-show="currentBench.type == 2" @dblclick="handleInfoDblClick(currentBench.benchId)">
         <h2 @click="bmMapItemActivate">{{ currentBench.name }} 🔗</h2>
         <div>
           <span>Location:</span>
-          <span>{{ currentBench.location }}</span>
+          <span>Automation Lab-7E</span>
         </div>
         <div>
           <span>MU_SW</span>
-          <span>{{ currentBench.mu_sw }}</span>
+          <span>{{ currentBench.MU_SW }}</span>
         </div>
         <div>
           <span>Cluster</span>
-          <span>{{ currentBench.cluster }}</span>
+          <span>{{ currentBench.Cluster }}</span>
         </div>
         <div>
           <span>Market</span>
-          <span>{{ currentBench.market }}</span>
+          <span>{{ currentBench.Market }}</span>
         </div>
         <div>
           <span>Box IP</span>
@@ -204,7 +204,7 @@
         </div>
         <div>
           <span>Box Version</span>
-          <span>{{ currentBench.version }}</span>
+          <span>{{ currentBench.equipment?.version }}</span>
         </div>
       </div>
       <div class="origin-list">
@@ -333,6 +333,7 @@ export default {
     window.bmMapItemActivate = this.bmMapItemActivate;
     window.bmMapItemSelect = this.bmMapItemSelect.bind(this);
     window.selectBench = this.selectBench.bind(this);
+    window.handleListDbClick = this.handleListDbClick;
     let that = this;
     setInterval(() => {
       that.$store.dispatch('benchList/fetchBenchList');
@@ -494,7 +495,7 @@ export default {
         console.log(item, 'bench---item')
 
         item.image = require('../../assets/mechine.png')
-        return `
+        /*return `
                 <div class="item-box">
                     <div class="item-image"><img src="${item.image}" alt="${item.title}"></div>
                     <div class="item-right">
@@ -519,7 +520,32 @@ export default {
                             </div>
                         </div>
                     </div>
-                </div>`;
+                </div>`;*/
+                return `
+                <div onDblClick="handleListDbClick(${item.id}" onClick="handleListClick(${item.id})" class="item-box">
+                <div class="item-image"><img src="${item.image}" alt="${item.title}"></div>
+                <div class="item-right">
+                    <div class="item-text">
+                        <div class="item-title">${item.id}
+                          <span onClick="selectBench(${item.id})" class="el-icon-s-platform ${item.status}"></span>
+                        </div>
+                        <div class="item-description">Automation Lab-7E</div>
+                        <div class="item-description">${item.name}</div>
+                        <div class="item-tag">
+                            <div class="tag">${item.Market}</div>
+                            <div class="tag">${item.Platform}</div>
+                            <div class="tag">${item.Project}</div>
+                            <div class="tag">${item.Carline}</div>
+                            <div class="tag">${item.Cluster}</div>
+                        </div>
+                        <div class="item-tag">
+                            <div class="tag">${item.MU_SW}</div>
+                            <div class="tag">${item.Variant}</div>
+                            <div class="tag">${item.ip}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>`;
 
 
     },
@@ -537,12 +563,56 @@ export default {
         this.currentPage++;
       }
     },
-    handleListClick(benchId) {
+    handleListDbClick(benchId) {
       console.log('handleListClick',benchId);
       this.currentBench = this.benchList.find(b => b.id == benchId);
       
       this.isDetailVisible = true;
     },
+    handleInfoDblClick(benchId) {
+      console.log('handleInfoDblClick',benchId);
+      this.currentBench = this.benchList.find(b => b.id == benchId);
+      
+      this.isDetailVisible = true;
+    },
+    handleListClick(benchId) {
+      //this.currentBench = this.benchList.find(b => b.id == benchId);
+      //this.isDetailVisible = true;
+      this.$nextTick(() => {
+          //this.$refs.benchdetail.init(benchId);
+          //this.benchList.forEach(element => 
+          //{
+          //  element.style = "{background: rgba(0, 0, 0, 1)}"
+          //});
+          if(benchId == this.currentBench.id && this.currentBench.selected == true)
+          {
+            this.currentBench.selected = false;
+            this.currentBench.scale = 1;
+            this.currentBench = {};
+            let items = document.getElementsByClassName('item-box');
+            for(var index = 0; index<items.length;index++)
+            {
+              items[index].style.background = "#00000032"
+            }
+            return;
+          }
+          let items = document.getElementsByClassName('item-box');
+          for(var index = 0; index<items.length;index++)
+          {
+            items[index].style.background = "#00000032"
+            let title = items[index].getElementsByClassName('item-title');
+            console.log('textContent',title[0].textContent)
+            let itemOther = this.benchList.find(b => parseInt(b.id) == parseInt(title[0].textContent));
+            itemOther.selected = false;
+            if(parseInt(benchId) == parseInt(title[0].textContent))
+            {
+              items[index].style.background = "#000000C0"
+              this.currentBench = this.benchList.find(b => b.id == benchId);
+              this.currentBench.selected = true;
+            }
+          }
+      });
+    },
     getImage() {},
     dataCallBack(data) {
       switch (data.method) {
@@ -585,7 +655,9 @@ export default {
       }
 
       let self = this;
+      console.log('benchList',this.benchList);
       let bench = this.benchList.find(b => b.id == benchId);
+      console.log('selectedBench',bench);
       if (this.previousSelectedBenchList.length) {
         this.selectedBenchList = JSON.parse(
           JSON.stringify(this.previousSelectedBenchList)

src/views/squarePage/index.less

@@ -7,6 +7,7 @@
     justify-content: center;
     flex-wrap: wrap;
     .search-container {
+      height: 7.4vh;
       width: 44.9vw;
       margin-top: 11.29vh;
       margin-bottom: 7.87vh;
@@ -16,6 +17,7 @@
       position: relative;
       width: 63.34vw;
       height: 67.79vh;
+      margin-top: -30vh;
       .grid-item-close {
         margin-left: 16.69vw;
         margin-top: -21.94vh;
@@ -40,7 +42,7 @@
   }
 
   .square-count {
-    height: 16.57vh;
+    height: 22.38vh;
     margin-bottom: 1.85vh;
     background: rgba(0, 0, 0, 0.49);
     border-radius: 2.08vw;
@@ -51,10 +53,20 @@
     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;
+    //height: 49.27vh;
     margin-left: 1.56vw;
   }
   .square-list {

src/views/squarePage/list.vue

@@ -24,9 +24,35 @@
             </div>
         </div>
         <div class="square-right">
-            <div class="square-count">
+            <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.selected" @dblclick="handleInfoDblClick(currentBench.benchId)">
+              <div>
+                <span>Location:</span>
+                <span>Automation Lab-7E</span>
+              </div>
+              <div>
+                <span>MU_SW</span>
+                <span>{{ currentBench.MU_SW }}</span>
+              </div>
+              <div>
+                <span>Cluster</span>
+                <span>{{ currentBench.Cluster }}</span>
+              </div>
+              <div>
+                <span>Market</span>
+                <span>{{ currentBench.Market }}</span>
+              </div>
+              <div>
+                <span>Box IP</span>
+                <span>{{ currentBench.ip }}</span>
+              </div>
+              <div>
+                <span>Box Version</span>
+                <span>{{ currentBench.equipment?.version }}</span>
+              </div>
+            </div>
             <div class="square-list">
                 <TabList :tabs="tabs" :itemRender="itemRender" :tabClass="tabClass"></TabList>
             </div>
@@ -61,6 +87,7 @@
         data() {
             return {
               currentBenchId: 0,
+              currentBench: {},
                 inputValue: '',
                 isOpen: false,
                 gridItems: [1, 2, 3, 4, 5, 6, 7, 8, 9],
@@ -357,8 +384,92 @@
             onClickOutside() {
             },
             handleListClick(benchId,itemtype) {
+              if(itemtype == 2)
+              {
+                return;
+              }
+              this.$nextTick(() => {
+                if(benchId == this.currentBench.benchId)
+                {
+                  benchId = 0;
+                  let items = document.getElementsByClassName('grid-item-background');
+                  for(var index = 0; index<items.length;index++)
+                  {
+                    items[index].style.background = "#000000"
+                  }
+                  this.currentBench = {};
+                  return;
+                }
+                let items = document.getElementsByClassName('grid-item-background');
+                for(var index = 0; index<items.length;index++)
+                {
+                  items[index].style.background = "#000000";
+                  if(this.images[index].alt == benchId)
+                  {
+                    console.log('equal');
+                    items[index].style.background = "#ffffff"
+                  }
+                }
+              });
+
+                //this.currentBench = this.benchList.find(b => b.id == benchId);
+                //this.isDetailVisible = true;
+                this.$nextTick(() => {
+                    //this.$refs.benchdetail.init(benchId);
+                    //this.benchList.forEach(element => 
+                    //{
+                    //  element.style = "{background: rgba(0, 0, 0, 1)}"
+                    //});
+                    if(benchId == this.currentBench.id && this.currentBench.selected == true)
+                    {
+                      this.currentBench.selected = false;
+                      this.currentBench = {};
+                      let items = document.getElementsByClassName('item-box');
+                      for(var index = 0; index<items.length;index++)
+                      {
+                        items[index].style.background = "#00000032"
+                      }
+                      return;
+                    }
+                    let items = document.getElementsByClassName('item-box');
+                    for(var index = 0; index<items.length;index++)
+                    {
+                      items[index].style.background = "#00000032"
+                      let title = items[index].getElementsByClassName('item-title');
+                      console.log('textContent',title[0].textContent)
+                      let itemOther = this.benchList.find(b => parseInt(b.id) == parseInt(title[0].textContent));
+                      itemOther.selected = false;
+                      if(parseInt(benchId) == parseInt(title[0].textContent))
+                      {
+                        items[index].style.background = "#000000C0"
+                        this.currentBench = this.benchList.find(b => b.id == benchId);
+                        this.currentBench.selected = true;
+                      }
+                    }
+                });
+                
             },
             handleListDbClick(benchId,itemtype) {
+              if(itemtype == 2)
+              {
+                window.location.href = '/task2?m=8b934420_ZJUb_b6f9';
+                return;
+              }
+              
+                //this.currentBench = this.benchList.find(b => b.id == benchId);
+                //this.isDetailVisible = true;
+                this.$nextTick(() => {
+                    //this.$refs.benchdetail.init(benchId);
+                    //this.benchList.forEach(element => 
+                    //{
+                    //  element.style = "{background: rgba(0, 0, 0, 1)}"
+                    //});
+                    this.currentBench = this.benchList.find(b => b.id == benchId);
+                    //this.currentBench.style = "{background: rgba(0, 0, 0, 1)}"
+                    console.log('current bench',this.currentBench)
+                    this.isRemoteBtnVisible = true;
+                    this.isDetailVisible = true;
+                });
             },
             getBenchImage(benchId, screenType, wsRemote, func) {
               let self = this;
@@ -382,33 +493,58 @@
             },
             handleClickImg(benchId,indexParam) {
               this.$nextTick(() => {
-                    //this.$refs.benchdetail.init(benchId);
-                    //this.benchList.forEach(element => 
-                    //{
-                    //  element.style = "{background: rgba(0, 0, 0, 1)}"
-                    //});
-                    if(benchId == this.currentBenchId)
-                    {
-                      benchId = 0;
-                      let items = document.getElementsByClassName('grid-item-background');
-                      for(var index = 0; index<items.length;index++)
-                      {
-                        items[index].style.background = "#000000"
-                      }
-                      return;
-                    }
-                    this.currentBenchId = benchId;
-                    let items = document.getElementsByClassName('grid-item-background');
-                    for(var index = 0; index<items.length;index++)
-                    {
-                      items[index].style.background = "#000000";
-                      if(index == indexParam)
-                      {
-                        console.log('equal');
-                        items[index].style.background = "#ffffff"
-                      }
-                    }
-                });
+                if(benchId == this.currentBenchId)
+                {
+                  benchId = 0;
+                  let items = document.getElementsByClassName('grid-item-background');
+                  for(var index = 0; index<items.length;index++)
+                  {
+                    items[index].style.background = "#000000"
+                  }
+                  return;
+                }
+                this.currentBenchId = benchId;
+                let items = document.getElementsByClassName('grid-item-background');
+                for(var index = 0; index<items.length;index++)
+                {
+                  items[index].style.background = "#000000";
+                  if(index == indexParam)
+                  {
+                    console.log('equal');
+                    items[index].style.background = "#ffffff"
+                  }
+                }
+              });
+              this.$nextTick(() => {
+              if(benchId == this.currentBench.id && this.currentBench.selected == true)
+              {
+                this.currentBench.selected = false;
+                this.currentBench.scale = 1;
+                this.currentBench = {};
+                let items = document.getElementsByClassName('item-box');
+                for(var index = 0; index<items.length;index++)
+                {
+                  items[index].style.background = "#00000032"
+                }
+                return;
+              }
+              let items = document.getElementsByClassName('item-box');
+              for(var index = 0; index<items.length;index++)
+              {
+                items[index].style.background = "#00000032"
+                let title = items[index].getElementsByClassName('item-title');
+                console.log('textContent',title[0].textContent)
+                let itemOther = this.benchList.find(b => parseInt(b.id) == parseInt(title[0].textContent));
+                itemOther.selected = false;
+                if(parseInt(benchId) == parseInt(title[0].textContent))
+                {
+                  items[index].style.background = "#000000C0"
+                  this.currentBench = this.benchList.find(b => b.id == benchId);
+                  this.currentBench.selected = true;
+                }
+              }
+              });
+
             },
             handleCloseImg(benchId) {
               var strRemoteBenchList = window.localStorage.getItem('remoteBenchList');
@@ -443,3 +579,21 @@
         }
     }
 </script>
+<style scoped>
+.origin-basic {
+  padding: 15px 20px;
+  color: #ccc;
+  font-size: 12px;
+}
+.origin-basic div {
+  margin-bottom: 10px;
+}
+.origin-basic div span {
+  margin-right: 12px;
+}
+.origin-basic h2 {
+  cursor: pointer;
+  font-size: 14px;
+  margin-bottom: 15px;
+}
+</style>