diff --git a/dist01.zip b/dist01.zip
deleted file mode 100644
index d40da14..0000000
Binary files a/dist01.zip and /dev/null differ
diff --git a/dist5.31.zip b/dist5.31.zip
deleted file mode 100644
index 191faee..0000000
Binary files a/dist5.31.zip and /dev/null differ
diff --git a/package-lock.json b/package-lock.json
index 9969e43..e3c6bdd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "hls.js": "^1.5.18",
         "jssip": "^3.10.1",
         "lodash": "^4.17.21",
+        "mpegts.js": "^1.8.0",
         "pinia": "^2.2.6",
         "pinia-plugin-persistedstate": "^4.2.0",
         "pubsub-js": "^1.9.5",
@@ -3201,6 +3202,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
+      "license": "MIT"
+    },
     "node_modules/esbuild": {
       "version": "0.25.1",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.1.tgz",
@@ -4272,6 +4279,16 @@
         "ufo": "^1.5.4"
       }
     },
+    "node_modules/mpegts.js": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/mpegts.js/-/mpegts.js-1.8.0.tgz",
+      "integrity": "sha512-ZtujqtmTjWgcDDkoOnLvrOKUTO/MKgLHM432zGDI8oPaJ0S+ebPxg1nEpDpLw6I7KmV/GZgUIrfbWi3qqEircg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "es6-promise": "^4.2.5",
+        "webworkify-webpack": "github:xqq/webworkify-webpack"
+      }
+    },
     "node_modules/mrmime": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@@ -6143,6 +6160,11 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/webworkify-webpack": {
+      "version": "2.1.5",
+      "resolved": "git+ssh://git@github.com/xqq/webworkify-webpack.git#24d1e719b4a6cac37a518b2bb10fe124527ef4ef",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index c010dea..58b73b9 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "hls.js": "^1.5.18",
     "jssip": "^3.10.1",
     "lodash": "^4.17.21",
+    "mpegts.js": "^1.8.0",
     "pinia": "^2.2.6",
     "pinia-plugin-persistedstate": "^4.2.0",
     "pubsub-js": "^1.9.5",
diff --git a/src/api/request.js b/src/api/request.js
index a2d78c1..cd728b7 100644
--- a/src/api/request.js
+++ b/src/api/request.js
@@ -12,6 +12,7 @@ const instance = axios.create({
   timeout: 100000,
   headers: {
     Authorization: mode == 'dev' ? devToken : proToken,
+    'User-Type': '1',
     'Content-Type': 'application/json;charset=UTF-8'
   }
 })
diff --git a/src/components/HlsPlayer/index-bak.vue b/src/components/HlsPlayer/index-bak.vue
new file mode 100644
index 0000000..5d0c0d3
--- /dev/null
+++ b/src/components/HlsPlayer/index-bak.vue
@@ -0,0 +1,352 @@
+<template>
+  <div v-show="isActive" class="myVideo-container">
+    <video
+      class="myVideo"
+      ref="videoElement"
+      muted
+      playsinline
+      :controls="false"
+      disablePictureInPicture
+    ></video>
+   <!-- <div v-if="loading" class="loading-overlay pointer-events-none">
+      <div class="loading-text">{{ loadingText }}</div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+  import Hls from 'hls.js'
+
+  export default {
+    name: 'HlsPlayer',
+    props: {
+      url: {
+        type: String,
+        default: ''
+      },
+      isActive: {
+        type: Boolean,
+        default: true
+      },
+      width: {
+        type: [String, Number],
+        default: '100%'
+      },
+      height: {
+        type: [String, Number],
+        default: '100%'
+      }
+    },
+    data() {
+      return {
+        hls: null,
+        video: null,
+        loading: false,
+        loadingText: '加载中...',
+        retryCount: 0,
+        maxRetries: 3,
+        isReady: false,
+        playAttempts: 0,
+        maxPlayAttempts: 3,
+        cleanupTimeout: null
+      }
+    },
+    computed: {
+      videoStyle() {
+        const style = {}
+        if (this.width) {
+          style.width = typeof this.width === 'number' ? `${this.width}px` : this.width
+        }
+        if (this.height) {
+          style.height = typeof this.height === 'number' ? `${this.height}px` : this.height
+        }
+        return style
+      }
+    },
+    watch: {
+      isActive: {
+        handler(newValue) {
+          if (newValue) {
+            this.$nextTick(this.initializePlayer)
+          } else {
+            this.immediateCleanup()
+          }
+        },
+        immediate: true
+      },
+      url(newUrl) {
+		  // console.log(newUrl,'77777777777777777777777777777777')
+        if (newUrl && this.isActive) {
+          this.initializePlayer()
+        }
+      }
+    },
+    mounted() {
+      this.video = this.$refs.videoElement
+      this.registerVideoEvents()
+    },
+    methods: {
+      registerVideoEvents() {
+        const events = ['canplay', 'waiting', 'playing', 'error', 'stalled', 'suspend']
+
+        events.forEach((event) => {
+          this.video.addEventListener(event, this.handleVideoEvent)
+        })
+      },
+
+      handleVideoEvent(event) {
+        switch (event.type) {
+          case 'canplay':
+            this.isReady = true
+            break
+          case 'waiting':
+            this.showLoadingIndicator('缓冲中...')
+            break
+          case 'playing':
+            this.loading = false
+            break
+          case 'error':
+            this.handlePlaybackError()
+            break
+          case 'stalled':
+            this.showLoadingIndicator('播放卡顿...')
+            break
+          case 'suspend':
+            this.cleanupNetworkResources()
+            break
+        }
+      },
+
+      immediateCleanup() {
+        // 立即停止网络请求
+        if (this.hls) {
+          this.hls.stopLoad()
+          this.hls.detachMedia()
+        }
+
+        // 延迟完全清理以避免播放卡顿
+        this.cleanupTimeout = setTimeout(() => {
+          // 仅在不重新初始化播放器时才调用 fullCleanup
+          if (!this.url || !this.isActive) {
+            this.fullCleanup()
+          }
+        }, 1000)
+      },
+
+      fullCleanup() {
+        if (this.hls) {
+          this.hls.destroy()
+          this.hls = null
+        }
+
+        if (this.video) {
+          this.video.pause()
+          this.video.removeAttribute('src')
+          this.video.load()
+        }
+
+        this.loading = false
+        this.retryCount = 0
+        this.isReady = false
+        this.playAttempts = 0
+
+        if (this.cleanupTimeout) {
+          clearTimeout(this.cleanupTimeout)
+        }
+      },
+
+      initializePlayer() {
+        if (!this.isActive || !this.url) return
+
+        // 如果是重新初始化播放器，先清理已存在的资源
+        if (this.hls) {
+          this.immediateCleanup()
+        }
+        this.hls = new Hls({
+          // 内存优化配置
+          maxBufferSize: 0, // 降低缓冲区大小（15MB）
+          maxBufferLength: 0.1, // 更小的缓冲窗口
+          liveSyncDuration: 1, // 紧跟直播点
+          liveMaxLatencyDuration: 5, // 最大延迟5秒
+          liveDurationInfinity: true,
+          lowLatencyMode: true, // 启用低延迟模式
+          maxMaxBufferLength: 60,
+          backBufferLength: 1, // 减少保留的缓冲数据
+          manifestLoadingTimeOut: 10000,
+          manifestLoadingMaxRetry: 5,
+          fragLoadingTimeOut: 5000,
+          fragLoadingMaxRetry: 2,
+          enableWorker: true, // 启用Web Worker
+          recycleVideoFrames: true, // 启用帧回收
+
+          startLevel: -1,
+          autoStartLoad: true,
+          maxBufferHole: 2, // 允许更大的时间缺口
+          highBufferWatchdogPeriod: 4, // 延长监控周期
+          nudgeMaxRetry: 5, // 增加微调重试次数
+          nudgeOffset: 0.05, // 微调步长（秒）
+          jumpGaps: false,
+          stallThreshold: 1000
+        })
+
+        this.hls.attachMedia(this.video)
+        this.hls.loadSource(this.url)
+
+        // 事件处理
+        this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          this.loading = false
+          this.retryCount = 0
+          this.safePlay()
+        })
+        this.hls.on(Hls.Events.ERROR, (event, data) => {
+			console.log('核心视频错误',data.type)
+		  // this.hls.startLoad(); //重连
+		    if (data.type === Hls.ErrorTypes.BUFFER_STALLED_ERROR) {
+		      console.error('缓冲停滞错误，尝试重新加载视频');
+		      this.hls.startLoad(); // 尝试重新加载视频
+		    }
+          this.handleHlsError(data)
+        })
+
+        this.hls.on(Hls.Events.BUFFER_EOS, () => {
+          this.cleanupNetworkResources()
+        })
+      },
+	initVideo() {
+	    this.beforeDestroy()
+		this.hls = new Hls({
+		  maxBufferLength: 30, // 最大缓冲长度（秒）
+		  maxMaxBufferLength: 15, // 缓冲区长度的上限
+		  maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+		})
+	    this.hls.attachMedia(this.video)
+	    this.hls.loadSource(this.url)
+
+	    // 事件处理
+	    this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
+	      this.loading = false
+	      this.retryCount = 0
+	      this.safePlay()
+	    })
+	    this.hls.on(Hls.Events.ERROR, (event, data) => {
+	      this.hls.startLoad(); //重连
+	      this.handleHlsError(data)
+	    })
+
+	    this.hls.on(Hls.Events.BUFFER_EOS, () => {
+	      this.cleanupNetworkResources()
+	    })
+	  },
+      cleanupNetworkResources() {
+        // 清理已播放的缓冲数据
+        if (this.hls && this.video) {
+          try {
+            const currentTime = this.video.currentTime
+            this.hls.mediaBuffer = null
+            if (this.hls.bufferTimer) {
+              clearInterval(this.hls.bufferTimer)
+            }
+            this.hls.flushBuffer()
+            this.video.currentTime = currentTime
+          } catch (e) {
+            console.warn('Buffer cleanup error:', e)
+          }
+        }
+      },
+
+      handleHlsError(data) {
+        // console.error('HLS Error:', data)
+        if (data.fatal) {
+          switch (data.type) {
+            case Hls.ErrorTypes.NETWORK_ERROR:
+              this.retryLoad()
+              break
+            case Hls.ErrorTypes.MEDIA_ERROR:
+              this.hls.recoverMediaError()
+              break
+            default:
+              this.fullCleanup()
+              break
+          }
+        }
+      },
+
+      retryLoad() {
+        if (this.retryCount < this.maxRetries) {
+          this.retryCount++
+          this.showLoadingIndicator(`重试第 ${this.retryCount} 次...`)
+          setTimeout(() => this.initializePlayer(), 2000)
+        } else {
+          this.showLoadingIndicator('视频加载失败')
+          this.fullCleanup()
+        }
+      },
+
+      showLoadingIndicator(text) {
+        this.loading = true
+        this.loadingText = text
+      },
+
+      async safePlay() {
+        if (!this.video || this.playAttempts >= this.maxPlayAttempts) return
+
+        try {
+          this.playAttempts++
+          if (this.video.readyState >= 2) {
+            await this.video.play()
+            this.playAttempts = 0
+          } else {
+            setTimeout(this.safePlay, 500)
+          }
+        } catch (error) {
+          console.warn('播放失败:', error)
+          setTimeout(this.safePlay, 1000)
+        }
+      }
+    },
+    beforeDestroy() {
+      // 移除所有事件监听
+      if (this.video) {
+        const events = ['canplay', 'waiting', 'playing', 'error', 'stalled', 'suspend']
+        events.forEach((event) => {
+          this.video.removeEventListener(event, this.handleVideoEvent)
+        })
+      }
+      this.fullCleanup()
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .myVideo-container {
+    position: relative;
+    height: 100%;
+  }
+
+  .myVideo {
+    width: 100%;
+    height: 100%;
+    // aspect-ratio: 16/9;
+    /* border: 1px solid #ccc; */
+    // border-radius: vw(5);
+  }
+
+  .loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .loading-text {
+    color: white;
+    padding: vw(10);
+    border-radius: vw(4);
+    background: rgba(0, 0, 0, 0.6);
+  }
+</style>
diff --git a/src/components/HlsPlayer/index.vue b/src/components/HlsPlayer/index.vue
index 8689e22..be8f30f 100644
--- a/src/components/HlsPlayer/index.vue
+++ b/src/components/HlsPlayer/index.vue
@@ -2,6 +2,7 @@
   <div v-show="isActive" class="myVideo-container">
     <video
       class="myVideo"
+      id="video"
       ref="videoElement"
       muted
       playsinline
@@ -16,7 +17,7 @@
 
 <script>
   import Hls from 'hls.js'
-
+  import mpegtsjs from 'mpegts.js'
   export default {
     name: 'HlsPlayer',
     props: {
@@ -162,55 +163,78 @@
         if (this.hls) {
           this.immediateCleanup()
         }
-        this.hls = new Hls({
-          // 内存优化配置
-          maxBufferSize: 0, // 降低缓冲区大小（15MB）
-          maxBufferLength: 0.1, // 更小的缓冲窗口
-          liveSyncDuration: 1, // 紧跟直播点
-          liveMaxLatencyDuration: 5, // 最大延迟5秒
-          liveDurationInfinity: true,
-          lowLatencyMode: true, // 启用低延迟模式
-          maxMaxBufferLength: 60,
-          backBufferLength: 1, // 减少保留的缓冲数据
-          manifestLoadingTimeOut: 10000,
-          manifestLoadingMaxRetry: 5,
-          fragLoadingTimeOut: 5000,
-          fragLoadingMaxRetry: 2,
-          enableWorker: true, // 启用Web Worker
-          recycleVideoFrames: true, // 启用帧回收
+        if(this.url.startsWith('ws')){
+          const videoElement = document.getElementById('video')
+          const player = mpegtsjs.createPlayer({
+            url: this.url,
+            type: 'flv',
+            isLive: true,
+            hasAudio: false
+          })
+          player.attachMediaElement(videoElement)
+          player.load()
+          player.play()
 
-          startLevel: -1,
-          autoStartLoad: true,
-          maxBufferHole: 2, // 允许更大的时间缺口
-          highBufferWatchdogPeriod: 4, // 延长监控周期
-          nudgeMaxRetry: 5, // 增加微调重试次数
-          nudgeOffset: 0.05, // 微调步长（秒）
-          jumpGaps: false,
-          stallThreshold: 1000
-        })
+          // 错误处理和重连机制
+          player.on('error', (err) => {
+            // 3 秒后尝试重新加载
+            setTimeout(() => {
+              player.load()
+              player.play()
+            }, 3000)
+          })
+        }else{
+          this.hls = new Hls({
+            // 内存优化配置
+            maxBufferSize: 0, // 降低缓冲区大小（15MB）
+            maxBufferLength: 0.1, // 更小的缓冲窗口
+            liveSyncDuration: 1, // 紧跟直播点
+            liveMaxLatencyDuration: 5, // 最大延迟5秒
+            liveDurationInfinity: true,
+            lowLatencyMode: true, // 启用低延迟模式
+            maxMaxBufferLength: 60,
+            backBufferLength: 1, // 减少保留的缓冲数据
+            manifestLoadingTimeOut: 10000,
+            manifestLoadingMaxRetry: 5,
+            fragLoadingTimeOut: 5000,
+            fragLoadingMaxRetry: 2,
+            enableWorker: true, // 启用Web Worker
+            recycleVideoFrames: true, // 启用帧回收
 
-        this.hls.attachMedia(this.video)
-        this.hls.loadSource(this.url)
+            startLevel: -1,
+            autoStartLoad: true,
+            maxBufferHole: 2, // 允许更大的时间缺口
+            highBufferWatchdogPeriod: 4, // 延长监控周期
+            nudgeMaxRetry: 5, // 增加微调重试次数
+            nudgeOffset: 0.05, // 微调步长（秒）
+            jumpGaps: false,
+            stallThreshold: 1000
+          })
 
-        // 事件处理
-        this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
-          this.loading = false
-          this.retryCount = 0
-          this.safePlay()
-        })
-        this.hls.on(Hls.Events.ERROR, (event, data) => {
-			console.log('核心视频错误',data.type)
-		  // this.hls.startLoad(); //重连
-		    if (data.type === Hls.ErrorTypes.BUFFER_STALLED_ERROR) {
-		      console.error('缓冲停滞错误，尝试重新加载视频');
-		      this.hls.startLoad(); // 尝试重新加载视频
-		    } 
-          this.handleHlsError(data)
-        })
+          this.hls.attachMedia(this.video)
+          this.hls.loadSource(this.url)
+
+          // 事件处理
+          this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
+            this.loading = false
+            this.retryCount = 0
+            this.safePlay()
+          })
+          this.hls.on(Hls.Events.ERROR, (event, data) => {
+            console.log('核心视频错误',data.type)
+            // this.hls.startLoad(); //重连
+            if (data.type === Hls.ErrorTypes.BUFFER_STALLED_ERROR) {
+              console.error('缓冲停滞错误，尝试重新加载视频');
+              this.hls.startLoad(); // 尝试重新加载视频
+            }
+            this.handleHlsError(data)
+          })
+
+          this.hls.on(Hls.Events.BUFFER_EOS, () => {
+            this.cleanupNetworkResources()
+          })
+        }
 
-        this.hls.on(Hls.Events.BUFFER_EOS, () => {
-          this.cleanupNetworkResources()
-        })
       },
 	initVideo() {
 	    this.beforeDestroy()
@@ -221,7 +245,7 @@
 		})
 	    this.hls.attachMedia(this.video)
 	    this.hls.loadSource(this.url)
-	    
+
 	    // 事件处理
 	    this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
 	      this.loading = false
@@ -232,7 +256,7 @@
 	      this.hls.startLoad(); //重连
 	      this.handleHlsError(data)
 	    })
-	    
+
 	    this.hls.on(Hls.Events.BUFFER_EOS, () => {
 	      this.cleanupNetworkResources()
 	    })
diff --git a/src/components/PieRow/index.vue b/src/components/PieRow/index.vue
index 812855e..16f581f 100644
--- a/src/components/PieRow/index.vue
+++ b/src/components/PieRow/index.vue
@@ -11,7 +11,7 @@
 		<div v-if="condShow==0" class="nYong-du">加载中...</div>
 		<div v-if="condShow==1" class="nYong-du">暂无数据</div>
 	</div>
-  
+
 </template>
 
 <script setup>
@@ -50,8 +50,8 @@
 
   const { id, setOption,chartVal,dispose ,clearOption} = useEchart()
 
-  
-  
+
+
 	let condShow = ref(0)
 	let aIndex = 1
 	var colorList = []
@@ -59,56 +59,45 @@
   watch(
     () => props.dataList,
     (newVal) => {
-		
 		aIndex+=1
-		
+
 		if(aIndex>=3&&!newVal.length){
 			  condShow.value = 1
 		}
       if (newVal.length > 0) {
-		
-		  console.log(colorList.value,'colorList')
-		  condShow.value = 2
+
         nextTick(() => {
 			init()
-          // defaultCofig.legend.formatter = (name) => {
-          //   let percent = props.dataList.find((item) => item.name == name).value
-          //   return name + '\u3000' + `${percent}%`
-          // }
-          // defaultCofig.series[0].data = props.dataList
-          // defaultCofig.series[0].label.formatter = () => {
-          //   return `{value|${props.total}}` + '\n' + `{name|${props.label}  }`
-          // }
-          // setOption({
-          //   ...defaultCofig,
-          //   ...props.config
-          // })
-		  
+
         })
       }else{
-		
-		 
+
+
 	  }
     },
     { immediate: true }
   )
   const init = ()=>{
+    if(condShow.value===2){
+      return;
+    }
+    condShow.value = 2
 	  props.dataList.forEach((item,index)=>{
-		  
+
 		  if(item.name=='负面'){
 			  colorList.push('#d9011b')
 		  }
 		  else if(item.name=='正面'){
-			colorList.push('#50F0A6')  
+			colorList.push('#50F0A6')
 		  }
 		  else if(item.name=='中性'){
-			colorList.push('#2380fb')	  
+			colorList.push('#2380fb')
 		  }
 		  else{
 			   colorList = ['#3BA272', '#73C0DE','#EE6666','#FAC858','#91CC75','#5470C6','#d9011b','#feae00','#50F0A6']
 		  }
 	  })
-	  
+
 	  var defaultCofig = {
 	    color: colorList,
 	    legend: {
@@ -167,15 +156,41 @@
 	  defaultCofig.series[0].label.formatter = () => {
 	    return `{value|${props.total}}` + '\n' + `{name|${props.label}  }`
 	  }
-	  setOption({
+	   const chart = setOption({
 	    ...defaultCofig,
 	    ...props.config
 	  })
+    chart.on('legendselectchanged', function (e) {
+      console.log(e,'e')
+      var echartsArr = [];
+      for (let key in e.selected) {
+        if (e.selected[key]) {
+          echartsArr.push(key)
+        }
+      }
+      var echartsNum = 0;
+      props.dataList.forEach(item => {
+        if(echartsArr.includes(item.name)){
+          echartsNum += parseFloat(item.value)
+        }
+      })
+      defaultCofig.series[0].label.formatter = `{value|${parseInt(echartsNum/100*props.total)}}` + '\n' + `{name|${props.label}}`;
+      console.log(111111)
+      console.log({
+        ...defaultCofig,
+        ...props.config
+      })
+      console.log(222222)
+      setOption({
+        ...defaultCofig,
+        ...props.config
+      })
+    });
   }
 </script>
 
 <style scoped lang="scss">
-	
+
 	.nYong-du{
 		position:absolute;
 		left:0;
@@ -188,6 +203,6 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-	
+
 	}
 </style>
diff --git a/src/components/VideoDialog/index.vue b/src/components/VideoDialog/index.vue
index d3e5f35..3a94f65 100644
--- a/src/components/VideoDialog/index.vue
+++ b/src/components/VideoDialog/index.vue
@@ -49,10 +49,10 @@
 
           </div>
 		  <div class="action-item">
-		    <div class="video-follow" @click="handleCollectAdd(cameraIndexCode, isDiy, index)" v-if="isDiy==0">收藏</div>
-			<div class="video-follow" @click="handleCollectAdd(cameraIndexCode, isDiy, index)" v-else="isDiy==1">取消收藏</div>
+		    <div class="video-follow" @click="handleCollectAdd()" v-if="isDayCurr==0">收藏</div>
+			<div class="video-follow" @click="handleCollectAdd()" v-if="isDayCurr==1">取消收藏</div>
 		  </div>
-		 
+
         </div>
       </div>
       <img class="close" src="@/assets/images/close.png" @click="handleClose" />
@@ -103,10 +103,10 @@
   watch(
     () =>modelValue.value,
     (val) => {
-		// colletCond.value = props.isCollect
-		// isDayCurr.value = props.isDiy
+		colletCond.value = props.isCollect
+		isDayCurr.value = props.isDiy
 		console.log(props.isDiy,'val[0].value')
-      
+
     },
     {
       immediate: true
@@ -114,12 +114,12 @@
   )
 	const emit = defineEmits(['isDiyChange']);
   // 收藏
-  const handleCollectAdd = async (id, status, index) => {
+  const handleCollectAdd = async () => {
     await getColletDiyApi({
       cameraIndexCode:props.cameraIndexCode,
       isDiy: props.isDiy == 0 ? 1 : 0
     })
-	
+
   	if(props.isDiy==1){
   		isDayCurr.value=0
 		// modelValue.value = false
@@ -128,7 +128,7 @@
   	}
 	emit('isDiyChange', isDayCurr.value);
 	pubSub.publish('videoIsDiy',{isDiy:props.isDiy,cameraIndexCode:props.cameraIndexCode} )
-	
+
   }
   // 关注
   const handleCollect = async (id, status, index) => {
@@ -136,7 +136,7 @@
       cameraIndexCode:props.cameraIndexCode,
       isCollect: colletCond.value == 0 ? 1 : 0
     })
-	
+
     if (colletCond.value == 0) {
       colletCond.value = 1
     } else {
@@ -144,7 +144,7 @@
 	  modelValue.value = false
     }
     pubSub.publish('videoCollect', props.cameraIndexCode)
-	
+
   }
   const handleAction = async (e) => {
     if (e == STOP) {
diff --git a/src/hooks/echart.js b/src/hooks/echart.js
index f262ec8..24c9d79 100644
--- a/src/hooks/echart.js
+++ b/src/hooks/echart.js
@@ -13,9 +13,9 @@ export function useEchart() {
   const setOption = (params, update = false) => {
 	  initChart()
     chart.setOption(params, update)
+    return chart;
   }
   const clearOption = () => {
-	  console.log('clearooooooooooooooooo')
 	   // 将series设置为空数组，可以清空图表内容
     chart.setOption({
 		series:[]
diff --git a/src/layout/components/CoreVideo/index.vue b/src/layout/components/CoreVideo/index.vue
index 3870ddc..4ee9d1c 100644
--- a/src/layout/components/CoreVideo/index.vue
+++ b/src/layout/components/CoreVideo/index.vue
@@ -10,25 +10,14 @@
         :key="index"
         @click="handleItem(item)"
       >
-        <HlsPlayer :url="item.hlsUrl" />
-        <div class="item-unfollow" @click.stop="handleUnfollow(item.cameraIndexCode, index)">取消关注</div>
-      <!--  <div>
-          <p class="item-title--primary">
-            {{ item.cameraName || item.cameraIndexCode }}
-          </p>
-         
-          <video
+        <video
             class="item-img"
             :id="'video' + index"
             muted
             autoplay
             :controls="false"
-			:src="item.hlsUrl"
-            controlsList="nodownload"
-          >
-            <source src="" type="application/x-mpegURL" />
-          </video>
-        </div> -->
+        ></video>
+        <div class="item-unfollow" @click.stop="handleUnfollow(item.cameraIndexCode, index)">取消关注</div>
       </li>
     </ul>
   </div>
@@ -50,6 +39,7 @@
 
   import { useWebSocket } from '@/hooks/socket'
   import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config'
+  import mpegtsjs from "mpegts.js";
 
   const { dataRes } = useWebSocket(
     `${mode == 'dev' ? socketBaseUrl : proSocketBaseUrl}/ws/securityAlerts`
@@ -73,7 +63,6 @@ let isCollect = ref(0)
   let timer = null
   let isDiy = ref(0)
   const handleItem = (item) => {
-	  console.log(item,'1111111111111111111111111')
     src.value = item.hlsUrl
     cameraIndexCode.value = item.cameraIndexCode
 	isCollect.value = item.isCollect
@@ -82,12 +71,12 @@ let isCollect = ref(0)
   }
 
   const postVideoRemain = () => {
-    timer = setInterval(() => {
-		if(!list.value.length) return false;
-      postVideoRemainApi({
-        cameraIndexCode: list.value.map((item) => item.cameraIndexCode)
-      })
-    }, 1500)
+    // timer = setInterval(() => {
+		// if(!list.value.length) return false;
+    //   postVideoRemainApi({
+    //     cameraIndexCode: list.value.map((item) => item.cameraIndexCode)
+    //   })
+    // }, 1500)
   }
 
   const getPreviewUrl = async (code) => {
@@ -104,28 +93,32 @@ let isCollect = ref(0)
       pageSize: 5
     })
     list.value = res.data
-	postVideoRemain()
 	if (timer) clearInterval(timer)
-	// console.log(list.value,'list.valuelist.valuelist.valuelist.value')
-    // nextTick(() => {
-    //   list.value.forEach(async (item, index) => {
-    //     var video = document.getElementById(`video${index}`)
-    //     const hls = new Hls({
-    //       enableWorker: false, // 禁用 Worker 来避免额外的线程
-    //       enableSoftwareAES: true, // 使用软件解码器以避免硬件解码的额外请求
-    //       cache: true, // 启用缓存
-    //       maxBufferLength: 10, // 最大缓冲长度（秒）
-    //       maxMaxBufferLength: 15, // 缓冲区长度的上限
-    //       maxBufferSize: 20 * 1000 * 1000 // 最大缓冲大小（字节）
-    //     })
-    //     hls.loadSource(item.hlsUrl)
-    //     hls.attachMedia(video)
-    //     hls.on(Hls.Events.MANIFEST_PARSED, () => {
-    //       video.play()
-    //     })
-    //     hlsRefs.push(hls)
-    //   })
-    // })
+    nextTick(() => {
+      list.value.forEach(async (item, index) => {
+        var videoElement = document.getElementById(`video${index}`)
+        const player = mpegtsjs.createPlayer({
+          url: item.hlsUrl,
+          type: 'flv',
+          isLive: true,
+          hasAudio: false
+        })
+        player.attachMediaElement(videoElement)
+        player.load()
+        player.play()
+
+        // 错误处理和重连机制
+        player.on('error', (err) => {
+          console.error('播放器错误:', err)
+          // 3 秒后尝试重新加载
+          setTimeout(() => {
+            player.load()
+            player.play()
+          }, 3000)
+        })
+        hlsRefs.push(player)
+      })
+    })
   }
   watch(
     () => list.value,
@@ -166,9 +159,9 @@ let isCollect = ref(0)
 	pubSub.subscribe('videoIsDiy', (msg, data) => {
 		console.log(data,'收藏 ++++++++++++++')
 		getVideoList()
-	
-	
-		
+
+
+
 	})
   })
 
diff --git a/src/stores/scenic.js b/src/stores/scenic.js
index a42e50f..41ea54b 100644
--- a/src/stores/scenic.js
+++ b/src/stores/scenic.js
@@ -16,7 +16,7 @@ export const useScenicStore = defineStore('scenic', () => {
     infoList: [
       { name: '游玩舒适度', type: 0, value: '空闲' },
       // { name: '景区安全', type: 0, value: '安全' },
-      { name: '通景交通', type: 0, value: '通畅' },
+      { name: '交通拥堵度', type: 0, value: '通畅' },
       { name: '停车场负荷', type: 0, value: '空闲' }
     ]
   })
diff --git a/src/views/collect/components/video-box.vue b/src/views/collect/components/video-box.vue
index 9fbe430..ef73b76 100644
--- a/src/views/collect/components/video-box.vue
+++ b/src/views/collect/components/video-box.vue
@@ -7,19 +7,19 @@
 			</div> -->
 			<div class="type-item" v-for="(item,index) in videoList">
 				<div class="type-title">{{item.label}}</div>
-				<draggable 
-				:data-item-index="index"  
-				class="item-element" 
-				:item-key="item.key" 
-				:list="item.videos"  
-				ghost-class="ghost" 
+				<draggable
+				:data-item-index="index"
+				class="item-element"
+				:item-key="item.key"
+				:list="item.videos"
+				ghost-class="ghost"
 				:force-fallback="true" chosen-class="chosenClass" animation="300"
 					@start="onStart" @end="onEnd">
 					<template #item="{ element }">
 						<div class="video-item" :style="{
 							width:(100/grad)+'%'
 						}">
-							
+
 							<div class="video-item__inner" @click.stop="handleCamera(element.cameraIndexCode,element,index)">
 								<div
 									v-if="element.isDiy == 1"
@@ -45,12 +45,12 @@
 									{{ element.cameraName || element.scenicAreaId }}
 								</p>
 							</div>
-						</div>	
+						</div>
 					</template>
-				
+
 				</draggable>
 			</div>
-			
+
 	    </div>
 	   <!-- <div class="pagination">
 	      <el-pagination
@@ -93,6 +93,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' // 上转
@@ -139,17 +140,17 @@
 		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 = 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 的下标
@@ -157,7 +158,7 @@
 			key:videoList.value[itemIndex].key,
 			cameraIndexCodes:videoList.value[itemIndex].videos.map((item) => item.cameraIndexCode)
 		}).then((ress)=>{
-			
+
 			// getVideCollectCateList()
 		})
 		// postVideoRemain()
@@ -179,7 +180,7 @@
 	  }
 	  postVideoRemain()
 	  // total.value = res.total
-	  
+
 	  initVideo()
 	}
 	// 收藏
@@ -189,12 +190,12 @@
 	    isDiy: status == 0 ? 1 : 0
 	  })
 	  if (status == 0) {
-		  
+
 	    element.isDiy = 1
-		
+
 	  } else {
-		  
-		videoList.value[index].videos = videoList.value[index].videos.filter(item => item.cameraIndexCode !== id);  
+
+		videoList.value[index].videos = videoList.value[index].videos.filter(item => item.cameraIndexCode !== id);
 		console.log('取消收藏',)
 	    element.isDiy = 0
 		show.value = false
@@ -283,27 +284,49 @@
 	  clearHlsRefs()
 	  nextTick(() => {
 	    videoList.value.forEach(async (it, i) => {
-			
+
 			it.videos.forEach((item,index)=>{
-				 setTimeout(() => { 
+				 setTimeout(() => {
 					const video = document.getElementById(`monitorVideo${item.cameraIndexCode}`)
-					if(item.hlsUrl){
-						const hls = new Hls({
-						  maxBufferLength: 10, // 最大缓冲长度（秒）
-						  maxMaxBufferLength: 15, // 缓冲区长度的上限
-						  maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
-						})
-						hls.loadSource(item.hlsUrl)
-						hls.attachMedia(video)
-						hls.on(Hls.Events.MANIFEST_PARSED, () => {
-						  video.play()
-						})
-						hlsRefs.push(hls) 
-					} 
+           if(item.hlsUrl.startsWith('ws')){
+             const player = mpegtsjs.createPlayer({
+               url: item.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{
+             if(item.hlsUrl){
+               const hls = new Hls({
+                 maxBufferLength: 10, // 最大缓冲长度（秒）
+                 maxMaxBufferLength: 15, // 缓冲区长度的上限
+                 maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+               })
+               hls.loadSource(item.hlsUrl)
+               hls.attachMedia(video)
+               hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                 video.play()
+               })
+               hlsRefs.push(hls)
+             }
+           }
+
 				 }, 1000)
-				
+
 			})
-	     
+
 	    })
 	  })
 	}
@@ -318,18 +341,18 @@
 	)
 	// 更新视频
 	const postVideoRemain = async () => {
-	  timer = setInterval(() => {
-		clearInterval(timer)
-		  videoList.value.forEach((items,index)=>{
-			  setTimeout(()=>{
-				  postVideoRemainApi({
-				    cameraIndexCode: items.videos.map((item) => item.cameraIndexCode)
-				  })
-			  },1500)
-			
-		  })
-	   
-	  }, 1500)
+	  // timer = setInterval(() => {
+		// clearInterval(timer)
+		//   videoList.value.forEach((items,index)=>{
+		// 	  setTimeout(()=>{
+		// 		  postVideoRemainApi({
+		// 		    cameraIndexCode: items.videos.map((item) => item.cameraIndexCode)
+		// 		  })
+		// 	  },1500)
+		//
+		//   })
+	  //
+	  // }, 1500)
 	}
 	const getVideoRegions = async () => {
 	  let res = await getVideoRegionsApi({
@@ -343,7 +366,7 @@
 	  	item.videoResources=item.resourcesList[0].videoResources
 	  })
 	  regionList.value[0].show = true
-	  
+
 	}
 	const handleRegions = (e) => {
 	  regionList.value[e].show = !regionList.value[e].show
@@ -359,7 +382,7 @@
 	onUnmounted(() => {
 		if (timer) clearInterval(timer)
 	  clearHlsRefs()
-	
+
 	})
 </script>
 <style></style>
@@ -393,7 +416,7 @@
 			}
 			overflow: auto;
 		}
-	
+
 		.type-title{
 			position:absolute;
 			left:vw(-5);
@@ -528,7 +551,7 @@
     }
     &-list {
       // gap: vw(3);
-	  
+
       display: flex;
       flex-wrap: wrap;
       align-content: flex-start;
@@ -547,7 +570,7 @@
 	  //   border-radius: 5px; /* 滑块的圆角 */
 	  // }
 	  // overflow: auto;
-	  
+
     }
     &-item {
       position: relative;
diff --git a/src/views/home/components/jam-count.vue b/src/views/home/components/jam-count.vue
index cf31343..c935be8 100644
--- a/src/views/home/components/jam-count.vue
+++ b/src/views/home/components/jam-count.vue
@@ -138,7 +138,23 @@
     } else {
       params.series[0].data = getSeriesData()
     }
-    setOption(params)
+    const chart = setOption(params)
+    chart.on('legendselectchanged', function (e) {
+      var echartsArr = [];
+      for (let key in e.selected) {
+        if (e.selected[key]) {
+          echartsArr.push(key)
+        }
+      }
+      var echartsNum = 0;
+      props.list.forEach(item => {
+        if(echartsArr.includes(item.name)){
+          echartsNum += parseInt(item.count)
+        }
+      })
+      params.series[0].label.formatter = `{label|拥堵次数}` + '\n' + `{value|${echartsNum}}`;
+      setOption(params);
+    });
   }
 
   onMounted(() => {})
diff --git a/src/views/monitor/components/box-2.vue b/src/views/monitor/components/box-2.vue
index b541a47..5cc9ed2 100644
--- a/src/views/monitor/components/box-2.vue
+++ b/src/views/monitor/components/box-2.vue
@@ -1,72 +1,72 @@
 <template>
   <div class="box-2">
     <div class="left-nav">
-      <div v-if="showNav" >
-		  <div class="ul">
-			  <div
-			    class="li"
-			    :class="{ active: current == index }"
-			    v-for="(item, index) in navList"
-			    :key="index"
-			    @click="handleNav(index)"
-			  >
-			    <!-- <span v-if="!params.businessScenicArea && index == 0"> 核心路段 </span> -->
-			    <span>
-			      {{ item.dictLabel }} 
+      <div v-if="showNav">
+        <div class="ul">
+          <div
+              class="li"
+              :class="{ active: current == index }"
+              v-for="(item, index) in navList"
+              :key="index"
+              @click="handleNav(index)"
+          >
+            <!-- <span v-if="!params.businessScenicArea && index == 0"> 核心路段 </span> -->
+            <span>
+			      {{ item.dictLabel }}
 			    </span>
-			  </div>
-			  <div
-			   :class="{ active: current == navList.length }"
-			  @click="handleNav(navList.length)" class="li">
-			  	<span>收藏夹</span>
-			  </div>
-		  </div>
-       
-		
+          </div>
+          <div
+              :class="{ active: current == navList.length }"
+              @click="handleNav(navList.length)" class="li">
+            <span>收藏夹</span>
+          </div>
+        </div>
+
+
       </div>
       <div class="bom-box">
-        <Title2 title="检索" />
+        <Title2 title="检索"/>
         <div class="search-box">
-          <el-input placeholder="请输入内容" v-model="cameraName" @input="onInput" />
-          <img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" />
+          <el-input placeholder="请输入内容" v-model="cameraName" @input="onInput"/>
+          <img class="search-icon" src="/src/assets/images/search-icon-1.png" alt=""/>
         </div>
 
         <div class="tree-box">
           <div class="tree-item" v-for="(item, i) in regionList" :key="i">
             <div class="tree-item__node" @click.stop="handleRegions(i)">
               <img
-                class="tree-item__icon"
-                :class="{ 'tree-item__icon-up': item.show }"
-                src="@/assets/images/arrow-down.png"
-                alt=""
+                  class="tree-item__icon"
+                  :class="{ 'tree-item__icon-up': item.show }"
+                  src="@/assets/images/arrow-down.png"
+                  alt=""
               />
               <span class="tree-item__name">{{ item.regions }}</span>
             </div>
             <div v-if="item.show" class="tree-item__child">
-				<div class="tree-item__child-item"  v-for="(resource, x) in item.resourcesList">
-					<div class="new-title" @click.stop="handleRegList(resource,i,x)">
-						<img
-						  class="tree-item__icon"
-						  :class="{ 'tree-item__icon-up': resource.show }"
-						  src="@/assets/images/arrow-down.png"
-						  alt=""
-						/>
-						{{resource.regions}}
-					
-					</div>
-					<div v-if="resource.show">
-						<div
-						   class="tree-item__child-item"
-						   v-for="(res, x) in resource.videoResources"
-						   :key="x"
-						   @click.stop="handleCamera(res.cameraIndexCode,res)"
-						 >
-						   {{ res.cameraName || res.cameraIndexCode }}
-						 </div>
-					</div>
-					
-				</div>
-            
+              <div class="tree-item__child-item" v-for="(resource, x) in item.resourcesList">
+                <div class="new-title" @click.stop="handleRegList(resource,i,x)">
+                  <img
+                      class="tree-item__icon"
+                      :class="{ 'tree-item__icon-up': resource.show }"
+                      src="@/assets/images/arrow-down.png"
+                      alt=""
+                  />
+                  {{ resource.regions }}
+
+                </div>
+                <div v-if="resource.show">
+                  <div
+                      class="tree-item__child-item"
+                      v-for="(res, x) in resource.videoResources"
+                      :key="x"
+                      @click.stop="handleCamera(res.cameraIndexCode,res)"
+                  >
+                    {{ res.cameraName || res.cameraIndexCode }}
+                  </div>
+                </div>
+
+              </div>
+
             </div>
           </div>
         </div>
@@ -76,33 +76,33 @@
     <div v-if="videoLog == 1" class="video-wrapper">
       <div class="video-list">
         <div
-          class="video-item"
-          v-for="(item, index) in videoList"
-          :key="index"
-          @click="handleItemVideo(item.hlsUrl, 100, item.cameraIndexCode,item)"
+            class="video-item"
+            v-for="(item, index) in videoList"
+            :key="index"
+            @click="handleItemVideo(item.hlsUrl, 100, item.cameraIndexCode,item)"
         >
           <div class="video-item__inner">
             <div
-              v-if="item.isCollect == 1"
-              class="video-item__follow"
-              @click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
-              >取消关注
+                v-if="item.isCollect == 1"
+                class="video-item__follow"
+                @click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
+            >取消关注
             </div>
             <div
-              v-if="item.isCollect == 0"
-              class="video-item__unfollow"
-              @click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
-              >关注
+                v-if="item.isCollect == 0"
+                class="video-item__unfollow"
+                @click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
+            >关注
             </div>
             <video
-              class="video-item__video"
-              :id="'monitorVideo' + index"
-              preload="auto"
-              muted
-              autoplay
-              :controls="false"
+                class="video-item__video"
+                :id="'monitorVideo' + index"
+                preload="auto"
+                muted
+                autoplay
+                :controls="false"
             >
-              <source type="application/x-mpegURL" />
+              <source type="application/x-mpegURL"/>
             </video>
             <p class="video-item__title--primary">
               {{ item.cameraName || item.cameraIndexCode }}
@@ -112,12 +112,12 @@
       </div>
       <div class="pagination">
         <el-pagination
-          v-model:current-page="params.pageNum"
-          :page-size="params.pageSize"
-          :total="total"
-          background
-          layout="prev, pager, next"
-          @current-change="currentChange"
+            v-model:current-page="params.pageNum"
+            :page-size="params.pageSize"
+            :total="total"
+            background
+            layout="prev, pager, next"
+            @current-change="currentChange"
         />
       </div>
     </div>
@@ -125,64 +125,68 @@
     <div v-if="videoLog == 2" class="video-detail">
       <div class="video-detail__wrapper">
         <video class="video-detail__video" ref="videoRef" muted autoplay controls>
-          <source type="application/x-mpegURL" />
+          <source type="application/x-mpegURL"/>
         </video>
         <div class="action-box">
-			<div class="action-item">
-			  <span class="item-sc" @click="handleCollect(thisVideo.cameraIndexCode, thisVideo.isCollect, index)" v-if="thisVideo.isCollect==0">关注</span>
-			  <span class="item-sc" @click="handleCollect(thisVideo.cameraIndexCode, thisVideo.isCollect, index)" v-else="thisVideo.isCollect==1">取消关注</span>
-			</div>
           <div class="action-item">
-            <img src="@/assets/images/plus.png" title="焦距变大" @click="handleAction(Z00M_IN)" />
+            <span class="item-sc" @click="handleCollect(thisVideo.cameraIndexCode, thisVideo.isCollect, index)"
+                  v-if="thisVideo.isCollect==0">关注</span>
+            <span class="item-sc" @click="handleCollect(thisVideo.cameraIndexCode, thisVideo.isCollect, index)"
+                  v-else="thisVideo.isCollect==1">取消关注</span>
+          </div>
+          <div class="action-item">
+            <img src="@/assets/images/plus.png" title="焦距变大" @click="handleAction(Z00M_IN)"/>
             <span>聚焦</span>
-            <img src="@/assets/images/minus.png" title="焦距变小" @click="handleAction(Z00M_OUT)" />
+            <img src="@/assets/images/minus.png" title="焦距变小" @click="handleAction(Z00M_OUT)"/>
           </div>
           <div class="action-item">
-            <img src="@/assets/images/up.png" title="上转" @click="handleAction(UP)" />
-            <img src="@/assets/images/down.png" title="下转" @click="handleAction(DOWN)" />
+            <img src="@/assets/images/up.png" title="上转" @click="handleAction(UP)"/>
+            <img src="@/assets/images/down.png" title="下转" @click="handleAction(DOWN)"/>
             <img
-              class="pause"
-              src="@/assets/images/pause.png"
-              title="停止操作"
-              @click="handleAction(STOP)"
+                class="pause"
+                src="@/assets/images/pause.png"
+                title="停止操作"
+                @click="handleAction(STOP)"
             />
-            <img src="@/assets/images/left.png" title="左转" @click="handleAction(LEFT)" />
-            <img src="@/assets/images/right.png" title="右转" @click="handleAction(RIGHT)" />
+            <img src="@/assets/images/left.png" title="左转" @click="handleAction(LEFT)"/>
+            <img src="@/assets/images/right.png" title="右转" @click="handleAction(RIGHT)"/>
+          </div>
+          <div class="action-item">
+            <span class="item-sc" @click="handleCollectAdd(thisVideo.cameraIndexCode, thisVideo.isDiy, index)"
+                  v-if="thisVideo.isDiy==0">收藏</span>
+            <span class="item-sc" @click="handleCollectAdd(thisVideo.cameraIndexCode, thisVideo.isDiy, index)"
+                  v-else="thisVideo.isDiy==1">取消收藏</span>
           </div>
-		  <div class="action-item">
-		    <span class="item-sc" @click="handleCollectAdd(thisVideo.cameraIndexCode, thisVideo.isDiy, index)" v-if="thisVideo.isDiy==0">收藏</span>
-			<span class="item-sc" @click="handleCollectAdd(thisVideo.cameraIndexCode, thisVideo.isDiy, index)" v-else="thisVideo.isDiy==1">取消收藏</span>
-		  </div>
         </div>
       </div>
       <div class="video-right">
         <div class="flex justify-between">
-<!--          <Title2 title="异常告警" />-->
+          <!--          <Title2 title="异常告警" />-->
           <div class="back-box" @click="handleBack">
-            <img class="icon" src="@/assets/images/back.png" />
+            <img class="icon" src="@/assets/images/back.png"/>
             <span>返回</span>
           </div>
         </div>
         <ul class="list">
           <li
-            class="item"
-            v-for="(item, index) in videoList"
-            :key="index"
-            @click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo,item)"
+              class="item"
+              v-for="(item, index) in videoList"
+              :key="index"
+              @click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo,item)"
           >
             <div>
               <p class="item-title--primary">
                 {{ item.cameraName }}
               </p>
               <video
-                class="item-img"
-                :id="'monitorVideo' + index"
-                muted
-                autoplay
-                :controls="false"
-                style="object-fit: cover"
+                  class="item-img"
+                  :id="'monitorVideo' + index"
+                  muted
+                  autoplay
+                  :controls="false"
+                  style="object-fit: cover"
               >
-                <source src="" type="application/x-mpegURL" />
+                <source src="" type="application/x-mpegURL"/>
               </video>
             </div>
           </li>
@@ -190,159 +194,226 @@
       </div>
     </div>
   </div>
-  <VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode" :isDiy="isDiy"  :isCollect="isCollect" :src="videoSrc" />
+  <VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode" :isDiy="isDiy" :isCollect="isCollect" :src="videoSrc"/>
 </template>
 
 <script setup>
-  import { getVideoListApi, getPreviewUrlApi,getColletListApi,getColletDiyListApi,getColletDiyApi} from '@/api/home'
-  import {
-    getVideoTypeApi,
-    getVideoRegionsApi,
-    postVideoRemainApi,
-    postVideoControlApi,
-    postVideoCollectApi
-  } from '@/api/monitor'
+import {getVideoListApi, getPreviewUrlApi, getColletListApi, getColletDiyListApi, getColletDiyApi} from '@/api/home'
+import mpegtsjs from 'mpegts.js'
+import {
+  getVideoTypeApi,
+  getVideoRegionsApi,
+  postVideoRemainApi,
+  postVideoControlApi,
+  postVideoCollectApi
+} from '@/api/monitor'
 
-  import { debounce } from 'lodash'
-  import pubSub from 'pubsub-js'
-  import Hls from 'hls.js'
+import {debounce} from 'lodash'
+import pubSub from 'pubsub-js'
+import Hls from 'hls.js'
+import HlsPlayer from "@/components/HlsPlayer/index.vue";
 
-  const Z00M_IN = 'ZOOM_IN' // 焦距变大
-  const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
-  const UP = 'UP' // 上转
-  const DOWN = 'DOWN' // 下转
-  const LEFT = 'LEFT' // 左转
-  const RIGHT = 'RIGHT' // 右转
-  const STOP = 'STOP' // 停止操作
-  let ACTION = '0'
+const Z00M_IN = 'ZOOM_IN' // 焦距变大
+const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
+const UP = 'UP' // 上转
+const DOWN = 'DOWN' // 下转
+const LEFT = 'LEFT' // 左转
+const RIGHT = 'RIGHT' // 右转
+const STOP = 'STOP' // 停止操作
+let ACTION = '0'
 
-  const props = {
-    value: 'id',
-    label: 'label',
-    children: 'children'
-  }
-  let isCollect = ref(0)
-  let isDiy = ref(0)
-  let command = ref('')
-  let videoList = ref([])
-  let navList = ref([])
-  let current = ref(0)
-  let showNav = ref(true)
-  let videoLog = ref(1)
-  let videoRef = ref()
-  let regionList = ref()
-  let monitorChange = null
-  let videoSrc = ref('')
-  let show = ref(false)
-  let loading = ref(false)
-  let total = ref(0)
-  let cameraName = ref('')
-  let cameraIndexCode = ref('')
-  let params = reactive({
-    pageNum: 1,
-    pageSize: 6,
-    businessScenicArea: '',
-    businessVideoDisplayPosition: ''
-  })
-  let hlsRefs = []
-  let hlsRef = null
-  let timer = null
+const props = {
+  value: 'id',
+  label: 'label',
+  children: 'children'
+}
+let isCollect = ref(0)
+let isDiy = ref(0)
+let command = ref('')
+let videoList = ref([])
+let navList = ref([])
+let current = ref(0)
+let showNav = ref(true)
+let videoLog = ref(1)
+let videoRef = ref()
+let regionList = ref()
+let monitorChange = null
+let videoSrc = ref('')
+let show = ref(false)
+let loading = ref(false)
+let total = ref(0)
+let cameraName = ref('')
+let cameraIndexCode = ref('')
+let params = reactive({
+  pageNum: 1,
+  pageSize: 6,
+  businessScenicArea: '',
+  businessVideoDisplayPosition: ''
+})
+let hlsRefs = []
+let hlsRef = null
+let timer = null
 
-  const postVideoRemain = async () => {
-	if(!videoList.value.length) return false;
-    timer = setInterval(() => {
-      postVideoRemainApi({
-        cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
-      })
-    }, 2000)
-  }
+const postVideoRemain = async () => {
+  // if (!videoList.value.length) return false;
+  // timer = setInterval(() => {
+  //   postVideoRemainApi({
+  //     cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
+  //   })
+  // }, 2000)
+}
 
-  const initVideo = () => {
-    clearHlsRefs()
-    nextTick(() => {
-      videoList.value.forEach(async (item, index) => {
-        const video = document.getElementById(`monitorVideo${index}`)
-        const hls = new Hls({
+const initVideo = () => {
+  clearHlsRefs()
+  nextTick(() => {
+    videoList.value.forEach(async (item, index) => {
+      const videoElement = document.getElementById(`monitorVideo${index}`)
+      if(item.hlsUrl.startsWith("ws")){
+        const player = mpegtsjs.createPlayer({
+          url: item.hlsUrl,
+          type: 'flv',
+          isLive: true,
+          hasAudio: false
+        })
+        player.attachMediaElement(videoElement)
+        player.load()
+        player.play()
+
+        // 错误处理和重连机制
+        player.on('error', (err) => {
+          console.error('播放器错误:', err)
+          // 3 秒后尝试重新加载
+          setTimeout(() => {
+            player.load()
+            player.play()
+          }, 3000)
+        })
+        hlsRefs.push(player)
+      }else{
+        const player = new Hls({
           maxBufferLength: 10, // 最大缓冲长度（秒）
           maxMaxBufferLength: 15, // 缓冲区长度的上限
           maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
         })
-        hls.loadSource(item.hlsUrl)
-        hls.attachMedia(video)
-        hls.on(Hls.Events.MANIFEST_PARSED, () => {
-          video.play()
+        player.loadSource(item.hlsUrl)
+        player.attachMedia(videoElement)
+        player.on(Hls.Events.MANIFEST_PARSED, () => {
+          videoElement.play()
         })
-        hlsRefs.push(hls)
-      })
+        player.on(Hls.Events.ERROR, (event, data) => {
+          // console.error('HLS 播放器遇到错误:', data);
+          // hls.startLoad();
+          // initVideo()
+          // 根据错误类型进行处理
+          if (data.fatal) {
+            switch (data.type) {
+              case Hls.ErrorTypes.NETWORK_ERROR:
+                console.log('网络错误，尝试重新加载');
+                player.startLoad();
+                break;
+              case Hls.ErrorTypes.MEDIA_ERROR:
+                console.log('媒体错误，尝试修复');
+                player.recoverMediaError();
+                break;
+              default:
+                console.log('无法恢复的错误，销毁播放器');
+                // hls.destroy();
+                break;
+            }
+          }
+        })
+        hlsRefs.push(player)
+      }
     })
-  }
-  const onInput = debounce((e) => {
-	  
-	  if(e){
-		  getVideoRegions('search')
-	  }else{
-		  getVideoRegions()
-	  }
-    
-  }, 500)
-  const clearHlsRefs = () => {
-    if (hlsRefs.length > 0) {
-      hlsRefs.map((item) => {
-        item.destroy()
-      })
-      hlsRefs = []
-    }
-  }
-  const currentChange = (e) => {
-	  if(navList.value.length==current.value){
-		  clearHlsRefs()
-		  videoList.value = []
-		  getColletList()
-	  }else{
-		  clearHlsRefs()
-		  videoList.value = []
-		  getVideoList()
-	  }
-  
-  }
-  const  getColletList = async () => {
-	clearHlsRefs()
-	params.businessVideoDisplayPosition = ''
-    let res = await getColletDiyListApi(params)
-    videoList.value = res.data
-	// postVideoRemain()
-    total.value = res.total
-    nextTick(() => {
-      initVideo()
-    })
-  }
-  const handleNav = (e) => {
-	  clearInterval(timer)
-    if (current.value == e) return
-    clearHlsRefs()
-    videoLog.value = 1
-    params.pageNum = 1
-    videoList.value = []
-    total.value = 0
-    current.value = e
-    if(e==navList.value.length){
-      getColletList()
-    }else{
-      getVideoList()
-    }
+  })
+}
+const onInput = debounce((e) => {
 
+  if (e) {
+    getVideoRegions('search')
+  } else {
+    getVideoRegions()
   }
-  const handleBack = () => {
-    videoLog.value = 1
-    hlsRef.destroy()
+
+}, 500)
+const clearHlsRefs = () => {
+  if (hlsRefs.length > 0) {
+    hlsRefs.map((item) => {
+      item.destroy()
+    })
+    hlsRefs = []
+  }
+}
+const currentChange = (e) => {
+  if (navList.value.length == current.value) {
+    clearHlsRefs()
+    videoList.value = []
+    getColletList()
+  } else {
+    clearHlsRefs()
+    videoList.value = []
+    getVideoList()
+  }
+
+}
+const getColletList = async () => {
+  clearHlsRefs()
+  params.businessVideoDisplayPosition = ''
+  let res = await getColletDiyListApi(params)
+  videoList.value = res.data
+  // postVideoRemain()
+  total.value = res.total
+  nextTick(() => {
     initVideo()
+  })
+}
+const handleNav = (e) => {
+  clearInterval(timer)
+  if (current.value == e) return
+  clearHlsRefs()
+  videoLog.value = 1
+  params.pageNum = 1
+  videoList.value = []
+  total.value = 0
+  current.value = e
+  if (e == navList.value.length) {
+    getColletList()
+  } else {
+    getVideoList()
   }
-  let thisVideo = ref(null)
-  const handleItemVideo = (url, type, code,item) => {
-	thisVideo.value = item
-    videoLog.value = 2
-    cameraIndexCode.value = code
-    setTimeout(() => {
+
+}
+const handleBack = () => {
+  videoLog.value = 1
+  hlsRef.destroy()
+  initVideo()
+}
+let thisVideo = ref(null)
+const handleItemVideo = (url, type, code, item) => {
+  thisVideo.value = item
+  videoLog.value = 2
+  cameraIndexCode.value = code
+  setTimeout(() => {
+    if(url.startsWith('ws')){
+      hlsRef = mpegtsjs.createPlayer({
+        url: url,
+        type: 'flv',
+        isLive: true,
+        hasAudio: false
+      })
+      hlsRef.attachMediaElement(videoRef.value)
+      hlsRef.load()
+      hlsRef.play()
+      // 错误处理和重连机制
+      hlsRef.on('error', (err) => {
+        console.error('播放器错误:', err)
+        // 3 秒后尝试重新加载
+        setTimeout(() => {
+          hlsRef.load()
+          hlsRef.play()
+        }, 3000)
+      })
+    }else{
       hlsRef = new Hls({
         maxBufferLength: 10, // 最大缓冲长度（秒）
         maxMaxBufferLength: 15, // 缓冲区长度的上限
@@ -353,755 +424,844 @@
       hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
         videoRef.value.play()
       })
-      if (type == 100) initVideo()
-    }, 1000)
-  }
-  const handleAction = async (e) => {
-    if (e == STOP) {
-      ACTION = '1'
-    } else {
-      ACTION = '0'
-      command.value = e
     }
-    await postVideoControlApi({
-      action: ACTION,
-      command: command.value,
-      cameraIndexCode: cameraIndexCode.value
-    })
-    if (e == STOP) {
-      command.value = ''
-    }
-    ElMessage({
-      message: '操作成功',
-      type: 'success'
-    })
+
+    if (type == 100) initVideo()
+  }, 1000)
+}
+const handleAction = async (e) => {
+  if (e == STOP) {
+    ACTION = '1'
+  } else {
+    ACTION = '0'
+    command.value = e
   }
-  const handleRegions = (e) => {
-    regionList.value[e].show = !regionList.value[e].show
+  await postVideoControlApi({
+    action: ACTION,
+    command: command.value,
+    cameraIndexCode: cameraIndexCode.value
+  })
+  if (e == STOP) {
+    command.value = ''
   }
-  const handleRegList = (item,i,x)=>{
-	  regionList.value[i].resourcesList[x].show = !regionList.value[i].resourcesList[x].show
-	  
+  ElMessage({
+    message: '操作成功',
+    type: 'success'
+  })
+}
+const handleRegions = (e) => {
+  regionList.value[e].show = !regionList.value[e].show
+}
+const handleRegList = (item, i, x) => {
+  regionList.value[i].resourcesList[x].show = !regionList.value[i].resourcesList[x].show
+
+}
+const handleCamera = async (itemCode, resource) => {
+  show.value = true
+  let res = await getPreviewUrlApi({
+    type: 'hls',
+    cameraIndexCode: itemCode
+  })
+  console.log(res, 'rrrrrrrrrrrrrr')
+  cameraIndexCode.value = itemCode;
+  isCollect.value = resource.isCollect
+  isDiy.value = resource.isDiy
+  videoSrc.value = res.data.url
+}
+const handleCollect = async (id, status, index) => {
+  await postVideoCollectApi({
+    cameraIndexCode: id,
+    isCollect: status == 0 ? 1 : 0
+  })
+  if (status == 0) {
+    thisVideo.value.isCollect = 1
+    videoList.value[index].isCollect = 1
+  } else {
+    thisVideo.value.isCollect = 0
+    videoList.value[index].isCollect = 0
   }
-  const handleCamera = async (itemCode,resource) => {
-    show.value = true
-    let res = await getPreviewUrlApi({
-      type: 'hls',
-      cameraIndexCode:itemCode
-    })
-	console.log(res,'rrrrrrrrrrrrrr')
-    cameraIndexCode.value = itemCode;
-	  isCollect.value = resource.isCollect
-	  isDiy.value = resource.isDiy
-    videoSrc.value = res.data.url
+  pubSub.publish('videoCollect', id)
+}
+const handleCollectAdd = async (id, status, index) => {
+  await getColletDiyApi({
+    cameraIndexCode: id,
+    isDiy: thisVideo.value.isDiy == 0 ? 1 : 0
+  })
+  if (thisVideo.value.isDiy == 1) {
+    thisVideo.value.isDiy = 0
+    // videoList.value.forEach((item,index)=>{
+    // 	if(item.cameraIndexCode==thisVideo.value.cameraIndexCode){
+    // 		videoList.value.splice(index, 1);
+    // 	}
+    // })
+  } else {
+    thisVideo.value.isDiy = 1
   }
-  const handleCollect = async (id, status, index) => {
-    await postVideoCollectApi({
-      cameraIndexCode:id,
-      isCollect: status == 0 ? 1 : 0
-    })
-    if (status == 0) {
-		thisVideo.value.isCollect=1
-      videoList.value[index].isCollect = 1
-    } else {
-		thisVideo.value.isCollect=0
-      videoList.value[index].isCollect = 0
-    }
-    pubSub.publish('videoCollect', id)
+  if (current.value == navList.value.length) {
+    getColletList()
   }
-  const handleCollectAdd = async (id, status, index) => {
-    await getColletDiyApi({
-      cameraIndexCode:id,
-      isDiy: thisVideo.value.isDiy == 0 ? 1 : 0
-    })
-	if(thisVideo.value.isDiy==1){
-		thisVideo.value.isDiy=0
-		// videoList.value.forEach((item,index)=>{
-		// 	if(item.cameraIndexCode==thisVideo.value.cameraIndexCode){
-		// 		videoList.value.splice(index, 1);
-		// 	}
-		// })
-	}else{
-		thisVideo.value.isDiy=1
-	}
-	if(current.value==navList.value.length){
-	  getColletList()
-	}
-  }
-  watch(
+}
+watch(
     () => videoList.value,
     (val) => {
       if (val.length) {
-		  // console.log(val,'数据更新 内容')
+        // console.log(val,'数据更新 内容')
         postVideoRemain()
       }
     },
-    { immediate: true }
-  )
-  const getVideoList = async (val) => {
-    try {
-      if (loading.value) return
-      loading.value = true
-	  if(val==3){
-		  params.businessVideoDisplayPosition = ''
-	  }else{
-		 params.businessVideoDisplayPosition = navList.value[current.value].dictValue
-	  }
+    {immediate: true}
+)
+const getVideoList = async (val) => {
+  try {
+    if (loading.value) return
+    loading.value = true
+    if (val == 3) {
+      params.businessVideoDisplayPosition = ''
+    } else {
+      params.businessVideoDisplayPosition = navList.value[current.value].dictValue
+    }
 
-      let res = await getVideoListApi(params)
-      total.value = res.total
-      if (res.data.length > 0) {
-        
-        videoList.value = res.data
-		// console.log(videoList.value,'1111111111111111111111')
-		// postVideoRemain()
-        nextTick(() => {
-          videoList.value.forEach(async (x, index) => {
-            const video = document.getElementById(`monitorVideo${index}`)
-            const hls = new Hls({
+    let res = await getVideoListApi(params)
+    total.value = res.total
+    if (res.data.length > 0) {
+
+      videoList.value = res.data
+      // console.log(videoList.value,'1111111111111111111111')
+      // postVideoRemain()
+      nextTick(() => {
+        videoList.value.forEach(async (x, index) => {
+          const videoElement = document.getElementById(`monitorVideo${index}`)
+          if(x.hlsUrl.startsWith('ws')){
+            const player = mpegtsjs.createPlayer({
+              url: x.hlsUrl,
+              type: 'flv',
+              isLive: true,
+              hasAudio: false
+            })
+            player.attachMediaElement(videoElement)
+            player.load()
+            player.play()
+
+            // 错误处理和重连机制
+            player.on('error', (err) => {
+              console.error('播放器错误:', err)
+              // 3 秒后尝试重新加载
+              setTimeout(() => {
+                player.load()
+                player.play()
+              }, 3000)
+            })
+
+            hlsRefs.push(player)
+          }else{
+            const player = 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()
+            player.loadSource(x.hlsUrl)
+            player.attachMedia(videoElement)
+            player.on(Hls.Events.MANIFEST_PARSED, () => {
+              videoElement.play()
             })
-			 hls.on(Hls.Events.ERROR, (event, data) => {
-				 // console.error('HLS 播放器遇到错误:', data);
-				 // hls.startLoad();
-				 // 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)
-          })
+            player.on(Hls.Events.ERROR, (event, data) => {
+              // console.error('HLS 播放器遇到错误:', data);
+              // hls.startLoad();
+              // initVideo()
+              // 根据错误类型进行处理
+              if (data.fatal) {
+                switch (data.type) {
+                  case Hls.ErrorTypes.NETWORK_ERROR:
+                    console.log('网络错误，尝试重新加载');
+                    player.startLoad();
+                    break;
+                  case Hls.ErrorTypes.MEDIA_ERROR:
+                    console.log('媒体错误，尝试修复');
+                    player.recoverMediaError();
+                    break;
+                  default:
+                    console.log('无法恢复的错误，销毁播放器');
+                    // hls.destroy();
+                    break;
+                }
+              }
+            })
+            hlsRefs.push(player)
+         }
         })
-      } else {
-        if (timer) clearInterval(timer)
-      }
-      loading.value = false
-    } catch (error) {
-      loading.value = false
-    }
-  }
-  const getVideoType = async (id) => {
-    let res = await getVideoTypeApi({
-      businessScenicArea: params.businessScenicArea
-    })
-    if (res.data.length > 0) {
-      navList.value = res.data
-      getVideoList(id)
+      })
     } else {
-      videoList.value = []
-      initVideo()
+      if (timer) clearInterval(timer)
     }
+    loading.value = false
+  } catch (error) {
+    loading.value = false
   }
-  const getVideoRegions = async (search) => {
-    let res = await getVideoRegionsApi({
-      cameraName: cameraName.value,
-      businessScenicArea: params.businessScenicArea
+}
+const getVideoType = async (id) => {
+  let res = await getVideoTypeApi({
+    businessScenicArea: params.businessScenicArea
+  })
+  if (res.data.length > 0) {
+    navList.value = res.data
+    getVideoList(id)
+  } else {
+    videoList.value = []
+    initVideo()
+  }
+}
+const getVideoRegions = async (search) => {
+  let res = await getVideoRegionsApi({
+    cameraName: cameraName.value,
+    businessScenicArea: params.businessScenicArea
+  })
+
+  regionList.value = res.data
+  regionList.value.videoResources = res.data.videoResources
+  // regionList.value[0].show = true
+  // regionList.value[0].resourcesList[0].show = true
+  // 初始化 false
+  regionList.value.forEach((item, index) => {
+    // item.show = true
+    item.resourcesList.forEach((r, i) => {
+      r.show = false
     })
-	
-    regionList.value = res.data
-	regionList.value.videoResources = res.data.videoResources
-	// regionList.value[0].show = true
-	// regionList.value[0].resourcesList[0].show = true
-	// 初始化 false
-	regionList.value.forEach((item,index)=>{
-		// item.show = true
-		item.resourcesList.forEach((r,i)=>{
-			r.show = false
-		})
-	})
-	
-	if(search=='search'){
-		regionList.value.forEach((item,index)=>{
-			item.show = true
-			item.resourcesList.forEach((r,i)=>{
-				r.show = true
-			})
-		})
-	}
-	
-    console.log(regionList.value, ' regionList.value')
-  }
-  const onMonitorChange = () => {
-    monitorChange = pubSub.subscribe('monitorChange', (res, data) => {
-		cameraName.value = ''
-		current.value = 0
-      params.businessScenicArea = data.scenicSpotId
-      params.pageNum = 1
-      videoList.value = []
-      regionList.value = []
-      total.value = 0
-	  setTimeout(()=>{
-	  	getVideoType()
-	  	getVideoRegions()
-	  },1500)
-    
-	  
+  })
+
+  if (search == 'search') {
+    regionList.value.forEach((item, index) => {
+      item.show = true
+      item.resourcesList.forEach((r, i) => {
+        r.show = true
+      })
     })
   }
-  onMounted(() => {
-    getVideoType()
-    getVideoRegions()
-    onMonitorChange()
-	pubSub.subscribe('videoIsDiy', (msg, data) => {
-		console.log(data,'收藏 ++++++++++++++')
-		if(data.isDiy){
-			if(current.value==navList.value.length){
-			  getColletList()
-			}
-		}else{
-			videoList.value.forEach((item,index)=>{
-			  if(item.cameraIndexCode==data.cameraIndexCode){
-				  videoList.value.splice(index,1)
-			  }
-			})
-		}
-	})
+
+  console.log(regionList.value, ' regionList.value')
+}
+const onMonitorChange = () => {
+  monitorChange = pubSub.subscribe('monitorChange', (res, data) => {
+    cameraName.value = ''
+    current.value = 0
+    params.businessScenicArea = data.scenicSpotId
+    params.pageNum = 1
+    videoList.value = []
+    regionList.value = []
+    total.value = 0
+    setTimeout(() => {
+      getVideoType()
+      getVideoRegions()
+    }, 1500)
+
+
   })
-  onUnmounted(() => {
-    clearHlsRefs()
-    if (timer) clearInterval(timer)
-    pubSub.unsubscribe(monitorChange)
+}
+onMounted(() => {
+  getVideoType()
+  getVideoRegions()
+  onMonitorChange()
+  pubSub.subscribe('videoIsDiy', (msg, data) => {
+    console.log(data, '收藏 ++++++++++++++')
+    if (data.isDiy) {
+      if (current.value == navList.value.length) {
+        getColletList()
+      }
+    } else {
+      videoList.value.forEach((item, index) => {
+        if (item.cameraIndexCode == data.cameraIndexCode) {
+          videoList.value.splice(index, 1)
+        }
+      })
+    }
   })
+})
+onUnmounted(() => {
+  clearHlsRefs()
+  if (timer) clearInterval(timer)
+  pubSub.unsubscribe(monitorChange)
+})
 </script>
 
 <style lang="scss" scoped>
-	.new-title{
-		margin-bottom:vh(20);
-		color:#fff;
-		position:relative;
-		// left:vw(-15);
-	}
-	.tree-item__child-item{
-		.new-title:last-child{
-			margin:0;
-		}
-	}
-  .action {
-    &-box {
-      margin-top: vh(16);
-      gap: vw(20);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    &-item {
-      padding: vw(16);
-      display: flex;
-      align-items: center;
-      background: #0a4190;
-      border-radius: vw(8);
-      > img {
-        cursor: pointer;
-        width: vw(34);
-        height: auto;
-      }
-      > span {
-        margin: 0 vw(16);
-        font-weight: 400;
-        font-size: vw(16);
-        color: #ffffff;
-      }
-      .pause {
-        margin: 0 vw(10);
-      }
-	  .item-sc{
-		  padding:vw(10);
-	  }
-    }
-  }
-  //背景色设置为透明
-  :deep(.el-input__wrapper) {
-    background-color: rgba(0, 0, 0, 0);
-    border: none;
-    box-shadow: none;
-  }
-  //输入框颜色
-  :deep(.el-input__inner) {
-    background-color: rgba(0, 0, 0, 0) !important;
-    color: #fff;
-  }
+.new-title {
+  margin-bottom: vh(20);
+  color: #fff;
+  position: relative;
+  // left:vw(-15);
+}
 
-  .box-2 {
-    margin-top: vh(120);
-    height: vh(950);
+.tree-item__child-item {
+  .new-title:last-child {
+    margin: 0;
+  }
+}
+
+.action {
+  &-box {
+    margin-top: vh(16);
+    gap: vw(20);
     display: flex;
-    flex: 1;
+    align-items: center;
+    justify-content: center;
   }
-  :deep(.el-input__inner) {
-    height: vh(36);
-    font-size: vw(16);
-    color: #ffffff;
+
+  &-item {
+    padding: vw(16);
+    display: flex;
+    align-items: center;
+    background: #0a4190;
+    border-radius: vw(8);
+
+    > img {
+      cursor: pointer;
+      width: vw(34);
+      height: auto;
+    }
+
+    > span {
+      margin: 0 vw(16);
+      font-weight: 400;
+      font-size: vw(16);
+      color: #ffffff;
+    }
+
+    .pause {
+      margin: 0 vw(10);
+    }
+
+    .item-sc {
+      padding: vw(10);
+    }
   }
-  .left-nav {
-    margin: 0 vw(8);
-    width: vw(250);
-    background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
-    .bom-box {
-      margin-top: vh(20);
-      .search-box {
-        border-radius: vw(2);
-        height: vh(36);
-        border: 1px solid #0096ff;
-        margin: vh(10) auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
+}
 
-        .search-icon {
-          width: vw(20);
-          height: vw(20);
-          margin-right: vw(10);
-        }
-      }
+//背景色设置为透明
+:deep(.el-input__wrapper) {
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  box-shadow: none;
+}
 
-      .tree-box {
-        position: relative;
-        height: vh(490);
-        padding: 0 vw(20);
-		padding-right:0;
-		padding-bottom:vw(10);
-        overflow-y: auto;
-        overflow-x: hidden;
-        /* 滚动条整体样式 */
-        &::-webkit-scrollbar {
-          width: vw(4); /* 滚动条的宽度 */
-        }
-        /* 滚动条轨道 */
-        &::-webkit-scrollbar-track {
-          background: 'transparent'; /* 轨道的背景色 */
-        }
-        /* 滚动条滑块 */
-        &::-webkit-scrollbar-thumb {
-          background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
-          border-radius: 5px; /* 滑块的圆角 */
-        }
-        .tree-item {
-          cursor: pointer;
-          position: relative;
-          padding-top: vh(20);
-          // border-left: vw(2) solid #37d8fc;
-          &:nth-child(1) {
-            padding-top: 0;
-          }
-          &__node {
-            position: relative;
-            display: flex;
-            align-items: flex-start;
-          }
-          &__icon {
-            margin-left: vw(-8);
-            width: vw(16);
-            height: auto;
-          }
-          &__icon-up {
-            @extend .tree-item__icon;
-            transform: rotate(180deg);
-          }
-          &__name {
-            padding: 0 vw(5);
-            display: block;
-            font-weight: 400;
-            font-size: vw(15);
-            color: #ffffff;
-            text-align: left;
-            font-style: normal;
-            text-transform: none;
-          }
-          &__child {
-            position: relative;
-            margin-top: vh(20);
-            // margin-left: vw(20);
-            // border-left: vw(2) solid #37d8fc;
-          }
-          &-top__icon {
-            position: absolute;
-            left: vw(-8);
-            top: vh(0);
-            width: vw(16);
-            height: vw(16);
-          }
-          &-bottom__icon {
-            position: absolute;
-            left: vw(-8);
-            bottom: vh(0);
-            width: vw(16);
-            height: vw(16);
-          }
-          &__child-item {
-            padding: vh(0) vw(20) vh(20) vw(10);
-            cursor: pointer;
-            color: rgb(192,216,254);
-            font-weight: 400;
-            font-size: vw(15);
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            // display: flex;
-            align-items: flex-start;
-			padding-right:0;
-            &:nth-last-of-type(1) {
-     //          padding: vh(0) vw(20);
-			  // padding-right:0;
-			  padding-bottom:0;
-            }
-          }
-        }
+//输入框颜色
+:deep(.el-input__inner) {
+  background-color: rgba(0, 0, 0, 0) !important;
+  color: #fff;
+}
+
+.box-2 {
+  margin-top: vh(120);
+  height: vh(950);
+  display: flex;
+  flex: 1;
+}
+
+:deep(.el-input__inner) {
+  height: vh(36);
+  font-size: vw(16);
+  color: #ffffff;
+}
+
+.left-nav {
+  margin: 0 vw(8);
+  width: vw(250);
+  background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
+
+  .bom-box {
+    margin-top: vh(20);
+
+    .search-box {
+      border-radius: vw(2);
+      height: vh(36);
+      border: 1px solid #0096ff;
+      margin: vh(10) auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .search-icon {
+        width: vw(20);
+        height: vw(20);
+        margin-right: vw(10);
       }
     }
-    .ul {
-      font-weight: 400;
-      font-size: vw(18);
-      color: #fff;
-      height: vh(340);
+
+    .tree-box {
+      position: relative;
+      height: vh(490);
+      padding: 0 vw(20);
+      padding-right: 0;
+      padding-bottom: vw(10);
       overflow-y: auto;
       overflow-x: hidden;
       /* 滚动条整体样式 */
-      
       &::-webkit-scrollbar {
         width: vw(4); /* 滚动条的宽度 */
       }
+
       /* 滚动条轨道 */
       &::-webkit-scrollbar-track {
         background: 'transparent'; /* 轨道的背景色 */
       }
+
       /* 滚动条滑块 */
       &::-webkit-scrollbar-thumb {
         background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
         border-radius: 5px; /* 滑块的圆角 */
       }
-      .li {
+
+      .tree-item {
         cursor: pointer;
-        width: vw(250);
-        height: vh(58);
-        line-height: vh(58);
-        text-align: center;
-        margin-bottom: vh(15);
-        background: url('/src/assets/images/m-nav-bg-1.png');
-        background-size: 100% 100%;
-      }
-      .active {
-        background: url('/src/assets/images/m-nav-bg-2.png');
-        background-size: 100% 100%;
+        position: relative;
+        padding-top: vh(20);
+        // border-left: vw(2) solid #37d8fc;
+        &:nth-child(1) {
+          padding-top: 0;
+        }
+
+        &__node {
+          position: relative;
+          display: flex;
+          align-items: flex-start;
+        }
+
+        &__icon {
+          margin-left: vw(-8);
+          width: vw(16);
+          height: auto;
+        }
+
+        &__icon-up {
+          @extend .tree-item__icon;
+          transform: rotate(180deg);
+        }
+
+        &__name {
+          padding: 0 vw(5);
+          display: block;
+          font-weight: 400;
+          font-size: vw(15);
+          color: #ffffff;
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+        }
+
+        &__child {
+          position: relative;
+          margin-top: vh(20);
+          // margin-left: vw(20);
+          // border-left: vw(2) solid #37d8fc;
+        }
+
+        &-top__icon {
+          position: absolute;
+          left: vw(-8);
+          top: vh(0);
+          width: vw(16);
+          height: vw(16);
+        }
+
+        &-bottom__icon {
+          position: absolute;
+          left: vw(-8);
+          bottom: vh(0);
+          width: vw(16);
+          height: vw(16);
+        }
+
+        &__child-item {
+          padding: vh(0) vw(20) vh(20) vw(10);
+          cursor: pointer;
+          color: rgb(192, 216, 254);
+          font-weight: 400;
+          font-size: vw(15);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          // display: flex;
+          align-items: flex-start;
+          padding-right: 0;
+
+          &:nth-last-of-type(1) {
+            //          padding: vh(0) vw(20);
+            // padding-right:0;
+            padding-bottom: 0;
+          }
+        }
       }
     }
   }
 
-  .video {
-    &-wrapper {
-      position: relative;
-      width: 100%;
-      height: vh(960);
-      padding: vh(30) vw(20);
-      box-sizing: border-box;
-      background-image: url('/src/assets/images/log-v-bg.png');
-      background-size: 100% 100%;
-      .pagination {
-        padding: vh(10) vw(30);
-        position: absolute;
-        right: vw(30);
-        bottom: vh(20);
-      }
-    }
-    &-list {
-      gap: vw(8);
-      display: flex;
-      flex-wrap: wrap;
-      align-content: flex-start;
-    }
-    &-item {
-      position: relative;
-      // width: vw(686);
-	  width: 33%;
-      height: vh(380);
-      padding: vh(10) vw(10);
-      background-image: url('/src/assets/images/item-primary.png');
-      background-size: 100% 100%;
-      &:hover {
-        .video-item__follow {
-          display: block !important;
-        }
-      }
-    }
-    &-item__follow {
-      cursor: pointer;
-      display: none;
-      position: absolute;
-      right: vw(8);
-      top: vw(8);
-      z-index: 9999;
-      padding: 0 vw(20);
-      height: vh(24);
-      text-align: center;
-      line-height: vh(24);
-      font-weight: 400;
-      font-size: vw(16);
-      color: #ffffff;
-      background-image: url('@/assets/images/unfollow.png');
-      background-size: 100% 100%;
-    }
-    &-item__unfollow {
-      @extend .video-item__follow;
-      background-image: url('@/assets/images/unfollow.png');
+  .ul {
+    font-weight: 400;
+    font-size: vw(18);
+    color: #fff;
+    height: vh(340);
+    overflow-y: auto;
+    overflow-x: hidden;
+    /* 滚动条整体样式 */
+
+    &::-webkit-scrollbar {
+      width: vw(4); /* 滚动条的宽度 */
     }
 
-    &-item__inner {
-      position: relative;
+    /* 滚动条轨道 */
+    &::-webkit-scrollbar-track {
+      background: 'transparent'; /* 轨道的背景色 */
     }
-    &-item__title {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 100%;
-      padding: vh(10) vw(10);
-      color: #fff;
-      font-size: vw(14);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      z-index: 999;
+
+    /* 滚动条滑块 */
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+      border-radius: 5px; /* 滑块的圆角 */
     }
-    &-item__title--error {
-      @extend .video-item__title;
-      background-color: rgba(226, 27, 27, 0.72);
-    }
-    &-item__title--primary {
-      @extend .video-item__title;
-      background-color: rgba(4, 30, 69, 0.72);
-    }
-    &-item__video {
-      width: 100%;
-      height: vh(366);
-      object-fit: cover;
-    }
-    &-detail {
-      margin-left: vw(10);
-      display: flex;
-      justify-content: space-between;
-    }
-    &-detail__wrapper {
-      position: relative;
-      padding: vh(40) vw(50);
-      width: vw(1660);
-      height: vh(960);
-      background-image: url('/src/assets/images/one-video-bg.png');
+
+    .li {
+      cursor: pointer;
+      width: vw(250);
+      height: vh(58);
+      line-height: vh(58);
+      text-align: center;
+      margin-bottom: vh(15);
+      background: url('/src/assets/images/m-nav-bg-1.png');
       background-size: 100% 100%;
     }
-    &-detail__title {
+
+    .active {
+      background: url('/src/assets/images/m-nav-bg-2.png');
+      background-size: 100% 100%;
+    }
+  }
+}
+
+.video {
+  &-wrapper {
+    position: relative;
+    width: 100%;
+    height: vh(960);
+    padding: vh(30) vw(20);
+    box-sizing: border-box;
+    background-image: url('/src/assets/images/log-v-bg.png');
+    background-size: 100% 100%;
+
+    .pagination {
+      padding: vh(10) vw(30);
       position: absolute;
-      left: vw(50);
-      right: vw(50);
-      top: 40 (vh);
-      z-index: 9;
-      font-weight: 400;
-      font-size: vw(14);
-      color: #ffffff;
-      padding: vw(20);
-      display: flex;
-      justify-content: space-between;
-      background: rgba(4, 30, 69, 0.5);
+      right: vw(30);
+      bottom: vh(20);
     }
-    &-detail__video {
-      width: 100%;
-      height: vh(820);
-      object-fit: contain;
-      background-color: #000;
-    }
-    &-right {
-      margin-left: vw(8);
-      width: vw(440);
-      height: vh(956);
-      background: #082f5a;
-      .back-box {
-        cursor: pointer;
-        padding-right: vw(20);
-        display: flex;
-        align-items: center;
-        .icon {
-          width: vw(30);
-          height: auto;
-          margin-right: vw(10);
-        }
-        & > span {
-          font-weight: bold;
-          font-size: vw(20);
-          color: #ffffff;
-        }
+  }
+
+  &-list {
+    gap: vw(8);
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+  }
+
+  &-item {
+    position: relative;
+    // width: vw(686);
+    width: 33%;
+    height: vh(380);
+    padding: vh(10) vw(10);
+    background-image: url('/src/assets/images/item-primary.png');
+    background-size: 100% 100%;
+
+    &:hover {
+      .video-item__follow {
+        display: block !important;
       }
-      .list {
+    }
+  }
+
+  &-item__follow {
+    cursor: pointer;
+    display: none;
+    position: absolute;
+    right: vw(8);
+    top: vw(8);
+    z-index: 9999;
+    padding: 0 vw(20);
+    height: vh(24);
+    text-align: center;
+    line-height: vh(24);
+    font-weight: 400;
+    font-size: vw(16);
+    color: #ffffff;
+    background-image: url('@/assets/images/unfollow.png');
+    background-size: 100% 100%;
+  }
+
+  &-item__unfollow {
+    @extend .video-item__follow;
+    background-image: url('@/assets/images/unfollow.png');
+  }
+
+  &-item__inner {
+    position: relative;
+  }
+
+  &-item__title {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    padding: vh(10) vw(10);
+    color: #fff;
+    font-size: vw(14);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    z-index: 999;
+  }
+
+  &-item__title--error {
+    @extend .video-item__title;
+    background-color: rgba(226, 27, 27, 0.72);
+  }
+
+  &-item__title--primary {
+    @extend .video-item__title;
+    background-color: rgba(4, 30, 69, 0.72);
+  }
+
+  &-item__video {
+    width: 100%;
+    height: vh(366);
+    object-fit: cover;
+  }
+
+  &-detail {
+    margin-left: vw(10);
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &-detail__wrapper {
+    position: relative;
+    padding: vh(40) vw(50);
+    width: vw(1660);
+    height: vh(960);
+    background-image: url('/src/assets/images/one-video-bg.png');
+    background-size: 100% 100%;
+  }
+
+  &-detail__title {
+    position: absolute;
+    left: vw(50);
+    right: vw(50);
+    top: 40 (vh);
+    z-index: 9;
+    font-weight: 400;
+    font-size: vw(14);
+    color: #ffffff;
+    padding: vw(20);
+    display: flex;
+    justify-content: space-between;
+    background: rgba(4, 30, 69, 0.5);
+  }
+
+  &-detail__video {
+    width: 100%;
+    height: vh(820);
+    object-fit: contain;
+    background-color: #000;
+  }
+
+  &-right {
+    margin-left: vw(8);
+    width: vw(440);
+    height: vh(956);
+    background: #082f5a;
+
+    .back-box {
+      cursor: pointer;
+      padding-right: vw(20);
+      display: flex;
+      align-items: center;
+
+      .icon {
+        width: vw(30);
+        height: auto;
+        margin-right: vw(10);
+      }
+
+      & > span {
+        font-weight: bold;
+        font-size: vw(20);
+        color: #ffffff;
+      }
+    }
+
+    .list {
+      overflow-y: auto;
+      overflow-x: hidden;
+      height: vh(920);
+      padding: vw(8);
+      /* 滚动条整体样式 */
+      &::-webkit-scrollbar {
+        width: vw(0); /* 滚动条的宽度 */
+      }
+
+      /* 滚动条轨道 */
+      &::-webkit-scrollbar-track {
+        background: #f1f1f1; /* 轨道的背景色 */
+      }
+
+      /* 滚动条滑块 */
+      &::-webkit-scrollbar-thumb {
+        background: #888; /* 滑块的背景色 */
+        border-radius: 5px; /* 滑块的圆角 */
+      }
+
+      /* 当鼠标悬停在滚动条上时滑块的样式 */
+      &::-webkit-scrollbar-thumb:hover {
+        background: #555; /* 滑块的背景色 */
+      }
+    }
+
+    .item {
+      margin-bottom: vh(10);
+      padding: vw(10);
+      background-image: url('@/assets/images/item-primary.png');
+      background-size: 100% 100%;
+
+      & > div {
+        position: relative;
+      }
+
+      &-title {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        padding: vw(10);
+        color: #fff;
+        font-size: vw(14);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        z-index: 999;
+      }
+
+      &-title--error {
+        @extend .item-title;
+        background-color: rgba(226, 27, 27, 0.72);
+      }
+
+      &-title--primary {
+        @extend .item-title;
+        background-color: rgba(4, 30, 69, 0.72);
+      }
+
+      &-img {
+        width: 100%;
+        height: vh(164);
+        display: block;
+        object-fit: cover;
+      }
+    }
+  }
+
+  .video-live {
+    .video-rt {
+      width: vw(400);
+      height: vh(950);
+      background: radial-gradient(
+              to bottom 70% at 99% 50%,
+              #0a4190 0%,
+              rgba(0, 77, 136, 0.6) 100%
+      );
+      border-radius: 0px 0px 0px 0px;
+      border: 1px solid;
+      opacity: 0.4;
+      border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
+      margin-left: vw(10);
+      padding: vw(20);
+
+      .rt-v-box {
         overflow-y: auto;
-        overflow-x: hidden;
-        height: vh(920);
-        padding: vw(8);
         /* 滚动条整体样式 */
         &::-webkit-scrollbar {
-          width: vw(0); /* 滚动条的宽度 */
+          width: vw(4); /* 滚动条的宽度 */
         }
 
         /* 滚动条轨道 */
         &::-webkit-scrollbar-track {
-          background: #f1f1f1; /* 轨道的背景色 */
+          background: 'transparent'; /* 轨道的背景色 */
         }
 
         /* 滚动条滑块 */
         &::-webkit-scrollbar-thumb {
-          background: #888; /* 滑块的背景色 */
+          background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
           border-radius: 5px; /* 滑块的圆角 */
         }
 
-        /* 当鼠标悬停在滚动条上时滑块的样式 */
-        &::-webkit-scrollbar-thumb:hover {
-          background: #555; /* 滑块的背景色 */
-        }
+        height: 100%;
       }
 
-      .item {
-        margin-bottom: vh(10);
-        padding: vw(10);
-        background-image: url('@/assets/images/item-primary.png');
+      .title {
+        background-image: url('/src/assets/images/nav-l-t-bg.png');
         background-size: 100% 100%;
-        & > div {
-          position: relative;
-        }
-        &-title {
-          position: absolute;
-          bottom: 0;
-          width: 100%;
-          padding: vw(10);
-          color: #fff;
-          font-size: vw(14);
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          z-index: 999;
-        }
-        &-title--error {
-          @extend .item-title;
-          background-color: rgba(226, 27, 27, 0.72);
-        }
-        &-title--primary {
-          @extend .item-title;
-          background-color: rgba(4, 30, 69, 0.72);
-        }
-        &-img {
-          width: 100%;
-          height: vh(164);
-          display: block;
-          object-fit: cover;
+        margin-bottom: vh(10);
+        position: relative;
+        left: vw(-20);
+
+        span {
+          margin-left: vw(30);
+          font-weight: 800;
+          font-size: vw(15);
+          line-height: vh(26);
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+
+          background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
+          -webkit-background-clip: text;
+          background-clip: text;
+          -webkit-text-fill-color: transparent;
+          color: transparent;
         }
       }
-    }
-    .video-live {
-      .video-rt {
-        width: vw(400);
-        height: vh(950);
-        background: radial-gradient(
-          to bottom 70% at 99% 50%,
-          #0a4190 0%,
-          rgba(0, 77, 136, 0.6) 100%
-        );
-        border-radius: 0px 0px 0px 0px;
-        border: 1px solid;
-        opacity: 0.4;
-        border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
-        margin-left: vw(10);
-        padding: vw(20);
-        .rt-v-box {
-          overflow-y: auto;
-          /* 滚动条整体样式 */
-          &::-webkit-scrollbar {
-            width: vw(4); /* 滚动条的宽度 */
-          }
-          /* 滚动条轨道 */
-          &::-webkit-scrollbar-track {
-            background: 'transparent'; /* 轨道的背景色 */
-          }
-          /* 滚动条滑块 */
-          &::-webkit-scrollbar-thumb {
-            background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
-            border-radius: 5px; /* 滑块的圆角 */
-          }
-          height: 100%;
-        }
-        .title {
-          background-image: url('/src/assets/images/nav-l-t-bg.png');
-          background-size: 100% 100%;
-          margin-bottom: vh(10);
-          position: relative;
-          left: vw(-20);
-          span {
-            margin-left: vw(30);
-            font-weight: 800;
-            font-size: vw(15);
-            line-height: vh(26);
-            text-align: center;
-            font-style: normal;
-            text-transform: none;
 
-            background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
-            -webkit-background-clip: text;
-            background-clip: text;
-            -webkit-text-fill-color: transparent;
-            color: transparent;
-          }
-        }
-        .rt-video {
+      .rt-video {
+        width: 100%;
+        height: vh(300);
+        background-image: url('/src/assets/images/v-item-bg.png');
+        background-size: 100% 100%;
+        padding: vw(20);
+        box-sizing: border-box;
+        margin-bottom: vh(2);
+        position: relative;
+
+        .desc {
+          position: absolute;
           width: 100%;
-          height: vh(300);
-          background-image: url('/src/assets/images/v-item-bg.png');
-          background-size: 100% 100%;
+          left: 0;
+          bottom: 0;
+          z-index: 9;
+          background: rgba(4, 30, 69, 0.5);
+          border-radius: 0px 0px 0px 0px;
+          text-align: center;
+          font-weight: 400;
+          font-size: vw(14);
+          color: #ffffff;
           padding: vw(20);
-          box-sizing: border-box;
-          margin-bottom: vh(2);
-          position: relative;
-          .desc {
-            position: absolute;
-            width: 100%;
-            left: 0;
-            bottom: 0;
-            z-index: 9;
-            background: rgba(4, 30, 69, 0.5);
-            border-radius: 0px 0px 0px 0px;
-            text-align: center;
-            font-weight: 400;
-            font-size: vw(14);
-            color: #ffffff;
-            padding: vw(20);
-            text-align: left;
-            font-style: normal;
-            text-transform: none;
-          }
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
         }
-        .v-error-bg {
-          background-image: url('/src/assets/images/v-item-bg-1.png');
-          background-size: 100% 100%;
-          .desc {
-            background: rgba(226, 27, 27, 0.5);
-          }
+      }
+
+      .v-error-bg {
+        background-image: url('/src/assets/images/v-item-bg-1.png');
+        background-size: 100% 100%;
+
+        .desc {
+          background: rgba(226, 27, 27, 0.5);
         }
       }
     }
   }
+}
 </style>
diff --git a/src/views/scenic/components/jam.vue b/src/views/scenic/components/jam.vue
index 4b44f7d..28ee6f3 100644
--- a/src/views/scenic/components/jam.vue
+++ b/src/views/scenic/components/jam.vue
@@ -151,12 +151,28 @@
       params.series[0].label.formatter = formatLabel()
       params.series[0].data = getSeriesData()
     }
-    setOption(params)
+    const chart = setOption(params);
+    chart.on('legendselectchanged', function (e) {
+      var echartsArr = [];
+      for (let key in e.selected) {
+        if (e.selected[key]) {
+          echartsArr.push(key)
+        }
+      }
+      var echartsNum = 0;
+      props.list.forEach(item => {
+        if(echartsArr.includes(item.name)){
+          echartsNum += parseInt(item.count)
+        }
+      })
+      params.series[0].label.formatter = `{value|${echartsNum}}` + '\n' + `{name|${props.subTitle}}`;
+      setOption(params);
+    });
   }
 </script>
 
 <style scoped lang="scss">
-	
+
 	.nYong-du{
 		position:absolute;
 		left:0;
diff --git a/src/views/sentiment/index.vue b/src/views/sentiment/index.vue
index 7bbb4c9..82d39f6 100644
--- a/src/views/sentiment/index.vue
+++ b/src/views/sentiment/index.vue
@@ -60,7 +60,7 @@
 			  :seriesConfig="{ smooth: false, symbol: 'circle' }"
 			/>
 		</div>
-      
+
       </div>
       <div class="box-4 mr-8 rela">
         <Title1 title="地域分析" />
@@ -88,7 +88,7 @@
 						<span class="label">情感属性：</span>
 						<span class="value">{{ detailsHot.newsEmotion }}</span>
 					</div>
-					
+
 				</div>
 				<div class="m-modal">
 					<div class="detail-item">
@@ -101,7 +101,7 @@
 					</div>
 				</div>
 				<div class="m-modal">
-					
+
 					<div class="detail-item">
 						<span class="label">原文链接：</span>
 						<a :href="detailsHot.newsUrl" target="_blank" class="link">{{ detailsHot.newsUrl }}</a>
@@ -116,7 +116,7 @@
 				<div class="content" v-html="detailsHot.newsContent"></div>
 			  </div>
 			</div>
-	      
+
 	    </div>
 	  </div>
 	</el-dialog>
@@ -229,7 +229,7 @@
 }
 .m-modal{
 	display: flex;
-	
+
 }
 .detail-item {
 	flex:1;
@@ -461,7 +461,7 @@
 </style>
 
 <style scoped lang="scss">
-	
+
   .select-box {
     position: absolute;
     z-index: 99;
@@ -531,6 +531,7 @@
         display: flex;
         align-items: center;
         height: vh(40);
+        cursor: pointer;
         &:nth-child(2n + 1) {
           background: rgba(3, 78, 153, 0.3);
         }
diff --git a/src/views/traffic/components/box-2.vue b/src/views/traffic/components/box-2.vue
index dbb73f6..0720568 100644
--- a/src/views/traffic/components/box-2.vue
+++ b/src/views/traffic/components/box-2.vue
@@ -29,7 +29,7 @@
             <!-- <div class="header-left__camera" @click="videoShow = true">道路监控</div> -->
             <!-- <div class="header-left__point" @click="videoShow = true">3号点位</div> -->
           </div>
-          <div class="header-status">{{ item.congestLevelText }} </div>
+          <div class="header-status" v-if="item.congestLevel>0">{{ item.congestLevelText }} </div>
         </div>
         <div class="statistics">
           <div class="statistics-item">