<script lang="ts" setup>
|
import type { MesBagCodeHomeApi } from '#/api/mes/bag-code-home';
|
|
import { computed } from 'vue';
|
|
import { IconifyIcon } from '@vben/icons';
|
|
import { Card } from 'ant-design-vue';
|
|
defineOptions({ name: 'BagCodeHomeBusinessFlow' });
|
|
const props = defineProps<{
|
summary: MesBagCodeHomeApi.Summary;
|
scanTotal: number; // 累计扫码次数
|
crossRegionTotal: number; // 窜货预警总数
|
}>();
|
|
const emit = defineEmits<{
|
navigate: [name: string];
|
}>();
|
|
/** 数值兜底：字段缺失时按 0 处理，避免 toLocaleString 报错 */
|
const num = (v?: number) => v ?? 0;
|
|
/** 全链路业务节点：品种 → 产线 → 批次 → 袋码 → 托盘 → 出库 → 流通扫码 → 防窜溯源（翠绿主题，流通/防窜保留语义色） */
|
const nodes = computed(() => [
|
{ color: '#10b981', count: num(props.summary.mdmItemCount), icon: 'lucide:package', label: '品种', routeName: 'MdmItem' },
|
{ color: '#34d399', count: num(props.summary.lineCount), icon: 'lucide:factory', label: '产线', routeName: 'MesProLine' },
|
{ color: '#0d9488', count: num(props.summary.batchCount), icon: 'lucide:layers', label: '生产批次', routeName: 'MesProBatch' },
|
{ color: '#059669', count: num(props.summary.bagCodeCount), icon: 'lucide:scan-barcode', label: '袋码', routeName: 'MesProBagCode' },
|
{ color: '#2dd4bf', count: num(props.summary.palletCount), icon: 'lucide:grid-2x2', label: '托盘码', routeName: 'MesProPallet' },
|
{ color: '#0f766e', count: num(props.summary.productSalesCount), icon: 'lucide:truck', label: '销售出库', routeName: 'MesWmProductSales' },
|
{ color: '#f59e0b', count: num(props.scanTotal), icon: 'lucide:scan-line', label: '流通扫码', routeName: 'MesConsumerScanStatistics' },
|
{ color: '#f43f5e', count: num(props.crossRegionTotal), icon: 'lucide:shield-alert', label: '防窜/溯源', routeName: 'MesTraceCrossRegion' },
|
]);
|
</script>
|
|
<template>
|
<Card class="mb-4">
|
<template #title>
|
<span class="flex items-center gap-2">
|
<IconifyIcon class="size-5" icon="lucide:waypoints" />
|
业务全链路
|
</span>
|
</template>
|
<!-- 从左到右串联每个业务节点，中间用箭头衔接 -->
|
<div class="flex flex-col gap-3 lg:flex-row lg:items-stretch">
|
<template v-for="(node, index) in nodes" :key="node.label">
|
<div
|
class="flex min-w-0 flex-1 cursor-pointer items-center gap-3 rounded-xl border border-[rgba(16,185,129,0.22)] bg-[rgba(255,255,255,0.68)] p-3 backdrop-blur transition-all hover:-translate-y-0.5 hover:bg-[rgba(16,185,129,0.12)] hover:shadow-md"
|
@click="emit('navigate', node.routeName)"
|
>
|
<div
|
class="flex size-11 flex-shrink-0 items-center justify-center rounded-xl text-white"
|
:style="{ background: node.color }"
|
>
|
<IconifyIcon class="size-6" :icon="node.icon" />
|
</div>
|
<div class="flex min-w-0 flex-col gap-0.5">
|
<span class="text-muted-foreground truncate text-xs">{{ node.label }}</span>
|
<span class="text-lg font-bold leading-tight">{{ node.count.toLocaleString() }}</span>
|
</div>
|
</div>
|
<!-- 节点间箭头（小屏隐藏） -->
|
<div
|
v-if="index < nodes.length - 1"
|
class="hidden items-center lg:flex"
|
>
|
<IconifyIcon class="text-muted-foreground size-4" icon="lucide:chevron-right" />
|
</div>
|
</template>
|
</div>
|
</Card>
|
</template>
|
