103 lines
2.7 KiB
Vue
103 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<el-row type="flex">
|
|
<el-tabs style="width: 100%">
|
|
<el-tab-pane label="月报表">
|
|
<range-picker v-model="queryParams.payTimeYear" @change="onChangeYear" suffix="年"/>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-row>
|
|
<single-line-chart v-loading="loading" :labels="labels" :chart-data="chartData" name="收入(元)" height="288px"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SingleLineChart from "@/components/SingleLineChart/index.vue";
|
|
import RangePicker from "@/components/RangePicker/index.vue";
|
|
import {countBill, listBill} from "@/api/system/recharge";
|
|
import {BonusArrivalType} from "@/utils/constants";
|
|
import {getBonusMonthAmount} from "@/api/system/dashboard";
|
|
|
|
export default {
|
|
name: 'userRechargeReport',
|
|
components: {RangePicker, SingleLineChart},
|
|
props: {
|
|
// 到账人id
|
|
mchId: {
|
|
type: String,
|
|
default: null,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
labels: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], // x轴
|
|
chartData: [], // 报表数据
|
|
queryParams: {
|
|
payTimeYear: new Date().getFullYear(),
|
|
arrivalId: this.mchId,
|
|
arrivalTypes: BonusArrivalType.userList()
|
|
},
|
|
loading: false,
|
|
}
|
|
},
|
|
watch: {
|
|
mchId(nv, ov) {
|
|
this.getReportData(nv);
|
|
}
|
|
},
|
|
methods: {
|
|
// 当年份发生变化
|
|
onChangeYear(year) {
|
|
this.queryParams.payTimeYear = year;
|
|
this.getReportData(this.mchId);
|
|
},
|
|
// 获取到账人的报表
|
|
getReportData(mchId) {
|
|
this.loading = true;
|
|
this.queryParams.arrivalId = mchId | this.mchId;
|
|
getBonusMonthAmount(this.queryParams).then(response => {
|
|
let data = response.data;
|
|
// 按月统计数据
|
|
let list = [];
|
|
if (data != null) {
|
|
for (let i = 1; i <= this.getReportMonth(); i ++) {
|
|
let monthData = data.find(item => item.month === i);
|
|
list[i - 1] = monthData == null ? 0 : monthData.amount;
|
|
}
|
|
}
|
|
this.chartData = list;
|
|
}).finally(() => {
|
|
this.loading = false;
|
|
})
|
|
},
|
|
// 获取报表显示的月份
|
|
getReportMonth() {
|
|
let now = new Date();
|
|
let nowYear = new Date().getFullYear()
|
|
let paramYear = this.queryParams.payTimeYear;
|
|
if (paramYear < nowYear) {
|
|
return 12;
|
|
}
|
|
if (paramYear === nowYear) {
|
|
return now.getMonth() + 1;
|
|
}
|
|
return 0;
|
|
},
|
|
// 获取字符串时间的月份
|
|
getMonth(str) {
|
|
if (str == null) {
|
|
return null;
|
|
}
|
|
return new Date(str).getMonth() + 1;
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.title {
|
|
line-height: 36px;
|
|
}
|
|
</style>
|