<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, RadioButton, RadioGroup, Row, Spin } from 'ant-design-vue';
|
|
import { getManagementCockpitOutbound } from '#/api/mes/management-cockpit';
|
|
import { getLineChartOptions, getPieChartOptions } from '../chart-options';
|
|
defineOptions({ name: 'ManagementCockpitOutboundChart' });
|
|
const trendDays = ref(30);
|
const loading = ref(false);
|
const trendRef = ref<EchartsUIType>();
|
const dealerRef = ref<EchartsUIType>();
|
const { renderEcharts: renderTrend } = useEcharts(trendRef);
|
const { renderEcharts: renderDealer } = useEcharts(dealerRef);
|
|
/** 加载出库统计并渲染 */
|
async function loadData() {
|
loading.value = true;
|
try {
|
const data = await getManagementCockpitOutbound(trendDays.value);
|
const trend = data.trend || [];
|
const dealers = data.dealerDistribution || [];
|
await renderTrend(
|
getLineChartOptions(
|
trend.map((d) => d.date.slice(5)),
|
trend.map((d) => Number(d.count ?? 0)),
|
'出库数量',
|
),
|
);
|
await renderDealer(
|
getPieChartOptions(dealers.map((d) => ({ name: d.name, value: d.count }))),
|
);
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
/** 切换天数范围 */
|
function handleDaysChange() {
|
loadData();
|
}
|
|
onMounted(() => {
|
loadData();
|
});
|
</script>
|
|
<template>
|
<Card title="出库维度统计" class="h-full">
|
<template #extra>
|
<RadioGroup v-model:value="trendDays" size="small" @change="handleDaysChange">
|
<RadioButton :value="7">近 7 天</RadioButton>
|
<RadioButton :value="30">近 30 天</RadioButton>
|
<RadioButton :value="90">近 90 天</RadioButton>
|
</RadioGroup>
|
</template>
|
<Spin :spinning="loading">
|
<Row :gutter="16">
|
<Col :lg="15" :md="24" :sm="24" :xs="24">
|
<div class="mb-1 text-sm text-gray-500">出库趋势</div>
|
<EchartsUI ref="trendRef" class="h-[280px] w-full" />
|
</Col>
|
<Col :lg="9" :md="24" :sm="24" :xs="24">
|
<div class="mb-1 text-sm text-gray-500">经销商出库占比（TOP 20）</div>
|
<EchartsUI ref="dealerRef" class="h-[280px] w-full" />
|
</Col>
|
</Row>
|
</Spin>
|
</Card>
|
</template>
|
