diff --git a/apps/web-antd/src/api/mall/statistics/member.ts b/apps/web-antd/src/api/mall/statistics/member.ts index e812270b5..8e6f91360 100644 --- a/apps/web-antd/src/api/mall/statistics/member.ts +++ b/apps/web-antd/src/api/mall/statistics/member.ts @@ -1,3 +1,5 @@ +import type { Dayjs } from 'dayjs'; + import type { DataComparisonRespVO } from './common'; import { formatDate, formatDateTime } from '@vben/utils'; @@ -6,8 +8,8 @@ import { requestClient } from '#/api/request'; export namespace MallMemberStatisticsApi { /** 会员分析 Request */ - export interface AnalyseReq { - times: Date[]; // 时间范围 + export interface MemberAnalyseReqVO { + times: Date[] | Dayjs[]; // 时间范围 } /** 会员分析对照数据 Response */ @@ -77,7 +79,7 @@ export function getMemberSummary() { } /** 查询会员分析数据 */ -export function getMemberAnalyse(params: MallMemberStatisticsApi.AnalyseReq) { +export function getMemberAnalyse(params: MallMemberStatisticsApi.MemberAnalyseReqVO) { return requestClient.get( '/statistics/member/analyse', { diff --git a/apps/web-antd/src/components/shortcut-date-range-picker/shortcut-date-range-picker.vue b/apps/web-antd/src/components/shortcut-date-range-picker/shortcut-date-range-picker.vue index cb342aa1b..95e90c6ae 100644 --- a/apps/web-antd/src/components/shortcut-date-range-picker/shortcut-date-range-picker.vue +++ b/apps/web-antd/src/components/shortcut-date-range-picker/shortcut-date-range-picker.vue @@ -4,66 +4,35 @@ import type { Dayjs } from 'dayjs'; import { onMounted, ref } from 'vue'; import { DatePicker, Radio, RadioGroup } from 'ant-design-vue'; -import dayjs from 'dayjs'; import { getRangePickerDefaultProps } from '#/utils/rangePickerProps'; /** 快捷日期范围选择组件 */ defineOptions({ name: 'ShortcutDateRangePicker' }); -/** 触发事件:时间范围选中 */ const emits = defineEmits<{ change: [times: [Dayjs, Dayjs]]; }>(); -/** 时间范围类型枚举 */ -enum TimeRangeType { - LAST_7_DAYS = 7, - LAST_30_DAYS = 30, - YESTERDAY = 1, -} - -const timeRangeType = ref(TimeRangeType.LAST_7_DAYS); // 默认选中最近7天 const times = ref<[Dayjs, Dayjs]>(); // 日期范围 -/** 获取 RangePicker 的默认配置 */ const rangePickerProps = getRangePickerDefaultProps(); - -/** 时间范围配置 */ const timeRangeOptions = [ - { label: '昨天', value: TimeRangeType.YESTERDAY }, - { label: '最近 7 天', value: TimeRangeType.LAST_7_DAYS }, - { label: '最近 30 天', value: TimeRangeType.LAST_30_DAYS }, + rangePickerProps.presets[3]!, // 昨天 + rangePickerProps.presets[4]!, // 最近 7 天 + rangePickerProps.presets[5]!, // 最近 30 天 ]; +const timeRangeType = ref(timeRangeOptions[1]!.label); // 默认选中第一个选项 /** 设置时间范围 */ function setTimes() { - let beginTime: Dayjs; - let endTime: Dayjs; - - switch (timeRangeType.value) { - case TimeRangeType.LAST_7_DAYS: { - beginTime = dayjs().subtract(7, 'day').startOf('day'); - endTime = dayjs().subtract(1, 'day').endOf('day'); - break; - } - case TimeRangeType.LAST_30_DAYS: { - beginTime = dayjs().subtract(30, 'day').startOf('day'); - endTime = dayjs().subtract(1, 'day').endOf('day'); - break; - } - case TimeRangeType.YESTERDAY: { - beginTime = dayjs().subtract(1, 'day').startOf('day'); - endTime = dayjs().subtract(1, 'day').endOf('day'); - break; - } - default: { - beginTime = dayjs().subtract(7, 'day').startOf('day'); - endTime = dayjs().subtract(1, 'day').endOf('day'); - } + // 根据选中的选项设置时间范围 + const selectedOption = timeRangeOptions.find( + (option) => option.label === timeRangeType.value, + ); + if (selectedOption) { + times.value = selectedOption.value as [Dayjs, Dayjs]; } - - times.value = [beginTime, endTime]; } /** 快捷日期单选按钮选中 */ @@ -100,17 +69,18 @@ onMounted(() => { > {{ option.label }} diff --git a/apps/web-antd/src/views/mall/home/index.vue b/apps/web-antd/src/views/mall/home/index.vue index 873e9cdc7..ea1a55338 100644 --- a/apps/web-antd/src/views/mall/home/index.vue +++ b/apps/web-antd/src/views/mall/home/index.vue @@ -13,10 +13,10 @@ import { Col, Row } from 'ant-design-vue'; import { getUserCountComparison } from '#/api/mall/statistics/member'; import { getOrderComparison } from '#/api/mall/statistics/trade'; +import MemberFunnelCard from '../statistics/member/modules/funnel-card.vue'; +import MemberTerminalCard from '../statistics/member/modules/terminal-card.vue'; import ComparisonCard from './modules/comparison-card.vue'; -import MemberFunnelCard from './modules/member-funnel-card.vue'; import MemberStatisticsCard from './modules/member-statistics-card.vue'; -import MemberTerminalCard from './modules/member-terminal-card.vue'; import OperationDataCard from './modules/operation-data-card.vue'; import ShortcutCard from './modules/shortcut-card.vue'; import TradeTrendCard from './modules/trade-trend-card.vue'; diff --git a/apps/web-antd/src/views/mall/home/modules/member-funnel-card.vue b/apps/web-antd/src/views/mall/statistics/member/modules/funnel-card.vue similarity index 59% rename from apps/web-antd/src/views/mall/home/modules/member-funnel-card.vue rename to apps/web-antd/src/views/mall/statistics/member/modules/funnel-card.vue index f22bdaf66..72437d9fe 100644 --- a/apps/web-antd/src/views/mall/home/modules/member-funnel-card.vue +++ b/apps/web-antd/src/views/mall/statistics/member/modules/funnel-card.vue @@ -21,12 +21,10 @@ async function loadData(times: [Dayjs, Dayjs]) { if (!times || times.length !== 2) { return; } - loading.value = true; try { - // 查询数据 analyseData.value = await MemberStatisticsApi.getMemberAnalyse({ - times: [times[0].toDate(), times[1].toDate()], + times, }); } finally { loading.value = false; @@ -40,7 +38,9 @@ const handleTimeRangeChange = (times: [Dayjs, Dayjs]) => { /** 计算环比增长率 */ const calculateRelativeRate = (value?: number, reference?: number) => { - if (!reference || reference === 0) return 0; + if (!reference || reference === 0) { + return 0; + } return (((value || 0) - reference) / reference) * 100; }; @@ -53,17 +53,17 @@ const calculateRelativeRate = (value?: number, reference?: number) => { -
-
-
-
+
+
+
+
- 注册用户数量:{{ - analyseData?.comparison?.value?.registerUserCount || 0 - }} + 注册用户数量: + {{ analyseData?.comparison?.value?.registerUserCount || 0 }}
- 环比增长率:{{ + 环比增长率: + {{ calculateRelativeRate( analyseData?.comparison?.value?.registerUserCount, analyseData?.comparison?.reference?.registerUserCount, @@ -73,24 +73,24 @@ const calculateRelativeRate = (value?: number, reference?: number) => {
- {{ - analyseData?.visitUserCount || 0 - }} + + {{ analyseData?.visitUserCount || 0 }} + 访客
-
-
-
+
+
+
- 活跃用户数量:{{ - analyseData?.comparison?.value?.visitUserCount || 0 - }} + 活跃用户数量: + {{ analyseData?.comparison?.value?.visitUserCount || 0 }}
- 环比增长率:{{ + 环比增长率: + {{ calculateRelativeRate( analyseData?.comparison?.value?.visitUserCount, analyseData?.comparison?.reference?.visitUserCount, @@ -100,25 +100,25 @@ const calculateRelativeRate = (value?: number, reference?: number) => {
- {{ - analyseData?.orderUserCount || 0 - }} + + {{ analyseData?.orderUserCount || 0 }} + 下单
-
+
-
+
- 充值用户数量:{{ - analyseData?.comparison?.value?.rechargeUserCount || 0 - }} + 充值用户数量: + {{ analyseData?.comparison?.value?.rechargeUserCount || 0 }}
- 环比增长率:{{ + 环比增长率: + {{ calculateRelativeRate( analyseData?.comparison?.value?.rechargeUserCount, analyseData?.comparison?.reference?.rechargeUserCount, @@ -134,28 +134,14 @@ const calculateRelativeRate = (value?: number, reference?: number) => {
- {{ - analyseData?.payUserCount || 0 - }} + + {{ analyseData?.payUserCount || 0 }} + 成交用户
- - diff --git a/apps/web-antd/src/views/mall/home/modules/member-terminal-card.vue b/apps/web-antd/src/views/mall/statistics/member/modules/terminal-card.vue similarity index 91% rename from apps/web-antd/src/views/mall/home/modules/member-terminal-card.vue rename to apps/web-antd/src/views/mall/statistics/member/modules/terminal-card.vue index fc0c86a30..8a9c74603 100644 --- a/apps/web-antd/src/views/mall/home/modules/member-terminal-card.vue +++ b/apps/web-antd/src/views/mall/statistics/member/modules/terminal-card.vue @@ -10,7 +10,7 @@ import { Card, Spin } from 'ant-design-vue'; import * as MemberStatisticsApi from '#/api/mall/statistics/member'; -import { getTerminalChartOptions } from './member-terminal-chart-options'; +import { getTerminalChartOptions } from './terminal-chart-options'; /** 会员终端卡片 */ defineOptions({ name: 'MemberTerminalCard' }); @@ -49,7 +49,7 @@ onMounted(() => { diff --git a/apps/web-antd/src/views/mall/home/modules/member-terminal-chart-options.ts b/apps/web-antd/src/views/mall/statistics/member/modules/terminal-chart-options.ts similarity index 100% rename from apps/web-antd/src/views/mall/home/modules/member-terminal-chart-options.ts rename to apps/web-antd/src/views/mall/statistics/member/modules/terminal-chart-options.ts diff --git a/packages/@core/base/shared/src/utils/date.ts b/packages/@core/base/shared/src/utils/date.ts index 2f8e68a73..1a2a67d81 100644 --- a/packages/@core/base/shared/src/utils/date.ts +++ b/packages/@core/base/shared/src/utils/date.ts @@ -1,7 +1,7 @@ -import dayjs from 'dayjs'; +import dayjs, { Dayjs } from 'dayjs'; export function formatDate( - time: Date | number | string | undefined, + time: Date | Dayjs | number | string | undefined, format = 'YYYY-MM-DD', ) { if (!time) { @@ -19,7 +19,9 @@ export function formatDate( } } -export function formatDateTime(time: Date | number | string | undefined) { +export function formatDateTime( + time: Date | Dayjs | number | string | undefined, +) { if (!time) { return time; }