@@ -49,9 +49,10 @@ import tableShow from '../chart/tableShow.vue';
import pieChart from '../chart/pieChart.vue';
import detailDialog from '../chart/detailDialog.vue';
import regionTable from '../chart/regionTable.vue';
+import { watch } from 'fs';
export default {
name: 'typeChart', //类型组件
- props: ['pageType', 'triggerType', 'data', 'echartArr', 'componentName','title'],
+ props: ['pageType', 'triggerType', 'data', 'echartArr', 'componentName', 'title'],
components: {
lineChart,
barChart,
@@ -63,12 +64,26 @@ export default {
},
data() {
return {
+ total: 0
};
},
- created(){
+ created() {
+
},
- methods: {},
- mounted() {}
+ methods: {
+ // 计算类型的数值
+
+ },
+ mounted() { },
+ watch: {
+ list(newVal) {
+ if (newVal.length != 0) {
+ newVal[newVal.length - 1].type_data.forEach(ele => {
+ this.total += ele.quantity
+ })
+ }
+ }
+ }
};
-
\ No newline at end of file
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/bounced/dataBoard.vue b/src/views/bounced/dataBoard.vue
index 26058680..2be00af7 100644
--- a/src/views/bounced/dataBoard.vue
+++ b/src/views/bounced/dataBoard.vue
@@ -1,8 +1,9 @@
+
-
+
@@ -19,8 +20,9 @@
+ :componentName="o.componentName" :data="o.trigger"
+ :echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
+ />
@@ -54,6 +56,12 @@ export default {
default() {
return [];
}
+ },
+ triggerListData: {
+ type: Array,
+ default() {
+ return [];
+ }
}
},
data() {
@@ -295,33 +303,35 @@ export default {
// 路线数据
headWay: [],
- itemsDataObject: {
- }
+ tripData: [],
+
+ sectionArr:[]
};
},
created() {
+ console.log(this.sectionData);
this.idVal = this.$route.query.id;
getComponentSection({ VideoId: this.idVal }).then((res) => {
if (res.data.code == 200) {
console.log(res.data.data, '11111111111111111');
- this.componentList = res.data.data;
- // 断面
- var sectionArr = [];
+ this.componentList = res.data.data
+ // this.siftData()
// 区域
- res.data.data.forEach((val) => {
- sectionArr.push(val.combinationName);
- sectionArr = Array.from(new Set(sectionArr));
+ this.componentList.forEach((val) => {
+ this.sectionArr.push(val.combinationName);
+ this.sectionArr = Array.from(new Set(this.sectionArr));
});
- this.sectionData = sectionArr.map((item) => {
+ this.sectionData = this.sectionArr.map((item) => {
item = { title: item, children: [] };
- res.data.data.forEach((val) => {
+ this.componentList.forEach((val) => {
if (item.title == val.combinationName) {
item.children.push(val);
}
});
return item;
});
+
} else if (res.data.code == 404) {
}
});
@@ -329,7 +339,21 @@ export default {
},
methods: {
-
+ siftData() {
+ this.componentList.forEach((val) => {
+ this.sectionArr.push(val.combinationName);
+ this.sectionArr = Array.from(new Set(this.sectionArr));
+ });
+ this.sectionData = this.sectionArr.map((item) => {
+ item = { title: item, children: [] };
+ this.componentList.forEach((val) => {
+ if (item.title == val.combinationName) {
+ item.children.push(val);
+ }
+ });
+ return item;
+ });
+ },
// 组件图标点击下拉事件
sectionHandle(i) {
let sections = document.querySelectorAll('.section');
@@ -339,7 +363,7 @@ export default {
if (downPulls1[i].dataset.num % 2 == 0) {
downPulls1[i].style.cssText = 'transform: rotate(180deg);transition: all 0.5s linear;';
- sections[i].style.height = sections[i].firstChild.offsetHeight + 20 + 'px';
+ sections[i].style.height = 'auto';
} else {
downPulls1[i].style.cssText = 'transition: all 0.5s linear;';
sections[i].style.height = '500px';
@@ -347,84 +371,10 @@ export default {
}
},
- //递归筛选
- // counterCalc(sdata, tdata) {
- // this.headWay = this.triggerList.filter((val) => {
- // return val.det_id == sdata.graphId
- // })
- // debugger
- // console.log(this.headWay);
- // // sdata.forEach( => {
- // // });
- // },
- // 筛选触发数据
- tripHandle(s) {
- // debugger
- this.triggerList.forEach(item => {
- if (this.itemsDataObject[item.obj_id]) {
- if (this.itemsDataObject[item.obj_id].det_id !== item.det_id || this.itemsDataObject[item.obj_id].det_id.split('-').pop() !== item.det_id) {
- this.itemsDataObject[item.obj_id] = { ...item, det_id: this.itemsDataObject[item.obj_id].det_id + '-' + item.det_id }
- }
- } else {
- this.itemsDataObject[item.obj_id] = item
- }
- })
- // debugger
- console.log(this.itemsDataObject, '364');
- // var key = s.graphId + 'out';
- // var data = wayLine[key];
-
- // var counter = data.length;//流程
- // if (s.superiorData.length > 0) {
- // var arr = this.counterCalc(s.superiorData, data);
- // return
- // }
- // this.counterCalc(s,data)
- /*
- var dataMap = {};//data
- var zoneStruct = [{
- a:123,
- b:456,
- end:456
- },{
- a:123,
- b:789,
- c:888,
- end:888
- },{
- a:123,
- b:456,
- c:888,
- end:888
- },{
- a:123,
- end:123
- }]
-
- var objArr={}
-
- if(dataMap[s.graphId]==undefined){
- dataMap[s.graphId]=[]
- }
- dataMap[s.graphId].push(s)
-
- var arr = zoneStruct.find(end==s.graphId);
-
- s.objectid
-
- //arr == dataMap[s.graphId] 是相同的
- */
- // console.log(s);
- // 单个区域或者断面的触发数据
- // let arr = this.triggerList.filter((val) => {
- // return val.det_id == s.graphId
-
- // })
- // console.log(arr);
-
- }
+ // 触发数据的类型数值
+
},
mounted() {
},
@@ -446,19 +396,40 @@ export default {
// this.$store.commit('setMqtt',newVal)
- console.log(newVal, 'newVal');
- this.triggerList = newVal;
- for (let i = 0; i < this.triggerList.length; i++) {
- if (this.triggerList[i].headWay == -1) {
- this.triggerList[i].headWay = '';
- } else if (this.triggerList[i].lane == -1) {
- this.triggerList[i].lane = '';
- }
- }
+ // console.log(newVal, 'newVal');
+ // this.triggerList = newVal;
+
},
immediate: true
+ },
+ triggerListData: {
+ handler(newVal) {
+ this.triggerList = newVal
+ console.log(newVal, 'triggerlistData');
+ if (newVal.length != 0) {
+ this.componentList.forEach(ele => {
+ if (ele.trigger == undefined) {
+ ele.trigger = []
+ }
+ this.triggerList.forEach(item => {
+ if (ele.analogAreaComponentId == item.component_id) {
+ if (ele.trigger.length == 10) {
+ ele.trigger.pop()
+
+ } else {
+ ele.trigger.unshift(item)
+ }
+ }
+ })
+ })
+ this.siftData()
+ }
+
+ },
+ immediate: true
+
}
}
};
@@ -507,10 +478,12 @@ export default {
transition: all 1s;
overflow: hidden;
}
-.dataBoard .section{
+
+.dataBoard .section {
float: left;
margin-top: 20px;
}
+
.dataBoard .section:nth-child(1),
.dataBoard .section:nth-child(2) {
margin-top: 0;
diff --git a/src/views/index.vue b/src/views/index.vue
index 8d9b6a1a..2c2bbf35 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,409 +1,428 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 存储
-
-
-
视频分析
-
交通分析
-
-
-
-
-
+
+
-
-
- {{item.graphicName}}
-
-
-
-
- {{item.graphicName}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 确认
- 取消
-
-
-
-
-
-
-
![\"\"](\"@/assets/img/AnalysisMain/leftTop.png\")
\r\n ![\"\"](\"@/assets/img/AnalysisMain/leftTop2.png\")
\r\n ![\"\"](\"@/assets/img/AnalysisMain/ssVideo.png\")
\r\n ![\"\"](\"@/assets/img/AnalysisMain/lxVideo.png\")
\r\n ![\"\"](\"@/assets/img/AnalysisMain/status.png\")
\r\n {{ item.status }}\r\n ![\"\"](\"@/assets/img/AnalysisMain/video)
\r\n \r\n \r\n ![](\"@/assets/img/AnalysisMain/add.png\")
\r\n