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/cnc-machining-center-detail.vue

@@ -156,7 +156,7 @@
        </a-col>
        <a-col :span="8">
          <div id="spindleTemperatureChart" style="height: 300px;"></div>
          

        </a-col>
        <a-col :span="8">
          <div id="coolantTemperatureChart" style="height: 300px;"></div>
@@ -205,7 +205,7 @@
  AppstoreOutlined,
  FieldTimeOutlined
} from '@ant-design/icons-vue';

import img from '#/assets/images/T850-840.2.jpg'
export default defineComponent({
  name: 'CNCMachiningCenterDetail',
  setup() {
@@ -218,7 +218,7 @@
      serviceLife: 15,
      status: '运行中',
      statusColor: '#52c41a',
      imageUrl: '/src/assets/images/T850-840.2.jpg' // 添加设备图片路径
      imageUrl: img // 添加设备图片路径
    });

    const healthData = reactive({

 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>
@@ -362,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',
@@ -385,13 +383,12 @@
            { value: 21, itemStyle: { color: '#52c41a' } },
            { value: 8, itemStyle: { color: '#faad14' } },
            { value: 5, itemStyle: { color: '#faad14' } },
            { value: 3, itemStyle: { color: '#faad14' } },
            { value: 1, itemStyle: { color: '#ff4d4f' } },
            { value: 1, itemStyle: { color: '#ff4d4f' } }
           
          ],
          label: {
            show: true,
            position: 'top'
            position: 'top',
            formatter: '{c}台'
          }
        }
      ]

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

@@ -3,7 +3,7 @@

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: {
@@ -24,7 +24,7 @@
      serviceLife: 15,
      status: '运行中',
      statusColor: '#52c41a',
      imageUrl: '/src/assets/images/2t.png' // 添加设备图片路径
      imageUrl: img // 添加设备图片路径
    });

    const healthData = reactive({

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

@@ -153,28 +153,30 @@
      </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="nozzleVacuumChart" style="height: 300px;"></div>
        </a-col>

      </a-row>

      <!-- 贴装头/吸嘴 -->
      <a-row :gutter="16" class="mt-4">

 <a-col :span="8">
                    <div id="nozzleVacuumChart" style="height: 300px;"></div>
        </a-col>
        <a-col :span="8">
          <div id="nozzleFlowChart" style="height: 300px;"></div>
        </a-col>
        <a-col :span="8">
          <div id="placementSpeedChart" style="height: 300px;"></div>
        </a-col>
            <a-col :span="8">
          <div id="ambientTemperatureHumidityChart" style="height: 300px;"></div>
        </a-col>

      </a-row>


@@ -220,6 +222,7 @@
  AppstoreOutlined,
  FieldTimeOutlined
} from '@ant-design/icons-vue';
import img from '#/assets/images/JUKI.png'

export default defineComponent({
  name: 'SmtMachineDetail',
@@ -230,10 +233,10 @@
      deviceType: '贴片机',
      deviceId: 'GPC2012A101',
      installDate: '2012-06-08',
      serviceLife: 8,
      serviceLife: 15,
      status: '运行中',
      statusColor: '#52c41a',
      imageUrl: '/src/assets/images/JUKI.png' // 添加设备图片路径
      imageUrl: img // 添加设备图片路径
    });

    const healthData = reactive({
@@ -244,10 +247,17 @@
      riskColor: '#52c41a',
      xAxisTravel: 300.179,
      yAxisTravel: 233.392,
      tapeJamCount: 15,
      tapeJamCount: 6,
      materialJamCount: 15,
      panelCount: 2480,
      downtime: 4.5
      downtime: 4.5,
      // 用于累加的数据
      accumulatedXAxisTravel: 300.179,
      accumulatedYAxisTravel: 233.392,
      accumulatedTapeJamCount: 6,
      accumulatedMaterialJamCount: 15,
      accumulatedPanelCount: 2480,
      accumulatedDowntime: 4.5
    });

    const maintenanceColumns = [
@@ -324,16 +334,16 @@
        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: '状态',
@@ -347,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: '良好'
      }
    ]);
@@ -370,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'
@@ -408,6 +418,38 @@
      console.log('处理维护建议:', record);
      // 实际项目中这里会调用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,
@@ -549,29 +591,29 @@
    // initChart('xAxisMotorCurrentChart', 'X轴电机电流', [], 'A', 10, 1);
    // initChart('yAxisMotorCurrentChart', 'Y轴电机电流', [], 'A', 10, 1);
    // initChart('zAxisMotorCurrentChart', 'Z轴电机电流', [], 'A', 8, 0.8);
    initChart('motorTemperatureChart', '电机温度', [
      { name: '温度', data: [], unit: '°C', baseValue: 45, fluctuation: 2, color: '#5470C6' },
    initChart('motorTemperatureChart', '产量', [
      { name: '产量', data: [], unit: 'pcs/h', baseValue: 175, fluctuation: 25, color: '#5470C6' },
    ]);
    initChart('motorVibrationChart', '电机振动', [
      { name: '振动', data: [], unit: 'mm/s', baseValue: 5, fluctuation: 0.5, color: '#5470C6' },
    initChart('motorVibrationChart', '抛料率', [
      { name: '抛料率', data: [], unit: '%', baseValue: 0.15, fluctuation: 0.01, color: '#5470C6' },
    ], );
        initChart('nozzleVacuumChart', '吸嘴真空压力', [
          { name: '压力', data: [], unit: 'kPa', baseValue: -39, fluctuation: 5, color: '#5470C6' },
          { name: '压力', data: [], unit: 'kPa', baseValue: -45, fluctuation: 5, color: '#5470C6' },
        ],);
    // initChart('beltTensionChart', '皮带张力', [], 'N', 50, 5);

    // 贴装头/吸嘴监测

    initChart('nozzleFlowChart', '吸嘴流量', [
      { name: '流量', data: [], unit: 'L/min', baseValue: 5, fluctuation: 0.5, color: '#5470C6' },
    initChart('nozzleFlowChart', '吸嘴吹气压力', [
      { name: '压力', data: [], unit: 'kPa', baseValue: 20, fluctuation: 5, color: '#5470C6' },
    ]);
    initChart('placementSpeedChart', '贴装速度', [
      { name: '速度', data: [], unit: 'mm/s', baseValue: 100, fluctuation: 10, color: '#5470C6' },
      { 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: 2, color: '#5470C6' },
      { 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);