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/injection-molding-machine-detail.vue | 547 +++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 370 insertions(+), 177 deletions(-)
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 61b3576..46237fd 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
@@ -1,28 +1,56 @@
<script lang="ts">
-import { defineComponent, onUnmounted, reactive } from 'vue';
+import { defineComponent, reactive, onMounted, onUnmounted, ref, nextTick } from 'vue';
+import { AppstoreOutlined, FieldTimeOutlined, LineChartOutlined, WarningOutlined, ThunderboltOutlined, CheckCircleOutlined } from '@ant-design/icons-vue';
import * as echarts from 'echarts';
+import img from '#/assets/images/2t.png';
+import { getDeviceDataInj, updateDeviceData, initDeviceData } from '#/api/eims/equ/deviceData'
export default defineComponent({
name: 'InjectionMoldingMachineDetail',
+ components: {
+ LineChartOutlined,
+ WarningOutlined,
+ AppstoreOutlined,
+ CheckCircleOutlined,
+ FieldTimeOutlined,
+ ThunderboltOutlined
+ },
setup() {
// 妯℃嫙鏁版嵁
const deviceInfo = reactive({
- deviceName: '娉ㄥ鏈� #IM-001',
+ deviceName: '绔嬪紡娉ㄥ鏈�',
deviceType: '娉ㄥ鏈�',
- deviceId: 'IM-2024-001',
- installDate: '2023-08-20',
+ deviceId: 'GPC2013C027',
+ installDate: '2014-01-06',
serviceLife: 15,
status: '杩愯涓�',
- statusColor: '#52c41a'
+ statusColor: '#52c41a',
+ imageUrl: img // 娣诲姞璁惧鍥剧墖璺緞
});
const healthData = reactive({
overallHealth: 88,
- healthColor: '#faad14',
- predictedLife: 1500,
- riskLevel: '涓闄�',
- riskColor: '#faad14'
+ healthColor: '#52c41a',
+ predictedLife: 1753,
+ riskLevel: '浣庨闄�',
+ riskColor: '#1a7ac4',
+ injectionPressure: 120, // 娉ㄥ鍘嬪姏
+ clampingForce: 80, // 閿佹ā鍔�
+ moldTemperature: 45, // 妯″叿娓╁害
+ screwSpeed: 150, // 铻烘潌杞��
+ meltTemperature: 220, // 鐔旇瀺娓╁害
+ coolingTime: 25, // 鍐峰嵈鏃堕棿
+ injectionCount: 495 * 24 * 60 + 19 * 60 + 44, // 娉ㄥ皠娆℃暟锛岃浆鎹负鍒嗛挓
+ clampingCount: 545636, // 鍚堟ā娆℃暟 // 璺熼殢浜ч噺 50s鍔犱竴娆�
+ productionCycle: 45, // 鐢熶骇鍛ㄦ湡
+ energyConsumption: 64, // 鑳借��
+ yieldRate: 354, // 浜ч噺 50绉掑鍔犱竴妯�
+ downtime: 120, // 鍑洪敊鍋滄満鏃堕棿
+ // 鐢ㄤ簬绱姞澧為暱鐨勫瓧娈�
+ // accumulatedInjectionCount: 12180,
+ // accumulatedClampingCount: 545636,
+ // accumulatedEnergyConsumption: 64
});
const maintenanceColumns = [
@@ -58,22 +86,40 @@
{
key: '1',
type: '渚嬭淇濆吇',
- content: '妫�鏌ユ恫鍘嬫补姹℃煋搴�',
- suggestedTime: '2024-07-15',
+ content: '妫�鏌ユ恫鍘嬫补涔冲寲绋嬪害',
+ suggestedTime: '2025-07-02',
urgency: '涓瓑'
},
{
key: '2',
type: '鏁呴殰棰勮',
- content: '涓荤數鏈鸿酱鎵跨（鎹熼璀�',
- suggestedTime: '2024-08-01',
- urgency: '楂�'
+ content: '涓绘补缂稿瘑灏佸湀瀵垮懡棰勮',
+ suggestedTime: '2025-07-01',
+ urgency: '浣�'
+ },{
+ key: '2',
+ type: '娑插帇娌规鏌�',
+ content: '妫�鏌ョ‘璁ゆ恫鍘嬫补娓╁害鏄惁姝ｅ父',
+ suggestedTime: '2025-07-01',
+ urgency: '浣�'
},
{
key: '3',
- type: '鍐峰嵈绯荤粺缁存姢',
- content: '妫�鏌ュ喎鍗存按娴侀噺',
- suggestedTime: '2024-07-01',
+ type: '鍐峰嵈绯荤粺妫�鏌�',
+ content: '妫�鏌ュ喎姘存満鍒跺喎鏁堢巼鏄惁杈炬爣',
+ suggestedTime: '2025-06-11',
+ urgency: '浣�'
+ },{
+ key: '3',
+ type: '娑插帇绯荤粺妫�鏌�',
+ content: '妫�鏌ュ悇娑插帇绠￠亾鍘嬪姏琛ㄤ笌鐢佃剳鏄剧ず鏄惁涓�鑷�',
+ suggestedTime: '2025-06-11',
+ urgency: '浣�'
+ },{
+ key: '3',
+ type: '娓╂帶绯荤粺妫�鏌�',
+ content: '妫�鏌ュ悇娈靛姞鐑湀鍔犵儹銆佺儹鐢佃�︽槸鍚﹀紓甯�',
+ suggestedTime: '2025-06-11',
urgency: '浣�'
}
]);
@@ -95,23 +141,44 @@
}
};
+ const fetchDeviceData = async () => {
+ try {
+ const res = await getDeviceDataInj();
+ 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: '澶囦欢鍚嶇О',
+ title: '閮ㄤ欢鍚嶇О',
dataIndex: 'name',
key: 'name'
},
{
- title: '褰撳墠瀵垮懡',
+ title: '棰勮瀵垮懡',
dataIndex: 'currentLife',
- key: 'currentLife',
- customRender: ({ text }: { text: number }) => `${text}灏忔椂`
+ key: 'currentLife'
+
},
{
title: '棰勬祴鍓╀綑瀵垮懡',
dataIndex: 'remainingLife',
- key: 'remainingLife',
- customRender: ({ text }: { text: number }) => `${text}灏忔椂`
+ key: 'remainingLife'
+
},
{
title: '鐘舵��',
@@ -124,23 +191,44 @@
const sparePartData = reactive([
{
key: '1',
- name: '娑插帇娉�',
- currentLife: 18_500,
- remainingLife: 1500,
- status: '棰勮'
+ name: '娑插帇娌�',
+ currentLife: 8_500,
+ remainingLife: 2515,
+ status: '鑹ソ'
},
{
key: '2',
name: '鍔犵儹鍦�',
- currentLife: 12_000,
- remainingLife: 3000,
+ currentLife: 6_000,
+ remainingLife: 3415,
status: '鑹ソ'
},
{
key: '3',
- name: '铻烘潌鏂欑瓛',
- currentLife: 25_000,
- remainingLife: 5000,
+ name: '鐑數鑰�',
+ currentLife: 8_000,
+ remainingLife: 5851,
+ status: '鑹ソ'
+ },
+ {
+ key: '3',
+ name: '娉ㄨ兌鍢�',
+ currentLife: "100000娆�",
+ remainingLife: "76438娆�",
+ status: '鑹ソ'
+ },
+ {
+ key: '3',
+ name: '閿佹ā澶瑰叿',
+ currentLife: "12涓湀",
+ remainingLife: "8涓湀",
+ status: '鑹ソ'
+ },
+ {
+ key: '3',
+ name: '娉ㄨ兌铻烘潌',
+ currentLife: "60涓湀",
+ remainingLife: "48涓湀",
status: '鑹ソ'
}
]);
@@ -148,21 +236,49 @@
const historyData = reactive([
{
id: '1',
- date: '2023-10-20',
+ date: '2025-08-15',
type: '渚嬭淇濆吇',
- description: '鏇存崲娑插帇娌规护鑺�',
+ description: '娑插帇绯荤粺妫�鏌ワ紝娓╂帶绯荤粺妫�鏌�',
+ color: 'green'
+ },
+ {
+ id: '1',
+ date: '2025-07-20',
+ type: '渚嬭淇濆吇',
+ description: '娑插帇绯荤粺妫�鏌ワ紝娓╂帶绯荤粺妫�鏌�',
color: 'green'
},
{
id: '2',
- date: '2023-08-15',
- type: '鏁呴殰缁翠慨',
- description: '娉ㄥ皠鍗曞厓鍗℃粸锛屾竻鐞嗗紓鐗�',
- color: 'red'
+ date: '2025-07-13',
+ type: '缁翠慨淇濆吇',
+ description: '绗竴娈垫俯搴︽樉绀哄紓甯革紝鐑數鑰︽崯鍧忥紝鏇存崲鏂伴厤浠�',
+ color: 'orange'
+ },
+ {
+ id: '1',
+ date: '2025-06-18',
+ type: '渚嬭淇濆吇',
+ description: '娑插帇绯荤粺妫�鏌ワ紝娓╂帶绯荤粺妫�鏌�',
+ color: 'green'
+ },
+ {
+ id: '2',
+ date: '2025-05-23',
+ type: '缁翠慨淇濆吇',
+ description: '绗笁娈垫俯搴﹀紓甯革紝鍔犵儹鍦堢儳鍧忥紝鏇存崲鏂伴厤浠�',
+ color: 'orange'
+ },
+ {
+ id: '2',
+ date: '2025-05-15',
+ type: '渚嬭淇濆吇',
+ description: '娑插帇绯荤粺妫�鏌ワ紝娓╂帶绯荤粺妫�鏌�',
+ color: 'green'
},
{
id: '3',
- date: '2023-06-01',
+ date: '2025-04-01',
type: '骞村害淇濆吇',
description: '鍏ㄩ潰妫�鏌ヨ澶囪繍琛岀姸鎬�',
color: 'blue'
@@ -191,6 +307,68 @@
// 瀹為檯椤圭洰涓繖閲屼細璋冪敤API澶勭悊缁存姢寤鸿
};
+ let intervalId: number | undefined;
+
+ // const updateAccumulatedData = () => {
+ // healthData.accumulatedInjectionCount += + 0.1; // 姣忔澧炲姞1-5鍒嗛挓
+ // healthData.accumulatedClampingCount += Math.floor(Math.random() * 100) + 10; // 姣忔澧炲姞10-100娆�
+ // healthData.accumulatedEnergyConsumption += (Math.random() * 0.015 + 0.008); // 姣忔澧炲姞0.1-0.6 kWh
+
+ // // 鏇存柊鏄剧ず鍊�
+ // const totalMinutes = Math.floor(healthData.accumulatedInjectionCount);
+
+ // const minutes = totalMinutes % 60;
+ // healthData.injectionCount = `${healthData.accumulatedInjectionCount}h`;
+ // healthData.clampingCount = healthData.accumulatedClampingCount;
+ // healthData.energyConsumption = parseFloat(healthData.accumulatedEnergyConsumption.toFixed(2));
+ // };
+ const maintenanceTable = ref<HTMLElement | null>(null);
+ // 鍒濆璁剧疆涓�娆★紝閬垮厤棣栨鍔犺浇鏃舵樉绀轰负0
+ // updateAccumulatedData();
+ 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);
+ };
+
+
+
+ onMounted(() => {
+ // 姣�5绉掓洿鏂颁竴娆＄疮鍔犳暟鎹�
+ // intervalId = setInterval(updateAccumulatedData, 5000);
+ nextTick(() => {
+ startScroll();
+ });
+ })
+ onUnmounted(() => {
+ if (scrollInterval) {
+ clearInterval(scrollInterval);
+ }
+ if (deviceDataInterval) {
+ clearInterval(deviceDataInterval);
+ }
+ });
+
+
return {
deviceInfo,
healthData,
@@ -201,11 +379,12 @@
historyData,
getStatusColor,
getUrgencyColor,
- handleMaintenance
+ handleMaintenance,
+ maintenanceTable
};
},
-
mounted() {
+
// 鍒濆鍖栧浘琛�
const initChart = (chartId: string, title: string, chartData: any[], unit: string, baseValue: number, fluctuation: number) => {
const chart = echarts.init(document.getElementById(chartId));
@@ -213,11 +392,12 @@
// 纭繚鍒濆鏁版嵁鐐硅冻澶熸樉绀轰竴涓畬鏁寸殑瓒嬪娍
if (chartData.length === 0) {
const now = new Date();
- for (let i = 0; i < 60; i++) { // 鐢熸垚60涓偣锛屼唬琛�5鍒嗛挓鐨勬暟鎹�
- const time = new Date(now.getTime() - (59 - i) * 5000); // 姣忎釜鐐归棿闅�5绉�
+ for (let i = 0; i < 24; i++) {
+ // 鐢熸垚60涓偣锛屼唬琛�5鍒嗛挓鐨勬暟鎹�
+ const time = new Date(now.getTime() - (24 - i) * 5000); // 姣忎釜鐐归棿闅�5绉�
chartData.push({
time: time.toLocaleTimeString(),
- value: (baseValue + Math.random() * fluctuation * 2 - fluctuation).toFixed(2),
+ value: (baseValue + Math.random() * fluctuation * 2 - fluctuation).toFixed(2)
});
}
}
@@ -233,7 +413,7 @@
time,
value: newValue
});
- if (chartData.length > 60) {
+ if (chartData.length > 24) {
chartData.shift();
}
@@ -256,7 +436,7 @@
},
xAxis: {
type: 'category',
- data: chartData.map(item => item.time)
+ data: chartData.map((item) => item.time)
},
yAxis: {
type: 'value',
@@ -266,7 +446,7 @@
},
series: [
{
- data: chartData.map(item => Number.parseFloat(item.value)),
+ data: chartData.map((item) => Number.parseFloat(item.value)),
type: 'line',
smooth: true,
lineStyle: {
@@ -285,7 +465,7 @@
color: 'rgba(84,112,198,0)'
}
])
- },
+ }
}
]
};
@@ -301,11 +481,12 @@
window.addEventListener('resize', () => {
chart.resize();
});
- onUnmounted(() => {
- clearInterval(intervalId);
+ window.addEventListener('resize', () => {
+ chart.resize();
});
};
+
const hydraulicOilTemperatureData: any[] = [];
@@ -321,49 +502,60 @@
const ejectorPositionData: any[] = [];
const cycleTimeData: any[] = [];
- initChart('hydraulicOilTemperatureChart', '娑插帇娌规俯', hydraulicOilTemperatureData, '掳C', 50, 2);
- initChart('hydraulicOilPressureChart', '娑插帇娌瑰帇', hydraulicOilPressureData, 'MPa', 150, 5);
- initChart('mainMotorCurrentChart', '涓荤數鏈虹數娴�', mainMotorCurrentData, 'A', 80, 3);
+ // initChart('hydraulicOilTemperatureChart', '娑插帇娌规俯', hydraulicOilTemperatureData, '掳C', 50, 2);
+ // initChart('hydraulicOilPressureChart', '娑插帇娌瑰帇', hydraulicOilPressureData, 'MPa', 150, 5);
+ // initChart('mainMotorCurrentChart', '涓荤數鏈虹數娴�', mainMotorCurrentData, 'A', 80, 3);
initChart('screwSpeedChart', '铻烘潌杞��', screwSpeedData, 'rpm', 100, 10);
- initChart('moldClampingForceChart', '閿佹ā鍔�', moldClampingForceData, 'kN', 1000, 50);
- initChart('injectionPressureChart', '娉ㄥ皠鍘嬪姏', injectionPressureData, 'MPa', 1200, 80);
+ initChart('moldClampingForceChart', '閿佹ā鍘嬪姏', moldClampingForceData, 'Bar', 120, 10);
+ initChart('injectionPressureChart', '娉ㄥ皠鍘嬪姏', injectionPressureData, 'Bar', 80, 5);
initChart('injectionSpeedChart', '娉ㄥ皠閫熷害', injectionSpeedData, 'mm/s', 150, 10);
- initChart('barrelTemperatureChart', '鏂欑瓛娓╁害', barrelTemperatureData, '掳C', 200, 5);
- initChart('coolingWaterTemperatureChart', '鍐峰嵈姘存俯搴�', coolingWaterTemperatureData, '掳C', 25, 2);
- initChart('coolingWaterFlowChart', '鍐峰嵈姘存祦閲�', coolingWaterFlowData, 'L/min', 30, 3);
- initChart('ejectorPositionChart', '椤跺嚭浣嶇疆', ejectorPositionData, 'mm', 50, 5);
- initChart('cycleTimeChart', '寰幆鏃堕棿', cycleTimeData, 's', 30, 2);
+ initChart('barrelTemperatureChart', '鏂欑瓛娓╁害', barrelTemperatureData, '掳C', 240, 3);
+ initChart('coolingWaterTemperatureChart', '鍐锋按鏈烘俯搴�', coolingWaterTemperatureData, '掳C', 20, 2);
+ // initChart('coolingWaterFlowChart', '鍐峰嵈姘存祦閲�', coolingWaterFlowData, 'L/min', 30, 3);
+ // initChart('ejectorPositionChart', '椤跺嚭浣嶇疆', ejectorPositionData, 'mm', 50, 5);
+ // initChart('cycleTimeChart', '寰幆鏃堕棿', cycleTimeData, 's', 30, 2);
+ },
+ unmounted() {
+ // 娓呴櫎瀹氭椂鍣�
+ if (this.intervalId) {
+ clearInterval(this.intervalId);
+ }
}
});
</script>
<template>
<div class="device-detail-container">
- <a-page-header
- :sub-title="deviceInfo.deviceName"
- title="娉ㄥ鏈洪娴嬫�х淮鎶よ鎯�"
- @back="() => $router.go(-1)"
- />
+ <a-page-header :sub-title="deviceInfo.deviceName" title="娉ㄥ鏈洪娴嬫�х淮鎶よ鎯�" @back="() => $router.go(-1)" />
<a-row :gutter="16" class="mt-4">
- <!-- 璁惧鍩烘湰淇℃伅 -->
- <a-col :span="8">
- <a-card :style="{ height: '440px' }" class="mb-4" title="璁惧鍩烘湰淇℃伅">
- <a-descriptions :column="1" bordered>
- <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 :style="{ height: '440px' }" class="mb-4" title="璁惧淇℃伅">
+ <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 :column="1" bordered>
+ <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 :style="{ height: '440px' }" class="mb-4" title="璁惧鍋ュ悍鐘舵�佷笌缁存姢寤鸿">
<a-row :gutter="16">
<a-col :span="8">
@@ -376,34 +568,17 @@
/>
</a-col>
<a-col :span="8">
- <a-statistic
- :value="healthData.predictedLife"
- suffix="澶�"
- title="棰勬祴鍓╀綑瀵垮懡"
- />
+ <a-statistic :value="healthData.predictedLife" suffix="澶�" title="棰勬祴鍓╀綑瀵垮懡" />
</a-col>
<a-col :span="8">
- <a-statistic
- :value="healthData.riskLevel"
- :value-style="{ color: healthData.riskColor }"
- title="鏁呴殰椋庨櫓绛夌骇"
- />
+ <a-statistic :value="healthData.riskLevel" :value-style="{ color: healthData.riskColor }" title="鏁呴殰椋庨櫓绛夌骇" />
</a-col>
</a-row>
<div class="mt-4">
- <a-progress
- :percent="healthData.overallHealth"
- :show-info="false"
- :stroke-color="healthData.healthColor"
- />
+ <a-progress :percent="healthData.overallHealth" :show-info="false" :stroke-color="healthData.healthColor" />
</div>
<a-divider orientation="left">棰勬祴鎬х淮鎶ゅ缓璁�</a-divider>
- <a-table
- :columns="maintenanceColumns"
- :data-source="maintenanceData"
- :pagination="false"
- size="small"
- >
+ <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>
</template>
@@ -414,65 +589,109 @@
</a-card>
</a-col>
</a-row>
+ <a-col :span="24">
+ <a-card class="mb-4" title="璁惧鏁版嵁">
+ <a-row :gutter="[16, 16]">
+ <a-col :span="4">
+ <a-statistic :value="healthData.injectionCount.toFixed(2)" suffix="h" title="鎬诲紑鏈烘椂闂�">
+ <template #prefix>
+ <LineChartOutlined />
+ </template>
+ </a-statistic>
+ </a-col>
+ <a-col :span="4">
+ <a-statistic :value="healthData.clampingCount.toFixed(0)" suffix="娆�" title="鎬诲惊鐜鏁�">
+ <template #prefix>
+ <LineChartOutlined />
+ </template>
+ </a-statistic>
+ </a-col>
+ <a-col :span="4">
+ <a-statistic :value="healthData.productionCycle.toFixed(0)" suffix="s" title="骞冲潎鐢熶骇鍛ㄦ湡">
+ <template #prefix>
+ <FieldTimeOutlined />
+ </template>
+ </a-statistic>
+ </a-col>
+ <a-col :span="4">
+ <a-statistic :value="healthData.energyConsumption.toFixed(2)" suffix="kWh" title="褰撴棩绱Н鑳借��">
+ <template #prefix>
+ <ThunderboltOutlined />
+ </template>
+ </a-statistic>
+ </a-col>
+ <a-col :span="4">
+ <a-statistic :value="healthData.yieldRate.toFixed(0)" suffix="妯�" title="褰撳墠浜ч噺">
+ <template #prefix>
+ <CheckCircleOutlined />
+ </template>
+ </a-statistic>
+ </a-col>
+<!-- <a-col :span="4">-->
+<!-- <a-statistic :value="healthData.downtime" suffix="s" title="鍑洪敊鍋滄満鏃堕棿">-->
+<!-- <template #prefix>-->
+<!-- <FieldTimeOutlined />-->
+<!-- </template>-->
+<!-- </a-statistic>-->
+<!-- </a-col>-->
+ </a-row>
+ </a-card>
+ </a-col>
<!-- 瀹炴椂鏁版嵁瓒嬪娍鍥� -->
<a-card class="mb-4" title="瀹炴椂鏁版嵁瓒嬪娍鍥�">
- <a-row :gutter="16">
+<!-- <a-row :gutter="16">-->
+<!-- <a-col :span="8">-->
+<!-- <div id="hydraulicOilTemperatureChart" style="height: 300px"></div>-->
+<!-- </a-col>-->
+<!-- <a-col :span="8">-->
+<!-- <div id="hydraulicOilPressureChart" style="height: 300px"></div>-->
+<!-- </a-col>-->
+<!-- <a-col :span="8">-->
+<!-- <div id="mainMotorCurrentChart" style="height: 300px"></div>-->
+<!-- </a-col>-->
+<!-- </a-row>-->
+ <a-row :gutter="16" class="mt-4">
<a-col :span="8">
- <div id="hydraulicOilTemperatureChart" style="height: 300px;"></div>
+ <div id="screwSpeedChart" style="height: 300px"></div>
</a-col>
<a-col :span="8">
- <div id="hydraulicOilPressureChart" style="height: 300px;"></div>
+ <div id="barrelTemperatureChart" style="height: 300px"></div>
</a-col>
<a-col :span="8">
- <div id="mainMotorCurrentChart" style="height: 300px;"></div>
+ <div id="injectionPressureChart" style="height: 300px"></div>
</a-col>
</a-row>
<a-row :gutter="16" class="mt-4">
<a-col :span="8">
- <div id="screwSpeedChart" style="height: 300px;"></div>
+ <div id="injectionSpeedChart" style="height: 300px"></div>
</a-col>
<a-col :span="8">
- <div id="moldClampingForceChart" style="height: 300px;"></div>
+ <div id="moldClampingForceChart" style="height: 300px"></div>
+
</a-col>
<a-col :span="8">
- <div id="injectionPressureChart" style="height: 300px;"></div>
+ <div id="coolingWaterTemperatureChart" style="height: 300px"></div>
</a-col>
</a-row>
- <a-row :gutter="16" class="mt-4">
- <a-col :span="8">
- <div id="injectionSpeedChart" style="height: 300px;"></div>
- </a-col>
- <a-col :span="8">
- <div id="barrelTemperatureChart" style="height: 300px;"></div>
- </a-col>
- <a-col :span="8">
- <div id="coolingWaterTemperatureChart" style="height: 300px;"></div>
- </a-col>
- </a-row>
- <a-row :gutter="16" class="mt-4">
- <a-col :span="8">
- <div id="coolingWaterFlowChart" style="height: 300px;"></div>
- </a-col>
- <a-col :span="8">
- <div id="ejectorPositionChart" style="height: 300px;"></div>
- </a-col>
- <a-col :span="8">
- <div id="cycleTimeChart" style="height: 300px;"></div>
- </a-col>
- </a-row>
+<!-- <a-row :gutter="16" class="mt-4">-->
+<!-- <a-col :span="8">-->
+<!-- <div id="coolingWaterFlowChart" style="height: 300px"></div>-->
+<!-- </a-col>-->
+<!-- <a-col :span="8">-->
+<!-- <div id="ejectorPositionChart" style="height: 300px"></div>-->
+<!-- </a-col>-->
+<!-- <a-col :span="8">-->
+<!-- <div id="cycleTimeChart" style="height: 300px"></div>-->
+<!-- </a-col>-->
+<!-- </a-row>-->
</a-card>
<a-row :gutter="16">
<!-- 澶囦欢瀵垮懡棰勬祴 -->
<a-col :span="12">
<a-card class="mb-4" title="澶囦欢瀵垮懡棰勬祴">
- <a-table
- :columns="sparePartColumns"
- :data-source="sparePartData"
- :pagination="false"
- size="small"
- >
+ <a-table :columns="sparePartColumns" :data-source="sparePartData" :pagination="false" size="small">
<template #status="{ text }">
<a-tag :color="getStatusColor(text)">{{ text }}</a-tag>
</template>
@@ -485,7 +704,7 @@
<a-card class="mb-4" title="鍘嗗彶缁存姢璁板綍">
<a-timeline>
<a-timeline-item v-for="item in historyData" :key="item.id" :color="item.color">
- {{ item.date }} - {{ item.type }}: {{ item.description }}
+ <p>{{ item.date }} - {{ item.type }}锛歿{ item.description }}</p>
</a-timeline-item>
</a-timeline>
</a-card>
@@ -496,54 +715,28 @@
<style scoped>
.device-detail-container {
- padding: 16px;
- background: #f0f2f5;
+ padding: 20px;
+ background-color: #f0f2f5;
}
-.mt-4 {
- margin-top: 16px;
+.device-image-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 330px;
+}
+
+.device-image {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
}
.mb-4 {
margin-bottom: 16px;
}
-</style>
-
-<style scoped>
-.injection-molding-machine-detail {
- padding: 16px;
- background-color: #f0f2f5;
-}
-
-.header-card {
- margin-bottom: 16px;
-}
-
-.device-info h2 {
- font-size: 24px;
- margin-bottom: 10px;
-}
-
-.device-info p {
- margin-bottom: 5px;
-}
-
-.health-status h3 {
- font-size: 20px;
- margin-bottom: 10px;
-}
-
-.ant-statistic-content {
- font-size: 20px !important;
-}
-
-.ant-list-item-meta-title {
- font-size: 16px;
-}
-
-.ant-list-item-meta-description {
- font-size: 14px;
- color: rgba(0, 0, 0, 0.65);
+.mt-4 {
+ margin-top: 16px;
}
</style>
--
Gitblit v1.9.3