570 lines
15 KiB
Plaintext
570 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">{{ statsData.current_balance.toFixed(2) }}</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">{{ statsData.total_accumulation.toFixed(2) }}</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">{{ statsData.total_consumption.toFixed(2) }}</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'
|
|
import {
|
|
fetchAdminBalanceStats,
|
|
fetchAdminBalanceTrend,
|
|
fetchAdminBalanceDistribution
|
|
} from '@/services/admin/financeService.uts'
|
|
|
|
const trendOption = ref<any>(null)
|
|
const sourceOption = ref<any>(null)
|
|
const consumptionOption = ref<any>(null)
|
|
const loading = ref(false)
|
|
|
|
// 顶部汇总指标
|
|
const statsData = ref({
|
|
current_balance: 0,
|
|
total_accumulation: 0,
|
|
total_consumption: 0
|
|
})
|
|
|
|
// 样式切换状态: 0=图表, 1=列表
|
|
const sourceStyleMode = ref(0)
|
|
const consumptionStyleMode = ref(0)
|
|
|
|
// 统计数据列表 (用于展示样式1)
|
|
const sourceData = ref<any[]>([])
|
|
const consumptionDataList = ref<any[]>([])
|
|
|
|
/**
|
|
* 转换 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(() => {
|
|
loadAllData()
|
|
})
|
|
|
|
async function loadAllData() {
|
|
loading.value = true
|
|
const endTime = new Date().toISOString()
|
|
const startTime = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString() // 默认最近30天
|
|
|
|
try {
|
|
// 1. 加载汇总指标
|
|
const stats = await fetchAdminBalanceStats()
|
|
if (stats != null) {
|
|
statsData.value.current_balance = (stats as any).current_balance ?? 0
|
|
statsData.value.total_accumulation = (stats as any).total_accumulation ?? 0
|
|
statsData.value.total_consumption = (stats as any).total_consumption ?? 0
|
|
}
|
|
|
|
// 2. 加载趋势数据
|
|
const trendData = await fetchAdminBalanceTrend(startTime, endTime)
|
|
initTrendChart(trendData)
|
|
|
|
// 3. 加载分布数据 (来源与消耗)
|
|
const distRes = await fetchAdminBalanceDistribution(startTime, endTime)
|
|
if (distRes != null) {
|
|
sourceData.value = (distRes as any).income ?? []
|
|
consumptionDataList.value = (distRes as any).expense ?? []
|
|
initSourceChart()
|
|
initConsumptionChart()
|
|
}
|
|
} catch (e) {
|
|
uni.showToast({ title: '加载统计数据失败', icon: 'none' })
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function initTrendChart(data : any[]) {
|
|
const dates = data.map(item => item.date_group.substring(5))
|
|
const accumulationData = data.map(item => item.accumulation)
|
|
const consumptionData = data.map(item => item.consumption)
|
|
|
|
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}%' },
|
|
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}%' },
|
|
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: 20px;
|
|
background-color: #f5f7fa;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.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>
|