20230221
This commit is contained in:
parent
e3a50535e4
commit
3f5f346de8
|
|
@ -255,13 +255,14 @@ export default {
|
|||
return ele.in_flow + ele.out_flow;
|
||||
});
|
||||
} else if (this.title == '车头时距') {
|
||||
console.log("车头时距",newVal)
|
||||
this.tooltip = {
|
||||
formatter: '{a} {b}:{c}/s',
|
||||
show: true,
|
||||
confine: true
|
||||
};
|
||||
this.series[0].data = newVal.map(val => {
|
||||
return val.ave_speed;
|
||||
return val.headway;
|
||||
});
|
||||
} else if (this.title == '排队数') {
|
||||
this.series[0].data = newVal.map(val => {
|
||||
|
|
@ -272,7 +273,9 @@ export default {
|
|||
return val.n_stay;
|
||||
});
|
||||
} 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 == '拥堵') {
|
||||
this.series[0].data = newVal.map(val => {});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,27 +30,32 @@
|
|||
</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">{{ 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 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.flow }}</span>
|
||||
<span style="font-size: 30px; font-weight: bold">{{ dataArr[0].flow }}</span>
|
||||
</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">{{ typeValue.heavy }}</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>
|
||||
<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 style="font-size: 30px; font-weight: bold" v-if="title == '检测数'">
|
||||
<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>
|
||||
{{ typeValue.time }}
|
||||
{{ dataArr[0].time }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -68,7 +73,7 @@
|
|||
<span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' }}</span>
|
||||
</div>
|
||||
<div class="tableTime">
|
||||
{{ typeValue.time }}
|
||||
{{ dataArr[0].time }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
|
||||
|
|
|
|||
|
|
@ -3,15 +3,11 @@
|
|||
<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>
|
||||
|
|
@ -21,27 +17,37 @@
|
|||
<span class="downPull1" data-num="1" @click="sectionHandle(i)"></span>
|
||||
</div>
|
||||
<div v-for="o in s.children" :key="o.analogAreaComponentId">
|
||||
<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-else
|
||||
:pageType="o.graphicType"
|
||||
:triggerType="o.timeMode"
|
||||
|
||||
<!-- <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-else :pageType="o.graphicType" :triggerType="o.timeMode"
|
||||
:componentName="o.componentName"
|
||||
:dataArr="o.timeMode == '触发' ? o.trigger : o.cycleTimeData"
|
||||
:echartArr="o.presentationForm"
|
||||
:title="o.componentName.split('_')[0]"
|
||||
:chartName="o.combinationName"
|
||||
:typeValue="o.timeMode == '触发' ? typeValue : typeCycleTimeData"
|
||||
/>
|
||||
:echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
|
||||
:chartName='o.combinationName'
|
||||
: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>
|
||||
<!-- :data="triggerList.length != 0 ? triggerList : tableData" -->
|
||||
</div>
|
||||
|
|
@ -94,7 +100,7 @@ export default {
|
|||
default() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -316,6 +322,8 @@ export default {
|
|||
}
|
||||
],
|
||||
|
||||
|
||||
|
||||
idVal: '',
|
||||
//组件数组
|
||||
componentList: [],
|
||||
|
|
@ -324,12 +332,16 @@ export default {
|
|||
|
||||
sectionData: [],
|
||||
|
||||
|
||||
|
||||
// 单个区域或者断面的表格触发数据
|
||||
tableList: [],
|
||||
|
||||
|
||||
// 路线数据
|
||||
headWay: [],
|
||||
|
||||
|
||||
tripData: [],
|
||||
|
||||
sectionArr: [],
|
||||
|
|
@ -337,16 +349,17 @@ export default {
|
|||
//触发的类型数值看板显示
|
||||
typeValue: {},
|
||||
// 周期时刻的数值看板展示
|
||||
typeCycleTimeData: {}
|
||||
typeCycleTimeData: {},
|
||||
typeCycleStatistics:{}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.idVal = this.$route.query.id;
|
||||
getComponentSection({ VideoId: this.idVal }).then(res => {
|
||||
getComponentSection({ VideoId: this.idVal }).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
console.log(res.data.data, '11111111111111111');
|
||||
this.componentList = res.data.data;
|
||||
this.siftData();
|
||||
this.componentList = res.data.data
|
||||
this.siftData()
|
||||
// 处理获取过来的数据
|
||||
// this.componentList.forEach((val) => {
|
||||
// this.sectionArr.push(val.combinationName);
|
||||
|
|
@ -365,16 +378,18 @@ export default {
|
|||
} else if (res.data.code == 404) {
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
siftData() {
|
||||
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 => {
|
||||
this.sectionData = this.sectionArr.map((item) => {
|
||||
item = { title: item, children: [] };
|
||||
this.componentList.forEach(val => {
|
||||
this.componentList.forEach((val) => {
|
||||
if (item.title == val.combinationName) {
|
||||
item.children.push(val);
|
||||
}
|
||||
|
|
@ -396,46 +411,61 @@ export default {
|
|||
if (sectionBox[i] != undefined) {
|
||||
sectionBox[i].style.height = 'auto';
|
||||
}
|
||||
|
||||
} else {
|
||||
downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
|
||||
sections[i].style.height = '500px';
|
||||
if (sectionBox[i] != undefined) {
|
||||
sectionBox[i].style.height = '48vh';
|
||||
}
|
||||
}
|
||||
sectionBox[i].style.height = '48vh'
|
||||
}
|
||||
|
||||
// 触发数据的类型数值
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 触发数据的类型数值
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
mounted() {},
|
||||
watch: {
|
||||
|
||||
// 触发的原始数据
|
||||
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();
|
||||
} else {
|
||||
// 该时间的触发数据
|
||||
this.typeValue = item;
|
||||
ele.trigger.pop()
|
||||
|
||||
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
|
||||
},
|
||||
|
|
@ -447,38 +477,86 @@ 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 {
|
||||
// if (item.type_data != null) {
|
||||
item.time = item.time.split('.')[0]
|
||||
if(item.type_data!=null){
|
||||
// 周期时刻的类型数据
|
||||
this.typeCycleTimeData = item;
|
||||
// }
|
||||
ele.cycleTimeData.unshift(item);
|
||||
this.typeCycleTimeData = item
|
||||
}
|
||||
ele.cycleTimeData.unshift(item)
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
})
|
||||
})
|
||||
console.log(this.sectionData, '455');
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// 周期统计数据
|
||||
// cycleStatistics:{
|
||||
// handler(newVal){
|
||||
// console.log(newVal,'周期统计');
|
||||
// }
|
||||
// }
|
||||
cycleStatistics: {
|
||||
handler(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>
|
||||
|
||||
|
|
@ -498,7 +576,7 @@ export default {
|
|||
|
||||
/deep/ .el-scrollbar__view {
|
||||
display: inline-block !important;
|
||||
width: 100%;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
/deep/ .el-scrollbar__wrap {
|
||||
|
|
@ -512,6 +590,7 @@ export default {
|
|||
.dataBoard {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dataBoard .region,
|
||||
|
|
|
|||
Loading…
Reference in New Issue