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 @@ 清单 + + + 统计 + 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() + + 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 @@ + + + + + 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: ''