feat:对接全屏弹框

src/layout/components/CoreVideo/index.vue

@@ -41,18 +41,33 @@
   import primary from '@/assets/images/item-primary.png'
   import error from '@/assets/images/item-error.png'
 
-  import { getVideoListApi } from '@/api/home'
-  import { postVideoCollectApi } from '@/api/monitor'
+  import { getVideoListApi, getPreviewUrlApi } from '@/api/home'
+  import { postVideoCollectApi, postVideoRemainApi } from '@/api/monitor'
 
   import Hls from 'hls.js'
   import pubSub from 'pubsub-js'
 
+  import { useWebSocket } from '@/hooks/socket'
+  import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config'
+
+  const { dataRes } = useWebSocket(
+    `${mode == 'dev' ? socketBaseUrl : proSocketBaseUrl}/ws/securityAlerts`
+  )
+
+  watch(
+    () => dataRes.value,
+    (val) => {
+      getPreviewUrl(val.data.cameraIndexCode)
+    }
+  )
+
   let list = ref([])
   let src = ref('')
   let cameraIndexCode = ref('')
   let videoShow = ref(false)
   let allShow = ref(false)
   let hlsRefs = []
+  let timer = null
 
   const handleItem = (item) => {
     src.value = item.hlsUrl
@@ -60,6 +75,22 @@
     videoShow.value = true
   }
 
+  const postVideoRemain = () => {
+    timer = setInterval(() => {
+      postVideoRemainApi({
+        cameraIndexCode: list.value.map((item) => item.cameraIndexCode)
+      })
+    }, 5000)
+  }
+
+  const getPreviewUrl = async (code) => {
+    let res = await getPreviewUrlApi({
+      cameraIndexCode: code,
+      type: 'hls'
+    })
+    src.value = res.data.url
+    videoShow.value = true
+  }
   const getVideoList = async () => {
     let res = await getVideoListApi({
       isCollect: 1,
@@ -67,6 +98,7 @@
       pageSize: 5
     })
     list.value = res.data
+    postVideoRemain()
     // nextTick(() => {
     //   list.value.forEach(async (item, index) => {
     //     var video = document.getElementById(`video${index}`)
@@ -116,6 +148,10 @@
     onVideoCollect()
     getVideoList()
   })
+
+  onUnmounted(() => {
+    if (timer) clearInterval(timer)
+  })
 </script>
 
 <style lang="scss" scoped>