统计卡片修改为全局组件

(cherry picked from commit 431fff28ce84f281b619d432eaae06df0ee54287)

src/views/mall/statistics/trade/components/TradeTrendValue.vue → src/components/SummaryCard/index.vue

@@ -35,8 +35,8 @@
 import { propTypes } from '@/utils/propTypes'
 import { toNumber } from 'lodash-es'
 
-/** 交易状况统计值组件 */
-defineOptions({ name: 'TradeTrendValue' })
+/** 统计卡片 */
+defineOptions({ name: 'SummaryCard' })
 
 defineProps({
   title: propTypes.string.def(''),

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

@@ -2,7 +2,7 @@
   <div class="flex flex-col">
     <el-row :gutter="16" class="summary">
       <el-col :sm="6" :xs="12" v-loading="loading">
-        <TradeTrendValue
+        <SummaryCard
           title="累计会员数"
           icon="fa-solid:users"
           icon-color="bg-blue-100"
@@ -11,7 +11,7 @@
         />
       </el-col>
       <el-col :sm="6" :xs="12" v-loading="loading">
-        <TradeTrendValue
+        <SummaryCard
           title="累计充值人数"
           icon="fa-solid:user"
           icon-color="bg-purple-100"
@@ -20,7 +20,7 @@
         />
       </el-col>
       <el-col :sm="6" :xs="12" v-loading="loading">
-        <TradeTrendValue
+        <SummaryCard
           title="累计充值金额"
           icon="fa-solid:money-check-alt"
           icon-color="bg-yellow-100"
@@ -31,7 +31,7 @@
         />
       </el-col>
       <el-col :sm="6" :xs="12" v-loading="loading">
-        <TradeTrendValue
+        <SummaryCard
           title="累计消费金额"
           icon="fa-solid:yen-sign"
           icon-color="bg-green-100"
@@ -44,118 +44,20 @@
     </el-row>
     <el-row :gutter="16" class="mb-4">
       <el-col :md="18" :sm="24">
-        <el-card shadow="never">
-          <template #header>
-            <div class="flex flex-row items-center justify-between">
-              <span>会员概览</span>
-              <!-- 查询条件 -->
-              <div class="my--2 flex flex-row items-center gap-2">
-                <el-radio-group v-model="shortcutDays" @change="handleDateTypeChange">
-                  <el-radio-button :label="1">昨天</el-radio-button>
-                  <el-radio-button :label="7">最近7天</el-radio-button>
-                  <el-radio-button :label="30">最近30天</el-radio-button>
-                </el-radio-group>
-                <el-date-picker
-                  v-model="queryParams.times"
-                  value-format="YYYY-MM-DD HH:mm:ss"
-                  type="daterange"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期"
-                  :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-                  :shortcuts="shortcuts"
-                  class="!w-240px"
-                  @change="getMemberAnalyse"
-                />
-              </div>
-            </div>
-          </template>
-          <div class="min-w-225 py-1.75" v-loading="analyseLoading">
-            <div class="relative h-24 flex">
-              <div class="h-full w-75% bg-blue-50 <lg:w-35% <xl:w-55%">
-                <div class="ml-15 h-full flex flex-col justify-center">
-                  <div class="font-bold">
-                    注册用户数量：{{ analyseData?.comparison?.value?.userCount || 0 }}
-                  </div>
-                  <div class="mt-2 text-3.5">
-                    环比增长率：{{
-                      calculateRelativeRate(
-                        analyseData?.comparison?.value?.userCount,
-                        analyseData?.comparison?.reference?.userCount
-                      )
-                    }}%
-                  </div>
-                </div>
-              </div>
-              <div
-                class="trapezoid1 ml--38.5 mt-1.5 h-full w-77 flex flex-col items-center justify-center bg-blue-5 text-3.5 text-white"
-              >
-                <span class="text-6 font-bold">{{ analyseData?.visitorCount || 0 }}</span>
-                <span>访客</span>
-              </div>
-            </div>
-            <div class="relative h-24 flex">
-              <div class="h-full w-75% flex bg-cyan-50 <lg:w-35% <xl:w-55%">
-                <div class="ml-15 h-full flex flex-col justify-center">
-                  <div class="font-bold">
-                    活跃用户数量：{{ analyseData?.comparison?.value?.activeUserCount || 0 }}
-                  </div>
-                  <div class="mt-2 text-3.5">
-                    环比增长率：{{
-                      calculateRelativeRate(
-                        analyseData?.comparison?.value?.activeUserCount,
-                        analyseData?.comparison?.reference?.activeUserCount
-                      )
-                    }}%
-                  </div>
-                </div>
-              </div>
-              <div
-                class="trapezoid2 ml--28 mt-1.7 h-25 w-56 flex flex-col items-center justify-center bg-cyan-5 text-3.5 text-white"
-              >
-                <span class="text-6 font-bold">{{ analyseData?.orderUserCount || 0 }}</span>
-                <span>下单</span>
-              </div>
-            </div>
-            <div class="relative h-24 flex">
-              <div class="w-75% flex bg-slate-50 <lg:w-35% <xl:w-55%">
-                <div class="ml-15 h-full flex flex-row gap-x-16">
-                  <div class="flex flex-col justify-center">
-                    <div class="font-bold">
-                      充值用户数量：{{ analyseData?.comparison?.value?.rechargeUserCount || 0 }}
-                    </div>
-                    <div class="mt-2 text-3.5">
-                      环比增长率：{{
-                        calculateRelativeRate(
-                          analyseData?.comparison?.value?.rechargeUserCount,
-                          analyseData?.comparison?.reference?.rechargeUserCount
-                        )
-                      }}%
-                    </div>
-                  </div>
-                  <div class="flex flex-col justify-center">
-                    <div class="font-bold">客单价：{{ fenToYuan(analyseData?.atv || 0) }}</div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="trapezoid3 ml--18 mt-3.25 h-23 w-36 flex flex-col items-center justify-center bg-slate-5 text-3.5 text-white"
-              >
-                <span class="text-6 font-bold">{{ analyseData?.payUserCount || 0 }}</span>
-                <span>成交用户</span>
-              </div>
-            </div>
-          </div>
-        </el-card>
+        <!-- 会员概览 -->
+        <MemberFunnelCard />
       </el-col>
       <el-col :md="6" :sm="24">
-        <el-card shadow="never" header="会员终端" v-loading="loading">
-          <Echart :height="300" :options="terminalChartOptions" />
-        </el-card>
+        <!-- 会员终端 -->
+        <MemberTerminalCard />
       </el-col>
     </el-row>
     <el-row :gutter="16">
       <el-col :md="18" :sm="24">
-        <el-card shadow="never" header="会员地域分布">
+        <el-card shadow="never">
+          <template #header>
+            <CardTitle title="会员地域分布" />
+          </template>
           <el-row v-loading="loading">
             <el-col :span="10">
               <Echart :height="300" :options="areaChartOptions" />
@@ -180,14 +82,14 @@
                 />
                 <el-table-column
                   label="订单创建数量"
-                  prop="orderCreateCount"
+                  prop="orderCreateUserCount"
                   align="center"
                   min-width="135"
                   sortable
                 />
                 <el-table-column
                   label="订单支付数量"
-                  prop="orderPayCount"
+                  prop="orderPayUserCount"
                   align="center"
                   min-width="135"
                   sortable
@@ -206,7 +108,10 @@
         </el-card>
       </el-col>
       <el-col :md="6" :sm="24">
-        <el-card shadow="never" header="会员性别比例" v-loading="loading">
+        <el-card shadow="never" v-loading="loading">
+          <template #header>
+            <CardTitle title="会员性别比例" />
+          </template>
           <Echart :height="300" :options="sexChartOptions" />
         </el-card>
       </el-col>
@@ -214,62 +119,33 @@
   </div>
 </template>
 <script lang="ts" setup>
-import * as TradeMemberApi from '@/api/mall/statistics/member'
-import TradeTrendValue from '../trade/components/TradeTrendValue.vue'
+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 dayjs from 'dayjs'
 import { fenToYuan } from '@/utils'
-import * as DateUtil from '@/utils/formatTime'
 import {
-  MemberAnalyseRespVO,
   MemberAreaStatisticsRespVO,
   MemberSexStatisticsRespVO,
-  MemberAnalyseReqVO,
   MemberSummaryRespVO,
   MemberTerminalStatisticsRespVO
 } from '@/api/mall/statistics/member'
 import { DICT_TYPE, DictDataType, getIntDictOptions } from '@/utils/dict'
 import echarts from '@/plugins/echarts'
 import { fenToYuanFormat } from '@/utils/formatter'
+import MemberFunnelCard from './components/MemberFunnelCard.vue'
+import MemberTerminalCard from './components/MemberTerminalCard.vue'
+import { CardTitle } from '@/components/Card'
 
 /** 会员统计 */
 defineOptions({ name: 'MemberStatistics' })
 
 const loading = ref(true) // 加载中
-const analyseLoading = ref(true) // 会员概览加载中
-const queryParams = reactive<MemberAnalyseReqVO>({ times: ['', ''] }) // 会员概览查询参数
-const shortcutDays = ref(7) // 日期快捷天数（单选按钮组）, 默认7天
 const summary = ref<MemberSummaryRespVO>() // 会员统计数据
-const analyseData = ref<MemberAnalyseRespVO>() // 会员分析数据
 const areaStatisticsList = shallowRef<MemberAreaStatisticsRespVO[]>() // 省份会员统计
 
 // 注册地图
-echarts?.registerMap('china', china!)
-
-/** 日期快捷选择 */
-const shortcuts = [
-  {
-    text: '昨天',
-    value: () => DateUtil.getDayRange(new Date(), -1)
-  },
-  {
-    text: '最近7天',
-    value: () => DateUtil.getLast7Days()
-  },
-  {
-    text: '本月',
-    value: () => [dayjs().startOf('M'), dayjs().subtract(1, 'd')]
-  },
-  {
-    text: '最近30天',
-    value: () => DateUtil.getLast30Days()
-  },
-  {
-    text: '最近1年',
-    value: () => DateUtil.getLast1Year()
-  }
-]
+echarts?.registerMap('china', china as any)
 
 /** 会员终端统计图配置 */
 const terminalChartOptions = reactive<EChartsOption>({
@@ -331,8 +207,8 @@ const areaChartOptions = reactive<EChartsOption>({
     formatter: (params: any) => {
       return `${params?.data?.areaName || params?.name}<br/>
 会员数量：${params?.data?.userCount || 0}<br/>
-订单创建数量：${params?.data?.orderCreateCount || 0}<br/>
-订单支付数量：${params?.data?.orderPayCount || 0}<br/>
+订单创建数量：${params?.data?.orderCreateUserCount || 0}<br/>
+订单支付数量：${params?.data?.orderPayUserCount || 0}<br/>
 订单支付金额：${fenToYuan(params?.data?.orderPayPrice || 0)}`
     }
   },
@@ -357,37 +233,14 @@ const areaChartOptions = reactive<EChartsOption>({
   ]
 }) as EChartsOption
 
-/** 计算环比 */
-const calculateRelativeRate = (value?: number, reference?: number) => {
-  // 防止除0
-  if (!reference) return 0
-
-  return ((100 * ((value || 0) - reference)) / reference).toFixed(0)
-}
-
-/** 设置时间范围 */
-function setTimes() {
-  const beginDate = dayjs().subtract(shortcutDays.value, 'd')
-  const yesterday = dayjs().subtract(1, 'd')
-  queryParams.times = DateUtil.getDateRange(beginDate, yesterday)
-}
-
-/** 处理会员概览查询（日期单选按钮组选择后） */
-const handleDateTypeChange = async () => {
-  // 设置时间范围
-  setTimes()
-  // 查询数据
-  await getMemberAnalyse()
-}
-
 /** 查询会员统计 */
 const getMemberSummary = async () => {
-  summary.value = await TradeMemberApi.getMemberSummary()
+  summary.value = await MemberStatisticsApi.getMemberSummary()
 }
 
 /** 按照省份，查询会员统计列表 */
 const getMemberAreaStatisticsList = async () => {
-  const list = await TradeMemberApi.getMemberAreaStatisticsList()
+  const list = await MemberStatisticsApi.getMemberAreaStatisticsList()
   areaStatisticsList.value = list.map((item: MemberAreaStatisticsRespVO) => {
     return {
       ...item,
@@ -401,20 +254,21 @@ const getMemberAreaStatisticsList = async () => {
   })
   let min = 0
   let max = 0
-  areaChartOptions.series[0].data = areaStatisticsList.value.map((item) => {
-    min = Math.min(min, item.orderPayCount)
-    max = Math.max(max, item.orderPayCount)
-    return { ...item, name: item.areaName, value: item.orderPayCount || 0 }
+  areaChartOptions.series![0].data = areaStatisticsList.value.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 }
   })
-  areaChartOptions.visualMap.min = min
-  areaChartOptions.visualMap.max = max
+  areaChartOptions.visualMap!['min'] = min
+  areaChartOptions.visualMap!['max'] = max
 }
 
 /** 按照性别，查询会员统计列表 */
 const getMemberSexStatisticsList = async () => {
-  const list = await TradeMemberApi.getMemberSexStatisticsList()
+  const list = await MemberStatisticsApi.getMemberSexStatisticsList()
   const dictDataList = getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)
-  sexChartOptions.series[0].data = dictDataList.map((dictData: DictDataType) => {
+  dictDataList.push({ label: '未知', value: null } as any)
+  sexChartOptions.series![0].data = dictDataList.map((dictData: DictDataType) => {
     const userCount = list.find((item: MemberSexStatisticsRespVO) => item.sex === dictData.value)
       ?.userCount
     return {
@@ -426,8 +280,9 @@ const getMemberSexStatisticsList = async () => {
 
 /** 按照终端，查询会员统计列表 */
 const getMemberTerminalStatisticsList = async () => {
-  const list = await TradeMemberApi.getMemberTerminalStatisticsList()
+  const list = await MemberStatisticsApi.getMemberTerminalStatisticsList()
   const dictDataList = getIntDictOptions(DICT_TYPE.TERMINAL)
+  dictDataList.push({ label: '未知', value: null } as any)
   terminalChartOptions.series![0].data = dictDataList.map((dictData: DictDataType) => {
     const userCount = list.find(
       (item: MemberTerminalStatisticsRespVO) => item.terminal === dictData.value
@@ -439,20 +294,6 @@ const getMemberTerminalStatisticsList = async () => {
   })
 }
 
-/** 查询会员概览数据列表 */
-const getMemberAnalyse = async () => {
-  analyseLoading.value = true
-  const times = queryParams.times
-  // 开始与截止在同一天的, 环比出不来, 需要延长一天
-  if (DateUtil.isSameDay(times[0], times[1])) {
-    // 前天
-    times[0] = DateUtil.formatDate(dayjs(times[0]).subtract(1, 'd'))
-  }
-  // 查询数据
-  analyseData.value = await TradeMemberApi.getMemberAnalyse({ times })
-  analyseLoading.value = false
-}
-
 /** 初始化 **/
 onMounted(async () => {
   loading.value = true
@@ -460,8 +301,7 @@ onMounted(async () => {
     getMemberSummary(),
     getMemberTerminalStatisticsList(),
     getMemberAreaStatisticsList(),
-    getMemberSexStatisticsList(),
-    handleDateTypeChange()
+    getMemberSexStatisticsList()
   ])
   loading.value = false
 })
@@ -472,16 +312,4 @@ onMounted(async () => {
     margin-bottom: 1rem;
   }
 }
-
-.trapezoid1 {
-  transform: perspective(5em) rotateX(-11deg);
-}
-
-.trapezoid2 {
-  transform: perspective(7em) rotateX(-20deg);
-}
-
-.trapezoid3 {
-  transform: perspective(3em) rotateX(-13deg);
-}
 </style>

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

@@ -76,7 +76,7 @@
       <!-- 统计值 -->
       <el-row :gutter="16">
         <el-col :md="6" :sm="12" :xs="24">
-          <TradeTrendValue
+          <SummaryCard
             title="营业额"
             tooltip="商品支付金额、充值金额"
             icon="fa-solid:yen-sign"
@@ -94,7 +94,7 @@
           />
         </el-col>
         <el-col :md="6" :sm="12" :xs="24">
-          <TradeTrendValue
+          <SummaryCard
             title="商品支付金额"
             tooltip="用户购买商品的实际支付金额，包括微信支付、余额支付、支付宝支付、线下支付金额（拼团商品在成团之后计入，线下支付订单在后台确认支付后计入）"
             icon="fa-solid:shopping-cart"
@@ -112,7 +112,7 @@
           />
         </el-col>
         <el-col :md="6" :sm="12" :xs="24">
-          <TradeTrendValue
+          <SummaryCard
             title="充值金额"
             tooltip="用户成功充值的金额"
             icon="fa-solid:money-check-alt"
@@ -130,7 +130,7 @@
           />
         </el-col>
         <el-col :md="6" :sm="12" :xs="24">
-          <TradeTrendValue
+          <SummaryCard
             title="支出金额"
             tooltip="余额支付金额、支付佣金金额、商品退款金额"
             icon="ep:warning-filled"
@@ -148,7 +148,7 @@
           />
         </el-col>
         <el-col :md="6" :sm="12" :xs="24">
-          <TradeTrendValue
+          <SummaryCard
             title="余额支付金额"
             tooltip="用户下单时使用余额实际支付的金额"
             icon="fa-solid:wallet"
@@ -166,7 +166,7 @@
           />
         </el-col>
         <el-col :md="6" :sm="12" :xs="24">
-          <TradeTrendValue
+          <SummaryCard
             title="支付佣金金额"
             tooltip="后台给推广员支付的推广佣金，以实际支付为准"
             icon="fa-solid:award"
@@ -184,7 +184,7 @@
           />
         </el-col>
         <el-col :md="6" :sm="12" :xs="24">
-          <TradeTrendValue
+          <SummaryCard
             title="商品退款金额"
             tooltip="用户成功退款的商品金额"
             icon="fa-solid:times-circle"
@@ -212,7 +212,7 @@
 <script lang="ts" setup>
 import * as TradeStatisticsApi from '@/api/mall/statistics/trade'
 import TradeStatisticValue from './components/TradeStatisticValue.vue'
-import TradeTrendValue from './components/TradeTrendValue.vue'
+import SummaryCard from '@/components/SummaryCard/index.vue'
 import { EChartsOption } from 'echarts'
 import { DataComparisonRespVO } from '@/api/mall/statistics/common'
 import { TradeSummaryRespVO, TradeTrendSummaryRespVO } from '@/api/mall/statistics/trade'

src/views/mall/trade/delivery/pickUpOrder/index.vue

@@ -76,7 +76,7 @@
   <!-- 统计卡片 -->
   <el-row :gutter="16" class="summary">
     <el-col :sm="6" :xs="12" v-loading="loading">
-      <TradeTrendValue
+      <SummaryCard
         title="订单数量"
         icon="icon-park-outline:transaction-order"
         icon-color="bg-blue-100"
@@ -85,7 +85,7 @@
       />
     </el-col>
     <el-col :sm="6" :xs="12" v-loading="loading">
-      <TradeTrendValue
+      <SummaryCard
         title="订单金额"
         icon="streamline:money-cash-file-dollar-common-money-currency-cash-file"
         icon-color="bg-purple-100"
@@ -96,7 +96,7 @@
       />
     </el-col>
     <el-col :sm="6" :xs="12" v-loading="loading">
-      <TradeTrendValue
+      <SummaryCard
         title="退款单数"
         icon="heroicons:receipt-refund"
         icon-color="bg-yellow-100"
@@ -105,7 +105,7 @@
       />
     </el-col>
     <el-col :sm="6" :xs="12" v-loading="loading">
-      <TradeTrendValue
+      <SummaryCard
         title="退款金额"
         icon="ri:refund-2-line"
         icon-color="bg-green-100"
@@ -199,7 +199,7 @@ import * as PickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
 import { DICT_TYPE } from '@/utils/dict'
 import { fenToYuan, floatToFixed2 } from '@/utils'
 import { fenToYuanFormat } from '@/utils/formatter'
-import TradeTrendValue from '@/views/mall/statistics/trade/components/TradeTrendValue.vue'
+import SummaryCard from '@/components/SummaryCard/index.vue'
 import { dateFormatter } from '@/utils/formatTime'
 import { DeliveryTypeEnum } from '@/utils/constants'
 import { TradeOrderSummaryRespVO } from '@/api/mall/trade/order'