添加三维地图中点击车辆查看监控

src/components/ezuikit/EZUIKitJs.vue

@@ -2,7 +2,7 @@
   <div class="video111">
     <el-container>
       <el-container style="display:flex;justify-content: space-between;">
-        <el-aside width="12vw" style="height: 89vh;margin-top: 5.5vh;">
+        <el-aside width="12vw" style="height: 89vh;margin-top: 5.5vh;z-index: 3;">
           <el-tree
             :data="videoData"
             :props="defaultProps"
@@ -904,6 +904,7 @@ export default {
   padding: 1vh 0px 0px 1vh;
   box-sizing: border-box;
   border-left: 1px solid gainsboro;
+  z-index: 3;
 }
 .aiAnalysisViews_Title{
   font-size: 24px;

src/components/ezuikit/carsEZUIKitJs.vue

@@ -2,7 +2,7 @@
   <div class="video111">
     <el-container>
       <el-container style="display:flex;justify-content: space-between;">
-        <el-aside width="12vw" style="height: 89vh;margin-top: 5.5vh;">
+        <el-aside width="12vw" style="height: 89vh;margin-top: 5.5vh;z-index: 3;">
           <el-input placeholder="请输入车牌号" prefix-icon="el-icon-search" v-model="searchCarText" @keyup.enter.native="searchCarFn"></el-input>
           <el-tree
             :data="videoData"
@@ -931,6 +931,7 @@ export default {
   padding: 1vh 0px 0px 1vh;
   box-sizing: border-box;
   border-left: 1px solid gainsboro;
+  z-index: 3;
 }
 .aiAnalysisViews_Title{
   font-size: 24px;

src/views/MLargeScreen/index.vue

@@ -35,12 +35,11 @@
 		</div>
 		<!-- 嵌入三维地图页面 -->
 		<iframe :src="url" frameborder="0" class="mapcontainer1"></iframe>
+		<!-- <iframe src="http://120.224.103.84:9090/map/#/Index" frameborder="0" class="mapcontainer1"></iframe> -->
 		<!-- 单个车辆视频监控 -->
-		<div class="monitorCover1" v-show="monitorCover1Show">
+		<div class="monitorCover1" v-if="monitorCover1Show">
 			<div class="monitorCover1_closePic" @click="closeMonitorCoverFn"></div>
-			<div class="monitorCover1_Video">
-				<video id="monitorCover1Id" width="1300" height="700" muted autoplay></video>
-			</div>
+			<iframe :src="iframeSrc" class="monitorCover1_Video"></iframe>
 		</div>
 	</div>
 </template>
@@ -53,9 +52,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 {
 	components: {
 		dataScreening,
@@ -67,6 +64,9 @@ export default {
 	},
 	data() {
 		return {
+			//监控视频
+			iframeSrc:'',
+      		defaultIframeSrc:'http://oa.gemho.cn:8088/808gps/open/player/video.html?lang=zh&channel=9&account=admin&password=admin&vehiIdno=',
 			url:process.env.VUE_APP_LOCAL_API2 + 'map',
 			//时间
 			timer:null,
@@ -99,7 +99,7 @@ export default {
 		this.timer = setInterval(() => {
             this.setNowTimes();
         }, 1000)
-		//window.addEventListener('message', this.handleMessage);
+		window.addEventListener('message', this.handleMessage);
 	},
 	methods: {
 		loadData() {
@@ -268,35 +268,15 @@ 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.iframeSrc = this.defaultIframeSrc + event.data.data.data;
 					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');
-					noPtzhls1.attachMedia(monitorCover1Id);
-					noPtzhls1.on(Hls.Events.MANIFEST_PARSED,function() {
-						monitorCover1Id.play();
-					});
-				}else if(event.data.data.url == '轨迹回放'){
-					let pathInfo = this.$router.resolve({
-						path:'/carManagement/carTrajectory',
-						query:{
-							number:event.data.data.data
-						}
-					})
-					window.open(pathInfo.href, '_blank');
 				}
 			}
 		},
 		//关闭视频蒙层
 		closeMonitorCoverFn(){
+			this.iframeSrc = '';
 			this.monitorCover1Show = false;
-			if(noPtzhls1 != null){
-				noPtzhls1.destroy();
-			}
 		},
 	},
 	beforeDestroy(){
@@ -304,10 +284,6 @@ export default {
 		if(this.timer) {
 			clearInterval(this.timer);
 		}
-		//注销视频
-		if(noPtzhls1 != null){
-			noPtzhls1.destroy();
-		}
     }
 }
 </script>
@@ -368,7 +344,6 @@ export default {
 .jiankongView{
 	position: absolute;
 	top: 5.5vh;
-	z-index: 3;
 	width: 100%;
 }
 .top_titl_left{
@@ -432,8 +407,10 @@ export default {
 }
 .monitorCover1_Video{
 	position: absolute;
-	top: 10vh;
+	top: 5.5vh;
 	left: 50vw;
 	transform: translateX(-50%);
+	width: 80vw;
+  	height: 90vh;
 }
 </style>
\ No newline at end of file