<script lang="ts" setup>
|
import type { MesProAiApi } from '#/api/mes/pro/ai';
|
|
import { onUnmounted, ref } from 'vue';
|
|
import { useVbenModal } from '@vben/common-ui';
|
import { IconifyIcon } from '@vben/icons';
|
|
import { Button, Progress, Table, Tag } from 'ant-design-vue';
|
|
import { predictMaterial } from '#/api/mes/pro/ai';
|
|
defineOptions({ name: 'MesProAiPredictMaterial' });
|
|
const props = defineProps<{ workOrderId?: number; mpsId?: number }>();
|
|
const loading = ref(false);
|
const progress = ref(0);
|
const result = ref<MesProAiApi.PredictMaterialRespVO>();
|
const errorMsg = ref('');
|
|
let progressTimer: ReturnType<typeof setInterval> | null = null;
|
|
const riskLevelColor: Record<number, string> = { 1: 'green', 2: 'orange', 3: 'red' };
|
const riskLevelText: Record<number, string> = { 1: '低风险', 2: '中风险', 3: '高风险' };
|
const itemRiskColor: Record<string, string> = { '充足': 'green', '紧张': 'orange', '短缺': 'red' };
|
|
const columns = [
|
{ title: '物料编码', dataIndex: 'itemCode', width: 120 },
|
{ title: '物料名称', dataIndex: 'itemName', width: 150 },
|
{ title: '需求量', dataIndex: 'requiredQuantity', width: 100 },
|
{ title: '库存可用量', dataIndex: 'availableQuantity', width: 100 },
|
{ title: '短缺数量', dataIndex: 'shortageQuantity', width: 100 },
|
{ title: '风险等级', dataIndex: 'riskLevel', width: 100, key: 'riskLevel' },
|
{ title: '建议措施', dataIndex: 'suggestion' },
|
];
|
|
function startProgress() {
|
progress.value = 0;
|
progressTimer = setInterval(() => {
|
if (progress.value < 30) {
|
progress.value += 3;
|
} else if (progress.value < 70) {
|
progress.value += 2;
|
} else if (progress.value < 88) {
|
progress.value += 0.5;
|
}
|
}, 100);
|
}
|
|
function stopProgress() {
|
if (progressTimer) {
|
clearInterval(progressTimer);
|
progressTimer = null;
|
}
|
}
|
|
function finishProgress() {
|
stopProgress();
|
progress.value = 100;
|
}
|
|
onUnmounted(() => stopProgress());
|
|
async function handlePredict() {
|
loading.value = true;
|
result.value = undefined;
|
errorMsg.value = '';
|
modalApi.open();
|
startProgress();
|
try {
|
result.value = await predictMaterial(props.workOrderId, props.mpsId);
|
finishProgress();
|
} catch {
|
errorMsg.value = 'AI 分析暂时不可用，请稍后重试';
|
stopProgress();
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
const [ResultModal, modalApi] = useVbenModal({
|
footer: false,
|
onOpenChange(isOpen: boolean) {
|
if (!isOpen) {
|
stopProgress();
|
}
|
},
|
});
|
</script>
|
|
<template>
|
<Button :loading="loading" @click="handlePredict">
|
<template #icon><IconifyIcon icon="ant-design:alert-outlined" /></template>
|
AI 物料预测
|
</Button>
|
|
<ResultModal title="AI 物料短缺预测" class="w-3/5">
|
<!-- 加载中 -->
|
<div v-if="loading" class="flex flex-col items-center py-10">
|
<div class="relative mb-6">
|
<div class="absolute inset-0 animate-ping rounded-full bg-blue-400 opacity-20" style="width: 80px; height: 80px" />
|
<div class="relative flex h-20 w-20 items-center justify-center rounded-full bg-blue-50">
|
<IconifyIcon icon="ant-design:alert-outlined" class="text-3xl text-blue-500" />
|
</div>
|
</div>
|
<div class="mb-3 text-base font-medium text-gray-700">
|
AI 正在分析物料库存与需求...
|
</div>
|
<div class="w-2/3">
|
<Progress
|
:percent="Math.round(progress)"
|
:stroke-color="{ '0%': '#1677ff', '100%': '#69b1ff' }"
|
:show-info="true"
|
status="active"
|
/>
|
</div>
|
<div class="mt-2 text-sm text-gray-400">正在查询库存数据、评估物料短缺风险</div>
|
</div>
|
|
<!-- 错误 -->
|
<div v-else-if="errorMsg" class="flex flex-col items-center py-10">
|
<IconifyIcon icon="ant-design:close-circle-filled" class="mb-4 text-5xl text-red-400" />
|
<span class="text-base text-gray-500">{{ errorMsg }}</span>
|
</div>
|
|
<!-- 结果 -->
|
<template v-else-if="result">
|
<div class="mb-4 flex items-center gap-2">
|
<span class="text-base font-medium">整体风险等级：</span>
|
<Tag :color="riskLevelColor[result.riskLevel]">
|
{{ riskLevelText[result.riskLevel] || '-' }}
|
</Tag>
|
</div>
|
<div class="mb-4 rounded bg-gray-50 p-3 text-sm leading-relaxed">
|
{{ result.reasoning }}
|
</div>
|
<Table
|
v-if="result.riskItems?.length"
|
:columns="columns"
|
:data-source="result.riskItems"
|
:pagination="false"
|
row-key="itemCode"
|
size="small"
|
bordered
|
>
|
<template #bodyCell="{ column, text }">
|
<template v-if="column.key === 'riskLevel'">
|
<Tag :color="itemRiskColor[text] || 'default'">{{ text }}</Tag>
|
</template>
|
</template>
|
</Table>
|
<div v-else class="py-4 text-center text-gray-400">无物料风险项</div>
|
</template>
|
</ResultModal>
|
</template>
|
