格式化 list.vue

src/views/originPage/list.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="origin-container">
     <div class="origin-left">
-      <SearchBar class="search-container" 
-        v-model="inputValue" 
-        @focus="onFocus" 
+      <SearchBar
+        class="search-container"
+        v-model="inputValue"
+        @focus="onFocus"
         @input="onInput"
         @blur="onBulr"
         ref="searchbar"
@@ -12,9 +13,13 @@
         <Transition name="slide">
           <div class="bmMap" v-if="false">
             <dropdown :is-open="isOpen" ref="dropdown">
-                <template v-slot:table>
-                    <table-component :data="benchList" :filters="filters" :row-class-name="rowClassName"></table-component>
-                </template>
+              <template v-slot:table>
+                <table-component
+                  :data="benchList"
+                  :filters="filters"
+                  :row-class-name="rowClassName"
+                ></table-component>
+              </template>
             </dropdown>
             <div class="bmMapImage">
               <div
@@ -64,7 +69,7 @@
               <img
                 class="bmBenchImg bmBenchImgUpper"
                 ref="bmBenchRef"
-                :src="currentScreen=='upper'?benchImgUpper:benchImgLower"
+                :src="currentScreen == 'upper' ? benchImgUpper : benchImgLower"
                 alt=""
               />
               <div
@@ -150,31 +155,41 @@
         class="image-container"
       />
       <el-row class="bench-button">
-        <el-col :span="5" class="btn-item" style="text-align: center"
-          >{{ currentBench.name }}</el-col
-        >
+        <el-col :span="5" class="btn-item" style="text-align: center">{{
+          currentBench.name
+        }}</el-col>
         <el-col :span="3" class="btn-item">
-            <img @click="connectAudioDevice('collectAudio')" src="../../images/sound.png"/>
+          <img
+            @click="connectAudioDevice('collectAudio')"
+            src="../../images/sound.png"
+          />
         </el-col>
         <el-col :span="3" class="btn-item">
-            <img @click="connectAudioDevice('playAudio')" src="../../images/mic.png"/>
+          <img
+            @click="connectAudioDevice('playAudio')"
+            src="../../images/mic.png"
+          />
         </el-col>
         <el-col :span="3" class="btn-item">
-            <img @click="tapModeControl" src="../../images/pointer.png"/>
+          <img @click="tapModeControl" src="../../images/pointer.png" />
         </el-col>
         <el-col :span="3" class="btn-item">
-            <img @click="showLogBox" src="../../images/book.png"/>
+          <img @click="showLogBox" src="../../images/book.png" />
         </el-col>
         <el-col :span="3" class="btn-item">
-            <img @click="pressPtt" src="../../images/robot.png"/>
+          <img @click="pressPtt" src="../../images/robot.png" />
         </el-col>
         <el-col :span="3" class="btn-item">
-            <img @click="gotoGrid" src="../../images/grid.png"/>
+          <img @click="gotoGrid" src="../../images/grid.png" />
         </el-col>
       </el-row>
     </div>
     <div class="origin-right">
-      <div class="origin-basic" v-show="currentBench.type == 2" @dblclick="handleInfoDblClick(currentBench.benchId)">
+      <div
+        class="origin-basic"
+        v-show="currentBench.type == 2"
+        @dblclick="handleInfoDblClick(currentBench.benchId)"
+      >
         <h2 @click="bmMapItemActivate">{{ currentBench.name }} 🔗</h2>
         <div>
           <span>Location:</span>
@@ -201,36 +216,56 @@
           <span>{{ currentBench.equipment?.version }}</span>
         </div>
       </div>
-      <div class="secondScreen" v-if="benchDisplayLowerVisible" @click="switchScreen">
+      <div
+        class="secondScreen"
+        v-if="benchDisplayLowerVisible"
+        @click="switchScreen"
+      >
         <img
           class="bmBenchImg bmBenchImgLower"
-          :src="currentScreen=='upper'?benchImgLower:benchImgUpper"
+          :src="currentScreen == 'upper' ? benchImgLower : benchImgUpper"
           alt=""
         />
       </div>
       <div class="origin-list">
-        <TabList :tabs="tabs" :itemRender="itemRender" :tabClass="tabClass"></TabList>
+        <TabList
+          :tabs="tabs"
+          :itemRender="itemRender"
+          :tabClass="tabClass"
+        ></TabList>
       </div>
     </div>
-    <bench-detail :is-detail-visible="isDetailVisible" :closeDetail="closeDetail" :bench="currentBench" ref="dropdown">
+    <bench-detail
+      :is-detail-visible="isDetailVisible"
+      :closeDetail="closeDetail"
+      :bench="currentBench"
+      ref="dropdown"
+    >
     </bench-detail>
   </div>
 </template>
 <script>
 import "./index.less";
-import Dropdown from './components/DropDown';
-import TableComponent from './components/TableComponent/index.vue';
+import Dropdown from "./components/DropDown";
+import TableComponent from "./components/TableComponent/index.vue";
 import TabList from "../../components/TabList";
 import SearchBar from "../../components/SearchBar";
 import ImageList from "./components/ImageList";
 import BenchDetail from "../../components/BenchDetail";
 import webSocket from "../../service/ws";
 import bus from "../../service/bus";
-import { mapState } from "vuex"
+import { mapState } from "vuex";
 
 const ws = new webSocket();
 export default {
-  components: { Dropdown, TableComponent, TabList, SearchBar, ImageList, BenchDetail },
+  components: {
+    Dropdown,
+    TableComponent,
+    TabList,
+    SearchBar,
+    ImageList,
+    BenchDetail,
+  },
   data() {
     return {
       inputValue: "",
@@ -239,18 +274,15 @@ export default {
       tabs: [
         {
           title: "Bench",
-          list: [
-          ],
+          list: [],
         },
         {
           title: "Task",
-          list: [
-          ],
+          list: [],
         },
         {
           title: "Issue",
-          list: [
-          ],
+          list: [],
         },
       ],
       tableData: [
@@ -288,47 +320,47 @@ export default {
       ifBmBenchTrailUpperCursorTap: false,
       benchLog: [],
       trailCursorPosition: {},
-      audioName: '',
+      audioName: "",
       ifBmBenchTrailUpperCursorSwipe: false,
       ifBmBenchTrailUpperCursorPress: false,
       ifBmBenchTrailUpperCursor: false,
       controlStartPoint: {},
       ifShowLogBox: false,
       filterData: {
-        "keyword":"",
-        "currentPage":1,
-        "pageSize":10,
-        "status": [4,3,5,0,2, 6],
-        "types": [],
+        keyword: "",
+        currentPage: 1,
+        pageSize: 10,
+        status: [4, 3, 5, 0, 2, 6],
+        types: [],
         "basic attributes": [],
-        "ips": [],
-        "orderBy": "desc",
-        "orderkey": "id"
+        ips: [],
+        orderBy: "desc",
+        orderkey: "id",
       },
-      inputValue: '',
+      inputValue: "",
       filters: [],
-      benchImgUpper: '',
+      benchImgUpper: "",
       currentScreen: "upper",
       benchDisplayLowerVisible: false,
       isPlaying: false,
       loopSendAudioTime: null,
-      sendAudioString:"",
+      sendAudioString: "",
     };
   },
   computed: {
-    tabClass(){
-        return this.currentBench.type == 2 ? 'short': 'long'
+    tabClass() {
+      return this.currentBench.type == 2 ? "short" : "long";
     },
     ...mapState({
-        images: state => {
-            console.log(state.benchList.benchImgList, 'imageList')
-            return state.benchList.benchImgList
-        },
-        benchList: state => {
-            return state.benchList.benchList;
-        },
-        issueList: state => state.issueList.issueList
-    })
+      images: (state) => {
+        console.log(state.benchList.benchImgList, "imageList");
+        return state.benchList.benchImgList;
+      },
+      benchList: (state) => {
+        return state.benchList.benchList;
+      },
+      issueList: (state) => state.issueList.issueList,
+    }),
   },
   created() {
     ws.open().then((res) => {
@@ -341,20 +373,20 @@ export default {
     window.handleListDbClick = this.handleListDbClick;
     let that = this;
     setInterval(() => {
-      that.$store.dispatch('benchList/fetchBenchList');
-    }, 1500)
-    
-    this.$store.dispatch('issueList/fetchIssueList', {
-        "bench_id": "219",
-        "page_num": 1,
-        "page_size": 10,
-        "processor": 0,
-        "ticket_status": 0,
-        "ticket_type": 0
-    })
+      that.$store.dispatch("benchList/fetchBenchList");
+    }, 1500);
+
+    this.$store.dispatch("issueList/fetchIssueList", {
+      bench_id: "219",
+      page_num: 1,
+      page_size: 10,
+      processor: 0,
+      ticket_status: 0,
+      ticket_type: 0,
+    });
   },
   mounted() {
-    console.log(this.benchList, 'benchList')
+    console.log(this.benchList, "benchList");
     this.tabs[0].list = this.benchList;
     bus.on("newLog", (param) => {
       if (param.action) {
@@ -409,98 +441,94 @@ export default {
     });
 
     let self = this;
-    var strRemoteBenchList = window.localStorage.getItem('remoteBenchList');
+    var strRemoteBenchList = window.localStorage.getItem("remoteBenchList");
     var objRBL = JSON.parse(strRemoteBenchList);
-    console.log('zmg1',objRBL);
+    console.log("zmg1", objRBL);
     var objRBLReverse = [];
-    for(;objRBL.length>0;)
-    {
+    for (; objRBL.length > 0; ) {
       objRBLReverse.push(objRBL.pop());
-    }    
-    if (objRBLReverse.length>0) {
-      setTimeout(()=>{
+    }
+    if (objRBLReverse.length > 0) {
+      setTimeout(() => {
         this.getImgList(objRBLReverse);
-      },300)
+      }, 300);
     }
   },
 
-
   methods: {
-    getImgList(objRBL)
-    {
-      console.log('zmg3',objRBL)
+    getImgList(objRBL) {
+      console.log("zmg3", objRBL);
       let benchId = objRBL.pop();
-      if (benchId == null)
-      {
-        console.log('zmg2')
+      if (benchId == null) {
+        console.log("zmg2");
         setTimeout(() => {
           let href = window.location.href;
-          if(href.indexOf('benchid=')!=-1)
-          {
-            let benchid = href.substring(href.indexOf('benchid=')+8);
-            console.log('benchid',benchid);
-            this.selectBench(parseInt(benchid))
+          if (href.indexOf("benchid=") != -1) {
+            let benchid = href.substring(href.indexOf("benchid=") + 8);
+            console.log("benchid", benchid);
+            this.selectBench(parseInt(benchid));
           }
         }, 200);
         return;
       }
       let self = this;
-      
-      console.log('benchId',benchId)
+
+      console.log("benchId", benchId);
       ws.connectBench({ bench_id: String(benchId) })
-      .then((res) => {
-        ws.getImage(String(benchId), 1).then((res) => {
-          
-          self.$store.dispatch('benchList/setBenchImgList', {benchId, img: res.data.data});
-          self.getImgList(objRBL);
-          //// let screen = screenType == 1 ? "upper" : "lower";
-          //if (screenType == 1) {
-          //  self.benchImgUpper = "data:image/png;base64," + res.data.data;
-          //} else {
-          //  self.benchImgLower = "data:image/png;base64," + res.data.data;
-          //}
-          // let screen = res.data.screen_type;
-          //if (benchId == this.connetedBenchId) {
-          //  self.getBenchImage(benchId, screenType, func);
-          //  this.$store.dispatch('benchList/setBenchImgList', {benchId, img: res.data.data});
-          //}
-        });
-      })
-      .catch((err) => {
-          console.log('connect bench failed',benchId);
+        .then((res) => {
+          ws.getImage(String(benchId), 1).then((res) => {
+            self.$store.dispatch("benchList/setBenchImgList", {
+              benchId,
+              img: res.data.data,
+            });
+            self.getImgList(objRBL);
+            //// let screen = screenType == 1 ? "upper" : "lower";
+            //if (screenType == 1) {
+            //  self.benchImgUpper = "data:image/png;base64," + res.data.data;
+            //} else {
+            //  self.benchImgLower = "data:image/png;base64," + res.data.data;
+            //}
+            // let screen = res.data.screen_type;
+            //if (benchId == this.connetedBenchId) {
+            //  self.getBenchImage(benchId, screenType, func);
+            //  this.$store.dispatch('benchList/setBenchImgList', {benchId, img: res.data.data});
+            //}
+          });
+        })
+        .catch((err) => {
+          console.log("connect bench failed", benchId);
           self.$message({
             message: "This bench is offline",
             // message: "",
             type: "warning",
           });
         });
-        
     },
-    rowClassName () {
-        return ''
+    rowClassName() {
+      return "";
     },
     onFocus() {
-        this.isOpen = true;
+      this.isOpen = true;
     },
     onInput(value) {
-        this.inputValue = value;
+      this.inputValue = value;
     },
     onBulr() {
-        this.isOpen = false
+      this.isOpen = false;
     },
     closeDetail() {
-        this.isDetailVisible = false;
+      this.isDetailVisible = false;
     },
     gotoGrid() {
-        this.$router.push({
-            path: '/squarePage'
-        })
+      this.$router.push({
+        path: "/squarePage",
+      });
     },
     itemRender(item) {
-        // console.log(item, 'bench---item')
+      // console.log(item, 'bench---item')
 
-        item.image = require('../../assets/mechine.png')
-        /*return `
+      item.image = require("../../assets/mechine.png");
+      /*return `
                 <div class="item-box">
                     <div class="item-image"><img src="${item.image}" alt="${item.title}"></div>
                     <div class="item-right">
@@ -526,7 +554,7 @@ export default {
                         </div>
                     </div>
                 </div>`;*/
-                return `
+      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">
@@ -551,12 +579,10 @@ export default {
                     </div>
                 </div>
             </div>`;
-
-
     },
     handleImageClick(index) {
       console.log("点击了图片，索引为：", index);
-      this.selectBench(parseInt(this.images[index].alt))
+      this.selectBench(parseInt(this.images[index].alt));
     },
     prevPage() {
       if (this.currentPage > 1) {
@@ -569,53 +595,54 @@ export default {
       }
     },
     handleListDbClick(benchId) {
-      console.log('handleListClick',benchId);
-      this.currentBench = this.benchList.find(b => b.id == 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);
-      
+      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;
+        //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";
           }
-          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;
-            }
+          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() {},
@@ -631,38 +658,33 @@ export default {
       this.mainSnapshot = "data:image/jpeg;base64," + data;
     },
     selectBench(benchId) {
-      var strRemoteBenchList = window.localStorage.getItem('remoteBenchList');
+      var strRemoteBenchList = window.localStorage.getItem("remoteBenchList");
       var objRBL = JSON.parse(strRemoteBenchList);
-      if (objRBL && objRBL.length>0) {
+      if (objRBL && objRBL.length > 0) {
         var bExist = false;
-        for(var i = 0; i< objRBL.length;i++)
-        {
-          if(objRBL[i] == benchId)
-          {
+        for (var i = 0; i < objRBL.length; i++) {
+          if (objRBL[i] == benchId) {
             bExist = true;
-          }
-          else
-          {
-            
+          } else {
           }
         }
-        if(bExist == false)
-        {
+        if (bExist == false) {
           objRBL.push(benchId);
-          window.localStorage.setItem('remoteBenchList',JSON.stringify(objRBL));
+          window.localStorage.setItem(
+            "remoteBenchList",
+            JSON.stringify(objRBL)
+          );
         }
-      }
-      else
-      {
-        var rml= [];
+      } else {
+        var rml = [];
         rml.push(benchId);
-        window.localStorage.setItem('remoteBenchList',JSON.stringify(rml));
+        window.localStorage.setItem("remoteBenchList", JSON.stringify(rml));
       }
 
       let self = this;
-      console.log('benchList',this.benchList);
-      let bench = this.benchList.find(b => b.id == benchId);
-      console.log('selectedBench',bench);
+      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)
@@ -670,13 +692,13 @@ export default {
       }
       this.previousSelectedBenchList = [];
       this.platform = null;
-      this.benchList.forEach(b => b.selected = false)
+      this.benchList.forEach((b) => (b.selected = false));
       bench.selected = !bench.selected;
       if (bench.selected) {
         this.currentBench = bench;
-        bench.benchId = "'"+bench.benchId+"'";
+        bench.benchId = "'" + bench.benchId + "'";
         this.selectedBenchList.push(bench);
-        console.log('selected',this.selectedBenchList)
+        console.log("selected", this.selectedBenchList);
         // this.images = this.selectedBenchList.map((s) => {
         //   return {
         //     url: "",
@@ -704,7 +726,6 @@ export default {
       } else {
         self.bmMapItemActivate(bench.id);
       }
-    
     },
     bmMapItemActivate(benchId) {
       let self = this;
@@ -736,10 +757,10 @@ export default {
       this.connetedBenchId = String(benchId);
       // this.connectedBenchData = this.benchList[key];
       setTimeout(() => {
-        console.log('connect bench',benchId);
+        console.log("connect bench", benchId);
         ws.connectBench({ bench_id: String(benchId) })
           .then((res) => {
-            console.log('connect bench success');
+            console.log("connect bench success");
             this.currentScreen = "upper";
             self.setSendAudioBus(benchId);
             self.getBenchImage(benchId, 1, () => {
@@ -757,7 +778,7 @@ export default {
             }
           })
           .catch((err) => {
-            console.log('connect bench failed');
+            console.log("connect bench failed");
             this.benchList[key].acitveAnimation = false;
             this.$message({
               message: "This bench is offline",
@@ -782,18 +803,21 @@ export default {
           // let screen = res.data.screen_type;
           if (benchId == this.connetedBenchId) {
             self.getBenchImage(benchId, screenType, func);
-            this.$store.dispatch('benchList/setBenchImgList', {benchId, img: res.data.data});
+            this.$store.dispatch("benchList/setBenchImgList", {
+              benchId,
+              img: res.data.data,
+            });
           }
         });
       }, 500);
     },
-    switchScreen(){
-      if(this.currentScreen == "upper"){
-        this.currentScreen = "lower"
-      }else{
-        this.currentScreen = "upper"
+    switchScreen() {
+      if (this.currentScreen == "upper") {
+        this.currentScreen = "lower";
+      } else {
+        this.currentScreen = "upper";
       }
-      console.log('this.currentScreen', this.currentScreen);
+      console.log("this.currentScreen", this.currentScreen);
     },
     controlCursorMouseDown(e) {
       let self = this;
@@ -820,9 +844,9 @@ export default {
     },
     controlCursorMouseUp(e, screenType = 1) {
       let self = this;
-      if(this.currentScreen == "upper"){
+      if (this.currentScreen == "upper") {
         screenType = 1;
-      }else if(this.currentScreen == "lower"){
+      } else if (this.currentScreen == "lower") {
         screenType = 2;
       }
       if (this.displayTapMode) {
@@ -838,7 +862,12 @@ export default {
           Math.abs(this.controlStartPoint.y - e.offsetY) > 30
         ) {
           // console.log("controlStartPoint", controlStartPoint);
-          self.singleFingerOperation(e, "swipe", screenType, this.controlStartPoint);
+          self.singleFingerOperation(
+            e,
+            "swipe",
+            screenType,
+            this.controlStartPoint
+          );
         } else if (Date.now() - this.controlStartPoint.time > 500) {
           self.singleFingerOperation(
             e,
@@ -872,17 +901,19 @@ export default {
         seconds;
       return now;
     },
-    singleFingerTouch(id, x, y,screenType) {
+    singleFingerTouch(id, x, y, screenType) {
       let self = this;
-      ws.singleFingerTouch(id, x, y,screenType).then((res) => {});
+      ws.singleFingerTouch(id, x, y, screenType).then((res) => {});
     },
-    singleFingerDrag(id, x1, y1, x2, y2,screenType) {
+    singleFingerDrag(id, x1, y1, x2, y2, screenType) {
       let self = this;
-      ws.singleFingerDrag(id, x1, y1, x2, y2,screenType).then((res) => {});
+      ws.singleFingerDrag(id, x1, y1, x2, y2, screenType).then((res) => {});
     },
-    singleFingerLongTouch(id, x, y, duration,screenType) {
+    singleFingerLongTouch(id, x, y, duration, screenType) {
       let self = this;
-      ws.singleFingerLongTouch(id, x, y, duration,screenType).then((res) => {});
+      ws.singleFingerLongTouch(id, x, y, duration, screenType).then(
+        (res) => {}
+      );
     },
     controlCursorMouseDown(e) {
       let self = this;
@@ -918,8 +949,8 @@ export default {
         let offsetX = e.offsetX;
         let offsetY = e.offsetY;
 
-        let screenWidth = this.currentScreen=="upper"?1540:1280;
-        let screenHeight = this.currentScreen=="upper"?720:720;
+        let screenWidth = this.currentScreen == "upper" ? 1540 : 1280;
+        let screenHeight = this.currentScreen == "upper" ? 720 : 720;
 
         let x = Math.round(screenWidth * (offsetX / width));
         let y = Math.round(screenHeight * (offsetY / height));
@@ -938,25 +969,15 @@ export default {
         // console.log("y1", y1);
         let operationDesc = "";
         if (operation == "tap") {
-          console.log('selected',this.connetedBenchId,x,y)
-          self.singleFingerTouch(
-            this.connetedBenchId,
-            x,
-            y, screenType
-          );
+          console.log("selected", this.connetedBenchId, x, y);
+          self.singleFingerTouch(this.connetedBenchId, x, y, screenType);
           // tap on lower x: 48 y: 292
           operationDesc =
             "tap on " +
             (screenType == 1 ? "upper " : "lower ") +
             ("x: " + x + " y: " + y);
         } else if (operation == "swipe") {
-          self.singleFingerDrag(
-            this.connetedBenchId,
-            x1,
-            y1,
-            x,
-            y, screenType
-          );
+          self.singleFingerDrag(this.connetedBenchId, x1, y1, x, y, screenType);
           operationDesc =
             "swipe on " +
             (screenType == 1 ? "upper " : "lower ") +
@@ -966,7 +987,8 @@ export default {
             this.connetedBenchId,
             x,
             y,
-            Date.now() - startPoint.time, screenType
+            Date.now() - startPoint.time,
+            screenType
           );
           operationDesc =
             "longPress on " +
@@ -1114,14 +1136,14 @@ export default {
         this.benchList[i].selected = false;
         if (this.benchList[i][field] == value) {
           this.benchList[i].selected = true;
-          this.benchList[i].benchId = "'"+this.benchList[i].benchId+"'";
+          this.benchList[i].benchId = "'" + this.benchList[i].benchId + "'";
           this.selectedBenchList.push(this.benchList[i]);
-        //   this.images = this.selectedBenchList.map((s) => {
-        //     return {
-        //       url: "",
-        //       alt: s.name,
-        //     };
-        //   });
+          //   this.images = this.selectedBenchList.map((s) => {
+          //     return {
+          //       url: "",
+          //       alt: s.name,
+          //     };
+          //   });
         }
       }
     },
@@ -1142,15 +1164,14 @@ export default {
         for (let i in this.benchList) {
           this.benchList[i].selected = true;
           this.selectedBenchList.push(this.benchList[i]);
-        //   this.images = this.selectedBenchList.map((s) => {
-        //     return {
-        //       url: "",
-        //       alt: s.name,
-        //     };
-        //   });
+          //   this.images = this.selectedBenchList.map((s) => {
+          //     return {
+          //       url: "",
+          //       alt: s.name,
+          //     };
+          //   });
         }
       }
-
     },
     tapModeControl() {
       this.displayTapMode = !this.displayTapMode;
@@ -1210,9 +1231,7 @@ export default {
 
       this.vadThreshold = 0;
       if (this.isRecording) {
-        this.playAudioBenchList.push(
-          this.selectedBenchList[0].benchId
-        );
+        this.playAudioBenchList.push(this.selectedBenchList[0].benchId);
         // this.changePlayAudioBenchList(params);
         navigator.getUserMedia =
           navigator.getUserMedia ||
@@ -1461,7 +1480,7 @@ export default {
       }
       this.previousSelectedBenchList = [];
       this.platform = null;
-      this.benchList.forEach(b => b.selected = false)
+      this.benchList.forEach((b) => (b.selected = false));
       this.benchList[key].selected = !this.benchList[key].selected;
       if (this.benchList[key].selected) {
         this.currentBench = this.benchList[key];
@@ -1626,8 +1645,8 @@ export default {
   transition: all 0.2s ease-in-out;
 }
 
-.bmMapItemInfo span+span{
-    margin-top: 5px;
+.bmMapItemInfo span + span {
+  margin-top: 5px;
 }
 
 .bmMapItemInfoSelected > span {
@@ -2048,7 +2067,7 @@ export default {
 }
 
 .bmInfoMsSlideNameStatus {
-    float:right;
+  float: right;
 }
 
 .bmInfoMsSlideNameStatus,
@@ -2220,40 +2239,40 @@ export default {
   margin-bottom: 15px;
 }
 .ready {
-    color: #65c94c !important;
-    font-size: 30px;
+  color: #65c94c !important;
+  font-size: 30px;
 }
 .occupied {
-    color: #478bc3 !important;
-    font-size: 30px;
+  color: #478bc3 !important;
+  font-size: 30px;
 }
 .offline {
-    color: #cdd0cf !important;
-    font-size: 30px;
+  color: #cdd0cf !important;
+  font-size: 30px;
 }
 .offline {
-    color: red !important;
-    font-size: 30px;
+  color: red !important;
+  font-size: 30px;
 }
 .bmInfoMsSlideNameStatus.ready {
-    color: #65c94c !important;
-    border: 3px solid #65c94c;
-    font-size: 30px;
+  color: #65c94c !important;
+  border: 3px solid #65c94c;
+  font-size: 30px;
 }
 .bmInfoMsSlideNameStatus.occupied {
-    color: #478bc3 !important;
-    border: 3px solid #478bc3;
-    font-size: 30px;
+  color: #478bc3 !important;
+  border: 3px solid #478bc3;
+  font-size: 30px;
 }
 .bmInfoMsSlideNameStatus.offline {
-    color: #cdd0cf !important;
-    border: 3px solid #cdd0cf;
-    font-size: 30px;
+  color: #cdd0cf !important;
+  border: 3px solid #cdd0cf;
+  font-size: 30px;
 }
 .bmInfoMsSlideNameStatus.offline {
-    color: red !important;
-    border: 3px solid red;
-    font-size: 30px;
+  color: red !important;
+  border: 3px solid red;
+  font-size: 30px;
 }
 
 .secondScreen {