newEdition/pages/center/Piabodata/Groupcontrast.vue

<template>
	<view class="pages">

		<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="container">
			<scroll-view class="lside" scroll-y="true">
				<view class="lside-scrollbox">
					<block v-for="(data, index) in lsideList">
						<view class="lside-scrollbox-items" @tap="chooseLside(data, index)"
							:class="{active: index === lsideListIndex}" :key="index">
							{{ data.title }}
						</view>
					</block>
				</view>
			</scroll-view>

			<scroll-view class="rside" scroll-y="true">
				<view class="rside-scrollbox">
					<!-- 接待量 -->
					<template v-if="lsideListIndex === 0">
						<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>
							<block v-for="(item,index) in newlisttabinfo1">
								<view class="box">
									<view class="box-lside">
										<template v-if="index < 2">
											<image class="img"
												:src="'../../../static/images/ranking/ranking'+ (index+1) +'.png'"
												mode=""></image>
										</template>
										<template v-else>
											<view class="ranking">{{ index + 1 }}</view>
										</template>
									</view>
									<view class="box-rside">
										<view class="box-top">
											<view class="percent-name">{{item.name}}</view>
											<view class="percent-zxl">{{ !item.zxl ? 0 : item.zxl}}</view>
										</view>
										<view class="percent-box">
											<view class="percent" :style="'width:'+ getPercent(item.zxl,1) + '%'">
											</view>
										</view>
									</view>
								</view>
							</block>
						</view>
					</template>

					<!-- 接待时长 -->
					<template v-if="lsideListIndex === 1">
						<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>

							<block v-for="(item,index) in newlisttabinfo2">
								<view class="box">
									<view class="box-lside">
										<template v-if="index < 2">
											<image class="img"
												:src="'../../../static/images/ranking/ranking'+ (index+1) +'.png'"
												mode=""></image>
										</template>
										<template v-else>
											<view class="ranking">{{ index + 1 }}</view>
										</template>
									</view>
									<view class="box-rside">
										<view class="box-top">
											<view class="percent-name">{{item.name}}</view>
											<view class="percent-zxl">{{ !item.zxl ? 0 : item.zxl}}</view>
										</view>
										<view class="percent-box">
											<view class="percent" :style="'width:'+ getPercent(item.zxl,2) + '%'">
											</view>
										</view>
									</view>
								</view>
							</block>
						</view>
					</template>

					<!-- 销讲执行排名 -->
					<template v-if="lsideListIndex === 2">

						<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">{{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>


							<block v-for="(item,index) in newlisttabinfo3">
								<view class="box">
									<view class="box-lside">
										<template v-if="index < 2">
											<image class="img"
												:src="'../../../static/images/ranking/ranking'+ (index+1) +'.png'"
												mode=""></image>
										</template>
										<template v-else>
											<view class="ranking">{{ index + 1 }}</view>
										</template>
									</view>
									<view class="box-rside">
										<view class="box-top">
											<view class="percent-name">{{item.name}}</view>
											<view class="percent-zxl">{{ !item.zxl ? 0 : item.zxl}}</view>
										</view>
										<view class="percent-box">
											<view class="percent" :style="'width:'+ getPercent1(item.zxl) + '%'">
											</view>
										</view>
									</view>
								</view>
							</block>
						</view>
					</template>

					<!-- 顾问执行排名 -->
					<template v-if="lsideListIndex === 3">
						<view class="single">
							<view class="title">
								<view class="title1" style="flex: 1;">顾问执行排名（TOP10）</view>
							</view>
							
							<block v-for="(item,index) in newlisttabinfo4">
								<view class="box">
									<view class="box-lside">
										<template v-if="index < 2">
											<image class="img"
												:src="'../../../static/images/ranking/ranking'+ (index+1) +'.png'"
												mode=""></image>
										</template>
										<template v-else>
											<view class="ranking">{{ index + 1 }}</view>
										</template>
									</view>
									<view class="box-rside">
										<view class="box-top">
											<view class="percent-name">{{item.name}}</view>
											<view class="percent-zxl">{{ !item.zxl ? 0 : item.zxl}}</view>
										</view>
										<view class="percent-box">
											<view class="percent" :style="'width:'+ getPercent1(item.zxl) + '%'">
											</view>
										</view>
									</view>
								</view>
							</block>
						</view>
					</template>

					<template v-if="lsideListIndex === 4">
						<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="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="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>

					</template>

				</view>
			</scroll-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-loadings v-model="LOADING"></u-loadings>
	</view>
</template>

<script>
	var app = getApp();
	var util = require("../../../utils/util.js");
	var config = require("../../../config");
	export default {
		data() {
			return {
				activeTotal: 4, // 时间选择下标

				// 日期选择器
				totalTimeShow: false, // 日期选择器
				lastStartDate: '', // 开始时间
				lastEndDate: '', // 结束时间

				// 项目选择器
				staffShow: false, // 展示项目选择器
				staffList: [], // 可选项目列表
				staff: {
					value: '',
					label: '',
				}, // 选择的项目数据
				houseId: '', // 项目id


				lsideList: [{
						title: '接待量',
						method: 'receptionCountList',
						methodParams: "1,groupComparisonReception",
					},
					{
						title: '接待时长',
						method: 'receptionCountList',
						methodParams: "2,groupComparisonReceptionTime"
					},
					{
						title: '销讲排名',
						method: 'receptionCountList',
						methodParams: "3,groupComparisonTalkRank"
					},
					{
						title: '顾问排名',
						method: 'receptionCountList',
						methodParams: "4,groupComparisonTalkRankByConsultant"
					},
					{
						title: '销讲能力',
						method: 'getPowerList',
						methodParams: ''
					},
				],
				lsideListIndex: 0, // 默认选中下标

				// 右侧存放数据变量
				newlisttabinfo1: [{
						name: '接待量',
						zxl: '0'
					},
					{
						name: '平均执行率',
						zxl: '0'
					},
					{
						name: '接待客户',
						zxl: '0'
					},
				], // 接待量
				// 接待量
				newTeam1: '',
				newAvg1: '',

				newlisttabinfo2: [{
						name: '接待量',
						zxl: '0'
					},
					{
						name: '平均执行率',
						zxl: '0'
					},
					{
						name: '接待客户',
						zxl: '0'
					},
				], // 接待时长
				// 接待时长
				newTeam2: '',
				newAvg2: '',

				newlisttabinfo3: [{
						name: '接待量',
						zxl: '0'
					},
					{
						name: '平均执行率',
						zxl: '0'
					},
					{
						name: '接待客户',
						zxl: '0'
					},
				], // 销讲排名
				// 销讲排名
				newTeam3: '',
				newAvg3: '',

				newlisttabinfo4: [{
						name: '接待量',
						zxl: '0'
					},
					{
						name: '平均执行率',
						zxl: '0'
					},
					{
						name: '接待客户',
						zxl: '0'
					},
				], // 顾问排名

				// 顾问排名
				newTeam4: '',
				newAvg4: '',
				chartData: {
					categories: [],
					series: []
				}, // 销讲能力

			};
		},

		onLoad() {
			this.LOADING = true
			uni.$on('updateGroup', (data) => {
				this.houseId = data.arr.join(',')
				// 获取销奖能力
				this.getPowerList()
			})
			this.getSectionList()
		},

		onPullDownRefresh() {},

		methods: {

			// 获取部门列表
			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()
					})

			},

			// 获取数据
			getdata() {
				let params = this.lsideList[this.lsideListIndex].methodParams.split(',')
				this[this.lsideList[this.lsideListIndex].method](params[0], params[1])

			},

			// 转换百分比
			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
				}
			},

			// 取数值
			getPercent1(num) {
				console.log(num)
				return num || 0
			},

			// 接待时长
			receptionCountList(index, url) {
				this.$u.post(`/cusLvStatistics/${url}`, {
						timeType: this.lastEndDate ? null : this.activeTotal + '',
						lastEndDate: this.lastEndDate,
						lastStartDate: this.lastStartDate
					})
					.then(res => {
						this.LOADING = false
						// console.log(res)
						let result = res.result
						this['newTeam' + index] = res.avg[0]
						this['newAvg' + index] = res.avg[1]
						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
					}).catch(() => {
						this.LOADING = false
					})
			},

			// 获取销奖能力
			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 => {
						this.LOADING = false
						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;
						}
					}).catch(e => {
						this.LOADING = false
					})
			},

			//时间切换
			tabtimetap(index) {
				this.activeTotal = index;
				if (index == 3) {
					this.totalTimeShow = true;
				} else {
					this.lastEndDate = ''
					this.lastStartDate = ''
					this.getdata()
				}
			},

			//自定义时间
			totalTimeChange(e) {
				console.log(e.startDate, e.endDate)
				this.activeTotal = 3;
				this.lastEndDate = e.endDate
				this.lastStartDate = e.startDate
				this.getdata()
			},

			// 定义一个公共方法对数据进行处理
			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
				}
			},

			// 选择项目后更新数据
			staffSelectCallback(e) {
				this.staff = e[0]
				this.houseId = e[0].value
				this.getPowerList()
			},

			// 左侧菜单选中
			chooseLside(data, index) {
				this.lsideListIndex = index
				this.getdata()
			},
		},
	};
</script>
<style lang="scss" scoped>
	.pages {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #F8F8F8;

		.boxtittab {}

		.container {
			padding: 16rpx 0;
			width: 100%;
			height: calc(100% - 92rpx);
			display: grid;
			grid-template-columns: 160rpx 1fr;

			.lside {
				width: 100%;
				height: 100%;
				background: #F6F7FB;

				.lside-scrollbox {
					width: 100%;
					display: flex;
					flex-direction: column;

					.lside-scrollbox-items {
						width: 100%;
						height: 72rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

						&.active {
							font-weight: 600;
							color: #2671E2;
							background: #FFFFFF;
						}
					}
				}

			}
		}

		.rside {
			width: 100%;
			height: 100%;

			.rside-scrollbox {
				width: 100%;
				min-height: 100%;
				background: #fff;
				display: flex;
				flex-direction: column;


				.single {
					width: 100%;
					display: flex;
					flex-direction: column;

					.hejisan {
						margin: 0 auto 28rpx;
						width: 542rpx;
						height: 120rpx;
						display: flex;
						background: #F6F7FB;
						border-radius: 8rpx;

						.sanbox1 {
							position: relative;
							flex-grow: 1;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							&:last-child::after {
								content: '';
								position: absolute;
								left: 0;
								top: 50%;
								transform: translateY(-50%);
								width: 1rpx;
								height: 80rpx;
								background: #E0E0E0;
							}
						}

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



					.uchaserbox {
						width: 100%;
						height: 470rpx;
					}


					.box {
						margin: 0 0 28rpx;
						padding: 0 24rpx;
						width: 100%;
						display: flex;


						.box-lside {
							margin: 0 24rpx 0 0;
							flex-shrink: 0;
							display: flex;
							justify-content: center;
							align-items: center;

							.img {
								width: 42rpx;
								height: 44rpx;
							}

							.ranking {
								width: 42rpx;
								height: 44rpx;
								font-size: 24rpx;
								font-family: SFPro-SemiboldItalic, SFPro;
								font-weight: normal;
								color: #8A8D9F;
							}
						}

						.box-rside {
							flex-grow: 1;

							.box-top {
								margin-bottom: 14rpx;
								width: 470rpx;
								display: flex;

								.percent-name {
									flex-grow: 1;
									width: calc(100% - 42rpx);
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}

								.percent-zxl {
									flex-shrink: 0;
								}
							}

							.percent-box {
								width: 100%;
								height: 30rpx;

								.percent {
									height: 100%;
									background: #F1F3FF;
									border-radius: 15px;
								}
							}
						}
					}
				}
			}
		}
	}
</style>