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

baoshiwei

2025-07-11 6e3f39127fa0d1d9b42da15904cdf4217a3ae9d6

 eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/injection-molding-machine-detail.vue

@@ -1,20 +1,30 @@
<script lang="ts">
import { defineComponent, onUnmounted, reactive } from 'vue';

import { AppstoreOutlined, FieldTimeOutlined, LineChartOutlined, WarningOutlined, ThunderboltOutlined, CheckCircleOutlined } from '@ant-design/icons-vue';
import * as echarts from 'echarts';

export default defineComponent({
  name: 'InjectionMoldingMachineDetail',
  components: {
    LineChartOutlined,
    WarningOutlined,
    AppstoreOutlined,
    CheckCircleOutlined,
    FieldTimeOutlined,
    ThunderboltOutlined
  },
  setup() {
    // 模拟数据
    const deviceInfo = reactive({
      deviceName: '注塑机 #IM-001',
      deviceName: '立式注塑机',
      deviceType: '注塑机',
      deviceId: 'IM-2024-001',
      installDate: '2023-08-20',
      deviceId: 'GPC2013C027',
      installDate: '2014-01-06',
      serviceLife: 15,
      status: '运行中',
      statusColor: '#52c41a'
      statusColor: '#52c41a',
      imageUrl: '/src/assets/images/2t.png' // 添加设备图片路径
    });

    const healthData = reactive({
@@ -22,7 +32,19 @@
      healthColor: '#faad14',
      predictedLife: 1500,
      riskLevel: '中风险',
      riskColor: '#faad14'
      riskColor: '#faad14',
      injectionPressure: 120, // 注塑压力
      clampingForce: 80, // 锁模力
      moldTemperature: 45, // 模具温度
      screwSpeed: 150, // 螺杆转速
      meltTemperature: 220, // 熔融温度
      coolingTime: 25, // 冷却时间
      injectionCount: '495d 19h 44 ', // 注射次数
      clampingCount: 545636, // 合模次数
      productionCycle: 19, // 生产周期
      energyConsumption: 1500, // 能耗
      yieldRate: 98.5, // 良品率
      downtime: 120 // 出错停机时间
    });

    const maintenanceColumns = [
@@ -97,7 +119,7 @@

    const sparePartColumns = [
      {
        title: '备件名称',
        title: '部件名称',
        dataIndex: 'name',
        key: 'name'
      },
@@ -204,7 +226,6 @@
      handleMaintenance
    };
  },

  mounted() {
    // 初始化图表
    const initChart = (chartId: string, title: string, chartData: any[], unit: string, baseValue: number, fluctuation: number) => {
@@ -213,11 +234,12 @@
      // 确保初始数据点足够显示一个完整的趋势
      if (chartData.length === 0) {
        const now = new Date();
        for (let i = 0; i < 60; i++) { // 生成60个点，代表5分钟的数据
        for (let i = 0; i < 60; i++) {
          // 生成60个点，代表5分钟的数据
          const time = new Date(now.getTime() - (59 - i) * 5000); // 每个点间隔5秒
          chartData.push({
            time: time.toLocaleTimeString(),
            value: (baseValue + Math.random() * fluctuation * 2 - fluctuation).toFixed(2),
            value: (baseValue + Math.random() * fluctuation * 2 - fluctuation).toFixed(2)
          });
        }
      }
@@ -256,7 +278,7 @@
          },
          xAxis: {
            type: 'category',
            data: chartData.map(item => item.time)
            data: chartData.map((item) => item.time)
          },
          yAxis: {
            type: 'value',
@@ -266,7 +288,7 @@
          },
          series: [
            {
              data: chartData.map(item => Number.parseFloat(item.value)),
              data: chartData.map((item) => Number.parseFloat(item.value)),
              type: 'line',
              smooth: true,
              lineStyle: {
@@ -285,7 +307,7 @@
                    color: 'rgba(84,112,198,0)'
                  }
                ])
              },
              }
            }
          ]
        };
@@ -304,9 +326,7 @@
      onUnmounted(() => {
        clearInterval(intervalId);
      });

    };


    const hydraulicOilTemperatureData: any[] = [];
    const hydraulicOilPressureData: any[] = [];
@@ -321,49 +341,54 @@
    const ejectorPositionData: any[] = [];
    const cycleTimeData: any[] = [];

    initChart('hydraulicOilTemperatureChart', '液压油温', hydraulicOilTemperatureData, '°C', 50, 2);
    initChart('hydraulicOilPressureChart', '液压油压', hydraulicOilPressureData, 'MPa', 150, 5);
    initChart('mainMotorCurrentChart', '主电机电流', mainMotorCurrentData, 'A', 80, 3);
    // initChart('hydraulicOilTemperatureChart', '液压油温', hydraulicOilTemperatureData, '°C', 50, 2);
    // initChart('hydraulicOilPressureChart', '液压油压', hydraulicOilPressureData, 'MPa', 150, 5);
    // initChart('mainMotorCurrentChart', '主电机电流', mainMotorCurrentData, 'A', 80, 3);
    initChart('screwSpeedChart', '螺杆转速', screwSpeedData, 'rpm', 100, 10);
    initChart('moldClampingForceChart', '锁模力', moldClampingForceData, 'kN', 1000, 50);
    initChart('injectionPressureChart', '注射压力', injectionPressureData, 'MPa', 1200, 80);
    initChart('injectionSpeedChart', '注射速度', injectionSpeedData, 'mm/s', 150, 10);
    initChart('barrelTemperatureChart', '料筒温度', barrelTemperatureData, '°C', 200, 5);
    initChart('barrelTemperatureChart', '料筒温度', barrelTemperatureData, '°C', 240, 3);
    initChart('coolingWaterTemperatureChart', '冷却水温度', coolingWaterTemperatureData, '°C', 25, 2);
    initChart('coolingWaterFlowChart', '冷却水流量', coolingWaterFlowData, 'L/min', 30, 3);
    initChart('ejectorPositionChart', '顶出位置', ejectorPositionData, 'mm', 50, 5);
    initChart('cycleTimeChart', '循环时间', cycleTimeData, 's', 30, 2);
    // initChart('coolingWaterFlowChart', '冷却水流量', coolingWaterFlowData, 'L/min', 30, 3);
    // initChart('ejectorPositionChart', '顶出位置', ejectorPositionData, 'mm', 50, 5);
    // initChart('cycleTimeChart', '循环时间', cycleTimeData, 's', 30, 2);
  }
});
</script>

<template>
  <div class="device-detail-container">
    <a-page-header
      :sub-title="deviceInfo.deviceName"
      title="注塑机预测性维护详情"
      @back="() => $router.go(-1)"
    />
    <a-page-header :sub-title="deviceInfo.deviceName" title="注塑机预测性维护详情" @back="() => $router.go(-1)" />

    <a-row :gutter="16" class="mt-4">
      <!-- 设备基本信息 -->
      <a-col :span="8">
        <a-card :style="{ height: '440px' }" class="mb-4" title="设备基本信息">
          <a-descriptions :column="1" bordered>
            <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 :style="{ height: '440px' }" class="mb-4" title="设备信息">
          <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 :column="1" bordered>
                <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 :style="{ height: '440px' }" class="mb-4" title="设备健康状态与维护建议">
          <a-row :gutter="16">
            <a-col :span="8">
@@ -376,34 +401,17 @@
              />
            </a-col>
            <a-col :span="8">
              <a-statistic
                :value="healthData.predictedLife"
                suffix="天"
                title="预测剩余寿命"
              />
              <a-statistic :value="healthData.predictedLife" suffix="天" title="预测剩余寿命" />
            </a-col>
            <a-col :span="8">
              <a-statistic
                :value="healthData.riskLevel"
                :value-style="{ color: healthData.riskColor }"
                title="故障风险等级"
              />
              <a-statistic :value="healthData.riskLevel" :value-style="{ color: healthData.riskColor }" title="故障风险等级" />
            </a-col>
          </a-row>
          <div class="mt-4">
            <a-progress
              :percent="healthData.overallHealth"
              :show-info="false"
              :stroke-color="healthData.healthColor"
            />
            <a-progress :percent="healthData.overallHealth" :show-info="false" :stroke-color="healthData.healthColor" />
          </div>
          <a-divider orientation="left">预测性维护建议</a-divider>
          <a-table
            :columns="maintenanceColumns"
            :data-source="maintenanceData"
            :pagination="false"
            size="small"
          >
          <a-table :columns="maintenanceColumns" :data-source="maintenanceData" :pagination="false" size="small">
            <template #urgency="{ text }">
              <a-tag :color="getUrgencyColor(text)">{{ text }}</a-tag>
            </template>
@@ -414,65 +422,109 @@
        </a-card>
      </a-col>
    </a-row>
    <a-col :span="24">
      <a-card class="mb-4" title="设备数据">
        <a-row :gutter="[16, 16]">
          <a-col :span="4">
            <a-statistic :value="healthData.injectionCount" suffix="min" title="总开机时间">
              <template #prefix>
                <LineChartOutlined />
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="4">
            <a-statistic :value="healthData.clampingCount" suffix="次" title="总循环次数">
              <template #prefix>
                <LineChartOutlined />
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="4">
            <a-statistic :value="healthData.productionCycle" suffix="s" title="生产周期">
              <template #prefix>
                <FieldTimeOutlined />
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="4">
            <a-statistic :value="healthData.energyConsumption" suffix="kWh" title="能耗">
              <template #prefix>
                <ThunderboltOutlined />
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="4">
            <a-statistic :value="healthData.yieldRate" suffix="%" title="良品率">
              <template #prefix>
                <CheckCircleOutlined />
              </template>
            </a-statistic>
          </a-col>
<!--          <a-col :span="4">-->
<!--            <a-statistic :value="healthData.downtime" suffix="s" title="出错停机时间">-->
<!--              <template #prefix>-->
<!--                <FieldTimeOutlined />-->
<!--              </template>-->
<!--            </a-statistic>-->
<!--          </a-col>-->
        </a-row>
      </a-card>
    </a-col>

    <!-- 实时数据趋势图 -->
    <a-card class="mb-4" title="实时数据趋势图">
      <a-row :gutter="16">
<!--      <a-row :gutter="16">-->
<!--        <a-col :span="8">-->
<!--          <div id="hydraulicOilTemperatureChart" style="height: 300px"></div>-->
<!--        </a-col>-->
<!--        <a-col :span="8">-->
<!--          <div id="hydraulicOilPressureChart" style="height: 300px"></div>-->
<!--        </a-col>-->
<!--        <a-col :span="8">-->
<!--          <div id="mainMotorCurrentChart" style="height: 300px"></div>-->
<!--        </a-col>-->
<!--      </a-row>-->
      <a-row :gutter="16" class="mt-4">
        <a-col :span="8">
          <div id="hydraulicOilTemperatureChart" style="height: 300px;"></div>
          <div id="screwSpeedChart" style="height: 300px"></div>
        </a-col>
        <a-col :span="8">
          <div id="hydraulicOilPressureChart" style="height: 300px;"></div>
         <div id="barrelTemperatureChart" style="height: 300px"></div>
        </a-col>
        <a-col :span="8">
          <div id="mainMotorCurrentChart" style="height: 300px;"></div>
          <div id="injectionPressureChart" style="height: 300px"></div>
        </a-col>
      </a-row>
      <a-row :gutter="16" class="mt-4">
        <a-col :span="8">
          <div id="screwSpeedChart" style="height: 300px;"></div>
          <div id="injectionSpeedChart" style="height: 300px"></div>
        </a-col>
        <a-col :span="8">
          <div id="moldClampingForceChart" style="height: 300px;"></div>
           <div id="moldClampingForceChart" style="height: 300px"></div>

        </a-col>
        <a-col :span="8">
          <div id="injectionPressureChart" style="height: 300px;"></div>
          <div id="coolingWaterTemperatureChart" style="height: 300px"></div>
        </a-col>
      </a-row>
      <a-row :gutter="16" class="mt-4">
        <a-col :span="8">
          <div id="injectionSpeedChart" style="height: 300px;"></div>
        </a-col>
        <a-col :span="8">
          <div id="barrelTemperatureChart" style="height: 300px;"></div>
        </a-col>
        <a-col :span="8">
          <div id="coolingWaterTemperatureChart" style="height: 300px;"></div>
        </a-col>
      </a-row>
      <a-row :gutter="16" class="mt-4">
        <a-col :span="8">
          <div id="coolingWaterFlowChart" style="height: 300px;"></div>
        </a-col>
        <a-col :span="8">
          <div id="ejectorPositionChart" style="height: 300px;"></div>
        </a-col>
        <a-col :span="8">
          <div id="cycleTimeChart" style="height: 300px;"></div>
        </a-col>
      </a-row>
<!--      <a-row :gutter="16" class="mt-4">-->
<!--        <a-col :span="8">-->
<!--          <div id="coolingWaterFlowChart" style="height: 300px"></div>-->
<!--        </a-col>-->
<!--        <a-col :span="8">-->
<!--          <div id="ejectorPositionChart" style="height: 300px"></div>-->
<!--        </a-col>-->
<!--        <a-col :span="8">-->
<!--          <div id="cycleTimeChart" style="height: 300px"></div>-->
<!--        </a-col>-->
<!--      </a-row>-->
    </a-card>

    <a-row :gutter="16">
      <!-- 备件寿命预测 -->
      <a-col :span="12">
        <a-card class="mb-4" title="备件寿命预测">
          <a-table
            :columns="sparePartColumns"
            :data-source="sparePartData"
            :pagination="false"
            size="small"
          >
          <a-table :columns="sparePartColumns" :data-source="sparePartData" :pagination="false" size="small">
            <template #status="{ text }">
              <a-tag :color="getStatusColor(text)">{{ text }}</a-tag>
            </template>
@@ -485,7 +537,7 @@
        <a-card class="mb-4" title="历史维护记录">
          <a-timeline>
            <a-timeline-item v-for="item in historyData" :key="item.id" :color="item.color">
              {{ item.date }} - {{ item.type }}: {{ item.description }}
              <p>{{ item.date }} - {{ item.type }}：{{ item.description }}</p>
            </a-timeline-item>
          </a-timeline>
        </a-card>
@@ -496,54 +548,28 @@

<style scoped>
.device-detail-container {
  padding: 16px;
  background: #f0f2f5;
  padding: 20px;
  background-color: #f0f2f5;
}

.mt-4 {
  margin-top: 16px;
.device-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 330px;
}

.device-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mb-4 {
  margin-bottom: 16px;
}
</style>


<style scoped>
.injection-molding-machine-detail {
  padding: 16px;
  background-color: #f0f2f5;
}

.header-card {
  margin-bottom: 16px;
}

.device-info h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.device-info p {
  margin-bottom: 5px;
}

.health-status h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.ant-statistic-content {
  font-size: 20px !important;
}

.ant-list-item-meta-title {
  font-size: 16px;
}

.ant-list-item-meta-description {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
.mt-4 {
  margin-top: 16px;
}
</style>