NewZkgj/pages/center/Piabodata/requireminingAnalysis.vue

<template>
	<view class="box">
		<!-- 选择器 -->
		<view class="boxtittab">
			<view class="tabbox" @click="timeshow=true">
				{{ time }}
				<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
			</view>
			<view class="tabbox" @click="deptshow=true">
				{{ dept}}
				<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
			</view>
			<view class="tabbox" @click="guwenshow=true">
				{{ guwen}}
				<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
			</view>
		</view>
		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
		<view class="boxzonglan" style="min-height: 400rpx;">
			<view class="zonglantitle">简报 <text @click="showDesc=true">统计说明</text></view>
			<view class="zonglanbox">
				<view class="grid" style="height: auto;" v-for="(item,index) in numlist" :key="index">
					<view class="audonum">{{item.name}}</view>
					<view class="num">{{item.firstnum||0}}</view>
					<view class="bottom">
						<view class="leftnum">对比：{{item.endnum||0}}</view>
						<view class="rightnum" :class="item.duibinum>0?'red':'green'">{{item.duibinum||0}}
							<image v-if="item.duibinum>0" src="https://static.quhouse.com/c4145f84cc3c49769ee2ec11465c085b.png" mode="" />
							<image v-else src="https://static.quhouse.com/c5dbf780e09a4da0b0bab2d7fa58accd.png" mode="" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 统计说明 -->
		<view class="black-bg" v-if="showDesc"  >
			<view class="tongjiDesc">
				<view class="tongji-title">统计说明</view>
				<view class="text">
					<view><text class="bold">平均需求挖掘率：</text>筛选时间内，有效接待中已标记顾问的需求挖掘执行率的平均值；</view>
					<view><text class="bold">未标记：</text>筛选时间内，有效接待中未标记顾问的接待数；</view>
					<view><text class="bold">有效接待：</text>筛选时间内，标记为有效的接待数，不包含待接单；</view>
					<view><text class="bold">未挖掘需求数：</text>筛选时间内，需求挖掘平均执行率为0的需求数；</view>
				</view>
			</view>
			<view class="close" @click="showDesc=false">X</view>
		</view>
		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
		<view class="single">
			<view class="title">
				<view class="title1">平均需求挖掘率趋势</view>
			</view>
			<view class="uchaserbox">
					<qiun-data-charts type="line" :chartData="lineOptsect" :opts="lineOpts" background="none"
						:ontouch="true" canvasId="wangxiaohuaerlingilingwuyiba2" :canvas2d="true" />
			</view>
		</view>
		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
		<view class="single">
			<view class="title">
				<view class="title1">平均需求挖掘分布</view>
			</view>
			<view class="uchaserbox">
				<qiun-data-charts 
					type="ring" 
					:chartData="ringChartData"
					:canvas2d="true" 
					canvasId="ChartBoxIdwangxiaohuaerlingilingwuyiba1"
					:opts='opts'
					background="none" />
			</view>
		</view>
		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
		<view class="single">
			<view class="title">
				<view class="title1">需求挖掘排名</view>
			</view>
			<view class="tabdada">
				<view class="tabth">
					<view>排名</view>
					<view>需求类型/挖掘执行接待数</view>
					<view>执行率</view>
					<view>操作</view>
				</view>
				<view  v-if="total==0" style="color: #999999;width: 100%;height: 500rpx;line-height: 500rpx;text-align: center;" >暂无数据</view>
				<view class="tabtd"  v-for="(item,i) in rankList" :key="i">
					<view>
						<image v-if="i==0" class="ranking" src="../../../static/images/ranking1.png" mode=""></image>
						<image v-else-if="i==1" class="ranking" src="../../../static/images/ranking2.png" mode=""></image>
						<image v-else-if="i==2" class="ranking" src="../../../static/images/ranking3.png" mode=""></image>
						<view class="ranking1" v-else>{{i+1}}</view>
					</view>
					<view class="u-line-1">{{item.name}}({{item.selected}})</view>
					<view>{{item.fraction}}%</view>
					<view @click="Toview(item,i)">查看</view>
				</view>
			</view>
		</view>
		<u-popup v-model="timeshow" mode="bottom">
			<view class="timeview" :style="{ color: activeTotal == 5 ? '#2B6EFF' : '#333333' }"
				@click="tabtimetap(5, '接待时间')">
				全部</view>
			<view class="timeview" :style="{ color: activeTotal == 2 ? '#2B6EFF' : '#333333' }"
				@click="tabtimetap(2, '近7天')">
				近7天</view>
				<view class="timeview" :style="{ color: activeTotal == 3 ? '#2B6EFF' : '#333333' }"
				@click="tabtimetap(3, '近15天')">
				近15天</view>
			<view class="timeview" :style="{ color: activeTotal == 6 ? '#2B6EFF' : '#333333' }"
				@click="tabtimetap(6, '近30天')">
				近30天</view>
			<view class="timeview" :style="{ color: activeTotal == 4 ? '#2B6EFF' : '#333333' }" @click="tabtimetap(4,'自定义')">
				自定义</view>
		</u-popup>	
		<u-calendar v-model="calendarShow" mode="range" @change="calendarTimeChange"></u-calendar>
		<u-select v-model="guwenshow" :list="staffList" @confirm="guwenCallback"
			:default-value='selindex'></u-select>
		<u-select v-model="deptshow" :list="teamList" @confirm="deptCallback"
			:default-value='selindex'></u-select>
		<!-- 加载组件  -->
		<loading v-model="LOADING"></loading>
	</view>
</template>

<script>
	var app = getApp();
	var config = require("../../../config");
	import loading from "@/components/loading/index.vue"
	export default {
		components: {
			loading
		},
		data() {
			return {
				selindex: '',
				guwenshow: false,
				timeshow: false,
				selectshow: false,
				deptshow: false,
				deptVal: '',
				huashuVal: '',
				guwenVal: '',
				// 筛选文字展示
				time: '近7天',
				dept: '部门',
				guwen: '顾问',
				huashu: '业务话术',
				showDesc: false,
				rankList: [],//排名列表
				ringChartData: {
				},
				// ring图 分布图
				opts: { 
					rotate: false,
					rotateLock: false,
					color: ['#F8A12B','#07B79D','#E7483C','#2671E1'],
					padding: [5,5,5,5],
					dataLabel: true,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 60,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				activeTotal: 5,
				houseId: '',
				// hushuList: [],// 业务话术
				staffList: [],// 员工列表
				teamList: [],// 团队列表
				team: {
					value: '',
					label: ''
				},
				startDate: '',
				endDate: '',
				calendarShow: false,
				numlist: [{
						name: '平均需求挖掘率',
						firstnum: '',
						endnum: '',
						duibinum: '',
						setName: 'wordFraction'
					}, {
						name: '未挖掘需求',
						firstnum: '',
						endnum: '',
						duibinum: '',
						setName: 'noFinishWord'
					},
					{
						name: '有效接待',
						firstnum: '',
						endnum: '',
						duibinum: '',
						setName: 'activeCustomer'
					},
					{
						name: '未标记',
						firstnum: '',
						endnum: '',
						duibinum: '',
						setName: 'markAdvisor'
					},
				],
				lineOptsect: {
					"categories": [],
					"series": [{
						"name": "起始时间",
						"data": []
					},{
						"name": "对比时间",
						"data": []
					}]
				},
				lineOpts: {
					yAxis: {
						data: [{
							max: 100,
							min: 0,
						}]
					}
				},
			};
		},
		onShow() {
			// 获取项目id
			this.houseId = uni.getStorageSync('buildingID').id;
			// 获取员工
			this.getStaffList()
			// 获取团队
			this.getSectionList()
			this.getdata()
		},
		onReady: function(){
			// 获取项目id
			this.houseId = uni.getStorageSync('buildingID').id;
			// 获取员工
			this.getStaffList()
			// 获取团队
			this.getSectionList()
			this.getdata()
		},
		methods: {
			getdata(){
			// 需求挖掘分析-简报
				this.wordMiningAnalyze()
				//需求挖掘排行
				this.getwordMiningRank()
				// 挖掘趋势图
				this.getwordMiningAnalyzePercentage()
				// 需求挖掘f分布图
				this.getRingData()
			},
			// 需求挖掘排行
			getwordMiningRank(){
				this.$u.post('/cusLvStatistics/wordMiningRank', {
						"houseId": this.houseId,
						"deptId": this.deptVal,
						"createUser": this.guwenVal,
						"dateType":this.activeTotal,
						"firstStartDate":!this.activeTotal?this.startDate:'',
						"firstEndDate":!this.activeTotal?this.endDate:''
					})
					.then(res => {
						// console.log(res)
						if(res.length){
							this.rankList = res.map(item=>{
								return {
									name: item.name,
									id: item.id,
									fraction: item.fraction,
									selected: item.selected
								}
							})
						}else{
							this.rankList = []
						}
					})
			},
			// 需求挖掘分布图
			getRingData(){
				this.$u.post('/cusLvStatistics/wordMiningAnalyzeFenbu', {
						"houseId": this.houseId,
						"deptId": this.deptVal,
						"createUser": this.guwenVal,
						"firstStartDate":!this.activeTotal?this.startDate:'',
						"firstEndDate":!this.activeTotal?this.endDate:'',
						"dateType":this.activeTotal
					})
					.then(res => {
						// console.log(res)
						this.ringChartData = { series: [
              {
                data: [
									{"name":"30%以下","value":res.a},
									{"name":"30%～50%","value":res.b},
									{"name":"50%～70%","value":res.c},
									{"name":"70%以上","value":res.d},
								]
              }
            ]}
					})
			},
				//跳转到接待记录
			Toview(){
				uni.navigateTo({
					url: '/pages/center/records/index?refresh=refresh&activeTotal='+this.activeTotal+'&staTime='+ this.startDate + '&endTime'+this.endDate+'&validInvalid=0'
				});
			},
			// 需求挖掘分析-简报
			wordMiningAnalyze() {
				let params = {
					"houseId":this.houseId,
					"deptId": this.deptVal,
					"userId": this.guwenVal,
					"dateType": this.activeTotal,
					"firstStartDate":!this.activeTotal?this.startDate:'',
					"firstEndDate":!this.activeTotal?this.endDate:''
				}
					this.$u.post("/cusLvStatistics/wordMiningAnalyze",params).then(res => {
						// console.log(res.contrast)
						res.contrast.wordFraction = (res.contrast.wordFraction || 0) + '%'
						res.first.wordFraction = (res.first.wordFraction || 0) + '%'
						res.end.wordFraction = (res.end.wordFraction || 0) + '%'
						this.numlist.forEach(item => {
							item.duibinum = res.contrast[item.setName]
							item.endnum = res.end[item.setName]
							item.firstnum = res.first[item.setName]
						})
					})
			},
			// 获取员工列表
			getStaffList() {
				this.$u.post('/cusLvStatistics/selectAllAccountIdByHouseId', {
						houseId: this.houseId
					})
					.then(res => {
						// console.log(res)
						if(res.length){
							this.staffList = res.map(item => {
								return {
									label: item.name,
									value: item.accountId
								}
							})
							this.staffList.unshift({
								label: '全部',
								value: ''
							})
						}
					})
			},
			// 需求挖掘率趋势图
			getwordMiningAnalyzePercentage() {
				let categories1 = []
				let categories2 = []
				let categories3 = []
				this.$u.post('/cusLvStatistics/wordMiningAnalyzePercentage', {
						"houseId": this.houseId,
						"deptId": this.deptVal,
						"createUser": this.guwenVal,
						"dateType": this.activeTotal,
						"firstStartDate":!this.activeTotal?this.startDate:'',
						"firstEndDate":!this.activeTotal?this.endDate:''
					})
					.then(res => {
						if(res.first&&res.first.length){
							categories1 = res.first.map(item=> item.statDate.substring(0,10))
							this.lineOptsect.series[0].data=res.first.map(item=> item.wordFraction)
						}else{
							categories1= []
							this.lineOptsect.series[0].data = []
						}
						if(res.end&&res.end.length){
							this.lineOptsect.series[1].data=res.end.map(item=> item.wordFraction)
							categories2 = res.end.map(item => item.statDate.substring(0,10))
						}else{
							categories2 = [] 
							this.lineOptsect.series[1].data = []
						}
						
						for(let i=0;i<categories1.length;i++){
							categories3.push(categories1[i]+'/'+categories2[i])
						}
						// console.log(categories3)
						 this.lineOptsect.categories = categories3
					})
			},
			// 获取团队列表
			getSectionList() {
				this.$u.post('/cusLvStatistics/findAllDeptIdByHouseId', {
						houseId: this.houseId
					})
					.then(res => {
						this.teamList = []
						if(res.length){
							this.teamList = res.map(item=> {
								return {
									label: item.deptName,
									value: item.deptId
								}
							})
							this.teamList.unshift({
								label: '全部',
								value: ''
							})
						}
					})
			},
			//时间切换
			tabtimetap(index, text) {
				if (index == 3) {
					this.calendarShow = true;
					this.activeTotal = null
				} else {
					this.activeTotal = index;
					this.endDate = ''
					this.startDate = ''
					this.time = text
					this.getdata()
				}
				this.timeshow = false
			},
			// 顾问选择
			guwenCallback(e){
				// console.log(e)
				this.guwenVal = e[0].value
				this.guwen = e[0].label
				this.getdata()
			},
			// 部门选择
			deptCallback(e){
				// console.log(e)
				this.deptVal = e[0].value
				this.dept = e[0].label
				this.getdata()
			},
			// 话术选择
			huashuCallback(e){
				// console.log(e)
				this.huashuVal = e[0].value
				this.huashu = e[0].label
				this.getdata()
			},
			//自定义时间
			calendarTimeChange(e) {
				// console.log(e.startDate, e.endDate)
				this.activeTotal = null;
				this.endDate = e.endDate
				this.startDate = e.startDate
				this.time = '自定义'
				this.getdata()
			}
		}
	};
</script>
<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
		background: #FAFAFA;
	}
		//时间切换的样式
	.boxtittab {
		position: sticky;
		top: var(--window-top);
		z-index: 999;
		width: 100;
		height: 92rpx;
		background: #FFFFFF;
		border: 1px solid #E0E0E0;
		display: flex;
		align-items: center;

		.tabbox {
			flex: 1;
			height: 100%;
			text-align: center;
			line-height: 92rpx;
			color: #666666;
			font-size: 28rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			/* 将对象作为弹性伸缩盒子模型显示 */
			-webkit-line-clamp: 1;
			/* 控制最多显示几行 */
			-webkit-box-orient: vertical;
			/* 设置或检索伸缩盒对象的子元素的排列方式 */
		}
	}
		.timeview {
		height: 80rpx;
		line-height: 80rpx;
		width: 100%;
		text-align: center;
		border-bottom: 1px solid #F8F8F8;
	}
	.black-bg{
		position: fixed;
		background: rgba(0,0,0,0.6);
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		.tongjiDesc{
			width: 80%;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 30rpx;
		}
		.close{
			background: #fff;
			border-radius: 50%;
			width: 80rpx;
			height: 80rpx;
			margin-top: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.tongji-title{
			text-align: center;
			font-size: 30rpx;
			margin-bottom: 20rpx;
		}
		.text view{
			margin-bottom: 24rpx;
		}
		.bold{
			font-weight: bold;
		}
	}
	
	.grid:nth-child(1) {
		border-right: none;
		border-bottom: none;
	}

	.grid:nth-child(2) {
		border-bottom: none;
	}

	.grid:nth-child(3) {
		border-right: none;
	}
	.grid .bottom{
		display: flex;
		align-items: center;
		padding-left: 20rpx;
    margin: 10rpx 0 20rpx;
		.leftnum{
			height: 36rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 36rpx;
			margin-right: 20rpx;
		}
		.rightnum{
			height: 36rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #666;
			line-height: 36rpx;
			display: flex;
			align-items: center;
			&.red{
				color: #E6273A;
			}
			&.green{
				color: #43CD80;
			}
			image{
				width: 18rpx;
				height: 14rpx;
				margin-left: 6rpx;
			}
		}
	}
	.zonglantitle{
		display: flex;
		justify-content: space-between;
		align-items: center;
		text{
			color: #666666;
		}
	}

	.uchaserbox{
	width: 100%;
    height: 500rpx;
	}
	.tabdada {
		width: 100%;
		height: 580rpx;
		overflow-y: auto;
		padding-bottom: 20rpx;
		.tabth {
		width: 100%;
		height: 28rpx;
		display: flex;
		font-size: 28rpx;
		line-height: 28rpx;
		color: #666666;
		margin-top: 28rpx;
	}

	.tabth>view:nth-of-type(1) {
		width: 10%;
		text-align: center;
	}

	.tabth>view:nth-of-type(2) {
		width: 46%;
		text-align: center;
	}

	.tabth>view:nth-of-type(3) {
		width: 22%;
		text-align: center;
	}

	.tabth>view:nth-of-type(4) {
		width: 22%;
		text-align: center;
	}

	.tabtd {
		width: 100%;
		height: 30rpx;
		display: flex;
		font-size: 26rpx;
		line-height: 30rpx;
		margin-top: 32rpx;
	}

	.tabtd>view:nth-of-type(1) {
		width: 10%;
		text-align: center;
		line-height: 30rpx;
	}

	.tabtd>view:nth-of-type(2) {
		width: 46%;
		max-width: 400rpx;
		text-align: center;
		color: #333333;
	}

	.tabtd>view:nth-of-type(3) {
		width: 22%;
		text-align: center;
		color: #333333;
	}

	.tabtd>view:nth-of-type(4) {
		width: 22%;
		text-align: center;
		color: #2671E2;
	}

	.ranking {
		width: 34rpx;
		height: 34rpx;
	}
	.ranking1 {
		width: 30rpx;
		height: 30rpx;
		background: #ECF1FF;	
		color: #424D64;
		font-size: 18rpx;
		text-align: center;
		line-height: 30rpx;
		border-radius: 50%;
		margin: 0 auto;
	}

	.tabech {
		width: 100%;
		height: 600rpx;
	}
	}
</style>