Merge branch 'master' of https://cxxgit.iepose.cn/Cxx0822/sweet-hut-ui

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()
 

src/components/Health/HealthForm.vue

@@ -16,8 +16,8 @@
         <span>运动项目</span>
       </template>
 
-      <el-select v-model="healthStore.currentHealth.project"
-                 placeholder="请选择运行项目" style="width: 150px;">
+      <el-select v-model="healthStore.currentHealth.sportProject"
+                 placeholder="请选择运行项目" clearable style="width: 150px;">
         <el-option v-for="(item, index) in projectList" :key="index"
                    :label="item" :value="item"/>
       </el-select>
@@ -29,7 +29,8 @@
         <span>运动时长</span>
       </template>
 
-      <el-input-number v-model="healthStore.currentHealth.duration"
+      <el-input-number v-model="healthStore.currentHealth.sportDuration"
+                       :min="0" :max="300" :precision="0"
                        style="width: 120px;"></el-input-number>
 
       <span style="margin-left: 5px;">分钟</span>
@@ -41,7 +42,8 @@
         <span>体重</span>
       </template>
 
-      <el-input-number v-model="healthStore.currentHealth.value"
+      <el-input-number v-model="healthStore.currentHealth.weight"
+                       :min="0" :max="200"
                        style="width: 120px;"></el-input-number>
 
       <span style="margin-left: 5px;">千克</span>
@@ -59,14 +61,27 @@
 <script lang="ts" setup>
 import { useHealthStore } from '@/store/health'
 import { formatDate, isBeforeDate } from 'vue3-common/utils/dateUtil'
+import { ElMessage } from 'element-plus'
 
 const healthStore = useHealthStore()
 
 const projectList = ['羽毛球', '乒乓球', '跑步', '其他']
 
 const onSubmit = async () => {
-  // await periodStore.updatePeriodDay()
-  // periodStore.currentPeriodDay = periodStore.getPeriodDay(periodStore.selectDate)
+  const { sportProject, sportDuration, weight } = healthStore.currentHealth
+  if (sportProject === '' && sportDuration === 0 && weight === 0) {
+    return
+  }
+
+  if (sportDuration) {
+    if (!sportProject) {
+      ElMessage.error('请选择运动项目')
+      return
+    }
+  }
+
+  await healthStore.updateHealthDay()
+  healthStore.currentHealth = healthStore.getHealthDay(healthStore.selectDate)
 }
 </script>
 

src/components/Health/HealthLegend.vue

@@ -1,43 +0,0 @@
-<template>
-  <div class="health-legend card-item">
-    <div class="legend-item">
-      <div class="small-circle weight"></div>
-      <span>体重</span>
-    </div>
-    <div class="legend-item">
-      <div class="small-circle exercise"></div>
-      <span>运动</span>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-</script>
-
-<style lang="scss">
-.health-legend {
-  padding: 10px;
-  display: flex;
-  gap: 5px;
-
-  .legend-item {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-
-    .small-circle {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-    }
-  }
-
-  .weight {
-    background-color: #DC2626;
-  }
-
-  .exercise {
-    background-color: #16A34A;
-  }
-}
-</style>

src/components/Ledger/LedgerRank.vue

@@ -0,0 +1,23 @@
+<template>
+  <div v-for="(item, index) in ledgerRankList.slice(0, MAX_RANK_COUNT)"
+       :key="index" class="rank-item">
+    <span class="rank-index">{{ index+1 }}.</span>
+    <span class="rank-content">{{ item.content }}</span>
+    <span class="rank-amount">￥{{ formatAmount(item.totalPrice) }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLedgerStore } from '@/store/ledger.ts'
+import { getLedgerSortByPrice } from '@/utils/home/ledgerUtil.ts'
+import { computed } from 'vue'
+import { formatAmount } from 'vue3-common/utils/numberUtil'
+
+const ledgerStore = useLedgerStore()
+
+const MAX_RANK_COUNT = 10
+
+const ledgerRankList = computed(() => {
+  return getLedgerSortByPrice(ledgerStore.ledgerRecordList)
+})
+</script>