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

bug修改

This commit is contained in:
qiudan 2023-11-30 16:18:53 +08:00
parent 8df24f5586
commit 41df993d20
7 changed files with 330 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -124,7 +124,11 @@ export default {
// for (let i = 0; i < this.avg.length; i++) { // for (let i = 0; i < this.avg.length; i++) {
// avgData = this.avg[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) { if (arr && Object.keys(arr).length > 0) {
avgData = arr.avg ? Math.abs(arr.avg).toFixed(2) : 0; avgData = arr.avg ? Math.abs(arr.avg).toFixed(2) : 0;
medData = arr.med ? Math.abs(arr.med).toFixed(2) : 0; medData = arr.med ? Math.abs(arr.med).toFixed(2) : 0;
@ -317,43 +321,43 @@ export default {
}, 300); }, 300);
}, },
watch: { watch: {
// intersectionName: { intersectionName: {
// handler: function (oldValues, newValues) { handler: function (oldValues, newValues) {
// this.$nextTick(() => { this.$nextTick(() => {
// this.initEcharts(); this.initEcharts();
// }); });
// } }
// }, },
// chatShowType: { chatShowType: {
// handler: function (oldValues, newValues) { handler: function (oldValues, newValues) {
// let that = this; let that = this;
// setTimeout(() => { setTimeout(() => {
// that.$nextTick(() => { that.$nextTick(() => {
// this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef)); this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
// if (this.chart == null) { if (this.chart == null) {
// this.chart = this.$echarts.init(document.getElementById(this.echartsRef)); this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
// } }
// that.initEcharts(); that.initEcharts();
// }); });
// }, 300); }, 300);
// } }
// }, },
// echartsRef: { echartsRef: {
// handler: function (newValues, oldValues) { handler: function (newValues, oldValues) {
// console.log('old', oldValues); // console.log('old', oldValues);
// console.log('newV', newValues); // console.log('newV', newValues);
// let that = this; let that = this;
// setTimeout(() => { setTimeout(() => {
// that.$nextTick(() => { that.$nextTick(() => {
// this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef)); this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
// if (this.chart == null) { if (this.chart == null) {
// this.chart = this.$echarts.init(document.getElementById(this.echartsRef)); this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
// } }
// that.initEcharts(); that.initEcharts();
// }); });
// }, 300); }, 300);
// } }
// }, },
dataList: { dataList: {
handler: function (newValues, oldValues) { handler: function (newValues, oldValues) {
// if(newValues&&newValues.length>0) { // if(newValues&&newValues.length>0) {

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

@ -254,8 +254,8 @@ export default {
}, },
echartsRef: { echartsRef: {
handler: function (oldValues, newValues) { handler: function (oldValues, newValues) {
console.log('old', oldValues); // console.log('old', oldValues);
console.log('newV', newValues); // console.log('newV', newValues);
let that = this; let that = this;
setTimeout(() => { setTimeout(() => {
that.$nextTick(() => { that.$nextTick(() => {

62
src/components/target/newtypeChart.vue
View File

@ -277,15 +277,51 @@ export default {
computed: { computed: {
latestDataArr() { latestDataArr() {
//最新一条数据 //最新一条数据
let latestDataArr = {};
if (this.dataArr && this.dataArr.length > 0) { if (this.dataArr && this.dataArr.length > 0) {
let latestDataArr = _.cloneDeep(this.dataArr[0]); latestDataArr = _.cloneDeep(this.dataArr[0]);
return latestDataArr;
} }
if (this.cycleAccumulateData && this.cycleAccumulateData.length > 0) { if (this.cycleAccumulateData && this.cycleAccumulateData.length > 0) {
let latestDataArr = _.cloneDeep(this.cycleAccumulateData[0]); latestDataArr = _.cloneDeep(this.cycleAccumulateData[0]);
return latestDataArr; // 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() { newDataArr() {
if (this.dataArr && this.dataArr.length > 0) { if (this.dataArr && this.dataArr.length > 0) {
@ -307,7 +343,7 @@ export default {
item.speed = '-'; 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; item.flow = item.flow;
} else { } else {
item.flow = '-'; item.flow = '-';
@ -319,11 +355,24 @@ export default {
item.headway = '-'; 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)) { if (!isNaN(item.n_stay) && (item.n_stay !== -1 || item.n_stay === 0)) {
item.n_stay = item.n_stay; item.n_stay = item.n_stay;
} else { } else {
item.n_stay = '-'; 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)) { if (!isNaN(item.n_queue) && (item.n_queue !== -1 || item.n_queue === 0)) {
item.n_queue = item.n_queue; 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)) { if (!isNaN(item.ave_queue) && (item.ave_queue !== -1 || item.ave_queue === 0)) {
item.n_queue = item.ave_queue; item.n_queue = item.ave_queue;
item.ave_queue = item.ave_queue;
} else { } else {
item.ave_queue = '-'; item.ave_queue = '-';
} }

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

@ -81,6 +81,7 @@
</div> </div>
</template> </template>
<script> <script>
import _ from 'lodash';
import newtypeChart from '../../components/target/newtypeChart.vue'; import newtypeChart from '../../components/target/newtypeChart.vue';
// import {mapMutation} from 'vuex' // import {mapMutation} from 'vuex'
import { getComponentSection } from '../../api/index'; import { getComponentSection } from '../../api/index';
@ -179,7 +180,7 @@ export default {
// }, 3000); // }, 3000);
}, },
//点击数据看板tab会执行获取所有配置的组件 //点击数据看板tab会执行获取所有配置的组件
getNew() { getNew(getHistory) {
this.loading = true; this.loading = true;
getComponentSection({ VideoId: this.$route.query.id, Number: 10 }) getComponentSection({ VideoId: this.$route.query.id, Number: 10 })
.then((res) => { .then((res) => {
@ -187,6 +188,12 @@ export default {
//console.log(res.data.data, '组件的数据'); //console.log(res.data.data, '组件的数据');
this.componentList = res.data.data; this.componentList = res.data.data;
this.siftData(); this.siftData();
this.$nextTick(() => {
if (this.$route.query.type == '离线视频' && getHistory) {
getHistory();
}
});
} }
}) })
.finally(() => { .finally(() => {
@ -235,13 +242,14 @@ export default {
// console.log('折叠面板-', this.acticveName); // console.log('折叠面板-', this.acticveName);
}, },
updateSectionData(newVal, updateKey, timeMode) { updateSectionData(newVal, updateKey, timeMode) {
let tempNewVal = _.cloneDeep(newVal);
this.sectionData.forEach((item) => { this.sectionData.forEach((item) => {
//item.title == val.combinationName //item.title == val.combinationName
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
item.children.forEach((cItem) => { item.children.forEach((cItem) => {
if (cItem.timeMode == timeMode) { if (cItem.timeMode == timeMode) {
//找出对应timeMode的mqtt数据 //找出对应timeMode的mqtt数据
newVal.forEach((nItem) => { tempNewVal.forEach((nItem) => {
if (cItem.analogAreaComponentId == nItem.component_id) { if (cItem.analogAreaComponentId == nItem.component_id) {
if (cItem[updateKey].length > 9) { if (cItem[updateKey].length > 9) {
this.$set(cItem, updateKey, cItem[updateKey].slice(0, 9)); this.$set(cItem, updateKey, cItem[updateKey].slice(0, 9));
@ -265,6 +273,28 @@ export default {
}); });
this.$forceUpdate(); this.$forceUpdate();
// console.log('sectionData', this.sectionData); // 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() {}, mounted() {},
@ -278,21 +308,25 @@ export default {
cycleHistoryData: { cycleHistoryData: {
handler(newVal) { handler(newVal) {
// debugger // debugger
// console.log('历史cycleHistoryData-', newVal); console.log('历史cycleHistoryData-', newVal);
//该主题只会有固定间隔和固定时刻数据 //该主题只会有固定间隔和固定时刻数据
if (newVal && this.sectionData.length > 0) { if (newVal && this.sectionData.length > 0) {
//更新sectionData对应的analogAreaComponentId和timeMode更新数据 //更新sectionData对应的analogAreaComponentId和timeMode更新数据
if (newVal.CycleStatisticsData && newVal.CycleStatisticsData.length > 0) { if (newVal.CycleStatisticsData && newVal.CycleStatisticsData.length > 0) {
newVal.CycleStatisticsData.forEach((ele) => { newVal.CycleStatisticsData.forEach((ele) => {
if (ele.cycleStatisticsData && ele.cycleStatisticsData.length > 0) { 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) { if (newVal.CycleTimeData && newVal.CycleTimeData.length > 0) {
newVal.cycleTimeData.forEach((ele) => { newVal.CycleTimeData.forEach((ele) => {
if (ele.cycleTimeData && ele.cycleTimeData.length > 0) { 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: { triggerListData: {
handler(newVal) { handler(newVal) {
// console.log('实时触发triggerListData-', newVal); // console.log('实时触发triggerListData-', newVal);
//this.triggerList = newVal; //目前看用不到这个数组
// 触发数据
if (newVal && newVal.length > 0 && this.sectionData.length > 0) { if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
//更新sectionData对应的analogAreaComponentId和timeMode更新trigger数据 //更新sectionData对应的analogAreaComponentId和timeMode更新trigger数据
this.updateSectionData(newVal, 'trigger', '实时触发'); this.updateSectionData(newVal, 'trigger', '实时触发');
@ -319,7 +351,7 @@ export default {
cycleTimeData: { cycleTimeData: {
handler(newVal) { handler(newVal) {
// 监听到打印固定时刻数据 // 监听到打印固定时刻数据
// console.log(newVal, '固定时刻数据'); // console.log('固定时刻数据cycleTimeData-', newVal);
if (newVal && newVal.length > 0 && this.sectionData.length > 0) { if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
this.updateSectionData(newVal, 'cycleTimeData', '固定时刻'); this.updateSectionData(newVal, 'cycleTimeData', '固定时刻');
} }
@ -330,7 +362,7 @@ export default {
//固定间隔 //固定间隔
cycleStatisticsData: { cycleStatisticsData: {
handler(newVal) { handler(newVal) {
// console.log('固定间隔', newVal); // console.log('固定间隔cycleStatisticsData', newVal);
if (newVal && newVal.length > 0 && this.sectionData.length > 0) { if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
this.updateSectionData(newVal, 'cycleStatisticsData', '固定间隔'); this.updateSectionData(newVal, 'cycleStatisticsData', '固定间隔');
} }
@ -341,13 +373,14 @@ export default {
//周期统计实时累计数据主题 //周期统计实时累计数据主题
cycleAccumulateData: { cycleAccumulateData: {
handler(newVal) { handler(newVal) {
// console.log('周期统计实时累计数据主题', newVal); // console.log('周期统计实时累计数据主题cycleAccumulateData-', newVal);
if (newVal && newVal.length > 0 && this.sectionData.length > 0) { if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
//实时累计数据主题 只需要覆盖固定间隔主题的卡片数据，图表数据不需要更新 //实时累计数据主题 只需要覆盖固定间隔主题的卡片数据，图表数据不需要更新
this.updateSectionData(newVal, 'cycleAccumulateData', '固定间隔'); this.updateSectionData(newVal, 'cycleAccumulateData', '固定间隔');
} }
}, },
immediate: true immediate: true,
deep: true
} }
} }
}; };

24
src/views/index.vue
View File

@ -1059,16 +1059,19 @@ export default {
}, },
// 数据看板的标签点击 // 数据看板的标签点击
handleClick: function (tab, event) { handleClick: function (tab, event) {
var that = this;
if (tab._props.name == 'second') { if (tab._props.name == 'second') {
that.$nextTick(() => { this.$nextTick(() => {
// if (this.$route.query.type == '离线视频') {
that.$refs.dataBoardRef.getNew(); this.$refs.dataBoardRef.getNew(this.getHistory);
} else {
this.$refs.dataBoardRef.getNew();
}
// this.$refs.dataBoardRef.getNew(this.getHistory);
// setTimeout(() => { // setTimeout(() => {
// debugger // debugger
// this.getHistory() // this.getHistory()
// }, 10000); // }, 10000);
this.getHistory(); // this.getHistory();
}); });
} }
}, },
@ -1100,9 +1103,9 @@ export default {
]; ];
window.PubScribe(this.topicSends, '001', this.realInfo); window.PubScribe(this.topicSends, '001', this.realInfo);
this.timer1 = null; this.timer1 = null;
this.timer1 = setTimeout(() => { // this.timer1 = setTimeout(() => {
this.getHistory(); // this.getHistory();
}, 5000); // }, 5000);
} else if (this.$route.query.type == '实时视频') { } else if (this.$route.query.type == '实时视频') {
this.topicSends = [ this.topicSends = [
'stream' + this.number, 'stream' + this.number,
@ -1244,6 +1247,7 @@ export default {
}, },
//获取离线视频固定时刻固定间隔 //获取离线视频固定时刻固定间隔
getHistory() { getHistory() {
console.log('执行获取离线视频固定时刻固定间隔主题')
window.publish('GetCycleHistory', 'Get-' + this.$route.query.id); window.publish('GetCycleHistory', 'Get-' + this.$route.query.id);
}, },
getZhuanFaMQTT(topic, msg) { getZhuanFaMQTT(topic, msg) {
@ -1525,7 +1529,7 @@ export default {
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = []; var detId = [];
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
//console.log('历史数据', msgN); console.log('历史数据源头', msgN);
this.cycleHistoryData = msgN; this.cycleHistoryData = msgN;
} catch (error) {} } catch (error) {}
break; break;
@ -2561,7 +2565,7 @@ export default {
dataBoard dataBoard
}, },
beforeDestroy() { beforeDestroy() {
clearTimeout(this.timer1); // clearTimeout(this.timer1);
clearTimeout(this.timer2); clearTimeout(this.timer2);
clearTimeout(this.timer3); clearTimeout(this.timer3);
clearTimeout(this.timer4); clearTimeout(this.timer4);

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

@ -1,5 +1,12 @@
<template> <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 v-model="activeNames">
<el-collapse-item title="监控列表" name="1"> <el-collapse-item title="监控列表" name="1">
<el-row> <el-row>
@ -601,7 +608,7 @@
class="buttonList" class="buttonList"
@change="changeChat(o.children, o.selectOption)" @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> </el-radio-group>
<!--初始化渲染图表--> <!--初始化渲染图表-->
<div class="echartList"> <div class="echartList">
@ -615,11 +622,6 @@
{{ e.name }} {{ e.name }}
</div> </div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'"> <div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'">
<el-empty
:image-size="100"
description="暂无数据"
v-if="e.triggerDataList == null"
></el-empty>
<chartsLine <chartsLine
:echartsRef="'echartsLine' + e.duocgqrhpzId" :echartsRef="'echartsLine' + e.duocgqrhpzId"
:itemData="e" :itemData="e"
@ -631,15 +633,11 @@
:flowType="e.flowType" :flowType="e.flowType"
:dataList="e.triggerDataList" :dataList="e.triggerDataList"
ref="chartsLine" ref="chartsLine"
v-else-if="e.triggerDataList != null" v-if="e.triggerDataList"
/> />
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
</div> </div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'"> <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 <chartsLine
:echartsRef="'echartsLine' + e.duocgqrhpzId" :echartsRef="'echartsLine' + e.duocgqrhpzId"
:itemData="e" :itemData="e"
@ -650,15 +648,11 @@
:componentType="e.componentType" :componentType="e.componentType"
:dataList="e.cycleTimeData" :dataList="e.cycleTimeData"
:flowType="e.flowType" :flowType="e.flowType"
v-else v-if="e.cycleTimeData"
/> />
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
</div> </div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'"> <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 <chartsLine
:echartsRef="'echartsLine' + e.duocgqrhpzId" :echartsRef="'echartsLine' + e.duocgqrhpzId"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
@ -669,8 +663,9 @@
:componentType="e.componentType" :componentType="e.componentType"
:dataList="e.cycleStatisticsData" :dataList="e.cycleStatisticsData"
:flowType="e.flowType" :flowType="e.flowType"
v-else v-if="e.cycleStatisticsData"
/> />
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
</div> </div>
</div> </div>
<div <div
@ -794,11 +789,6 @@
{{ e.name }} {{ e.name }}
</div> </div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'"> <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 <chartsPie
:echartsRef="'echartsPie' + e.duocgqrhpzId" :echartsRef="'echartsPie' + e.duocgqrhpzId"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
@ -806,15 +796,11 @@
:dataList="e.triggerDataList" :dataList="e.triggerDataList"
:timeMode="'实时触发'" :timeMode="'实时触发'"
:intersectionName="intersectionName" :intersectionName="intersectionName"
v-else v-if="e.triggerDataList"
/> />
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
</div> </div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'"> <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 <chartsPie
:echartsRef="'echartsPie' + e.duocgqrhpzId" :echartsRef="'echartsPie' + e.duocgqrhpzId"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
@ -822,15 +808,11 @@
:dataList="e.cycleTimeData" :dataList="e.cycleTimeData"
:timeMode="'固定时刻'" :timeMode="'固定时刻'"
:intersectionName="intersectionName" :intersectionName="intersectionName"
v-else v-if="e.cycleTimeData"
/> />
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
</div> </div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'"> <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 <chartsPie
:echartsRef="'echartsPie' + e.duocgqrhpzId" :echartsRef="'echartsPie' + e.duocgqrhpzId"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
@ -838,8 +820,9 @@
:timeMode="'固定间隔'" :timeMode="'固定间隔'"
:dataList="e.cycleStatisticsData" :dataList="e.cycleStatisticsData"
:intersectionName="intersectionName" :intersectionName="intersectionName"
v-else v-if="e.cycleStatisticsData"
/> />
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
</div> </div>
</div> </div>
<div <div
@ -851,11 +834,6 @@
{{ e.name }} {{ e.name }}
</div> </div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'"> <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 <chartsBar
:echartsRef="'echartsBar' + e.duocgqrhpzId" :echartsRef="'echartsBar' + e.duocgqrhpzId"
style="width: 100%; height: 90%" style="width: 100%; height: 90%"
@ -863,15 +841,11 @@
:timeMode="'实时触发'" :timeMode="'实时触发'"
:intersectionName="intersectionName" :intersectionName="intersectionName"
:dataList="e.triggerDataList" :dataList="e.triggerDataList"
v-else v-if="e.triggerDataList"
/> />
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
</div> </div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'"> <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 <chartsBar
:echartsRef="'echartsBar' + e.duocgqrhpzId" :echartsRef="'echartsBar' + e.duocgqrhpzId"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
@ -879,15 +853,11 @@
:dataList="e.cycleTimeData" :dataList="e.cycleTimeData"
:timeMode="'固定时刻'" :timeMode="'固定时刻'"
:intersectionName="intersectionName" :intersectionName="intersectionName"
v-else v-if="e.cycleTimeData"
/> />
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
</div> </div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'"> <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 <chartsBar
:echartsRef="'echartsBar' + e.duocgqrhpzId" :echartsRef="'echartsBar' + e.duocgqrhpzId"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
@ -895,8 +865,9 @@
:chatShowType="chatShowType" :chatShowType="chatShowType"
:dataList="e.cycleStatisticsData" :dataList="e.cycleStatisticsData"
:intersectionName="intersectionName" :intersectionName="intersectionName"
v-else v-if="e.cycleStatisticsData"
/> />
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
</div> </div>
</div> </div>
<div <div
@ -908,49 +879,37 @@
{{ e.name }} {{ e.name }}
</div> </div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'"> <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 <meanValue
:echartsRef="'meanValue' + e.duocgqrhpzId" :echartsRef="'meanValue' + e.duocgqrhpzId"
style="width: 100%; height: 90%" style="width: 100%; height: 90%"
:chatShowType="chatShowType" :chatShowType="chatShowType"
:intersectionName="intersectionName" :intersectionName="intersectionName"
:dataList="e.triggerDataList" :dataList="e.triggerDataList"
v-else v-if="e.triggerDataList"
/> />
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
</div> </div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'"> <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 <meanValue
:echartsRef="'meanValue' + e.duocgqrhpzId" :echartsRef="'meanValue' + e.duocgqrhpzId"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
:chatShowType="chatShowType" :chatShowType="chatShowType"
:dataList="e.cycleTimeData" :dataList="e.cycleTimeData"
:intersectionName="intersectionName" :intersectionName="intersectionName"
v-else v-if="e.cycleTimeData"
/> />
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
</div> </div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'"> <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 <meanValue
:echartsRef="'meanValue' + e.duocgqrhpzId" :echartsRef="'meanValue' + e.duocgqrhpzId"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
:chatShowType="chatShowType" :chatShowType="chatShowType"
:dataList="e.cycleStatisticsData" :dataList="e.cycleStatisticsData"
:intersectionName="intersectionName" :intersectionName="intersectionName"
v-else v-if="e.cycleStatisticsData"
/> />
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
</div> </div>
</div> </div>
<div <div
@ -962,11 +921,6 @@
{{ e.name }} {{ e.name }}
</div> </div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '实时触发'"> <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 <thermalOD
:echartsRef="'thermalOD' + e.duocgqrhpzId" :echartsRef="'thermalOD' + e.duocgqrhpzId"
style="width: 100%; height: 90%" style="width: 100%; height: 90%"
@ -977,15 +931,11 @@
:endName="e.endSectionNames" :endName="e.endSectionNames"
:dataList="e.triggerDataList" :dataList="e.triggerDataList"
:intersectionName="intersectionName" :intersectionName="intersectionName"
v-else v-if="e.triggerDataList"
/> />
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
</div> </div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定时刻'"> <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 <thermalOD
:echartsRef="'thermalOD' + e.duocgqrhpzId" :echartsRef="'thermalOD' + e.duocgqrhpzId"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
@ -996,15 +946,11 @@
:endName="e.endSectionNames" :endName="e.endSectionNames"
:dataList="e.cycleTimeData" :dataList="e.cycleTimeData"
:intersectionName="intersectionName" :intersectionName="intersectionName"
v-else v-if="e.cycleTimeData"
/> />
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
</div> </div>
<div style="width: 100%; height: 90%" v-if="e.timeMode == '固定间隔'"> <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 <thermalOD
:echartsRef="'thermalOD' + e.duocgqrhpzId" :echartsRef="'thermalOD' + e.duocgqrhpzId"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
@ -1015,8 +961,9 @@
:endName="e.endSectionNames" :endName="e.endSectionNames"
:dataList="e.cycleStatisticsData" :dataList="e.cycleStatisticsData"
:intersectionName="intersectionName" :intersectionName="intersectionName"
v-else v-if="e.cycleStatisticsData"
/> />
<el-empty :image-size="100" description="暂无数据" v-else></el-empty>
</div> </div>
</div> </div>
</div> </div>
@ -1378,6 +1325,7 @@
<script> <script>
let id = 1000; let id = 1000;
// import player from './player.vue';
import chartsLine from '@/components/sensorFusion/echartsLine.vue'; import chartsLine from '@/components/sensorFusion/echartsLine.vue';
import chartsPie from '@/components/sensorFusion/echartsPie.vue'; import chartsPie from '@/components/sensorFusion/echartsPie.vue';
import chartsBar from '@/components/sensorFusion/echartsBar.vue'; import chartsBar from '@/components/sensorFusion/echartsBar.vue';
@ -1397,11 +1345,13 @@ import {
getAssembly, // 获取多传感器融合 getAssembly, // 获取多传感器融合
getSelectedComponent //获取已选的组件数据接口 getSelectedComponent //获取已选的组件数据接口
} from '@/api/sensorFusion.js'; } from '@/api/sensorFusion.js';
import { getVideoMode } from '@/api/index';
import qs from 'qs'; import qs from 'qs';
export default { export default {
name: 'sensorFusion', name: 'sensorFusion',
data() { data() {
return { return {
offlineVideo: true,
checkList: [], checkList: [],
defaultExpanded: [], //默认展示数组 defaultExpanded: [], //默认展示数组
checkDataList: [], checkDataList: [],
@ -1420,6 +1370,7 @@ export default {
activeNames: ['1'], // 视频折叠 activeNames: ['1'], // 视频折叠
intersectionName: [], //数据分析名称 intersectionName: [], //数据分析名称
videoList: [], videoList: [],
loading: false,
intersectionList: [], intersectionList: [],
tabPosition: '1', tabPosition: '1',
threeData: [], threeData: [],
@ -1526,6 +1477,9 @@ export default {
disabledCheckList: [] //tree不可选数组 disabledCheckList: [] //tree不可选数组
}; };
}, },
created() {
this.getVideoType();
},
mounted() { mounted() {
//获取视频列表 //获取视频列表
this.getRealTimeShipjk(); this.getRealTimeShipjk();
@ -1533,6 +1487,20 @@ export default {
this.getSensorFusionData(); this.getSensorFusionData();
}, },
methods: { 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) { getTotal(arr, field, field2) {
let total = 0; let total = 0;
@ -1566,35 +1534,35 @@ export default {
}, },
//获取多融合传感器融合数据 //获取多融合传感器融合数据
getSensorFusionData() { getSensorFusionData() {
this.loading = true;
getAssembly({ getAssembly({
Number: 10 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); //console.log(this.intersectionList, 'this.intersectionList');
// this.addTriggerDataField(this.intersectionList); //开发路口默认展开第一个
//mqtt订阅 this.$nextTick(() => {
this.$nextTick(() => { if (this.intersectionList.length > 0) {
this.getMqtt(); let children = this.intersectionList[0].children || [];
}); if (children.length > 0) {
this.intersectionName = [children[0].name];
//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++) { .finally(() => {
// for (let j = 0; j < this.intersectionList[i].children.length; j++) { this.loading = false;
// if (j == 2) { });
// this.intersectionName.push(this.intersectionList[i].children[j].name);
// }
// }
// }
// //console.log(this.intersectionName, 'intersectionName');
});
}, },
//每个都添加option //每个都添加option
addSelectOptionField(obj) { addSelectOptionField(obj) {
@ -1611,6 +1579,7 @@ export default {
} }
} }
} }
return obj;
}, },
addTriggerDataField(obj) { addTriggerDataField(obj) {
if (Array.isArray(obj)) { if (Array.isArray(obj)) {
@ -2339,6 +2308,9 @@ export default {
//单选按钮选择事件 //单选按钮选择事件
changeChat(val, index) { changeChat(val, index) {
console.log('changeChat');
console.log(val);
console.log(index);
this.chatShowType = ''; this.chatShowType = '';
this.$nextTick(() => { this.$nextTick(() => {
this.chatShowType = val[index - 1].presentationForm; this.chatShowType = val[index - 1].presentationForm;
@ -2375,7 +2347,8 @@ export default {
//确认按钮 //确认按钮
addSuccess() { addSuccess() {
this.centerDialogVisible = false; this.centerDialogVisible = false;
this.getSensorFusionData(); // this.getSensorFusionData();
this.$router.go(0);
}, },
//tab切换事件 //tab切换事件
tabChange(val) { tabChange(val) {
@ -3797,13 +3770,19 @@ export default {
MeanValue, //均值图 MeanValue, //均值图
thermalOD, //OD thermalOD, //OD
tableShow, tableShow,
regionTable regionTable,
// player
} }
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.content-box { .content-box {
.offlineVideo{
display: flex;
align-items: center;
justify-content: center;
}
/deep/ .el-collapse-item__header { /deep/ .el-collapse-item__header {
color: rgb(71, 161, 255); color: rgb(71, 161, 255);
padding: 0px 1%; padding: 0px 1%;

70
src/views/sensorFusion/player.vue Normal file
View File

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