partnerApp/pages/statistics/statistics.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<!-- 头部信息Start -->
		<view class="headers " :style="headerStyle">
			<view class="dis a-c j-c">
				<text>统计</text>
			</view>
		</view>
		<view class="body-box" style="margin-top: 100px">
			<view class=" dis j-s a-c" style="padding: 10px 10px 0 0;">
				<view class="statistics-title">新增人员汇总统计</view>
				<!-- 时间快捷选择 -->
				<view class="quickSwitchDate  dis a-c j-c ">
					<view class="tab" :class="{active:summaryDateIndex==index}" v-for="(item,index)  in quickSwitchDate"
						:key="index" @click="SwitchDateclick(item,index)">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- 人员汇总 -->
			<view class="statistics-number ">
				<view v-for="(item,index) in statistics" :key="index">
					<text>{{ item.count }}</text>
					<text>{{item.gradeName}}</text>
				</view>
			</view>
			<view class="partner-type dis">
				<view style="width: 650px;overflow-x: auto;">
					<text :class="summarygrade == val.grade ? 'selected' : ''" v-for="(val,index) in partnerTypeOption"
						:key="index" @click="getPartnerType(val,val.grade)">{{ val.gradeName }}</text>
				</view>
			</view>
			<o-empty v-if=" chartData1.categories && chartData1.categories.length==0" height="20vh" />
			<qiun-data-charts v-else type="area" :ontouch="true" :opts="opts1" :chartData="chartData1" />
		</view>
		<view class="body-box">
			<view class=" dis j-s a-c" style="padding: 10px 10px 0 0;">
				<view class="statistics-title">新增人员占比分析</view>
				<!-- 时间快捷选择 -->
				<view class="quickSwitchDate  dis a-c j-c ">
					<view class="tab" :class="{active:ratioDateIndex==index}" v-for="(item,index)  in quickSwitchDate"
						:key="index" @click="SwitchDateclick1(item,index)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="partner-type dis">
				<view style="width: 650px;overflow-x: auto;">
					<text :class="ratiograde == val.grade ? 'selected' : ''" v-for="(val,index) in partnerTypeOption1"
						:key="index" @click="getPartnerType2(val,val.grade)">{{ val.gradeName }}</text>
				</view>
			</view>
			<view class="charts-box" style="height: 200px;">
				<qiun-data-charts type="ring" :eopts="ringOpts" :chartData="chartsDataPie2" />
			</view>
		</view>
		<view class="body-box" style="padding-bottom: 10px;">
			<view class=" dis j-s a-c" style="padding: 10px 10px 0 0;">
				<view class="statistics-title">排名</view>
			</view>
			<view class="partner-type dis">
				<view style="width: 650px;overflow-x: auto;">
					<text :class="rankgrade == val.grade ? 'selected' : ''" v-for="(val,index) in personRankingOption"
						:key="index" @click="getPartnerType3(val,val.grade)">{{ val.gradeName }}</text>
				</view>
			</view>
			<view class="teamStatistics ">
				<view class="statisticsTitle">
					<view>排名</view>
					<view>姓名</view>
					<view>人数</view>
					<view>详情</view>
				</view>
				<block v-for="(item, index) in directLsit" :key="index">
					<view>
						<view class="statisticsContent ">
							<view>
								<image v-if="index == 0" src="/static/icon/paiming1.png" mode=""></image>
								<image v-else-if="index == 1" src="/static/icon/paiming2.png" mode=""></image>
								<image v-else-if="index == 2" src="/static/icon/paiming3.png" mode=""></image>
								<text v-else>{{ index + 1 }}</text>
							</view>
							<view>{{ item.userName }}</view>
							<view>{{ item.number }}</view>
							<view style="color:#739EFF;" @click="directDetail(item.id)">查看</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
	} from "vuex"
	import levertab from "../components/leverStaff.vue" //等级切换组件
	import tabDate from "../components/year.vue" //日期快捷选择
	export default {
		components: {
			levertab,
			tabDate
		},
		data() {
			return {
				statistics: [], //各等级人员统计
				summaryDateIndex: 1, //人员
				ratioDateIndex: 1, //汇总
				summarygrade: null, //汇总选中等级
				ratiograde: null, //占比选中等级
				rankgrade: null, //排名选中等级
				summaryCountCycle: "Week", //汇总日期选择
				ratioCountCycle: "Week", //占比日期选择
				quickSwitchDate: [{
						name: "日",
						value: "Day"
					},
					{
						name: "周",
						value: "Week"
					},
					{
						name: "月",
						value: "Month"
					}
				],
				ringOpts: {
					color: ['#02CDFF ', '#2D97FF'],
					legend: {
						show: false // 设置图例不显示
					},
					dataLabel: true,
				},
				chartsDataPie2: {}, //图表2显示
				echartsList2: {},
				level: '',
				type: null,
				typeStatistics: 1,
				typeStatistics2: 1,
				typeStatistics3: 1,
				option: {},
				supportStaffUrl: '',
				headerStyle: {
					backgroundColor: 'transparent',
					backgroundImage: 'url("/static/beijing (2).png")',
					backgroundSize: 'cover',
					backgroundPosition: '',
					boxShadow: ''
					// 其他样式属性...
				},
				year: [{
					lable: '日',
					startShow: false
				}, {
					lable: '周',
					startShow: false
				}, {
					lable: '月',
					startShow: false
				}],
				echartsList: {},
				analysisEchartsList: {},
				partnerTypeOption: [],
				partnerTypeOption1: [], //人员占比数据
				personRankingOption: [], //人员排名集合
				directLsit: [], //排名列表数据
				opts1: { //图表1配置参数
					enableScroll: true,
					padding: [15, 10, 15, 0],
					legend: {
						show: false // 设置图例不显示
					},
					xAxis: {
						disableGrid: true,
						type: 'grid',
						gridType: 'dash',
						itemCount: 4, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
						scrollColor: '#A6A6A6', //默认为 #A6A6A6,
						fontSize: 11,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						},
					},
				},
				chartData1: {},
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onLoad() {
			this.level = this.userInfo.sysUser.level
		},
		onShow() {
			this.type = uni.getStorageSync('type')
			this.newPersonCount() //图表1
			this.newPersonRatioAnalysis() //图表2
			this.personRanking() //排名

		},

		methods: {
			//汇总日期切换
			SwitchDateclick(item, index) {
				this.summaryDateIndex = index;
				this.summaryCountCycle = item.value;
				this.newPersonCount();
			},
			//占比日期切换
			SwitchDateclick1(item, index) {
				this.ratioDateIndex = index;
				this.ratioCountCycle = item.value;
				this.newPersonRatioAnalysis()
			},
			canvasInit(canvas, width, height) {
				// 初始化画布
				this.canvas2d = canvas;
			},
			directDetail(val) {
				console.log(val);
				uni.navigateTo({
					url: "/pages/statistics/statisticsDetail?id=" + val,
				})
			},
			//人员汇总数据切换
			getPartnerType(item, type) {
				this.summarygrade = type;
				let rualit = {
					categories: item.data.dataTime,
					series: [{
						name: "人数",
						// type: "line",
						data: item.data.data
					}]
				};
				this.chartData1 = JSON.parse(JSON.stringify(rualit)); //更新图表数据
			},
			//人员占比图数据切换
			getPartnerType2(item, type) {
				this.ratiograde = type;
				this.chartsDataPie2 = {
					series: [{
						"data": [{
								name: `新增`,
								value: item.data.newNum,
								labelText: `${item.data.newNum?'新增：'+item.data.newNum+'%':'新增：0%'}`
							},
							{
								name: "历史",
								value: item.data.number,
								labelText: `${item.data.number?'历史：'+item.data.number+'%':'历史：0%'}`
							}
						]
					}]
				}
			},
			//人员排名数据切换
			getPartnerType3(item, type) {
				this.rankgrade = type;
				this.directLsit = item.data;
			},
			//图表2
			async newPersonRatioAnalysis() {
				let params = {
					countCycle: this.ratioCountCycle || 'Week',
				}
				let res = await this.$http.post('/newAppPartner/userCountProportionVo', params);
				if (res.code == '200') {
					this.partnerTypeOption1 = res.data
					this.ratiograde = this.partnerTypeOption1[0].grade; //默认获取最高身份等级
					this.chartsDataPie2 = {
						series: [{
							"data": [{
									name: `新增`,
									value: res.data[0].data.newNum,
									labelText: `${res.data[0].data.newNum?'新增：'+res.data[0].data.newNum+'%':'新增：0%'}`
								},
								{
									name: "历史",
									value: res.data[0].data.number,
									labelText: `${res.data[0].data.number?'历史：'+res.data[0].data.number+'%':'历史：0%'}`
								}
							]
						}]
					}

				}
			},
			//排名
			async personRanking() {
				let res = await this.$http.post('/newAppPartner/userCountRankingVo', {});
				if (res.code == '200') {
					this.personRankingOption = res.data;
					this.directLsit = res.data[0].data;
					this.rankgrade = this.personRankingOption[0].grade; //默认获取最高身份等级
				}
			},
			getTime(beginTime, endTime) {
				this.beginTime = beginTime
				this.endTime = endTime
			},
			//图表1
			async newPersonCount() {
				let params = {
					countCycle: this.summaryCountCycle || 'Week',
				}
				let res = await this.$http.post('/newAppPartner/userCountStatisticsVo', params);
				if (res.code == '200') {
					this.statistics = res.data.vo1; //统计
					this.partnerTypeOption = res.data.vo2; //图表数据

					let rualit = {
						categories: this.partnerTypeOption[0].data.dataTime,
						series: [{
							name: "人数",
							// type: "line",
							data: this.partnerTypeOption[0].data.data
						}]
					};
					this.chartData1 = JSON.parse(JSON.stringify(rualit)); //默认显示最高等级数据
					console.log(this.chartData1);
					this.summarygrade = this.partnerTypeOption[0].grade; //默认获取最高身份等级
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.headers {
		position: fixed;
		top: 0;
		left: 0;
		height: auto;
		width: 100%;
		z-index: 999999;
		padding: 16px;
		padding-top: 40px;

		text {
			font-size: 18px;
			font-weight: 700;
			color: #333333;
		}
	}

	.headers-right {
		position: absolute;
		right: 15px;
		display: flex;
		align-items: center;

		text {
			font-size: 13px;
			color: #666666;
		}

		image {
			// right: 0;
			width: 15px;
			height: 15px;
			margin-right: 5px;
		}
	}

	.body-box {
		background: #ffffff;

		margin: 15px
	}

	.statistics-title {
		font-size: 16px;
		color: #333333;
	}

	.statistics-title::before {
		content: " ";
		display: inline-block;
		width: 4px;
		height: 12px;
		background: linear-gradient(132deg, #2DD9FF 0%, #2D6DFF 100%);
		border-radius: 5px 5px 5px 5px;
		margin-right: 4px;
		margin-top: 2px;
	}

	.quickSwitchDate {
		border: 1rpx solid #eee;
		border-radius: 4rpx;

		.tab {
			padding: 6rpx 12rpx;
			box-sizing: border-box;
			font-size: 27rpx;
			color: #666;
		}

		.active {
			color: #FFFFFF;
			background: linear-gradient(132deg, #2DD9FF 0%, #2D6DFF 100%);
		}
	}



	.statistics-number {
		margin: 10px 10px 20px 10px;
		background: #FBFBFB;
		border-radius: 4px 4px 4px 4px;
		text-align: center;
		padding: 15px 0;
		overflow: hidden;

		view {
			width: 33.33%;
			float: left;

		}

		text {
			display: block;
		}

		text:first-child {
			font-size: 25px;
			color: #333333;
		}

		text:last-child {
			font-size: 13px;
			color: #999999;
		}
	}

	.statistics-type {
		text-align: center;
		margin-bottom: 20px;

		text {
			display: inline-block;
			width: 80px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			font-size: 16px;
			color: #666666;
			background: #F4F4F4;
		}

		.selected {
			color: #FFFFFF;
			background: linear-gradient(132deg, #2DD9FF 0%, #2D6DFF 100%);
		}

		// text:first-child{
		// 	color: #FFFFFF;
		// 	background: linear-gradient( 132deg, #2DD9FF 0%, #2D6DFF 100%);

		// }
	}

	.partner-type {
		margin: 10px;
		width: 97%;
		overflow: hidden;
		white-space: nowrap;

		text {
			display: inline-block;
			border-radius: 14px 14px 14px 14px;
			font-size: 14px;
			color: #666666;
			padding: 1px 10px;
			background: #F4F4F4;
			margin-right: 8px;
		}

		.selected {
			color: #FFFFFF;
			background: linear-gradient(132deg, #2DD9FF 0%, #2D6DFF 100%);
		}
	}

	.teamStatistics {
		margin: 10px;
		background: #FFFFFF;
		// box-shadow: 0px 4px 10px 0px #DAE3F4;
		border-radius: 2px 2px 2px 2px;
		border: 1px solid #C8D8FF;
	}

	.statisticsContent {
		box-sizing: border-box;
		height: 70upx;
		text-align: center;
		line-height: 70upx;
		font-size: 26rpx;
		color: #666666;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;

		view {
			text-align: center;
			line-height: 70upx;
			width: 25%;
			font-size: 12px;
		}

		image {
			display: inline-block;
			width: 21px;
			height: 21px;
			vertical-align: middle;
		}
	}

	.statisticsTitle {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
		height: 70upx;
		box-sizing: border-box;
		line-height: 70upx;
		font-size: 24rpx;
		color: #232832;
		background: linear-gradient(180deg, #DAE0EE 0%, #E9ECF4 100%);
		// border-radius: 6px 6px 0 0;

		view {
			text-align: center;
			line-height: 35px;
			color: #2D6DFF;
			width: 25%;
			font-size: 12px;
		}

	}

	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>