From 7b4cd6ef04b358e0805846d49e3acf02d7eae5cb Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期三, 30 七月 2025 11:08:33 +0800
Subject: [PATCH] feat(eims): 更新预测性维护功能 - 新增设备数据定时更新功能 - 添加维护建议滚动显示 - 更新设备部件寿命预测数据 - 调整备件库存与预警逻辑 - 优化数据展示和颜色提示
---
eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/cnc-machining-center-detail.vue | 284 +++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 227 insertions(+), 57 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 4c2ea27..044774b 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
@@ -69,10 +69,12 @@
</div>
<a-divider orientation="left">棰勬祴鎬х淮鎶ゅ缓璁�</a-divider>
<a-table
+ ref="maintenanceTable"
:columns="maintenanceColumns"
:data-source="maintenanceData"
:pagination="false"
size="small"
+ :scroll="{ y: 150 }"
>
<template #urgency="{ text }">
<a-tag :color="getUrgencyColor(text)">{{ text }}</a-tag>
@@ -90,42 +92,42 @@
<a-card title="璁惧鏁版嵁" class="mb-4">
<a-row :gutter="[16, 16]">
<a-col :span="4">
- <a-statistic title="鍔犲伐鏃堕棿" :value="healthData.xAxisTravel" suffix="km">
+ <a-statistic title="鍔犲伐鏃堕棿" :value="healthData.xAxisTravel.toFixed(2)" suffix="h">
<template #prefix>
<FieldTimeOutlined />
</template>
</a-statistic>
</a-col>
<a-col :span="4">
- <a-statistic title="鍒�鍏蜂娇鐢ㄦ鏁�" :value="healthData.yAxisTravel" suffix="km">
+ <a-statistic title="鍒�搴撳垏鎹㈡鏁�" :value="healthData.yAxisTravel.toFixed(0)" suffix="娆�">
<template #prefix>
<FieldTimeOutlined />
</template>
</a-statistic>
</a-col>
<a-col :span="4">
- <a-statistic title="鍒�鍏蜂娇鐢ㄦ椂闀�" :value="healthData.zAxisTravel" suffix="km">
+ <a-statistic title="鍒�鍏峰钩鍧囧鍛�" :value="healthData.zAxisTravel.toFixed(2)" suffix="h">
<template #prefix>
<FieldTimeOutlined />
</template>
</a-statistic>
</a-col>
<a-col :span="4">
- <a-statistic title="鍒�鍏锋洿鎹㈡鏁�" :value="healthData.toolChangeCount" suffix="娆�">
+ <a-statistic title="骞冲潎璋冩満缂栫▼鏃堕棿" :value="healthData.toolChangeCount" suffix="Min">
<template #prefix>
<WarningOutlined />
</template>
</a-statistic>
</a-col>
<a-col :span="4">
- <a-statistic title="鍔犲伐闆朵欢鏁�" :value="healthData.partCount" suffix="浠�">
+ <a-statistic title="绱鍔犲伐闆朵欢鏁�" :value="healthData.partCount.toFixed(0)" suffix="浠�">
<template #prefix>
<AppstoreOutlined />
</template>
</a-statistic>
</a-col>
<a-col :span="4">
- <a-statistic title="鍑洪敊鍋滄満鏃堕棿" :value="healthData.downtime" suffix="绉�">
+ <a-statistic title="骞冲潎鍔犲伐绛夊緟鏃堕棿" :value="healthData.downtime" suffix="绉�">
<template #prefix>
<FieldTimeOutlined />
</template>
@@ -142,7 +144,7 @@
<div id="spindleVibrationChart" style="height: 300px;"></div>
</a-col>
<a-col :span="8">
- <div id="hydraulicOilTemperatureChart" style="height: 300px;"></div>
+ <div id="spindleTemperatureChart" style="height: 300px;"></div>
</a-col>
<a-col :span="8">
<div id="spindleSpeedChart" style="height: 300px;"></div>
@@ -155,8 +157,7 @@
<div id="hydraulicPressureChart" style="height: 300px;"></div>
</a-col>
<a-col :span="8">
- <div id="spindleTemperatureChart" style="height: 300px;"></div>
-
+ <div id="hydraulicOilTemperatureChart" style="height: 300px;"></div>
</a-col>
<a-col :span="8">
<div id="coolantTemperatureChart" style="height: 300px;"></div>
@@ -197,7 +198,7 @@
</template>
<script lang="ts">
-import { defineComponent, reactive, onMounted, onUnmounted } from 'vue';
+import { defineComponent, reactive, onMounted, onUnmounted, ref, nextTick } from 'vue';
import * as echarts from 'echarts';
import {
LineChartOutlined,
@@ -205,7 +206,8 @@
AppstoreOutlined,
FieldTimeOutlined
} from '@ant-design/icons-vue';
-import img from '#/assets/images/T850-840.2.jpg'
+import img from '#/assets/images/T850-840.2.jpg';
+import { getDeviceData, updateDeviceData, initDeviceData } from '#/api/eims/equ/deviceData'
export default defineComponent({
name: 'CNCMachiningCenterDetail',
setup() {
@@ -224,15 +226,15 @@
const healthData = reactive({
overallHealth: 95,
healthColor: '#52c41a',
- predictedLife: 4436,
+ predictedLife: 5017,
riskLevel: '浣庨闄�',
riskColor: '#52c41a',
- xAxisTravel: 1200.5,
- yAxisTravel: 980.2,
- zAxisTravel: 500.1,
- toolChangeCount: 25,
- partCount: 1500,
- downtime: 120
+ xAxisTravel: 7105.5, // 姣忓ぉ鍔�6灏忔椂
+ yAxisTravel: 5641, // 姣忓ぉ鍔�60娆�
+ zAxisTravel: 450.4, // 姣忓ぉ鍔�20绫冲乏鍙�
+ toolChangeCount: 74, // 涓嶆尝鍔�
+ partCount: 17056, // 姣忓ぉ鍔�15涓乏鍙�
+ downtime: 141 // 涓嶆尝鍔�
});
const maintenanceColumns = [
@@ -270,7 +272,7 @@
type: '渚嬭淇濆吇',
content: '妫�鏌ヤ富杞存鼎婊戠郴缁�',
suggestedTime: '2025-07-15',
- urgency: '涓瓑'
+ urgency: '浣�'
},
{
key: '2',
@@ -281,9 +283,30 @@
},
{
key: '3',
- type: '瀵艰建缁存姢',
+ type: '涓濇潌瀵艰建缁存姢',
content: '琛ュ厖瀵艰建娑︽粦娌�',
suggestedTime: '2025-06-01',
+ urgency: '浣�'
+ },
+ {
+ key: '3',
+ type: '鍔犲伐绮惧害纭',
+ content: '瀹氭湡瀵艰建绮惧害鏍￠獙妫�鏌ョ‘璁�',
+ suggestedTime: '2025-05-05',
+ urgency: '浣�'
+ },
+ {
+ key: '3',
+ type: '鍒�搴撳姛鑳界‘璁�',
+ content: '鎸囦护鎹㈠垁鏄惁瀛樺湪鍗℃粸寤惰繜鐜拌薄',
+ suggestedTime: '2025-05-03',
+ urgency: '浣�'
+ },
+ {
+ key: '3',
+ type: '鍒囧墛娑叉洿鎹�',
+ content: '妫�鏌ョ‘璁ゅ垏鍓婃恫鏄惁瓒呮湡锛屾潅璐ㄥ惈閲忔槸鍚︾鍚堣姹�',
+ suggestedTime: '2025-05-03',
urgency: '浣�'
}
]);
@@ -308,16 +331,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: '鐘舵��',
@@ -329,49 +352,120 @@
const sparePartData = reactive([
{
+ key: '3',
+ name: '鍒囧墛娑�',
+ currentLife: "6涓湀",
+ remainingLife: "1涓湀",
+ status: '棰勮'
+ },
+ {
key: '1',
name: '涓昏酱杞存壙',
- currentLife: 8000,
- remainingLife: 500,
- status: '棰勮'
+ currentLife: "8000灏忔椂",
+ remainingLife: "5710灏忔椂",
+ status: '鑹ソ'
},
{
key: '2',
name: 'X杞翠笣鏉�',
- currentLife: 12000,
- remainingLife: 2000,
+ currentLife: "12000灏忔椂",
+ remainingLife: "9132灏忔椂",
+ status: '鑹ソ'
+ },
+ {
+ key: '2',
+ name: 'Y杞翠笣鏉�',
+ currentLife: "12000灏忔椂",
+ remainingLife: "9132灏忔椂",
+ status: '鑹ソ'
+ },
+ {
+ key: '2',
+ name: 'Z杞翠笣鏉�',
+ currentLife: "12000灏忔椂",
+ remainingLife: "9132灏忔椂",
+ status: '鑹ソ'
+ },
+
+ {
+ key: '3',
+ name: '瀵艰建娌�',
+ currentLife: "30澶�",
+ remainingLife: "23澶�",
status: '鑹ソ'
},
{
key: '3',
- name: '娑插帇娌�',
- currentLife: 3000,
- remainingLife: 200,
- status: '棰勮'
+ name: '鍒�妗跺す',
+ currentLife: "30000娆�",
+ remainingLife: "23513娆�",
+ status: '鑹ソ'
+ },
+ {
+ key: '3',
+ name: '鍒�妗舵媺閽�',
+ currentLife: "15000娆�",
+ remainingLife: "11421娆�",
+ status: '鑹ソ'
}
]);
const historyData = reactive([
{
id: '1',
- date: '2024-05-20',
+ date: '2025-08-06',
type: '渚嬭淇濆吇',
- description: '涓昏酱娑︽粦绯荤粺妫�鏌�',
+ description: '鍚勫杞ㄦ鼎婊戠郴缁熸鏌ワ紝娣诲姞瀵艰建娌�',
+ color: 'green'
+ },
+ {
+ id: '1',
+ date: '2025-07-11',
+ type: '渚嬭淇濆吇',
+ description: '鍚勫杞ㄦ鼎婊戠郴缁熸鏌ワ紝娣诲姞瀵艰建娌�',
+ color: 'green'
+ },
+ {
+ id: '1',
+ date: '2025-06-18',
+ type: '缁翠慨淇濆吇',
+ description: '鍒�妗舵媺閽夋洿鎹�3涓�',
+ color: 'orange'
+ },
+ {
+ id: '1',
+ date: '2025-06-09',
+ type: '渚嬭淇濆吇',
+ description: '鍚勫杞ㄦ鼎婊戠郴缁熸鏌ワ紝娣诲姞瀵艰建娌�',
+ color: 'green'
+ },
+ {
+ id: '1',
+ date: '2025-05-22',
+ type: '缁翠慨淇濆吇',
+ description: '鍒�妗跺す纾ㄦ崯绮惧害涓嬮檷锛屾洿鎹㈡柊閰嶄欢',
+ color: 'orange'
+ },
+ {
+ id: '1',
+ date: '2025-05-10',
+ type: '渚嬭淇濆吇',
+ description: '鍚勫杞ㄦ鼎婊戠郴缁熸鏌ワ紝娣诲姞瀵艰建娌�',
+ color: 'green'
+ },
+ {
+ id: '1',
+ date: '2025-04-13',
+ type: '渚嬭淇濆吇',
+ description: '鍚勫杞ㄦ鼎婊戠郴缁熸鏌ワ紝娣诲姞瀵艰建娌�',
color: 'green'
},
{
id: '2',
- date: '2024-02-10',
- type: '鏁呴殰缁翠慨',
- description: 'Y杞翠己鏈嶇數鏈烘姤璀﹀鐞�',
- color: 'red'
- },
- {
- id: '3',
- date: '2023-11-01',
- type: '骞村害淇濆吇',
- description: '鍏ㄩ潰妫�鏌ヨ澶囪繍琛岀姸鎬�',
- color: 'green'
+ date: '2025-03-04',
+ type: '缁翠慨淇濆吇',
+ description: '鍒囧墛娓ｆ竻鐞嗭紝鍒囧墛娑叉洿鎹�',
+ color: 'orange'
}
]);
@@ -393,6 +487,84 @@
// 瀹為檯椤圭洰涓繖閲屼細璋冪敤API澶勭悊缁存姢寤鸿
};
+ const maintenanceTable = ref<HTMLElement | null>(null);
+ let scrollInterval: number | undefined;
+
+ const startScroll = () => {
+ if (!maintenanceTable.value) return;
+
+ const tableBody = maintenanceTable.value.$el.querySelector('.ant-table-body');
+ if (!tableBody) return;
+
+ const scrollHeight = tableBody.scrollHeight;
+ const clientHeight = tableBody.clientHeight;
+
+ if (scrollHeight <= clientHeight) {
+ return;
+ }
+
+ let currentScrollTop = 0;
+ scrollInterval = setInterval(() => {
+ currentScrollTop += 1;
+ if (currentScrollTop >= scrollHeight - clientHeight) {
+ currentScrollTop = 0;
+ }
+ tableBody.scrollTop = currentScrollTop;
+ }, 50);
+ };
+
+ let deviceDataInterval: number | undefined;
+
+ const fetchDeviceData = async () => {
+ try {
+ const res = await getDeviceData();
+ Object.assign(healthData, res);
+ } catch (error) {
+ console.error('鑾峰彇璁惧鏁版嵁澶辫触:', error);
+ }
+ };
+
+
+ fetchDeviceData();
+
+ // 鍒濆鍖栬澶囨暟鎹�
+ // initDeviceData().then(() => {
+ // fetchDeviceData(); // 鍒濆鍖栧悗绔嬪嵆鑾峰彇涓�娆℃暟鎹�
+ // });
+
+ // 姣忕鏇存柊涓�娆¤澶囨暟鎹�
+ deviceDataInterval = setInterval(async () => {
+ try {
+ fetchDeviceData();
+ } catch (error) {
+ console.error('鏇存柊璁惧鏁版嵁澶辫触:', error);
+ }
+ }, 3000);
+
+
+ onUnmounted(() => {
+ if (scrollInterval) {
+ clearInterval(scrollInterval);
+ }
+ if (deviceDataInterval) {
+ clearInterval(deviceDataInterval);
+ }
+ });
+
+ onMounted(() => {
+ nextTick(() => {
+ startScroll();
+ });
+ });
+
+ onUnmounted(() => {
+ if (scrollInterval) {
+ clearInterval(scrollInterval);
+ }
+ });
+
+
+
return {
deviceInfo,
healthData,
@@ -403,7 +575,8 @@
historyData,
getStatusColor,
getUrgencyColor,
- handleMaintenance
+ handleMaintenance,
+ maintenanceTable
};
},
@@ -430,7 +603,7 @@
time,
value: newValue
});
- if (s.data.length > 60) {
+ if (s.data.length > 12) {
s.data.shift();
}
});
@@ -503,8 +676,8 @@
seriesConfig.forEach(s => {
s.data = [];
// 鐢熸垚鍒濆鏁版嵁鐐癸紙60涓偣锛�5鍒嗛挓鏁版嵁锛�
- for (let i = 0; i < 60; i++) {
- const now = new Date(Date.now() - (60 - i) * 5000); // 鐢熸垚杩囧幓5鍒嗛挓鐨勬暟鎹�
+ for (let i = 0; i < 12; i++) {
+ const now = new Date(Date.now() - (12 - i) * 5000); // 鐢熸垚杩囧幓5鍒嗛挓鐨勬暟鎹�
const time = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
const newValue = (s.baseValue + (Math.random() * 2 - 1) * s.fluctuation).toFixed(2);
s.data.push({
@@ -530,9 +703,10 @@
};
+
// 杩愬姩绯荤粺鐩戞祴
- initChart('spindleVibrationChart', '涓昏酱鎸姩', [
- { name: '鎸姩', data: [], unit: 'mm/s', baseValue: 3.0, fluctuation: 0.5, color: '#5470C6' },
+ initChart('spindleVibrationChart', '骞冲潎鍔犲伐鏃堕棿', [
+ { name: '鏃堕棿', data: [], unit: 'min/pcs', baseValue: 16.0, fluctuation: 0.1, color: '#5470C6' },
]);
initChart('spindleTemperatureChart', '涓昏酱娓╁害', [
{ name: '娓╁害', data: [], unit: '掳C', baseValue: 50, fluctuation: 3, color: '#5470C6' },
@@ -576,6 +750,8 @@
initChart('coolantTemperatureChart', '鍐峰嵈娑叉俯搴�', [
{ name: '娓╁害', data: [], unit: '掳C', baseValue: 28, fluctuation: 2, color: '#5470C6' },
]);
+
+
}
});
@@ -585,12 +761,6 @@
.device-detail-container {
padding: 16px;
background: #f0f2f5;
-}
-.device-image-container {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 330px;
}
.mt-4 {
--
Gitblit v1.9.3