diff --git a/public/VideoWeb/Build/APP.data.unityweb b/public/VideoWeb/Build/APP.data.unityweb index 5b273a2d..9446e08d 100644 Binary files a/public/VideoWeb/Build/APP.data.unityweb and b/public/VideoWeb/Build/APP.data.unityweb differ diff --git a/public/VideoWeb/Build/APP.framework.js.unityweb b/public/VideoWeb/Build/APP.framework.js.unityweb index 03429cf9..377543f6 100644 Binary files a/public/VideoWeb/Build/APP.framework.js.unityweb and b/public/VideoWeb/Build/APP.framework.js.unityweb differ diff --git a/public/VideoWeb/Build/APP.wasm.unityweb b/public/VideoWeb/Build/APP.wasm.unityweb index 154fd546..8055b1c8 100644 Binary files a/public/VideoWeb/Build/APP.wasm.unityweb and b/public/VideoWeb/Build/APP.wasm.unityweb differ diff --git a/src/views/bounced/analysisPreview.vue b/src/views/bounced/analysisPreview.vue index 733494db..6c16a926 100644 --- a/src/views/bounced/analysisPreview.vue +++ b/src/views/bounced/analysisPreview.vue @@ -109,44 +109,38 @@ export default { // console.log("[MQTT-TEST] 已连接的客户端ID: ", connect); // 订阅 this.mqttClient.subscribe('img0', { qos: 0 }); - // this.client.connect('aaa', '111') this.mqttClient.publish('aaa', '111'); - // this.mqttClient.subscribe('msg_stream', { msg_flag: 0 }); this.mqttClient.subscribe('img1', { qos: 0 }); this.mqttClient.subscribe('img2', { qos: 0 }); this.mqttClient.subscribe('img3', { qos: 0 }); this.mqttClient.subscribe('img4', { qos: 0 }); this.mqttClient.subscribe('img5', { qos: 0 }); + this.mqttClient.subscribe('img6', { qos: 0 }); + this.mqttClient.subscribe('img7', { qos: 0 }); this.mqttClient.subscribe('stream0', { qos: 0 }); this.mqttClient.subscribe('stream1', { qos: 0 }); this.mqttClient.subscribe('stream2', { qos: 0 }); this.mqttClient.subscribe('stream3', { qos: 0 }); this.mqttClient.subscribe('stream4', { qos: 0 }); this.mqttClient.subscribe('stream5', { qos: 0 }); - + this.mqttClient.subscribe('stream6', { qos: 0 }); + this.mqttClient.subscribe('stream7', { qos: 0 }); }); // 接收回调 - this.mqttClient.on("message", (topic, message, packet) => { - + this.mqttClient.on("message", (topic, message, packet) => { if (topic.indexOf("img0") != -1) { try { const utf8decoder = new TextDecoder() const u8arr = new Uint8Array(message) const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 - // debugger - // console.log("msg", msg) //msg为转换后的JSON数据 - // console.log("1111",document.getElementById("mapModule")) - document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) - // this.imgUrl = 'data:image/png;base64,' + msg.pic; - // console.log("imageUrl", imageUrl) - + document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) } catch { let imageType = 'arraybuffer'; const blob = new Blob([message], { type: imageType }) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) - // console.log("imageUrl", imageUrl) + console.log("imageUrl", imageUrl) } } else if (topic.indexOf("img1") != -1) { try { @@ -155,8 +149,7 @@ export default { const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 // console.log("msg", msg) //msg为转换后的JSON数据 - this.imgUrl1 = 'data:image/png;base64,' + msg.pic; - console.log("imageUrl", imageUrl) + document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) } catch { let imageType = 'arraybuffer'; const blob = new Blob([message], { type: imageType }) @@ -170,8 +163,7 @@ export default { const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 console.log("msg", msg) //msg为转换后的JSON数据 - this.imgUrl2 = 'data:image/png;base64,' + msg.pic; - console.log("imageUrl", imageUrl) + document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) } catch { let imageType = 'arraybuffer'; const blob = new Blob([message], { type: imageType }) @@ -185,8 +177,7 @@ export default { const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 console.log("msg", msg) //msg为转换后的JSON数据 - this.imgUrl3 = 'data:image/png;base64,' + msg.pic; - console.log("imageUrl", imageUrl) + document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) } catch { let imageType = 'arraybuffer'; const blob = new Blob([message], { type: imageType }) @@ -200,8 +191,7 @@ export default { const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 console.log("msg", msg) //msg为转换后的JSON数据 - this.imgUrl4 = 'data:image/png;base64,' + msg.pic; - console.log("imageUrl", imageUrl) + document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) } catch { let imageType = 'arraybuffer'; const blob = new Blob([message], { type: imageType }) @@ -215,50 +205,89 @@ export default { const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 console.log("msg", msg) //msg为转换后的JSON数据 - this.imgUrl5 = 'data:image/png;base64,' + msg.pic; - console.log("imageUrl", imageUrl) + document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) } catch { let imageType = 'arraybuffer'; const blob = new Blob([message], { type: imageType }) const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) console.log("imageUrl", imageUrl) } - } else if (topic.indexOf("stream0") != -1) { + } else if (topic.indexOf("img6") != -1) { + 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) //msg为转换后的JSON数据 + document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) + } catch { + let imageType = 'arraybuffer'; + const blob = new Blob([message], { type: imageType }) + const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) + console.log("imageUrl", imageUrl) + } + }else if (topic.indexOf("img7") != -1) { + 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) //msg为转换后的JSON数据 + document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg)) + } catch { + let imageType = 'arraybuffer'; + const blob = new Blob([message], { type: imageType }) + const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob) + console.log("imageUrl", imageUrl) + } + }else if (topic.indexOf("stream0") != -1) { const utf8decoder = new TextDecoder() const u8arr = new Uint8Array(message) const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 const msg = JSON.parse(temp) document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg)) } else if (topic.indexOf("stream1") != -1) { - console.log( - `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, - new Date(), - new Date().getMilliseconds() - ); + const utf8decoder = new TextDecoder() + const u8arr = new Uint8Array(message) + const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 + const msg = JSON.parse(temp) + document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg)) } else if (topic.indexOf("stream2") != -1) { - console.log( - `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, - new Date(), - new Date().getMilliseconds() - ); + const utf8decoder = new TextDecoder() + const u8arr = new Uint8Array(message) + const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 + const msg = JSON.parse(temp) + document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg)) } else if (topic.indexOf("stream3") != -1) { - console.log( - `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, - new Date(), - new Date().getMilliseconds() - ); + const utf8decoder = new TextDecoder() + const u8arr = new Uint8Array(message) + const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 + const msg = JSON.parse(temp) + document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg)) } else if (topic.indexOf("stream4") != -1) { - console.log( - `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, - new Date(), - new Date().getMilliseconds() - ); + const utf8decoder = new TextDecoder() + const u8arr = new Uint8Array(message) + const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 + const msg = JSON.parse(temp) + document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg)) } else if (topic.indexOf("stream5") != -1) { - console.log( - `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`, - new Date(), - new Date().getMilliseconds() - ); + const utf8decoder = new TextDecoder() + const u8arr = new Uint8Array(message) + const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 + const msg = JSON.parse(temp) + document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg)) + }else if (topic.indexOf("stream6") != -1) { + const utf8decoder = new TextDecoder() + const u8arr = new Uint8Array(message) + const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 + const msg = JSON.parse(temp) + document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg)) + }else if (topic.indexOf("stream7") != -1) { + const utf8decoder = new TextDecoder() + const u8arr = new Uint8Array(message) + const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 + const msg = JSON.parse(temp) + document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg)) } }); diff --git a/src/views/index.vue b/src/views/index.vue index 296b50c3..3b4c0e25 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -14,8 +14,7 @@ scrolling="no" v-if="videoUnityShow" > - + @@ -88,24 +87,24 @@ {{ item }} - + - + - + componentForm.componentType != '拥堵'&& + componentForm.componentType != '流量' + "> + - +
- + + + +
@@ -253,7 +258,7 @@ export default { titName: '', componentForm: { //单位 - company: '秒', + company: '', componentName: '', componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0', //周期间隔 @@ -267,7 +272,7 @@ export default { presentationForm: '', presentation: [], startValue: '', - timeMode: '触发', + timeMode: '', type: [], startSection: [], endSection: [], @@ -275,7 +280,8 @@ export default { typeFiltering: '', typeData: [] }, - typeData: ['小汽车', '公交车', '卡车', '非机动车', '行人'], + // typeData: ['小汽车', '公交车', '卡车', '非机动车', '行人'], + typeData:['机动车','非机动车','行人'], //展现形式 presentation: ['数值', '表格', '时间曲线图', '均值图'], @@ -399,11 +405,8 @@ export default { /** 创建mqtt */ createMqtt() { //创建链接，接收数据 - this.topicSends = ['stream' + this.number, 'trajectory' + this.number, 'detection' + this.number]; - - // console.log(window.PubScribe,'********************'); + this.topicSends = ['stream' + this.number, 'trajectory' + this.number, 'detection' + this.number,'trigger'+ this.$route.query.id]; window.PubScribe(this.topicSends, this.number, this.realInfo); - // mqtt = mqttConfig; /*mqtt = new mqttConfig(this.topicSends); client = mqtt.createConnect(); @@ -436,9 +439,9 @@ export default { console.log("res.data",res.data) if(res.data.data.videoAnalysisStatus == '未分析'){ this.disabledTrafficAnalysis= true - this.videoUnityShow = false - // this.videoUnityShow = true - // this.analysisData() + // this.videoUnityShow = false + this.videoUnityShow = true + this.analysisData() }else if(res.data.data.videoAnalysisStatus == '分析中'){ }else if(res.data.data.videoAnalysisStatus == '已分析'){ @@ -480,6 +483,7 @@ export default { trafficAnalysisBtn() { startTrafficAnalysis(this.$route.query.id).then(res => { // + console.log("res.data",res.data.data) }); }, //获取视频分析结果 @@ -507,9 +511,14 @@ export default { realInfo(topic, message) { switch (topic) { // 接收托片 - case 'img0': - case 'img1': - case 'img2': + case 'img'+this.number: + // case 'img1': + // case 'img2': + // case 'img3': + // case 'img4': + // case 'img5': + // case 'img6': + // case 'img7': try { const utf8decoder = new TextDecoder(); const u8arr = new Uint8Array(message); @@ -524,9 +533,14 @@ export default { } catch (error) {} break; // 树结构 - case 'stream0': - case 'stream1': - case 'stream2': + case 'stream'+this.number: + // case 'stream1': + // case 'stream2': + // case 'stream3': + // case 'stream4': + // case 'stream5': + // case 'stream6': + // case 'stream7': try { const utf8decoder1 = new TextDecoder(); const u8arr = new Uint8Array(message); @@ -536,10 +550,14 @@ export default { } catch (error) {} break; // 控制台输出 - case 'trajectory0': - case 'trajectory1': - case 'trajectory2': - case 'trajectory3': + case 'trajectory'+this.number: + // case 'trajectory1': + // case 'trajectory2': + // case 'trajectory3': + // case 'trajectory4': + // case 'trajectory5': + // case 'trajectory6': + // case 'trajectory7': try { const utf8decoder = new TextDecoder(); const u8arr = new Uint8Array(message); @@ -552,9 +570,14 @@ export default { } catch (error) {} break; // 触发 - case 'detection0': - case 'detection1': - case 'detection2': + case 'detection'+this.number: + // case 'detection1': + // case 'detection2': + // case 'detection3': + // case 'detection4': + // case 'detection5': + // case 'detection6': + // case 'detection7': try { const utf8decoder = new TextDecoder(); const u8arr = new Uint8Array(message); @@ -577,6 +600,17 @@ export default { } } catch (error) {} break; + case 'trigger'+this.$route.query.id: + try { + 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",msgN) + + } catch (error) {} + break; } this.receiveNews = ''; }, @@ -612,11 +646,21 @@ export default { if (res.data.data.company != '') { this.componentForm.company = res.data.data.company; } - if (res.data.data.timeMode != '') { - this.componentForm.timeMode = res.data.data.timeMode; - } + // this.componentForm.componentName = res.data.data.componentName+'-'+type this.componentForm.componentName = res.data.data.componentName; + if (res.data.data.timeMode != '') { + this.componentForm.timeMode = res.data.data.timeMode; + }else{ + console.log("this.componentForm.timeMode",this.componentForm.timeMode); + console.log("this.componentForm.componentType",this.componentForm.componentType); + if(this.componentForm.componentType=='延误'||this.componentForm.componentType=='拥堵'){ + console.log("this.componentForm.timeMode",this.componentForm.timeMode); + this.componentForm.timeMode = '周期统计' + }else{ + this.componentForm.timeMode = '触发' + } + } this.componentForm.componentParameterId = res.data.data.componentParameterId; this.componentForm.cycleInterval = res.data.data.cycleInterval; this.componentForm.startSectionIds = res.data.data.startSectionIds; @@ -714,6 +758,12 @@ export default { } if (res.data.data.timeMode != '') { this.componentForm.timeMode = res.data.data.timeMode; + }else{ + if(this.componentForm.componentType=='延误'||this.componentForm.componentType=='拥堵'){ + this.componentForm.timeMode = '周期统计' + }else{ + this.componentForm.timeMode = '触发' + } } // this.componentForm.componentName = res.data.data.componentName+'-'+type this.componentForm.componentName = res.data.data.componentName; @@ -868,6 +918,15 @@ export default { message: res.data.msg, type: 'success' }); + setTimeout(() => { + this.$message({ + type: "warning", + message: "请点击交通分析，获取最新数据！", + showClose: true, + duration:0, + }); + }, 5000); + document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data)); document .getElementById('mapModule') @@ -917,6 +976,14 @@ export default { message: res.data.msg, type: 'success' }); + setTimeout(() => { + this.$message({ + type: "warning", + message: "请点击交通分析，获取最新数据！", + showClose: true, + duration:0, + }); + }, 5000); console.log('startFigureName', this.startFigureName); document.getElementById('mapModule').contentWindow.postFigureId(JSON.stringify(res.data.data)); console.log('this.numberNew', this.numberNew); @@ -1009,7 +1076,7 @@ export default { this.component = false; this.componentForm = { //单位 - company: '秒', + company: '', componentName: '', componentParameterId: '01888e05fac246b29e3a19a27c3d2ab0', //周期间隔 @@ -1023,7 +1090,7 @@ export default { presentationForm: '', presentation: [], startValue: '', - timeMode: '触发', + timeMode: '', type: [], startSection: [], endSection: [],