From 6fc3855ff1a4e65177f2b1bb5e7b2086af0ba986 Mon Sep 17 00:00:00 2001 From: chengdandan <2549057906@qq.com> Date: Tue, 28 Feb 2023 11:01:57 +0800 Subject: [PATCH] 20230228 --- src/components/chart/lineChart.vue | 19 +++--- src/main.js | 1 + src/views/AnalysisMain.vue | 57 +++++++---------- src/views/bounced/dataBoard.vue | 98 ++++++++++++++---------------- 4 files changed, 81 insertions(+), 94 deletions(-) diff --git a/src/components/chart/lineChart.vue b/src/components/chart/lineChart.vue index 9a136b97..d47b2596 100644 --- a/src/components/chart/lineChart.vue +++ b/src/components/chart/lineChart.vue @@ -236,11 +236,6 @@ export default { // console.log("newVal",newVal) series[0].data = newVal.map(val => { return val.speed; - // if(timeMode=='周期统计'){ - // return val.ave_speed; - // }else{ - // return val.speed; - // } }); } else if (title === '流量') { series[0].data = newVal.map(ele => { @@ -262,11 +257,21 @@ export default { }); } else if (title === '排队数') { series[0].data = newVal.map(val => { - return val.n_queue; + // return val.n_queue; + if(timeMode=='周期统计'){ + return val.ave_queue; + }else{ + return val.n_queue; + } }); } else if (title === '检测数') { series[0].data = newVal.map(val => { - return val.n_stay; + if(timeMode=='周期统计'){ + return val.ave_stay; + }else{ + return val.n_stay; + } + }); } else if (title === '延误') { series[0].data = newVal.map(val => { diff --git a/src/main.js b/src/main.js index 29bdbbfc..123012d3 100644 --- a/src/main.js +++ b/src/main.js @@ -112,6 +112,7 @@ window.PubScribe = function (topic, number, _callback) { }); } else { if (topic != null) { + console.log("topic",topic) currentTopics = topic; client.subscribe(currentTopics, { qos: 0 diff --git a/src/views/AnalysisMain.vue b/src/views/AnalysisMain.vue index 34271163..925347a9 100644 --- a/src/views/AnalysisMain.vue +++ b/src/views/AnalysisMain.vue @@ -156,7 +156,8 @@ export default { formLabelWidth: '120px', formLabelWidth: '200px', videoTypeForm:{ - videoType:'实时视频' + // videoType:'实时视频' + videoType:'离线视频' }, videoList:[], fullscreenLoading: false, @@ -182,41 +183,14 @@ destroyed: function () { /** 创建mqtt */ createMqtt() { //创建链接，接收数据 - window.PubScribe(null,-1,this.realInfo); - - /*mqtt = new mqttConfig(this.topicSends); - client = mqtt.createConnect(); - // client.subscribe(,, { qos: 0 }) - // client.subscribe('img'+this.videoList[i].num, { qos: 0 }, (err)=> { - // if (!err) { - // console.log("订阅成功"); - // client.publish('msg_stream',JSON.stringify({"msg_flag":parseInt(-1)})) - - // } else { - // console.log('消息订阅失败！') - // } - // }); - // setTimeout(function() { - client.subscribe(['hert','img0','img1','img2','img3','img4','img5','img6','img7'], { qos: 0 }, (err)=> { - if (!err) { - console.log("订阅图片成功"); - // client.publish('msg_stream',JSON.stringify({"msg_flag":parseInt(-1)})) - - } else { - console.log('消息订阅失败！') - } - }); - // }, 5000); - client.on("message", (topic, message) => { - //数据分类 - try { - // this.receiveNews = this.receiveNews.concat(message); - // this.realInfo(topic, this.receiveNews); - this.realInfo(topic, message); - } catch (error) { + if(this.videoTypeForm.videoType=='实时视频'){ + window.PubScribe(null,-1,this.realInfo); + }else if(this.videoTypeForm.videoType=='离线视频'){ + console.log("this.videoTypeForm.videoType",this.videoTypeForm.videoType) + this.topicSends = ['VideoStatusData']; + window.PubScribe(this.topicSends,-1, this.realInfo); + } - } - });*/ }, //停止订阅mqtt disConnect() { @@ -277,6 +251,19 @@ destroyed: function () { } catch (error) { + } + break; + case "VideoStatusData": + try { + const utf8decoder = new TextDecoder() + const u8arr = new Uint8Array(message) + const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 + const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 + console.log("VideoStatusData", msg) //msg为转换后的JSON数据 + + + } catch (error) { + } break; } diff --git a/src/views/bounced/dataBoard.vue b/src/views/bounced/dataBoard.vue index ade1f407..3e38688b 100644 --- a/src/views/bounced/dataBoard.vue +++ b/src/views/bounced/dataBoard.vue @@ -249,49 +249,44 @@ export default { if (newVal!= undefined&&newVal.length != 0 ) { newVal.forEach(ele => { - // if( ele.timeMode == '周期统计'){ - // var thatNN = this; - // if (ele.cycleTimeData.length == 10) { - // ele.cycleTimeData.pop(); - // } else { - // ele.cycleStatisticsData.forEach(item => { - // if (item.type_data != null) { - // // 周期时刻的类型数据 - // thatNN.typeCycleStatistics = item; - // } - // ele.cycleStatisticsData.unshift(item); - // // thatN.$nextTick(() => { - // if(thatNN.$refs.itemTypeChartRef2!=undefined){ - - // // 轮循周期时刻生成的各类组件 - // for (let i = 0; i < thatNN.$refs.itemTypeChartRef2.length; i++) { - // let itemTypeChartRef2 = thatNN.$refs.typeChartRef1[i] - // if (itemTypeChartRef2.length!=0&&itemTypeChartRef2.dataArr!= undefined && itemTypeChartRef2.dataArr.length != 0) { + if( ele.timeMode == '周期统计'){ + var thatNN = this; + ele.cycleStatisticsData.forEach(item => { + if (item.type_data != null) { + // 周期时刻的类型数据 + thatNN.typeCycleStatistics = item; + } + console.log("thatNN.$refs.typeChartRef2",thatNN.$refs.typeChartRef2) + // thatN.$nextTick(() => { + if(thatNN.$refs.typeChartRef2!=undefined){ + // // 轮循周期时刻生成的各类组件 + for (let i = 0; i < thatNN.$refs.typeChartRef2.length; i++) { + let itemTypeChartRef2 = thatNN.$refs.typeChartRef2[i] - // if (itemTypeChartRef2.echartArr.includes('时间曲线图')) { - // thatNN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(thatNN.$refs.typeChartRef1[i].dataArr, thatNN.$refs.typeChartRef1[i].componentName.split('_')[0],'周期统计') - // } - // if (itemTypeChartRef2.echartArr.includes('数值')) { - // thatNN.$refs.typeChartRef1[i].getDataArr(thatNN.$refs.typeChartRef1[i].dataArr) - // } - - // if (itemTypeChartRef2.echartArr.includes('直方图') &&itemTypeChartRef2.$refs.barChartRef.drawBar) { - // // 数据改变重新渲染柱状图 - // itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0]) - // } - // if (itemTypeChartRef2.echartArr.includes('饼状图') &&itemTypeChartRef2.$refs.pieChartRef.drawPie) { - // // 数据改变重新渲染饼图 - // itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0]) - // } - // if (itemTypeChartRef2.echartArr.includes('均值图') && itemTypeChartRef2.$refs.avgChartRef != undefined) { - // itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0]) - // } - // } - // } - // } - // }) - // } - // } + if (itemTypeChartRef2.length!=0&&itemTypeChartRef2.dataArr!= undefined && itemTypeChartRef2.dataArr.length != 0) { + console.log("itemTypeChartRef2.echartArr",itemTypeChartRef2.echartArr) + if (itemTypeChartRef2.echartArr.includes('时间曲线图')) { + thatNN.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(thatNN.$refs.typeChartRef2[i].dataArr, thatNN.$refs.typeChartRef2[i].componentName.split('_')[0],'周期统计') + } + if (itemTypeChartRef2.echartArr.includes('数值')) { + thatNN.$refs.typeChartRef2[i].getDataArr(thatNN.$refs.typeChartRef2[i].dataArr) + } + if (itemTypeChartRef2.echartArr.includes('直方图') &&itemTypeChartRef2.$refs.barChartRef.drawBar) { + // 数据改变重新渲染柱状图 + itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0]) + } + if (itemTypeChartRef2.echartArr.includes('饼状图') &&itemTypeChartRef2.$refs.pieChartRef.drawPie) { + // 数据改变重新渲染饼图 + itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0]) + } + if (itemTypeChartRef2.echartArr.includes('均值图') && itemTypeChartRef2.$refs.avgChartRef != undefined) { + itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0]) + } + } + } + } + }) + } // if ( ele.timeMode == '周期时刻') { // var thatN = this; // if (ele.cycleTimeData.length == 10) { @@ -369,7 +364,7 @@ export default { } ele.trigger.unshift(item); _this.$nextTick(() => { - if(_this.$refs.typeChartRef1!=undefined){ + if(_this.$refs.typeChartRef!=undefined){ for (let i = 0; i < _this.$refs.typeChartRef.length; i++) { // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据'); let itemTypeChart = _this.$refs.typeChartRef[i] @@ -529,13 +524,11 @@ export default { }, //周期统计 cycleStatisticsData: { - handler(newVal, oldVal) { - - console.log("oldVal",oldVal) + handler(newVal) { + console.log("newVal",newVal) if (newVal!= undefined&& newVal.length != 0 && this.sectionData) { - console.log("newVal",newVal) var that = this; - that.componentList.forEach(ele => { + that.classify.forEach((ele, index) => { // if (ele.cycleStatisticsData == undefined && ele.timeMode == '周期统计') { // ele.cycleStatisticsData = []; // }else{ @@ -546,17 +539,18 @@ export default { if (ele.cycleStatisticsData.length == 10) { ele.cycleStatisticsData.pop(); } else { - ele.cycleStatisticsData.unshift(item); + item.time = item.time.split('.')[0]; if (item.type_data != null) { that.typeCycleStatistics = item; } + ele.cycleStatisticsData.unshift(item); if(that.$refs.typeChartRef2!=undefined){ + console.log(that.$refs.typeChartRef2, '触发接收的表格数据'); for (let i = 0; i < that.$refs.typeChartRef2.length; i++) { let itemTypeChartRef2 = that.$refs.typeChartRef2[i]; - // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据'); + if (itemTypeChartRef2.length!=0&&itemTypeChartRef2.dataArr!= undefined && itemTypeChartRef2.dataArr.length != 0) { - // this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0]) if (itemTypeChartRef2.echartArr.includes('时间曲线图')) { that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(that.$refs.typeChartRef2[i].dataArr, that.$refs.typeChartRef2[i].componentName.split('_')[0],'周期统计') } @@ -593,7 +587,7 @@ export default { else { var _that = this - _that.componentList.forEach(ele => { + _that.classify.forEach(ele => { if ( ele.timeMode == '周期统计') { if (ele.cycleStatisticsData.length == 10) { ele.cycleStatisticsData.pop();