feat：完善功能

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

@@ -56,10 +56,10 @@
             <video
               class="video-item__video"
               :id="'monitorVideo' + index"
+              preload="auto"
               muted
               autoplay
               :controls="false"
-              style="object-fit: cover"
             >
               <source src="" type="application/x-mpegURL" />
             </video>
@@ -158,7 +158,7 @@
     businessScenicArea: '',
     businessVideoDisplayPosition: ''
   })
-
+  let hlsRefs = []
   // const postVideoRemain = async () => {
   //   setInterval(() => {
   //     postVideoRemainApi({
@@ -181,6 +181,7 @@
         hls.on(Hls.Events.MANIFEST_PARSED, () => {
           video.play()
         })
+        hlsRefs.push(hls)
       })
     })
   }
@@ -255,6 +256,7 @@
             hls.on(Hls.Events.MANIFEST_PARSED, () => {
               video.play()
             })
+            hlsRefs.push(hls)
           })
         })
       }
@@ -325,6 +327,12 @@
     onMonitorChange()
   })
   onUnmounted(() => {
+    // 释放hls实例
+    if (hlsRefs.length > 0) {
+      hlsRefs.map((item) => {
+        item.destroy()
+      })
+    }
     PubSub.unsubscribe(monitorChange)
   })
 </script>
@@ -459,36 +467,6 @@
             }
           }
         }
-        .tree-b::before {
-          position: absolute;
-          top: vw(-8);
-          left: vw(-8);
-          content: '';
-          width: vw(12);
-          height: vw(12);
-          background-image: url('/src/assets/images/icon-a-1.png');
-          background-size: 100% 100%;
-        }
-        // .tree-b {
-        //   position: relative;
-        //   border-left: vw(3) solid;
-        //   border-image: linear-gradient(311deg, rgba(0, 11, 36, 0), rgba(55, 216, 252, 1)) 1 1;
-        //   margin-left: vw(30);
-        //   margin-top: vh(10);
-        //   .name-2 {
-        //     cursor: pointer;
-        //     padding: 0 vw(20);
-        //     display: block;
-        //     font-weight: 400;
-        //     font-size: vw(15);
-        //     color: #ffffff;
-        //     height: vh(30);
-        //     line-height: vh(30);
-        //     white-space: nowrap; /* 保证文本在一行内显示 */
-        //     overflow: hidden; /* 隐藏溢出的内容 */
-        //     text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
-        //   }
-        // }
       }
     }
     .ul {
@@ -591,8 +569,8 @@
     &-item__video {
       width: 100%;
       height: vh(406);
+      object-fit: cover;
     }
-
     &-detail {
       margin-left: vw(10);
       display: flex;