From a955e2766576dc09ac2fef12dc3c98a08b793539 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=85=88=E7=94=9F?= <zhangxiansheng@192.168.0.101>
Date: Tue, 18 Mar 2025 20:32:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=AF=B9=E6=8E=A5=E5=85=A8=E5=B1=8F?=
 =?UTF-8?q?=E5=BC=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/home.js                           |  2 +-
 src/hooks/socket.js                       |  2 +-
 src/layout/components/CoreVideo/index.vue | 40 +++++++++++++++++++++--
 src/views/home/index.vue                  |  1 -
 src/views/monitor/components/box-2.vue    | 20 ++++++++----
 5 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/src/api/home.js b/src/api/home.js
index 099c18c..12ec04a 100644
--- a/src/api/home.js
+++ b/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',
diff --git a/src/hooks/socket.js b/src/hooks/socket.js
index 2b06ac3..52ac7bc 100644
--- a/src/hooks/socket.js
+++ b/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)
     }
   }
 
diff --git a/src/layout/components/CoreVideo/index.vue b/src/layout/components/CoreVideo/index.vue
index 29005c9..d61a2d3 100644
--- a/src/layout/components/CoreVideo/index.vue
+++ b/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>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 90d77f2..ab3cd18 100644
--- a/src/views/home/index.vue
+++ b/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)
diff --git a/src/views/monitor/components/box-2.vue b/src/views/monitor/components/box-2.vue
index 35f3336..bc2e33a 100644
--- a/src/views/monitor/components/box-2.vue
+++ b/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>