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;