fix: 适配 echarts map 的地名

Author: puhui999

src/utils/index.ts

@@ -1,4 +1,4 @@
-import { toNumber } from 'lodash-es'
+import {toNumber} from 'lodash-es'
 
 /**
  *
@@ -418,3 +418,20 @@ export const erpCalculatePercentage = (value: number, total: number) => {
   if (total === 0) return 0
   return ((value / total) * 100).toFixed(2)
 }
+
+/**
+ * 适配 echarts map 的地名
+ *
+ * @param areaName 地区名称
+ */
+export const areaReplace = (areaName: string) => {
+  if (!areaName) {
+    return areaName
+  }
+  return areaName
+    .replace('维吾尔自治区', '')
+    .replace('壮族自治区', '')
+    .replace('回族自治区', '')
+    .replace('自治区', '')
+    .replace('省', '')
+}

src/views/crm/statistics/portrait/components/PortraitCustomerArea.vue

@@ -24,6 +24,7 @@ import {
   CrmStatisticCustomerAreaRespVO,
   StatisticsPortraitApi
 } from '@/api/crm/statistics/portrait'
+import { areaReplace } from '@/utils'
 
 defineOptions({ name: 'PortraitCustomerArea' })
 const props = defineProps<{ queryParams: any }>() // 搜索参数
@@ -106,12 +107,7 @@ const loadData = async () => {
   areaStatisticsList.value = areaList.map((item: CrmStatisticCustomerAreaRespVO) => {
     return {
       ...item,
-      areaName: item.areaName // TODO @puhui999：这里最好注释下原因哈, 🤣 我从 mall copy 过来的；这块看着是适合 ercharts 的地名，要不抽个小的 js 方法，然后把涉及到的地方都替换掉。
-      // .replace('维吾尔自治区', '')
-      // .replace('壮族自治区', '')
-      // .replace('回族自治区', '')
-      // .replace('自治区', '')
-      // .replace('省', '')
+      areaName: areaReplace(item.areaName)
     }
   })
   buildLeftMap()

src/views/mall/statistics/member/index.vue

@@ -3,44 +3,44 @@
 
   <div class="flex flex-col">
     <el-row :gutter="16" class="summary">
-      <el-col :sm="6" :xs="12" v-loading="loading">
+      <el-col v-loading="loading" :sm="6" :xs="12">
         <SummaryCard
-          title="累计会员数"
+          :value="summary?.userCount || 0"
           icon="fa-solid:users"
-          icon-color="bg-blue-100"
           icon-bg-color="text-blue-500"
-          :value="summary?.userCount || 0"
+          icon-color="bg-blue-100"
+          title="累计会员数"
         />
       </el-col>
-      <el-col :sm="6" :xs="12" v-loading="loading">
+      <el-col v-loading="loading" :sm="6" :xs="12">
         <SummaryCard
-          title="累计充值人数"
+          :value="summary?.rechargeUserCount || 0"
           icon="fa-solid:user"
-          icon-color="bg-purple-100"
           icon-bg-color="text-purple-500"
-          :value="summary?.rechargeUserCount || 0"
+          icon-color="bg-purple-100"
+          title="累计充值人数"
         />
       </el-col>
-      <el-col :sm="6" :xs="12" v-loading="loading">
+      <el-col v-loading="loading" :sm="6" :xs="12">
         <SummaryCard
-          title="累计充值金额"
+          :decimals="2"
+          :value="fenToYuan(summary?.rechargePrice || 0)"
           icon="fa-solid:money-check-alt"
-          icon-color="bg-yellow-100"
           icon-bg-color="text-yellow-500"
+          icon-color="bg-yellow-100"
           prefix="￥"
-          :decimals="2"
-          :value="fenToYuan(summary?.rechargePrice || 0)"
+          title="累计充值金额"
         />
       </el-col>
-      <el-col :sm="6" :xs="12" v-loading="loading">
+      <el-col v-loading="loading" :sm="6" :xs="12">
         <SummaryCard
-          title="累计消费金额"
+          :decimals="2"
+          :value="fenToYuan(summary?.expensePrice || 0)"
           icon="fa-solid:yen-sign"
-          icon-color="bg-green-100"
           icon-bg-color="text-green-500"
+          icon-color="bg-green-100"
           prefix="￥"
-          :decimals="2"
-          :value="fenToYuan(summary?.expensePrice || 0)"
+          title="累计消费金额"
         />
       </el-col>
     </el-row>
@@ -67,50 +67,50 @@
             <el-col :span="14">
               <el-table :data="areaStatisticsList" :height="300">
                 <el-table-column
-                  label="省份"
-                  prop="areaName"
+                  :sort-method="(obj1, obj2) => obj1.areaName.localeCompare(obj2.areaName, 'zh-CN')"
                   align="center"
+                  label="省份"
                   min-width="80"
+                  prop="areaName"
                   show-overflow-tooltip
                   sortable
-                  :sort-method="(obj1, obj2) => obj1.areaName.localeCompare(obj2.areaName, 'zh-CN')"
                 />
                 <el-table-column
-                  label="会员数量"
-                  prop="userCount"
                   align="center"
+                  label="会员数量"
                   min-width="105"
+                  prop="userCount"
                   sortable
                 />
                 <el-table-column
-                  label="订单创建数量"
-                  prop="orderCreateUserCount"
                   align="center"
+                  label="订单创建数量"
                   min-width="135"
+                  prop="orderCreateUserCount"
                   sortable
                 />
                 <el-table-column
-                  label="订单支付数量"
-                  prop="orderPayUserCount"
                   align="center"
+                  label="订单支付数量"
                   min-width="135"
+                  prop="orderPayUserCount"
                   sortable
                 />
                 <el-table-column
-                  label="订单支付金额"
-                  prop="orderPayPrice"
+                  :formatter="fenToYuanFormat"
                   align="center"
+                  label="订单支付金额"
                   min-width="135"
+                  prop="orderPayPrice"
                   sortable
-                  :formatter="fenToYuanFormat"
                 />
               </el-table>
             </el-col>
           </el-row>
         </el-card>
       </el-col>
       <el-col :md="6" :sm="24">
-        <el-card shadow="never" v-loading="loading">
+        <el-card v-loading="loading" shadow="never">
           <template #header>
             <CardTitle title="会员性别比例" />
           </template>
@@ -122,16 +122,16 @@
 </template>
 <script lang="ts" setup>
 import * as MemberStatisticsApi from '@/api/mall/statistics/member'
-import SummaryCard from '@/components/SummaryCard/index.vue'
-import { EChartsOption } from 'echarts'
-import china from '@/assets/map/json/china.json'
-import { fenToYuan } from '@/utils'
 import {
   MemberAreaStatisticsRespVO,
   MemberSexStatisticsRespVO,
   MemberSummaryRespVO,
   MemberTerminalStatisticsRespVO
 } from '@/api/mall/statistics/member'
+import SummaryCard from '@/components/SummaryCard/index.vue'
+import { EChartsOption } from 'echarts'
+import china from '@/assets/map/json/china.json'
+import { areaReplace, fenToYuan } from '@/utils'
 import { DICT_TYPE, DictDataType, getIntDictOptions } from '@/utils/dict'
 import echarts from '@/plugins/echarts'
 import { fenToYuanFormat } from '@/utils/formatter'
@@ -246,12 +246,7 @@ const getMemberAreaStatisticsList = async () => {
   areaStatisticsList.value = list.map((item: MemberAreaStatisticsRespVO) => {
     return {
       ...item,
-      areaName: item.areaName
-        .replace('维吾尔自治区', '')
-        .replace('壮族自治区', '')
-        .replace('回族自治区', '')
-        .replace('自治区', '')
-        .replace('省', '')
+      areaName: areaReplace(item.areaName)
     }
   })
   let min = 0