代码提交
This commit is contained in:
parent
62ab49775f
commit
e7b7125476
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
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
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -69,23 +69,22 @@ export default {
|
|||
},
|
||||
created() {
|
||||
// console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
drawLine() {
|
||||
drawLine(newVal, title) {
|
||||
let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
|
||||
if (myChart == null) {
|
||||
myChart = this.$echarts.init(this.$refs.lineChart);
|
||||
}
|
||||
// var series = []
|
||||
|
||||
|
||||
|
||||
|
||||
// myChart.showLoading() //开启loading
|
||||
let option = {
|
||||
// title: {
|
||||
// show: true,
|
||||
// text: this.componentName + '-' + this.chartName + '-' + '曲线图',
|
||||
// textStyle: {
|
||||
// lineHeight: '30'
|
||||
// }
|
||||
// },
|
||||
legend: {},
|
||||
grid: {
|
||||
left: '2%',
|
||||
|
|
@ -139,22 +138,135 @@ export default {
|
|||
}
|
||||
}
|
||||
],
|
||||
series: this.series
|
||||
series: this.getMessage(newVal, title)
|
||||
};
|
||||
myChart.setOption(option) //再设置配置
|
||||
// myChart.hideLoading()
|
||||
// myChart.setOption(option);
|
||||
// window.onresize = () => { // 根据窗口大小变化图表自适应
|
||||
// myChart.resize();
|
||||
// };
|
||||
myChart.setOption(option)
|
||||
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
});
|
||||
},
|
||||
|
||||
getMessage(newVal, title) {
|
||||
this.xData = newVal.map(val => {
|
||||
return val.time;
|
||||
});
|
||||
|
||||
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 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 => {
|
||||
return val.headway;
|
||||
});
|
||||
} else if (title === '排队数') {
|
||||
series[0].data = newVal.map(val => {
|
||||
return val.n_queue;
|
||||
});
|
||||
} else if (title === '检测数') {
|
||||
series[0].data = newVal.map(val => {
|
||||
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 => { });
|
||||
}
|
||||
console.log(series,'折线图数据');
|
||||
return series
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.drawLine();
|
||||
console.log(this.$parent.dataArr, '父组件的dataArr');
|
||||
// this.drawLine();
|
||||
// this.getMessage(this.list)
|
||||
// console.log(this.$parent.dataArr, '父组件的dataArr');
|
||||
// this.$set(this.$parent.dataArr)
|
||||
},
|
||||
computed: {
|
||||
listTotal() {
|
||||
|
|
@ -162,154 +274,11 @@ export default {
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
list: {
|
||||
handler(newVal) {
|
||||
if (newVal.length != 0) {
|
||||
// x轴的数据
|
||||
this.xData = newVal.map(val => {
|
||||
return val.time;
|
||||
});
|
||||
listTotal: {
|
||||
// handler(newVal){
|
||||
// console.log(this.chartName , newVal,'数据');
|
||||
// },
|
||||
|
||||
this.series = [
|
||||
{
|
||||
name: '',
|
||||
type: 'line',
|
||||
symbolSize: 6,
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
color: '#fb864b',
|
||||
borderColor: '#fb864b'
|
||||
// borderWidth: 2
|
||||
},
|
||||
data: []
|
||||
}
|
||||
];
|
||||
|
||||
// 区域组件触发y轴展示
|
||||
if (this.title == '类型') {
|
||||
this.tooltip = {
|
||||
formatter: '{a} {b}:{c}个',
|
||||
show: true,
|
||||
confine: true
|
||||
};
|
||||
this.series[0].name = '总量';
|
||||
console.log('折线图', newVal);
|
||||
// 映射出类型数组
|
||||
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 = [{
|
||||
name: '机动车',
|
||||
type: 'line',
|
||||
data: [],
|
||||
smooth: true
|
||||
}, {
|
||||
name: '非机动车',
|
||||
type: 'line',
|
||||
data: [],
|
||||
smooth: true
|
||||
}, {
|
||||
name: '行人',
|
||||
type: 'line',
|
||||
data: [],
|
||||
smooth: true
|
||||
}];
|
||||
// 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++) {
|
||||
this.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);
|
||||
}
|
||||
});
|
||||
// console.log("mapNR1", mapNR1)
|
||||
this.series[0].data = mapNR1;
|
||||
} else if (this.title == '速度') {
|
||||
console.log('速度的折线图');
|
||||
this.tooltip = {
|
||||
formatter: '{a} {b}:{c}km/h',
|
||||
show: true,
|
||||
confine: true
|
||||
};
|
||||
// console.log("newVal",newVal)
|
||||
this.series[0].data = newVal.map(val => {
|
||||
return val.speed;
|
||||
});
|
||||
} else if (this.title == '流量') {
|
||||
this.tooltip = {
|
||||
formatter: '{a} {b}:{c}辆',
|
||||
show: true,
|
||||
confine: true
|
||||
};
|
||||
this.series[0].data = newVal.map(ele => {
|
||||
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.headway;
|
||||
});
|
||||
} else if (this.title == '排队数' && this.status == '触发') {
|
||||
this.series[0].data = newVal.map(val => {
|
||||
return val.n_queue;
|
||||
});
|
||||
} else if (this.title == '排队数' && this.status == '周期统计') {
|
||||
this.series[0].data = newVal.map(val => {
|
||||
return val.ave_queue;
|
||||
});
|
||||
} else if (this.title == '检测数') {
|
||||
this.series[0].data = newVal.map(val => {
|
||||
return val.n_stay;
|
||||
});
|
||||
} else if (this.title == '延误') {
|
||||
this.series[0].data = newVal.map(val => {
|
||||
return val.ave_delay;
|
||||
});
|
||||
} else if (this.title == '拥堵') {
|
||||
this.series[0].data = newVal.map(val => { });
|
||||
}
|
||||
|
||||
this.drawLine()
|
||||
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div v-if="msg">
|
||||
<div v-if="msg" class="regionBox">
|
||||
<!-- 触发 -->
|
||||
<el-table :data="msg" style="width: 100%" v-if="type == '触发' ">
|
||||
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
|
||||
|
|
@ -186,7 +186,13 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
/deep/ .el-table{
|
||||
height: 709px !important;
|
||||
overflow-y: scroll;
|
||||
|
||||
}
|
||||
.el-table::-webkit-scrollbar { width: 0 !important }
|
||||
.tableContent {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@
|
|||
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor'">机动车|非机动车</span>
|
||||
<span v-if="scope.row.type == 'Motor Vehicle|Person'">机动车|行人</span>
|
||||
<span v-if="scope.row.type == 'Person|Non_Motor'">行人|非机动车</span>
|
||||
<span v-if="scope.row.type == 'Person|Motor Vehicle'">行人|机动车</span>
|
||||
<span v-if="scope.row.type == 'Person|Non_Motor|Motor Vehicle'">行人|非机动车|机动车</span>
|
||||
<span v-if="scope.row.type == 'Person|Motor Vehicle|Non_Motor'">行人|非机动车|机动车</span>
|
||||
<span v-if="scope.row.type == 'Non_Motor|Person|Motor Vehicle'">行人|非机动车|机动车</span>
|
||||
|
|
@ -176,7 +177,13 @@ export default {
|
|||
mounted() { }
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
/deep/ .el-table{
|
||||
height: 709px !important;
|
||||
overflow-y: scroll;
|
||||
|
||||
}
|
||||
.el-table::-webkit-scrollbar { width: 0 !important }
|
||||
.tableContent {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template><!-- 触发类型 -->
|
||||
<div class="setion">
|
||||
<div class="setion" v-if="dataArr">
|
||||
<p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p>
|
||||
<!-- 触发数据数值渲染 -->
|
||||
<div class="typeContent" v-if="triggerType == '触发' || '周期时刻'">
|
||||
<div class="typeContent" >
|
||||
<div v-if="dataArr && dataArr.length != 0 && dataArr!=undefined">
|
||||
<div v-if="title == '类型'" style="display:flex">
|
||||
<el-card v-for="(n, i) in typeValue.type_data" :key="i"
|
||||
<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><br />
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<div>
|
||||
{{ typeValue.time ? typeValue.time : '' }}
|
||||
{{ dataArr[0].time ? dataArr[0].time : '' }}
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
<div v-if="title == '类型'">
|
||||
<span style="font-size: 15px;">类型数量总和</span><br />
|
||||
<span style="font-size: 30px; font-weight: bold">
|
||||
{{ this.total }}
|
||||
{{ getTotal() }}
|
||||
</span>
|
||||
</div>
|
||||
<div style="font-size: 30px; font-weight: bold" v-if="title == '速度'">
|
||||
|
|
@ -92,6 +92,7 @@
|
|||
:status="triggerType"
|
||||
:title="title"
|
||||
:typeValue="typeValue"
|
||||
ref="lineChartRef"
|
||||
/>
|
||||
</div>
|
||||
<div class="border" v-if="echartArr.includes('饼状图')">
|
||||
|
|
@ -146,32 +147,34 @@ export default {
|
|||
};
|
||||
},
|
||||
created() {
|
||||
|
||||
console.log(this.title+'TYPECHARTdataArr', this.dataArr)
|
||||
},
|
||||
methods: {
|
||||
// 计算类型的数值
|
||||
// 计算类型的数值
|
||||
},
|
||||
|
||||
computed: {},
|
||||
computed: {
|
||||
// 获取类型的总数量
|
||||
getTotal(){
|
||||
|
||||
}
|
||||
},
|
||||
mounted() { },
|
||||
watch: {
|
||||
// 监听触发数据
|
||||
dataArr: {
|
||||
handler(newVal) {
|
||||
console.log('dataArr', newVal);
|
||||
|
||||
},
|
||||
|
||||
immediate: true
|
||||
},
|
||||
typeValue: {
|
||||
handler(newVal) {
|
||||
this.total = 0;
|
||||
if (this.title == '类型') {
|
||||
newVal.type_data.forEach(ele => {
|
||||
this.total += ele.quantity;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
immediate:true
|
||||
}
|
||||
// cycleTimeData: {
|
||||
// handler(newVal) {
|
||||
|
|
|
|||
|
|
@ -25,11 +25,11 @@
|
|||
: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="typeTimeMode" />
|
||||
<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 v-if="o.timeMode === '周期时刻'" :pageType="o.graphicType"
|
||||
:triggerType="o.timeMode" :componentName="o.componentName"
|
||||
:dataArr="o.cycleTimeData" :echartArr="o.presentationForm"
|
||||
|
|
@ -346,13 +346,14 @@ export default {
|
|||
|
||||
// },
|
||||
created() {
|
||||
this.getNew()
|
||||
// this.getNew()
|
||||
},
|
||||
methods: {
|
||||
getNew() {
|
||||
// this.idVal = ;
|
||||
getComponentSection({ VideoId: this.$route.query.id }).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
console.log(res.data.data, '组件的数据');
|
||||
this.componentList = res.data.data;
|
||||
this.siftData();
|
||||
}
|
||||
|
|
@ -428,28 +429,39 @@ export default {
|
|||
handler(newVal) {
|
||||
this.triggerList = newVal;
|
||||
// 触发数据
|
||||
// console.log(newVal, 'triggerlistData');
|
||||
console.log(newVal, 'triggerlistData');
|
||||
var _this = this
|
||||
if (newVal.length != 0 && _this.sectionData) {
|
||||
_this.componentList.forEach(ele => {
|
||||
|
||||
this.componentList.forEach(ele => {
|
||||
if (ele.trigger == undefined && ele.timeMode == '触发') {
|
||||
ele.trigger = [];
|
||||
}
|
||||
newVal.forEach(item => {
|
||||
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {
|
||||
if (ele.trigger.length == 10) {
|
||||
ele.trigger.pop();
|
||||
} else {
|
||||
item.time = item.time.split('.')[0];
|
||||
// 该时间的触发数据
|
||||
if (item.type_data != null) {
|
||||
// console.log(item,'461461');
|
||||
this.typeTimeMode = item
|
||||
}
|
||||
ele.trigger.unshift(item);
|
||||
}
|
||||
if (ele.trigger == undefined && ele.timeMode == '触发') {
|
||||
ele.trigger = [];
|
||||
}
|
||||
newVal.forEach((item, i) => {
|
||||
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {
|
||||
if (ele.trigger.length == 10) {
|
||||
ele.trigger.splice(newVal.length - 1, 1);
|
||||
} else {
|
||||
item.time = item.time.split('.')[0];
|
||||
// 该时间的触发数据
|
||||
if (item.type_data != null) {
|
||||
_this.typeTimeMode = item
|
||||
}
|
||||
ele.trigger.unshift(item);
|
||||
_this.$nextTick(() => {
|
||||
if (_this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine) {
|
||||
_this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(ele.trigger, ele.componentName.split('_')[0])
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
|
|
@ -465,11 +477,10 @@ export default {
|
|||
newVal.forEach(item => {
|
||||
if (
|
||||
ele.analogAreaComponentId == item.component_id &&
|
||||
ele.timeMode == '周期时刻' &&
|
||||
ele.analogAreaGraphId == item.graphical_id
|
||||
ele.timeMode == '周期时刻'
|
||||
) {
|
||||
if (ele.cycleTimeData.length == 10) {
|
||||
ele.cycleTimeData.slice(ele.cycleTimeData.length - 1, 0);
|
||||
ele.cycleTimeData.splice(newVal.length - 1, 1);
|
||||
} else {
|
||||
item.time = item.time.split('.')[0];
|
||||
if (item.type_data != null) {
|
||||
|
|
@ -485,12 +496,6 @@ export default {
|
|||
},
|
||||
immediate: true
|
||||
},
|
||||
// 周期统计数据
|
||||
// cycleStatistics:{
|
||||
// handler(newVal){
|
||||
// console.log(newVal,'周期统计');
|
||||
// }
|
||||
// }
|
||||
cycleStatistics: {
|
||||
handler(newVal) {
|
||||
|
||||
|
|
@ -502,7 +507,7 @@ export default {
|
|||
newVal.forEach(item => {
|
||||
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期统计') {
|
||||
if (ele.cycleStatistics.length == 10) {
|
||||
ele.cycleStatistics.pop();
|
||||
ele.cycleStatistics.splice(newVal.length - 1, 1);
|
||||
} else {
|
||||
item.time = item.time.split('.')[0];
|
||||
if (item.type_data != null) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue