lixiaobang
/
TransFlow
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

bug修改

This commit is contained in:
qiudan 2023-11-14 18:25:24 +08:00
parent 419dbdd6aa
commit 426aee89c4
16 changed files with 1828 additions and 940 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/chart/avgChart.vue
View File

@ -1,12 +1,20 @@
<template>
<!-- 均值图 -->
<div style="width: 100%;margin-top: 5px;">
<div style="width: 100%; margin-top: 5px">
<div class="tableTitle">
<div>
<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 style="font-size:18px;">{{ componentName + '-' + chartName + '-' + '均值图'+'-'+status }}</span>
<span style="font-size: 18px">{{ componentName + '-' + chartName + '-' + '均值图' + '-' + status }}</span>
</div>
</div>
<div id="barChart" ref="barChart" style="width: 705px; height: 300px"></div>
@ -35,16 +43,20 @@ export default {
},
status: {
type: String
},
}
},
data() {
return {
};
return {};
},
methods: {
drawBar(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);
if (myChart == null) {
myChart = this.$echarts.init(this.$refs.barChart);
@ -64,7 +76,7 @@ export default {
{
type: 'category',
gridIndex: 0,
data: chartData.map(item => item.stage),
data: chartData.map((item) => item.stage),
axisLine: {
show: false
},
@ -75,7 +87,7 @@ export default {
],
yAxis: {
type: 'value',
splitArea: { show: false },
gridIndex: 0,
min: 0,
@ -206,7 +218,7 @@ export default {
]
};
myChart.setOption(option);
window.addEventListener('resize', function() {
window.addEventListener('resize', function () {
myChart.resize();
});
// this.$nextTick(() => {
@ -218,9 +230,7 @@ export default {
mounted() {
// this.drawBar(this.typeValue);
},
watch: {
}
watch: {}
};
</script>
<style>

12
src/components/chart/barChart.vue
View File

@ -71,10 +71,10 @@ export default {
confine: true
},
grid: {
left: '2%',
right: '4%',
bottom: '10%',
top: '20%',
left: '5%',
right: '5%',
bottom: '0%',
top: '5%',
containLabel: true
},
xAxis: {
@ -86,8 +86,10 @@ export default {
}
},
axisLabel: {
interval: 0,
fontSize: 12,
color: '#000'
color: '#000',
rotate: 30
},
axisTick: {
show: false

138
src/components/chart/lineChart.vue
View File

@ -80,7 +80,22 @@ export default {
// triggerType:'触发时刻'
myChart: null,
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',
series: [],
@ -175,7 +190,15 @@ export default {
// 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) {
if (newVal) {
var series = [
@ -195,52 +218,87 @@ export default {
if (title === '类型') {
this.tooltip = {
formatter: '{a} {b}:{c}个',
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 = '';
series[0].name = '总量';
//获取每种类型数据逻辑有问题
// 映射出类型数组
let arr = newVal.map(function (ele) {
if (ele.type_data != null) {
return ele.type_data;
}
});
var mapN = [];
if (arr && arr.length > 0) {
for (var t = 0; t < arr.length; t++) {
if (arr[t] && arr[t].length > 0) {
for (var i = 0; i < arr[t].length; i++) {
mapN.push(arr[t][i]);
}
}
}
}
// let arr = newVal.map(function (ele) {
// if (ele.type_data != null) {
// return ele.type_data;
// }
// });
// var mapN = [];
// if (arr && arr.length > 0) {
// for (var t = 0; t < arr.length; t++) {
// if (arr[t] && arr[t].length > 0) {
// for (var i = 0; i < arr[t].length; i++) {
// mapN.push(arr[t][i]);
// }
// }
// }
// }
// var lineArr = [];
// if (newVal[0].type_data != undefined) {
// newVal[0].type_data.forEach((ele) => {
// lineArr.push({
// name: ele.name,
// type: 'line',
// data: [],
// smooth: true
// });
// });
// }
// 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 = [];
if (newVal[0].type_data != undefined) {
newVal[0].type_data.forEach((ele) => {
let seriesArr = this.extractKeyValues(newVal, 'type_data');
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({
name: ele.name,
name: item.name,
data: valueList,
type: 'line',
data: [],
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) {
for (let j = 0; j < lineArr.length; j++) {
series.push(lineArr[j]);
@ -251,8 +309,12 @@ export default {
let mapNR1 = [];
newVal.map(function (ele) {
if (ele.type_data != null) {
var sum = ele.type_data.reduce(function (prev, cur) {
return cur.quantity + prev;
let sum = ele.type_data.reduce(function (prev, cur) {
let t = cur.quantity;
if (cur.value || cur.value === 0) {
t = cur.value;
}
return t + prev;
}, 0);
mapNR1.push(sum);
}

42
src/components/chart/tableShow.vue
View File

@ -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-column align="center" prop="steam_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="occ" label="占用状态"></el-table-column>
<el-table-column align="center" prop="speed" label="空间平均速度"></el-table-column>
</el-table>
<!-- 固定间隔 -->
<el-table :data="msg" style="width: 100%" v-if="triggerType == '固定间隔'">
<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-form :model="msg" label-width="80px">
<el-form-item label="val1">
<el-time-select placeholder="起始时间" v-model="startTime"
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }">
<el-time-select
placeholder="起始时间"
v-model="startTime"
:picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
>
</el-time-select>
<el-time-select placeholder="结束时间" v-model="endTime"
:picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }">
<el-time-select
placeholder="结束时间"
v-model="endTime"
:picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }"
>
</el-time-select>
</el-form-item>
<el-form-item label="val2">
<el-select v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="val3">
@ -162,6 +165,15 @@ export default {
value: ''
};
},
watch: {
msg: {
handler(newVal) {
// console.log('断面', newVal);
// console.log('断面-triggerType', this.triggerType);
}
// immediate: true
}
},
methods: {
handleCommand(command) {
// 用户名下拉菜单选择事件
@ -169,19 +181,21 @@ export default {
this.dialogVisible = true;
}
},
onSubmit() { },
handleClose() { }
onSubmit() {},
handleClose() {}
},
mounted() { }
mounted() {}
};
</script>
<style scoped lang="scss">
/deep/ .el-table{
/deep/ .el-table {
height: 709px !important;
overflow-y: scroll;
z-index: 9999;
}
.el-table::-webkit-scrollbar { width: 0 !important }
.el-table::-webkit-scrollbar {
width: 0 !important;
}
.tableContent {
position: relative;
}

116
src/components/chart/thermalChart.vue
View File

@ -7,12 +7,10 @@ export default {
name: 'thermalChart', //热点图组件
data() {
return {
thermalChartData:[]
thermalChartData: []
};
},
created() {
},
created() {},
props: {
list: {
type: Array,
@ -25,7 +23,7 @@ export default {
},
title: {
type: String
},
}
// status: {
// type: String
// },
@ -38,31 +36,31 @@ export default {
ODhanlde(odData) {
// console.log(odData,'oddata');
// var odData = this.odData
var chartData = []
var start = []
var chartData = [];
var start = [];
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++) {
start.push(item[j].start)
start.push(item[j].start);
// 数组去重
// od图的数据
chartData.push([i, j, item[j].quantity])
chartData.push([i, j, item[j].quantity]);
// console.log([i,j,item[j].val]);
}
}
// this.thermalChartData = chartData
// console.log(chartData,'处理过后的odssssssssssssss');
return chartData
return chartData;
// console.log(chartData, this.unique(start), 'od图的数据');
},
//数组去重
unique(arr) {
let newArr = []
arr.forEach(item => {
return newArr.includes(item) ? '' : newArr.push(item)
})
return newArr
let newArr = [];
arr.forEach((item) => {
return newArr.includes(item) ? '' : newArr.push(item);
});
return newArr;
},
// 绘制热力图
drawThermalChart(odData, startEnd) {
@ -70,16 +68,16 @@ export default {
let option = {
dataZoom: [
{
id: "dataZoomY",
type: "slider",
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
startValue: 0,
endValue: 10,
filterMode: "empty",
},
filterMode: 'empty'
}
],
tooltip: {
position: "top",
position: 'top'
// formatter: function (params) {
// return (
// "学历：" + days[params.value[1]] + "<br/>" + "人数：" + params.data[2]
@ -88,81 +86,83 @@ export default {
},
animation: false,
grid: {
left: "3%",
right: "8%",
bottom: "8%",
containLabel: true,
left: '3%',
right: '8%',
bottom: '8%',
containLabel: true
},
xAxis: {
type: "category",
type: 'category',
data: startEnd.start.split(','),
axisLine: {
lineStyle: {
color: "#000",
},
color: '#000'
}
},
axisLabel: {
interval: 0,
rotate: 40,
rotate: 40
},
splitArea: {
show: true,
},
show: true
}
// name: "镇街",
},
yAxis: {
type: "category",
type: 'category',
data: startEnd.end.split(','),
axisLine: {
lineStyle: {
color: "#000",
},
color: '#000'
}
},
axisLabel: {
interval: 0,
rotate: 40,
rotate: 40
},
splitArea: {
show: true,
},
show: true
}
// name: "",
},
visualMap: {
min: 1,
max: 50,
calculable: true,
orient: "horizontal",
left: "center",
bottom: "1%",
text: ["50", "1"], // 文本，默认为数值文本
orient: 'horizontal',
left: 'center',
bottom: '1%',
text: ['50', '1'], // 文本，默认为数值文本
//color:['#20a0ff','#D2EDFF'],
calculable: false,
color: ["#22DDDD", "#fec42c", "#80F1BE"],
color: ['#22DDDD', '#fec42c', '#80F1BE']
},
series: [
{
name: "OD图",
type: "heatmap",
name: 'OD图',
type: 'heatmap',
data: this.ODhanlde(odData),
label: {
normal: {
show: true,
},
show: true
}
},
itemStyle: {
emphasis: {
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(() => {
// myChart.setOption(option)
// myChart.resize();
@ -173,12 +173,8 @@ export default {
// if (this.list) {
// this.drawThermalChart()
// }
},
watch: {
}
watch: {}
};
</script>
<style scoped></style>

284
src/components/sensorFusion/echartsBar copy.vue Normal file
View File

@ -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>

368
src/components/sensorFusion/echartsBar.vue
View File

@ -1,268 +1,128 @@
<template>
<div :id="echartsRef" ref="echartsBar"></div>
</template>
<script>
export default {
name: "echartsBar", //折线图组件
props: {
intersectionName: {
type: Array,
default() {
return [];
},
<div :id="echartsRef" ref="echartsBar"></div>
</template>
<script>
export default {
name: 'echartsBar',
props: {
intersectionName: { type: Array, default: () => [] },
chatShowType: { type: String },
echartsRef: { type: String },
dataList: { type: Array, default: () => [] },
timeMode: { type: String },
},
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++) {
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,
},
],
data() {
return {
chart: null,
chartData: { yData: [], xData: [] },
};
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();
});
computed: {
option() {
return {
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' } },
axisLabel: { fontSize: 12, color: '#000', fontFamily: 'Bebas' },
},
],
series: [
{
type: 'bar',
barWidth: 20,
itemStyle: { barBorderRadius: [5, 5, 0, 0] },
name: '时间',
data: this.chartData.yData,
},
],
};
},
},
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));
methods: {
initData() {
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;
}
that.initEcharts();
});
}, 300);
this.chartData.yData.push(quantity);
this.chartData.xData.push(this.dataList[0].type_data[j].name);
}
}
},
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: {
handler: function (oldValues, newValues) {
mounted() {
const $dom = document.getElementById(this.echartsRef);
$dom.style.width = '440px';
$dom.style.height = '260px';
setTimeout(() => {
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.chart = this.$echarts.init(this.$el);
// this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
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>
<style lang="less" scoped>
#echartsBar {
width: 100%;
height: 100%;
}
</style>
};
</script>
<style lang="less" scoped>
#echartsBar {
width: 100%;
height: 100%;
}
</style>

165
src/components/sensorFusion/echartsLine.vue
View File

@ -66,6 +66,37 @@ export default {
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) {
if (val && val.length > 10) {
@ -73,23 +104,35 @@ export default {
// this.typeData = this.typeData.slice(-10);
}
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.componentType == '车头时距') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'headway');
xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'headway');
} else if (this.componentType == '流量') {
if (this.flowType == '入流') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'in_flow');
xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'in_flow');
} else if (this.flowType == '出流') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'out_flow');
xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'out_flow');
}
} else if (this.componentType == '速度') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'speed');
xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'speed');
} 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');
const transformedData = [];
if (seriesArr && seriesArr.length > 0) {
@ -119,31 +162,32 @@ export default {
name: '总数',
value: totalCountList
});
this.seriesList = transformedData;
this.seriesList = this.seriesList.concat(transformedData).slice(-10);
} else if (this.componentType == '检测数') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'n_stay');
xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'n_stay');
} else if (this.componentType == '排队数') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'n_queue');
xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'n_queue');
}
} else if (this.timeMode == '固定时刻') {
if (this.componentType == '车头时距') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'headway');
xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'headway');
} else if (this.componentType == '流量') {
if (this.flowType == '入流') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'in_flow');
xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'in_flow');
} else if (this.flowType == '出流') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'out_flow');
xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'out_flow');
}
} else if (this.componentType == '速度') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'speed');
xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'speed');
} 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');
// console.log('seriesArr-固定时刻', seriesArr);
const transformedData = [];
@ -166,38 +210,41 @@ export default {
}
}
// console.log('transformedData-1',transformedData)
const totalCountList = transformedData[0].value.map((_, i) => {
return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
});
let totalCountList = 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({
name: '总数',
value: totalCountList
});
this.seriesList = transformedData;
this.seriesList = this.seriesList.concat(transformedData).slice(-10);
} else if (this.componentType == '检测数') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'n_stay');
xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'n_stay');
} else if (this.componentType == '排队数') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'n_queue');
xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'n_queue');
}
} else if (this.timeMode == '固定间隔') {
if (this.componentType == '车头时距') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'ave_headway');
xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'ave_headway');
} else if (this.componentType == '流量') {
if (this.flowType == '入流') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'in_flow');
xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'in_flow');
} else if (this.flowType == '出流') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'out_flow');
xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'out_flow');
}
} else if (this.componentType == '速度') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'speed');
xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'speed');
} else if (this.componentType == '类型') {
this.chartData.xData = this.extractKeyValues(val, 'time').reverse();
xData = this.extractKeyValues(val, 'time');
let seriesArr = this.extractKeyValues(val, 'type_data');
// console.log('固定间隔-类型-seriesArr-', seriesArr);
// console.log('固定间隔-类型-xData-', this.chartData.xData);
@ -232,19 +279,25 @@ export default {
name: '总数',
value: totalCountList
});
this.seriesList = transformedData;
this.seriesList = this.seriesList.concat(transformedData).slice(-10);
// console.log('固定间隔-类型-transformedData-2', transformedData);
} else if (this.componentType == '延误') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'ave_delay');
xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'ave_delay');
} else if (this.componentType == '检测数') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'ave_stay');
xData = this.extractKeyValues(val, 'time');
yData = this.extractKeyValues(val, 'ave_stay');
} else if (this.componentType == '排队数') {
this.chartData.xData = this.extractKeyValues(val, 'time');
this.chartData.yData = this.extractKeyValues(val, 'ave_queue');
xData = this.extractKeyValues(val, 'time');
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 {
return false;
}
@ -354,7 +407,8 @@ export default {
{
// name: '流量_1-zone2-曲线图-实时触发',
type: 'line',
data: this.chartData.yData.reverse(),
// data: this.chartData.yData.reverse(),
data: this.chartData.yData,
symbolSize: 8, //标记的大小
lineStyle: {
color: 'rgb(255,115,38)',
@ -404,7 +458,7 @@ export default {
},
legend: {
// 图例过多时滚动
type: "scroll",
type: 'scroll',
left: 'center',
top: 0,
left: '10%',
@ -426,7 +480,8 @@ export default {
},
xAxis: {
type: 'category',
data: this.chartData.xData.reverse(),
// data: this.chartData.xData.reverse(),
data: this.chartData.xData,
axisLine: {
show: false
},
@ -476,10 +531,12 @@ export default {
],
series: seriesList
};
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize();
});
if (myChart) {
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize();
});
}
}
},
mounted() {

16
src/components/sensorFusion/echartsPie.vue
View File

@ -184,13 +184,15 @@ export default {
}
]
};
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize();
});
this.$nextTick(() => {
myChart.resize();
});
if (myChart) {
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize();
});
this.$nextTick(() => {
myChart.resize();
});
}
}
},
mounted() {

692
src/components/sensorFusion/meanValue.vue
View File

@ -1,7 +1,7 @@
<template>
<!-- 均值图 -->
<!-- <div style="width: 100%;margin-top: 5px;"> -->
<!-- <div class="tableTitle">
<!-- 均值图 -->
<!-- <div style="width: 100%;margin-top: 5px;"> -->
<!-- <div class="tableTitle">
<div>
<span
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>
</div>
</div> -->
<div :id="echartsRef" ref="barChart" style="width: 705px; height: 300px"></div>
<!-- </div> -->
<div :id="echartsRef" ref="barChart" style="width: 705px; height: 300px"></div>
<!-- </div> -->
</template>
<script>
export default {
name: "barChart", //均值图图组件
props: {
list: {
type: Array,
default() {
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,
name: 'barChart', //均值图图组件
props: {
list: {
type: Array,
default() {
return [];
}
},
xAxis: [
{
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,
typeValue: {
type: Object
},
series: [
{
name: "外框",
type: "bar",
barGap: "-120%", // 设置外框粗细
data: [300],
barWidth: 150,
itemStyle: {
normal: {
color: "rgba(0,0,0,.1)", // 填充色
barBorderWidth: 1, // 边框宽度
label: {
// 标签显示位置
show: false,
// 组件名称
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
},
},
},
z: 1,
},
{
name: "平均值",
type: "bar",
stack: "val",
barWidth: 150,
xAxisIndex: 0,
yAxisIndex: 0,
label: {
show: true,
position: "right",
// offset: [10, 20],
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,
},
xAxis: [
{
type: 'category',
gridIndex: 0,
data: chartData.map((item) => item.stage),
axisLine: {
show: false
},
axisLabel: {
show: false
}
}
],
yAxis: {
type: 'value',
{
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,
},
],
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
// this.$nextTick(() => {
// myChart.setOption(option)
// 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));
splitArea: { show: false },
gridIndex: 0,
min: 0,
splitNumber: 12,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
max: 200
},
series: [
{
name: '外框',
type: 'bar',
barGap: '-120%', // 设置外框粗细
data: [300],
barWidth: 150,
itemStyle: {
normal: {
color: 'rgba(0,0,0,.1)', // 填充色
barBorderWidth: 1, // 边框宽度
label: {
// 标签显示位置
show: false
}
}
},
z: 1
},
{
name: '平均值',
type: 'bar',
stack: 'val',
barWidth: 150,
xAxisIndex: 0,
yAxisIndex: 0,
label: {
show: true,
position: 'right',
// offset: [10, 20],
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
},
{
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: {
handler: function (oldValues, newValues) {
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();
});
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);
},
},
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));
watch: {
intersectionName: {
handler: function (oldValues, newValues) {
this.$nextTick(() => {
this.initEcharts();
});
}
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();
});
},
},
},
},
chatShowType: {
handler: function (oldValues, 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);
}
},
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>
.tableTitle {
background: #f7f8fa;
margin-bottom: 5px;
padding: 8px;
background: #f7f8fa;
margin-bottom: 5px;
padding: 8px;
}
#meanValue {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
</style>

201
src/components/sensorFusion/regionTable.vue Normal file
View File

@ -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>

162
src/components/sensorFusion/tableShow.vue Normal file
View File

@ -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>

16
src/components/sensorFusion/thermalOD.vue
View File

@ -103,9 +103,9 @@ export default {
// }
// if (this.dataList[0][0] == undefined) {
// for (let i = 0; i < this.dataList.length; i++) {
if (this.dataList.length > 0 && this.dataList[0].ob_data) {
dataOd.push(this.dataList[0].ob_data);
}
if (this.dataList.length > 0 && this.dataList[0].ob_data) {
dataOd.push(this.dataList[0].ob_data);
}
dataList = this.ODhanlde(dataOd);
// }
// } else {
@ -200,10 +200,12 @@ export default {
}
]
};
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize();
});
if (myChart) {
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize();
});
}
}
},
mounted() {

7
src/views/bounced/dataBoard.vue
View File

@ -528,6 +528,12 @@ export default {
// 数据改变重新渲染饼图
itemTypeChart.$refs.pieChartRef.drawPie(itemTypeChart.dataArr[0]);
}
if (
itemTypeChart.echartArr.includes('均值图') &&
itemTypeChart.$refs.avgChartRef != undefined
) {
itemTypeChart.$refs.avgChartRef.drawBar(itemTypeChart.dataArr[0]);
}
if (
itemTypeChart.componentName.includes('OD') &&
itemTypeChart.$refs.ODChartRef != undefined &&
@ -629,6 +635,7 @@ export default {
itemTypeChartRef1.dataArr[0].ob_data &&
itemTypeChartRef1.dataArr[0].ob_data.length != 0
) {
// console.log('固定时刻-od',itemTypeChartRef1.dataArr[0].ob_data)
itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(
itemTypeChartRef1.dataArr[0].ob_data,
itemTypeChartRef1.startEndData

2
src/views/index.vue
View File

@ -1477,7 +1477,7 @@ export default {
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = [];
const msgN = JSON.parse(temp);
// console.log('实时触发trigger-', msgN);
console.log('实时触发trigger-', msgN);
// //console.log("trigger_msgN",msgN)
// msgN.forEach(item => {
// //console.log("item.name",item.name)

511
src/views/sensorFusion/index.vue
View File

@ -462,12 +462,7 @@
: '-'
}}
</span>
<span
v-else-if="
i.triggerData &&
i.triggerData.type_data
"
>
<span v-else-if="i.triggerData && i.triggerData.type_data">
<!-- {{i.triggerData[0].quantity + i.triggerData[1].quantity + i.triggerData[2].quantity}} -->
<!-- <span
v-if="
@ -684,32 +679,38 @@
>
<div style="width: 100%; height: 10%; padding-left: 4%; box-sizing: border-box">
<span class="titleIcon"></span>
{{ e.name }}
{{ e.name + '-' + e.graphicType }}
</div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
<!-- <el-empty :image-size="20"
description="暂无数据"></el-empty> -->
<el-table :data="tableData" style="width: 100%; height: 100%" height="250">
<div style="width: 100%; height: 100%" v-if="e.graphicType == '断面'">
<tableShow :tableData="e.triggerNewData" :triggerType="e.timeMode" />
</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="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>
@ -718,34 +719,24 @@
<span v-if="scope.row.occ == '1'">占用</span>
</template>
</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>
</div>
<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-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>
@ -754,34 +745,24 @@
<span v-if="scope.row.occ == '1'">占用</span>
</template>
</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>
</div>
<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-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="ave_stay" 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>
</template>
</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>
</div>
</div> -->
</div>
<div
style="width: 100%; height: 100%"
@ -1387,11 +1378,13 @@
<script>
let id = 1000;
import chartsLine from '@/components/sensorFusion/echartsLine.vue';
import chartsLine from '@/components/sensorFusion/echartsLine.vue';
import chartsPie from '@/components/sensorFusion/echartsPie.vue';
import chartsBar from '@/components/sensorFusion/echartsBar.vue';
import MeanValue from '../../components/sensorFusion/meanValue.vue';
import thermalOD from '@/components/sensorFusion/thermalOD';
import tableShow from '@/components/sensorFusion/tableShow.vue';
import regionTable from '@/components/sensorFusion/regionTable.vue';
import {
getRealTimeShipjk, //获取实时视频
getDuocgqrhpz, //获取树形数据
@ -1884,6 +1877,7 @@ export default {
this.addSelectOptionField(obj[key]);
} else if (key == 'name') {
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) {
for (let i = 0; i < data.length; i++) {
@ -2889,13 +2922,13 @@ export default {
// 接收托片
case 'trigger-' + this.topicVideoIdList[i].videoId:
try {
// //console.log("trigger_msgN",message)
//console.log("trigger_msgN",message)
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = [];
const msgN = JSON.parse(temp);
// console.log('实时触发trigger-',msgN);
// console.log('实时触发trigger-', msgN);
for (let j = 0; j < msgN.length; j++) {
const locations = this.findLocationById(this.intersectionList, msgN[j].component_id);
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
@ -2908,6 +2941,7 @@ export default {
// if (locations == '卡片区' || locations == '两个区都存在') {
// if(locations == '图表区' || locations == '两个区都存在'){
// console.log('实时触发trigger-车头时距', msgN[j].time);
//图表区数组
this.addOrUpdateArrayItem(this.triggerDataList, {
time: msgN[j].time,
@ -2926,8 +2960,7 @@ export default {
);
});
//表格数据
this.addOrUpdateArrayItem(this.tableData, {
let carTou = {
name: msgN[j].name,
time: msgN[j].time,
type: msgN[j].type,
@ -2936,7 +2969,27 @@ export default {
occ: msgN[j].occ,
speed: newSpeed,
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 = {
@ -2952,6 +3005,7 @@ export default {
);
});
} else if (msgN[j].component_type == '流量') {
// console.log('实时触发trigger-流量', msgN[j]);
//图表区
this.addOrUpdateArrayItem(this.triggerFlowData, {
time: msgN[j].time,
@ -2981,7 +3035,7 @@ export default {
);
});
//表格数据
this.addOrUpdateArrayItem(this.tableData, {
let carTou = {
name: msgN[j].name,
time: msgN[j].time,
type: msgN[j].type,
@ -2990,7 +3044,26 @@ export default {
occ: msgN[j].occ,
speed: newSpeed,
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 == '速度') {
//卡片区
let map = {
@ -3024,7 +3097,7 @@ export default {
);
});
//表格数据
this.addOrUpdateArrayItem(this.tableData, {
let carTou = {
name: msgN[j].name,
time: msgN[j].time,
type: msgN[j].type,
@ -3033,7 +3106,26 @@ export default {
occ: msgN[j].occ,
speed: newSpeed,
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 == '类型') {
//console.log('实时触发-类型-', msgN[j].type_data);
let map = {
@ -3069,8 +3161,8 @@ export default {
this.triggerTypeData
);
});
//表格数据
this.addOrUpdateArrayItem(this.tableData, {
//表格数据 类型有点特殊需要重新比对
let carTou = {
name: msgN[j].name,
time: msgN[j].time,
type: msgN[j].type,
@ -3078,8 +3170,30 @@ export default {
n_queue: msgN[j].n_queue,
occ: msgN[j].occ,
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 == '检测数') {
let map = {
n_stay: msgN[j].n_stay,
@ -3112,7 +3226,7 @@ export default {
);
});
//表格数据
this.addOrUpdateArrayItem(this.tableData, {
let carTou = {
name: msgN[j].name,
time: msgN[j].time,
type: msgN[j].type,
@ -3121,7 +3235,26 @@ export default {
occ: msgN[j].occ,
speed: newSpeed,
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 == '排队数') {
let map = {
n_queue: msgN[j].n_queue,
@ -3149,7 +3282,7 @@ export default {
);
});
//表格数据
this.addOrUpdateArrayItem(this.tableData, {
let carTou = {
name: msgN[j].name,
time: msgN[j].time,
type: msgN[j].type,
@ -3158,9 +3291,28 @@ export default {
occ: msgN[j].occ,
speed: newSpeed,
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') {
//图表区
//图表区 - TODO 估计有未知问题
this.addOrUpdateArrayItem(this.triggerODData, {
ob_data: msgN[j].ob_data
});
@ -3194,18 +3346,18 @@ export default {
if (msgN[j].component_type == '车头时距') {
//图表区数组加表格数据
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,
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,
headway: msgN[j].headway,
avg: msgN[j].avg,
max: msgN[j].max,
med: msgN[j].med,
min: msgN[j].min,
originalSpeed: msgN[j].speed
};
this.$nextTick(() => {
@ -3246,17 +3398,18 @@ export default {
});
//图表区
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,
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,
headway: msgN[j].headway,
avg: msgN[j].avg,
max: msgN[j].max,
med: msgN[j].med,
min: msgN[j].min,
originalSpeed: msgN[j].speed
};
this.$nextTick(() => {
@ -3283,18 +3436,19 @@ export default {
});
//图表区
let table = {
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,
type_data: msgN[j].type_data,
headway: msgN[j].headway,
avg: msgN[j].avg,
max: msgN[j].max,
med: msgN[j].med,
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
};
this.$nextTick(() => {
@ -3337,7 +3491,7 @@ export default {
const msgN = JSON.parse(temp);
//console.log('固定间隔', msgN, this.topicVideoIdList[i].videoId);
// this.cycleStatisticsData = msgN;
// console.log('固定间隔', msgN)
// console.log('固定间隔', msgN);
for (let j = 0; j < msgN.length; j++) {
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
let newSpeed = '-';
@ -3347,19 +3501,28 @@ export default {
if (msgN[j].component_type == '车头时距') {
//图表区数组加表格数据
let carTou = {
name: msgN[j].name,
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,
avg: msgN[j].avg,
max: msgN[j].max,
med: msgN[j].med,
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,
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.cycleStatisticsDataCharts(
@ -3399,18 +3562,28 @@ export default {
});
//图表区
let speedMap = {
name: msgN[j].name,
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,
avg: msgN[j].avg,
max: msgN[j].max,
med: msgN[j].med,
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,
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.cycleStatisticsDataCharts(
@ -3438,19 +3611,29 @@ export default {
});
//图表区
let table = {
name: msgN[j].name,
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,
type_data: msgN[j].type_data,
ave_headway: msgN[j].ave_headway,
avg: msgN[j].avg,
max: msgN[j].max,
med: msgN[j].med,
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,
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.cycleStatisticsDataCharts(
@ -3479,16 +3662,28 @@ export default {
});
//图表区
let table = {
name: msgN[j].name,
time: msgN[j].time,
type: msgN[j].type,
in_flow: msgN[j].in_flow,
out_flow: msgN[j].out_flow,
name: msgN[j].name,
type: msgN[j].type,
ave_stay: msgN[j].ave_stay,
ave_queue: msgN[j].ave_queue,
occ: msgN[j].occ,
ave_occ: msgN[j].ave_occ,
ave_delay: msgN[j].ave_delay,
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.cycleStatisticsDataCharts(
@ -3513,18 +3708,28 @@ export default {
});
//图表
let table = {
name: msgN[j].name,
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,
avg: msgN[j].avg,
max: msgN[j].max,
med: msgN[j].med,
min: msgN[j].min,
name: msgN[j].name,
type: msgN[j].type,
ave_queue: msgN[j].ave_queue,
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.cycleStatisticsDataCharts(
@ -3549,14 +3754,28 @@ export default {
});
//图表
let table = {
time: msgN[j].time,
ave_queue: msgN[j].ave_queue,
name: msgN[j].name,
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,
occ: msgN[j].occ,
ave_queue: msgN[j].ave_queue,
ave_occ: msgN[j].ave_occ,
ave_delay: msgN[j].ave_delay,
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.cycleStatisticsDataCharts(
@ -3567,6 +3786,7 @@ export default {
);
});
} else if (msgN[j].component_type == '延误') {
// console.log('固定间隔-延误', msgN[j]);
let map = {
ave_delay: msgN[j].ave_delay,
time: msgN[j].time
@ -3582,15 +3802,28 @@ export default {
});
//图表
let table = {
time: msgN[j].time,
ave_delay: msgN[j].ave_delay,
name: msgN[j].name,
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,
occ: msgN[j].occ,
ave_occ: msgN[j].ave_occ,
ave_delay: msgN[j].ave_delay,
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.cycleStatisticsDataCharts(
@ -3753,7 +3986,9 @@ export default {
chartsPie, //饼图
chartsBar, //柱状图
MeanValue, //均值图
thermalOD //OD
thermalOD, //OD
tableShow,
regionTable
}
};
</script>