From 453f63fd6cd6466222304df619e62b3a5667ca68 Mon Sep 17 00:00:00 2001
From: zhuguifei <zhuguifei@zhuguifeideiMac.local>
Date: 星期二, 05 八月 2025 13:56:47 +0800
Subject: [PATCH] 修复0730测试问题
---
eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/smt-machine-detail.vue | 333 ++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 277 insertions(+), 56 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 76f5f05..b274799 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
@@ -68,13 +68,15 @@
/>
</div>
- <a-divider />
+ <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>
@@ -89,42 +91,42 @@
<a-card title="璁惧鏁版嵁" class="mb-4">
<a-row :gutter="[16, 16]">
<a-col :span="4">
- <a-statistic title="X杞存�荤Щ鍔ㄨ窛绂�" :value="healthData.xAxisTravel" suffix="km">
+ <a-statistic title="X杞存�荤Щ鍔ㄨ窛绂�" :value="healthData.xAxisTravel.toFixed(2)" suffix="km">
<template #prefix>
<LineChartOutlined />
</template>
</a-statistic>
</a-col>
<a-col :span="4">
- <a-statistic title="Y杞存�荤Щ鍔ㄨ窛绂�" :value="healthData.yAxisTravel" suffix="km">
+ <a-statistic title="Y杞存�荤Щ鍔ㄨ窛绂�" :value="healthData.yAxisTravel.toFixed(2)" suffix="km">
<template #prefix>
<LineChartOutlined />
</template>
</a-statistic>
</a-col>
<a-col :span="4">
- <a-statistic title="鍗″甫娆℃暟" :value="healthData.tapeJamCount" suffix="娆�">
+ <a-statistic title="鍗″甫娆℃暟" :value="healthData.tapeJamCount.toFixed(0)" suffix="娆�">
<template #prefix>
<WarningOutlined />
</template>
</a-statistic>
</a-col>
<a-col :span="4">
- <a-statistic title="鍗℃枡娆℃暟" :value="healthData.materialJamCount" suffix="娆�">
+ <a-statistic title="鍗℃枡娆℃暟" :value="healthData.materialJamCount.toFixed(0)" suffix="娆�">
<template #prefix>
<WarningOutlined />
</template>
</a-statistic>
</a-col>
<a-col :span="4">
- <a-statistic title="鎷兼澘鏁�" :value="healthData.panelCount" suffix="鍧�">
+ <a-statistic title="鎷兼澘鏁�" :value="healthData.panelCount.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.toFixed(1)" suffix="绉�">
<template #prefix>
<FieldTimeOutlined />
</template>
@@ -153,28 +155,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>
@@ -212,7 +216,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,
@@ -220,6 +224,8 @@
AppstoreOutlined,
FieldTimeOutlined
} from '@ant-design/icons-vue';
+import img from '#/assets/images/JUKI.png'
+import { getDeviceDataSmt, updateDeviceData, initDeviceData } from '#/api/eims/equ/deviceData'
export default defineComponent({
name: 'SmtMachineDetail',
@@ -230,10 +236,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({
@@ -241,13 +247,20 @@
healthColor: '#52c41a',
predictedLife: 635,
riskLevel: '浣庨闄�',
- riskColor: '#52c41a',
+ riskColor: '#1a7ac4',
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 = [
@@ -283,25 +296,65 @@
{
key: '1',
- type: '璐磋澶寸淮鎶�',
- content: '鍚稿槾鐪熺┖鍘嬪姏鏍″噯',
- suggestedTime: '2024-04-05',
+ type: '1鍙疯创瑁呯郴缁熺淮鎶�',
+ content: '鍚稿槾鐪熺┖鍘嬪姏鍋忎綆',
+ suggestedTime: '2025-07-05',
+ urgency: '涓瓑'
+ },
+ {
+ key: '6',
+
+ type: '4鍙疯创瑁呯郴缁熺淮鎶�',
+ content: 'T杞撮┈杈惧鍛藉憡鎬�',
+ suggestedTime: '2025-07-05',
urgency: '涓瓑'
},
{
key: '2',
type: '杩愬姩绯荤粺淇濆吇',
content: 'X/Y杞翠己鏈嶇數鏈烘鼎婊戞鏌�',
- suggestedTime: '2024-03-20',
+ suggestedTime: '2025-06-20',
urgency: '浣�'
},
{
key: '3',
type: '渚涙枡绯荤粺妫�鏌�',
content: '椋炶揪鍗″甫/鍗℃枡娆℃暟娓呴浂',
- suggestedTime: '2024-03-10',
+ suggestedTime: '2025-06-10',
urgency: '浣�'
- }
+ },
+ {
+ key: '4',
+
+ type: '2鍙疯创瑁呯郴缁熺淮鎶�',
+ content: '鐪熺┖鍘嬪姏涓嶇ǔ瀹�',
+ suggestedTime: '2025-07-05',
+ urgency: '浣�'
+ },
+ {
+ key: '5',
+ type: '3鍙疯创瑁呯郴缁熺淮鎶�',
+ content: 'Z杞撮┈杈剧數娴佸紓甯�',
+ suggestedTime: '2025-07-05',
+ urgency: '浣�'
+ },
+
+ {
+ key: '7',
+
+ type: '5鍙疯创瑁呭ご缁存姢',
+ content: '鐪熺┖鍘嬪姏涓嶇ǔ瀹�',
+ suggestedTime: '2025-07-05',
+ urgency: '浣�'
+ },
+ {
+ key: '8',
+
+ type: '6鍙疯创瑁呭ご缁存姢',
+ content: '鐪熺┖鍘嬪姏涓嶇ǔ瀹�',
+ suggestedTime: '2025-07-05',
+ urgency: '浣�'
+ },
]);
const getUrgencyColor = (urgency: string) => {
@@ -317,6 +370,27 @@
}
};
+
+ const fetchDeviceData = async () => {
+ try {
+ const res = await getDeviceDataSmt();
+ Object.assign(healthData, res);
+ } catch (error) {
+ console.error('鑾峰彇璁惧鏁版嵁澶辫触:', error);
+ }
+ };
+
+ let deviceDataInterval: number | undefined;
+ fetchDeviceData();
+
+ deviceDataInterval = setInterval(async () => {
+ try {
+ fetchDeviceData();
+ } catch (error) {
+ console.error('鏇存柊璁惧鏁版嵁澶辫触:', error);
+ }
+ }, 3000);
+
const sparePartColumns = [
{
title: '閮ㄤ欢鍚嶇О',
@@ -324,16 +398,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: '鐘舵��',
@@ -346,47 +420,125 @@
const sparePartData = reactive([
{
key: '1',
- name: 'X杞翠己鏈嶇數鏈�',
- currentLife: 5000,
- remainingLife: 1500,
+ name: '1鍙疯创瑁呯郴缁烼杞翠己鏈嶇數鏈�',
+ currentLife: '15000灏忔椂',
+ remainingLife: '1451灏忔椂',
+ status: '棰勮'
+ },
+ {
+ key: '5',
+ name: '1鍙疯创瑁呯郴缁焃杞翠己鏈嶇數鏈�',
+ currentLife: '15000灏忔椂',
+ remainingLife: '7521灏忔椂',
+ status: '鑹ソ'
+ },
+ {
+ key: '9',
+ name: '1鍙疯创瑁呯郴缁熺湡绌虹數纾侀榾',
+ currentLife: '10000灏忔椂',
+ remainingLife: '2154灏忔椂',
status: '鑹ソ'
},
{
key: '2',
- name: '鍚稿槾',
- currentLife: 1000,
- remainingLife: 50,
- status: '棰勮'
+ name: '1鍙疯创瑁呭ご',
+ currentLife: '1000000娆�',
+ remainingLife: '425542娆�',
+ status: '鑹ソ'
+ },
+ {
+ key: '6',
+ name: '2鍙疯创瑁呯郴缁烼杞翠己鏈嶇數鏈�',
+ currentLife: '15000灏忔椂',
+ remainingLife: '7540灏忔椂',
+ status: '鑹ソ'
+ },
+ {
+ key: '7',
+ name: '2鍙疯创瑁呯郴缁焃杞翠己鏈嶇數鏈�',
+ currentLife: '15000灏忔椂',
+ remainingLife: '7521灏忔椂',
+ status: '鑹ソ'
+ },
+ {
+ key: '9',
+ name: '2鍙疯创瑁呯郴缁熺湡绌虹數纾侀榾',
+ currentLife: '10000灏忔椂',
+ remainingLife: '2154灏忔椂',
+ status: '鑹ソ'
+ },
+ {
+ key: '8',
+ name: '2鍙疯创瑁呭ご',
+ currentLife: '1000000娆�',
+ remainingLife: '751251娆�',
+ status: '鑹ソ'
},
{
key: '3',
name: '椋炶揪',
- currentLife: 8000,
- remainingLife: 2000,
+ currentLife: '96涓湀',
+ remainingLife: '43涓湀',
status: '鑹ソ'
- }
+ },
+
]);
const historyData = reactive([
{
id: '1',
- date: '2024-02-15',
+ date: '2025-07-22',
+ type: '瀹氭湡淇濆吇',
+ description: '瀹屾垚鏈堝害淇濆吇锛屼笣鏉嗗杞ㄦ敞娌癸紝鎶涙枡娓呯悊',
+ color: 'green'
+ },
+ {
+ id: '1',
+ date: '2025-06-18',
+ type: '瀹氭湡淇濆吇',
+ description: '瀹屾垚鏈堝害淇濆吇锛屾槗鎹熶欢鏇存崲',
+ color: 'green'
+ },
+ {
+ id: '1',
+ date: '2025-05-15',
type: '瀹氭湡淇濆吇',
description: '瀹屾垚瀛ｅ害淇濆吇锛屾鏌ヨ繍鍔ㄧ郴缁熸鼎婊�',
color: 'green'
},
{
+ id: '1',
+ date: '2025-04-20',
+ type: '瀹氭湡淇濆吇',
+ description: '瀹屾垚鏈堝害淇濆吇锛岄槻灏樿繃婊ょ綉娓呯悊锛屽杞ㄦ敞娌�',
+ color: 'green'
+ },
+ {
+ id: '1',
+ date: '2025-03-16',
+ type: '瀹氭湡淇濆吇',
+ description: '瀹屾垚鏈堝害淇濆吇锛岀湡绌哄�兼牎鍑�',
+ color: 'green'
+ },
+ {
+ id: '1',
+ date: '2025-02-13',
+ 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: '2025-01-15',
type: '瀹氭湡淇濆吇',
- description: '瀹屾垚骞村害淇濆吇锛屾牎鍑嗚瑙夌郴缁�',
+ description: '瀹屾垚骞村害淇濆吇锛岃创瑁呯郴缁熸牎鍑嗭紝鏄撴崯浠舵洿鎹紝鏍″噯瑙嗚绯荤粺',
color: 'green'
}
]);
@@ -409,6 +561,74 @@
// 瀹為檯椤圭洰涓繖閲屼細璋冪敤API澶勭悊缁存姢寤鸿
};
+ let healthDataInterval: number | undefined;
+ let scrollInterval: number | undefined;
+ const maintenanceTable = ref<HTMLElement | null>(null);
+
+ 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; // 姣忔婊氬姩1px
+ if (currentScrollTop >= scrollHeight - clientHeight) {
+ currentScrollTop = 0; // 婊氬姩鍒板簳閮ㄥ悗鍥炲埌椤堕儴
+ }
+ tableBody.scrollTop = currentScrollTop;
+ }, 50); // 姣�50姣婊氬姩涓�娆�
+ };
+
+ // 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);
+
+ nextTick(() => {
+ startScroll();
+ });
+ });
+
+ onUnmounted(() => {
+ if (healthDataInterval) {
+ clearInterval(healthDataInterval);
+ }
+ if (scrollInterval) {
+ clearInterval(scrollInterval);
+ }
+ if (deviceDataInterval) {
+ clearInterval(deviceDataInterval);
+ }
+ });
+
return {
deviceInfo,
healthData,
@@ -419,7 +639,8 @@
historyData,
getStatusColor,
getUrgencyColor,
- handleMaintenance
+ handleMaintenance,
+ maintenanceTable
};
},
components: {
@@ -445,7 +666,7 @@
time,
value: newValue
});
- if (s.data.length > 60) {
+ if (s.data.length > 24) {
s.data.shift();
}
});
@@ -518,8 +739,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 < 24; i++) {
+ const now = new Date(Date.now() - (24 - 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({
@@ -549,29 +770,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