feat: 新增会员统计组件和优化数据展示

- 在会员统计页面中新增会员地域分布和性别分布组件 - 更新会员统计 API，支持获取会员汇总和地区统计数据 - 优化数据加载逻辑，提升用户体验 - 引入分析概览组件以展示关键统计信息
2025-07-16 16:14:01 +08:00
parent 380a24358c
commit b480eb54c1
7 changed files with 1166 additions and 25 deletions
--- a/apps/web-ele/src/views/mall/statistics/member/components/member-region-card.vue
+++ b/apps/web-ele/src/views/mall/statistics/member/components/member-region-card.vue
@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { AnalysisChartCard } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import { fenToYuan } from '@vben/utils';
+
+import { ElRow } from 'element-plus';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+const areaStatisticsList = ref<MallMemberStatisticsApi.AreaStatistics[]>([]); // 省份会员统计
+const areaChartOptions = reactive({
+  tooltip: {
+    trigger: 'item' as const,
+    formatter: (params: any) => {
+      return `${params?.data?.areaName || params?.name}<br/>
+会员数量：${params?.data?.userCount || 0}<br/>
+订单创建数量：${params?.data?.orderCreateUserCount || 0}<br/>
+订单支付数量：${params?.data?.orderPayUserCount || 0}<br/>
+订单支付金额：${fenToYuan(params?.data?.orderPayPrice || 0)}`;
+    },
+  },
+  visualMap: {
+    text: ['高', '低'],
+    realtime: false,
+    calculable: true,
+    top: 'middle',
+    inRange: {
+      color: ['#fff', '#3b82f6'],
+    },
+    min: 0,
+    max: 0,
+  },
+  series: [
+    {
+      name: '会员地域分布',
+      type: 'map' as const,
+      map: 'china2',
+      roam: false,
+      selectedMode: false,
+      data: [] as any[],
+    },
+  ],
+});
+
+function areaReplace(areaName: string) {
+  if (!areaName) {
+    return areaName;
+  }
+  return areaName
+    .replace('维吾尔自治区', '')
+    .replace('壮族自治区', '')
+    .replace('回族自治区', '')
+    .replace('自治区', '')
+    .replace('省', '');
+}
+
+/** 按照省份，查询会员统计列表 */
+const getMemberAreaStatisticsList = async () => {
+  const list = await MemberStatisticsApi.getMemberAreaStatisticsList();
+  areaStatisticsList.value = list.map(
+    (item: MallMemberStatisticsApi.AreaStatistics) => {
+      return {
+        ...item,
+        areaName: areaReplace(item.areaName),
+      };
+    },
+  );
+  let min = 0;
+  let max = 0;
+
+  const mapData = areaStatisticsList.value.map((item) => {
+    const payUserCount = item?.orderPayUserCount || 0;
+    min = Math.min(min, payUserCount);
+    max = Math.max(max, payUserCount);
+    return { ...item, name: item.areaName, value: payUserCount };
+  });
+
+  // 使用类型断言处理赋值
+  (areaChartOptions.series[0] as any).data = mapData;
+  areaChartOptions.visualMap.min = min;
+  areaChartOptions.visualMap.max = max;
+};
+
+// 格式化为元
+const fenToYuanFormat = (row: any, column: any, cellValue: any) => {
+  return fenToYuan(cellValue);
+};
+
+onMounted(async () => {
+  await getMemberAreaStatisticsList();
+  renderEcharts(areaChartOptions);
+});
+</script>
+
+<template>
+  <AnalysisChartCard title="会员地域分布">
+    <ElRow>
+      <ElCol :span="12">
+        <EchartsUI ref="chartRef" />
+      </ElCol>
+      <ElCol :span="12">
+        <el-table :data="areaStatisticsList" :height="300">
+          <el-table-column
+            :sort-method="
+              (obj1: any, obj2: any) =>
+                obj1.areaName.localeCompare(obj2.areaName, 'zh-CN')
+            "
+            align="center"
+            label="省份"
+            min-width="80"
+            prop="areaName"
+            show-overflow-tooltip
+            sortable
+          />
+          <el-table-column
+            align="center"
+            label="会员数量"
+            min-width="105"
+            prop="userCount"
+            sortable
+          />
+          <el-table-column
+            align="center"
+            label="订单创建数量"
+            min-width="135"
+            prop="orderCreateUserCount"
+            sortable
+          />
+          <el-table-column
+            align="center"
+            label="订单支付数量"
+            min-width="135"
+            prop="orderPayUserCount"
+            sortable
+          />
+          <el-table-column
+            :formatter="fenToYuanFormat"
+            align="center"
+            label="订单支付金额"
+            min-width="135"
+            prop="orderPayPrice"
+            sortable
+          />
+        </el-table>
+      </ElCol>
+    </ElRow>
+  </AnalysisChartCard>
+</template>
--- a/apps/web-ele/src/views/mall/statistics/member/components/member-sex-card.vue
+++ b/apps/web-ele/src/views/mall/statistics/member/components/member-sex-card.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
+import type { DictDataType } from '#/utils/dict';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { AnalysisChartCard } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { DICT_TYPE, getIntDictOptions } from '#/utils/dict';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+const sexChartOptions = reactive({
+  tooltip: {
+    trigger: 'item' as const,
+    confine: true,
+    formatter: '{a} <br/>{b} : {c} ({d}%)',
+  },
+  legend: {
+    orient: 'vertical' as const,
+    left: 'right',
+  },
+  roseType: 'area',
+  series: [
+    {
+      name: '会员性别',
+      type: 'pie' as const,
+      label: {
+        show: false,
+      },
+      labelLine: {
+        show: false,
+      },
+      data: [] as any[],
+    },
+  ],
+});
+
+/** 按照性别，查询会员统计列表 */
+const getMemberSexStatisticsList = async () => {
+  const list = await MemberStatisticsApi.getMemberSexStatisticsList();
+  const dictDataList = getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX);
+  dictDataList.push({ label: '未知', value: null } as any);
+  sexChartOptions.series![0].data = dictDataList.map(
+    (dictData: DictDataType) => {
+      const userCount = list.find(
+        (item: MallMemberStatisticsApi.SexStatistics) =>
+          item.sex === dictData.value,
+      )?.userCount;
+      return {
+        name: dictData.label,
+        value: userCount || 0,
+      };
+    },
+  );
+};
+
+onMounted(async () => {
+  await getMemberSexStatisticsList();
+  renderEcharts(sexChartOptions);
+});
+</script>
+
+<template>
+  <AnalysisChartCard title="会员性别分布">
+    <EchartsUI ref="chartRef" />
+  </AnalysisChartCard>
+</template>
--- a/apps/web-ele/src/views/mall/statistics/member/index.vue
+++ b/apps/web-ele/src/views/mall/statistics/member/index.vue
@@ -1,7 +1,57 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { AnalysisOverviewItem } from '@vben/common-ui';

-import { ElButton } from 'element-plus';
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member'; // 会员统计数据
+
+import { onMounted, ref } from 'vue';
+
+import { AnalysisOverview, DocAlert, Page } from '@vben/common-ui';
+import {
+  SvgBellIcon,
+  SvgCakeIcon,
+  SvgCardIcon,
+  SvgDownloadIcon,
+} from '@vben/icons';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member'; // 会员统计数据
+import MemberFunnelCard from '#/views/mall/home/components/member-funnel-card.vue';
+import MemberTerminalCard from '#/views/mall/home/components/member-terminal-card.vue';
+
+import MemberRegionCard from './components/member-region-card.vue';
+import MemberSexCard from './components/member-sex-card.vue';
+
+const summary = ref<MallMemberStatisticsApi.Summary>();
+
+const overviewItems = ref<AnalysisOverviewItem[]>([]);
+const loadOverview = async () => {
+  summary.value = await MemberStatisticsApi.getMemberSummary();
+  overviewItems.value = [
+    {
+      icon: SvgCardIcon,
+      title: '累计会员数',
+      value: summary.value?.userCount || 0,
+    },
+    {
+      icon: SvgCakeIcon,
+      title: '累计充值人数',
+      value: summary.value?.rechargeUserCount || 0,
+    },
+    {
+      icon: SvgDownloadIcon,
+      title: '累计充值金额',
+      value: summary.value?.rechargePrice || 0,
+    },
+    {
+      icon: SvgBellIcon,
+      title: '今日会员注册量',
+      value: summary.value?.expensePrice || 0,
+    },
+  ];
+};
+
+onMounted(async () => {
+  loadOverview();
+});
 </script>

 <template>
@@ -10,25 +60,19 @@ import { ElButton } from 'element-plus';
      title="【统计】会员、商品、交易统计"
      url="https://doc.iocoder.cn/mall/statistics/"
    />
-    <ElButton
-      danger
-      type="primary"
-      link
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </ElButton>
-    <br />
-    <ElButton
-      type="primary"
-      link
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/member/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/statistics/member/index
-      代码，pull request 贡献给我们！
-    </ElButton>
+    <div class="mt-5 w-full md:flex">
+      <AnalysisOverview
+        v-model:model-value="overviewItems"
+        class="mt-5 md:mr-4 md:mt-0 md:w-full"
+      />
+    </div>
+    <div class="mb-4 mt-5 w-full md:flex">
+      <MemberFunnelCard class="mt-5 md:mr-4 md:mt-0 md:w-2/3" />
+      <MemberTerminalCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" />
+    </div>
+    <div class="mb-4 mt-5 w-full md:flex">
+      <MemberRegionCard class="mt-5 md:mr-4 md:mt-0 md:w-2/3" />
+      <MemberSexCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" />
+    </div>
  </Page>
 </template>