NewZkgj/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="hejibox">
				<view class="heji">项目：{{newTeam1||0}}</view>
				<view class="heji">均值：{{newAvg1||0}}</view>
			</view>
			<view class="jindu">

				<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 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>
			</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">项目：{{newTeam2||0}}</view>
				<view class="heji">均值：{{newAvg2||0}}</view>
			</view>
			<view class="jindu">
				<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 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>
			</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">项目：{{newTeam3||0}}</view>
				<view class="heji">均值：{{newAvg3||0}}%</view>
			</view>
			<view class="jindu">
				<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 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>
			</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" style="padding: 30rpx 0;">
				<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 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>

			</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;"><text
							style="margin-right: 40rpx;">{{staff.label}}</text>
						<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" :opts="opts" :chartData="chartData" :canvas2d="true"
					canvasId="wangxiaohuaerlingeryilingwuyib88" background="none" />
			</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>


		<!-- 加载组件  -->
		<loading v-model="LOADING"></loading>
	</view>
</template>

<script>
	var app = getApp();
	var util = require("../../../utils/util.js");
	var config = require("../../../config");
	import loading from "@/components/loading/index.vue"
	export default {
		components: {
			loading
		},
		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": ["维度1", "维度2", "维度3", "维度4", "维度5", "维度6"],
					"series": [{
						"name": "成交量",
						"data": [90, 110, 165, 195, 187, 172]
					}]
				},

				opts: {
					fontSize: 10,
					extra: {
						radar: {
							max: ''
						}
					}
				}

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


		},
		onPullDownRefresh() {
			let that = this
			uni.$on('updateGroup', function(data) {
				console.log(data)
				that.houseId = data.arr.join(',')
				// 获取销奖能力
				that.getPowerList()
			})
			this.getSectionList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		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()
						// 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) {
				if (index == 3) {
					this.totalTimeShow = true;
				} else {
					this.activeTotal = index;
					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.$u.post('/cusLvStatistics/groupComparisonMarketingAbility', {
						houseIds: this.houseId,
						timeType: this.lastEndDate ? null : this.activeTotal + '',
						lastEndDate: this.lastEndDate,
						lastStartDate: this.lastStartDate
					})
					.then(res => {
						this.LOADING = false
						// console.log(res,123)
						// 处理数据
						// return
						this.chartData = {
							categories: [],
							series: []
						}
						let allobj = {
							categories: [],
							series: []
						}
						let max = 0;
						res.result.map((item, index) => {
							let obj = {
								name: item[0].houseName,
								data: []
							}
							item.map(item1 => {
								if (index == 0) {
									allobj.categories.push(item1.name)
								}
								obj.data.push(item1.avgExecutionRate)
								if (max < item1.avgExecutionRate) max = item1.avgExecutionRate;
							})
							allobj.series.push(obj)
						})
						// console.log(allobj)
						this.opts.extra.radar.max = max + 25
						this.chartData = allobj
						this.$forceUpdate()
					}).catch(e => {
						this.LOADING = 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;
	}

	.jindu {
		padding: 0 0 30rpx;
		height: auto;
		min-height: 300rpx;
	}
</style>