bug修改
This commit is contained in:
parent
8df24f5586
commit
41df993d20
|
|
@ -124,7 +124,11 @@ export default {
|
|||
// for (let i = 0; i < this.avg.length; i++) {
|
||||
// avgData = this.avg[i];
|
||||
// }
|
||||
let arr = this.dataList[0]||{}
|
||||
let arr = {};
|
||||
if(this.dataList&&this.dataList.length>0){
|
||||
arr = this.dataList[0]
|
||||
}
|
||||
|
||||
if (arr && Object.keys(arr).length > 0) {
|
||||
avgData = arr.avg ? Math.abs(arr.avg).toFixed(2) : 0;
|
||||
medData = arr.med ? Math.abs(arr.med).toFixed(2) : 0;
|
||||
|
|
@ -317,43 +321,43 @@ export default {
|
|||
}, 300);
|
||||
},
|
||||
watch: {
|
||||
// intersectionName: {
|
||||
// handler: function (oldValues, newValues) {
|
||||
// this.$nextTick(() => {
|
||||
// this.initEcharts();
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
// chatShowType: {
|
||||
// handler: function (oldValues, newValues) {
|
||||
// let that = this;
|
||||
// setTimeout(() => {
|
||||
// that.$nextTick(() => {
|
||||
// this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||
// if (this.chart == null) {
|
||||
// this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||
// }
|
||||
// that.initEcharts();
|
||||
// });
|
||||
// }, 300);
|
||||
// }
|
||||
// },
|
||||
// echartsRef: {
|
||||
// handler: function (newValues, oldValues) {
|
||||
// console.log('old', oldValues);
|
||||
// console.log('newV', newValues);
|
||||
// let that = this;
|
||||
// setTimeout(() => {
|
||||
// that.$nextTick(() => {
|
||||
// this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||
// if (this.chart == null) {
|
||||
// this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||
// }
|
||||
// that.initEcharts();
|
||||
// });
|
||||
// }, 300);
|
||||
// }
|
||||
// },
|
||||
intersectionName: {
|
||||
handler: function (oldValues, newValues) {
|
||||
this.$nextTick(() => {
|
||||
this.initEcharts();
|
||||
});
|
||||
}
|
||||
},
|
||||
chatShowType: {
|
||||
handler: function (oldValues, newValues) {
|
||||
let that = this;
|
||||
setTimeout(() => {
|
||||
that.$nextTick(() => {
|
||||
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||
if (this.chart == null) {
|
||||
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||
}
|
||||
that.initEcharts();
|
||||
});
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
echartsRef: {
|
||||
handler: function (newValues, oldValues) {
|
||||
// console.log('old', oldValues);
|
||||
// console.log('newV', newValues);
|
||||
let that = this;
|
||||
setTimeout(() => {
|
||||
that.$nextTick(() => {
|
||||
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||
if (this.chart == null) {
|
||||
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||
}
|
||||
that.initEcharts();
|
||||
});
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
dataList: {
|
||||
handler: function (newValues, oldValues) {
|
||||
// if(newValues&&newValues.length>0) {
|
||||
|
|
|
|||
|
|
@ -254,8 +254,8 @@ export default {
|
|||
},
|
||||
echartsRef: {
|
||||
handler: function (oldValues, newValues) {
|
||||
console.log('old', oldValues);
|
||||
console.log('newV', newValues);
|
||||
// console.log('old', oldValues);
|
||||
// console.log('newV', newValues);
|
||||
let that = this;
|
||||
setTimeout(() => {
|
||||
that.$nextTick(() => {
|
||||
|
|
|
|||
|
|
@ -277,15 +277,51 @@ export default {
|
|||
computed: {
|
||||
latestDataArr() {
|
||||
//最新一条数据
|
||||
let latestDataArr = {};
|
||||
if (this.dataArr && this.dataArr.length > 0) {
|
||||
let latestDataArr = _.cloneDeep(this.dataArr[0]);
|
||||
return latestDataArr;
|
||||
latestDataArr = _.cloneDeep(this.dataArr[0]);
|
||||
}
|
||||
if (this.cycleAccumulateData && this.cycleAccumulateData.length > 0) {
|
||||
let latestDataArr = _.cloneDeep(this.cycleAccumulateData[0]);
|
||||
return latestDataArr;
|
||||
latestDataArr = _.cloneDeep(this.cycleAccumulateData[0]);
|
||||
// console.log('周期统计最新一条卡片数据-',latestDataArr)
|
||||
}
|
||||
return {};
|
||||
if (!isNaN(latestDataArr.headway) && (latestDataArr.headway !== -1 || latestDataArr.headway === 0)) {
|
||||
latestDataArr.headway = latestDataArr.headway;
|
||||
} else {
|
||||
latestDataArr.headway = '-';
|
||||
}
|
||||
|
||||
if (!isNaN(latestDataArr.ave_headway) && (latestDataArr.ave_headway !== -1 || latestDataArr.ave_headway === 0)) {
|
||||
latestDataArr.ave_headway = latestDataArr.ave_headway;
|
||||
latestDataArr.headway = latestDataArr.ave_headway;
|
||||
} else {
|
||||
latestDataArr.ave_headway = '-';
|
||||
}
|
||||
|
||||
if (!isNaN(latestDataArr.n_stay) && (latestDataArr.n_stay !== -1 || latestDataArr.n_stay === 0)) {
|
||||
latestDataArr.n_stay = latestDataArr.n_stay;
|
||||
} else {
|
||||
latestDataArr.n_stay = '-';
|
||||
}
|
||||
if (!isNaN(latestDataArr.ave_stay) && (latestDataArr.ave_stay !== -1 || latestDataArr.ave_stay === 0)) {
|
||||
latestDataArr.n_stay = latestDataArr.ave_stay;
|
||||
latestDataArr.ave_stay = latestDataArr.ave_stay;
|
||||
} else {
|
||||
latestDataArr.ave_stay = '-';
|
||||
}
|
||||
|
||||
if (!isNaN(latestDataArr.n_queue) && (latestDataArr.n_queue !== -1 || latestDataArr.n_queue === 0)) {
|
||||
latestDataArr.n_queue = latestDataArr.n_queue;
|
||||
} else {
|
||||
latestDataArr.n_queue = '-';
|
||||
}
|
||||
if (!isNaN(latestDataArr.ave_queue) && (latestDataArr.ave_queue !== -1 || latestDataArr.ave_queue === 0)) {
|
||||
latestDataArr.n_queue = latestDataArr.ave_queue;
|
||||
latestDataArr.ave_queue = latestDataArr.ave_queue;
|
||||
} else {
|
||||
latestDataArr.ave_queue = '-';
|
||||
}
|
||||
return latestDataArr;
|
||||
},
|
||||
newDataArr() {
|
||||
if (this.dataArr && this.dataArr.length > 0) {
|
||||
|
|
@ -307,7 +343,7 @@ export default {
|
|||
item.speed = '-';
|
||||
}
|
||||
|
||||
if (!isNaN(item.flow) && (item.headway !== -1 || item.headway === 0)) {
|
||||
if (!isNaN(item.flow) && (item.flow !== -1 || item.flow === 0)) {
|
||||
item.flow = item.flow;
|
||||
} else {
|
||||
item.flow = '-';
|
||||
|
|
@ -319,11 +355,24 @@ export default {
|
|||
item.headway = '-';
|
||||
}
|
||||
|
||||
if (!isNaN(item.ave_headway) && (item.ave_headway !== -1 || item.ave_headway === 0)) {
|
||||
item.ave_headway = item.ave_headway;
|
||||
item.headway = item.ave_headway;
|
||||
} else {
|
||||
item.ave_headway = '-';
|
||||
}
|
||||
|
||||
if (!isNaN(item.n_stay) && (item.n_stay !== -1 || item.n_stay === 0)) {
|
||||
item.n_stay = item.n_stay;
|
||||
} else {
|
||||
item.n_stay = '-';
|
||||
}
|
||||
if (!isNaN(item.ave_stay) && (item.ave_stay !== -1 || item.ave_stay === 0)) {
|
||||
item.n_stay = item.ave_stay;
|
||||
item.ave_stay = item.ave_stay;
|
||||
} else {
|
||||
item.ave_stay = '-';
|
||||
}
|
||||
|
||||
if (!isNaN(item.n_queue) && (item.n_queue !== -1 || item.n_queue === 0)) {
|
||||
item.n_queue = item.n_queue;
|
||||
|
|
@ -332,6 +381,7 @@ export default {
|
|||
}
|
||||
if (!isNaN(item.ave_queue) && (item.ave_queue !== -1 || item.ave_queue === 0)) {
|
||||
item.n_queue = item.ave_queue;
|
||||
item.ave_queue = item.ave_queue;
|
||||
} else {
|
||||
item.ave_queue = '-';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,6 +81,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import _ from 'lodash';
|
||||
import newtypeChart from '../../components/target/newtypeChart.vue';
|
||||
// import {mapMutation} from 'vuex'
|
||||
import { getComponentSection } from '../../api/index';
|
||||
|
|
@ -179,7 +180,7 @@ export default {
|
|||
// }, 3000);
|
||||
},
|
||||
//点击数据看板tab会执行获取所有配置的组件
|
||||
getNew() {
|
||||
getNew(getHistory) {
|
||||
this.loading = true;
|
||||
getComponentSection({ VideoId: this.$route.query.id, Number: 10 })
|
||||
.then((res) => {
|
||||
|
|
@ -187,6 +188,12 @@ export default {
|
|||
//console.log(res.data.data, '组件的数据');
|
||||
this.componentList = res.data.data;
|
||||
this.siftData();
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (this.$route.query.type == '离线视频' && getHistory) {
|
||||
getHistory();
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
|
|
@ -235,13 +242,14 @@ export default {
|
|||
// console.log('折叠面板-', this.acticveName);
|
||||
},
|
||||
updateSectionData(newVal, updateKey, timeMode) {
|
||||
let tempNewVal = _.cloneDeep(newVal);
|
||||
this.sectionData.forEach((item) => {
|
||||
//item.title == val.combinationName
|
||||
if (item.children && item.children.length > 0) {
|
||||
item.children.forEach((cItem) => {
|
||||
if (cItem.timeMode == timeMode) {
|
||||
//找出对应timeMode的mqtt数据
|
||||
newVal.forEach((nItem) => {
|
||||
tempNewVal.forEach((nItem) => {
|
||||
if (cItem.analogAreaComponentId == nItem.component_id) {
|
||||
if (cItem[updateKey].length > 9) {
|
||||
this.$set(cItem, updateKey, cItem[updateKey].slice(0, 9));
|
||||
|
|
@ -265,6 +273,28 @@ export default {
|
|||
});
|
||||
this.$forceUpdate();
|
||||
// console.log('sectionData', this.sectionData);
|
||||
},
|
||||
//过滤重复的 time 字段，保留每个 time 最后一个对象
|
||||
filteredArrayFun(originalArray) {
|
||||
// 过滤重复的 time 字段
|
||||
let uniqueArray = originalArray.reduce((accumulator, currentValue) => {
|
||||
const existingItemIndex = accumulator.findIndex((item) => item.time === currentValue.time);
|
||||
|
||||
if (existingItemIndex === -1) {
|
||||
accumulator.push(currentValue);
|
||||
}
|
||||
|
||||
return accumulator;
|
||||
}, []);
|
||||
|
||||
// 按照时间从小到大排序
|
||||
const sortedArray = uniqueArray.sort((a, b) => {
|
||||
const dateA = new Date(a.time);
|
||||
const dateB = new Date(b.time);
|
||||
return dateA - dateB;
|
||||
});
|
||||
|
||||
return sortedArray;
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
|
|
@ -278,21 +308,25 @@ export default {
|
|||
cycleHistoryData: {
|
||||
handler(newVal) {
|
||||
// debugger
|
||||
// console.log('历史cycleHistoryData-', newVal);
|
||||
console.log('历史cycleHistoryData-', newVal);
|
||||
//该主题只会有固定间隔和固定时刻数据
|
||||
if (newVal && this.sectionData.length > 0) {
|
||||
//更新sectionData对应的analogAreaComponentId和timeMode更新数据
|
||||
if (newVal.CycleStatisticsData && newVal.CycleStatisticsData.length > 0) {
|
||||
newVal.CycleStatisticsData.forEach((ele) => {
|
||||
if (ele.cycleStatisticsData && ele.cycleStatisticsData.length > 0) {
|
||||
this.updateSectionData(ele.cycleStatisticsData, 'cycleStatisticsData', '固定间隔');
|
||||
//按照时间从小到大排序
|
||||
let cycleStatisticsData = this.filteredArrayFun(ele.cycleStatisticsData);
|
||||
this.updateSectionData(cycleStatisticsData, 'cycleStatisticsData', '固定间隔');
|
||||
}
|
||||
});
|
||||
}
|
||||
if (newVal.cycleTimeData && newVal.cycleTimeData.length > 0) {
|
||||
newVal.cycleTimeData.forEach((ele) => {
|
||||
if (newVal.CycleTimeData && newVal.CycleTimeData.length > 0) {
|
||||
newVal.CycleTimeData.forEach((ele) => {
|
||||
if (ele.cycleTimeData && ele.cycleTimeData.length > 0) {
|
||||
this.updateSectionData(ele.cycleTimeData, 'cycleTimeData', '固定时刻');
|
||||
//按照时间从小到大排序
|
||||
let cycleTimeData = this.filteredArrayFun(ele.cycleTimeData);
|
||||
this.updateSectionData(cycleTimeData, 'cycleTimeData', '固定时刻');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -305,8 +339,6 @@ export default {
|
|||
triggerListData: {
|
||||
handler(newVal) {
|
||||
// console.log('实时触发triggerListData-', newVal);
|
||||
//this.triggerList = newVal; //目前看用不到这个数组
|
||||
// 触发数据
|
||||
if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
|
||||
//更新sectionData对应的analogAreaComponentId和timeMode更新trigger数据
|
||||
this.updateSectionData(newVal, 'trigger', '实时触发');
|
||||
|
|
@ -319,7 +351,7 @@ export default {
|
|||
cycleTimeData: {
|
||||
handler(newVal) {
|
||||
// 监听到打印固定时刻数据
|
||||
// console.log(newVal, '固定时刻数据');
|
||||
// console.log('固定时刻数据cycleTimeData-', newVal);
|
||||
if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
|
||||
this.updateSectionData(newVal, 'cycleTimeData', '固定时刻');
|
||||
}
|
||||
|
|
@ -330,7 +362,7 @@ export default {
|
|||
//固定间隔
|
||||
cycleStatisticsData: {
|
||||
handler(newVal) {
|
||||
// console.log('固定间隔', newVal);
|
||||
// console.log('固定间隔cycleStatisticsData', newVal);
|
||||
if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
|
||||
this.updateSectionData(newVal, 'cycleStatisticsData', '固定间隔');
|
||||
}
|
||||
|
|
@ -341,13 +373,14 @@ export default {
|
|||
//周期统计实时累计数据主题
|
||||
cycleAccumulateData: {
|
||||
handler(newVal) {
|
||||
// console.log('周期统计实时累计数据主题', newVal);
|
||||
// console.log('周期统计实时累计数据主题cycleAccumulateData-', newVal);
|
||||
if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
|
||||
//实时累计数据主题 只需要覆盖固定间隔主题的卡片数据，图表数据不需要更新
|
||||
this.updateSectionData(newVal, 'cycleAccumulateData', '固定间隔');
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1059,16 +1059,19 @@ export default {
|
|||
},
|
||||
// 数据看板的标签点击
|
||||
handleClick: function (tab, event) {
|
||||
var that = this;
|
||||
if (tab._props.name == 'second') {
|
||||
that.$nextTick(() => {
|
||||
//
|
||||
that.$refs.dataBoardRef.getNew();
|
||||
this.$nextTick(() => {
|
||||
if (this.$route.query.type == '离线视频') {
|
||||
this.$refs.dataBoardRef.getNew(this.getHistory);
|
||||
} else {
|
||||
this.$refs.dataBoardRef.getNew();
|
||||
}
|
||||
// this.$refs.dataBoardRef.getNew(this.getHistory);
|
||||
// setTimeout(() => {
|
||||
// debugger
|
||||
// this.getHistory()
|
||||
// }, 10000);
|
||||
this.getHistory();
|
||||
// this.getHistory();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
@ -1100,9 +1103,9 @@ export default {
|
|||
];
|
||||
window.PubScribe(this.topicSends, '001', this.realInfo);
|
||||
this.timer1 = null;
|
||||
this.timer1 = setTimeout(() => {
|
||||
this.getHistory();
|
||||
}, 5000);
|
||||
// this.timer1 = setTimeout(() => {
|
||||
// this.getHistory();
|
||||
// }, 5000);
|
||||
} else if (this.$route.query.type == '实时视频') {
|
||||
this.topicSends = [
|
||||
'stream' + this.number,
|
||||
|
|
@ -1244,6 +1247,7 @@ export default {
|
|||
},
|
||||
//获取离线视频固定时刻固定间隔
|
||||
getHistory() {
|
||||
console.log('执行获取离线视频固定时刻固定间隔主题')
|
||||
window.publish('GetCycleHistory', 'Get-' + this.$route.query.id);
|
||||
},
|
||||
getZhuanFaMQTT(topic, msg) {
|
||||
|
|
@ -1525,7 +1529,7 @@ export default {
|
|||
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
|
||||
var detId = [];
|
||||
const msgN = JSON.parse(temp);
|
||||
//console.log('历史数据', msgN);
|
||||
console.log('历史数据源头', msgN);
|
||||
this.cycleHistoryData = msgN;
|
||||
} catch (error) {}
|
||||
break;
|
||||
|
|
@ -2561,7 +2565,7 @@ export default {
|
|||
dataBoard
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearTimeout(this.timer1);
|
||||
// clearTimeout(this.timer1);
|
||||
clearTimeout(this.timer2);
|
||||
clearTimeout(this.timer3);
|
||||
clearTimeout(this.timer4);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
<template>
|
||||
<div class="content-box">
|
||||
<div class="content-box" v-loading="loading" v-if="offlineVideo">
|
||||
<div class="container offlineVideo" v-if="!loading">
|
||||
<!-- TODO -->
|
||||
<!-- <player></player> -->
|
||||
<el-empty description="此模块只支持实时视频分析"></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="content-box" v-loading="loading">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item title="监控列表" name="1">
|
||||
<el-row>
|
||||
|
|
@ -601,7 +608,7 @@
|
|||
class="buttonList"
|
||||
@change="changeChat(o.children, o.selectOption)"
|
||||
>
|
||||
<el-radio-button :label="m + 1" v-for="(n, m) in o.children" :key="m"></el-radio-button>
|
||||
<el-radio-button v-for="(n, m) in o.children" :label="m + 1" :key="m"></el-radio-button>
|
||||
</el-radio-group>
|
||||
<!--初始化渲染图表-->
|
||||
<div class="echartList">
|
||||
|
|
@ -615,11 +622,6 @@
|
|||
{{ e.name }}
|
||||
</div>
|
||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
|
||||
<el-empty
|
||||
:image-size="100"
|
||||
description="暂无数据"
|
||||
v-if="e.triggerDataList == null"
|
||||
></el-empty>
|
||||
<chartsLine
|
||||
:echartsRef="'echartsLine' + e.duocgqrhpzId"
|
||||
:itemData="e"
|
||||
|
|
@ -631,15 +633,11 @@
|
|||
:flowType="e.flowType"
|
||||
:dataList="e.triggerDataList"
|
||||
ref="chartsLine"
|
||||
v-else-if="e.triggerDataList != null"
|
||||
v-if="e.triggerDataList"
|
||||
/>
|
||||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||||
</div>
|
||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||||
<el-empty
|
||||
:image-size="100"
|
||||
description="暂无数据"
|
||||
v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
|
||||
></el-empty>
|
||||
<chartsLine
|
||||
:echartsRef="'echartsLine' + e.duocgqrhpzId"
|
||||
:itemData="e"
|
||||
|
|
@ -650,15 +648,11 @@
|
|||
:componentType="e.componentType"
|
||||
:dataList="e.cycleTimeData"
|
||||
:flowType="e.flowType"
|
||||
v-else
|
||||
v-if="e.cycleTimeData"
|
||||
/>
|
||||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||||
</div>
|
||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
||||
<el-empty
|
||||
:image-size="100"
|
||||
description="暂无数据"
|
||||
v-if="e.cycleStatisticsData == null || e.cycleStatisticsData.length == 0"
|
||||
></el-empty>
|
||||
<chartsLine
|
||||
:echartsRef="'echartsLine' + e.duocgqrhpzId"
|
||||
style="width: 100%; height: 100%"
|
||||
|
|
@ -669,8 +663,9 @@
|
|||
:componentType="e.componentType"
|
||||
:dataList="e.cycleStatisticsData"
|
||||
:flowType="e.flowType"
|
||||
v-else
|
||||
v-if="e.cycleStatisticsData"
|
||||
/>
|
||||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -794,11 +789,6 @@
|
|||
{{ e.name }}
|
||||
</div>
|
||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
|
||||
<el-empty
|
||||
:image-size="100"
|
||||
description="暂无数据"
|
||||
v-if="!e.triggerDataList || e.triggerDataList.length == 0"
|
||||
></el-empty>
|
||||
<chartsPie
|
||||
:echartsRef="'echartsPie' + e.duocgqrhpzId"
|
||||
style="width: 100%; height: 100%"
|
||||
|
|
@ -806,15 +796,11 @@
|
|||
:dataList="e.triggerDataList"
|
||||
:timeMode="'实时触发'"
|
||||
:intersectionName="intersectionName"
|
||||
v-else
|
||||
v-if="e.triggerDataList"
|
||||
/>
|
||||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||||
</div>
|
||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||||
<el-empty
|
||||
:image-size="100"
|
||||
description="暂无数据"
|
||||
v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
|
||||
></el-empty>
|
||||
<chartsPie
|
||||
:echartsRef="'echartsPie' + e.duocgqrhpzId"
|
||||
style="width: 100%; height: 100%"
|
||||
|
|
@ -822,15 +808,11 @@
|
|||
:dataList="e.cycleTimeData"
|
||||
:timeMode="'固定时刻'"
|
||||
:intersectionName="intersectionName"
|
||||
v-else
|
||||
v-if="e.cycleTimeData"
|
||||
/>
|
||||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||||
</div>
|
||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
||||
<el-empty
|
||||
:image-size="100"
|
||||
description="暂无数据"
|
||||
v-if="e.cycleStatisticsData.length == 0 || e.cycleStatisticsData.length == null"
|
||||
></el-empty>
|
||||
<chartsPie
|
||||
:echartsRef="'echartsPie' + e.duocgqrhpzId"
|
||||
style="width: 100%; height: 100%"
|
||||
|
|
@ -838,8 +820,9 @@
|
|||
:timeMode="'固定间隔'"
|
||||
:dataList="e.cycleStatisticsData"
|
||||
:intersectionName="intersectionName"
|
||||
v-else
|
||||
v-if="e.cycleStatisticsData"
|
||||
/>
|
||||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -851,11 +834,6 @@
|
|||
{{ e.name }}
|
||||
</div>
|
||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
|
||||
<el-empty
|
||||
:image-size="100"
|
||||
description="暂无数据"
|
||||
v-if="!e.triggerDataList || e.triggerDataList.length == 0"
|
||||
></el-empty>
|
||||
<chartsBar
|
||||
:echartsRef="'echartsBar' + e.duocgqrhpzId"
|
||||
style="width: 100%; height: 90%"
|
||||
|
|
@ -863,15 +841,11 @@
|
|||
:timeMode="'实时触发'"
|
||||
:intersectionName="intersectionName"
|
||||
:dataList="e.triggerDataList"
|
||||
v-else
|
||||
v-if="e.triggerDataList"
|
||||
/>
|
||||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||||
</div>
|
||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||||
<el-empty
|
||||
:image-size="100"
|
||||
description="暂无数据"
|
||||
v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
|
||||
></el-empty>
|
||||
<chartsBar
|
||||
:echartsRef="'echartsBar' + e.duocgqrhpzId"
|
||||
style="width: 100%; height: 100%"
|
||||
|
|
@ -879,15 +853,11 @@
|
|||
:dataList="e.cycleTimeData"
|
||||
:timeMode="'固定时刻'"
|
||||
:intersectionName="intersectionName"
|
||||
v-else
|
||||
v-if="e.cycleTimeData"
|
||||
/>
|
||||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||||
</div>
|
||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
||||
<el-empty
|
||||
:image-size="100"
|
||||
description="暂无数据"
|
||||
v-if="e.cycleStatisticsData.length == 0 || e.cycleStatisticsData.length == null"
|
||||
></el-empty>
|
||||
<chartsBar
|
||||
:echartsRef="'echartsBar' + e.duocgqrhpzId"
|
||||
style="width: 100%; height: 100%"
|
||||
|
|
@ -895,8 +865,9 @@
|
|||
:chatShowType="chatShowType"
|
||||
:dataList="e.cycleStatisticsData"
|
||||
:intersectionName="intersectionName"
|
||||
v-else
|
||||
v-if="e.cycleStatisticsData"
|
||||
/>
|
||||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -908,49 +879,37 @@
|
|||
{{ e.name }}
|
||||
</div>
|
||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
|
||||
<el-empty
|
||||
:image-size="100"
|
||||
description="暂无数据"
|
||||
v-if="!e.triggerDataList || e.triggerDataList.length == 0"
|
||||
></el-empty>
|
||||
<meanValue
|
||||
:echartsRef="'meanValue' + e.duocgqrhpzId"
|
||||
style="width: 100%; height: 90%"
|
||||
:chatShowType="chatShowType"
|
||||
:intersectionName="intersectionName"
|
||||
:dataList="e.triggerDataList"
|
||||
v-else
|
||||
v-if="e.triggerDataList"
|
||||
/>
|
||||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||||
</div>
|
||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||||
<el-empty
|
||||
:image-size="100"
|
||||
description="暂无数据"
|
||||
v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
|
||||
></el-empty>
|
||||
<meanValue
|
||||
:echartsRef="'meanValue' + e.duocgqrhpzId"
|
||||
style="width: 100%; height: 100%"
|
||||
:chatShowType="chatShowType"
|
||||
:dataList="e.cycleTimeData"
|
||||
:intersectionName="intersectionName"
|
||||
v-else
|
||||
v-if="e.cycleTimeData"
|
||||
/>
|
||||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||||
</div>
|
||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
||||
<el-empty
|
||||
:image-size="100"
|
||||
description="暂无数据"
|
||||
v-if="e.cycleStatisticsData.length == 0 || e.cycleStatisticsData.length == null"
|
||||
></el-empty>
|
||||
<meanValue
|
||||
:echartsRef="'meanValue' + e.duocgqrhpzId"
|
||||
style="width: 100%; height: 100%"
|
||||
:chatShowType="chatShowType"
|
||||
:dataList="e.cycleStatisticsData"
|
||||
:intersectionName="intersectionName"
|
||||
v-else
|
||||
v-if="e.cycleStatisticsData"
|
||||
/>
|
||||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -962,11 +921,6 @@
|
|||
{{ e.name }}
|
||||
</div>
|
||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
|
||||
<el-empty
|
||||
:image-size="100"
|
||||
description="暂无数据"
|
||||
v-if="!e.triggerDataList || e.triggerDataList.length == 0"
|
||||
></el-empty>
|
||||
<thermalOD
|
||||
:echartsRef="'thermalOD' + e.duocgqrhpzId"
|
||||
style="width: 100%; height: 90%"
|
||||
|
|
@ -977,15 +931,11 @@
|
|||
:endName="e.endSectionNames"
|
||||
:dataList="e.triggerDataList"
|
||||
:intersectionName="intersectionName"
|
||||
v-else
|
||||
v-if="e.triggerDataList"
|
||||
/>
|
||||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||||
</div>
|
||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'">
|
||||
<el-empty
|
||||
:image-size="100"
|
||||
description="暂无数据"
|
||||
v-if="e.cycleTimeData.length == 0 || e.cycleTimeData.length == null"
|
||||
></el-empty>
|
||||
<thermalOD
|
||||
:echartsRef="'thermalOD' + e.duocgqrhpzId"
|
||||
style="width: 100%; height: 100%"
|
||||
|
|
@ -996,15 +946,11 @@
|
|||
:endName="e.endSectionNames"
|
||||
:dataList="e.cycleTimeData"
|
||||
:intersectionName="intersectionName"
|
||||
v-else
|
||||
v-if="e.cycleTimeData"
|
||||
/>
|
||||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||||
</div>
|
||||
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'">
|
||||
<el-empty
|
||||
:image-size="100"
|
||||
description="暂无数据"
|
||||
v-if="e.cycleStatisticsData.length == 0 || e.cycleStatisticsData.length == null"
|
||||
></el-empty>
|
||||
<thermalOD
|
||||
:echartsRef="'thermalOD' + e.duocgqrhpzId"
|
||||
style="width: 100%; height: 100%"
|
||||
|
|
@ -1015,8 +961,9 @@
|
|||
:endName="e.endSectionNames"
|
||||
:dataList="e.cycleStatisticsData"
|
||||
:intersectionName="intersectionName"
|
||||
v-else
|
||||
v-if="e.cycleStatisticsData"
|
||||
/>
|
||||
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1378,6 +1325,7 @@
|
|||
|
||||
<script>
|
||||
let id = 1000;
|
||||
// import player from './player.vue';
|
||||
import chartsLine from '@/components/sensorFusion/echartsLine.vue';
|
||||
import chartsPie from '@/components/sensorFusion/echartsPie.vue';
|
||||
import chartsBar from '@/components/sensorFusion/echartsBar.vue';
|
||||
|
|
@ -1397,11 +1345,13 @@ import {
|
|||
getAssembly, // 获取多传感器融合
|
||||
getSelectedComponent //获取已选的组件数据接口
|
||||
} from '@/api/sensorFusion.js';
|
||||
import { getVideoMode } from '@/api/index';
|
||||
import qs from 'qs';
|
||||
export default {
|
||||
name: 'sensorFusion',
|
||||
data() {
|
||||
return {
|
||||
offlineVideo: true,
|
||||
checkList: [],
|
||||
defaultExpanded: [], //默认展示数组
|
||||
checkDataList: [],
|
||||
|
|
@ -1420,6 +1370,7 @@ export default {
|
|||
activeNames: ['1'], // 视频折叠
|
||||
intersectionName: [], //数据分析名称
|
||||
videoList: [],
|
||||
loading: false,
|
||||
intersectionList: [],
|
||||
tabPosition: '1',
|
||||
threeData: [],
|
||||
|
|
@ -1526,6 +1477,9 @@ export default {
|
|||
disabledCheckList: [] //tree不可选数组
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getVideoType();
|
||||
},
|
||||
mounted() {
|
||||
//获取视频列表
|
||||
this.getRealTimeShipjk();
|
||||
|
|
@ -1533,6 +1487,20 @@ export default {
|
|||
this.getSensorFusionData();
|
||||
},
|
||||
methods: {
|
||||
//获取视频源类型
|
||||
getVideoType() {
|
||||
this.loading = true;
|
||||
getVideoMode()
|
||||
.then((res) => {
|
||||
//console.log('res', res.data.data);
|
||||
if (res.data.data && res.data.data == '实时视频') {
|
||||
this.offlineVideo = false;
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
//类型数据累计
|
||||
getTotal(arr, field, field2) {
|
||||
let total = 0;
|
||||
|
|
@ -1566,35 +1534,35 @@ export default {
|
|||
},
|
||||
//获取多融合传感器融合数据
|
||||
getSensorFusionData() {
|
||||
this.loading = true;
|
||||
getAssembly({
|
||||
Number: 10
|
||||
}).then((res) => {
|
||||
this.intersectionList = res.data.data || [];
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data.data && res.data.data.length > 0) {
|
||||
this.intersectionList = this.addSelectOptionField(res.data.data) || [];
|
||||
// this.addSelectOptionField(this.intersectionList);
|
||||
// this.addTriggerDataField(this.intersectionList);
|
||||
//mqtt订阅
|
||||
this.$nextTick(() => {
|
||||
this.getMqtt();
|
||||
});
|
||||
|
||||
this.addSelectOptionField(this.intersectionList);
|
||||
// this.addTriggerDataField(this.intersectionList);
|
||||
//mqtt订阅
|
||||
this.$nextTick(() => {
|
||||
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];
|
||||
//console.log(this.intersectionList, 'this.intersectionList');
|
||||
//开发路口默认展开第一个
|
||||
this.$nextTick(() => {
|
||||
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) {
|
||||
// this.intersectionName.push(this.intersectionList[i].children[j].name);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// //console.log(this.intersectionName, 'intersectionName');
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
//每个都添加option
|
||||
addSelectOptionField(obj) {
|
||||
|
|
@ -1611,6 +1579,7 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
addTriggerDataField(obj) {
|
||||
if (Array.isArray(obj)) {
|
||||
|
|
@ -2339,6 +2308,9 @@ export default {
|
|||
|
||||
//单选按钮选择事件
|
||||
changeChat(val, index) {
|
||||
console.log('changeChat');
|
||||
console.log(val);
|
||||
console.log(index);
|
||||
this.chatShowType = '';
|
||||
this.$nextTick(() => {
|
||||
this.chatShowType = val[index - 1].presentationForm;
|
||||
|
|
@ -2375,7 +2347,8 @@ export default {
|
|||
//确认按钮
|
||||
addSuccess() {
|
||||
this.centerDialogVisible = false;
|
||||
this.getSensorFusionData();
|
||||
// this.getSensorFusionData();
|
||||
this.$router.go(0);
|
||||
},
|
||||
//tab切换事件
|
||||
tabChange(val) {
|
||||
|
|
@ -2842,9 +2815,9 @@ export default {
|
|||
// });
|
||||
} else if (msgN[j].component_type == '速度') {
|
||||
// if(msgN[j].component_name=='速度_3'){
|
||||
// console.log('实时触发trigger-速度', msgN[j]);
|
||||
// console.log('实时触发trigger-速度', msgN[j]);
|
||||
// }
|
||||
|
||||
|
||||
//卡片区
|
||||
let map = {
|
||||
speed: msgN[j].speed,
|
||||
|
|
@ -3797,13 +3770,19 @@ export default {
|
|||
MeanValue, //均值图
|
||||
thermalOD, //OD
|
||||
tableShow,
|
||||
regionTable
|
||||
regionTable,
|
||||
// player
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.content-box {
|
||||
.offlineVideo{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/deep/ .el-collapse-item__header {
|
||||
color: rgb(71, 161, 255);
|
||||
padding: 0px 1%;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<div>
|
||||
<jsmpeg-player :url="url" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { JSMpegPlayer } from 'vue-jsmpeg-player';
|
||||
import 'vue-jsmpeg-player/dist/style.css';
|
||||
export default {
|
||||
components: {
|
||||
[JSMpegPlayer.name]: JSMpegPlayer
|
||||
},
|
||||
name: 'player',
|
||||
data() {
|
||||
return {
|
||||
url: 'ws://localhost:8089/xxx',
|
||||
socket: null,
|
||||
messages: [],
|
||||
connected: '',
|
||||
inputMessage: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
const socket = new WebSocket('ws://localhost:3001');
|
||||
socket.onopen = function () {
|
||||
//连接建立时触发
|
||||
console.log('已连接到WebSocket服务器');
|
||||
this.connected = true;
|
||||
};
|
||||
socket.onmessage = function (event) {
|
||||
// 客户端接收服务端数据时触发
|
||||
console.log('收到消息:', event.data);
|
||||
this.messages.push({ id: Date.now(), text: event.data });
|
||||
};
|
||||
socket.onclose = function () {
|
||||
// 连接关闭时触发
|
||||
console.log('WebSocket连接已关闭');
|
||||
this.connected = false;
|
||||
};
|
||||
socket.onerror = function () {
|
||||
// 通信发生错误时触发
|
||||
console.log('WebSocket通信发生错误');
|
||||
};
|
||||
this.socket = socket;
|
||||
},
|
||||
//发送消息
|
||||
sendMessage() {
|
||||
if (this.socket && this.inputMessage) {
|
||||
//使用连接发送数据
|
||||
this.socket.send(this.inputMessage);
|
||||
this.inputMessage = '';
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.init();
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.socket) {
|
||||
//关闭连接
|
||||
this.socket.close();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
</style>
|
||||
Loading…
Reference in New Issue