代码提交
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,38 +138,21 @@ 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();
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.drawLine();
|
||||
console.log(this.$parent.dataArr, '父组件的dataArr');
|
||||
},
|
||||
computed: {
|
||||
listTotal() {
|
||||
return JSON.parse(JSON.stringify(this.$parent.dataArr))
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
list: {
|
||||
handler(newVal) {
|
||||
if (newVal.length != 0) {
|
||||
// x轴的数据
|
||||
|
||||
getMessage(newVal, title) {
|
||||
this.xData = newVal.map(val => {
|
||||
return val.time;
|
||||
});
|
||||
|
||||
this.series = [
|
||||
var series = [
|
||||
{
|
||||
name: '',
|
||||
type: 'line',
|
||||
|
|
@ -185,15 +167,13 @@ export default {
|
|||
}
|
||||
];
|
||||
|
||||
// 区域组件触发y轴展示
|
||||
if (this.title == '类型') {
|
||||
if (title === '类型') {
|
||||
this.tooltip = {
|
||||
formatter: '{a} {b}:{c}个',
|
||||
show: true,
|
||||
confine: true
|
||||
};
|
||||
this.series[0].name = '总量';
|
||||
console.log('折线图', newVal);
|
||||
series[0].name = '总量';
|
||||
// 映射出类型数组
|
||||
let arr = newVal.map(function (ele) {
|
||||
if (ele.type_data != null) {
|
||||
|
|
@ -206,32 +186,17 @@ export default {
|
|||
mapN.push(arr[t][i]);
|
||||
}
|
||||
}
|
||||
var lineArr = [{
|
||||
name: '机动车',
|
||||
var lineArr = []
|
||||
if (newVal[0].type_data != undefined) {
|
||||
newVal[0].type_data.forEach(ele => {
|
||||
lineArr.push({
|
||||
name: ele.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);
|
||||
|
|
@ -242,7 +207,7 @@ export default {
|
|||
}
|
||||
});
|
||||
for (let j = 0; j < lineArr.length; j++) {
|
||||
this.series.push(lineArr[j]);
|
||||
series.push(lineArr[j]);
|
||||
}
|
||||
// 总和数量
|
||||
let mapNR1 = [];
|
||||
|
|
@ -254,62 +219,66 @@ export default {
|
|||
mapNR1.push(sum);
|
||||
}
|
||||
});
|
||||
// console.log("mapNR1", mapNR1)
|
||||
this.series[0].data = mapNR1;
|
||||
} else if (this.title == '速度') {
|
||||
console.log('速度的折线图');
|
||||
series[0].data = mapNR1;
|
||||
} else if (title === '速度') {
|
||||
this.tooltip = {
|
||||
formatter: '{a} {b}:{c}km/h',
|
||||
show: true,
|
||||
confine: true
|
||||
};
|
||||
// console.log("newVal",newVal)
|
||||
this.series[0].data = newVal.map(val => {
|
||||
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 => {
|
||||
} else if (title === '流量') {
|
||||
series[0].data = newVal.map(ele => {
|
||||
return ele.in_flow + ele.out_flow;
|
||||
});
|
||||
} else if (this.title == '车头时距') {
|
||||
console.log('车头时距', newVal);
|
||||
} else if (title === '车头时距') {
|
||||
this.tooltip = {
|
||||
formatter: '{a} {b}:{c}/s',
|
||||
show: true,
|
||||
confine: true
|
||||
};
|
||||
this.series[0].data = newVal.map(val => {
|
||||
series[0].data = newVal.map(val => {
|
||||
return val.headway;
|
||||
});
|
||||
} else if (this.title == '排队数' && this.status == '触发') {
|
||||
this.series[0].data = newVal.map(val => {
|
||||
} else if (title === '排队数') {
|
||||
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 => {
|
||||
} else if (title === '检测数') {
|
||||
series[0].data = newVal.map(val => {
|
||||
return val.n_stay;
|
||||
});
|
||||
} else if (this.title == '延误') {
|
||||
this.series[0].data = newVal.map(val => {
|
||||
} else if (title === '延误') {
|
||||
series[0].data = newVal.map(val => {
|
||||
return val.ave_delay;
|
||||
});
|
||||
} else if (this.title == '拥堵') {
|
||||
this.series[0].data = newVal.map(val => { });
|
||||
} else if (title === '拥堵') {
|
||||
series[0].data = newVal.map(val => { });
|
||||
}
|
||||
|
||||
this.drawLine()
|
||||
|
||||
console.log(series,'折线图数据');
|
||||
return series
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.drawLine();
|
||||
// this.getMessage(this.list)
|
||||
// console.log(this.$parent.dataArr, '父组件的dataArr');
|
||||
// this.$set(this.$parent.dataArr)
|
||||
},
|
||||
computed: {
|
||||
listTotal() {
|
||||
return JSON.parse(JSON.stringify(this.$parent.dataArr))
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
listTotal: {
|
||||
// handler(newVal){
|
||||
// console.log(this.chartName , newVal,'数据');
|
||||
// },
|
||||
|
||||
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 => {
|
||||
newVal.forEach((item, i) => {
|
||||
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {
|
||||
if (ele.trigger.length == 10) {
|
||||
ele.trigger.pop();
|
||||
ele.trigger.splice(newVal.length - 1, 1);
|
||||
} else {
|
||||
item.time = item.time.split('.')[0];
|
||||
// 该时间的触发数据
|
||||
if (item.type_data != null) {
|
||||
// console.log(item,'461461');
|
||||
this.typeTimeMode = item
|
||||
_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