refactor(eims): 重构预测性维护模块

baoshiwei

2025-07-11 1524fa42ddf01fd72207a8a4b4667a48e4f233aa

 eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/index.vue

@@ -4,7 +4,7 @@

      <!-- 设备健康状态可视化 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        <Card title="设备健康度分布" >
        <Card title="设备健康度评分" >
          <!-- 这里将放置健康度分布图表 -->
          <div ref="chartRef" class="h-64 w-full"></div>
        </Card>
@@ -43,7 +43,7 @@
        <div class="grid grid-cols-1 gap-4">

            <!-- 这里将放置预警表格 -->
            <a-table :columns="warningColumns" :data-source="warningData" :pagination="false" class="w-full">
            <Table :columns="warningColumns" :data-source="warningData" :pagination="false" class="w-full">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'status'">
                  <a-tag :color="getStatusColor(record.status)">
@@ -55,16 +55,16 @@
                  <a-button type="link" @click="generateWorkOrder(record)" :disabled="record.maintenanceSuggestion === '暂无建议'">生成工单</a-button>
                </template>
              </template>
            </a-table>
            </Table>
          </div>

      </Card>

      <!-- 备件信息 -->
      <div class="grid grid-cols-2 gap-4 mb-6">
        <!-- 备件寿命预测 -->
        <Card title="备件寿命预测">
          <a-table :columns="lifePredictionColumns" :data-source="lifePredictionData" :pagination="false" class="w-full">
        <!-- 设备部件寿命预测 -->
        <Card title="设备部件寿命预测">
          <Table :columns="lifePredictionColumns" :data-source="lifePredictionData" :pagination="false" class="w-full">
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'lifeStatus'">
                <a-tag :color="getLifeStatusColor(record.remainingDays)">
@@ -75,12 +75,12 @@
                <a-button type="link" @click="showLifePredictionDetail(record)">详情</a-button>
              </template>
            </template>
          </a-table>
          </Table>
        </Card>

        <!-- 备件库存与预警 -->
        <Card title="备件库存与预警">
          <a-table :columns="sparePartColumns" :data-source="sparePartData" :pagination="false" class="w-full">
          <Table :columns="sparePartColumns" :data-source="sparePartData" :pagination="false" class="w-full">
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'stockStatus'">
                <a-tag :color="getStockStatusColor(record.currentStock, record.safetyStock)">
@@ -91,7 +91,7 @@
                <a-button type="link" @click="showSparePartDetail(record)">详情</a-button>
              </template>
            </template>
          </a-table>
          </Table>
        </Card>
      </div>

@@ -103,7 +103,7 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Page } from '@vben/common-ui';
import { Card, Table, Tag, Button, Form, Input, Textarea, Select, message } from 'ant-design-vue';
import { Button, Card, Form, Input, message, Select, Table, Tag } from 'ant-design-vue';
import * as echarts from 'echarts';

const chartRef = ref<HTMLElement | null>(null);
@@ -136,12 +136,12 @@
    key: '1',
    name: 'SMT贴片机',
    type: 'SMT机器',
    component: '传送带',
    indicator: '振动幅度',
    value: 0.8,
    threshold: 0.5,
    status: '高风险',
    maintenanceSuggestion: '建议更换传送带轴承',
    component: '左3-Head',
    indicator: '真空压力',
    value: 32,
    threshold: 35,
    status: '中风险',
    maintenanceSuggestion: '真空压力值低于设定值，建议检查或更换吸嘴',
    maintenanceType: '预防性维护',
  },
  {
@@ -153,7 +153,7 @@
    value: 85,
    threshold: 80,
    status: '中风险',
    maintenanceSuggestion: '建议对主轴进行润滑保养',
    maintenanceSuggestion: '建议对主轴进行润滑保养并检查冷却系统',
    maintenanceType: '润滑维护',
  },
  {
@@ -161,25 +161,25 @@
    name: '注塑机',
    type: '注塑设备',
    component: '液压系统',
    indicator: '压力',
    value: 120,
    threshold: 150,
    indicator: '射出压力不稳定',
    value: 28,
    threshold: 30,
    status: '低风险',
    maintenanceSuggestion: '建议检查液压系统密封件',
    maintenanceType: '检查维护',
  },
  {
    key: '4',
    name: '空压机',
    type: '空气压缩机',
    component: '电机',
    indicator: '电流',
    value: 49,
    threshold: 50,
    status: '低风险',
    maintenanceSuggestion: '暂无建议',
    maintenanceType: '无',
  },
  // {
  //   key: '4',
  //   name: '空压机',
  //   type: '空气压缩机',
  //   component: '电机',
  //   indicator: '电流',
  //   value: 49,
  //   threshold: 50,
  //   status: '低风险',
  //   maintenanceSuggestion: '暂无建议',
  //   maintenanceType: '无',
  // },
]);

// 备件库存数据
@@ -197,8 +197,8 @@
    key: '1',
    name: '传送带轴承',
    currentStock: 10,
    safetyStock: 5,
    predictedDemand: 3,
    safetyStock: 15,
    predictedDemand: 8,
  },
  {
    key: '2',
@@ -211,7 +211,7 @@
    key: '3',
    name: '液压系统密封件',
    currentStock: 20,
    safetyStock: 10,
    safetyStock: 25,
    predictedDemand: 5,
  },
  {
@@ -245,8 +245,8 @@

const lifePredictionColumns = [
  { title: '设备名称', dataIndex: 'deviceName', key: 'deviceName' },
  { title: '部件名称', dataIndex: 'componentName', key: 'componentName' },
  { title: '备件名称', dataIndex: 'name', key: 'name' },
  { title: '部位名称', dataIndex: 'componentName', key: 'componentName' },
  { title: '部件名称', dataIndex: 'name', key: 'name' },
  { title: '预测寿命 (天)', dataIndex: 'predictedLife', key: 'predictedLife' },
  { title: '剩余寿命 (天)', dataIndex: 'remainingDays', key: 'remainingDays' },
  { title: '状态', dataIndex: 'lifeStatus', key: 'lifeStatus' },
@@ -254,11 +254,13 @@
];

const lifePredictionData = ref([
  { key: '1', deviceName: 'SMT贴片机', componentName: '传送带', name: '轴承A', predictedLife: 365, remainingDays: 120 },
  { key: '2', deviceName: 'CNC加工中心', componentName: '主轴', name: '齿轮B', predictedLife: 730, remainingDays: 30 },
  { key: '3', deviceName: '注塑机', componentName: '液压系统', name: '滤芯C', predictedLife: 180, remainingDays: 90 },
  { key: '4', deviceName: '空压机', componentName: '电机', name: '传感器D', predictedLife: 500, remainingDays: 10 },
  { key: '5', deviceName: '焊接机器人', componentName: '焊枪', name: '焊嘴E', predictedLife: 240, remainingDays: 60 }
    { key: '4', deviceName: '空压机', componentName: '电机', name: '传感器', predictedLife: 500, remainingDays: 10 },
      { key: '2', deviceName: 'CNC加工中心', componentName: '主轴', name: '齿轮', predictedLife: 730, remainingDays: 30 },
  { key: '1', deviceName: 'SMT贴片机', componentName: '传送带', name: '轴承', predictedLife: 365, remainingDays: 50 },

  { key: '3', deviceName: '注塑机', componentName: '液压系统', name: '滤芯', predictedLife: 180, remainingDays: 90 },

  { key: '5', deviceName: '焊接机器人', componentName: '焊枪', name: '焊嘴', predictedLife: 240, remainingDays: 60 }
]);

const getLifeStatus = (remainingDays) => {
@@ -340,7 +342,7 @@
    console.log('设备ID111:', record.name)
    router.push({ path: '/predictive/smt-detail', query: { deviceId: record.key } });
  } else if (record.name === 'CNC加工中心') {
    router.push({ path: '/predictive/predictive-detail', query: { deviceId: record.key } });
    router.push({ path: '/predictive/cnc-detail', query: { deviceId: record.key } });
  } else if (record.name === '注塑机') {
    router.push({ path: '/predictive/injection-detail', query: { deviceId: record.key } });
  } else {
@@ -360,10 +362,8 @@
      },
      xAxis: {
        type: 'category',
        data: ['90%-100%', '80%-90%', '70%-80%', '60%-70%', '50%-60%', '40%-50%', '30%-40%', '20%-30%', '10%-20%', '0%-10%'],
        axisLabel: {
          rotate: 45
        }
        data: ['10分', '9分', '8分', '7分', '6分', '5分', '4分', '3分', '2分', '1分'],
        
      },
      yAxis: {
        type: 'value',
@@ -376,20 +376,19 @@
          type: 'bar',
          barWidth: '60%',
          data: [
            { value: 15, itemStyle: { color: '#52c41a' } },
            { value: 20, itemStyle: { color: '#52c41a' } },
            { value: 25, itemStyle: { color: '#faad14' } },
            { value: 15, itemStyle: { color: '#faad14' } },
            { value: 10, itemStyle: { color: '#faad14' } },
            { value: 5, itemStyle: { color: '#ff4d4f' } },
            { value: 5, itemStyle: { color: '#ff4d4f' } },
            { value: 3, itemStyle: { color: '#ff4d4f' } },
            { value: 1, itemStyle: { color: '#ff4d4f' } },
            { value: 1, itemStyle: { color: '#ff4d4f' } }
            { value: 48, itemStyle: { color: '#52c41a' } },
            { value: 53, itemStyle: { color: '#52c41a' } },
            { value: 37, itemStyle: { color: '#52c41a' } },
            { value: 29, itemStyle: { color: '#52c41a' } },
            { value: 21, itemStyle: { color: '#52c41a' } },
            { value: 8, itemStyle: { color: '#faad14' } },
            { value: 5, itemStyle: { color: '#faad14' } },
           
          ],
          label: {
            show: true,
            position: 'top'
            position: 'top',
            formatter: '{c}台'
          }
        }
      ]