修改

src/views/MLargeScreen/index.vue

@@ -36,8 +36,8 @@
 		<!-- 嵌入三维地图页面 -->
 		<iframe src="http://8.143.203.103:9092/#/Index" frameborder="0" class="mapcontainer1"></iframe>
 		<!-- 单个车辆视频监控 -->
-		<div class="monitorCover1" v-if="monitorCover1Show">
-			<div class="monitorCover1_closePic"></div>
+		<div class="monitorCover1" v-show="monitorCover1Show">
+			<div class="monitorCover1_closePic" @click="closeMonitorCoverFn"></div>
 			<div class="monitorCover1_Video">
 				<video id="monitorCover1Id" width="1300" height="700" muted autoplay></video>
 			</div>
@@ -54,6 +54,7 @@ import intelligentSchedul from './components/intelligentSchedul/index.vue' //智
 import dataAnalysis from './components/dataAnalysis/index.vue' //数据分析
 import carsEZUIKitJs from '../../components/ezuikit/carsEZUIKitJs.vue'//车辆监控
 import kaungEZUIKitJs from '../../components/ezuikit/EZUIKitJs.vue'//矿山监控
+import Hls from "hls.js"
 
 var noPtzhls1 = null;
 export default {
@@ -263,6 +264,10 @@ export default {
 			if(event.data.data.hasOwnProperty("url")){
 				if(event.data.data.url == '监控'){
 					console.log('监控',event.data.data.data);
+					if(noPtzhls1 != null){
+						noPtzhls1.destroy();
+					}
+					this.monitorCover1Show = true;
 					let monitorCover1Id = document.getElementById('monitorCover1Id');
 					noPtzhls1 = new Hls();
 					noPtzhls1.loadSource('http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8');
@@ -275,12 +280,23 @@ export default {
 				}
 			}
 		},
+		//关闭视频蒙层
+		closeMonitorCoverFn(){
+			this.monitorCover1Show = false;
+			if(noPtzhls1 != null){
+				noPtzhls1.destroy();
+			}
+		},
 	},
 	beforeDestroy(){
 		this.$refs.intelligentSchedulMethod.xintiaoCloseFn();
 		if(this.timer) {
 			clearInterval(this.timer);
 		}
+		//注销视频
+		if(noPtzhls1 != null){
+			noPtzhls1.destroy();
+		}
     }
 }
 </script>
@@ -398,5 +414,12 @@ export default {
 	position: absolute;
 	top: 6vh;
 	right: 3vw;
+	cursor: pointer;
+}
+.monitorCover1_Video{
+	position: absolute;
+	top: 10vh;
+	left: 50vw;
+	transform: translateX(-50%);
 }
 </style>
\ No newline at end of file