assess-app/pages/statistics/components/consume_stat.vue

<template>
	<view class="">
		<view class="tabs page-box-bg-fff  r-30 m-t30" :style="[{position:is_fixed?'absolute':''}]"
			style="height: 100rpx;">
			<z-tabs ref="tabs" :list="tabsList" :active-style="{color:'#10B261',fontWeight:'bold',fontSize:'30rpx'}"
				:bar-style="{background:'#10B261'}" :inactive-style="{fontWeight:'bold',fontSize:'28rpx'}"
				:current="current" :bar-animate-mode="'worm'" @change="tabsChange" />
		</view>
		<!-- 顶部单行统计 -->
		<StatSingleData :genre="dateTypeObj.censusUserType" :type="current+1" :total-money="moneyData.loanMoney"
			:total-num="moneyData.loanNum"></StatSingleData>
		<StatLoanChart ref="outObj" :genre="3" :leftText="'消金汇总占比'"></StatLoanChart>
		<!--		<StatRanking :genre="3" :leftText="'消金汇总明细'"></StatRanking>-->
		<!--		<StatRanking ref="rankingObj" :genre="3" :is_type='2' :leftText="'个人业绩排行'"></StatRanking>-->
		<stat_gather is_group :leftText="'汇总明细'" :out-list="outList"></stat_gather>
		<StatRanking ref="rankingObj" :is_type="2" :leftText="'个人业绩排行'" :data-list="userList"></StatRanking>
		<StatSituation ref="situationObj" :date-type-obj="selectTypeObj" :type="1"></StatSituation>
	</view>
</template>

<script>
	import StatLoanChart from "../module/stat_loan_chart.vue"
	import StatSingleData from "../module/stat_single_data.vue"
	import md5 from "js-md5";
	import {
		getConsumeMoney,
		getRanking
	} from "@/api/statistics";
	import Stat_gather from "@/pages/statistics/module/stat_gather.vue";
	import StatRanking from "@/pages/statistics/module/stat_ranking.vue";
	import StatSituation from "@/pages/statistics/module/stat_situation.vue";

	export default {
		props: {
			'dateTypeObj': {
				default: () => {
					return {
						dateType: 4,
						selectDate: '2023-02-25',
						money_type: 1,
						censusUserType: 0,
						product_id: 5,
					}
				}
			}
		},
		components: {
			Stat_gather,
			StatSingleData,
			StatLoanChart,
			StatRanking,
			StatSituation,
		},
		data() {
			return {
				selectTypeObj: {
					dateType: 4,
					selectDate: '2023-02-25',
					money_type: 1,
					censusUserType: 0,
					product_id: 5,
				},
				tabsList: [{
					name: '未出款',
					dot_color: 'red',
					disabled: false
				}, {
					name: '签约',
					dot_color: 'yellow',
					disabled: false
				}, {
					name: '出款',
					dot_color: 'yellow',
					disabled: false
				}],
				current: 0,
				moneyData: {
					loanMoney: 0,
					loanNum: 0
				},
				outList: [],
				userList: [],
			}
		},
		watch: {
			'dateTypeObj': function() {
				this.initData()
			}
		},
		mounted() {
			this.initData()
		},
		methods: {
			tabsChange(e) {
				if (e !== this.current) {
					this.current = e
					this.selectTypeObj.money_type = this.current + 1
					this.startData()
				}
			},
			setSendMd5() {
				let str = JSON.stringify(this.dateTypeObj)
				return md5(str)
			},
			initData() {
				if (this.dateTypeObj.censusUserType > 0) {
					this.selectTypeObj = this.dateTypeObj
					this.selectTypeObj.money_type = 1
					let sendMd5 = this.setSendMd5()
					if (sendMd5 !== this.sendMd5) {
						this.sendMd5 = sendMd5
						this.startData()
					}
				}
			},
			startData() {
				this.getConsumeMoney()
				this.setUserRanking()
			},
			getConsumeMoney() {
				getConsumeMoney(this.selectTypeObj).then((res) => {
					if (res.code === 1) {
						this.moneyData.loanMoney = res.data.moneyData.loanMoney
						this.moneyData.loanNum = res.data.moneyData.loanNum
						this.outList = res.data.items
						this.$refs.outObj.setPeakChartData(this.outList)
					}
				})
			},
			setUserRanking() {
				let fromData = this.selectTypeObj
				fromData.pageNum = 5
				getRanking(fromData).then((res) => {
					if (res.code === 1) {
						this.userList = res.data.items
						this.$refs.rankingObj.setDataList(this.userList)
					} else {
						this.userList = []
					}
				})
			},
		},
	}
</script>

<style>
</style>