bug 修复切换标签页时，定时器延迟累积问题

src/views/ordinaryPage/index.vue

@@ -804,6 +804,7 @@ export default {
       gridItems: [1, 2, 3, 4, 5, 6, 7, 8, 9],
       timerIdMap: { num: 0 },
       timerId: 0,
+      timer: null,
       autoPlanResultInterval: 0,
       remoteBenchList: [],
       waterdotrefresh: false,
@@ -1001,53 +1002,46 @@ export default {
       }
     }, 3000);
 
-    // 调用定时器方法，返回定时器id，用于按条件清空
-    that.timerId = that.myInterval((count) => {
-      this.$store.dispatch("benchList/fetchBenchList").then(() => {
-        // 加载右侧台架照片
-        this.getImageName();
-
-        // // 获取奥迪-各台架详情
-        // console.log("循环获取bench_detail")
-        // this.benchList.forEach( (item, index) => {
-        //   this.$store.dispatch("benchList/getBenchDetail", item.id).then(() => {
-        //     console.log(this.benchList.length, index)
-        //     // 获取全部台架信息后
-        //     if (this.benchList.length - 1 == index) { // 此方法判断最后一次请求完成，经常出现元素位乱序问题，导致判断失误
-        //       console.log("台架详情已全部获取完成")
-        //       // 更新台架各状态总台数
-        //       this.refreshBenchStatus();
-        //       // 更新水滴、台架模型
-        //       window.getsqlDataRealTime();
-        //     }
-        //   })
-        // })
-
-        // 获取奥迪-各台架详情
-        let pArr = [];
-        this.benchList.forEach((item, index) => {
-          let p = new Promise((resolve, reject) => {
-            this.$store.dispatch("benchList/getBenchDetail", item.id).then(() => {
-              // console.log(index)
-              resolve()
-            });
-          })
-          pArr.push(p)
-        });
-        // 获取全部台架信息后
-        Promise.all(pArr).then(()=>{
-          // console.log("台架详情已全部获取完成")
-          // 更新台架各状态总台数
-          this.refreshBenchStatus();
-          // 更新水滴、台架模型
-          window.getsqlDataRealTime();
-        });
+    // 启动定时器
+    this.startTimer();
 
-        if (count > 30000) {
-          that.clearMyInterval(that.timerId);
-        }
-      });
-    }, 30000);
+    // 监听标签页切换、最小化事件
+    document.addEventListener("visibilitychange", () => {
+      if (document.hidden === true) { // 页面被挂起
+        clearInterval(this.timer);
+      } else { // 页面由挂起被激活
+        this.startTimer();
+      }
+    });
+
+    // // 调用定时器方法，返回定时器id，用于按条件清空
+    // that.timerId = that.myInterval((count) => {
+    //   console.log("刷新")
+    //   this.$store.dispatch("benchList/fetchBenchList").then(() => {
+    //     // 加载右侧台架照片
+    //     this.getImageName();
+
+    //     // 获取奥迪-各台架详情
+    //     console.log("循环获取bench_detail")
+    //     this.benchList.forEach( (item, index) => {
+    //       this.$store.dispatch("benchList/getBenchDetail", item.id).then(() => {
+    //         console.log(this.benchList.length, index)
+    //         // 获取全部台架信息后
+    //         if (this.benchList.length - 1 == index) { // 此方法判断最后一次请求完成，经常出现元素位乱序问题，导致判断失误
+    //           console.log("台架详情已全部获取完成")
+    //           // 更新台架各状态总台数
+    //           this.refreshBenchStatus();
+    //           // 更新水滴、台架模型
+    //           window.getsqlDataRealTime();
+    //         }
+    //       })
+    //     })
+
+    //     if (count > 30000) {
+    //       that.clearMyInterval(that.timerId);
+    //     }
+    //   });
+    // }, 10000);
 
     bus.on("newLog", (param) => {
       if (param.action) {
@@ -1130,6 +1124,33 @@ export default {
     }
   },
   methods: {
+    startTimer() {
+      this.timer = setInterval(()=>{
+        console.log("shuaxin", Date.now())
+        this.$store.dispatch("benchList/fetchBenchList").then(() => {
+          // 加载右侧台架照片
+          this.getImageName();
+
+          // 获取奥迪-各台架详情
+          let pArr = [];
+          this.benchList.forEach((item, index) => {
+            let p = new Promise((resolve, reject) => {
+              this.$store.dispatch("benchList/getBenchDetail", item.id).then(() => {
+                resolve()
+              });
+            })
+            pArr.push(p)
+          });
+          // 获取全部台架信息后
+          Promise.all(pArr).then(()=>{
+            // 更新台架各状态总台数
+            this.refreshBenchStatus();
+            // 更新水滴、台架模型
+            window.getsqlDataRealTime();
+          });
+        });
+      }, 10000)
+    },
     getImageName() {
       var sqlstr = "SELECT * FROM dat_bench_extend order by bench_id asc";
       let msg = {
@@ -1150,23 +1171,6 @@ export default {
         }
       });
     },
-    // getBenchPos() {
-    //   var sqlstr = "SELECT * FROM dat_bench_extend order by bench_id asc";
-    //   let msg = {
-    //     cmd: "query", // server端要进行判断的
-    //     data: {
-    //       name: "name", // 这个无所谓怎么写，有就行
-    //       //sql: 'select * from his_location_tadiao_result_unity limit 300'
-    //       sql: sqlstr,
-    //     },
-    //   };
-    //   window.vm.$socket.emit("REPT", msg, (datas) => {
-    //     posArrayResult = datas.data;
-    //     window.benchDBList = datas.data;
-    //     window.getsqlData(window.sdkInstance, window.uwbInstance, true, posArrayResult);
-    //   });
-    // },
-
 
     changeCurrentBench(benchId) {
       this.isDetailVisible = false;
@@ -1175,6 +1179,7 @@ export default {
       }
       this.selectBench(benchId);
     },
+    // 自定义定时器
     myInterval(callback, interval) {
       // 每设置一次定时器，num++ 代表系统中有num个自定义的定时器
       this.timerIdMap.num++;