feat：【mall 商城】会员统计【ele】100% 全部完成

apps/web-ele/src/views/mall/statistics/member/components/member-region-card.vue

@@ -1,132 +0,0 @@
-<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, fenToYuanFormat } 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: 'china',
-      roam: false,
-      selectedMode: false,
-      data: [] as any[],
-    },
-  ],
-});
-
-/** 按照省份，查询会员统计列表 */
-const getMemberAreaStatisticsList = async () => {
-  areaStatisticsList.value =
-    await MemberStatisticsApi.getMemberAreaStatisticsList();
-  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;
-};
-
-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>

apps/web-ele/src/views/mall/statistics/member/components/member-sex-card.vue

@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import type { DictDataType } from '@vben/hooks';
-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 { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
-
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
-
-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 = getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number');
-  dictDataList.push({ label: '未知', value: null } as any);
-  (sexChartOptions.series[0] as any).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>

apps/web-ele/src/views/mall/statistics/member/index.vue

@@ -1,85 +1,113 @@
 <script lang="ts" setup>
-import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member'; // 会员统计数据
-import type { AnalysisOverviewIconItem } from '#/views/mall/home/components/data';
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
 
 import { onMounted, ref } from 'vue';
 
-import { DocAlert, Page } from '@vben/common-ui';
+import { DocAlert, Page, SummaryCard } from '@vben/common-ui';
 import { fenToYuan } from '@vben/utils';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member'; // 会员统计数据
-// import AnalysisOverviewIcon from '#/views/mall/home/components/analysis-overview-icon.vue';
-// import MemberFunnelCard from '#/views/mall/home/components/member-funnel-card.vue';
-// import MemberTerminalCard from '#/views/mall/home/components/member-terminal-card.vue';
+import { ElCol, ElRow } from 'element-plus';
 
-import MemberRegionCard from './components/member-region-card.vue';
-import MemberSexCard from './components/member-sex-card.vue';
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
 
-const summary = ref<MallMemberStatisticsApi.Summary>();
+import MemberAreaCard from './modules/area-card.vue';
+import MemberFunnelCard from './modules/funnel-card.vue';
+import MemberSexCard from './modules/sex-card.vue';
+import MemberTerminalCard from './modules/terminal-card.vue';
 
-const overviewItems = ref<AnalysisOverviewIconItem[]>([]);
-const loadOverview = async () => {
+/** 会员统计 */
+defineOptions({ name: 'MemberStatistics' });
+
+const loading = ref(true); // 加载中
+const summary = ref<MallMemberStatisticsApi.Summary>(); // 会员统计数据
+
+/** 查询会员统计 */
+async function getMemberSummary() {
   summary.value = await MemberStatisticsApi.getMemberSummary();
-  overviewItems.value = [
-    {
-      icon: 'fa-solid:users', // 自定义立体用户群组图标 - 累计会员数
-      title: '累计会员数',
-      value: summary.value?.userCount || 0,
-      iconBgColor: 'text-blue-500',
-      iconColor: 'bg-blue-100',
-    },
-    {
-      icon: 'fa-solid:user', // 自定义立体信用卡图标 - 累计充值人数
-      title: '累计充值人数',
-      value: summary.value?.rechargeUserCount || 0,
-      iconBgColor: 'text-purple-500',
-      iconColor: 'bg-purple-100',
-    },
-    {
-      icon: 'fa-solid:money-check-alt', // 自定义立体钞票图标 - 累计充值金额
-      title: '累计充值金额',
-      value: Number(fenToYuan(summary.value?.rechargePrice || 0)),
-      iconBgColor: 'text-yellow-500',
-      iconColor: 'bg-yellow-100',
-      prefix: '￥',
-      decimals: 2,
-    },
-    {
-      icon: 'fa-solid:yen-sign', // 自定义立体用户添加图标 - 今日会员注册量
-      title: '累计消费金额',
-      value: Number(fenToYuan(summary.value?.expensePrice || 0)),
-      iconBgColor: 'text-green-500',
-      iconColor: 'bg-green-100',
-      prefix: '￥',
-      decimals: 2,
-    },
-  ];
-};
+}
 
+/** 初始化 */
 onMounted(async () => {
-  loadOverview();
+  loading.value = true;
+  try {
+    await getMemberSummary();
+  } finally {
+    loading.value = false;
+  }
 });
 </script>
 
 <template>
-  <Page>
-    <DocAlert
-      title="【统计】会员、商品、交易统计"
-      url="https://doc.iocoder.cn/mall/statistics/"
-    />
-    <div class="mt-5 w-full md:flex">
-      <AnalysisOverviewIcon
-        v-model:model-value="overviewItems"
-        class="mt-5 md:mr-4 md:mt-0 md:w-full"
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【统计】会员、商品、交易统计"
+        url="https://doc.iocoder.cn/mall/statistics/"
       />
-    </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" />
+    </template>
+
+    <div class="flex flex-col gap-4">
+      <!-- 统计卡片 -->
+      <ElRow :gutter="16">
+        <ElCol :md="6" :sm="12" :xs="24">
+          <SummaryCard
+            title="累计会员数"
+            :value="summary?.userCount || 0"
+            icon="fa-solid:users"
+            icon-color="text-blue-500"
+            icon-bg-color="bg-blue-100"
+          />
+        </ElCol>
+        <ElCol :md="6" :sm="12" :xs="24">
+          <SummaryCard
+            title="累计充值人数"
+            :value="summary?.rechargeUserCount || 0"
+            icon="fa-solid:user"
+            icon-color="text-purple-500"
+            icon-bg-color="bg-purple-100"
+          />
+        </ElCol>
+        <ElCol :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"
+          />
+        </ElCol>
+        <ElCol :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"
+          />
+        </ElCol>
+      </ElRow>
+      <!-- 会员概览和会员终端 -->
+      <ElRow :gutter="16">
+        <ElCol :md="18" :sm="24" :xs="24">
+          <MemberFunnelCard />
+        </ElCol>
+        <ElCol :md="6" :sm="24" :xs="24">
+          <MemberTerminalCard />
+        </ElCol>
+      </ElRow>
+      <!-- 会员地域分布和性别比例 -->
+      <ElRow :gutter="16">
+        <ElCol :md="18" :sm="24" :xs="24">
+          <MemberAreaCard />
+        </ElCol>
+        <ElCol :md="6" :sm="24" :xs="24">
+          <MemberSexCard />
+        </ElCol>
+      </ElRow>
     </div>
   </Page>
 </template>

apps/web-ele/src/views/mall/statistics/member/modules/area-card.vue

@@ -0,0 +1,101 @@
+<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 { ElCard } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+
+import { getAreaChartOptions, getAreaTableColumns } 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 [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: getAreaTableColumns(),
+    height: 300,
+    border: true,
+    showOverflow: true,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 按照省份，查询会员统计列表 */
+async function getMemberAreaStatisticsList() {
+  loading.value = true;
+  try {
+    const list = await MemberStatisticsApi.getMemberAreaStatisticsList();
+    areaStatisticsList.value = list.map(
+      (item: MallMemberStatisticsApi.AreaStatistics) => ({
+        ...item,
+        areaName: areaReplace(item.areaName),
+      }),
+    );
+    // 渲染图表
+    const chartOptions = getAreaChartOptions(areaStatisticsList.value);
+    await renderEcharts(chartOptions);
+
+    // 加载表格数据
+    await gridApi.grid.loadData(areaStatisticsList.value);
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 城市名兼容：ECharts 地名存在差异 */
+function areaReplace(areaName: string): string {
+  if (!areaName) {
+    return areaName;
+  }
+  return areaName
+    .replace('维吾尔自治区', '')
+    .replace('壮族自治区', '')
+    .replace('回族自治区', '')
+    .replace('自治区', '')
+    .replace('省', '');
+}
+
+/** 初始化 */
+onMounted(() => {
+  getMemberAreaStatisticsList();
+});
+</script>
+
+<template>
+  <ElCard class="h-full">
+    <template #header>
+      <span>会员地域分布</span>
+    </template>
+    <div v-loading="loading" class="flex gap-4">
+      <div class="w-2/5">
+        <EchartsUI ref="chartRef" />
+      </div>
+      <div class="w-3/5">
+        <Grid />
+      </div>
+    </div>
+  </ElCard>
+</template>

apps/web-ele/src/views/mall/statistics/member/modules/area-chart-options.ts

@@ -0,0 +1,130 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
+
+import { fenToYuan } from '@vben/utils';
+
+/** 会员地域分布图表配置 */
+export function getAreaChartOptions(
+  data: MallMemberStatisticsApi.AreaStatistics[],
+): any {
+  if (!data || data.length === 0) {
+    return {
+      title: {
+        text: '暂无数据',
+        left: 'center',
+        top: 'center',
+        textStyle: {
+          color: '#999',
+          fontSize: 14,
+        },
+      },
+    };
+  }
+
+  // 计算 min 和 max 值
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+  const mapData = data.map((item) => {
+    const payUserCount = item.orderPayUserCount || 0;
+    min = Math.min(min, payUserCount);
+    max = Math.max(max, payUserCount);
+    return {
+      ...item,
+      name: item.areaName,
+      value: payUserCount,
+    };
+  });
+  // 如果所有值都为 0，设置合理的 min 和 max 值
+  if (min === max && min === 0) {
+    min = 0;
+    max = 10;
+  }
+
+  // 返回图表配置
+  return {
+    tooltip: {
+      trigger: 'item',
+      formatter: (params: any) => {
+        const itemData = params?.data;
+        if (!itemData) {
+          return `${params?.name || ''}<br/>暂无数据`;
+        }
+        return `${itemData.areaName || params.name}<br/>
+会员数量：${itemData.userCount || 0}<br/>
+订单创建数量：${itemData.orderCreateUserCount || 0}<br/>
+订单支付数量：${itemData.orderPayUserCount || 0}<br/>
+订单支付金额：￥${Number(fenToYuan(itemData.orderPayPrice || 0)).toFixed(2)}`;
+      },
+    },
+    visualMap: {
+      text: ['高', '低'],
+      realtime: false,
+      calculable: true,
+      top: 'middle',
+      left: 10,
+      min,
+      max,
+      inRange: {
+        color: ['#e6f3ff', '#1890ff', '#0050b3'],
+      },
+    },
+    series: [
+      {
+        name: '会员地域分布',
+        type: 'map',
+        map: 'china',
+        roam: false,
+        selectedMode: false,
+        itemStyle: {
+          borderColor: '#389e0d',
+          borderWidth: 0.5,
+        },
+        emphasis: {
+          itemStyle: {
+            areaColor: '#ffec3d',
+            borderWidth: 1,
+          },
+        },
+        data: mapData,
+      },
+    ],
+  };
+}
+
+/** VXE Grid 表格列配置 */
+export function getAreaTableColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'areaName',
+      title: '省份',
+      minWidth: 80,
+      sortable: true,
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'userCount',
+      title: '会员数量',
+      minWidth: 100,
+      sortable: true,
+    },
+    {
+      field: 'orderCreateUserCount',
+      title: '订单创建数量',
+      minWidth: 120,
+      sortable: true,
+    },
+    {
+      field: 'orderPayUserCount',
+      title: '订单支付数量',
+      minWidth: 120,
+      sortable: true,
+    },
+    {
+      field: 'orderPayPrice',
+      title: '订单支付金额',
+      minWidth: 120,
+      sortable: true,
+      formatter: 'formatFenToYuanAmount',
+    },
+  ];
+}

apps/web-ele/src/views/mall/statistics/member/modules/funnel-card.vue

@@ -46,14 +46,14 @@ const calculateRelativeRate = (value?: number, reference?: number) => {
 </script>
 
 <template>
-  <ElCard :border="false">
+  <ElCard v-loading="loading">
     <template #header>
       <div class="flex items-center justify-between">
         <span>会员概览</span>
         <ShortcutDateRangePicker @change="handleTimeRangeChange" />
       </div>
     </template>
-    <div v-loading="loading" class="min-w-[900px] py-4">
+    <div class="min-w-[900px] py-4">
       <div class="flex h-24">
         <div class="flex w-[75%] bg-blue-50">
           <div class="ml-[50px] flex flex-col justify-center">

apps/web-ele/src/views/mall/statistics/member/modules/sex-card.vue

@@ -0,0 +1,64 @@
+<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 { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { ElCard } from 'element-plus';
+
+import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+
+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 = getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number');
+    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,
+      };
+    });
+    // 更新 Echarts 数据
+    await renderEcharts(getSexChartOptions(chartData));
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  getMemberSexStatisticsList();
+});
+</script>
+
+<template>
+  <ElCard class="h-full">
+    <template #header>
+      <span>会员性别比例</span>
+    </template>
+    <div v-loading="loading">
+      <EchartsUI ref="chartRef" />
+    </div>
+  </ElCard>
+</template>

apps/web-ele/src/views/mall/statistics/member/modules/sex-chart-options.ts

@@ -0,0 +1,28 @@
+/** 会员性别比例图表配置 */
+export function getSexChartOptions(data: any[]): any {
+  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,
+      },
+    ],
+  };
+}

apps/web-ele/src/views/mall/statistics/member/modules/terminal-card.vue

@@ -34,6 +34,7 @@ const getMemberTerminalStatisticsList = async () => {
         value: userCount || 0,
       };
     });
+    // 更新 Echarts 数据
     await renderEcharts(getTerminalChartOptions(chartData));
   } finally {
     loading.value = false;
@@ -47,9 +48,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <ElCard :border="false" class="h-full">
+  <ElCard class="h-full">
     <template #header>
-      <div>会员终端</div>
+      <span>会员终端</span>
     </template>
     <div v-loading="loading">
       <EchartsUI ref="chartRef" />