chengdandan
/
TransFlow
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

20230222

This commit is contained in:
chengdandan 2023-02-22 15:56:46 +08:00
parent 407c084e90 81c9816066
commit 17de0fe53e
2 changed files with 78 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/target/typeChart.vue
View File

@ -14,7 +14,7 @@
</div>
<div>
<div>
{{ typeValue.time }}
{{ typeValue.time ? typeValue.time : '' }}
</div>
</div>
</el-card>
@ -31,7 +31,7 @@
<div style="font-size: 30px; font-weight: bold" v-if="title == '速度'">
<span style="font-size: 15px;">速度</span><br />
<!-- <span style="font-size: 30px; font-weight: bold">{{ typeValue.speed }}</span> -->
<span style="font-size: 30px; font-weight: bold">{{ dataArr[0].speed }}</span>
<span style="font-size: 30px; font-weight: bold">{{ dataArr[0].speed }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '流量'">
<span style="font-size: 15px;">流量</span><br />
@ -39,7 +39,7 @@
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '车头时距'">
<span style="font-size: 15px;">车头时距</span><br />
<span style="font-size: 30px; font-weight: bold">{{ dataArr[0].headway}}</span>
<span style="font-size: 30px; font-weight: bold">{{ dataArr[0].headway }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'">
<span style="font-size: 15px;">排队数</span><br />
@ -55,7 +55,7 @@
</div>
<div>
<div>
{{ dataArr[0].time }}
{{ dataArr[0].time ? dataArr[0].time : '' }}
</div>
</div>
</div>
@ -70,10 +70,10 @@
<span
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
></span>
<span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格'+'-'+triggerType }}</span>
<span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' + triggerType }}</span>
</div>
<div class="tableTime">
{{ dataArr[0].time }}
{{ dataArr[0].time ? dataArr[0].time : '' }}
</div>
</div>
<div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
@ -180,7 +180,7 @@ export default {
// 监听触发数据
dataArr: {
handler(newVal) {
console.log("dataArr",newVal)
console.log('dataArr', newVal);
},
immediate: true

201
src/views/bounced/dataBoard.vue
View File

@ -3,13 +3,17 @@
<el-empty v-show="componentList.length == 0" :image-size="400"></el-empty>
<!-- <p class="title" style="margin-bottom: 20px;font-size: 20px;font-weight: 400;">数据看板</p> -->
<el-scrollbar class="scrollbar">
<div class="dataBoard" ref='dataBoard' v-if="activeName == 'second'">
<div class="dataBoard" ref="dataBoard" v-if="activeName == 'second'">
<!-- 断面 -->
<div class="plate1" ref="plate1">
<div :class="sectionData.length <= 2 ? 'sectionBox' : 'section'" ref="section"
v-for="(s, i) in sectionData" :key="s.analogAreaComponentId">
<div
:class="sectionData.length <= 2 ? 'sectionBox' : 'section'"
ref="section"
v-for="(s, i) in sectionData"
:key="s.analogAreaComponentId"
>
<template>
<div ref="sectionContent">
<div ref="sectionContent" >
<div>
<p class="board-title">
<span>{{ s.title }}</span>
@ -58,7 +62,7 @@
<!-- 详情框 -->
</div>
</template>
<!-- :data="triggerList.length != 0 ? tripHandle(o) : tableData" -->
<!-- :data="triggerList.length != 0 ? tripHandle(o) : tableData" -->
<script>
import typeChart from '../../components/target/typeChart.vue';
import OD from '../../components/target/OD.vue';
@ -99,10 +103,11 @@ export default {
default() {
return [];
}
},
}
},
data() {
return {
acticveName: [],
title1: '01断面',
title2: '01区域',
dialogVisible: false,
@ -321,8 +326,6 @@ export default {
}
],
idVal: '',
//组件数组
componentList: [],
@ -331,16 +334,12 @@ export default {
sectionData: [],
// 单个区域或者断面的表格触发数据
tableList: [],
// 路线数据
headWay: [],
tripData: [],
sectionArr: [],
@ -349,62 +348,32 @@ export default {
typeTimeMode: {},
// 周期时刻的数值看板展示
typeCycleTimeData: {},
typeCycleStatistics: {},
nw:'1'
typeCycleStatistics: {}
};
},
created() {
this.idVal = this.$route.query.id;
this.sectionData=[]
this.sectionArr=[]
// if(this.nw=='second'){
// }
// this.getNEW()
},
methods: {
getNEW(){
getComponentSection({ VideoId: this.$route.query.id }).then((res) => {
getComponentSection({ VideoId: this.idVal }).then(res => {
if (res.data.code == 200) {
this.componentList = res.data.data
this.siftData()
// 处理获取过来的数据
// this.componentList.forEach((val) => {
// this.sectionArr.push(val.combinationName);
// this.sectionArr = Array.from(new Set(this.sectionArr));
// });
// this.sectionData = this.sectionArr.map((item) => {
// item = { title: item, children: [] };
// this.componentList.forEach((val) => {
// if (item.title == val.combinationName) {
// item.children.push(val);
// }
// });
// return item;
// });
console.log(this.sectionData, '455');
} else if (res.data.code == 404) {
this.componentList = res.data.data;
this.siftData();
}
});
},
},
methods: {
siftData() {
this.sectionArr=[]
this.sectionData=[]
this.componentList.forEach((val) => {
this.componentList.forEach(val => {
this.sectionArr.push(val.combinationName);
this.sectionArr = Array.from(new Set(this.sectionArr));
});
this.sectionData = this.sectionArr.map((item) => {
if (item.children == undefined) {
item = { title: item, children: [] };
}
this.componentList.forEach((val) => {
this.sectionData = this.sectionArr.map(item => {
item = { title: item, children: [] };
this.acticveName=[]
this.componentList.forEach(val => {
if (item.title == val.combinationName) {
item.children.push(val);
}
this.acticveName.push(val.analogAreaComponentId)
});
return item;
});
@ -416,93 +385,58 @@ export default {
let downPulls1 = document.querySelectorAll('.downPull1');
// 断面的小图标
downPulls1[i].dataset.num++;
if (downPulls1[i].dataset.num % 2 == 0) {
downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';
sections[i].style.height = 'auto';
// sections[i].style.height = 'auto';
if (sectionBox[i] != undefined) {
sectionBox[i].style.height = 'auto';
// sectionBox[i].style.height = 'auto';
}
} else {
downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
sections[i].style.height = '500px';
// sections[i].style.height = '500px';
if (sectionBox[i] != undefined) {
sectionBox[i].style.height = '48vh'
// sectionBox[i].style.height = '48vh';
}
}
},
channge(oldVal,newVal){
if (newVal == "second") {
this.getNEW()
}else if(oldVal == "second"){
this.getNEW()
}
}
}
// 触发数据的类型数值
},
mounted() {
},
mounted() {},
watch: {
// activeName: {
// handler(newVal) {
// console.log("newVal",newVal)
// if (newVal == "second") {
// // getComponentSection({ VideoId: this.$route.query.id }).then(res => {
// // if (res.data.code == 200) {
// // this.componentList = res.data.data;
// // this.siftData();
// // } else if (res.data.code == 404) {
// // }
// // });
// // this.nw=newVal
// this.getNEW()
// }
// },
// immediate: true
// },
activeName:'channge',
// 触发的原始数据
triggerData: {
handler(newVal, oldVal) {
},
handler(newVal, oldVal) {},
immediate: true
},
// 处理过的触发数据
triggerListData: {
handler(newVal) {
this.triggerList = newVal
this.triggerList = newVal;
// 触发数据
// console.log(newVal, 'triggerlistData');
this.componentList.forEach(ele => {
if (ele.trigger == undefined && ele.timeMode == '触发') {
ele.trigger = []
ele.trigger = [];
}
newVal.forEach(item => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {
if (ele.trigger.length == 10) {
ele.trigger.pop()
ele.trigger.pop();
} else {
item.time = item.time.split('.')[0]
item.time = item.time.split('.')[0];
// 该时间的触发数据
if (item.type_data != null) {
// console.log(item,'461461');
this.typeTimeMode = item
}
ele.trigger.unshift(item)
ele.trigger.unshift(item);
}
}
})
})
// console.log(this.sectionData, '触发的筛选数据');
});
});
},
immediate: true
},
@ -514,24 +448,27 @@ export default {
if (newVal.length != 0) {
this.componentList.forEach(ele => {
if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
ele.cycleTimeData = []
ele.cycleTimeData = [];
}
newVal.forEach(item => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻' && ele.analogAreaGraphId == item.graphical_id) {
if (
ele.analogAreaComponentId == item.component_id &&
ele.timeMode == '周期时刻' &&
ele.analogAreaGraphId == item.graphical_id
) {
if (ele.cycleTimeData.length == 10) {
ele.cycleTimeData.slice(ele.cycleTimeData.length - 1, 0)
ele.cycleTimeData.slice(ele.cycleTimeData.length - 1, 0);
} else {
item.time = item.time.split('.')[0]
item.time = item.time.split('.')[0];
if (item.type_data != null) {
// 周期时刻的类型数据
this.typeCycleTimeData = item
this.typeCycleTimeData = item;
}
ele.cycleTimeData.unshift(item)
ele.cycleTimeData.unshift(item);
}
}
})
})
console.log(this.sectionData, '455');
});
});
}
},
immediate: true
@ -552,19 +489,14 @@ export default {
ele.cycleStatistics = [];
}
newVal.forEach(item => {
if (
ele.analogAreaComponentId == item.component_id &&
ele.timeMode == '周期统计'
) {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期统计') {
if (ele.cycleStatistics.length == 10) {
ele.cycleStatistics.pop();
} else {
item.time = item.time.split('.')[0]
item.time = item.time.split('.')[0];
if (item.type_data != null) {
//周期时刻的类型数据
this.typeCycleStatistics = item;
}
ele.cycleStatistics.unshift(item);
}
@ -572,14 +504,24 @@ export default {
});
});
}
console.log(this.sectionData, '周期统计筛选数据');
}
},
},
}
// activeName: {
// handler(newVal) {
// if (newVal == "second") {
// getComponentSection({ VideoId: this.$route.query.id }).then(res => {
// if (res.data.code == 200) {
// this.componentList = res.data.data;
// this.siftData();
// } else if (res.data.code == 404) {
// }
// });
// }
// },
// immediate: true
// }
}
};
</script>
@ -599,7 +541,7 @@ export default {
/deep/ .el-scrollbar__view {
display: inline-block !important;
width: 100%
width: 100%;
}
/deep/ .el-scrollbar__wrap {
@ -613,7 +555,6 @@ export default {
.dataBoard {
height: 100%;
}
}
.dataBoard .region,
@ -622,7 +563,7 @@ export default {
border: 1px solid #e4e7ed;
box-sizing: border-box;
padding: 15px;
height: 500px;
height: auto;
position: relative;
transition: all 1s;
overflow: hidden;
@ -630,7 +571,7 @@ export default {
.dataBoard .sectionBox {
width: 100%;
height: 48vh;
height: auto;
border: 1px solid #e4e7ed;
box-sizing: border-box;
padding: 15px;
@ -703,4 +644,4 @@ export default {
.active {
transition: all 0.5s linear;
}
</style>
</style>