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

bug修改

This commit is contained in:
qiudan 2023-10-28 00:06:24 +08:00
parent 8752eae7ed
commit ab89a21ac3
13 changed files with 1883 additions and 1598 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/VideoWeb/Build/APP.data.unityweb Executable file → Normal file
View File

Binary file not shown.

BIN
public/VideoWeb/Build/APP.framework.js.unityweb Executable file → Normal file
View File

Binary file not shown.

0
public/VideoWeb/Build/APP.loader.js Executable file → Normal file
View File

BIN
public/VideoWeb/Build/APP.wasm.unityweb Executable file → Normal file
View File

Binary file not shown.

6
public/VideoWeb/index.html
View File

@ -238,6 +238,12 @@
unity.SendMessage("GameManager",'ExitEdit',data); unity.SendMessage("GameManager",'ExitEdit',data);
} }
} }
//检测器目标数量
function getTargetNumber(string){
if(unity!=null){
unity.SendMessage('GameManager', 'UnityUpdateTargetNumber', string);
}
}
//编辑组件名称传名称 //编辑组件名称传名称
function editComponent(data){ function editComponent(data){
// type,id // type,id

8
public/flv/index.html
View File

@ -37,6 +37,9 @@
video::-webkit-media-controls-volume-slider { video::-webkit-media-controls-volume-slider {
display: none; display: none;
} }
video::-webkit-media-controls-overflow-button {
display: none;
}
</style> </style>
<body> <body>
<script src="flv.min.js"></script> <script src="flv.min.js"></script>
@ -57,6 +60,11 @@
flvPlayer.attachMediaElement(videoElement); flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); flvPlayer.load();
flvPlayer.play(); flvPlayer.play();
// 监听 video 标签的事件，防止用户手动暂停
videoElement.addEventListener('pause', function(e) {
e.preventDefault();
videoElement.play(); // 重新播放视频
});
} }
function getParam(name) { function getParam(name) {

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

@ -1,11 +1,20 @@
<template> <template>
<div style="width: 100%;margin-top: 5px;"> <div style="width: 100%; margin-top: 5px">
<div class="tableTitle"> <div class="tableTitle">
<div> <div>
<span <span
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"></span> style="
<span style="font-size:18px;">{{ this.componentName + '-' + this.chartName + '-' + '曲线图' + '-' + status, width: 10px;
}}</span> height: 10px;
border-radius: 50%;
background-color: #3297ff;
display: inline-block;
vertical-align: middle;
margin-right: 8px;
"
></span>
<span style="font-size: 18px">{{ this.componentName + '-' + this.chartName + '-' + '曲线图' + '-' + status,
}}</span>
</div> </div>
</div> </div>
<div id="lineChart" ref="lineChart" style="width: 705px; height: 300px"></div> <div id="lineChart" ref="lineChart" style="width: 705px; height: 300px"></div>
@ -45,8 +54,7 @@ export default {
default() { default() {
return {}; return {};
} }
}, }
}, },
data() { data() {
return { return {
@ -62,7 +70,7 @@ export default {
tooltip: { tooltip: {
show: true show: true
}, },
name:"km/h", name: 'km/h',
series: [], series: [],
// //
@ -71,7 +79,6 @@ export default {
}, },
created() { created() {
// console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40'); // console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
}, },
methods: { methods: {
@ -82,14 +89,11 @@ export default {
} }
// var series = [] // var series = []
if (newVal) { if (newVal) {
this.xData = newVal.map(val => { this.xData = newVal.map((val) => {
return val.time; return val.time;
}); });
} }
// myChart.showLoading()　　//开启loading // myChart.showLoading()　　//开启loading
let option = { let option = {
legend: {}, legend: {},
@ -156,15 +160,10 @@ export default {
// myChart.setOption(option) // myChart.setOption(option)
// myChart.resize(); // myChart.resize();
// }) // })
}, },
getMessage(newVal, title, timeMode) { getMessage(newVal, title, timeMode) {
if (newVal) { if (newVal) {
var series = [ var series = [
{ {
name: '', name: '',
@ -186,7 +185,7 @@ export default {
show: true, show: true,
confine: true confine: true
}; };
this.name = "" this.name = '';
series[0].name = '总量'; series[0].name = '总量';
// 映射出类型数组 // 映射出类型数组
let arr = newVal.map(function (ele) { let arr = newVal.map(function (ele) {
@ -195,14 +194,17 @@ export default {
} }
}); });
var mapN = []; var mapN = [];
for (var t = 0; t < arr.length; t++) { if (arr && arr.length > 0) {
for (var i = 0; i < arr[t].length; i++) { for (var t = 0; t < arr.length; t++) {
mapN.push(arr[t][i]); for (var i = 0; i < arr[t].length; i++) {
mapN.push(arr[t][i]);
}
} }
} }
var lineArr = []
var lineArr = [];
if (newVal[0].type_data != undefined) { if (newVal[0].type_data != undefined) {
newVal[0].type_data.forEach(ele => { newVal[0].type_data.forEach((ele) => {
lineArr.push({ lineArr.push({
name: ele.name, name: ele.name,
type: 'line', type: 'line',
@ -211,7 +213,7 @@ export default {
}); });
}); });
} }
mapN.forEach(ele => { mapN.forEach((ele) => {
if (ele.name == '机动车') { if (ele.name == '机动车') {
lineArr[0].data.push(ele.quantity); lineArr[0].data.push(ele.quantity);
} else if (ele.name == '非机动车') { } else if (ele.name == '非机动车') {
@ -240,34 +242,33 @@ export default {
show: true, show: true,
confine: true confine: true
}; };
this.name = "km/h" this.name = 'km/h';
// console.log("newVal",newVal) // console.log("newVal",newVal)
series[0].data = newVal.map(val => { series[0].data = newVal.map((val) => {
return val.speed; return val.speed;
}); });
} else if (title === '流量') { } else if (title === '流量') {
this.name = "辆/10秒" this.name = '辆/10秒';
series[0].data = newVal.map(ele => { series[0].data = newVal.map((ele) => {
return ele.in_flow + ele.out_flow; return ele.in_flow + ele.out_flow;
}); });
} else if (title === '车头时距') { } else if (title === '车头时距') {
this.name = "秒" this.name = '秒';
this.tooltip = { this.tooltip = {
formatter: '{a} {b}:{c}/s', formatter: '{a} {b}:{c}/s',
show: true, show: true,
confine: true confine: true
}; };
series[0].data = newVal.map(val => { series[0].data = newVal.map((val) => {
if (timeMode == '固定间隔') { if (timeMode == '固定间隔') {
return val.ave_headway; return val.ave_headway;
} else { } else {
return val.headway; return val.headway;
} }
}); });
} else if (title === '排队数') { } else if (title === '排队数') {
this.name = "辆" this.name = '辆';
series[0].data = newVal.map(val => { series[0].data = newVal.map((val) => {
// return val.n_queue; // return val.n_queue;
if (timeMode == '固定间隔') { if (timeMode == '固定间隔') {
return val.ave_queue; return val.ave_queue;
@ -276,45 +277,39 @@ export default {
} }
}); });
} else if (title === '检测数') { } else if (title === '检测数') {
this.name = "辆" this.name = '辆';
series[0].data = newVal.map(val => { series[0].data = newVal.map((val) => {
if (timeMode == '固定间隔') { if (timeMode == '固定间隔') {
return val.ave_stay; return val.ave_stay;
} else { } else {
return val.n_stay; return val.n_stay;
} }
}); });
} else if (title === '延误') { } else if (title === '延误') {
this.name = "秒" this.name = '秒';
series[0].data = newVal.map(val => { series[0].data = newVal.map((val) => {
return val.ave_delay; return val.ave_delay;
}); });
} else if (title === '拥堵') { } else if (title === '拥堵') {
this.name = "秒" this.name = '秒';
series[0].data = newVal.map(val => { }); series[0].data = newVal.map((val) => {});
} }
series.forEach(ele => { series.forEach((ele) => {
ele.data.reverse() ele.data.reverse();
}) });
return series return series;
} }
} }
}, },
mounted() { mounted() {
// if (this.historyData.length != 0) { // if (this.historyData.length != 0) {
// this.drawLine(this.historyData, this.title, this.status); // this.drawLine(this.historyData, this.title, this.status);
// } // }
// this.getMessage(this.list) // this.getMessage(this.list)
// console.log(this.$parent.dataArr, '父组件的dataArr'); // console.log(this.$parent.dataArr, '父组件的dataArr');
// this.$set(this.$parent.dataArr) // this.$set(this.$parent.dataArr)
}, },
watch: { watch: {}
}
}; };
</script> </script>
<style scoped> <style scoped>

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

@ -56,6 +56,9 @@ export default {
initEcharts() { initEcharts() {
let seriesData = null; let seriesData = null;
let myChart = this.chart; let myChart = this.chart;
console.log('initEcharts',this.dataList)
if (this.timeMode == "实时触发") { if (this.timeMode == "实时触发") {
seriesData = null; seriesData = null;
this.renameField(this.dataList[0].type_data, "quantity", "value"); this.renameField(this.dataList[0].type_data, "quantity", "value");
@ -66,7 +69,7 @@ export default {
// this.renameField(this.dataList[0].type_data,'quantity','value') // this.renameField(this.dataList[0].type_data,'quantity','value')
// seriesData = this.dataList[0].type_data // seriesData = this.dataList[0].type_data
// } // }
if (this.dataList[0].type_data[0].quantity == undefined) { if (this.dataList[0].type_data&&this.dataList[0].type_data[0].quantity == undefined) {
this.renameField(this.dataList[0].type_data, null, null); this.renameField(this.dataList[0].type_data, null, null);
seriesData = this.dataList[0].type_data; seriesData = this.dataList[0].type_data;
} else { } else {
@ -79,7 +82,7 @@ export default {
// this.renameField(this.dataList[0].type_data, "quantity", "value"); // this.renameField(this.dataList[0].type_data, "quantity", "value");
// seriesData = this.dataList[0].type_data; // seriesData = this.dataList[0].type_data;
// } // }
if (this.dataList[0].type_data[0].quantity == undefined) { if (this.dataList[0].type_data&&this.dataList[0].type_data[0].quantity == undefined) {
this.renameField(this.dataList[0].type_data, null, null); this.renameField(this.dataList[0].type_data, null, null);
seriesData = this.dataList[0].type_data; seriesData = this.dataList[0].type_data;
} else { } else {

167
src/components/target/typeChart.vue
View File

@ -14,7 +14,9 @@
<div> <div>
<span style="font-size: 15px">{{ n.name }}</span <span style="font-size: 15px">{{ n.name }}</span
><br /> ><br />
<span style="font-size: 30px; font-weight: bold">{{ n.quantity || n.quantity == 0 ? n.quantity : '-' }}</span> <span style="font-size: 30px; font-weight: bold">{{
n.quantity || n.quantity === 0 ? n.quantity : ' - '
}}</span>
<!-- <span v-if="n.name=='速度'">km/h</span> --> <!-- <span v-if="n.name=='速度'">km/h</span> -->
</div> </div>
<div> <div>
@ -26,68 +28,157 @@
</div> </div>
</div> </div>
<el-card v-show="echartArr.includes('数值')" style="width: 150px; margin-bottom: 20px; text-align: center"> <el-card v-show="echartArr.includes('数值')" style="width: 150px; margin-bottom: 20px; text-align: center">
<div v-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined"> <div v-if="cycleAccumulateDataArr && cycleAccumulateDataArr.length > 0">
<div v-if="title == '类型'"> <div v-if="title == '类型'">
<span style="font-size: 15px">类型数量总和</span><br /> <span style="font-size: 15px">类型数量总和</span><br />
<span style="font-size: 30px; font-weight: bold"> <span style="font-size: 30px; font-weight: bold">
{{ getTotal(newDataArr) }} {{ getTotal(cycleAccumulateDataArr) }}
</span> </span>
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '速度' && dataArr.length != 0 && dataArr != undefined"> <div
style="font-size: 30px; font-weight: bold"
v-if="title == '速度' && dataArr && dataArr.length != 0 && dataArr != undefined"
>
<span style="font-size: 15px">速度</span><br /> <span style="font-size: 15px">速度</span><br />
<!-- <span style="font-size: 30px; font-weight: bold">{{ typeValue.speed }}</span> --> <!-- <span style="font-size: 30px; font-weight: bold">{{ typeValue.speed }}</span> -->
<span style="font-size: 30px; font-weight: bold"> <span style="font-size: 30px; font-weight: bold">
<span v-if="(newDataArr[0].speed && newDataArr[0].speed != -1) || newDataArr[0].speed == 0"> <span
{{ v-if="
newDataArr[0].speed > 0 || newDataArr[0].speed == 0 (cycleAccumulateDataArr[0].speed && cycleAccumulateDataArr[0].speed != -1) ||
? newDataArr[0].speed cycleAccumulateDataArr[0].speed === 0
: Math.abs(newDataArr[0].speed) "
}} >
{{ Math.abs(cycleAccumulateDataArr[0].speed) }}
</span> </span>
<span v-else>-</span> <span v-else> - </span>
</span> </span>
<span style="font-size: 20px; font-weight: 200"> <span style="font-size: 20px; font-weight: 200">
<span v-if="(newDataArr[0].speed && newDataArr[0].speed != -1) || newDataArr[0].speed == 0"> <span
{{ newDataArr[0].speed > 0 || newDataArr[0].speed == 0 ? 'km/h' : 'pix/s' }} v-if="
(cycleAccumulateDataArr[0].speed && cycleAccumulateDataArr[0].speed != -1) ||
cycleAccumulateDataArr[0].speed === 0
"
>
{{ cycleAccumulateDataArr[0].speed > 0 || cycleAccumulateDataArr[0].speed === 0 ? 'km/h' : 'pix/s' }}
</span> </span>
</span> </span>
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '流量' && dataArr.length != 0 && dataArr != undefined"> <div
style="font-size: 30px; font-weight: bold"
v-if="title == '流量' && dataArr && dataArr.length != 0 && dataArr != undefined"
>
<span style="font-size: 15px">流量</span><br /> <span style="font-size: 15px">流量</span><br />
<span style="font-size: 30px; font-weight: bold">{{ <span style="font-size: 30px; font-weight: bold">{{
newDataArr[0].flow || newDataArr[0].flow == 0 ? newDataArr[0].flow : '-' cycleAccumulateDataArr[0].flow || cycleAccumulateDataArr[0].flow === 0 ? cycleAccumulateDataArr[0].flow : ' - '
}}</span> }}</span>
<span style="font-size: 20px; font-weight: 200">辆</span> <span style="font-size: 20px; font-weight: 200">辆</span>
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '车头时距'"> <div style="font-size: 30px; font-weight: bold" v-if="title == '车头时距'">
<span style="font-size: 15px">车头时距</span><br /> <span style="font-size: 15px">车头时距</span><br />
<span style="font-size: 30px; font-weight: bold">{{ <span style="font-size: 30px; font-weight: bold">{{
newDataArr[0].headway || newDataArr[0].headway == 0 cycleAccumulateDataArr[0].headway || cycleAccumulateDataArr[0].headway === 0
? newDataArr[0].headway == -1 ? cycleAccumulateDataArr[0].headway == -1
? '-' ? ' - '
: newDataArr[0].headway : cycleAccumulateDataArr[0].headway
: '-' : ' - '
}}</span> }}</span>
<!-- <span style="font-size: 30px; font-weight: bold">100</span> --> <!-- <span style="font-size: 30px; font-weight: bold">100</span> -->
<span style="font-size: 20px; font-weight: 200">秒</span> <span style="font-size: 20px; font-weight: 200">秒</span>
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'"> <div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'">
<span style="font-size: 15px">排队数</span><br /> <span style="font-size: 15px">排队数</span><br />
<span style="font-size: 30px; font-weight: bold">{{ queue || queue == 0 ? queue : '-' }}</span> <span style="font-size: 30px; font-weight: bold">{{ queue || queue === 0 ? queue : ' - ' }}</span>
<span style="font-size: 20px; font-weight: 200">辆</span> <span style="font-size: 20px; font-weight: 200">辆</span>
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '检测数'"> <div style="font-size: 30px; font-weight: bold" v-if="title == '检测数'">
<span style="font-size: 15px">检测数</span><br /> <span style="font-size: 15px">检测数</span><br />
<span style="font-size: 30px; font-weight: bold">{{ <span style="font-size: 30px; font-weight: bold">{{
newDataArr[0].n_stay || newDataArr[0].n_stay == 0 ? newDataArr[0].n_stay : '-' cycleAccumulateDataArr[0].n_stay || cycleAccumulateDataArr[0].n_stay === 0
? cycleAccumulateDataArr[0].n_stay
: ' - '
}}</span> }}</span>
<span style="font-size: 20px; font-weight: 200">辆</span> <span style="font-size: 20px; font-weight: 200">辆</span>
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '延误'"> <div style="font-size: 30px; font-weight: bold" v-if="title == '延误'">
<span style="font-size: 15px">延误</span><br /> <span style="font-size: 15px">延误</span><br />
<span style="font-size: 30px; font-weight: bold">{{ <span style="font-size: 30px; font-weight: bold">{{
newDataArr[0].ave_delay || newDataArr[0].ave_delay == 0 ? newDataArr[0].ave_delay : '-' cycleAccumulateDataArr[0].ave_delay || cycleAccumulateDataArr[0].ave_delay === 0
? cycleAccumulateDataArr[0].ave_delay
: ' - '
}}</span>
<span style="font-size: 20px; font-weight: 200">秒</span>
</div>
<div>
<div>
{{ cycleAccumulateDataArr[0].time ? cycleAccumulateDataArr[0].time : '' }}
</div>
</div>
</div>
<div v-else-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined">
<div v-if="title == '类型'">
<span style="font-size: 15px">类型数量总和</span><br />
<span style="font-size: 30px; font-weight: bold">
{{ getTotal(newDataArr) }}
</span>
</div>
<div
style="font-size: 30px; font-weight: bold"
v-if="title == '速度' && dataArr && dataArr.length != 0 && dataArr != undefined"
>
<span style="font-size: 15px">速度</span><br />
<!-- <span style="font-size: 30px; font-weight: bold">{{ typeValue.speed }}</span> -->
<span style="font-size: 30px; font-weight: bold">
<span v-if="(newDataArr[0].speed && newDataArr[0].speed != -1) || newDataArr[0].speed === 0">
{{ Math.abs(newDataArr[0].speed) }}
</span>
<span v-else> - </span>
</span>
<span style="font-size: 20px; font-weight: 200">
<span v-if="(newDataArr[0].speed && newDataArr[0].speed != -1) || newDataArr[0].speed === 0">
{{ newDataArr[0].speed > 0 || newDataArr[0].speed === 0 ? 'km/h' : 'pix/s' }}
</span>
</span>
</div>
<div
style="font-size: 30px; font-weight: bold"
v-if="title == '流量' && dataArr && dataArr.length != 0 && dataArr != undefined"
>
<span style="font-size: 15px">流量</span><br />
<span style="font-size: 30px; font-weight: bold">{{
newDataArr[0].flow || newDataArr[0].flow === 0 ? newDataArr[0].flow : ' - '
}}</span>
<span style="font-size: 20px; font-weight: 200">辆</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '车头时距'">
<span style="font-size: 15px">车头时距</span><br />
<span style="font-size: 30px; font-weight: bold">{{
newDataArr[0].headway || newDataArr[0].headway === 0
? newDataArr[0].headway == -1
? ' - '
: newDataArr[0].headway
: ' - '
}}</span>
<!-- <span style="font-size: 30px; font-weight: bold">100</span> -->
<span style="font-size: 20px; font-weight: 200">秒</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'">
<span style="font-size: 15px">排队数</span><br />
<span style="font-size: 30px; font-weight: bold">{{ queue || queue === 0 ? queue : ' - ' }}</span>
<span style="font-size: 20px; font-weight: 200">辆</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '检测数'">
<span style="font-size: 15px">检测数</span><br />
<span style="font-size: 30px; font-weight: bold">{{
newDataArr[0].n_stay || newDataArr[0].n_stay === 0 ? newDataArr[0].n_stay : ' - '
}}</span>
<span style="font-size: 20px; font-weight: 200">辆</span>
</div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '延误'">
<span style="font-size: 15px">延误</span><br />
<span style="font-size: 30px; font-weight: bold">{{
newDataArr[0].ave_delay || newDataArr[0].ave_delay === 0 ? newDataArr[0].ave_delay : ' - '
}}</span> }}</span>
<span style="font-size: 20px; font-weight: 200">秒</span> <span style="font-size: 20px; font-weight: 200">秒</span>
</div> </div>
@ -231,16 +322,44 @@ export default {
valueShow: {}, valueShow: {},
//排队数 //排队数
queue: '', queue: '',
newDataArr: [] newDataArr: [],
cycleAccumulateDataArr: [] //周期统计实时累计数据-只改数值
}; };
}, },
created() {}, created() {},
methods: { methods: {
// 计算类型数量的总和 // 计算类型数量的总和
getDataArr(val) { getDataArr(val) {
console.log('getDataArr', val);
this.newDataArr = val; this.newDataArr = val;
this.getNewQueue(this.newDataArr); this.getNewQueue(this.newDataArr);
}, },
//周期统计实时累计数据
getcycleAccumulateDataArr(val) {
console.log('getcycleAccumulateDataArr', val);
this.cycleAccumulateDataArr = val;
this.getNewQueue2(this.cycleAccumulateDataArr);
},
getNewQueue2(val) {
if (val[0].n_queue) {
this.queue = val[0].n_queue;
}
if (val[0].ave_queue) {
this.queue = val[0].ave_queue;
}
if (val[0].headway) {
this.cycleAccumulateDataArr[0].headway = val[0].headway;
}
if (val[0].ave_headway) {
this.cycleAccumulateDataArr[0].headway = val[0].ave_headway;
}
if (val[0].n_stay) {
this.cycleAccumulateDataArr[0].n_stay = val[0].n_stay;
}
if (val[0].ave_stay) {
this.cycleAccumulateDataArr[0].n_stay = val[0].ave_stay;
}
},
getTotal(dataArr) { getTotal(dataArr) {
if (this.title == '类型') { if (this.title == '类型') {
return dataArr[0].type_data.reduce(function (prev, cur) { return dataArr[0].type_data.reduce(function (prev, cur) {

2071
src/views/AnalysisMain.vue
View File

File diff suppressed because it is too large Load Diff

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

@ -7,8 +7,7 @@
<!-- 断面 --> <!-- 断面 -->
<!-- :class="sectionData.length <= 1 ? 'sectionBox' : 'section'" --> <!-- :class="sectionData.length <= 1 ? 'sectionBox' : 'section'" -->
<div class="plate1" ref="plate1"> <div class="plate1" ref="plate1">
<div class="section" ref="section" v-for="s in sectionData" <div class="section" ref="section" v-for="s in sectionData" :key="s.analogAreaComponentId">
:key="s.analogAreaComponentId">
<template> <template>
<div ref="sectionContent"> <div ref="sectionContent">
<div> <div>
@ -19,35 +18,52 @@
</div> </div>
<el-tabs> <el-tabs>
<el-collapse v-model="acticveName" @change="handleChange"> <el-collapse v-model="acticveName" @change="handleChange">
<div style="position:relative" v-for="o in s.children" <div style="position: relative" v-for="o in s.children" :key="o.analogAreaComponentId">
:key="o.analogAreaComponentId">
<div class="titleGnag"></div> <div class="titleGnag"></div>
<el-collapse-item :title="o.componentName + o.timeMode" <el-collapse-item :title="o.componentName + o.timeMode" :name="o.analogAreaComponentId">
:name="o.analogAreaComponentId">
<!--触发的组件 --> <!--触发的组件 -->
<typeChart ref="typeChartRef" v-if="o.timeMode === '实时触发'" <typeChart
:pageType="o.graphicType" :triggerType="o.timeMode" ref="typeChartRef"
:componentName="o.componentName" :dataArr="o.trigger" v-if="o.timeMode === '实时触发'"
:echartArr="o.presentationForm" :title="o.componentName.split('_')[0]" :pageType="o.graphicType"
:chartName="o.combinationName" :typeValue="typeTimeMode" :triggerType="o.timeMode"
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }" /> :componentName="o.componentName"
<typeChart ref="typeChartRef1" v-if="o.timeMode === '固定时刻'" :dataArr="o.trigger"
:pageType="o.graphicType" :triggerType="o.timeMode" :echartArr="o.presentationForm"
:componentName="o.componentName" :dataArr="o.cycleTimeData" :title="o.componentName.split('_')[0]"
:echartArr="o.presentationForm" :title="o.componentName.split('_')[0]" :chartName="o.combinationName"
:chartName="o.combinationName" :typeValue="typeCycleTimeData" :typeValue="typeTimeMode"
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }" :startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
/> />
<typeChart
ref="typeChartRef1"
v-if="o.timeMode === '固定时刻'"
:pageType="o.graphicType"
:triggerType="o.timeMode"
:componentName="o.componentName"
:dataArr="o.cycleTimeData"
:echartArr="o.presentationForm"
:title="o.componentName.split('_')[0]"
:chartName="o.combinationName"
:typeValue="typeCycleTimeData"
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
/>
<!-- 固定间隔的组件 --> <!-- 固定间隔的组件 -->
<typeChart ref="typeChartRef2" style="width: 100%;" <typeChart
v-if="o.timeMode === '固定间隔'" :pageType="o.graphicType" ref="typeChartRef2"
:triggerType="o.timeMode" :componentName="o.componentName" style="width: 100%"
:dataArr="o.cycleStatisticsData" :echartArr="o.presentationForm" v-if="o.timeMode === '固定间隔'"
:title="o.componentName.split('_')[0]" :chartName="o.combinationName" :pageType="o.graphicType"
:triggerType="o.timeMode"
:componentName="o.componentName"
:dataArr="o.cycleStatisticsData"
:echartArr="o.presentationForm"
:title="o.componentName.split('_')[0]"
:chartName="o.combinationName"
:typeValue="typeCycleStatistics" :typeValue="typeCycleStatistics"
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }" /> :startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
/>
</el-collapse-item> </el-collapse-item>
</div> </div>
</el-collapse> </el-collapse>
@ -67,8 +83,7 @@ import typeChart from '../../components/target/typeChart.vue';
import { getComponentSection } from '../../api/index'; import { getComponentSection } from '../../api/index';
export default { export default {
components: { components: {
typeChart, typeChart
}, },
props: { props: {
activeName: { activeName: {
@ -101,6 +116,13 @@ export default {
return []; return [];
} }
}, },
//周期统计实时累计数据主题
cycleAccumulateData: {
type: Array,
default() {
return [];
}
},
//历史数据 //历史数据
cycleHistoryData: { cycleHistoryData: {
type: Object, type: Object,
@ -141,7 +163,7 @@ export default {
typeCycleStatistics: {}, typeCycleStatistics: {},
// 各个组件分类 // 各个组件分类
classify: [], classify: []
// cycleHistoryData:'' // cycleHistoryData:''
}; };
}, },
@ -155,21 +177,20 @@ export default {
methods: { methods: {
// 手风琴下拉切换 // 手风琴下拉切换
handleChange(val) { handleChange(val) {
// setTimeout(() => { // setTimeout(() => {
// this.$nextTick(function () { // this.$nextTick(function () {
// var myEvent = new Event("resize"); // var myEvent = new Event("resize");
// window.dispatchEvent(myEvent); // window.dispatchEvent(myEvent);
// }); // });
// }, 3000); // }, 3000);
}, },
getNew() { getNew() {
// this.idVal = ; // this.idVal = ;
getComponentSection({ VideoId: this.$route.query.id, Number: 10 }).then(res => { getComponentSection({ VideoId: this.$route.query.id, Number: 10 }).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
console.log(res.data.data, '组件的数据'); console.log(res.data.data, '组件的数据');
this.componentList = res.data.data; this.componentList = res.data.data;
this.siftData(); this.siftData();
} }
}); });
}, },
@ -178,26 +199,23 @@ export default {
this.sectionArr = []; this.sectionArr = [];
this.sectionData = []; this.sectionData = [];
this.classify = []; this.classify = [];
this.componentList.forEach(val => { this.componentList.forEach((val) => {
// console.log("val",val) // console.log("val",val)
this.sectionArr.push(val.combinationName); this.sectionArr.push(val.combinationName);
this.sectionArr = Array.from(new Set(this.sectionArr)); this.sectionArr = Array.from(new Set(this.sectionArr));
}); });
this.sectionData = this.sectionArr.map(item => { this.sectionData = this.sectionArr.map((item) => {
item = { title: item, children: [] }; item = { title: item, children: [] };
this.acticveName = []; this.acticveName = [];
this.componentList.forEach(val => { this.componentList.forEach((val) => {
if (item.title == val.combinationName) { if (item.title == val.combinationName) {
this.classify.push(val); this.classify.push(val);
item.children.push(val); item.children.push(val);
if (val.timeMode == '固定间隔' || this.cycleStatisticsData.length == 0) { if (val.timeMode == '固定间隔' || this.cycleStatisticsData.length == 0) {
item.cycleStatisticsData = val.cycleStatisticsData;
item.cycleStatisticsData = val.cycleStatisticsData
} }
if (val.timeMode == '固定时刻' || this.cycleTimeData.length == 0) { if (val.timeMode == '固定时刻' || this.cycleTimeData.length == 0) {
item.cycleTimeData = val.cycleTimeData item.cycleTimeData = val.cycleTimeData;
} }
} }
this.acticveName.push([val.analogAreaComponentId]); this.acticveName.push([val.analogAreaComponentId]);
@ -226,229 +244,217 @@ export default {
} }
}, },
// 触发数据的类型数值 // 触发数据的类型数值
//循环方法 //循环方法
getRef(data, timeMode) { getRef(data, timeMode) {
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
let refItem = data[i] let refItem = data[i];
if (data.length != 0 && refItem.dataArr != undefined && refItem.dataArr.length != 0) { if (data.length != 0 && refItem.dataArr != undefined && refItem.dataArr.length != 0) {
if (refItem.echartArr.includes('时间曲线图')) { if (refItem.echartArr.includes('时间曲线图')) {
refItem.$refs.lineChartRef.drawLine(refItem.dataArr, refItem.componentName.split('_')[0], timeMode) refItem.$refs.lineChartRef.drawLine(refItem.dataArr, refItem.componentName.split('_')[0], timeMode);
} }
if (refItem.echartArr.includes('数值')) { if (refItem.echartArr.includes('数值')) {
refItem.getDataArr(refItem.dataArr) refItem.getDataArr(refItem.dataArr);
} }
if (refItem.echartArr.includes('表格')) { if (refItem.echartArr.includes('表格')) {
refItem.getDataArr(refItem.dataArr) refItem.getDataArr(refItem.dataArr);
} }
if (refItem.echartArr.includes('直方图') && refItem.$refs.barChartRef.drawBar) { if (refItem.echartArr.includes('直方图') && refItem.$refs.barChartRef.drawBar) {
// 数据改变重新渲染柱状图 // 数据改变重新渲染柱状图
refItem.$refs.barChartRef.drawBar(refItem.dataArr[0]) refItem.$refs.barChartRef.drawBar(refItem.dataArr[0]);
} }
if (refItem.echartArr.includes('饼状图') && refItem.$refs.pieChartRef.drawPie) { if (refItem.echartArr.includes('饼状图') && refItem.$refs.pieChartRef.drawPie) {
// 数据改变重新渲染饼图 // 数据改变重新渲染饼图
refItem.$refs.pieChartRef.drawPie(refItem.dataArr[0]) refItem.$refs.pieChartRef.drawPie(refItem.dataArr[0]);
} }
if (refItem.echartArr.includes('均值图') && refItem.$refs.avgChartRef!=undefined) { if (refItem.echartArr.includes('均值图') && refItem.$refs.avgChartRef != undefined) {
refItem.$refs.avgChartRef.drawBar(refItem.dataArr[0]) refItem.$refs.avgChartRef.drawBar(refItem.dataArr[0]);
} }
if (refItem.componentName.includes('OD') && refItem.$refs.ODChartRef != undefined && refItem.dataArr[0].ob_data.length != 0) { if (
refItem.$refs.ODChartRef.drawThermalChart(refItem.dataArr[0].ob_data, refItem.startEndData) refItem.componentName.includes('OD') &&
refItem.$refs.ODChartRef != undefined &&
refItem.dataArr[0].ob_data.length != 0
) {
refItem.$refs.ODChartRef.drawThermalChart(refItem.dataArr[0].ob_data, refItem.startEndData);
} }
} }
} }
}, },
//处理离线视频历史数据 //处理离线视频历史数据
changecycleHistoryData(){ changecycleHistoryData() {}
}
}, },
mounted() { }, mounted() {},
watch: { watch: {
// 触发的原始数据 // 触发的原始数据
triggerData: { triggerData: {
handler(newVal, oldVal) { }, handler(newVal, oldVal) {},
immediate: true immediate: true
}, },
componentList: { componentList: {
handler(newVal) { handler(newVal) {
console.log("componentList", newVal) console.log('componentList', newVal);
if (newVal != undefined && newVal.length != 0) { if (newVal != undefined && newVal.length != 0) {
newVal.forEach(ele => { newVal.forEach((ele) => {
if (ele.timeMode == '固定间隔'&&this.$route.query.type=='实时视频') { if (ele.timeMode == '固定间隔' && this.$route.query.type == '实时视频') {
console.log("实时视频",'固定间隔') console.log('实时视频', '固定间隔');
this.$nextTick(() => { this.$nextTick(() => {
// var thatNN = this; // var thatNN = this;
ele.cycleStatisticsData.forEach(item => { ele.cycleStatisticsData.forEach((item) => {
if (item.type_data != null) { if (item.type_data != null) {
this.typeCycleStatistics = item; this.typeCycleStatistics = item;
} }
}) });
if (this.$refs.typeChartRef2 != undefined) { if (this.$refs.typeChartRef2 != undefined) {
// // 轮循固定时刻生成的各类组件 // // 轮循固定时刻生成的各类组件
this.getRef(this.$refs.typeChartRef2, ele.timeMode) console.log('轮循固定时刻生成的各类组件')
this.getRef(this.$refs.typeChartRef2, ele.timeMode);
} }
}) });
} }
if (ele.timeMode == '固定时刻'&&this.$route.query.type=='实时视频') { if (ele.timeMode == '固定时刻' && this.$route.query.type == '实时视频') {
console.log("实时视频",'固定时刻') console.log('实时视频', '固定时刻');
this.$nextTick(() => { this.$nextTick(() => {
ele.cycleTimeData.forEach(item => { ele.cycleTimeData.forEach((item) => {
if (item.type_data != null) { if (item.type_data != null) {
item.time = item.time.split('.')[0]; item.time = item.time.split('.')[0];
this.typeCycleStatistics = item; this.typeCycleStatistics = item;
} }
// thatN.$nextTick(() => { // thatN.$nextTick(() => {
});
})
if (this.$refs.typeChartRef1 != undefined) { if (this.$refs.typeChartRef1 != undefined) {
// // 轮循固定时刻生成的各类组件 // // 轮循固定时刻生成的各类组件
this.getRef(this.$refs.typeChartRef1, ele.timeMode) this.getRef(this.$refs.typeChartRef1, ele.timeMode);
} }
}) });
} }
if(ele.timeMode == '固定间隔'&&this.$route.query.type=='离线视频'){ if (ele.timeMode == '固定间隔' && this.$route.query.type == '离线视频') {
if (
if(this.cycleHistoryData.CycleStatisticsData!=undefined&&this.cycleHistoryData.CycleStatisticsData.lenght!=0){ this.cycleHistoryData.CycleStatisticsData != undefined &&
this.cycleHistoryData.CycleStatisticsData.forEach(ne => { this.cycleHistoryData.CycleStatisticsData.lenght != 0
if(ne.component_id== ele.analogAreaComponentId ){ ) {
ele.cycleStatisticsData = ne.cycleStatisticsData this.cycleHistoryData.CycleStatisticsData.forEach((ne) => {
} if (ne.component_id == ele.analogAreaComponentId) {
ele.cycleStatisticsData = ne.cycleStatisticsData;
})
this.$nextTick(() => {
ele.cycleStatisticsData.forEach(item => {
var timeNew = item.time.split('.')[0]
var dateLength = timeNew.length;
var key = timeNew.substring(dateLength-8,dateLength);
item.time = key;
if (item.type_data != null) {
this.typeCycleStatistics = item;
} }
// thatN.$nextTick(() => { });
this.$nextTick(() => {
}) ele.cycleStatisticsData.forEach((item) => {
var timeNew = item.time.split('.')[0];
var dateLength = timeNew.length;
var key = timeNew.substring(dateLength - 8, dateLength);
item.time = key;
if (item.type_data != null) {
this.typeCycleStatistics = item;
}
// thatN.$nextTick(() => {
});
if (this.$refs.typeChartRef2 != undefined) { if (this.$refs.typeChartRef2 != undefined) {
// // 轮循固定时刻生成的各类组件 // // 轮循固定时刻生成的各类组件
this.getRef(this.$refs.typeChartRef2, '固定间隔') this.getRef(this.$refs.typeChartRef2, '固定间隔');
} }
}) });
}
} }
if (ele.timeMode == '固定时刻' && this.$route.query.type == '离线视频') {
if (this.cycleHistoryData.CycleTimeData != undefined && this.cycleHistoryData.CycleTimeData.lenght != 0) {
this.cycleHistoryData.CycleTimeData.forEach((ne) => {
} if(ele.timeMode == '固定时刻'&&this.$route.query.type=='离线视频'){ if (ne.component_id == ele.analogAreaComponentId) {
if(this.cycleHistoryData.CycleTimeData!=undefined &&this.cycleHistoryData.CycleTimeData.lenght!=0){ ele.cycleTimeData = ne.cycleTimeData;
this.cycleHistoryData.CycleTimeData.forEach(ne => { }
if(ne.component_id== ele.analogAreaComponentId ){ });
ele.cycleTimeData = ne.cycleTimeData this.$nextTick(() => {
ele.cycleTimeData.forEach((item) => {
// if(this.$route.query.type=='离线视频'){
var timeNew = item.time.split('.')[0];
var dateLength = timeNew.length;
var key = timeNew.substring(dateLength - 8, dateLength);
item.time = key;
// }else{
// item.time = item.time.split('.')[0];
// }
if (item.type_data != null) {
this.typeCycleStatistics = item;
} }
});
})
this.$nextTick(() => {
ele.cycleTimeData.forEach(item => {
// if(this.$route.query.type=='离线视频'){
var timeNew = item.time.split('.')[0]
var dateLength = timeNew.length;
var key = timeNew.substring(dateLength-8,dateLength);
item.time = key;
// }else{
// item.time = item.time.split('.')[0];
// }
if (item.type_data != null) {
this.typeCycleStatistics = item;
}
})
if (this.$refs.typeChartRef1 != undefined) { if (this.$refs.typeChartRef1 != undefined) {
// // 轮循固定时刻生成的各类组件 // // 轮循固定时刻生成的各类组件
this.getRef(this.$refs.typeChartRef1, '固定时刻') this.getRef(this.$refs.typeChartRef1, '固定时刻');
} }
}) });
}
}
} }
}); });
} }
}, },
immediate: true, immediate: true,
deep: true, deep: true
}, },
cycleHistoryData: { cycleHistoryData: {
handler(newVal) { handler(newVal) {
// debugger // debugger
console.log("历史",newVal) console.log('历史', newVal);
// console.log("历史",oldVal) // console.log("历史",oldVal)
if (newVal != undefined ) { if (newVal != undefined) {
// newVal.forEach(ele => { // newVal.forEach(ele => {
if (newVal.CycleStatisticsData) { if (newVal.CycleStatisticsData) {
newVal.CycleStatisticsData.forEach(ele => { newVal.CycleStatisticsData.forEach((ele) => {
this.$nextTick(() => { this.$nextTick(() => {
// var thatNN = this; // var thatNN = this;
ele.cycleStatisticsData.forEach(item => { ele.cycleStatisticsData.forEach((item) => {
if (item.type_data != null) { if (item.type_data != null) {
if(this.$route.query.type=='离线视频'){ if (this.$route.query.type == '离线视频') {
var timeNew = item.time.split('.')[0] var timeNew = item.time.split('.')[0];
var dateLength = timeNew.length; var dateLength = timeNew.length;
var key = timeNew.substring(dateLength-8,dateLength); var key = timeNew.substring(dateLength - 8, dateLength);
item.time = key; item.time = key;
}else{ } else {
item.time = item.time.split('.')[0]; item.time = item.time.split('.')[0];
} }
this.typeCycleStatistics = item; this.typeCycleStatistics = item;
} }
}) });
if (this.$refs.typeChartRef2 != undefined) { if (this.$refs.typeChartRef2 != undefined) {
// // 轮循固定时刻生成的各类组件 // // 轮循固定时刻生成的各类组件
this.getRef(this.$refs.typeChartRef2, '固定间隔') this.getRef(this.$refs.typeChartRef2, '固定间隔');
} }
}) });
}) });
}
} if (newVal.CycleTimeData) {
if (newVal.CycleTimeData) { newVal.CycleTimeData.forEach((ele) => {
newVal.CycleTimeData.forEach(ele => { this.$nextTick(() => {
this.$nextTick(() => { // debugger
// debugger
// var thatNN = this; // var thatNN = this;
ele.cycleTimeData.forEach(item => { ele.cycleTimeData.forEach((item) => {
if(this.$route.query.type=='离线视频'){ if (this.$route.query.type == '离线视频') {
var timeNew = item.time.split('.')[0] var timeNew = item.time.split('.')[0];
var dateLength = timeNew.length; var dateLength = timeNew.length;
var key = timeNew.substring(dateLength-8,dateLength); var key = timeNew.substring(dateLength - 8, dateLength);
item.time = key; item.time = key;
}else{ } else {
item.time = item.time.split('.')[0]; item.time = item.time.split('.')[0];
} }
if (item.type_data != null) { if (item.type_data != null) {
this.typeCycleStatistics = item; this.typeCycleStatistics = item;
} }
});
})
if (this.$refs.typeChartRef1 != undefined) { if (this.$refs.typeChartRef1 != undefined) {
// // 轮循固定时刻生成的各类组件 // // 轮循固定时刻生成的各类组件
this.getRef(this.$refs.typeChartRef1, '固定时刻') this.getRef(this.$refs.typeChartRef1, '固定时刻');
} }
}) });
}) });
}
}
// }); // });
} }
}, },
immediate: true, immediate: true,
deep: true, deep: true
}, },
// activeName:'channge', // activeName:'channge',
// 处理过的触发数据 // 处理过的触发数据
@ -458,67 +464,80 @@ export default {
this.triggerList = newVal; this.triggerList = newVal;
// console.log("oldVal",oldVal) // console.log("oldVal",oldVal)
// 触发数据 // 触发数据
var _this = this var _this = this;
if (newVal.length != 0 && _this.sectionData) { if (newVal.length != 0 && _this.sectionData) {
_this.classify.forEach((ele, index) => { _this.classify.forEach((ele, index) => {
if (ele.trigger == undefined && ele.timeMode == '实时触发') { if (ele.trigger == undefined && ele.timeMode == '实时触发') {
ele.trigger = []; ele.trigger = [];
} }
newVal.forEach(item => { newVal.forEach((item) => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '实时触发') { if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '实时触发') {
// console.log(ele.analogAreaComponentId, 'analogAreaComponentId'); // console.log(ele.analogAreaComponentId, 'analogAreaComponentId');
// console.log(item.component_id, 'component_id'); // console.log(item.component_id, 'component_id');
if (ele.trigger.length == 10) { if (ele.trigger.length == 10) {
ele.trigger.pop(); ele.trigger.pop();
} }
if(this.$route.query.type=='离线视频'){ if (this.$route.query.type == '离线视频') {
var timeNew = item.time.split('.')[0] var timeNew = item.time.split('.')[0];
var dateLength = timeNew.length; var dateLength = timeNew.length;
var key = timeNew.substring(dateLength-8,dateLength); var key = timeNew.substring(dateLength - 8, dateLength);
item.time = key; item.time = key;
}else{ } else {
item.time = item.time.split('.')[0]; item.time = item.time.split('.')[0];
} }
// 该时间的触发数据
if (item.type_data != null) {
_this.typeTimeMode = item;
}
ele.trigger.unshift(item);
_this.$nextTick(() => {
if (_this.$refs.typeChartRef != undefined) {
for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
// console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
let itemTypeChart = _this.$refs.typeChartRef[i]
if (itemTypeChart.dataArr != undefined && itemTypeChart.dataArr.length != 0) {
if (itemTypeChart.echartArr.includes('时间曲线图')) {
_this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(_this.$refs.typeChartRef[i].dataArr, _this.$refs.typeChartRef[i].componentName.split('_')[0], '实时触发')
}
if (itemTypeChart.echartArr.includes('数值')) {
_this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr)
}
if (itemTypeChart.echartArr.includes('表格')) {
_this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr)
}
if (itemTypeChart.echartArr.includes('直方图') && itemTypeChart.componentName.split('_')[0]) {
// 数据改变重新渲染柱状图
itemTypeChart.$refs.barChartRef.drawBar(itemTypeChart.dataArr[0])
}
if (itemTypeChart.echartArr.includes('饼状图') && itemTypeChart.componentName.split('_')[0]) {
// 数据改变重新渲染饼图
itemTypeChart.$refs.pieChartRef.drawPie(itemTypeChart.dataArr[0])
}
if (itemTypeChart.componentName.includes('OD') && itemTypeChart.$refs.ODChartRef != undefined && itemTypeChart.dataArr[0].ob_data.length != 0) {
itemTypeChart.$refs.ODChartRef.drawThermalChart(itemTypeChart.dataArr[0].ob_data, itemTypeChart.startEndData)
}
// 该时间的触发数据
if (item.type_data != null) {
_this.typeTimeMode = item;
}
ele.trigger.unshift(item);
_this.$nextTick(() => {
if (_this.$refs.typeChartRef != undefined) {
for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
// console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
let itemTypeChart = _this.$refs.typeChartRef[i];
if (itemTypeChart.dataArr != undefined && itemTypeChart.dataArr.length != 0) {
if (itemTypeChart.echartArr.includes('时间曲线图')) {
_this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(
_this.$refs.typeChartRef[i].dataArr,
_this.$refs.typeChartRef[i].componentName.split('_')[0],
'实时触发'
);
}
if (itemTypeChart.echartArr.includes('数值')) {
_this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr);
}
if (itemTypeChart.echartArr.includes('表格')) {
_this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr);
}
if (
itemTypeChart.echartArr.includes('直方图') &&
itemTypeChart.componentName.split('_')[0]
) {
// 数据改变重新渲染柱状图
itemTypeChart.$refs.barChartRef.drawBar(itemTypeChart.dataArr[0]);
}
if (
itemTypeChart.echartArr.includes('饼状图') &&
itemTypeChart.componentName.split('_')[0]
) {
// 数据改变重新渲染饼图
itemTypeChart.$refs.pieChartRef.drawPie(itemTypeChart.dataArr[0]);
}
if (
itemTypeChart.componentName.includes('OD') &&
itemTypeChart.$refs.ODChartRef != undefined &&
itemTypeChart.dataArr[0].ob_data.length != 0
) {
itemTypeChart.$refs.ODChartRef.drawThermalChart(
itemTypeChart.dataArr[0].ob_data,
itemTypeChart.startEndData
);
} }
} }
} }
}
}) });
} }
}); });
}); });
@ -535,64 +554,82 @@ export default {
if (newVal != undefined && newVal.length != 0 && this.sectionData) { if (newVal != undefined && newVal.length != 0 && this.sectionData) {
var thatN = this; var thatN = this;
thatN.classify.forEach((ele, index) => { thatN.classify.forEach((ele, index) => {
newVal.forEach((item) => {
newVal.forEach(item => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定时刻') { if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定时刻') {
if (ele.cycleTimeData.length == 10) { if (ele.cycleTimeData.length == 10) {
ele.cycleTimeData.pop(); ele.cycleTimeData.pop();
} }
// item.time = item.time.split('.')[0]; // item.time = item.time.split('.')[0];
if(this.$route.query.type=='离线视频'){ if (this.$route.query.type == '离线视频') {
var timeNew = item.time.split('.')[0] var timeNew = item.time.split('.')[0];
var dateLength = timeNew.length; var dateLength = timeNew.length;
var key = timeNew.substring(dateLength-8,dateLength); var key = timeNew.substring(dateLength - 8, dateLength);
item.time = key; item.time = key;
}else{ } else {
item.time = item.time.split('.')[0]; item.time = item.time.split('.')[0];
} }
if (item.type_data != null) { if (item.type_data != null) {
// 固定时刻的类型数据 // 固定时刻的类型数据
thatN.typeCycleTimeData = item; thatN.typeCycleTimeData = item;
} }
ele.cycleTimeData.unshift(item); ele.cycleTimeData.unshift(item);
// thatN.$nextTick(() => { // thatN.$nextTick(() => {
if (thatN.$refs.typeChartRef1 != undefined) { if (thatN.$refs.typeChartRef1 != undefined) {
// console.log("thatN.$refs.typeChartRef1",thatN.$refs.typeChartRef1) // console.log("thatN.$refs.typeChartRef1",thatN.$refs.typeChartRef1)
// 轮循固定时刻生成的各类组件 // 轮循固定时刻生成的各类组件
for (let i = 0; i < thatN.$refs.typeChartRef1.length; i++) { for (let i = 0; i < thatN.$refs.typeChartRef1.length; i++) {
let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i] let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i];
if (itemTypeChartRef1.length != 0 && itemTypeChartRef1.dataArr != undefined && itemTypeChartRef1.dataArr.length != 0) { if (
itemTypeChartRef1.length != 0 &&
if (itemTypeChartRef1.echartArr.includes('时间曲线图')) { itemTypeChartRef1.dataArr != undefined &&
thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(thatN.$refs.typeChartRef1[i].dataArr, thatN.$refs.typeChartRef1[i].componentName.split('_')[0], '固定时刻') itemTypeChartRef1.dataArr.length != 0
} ) {
if (itemTypeChartRef1.echartArr.includes('数值')) { if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr) thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(
} thatN.$refs.typeChartRef1[i].dataArr,
if (itemTypeChartRef1.echartArr.includes('表格')) { thatN.$refs.typeChartRef1[i].componentName.split('_')[0],
thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr) '固定时刻'
} );
if (itemTypeChartRef1.echartArr.includes('直方图') && itemTypeChartRef1.$refs.barChartRef.drawBar) { }
// 数据改变重新渲染柱状图 if (itemTypeChartRef1.echartArr.includes('数值')) {
itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0]) thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr);
} }
if (itemTypeChartRef1.echartArr.includes('饼状图') && itemTypeChartRef1.$refs.pieChartRef.drawPie) { if (itemTypeChartRef1.echartArr.includes('表格')) {
// 数据改变重新渲染饼图 thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr);
itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0]) }
} if (
if (itemTypeChartRef1.echartArr.includes('均值图') && itemTypeChartRef1.$refs.avgChartRef!=undefined) { itemTypeChartRef1.echartArr.includes('直方图') &&
itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0]) itemTypeChartRef1.$refs.barChartRef.drawBar
} ) {
if (itemTypeChartRef1.componentName.includes('OD') && itemTypeChartRef1.$refs.ODChartRef != undefined && itemTypeChartRef1.dataArr[0].ob_data.length != 0) { // 数据改变重新渲染柱状图
itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(itemTypeChartRef1.dataArr[0].ob_data, itemTypeChartRef1.startEndData) itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0]);
} }
if (
itemTypeChartRef1.echartArr.includes('饼状图') &&
itemTypeChartRef1.$refs.pieChartRef.drawPie
) {
// 数据改变重新渲染饼图
itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0]);
}
if (
itemTypeChartRef1.echartArr.includes('均值图') &&
itemTypeChartRef1.$refs.avgChartRef != undefined
) {
itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0]);
}
if (
itemTypeChartRef1.componentName.includes('OD') &&
itemTypeChartRef1.$refs.ODChartRef != undefined &&
itemTypeChartRef1.dataArr[0].ob_data.length != 0
) {
itemTypeChartRef1.$refs.ODChartRef.drawThermalChart(
itemTypeChartRef1.dataArr[0].ob_data,
itemTypeChartRef1.startEndData
);
} }
} }
}
// }); // });
} }
@ -660,60 +697,74 @@ export default {
//固定间隔 //固定间隔
cycleStatisticsData: { cycleStatisticsData: {
handler(newVal) { handler(newVal) {
console.log("固定间隔", newVal) console.log('固定间隔', newVal);
if (newVal != undefined && newVal.length != 0 && this.sectionData) { if (newVal != undefined && newVal.length != 0 && this.sectionData) {
var that = this; var that = this;
that.classify.forEach((ele, index) => { that.classify.forEach((ele, index) => {
newVal.forEach(item => { newVal.forEach((item) => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定间隔') { if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定间隔') {
if (ele.cycleStatisticsData.length == 10) { if (ele.cycleStatisticsData.length == 10) {
ele.cycleStatisticsData.pop(); ele.cycleStatisticsData.pop();
} }
if(this.$route.query.type=='离线视频'){ if (this.$route.query.type == '离线视频') {
var timeNew = item.time.split('.')[0] var timeNew = item.time.split('.')[0];
var dateLength = timeNew.length; var dateLength = timeNew.length;
var key = timeNew.substring(dateLength-8,dateLength); var key = timeNew.substring(dateLength - 8, dateLength);
item.time = key; item.time = key;
}else{ } else {
item.time = item.time.split('.')[0]; item.time = item.time.split('.')[0];
} }
if (item.type_data != null) { if (item.type_data != null) {
that.typeCycleStatistics = item; that.typeCycleStatistics = item;
} }
ele.cycleStatisticsData.unshift(item); ele.cycleStatisticsData.unshift(item);
if (that.$refs.typeChartRef2 != undefined) { if (that.$refs.typeChartRef2 != undefined) {
for (let i = 0; i < that.$refs.typeChartRef2.length; i++) { for (let i = 0; i < that.$refs.typeChartRef2.length; i++) {
let itemTypeChartRef2 = that.$refs.typeChartRef2[i]; let itemTypeChartRef2 = that.$refs.typeChartRef2[i];
if (itemTypeChartRef2.length != 0 && itemTypeChartRef2.dataArr != undefined && itemTypeChartRef2.dataArr.length != 0) { if (
if (itemTypeChartRef2.echartArr.includes('时间曲线图')) { itemTypeChartRef2.length != 0 &&
that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(that.$refs.typeChartRef2[i].dataArr, that.$refs.typeChartRef2[i].componentName.split('_')[0], '固定间隔') itemTypeChartRef2.dataArr != undefined &&
} itemTypeChartRef2.dataArr.length != 0
if (itemTypeChartRef2.echartArr.includes('数值')) { ) {
that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr) if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
} that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(
if (itemTypeChartRef2.echartArr.includes('表格')) { that.$refs.typeChartRef2[i].dataArr,
that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr) that.$refs.typeChartRef2[i].componentName.split('_')[0],
} '固定间隔'
// console.log(item,'组件数据'); );
if (itemTypeChartRef2.echartArr.includes('直方图') && itemTypeChartRef2.$refs.barChartRef.drawBar) {
// 数据改变重新渲染柱状图
// console.log(item, '组件');
itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0])
}
if (itemTypeChartRef2.echartArr.includes('饼状图') && itemTypeChartRef2.$refs.pieChartRef.drawPie) {
// 数据改变重新渲染饼图
itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
}
if (itemTypeChartRef2.echartArr.includes('均值图') && itemTypeChartRef2.$refs.avgChartRef!=undefined) {
itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0])
}
} }
if (itemTypeChartRef2.echartArr.includes('数值')) {
that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr);
}
if (itemTypeChartRef2.echartArr.includes('表格')) {
that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr);
}
// console.log(item,'组件数据');
if (
itemTypeChartRef2.echartArr.includes('直方图') &&
itemTypeChartRef2.$refs.barChartRef.drawBar
) {
// 数据改变重新渲染柱状图
// console.log(item, '组件');
itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0]);
}
if (
itemTypeChartRef2.echartArr.includes('饼状图') &&
itemTypeChartRef2.$refs.pieChartRef.drawPie
) {
// 数据改变重新渲染饼图
itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0]);
}
if (
itemTypeChartRef2.echartArr.includes('均值图') &&
itemTypeChartRef2.$refs.avgChartRef != undefined
) {
itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0]);
}
}
} }
} }
} }
}); });
@ -763,7 +814,6 @@ export default {
// } // }
// } // }
// } // }
// } // }
@ -774,7 +824,55 @@ export default {
}, },
immediate: true immediate: true
}, },
//周期统计实时累计数据主题
cycleAccumulateData: {
handler(newVal) {
console.log('周期统计实时累计数据主题', newVal);
if (newVal != undefined && newVal.length != 0 && this.sectionData) {
var that = this;
that.classify.forEach((ele, index) => {
newVal.forEach((item) => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '固定间隔') {
if (ele.cycleStatisticsData.length == 10) {
ele.cycleStatisticsData.pop();
}
if (this.$route.query.type == '离线视频') {
var timeNew = item.time.split('.')[0];
var dateLength = timeNew.length;
var key = timeNew.substring(dateLength - 8, dateLength);
item.time = key;
} else {
item.time = item.time.split('.')[0];
}
if (item.type_data != null) {
that.typeCycleStatistics = item;
}
// ele.cycleStatisticsData.unshift(item);
if (that.$refs.typeChartRef2 != undefined) {
for (let i = 0; i < that.$refs.typeChartRef2.length; i++) {
let itemTypeChartRef2 = that.$refs.typeChartRef2[i];
if (
itemTypeChartRef2.length != 0 &&
itemTypeChartRef2.dataArr != undefined &&
itemTypeChartRef2.dataArr.length != 0
) {
console.log('itemTypeChartRef2.echartArr',itemTypeChartRef2.echartArr)
if (itemTypeChartRef2.echartArr.includes('数值')) {
//只需要修改数值组件
that.$refs.typeChartRef2[i].getcycleAccumulateDataArr([item]);
}
}
}
}
}
});
});
}
},
immediate: true
}
} }
}; };
</script> </script>

80
src/views/index.vue
View File

@ -26,6 +26,7 @@
:triggerData="triggerData" :triggerData="triggerData"
:triggerListData="triggerListData" :triggerListData="triggerListData"
:cycleStatisticsData="cycleStatisticsData" :cycleStatisticsData="cycleStatisticsData"
:cycleAccumulateData="cycleAccumulateData"
:cycleHistoryData="cycleHistoryData" :cycleHistoryData="cycleHistoryData"
></dataBoard> ></dataBoard>
</el-tab-pane> </el-tab-pane>
@ -87,7 +88,7 @@
<!-- v-draggableDelection --> <!-- v-draggableDelection -->
<div class="formBox"> <div class="formBox">
<el-form ref="form" :model="form" label-width="100px" :inline="true"> <el-form ref="form" :model="form" label-width="100px" :inline="true">
<el-form-item label="组件名称:" @mousedown.prevent> <el-form-item label="组件名称:" :required="true" @mousedown.prevent>
<el-input v-model="form.name"> </el-input> <el-input v-model="form.name"> </el-input>
</el-form-item> </el-form-item>
<!-- <div class="titleDraggable" ></div> --> <!-- <div class="titleDraggable" ></div> -->
@ -234,7 +235,7 @@
v-draggable1 v-draggable1
> >
<el-form ref="form" :model="componentForm" label-width="150px"> <el-form ref="form" :model="componentForm" label-width="150px">
<el-form-item label="名称："> <el-form-item label="名称：" :required="true">
<el-input v-model="componentForm.componentName"></el-input> <el-input v-model="componentForm.componentName"></el-input>
</el-form-item> </el-form-item>
@ -353,25 +354,21 @@
</div> </div>
</el-form-item> </el-form-item>
<!-- <el-form-item label="单位：" ></el-form-item> --> <!-- <el-form-item label="单位：" ></el-form-item> -->
<el-form-item label="起点：" :required="componentForm.timeMode != '实时触发'" v-if="componentForm.componentType == 'OD'"> <el-form-item label="起点：" :required="true" v-if="componentForm.componentType == 'OD'">
<el-checkbox-group v-model="componentForm.startSection" @change="handleCheckedStartSection"> <el-checkbox-group v-model="componentForm.startSection" @change="handleCheckedStartSection">
<el-checkbox v-for="item in sectionals" :label="item.graphicName" :key="item.graphicId">{{ <el-checkbox v-for="item in sectionals" :label="item.graphicName" :key="item.graphicId">{{
item.graphicName item.graphicName
}}</el-checkbox> }}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
<el-form-item label="终点：" :required="componentForm.timeMode != '实时触发'" v-if="componentForm.componentType == 'OD'"> <el-form-item label="终点：" :required="true" v-if="componentForm.componentType == 'OD'">
<el-checkbox-group v-model="componentForm.endSection" @change="handleCheckedendSection"> <el-checkbox-group v-model="componentForm.endSection" @change="handleCheckedendSection">
<el-checkbox v-for="item in sectionals" :label="item.graphicName" :key="item.graphicId">{{ <el-checkbox v-for="item in sectionals" :label="item.graphicName" :key="item.graphicId">{{
item.graphicName item.graphicName
}}</el-checkbox> }}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="展现形式：" :required="true" v-if="componentForm.componentType != 'OD'">
label="展现形式："
:required="componentForm.timeMode != '实时触发'"
v-if="componentForm.componentType != 'OD'"
>
<el-checkbox-group v-model="componentForm.presentation" @change="handlePresentation"> <el-checkbox-group v-model="componentForm.presentation" @change="handlePresentation">
<el-checkbox label="数值" name="presentation"></el-checkbox> <el-checkbox label="数值" name="presentation"></el-checkbox>
<el-checkbox label="表格" name="presentation" v-if="componentForm.componentType != '拥堵'"></el-checkbox> <el-checkbox label="表格" name="presentation" v-if="componentForm.componentType != '拥堵'"></el-checkbox>
@ -880,6 +877,8 @@ export default {
cycleTimeData: [], cycleTimeData: [],
//固定间隔 //固定间隔
cycleStatisticsData: [], cycleStatisticsData: [],
//周期统计实时累计数据主题
cycleAccumulateData: [],
//历史数据 //历史数据
cycleHistoryData: {}, cycleHistoryData: {},
//视频类型 //视频类型
@ -972,7 +971,9 @@ export default {
//感知编码车道编号 //感知编码车道编号
laneNumbercChange(val) { laneNumbercChange(val) {
if (val == 0) { if (val == 0) {
this.perception.laneNumber1 = 0; this.perception.laneNumber1 = '0';
} else {
this.perception.laneNumber1 = '';
} }
}, },
//感知编码开关事件 //感知编码开关事件
@ -1085,6 +1086,7 @@ export default {
'cycle_history-' + this.$route.query.id, 'cycle_history-' + this.$route.query.id,
'cycle_time-' + this.$route.query.id, 'cycle_time-' + this.$route.query.id,
'cycle_statistics-' + this.$route.query.id, 'cycle_statistics-' + this.$route.query.id,
'cycle_accumulate-' + this.$route.query.id,
//获取离线视频数据 //获取离线视频数据
'VideoStatusData', 'VideoStatusData',
'TargetAnalysisStatusData', 'TargetAnalysisStatusData',
@ -1104,6 +1106,7 @@ export default {
'trigger-' + this.$route.query.id, 'trigger-' + this.$route.query.id,
'cycle_time-' + this.$route.query.id, 'cycle_time-' + this.$route.query.id,
'cycle_statistics-' + this.$route.query.id, 'cycle_statistics-' + this.$route.query.id,
'cycle_accumulate-' + this.$route.query.id,
'TargetAnalysisStatusData', 'TargetAnalysisStatusData',
'TrafficAnalysisStatusData', 'TrafficAnalysisStatusData',
'hert', 'hert',
@ -1390,7 +1393,7 @@ export default {
const u8arr = new Uint8Array(message); const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
// console.log(msg,'msg'); // console.log(msg, 'msg接受一张高频图片');
// document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg)); // document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
if (msg.rate == 'high') { if (msg.rate == 'high') {
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg)); document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
@ -1400,19 +1403,25 @@ export default {
// sessionStorage.setItem("highPic", this.highPic.pic); // sessionStorage.setItem("highPic", this.highPic.pic);
// sessionStorage.setItem("videoId", this.highPic.id); // sessionStorage.setItem("videoId", this.highPic.id);
} }
this.highPicList = sessionStorage.getItem('highPicList')
? JSON.parse(sessionStorage.getItem('highPicList'))
: [];
if (this.highPicList.length == 0) { if (this.highPicList.length == 0) {
this.highPicList.push({ pic: msg.pic, videoId: msg.id }); this.highPicList.push({ pic: msg.pic, videoId: msg.id });
sessionStorage.setItem('highPicList', JSON.stringify(this.highPicList)); sessionStorage.setItem('highPicList', JSON.stringify(this.highPicList));
} else { } else {
this.highPicList = sessionStorage.getItem('highPicList'); let found = false;
for (let i = 0; i < this.highPicList.length; i++) { for (let i = 0; i < this.highPicList.length; i++) {
if (this.highPicList.videoId != msg.id) { if (this.highPicList[i].videoId == msg.id) {
this.highPicList.push({ pic: msg.pic, videoId: msg.id }); this.highPicList[i].pic = msg.pic;
sessionStorage.setItem('highPicList', JSON.stringify(this.highPicList)); found = true;
} else { break; // 找到了就退出循环
return false;
} }
} }
if (!found) {
this.highPicList.push({ pic: msg.pic, videoId: msg.id });
}
sessionStorage.setItem('highPicList', JSON.stringify(this.highPicList));
} }
} else if (msg.rate == 'low') { } else if (msg.rate == 'low') {
this.analysisConfigurationdata = msg; this.analysisConfigurationdata = msg;
@ -1512,6 +1521,19 @@ export default {
// this.cycleStatisticsData = msgN; // this.cycleStatisticsData = msgN;
} catch (error) {} } catch (error) {}
break; break;
case 'cycle_accumulate-' + this.$route.query.id:
try {
//周期统计实时累计数据主题
// 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("周期统计实时累计数据主题",msgN)
this.cycleAccumulateData = msgN;
} catch (error) {}
break;
case 'VideoStatusData': case 'VideoStatusData':
try { try {
const utf8decoder = new TextDecoder(); const utf8decoder = new TextDecoder();
@ -1542,6 +1564,15 @@ export default {
this.trafficAnalysisStatusData = msg; this.trafficAnalysisStatusData = msg;
} catch (error) {} } catch (error) {}
break; break;
case 'simulator_target-' + this.$route.query.id: //目标数量
try {
const utf8decoder1 = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder1.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp);
document.getElementById('mapModule').contentWindow.getTargetNumber(JSON.stringify(msg));
} catch (error) {}
break;
} }
this.receiveNews = ''; this.receiveNews = '';
}, },
@ -1949,8 +1980,8 @@ export default {
this.perception.laneOrdinary == '' || this.perception.laneOrdinary == '' ||
this.perception.bearings == '' || this.perception.bearings == '' ||
this.perception.flowDirection == '' || this.perception.flowDirection == '' ||
this.perception.laneNumber == '' || this.perception.laneNumber === '' ||
this.perception.laneNumber1 == '') this.perception.laneNumber1 === '')
) { ) {
this.$message.warning('请填写完整感知编码!'); this.$message.warning('请填写完整感知编码!');
return false; return false;
@ -2187,21 +2218,21 @@ export default {
this.$message.warning('请选择必选项'); this.$message.warning('请选择必选项');
return false; return false;
} else if ( } else if (
componentForm.timeMode != '实时触发' && // componentForm.timeMode != '实时触发' &&
componentForm.componentType == 'OD' && componentForm.componentType == 'OD' &&
(componentForm.endSection.length == 0 || componentForm.startSection.length == 0) (componentForm.endSection.length == 0 || componentForm.startSection.length == 0)
) { ) {
this.$message.warning('请选择必选项'); this.$message.warning('请选择必选项');
return false; return false;
} else if ( } else if (
componentForm.timeMode != '实时触发' && // componentForm.timeMode != '实时触发' &&
componentForm.componentType == '类型' && componentForm.componentType == '类型' &&
(componentForm.presentation.length == 0 || componentForm.type.length == 0) (componentForm.presentation.length == 0 || componentForm.type.length == 0)
) { ) {
this.$message.warning('请选择必选项'); this.$message.warning('请选择必选项');
return false; return false;
} else if ( } else if (
componentForm.timeMode != '实时触发' && // componentForm.timeMode != '实时触发' &&
componentForm.componentType != '类型' && componentForm.componentType != '类型' &&
componentForm.componentType != 'OD' && componentForm.componentType != 'OD' &&
componentForm.presentation.length == 0 componentForm.presentation.length == 0
@ -2209,7 +2240,12 @@ export default {
this.$message.warning('请选择必选项'); this.$message.warning('请选择必选项');
return false; return false;
} else { } else {
if (!componentForm.componentName.trim()) {
this.$message.warning('请输入名称');
return false;
}
this.component = false; this.component = false;
let formData = new FormData(); let formData = new FormData();
if (componentForm.componentType == 'OD') { if (componentForm.componentType == 'OD') {
//名称 //名称

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

@ -89,14 +89,10 @@
<span <span
v-if=" v-if="
(i.triggerData.speed && i.triggerData.speed != -1) || (i.triggerData.speed && i.triggerData.speed != -1) ||
i.triggerData.speed == 0 i.triggerData.speed === 0
" "
> >
{{ {{ Math.abs(i.triggerData.speed) }}
i.triggerData.speed > 0 || i.triggerData.speed == 0
? i.triggerData.speed
: Math.abs(i.triggerData.speed)
}}
</span> </span>
<span v-else>-</span> <span v-else>-</span>
</span> </span>
@ -104,7 +100,7 @@
style="color: rgb(71, 161, 255); font-size: 23px" style="color: rgb(71, 161, 255); font-size: 23px"
v-if="i.componentType == '车头时距'" v-if="i.componentType == '车头时距'"
>{{ >{{
i.triggerData.headway || i.triggerData.headway == 0 i.triggerData.headway || i.triggerData.headway === 0
? i.triggerData.headway == -1 ? i.triggerData.headway == -1
? '-' ? '-'
: i.triggerData.headway : i.triggerData.headway
@ -116,10 +112,10 @@
v-if="i.componentType == '流量'" v-if="i.componentType == '流量'"
> >
<span v-if="i.flowType == '入流'">{{ <span v-if="i.flowType == '入流'">{{
i.triggerData.inFlow || i.triggerData.inFlow == 0 ? i.triggerData.inFlow : '-' i.triggerData.inFlow || i.triggerData.inFlow === 0 ? i.triggerData.inFlow : '-'
}}</span> }}</span>
<span v-if="i.flowType == '出流'">{{ <span v-if="i.flowType == '出流'">{{
i.triggerData.outFlow || i.triggerData.outFlow == 0 i.triggerData.outFlow || i.triggerData.outFlow === 0
? i.triggerData.outFlow ? i.triggerData.outFlow
: '-' : '-'
}}</span> }}</span>
@ -138,27 +134,27 @@
style="color: rgb(71, 161, 255); font-size: 23px" style="color: rgb(71, 161, 255); font-size: 23px"
v-if="i.componentType == '检测数'" v-if="i.componentType == '检测数'"
>{{ >{{
i.triggerData.n_stay || i.triggerData.n_stay == 0 ? i.triggerData.n_stay : '-' i.triggerData.n_stay || i.triggerData.n_stay === 0 ? i.triggerData.n_stay : '-'
}}</span }}</span
> >
<span <span
style="color: rgb(71, 161, 255); font-size: 23px" style="color: rgb(71, 161, 255); font-size: 23px"
v-if="i.componentType == '排队数'" v-if="i.componentType == '排队数'"
>{{ >{{
i.triggerData.n_queue || i.triggerData.n_queue == 0 i.triggerData.n_queue || i.triggerData.n_queue === 0
? i.triggerData.n_queue ? i.triggerData.n_queue
: '-' : '-'
}}</span }}</span
> >
<span style="font-size: 14px" v-if="i.componentType == '车头时距'"></span> <span style="font-size: 14px" v-if="i.componentType == '车头时距'"></span>
<span style="font-size: 14px" v-if="i.componentType == '速度'"> <span style="font-size: 13px" v-if="i.componentType == '速度'">
<span <span
v-if=" v-if="
(i.triggerData.speed && i.triggerData.speed != -1) || (i.triggerData.speed && i.triggerData.speed != -1) ||
i.triggerData.speed == 0 i.triggerData.speed === 0
" "
> >
{{ i.triggerData.speed > 0 || i.triggerData.speed == 0 ? 'km/h' : 'pix/s' }} {{ i.triggerData.speed > 0 || i.triggerData.speed === 0 ? 'km/h' : 'pix/s' }}
</span> </span>
</span> </span>
<span style="font-size: 14px" v-if="i.componentType == '类型'"></span> <span style="font-size: 14px" v-if="i.componentType == '类型'"></span>
@ -194,14 +190,10 @@
<span <span
v-if=" v-if="
(i.cycleTimeData[0].speed && i.cycleTimeData[0].speed != -1) || (i.cycleTimeData[0].speed && i.cycleTimeData[0].speed != -1) ||
i.cycleTimeData[0].speed == 0 i.cycleTimeData[0].speed === 0
" "
> >
{{ {{ Math.abs(i.cycleTimeData[0].speed) }}
i.cycleTimeData[0].speed > 0 || i.cycleTimeData[0].speed == 0
? i.cycleTimeData[0].speed
: Math.abs(i.cycleTimeData[0].speed)
}}
</span> </span>
<span v-else>-</span> <span v-else>-</span>
</span> </span>
@ -212,14 +204,10 @@
<span <span
v-if=" v-if="
(i.triggerData.speed && i.triggerData.speed != -1) || (i.triggerData.speed && i.triggerData.speed != -1) ||
i.triggerData.speed == 0 i.triggerData.speed === 0
" "
> >
{{ {{ Math.abs(i.triggerData.speed) }}
i.triggerData.speed > 0 || i.triggerData.speed == 0
? i.triggerData.speed
: Math.abs(i.triggerData.speed)
}}
</span> </span>
<span v-else>-</span> <span v-else>-</span>
</span> </span>
@ -227,7 +215,7 @@
style="color: rgb(71, 161, 255); font-size: 23px" style="color: rgb(71, 161, 255); font-size: 23px"
v-if="i.componentType == '车头时距' && i.triggerData == null" v-if="i.componentType == '车头时距' && i.triggerData == null"
>{{ >{{
i.cycleTimeData[0].headway || i.cycleTimeData[0].headway == 0 i.cycleTimeData[0].headway || i.cycleTimeData[0].headway === 0
? i.cycleTimeData[0].headway == -1 ? i.cycleTimeData[0].headway == -1
? '-' ? '-'
: i.cycleTimeData[0].headway : i.cycleTimeData[0].headway
@ -238,7 +226,7 @@
style="color: rgb(71, 161, 255); font-size: 23px" style="color: rgb(71, 161, 255); font-size: 23px"
v-else-if="i.componentType == '车头时距' && i.triggerData != null" v-else-if="i.componentType == '车头时距' && i.triggerData != null"
>{{ >{{
i.triggerData.headway || i.triggerData.headway == 0 i.triggerData.headway || i.triggerData.headway === 0
? i.triggerData.headway == -1 ? i.triggerData.headway == -1
? '-' ? '-'
: i.triggerData.headway : i.triggerData.headway
@ -250,12 +238,12 @@
v-if="i.componentType == '流量'" v-if="i.componentType == '流量'"
> >
<span v-if="i.flowType == '入流'">{{ <span v-if="i.flowType == '入流'">{{
i.cycleTimeData[0].in_flow || i.cycleTimeData[0].in_flow == 0 i.cycleTimeData[0].in_flow || i.cycleTimeData[0].in_flow === 0
? i.cycleTimeData[0].in_flow ? i.cycleTimeData[0].in_flow
: '-' : '-'
}}</span> }}</span>
<span v-if="i.flowType == '出流'">{{ <span v-if="i.flowType == '出流'">{{
i.cycleTimeData[0].out_flow || i.cycleTimeData[0].out_flow == 0 i.cycleTimeData[0].out_flow || i.cycleTimeData[0].out_flow === 0
? i.cycleTimeData[0].out_flow ? i.cycleTimeData[0].out_flow
: '-' : '-'
}}</span> }}</span>
@ -326,7 +314,7 @@
style="color: rgb(71, 161, 255); font-size: 23px" style="color: rgb(71, 161, 255); font-size: 23px"
v-if="i.componentType == '检测数'" v-if="i.componentType == '检测数'"
>{{ >{{
i.cycleTimeData[0].n_stay || i.cycleTimeData[0].n_stay == 0 i.cycleTimeData[0].n_stay || i.cycleTimeData[0].n_stay === 0
? i.cycleTimeData[0].n_stay ? i.cycleTimeData[0].n_stay
: '-' : '-'
}}</span }}</span
@ -335,7 +323,7 @@
style="color: rgb(71, 161, 255); font-size: 23px" style="color: rgb(71, 161, 255); font-size: 23px"
v-if="i.componentType == '排队数'" v-if="i.componentType == '排队数'"
>{{ >{{
i.cycleTimeData[0].n_queue || i.cycleTimeData[0].n_queue == 0 i.cycleTimeData[0].n_queue || i.cycleTimeData[0].n_queue === 0
? i.cycleTimeData[0].n_queue ? i.cycleTimeData[0].n_queue
: '-' : '-'
}}</span }}</span
@ -373,11 +361,11 @@
<span <span
v-if=" v-if="
(i.cycleStatisticsData[0].speed && i.cycleStatisticsData[0].speed != -1) || (i.cycleStatisticsData[0].speed && i.cycleStatisticsData[0].speed != -1) ||
i.cycleStatisticsData[0].speed == 0 i.cycleStatisticsData[0].speed === 0
" "
> >
{{ {{
i.cycleStatisticsData[0].speed > 0 || i.cycleStatisticsData[0].speed == 0 i.cycleStatisticsData[0].speed > 0 || i.cycleStatisticsData[0].speed === 0
? i.cycleStatisticsData[0].speed ? i.cycleStatisticsData[0].speed
: Math.abs(i.cycleStatisticsData[0].speed) : Math.abs(i.cycleStatisticsData[0].speed)
}} }}
@ -391,14 +379,10 @@
<span <span
v-if=" v-if="
(i.triggerData.speed && i.triggerData.speed != -1) || (i.triggerData.speed && i.triggerData.speed != -1) ||
i.triggerData.speed == 0 i.triggerData.speed === 0
" "
> >
{{ {{ Math.abs(i.triggerData.speed) }}
i.triggerData.speed > 0 || i.triggerData.speed == 0
? i.triggerData.speed
: Math.abs(i.triggerData.speed)
}}
</span> </span>
<span v-else>-</span> <span v-else>-</span>
</span> </span>
@ -407,7 +391,7 @@
v-if="i.componentType == '车头时距' && i.triggerData == null" v-if="i.componentType == '车头时距' && i.triggerData == null"
>{{ >{{
i.cycleStatisticsData[0].ave_headway || i.cycleStatisticsData[0].ave_headway ||
i.cycleStatisticsData[0].ave_headway == 0 i.cycleStatisticsData[0].ave_headway === 0
? i.cycleStatisticsData[0].ave_headway == -1 ? i.cycleStatisticsData[0].ave_headway == -1
? '-' ? '-'
: i.cycleStatisticsData[0].ave_headway : i.cycleStatisticsData[0].ave_headway
@ -418,7 +402,7 @@
style="color: rgb(71, 161, 255); font-size: 23px" style="color: rgb(71, 161, 255); font-size: 23px"
v-else-if="i.componentType == '车头时距' && i.triggerData != null" v-else-if="i.componentType == '车头时距' && i.triggerData != null"
>{{ >{{
i.triggerData.ave_headway || i.triggerData.ave_headway == 0 i.triggerData.ave_headway || i.triggerData.ave_headway === 0
? i.triggerData.ave_headway == -1 ? i.triggerData.ave_headway == -1
? '-' ? '-'
: i.triggerData.ave_headway : i.triggerData.ave_headway
@ -519,7 +503,7 @@
style="color: rgb(71, 161, 255); font-size: 23px" style="color: rgb(71, 161, 255); font-size: 23px"
v-if="i.componentType == '检测数' && i.triggerData == null" v-if="i.componentType == '检测数' && i.triggerData == null"
>{{ >{{
i.cycleStatisticsData[0].ave_stay || i.cycleStatisticsData[0].ave_stay == 0 i.cycleStatisticsData[0].ave_stay || i.cycleStatisticsData[0].ave_stay === 0
? i.cycleStatisticsData[0].ave_stay ? i.cycleStatisticsData[0].ave_stay
: '-' : '-'
}}</span }}</span
@ -528,7 +512,7 @@
style="color: rgb(71, 161, 255); font-size: 23px" style="color: rgb(71, 161, 255); font-size: 23px"
v-else-if="i.componentType == '检测数' && i.triggerData != null" v-else-if="i.componentType == '检测数' && i.triggerData != null"
>{{ >{{
i.triggerData.ave_stay || i.triggerData.ave_stay == 0 i.triggerData.ave_stay || i.triggerData.ave_stay === 0
? i.triggerData.ave_stay ? i.triggerData.ave_stay
: '-' : '-'
}}</span }}</span
@ -537,7 +521,7 @@
style="color: rgb(71, 161, 255); font-size: 23px" style="color: rgb(71, 161, 255); font-size: 23px"
v-if="i.componentType == '排队数' && i.triggerData == null" v-if="i.componentType == '排队数' && i.triggerData == null"
>{{ >{{
i.cycleStatisticsData[0].ave_queue || i.cycleStatisticsData[0].ave_queue == 0 i.cycleStatisticsData[0].ave_queue || i.cycleStatisticsData[0].ave_queue === 0
? i.cycleStatisticsData[0].ave_queue ? i.cycleStatisticsData[0].ave_queue
: '-' : '-'
}}</span }}</span
@ -546,7 +530,7 @@
style="color: rgb(71, 161, 255); font-size: 23px" style="color: rgb(71, 161, 255); font-size: 23px"
v-if="i.componentType == '排队数' && i.triggerData != null" v-if="i.componentType == '排队数' && i.triggerData != null"
>{{ >{{
i.triggerData.ave_queue || i.triggerData.ave_queue == 0 i.triggerData.ave_queue || i.triggerData.ave_queue === 0
? i.triggerData.ave_queue ? i.triggerData.ave_queue
: '-' : '-'
}}</span }}</span
@ -555,7 +539,7 @@
style="color: rgb(71, 161, 255); font-size: 23px" style="color: rgb(71, 161, 255); font-size: 23px"
v-if="i.componentType == '延误' && i.triggerData == null" v-if="i.componentType == '延误' && i.triggerData == null"
>{{ >{{
i.cycleStatisticsData[0].ave_delay || i.cycleStatisticsData[0].ave_delay == 0 i.cycleStatisticsData[0].ave_delay || i.cycleStatisticsData[0].ave_delay === 0
? i.cycleStatisticsData[0].ave_delay ? i.cycleStatisticsData[0].ave_delay
: '-' : '-'
}}</span }}</span
@ -564,7 +548,7 @@
style="color: rgb(71, 161, 255); font-size: 23px" style="color: rgb(71, 161, 255); font-size: 23px"
v-if="i.componentType == '延误' && i.triggerData != null" v-if="i.componentType == '延误' && i.triggerData != null"
>{{ >{{
i.triggerData.ave_delay || i.triggerData.ave_delay == 0 i.triggerData.ave_delay || i.triggerData.ave_delay === 0
? i.triggerData.ave_delay ? i.triggerData.ave_delay
: '-' : '-'
}}</span }}</span
@ -1272,7 +1256,7 @@
<img src="@/assets/img/AnalysisMain/add.png" style="height: 60%; width: 4%; cursor: pointer" /> <img src="@/assets/img/AnalysisMain/add.png" style="height: 60%; width: 4%; cursor: pointer" />
</div> --> </div> -->
<el-button size="medium" style="width: 100%" type="primary" plain @click="addParentNode" <el-button size="medium" style="width: 100%" type="primary" plain @click="addParentNode"
><i class="el-icon-plus" style="font-size: 18px"></i> 添加入口</el-button ><i class="el-icon-plus" style="font-size: 18px"></i></el-button
> >
<span slot="footer" class="dialog-footer" style="display: flex; justify-content: center"> <span slot="footer" class="dialog-footer" style="display: flex; justify-content: center">
<!-- <el-button type="primary" @click="centerDialogVisible = false">取消</el-button> --> <!-- <el-button type="primary" @click="centerDialogVisible = false">取消</el-button> -->
@ -1389,7 +1373,7 @@ export default {
addChildParentId: '', //添加子组件保存点击的父组件id addChildParentId: '', //添加子组件保存点击的父组件id
centerDialogVisible: false, //数据配置弹窗 centerDialogVisible: false, //数据配置弹窗
activeNames: ['1'], // 视频折叠 activeNames: ['1'], // 视频折叠
intersectionName: ['北进口', '南进口'], //数据分析名称 intersectionName: [], //数据分析名称
videoList: [], videoList: [],
intersectionList: [ intersectionList: [
// { // {
@ -1762,7 +1746,8 @@ export default {
triggerNStayData: [], //触发检测数数据 triggerNStayData: [], //触发检测数数据
triggerNQueueData: [], //触发排队数数据 triggerNQueueData: [], //触发排队数数据
triggerODData: [], //触发OD数据 triggerODData: [], //触发OD数据
triggerYWData: [] //mqtt延误 triggerYWData: [], //mqtt延误
disabledCheckList: [] //tree不可选数组
}; };
}, },
mounted() { mounted() {
@ -1783,12 +1768,20 @@ export default {
getAssembly({ getAssembly({
Number: 10 Number: 10
}).then((res) => { }).then((res) => {
this.intersectionList = res.data.data; this.intersectionList = res.data.data || [];
this.addSelectOptionField(this.intersectionList); this.addSelectOptionField(this.intersectionList);
// this.addTriggerDataField(this.intersectionList); // this.addTriggerDataField(this.intersectionList);
//mqtt订阅 //mqtt订阅
this.getMqtt(); this.getMqtt();
console.log(this.intersectionList, 'this.intersectionList'); console.log(this.intersectionList, 'this.intersectionList');
//开发路口默认展开第一个
if (this.intersectionList.length > 0) {
let children = this.intersectionList[0].children || [];
if (children.length > 0) {
this.intersectionName = [children[0].name];
}
}
// for (let i = 0; i < this.intersectionList.length; i++) { // for (let i = 0; i < this.intersectionList.length; i++) {
// for (let j = 0; j < this.intersectionList[i].children.length; j++) { // for (let j = 0; j < this.intersectionList[i].children.length; j++) {
// if (j == 2) { // if (j == 2) {
@ -2036,7 +2029,7 @@ export default {
this.addChildThreeData = []; this.addChildThreeData = [];
this.addParent = false; this.addParent = false;
if (data.label == '图表区') { if (data.label == '图表区') {
this.addChartTitle = '添加图表组件'; this.addChartTitle = '添加图表';
this.addChildType = data.label; this.addChildType = data.label;
//父id //父id
this.addChildParentId = data.duocgqrhpzId; this.addChildParentId = data.duocgqrhpzId;
@ -2076,11 +2069,13 @@ export default {
for (let i = 0; i < this.addThreeNodeData.data.children.length; i++) { for (let i = 0; i < this.addThreeNodeData.data.children.length; i++) {
this.addChartSort = this.addThreeNodeData.data.children[i].sort; this.addChartSort = this.addThreeNodeData.data.children[i].sort;
} }
this.disabledCheckList = [];
getSelectedComponent({ getSelectedComponent({
DuocgqrhpzId: data.duocgqrhpzId DuocgqrhpzId: data.duocgqrhpzId
}).then((res) => { }).then((res) => {
res.data.data.forEach((item) => { res.data.data.forEach((item) => {
this.checkList.push(`${item.presentationForm},${item.analogAreaComponentId},${item.videoId}`); this.checkList.push(`${item.presentationForm},${item.analogAreaComponentId},${item.videoId}`);
this.disabledCheckList.push(`${item.analogAreaComponentId},${item.videoId}`);
this.defaultExpanded.push(item.analogAreaComponentId); this.defaultExpanded.push(item.analogAreaComponentId);
// item.data.forEach((subItem) => { // item.data.forEach((subItem) => {
// const labels = subItem.presentationForm.split(","); // const labels = subItem.presentationForm.split(",");
@ -2168,7 +2163,7 @@ export default {
this.addDialogVisible = true; this.addDialogVisible = true;
this.addForm.name = ''; this.addForm.name = '';
if (this.addThreeNodeData.node.level == 1) { if (this.addThreeNodeData.node.level == 1) {
this.addTitle = '添加进口'; this.addTitle = '添加';
for (let i = 0; i < this.addThreeNodeData.data.children.length; i++) { for (let i = 0; i < this.addThreeNodeData.data.children.length; i++) {
this.addOneSort = this.addThreeNodeData.data.children[i].sort; this.addOneSort = this.addThreeNodeData.data.children[i].sort;
} }
@ -2335,7 +2330,7 @@ export default {
}, },
//父节点添加 //父节点添加
addParentNode() { addParentNode() {
this.addTitle = '添加路口'; this.addTitle = '添加';
this.addParent = true; this.addParent = true;
this.addDialogVisible = true; this.addDialogVisible = true;
this.addForm.name = ''; this.addForm.name = '';
@ -2747,7 +2742,8 @@ export default {
this.topicSends.push( this.topicSends.push(
'trigger-' + this.videoList[i].videoId, 'trigger-' + this.videoList[i].videoId,
'cycle_time-' + this.videoList[i].videoId, 'cycle_time-' + this.videoList[i].videoId,
'cycle_statistics-' + this.videoList[i].videoId 'cycle_statistics-' + this.videoList[i].videoId,
'cycle_accumulate-' + this.videoList[i].videoId
); );
this.topicVideoIdList.push({ videoId: this.videoList[i].videoId }); this.topicVideoIdList.push({ videoId: this.videoList[i].videoId });
} }
@ -2771,6 +2767,11 @@ export default {
// console.log(msgN,'msgN'); // console.log(msgN,'msgN');
for (let j = 0; j < msgN.length; j++) { for (let j = 0; j < msgN.length; j++) {
const locations = this.findLocationById(this.intersectionList, msgN[j].component_id); const locations = this.findLocationById(this.intersectionList, msgN[j].component_id);
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
let newSpeed = '-';
if ((msgN[j].speed && msgN[j].speed != -1) || msgN[j].speed === 0) {
newSpeed = Math.abs(msgN[j].speed);
}
// if (locations == '卡片区') { // if (locations == '卡片区') {
if (msgN[j].component_type == '车头时距') { if (msgN[j].component_type == '车头时距') {
// if (locations == '卡片区' || locations == '两个区都存在') { // if (locations == '卡片区' || locations == '两个区都存在') {
@ -2794,6 +2795,7 @@ export default {
); );
}); });
//表格数据 //表格数据
this.addOrUpdateArrayItem(this.tableData, { this.addOrUpdateArrayItem(this.tableData, {
name: msgN[j].name, name: msgN[j].name,
time: msgN[j].time, time: msgN[j].time,
@ -2801,7 +2803,7 @@ export default {
n_stay: msgN[j].n_stay, n_stay: msgN[j].n_stay,
n_queue: msgN[j].n_queue, n_queue: msgN[j].n_queue,
occ: msgN[j].occ, occ: msgN[j].occ,
speed: msgN[j].speed speed: newSpeed
}); });
// } // }
//卡片区 //卡片区
@ -2854,7 +2856,7 @@ export default {
n_stay: msgN[j].n_stay, n_stay: msgN[j].n_stay,
n_queue: msgN[j].n_queue, n_queue: msgN[j].n_queue,
occ: msgN[j].occ, occ: msgN[j].occ,
speed: msgN[j].speed speed: newSpeed
}); });
} else if (msgN[j].component_type == '速度') { } else if (msgN[j].component_type == '速度') {
//卡片区 //卡片区
@ -2873,7 +2875,7 @@ export default {
//图表区 //图表区
this.addOrUpdateArrayItem(this.triggerSpeedData, { this.addOrUpdateArrayItem(this.triggerSpeedData, {
time: msgN[j].time, time: msgN[j].time,
speed: msgN[j].speed, speed: newSpeed,
avg: msgN[j].avg, avg: msgN[j].avg,
max: msgN[j].max, max: msgN[j].max,
med: msgN[j].med, med: msgN[j].med,
@ -2895,7 +2897,7 @@ export default {
n_stay: msgN[j].n_stay, n_stay: msgN[j].n_stay,
n_queue: msgN[j].n_queue, n_queue: msgN[j].n_queue,
occ: msgN[j].occ, occ: msgN[j].occ,
speed: msgN[j].speed speed: newSpeed
}); });
} else if (msgN[j].component_type == '类型') { } else if (msgN[j].component_type == '类型') {
let map = { let map = {
@ -2939,7 +2941,7 @@ export default {
n_stay: msgN[j].n_stay, n_stay: msgN[j].n_stay,
n_queue: msgN[j].n_queue, n_queue: msgN[j].n_queue,
occ: msgN[j].occ, occ: msgN[j].occ,
speed: msgN[j].speed speed: newSpeed
}); });
} else if (msgN[j].component_type == '检测数') { } else if (msgN[j].component_type == '检测数') {
let map = { let map = {
@ -2980,7 +2982,7 @@ export default {
n_stay: msgN[j].n_stay, n_stay: msgN[j].n_stay,
n_queue: msgN[j].n_queue, n_queue: msgN[j].n_queue,
occ: msgN[j].occ, occ: msgN[j].occ,
speed: msgN[j].speed speed: newSpeed
}); });
} else if (msgN[j].component_type == '排队数') { } else if (msgN[j].component_type == '排队数') {
let map = { let map = {
@ -3016,7 +3018,7 @@ export default {
n_stay: msgN[j].n_stay, n_stay: msgN[j].n_stay,
n_queue: msgN[j].n_queue, n_queue: msgN[j].n_queue,
occ: msgN[j].occ, occ: msgN[j].occ,
speed: msgN[j].speed speed: newSpeed
}); });
} else if (msgN[j].component_type == 'OD') { } else if (msgN[j].component_type == 'OD') {
//图表区 //图表区
@ -3044,6 +3046,12 @@ export default {
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
console.log('固定时刻', msgN); console.log('固定时刻', msgN);
for (let j = 0; j < msgN.length; j++) { for (let j = 0; j < msgN.length; j++) {
const locations = this.findLocationById(this.intersectionList, msgN[j].component_id);
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
let newSpeed = '-';
if ((msgN[j].speed && msgN[j].speed != -1) || msgN[j].speed === 0) {
newSpeed = Math.abs(msgN[j].speed);
}
if (msgN[j].component_type == '车头时距') { if (msgN[j].component_type == '车头时距') {
//图表区数组加表格数据 //图表区数组加表格数据
let carTou = { let carTou = {
@ -3058,7 +3066,7 @@ export default {
n_stay: msgN[j].n_stay, n_stay: msgN[j].n_stay,
n_queue: msgN[j].n_queue, n_queue: msgN[j].n_queue,
occ: msgN[j].occ, occ: msgN[j].occ,
speed: msgN[j].speed speed: newSpeed
}; };
this.$nextTick(() => { this.$nextTick(() => {
this.timeDataCharts( this.timeDataCharts(
@ -3099,7 +3107,7 @@ export default {
//图表区 //图表区
let speedMap = { let speedMap = {
time: msgN[j].time, time: msgN[j].time,
speed: msgN[j].speed, speed: newSpeed,
avg: msgN[j].avg, avg: msgN[j].avg,
max: msgN[j].max, max: msgN[j].max,
med: msgN[j].med, med: msgN[j].med,
@ -3109,7 +3117,7 @@ export default {
n_stay: msgN[j].n_stay, n_stay: msgN[j].n_stay,
n_queue: msgN[j].n_queue, n_queue: msgN[j].n_queue,
occ: msgN[j].occ, occ: msgN[j].occ,
speed: msgN[j].speed speed: newSpeed
}; };
this.$nextTick(() => { this.$nextTick(() => {
this.timeDataCharts( this.timeDataCharts(
@ -3136,7 +3144,7 @@ export default {
//图表区 //图表区
let table = { let table = {
time: msgN[j].time, time: msgN[j].time,
speed: msgN[j].speed, speed: newSpeed,
avg: msgN[j].avg, avg: msgN[j].avg,
max: msgN[j].max, max: msgN[j].max,
med: msgN[j].med, med: msgN[j].med,
@ -3146,7 +3154,7 @@ export default {
n_stay: msgN[j].n_stay, n_stay: msgN[j].n_stay,
n_queue: msgN[j].n_queue, n_queue: msgN[j].n_queue,
occ: msgN[j].occ, occ: msgN[j].occ,
speed: msgN[j].speed speed: newSpeed
}; };
this.$nextTick(() => { this.$nextTick(() => {
this.timeDataCharts( this.timeDataCharts(
@ -3189,6 +3197,11 @@ export default {
console.log('固定间隔', msgN, this.topicVideoIdList[i].videoId); console.log('固定间隔', msgN, this.topicVideoIdList[i].videoId);
// this.cycleStatisticsData = msgN; // this.cycleStatisticsData = msgN;
for (let j = 0; j < msgN.length; j++) { for (let j = 0; j < msgN.length; j++) {
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
let newSpeed = '-';
if ((msgN[j].speed && msgN[j].speed != -1) || msgN[j].speed === 0) {
newSpeed = Math.abs(msgN[j].speed);
}
if (msgN[j].component_type == '车头时距') { if (msgN[j].component_type == '车头时距') {
//图表区数组加表格数据 //图表区数组加表格数据
let carTou = { let carTou = {
@ -3203,7 +3216,7 @@ export default {
n_stay: msgN[j].ave_stay, n_stay: msgN[j].ave_stay,
n_queue: msgN[j].ave_queue, n_queue: msgN[j].ave_queue,
occ: msgN[j].occ, occ: msgN[j].occ,
speed: msgN[j].speed speed: newSpeed
}; };
this.$nextTick(() => { this.$nextTick(() => {
this.cycleStatisticsDataCharts( this.cycleStatisticsDataCharts(
@ -3243,7 +3256,7 @@ export default {
//图表区 //图表区
let speedMap = { let speedMap = {
time: msgN[j].time, time: msgN[j].time,
speed: msgN[j].speed, speed: newSpeed,
avg: msgN[j].avg, avg: msgN[j].avg,
max: msgN[j].max, max: msgN[j].max,
med: msgN[j].med, med: msgN[j].med,
@ -3253,7 +3266,7 @@ export default {
ave_stay: msgN[j].ave_stay, ave_stay: msgN[j].ave_stay,
ave_queue: msgN[j].ave_queue, ave_queue: msgN[j].ave_queue,
occ: msgN[j].occ, occ: msgN[j].occ,
speed: msgN[j].speed speed: newSpeed
}; };
this.$nextTick(() => { this.$nextTick(() => {
this.cycleStatisticsDataCharts( this.cycleStatisticsDataCharts(
@ -3280,7 +3293,7 @@ export default {
//图表区 //图表区
let table = { let table = {
time: msgN[j].time, time: msgN[j].time,
speed: msgN[j].speed, speed: newSpeed,
avg: msgN[j].avg, avg: msgN[j].avg,
max: msgN[j].max, max: msgN[j].max,
med: msgN[j].med, med: msgN[j].med,
@ -3290,7 +3303,7 @@ export default {
ave_stay: msgN[j].ave_stay, ave_stay: msgN[j].ave_stay,
ave_queue: msgN[j].ave_queue, ave_queue: msgN[j].ave_queue,
occ: msgN[j].occ, occ: msgN[j].occ,
speed: msgN[j].speed speed: newSpeed
}; };
this.$nextTick(() => { this.$nextTick(() => {
this.cycleStatisticsDataCharts( this.cycleStatisticsDataCharts(
@ -3317,7 +3330,7 @@ export default {
flowMap flowMap
); );
}); });
//图表区
let table = { let table = {
time: msgN[j].time, time: msgN[j].time,
in_flow: msgN[j].in_flow, in_flow: msgN[j].in_flow,
@ -3327,7 +3340,7 @@ export default {
ave_stay: msgN[j].ave_stay, ave_stay: msgN[j].ave_stay,
ave_queue: msgN[j].ave_queue, ave_queue: msgN[j].ave_queue,
occ: msgN[j].occ, occ: msgN[j].occ,
speed: msgN[j].speed speed: newSpeed
}; };
this.$nextTick(() => { this.$nextTick(() => {
this.cycleStatisticsDataCharts( this.cycleStatisticsDataCharts(
@ -3363,7 +3376,7 @@ export default {
ave_stay: msgN[j].ave_stay, ave_stay: msgN[j].ave_stay,
ave_queue: msgN[j].ave_queue, ave_queue: msgN[j].ave_queue,
occ: msgN[j].occ, occ: msgN[j].occ,
speed: msgN[j].speed speed: newSpeed
}; };
this.$nextTick(() => { this.$nextTick(() => {
this.cycleStatisticsDataCharts( this.cycleStatisticsDataCharts(
@ -3395,7 +3408,7 @@ export default {
ave_stay: msgN[j].ave_stay, ave_stay: msgN[j].ave_stay,
ave_queue: msgN[j].ave_queue, ave_queue: msgN[j].ave_queue,
occ: msgN[j].occ, occ: msgN[j].occ,
speed: msgN[j].speed speed: newSpeed
}; };
this.$nextTick(() => { this.$nextTick(() => {
this.cycleStatisticsDataCharts( this.cycleStatisticsDataCharts(
@ -3427,7 +3440,7 @@ export default {
ave_stay: msgN[j].ave_stay, ave_stay: msgN[j].ave_stay,
ave_queue: msgN[j].ave_queue, ave_queue: msgN[j].ave_queue,
occ: msgN[j].occ, occ: msgN[j].occ,
speed: msgN[j].speed speed: newSpeed
}; };
this.$nextTick(() => { this.$nextTick(() => {
this.cycleStatisticsDataCharts( this.cycleStatisticsDataCharts(
@ -3457,6 +3470,122 @@ export default {
} }
} catch (error) {} } catch (error) {}
break; break;
case 'cycle_accumulate-' + this.topicVideoIdList[i].videoId:
try {
// 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('固定间隔cycle_accumulate', msgN);
// this.cycleStatisticsData = msgN;
for (let j = 0; j < msgN.length; j++) {
//处理speed正负值和-1，卡片区在html上处理了，数据源不做处理
let newSpeed = '-';
if ((msgN[j].speed && msgN[j].speed != -1) || msgN[j].speed === 0) {
newSpeed = Math.abs(msgN[j].speed);
}
if (msgN[j].component_type == '车头时距') {
//卡片区
let map = {
ave_headway: msgN[j].ave_headway,
time: msgN[j].time
};
this.$nextTick(() => {
this.updateValueByVideoIdAndCommentId(
this.intersectionList,
this.topicVideoIdList[i].videoId,
msgN[j].component_id,
map
);
});
} else if (msgN[j].component_type == '速度') {
//卡片区
let map = {
speed: msgN[j].speed,
time: msgN[j].time
};
this.$nextTick(() => {
this.updateValueByVideoIdAndCommentId(
this.intersectionList,
this.topicVideoIdList[i].videoId,
msgN[j].component_id,
map
);
});
} else if (msgN[j].component_type == '类型') {
//卡片区
let map = {
type_data: msgN[j].type_data,
time: msgN[j].time
};
this.$nextTick(() => {
this.updateValueByVideoIdAndCommentId(
this.intersectionList,
this.topicVideoIdList[i].videoId,
msgN[j].component_id,
map
);
});
} else if (msgN[j].component_type == '流量') {
//卡片区
let flowMap = {
inFlow: msgN[j].in_flow,
outFlow: msgN[j].out_flow,
time: msgN[j].time
};
this.$nextTick(() => {
this.updateValueByVideoIdAndCommentId(
this.intersectionList,
this.topicVideoIdList[i].videoId,
msgN[j].component_id,
flowMap
);
});
} else if (msgN[j].component_type == '检测数') {
let map = {
ave_stay: msgN[j].ave_stay,
time: msgN[j].time
};
this.$nextTick(() => {
this.updateValueByVideoIdAndCommentId(
this.intersectionList,
this.topicVideoIdList[i].videoId,
msgN[j].component_id,
map
);
});
} else if (msgN[j].component_type == '排队数') {
let map = {
ave_queue: msgN[j].ave_queue,
time: msgN[j].time
};
this.$nextTick(() => {
this.updateValueByVideoIdAndCommentId(
this.intersectionList,
this.topicVideoIdList[i].videoId,
msgN[j].component_id,
map
);
});
} else if (msgN[j].component_type == '延误') {
let map = {
ave_delay: msgN[j].ave_delay,
time: msgN[j].time
};
this.$nextTick(() => {
this.updateValueByVideoIdAndCommentId(
this.intersectionList,
this.topicVideoIdList[i].videoId,
msgN[j].component_id,
map
);
});
}
}
} catch (error) {}
break;
} }
} }
} }
@ -3472,7 +3601,7 @@ export default {
chartsPie, //饼图 chartsPie, //饼图
chartsBar, //柱状图 chartsBar, //柱状图
MeanValue, //均值图 MeanValue, //均值图
thermalOD //OD thermalOD, //OD
} }
}; };
</script> </script>
@ -3572,6 +3701,7 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
align-content: flex-start; align-content: flex-start;
overflow-y: auto;
.intersectionCardTitle { .intersectionCardTitle {
margin-top: 1%; margin-top: 1%;
width: 100%; width: 100%;
@ -3602,6 +3732,11 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.count {
height: 40px;
display: flex;
align-items: baseline;
}
.time { .time {
font-size: 12px; font-size: 12px;
display: flex; display: flex;