feat(eims): 更新预测性维护功能 - 新增设备数据定时更新功能 - 添加维护建议滚动显示 - 更新设备部件寿命预测数据 - 调整备件库存与预...

baoshiwei

2025-07-30 7b4cd6ef04b358e0805846d49e3acf02d7eae5cb

 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: '检查X轴伺服电机',
        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>
</style>