This commit is contained in:
chengdandan 2023-02-04 18:16:22 +08:00
parent e391f08dc4
commit 350c45f887
5 changed files with 185 additions and 89 deletions

View File

@ -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) //msgJSON
// 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) //msgJSON
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) //msgJSON
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) //msgJSON
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) //msgJSON
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) //msgJSON
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) //msgJSON
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) //msgJSON
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))
}
});

View File

@ -14,8 +14,7 @@
scrolling="no"
v-if="videoUnityShow"
></iframe>
<!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none"
ref="iframe"></iframe> -->
<!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none" ref="iframe"></iframe> -->
<el-empty :description="description" v-if="videoAnalysisShow">
<!-- <el-button type="primary">按钮</el-button> -->
<!-- <el-button type="primary" size="mini" @click="videoAnalysisBtn" v-if="videoAnalysisShow">视频分析</el-button> -->
@ -88,24 +87,24 @@
<el-checkbox v-for="item in typeData" :label="item" :key="item">{{ item }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="数值筛选:" v-if="componentForm.componentType != 'OD'">
<el-form-item label="数值筛选:" v-if="componentForm.componentType != 'OD' &&componentForm.componentType != '类型'&&componentForm.componentType != '流量'">
<el-input-number v-model="componentForm.startValue"></el-input-number>
<el-input-number v-model="componentForm.endValue" style="margin-left:5%"></el-input-number>
</el-form-item>
<el-form-item label="时间模式:">
<el-select v-model="componentForm.timeMode" placeholder="请选择时间模式">
<el-option label="触发" value="touch"></el-option>
<el-option label="触发" value="触发" v-if="componentForm.componentType != '延误'&&componentForm.componentType != '拥堵'"></el-option>
<el-option
label="周期时刻"
value="timeing"
value="周期时刻"
v-if="
componentForm.componentType != '排队数' &&
componentForm.componentType != '排队数' &&
componentForm.componentType != '检测数' &&
componentForm.componentType != '延误' &&
componentForm.componentType != '拥堵'
"
></el-option>
<el-option label="周期统计" value="date" v-if="componentForm.componentType != 'OD'"></el-option>
componentForm.componentType != '拥堵'&&
componentForm.componentType != '流量'
"></el-option>
<el-option label="周期统计" value="周期统计" v-if="componentForm.componentType != 'OD'"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="触发类型:" v-if="componentForm.timeModel=='touch'">
@ -114,12 +113,18 @@
<el-radio label="间隔"></el-radio>
</el-radio-group>
</el-form-item> -->
<el-form-item label="周期间隔:" v-if="componentForm.timeMode != 'touch'">
<el-form-item label="周期间隔:" v-if="componentForm.timeMode != '触发'">
<!-- <el-slider v-model="componentForm.cycleInterval" show-input>
</el-slider> -->
<div style="display:inline">
<el-select v-model="componentForm.company" placeholder="请选择单位" @change="changeCompany">
<el-option v-for="item in timeSelect" :key="item.value" :label="item.label" :value="item.value"></el-option>
<!-- <el-option v-for="item in timeSelect" :key="item.value" :label="item.label" :value="item.value"></el-option> -->
<el-option label="秒" value="秒" v-if="componentForm.timeMode != '周期统计'"></el-option>
<el-option
label="分钟"
value="分钟"
></el-option>
<el-option label="小时" value="小时" ></el-option>
</el-select>
<el-slider v-model="componentForm.cycleInterval" :max="max"> </el-slider>
</div>
@ -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: [],