qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 图标功能优化。

Browse Source
This commit is contained in:
tianyongbao
2026-03-06 00:31:49 +08:00
parent afc67ab4da
commit 1b93c2df12
1 changed files with 161 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
src/pages/statistic/bigScreen/index.vue
View File

@@ -221,6 +221,7 @@
<!-- 未来3个月贷款还款计划 -->
<view class="section" v-if="lendRepaymentData.length > 0">
<view class="section-title">未来3个月贷款还款计划</view>
<view class="chart-stat" style="color: #ef4444;">待还总计: {{ lendRepaymentTotal.toFixed(2) }}元</view>
<view class="chart-container">
<qiun-data-charts type="area" :opts="lendRepaymentChartOpts" :chartData="lendRepaymentChartData" />
</view>
@@ -229,6 +230,7 @@
<!-- 近一周/近一月日常支出 -->
<view class="section">
<view class="section-title">{{ expenseActiveTab === 'week' ? '近7天' : '近30天' }}日常支出</view>
<view class="chart-stat" style="color: #f59e0b;">支出总计: {{ currentExpenseTotal.toFixed(2) }}元</view>
<view class="tab-buttons">
<view
class="tab-btn"
@@ -251,6 +253,7 @@
<!-- 近一周/近一月投资收益 -->
<view class="section">
<view class="section-title">{{ investActiveTab === 'week' ? '近7天' : '近30天' }}投资收益</view>
<view class="chart-stat" :style="{ color: currentInvestTotal >= 0 ? '#10b981' : '#ef4444' }">收益总计: {{ currentInvestTotal >= 0 ? '+' : '' }}{{ currentInvestTotal.toFixed(2) }}元</view>
<view class="tab-buttons">
<view
class="tab-btn"
@@ -273,6 +276,7 @@
<!-- 近一周/近一月账户收支统计 -->
<view class="section">
<view class="section-title">{{ balanceActiveTab === 'week' ? '近7天' : '近30天' }}账户收支统计</view>
<view class="chart-stat" :style="{ color: balanceTotal >= 0 ? '#10b981' : '#ef4444' }">收支差额: {{ balanceTotal >= 0 ? '+' : '' }}{{ balanceTotal.toFixed(2) }}元</view>
<view class="tab-buttons">
<view
class="tab-btn"
@@ -292,9 +296,10 @@
</view>
</view>
<!-- 近一年信用卡账单统计 -->
<!-- 近一年信用卡账单统计 -->
<view class="section" v-if="creditBillData.length > 0">
<view class="section-title">近一年信用卡账单统计</view>
<view class="chart-stat" style="color: #f59e0b;">累计账单: {{ creditBillTotal.toFixed(2) }}元</view>
<view class="chart-container">
<qiun-data-charts type="area" :opts="creditBillChartOpts" :chartData="creditBillChartData" />
</view>
@@ -303,6 +308,7 @@
<!-- 近两年储蓄卡开卡统计 -->
<view class="section" v-if="openCardData.length > 0">
<view class="section-title">近两年储蓄卡开卡统计</view>
<view class="chart-stat" style="color: #10b981;">累计开卡: {{ openCardTotal }}张</view>
<view class="chart-container">
<qiun-data-charts type="area" :opts="openCardChartOpts" :chartData="openCardChartData" />
</view>
@@ -310,6 +316,7 @@
<!-- 近15天净资产趋势 -->
<view class="section">
<view class="section-title">近15天净资产趋势</view>
<view class="chart-stat" style="color: #1890FF;">当前净资产: {{ netAssetLatest.toFixed(2) }}元</view>
<view class="chart-container">
<qiun-data-charts type="area" :opts="trendChartOpts" :chartData="trendChartData" />
</view>
@@ -317,6 +324,7 @@
<!-- 近2个月POS机刷卡统计 -->
<view class="section" v-if="posCardData.length > 0">
<view class="section-title">近2个月POS机刷卡统计</view>
<view class="chart-stat" style="color: #f59e0b;">累计刷卡: {{ posCardTotal.toFixed(2) }}元</view>
<view class="chart-container">
<qiun-data-charts type="area" :opts="posCardChartOpts" :chartData="posCardChartData" />
</view>
@@ -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);