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

20230221

This commit is contained in:
chengdandan 2023-02-21 21:49:51 +08:00
parent e3a50535e4
commit 3f5f346de8
3 changed files with 163 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/chart/lineChart.vue
View File

@ -255,13 +255,14 @@ export default {
return ele.in_flow + ele.out_flow; return ele.in_flow + ele.out_flow;
}); });
} else if (this.title == '车头时距') { } else if (this.title == '车头时距') {
console.log("车头时距",newVal)
this.tooltip = { this.tooltip = {
formatter: '{a} {b}:{c}/s', formatter: '{a} {b}:{c}/s',
show: true, show: true,
confine: true confine: true
}; };
this.series[0].data = newVal.map(val => { this.series[0].data = newVal.map(val => {
return val.ave_speed; return val.headway;
}); });
} else if (this.title == '排队数') { } else if (this.title == '排队数') {
this.series[0].data = newVal.map(val => { this.series[0].data = newVal.map(val => {
@ -272,7 +273,9 @@ export default {
return val.n_stay; return val.n_stay;
}); });
} else if (this.title == '延误') { } else if (this.title == '延误') {
this.series[0].data = newVal.map(val => {}); this.series[0].data = newVal.map(val => {
return val.ave_delay;
});
} else if (this.title == '拥堵') { } else if (this.title == '拥堵') {
this.series[0].data = newVal.map(val => {}); this.series[0].data = newVal.map(val => {});
} }

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

@ -30,27 +30,32 @@
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '速度'"> <div style="font-size: 30px; font-weight: bold" v-if="title == '速度'">
<span style="font-size: 15px;">速度</span><br /> <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">{{ typeValue.speed }}</span> -->
<span style="font-size: 30px; font-weight: bold">{{ dataArr[0].speed }}</span>
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '流量'"> <div style="font-size: 30px; font-weight: bold" v-if="title == '流量'">
<span style="font-size: 15px;">流量</span><br /> <span style="font-size: 15px;">流量</span><br />
<span style="font-size: 30px; font-weight: bold">{{ typeValue.flow }}</span> <span style="font-size: 30px; font-weight: bold">{{ dataArr[0].flow }}</span>
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '车头时距'"> <div style="font-size: 30px; font-weight: bold" v-if="title == '车头时距'">
<span style="font-size: 15px;">车头时距</span><br /> <span style="font-size: 15px;">车头时距</span><br />
<span style="font-size: 30px; font-weight: bold">{{ typeValue.heavy }}</span> <span style="font-size: 30px; font-weight: bold">{{ dataArr[0].headway}}</span>
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'"> <div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'">
<span style="font-size: 15px;">排队数</span> <span style="font-size: 15px;">排队数</span>
<span style="font-size: 30px; font-weight: bold">{{ typeValue.n_queue }}</span> <span style="font-size: 30px; font-weight: bold">{{ dataArr[0].n_queue }}</span>
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '检测数'"> <div style="font-size: 30px; font-weight: bold" v-if="title == '检测数'">
<span style="font-size: 15px;">检测数</span> <span style="font-size: 15px;">检测数</span>
<span style="font-size: 30px; font-weight: bold">{{ typeValue.n_stay }}</span> <span style="font-size: 30px; font-weight: bold">{{ dataArr[0].n_stay }}</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '延误'">
<span style="font-size: 15px;">延误</span>
<span style="font-size: 30px; font-weight: bold">{{ dataArr[0].ave_delay }}</span>
</div> </div>
<div> <div>
<div> <div>
{{ typeValue.time }} {{ dataArr[0].time }}
</div> </div>
</div> </div>
</div> </div>
@ -68,7 +73,7 @@
<span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' }}</span> <span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' }}</span>
</div> </div>
<div class="tableTime"> <div class="tableTime">
{{ typeValue.time }} {{ dataArr[0].time }}
</div> </div>
</div> </div>
<div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed"> <div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">

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

@ -3,15 +3,11 @@
<el-empty v-show="componentList.length == 0" :image-size="400"></el-empty> <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> --> <!-- <p class="title" style="margin-bottom: 20px;font-size: 20px;font-weight: 400;">数据看板</p> -->
<el-scrollbar class="scrollbar"> <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="plate1" ref="plate1">
<div <div :class="sectionData.length <= 2 ? 'sectionBox' : 'section'" ref="section"
:class="sectionData.length <= 2 ? 'sectionBox' : 'section'" v-for="(s, i) in sectionData" :key="s.analogAreaComponentId">
ref="section"
v-for="(s, i) in sectionData"
:key="s.analogAreaComponentId"
>
<template> <template>
<div ref="sectionContent"> <div ref="sectionContent">
<div> <div>
@ -21,27 +17,37 @@
<span class="downPull1" data-num="1" @click="sectionHandle(i)"></span> <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span>
</div> </div>
<div v-for="o in s.children" :key="o.analogAreaComponentId"> <div v-for="o in s.children" :key="o.analogAreaComponentId">
<OD
v-if="o.componentName.includes('OD')" <!-- <OD v-if="o.componentName.includes('OD')" :pageType="o.graphicType" triggerType="触发"
:pageType="o.graphicType" :componentName="o.componentName" :echartArr="o.presentationForm"
triggerType="触发" :dataArr="o.trigger" :title="o.componentName.split('_')[0]"
:componentName="o.componentName" :chartName='o.combinationName' />
:echartArr="o.presentationForm" <typeChart v-else :pageType="o.graphicType" :triggerType="o.timeMode"
:dataArr="o.trigger"
:title="o.componentName.split('_')[0]"
:chartName="o.combinationName"
/>
<typeChart
v-else
:pageType="o.graphicType"
:triggerType="o.timeMode"
:componentName="o.componentName" :componentName="o.componentName"
:dataArr="o.timeMode == '触发' ? o.trigger : o.cycleTimeData" :dataArr="o.timeMode == '触发' ? o.trigger : o.cycleTimeData"
:echartArr="o.presentationForm" :echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
:title="o.componentName.split('_')[0]" :chartName='o.combinationName'
:chartName="o.combinationName" :typeValue="o.timeMode == '触发' ? typeValue : typeCycleTimeData" /> -->
:typeValue="o.timeMode == '触发' ? typeValue : typeCycleTimeData" <OD v-if="o.componentName.includes('OD')" :pageType="o.graphicType" triggerType="触发"
/> :componentName="o.componentName" :echartArr="o.presentationForm"
:dataArr="o.trigger" :title="o.componentName.split('_')[0]"
:chartName="o.combinationName" />
<!--触发的组件 -->
<typeChart v-if="o.timeMode === '触发'" :pageType="o.graphicType" :triggerType="o.timeMode"
:componentName="o.componentName" :dataArr="o.trigger"
:echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
:chartName="o.combinationName" :typeValue="typeValue" />
<typeChart v-if="o.timeMode === '周期时刻'" :pageType="o.graphicType"
:triggerType="o.timeMode" :componentName="o.componentName"
:dataArr="o.cycleTimeData" :echartArr="o.presentationForm"
:title="o.componentName.split('_')[0]" :chartName="o.combinationName"
:typeValue="typeCycleTimeData" />
<!-- 周期统计的组件 -->
<typeChart v-if="o.timeMode === '周期统计'" :pageType="o.graphicType"
:triggerType="o.timeMode" :componentName="o.componentName"
:dataArr="o.cycleStatistics" :echartArr="o.presentationForm"
:title="o.componentName.split('_')[0]" :chartName="o.combinationName"
:typeValue="typeCycleStatistics" />
</div> </div>
<!-- :data="triggerList.length != 0 ? triggerList : tableData" --> <!-- :data="triggerList.length != 0 ? triggerList : tableData" -->
</div> </div>
@ -51,9 +57,9 @@
</div> </div>
</el-scrollbar> </el-scrollbar>
<!-- 详情框 --> <!-- 详情框 -->
</div> </div>
</template> </template>
<!-- :data="triggerList.length != 0 ? tripHandle(o) : tableData" --> <!-- :data="triggerList.length != 0 ? tripHandle(o) : tableData" -->
<script> <script>
import typeChart from '../../components/target/typeChart.vue'; import typeChart from '../../components/target/typeChart.vue';
import OD from '../../components/target/OD.vue'; import OD from '../../components/target/OD.vue';
@ -94,7 +100,7 @@ export default {
default() { default() {
return []; return [];
} }
} },
}, },
data() { data() {
return { return {
@ -316,6 +322,8 @@ export default {
} }
], ],
idVal: '', idVal: '',
//组件数组 //组件数组
componentList: [], componentList: [],
@ -324,12 +332,16 @@ export default {
sectionData: [], sectionData: [],
// 单个区域或者断面的表格触发数据 // 单个区域或者断面的表格触发数据
tableList: [], tableList: [],
// 路线数据 // 路线数据
headWay: [], headWay: [],
tripData: [], tripData: [],
sectionArr: [], sectionArr: [],
@ -337,16 +349,17 @@ export default {
//触发的类型数值看板显示 //触发的类型数值看板显示
typeValue: {}, typeValue: {},
// 周期时刻的数值看板展示 // 周期时刻的数值看板展示
typeCycleTimeData: {} typeCycleTimeData: {},
typeCycleStatistics:{}
}; };
}, },
created() { created() {
this.idVal = this.$route.query.id; this.idVal = this.$route.query.id;
getComponentSection({ VideoId: this.idVal }).then(res => { getComponentSection({ VideoId: this.idVal }).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
console.log(res.data.data, '11111111111111111'); console.log(res.data.data, '11111111111111111');
this.componentList = res.data.data; this.componentList = res.data.data
this.siftData(); this.siftData()
// 处理获取过来的数据 // 处理获取过来的数据
// this.componentList.forEach((val) => { // this.componentList.forEach((val) => {
// this.sectionArr.push(val.combinationName); // this.sectionArr.push(val.combinationName);
@ -365,16 +378,18 @@ export default {
} else if (res.data.code == 404) { } else if (res.data.code == 404) {
} }
}); });
}, },
methods: { methods: {
siftData() { siftData() {
this.componentList.forEach(val => { this.componentList.forEach((val) => {
this.sectionArr.push(val.combinationName); this.sectionArr.push(val.combinationName);
this.sectionArr = Array.from(new Set(this.sectionArr)); this.sectionArr = Array.from(new Set(this.sectionArr));
}); });
this.sectionData = this.sectionArr.map(item => { this.sectionData = this.sectionArr.map((item) => {
item = { title: item, children: [] }; item = { title: item, children: [] };
this.componentList.forEach(val => { this.componentList.forEach((val) => {
if (item.title == val.combinationName) { if (item.title == val.combinationName) {
item.children.push(val); item.children.push(val);
} }
@ -396,46 +411,61 @@ export default {
if (sectionBox[i] != undefined) { if (sectionBox[i] != undefined) {
sectionBox[i].style.height = 'auto'; sectionBox[i].style.height = 'auto';
} }
} else { } else {
downPulls1[i].style.cssText = 'transition: all 0.5s linear;'; downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
sections[i].style.height = '500px'; sections[i].style.height = '500px';
if (sectionBox[i] != undefined) { if (sectionBox[i] != undefined) {
sectionBox[i].style.height = '48vh'; sectionBox[i].style.height = '48vh'
} }
} }
} },
// 触发数据的类型数值 // 触发数据的类型数值
},
mounted() {
}, },
mounted() {},
watch: { watch: {
// 触发的原始数据 // 触发的原始数据
triggerData: { triggerData: {
handler(newVal, oldVal) {}, handler(newVal, oldVal) {
},
immediate: true immediate: true
}, },
// 处理过的触发数据 // 处理过的触发数据
triggerListData: { triggerListData: {
handler(newVal) { handler(newVal) {
this.triggerList = newVal; this.triggerList = newVal
// 触发数据
console.log(newVal, 'triggerlistData');
this.componentList.forEach(ele => { this.componentList.forEach(ele => {
if (ele.trigger == undefined && ele.timeMode == '触发') { if (ele.trigger == undefined && ele.timeMode == '触发') {
ele.trigger = []; ele.trigger = []
} }
newVal.forEach(item => { newVal.forEach(item => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') { if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {
if (ele.trigger.length == 10) { if (ele.trigger.length == 10) {
ele.trigger.pop(); ele.trigger.pop()
} else {
// 该时间的触发数据
this.typeValue = item;
ele.trigger.unshift(item); } else {
item.time = item.time.split('.')[0]
// 该时间的触发数据
if (item.type_data != null) {
// console.log(item,'461461');
this.typeValue = item
}
ele.trigger.unshift(item)
} }
} }
}); })
}); })
}, },
immediate: true immediate: true
}, },
@ -447,38 +477,86 @@ export default {
if (newVal.length != 0) { if (newVal.length != 0) {
this.componentList.forEach(ele => { this.componentList.forEach(ele => {
if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') { if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
ele.cycleTimeData = []; ele.cycleTimeData = []
} }
newVal.forEach(item => { newVal.forEach(item => {
if ( if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻' && ele.analogAreaGraphId == item.graphical_id) {
ele.analogAreaComponentId == item.component_id &&
ele.timeMode == '周期时刻' &&
ele.analogAreaGraphId == item.graphical_id
) {
if (ele.cycleTimeData.length == 10) { if (ele.cycleTimeData.length == 10) {
ele.cycleTimeData.slice(ele.cycleTimeData.length - 1, 0); ele.cycleTimeData.slice(ele.cycleTimeData.length-1,0)
} else { } else {
// if (item.type_data != null) { 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'); console.log(this.sectionData, '455');
} }
}, },
immediate: true immediate: true
}, },
// 周期统计数据 // 周期统计数据
// cycleStatistics:{
// handler(newVal){
// console.log(newVal,'周期统计');
// }
// }
cycleStatistics: { cycleStatistics: {
handler(newVal) { handler(newVal) {
console.log(newVal, '周期统计'); console.log(newVal, '周期统计');
if (newVal.length != 0) {
this.componentList.forEach(ele => {
if (ele.cycleStatistics == undefined && ele.timeMode == '周期统计') {
ele.cycleStatistics = [];
}
newVal.forEach(item => {
if (
ele.analogAreaComponentId == item.component_id &&
ele.timeMode == '周期统计'
) {
if (ele.cycleStatistics.length == 10) {
ele.cycleStatistics.pop();
} else {
item.time = item.time.split('.')[0]
if (item.type_data != null) {
//周期时刻的类型数据
this.typeCycleStatistics = item;
}
ele.cycleStatistics.unshift(item);
}
}
});
});
}
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> </script>
@ -498,7 +576,7 @@ export default {
/deep/ .el-scrollbar__view { /deep/ .el-scrollbar__view {
display: inline-block !important; display: inline-block !important;
width: 100%; width: 100%
} }
/deep/ .el-scrollbar__wrap { /deep/ .el-scrollbar__wrap {
@ -512,6 +590,7 @@ export default {
.dataBoard { .dataBoard {
height: 100%; height: 100%;
} }
} }
.dataBoard .region, .dataBoard .region,