From deb4585d4b4456db02b1f9498170a50b5e7f041e Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Mon, 22 Apr 2024 11:04:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=80=82=E9=85=8D=20echarts=20map=20?=
 =?UTF-8?q?=E7=9A=84=E5=9C=B0=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/index.ts                            | 19 +++-
 .../components/PortraitCustomerArea.vue       |  8 +-
 src/views/mall/statistics/member/index.vue    | 89 +++++++++----------
 3 files changed, 62 insertions(+), 54 deletions(-)

diff --git a/src/utils/index.ts b/src/utils/index.ts
index 412a8b62..274ab7ca 100644
--- a/src/utils/index.ts
+++ b/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('省', '')
+}
diff --git a/src/views/crm/statistics/portrait/components/PortraitCustomerArea.vue b/src/views/crm/statistics/portrait/components/PortraitCustomerArea.vue
index 84b43ac4..513936c9 100644
--- a/src/views/crm/statistics/portrait/components/PortraitCustomerArea.vue
+++ b/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()
diff --git a/src/views/mall/statistics/member/index.vue b/src/views/mall/statistics/member/index.vue
index a075810d..0e1bbaf6 100644
--- a/src/views/mall/statistics/member/index.vue
+++ b/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="累计会员数"
-          icon="fa-solid:users"
-          icon-color="bg-blue-100"
-          icon-bg-color="text-blue-500"
           :value="summary?.userCount || 0"
+          icon="fa-solid:users"
+          icon-bg-color="text-blue-500"
+          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="累计充值人数"
-          icon="fa-solid:user"
-          icon-color="bg-purple-100"
-          icon-bg-color="text-purple-500"
           :value="summary?.rechargeUserCount || 0"
+          icon="fa-solid:user"
+          icon-bg-color="text-purple-500"
+          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="累计充值金额"
-          icon="fa-solid:money-check-alt"
-          icon-color="bg-yellow-100"
-          icon-bg-color="text-yellow-500"
-          prefix="￥"
           :decimals="2"
           :value="fenToYuan(summary?.rechargePrice || 0)"
+          icon="fa-solid:money-check-alt"
+          icon-bg-color="text-yellow-500"
+          icon-color="bg-yellow-100"
+          prefix="￥"
+          title="累计充值金额"
         />
       </el-col>
-      <el-col :sm="6" :xs="12" v-loading="loading">
+      <el-col v-loading="loading" :sm="6" :xs="12">
         <SummaryCard
-          title="累计消费金额"
-          icon="fa-solid:yen-sign"
-          icon-color="bg-green-100"
-          icon-bg-color="text-green-500"
-          prefix="￥"
           :decimals="2"
           :value="fenToYuan(summary?.expensePrice || 0)"
+          icon="fa-solid:yen-sign"
+          icon-bg-color="text-green-500"
+          icon-color="bg-green-100"
+          prefix="￥"
+          title="累计消费金额"
         />
       </el-col>
     </el-row>
@@ -67,42 +67,42 @@
             <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
+                  align="center"
                   label="会员数量"
-                  prop="userCount"
-                  align="center"
                   min-width="105"
+                  prop="userCount"
                   sortable
                 />
                 <el-table-column
+                  align="center"
                   label="订单创建数量"
+                  min-width="135"
                   prop="orderCreateUserCount"
-                  align="center"
-                  min-width="135"
                   sortable
                 />
                 <el-table-column
+                  align="center"
                   label="订单支付数量"
-                  prop="orderPayUserCount"
-                  align="center"
                   min-width="135"
+                  prop="orderPayUserCount"
                   sortable
                 />
                 <el-table-column
-                  label="订单支付金额"
-                  prop="orderPayPrice"
-                  align="center"
-                  min-width="135"
-                  sortable
                   :formatter="fenToYuanFormat"
+                  align="center"
+                  label="订单支付金额"
+                  min-width="135"
+                  prop="orderPayPrice"
+                  sortable
                 />
               </el-table>
             </el-col>
@@ -110,7 +110,7 @@
         </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