From 1524fa42ddf01fd72207a8a4b4667a48e4f233aa Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期五, 11 七月 2025 13:39:02 +0800
Subject: [PATCH] refactor(eims): 重构预测性维护模块
---
eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/injection-molding-machine-detail.vue | 4
eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/index.vue | 15 ++---
eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/cnc-machining-center-detail.vue | 6 +-
eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/smt-machine-detail.vue | 108 +++++++++++++++++++++++++-----------
4 files changed, 86 insertions(+), 47 deletions(-)
diff --git a/eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/cnc-machining-center-detail.vue b/eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/cnc-machining-center-detail.vue
index 6a08050..4c2ea27 100644
--- a/eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/cnc-machining-center-detail.vue
+++ b/eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/cnc-machining-center-detail.vue
@@ -156,7 +156,7 @@
</a-col>
<a-col :span="8">
<div id="spindleTemperatureChart" style="height: 300px;"></div>
-
+
</a-col>
<a-col :span="8">
<div id="coolantTemperatureChart" style="height: 300px;"></div>
@@ -205,7 +205,7 @@
AppstoreOutlined,
FieldTimeOutlined
} from '@ant-design/icons-vue';
-
+import img from '#/assets/images/T850-840.2.jpg'
export default defineComponent({
name: 'CNCMachiningCenterDetail',
setup() {
@@ -218,7 +218,7 @@
serviceLife: 15,
status: '杩愯涓�',
statusColor: '#52c41a',
- imageUrl: '/src/assets/images/T850-840.2.jpg' // 娣诲姞璁惧鍥剧墖璺緞
+ imageUrl: img // 娣诲姞璁惧鍥剧墖璺緞
});
const healthData = reactive({
diff --git a/eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/index.vue b/eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/index.vue
index b5687ae..7b629cb 100644
--- a/eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/index.vue
+++ b/eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/index.vue
@@ -4,7 +4,7 @@
<!-- 璁惧鍋ュ悍鐘舵�佸彲瑙嗗寲 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
- <Card title="璁惧鍋ュ悍搴﹀垎甯�" >
+ <Card title="璁惧鍋ュ悍搴﹁瘎鍒�" >
<!-- 杩欓噷灏嗘斁缃仴搴峰害鍒嗗竷鍥捐〃 -->
<div ref="chartRef" class="h-64 w-full"></div>
</Card>
@@ -362,10 +362,8 @@
},
xAxis: {
type: 'category',
- data: ['90%-100%', '80%-90%', '70%-80%', '60%-70%', '50%-60%', '40%-50%', '30%-40%', '20%-30%', '10%-20%', '0%-10%'],
- axisLabel: {
- rotate: 45
- }
+ data: ['10鍒�', '9鍒�', '8鍒�', '7鍒�', '6鍒�', '5鍒�', '4鍒�', '3鍒�', '2鍒�', '1鍒�'],
+
},
yAxis: {
type: 'value',
@@ -385,13 +383,12 @@
{ value: 21, itemStyle: { color: '#52c41a' } },
{ value: 8, itemStyle: { color: '#faad14' } },
{ value: 5, itemStyle: { color: '#faad14' } },
- { value: 3, itemStyle: { color: '#faad14' } },
- { value: 1, itemStyle: { color: '#ff4d4f' } },
- { value: 1, itemStyle: { color: '#ff4d4f' } }
+
],
label: {
show: true,
- position: 'top'
+ position: 'top',
+ formatter: '{c}鍙�'
}
}
]
diff --git a/eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/injection-molding-machine-detail.vue b/eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/injection-molding-machine-detail.vue
index 91f7f0c..5ec94fc 100644
--- a/eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/injection-molding-machine-detail.vue
+++ b/eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/injection-molding-machine-detail.vue
@@ -3,7 +3,7 @@
import { AppstoreOutlined, FieldTimeOutlined, LineChartOutlined, WarningOutlined, ThunderboltOutlined, CheckCircleOutlined } from '@ant-design/icons-vue';
import * as echarts from 'echarts';
-
+import img from '#/assets/images/2t.png';
export default defineComponent({
name: 'InjectionMoldingMachineDetail',
components: {
@@ -24,7 +24,7 @@
serviceLife: 15,
status: '杩愯涓�',
statusColor: '#52c41a',
- imageUrl: '/src/assets/images/2t.png' // 娣诲姞璁惧鍥剧墖璺緞
+ imageUrl: img // 娣诲姞璁惧鍥剧墖璺緞
});
const healthData = reactive({
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 76f5f05..afb4146 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
@@ -153,28 +153,30 @@
</a-row> -->
<a-row :gutter="16" class="mt-4">
<a-col :span="8">
+ <div id="ambientTemperatureHumidityChart" style="height: 300px;"></div>
+
+ </a-col>
+ <a-col :span="8">
<div id="motorTemperatureChart" style="height: 300px;"></div>
</a-col>
<a-col :span="8">
<div id="motorVibrationChart" style="height: 300px;"></div>
</a-col>
- <a-col :span="8">
- <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-col :span="8">
- <div id="ambientTemperatureHumidityChart" style="height: 300px;"></div>
- </a-col>
+
</a-row>
@@ -220,6 +222,7 @@
AppstoreOutlined,
FieldTimeOutlined
} from '@ant-design/icons-vue';
+import img from '#/assets/images/JUKI.png'
export default defineComponent({
name: 'SmtMachineDetail',
@@ -230,10 +233,10 @@
deviceType: '璐寸墖鏈�',
deviceId: 'GPC2012A101',
installDate: '2012-06-08',
- serviceLife: 8,
+ serviceLife: 15,
status: '杩愯涓�',
statusColor: '#52c41a',
- imageUrl: '/src/assets/images/JUKI.png' // 娣诲姞璁惧鍥剧墖璺緞
+ imageUrl: img // 娣诲姞璁惧鍥剧墖璺緞
});
const healthData = reactive({
@@ -244,10 +247,17 @@
riskColor: '#52c41a',
xAxisTravel: 300.179,
yAxisTravel: 233.392,
- tapeJamCount: 15,
+ tapeJamCount: 6,
materialJamCount: 15,
panelCount: 2480,
- downtime: 4.5
+ downtime: 4.5,
+ // 鐢ㄤ簬绱姞鐨勬暟鎹�
+ accumulatedXAxisTravel: 300.179,
+ accumulatedYAxisTravel: 233.392,
+ accumulatedTapeJamCount: 6,
+ accumulatedMaterialJamCount: 15,
+ accumulatedPanelCount: 2480,
+ accumulatedDowntime: 4.5
});
const maintenanceColumns = [
@@ -324,16 +334,16 @@
key: 'name'
},
{
- title: '褰撳墠瀵垮懡',
+ title: '鐞嗚瀵垮懡',
dataIndex: 'currentLife',
key: 'currentLife',
- customRender: ({ text }: { text: number }) => `${text}灏忔椂`
+ // customRender: ({ text }: { text: number }) => `${text}灏忔椂`
},
{
title: '棰勬祴鍓╀綑瀵垮懡',
dataIndex: 'remainingLife',
key: 'remainingLife',
- customRender: ({ text }: { text: number }) => `${text}灏忔椂`
+ // customRender: ({ text }: { text: number }) => `${text}灏忔椂`
},
{
title: '鐘舵��',
@@ -347,22 +357,22 @@
{
key: '1',
name: 'X杞翠己鏈嶇數鏈�',
- currentLife: 5000,
- remainingLife: 1500,
+ currentLife: '15000灏忔椂',
+ remainingLife: '4354灏忔椂',
status: '鑹ソ'
},
{
key: '2',
name: '鍚稿槾',
- currentLife: 1000,
- remainingLife: 50,
- status: '棰勮'
+ currentLife: '1000000娆�',
+ remainingLife: '425000娆�',
+ status: '鑹ソ'
},
{
key: '3',
name: '椋炶揪',
- currentLife: 8000,
- remainingLife: 2000,
+ currentLife: '96涓湀',
+ remainingLife: '48涓湀',
status: '鑹ソ'
}
]);
@@ -370,21 +380,21 @@
const historyData = reactive([
{
id: '1',
- date: '2024-02-15',
+ date: '2025-05-15',
type: '瀹氭湡淇濆吇',
description: '瀹屾垚瀛ｅ害淇濆吇锛屾鏌ヨ繍鍔ㄧ郴缁熸鼎婊�',
color: 'green'
},
{
id: '2',
- date: '2024-01-20',
+ date: '2025-01-20',
type: '鏁呴殰缁翠慨',
description: '淇鍚稿槾鍫靛闂',
color: 'red'
},
{
id: '3',
- date: '2023-12-01',
+ date: '2024-12-01',
type: '瀹氭湡淇濆吇',
description: '瀹屾垚骞村害淇濆吇锛屾牎鍑嗚瑙夌郴缁�',
color: 'green'
@@ -408,6 +418,38 @@
console.log('澶勭悊缁存姢寤鸿:', record);
// 瀹為檯椤圭洰涓繖閲屼細璋冪敤API澶勭悊缁存姢寤鸿
};
+
+ let healthDataInterval: number | undefined;
+
+ const updateHealthData = () => {
+ healthData.accumulatedXAxisTravel = parseFloat((healthData.accumulatedXAxisTravel + Math.random() * 0.01).toFixed(3));
+ healthData.accumulatedYAxisTravel = parseFloat((healthData.accumulatedYAxisTravel + Math.random() * 0.01).toFixed(3));
+ healthData.accumulatedTapeJamCount = healthData.accumulatedTapeJamCount + Math.random() * 0.005;
+ healthData.accumulatedMaterialJamCount = healthData.accumulatedMaterialJamCount + Math.random() * 0.005;
+ healthData.accumulatedPanelCount =healthData.accumulatedPanelCount + Math.random() * 0.1;
+ healthData.accumulatedDowntime = parseFloat((healthData.accumulatedDowntime + Math.random() * 0.01).toFixed(1));
+
+ // 鏇存柊鏄剧ず鐨勬暟鎹�
+ healthData.xAxisTravel = healthData.accumulatedXAxisTravel;
+ healthData.yAxisTravel = healthData.accumulatedYAxisTravel;
+ healthData.tapeJamCount = Math.round(healthData.accumulatedTapeJamCount);
+ healthData.materialJamCount = Math.round(healthData.accumulatedMaterialJamCount);
+ healthData.panelCount = Math.round( healthData.accumulatedPanelCount);
+ healthData.downtime = healthData.accumulatedDowntime;
+ };
+
+ onMounted(() => {
+ // 鍒濆鏇存柊涓�娆℃暟鎹�
+ updateHealthData();
+ // 姣�5绉掓洿鏂颁竴娆¤澶囨暟鎹�
+ healthDataInterval = setInterval(updateHealthData, 5000);
+ });
+
+ onUnmounted(() => {
+ if (healthDataInterval) {
+ clearInterval(healthDataInterval);
+ }
+ });
return {
deviceInfo,
@@ -549,29 +591,29 @@
// 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('motorTemperatureChart', '浜ч噺', [
+ { name: '浜ч噺', data: [], unit: 'pcs/h', baseValue: 175, fluctuation: 25, color: '#5470C6' },
]);
- initChart('motorVibrationChart', '鐢垫満鎸姩', [
- { name: '鎸姩', data: [], unit: 'mm/s', baseValue: 5, fluctuation: 0.5, color: '#5470C6' },
+ initChart('motorVibrationChart', '鎶涙枡鐜�', [
+ { name: '鎶涙枡鐜�', data: [], unit: '%', baseValue: 0.15, fluctuation: 0.01, color: '#5470C6' },
], );
initChart('nozzleVacuumChart', '鍚稿槾鐪熺┖鍘嬪姏', [
- { name: '鍘嬪姏', data: [], unit: 'kPa', baseValue: -39, fluctuation: 5, color: '#5470C6' },
+ { name: '鍘嬪姏', data: [], unit: 'kPa', baseValue: -45, fluctuation: 5, color: '#5470C6' },
],);
// initChart('beltTensionChart', '鐨甫寮犲姏', [], 'N', 50, 5);
// 璐磋澶�/鍚稿槾鐩戞祴
- initChart('nozzleFlowChart', '鍚稿槾娴侀噺', [
- { name: '娴侀噺', data: [], unit: 'L/min', baseValue: 5, fluctuation: 0.5, color: '#5470C6' },
+ initChart('nozzleFlowChart', '鍚稿槾鍚规皵鍘嬪姏', [
+ { name: '鍘嬪姏', data: [], unit: 'kPa', baseValue: 20, fluctuation: 5, color: '#5470C6' },
]);
initChart('placementSpeedChart', '璐磋閫熷害', [
- { name: '閫熷害', data: [], unit: 'mm/s', baseValue: 100, fluctuation: 10, color: '#5470C6' },
+ { name: '閫熷害', data: [], unit: 'chips/h', baseValue: 9000, fluctuation: 1500, color: '#5470C6' },
]);
const ambientTemperatureData: any[] = [];
const ambientHumidityData: any[] = [];
initChart('ambientTemperatureHumidityChart', '鐜娓╂箍搴�', [
- { name: '娓╁害', data: ambientTemperatureData, unit: '掳C', baseValue: 25, fluctuation: 2, color: '#5470C6' },
+ { name: '娓╁害', data: ambientTemperatureData, unit: '掳C', baseValue: 25, fluctuation: 1, color: '#5470C6' },
{ name: '婀垮害', data: ambientHumidityData, unit: '%', baseValue: 60, fluctuation: 5, color: '#91cc75' }
]);
// initChart('placementAccuracyChart', '璐磋绮惧害', [], '渭m', 50, 5);
--
Gitblit v1.9.3