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 && level!==5">
			<view class=" dis j-s a-c" style="padding: 10px 10px 0 0;">
				<view class="statistics-title">新增人员汇总统计</view>
				<year @queryData="queryData" @time="getTime"></year>
			
			</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>
					<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 && level!==5">
			<view class=" dis j-s a-c" style="padding: 10px 10px 0 0;">
				<view class="statistics-title">新增人员占比分析</view>
				<year @queryData="analysisQueryData" @time="getTime"></year>

			</view>
			<leverStaff @getPartnerType="getPartnerType2"></leverStaff>
			<o-empty v-if="!echartsList2.newProportion && !echartsList2.oldProportion" height="20vh" />
			<view v-else 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;" v-if="type == 1 && level!==5">
			<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 " @click="directDetail(item)">查看</view>
						</view>
					</view>
				</block>
				<!-- <o-empty v-if="directLsit.length==0"  /> -->

			</view>
		</view>
		<view class="body-box" style="margin-top: 100px;" v-if="type == 1&& level==5">
			<view class=" dis j-s a-c" style="padding: 10px 10px 0 0;">
				<view class="statistics-title">新增人员汇总统计</view>
				<year @queryData="queryData" @time="getTime"></year>

			</view>
			<view class="statistics-number ">
				<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="statistics-type">
				<text :class="typeStatistics == 1 ? 'selected' : ''" @click="getStatistics(1)">工作室</text>
				<text :class="typeStatistics == 2 ? 'selected' : ''" @click="getStatistics(2)">团队</text>
				<text :class="typeStatistics == 3 ? 'selected' : ''" @click="getStatistics(3)">代理人</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 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>
				<year @queryData="queryData" @time="getTime"></year>

			</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"
import year from "../components/year.vue"
export default {
	components: {
		leverStaff,
		year
	},
	data() {
		return {
			beginTime: '',
			endTime: '',
			ringOpts: {
				color: [ '#02CDFF ','#2D97FF'],
				legend: {
					show: false // 设置图例不显示
				},
				dataLabel: true,
			},
			chartsDataPie2: {},
			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: [
				{
					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.level!==5) {
			this.analysisQueryData()
			this.rankingQueryData()
		}

	},

	methods: {
		canvasInit(canvas, width, height) {
			// 初始化画布
			this.canvas2d = canvas;
		},
		directDetail(val){
			uni.navigateTo({
					url: "/pages/statistics/statisticsDetail?key=" + encodeURIComponent(JSON.stringify(val.partnerIds))
				})
		},
		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) => { }
			});
		},
		
		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.echartsList2=res.data
				this.chartsDataPie2 = {
					series: [{
						"data": [
							{ name: `新增`, value: res.data.newProportion, 
							  labelText: `${res.data.newProportion?'新增：'+res.data.newProportion+'%':'新增：0%'}` },
							{ name: "历史", value: res.data.oldProportion, 
							  labelText: `${res.data.oldProportion?'历史：'+res.data.oldProportion+'%':'历史：0%'}`
							 }
						]
						// "data": [
						// 	{ name: `新增`, value: res.data.newProportion?res.data.newProportion:0},
						// 	{ name: "历史", value: res.data.oldProportion?res.data.oldProportion:0}
						// ]
					}]
				}
			
			}
		},
		async rankingQueryData() {
			let params = {
				type: this.typeStatistics3,
			}
			let res = await this.$http.get('/APPPartner/getLevelPartner', params);

			if (res.code == '200') {
				this.directLsit = res.data
			}
		},
		getTime(beginTime,endTime){
			this.beginTime=beginTime
			this.endTime=endTime
		},
		async queryData() {
			let params = {
				beginTime: this.beginTime,
				endTime: this.endTime,
				type: this.typeStatistics,
			}
			let res = {}
			if (this.type == 1 &&this.level!==5) {
				res = await this.$http.post('/APPPartner/getPartnerCount', params);
			}else if (this.type == 1 &&this.level==5) {
				params = {
					beginTime: this.beginTime,
					endTime: this.endTime,
					number: this.typeStatistics,
				}
				res = await this.$http.post('/APPPartner/getFivePartnerCount', 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
							},
						]
					};
					
					this.chartData1 = JSON.parse(JSON.stringify(rualit));
					valueList.sort((a, b) => a - b)
					this.opts1.yAxis.data[0].max = valueList[valueList.length - 1];
				}
				else {
					this.echartsList.countUserNumVoList = []
				}
			}
		}
	}
}
</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>