From 80a448f9b933b10be9585a39b41216606f9744d1 Mon Sep 17 00:00:00 2001
From: lixuefeng <1126141216@qq.com>
Date: Wed, 14 Jan 2026 01:11:54 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B1=BB=E5=9E=8B=EF=BC=9A=E5=BC=80=E5=8F=91?=
 =?UTF-8?q?=20=E6=8F=8F=E8=BF=B0=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/hotel/components/video-box.vue | 251 +++++++++++------------
 1 file changed, 118 insertions(+), 133 deletions(-)

diff --git a/src/views/hotel/components/video-box.vue b/src/views/hotel/components/video-box.vue
index 8d35a0c..20ab004 100644
--- a/src/views/hotel/components/video-box.vue
+++ b/src/views/hotel/components/video-box.vue
@@ -182,9 +182,8 @@
   </div>
   <VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode" :isDiy="isDiy"  :isCollect="isCollect" :src="videoSrc" />
 </template>
-
 <script setup>
-import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
+import { getRegionsListApi,getPreviewUrlApi } from '@/api/home'
 import {
   getVideoTypeApi,
   getVideoRegionsApi,
@@ -192,11 +191,11 @@ import {
   postVideoControlApi,
   postVideoCollectApi
 } from '@/api/monitor'
-import draggable from 'vuedraggable';
 import pubSub from 'pubsub-js'
 import Hls from 'hls.js'
 import emptyIco from '@/assets/images/n-icon.png'
 import { debounce } from 'lodash'
+// import mpegtsjs from "mpegts.js";
 import WebRTCWhep from "whepts";
 // const Z00M_IN = 'ZOOM_IN' // 焦距变大
 // const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
@@ -234,7 +233,6 @@ let params = reactive({
   pageNum: 1,
   pageSize: 6,
 })
-let grad = ref(3)
 let show = ref(false)
 const onMonitorChange = () => {
   monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
@@ -246,72 +244,24 @@ const onMonitorChange = () => {
     getRegionsList()
   })
 }
-//弹窗收藏监听
-const isDiyChange = (val)=>{
-  console.log(val,11222)
-  isDiy.value = val
-  if(!val){
-    show.value = false
-    videoList.value[diyIndex.value].videos = videoList.value[diyIndex.value].videos.filter(item => item.cameraIndexCode !== cameraIndexCode.value);
-  }
-  // videoList.value[diyIndex.value].videos.forEach(async (it, i) => {
-
-  // 	if(it.cameraIndexCode == cameraIndexCode.value){
-  // 		it.isDiy = val
-  // 	}
-  // })
-}
-const onStart = (res)=>{
-
-}
-const onEnd = (evt)=>{
-  const itemIndex = parseInt(evt.to.getAttribute('data-item-index')); // 当前拖拽的 item 的下标
-  getVideCollectCateSort({
-    key:videoList.value[itemIndex].key,
-    cameraIndexCodes:videoList.value[itemIndex].videos.map((item) => item.cameraIndexCode)
-  }).then((ress)=>{
-
-    // getVideCollectCateList()
-  })
-  // postVideoRemain()
-  initVideo()
-}
-// 获取关注列表
-const  getVideCollectCateList = async () => {
-  clearHlsRefs()
-  params.businessVideoDisplayPosition = ''
-  let res = await getVideCollectCate(params)
-  videoList.value = res.data
-  if(videoList.value.length<=3){
-    grad.value = 3
-  }else if(videoList.value.length<=6){
-    grad.value = 2
-  }else{
-    grad.value = 1
-  }
-  postVideoRemain()
-  // total.value = res.total
-
-  initVideo()
-}
-// 收藏
-const handleCollect = async (id, status, index,element) => {
-  await getColletDiyApi({
+// 关注
+const handleCollect = async (id, status, index) => {
+  await postVideoCollectApi({
     cameraIndexCode:id,
-    isDiy: status == 0 ? 1 : 0
+    isCollect: status == 0 ? 1 : 0
   })
   if (status == 0) {
-
-    element.isDiy = 1
-
+    if(thisVideo.value){
+      thisVideo.value.isCollect=1
+    }
+    videoList.value[index].isCollect = 1
   } else {
-
-    videoList.value[index].videos = videoList.value[index].videos.filter(item => item.cameraIndexCode !== id);
-    console.log('取消收藏',)
-    element.isDiy = 0
-    show.value = false
+    if(thisVideo.value){
+      thisVideo.value.isCollect=0
+    }
+    videoList.value[index].isCollect = 0
   }
-  // pubSub.publish('videoCollect', id)
+  pubSub.publish('videoCollect', id)
 }
 // 采集
 const handleAction = async (e) => {
@@ -338,15 +288,18 @@ const handleAction = async (e) => {
 // 返回列表
 const handleBack = () => {
   videoLog.value = 1
-  hlsRef.destroy()
+  try{
+    hlsRef.destroy()
+  }catch (e) {
+
+  }
+
   initVideo()
 }
 let isCollect = ref(0)
 let isDiy = ref(0)
 let videoSrc = ref('')
-let diyIndex = ref(null)
-const handleCamera = async (itemCode,resource,index) => {
-  diyIndex.value = index
+const handleCamera = async (itemCode,resource) => {
   show.value = true
   let res = await getPreviewUrlApi({
     type: 'hls',
@@ -361,7 +314,12 @@ const handleCamera = async (itemCode,resource,index) => {
 const clearHlsRefs = () => {
   if (hlsRefs.length > 0) {
     hlsRefs.map((item) => {
-      item.destroy()
+      try{
+        item.destroy()
+      }catch (e) {
+
+      }
+
     })
     hlsRefs = []
   }
@@ -378,37 +336,6 @@ const currentChange = (e) => {
   videoList.value = []
   getRegionsList()
 }
-
-let thisVideo = ref(null)
-const handleItemVideo = (url, type, code,item) => {
-  thisVideo.value = item
-  videoLog.value = 2
-  cameraIndexCode.value = code
-  setTimeout(() => {
-    if (url.startsWith('http://192.168.77.200:8050/')) {
-      hlsRef = new WebRTCWhep({
-        url: url, // WHEP 服务器地址
-        container: videoRef.value, // 视频播放容器
-        onError: (error) => {
-          console.error('播放错误:', error)
-        }
-      })
-    } else {
-      hlsRef = new Hls({
-        maxBufferLength: 10, // 最大缓冲长度（秒）
-        maxMaxBufferLength: 15, // 缓冲区长度的上限
-        maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
-      })
-      hlsRef.loadSource(url)
-      hlsRef.attachMedia(videoRef.value)
-      hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
-        videoRef.value.play()
-      })
-    }
-
-    if (type == 100) initVideo()
-  }, 1000)
-}
 const createPlayer = (cameraIndexCode,videoElement) => {
   getPreviewUrlApi({
     type: 'hls',
@@ -417,7 +344,7 @@ const createPlayer = (cameraIndexCode,videoElement) => {
     const url = res.data.url;
     if(url.startsWith('http://192.168.77.200:8050/')){
       const player = new WebRTCWhep({
-        url: url, // WHEP 服务器地址
+        url:url, // WHEP 服务器地址
         container: videoElement, // 视频播放容器
         onError: (error) => {
           console.error('播放错误:', error)
@@ -459,19 +386,76 @@ const createPlayer = (cameraIndexCode,videoElement) => {
     }
   })
 }
+//获取酒店视频列表
+const getRegionsList = async()=>{
+  clearHlsRefs()
+  videoLog.value = 1
+  try {
+    if (loading.value) return
+    let res = await getRegionsListApi({...params})
+    if (res.data.length > 0) {
+      videoList.value = res.data
+      cond.value = true
+      total.value = res.total
+      nextTick(() => {
+        if(!videoList.value.length) return false
+        videoList.value.forEach(async (x, index) => {
+          const video = document.getElementById(`hotelmonitorVideo${index}`)
+          createPlayer(x.cameraIndexCode,video);
+        })
+      })
+    } else {
+      videoList.value = []
+      cond.value = true
+      if (timer) clearInterval(timer)
+    }
+    loading.value = false
+  }catch (error) {
+    loading.value = false
+  }
+
+}
+let thisVideo = ref(null)
+const handleItemVideo = async (url, type, code, item) => {
+  let res = await getPreviewUrlApi({
+    cameraIndexCode: code,
+    type: 'hls'
+  })
+  url = res.data.url
+  thisVideo.value = item
+  videoLog.value = 2
+  cameraIndexCode.value = code
+  setTimeout(() => {
+    if (url.startsWith('http://192.168.77.200:8050/')) {
+      hlsRef = new WebRTCWhep({
+        url: url, // WHEP 服务器地址
+        container: videoRef.value, // 视频播放容器
+        onError: (error) => {
+          console.error('播放错误:', error)
+        }
+      })
+    } else {
+      hlsRef = new Hls({
+        maxBufferLength: 10, // 最大缓冲长度（秒）
+        maxMaxBufferLength: 15, // 缓冲区长度的上限
+        maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+      })
+      hlsRef.loadSource(url)
+      hlsRef.attachMedia(videoRef.value)
+      hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
+        videoRef.value.play()
+      })
+    }
+
+    if (type == 100) initVideo()
+  }, 1000)
+}
 const initVideo = () => {
   clearHlsRefs()
   nextTick(() => {
-    videoList.value.forEach(async (it, i) => {
-
-      it.videos.forEach((item,index)=>{
-        setTimeout(() => {
-          const video = document.getElementById(`collectmonitorVideo${item.cameraIndexCode}`)
-          createPlayer(item.cameraIndexCode,video);
-        }, 1000)
-
-      })
-
+    videoList.value.forEach(async (item, index) => {
+      const video = document.getElementById(`hotelmonitorVideo${index}`)
+      createPlayer(item.cameraIndexCode,video);
     })
   })
 }
@@ -487,16 +471,9 @@ watch(
 // 更新视频
 const postVideoRemain = async () => {
   // timer = setInterval(() => {
-  // clearInterval(timer)
-  //   videoList.value.forEach((items,index)=>{
-  // 	  setTimeout(()=>{
-  // 		  postVideoRemainApi({
-  // 		    cameraIndexCode: items.videos.map((item) => item.cameraIndexCode)
-  // 		  })
-  // 	  },1500)
-  //
+  //   postVideoRemainApi({
+  //     cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
   //   })
-  //
   // }, 1500)
 }
 const getVideoRegions = async () => {
@@ -504,14 +481,14 @@ const getVideoRegions = async () => {
     cameraName: cameraName.value,
     businessScenicArea: params.businessScenicArea
   })
-  console.log(res,11111111111111)
-  regionList.value = res.data
-  regionList.value.forEach((item,index)=>{
-    // item.show = true
-    item.videoResources=item.resourcesList[0].videoResources
-  })
-  regionList.value[0].show = true
-
+  if(res.data.length>0){
+    regionList.value = res.data[0].resourcesList;
+    regionList.value[0].show = false
+  }
+  // regionList.value.forEach((item,index)=>{
+  // 	// item.show = true
+  // 	item.videoResources=item.resourcesList[0].videoResources
+  // })
 }
 const handleRegions = (e) => {
   regionList.value[e].show = !regionList.value[e].show
@@ -521,13 +498,21 @@ const onInput = debounce((e) => {
 }, 500)
 let hotelChange = null;
 onMounted(()=>{
-  getVideCollectCateList()
-  console.log(draggable,'draggable')
+  hotelChange = pubSub.subscribe('hotelChange', (msg, data) => {
+    cameraName.value = ''
+    params.businessScenicArea = data.name
+    regionList.value=[];
+    getVideoRegions()
+
+  })
+  onMonitorChange()
+
 })
 onUnmounted(() => {
-  if (timer) clearInterval(timer)
   clearHlsRefs()
-
+  if (hotelChange) pubSub.unsubscribe(hotelChange)
+  if (timer) clearInterval(timer)
+  pubSub.unsubscribe(monitorChange)
 })
 </script>
 <style></style>