TuringsMachine/imt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: TuringsMachine:a3837a488e2063000bc8bdcd2780a36fe9a95d0d
Branches Tags
TuringsMachine:master
TuringsMachine:zjw
TuringsMachine:xusd
..
compare: TuringsMachine:943af49e1c8a9687d4c8d2fc0818416010c0324e
Branches Tags
TuringsMachine:master
TuringsMachine:zjw
TuringsMachine:xusd

3 Commits
a3837a488e ... 943af49e1c

Author SHA1 Message Date
zhangjunwen
943af49e1c Merge branch 'zjw' 2024-10-18 09:42:27 +08:00
zhangjunwen
ef8e2b43ce Merge branch 'master' into zjw 2024-10-16 10:28:44 +08:00
zhangjunwen
41601c0df5 监测数据可定是功能更新 2024-10-16 10:25:58 +08:00
1 changed files with 270 additions and 39 deletions
Show Stats Expand all files Collapse all files

309
imt-ui/src/views/system/data/monitordatadashboard/index.vue
View File

@ -44,34 +44,53 @@
</div>
</div>
</div>
<div
class="block"
style="text-align:right;"
>
<el-date-picker
v-model="datetimeRange"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
style="margin-right:10px"
<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;"
>
</el-date-picker>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleAlarmDataQuery"
>查 询</el-button>
<el-button
icon="el-icon-refresh"
size="mini"
@click="resetAlarmDataQuery"
>重 置</el-button>
<el-date-picker
v-model="datetimeRange"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
style="margin-right:10px"
>
</el-date-picker>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleAlarmDataQuery"
>查 询</el-button>
<el-button
icon="el-icon-refresh"
size="mini"
@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(() => {
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;