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 31s
Details
Docker Build & Deploy / Deploy to Production (push) Successful in 7s
Details
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Details
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
Details

Browse Source
This commit is contained in:
SunCheng
2026-02-01 10:27:04 +08:00
parent 704f58b1a1
commit 61916dc6da
7 changed files with 810 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,12 +27,27 @@
<div
class="remaining-label"
>
{{ activeTab === BudgetCategory.Expense ? '余额' : '差额' }}
{{
activeTab === BudgetCategory.Expense
? (
overallStats.month.current > overallStats.month.limit
? '超支'
: '余额'
)
: overallStats.month.current > overallStats.month.limit
? '超额'
: '差额'
}}
</div>
<div
class="remaining-value"
:style="{ color:
overallStats.month.current > overallStats.month.limit
? activeTab === BudgetCategory.Expense ? 'var(--van-danger-color)' : 'var(--van-success-color)'
: ''
}"
>
¥{{ formatMoney(Math.max(0, overallStats.month.limit - overallStats.month.current)) }}
¥{{ formatMoney(Math.abs(overallStats.month.limit - overallStats.month.current)) }}
</div>
</div>
</div>
@@ -76,12 +91,13 @@
<div
class="remaining-label"
>
{{ activeTab === BudgetCategory.Expense ? '余额' : '差额' }}
{{ activeTab === BudgetCategory.Expense ? (overallStats.year.current > overallStats.year.limit ? '超支' : '余额') : '差额' }}
</div>
<div
class="remaining-value"
:style="{ color: activeTab === BudgetCategory.Expense && overallStats.year.current > overallStats.year.limit ? 'var(--van-danger-color)' : '' }"
>
¥{{ formatMoney(Math.max(0, overallStats.year.limit - overallStats.year.current)) }}
¥{{ formatMoney(Math.abs(overallStats.year.limit - overallStats.year.current)) }}
</div>
</div>
</div>
@@ -247,20 +263,30 @@ const updateSingleGauge = (chart, data, isExpense) => {
// 展示逻辑：支出显示剩余，收入显示已积累
let displayRate
if (isExpense) {
// 支出：显示剩余容量 (100% - 已消耗%)，随支出增大逐渐消耗
// 支出：显示剩余容量 (100% - 已消耗%)，随支出增大逐渐消耗；超支时显示超出部分
displayRate = Math.max(0, 100 - rate)
// 如果超支(rate > 100)，显示超支部分（例如110% -> 显示10%超支）
if (rate > 100) {
displayRate = rate - 100
}
} else {
// 收入：显示已积累 (%)，随收入增多逐渐增多
displayRate = Math.min(100, rate)
// 收入：显示已积累 (%)，随收入增多逐渐增多，可以超过100%
displayRate = rate
}
// 颜色逻辑：支出从绿色消耗到红色，收入从红色积累到绿色
let color
if (isExpense) {
// 支出：满格绿色，随消耗逐渐变红 (根据剩余容量)
if (displayRate <= 30) { color = getCssVar('--chart-danger') } // 红色
else if (displayRate <= 65) { color = getCssVar('--chart-warning') } // 橙色
else { color = getCssVar('--chart-success') } // 绿色
if (rate > 100) {
color = getCssVar('--chart-danger') // 超支显示红色
} else if (displayRate <= 30) {
color = getCssVar('--chart-danger') // 红色（剩余很少）
} else if (displayRate <= 65) {
color = getCssVar('--chart-warning') // 橙色
} else {
color = getCssVar('--chart-success') // 绿色（剩余充足）
}
} else {
// 收入：空红色，随积累逐渐变绿 (根据已积累)
if (displayRate <= 30) { color = getCssVar('--chart-danger') } // 红色
@@ -275,7 +301,7 @@ const updateSingleGauge = (chart, data, isExpense) => {
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
max: isExpense && rate > 100 ? 50 : 100, // 超支时显示0-50%范围（实际代表0-150%）
splitNumber: 5,
radius: '120%', // 放大一点以适应小卡片
center: ['50%', '70%'],
@@ -570,15 +596,15 @@ const updateBurndownChart = () => {
if (isExpense) {
// 支出：燃尽图（向下走）
// 理想燃尽：每天均匀消耗
const idealRemaining = Math.max(0, totalBudget * (1 - i / daysInMonth))
const idealRemaining = totalBudget * (1 - i / daysInMonth)
idealBurndown.push(Math.round(idealRemaining))
// 实际燃尽：根据当前日期显示
// 实际燃尽：根据当前日期显示，允许负值以表示超支
if (trend.length > 0) {
// 后端返回了趋势数据
const dayValue = trend[i - 1]
if (dayValue !== undefined && dayValue !== null) {
const actualRemaining = Math.max(0, totalBudget - dayValue)
const actualRemaining = totalBudget - dayValue
actualBurndown.push(Math.round(actualRemaining))
} else {
actualBurndown.push(null)
@@ -586,7 +612,8 @@ const updateBurndownChart = () => {
} else {
// 后端没有趋势数据， fallback 到线性估算
if (i <= currentDay && totalBudget > 0) {
const actualRemaining = Math.max(0, totalBudget - (currentExpense * i / currentDay))
// 允许显示负值以表示超支
const actualRemaining = totalBudget - (currentExpense * i / currentDay)
actualBurndown.push(Math.round(actualRemaining))
} else {
actualBurndown.push(null)
@@ -762,14 +789,14 @@ const updateYearBurndownChart = () => {
if (isExpense) {
// 支出：燃尽图（向下走）
// 理想燃尽：每月均匀消耗
const idealRemaining = Math.max(0, totalBudget * (1 - (i + 1) / 12))
const idealRemaining = totalBudget * (1 - (i + 1) / 12)
idealBurndown.push(Math.round(idealRemaining))
// 实际燃尽：根据日期显示
// 实际燃尽：根据日期显示，允许负值以表示超支
if (trend.length > 0) {
const monthValue = trend[i]
if (monthValue !== undefined && monthValue !== null) {
const actualRemaining = Math.max(0, totalBudget - monthValue)
const actualRemaining = totalBudget - monthValue
actualBurndown.push(Math.round(actualRemaining))
} else {
actualBurndown.push(null)
@@ -778,7 +805,7 @@ const updateYearBurndownChart = () => {
// Fallback: 如果是今年且月份未开始，或者去年，做线性统计
const isFuture = year > currentYear || (year === currentYear && i > currentMonth)
if (!isFuture && totalBudget > 0) {
const actualRemaining = Math.max(0, totalBudget - (currentExpense * yearProgress))
const actualRemaining = totalBudget - (currentExpense * yearProgress)
actualBurndown.push(Math.round(actualRemaining))
} else {
actualBurndown.push(null)