From 355a6c256d0d3673fdefae545c30d99ed3c937a8 Mon Sep 17 00:00:00 2001
From: Cxx0822 <1556464090@qq.com>
Date: Thu, 30 Oct 2025 23:02:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0=E8=B4=A6=E6=9C=AC?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Ledger/LedgerQuery.vue |   1 +
 src/layout/TabBar.vue                 |   5 ++
 src/store/ledger.ts                   |   1 -
 src/utils/home/ledgerUtil.ts          |  24 ++++++
 src/views/ledger/list.vue             |   5 --
 src/views/ledger/stats.vue            | 106 ++++++++++++++++++++++++++
 src/views/meta.ts                     |   4 +
 7 files changed, 140 insertions(+), 6 deletions(-)
 create mode 100644 src/utils/home/ledgerUtil.ts
 create mode 100644 src/views/ledger/stats.vue

diff --git a/src/components/Ledger/LedgerQuery.vue b/src/components/Ledger/LedgerQuery.vue
index 55c3f87..25d1ee9 100644
--- a/src/components/Ledger/LedgerQuery.vue
+++ b/src/components/Ledger/LedgerQuery.vue
@@ -13,6 +13,7 @@
 import { onMounted, ref } from 'vue'
 import { useLedgerStore } from '@/store/ledger.ts'
 import { ICategory } from '@/types'
+import { statsByField } from '@/utils/home/ledgerUtil.ts'
 
 const ledgerStore = useLedgerStore()
 
diff --git a/src/layout/TabBar.vue b/src/layout/TabBar.vue
index 26233a4..3131d73 100644
--- a/src/layout/TabBar.vue
+++ b/src/layout/TabBar.vue
@@ -115,6 +115,11 @@
       <i class="fa-solid fa-list-ul"></i>
       <span>清单</span>
     </router-link>
+    <router-link v-if="path.includes('ledger')" to="/ledger/stats"
+                 @click="routerClick()" class="item">
+      <i class="fa-solid fa-chart-pie"></i>
+      <span>统计</span>
+    </router-link>
 
     <router-link v-if="path.includes('password')" to="/password/list"
                  @click="routerClick()" class="item">
diff --git a/src/store/ledger.ts b/src/store/ledger.ts
index 6776e88..80a7834 100644
--- a/src/store/ledger.ts
+++ b/src/store/ledger.ts
@@ -2,7 +2,6 @@ import { defineStore } from 'pinia'
 import type { IDialog, IHandleApi, IStatsChart } from 'vue3-common/types'
 import { ElMessage } from 'element-plus'
 import { ILedger, ILedgerQuery, ILedgerRecord } from '@/types/ledger'
-import { queryAssetCategoryApi } from '@/apis/asset'
 import {
   addLedgerApi,
   deleteLedgerApi,
diff --git a/src/utils/home/ledgerUtil.ts b/src/utils/home/ledgerUtil.ts
new file mode 100644
index 0000000..d39c27d
--- /dev/null
+++ b/src/utils/home/ledgerUtil.ts
@@ -0,0 +1,24 @@
+import { ILedgerRecord } from '@/types/ledger.ts'
+import { IStatsChart } from 'vue3-common/types'
+
+export const statsByField = (records: ILedgerRecord[],
+  field: keyof ILedgerRecord): IStatsChart[] => {
+  const statsMap = new Map<string, number>()
+
+  records.forEach((record) => {
+    const fieldValue = record[field] as string
+    const filedStats = record.totalPrice as number
+
+    const currentTotal = statsMap.get(fieldValue) || 0
+    // 计算当前字段对应的统计数据
+    statsMap.set(fieldValue, currentTotal + filedStats)
+  })
+
+  return Array.from(statsMap.entries())
+    .map(([name, value]) => ({
+      name,
+      value: Number(value.toFixed(2))
+    }))
+    .sort((a, b) => b.value - a.value)
+    .slice(0, 5)
+}
diff --git a/src/views/ledger/list.vue b/src/views/ledger/list.vue
index 5c83f26..83895eb 100644
--- a/src/views/ledger/list.vue
+++ b/src/views/ledger/list.vue
@@ -23,17 +23,12 @@ import LedgerQuery from '@/components/Ledger/LedgerQuery.vue'
 import LedgerCard from '@/components/Ledger/LedgerCard.vue'
 import DraggableButton from '@/components/Common/DraggableButton.vue'
 import { useLedgerStore } from '@/store/ledger.ts'
-import { onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { formatAmount } from 'vue3-common/utils/numberUtil'
 
 const ledgerStore = useLedgerStore()
 const router = useRouter()
 
-onMounted(async () => {
-  // await ledgerStore.queryLedgerList()
-})
-
 const addClick = () => {
   ledgerStore.ledgerApiType = 'ADD'
   ledgerStore.currentLedgerRecord = ledgerStore.getEmptyLedgerRecord()
diff --git a/src/views/ledger/stats.vue b/src/views/ledger/stats.vue
new file mode 100644
index 0000000..8549da9
--- /dev/null
+++ b/src/views/ledger/stats.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="mobile-ledger-stats common-mobile-view">
+    <div class="ledger-chart">
+      <div class="chart-container card-item">
+        <div class="content">
+          <span class="title">📊类别统计</span>
+        </div>
+        <div class="chart" ref="ledgerCategoryChartRef"/>
+      </div>
+      <div class="chart-container card-item">
+        <div class="content">
+          <span class="title">📊付款人统计</span>
+        </div>
+        <div class="chart" ref="ledgerPayerChartRef"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLedgerStore } from '@/store/ledger.ts'
+import { onMounted, ref } from 'vue'
+import { statsByField } from '@/utils/home/ledgerUtil.ts'
+import { isMobile } from 'vue3-common/utils/layoutUtil'
+import { useAppStore } from '@/store/app.ts'
+import * as echarts from 'echarts'
+import { pieChartOptions } from 'vue3-common/utils/eChartsUtil'
+
+const ledgerStore = useLedgerStore()
+const appStore = useAppStore()
+
+const ledgerCategoryChartRef = ref<HTMLElement>()
+const ledgerPayerChartRef = ref<HTMLElement>()
+
+let ledgerCategoryChart: echarts.ECharts
+let ledgerPayerChart: echarts.ECharts
+
+onMounted(() => {
+  ledgerCategoryChart = echarts.init(ledgerCategoryChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
+  ledgerPayerChart = echarts.init(ledgerPayerChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
+
+  updateChart()
+})
+
+const updateChart = () => {
+  const categoryData = statsByField(ledgerStore.ledgerRecordList, 'category')
+  const payerData = statsByField(ledgerStore.ledgerRecordList, 'payer')
+
+  ledgerCategoryChart.setOption(pieChartOptions('rank', '元', categoryData))
+  ledgerPayerChart.setOption(pieChartOptions('rank', '元', payerData))
+
+  if (isMobile()) {
+    ledgerCategoryChart.setOption({
+      series: [{
+        radius: ['20%', '50%'],
+        label: {
+          formatter: '{b}: {d}%'
+        }
+      }]
+    })
+
+    ledgerPayerChart.setOption({
+      series: [{
+        radius: ['20%', '50%'],
+        label: {
+          formatter: '{b}: {d}%'
+        }
+      }]
+    })
+  }
+}
+</script>
+
+<style lang="scss">
+.mobile-ledger-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .ledger-chart {
+    flex-grow: 1;
+
+    display: grid;
+    grid-template-rows: repeat(2, 1fr);
+    gap: 10px;
+
+    .chart-container {
+      display: grid;
+      grid-template-rows: 40px 1fr;
+
+      .content {
+        padding: 0 5px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid #009FA8;
+
+        .title {
+          font-size: 1em;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/meta.ts b/src/views/meta.ts
index 06e7320..1272f3c 100644
--- a/src/views/meta.ts
+++ b/src/views/meta.ts
@@ -199,6 +199,10 @@ export const mobileHomeMeta: IRouteMetaConfig = {
     title: '清单',
     icon: ''
   },
+  '/ledger/stats': {
+    title: '统计',
+    icon: ''
+  },
   '/ledger/detail/id': {
     title: '内容',
     icon: ''