固定摄像头巡检 定时播放问题修复

src/views/screen/components/video/components/videoPlayNew.vue

@@ -56,7 +56,7 @@
           icon="el-icon-check"
           @click="changeTimingStatus(1)"
           style="background: #a4a4a4; border: 1px solid #a4a4a4; padding: 6px"
-          :disabled="timingStatus"
+          :disabled="!isTimingStatus"
         >
           开启定时
         </el-button>
@@ -68,7 +68,7 @@
           icon="el-icon-error"
           @click="changeTimingStatus(2)"
           style="background: #1aa4e1; border: 1px solid #1aa4e1; padding: 6px"
-          :disabled="!timingStatus"
+          :disabled="isTimingStatus"
         >
           关闭定时
         </el-button>
@@ -441,6 +441,8 @@ export default {
       activePlayVideo: null,
 
       currentPage: 1, // 当前页数
+      regularTimePlay: null,
+      isTimingStatus: false,
     }
   },
   methods: {
@@ -664,8 +666,28 @@ export default {
         startTiming.style.border = '1px solid #1aa4e1'
         closeTiming.style.background = '#a4a4a4'
         closeTiming.style.border = '1px solid #a4a4a4'
+        this.isTimingStatus = true
+      }
+      // this.$emit('changeTimingStatus', type)
+
+      if (type == 1) {
+        // 开启定时
+        if (!this.regularTimePlay) {
+          this.regularTimePlay = setInterval(() => {
+            if (this.currentPage == this.maxPages) {
+              this.currentPage = 1
+            }
+
+            this.onLinePlayerListFun()
+          }, 1000 * 6 * 100) // 十分钟一次
+        }
+      } else {
+        // 关闭定时
+        if (this.regularTimePlay) {
+          clearInterval(this.regularTimePlay)
+          this.regularTimePlay = null
+        }
       }
-      this.$emit('changeTimingStatus', type)
     },
     autoPlayVideo(item) {
       const playerRef = `player${this.activePlayer}`
@@ -705,6 +727,19 @@ export default {
       this.fixedData = res.data
       this.onLineList = this.fixedData.filter(e => e.status == 1)
       this.onLinePlayerListFun()
+      if (!this.isTimingStatus) {
+        // 开启定时
+        if (!this.regularTimePlay) {
+          this.regularTimePlay = setInterval(() => {
+            if (this.currentPage == this.maxPages) {
+              this.currentPage = 1
+            } else {
+              this.currentPage++
+            }
+            this.onLinePlayerListFun()
+          }, 1000 * 6 * 100) // 十分钟一次
+        }
+      }
     },
 
     // 点击视频盒子事件
@@ -807,6 +842,27 @@ export default {
 
   mounted() {
     this.getDeviceList()
+    const startTiming = document.getElementById('startTiming')
+    const closeTiming = document.getElementById('closeTiming')
+    if (!this.iStimingStatus) {
+      startTiming.style.background = '#a4a4a4'
+      startTiming.style.border = '1px solid #a4a4a4'
+      closeTiming.style.background = '#1aa4e1'
+      closeTiming.style.border = '1px solid #1aa4e1'
+    } else {
+      startTiming.style.background = '#1aa4e1'
+      startTiming.style.border = '1px solid #1aa4e1'
+      closeTiming.style.background = '#a4a4a4'
+      closeTiming.style.border = '1px solid #a4a4a4'
+    }
+  },
+
+  beforeDestroy() {
+    // 判断当前页面的定时器是否存在 如存在则关闭
+    if (this.regularTimePlay) {
+      clearInterval(this.regularTimePlay)
+      this.regularTimePlay = null
+    }
   },
 }
 </script>