修改九宫格多个设备高亮问题

src/views/ordinaryPage/components/TableComponent/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="table-box benchList">
     <div class="btn-box">
-      <el-select v-model="statusValue" placeholder="Status" @change="changeFilter('status')">
+      <el-select v-model="statusValue"  placeholder="Status" @change="changeFilter('status')">
         <el-option
           v-for="item in statusOptions"
           :key="item.value"

src/views/ordinaryPage/index.vue

@@ -288,41 +288,63 @@
             class="btn-item"
             :class="{ benchBtnActive: isPlaying }"
           >
-            <img
-              @click="connectAudioDevice('collectAudio')"
-              src="../../images/sound.png"
-            />
+			<el-tooltip class="item" effect="dark" content="音量" placement="top-start">
+		        <img
+		          @click="connectAudioDevice('collectAudio')"
+		          src="../../images/sound.png"
+		        />
+		    </el-tooltip>
+            
           </el-col>
           <el-col
             :span="3"
             class="btn-item"
             :class="{ benchBtnActive: isRecording }"
           >
-            <img
-              @click="connectAudioDevice('playAudio')"
-              src="../../images/mic.png"
-            />
+		  <el-tooltip class="item" effect="dark" content="麦克风" placement="top-start">
+		      <img
+		        @click="connectAudioDevice('playAudio')"
+		        src="../../images/mic.png"
+		      />
+		  </el-tooltip>
+            
           </el-col>
           <el-col
             :span="3"
             class="btn-item"
             :class="{ benchBtnActive: displayTapMode }"
           >
-            <img @click="tapModeControl" src="../../images/pointer.png" />
+		  <el-tooltip class="item" effect="dark" content="点击" placement="top-start">
+		      <img @click="tapModeControl" src="../../images/pointer.png" />
+		  </el-tooltip>
+            
           </el-col>
           <el-col :span="3" class="btn-item" v-show="false">
-            <img @click="showLogBox" src="../../images/book.png" />
+			  <el-tooltip class="item" effect="dark" content="日志" placement="top-start">
+			      <img @click="showLogBox" src="../../images/book.png" />
+			  </el-tooltip>
+            
           </el-col>
           <el-col :span="3" class="btn-item">
-            <img @click="pressPtt" src="../../images/robot.png" />
+            
+			<el-tooltip class="item" effect="dark" content="唤醒语音助手按钮" placement="top-start">
+			    <img @click="pressPtt" src="../../images/robot.png" />
+			</el-tooltip>
           </el-col>
           <!-- <el-col :span="3" class="btn-item" @click="clickBenchList">
-            <img @click="gotoGrid" src="../../images/grid.png" />
+		  <el-tooltip class="item" effect="dark" content="最小化按钮" placement="top-start">
+		      <img @click="gotoGrid" src="../../images/grid.png" />
+		  </el-tooltip>
+            
           </el-col> -->
           <el-col :span="3" class="btn-item">
-            <img @click="disconnectBench" src="../../images/disconnect.png" />
+			  <el-tooltip class="item" effect="dark" content="断开远程控制按钮" placement="top-start">
+			      <img @click="disconnectBench" src="../../images/disconnect.png" />
+			  </el-tooltip>
+            
           </el-col>
         </el-row>
+        
       </div>
 
       <div class="origin-right">
@@ -760,7 +782,8 @@ export default {
       waterdotrefresh: false,
       selectedBenchId: 0,
       benchDetail: {},
-      mouseBenchDetail: {}
+      mouseBenchDetail: {},
+      brnchshow:true,//用来判断是否点击过一次
     };
   },
   computed: {
@@ -2580,15 +2603,25 @@ export default {
       this.selectBench(benchId);
     },
     handleClickImg(benchId, indexParam) {
+      console.log(benchId)
       this.selectedBenchId = benchId;
       this.$nextTick(() => {
+        console.log(this.currentBenchId)
         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";
+          
+          console.log(this.brnchshow)
+          if(this.brnchshow){
+            benchId = 0;
+            let items = document.getElementsByClassName("grid-item-background");
+            for (var index = 0; index < items.length; index++) {
+              items[index].style.background = "#000000";
+            }
+            this.brnchshow = false;
+            
+            return;
+          }else{
+            this.brnchshow = true;
           }
-          return;
         }
         this.currentBenchId = benchId;
         let items = document.getElementsByClassName("grid-item-background");