422 lines
12 KiB
Vue
422 lines
12 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 加载状态 -->
|
||
<view v-if="loading" class="loading-view">
|
||
<uni-loading-icon size="24" color="#007aff"></uni-loading-icon>
|
||
<text class="loading-text">加载中...</text>
|
||
</view>
|
||
|
||
<!-- 内容区域（加载完成后显示） -->
|
||
<view v-else>
|
||
<!-- 月份选择 -->
|
||
<view class="date-picker-container">
|
||
<picker mode="date" @change="onDateChange" fields="month" :value="currentDate" class="date-picker">
|
||
<view class="picker-view">
|
||
<text>{{ formattedDate }}</text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<fad-collapse title="指标汇总">
|
||
<SummaryCardsVue :cardsData="cardData" />
|
||
</fad-collapse>
|
||
|
||
<fad-collapse title="月度收支">
|
||
<template #extra>
|
||
<view @click.stop>
|
||
<uni-data-checkbox @click.stop mode="tag" v-model="chartType"
|
||
:localdata="[{ value: 'line', text: '折线图' }, { value: 'column', text: '柱状图' }]" />
|
||
</view>
|
||
</template>
|
||
<BarVue :chart-data="barChartData" v-if="chartType == 'column'"></BarVue>
|
||
<LineVue :chart-data="barChartData" v-else></LineVue>
|
||
</fad-collapse>
|
||
|
||
<!-- <fad-collapse title="近六月趋势">
|
||
|
||
</fad-collapse> -->
|
||
|
||
<fad-collapse title="项目支出占比">
|
||
<PieVue :project-list="projectList"></PieVue>
|
||
</fad-collapse>
|
||
|
||
<fad-collapse title="明细表格">
|
||
<TableVue :table-data="costList" @row="showCostDetail"></TableVue>
|
||
<view v-if="tableTotal > 0" class="simple-pagination">
|
||
<!-- 上一页按钮（当前页=1时禁用） -->
|
||
<button class="page-btn" :disabled="tableQueryParams.pageNum === 1" @click="handlePrevPage">
|
||
上一页
|
||
</button>
|
||
|
||
<!-- 页数/总数显示 -->
|
||
<view class="page-info">
|
||
第{{ tableQueryParams.pageNum }}页 / 共{{ totalPages }}页
|
||
（总计{{ tableTotal }}条）
|
||
</view>
|
||
|
||
<!-- 下一页按钮（当前页=总页数时禁用） -->
|
||
<button class="page-btn" :disabled="tableQueryParams.pageNum === totalPages" @click="handleNextPage">
|
||
下一页
|
||
</button>
|
||
</view>
|
||
</fad-collapse>
|
||
</view>
|
||
|
||
<uni-popup ref="popup" type="top">
|
||
<DetailVue :detailData='costDetail'></DetailVue>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
barData,
|
||
findFinanceList2,
|
||
getCostDetailList,
|
||
getCostDetailById
|
||
} from '@/api/oa/finance/finance';
|
||
import {
|
||
getExchangeRate
|
||
} from '@/api/oa/finance/exchangeRate';
|
||
import {
|
||
projectData2
|
||
} from '@/api/oa/project';
|
||
|
||
import SummaryCardsVue from './components/SummaryCards.vue';
|
||
import PieVue from './components/Pie.vue'
|
||
import BarVue from './components/Bar.vue';
|
||
import LineVue from './components/Line.vue';
|
||
import TableVue from './components/Table.vue';
|
||
import DetailVue from './components/Detail.vue';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
loading: true,
|
||
currentDate: '',
|
||
cardData: [], // 改为数组，存储汇总卡片数据（核心）
|
||
monthlyDataMap: {}, // 初始化月度数据映射（用于图表/卡片）
|
||
currentList: [], // barData接口返回的列表
|
||
projectList: [], // projectData2接口返回的列表
|
||
financeList: [], // findFinanceList2接口返回的列表
|
||
queryFinanceParams: {}, // 接口请求参数（需确保已定义）
|
||
dateForProject: '', // 项目接口日期参数（需确保已定义）
|
||
barChartData: {},
|
||
exchangeRate: 7,
|
||
chartType: 'column',
|
||
costList: [],
|
||
tableQueryParams: {
|
||
pageSize: 10,
|
||
pageNum: 1,
|
||
},
|
||
tableTotal: 0,
|
||
costDetail: {}
|
||
};
|
||
},
|
||
computed: {
|
||
formattedDate() {
|
||
const [year, month] = this.currentDate.split('-');
|
||
return `${year}年${month}月`;
|
||
},
|
||
totalPages() {
|
||
if (this.tableTotal === 0) return 0; // 无数据时总页数为0
|
||
// 总页数 = 总条数 ÷ 每页条数，向上取整（如15条/10条=2页）
|
||
return Math.ceil(this.tableTotal / this.tableQueryParams.pageSize);
|
||
}
|
||
},
|
||
components: {
|
||
SummaryCardsVue,
|
||
PieVue,
|
||
BarVue,
|
||
LineVue,
|
||
TableVue,
|
||
DetailVue
|
||
},
|
||
onLoad() {
|
||
// 初始化日期为当前月份
|
||
const now = new Date();
|
||
const year = now.getFullYear();
|
||
const month = now.getMonth() + 1;
|
||
this.currentDate = `${year}-${month.toString().padStart(2, '0')}-01`;
|
||
this.loadAllData()
|
||
},
|
||
methods: {
|
||
async loadAllExchangeRates(months) {
|
||
for (const m of months) {
|
||
if (!this.monthlyDataMap[m]) this.monthlyDataMap[m] = {};
|
||
if (this.monthlyDataMap[m].exchangeRate) continue;
|
||
this.monthlyDataMap[m].exchangeRate = this.exchangeRate;
|
||
}
|
||
},
|
||
showCostDetail(row) {
|
||
getCostDetailById(row.projectId).then(response => {
|
||
this.costDetail = response.data;
|
||
this.$refs.popup.open()
|
||
})
|
||
},
|
||
/**
|
||
* 上一页按钮事件
|
||
*/
|
||
handlePrevPage() {
|
||
if (this.tableQueryParams.pageNum > 1) {
|
||
this.tableQueryParams.pageNum--; // 页码减1
|
||
this.loadTableData(); // 重新加载当前页数据
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 下一页按钮事件
|
||
*/
|
||
handleNextPage() {
|
||
// 只有当前页 < 总页数时，才能切换下一页
|
||
if (this.tableQueryParams.pageNum < this.totalPages) {
|
||
this.tableQueryParams.pageNum++; // 页码加1
|
||
this.loadTableData(); // 重新加载当前页数据
|
||
}
|
||
},
|
||
onDateChange(e) {
|
||
const value = e.detail.value;
|
||
this.currentDate = value + '-01';
|
||
this.tableQueryParams.pageNum = 1;
|
||
this.loadAllData()
|
||
},
|
||
loadTableData() {
|
||
getCostDetailList(this.tableQueryParams).then(res => {
|
||
this.costList = res.rows;
|
||
this.tableTotal = res.total;
|
||
})
|
||
},
|
||
async loadAllData() {
|
||
this.loading = true;
|
||
this.exchangeRate = await getExchangeRate()
|
||
|
||
const res = await barData(this.queryFinanceParams)
|
||
|
||
this.currentList = res.data;
|
||
const months = this.currentList.map(i => i.month);
|
||
await this.loadAllExchangeRates(months);
|
||
this.loadTableData()
|
||
Promise.all([
|
||
projectData2(this.currentDate),
|
||
findFinanceList2({
|
||
date: this.currentDate,
|
||
pageSize: 9999,
|
||
financeType: '',
|
||
pageNum: 1
|
||
})
|
||
])
|
||
.then(([projRes, finRes]) => {
|
||
this.projectList = projRes.data;
|
||
this.financeList = finRes.data;
|
||
this.computeSummaries();
|
||
})
|
||
.finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
computeSummaries() {
|
||
// 1. 获取当前选中月份（格式：YYYY-MM，从currentDate提取）
|
||
const currentMonth = this.currentDate.slice(0, 7);
|
||
|
||
// 2. 初始化月度数据映射（确保每个月份的基础结构存在）
|
||
this.currentList.forEach(item => {
|
||
const month = item.month;
|
||
this.monthlyDataMap[month] = {
|
||
outTotal: 0,
|
||
inCNY: 0,
|
||
inUSD: 0,
|
||
exchangeRate: this.monthlyDataMap[month]?.exchangeRate || 0 // 保留已有汇率
|
||
};
|
||
// 赋值支出总额（从barData接口获取）
|
||
this.monthlyDataMap[month].outTotal = item.totalOut;
|
||
});
|
||
|
||
// 3. 初始化统计变量（月度/项目收支）
|
||
const initStats = {
|
||
monthlyOutCNY: 0, // 月度总支出（人民币）
|
||
monthlyOutUSD: 0, // 月度总支出（美元）
|
||
monthlyInCNY: 0, // 月度总收入（人民币）
|
||
monthlyInUSD: 0, // 月度总收入（美元）
|
||
projectOutCNY: 0, // 项目支出（人民币）
|
||
projectOutUSD: 0, // 项目支出（美元）
|
||
projectInCNY: 0, // 项目收入（人民币）
|
||
projectInUSD: 0 // 项目收入（美元）
|
||
};
|
||
Object.assign(this, initStats);
|
||
|
||
// 4. 遍历财务明细，计算收支数据
|
||
this.financeList.forEach(finItem => {
|
||
const itemMonth = finItem.date.slice(0, 7); // 明细所属月份
|
||
const amount = Number(finItem.amount) || 0; // 金额（转数字，避免NaN）
|
||
const isOut = finItem.type === '0'; // 0=支出，1=收入（按业务定义）
|
||
const currency = finItem.currency === 'USD' ? 'USD' : 'CNY'; // 货币类型
|
||
|
||
// 4.1 更新月度收入数据（存入monthlyDataMap）
|
||
const monthData = this.monthlyDataMap[itemMonth];
|
||
if (monthData && !isOut) {
|
||
monthData[`in${currency}`] += amount;
|
||
}
|
||
|
||
// 4.2 计算「当前选中月份」的统计数据
|
||
if (itemMonth === currentMonth) {
|
||
if (isOut) {
|
||
// 支出：更新月度总支出 + 项目支出（有projectId才统计项目）
|
||
this[`monthlyOut${currency}`] += amount;
|
||
if (finItem.projectId) {
|
||
this[`projectOut${currency}`] += amount;
|
||
}
|
||
} else {
|
||
// 收入：更新月度总收入 + 项目收入（有projectId才统计项目）
|
||
this[`monthlyIn${currency}`] += amount;
|
||
if (finItem.projectId) {
|
||
this[`projectIn${currency}`] += amount;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
// 5. 构建汇总卡片数据（核心：适配SummaryCards组件）
|
||
console.log(this.monthlyDataMap, '月度数据')
|
||
const categories = Object.keys(this.monthlyDataMap);
|
||
console.log('分类', categories)
|
||
const dataList =
|
||
this.barChartData = {
|
||
categories,
|
||
series: [{
|
||
name: '支出',
|
||
data: Object.values(this.monthlyDataMap).map(item => item.outTotal)
|
||
},
|
||
{
|
||
name: '收入(USD)',
|
||
data: Object.values(this.monthlyDataMap).map(item => item.inUSD)
|
||
},
|
||
{
|
||
name: '支出(CNY)',
|
||
data: Object.values(this.monthlyDataMap).map(item => item.inCNY)
|
||
}
|
||
]
|
||
}
|
||
console.log(this.barChartData)
|
||
this.cardData = [{
|
||
title: '月度总支出',
|
||
valueCNY: Number(this.monthlyOutCNY.toFixed(2)), // 保留2位小数，转数字
|
||
valueUSD: Number(this.monthlyOutUSD.toFixed(2))
|
||
},
|
||
{
|
||
title: '月度总收入',
|
||
valueCNY: Number(this.monthlyInCNY.toFixed(2)),
|
||
valueUSD: Number(this.monthlyInUSD.toFixed(2))
|
||
},
|
||
{
|
||
title: '项目支出',
|
||
valueCNY: Number(this.projectOutCNY.toFixed(2)),
|
||
valueUSD: Number(this.projectOutUSD.toFixed(2))
|
||
},
|
||
{
|
||
title: '项目收入',
|
||
valueCNY: Number(this.projectInCNY.toFixed(2)),
|
||
valueUSD: Number(this.projectInUSD.toFixed(2))
|
||
}
|
||
];
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 简化版分页容器：居中显示，上下留间距 */
|
||
.simple-pagination {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 20rpx; /* 按钮与文字之间的间距 */
|
||
margin-top: 24rpx;
|
||
margin-bottom: 16rpx;
|
||
padding: 8rpx 0;
|
||
}
|
||
|
||
/* 分页按钮：统一样式，禁用时灰色 */
|
||
.page-btn {
|
||
padding: 8rpx 24rpx;
|
||
background-color: #007aff;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 8rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
/* 按钮禁用状态：灰色背景，无法点击 */
|
||
.page-btn:disabled {
|
||
background-color: #e5e5e5;
|
||
color: #999;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* 页数信息：灰色文字，适中大小 */
|
||
.page-info {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.container {
|
||
padding: 16rpx;
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 日期选择器在折叠卡片额外内容中的样式 */
|
||
.picker-view {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #666;
|
||
font-size: 24rpx;
|
||
padding: 4rpx 8rpx;
|
||
}
|
||
|
||
.icon-margin {
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
/* 图表样式调整 */
|
||
.chart-item {
|
||
width: 100%;
|
||
}
|
||
|
||
/* 加载状态样式 */
|
||
.loading-view {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 100rpx 0;
|
||
}
|
||
|
||
.loading-text {
|
||
margin-top: 20rpx;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
/* 折叠卡片间距 */
|
||
.fad-collapse {
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.date-picker-container {
|
||
background-color: #fff;
|
||
border-radius: 8rpx;
|
||
padding: 16rpx;
|
||
margin-bottom: 10rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.date-picker {
|
||
width: 100%;
|
||
}
|
||
|
||
.picker-view {
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: #007aff;
|
||
padding: 8rpx 0;
|
||
}
|
||
</style> |