<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, Progress, Tag } from 'ant-design-vue';
|
|
import { predictDelivery } from '#/api/mes/pro/ai';
|
|
defineOptions({ name: 'MesProAiPredictDelivery' });
|
|
const props = defineProps<{ workOrderId: number }>();
|
|
const loading = ref(false);
|
const result = ref<MesProAiApi.PredictDeliveryRespVO>();
|
|
async function handlePredict() {
|
loading.value = true;
|
result.value = undefined;
|
try {
|
result.value = await predictDelivery(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:check-circle-outlined" /></template>
|
AI 交付评估
|
</Button>
|
|
<ResultModal title="AI 按时交付预测" class="w-1/2">
|
<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="result.onTime ? 'green' : 'red'">
|
{{ result.onTime ? '可按时交付' : '无法按时交付' }}
|
</Tag>
|
</div>
|
<div class="flex items-center gap-2">
|
<span class="text-base">置信度：</span>
|
<span class="font-medium">{{ result.confidence }}%</span>
|
</div>
|
</div>
|
|
<div class="mb-4 flex items-center gap-4">
|
<div class="flex-1">
|
<div class="mb-1 text-sm text-gray-500">
|
生产进度 {{ result.progressPercent }}%
|
</div>
|
<Progress :percent="result.progressPercent" :stroke-color="{ '0%': '#108ee9', '100%': '#87d068' }" />
|
</div>
|
<div class="text-sm text-gray-500">
|
剩余 {{ result.remainingDays }} 天
|
</div>
|
</div>
|
|
<div class="mb-4 rounded bg-gray-50 p-3 text-sm leading-relaxed">
|
{{ result.reasoning }}
|
</div>
|
|
<div v-if="!result.onTime && result.delayFactors?.length">
|
<div class="mb-2 text-base font-medium">延期因素：</div>
|
<Alert
|
v-for="(factor, index) in result.delayFactors"
|
:key="index"
|
type="error"
|
show-icon
|
class="mb-2"
|
:message="factor"
|
/>
|
</div>
|
</template>
|
</ResultModal>
|
</template>
|
