From 41601c0df56a2321307f85c0221cdf2000c3a37a Mon Sep 17 00:00:00 2001 From: zhangjunwen Date: Wed, 16 Oct 2024 10:25:58 +0800 Subject: [PATCH] =?UTF-8?q?=E7=9B=91=E6=B5=8B=E6=95=B0=E6=8D=AE=E5=8F=AF?= =?UTF-8?q?=E5=AE=9A=E6=98=AF=E5=8A=9F=E8=83=BD=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data/monitordatadashboard/index.vue | 309 +++++++++++++++--- 1 file changed, 270 insertions(+), 39 deletions(-) diff --git a/imt-ui/src/views/system/data/monitordatadashboard/index.vue b/imt-ui/src/views/system/data/monitordatadashboard/index.vue index edee068..0227120 100644 --- a/imt-ui/src/views/system/data/monitordatadashboard/index.vue +++ b/imt-ui/src/views/system/data/monitordatadashboard/index.vue @@ -44,34 +44,53 @@ -
- +
+ +
+
- - 查 询 - 重 置 + + + 查 询 + 重 置 +
+
- +
- +
+ +
+
+ 机床RMS趋势图 +
+
+
+
+
+ + +
+
+ 机床峰值趋势图 +
+
+
+
+
+
- +
- +
- +
import * as echarts from "echarts"; import * as EquipInfoApi from "@/api/system/equip/equipInfo"; +import { getGatewayCardTree } from "@/api/system/gatewayinfo/card"; import _ from "lodash"; import { getCurrentData, @@ -214,16 +289,78 @@ export default { equipId: "2e3d0190e63eda526da89d6c751f08f3", startTime: this.getDefaultTimeRange()[0], endTime: this.getDefaultTimeRange()[1], + params: "", }, + props: { multiple: true }, + options: [ + // { + // value: 1, + // label: "电流", + // children: [ + // { + // value: "current", + // label: "电流", + // children: [ + // { value: "chip_removal_1", label: "排屑1电流" }, + // { value: "chip_removal_2", label: "排屑2电流" }, + // ], + // }, + // ], + // }, + // { + // value: 2, + // label: "液压", + // children: [ + // { + // value: "hy", + // label: "液压", + // children: [ + // { value: "hy1", label: "液压1" }, + // { value: "hy2", label: "液压2" }, + // ], + // }, + // { + // value: 21, + // label: "新疆维吾尔族自治区", + // children: [ + // { value: 22, label: "乌鲁木齐" }, + // { value: 23, label: "克拉玛依" }, + // ], + // }, + // ], + // }, + ], + paramsData: [], + selectCardNames: [], + selectParams: [], }; }, created() { - this.getList(); + this.getParamsTree("2e3d0190e63eda526da89d6c751f08f3"); }, methods: { /** 查询列表 */ async getList() { try { + // this.selectParams.forEach((element) => { + // switch (element.label) { + // case "电流": + // this.loadCurrentChart(); + // break; + // case "液压": + // this.loadPressChart(); + // break; + // case "温度": + // this.loadTempChart(); + // break; + // case "加速度": + // this.loadVibrChart(); + // break; + // case "加工数据": + // this.loadWorkChart(); + // break; + // } + // }); this.loadCurrentChart(); this.loadPressChart(); this.loadTempChart(); @@ -232,6 +369,62 @@ export default { } finally { } }, + async getParamsTree(equipId) { + const cardTree = await getGatewayCardTree(equipId); + var treeData = []; + this.options = cardTree.data; + this.options.forEach((e) => { + e.children = null; + treeData.push(e); + }); + this.options = treeData; + }, + paramsSelectChange(e) { + if (!e) { + // console.log("焦点参数：", e); + this.selectCardNames = []; + this.selectParams = []; + if (this.paramsData && this.paramsData.length > 0) { + this.paramsData.forEach((e) => { + console.log("选择参数：", e); + // const optionData = this.options.filter( + // (data) => data.value === e[0] + // )[0]; + this.selectCardNames.push(e[0]); + // if (!this.selectCardNames.includes(e[0])) { + // this.selectCardNames.push(e[0]); + // this.selectParams.push({ + // label: optionData.label, + // value: optionData.value, + // children: this.getParamsChildData(optionData, e[1]), + // }); + // } else { + // const index = this.selectParams.findIndex( + // (item) => item.value === e[0] + // ); + // this.selectParams[index].children.push( + // this.getParamsChildData(optionData, e[1])[0] + // ); + // } + }); + } + this.getList(); + } + }, + getParamsChildData(optionData, matchData) { + var childrenParamsData = []; + const childrenOptionData = optionData.children.filter( + (e) => e.value === matchData + )[0]; + // console.log("childdata:", childrenOptionData); + childrenParamsData = [ + { + label: childrenOptionData.label, + value: childrenOptionData.value, + }, + ]; + return childrenParamsData; + }, async loadCurrentChart() { const res = await getCurrentData(this.queryParams); this.getEchartData1(res.data, { @@ -388,7 +581,9 @@ export default { resolve(); }); p.then(() => { - this.chart1 = echarts.init(this.$refs.chart1); + if (!this.chart1) { + this.chart1 = echarts.init(this.$refs.chart1); + } this.chart1.showLoading(); let option = { title: { @@ -437,6 +632,7 @@ export default { }, legend: { data: ["排屑电流1", "排屑电流2"], + selectMode: "single", }, xAxis: [ { @@ -535,6 +731,9 @@ export default { ], }; this.chart1.setOption(option); + this.$nextTick(() => { + this.chart1.resize(); + }); this.chart1.hideLoading(); // this.loading1 = false; }); @@ -545,7 +744,9 @@ export default { resolve(); }); p.then(() => { - this.chart2 = echarts.init(this.$refs.chart2); + if (!this.chart2) { + this.chart2 = echarts.init(this.$refs.chart2); + } this.chart2.showLoading(); let option = { title: { @@ -699,6 +900,9 @@ export default { ], }; this.chart2.setOption(option); + this.$nextTick(() => { + this.chart2.resize(); + }); this.chart2.hideLoading(); }); }, @@ -709,7 +913,9 @@ export default { resolve(); }); p.then(() => { - this.chart3 = echarts.init(this.$refs.chart3); + if (!this.chart3) { + this.chart3 = echarts.init(this.$refs.chart3); + } this.chart3.showLoading(); let option = { title: { @@ -923,6 +1129,9 @@ export default { ], }; this.chart3.setOption(option); + this.$nextTick(() => { + this.chart3.resize(); + }); this.chart3.hideLoading(); }); }, @@ -933,7 +1142,9 @@ export default { resolve(); }); p.then(() => { - this.chart4 = echarts.init(this.$refs.chart4); + if (!this.chart4) { + this.chart4 = echarts.init(this.$refs.chart4); + } this.chart4.showLoading(); let option = { title: { @@ -1133,6 +1344,9 @@ export default { ], }; this.chart4.setOption(option); + this.$nextTick(() => { + this.chart4.resize(); + }); this.chart4.hideLoading(); }); }, @@ -1142,7 +1356,9 @@ export default { resolve(); }); p.then(() => { - this.chart5 = echarts.init(this.$refs.chart5); + if (!this.chart5) { + this.chart5 = echarts.init(this.$refs.chart5); + } this.chart5.showLoading(); let option = { title: { @@ -1355,6 +1571,9 @@ export default { ], }; this.chart5.setOption(option); + this.$nextTick(() => { + this.chart5.resize(); + }); this.chart5.hideLoading(); }); }, @@ -1364,7 +1583,9 @@ export default { resolve(); }); p.then(() => { - this.chart6 = echarts.init(this.$refs.chart6); + if (!this.chart6) { + this.chart6 = echarts.init(this.$refs.chart6); + } this.chart6.showLoading(); let option = { title: { @@ -1529,6 +1750,9 @@ export default { ], }; this.chart6.setOption(option); + this.$nextTick(() => { + this.chart6.resize(); + }); this.chart6.hideLoading(); }); }, @@ -1541,6 +1765,12 @@ export default { src: url(../../../../assets/biaoti.ttf); } +.select { + display: flex; + margin-left: 2%; + justify-content: space-between; +} + .company-column-info { padding-top: 10px; border-bottom: 1px solid #0000; @@ -1559,6 +1789,7 @@ export default { } .content { font-size: 16px; + width: 100%; } .chart-title { text-align: center;