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

---
 src/components/HlsPlayer/index.vue          | 583 +++++++++---------
 src/components/VideoDialog/index.vue        | 512 ++++++++--------
 src/layout/components/CoreVideo/allList.vue |  86 ++-
 src/layout/components/CoreVideo/index.vue   |  20 +-
 src/layout/components/Header/index.vue      |   5 +-
 src/views/collect/components/video-box.vue  | 643 +++++++++++---------
 src/views/hotel/components/video-box.vue    | 624 ++++++++++---------
 7 files changed, 1342 insertions(+), 1131 deletions(-)

diff --git a/src/components/HlsPlayer/index.vue b/src/components/HlsPlayer/index.vue
index 8689e22..bd7bcee 100644
--- a/src/components/HlsPlayer/index.vue
+++ b/src/components/HlsPlayer/index.vue
@@ -1,167 +1,190 @@
 <template>
   <div v-show="isActive" class="myVideo-container">
     <video
-      class="myVideo"
-      ref="videoElement"
-      muted
-      playsinline
-      :controls="false"
-      disablePictureInPicture
+        class="myVideo"
+        id="video"
+        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 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%'
+import Hls from 'hls.js'
+import mpegtsjs from 'mpegts.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
       }
-    },
-    data() {
-      return {
-        hls: null,
-        video: null,
-        loading: false,
-        loadingText: '加载中...',
-        retryCount: 0,
-        maxRetries: 3,
-        isReady: false,
-        playAttempts: 0,
-        maxPlayAttempts: 3,
-        cleanupTimeout: null
+      if (this.height) {
+        style.height = typeof this.height === 'number' ? `${this.height}px` : this.height
       }
-    },
-    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) {
+      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()
+      }
+      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()
+
+        // 错误处理和重连机制
+        player.on('error', (err) => {
+          player.unload()
+          // 3 秒后尝试重新加载
+          setTimeout(() => {
+            player.load()
+            player.play()
+          }, 3000)
+        })
+      }else{
         this.hls = new Hls({
           // 内存优化配置
           maxBufferSize: 0, // 降低缓冲区大小（15MB）
@@ -199,154 +222,156 @@
           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(); // 尝试重新加载视频
-		    } 
+          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
-          }
-        }
-      },
+    },
+    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)
 
-      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
+      // 事件处理
+      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 {
-          this.playAttempts++
-          if (this.video.readyState >= 2) {
-            await this.video.play()
-            this.playAttempts = 0
-          } else {
-            setTimeout(this.safePlay, 500)
+          const currentTime = this.video.currentTime
+          this.hls.mediaBuffer = null
+          if (this.hls.bufferTimer) {
+            clearInterval(this.hls.bufferTimer)
           }
-        } catch (error) {
-          console.warn('播放失败:', error)
-          setTimeout(this.safePlay, 1000)
+          this.hls.flushBuffer()
+          this.video.currentTime = currentTime
+        } catch (e) {
+          console.warn('Buffer cleanup error:', e)
         }
       }
     },
-    beforeDestroy() {
-      // 移除所有事件监听
-      if (this.video) {
-        const events = ['canplay', 'waiting', 'playing', 'error', 'stalled', 'suspend']
-        events.forEach((event) => {
-          this.video.removeEventListener(event, this.handleVideoEvent)
-        })
+
+    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)
       }
-      this.fullCleanup()
     }
+  },
+  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-container {
+  position: relative;
+  height: 100%;
+}
 
-  .myVideo {
-    width: 100%;
-    height: 100%;
-    // aspect-ratio: 16/9;
-    /* border: 1px solid #ccc; */
-    // border-radius: vw(5);
-  }
+.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-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);
-  }
+.loading-text {
+  color: white;
+  padding: vw(10);
+  border-radius: vw(4);
+  background: rgba(0, 0, 0, 0.6);
+}
 </style>
diff --git a/src/components/VideoDialog/index.vue b/src/components/VideoDialog/index.vue
index cf5b7f2..86d2afb 100644
--- a/src/components/VideoDialog/index.vue
+++ b/src/components/VideoDialog/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="dialog">
     <el-dialog
-      v-model="modelValue"
-      align-center
-      :modal="false"
-      :show-close="false"
-      :z-index="9999"
-      destroy-on-close
+        v-model="modelValue"
+        align-center
+        :modal="false"
+        :show-close="false"
+        :z-index="9999"
+        destroy-on-close
     >
       <div class="dialog-box">
         <div class="video">
@@ -16,20 +16,20 @@
           <source type="application/x-mpegURL" />
         </video> -->
         <div class="action-box">
-			<div class="action-item">
-				  <div
-					v-if="colletCond == 1"
-					class="video-follow"
-					@click.stop="handleCollect()"
-					>取消关注
-				  </div>
-				  <div
-					v-if="colletCond == 0"
-					class="video-unfollow"
-					@click.stop="handleCollect()"
-					>关注
-				  </div>
-			</div>
+          <div class="action-item">
+            <div
+                v-if="colletCond == 1"
+                class="video-follow"
+                @click.stop="handleCollect()"
+            >取消关注
+            </div>
+            <div
+                v-if="colletCond == 0"
+                class="video-unfollow"
+                @click.stop="handleCollect()"
+            >关注
+            </div>
+          </div>
           <div class="action-item">
             <img src="@/assets/images/plus.png" title="焦距变大" @click="handleAction(Z00M_IN)" />
             <span>聚焦</span>
@@ -39,20 +39,20 @@
             <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)" />
 
           </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>
-		 
+          <div class="action-item">
+            <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" />
@@ -61,246 +61,254 @@
 </template>
 
 <script setup>
-  import Hls from 'hls.js'
-  import { ElMessage } from 'element-plus'
-  import { postVideoControlApi,postVideoCollectApi } from '@/api/monitor'
-  import { getColletDiyApi } from '@/api/home'
-  import pubSub from 'pubsub-js'
-  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'
-  let command = ref('')
+import Hls from 'hls.js'
+import { ElMessage } from 'element-plus'
+import { postVideoControlApi,postVideoCollectApi } from '@/api/monitor'
+import { getColletDiyApi } from '@/api/home'
+import pubSub from 'pubsub-js'
+// 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' // 停止操作
+const Z00M_IN = 'zoomin' // 焦距变大
+const Z00M_OUT = 'zoomout' // 焦距变小
+const UP = 'up' // 上转
+const DOWN = 'down' // 下转
+const LEFT = 'left' // 左转
+const RIGHT = 'right' // 右转
+const STOP = 'stop' // 停止操作
+let ACTION = '0'
+let command = ref('')
 
-  const props = defineProps({
-    src: {
-      type: String,
-      default: ''
-    },
-    cameraIndexCode: {
-      type: String,
-      default: ''
-    },
-	isCollect:{
-		type: Number,
-		default: 0
-	},
-	isDiy:{
-		type: Number,
-		default: 0
-	}
-  })
-  let modelValue = defineModel()
-  let videoRef = ref()
-  let webRtcServer = null
-  let hlsRef = null
-  let colletCond = ref(props.isCollect)
-  let isDayCurr = ref(props.isDiy)
-  watch(
+const props = defineProps({
+  src: {
+    type: String,
+    default: ''
+  },
+  cameraIndexCode: {
+    type: String,
+    default: ''
+  },
+  isCollect:{
+    type: Number,
+    default: 0
+  },
+  isDiy:{
+    type: Number,
+    default: 0
+  }
+})
+let modelValue = defineModel()
+let videoRef = ref()
+let webRtcServer = null
+let hlsRef = null
+let colletCond = ref(props.isCollect)
+let isDayCurr = ref(props.isDiy)
+watch(
     () =>modelValue.value,
     (val) => {
-		// colletCond.value = props.isCollect
-		// isDayCurr.value = props.isDiy
-		console.log(props.isDiy,'val[0].value')
-      
+      colletCond.value = props.isCollect
+      isDayCurr.value = props.isDiy
+      console.log(props.isDiy,'val[0].value')
+
     },
     {
       immediate: true
     }
-  )
-	const emit = defineEmits(['isDiyChange']);
-  // 收藏
-  const handleCollectAdd = async (id, status, index) => {
-    await getColletDiyApi({
-      cameraIndexCode:props.cameraIndexCode,
-      isDiy: props.isDiy == 0 ? 1 : 0
-    })
-	
-  	if(props.isDiy==1){
-  		isDayCurr.value=0
-		// modelValue.value = false
-  	}else{
-  		isDayCurr.value=1
-  	}
-	emit('isDiyChange', isDayCurr.value);
-	pubSub.publish('videoIsDiy',{isDiy:props.isDiy,cameraIndexCode:props.cameraIndexCode} )
-	
+)
+const emit = defineEmits(['isDiyChange']);
+// 收藏
+const handleCollectAdd = async () => {
+  await getColletDiyApi({
+    cameraIndexCode:props.cameraIndexCode,
+    isDiy: props.isDiy == 0 ? 1 : 0
+  })
+
+  if(props.isDiy==1){
+    isDayCurr.value=0
+    // modelValue.value = false
+  }else{
+    isDayCurr.value=1
   }
-  // 关注
-  const handleCollect = async (id, status, index) => {
-    await postVideoCollectApi({
-      cameraIndexCode:props.cameraIndexCode,
-      isCollect: colletCond.value == 0 ? 1 : 0
-    })
-	
-    if (colletCond.value == 0) {
-      colletCond.value = 1
-    } else {
-      colletCond.value = 0
-	  modelValue.value = false
-    }
-    pubSub.publish('videoCollect', props.cameraIndexCode)
-	
-  }
-  const handleAction = async (e) => {
-    if (e == STOP) {
-      ACTION = '1'
-    } else {
-      ACTION = '0'
-      command.value = e
-    }
-    await postVideoControlApi({
-      command: command.value,
-      action: ACTION,
-      cameraIndexCode: props.cameraIndexCode
-    })
-    if (e == STOP) {
-      command.value = ''
-    }
-    ElMessage({
-      message: '操作成功',
-      type: 'success'
-    })
-  }
-  const handleClose = () => {
-    if (hlsRef) {
-      hlsRef.destroy()
-      hlsRef = null
-    }
+  emit('isDiyChange', isDayCurr.value);
+  pubSub.publish('videoIsDiy',{isDiy:props.isDiy,cameraIndexCode:props.cameraIndexCode} )
+
+}
+// 关注
+const handleCollect = async (id, status, index) => {
+  await postVideoCollectApi({
+    cameraIndexCode:props.cameraIndexCode,
+    isCollect: colletCond.value == 0 ? 1 : 0
+  })
+
+  if (colletCond.value == 0) {
+    colletCond.value = 1
+  } else {
+    colletCond.value = 0
     modelValue.value = false
   }
-  const init = () => {
-    hlsRef = new Hls({
-      enableWorker: false, // 禁用 Worker 来避免额外的线程
-      enableSoftwareAES: true, // 使用软件解码器以避免硬件解码的额外请求
-      cache: true, // 启用缓存
-      maxBufferLength: 10, // 最大缓冲长度（秒）
-      maxMaxBufferLength: 15, // 缓冲区长度的上限
-      maxBufferSize: 20 * 1000 * 1000 // 最大缓冲大小（字节）
-    })
-    hlsRef.loadSource(props.src)
-    hlsRef.attachMedia(videoRef.value)
-    hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
-      videoRef.value.play()
-    })
-    hlsRef.on(Hls.Events.ERROR, (event, data) => {
-      if (data.fatal) {
-        switch (data.type) {
-          case Hls.ErrorTypes.NETWORK_ERROR:
-            hlsRef.startLoad()
-            break
-          case Hls.ErrorTypes.MEDIA_ERROR:
-            hlsRef.recoverMediaError()
-            break
-          default:
-            hlsRef.destroy()
-            break
-        }
-      }
-    })
+  pubSub.publish('videoCollect', props.cameraIndexCode)
+
+}
+const handleAction = async (e) => {
+  if (e == STOP) {
+    ACTION = '1'
+    command.value = e
+  } else {
+    ACTION = '0'
+    command.value = e
   }
-
-  onMounted(()=>{
-
+  await postVideoControlApi({
+    command: command.value,
+    action: ACTION,
+    cameraIndexCode: props.cameraIndexCode
   })
+  if (e == STOP) {
+    command.value = ''
+  }
+  ElMessage({
+    message: '操作成功',
+    type: 'success'
+  })
+}
+const handleClose = () => {
+  if (hlsRef) {
+    hlsRef.destroy()
+    hlsRef = null
+  }
+  modelValue.value = false
+}
+const init = () => {
+  hlsRef = new Hls({
+    enableWorker: false, // 禁用 Worker 来避免额外的线程
+    enableSoftwareAES: true, // 使用软件解码器以避免硬件解码的额外请求
+    cache: true, // 启用缓存
+    maxBufferLength: 10, // 最大缓冲长度（秒）
+    maxMaxBufferLength: 15, // 缓冲区长度的上限
+    maxBufferSize: 20 * 1000 * 1000 // 最大缓冲大小（字节）
+  })
+  hlsRef.loadSource(props.src)
+  hlsRef.attachMedia(videoRef.value)
+  hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
+    videoRef.value.play()
+  })
+  hlsRef.on(Hls.Events.ERROR, (event, data) => {
+    if (data.fatal) {
+      switch (data.type) {
+        case Hls.ErrorTypes.NETWORK_ERROR:
+          hlsRef.startLoad()
+          break
+        case Hls.ErrorTypes.MEDIA_ERROR:
+          hlsRef.recoverMediaError()
+          break
+        default:
+          hlsRef.destroy()
+          break
+      }
+    }
+  })
+}
+
+onMounted(()=>{
+
+})
 </script>
 
 <style scoped lang="scss">
-	.video-follow,.video-unfollow {
-	  // cursor: pointer;
-	  // display: none;
-	  // position: absolute;
-	  // right: vw(8);
-	  // top: vw(8);
-	  // z-index: 9999;
-	  // margin-left:vw(20);
-	  padding: vw(10);
-	  // height: vh(24);
-	  text-align: center;
-	  // line-height: vh(24);
-	  font-weight: 400;
-	  font-size: font-vw(18);
-	  color: #ffffff;
-	  // background-image: url('@/assets/images/unfollow.png');
-	  background-size: 100% 100%;
-	}
-	.video-item__follow {
-	  // background-image: url('@/assets/images/unfollow.png');
-	}
-  .dialog {
-    z-index: 9999;
-    .action {
-      &-box {
-        margin-top: vh(16);
-        gap: vw(20);
-        display: flex;
-        align-items: center;
-        justify-content: center;
+.video-follow,.video-unfollow {
+  // cursor: pointer;
+  // display: none;
+  // position: absolute;
+  // right: vw(8);
+  // top: vw(8);
+  // z-index: 9999;
+  // margin-left:vw(20);
+  padding: vw(10);
+  // 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%;
+}
+.video-item__follow {
+  // background-image: url('@/assets/images/unfollow.png');
+}
+.dialog {
+  z-index: 9999;
+  .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;
       }
-      &-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: font-vw(16);
-          color: #ffffff;
-        }
-        .pause {
-          margin: 0 vw(10);
-        }
+      > span {
+        margin: 0 vw(16);
+        font-weight: 400;
+        font-size: vw(16);
+        color: #ffffff;
+      }
+      .pause {
+        margin: 0 vw(10);
       }
-    }
-    .none {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      width: vw(1814);
-      height: vw(980);
-      color: #fff;
-      font-weight: bold;
-      font-size: font-vw(30);
-      transform: translate(-50%, -50%);
-      z-index: 999;
-    }
-    :deep(.el-dialog) {
-      position: relative;
-      width: vw(1940);
-      background: transparent !important;
-    }
-    .dialog-box {
-      padding: vw(40) vw(30) vw(30) vw(30);
-      background-image: url('@/assets/images/video-bg.png');
-      background-size: 100% 100%;
-    }
-    :deep(.el-dialog__header) {
-      padding-bottom: 0 !important;
-    }
-    .video {
-      width: vw(1814);
-      height: vw(920);
-      object-fit: contain;
-      background-color: #062b57;
-    }
-    .close {
-      cursor: pointer;
-      position: absolute;
-      right: vw(70);
-      top: vw(80);
-      width: vw(60);
-      z-index: 9999;
     }
   }
+  .none {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: vw(1814);
+    height: vw(980);
+    color: #fff;
+    font-weight: bold;
+    font-size: vw(30);
+    transform: translate(-50%, -50%);
+    z-index: 999;
+  }
+  :deep(.el-dialog) {
+    position: relative;
+    width: vw(1940);
+    background: transparent !important;
+  }
+  .dialog-box {
+    padding: vw(40) vw(30) vw(30) vw(30);
+    background-image: url('@/assets/images/video-bg.png');
+    background-size: 100% 100%;
+  }
+  :deep(.el-dialog__header) {
+    padding-bottom: 0 !important;
+  }
+  .video {
+    width: vw(1814);
+    height: vw(920);
+    object-fit: contain;
+    background-color: #062b57;
+  }
+  .close {
+    cursor: pointer;
+    position: absolute;
+    right: vw(70);
+    top: vw(80);
+    width: vw(60);
+    z-index: 9999;
+  }
+}
 </style>
diff --git a/src/layout/components/CoreVideo/allList.vue b/src/layout/components/CoreVideo/allList.vue
index 789f84c..28a43cf 100644
--- a/src/layout/components/CoreVideo/allList.vue
+++ b/src/layout/components/CoreVideo/allList.vue
@@ -12,7 +12,7 @@
           @click="handleItem(item)"
         >
           <div class="item-unfollow" @click.stop="handleCollect(item.cameraIndexCode, index)">取消关注</div>
-          <video class="item-video" :id="'video' + index" muted autoplay :controls="false">
+          <video class="item-video" :id="'videoall' + index" muted autoplay :controls="false">
             <source type="application/x-mpegURL" />
           </video>
           <p>
@@ -36,13 +36,14 @@
 </template>
 
 <script setup>
-  import { getVideoListApi,getColletListApi } from '@/api/home'
+  import { getPreviewUrlApi,getColletListApi } from '@/api/home'
   import { postVideoCollectApi } from '@/api/monitor'
 
   import primary from '@/assets/images/item-primary.png'
 
   import Hls from 'hls.js'
   import pubSub from 'pubsub-js'
+  import mpegtsjs from "mpegts.js";
 
   let modelValue = defineModel()
   let isCollect = ref(0)
@@ -110,27 +111,78 @@
     list.value = []
     getVideoList()
   }
+  const createPlayer = (cameraIndexCode,videoElement) => {
+    getPreviewUrlApi({
+      type: 'hls',
+      cameraIndexCode: cameraIndexCode
+    }).then(res=>{
+      const url = res.data.url;
+      if(url.startsWith('ws')){
+        const player = mpegtsjs.createPlayer({
+          url: url,
+          type: 'flv',
+          isLive: true,
+          hasAudio: false
+        })
+        player.attachMediaElement(videoElement)
+        player.load()
+        player.play()
+        // 错误处理和重连机制
+        player.on(mpegtsjs.Events.ERROR, (err) => {
+          player.unload();
+          player.destroy();
+          console.error('播放器错误:', err)
+          // 3 秒后尝试重新加载
+          setTimeout(() => {
+            console.error('重新加载【'+cameraIndexCode+'】' )
+            createPlayer(cameraIndexCode,videoElement);
+          }, 3000)
+        })
+
+        hlsRefs.push(player)
+      }
+      else{
+        const player = new Hls({
+          maxBufferLength: 10, // 最大缓冲长度（秒）
+          maxMaxBufferLength: 15, // 缓冲区长度的上限
+          maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+        })
+        player.loadSource(url)
+        player.attachMedia(videoElement)
+        player.on(Hls.Events.MANIFEST_PARSED, () => {
+          videoElement.play()
+        })
+        player.on(Hls.Events.ERROR, (event, data) => {
+          // 根据错误类型进行处理
+          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 getVideoList = async () => {
     let res = await getColletListApi(params)
     list.value = res.data
     total.value = res.total
     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)
+        var video = document.getElementById(`videoall${index}`)
+        createPlayer(item.cameraIndexCode,video);
       })
     })
   }
diff --git a/src/layout/components/CoreVideo/index.vue b/src/layout/components/CoreVideo/index.vue
index 3870ddc..00cd061 100644
--- a/src/layout/components/CoreVideo/index.vue
+++ b/src/layout/components/CoreVideo/index.vue
@@ -16,7 +16,7 @@
           <p class="item-title--primary">
             {{ item.cameraName || item.cameraIndexCode }}
           </p>
-         
+
           <video
             class="item-img"
             :id="'video' + index"
@@ -82,12 +82,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) => {
@@ -166,9 +166,9 @@ let isCollect = ref(0)
 	pubSub.subscribe('videoIsDiy', (msg, data) => {
 		console.log(data,'收藏 ++++++++++++++')
 		getVideoList()
-	
-	
-		
+
+
+
 	})
   })
 
diff --git a/src/layout/components/Header/index.vue b/src/layout/components/Header/index.vue
index 5b9d33e..0837526 100644
--- a/src/layout/components/Header/index.vue
+++ b/src/layout/components/Header/index.vue
@@ -96,12 +96,12 @@
     </div>
   </div>
  <!-- <div class="amplify" @click="handleAmplify">
-	  <img class="icon-qp" src="@/assets/images/qping.png" alt="" /> 
+	  <img class="icon-qp" src="@/assets/images/qping.png" alt="" />
   </div> -->
   <all-list v-model="allShow" />
 </template>
 <script>
-	
+
 </script>
 <script setup>
   import { useRouter } from 'vue-router'
@@ -471,6 +471,7 @@
     }
 	.btn-all{
 		position: absolute;
+    cursor: pointer;
 		left: vw(140);
 		top: vh(30);
 		min-width: vw(180);
diff --git a/src/views/collect/components/video-box.vue b/src/views/collect/components/video-box.vue
index 06f1ad9..5340ea7 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"
@@ -42,15 +42,15 @@
 									:controls="false"
 								/>
 								<p class="video-item__title--primary">
-									{{ element.cameraName || element.scenicAreaId }}
+									{{ element.cameraName || element.cameraIndexCode }}
 								</p>
 							</div>
-						</div>	
+						</div>
 					</template>
-				
+
 				</draggable>
 			</div>
-			
+
 	    </div>
 	   <!-- <div class="pagination">
 	      <el-pagination
@@ -80,287 +80,346 @@
 </template>
 
 <script setup>
-	import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
-	import {
-	  getVideoTypeApi,
-	  getVideoRegionsApi,
-	  postVideoRemainApi,
-	  postVideoControlApi,
-	  postVideoCollectApi
-	} from '@/api/monitor'
-	import draggable from 'vuedraggable';
-	import pubSub from 'pubsub-js'
-	import Hls from 'hls.js'
-	import emptyIco from '@/assets/images/n-icon.png'
-	import { debounce } from 'lodash'
-	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 cond = ref(false)
-	let ACTION = '0'
-	let hlsRefs = []
-	let hlsRef = null
-	let timer = null
-	let videoLog = ref(1)
-	let videoList = ref([])
-	let cameraIndexCode = ref('')
-	let videoRef = ref()
-	let monitorChange = null
-	let total = ref(0)
-	let loading = ref(false)
-	let command = ref('')
-	let cameraName = ref('')
-	let regionList = ref()
-	let params = reactive({
-	    businessScenicArea: "",
-	    cameraName: "",
-		pageNum: 1,
-		pageSize: 6,
-	})
-	let grad = ref(3)
-	let show = ref(false)
-	const onMonitorChange = () => {
-	  monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
-	    params.businessScenicArea = data.name
-	    params.pageNum = 1
-	    videoList.value = []
-	    total.value = 0
-		cond.value = false
-	    getRegionsList()
-	  })
-	}
-	//弹窗收藏监听
-	const isDiyChange = (val)=>{
-		console.log(val,11222)
-		isDiy.value = val
-		if(!val){
-			show.value = false
-			videoList.value[diyIndex.value].videos = videoList.value[diyIndex.value].videos.filter(item => item.cameraIndexCode !== cameraIndexCode.value); 
-		}
-		// videoList.value[diyIndex.value].videos.forEach(async (it, i) => {
-			
-		// 	if(it.cameraIndexCode == cameraIndexCode.value){
-		// 		it.isDiy = val
-		// 	}
-		// })
-	}
-	const onStart = (res)=>{
-		
-	}
-	const onEnd = (evt)=>{
-		 const itemIndex = parseInt(evt.to.getAttribute('data-item-index')); // 当前拖拽的 item 的下标
-		getVideCollectCateSort({
-			key:videoList.value[itemIndex].key,
-			cameraIndexCodes:videoList.value[itemIndex].videos.map((item) => item.cameraIndexCode)
-		}).then((ress)=>{
-			
-			// getVideCollectCateList()
-		})
-		// postVideoRemain()
-		initVideo()
-	}
-	// 获取关注列表
-	const  getVideCollectCateList = async () => {
-		clearHlsRefs()
-		params.businessVideoDisplayPosition = ''
-	  let res = await getVideCollectCate(params)
-	  videoList.value = res.data
-	  console.log(res,videoList.value.length,'ressssssssssssss')
-	  if(videoList.value.length<=3){
-		  grad.value = 3
-	  }else if(videoList.value.length<=6){
-		  grad.value = 2
-	  }else{
-		  grad.value = 1
-	  }
-	  postVideoRemain()
-	  // total.value = res.total
-	  
-	  initVideo()
-	}
-	// 收藏
-	const handleCollect = async (id, status, index,element) => {
-	  await getColletDiyApi({
-	    cameraIndexCode:id,
-	    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);  
-		console.log('取消收藏',)
-	    element.isDiy = 0
-		show.value = false
-	  }
-	  // pubSub.publish('videoCollect', id)
-	}
-	// 采集
-	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'
-	  })
-	}
-	// 返回列表
-	const handleBack = () => {
-	  videoLog.value = 1
-	  hlsRef.destroy()
-	  initVideo()
-	}
-	let isCollect = ref(0)
-	let isDiy = ref(0)
-	let videoSrc = ref('')
-	let diyIndex = ref(null)
-	const handleCamera = async (itemCode,resource,index) => {
-		diyIndex.value = index
-	  show.value = true
-	  let res = await getPreviewUrlApi({
-	    type: 'hls',
-	    cameraIndexCode:itemCode
-	  })
-	  cameraIndexCode.value = itemCode;
-	  isCollect.value = resource.isCollect
-	  isDiy.value = resource.isDiy
-	  videoSrc.value = res.data.url
-	}
-	//清除 hls
-	const clearHlsRefs = () => {
-	  if (hlsRefs.length > 0) {
-	    hlsRefs.map((item) => {
-	      item.destroy()
-	    })
-	    hlsRefs = []
-	  }
-	}
-	// 分页
-	const currentChange = (e) => {
-	  clearHlsRefs()
-	  videoList.value = []
-	  getRegionsList()
-	}
+import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
+import {
+  getVideoTypeApi,
+  getVideoRegionsApi,
+  postVideoRemainApi,
+  postVideoControlApi,
+  postVideoCollectApi
+} from '@/api/monitor'
+import draggable from 'vuedraggable';
+import pubSub from 'pubsub-js'
+import Hls from 'hls.js'
+import emptyIco from '@/assets/images/n-icon.png'
+import { debounce } from 'lodash'
+import mpegtsjs from "mpegts.js";
+// 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' // 停止操作
+const Z00M_IN = 'zoomin' // 焦距变大
+const Z00M_OUT = 'zoomout' // 焦距变小
+const UP = 'up' // 上转
+const DOWN = 'down' // 下转
+const LEFT = 'left' // 左转
+const RIGHT = 'right' // 右转
+const STOP = 'stop' // 停止操作
+let cond = ref(false)
+let ACTION = '0'
+let hlsRefs = []
+let hlsRef = null
+let timer = null
+let videoLog = ref(1)
+let videoList = ref([])
+let cameraIndexCode = ref('')
+let videoRef = ref()
+let monitorChange = null
+let total = ref(0)
+let loading = ref(false)
+let command = ref('')
+let cameraName = ref('')
+let regionList = ref()
+let params = reactive({
+  businessScenicArea: "",
+  cameraName: "",
+  pageNum: 1,
+  pageSize: 6,
+})
+let grad = ref(3)
+let show = ref(false)
+const onMonitorChange = () => {
+  monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
+    params.businessScenicArea = data.name
+    params.pageNum = 1
+    videoList.value = []
+    total.value = 0
+    cond.value = false
+    getRegionsList()
+  })
+}
+//弹窗收藏监听
+const isDiyChange = (val)=>{
+  console.log(val,11222)
+  isDiy.value = val
+  if(!val){
+    show.value = false
+    videoList.value[diyIndex.value].videos = videoList.value[diyIndex.value].videos.filter(item => item.cameraIndexCode !== cameraIndexCode.value);
+  }
+  // videoList.value[diyIndex.value].videos.forEach(async (it, i) => {
 
-	let thisVideo = ref(null)
-	const handleItemVideo = (url, type, code,item) => {
-	  thisVideo.value = item
-	  videoLog.value = 2
-	  cameraIndexCode.value = code
-	  setTimeout(() => {
-	    hlsRef = new Hls({
-	      maxBufferLength: 10, // 最大缓冲长度（秒）
-	      maxMaxBufferLength: 15, // 缓冲区长度的上限
-	      maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
-	    })
-	    hlsRef.loadSource(url)
-	    hlsRef.attachMedia(videoRef.value)
-	    hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
-	      videoRef.value.play()
-	    })
-	    if (type == 100) initVideo()
-	  }, 1000)
-	}
-	const initVideo = () => {
-	  clearHlsRefs()
-	  nextTick(() => {
-	    videoList.value.forEach(async (it, i) => {
-			
-			it.videos.forEach((item,index)=>{
-				 setTimeout(() => { 
-					const video = document.getElementById(`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) 
-					} 
-				 }, 1000)
-				
-			})
-	     
-	    })
-	  })
-	}
-	watch(
-	  () => videoList.value,
-	  (val) => {
-	    if (val.length) {
-	      postVideoRemain()
-	    }
-	  },
-	  { immediate: true }
-	)
-	// 更新视频
-	const postVideoRemain = async () => {
-	  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({
-	    cameraName: cameraName.value,
-	    businessScenicArea: params.businessScenicArea
-	  })
-	  console.log(res,11111111111111)
-	  regionList.value = res.data
-	  regionList.value.forEach((item,index)=>{
-	  	// item.show = true
-	  	item.videoResources=item.resourcesList[0].videoResources
-	  })
-	  regionList.value[0].show = true
-	  
-	}
-	const handleRegions = (e) => {
-	  regionList.value[e].show = !regionList.value[e].show
-	}
-	const onInput = debounce((e) => {
-	  getVideoRegions()
-	}, 500)
-	let hotelChange = null;
-	onMounted(()=>{
-		getVideCollectCateList()
-		console.log(draggable,'draggable')
-	})
-	onUnmounted(() => {
-		if (timer) clearInterval(timer)
-	  clearHlsRefs()
-	
-	})
+  // 	if(it.cameraIndexCode == cameraIndexCode.value){
+  // 		it.isDiy = val
+  // 	}
+  // })
+}
+const onStart = (res)=>{
+
+}
+const onEnd = (evt)=>{
+  const itemIndex = parseInt(evt.to.getAttribute('data-item-index')); // 当前拖拽的 item 的下标
+  getVideCollectCateSort({
+    key:videoList.value[itemIndex].key,
+    cameraIndexCodes:videoList.value[itemIndex].videos.map((item) => item.cameraIndexCode)
+  }).then((ress)=>{
+
+    // getVideCollectCateList()
+  })
+  // postVideoRemain()
+  initVideo()
+}
+// 获取关注列表
+const  getVideCollectCateList = async () => {
+  clearHlsRefs()
+  params.businessVideoDisplayPosition = ''
+  let res = await getVideCollectCate(params)
+  videoList.value = res.data
+  if(videoList.value.length<=3){
+    grad.value = 3
+  }else if(videoList.value.length<=6){
+    grad.value = 2
+  }else{
+    grad.value = 1
+  }
+  postVideoRemain()
+  // total.value = res.total
+
+  initVideo()
+}
+// 收藏
+const handleCollect = async (id, status, index,element) => {
+  await getColletDiyApi({
+    cameraIndexCode:id,
+    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);
+    console.log('取消收藏',)
+    element.isDiy = 0
+    show.value = false
+  }
+  // pubSub.publish('videoCollect', id)
+}
+// 采集
+const handleAction = async (e) => {
+  if (e == STOP) {
+    ACTION = '1'
+    command.value = e
+  } 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'
+  })
+}
+// 返回列表
+const handleBack = () => {
+  videoLog.value = 1
+  hlsRef.destroy()
+  initVideo()
+}
+let isCollect = ref(0)
+let isDiy = ref(0)
+let videoSrc = ref('')
+let diyIndex = ref(null)
+const handleCamera = async (itemCode,resource,index) => {
+  diyIndex.value = index
+  show.value = true
+  let res = await getPreviewUrlApi({
+    type: 'hls',
+    cameraIndexCode:itemCode
+  })
+  cameraIndexCode.value = itemCode;
+  isCollect.value = resource.isCollect
+  isDiy.value = resource.isDiy
+  videoSrc.value = res.data.url
+}
+//清除 hls
+const clearHlsRefs = () => {
+  if (hlsRefs.length > 0) {
+    hlsRefs.map((item) => {
+      item.destroy()
+    })
+    hlsRefs = []
+  }
+}
+// 分页
+const currentChange = (e) => {
+  clearHlsRefs()
+  videoList.value = []
+  getRegionsList()
+}
+
+let thisVideo = ref(null)
+const handleItemVideo = (url, type, code,item) => {
+  thisVideo.value = item
+  videoLog.value = 2
+  cameraIndexCode.value = code
+  setTimeout(() => {
+    hlsRef = new Hls({
+      maxBufferLength: 10, // 最大缓冲长度（秒）
+      maxMaxBufferLength: 15, // 缓冲区长度的上限
+      maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+    })
+    hlsRef.loadSource(url)
+    hlsRef.attachMedia(videoRef.value)
+    hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
+      videoRef.value.play()
+    })
+    if (type == 100) initVideo()
+  }, 1000)
+}
+const createPlayer = (cameraIndexCode,videoElement) => {
+  getPreviewUrlApi({
+    type: 'hls',
+    cameraIndexCode: cameraIndexCode
+  }).then(res=>{
+    const url = res.data.url;
+    if(url.startsWith('ws')){
+      const player = mpegtsjs.createPlayer({
+        url: url,
+        type: 'flv',
+        isLive: true,
+        hasAudio: false
+      })
+      player.attachMediaElement(videoElement)
+      player.load()
+      player.play()
+      // 错误处理和重连机制
+      player.on(mpegtsjs.Events.ERROR, (err) => {
+        player.unload();
+        player.destroy();
+        console.error('播放器错误:', err)
+        // 3 秒后尝试重新加载
+        setTimeout(() => {
+          console.error('重新加载【'+cameraIndexCode+'】' )
+          createPlayer(cameraIndexCode,videoElement);
+        }, 3000)
+      })
+
+      hlsRefs.push(player)
+    }
+    else{
+      const player = new Hls({
+        maxBufferLength: 10, // 最大缓冲长度（秒）
+        maxMaxBufferLength: 15, // 缓冲区长度的上限
+        maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+      })
+      player.loadSource(url)
+      player.attachMedia(videoElement)
+      player.on(Hls.Events.MANIFEST_PARSED, () => {
+        videoElement.play()
+      })
+      player.on(Hls.Events.ERROR, (event, data) => {
+        // 根据错误类型进行处理
+        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 initVideo = () => {
+  clearHlsRefs()
+  nextTick(() => {
+    videoList.value.forEach(async (it, i) => {
+
+      it.videos.forEach((item,index)=>{
+        setTimeout(() => {
+          const video = document.getElementById(`collectmonitorVideo${item.cameraIndexCode}`)
+          createPlayer(item.cameraIndexCode,video);
+        }, 1000)
+
+      })
+
+    })
+  })
+}
+watch(
+    () => videoList.value,
+    (val) => {
+      if (val.length) {
+        postVideoRemain()
+      }
+    },
+    { immediate: true }
+)
+// 更新视频
+const postVideoRemain = async () => {
+  // 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({
+    cameraName: cameraName.value,
+    businessScenicArea: params.businessScenicArea
+  })
+  regionList.value = res.data
+  regionList.value.forEach((item,index)=>{
+    // item.show = true
+    item.videoResources=item.resourcesList[0].videoResources
+  })
+  regionList.value[0].show = true
+
+}
+const handleRegions = (e) => {
+  regionList.value[e].show = !regionList.value[e].show
+}
+const onInput = debounce((e) => {
+  getVideoRegions()
+}, 500)
+let hotelChange = null;
+onMounted(()=>{
+  getVideCollectCateList()
+  console.log(draggable,'draggable')
+})
+onUnmounted(() => {
+  if (timer) clearInterval(timer)
+  clearHlsRefs()
+
+})
 </script>
 <style></style>
 <style scoped lang="scss">
@@ -393,7 +452,7 @@
 			}
 			overflow: auto;
 		}
-	
+
 		.type-title{
 			position:absolute;
 			left:vw(-5);
diff --git a/src/views/hotel/components/video-box.vue b/src/views/hotel/components/video-box.vue
index 126f25e..eed24f6 100644
--- a/src/views/hotel/components/video-box.vue
+++ b/src/views/hotel/components/video-box.vue
@@ -26,7 +26,7 @@
 	        <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="handleRegions(i)">
@@ -78,7 +78,7 @@
 	          </div>
 	          <video
 	            class="video-item__video"
-	            :id="'monitorVideo' + index"
+	            :id="'hotelmonitorVideo' + index"
 	            preload="auto"
 	            muted
 	            autoplay
@@ -91,7 +91,7 @@
 	          </p>
 	        </div>
 	      </div>
-		 
+
 	    </div>
 	    <div class="pagination">
 	      <el-pagination
@@ -154,7 +154,7 @@
 	            </p>
 	            <video
 	              class="item-img"
-	              :id="'monitorVideo' + index"
+	              :id="'hotelmonitorVideo' + index"
 	              muted
 	              autoplay
 	              :controls="false"
@@ -184,281 +184,347 @@
 </template>
 
 <script setup>
-	import { getRegionsListApi,getPreviewUrlApi } from '@/api/home'
-	import {
-	  getVideoTypeApi,
-	  getVideoRegionsApi,
-	  postVideoRemainApi,
-	  postVideoControlApi,
-	  postVideoCollectApi
-	} from '@/api/monitor'
-	import pubSub from 'pubsub-js'
-	import Hls from 'hls.js'
-	import emptyIco from '@/assets/images/n-icon.png'
-	import { debounce } from 'lodash'
-	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 cond = ref(false)
-	let ACTION = '0'
-	let hlsRefs = []
-	let hlsRef = null
-	let timer = null
-	let videoLog = ref(1)
-	let videoList = ref([])
-	let cameraIndexCode = ref('')
-	let videoRef = ref()
-	let monitorChange = null
-	let total = ref(0)
-	let loading = ref(false)
-	let command = ref('')
-	let cameraName = ref('')
-	let regionList = ref()
-	let params = reactive({
-	    businessScenicArea: "",
-	    cameraName: "",
-		pageNum: 1,
-		pageSize: 6,
-	})
-	let show = ref(false)
-	const onMonitorChange = () => {
-	  monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
-	    params.businessScenicArea = data.name
-	    params.pageNum = 1
-	    videoList.value = []
-	    total.value = 0
-		cond.value = false
-	    getRegionsList()
-	  })
-	}
-	// 关注
-	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)
-	}
-	// 采集
-	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'
-	  })
-	}
-	// 返回列表
-	const handleBack = () => {
-	  videoLog.value = 1
-	  hlsRef.destroy()
-	  initVideo()
-	}
-	let isCollect = ref(0)
-	let isDiy = ref(0)
-	let videoSrc = ref('')
-	const handleCamera = async (itemCode,resource) => {
-	  show.value = true
-	  let res = await getPreviewUrlApi({
-	    type: 'hls',
-	    cameraIndexCode:itemCode
-	  })
-	  cameraIndexCode.value = itemCode;
-	  isCollect.value = resource.isCollect
-	  isDiy.value = resource.isDiy
-	  videoSrc.value = res.data.url
-	}
-	//清除 hls
-	const clearHlsRefs = () => {
-	  if (hlsRefs.length > 0) {
-	    hlsRefs.map((item) => {
-	      item.destroy()
-	    })
-	    hlsRefs = []
-	  }
-	}
-	// 分页
-	const currentChange = (e) => {
-	  clearHlsRefs()
-	  videoList.value = []
-	  getRegionsList()
-	}
-	//获取酒店视频列表
-	const getRegionsList = async()=>{
-		clearHlsRefs()
-		videoLog.value = 1
-		try {
-		    if (loading.value) return
-			let res = await getRegionsListApi({...params})
-		    if (res.data.length > 0) {
-			   videoList.value = res.data
-			   cond.value = true
-			   total.value = res.total
-			   nextTick(() => {
-				   if(!videoList.value.length) return false
-			     videoList.value.forEach(async (x, index) => {
-			       const video = document.getElementById(`monitorVideo${index}`)
-			       const hls = new Hls({
-			         maxBufferLength: 10, // 最大缓冲长度（秒）
-			         maxMaxBufferLength: 15, // 缓冲区长度的上限
-			         maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
-			       })
-			       hls.loadSource(x.hlsUrl)
-			       hls.attachMedia(video)
-			       hls.on(Hls.Events.MANIFEST_PARSED, () => {
-			         video.play()
-			       })
-				   hls.on(Hls.Events.ERROR, (event, data) => {
-					 console.error('HLS 播放器遇到错误:', data);
-					   // 根据错误类型进行处理
-					   // initVideo()
-					  if (data.fatal) {
-						switch (data.type) {
-						  case Hls.ErrorTypes.NETWORK_ERROR:
-							console.log('网络错误，尝试重新加载');
-							hls.startLoad();
-							break;
-						  case Hls.ErrorTypes.MEDIA_ERROR:
-							console.log('媒体错误，尝试修复');
-							hls.recoverMediaError();
-							break;
-						  default:
-							console.log('无法恢复的错误，销毁播放器');
-							// hls.destroy();
-							break;
-						}
-					  }
-				   })
-			       hlsRefs.push(hls)
-			     })
-			   })
-		    } else {
-				videoList.value = []
-				cond.value = true
-			  if (timer) clearInterval(timer)
-			}
-			loading.value = false
-	    }catch (error) {
-			loading.value = false
-		}
+import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
+import {
+  getVideoTypeApi,
+  getVideoRegionsApi,
+  postVideoRemainApi,
+  postVideoControlApi,
+  postVideoCollectApi
+} from '@/api/monitor'
+import draggable from 'vuedraggable';
+import pubSub from 'pubsub-js'
+import Hls from 'hls.js'
+import emptyIco from '@/assets/images/n-icon.png'
+import { debounce } from 'lodash'
+import mpegtsjs from "mpegts.js";
+// 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' // 停止操作
+const Z00M_IN = 'zoomin' // 焦距变大
+const Z00M_OUT = 'zoomout' // 焦距变小
+const UP = 'up' // 上转
+const DOWN = 'down' // 下转
+const LEFT = 'left' // 左转
+const RIGHT = 'right' // 右转
+const STOP = 'stop' // 停止操作
+let cond = ref(false)
+let ACTION = '0'
+let hlsRefs = []
+let hlsRef = null
+let timer = null
+let videoLog = ref(1)
+let videoList = ref([])
+let cameraIndexCode = ref('')
+let videoRef = ref()
+let monitorChange = null
+let total = ref(0)
+let loading = ref(false)
+let command = ref('')
+let cameraName = ref('')
+let regionList = ref()
+let params = reactive({
+  businessScenicArea: "",
+  cameraName: "",
+  pageNum: 1,
+  pageSize: 6,
+})
+let grad = ref(3)
+let show = ref(false)
+const onMonitorChange = () => {
+  monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
+    params.businessScenicArea = data.name
+    params.pageNum = 1
+    videoList.value = []
+    total.value = 0
+    cond.value = false
+    getRegionsList()
+  })
+}
+//弹窗收藏监听
+const isDiyChange = (val)=>{
+  console.log(val,11222)
+  isDiy.value = val
+  if(!val){
+    show.value = false
+    videoList.value[diyIndex.value].videos = videoList.value[diyIndex.value].videos.filter(item => item.cameraIndexCode !== cameraIndexCode.value);
+  }
+  // videoList.value[diyIndex.value].videos.forEach(async (it, i) => {
 
-	}
-	let thisVideo = ref(null)
-	const handleItemVideo = (url, type, code,item) => {
-	  thisVideo.value = item
-	  videoLog.value = 2
-	  cameraIndexCode.value = code
-	  setTimeout(() => {
-	    hlsRef = new Hls({
-	      maxBufferLength: 10, // 最大缓冲长度（秒）
-	      maxMaxBufferLength: 15, // 缓冲区长度的上限
-	      maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
-	    })
-	    hlsRef.loadSource(url)
-	    hlsRef.attachMedia(videoRef.value)
-	    hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
-	      videoRef.value.play()
-	    })
-	    if (type == 100) initVideo()
-	  }, 1000)
-	}
-	const initVideo = () => {
-	  clearHlsRefs()
-	  nextTick(() => {
-	    videoList.value.forEach(async (item, index) => {
-	      const video = document.getElementById(`monitorVideo${index}`)
-	      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)
-	    })
-	  })
-	}
-	watch(
-	  () => videoList.value,
-	  (val) => {
-	    if (val.length) {
-	      postVideoRemain()
-	    }
-	  },
-	  { immediate: true }
-	)
-	// 更新视频
-	const postVideoRemain = async () => {
-	  timer = setInterval(() => {
-	    postVideoRemainApi({
-	      cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
-	    })
-	  }, 1500)
-	}
-	const getVideoRegions = async () => {
-	  let res = await getVideoRegionsApi({
-	    cameraName: cameraName.value,
-	    businessScenicArea: params.businessScenicArea
-	  })
-	  console.log(res,11111111111111)
-	  regionList.value = res.data
-	  regionList.value.forEach((item,index)=>{
-	  	// item.show = true
-	  	item.videoResources=item.resourcesList[0].videoResources
-	  })
-	  regionList.value[0].show = true
-	  
-	}
-	const handleRegions = (e) => {
-	  regionList.value[e].show = !regionList.value[e].show
-	}
-	const onInput = debounce((e) => {
-	  getVideoRegions()
-	}, 500)
-	let hotelChange = null;
-	onMounted(()=>{
-		hotelChange = pubSub.subscribe('hotelChange', (msg, data) => {
-			cameraName.value = ''
-			params.businessScenicArea = data.name
-			getVideoRegions()
-		  
-		})
-		onMonitorChange()
-		
-	})
-	onUnmounted(() => {
-	  clearHlsRefs()
-	  if (hotelChange) pubSub.unsubscribe(hotelChange)
-	  if (timer) clearInterval(timer)
-	  pubSub.unsubscribe(monitorChange)
-	})
+  // 	if(it.cameraIndexCode == cameraIndexCode.value){
+  // 		it.isDiy = val
+  // 	}
+  // })
+}
+const onStart = (res)=>{
+
+}
+const onEnd = (evt)=>{
+  const itemIndex = parseInt(evt.to.getAttribute('data-item-index')); // 当前拖拽的 item 的下标
+  getVideCollectCateSort({
+    key:videoList.value[itemIndex].key,
+    cameraIndexCodes:videoList.value[itemIndex].videos.map((item) => item.cameraIndexCode)
+  }).then((ress)=>{
+
+    // getVideCollectCateList()
+  })
+  // postVideoRemain()
+  initVideo()
+}
+// 获取关注列表
+const  getVideCollectCateList = async () => {
+  clearHlsRefs()
+  params.businessVideoDisplayPosition = ''
+  let res = await getVideCollectCate(params)
+  videoList.value = res.data
+  if(videoList.value.length<=3){
+    grad.value = 3
+  }else if(videoList.value.length<=6){
+    grad.value = 2
+  }else{
+    grad.value = 1
+  }
+  postVideoRemain()
+  // total.value = res.total
+
+  initVideo()
+}
+// 收藏
+const handleCollect = async (id, status, index,element) => {
+  await getColletDiyApi({
+    cameraIndexCode:id,
+    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);
+    console.log('取消收藏',)
+    element.isDiy = 0
+    show.value = false
+  }
+  // pubSub.publish('videoCollect', id)
+}
+// 采集
+const handleAction = async (e) => {
+  if (e == STOP) {
+    ACTION = '1'
+    command.value = e
+  } 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'
+  })
+}
+// 返回列表
+const handleBack = () => {
+  videoLog.value = 1
+  hlsRef.destroy()
+  initVideo()
+}
+let isCollect = ref(0)
+let isDiy = ref(0)
+let videoSrc = ref('')
+let diyIndex = ref(null)
+const handleCamera = async (itemCode,resource,index) => {
+  diyIndex.value = index
+  show.value = true
+  let res = await getPreviewUrlApi({
+    type: 'hls',
+    cameraIndexCode:itemCode
+  })
+  cameraIndexCode.value = itemCode;
+  isCollect.value = resource.isCollect
+  isDiy.value = resource.isDiy
+  videoSrc.value = res.data.url
+}
+//清除 hls
+const clearHlsRefs = () => {
+  if (hlsRefs.length > 0) {
+    hlsRefs.map((item) => {
+      item.destroy()
+    })
+    hlsRefs = []
+  }
+}
+// 分页
+const currentChange = (e) => {
+  clearHlsRefs()
+  videoList.value = []
+  getRegionsList()
+}
+
+let thisVideo = ref(null)
+const handleItemVideo = (url, type, code,item) => {
+  thisVideo.value = item
+  videoLog.value = 2
+  cameraIndexCode.value = code
+  setTimeout(() => {
+    hlsRef = new Hls({
+      maxBufferLength: 10, // 最大缓冲长度（秒）
+      maxMaxBufferLength: 15, // 缓冲区长度的上限
+      maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+    })
+    hlsRef.loadSource(url)
+    hlsRef.attachMedia(videoRef.value)
+    hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
+      videoRef.value.play()
+    })
+    if (type == 100) initVideo()
+  }, 1000)
+}
+const createPlayer = (cameraIndexCode,videoElement) => {
+  getPreviewUrlApi({
+    type: 'hls',
+    cameraIndexCode: cameraIndexCode
+  }).then(res=>{
+    const url = res.data.url;
+    if(url.startsWith('ws')){
+      const player = mpegtsjs.createPlayer({
+        url: url,
+        type: 'flv',
+        isLive: true,
+        hasAudio: false
+      })
+      player.attachMediaElement(videoElement)
+      player.load()
+      player.play()
+      // 错误处理和重连机制
+      player.on(mpegtsjs.Events.ERROR, (err) => {
+        player.unload();
+        player.destroy();
+        console.error('播放器错误:', err)
+        // 3 秒后尝试重新加载
+        setTimeout(() => {
+          console.error('重新加载【'+cameraIndexCode+'】' )
+          createPlayer(cameraIndexCode,videoElement);
+        }, 3000)
+      })
+
+      hlsRefs.push(player)
+    }
+    else{
+      const player = new Hls({
+        maxBufferLength: 10, // 最大缓冲长度（秒）
+        maxMaxBufferLength: 15, // 缓冲区长度的上限
+        maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+      })
+      player.loadSource(url)
+      player.attachMedia(videoElement)
+      player.on(Hls.Events.MANIFEST_PARSED, () => {
+        videoElement.play()
+      })
+      player.on(Hls.Events.ERROR, (event, data) => {
+        // 根据错误类型进行处理
+        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 initVideo = () => {
+  clearHlsRefs()
+  nextTick(() => {
+    videoList.value.forEach(async (it, i) => {
+
+      it.videos.forEach((item,index)=>{
+        setTimeout(() => {
+          const video = document.getElementById(`collectmonitorVideo${item.cameraIndexCode}`)
+          createPlayer(item.cameraIndexCode,video);
+        }, 1000)
+
+      })
+
+    })
+  })
+}
+watch(
+    () => videoList.value,
+    (val) => {
+      if (val.length) {
+        postVideoRemain()
+      }
+    },
+    { immediate: true }
+)
+// 更新视频
+const postVideoRemain = async () => {
+  // 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({
+    cameraName: cameraName.value,
+    businessScenicArea: params.businessScenicArea
+  })
+  console.log(res,11111111111111)
+  regionList.value = res.data
+  regionList.value.forEach((item,index)=>{
+    // item.show = true
+    item.videoResources=item.resourcesList[0].videoResources
+  })
+  regionList.value[0].show = true
+
+}
+const handleRegions = (e) => {
+  regionList.value[e].show = !regionList.value[e].show
+}
+const onInput = debounce((e) => {
+  getVideoRegions()
+}, 500)
+let hotelChange = null;
+onMounted(()=>{
+  getVideCollectCateList()
+  console.log(draggable,'draggable')
+})
+onUnmounted(() => {
+  if (timer) clearInterval(timer)
+  clearHlsRefs()
+
+})
 </script>
 <style></style>
 <style scoped lang="scss">
@@ -506,7 +572,7 @@
 	  }
 	}
   .video-box {
-	
+
 	display: flex;
 	flex: 1;
     flex: 1;