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 | 635 +++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 480 insertions(+), 155 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 5d391ab..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
@@ -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="deviceInfo.imageUrl" 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">
@@ -58,12 +67,16 @@
:show-info="false"
/>
</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>
@@ -74,12 +87,62 @@
</a-table>
</a-card>
</a-col>
+ <a-col :span="24">
+ <a-card title="璁惧鏁版嵁" class="mb-4">
+ <a-row :gutter="[16, 16]">
+ <a-col :span="4">
+ <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.toFixed(2)" suffix="km">
+ <template #prefix>
+ <LineChartOutlined />
+ </template>
+ </a-statistic>
+ </a-col>
+ <a-col :span="4">
+ <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.toFixed(0)" suffix="娆�">
+ <template #prefix>
+ <WarningOutlined />
+ </template>
+ </a-statistic>
+ </a-col>
+ <a-col :span="4">
+ <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.toFixed(1)" suffix="绉�">
+ <template #prefix>
+ <FieldTimeOutlined />
+ </template>
+ </a-statistic>
+ </a-col>
+ </a-row>
+ </a-card>
+ </a-col>
</a-row>
+
+
<!-- 瀹炴椂鏁版嵁瓒嬪娍鍥� -->
<a-card title="瀹炴椂鏁版嵁瓒嬪娍鍥�" class="mb-4">
<!-- 杩愬姩绯荤粺 -->
- <a-row :gutter="16">
+ <!-- <a-row :gutter="16">
<a-col :span="8">
<div id="xAxisMotorCurrentChart" style="height: 300px;"></div>
</a-col>
@@ -89,23 +152,25 @@
<a-col :span="8">
<div id="zAxisMotorCurrentChart" style="height: 300px;"></div>
</a-col>
- </a-row>
+ </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="beltTensionChart" 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 :span="8">
+ <div id="nozzleVacuumChart" style="height: 300px;"></div>
</a-col>
<a-col :span="8">
<div id="nozzleFlowChart" style="height: 300px;"></div>
@@ -113,38 +178,15 @@
<a-col :span="8">
<div id="placementSpeedChart" style="height: 300px;"></div>
</a-col>
+
</a-row>
- <!-- 瑙嗚绯荤粺 -->
- <a-row :gutter="16" class="mt-4">
- <a-col :span="8">
- <div id="placementAccuracyChart" style="height: 300px;"></div>
- </a-col>
- <a-col :span="8">
- <div id="visionAlignmentChart" style="height: 300px;"></div>
- </a-col>
- <a-col :span="8">
- <div id="lightIntensityChart" style="height: 300px;"></div>
- </a-col>
- </a-row>
- <!-- 鐜鍙傛暟 -->
- <a-row :gutter="16" class="mt-4">
- <a-col :span="8">
- <div id="feederMotorCurrentChart" style="height: 300px;"></div>
- </a-col>
- <a-col :span="8">
- <div id="esdChart" style="height: 300px;"></div>
- </a-col>
- <a-col :span="8">
- <div id="ambientTemperatureHumidityChart" style="height: 300px;"></div>
- </a-col>
- </a-row>
</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"
@@ -174,29 +216,51 @@
</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/JUKI.png'
+import { getDeviceDataSmt, updateDeviceData, initDeviceData } from '#/api/eims/equ/deviceData'
export default defineComponent({
name: 'SmtMachineDetail',
setup() {
// 妯℃嫙鏁版嵁
const deviceInfo = reactive({
- deviceName: 'SMT璐寸墖鏈�-001',
+ deviceName: 'SMT璐寸墖鏈�',
deviceType: '璐寸墖鏈�',
- deviceId: 'SMT-2024-001',
- installDate: '2024-01-01',
- serviceLife: 8,
+ deviceId: 'GPC2012A101',
+ installDate: '2012-06-08',
+ serviceLife: 15,
status: '杩愯涓�',
- statusColor: '#52c41a'
+ statusColor: '#52c41a',
+ imageUrl: img // 娣诲姞璁惧鍥剧墖璺緞
});
const healthData = reactive({
- overallHealth: 92,
+ overallHealth: 82,
healthColor: '#52c41a',
- predictedLife: 2500,
+ predictedLife: 635,
riskLevel: '浣庨闄�',
- riskColor: '#52c41a'
+ riskColor: '#1a7ac4',
+ xAxisTravel: 300.179,
+ yAxisTravel: 233.392,
+ tapeJamCount: 6,
+ materialJamCount: 15,
+ panelCount: 2480,
+ downtime: 4.5,
+ // // 鐢ㄤ簬绱姞鐨勬暟鎹�
+ // accumulatedXAxisTravel: 300.179,
+ // accumulatedYAxisTravel: 233.392,
+ // accumulatedTapeJamCount: 6,
+ // accumulatedMaterialJamCount: 15,
+ // accumulatedPanelCount: 2480,
+ // accumulatedDowntime: 4.5
});
const maintenanceColumns = [
@@ -231,25 +295,66 @@
const maintenanceData = reactive([
{
key: '1',
- type: '杩愬姩绯荤粺淇濆吇',
- content: 'X/Y杞翠己鏈嶇數鏈烘鼎婊戞鏌�',
- suggestedTime: '2024-03-20',
+
+ type: '1鍙疯创瑁呯郴缁熺淮鎶�',
+ content: '鍚稿槾鐪熺┖鍘嬪姏鍋忎綆',
+ suggestedTime: '2025-07-05',
+ urgency: '涓瓑'
+ },
+ {
+ key: '6',
+
+ type: '4鍙疯创瑁呯郴缁熺淮鎶�',
+ content: 'T杞撮┈杈惧鍛藉憡鎬�',
+ suggestedTime: '2025-07-05',
urgency: '涓瓑'
},
{
key: '2',
- type: '璐磋澶寸淮鎶�',
- content: '鍚稿槾鐪熺┖鍘嬪姏鏍″噯',
- suggestedTime: '2024-04-05',
- urgency: '楂�'
+ type: '杩愬姩绯荤粺淇濆吇',
+ content: 'X/Y杞翠己鏈嶇數鏈烘鼎婊戞鏌�',
+ 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) => {
@@ -265,23 +370,44 @@
}
};
+
+ 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: '澶囦欢鍚嶇О',
+ 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: '鐘舵��',
@@ -294,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'
}
]);
@@ -357,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,
@@ -367,30 +639,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 > 24) {
+ s.data.shift();
+ }
});
- if (chartData.length > 60) {
- chartData.shift();
- }
-
+
const option = {
title: {
text: title,
@@ -399,7 +679,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: {
@@ -410,59 +694,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: chartId === 'motorCurrentChart' ? '#5470C6' : chartId === 'motorTemperatureChart' ? '#91CC75' : '#FAC858' // 鏍规嵁鍥捐〃ID璁剧疆棰滆壊
- },
- areaStyle: {
- opacity: 0.8,
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: chartId === 'motorCurrentChart' ? 'rgba(84,112,198,0.3)' : chartId === 'motorTemperatureChart' ? 'rgba(145,204,117,0.3)' : 'rgba(250,200,88,0.3)'
- },
- {
- offset: 1,
- color: chartId === 'motorCurrentChart' ? 'rgba(84,112,198,0)' : chartId === 'motorTemperatureChart' ? 'rgba(145,204,117,0)' : 'rgba(250,200,88,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 < 24; i++) {
+ const now = new Date(Date.now() - (24 - 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();
});
@@ -473,31 +767,48 @@
};
// 杩愬姩绯荤粺鐩戞祴
- initChart('xAxisMotorCurrentChart', 'X杞寸數鏈虹數娴�', [], 'A', 10, 1);
- initChart('yAxisMotorCurrentChart', 'Y杞寸數鏈虹數娴�', [], 'A', 10, 1);
- initChart('zAxisMotorCurrentChart', 'Z杞寸數鏈虹數娴�', [], 'A', 8, 0.8);
- initChart('motorTemperatureChart', '鐢垫満娓╁害', [], '掳C', 45, 2);
- initChart('motorVibrationChart', '鐢垫満鎸姩', [], 'mm/s', 5, 0.5);
- initChart('beltTensionChart', '鐨甫寮犲姏', [], 'N', 50, 5);
-
+ // initChart('xAxisMotorCurrentChart', 'X杞寸數鏈虹數娴�', [], 'A', 10, 1);
+ // initChart('yAxisMotorCurrentChart', 'Y杞寸數鏈虹數娴�', [], 'A', 10, 1);
+ // initChart('zAxisMotorCurrentChart', 'Z杞寸數鏈虹數娴�', [], 'A', 8, 0.8);
+ initChart('motorTemperatureChart', '浜ч噺', [
+ { name: '浜ч噺', data: [], unit: 'pcs/h', baseValue: 175, fluctuation: 25, color: '#5470C6' },
+ ]);
+ initChart('motorVibrationChart', '鎶涙枡鐜�', [
+ { name: '鎶涙枡鐜�', data: [], unit: '%', baseValue: 0.15, fluctuation: 0.01, color: '#5470C6' },
+ ], );
+ initChart('nozzleVacuumChart', '鍚稿槾鐪熺┖鍘嬪姏', [
+ { name: '鍘嬪姏', data: [], unit: 'kPa', baseValue: -45, fluctuation: 5, color: '#5470C6' },
+ ],);
+ // initChart('beltTensionChart', '鐨甫寮犲姏', [], 'N', 50, 5);
+
// 璐磋澶�/鍚稿槾鐩戞祴
- initChart('nozzleVacuumChart', '鍚稿槾鐪熺┖鍘嬪姏', [], 'kPa', 80, 5);
- initChart('nozzleFlowChart', '鍚稿槾娴侀噺', [], 'L/min', 5, 0.5);
- initChart('placementSpeedChart', '璐磋閫熷害', [], 'mm/s', 100, 10);
- initChart('placementAccuracyChart', '璐磋绮惧害', [], '渭m', 50, 5);
-
- // 瑙嗚绯荤粺鐩戞祴
- initChart('visionAlignmentChart', '瑙嗚瀵逛綅绮惧害', [], '渭m', 30, 3);
- initChart('lightIntensityChart', '鍏夋簮浜害', [], 'lux', 5000, 500);
-
+
+ initChart('nozzleFlowChart', '鍚稿槾鍚规皵鍘嬪姏', [
+ { name: '鍘嬪姏', data: [], unit: 'kPa', baseValue: 20, fluctuation: 5, color: '#5470C6' },
+ ]);
+ initChart('placementSpeedChart', '璐磋閫熷害', [
+ { 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: 1, color: '#5470C6' },
+ { name: '婀垮害', data: ambientHumidityData, unit: '%', baseValue: 60, fluctuation: 5, color: '#91cc75' }
+ ]);
+ // initChart('placementAccuracyChart', '璐磋绮惧害', [], '渭m', 50, 5);
+
+ // // 瑙嗚绯荤粺鐩戞祴
+ // initChart('visionAlignmentChart', '瑙嗚瀵逛綅绮惧害', [], '渭m', 30, 3);
+ // initChart('lightIntensityChart', '鍏夋簮浜害', [], 'lux', 5000, 500);
+
// 渚涙枡绯荤粺鐩戞祴
- initChart('feederMotorCurrentChart', '渚涙枡鐢垫満鐢垫祦', [], 'A', 5, 0.5);
-
+ // initChart('feederMotorCurrentChart', '渚涙枡鐢垫満鐢垫祦', [], 'A', 5, 0.5);
+
// 鐜鐩戞祴
- initChart('esdChart', '闈欑數鐩戞祴', [], 'kV', 0.1, 0.05);
- initChart('ambientTemperatureHumidityChart', '鐜娓╂箍搴�', [], '掳C', 25, 2);
+ // initChart('esdChart', '闈欑數鐩戞祴', [], 'kV', 0.1, 0.05);
+
}
-
+
});
</script>
@@ -506,4 +817,18 @@
padding: 16px;
background: #f0f2f5;
}
-</style>
\ No newline at end of file
+
+.device-image-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 330px; /* 鏍规嵁闇�瑕佽皟鏁撮珮搴� */
+ overflow: hidden;
+}
+
+.device-image {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+}
+</style>
--
Gitblit v1.9.3