newEdition/pages/center/Piabodata/Groupcontrast.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">接待量（TOP10）</view>
			</view>
			<view class="hejisan">
					<view class="sanbox1" >
						<view class="text1-2">{{newTeam1||0}}</view>
						<view class="text1-1">项目</view>
					</view>
					<view  class="sanbox1">
						<view class="text1-2">{{newAvg1||0}}</view>
						<view class="text1-1">均值</view>
					</view>
				</view>
			<view class="jindu">
				<scroll-view  scroll-y="true" >
					<view class="jindu-box" v-for="(item,index) in newlisttabinfo1" :key="index">
						<view class="jindu-boxche">
							<view class="jindu-name">{{item.name.substring(0, 4)}}</view>
							<view class="progress-cus">
								<view class="color" :style="'width:'+ getPercent(item.zxl,1) + '%'" ></view>
							</view>
							<!-- <view style="width: 440rpx;margin-left: 10rpx;">
								<u-line-progress height="24" :show-percent="false" active-color="#FBA448" :percent="item.zxl1"></u-line-progress>
							</view> -->
							<view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}</view>
						</view>
					</view>
				 </scroll-view>
			</view>
		</view>
		
		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
		<view class="single">
			<view class="title">
				<view class="title1">接待时长（TOP10）</view>
			</view>
			<view class="hejisan">
					<view class="sanbox1" >
						<view class="text1-2">{{newTeam2||0}}</view>
						<view class="text1-1">项目</view>
					</view>
					<view  class="sanbox1">
						<view class="text1-2">{{newAvg2||0}}</view>
						<view class="text1-1">均值</view>
					</view>
				</view>
			<view class="jindu">
				<scroll-view scroll-y="true" >
					<view class="jindu-box" v-for="(item,index) in newlisttabinfo2" :key="index">
						<view class="jindu-boxche">
							<view class="jindu-name">{{item.name.substring(0, 4)}}</view>
							<view class="progress-cus">
								<view class="color" :style="'width:'+ getPercent(item.zxl,2)  + '%'" ></view>
							</view>
							<!-- <view style="width: 440rpx;margin-left: 10rpx;">
								<u-line-progress height="24" :show-percent="false" active-color="#4FC78F" :percent="item.zxl1"></u-line-progress>
							</view> -->
							<view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}</view>
						</view>
					</view>
				 </scroll-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 class="title3" style="flex: 1;">
					<view class="title3-box">
						<view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">执行率</view>
					</view>
					<view class="title3-box">
						<view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">得分</view>
					</view>
				</view> -->
			</view>
				<view class="hejisan">
					<view class="sanbox1" >
						<view class="text1-2">{{newTeam3||0}}</view>
						<view class="text1-1">项目</view>
					</view>
					<view  class="sanbox1">
						<view class="text1-2">{{newAvg3||0}}%</view>
						<view class="text1-1">均值</view>
					</view>
				</view>
			<view class="jindu">
				<scroll-view  scroll-y="true" >
					<view class="jindu-box" v-for="(item,index) in newlisttabinfo3" :key="index">
						<view class="jindu-boxche">
							<view class="jindu-name">{{item.name.substring(0, 4)}}</view>
							<view class="progress-cus">
								<view class="color" :style="'width:'+ getPercent1(item.zxl)+ '%'" ></view>
							</view>
							<!-- <view style="width: 440rpx;margin-left: 10rpx;">
								<u-line-progress height="24" :show-percent="false" active-color="#9B6BDF" :percent="item.zxl1"></u-line-progress>
							</view> -->
							<view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
						</view>
					</view>
				 </scroll-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 class="title3" style="flex: 1;">
					<view class="title3-box">
						<view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">执行率</view>
					</view>
					<view class="title3-box">
						<view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">得分</view>
					</view>
				</view> -->
			</view>
			
<!-- 			<view class="hejibox">
				<view class="heji">项目：{{newTeam4||0}}</view>
				<view class="heji">均值：{{newAvg4||0}}</view>
			</view> -->
			<view class="jindu">
				<scroll-view  scroll-y="true" >
					<view class="jindu-box" v-for="(item,index) in newlisttabinfo4" :key="index">
						<view class="jindu-boxche">
							<view class="jindu-name">{{item.name.substring(0, 4)}}</view>
							<view class="progress-cus">
								<view class="color" :style="'width:'+getPercent1(item.zxl) + '%'" ></view>
							</view>
							<!-- <view style="width: 440rpx;margin-left: 10rpx;">
								<u-line-progress height="24" :show-percent="false" active-color="#9B6BDF" :percent="item.zxl1"></u-line-progress>
							</view> -->
							<view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
						</view>
					</view>
				 </scroll-view>

			</view>
		</view>
		
		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
		<view class="single">
			<view class="title" style="padding-right: 30rpx;">
				<view class="title1" style="flex: 1;">销讲能力</view>
<!-- 				<view class="title2" style="flex: 1;justify-content: flex-end;" @click="Groupcontrast">
					<view class="title2-che">项目
						<image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
					</view>
				</view> -->
				<view class="title2" style="flex: 1;justify-content: flex-end;" @click="staffShow=true">
					<view class="title2-che" style="width: auto;">{{staff.label}}
						<image class="righttochoose" src="../../../static/images/down.png" mode=""></image>
					</view>
				</view>
			</view>
<!-- 			<view class="hejibox">
				<view class="heji">项目：50</view>
				<view class="heji">均值：25</view>
			</view> -->
			<view class="uchaserbox" v-if="emptyCharData">
				 <qiun-data-charts
				    type="radar"
				    :chartData="chartData"
				    :canvas2d="true"
					canvasId="wangxiaohuaerlingeryilingwuyib88"
				    background="none"
					   :loadingType="0"
					   :opts="opts"
				  />
			</view>
			<view class="uchaserbox" v-else>
				<u-empty mode="data"></u-empty>
			</view>
		</view>
		
		
		
		
<!-- 		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
		<view class="single">
			<view class="title">
				<view class="title1">禁忌执行率（TOP10）</view>
			</view>
			<view class="hejibox">
				<view class="heji">合计：50</view>
				<view class="heji">均值：25</view>
			</view>
			<view class="jindu">
				<view class="jindu-box" v-for="(item,index) in newlisttabinfo" :key="index">
					<view class="jindu-boxche">
						<view class="jindu-name">{{item.name.substring(0, 4)}}</view>
						<view style="width: 440rpx;margin-left: 10rpx;">
							<u-line-progress height="24" :show-percent="false" active-color="#E6625B" :percent="item.zxl"></u-line-progress>
						</view>
						<view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
					</view>
				</view>
			</view>
		</view> -->
		
		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
		<!-- <view class="single">
			<view class="title" style="padding-right: 30rpx;">
				<view class="title1" style="flex: 1;">违禁能力（TOP10）</view>
				<view class="title2" style="flex: 1;justify-content: flex-end;">
					<view class="title2-che">项目
						<image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="hejibox">
				<view class="heji">合计：50</view>
				<view class="heji">均值：25</view>
			</view>
			<view class="uchaserbox">
				 <qiun-data-charts
				    type="radar"
				    :chartData="chartData"
				    :canvas2d="true"
					canvasId="wangxiaohuaerlingeryilingwuyib89"
				    background="none"
				  />
			</view>
		</view> -->
		
		<u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
		<!-- 选择项目 -->
		<u-select v-model="staffShow" :list="staffList" @confirm="staffSelectCallback" :default-value='selindex'></u-select>
	</view>
</template>

<script>
	var app = getApp();
	var util = require("../../../utils/util.js");
	var config = require("../../../config");
	export default {
		data() {
			return {
				activeTotal: 4,
				activeTotal2: 0,
				bocindex:0,
				totalTimeShow: false,
				// 项目id
				houseId:'',
				staffShow:false,
				staffList:[],
				lastStartDate:'',
				lastEndDate :'',
				newTeam1:'',
				newAvg1:'',
				newTeam2:'',
				newAvg2:'',
				newTeam3:'',
				newAvg3:'',
				newTeam4:'',
				newAvg4:'',
				staff:{
					value:'',
					label:''
				},
				newlisttabinfo1:[
					{name:'接待量',zxl:'10'},
					{name:'平均执行率',zxl:'50'},
					{name:'接待客户',zxl:'80'},
				],
				newlisttabinfo2:[
					{name:'接待量',zxl:'10'},
					{name:'平均执行率',zxl:'50'},
					{name:'接待客户',zxl:'80'},
				],
				newlisttabinfo3:[
					{name:'接待量',zxl:'10'},
					{name:'平均执行率',zxl:'50'},
					{name:'接待客户',zxl:'80'},
				],
				newlisttabinfo4:[
					{name:'接待量',zxl:'10'},
					{name:'平均执行率',zxl:'50'},
					{name:'接待客户',zxl:'80'},
				],
				chartData:{
					"categories": [],
					"series": [
						
					]
				},
				emptyCharData:true,
				opts: {
					fontSize: 10,
					extra: {
						radar: {
							max: 100
						}
					}
				}
				
			};
		},
		onLoad() {
			let that=this
			uni.$on('updateGroup',function(data){
				console.log(data)
				that.houseId=data.arr.join(',')
				// 获取销奖能力
				that.getPowerList()
			})
			this.getSectionList()
			
			
		},
		onPullDownRefresh(){
			this.getSectionList()
			setTimeout(function () {
			    uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
				getPercent(num,type) {
				if(this.newlisttabinfo1&&this.newlisttabinfo1.length&&type==1){
					console.log(this.newlisttabinfo1)
					let index0 = this.newlisttabinfo1[0]
					let percent = num/(index0.zxl) * 100
					return percent.toFixed(2)
				}else if(this.newlisttabinfo2&&this.newlisttabinfo2.length&&type==2){
					let index0 = this.newlisttabinfo2[0]
					let percent = num/(index0.zxl) * 100
					return percent.toFixed(2)
				}else if(this.newlisttabinfo3&&this.newlisttabinfo3.length&&type==3){
					let index0 = this.newlisttabinfo3[0]
					let percent = num/(index0.zxl) * 100
					return percent.toFixed(2)
				}else{
					return 0
				}
			},
			getPercent1(num){
				console.log(num)
				return num||0
			},
			// 获取部门列表
			getSectionList(){
				this.$u.post('/user/getHouseByToken',)
				.then(res=>{
					// console.log(res)
					this.staffList=[]
					res.map((item,index)=>{
							let obj={}
							obj.value=item.id
							obj.label=item.propertyName
							this.staffList.push(obj)
					})
					this.houseId=this.staffList[0].value
					this.staff=this.staffList[0]
					this.getdata()
					// console.log(this.staffList,this.staffList,this.houseId)
				})
				
			},
			//指标执行率分析tab
			tapspagek2(index) {
				this.bocindex = index;
			},
			staffSelectCallback(e){
				this.staff=e[0]
				this.houseId=e[0].value
				this.getPowerList()
			},
			getdata(){
				// 请求接口获取接待量
				this.receptionCountList('1','/cusLvStatistics/groupComparisonReception')
				// 接待时长
				this.receptionCountList('2','/cusLvStatistics/groupComparisonReceptionTime')
				// 小将排名
				this.receptionCountList('3','/cusLvStatistics/groupComparisonTalkRank')
				// 顾问牌名
				this.receptionCountList('4','/cusLvStatistics/groupComparisonTalkRankByConsultant')
				// 销奖能力
				this.getPowerList()
			},
			//时间切换
			tabtimetap(index) {
				this.activeTotal = index;
				if (index == 3) {
					this.totalTimeShow = true;
				} else {
					this.lastEndDate=''
					this.lastStartDate=''
					this.getdata()
					// // 获取数据
					// // 团队对比接待量
					// this.receptionCountList(0,1,'/cusLvStatistics/teamAnalysisReception')
					// // 团队对比接待时长
					// this.receptionCountList(0,2,'/cusLvStatistics/teamAnalysisReceptionTime')
					// /* 销奖执行率 */
					// this.receptionCountList(0,3,'/cusLvStatistics/teamAnalysisExecutionRate')
					// // 获取销奖能力
					// this.getPowerList()
				}
			},
			// 接待时长
			receptionCountList(index,url){
				this.$u.post(url,{
					timeType:this.lastEndDate?null:this.activeTotal+'',
					lastEndDate:this.lastEndDate,
					lastStartDate:this.lastStartDate
				})
				.then(res=>{
					// console.log(res)
					let result=res.result
					this['newTeam'+index]=res.avg[0]
					this['newAvg'+index]=res.avg[1]
					// return
						// 处理数据
						// 先处理牌名数据,需要进行判断全部还是单个
						// 当为全部时
						this['newlisttabinfo'+index]=[]
						// 当选择全部时
						let arr=[]
							// 当两个都选择的时候
							result.map(item=>{
								let obj={}
								obj.name=item.houseName
								obj.zxl=item.data
								arr.push(obj)
								
							})
							arr=this.dealData(arr)
							this['newlisttabinfo'+index]=arr
				})
			},
			// 获取销奖能力
			getPowerList(){
				this.chartData={
					categories:[],
					series:[]
				}
				this.$u.post('/cusLvStatistics/groupComparisonMarketingAbility',{
					houseIds:this.houseId,
					timeType:this.lastEndDate?null:this.activeTotal+'',
					lastEndDate:this.lastEndDate,
					lastStartDate:this.lastStartDate
				})
				.then(res=>{			
					let allobj={
						categories:[],
						series:[]
					}
					if(res.result.length!=0){
						res.result.map((item,index)=>{
							let obj={
								name:item.length>0?item[0].houseName:'',
								data:[]
							}
							item.map(item1=>{
								if(index==0){
									allobj.categories.push(item1.name)
								}
								obj.data.push(item1.avgExecutionRate)
							})
							allobj.series.push(obj)
						})
						this.chartData=allobj
						this.$forceUpdate()
						this.emptyCharData = true;
					}else{
						this.emptyCharData = false;
					}
				})
			},
			//自定义时间
			totalTimeChange(e) {
				console.log(e.startDate, e.endDate)
				this.activeTotal=3;
				this.lastEndDate=e.endDate
				this.lastStartDate=e.startDate
				this.getdata()
			},
			//集团对比
			Groupcontrast(){
				uni.navigateTo({
				    url: `/pages/center/Piabodata/selectGroup?ids=${this.houseId}`
				});
			},
			// 定义一个公共方法对数据进行处理
			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
				}
			},
		}
	};
</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: 20rpx 0;
		.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;
		}
	}
</style>