From 1b93c2df128d1a6bffeea07a818203e16b95f95d Mon Sep 17 00:00:00 2001 From: tianyongbao Date: Fri, 6 Mar 2026 00:31:49 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9B=BE=E6=A0=87=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/statistic/bigScreen/index.vue | 192 ++++++++++++++++++++---- 1 file changed, 161 insertions(+), 31 deletions(-) diff --git a/src/pages/statistic/bigScreen/index.vue b/src/pages/statistic/bigScreen/index.vue index c989cf2..1eacfb2 100644 --- a/src/pages/statistic/bigScreen/index.vue +++ b/src/pages/statistic/bigScreen/index.vue @@ -221,6 +221,7 @@ 未来3个月贷款还款计划 + 待还总计: {{ lendRepaymentTotal.toFixed(2) }}元 @@ -229,6 +230,7 @@ {{ expenseActiveTab === 'week' ? '近7天' : '近30天' }}日常支出 + 支出总计: {{ currentExpenseTotal.toFixed(2) }}元 {{ investActiveTab === 'week' ? '近7天' : '近30天' }}投资收益 + 收益总计: {{ currentInvestTotal >= 0 ? '+' : '' }}{{ currentInvestTotal.toFixed(2) }}元 {{ balanceActiveTab === 'week' ? '近7天' : '近30天' }}账户收支统计 + 收支差额: {{ balanceTotal >= 0 ? '+' : '' }}{{ balanceTotal.toFixed(2) }}元 - + 近一年信用卡账单统计 + 累计账单: {{ creditBillTotal.toFixed(2) }}元 @@ -303,6 +308,7 @@ 近两年储蓄卡开卡统计 + 累计开卡: {{ openCardTotal }}张 @@ -310,6 +316,7 @@ 近15天净资产趋势 + 当前净资产: {{ netAssetLatest.toFixed(2) }}元 @@ -317,6 +324,7 @@ 近2个月POS机刷卡统计 + 累计刷卡: {{ posCardTotal.toFixed(2) }}元 @@ -462,6 +470,66 @@ const netAsset = computed(() => { return totalAsset.value - totalDebt.value }) +// 图表统计数据计算 +const creditBillTotal = computed(() => { + if (!creditBillData.value || creditBillData.value.length === 0) return 0 + return creditBillData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0) +}) + +const openCardTotal = computed(() => { + if (!openCardData.value || openCardData.value.length === 0) return 0 + return openCardData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0) +}) + +const posCardTotal = computed(() => { + if (!posCardData.value || posCardData.value.length === 0) return 0 + return posCardData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0) +}) + +const lendRepaymentTotal = computed(() => { + if (!lendRepaymentData.value || lendRepaymentData.value.length === 0) return 0 + return lendRepaymentData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0) +}) + +const netAssetLatest = computed(() => { + if (!netAssetTrendData.value || netAssetTrendData.value.length === 0) return 0 + return Number(netAssetTrendData.value[netAssetTrendData.value.length - 1]?.totalBalance) || 0 +}) + +const weeklyExpenseTotal = computed(() => { + if (!weeklyExpenseData.value || weeklyExpenseData.value.length === 0) return 0 + return weeklyExpenseData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0) +}) + +const monthlyExpenseTotal = computed(() => { + if (!monthlyExpenseData.value || monthlyExpenseData.value.length === 0) return 0 + return monthlyExpenseData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0) +}) + +const currentExpenseTotal = computed(() => { + return expenseActiveTab.value === 'week' ? weeklyExpenseTotal.value : monthlyExpenseTotal.value +}) + +const weeklyInvestTotal = computed(() => { + if (!weeklyInvestIncomeData.value || weeklyInvestIncomeData.value.length === 0) return 0 + return weeklyInvestIncomeData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0) +}) + +const monthlyInvestTotal = computed(() => { + if (!monthlyInvestIncomeData.value || monthlyInvestIncomeData.value.length === 0) return 0 + return monthlyInvestIncomeData.value.reduce((sum, item) => sum + (Number(item.value) || 0), 0) +}) + +const currentInvestTotal = computed(() => { + return investActiveTab.value === 'week' ? weeklyInvestTotal.value : monthlyInvestTotal.value +}) + +const balanceTotal = computed(() => { + const data = balanceActiveTab.value === 'week' ? weeklyBalanceData.value : monthlyBalanceData.value + if (!data || data.length === 0) return 0 + return data.reduce((sum, item) => sum + (Number(item.value) || 0), 0) +}) + // 资产结构图表配置 const assetChartData = computed(() => { const data = [ @@ -493,13 +561,14 @@ const assetChartOpts = computed(() => ({ itemGap: 8 }, title: { - name: `资产总计`, - fontSize: 10, - color: '#666666' + name: '资产总计', + fontSize: 12, + color: '#aaaaaa' + }, subtitle: { - name: `${totalAsset.value.toFixed(2)}元`, - fontSize: 8, + name: totalAsset.value > 0 ? totalAsset.value.toFixed(2) : '', + fontSize: 13, color: '#10b981' }, extra: { @@ -515,8 +584,6 @@ const assetChartOpts = computed(() => ({ } } })) - -// 负债结构图表配置 const debtChartData = computed(() => { const data = [ { name: '未结清贷款', value: Number(unClearedOnlineDebt.value) || 0 }, @@ -543,13 +610,14 @@ const debtChartOpts = computed(() => ({ itemGap: 8 }, title: { - name: `负债总计`, - fontSize: 10, - color: '#666666' + name: '负债总计', + fontSize: 12, + color: '#aaaaaa' }, subtitle: { - name: `${totalDebt.value.toFixed(2)}元`, - fontSize: 8, + + name: totalDebt.value > 0 ? totalDebt.value.toFixed(2) : '', + fontSize: 13, color: '#ef4444' }, extra: { @@ -565,8 +633,6 @@ const debtChartOpts = computed(() => ({ } } })) - -// 雷达图配置 const radarChartData = computed(() => { const safeTotalAsset = totalAsset.value || 1 const safeCreditLimit = Number(creditLimit.value) || 1 @@ -633,7 +699,7 @@ const trendChartData = computed(() => { } }) -const trendChartOpts = ref({ +const trendChartOpts = computed(() => ({ color: ['#1890FF'], padding: [15, 15, 0, 15], enableScroll: false, @@ -641,6 +707,13 @@ const trendChartOpts = ref({ show: false }, dataLabel: false, + title: { + name: `净资产趋势当前: ${netAssetLatest.value.toFixed(2)}元`, + fontSize: 10, + color: '#1890FF', + offsetX: 0, + offsetY: 0 + }, xAxis: { disableGrid: true, fontSize: 9, @@ -661,7 +734,7 @@ const trendChartOpts = ref({ gradient: true } } -}) +})) // 支出趋势图配置 const expenseChartData = computed(() => { @@ -678,7 +751,7 @@ const expenseChartData = computed(() => { } }) -const expenseChartOpts = ref({ +const expenseChartOpts = computed(() => ({ color: ['#f59e0b'], padding: [15, 15, 0, 15], enableScroll: false, @@ -686,6 +759,13 @@ const expenseChartOpts = ref({ show: false }, dataLabel: false, + title: { + name: `${expenseActiveTab.value === 'week' ? '近一周' : '近一月'}支出总计: ${currentExpenseTotal.value.toFixed(2)}元`, + fontSize: 10, + color: '#f59e0b', + offsetX: 0, + offsetY: 0 + }, xAxis: { disableGrid: true, fontSize: 9, @@ -706,7 +786,7 @@ const expenseChartOpts = ref({ gradient: true } } -}) +})) // 投资收益图配置 const investChartData = computed(() => { @@ -724,7 +804,7 @@ const investChartData = computed(() => { } }) -const investChartOpts = ref({ +const investChartOpts = computed(() => ({ color: ['#10b981'], padding: [15, 15, 0, 15], enableScroll: false, @@ -732,6 +812,13 @@ const investChartOpts = ref({ show: false }, dataLabel: false, + title: { + name: `${investActiveTab.value === 'week' ? '近一周' : '近一月'}投资收益: ${currentInvestTotal.value >= 0 ? '+' : ''}${currentInvestTotal.value.toFixed(2)}元`, + fontSize: 10, + color: currentInvestTotal.value >= 0 ? '#10b981' : '#ef4444', + offsetX: 0, + offsetY: 0 + }, xAxis: { disableGrid: true, fontSize: 9, @@ -752,7 +839,7 @@ const investChartOpts = ref({ gradient: true } } -}) +})) // 贷款还款计划图配置 const lendRepaymentChartData = computed(() => { @@ -766,7 +853,7 @@ const lendRepaymentChartData = computed(() => { } }) -const lendRepaymentChartOpts = ref({ +const lendRepaymentChartOpts = computed(() => ({ color: ['#4181c9'], padding: [15, 15, 0, 15], enableScroll: false, @@ -774,6 +861,13 @@ const lendRepaymentChartOpts = ref({ show: false }, dataLabel: false, + title: { + name: `贷款待还总计: ${lendRepaymentTotal.value.toFixed(2)}元`, + fontSize: 10, + color: '#ef4444', + offsetX: 0, + offsetY: 0 + }, xAxis: { disableGrid: true, fontSize: 9, @@ -794,7 +888,7 @@ const lendRepaymentChartOpts = ref({ gradient: true } } -}) +})) // 账户收支图配置 const balanceChartData = computed(() => { @@ -811,7 +905,7 @@ const balanceChartData = computed(() => { } }) -const balanceChartOpts = ref({ +const balanceChartOpts = computed(() => ({ color: ['#4181c9'], padding: [15, 15, 0, 15], enableScroll: false, @@ -819,6 +913,13 @@ const balanceChartOpts = ref({ show: false }, dataLabel: false, + title: { + name: `${balanceActiveTab.value === 'week' ? '近一周' : '近一月'}收支差额: ${balanceTotal.value >= 0 ? '+' : ''}${balanceTotal.value.toFixed(2)}元`, + fontSize: 10, + color: balanceTotal.value >= 0 ? '#10b981' : '#ef4444', + offsetX: 0, + offsetY: 0 + }, xAxis: { disableGrid: true, fontSize: 9, @@ -839,7 +940,7 @@ const balanceChartOpts = ref({ gradient: true } } -}) +})) // 信用卡账单图配置 const creditBillChartData = computed(() => { @@ -853,7 +954,7 @@ const creditBillChartData = computed(() => { } }) -const creditBillChartOpts = ref({ +const creditBillChartOpts = computed(() => ({ color: ['#4181c9'], padding: [15, 15, 0, 15], enableScroll: false, @@ -861,6 +962,13 @@ const creditBillChartOpts = ref({ show: false }, dataLabel: false, + title: { + name: `信用卡账单累计: ${creditBillTotal.value.toFixed(2)}元`, + fontSize: 10, + color: '#f59e0b', + offsetX: 0, + offsetY: 0 + }, xAxis: { disableGrid: true, fontSize: 9, @@ -881,7 +989,7 @@ const creditBillChartOpts = ref({ gradient: true } } -}) +})) // 储蓄卡开卡图配置 const openCardChartData = computed(() => { @@ -898,7 +1006,7 @@ const openCardChartData = computed(() => { } }) -const openCardChartOpts = ref({ +const openCardChartOpts = computed(() => ({ color: ['#10b981'], padding: [15, 15, 0, 15], enableScroll: false, @@ -906,6 +1014,13 @@ const openCardChartOpts = ref({ show: false }, dataLabel: false, + title: { + name: `近两年开卡累计: ${openCardTotal.value}张`, + fontSize: 10, + color: '#10b981', + offsetX: 0, + offsetY: 0 + }, xAxis: { disableGrid: true, fontSize: 9, @@ -926,7 +1041,7 @@ const openCardChartOpts = ref({ gradient: true } } -}) +})) // POS机刷卡图配置 const posCardChartData = computed(() => { @@ -940,7 +1055,7 @@ const posCardChartData = computed(() => { } }) -const posCardChartOpts = ref({ +const posCardChartOpts = computed(() => ({ color: ['#f59e0b'], padding: [15, 15, 0, 15], enableScroll: false, @@ -948,6 +1063,13 @@ const posCardChartOpts = ref({ show: false }, dataLabel: false, + title: { + name: `近2个月POS刷卡累计: ${posCardTotal.value.toFixed(2)}元`, + fontSize: 10, + color: '#f59e0b', + offsetX: 0, + offsetY: 0 + }, xAxis: { disableGrid: true, fontSize: 9, @@ -968,7 +1090,7 @@ const posCardChartOpts = ref({ gradient: true } } -}) +})) // 返回上一页 const goBack = () => { @@ -1420,6 +1542,14 @@ onMounted(() => { } } +.chart-stat { + font-size: 24rpx; + font-weight: 600; + margin-bottom: 16rpx; + padding-left: 16rpx; + font-family: 'DIN', ui-monospace, monospace; +} + .data-grid { display: grid; grid-template-columns: repeat(2, 1fr);