视频轮询功能

src/views/business/alarm/monitor.vue

@@ -7,42 +7,114 @@
             @click="handle(index)">{{item}}</div>
     </div>
     <div class="resize" :style="{ resize: 'both', overflow: 'auto' }"></div>
-    <!-- <div class="flv-container"><FlvPlayerComponent :url="uavDialog.url"/></div> -->
+    <div class="flv-container"><FlvPlayerComponent v-if="videoUrl" :url="videoUrl"/></div>
   </div>
 </template>
 <script setup>
-import { ref } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { dragEvent, resizeEvent } from '@/utils/common'
 import FlvPlayerComponent from '@/components/FlvPlayer/index.vue'
-import { getAssetsFile } from '@/utils/common'
+import { dsVideoList, cctvExport } from '@/api/device.js'
+import useMapStore from '@/store/modules/map'
+import { ElMessage } from 'element-plus'
+
+const mapStore = useMapStore()
+const videoData = computed(() => mapStore.locate.data)
 const tabs = [
-    '重新轮询', '巡检报告'
+    '锁定轮询', '重新轮询', '巡检报告'
 ]
-const active = ref(0)
+const active = ref(null)
+
+const data = ref([])
+const lock = ref(false)
+let timer = null
+let monitorIndex = 0
+const videoUrl = ref('')
+const arr = [ 'https://sl-shandong-stud-166141.chinatowercom.cn:10263/live/37021200001327000138_1_0_be18783a8d444023becb4e96c1c37ffc.flv',
+'https://sl-shandong-stud-166141.chinatowercom.cn:10343/live/37021100001327000007_0_0_9626ad56bd3340cc9554c30454a66f2d.flv',
+'https://sl-shandong-stud-022093.chinatowercom.cn:10073/live/37100200001327000003_0_0_e83bd475262b448b9d06c2d8085a7a9c.flv',
+'http://198.16.74.214:80/Channels0001/Channels0001.live.flv?originTypeStr=pull&audioCodec=G711A&videoCodec=H264' ]
 
 const handle = (index) => {
-    active.value = index
+  active.value = index
+  if(index === 0) {
+    lock.value = true
+    ElMessage.success('锁定成功')
+  }else if(index === 1) {
+    lock.value = false
+    ElMessage.success('成功轮询')
+  }else if(index === 2) { // 巡检报告下载
+    console.log(videoData.value, 'value')
+    // window.open(item.url, '_blank')
+    cctvExport({}).then(res => {
+      console.log(res, 'resssss')
+    })
+  }
+}
+const clearTimer = () => {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+}
+const initIndex = () => {
+  monitorIndex = 0
+}
+const init = () => {
+  const params = {}
+  videoUrl.value = ''
+  dsVideoList(params).then(res => {
+    data.value = res.data.filter(i => i.videoUrl).sort((a, b) => a.playIndex - b.playIndex)
+    videoUrl.value = data.value[monitorIndex].videoUrl
+    mapStore.updateLocate(data.value[monitorIndex])
+    clearTimer()
+    handlePolling(true) // 开始轮询
+    timer = setInterval(() => {
+      if(lock.value) {
+        return false
+      }
+      videoUrl.value = ''
+      nextTick(() => {
+        if(monitorIndex >= data.value.length - 1) {
+          handlePolling(false) // 轮询结束
+          monitorIndex = 0
+          handlePolling(true) // 开始轮询
+        }else{
+          monitorIndex++
+        }
+        videoUrl.value = data.value[monitorIndex].videoUrl
+      })
+      mapStore.updateLocate(data.value[monitorIndex])
+    }, 60 * 1000 * 0.5)
+  })
+}
+const handlePolling = (flag) => {
+  console.log(flag + '---轮询')
 }
 /**
  * 拖拽事件
  * @param e
  *
  */
- const drag = (e) => {
+const drag = (e) => {
   if(e.target.className === 'resize') {
-resizeEvent(e, 'resize', (i) => {
-  document.querySelector('.monitor-container').style.height = i.height + 'px'
-  document.querySelector('.monitor-container').style.width = i.width + 'px'
+    resizeEvent(e, 'resize', (i) => {
+      document.querySelector('.monitor-container').style.height = i.height + 'px'
+      document.querySelector('.monitor-container').style.width = i.width + 'px'
     })
   }else{
-dragEvent(e, 'monitor-container', () => {
+    dragEvent(e, 'monitor-container', () => {
     })
   }
-
-}
-const resize = (e) => {
-
 }
+onMounted(() => {
+  // // 查询当前轮询到第几个
+  // initIndex()
+  init()
+})
+onUnmounted(() => {
+  clearTimer()
+})
 </script>
 <style scoped lang="scss">
 
@@ -82,7 +154,8 @@ const resize = (e) => {
         text-align: center;
         line-height: 36px;
         box-sizing: border-box;
-        &.active{
+        cursor: pointer;
+        &:active{
             background: linear-gradient( 180deg, #2EA4F0 0%, rgba(46,164,240,0.35) 100%);
             box-shadow: inset 0px 2px 4px 0px rgba(83,203,255,0.4);
             // border-radius: 2px 2px 0px 0px;
@@ -94,6 +167,7 @@ const resize = (e) => {
   }
   .flv-container{
     width: 100%;
+    height: calc(100% - 50px);
     margin-top: 10px;
   }
   .resize{
@@ -101,7 +175,7 @@ const resize = (e) => {
     right: 0;
     bottom: 0;
     width: 524px;
-  height: 386px;
+    height: 386px;
   }
 }
 </style>