类型：开发

描述：

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

@@ -25,7 +25,7 @@
         <div class="right">
           <div class="item" v-for="(item, index) in homeStore.visitorInfoList" :key="index">
             <div class="label">{{ item.name }}</div>
-            <div :class="[[3,4].includes(item.type)? 'value--error' : 'value--primary']">{{
+            <div :class="item.type==0? 'value--primary' : (item.type==1? 'value--warning' : 'value--error')">{{
               item.value
             }}</div>
           </div>
@@ -439,6 +439,10 @@
             @extend .value;
             color: #ff4400;
           }
+          &--warning {
+            @extend .value;
+            color: #DCBB48;
+          }
           &--primary {
             @extend .value;
             color: #02f9fa;

src/views/hotel/components/video-box.vue

@@ -55,7 +55,7 @@
 	  <div v-if="videoLog == 1" class="video-wrapper">
 	    <div class="video-list">
 			<div class="empty-box" v-if="videoList.length==0&&cond">
-						未接入
+						加载中...
 			</div>
 	      <div
 	        class="video-item"
@@ -196,6 +196,7 @@
 	import Hls from 'hls.js'
 	import emptyIco from '@/assets/images/n-icon.png'
 	import { debounce } from 'lodash'
+  import mpegtsjs from "mpegts.js";
 	const Z00M_IN = 'ZOOM_IN' // 焦距变大
 	const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
 	const UP = 'UP' // 上转
@@ -321,39 +322,59 @@
 			   nextTick(() => {
 				   if(!videoList.value.length) return false
 			     videoList.value.forEach(async (x, index) => {
-			       const video = document.getElementById(`monitorVideo${index}`)
-			       const hls = new Hls({
-			         maxBufferLength: 10, // 最大缓冲长度（秒）
-			         maxMaxBufferLength: 15, // 缓冲区长度的上限
-			         maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
-			       })
-			       hls.loadSource(x.hlsUrl)
-			       hls.attachMedia(video)
-			       hls.on(Hls.Events.MANIFEST_PARSED, () => {
-			         video.play()
-			       })
-				   hls.on(Hls.Events.ERROR, (event, data) => {
-					 console.error('HLS 播放器遇到错误:', data);
-					   // 根据错误类型进行处理
-					   // initVideo()
-					  if (data.fatal) {
-						switch (data.type) {
-						  case Hls.ErrorTypes.NETWORK_ERROR:
-							console.log('网络错误，尝试重新加载');
-							hls.startLoad();
-							break;
-						  case Hls.ErrorTypes.MEDIA_ERROR:
-							console.log('媒体错误，尝试修复');
-							hls.recoverMediaError();
-							break;
-						  default:
-							console.log('无法恢复的错误，销毁播放器');
-							// hls.destroy();
-							break;
-						}
-					  }
-				   })
-			       hlsRefs.push(hls)
+             const video = document.getElementById(`monitorVideo${index}`)
+             if(x.hlsUrl.startsWith('ws')){
+               const player = mpegtsjs.createPlayer({
+                 url: x.hlsUrl,
+                 type: 'flv',
+                 isLive: true,
+                 hasAudio: false
+               })
+               player.attachMediaElement(video)
+               player.load()
+               player.play()
+               // 错误处理和重连机制
+               player.on('error', (err) => {
+                 // 3 秒后尝试重新加载
+                 setTimeout(() => {
+                   player.load()
+                   player.play()
+                 }, 3000)
+               })
+             }else{
+               const hls = new Hls({
+                 maxBufferLength: 10, // 最大缓冲长度（秒）
+                 maxMaxBufferLength: 15, // 缓冲区长度的上限
+                 maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+               })
+               hls.loadSource(x.hlsUrl)
+               hls.attachMedia(video)
+               hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                 video.play()
+               })
+               hls.on(Hls.Events.ERROR, (event, data) => {
+                 console.error('HLS 播放器遇到错误:', data);
+                 // 根据错误类型进行处理
+                 // initVideo()
+                 if (data.fatal) {
+                   switch (data.type) {
+                     case Hls.ErrorTypes.NETWORK_ERROR:
+                       console.log('网络错误，尝试重新加载');
+                       hls.startLoad();
+                       break;
+                     case Hls.ErrorTypes.MEDIA_ERROR:
+                       console.log('媒体错误，尝试修复');
+                       hls.recoverMediaError();
+                       break;
+                     default:
+                       console.log('无法恢复的错误，销毁播放器');
+                       // hls.destroy();
+                       break;
+                   }
+                 }})
+               hlsRefs.push(hls)
+             }
+
 			     })
 			   })
 		    } else {
@@ -416,22 +437,22 @@
 	)
 	// 更新视频
 	const postVideoRemain = async () => {
-	  timer = setInterval(() => {
-	    postVideoRemainApi({
-	      cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
-	    })
-	  }, 1500)
+	  // timer = setInterval(() => {
+	  //   postVideoRemainApi({
+	  //     cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
+	  //   })
+	  // }, 1500)
 	}
 	const getVideoRegions = async () => {
 	  let res = await getVideoRegionsApi({
 	    cameraName: cameraName.value,
 	    businessScenicArea: params.businessScenicArea
 	  })
-	  regionList.value = res.data
-	  regionList.value.forEach((item,index)=>{
-	  	// item.show = true
-	  	item.videoResources=item.resourcesList[0].videoResources
-	  })
+	  regionList.value = res.data[0].resourcesList;
+	  // regionList.value.forEach((item,index)=>{
+	  // 	// item.show = true
+	  // 	item.videoResources=item.resourcesList[0].videoResources
+	  // })
 	  regionList.value[0].show = false
 
 	}

src/views/scenic/components/box-1.vue

@@ -435,7 +435,7 @@ import pubSub from 'pubsub-js'
         .content {
           margin-left: vw(4);
           padding: 0 vw(10);
-          width: vw(760);
+          width: vw(460);
           height: vh(24);
           line-height: vh(24);
           white-space: nowrap;