assess-app/pages/statistics/components/drawings_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" :total-money="moneyData.loanMoney" :total-num="moneyData.loanNum"  ></StatSingleData>
		<StatLoanChart ref="outObj" :genre="1" :leftText="'提放汇总占比'"></StatLoanChart>
    <stat_gather is_group :leftText="'提放汇总明细'"  :out-list="outList" ></stat_gather>
    <StatRanking ref="rankingObj" :is_margin_top="false" :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 md5 from "js-md5";
  import {getRanking,getDepartmentMoney} from "@/api/statistics";
  import StatSituation from "@/pages/statistics/module/stat_situation.vue";
  import StatRanking from "@/pages/statistics/module/stat_ranking.vue";
  import Stat_gather from "@/pages/statistics/module/stat_gather.vue";
  import StatSingleData from "@/pages/statistics/module/stat_single_data.vue";

	export default {
    props:{
      'dateTypeObj':{
        default:()=>{
          return {
            dateType:4,
            selectDate:'2023-02-25',
            money_type:1,
            censusUserType:0,
            product_id:5,
          }
        }
      }
    },
		components: {
      StatSingleData,
      Stat_gather,
      StatRanking,
      StatSituation,
			StatLoanChart,
		},
		data() {
			return {
        selectTypeObj:{
          dateType:4,
          selectDate:'2023-02-25',
          money_type:4,
          censusUserType:0,
          product_id:5,
        },
        tabsList: [{
          name: '汇总',
          dot_color: 'red',
          disabled: false
        }, {
          name: '银行',
          dot_color: 'yellow',
          disabled: false
        }],
        current: 0,

        userList:[],
        moneyData:{
          loanMoney: 0,
          loanNum: 0
        },
        outList:[]
			}
		},
    watch:{
      'dateTypeObj':function () {
        this.initData()
      }
    },
    mounted() {
      this.initData()
    },
    methods:{
      tabsChange(e) {
        if(e!==this.current){
          this.current = e
          this.selectTypeObj.money_type=this.current===0?5:4
          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=5
          this.selectTypeObj.product_id=5
          let sendMd5=this.setSendMd5()
          if(sendMd5 !== this.sendMd5){
            this.sendMd5=sendMd5
           this.startData()
          }
        }
      },
      startData(){
        this.getDepartmentMoney()
        this.setUserRanking()
        this.$refs.situationObj.startList()
      },
       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 = []
          }
        })
      },
      getDepartmentMoney(){
         getDepartmentMoney(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)
          }
        })
      },
    }

	}
</script>

<style>
</style>