refactor(web-antd): 重构预测性维护页面

baoshiwei

2025-07-11 6e3f39127fa0d1d9b42da15904cdf4217a3ae9d6

 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">
@@ -76,6 +85,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" suffix="km">
              <template #prefix>
                <FieldTimeOutlined />
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="4">
            <a-statistic title="刀具使用次数" :value="healthData.yAxisTravel" suffix="km">
              <template #prefix>
                <FieldTimeOutlined />
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="4">
            <a-statistic title="刀具使用时长" :value="healthData.zAxisTravel" suffix="km">
              <template #prefix>
                <FieldTimeOutlined />
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="4">
            <a-statistic title="刀具更换次数" :value="healthData.toolChangeCount" suffix="次">
              <template #prefix>
                <WarningOutlined />
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="4">
            <a-statistic title="加工零件数" :value="healthData.partCount" 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">
@@ -83,51 +142,21 @@
          <div id="spindleVibrationChart" style="height: 300px;"></div>
        </a-col>
        <a-col :span="8">
          <div id="spindleTemperatureChart" style="height: 300px;"></div>
          <div id="hydraulicOilTemperatureChart" 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>
          <div id="spindleTemperatureChart" style="height: 300px;"></div>
          
        </a-col>
        <a-col :span="8">
          <div id="coolantTemperatureChart" style="height: 300px;"></div>
@@ -136,9 +165,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"
@@ -170,27 +199,40 @@
<script lang="ts">
import { defineComponent, reactive, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import {
  LineChartOutlined,
  WarningOutlined,
  AppstoreOutlined,
  FieldTimeOutlined
} from '@ant-design/icons-vue';

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: '/src/assets/images/T850-840.2.jpg' // 添加设备图片路径
    });

    const healthData = reactive({
      overallHealth: 95,
      healthColor: '#52c41a',
      predictedLife: 4500,
      predictedLife: 4436,
      riskLevel: '低风险',
      riskColor: '#52c41a'
      riskColor: '#52c41a',
      xAxisTravel: 1200.5,
      yAxisTravel: 980.2,
      zAxisTravel: 500.1,
      toolChangeCount: 25,
      partCount: 1500,
      downtime: 120
    });

    const maintenanceColumns = [
@@ -227,22 +269,22 @@
        key: '1',
        type: '例行保养',
        content: '检查主轴润滑系统',
        suggestedTime: '2024-07-15',
        suggestedTime: '2025-07-15',
        urgency: '中等'
      },
      {
        key: '2',
        type: '伺服系统维护',
        content: '检查X轴伺服电机',
        suggestedTime: '2024-09-01',
        suggestedTime: '2025-06-21',
        urgency: '低'
      },
      {
        key: '3',
        type: '导轨维护',
        content: '补充导轨润滑油',
        suggestedTime: '2024-08-01',
        urgency: '高'
        suggestedTime: '2025-06-01',
        urgency: '低'
      }
    ]);

@@ -261,7 +303,7 @@

    const sparePartColumns = [
      {
        title: '备件名称',
        title: '部件名称',
        dataIndex: 'name',
        key: 'name'
      },
@@ -365,25 +407,33 @@
    };
  },

  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 > 60) {
            s.data.shift();
          }
        });
        if (chartData.length > 60) {
          chartData.shift();
        }

        const option = {
          title: {
@@ -393,7 +443,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 +458,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分钟数据）

      seriesConfig.forEach(s => {
        s.data = [];
        // 生成初始数据点（60个点，5分钟数据）
      for (let i = 0; i < 60; i++) {
        const now = new Date(Date.now() - (60 - 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();
      });
@@ -466,24 +530,52 @@

    };




    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);
    // 运动系统监测
    initChart('spindleVibrationChart', '主轴振动', [
      { name: '振动', data: [], unit: 'mm/s', baseValue: 3.0, fluctuation: 0.5, 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' },
    ]);
  }

});
@@ -494,6 +586,12 @@
  padding: 16px;
  background: #f0f2f5;
}
.device-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 330px;
}

.mt-4 {
  margin-top: 16px;
@@ -502,4 +600,4 @@
.mb-4 {
  margin-bottom: 16px;
}
</style>
</style>