feat:更新运动健康模块

src/components/Bill/BillChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bill-chart"
+  <div class="bill-chart common-chart"
        v-loading="billStore.isLoading"
        element-loading-text="正在加载中...">
     <div class="chart-container card-item">
@@ -8,19 +8,22 @@
       </div>
       <div class="chart" ref="billDailyChartRef"/>
     </div>
+
     <div class="chart-container card-item">
       <div class="content">
         <span class="title">📊类别统计</span>
       </div>
       <div class="chart" ref="billCategoryChartRef"/>
     </div>
+
     <div class="chart-container card-item">
       <div class="content">
         <span class="title">📊账本统计</span>
       </div>
       <div class="chart" ref="billBookChartRef"/>
     </div>
-    <div v-if="isMobile()" class="chart-container card-item">
+
+    <div class="chart-container card-item">
       <div class="content">
         <span class="title">📊排行榜</span>
       </div>
@@ -28,12 +31,6 @@
         <bill-rank />
       </div>
     </div>
-    <div v-else class="chart-container card-item">
-      <div class="content">
-        <span class="title">📊排行榜</span>
-      </div>
-      <div class="chart" ref="billRankChartRef"/>
-    </div>
   </div>
 </template>
 
@@ -44,7 +41,6 @@ import * as echarts from 'echarts'
 import { lineChartOptions, barChartOptions, pieChartOptions } from 'vue3-common/utils/eChartsUtil'
 import { useBillStore } from '@/store/bill.ts'
 import { useAppStore } from '@/store/app.ts'
-import type { IStatsChart } from 'vue3-common/types'
 import { isMobile } from 'vue3-common/utils/layoutUtil'
 
 const billStore = useBillStore()
@@ -53,12 +49,10 @@ const appStore = useAppStore()
 const billDailyChartRef = ref<HTMLElement>()
 const billBookChartRef = ref<HTMLElement>()
 const billCategoryChartRef = ref<HTMLElement>()
-const billRankChartRef = ref<HTMLElement>()
 
 let billDailyChart: echarts.ECharts
 let billBookChart: echarts.ECharts
 let billCategoryChart: echarts.ECharts
-let billRankChart: echarts.ECharts
 
 watch(() => billStore.isRefresh, () => {
   updateChart()
@@ -68,15 +62,10 @@ onMounted(() => {
   billDailyChart = echarts.init(billDailyChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
   billBookChart = echarts.init(billBookChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
   billCategoryChart = echarts.init(billCategoryChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
-
-  if (!isMobile()) {
-    billRankChart = echarts.init(billRankChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
-  }
 })
 
 const updateChart = () => {
   const MAX_CATEGORY_COUNT = 5
-  const MAX_RANK_COUNT = 10
 
   // 收支统计图
   const dailyXAxis = billStore.billDateStatsList.map((item) => item.name)
@@ -129,19 +118,5 @@ const updateChart = () => {
       }]
     })
   }
-
-  // 排行榜统计图
-  const billRankList: IStatsChart[] = []
-  const resultList = billStore.billRecordList.filter((item) => item.type === billStore.billType)
-  resultList.sort((a, b) => b.amount - a.amount).forEach((item) => {
-    billRankList.push({
-      name: item.content,
-      value: item.amount
-    })
-  })
-
-  if (!isMobile()) {
-    billRankChart.setOption(pieChartOptions('rank', '元', billRankList.slice(0, MAX_RANK_COUNT)))
-  }
 }
 </script>

src/components/Bill/BillRank.vue

@@ -3,7 +3,7 @@
        :key="index" class="rank-item">
     <span class="rank-index">{{ index+1 }}.</span>
     <span class="rank-content">{{ item.content }}</span>
-    <span class="rank-amount">￥{{ item.amount }}</span>
+    <span class="rank-amount">￥{{ formatAmount(item.amount) }}</span>
   </div>
 </template>
 
@@ -11,6 +11,7 @@
 import { useBillStore } from '@/store/bill.ts'
 import { getBillSortByAmount } from '@/utils/home/billUtil.ts'
 import { computed } from 'vue'
+import { formatAmount } from 'vue3-common/utils/numberUtil'
 
 const billStore = useBillStore()