<script lang="ts" setup>
|
import type { MesBagCodeHomeApi } from '#/api/mes/bag-code-home';
|
|
import { CountTo } from '@vben/common-ui';
|
import { IconifyIcon } from '@vben/icons';
|
|
import { Card, Col, Row } from 'ant-design-vue';
|
|
defineOptions({ name: 'BagCodeHomeBagCodeCards' });
|
|
const props = defineProps<{
|
summary: MesBagCodeHomeApi.Summary;
|
}>();
|
|
const emit = defineEmits<{
|
navigate: [name: string];
|
}>();
|
|
/** 一袋一码卡片配置 */
|
const cards = [
|
{
|
gradient: 'linear-gradient(135deg, #0ea5e9, #38bdf8)',
|
icon: 'lucide:factory',
|
name: '产线',
|
routeName: 'MesProLine',
|
value: () => props.summary.lineCount,
|
},
|
{
|
gradient: 'linear-gradient(135deg, #f59e0b, #fbbf24)',
|
icon: 'lucide:layers',
|
name: '生产批次',
|
routeName: 'MesProBatch',
|
value: () => props.summary.batchCount,
|
},
|
{
|
gradient: 'linear-gradient(135deg, #ec4899, #f472b6)',
|
icon: 'lucide:scan-barcode',
|
name: '袋码',
|
routeName: 'MesProBagCode',
|
value: () => props.summary.bagCodeCount,
|
},
|
{
|
gradient: 'linear-gradient(135deg, #14b8a6, #2dd4bf)',
|
icon: 'lucide:grid-2x2',
|
name: '托盘码',
|
routeName: 'MesProPallet',
|
value: () => props.summary.palletCount,
|
},
|
];
|
</script>
|
|
<template>
|
<Row :gutter="16">
|
<Col v-for="card in cards" :key="card.name" :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
|
<Card
|
class="kpi-card cursor-pointer transition-all hover:-translate-y-1 hover:shadow-lg"
|
@click="emit('navigate', card.routeName)"
|
>
|
<div class="flex items-center gap-4">
|
<div
|
class="flex size-14 flex-shrink-0 items-center justify-center rounded-xl text-white"
|
:style="{ background: card.gradient }"
|
>
|
<IconifyIcon class="size-7" :icon="card.icon" />
|
</div>
|
<div>
|
<div class="text-muted-foreground mb-1 text-sm">{{ card.name }}</div>
|
<CountTo class="text-2xl font-bold leading-tight" :end-val="card.value()" :duration="1500" />
|
</div>
|
</div>
|
</Card>
|
</Col>
|
</Row>
|
</template>
|
