542 lines
15 KiB
Plaintext
542 lines
15 KiB
Plaintext
<template>
|
|
<view class="finance-balance-stats">
|
|
<!-- 顶部数据统计卡片 (3列布局) -->
|
|
<view class="stats-grid">
|
|
<view class="stat-card border-shadow">
|
|
<view class="stat-icon-circle bg-blue">
|
|
<text class="icon-white">💰</text>
|
|
</view>
|
|
<view class="stat-content">
|
|
<text class="stat-value">1447117274.55</text>
|
|
<text class="stat-label">当前余额</text>
|
|
</view>
|
|
</view>
|
|
<view class="stat-card border-shadow">
|
|
<view class="stat-icon-circle bg-orange">
|
|
<text class="icon-white">🏦</text>
|
|
</view>
|
|
<view class="stat-content">
|
|
<text class="stat-value">1602611838.49</text>
|
|
<text class="stat-label">累计余额</text>
|
|
</view>
|
|
</view>
|
|
<view class="stat-card border-shadow">
|
|
<view class="stat-icon-circle bg-green">
|
|
<text class="icon-white">💳</text>
|
|
</view>
|
|
<view class="stat-content">
|
|
<text class="stat-value">155494563.94</text>
|
|
<text class="stat-label">累计消耗余额</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 时间筛选区 -->
|
|
<view class="filter-bar border-shadow">
|
|
<view class="filter-item">
|
|
<text class="filter-label">时间选择:</text>
|
|
<view class="date-picker-wrap">
|
|
<text class="calendar-icon">📅</text>
|
|
<text class="date-range">2026/01/05 - 2026/02/03</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 趋势图表区 (CRMEB 1:1) -->
|
|
<view class="chart-box border-shadow">
|
|
<view class="chart-header">
|
|
<text class="chart-title">余额使用趋势</text>
|
|
<view class="chart-legend">
|
|
<view class="legend-item">
|
|
<view class="dot blue-dot"></view>
|
|
<text class="legend-txt">余额积累</text>
|
|
</view>
|
|
<view class="legend-item">
|
|
<view class="dot green-dot"></view>
|
|
<text class="legend-txt">余额消耗</text>
|
|
</view>
|
|
</view>
|
|
<view class="chart-ops">
|
|
<text class="op-icon">📥</text>
|
|
</view>
|
|
</view>
|
|
<view class="main-chart-wrap">
|
|
<EChartsView v-if="trendOption != null" :option="trendOption" class="main-trend-chart" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部双列分析 -->
|
|
<view class="bottom-analysis">
|
|
<view class="analysis-box border-shadow">
|
|
<view class="box-header">
|
|
<text class="box-title">余额来源分析</text>
|
|
<view class="btn-toggle" @click="toggleSourceStyle">
|
|
<text class="toggle-txt">切换样式</text>
|
|
</view>
|
|
</view>
|
|
<view class="chart-container">
|
|
<!-- 样式 0: 图表 -->
|
|
<EChartsView v-if="sourceStyleMode == 0 && sourceOption != null" :option="sourceOption" class="pie-chart" />
|
|
|
|
<!-- 样式 1: 列表 -->
|
|
<view v-if="sourceStyleMode == 1" class="stats-table">
|
|
<view class="table-header">
|
|
<text class="th col-idx">序号</text>
|
|
<text class="th col-name">来源</text>
|
|
<text class="th col-amount">金额</text>
|
|
<text class="th col-percent">占比率</text>
|
|
</view>
|
|
<scroll-view class="table-body">
|
|
<view class="table-row" v-for="(item, index) in sourceData" :key="index">
|
|
<text class="td col-idx">{{ index + 1 }}</text>
|
|
<text class="td col-name">{{ item.name }}</text>
|
|
<text class="td col-amount">{{ item.value.toFixed(2) }}</text>
|
|
<view class="td col-percent">
|
|
<view class="progress-container">
|
|
<view class="progress-bar" :style="{ width: item.percent + '%' }"></view>
|
|
</view>
|
|
<text class="percent-txt">{{ item.percent.toFixed(2) }}%</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="analysis-box border-shadow">
|
|
<view class="box-header">
|
|
<text class="box-title">余额消耗</text>
|
|
<view class="btn-toggle" @click="toggleConsumptionStyle">
|
|
<text class="toggle-txt">切换样式</text>
|
|
</view>
|
|
</view>
|
|
<view class="chart-container">
|
|
<!-- 样式 0: 图表 -->
|
|
<EChartsView v-if="consumptionStyleMode == 0 && consumptionOption != null" :option="consumptionOption" class="pie-chart" />
|
|
|
|
<!-- 样式 1: 列表 -->
|
|
<view v-if="consumptionStyleMode == 1" class="stats-table">
|
|
<view class="table-header">
|
|
<text class="th col-idx">序号</text>
|
|
<text class="th col-name">来源</text>
|
|
<text class="th col-amount">金额</text>
|
|
<text class="th col-percent">占比率</text>
|
|
</view>
|
|
<scroll-view class="table-body">
|
|
<view class="table-row" v-for="(item, index) in consumptionDataList" :key="index">
|
|
<text class="td col-idx">{{ index + 1 }}</text>
|
|
<text class="td col-name">{{ item.name }}</text>
|
|
<text class="td col-amount">{{ item.value.toFixed(2) }}</text>
|
|
<view class="td col-percent">
|
|
<view class="progress-container">
|
|
<view class="progress-bar" :style="{ width: item.percent + '%' }"></view>
|
|
</view>
|
|
<text class="percent-txt">{{ item.percent.toFixed(2) }}%</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, onMounted } from 'vue'
|
|
import EChartsView from '@/uni_modules/charts/EChartsView.vue'
|
|
|
|
const trendOption = ref<any>(null)
|
|
const sourceOption = ref<any>(null)
|
|
const consumptionOption = ref<any>(null)
|
|
|
|
// 样式切换状态: 0=图表, 1=列表
|
|
const sourceStyleMode = ref(0)
|
|
const consumptionStyleMode = ref(0)
|
|
|
|
// 统计数据 (使用 ref 保证响应式)
|
|
const sourceData = ref([
|
|
{ value: 125000.00, name: '系统增加', percent: 40.00 },
|
|
{ value: 93750.00, name: '用户充值', percent: 30.00 },
|
|
{ value: 78125.00, name: '佣金提现', percent: 25.00 },
|
|
{ value: 62500.00, name: '抽奖赠送', percent: 20.00 },
|
|
{ value: 46875.00, name: '商品退款', percent: 15.00 }
|
|
])
|
|
|
|
const consumptionDataList = ref([
|
|
{ value: 435692.51, name: '购买商品', percent: 50.00 },
|
|
{ value: 8060.18, name: '购买会员', percent: 20.00 },
|
|
{ value: 0.00, name: '充值退款', percent: 15.00 },
|
|
{ value: 0.00, name: '系统减少', percent: 15.00 }
|
|
])
|
|
|
|
/**
|
|
* 转换 Plain Object 工具
|
|
*/
|
|
function toPlainObject(obj : any) : any {
|
|
if (obj == null) return null
|
|
if (typeof obj !== 'object') return obj
|
|
if (Array.isArray(obj)) {
|
|
return (obj as Array<any>).map((item : any) : any => toPlainObject(item))
|
|
}
|
|
const plain : Record<string, any> = {}
|
|
const keys = Object.keys(obj as Record<string, any>)
|
|
for (let i = 0; i < keys.length; i++) {
|
|
const key = keys[i]
|
|
if (key.startsWith('_') || key == 'toJSON') continue
|
|
const value = (obj as Record<string, any>)[key]
|
|
if (typeof value == 'function') continue
|
|
if (value != null && typeof value == 'object' && !Array.isArray(value)) {
|
|
plain[key] = toPlainObject(value)
|
|
} else {
|
|
plain[key] = value
|
|
}
|
|
}
|
|
return plain
|
|
}
|
|
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
initTrendChart()
|
|
initSourceChart()
|
|
initConsumptionChart()
|
|
}, 300)
|
|
})
|
|
|
|
function initTrendChart() {
|
|
const dates = ['01-05', '01-06', '01-07', '01-08', '01-09', '01-10', '01-11', '01-12', '01-13', '01-14', '01-15', '01-16', '01-17', '01-18', '01-19', '01-20', '01-21', '01-22', '01-23', '01-24', '01-25', '01-26', '01-27', '01-28', '01-29', '01-30', '01-31', '02-01', '02-02', '02-03']
|
|
const accumulationData = [2500000, 2900000, 1500000, 2400000, 1800000, 1300000, 500000, 2100000, 3000000, 2800000, 2300000, 2200000, 1500000, 1100000, 2300000, 2800000, 2600000, 2700000, 1800000, 1950000, 650000, 1600000, 1750000, 2400000, 2600000, 2000000, 1400000, 550000, 2100000, 550000]
|
|
const consumptionData = [10000, 20000, 15000, 120000, 50000, 20000, 10000, 30000, 40000, 35000, 60000, 25000, 30000, 45000, 55000, 110000, 60000, 50000, 40000, 35000, 85000, 45000, 120000, 50000, 45000, 40000, 35000, 55000, 65000, 45000]
|
|
|
|
const option = {
|
|
grid: { left: '3%', right: '4%', bottom: '5%', top: '5%', containLabel: true },
|
|
tooltip: { trigger: 'axis' },
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: dates,
|
|
axisLine: { lineStyle: { color: '#f0f0f0' } },
|
|
axisLabel: { color: '#999', interval: 4 }
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: { show: false },
|
|
splitLine: { lineStyle: { color: '#f5f5f5' } },
|
|
axisLabel: { color: '#999' }
|
|
},
|
|
series: [
|
|
{
|
|
name: '余额积累',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: accumulationData,
|
|
itemStyle: { color: '#1890ff' }
|
|
},
|
|
{
|
|
name: '余额消耗',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: consumptionData,
|
|
itemStyle: { color: '#52c41a' }
|
|
}
|
|
]
|
|
}
|
|
trendOption.value = toPlainObject(option)
|
|
}
|
|
|
|
function initSourceChart() {
|
|
const option = {
|
|
tooltip: { trigger: 'item', formatter: '{b}: {c}%' },
|
|
legend: { orient: 'vertical', right: '5%', top: 'center', itemWidth: 10, itemHeight: 10 },
|
|
color: ['#5b8ff9', '#5ad8a6', '#5d7092', '#f6bd16', '#e8684a'],
|
|
series: [
|
|
{
|
|
name: '余额来源',
|
|
type: 'pie',
|
|
radius: '70%',
|
|
center: ['40%', '50%'],
|
|
label: { show: true, fontSize: 11, formatter: '{b}\n{c}%' },
|
|
// 关键点：将图表数据映射到 percent 字段
|
|
data: sourceData.value.map(item => ({ value: item.percent, name: item.name }))
|
|
}
|
|
]
|
|
}
|
|
sourceOption.value = toPlainObject(option)
|
|
}
|
|
|
|
function initConsumptionChart() {
|
|
const option = {
|
|
tooltip: { trigger: 'item', formatter: '{b}: {c}%' },
|
|
legend: { orient: 'vertical', right: '5%', top: 'center', itemWidth: 10, itemHeight: 10 },
|
|
color: ['#5b8ff9', '#5ad8a6', '#5d7092', '#f6bd16'],
|
|
series: [
|
|
{
|
|
name: '余额消耗',
|
|
type: 'pie',
|
|
radius: '70%',
|
|
center: ['40%', '50%'],
|
|
label: { show: true, fontSize: 11, formatter: '{b}\n{c}%' },
|
|
// 关键点：将图表数据映射到 percent 字段
|
|
data: consumptionDataList.value.map(item => ({ value: item.percent, name: item.name }))
|
|
}
|
|
]
|
|
}
|
|
consumptionOption.value = toPlainObject(option)
|
|
}
|
|
|
|
function toggleSourceStyle() {
|
|
sourceStyleMode.value = sourceStyleMode.value === 0 ? 1 : 0
|
|
if (sourceStyleMode.value === 0) {
|
|
setTimeout(() => initSourceChart(), 50)
|
|
}
|
|
}
|
|
|
|
function toggleConsumptionStyle() {
|
|
consumptionStyleMode.value = consumptionStyleMode.value === 0 ? 1 : 0
|
|
if (consumptionStyleMode.value === 0) {
|
|
setTimeout(() => initConsumptionChart(), 50)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.finance-balance-stats {
|
|
padding: 0;
|
|
background-color: transparent;
|
|
min-height: auto;
|
|
}
|
|
|
|
.border-shadow {
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* 顶部卡片 */
|
|
.stats-grid {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stat-card {
|
|
flex: 1;
|
|
margin: 0 10px;
|
|
padding: 24px 30px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.stats-grid .stat-card:first-child { margin-left: 0; }
|
|
.stats-grid .stat-card:last-child { margin-right: 0; }
|
|
|
|
.stat-icon-circle {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.bg-blue { background-color: #40a9ff; }
|
|
.bg-orange { background-color: #ffa940; }
|
|
.bg-green { background-color: #73d13d; }
|
|
|
|
.icon-white { color: #fff; font-size: 24px; }
|
|
|
|
.stat-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 28px;
|
|
font-weight: 500;
|
|
color: #303133;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 14px;
|
|
color: #909399;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* 时间筛选区 */
|
|
.filter-bar {
|
|
padding: 16px 24px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.filter-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.filter-label {
|
|
font-size: 14px;
|
|
color: #606266;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.date-picker-wrap {
|
|
width: 320px;
|
|
height: 36px;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.calendar-icon { font-size: 14px; color: #c0c4cc; margin-right: 10px; }
|
|
.date-range { font-size: 14px; color: #606266; }
|
|
|
|
/* 趋势图表区 */
|
|
.chart-box {
|
|
padding: 24px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.chart-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.chart-title { font-size: 16px; font-weight: 600; color: #303133; margin-right: auto; }
|
|
|
|
.chart-legend {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.legend-item { display: flex; flex-direction: row; align-items: center; margin-left: 20px; }
|
|
.legend-txt { font-size: 13px; color: #666; }
|
|
.dot { width: 10px; height: 10px; border-radius: 5px; margin-right: 8px; }
|
|
.blue-dot { background-color: #1890ff; }
|
|
.green-dot { background-color: #52c41a; }
|
|
|
|
.chart-ops { margin-left: 20px; }
|
|
.op-icon { font-size: 20px; color: #909399; }
|
|
|
|
.main-chart-wrap {
|
|
height: 400px;
|
|
width: 100%;
|
|
}
|
|
|
|
.main-trend-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* 底部分析 */
|
|
.bottom-analysis {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 0 -10px 40px -10px;
|
|
}
|
|
|
|
.analysis-box {
|
|
flex: 1;
|
|
margin: 0 10px;
|
|
padding: 24px;
|
|
}
|
|
|
|
.box-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.box-title { font-size: 15px; font-weight: 600; color: #303133; }
|
|
|
|
.btn-toggle {
|
|
padding: 4px 12px;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 15px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toggle-txt { font-size: 12px; color: #606266; }
|
|
|
|
.chart-container {
|
|
height: 300px;
|
|
width: 100%;
|
|
}
|
|
|
|
.pie-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* 列表样式 */
|
|
.stats-table {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.table-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background-color: #e6f0ff;
|
|
padding: 12px 0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.th {
|
|
font-size: 13px;
|
|
color: #606266;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.table-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 15px 0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
align-items: center;
|
|
}
|
|
|
|
.td {
|
|
font-size: 13px;
|
|
color: #606266;
|
|
text-align: center;
|
|
}
|
|
|
|
.col-idx { width: 60px; }
|
|
.col-name { flex: 1; }
|
|
.col-amount { flex: 1.5; }
|
|
.col-percent { flex: 2; display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0 20px; }
|
|
|
|
.progress-container {
|
|
flex: 1;
|
|
height: 8px;
|
|
background-color: #f5f5f5;
|
|
border-radius: 4px;
|
|
margin-right: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 100%;
|
|
background-color: #1890ff;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.percent-txt {
|
|
width: 60px;
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
</style>
|