eims-ui/apps/web-antd/src/assets/images/2t.png

 eims-ui/apps/web-antd/src/assets/images/JUKI.jpeg

 eims-ui/apps/web-antd/src/assets/images/JUKI.png

 eims-ui/apps/web-antd/src/assets/images/T850-840.2.jpg

 eims-ui/apps/web-antd/src/assets/images/gkg.png

 eims-ui/apps/web-antd/src/assets/images/sinic-tek.png

 eims-ui/apps/web-antd/src/bootstrap.ts

@@ -14,6 +14,7 @@
import { initComponentAdapter } from './adapter/component';
import App from './app.vue';
import { router } from './router';
import Antd from 'ant-design-vue';

async function bootstrap(namespace: string) {
  // 初始化组件适配器
@@ -36,6 +37,9 @@
  // 配置路由及路由守卫
  app.use(router);

  // 全局注册 antd 组件
  app.use(Antd);

  // 动态更新标题
  watchEffect(() => {
    if (preferences.app.dynamicTitle) {

 eims-ui/apps/web-antd/src/views/eims/predictive-maintenance/air-compressor-detail.vue

@@ -135,9 +135,9 @@
      </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"
@@ -260,7 +260,7 @@

    const sparePartColumns = [
      {
        title: '备件名称',
        title: '部件名称',
        dataIndex: 'name',
        key: 'name'
      },
@@ -500,7 +500,7 @@
  margin-bottom: 16px;
}
</style>
  


<style scoped>
.air-compressor-detail {

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

    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>

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

@@ -91,9 +91,9 @@
      </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"
@@ -164,16 +164,7 @@
        dataIndex: 'suggestedTime',
        key: 'suggestedTime'
      },
      {
        title: '紧急程度',
        dataIndex: 'urgency',
        key: 'urgency'
      },
      {
        title: '操作',
        key: 'action',
        slots: { customRender: 'action' }
      },

      {
        title: '紧急程度',
        dataIndex: 'urgency',
@@ -219,7 +210,7 @@

    const sparePartColumns = [
      {
        title: '备件名称',
        title: '部件名称',
        dataIndex: 'name',
        key: 'name'
      },
@@ -337,13 +328,13 @@
          value: value
        });
      }
      

      const updateChart = () => {
        // 生成新的数据点
        const now = new Date();
        const time = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
        const newValue = +(Math.random() * fluctuation + baseValue - fluctuation / 2).toFixed(2);
        

        // 添加新数据点，最多保留60个点（5分钟数据）
        chartData.push({
          time,
@@ -352,7 +343,7 @@
        if (chartData.length > 60) {
          chartData.shift();
        }
        

        const option = {
          title: {
            text: title,
@@ -403,13 +394,13 @@
        };
        chart.setOption(option);
      };
      

      // 初始渲染
      updateChart();
      

      // 每5秒更新一次数据
      const intervalId = setInterval(updateChart, 5000);
      

      window.addEventListener('resize', () => {
        chart.resize();
      });
@@ -427,7 +418,7 @@
    initChart('vibrationChart', '振动趋势', vibrationData, 'mm/s', 10, 2);
    initChart('currentChart', '电流趋势', currentData, 'A', 50, 10);
  }
  

});
</script>

@@ -436,4 +427,4 @@
  padding: 16px;
  background: #f0f2f5;
}
</style>
</style>

 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}台'
          }
        }
      ]

 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';

import img from '#/assets/images/2t.png';
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: img // 添加设备图片路径
    });

    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>

 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,23 +150,25 @@
        <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="ambientTemperatureHumidityChart" style="height: 300px;"></div>

        </a-col>
        <a-col :span="8">
          <div id="motorTemperatureChart" style="height: 300px;"></div>
        </a-col>
        <a-col :span="8">
          <div id="motorVibrationChart" style="height: 300px;"></div>
        </a-col>
        <a-col :span="8">
          <div id="beltTensionChart" 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 :span="8">
                    <div id="nozzleVacuumChart" style="height: 300px;"></div>
        </a-col>
        <a-col :span="8">
          <div id="nozzleFlowChart" style="height: 300px;"></div>
@@ -113,38 +176,15 @@
        <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">
          <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 +216,48 @@
<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';
import img from '#/assets/images/JUKI.png'

export default defineComponent({
  name: 'SmtMachineDetail',
  setup() {
    // 模拟数据
    const deviceInfo = reactive({
      deviceName: 'SMT贴片机-001',
      deviceName: 'SMT贴片机',
      deviceType: '贴片机',
      deviceId: 'SMT-2024-001',
      installDate: '2024-01-01',
      serviceLife: 8,
      deviceId: 'GPC2012A101',
      installDate: '2012-06-08',
      serviceLife: 15,
      status: '运行中',
      statusColor: '#52c41a'
      statusColor: '#52c41a',
      imageUrl: img // 添加设备图片路径
    });

    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: 6,
      materialJamCount: 15,
      panelCount: 2480,
      downtime: 4.5,
      // 用于累加的数据
      accumulatedXAxisTravel: 300.179,
      accumulatedYAxisTravel: 233.392,
      accumulatedTapeJamCount: 6,
      accumulatedMaterialJamCount: 15,
      accumulatedPanelCount: 2480,
      accumulatedDowntime: 4.5
    });

    const maintenanceColumns = [
@@ -231,17 +292,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,21 +329,21 @@

    const sparePartColumns = [
      {
        title: '备件名称',
        title: '部件名称',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '当前寿命',
        title: '理论寿命',
        dataIndex: 'currentLife',
        key: 'currentLife',
        customRender: ({ text }: { text: number }) => `${text}小时`
        // customRender: ({ text }: { text: number }) => `${text}小时`
      },
      {
        title: '预测剩余寿命',
        dataIndex: 'remainingLife',
        key: 'remainingLife',
        customRender: ({ text }: { text: number }) => `${text}小时`
        // customRender: ({ text }: { text: number }) => `${text}小时`
      },
      {
        title: '状态',
@@ -295,22 +357,22 @@
      {
        key: '1',
        name: 'X轴伺服电机',
        currentLife: 5000,
        remainingLife: 1500,
        currentLife: '15000小时',
        remainingLife: '4354小时',
        status: '良好'
      },
      {
        key: '2',
        name: '吸嘴',
        currentLife: 1000,
        remainingLife: 50,
        status: '预警'
        currentLife: '1000000次',
        remainingLife: '425000次',
        status: '良好'
      },
      {
        key: '3',
        name: '飞达',
        currentLife: 8000,
        remainingLife: 2000,
        currentLife: '96个月',
        remainingLife: '48个月',
        status: '良好'
      }
    ]);
@@ -318,21 +380,21 @@
    const historyData = reactive([
      {
        id: '1',
        date: '2024-02-15',
        date: '2025-05-15',
        type: '定期保养',
        description: '完成季度保养，检查运动系统润滑',
        color: 'green'
      },
      {
        id: '2',
        date: '2024-01-20',
        date: '2025-01-20',
        type: '故障维修',
        description: '修复吸嘴堵塞问题',
        color: 'red'
      },
      {
        id: '3',
        date: '2023-12-01',
        date: '2024-12-01',
        type: '定期保养',
        description: '完成年度保养，校准视觉系统',
        color: 'green'
@@ -357,6 +419,38 @@
      // 实际项目中这里会调用API处理维护建议
    };

    let healthDataInterval: number | undefined;

    const updateHealthData = () => {
      healthData.accumulatedXAxisTravel = parseFloat((healthData.accumulatedXAxisTravel + Math.random() * 0.01).toFixed(3));
      healthData.accumulatedYAxisTravel = parseFloat((healthData.accumulatedYAxisTravel + Math.random() * 0.01).toFixed(3));
      healthData.accumulatedTapeJamCount = healthData.accumulatedTapeJamCount + Math.random() * 0.005;
      healthData.accumulatedMaterialJamCount = healthData.accumulatedMaterialJamCount + Math.random() * 0.005;
      healthData.accumulatedPanelCount =healthData.accumulatedPanelCount + Math.random() * 0.1;
      healthData.accumulatedDowntime = parseFloat((healthData.accumulatedDowntime + Math.random() * 0.01).toFixed(1));

      // 更新显示的数据
      healthData.xAxisTravel = healthData.accumulatedXAxisTravel;
      healthData.yAxisTravel = healthData.accumulatedYAxisTravel;
      healthData.tapeJamCount = Math.round(healthData.accumulatedTapeJamCount);
      healthData.materialJamCount = Math.round(healthData.accumulatedMaterialJamCount);
      healthData.panelCount = Math.round( healthData.accumulatedPanelCount);
      healthData.downtime = healthData.accumulatedDowntime;
    };

    onMounted(() => {
      // 初始更新一次数据
      updateHealthData();
      // 每5秒更新一次设备数据
      healthDataInterval = setInterval(updateHealthData, 5000);
    });

    onUnmounted(() => {
      if (healthDataInterval) {
        clearInterval(healthDataInterval);
      }
    });

    return {
      deviceInfo,
      healthData,
@@ -370,27 +464,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 +500,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 +515,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 +588,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: 'pcs/h', baseValue: 175, fluctuation: 25, color: '#5470C6' },
    ]);
    initChart('motorVibrationChart', '抛料率', [
      { name: '抛料率', data: [], unit: '%', baseValue: 0.15, fluctuation: 0.01, color: '#5470C6' },
    ], );
        initChart('nozzleVacuumChart', '吸嘴真空压力', [
          { name: '压力', data: [], unit: 'kPa', baseValue: -45, 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: 'kPa', baseValue: 20, fluctuation: 5, color: '#5470C6' },
    ]);
    initChart('placementSpeedChart', '贴装速度', [
      { name: '速度', data: [], unit: 'chips/h', baseValue: 9000, fluctuation: 1500, color: '#5470C6' },
    ]);
    const ambientTemperatureData: any[] = [];
    const ambientHumidityData: any[] = [];
    initChart('ambientTemperatureHumidityChart', '环境温湿度', [
      { name: '温度', data: ambientTemperatureData, unit: '°C', baseValue: 25, fluctuation: 1, 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 +638,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>