newEdition/pages/center/Piabodata/Theteamcompared.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>


		<view class="timepick">
			<view class="timepicktime" @click="chiocStaff(0)">
				<view class="maxTextLine textMax">{{staff1.label}}</view>
				<image class="Underimg" src="../../../static/images/down.png" mode=""></image>
			</view>
			<view class="timepickpick" v-if="staff1.value">
				<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 class="maxTextLine textMax">{{staff2.label}}</view>
				<image class="Underimg" src="../../../static/images/down.png" mode=""></image>
			</view>
		</view>

		<view class="single">
			<view class="title">
				<view class="title1" style="flex: 1;">接待量</view>
				<view class="title3" style="flex: 1;">
					<view class="title3-box" @click="tabtimetap1(0)">
						<view style="height: 42rpx;" :class="{ activecltab: eharTab.active1 == 0 }">排名</view>
					</view>
					<view class="title3-box" @click="tabtimetap1(1)">
						<view style="height: 42rpx;" :class="{ activecltab: eharTab.active1 == 1 }">趋势</view>
					</view>
				</view>
			</view>
			<view class="hejisan">
				<view class="sanbox1">
					<view class="text1-2">{{newTeam1||0}}</view>
					<view class="text1-1 textMax">{{!staff1.value?'团队总数':staff1.label}}</view>
				</view>
				<view class="sanbox1">
					<view class="text1-2">{{newAvg1||0}}</view>
					<view class="text1-1 textMax">{{!staff2.value?'团队平均':staff2.label}}</view>
				</view>
			</view>
			<view class="" v-if="eharTab.active1 == 1 ">
				<view class="danwei">接待量(次)</view>
				<view class="uchaserbox">
					<template v-if="lineOptsect1">
						<qiun-data-charts type="line" :opts="lineOpts1" :chartData="lineOptsect1" background="none"
							:ontouch="true" canvasId="wangxiaohuaerlingeryilingwuyibbb" :canvas2d="true" />
					</template>
				</view>
			</view>
			<view class="jindu" v-if="eharTab.active1 == 0 ">
				<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 class="jindu-zxl">{{item.zxl==null?0:item.zxl}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="single">
			<view class="title">
				<view class="title1" style="flex: 1;">接待时长</view>
				<view class="title3" style="flex: 1;">
					<view class="title3-box" @click="tabtimetap2(0)">
						<view style="height: 42rpx;" :class="{ activecltab: eharTab.active2 == 0 }">排名</view>
					</view>
					<view class="title3-box" @click="tabtimetap2(1)">
						<view style="height: 42rpx;" :class="{ activecltab: eharTab.active2 == 1 }">趋势</view>
					</view>
				</view>
			</view>
			<view class="hejisan">
				<view class="sanbox1">
					<view class="text1-2">{{newTeam2||0}}</view>
					<view class="text1-1 textMax">{{!staff1.value?'团队总数':staff1.label}}</view>
				</view>
				<view class="sanbox1">
					<view class="text1-2">{{newAvg2||0}}</view>
					<view class="text1-1 textMax">{{!staff2.value?'团队平均':staff2.label}}</view>
				</view>
			</view>
			<view v-if="eharTab.active2 == 1 ">
				<view class="danwei">录音时长(min)</view>
				<view class="uchaserbox">
					<template v-if="lineOptsect2">
						<qiun-data-charts type="line" :opts="lineOpts1" :chartData="lineOptsect2" background="none"
							:ontouch="true" canvasId="wangxiaohuaerlingeryilingwuyibb" :canvas2d="true" />
					</template>
				</view>
			</view>
			<view class="jindu" v-if=" eharTab.active2 == 0 ">
				<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 class="jindu-zxl">{{item.zxl==null?0:item.zxl}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="single">
			<view class="title">
				<view class="title1" style="flex: 1;">销讲执行率</view>
				<view class="title3" style="flex: 1;">
					<view class="title3-box" @click="tabtimetap3(0)">
						<view style="height: 42rpx;" :class="{ activecltab: eharTab.active3 == 0 }">排名</view>
					</view>
					<view class="title3-box" @click="tabtimetap3(1)">
						<view style="height: 42rpx;" :class="{ activecltab: eharTab.active3 == 1 }">趋势</view>
					</view>
				</view>
			</view>
			<view v-if="eharTab.active3 == 1 ">
				<view class="danwei">执行率(%)</view>
				<view class="uchaserbox">
					<template v-if="lineOptsect3">
						<qiun-data-charts type="line" :chartData="lineOptsect3" background="none" :ontouch="true"
							canvasId="wangxiaohuaerlingeryilingwuyib" :canvas2d="true" :opts="lineOpts" />
					</template>
				</view>
			</view>
			<view class="jindu" v-if="eharTab.active3 == 0 ">
				<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 class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
					</view>
				</view>
			</view>
		</view>

		<view class="single">
			<view class="title" style="padding-right: 30rpx;">
				<view class="title1" style="flex: 1;">销讲能力</view>

				<view class="title2" style="flex-grow: 1;justify-content: flex-end;">
					<view class="title2-che" @click="goTeam" style="width: 170rpx;">团队
						<image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
					</view>
				</view>
			</view>

			<view class="uchaserbox" v-if="chartData1 && chartData1.series.length > 0">
				<qiun-data-charts :opts="opts" type="radar" :chartData="chartData1" :canvas2d="true"
					canvasId="wangxiaohuaerlingeryilingwuyib88" background="none" />
			</view>
			<view v-else style="width: 100%; height: 470rpx; display: flex; align-items: center">
				<view style="width: 100%;background: #ffffff">
					<view style="width: 100%; text-align: center">
						<image style="width: 220rpx; height: 200rpx"
							src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
					</view>
					<view style="
				  text-align: center;
				  width: 100%;
				  margin-top: 20rpx;
				  color: #999999;
				">暂无数据</view>
				</view>
			</view>
		</view>


		<!-- 选择部门的选择框 -->
		<!-- 		<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-popup v-model="teamComparisonShow" mode="bottom" height="500">
			<view class="teamComparison">
				<view class="title">
					<view class="title-cancel" @tap="cancelTeamComparison()">
						取消
					</view>

					<view class="title-confirm" @tap="confirmTeamComparison()">
						确认
					</view>
				</view>
				<scroll-view class="team-scroll-box" scroll-y="true">
					<!-- /选中的第一项 -->
					<template v-if="staffShow">
						<view class="team-scroll-boxs">
							<!-- staffList 数组 -->
							<block v-for="(data, index) in staffList" :key="index">
								<view class="teamitem">
									<text>{{ data.label }}</text>
									<u-checkbox @change="complateStaff(data, 'staffList')" v-model="data.select">
									</u-checkbox>
								</view>
							</block>
						</view>
					</template>

					<template v-if="staffShow1">
						<view class="team-scroll-boxs">

							<!-- staffList 数组 -->
							<block v-for="(data, index) in staffList1" :key="index">
								<view class="teamitem">
									<text>{{ data.label }}</text>
									<u-checkbox @change="complateStaff(data, 'staffList1')" v-model="data.select">
									</u-checkbox>
								</view>
							</block>
						</view>
					</template>
				</scroll-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>

		<!-- 日期选择器 -->
		<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,
				eharTab: {
					active1: 0,
					active2: 0,
					active3: 0,
					active4: 0,
				},
				deptids: '',
				bocindex: 0,
				timepickpickisshow: false,
				totalTimeShow: false,
				// 项目id
				houseId: '',
				staffList: [],
				staffList1: [],
				staffShow: false,
				staffShow1: false,
				staff1: {
					value: '',
					label: '全部',
					select: true,
				},
				staff2: {
					value: '',
					select: true,
					label: '请选择'
				},
				lastStartDate: '',
				lastEndDate: '',
				selindex: [0],
				choseStaffFlag: false,
				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]
						}
					]
				},
				lineOptsect3: {
					"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]
						}
					]
				},
				lineOptsect4: {
					"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]
						}
					]
				},
				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'
					},
				],
				newTeam1: '',
				newAvg1: '',
				newTeam2: '',
				newAvg2: '',
				newTeam3: '',
				newAvg3: '',
				newTeam4: '',
				newAvg4: '',
				chartData1: {
					"categories": ["维度1", "维度2", "维度3", "维度4", "维度5", "维度6"],
					"series": [{
						"name": "成交量",
						"data": [90, 110, 165, 195, 187, 172]
					}]
				},
				chartData2: {
					"categories": ["维度1", "维度2", "维度3", "维度4", "维度5", "维度6"],
					"series": [{
						"name": "成交量",
						"data": [90, 110, 165, 195, 187, 172]
					}]
				},
				opts: {
					fontSize: 10,
					extra: {
						radar: {
							max: 100
						}
					}
				},
				lineOpts: {
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 8
					},
					yAxis: {
						data: [{
							max: 100,
							min: 0,
						}]
					}
				},
				lineOpts1: {
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 8
					}
				},
				screenShow: false, // 时间筛选弹窗
				showTimeText: '近七天', // 展示文字
				showBeText: '全部业务', // 
				templateList: [], // 销讲业务
				showTemplate: false, // 展示选择销讲业务弹窗
				marketingBusiness: '', // 选择的业务id

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

				teamComparisonShow: false, // 选择对比的弾框

			};
		},
		onLoad() {
			this.LOADING = true
			this.getMarketingBusiness()
			let that = this
			uni.$on('update', (data) => {
				this.deptids = data.arr.join(',')
				// 获取销奖能力
				this.getPowerList()
			})
			// 获取项目id
			this.houseId = uni.getStorageSync('buildingID').id;
			// 请求接口获取所有置业顾问员工的列表
			this.getSectionList()

		},
		onPullDownRefresh() {
			this.getSectionList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// checkbox改变事件
			complateStaff(e, staffList) {
				if (e.label == '全部') {
					if (e.select) {
						this[staffList].forEach(item => {
							if (item.value) {
								item.select = false
							}
						})
					} else {
						this[staffList].forEach(item => {
							if (item.value) {
								item.select = false
							}
						})
						this[staffList][0].select = true
					}
				} else {
					this[staffList].forEach(item => {
						if (!item.value) {
							item.select = false
						}
					})
				}
				this.$forceUpdate()
			},

			// 销讲业务方法
			templateCancel() {
				this.showTemplate = false;
			},

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


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

			// 获取销讲业务
			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: ''
					})
				})
			},


			getPercent1(num) {
				return num || 0
			},
			getPercent(num, type) {
				if (this.newlisttabinfo1 && this.newlisttabinfo1.length && type == 1) {
					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
				}
			},
			//是否对比
			checkboxChange() {
				this.timepickpickisshow = !this.timepickpickisshow;
				this.staff2.label = '请选择'
				this.staff2.value = ''
				this.lineOptsect1 = null
				this.lineOptsect2 = null
				this.lineOptsect3 = null
				this.chartData1 = null
				// 团队对比接待量
				this.receptionCountList(this.eharTab.active1, 1, '/cusLvStatistics/teamAnalysisReception')
				// 团队对比接待时长
				this.receptionCountList(this.eharTab.active2, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
				/* 销奖执行率 */
				this.receptionCountList(this.eharTab.active3, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
				// 获取销奖能力
				this.getPowerList()
			},
			// 获取部门列表
			getSectionList() {
				this.$u.post('/cusLvStatistics/findAllDeptIdByHouseId', {
						houseId: this.houseId
					})
					.then(res => {
						this.staffList = res.map(item => {
							return {
								value: item.deptId,
								label: item.deptName,
								select: false,
							}
						})
						this.staffList1 = res.map(item => {
							return {
								value: item.deptId,
								label: item.deptName,
								select: false,
							}
						})
						this.staffList.unshift(this.$options.data().staff1)
						// 团队对比接待量
						this.receptionCountList(0, 1, '/cusLvStatistics/teamAnalysisReception')
						// 团队对比接待时长
						this.receptionCountList(0, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
						/* 销奖执行率 */
						this.receptionCountList(0, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
						// 获取销奖能力
						this.getPowerList()

					})
			},

			//时间切换
			tabtimetap(index, text) {
				this.activeTotal = index;
				if (index == 3) {
					this.totalTimeShow = true;
					this.screenShow = false
				} else {
					this.screenShow = false
					this.showTimeText = text
					this.activeTotal = index;
					this.lastEndDate = ''
					this.lastStartDate = ''
					// 获取数据
					// 团队对比接待量
					this.receptionCountList(this.eharTab.active1, 1, '/cusLvStatistics/teamAnalysisReception')
					// 团队对比接待时长
					this.receptionCountList(this.eharTab.active2, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
					/* 销奖执行率 */
					this.receptionCountList(this.eharTab.active3, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
					// 获取销奖能力
					this.getPowerList()
				}
			},
			// 接待量
			tabtimetap1(idx) {
				this.eharTab.active1 = idx
				// 调用方法
				this.receptionCountList(idx, 1, '/cusLvStatistics/teamAnalysisReception')
			},
			// 接待时长
			tabtimetap2(idx) {
				this.eharTab.active2 = idx
				// 调用方法
				this.receptionCountList(idx, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
			},
			tabtimetap3(idx) {
				this.eharTab.active3 = idx
				// 调用方法
				this.receptionCountList(idx, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
			},
			tabtimetap4(idx) {
				this.eharTab.active4 = idx
				// 调用方法
				// this.getRecordList()
			},
			//自定义时间
			totalTimeChange(e) {
				this.screenShow = false
				this.showTimeText = `${e.startDate}-${e.endDate}`
				this.activeTotal = 3;
				this.lastEndDate = e.endDate
				this.lastStartDate = e.startDate
				// 获取数据
				// 团队对比接待量
				this.receptionCountList(this.eharTab.active1, 1, '/cusLvStatistics/teamAnalysisReception')
				// 团队对比接待时长
				this.receptionCountList(this.eharTab.active2, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
				/* 销奖执行率 */
				this.receptionCountList(this.eharTab.active3, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
				// 获取销奖能力
				this.getPowerList()
			},
			//指标执行率分析tab
			tapspagek2(index) {
				this.bocindex = index;
			},
			//集团对比
			Groupcontrast() {
				uni.navigateTo({
					url: '/pages/center/Piabodata/Groupcontrast'
				});
			},
			// 去选择团队
			goTeam() {
				uni.navigateTo({
					url: `/pages/center/Piabodata/selectTeam?ids=${this.deptids}`
				})
			},

			// 点击部门对比
			chiocStaff(idx) {
				if (idx == 0) {
					// 当选择了第一个的时候
					this.teamComparisonShow = true
					this.staffShow = true
					this.staffShow1 = false
				} else {
					this.teamComparisonShow = true
					this.staffShow1 = true
					this.staffShow = false
				}
			},

			// 取消选择
			cancelTeamComparison() {
				this.teamComparisonShow = false
			},

			// 选择团队对比后
			confirmTeamComparison() {

				// 当变量staffShow为true时则选择的是左侧数据
				if (this.staffShow) {
					let arr = this.staffList.filter(item => item.select)
					let name = arr.map(item => {
						return item.label
					})
					if (arr.length != 0 && !name.includes('全部')) {
						this.staff1.label = arr.map(imte => {
							return imte.label
						}).join(',')
						this.staff1.value = arr.map(item => {
							return item.value
						})
					} else {
						this.staff1 = this.$options.data().staff1
					}
					console.log(this.staffList, 'staffList')
				}
				if (this.staffShow1) {
					let arr = this.staffList1.filter(item => item.select)
					let name = arr.map(item => {
						return item.label
					})
					if (arr.length != 0 && !name.includes('平均')) {
						this.staff2.label = arr.map(imte => {
							return imte.label
						}).join(',')
						this.staff2.value = arr.map(item => {
							return item.value
						})
					} else {
						this.staff2 = this.$options.data().staff2
					}
				}
				if (!this.staff1.value) {
					this.cancelTeamComparison() // 隐藏弹窗
					this.staffSelectCallback()
				} else {
					let isPass = this.staff1.value.filter(item => {
						return this.staff2.value.includes(item)
					})
					if (isPass.length > 0) {
						uni.showToast({
							title: '请勿选择重复',
							icon: 'none'
						})
						this.staff2 = this.$options.data().staff2
						return
					} else {
						this.cancelTeamComparison() // 隐藏弹窗

						this.staffSelectCallback()
					}
				}
			},


			staffSelectCallback() {
				// 获取数据
				// 团队对比接待量
				this.receptionCountList(this.eharTab.active1, 1, '/cusLvStatistics/teamAnalysisReception')
				// 团队对比接待时长
				this.receptionCountList(this.eharTab.active2, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
				/* 销奖执行率 */
				this.receptionCountList(this.eharTab.active3, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
				// 获取销奖能力
				this.getPowerList()
			},

			// 公共方法
			receptionCountList(idx, index, url) {

				let deptids = ''
				let de = ''
				let str = ''
				if (this.staff1.value) {
					deptids = this.staff1.value.join(',')
				}
				if (this.staff2.value) {
					de = this.staff2.value.join(',')
				}
				if (deptids && de) {
					str = [deptids, de].join('-')
				} else if (deptids && !de) {
					str = deptids
				}
				this.$u.post(url, {
						deptIds: str,
						showRank: idx,
						houseId: this.houseId,
						timeType: this.lastEndDate ? null : this.activeTotal + '',
						lastEndDate: this.lastEndDate,
						lastStartDate: this.lastStartDate,
						marketingBusiness: this.marketingBusiness,
					})
					.then(res => {
						let result = res.result
						this['newTeam' + index] = res.avg[0]
						this['newAvg' + index] = res.avg[1]
						if (idx == 0) {
							// 当选择的是牌名时
							// 处理数据
							// 先处理牌名数据,需要进行判断全部还是单个
							// 当为全部时
							this['newlisttabinfo' + index] = []
							let arr = []
							// 当选择全部时
							if (!this.staff1.value && !this.staff2.value) {
								result[0].map(item => {
									let obj = {}
									obj.name = item.deptName
									obj.zxl = item.data
									arr.push(obj)

								})
								arr = this.dealData(arr)
								this['newlisttabinfo' + index] = arr
							}
							// 当选择只有一个时
							else if (this.staff1.value && !this.staff2.value) {
								result[0].map(item => {
									let obj = {}
									obj.name = item.deptName
									obj.zxl = item.data
									arr.push(obj)
								})
								// 判断是否显示平均
								// 如果显示对比
								if (this.timepickpickisshow) {
									result[1].map(item => {
										let obj = {}
										obj.name = '平均'
										obj.zxl = item.data
										arr.push(obj)
									})
								}
								arr = this.dealData(arr.sort((a, b) => {return b.zxl - a.zxl}))
								this['newlisttabinfo' + index] = arr
							} else {
								// 当两个都选择的时候
								result[0].map(item => {
									let obj = {}
									obj.name = item.deptName
									obj.zxl = item.data
									arr.push(obj)
								})
								result[1].map(item => {
									let obj = {}
									obj.name = item.deptName
									obj.zxl = item.data
									arr.push(obj)
								})
								arr = this.dealData(arr)
								this['newlisttabinfo' + index] = arr
							}
						} else {
							// 当选择趋势时
							this['lineOptsect' + index] = {}
							let allobj = {
								categories: [],
								series: []
							}
							// 先处理时间
							// 当选择全部时
							if (!this.staff1.value && !this.staff2.value) {
								result.map((item, idx) => {
									let obj = {}
									obj.name = item[0].deptName
									obj.data = []
									item.map(item1 => {
										// 时间的处理
										if (idx == 0) {
											allobj.categories.push(item1.statDate.slice(5, 10))
										}
										obj.data.push(item1.data)
									})
									allobj.series.push(obj)
								})
							}
							// 当选择只有一个时
							else if (this.staff1.value && !this.staff2.value) {
								let obj = {}
								obj.data = []
								obj.name = result[0][0].deptName
								result[0].map(item => {
									allobj.categories.push(item.statDate.slice(5, 10))
									obj.data.push(item.data)
								})
								allobj.series.push(obj)
								// 判断是否显示平均
								// 如果显示对比
								if (this.timepickpickisshow) {
									let obj = {}
									obj.data = []
									obj.name = '平均'
									result[1].map(item => {
										obj.data.push(item.data)
									})
									allobj.series.push(obj)
								}
							} else {
								// 当两个都选择的时候
								let obj = {}
								let obj1 = {}
								obj.data = []
								obj1.data = []
								obj.name = result[0][0].deptName
								obj1.name = result[1][0].deptName
								result[0].map(item => {
									allobj.categories.push(item.statDate.slice(5, 10))
									obj.data.push(item.data)
								})
								result[1].map(item => {
									obj1.data.push(item.data)
								})
								allobj.series.push(obj)
								allobj.series.push(obj1)
							}
							this['lineOptsect' + index] = allobj
						}

						this.$forceUpdate()
					})
			},
			// 获取销奖能力
			getPowerList() {
				let deptids = ''
				let de = ''
				let str = ''
				if (this.staff1.value) {
					deptids = this.staff1.value.join(',')
				}
				if (this.staff2.value) {
					de = this.staff2.value.join(',')
				}
				if (this.timepickpickisshow) {
					if (!de) {
						str = deptids+'-'
					} else {
						str = [deptids, de].join('-')
					}
				} else if (deptids && !de) {
					str = deptids
				}
				this.$u.post('/cusLvStatistics/teamAnalysisMarketingAbility', {
						deptIds: this.deptids || str,
						houseId: this.houseId,
						timeType: this.lastEndDate ? null : this.activeTotal + '',
						lastEndDate: this.lastEndDate,
						lastStartDate: this.lastStartDate,
						marketingBusiness: this.marketingBusiness,
					})
					.then(res => {
						this.LOADING = false
						// 处理数据
						this.chartData1 = {
							categories: [],
							series: []
						}
						let allobj = {
							categories: [],
							series: []
						}
						// 当选择全部时
						if (!this.staff1.value && !this.staff2.value) {
							console.log(this.staff1.value, this.staff2.value, '!this.staff1.value && !this.staff2.value')
							res.first.map((item, index) => {
								let obj = {
									name: item[0].deptName,
									data: []
								}
								item.map((item1) => {
									if (index == 0) {
										allobj.categories.push(item1.name)
									}
									obj.data.push(item1.avgExecutionRate)
								})
								allobj.series.push(obj)
							})

						}
						// 当选择只有一个时
						else if (this.staff1.value && !this.staff2.value) {
							console.log(this.staff1.value, this.staff2.value, 'this.staff1.value && !this.staff2.value')
							res.first.map((item, index) => {
								let obj = {
									name: item[0].deptName,
									data: []
								}
								item.map((item1) => {
									if (index == 0) {
										allobj.categories.push(item1.name)
									}
									obj.data.push(item1.avgExecutionRate)
								})
								allobj.series.push(obj)
							})
							// 判断是否显示平均
							// 如果显示对比
							if (this.timepickpickisshow) {
								res.second.map((item, index) => {
									let obj = {
										name: '平均',
										data: []
									}
									item.map((item1) => {
										obj.data.push(item1.avgExecutionRate)
									})
									allobj.series.push(obj)
								})
							}
						} else {
							console.log(this.staff1.value, this.staff2.value, 'else')
							// 当两个都选择的时候
							res.first.map((item, index) => {
								let obj = {
									name: item[0].deptName,
									data: []
								}
								item.map((item1) => {
									if (index == 0) {
										allobj.categories.push(item1.name)
									}
									obj.data.push(item1.avgExecutionRate)
								})
								allobj.series.push(obj)
							})
						}
						this.chartData1 = allobj
						this.$forceUpdate()
					}).catch(e => {
						this.LOADING = false
					})
			},
			// 定义一个公共方法对数据进行处理
			dealData(arr) {
				// 获取最大值
				let num = Math.max.apply(Math, arr.map(function(o) {
					return o.zxl
				})) //结果：3
				if (num > 100) {
					// 获取最大值的下标
					arr.map(item => {
						item.zxl1 = Math.floor(item.zxl / num * 100)
					})
					return arr
				} else {
					arr.map(item => {
						item.zxl1 = item.zxl
					})
					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;
		}
	}

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

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

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

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

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

		.maxTextLine {
			max-width: calc(260rpx - 40rpx);
		}
	}

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

	.Underimg {
		width: 28rpx;
		height: 14rpx;
		margin-left: 12rpx;
	}

	.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 {
			margin: 0 auto;
			max-width: 90%;
			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;
		}
	}

	.righttochoose {
		width: 24rpx;
		height: 24rpx !important;
	}

	.title2-che {
		display: flex;
		align-items: center;
		justify-content: space-around;
		overflow: hidden;
	}

	.screen {
		width: 100%;

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

			.tabbox {
				width: 100%;
			}
		}
	}


	.teamComparison {
		padding: 0 30rpx;
		height: 500rpx;

		.title {
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #E0E0E0;

			text {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}

			.title-confirm {
				color: #2671E2;
			}
		}

		.team-scroll-box {
			height: 400rpx;

			.team-scroll-boxs {

				.teamitem {
					width: 100%;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}

	.textMax {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>