vue-insagent-app/pages/tools/addStaff/employeeAdditionCount.vue

<template>
	<view>
		<view class="headers ">
			<view class="header">
				<view class="dis a-c j-start ">
					<u-icon name="arrow-left" size="40" @tap="back"></u-icon>
					<text style="margin: auto;">新增统计</text>
				</view>
			</view>
			<view class="sub">
				<u-subsection :list="list" mode="subsection" :current="current" :bold="false" @change="subChange"
					active-color="rgba(255,140,4,0.6)" style="background-color: white;"></u-subsection>
			</view>
		</view>
		<view style="padding: 164px 16px 16px;">
			<view class="dataset">
				<view class="title dis a-c ">
					<view class="tag"></view>
					<text>新增人员数据统计</text>
				</view>
				<view class="data dis f-wrap a-c j-c">
					<view class="dis f-c a-c ">
						<text>{{dataInfo.allCount}}</text>
						<text>全部人员</text>
					</view>
					<view class="dis f-c a-c ">
						<text>{{dataInfo.yesCount}}</text>
						<text>已认证</text>
					</view>
					<view class="dis f-c a-c ">
						<text>{{dataInfo.noCount}}</text>
						<text>未认证</text>
					</view>
					<view class="dis f-c a-c ">
						<text>{{dataInfo.oneCount}}</text>
						<text>一级代理</text>
					</view>
					<view class="dis f-c a-c ">
						<text>{{dataInfo.twoCount}}</text>
						<text>二级代理</text>
					</view>
					<view class="dis f-c a-c ">
						<text>{{dataInfo.threeCount}}</text>
						<text>三级代理</text>
					</view>
					<view class="dis f-c a-c ">
						<text>{{dataInfo.tempCount}}</text>
						<text>临时代理</text>
					</view>
				</view>
			</view>
			<view class="chartData">
				<view class="title dis a-c ">
					<view class="tag"></view>
					<text>新增人员数据列表</text>
				</view>
				<view class="echarts-data">
					<qiun-data-charts v-if="current==0" type="column" :opts="opts1" :chartData="chartData1"
						:ontouch="true" style="height: 250px;" />
					<view class="">
						<qiun-data-charts v-if="current==1 || current==2" type="bar" :opts="opts2"
							:chartData="chartData2" :ontouch="true" :style="{height:current==1?'250px':'600px'}" />
					</view>

				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				list: [{
						name: '当日'
					},
					{
						name: '7天'
					},
					{
						name: '近30天'
					}
				],
				current: 0,
				chartData1: {

				},
				chartData2: {},
				opts1: {
					dataLabel: false,
					color: ["#FFB632"],
					padding: [15, 15, 0, 5],
					touchMoveLimit: 24,
					legend: {
						show: false,
						position: "top"
					},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 4
					},
					yAxis: {
						disableGrid: true,
						splitNumber: 5,
						data: [{}]
					},
					extra: {
						column: {
							type: "group",
							width: 22,
							linearType: "custom",
							seriesGap: 5,
							barBorderCircle: true,
							customColor: [
								"#FF910A"
							],
						}
					}
				},
				opts2: {
					dataLabel: false,
					color: ["#41B9F7", "#FF920B", "#FDD96B", "#6A95F6"],
					padding: [15, 30, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						min: 0,
						axisLine: false,
						max: 70
					},
					yAxis: {
						showTitle: true,
						data: [{
							type: "categories",
							title: "日期/人数"
						}]
					},
					extra: {
						bar: {
							type: "stack",
							width: 5,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							categoryGap: 2
						},
						tooltip: {
							borderRadius: 2,
							boxPadding: 6,

						}
					}
				},
				dateType: 1,
				dataInfo: {}
			}

		},
		computed: {},
		onShow() {

		},
		onLoad() {
			this.getServerData1();
		},
		methods: {
			getMaxOrFive(arr) {
				if (arr.length === 0) {
					console.log("数组是空的，无法判断最大值。");
					return null; // 如果数组为空，返回 null 或者其他您希望的值
				}
				const maxValue = Math.max(...arr); // 获取数组中的最大值

				return maxValue < 10 ? maxValue : 5; // 判断并返回最大值或5
			},
			async getServerData1() {
				let res = await this.$http.get(
					`/app/customer/authStatics?dateType=${this.dateType}`);
				if (res.code == '200') {
					this.dataInfo = res.data;
					let rualit = {
						categories: res.data.staticsData.categories,
						series: [{
							name: "人数",
							data: res.data.staticsData.series
						}]
					};
					let sum = this.getMaxOrFive(res.data.staticsData.series);
					if (sum) {
						this.opts1.yAxis.splitNumber = sum;
					}
					this.chartData1 = JSON.parse(JSON.stringify(rualit));
				}

			},
			async getServerData2() {
				let res = await this.$http.get(
					`/app/customer/authStatics?dateType=${this.dateType}`);
				if (res.code == '200') {
					this.dataInfo = res.data;
					let rualit = {
						categories: res.data.staticsData.categories,
						series: [{
								name: "一级代理",
								data: res.data.staticsData.series[0].data,
							},
							{
								name: "二级代理",
								data: res.data.staticsData.series[1].data,
							},
							{
								name: "三级代理",
								data: res.data.staticsData.series[2].data,
							},
							{
								name: "临时代理",
								data: res.data.staticsData.series[3].data,
							}
						]
					};
					this.chartData2 = JSON.parse(JSON.stringify(rualit));
				}

			},
			subChange(index) {
				this.current = index;
				switch (index) {
					case 0:
						this.dateType = 1;
						this.getServerData1();
						break;
					case 1:
						this.dateType = 2;
						this.getServerData2();
						break;
					case 2:
						this.dateType = 3;
						this.getServerData2();
						break;
				}
			},
			//页面返回按钮
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ {
		.u-subsection {}
	}

	page {
		background-color: #F7F7F7;
	}

	.headers {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999;
		width: 100%;

		.header {
			width: 100%;
			height: auto;
			padding: 50px 16px 14px;
			background: linear-gradient(180deg, #FEECD1 0%, #FFFFFF 100%);

			text {
				font-size: 18px;
				font-weight: bold;
				color: #000;
			}
		}

		.sub {
			padding: 8px 15px;
			background: #fff;
			border-bottom: 1px solid #EEEEEE;
		}

	}

	.dataset {
		background: #FFFFFF;
		border-radius: 5px;
		border-bottom: 1px solid #EEEEEE;

		.title {
			padding: 11px 0;

			.tag {
				width: 4px;
				height: 16px;
				background: linear-gradient(132deg, #FFB834 0%, #FF8D04 100%);
				border-radius: 5px;
			}

			text {
				font-size: 16px;
				color: #333;
				font-weight: bold;
				margin-left: 6px;
			}
		}

		.data {
			margin: 0 10px 10px;
			background: #FBFBFB;
			border-radius: 4px;
			padding: 15px;

			>view {
				width: 33.33%;

				text:first-child {
					font-size: 22px;
					color: #333;
					font-weight: bold;

				}

				text:last-child {
					font-size: 12px;
					color: #999;

				}
			}
		}
	}

	.chartData {
		background: #FFFFFF;
		border-radius: 5px;
		border-bottom: 1px solid #EEEEEE;
		margin-top: 12px;

		.title {
			padding: 11px 0;

			.tag {
				width: 4px;
				height: 16px;
				background: linear-gradient(132deg, #FFB834 0%, #FF8D04 100%);
				border-radius: 5px;
			}

			text {
				font-size: 16px;
				color: #333;
				font-weight: bold;
				margin-left: 6px;
			}
		}

		.echarts-data {
			padding: 0 8px 12px;
		}
	}
</style>