This commit is contained in:
luoshiwen 2023-02-28 16:08:35 +08:00
parent 12201308ad
commit 1bae6a255c
6 changed files with 234 additions and 267 deletions

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

View File

@ -46,12 +46,7 @@ export default {
return {};
}
},
historyData:{
type:Array,
default(){
}
}
},
data() {
return {
@ -79,13 +74,18 @@ export default {
},
methods: {
drawLine(newVal, title,timeMode) {
drawLine(newVal, title, timeMode) {
let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
if (myChart == null) {
myChart = this.$echarts.init(this.$refs.lineChart);
}
// var series = []
if (newVal) {
this.xData = newVal.map(val => {
return val.time;
});
}
@ -144,161 +144,161 @@ export default {
}
}
],
series: this.getMessage(newVal, title,timeMode)
series: this.getMessage(newVal, title, timeMode)
};
myChart.setOption(option);
window.addEventListener('resize', function() {
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
// this.$nextTick(() => {
// myChart.setOption(option)
// myChart.resize();
// })
// this.$nextTick(() => {
// myChart.setOption(option)
// myChart.resize();
// })
},
getMessage(newVal, title,timeMode) {
if(newVal){
this.xData = newVal.map(val => {
return val.time;
});
getMessage(newVal, title, timeMode) {
if (newVal) {
var series = [
{
name: '',
type: 'line',
symbolSize: 6,
smooth: true,
itemStyle: {
color: '#fb864b',
borderColor: '#fb864b'
// borderWidth: 2
},
data: []
}
];
if (title === '类型') {
this.tooltip = {
formatter: '{a} {b}:{c}个',
show: true,
confine: true
};
series[0].name = '总量';
//
let arr = newVal.map(function (ele) {
if (ele.type_data != null) {
return ele.type_data;
var series = [
{
name: '',
type: 'line',
symbolSize: 6,
smooth: true,
itemStyle: {
color: '#fb864b',
borderColor: '#fb864b'
// borderWidth: 2
},
data: []
}
});
var mapN = [];
for (var t = 0; t < arr.length; t++) {
for (var i = 0; i < arr[t].length; i++) {
mapN.push(arr[t][i]);
}
}
var lineArr = []
if (newVal[0].type_data != undefined) {
newVal[0].type_data.forEach(ele => {
lineArr.push({
name: ele.name,
type: 'line',
data: [],
smooth: true
});
];
if (title === '类型') {
this.tooltip = {
formatter: '{a} {b}:{c}个',
show: true,
confine: true
};
series[0].name = '总量';
//
let arr = newVal.map(function (ele) {
if (ele.type_data != null) {
return ele.type_data;
}
});
var mapN = [];
for (var t = 0; t < arr.length; t++) {
for (var i = 0; i < arr[t].length; i++) {
mapN.push(arr[t][i]);
}
}
var lineArr = []
if (newVal[0].type_data != undefined) {
newVal[0].type_data.forEach(ele => {
lineArr.push({
name: ele.name,
type: 'line',
data: [],
smooth: true
});
});
}
mapN.forEach(ele => {
if (ele.name == '机动车') {
lineArr[0].data.push(ele.quantity);
} else if (ele.name == '非机动车') {
lineArr[1].data.push(ele.quantity);
} else {
lineArr[2].data.push(ele.quantity);
}
});
for (let j = 0; j < lineArr.length; j++) {
series.push(lineArr[j]);
}
//
let mapNR1 = [];
newVal.map(function (ele) {
if (ele.type_data != null) {
var sum = ele.type_data.reduce(function (prev, cur) {
return cur.quantity + prev;
}, 0);
mapNR1.push(sum);
}
});
series[0].data = mapNR1;
} else if (title === '速度') {
this.tooltip = {
formatter: '{a} {b}:{c}km/h',
show: true,
confine: true
};
// console.log("newVal",newVal)
series[0].data = newVal.map(val => {
return val.speed;
});
} else if (title === '流量') {
series[0].data = newVal.map(ele => {
return ele.in_flow + ele.out_flow;
});
} else if (title === '车头时距') {
this.tooltip = {
formatter: '{a} {b}:{c}/s',
show: true,
confine: true
};
series[0].data = newVal.map(val => {
if (timeMode == '周期统计') {
return val.ave_headway;
} else {
return val.headway;
}
});
} else if (title === '排队数') {
series[0].data = newVal.map(val => {
// return val.n_queue;
if (timeMode == '周期统计') {
return val.ave_queue;
} else {
return val.n_queue;
}
});
} else if (title === '检测数') {
series[0].data = newVal.map(val => {
if (timeMode == '周期统计') {
return val.ave_stay;
} else {
return val.n_stay;
}
});
} else if (title === '延误') {
series[0].data = newVal.map(val => {
return val.ave_delay;
});
} else if (title === '拥堵') {
series[0].data = newVal.map(val => { });
}
mapN.forEach(ele => {
if (ele.name == '机动车') {
lineArr[0].data.push(ele.quantity);
} else if (ele.name == '非机动车') {
lineArr[1].data.push(ele.quantity);
} else {
lineArr[2].data.push(ele.quantity);
}
});
for (let j = 0; j < lineArr.length; j++) {
series.push(lineArr[j]);
}
//
let mapNR1 = [];
newVal.map(function (ele) {
if (ele.type_data != null) {
var sum = ele.type_data.reduce(function (prev, cur) {
return cur.quantity + prev;
}, 0);
mapNR1.push(sum);
}
});
series[0].data = mapNR1;
} else if (title === '速度') {
this.tooltip = {
formatter: '{a} {b}:{c}km/h',
show: true,
confine: true
};
// console.log("newVal",newVal)
series[0].data = newVal.map(val => {
return val.speed;
});
} else if (title === '流量') {
series[0].data = newVal.map(ele => {
return ele.in_flow + ele.out_flow;
});
} else if (title === '车头时距') {
this.tooltip = {
formatter: '{a} {b}:{c}/s',
show: true,
confine: true
};
series[0].data = newVal.map(val => {
if(timeMode=='周期统计'){
return val.ave_headway;
}else{
return val.headway;
}
});
} else if (title === '排队数') {
series[0].data = newVal.map(val => {
// return val.n_queue;
if(timeMode=='周期统计'){
return val.ave_queue;
}else{
return val.n_queue;
}
});
} else if (title === '检测数') {
series[0].data = newVal.map(val => {
if(timeMode=='周期统计'){
return val.ave_stay;
}else{
return val.n_stay;
}
});
} else if (title === '延误') {
series[0].data = newVal.map(val => {
return val.ave_delay;
});
} else if (title === '拥堵') {
series[0].data = newVal.map(val => { });
series.forEach(ele => {
ele.data.reverse()
})
return series
}
series.forEach(ele=>{
ele.data.reverse()
})
return series
}
}
},
mounted() {
if(this.history){
this.drawLine(this.historyData,this.title,this.status);
}
// if (this.historyData.length != 0) {
// this.drawLine(this.historyData, this.title, this.status);
// }
// this.getMessage(this.list)
// console.log(this.$parent.dataArr, 'dataArr');
// this.$set(this.$parent.dataArr)

View File

@ -88,27 +88,27 @@
<div class="border" v-if="echartArr.includes('曲线图')">
<detailDialog />
<lineChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="lineChartRef" :historyData="historyData"/>
:status="triggerType" :title="title" :typeValue="typeValue" ref="lineChartRef" />
</div>
<div class="border" v-if="echartArr.includes('饼状图')">
<detailDialog />
<pieChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="pieChartRef" :historyData="historyData"/>
:status="triggerType" :title="title" :typeValue="typeValue" ref="pieChartRef" />
</div>
<div class="border" v-if="echartArr.includes('均值图')">
<detailDialog />
<avgChart ref="avgChartRef" :componentName="componentName" :chartName="chartName" :pageType="pageType"
:list="newDataArr" :status="triggerType" :title="title" :typeValue="typeValue" :historyData="historyData"/>
:list="newDataArr" :status="triggerType" :title="title" :typeValue="typeValue" />
</div>
<div class="border" v-if="echartArr.includes('直方图')">
<detailDialog />
<barChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="barChartRef" :historyData="historyData"/>
:status="triggerType" :title="title" :typeValue="typeValue" ref="barChartRef" />
</div>
<div class="border" v-if="echartArr.includes('矩阵图')">
<detailDialog />
<thermalChart :componentName="componentName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="ODChartRef" :historyData="historyData"/>
:status="triggerType" :title="title" :typeValue="typeValue" ref="ODChartRef" />
</div>
</div>
</template>
@ -124,7 +124,7 @@ import regionTable from '../chart/regionTable.vue';
import thermalChart from '../chart/thermalChart.vue';
export default {
name: 'typeChart', //
props: ['historyData','typeValue', 'pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName','startEndData'],
props: ['typeValue', 'pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName','startEndData'],
components: {
lineChart,
barChart,
@ -152,8 +152,8 @@ export default {
};
},
created() {
console.log(this.historyData,'周期时刻历史数据');
},
methods: {
@ -180,6 +180,10 @@ export default {
this.newDataArr[0].headway = val[0].headway;
} else if (val[0].ave_headway) {
this.newDataArr[0].headway = val[0].ave_headway;
}else if (val[0].n_stay) {
this.newDataArr[0].n_stay = val[0].n_stay;
} else if (val[0].ave_stay) {
this.newDataArr[0].n_stay = val[0].ave_stay;
}
},

View File

@ -47,7 +47,8 @@
:dataArr="o.cycleStatisticsData" :echartArr="o.presentationForm"
:title="o.componentName.split('_')[0]" :chartName="o.combinationName"
:typeValue="typeCycleStatistics"
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }" :historyData="o.cycleStatisticsData"/>
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
:historyData="o.cycleStatisticsData" />
</el-collapse-item>
</div>
</el-collapse>
@ -218,6 +219,33 @@ export default {
//
//
getRef(data,timeMode) {
console.log(timeMode);
for (let i = 0; i < data.length; i++) {
let refItem = data[i]
if (data.length != 0 && refItem.dataArr != undefined && refItem.dataArr.length != 0) {
if (refItem.echartArr.includes('时间曲线图')) {
refItem.$refs.lineChartRef.drawLine(refItem.dataArr,refItem.componentName.split('_')[0],timeMode)
}
if (refItem.echartArr.includes('数值')) {
refItem.getDataArr(refItem.dataArr)
}
if (refItem.echartArr.includes('直方图') && refItem.$refs.barChartRef.drawBar) {
//
refItem.$refs.barChartRef.drawBar(refItem.dataArr[0])
}
if (refItem.echartArr.includes('饼状图') && refItem.$refs.pieChartRef.drawPie) {
//
refItem.$refs.pieChartRef.drawPie(refItem.dataArr[0])
}
if (refItem.echartArr.includes('均值图') && refItem.$refs.avgChartRef != undefined) {
refItem.$refs.avgChartRef.drawBar(refItem.dataArr[0])
}
}
}
}
},
mounted() { },
watch: {
@ -235,104 +263,52 @@ export default {
handler(newVal, oldVal) { },
immediate: true
},
// componentList:{
// handler(newVal) {
// console.log("componentList",newVal)
componentList: {
handler(newVal) {
console.log("componentList", newVal)
// if (newVal!= undefined&&newVal.length != 0 ) {
// newVal.forEach(ele => {
// if( ele.timeMode == ''){
// var thatNN = this;
// ele.cycleStatisticsData.forEach(item => {
// if (item.type_data != null) {
// //
// thatNN.typeCycleStatistics = item;
// }
// console.log("thatNN.$refs.typeChartRef2",thatNN.$refs.typeChartRef2)
// // thatN.$nextTick(() => {
// if(thatNN.$refs.typeChartRef2!=undefined){
// // //
// for (let i = 0; i < thatNN.$refs.typeChartRef2.length; i++) {
// let itemTypeChartRef2 = thatNN.$refs.typeChartRef2[i]
// if (itemTypeChartRef2.length!=0&&itemTypeChartRef2.dataArr!= undefined && itemTypeChartRef2.dataArr.length != 0) {
// console.log("itemTypeChartRef2.echartArr",itemTypeChartRef2.echartArr)
// if (itemTypeChartRef2.echartArr.includes('线')) {
// thatNN.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(thatNN.$refs.typeChartRef2[i].dataArr, thatNN.$refs.typeChartRef2[i].componentName.split('_')[0],'')
// }
// if (itemTypeChartRef2.echartArr.includes('')) {
// thatNN.$refs.typeChartRef2[i].getDataArr(thatNN.$refs.typeChartRef2[i].dataArr)
// }
// if (itemTypeChartRef2.echartArr.includes('') &&itemTypeChartRef2.$refs.barChartRef.drawBar) {
// //
// itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0])
// }
// if (itemTypeChartRef2.echartArr.includes('') &&itemTypeChartRef2.$refs.pieChartRef.drawPie) {
// //
// itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
// }
// if (itemTypeChartRef2.echartArr.includes('') && itemTypeChartRef2.$refs.avgChartRef != undefined) {
// itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0])
// }
// }
// }
// }
// })
// }
// // if ( ele.timeMode == '') {
// // var thatN = this;
// // if (ele.cycleTimeData.length == 10) {
// // ele.cycleTimeData.pop();
// // } else {
// // ele.cycleTimeData.forEach(item => {
// // if (item.type_data != null) {
// // //
// // thatN.typeCycleTimeData = item;
// // }
// // ele.cycleTimeData.unshift(item);
// // // thatN.$nextTick(() => {
// // if(thatN.$refs.typeChartRef1!=undefined){
// // // console.log("thatN.$refs.typeChartRef1",thatN.$refs.typeChartRef1)
// // //
// // for (let i = 0; i < thatN.$refs.typeChartRef1.length; i++) {
// // let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i]
// // if (itemTypeChartRef1.length!=0&&itemTypeChartRef1.dataArr!= undefined && itemTypeChartRef1.dataArr.length != 0) {
// // if (itemTypeChartRef1.echartArr.includes('线')) {
// // thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(thatN.$refs.typeChartRef1[i].dataArr, thatN.$refs.typeChartRef1[i].componentName.split('_')[0],'')
// // }
// // if (itemTypeChartRef1.echartArr.includes('')) {
// // thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr)
// // }
// // if (itemTypeChartRef1.echartArr.includes('') &&itemTypeChartRef1.$refs.barChartRef.drawBar) {
// // //
// // itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0])
// // }
// // if (itemTypeChartRef1.echartArr.includes('') &&itemTypeChartRef1.$refs.pieChartRef.drawPie) {
// // //
// // itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0])
// // }
// // if (itemTypeChartRef1.echartArr.includes('') && itemTypeChartRef1.$refs.avgChartRef != undefined) {
// // itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0])
// // }
// // }
// // }
// // }
// // })
// // }
if (newVal != undefined && newVal.length != 0) {
newVal.forEach(ele => {
if (ele.timeMode == '周期统计') {
this.$nextTick(() => {
// var thatNN = this;
ele.cycleStatisticsData.forEach(item => {
if (item.type_data != null) {
this.typeCycleStatistics = item;
}
})
if (this.$refs.typeChartRef2 != undefined) {
// //
this.getRef(this.$refs.typeChartRef2,ele.timeMode)
}
})
}
if (ele.timeMode == '周期时刻') {
this.$nextTick(()=>{
ele.cycleStatisticsData.forEach(item => {
if (item.type_data != null) {
this.typeCycleStatistics = item;
}
// thatN.$nextTick(() => {
})
if (this.$refs.typeChartRef1 != undefined) {
// //
this.getRef(this.$refs.typeChartRef1,ele.timeMode)
}
})
// // }
}
// });
// }
// },
// immediate:true
// },
});
}
},
immediate: true,
deep: true,
},
// activeName:'channge',
//
triggerListData: {
@ -400,11 +376,7 @@ export default {
if (newVal != undefined && newVal.length != 0 && this.sectionData) {
var thatN = this;
thatN.classify.forEach((ele, index) => {
// if (ele.cycleTimeData == undefined && ele.timeMode == '') {
// ele.cycleTimeData = [];
// }else{
// }
newVal.forEach(item => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻') {
if (ele.cycleTimeData.length == 10) {
@ -457,11 +429,7 @@ export default {
} else {
var _thatN = this
_thatN.classify.forEach((ele, index) => {
// if (ele.cycleTimeData == undefined && ele.timeMode == '') {
// ele.cycleTimeData = [];
// }else{
// }
// newVal.forEach(item => {
if (ele.timeMode == '周期时刻') {
if (ele.cycleTimeData.length == 10) {
@ -522,11 +490,6 @@ export default {
if (newVal != undefined && newVal.length != 0 && this.sectionData) {
var that = this;
that.classify.forEach((ele, index) => {
// if (ele.cycleStatisticsData == undefined && ele.timeMode == '') {
// ele.cycleStatisticsData = [];
// }else{
// // ele.cycleStatisticsData =
// }
newVal.forEach(item => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期统计') {
if (ele.cycleStatisticsData.length == 10) {