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

bug修改

This commit is contained in:
qiudan 2023-11-15 15:06:10 +08:00
parent 426aee89c4
commit 4cdf66ec1c
10 changed files with 565 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -282,23 +282,33 @@ export default {
var lineArr = []; var lineArr = [];
let seriesArr = this.extractKeyValues(newVal, 'type_data'); let seriesArr = this.extractKeyValues(newVal, 'type_data');
if (seriesArr && seriesArr.length > 0) { if (seriesArr && seriesArr.length > 0) {
for (let i = 0; i < seriesArr[0].length; i++) { const firstLevel = seriesArr.find((i) => i && i.length > 0);
const item = seriesArr[0][i]; //quantity if (firstLevel && firstLevel.length > 0) {
const valueList = seriesArr.map((arr) => { for (let i = 0; i < firstLevel.length; i++) {
let t = arr[i].value; const item = firstLevel[i];
if (arr[i].quantity || arr[i].quantity === 0) { if (item) {
t = arr[i].quantity; const valueList = seriesArr.map((arr) => {
if (arr) {
let t = arr[i] && arr[i].value;
if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) {
t = arr[i].quantity;
}
return t;
}
return 0;
});
lineArr.push({
name: item.name,
data: valueList,
type: 'line',
smooth: true
});
} }
return t; }
});
lineArr.push({
name: item.name,
data: valueList,
type: 'line',
smooth: true
});
} }
} }
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]);

75
src/components/chart/regionTable.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<!-- 区域的表格 --> <!-- 区域的表格 -->
<div class="tableContent"> <div class="tableContent">
<div class="down"> <div class="down">
@ -11,10 +10,9 @@
</el-dropdown> </el-dropdown>
</div> </div>
<div v-if="msg" class="regionBox"> <div v-if="msg" class="regionBox">
<!-- 实时触发 --> <!-- 实时触发 -->
<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="graphical_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="name" label="区域名称"></el-table-column>
@ -45,9 +43,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>
<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="graphical_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="name" label="区域名称"></el-table-column>
@ -76,10 +84,19 @@
<el-table-column align="center" prop="occ" label="占用状态"> <el-table-column align="center" prop="occ" label="占用状态">
<template slot-scope="scope"> <template slot-scope="scope">
<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>
<!-- 固定间隔 --> <!-- 固定间隔 -->
<el-table :data="msg" style="width: 100%" v-if="triggerType == '固定间隔'"> <el-table :data="msg" style="width: 100%" v-if="triggerType == '固定间隔'">
@ -111,18 +128,34 @@
<el-table-column align="center" prop="ave_queue" 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_occ" label="平均占有率"></el-table-column>
<el-table-column align="center" prop="ave_delay" 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-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>
<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">
@ -155,14 +188,14 @@ export default {
name: 'tableShow', //表格组件 name: 'tableShow', //表格组件
props: { props: {
msg: { msg: {
type: Array, type: Array
// default() { // default() {
// return []; // return [];
// } // }
}, },
triggerType: { triggerType: {
type: String type: String
}, }
}, },
data() { data() {
return { return {
@ -180,12 +213,12 @@ export default {
} }
} }
}, },
mounted() { mounted() {
// console.log(this.type,'129129'); // console.log(this.type,'129129');
}, },
watch:{ watch: {
msg:{ msg: {
handler(newVal){ handler(newVal) {
// console.log(newVal,'流量数据table'); // console.log(newVal,'流量数据table');
} }
} }
@ -193,12 +226,14 @@ export default {
}; };
</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;
} }

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

@ -41,7 +41,57 @@
<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>
<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="空间平均速度">
<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="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> -->
<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>
<!-- 固定间隔 --> <!-- 固定间隔 -->
@ -71,9 +121,39 @@
<el-table-column align="center" prop="in_flow" label="入流流量"></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="out_flow" label="出流流量"></el-table-column>
<el-table-column align="center" prop="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="in_spd" label="入流平均速度">
<el-table-column align="center" prop="out_spd" label="出流平均速度"></el-table-column> <template slot-scope="scope">
<el-table-column align="center" prop="speed" label="断面的平均速度"></el-table-column> {{
scope.row.in_spd && scope.row.in_spd != '-' && scope.row.speed != '-1'
? Math.abs(scope.row.in_spd)
: scope.row.in_spd == '-1'
? '-'
: scope.row.in_spd
}}
</template>
</el-table-column>
<el-table-column align="center" prop="out_spd" label="出流平均速度">
<template slot-scope="scope">
{{
scope.row.out_spd && scope.row.out_spd != '-' && scope.row.out_spd != '-1'
? Math.abs(scope.row.out_spd)
: scope.row.out_spd == '-1'
? '-'
: scope.row.out_spd
}}
</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>
</div> </div>
<div v-else> <div v-else>

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

@ -38,15 +38,19 @@ export default {
// var odData = this.odData // var odData = this.odData
var chartData = []; var chartData = [];
var start = []; var start = [];
for (let i = 0; i < odData.length; i++) { if (odData && odData.length > 0) {
let item = odData[i].data; for (let i = 0; i < odData.length; i++) {
for (let j = 0; j < item.length; j++) { let item = odData[i].data;
start.push(item[j].start); if (item && item.length > 0) {
// 数组去重 for (let j = 0; j < item.length; j++) {
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
@ -62,8 +66,21 @@ export default {
}); });
return newArr; return newArr;
}, },
isObject(variable) {
return typeof variable === 'object' && variable !== null && !Array.isArray(variable);
},
// 绘制热力图 // 绘制热力图
drawThermalChart(odData, startEnd) { drawThermalChart(odData, startEnd) {
let startEndStart = [],
startEndEnd = [];
if (this.isObject(startEnd)) {
if (startEnd.start) {
startEndStart = startEnd.start.split(',');
}
if (startEnd.start) {
startEndEnd = startEnd.end.split(',');
}
}
let myChart = this.$echarts.init(this.$refs.thermalChart); let myChart = this.$echarts.init(this.$refs.thermalChart);
let option = { let option = {
dataZoom: [ dataZoom: [
@ -93,7 +110,7 @@ export default {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: startEnd.start.split(','), data: startEndStart,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#000' color: '#000'
@ -110,7 +127,7 @@ export default {
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
data: startEnd.end.split(','), data: startEndEnd,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#000' color: '#000'
@ -173,8 +190,13 @@ export default {
// if (this.list) { // if (this.list) {
// this.drawThermalChart() // this.drawThermalChart()
// } // }
this.drawThermalChart()
}, },
watch: {} watch: {}
}; };
</script> </script>
<style scoped></style> <style scoped>
.a{
color: rgba(120, 0, 0, 0.5);
}
</style>

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

@ -136,19 +136,30 @@ export default {
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) {
for (let i = 0; i < seriesArr[0].length; i++) { const firstLevel = seriesArr.find((i) => i && i.length > 0);
const item = seriesArr[0][i]; //quantity
const valueList = seriesArr.map((arr) => { if (firstLevel && firstLevel.length > 0) {
let t = arr[i].value; for (let i = 0; i < firstLevel.length; i++) {
if (arr[i].quantity || arr[i].quantity === 0) { const item = firstLevel[i];
t = arr[i].quantity;
if (item) {
const valueList = seriesArr.map((arr) => {
if (arr) {
let t = arr[i] && arr[i].value;
if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) {
t = arr[i].quantity;
}
return t;
}
return 0;
});
transformedData.push({
name: item.name,
value: valueList
});
} }
return t; }
});
transformedData.push({
name: item.name,
value: valueList
});
} }
} }
let totalCountList = 0; let totalCountList = 0;
@ -192,21 +203,30 @@ export default {
// console.log('seriesArr-固定时刻', seriesArr); // console.log('seriesArr-固定时刻', seriesArr);
const transformedData = []; const transformedData = [];
if (seriesArr && seriesArr.length > 0) { if (seriesArr && seriesArr.length > 0) {
for (let i = 0; i < seriesArr[0].length; i++) { const firstLevel = seriesArr.find((i) => i && i.length > 0);
const item = seriesArr[0][i];
//固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段 if (firstLevel && firstLevel.length > 0) {
// const valueList = seriesArr.map((arr) => arr[i].quantity); for (let i = 0; i < firstLevel.length; i++) {
const valueList = seriesArr.map((arr) => { const item = firstLevel[i];
let t = arr[i].value;
if (arr[i].quantity || arr[i].quantity === 0) { if (item) {
t = arr[i].quantity; const valueList = seriesArr.map((arr) => {
if (arr) {
let t = arr[i] && arr[i].value;
if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) {
t = arr[i].quantity;
}
return t;
}
return 0;
});
transformedData.push({
name: item.name,
value: valueList
});
} }
return t; }
});
transformedData.push({
name: item.name,
value: valueList
});
} }
} }
// console.log('transformedData-1',transformedData) // console.log('transformedData-1',transformedData)
@ -245,26 +265,36 @@ export default {
yData = this.extractKeyValues(val, 'speed'); yData = this.extractKeyValues(val, 'speed');
} else if (this.componentType == '类型') { } else if (this.componentType == '类型') {
xData = this.extractKeyValues(val, 'time'); xData = this.extractKeyValues(val, 'time');
// console.log('固定间隔-类型-val-', val);
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);
const transformedData = []; const transformedData = [];
if (seriesArr && seriesArr.length > 0) { if (seriesArr && seriesArr.length > 0) {
for (let i = 0; i < seriesArr[0].length; i++) { const firstLevel = seriesArr.find((i) => i && i.length > 0);
const item = seriesArr[0][i];
//固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段 if (firstLevel && firstLevel.length > 0) {
// const valueList = seriesArr.map((arr) => arr[i].value); for (let i = 0; i < firstLevel.length; i++) {
const valueList = seriesArr.map((arr) => { const item = firstLevel[i];
let t = arr[i].value;
if (arr[i].quantity || arr[i].quantity === 0) { if (item) {
t = arr[i].quantity; const valueList = seriesArr.map((arr) => {
if (arr) {
let t = arr[i] && arr[i].value;
if (arr[i] && (arr[i].quantity || arr[i].quantity === 0)) {
t = arr[i].quantity;
}
return t;
}
return 0;
});
transformedData.push({
name: item.name,
value: valueList
});
} }
return t; }
});
transformedData.push({
name: item.name,
value: valueList
});
} }
} }

74
src/components/sensorFusion/regionTable.vue
View File

@ -119,7 +119,17 @@
<el-table-column align="center" prop="ave_queue" 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_occ" label="平均占有率"></el-table-column>
<el-table-column align="center" prop="ave_delay" 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-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 v-else> <div v-else>
@ -145,44 +155,44 @@ export default {
data() { data() {
return { return {
//表格字段备注 //表格字段备注
tableOptions:[ tableOptions: [
{ {
type:'实时触发', type: '实时触发',
column:[ column: [
{prop:'name',label:'区域名称'}, { prop: 'name', label: '区域名称' },
{prop:'time',label:'时间戳'}, { prop: 'time', label: '时间戳' },
{prop:'type',label:'目标类型'}, { prop: 'type', label: '目标类型' },
{prop:'n_stay',label:'存车数'}, { prop: 'n_stay', label: '存车数' },
{prop:'n_queue',label:'排队数'}, { prop: 'n_queue', label: '排队数' },
{prop:'occ',label:'占用状态'}, { prop: 'occ', label: '占用状态' },
{prop:'speed',label:'空间平均速度'}, { prop: 'speed', label: '空间平均速度' }
] ]
}, },
{ {
type:'固定时刻', type: '固定时刻',
column:[ column: [
{prop:'name',label:'区域名称'}, { prop: 'name', label: '区域名称' },
{prop:'time',label:'时间戳'}, { prop: 'time', label: '时间戳' },
{prop:'type',label:'目标类型'}, { prop: 'type', label: '目标类型' },
{prop:'n_stay',label:'存车数'}, { prop: 'n_stay', label: '存车数' },
{prop:'n_queue',label:'排队数'}, { prop: 'n_queue', label: '排队数' },
{prop:'occ',label:'占用状态'}, { prop: 'occ', label: '占用状态' },
{prop:'speed',label:'空间平均速度'}, { prop: 'speed', label: '空间平均速度' }
] ]
}, },
{ {
type:'固定间隔', type: '固定间隔',
column:[ column: [
{prop:'name',label:'区域名称'}, { prop: 'name', label: '区域名称' },
{prop:'time',label:'时间戳'}, { prop: 'time', label: '时间戳' },
{prop:'type',label:'目标类型'}, { prop: 'type', label: '目标类型' },
{prop:'in_flow',label:'驶入流量'}, { prop: 'in_flow', label: '驶入流量' },
{prop:'out_flow',label:'驶离流量'}, { prop: 'out_flow', label: '驶离流量' },
{prop:'ave_stay',label:'平均存车数'}, { prop: 'ave_stay', label: '平均存车数' },
{prop:'ave_queue',label:'平均排队数'}, { prop: 'ave_queue', label: '平均排队数' },
{prop:'ave_occ',label:'平均占有率'}, { prop: 'ave_occ', label: '平均占有率' },
{prop:'ave_delay',label:'平均延误'}, { prop: 'ave_delay', label: '平均延误' },
{prop:'speed',label:'平均速度'}, { prop: 'speed', label: '平均速度' }
] ]
} }
] ]

153
src/components/sensorFusion/tableShow.vue
View File

@ -42,7 +42,46 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<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> -->
<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 :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="gate_id" label="断面编号"></el-table-column>
@ -70,9 +109,39 @@
<el-table-column align="center" prop="in_flow" label="入流流量"></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="out_flow" label="出流流量"></el-table-column>
<el-table-column align="center" prop="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="in_spd" label="入流平均速度">
<el-table-column align="center" prop="out_spd" label="出流平均速度"></el-table-column> <template slot-scope="scope">
<el-table-column align="center" prop="speed" label="断面的平均速度"></el-table-column> {{
scope.row.in_spd && scope.row.in_spd != '-' && scope.row.in_spd != '-1'
? Math.abs(scope.row.speed)
: scope.row.in_spd == '-1'
? '-'
: scope.row.in_spd
}}
</template>
</el-table-column>
<el-table-column align="center" prop="out_spd" label="出流平均速度">
<template slot-scope="scope">
{{
scope.row.out_spd && scope.row.out_spd != '-' && scope.row.out_spd != '-1'
? Math.abs(scope.row.out_spd)
: scope.row.out_spd == '-1'
? '-'
: scope.row.out_spd
}}
</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>
</div> </div>
<div v-else> <div v-else>
@ -97,57 +166,57 @@ export default {
}, },
data() { data() {
return { return {
//表格字段备注 //表格字段备注
tableOptions:[ tableOptions: [
{ {
type:'实时触发', type: '实时触发',
column:[ column: [
{prop:'name',label:'区域名称'}, { prop: 'name', label: '区域名称' },
{prop:'time',label:'时间戳'}, { prop: 'time', label: '时间戳' },
{prop:'type',label:'目标类型'}, { prop: 'type', label: '目标类型' },
{prop:'n_stay',label:'存车数'}, { prop: 'n_stay', label: '存车数' },
{prop:'n_queue',label:'排队数'}, { prop: 'n_queue', label: '排队数' },
{prop:'occ',label:'占用状态'}, { prop: 'occ', label: '占用状态' },
{prop:'speed',label:'空间平均速度'}, { prop: 'speed', label: '空间平均速度' }
] ]
}, },
{ {
type:'固定时刻', //TODO-目前代码里无此逻辑 type: '固定时刻', //TODO-目前代码里无此逻辑
column:[ column: [
{prop:'name',label:'区域名称'}, { prop: 'name', label: '区域名称' },
{prop:'time',label:'时间戳'}, { prop: 'time', label: '时间戳' },
{prop:'type',label:'目标类型'}, { prop: 'type', label: '目标类型' },
{prop:'n_stay',label:'存车数'}, { prop: 'n_stay', label: '存车数' },
{prop:'n_queue',label:'排队数'}, { prop: 'n_queue', label: '排队数' },
{prop:'occ',label:'占用状态'}, { prop: 'occ', label: '占用状态' },
{prop:'speed',label:'空间平均速度'}, { prop: 'speed', label: '空间平均速度' }
] ]
}, },
{ {
type:'固定间隔', type: '固定间隔',
column:[ column: [
{prop:'gate_id',label:'断面编号'}, { prop: 'gate_id', label: '断面编号' },
{prop:'name',label:'断面名称'}, { prop: 'name', label: '断面名称' },
{prop:'time',label:'时间戳'}, { prop: 'time', label: '时间戳' },
{prop:'interval',label:'时间序号'}, { prop: 'interval', label: '时间序号' },
{prop:'type',label:'目标类型'}, { prop: 'type', label: '目标类型' },
{prop:'in_flow',label:'入流流量'}, { prop: 'in_flow', label: '入流流量' },
{prop:'out_flow',label:'出流流量'}, { prop: 'out_flow', label: '出流流量' },
{prop:'flow',label:'断面流量'}, { prop: 'flow', label: '断面流量' },
{prop:'in_spd',label:'入流平均速度'}, { prop: 'in_spd', label: '入流平均速度' },
{prop:'out_spd',label:'出流平均速度'}, { prop: 'out_spd', label: '出流平均速度' },
{prop:'speed',label:'断面的平均速度'}, { prop: 'speed', label: '断面的平均速度' }
] ]
} }
] ]
}; };
}, },
watch: { watch: {
tableData: { // tableData: {
handler(newVal) { // handler(newVal) {
console.log(newVal, '断面表格数据'); // console.log(newVal, '断面表格数据');
} // }
} // }
}, },
methods: {} methods: {}
}; };

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

@ -114,97 +114,106 @@ export default {
// } // }
} }
let myChart = this.chart; let myChart = this.chart;
let option = { let startName =[],endName=[]
dataZoom: [ if(this.startName){
{ startName = this.startName.split(',')
id: 'dataZoomY', }
type: 'slider', if(this.endName){
yAxisIndex: [0], endName = this.endName.split(',')
startValue: 0, }
endValue: 10, if (dataList) {
filterMode: 'empty' let option = {
} dataZoom: [
], {
tooltip: { id: 'dataZoomY',
position: 'top' type: 'slider',
}, yAxisIndex: [0],
animation: false, startValue: 0,
grid: { endValue: 10,
left: '3%', filterMode: 'empty'
right: '8%',
bottom: '8%',
containLabel: true
},
xAxis: {
type: 'category',
data: this.startName.split(','),
axisLine: {
lineStyle: {
color: '#000'
} }
],
tooltip: {
position: 'top'
}, },
axisLabel: { animation: false,
interval: 0, grid: {
rotate: 40 left: '3%',
right: '8%',
bottom: '8%',
containLabel: true
}, },
splitArea: { xAxis: {
show: true type: 'category',
} data: startName,
// name: "镇街", axisLine: {
}, lineStyle: {
yAxis: { color: '#000'
type: 'category',
data: this.endName.split(','),
axisLine: {
lineStyle: {
color: '#000'
}
},
axisLabel: {
interval: 0,
rotate: 40
},
splitArea: {
show: true
}
// name: "",
},
visualMap: {
min: 1,
max: 50,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '1%',
text: ['50', '1'], // 文本，默认为数值文本
//color:['#20a0ff','#D2EDFF'],
calculable: false,
color: ['#22DDDD', '#fec42c', '#80F1BE']
},
series: [
{
name: 'OD图',
type: 'heatmap',
data: dataList,
label: {
normal: {
show: true
} }
}, },
itemStyle: { axisLabel: {
emphasis: { interval: 0,
shadowBlur: 10, rotate: 40
shadowColor: 'rgba(120, 0, 0, 0.5)' },
splitArea: {
show: true
}
// name: "镇街",
},
yAxis: {
type: 'category',
data: endName,
axisLine: {
lineStyle: {
color: '#000'
}
},
axisLabel: {
interval: 0,
rotate: 40
},
splitArea: {
show: true
}
// name: "",
},
visualMap: {
min: 1,
max: 50,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '1%',
text: ['50', '1'], // 文本，默认为数值文本
//color:['#20a0ff','#D2EDFF'],
calculable: false,
color: ['#22DDDD', '#fec42c', '#80F1BE']
},
series: [
{
name: 'OD图',
type: 'heatmap',
data: dataList,
label: {
normal: {
show: true
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(120, 0, 0, 0.5)'
}
} }
} }
} ]
] };
}; if (myChart) {
if (myChart) { myChart.setOption(option);
myChart.setOption(option); window.addEventListener('resize', () => {
window.addEventListener('resize', () => { myChart.resize();
myChart.resize(); });
}); }
} }
} }
}, },

2
src/views/index.vue
View File

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

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

@ -679,7 +679,7 @@
> >
<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.graphicType }} {{ e.name }}
</div> </div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'"> <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
<div style="width: 100%; height: 100%" v-if="e.graphicType == '断面'"> <div style="width: 100%; height: 100%" v-if="e.graphicType == '断面'">
@ -2774,15 +2774,14 @@ export default {
) { ) {
if (data[i].children[j].children[n].children[m].componentType == '类型') { if (data[i].children[j].children[n].children[m].componentType == '类型') {
let typeData = { let typeData = {
time: time,
type_data: newValue,
speed: table.speed,
name: table.name, name: table.name,
time: time,
type: table.type, type: table.type,
n_stay: table.n_stay, n_stay: table.n_stay,
n_queue: table.n_queue, n_queue: table.n_queue,
occ: table.occ, occ: table.occ,
speed: table.speed, speed: table.speed,
type_data: newValue,
originalSpeed: table.originalSpeed originalSpeed: table.originalSpeed
}; };
this.addTimeDataCharts(data[i].children[j].children[n].children[m].triggerNewData, typeData); this.addTimeDataCharts(data[i].children[j].children[n].children[m].triggerNewData, typeData);
@ -2813,19 +2812,20 @@ export default {
) { ) {
if (data[i].children[j].children[n].children[m].componentType == '类型') { if (data[i].children[j].children[n].children[m].componentType == '类型') {
let typeData = { let typeData = {
time: time,
type_data: newValue,
speed: table.speed,
avg: table.avg,
max: table.max,
med: table.med,
min: table.min,
name: table.name, name: table.name,
time: time,
type: table.type, type: table.type,
n_stay: table.n_stay, n_stay: table.n_stay,
n_queue: table.n_queue, n_queue: table.n_queue,
occ: table.occ, occ: table.occ,
speed: table.speed speed: table.speed,
type_data: newValue,
headway: table.headway,
avg: table.avg,
max: table.max,
med: table.med,
min: table.min,
originalSpeed: table.originalSpeed
}; };
// if (data[i].children[j].children[n].children[m].cycleTimeData.length > 10) { // if (data[i].children[j].children[n].children[m].cycleTimeData.length > 10) {
// data[i].children[j].children[n].children[m].cycleTimeData = // data[i].children[j].children[n].children[m].cycleTimeData =
@ -2858,20 +2858,45 @@ export default {
data[i].children[j].children[n].children[m].analogAreaComponentId == analogAreaComponentId data[i].children[j].children[n].children[m].analogAreaComponentId == analogAreaComponentId
) { ) {
if (data[i].children[j].children[n].children[m].componentType == '类型') { if (data[i].children[j].children[n].children[m].componentType == '类型') {
// let typeData = {
// time: time,
// type_data: newValue,
// speed: table.speed,
// avg: table.avg,
// max: table.max,
// med: table.med,
// min: table.min,
// name: table.name,
// type: table.type,
// ave_stay: table.ave_stay,
// ave_queue: table.ave_queue,
// occ: table.occ,
// speed: table.speed
// };
let typeData = { let typeData = {
time: time,
type_data: newValue, type_data: newValue,
speed: table.speed, time: time,
name: table.name,
type: table.type,
in_flow: table.in_flow,
out_flow: table.out_flow,
ave_stay: table.ave_stay,
ave_queue: table.ave_queue,
ave_occ: table.ave_occ,
ave_delay: table.ave_delay,
type_data: table.type_data,
ave_headway: table.ave_headway,
avg: table.avg, avg: table.avg,
max: table.max, max: table.max,
med: table.med, med: table.med,
min: table.min, min: table.min,
name: table.name,
type: table.type,
ave_stay: table.ave_stay,
ave_queue: table.ave_queue,
occ: table.occ, occ: table.occ,
speed: table.speed originalSpeed: table.speed,
gate_id: table.gate_id,
interval: table.interval,
flow: table.flow,
in_spd: table.in_spd,
out_spd: table.out_spd
}; };
// if (data[i].children[j].children[n].children[m].cycleStatisticsData.length > 10) { // if (data[i].children[j].children[n].children[m].cycleStatisticsData.length > 10) {
// data[i].children[j].children[n].children[m].cycleStatisticsData = // data[i].children[j].children[n].children[m].cycleStatisticsData =
@ -3522,7 +3547,7 @@ export default {
interval: msgN[j].interval, interval: msgN[j].interval,
flow: msgN[j].flow, flow: msgN[j].flow,
in_spd: msgN[j].in_spd, in_spd: msgN[j].in_spd,
out_spd: msgN[j].out_spd, out_spd: msgN[j].out_spd
}; };
this.$nextTick(() => { this.$nextTick(() => {
this.cycleStatisticsDataCharts( this.cycleStatisticsDataCharts(
@ -3583,7 +3608,7 @@ export default {
interval: msgN[j].interval, interval: msgN[j].interval,
flow: msgN[j].flow, flow: msgN[j].flow,
in_spd: msgN[j].in_spd, in_spd: msgN[j].in_spd,
out_spd: msgN[j].out_spd, out_spd: msgN[j].out_spd
}; };
this.$nextTick(() => { this.$nextTick(() => {
this.cycleStatisticsDataCharts( this.cycleStatisticsDataCharts(
@ -3633,7 +3658,7 @@ export default {
interval: msgN[j].interval, interval: msgN[j].interval,
flow: msgN[j].flow, flow: msgN[j].flow,
in_spd: msgN[j].in_spd, in_spd: msgN[j].in_spd,
out_spd: msgN[j].out_spd, out_spd: msgN[j].out_spd
}; };
this.$nextTick(() => { this.$nextTick(() => {
this.cycleStatisticsDataCharts( this.cycleStatisticsDataCharts(
@ -3683,7 +3708,7 @@ export default {
interval: msgN[j].interval, interval: msgN[j].interval,
flow: msgN[j].flow, flow: msgN[j].flow,
in_spd: msgN[j].in_spd, in_spd: msgN[j].in_spd,
out_spd: msgN[j].out_spd, out_spd: msgN[j].out_spd
}; };
this.$nextTick(() => { this.$nextTick(() => {
this.cycleStatisticsDataCharts( this.cycleStatisticsDataCharts(
@ -3729,7 +3754,7 @@ export default {
interval: msgN[j].interval, interval: msgN[j].interval,
flow: msgN[j].flow, flow: msgN[j].flow,
in_spd: msgN[j].in_spd, in_spd: msgN[j].in_spd,
out_spd: msgN[j].out_spd, out_spd: msgN[j].out_spd
}; };
this.$nextTick(() => { this.$nextTick(() => {
this.cycleStatisticsDataCharts( this.cycleStatisticsDataCharts(
@ -3775,7 +3800,7 @@ export default {
interval: msgN[j].interval, interval: msgN[j].interval,
flow: msgN[j].flow, flow: msgN[j].flow,
in_spd: msgN[j].in_spd, in_spd: msgN[j].in_spd,
out_spd: msgN[j].out_spd, out_spd: msgN[j].out_spd
}; };
this.$nextTick(() => { this.$nextTick(() => {
this.cycleStatisticsDataCharts( this.cycleStatisticsDataCharts(
@ -3823,7 +3848,7 @@ export default {
interval: msgN[j].interval, interval: msgN[j].interval,
flow: msgN[j].flow, flow: msgN[j].flow,
in_spd: msgN[j].in_spd, in_spd: msgN[j].in_spd,
out_spd: msgN[j].out_spd, out_spd: msgN[j].out_spd
}; };
this.$nextTick(() => { this.$nextTick(() => {
this.cycleStatisticsDataCharts( this.cycleStatisticsDataCharts(
@ -3838,6 +3863,7 @@ export default {
// this.addOrUpdateArrayItem(this.triggerODData, { // this.addOrUpdateArrayItem(this.triggerODData, {
// ob_data: msgN[j].ob_data // ob_data: msgN[j].ob_data
// }); // });
// console.log('固定间隔-OD', JSON.stringify(msgN[j]));
let table = { let table = {
ob_data: msgN[j].ob_data ob_data: msgN[j].ob_data
}; };