newEdition/pages/center/Piabodata/StaffAnalysis.vue

<template>
	<view>
		<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>

		<view class="timepick">
			<view class="timepicktime" @click="chiocStaff(0)">
				<view>{{staff1.label}}
					<image class="Underimg" src="../../../static/images/down.png" mode=""></image>
				</view>
			</view>
			<view class="timepickpick" @click="checkboxChange">
				<image v-if="timepickpickisshow" style="width: 30rpx;height: 30rpx;"
					src="../../../static/images/xuanzhong.png" mode=""></image>
				<view v-else style="width: 30rpx;height:30rpx;border: 1rpx solid #E0E0E0;"></view>
				<view style="font-size:26rpx;text-indent: 12rpx;">对比</view>
			</view>
			<view class="timepicktime" v-if="timepickpickisshow" @click="chiocStaff(1)">
				<view>{{staff2.label}}
					<image class="Underimg" src="../../../static/images/down.png" mode=""></image>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 20rpx;background: #f8f8f8;"></view>
		<view class="single">
			<view class="title">
				<view class="title1" style="flex: 1;">接待量</view>
			</view>
			<view class="hejisan">
				<view class="sanbox1">
					<view class="text1-2">{{newTeam1||0}}</view>
					<view class="text1-1">{{staff1.label}}</view>
				</view>
				<view class="sanbox1" v-if="timepickpickisshow">
					<view class="text1-2">{{newAvg1||0}}</view>
					<view class="text1-1">{{staff2.label}}</view>
				</view>
			</view>
			<view class="danwei">来访(人)</view>
			<view class="uchaserbox">
				<qiun-data-charts v-if="isShow" type="line" :chartData="lineOptsect" background="none" :ontouch="true"
					canvasId="wangxiaohuaerlingeryilingwuyibbb" :canvas2d="true" />
			</view>
		</view>

		<view style="width: 100%;height: 20rpx;background: #f8f8f8;"></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="hejisan">
				<view class="sanbox1">
					<view class="text1-2">{{newTeam2||0}}</view>
					<view class="text1-1">{{staff1.label}}</view>
				</view>
				<view class="sanbox1" v-if="timepickpickisshow">
					<view class="text1-2">{{newAvg2||0}}</view>
					<view class="text1-1">{{staff2.label}}</view>
				</view>
			</view>
			<view class="danwei">录音时长</view>
			<view class="uchaserbox">
				<qiun-data-charts v-if="isShow" type="line" :chartData="lineOptsect1" background="none" :ontouch="true"
					canvasId="wangxiaouaerlingeryilingwuyibhh" :canvas2d="true" />
			</view>
		</view>

		<view style="width: 100%;height: 20rpx;background: #f8f8f8;"></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="hejisan">
				<view class="sanbox1">
					<view class="text1-2">{{newTeam3||0}}</view>
					<view class="text1-1">{{staff1.label}}</view>
				</view>
				<view class="sanbox1" v-if="timepickpickisshow">
					<view class="text1-2">{{newAvg3||0}}</view>
					<view class="text1-1">{{staff2.label}}</view>
				</view>
			</view>
			<view class="uchaserbox">
				<qiun-data-charts v-if="isShow" type="line" :chartData="lineOptsect2" background="none" :ontouch="true"
					canvasId="wangxiaohuaerlingryilingwuyibhh" :canvas2d="true" :opts="lineOpts" />
			</view>
		</view>

		<view style="width: 100%;height: 20rpx;background: #f8f8f8;"></view>
		<view class="single">
			<view class="title" style="padding-right: 30rpx;">
				<view class="title1" style="flex: 1;">销讲能力</view>
			</view>
			<view class="uchaserbox">
				<qiun-data-charts v-if="isShow" type="radar" :opts="opts" :chartData="chartData" :canvas2d="true"
					canvasId="wangxiaohuaerlingeryilinwuycsdx" background="none" :loadingType="0" />
			</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>
		<u-select v-model="staffShow1" :list="staffList1" @confirm="staffSelectCallback" :default-value='selindex'>
		</u-select>

		<!-- 更多筛选 -->
		<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>


		<!-- 销讲业务 -->
		<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>



		<!-- 销讲业务2 -->
		<u-select :mask-close-able="false" label-name="templateName" value-name="id" v-model="showTemplates"
			mode="single-column" :list="templateLists" @cancel="showTemplates = false" @confirm="templateConfirms">
		</u-select>
		<!-- 加载组件 -->
		<u-loadings v-model="LOADING"></u-loadings>

	</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: '平均'
				},
				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]
					}]
				},
				opts: {
					fontSize: 10,
					extra: {
						radar: {
							max: 100
						}
					}
				},
				lineOpts: {
					yAxis: {
						data: [{
							max: 100,
							min: 0,
						}]
					}
				},
				isShow: true, // 默认都展示

				screenShow: false, // 时间筛选弹窗
				showTimeText: '近七天', // 展示文字
				showBeText: '全部业务', // 
				templateList: [], // 销讲业务
				showTemplate: false, // 展示选择销讲业务弹窗
				marketingBusiness: '', // 选择的业务id



				showTemplates: false, // 展示选择销讲业务弹窗
				templateLists: [], // 销讲业务
				marketingBusinessId: '', // 选择的业务id
				showBeTexts: '', //
			};
		},

		onLoad(options) {
			this.LOADING = true
			// 获取项目id
			this.houseId = uni.getStorageSync('buildingID').id;
			// this.buildingname = uni.getStorageSync('buildingID').name;
			// 请求接口获取所有置业顾问员工的列表
			this.getStaffList()
			this.getMarketingBusiness()
		},
		onPullDownRefresh() {
			this.getStaffList()
			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.getdata()
			},


			// 确认选择销讲业务
			templateConfirms(e) {
				this.showTemplates = false;
				this.marketingBusinessId = e[0].value
				this.showBeTexts = e[0].label
				this.getdata()
			},

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


			//是否对比
			checkboxChange() {
				this.isShow = false
				this.timepickpickisshow = !this.timepickpickisshow;
				this.staff2.value = ''
				this.staff2.label = '平均'
				// this.getreception()
				// this.getRecordList()
				// this.getAwardList()
				// this.getAward()
				setTimeout(() => {
					this.isShow = true
				}, 10)
				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,
						marketingBusiness: this.marketingBusiness,
					})
					.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,
						marketingBusiness: this.marketingBusiness,
					})
					.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,
						marketingBusiness: this.marketingBusiness,
					})
				} 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,
						marketingBusiness: this.marketingBusiness,
					})
				}
				// 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.chartData = {
					categories: [],
					series: []
				}
				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,
						marketingBusiness: this.marketingBusinessId,
					})
					.then(res => {
						this.LOADING = false
						// console.log(res)
						let first = res.first
						let second = res.second
						this.chartData.categories = []
						if (!this.timepickpickisshow) {
							this.chartData.series = [{
								name: first[0].accountName,
								data: []
							}]
							first.map(item => {
								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)
							})
						}

					}).catch(e => {
						this.LOADING = false
					})
			},
			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.getdata()
				}
			},
			tabtimetap1(index) {
				this.activeTotal2 = index;
				// 调用方法
				this.getRecordList()
			},
			//自定义时间
			totalTimeChange(e) {
				console.log(e.startDate, e.endDate)
				this.screenShow = false
				this.showTimeText = `${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) {
					// 第二个客户
					this.staff2 = e[0]
				} else {
					// 第一个客户
					this.staff1 = e[0]
				}
				if (this.staff1.label == this.staff2.label) {
					uni.showToast({
						title: '请勿选择重复',
						icon: 'none'
					})
					this.staff2.label = '请选择'
					return
				} else {
					// 获取数据
					// this.getreception()
					// this.getRecordList()
					// this.getAwardList()
					this.getdata()
				}


			},
		},
	}
</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%;
				}
			}
		}
	.boxtittab {
		position: sticky;
		top: var(--window-top);
		z-index: 999;
	}

	.hejisan {
		width: 92%;
		margin: 0 auto;
		display: flex;
		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;
		}
	}

	// 对比时间切换
	.timepick {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
	}

	.timepicktime {
		width: 260rpx;
		height: 50rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		background: #FFFFFF;
	}

	.timepickpick {
		width: 110rpx;
		height: 50rpx;
		line-height: 50rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
	}

	.Underimg {
		width: 28rpx;
		height: 14rpx;
		margin-left: 15rpx;
	}
</style>