feat:增加后端接口

src/components/Stats/FoodChart.vue

@@ -9,7 +9,7 @@
     </div>
     <div class="chart-container card-item">
       <div class="content">
-        <span class="title">📊类别统计</span>
+        <span class="title">📊菜谱统计</span>
       </div>
       <div class="chart" ref="foodCategoryChartRef"/>
     </div>
@@ -28,22 +28,18 @@
 import FoodRank from '@/components/Stats/FoodRank.vue'
 import { onMounted, ref, watch } from 'vue'
 import * as echarts from 'echarts'
-import { lineChartOptions, barChartOptions, pieChartOptions } from 'vue3-common/utils/eChartsUtil'
+import { lineChartOptions, pieChartOptions } from 'vue3-common/utils/eChartsUtil'
 import { useFoodStore } from '@/store/food'
 import { useAppStore } from '@/store/app.ts'
-import type { IStatsChart } from 'vue3-common/types'
-import { isMobile } from 'vue3-common/utils/layoutUtil'
 
 const foodStore = useFoodStore()
 const appStore = useAppStore()
 
 const foodDailyChartRef = ref<HTMLElement>()
 const foodCategoryChartRef = ref<HTMLElement>()
-const billRankChartRef = ref<HTMLElement>()
 
 let foodDailyChart: echarts.ECharts
 let foodCategoryChart: echarts.ECharts
-let billRankChart: echarts.ECharts
 
 watch(() => foodStore.isRefresh, () => {
   updateChart()
@@ -52,60 +48,19 @@ watch(() => foodStore.isRefresh, () => {
 onMounted(() => {
   foodDailyChart = echarts.init(foodDailyChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
   foodCategoryChart = echarts.init(foodCategoryChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
-  // billRankChart = echarts.init(billRankChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
 })
 
 const updateChart = () => {
-  const MAX_CATEGORY_COUNT = 5
-  const MAX_RANK_COUNT = 10
+  const MAX_COUNT = 5
 
   // 记录统计图
-  // const dailyXAxis = foodStore.billDateStatsList.map((item) => item.name)
-  // const dailyYAxis = foodStore.billDateStatsList.map((item) => item.value)
-  const dailyXAxis = ['2024-01', '2024-02']
-  const dailyYAxis = ['10', '6']
+  const dailyXAxis = foodStore.foodRecordStats.slice(0, MAX_COUNT).map((item) => item.name)
+  const dailyYAxis = foodStore.foodRecordStats.slice(0, MAX_COUNT).map((item) => item.value)
   foodDailyChart.setOption(lineChartOptions('日期', dailyXAxis, '次数（次）', dailyYAxis))
-  //
-  // // 账本统计图
-  // const bookXAxis = foodStore.billBookStatsList.map((item) => item.name)
-  // const bookYAxis = foodStore.billBookStatsList.map((item) => item.value)
-  // billBookChart.setOption(barChartOptions('账本', bookXAxis, '金额（元）', bookYAxis))
-  // billBookChart.setOption({
-  //   series: [{
-  //     itemStyle: {
-  //       color: foodStore.billType === 'expensive' ? '#CA6C65' : '#6FBB69'
-  //     },
-  //     markPoint: {
-  //       label: {
-  //         color: '#FFFFFF'
-  //       }
-  //     }
-  //   }]
-  // })
-  //
+
   // 类别统计图
-  const foodCategoryList = [
-    { value: 12, name: '家常菜' },
-    { value: 10, name: '鲁菜' },
-    { value: 8, name: '川菜' },
-    { value: 5, name: '淮扬菜' },
-    { value: 2, name: '其他' }
-  ]
-  foodCategoryChart.setOption(pieChartOptions('category', '次', foodCategoryList))
-  //
-  // // 排行榜统计图
-  // const billRankList: IStatsChart[] = []
-  // const resultList = foodStore.billRecordList.filter((item) => item.type === foodStore.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)))
-  // }
+  const foodCategoryData = foodStore.foodCategoryStats.slice(0, MAX_COUNT)
+  foodCategoryChart.setOption(pieChartOptions('category', '个', foodCategoryData))
 }
 </script>
 
@@ -124,7 +79,7 @@ const updateChart = () => {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      border-bottom: 1px solid #009FA8;
+      border-bottom: 1px solid var(--el-color-primary);
 
       .title {
         font-size: 1em;

src/components/Stats/FoodRank.vue

@@ -2,8 +2,8 @@
   <div v-for="(item, index) in foodRankList.slice(0, MAX_RANK_COUNT)"
        :key="index" class="rank-item">
     <span class="rank-index">{{ index+1 }}.</span>
-    <span class="rank-content">{{ item.value }}</span>
-    <span class="rank-amount">{{ item.count }} 次</span>
+    <span class="rank-content">{{ item.name }}</span>
+    <span class="rank-amount">{{ item.value }} 次</span>
   </div>
 </template>
 
@@ -15,19 +15,5 @@ const foodStore = useFoodStore()
 
 const MAX_RANK_COUNT = 10
 
-const foodRankList = computed(() => {
-  return [{
-    value: '红烧肉',
-    count: 10
-  }, {
-    value: '红烧鱼',
-    count: 8
-  }, {
-    value: '排骨汤',
-    count: 5
-  }, {
-    value: '红烧带鱼',
-    count: 2
-  }]
-})
+const foodRankList = computed(() => foodStore.foodRankStats)
 </script>