NewZkgj/pages/center/Piabodata/StaffAnalysis.vue

<template>
	<view>
		<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 class="timepick">
			<view class="timepicktime" @click="chiocStaff(0)">
				<view>{{staff1.label}}</view>
				<view>
					<image class="Underimg" src="../../../static/images/Underimg.png" mode=""></image>
				</view>
			</view>
			<view class="timepickpick">
				 <view @click="checkboxChange()" style="width: 40rpx;height:40rpx;border: 1rpx solid #E0E0E0;">
					<image v-if="timepickpickisshow" style="width: 40rpx;height: 40rpx;" src="../../../static/images/xuanzhong.png" mode=""></image>
				 </view>  
				 <view style="font-size:26rpx;text-indent: 12rpx;">对比</view> 
			</view>
			<view class="timepicktime" v-if="timepickpickisshow" @click="chiocStaff(1)">
				<view>{{staff2.label}}</view>
				<view>
					<image class="Underimg" src="../../../static/images/Underimg.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
		<view class="single">
			<view class="title">
				<view class="title1" style="flex: 1;">接待量</view>
			</view>
			<view class="hejibox">
				<view class="heji">{{staff1.label}}：{{newTeam1||0}}</view>
				<view class="heji" v-if="timepickpickisshow">{{staff2.label}}：{{newAvg1||0}}</view>
			</view>
			<view class="danwei">来访(人)</view>
			<view class="uchaserbox">
				<qiun-data-charts
				   type="line"
				   :chartData="lineOptsect"
				   background="none"
				   :ontouch="true"
					canvasId="wangxiaohuaerlingeryilingwuyibbb"
					:canvas2d="true"
				 /> 
			</view>
		</view>
		
		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
		<view class="single">
			<view class="title">
				<view class="title1" style="flex: 1;">录音时长</view>
				<view class="title3" style="flex: 1;">
<!-- 					<view class="title3-box" style="width: 40%;" @click="tabtimetap1(0)">
						<view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">有效录音</view>
					</view>
					<view class="title3-box" style="width: 40%;"@click="tabtimetap1(1)">
						<view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">录音时长</view>
					</view> -->
				</view>
			</view>
			<view class="hejibox">
				<view class="heji">{{staff1.label}}：{{newTeam2||0}}</view>
				<view class="heji" v-if="timepickpickisshow">{{staff2.label}}：{{newAvg2||0}}</view>
			</view>
			<view class="danwei">录音时长</view>
			<view class="uchaserbox">
				<qiun-data-charts
				   type="line"
				   :chartData="lineOptsect1"
				   background="none"
				   :ontouch="true"
					canvasId="wangxiaouaerlingeryilingwuyibhh"
					:canvas2d="true"
				 /> 
			</view>
		</view>
		
		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
				<view class="single">
					<view class="title">
						<view class="title1" style="flex: 1;">销讲执行率</view>
						<view class="title3" style="flex: 1;">
		<!-- 					<view class="title3-box" style="width: 40%;" @click="tabtimetap1(0)">
								<view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">有效录音</view>
							</view>
							<view class="title3-box" style="width: 40%;"@click="tabtimetap1(1)">
								<view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">录音时长</view>
							</view> -->
						</view>
					</view>
					<view class="hejibox">
						<view class="heji">{{staff1.label}}：{{newTeam3||0}}</view>
						<view class="heji" v-if="timepickpickisshow">{{staff2.label}}：{{newAvg3||0}}</view>
					</view>
					<!-- <view class="danwei">录音时长</view> -->
					<view class="uchaserbox">
						<qiun-data-charts
						   type="line"
						   :chartData="lineOptsect2"
						   background="none"
						   :ontouch="true"
							canvasId="wangxiaohuaerlingryilingwuyibhh"
							:canvas2d="true"
							:opts="lineOpts"
						 /> 
					</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>
			<view class="uchaserbox" style="height: 70vh;">
				 <qiun-data-charts
				    type="radar"
				    :chartData="chartData"
				    :canvas2d="true"
					canvasId="wangxiaohuaerlingeryilinwuycsdx"
				    background="none"
					:opts="opts"
				  />
			</view>
		</view>
		
		<!-- <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar> -->
		<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>
		<u-select v-model="staffShow1" :list="staffList1" @confirm="staffSelectCallback" :default-value='selindex'></u-select>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				timepickpickisshow:true,
				totalTimeShow: false,
				activeTotal:4,
				activeTotal2:1,
				// 项目id
				houseId:'',
				staffList:[],
				staffList1:[],
				staffShow:false,
				staffShow1:false,
				newTeam1:'',
				newAvg1:'',
				newTeam2:'',
				newAvg2:'',
				newTeam3:'',
				newAvg3:'',
				staff1:{
					value:'',
					label:''
				},
				staff2:{
					value:'',
					label:'平均'
				},
				lineOpts: {
					yAxis: {
						data: [
							{
								max: 100,
								min: 0,
							}
						]
					}
				},
				opts: {
					fontSize: 10,
					extra: {
						radar: {
							max: ''
						}
					}
				},
				lastStartDate:'',
				lastEndDate :'',
				selindex:[0],
				choseStaffFlag:false,
				lineOptsect:{
					"categories": ["2016","2017","2018","2019","2020","2021"],
					"series": [
						{
							"name": "成交量1",
							"data": [35,8,25,37,4,20]
						},
						{
							"name": "成交量2",
							"data": [40,18,45,44,10,60]
						}
					]
				},
				lineOptsect1:{
					"categories": ["2016","2017","2018","2019","2020","2021"],
					"series": [
						{
							"name": "成交量1",
							"data": [35,8,25,37,4,20]
						},
						{
							"name": "成交量2",
							"data": [40,18,45,44,10,60]
						}
					]
				},
				lineOptsect2:{
					"categories": ["2016","2017","2018","2019","2020","2021"],
					"series": [
						{
							"name": "成交量1",
							"data": [35,8,25,37,4,20]
						},
						{
							"name": "成交量2",
							"data": [40,18,45,44,10,60]
						}
					]
				},
				chartData:{
					"categories": ["维度1","维度2","维度3","维度4","维度5","维度6"],
					"series": [
						{
							"name": "成交量",
							"data": [90,110,165,195,187,172]
						}
					]
				}
			};
			
		},
		
		onLoad: function(options) {
				// 获取项目id
				this.houseId = uni.getStorageSync('buildingID').id;
				// this.buildingname = uni.getStorageSync('buildingID').name;
				// 请求接口获取所有置业顾问员工的列表
				this.getStaffList()
		},
		onPullDownRefresh() {
			this.getStaffList()
			setTimeout(function () {
			    uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//是否对比
			checkboxChange(){
				this.timepickpickisshow=!this.timepickpickisshow;
				this.staff2.value=''
				this.staff2.label='平均'
				// this.getreception()
				// this.getRecordList()
				// this.getAwardList()
				// this.getAward()
				this.getdata()
			},
			// 点击员工对比
			chiocStaff(idx){
				if(idx==0){
					// 当选择了第一个的时候
					this.choseStaffFlag=false
					this.staffShow=true
				}else{
					this.choseStaffFlag=true
					this.staffShow1=true
				}
				
			},
			// 获取员工列表
			getStaffList(){
				this.$u.post('/cusLvStatistics/selectAllAccountIdByHouseId',{houseId:this.houseId})
				.then(res=>{
					// console.log(res,'123')
					this.staffList=[]
					this.staffList1=[]
					res.map(item=>{
						let obj={}
						obj.value=item.accountId
						obj.label=item.name
						this.staffList.push(obj)
					})
					this.staffList1=[...this.staffList]
					this.staffList1.unshift({
							value:'',
							label:'平均'
						})
					this.staff1=this.staffList[0]
					// this.getreception()
					// this.getRecordList()
					// this.getAwardList()
					// this.getAward()
					this.getdata()
				})
			},
			getdata(){
				this.getreception()
				this.getRecordList()
				this.getAward()
				this.getAwardList()

			},
			// 获取接待量数据
			getreception(){
				this.$u.post('/cusLvStatistics/employeeAnalysisReception',{
					userA:this.staff1.value,
					userB:this.staff2.value,
					houseId:this.houseId,
					timeType:this.lastEndDate?null:this.activeTotal+'',
					lastEndDate:this.lastEndDate,
					lastStartDate:this.lastStartDate
				})
				.then(res=>{
					this.newTeam1=res.avg[0]
					this.newAvg1=res.avg[1]
					// console.log(res)
					let first=res.first
					let second=res.second
					this.lineOptsect.categories=[]
					if(!this.timepickpickisshow){
						this.lineOptsect.series=[
							{
								name:first[0].accountName,
								data:[]
							}
						]
						first.map(item=>{
							this.lineOptsect.categories.push(item.statDate.slice(5,10))
							this.lineOptsect.series[0].data.push(item.receptionCount||0)
						})
					}else{
						this.lineOptsect.series=[
							{
								name:first[0].accountName,
								data:[]
							},
							{
								"name": second[0].accountName,
								"data": []
							}
						]
						first.map(item=>{
							this.lineOptsect.categories.push(item.statDate.slice(5,10))
							this.lineOptsect.series[0].data.push(item.receptionCount)
						})
						second.map(item=>{
							this.lineOptsect.series[1].data.push(item.receptionCount)
						})
					}
					// console.log(this.lineOptsect,'1')
				})
			},
			// 销奖趋势
			getAward(){
				this.$u.post('/cusLvStatistics/employeeAnalysisExacutiveRate',{
					userA:this.staff1.value,
					userB:this.staff2.value,
					houseId:this.houseId,
					timeType:this.lastEndDate?null:this.activeTotal+'',
					lastEndDate:this.lastEndDate,
					lastStartDate:this.lastStartDate
				})
				.then(res=>{
					this.newTeam3=res.avg[0]
					this.newAvg3=res.avg[1]
					// console.log(res)
					let first=res.first
					let second=res.second
					this.lineOptsect2.categories=[]
					if(!this.timepickpickisshow){
						this.lineOptsect2.series=[
							{
								name:first[0].accountName,
								data:[]
							}
						]
						first.map(item=>{
							// console.log(item)
							this.lineOptsect2.categories.push(item.statDate.slice(5,10))
							this.lineOptsect2.series[0].data.push(item.sumFraction)
						})
					}else{
						this.lineOptsect2.series=[
							{
								name:first[0].accountName,
								data:[]
							},
							{
								"name": second[0].accountName,
								"data": []
							}
						]
						first.map(item=>{
							this.lineOptsect2.categories.push(item.statDate.slice(5,10))
							this.lineOptsect2.series[0].data.push(item.sumFraction)
						})
						second.map(item=>{
							this.lineOptsect2.series[1].data.push(item.sumFraction)
						})
					}
				// console.log(this.lineOptsect2,'3')
				})
			},
			// 获取有效录音
			async getRecordList(){
				// 当选择有效录音时
				let res=null
				if(this.activeTotal2==0){
					res= await this.$u.post('/cusLvStatistics/employeeAnalysisEffectiveRecording',{
					userA:this.staff1.value,
					userB:this.staff2.value,
					houseId:this.houseId,
					timeType:this.lastEndDate?null:this.activeTotal+'',
					lastEndDate:this.lastEndDate,
					lastStartDate:this.lastStartDate
				})
				}else{
					res= await this.$u.post('/cusLvStatistics/employeeAnalysisRecordingTime',{
					userA:this.staff1.value,
					userB:this.staff2.value,
					houseId:this.houseId,
					timeType:this.lastEndDate?null:this.activeTotal+'',
					lastEndDate:this.lastEndDate,
					lastStartDate:this.lastStartDate
				})
				}
				// console.log(res)
				this.newTeam2=res.avg[0]
				this.newAvg2=res.avg[1]
				let first=res.first
				let second=res.second
				this.lineOptsect1.categories=[]
				if(!this.timepickpickisshow){
					this.lineOptsect1.series=[
						{
							name:first[0].accountName,
							data:[]
						}
					]
					first.map(item=>{
						this.lineOptsect1.categories.push(item.statDate.slice(5,10))
						this.lineOptsect1.series[0].data.push(item.sumDuration)
					})
				}else{
					this.lineOptsect1.series=[
						{
							name:first[0].accountName,
							data:[]
						},
						{
							"name": second[0].accountName,
							"data": []
						}
					]
					first.map(item=>{
						this.lineOptsect1.categories.push(item.statDate.slice(5,10))
						this.lineOptsect1.series[0].data.push(item.sumDuration)
					})
					second.map(item=>{
						this.lineOptsect1.series[1].data.push(item.sumDuration)
					})
				}
				// console.log(this.lineOptsect1,'2')
			},
			// 获取销奖能力
			getAwardList(){
				this.$u.post('/cusLvStatistics/employeeAnalysisLevel1Fraction',{
					userA:this.staff1.value,
					userB:this.staff2.value,
					houseId:this.houseId,
					timeType:this.lastEndDate?null:this.activeTotal+'',
					lastEndDate:this.lastEndDate,
					lastStartDate:this.lastStartDate
				})
				.then(res=>{
					// console.log(res)
					let first=res.first
					let second=res.second
					let max = first[0].avgExecutionRate
					this.chartData.categories=[]
					if(!this.timepickpickisshow){
						this.chartData.series=[
							{
								name:first[0].accountName,
								data:[]
							}
						]
						first.map(item=>{
							if (max < item.avgExecutionRate) max = item.avgExecutionRate;
							this.chartData.categories.push(item.name)
							this.chartData.series[0].data.push(item.avgExecutionRate)
						})
					}else{
						this.chartData.series=[
							{
								name:first[0].accountName,
								data:[]
							},
							{
								"name": second[0].accountName,
								"data": []
							}
						]
						first.map(item=>{
							this.chartData.categories.push(item.name)
							this.chartData.series[0].data.push(item.avgExecutionRate)
						})
						second.map(item=>{
							this.chartData.series[1].data.push(item.avgExecutionRate)
						})
						
						let all = [...first, ...second]
						all.map(item => {
							if (max < item.avgExecutionRate) max = item.avgExecutionRate;
						})
					}
					this.opts.extra.radar.max = max + 25
				
				})
			},
			tabtimetap(index){
				if (index == 3) {
					this.totalTimeShow = true;
				} else {
					this.activeTotal = index;
					this.lastEndDate=''
					this.lastStartDate=''
					// 获取数据
					// this.getreception()
					// this.getRecordList()
					// this.getAwardList()
					this.getdata()
				}
			},
			tabtimetap1(index){
				this.activeTotal2 = index;
				// 调用方法
				this.getRecordList()
			},
			//自定义时间
			totalTimeChange(e) {
				console.log(e.startDate, e.endDate)
				this.activeTotal=3;
				this.lastEndDate=e.endDate
				this.lastStartDate=e.startDate
				// 获取数据
				// this.getreception()
				// this.getRecordList()
				// this.getAwardList()
				this.getdata()
			},
			staffSelectCallback(e){
				if(this.choseStaffFlag){
					// 第二个客户
					// console.log(e,'第二个')
					this.staff2=e[0]
				}else{
					// 第一个客户
					// console.log(e,'第一个')
					this.staff1=e[0]
				}
				if(this.staff1.label==this.staff2.label){
					uni.showToast({
						title:'请勿选择重复',
						icon:'none'
					})
					this.staff2.label='请选择'
					// this.staff2.label='平均'
					// this.staff2.value=''
					return
				}else{
					// 获取数据
					// this.getreception()
					// this.getRecordList()
					// this.getAwardList()
					this.getdata()
				}
				
				
			},
		},
	}
</script>
<style lang="scss" scoped>
	// 对比时间切换
	.timepick{
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		background: #FAFAFA;
	}
	.timepicktime{
		width: 260rpx;
		height: 50rpx;
		border: 1rpx solid #E0E0E0;
		margin-left: 30rpx;
		display: flex;
		background: #FFFFFF;
	}
	.timepicktime>view:nth-of-type(1){
		width: 210rpx;
		height: 100%;
		line-height: 50rpx;
		font-size: 26rpx;
		font-weight: 400;
		text-align: center;
	}
	.timepicktime>view:nth-of-type(2){
		width: 49rpx;
		height: 100%;
		// border-left: 1px solid  #E0E0E0;
	}
	.timepickpick{
		width: 110rpx;
		height: 50rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
	}
	.Underimg{
		width: 50rpx;
		height:50rpx;
		margin-top: -2rpx;
	}
</style>