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

视频延迟优化

This commit is contained in:
qiudan 2023-12-14 14:52:23 +08:00
parent 6b8a4f07d4
commit 23d8e88274
12 changed files with 149 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/VideoWeb/Build/APP.data.unityweb
View File

Binary file not shown.

BIN
public/VideoWeb/Build/APP.framework.js.unityweb
View File

Binary file not shown.

BIN
public/VideoWeb/Build/APP.wasm.unityweb
View File

Binary file not shown.

4
src/components/newchart/avgChart.vue
View File

@ -239,8 +239,8 @@ export default {
});
}
},
deep: true
// immediate: true
deep: true,
immediate: true
}
}
};

13
src/components/newchart/barChart.vue
View File

@ -54,11 +54,13 @@ export default {
created() {},
methods: {
drawBar(newVal) {
let xData = [],
yData = [];
if (newVal && newVal.type_data && newVal.type_data.length > 0) {
var xData = newVal.type_data.map((ele) => {
xData = newVal.type_data.map((ele) => {
return getNameFromTargetType(ele.name);
});
var yData = newVal.type_data.map((ele) => {
yData = newVal.type_data.map((ele) => {
return ele.quantity;
});
}
@ -104,9 +106,8 @@ export default {
splitArea: {
show: false
},
axisLine: {
show: true
show: yData.length == 0 ? false : true
},
axisTick: {
show: false
@ -154,8 +155,8 @@ export default {
});
}
},
deep: true
// immediate: true
deep: true,
immediate: true
}
}
};

4
src/components/newchart/lineChart.vue
View File

@ -436,8 +436,8 @@ export default {
});
}
},
deep: true
// immediate: true
deep: true,
immediate: true
}
}
};

4
src/components/newchart/thermalChart.vue
View File

@ -204,8 +204,8 @@ export default {
});
}
},
deep: true
// immediate: true
deep: true,
immediate: true
}
}
};

7
src/main.js
View File

@ -86,12 +86,13 @@ window.PubScribe = function (topic, number, _callback, other = false, fromName =
if (client != null) {
console.log('client', client)
client.unsubscribe(currentTopics);
console.log("取消上次订阅主题", currentTopics)
currentTopics = null;
}
}
if (client == null) {
if (other == false) {
console.log("topic", topic)
console.log("首次链接订阅主题topic", topic)
currentTopics = topic;
client = mqtt.createConnect(() => {
client.subscribe(topic, {
@ -126,7 +127,7 @@ window.PubScribe = function (topic, number, _callback, other = false, fromName =
});
} else {
if (topic != null) {
console.log("topic", topic)
console.log("融合的订阅主题topic", topic)
currentTopics = topic;
client = mqtt.createConnect(() => {
client.subscribe(topic, {
@ -156,7 +157,7 @@ window.PubScribe = function (topic, number, _callback, other = false, fromName =
} else {
if (topic != null) {
console.log("topic", topic)
console.log("已链接成功后订阅主题topic", topic)
currentTopics = topic;
mqtt.MySub(() => {
client.subscribe(currentTopics, {

5
src/utils/mqttConfig.js
View File

@ -16,8 +16,8 @@ class mqttHandle {
endpoint: "/mqtt",
clean: true, // 保留会话
cleanSession: true,
connectTimeout: 7000, // 超时时间
reconnectPeriod: 7000, // 重连时间间隔
connectTimeout: 5000, // 超时时间
reconnectPeriod: 3000, // 重连时间间隔
host: ip,
port: '10087',
// 认证信息
@ -87,6 +87,7 @@ class mqttHandle {
this.mqttClient.on('reconnect', (error) => {
console.log('正在重连')
})
this.mqttClient.on("error", (error) => {
console.log("Connection failed");
});

3
src/views/AnalysisMain.vue
View File

@ -321,7 +321,8 @@ export default {
//console.log('this.videoTypeForm.videoType', this.videoTypeForm.videoType);
//创建链接，接收数据
if (this.videoTypeForm.videoType == '实时视频') {
this.topicSends = ['hert', 'img0', 'img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7', 'Contorl_server'];
// this.topicSends = ['hert', 'img0', 'img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7', 'Contorl_server'];
this.topicSends = ['hert', 'Contorl_server'];
//console.log('this.videoTypeForm.videoType', this.videoTypeForm.videoType);
// console.log('在AnalysisMain分析页面')
window.PubScribe(this.topicSends, -1, this.realInfo, false, 'videoId');

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

@ -81,6 +81,7 @@
</div>
</template>
<script>
import moment from 'moment';
import _ from 'lodash';
import newtypeChart from '../../components/target/newtypeChart.vue';
// import {mapMutation} from 'vuex'
@ -338,7 +339,9 @@ export default {
// 处理过的触发数据
triggerListData: {
handler(newVal) {
// console.log('实时触发triggerListData-', newVal);
// console.log('实时触发triggerListData-', newVal[0].time);
// console.log('实时触发triggerListData-系统时间', moment().format('YYYY-MM-DD HH:mm:ss'));
if (newVal && newVal.length > 0 && this.sectionData.length > 0) {
//更新sectionData对应的analogAreaComponentId和timeMode更新trigger数据
this.updateSectionData(newVal, 'trigger', '实时触发');

204
src/views/index.vue
View File

@ -441,6 +441,8 @@
<script>
// import mqtt from "mqtt"; // mqtt协议
import moment from 'moment';
import _ from 'lodash';
import editModal from '@/views/bounced/maintenanceRemind';
import analysisConfiguration from '@/views/bounced/analysisConfiguration';
import dataBoard from '@/views/bounced/dataBoard';
@ -917,7 +919,10 @@ export default {
timer1: null,
timer2: null,
timer3: null,
timer4: null
timer4: null,
imgMessagetimer: null,
imgMessage: '',
imgMessageNew: false
};
},
@ -946,7 +951,6 @@ export default {
this.videoAnalysisShow = false;
this.trafficAnalysisShow = false;
this.createMqtt();
// document.getElementById('mapModule').contentWindow.lixianVideo(JSON.stringify(this.analysis));
} else if (this.$route.query.type == '离线视频') {
this.videoAnalysisShow = true;
@ -969,6 +973,11 @@ export default {
this.disable = true;
this.roleStatus = 'false';
}
if (this.$route.query.type == '实时视频') {
this.imgMessagetimer = setInterval(() => {
this.setImgMessage();
}, 200);
}
},
methods: {
@ -1117,16 +1126,17 @@ export default {
'cycle_accumulate-' + this.$route.query.id,
'TargetAnalysisStatusData',
'TrafficAnalysisStatusData',
'hert',
'img0',
'img1',
'img2',
'img3',
'img4',
'img5',
'img6',
'img7',
'Contorl_server'
'img' + this.number
// 'hert',
// 'img0',
// 'img1',
// 'img2',
// 'img3',
// 'img4',
// 'img5',
// 'img6',
// 'img7',
// 'Contorl_server'
//目标数量
// 'simulator_target-' + this.$route.query.id
];
@ -1247,7 +1257,7 @@ export default {
},
//获取离线视频固定时刻固定间隔
getHistory() {
console.log('执行获取离线视频固定时刻固定间隔主题')
console.log('执行获取离线视频固定时刻固定间隔主题');
window.publish('GetCycleHistory', 'Get-' + this.$route.query.id);
},
getZhuanFaMQTT(topic, msg) {
@ -1403,74 +1413,60 @@ export default {
},
/** 实时数据分类 */
realInfo(topic, message) {
let mapModuleDom = document.getElementById('mapModule');
const utf8decoder = new TextDecoder();
switch (topic) {
// 接收托片
case 'img' + this.number:
try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
// //console.log(msg, 'msg接受一张高频图片');
// document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
if (msg.rate == 'high') {
document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
//接受一张高频图片
if (JSON.stringify(this.highPic) === '{}') {
this.highPic = msg;
// 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 {
let found = false;
for (let i = 0; i < this.highPicList.length; i++) {
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;
}
} catch (error) {}
// console.log('msg接受一张高频图片', moment().format('YYYY-MM-DD HH:mm:ss'));
this.imgMessage = message;
this.imgMessageNew = true;
// try {
// const u8arr = new Uint8Array(message);
// const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
// const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
// // document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
// if (msg.rate == 'high') {
// // console.log('Web收到图片：img' + this.number, moment().format('YYYY-MM-DD HH:mm:ss'));
// mapModuleDom.contentWindow.getDestination(JSON.stringify(msg));
// //接受一张高频图片
// if (JSON.stringify(this.highPic) === '{}') {
// this.highPic = msg;
// // sessionStorage.setItem("highPic", this.highPic.pic);
// // sessionStorage.setItem("videoId", this.highPic.id);
// }
// //更新本地视频图片，给视频列表页面展示
// this.storageHighPicList(msg);
// } else if (msg.rate == 'low') {
// this.analysisConfigurationdata = msg;
// }
// } catch (error) {
// // console.log('imgError',error)
// }
break;
// 树结构
case 'stream' + this.number:
try {
const utf8decoder1 = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder1.decode(u8arr); // 将二进制数据转为字符串
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp);
document.getElementById('mapModule').contentWindow.getData(JSON.stringify(msg));
// console.log('stream' + this.number, msg);
// console.log('Web收到：stream' + this.number, moment().format('YYYY-MM-DD HH:mm:ss'));
mapModuleDom.contentWindow.getData(JSON.stringify(msg));
} catch (error) {}
break;
// 控制台输出
case 'trajectory' + this.number:
try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp);
document.getElementById('mapModule').contentWindow.getGuiJi(JSON.stringify(msg));
mapModuleDom.contentWindow.getGuiJi(JSON.stringify(msg));
} catch (error) {}
break;
// 实时触发
case 'detection' + this.number:
try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = [];
@ -1484,19 +1480,18 @@ export default {
detId.push(msgN[i]);
}
}
document.getElementById('mapModule').contentWindow.getChuFa(JSON.stringify(detId));
mapModuleDom.contentWindow.getChuFa(JSON.stringify(detId));
}
} catch (error) {}
break;
case 'trigger-' + 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('实时触发trigger-', msgN);
// console.log('实时触发trigger-', msgN[0].time,'-',msgN[0].frame);
// //console.log("trigger_msgN",msgN)
// msgN.forEach(item => {
// //console.log("item.name",item.name)
@ -1512,7 +1507,6 @@ export default {
case 'cycle_time-' + 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 = [];
@ -1524,7 +1518,6 @@ export default {
case 'cycle_history-' + 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 = [];
@ -1536,7 +1529,6 @@ export default {
case 'cycle_statistics-' + 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 = [];
@ -1549,7 +1541,6 @@ export default {
try {
//周期统计实时累计数据主题
// console.log("trigger_msgN",message)
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = [];
@ -1563,7 +1554,6 @@ export default {
break;
case 'VideoStatusData':
try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
@ -1573,7 +1563,6 @@ export default {
break;
case 'TargetAnalysisStatusData': //目标监测
try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
@ -1583,7 +1572,6 @@ export default {
break;
case 'TrafficAnalysisStatusData': //交通分析
try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
@ -1593,20 +1581,61 @@ export default {
break;
case 'simulator_target-' + this.$route.query.id: //目标数量
try {
const utf8decoder1 = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder1.decode(u8arr); // 将二进制数据转为字符串
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp);
//console.log('simulator_target-目标数量', msg);
document.getElementById('mapModule').contentWindow.getTargetNumber(JSON.stringify(msg));
mapModuleDom.contentWindow.getTargetNumber(JSON.stringify(msg));
} catch (error) {}
break;
}
this.receiveNews = '';
// this.receiveNews = '';
},
setImgMessage() {
if (this.imgMessage && this.imgMessageNew) {
// console.log('执行了setImgMessage');
this.imgMessageNew = false;
let mapModuleDom = document.getElementById('mapModule');
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(this.imgMessage);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
// document.getElementById('mapModule').contentWindow.getDestination(JSON.stringify(msg));
if (msg.rate == 'high') {
// console.log('Web收到图片：img' + this.number, moment().format('YYYY-MM-DD HH:mm:ss'));
mapModuleDom.contentWindow.getDestination(JSON.stringify(msg));
//接受一张高频图片
if (JSON.stringify(this.highPic) === '{}') {
this.highPic = msg;
// sessionStorage.setItem("highPic", this.highPic.pic);
// sessionStorage.setItem("videoId", this.highPic.id);
}
//更新本地视频图片，给视频列表页面展示
this.storageHighPicList(_.cloneDeep(msg));
} else if (msg.rate == 'low') {
this.analysisConfigurationdata = msg;
}
}
},
storageHighPicList(msg) {
let highPicList = sessionStorage.getItem('highPicList') ? JSON.parse(sessionStorage.getItem('highPicList')) : [];
if (highPicList.length == 0) {
highPicList.push({ pic: msg.pic, videoId: msg.id });
} else {
let found = false;
for (let i = 0; i < highPicList.length; i++) {
if (highPicList[i].videoId == msg.id) {
highPicList[i].pic = msg.pic;
found = true;
break; // 找到了就退出循环
}
}
if (!found) {
highPicList.push({ pic: msg.pic, videoId: msg.id });
}
}
sessionStorage.setItem('highPicList', JSON.stringify(highPicList));
},
// handleClick(tab, event) {
// //console.log(tab, event);
// },
changeCompany(val) {
//console.log('val', val);
if (val == '小时') {
@ -2124,8 +2153,8 @@ export default {
',' +
this.numberNew +
',' +
form.Direction
+',add'
form.Direction +
',add'
)
);
} else {
@ -2133,7 +2162,7 @@ export default {
.getElementById('mapModule')
.contentWindow.postFigureName(
JSON.stringify(
res.data.data + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ', '+',add'
res.data.data + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ', ' + ',add'
)
);
}
@ -2236,14 +2265,25 @@ export default {
.getElementById('mapModule')
.contentWindow.postFigureName(
JSON.stringify(
form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ',' + form.Direction+',edit'
form.id +
',' +
form.name +
',' +
this.startFigureName +
',' +
this.numberNew +
',' +
form.Direction +
',edit'
)
);
} else {
document
.getElementById('mapModule')
.contentWindow.postFigureName(
JSON.stringify(form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ', '+',edit')
JSON.stringify(
form.id + ',' + form.name + ',' + this.startFigureName + ',' + this.numberNew + ', ' + ',edit'
)
);
}
@ -2570,10 +2610,12 @@ export default {
clearTimeout(this.timer2);
clearTimeout(this.timer3);
clearTimeout(this.timer4);
clearInterval(this.imgMessagetimer);
this.timer1 = null;
this.timer2 = null;
this.timer3 = null;
this.timer4 = null;
this.imgMessagetimer = null;
}
};
</script>