修改

src/components/ezuikit/EZUIKitJs.vue

@@ -5,7 +5,7 @@
         卡车调度系统矿山监控视频
       </el-header>
       <el-container>
-        <el-aside width="230px" style="height: 79vh">
+        <el-aside width="230px" style="height: 82vh">
           <el-tree
             :data="videoData"
             :props="defaultProps"
@@ -20,7 +20,7 @@
           </el-tree>
         </el-aside>
 
-        <el-main id="elMain">
+        <el-main id="elMain" style="height: 82vh">
           
           <div v-if="isChildren1" class="iframeList">
             <div v-for="(item,index) in itemList" :key="index" class="videoChildren">
@@ -410,11 +410,18 @@ export default {
     winSize(){
       let elMain = document.getElementById('elMain');
       let elMainWight = parseInt(getComputedStyle(elMain).width) ;
+      // if(elMainWight > 1650){
+      //   let twelveVideo = document.getElementsByClassName('twelveVideo');
+      //   for(let i = 0;i < twelveVideo.length;i++){
+      //     twelveVideo[i].width = 450;
+      //     twelveVideo[i].height = 320;
+      //   }
+      // }
       if(elMainWight > 1650){
         let twelveVideo = document.getElementsByClassName('twelveVideo');
         for(let i = 0;i < twelveVideo.length;i++){
-          twelveVideo[i].width = 450;
-          twelveVideo[i].height = 320;
+          twelveVideo[i].width = 390;
+          twelveVideo[i].height = 250;
         }
       }
 
@@ -485,7 +492,6 @@ export default {
   background-color: white;
   color: #333;
   text-align: center;
-  height: 79vh;
   overflow:hidden;
   width: 73vw;
 }

src/components/ezuikit/carsEZUIKitJs.vue

@@ -5,7 +5,7 @@
         卡车调度系统车辆监控视频
       </el-header>
       <el-container>
-        <el-aside width="230px" style="height: 79vh">
+        <el-aside width="230px" style="height: 82vh">
           <el-tree
             :data="videoData"
             :props="defaultProps"
@@ -20,7 +20,7 @@
           </el-tree>
         </el-aside>
 
-        <el-main id="elMain">
+        <el-main id="elMain" style="height: 82vh">
           
           <div v-if="isChildren1" class="iframeList">
             <div v-for="(item,index) in itemList" :key="index" class="videoChildren">
@@ -277,8 +277,8 @@ export default {
       if(elMainWight > 1650){
         let twelveVideo = document.getElementsByClassName('twelveVideo');
         for(let i = 0;i < twelveVideo.length;i++){
-          twelveVideo[i].width = 450;
-          twelveVideo[i].height = 320;
+          twelveVideo[i].width = 390;
+          twelveVideo[i].height = 250;
         }
       }
 
@@ -349,7 +349,6 @@ export default {
   background-color: white;
   color: #333;
   text-align: center;
-  height: 79vh;
   overflow:hidden;
   width: 73vw;
 }

src/views/MLargeScreen/components/dataScreening/index.vue

@@ -888,9 +888,9 @@ export default {
 .driverInforListStyle{
     text-align: center;
 }
-.table-box{
+/* .table-box{
 	margin-top: -10px;
-}
+} */
 dl{
 	display:table;
 	width:100%;

src/views/MLargeScreen/index.vue

@@ -17,6 +17,10 @@
 			<!-- 时间 -->
 			<div class="currentTimeStyle">{{currentTime}}</div>
 		</div>
+		<div class="videoSelectView" v-show="videoSelect1">
+			<div @click="lookFn1()">矿山监控</div>
+			<div @click="lookFn2()">车辆监控</div>
+		</div>
 		<!-- 内容 -->
 		<div class="content_view">
 			<dataScreening ref="dataScreeningMethod" v-show="selectModule == 'dataScreening'"/>
@@ -25,12 +29,19 @@
 			<dataAnalysis ref="dataAnalysisMethod" v-show="selectModule == 'dataAnalysis'"/>
 			<carSpecificInfor ref="carSpecificInforMethod" v-show="selectModule == 'carSpecificInfor'"/>
 		</div>
+		<!-- 监控区域 -->
+		<div class="jiankongView">
+			<carsEZUIKitJs  v-if="carsEZUIKitJsShow"/>
+			<kaungEZUIKitJs  v-if="kaungEZUIKitJsShow"/>
+		</div>
+		<!-- 车事例 -->
 		<!-- <div class="carExample" @click="showSpecificInforFn()">
 			<span class="el-icon-location"></span>
 		</div> -->
-		<!-- <div id="centerDiv" class="mapcontainer1">
+		<!-- 地图区域 -->
+		<div id="centerDiv" class="mapcontainer1">
 			<mars3dViewerMap :url="configUrl" @onload="onMapload"/>
-		</div> -->
+		</div>
 	</div>
 </template>
 
@@ -42,6 +53,8 @@ import intelligentSchedul from './components/intelligentSchedul/index.vue' //智
 import dataAnalysis from './components/dataAnalysis/index.vue' //数据分析
 import carSpecificInfor from './components/carSpecificInfor/index.vue' //车辆信息弹框
 import mars3dViewerMap from '../../components/mars3d/Map.vue' //地图
+import carsEZUIKitJs from '../../components/ezuikit/carsEZUIKitJs.vue'//车辆监控
+import kaungEZUIKitJs from '../../components/ezuikit/EZUIKitJs.vue'//矿山监控
 
 export default {
 	components: {
@@ -51,6 +64,8 @@ export default {
 		dataAnalysis,
 		carSpecificInfor,
 		mars3dViewerMap,
+		carsEZUIKitJs,
+		kaungEZUIKitJs,
 	},
 	data() {
 		const basePathUrl = window.basePathUrl || ''
@@ -76,7 +91,10 @@ export default {
 			carName:'4001',
 			//司机用户名
 			driverUserName:'lisan',
-			
+			//监控选择
+			videoSelect1:false,
+			carsEZUIKitJsShow:false,
+			kaungEZUIKitJsShow:false,
 		}
 	},
 	mounted() {
@@ -122,6 +140,9 @@ export default {
 				this.$refs.carManagementMethod.loadData(false);
 				this.$refs.intelligentSchedulMethod.loadData(false);
 				this.$refs.dataAnalysisMethod.loadData(false);
+				this.videoSelect1 = false;
+				this.kaungEZUIKitJsShow = false;
+				this.carsEZUIKitJsShow = false;
 			}
 			if(item.componentName == 'carManagement'){
 				if(this.isShow.carManagement == false){
@@ -137,6 +158,9 @@ export default {
 				this.$refs.dataScreeningMethod.loadData(false);
 				this.$refs.intelligentSchedulMethod.loadData(false);
 				this.$refs.dataAnalysisMethod.loadData(false);
+				this.videoSelect1 = false;
+				this.kaungEZUIKitJsShow = false;
+				this.carsEZUIKitJsShow = false;
 			}
 			if(item.componentName == 'intelligentSchedul'){
 				if(this.isShow.intelligentSchedul == false){
@@ -152,6 +176,9 @@ export default {
 				this.$refs.dataScreeningMethod.loadData(false);
 				this.$refs.carManagementMethod.loadData(false);
 				this.$refs.dataAnalysisMethod.loadData(false);
+				this.videoSelect1 = false;
+				this.kaungEZUIKitJsShow = false;
+				this.carsEZUIKitJsShow = false;
 			}
 			if(item.componentName == 'dataAnalysis'){
 				if(this.isShow.dataAnalysis == false){
@@ -167,6 +194,9 @@ export default {
 				this.$refs.dataScreeningMethod.loadData(false);
 				this.$refs.carManagementMethod.loadData(false);
 				this.$refs.intelligentSchedulMethod.loadData(false);
+				this.videoSelect1 = false;
+				this.kaungEZUIKitJsShow = false;
+				this.carsEZUIKitJsShow = false;
 			}
 			if(item.componentName == 'backstage'){
 				this.isShow.dataScreening = false;
@@ -183,6 +213,9 @@ export default {
 					});
 					window.open(routeUrl.href, '_blank');
 				})
+				this.videoSelect1 = false;
+				this.kaungEZUIKitJsShow = false;
+				this.carsEZUIKitJsShow = false;
 			}
 			if(item.componentName == 'toVideoSurveillance'){
 				this.isShow.dataScreening = false;
@@ -193,13 +226,25 @@ export default {
 				this.$refs.carManagementMethod.loadData(false);
 				this.$refs.intelligentSchedulMethod.loadData(false);
 				this.$refs.dataAnalysisMethod.loadData(false);
-				this.$nextTick(()=>{
-					let routeUrl = this.$router.resolve({
-						path: "/monitoringManagement/mineVideo",
-					});
-					window.open(routeUrl.href, '_blank');
-				})
+				if(this.videoSelect1 == false){
+					this.videoSelect1 = true;
+				}else{
+					this.videoSelect1 = false;
+					this.kaungEZUIKitJsShow = false;
+					this.carsEZUIKitJsShow = false;
 				}
+
+			}
+		},
+		//矿山监控
+		lookFn1(){
+			this.kaungEZUIKitJsShow = true;
+			this.carsEZUIKitJsShow = false;
+		},
+		//车辆监控
+		lookFn2(){
+			this.kaungEZUIKitJsShow = false;
+			this.carsEZUIKitJsShow = true;
 		},
 		//车辆信息弹框
 		showSpecificInforFn(){
@@ -274,6 +319,10 @@ export default {
 </script>
 
 <style scope>
+*{
+  margin: 0;
+  padding: 0;
+}
 .mapcontainer1 {
   height: 100vh;
   width: 100vw;
@@ -304,6 +353,29 @@ export default {
 	position: relative;
 	bottom: 0px;
 }
+.videoSelectView{
+	position: absolute;
+	top: 5.5vh;
+	z-index: 1;
+	width: 100%;
+	height: 5.5vh;
+	background-color: rgb(102,204,255);
+	display: flex;
+	justify-content: space-evenly;
+	align-items: center;
+	font-size: 25px;
+	color: white;
+	font-weight: 600;
+}
+.videoSelectView>div{
+	cursor: pointer;
+}
+.jiankongView{
+	position: absolute;
+	top: 11vh;
+	z-index: 1;
+	width: 100%;
+}
 .top_titl_left{
 	display: flex;
 	justify-content: space-evenly;
@@ -317,8 +389,8 @@ export default {
 	justify-content: space-evenly;
 	position: absolute;
 	top: 2vh;
-	right: 15vw;
-	width: 20%;
+	right: 12vw;
+	width: 23%;
 	font-size: 22px;
 }
 .top_titl_left_textStyle1{