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

20230226

This commit is contained in:
chengdandan 2023-02-26 14:12:20 +08:00
parent 5e5af91675 3774ac8806
commit 1bae98a151
17 changed files with 155 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1 +1 @@
{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\views\\SystemSettings\\UDPServiceSettings.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\views\\SystemSettings\\UDPServiceSettings.vue","mtime":1677026201583},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nexport default {\n data: function data() {\n return {\n form: {\n name: 55570,\n delivery: true,\n bytes: 4096\n }\n };\n }\n};",{"version":3,"sources":["UDPServiceSettings.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,eAAA;AACA,EAAA,IADA,kBACA;AACA,WAAA;AACA,MAAA,IAAA,EAAA;AACA,QAAA,IAAA,EAAA,KADA;AAEA,QAAA,QAAA,EAAA,IAFA;AAGA,QAAA,KAAA,EAAA;AAHA;AADA,KAAA;AAOA;AATA,CAAA","sourcesContent":["<template>\r\n <div class=\"content-box\">\r\n <div class=\"container\">\r\n <p class=\"title\">UPD服务设置</p>\r\n <!-- <div class=\"test-div\">\r\n <i class=\"el-icon-edit\"></i>\r\n <i class=\"el-icon-share\"></i>\r\n <i class=\"el-icon-delete\"></i>\r\n </div> -->\r\n <el-form :model=\"form\" label-position=\"left\" label-width=\"180px\">\r\n <el-form-item label=\"upd服务器端口：\">\r\n <el-input-number v-model=\"form.name\" controls-position=\"right\" :min=\"1\"></el-input-number>\r\n </el-form-item>\r\n\r\n <el-form-item label=\"启用有效载荷：\">\r\n <el-switch v-model=\"form.delivery\"></el-switch>\r\n </el-form-item>\r\n\r\n <el-form-item label=\"最大数据包大小：\">\r\n <el-input-number v-model=\"form.bytes\" controls-position=\"right\" :min=\"1\"></el-input-number>\r\n bytes\r\n </el-form-item>\r\n </el-form>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n data() {\r\n return {\r\n form: {\r\n name: 55570,\r\n delivery: true,\r\n bytes: 4096\r\n }\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.test-div i {\r\n font-size: 25px;\r\n}\r\n</style>"],"sourceRoot":"src/views/SystemSettings"}]} {"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\views\\SystemSettings\\UDPServiceSettings.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\views\\SystemSettings\\UDPServiceSettings.vue","mtime":1677376577618},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nimport { getUpdInfoApi } from \"../../api/aboutMachine\";\nexport default {\n data: function data() {\n return {\n form: {\n name: 55570,\n delivery: true,\n bytes: 4096\n }\n };\n },\n methods: {\n getUpd: function getUpd() {\n var _this = this;\n\n getUpdInfoApi().then(function (res) {\n console.log(res.data.data);\n }).catch(function (err) {\n _this.$message.error(res.data.msg);\n });\n }\n },\n mounted: function mounted() {\n this.getUpd();\n }\n};",{"version":3,"sources":["UDPServiceSettings.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAA,aAAA;AACA,eAAA;AACA,EAAA,IADA,kBACA;AACA,WAAA;AACA,MAAA,IAAA,EAAA;AACA,QAAA,IAAA,EAAA,KADA;AAEA,QAAA,QAAA,EAAA,IAFA;AAGA,QAAA,KAAA,EAAA;AAHA;AADA,KAAA;AAOA,GATA;AAUA,EAAA,OAAA,EAAA;AACA,IAAA,MADA,oBACA;AAAA;;AACA,MAAA,aAAA,GACA,IADA,CACA,UAAA,GAAA,EAAA;AACA,QAAA,OAAA,CAAA,GAAA,CAAA,GAAA,CAAA,IAAA,CAAA,IAAA;AACA,OAHA,EAIA,KAJA,CAIA,UAAA,GAAA,EAAA;AACA,QAAA,KAAA,CAAA,QAAA,CAAA,KAAA,CAAA,GAAA,CAAA,IAAA,CAAA,GAAA;AACA,OANA;AAOA;AATA,GAVA;AAqBA,EAAA,OArBA,qBAqBA;AACA,SAAA,MAAA;AACA;AAvBA,CAAA","sourcesContent":["<template>\r\n <div class=\"content-box\">\r\n <div class=\"container\">\r\n <p class=\"title\">UPD服务设置</p>\r\n <el-form :model=\"form\" label-position=\"left\" label-width=\"180px\">\r\n <el-form-item label=\"upd服务器端口：\">\r\n <el-input-number v-model=\"form.name\" controls-position=\"right\" :min=\"1\"></el-input-number>\r\n </el-form-item>\r\n\r\n <el-form-item label=\"启用有效载荷：\">\r\n <el-switch v-model=\"form.delivery\"></el-switch>\r\n </el-form-item>\r\n\r\n <el-form-item label=\"最大数据包大小：\">\r\n <el-input-number v-model=\"form.bytes\" controls-position=\"right\" :min=\"1\"></el-input-number>\r\n bytes\r\n </el-form-item>\r\n </el-form>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { getUpdInfoApi } from '../../api/aboutMachine';\r\nexport default {\r\n data() {\r\n return {\r\n form: {\r\n name: 55570,\r\n delivery: true,\r\n bytes: 4096\r\n }\r\n };\r\n },\r\n methods: {\r\n getUpd() {\r\n getUpdInfoApi()\r\n .then(res => {\r\n console.log(res.data.data);\r\n })\r\n .catch(err => {\r\n this.$message.error(res.data.msg);\r\n });\r\n }\r\n },\r\n mounted() {\r\n this.getUpd();\r\n }\r\n};\r\n</script>\r\n\r\n<style>\r\n.test-div i {\r\n font-size: 25px;\r\n}\r\n</style>\r\n"],"sourceRoot":"src/views/SystemSettings"}]}

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

File diff suppressed because one or more lines are too long

2
node_modules/.cache/babel-loader/5c43de7bdc03729c450c3b426ceb462e.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/b84f2eff62cf6f6e1777fdc799b085d7.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/cb5ef0e3bf9c65cd4548725a3d1af5c8.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

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -201,10 +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();
}); })
} }
}, },
mounted() { mounted() {

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

@ -124,10 +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();
}); })
} }
}, },
mounted() { mounted() {

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

@ -79,7 +79,7 @@ export default {
myChart = this.$echarts.init(this.$refs.lineChart); myChart = this.$echarts.init(this.$refs.lineChart);
} }
// var series = [] // var series = []
@ -140,11 +140,18 @@ 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();
}); // });
})
}, },
getMessage(newVal, title) { getMessage(newVal, title) {

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

@ -110,14 +110,14 @@ export default {
] ]
}; };
myChart.setOption(option); // myChart.setOption(option);
// window.addEventListener('resize', function() {
// window.onresize = () => { // 根据窗口大小变化图表自适应
// myChart.resize(); // myChart.resize();
// }; // });
window.addEventListener('resize', function() { this.$nextTick(() => {
myChart.setOption(option)
myChart.resize(); myChart.resize();
}); })
} }
}, },
mounted() { mounted() {

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

@ -133,10 +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();
}); })
} }
}, },
mounted() { mounted() {

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

@ -4,9 +4,9 @@
<!-- <p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p> --> <!-- <p class="chartTitle"><span class="titleIcon"></span> {{ componentName }} {{ triggerType }}</p> -->
<!-- 触发数据数值渲染 --> <!-- 触发数据数值渲染 -->
<div class="typeContent"> <div class="typeContent">
<div v-if="dataArr && dataArr.length != 0 && dataArr != undefined"> <div v-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined">
<div v-if="title == '类型'" style="display:flex"> <div v-if="title == '类型'" style="display:flex">
<el-card v-for="(n, i) in dataArr[0].type_data" :key="i" style="width: 150px; margin-bottom: 20px; text-align: center"> <el-card v-for="(n, i) in newDataArr[0].type_data" :key="i" style="width: 150px; margin-bottom: 20px; text-align: center">
<div> <div>
<span style="font-size: 15px;">{{ n.name }}</span <span style="font-size: 15px;">{{ n.name }}</span
><br /> ><br />
@ -14,32 +14,32 @@
</div> </div>
<div> <div>
<div> <div>
{{ dataArr[0].time ? dataArr[0].time : '' }} {{ newDataArr[0].time ? newDataArr[0].time : '' }}
</div> </div>
</div> </div>
</el-card> </el-card>
</div> </div>
</div> </div>
<el-card v-show="echartArr.includes('数值')" style="width: 150px; margin-bottom: 20px; text-align: center"> <el-card v-show="echartArr.includes('数值')" style="width: 150px; margin-bottom: 20px; text-align: center">
<div v-if="dataArr && dataArr.length != 0 && dataArr != undefined"> <div v-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined">
<div v-if="title == '类型'"> <div v-if="title == '类型'">
<span style="font-size: 15px;">类型数量总和</span><br /> <span style="font-size: 15px;">类型数量总和</span><br />
<span style="font-size: 30px; font-weight: bold"> <span style="font-size: 30px; font-weight: bold">
{{ getTotal(dataArr) }} {{ getTotal(newDataArr) }}
</span> </span>
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '速度'"> <div style="font-size: 30px; font-weight: bold" v-if="title == '速度' && dataArr.length != 0 && dataArr != undefined">
<span style="font-size: 15px;">速度</span><br /> <span style="font-size: 15px;">速度</span><br />
<!-- <span style="font-size: 30px; font-weight: bold">{{ typeValue.speed }}</span> --> <!-- <span style="font-size: 30px; font-weight: bold">{{ typeValue.speed }}</span> -->
<span style="font-size: 30px; font-weight: bold">{{ dataArr[0].speed }}</span> <span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].speed }}</span>
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '流量'"> <div style="font-size: 30px; font-weight: bold" v-if="title == '流量' && dataArr.length != 0 && dataArr != undefined">
<span style="font-size: 15px;">流量</span><br /> <span style="font-size: 15px;">流量</span><br />
<span style="font-size: 30px; font-weight: bold">{{ dataArr[0].flow }}</span> <span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].flow }}</span>
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '车头时距'"> <div style="font-size: 30px; font-weight: bold" v-if="title == '车头时距'">
<span style="font-size: 15px;">车头时距</span><br /> <span style="font-size: 15px;">车头时距</span><br />
<span style="font-size: 30px; font-weight: bold">{{ dataArr[0].headway }}</span> <span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].headway }}</span>
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'"> <div style="font-size: 30px; font-weight: bold" v-if="title == '排队数'">
<span style="font-size: 15px;">排队数</span><br /> <span style="font-size: 15px;">排队数</span><br />
@ -47,15 +47,15 @@
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '检测数'"> <div style="font-size: 30px; font-weight: bold" v-if="title == '检测数'">
<span style="font-size: 15px;">检测数</span><br /> <span style="font-size: 15px;">检测数</span><br />
<span style="font-size: 30px; font-weight: bold">{{ dataArr[0].n_stay }}</span> <span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].n_stay }}</span>
</div> </div>
<div style="font-size: 30px; font-weight: bold" v-if="title == '延误'"> <div style="font-size: 30px; font-weight: bold" v-if="title == '延误'">
<span style="font-size: 15px;">延误</span><br /> <span style="font-size: 15px;">延误</span><br />
<span style="font-size: 30px; font-weight: bold">{{ dataArr[0].ave_delay }}</span> <span style="font-size: 30px; font-weight: bold">{{ newDataArr[0].ave_delay }}</span>
</div> </div>
<div> <div>
<div> <div>
{{ dataArr[0].time ? dataArr[0].time : '' }} {{ newDataArr[0].time ? newDataArr[0].time : '' }}
</div> </div>
</div> </div>
</div> </div>
@ -65,7 +65,7 @@
</el-card> </el-card>
</div> </div>
<div v-show="echartArr.includes('表格')"> <div v-show="echartArr.includes('表格')">
<div class="tableTitle" v-if="dataArr && dataArr.length != 0 && dataArr != undefined"> <div class="tableTitle" v-if="newDataArr && newDataArr.length != 0 && newDataArr != undefined">
<div> <div>
<span <span
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;" style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
@ -73,14 +73,14 @@
<span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' + triggerType }}</span> <span style="font-size:18px;">{{ this.chartName + '-' + this.componentName + '-' + '表格' + '-' + triggerType }}</span>
</div> </div>
<div class="tableTime"> <div class="tableTime">
{{ dataArr[0].time ? dataArr[0].time : '' }} {{ newDataArr[0].time ? newDataArr[0].time : '' }}
</div> </div>
</div> </div>
<div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed"> <div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
<tableShow :msg="dataArr" :triggerType="triggerType" /> <tableShow :msg="newDataArr" :triggerType="triggerType" />
</div> </div>
<div v-if="pageType == '区域'"> <div v-if="pageType == '区域'">
<regionTable :msg="dataArr" :triggerType="triggerType" /> <regionTable :msg="newDataArr" :triggerType="triggerType" />
</div> </div>
</div> </div>
<div class="border" v-if="echartArr.includes('曲线图')"> <div class="border" v-if="echartArr.includes('曲线图')">
@ -89,7 +89,7 @@
:componentName="componentName" :componentName="componentName"
:chartName="chartName" :chartName="chartName"
:pageType="pageType" :pageType="pageType"
:list="dataArr" :list="newDataArr"
:status="triggerType" :status="triggerType"
:title="title" :title="title"
:typeValue="typeValue" :typeValue="typeValue"
@ -102,7 +102,7 @@
:componentName="componentName" :componentName="componentName"
:chartName="chartName" :chartName="chartName"
:pageType="pageType" :pageType="pageType"
:list="dataArr" :list="newDataArr"
:status="triggerType" :status="triggerType"
:title="title" :title="title"
:typeValue="typeValue" :typeValue="typeValue"
@ -116,7 +116,7 @@
:componentName="componentName" :componentName="componentName"
:chartName="chartName" :chartName="chartName"
:pageType="pageType" :pageType="pageType"
:list="dataArr" :list="newDataArr"
:status="triggerType" :status="triggerType"
:title="title" :title="title"
:typeValue="typeValue" :typeValue="typeValue"
@ -128,7 +128,7 @@
:componentName="componentName" :componentName="componentName"
:chartName="chartName" :chartName="chartName"
:pageType="pageType" :pageType="pageType"
:list="dataArr" :list="newDataArr"
:status="triggerType" :status="triggerType"
:title="title" :title="title"
:typeValue="typeValue" :typeValue="typeValue"
@ -170,7 +170,8 @@ export default {
valueShow: {}, valueShow: {},
//排队数 //排队数
queue: '' queue: '',
newDataArr:[]
}; };
}, },
created() { created() {
@ -178,7 +179,11 @@ export default {
}, },
methods: { methods: {
// 计算类型数量的总和 // 计算类型数量的总和
getDataArr(val){
console.log("getDataArr",val)
this.newDataArr = val
this.getNewQueue(this.newDataArr)
},
getTotal(dataArr) { getTotal(dataArr) {
return dataArr[0].type_data.reduce(function(prev, cur) { return dataArr[0].type_data.reduce(function(prev, cur) {
return cur.quantity + prev; return cur.quantity + prev;
@ -189,23 +194,15 @@ export default {
// }, 0) // }, 0)
}, },
// 计算类型的数值 // 计算类型的数值
getNewQueue(dataArr) { getNewQueue(val) {
// console.log("计算类型的数值",dataArr)
// if(dataArr[0].timeMode=='触发'){
// this.queue = dataArr[0].n_queue
// }else if(dataArr[0].timeMode=='周期统计'){
// this.queue = dataArr[0].ave_queue
// }else if(dataArr[0].timeMode=='周期时刻'){
// } if (val[0].n_queue) {
this.queue = val[0].n_queue;
if (dataArr[0].timeMode == '触发') { } else if (val[0].ave_queue) {
this.queue = dataArr[0].n_queue; this.queue = val[0].ave_queue;
} else if (dataArr[0].timeMode == '周期统计') { }
this.queue = dataArr[0].ave_queue; },
} else if (dataArr[0].timeMode == '周期时刻') {
}
}
}, },
computed: { computed: {

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

@ -9,7 +9,7 @@
<div <div
:class="sectionData.length <= 2 ? 'sectionBox' : 'section'" :class="sectionData.length <= 2 ? 'sectionBox' : 'section'"
ref="section" ref="section"
v-for="(s, i) in sectionData" v-for="s in sectionData"
:key="s.analogAreaComponentId" :key="s.analogAreaComponentId"
> >
<template> <template>
@ -20,11 +20,11 @@
</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"> <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>
<el-collapse-item :title="o.componentName + o.timeMode" :name="o.analogAreaComponentId"> <el-collapse-item :title="o.componentName + o.timeMode" :name="o.analogAreaComponentId" >
<OD <OD
v-if="o.componentName.includes('OD')" v-if="o.componentName.includes('OD')"
:pageType="o.graphicType" :pageType="o.graphicType"
@ -36,6 +36,7 @@
:chartName="o.combinationName" :chartName="o.combinationName"
/> />
<!--触发的组件 --> <!--触发的组件 -->
<!--触发的组件 -->
<typeChart <typeChart
ref="typeChartRef" ref="typeChartRef"
v-if="o.timeMode === '触发'" v-if="o.timeMode === '触发'"
@ -77,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>
@ -186,22 +187,32 @@ export default {
this.sectionData = []; this.sectionData = [];
this.classify = []; this.classify = [];
this.componentList.forEach(val => { this.componentList.forEach(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);
} }
this.acticveName.push([]); 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');
@ -260,7 +271,8 @@ export default {
handler(newVal) { handler(newVal) {
this.triggerList = newVal; this.triggerList = newVal;
// 触发数据 // 触发数据
var _this = this; console.log(newVal, '触发数据');
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) => {
if (ele.trigger == undefined && ele.timeMode == '触发') { if (ele.trigger == undefined && ele.timeMode == '触发') {
@ -269,7 +281,7 @@ export default {
newVal.forEach(item => { newVal.forEach(item => {
if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') { if (ele.analogAreaComponentId == item.component_id && ele.timeMode == '触发') {
if (ele.trigger.length == 10) { if (ele.trigger.length == 10) {
ele.trigger.splice(newVal.length - 1, 1); ele.trigger.pop();
} else { } else {
item.time = item.time.split('.')[0]; item.time = item.time.split('.')[0];
// 该时间的触发数据 // 该时间的触发数据
@ -280,20 +292,30 @@ export default {
_this.$nextTick(() => { _this.$nextTick(() => {
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 item = _this.$refs.typeChartRef[i]; let item = _this.$refs.typeChartRef[i]
_this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine( if (item.dataArr!= undefined && item.dataArr.length != 0) {
_this.$refs.typeChartRef[i].dataArr, console.log("item.echartArr",item.echartArr)
_this.$refs.typeChartRef[i].componentName.split('_')[0] if (item.echartArr.includes('时间曲线图')) {
); _this.$refs.typeChartRef[i].$refs.lineChartRef.drawLine(_this.$refs.typeChartRef[i].dataArr, _this.$refs.typeChartRef[i].componentName.split('_')[0])
// if (item.componentName.split('_')[0] == '类型' && item.$refs.barChartRef) { }
// // 数据改变重新渲染柱状图 if (item.echartArr.includes('数值')) {
// item.$refs.barChartRef.drawBar(item.dataArr[0]); _this.$refs.typeChartRef[i].getDataArr(_this.$refs.typeChartRef[i].dataArr)
// } else if (item.componentName.split('_')[0] == '类型' && item.$refs.pieChartRef) { }
// // // 数据改变重新渲染饼图
// item.$refs.pieChartRef.drawPie(item.dataArr[0]); if (item.echartArr.includes('直方图') && item.componentName.split('_')[0]) {
// } // 数据改变重新渲染柱状图
item.$refs.barChartRef.drawBar(item.dataArr[0])
}
if (item.echartArr.includes('饼状图') && item.componentName.split('_')[0]) {
console.log(item, '饼图组件');
// 数据改变重新渲染饼图
item.$refs.pieChartRef.drawPie(item.dataArr[0])
}
}
} }
});
})
} }
} }
}); });
@ -316,7 +338,7 @@ export default {
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) {
ele.cycleTimeData.splice(newVal.length - 1, 1); 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) {
@ -327,28 +349,18 @@ export default {
that.$nextTick(() => { that.$nextTick(() => {
// 轮循周期时刻生成的各类组件 // 轮循周期时刻生成的各类组件
for (let i = 0; i < that.$refs.typeChartRef1.length; i++) { for (let i = 0; i < that.$refs.typeChartRef1.length; i++) {
item = that.$refs.typeChartRef1[i]; item = that.$refs.typeChartRef1[i]
that.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine( if (item.dataArr.length != 0) {
that.$refs.typeChartRef1[i].dataArr,
that.$refs.typeChartRef[i].componentName.split('_')[0]
);
// if (item.componentName.split('_')[0] == "类型") {
// if (item.echartArr.includes('直方图')){
// // 数据改变重新渲染柱状图
// item.$refs.barChartRef.drawBar(item.dataArr[0])
// }
// if (item.echartArr.includes('饼状图')){
// // 数据改变重新渲染饼图
// item.$refs.pieChartRef.drawPie(item.dataArr[0])
// }
// }
if (item.componentName.split('_')[0] == '类型' && item.$refs.barChartRef) { that.$refs.typeChartRef1[i].$refs.lineChartRef.drawLine(that.$refs.typeChartRef1[i].dataArr, that.$refs.typeChartRef[i].componentName.split('_')[0])
// 数据改变重新渲染柱状图 if (item.$refs.barChartRef.drawBar) {
item.$refs.barChartRef.drawBar(item.dataArr[0]); // 数据改变重新渲染柱状图
} else if (item.componentName.split('_')[0] == '类型' && item.$refs.pieChartRef) { item.$refs.barChartRef.drawBar(item.dataArr[0])
// // 数据改变重新渲染饼图 } else if (item.$refs.pieChartRef.drawPie) {
// item.$refs.pieChartRef.drawPie(item.dataArr[0]) // 数据改变重新渲染饼图
item.$refs.pieChartRef.drawPie(item.dataArr[0])
}
} }
} }
}); });
@ -362,7 +374,6 @@ export default {
}, },
cycleStatistics: { cycleStatistics: {
handler(newVal) { handler(newVal) {
console.log(newVal, '周期统计数据');
if (newVal.length != 0 && this.sectionData) { if (newVal.length != 0 && this.sectionData) {
this.componentList.forEach(ele => { this.componentList.forEach(ele => {
if (ele.cycleStatistics == undefined && ele.timeMode == '周期统计') { if (ele.cycleStatistics == undefined && ele.timeMode == '周期统计') {
@ -371,7 +382,7 @@ export default {
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.cycleStatistics.length == 10) {
ele.cycleStatistics.splice(newVal.length - 1, 1); ele.cycleStatistics.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) {
@ -381,28 +392,21 @@ export default {
for (let i = 0; i < this.$refs.typeChartRef2.length; i++) { for (let i = 0; i < this.$refs.typeChartRef2.length; i++) {
item = that.$refs.typeChartRef2[i]; item = that.$refs.typeChartRef2[i];
// console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据'); // console.log(_this.$refs.typeChartRef[i], '触发接收的表格数据');
this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine( if (item.dataArr.length != 0) {
this.$refs.typeChartRef2[i].dataArr, this.$refs.typeChartRef2[i].$refs.lineChartRef.drawLine(this.$refs.typeChartRef2[i].dataArr, _this.$refs.typeChartRe2f[i].componentName.split('_')[0])
_this.$refs.typeChartRe2f[i].componentName.split('_')[0] if (item.componentName.split('_')[0] == "类型") {
); // console.log(item,'组件数据');
// if (item.componentName.split('_')[0] == "类型") { if (item.echartArr.includes('直方图')) {
// if (item.echartArr.includes('直方图')) { // 数据改变重新渲染柱状图
// // 数据改变重新渲染柱状图 console.log(item, '组件');
// item.$refs.barChartRef.drawBar(item.dataArr[0]) item.$refs.barChartRef.drawBar(item.dataArr[0])
// } } else if (item.echartArr.includes('饼状图')) {
// if (item.echartArr.includes('饼状图')) { // 数据改变重新渲染饼图
// // 数据改变重新渲染饼图 item.$refs.pieChartRef.drawPie(item.dataArr[0])
// item.$refs.pieChartRef.drawPie(item.dataArr[0]) }
// } }
// }
if (item.componentName.split('_')[0] == '类型' && item.echartArr.includes('直方图')) {
// 数据改变重新渲染柱状图
item.$refs.barChartRef.drawBar(item.dataArr[0]);
} else if (item.componentName.split('_')[0] == '类型' && item.echartArr.includes('饼状图')) {
// // 数据改变重新渲染饼图
item.$refs.pieChartRef.drawPie(item.dataArr[0]);
} }
} }
} }
} }