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

20230228

This commit is contained in:
luoshiwen 2023-02-28 13:49:27 +08:00
parent 3666ea2416 6fc3855ff1
commit 12201308ad
10 changed files with 265 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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/c90a7db1294db9fc3e3360c0ce4029f4.json generated vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -45,6 +45,12 @@ export default {
default() { default() {
return {}; return {};
} }
},
historyData:{
type:Array,
default(){
}
} }
}, },
data() { data() {
@ -236,11 +242,6 @@ export default {
// console.log("newVal",newVal) // console.log("newVal",newVal)
series[0].data = newVal.map(val => { series[0].data = newVal.map(val => {
return val.speed; return val.speed;
// if(timeMode=='周期统计'){
// return val.ave_speed;
// }else{
// return val.speed;
// }
}); });
} else if (title === '流量') { } else if (title === '流量') {
series[0].data = newVal.map(ele => { series[0].data = newVal.map(ele => {
@ -262,11 +263,21 @@ export default {
}); });
} else if (title === '排队数') { } else if (title === '排队数') {
series[0].data = newVal.map(val => { 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 === '检测数') { } else if (title === '检测数') {
series[0].data = newVal.map(val => { series[0].data = newVal.map(val => {
return val.n_stay; if(timeMode=='周期统计'){
return val.ave_stay;
}else{
return val.n_stay;
}
}); });
} else if (title === '延误') { } else if (title === '延误') {
series[0].data = newVal.map(val => { series[0].data = newVal.map(val => {
@ -284,7 +295,10 @@ export default {
}, },
mounted() { mounted() {
// this.drawLine(); if(this.history){
this.drawLine(this.historyData,this.title,this.status);
}
// this.getMessage(this.list) // this.getMessage(this.list)
// console.log(this.$parent.dataArr, '父组件的dataArr'); // console.log(this.$parent.dataArr, '父组件的dataArr');
// this.$set(this.$parent.dataArr) // this.$set(this.$parent.dataArr)

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

@ -88,27 +88,27 @@
<div class="border" v-if="echartArr.includes('曲线图')"> <div class="border" v-if="echartArr.includes('曲线图')">
<detailDialog /> <detailDialog />
<lineChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr" <lineChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="lineChartRef" /> :status="triggerType" :title="title" :typeValue="typeValue" ref="lineChartRef" :historyData="historyData"/>
</div> </div>
<div class="border" v-if="echartArr.includes('饼状图')"> <div class="border" v-if="echartArr.includes('饼状图')">
<detailDialog /> <detailDialog />
<pieChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr" <pieChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="pieChartRef" /> :status="triggerType" :title="title" :typeValue="typeValue" ref="pieChartRef" :historyData="historyData"/>
</div> </div>
<div class="border" v-if="echartArr.includes('均值图')"> <div class="border" v-if="echartArr.includes('均值图')">
<detailDialog /> <detailDialog />
<avgChart ref="avgChartRef" :componentName="componentName" :chartName="chartName" :pageType="pageType" <avgChart ref="avgChartRef" :componentName="componentName" :chartName="chartName" :pageType="pageType"
:list="newDataArr" :status="triggerType" :title="title" :typeValue="typeValue" /> :list="newDataArr" :status="triggerType" :title="title" :typeValue="typeValue" :historyData="historyData"/>
</div> </div>
<div class="border" v-if="echartArr.includes('直方图')"> <div class="border" v-if="echartArr.includes('直方图')">
<detailDialog /> <detailDialog />
<barChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr" <barChart :componentName="componentName" :chartName="chartName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="barChartRef" /> :status="triggerType" :title="title" :typeValue="typeValue" ref="barChartRef" :historyData="historyData"/>
</div> </div>
<div class="border" v-if="echartArr.includes('矩阵图')"> <div class="border" v-if="echartArr.includes('矩阵图')">
<detailDialog /> <detailDialog />
<thermalChart :componentName="componentName" :pageType="pageType" :list="newDataArr" <thermalChart :componentName="componentName" :pageType="pageType" :list="newDataArr"
:status="triggerType" :title="title" :typeValue="typeValue" ref="ODChartRef" /> :status="triggerType" :title="title" :typeValue="typeValue" ref="ODChartRef" :historyData="historyData"/>
</div> </div>
</div> </div>
</template> </template>
@ -124,7 +124,7 @@ import regionTable from '../chart/regionTable.vue';
import thermalChart from '../chart/thermalChart.vue'; import thermalChart from '../chart/thermalChart.vue';
export default { export default {
name: 'typeChart', //类型组件 name: 'typeChart', //类型组件
props: ['typeValue', 'pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName','startEndData'], props: ['historyData','typeValue', 'pageType', 'triggerType', 'dataArr', 'echartArr', 'componentName', 'title', 'chartName','startEndData'],
components: { components: {
lineChart, lineChart,
barChart, barChart,
@ -152,8 +152,9 @@ export default {
}; };
}, },
created() { created() {
// console.log(this.title); console.log(this.historyData,'周期时刻历史数据');
console.log(this.componentName);
}, },
methods: { methods: {
// 计算类型数量的总和 // 计算类型数量的总和

1
src/main.js
View File

@ -112,6 +112,7 @@ window.PubScribe = function (topic, number, _callback) {
}); });
} else { } else {
if (topic != null) { if (topic != null) {
console.log("topic",topic)
currentTopics = topic; currentTopics = topic;
client.subscribe(currentTopics, { client.subscribe(currentTopics, {
qos: 0 qos: 0

57
src/views/AnalysisMain.vue
View File

@ -156,7 +156,8 @@ export default {
formLabelWidth: '120px', formLabelWidth: '120px',
formLabelWidth: '200px', formLabelWidth: '200px',
videoTypeForm:{ videoTypeForm:{
videoType:'实时视频' // videoType:'实时视频'
videoType:'离线视频'
}, },
videoList:[], videoList:[],
fullscreenLoading: false, fullscreenLoading: false,
@ -182,41 +183,14 @@ destroyed: function () {
/** 创建mqtt */ /** 创建mqtt */
createMqtt() { createMqtt() {
//创建链接，接收数据 //创建链接，接收数据
window.PubScribe(null,-1,this.realInfo); if(this.videoTypeForm.videoType=='实时视频'){
window.PubScribe(null,-1,this.realInfo);
/*mqtt = new mqttConfig(this.topicSends); }else if(this.videoTypeForm.videoType=='离线视频'){
client = mqtt.createConnect(); console.log("this.videoTypeForm.videoType",this.videoTypeForm.videoType)
// client.subscribe(,, { qos: 0 }) this.topicSends = ['VideoStatusData'];
// client.subscribe('img'+this.videoList[i].num, { qos: 0 }, (err)=> { window.PubScribe(this.topicSends,-1, this.realInfo);
// 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) {
}
});*/
}, },
//停止订阅mqtt //停止订阅mqtt
disConnect() { disConnect() {
@ -277,6 +251,19 @@ destroyed: function () {
} catch (error) { } 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; break;
} }

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

@ -36,7 +36,9 @@
:componentName="o.componentName" :dataArr="o.cycleTimeData" :componentName="o.componentName" :dataArr="o.cycleTimeData"
:echartArr="o.presentationForm" :title="o.componentName.split('_')[0]" :echartArr="o.presentationForm" :title="o.componentName.split('_')[0]"
:chartName="o.combinationName" :typeValue="typeCycleTimeData" :chartName="o.combinationName" :typeValue="typeCycleTimeData"
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }" /> :startEndData="{ start: o.startSectionNames, end: o.endSectionNames }"
:historyData="o.cycleTimeData
" />
<!-- 周期统计的组件 --> <!-- 周期统计的组件 -->
<typeChart ref="typeChartRef2" style="width: 100%;" <typeChart ref="typeChartRef2" style="width: 100%;"
@ -45,7 +47,7 @@
:dataArr="o.cycleStatisticsData" :echartArr="o.presentationForm" :dataArr="o.cycleStatisticsData" :echartArr="o.presentationForm"
:title="o.componentName.split('_')[0]" :chartName="o.combinationName" :title="o.componentName.split('_')[0]" :chartName="o.combinationName"
:typeValue="typeCycleStatistics" :typeValue="typeCycleStatistics"
:startEndData="{ start: o.startSectionNames, end: o.endSectionNames }" /> :startEndData="{ start: o.startSectionNames, end: o.endSectionNames }" :historyData="o.cycleStatisticsData"/>
</el-collapse-item> </el-collapse-item>
</div> </div>
</el-collapse> </el-collapse>
@ -180,11 +182,11 @@ export default {
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){ if (val.timeMode == '周期统计' || this.cycleStatisticsData.length == 0) {
item.cycleStatisticsData = val.cycleStatisticsData item.cycleStatisticsData = val.cycleStatisticsData
} }
if(val.timeMode=='周期时刻'||this.cycleTimeData.length==0){ if (val.timeMode == '周期时刻' || this.cycleTimeData.length == 0) {
item.cycleTimeData = val.cycleTimeData item.cycleTimeData = val.cycleTimeData
} }
} }
@ -213,7 +215,7 @@ export default {
} }
} }
}, },
// 触发数据的类型数值 // 触发数据的类型数值
}, },
@ -233,113 +235,104 @@ export default {
handler(newVal, oldVal) { }, handler(newVal, oldVal) { },
immediate: true immediate: true
}, },
componentList:{ // componentList:{
handler(newVal) { // handler(newVal) {
console.log("componentList",newVal) // console.log("componentList",newVal)
if (newVal!= undefined&&newVal.length != 0 ) {
newVal.forEach(ele => {
if(ele.timeMode == '周期时刻'){
if(ele.cycleTimeData.length== 10 ){
}
}
// 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 (itemTypeChartRef2.echartArr.includes('时间曲线图')) { // if (newVal!= undefined&&newVal.length != 0 ) {
// thatNN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(thatNN.$refs.typeChartRef1[i].dataArr, thatNN.$refs.typeChartRef1[i].componentName.split('_')[0],'周期统计') // newVal.forEach(ele => {
// } // if( ele.timeMode == '周期统计'){
// if (itemTypeChartRef2.echartArr.includes('数值')) { // var thatNN = this;
// thatNN.$refs.typeChartRef1[i].getDataArr(thatNN.$refs.typeChartRef1[i].dataArr) // ele.cycleStatisticsData.forEach(item => {
// } // if (item.type_data != null) {
// // 周期时刻的类型数据
// if (itemTypeChartRef2.echartArr.includes('直方图') &&itemTypeChartRef2.$refs.barChartRef.drawBar) { // thatNN.typeCycleStatistics = item;
// // 数据改变重新渲染柱状图 // }
// itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0]) // console.log("thatNN.$refs.typeChartRef2",thatNN.$refs.typeChartRef2)
// } // // thatN.$nextTick(() => {
// if (itemTypeChartRef2.echartArr.includes('饼状图') &&itemTypeChartRef2.$refs.pieChartRef.drawPie) { // if(thatNN.$refs.typeChartRef2!=undefined){
// // 数据改变重新渲染饼图 // // // 轮循周期时刻生成的各类组件
// itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0]) // for (let i = 0; i < thatNN.$refs.typeChartRef2.length; i++) {
// } // let itemTypeChartRef2 = thatNN.$refs.typeChartRef2[i]
// 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) {
// ele.cycleTimeData.pop();
// } else {
// ele.cycleTimeData.forEach(item => {
// 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('时间曲线图')) { // if (itemTypeChartRef2.length!=0&&itemTypeChartRef2.dataArr!= undefined && itemTypeChartRef2.dataArr.length != 0) {
// thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(thatN.$refs.typeChartRef1[i].dataArr, thatN.$refs.typeChartRef1[i].componentName.split('_')[0],'周期时刻') // console.log("itemTypeChartRef2.echartArr",itemTypeChartRef2.echartArr)
// } // if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
// if (itemTypeChartRef1.echartArr.includes('数值')) { // thatNN.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(thatNN.$refs.typeChartRef2[i].dataArr, thatNN.$refs.typeChartRef2[i].componentName.split('_')[0],'周期统计')
// thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr) // }
// } // if (itemTypeChartRef2.echartArr.includes('数值')) {
// thatNN.$refs.typeChartRef2[i].getDataArr(thatNN.$refs.typeChartRef2[i].dataArr)
// if (itemTypeChartRef1.echartArr.includes('直方图') &&itemTypeChartRef1.$refs.barChartRef.drawBar) { // }
// // 数据改变重新渲染柱状图 // if (itemTypeChartRef2.echartArr.includes('直方图') &&itemTypeChartRef2.$refs.barChartRef.drawBar) {
// itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0]) // // 数据改变重新渲染柱状图
// } // itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0])
// if (itemTypeChartRef1.echartArr.includes('饼状图') &&itemTypeChartRef1.$refs.pieChartRef.drawPie) { // }
// // 数据改变重新渲染饼图 // if (itemTypeChartRef2.echartArr.includes('饼状图') &&itemTypeChartRef2.$refs.pieChartRef.drawPie) {
// itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0]) // // 数据改变重新渲染饼图
// } // itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
// if (itemTypeChartRef1.echartArr.includes('均值图') && itemTypeChartRef1.$refs.avgChartRef != undefined) { // }
// itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.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) {
// } // // ele.cycleTimeData.pop();
// // } else {
// // ele.cycleTimeData.forEach(item => {
}); // // 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
// },
// activeName:'channge', // activeName:'channge',
// 处理过的触发数据 // 处理过的触发数据
triggerListData: { triggerListData: {
@ -364,30 +357,30 @@ export default {
} }
ele.trigger.unshift(item); ele.trigger.unshift(item);
_this.$nextTick(() => { _this.$nextTick(() => {
if(_this.$refs.typeChartRef!=undefined){ if (_this.$refs.typeChartRef != undefined) {
for (let i = 0; i < _this.$refs.typeChartRef.length; i++) { for (let i = 0; i < _this.$refs.typeChartRef.length; i++) {
// console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据'); // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
let itemTypeChart = _this.$refs.typeChartRef[i] let itemTypeChart = _this.$refs.typeChartRef[i]
if (itemTypeChart.dataArr!= undefined && itemTypeChart.dataArr.length != 0) { if (itemTypeChart.dataArr != undefined && itemTypeChart.dataArr.length != 0) {
if (itemTypeChart.echartArr.includes('时间曲线图')) { if (itemTypeChart.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 (itemTypeChart.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 (itemTypeChart.echartArr.includes('直方图') && itemTypeChart.componentName.split('_')[0]) { if (itemTypeChart.echartArr.includes('直方图') && itemTypeChart.componentName.split('_')[0]) {
// 数据改变重新渲染柱状图 // 数据改变重新渲染柱状图
itemTypeChart.$refs.barChartRef.drawBar(itemTypeChart.dataArr[0]) itemTypeChart.$refs.barChartRef.drawBar(itemTypeChart.dataArr[0])
} }
if (itemTypeChart.echartArr.includes('饼状图') && itemTypeChart.componentName.split('_')[0]) { if (itemTypeChart.echartArr.includes('饼状图') && itemTypeChart.componentName.split('_')[0]) {
// 数据改变重新渲染饼图 // 数据改变重新渲染饼图
itemTypeChart.$refs.pieChartRef.drawPie(itemTypeChart.dataArr[0]) itemTypeChart.$refs.pieChartRef.drawPie(itemTypeChart.dataArr[0])
}
} }
} }
}
} }
}) })
} }
@ -403,9 +396,9 @@ export default {
handler(newVal) { handler(newVal) {
// 监听到打印周期时刻数据 // 监听到打印周期时刻数据
console.log(newVal, '周期时刻数据'); console.log(newVal, '周期时刻数据');
if (newVal!= undefined&&newVal.length != 0 && this.sectionData) { if (newVal != undefined && newVal.length != 0 && this.sectionData) {
var thatN = this; var thatN = this;
thatN.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 = [];
@ -432,7 +425,7 @@ export default {
if (itemTypeChartRef1.length != 0 && itemTypeChartRef1.dataArr != undefined && itemTypeChartRef1.dataArr.length != 0) { if (itemTypeChartRef1.length != 0 && itemTypeChartRef1.dataArr != undefined && itemTypeChartRef1.dataArr.length != 0) {
if (itemTypeChartRef1.echartArr.includes('时间曲线图')) { if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(thatN.$refs.typeChartRef1[i].dataArr, thatN.$refs.typeChartRef1[i].componentName.split('_')[0],'周期时刻') thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(thatN.$refs.typeChartRef1[i].dataArr, thatN.$refs.typeChartRef1[i].componentName.split('_')[0], '周期时刻')
} }
if (itemTypeChartRef1.echartArr.includes('数值')) { if (itemTypeChartRef1.echartArr.includes('数值')) {
thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr) thatN.$refs.typeChartRef1[i].getDataArr(thatN.$refs.typeChartRef1[i].dataArr)
@ -470,40 +463,40 @@ export default {
// } // }
// newVal.forEach(item => { // newVal.forEach(item => {
if (ele.timeMode == '周期时刻') { if (ele.timeMode == '周期时刻') {
if (ele.cycleTimeData.length == 10) { if (ele.cycleTimeData.length == 10) {
ele.cycleTimeData.pop(); ele.cycleTimeData.pop();
} else { } else {
// item.time = item.time.split('.')[0]; // item.time = item.time.split('.')[0];
// if (item.type_data != null) { // if (item.type_data != null) {
// // 周期时刻的类型数据 // // 周期时刻的类型数据
// _thatN.typeCycleTimeData = item; // _thatN.typeCycleTimeData = item;
// } // }
// ele.cycleTimeData.unshift(item); // ele.cycleTimeData.unshift(item);
// _thatN.$nextTick(() => { // _thatN.$nextTick(() => {
if(_thatN.$refs.typeChartRef1!=undefined){ if (_thatN.$refs.typeChartRef1 != undefined) {
// console.log("thatN.$refs.typeChartRef1",_thatN.$refs.typeChartRef1) // console.log("thatN.$refs.typeChartRef1",_thatN.$refs.typeChartRef1)
// 轮循周期时刻生成的各类组件 // 轮循周期时刻生成的各类组件
for (let i = 0; i < _thatN.$refs.typeChartRef1.length; i++) { for (let i = 0; i < _thatN.$refs.typeChartRef1.length; i++) {
let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i] let itemTypeChartRef1 = thatN.$refs.typeChartRef1[i]
if (itemTypeChartRef1.length!=0&&itemTypeChartRef1.dataArr!= undefined && itemTypeChartRef1.dataArr.length != 0) { if (itemTypeChartRef1.length != 0 && itemTypeChartRef1.dataArr != undefined && itemTypeChartRef1.dataArr.length != 0) {
if (itemTypeChartRef1.echartArr.includes('时间曲线图')) { if (itemTypeChartRef1.echartArr.includes('时间曲线图')) {
_thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(_thatN.$refs.typeChartRef1[i].dataArr, _thatN.$refs.typeChartRef1[i].componentName.split('_')[0],'周期时刻') _thatN.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(_thatN.$refs.typeChartRef1[i].dataArr, _thatN.$refs.typeChartRef1[i].componentName.split('_')[0], '周期时刻')
} }
if (itemTypeChartRef1.echartArr.includes('数值')) { if (itemTypeChartRef1.echartArr.includes('数值')) {
_thatN.$refs.typeChartRef1[i].getDataArr(_thatN.$refs.typeChartRef1[i].dataArr) _thatN.$refs.typeChartRef1[i].getDataArr(_thatN.$refs.typeChartRef1[i].dataArr)
} }
if (itemTypeChartRef1.echartArr.includes('直方图') &&itemTypeChartRef1.$refs.barChartRef.drawBar) { if (itemTypeChartRef1.echartArr.includes('直方图') && itemTypeChartRef1.$refs.barChartRef.drawBar) {
// 数据改变重新渲染柱状图 // 数据改变重新渲染柱状图
itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0]) itemTypeChartRef1.$refs.barChartRef.drawBar(itemTypeChartRef1.dataArr[0])
} }
if (itemTypeChartRef1.echartArr.includes('饼状图') &&itemTypeChartRef1.$refs.pieChartRef.drawPie) { if (itemTypeChartRef1.echartArr.includes('饼状图') && itemTypeChartRef1.$refs.pieChartRef.drawPie) {
// 数据改变重新渲染饼图 // 数据改变重新渲染饼图
itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0]) itemTypeChartRef1.$refs.pieChartRef.drawPie(itemTypeChartRef1.dataArr[0])
} }
if (itemTypeChartRef1.echartArr.includes('均值图') && itemTypeChartRef1.$refs.avgChartRef != undefined) { if (itemTypeChartRef1.echartArr.includes('均值图') && itemTypeChartRef1.$refs.avgChartRef != undefined) {
itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0]) itemTypeChartRef1.$refs.avgChartRef.drawBar(itemTypeChartRef1.dataArr[0])
} }
if (itemTypeChartRef1.componentName.includes('OD') && itemTypeChartRef1.$refs.ODChartRef != undefined && itemTypeChartRef1.dataArr[0].ob_data.length != 0) { if (itemTypeChartRef1.componentName.includes('OD') && itemTypeChartRef1.$refs.ODChartRef != undefined && itemTypeChartRef1.dataArr[0].ob_data.length != 0) {
@ -524,12 +517,11 @@ export default {
}, },
//周期统计 //周期统计
cycleStatisticsData: { cycleStatisticsData: {
handler(newVal, oldVal) { handler(newVal) {
console.log("oldVal",oldVal) // console.log("newVal", newVal)
if (newVal!= undefined&& newVal.length != 0 && this.sectionData) { if (newVal != undefined && newVal.length != 0 && this.sectionData) {
console.log("newVal",newVal) var that = this;
var that = this; that.classify.forEach((ele, index) => {
that.componentList.forEach(ele => {
// if (ele.cycleStatisticsData == undefined && ele.timeMode == '周期统计') { // if (ele.cycleStatisticsData == undefined && ele.timeMode == '周期统计') {
// ele.cycleStatisticsData = []; // ele.cycleStatisticsData = [];
// }else{ // }else{
@ -540,19 +532,20 @@ export default {
if (ele.cycleStatisticsData.length == 10) { if (ele.cycleStatisticsData.length == 10) {
ele.cycleStatisticsData.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) {
that.typeCycleStatistics = item; that.typeCycleStatistics = item;
} }
if(that.$refs.typeChartRef2!=undefined){ ele.cycleStatisticsData.unshift(item);
if (that.$refs.typeChartRef2 != undefined) {
console.log(that.$refs.typeChartRef2, '触发接收的表格数据');
for (let i = 0; i < that.$refs.typeChartRef2.length; i++) { for (let i = 0; i < that.$refs.typeChartRef2.length; i++) {
let itemTypeChartRef2 = that.$refs.typeChartRef2[i]; let itemTypeChartRef2 = that.$refs.typeChartRef2[i];
// console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
if (itemTypeChartRef2.length!=0&&itemTypeChartRef2.dataArr!= undefined && itemTypeChartRef2.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]) if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
if (itemTypeChartRef2.echartArr.includes('时间曲线图')) { that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(that.$refs.typeChartRef2[i].dataArr, that.$refs.typeChartRef2[i].componentName.split('_')[0], '周期统计')
that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(that.$refs.typeChartRef2[i].dataArr, that.$refs.typeChartRef2[i].componentName.split('_')[0],'周期统计')
} }
if (itemTypeChartRef2.echartArr.includes('数值')) { if (itemTypeChartRef2.echartArr.includes('数值')) {
that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr) that.$refs.typeChartRef2[i].getDataArr(that.$refs.typeChartRef2[i].dataArr)
@ -587,39 +580,39 @@ export default {
else { else {
var _that = this var _that = this
_that.componentList.forEach(ele => { _that.classify.forEach(ele => {
if ( ele.timeMode == '周期统计') { if (ele.timeMode == '周期统计') {
if (ele.cycleStatisticsData.length == 10) { if (ele.cycleStatisticsData.length == 10) {
ele.cycleStatisticsData.pop(); ele.cycleStatisticsData.pop();
} else { } else {
// item.time = item.time.split('.')[0]; // item.time = item.time.split('.')[0];
// if (item.type_data != null) { // if (item.type_data != null) {
// _that.typeCycleStatistics = item; // _that.typeCycleStatistics = item;
// } // }
// ele.cycleStatisticsData.unshift(item); // ele.cycleStatisticsData.unshift(item);
if(_that.$refs.typeChartRef2!=undefined){ if (_that.$refs.typeChartRef2 != undefined) {
for (let i = 0; i < _that.$refs.typeChartRef2.length; i++) { for (let i = 0; i < _that.$refs.typeChartRef2.length; i++) {
let itemTypeChartRef2 = _that.$refs.typeChartRef2[i]; let itemTypeChartRef2 = _that.$refs.typeChartRef2[i];
// console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据'); // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
if (itemTypeChartRef2.length != 0 && itemTypeChartRef2.dataArr != undefined && itemTypeChartRef2.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 (itemTypeChartRef2.echartArr.includes('时间曲线图')) { if (itemTypeChartRef2.echartArr.includes('时间曲线图')) {
_that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(_that.$refs.typeChartRef2[i].dataArr, _that.$refs.typeChartRef2[i].componentName.split('_')[0],'周期统计') _that.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(_that.$refs.typeChartRef2[i].dataArr, _that.$refs.typeChartRef2[i].componentName.split('_')[0], '周期统计')
} }
if (itemTypeChartRef2.echartArr.includes('数值')) { if (itemTypeChartRef2.echartArr.includes('数值')) {
_that.$refs.typeChartRef2[i].getDataArr(_that.$refs.typeChartRef2[i].dataArr) _that.$refs.typeChartRef2[i].getDataArr(_that.$refs.typeChartRef2[i].dataArr)
} }
// console.log(item,'组件数据'); // console.log(item,'组件数据');
if (itemTypeChartRef2.echartArr.includes('直方图')&&itemTypeChartRef2.$refs.barChartRef.drawBar) { if (itemTypeChartRef2.echartArr.includes('直方图') && itemTypeChartRef2.$refs.barChartRef.drawBar) {
// 数据改变重新渲染柱状图 // 数据改变重新渲染柱状图
// console.log(item, '组件'); // console.log(item, '组件');
itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0]) itemTypeChartRef2.$refs.barChartRef.drawBar(itemTypeChartRef2.dataArr[0])
} }
if (itemTypeChartRef2.echartArr.includes('饼状图')&&itemTypeChartRef2.$refs.pieChartRef.drawPie) { if (itemTypeChartRef2.echartArr.includes('饼状图') && itemTypeChartRef2.$refs.pieChartRef.drawPie) {
// 数据改变重新渲染饼图 // 数据改变重新渲染饼图
itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0]) itemTypeChartRef2.$refs.pieChartRef.drawPie(itemTypeChartRef2.dataArr[0])
} }
// if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) { // if (item.echartArr.includes('均值图') && item.$refs.avgChartRef != undefined && item.dataArr.length != 0) {
// item.$refs.avgChartRef.drawBar(item.dataArr[0]) // item.$refs.avgChartRef.drawBar(item.dataArr[0])
// } // }
@ -637,7 +630,7 @@ export default {
}); });
} }
}, },
immediate:true immediate: true
} }
// activeName: { // activeName: {
// handler(newVal) { // handler(newVal) {