newEdition/pages/center/Piabodata/Employeesstatistics.vue

<template>
	<view class="box">
		<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天</view>
			</view>
			<view class="tabbox">
				<view :class="{ activecllasscet: activeTotal == 6 }" @click="tabtimetap(6)">近30天</view>
			</view>
			<view class="tabbox">
				<view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3)">自定义</view>
			</view>
		</view>
		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></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">{{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;height: 360rpx;overflow: auto;">
				<view v-if="newlisttabinfo1.result.length!=0" 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:'+ item.zxl||0 + '%'" ></view>
							<view class="color3" v-if="index==2" :style="'width:'+ item.zxl||0 + '%'" ></view>
							<view class="color4" v-if="index>2" :style="'width:'+ item.zxl||0 + '%'" ></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 style="width: 100%;height: 20rpx;background: #FAFAFA;"></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="height: 360rpx;overflow: auto;">
				<view v-if="newlisttabinfo3.result.length!=0" class="jindu-box" v-for="(item,index) in newlisttabinfo3.result" :key="index">
					<view class="jindu-boxche">
						<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="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 style="width: 100%;height: 20rpx;background: #FAFAFA;"></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="height: 360rpx;overflow: auto;">
				<view v-if="newlisttabinfo2.result.length!=0" class="jindu-box" v-for="(item,index) in newlisttabinfo2.result" :key="index">
					<view class="jindu-boxche">
						<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="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 style="width: 100%;height: 20rpx;background: #FAFAFA;"></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="height: 360rpx;overflow: auto;">
				<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:'+ item.zxl||0 + '%'" ></view>
							<view class="color3" v-if="index==2" :style="'width:'+ item.zxl||0 + '%'" ></view>
							<view class="color4" v-if="index>2" :style="'width:'+ item.zxl||0 + '%'" ></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>
		
		
		<u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
	</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:[],
				},
			};
		},
		onLoad() {
			// 获取项目id
			this.houseId = uni.getStorageSync('buildingID').id;
			this.init()
		},
		onPullDownRefresh(){
			this.init()
			setTimeout(function () {
			    uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			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:[],
				}
					
				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
				}
				this.staffStatisticsReceptionTop10(promse)
				this.staffStatisticsRecordingTimTop10(promse)
				this.staffStatisticsExecutionRateTop10(promse)
				this.staffStatisticsProhibitedTop10(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;
				})
			},
			
			//自定义时间
			totalTimeChange(e) {
				console.log(e.startDate, e.endDate)
				this.activeTotal=3;
				this.lastEndDate=e.endDate
				this.lastStartDate=e.startDate
				this.init()
			},
			//时间切换
			tabtimetap(index) {
				this.activeTotal = index;
				if (index == 3) {
					this.totalTimeShow = true;
				} else {
					this.lastEndDate='';
					this.lastStartDate='';
					this.init()
				}
			},
			// 定义一个公共方法对数据进行处理
			dealData(arr){
				// 获取最大值
				let num=Math.max.apply(Math, arr.map(function (o) { return o.zxl })) //结果：3
				// console.log(num)
				// if(num>100){
				// 	// 获取最大值的下标
				// 	// let idx=arr.findIndex(item=>item.zxl==num)
				// 	// console.log(idx,123)
				// 	arr.map(item=>{
				// 		item.zxl1=Math.floor(item.zxl/num*100)
				// 	})
				// 	// console.log(arr)
				// 	return arr
				// }else{
				// 	arr.map(item=>{
				// 		item.zxl1=item.zxl
				// 	})
				// 	return arr
				// }
				arr.map(item=>{
					item.zxl1=Math.floor(item.zxl/num*100)
				})
				return arr
				
			},
		}
	};
</script>
<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
		background: #FAFAFA;
		padding-bottom: 60rpx;
	}
	
	.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;
		}
	}
		.progress-cus{

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