543 lines
15 KiB
Plaintext
543 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: 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;
|
|
|
|
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>
|
|
|