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

baoshiwei

2 天以前 7b4cd6ef04b358e0805846d49e3acf02d7eae5cb

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

@@ -1,9 +1,11 @@
<script lang="ts">
import { defineComponent, onUnmounted, reactive } from 'vue';
import { defineComponent, reactive, onMounted, onUnmounted, ref, nextTick } from 'vue';

import { AppstoreOutlined, FieldTimeOutlined, LineChartOutlined, WarningOutlined, ThunderboltOutlined, CheckCircleOutlined } from '@ant-design/icons-vue';
import * as echarts from 'echarts';
import img from '#/assets/images/2t.png';
import { getDeviceDataInj, updateDeviceData, initDeviceData } from '#/api/eims/equ/deviceData'

export default defineComponent({
  name: 'InjectionMoldingMachineDetail',
  components: {
@@ -29,22 +31,26 @@

    const healthData = reactive({
      overallHealth: 88,
      healthColor: '#faad14',
      predictedLife: 1500,
      riskLevel: '中风险',
      riskColor: '#faad14',
      healthColor: '#52c41a',
      predictedLife: 1753,
      riskLevel: '低风险',
      riskColor: '#1a7ac4',
      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 // 出错停机时间
      injectionCount: 495 * 24 * 60 + 19 * 60 + 44, // 注射次数，转换为分钟
      clampingCount: 545636, // 合模次数 // 跟随产量 50s加一次
      productionCycle: 45, // 生产周期
      energyConsumption: 64, // 能耗
      yieldRate: 354, // 产量   50秒增加一模
      downtime: 120, // 出错停机时间
      // 用于累加增长的字段
      // accumulatedInjectionCount: 12180,
      // accumulatedClampingCount: 545636,
      // accumulatedEnergyConsumption: 64
    });

    const maintenanceColumns = [
@@ -80,22 +86,40 @@
      {
        key: '1',
        type: '例行保养',
        content: '检查液压油污染度',
        suggestedTime: '2024-07-15',
        content: '检查液压油乳化程度',
        suggestedTime: '2025-07-02',
        urgency: '中等'
      },
      {
        key: '2',
        type: '故障预警',
        content: '主电机轴承磨损预警',
        suggestedTime: '2024-08-01',
        urgency: '高'
        content: '主油缸密封圈寿命预警',
        suggestedTime: '2025-07-01',
        urgency: '低'
      },{
        key: '2',
        type: '液压油检查',
        content: '检查确认液压油温度是否正常',
        suggestedTime: '2025-07-01',
        urgency: '低'
      },
      {
        key: '3',
        type: '冷却系统维护',
        content: '检查冷却水流量',
        suggestedTime: '2024-07-01',
        type: '冷却系统检查',
        content: '检查冷水机制冷效率是否达标',
        suggestedTime: '2025-06-11',
        urgency: '低'
      },{
        key: '3',
        type: '液压系统检查',
        content: '检查各液压管道压力表与电脑显示是否一致',
        suggestedTime: '2025-06-11',
        urgency: '低'
      },{
        key: '3',
        type: '温控系统检查',
        content: '检查各段加热圈加热、热电耦是否异常',
        suggestedTime: '2025-06-11',
        urgency: '低'
      }
    ]);
@@ -117,6 +141,27 @@
      }
    };

     const fetchDeviceData = async () => {
      try {
        const res = await getDeviceDataInj();
        Object.assign(healthData, res);
      } catch (error) {
        console.error('获取设备数据失败:', error);
      }
    };

    let deviceDataInterval: number | undefined;
    fetchDeviceData();

     deviceDataInterval = setInterval(async () => {
        try {
          fetchDeviceData();
        } catch (error) {
          console.error('更新设备数据失败:', error);
        }
      }, 3000);


    const sparePartColumns = [
      {
        title: '部件名称',
@@ -124,16 +169,16 @@
        key: 'name'
      },
      {
        title: '当前寿命',
        title: '预计寿命',
        dataIndex: 'currentLife',
        key: 'currentLife',
        customRender: ({ text }: { text: number }) => `${text}小时`
        key: 'currentLife'

      },
      {
        title: '预测剩余寿命',
        dataIndex: 'remainingLife',
        key: 'remainingLife',
        customRender: ({ text }: { text: number }) => `${text}小时`
        key: 'remainingLife'

      },
      {
        title: '状态',
@@ -146,23 +191,44 @@
    const sparePartData = reactive([
      {
        key: '1',
        name: '液压泵',
        currentLife: 18_500,
        remainingLife: 1500,
        status: '预警'
        name: '液压油',
        currentLife: 8_500,
        remainingLife: 2515,
        status: '良好'
      },
      {
        key: '2',
        name: '加热圈',
        currentLife: 12_000,
        remainingLife: 3000,
        currentLife: 6_000,
        remainingLife: 3415,
        status: '良好'
      },
      {
        key: '3',
        name: '螺杆料筒',
        currentLife: 25_000,
        remainingLife: 5000,
        name: '热电耦',
        currentLife: 8_000,
        remainingLife: 5851,
        status: '良好'
      },
      {
        key: '3',
        name: '注胶嘴',
        currentLife: "100000次",
        remainingLife: "76438次",
        status: '良好'
      },
      {
        key: '3',
        name: '锁模夹具',
        currentLife: "12个月",
        remainingLife: "8个月",
        status: '良好'
      },
      {
        key: '3',
        name: '注胶螺杆',
        currentLife: "60个月",
        remainingLife: "48个月",
        status: '良好'
      }
    ]);
@@ -170,21 +236,49 @@
    const historyData = reactive([
      {
        id: '1',
        date: '2023-10-20',
        date: '2025-08-15',
        type: '例行保养',
        description: '更换液压油滤芯',
        description: '液压系统检查，温控系统检查',
        color: 'green'
      },
      {
        id: '1',
        date: '2025-07-20',
        type: '例行保养',
        description: '液压系统检查，温控系统检查',
        color: 'green'
      },
      {
        id: '2',
        date: '2023-08-15',
        type: '故障维修',
        description: '注射单元卡滞，清理异物',
        color: 'red'
        date: '2025-07-13',
        type: '维修保养',
        description: '第一段温度显示异常，热电耦损坏，更换新配件',
        color: 'orange'
      },
      {
        id: '1',
        date: '2025-06-18',
        type: '例行保养',
        description: '液压系统检查，温控系统检查',
        color: 'green'
      },
      {
        id: '2',
        date: '2025-05-23',
        type: '维修保养',
        description: '第三段温度异常，加热圈烧坏，更换新配件',
        color: 'orange'
      },
      {
        id: '2',
        date: '2025-05-15',
        type: '例行保养',
        description: '液压系统检查，温控系统检查',
        color: 'green'
      },
      {
        id: '3',
        date: '2023-06-01',
        date: '2025-04-01',
        type: '年度保养',
        description: '全面检查设备运行状态',
        color: 'blue'
@@ -213,6 +307,68 @@
      // 实际项目中这里会调用API处理维护建议
    };

    let intervalId: number | undefined;

    // const updateAccumulatedData = () => {
    //   healthData.accumulatedInjectionCount +=  + 0.1; // 每次增加1-5分钟
    //   healthData.accumulatedClampingCount += Math.floor(Math.random() * 100) + 10; // 每次增加10-100次
    //   healthData.accumulatedEnergyConsumption += (Math.random() * 0.015 + 0.008); // 每次增加0.1-0.6 kWh

    //   // 更新显示值
    //   const totalMinutes = Math.floor(healthData.accumulatedInjectionCount);

    //   const minutes = totalMinutes % 60;
    //   healthData.injectionCount = `${healthData.accumulatedInjectionCount}h`;
    //   healthData.clampingCount = healthData.accumulatedClampingCount;
    //   healthData.energyConsumption = parseFloat(healthData.accumulatedEnergyConsumption.toFixed(2));
    // };
    const maintenanceTable = ref<HTMLElement | null>(null);
    // 初始设置一次，避免首次加载时显示为0
    // updateAccumulatedData();
    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);
    };



    onMounted(() => {
      // 每5秒更新一次累加数据
      // intervalId = setInterval(updateAccumulatedData, 5000);
      nextTick(() => {
        startScroll();
      });
    })
    onUnmounted(() => {
      if (scrollInterval) {
        clearInterval(scrollInterval);
      }
       if (deviceDataInterval) {
        clearInterval(deviceDataInterval);
      }
    });


    return {
      deviceInfo,
      healthData,
@@ -223,10 +379,12 @@
      historyData,
      getStatusColor,
      getUrgencyColor,
      handleMaintenance
      handleMaintenance,
      maintenanceTable
    };
  },
  mounted() {

    // 初始化图表
    const initChart = (chartId: string, title: string, chartData: any[], unit: string, baseValue: number, fluctuation: number) => {
      const chart = echarts.init(document.getElementById(chartId));
@@ -234,9 +392,9 @@
      // 确保初始数据点足够显示一个完整的趋势
      if (chartData.length === 0) {
        const now = new Date();
        for (let i = 0; i < 60; i++) {
        for (let i = 0; i < 24; i++) {
          // 生成60个点，代表5分钟的数据
          const time = new Date(now.getTime() - (59 - i) * 5000); // 每个点间隔5秒
          const time = new Date(now.getTime() - (24 - i) * 5000); // 每个点间隔5秒
          chartData.push({
            time: time.toLocaleTimeString(),
            value: (baseValue + Math.random() * fluctuation * 2 - fluctuation).toFixed(2)
@@ -255,7 +413,7 @@
          time,
          value: newValue
        });
        if (chartData.length > 60) {
        if (chartData.length > 24) {
          chartData.shift();
        }

@@ -323,10 +481,13 @@
      window.addEventListener('resize', () => {
        chart.resize();
      });
      onUnmounted(() => {
        clearInterval(intervalId);
      window.addEventListener('resize', () => {
        chart.resize();
      });

    };



    const hydraulicOilTemperatureData: any[] = [];
    const hydraulicOilPressureData: any[] = [];
@@ -345,14 +506,20 @@
    // 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('moldClampingForceChart', '锁模压力', moldClampingForceData, 'Bar', 120, 10);
    initChart('injectionPressureChart', '注射压力', injectionPressureData, 'Bar', 80, 5);
    initChart('injectionSpeedChart', '注射速度', injectionSpeedData, 'mm/s', 150, 10);
    initChart('barrelTemperatureChart', '料筒温度', barrelTemperatureData, '°C', 240, 3);
    initChart('coolingWaterTemperatureChart', '冷却水温度', coolingWaterTemperatureData, '°C', 25, 2);
    initChart('coolingWaterTemperatureChart', '冷水机温度', coolingWaterTemperatureData, '°C', 20, 2);
    // initChart('coolingWaterFlowChart', '冷却水流量', coolingWaterFlowData, 'L/min', 30, 3);
    // initChart('ejectorPositionChart', '顶出位置', ejectorPositionData, 'mm', 50, 5);
    // initChart('cycleTimeChart', '循环时间', cycleTimeData, 's', 30, 2);
  },
  unmounted() {
    // 清除定时器
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  }
});
</script>
@@ -411,7 +578,7 @@
            <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 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>
            </template>
@@ -426,35 +593,35 @@
      <a-card class="mb-4" title="设备数据">
        <a-row :gutter="[16, 16]">
          <a-col :span="4">
            <a-statistic :value="healthData.injectionCount" suffix="min" title="总开机时间">
            <a-statistic :value="healthData.injectionCount.toFixed(2)" suffix="h" title="总开机时间">
              <template #prefix>
                <LineChartOutlined />
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="4">
            <a-statistic :value="healthData.clampingCount" suffix="次" title="总循环次数">
            <a-statistic :value="healthData.clampingCount.toFixed(0)" suffix="次" title="总循环次数">
              <template #prefix>
                <LineChartOutlined />
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="4">
            <a-statistic :value="healthData.productionCycle" suffix="s" title="生产周期">
            <a-statistic :value="healthData.productionCycle.toFixed(0)" suffix="s" title="平均生产周期">
              <template #prefix>
                <FieldTimeOutlined />
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="4">
            <a-statistic :value="healthData.energyConsumption" suffix="kWh" title="能耗">
            <a-statistic :value="healthData.energyConsumption.toFixed(2)" suffix="kWh" title="当日累积能耗">
              <template #prefix>
                <ThunderboltOutlined />
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="4">
            <a-statistic :value="healthData.yieldRate" suffix="%" title="良品率">
            <a-statistic :value="healthData.yieldRate.toFixed(0)" suffix="模" title="当前产量">
              <template #prefix>
                <CheckCircleOutlined />
              </template>