suncheng/EmailBill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 18s
Details
Docker Build & Deploy / Deploy to Production (push) Successful in 6s
Details
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 0s
Details
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
Details

Browse Source
This commit is contained in:
SunCheng
2026-02-20 13:56:29 +08:00
parent 2cf19a45e5
commit 6e95568906
13 changed files with 1038 additions and 1269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
Web/src/components/Budget/BudgetChartAnalysis.vue
View File

@@ -6,14 +6,15 @@
<div class="chart-card gauge-card">
<div class="chart-header">
<div class="chart-title">
<!-- 月度健康度 -->
{{ activeTab === BudgetCategory.Expense ? '使用情况（月度）' : '完成情况（月度）' }}
<span class="chart-title-text">
{{ activeTab === BudgetCategory.Expense ? '使用情况（月度）' : '完成情况（月度）' }}
</span>
<van-icon
name="info-o"
size="16"
color="var(--van-primary-color)"
style="margin-left: auto; cursor: pointer"
@click="showDescriptionPopup = true; activeDescTab = 'month'"
class="info-icon"
@click="handleShowDescription('month')"
/>
</div>
</div>
@@ -27,15 +28,15 @@
/>
<div class="gauge-text-overlay">
<div class="balance-label">
余额
{{ activeTab === BudgetCategory.Expense ? '余额' : '差额' }}
</div>
<div
class="balance-value"
:style="{
color:
overallStats.month.current > overallStats.month.limit
? 'var(--van-danger-color)'
: ''
activeTab === BudgetCategory.Expense
? (overallStats.month.current > overallStats.month.limit ? 'var(--van-danger-color)' : '')
: (overallStats.month.current < overallStats.month.limit ? 'var(--van-danger-color)' : '')
}"
>
¥{{ formatMoney(Math.abs(overallStats.month.limit - overallStats.month.current)) }}
@@ -44,11 +45,11 @@
</div>
<div class="gauge-footer">
<div class="gauge-item">
<span class="label">已用</span>
<span class="label">{{ activeTab === BudgetCategory.Expense ? '已用' : '已获得' }}</span>
<span class="value">¥{{ formatMoney(overallStats.month.current) }}</span>
</div>
<div class="gauge-item">
<span class="label">预算</span>
<span class="label">{{ activeTab === BudgetCategory.Expense ? '预算' : '目标' }}</span>
<span class="value">¥{{ formatMoney(overallStats.month.limit) }}</span>
</div>
</div>
@@ -58,13 +59,15 @@
<div class="chart-card gauge-card">
<div class="chart-header">
<div class="chart-title">
{{ activeTab === BudgetCategory.Expense ? '使用情况（年度）' : '完成情况（年度）' }}
<span class="chart-title-text">
{{ activeTab === BudgetCategory.Expense ? '使用情况（年度）' : '完成情况（年度）' }}
</span>
<van-icon
name="info-o"
size="16"
color="var(--van-primary-color)"
style="margin-left: auto; cursor: pointer"
@click="showDescriptionPopup = true; activeDescTab = 'year'"
class="info-icon"
@click="handleShowDescription('year')"
/>
</div>
</div>
@@ -78,16 +81,15 @@
/>
<div class="gauge-text-overlay">
<div class="balance-label">
余额
{{ activeTab === BudgetCategory.Expense ? '余额' : '差额' }}
</div>
<div
class="balance-value"
:style="{
color:
activeTab === BudgetCategory.Expense &&
overallStats.year.current > overallStats.year.limit
? 'var(--van-danger-color)'
: ''
activeTab === BudgetCategory.Expense
? (overallStats.year.current > overallStats.year.limit ? 'var(--van-danger-color)' : '')
: (overallStats.year.current < overallStats.year.limit ? 'var(--van-danger-color)' : '')
}"
>
¥{{ formatMoney(Math.abs(overallStats.year.limit - overallStats.year.current)) }}
@@ -96,11 +98,11 @@
</div>
<div class="gauge-footer">
<div class="gauge-item">
<span class="label">已用</span>
<span class="label">{{ activeTab === BudgetCategory.Expense ? '已用' : '已获得' }}</span>
<span class="value">¥{{ formatMoney(overallStats.year.current) }}</span>
</div>
<div class="gauge-item">
<span class="label">预算</span>
<span class="label">{{ activeTab === BudgetCategory.Expense ? '预算' : '目标' }}</span>
<span class="value">¥{{ formatMoney(overallStats.year.limit) }}</span>
</div>
</div>
@@ -117,7 +119,7 @@
预算进度（月度）
</div>
<div class="chart-subtitle">
预算剩余消耗趋势
{{ activeTab === BudgetCategory.Expense ? '预算剩余消耗趋势' : '收入积累趋势' }}
</div>
</div>
<BaseChart
@@ -204,7 +206,7 @@
</template>
<script setup>
import { ref, onMounted, watch, nextTick, onUnmounted, computed } from 'vue'
import { ref, computed } from 'vue'
import { BudgetCategory, BudgetPeriodType } from '@/constants/enums'
import { getCssVar } from '@/utils/theme'
import PopupContainer from '@/components/PopupContainer.vue'
@@ -239,6 +241,12 @@ const props = defineProps({
const showDescriptionPopup = ref(false)
const activeDescTab = ref('month')
// 显示描述弹窗
const handleShowDescription = (tab) => {
activeDescTab.value = tab
showDescriptionPopup.value = true
}
// Chart.js 相关
const { getChartOptions } = useChartTheme()
@@ -595,10 +603,19 @@ const varianceChartOptions = computed(() => {
callbacks: {
label: (context) => {
const item = context.dataset._meta[context.dataIndex]
const diffText =
item.value > 0
const isExpense = props.activeTab === BudgetCategory.Expense
let diffText
if (isExpense) {
diffText = item.value > 0
? `超支: ¥${formatMoney(item.value)}`
: `结余: ¥${formatMoney(Math.abs(item.value))}`
} else {
diffText = item.value > 0
? `超额: ¥${formatMoney(item.value)}`
: `未达标: ¥${formatMoney(Math.abs(item.value))}`
}
return [
`预算: ¥${formatMoney(item.limit)}`,
`实际: ¥${formatMoney(item.current)}`,
@@ -1038,9 +1055,24 @@ const yearBurndownChartOptions = computed(() => {
font-weight: 600;
color: var(--van-text-color);
margin-bottom: 2px;
display: flex;
align-items: center;
gap: 8px;
}
.chart-title-text {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.info-icon {
flex-shrink: 0;
cursor: pointer;
padding: 4px;
margin: -4px;
}
.chart-subtitle {