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

20230227

This commit is contained in:
chengdandan 2023-02-27 15:22:01 +08:00
parent 1bae98a151 27537a0814
commit dac4205654
22 changed files with 339 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
node_modules/.cache/babel-loader/707c80c5cb9d3ec9ed91511d9d73326f.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/babel-loader/b64202a54e54c7430718d949a298daf9.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/babel-loader/c90a7db1294db9fc3e3360c0ce4029f4.json generated vendored
View File

File diff suppressed because one or more lines are too long

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.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

14
src/components/chart/avgChart.vue
View File

@ -201,14 +201,14 @@ export default {
} }
] ]
}; };
// myChart.setOption(option); myChart.setOption(option);
// window.addEventListener('resize', function() { window.addEventListener('resize', function() {
// myChart.resize();
// });
this.$nextTick(() => {
myChart.setOption(option)
myChart.resize(); myChart.resize();
}) });
// this.$nextTick(() => {
// myChart.setOption(option)
// myChart.resize();
// })
} }
}, },
mounted() { mounted() {

14
src/components/chart/barChart.vue
View File

@ -124,14 +124,14 @@ export default {
} }
] ]
}; };
// myChart.setOption(option); myChart.setOption(option);
// window.addEventListener('resize', function() { window.addEventListener('resize', function() {
// myChart.resize();
// });
this.$nextTick(() => {
myChart.setOption(option)
myChart.resize(); myChart.resize();
}) });
// this.$nextTick(() => {
// myChart.setOption(option)
// myChart.resize();
// })
} }
}, },
mounted() { mounted() {

15
src/components/chart/lineChart.vue
View File

@ -140,15 +140,14 @@ export default {
], ],
series: this.getMessage(newVal, title) series: this.getMessage(newVal, title)
}; };
myChart.setOption(option);
// nextTick(() => {}) window.addEventListener('resize', function() {
this.$nextTick(() => {
console.log("this.$refs.lineChart.style.width",this.$refs.lineChart.style.width)
myChart.setOption(option)
// window.addEventListener('resize', function () {
myChart.resize(); myChart.resize();
// }); });
}) // this.$nextTick(() => {
// myChart.setOption(option)
// myChart.resize();
// })

14
src/components/chart/pieChart.vue
View File

@ -110,14 +110,14 @@ export default {
] ]
}; };
// myChart.setOption(option); myChart.setOption(option);
// window.addEventListener('resize', function() { window.addEventListener('resize', function() {
// myChart.resize();
// });
this.$nextTick(() => {
myChart.setOption(option)
myChart.resize(); myChart.resize();
}) });
// this.$nextTick(() => {
// myChart.setOption(option)
// myChart.resize();
// })
} }
}, },
mounted() { mounted() {

2
src/components/chart/regionTable.vue
View File

@ -193,7 +193,7 @@ export default {
/deep/ .el-table{ /deep/ .el-table{
height: 709px !important; height: 709px !important;
overflow-y: scroll; overflow-y: scroll;
z-index: 9999;
} }
.el-table::-webkit-scrollbar { width: 0 !important } .el-table::-webkit-scrollbar { width: 0 !important }
.tableContent { .tableContent {

2
src/components/chart/tableShow.vue
View File

@ -181,7 +181,7 @@ export default {
/deep/ .el-table{ /deep/ .el-table{
height: 709px !important; height: 709px !important;
overflow-y: scroll; overflow-y: scroll;
z-index: 9999;
} }
.el-table::-webkit-scrollbar { width: 0 !important } .el-table::-webkit-scrollbar { width: 0 !important }
.tableContent { .tableContent {

14
src/components/chart/thermalChart.vue
View File

@ -133,14 +133,14 @@ export default {
} }
] ]
}; };
// myChart.setOption(option); myChart.setOption(option);
// window.addEventListener('resize', function () { window.addEventListener('resize', function () {
// myChart.resize();
// });
this.$nextTick(() => {
myChart.setOption(option)
myChart.resize(); myChart.resize();
}) });
// this.$nextTick(() => {
// myChart.setOption(option)
// myChart.resize();
// })
} }
}, },
mounted() { mounted() {

1
src/components/target/OD.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div class="setion"> <div class="setion">
<p class="chartTitle"><span class="titleIcon"></span> {{ componentName }}{{ triggerType }}</p>
<div class="border"> <div class="border">
<detailDialog /> <detailDialog />
<thermalChart :pageType="pageType" :list="dataArr" :status="triggerType" :title="title" /> <thermalChart :pageType="pageType" :list="dataArr" :status="triggerType" :title="title" />

40
src/components/target/typeChart.vue
View File

@ -112,7 +112,7 @@
<div class="border" v-if="echartArr.includes('均值图')"> <div class="border" v-if="echartArr.includes('均值图')">
<detailDialog /> <detailDialog />
<avgChart <avgChart
ref="avgRefChart" ref="avgChartRef"
:componentName="componentName" :componentName="componentName"
:chartName="chartName" :chartName="chartName"
:pageType="pageType" :pageType="pageType"
@ -180,18 +180,15 @@ export default {
methods: { methods: {
// 计算类型数量的总和 // 计算类型数量的总和
getDataArr(val){ getDataArr(val){
console.log("getDataArr",val)
this.newDataArr = val this.newDataArr = val
this.getNewQueue(this.newDataArr) this.getNewQueue(this.newDataArr)
}, },
getTotal(dataArr) { getTotal(dataArr) {
return dataArr[0].type_data.reduce(function(prev, cur) { if(this.title=='类型'){
return dataArr[0].type_data.reduce(function(prev, cur) {
return cur.quantity + prev; return cur.quantity + prev;
}, 0); }, 0);
}
// return dataArr[0].type_data((pre, cur) => {
// return pre + cur
// }, 0)
}, },
// 计算类型的数值 // 计算类型的数值
getNewQueue(val) { getNewQueue(val) {
@ -211,20 +208,21 @@ export default {
mounted() {}, mounted() {},
watch: { watch: {
// 监听触发数据 // 监听触发数据
dataArr: { // dataArr: {
handler(newVal) {
// console.log('dataArr', newVal);
if (newVal != undefined && newVal.length != 0) {
this.getNewQueue(newVal);
}
},
immediate: true
}
// cycleTimeData: {
// handler(newVal) { // handler(newVal) {
// console.log(newVal); // // console.log('dataArr', newVal);
// } // if (newVal != undefined && newVal.length != 0) {
// this.getNewQueue(newVal);
// }
// },
// immediate: true
// }
// typeValue:{
// handler(newVal) {
// // console.log('dataArr', newVal);
// },
// immediate: true
// } // }
} }
}; };

4
src/views/bounced/analysisPreview.vue
View File

@ -67,8 +67,8 @@ export default {
// const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt // const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
var ip = window.location.host.split(":")[0]; var ip = window.location.host.split(":")[0];
console.log("ip",ip) console.log("ip",ip)
const host = `ws://${ip}:10087`; // const host = `ws://${ip}:10087`;
// const host = 'ws://172.16.1.168:10087/'; const host = 'ws://172.16.1.168:10087/';
const options = { const options = {
// 配置 // 配置

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

@ -7,7 +7,7 @@
<!-- 断面 --> <!-- 断面 -->
<div class="plate1" ref="plate1"> <div class="plate1" ref="plate1">
<div <div
:class="sectionData.length <= 2 ? 'sectionBox' : 'section'" :class="sectionData.length <= 1 ? 'sectionBox' : 'section'"
ref="section" ref="section"
v-for="s in sectionData" v-for="s in sectionData"
:key="s.analogAreaComponentId" :key="s.analogAreaComponentId"
@ -20,7 +20,7 @@
</p> </p>
<!-- <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span> --> <!-- <span class="downPull1" data-num="1" @click="sectionHandle(i)"></span> -->
</div> </div>
<!-- <el-tabs> --> <el-tabs >
<el-collapse v-model="acticveName" @change="handleChange"> <el-collapse v-model="acticveName" @change="handleChange">
<div style="position:relative" v-for="o in s.children" :key="o.analogAreaComponentId"> <div style="position:relative" v-for="o in s.children" :key="o.analogAreaComponentId">
<div class="titleGnag"></div> <div class="titleGnag"></div>
@ -69,7 +69,7 @@
:pageType="o.graphicType" :pageType="o.graphicType"
:triggerType="o.timeMode" :triggerType="o.timeMode"
:componentName="o.componentName" :componentName="o.componentName"
:dataArr="o.cycleStatistics" :dataArr="o.cycleStatisticsData"
:echartArr="o.presentationForm" :echartArr="o.presentationForm"
:title="o.componentName.split('_')[0]" :title="o.componentName.split('_')[0]"
:chartName="o.combinationName" :chartName="o.combinationName"
@ -78,7 +78,7 @@
</el-collapse-item> </el-collapse-item>
</div> </div>
</el-collapse> </el-collapse>
<!-- </el-tabs> --> </el-tabs>
</div> </div>
</template> </template>
</div> </div>
@ -123,7 +123,7 @@ export default {
} }
}, },
//周期统计 //周期统计
cycleStatistics: { cycleStatisticsData: {
type: Array, type: Array,
default() { default() {
return []; return [];
@ -174,14 +174,23 @@ export default {
methods: { methods: {
getNew() { getNew() {
// this.idVal = ; // this.idVal = ;
getComponentSection({ VideoId: this.$route.query.id }).then(res => { getComponentSection({ VideoId: this.$route.query.id ,Number:10}).then(res => {
if (res.data.code == 200) { if (res.data.code == 200) {
console.log(res.data.data, '组件的数据'); // console.log(res.data.data, '组件的数据');
this.componentList = res.data.data; this.componentList = res.data.data;
this.siftData(); this.siftData();
} }
}); });
}, },
// 手风琴下拉切换
handleChange() {
this.$nextTick(function () {
var myEvent = new Event("resize");
window.dispatchEvent(myEvent);
});
},
siftData() { siftData() {
this.sectionArr = []; this.sectionArr = [];
this.sectionData = []; this.sectionData = [];
@ -190,29 +199,76 @@ export default {
// console.log("val",val) // console.log("val",val)
this.sectionArr.push(val.combinationName); this.sectionArr.push(val.combinationName);
this.sectionArr = Array.from(new Set(this.sectionArr)); this.sectionArr = Array.from(new Set(this.sectionArr));
}); });
this.sectionData = this.sectionArr.map(item => { this.sectionData = this.sectionArr.map(item => {
item = { title: item, children: [] }; item = { title: item, children: [] };
this.acticveName = []; this.acticveName = [];
this.componentList.forEach(val => { this.componentList.forEach(val => {
console.log("val",val)
if (item.title == val.combinationName) { if (item.title == val.combinationName) {
this.classify.push(val); this.classify.push(val);
item.children.push(val); item.children.push(val);
if(val.timeMode=='周期统计'||this.cycleStatisticsData.length==0){
this.cycleStatisticsData = item.cycleStatisticsData
var _that = this
_that.componentList.forEach(ele => {
if ( ele.timeMode == '周期统计') {
if (ele.cycleStatisticsData.length == 10) {
ele.cycleStatisticsData.pop();
} else {
// item.time = item.time.split('.')[0];
// _that.typeCycleStatistics = item;
ele.cycleStatisticsData.unshift();
if(_that.$refs.typeChartRef2!=undefined){
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])
}
if (itemTypeChartRef2.echartArr.includes('数值')) {
_that.$refs.typeChartRef2[i].getDataArr(_that.$refs.typeChartRef2[i].dataArr)
}
// console.log(item,'组件数据');
if (itemTypeChartRef2.echartArr.includes('直方图')&&itemTypeChartRef2.$refs.barChartRef.drawBar) {
// 数据改变重新渲染柱状图
// console.log(item, '组件');
itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0])
}
if (itemTypeChartRef2.echartArr.includes('饼状图')&&itemTypeChartRef2.$refs.pieChartRef.drawPie) {
// 数据改变重新渲染饼图
itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
}
// if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
// item.$refs.avgChartRef.drawBar(item.dataArr[0])
// }
if (itemTypeChartRef2.echartArr.includes('均值图') && itemTypeChartRef2.$refs.avgChartRef != undefined) {
itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0])
}
}
}
}
}
}
});
}
if(val.timeMode=='周期时刻'||this.cycleTimeData.length==0){
this.cycleTimeData = item.cycleTimeData
}
} }
this.acticveName.push([val.analogAreaComponentId]); this.acticveName.push([val.analogAreaComponentId]);
}); });
return item; return item;
}); });
}, },
handleChange(val) {
// console.log(val);
// for (let i = 0; i < this.$refs.typeChartRef.length; i++) {
// console.log( "11111",this.$refs.typeChartRef[i].$refs.lineChartRef.style.width);
// }
},
// 组件图标点击下拉事件 // 组件图标点击下拉事件
sectionHandle(i) { sectionHandle(i) {
let sections = document.querySelectorAll('.section'); let sections = document.querySelectorAll('.section');
@ -234,8 +290,6 @@ export default {
} }
}, },
channge(oldVal, newVal) { channge(oldVal, newVal) {
console.log('old', oldVal);
console.log('newVal', newVal);
if (oldVal == 'second') { if (oldVal == 'second') {
this.sectionArr = []; this.sectionArr = [];
this.sectionData = []; this.sectionData = [];
@ -271,7 +325,7 @@ export default {
handler(newVal) { handler(newVal) {
this.triggerList = newVal; this.triggerList = newVal;
// 触发数据 // 触发数据
console.log(newVal, '触发数据'); // console.log(newVal, '触发数据');
var _this = this var _this = this
if (newVal.length != 0 && _this.sectionData) { if (newVal.length != 0 && _this.sectionData) {
_this.classify.forEach((ele, index) => { _this.classify.forEach((ele, index) => {
@ -290,29 +344,34 @@ export default {
} }
ele.trigger.unshift(item); ele.trigger.unshift(item);
_this.$nextTick(() => { _this.$nextTick(() => {
for (let i = 0; i < _this.$refs.typeChartRef.length; i++) { if(_this.$refs.typeChartRef1!=undefined){
for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
// console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据'); // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
let item = _this.$refs.typeChartRef[i] let itemTypeChart = _this.$refs.typeChartRef[i]
if (item.dataArr!= undefined && item.dataArr.length != 0) { if (itemTypeChart.dataArr!= undefined && itemTypeChart.dataArr.length != 0) {
console.log("item.echartArr",item.echartArr) if (itemTypeChart.echartArr.includes('时间曲线图')) {
if (item.echartArr.includes('时间曲线图')) {
_this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(_this.$refs.typeChartRef[i].dataArr, _this.$refs.typeChartRef[i].componentName.split('_')[0]) _this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(_this.$refs.typeChartRef[i].dataArr, _this.$refs.typeChartRef[i].componentName.split('_')[0])
} }
if (item.echartArr.includes('数值')) { if (itemTypeChart.echartArr.includes('数值')) {
_this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr) _this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr)
} }
if (item.echartArr.includes('直方图') && item.componentName.split('_')[0]) { if (itemTypeChart.echartArr.includes('直方图') && itemTypeChart.componentName.split('_')[0]) {
// 数据改变重新渲染柱状图 // 数据改变重新渲染柱状图
item.$refs.barChartRef.drawBar(item.dataArr[0]) itemTypeChart.$refs.barChartRef.drawBar(itemTypeChart.dataArr[0])
} }
if (item.echartArr.includes('饼状图') && item.componentName.split('_')[0]) { if (itemTypeChart.echartArr.includes('饼状图') && itemTypeChart.componentName.split('_')[0]) {
console.log(item, '饼图组件');
// 数据改变重新渲染饼图 // 数据改变重新渲染饼图
item.$refs.pieChartRef.drawPie(item.dataArr[0]) itemTypeChart.$refs.pieChartRef.drawPie(itemTypeChart.dataArr[0])
} }
if (itemTypeChart.echartArr.includes('均值图') && itemTypeChart.$refs.avgChartRef != undefined) {
itemTypeChart.$refs.avgChartRef.drawBar(itemTypeChart.dataArr[0])
}
} }
} }
}
}) })
@ -329,12 +388,14 @@ export default {
handler(newVal) { handler(newVal) {
// 监听到打印周期时刻数据 // 监听到打印周期时刻数据
console.log(newVal, '周期时刻数据'); console.log(newVal, '周期时刻数据');
var that = this; var thatN = this;
if (newVal.length != 0 && this.sectionData) { if (newVal!= undefined&&newVal.length != 0 && thatN.sectionData) {
that.classify.forEach((ele, index) => { thatN.classify.forEach((ele, index) => {
if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') { // if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
ele.cycleTimeData = []; // ele.cycleTimeData = [];
} // }else{
// }
newVal.forEach(item => { newVal.forEach(item => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻') { if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期时刻') {
if (ele.cycleTimeData.length == 10) { if (ele.cycleTimeData.length == 10) {
@ -343,76 +404,216 @@ export default {
item.time = item.time.split('.')[0]; item.time = item.time.split('.')[0];
if (item.type_data != null) { if (item.type_data != null) {
// 周期时刻的类型数据 // 周期时刻的类型数据
that.typeCycleTimeData = item; thatN.typeCycleTimeData = item;
} }
ele.cycleTimeData.unshift(item); ele.cycleTimeData.unshift(item);
that.$nextTick(() => { // thatN.$nextTick(() => {
if(thatN.$refs.typeChartRef1!=undefined){
// console.log("thatN.$refs.typeChartRef1",thatN.$refs.typeChartRef1)
// 轮循周期时刻生成的各类组件 // 轮循周期时刻生成的各类组件
for (let i = 0; i < that.$refs.typeChartRef1.length; i++) { for (let i = 0; i < thatN.$refs.typeChartRef1.length; i++) {
item = that.$refs.typeChartRef1[i] let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i]
if (item.dataArr.length != 0) { if (itemTypeChartRef1.length!=0&&itemTypeChartRef1.dataArr!= undefined && itemTypeChartRef1.dataArr.length != 0) {
if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
that.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(that.$refs.typeChartRef1[i].dataArr, that.$refs.typeChartRef[i].componentName.split('_')[0]) thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(thatN.$refs.typeChartRef1[i].dataArr, thatN.$refs.typeChartRef1[i].componentName.split('_')[0])
if (item.$refs.barChartRef.drawBar) {
// 数据改变重新渲染柱状图
item.$refs.barChartRef.drawBar(item.dataArr[0])
} else if (item.$refs.pieChartRef.drawPie) {
// 数据改变重新渲染饼图
item.$refs.pieChartRef.drawPie(item.dataArr[0])
} }
if (itemTypeChartRef1.echartArr.includes('数值')) {
thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr)
}
if (itemTypeChartRef1.echartArr.includes('直方图') &&itemTypeChartRef1.$refs.barChartRef.drawBar) {
// 数据改变重新渲染柱状图
itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0])
}
if (itemTypeChartRef1.echartArr.includes('饼状图') &&itemTypeChartRef1.$refs.pieChartRef.drawPie) {
// 数据改变重新渲染饼图
itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0])
}
if (itemTypeChartRef1.echartArr.includes('均值图') && itemTypeChartRef1.$refs.avgChartRef != undefined) {
itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0])
}
} }
} }
}); }
// });
} }
} }
}); });
}); });
}else{
var _thatN= this
_thatN.classify.forEach((ele, index) => {
// if (ele.cycleTimeData == undefined && ele.timeMode == '周期时刻') {
// ele.cycleTimeData = [];
// }else{
// }
// newVal.forEach(item => {
if (ele.timeMode == '周期时刻') {
if (ele.cycleTimeData.length == 10) {
ele.cycleTimeData.pop();
} else {
// item.time = item.time.split('.')[0];
// if (item.type_data != null) {
// 周期时刻的类型数据
_thatN.typeCycleTimeData = item;
// }
// ele.cycleTimeData.unshift(item);
// _thatN.$nextTick(() => {
if(_thatN.$refs.typeChartRef1!=undefined){
// console.log("thatN.$refs.typeChartRef1",_thatN.$refs.typeChartRef1)
// 轮循周期时刻生成的各类组件
for (let i = 0; i < _thatN.$refs.typeChartRef1.length; i++) {
let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i]
if (itemTypeChartRef1.length!=0&&itemTypeChartRef1.dataArr!= undefined && itemTypeChartRef1.dataArr.length != 0) {
if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
_thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(_thatN.$refs.typeChartRef1[i].dataArr, _thatN.$refs.typeChartRef1[i].componentName.split('_')[0])
}
if (itemTypeChartRef1.echartArr.includes('数值')) {
_thatN.$refs.typeChartRef1[i].getDataArr(_thatN.$refs.typeChartRef1[i].dataArr)
}
if (itemTypeChartRef1.echartArr.includes('直方图') &&itemTypeChartRef1.$refs.barChartRef.drawBar) {
// 数据改变重新渲染柱状图
itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0])
}
if (itemTypeChartRef1.echartArr.includes('饼状图') &&itemTypeChartRef1.$refs.pieChartRef.drawPie) {
// 数据改变重新渲染饼图
itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0])
}
if (itemTypeChartRef1.echartArr.includes('均值图') && itemTypeChartRef1.$refs.avgChartRef != undefined) {
itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0])
}
}
}
}
// });
}
}
// });
});
} }
}, },
immediate: true immediate: true
}, },
cycleStatistics: { //周期统计
cycleStatisticsData: {
handler(newVal) { handler(newVal) {
if (newVal.length != 0 && this.sectionData) {
this.componentList.forEach(ele => { var that = this;
if (ele.cycleStatistics == undefined && ele.timeMode == '周期统计') { if (newVal!= undefined&& newVal.length != 0 && that.sectionData) {
ele.cycleStatistics = []; console.log("newVal",newVal)
} that.componentList.forEach(ele => {
// if (ele.cycleStatisticsData == undefined && ele.timeMode == '周期统计') {
// ele.cycleStatisticsData = [];
// }else{
// // ele.cycleStatisticsData =
// }
console.log(" ele.cycleStatisticsData", ele.cycleStatisticsData)
newVal.forEach(item => { newVal.forEach(item => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期统计') { if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '周期统计') {
if (ele.cycleStatistics.length == 10) { if (ele.cycleStatisticsData.length == 10) {
ele.cycleStatistics.pop(); ele.cycleStatisticsData.pop();
} else { } else {
ele.cycleStatisticsData.unshift(item);
item.time = item.time.split('.')[0]; item.time = item.time.split('.')[0];
if (item.type_data != null) { if (item.type_data != null) {
this.typeCycleStatistics = item; that.typeCycleStatistics = item;
} }
ele.cycleStatistics.unshift(item); console.log(" ele.cycleStatisticsData", ele.cycleStatisticsData)
for (let i = 0; i < this.$refs.typeChartRef2.length; i++) { if(that.$refs.typeChartRef2!=undefined){
item = that.$refs.typeChartRef2[i]; for (let i = 0; i < that.$refs.typeChartRef2.length; i++) {
let itemTypeChartRef2 = that.$refs.typeChartRef2[i];
// console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据'); // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
if (item.dataArr.length != 0) { 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]) // this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0])
if (item.componentName.split('_')[0] == "类型") { if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
// console.log(item,'组件数据'); that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(that.$refs.typeChartRef2[i].dataArr, that.$refs.typeChartRef2[i].componentName.split('_')[0])
if (item.echartArr.includes('直方图')) {
// 数据改变重新渲染柱状图
console.log(item, '组件');
item.$refs.barChartRef.drawBar(item.dataArr[0])
} else if (item.echartArr.includes('饼状图')) {
// 数据改变重新渲染饼图
item.$refs.pieChartRef.drawPie(item.dataArr[0])
} }
if (itemTypeChartRef2.echartArr.includes('数值')) {
that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr)
}
// console.log(item,'组件数据');
if (itemTypeChartRef2.echartArr.includes('直方图')&&itemTypeChartRef2.$refs.barChartRef.drawBar) {
// 数据改变重新渲染柱状图
// console.log(item, '组件');
itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0])
}
if (itemTypeChartRef2.echartArr.includes('饼状图')&&itemTypeChartRef2.$refs.pieChartRef.drawPie) {
// 数据改变重新渲染饼图
itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
}
// if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
// item.$refs.avgChartRef.drawBar(item.dataArr[0])
// }
if (itemTypeChartRef2.echartArr.includes('均值图') && itemTypeChartRef2.$refs.avgChartRef != undefined) {
itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0])
} }
} }
} }
}
} }
} }
}); });
}); });
} }
else{
var _that = this
_that.componentList.forEach(ele => {
if ( ele.timeMode == '周期统计') {
if (ele.cycleStatisticsData.length == 10) {
ele.cycleStatisticsData.pop();
} else {
// item.time = item.time.split('.')[0];
// _that.typeCycleStatistics = item;
ele.cycleStatisticsData.unshift();
if(_that.$refs.typeChartRef2!=undefined){
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])
}
if (itemTypeChartRef2.echartArr.includes('数值')) {
_that.$refs.typeChartRef2[i].getDataArr(_that.$refs.typeChartRef2[i].dataArr)
}
// console.log(item,'组件数据');
if (itemTypeChartRef2.echartArr.includes('直方图')&&itemTypeChartRef2.$refs.barChartRef.drawBar) {
// 数据改变重新渲染柱状图
// console.log(item, '组件');
itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0])
}
if (itemTypeChartRef2.echartArr.includes('饼状图')&&itemTypeChartRef2.$refs.pieChartRef.drawPie) {
// 数据改变重新渲染饼图
itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
}
// if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
// item.$refs.avgChartRef.drawBar(item.dataArr[0])
// }
if (itemTypeChartRef2.echartArr.includes('均值图') && itemTypeChartRef2.$refs.avgChartRef != undefined) {
itemTypeChartRef2.$refs.avgChartRef.drawBar(itemTypeChartRef2.dataArr[0])
}
}
}
}
}
}
});
}
} }
} }
// activeName: { // activeName: {

4
src/views/bounced/form.vue
View File

@ -409,8 +409,8 @@ export default {
getDataByMqtt(url, topic, cIdNum) { getDataByMqtt(url, topic, cIdNum) {
const clientId = "test_id_" + String(new Date().getTime()); // 用户名 const clientId = "test_id_" + String(new Date().getTime()); // 用户名
// const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt // const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
const host = `ws://${ip}:10087`; // const host = `ws://${ip}:10087`;
// const host = 'ws://172.16.1.168:10087/'; const host = 'ws://172.16.1.168:10087/';
const options = { const options = {
// 配置 // 配置

4
src/views/index.vue
View File

@ -634,7 +634,9 @@ export default {
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
var detId = []; var detId = [];
const msgN = JSON.parse(temp); const msgN = JSON.parse(temp);
this.cycleStatisticsData = msgN; this.cycleStatisticsData = msgN;
} catch (error) { } } catch (error) { }
break; break;
} }