<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: 'BagCodeHomeBasicCards' });
|
|
const props = defineProps<{
|
summary: MesBagCodeHomeApi.Summary;
|
}>();
|
|
const emit = defineEmits<{
|
navigate: [name: string];
|
}>();
|
|
/** 基础数据卡片配置 */
|
const cards = [
|
{
|
gradient: 'linear-gradient(135deg, #409eff, #66b1ff)',
|
icon: 'lucide:package',
|
name: '品种总数',
|
routeName: 'MdmItem',
|
value: () => props.summary.mdmItemCount,
|
},
|
{
|
gradient: 'linear-gradient(135deg, #67c23a, #85ce61)',
|
icon: 'lucide:box',
|
name: 'MES 品种',
|
routeName: 'MesMdItem',
|
value: () => props.summary.mesItemCount,
|
},
|
{
|
gradient: 'linear-gradient(135deg, #e6a23c, #ebb563)',
|
icon: 'lucide:folder-tree',
|
name: '品种分类',
|
routeName: 'MesMdItemType',
|
value: () => props.summary.itemTypeCount,
|
},
|
{
|
gradient: 'linear-gradient(135deg, #7c3aed, #9461f5)',
|
icon: 'lucide:ruler',
|
name: '计量单位',
|
routeName: 'MdmUnit',
|
value: () => props.summary.unitMeasureCount,
|
},
|
];
|
</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>
|
