feat:对接全屏弹框

src/api/home.js

@@ -17,7 +17,7 @@ export function getVideoListApi(data) {
   })
 }
 
-// 刷新播放地址
+// 获取视频播放地址
 export function getPreviewUrlApi(data) {
   return request({
     url: '/fjtcc-api/api/largeScreen/video/getPreviewUrl',

src/hooks/socket.js

@@ -26,7 +26,7 @@ export function useWebSocket(url) {
     }
     socket.value.onclose = (event) => {
       isConnected.value = false
-      console.log('WebSocket close：', event)
+      console.log('WebSocket close：',url, event)
     }
   }
 

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>

src/views/home/index.vue

@@ -38,7 +38,6 @@
     () => dataRes.value,
     (val) => {
       if (val) {
-        console.log(val, '首页接受数据')
         switch (val.type) {
           case 'userPortrait':
             homeStore.setUserPortraitData(val.data)

src/views/monitor/components/box-2.vue

@@ -211,13 +211,15 @@
   })
   let hlsRefs = []
   let hlsRef = null
-  // const postVideoRemain = async () => {
-  //   setInterval(() => {
-  //     postVideoRemainApi({
-  //       cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
-  //     })
-  //   }, 3000)
-  // }
+  let timer = null
+
+  const postVideoRemain = async () => {
+    timer = setInterval(() => {
+      postVideoRemainApi({
+        cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
+      })
+    }, 3000)
+  }
 
   const initVideo = () => {
     clearHlsRefs()
@@ -337,6 +339,7 @@
       let res = await getVideoListApi(params)
       total.value = res.total
       if (res.data.length > 0) {
+        postVideoRemain()
         videoList.value = res.data
         nextTick(() => {
           videoList.value.forEach(async (x, index) => {
@@ -354,6 +357,8 @@
             hlsRefs.push(hls)
           })
         })
+      } else {
+        if (timer) clearInterval(timer)
       }
       loading.value = false
     } catch (error) {
@@ -398,6 +403,7 @@
   })
   onUnmounted(() => {
     clearHlsRefs()
+    if (timer) clearInterval(timer)
     pubSub.unsubscribe(monitorChange)
   })
 </script>