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 | 574 ++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 421 insertions(+), 153 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 eb36187..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
@@ -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="/src/assets/images/T850-840.2.jpg" 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">
@@ -60,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>
@@ -76,6 +87,56 @@
</a-col>
</a-row>
+ <!-- 璁惧鏁版嵁 -->
+ <a-col :span="24">
+ <a-card title="璁惧鏁版嵁" class="mb-4">
+ <a-row :gutter="[16, 16]">
+ <a-col :span="4">
+ <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.toFixed(0)" suffix="娆�">
+ <template #prefix>
+ <FieldTimeOutlined />
+ </template>
+ </a-statistic>
+ </a-col>
+ <a-col :span="4">
+ <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="Min">
+ <template #prefix>
+ <WarningOutlined />
+ </template>
+ </a-statistic>
+ </a-col>
+ <a-col :span="4">
+ <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="绉�">
+ <template #prefix>
+ <FieldTimeOutlined />
+ </template>
+ </a-statistic>
+ </a-col>
+ </a-row>
+ </a-card>
+ </a-col>
+
<!-- 瀹炴椂鏁版嵁瓒嬪娍鍥� -->
<a-card title="瀹炴椂鏁版嵁瓒嬪娍鍥�" class="mb-4">
<a-row :gutter="16">
@@ -86,48 +147,17 @@
<div id="spindleTemperatureChart" style="height: 300px;"></div>
</a-col>
<a-col :span="8">
- <div id="spindleCurrentChart" style="height: 300px;"></div>
- </a-col>
- </a-row>
- <a-row :gutter="16" class="mt-4">
- <a-col :span="8">
<div id="spindleSpeedChart" style="height: 300px;"></div>
</a-col>
- <a-col :span="8">
- <div id="servoMotorCurrentChart" style="height: 300px;"></div>
- </a-col>
- <a-col :span="8">
- <div id="servoMotorTemperatureChart" style="height: 300px;"></div>
- </a-col>
</a-row>
- <a-row :gutter="16" class="mt-4">
- <a-col :span="8">
- <div id="axisMotionSmoothnessChart" style="height: 300px;"></div>
- </a-col>
- <a-col :span="8">
- <div id="guideRailTemperatureChart" style="height: 300px;"></div>
- </a-col>
- <a-col :span="8">
- <div id="guideRailResistanceNoiseChart" style="height: 300px;"></div>
- </a-col>
- </a-row>
+
+
<a-row :gutter="16" class="mt-4">
<a-col :span="8">
<div id="hydraulicPressureChart" style="height: 300px;"></div>
</a-col>
<a-col :span="8">
- <div id="hydraulicFlowChart" style="height: 300px;"></div>
- </a-col>
- <a-col :span="8">
<div id="hydraulicOilTemperatureChart" style="height: 300px;"></div>
- </a-col>
- </a-row>
- <a-row :gutter="16" class="mt-4">
- <a-col :span="8">
- <div id="airSourcePressureChart" style="height: 300px;"></div>
- </a-col>
- <a-col :span="8">
- <div id="coolantFlowChart" style="height: 300px;"></div>
</a-col>
<a-col :span="8">
<div id="coolantTemperatureChart" style="height: 300px;"></div>
@@ -136,9 +166,9 @@
</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"
@@ -168,29 +198,43 @@
</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,
+ WarningOutlined,
+ AppstoreOutlined,
+ FieldTimeOutlined
+} from '@ant-design/icons-vue';
+import img from '#/assets/images/T850-840.2.jpg';
+import { getDeviceData, updateDeviceData, initDeviceData } from '#/api/eims/equ/deviceData'
export default defineComponent({
name: 'CNCMachiningCenterDetail',
setup() {
// 妯℃嫙鏁版嵁
const deviceInfo = reactive({
- deviceName: 'CNC鍔犲伐涓績 #CNC-001',
+ deviceName: 'CNC鍔犲伐涓績',
deviceType: 'CNC鍔犲伐涓績',
- deviceId: 'CNC-2024-001',
- installDate: '2023-08-20',
+ deviceId: 'GPC2024NL042',
+ installDate: '2024-08-14',
serviceLife: 15,
status: '杩愯涓�',
- statusColor: '#52c41a'
+ statusColor: '#52c41a',
+ imageUrl: img // 娣诲姞璁惧鍥剧墖璺緞
});
const healthData = reactive({
overallHealth: 95,
healthColor: '#52c41a',
- predictedLife: 4500,
+ predictedLife: 5017,
riskLevel: '浣庨闄�',
- riskColor: '#52c41a'
+ riskColor: '#52c41a',
+ xAxisTravel: 7105.5, // 姣忓ぉ鍔�6灏忔椂
+ yAxisTravel: 5641, // 姣忓ぉ鍔�60娆�
+ zAxisTravel: 450.4, // 姣忓ぉ鍔�20绫冲乏鍙�
+ toolChangeCount: 74, // 涓嶆尝鍔�
+ partCount: 17056, // 姣忓ぉ鍔�15涓乏鍙�
+ downtime: 141 // 涓嶆尝鍔�
});
const maintenanceColumns = [
@@ -227,22 +271,43 @@
key: '1',
type: '渚嬭淇濆吇',
content: '妫�鏌ヤ富杞存鼎婊戠郴缁�',
- suggestedTime: '2024-07-15',
- urgency: '涓瓑'
+ suggestedTime: '2025-07-15',
+ urgency: '浣�'
},
{
key: '2',
type: '浼烘湇绯荤粺缁存姢',
content: '妫�鏌杞翠己鏈嶇數鏈�',
- suggestedTime: '2024-09-01',
+ suggestedTime: '2025-06-21',
urgency: '浣�'
},
{
key: '3',
- type: '瀵艰建缁存姢',
+ type: '涓濇潌瀵艰建缁存姢',
content: '琛ュ厖瀵艰建娑︽粦娌�',
- suggestedTime: '2024-08-01',
- urgency: '楂�'
+ 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: '浣�'
}
]);
@@ -261,21 +326,21 @@
const sparePartColumns = [
{
- title: '澶囦欢鍚嶇О',
+ title: '閮ㄤ欢鍚嶇О',
dataIndex: 'name',
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: '鐘舵��',
@@ -287,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'
}
]);
@@ -351,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,
@@ -361,29 +575,38 @@
historyData,
getStatusColor,
getUrgencyColor,
- handleMaintenance
+ handleMaintenance,
+ maintenanceTable
};
+ },
+
+ 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 > 12) {
+ s.data.shift();
+ }
});
- if (chartData.length > 60) {
- chartData.shift();
- }
const option = {
title: {
@@ -393,7 +616,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: {
@@ -404,59 +631,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: '#5470C6' // Default 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)'
- }
- ])
- },
+ })),
+ 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鍒嗛挓鏁版嵁锛�
- for (let i = 0; i < 60; i++) {
- const now = new Date(Date.now() - (60 - i) * 5000); // 鐢熸垚杩囧幓5鍒嗛挓鐨勬暟鎹�
+
+ seriesConfig.forEach(s => {
+ s.data = [];
+ // 鐢熸垚鍒濆鏁版嵁鐐癸紙60涓偣锛�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 = (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();
});
@@ -467,23 +704,54 @@
};
+ // 杩愬姩绯荤粺鐩戞祴
+ 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' },
+ ]);
+ // initChart('spindleCurrentChart', '涓昏酱鐢垫祦', [
+ // { name: '鐢垫祦', data: [], unit: 'A', baseValue: 150, fluctuation: 10, color: '#5470C6' },
+ // ]);
+ initChart('spindleSpeedChart', '涓昏酱杞��', [
+ { name: '杞��', data: [], unit: 'RPM', baseValue: 8000, fluctuation: 100, color: '#5470C6' },
+ ]);
+ // initChart('servoMotorCurrentChart', '浼烘湇鐢垫満鐢垫祦', [
+ // { name: '鐢垫祦', data: [], unit: 'A', baseValue: 50, fluctuation: 5, color: '#5470C6' },
+ // ]);
+ // initChart('servoMotorTemperatureChart', '浼烘湇鐢垫満娓╁害', [
+ // { name: '娓╁害', data: [], unit: '掳C', baseValue: 45, fluctuation: 3, color: '#5470C6' },
+ // ]);
+ // initChart('axisMotionSmoothnessChart', '杞磋繍鍔ㄥ钩绋虫��', [
+ // { name: '骞崇ǔ鎬�', data: [], unit: '', baseValue: 0.8, fluctuation: 0.1, color: '#5470C6' },
+ // ]);
+ // initChart('guideRailTemperatureChart', '瀵艰建娓╁害', [
+ // { name: '娓╁害', data: [], unit: '掳C', baseValue: 35, fluctuation: 2, color: '#5470C6' },
+ // ]);
+ // initChart('guideRailResistanceNoiseChart', '瀵艰建杩愬姩闃诲姏/鍣煶', [
+ // { name: '闃诲姏/鍣煶', data: [], unit: 'dB', baseValue: 10, fluctuation: 2, color: '#5470C6' },
+ // ]);
+ initChart('hydraulicPressureChart', '娑插帇绯荤粺鍘嬪姏', [
+ { name: '鍘嬪姏', data: [], unit: 'bar', baseValue: 150, fluctuation: 5, color: '#5470C6' },
+ ]);
+ // initChart('hydraulicFlowChart', '娑插帇绯荤粺娴侀噺', [
+ // { name: '娴侀噺', data: [], unit: 'L/min', baseValue: 20, fluctuation: 2, color: '#5470C6' },
+ // ]);
+ initChart('hydraulicOilTemperatureChart', '娑插帇娌规俯搴�', [
+ { name: '娓╁害', data: [], unit: '掳C', baseValue: 55, fluctuation: 3, color: '#5470C6' },
+ ]);
+ // initChart('airSourcePressureChart', '姘旀簮鍘嬪姏', [
+ // { name: '鍘嬪姏', data: [], unit: 'bar', baseValue: 0.7, fluctuation: 0.05, color: '#5470C6' },
+ // ]);
+ // initChart('coolantFlowChart', '鍐峰嵈娑叉祦閲�', [
+ // { name: '娴侀噺', data: [], unit: 'L/min', baseValue: 30, fluctuation: 3, color: '#5470C6' },
+ // ]);
+ initChart('coolantTemperatureChart', '鍐峰嵈娑叉俯搴�', [
+ { name: '娓╁害', data: [], unit: '掳C', baseValue: 28, fluctuation: 2, color: '#5470C6' },
+ ]);
- initChart('spindleVibrationChart', '涓昏酱鎸姩', [], 'mm/s', 3.0, 0.5);
- initChart('spindleTemperatureChart', '涓昏酱娓╁害', [], '掳C', 50, 3);
- initChart('spindleCurrentChart', '涓昏酱鐢垫祦', [], 'A', 150, 10);
- initChart('spindleSpeedChart', '涓昏酱杞��', [], 'RPM', 8000, 100);
- initChart('servoMotorCurrentChart', '浼烘湇鐢垫満鐢垫祦', [], 'A', 50, 5);
- initChart('servoMotorTemperatureChart', '浼烘湇鐢垫満娓╁害', [], '掳C', 45, 3);
- initChart('axisMotionSmoothnessChart', '杞磋繍鍔ㄥ钩绋虫��', [], '', 0.8, 0.1);
- initChart('guideRailTemperatureChart', '瀵艰建娓╁害', [], '掳C', 35, 2);
- initChart('guideRailResistanceNoiseChart', '瀵艰建杩愬姩闃诲姏/鍣煶', [], 'dB', 10, 2);
- initChart('hydraulicPressureChart', '娑插帇绯荤粺鍘嬪姏', [], 'bar', 150, 5);
- initChart('hydraulicFlowChart', '娑插帇绯荤粺娴侀噺', [], 'L/min', 20, 2);
- initChart('hydraulicOilTemperatureChart', '娑插帇娌规俯搴�', [], '掳C', 55, 3);
- initChart('airSourcePressureChart', '姘旀簮鍘嬪姏', [], 'bar', 0.7, 0.05);
- initChart('coolantFlowChart', '鍐峰嵈娑叉祦閲�', [], 'L/min', 30, 3);
- initChart('coolantTemperatureChart', '鍐峰嵈娑叉俯搴�', [], '掳C', 28, 2);
}
});
@@ -502,4 +770,4 @@
.mb-4 {
margin-bottom: 16px;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3