大屏配置完成

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

@@ -57,7 +57,7 @@ export default {
                         this.recentNoticeData = res.data.content;
                     };
                 })
-            },10000)
+            },5000)
 
         },
         //播放语音

src/views/MLargeScreen/index.vue

@@ -22,7 +22,7 @@
 			<div @click="lookFn1()" :class="videoSelectStyle == 1 ? 'videoSelectStyle1' : ''">矿山视频监控</div>
 		</div>
 		<!-- 内容 -->
-		<div class="content_view">
+		<div class="content_view" v-if="content_view_Show">
 			<div class="content_view_left">
 				<components :is="item.componentName" v-for="(item,index) in allComponents.left" :key="index"></components>
 			</div>
@@ -145,6 +145,15 @@ export default {
 				center:[],
 				right:[],
 			},
+			//各模块展示
+			isShow:{
+				dataScreening:false,
+				carManagement:false,
+				intelligentSchedul:false,
+				dataAnalysis:false,
+			},
+			//内容区域展示
+			content_view_Show:false,
 		}
 	},
 	mounted() {
@@ -186,105 +195,162 @@ export default {
 		changeOver(item){
 			this.selectModule = item.componentName;
 			if(item.componentName == 'dataScreening'){
+				if(this.isShow.dataScreening == false){
+					this.isShow.dataScreening = true;
+					this.content_view_Show = true;
+					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;
+						}
+					})
+				}else{
+					this.isShow.dataScreening = false;
+					this.content_view_Show = false;
+					this.allComponents.left = [];
+					this.allComponents.center = [];
+					this.allComponents.right = [];
+				}
+				this.isShow.carManagement = false;
+				this.isShow.intelligentSchedul = false;
+				this.isShow.dataAnalysis = 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.isShow.carManagement = true;
+					this.content_view_Show = true;
+					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;
+						}
+					})
+				}else{
+					this.isShow.carManagement = false;
+					this.content_view_Show = false;
+					this.allComponents.left = [];
+					this.allComponents.center = [];
+					this.allComponents.right = [];
+				}
+				this.isShow.dataScreening = false;
+				this.isShow.intelligentSchedul = false;
+				this.isShow.dataAnalysis = 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.isShow.intelligentSchedul = true;
+					this.content_view_Show = true;
+					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;
+						}
+					})
+				}else{
+					this.isShow.intelligentSchedul = false;
+					this.content_view_Show = false;
+					this.allComponents.left = [];
+					this.allComponents.center = [];
+					this.allComponents.right = [];
+				}
+				this.isShow.dataScreening = false;
+				this.isShow.carManagement = false;
+				this.isShow.dataAnalysis = 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.isShow.dataAnalysis = true;
+					this.content_view_Show = true;
+					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;
+						}
+					})
+				}else{
+					this.isShow.dataAnalysis = false;
+					this.content_view_Show = false;
+					this.allComponents.left = [];
+					this.allComponents.center = [];
+					this.allComponents.right = [];
+				}
+				this.isShow.dataScreening = false;
+				this.isShow.carManagement = false;
+				this.isShow.intelligentSchedul = 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.allComponents.left = [];
 				this.allComponents.center = [];
 				this.allComponents.right = [];
+				this.content_view_Show = false;
 				this.$nextTick(()=>{
 					let routeUrl = this.$router.resolve({
 						path: "/dashboard",
@@ -296,9 +362,14 @@ 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.allComponents.left = [];
 				this.allComponents.center = [];
 				this.allComponents.right = [];
+				this.content_view_Show = false;
 				if(this.videoSelect1 == false){
 					this.videoSelect1 = true;
 					this.lookFn2();
@@ -452,7 +523,7 @@ export default {
 }
 .content_view{
 	width: 100vw;
-	height: 94vh;
+	height: 96vh;
 	overflow: hidden;
 	position: relative;
 	bottom: 0px;
@@ -461,7 +532,7 @@ export default {
 }
 .content_view_left{
 	width: 20vw;
-	height: 94vh;
+	height: 96vh;
 	overflow-y: scroll;
 	z-index: 3;
 }
@@ -474,12 +545,12 @@ export default {
 	overflow: hidden;
 	position: absolute;
 	left: 20vw;
-	bottom: 0px;
+	bottom: 2vh;
 	z-index: 3;
 }
 .content_view_right{
 	width: 20vw;
-	height: 94vh;
+	height: 96vh;
 	overflow-y: scroll;
 	z-index: 3;
 }

src/views/system/dataDictionary/largeScreenMenuDispose/index.vue

@@ -11,6 +11,7 @@
 							<el-table :data="tableData" v-loading="loading" border :row-class-name="tableRowClassName" height="75vh" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
 								<el-table-column prop="title" label="标题" align="center"></el-table-column>
 								<el-table-column prop="componentName" label="组件名称" align="center"></el-table-column>
+								<el-table-column prop="pos" label="位置" align="center" :formatter="posChange"></el-table-column>
 								<el-table-column prop="dsort" label="排序" align="center"></el-table-column>
 								<el-table-column prop="status" label="状态" align="center" :formatter="statusChange"></el-table-column>
 								<el-table-column label="操作" align="center" fixed="right" width="200">
@@ -28,6 +29,23 @@
 		<!-- 表单渲染 -->
 		<el-dialog append-to-body :close-on-click-modal="true" :before-close="cancelForm" :visible.sync="form.visible" :title="form.title" width="700px">
 			<el-form :model="form.item" ref="form1" :inline="true" size="small" label-width="150px">
+				<el-form-item label="所属模块" prop="pid" v-if="form.item.pid != 0">
+					<el-select v-model="form.item.pid" placeholder="请选择所属模块" style="width:280px;">
+						<el-option label="数据总览" value="1"></el-option>
+						<el-option label="车辆管理" value="2"></el-option>
+						<el-option label="智能调度" value="3"></el-option>
+						<el-option label="数据分析" value="4"></el-option>
+					</el-select>
+				</el-form-item>
+				<el-form-item label="位置" prop="pos" v-if="form.item.pid != 0 && form.item.pos != 'center'">
+					<el-select v-model="form.item.pos" placeholder="请选择位置" style="width:280px;">
+						<el-option label="左侧" value="left"></el-option>
+						<el-option label="右侧" value="right"></el-option>
+					</el-select>
+				</el-form-item>
+				<el-form-item label="排序" prop="dsort">
+					<el-input-number v-model="form.item.dsort"></el-input-number>
+				</el-form-item>
                 <el-form-item label="状态" prop="status">
 					<el-select v-model="form.item.status" placeholder="请选择状态" style="width:280px;">
 						<el-option label="显示" value="1"></el-option>
@@ -69,10 +87,30 @@ export default {
 	},
 	methods: {
 		loadData() {
-			//获取大屏顶部标题
+			//获取大屏顶部大标题
 			HttpReq.truckDispatching.screenTitleMenuQuery({size:9999,pid:0,sort:'dsort'}).then((res1) => {
 				if(res1.code == 200){
-					this.tableData = res1.data.content;
+					let alltableData = [];
+					res1.data.content.forEach((item,index)=>{
+						if(item.children){
+							let sonData = {...item};
+							sonData.children = [];
+							//获取对应子标题
+							HttpReq.truckDispatching.screenTitleMenuQuery({size:9999,pid:item.children,sort:'dsort'}).then((res2) => {
+								if(res2.code == 200){
+									sonData.children = res2.data.content;
+									alltableData.push(sonData);
+									this.tableData = alltableData;
+								}else{
+									return
+								}
+							})
+						}else{
+							alltableData.push(item);
+							this.tableData = alltableData;
+						}
+					})
+					
 				}
 			})
 
@@ -114,11 +152,14 @@ export default {
 		reqUpdateItem(form, item){
 			let lastData = {...item};
 			lastData.id = this.alarmTimeId;
+			if(lastData.children){
+				delete lastData.children;
+			}
 			HttpReq.truckDispatching.screenTitleMenuUpdate(lastData).then((res) => {
 				form.visible = false;
 				if(res.code == 200){
 					this.$notify({
-						title: '菜单配置修改成功！',
+						title: '大屏配置修改成功！',
 						type: 'success',
 						duration: 2500
 					});
@@ -137,7 +178,11 @@ export default {
         //组件状态展示修改
         statusChange(row){
             return row.status == '1' ? '显示' : '隐藏';
-        }
+        },
+		//组件位置展示
+		posChange(row){
+			return row.pos == 'left' ? '左侧' : row.pos == 'right' ? '右侧' : row.pos == 'center' ? '中间' : '';
+		}
 	}
 }
 </script>