bug修改
This commit is contained in:
parent
419dbdd6aa
commit
426aee89c4
|
|
@ -1,12 +1,20 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- 均值图 -->
|
<!-- 均值图 -->
|
||||||
<div style="width: 100%;margin-top: 5px;">
|
<div style="width: 100%; margin-top: 5px">
|
||||||
<div class="tableTitle">
|
<div class="tableTitle">
|
||||||
<div>
|
<div>
|
||||||
<span
|
<span
|
||||||
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
|
style="
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #3297ff;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 8px;
|
||||||
|
"
|
||||||
></span>
|
></span>
|
||||||
<span style="font-size:18px;">{{ componentName + '-' + chartName + '-' + '均值图'+'-'+status }}</span>
|
<span style="font-size: 18px">{{ componentName + '-' + chartName + '-' + '均值图' + '-' + status }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="barChart" ref="barChart" style="width: 705px; height: 300px"></div>
|
<div id="barChart" ref="barChart" style="width: 705px; height: 300px"></div>
|
||||||
|
|
@ -35,16 +43,20 @@ export default {
|
||||||
},
|
},
|
||||||
status: {
|
status: {
|
||||||
type: String
|
type: String
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {};
|
||||||
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
drawBar(arr) {
|
drawBar(arr) {
|
||||||
// console.log("均值图",arr)
|
// console.log("均值图",arr)
|
||||||
|
if (arr && Object.keys(arr).length > 0) {
|
||||||
|
arr.avg = arr.avg ? Math.abs(arr.avg) : 0;
|
||||||
|
arr.med = arr.med ? Math.abs(arr.med) : 0;
|
||||||
|
arr.max = arr.max ? Math.abs(arr.max) : 0;
|
||||||
|
arr.min = arr.min ? Math.abs(arr.min) : 0;
|
||||||
|
}
|
||||||
let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
|
let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
|
||||||
if (myChart == null) {
|
if (myChart == null) {
|
||||||
myChart = this.$echarts.init(this.$refs.barChart);
|
myChart = this.$echarts.init(this.$refs.barChart);
|
||||||
|
|
@ -64,7 +76,7 @@ export default {
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
gridIndex: 0,
|
gridIndex: 0,
|
||||||
data: chartData.map(item => item.stage),
|
data: chartData.map((item) => item.stage),
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
|
|
@ -206,7 +218,7 @@ export default {
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
window.addEventListener('resize', function() {
|
window.addEventListener('resize', function () {
|
||||||
myChart.resize();
|
myChart.resize();
|
||||||
});
|
});
|
||||||
// this.$nextTick(() => {
|
// this.$nextTick(() => {
|
||||||
|
|
@ -218,9 +230,7 @@ export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
// this.drawBar(this.typeValue);
|
// this.drawBar(this.typeValue);
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {}
|
||||||
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
|
|
@ -71,10 +71,10 @@ export default {
|
||||||
confine: true
|
confine: true
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '2%',
|
left: '5%',
|
||||||
right: '4%',
|
right: '5%',
|
||||||
bottom: '10%',
|
bottom: '0%',
|
||||||
top: '20%',
|
top: '5%',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
|
|
@ -86,8 +86,10 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
color: '#000'
|
color: '#000',
|
||||||
|
rotate: 30
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false
|
show: false
|
||||||
|
|
|
||||||
|
|
@ -80,7 +80,22 @@ export default {
|
||||||
// triggerType:'触发时刻'
|
// triggerType:'触发时刻'
|
||||||
myChart: null,
|
myChart: null,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
show: true
|
show: true,
|
||||||
|
trigger: 'axis',
|
||||||
|
backgroundColor: 'rgba(1, 13, 19, 0.5)',
|
||||||
|
borderWidth: 1,
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
// label: {
|
||||||
|
// show: true,
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
|
||||||
|
textStyle: {
|
||||||
|
color: 'rgba(212, 232, 254, 1)'
|
||||||
|
// fontSize: fontChart(0.24),
|
||||||
|
},
|
||||||
|
extraCssText: 'z-index:2'
|
||||||
},
|
},
|
||||||
name: 'km/h',
|
name: 'km/h',
|
||||||
series: [],
|
series: [],
|
||||||
|
|
@ -175,7 +190,15 @@ export default {
|
||||||
// myChart.resize();
|
// myChart.resize();
|
||||||
// })
|
// })
|
||||||
},
|
},
|
||||||
|
//传值对应字段返回相应字段数组
|
||||||
|
extractKeyValues(arr, key) {
|
||||||
|
return arr.map((item) => {
|
||||||
|
if (key == 'speed' && item[key]) {
|
||||||
|
return Math.abs(item[key]);
|
||||||
|
}
|
||||||
|
return item[key];
|
||||||
|
});
|
||||||
|
},
|
||||||
getMessage(newVal, title, timeMode) {
|
getMessage(newVal, title, timeMode) {
|
||||||
if (newVal) {
|
if (newVal) {
|
||||||
var series = [
|
var series = [
|
||||||
|
|
@ -195,52 +218,87 @@ export default {
|
||||||
|
|
||||||
if (title === '类型') {
|
if (title === '类型') {
|
||||||
this.tooltip = {
|
this.tooltip = {
|
||||||
formatter: '{a} {b}:{c}个',
|
|
||||||
show: true,
|
show: true,
|
||||||
confine: true
|
confine: true,
|
||||||
|
trigger: 'axis',
|
||||||
|
backgroundColor: 'rgba(1, 13, 19, 0.5)',
|
||||||
|
borderWidth: 1,
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
// label: {
|
||||||
|
// show: true,
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
|
||||||
|
textStyle: {
|
||||||
|
color: 'rgba(212, 232, 254, 1)'
|
||||||
|
// fontSize: fontChart(0.24),
|
||||||
|
},
|
||||||
|
extraCssText: 'z-index:2'
|
||||||
};
|
};
|
||||||
this.name = '';
|
this.name = '';
|
||||||
series[0].name = '总量';
|
series[0].name = '总量';
|
||||||
|
//获取每种类型数据逻辑有问题
|
||||||
// 映射出类型数组
|
// 映射出类型数组
|
||||||
let arr = newVal.map(function (ele) {
|
// let arr = newVal.map(function (ele) {
|
||||||
if (ele.type_data != null) {
|
// if (ele.type_data != null) {
|
||||||
return ele.type_data;
|
// return ele.type_data;
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
var mapN = [];
|
// var mapN = [];
|
||||||
if (arr && arr.length > 0) {
|
// if (arr && arr.length > 0) {
|
||||||
for (var t = 0; t < arr.length; t++) {
|
// for (var t = 0; t < arr.length; t++) {
|
||||||
if (arr[t] && arr[t].length > 0) {
|
// if (arr[t] && arr[t].length > 0) {
|
||||||
for (var i = 0; i < arr[t].length; i++) {
|
// for (var i = 0; i < arr[t].length; i++) {
|
||||||
mapN.push(arr[t][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
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// console.log('newVal', newVal);
|
||||||
|
//获取每种类型数据逻辑有问题
|
||||||
|
// mapN.forEach((ele, index) => {
|
||||||
|
|
||||||
|
// if (lineArr[index] && lineArr[index].data) {
|
||||||
|
// let t = ele.quantity
|
||||||
|
// if(ele.value||ele.value===0){
|
||||||
|
// t = ele.value
|
||||||
|
// }
|
||||||
|
// lineArr[index].data.push(t);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// console.log('lineArr', lineArr);
|
||||||
var lineArr = [];
|
var lineArr = [];
|
||||||
if (newVal[0].type_data != undefined) {
|
let seriesArr = this.extractKeyValues(newVal, 'type_data');
|
||||||
newVal[0].type_data.forEach((ele) => {
|
if (seriesArr && seriesArr.length > 0) {
|
||||||
|
for (let i = 0; i < seriesArr[0].length; i++) {
|
||||||
|
const item = seriesArr[0][i]; //quantity
|
||||||
|
const valueList = seriesArr.map((arr) => {
|
||||||
|
let t = arr[i].value;
|
||||||
|
if (arr[i].quantity || arr[i].quantity === 0) {
|
||||||
|
t = arr[i].quantity;
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
});
|
||||||
lineArr.push({
|
lineArr.push({
|
||||||
name: ele.name,
|
name: item.name,
|
||||||
|
data: valueList,
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: [],
|
|
||||||
smooth: true
|
smooth: true
|
||||||
});
|
});
|
||||||
});
|
|
||||||
}
|
|
||||||
mapN.forEach((ele, index) => {
|
|
||||||
if (lineArr[index] && lineArr[index].data) {
|
|
||||||
lineArr[index].data.push(ele.quantity);
|
|
||||||
}
|
}
|
||||||
// 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);
|
|
||||||
// }
|
|
||||||
});
|
|
||||||
if (lineArr && lineArr.length > 0) {
|
if (lineArr && lineArr.length > 0) {
|
||||||
for (let j = 0; j < lineArr.length; j++) {
|
for (let j = 0; j < lineArr.length; j++) {
|
||||||
series.push(lineArr[j]);
|
series.push(lineArr[j]);
|
||||||
|
|
@ -251,8 +309,12 @@ export default {
|
||||||
let mapNR1 = [];
|
let mapNR1 = [];
|
||||||
newVal.map(function (ele) {
|
newVal.map(function (ele) {
|
||||||
if (ele.type_data != null) {
|
if (ele.type_data != null) {
|
||||||
var sum = ele.type_data.reduce(function (prev, cur) {
|
let sum = ele.type_data.reduce(function (prev, cur) {
|
||||||
return cur.quantity + prev;
|
let t = cur.quantity;
|
||||||
|
if (cur.value || cur.value === 0) {
|
||||||
|
t = cur.value;
|
||||||
|
}
|
||||||
|
return t + prev;
|
||||||
}, 0);
|
}, 0);
|
||||||
mapNR1.push(sum);
|
mapNR1.push(sum);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
<!-- 实时触发 -->
|
<!-- 实时触发 -->
|
||||||
|
|
||||||
<!-- 实时触发 -->
|
<!-- 实时触发 -->
|
||||||
<div v-if="msg">
|
<div v-if="msg && msg.length > 0">
|
||||||
<el-table :data="msg" style="width: 100%" v-if="triggerType == '实时触发'">
|
<el-table :data="msg" style="width: 100%" v-if="triggerType == '实时触发'">
|
||||||
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
|
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
|
||||||
<el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
|
<el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
|
||||||
|
|
@ -42,10 +42,8 @@
|
||||||
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
|
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
|
||||||
<el-table-column align="center" prop="occ" label="占用状态"></el-table-column>
|
<el-table-column align="center" prop="occ" label="占用状态"></el-table-column>
|
||||||
<el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
|
<el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
|
||||||
|
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
||||||
|
|
||||||
<!-- 固定间隔 -->
|
<!-- 固定间隔 -->
|
||||||
<el-table :data="msg" style="width: 100%" v-if="triggerType == '固定间隔'">
|
<el-table :data="msg" style="width: 100%" v-if="triggerType == '固定间隔'">
|
||||||
<el-table-column align="center" prop="gate_id" label="断面编号"></el-table-column>
|
<el-table-column align="center" prop="gate_id" label="断面编号"></el-table-column>
|
||||||
|
|
@ -84,17 +82,22 @@
|
||||||
<el-dialog title="编辑" :visible.sync="dialogVisible" width="40%">
|
<el-dialog title="编辑" :visible.sync="dialogVisible" width="40%">
|
||||||
<el-form :model="msg" label-width="80px">
|
<el-form :model="msg" label-width="80px">
|
||||||
<el-form-item label="val1">
|
<el-form-item label="val1">
|
||||||
<el-time-select placeholder="起始时间" v-model="startTime"
|
<el-time-select
|
||||||
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }">
|
placeholder="起始时间"
|
||||||
|
v-model="startTime"
|
||||||
|
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
|
||||||
|
>
|
||||||
</el-time-select>
|
</el-time-select>
|
||||||
<el-time-select placeholder="结束时间" v-model="endTime"
|
<el-time-select
|
||||||
:picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }">
|
placeholder="结束时间"
|
||||||
|
v-model="endTime"
|
||||||
|
:picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
|
||||||
|
>
|
||||||
</el-time-select>
|
</el-time-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="val2">
|
<el-form-item label="val2">
|
||||||
<el-select v-model="value" placeholder="请选择">
|
<el-select v-model="value" placeholder="请选择">
|
||||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||||
</el-option>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!-- <el-form-item label="val3">
|
<!-- <el-form-item label="val3">
|
||||||
|
|
@ -162,6 +165,15 @@ export default {
|
||||||
value: ''
|
value: ''
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
msg: {
|
||||||
|
handler(newVal) {
|
||||||
|
// console.log('断面', newVal);
|
||||||
|
// console.log('断面-triggerType', this.triggerType);
|
||||||
|
}
|
||||||
|
// immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleCommand(command) {
|
handleCommand(command) {
|
||||||
// 用户名下拉菜单选择事件
|
// 用户名下拉菜单选择事件
|
||||||
|
|
@ -169,19 +181,21 @@ export default {
|
||||||
this.dialogVisible = true;
|
this.dialogVisible = true;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onSubmit() { },
|
onSubmit() {},
|
||||||
handleClose() { }
|
handleClose() {}
|
||||||
},
|
},
|
||||||
mounted() { }
|
mounted() {}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
/deep/ .el-table{
|
/deep/ .el-table {
|
||||||
height: 709px !important;
|
height: 709px !important;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
}
|
}
|
||||||
.el-table::-webkit-scrollbar { width: 0 !important }
|
.el-table::-webkit-scrollbar {
|
||||||
|
width: 0 !important;
|
||||||
|
}
|
||||||
.tableContent {
|
.tableContent {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,12 +7,10 @@ export default {
|
||||||
name: 'thermalChart', //热点图组件
|
name: 'thermalChart', //热点图组件
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
thermalChartData:[]
|
thermalChartData: []
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {},
|
||||||
|
|
||||||
},
|
|
||||||
props: {
|
props: {
|
||||||
list: {
|
list: {
|
||||||
type: Array,
|
type: Array,
|
||||||
|
|
@ -25,7 +23,7 @@ export default {
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
type: String
|
type: String
|
||||||
},
|
}
|
||||||
// status: {
|
// status: {
|
||||||
// type: String
|
// type: String
|
||||||
// },
|
// },
|
||||||
|
|
@ -38,31 +36,31 @@ export default {
|
||||||
ODhanlde(odData) {
|
ODhanlde(odData) {
|
||||||
// console.log(odData,'oddata');
|
// console.log(odData,'oddata');
|
||||||
// var odData = this.odData
|
// var odData = this.odData
|
||||||
var chartData = []
|
var chartData = [];
|
||||||
var start = []
|
var start = [];
|
||||||
for (let i = 0; i < odData.length; i++) {
|
for (let i = 0; i < odData.length; i++) {
|
||||||
let item = odData[i].data
|
let item = odData[i].data;
|
||||||
for (let j = 0; j < item.length; j++) {
|
for (let j = 0; j < item.length; j++) {
|
||||||
start.push(item[j].start)
|
start.push(item[j].start);
|
||||||
// 数组去重
|
// 数组去重
|
||||||
|
|
||||||
// od图的数据
|
// od图的数据
|
||||||
chartData.push([i, j, item[j].quantity])
|
chartData.push([i, j, item[j].quantity]);
|
||||||
// console.log([i,j,item[j].val]);
|
// console.log([i,j,item[j].val]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// this.thermalChartData = chartData
|
// this.thermalChartData = chartData
|
||||||
// console.log(chartData,'处理过后的odssssssssssssss');
|
// console.log(chartData,'处理过后的odssssssssssssss');
|
||||||
return chartData
|
return chartData;
|
||||||
// console.log(chartData, this.unique(start), 'od图的数据');
|
// console.log(chartData, this.unique(start), 'od图的数据');
|
||||||
},
|
},
|
||||||
//数组去重
|
//数组去重
|
||||||
unique(arr) {
|
unique(arr) {
|
||||||
let newArr = []
|
let newArr = [];
|
||||||
arr.forEach(item => {
|
arr.forEach((item) => {
|
||||||
return newArr.includes(item) ? '' : newArr.push(item)
|
return newArr.includes(item) ? '' : newArr.push(item);
|
||||||
})
|
});
|
||||||
return newArr
|
return newArr;
|
||||||
},
|
},
|
||||||
// 绘制热力图
|
// 绘制热力图
|
||||||
drawThermalChart(odData, startEnd) {
|
drawThermalChart(odData, startEnd) {
|
||||||
|
|
@ -70,16 +68,16 @@ export default {
|
||||||
let option = {
|
let option = {
|
||||||
dataZoom: [
|
dataZoom: [
|
||||||
{
|
{
|
||||||
id: "dataZoomY",
|
id: 'dataZoomY',
|
||||||
type: "slider",
|
type: 'slider',
|
||||||
yAxisIndex: [0],
|
yAxisIndex: [0],
|
||||||
startValue: 0,
|
startValue: 0,
|
||||||
endValue: 10,
|
endValue: 10,
|
||||||
filterMode: "empty",
|
filterMode: 'empty'
|
||||||
},
|
}
|
||||||
],
|
],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
position: "top",
|
position: 'top'
|
||||||
// formatter: function (params) {
|
// formatter: function (params) {
|
||||||
// return (
|
// return (
|
||||||
// "学历：" + days[params.value[1]] + "<br/>" + "人数：" + params.data[2]
|
// "学历：" + days[params.value[1]] + "<br/>" + "人数：" + params.data[2]
|
||||||
|
|
@ -88,81 +86,83 @@ export default {
|
||||||
},
|
},
|
||||||
animation: false,
|
animation: false,
|
||||||
grid: {
|
grid: {
|
||||||
left: "3%",
|
left: '3%',
|
||||||
right: "8%",
|
right: '8%',
|
||||||
bottom: "8%",
|
bottom: '8%',
|
||||||
containLabel: true,
|
containLabel: true
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: "category",
|
type: 'category',
|
||||||
data: startEnd.start.split(','),
|
data: startEnd.start.split(','),
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "#000",
|
color: '#000'
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
interval: 0,
|
interval: 0,
|
||||||
rotate: 40,
|
rotate: 40
|
||||||
},
|
},
|
||||||
splitArea: {
|
splitArea: {
|
||||||
show: true,
|
show: true
|
||||||
},
|
}
|
||||||
// name: "镇街",
|
// name: "镇街",
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: "category",
|
type: 'category',
|
||||||
data: startEnd.end.split(','),
|
data: startEnd.end.split(','),
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: "#000",
|
color: '#000'
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
interval: 0,
|
interval: 0,
|
||||||
rotate: 40,
|
rotate: 40
|
||||||
},
|
},
|
||||||
splitArea: {
|
splitArea: {
|
||||||
show: true,
|
show: true
|
||||||
},
|
}
|
||||||
// name: "",
|
// name: "",
|
||||||
},
|
},
|
||||||
visualMap: {
|
visualMap: {
|
||||||
min: 1,
|
min: 1,
|
||||||
max: 50,
|
max: 50,
|
||||||
calculable: true,
|
calculable: true,
|
||||||
orient: "horizontal",
|
orient: 'horizontal',
|
||||||
left: "center",
|
left: 'center',
|
||||||
bottom: "1%",
|
bottom: '1%',
|
||||||
text: ["50", "1"], // 文本，默认为数值文本
|
text: ['50', '1'], // 文本，默认为数值文本
|
||||||
//color:['#20a0ff','#D2EDFF'],
|
//color:['#20a0ff','#D2EDFF'],
|
||||||
calculable: false,
|
calculable: false,
|
||||||
color: ["#22DDDD", "#fec42c", "#80F1BE"],
|
color: ['#22DDDD', '#fec42c', '#80F1BE']
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "OD图",
|
name: 'OD图',
|
||||||
type: "heatmap",
|
type: 'heatmap',
|
||||||
data: this.ODhanlde(odData),
|
data: this.ODhanlde(odData),
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
show: true,
|
show: true
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
emphasis: {
|
emphasis: {
|
||||||
shadowBlur: 10,
|
shadowBlur: 10,
|
||||||
shadowColor: "rgba(120, 0, 0, 0.5)",
|
shadowColor: 'rgba(120, 0, 0, 0.5)'
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
],
|
]
|
||||||
};
|
};
|
||||||
|
if (myChart) {
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
myChart.setOption(option);
|
|
||||||
window.addEventListener('resize', function () {
|
|
||||||
myChart.resize();
|
|
||||||
});
|
|
||||||
// this.$nextTick(() => {
|
// this.$nextTick(() => {
|
||||||
// myChart.setOption(option)
|
// myChart.setOption(option)
|
||||||
// myChart.resize();
|
// myChart.resize();
|
||||||
|
|
@ -173,12 +173,8 @@ export default {
|
||||||
// if (this.list) {
|
// if (this.list) {
|
||||||
// this.drawThermalChart()
|
// this.drawThermalChart()
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {}
|
||||||
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,284 @@
|
||||||
|
<template>
|
||||||
|
<div :id="echartsRef" ref="echartsBar"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'echartsBar', //折线图组件
|
||||||
|
props: {
|
||||||
|
intersectionName: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chatShowType: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
echartsRef: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
dataList: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
timeMode: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null,
|
||||||
|
chartData: {
|
||||||
|
yData: [],
|
||||||
|
xData: []
|
||||||
|
}, //表格数据
|
||||||
|
seriesList: [] //类型数组
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
//传值对应字段返回相应字段数组
|
||||||
|
initEcharts() {
|
||||||
|
// if (this.dataList.length > 10) {
|
||||||
|
// this.dataList = this.dataList.slice(-10);
|
||||||
|
// }
|
||||||
|
if (this.timeMode == '实时触发') {
|
||||||
|
this.chartData.xData = [];
|
||||||
|
this.chartData.yData = [];
|
||||||
|
// debugger;
|
||||||
|
// if (this.dataList[0].type_data.length > 0) {
|
||||||
|
// for (let i = 0; i < this.dataList[0].type_data.length; i++) {
|
||||||
|
// this.chartData.yData.push(this.dataList[0].type_data[i].quantity);
|
||||||
|
// this.chartData.xData.push(this.dataList[0].type_data[i].name);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
if (this.dataList.length > 0 && this.dataList[0].type_data) {
|
||||||
|
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
|
||||||
|
let quantity = this.dataList[0].type_data[j].quantity;
|
||||||
|
if (this.dataList[0].type_data[j].value || this.dataList[0].type_data[j].value === 0) {
|
||||||
|
quantity = this.dataList[0].type_data[j].value;
|
||||||
|
}
|
||||||
|
this.chartData.yData.push(quantity);
|
||||||
|
this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
||||||
|
// if (this.dataList[0].type_data[j].value == undefined) {
|
||||||
|
// this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
|
||||||
|
// this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
||||||
|
// } else {
|
||||||
|
// this.chartData.yData.push(this.dataList[0].type_data[j].value);
|
||||||
|
// this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (this.timeMode == '固定时刻') {
|
||||||
|
// for (let i = 0; i < this.dataList.length; i++) {
|
||||||
|
// this.chartData.xData = [];
|
||||||
|
// this.chartData.yData = [];
|
||||||
|
// for (let j = 0; j < this.dataList[i].type_data.length; j++) {
|
||||||
|
// if (this.dataList[i].type_data[j].value == undefined) {
|
||||||
|
// this.chartData.yData.push(this.dataList[i].type_data[j].quantity);
|
||||||
|
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
|
||||||
|
// } else {
|
||||||
|
// this.chartData.yData.push(this.dataList[i].type_data[j].value);
|
||||||
|
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
this.chartData.xData = [];
|
||||||
|
this.chartData.yData = [];
|
||||||
|
if (this.dataList.length > 0 && this.dataList[0].type_data) {
|
||||||
|
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
|
||||||
|
let quantity = this.dataList[0].type_data[j].quantity;
|
||||||
|
if (this.dataList[0].type_data[j].value || this.dataList[0].type_data[j].value === 0) {
|
||||||
|
quantity = this.dataList[0].type_data[j].value;
|
||||||
|
}
|
||||||
|
this.chartData.yData.push(quantity);
|
||||||
|
this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
||||||
|
// if (this.dataList[0].type_data[j].value == undefined) {
|
||||||
|
// this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
|
||||||
|
// this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
||||||
|
// } else {
|
||||||
|
// this.chartData.yData.push(this.dataList[0].type_data[j].value);
|
||||||
|
// this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (this.timeMode == '固定间隔') {
|
||||||
|
// for (let i = 0; i < this.dataList.length; i++) {
|
||||||
|
// this.chartData.xData = [];
|
||||||
|
// this.chartData.yData = [];
|
||||||
|
// for (let j = 0; j < this.dataList[i].type_data.length; j++) {
|
||||||
|
// if (this.dataList[i].type_data[j].value == undefined) {
|
||||||
|
// this.chartData.yData.push(this.dataList[i].type_data[j].quantity);
|
||||||
|
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
|
||||||
|
// } else {
|
||||||
|
// this.chartData.yData.push(this.dataList[i].type_data[j].value);
|
||||||
|
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
this.chartData.xData = [];
|
||||||
|
this.chartData.yData = [];
|
||||||
|
if (this.dataList.length > 0 && this.dataList[0].type_data) {
|
||||||
|
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
|
||||||
|
let quantity = this.dataList[0].type_data[j].quantity;
|
||||||
|
if (this.dataList[0].type_data[j].value || this.dataList[0].type_data[j].value === 0) {
|
||||||
|
quantity = this.dataList[0].type_data[j].value;
|
||||||
|
}
|
||||||
|
this.chartData.yData.push(quantity);
|
||||||
|
this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
||||||
|
// if (this.dataList[0].type_data[j].value == undefined) {
|
||||||
|
// this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
|
||||||
|
// this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
||||||
|
// } else {
|
||||||
|
// this.chartData.yData.push(this.dataList[0].type_data[j].value);
|
||||||
|
// this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let myChart = this.chart;
|
||||||
|
let option = {
|
||||||
|
color: ['#7262FD', '#FC5A5A'],
|
||||||
|
tooltip: {
|
||||||
|
confine: true
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '5%',
|
||||||
|
left: '5%',
|
||||||
|
right: '5%',
|
||||||
|
bottom: '0%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: this.chartData.xData,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#000',
|
||||||
|
rotate: 30
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
min: 0,
|
||||||
|
minInterval: 1,
|
||||||
|
splitArea: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
|
||||||
|
axisLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#eeebeb',
|
||||||
|
type: 'dashed' // dotted 虚线
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#000',
|
||||||
|
fontFamily: 'Bebas'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 20,
|
||||||
|
itemStyle: { barBorderRadius: [5, 5, 0, 0] },
|
||||||
|
name: '时间',
|
||||||
|
data: this.chartData.yData
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
if (myChart) {
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
this.$nextTick(() => {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
let that = this;
|
||||||
|
const $dom = document.getElementById(this.echartsRef);
|
||||||
|
$dom.style.width = '440px';
|
||||||
|
$dom.style.height = '260px';
|
||||||
|
// setTimeout(() => {
|
||||||
|
that.$nextTick(() => {
|
||||||
|
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||||
|
if (this.chart == null) {
|
||||||
|
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||||
|
}
|
||||||
|
that.initEcharts();
|
||||||
|
});
|
||||||
|
// }, 300);
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
intersectionName: {
|
||||||
|
handler: function (oldValues, newValues) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initEcharts();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chatShowType: {
|
||||||
|
handler: function (oldValues, newValues) {}
|
||||||
|
},
|
||||||
|
echartsRef: {
|
||||||
|
handler: function (oldValues, newValues) {
|
||||||
|
console.log('old', oldValues);
|
||||||
|
console.log('newV', newValues);
|
||||||
|
let that = this;
|
||||||
|
setTimeout(() => {
|
||||||
|
that.$nextTick(() => {
|
||||||
|
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||||
|
if (this.chart == null) {
|
||||||
|
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||||
|
}
|
||||||
|
that.initEcharts();
|
||||||
|
});
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dataList: {
|
||||||
|
handler: function (oldValues, newValues) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||||
|
if (this.chart == null) {
|
||||||
|
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||||
|
}
|
||||||
|
this.initEcharts();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
#echartsBar {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,268 +1,128 @@
|
||||||
<template>
|
<template>
|
||||||
<div :id="echartsRef" ref="echartsBar"></div>
|
<div :id="echartsRef" ref="echartsBar"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "echartsBar", //折线图组件
|
name: 'echartsBar',
|
||||||
props: {
|
props: {
|
||||||
intersectionName: {
|
intersectionName: { type: Array, default: () => [] },
|
||||||
type: Array,
|
chatShowType: { type: String },
|
||||||
default() {
|
echartsRef: { type: String },
|
||||||
return [];
|
dataList: { type: Array, default: () => [] },
|
||||||
},
|
timeMode: { type: String },
|
||||||
},
|
},
|
||||||
chatShowType: {
|
data() {
|
||||||
type: String,
|
return {
|
||||||
},
|
chart: null,
|
||||||
echartsRef: {
|
chartData: { yData: [], xData: [] },
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
dataList: {
|
|
||||||
type: Array,
|
|
||||||
default() {
|
|
||||||
return [];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
timeMode: {
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
chart: null,
|
|
||||||
chartData: {
|
|
||||||
yData: [],
|
|
||||||
xData: [],
|
|
||||||
}, //表格数据
|
|
||||||
seriesList: [], //类型数组
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
//传值对应字段返回相应字段数组
|
|
||||||
initEcharts() {
|
|
||||||
// if (this.dataList.length > 10) {
|
|
||||||
// this.dataList = this.dataList.slice(-10);
|
|
||||||
// }
|
|
||||||
if (this.timeMode == "实时触发") {
|
|
||||||
this.chartData.xData = [];
|
|
||||||
this.chartData.yData = [];
|
|
||||||
// debugger;
|
|
||||||
// if (this.dataList[0].type_data.length > 0) {
|
|
||||||
// for (let i = 0; i < this.dataList[0].type_data.length; i++) {
|
|
||||||
// this.chartData.yData.push(this.dataList[0].type_data[i].quantity);
|
|
||||||
// this.chartData.xData.push(this.dataList[0].type_data[i].name);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
if(this.dataList.length>0&&this.dataList[0].type_data){
|
|
||||||
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
|
|
||||||
if (this.dataList[0].type_data[j].value == undefined) {
|
|
||||||
this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
|
|
||||||
this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
|
||||||
} else {
|
|
||||||
this.chartData.yData.push(this.dataList[0].type_data[j].value);
|
|
||||||
this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (this.timeMode == "固定时刻") {
|
|
||||||
// for (let i = 0; i < this.dataList.length; i++) {
|
|
||||||
// this.chartData.xData = [];
|
|
||||||
// this.chartData.yData = [];
|
|
||||||
// for (let j = 0; j < this.dataList[i].type_data.length; j++) {
|
|
||||||
// if (this.dataList[i].type_data[j].value == undefined) {
|
|
||||||
// this.chartData.yData.push(this.dataList[i].type_data[j].quantity);
|
|
||||||
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
|
|
||||||
// } else {
|
|
||||||
// this.chartData.yData.push(this.dataList[i].type_data[j].value);
|
|
||||||
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
this.chartData.xData = [];
|
|
||||||
this.chartData.yData = [];
|
|
||||||
if(this.dataList.length>0&&this.dataList[0].type_data){
|
|
||||||
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
|
|
||||||
if (this.dataList[0].type_data[j].value == undefined) {
|
|
||||||
this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
|
|
||||||
this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
|
||||||
} else {
|
|
||||||
this.chartData.yData.push(this.dataList[0].type_data[j].value);
|
|
||||||
this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (this.timeMode == "固定间隔") {
|
|
||||||
// for (let i = 0; i < this.dataList.length; i++) {
|
|
||||||
// this.chartData.xData = [];
|
|
||||||
// this.chartData.yData = [];
|
|
||||||
// for (let j = 0; j < this.dataList[i].type_data.length; j++) {
|
|
||||||
// if (this.dataList[i].type_data[j].value == undefined) {
|
|
||||||
// this.chartData.yData.push(this.dataList[i].type_data[j].quantity);
|
|
||||||
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
|
|
||||||
// } else {
|
|
||||||
// this.chartData.yData.push(this.dataList[i].type_data[j].value);
|
|
||||||
// this.chartData.xData.push(this.dataList[i].type_data[j].name);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
this.chartData.xData = [];
|
|
||||||
this.chartData.yData = [];
|
|
||||||
if(this.dataList.length>0&&this.dataList[0].type_data){
|
|
||||||
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
|
|
||||||
if (this.dataList[0].type_data[j].value == undefined) {
|
|
||||||
this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
|
|
||||||
this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
|
||||||
} else {
|
|
||||||
this.chartData.yData.push(this.dataList[0].type_data[j].value);
|
|
||||||
this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let myChart = this.chart;
|
|
||||||
let option = {
|
|
||||||
color: ["#7262FD", "#FC5A5A"],
|
|
||||||
tooltip: {
|
|
||||||
confine: true,
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: "30%",
|
|
||||||
left: "5%",
|
|
||||||
right: "5%",
|
|
||||||
bottom: "8%",
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: "category",
|
|
||||||
data: this.chartData.xData,
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#000",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
fontSize: 12,
|
|
||||||
color: "#000",
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: "value",
|
|
||||||
min: 0,
|
|
||||||
minInterval: 1,
|
|
||||||
splitArea: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#eeebeb",
|
|
||||||
type: "dashed", // dotted 虚线
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
fontSize: 12,
|
|
||||||
color: "#000",
|
|
||||||
fontFamily: "Bebas",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: "bar",
|
|
||||||
barWidth: 20,
|
|
||||||
itemStyle: { barBorderRadius: [5, 5, 0, 0] },
|
|
||||||
name: "时间",
|
|
||||||
data: this.chartData.yData,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
myChart.setOption(option);
|
|
||||||
window.addEventListener("resize", () => {
|
|
||||||
myChart.resize();
|
|
||||||
});
|
|
||||||
this.$nextTick(() => {
|
|
||||||
myChart.resize();
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
},
|
computed: {
|
||||||
mounted() {
|
option() {
|
||||||
let that = this;
|
return {
|
||||||
const $dom = document.getElementById(this.echartsRef);
|
color: ['#7262FD', '#FC5A5A'],
|
||||||
$dom.style.width = "440px";
|
tooltip: { confine: true },
|
||||||
$dom.style.height = "260px";
|
grid: { top: '5%', left: '5%', right: '5%', bottom: '0%', containLabel: true },
|
||||||
setTimeout(() => {
|
xAxis: {
|
||||||
that.$nextTick(() => {
|
type: 'category',
|
||||||
this.chart = this.$echarts.getInstanceByDom(
|
data: this.chartData.xData,
|
||||||
document.getElementById(this.echartsRef)
|
axisLine: { lineStyle: { color: '#000' } },
|
||||||
);
|
axisLabel: { interval: 0, fontSize: 12, color: '#000', rotate: 30 },
|
||||||
if (this.chart == null) {
|
axisTick: { show: false },
|
||||||
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
},
|
||||||
}
|
yAxis: [
|
||||||
that.initEcharts();
|
{
|
||||||
});
|
type: 'value',
|
||||||
}, 300);
|
min: 0,
|
||||||
},
|
minInterval: 1,
|
||||||
watch: {
|
splitArea: { show: false },
|
||||||
intersectionName: {
|
axisLine: { show: true },
|
||||||
handler: function (oldValues, newValues) {
|
axisTick: { show: false },
|
||||||
this.$nextTick(() => {
|
splitLine: { lineStyle: { color: '#eeebeb', type: 'dashed' } },
|
||||||
this.initEcharts();
|
axisLabel: { fontSize: 12, color: '#000', fontFamily: 'Bebas' },
|
||||||
});
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 20,
|
||||||
|
itemStyle: { barBorderRadius: [5, 5, 0, 0] },
|
||||||
|
name: '时间',
|
||||||
|
data: this.chartData.yData,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
chatShowType: {
|
methods: {
|
||||||
handler: function (oldValues, newValues) {},
|
initData() {
|
||||||
},
|
this.chartData.xData = [];
|
||||||
echartsRef: {
|
this.chartData.yData = [];
|
||||||
handler: function (oldValues, newValues) {
|
|
||||||
console.log("old", oldValues);
|
if (this.dataList.length > 0 && this.dataList[0].type_data) {
|
||||||
console.log("newV", newValues);
|
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
|
||||||
let that = this;
|
let quantity = this.dataList[0].type_data[j].quantity;
|
||||||
setTimeout(() => {
|
if (this.dataList[0].type_data[j].value || this.dataList[0].type_data[j].value === 0) {
|
||||||
that.$nextTick(() => {
|
quantity = this.dataList[0].type_data[j].value;
|
||||||
this.chart = this.$echarts.getInstanceByDom(
|
|
||||||
document.getElementById(this.echartsRef)
|
|
||||||
);
|
|
||||||
if (this.chart == null) {
|
|
||||||
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
|
||||||
}
|
}
|
||||||
that.initEcharts();
|
this.chartData.yData.push(quantity);
|
||||||
});
|
this.chartData.xData.push(this.dataList[0].type_data[j].name);
|
||||||
}, 300);
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initEcharts() {
|
||||||
|
this.initData();
|
||||||
|
let myChart = this.chart;
|
||||||
|
if (myChart === null) {
|
||||||
|
myChart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||||
|
}
|
||||||
|
|
||||||
|
myChart.setOption(this.option);
|
||||||
|
|
||||||
|
window.addEventListener('resize', () => myChart.resize());
|
||||||
|
|
||||||
|
this.$nextTick(() => myChart.resize());
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
dataList: {
|
mounted() {
|
||||||
handler: function (oldValues, newValues) {
|
const $dom = document.getElementById(this.echartsRef);
|
||||||
|
$dom.style.width = '440px';
|
||||||
|
$dom.style.height = '260px';
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.chart = this.$echarts.getInstanceByDom(
|
this.chart = this.$echarts.init(this.$el);
|
||||||
document.getElementById(this.echartsRef)
|
// this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||||
);
|
|
||||||
if (this.chart == null) {
|
|
||||||
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
|
||||||
}
|
|
||||||
this.initEcharts();
|
this.initEcharts();
|
||||||
});
|
});
|
||||||
|
}, 300);
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
intersectionName: {
|
||||||
|
handler() {
|
||||||
|
this.$nextTick(this.initEcharts);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
chatShowType: { handler() {} },
|
||||||
|
echartsRef: {
|
||||||
|
handler() {
|
||||||
|
setTimeout(() => this.$nextTick(this.initEcharts), 300);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dataList: {
|
||||||
|
handler() {
|
||||||
|
this.$nextTick(this.initEcharts);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
};
|
||||||
};
|
</script>
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
#echartsBar {
|
#echartsBar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
@ -66,6 +66,37 @@ export default {
|
||||||
return item[key];
|
return item[key];
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
//过滤重复的 time 字段，保留每个 time 最后一个对象
|
||||||
|
filteredArrayFun(originalArray, targetTime) {
|
||||||
|
// 过滤重复的 time 字段
|
||||||
|
let uniqueArray = originalArray.reduce((accumulator, currentValue) => {
|
||||||
|
const existingItemIndex = accumulator.findIndex((item) => item.time === currentValue.time);
|
||||||
|
|
||||||
|
if (existingItemIndex === -1) {
|
||||||
|
accumulator.push(currentValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
return accumulator;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 确保 targetTime 是有效的日期字符串
|
||||||
|
const targetDate = targetTime ? new Date(targetTime) : null;
|
||||||
|
|
||||||
|
// 过滤比目标时间小的对象
|
||||||
|
if (targetDate) {
|
||||||
|
uniqueArray = uniqueArray.filter((item) => new Date(item.time) > targetDate);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按照时间从小到大排序
|
||||||
|
const sortedArray = uniqueArray.sort((a, b) => {
|
||||||
|
const dateA = new Date(a.time);
|
||||||
|
const dateB = new Date(b.time);
|
||||||
|
return dateA - dateB;
|
||||||
|
});
|
||||||
|
|
||||||
|
return sortedArray;
|
||||||
|
},
|
||||||
|
|
||||||
//数据判断处理
|
//数据判断处理
|
||||||
dataProcessing(val) {
|
dataProcessing(val) {
|
||||||
if (val && val.length > 10) {
|
if (val && val.length > 10) {
|
||||||
|
|
@ -73,23 +104,35 @@ export default {
|
||||||
// this.typeData = this.typeData.slice(-10);
|
// this.typeData = this.typeData.slice(-10);
|
||||||
}
|
}
|
||||||
if (val != null) {
|
if (val != null) {
|
||||||
|
let xData = [],
|
||||||
|
yData = [];
|
||||||
|
let targetTime = '';
|
||||||
|
if (this.chartData.xData.length > 0) {
|
||||||
|
targetTime = this.chartData.xData[this.chartData.xData.length - 1];
|
||||||
|
}
|
||||||
|
if (this.componentType != '类型') {
|
||||||
|
//类型种类特殊不能去除时间重复项，不走下面去重逻辑
|
||||||
|
val = this.filteredArrayFun(val, targetTime);
|
||||||
|
}
|
||||||
|
|
||||||
if (this.timeMode == '实时触发') {
|
if (this.timeMode == '实时触发') {
|
||||||
if (this.componentType == '车头时距') {
|
if (this.componentType == '车头时距') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
xData = this.extractKeyValues(val, 'time');
|
||||||
this.chartData.yData = this.extractKeyValues(val, 'headway');
|
yData = this.extractKeyValues(val, 'headway');
|
||||||
} else if (this.componentType == '流量') {
|
} else if (this.componentType == '流量') {
|
||||||
if (this.flowType == '入流') {
|
if (this.flowType == '入流') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
xData = this.extractKeyValues(val, 'time');
|
||||||
this.chartData.yData = this.extractKeyValues(val, 'in_flow');
|
yData = this.extractKeyValues(val, 'in_flow');
|
||||||
} else if (this.flowType == '出流') {
|
} else if (this.flowType == '出流') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
xData = this.extractKeyValues(val, 'time');
|
||||||
this.chartData.yData = this.extractKeyValues(val, 'out_flow');
|
yData = this.extractKeyValues(val, 'out_flow');
|
||||||
}
|
}
|
||||||
} else if (this.componentType == '速度') {
|
} else if (this.componentType == '速度') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
xData = this.extractKeyValues(val, 'time');
|
||||||
this.chartData.yData = this.extractKeyValues(val, 'speed');
|
yData = this.extractKeyValues(val, 'speed');
|
||||||
} else if (this.componentType == '类型') {
|
} else if (this.componentType == '类型') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time').reverse();
|
// console.log('实时触发-类型-', val);
|
||||||
|
xData = this.extractKeyValues(val, 'time');
|
||||||
let seriesArr = this.extractKeyValues(val, 'type_data');
|
let seriesArr = this.extractKeyValues(val, 'type_data');
|
||||||
const transformedData = [];
|
const transformedData = [];
|
||||||
if (seriesArr && seriesArr.length > 0) {
|
if (seriesArr && seriesArr.length > 0) {
|
||||||
|
|
@ -119,31 +162,32 @@ export default {
|
||||||
name: '总数',
|
name: '总数',
|
||||||
value: totalCountList
|
value: totalCountList
|
||||||
});
|
});
|
||||||
this.seriesList = transformedData;
|
this.seriesList = this.seriesList.concat(transformedData).slice(-10);
|
||||||
} else if (this.componentType == '检测数') {
|
} else if (this.componentType == '检测数') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
xData = this.extractKeyValues(val, 'time');
|
||||||
this.chartData.yData = this.extractKeyValues(val, 'n_stay');
|
yData = this.extractKeyValues(val, 'n_stay');
|
||||||
} else if (this.componentType == '排队数') {
|
} else if (this.componentType == '排队数') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
xData = this.extractKeyValues(val, 'time');
|
||||||
this.chartData.yData = this.extractKeyValues(val, 'n_queue');
|
yData = this.extractKeyValues(val, 'n_queue');
|
||||||
}
|
}
|
||||||
} else if (this.timeMode == '固定时刻') {
|
} else if (this.timeMode == '固定时刻') {
|
||||||
if (this.componentType == '车头时距') {
|
if (this.componentType == '车头时距') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
xData = this.extractKeyValues(val, 'time');
|
||||||
this.chartData.yData = this.extractKeyValues(val, 'headway');
|
yData = this.extractKeyValues(val, 'headway');
|
||||||
} else if (this.componentType == '流量') {
|
} else if (this.componentType == '流量') {
|
||||||
if (this.flowType == '入流') {
|
if (this.flowType == '入流') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
xData = this.extractKeyValues(val, 'time');
|
||||||
this.chartData.yData = this.extractKeyValues(val, 'in_flow');
|
yData = this.extractKeyValues(val, 'in_flow');
|
||||||
} else if (this.flowType == '出流') {
|
} else if (this.flowType == '出流') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
xData = this.extractKeyValues(val, 'time');
|
||||||
this.chartData.yData = this.extractKeyValues(val, 'out_flow');
|
yData = this.extractKeyValues(val, 'out_flow');
|
||||||
}
|
}
|
||||||
} else if (this.componentType == '速度') {
|
} else if (this.componentType == '速度') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
xData = this.extractKeyValues(val, 'time');
|
||||||
this.chartData.yData = this.extractKeyValues(val, 'speed');
|
yData = this.extractKeyValues(val, 'speed');
|
||||||
} else if (this.componentType == '类型') {
|
} else if (this.componentType == '类型') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time').reverse();
|
// this.chartData.xData = this.extractKeyValues(val, 'time');
|
||||||
|
xData = this.extractKeyValues(val, 'time');
|
||||||
let seriesArr = this.extractKeyValues(val, 'type_data');
|
let seriesArr = this.extractKeyValues(val, 'type_data');
|
||||||
// console.log('seriesArr-固定时刻', seriesArr);
|
// console.log('seriesArr-固定时刻', seriesArr);
|
||||||
const transformedData = [];
|
const transformedData = [];
|
||||||
|
|
@ -166,38 +210,41 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// console.log('transformedData-1',transformedData)
|
// console.log('transformedData-1',transformedData)
|
||||||
const totalCountList = transformedData[0].value.map((_, i) => {
|
let totalCountList = 0;
|
||||||
return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
|
if (transformedData.length > 0 && transformedData[0].value) {
|
||||||
});
|
totalCountList = transformedData[0].value.map((_, i) => {
|
||||||
|
return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
|
||||||
|
});
|
||||||
|
}
|
||||||
transformedData.push({
|
transformedData.push({
|
||||||
name: '总数',
|
name: '总数',
|
||||||
value: totalCountList
|
value: totalCountList
|
||||||
});
|
});
|
||||||
this.seriesList = transformedData;
|
this.seriesList = this.seriesList.concat(transformedData).slice(-10);
|
||||||
} else if (this.componentType == '检测数') {
|
} else if (this.componentType == '检测数') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
xData = this.extractKeyValues(val, 'time');
|
||||||
this.chartData.yData = this.extractKeyValues(val, 'n_stay');
|
yData = this.extractKeyValues(val, 'n_stay');
|
||||||
} else if (this.componentType == '排队数') {
|
} else if (this.componentType == '排队数') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
xData = this.extractKeyValues(val, 'time');
|
||||||
this.chartData.yData = this.extractKeyValues(val, 'n_queue');
|
yData = this.extractKeyValues(val, 'n_queue');
|
||||||
}
|
}
|
||||||
} else if (this.timeMode == '固定间隔') {
|
} else if (this.timeMode == '固定间隔') {
|
||||||
if (this.componentType == '车头时距') {
|
if (this.componentType == '车头时距') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
xData = this.extractKeyValues(val, 'time');
|
||||||
this.chartData.yData = this.extractKeyValues(val, 'ave_headway');
|
yData = this.extractKeyValues(val, 'ave_headway');
|
||||||
} else if (this.componentType == '流量') {
|
} else if (this.componentType == '流量') {
|
||||||
if (this.flowType == '入流') {
|
if (this.flowType == '入流') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
xData = this.extractKeyValues(val, 'time');
|
||||||
this.chartData.yData = this.extractKeyValues(val, 'in_flow');
|
yData = this.extractKeyValues(val, 'in_flow');
|
||||||
} else if (this.flowType == '出流') {
|
} else if (this.flowType == '出流') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
xData = this.extractKeyValues(val, 'time');
|
||||||
this.chartData.yData = this.extractKeyValues(val, 'out_flow');
|
yData = this.extractKeyValues(val, 'out_flow');
|
||||||
}
|
}
|
||||||
} else if (this.componentType == '速度') {
|
} else if (this.componentType == '速度') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
xData = this.extractKeyValues(val, 'time');
|
||||||
this.chartData.yData = this.extractKeyValues(val, 'speed');
|
yData = this.extractKeyValues(val, 'speed');
|
||||||
} else if (this.componentType == '类型') {
|
} else if (this.componentType == '类型') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time').reverse();
|
xData = this.extractKeyValues(val, 'time');
|
||||||
let seriesArr = this.extractKeyValues(val, 'type_data');
|
let seriesArr = this.extractKeyValues(val, 'type_data');
|
||||||
// console.log('固定间隔-类型-seriesArr-', seriesArr);
|
// console.log('固定间隔-类型-seriesArr-', seriesArr);
|
||||||
// console.log('固定间隔-类型-xData-', this.chartData.xData);
|
// console.log('固定间隔-类型-xData-', this.chartData.xData);
|
||||||
|
|
@ -232,19 +279,25 @@ export default {
|
||||||
name: '总数',
|
name: '总数',
|
||||||
value: totalCountList
|
value: totalCountList
|
||||||
});
|
});
|
||||||
this.seriesList = transformedData;
|
this.seriesList = this.seriesList.concat(transformedData).slice(-10);
|
||||||
// console.log('固定间隔-类型-transformedData-2', transformedData);
|
// console.log('固定间隔-类型-transformedData-2', transformedData);
|
||||||
} else if (this.componentType == '延误') {
|
} else if (this.componentType == '延误') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
xData = this.extractKeyValues(val, 'time');
|
||||||
this.chartData.yData = this.extractKeyValues(val, 'ave_delay');
|
yData = this.extractKeyValues(val, 'ave_delay');
|
||||||
} else if (this.componentType == '检测数') {
|
} else if (this.componentType == '检测数') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
xData = this.extractKeyValues(val, 'time');
|
||||||
this.chartData.yData = this.extractKeyValues(val, 'ave_stay');
|
yData = this.extractKeyValues(val, 'ave_stay');
|
||||||
} else if (this.componentType == '排队数') {
|
} else if (this.componentType == '排队数') {
|
||||||
this.chartData.xData = this.extractKeyValues(val, 'time');
|
xData = this.extractKeyValues(val, 'time');
|
||||||
this.chartData.yData = this.extractKeyValues(val, 'ave_queue');
|
yData = this.extractKeyValues(val, 'ave_queue');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.chartData.xData = this.chartData.xData.concat(xData).slice(-10);
|
||||||
|
if (this.componentType != '类型') {
|
||||||
|
//类型是特殊的不走这边处理
|
||||||
|
this.chartData.yData = this.chartData.yData.concat(yData).slice(-10);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
@ -354,7 +407,8 @@ export default {
|
||||||
{
|
{
|
||||||
// name: '流量_1-zone2-曲线图-实时触发',
|
// name: '流量_1-zone2-曲线图-实时触发',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: this.chartData.yData.reverse(),
|
// data: this.chartData.yData.reverse(),
|
||||||
|
data: this.chartData.yData,
|
||||||
symbolSize: 8, //标记的大小
|
symbolSize: 8, //标记的大小
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: 'rgb(255,115,38)',
|
color: 'rgb(255,115,38)',
|
||||||
|
|
@ -404,7 +458,7 @@ export default {
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
// 图例过多时滚动
|
// 图例过多时滚动
|
||||||
type: "scroll",
|
type: 'scroll',
|
||||||
left: 'center',
|
left: 'center',
|
||||||
top: 0,
|
top: 0,
|
||||||
left: '10%',
|
left: '10%',
|
||||||
|
|
@ -426,7 +480,8 @@ export default {
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: this.chartData.xData.reverse(),
|
// data: this.chartData.xData.reverse(),
|
||||||
|
data: this.chartData.xData,
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
|
|
@ -476,10 +531,12 @@ export default {
|
||||||
],
|
],
|
||||||
series: seriesList
|
series: seriesList
|
||||||
};
|
};
|
||||||
myChart.setOption(option);
|
if (myChart) {
|
||||||
window.addEventListener('resize', () => {
|
myChart.setOption(option);
|
||||||
myChart.resize();
|
window.addEventListener('resize', () => {
|
||||||
});
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
|
||||||
|
|
@ -184,13 +184,15 @@ export default {
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
myChart.setOption(option);
|
if (myChart) {
|
||||||
window.addEventListener('resize', () => {
|
myChart.setOption(option);
|
||||||
myChart.resize();
|
window.addEventListener('resize', () => {
|
||||||
});
|
myChart.resize();
|
||||||
this.$nextTick(() => {
|
});
|
||||||
myChart.resize();
|
this.$nextTick(() => {
|
||||||
});
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- 均值图 -->
|
<!-- 均值图 -->
|
||||||
<!-- <div style="width: 100%;margin-top: 5px;"> -->
|
<!-- <div style="width: 100%;margin-top: 5px;"> -->
|
||||||
<!-- <div class="tableTitle">
|
<!-- <div class="tableTitle">
|
||||||
<div>
|
<div>
|
||||||
<span
|
<span
|
||||||
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
|
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
|
||||||
|
|
@ -9,372 +9,366 @@
|
||||||
<span style="font-size:18px;">{{ componentName + '-' + chartName + '-' + '均值图'+'-'+status }}</span>
|
<span style="font-size:18px;">{{ componentName + '-' + chartName + '-' + '均值图'+'-'+status }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div :id="echartsRef" ref="barChart" style="width: 705px; height: 300px"></div>
|
<div :id="echartsRef" ref="barChart" style="width: 705px; height: 300px"></div>
|
||||||
<!-- </div> -->
|
<!-- </div> -->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "barChart", //均值图图组件
|
name: 'barChart', //均值图图组件
|
||||||
props: {
|
props: {
|
||||||
list: {
|
list: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default() {
|
default() {
|
||||||
return [];
|
return [];
|
||||||
},
|
}
|
||||||
},
|
|
||||||
typeValue: {
|
|
||||||
type: Object,
|
|
||||||
},
|
|
||||||
// 组件名称
|
|
||||||
componentName: {
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
chartName: {
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
intersectionName: {
|
|
||||||
type: Array,
|
|
||||||
default() {
|
|
||||||
return [];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
chatShowType: {
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
echartsRef: {
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
dataList: {
|
|
||||||
type: Array,
|
|
||||||
default() {
|
|
||||||
return [];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
max: [],
|
|
||||||
min: [],
|
|
||||||
med: [],
|
|
||||||
avg: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initEcharts() {
|
|
||||||
this.max = [];
|
|
||||||
this.min = [];
|
|
||||||
this.med = [];
|
|
||||||
this.avg = [];
|
|
||||||
// console.log("均值图",arr)
|
|
||||||
// let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
|
|
||||||
// if (myChart == null) {
|
|
||||||
// myChart = this.$echarts.init(this.$refs.barChart);
|
|
||||||
// }
|
|
||||||
// this.dataProcessing(this.dataList);
|
|
||||||
if (this.dataList.length > 10) {
|
|
||||||
this.dataList = this.dataList.slice(-10);
|
|
||||||
}
|
|
||||||
for (let i = 0; i < this.dataList.length; i++) {
|
|
||||||
if(this.dataList[i].max) {
|
|
||||||
this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
|
|
||||||
}else {
|
|
||||||
this.max.push(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.dataList[i].min) {
|
|
||||||
this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
|
|
||||||
}else {
|
|
||||||
this.min.push(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.dataList[i].med) {
|
|
||||||
this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
|
|
||||||
}else {
|
|
||||||
this.med.push(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.dataList[i].avg) {
|
|
||||||
this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
|
|
||||||
}else {
|
|
||||||
this.avg.push(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
|
|
||||||
// this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
|
|
||||||
// this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
|
|
||||||
// this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
|
|
||||||
}
|
|
||||||
let maxData = "";
|
|
||||||
let minData = "";
|
|
||||||
let medData = "";
|
|
||||||
let avgData = "";
|
|
||||||
for (let i = 0; i < this.max.length; i++) {
|
|
||||||
maxData = this.max[i];
|
|
||||||
}
|
|
||||||
for (let i = 0; i < this.min.length; i++) {
|
|
||||||
minData = this.min[i];
|
|
||||||
}
|
|
||||||
for (let i = 0; i < this.med.length; i++) {
|
|
||||||
medData = this.med[i];
|
|
||||||
}
|
|
||||||
for (let i = 0; i < this.avg.length; i++) {
|
|
||||||
avgData = this.avg[i];
|
|
||||||
}
|
|
||||||
let myChart = this.chart;
|
|
||||||
let chartData = [{ stage: "", number: 40 }];
|
|
||||||
let option = {
|
|
||||||
tooltip: {},
|
|
||||||
color: ["#0EECE4"],
|
|
||||||
grid: {
|
|
||||||
left: "0%",
|
|
||||||
right: "0%",
|
|
||||||
bottom: "10%",
|
|
||||||
top: "15%",
|
|
||||||
z: 22,
|
|
||||||
},
|
},
|
||||||
xAxis: [
|
typeValue: {
|
||||||
{
|
type: Object
|
||||||
type: "category",
|
|
||||||
gridIndex: 0,
|
|
||||||
data: chartData.map((item) => item.stage),
|
|
||||||
axisLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
yAxis: {
|
|
||||||
type: "value",
|
|
||||||
|
|
||||||
splitArea: { show: false },
|
|
||||||
gridIndex: 0,
|
|
||||||
min: 0,
|
|
||||||
splitNumber: 12,
|
|
||||||
splitLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
max: 200,
|
|
||||||
},
|
},
|
||||||
series: [
|
// 组件名称
|
||||||
{
|
componentName: {
|
||||||
name: "外框",
|
type: String
|
||||||
type: "bar",
|
},
|
||||||
barGap: "-120%", // 设置外框粗细
|
chartName: {
|
||||||
data: [300],
|
type: String
|
||||||
barWidth: 150,
|
},
|
||||||
itemStyle: {
|
status: {
|
||||||
normal: {
|
type: String
|
||||||
color: "rgba(0,0,0,.1)", // 填充色
|
},
|
||||||
barBorderWidth: 1, // 边框宽度
|
intersectionName: {
|
||||||
label: {
|
type: Array,
|
||||||
// 标签显示位置
|
default() {
|
||||||
show: false,
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chatShowType: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
echartsRef: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
dataList: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
max: [],
|
||||||
|
min: [],
|
||||||
|
med: [],
|
||||||
|
avg: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initEcharts() {
|
||||||
|
this.max = [];
|
||||||
|
this.min = [];
|
||||||
|
this.med = [];
|
||||||
|
this.avg = [];
|
||||||
|
// console.log("均值图",arr)
|
||||||
|
// let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
|
||||||
|
// if (myChart == null) {
|
||||||
|
// myChart = this.$echarts.init(this.$refs.barChart);
|
||||||
|
// }
|
||||||
|
// this.dataProcessing(this.dataList);
|
||||||
|
if (this.dataList.length > 10) {
|
||||||
|
this.dataList = this.dataList.slice(-10);
|
||||||
|
}
|
||||||
|
for (let i = 0; i < this.dataList.length; i++) {
|
||||||
|
if (this.dataList[i].max) {
|
||||||
|
this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
|
||||||
|
} else {
|
||||||
|
this.max.push(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.dataList[i].min) {
|
||||||
|
this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
|
||||||
|
} else {
|
||||||
|
this.min.push(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.dataList[i].med) {
|
||||||
|
this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
|
||||||
|
} else {
|
||||||
|
this.med.push(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.dataList[i].avg) {
|
||||||
|
this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
|
||||||
|
} else {
|
||||||
|
this.avg.push(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
|
||||||
|
// this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
|
||||||
|
// this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
|
||||||
|
// this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
|
||||||
|
}
|
||||||
|
let maxData = '';
|
||||||
|
let minData = '';
|
||||||
|
let medData = '';
|
||||||
|
let avgData = '';
|
||||||
|
for (let i = 0; i < this.max.length; i++) {
|
||||||
|
maxData = this.max[i];
|
||||||
|
}
|
||||||
|
for (let i = 0; i < this.min.length; i++) {
|
||||||
|
minData = this.min[i];
|
||||||
|
}
|
||||||
|
for (let i = 0; i < this.med.length; i++) {
|
||||||
|
medData = this.med[i];
|
||||||
|
}
|
||||||
|
for (let i = 0; i < this.avg.length; i++) {
|
||||||
|
avgData = this.avg[i];
|
||||||
|
}
|
||||||
|
let myChart = this.chart;
|
||||||
|
let chartData = [{ stage: '', number: 40 }];
|
||||||
|
let option = {
|
||||||
|
tooltip: {},
|
||||||
|
color: ['#0EECE4'],
|
||||||
|
grid: {
|
||||||
|
left: '0%',
|
||||||
|
right: '0%',
|
||||||
|
bottom: '10%',
|
||||||
|
top: '15%',
|
||||||
|
z: 22
|
||||||
},
|
},
|
||||||
},
|
xAxis: [
|
||||||
},
|
{
|
||||||
z: 1,
|
type: 'category',
|
||||||
},
|
gridIndex: 0,
|
||||||
{
|
data: chartData.map((item) => item.stage),
|
||||||
name: "平均值",
|
axisLine: {
|
||||||
type: "bar",
|
show: false
|
||||||
stack: "val",
|
},
|
||||||
barWidth: 150,
|
axisLabel: {
|
||||||
xAxisIndex: 0,
|
show: false
|
||||||
yAxisIndex: 0,
|
}
|
||||||
label: {
|
}
|
||||||
show: true,
|
],
|
||||||
position: "right",
|
yAxis: {
|
||||||
// offset: [10, 20],
|
type: 'value',
|
||||||
distance: 15,
|
|
||||||
color: "#000",
|
|
||||||
fontSize: 17,
|
|
||||||
formatter: "{c}" + "[avg]",
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
color: "#89c6ff",
|
|
||||||
},
|
|
||||||
data: [avgData],
|
|
||||||
zlevel: 9,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "中间值",
|
|
||||||
type: "bar",
|
|
||||||
barWidth: 150,
|
|
||||||
stack: "val",
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: "left",
|
|
||||||
distance: 15,
|
|
||||||
color: "#000",
|
|
||||||
fontSize: 17,
|
|
||||||
formatter: "{c}" + "[med]",
|
|
||||||
rich: {},
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
color: "#67b4fd",
|
|
||||||
},
|
|
||||||
data: [medData],
|
|
||||||
zlevel: 9,
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
splitArea: { show: false },
|
||||||
name: "最大值",
|
gridIndex: 0,
|
||||||
type: "bar",
|
min: 0,
|
||||||
stack: "val",
|
splitNumber: 12,
|
||||||
barWidth: 150,
|
splitLine: {
|
||||||
barGap: "-100%",
|
show: false
|
||||||
data: [maxData],
|
},
|
||||||
label: {
|
axisLine: {
|
||||||
show: true,
|
show: false
|
||||||
position: "right",
|
},
|
||||||
distance: 10,
|
axisTick: {
|
||||||
color: "#000",
|
show: false
|
||||||
fontSize: 17,
|
},
|
||||||
offset: [0, -30],
|
axisLabel: {
|
||||||
formatter: "{c}" + "[max]",
|
show: false
|
||||||
},
|
},
|
||||||
itemStyle: {
|
max: 200
|
||||||
color: "#319cff",
|
},
|
||||||
},
|
series: [
|
||||||
zlevel: 9,
|
{
|
||||||
},
|
name: '外框',
|
||||||
{
|
type: 'bar',
|
||||||
name: "最小值",
|
barGap: '-120%', // 设置外框粗细
|
||||||
type: "bar",
|
data: [300],
|
||||||
stack: "val",
|
barWidth: 150,
|
||||||
barWidth: 150,
|
itemStyle: {
|
||||||
barGap: "-100%",
|
normal: {
|
||||||
data: [minData],
|
color: 'rgba(0,0,0,.1)', // 填充色
|
||||||
label: {
|
barBorderWidth: 1, // 边框宽度
|
||||||
offset: [10, 20],
|
label: {
|
||||||
show: true,
|
// 标签显示位置
|
||||||
position: "left",
|
show: false
|
||||||
distance: 10,
|
}
|
||||||
color: "#000",
|
}
|
||||||
offset: [0, -30],
|
},
|
||||||
fontSize: 17,
|
z: 1
|
||||||
formatter: "{c}" + "[min]",
|
},
|
||||||
},
|
{
|
||||||
// tooltip: {
|
name: '平均值',
|
||||||
// backgroundColor: 'transparent',
|
type: 'bar',
|
||||||
// formatter: ' '
|
stack: 'val',
|
||||||
// },
|
barWidth: 150,
|
||||||
itemStyle: {
|
xAxisIndex: 0,
|
||||||
color: "#328adc",
|
yAxisIndex: 0,
|
||||||
},
|
label: {
|
||||||
zlevel: 9,
|
show: true,
|
||||||
},
|
position: 'right',
|
||||||
],
|
// offset: [10, 20],
|
||||||
};
|
distance: 15,
|
||||||
myChart.setOption(option);
|
color: '#000',
|
||||||
window.addEventListener("resize", function () {
|
fontSize: 17,
|
||||||
myChart.resize();
|
formatter: '{c}' + '[avg]'
|
||||||
});
|
},
|
||||||
// this.$nextTick(() => {
|
itemStyle: {
|
||||||
// myChart.setOption(option)
|
color: '#89c6ff'
|
||||||
// myChart.resize();
|
},
|
||||||
// })
|
data: [avgData],
|
||||||
},
|
zlevel: 9
|
||||||
},
|
},
|
||||||
mounted() {
|
{
|
||||||
let that = this;
|
name: '中间值',
|
||||||
const $dom = document.getElementById(this.echartsRef);
|
type: 'bar',
|
||||||
$dom.style.width = "440px";
|
barWidth: 150,
|
||||||
$dom.style.height = "260px";
|
stack: 'val',
|
||||||
setTimeout(() => {
|
label: {
|
||||||
that.$nextTick(() => {
|
show: true,
|
||||||
this.chart = this.$echarts.getInstanceByDom(
|
position: 'left',
|
||||||
document.getElementById(this.echartsRef)
|
distance: 15,
|
||||||
);
|
color: '#000',
|
||||||
if (this.chart == null) {
|
fontSize: 17,
|
||||||
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
formatter: '{c}' + '[med]',
|
||||||
|
rich: {}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#67b4fd'
|
||||||
|
},
|
||||||
|
data: [medData],
|
||||||
|
zlevel: 9
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: '最大值',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'val',
|
||||||
|
barWidth: 150,
|
||||||
|
barGap: '-100%',
|
||||||
|
data: [maxData],
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'right',
|
||||||
|
distance: 10,
|
||||||
|
color: '#000',
|
||||||
|
fontSize: 17,
|
||||||
|
offset: [0, -30],
|
||||||
|
formatter: '{c}' + '[max]'
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#319cff'
|
||||||
|
},
|
||||||
|
zlevel: 9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '最小值',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'val',
|
||||||
|
barWidth: 150,
|
||||||
|
barGap: '-100%',
|
||||||
|
data: [minData],
|
||||||
|
label: {
|
||||||
|
offset: [10, 20],
|
||||||
|
show: true,
|
||||||
|
position: 'left',
|
||||||
|
distance: 10,
|
||||||
|
color: '#000',
|
||||||
|
offset: [0, -30],
|
||||||
|
fontSize: 17,
|
||||||
|
formatter: '{c}' + '[min]'
|
||||||
|
},
|
||||||
|
// tooltip: {
|
||||||
|
// backgroundColor: 'transparent',
|
||||||
|
// formatter: ' '
|
||||||
|
// },
|
||||||
|
itemStyle: {
|
||||||
|
color: '#328adc'
|
||||||
|
},
|
||||||
|
zlevel: 9
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
if (myChart) {
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
// myChart.setOption(option)
|
||||||
|
// myChart.resize();
|
||||||
|
// })
|
||||||
}
|
}
|
||||||
that.initEcharts();
|
|
||||||
});
|
|
||||||
}, 300);
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
intersectionName: {
|
|
||||||
handler: function (oldValues, newValues) {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.initEcharts();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
chatShowType: {
|
mounted() {
|
||||||
handler: function (oldValues, newValues) {
|
|
||||||
let that = this;
|
let that = this;
|
||||||
|
const $dom = document.getElementById(this.echartsRef);
|
||||||
|
$dom.style.width = '440px';
|
||||||
|
$dom.style.height = '260px';
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
that.$nextTick(() => {
|
that.$nextTick(() => {
|
||||||
this.chart = this.$echarts.getInstanceByDom(
|
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||||
document.getElementById(this.echartsRef)
|
if (this.chart == null) {
|
||||||
);
|
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||||
if (this.chart == null) {
|
}
|
||||||
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
that.initEcharts();
|
||||||
}
|
});
|
||||||
that.initEcharts();
|
|
||||||
});
|
|
||||||
}, 300);
|
}, 300);
|
||||||
},
|
|
||||||
},
|
},
|
||||||
echartsRef: {
|
watch: {
|
||||||
handler: function (oldValues, newValues) {
|
intersectionName: {
|
||||||
console.log("old", oldValues);
|
handler: function (oldValues, newValues) {
|
||||||
console.log("newV", newValues);
|
this.$nextTick(() => {
|
||||||
let that = this;
|
this.initEcharts();
|
||||||
setTimeout(() => {
|
});
|
||||||
that.$nextTick(() => {
|
|
||||||
this.chart = this.$echarts.getInstanceByDom(
|
|
||||||
document.getElementById(this.echartsRef)
|
|
||||||
);
|
|
||||||
if (this.chart == null) {
|
|
||||||
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
|
||||||
}
|
}
|
||||||
that.initEcharts();
|
},
|
||||||
});
|
chatShowType: {
|
||||||
}, 300);
|
handler: function (oldValues, newValues) {
|
||||||
},
|
let that = this;
|
||||||
},
|
setTimeout(() => {
|
||||||
dataList: {
|
that.$nextTick(() => {
|
||||||
handler: function (oldValues, newValues) {
|
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||||
this.$nextTick(() => {
|
if (this.chart == null) {
|
||||||
this.chart = this.$echarts.getInstanceByDom(
|
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||||
document.getElementById(this.echartsRef)
|
}
|
||||||
);
|
that.initEcharts();
|
||||||
if (this.chart == null) {
|
});
|
||||||
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
}, 300);
|
||||||
}
|
}
|
||||||
this.initEcharts();
|
},
|
||||||
});
|
echartsRef: {
|
||||||
},
|
handler: function (oldValues, newValues) {
|
||||||
},
|
console.log('old', oldValues);
|
||||||
},
|
console.log('newV', newValues);
|
||||||
|
let that = this;
|
||||||
|
setTimeout(() => {
|
||||||
|
that.$nextTick(() => {
|
||||||
|
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||||
|
if (this.chart == null) {
|
||||||
|
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||||
|
}
|
||||||
|
that.initEcharts();
|
||||||
|
});
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dataList: {
|
||||||
|
handler: function (oldValues, newValues) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||||
|
if (this.chart == null) {
|
||||||
|
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||||
|
}
|
||||||
|
this.initEcharts();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.tableTitle {
|
.tableTitle {
|
||||||
background: #f7f8fa;
|
background: #f7f8fa;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
}
|
}
|
||||||
#meanValue {
|
#meanValue {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,201 @@
|
||||||
|
<template>
|
||||||
|
<!-- 区域的表格 -->
|
||||||
|
<div class="tableContent">
|
||||||
|
<div v-if="tableData && tableData.length > 0">
|
||||||
|
<!-- 实时触发 -->
|
||||||
|
<el-table :data="tableData" style="width: 100%" height="250" v-if="triggerType == '实时触发'">
|
||||||
|
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
|
||||||
|
<!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
|
||||||
|
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
||||||
|
<el-table-column align="center" label="目标类型" prop="type">
|
||||||
|
<!-- <template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.type == 'Person'">行人</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
|
||||||
|
<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>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
|
||||||
|
</template> -->
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="occ" label="占用状态">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.occ == '1'">占用</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="speed" label="空间平均速度">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{
|
||||||
|
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
|
||||||
|
? Math.abs(scope.row.speed)
|
||||||
|
: scope.row.speed == '-1'
|
||||||
|
? '-'
|
||||||
|
: scope.row.speed
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-table :data="tableData" style="width: 100%" height="250" v-if="triggerType == '固定时刻'">
|
||||||
|
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column> -->
|
||||||
|
<!-- <el-table-column align="center" prop="graphical_id" label="区域编号"></el-table-column> -->
|
||||||
|
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
||||||
|
<el-table-column align="center" label="目标类型" prop="type">
|
||||||
|
<!-- <template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.type == 'Person'">行人</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
|
||||||
|
<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>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
|
||||||
|
</template> -->
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="occ" label="占用状态">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.occ == '1'">占用</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="speed" label="空间平均速度">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{
|
||||||
|
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
|
||||||
|
? Math.abs(scope.row.speed)
|
||||||
|
: scope.row.speed == '-1'
|
||||||
|
? '-'
|
||||||
|
: scope.row.speed
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 固定间隔 -->
|
||||||
|
<el-table :data="tableData" style="width: 100%" height="250" v-if="triggerType == '固定间隔'">
|
||||||
|
<!-- <el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
|
||||||
|
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
||||||
|
<el-table-column align="center" label="目标类型" prop="type">
|
||||||
|
<!-- <template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.type == 'Person'">行人</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
|
||||||
|
<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>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
|
||||||
|
</template> -->
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="in_flow" label="驶入流量"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="out_flow" label="驶离流量"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="ave_stay" label="平均存车数"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="ave_queue" label="平均排队数"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="ave_occ" label="平均占有率"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="ave_delay" label="平均延误"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="speed" label="平均速度"></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<el-empty :image-size="100"></el-empty>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'regionTable',
|
||||||
|
props: {
|
||||||
|
tableData: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
triggerType: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
//表格字段备注
|
||||||
|
tableOptions:[
|
||||||
|
{
|
||||||
|
type:'实时触发',
|
||||||
|
column:[
|
||||||
|
{prop:'name',label:'区域名称'},
|
||||||
|
{prop:'time',label:'时间戳'},
|
||||||
|
{prop:'type',label:'目标类型'},
|
||||||
|
{prop:'n_stay',label:'存车数'},
|
||||||
|
{prop:'n_queue',label:'排队数'},
|
||||||
|
{prop:'occ',label:'占用状态'},
|
||||||
|
{prop:'speed',label:'空间平均速度'},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type:'固定时刻',
|
||||||
|
column:[
|
||||||
|
{prop:'name',label:'区域名称'},
|
||||||
|
{prop:'time',label:'时间戳'},
|
||||||
|
{prop:'type',label:'目标类型'},
|
||||||
|
{prop:'n_stay',label:'存车数'},
|
||||||
|
{prop:'n_queue',label:'排队数'},
|
||||||
|
{prop:'occ',label:'占用状态'},
|
||||||
|
{prop:'speed',label:'空间平均速度'},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type:'固定间隔',
|
||||||
|
column:[
|
||||||
|
{prop:'name',label:'区域名称'},
|
||||||
|
{prop:'time',label:'时间戳'},
|
||||||
|
{prop:'type',label:'目标类型'},
|
||||||
|
{prop:'in_flow',label:'驶入流量'},
|
||||||
|
{prop:'out_flow',label:'驶离流量'},
|
||||||
|
{prop:'ave_stay',label:'平均存车数'},
|
||||||
|
{prop:'ave_queue',label:'平均排队数'},
|
||||||
|
{prop:'ave_occ',label:'平均占有率'},
|
||||||
|
{prop:'ave_delay',label:'平均延误'},
|
||||||
|
{prop:'speed',label:'平均速度'},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.tableContent {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
// height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,162 @@
|
||||||
|
<template>
|
||||||
|
<!-- 断面的表格 -->
|
||||||
|
<div class="tableContent">
|
||||||
|
<div v-if="tableData && tableData.length > 0">
|
||||||
|
<el-table :data="tableData" style="width: 100%" height="250" v-if="triggerType == '实时触发'">
|
||||||
|
<!-- <el-table-column align="center" prop="steam_id" label="视频路"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="zone_id" label="区域编号"></el-table-column> -->
|
||||||
|
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
||||||
|
<!-- <el-table-column align="center" prop="" label="视频帧"></el-table-column> -->
|
||||||
|
<el-table-column align="center" label="目标类型" prop="type">
|
||||||
|
<!-- <template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.type == 'Person'">行人</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
|
||||||
|
<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>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
|
||||||
|
</template> -->
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="occ" label="占用状态"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="speed" label="空间平均速度">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{
|
||||||
|
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
|
||||||
|
? Math.abs(scope.row.speed)
|
||||||
|
: scope.row.speed == '-1'
|
||||||
|
? '-'
|
||||||
|
: scope.row.speed
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 固定间隔 -->
|
||||||
|
<el-table :data="tableData" style="width: 100%" height="250" v-if="triggerType == '固定间隔'">
|
||||||
|
<el-table-column align="center" prop="gate_id" label="断面编号"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="name" label="断面名称"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="interval" label="时间序号"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="type" label="目标类型">
|
||||||
|
<!-- <template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.type == 'Person'">行人</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
|
||||||
|
<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|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>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
|
||||||
|
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
|
||||||
|
</template> -->
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="in_flow" label="入流流量"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="out_flow" label="出流流量"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="flow" label="断面流量"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="in_spd" label="入流平均速度"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="out_spd" label="出流平均速度"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="speed" label="断面的平均速度"></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<el-empty :image-size="100"></el-empty>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'tableShow',
|
||||||
|
props: {
|
||||||
|
tableData: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
triggerType: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
//表格字段备注
|
||||||
|
tableOptions:[
|
||||||
|
{
|
||||||
|
type:'实时触发',
|
||||||
|
column:[
|
||||||
|
{prop:'name',label:'区域名称'},
|
||||||
|
{prop:'time',label:'时间戳'},
|
||||||
|
{prop:'type',label:'目标类型'},
|
||||||
|
{prop:'n_stay',label:'存车数'},
|
||||||
|
{prop:'n_queue',label:'排队数'},
|
||||||
|
{prop:'occ',label:'占用状态'},
|
||||||
|
{prop:'speed',label:'空间平均速度'},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type:'固定时刻', //TODO-目前代码里无此逻辑
|
||||||
|
column:[
|
||||||
|
{prop:'name',label:'区域名称'},
|
||||||
|
{prop:'time',label:'时间戳'},
|
||||||
|
{prop:'type',label:'目标类型'},
|
||||||
|
{prop:'n_stay',label:'存车数'},
|
||||||
|
{prop:'n_queue',label:'排队数'},
|
||||||
|
{prop:'occ',label:'占用状态'},
|
||||||
|
{prop:'speed',label:'空间平均速度'},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type:'固定间隔',
|
||||||
|
column:[
|
||||||
|
{prop:'gate_id',label:'断面编号'},
|
||||||
|
{prop:'name',label:'断面名称'},
|
||||||
|
{prop:'time',label:'时间戳'},
|
||||||
|
{prop:'interval',label:'时间序号'},
|
||||||
|
{prop:'type',label:'目标类型'},
|
||||||
|
{prop:'in_flow',label:'入流流量'},
|
||||||
|
{prop:'out_flow',label:'出流流量'},
|
||||||
|
{prop:'flow',label:'断面流量'},
|
||||||
|
{prop:'in_spd',label:'入流平均速度'},
|
||||||
|
{prop:'out_spd',label:'出流平均速度'},
|
||||||
|
{prop:'speed',label:'断面的平均速度'},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
tableData: {
|
||||||
|
handler(newVal) {
|
||||||
|
console.log(newVal, '断面表格数据');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.tableContent {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
// height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -103,9 +103,9 @@ export default {
|
||||||
// }
|
// }
|
||||||
// if (this.dataList[0][0] == undefined) {
|
// if (this.dataList[0][0] == undefined) {
|
||||||
// for (let i = 0; i < this.dataList.length; i++) {
|
// for (let i = 0; i < this.dataList.length; i++) {
|
||||||
if (this.dataList.length > 0 && this.dataList[0].ob_data) {
|
if (this.dataList.length > 0 && this.dataList[0].ob_data) {
|
||||||
dataOd.push(this.dataList[0].ob_data);
|
dataOd.push(this.dataList[0].ob_data);
|
||||||
}
|
}
|
||||||
dataList = this.ODhanlde(dataOd);
|
dataList = this.ODhanlde(dataOd);
|
||||||
// }
|
// }
|
||||||
// } else {
|
// } else {
|
||||||
|
|
@ -200,10 +200,12 @@ export default {
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
myChart.setOption(option);
|
if (myChart) {
|
||||||
window.addEventListener('resize', () => {
|
myChart.setOption(option);
|
||||||
myChart.resize();
|
window.addEventListener('resize', () => {
|
||||||
});
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
|
||||||
|
|
@ -528,6 +528,12 @@ export default {
|
||||||
// 数据改变重新渲染饼图
|
// 数据改变重新渲染饼图
|
||||||
itemTypeChart.$refs.pieChartRef.drawPie(itemTypeChart.dataArr[0]);
|
itemTypeChart.$refs.pieChartRef.drawPie(itemTypeChart.dataArr[0]);
|
||||||
}
|
}
|
||||||
|
if (
|
||||||
|
itemTypeChart.echartArr.includes('均值图') &&
|
||||||
|
itemTypeChart.$refs.avgChartRef != undefined
|
||||||
|
) {
|
||||||
|
itemTypeChart.$refs.avgChartRef.drawBar(itemTypeChart.dataArr[0]);
|
||||||
|
}
|
||||||
if (
|
if (
|
||||||
itemTypeChart.componentName.includes('OD') &&
|
itemTypeChart.componentName.includes('OD') &&
|
||||||
itemTypeChart.$refs.ODChartRef != undefined &&
|
itemTypeChart.$refs.ODChartRef != undefined &&
|
||||||
|
|
@ -629,6 +635,7 @@ export default {
|
||||||
itemTypeChartRef1.dataArr[0].ob_data &&
|
itemTypeChartRef1.dataArr[0].ob_data &&
|
||||||
itemTypeChartRef1.dataArr[0].ob_data.length != 0
|
itemTypeChartRef1.dataArr[0].ob_data.length != 0
|
||||||
) {
|
) {
|
||||||
|
// console.log('固定时刻-od',itemTypeChartRef1.dataArr[0].ob_data)
|
||||||
itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(
|
itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(
|
||||||
itemTypeChartRef1.dataArr[0].ob_data,
|
itemTypeChartRef1.dataArr[0].ob_data,
|
||||||
itemTypeChartRef1.startEndData
|
itemTypeChartRef1.startEndData
|
||||||
|
|
|
||||||
|
|
@ -1477,7 +1477,7 @@ export default {
|
||||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||||
var detId = [];
|
var detId = [];
|
||||||
const msgN = JSON.parse(temp);
|
const msgN = JSON.parse(temp);
|
||||||
// console.log('实时触发trigger-', msgN);
|
console.log('实时触发trigger-', msgN);
|
||||||
// //console.log("trigger_msgN",msgN)
|
// //console.log("trigger_msgN",msgN)
|
||||||
// msgN.forEach(item => {
|
// msgN.forEach(item => {
|
||||||
// //console.log("item.name",item.name)
|
// //console.log("item.name",item.name)
|
||||||
|
|
|
||||||
|
|
@ -462,12 +462,7 @@
|
||||||
: '-'
|
: '-'
|
||||||
}}
|
}}
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span v-else-if="i.triggerData && i.triggerData.type_data">
|
||||||
v-else-if="
|
|
||||||
i.triggerData &&
|
|
||||||
i.triggerData.type_data
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<!-- {{i.triggerData[0].quantity + i.triggerData[1].quantity + i.triggerData[2].quantity}} -->
|
<!-- {{i.triggerData[0].quantity + i.triggerData[1].quantity + i.triggerData[2].quantity}} -->
|
||||||
<!-- <span
|
<!-- <span
|
||||||
v-if="
|
v-if="
|
||||||
|
|
@ -684,32 +679,38 @@
|
||||||
>
|
>
|
||||||
<div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
|
<div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
|
||||||
<span class="titleIcon"></span>
|
<span class="titleIcon"></span>
|
||||||
{{ e.name }}
|
{{ e.name + '-' + e.graphicType }}
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
|
||||||
<!-- <el-empty :image-size="20"
|
<div style="width: 100%; height: 100%" v-if="e.graphicType == '断面'">
|
||||||
description="暂无数据"></el-empty> -->
|
<tableShow :tableData="e.triggerNewData" :triggerType="e.timeMode" />
|
||||||
<el-table :data="tableData" style="width: 100%; height: 100%" height="250">
|
</div>
|
||||||
|
<div style="width: 100%; height: 100%" v-if="e.graphicType == '区域'">
|
||||||
|
<regionTable :tableData="e.triggerNewData" :triggerType="e.timeMode" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||||||
|
<div style="width: 100%; height: 100%" v-if="e.graphicType == '断面'">
|
||||||
|
<tableShow :tableData="e.cycleTimeData" :triggerType="e.timeMode" />
|
||||||
|
</div>
|
||||||
|
<div style="width: 100%; height: 100%" v-if="e.graphicType == '区域'">
|
||||||
|
<regionTable :tableData="e.cycleTimeData" :triggerType="e.timeMode" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
||||||
|
<div style="width: 100%; height: 100%" v-if="e.graphicType == '断面'">
|
||||||
|
<tableShow :tableData="e.cycleStatisticsData" :triggerType="e.timeMode" />
|
||||||
|
</div>
|
||||||
|
<div style="width: 100%; height: 100%" v-if="e.graphicType == '区域'">
|
||||||
|
<regionTable :tableData="e.cycleStatisticsData" :triggerType="e.timeMode" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
|
||||||
|
<el-table :data="e.triggerNewData" style="width: 100%; height: 100%" height="250">
|
||||||
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
||||||
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
||||||
<el-table-column align="center" label="目标类型" prop="type">
|
<el-table-column align="center" label="目标类型" prop="type">
|
||||||
<!-- <template slot-scope="scope">
|
|
||||||
<span v-if="scope.row.type == 'Person'">行人</span>
|
|
||||||
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
|
|
||||||
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
|
|
||||||
<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>
|
|
||||||
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
|
|
||||||
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
|
|
||||||
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
|
|
||||||
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
|
|
||||||
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
|
|
||||||
</template> -->
|
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
|
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
|
||||||
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
|
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
|
||||||
|
|
@ -718,34 +719,24 @@
|
||||||
<span v-if="scope.row.occ == '1'">占用</span>
|
<span v-if="scope.row.occ == '1'">占用</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
|
<el-table-column align="center" prop="speed" label="空间平均速度">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{
|
||||||
|
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
|
||||||
|
? Math.abs(scope.row.speed)
|
||||||
|
: scope.row.speed == '-1'
|
||||||
|
? '-'
|
||||||
|
: scope.row.speed
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||||||
<!-- <el-empty :image-size="20"
|
|
||||||
description="暂无数据"
|
|
||||||
v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"></el-empty> -->
|
|
||||||
<el-table :data="e.cycleTimeData" style="width: 100%; height: 100%" height="250">
|
<el-table :data="e.cycleTimeData" style="width: 100%; height: 100%" height="250">
|
||||||
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
||||||
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
||||||
<el-table-column align="center" label="目标类型" prop="type">
|
<el-table-column align="center" label="目标类型" prop="type">
|
||||||
<!-- <template slot-scope="scope">
|
|
||||||
<span v-if="scope.row.type == 'Person'">行人</span>
|
|
||||||
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
|
|
||||||
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
|
|
||||||
<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>
|
|
||||||
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
|
|
||||||
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
|
|
||||||
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
|
|
||||||
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
|
|
||||||
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
|
|
||||||
</template> -->
|
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
|
<el-table-column align="center" prop="n_stay" label="存车数"></el-table-column>
|
||||||
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
|
<el-table-column align="center" prop="n_queue" label="排队数"></el-table-column>
|
||||||
|
|
@ -754,34 +745,24 @@
|
||||||
<span v-if="scope.row.occ == '1'">占用</span>
|
<span v-if="scope.row.occ == '1'">占用</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
|
<el-table-column align="center" prop="speed" label="空间平均速度">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{
|
||||||
|
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
|
||||||
|
? Math.abs(scope.row.speed)
|
||||||
|
: scope.row.speed == '-1'
|
||||||
|
? '-'
|
||||||
|
: scope.row.speed
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
||||||
<!-- <el-empty :image-size="20"
|
|
||||||
description="暂无数据"
|
|
||||||
v-if="e.cycleStatisticsData == null || e.cycleStatisticsData.length == 0"></el-empty> -->
|
|
||||||
<el-table :data="e.cycleStatisticsData" style="width: 100%; height: 100%" height="250">
|
<el-table :data="e.cycleStatisticsData" style="width: 100%; height: 100%" height="250">
|
||||||
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
<el-table-column align="center" prop="name" label="区域名称"></el-table-column>
|
||||||
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
<el-table-column align="center" prop="time" label="时间戳"></el-table-column>
|
||||||
<el-table-column align="center" label="目标类型" prop="type">
|
<el-table-column align="center" label="目标类型" prop="type">
|
||||||
<!-- <template slot-scope="scope">
|
|
||||||
<span v-if="scope.row.type == 'Person'">行人</span>
|
|
||||||
<span v-if="scope.row.type == 'Motor Vehicle'">机动车</span>
|
|
||||||
<span v-if="scope.row.type == 'Non_Motor'">非机动车</span>
|
|
||||||
<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>
|
|
||||||
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle|Person'">行人|非机动车|机动车</span>
|
|
||||||
<span v-if="scope.row.type == 'Motor Vehicle|Non_Motor|Person'">行人|非机动车|机动车</span>
|
|
||||||
<span v-if="scope.row.type == 'Motor Vehicle|Person|Non_Motor'">行人|非机动车|机动车</span>
|
|
||||||
<span v-if="scope.row.type == 'Non_Motor|Motor Vehicle'">非机动车|机动车</span>
|
|
||||||
<span v-if="scope.row.type == 'Non_Motor|Person'">非机动车|行人</span>
|
|
||||||
</template> -->
|
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column align="center" prop="ave_stay" label="存车数"></el-table-column>
|
<el-table-column align="center" prop="ave_stay" label="存车数"></el-table-column>
|
||||||
<el-table-column align="center" prop="ave_queue" label="排队数"></el-table-column>
|
<el-table-column align="center" prop="ave_queue" label="排队数"></el-table-column>
|
||||||
|
|
@ -790,9 +771,19 @@
|
||||||
<span v-if="scope.row.occ == '1'">占用</span>
|
<span v-if="scope.row.occ == '1'">占用</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
|
<el-table-column align="center" prop="speed" label="空间平均速度">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{
|
||||||
|
scope.row.speed && scope.row.speed != '-' && scope.row.speed != '-1'
|
||||||
|
? Math.abs(scope.row.speed)
|
||||||
|
: scope.row.speed == '-1'
|
||||||
|
? '-'
|
||||||
|
: scope.row.speed
|
||||||
|
}}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="width: 100%; height: 100%"
|
style="width: 100%; height: 100%"
|
||||||
|
|
@ -1392,6 +1383,8 @@ import chartsPie from '@/components/sensorFusion/echartsPie.vue';
|
||||||
import chartsBar from '@/components/sensorFusion/echartsBar.vue';
|
import chartsBar from '@/components/sensorFusion/echartsBar.vue';
|
||||||
import MeanValue from '../../components/sensorFusion/meanValue.vue';
|
import MeanValue from '../../components/sensorFusion/meanValue.vue';
|
||||||
import thermalOD from '@/components/sensorFusion/thermalOD';
|
import thermalOD from '@/components/sensorFusion/thermalOD';
|
||||||
|
import tableShow from '@/components/sensorFusion/tableShow.vue';
|
||||||
|
import regionTable from '@/components/sensorFusion/regionTable.vue';
|
||||||
import {
|
import {
|
||||||
getRealTimeShipjk, //获取实时视频
|
getRealTimeShipjk, //获取实时视频
|
||||||
getDuocgqrhpz, //获取树形数据
|
getDuocgqrhpz, //获取树形数据
|
||||||
|
|
@ -1884,6 +1877,7 @@ export default {
|
||||||
this.addSelectOptionField(obj[key]);
|
this.addSelectOptionField(obj[key]);
|
||||||
} else if (key == 'name') {
|
} else if (key == 'name') {
|
||||||
obj['selectOption'] = 1;
|
obj['selectOption'] = 1;
|
||||||
|
obj['triggerNewData'] = [];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -2767,6 +2761,45 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
//实时触发表格添加数据
|
||||||
|
triggerDataCharts(data, videoId, analogAreaComponentId, newValue, time, table) {
|
||||||
|
for (let i = 0; i < data.length; i++) {
|
||||||
|
for (let j = 0; j < data[i].children.length; j++) {
|
||||||
|
for (let n = 0; n < data[i].children[j].children.length; n++) {
|
||||||
|
if (data[i].children[j].children[n].name == '图表区') {
|
||||||
|
for (let m = 0; m < data[i].children[j].children[n].children.length; m++) {
|
||||||
|
if (
|
||||||
|
data[i].children[j].children[n].children[m].videoId == videoId &&
|
||||||
|
data[i].children[j].children[n].children[m].analogAreaComponentId == analogAreaComponentId
|
||||||
|
) {
|
||||||
|
if (data[i].children[j].children[n].children[m].componentType == '类型') {
|
||||||
|
let typeData = {
|
||||||
|
time: time,
|
||||||
|
type_data: newValue,
|
||||||
|
speed: table.speed,
|
||||||
|
name: table.name,
|
||||||
|
type: table.type,
|
||||||
|
n_stay: table.n_stay,
|
||||||
|
n_queue: table.n_queue,
|
||||||
|
occ: table.occ,
|
||||||
|
speed: table.speed,
|
||||||
|
originalSpeed: table.originalSpeed
|
||||||
|
};
|
||||||
|
this.addTimeDataCharts(data[i].children[j].children[n].children[m].triggerNewData, typeData);
|
||||||
|
} else {
|
||||||
|
if (data[i].children[j].children[n].children[m].triggerNewData.length > 10) {
|
||||||
|
data[i].children[j].children[n].children[m].triggerNewData =
|
||||||
|
data[i].children[j].children[n].children[m].triggerNewData.slice(-10);
|
||||||
|
}
|
||||||
|
this.addTimeDataCharts(data[i].children[j].children[n].children[m].triggerNewData, newValue);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
//固定时刻图表添加数据
|
//固定时刻图表添加数据
|
||||||
timeDataCharts(data, videoId, analogAreaComponentId, newValue, time, table) {
|
timeDataCharts(data, videoId, analogAreaComponentId, newValue, time, table) {
|
||||||
for (let i = 0; i < data.length; i++) {
|
for (let i = 0; i < data.length; i++) {
|
||||||
|
|
@ -2889,13 +2922,13 @@ export default {
|
||||||
// 接收托片
|
// 接收托片
|
||||||
case 'trigger-' + this.topicVideoIdList[i].videoId:
|
case 'trigger-' + this.topicVideoIdList[i].videoId:
|
||||||
try {
|
try {
|
||||||
// //console.log("trigger_msgN",message)
|
//console.log("trigger_msgN",message)
|
||||||
const utf8decoder = new TextDecoder();
|
const utf8decoder = new TextDecoder();
|
||||||
const u8arr = new Uint8Array(message);
|
const u8arr = new Uint8Array(message);
|
||||||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||||
var detId = [];
|
var detId = [];
|
||||||
const msgN = JSON.parse(temp);
|
const msgN = JSON.parse(temp);
|
||||||
// console.log('实时触发trigger-',msgN);
|
// console.log('实时触发trigger-', msgN);
|
||||||
for (let j = 0; j < msgN.length; j++) {
|
for (let j = 0; j < msgN.length; j++) {
|
||||||
const locations = this.findLocationById(this.intersectionList, msgN[j].component_id);
|
const locations = this.findLocationById(this.intersectionList, msgN[j].component_id);
|
||||||
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
|
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
|
||||||
|
|
@ -2908,6 +2941,7 @@ export default {
|
||||||
// if (locations == '卡片区' || locations == '两个区都存在') {
|
// if (locations == '卡片区' || locations == '两个区都存在') {
|
||||||
|
|
||||||
// if(locations == '图表区' || locations == '两个区都存在'){
|
// if(locations == '图表区' || locations == '两个区都存在'){
|
||||||
|
// console.log('实时触发trigger-车头时距', msgN[j].time);
|
||||||
//图表区数组
|
//图表区数组
|
||||||
this.addOrUpdateArrayItem(this.triggerDataList, {
|
this.addOrUpdateArrayItem(this.triggerDataList, {
|
||||||
time: msgN[j].time,
|
time: msgN[j].time,
|
||||||
|
|
@ -2926,8 +2960,7 @@ export default {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
//表格数据
|
//表格数据
|
||||||
|
let carTou = {
|
||||||
this.addOrUpdateArrayItem(this.tableData, {
|
|
||||||
name: msgN[j].name,
|
name: msgN[j].name,
|
||||||
time: msgN[j].time,
|
time: msgN[j].time,
|
||||||
type: msgN[j].type,
|
type: msgN[j].type,
|
||||||
|
|
@ -2936,7 +2969,27 @@ export default {
|
||||||
occ: msgN[j].occ,
|
occ: msgN[j].occ,
|
||||||
speed: newSpeed,
|
speed: newSpeed,
|
||||||
originalSpeed: msgN[j].speed
|
originalSpeed: msgN[j].speed
|
||||||
|
};
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.triggerDataCharts(
|
||||||
|
this.intersectionList,
|
||||||
|
this.topicVideoIdList[i].videoId,
|
||||||
|
msgN[j].component_id,
|
||||||
|
carTou
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
//之前错误逻辑，不知道为啥怎么处理
|
||||||
|
// this.addOrUpdateArrayItem(this.tableData, {
|
||||||
|
// name: msgN[j].name,
|
||||||
|
// time: msgN[j].time,
|
||||||
|
// type: msgN[j].type,
|
||||||
|
// n_stay: msgN[j].n_stay,
|
||||||
|
// n_queue: msgN[j].n_queue,
|
||||||
|
// occ: msgN[j].occ,
|
||||||
|
// speed: newSpeed,
|
||||||
|
// originalSpeed: msgN[j].speed
|
||||||
|
// });
|
||||||
// }
|
// }
|
||||||
//卡片区
|
//卡片区
|
||||||
let map = {
|
let map = {
|
||||||
|
|
@ -2952,6 +3005,7 @@ export default {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
} else if (msgN[j].component_type == '流量') {
|
} else if (msgN[j].component_type == '流量') {
|
||||||
|
// console.log('实时触发trigger-流量', msgN[j]);
|
||||||
//图表区
|
//图表区
|
||||||
this.addOrUpdateArrayItem(this.triggerFlowData, {
|
this.addOrUpdateArrayItem(this.triggerFlowData, {
|
||||||
time: msgN[j].time,
|
time: msgN[j].time,
|
||||||
|
|
@ -2981,7 +3035,7 @@ export default {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
//表格数据
|
//表格数据
|
||||||
this.addOrUpdateArrayItem(this.tableData, {
|
let carTou = {
|
||||||
name: msgN[j].name,
|
name: msgN[j].name,
|
||||||
time: msgN[j].time,
|
time: msgN[j].time,
|
||||||
type: msgN[j].type,
|
type: msgN[j].type,
|
||||||
|
|
@ -2990,7 +3044,26 @@ export default {
|
||||||
occ: msgN[j].occ,
|
occ: msgN[j].occ,
|
||||||
speed: newSpeed,
|
speed: newSpeed,
|
||||||
originalSpeed: msgN[j].speed
|
originalSpeed: msgN[j].speed
|
||||||
|
};
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.triggerDataCharts(
|
||||||
|
this.intersectionList,
|
||||||
|
this.topicVideoIdList[i].videoId,
|
||||||
|
msgN[j].component_id,
|
||||||
|
carTou
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
//之前错误逻辑，不知道为啥怎么处理
|
||||||
|
// this.addOrUpdateArrayItem(this.tableData, {
|
||||||
|
// name: msgN[j].name,
|
||||||
|
// time: msgN[j].time,
|
||||||
|
// type: msgN[j].type,
|
||||||
|
// n_stay: msgN[j].n_stay,
|
||||||
|
// n_queue: msgN[j].n_queue,
|
||||||
|
// occ: msgN[j].occ,
|
||||||
|
// speed: newSpeed,
|
||||||
|
// originalSpeed: msgN[j].speed
|
||||||
|
// });
|
||||||
} else if (msgN[j].component_type == '速度') {
|
} else if (msgN[j].component_type == '速度') {
|
||||||
//卡片区
|
//卡片区
|
||||||
let map = {
|
let map = {
|
||||||
|
|
@ -3024,7 +3097,7 @@ export default {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
//表格数据
|
//表格数据
|
||||||
this.addOrUpdateArrayItem(this.tableData, {
|
let carTou = {
|
||||||
name: msgN[j].name,
|
name: msgN[j].name,
|
||||||
time: msgN[j].time,
|
time: msgN[j].time,
|
||||||
type: msgN[j].type,
|
type: msgN[j].type,
|
||||||
|
|
@ -3033,7 +3106,26 @@ export default {
|
||||||
occ: msgN[j].occ,
|
occ: msgN[j].occ,
|
||||||
speed: newSpeed,
|
speed: newSpeed,
|
||||||
originalSpeed: msgN[j].speed
|
originalSpeed: msgN[j].speed
|
||||||
|
};
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.triggerDataCharts(
|
||||||
|
this.intersectionList,
|
||||||
|
this.topicVideoIdList[i].videoId,
|
||||||
|
msgN[j].component_id,
|
||||||
|
carTou
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
//之前错误逻辑，不知道为啥怎么处理
|
||||||
|
// this.addOrUpdateArrayItem(this.tableData, {
|
||||||
|
// name: msgN[j].name,
|
||||||
|
// time: msgN[j].time,
|
||||||
|
// type: msgN[j].type,
|
||||||
|
// n_stay: msgN[j].n_stay,
|
||||||
|
// n_queue: msgN[j].n_queue,
|
||||||
|
// occ: msgN[j].occ,
|
||||||
|
// speed: newSpeed,
|
||||||
|
// originalSpeed: msgN[j].speed
|
||||||
|
// });
|
||||||
} else if (msgN[j].component_type == '类型') {
|
} else if (msgN[j].component_type == '类型') {
|
||||||
//console.log('实时触发-类型-', msgN[j].type_data);
|
//console.log('实时触发-类型-', msgN[j].type_data);
|
||||||
let map = {
|
let map = {
|
||||||
|
|
@ -3069,8 +3161,8 @@ export default {
|
||||||
this.triggerTypeData
|
this.triggerTypeData
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
//表格数据
|
//表格数据 类型有点特殊需要重新比对
|
||||||
this.addOrUpdateArrayItem(this.tableData, {
|
let carTou = {
|
||||||
name: msgN[j].name,
|
name: msgN[j].name,
|
||||||
time: msgN[j].time,
|
time: msgN[j].time,
|
||||||
type: msgN[j].type,
|
type: msgN[j].type,
|
||||||
|
|
@ -3078,8 +3170,30 @@ export default {
|
||||||
n_queue: msgN[j].n_queue,
|
n_queue: msgN[j].n_queue,
|
||||||
occ: msgN[j].occ,
|
occ: msgN[j].occ,
|
||||||
speed: newSpeed,
|
speed: newSpeed,
|
||||||
originalSpeed: msgN[j].speed
|
originalSpeed: msgN[j].speed,
|
||||||
|
type_data: msgN[j].type_data
|
||||||
|
};
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.triggerDataCharts(
|
||||||
|
this.intersectionList,
|
||||||
|
this.topicVideoIdList[i].videoId,
|
||||||
|
msgN[j].component_id,
|
||||||
|
msgN[j].type_data,
|
||||||
|
msgN[j].time,
|
||||||
|
carTou
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
//之前错误逻辑，不知道为啥怎么处理
|
||||||
|
// this.addOrUpdateArrayItem(this.tableData, {
|
||||||
|
// name: msgN[j].name,
|
||||||
|
// time: msgN[j].time,
|
||||||
|
// type: msgN[j].type,
|
||||||
|
// n_stay: msgN[j].n_stay,
|
||||||
|
// n_queue: msgN[j].n_queue,
|
||||||
|
// occ: msgN[j].occ,
|
||||||
|
// speed: newSpeed,
|
||||||
|
// originalSpeed: msgN[j].speed
|
||||||
|
// });
|
||||||
} else if (msgN[j].component_type == '检测数') {
|
} else if (msgN[j].component_type == '检测数') {
|
||||||
let map = {
|
let map = {
|
||||||
n_stay: msgN[j].n_stay,
|
n_stay: msgN[j].n_stay,
|
||||||
|
|
@ -3112,7 +3226,7 @@ export default {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
//表格数据
|
//表格数据
|
||||||
this.addOrUpdateArrayItem(this.tableData, {
|
let carTou = {
|
||||||
name: msgN[j].name,
|
name: msgN[j].name,
|
||||||
time: msgN[j].time,
|
time: msgN[j].time,
|
||||||
type: msgN[j].type,
|
type: msgN[j].type,
|
||||||
|
|
@ -3121,7 +3235,26 @@ export default {
|
||||||
occ: msgN[j].occ,
|
occ: msgN[j].occ,
|
||||||
speed: newSpeed,
|
speed: newSpeed,
|
||||||
originalSpeed: msgN[j].speed
|
originalSpeed: msgN[j].speed
|
||||||
|
};
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.triggerDataCharts(
|
||||||
|
this.intersectionList,
|
||||||
|
this.topicVideoIdList[i].videoId,
|
||||||
|
msgN[j].component_id,
|
||||||
|
carTou
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
//之前错误逻辑，不知道为啥怎么处理
|
||||||
|
// this.addOrUpdateArrayItem(this.tableData, {
|
||||||
|
// name: msgN[j].name,
|
||||||
|
// time: msgN[j].time,
|
||||||
|
// type: msgN[j].type,
|
||||||
|
// n_stay: msgN[j].n_stay,
|
||||||
|
// n_queue: msgN[j].n_queue,
|
||||||
|
// occ: msgN[j].occ,
|
||||||
|
// speed: newSpeed,
|
||||||
|
// originalSpeed: msgN[j].speed
|
||||||
|
// });
|
||||||
} else if (msgN[j].component_type == '排队数') {
|
} else if (msgN[j].component_type == '排队数') {
|
||||||
let map = {
|
let map = {
|
||||||
n_queue: msgN[j].n_queue,
|
n_queue: msgN[j].n_queue,
|
||||||
|
|
@ -3149,7 +3282,7 @@ export default {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
//表格数据
|
//表格数据
|
||||||
this.addOrUpdateArrayItem(this.tableData, {
|
let carTou = {
|
||||||
name: msgN[j].name,
|
name: msgN[j].name,
|
||||||
time: msgN[j].time,
|
time: msgN[j].time,
|
||||||
type: msgN[j].type,
|
type: msgN[j].type,
|
||||||
|
|
@ -3158,9 +3291,28 @@ export default {
|
||||||
occ: msgN[j].occ,
|
occ: msgN[j].occ,
|
||||||
speed: newSpeed,
|
speed: newSpeed,
|
||||||
originalSpeed: msgN[j].speed
|
originalSpeed: msgN[j].speed
|
||||||
|
};
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.triggerDataCharts(
|
||||||
|
this.intersectionList,
|
||||||
|
this.topicVideoIdList[i].videoId,
|
||||||
|
msgN[j].component_id,
|
||||||
|
carTou
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
//之前错误逻辑，不知道为啥怎么处理
|
||||||
|
// this.addOrUpdateArrayItem(this.tableData, {
|
||||||
|
// name: msgN[j].name,
|
||||||
|
// time: msgN[j].time,
|
||||||
|
// type: msgN[j].type,
|
||||||
|
// n_stay: msgN[j].n_stay,
|
||||||
|
// n_queue: msgN[j].n_queue,
|
||||||
|
// occ: msgN[j].occ,
|
||||||
|
// speed: newSpeed,
|
||||||
|
// originalSpeed: msgN[j].speed
|
||||||
|
// });
|
||||||
} else if (msgN[j].component_type == 'OD') {
|
} else if (msgN[j].component_type == 'OD') {
|
||||||
//图表区
|
//图表区 - TODO 估计有未知问题
|
||||||
this.addOrUpdateArrayItem(this.triggerODData, {
|
this.addOrUpdateArrayItem(this.triggerODData, {
|
||||||
ob_data: msgN[j].ob_data
|
ob_data: msgN[j].ob_data
|
||||||
});
|
});
|
||||||
|
|
@ -3194,18 +3346,18 @@ export default {
|
||||||
if (msgN[j].component_type == '车头时距') {
|
if (msgN[j].component_type == '车头时距') {
|
||||||
//图表区数组加表格数据
|
//图表区数组加表格数据
|
||||||
let carTou = {
|
let carTou = {
|
||||||
time: msgN[j].time,
|
|
||||||
headway: msgN[j].headway,
|
|
||||||
avg: msgN[j].avg,
|
|
||||||
max: msgN[j].max,
|
|
||||||
med: msgN[j].med,
|
|
||||||
min: msgN[j].min,
|
|
||||||
name: msgN[j].name,
|
name: msgN[j].name,
|
||||||
|
time: msgN[j].time,
|
||||||
type: msgN[j].type,
|
type: msgN[j].type,
|
||||||
n_stay: msgN[j].n_stay,
|
n_stay: msgN[j].n_stay,
|
||||||
n_queue: msgN[j].n_queue,
|
n_queue: msgN[j].n_queue,
|
||||||
occ: msgN[j].occ,
|
occ: msgN[j].occ,
|
||||||
speed: newSpeed,
|
speed: newSpeed,
|
||||||
|
headway: msgN[j].headway,
|
||||||
|
avg: msgN[j].avg,
|
||||||
|
max: msgN[j].max,
|
||||||
|
med: msgN[j].med,
|
||||||
|
min: msgN[j].min,
|
||||||
originalSpeed: msgN[j].speed
|
originalSpeed: msgN[j].speed
|
||||||
};
|
};
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
|
@ -3246,17 +3398,18 @@ export default {
|
||||||
});
|
});
|
||||||
//图表区
|
//图表区
|
||||||
let speedMap = {
|
let speedMap = {
|
||||||
time: msgN[j].time,
|
|
||||||
speed: newSpeed,
|
|
||||||
avg: msgN[j].avg,
|
|
||||||
max: msgN[j].max,
|
|
||||||
med: msgN[j].med,
|
|
||||||
min: msgN[j].min,
|
|
||||||
name: msgN[j].name,
|
name: msgN[j].name,
|
||||||
|
time: msgN[j].time,
|
||||||
type: msgN[j].type,
|
type: msgN[j].type,
|
||||||
n_stay: msgN[j].n_stay,
|
n_stay: msgN[j].n_stay,
|
||||||
n_queue: msgN[j].n_queue,
|
n_queue: msgN[j].n_queue,
|
||||||
occ: msgN[j].occ,
|
occ: msgN[j].occ,
|
||||||
|
speed: newSpeed,
|
||||||
|
headway: msgN[j].headway,
|
||||||
|
avg: msgN[j].avg,
|
||||||
|
max: msgN[j].max,
|
||||||
|
med: msgN[j].med,
|
||||||
|
min: msgN[j].min,
|
||||||
originalSpeed: msgN[j].speed
|
originalSpeed: msgN[j].speed
|
||||||
};
|
};
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
|
@ -3283,18 +3436,19 @@ export default {
|
||||||
});
|
});
|
||||||
//图表区
|
//图表区
|
||||||
let table = {
|
let table = {
|
||||||
|
name: msgN[j].name,
|
||||||
time: msgN[j].time,
|
time: msgN[j].time,
|
||||||
|
type: msgN[j].type,
|
||||||
|
n_stay: msgN[j].n_stay,
|
||||||
|
n_queue: msgN[j].n_queue,
|
||||||
|
occ: msgN[j].occ,
|
||||||
speed: newSpeed,
|
speed: newSpeed,
|
||||||
|
type_data: msgN[j].type_data,
|
||||||
|
headway: msgN[j].headway,
|
||||||
avg: msgN[j].avg,
|
avg: msgN[j].avg,
|
||||||
max: msgN[j].max,
|
max: msgN[j].max,
|
||||||
med: msgN[j].med,
|
med: msgN[j].med,
|
||||||
min: msgN[j].min,
|
min: msgN[j].min,
|
||||||
name: msgN[j].name,
|
|
||||||
type: msgN[j].type,
|
|
||||||
n_stay: msgN[j].n_stay,
|
|
||||||
n_queue: msgN[j].n_queue,
|
|
||||||
type_data: msgN[j].type_data,
|
|
||||||
occ: msgN[j].occ,
|
|
||||||
originalSpeed: msgN[j].speed
|
originalSpeed: msgN[j].speed
|
||||||
};
|
};
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
|
@ -3337,7 +3491,7 @@ export default {
|
||||||
const msgN = JSON.parse(temp);
|
const msgN = JSON.parse(temp);
|
||||||
//console.log('固定间隔', msgN, this.topicVideoIdList[i].videoId);
|
//console.log('固定间隔', msgN, this.topicVideoIdList[i].videoId);
|
||||||
// this.cycleStatisticsData = msgN;
|
// this.cycleStatisticsData = msgN;
|
||||||
// console.log('固定间隔', msgN)
|
// console.log('固定间隔', msgN);
|
||||||
for (let j = 0; j < msgN.length; j++) {
|
for (let j = 0; j < msgN.length; j++) {
|
||||||
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
|
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
|
||||||
let newSpeed = '-';
|
let newSpeed = '-';
|
||||||
|
|
@ -3347,19 +3501,28 @@ export default {
|
||||||
if (msgN[j].component_type == '车头时距') {
|
if (msgN[j].component_type == '车头时距') {
|
||||||
//图表区数组加表格数据
|
//图表区数组加表格数据
|
||||||
let carTou = {
|
let carTou = {
|
||||||
|
name: msgN[j].name,
|
||||||
time: msgN[j].time,
|
time: msgN[j].time,
|
||||||
|
type: msgN[j].type,
|
||||||
|
in_flow: msgN[j].in_flow,
|
||||||
|
out_flow: msgN[j].out_flow,
|
||||||
|
ave_stay: msgN[j].ave_stay,
|
||||||
|
ave_queue: msgN[j].ave_queue,
|
||||||
|
ave_occ: msgN[j].ave_occ,
|
||||||
|
ave_delay: msgN[j].ave_delay,
|
||||||
|
speed: newSpeed,
|
||||||
ave_headway: msgN[j].ave_headway,
|
ave_headway: msgN[j].ave_headway,
|
||||||
avg: msgN[j].avg,
|
avg: msgN[j].avg,
|
||||||
max: msgN[j].max,
|
max: msgN[j].max,
|
||||||
med: msgN[j].med,
|
med: msgN[j].med,
|
||||||
min: msgN[j].min,
|
min: msgN[j].min,
|
||||||
name: msgN[j].name,
|
|
||||||
type: msgN[j].type,
|
|
||||||
ave_stay: msgN[j].ave_stay,
|
|
||||||
ave_queue: msgN[j].ave_queue,
|
|
||||||
occ: msgN[j].occ,
|
occ: msgN[j].occ,
|
||||||
speed: newSpeed,
|
originalSpeed: msgN[j].speed,
|
||||||
originalSpeed: msgN[j].speed
|
gate_id: msgN[j].gate_id,
|
||||||
|
interval: msgN[j].interval,
|
||||||
|
flow: msgN[j].flow,
|
||||||
|
in_spd: msgN[j].in_spd,
|
||||||
|
out_spd: msgN[j].out_spd,
|
||||||
};
|
};
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.cycleStatisticsDataCharts(
|
this.cycleStatisticsDataCharts(
|
||||||
|
|
@ -3399,18 +3562,28 @@ export default {
|
||||||
});
|
});
|
||||||
//图表区
|
//图表区
|
||||||
let speedMap = {
|
let speedMap = {
|
||||||
|
name: msgN[j].name,
|
||||||
time: msgN[j].time,
|
time: msgN[j].time,
|
||||||
|
type: msgN[j].type,
|
||||||
|
in_flow: msgN[j].in_flow,
|
||||||
|
out_flow: msgN[j].out_flow,
|
||||||
|
ave_stay: msgN[j].ave_stay,
|
||||||
|
ave_queue: msgN[j].ave_queue,
|
||||||
|
ave_occ: msgN[j].ave_occ,
|
||||||
|
ave_delay: msgN[j].ave_delay,
|
||||||
speed: newSpeed,
|
speed: newSpeed,
|
||||||
|
ave_headway: msgN[j].ave_headway,
|
||||||
avg: msgN[j].avg,
|
avg: msgN[j].avg,
|
||||||
max: msgN[j].max,
|
max: msgN[j].max,
|
||||||
med: msgN[j].med,
|
med: msgN[j].med,
|
||||||
min: msgN[j].min,
|
min: msgN[j].min,
|
||||||
name: msgN[j].name,
|
|
||||||
type: msgN[j].type,
|
|
||||||
ave_stay: msgN[j].ave_stay,
|
|
||||||
ave_queue: msgN[j].ave_queue,
|
|
||||||
occ: msgN[j].occ,
|
occ: msgN[j].occ,
|
||||||
originalSpeed: msgN[j].speed
|
originalSpeed: msgN[j].speed,
|
||||||
|
gate_id: msgN[j].gate_id,
|
||||||
|
interval: msgN[j].interval,
|
||||||
|
flow: msgN[j].flow,
|
||||||
|
in_spd: msgN[j].in_spd,
|
||||||
|
out_spd: msgN[j].out_spd,
|
||||||
};
|
};
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.cycleStatisticsDataCharts(
|
this.cycleStatisticsDataCharts(
|
||||||
|
|
@ -3438,19 +3611,29 @@ export default {
|
||||||
});
|
});
|
||||||
//图表区
|
//图表区
|
||||||
let table = {
|
let table = {
|
||||||
|
name: msgN[j].name,
|
||||||
time: msgN[j].time,
|
time: msgN[j].time,
|
||||||
|
type: msgN[j].type,
|
||||||
|
in_flow: msgN[j].in_flow,
|
||||||
|
out_flow: msgN[j].out_flow,
|
||||||
|
ave_stay: msgN[j].ave_stay,
|
||||||
|
ave_queue: msgN[j].ave_queue,
|
||||||
|
ave_occ: msgN[j].ave_occ,
|
||||||
|
ave_delay: msgN[j].ave_delay,
|
||||||
speed: newSpeed,
|
speed: newSpeed,
|
||||||
|
type_data: msgN[j].type_data,
|
||||||
|
ave_headway: msgN[j].ave_headway,
|
||||||
avg: msgN[j].avg,
|
avg: msgN[j].avg,
|
||||||
max: msgN[j].max,
|
max: msgN[j].max,
|
||||||
med: msgN[j].med,
|
med: msgN[j].med,
|
||||||
min: msgN[j].min,
|
min: msgN[j].min,
|
||||||
name: msgN[j].name,
|
|
||||||
type: msgN[j].type,
|
|
||||||
type_data: msgN[j].type_data,
|
|
||||||
ave_stay: msgN[j].ave_stay,
|
|
||||||
ave_queue: msgN[j].ave_queue,
|
|
||||||
occ: msgN[j].occ,
|
occ: msgN[j].occ,
|
||||||
originalSpeed: msgN[j].speed
|
originalSpeed: msgN[j].speed,
|
||||||
|
gate_id: msgN[j].gate_id,
|
||||||
|
interval: msgN[j].interval,
|
||||||
|
flow: msgN[j].flow,
|
||||||
|
in_spd: msgN[j].in_spd,
|
||||||
|
out_spd: msgN[j].out_spd,
|
||||||
};
|
};
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.cycleStatisticsDataCharts(
|
this.cycleStatisticsDataCharts(
|
||||||
|
|
@ -3479,16 +3662,28 @@ export default {
|
||||||
});
|
});
|
||||||
//图表区
|
//图表区
|
||||||
let table = {
|
let table = {
|
||||||
|
name: msgN[j].name,
|
||||||
time: msgN[j].time,
|
time: msgN[j].time,
|
||||||
|
type: msgN[j].type,
|
||||||
in_flow: msgN[j].in_flow,
|
in_flow: msgN[j].in_flow,
|
||||||
out_flow: msgN[j].out_flow,
|
out_flow: msgN[j].out_flow,
|
||||||
name: msgN[j].name,
|
|
||||||
type: msgN[j].type,
|
|
||||||
ave_stay: msgN[j].ave_stay,
|
ave_stay: msgN[j].ave_stay,
|
||||||
ave_queue: msgN[j].ave_queue,
|
ave_queue: msgN[j].ave_queue,
|
||||||
occ: msgN[j].occ,
|
ave_occ: msgN[j].ave_occ,
|
||||||
|
ave_delay: msgN[j].ave_delay,
|
||||||
speed: newSpeed,
|
speed: newSpeed,
|
||||||
originalSpeed: msgN[j].speed
|
ave_headway: msgN[j].ave_headway,
|
||||||
|
avg: msgN[j].avg,
|
||||||
|
max: msgN[j].max,
|
||||||
|
med: msgN[j].med,
|
||||||
|
min: msgN[j].min,
|
||||||
|
occ: msgN[j].occ,
|
||||||
|
originalSpeed: msgN[j].speed,
|
||||||
|
gate_id: msgN[j].gate_id,
|
||||||
|
interval: msgN[j].interval,
|
||||||
|
flow: msgN[j].flow,
|
||||||
|
in_spd: msgN[j].in_spd,
|
||||||
|
out_spd: msgN[j].out_spd,
|
||||||
};
|
};
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.cycleStatisticsDataCharts(
|
this.cycleStatisticsDataCharts(
|
||||||
|
|
@ -3513,18 +3708,28 @@ export default {
|
||||||
});
|
});
|
||||||
//图表
|
//图表
|
||||||
let table = {
|
let table = {
|
||||||
|
name: msgN[j].name,
|
||||||
time: msgN[j].time,
|
time: msgN[j].time,
|
||||||
|
type: msgN[j].type,
|
||||||
|
in_flow: msgN[j].in_flow,
|
||||||
|
out_flow: msgN[j].out_flow,
|
||||||
ave_stay: msgN[j].ave_stay,
|
ave_stay: msgN[j].ave_stay,
|
||||||
|
ave_queue: msgN[j].ave_queue,
|
||||||
|
ave_occ: msgN[j].ave_occ,
|
||||||
|
ave_delay: msgN[j].ave_delay,
|
||||||
|
speed: newSpeed,
|
||||||
|
ave_headway: msgN[j].ave_headway,
|
||||||
avg: msgN[j].avg,
|
avg: msgN[j].avg,
|
||||||
max: msgN[j].max,
|
max: msgN[j].max,
|
||||||
med: msgN[j].med,
|
med: msgN[j].med,
|
||||||
min: msgN[j].min,
|
min: msgN[j].min,
|
||||||
name: msgN[j].name,
|
|
||||||
type: msgN[j].type,
|
|
||||||
ave_queue: msgN[j].ave_queue,
|
|
||||||
occ: msgN[j].occ,
|
occ: msgN[j].occ,
|
||||||
speed: newSpeed,
|
originalSpeed: msgN[j].speed,
|
||||||
originalSpeed: msgN[j].speed
|
gate_id: msgN[j].gate_id,
|
||||||
|
interval: msgN[j].interval,
|
||||||
|
flow: msgN[j].flow,
|
||||||
|
in_spd: msgN[j].in_spd,
|
||||||
|
out_spd: msgN[j].out_spd,
|
||||||
};
|
};
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.cycleStatisticsDataCharts(
|
this.cycleStatisticsDataCharts(
|
||||||
|
|
@ -3549,14 +3754,28 @@ export default {
|
||||||
});
|
});
|
||||||
//图表
|
//图表
|
||||||
let table = {
|
let table = {
|
||||||
time: msgN[j].time,
|
|
||||||
ave_queue: msgN[j].ave_queue,
|
|
||||||
name: msgN[j].name,
|
name: msgN[j].name,
|
||||||
|
time: msgN[j].time,
|
||||||
type: msgN[j].type,
|
type: msgN[j].type,
|
||||||
|
in_flow: msgN[j].in_flow,
|
||||||
|
out_flow: msgN[j].out_flow,
|
||||||
ave_stay: msgN[j].ave_stay,
|
ave_stay: msgN[j].ave_stay,
|
||||||
occ: msgN[j].occ,
|
ave_queue: msgN[j].ave_queue,
|
||||||
|
ave_occ: msgN[j].ave_occ,
|
||||||
|
ave_delay: msgN[j].ave_delay,
|
||||||
speed: newSpeed,
|
speed: newSpeed,
|
||||||
originalSpeed: msgN[j].speed
|
ave_headway: msgN[j].ave_headway,
|
||||||
|
avg: msgN[j].avg,
|
||||||
|
max: msgN[j].max,
|
||||||
|
med: msgN[j].med,
|
||||||
|
min: msgN[j].min,
|
||||||
|
occ: msgN[j].occ,
|
||||||
|
originalSpeed: msgN[j].speed,
|
||||||
|
gate_id: msgN[j].gate_id,
|
||||||
|
interval: msgN[j].interval,
|
||||||
|
flow: msgN[j].flow,
|
||||||
|
in_spd: msgN[j].in_spd,
|
||||||
|
out_spd: msgN[j].out_spd,
|
||||||
};
|
};
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.cycleStatisticsDataCharts(
|
this.cycleStatisticsDataCharts(
|
||||||
|
|
@ -3567,6 +3786,7 @@ export default {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
} else if (msgN[j].component_type == '延误') {
|
} else if (msgN[j].component_type == '延误') {
|
||||||
|
// console.log('固定间隔-延误', msgN[j]);
|
||||||
let map = {
|
let map = {
|
||||||
ave_delay: msgN[j].ave_delay,
|
ave_delay: msgN[j].ave_delay,
|
||||||
time: msgN[j].time
|
time: msgN[j].time
|
||||||
|
|
@ -3582,15 +3802,28 @@ export default {
|
||||||
});
|
});
|
||||||
//图表
|
//图表
|
||||||
let table = {
|
let table = {
|
||||||
time: msgN[j].time,
|
|
||||||
ave_delay: msgN[j].ave_delay,
|
|
||||||
name: msgN[j].name,
|
name: msgN[j].name,
|
||||||
|
time: msgN[j].time,
|
||||||
type: msgN[j].type,
|
type: msgN[j].type,
|
||||||
|
in_flow: msgN[j].in_flow,
|
||||||
|
out_flow: msgN[j].out_flow,
|
||||||
ave_stay: msgN[j].ave_stay,
|
ave_stay: msgN[j].ave_stay,
|
||||||
ave_queue: msgN[j].ave_queue,
|
ave_queue: msgN[j].ave_queue,
|
||||||
occ: msgN[j].occ,
|
ave_occ: msgN[j].ave_occ,
|
||||||
|
ave_delay: msgN[j].ave_delay,
|
||||||
speed: newSpeed,
|
speed: newSpeed,
|
||||||
originalSpeed: msgN[j].speed
|
ave_headway: msgN[j].ave_headway,
|
||||||
|
avg: msgN[j].avg,
|
||||||
|
max: msgN[j].max,
|
||||||
|
med: msgN[j].med,
|
||||||
|
min: msgN[j].min,
|
||||||
|
occ: msgN[j].occ,
|
||||||
|
originalSpeed: msgN[j].speed,
|
||||||
|
gate_id: msgN[j].gate_id,
|
||||||
|
interval: msgN[j].interval,
|
||||||
|
flow: msgN[j].flow,
|
||||||
|
in_spd: msgN[j].in_spd,
|
||||||
|
out_spd: msgN[j].out_spd,
|
||||||
};
|
};
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.cycleStatisticsDataCharts(
|
this.cycleStatisticsDataCharts(
|
||||||
|
|
@ -3753,7 +3986,9 @@ export default {
|
||||||
chartsPie, //饼图
|
chartsPie, //饼图
|
||||||
chartsBar, //柱状图
|
chartsBar, //柱状图
|
||||||
MeanValue, //均值图
|
MeanValue, //均值图
|
||||||
thermalOD //OD
|
thermalOD, //OD
|
||||||
|
tableShow,
|
||||||
|
regionTable
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue