feat 优化标签

.eslintrc-auto-import.json

@@ -5,10 +5,6 @@
     "ComputedRef": true,
     "DirectiveBinding": true,
     "EffectScope": true,
-    "ElLoading": true,
-    "ElMessage": true,
-    "ElMessageBox": true,
-    "ElNotification": true,
     "ExtractDefaultPropTypes": true,
     "ExtractPropTypes": true,
     "ExtractPublicPropTypes": true,

src/layout/components/Navbar.vue

@@ -46,7 +46,7 @@
               v-model:visible="popoverVisible"
             >
               <template #reference>
-                <el-badge :value="infoData" :max="9999">
+                <el-badge :value="infoData" :max="999">
                   <div class="right-menu-item hover-effect" @click="goToWarningList">
                     <el-icon><BellFilled /></el-icon>
                   </div>

src/utils/video.ts

@@ -1,7 +1,5 @@
 import Hls from 'hls.js';
-import { log } from 'node:console';
 let hlsInstance: Hls | null = null;
-// let hlsRetryCount = 0;
 
 export const initHls = (monitorVideoUrl, monitorVideoRef) => {
   const url = monitorVideoUrl.value;
@@ -19,18 +17,7 @@ export const initHls = (monitorVideoUrl, monitorVideoRef) => {
   }
 
   if (Hls.isSupported()) {
-    const hls = new Hls({
-      // ★ ZLM 注册流需要时间，配置自动重试
-      manifestLoadingMaxRetry: 5, // m3u8 加载最多重试20次
-      manifestLoadingRetryDelay: 500, // 每次重试间隔500ms
-      manifestLoadingTimeOut: 5000, // m3u8 请求超时5秒
-      levelLoadingMaxRetry: 20, // ts 分片加载最多重试20次
-      levelLoadingRetryDelay: 500,
-      fragLoadingMaxRetry: 20, // 片段加载重试
-      fragLoadingRetryDelay: 500,
-      lowLatencyMode: false, // 关掉低延迟模式，更稳定
-      startLevel: -1 // 自动选择码率
-    });
+    const hls = new Hls();
     hls.loadSource(url);
     hls.attachMedia(video);
     hls.on(Hls.Events.MANIFEST_PARSED, () => {
@@ -38,31 +25,7 @@ export const initHls = (monitorVideoUrl, monitorVideoRef) => {
       try {
         video.play().catch(() => {});
       } catch (e) {}
-      // 加载成功，重置重试计数
-      // hlsRetryCount = 0;
     });
-
-    // ★ 错误自动恢复：hls.js 拿到空 m3u8 或 ts 加载失败时自动重试
-    hls.on(Hls.Events.ERROR, (event, data) => {
-      if (data.fatal) {
-        switch (data.type) {
-          case Hls.ErrorTypes.NETWORK_ERROR:
-            hls.startLoad();
-            ElMessage.error('网络错误, 请检查网络或重试');
-            break;
-          case Hls.ErrorTypes.MEDIA_ERROR:
-            // 媒体解码错误 → 尝试恢复
-            hls.recoverMediaError();
-            break;
-          default:
-            // 其他致命错误 → 销毁，让下一次 initHls 重建
-            hls.destroy();
-            hlsInstance = null;
-            break;
-        }
-      }
-    });
-
     hlsInstance = hls;
   } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
     // Safari/原生支持 HLS
@@ -93,9 +56,7 @@ export const destroyHls = (monitorVideoRef) => {
       video.removeAttribute('src');
       // 对某些浏览器，需要调用 load() 来重置 media element
       if (typeof video.load === 'function') video.load();
-    } catch (e) {
-      console.log('Error in destroyHls:', e);
-    }
+    } catch (e) {}
   }
 };
 

src/views/equipmentList/list.vue

@@ -158,7 +158,7 @@ import { EquipmentList, DeviceInfoForm, AlarmAreaData } from '@/api/equipmentLis
 import { listDemo, getDemo, delDemo, addDemo, updateDemo } from '@/api/demo/demo';
 import { DemoVO, DemoQuery, DemoForm } from '@/api/demo/demo/types';
 import { log } from 'node:console';
-import { initHls, destroyHls } from '@/utils/video';
+import Hls from 'hls.js';
 import { nextTick } from 'vue';
 import { useVideosStore } from '@/store/modules/video';
 
@@ -190,9 +190,68 @@ const dialog1 = reactive<DialogOption>({
 
 const monitorVideoUrl = ref('');
 const monitorVideoRef = ref<HTMLVideoElement>();
+let hlsInstance: Hls | null = null;
 let visibilityHandler: (() => void) | null = null;
 const monitoringArea = ref<string>('');
 
+const initHls = () => {
+  const url = monitorVideoUrl.value;
+  const video = monitorVideoRef.value;
+  if (!url || !video) return;
+
+  // 销毁已有实例
+  if (hlsInstance) {
+    try {
+      hlsInstance.destroy();
+    } catch (e) {
+      // ignore
+    }
+    hlsInstance = null;
+  }
+
+  if (Hls.isSupported()) {
+    const hls = new Hls();
+    hls.loadSource(url);
+    hls.attachMedia(video);
+    hls.on(Hls.Events.MANIFEST_PARSED, () => {
+      // 自动播放（若浏览器允许）
+      try {
+        video.play().catch(() => {});
+      } catch (e) {}
+    });
+    hlsInstance = hls;
+  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+    // Safari/原生支持 HLS
+    video.src = url;
+    video.addEventListener('loadedmetadata', () => {
+      try {
+        video.play().catch(() => {});
+      } catch (e) {}
+    });
+  } else {
+    proxy?.$modal.msgWarning('当前浏览器不支持 HLS 播放');
+  }
+};
+
+const destroyHls = () => {
+  try {
+    if (hlsInstance) {
+      hlsInstance.destroy();
+      hlsInstance = null;
+    }
+  } catch (e) {}
+  const video = monitorVideoRef.value;
+  if (video) {
+    // 清理原生 src，避免残留
+    try {
+      video.pause();
+      video.removeAttribute('src');
+      // 对某些浏览器，需要调用 load() 来重置 media element
+      if (typeof video.load === 'function') video.load();
+    } catch (e) {}
+  }
+};
+
 type MonitorPoint = { x: number; y: number };
 const monitorDrawCollecting = ref(false);
 const monitorDrawPoints = ref<MonitorPoint[]>([]);
@@ -360,7 +419,7 @@ const handleSee = async (row?: any) => {
   dialog1.visible = true;
   dialog1.title = '修改设备';
 
-  destroyHls(monitorVideoRef);
+  destroyHls();
   monitorVideoUrl.value = '';
   await videosStore.getVideos(row.id);
   monitorVideoUrl.value = videosStore.hisUrl || '';
@@ -373,7 +432,7 @@ const handleSee = async (row?: any) => {
 
   // 等待 DOM 更新后初始化 Hls
   await nextTick();
-  initHls(monitorVideoUrl, monitorVideoRef);
+  initHls();
   // 等待视频加载完成后初始化 ResizeObserver，以便能正确获取视频尺寸
   initVideoResizeObserver();
 
@@ -506,7 +565,7 @@ const cleanupVisibilityChange = () => {
 
 const handleMonitorDialogClose = (done: () => void) => {
   // 卸载 Hls 与清理 video
-  destroyHls(monitorVideoRef);
+  destroyHls();
   monitorVideoUrl.value = '';
   destroyVideoResizeObserver();
   resetMonitorDraw();
@@ -651,7 +710,7 @@ const saveImage = async () => {
 
 const handleMonitorDialogOpen = () => {
   // 初始化 Hls 与 video
-  initHls(monitorVideoUrl, monitorVideoRef);
+  initHls();
   initVideoResizeObserver();
   monitorDrawCollecting.value = false;
   monitorDrawPoints.value = [];