newEdition/pages/center/Piabodata/Employeesstatistics.vue

<template>
	<view class="box">
		<view class="boxtittabs">
			<div class="items" @tap="screenShow = true">{{ showTimeText }}
				<u-icon name="arrow-down" size="24" style="padding-left: 12rpx"></u-icon>
			</div>
			<div class="items" @tap="showTemplate = true">{{ showBeText }}
				<u-icon name="arrow-down" size="24" style="padding-left: 12rpx"></u-icon>
			</div>
		</view>

		<!-- 销讲业务 -->
		<u-select :mask-close-able="false" label-name="templateName" value-name="id" v-model="showTemplate"
			mode="single-column" :list="templateList" @cancel="templateCancel" @confirm="templateConfirm"></u-select>

		<view class="single">
			<view class="title">
				<view class="title1" style="flex: 1;">接待量排名（TOP10）</view>
			</view>
			<view class="hejisan">
				<view class="sanbox1">
					<view class="text1-2">{{newlisttabinfo1.total}}</view>
					<view class="text1-1">合计接待次数</view>
				</view>
				<view class="sanbox1">
					<view class="text1-2">{{newlisttabinfo1.count}}</view>
					<view class="text1-1">顾问人数</view>
				</view>
				<view class="sanbox1">
					<view class="text1-2">{{newlisttabinfo1.avg}}</view>
					<view class="text1-1">人均接待次数</view>
				</view>
			</view>

			<view class="jindu" style="margin-top: 20rpx;">
				<view v-if="newlisttabinfo1.result.length" class="jindu-box"
					v-for="(item,index) in newlisttabinfo1.result" :key="index">
					<view class="jindu-boxche">
						<view class="jindu-name u-flex" style='width: 170rpx' v-if="item.name">
							<image v-if="index==0" class="sort-img" src="/static/images/top1.png" mode="" />
							<image v-if="index==1" class="sort-img" src="/static/images/top2.png" mode="" />
							<image v-if="index==2" class="sort-img" src="/static/images/top3.png" mode="" />
							<view class="sort-number" v-if="index>2">{{index+1}}</view>
							{{item.name.substring(0,4)}}
						</view>
						<view class="progress-cus">
							<view class="color1" v-if="index==0" :style="'width:'+ item.zxl||0 + '%'"></view>
							<view class="color2" v-if="index==1" :style="'width:'+ getPercent(item.zxl,1) + '%'"></view>
							<view class="color3" v-if="index==2" :style="'width:'+ getPercent(item.zxl,1) + '%'"></view>
							<view class="color4" v-if="index>2" :style="'width:'+ getPercent(item.zxl,1) + '%'"></view>
						</view>
						<view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}次</view>
					</view>
				</view>
				<view v-if="newlisttabinfo1.result.length==0" style="width: 100%;text-align: center;margin-top: 60rpx;">
					暂无数据
				</view>
			</view>
		</view>

		<view class="single">
			<view class="title">
				<view class="title1" style="flex: 1;">平均执行率排行（TOP10）</view>
			</view>
			<view class="hejisan">
				<view class="sanbox1" style="width: 40%;">
					<view class="text1-2">{{newlisttabinfo3.count}}</view>
					<view class="text1-1">顾问人数</view>
				</view>
				<view class="sanbox1" style="width: 25%;">
					<view class="text1-2">{{newlisttabinfo3.avg}}%</view>
					<view class="text1-1">人均执行率</view>
				</view>
			</view>
			<view class="jindu" style="margin-top: 20rpx;">
				<view v-if="newlisttabinfo3.result.length" class="jindu-box"
					v-for="(item,index) in newlisttabinfo3.result" :key="index">
					<view class="jindu-boxche">
						<view class="jindu-name u-flex" style='width: 170rpx' v-if="item.name">
							<image v-if="index==0" class="sort-img" src="/static/images/top1.png" mode="" />
							<image v-if="index==1" class="sort-img" src="/static/images/top2.png" mode="" />
							<image v-if="index==2" class="sort-img" src="/static/images/top3.png" mode="" />
							<view class="sort-number" v-if="index>2">{{index+1}}</view>
							{{item.name.substring(0,4)}}
						</view>
						<!-- <view class="jindu-name" v-if="item.name">{{item.name.substring(0,4)}}</view> -->
						<!-- <view class="progress-cus">
							<view class="color" :style="'width:'+ item.zxl||0 + '%'" ></view>
						</view> -->
						<view class="progress-cus">
							<view class="color1" v-if="index==0" :style="'width:'+ getPercent1(item.zxl) + '%'"></view>
							<view class="color2" v-if="index==1" :style="'width:'+ getPercent1(item.zxl) + '%'"></view>
							<view class="color3" v-if="index==2" :style="'width:'+ getPercent1(item.zxl) + '%'"></view>
							<view class="color4" v-if="index>2" :style="'width:'+ getPercent1(item.zxl) + '%'"></view>
						</view>
						<view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
					</view>
				</view>
				<view v-if="newlisttabinfo3.result.length==0" style="width: 100%;text-align: center;margin-top: 60rpx;">
					暂无数据
				</view>
			</view>
		</view>
		<view class="single">
			<view class="title">
				<view class="title1" style="flex: 1;">录音时长（TOP10）</view>
			</view>
			<view class="hejisan">
				<view class="sanbox1">
					<view class="text1-2">{{newlisttabinfo2.total}}</view>
					<view class="text1-1">合计时长/分钟</view>
				</view>
				<view class="sanbox1">
					<view class="text1-2">{{newlisttabinfo2.count}}</view>
					<view class="text1-1">顾问人数</view>
				</view>
				<view class="sanbox1">
					<view class="text1-2">{{newlisttabinfo2.avg}}</view>
					<view class="text1-1">人均录音时长/分钟</view>
				</view>
			</view>
			<view class="jindu" style="margin-top: 20rpx;">
				<view v-if="newlisttabinfo2.result.length" class="jindu-box"
					v-for="(item,index) in newlisttabinfo2.result" :key="index">
					<view class="jindu-boxche">
						<view class="jindu-name u-flex" style='width: 170rpx' v-if="item.name">
							<image v-if="index==0" class="sort-img" src="/static/images/top1.png" mode="" />
							<image v-if="index==1" class="sort-img" src="/static/images/top2.png" mode="" />
							<image v-if="index==2" class="sort-img" src="/static/images/top3.png" mode="" />
							<view class="sort-number" v-if="index>2">{{index+1}}</view>
							{{item.name.substring(0,4)}}
						</view>
						<view class="progress-cus">
							<view class="color1" v-if="index==0" :style="'width:'+ item.zxl||0 + '%'"></view>
							<view class="color2" v-if="index==1" :style="'width:'+ getPercent(item.zxl,2)+ '%'"></view>
							<view class="color3" v-if="index==2" :style="'width:'+ getPercent(item.zxl,2)+ '%'"></view>
							<view class="color4" v-if="index>2" :style="'width:'+ getPercent(item.zxl,2)+ '%'"></view>
						</view>
						<view class="jindu-zxl u-line-1">{{item.zxl==null?0:item.zxl}}分钟</view>
					</view>
				</view>
				<view v-if="newlisttabinfo2.result.length==0" style="width: 100%;text-align: center;margin-top: 60rpx;">
					暂无数据
				</view>
			</view>
		</view>

		<view class="single">
			<view class="title">
				<view class="title1" style="flex: 1;">违禁次数排名（TOP10）</view>
			</view>
			<view class="hejisan">
				<view class="sanbox1">
					<view class="text1-2">{{newlisttabinfo4.total}}</view>
					<view class="text1-1">合计次数</view>
				</view>
				<view class="sanbox1">
					<view class="text1-2">{{newlisttabinfo4.count}}人</view>
					<view class="text1-1">顾问人数</view>
				</view>
				<view class="sanbox1">
					<view class="text1-2">{{newlisttabinfo4.avg}}</view>
					<view class="text1-1">人均违禁次数</view>
				</view>
			</view>
			<view class="jindu" style="margin-top: 20rpx;min-height: 300rpx">
				<view v-if="newlisttabinfo4.result.length" class="jindu-box"
					v-for="(item,index) in newlisttabinfo4.result" :key="index">
					<view class="jindu-boxche">
						<view class="jindu-name u-flex" style='width: 170rpx' v-if="item.name">
							<image v-if="index==0" class="sort-img" src="/static/images/top1.png" mode="" />
							<image v-if="index==1" class="sort-img" src="/static/images/top2.png" mode="" />
							<image v-if="index==2" class="sort-img" src="/static/images/top3.png" mode="" />
							<view class="sort-number" v-if="index>2">{{index+1}}</view>
							{{item.name.substring(0,4)}}
						</view>

						<view class="progress-cus">
							<view class="color1" v-if="index==0" :style="'width:'+ item.zxl||0 + '%'"></view>
							<view class="color2" v-if="index==1" :style="'width:'+ getPercent(item.zxl,4)+ '%'"></view>
							<view class="color3" v-if="index==2" :style="'width:'+ getPercent(item.zxl,4) + '%'"></view>
							<view class="color4" v-if="index>2" :style="'width:'+ getPercent(item.zxl,4)+ '%'"></view>
						</view>
						<view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}次</view>
					</view>
				</view>
				<view v-if="newlisttabinfo4.result.length==0" style="width: 100%;text-align: center;margin-top: 60rpx;">
					暂无数据
				</view>
			</view>
		</view>

		<view class="single">
			<view class="title">
				<view class="title1" style="flex: 1;">接待未标顾问排名（TOP10）</view>
			</view>
			<view class="hejisan">
				<view class="sanbox1">
					<view class="text1-2">{{newlisttabinfo5.total||0}}</view>
					<view class="text1-1">合计</view>
				</view>
				<view class="sanbox1">
					<view class="text1-2">{{newlisttabinfo5.count||0}}人</view>
					<view class="text1-1">顾问</view>
				</view>
				<view class="sanbox1">
					<view class="text1-2">{{newlisttabinfo5.avg||0}}</view>
					<view class="text1-1">均值</view>
				</view>
			</view>
			<view class="jindu" style="margin-top: 20rpx;min-height: 300rpx">
				<view v-if="newlisttabinfo5.result.length!=0" class="jindu-box"
					v-for="(item,index) in newlisttabinfo5.result" :key="index">
					<view class="jindu-boxche">
						<view class="jindu-name u-flex" style='width: 170rpx' v-if="item.name">
							<image v-if="index==0" class="sort-img" src="/static/images/top1.png" mode="" />
							<image v-if="index==1" class="sort-img" src="/static/images/top2.png" mode="" />
							<image v-if="index==2" class="sort-img" src="/static/images/top3.png" mode="" />
							<view class="sort-number" v-if="index>2">{{index+1}}</view>
							{{item.name.substring(0,4)}}
						</view>
						<view class="progress-cus">
							<view class="color1" v-if="index==0" :style="'width:'+ item.zxl||0 + '%'"></view>
							<view class="color2" v-if="index==1" :style="'width:'+ getPercent(item.zxl,5)+ '%'"></view>
							<view class="color3" v-if="index==2" :style="'width:'+ getPercent(item.zxl,5) + '%'"></view>
							<view class="color4" v-if="index>2" :style="'width:'+ getPercent(item.zxl,5)+ '%'"></view>
						</view>
						<view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}次</view>
					</view>
				</view>
				<view v-if="newlisttabinfo5.result.length==0" style="width: 100%;text-align: center;margin-top: 60rpx;">
					暂无数据
				</view>
			</view>
		</view>
		<u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>

		<!-- 加载组件 -->
		<u-loadings v-model="LOADING"></u-loadings>

		<!-- 更多筛选 -->
		<u-popup v-model="screenShow" mode="bottom" height="368">
			<view class="screen">
				<view class="boxtittab">
					<view class="tabbox">
						<view :class="{ activecllasscet: activeTotal == 4 }" @click="tabtimetap(4, '近七天')">近七天</view>
					</view>
					<view class="tabbox">
						<view :class="{ activecllasscet: activeTotal == 5 }" @click="tabtimetap(5, '近15天')">近15天</view>
					</view>
					<view class="tabbox">
						<view :class="{ activecllasscet: activeTotal == 6 }" @click="tabtimetap(6, '近30天')">近30天</view>
					</view>
					<view class="tabbox">
						<view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3, '自定义')">自定义</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var app = getApp();
	var util = require("../../../utils/util.js");
	var config = require("../../../config");
	export default {
		data() {
			return {
				activeTotal: 4,
				totalTimeShow: false,
				// 项目id
				houseId: '',
				lastEndDate: '',
				lastStartDate: '',
				newlisttabinfo1: {
					avg: '',
					count: '',
					total: '',
					result: [],
				},
				newlisttabinfo2: {
					avg: '',
					count: '',
					total: '',
					result: [],
				},
				newlisttabinfo3: {
					avg: '',
					count: '',
					total: '',
					result: [],
				},
				newlisttabinfo4: {
					avg: '',
					count: '',
					total: '',
					result: [],
				},
				newlisttabinfo5: {
					avg: '',
					count: '',
					total: '',
					result: [],
				},


				screenShow: false, // 时间筛选弹窗
				showTimeText: '近一周', // 展示文字
				showBeText: '全部业务', // 
				templateList: [], // 销讲业务
				showTemplate: false, // 展示选择销讲业务弹窗
				marketingBusiness: '', // 选择的业务id
			};
		},
		onLoad() {
			this.LOADING = true
			// 获取项目id
			this.houseId = uni.getStorageSync('buildingID').id;
			this.init()
			this.getMarketingBusiness()
		},
		computed: {

		},
		onPullDownRefresh() {
			this.init()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: { // 销讲业务方法
			templateCancel() {
				this.showTemplate = false;
			},

			// 确认选择销讲业务
			templateConfirm(e) {
				this.showTemplate = false;
				this.marketingBusiness = e[0].value
				this.showBeText = e[0].label
				this.init()
			},


			// 获取销讲业务
			getMarketingBusiness() {
				this.$u.get('/customer/marketingBusiness', {
					houseId: uni.getStorageSync('buildingID').id,
				}).then(res => {
					this.templateList = res
					this.templateList.unshift({
						templateName: '全部业务',
						id: ''
					})
				})
			},

			getPercent(num, type) {
				if (this.newlisttabinfo1.result && this.newlisttabinfo1.result.length && type == 1) {
					let index0 = this.newlisttabinfo1.result[0]
					let percent = num / (index0.zxl == 0 ? 1 : index0.zxl) * 100
					return percent.toFixed(2)

				} else if (this.newlisttabinfo2.result && this.newlisttabinfo2.result.length && type == 2) {
					let index0 = this.newlisttabinfo2.result[0]
					let percent = num / (index0.zxl == 0 ? 1 : index0.zxl) * 100
					return percent.toFixed(2)

				} else if (this.newlisttabinfo4.result && this.newlisttabinfo4.result.length && type == 4) {
					let index0 = this.newlisttabinfo4.result[0]
					let percent = num / (index0.zxl == 0 ? 1 : index0.zxl) * 100
					return percent.toFixed(2)
				} else if (this.newlisttabinfo5.result && this.newlisttabinfo5.result.length && type == 5) {
					let index0 = this.newlisttabinfo5.result[0]
					let percent = num / (index0.zxl == 0 ? 1 : index0.zxl) * 100
					return percent.toFixed(2)
				} else {
					return 0
				}
			},
			getPercent1(num) {
				return num || 0
			},
			init() {
				this.newlisttabinfo1 = {
						avg: '',
						count: '',
						total: '',
						result: [],
					},
					this.newlisttabinfo2 = {
						avg: '',
						count: '',
						total: '',
						result: [],
					},
					this.newlisttabinfo3 = {
						avg: '',
						count: '',
						total: '',
						result: [],
					},
					this.newlisttabinfo4 = {
						avg: '',
						count: '',
						total: '',
						result: [],
					}
				this.newlisttabinfo2 = {
					avg: '',
					count: '',
					total: '',
					result: [],
				}
				this.newlisttabinfo3 = {
					avg: '',
					count: '',
					total: '',
					result: [],
				}
				this.newlisttabinfo4 = {
					avg: '',
					count: '',
					total: '',
					result: [],
				}
				this.newlisttabinfo5 = {
					avg: '',
					count: '',
					total: '',
					result: [],
				}

				var activeTotal = 0;
				if (this.activeTotal == 3) {
					activeTotal = null;
				} else {
					activeTotal = this.activeTotal;
					this.lastEndDate = '';
					this.lastStartDate = '';
				}
				var promse = {
					timeType: activeTotal,
					lastStartDate: this.lastStartDate,
					lastEndDate: this.lastEndDate,
					houseId: this.houseId,
					marketingBusiness: this.marketingBusiness,
				}
				this.staffStatisticsReceptionTop10(promse)
				this.staffStatisticsRecordingTimTop10(promse)
				this.staffStatisticsExecutionRateTop10(promse)
				this.staffStatisticsProhibitedTop10(promse)
				this.staffStatisticsUnlabeledTop10(promse)
			},
			//接待量排名
			staffStatisticsReceptionTop10(promse) {

				this.$u.post('/cusLvStatistics/staffStatisticsReceptionTop10', promse).then(res => {
					res.result.forEach(item => {
						item.zxl = item.data
						item.name = item.accountName
					})
					res.result = this.dealData(res.result)
					this.newlisttabinfo1 = res;
				})
			},
			//录音时长
			staffStatisticsRecordingTimTop10(promse) {
				this.$u.post('/cusLvStatistics/staffStatisticsRecordingTimTop10', promse).then(res => {
					res.result.forEach(item => {
						item.zxl = item.data
						item.name = item.accountName
					})
					res.result = this.dealData(res.result)
					this.newlisttabinfo2 = res;
				})
			},
			//销讲
			staffStatisticsExecutionRateTop10(promse) {
				this.$u.post('/cusLvStatistics/staffStatisticsExecutionRateTop10', promse).then(res => {
					res.result.forEach(item => {
						item.zxl = item.data;
						item.zxl1 = item.data;
						item.name = item.accountName
					})
					this.newlisttabinfo3 = res;
				})
			},
			//j禁忌
			staffStatisticsProhibitedTop10(promse) {
				this.$u.post('/cusLvStatistics/staffStatisticsProhibitedTop10', promse).then(res => {
					res.result.forEach(item => {
						item.zxl = item.data
						item.name = item.accountName
					})
					res.result = this.dealData(res.result)
					this.newlisttabinfo4 = res;
				})
			},
			//未标记客户数量排名,
			staffStatisticsUnlabeledTop10(promse) {
				this.$u.post('/cusLvStatistics/staffStatisticsUnlabeledTop', promse).then(res => {
					this.LOADING = false
					res.result.forEach(item => {
						item.zxl = item.tagCustomer
						item.name = item.accountName
					})
					res.result = this.dealData(res.result)
					this.newlisttabinfo5 = res;
				}).catch(e => {
					this.LOADING = false
				})
			},

			//自定义时间
			totalTimeChange(e) {
				this.screenShow = false
				this.showTimeText = `${e.startDate}-${e.endDate}`
				this.activeTotal = 3;
				this.lastEndDate = e.endDate
				this.lastStartDate = e.startDate
				this.init()
			},
			//时间切换
			tabtimetap(index, text) {
				if (index == 3) {
					this.totalTimeShow = true;
					this.screenShow = false
				} else {
					this.screenShow = false
					this.showTimeText = text
					this.activeTotal = index;
					this.lastEndDate = '';
					this.lastStartDate = '';
					this.init()
				}
			},
			// 定义一个公共方法对数据进行处理
			dealData(arr) {
				// 获取最大值
				let num = Math.max.apply(Math, arr.map(function(o) {
					return o.zxl
				})) //结果：3
				arr.map(item => {
					item.zxl1 = Math.floor(item.zxl / num * 100)
				})
				return arr

			},
		}
	};
</script>
<style lang="scss" scoped>
	.boxtittabs {
		width: 100%;
		height: 92rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;

		.items {
			padding: 0 24rpx;
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.screen {
		width: 100%;

		.boxtittab {
			width: 100%;
			flex-direction: column;
			border: none;

			.tabbox {
				width: 100%;
			}
		}
	}

	.box {
		width: 100%;
		height: 100%;
		background: #FAFAFA;
	}

	.single {
		padding-bottom: 20rpx;
		margin-top: 20rpx;
	}

	.boxtittab {
		position: sticky;
		top: var(--window-top);
		z-index: 999;
	}

	.hejisan {
		width: 92%;
		margin: 0 auto;
		display: flex;
		padding-top: 20rpx;

		padding-bottom: 20rpx;

		.sanbox1 {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;

			&::after {
				position: absolute;
				content: '';
				width: 1rpx;
				height: 86rpx;
				background: #E0E0E0;
				right: 0;
				top: 0;
			}

			&:last-child::after {
				position: absolute;
				content: '';
				width: 1rpx;
				height: 86rpx;
				right: 0;
				top: 0;
				background: #fff;
			}
		}

		.text1-1 {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 32rpx;
		}

		.text1-2 {
			color: #333333;
			font-size: 40rpx;
			line-height: 46rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			margin-bottom: 10rpx;
		}
	}

	.jindu-name {
		width: 180rpx;
		margin-left: 15rpx;
	}

	.sort-img {
		width: 44rpx;
		height: 44rpx;
		margin-right: 15rpx;
	}

	.sort-number {
		width: 40rpx;
		height: 40rpx;
		background: #E5F0FF;
		border-radius: 50%;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		text-align: center;
		line-height: 40rpx;
		margin-right: 15rpx;
	}
</style>