<script lang="ts" setup>
|
import type { MesTraceConsumerScanApi } from '#/api/mes/trace-consumer-scan';
|
|
import { ref, watch } from 'vue';
|
|
import { CountTo } from '@vben/common-ui';
|
import { IconifyIcon } from '@vben/icons';
|
|
import { Card, Col, Row } from 'ant-design-vue';
|
|
import { getTraceConsumerScanSummary } from '#/api/mes/trace-consumer-scan';
|
|
import { defaultSummary } from '../data';
|
|
defineOptions({ name: 'MesTraceConsumerScanSummaryCards' });
|
|
const props = defineProps<{
|
startTime?: string;
|
endTime?: string;
|
}>();
|
|
const summary = ref<MesTraceConsumerScanApi.Summary>(defaultSummary);
|
|
/** 加载汇总数据 */
|
async function loadData() {
|
summary.value = await getTraceConsumerScanSummary(
|
props.startTime,
|
props.endTime,
|
);
|
}
|
|
watch(
|
() => [props.startTime, props.endTime],
|
() => {
|
loadData();
|
},
|
{ immediate: true },
|
);
|
</script>
|
|
<template>
|
<Row :gutter="16">
|
<Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
|
<Card class="kpi-card">
|
<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: linear-gradient(135deg, #409eff, #66b1ff)"
|
>
|
<IconifyIcon class="size-7" icon="lucide:scan-line" />
|
</div>
|
<div>
|
<div class="text-muted-foreground mb-1 text-sm">总访问次数</div>
|
<CountTo
|
class="text-2xl font-bold leading-tight text-[#409eff]"
|
:end-val="summary.total"
|
:duration="1500"
|
/>
|
<div class="text-muted-foreground mt-1 text-xs">全部扫码查询</div>
|
</div>
|
</div>
|
</Card>
|
</Col>
|
<Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
|
<Card class="kpi-card">
|
<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: linear-gradient(135deg, #67c23a, #85ce61)"
|
>
|
<IconifyIcon class="size-7" icon="lucide:circle-check" />
|
</div>
|
<div>
|
<div class="text-muted-foreground mb-1 text-sm">成功查询</div>
|
<CountTo
|
class="text-2xl font-bold leading-tight text-[#67c23a]"
|
:end-val="summary.success"
|
:duration="1500"
|
/>
|
<div class="text-muted-foreground mt-1 text-xs">
|
溯源信息成功返回
|
</div>
|
</div>
|
</div>
|
</Card>
|
</Col>
|
<Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
|
<Card class="kpi-card">
|
<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: linear-gradient(135deg, #f56c6c, #f78989)"
|
>
|
<IconifyIcon class="size-7" icon="lucide:circle-x" />
|
</div>
|
<div>
|
<div class="text-muted-foreground mb-1 text-sm">失败查询</div>
|
<CountTo
|
class="text-2xl font-bold leading-tight text-[#f56c6c]"
|
:end-val="summary.failed"
|
:duration="1500"
|
/>
|
<div class="text-muted-foreground mt-1 text-xs">码不存在或无效</div>
|
</div>
|
</div>
|
</Card>
|
</Col>
|
<Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
|
<Card class="kpi-card">
|
<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: linear-gradient(135deg, #7c3aed, #9461f5)"
|
>
|
<IconifyIcon class="size-7" icon="lucide:layers" />
|
</div>
|
<div>
|
<div class="text-muted-foreground mb-1 text-sm">涉及批次</div>
|
<CountTo
|
class="text-2xl font-bold leading-tight text-[#7c3aed]"
|
:end-val="summary.uniqueBatchCount"
|
:duration="1500"
|
/>
|
<div class="text-muted-foreground mt-1 text-xs">去重生产批次</div>
|
</div>
|
</div>
|
</Card>
|
</Col>
|
</Row>
|
</template>
|
