fix: 账户总览及自测问题修复。

This commit is contained in:
tianyongbao
2024-05-06 16:40:02 +08:00
parent e6bd798bc8
commit e959759b50
6 changed files with 349 additions and 113 deletions

View File

@@ -65,7 +65,7 @@
</div>
</div>
<div class="main-con" style="height: calc(100% - 1.45rem)">
<div class="summary-con">
<div class="summary-con" style="height: 115px">
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
@@ -104,9 +104,9 @@
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">支出笔数</div>
<div class="title">收入笔数</div>
<div>
<span class="num">{{ account.expensesCount }}</span> <span class="unit"></span>
<span class="num">{{ account.incomeCount }}</span> <span class="unit"></span>
</div>
</div>
</div>
@@ -115,14 +115,71 @@
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">收入笔数</div>
<div class="title">支出笔数</div>
<div>
<span class="num">{{ account.incomeCount }}</span> <span class="unit"></span>
<span class="num">{{ account.expensesCount }}</span> <span class="unit"></span>
</div>
</div>
</div>
</div>
<div class="title-con">
<div class="summary-con" style="height: 115px">
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">POS刷卡支出</div>
<div>
<span class="num">{{ account.posExpenses }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">真实消费支出</div>
<div>
<span class="num">{{ account.realExpenses }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">POS刷卡笔数</div>
<div>
<span class="num">{{ account.posExpensesCount }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">真实消费支出笔数</div>
<div>
<span class="num">{{ account.realExpensesCount }}</span> <span class="unit"></span>
</div>
</div>
</div>
<div class="right-con">
<div class="img">
<img src="@/assets/images/average.png" alt="" />
</div>
<div class="item-wrap">
<div class="title">其他支出笔数</div>
<div>
<span class="num">{{ account.otherExpensesCount }}</span> <span class="unit"></span>
</div>
</div>
</div>
</div>
<div class="title-con" style="margin-top: 18px">
<div class="title">信用卡收支统计</div>
<div class="operate-btn-con">
<el-radio-group v-model="radioVal" @change="handleRadioChange">
@@ -133,9 +190,9 @@
</div>
</div>
<div class="content-con">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="account.tableAccountsList" height="calc(100% - 170px)">
<div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 225px); margin-top: -10px"></div>
<div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 225px); margin-top: -10px"></div>
<el-table v-show="radioVal === '表格'" v-loading="loading" :data="account.tableAccountsList" height="calc(100% - 245px)">
<el-table-column label="序号" width="50" type="index" align="center">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
@@ -267,6 +324,11 @@ const account = ref({
expenses: '',
incomeCount: '',
expensesCount: '',
posExpensesCount: '',
posExpenses: '',
realExpenses: '',
realExpensesCount: '',
otherExpensesCount: '',
acccountsList: []
})
const chartData = ref({