首页离开时视频拉流销毁

src/views/MochaITOM/record/index.vue

@@ -131,34 +131,6 @@
         </template>
       </el-table-column>
     </el-table>
-    <!-- <el-table v-loading="loading" :data="adminList" style="margin-top:20px;" border>
-      <el-table-column label="任务名称" align="center" prop="planName" show-overflow-tooltip />
-      <el-table-column label="维保点位" align="center" prop="pointName" show-overflow-tooltip />
-      <el-table-column label="应完成时间" align="center" prop="endDate" show-overflow-tooltip />
-      <el-table-column label="最近完成时间" align="center" prop="updateTime" show-overflow-tooltip />
-      <el-table-column label="完成情况" align="center" prop="isComplete" show-overflow-tooltip >
-        <template slot-scope="scope">
-          <span :class="scope.row.isComplete == false ? 'color3' : 'color4'">{{scope.row.isComplete == false ? "未完成" : "已完成"}}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="相关责任人" align="center" prop="dutyName" show-overflow-tooltip />
-      <el-table-column label="联系电话" align="center" prop="dutyPhone" show-overflow-tooltip />
-      <el-table-column label="操作" width="190" fixed="right" >
-        <template slot-scope="scope">
-          <el-button v-if="scope.row.isComplete && scope.row.updateTime"
-            class="lans"
-            @click="play(scope.row)"
-            >视频回放</el-button
-          >
-          <el-button v-else
-            class="lans"
-            @click="play(scope.row)"
-            disabled
-            >视频回放</el-button
-          >
-        </template>
-      </el-table-column>
-    </el-table> -->
     <el-pagination
       background
       @current-change="handleCurrentChange"

src/views/index/components/monitor.vue

@@ -251,7 +251,7 @@ export default {
   methods: {
     //关闭弹框
     closeDialog(){
-      this.destroyHls(this.hls_video2)
+      this.destroyHls()
     },
     handleChange(id,val){
       this.selectVideoHc[id].label = this.list.find( item => item.url == val).label
@@ -455,37 +455,51 @@ export default {
       },1000)
     },
     //销毁hls 视频流
-    destroyHls(id) {
-      if(id){
-         if(this.hls_video2){
-          for (let i = 0; i < this.hls_video2.length; i++) {
-            var ref_video = this.hls_video2[i].ref;
-            var hls_video = this.hls_video2[i].hls;
-            if ((ref_video, this.$refs[ref_video][0] != undefined)) {
-              this.$refs[ref_video][0].pause();
-              hls_video.destroy();
-              hls_video = null;
-            }
-          }
-        }
-      }else{
-         if(this.hls_video){
-          for (let i = 0; i < this.hls_video.length; i++) {
-            var ref_video = this.hls_video[i].ref;
-            var hls_video = this.hls_video[i].hls;
-            if ((ref_video, this.$refs[ref_video][0] != undefined)) {
-              this.$refs[ref_video][0].pause();
-              hls_video.destroy();
-              hls_video = null;
-            }
-          }
+    destroyHls() {
+      if(this.hls2){
+        this.hls2.destroy();
+        this.hls2 = null;
+      }
+      if(this.hls_video[0].hls){
+        for(let i =0;i<6;i++){
+          this.hls_video[i].hls.destroy();
+          this.hls_video[i].hls = null;
         }
       }
 
+      // if(id){
+      //    if(this.hls_video2){
+      //     for (let i = 0; i < this.hls_video2.length; i++) {
+      //       var ref_video = this.hls_video2[i].ref;
+      //       var hls_video = this.hls_video2[i].hls;
+      //       if ((ref_video, this.$refs[ref_video][0] != undefined)) {
+      //         this.$refs[ref_video][0].pause();
+      //         hls_video.destroy();
+      //         hls_video = null;
+      //       }
+      //     }
+      //   }
+      // }else{
+      //    if(this.hls_video){
+      //     for (let i = 0; i < this.hls_video.length; i++) {
+      //       var ref_video = this.hls_video[i].ref;
+      //       var hls_video = this.hls_video[i].hls;
+      //       if ((ref_video, this.$refs[ref_video][0] != undefined)) {
+      //         this.$refs[ref_video][0].pause();
+      //         hls_video.destroy();
+      //         hls_video = null;
+      //       }
+      //     }
+      //   }
+      // }
+
     },
     onSubmit() {
     },
   },
+  destroyed(){
+    this.destroyHls()
+  }
 };
 </script>
 <style lang="scss" scoped>