From 6e3f39127fa0d1d9b42da15904cdf4217a3ae9d6 Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期五, 11 七月 2025 09:53:12 +0800
Subject: [PATCH] refactor(web-antd): 重构预测性维护页面
---
eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/smt-machine-detail.vue | 366 +++++++++++++++++++++++++++++++++------------------
1 files changed, 235 insertions(+), 131 deletions(-)
diff --git a/eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/smt-machine-detail.vue b/eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/smt-machine-detail.vue
index 5d391ab..76f5f05 100644
--- a/eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/smt-machine-detail.vue
+++ b/eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/smt-machine-detail.vue
@@ -7,24 +7,33 @@
/>
<a-row :gutter="16" class="mt-4">
- <!-- 璁惧鍩烘湰淇℃伅 -->
- <a-col :span="8">
- <a-card title="璁惧鍩烘湰淇℃伅" class="mb-4" :style="{ height: '440px' }">
- <a-descriptions bordered :column="1">
- <a-descriptions-item label="璁惧鍚嶇О">{{ deviceInfo.deviceName }}</a-descriptions-item>
- <a-descriptions-item label="璁惧绫诲瀷">{{ deviceInfo.deviceType }}</a-descriptions-item>
- <a-descriptions-item label="璁惧缂栧彿">{{ deviceInfo.deviceId }}</a-descriptions-item>
- <a-descriptions-item label="瀹夎鏃ユ湡">{{ deviceInfo.installDate }}</a-descriptions-item>
- <a-descriptions-item label="浣跨敤骞撮檺">{{ deviceInfo.serviceLife }}骞�</a-descriptions-item>
- <a-descriptions-item label="褰撳墠鐘舵��">
- <a-tag :color="deviceInfo.statusColor">{{ deviceInfo.status }}</a-tag>
- </a-descriptions-item>
- </a-descriptions>
+ <!-- 璁惧鍥剧墖鍜岃澶囧熀鏈俊鎭悎骞� -->
+ <a-col :span="10">
+ <a-card title="璁惧淇℃伅" class="mb-4" :style="{ height: '440px' }">
+ <a-row :gutter="16">
+ <a-col :span="12">
+ <div class="device-image-container">
+ <img :src="deviceInfo.imageUrl" alt="璁惧鍥剧墖" class="device-image" />
+ </div>
+ </a-col>
+ <a-col :span="12">
+ <a-descriptions bordered :column="1" >
+ <a-descriptions-item label="璁惧鍚嶇О">{{ deviceInfo.deviceName }}</a-descriptions-item>
+ <a-descriptions-item label="璁惧绫诲瀷">{{ deviceInfo.deviceType }}</a-descriptions-item>
+ <a-descriptions-item label="璁惧缂栧彿">{{ deviceInfo.deviceId }}</a-descriptions-item>
+ <a-descriptions-item label="瀹夎鏃ユ湡">{{ deviceInfo.installDate }}</a-descriptions-item>
+ <a-descriptions-item label="浣跨敤骞撮檺">{{ deviceInfo.serviceLife }}骞�</a-descriptions-item>
+ <a-descriptions-item label="褰撳墠鐘舵��">
+ <a-tag :color="deviceInfo.statusColor">{{ deviceInfo.status }}</a-tag>
+ </a-descriptions-item>
+ </a-descriptions>
+ </a-col>
+ </a-row>
</a-card>
</a-col>
<!-- 璁惧鍋ュ悍鐘舵�佷笌缁存姢寤鸿 -->
- <a-col :span="16">
+ <a-col :span="14">
<a-card title="璁惧鍋ュ悍鐘舵�佷笌缁存姢寤鸿" class="mb-4" :style="{ height: '440px' }">
<a-row :gutter="16">
<a-col :span="8">
@@ -58,7 +67,9 @@
:show-info="false"
/>
</div>
- <a-divider orientation="left">棰勬祴鎬х淮鎶ゅ缓璁�</a-divider>
+
+ <a-divider />
+
<a-table
:columns="maintenanceColumns"
:data-source="maintenanceData"
@@ -74,12 +85,62 @@
</a-table>
</a-card>
</a-col>
+ <a-col :span="24">
+ <a-card title="璁惧鏁版嵁" class="mb-4">
+ <a-row :gutter="[16, 16]">
+ <a-col :span="4">
+ <a-statistic title="X杞存�荤Щ鍔ㄨ窛绂�" :value="healthData.xAxisTravel" suffix="km">
+ <template #prefix>
+ <LineChartOutlined />
+ </template>
+ </a-statistic>
+ </a-col>
+ <a-col :span="4">
+ <a-statistic title="Y杞存�荤Щ鍔ㄨ窛绂�" :value="healthData.yAxisTravel" suffix="km">
+ <template #prefix>
+ <LineChartOutlined />
+ </template>
+ </a-statistic>
+ </a-col>
+ <a-col :span="4">
+ <a-statistic title="鍗″甫娆℃暟" :value="healthData.tapeJamCount" suffix="娆�">
+ <template #prefix>
+ <WarningOutlined />
+ </template>
+ </a-statistic>
+ </a-col>
+ <a-col :span="4">
+ <a-statistic title="鍗℃枡娆℃暟" :value="healthData.materialJamCount" suffix="娆�">
+ <template #prefix>
+ <WarningOutlined />
+ </template>
+ </a-statistic>
+ </a-col>
+ <a-col :span="4">
+ <a-statistic title="鎷兼澘鏁�" :value="healthData.panelCount" suffix="鍧�">
+ <template #prefix>
+ <AppstoreOutlined />
+ </template>
+ </a-statistic>
+ </a-col>
+ <a-col :span="4">
+ <a-statistic title="鍑洪敊鍋滄満鏃堕棿" :value="healthData.downtime" suffix="绉�">
+ <template #prefix>
+ <FieldTimeOutlined />
+ </template>
+ </a-statistic>
+ </a-col>
+ </a-row>
+ </a-card>
+ </a-col>
</a-row>
+
+
<!-- 瀹炴椂鏁版嵁瓒嬪娍鍥� -->
<a-card title="瀹炴椂鏁版嵁瓒嬪娍鍥�" class="mb-4">
<!-- 杩愬姩绯荤粺 -->
- <a-row :gutter="16">
+ <!-- <a-row :gutter="16">
<a-col :span="8">
<div id="xAxisMotorCurrentChart" style="height: 300px;"></div>
</a-col>
@@ -89,7 +150,7 @@
<a-col :span="8">
<div id="zAxisMotorCurrentChart" style="height: 300px;"></div>
</a-col>
- </a-row>
+ </a-row> -->
<a-row :gutter="16" class="mt-4">
<a-col :span="8">
<div id="motorTemperatureChart" style="height: 300px;"></div>
@@ -98,53 +159,30 @@
<div id="motorVibrationChart" style="height: 300px;"></div>
</a-col>
<a-col :span="8">
- <div id="beltTensionChart" style="height: 300px;"></div>
+ <div id="nozzleVacuumChart" style="height: 300px;"></div>
</a-col>
</a-row>
<!-- 璐磋澶�/鍚稿槾 -->
<a-row :gutter="16" class="mt-4">
- <a-col :span="8">
- <div id="nozzleVacuumChart" style="height: 300px;"></div>
- </a-col>
+
<a-col :span="8">
<div id="nozzleFlowChart" style="height: 300px;"></div>
</a-col>
<a-col :span="8">
<div id="placementSpeedChart" style="height: 300px;"></div>
</a-col>
- </a-row>
-
- <!-- 瑙嗚绯荤粺 -->
- <a-row :gutter="16" class="mt-4">
- <a-col :span="8">
- <div id="placementAccuracyChart" style="height: 300px;"></div>
- </a-col>
- <a-col :span="8">
- <div id="visionAlignmentChart" style="height: 300px;"></div>
- </a-col>
- <a-col :span="8">
- <div id="lightIntensityChart" style="height: 300px;"></div>
- </a-col>
- </a-row>
-
- <!-- 鐜鍙傛暟 -->
- <a-row :gutter="16" class="mt-4">
- <a-col :span="8">
- <div id="feederMotorCurrentChart" style="height: 300px;"></div>
- </a-col>
- <a-col :span="8">
- <div id="esdChart" style="height: 300px;"></div>
- </a-col>
- <a-col :span="8">
+ <a-col :span="8">
<div id="ambientTemperatureHumidityChart" style="height: 300px;"></div>
</a-col>
</a-row>
+
+
</a-card>
<a-row :gutter="16">
- <!-- 澶囦欢瀵垮懡棰勬祴 -->
+ <!-- 閮ㄤ欢瀵垮懡棰勬祴 -->
<a-col :span="12">
- <a-card title="澶囦欢瀵垮懡棰勬祴" class="mb-4">
+ <a-card title="閮ㄤ欢瀵垮懡棰勬祴" class="mb-4">
<a-table
:columns="sparePartColumns"
:data-source="sparePartData"
@@ -176,27 +214,40 @@
<script lang="ts">
import { defineComponent, reactive, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
+import {
+ LineChartOutlined,
+ WarningOutlined,
+ AppstoreOutlined,
+ FieldTimeOutlined
+} from '@ant-design/icons-vue';
export default defineComponent({
name: 'SmtMachineDetail',
setup() {
// 妯℃嫙鏁版嵁
const deviceInfo = reactive({
- deviceName: 'SMT璐寸墖鏈�-001',
+ deviceName: 'SMT璐寸墖鏈�',
deviceType: '璐寸墖鏈�',
- deviceId: 'SMT-2024-001',
- installDate: '2024-01-01',
+ deviceId: 'GPC2012A101',
+ installDate: '2012-06-08',
serviceLife: 8,
status: '杩愯涓�',
- statusColor: '#52c41a'
+ statusColor: '#52c41a',
+ imageUrl: '/src/assets/images/JUKI.png' // 娣诲姞璁惧鍥剧墖璺緞
});
const healthData = reactive({
- overallHealth: 92,
+ overallHealth: 82,
healthColor: '#52c41a',
- predictedLife: 2500,
+ predictedLife: 635,
riskLevel: '浣庨闄�',
- riskColor: '#52c41a'
+ riskColor: '#52c41a',
+ xAxisTravel: 300.179,
+ yAxisTravel: 233.392,
+ tapeJamCount: 15,
+ materialJamCount: 15,
+ panelCount: 2480,
+ downtime: 4.5
});
const maintenanceColumns = [
@@ -231,17 +282,18 @@
const maintenanceData = reactive([
{
key: '1',
- type: '杩愬姩绯荤粺淇濆吇',
- content: 'X/Y杞翠己鏈嶇數鏈烘鼎婊戞鏌�',
- suggestedTime: '2024-03-20',
+
+ type: '璐磋澶寸淮鎶�',
+ content: '鍚稿槾鐪熺┖鍘嬪姏鏍″噯',
+ suggestedTime: '2024-04-05',
urgency: '涓瓑'
},
{
key: '2',
- type: '璐磋澶寸淮鎶�',
- content: '鍚稿槾鐪熺┖鍘嬪姏鏍″噯',
- suggestedTime: '2024-04-05',
- urgency: '楂�'
+ type: '杩愬姩绯荤粺淇濆吇',
+ content: 'X/Y杞翠己鏈嶇數鏈烘鼎婊戞鏌�',
+ suggestedTime: '2024-03-20',
+ urgency: '浣�'
},
{
key: '3',
@@ -267,7 +319,7 @@
const sparePartColumns = [
{
- title: '澶囦欢鍚嶇О',
+ title: '閮ㄤ欢鍚嶇О',
dataIndex: 'name',
key: 'name'
},
@@ -370,27 +422,34 @@
handleMaintenance
};
},
+ components: {
+ LineChartOutlined,
+ WarningOutlined,
+ AppstoreOutlined,
+ FieldTimeOutlined
+ },
mounted() {
// 鍒濆鍖栧浘琛�
- const initChart = (chartId: string, title: string, chartData: any[], unit: string, baseValue: number, fluctuation: number) => {
+ const initChart = (chartId: string, title: string, seriesConfig: Array<{ name: string, data: any[], unit: string, baseValue: number, fluctuation: number, color: string }>) => {
const chart = echarts.init(document.getElementById(chartId));
-
+
const updateChart = () => {
// 鐢熸垚鏂扮殑鏁版嵁鐐�
const now = new Date();
const time = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
- const newValue = (baseValue + (Math.random() * 2 - 1) * fluctuation).toFixed(2);
-
- // 娣诲姞鏂版暟鎹偣锛屾渶澶氫繚鐣�60涓偣锛�5鍒嗛挓鏁版嵁锛�
- chartData.push({
- time,
- value: newValue
+
+ seriesConfig.forEach(s => {
+ const newValue = (s.baseValue + (Math.random() * 2 - 1) * s.fluctuation).toFixed(2);
+ s.data.push({
+ time,
+ value: newValue
+ });
+ if (s.data.length > 60) {
+ s.data.shift();
+ }
});
- if (chartData.length > 60) {
- chartData.shift();
- }
-
+
const option = {
title: {
text: title,
@@ -399,7 +458,11 @@
tooltip: {
trigger: 'axis',
formatter: (params) => {
- return `${params[0].axisValueLabel}<br/>${params[0].marker} ${params[0].seriesName}: ${params[0].data}${unit}`;
+ let result = `${params[0].axisValueLabel}<br/>`;
+ params.forEach(param => {
+ result += `${param.marker} ${param.seriesName}: ${param.data}${seriesConfig[param.seriesIndex].unit}<br/>`;
+ });
+ return result;
}
},
grid: {
@@ -410,59 +473,69 @@
},
xAxis: {
type: 'category',
- data: chartData.map(item => item.time)
+ data: seriesConfig[0].data.map(item => item.time)
},
- yAxis: {
+ yAxis: seriesConfig.map((s, index) => ({
type: 'value',
+ name: s.name,
+ position: index === 0 ? 'left' : 'right',
+ axisLine: {
+ show: true,
+ },
axisLabel: {
- formatter: (value) => `${value}${unit}`
+ formatter: (value) => `${value}${s.unit}`
}
- },
- series: [
- {
- data: chartData.map(item => parseFloat(item.value)),
- type: 'line',
- smooth: true,
- lineStyle: {
- width: 2,
- color: chartId === 'motorCurrentChart' ? '#5470C6' : chartId === 'motorTemperatureChart' ? '#91CC75' : '#FAC858' // 鏍规嵁鍥捐〃ID璁剧疆棰滆壊
- },
- areaStyle: {
- opacity: 0.8,
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: chartId === 'motorCurrentChart' ? 'rgba(84,112,198,0.3)' : chartId === 'motorTemperatureChart' ? 'rgba(145,204,117,0.3)' : 'rgba(250,200,88,0.3)'
- },
- {
- offset: 1,
- color: chartId === 'motorCurrentChart' ? 'rgba(84,112,198,0)' : chartId === 'motorTemperatureChart' ? 'rgba(145,204,117,0)' : 'rgba(250,200,88,0)'
- }
- ])
- },
+ })),
+ series: seriesConfig.map((s, index) => ({
+ name: s.name,
+ data: s.data.map(item => parseFloat(item.value)),
+ type: 'line',
+ smooth: true,
+ yAxisIndex: index,
+ lineStyle: {
+ width: 2,
+ color: s.color
+ },
+ areaStyle: {
+ opacity: 0.8,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(84,112,198,0.3)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(84,112,198,0)'
+ }
+ ])
+ },
}
- ]
+ )),
};
chart.setOption(option);
};
-
- // 鐢熸垚鍒濆鏁版嵁鐐癸紙60涓偣锛�5鍒嗛挓鏁版嵁锛�
+
+ seriesConfig.forEach(s => {
+ s.data = [];
+ // 鐢熸垚鍒濆鏁版嵁鐐癸紙60涓偣锛�5鍒嗛挓鏁版嵁锛�
for (let i = 0; i < 60; i++) {
const now = new Date(Date.now() - (60 - i) * 5000); // 鐢熸垚杩囧幓5鍒嗛挓鐨勬暟鎹�
const time = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
- const newValue = (baseValue + (Math.random() * 2 - 1) * fluctuation).toFixed(2);
- chartData.push({
+ const newValue = (s.baseValue + (Math.random() * 2 - 1) * s.fluctuation).toFixed(2);
+ s.data.push({
time,
value: newValue
});
}
-
+ })
+
+
// 鍒濆娓叉煋
updateChart();
-
+
// 姣�5绉掓洿鏂颁竴娆℃暟鎹�
const intervalId = setInterval(updateChart, 5000);
-
+
window.addEventListener('resize', () => {
chart.resize();
});
@@ -473,31 +546,48 @@
};
// 杩愬姩绯荤粺鐩戞祴
- initChart('xAxisMotorCurrentChart', 'X杞寸數鏈虹數娴�', [], 'A', 10, 1);
- initChart('yAxisMotorCurrentChart', 'Y杞寸數鏈虹數娴�', [], 'A', 10, 1);
- initChart('zAxisMotorCurrentChart', 'Z杞寸數鏈虹數娴�', [], 'A', 8, 0.8);
- initChart('motorTemperatureChart', '鐢垫満娓╁害', [], '掳C', 45, 2);
- initChart('motorVibrationChart', '鐢垫満鎸姩', [], 'mm/s', 5, 0.5);
- initChart('beltTensionChart', '鐨甫寮犲姏', [], 'N', 50, 5);
-
+ // initChart('xAxisMotorCurrentChart', 'X杞寸數鏈虹數娴�', [], 'A', 10, 1);
+ // initChart('yAxisMotorCurrentChart', 'Y杞寸數鏈虹數娴�', [], 'A', 10, 1);
+ // initChart('zAxisMotorCurrentChart', 'Z杞寸數鏈虹數娴�', [], 'A', 8, 0.8);
+ initChart('motorTemperatureChart', '鐢垫満娓╁害', [
+ { name: '娓╁害', data: [], unit: '掳C', baseValue: 45, fluctuation: 2, color: '#5470C6' },
+ ]);
+ initChart('motorVibrationChart', '鐢垫満鎸姩', [
+ { name: '鎸姩', data: [], unit: 'mm/s', baseValue: 5, fluctuation: 0.5, color: '#5470C6' },
+ ], );
+ initChart('nozzleVacuumChart', '鍚稿槾鐪熺┖鍘嬪姏', [
+ { name: '鍘嬪姏', data: [], unit: 'kPa', baseValue: -39, fluctuation: 5, color: '#5470C6' },
+ ],);
+ // initChart('beltTensionChart', '鐨甫寮犲姏', [], 'N', 50, 5);
+
// 璐磋澶�/鍚稿槾鐩戞祴
- initChart('nozzleVacuumChart', '鍚稿槾鐪熺┖鍘嬪姏', [], 'kPa', 80, 5);
- initChart('nozzleFlowChart', '鍚稿槾娴侀噺', [], 'L/min', 5, 0.5);
- initChart('placementSpeedChart', '璐磋閫熷害', [], 'mm/s', 100, 10);
- initChart('placementAccuracyChart', '璐磋绮惧害', [], '渭m', 50, 5);
-
- // 瑙嗚绯荤粺鐩戞祴
- initChart('visionAlignmentChart', '瑙嗚瀵逛綅绮惧害', [], '渭m', 30, 3);
- initChart('lightIntensityChart', '鍏夋簮浜害', [], 'lux', 5000, 500);
-
+
+ initChart('nozzleFlowChart', '鍚稿槾娴侀噺', [
+ { name: '娴侀噺', data: [], unit: 'L/min', baseValue: 5, fluctuation: 0.5, color: '#5470C6' },
+ ]);
+ initChart('placementSpeedChart', '璐磋閫熷害', [
+ { name: '閫熷害', data: [], unit: 'mm/s', baseValue: 100, fluctuation: 10, color: '#5470C6' },
+ ]);
+ const ambientTemperatureData: any[] = [];
+ const ambientHumidityData: any[] = [];
+ initChart('ambientTemperatureHumidityChart', '鐜娓╂箍搴�', [
+ { name: '娓╁害', data: ambientTemperatureData, unit: '掳C', baseValue: 25, fluctuation: 2, color: '#5470C6' },
+ { name: '婀垮害', data: ambientHumidityData, unit: '%', baseValue: 60, fluctuation: 5, color: '#91cc75' }
+ ]);
+ // initChart('placementAccuracyChart', '璐磋绮惧害', [], '渭m', 50, 5);
+
+ // // 瑙嗚绯荤粺鐩戞祴
+ // initChart('visionAlignmentChart', '瑙嗚瀵逛綅绮惧害', [], '渭m', 30, 3);
+ // initChart('lightIntensityChart', '鍏夋簮浜害', [], 'lux', 5000, 500);
+
// 渚涙枡绯荤粺鐩戞祴
- initChart('feederMotorCurrentChart', '渚涙枡鐢垫満鐢垫祦', [], 'A', 5, 0.5);
-
+ // initChart('feederMotorCurrentChart', '渚涙枡鐢垫満鐢垫祦', [], 'A', 5, 0.5);
+
// 鐜鐩戞祴
- initChart('esdChart', '闈欑數鐩戞祴', [], 'kV', 0.1, 0.05);
- initChart('ambientTemperatureHumidityChart', '鐜娓╂箍搴�', [], '掳C', 25, 2);
+ // initChart('esdChart', '闈欑數鐩戞祴', [], 'kV', 0.1, 0.05);
+
}
-
+
});
</script>
@@ -506,4 +596,18 @@
padding: 16px;
background: #f0f2f5;
}
-</style>
\ No newline at end of file
+
+.device-image-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 330px; /* 鏍规嵁闇�瑕佽皟鏁撮珮搴� */
+ overflow: hidden;
+}
+
+.device-image {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+}
+</style>
--
Gitblit v1.9.3