weapp-online/pages/statistics/statistics.vue

<template>
	<view class="statistics">
		<custom-nav>
			<view class="current-date" @click="goBack"><text class="iconfont iconzuojiantou" style="font-size:45rpx;color:#fff;"></text></view>
		</custom-nav>
		<view style="background:url(https://api.szy.jiuweiyun.cn/images/data_bg.png) no-repeat;background-size:100% 100%;width: 100%;height:644rpx;"></view>
		<view class="statistics_con">
			<view class="qiun-columns">
				<view class="title">代理等级组成及占比</view>
				<view class="circle flexS">
					<view class="qiun-charts"><canvas canvas-id="levelRing" id="levelRing" class="charts"></canvas></view>
					<view class="scale">
						<view>
							<view v-for="(item, index) in level" :key="index" style="display:flex;flex-direction: column;">
								<view class="flexS">
									<view class="hint" :style="{ background: item.color }"></view>
									<view>{{ item.name }}</view>
								</view>
							</view>
						</view>
						<view style="margin:0 10rpx;">
							<view class="intr">数量</view>
							<view v-for="(item, index) in level" :key="index" class="bold">{{ item.data }}</view>
						</view>
						<view>
							<view class="intr">比例</view>
							<view v-for="(item, index) in level" :key="index" class="bold">{{ Math.round((item.data / allLevel) * 10000) / 100.0 + '%' }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="qiun-columns">
				<view class="title">代理性别组成及占比</view>
				<view class="circle flexS">
					<view class="qiun-charts"><canvas canvas-id="sexRing" id="sexRing" class="charts"></canvas></view>
					<view class="scale">
						<view>
							<view v-for="(item, index) in sex" :key="index" style="display:flex;flex-direction: column;">
								<view class="flexS">
									<view class="hint" :style="{ background: item.color }"></view>
									<view>{{ item.name }}</view>
								</view>
							</view>
						</view>
						<view style="margin:0 10rpx;">
							<view class="intr">数量</view>
							<view v-for="(item, index) in sex" :key="index" class="bold">{{ item.data }}</view>
						</view>
						<view>
							<view class="intr">比例</view>
							<view v-for="(item, index) in sex" :key="index" class="bold">{{ Math.round((item.data / allSex) * 10000) / 100.0 + '%' }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="qiun-columns age ">
				<view class="title">代理年龄组成及占比</view>
				<view class="circle flexS">
					<view class="qiun-charts"><canvas canvas-id="ageRing" id="ageRing" class="charts"></canvas></view>
					<view class="scale">
						<view>
							<view v-for="(item, index) in ages" :key="index" style="display:flex;flex-direction: column;">
								<view class="flexS">
									<view class="hint" :style="{ background: item.color }"></view>
									<view>{{ item.state }}</view>
								</view>
							</view>
						</view>
						<view style="margin:0 10rpx;">
							<view class="intr">数量</view>
							<view v-for="(item, index) in ages" :key="index" class="bold">{{ item.data }}</view>
						</view>
						<view>
							<view class="intr">比例</view>
							<view v-for="(item, index) in ages" :key="index" class="bold">{{ Math.round((item.data / allAges) * 10000) / 100.0 + '%' }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="strip">
				<view class="strip_con">
					<view class="title">团队老大人数及占比</view>
					<view class="strip_list flexB leader" v-for="(item, i) in leader" :key="i">
						<view class="label">
							<text>{{ item.name | getName }}</text>
							<text style="font-size:24rpx;color:#999;">{{ item.phone }}</text>
						</view>
						<view class="block flexS">
							<view class="blue" :style="{ width: Math.round((item.val / allLeader) * 10000) / 100.0 + '%' }"></view>
							<view class="ratio">{{ Math.round((item.val / allLeader) * 10000) / 100.0 + '%' }}</view>
						</view>
						<view class="line"></view>
						<text class="num">{{ item.val }}人</text>
					</view>
					<view class="more" @click="getMoreLeader">
						<text>{{ isPack ? '收起' : '查看更多' }}</text>
						<text class="iconfont iconshuangxiajiantou-" v-if="!isPack"></text>
						<text class="iconfont iconshuangshangjiantou-" v-else></text>
					</view>
				</view>
			</view>
			<view class="strip">
				<view class="strip_con">
					<view class="title">各省份人数及占比</view>
					<view class="strip_list flexB" v-for="(item, i) in province" :key="i">
						<text class="label">{{ item.name | getName }}</text>
						<view class="block flexS">
							<view class="blue" :style="{ width: Math.round((item.val / allprovince) * 10000) / 100.0 + '%' }"></view>
							<view class="ratio">{{ Math.round((item.val / allprovince) * 10000) / 100.0 + '%' }}</view>
						</view>
						<view class="line"></view>
						<text style="font-size:28rpx;color:#333;font-weight:600;" class="num">{{ item.val }}人</text>
					</view>
					<view class="more" @click="getMoreProvince">
						<text>{{ isMore ? '收起' : '查看更多' }}</text>
						<text class="iconfont iconshuangxiajiantou-" v-if="!isMore"></text>
						<text class="iconfont iconshuangshangjiantou-" v-else></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uCharts from '@/components/u-charts/u-charts.js';
import customNav from '../../components/custom-nav.vue';
import { getData, countData } from '../../api/data.js';
var _self;
var canvaRing = null;

export default {
	data() {
		return {
			cWidth: '', //圆环图宽度
			cHeight: '', //圆环图高度
			pixelRatio: 1,
			serverData: '',
			level: '', //等级
			allLevel: '', //等级人数总数
			sex: '', //性别
			allSex: '', //性别总数
			leader: '', //团队老大（前6）
			allLeader: '', //所有人数
			allLeaderData: '', //团队老大（所有）
			province: '', //省份（前8）
			allprovince: '', //所有人数
			allprovinceData: '', //省份 所有
			ages: '', //年龄
			allAges: '', //总人数
			isPack: false, //团队老大 false查看更多  收起
			isMore: false // 省份 false查看更多  收起
		};
	},
	onLoad() {
		_self = this;
		this.cWidth = uni.upx2px(300);
		this.cHeight = uni.upx2px(300);
	},
	onShow() {
		this.getData();
	},
	onPullDownRefresh() {
		if (uni.getStorageSync('token')) {
			this.getData();
		} else {
			uni.stopPullDownRefresh();
		}
	},
	filters: {
		getName(name) {
			if (name) {
				return name.length > 4 ? name.slice(0, 4) + '...' : name;
			}
			return '';
		}
	},
	components: {
		customNav
	},
	methods: {
		//返回上一页
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		//点击查看更多团队老大
		getMoreLeader() {
			let that = this;
			that.isPack = !that.isPack;
			if (that.isPack) {
				that.leader = that.allLeaderData;
			} else {
				that.leader = that.allLeaderData.slice(0, 6);
			}
		},
		//点击查看更多省份
		getMoreProvince() {
			let that = this;
			that.isMore = !that.isMore;
			if (that.isMore) {
				that.province = that.allprovinceData;
			} else {
				that.province = that.allprovinceData.slice(0, 6);
			}
		},
		//根据数组中对象某个值排序
		compare(property, desc) {
			return function(a, b) {
				var value1 = a[property];
				var value2 = b[property];
				if (desc == true) {
					// 升序排列
					return value1 - value2;
				} else {
					// 降序排列
					return value2 - value1;
				}
			};
		},
		getData() {
			getData()
				.then(res => {
					if (res.code == 200) {
						let levelData = res.data.level;
						levelData.map(i => {
							if (i.name == '代理公司') {
								this.$set(i, 'color', '#82CCFF');
								return false;
							}
							if (i.name == '销售经理') {
								this.$set(i, 'color', '#508CEC');
								return false;
							}
							this.$set(i, 'color', '#F56367');
						});
						this.level = levelData.sort(this.compare('data', false));
						this.allLevel = res.data.level_total;
						let sexData = res.data.sex;
						sexData.map(i => {
							if (i.name == '男') {
								this.$set(i, 'color', '#FFD182');
							} else {
								this.$set(i, 'color', '#F56367');
							}
						});
						this.sex = sexData.sort(this.compare('data', false));
						this.allSex = res.data.sex_total;
						_self.levelRing('levelRing', this.level);
						_self.sexRing('sexRing', this.sex);
					} else {
						uni.showModal({
							content: res.message || '获取失败',
							showCancel: false
						});
					}
				})
				.finally(() => {
					uni.stopPullDownRefresh();
				});
			countData()
				.then(res => {
					if (res.code == 200) {
						let ages = res.data.ages;
						ages.map(i => {
							if (i.name == '<30') {
								this.$set(i, 'color', '#CF429F');
								this.$set(i, 'state', '小于30岁');
								return false;
							}
							if (i.name == '30-40') {
								this.$set(i, 'color', '#F56367');
								this.$set(i, 'state', '30-40岁');
								return false;
							}
							if (i.name == '40-50') {
								this.$set(i, 'color', '#54D798');
								this.$set(i, 'state', '40-50岁');
								return false;
							}
							if (i.name == '50-60') {
								this.$set(i, 'color', '#B5DA4C');
								this.$set(i, 'state', '50-60岁');
								return false;
							}
							if (i.name == '>=60') {
								this.$set(i, 'color', '#A864F4');
								this.$set(i, 'state', '60岁以上');
								return false;
							}
						});
						this.ages = ages.sort(this.compare('data', false));
						_self.ageRing('ageRing', this.ages);
						this.allAges = this.ageSum(res.data.ages);
						let leader = res.data.crowns;
						let lead = [];
						for (let i in leader) {
							var rt = /(.+)?(?:\(|（)(.+)(?=\)|）)/.exec(i);
							lead.push({ name: rt[1], phone: rt[2], val: leader[i] });
						}
						this.allLeaderData = lead.sort(this.compare('val', false));
						this.leader = this.allLeaderData.slice(0, 6);
						let pro = res.data.province;
						let proArr = [];
						for (let i in pro) {
							proArr.push({ name: i, val: pro[i] });
						}
						this.allprovinceData = proArr.sort(this.compare('val', false));
						this.province = this.allprovinceData.slice(0, 8);

						var provinceArr = [];
						provinceArr = Object.values(res.data.province);
						this.allprovince = this.sum(provinceArr);
						var leaderArr = [];
						leaderArr = Object.values(res.data.crowns);
						this.allLeader = this.sum(leaderArr);
					} else {
						uni.showModal({
							content: res.message || '请求失败',
							showCancel: false
						});
					}
				})
				.finally(() => {
					uni.stopPullDownRefresh();
				});
		},

		toJSON() {},
		ageSum(arr) {
			var s = 0;
			for (var i = arr.length - 1; i >= 0; i--) {
				s += arr[i].data;
			}
			return s;
		},
		sum(arr) {
			var s = 0;
			for (var i = arr.length - 1; i >= 0; i--) {
				s += arr[i];
			}
			return s;
		},
		levelRing(canvasId, chartData) {
			canvaRing = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'ring',
				fontSize: 11,
				legend: { show: false },
				subtitle: {
					name: '等级组成',
					color: '#999999',
					fontSize: 14 * _self.pixelRatio,
					offsetY: 1 * _self.pixelRatio
				},
				extra: {
					pie: {
						offsetAngle: -45,
						ringWidth: 20 * _self.pixelRatio,
						labelWidth: 15
					}
				},
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				series: chartData,
				animation: true,
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				disablePieStroke: true,
				dataLabel: false
			});
		},
		sexRing(canvasId, chartData) {
			canvaRing = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'ring',
				fontSize: 11,
				legend: { show: false },
				subtitle: {
					name: '性别组成',
					color: '#999999',
					fontSize: 14 * _self.pixelRatio,
					offsetY: 1 * _self.pixelRatio
				},
				extra: {
					pie: {
						offsetAngle: -45,
						ringWidth: 20 * _self.pixelRatio,
						labelWidth: 15
					}
				},
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				series: chartData,
				animation: true,
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				disablePieStroke: true,
				dataLabel: false
			});
		},
		ageRing(canvasId, chartData) {
			canvaRing = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'ring',
				fontSize: 11,
				legend: { show: false },
				subtitle: {
					name: '年龄组成',
					color: '#999999',
					fontSize: 14 * _self.pixelRatio,
					offsetY: 1 * _self.pixelRatio
				},
				extra: {
					pie: {
						offsetAngle: -45,
						ringWidth: 20 * _self.pixelRatio,
						labelWidth: 15
					}
				},
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				series: chartData,
				animation: true,
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				disablePieStroke: true,
				dataLabel: false
			});
		}
	}
};
</script>
<style>
page {
	width: 100%;
	height: 100%;
	background-color: #fff;
}
</style>
<style lang="scss">
.statistics {
	width: 100%;
	padding-bottom: 50rpx;
	overflow-x: hidden;
}
.statistics_con {
	margin-top: -344rpx;
}
.title {
	font-size: 32rpx;
	color: #333;
	font-weight: 600;
}
.more {
	width: 100%;
	text-align: center;
	padding: 30rpx 0;
	text {
		font-size: 28rpx;
		color: #999999;
	}
	image {
		height: 28rpx;
		width: 28rpx;
		vertical-align: -4rpx;
		margin-left: 5rpx;
	}
}
.strip,
.qiun-columns {
	width: 690rpx;
	margin: 30rpx auto 0;
	background: #fff;
	box-shadow: 0 0 12rpx rgba(67, 147, 255, 0.19);
	box-sizing: border-box;
	border-radius: 24rpx;
}
.qiun-columns {
	height: 386rpx;
	.title {
		padding: 20rpx 0 0 30rpx;
	}
	.circle {
		width: 95%;
		margin: 0 auto;
		.scale {
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			> view {
				> view {
					margin-bottom: 15rpx;
					text-align: center;
				}
			}
			.bold {
				font-weight: 600;
			}
			.intr {
				color: #508cec;
			}
			.hint {
				height: 16rpx;
				width: 16rpx;
				margin-right: 10rpx;
			}
		}
		.name {
			text {
				font-size: 24rpx;
				color: #508cec;
			}
		}
		.data_con {
			margin-top: 15rpx;
			text {
				font-size: 28rpx;
				font-weight: 600;
			}
		}
		.name,
		.data_con {
			width: 230rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			text:last-child {
				margin-left: 15rpx;
			}
		}
	}
	.qiun-charts {
		width: 300rpx;
		height: 300rpx;
	}
	.charts {
		width: 300rpx;
		height: 300rpx;
	}
}
.age {
	height: 420rpx;
}
.strip_con {
	width: 630rpx;
	margin: 0 auto;
	.title {
		padding: 20rpx 0;
	}
	.strip_list {
		margin-top: 30rpx;
		position: relative;
		.label {
			width: 180rpx;
			font-size: 32rpx;
			color: #333;
			flex-shrink: 0;
		}
		.line {
			width: 340rpx;
			height: 2rpx;
			border-bottom: 1rpx dashed #8a8a8a;
			z-index: 88;
		}
		.num {
			width: 100rpx;
			flex-shrink: 0;
			text-align: center;
			font-size: 28rpx;
			color: #333;
			font-weight: 600;
		}
		.block {
			width: 340rpx;
			position: absolute;
			top: 2rpx;
			left: 153rpx;
			z-index: 99;
			.blue {
				height: 12rpx;
				background: #508cec;
				border-radius: 10rpx;
			}
			.ratio {
				color: #508cec;
				font-size: 28rpx;
				font-weight: 600;
				background-color: #fff;
				padding-left: 14rpx;
			}
		}
	}
	.leader {
		.label {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.block {
			top: 19rpx;
			left: 174rpx;
		}
	}
}
</style>