Commit 5337e20f authored by xxx's avatar xxx

大屏配置完成

parent 53422a8a
......@@ -57,7 +57,7 @@ export default {
this.recentNoticeData = res.data.content;
};
})
},10000)
},5000)
},
//播放语音
......
......@@ -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;
}
......
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment