mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-15 15:37:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

add total expense/income amount in statistics page

Browse Source
This commit is contained in:
MaysWind
2021-01-28 00:54:26 +08:00
parent 217c15a746
commit 63a0136234
3 changed files with 38 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/locales/en.js
+2
View File
@@ -626,6 +626,8 @@ export default {
'No transaction data': 'No transaction data',
'Are you sure you want to delete this transaction?': 'Are you sure you want to delete this transaction?',
'Unable to delete this transaction': 'Unable to delete this transaction',
'Total Expense': 'Total Expense',
'Total Income': 'Total Income',
'Expense Chart': 'Expense Chart',
'Expense By Account': 'Expense By Account',
'Expense By Primary Category': 'Expense By Primary Category',
src/locales/zh_Hans.js
+2
View File
@@ -626,6 +626,8 @@ export default {
'No transaction data': '没有交易数据',
'Are you sure you want to delete this transaction?': '您确定要删除该交易？',
'Unable to delete this transaction': '无法删除该交易',
'Total Expense': '总支出',
'Total Income': '总收入',
'Expense Chart': '支出图表',
'Expense By Account': '账号支出',
'Expense By Primary Category': '一级分类支出',
src/views/mobile/statistics/Transaction.vue
+34 -9
View File
@@ -97,8 +97,19 @@
</div>
</f7-list-item>
</f7-list>
<f7-list v-else-if="!loading">
<f7-list-item v-for="(data, idx) in statisticsData" :key="idx"
<f7-list v-else-if="!loading && (!statisticsData || !statisticsData.items || !statisticsData.items.length)">
<f7-list-item :title="$t('No transaction data')"></f7-list-item>
</f7-list>
<f7-list v-else-if="!loading && statisticsData && statisticsData.items && statisticsData.items.length">
<f7-list-item class="statistics-list-item-overview">
<div slot="header" v-if="query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseByAccount || query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseByPrimaryCategory || query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseBySecondaryCategory">{{ $t('Total Expense') }}</div>
<div slot="header" v-if="query.chartDataType === $constants.statistics.allChartDataTypes.IncomeByAccount || query.chartDataType === $constants.statistics.allChartDataTypes.IncomeByPrimaryCategory || query.chartDataType === $constants.statistics.allChartDataTypes.IncomeBySecondaryCategory">{{ $t('Total Income') }}</div>
<div slot="title"
:class="{ 'statistics-list-item-overview-amount': true, 'text-color-teal': query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseByAccount || query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseByPrimaryCategory || query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseBySecondaryCategory, 'text-color-red': query.chartDataType === $constants.statistics.allChartDataTypes.IncomeByAccount || query.chartDataType === $constants.statistics.allChartDataTypes.IncomeByPrimaryCategory || query.chartDataType === $constants.statistics.allChartDataTypes.IncomeBySecondaryCategory }">
{{ statisticsData.totalAmount | currency(defaultCurrency) }}
</div>
</f7-list-item>
<f7-list-item v-for="(data, idx) in statisticsData.items" :key="idx"
class="statistics-list-item"
:link="`/transaction/list?${data.type}Id=${data.id}`">
<div slot="media" class="display-flex no-padding-horizontal">
@@ -329,7 +340,7 @@ export default {
}
}
const allStatisticsData = [];
const allStatisticsItems = [];
for (let id in combinedData) {
if (!Object.prototype.hasOwnProperty.call(combinedData, id)) {
@@ -339,14 +350,17 @@ export default {
const data = combinedData[id];
data.percent = data.totalAmount * 100 / allAmount;
allStatisticsData.push(data);
allStatisticsItems.push(data);
}
allStatisticsData.sort(function (data1, data2) {
allStatisticsItems.sort(function (data1, data2) {
return data2.totalAmount - data1.totalAmount;
});
return allStatisticsData;
return {
totalAmount: allAmount,
items: allStatisticsItems
};
},
chartData() {
const self = this;
@@ -359,8 +373,8 @@ export default {
const allData = [];
for (let i = 0; i < this.statisticsData.length; i++) {
const data = this.statisticsData[i];
for (let i = 0; i < this.statisticsData.items.length; i++) {
const data = this.statisticsData.items[i];
allData.push({
name: data.name,
@@ -657,11 +671,22 @@ export default {
</script>
<style>
.statistics-list-item-overview {
padding-top: 12px;
margin-bottom: 6px;
}
.statistics-list-item-overview-amount {
margin-top: 2px;
font-size: 1.5em;
}
.statistics-list-item .item-content {
margin-top: 8px;
margin-bottom: 12px;
}
.statistics-list-item .item-inner:after {
.statistics-list-item-overview .item-inner:after, .statistics-list-item .item-inner:after {
background-color: transparent;
}