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

baoshiwei

2025-07-11 6e3f39127fa0d1d9b42da15904cdf4217a3ae9d6

 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,7 +67,9 @@
              :show-info="false"
            />
          </div>
          <a-divider orientation="left">预测性维护建议</a-divider>

          <a-divider />

          <a-table
            :columns="maintenanceColumns"
            :data-source="maintenanceData"
@@ -74,12 +85,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" suffix="km">
                <template #prefix>
                  <LineChartOutlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="4">
              <a-statistic title="Y轴总移动距离" :value="healthData.yAxisTravel" suffix="km">
                <template #prefix>
                  <LineChartOutlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="4">
              <a-statistic title="卡带次数" :value="healthData.tapeJamCount" suffix="次">
                <template #prefix>
                  <WarningOutlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="4">
              <a-statistic title="卡料次数" :value="healthData.materialJamCount" suffix="次">
                <template #prefix>
                  <WarningOutlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="4">
              <a-statistic title="拼板数" :value="healthData.panelCount" 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-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,7 +150,7 @@
        <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="motorTemperatureChart" style="height: 300px;"></div>
@@ -98,53 +159,30 @@
          <div id="motorVibrationChart" style="height: 300px;"></div>
        </a-col>
        <a-col :span="8">
          <div id="beltTensionChart" style="height: 300px;"></div>
          <div id="nozzleVacuumChart" 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>

        <a-col :span="8">
          <div id="nozzleFlowChart" style="height: 300px;"></div>
        </a-col>
        <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">
            <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"
@@ -176,27 +214,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: 'SmtMachineDetail',
  setup() {
    // 模拟数据
    const deviceInfo = reactive({
      deviceName: 'SMT贴片机-001',
      deviceName: 'SMT贴片机',
      deviceType: '贴片机',
      deviceId: 'SMT-2024-001',
      installDate: '2024-01-01',
      deviceId: 'GPC2012A101',
      installDate: '2012-06-08',
      serviceLife: 8,
      status: '运行中',
      statusColor: '#52c41a'
      statusColor: '#52c41a',
      imageUrl: '/src/assets/images/JUKI.png' // 添加设备图片路径
    });

    const healthData = reactive({
      overallHealth: 92,
      overallHealth: 82,
      healthColor: '#52c41a',
      predictedLife: 2500,
      predictedLife: 635,
      riskLevel: '低风险',
      riskColor: '#52c41a'
      riskColor: '#52c41a',
      xAxisTravel: 300.179,
      yAxisTravel: 233.392,
      tapeJamCount: 15,
      materialJamCount: 15,
      panelCount: 2480,
      downtime: 4.5
    });

    const maintenanceColumns = [
@@ -231,17 +282,18 @@
    const maintenanceData = reactive([
      {
        key: '1',
        type: '运动系统保养',
        content: 'X/Y轴伺服电机润滑检查',
        suggestedTime: '2024-03-20',

         type: '贴装头维护',
        content: '吸嘴真空压力校准',
        suggestedTime: '2024-04-05',
        urgency: '中等'
      },
      {
        key: '2',
        type: '贴装头维护',
        content: '吸嘴真空压力校准',
        suggestedTime: '2024-04-05',
        urgency: '高'
               type: '运动系统保养',
        content: 'X/Y轴伺服电机润滑检查',
        suggestedTime: '2024-03-20',
        urgency: '低'
      },
      {
        key: '3',
@@ -267,7 +319,7 @@

    const sparePartColumns = [
      {
        title: '备件名称',
        title: '部件名称',
        dataIndex: 'name',
        key: 'name'
      },
@@ -370,27 +422,34 @@
      handleMaintenance
    };
  },
  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: {
            text: title,
@@ -399,7 +458,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 +473,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分钟数据）

      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();
      });
@@ -473,31 +546,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: '°C', baseValue: 45, fluctuation: 2, color: '#5470C6' },
    ]);
    initChart('motorVibrationChart', '电机振动', [
      { name: '振动', data: [], unit: 'mm/s', baseValue: 5, fluctuation: 0.5, color: '#5470C6' },
    ], );
        initChart('nozzleVacuumChart', '吸嘴真空压力', [
          { name: '压力', data: [], unit: 'kPa', baseValue: -39, 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: 'L/min', baseValue: 5, fluctuation: 0.5, color: '#5470C6' },
    ]);
    initChart('placementSpeedChart', '贴装速度', [
      { name: '速度', data: [], unit: 'mm/s', baseValue: 100, fluctuation: 10, color: '#5470C6' },
    ]);
    const ambientTemperatureData: any[] = [];
    const ambientHumidityData: any[] = [];
    initChart('ambientTemperatureHumidityChart', '环境温湿度', [
      { name: '温度', data: ambientTemperatureData, unit: '°C', baseValue: 25, fluctuation: 2, 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 +596,18 @@
  padding: 16px;
  background: #f0f2f5;
}
</style>

.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>