Merge branch 'feat/v20240706-dashboard' into dev

src/views/dashboard/componets/GoodsRankingChart.vue

@@ -20,8 +20,8 @@ export default {
             color: '#A4A4A4',
             fontSize: 12,
             formatter(value) {
-              const MAX_LENGTH = 7
-              const SPLIT_LENGTH = 5
+              const MAX_LENGTH = 12
+              const SPLIT_LENGTH = 8
               if (value.length <= MAX_LENGTH) {
                 return value
               }

src/views/dashboard/componets/LogisticsStatisticsChart.vue

@@ -13,7 +13,13 @@ export default {
       staticOptions: {
         tooltip: { trigger: 'item' },
         legend: { orient: 'vertical', bottom: 'bottom' },
-        series: { label: { show: false }, center: ['50%', '40%'], type: 'pie', radius: '70%', data: [] }
+        series: {
+          label: { normal: { position: 'outside', formatter: '{b}({c})' } },
+          center: ['50%', '40%'],
+          type: 'pie',
+          radius: '60%',
+          data: []
+        }
       }
     }
   },

src/views/dashboard/componets/SiteMapChart.vue

@@ -40,7 +40,7 @@ export default {
           data: data.map((item) => {
             const nationalMapDataList = item.nationalMapDataList
             const sum = nationalMapDataList.reduce((acc, curr) => acc + curr.dataNumber, 0)
-            const areaColor = sum > 20 ? mapItemAreaColor[3] : sum > 10 ? mapItemAreaColor[2] : sum > 5 ? mapItemAreaColor[1] : mapItemAreaColor[0]
+            const areaColor = sum > 20 ? mapItemAreaColor[3] : sum > 10 ? mapItemAreaColor[2] : sum > 0 ? mapItemAreaColor[1] : mapItemAreaColor[0]
             return {
               name: item.provinces,
               value: JSON.stringify(nationalMapDataList),

src/views/dashboard/componets/StatisticsItem.vue

@@ -1,13 +1,19 @@
 <template>
-  <div class="statistics-item-container">
-    <div :style="{ textAlign: center ? 'center' : 'left' }" class="title">{{ title }}</div>
-    <div :style="{ textAlign: center ? 'center' : 'left' }" class="value" ref="valueRef">{{ value }}</div>
+  <div>
+    <el-tooltip :offset="30" :disabled="!tooltip" placement="top" effect="light">
+      <template #content>
+        <slot name="tooltip"></slot>
+      </template>
+      <div class="statistics-item-container">
+        <div :style="{ textAlign: center ? 'center' : 'left' }" class="title">{{ title }}</div>
+        <div :style="{ textAlign: center ? 'center' : 'left' }" class="value" ref="valueRef">{{ value }}</div>
+      </div>
+    </el-tooltip>
   </div>
 </template>
 
 <script>
 import { CountUp } from 'countup.js'
-import { number } from 'echarts/lib/export'
 import { formatBigNumber } from '../utils/utils'
 
 export default {
@@ -30,6 +36,15 @@ export default {
     center: {
       type: Boolean,
       default: false
+    },
+
+    tooltip: {
+      type: Boolean,
+      default: false
+    },
+
+    format: {
+      type: Function
     }
   },
 
@@ -45,11 +60,21 @@ export default {
   methods: {
     init() {
       this.$nextTick(() => {
-        const numberInfo = formatBigNumber(this.value)
-        const { count, unit } = numberInfo
+        let unit = ''
+        let count = ''
+        if (this.format && typeof this.format === 'function') {
+          const res = this.format(this.value)
+          unit = res.unit
+          count = res.count
+        } else {
+          const numberInfo = formatBigNumber(this.value)
+          unit = numberInfo.unit
+          count = numberInfo.count
+        }
+
         const countUpOptions = {}
         let scrollNUmber = ''
-        if (count.split('.')[1].trim() === '00') {
+        if (count.includes('.') && count.split('.')[1].trim() === '00') {
           scrollNUmber = count.split('.')[0]
         } else {
           scrollNUmber = count

src/views/dashboard/componets/StatisticsSection.vue

@@ -1,14 +1,20 @@
 <template>
-  <div class="statistics-section-container">
-    <img class="icon" :src="meta.icon" alt="" />
-    <div class="info">
-      <div class="title">
-        {{ meta.label }}
-        <DateSelect v-model="filterForm.date" v-if="meta.filter && meta.filter.includes('date')" style="margin-left: 16px"></DateSelect>
-        <SourceChannelSelect v-model="filterForm.scourceChannel" v-if="meta.filter && meta.filter.includes('scourceChannel')" style="margin-left: 8px"></SourceChannelSelect>
-      </div>
-      <div class="list">
-        <StatisticsItem v-for="(item, index) in meta.children" :key="index" :style="meta.itemStyles" :title="item.label" :value="itemData[item.field]"></StatisticsItem>
+  <div>
+    <div class="statistics-section-container">
+      <img class="icon" :src="meta.icon" alt="" />
+      <div class="info">
+        <div class="title">
+          {{ meta.label }}
+          <DateSelect v-model="filterForm.date" v-if="meta.filter && meta.filter.includes('date')" style="margin-left: 16px"></DateSelect>
+          <SourceChannelSelect v-model="filterForm.scourceChannel" v-if="meta.filter && meta.filter.includes('scourceChannel')" style="margin-left: 8px"></SourceChannelSelect>
+        </div>
+        <div class="list">
+          <StatisticsItem v-for="(item, index) in meta.children" :key="index" :style="meta.itemStyles" :title="item.label" :value="itemData[item.field]" :format="item.format" :tooltip="item.tooltip">
+            <template #tooltip>
+              <slot :name="item.field"></slot>
+            </template>
+          </StatisticsItem>
+        </div>
       </div>
     </div>
   </div>

src/views/dashboard/data/dashboard.js

@@ -5,13 +5,20 @@ export const statisticalArea = [
     icon: require('../../../assets/images/dashboard/member.png'),
     children: [
       { label: '会员总数', field: 'memberTotal' },
-      // { label: '会员同比增长率', field: '100%' },
+      {
+        label: '会员同比增长率',
+        field: 'memberIncreaseRate',
+        tooltip: true,
+        format(value) {
+          return { count: value * 100 + '', unit: '%' }
+        }
+      },
       { label: '普通会员数量', field: 'normalMemberTotal' },
       { label: '团长数量', field: 'headquarterTotal' },
       { label: '合伙人数量', field: 'partnerTotal' }
     ],
     // styles: 'margin: 0 0 16px; flex: 0 0 32%',
-    itemStyles: 'width: 50%',
+    itemStyles: 'width: 32%',
     itemData: 'memberStatistics'
   },
   {

src/views/dashboard/index.vue

@@ -26,7 +26,20 @@
           :key="item.label + index"
           :meta="item"
           :itemData="statisticalRegionData[item.itemData]"
-        ></StatisticsSection>
+        >
+          <template #memberIncreaseRate>
+            <div class="memberIncreaseRate-tooltip">
+              <div class="item">
+                <div>昨日新增会员:</div>
+                <div>{{ statisticalRegionData.memberStatistics.yesterdayMember || 0 }} 个</div>
+              </div>
+              <div class="item">
+                <div>今日新增会员:</div>
+                <div>{{ statisticalRegionData.memberStatistics.todayMember || 0 }} 个</div>
+              </div>
+            </div>
+          </template>
+        </StatisticsSection>
       </div>
     </StatisticsPanel>
 
@@ -185,7 +198,8 @@ export default {
           memberTotal: 0, //会员总数
           normalMemberTotal: 0, // 普通会员数量
           headquarterTotal: 0, // 团长数量
-          partnerTotal: 0 // 合伙人数量
+          partnerTotal: 0, // 合伙人数量
+          memberIncreaseRate: 0 // 会员增长率
         },
         orderStatistics: {
           // 订单统计
@@ -294,7 +308,9 @@ export default {
       const res = await getHomeStatisticsData()
       const { data } = res
 
-      Object.assign(this.statisticalRegionData.memberStatistics, data.memberStatistics)
+      Object.assign(this.statisticalRegionData.memberStatistics, data.memberStatistics, data.memberStatistics.memberIncreaseRate)
+
+      console.log('年的', this.statisticalRegionData.memberStatistics)
       Object.assign(this.statisticalRegionData.orderStatistics, data.orderStatistics)
       Object.assign(this.statisticalRegionData.platformTransactionDataStatistics, data.platformTransactionDataStatistics)
       Object.assign(this.statisticalRegionData.voucherStatistics, data.voucherStatistics)
@@ -628,4 +644,20 @@ export default {
     }
   }
 }
+
+.memberIncreaseRate-tooltip {
+  .item {
+    display: flex;
+    align-items: center;
+    line-height: 1.5;
+    font-size: 14px;
+
+    div {
+      &:nth-child(2) {
+        font-weight: bold;
+        color: #f40;
+      }
+    }
+  }
+}
 </style>