NewZkgj/pages/center/Piabodata/index.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="Piabodata-box">
			<view class="Piabodata" @click="toTrendAnalysis()">
				<view class="Piabodata-img">
					<image class="Piabodata-img1" src="../../../static/images/qushi.png" mode=""></image>
				</view>
				<view class="Piabodata-text">趋势分析</view>
			</view>
			<view class="Piabodata" @click="toStaffAnalysis()">
				<view class="Piabodata-img">
					<image class="Piabodata-img1" src="../../../static/images/yuangong.png" mode=""></image>
				</view>
				<view class="Piabodata-text">员工分析</view>
			</view>
			<view class="Piabodata" @click="toUserinsightinto()">
				<view class="Piabodata-img">
					<image class="Piabodata-img1" src="../../../static/images/yinghu.png" mode=""></image>
				</view>
				<view class="Piabodata-text">用户洞察</view>
			</view>
			<view class="Piabodata" @click="Theteamcompared()" v-if="Theteamcomparedisshow">
				<view class="Piabodata-img">
					<image class="Piabodata-img1" src="../../../static/images/tuandui.png" mode=""></image>
				</view>
				<view class="Piabodata-text">团队对比</view>
			</view>
			<view class="Piabodata" @click="Groupcontrast()" v-if="Groupcontrastisshow">
				<view class="Piabodata-img">
					<image class="Piabodata-img1" src="../../../static/images/jituan.png" mode=""></image>
				</view>
				<view class="Piabodata-text">集团对比</view>
			</view>
			
		</view>
		
		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
		<view class="boxzonglan" style="min-height: 400rpx;">
			<view class="zonglantit">简报</view>
			<view class="zonglanbox">
				<view class="grid" v-for="(item,index) in numlist" :key="index">
					<view class="audonum">{{item.name}}</text></view>
					<view class="num">{{item.num}}</view>
				</view>
			</view>
		</view>
		
		
		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
		<view class="single">
			<view class="title">
				<view class="title1">接待趋势</view>
			</view>
			<view class="swiper-box">
				<u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="600" :current="bocindex" @change="tapspagek2()"
				 inactive-color="#b1b1b1" active-color="#008ef2" :list="newlistoj1" :is-scroll="true">
				</u-tabs-swiper>
			</view>
<!-- 			<view class="hejibox">
				<view class="heji">合计：50</view>
				<view class="heji">均值：25</view>
			</view> -->
			<view class="danwei">{{danwei}} </view>
			<view class="uchaserbox">
				<qiun-data-charts
				   type="line"
				   :chartData="lineOptsect"
				   background="none"
				   :ontouch="true"
					canvasId="wangxiaohuaerlingilingwuyiba1"
					:canvas2d="true"
				 /> 
			</view>
		</view>
		
		
		<view class="" v-if="teamFlag">
			<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
					<view class="single">
						<view class="title" @click="staffShow1=true">
							<view class="title1">团队接待趋势</view>
							<view class="title2">
								<view class="title2-che" style="width: 220rpx;">{{team.label}}
									<image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
								</view>
			<!-- 					<view class="title2-che">执行率
									<image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
								</view> -->
							</view>
						</view>
<!-- 						<view class="hejibox">
							<view class="heji">合计：{{allnum||0}}</view>
							<view class="heji">均值：{{allavg||0}}</view>
						</view> -->
						<view class="danwei">单位(%)</view>
						<view class="uchaserbox">
							<qiun-data-charts
							   type="line"
							   :chartData="lineOptsect1"
							   background="none"
							   :ontouch="true"
								canvasId="wangxiaohuaerlineryiliwuyibao"
								:canvas2d="true"
							 /> 
						</view>
					</view>
		</view>
		
		<view class="" v-if="staffFlag">
			<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
					<view class="single">
						<view class="title">
							<view class="title1">员工接待趋势</view>
							<view class="title2" @click="staffShow=true">
								<view class="title2-che" style="width: 220rpx;">{{staff.label}}
									<image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
								</view>
			<!-- 					<view class="title2-che">执行率
									<image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
								</view> -->
							</view>
						</view>
<!-- 						<view class="hejibox">
							<view class="heji">合计：{{allnum1||0}}</view>
							<view class="heji">均值：{{allavg1||0}}</view>
						</view> -->
						<view class="danwei">单位(%)</view>
						<view class="uchaserbox">
							<qiun-data-charts
							   type="line"
							   :chartData="lineOptsect2"
							   background="none"
							   :ontouch="true"
								canvasId="wangxiaohuaerlingeryilingwuyibao"
								:canvas2d="true"
							 /> 
						</view>
					</view>
		</view>
		
		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
		<view class="single">
			<view class="title">
				<view class="title1">销讲维度执行率</view>
				<!-- <view class="title3">
					<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">合计：50</view>
				<view class="heji">均值：25</view>
			</view> -->

			<view class="jindu" style="margin-top: 20rpx;">
				<scroll-view style="height: 300rpx;" scroll-y="true" >
					<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="#4FC78F" :percent="item.zxl"></u-line-progress>
							</view>
							<view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
						</view>
					</view>
				 </scroll-view>
			</view>
		</view>
		
		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
		<view class="single">
			<view class="title">
				<view class="title1">销讲指标执行率</view>
			</view>
			<view class="swiper-box">
				<u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="600" :current="bocindex1" @change="tapspagek3"
				 inactive-color="#b1b1b1" active-color="#008ef2" :list="newlistoj" :is-scroll="true">
				</u-tabs-swiper>
			</view>
			<view class="jindu">
				<scroll-view style="height: 300rpx;" scroll-y="true" >
					<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="#4FC78F" :percent="item.zxl"></u-line-progress>
							</view>
							<view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
						</view>
					</view>
				 </scroll-view>
				
			</view>
			
		</view>
		
		<u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
		<u-select v-model="staffShow" :list="staffList" @confirm="staffSelectCallback($event,0)" :default-value='selindex'></u-select>
		<u-select v-model="staffShow1" :list="teamList" @confirm="staffSelectCallback($event,1)" :default-value='selindex'></u-select>
	</view>
</template>

<script>
	var app = getApp();
	// var util = require("../../../utils/util.js");
	var config = require("../../../config");
	export default {
		data() {
			return {
				activeTotal: 4,
				activeTotal2: 0,
				houseId:'',
				timeobj:{
					statDateStart:'',
					statDateEnd:''
				},
				// 员工列表
				staffList:[],
				// 团队列表
				teamList:[],
				staffShow:false,
				staff:{
					value:'',
					label:''
				},
				team:{
					value:'',
					label:''
				},
				teamFlag:true,
				bocindex1:0,
				staffFlag:true,
				staffShow1:false,
				lastStartDate:'',
				lastEndDate :'',
				allnum:'',
				allavg:'',
				allnum1:'',
				allavg1:'',
				danwei:'单位(次)',
				totalTimeShow: false,
				activeTab: 0,
				numlist:[
					{name:'接待量',num:'10'},
					{name:'接待客户',num:'10'},
					{name:'平均执行率',num:'10'},
					{name:'接待时长',num:'10'},
				],
				lineOptsect:{
					"categories": ["2016","2017","2018","2019","2020","2021"],
					"series": [
						{
							"name": "成交量",
							"data": [35,8,25,37,4,20]
						}
					]
				},
				lineOptsect1:{
					"categories": [],
					"series": []
				},
				lineOptsect2:{
					"categories": ["2016","2017","2018","2019","2020","2021"],
					"series": [
						{
							"name": "成交量",
							"data": [35,8,25,37,4,20]
						}
					]
				},
				newlistoj:[],
				newlistoj1:[
					{name:"接待量",id:1},
					{name:"平均执行率",id:2},
					{name:"接待客户",id:3},
					{name:"录音时长",id:5},
				],
				bocindex:0,
				newlisttabinfo:[
					{name:'接待量',zxl:'10'},
					{name:'平均执行率',zxl:'50'},
					{name:'接待客户',zxl:'80'},
				],
				newlisttabinfo1:[
					{name:'接待量',zxl:'10'},
					{name:'平均执行率',zxl:'50'},
					{name:'接待客户',zxl:'80'},
				],
				Theteamcomparedisshow:false,
				Groupcontrastisshow:false,
				allechar:[],
				allList:[]
			};
		},
		 onShow() {
			// 获取楼盘id
			this.houseId = uni.getStorageSync('buildingID').id;
			// 获取数据看板
			
			// 获取员工
			 this.getStaffList()
			// 获取团队
			 this.getSectionList()
			// 获取团队是否显示权限
			
			this.queryHaveDept()
			// 获取简报
			this.getReport()
			// 获取接待趋势
			this.getRtrent()
			// 获取维度
			this.getindexZxl()
		},
		methods: {
			queryHaveDept() {
				return new Promise((resolve, reject) => {
					this.$u.get("/user/queryHaveDept?houseId="+this.houseId).then(res => {
						this.permissions(res)
					})
				})
			},
			permissions(res){
				if(res==1){
					this.Theteamcomparedisshow=false;
					this.Groupcontrastisshow=false;
					return
				}
				
				let totle=uni.getStorageSync('weapp_session_userInfo_data').total;
				if(totle==1){
					this.Theteamcomparedisshow=true;
					this.Groupcontrastisshow=false;
				}else{
					this.Theteamcomparedisshow=true;
					this.Groupcontrastisshow=true;
				}
			},
			// 获取员工列表
			getStaffList(){
				this.$u.post('/cusLvStatistics/selectAllAccountIdByHouseId',{houseId:this.houseId})
				.then(res=>{
					// console.log(res,'123')
					this.staffList=[]
					res.map(item=>{
						let obj={}
						obj.value=item.accountId
						obj.label=item.name
						this.staffList.push(obj)
					})
					this.staff=this.staffList[0]
					this.getAward()
				})
			},
			// 获取接待趋势
			getRtrent(){
				this.$u.post('/cusLvStatistics/receptionTrend',{
					houseId:this.houseId,
					timeType:this.lastEndDate?null:this.activeTotal,
					lastEndDate:this.lastEndDate,
					lastStartDate:this.lastStartDate
				})
				.then(res=>{
					// console.log(res)
					this.allechar=res
					this.tapspagek2(this.bocindex)
					
				})
			},
			// 销奖维度
			getindexZxl(){
				this.$u.post('/cusLvStatistics/indexZxl',{
					houseId:this.houseId,
					timeType:this.lastEndDate?null:this.activeTotal,
					lastEndDate:this.lastEndDate,
					lastStartDate:this.lastStartDate
				})
				.then(res=>{
					// console.log(res)
					// 处理销奖维度执行率
					// this.newlisttabinfo
					let arr=[]
					this.newlistoj=[]
					res.list.map((item,index)=>{
						arr.push({
							name:item.name,
							zxl:item.zxl
						})
						this.newlistoj.push({
							name:item.name,
							id:index
						})
					})
					this.newlisttabinfo=arr
					this.allList=res.list
					this.tapspagek3(this.bocindex1)
				})
			},
			// 获取简报
			getReport(){
				this.$u.post('/cusLvStatistics/xiaojiangAnalysis',{
					houseId:this.houseId,
					timeType:this.lastEndDate?null:this.activeTotal,
					lastEndDate:this.lastEndDate,
					lastStartDate:this.lastStartDate
					})
				.then(res=>{
					// 接待量
					this.numlist[0].num=res.receptionCount||0
					// 接待客户
					this.numlist[1].num=res.sumCustomer||0
					// 执行率
					this.numlist[2].num=(res.fraction||0)+'%'
					// 录音时长
					this.numlist[3].num=Math.floor(res.sumDuration/60) ||0
					// util.formatSecond()||0
					
				})
			},
			// 获取团队列表
			getSectionList(){
				this.$u.post('/cusLvStatistics/findAllDeptIdByHouseId',{houseId:this.houseId})
				.then(res=>{
					this.teamList=[]
					res.map(item=>{
						let obj={}
						obj.value=item.deptId
						obj.label=item.deptName
						this.teamList.push(obj)
					})
					this.team=this.teamList[0]
					this.receptionCountList()
				})
			},
			// 员工销奖趋势
			getAward(){
				if(this.staffList.length==0){
					this.staffFlag=false
					this.$forceUpdate()
					return
				}
				this.$u.post('/cusLvStatistics/employeeAnalysisExacutiveRate',{
					userA:this.staff.value,
					userB:'',
					houseId:this.houseId,
					timeType:this.lastEndDate?null:this.activeTotal+'',
					lastEndDate:this.lastEndDate,
					lastStartDate:this.lastStartDate
				})
				.then(res=>{
					this.allnum1=res.avg[0]
					this.allavg1=res.avg[1]
					// console.log(res)
					let first=res.first
					let second=res.second
					this.lineOptsect2.categories=[]
						this.lineOptsect2.series=[
							{
								name:first[0].accountName,
								data:[]
							}
						]
						first.map(item=>{
							this.lineOptsect2.categories.push(item.statDate.slice(5,10))
							this.lineOptsect2.series[0].data.push(item.sumFraction)
						})
				})
			},
			// 团队接待趋势
			receptionCountList(){
				if(this.teamList.length==0){
					this.teamFlag=false
					this.$forceUpdate()
					return
				}
				this.$u.post('/cusLvStatistics/teamAnalysisExecutionRate',{
					deptIds:this.team.value,
					showRank:1,
					houseId:this.houseId,
					timeType:this.lastEndDate?null:this.activeTotal+'',
					lastEndDate:this.lastEndDate,
					lastStartDate:this.lastStartDate
				})
				.then(res=>{
					// console.log(res)
					let result=res.result
					this.allnum=res.avg[0]
					this.allavg=res.avg[1]
						// 当选择趋势时
						this.lineOptsect1={}
						let allobj={
							categories:[],
							series:[]
						}
						// 先处理时间
						// 当选择全部时
						// 当选择只有一个时
							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)
						this.lineOptsect1=allobj
					
				})
			},
			//时间切换
			tabtimetap(index) {
				if (index == 3) {
					this.totalTimeShow = true;
				} else {
					this.activeTotal = index;
					this.lastEndDate=''
					this.lastStartDate=''
					this.getdata()
				}
			},
			// 获取数据
			getdata(){
				this.receptionCountList()
				this.getReport()
				this.getRtrent()
				this.getindexZxl()
			},
			staffSelectCallback(e,idx){
				if(idx==0){
					this.staff=e[0]
					this.getAward()
				}else{
					this.team=e[0]
					this.receptionCountList()
				}
				// console.log(e,idx)
			},
			//自定义时间
			totalTimeChange(e) {
				console.log(e.startDate, e.endDate)
				this.activeTotal=3;
				this.lastEndDate=e.endDate
				this.lastStartDate=e.startDate
				this.getdata()
			},
			//指标执行率分析tab
			tapspagek2(index) {
				// console.log(index)
				// 对数据进行分析和处理
				// 先处理日期
				let allobj={
					"categories": [],
					"series": [
						{
							name:'接待量',
							data:[]
						}
					]
				}
				if(index==0){
					// 接待量
					this.danwei='单位(次)'
					allobj.series[0].name='接待量'
					this.allechar.map(item=>{
						allobj.categories.push(item.statDate.slice(5,10))
						allobj.series[0].data.push(item.receptionCount)
					})
				}else if(index==1){
					// 平均执行率
					this.danwei='单位(%)'
					allobj.series[0].name='平均执行率'
					this.allechar.map(item=>{
						allobj.categories.push(item.statDate.slice(5,10))
						allobj.series[0].data.push(item.fraction)
					})
				}else if(index==2){
					// 接待客户
					this.danwei='单位(个)'
					allobj.series[0].name='接待客户'
					this.allechar.map(item=>{
						allobj.categories.push(item.statDate.slice(5,10))
						allobj.series[0].data.push(item.sumCustomer)
					})
				}else{
					// 录音时长
					this.danwei='单位(min)'
					allobj.series[0].name='录音时长'
					this.allechar.map(item=>{
						allobj.categories.push(item.statDate.slice(5,10))
						allobj.series[0].data.push(item.sumDuration)
					})
				}
				this.bocindex = index;
				// console.log(allobj)
				// return
				this.lineOptsect=allobj
			},
			tapspagek3(index){
				let arr=[]
				// return
				// console.log(index,this.allList[index])
				this.allList[index].children.map(item=>{
					arr.push({
						name:item.name,
						zxl:item.zxl
					})
				})
				this.newlisttabinfo1=arr
				this.bocindex1 = index;
			},
			//集团对比
			Groupcontrast(){
				uni.navigateTo({
				    url: '/pages/center/Piabodata/Groupcontrast'
				});
			},
			//团队对比
			Theteamcompared(){
				if(this.teamList.length==0){
					uni.showToast({
						title:'没有团队呢',
						icon:'none'
					})
					return
				}
				uni.navigateTo({
				    url: '/pages/center/Piabodata/Theteamcompared'
				});
			},
			//用户洞察
			toUserinsightinto(){
				uni.navigateTo({
				    url: '/pages/center/Piabodata/Userinsightinto'
				});
			},
			//趋势分析
			toTrendAnalysis(){
				uni.navigateTo({
				    url: '/pages/center/Piabodata/TrendAnalysis'
				});
			},
			//员工分析
			toStaffAnalysis(){
				if(this.staffList.length==0){
					uni.showToast({
						title:'没有团队呢',
						icon:'none'
					})
					return
				}
				uni.navigateTo({
				    url: '/pages/center/Piabodata/StaffAnalysis'
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
		background: #FAFAFA;
		padding-bottom: 60rpx;
	}
	.Piabodata-box{
		width: 100%;
		background: #FFFFFF;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 30rpx;
		.Piabodata{
			width: 33.3%;
			.Piabodata-img{
				width: 100%;
				text-align: center;
				.Piabodata-img1{
					width: 134rpx;
					height: 134rpx;
				}
			}
			.Piabodata-text{
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				margin-top: -10rpx;
			}
		}
	}
	.grid:nth-child(1){
		border-right:none ;
		border-bottom:none ;
	}
	.grid:nth-child(2){
		border-bottom:none ;
	}
	.grid:nth-child(3){
		border-right:none ;
	}
</style>