feat：【mall 商城】会员统计【antd】10% 初始化
This commit is contained in:
YunaiV
@@ -1,32 +1,116 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { DocAlert, Page } from '@vben/common-ui';
|
import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
|
||||||
|
|
||||||
import { Button } from 'ant-design-vue';
|
import { onMounted, ref } from 'vue';
|
||||||
|
|
||||||
|
import { DocAlert, Page } from '@vben/common-ui';
|
||||||
|
import { fenToYuan } from '@vben/utils';
|
||||||
|
|
||||||
|
import { Col, Row } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { SummaryCard } from '#/components/summary-card';
|
||||||
|
import * as MemberStatisticsApi from '#/api/mall/statistics/member';
|
||||||
|
|
||||||
|
import MemberFunnelCard from './modules/funnel-card.vue';
|
||||||
|
import MemberTerminalCard from './modules/terminal-card.vue';
|
||||||
|
import MemberAreaCard from './modules/area-card.vue';
|
||||||
|
import MemberSexCard from './modules/sex-card.vue';
|
||||||
|
|
||||||
|
/** 会员统计 */
|
||||||
|
defineOptions({ name: 'MemberStatistics' });
|
||||||
|
|
||||||
|
const loading = ref(true); // 加载中
|
||||||
|
const summary = ref<MallMemberStatisticsApi.Summary>(); // 会员统计数据
|
||||||
|
|
||||||
|
/** 查询会员统计 */
|
||||||
|
async function getMemberSummary() {
|
||||||
|
summary.value = await MemberStatisticsApi.getMemberSummary();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 初始化 */
|
||||||
|
onMounted(async () => {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
await getMemberSummary();
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Page>
|
<Page auto-content-height>
|
||||||
<DocAlert
|
<template #doc>
|
||||||
title="【统计】会员、商品、交易统计"
|
<DocAlert
|
||||||
url="https://doc.iocoder.cn/mall/statistics/"
|
title="【统计】会员、商品、交易统计"
|
||||||
/>
|
url="https://doc.iocoder.cn/mall/statistics/"
|
||||||
<Button
|
/>
|
||||||
danger
|
</template>
|
||||||
type="link"
|
|
||||||
target="_blank"
|
<div class="flex flex-col gap-4">
|
||||||
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
|
<!-- 统计卡片 -->
|
||||||
>
|
<Row :gutter="16">
|
||||||
该功能支持 Vue3 + element-plus 版本！
|
<Col :md="6" :sm="12" :xs="24">
|
||||||
</Button>
|
<SummaryCard
|
||||||
<br />
|
title="累计会员数"
|
||||||
<Button
|
:value="summary?.userCount || 0"
|
||||||
type="link"
|
icon="fa-solid:users"
|
||||||
target="_blank"
|
icon-color="text-blue-500"
|
||||||
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/member/index"
|
icon-bg-color="bg-blue-100"
|
||||||
>
|
/>
|
||||||
可参考
|
</Col>
|
||||||
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/member/index
|
<Col :md="6" :sm="12" :xs="24">
|
||||||
代码，pull request 贡献给我们！
|
<SummaryCard
|
||||||
</Button>
|
title="累计充值人数"
|
||||||
|
:value="summary?.rechargeUserCount || 0"
|
||||||
|
icon="fa-solid:user"
|
||||||
|
icon-color="text-purple-500"
|
||||||
|
icon-bg-color="bg-purple-100"
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col :md="6" :sm="12" :xs="24">
|
||||||
|
<SummaryCard
|
||||||
|
title="累计充值金额"
|
||||||
|
:value="Number(fenToYuan(summary?.rechargePrice || 0))"
|
||||||
|
:decimals="2"
|
||||||
|
prefix="￥"
|
||||||
|
icon="fa-solid:money-check-alt"
|
||||||
|
icon-color="text-yellow-500"
|
||||||
|
icon-bg-color="bg-yellow-100"
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col :md="6" :sm="12" :xs="24">
|
||||||
|
<SummaryCard
|
||||||
|
title="累计消费金额"
|
||||||
|
:value="Number(fenToYuan(summary?.expensePrice || 0))"
|
||||||
|
:decimals="2"
|
||||||
|
prefix="￥"
|
||||||
|
icon="fa-solid:yen-sign"
|
||||||
|
icon-color="text-green-500"
|
||||||
|
icon-bg-color="bg-green-100"
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<!-- 会员概览和会员终端 -->
|
||||||
|
<Row :gutter="16">
|
||||||
|
<Col :md="18" :sm="24" :xs="24">
|
||||||
|
<MemberFunnelCard />
|
||||||
|
</Col>
|
||||||
|
<Col :md="6" :sm="24" :xs="24">
|
||||||
|
<MemberTerminalCard />
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<!-- 会员地域分布和性别比例 -->
|
||||||
|
<Row :gutter="16">
|
||||||
|
<Col :md="18" :sm="24" :xs="24">
|
||||||
|
<MemberAreaCard />
|
||||||
|
</Col>
|
||||||
|
<Col :md="6" :sm="24" :xs="24">
|
||||||
|
<MemberSexCard />
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
</Page>
|
</Page>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -0,0 +1,118 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import type { EchartsUIType } from '@vben/plugins/echarts';
|
||||||
|
import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
|
||||||
|
|
||||||
|
import { onMounted, ref, shallowRef } from 'vue';
|
||||||
|
|
||||||
|
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||||
|
import { fenToYuan } from '@vben/utils';
|
||||||
|
|
||||||
|
import { Card, Table } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import * as MemberStatisticsApi from '#/api/mall/statistics/member';
|
||||||
|
// areaReplace 函数定义
|
||||||
|
function areaReplace(areaName: string) {
|
||||||
|
if (!areaName) {
|
||||||
|
return areaName;
|
||||||
|
}
|
||||||
|
return areaName
|
||||||
|
.replace('维吾尔自治区', '')
|
||||||
|
.replace('壮族自治区', '')
|
||||||
|
.replace('回族自治区', '')
|
||||||
|
.replace('自治区', '')
|
||||||
|
.replace('省', '');
|
||||||
|
}
|
||||||
|
|
||||||
|
import { getAreaChartOptions } from './area-chart-options';
|
||||||
|
|
||||||
|
/** 会员地域分布卡片 */
|
||||||
|
defineOptions({ name: 'MemberAreaCard' });
|
||||||
|
|
||||||
|
const loading = ref(true);
|
||||||
|
const areaStatisticsList = shallowRef<MallMemberStatisticsApi.AreaStatistics[]>([]);
|
||||||
|
const chartRef = ref<EchartsUIType>();
|
||||||
|
const { renderEcharts } = useEcharts(chartRef);
|
||||||
|
|
||||||
|
/** 表格列配置 */
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '省份',
|
||||||
|
dataIndex: 'areaName',
|
||||||
|
key: 'areaName',
|
||||||
|
width: 120,
|
||||||
|
sorter: true,
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '会员数量',
|
||||||
|
dataIndex: 'userCount',
|
||||||
|
key: 'userCount',
|
||||||
|
width: 120,
|
||||||
|
sorter: (a: any, b: any) => (a.userCount || 0) - (b.userCount || 0),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '订单创建数量',
|
||||||
|
dataIndex: 'orderCreateUserCount',
|
||||||
|
key: 'orderCreateUserCount',
|
||||||
|
width: 150,
|
||||||
|
sorter: (a: any, b: any) => (a.orderCreateUserCount || 0) - (b.orderCreateUserCount || 0),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '订单支付数量',
|
||||||
|
dataIndex: 'orderPayUserCount',
|
||||||
|
key: 'orderPayUserCount',
|
||||||
|
width: 150,
|
||||||
|
sorter: (a: any, b: any) => (a.orderPayUserCount || 0) - (b.orderPayUserCount || 0),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '订单支付金额',
|
||||||
|
dataIndex: 'orderPayPrice',
|
||||||
|
key: 'orderPayPrice',
|
||||||
|
width: 150,
|
||||||
|
sorter: (a: any, b: any) => (a.orderPayPrice || 0) - (b.orderPayPrice || 0),
|
||||||
|
customRender: ({ record }: any) => `￥${Number(fenToYuan(record.orderPayPrice || 0)).toFixed(2)}`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
/** 按照省份，查询会员统计列表 */
|
||||||
|
async function getMemberAreaStatisticsList() {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const list = await MemberStatisticsApi.getMemberAreaStatisticsList();
|
||||||
|
areaStatisticsList.value = list.map((item: MallMemberStatisticsApi.AreaStatistics) => ({
|
||||||
|
...item,
|
||||||
|
areaName: areaReplace(item.areaName),
|
||||||
|
}));
|
||||||
|
|
||||||
|
// 渲染图表
|
||||||
|
await renderEcharts(getAreaChartOptions(areaStatisticsList.value));
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 初始化 */
|
||||||
|
onMounted(() => {
|
||||||
|
getMemberAreaStatisticsList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Card :bordered="false" title="会员地域分布" :loading="loading">
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<div class="w-2/5">
|
||||||
|
<EchartsUI ref="chartRef" class="h-[300px] w-full" />
|
||||||
|
</div>
|
||||||
|
<div class="w-3/5">
|
||||||
|
<Table
|
||||||
|
:data-source="areaStatisticsList"
|
||||||
|
:columns="columns"
|
||||||
|
:scroll="{ y: 260 }"
|
||||||
|
size="small"
|
||||||
|
:pagination="false"
|
||||||
|
bordered
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
import type { EChartsOption } from 'echarts';
|
||||||
|
import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
|
||||||
|
|
||||||
|
import { fenToYuan } from '@vben/utils';
|
||||||
|
|
||||||
|
// 地图数据由 @vben/plugins/echarts 自动处理
|
||||||
|
|
||||||
|
/** 会员地域分布图表配置 */
|
||||||
|
export function getAreaChartOptions(data: MallMemberStatisticsApi.AreaStatistics[]): EChartsOption {
|
||||||
|
let min = 0;
|
||||||
|
let max = 0;
|
||||||
|
|
||||||
|
const mapData = data.map((item) => {
|
||||||
|
min = Math.min(min, item.orderPayUserCount || 0);
|
||||||
|
max = Math.max(max, item.orderPayUserCount || 0);
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
name: item.areaName,
|
||||||
|
value: item.orderPayUserCount || 0,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: (params: any) => {
|
||||||
|
const data = params?.data;
|
||||||
|
if (!data) return params?.name || '';
|
||||||
|
|
||||||
|
return `${data.areaName || params.name}<br/>
|
||||||
|
会员数量：${data.userCount || 0}<br/>
|
||||||
|
订单创建数量：${data.orderCreateUserCount || 0}<br/>
|
||||||
|
订单支付数量：${data.orderPayUserCount || 0}<br/>
|
||||||
|
订单支付金额：￥${Number(fenToYuan(data.orderPayPrice || 0)).toFixed(2)}`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
visualMap: {
|
||||||
|
text: ['高', '低'],
|
||||||
|
realtime: false,
|
||||||
|
calculable: true,
|
||||||
|
top: 'middle',
|
||||||
|
min,
|
||||||
|
max,
|
||||||
|
inRange: {
|
||||||
|
color: ['#fff', '#3b82f6'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '会员地域分布',
|
||||||
|
type: 'map',
|
||||||
|
map: 'china',
|
||||||
|
roam: false,
|
||||||
|
selectedMode: false,
|
||||||
|
data: mapData,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 地图数据已在 @vben/plugins/echarts 中自动注册
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import type { EchartsUIType } from '@vben/plugins/echarts';
|
||||||
|
import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
|
||||||
|
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
|
||||||
|
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||||
|
|
||||||
|
import { Card } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import * as MemberStatisticsApi from '#/api/mall/statistics/member';
|
||||||
|
import { DICT_TYPE } from '@vben/constants';
|
||||||
|
import { getDictOptions } from '@vben/hooks';
|
||||||
|
|
||||||
|
// 获取字典选项
|
||||||
|
function getIntDictOptions(dictType: string) {
|
||||||
|
return getDictOptions(dictType, 'number');
|
||||||
|
}
|
||||||
|
|
||||||
|
import { getSexChartOptions } from './sex-chart-options';
|
||||||
|
|
||||||
|
/** 会员性别比例卡片 */
|
||||||
|
defineOptions({ name: 'MemberSexCard' });
|
||||||
|
|
||||||
|
const loading = ref(true);
|
||||||
|
const chartRef = ref<EchartsUIType>();
|
||||||
|
const { renderEcharts } = useEcharts(chartRef);
|
||||||
|
|
||||||
|
/** 按照性别，查询会员统计列表 */
|
||||||
|
async function getMemberSexStatisticsList() {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const list = await MemberStatisticsApi.getMemberSexStatisticsList();
|
||||||
|
const dictDataList = getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX);
|
||||||
|
dictDataList.push({ label: '未知', value: null } as any);
|
||||||
|
|
||||||
|
const chartData = dictDataList.map((dictData: any) => {
|
||||||
|
const userCount = list.find(
|
||||||
|
(item: MallMemberStatisticsApi.SexStatistics) => item.sex === dictData.value,
|
||||||
|
)?.userCount;
|
||||||
|
return {
|
||||||
|
name: dictData.label,
|
||||||
|
value: userCount || 0,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
await renderEcharts(getSexChartOptions(chartData));
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 初始化 */
|
||||||
|
onMounted(() => {
|
||||||
|
getMemberSexStatisticsList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Card :bordered="false" title="会员性别比例" :loading="loading">
|
||||||
|
<EchartsUI ref="chartRef" class="h-[300px] w-full" />
|
||||||
|
</Card>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
import type { EChartsOption } from 'echarts';
|
||||||
|
|
||||||
|
interface ChartData {
|
||||||
|
name: string;
|
||||||
|
value: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 会员性别比例图表配置 */
|
||||||
|
export function getSexChartOptions(data: ChartData[]): EChartsOption {
|
||||||
|
return {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
confine: true,
|
||||||
|
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'right',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '会员性别',
|
||||||
|
type: 'pie',
|
||||||
|
roseType: 'area',
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user