gaoluyang
2026-08-03 75242bbba28ae8902ddf86d33febb497d79e5fc3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<script lang="ts" setup>
import type { MesProAiApi } from '#/api/mes/pro/ai';
 
import { ref } from 'vue';
 
import { useVbenModal } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
 
import { Alert, Button, message, Table, Tag } from 'ant-design-vue';
 
import { predictDuration } from '#/api/mes/pro/ai';
 
defineOptions({ name: 'MesProAiPredictDuration' });
 
const props = defineProps<{ workOrderId: number }>();
 
const loading = ref(false);
const result = ref<MesProAiApi.PredictDurationRespVO>();
 
const columns = [
  { title: '工序名称', dataIndex: 'processName', width: 150 },
  { title: '顺序', dataIndex: 'sort', width: 60 },
  { title: '标准准备时间(分)', dataIndex: 'standardPrepareTime', width: 140 },
  { title: '标准等待时间(分)', dataIndex: 'standardWaitTime', width: 140 },
  { title: '标准生产时间(时)', dataIndex: 'standardProductionTime', width: 140 },
  { title: '预测生产时间(时)', dataIndex: 'predictedProductionTime', width: 140 },
];
 
async function handlePredict() {
  loading.value = true;
  result.value = undefined;
  try {
    result.value = await predictDuration(props.workOrderId);
    modalApi.open();
  } catch {
    message.error('AI 分析暂时不可用,请稍后重试');
  } finally {
    loading.value = false;
  }
}
 
const [ResultModal, modalApi] = useVbenModal({ footer: false });
</script>
 
<template>
  <Button :loading="loading" @click="handlePredict">
    <template #icon><IconifyIcon icon="ant-design:clock-circle-outlined" /></template>
    AI 时长预测
  </Button>
 
  <ResultModal title="AI 生产时长预测" class="w-3/5">
    <template v-if="result">
      <div class="mb-4 flex items-center gap-4">
        <div class="flex items-center gap-2">
          <span class="text-base font-medium">预测总时长:</span>
          <Tag color="blue">{{ result.predictedTotalHours }} 小时</Tag>
        </div>
        <div class="flex items-center gap-2">
          <span class="text-base">标准总时长:</span>
          <span class="text-gray-600">{{ result.standardTotalHours }} 小时</span>
        </div>
      </div>
 
      <div class="mb-4 rounded bg-gray-50 p-3 text-sm leading-relaxed">
        {{ result.reasoning }}
      </div>
 
      <Table
        v-if="result.processBreakdown?.length"
        :columns="columns"
        :data-source="result.processBreakdown"
        :pagination="false"
        row-key="sort"
        size="small"
        bordered
      />
 
      <div v-if="result.keyPoints?.length" class="mt-4">
        <div class="mb-2 text-base font-medium">关注点:</div>
        <Alert
          v-for="(point, index) in result.keyPoints"
          :key="index"
          type="info"
          show-icon
          class="mb-2"
          :message="point"
        />
      </div>
    </template>
  </ResultModal>
</template>