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>
			<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" :ontouch="true" :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" :ontouch="true" />
		</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: {
					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: {},
				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));
					} 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;
		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>