Compare commits
3 Commits
a3837a488e
...
943af49e1c
| Author | SHA1 | Date | |
|---|---|---|---|
| 943af49e1c | |||
| ef8e2b43ce | |||
| 41601c0df5 |
@ -44,6 +44,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="select">
|
||||
<div class="block">
|
||||
<el-cascader
|
||||
v-model="paramsData"
|
||||
:options="options"
|
||||
:props="props"
|
||||
collapse-tags
|
||||
@visible-change="paramsSelectChange"
|
||||
placeholder="请选择参数"
|
||||
></el-cascader>
|
||||
</div>
|
||||
<div
|
||||
class="block"
|
||||
style="text-align:right;"
|
||||
@ -70,8 +81,16 @@
|
||||
@click="resetAlarmDataQuery"
|
||||
>重 置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty
|
||||
v-if="!this.selectCardNames || this.selectCardNames.length == 0"
|
||||
description="暂无数据，请先选择参数来查看监控数据"
|
||||
></el-empty>
|
||||
<div class="chart-1">
|
||||
<el-card class="box-card">
|
||||
<el-card
|
||||
v-show="this.selectCardNames.includes('gateway_current_data')"
|
||||
class="box-card"
|
||||
>
|
||||
<div
|
||||
slot="header"
|
||||
class="chart-title"
|
||||
@ -84,11 +103,14 @@
|
||||
<div
|
||||
v-loading="loading1"
|
||||
ref="chart1"
|
||||
style="height:500px"
|
||||
style="height:500px;width:100%"
|
||||
></div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<el-card
|
||||
v-show="this.selectCardNames.includes('gateway_hy_data')"
|
||||
class="box-card"
|
||||
>
|
||||
<div
|
||||
slot="header"
|
||||
class="chart-title"
|
||||
@ -105,10 +127,53 @@
|
||||
></div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card
|
||||
v-show="this.selectCardNames.includes('gateway_aclr_data')"
|
||||
class="box-card"
|
||||
>
|
||||
<div
|
||||
slot="header"
|
||||
class="chart-title"
|
||||
>
|
||||
<div class="equ-info">
|
||||
<span class="chart-name">机床RMS趋势图</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div
|
||||
v-loading="loading4"
|
||||
ref="chart4"
|
||||
style="height:500px"
|
||||
></div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card
|
||||
v-show="this.selectCardNames.includes('gateway_aclr_data')"
|
||||
class="box-card"
|
||||
>
|
||||
<div
|
||||
slot="header"
|
||||
class="chart-title"
|
||||
>
|
||||
<div class="equ-info">
|
||||
<span class="chart-name">机床峰值趋势图</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div
|
||||
v-loading="loading5"
|
||||
ref="chart5"
|
||||
style="height:500px"
|
||||
></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<div class="chart-2">
|
||||
<el-card class="box-card">
|
||||
<el-card
|
||||
v-show="this.selectCardNames.includes('gateway_temp_data')"
|
||||
class="box-card"
|
||||
>
|
||||
<div
|
||||
slot="header"
|
||||
class="chart-title"
|
||||
@ -127,7 +192,10 @@
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="chart-1">
|
||||
<el-card class="box-card">
|
||||
<!-- <el-card
|
||||
v-show="this.selectCardNames.includes('gateway_aclr_data')"
|
||||
class="box-card"
|
||||
>
|
||||
<div
|
||||
slot="header"
|
||||
class="chart-title"
|
||||
@ -144,7 +212,10 @@
|
||||
></div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<el-card
|
||||
v-show="this.selectCardNames.includes('gateway_aclr_data')"
|
||||
class="box-card"
|
||||
>
|
||||
<div
|
||||
slot="header"
|
||||
class="chart-title"
|
||||
@ -160,10 +231,13 @@
|
||||
style="height:500px"
|
||||
></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-card> -->
|
||||
</div>
|
||||
<div class="chart-2">
|
||||
<el-card class="box-card">
|
||||
<el-card
|
||||
v-show="this.selectCardNames.includes('gateway_fanuc_data')"
|
||||
class="box-card"
|
||||
>
|
||||
<div
|
||||
slot="header"
|
||||
class="chart-title"
|
||||
@ -186,6 +260,7 @@
|
||||
<script>
|
||||
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(() => {
|
||||
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(() => {
|
||||
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(() => {
|
||||
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(() => {
|
||||
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(() => {
|
||||
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(() => {
|
||||
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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user