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;