<script lang="ts" setup>
|
import type { EchartsUIType } from '@vben/plugins/echarts';
|
|
import { onMounted, ref } from 'vue';
|
|
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|
import { Card, Col, Row, Spin, Statistic } from 'ant-design-vue';
|
|
import { getManagementCockpitTrace } from '#/api/mes/management-cockpit';
|
|
import { getBarChartOptions, getLineChartOptions, getPieChartOptions } from '../chart-options';
|
|
defineOptions({ name: 'ManagementCockpitTraceChart' });
|
|
const loading = ref(false);
|
const scanTrendRef = ref<EchartsUIType>();
|
const provinceRef = ref<EchartsUIType>();
|
const channelRef = ref<EchartsUIType>();
|
const { renderEcharts: renderScanTrend } = useEcharts(scanTrendRef);
|
const { renderEcharts: renderProvince } = useEcharts(provinceRef);
|
const { renderEcharts: renderChannel } = useEcharts(channelRef);
|
|
// 窜货预警汇总（用于展示卡片）
|
const crossRegion = ref({
|
total: 0,
|
pending: 0,
|
handled: 0,
|
falseAlarm: 0,
|
crossProvince: 0,
|
crossCity: 0,
|
});
|
|
/** 加载追溯统计并渲染 */
|
async function loadData() {
|
loading.value = true;
|
try {
|
const data = await getManagementCockpitTrace(30);
|
const scanTrend = data.scanTrend || [];
|
const provinces = data.provinceDistribution || [];
|
const channels = data.channelDistribution || [];
|
crossRegion.value = data.crossRegionSummary || crossRegion.value;
|
await renderScanTrend(
|
getLineChartOptions(
|
scanTrend.map((d) => d.date.slice(5)),
|
scanTrend.map((d) => Number(d.count ?? 0)),
|
'扫码次数',
|
'#409EFF',
|
),
|
);
|
await renderProvince(
|
getBarChartOptions(
|
provinces.map((p) => p.name),
|
provinces.map((p) => p.count),
|
'扫码次数',
|
'#67c23a',
|
),
|
);
|
await renderChannel(
|
getPieChartOptions(channels.map((c) => ({ name: c.name, value: c.count }))),
|
);
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
onMounted(() => {
|
loadData();
|
});
|
</script>
|
|
<template>
|
<Card title="追溯维度统计" class="h-full">
|
<Spin :spinning="loading">
|
<!-- 窜货预警汇总卡片 -->
|
<Row :gutter="16" class="mb-2">
|
<Col :lg="4" :md="8" :sm="12" :xs="24" class="mb-2">
|
<Card size="small">
|
<Statistic title="预警总数" :value="crossRegion.total" />
|
</Card>
|
</Col>
|
<Col :lg="4" :md="8" :sm="12" :xs="24" class="mb-2">
|
<Card size="small">
|
<Statistic title="待处理" :value="crossRegion.pending" :value-style="{ color: '#f5222d' }" />
|
</Card>
|
</Col>
|
<Col :lg="4" :md="8" :sm="12" :xs="24" class="mb-2">
|
<Card size="small">
|
<Statistic title="已处理" :value="crossRegion.handled" />
|
</Card>
|
</Col>
|
<Col :lg="4" :md="8" :sm="12" :xs="24" class="mb-2">
|
<Card size="small">
|
<Statistic title="误报" :value="crossRegion.falseAlarm" />
|
</Card>
|
</Col>
|
<Col :lg="4" :md="8" :sm="12" :xs="24" class="mb-2">
|
<Card size="small">
|
<Statistic title="跨省" :value="crossRegion.crossProvince" />
|
</Card>
|
</Col>
|
<Col :lg="4" :md="8" :sm="12" :xs="24" class="mb-2">
|
<Card size="small">
|
<Statistic title="跨市" :value="crossRegion.crossCity" />
|
</Card>
|
</Col>
|
</Row>
|
<!-- 扫码趋势 + 省份分布 + 渠道分布 -->
|
<Row :gutter="16">
|
<Col :lg="10" :md="24" :sm="24" :xs="24">
|
<div class="mb-1 text-sm text-gray-500">消费者扫码趋势</div>
|
<EchartsUI ref="scanTrendRef" class="h-[280px] w-full" />
|
</Col>
|
<Col :lg="9" :md="24" :sm="24" :xs="24">
|
<div class="mb-1 text-sm text-gray-500">扫码省份分布</div>
|
<EchartsUI ref="provinceRef" class="h-[280px] w-full" />
|
</Col>
|
<Col :lg="5" :md="24" :sm="24" :xs="24">
|
<div class="mb-1 text-sm text-gray-500">扫码渠道分布</div>
|
<EchartsUI ref="channelRef" class="h-[280px] w-full" />
|
</Col>
|
</Row>
|
</Spin>
|
</Card>
|
</template>
|
