46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<template>
|
|
<div class="common-statistics">
|
|
<stats-card
|
|
title="当前支出" color="#CA6C65" unit="元" icon="fa-solid fa-sack-xmark"
|
|
:value="formatAmount(billStats.expensive)" />
|
|
|
|
<stats-card
|
|
title="当前收入" color="#6FBB69" unit="元" icon="fa-solid fa-sack-dollar"
|
|
:value="formatAmount(billStats.income)" />
|
|
|
|
<stats-card
|
|
title="当前结余" color="#E4BF62" unit="元" icon="fa-solid fa-coins"
|
|
:value="formatAmount(billStats.balance)" />
|
|
|
|
<stats-card
|
|
title="支出占比" color="#5470C6" unit="%" icon="fa-solid fa-chart-pie"
|
|
:value="(billStats.rate * 100).toFixed(2)" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import StatsCard from '@/components/StatsCard.vue'
|
|
import { useBillStore } from '@/store/bill.ts'
|
|
import { ref, watch } from 'vue'
|
|
import { getBillSummaryStats } from '@/utils/home/billUtil.ts'
|
|
import { IBillSummaryStats } from '@/types/bill.ts'
|
|
import { formatAmount } from 'vue3-common/utils/numberUtil'
|
|
|
|
const billStore = useBillStore()
|
|
|
|
watch(() => billStore.isRefresh, () => {
|
|
updateStats()
|
|
})
|
|
|
|
const billStats = ref<IBillSummaryStats>({
|
|
balance: 0,
|
|
expensive: 0,
|
|
income: 0,
|
|
rate: 0
|
|
})
|
|
|
|
const updateStats = () => {
|
|
billStats.value = getBillSummaryStats(billStore.billRecordList)
|
|
}
|
|
</script>
|