assess-app/pages/statistics/statistics.vue

<template>
	<view class="total-page page_env page-box container">
		<Nav :title="'2024- 3.12--3.18'+ statType" :back="false" is_icons is_fixed :bgHeight="bgHeight"
			:navsHeight="navsHeight" :opacity="scrollTop" :justify="'left'" :color="'#fff'" :fixedHeight="160">
			<view class="task-tabs m-t20" :style="{top:`${$tools.topHeight()}px`}">
				<HeadFilter @onTopSelect="onTopSelect"></HeadFilter>
				<view class="m-lr30 m-tb30 bor-255 r-100" v-if="statType === 3">
					<uv-subsection :list="list" :bgColor="'rgba(255,255,255,0.1)'" :activeColor="'#0FB160'"
						:inactiveColor="'#004615'" :fontSize="14" custom-style="height: 70rpx;border-radius: 30rpx;"
						custom-item-style="border-radius: 30rpx;" :current="current" @change="onChange"></uv-subsection>
				</view>
			</view>
		</Nav>
		<!-- <view class="m-t30 stat_blank" style="z-index: 999999999;" :style="{minHeight:`calc(100% - ${$tools.topHeight()}px)`}">
				内容
			</view> -->
		<view class="statistics_content" :style="[{top:`${$tools.topHeight() + positionHeight}px`}]">

			<view class="">
				<HeadData v-if="statType === 0 || statType === 1"></HeadData>
				<view class="tabs page-box-bg-fff m-lr30 r-30" v-if="statType == 2 || statType == 3"
					:style="[{position:is_fixed?'absolute':''},{top:`${$tools.topHeight() + 85}px`}]"
					style="height: 100rpx;">
					<z-tabs ef="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 :is_fixed="is_tabs_fixed" v-if="is_single_data"></StatSingleData>
				<view class="sys-list-background-color p-lr30">
					<!-- 汇总统计-公司 -->
					<view v-if="statType === 0">
						<StatFinanceChart></StatFinanceChart>
						<StatFinance></StatFinance>
						<StatCapital :leftColor="0" :rightColor="1" :leftText="'任务资金汇总'">
						</StatCapital>
						<StatCapital :leftColor="1" :rightColor="2" :leftText="'在途资金汇总'">
						</StatCapital>
						<StatIndustry></StatIndustry>
						<StatAgeChart></StatAgeChart>
					</view>
					<!-- 资金统计-部门 -->
					<view v-if="statType === 1">
						<StatLoanChart :genre="1" :leftText="'放款汇总占比'"></StatLoanChart>
						<StatLoanChart :genre="2" :leftText="'回款汇总占比'"></StatLoanChart>
						<StatRanking is_group :leftText="'汇总明细'"></StatRanking>
						<view class="sys-background-fff r-30">
							<StatCapital :leftColor="0" :rightColor="1" :leftText="'任务资金汇总'">
							</StatCapital>
							<view class="view_line"></view>
							<StatRanking :is_margin_top="false" :leftText="'个人业绩排行'"></StatRanking>
						</view>
						<StatSituation :type="1"></StatSituation>
					</view>
					<!-- 提放统计-部门 -->
					<view class="" v-if="statType === 2">
						<StatLoanChart :genre="1" :leftText="'提放汇总占比'"></StatLoanChart>
						<StatRanking :leftText="'提放汇总明细'"></StatRanking>
						<StatRanking :is_type='2' :leftText="'个人业绩排行'"></StatRanking>
						<StatSituation :type="1" :leftText="'情况说明'"></StatSituation>
					</view>
					<!-- 消金统计-部门 -->
					<view class="" v-if="statType === 3">
						<StatLoanChart :genre="3" :leftText="'消金汇总占比'"></StatLoanChart>
						<StatRanking :genre="3" :leftText="'消金汇总明细'"></StatRanking>
						<StatRanking :genre="3" :is_type='2' :leftText="'个人业绩排行'"></StatRanking>
						<StatSituation :type="1" :genre="3" :leftText="'情况说明'"></StatSituation>
					</view>
					<!-- 任务统计-个人 -->
					<view class="" v-if="statType === 4">
						<StatLoanChart :leftText="'任务汇总占比'"></StatLoanChart>
						<StatRanking :is_type="3" :leftText="'任务明细'"></StatRanking>
					</view>
					<!-- 业绩统计-个人 -->
					<view class="" v-if="statType === 5">
						<StatLoanChart :leftText="'任务汇总占比'"></StatLoanChart>
						<StatRanking :is_type="1" :leftText="'放款汇总明细'"></StatRanking>
					</view>
					<view class="bottom_view"></view>
				</view>
			</view>
		</view>
		<Tab :tab-index="3"></Tab>
	</view>

</template>
<script>
	import HeadFilter from "@/common/statistics/head_filter.vue"
	import HeadData from "@/common/statistics/head_data.vue"
	// 顶部单统计数据
	import StatSingleData from "@/common/statistics/stat_single_data.vue"
	// 模块标题
	import StatisticsTitle from "@/common/statistics/statistics_title.vue"
	// 财务汇总占比
	import StatFinanceChart from "@/common/statistics/stat_finance_chart.vue"
	// 放款汇总占比
	import StatLoanChart from "@/common/statistics/stat_loan_chart.vue"
	// 财务汇总明细
	import StatFinance from "@/common/statistics/stat_finance.vue"
	// 任务资金汇总
	import StatCapital from "@/common/statistics/stat_capital.vue"
	// 行业占比
	import StatIndustry from "@/common/statistics/stat_industry.vue"
	// 年龄分布
	import StatAgeChart from "@/common/statistics/stat_age_chart.vue"
	// 情况说明
	import StatSituation from "@/common/statistics/stat_situation.vue"
	// 排名
	import StatRanking from "@/common/statistics/stat_ranking.vue"

	export default {
		components: {
			HeadFilter,
			HeadData,
			StatSingleData,
			StatFinanceChart,
			StatFinance,
			StatCapital,
			StatLoanChart,
			StatisticsTitle,
			StatIndustry,
			StatAgeChart,
			StatSituation,
			StatRanking
		},
		data() {
			return {
				is_single_data: false, // 顶部单行统计是否显示
				is_tabs_fixed: false, // tabs是否固定
				scrollTop: 0,
				statType: 0,
				current: 0,
				tabsList: [{
					name: '汇总',
					dot_color: 'red',
					disabled: false
				}, {
					name: '银行',
					dot_color: 'yellow',
					disabled: false
				}],
				bgHeight: 140,
				navsHeight: 65,
				positionHeight: 50,
				list: ['中银消费', '中邮消费', '新网车抵']
			}
		},
		onLoad() {
			uni.hideTabBar()
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop / 120
		},
		mounted() {

		},

		computed: {
			// getBgHeight() {
			// 	switch (this.statType) {
			// 		case 0:
			// 		case 1:
			// 			this.statType = 0
			// 			return 48;
			// 		case 0:
			// 		case 1:
			// 			return 140;
			// 		default:
			// 			break;
			// 	}
			// },
		},
		methods: {
			onChange(e) {
				this.current = e
			},
			onTopSelect(type) {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.statType = type
				this.is_single_data = type == 0 || type == 1 ? false : true
				this.is_tabs_fixed = type === 2 ? true : false
				if (type == 0 || type == 1) {
					this.bgHeight = 140
					this.positionHeight = 50
				}
				if (type == 2) {
					this.bgHeight = 65
					this.positionHeight = 80
				}
				if (type == 3) {
					this.bgHeight = 120
					this.navsHeight = 120
					this.positionHeight = 135
				}
				if (type == 4 || type == 5) {
					this.bgHeight = 105
					this.navsHeight = 65
					this.positionHeight = 55
				}
				this.$forceUpdate()
			},
		},
	}
</script>
<style lang="scss" scoped>
	.statistics_content {
		width: 100%;
		position: absolute;
	}

	.stat_blank {
		// height: 100vh;
		background: red;
		// flex: 1;
	}

	.bottom_view {
		height: calc(160rpx + env(safe-area-inset-bottom));
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		/* 高度占满整个屏幕 */
	}

	.content {
		flex: 1;
		/* 充满剩余空间 */
		background-color: #ffffff;
		/* 内容区域的背景颜色 */
		/* 其他样式按需添加 */
	}
</style>