<script lang="ts" setup>
|
import type { Dayjs } from 'dayjs';
|
|
import type { EchartsUIType } from '..\..\..\..\packages\effects\plugins\src\echarts';
|
|
import { onMounted, ref } from 'vue';
|
|
import { EchartsUI, useEcharts } from '..\..\..\..\packages\effects\plugins\src\echarts';
|
|
import { Card, Radio, RadioGroup, Spin } from 'ant-design-vue';
|
import dayjs from 'dayjs';
|
|
import { getMemberRegisterCountList } from '#/api/mall/statistics/member';
|
|
import {
|
getMemberStatisticsChartOptions,
|
TimeRangeTypeEnum,
|
} from './member-statistics-chart-options';
|
|
/** 会员用户统计卡片 */
|
defineOptions({ name: 'MemberStatisticsCard' });
|
|
const loading = ref(false);
|
const chartRef = ref<EchartsUIType>();
|
const { renderEcharts } = useEcharts(chartRef);
|
|
const timeRangeConfig = {
|
[TimeRangeTypeEnum.DAY30]: {
|
name: '30 天',
|
},
|
[TimeRangeTypeEnum.WEEK]: {
|
name: '周',
|
},
|
[TimeRangeTypeEnum.MONTH]: {
|
name: '月',
|
},
|
[TimeRangeTypeEnum.YEAR]: {
|
name: '年',
|
},
|
}; // 时间范围 Map
|
const timeRangeType = ref(TimeRangeTypeEnum.DAY30); // 日期快捷选择按钮, 默认 30 天
|
|
/** 时间范围类型单选按钮选中 */
|
async function handleTimeRangeTypeChange() {
|
// 设置时间范围
|
let beginTime: Dayjs;
|
let endTime: Dayjs;
|
switch (timeRangeType.value) {
|
case TimeRangeTypeEnum.DAY30: {
|
beginTime = dayjs().subtract(30, 'day').startOf('d');
|
endTime = dayjs().endOf('d');
|
break;
|
}
|
case TimeRangeTypeEnum.MONTH: {
|
beginTime = dayjs().startOf('month');
|
endTime = dayjs().endOf('month');
|
break;
|
}
|
case TimeRangeTypeEnum.WEEK: {
|
beginTime = dayjs().startOf('week');
|
endTime = dayjs().endOf('week');
|
break;
|
}
|
case TimeRangeTypeEnum.YEAR: {
|
beginTime = dayjs().startOf('year');
|
endTime = dayjs().endOf('year');
|
break;
|
}
|
default: {
|
throw new Error(`未知的时间范围类型: ${timeRangeType.value}`);
|
}
|
}
|
// 发送时间范围选中事件
|
await loadMemberRegisterCountList(beginTime, endTime);
|
}
|
|
async function loadMemberRegisterCountList(beginTime: Dayjs, endTime: Dayjs) {
|
loading.value = true;
|
try {
|
const list = await getMemberRegisterCountList(
|
beginTime.toDate(),
|
endTime.toDate(),
|
);
|
// 更新 Echarts 数据
|
await renderEcharts(getMemberStatisticsChartOptions(list));
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
/** 初始化 */
|
onMounted(() => {
|
handleTimeRangeTypeChange();
|
});
|
</script>
|
|
<template>
|
<Card :bordered="false">
|
<template #title>
|
<div class="flex items-center justify-between">
|
<span>用户统计</span>
|
<RadioGroup
|
v-model:value="timeRangeType"
|
@change="handleTimeRangeTypeChange"
|
>
|
<Radio
|
v-for="[key, value] in Object.entries(timeRangeConfig)"
|
:key="key"
|
:value="Number(key)"
|
>
|
{{ value.name }}
|
</Radio>
|
</RadioGroup>
|
</div>
|
</template>
|
<Spin :spinning="loading">
|
<EchartsUI ref="chartRef" class="h-[300px] w-full" />
|
</Spin>
|
</Card>
|
</template>
|
