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 class="headers-right">
					<image @click="weChatService" src="/static/image/my/kefu.png" mode="">
					</image>
					<text>客服</text>
				</view> -->
			</view>
		</view>
		<view class="body-box" style="margin-top: 100px" v-if="type == 1">
			<view class=" dis j-s a-c" style="padding: 10px 10px 0 0;">
				<view class="statistics-title">新增人员汇总统计</view>
				<view class="search-data">
					<text v-for="(val, index) in year" :key="index" :class="val.startShow ? 'active' : ''"
						@click="onSeachYear(val, index, 1)">{{ val.lable }}</text>
				</view>
			</view>
			<view class="statistics-number ">
				<view v-if="level <= 4">
					<text>{{ echartsList.onePartnerNum || 0 }}</text>
					<text>一级合伙人</text>
				</view>
				<view v-if="level <= 3">
					<text>{{ echartsList.twoPartnerNum || 0 }}</text>
					<text>二级合伙人</text>
				</view>
				<view v-if="level <= 2">
					<text>{{ echartsList.threePartnerNum || 0 }}</text>
					<text>三级合伙人</text>
				</view>
				<view v-if="level == 1">
					<text>{{ echartsList.fourPartnerNum || 0 }}</text>
					<text>四级合伙人</text>
				</view>
				<!-- <view v-if="level==1">
						<text>{{ echartsList.onePartnerNum || 0 }}</text>
						<text>一级合伙人</text>
					</view>
					<view v-if="level<=2">
						<text>{{ echartsList.twoPartnerNum || 0 }}</text>
						<text>{{level==2?'一级合伙人':'二级合伙人'}}</text>
					</view>
					<view v-if="level<=3">
						<text>{{ echartsList.threePartnerNum || 0 }}</text>
						<text>{{level==3?'一级合伙人':level==2?'二级合伙人':'三级合伙人'}}</text>
					</view>
					<view v-if="level<=4">
						<text>{{ echartsList.fourPartnerNum || 0 }}</text>
						<text>{{level==4?'一级合伙人':level==3?'二级合伙人':level==2?'三级合伙人':'四级合伙人'}}</text>
					</view> -->
				<view>
					<text>{{ echartsList.workSum || 0 }}</text>
					<text>工作室</text>
				</view>
				<view>
					<text>{{ echartsList.deptSum || 0 }}</text>
					<text>团队</text>
				</view>
				<view>
					<text>{{ echartsList.deptManSum || 0 }}</text>
					<text>代理人</text>
				</view>
			</view>
			<view class="partner-type dis">
				<view style="width: 650px;overflow-x: auto;">
					<text :class="typeStatistics == val.value ? 'selected' : ''" v-for="val in partnerTypeOption"
						:key="val.value" @click="getPartnerType(val.value)">{{ val.lable }}</text>
				</view>
			</view>
			<o-empty v-if="echartsList.countUserNumVoList && echartsList.countUserNumVoList.length == 0" height="20vh" />
			<qiun-data-charts  v-else type="area" :opts="opts1" :chartData="chartData1"  />

		</view>
		<view class="body-box" v-if="type == 1">
			<view class=" dis j-s a-c" style="padding: 10px 10px 0 0;">
				<view class="statistics-title">新增人员占比分析</view>
				<view class="search-data">
					<text v-for="(val, index) in year" :key="index" :class="val.startShow ? 'active' : ''"
						@click="onSeachYear(val, index, 2)">{{ val.lable }}</text>
				</view>
			</view>
			<leverStaff @getPartnerType="getPartnerType2"></leverStaff>
			<!-- <o-empty v-if="echartsList.countUserNumVoList && echartsList.countUserNumVoList.length==0" height="20vh" /> -->
			<view class="charts-box">
			<qiun-data-charts type="ring" :opts="{ legend: { position: 'bottom' } }" :eopts="ringOpts" :chartData="chartsDataPie2"
                :echartsH5="true" :echartsApp="true" />
			</view>
		</view>
		<view class="body-box" style="padding-bottom: 10px;" v-if="type == 1">
			<view class=" dis j-s a-c" style="padding: 10px 10px 0 0;">
				<view class="statistics-title">排名</view>
			</view>
			<leverStaff @getPartnerType="getPartnerType3"></leverStaff>
			<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.deptManNum }}</view>
							<view style="color:#739EFF ">查看</view>
						</view>
					</view>
				</block>
				<!-- <o-empty v-if="directLsit.length==0"  /> -->

			</view>
		</view>
		<view class="body-box" style="margin-top: 100px;" v-if="type == 2">
			<view class=" dis j-s a-c" style="padding: 10px 10px 0 0;">
				<view class="statistics-title">新增人员汇总统计</view>
				<view class="search-data">
					<text v-for="(val, index) in year" :key="index" :class="val.startShow ? 'active' : ''"
						@click="onSeachYear(val, index, 1)">{{ val.lable }}</text>
				</view>
			</view>
			<view class="statistics-number ">
				<view>
					<text>{{ echartsList.countSum || 0 }}</text>
					<text>新增人员</text>
				</view>
				<view>
					<text>{{ echartsList.deptSum || 0 }}</text>
					<text>团队</text>
				</view>
				<view>
					<text>{{ echartsList.deptManSum || 0 }}</text>
					<text>代理人</text>
				</view>
			</view>
			<view class="statistics-type">
				<text :class="typeStatistics == 1 ? 'selected' : ''" @click="getStatistics(1)">团队</text>
				<text :class="typeStatistics == 2 ? 'selected' : ''" @click="getStatistics(2)">代理人</text>
			</view>
			<o-empty v-if="echartsList.countUserNumVoList && echartsList.countUserNumVoList.length == 0" height="20vh" />
			<qiun-data-charts  v-else type="area" :opts="opts1" :chartData="chartData1"  />
		</view>

	</view>
</template>
<script>
import {
	mapState,
} from "vuex"
import leverStaff from "../components/leverStaff.vue"
export default {
	components: {
		leverStaff
	},
	data() {
		return {
			beginTime:'',
			endTime:'',
			ringOpts: {
                color: [ '#02CDFF','#2D97FF '],
                legend: { show: false },
				dataLabel: true,
            },
			chartsDataPie2 :{},
			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: [
				{
					lable: '一级合伙人',
					value: '1'
				}, {
					lable: '二级合伙人',
					value: '2'
				}, {
					lable: '三级合伙人',
					value: '3'
				}, {
					lable: '四级合伙人',
					value: '4'
				},
			],
			// optsMax:10,
			opts1: {
				legend: {
				show: false // 设置图例不显示
				},
				yAxis: {
				gridType: "dash",
				dashLength: 2,
				data: [
					{
					min: 0,
					max: 10
					}
				]
				},
				extra: {
					area: {
						type: "curve",
						opacity: 0.2,
						addLine: true,
						width: 2,
						gradient: true,
						activeType: "hollow"
					}
					// line: {
					// 	type: "curve",
					// 	width: 2,
					// 	activeType: "hollow",
					// 	linearType: "custom"
					// }
				}
			},
			
			chartData1: {},
			directLsit: []
		}
	},
	computed: {
		...mapState(['userInfo']),
	},
	onLoad() {
		this.level = this.userInfo.sysUser.level
		if (this.level == 2) {
			this.partnerTypeOption = this.partnerTypeOption.slice(0, -1);
		}
		if (this.level == 3) {
			this.partnerTypeOption = this.partnerTypeOption.slice(0, -2);
		}
		if (this.level == 4) {
			this.partnerTypeOption = this.partnerTypeOption.slice(0, 1);
		}
		this.$http.get('/sys/qy/wechat/find/picture').then(res => {
			this.supportStaffUrl = res.data.supportStaffUrl
		})
	},
	onShow() {
		this.type = uni.getStorageSync('type')
		// if(this.type ==2){
		// 	this.queryData({type:1})
		// }
		// else{
		// 	this.queryData({type:1})
		// }
		this.queryData()
		if (this.type == 1) {
			this.analysisQueryData()
			this.rankingQueryData()
		}

	},

	methods: {
		canvasInit(canvas, width, height) {
			// 初始化画布
			this.canvas2d = canvas;
		},
		getPartnerType2(type) {
			this.typeStatistics2 = type
			this.analysisQueryData()
		},
		getPartnerType3(type) {
			this.typeStatistics3 = type
			this.rankingQueryData()
		},
		getPartnerType(type) {
			this.typeStatistics = type
			this.queryData()
		},
		getStatistics(type) {
			// 	uni.navigateTo({
			// 	url: "/pages/tools/achievement/achievement"
			// })
			// this.studioType=type
			this.typeStatistics = type
			this.queryData()
		},
		//点击跳转企业微信客服
		weChatService() {
			uni.share({
				provider: "weixin",
				openCustomerServiceChat: true,
				customerUrl: this.supportStaffUrl, //企业微信地址
				corpid: 'wwfe67d19509d43ec5', //企业id
				success: (res) => { },
				fail: (err) => { }
			});
		},
		onSeachYear(val, index, type) {
			this.year.map((value, i) => i === index ? value.startShow = !value.startShow : value.startShow = false);
			let now = new Date();
			let year = now.getFullYear();
			let month = now.getMonth() + 1; // 月份是从0开始的，所以需要加1
			let day = now.getDate();
			if (index == 0 && val.startShow) {
				let theDay = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
				this.beginTime=theDay + ' 00:00:01'
				this.endTime=theDay + ' 23:59:59'
				type == 1?this.queryData():this.analysisQueryData()
			}
			else if (index == 1 && val.startShow) {
				let dayOfWeek = now.getDay();
				let firstDayOfWeek = new Date(year, now.getMonth(), day - dayOfWeek + 1);
				let lastDayOfWeek = new Date(year, now.getMonth(), day + (7 - dayOfWeek));
				let monday = this.formatDate(firstDayOfWeek);
				let sunday = this.formatDate(lastDayOfWeek);
				this.beginTime=monday + ' 00:00:01'
				this.endTime= sunday + ' 23:59:59'
				type == 1?this.queryData():this.analysisQueryData()
			}
			else if (index == 2 && val.startShow) {
				this.beginTime= this.getCurrentMonthFirst() + ' 00:00:01'
				this.endTime= this.getCurrentMonthLast() + ' 23:59:59' 
				type == 1?this.queryData():this.analysisQueryData()
			}
			else {
				this.beginTime= ''
				this.endTime= ''
				type == 1?this.queryData():this.analysisQueryData()
			}

		},
		formatDate(date) {
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			month = month < 10 ? '0' + month : month;
			day = day < 10 ? '0' + day : day;
			return year + '-' + month + '-' + day;
		},
		getCurrentMonthFirst() {
			// 获取当月第一天数据
			let date = new Date()
			date.setDate(1)
			let month = parseInt(date.getMonth() + 1)
			let day = date.getDate()
			if (month < 10) month = '0' + month
			if (day < 10) day = '0' + day
			return date.getFullYear() + '-' + month + '-' + day
		},
		getCurrentMonthLast() {
			// 获取当月最后一天数据
			let date = new Date()
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			month = month < 10 ? '0' + month : month
			let day = new Date(year, month, 0)
			return year + '-' + month + '-' + day.getDate()
		},
		async analysisQueryData() {
			let params = {
				beginTime: this.beginTime,
				endTime: this.endTime,
				type: this.typeStatistics2,
			}
			let res = await this.$http.post('/APPPartner/getPartnerProportion', params);
			if (res.code == '200') {
				this.chartsDataPie2 = {
					"series": [{
						"data": [
							{  name: `新增`,value: res.data.newProportion,labelText:`历史:${res.data.oldProportion}%` },
							{name: "历史", value: res.data.oldProportion, labelText:`历史:${res.data.oldProportion}%` }
						]
					}]
				}
			}
		},
		async rankingQueryData() {
			let params = {
				type: this.typeStatistics3,
			}
			let res = await this.$http.get('/APPPartner/getLevelPartner', params);

			if (res.code == '200') {
				this.directLsit = res.data
			}
		},
		async queryData() {
			let params = {
				beginTime: this.beginTime,
				endTime: this.endTime,
				type: this.typeStatistics,
			}
			let res = {}
			if (this.type == 1) {
				res = await this.$http.post('/APPPartner/getPartnerCount', params);
			}
			else {
				res = await this.$http.post('/APPPartner/getCountUser', params);
			}
			if (res.code == '200') {
				this.echartsList = res.data
				if (res.data.countUserNumVoList && res.data.countUserNumVoList.length > 0) {
					let dateList = res.data.countUserNumVoList.map(function (item) {
						// return item.time.split(" ")[1] ? item.time.split(" ")[1] + ':00' : item.time.split(" ")[0]
						return item.time
					});
					let valueList = res.data.countUserNumVoList.map(function (item) {
						return item.countNum;
					});

					let rualit = {
						categories: dateList,
						series: [
							{
							name: "人数",
							// type: "line",
							data: valueList
						},
					]
					};
					valueList.sort((a,b) => a-b)
					this.opts1.yAxis.data[0].max= valueList[valueList.length - 1];  
					this.chartData1 = JSON.parse(JSON.stringify(rualit));
				}
			}
		}
	}
}
</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;
}

.search-data {
	color: #666666;
	border: 1px solid #EEEEEE;

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

	text {
		padding: 5px 6px;
		border-left: 1px solid #EEEEEE;
	}

	text:first-child {
		border-left: none
	}
}

.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;

	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>