代码提交
This commit is contained in:
parent
3774ac8806
commit
27537a0814
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -208,18 +208,8 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
this.drawBar(this.typeValue);
|
||||
},
|
||||
watch: {
|
||||
typeValue: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.drawBar(newVal);
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -193,7 +193,7 @@ export default {
|
|||
/deep/ .el-table{
|
||||
height: 709px !important;
|
||||
overflow-y: scroll;
|
||||
|
||||
z-index: 9999;
|
||||
}
|
||||
.el-table::-webkit-scrollbar { width: 0 !important }
|
||||
.tableContent {
|
||||
|
|
|
|||
|
|
@ -181,7 +181,7 @@ export default {
|
|||
/deep/ .el-table{
|
||||
height: 709px !important;
|
||||
overflow-y: scroll;
|
||||
|
||||
z-index: 9999;
|
||||
}
|
||||
.el-table::-webkit-scrollbar { width: 0 !important }
|
||||
.tableContent {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<!-- 触发数据数值渲染 -->
|
||||
<div class="typeContent">
|
||||
<div v-if="dataArr && dataArr.length != 0 && dataArr != undefined">
|
||||
<div v-if="title == '类型'" style="display:flex">
|
||||
<div v-if="title == '类型' && echartArr.includes('数值')" style="display:flex">
|
||||
<el-card v-for="(n, i) in dataArr[0].type_data" :key="i" style="width: 150px; margin-bottom: 20px; text-align: center">
|
||||
<div>
|
||||
<span style="font-size: 15px;">{{ n.name }}</span
|
||||
|
|
@ -31,15 +31,15 @@
|
|||
<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? 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">{{ dataArr[0].flow }}</span>
|
||||
<span style="font-size: 30px; font-weight: bold">{{ dataArr[0].flow? 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">{{ dataArr[0].headway }}</span>
|
||||
<span style="font-size: 30px; font-weight: bold">{{ dataArr[0].headway?dataArr[0].headway:'' }}</span>
|
||||
</div>
|
||||
<div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'">
|
||||
<span style="font-size: 15px;">排队数</span><br />
|
||||
|
|
@ -47,11 +47,11 @@
|
|||
</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].n_stay }}</span>
|
||||
<span style="font-size: 30px; font-weight: bold">{{ dataArr[0].n_stay?dataArr[0].n_stay:'' }}</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">{{ dataArr[0].ave_delay }}</span>
|
||||
<span style="font-size: 30px; font-weight: bold">{{ dataArr[0].ave_delay?dataArr[0].ave_delay:'' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
<div class="border" v-if="echartArr.includes('均值图')">
|
||||
<detailDialog />
|
||||
<avgChart
|
||||
ref="avgRefChart"
|
||||
ref="avgChartRef"
|
||||
:componentName="componentName"
|
||||
:chartName="chartName"
|
||||
:pageType="pageType"
|
||||
|
|
@ -180,24 +180,15 @@ export default {
|
|||
// 计算类型数量的总和
|
||||
|
||||
getTotal(dataArr) {
|
||||
return dataArr[0].type_data.reduce(function(prev, cur) {
|
||||
if(this.title=='类型'){
|
||||
return dataArr[0].type_data.reduce(function(prev, cur) {
|
||||
return cur.quantity + prev;
|
||||
}, 0);
|
||||
|
||||
// return dataArr[0].type_data((pre, cur) => {
|
||||
// return pre + cur
|
||||
// }, 0)
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
// 计算类型的数值
|
||||
getNewQueue(dataArr) {
|
||||
// console.log("计算类型的数值",dataArr)
|
||||
// if(dataArr[0].timeMode=='触发'){
|
||||
// this.queue = dataArr[0].n_queue
|
||||
// }else if(dataArr[0].timeMode=='周期统计'){
|
||||
// this.queue = dataArr[0].ave_queue
|
||||
// }else if(dataArr[0].timeMode=='周期时刻'){
|
||||
|
||||
// }
|
||||
|
||||
|
||||
if (dataArr[0].timeMode == '触发') {
|
||||
this.queue = dataArr[0].n_queue;
|
||||
|
|
@ -224,11 +215,6 @@ export default {
|
|||
|
||||
immediate: true
|
||||
}
|
||||
// cycleTimeData: {
|
||||
// handler(newVal) {
|
||||
// console.log(newVal);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,12 +6,8 @@
|
|||
<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 <= 1 ? 'sectionBox' : 'section'" ref="section"
|
||||
v-for="(s, i) in sectionData" :key="s.analogAreaComponentId">
|
||||
<template>
|
||||
<div ref="sectionContent">
|
||||
<div>
|
||||
|
|
@ -21,59 +17,34 @@
|
|||
<!-- <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span> -->
|
||||
</div>
|
||||
<el-tabs>
|
||||
<el-collapse v-model="acticveName">
|
||||
<div style="position:relative" v-for="o in s.children" :key="o.analogAreaComponentId">
|
||||
<el-collapse v-model="upName">
|
||||
<div style="position:relative" v-for="o in s.children"
|
||||
:key="o.analogAreaComponentId">
|
||||
<div class="titleGnag"></div>
|
||||
<el-collapse-item :title="o.componentName + o.timeMode" :name="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"
|
||||
/>
|
||||
<el-collapse-item :title="o.componentName + o.timeMode"
|
||||
:name="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
|
||||
ref="typeChartRef"
|
||||
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="typeTimeMode"
|
||||
/>
|
||||
<typeChart
|
||||
ref="typeChartRef1"
|
||||
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 ref="typeChartRef" 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="typeTimeMode" />
|
||||
<typeChart ref="typeChartRef1" 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
|
||||
ref="typeChartRef2"
|
||||
style="width: 100%;"
|
||||
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"
|
||||
/>
|
||||
<typeChart ref="typeChartRef2" style="width: 100%;"
|
||||
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" />
|
||||
</el-collapse-item>
|
||||
</div>
|
||||
</el-collapse>
|
||||
|
|
@ -131,7 +102,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
acticveName: [],
|
||||
upName: [],
|
||||
title1: '01断面',
|
||||
title2: '01区域',
|
||||
dialogVisible: false,
|
||||
|
|
@ -221,24 +192,11 @@ export default {
|
|||
if (sectionBox[i] != undefined) {
|
||||
}
|
||||
}
|
||||
},
|
||||
channge(oldVal, newVal) {
|
||||
console.log('old', oldVal);
|
||||
console.log('newVal', newVal);
|
||||
if (oldVal == 'second') {
|
||||
this.sectionArr = [];
|
||||
this.sectionData = [];
|
||||
this.getNew();
|
||||
} else if (newVal == 'second') {
|
||||
this.sectionArr = [];
|
||||
this.sectionData = [];
|
||||
this.getNew();
|
||||
}
|
||||
}
|
||||
|
||||
// 触发数据的类型数值
|
||||
},
|
||||
mounted() {},
|
||||
mounted() { },
|
||||
watch: {
|
||||
// acticveName: {
|
||||
// handler(newVal) {
|
||||
|
|
@ -251,7 +209,7 @@ export default {
|
|||
// },
|
||||
// 触发的原始数据
|
||||
triggerData: {
|
||||
handler(newVal, oldVal) {},
|
||||
handler(newVal, oldVal) { },
|
||||
immediate: true
|
||||
},
|
||||
// activeName:'channge',
|
||||
|
|
@ -282,17 +240,24 @@ export default {
|
|||
for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
|
||||
// console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
|
||||
let item = _this.$refs.typeChartRef[i]
|
||||
if (item.dataArr.length != 0) {
|
||||
_this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(_this.$refs.typeChartRef[i].dataArr, _this.$refs.typeChartRef[i].componentName.split('_')[0])
|
||||
if (item.echartArr.includes('直方图') && item.componentName.split('_')[0]) {
|
||||
if (item.dataArr != undefined && item.dataArr) {
|
||||
if (item.echartArr.includes('曲线图')) {
|
||||
_this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(_this.$refs.typeChartRef[i].dataArr, _this.$refs.typeChartRef[i].componentName.split('_')[0])
|
||||
}
|
||||
if (item.echartArr.includes('直方图') && item.componentName.split('_')[0] == '类型') {
|
||||
// 数据改变重新渲染柱状图
|
||||
item.$refs.barChartRef.drawBar(item.dataArr[0])
|
||||
}
|
||||
if (item.echartArr.includes('饼状图') && item.componentName.split('_')[0]) {
|
||||
console.log(item, '饼图组件');
|
||||
if (item.echartArr.includes('饼状图') && item.componentName.split('_')[0] == '类型') {
|
||||
// 数据改变重新渲染饼图
|
||||
item.$refs.pieChartRef.drawPie(item.dataArr[0])
|
||||
}
|
||||
if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
|
||||
item.$refs.avgChartRef.drawBar(item.dataArr[0])
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -332,17 +297,23 @@ export default {
|
|||
// 轮循周期时刻生成的各类组件
|
||||
for (let i = 0; i < that.$refs.typeChartRef1.length; i++) {
|
||||
item = that.$refs.typeChartRef1[i]
|
||||
if (item.dataArr.length != 0) {
|
||||
if (item.dataArr) {
|
||||
|
||||
if (item.echartArr.includes('曲线图')) {
|
||||
that.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(that.$refs.typeChartRef1[i].dataArr, that.$refs.typeChartRef[i].componentName.split('_')[0])
|
||||
}
|
||||
|
||||
that.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(that.$refs.typeChartRef1[i].dataArr, that.$refs.typeChartRef[i].componentName.split('_')[0])
|
||||
// if (item.$refs.barChartRef.drawBar) {
|
||||
// // 数据改变重新渲染柱状图
|
||||
// item.$refs.barChartRef.drawBar(item.dataArr[0])
|
||||
// } else if (item.$refs.pieChartRef.drawPie) {
|
||||
// // 数据改变重新渲染饼图
|
||||
// item.$refs.pieChartRef.drawPie(item.dataArr[0])
|
||||
// }
|
||||
if (item.echartArr.includes('直方图') && item.componentName.split('_')[0] == '类型') {
|
||||
// 数据改变重新渲染柱状图
|
||||
item.$refs.barChartRef.drawBar(item.dataArr[0])
|
||||
}
|
||||
if (item.echartArr.includes('饼状图') && item.componentName.split('_')[0] == '类型') {
|
||||
// 数据改变重新渲染饼图
|
||||
item.$refs.pieChartRef.drawPie(item.dataArr[0])
|
||||
}
|
||||
if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
|
||||
item.$refs.avgChartRef.drawBar(item.dataArr[0])
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -374,19 +345,22 @@ export default {
|
|||
for (let i = 0; i < this.$refs.typeChartRef2.length; i++) {
|
||||
item = that.$refs.typeChartRef2[i];
|
||||
// console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
|
||||
if (item.dataArr.length != 0) {
|
||||
this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0])
|
||||
if (item.componentName.split('_')[0] == "类型") {
|
||||
// console.log(item,'组件数据');
|
||||
if (item.echartArr.includes('直方图')) {
|
||||
// 数据改变重新渲染柱状图
|
||||
console.log(item, '组件');
|
||||
item.$refs.barChartRef.drawBar(item.dataArr[0])
|
||||
} else if (item.echartArr.includes('饼状图')) {
|
||||
// 数据改变重新渲染饼图
|
||||
item.$refs.pieChartRef.drawPie(item.dataArr[0])
|
||||
}
|
||||
if (item.dataArr) {
|
||||
if (item.echartArr.includes('曲线图')) {
|
||||
this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0])
|
||||
}
|
||||
if (item.echartArr.includes('直方图') && item.componentName.split('_')[0] == '类型') {
|
||||
// 数据改变重新渲染柱状图
|
||||
item.$refs.barChartRef.drawBar(item.dataArr[0])
|
||||
}
|
||||
if (item.echartArr.includes('饼状图') && item.componentName.split('_')[0] == '类型') {
|
||||
console.log(item, '饼图组件');
|
||||
// 数据改变重新渲染饼图
|
||||
item.$refs.pieChartRef.drawPie(item.dataArr[0])
|
||||
}
|
||||
if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
|
||||
item.$refs.avgChartRef.drawBar(item.dataArr[0])
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -425,6 +399,7 @@ export default {
|
|||
position: absolute;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
.el-collapse-item__header {
|
||||
font-size: 15px;
|
||||
margin-left: 10px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue