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);
}
}
//检测器目标数量
function getTargetNumber(string){
if(unity!=null){
unity.SendMessage('GameManager', 'UnityUpdateTargetNumber', string);
}
}
//编辑组件名称传名称
function editComponent(data){
// type,id

8
public/flv/index.html
View File

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

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

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

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

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

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

@ -14,7 +14,9 @@
<div>
<span style="font-size: 15px">{{ n.name }}</span
><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> -->
</div>
<div>
@ -26,68 +28,157 @@
</div>
</div>
<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 == '类型'">
<span style="font-size: 15px">类型数量总和</span><br />
<span style="font-size: 30px; font-weight: bold">
{{ getTotal(newDataArr) }}
{{ getTotal(cycleAccumulateDataArr) }}
</span>
</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: 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">
{{
newDataArr[0].speed > 0 || newDataArr[0].speed == 0
? newDataArr[0].speed
: Math.abs(newDataArr[0].speed)
}}
<span
v-if="
(cycleAccumulateDataArr[0].speed && cycleAccumulateDataArr[0].speed != -1) ||
cycleAccumulateDataArr[0].speed === 0
"
>
{{ Math.abs(cycleAccumulateDataArr[0].speed) }}
</span>
<span v-else>-</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
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>
</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: 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 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
: '-'
cycleAccumulateDataArr[0].headway || cycleAccumulateDataArr[0].headway === 0
? cycleAccumulateDataArr[0].headway == -1
? ' - '
: cycleAccumulateDataArr[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: 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 : '-'
cycleAccumulateDataArr[0].n_stay || cycleAccumulateDataArr[0].n_stay === 0
? cycleAccumulateDataArr[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 : '-'
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 style="font-size: 20px; font-weight: 200">秒</span>
</div>
@ -231,16 +322,44 @@ export default {
valueShow: {},
//排队数
queue: '',
newDataArr: []
newDataArr: [],
cycleAccumulateDataArr: [] //周期统计实时累计数据-只改数值
};
},
created() {},
methods: {
// 计算类型数量的总和
getDataArr(val) {
console.log('getDataArr', val);
this.newDataArr = val;
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) {
if (this.title == '类型') {
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

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

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

80
src/views/index.vue
View File

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

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

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