视频轮询功能

src/views/business/alarm/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <ListCom/>
+  <ListCom @toggle-fold="toggle"/>
   <DeviceCom/>
   <MonitorCom/>
-  <LegendCom/>
+  <LegendCom :retract="retract"/>
 
 </template>
 <script setup>
@@ -10,7 +10,12 @@ import ListCom from './list.vue'
 import DeviceCom from './device.vue'
 import MonitorCom from './monitor.vue'
 import LegendCom from '@/components/Map/legend.vue'
+import { ref } from 'vue'
 
+const retract = ref(null)
+const toggle = (value) => {
+  retract.value = value
+}
 </script>
 <style scoped lang="scss">
 .screen-legend-left{

src/views/business/alarm/list.vue

@@ -65,6 +65,7 @@ import { reactive, ref } from 'vue'
 import useMapStore from '@/store/modules/map'
 import { videoIdentificationPage } from '@/api/identification.js'
 
+const emit = defineEmits([ 'toggle-fold' ])
 const mapStore = useMapStore()
 const tabs = [
   {
@@ -109,6 +110,7 @@ const initData = () => {
 }
 const toggleFold = () => {
   isFold.value = !isFold.value
+  emit('toggle-fold', isFold.value)
 }
 const toggle = (index) => {
   current.value = index

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>

src/views/business/index.vue

@@ -6,7 +6,7 @@
       <router-view></router-view>
     </div>
     <Alarm/>
-    <LargeModelCom v-if="largeModel"/>
+    <LargeModelCom v-if="visible && type === 'largeModel'"/>
     <IdentificationCom v-if="visible && type === 'alarm'"/>
     <WallCom v-if="visible && (type==='CCTV'|| type==='UAV')"/>
   </div>
@@ -22,9 +22,6 @@ import useMapStore from '@/store/modules/map'
 import { computed } from 'vue'
 
 const mapStore = useMapStore()
-const largeModel = computed(() => {
-  return mapStore.largeModel
-})
 const visible = computed(() => mapStore.dialog.visible)
 const type = computed(() => mapStore.dialog.type)
 window.name = 'business_window'

src/views/business/largeModel/history.vue

@@ -11,13 +11,13 @@
         </li>
       </ul>
     </div>
-    <div class="border">
+
+  </div>
+  <div :class="['border',show ? 'history-collapse' : 'history-expand']">
       <img
-        :class="[show ? 'history-collapse' : 'history-expand']"
         src="@/assets/images/largeModel/icon-collapse.png" alt=""
         @click="show = !show">
     </div>
-  </div>
 </template>
 
 <script setup>
@@ -174,24 +174,17 @@ defineExpose({
     right: 0;
   }
 }
-.border{
-  width: 20px;
-  .history-collapse{
-    position: absolute;
-    right: 160px;
-    bottom: 40px;
+.history-collapse{
+    display: none;
     cursor: pointer;
     transition: all 0.3s ease-in-out;
-    transform: translateX(0);
+    transform: rotateY(180deg);
   }
   .history-expand{
-    position: absolute;
-    right: 10px;
-    bottom: 20px;
+    width: 20px;
     cursor: pointer;
     z-index: 2;
     transition: all 0.3s ease-in-out;
-    transform: translateX(0);
+    transform: rotateY(180deg);
   }
-}
 </style>

src/views/business/largeModel/index.vue

@@ -105,7 +105,7 @@ const initList = () => {
   History.value.initList()
 }
 const close = () => {
-  mapStore.updateLargeModel(false)
+  mapStore.updateDialog({ visible: false, type: 'largeModel' })
 }
 const openVideo = (data) => {
   visible.value = data.visible