1

src/views/MLargeScreen/components/smallComponents/DPcomputer16.vue

@@ -90,6 +90,8 @@
 			<slot name="bottom"></slot>
 		</div>
 
+        <div class="mengceng1" v-if="mengcengshow"></div>
+
         <!-- 语音区域组件 -->
         <div class="videoListView" v-if="dialogVisible">
             <div class="videoListView_title">{{dialogTitle}}</div>
@@ -116,12 +118,12 @@
                     <el-cascader v-model="zaDestination" :options="caiquData1"></el-cascader>
 				</el-form-item>
                 <el-form-item label="卸点区" style="display: inline-block;" class="des1">
-					<el-select v-model="xzDestination" placeholder="请选择卸点区" style="width:200px;">
+					<el-select v-model="xzDestination" placeholder="请选择卸点区">
 						<el-option v-for="(obj,index) in xiequData1" :label="obj.name" :value="obj.name" :key="index"></el-option>
 					</el-select>
 				</el-form-item>
                 <el-form-item label="时长" style="display: inline-block;" class="des1">
-					<el-select v-model="desform.duration" placeholder="请选择调度时长" style="width:200px;">
+					<el-select v-model="desform.duration" placeholder="请选择调度时长">
 						<el-option label="单次" value="单次"></el-option>
 						<el-option label="一天" value="一天"></el-option>
 						<el-option label="长期" value="长期"></el-option>
@@ -173,6 +175,7 @@ export default {
             dialogVisible:false,
             resultBlob:null,
             tanchuCarListArray:[], //弹出列表选中车辆
+            mengcengshow:false,//蒙层
 
             //录音相关数据
             type:"mp3",
@@ -207,6 +210,7 @@ export default {
         loadData(){
             this.selectCarFleet = '';
             this.dialogVisible = false;
+            this.mengcengshow = false;
             this.selectCarRadioArray = [];
             this.tanchuCarListArray = [];
             this.peopleScheAssemblyShow = false;
@@ -299,6 +303,8 @@ export default {
 		xintiaoCloseFn(){
 			//页面销毁时关闭长连接
         	this.websocketclose();
+            //关闭录音
+            this.recClose();
 		},
         //搜索车辆
         toSearchFn(){
@@ -326,6 +332,7 @@ export default {
                 this.tanchuCarListArray = this.selectCarRadioArray;
             }
             this.dialogVisible = true;
+            this.mengcengshow = true;
             //关闭人工调度组件
             this.peopleScheAssemblyShow = false;
             this.desform = {};
@@ -339,11 +346,13 @@ export default {
             }
             //关闭发起通知组件
             this.dialogVisible = false; 
+            this.mengcengshow = true;
             this.tanchuCarListArray = [];
         },
         //取消发送语音
         quxiaoVideo(){
             this.dialogVisible = false; 
+            this.mengcengshow = false;
             this.tanchuCarListArray = [];
             this.selectCarRadioArray = [];
         },
@@ -445,6 +454,7 @@ export default {
 				duration: 2500
 			});
             this.peopleScheAssemblyShow = false;
+            this.mengcengshow = false;
             this.desform = {},
             this.zaDestination = [];
             this.xzDestination = '';
@@ -476,6 +486,7 @@ export default {
         //取消人工调度
         peopleScheAssemblyCloseFn(){
             this.peopleScheAssemblyShow = false;
+            this.mengcengshow = false;
             this.desform = {};
             this.zaDestination = [];
             this.xzDestination = '';
@@ -503,8 +514,8 @@ export default {
             console.log("WebSocket连接发生错误");
         },
         //WebSocket数据接收 
-        websocketonmessage(e){ 
-            console.log("e",e);
+        websocketonmessage(e){
+            //console.log("e",e);
 			if(e == undefined){
 				return
 			}else{
@@ -516,9 +527,10 @@ export default {
         websocketsend(agentData){
             this.websocket.send(agentData); 
         }, 
-        //WebSocket关闭 
+        //WebSocket关闭
         websocketclose(e){
-            console.log("connection closed (" + e.code + ")"); 
+            //console.log("connection closed (" + e.code + ")"); 
+            console.log("connection closed !"); 
         },
         //WebSocket重连
 		reconnect(){
@@ -826,6 +838,7 @@ export default {
 			clearInterval(this.heartbeatTimer);
             this.heartbeatTimer = null;
 		}
+        this.xintiaoCloseFn();
     }
 }
 </script>
@@ -836,8 +849,8 @@ export default {
   padding: 0;
 }
 .DPcomputer16Box{
-    height: 64vh;
     overflow: hidden;
+    height: 64vh;
     position: relative;
 }
 .DPcomputer16Box_1{
@@ -848,6 +861,16 @@ export default {
     box-sizing: border-box;
     overflow: hidden;
 }
+.DPcomputer16Box .mengceng1{
+    width: 20vw;
+    height: 64vh;
+    background-color: black;
+    opacity: 0.7;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: 40;
+}
 .DPcomputer16Box .intelligentSchScrView_leftView_title{
     margin-bottom: 5px;
     width: 100%;
@@ -1048,11 +1071,11 @@ export default {
 }
 .DPcomputer16Box .videoListView{
     position: absolute;
-    top: 5vh;
-    left: 20vw;
+    bottom: 1vh;
+    left: 1.1vw;
     height: 47vh;
-    width: 35vh;
-    z-index: 3;
+    width: 18vw;
+    z-index: 50;
     background:no-repeat center center url('~@/assets/images/cutGraph/guzhangshenbankuang1.png');
 	background-size:100% 100%;
     padding: 10px 10px 0px;
@@ -1110,11 +1133,11 @@ export default {
 }
 .DPcomputer16Box .peopleScheAssembly{
     position: absolute;
-    bottom: 10vh;
-    left: 20vw;
+    bottom: 1vh;
+    left: 0.7vw;
     height: 50vh;
-    width: 40vh;
-    z-index: 3;
+    width: 18.5vw;
+    z-index: 50;
     background:no-repeat center center url('~@/assets/images/cutGraph/guzhangshenbankuang1.png');
 	background-size:100% 100%;
     padding: 10px 10px 0px;

src/views/MLargeScreen/index.vue

@@ -23,10 +23,15 @@
 		</div>
 		<!-- 内容 -->
 		<div class="content_view">
-			<dataScreening ref="dataScreeningMethod" v-show="selectModule == 'dataScreening'"/>
-			<carManagement ref="carManagementMethod" v-show="selectModule == 'carManagement'"/>
-			<intelligentSchedul ref="intelligentSchedulMethod" v-show="selectModule == 'intelligentSchedul'"/>
-			<dataAnalysis ref="dataAnalysisMethod" v-show="selectModule == 'dataAnalysis'"/>
+			<div class="content_view_left">
+				<components :is="item.componentName" v-for="(item,index) in allComponents.left" :key="index"></components>
+			</div>
+			<div class="content_view_center">
+				<components :is="item.componentName" v-for="(item,index) in allComponents.center" :key="index"></components>
+			</div>
+			<div class="content_view_right">
+				<components :is="item.componentName" v-for="(item,index) in allComponents.right" :key="index"></components>
+			</div>
 		</div>
 		<!-- 监控区域 -->
 		<div class="jiankongView">
@@ -46,24 +51,74 @@
 
 <script>
 import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
-import dataScreening from './components/dataScreening/index.vue' //数据总览
-import carManagement from './components/carManagement/index.vue' //车辆管理
-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 DPcomputer1 from './components/smallComponents/DPcomputer1.vue'
+import DPcomputer2 from './components/smallComponents/DPcomputer2.vue'
+import DPcomputer3 from './components/smallComponents/DPcomputer3.vue'
+import DPcomputer4 from './components/smallComponents/DPcomputer4.vue'
+import DPcomputer5 from './components/smallComponents/DPcomputer5.vue'
+import DPcomputer6 from './components/smallComponents/DPcomputer6.vue'
+import DPcomputer7 from './components/smallComponents/DPcomputer7.vue'
+import DPcomputer8 from './components/smallComponents/DPcomputer8.vue'
+import DPcomputer9 from './components/smallComponents/DPcomputer9.vue'
+import DPcomputer10 from './components/smallComponents/DPcomputer10.vue'
+import DPcomputer11 from './components/smallComponents/DPcomputer11.vue'
+import DPcomputer12 from './components/smallComponents/DPcomputer12.vue'
+import DPcomputer13 from './components/smallComponents/DPcomputer13.vue'
+import DPcomputer14 from './components/smallComponents/DPcomputer14.vue'
+import DPcomputer15 from './components/smallComponents/DPcomputer15.vue'
+import DPcomputer16 from './components/smallComponents/DPcomputer16.vue'
+import DPcomputer17 from './components/smallComponents/DPcomputer17.vue'
+import DPcomputer18 from './components/smallComponents/DPcomputer18.vue'
+import DPcomputer19 from './components/smallComponents/DPcomputer19.vue'
+import DPcomputer20 from './components/smallComponents/DPcomputer20.vue'
+import DPcomputer21 from './components/smallComponents/DPcomputer21.vue'
+import DPcomputer22 from './components/smallComponents/DPcomputer22.vue'
+import DPcomputer23 from './components/smallComponents/DPcomputer23.vue'
+import DPcomputer24 from './components/smallComponents/DPcomputer24.vue'
+import DPcomputer25 from './components/smallComponents/DPcomputer25.vue'
+import DPcomputer26 from './components/smallComponents/DPcomputer26.vue'
+import DPcomputer27 from './components/smallComponents/DPcomputer27.vue'
+import DPcomputer28 from './components/smallComponents/DPcomputer28.vue'
 
 export default {
 	components: {
-		dataScreening,
-		carManagement,
-		intelligentSchedul,
-		dataAnalysis,
 		carsEZUIKitJs,
 		kaungEZUIKitJs,
+		DPcomputer1,
+		DPcomputer2,
+		DPcomputer3,
+		DPcomputer4,
+		DPcomputer5,
+		DPcomputer6,
+		DPcomputer7,
+		DPcomputer8,
+		DPcomputer9,
+		DPcomputer10,
+		DPcomputer11,
+		DPcomputer12,
+		DPcomputer13,
+		DPcomputer14,
+		DPcomputer15,
+		DPcomputer16,
+		DPcomputer17,
+		DPcomputer18,
+		DPcomputer19,
+		DPcomputer20,
+		DPcomputer21,
+		DPcomputer22,
+		DPcomputer23,
+		DPcomputer24,
+		DPcomputer25,
+		DPcomputer26,
+		DPcomputer27,
+		DPcomputer28,
 	},
 	data() {
 		return {
+			websocket: null,
+			websocketHeadBeatTimer:null,
 			//监控视频
 			iframeSrc:'',
       		defaultIframeSrc:'http://oa.gemho.cn:8088/808gps/open/player/video.html?lang=zh&channel=9&account=admin&password=admin&vehiIdno=',
@@ -73,13 +128,6 @@ export default {
 			currentTime:'',
 			//选择模块
 			selectModule:'', 
-			//各模块展示传值
-			isShow:{
-				dataScreening:false,
-				carManagement:false,
-				intelligentSchedul:false,
-				dataAnalysis:false,
-			},
 			//标题菜单数据
 			topSmallTitleLeftData:[],
 			topSmallTitleRightData:[],
@@ -91,15 +139,28 @@ export default {
 			monitorCover1Show:false,
 			//视频监控配置
 			videoSelectStyle:2,
+			//组件数据
+			allComponents:{
+				left:[],
+				center:[],
+				right:[],
+			},
 		}
 	},
 	mounted() {
 		this.loadData();
+		//右上角时钟
 		this.setNowTimes();
 		this.timer = setInterval(() => {
             this.setNowTimes();
         }, 1000)
-		window.addEventListener('message', this.handleMessage);
+		//开启WebSocket连接以及心跳
+		this.initWebSocket();
+		this.websocketHeadBeatTimer = setInterval(() => {
+			this.reconnect();
+		}, 20000)
+		//与嵌入的地图页面进行交互
+		//window.addEventListener('message', this.handleMessage);
 	},
 	methods: {
 		loadData() {
@@ -119,94 +180,111 @@ export default {
 						this.topSmallTitleRightData = rightTemporaryData;
 					}
 				})
-				//开启websocket
-				this.$refs.intelligentSchedulMethod.loadData3();
 			})
 		},
 		//选择展示模块
 		changeOver(item){
 			this.selectModule = item.componentName;
 			if(item.componentName == 'dataScreening'){
-				if(this.isShow.dataScreening == false){
-					this.$refs.dataScreeningMethod.loadData(true);
-					this.isShow.dataScreening = true;
-					this.isShow.carManagement = false;
-					this.isShow.intelligentSchedul = false;
-					this.isShow.dataAnalysis = false;
-				}else{
-					this.$refs.dataScreeningMethod.loadData(false);
-					this.isShow.dataScreening = false;
-				}
-				this.$refs.carManagementMethod.loadData(false);
-				this.$refs.intelligentSchedulMethod.loadData(false);
-				this.$refs.dataAnalysisMethod.loadData(false);
 				this.videoSelect1 = false;
 				this.kaungEZUIKitJsShow = false;
 				this.carsEZUIKitJsShow = false;
+				HttpReq.truckDispatching.screenTitleMenuQuery({status:1,pid:item.children,sort:'dsort'}).then((res) => {
+					if(res.code == 200){
+						let left1 = [];
+						let center1 = [];
+						let right1 = [];
+						res.data.content.forEach((item,index)=>{
+							if(item.pos == 'left'){
+								left1.push(item);
+							}else if(item.pos == 'right'){
+								right1.push(item);
+							}else if(item.pos == 'center'){
+								center1.push(item);
+							}
+						})
+						this.allComponents.left = left1;
+						this.allComponents.center = center1;
+						this.allComponents.right = right1;
+					}
+				})
 			}
 			if(item.componentName == 'carManagement'){
-				if(this.isShow.carManagement == false){
-					this.$refs.carManagementMethod.loadData(true);
-					this.isShow.carManagement = true;
-					this.isShow.dataScreening = false;
-					this.isShow.intelligentSchedul = false;
-					this.isShow.dataAnalysis = false;
-				}else{
-					this.$refs.carManagementMethod.loadData(false);
-					this.isShow.carManagement = false;
-				}
-				this.$refs.dataScreeningMethod.loadData(false);
-				this.$refs.intelligentSchedulMethod.loadData(false);
-				this.$refs.dataAnalysisMethod.loadData(false);
 				this.videoSelect1 = false;
 				this.kaungEZUIKitJsShow = false;
 				this.carsEZUIKitJsShow = false;
+				HttpReq.truckDispatching.screenTitleMenuQuery({status:1,pid:item.children,sort:'dsort'}).then((res) => {
+					if(res.code == 200){
+						let left1 = [];
+						let center1 = [];
+						let right1 = [];
+						res.data.content.forEach((item,index)=>{
+							if(item.pos == 'left'){
+								left1.push(item);
+							}else if(item.pos == 'right'){
+								right1.push(item);
+							}else if(item.pos == 'center'){
+								center1.push(item);
+							}
+						})
+						this.allComponents.left = left1;
+						this.allComponents.center = center1;
+						this.allComponents.right = right1;
+					}
+				})
 			}
 			if(item.componentName == 'intelligentSchedul'){
-				if(this.isShow.intelligentSchedul == false){
-					this.$refs.intelligentSchedulMethod.loadData(true);
-					this.isShow.intelligentSchedul = true;
-					this.isShow.dataScreening = false;
-					this.isShow.carManagement = false;
-					this.isShow.dataAnalysis = false;
-				}else{
-					this.$refs.intelligentSchedulMethod.loadData(false);
-					this.isShow.intelligentSchedul = false;
-				}
-				this.$refs.dataScreeningMethod.loadData(false);
-				this.$refs.carManagementMethod.loadData(false);
-				this.$refs.dataAnalysisMethod.loadData(false);
 				this.videoSelect1 = false;
 				this.kaungEZUIKitJsShow = false;
 				this.carsEZUIKitJsShow = false;
+				HttpReq.truckDispatching.screenTitleMenuQuery({status:1,pid:item.children,sort:'dsort'}).then((res) => {
+					if(res.code == 200){
+						let left1 = [];
+						let center1 = [];
+						let right1 = [];
+						res.data.content.forEach((item,index)=>{
+							if(item.pos == 'left'){
+								left1.push(item);
+							}else if(item.pos == 'right'){
+								right1.push(item);
+							}else if(item.pos == 'center'){
+								center1.push(item);
+							}
+						})
+						this.allComponents.left = left1;
+						this.allComponents.center = center1;
+						this.allComponents.right = right1;
+					}
+				})
 			}
 			if(item.componentName == 'dataAnalysis'){
-				if(this.isShow.dataAnalysis == false){
-					this.$refs.dataAnalysisMethod.loadData(true);
-					this.isShow.dataAnalysis = true;
-					this.isShow.dataScreening = false;
-					this.isShow.carManagement = false;
-					this.isShow.intelligentSchedul = false;
-				}else{
-					this.$refs.dataAnalysisMethod.loadData(false);
-					this.isShow.dataAnalysis = false;
-				}
-				this.$refs.dataScreeningMethod.loadData(false);
-				this.$refs.carManagementMethod.loadData(false);
-				this.$refs.intelligentSchedulMethod.loadData(false);
 				this.videoSelect1 = false;
 				this.kaungEZUIKitJsShow = false;
 				this.carsEZUIKitJsShow = false;
+				HttpReq.truckDispatching.screenTitleMenuQuery({status:1,pid:item.children,sort:'dsort'}).then((res) => {
+					if(res.code == 200){
+						let left1 = [];
+						let center1 = [];
+						let right1 = [];
+						res.data.content.forEach((item,index)=>{
+							if(item.pos == 'left'){
+								left1.push(item);
+							}else if(item.pos == 'right'){
+								right1.push(item);
+							}else if(item.pos == 'center'){
+								center1.push(item);
+							}
+						})
+						this.allComponents.left = left1;
+						this.allComponents.center = center1;
+						this.allComponents.right = right1;
+					}
+				})
 			}
 			if(item.componentName == 'backstage'){
-				this.isShow.dataScreening = false;
-				this.isShow.carManagement = false;
-				this.isShow.intelligentSchedul = false;
-				this.isShow.dataAnalysis = false;
-				this.$refs.dataScreeningMethod.loadData(false);
-				this.$refs.carManagementMethod.loadData(false);
-				this.$refs.intelligentSchedulMethod.loadData(false);
-				this.$refs.dataAnalysisMethod.loadData(false);
+				this.allComponents.left = [];
+				this.allComponents.center = [];
+				this.allComponents.right = [];
 				this.$nextTick(()=>{
 					let routeUrl = this.$router.resolve({
 						path: "/dashboard",
@@ -218,14 +296,9 @@ export default {
 				this.carsEZUIKitJsShow = false;
 			}
 			if(item.componentName == 'toVideoSurveillance'){
-				this.isShow.dataScreening = false;
-				this.isShow.carManagement = false;
-				this.isShow.intelligentSchedul = false;
-				this.isShow.dataAnalysis = false;
-				this.$refs.dataScreeningMethod.loadData(false);
-				this.$refs.carManagementMethod.loadData(false);
-				this.$refs.intelligentSchedulMethod.loadData(false);
-				this.$refs.dataAnalysisMethod.loadData(false);
+				this.allComponents.left = [];
+				this.allComponents.center = [];
+				this.allComponents.right = [];
 				if(this.videoSelect1 == false){
 					this.videoSelect1 = true;
 					this.lookFn2();
@@ -234,7 +307,6 @@ export default {
 					this.kaungEZUIKitJsShow = false;
 					this.carsEZUIKitJsShow = false;
 				}
-
 			}
 		},
 		//矿山监控
@@ -278,12 +350,75 @@ export default {
 			this.iframeSrc = '';
 			this.monitorCover1Show = false;
 		},
+
+
+		//初始化weosocket 
+        initWebSocket(){
+            //const wsuri = "ws://114.116.108.246:81/websocket/socketServer?userId="+userId;//连接地址，可加参数
+            const wsuri = process.env.VUE_APP_WS_API + "/" + 'pcBigScreen';
+            this.websocket = new WebSocket(wsuri); 
+            this.websocket.onopen = this.websocketonopen;
+            this.websocket.onerror = this.websocketonerror;
+            this.websocket.onmessage = this.websocketonmessage; 
+            this.websocket.onclose = this.websocketclose;
+            this.websocketonmessage();
+        },
+        //WebSocket连接成功
+        websocketonopen() {
+            console.log("WebSocket连接成功");
+        },
+        //WebSocket连接错误
+        websocketonerror(e) { 
+            console.log("WebSocket连接发生错误");
+        },
+        //WebSocket数据接收 
+        websocketonmessage(e){ 
+            //console.log("e",e);
+			if(e == undefined){
+				return
+			}else{
+				let obj1 = JSON.parse(e.data);
+                HttpReq.truckDispatching.recentNoticeAdd({noticeClass:obj1.fromUserId,flag:1,videoContent:obj1.contentText}).then((res) => {}).catch(function(error) { });
+			}  
+        }, 
+        //WebSocket数据发送 
+        websocketsend(agentData){
+            this.websocket.send(agentData); 
+        }, 
+        //WebSocket关闭 
+        websocketclose(e){
+            //console.log("connection closed (" + e.code + ")"); 
+            console.log("connection closed !"); 
+        },
+        //WebSocket重连
+		reconnect(){
+			var This=this;
+			if (this.websocket.readyState === 1) { // that.websock.readyState = 1 表示连接成功，可以立即发送信息
+				This.websocketonmessage();
+			} else if (this.websocket.readyState === 0) { // 表示正在连接，设置300ms后发送信息
+				setTimeout(function () {
+					This.websocketonmessage();
+				}, 300);
+			} else { // 连接未创建或者创建失败，则重新创建连接，并设置500ms后发送信息
+				This.initWebSocket();
+				setTimeout(function () {
+					This.websocketonmessage();
+				}, 500);
+			}
+		},
+
 	},
 	beforeDestroy(){
-		this.$refs.intelligentSchedulMethod.xintiaoCloseFn();
 		if(this.timer) {
 			clearInterval(this.timer);
+			this.timer = null;
+		}
+		if(this.websocketHeadBeatTimer) {
+			clearInterval(this.websocketHeadBeatTimer);
+			this.websocketHeadBeatTimer = null;
 		}
+		//页面销毁时关闭长连接
+		this.websocketclose();
     }
 }
 </script>
@@ -316,11 +451,40 @@ export default {
 	z-index: 3;
 }
 .content_view{
-	width: 100%;
+	width: 100vw;
 	height: 94vh;
 	overflow: hidden;
 	position: relative;
 	bottom: 0px;
+	display: flex;
+	justify-content: space-between;
+}
+.content_view_left{
+	width: 20vw;
+	height: 94vh;
+	overflow-y: scroll;
+	z-index: 3;
+}
+.content_view_left::-webkit-scrollbar {
+  display: none;
+}
+.content_view_center{
+	width: 60vw;
+    height: 23.5vh;
+	overflow: hidden;
+	position: absolute;
+	left: 20vw;
+	bottom: 0px;
+	z-index: 3;
+}
+.content_view_right{
+	width: 20vw;
+	height: 94vh;
+	overflow-y: scroll;
+	z-index: 3;
+}
+.content_view_right::-webkit-scrollbar {
+  display: none;
 }
 .videoSelectView{
 	position: absolute;