<script lang="ts" setup>
|
import { IconifyIcon } from '@vben/icons';
|
|
defineOptions({ name: 'DashboardAiInsights' });
|
|
const props = defineProps<{
|
activeOrderCount: number;
|
}>();
|
|
const emit = defineEmits<{
|
navigate: [name: string];
|
}>();
|
|
interface AiCapability {
|
key: string;
|
title: string;
|
desc: string;
|
icon: string;
|
gradient: string;
|
route: string;
|
}
|
|
const capabilities: AiCapability[] = [
|
{
|
key: 'material',
|
title: 'AI 物料预测',
|
desc: '预测物料需求与短缺风险',
|
icon: 'lucide:package-open',
|
gradient: 'from-violet-500 to-purple-500',
|
route: 'MesProWorkOrder',
|
},
|
{
|
key: 'duration',
|
title: 'AI 时长预测',
|
desc: '预测各工序生产耗时',
|
icon: 'lucide:clock',
|
gradient: 'from-sky-500 to-blue-500',
|
route: 'MesProWorkOrder',
|
},
|
{
|
key: 'risk',
|
title: 'AI 风险预测',
|
desc: '识别潜在生产风险并给出建议',
|
icon: 'lucide:shield-alert',
|
gradient: 'from-orange-500 to-red-500',
|
route: 'MesProWorkOrder',
|
},
|
{
|
key: 'delivery',
|
title: 'AI 交付评估',
|
desc: '评估订单交付准时率与延期因素',
|
icon: 'lucide:truck',
|
gradient: 'from-emerald-500 to-teal-500',
|
route: 'MesProWorkOrder',
|
},
|
];
|
</script>
|
|
<template>
|
<div class="glass-card mb-4 rounded-2xl p-5">
|
<div class="mb-4 flex items-center justify-between">
|
<h3 class="text-base font-semibold text-gray-800 dark:text-gray-100">
|
AI 智能分析
|
</h3>
|
<span class="rounded-full bg-violet-50 px-3 py-0.5 text-xs font-medium text-violet-600 dark:bg-violet-500/15 dark:text-violet-400">
|
{{ activeOrderCount }} 个工单可分析
|
</span>
|
</div>
|
<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
|
<div
|
v-for="cap in capabilities"
|
:key="cap.key"
|
class="group flex cursor-pointer items-center gap-3 rounded-xl p-3 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
|
@click="emit('navigate', cap.route)"
|
>
|
<div
|
class="flex size-10 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br shadow-md transition-transform duration-300 group-hover:scale-110"
|
:class="cap.gradient"
|
>
|
<IconifyIcon :icon="cap.icon" class="size-5 text-white" />
|
</div>
|
<div class="min-w-0 flex-1">
|
<div class="text-sm font-medium text-gray-800 dark:text-gray-100">
|
{{ cap.title }}
|
</div>
|
<div class="text-xs text-gray-400">{{ cap.desc }}</div>
|
</div>
|
<IconifyIcon icon="lucide:chevron-right" class="size-4 text-gray-300 transition-transform duration-200 group-hover:translate-x-0.5" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.glass-card {
|
background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
|
backdrop-filter: blur(20px);
|
-webkit-backdrop-filter: blur(20px);
|
border: 1px solid rgba(255,255,255,0.6);
|
box-shadow:
|
0 4px 24px rgba(0,0,0,0.04),
|
0 1px 4px rgba(0,0,0,0.02),
|
inset 0 1px 0 rgba(255,255,255,0.8);
|
}
|
|
.dark .glass-card {
|
background: linear-gradient(135deg, rgba(30,30,55,0.75), rgba(20,20,40,0.5));
|
border: 1px solid rgba(255,255,255,0.08);
|
box-shadow:
|
0 4px 24px rgba(0,0,0,0.3),
|
0 1px 4px rgba(0,0,0,0.2),
|
inset 0 1px 0 rgba(255,255,255,0.04);
|
}
|
</style>
|
