NewZkgj/pages/center/Piabodata/Userinsightinto.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="info">
			<view class="item" @click="goTo(1)">
				<text class="num">{{efficient}}</text>
				<text class="tit">有效接待</text>
			</view>
			<view class="item" @click="goTo(2)">
				<text class="num">{{markCount}}</text>
				<text class="tit">已标顾问</text>
			</view>
			<view class="item" @click="goTo(3)">
				<text class="num">{{noMarkCount}}</text>
				<text class="tit">未标顾问</text>
			</view>
		</view>
		<view class="boxzonglan">
			<view class="zonglantit">客群特征总览</view>
			<view class="zonglanbox">
				<view class="grid" v-for="(item,index) in numlist" :key="index" v-if="item.isshow">
					<view class="audonum">{{item.name}}<text v-if="index!=0">触达次数</text></view>
					<view class="num">{{item.num}}</view>
				</view>
			</view>
			<view v-if="Afolding" class="anclack" @click="anclick(1)">展开 <u-icon style="margin-left: 8rpx;"
					label-color='#666666' name="arrow-down"></u-icon>
			</view>
			<view v-else class="anclack" @click="anclick(2)">收起 <u-icon style="margin-left: 8rpx;" label-color='#666666'
					name="arrow-up"></u-icon>
			</view>
		</view>
		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>



		<view class="centerfor" v-for="(item,index) in objlist" :key="index">
			<view class="fortit">
				<view class="left">
					<view class="lefti"></view>
					<view class="lefttext">{{item.name}}触达排名</view>
				</view>
				<view class="right">
					<view :class="{ activeclass: item.activeTab == 0 }" @click="charttoswitch(index,0)">表格</view>
					<view style="margin-left: 16rpx;" :class="{ activeclass: item.activeTab == 1 }"
						@click="charttoswitch(index,1)">饼状图</view>
				</view>
			</view>
			<view v-if="item.activeTab==0" class="tabdada">
				<view class="tabth">
					<view>排名</view>
					<view>画像语意词/触达次数</view>
					<view>触达占比</view>
					<view>沟通记录</view>
				</view>
				<view v-if="item.total==0"
					style="color: #999999;width: 100%;height: 500rpx;line-height: 500rpx;text-align: center;">暂无数据
				</view>
				<view class="tabtd" v-if="item.total!=0" v-for="(chend,i) in item.matchKeywords" :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>{{chend.name}}({{chend.total}})</view>
					<view>{{chend.proportion>100?100:chend.proportion}}%</view>
					<view @click="Toview(item,i)">查看</view>
				</view>
			</view>
			<view v-if="item.activeTab==1" class="tabech">
				<qiun-data-charts :key="item.id" type="ring" :chartData="item.chartData" :canvas2d="true"
					:canvasId="'wangxiaohuahahahahaha'+item.id" :opts='item.opts' background="none" />
			</view>
		</view>

		<u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
		<u-back-top :scroll-top="scrollTop"></u-back-top>



		<!-- 更多筛选 -->
		<u-popup v-model="screenShow" mode="bottom" height="368">
			<view class="screen">
				<view class="boxtittab">
					<view class="tabbox">
						<view :class="{ activecllasscet: activeTotal == 0 }" @click="tabtimetap(0, '今日')">今日</view>
					</view>
					<view class="tabbox">
						<view :class="{ activecllasscet: activeTotal == 1 }" @click="tabtimetap(1, '昨日')">昨日</view>
					</view>
					<view class="tabbox">
						<view :class="{ activecllasscet: activeTotal == 2 }" @click="tabtimetap(2, '近一周')">近一周
						</view>
					</view>
					<view class="tabbox">
						<view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3, '自定义')">自定义
						</view>
					</view>
				</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>


		<!-- 加载组件  -->
		<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 {
				scrollTop: 0,
				activeTotal: 2,
				timeobj: {
					statDateStart: '',
					statDateEnd: ''
				},
				buildingID: '',
				totalTimeShow: false,
				activeTab: 0,
				numlist: [],
				objlist: [],
				Afolding: true,
				efficient: "",
				markCount: "",
				noMarkCount: "",
				
				
				screenShow: false, // 时间筛选弹窗
				showTimeText: '近一周', // 展示文字
				showBeText: '全部业务', // 
				templateList: [], // 销讲业务
				showTemplate: false, // 展示选择销讲业务弹窗
				marketingBusiness: '', // 选择的业务id
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(e) {
			this.LOADING = true
			this.buildingID = uni.getStorageSync('buildingID').id;
			if (e.activeTotal) {
				this.activeTotal = e.activeTotal
			}

			if (e.staTime) {
				this.timeobj = {
					statDateStart: e.staTime,
					statDateEnd: e.endtime
				}
			}
			this.gitinit()
			this.getMarketingBusiness()
		},
		onPullDownRefresh() {
			this.gitinit()
			this.getMarketingBusiness()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 销讲业务方法
			templateCancel() {
				this.showTemplate = false;
			},

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


			// 获取销讲业务
			getMarketingBusiness() {
				this.$u.get('/customer/marketingBusiness', {
					houseId: uni.getStorageSync('buildingID').id,
				}).then(res => {
					this.templateList = res
					this.templateList.unshift({
						templateName: '全部业务',
						id: ''
					})
				})
			},
			goTo(i) {
				if (i == 1) {
					uni.navigateTo({
						url: '/pages/center/records/index?refresh=' + 'refresh' + '&activeTotal=' + this
							.activeTotal + '&validInvalid=0' + '&staTime=' + this.timeobj.statDateStart +
							'&endtime=' + this.timeobj.statDateEnd
					});
				} else if (i == 2) {
					uni.navigateTo({
						url: '/pages/center/records/index?refresh=' + 'refresh' + '&activeTotal=' + this
							.activeTotal + '&markAdvisor=1&validInvalid=0' + '&staTime=' + this.timeobj
							.statDateStart + '&endtime=' + this.timeobj.statDateEnd
					});
				} else {
					uni.navigateTo({
						url: '/pages/center/records/index?refresh=' + 'refresh' + '&activeTotal=' + this
							.activeTotal + '&markAdvisor=0&validInvalid=0' + '&staTime=' + this.timeobj
							.statDateStart + '&endtime=' + this.timeobj.statDateEnd
					});
				}
			},
			anclick(i) {
				console.log(i)
				this.Afolding = !this.Afolding;
				this.numlist.forEach((citem, index) => {
					if (index < 6) {
						citem.isshow = true;
					} else {
						citem.isshow = !citem.isshow;
					}
				})
				this.$forceUpdate()

			},
			//获取数据
			gitinit() {
				this.objlist = [];
				this.numlist = [];
				var dateType = '';
				if (this.activeTotal == 3) {
					dateType = null;
				} else {
					dateType = this.activeTotal;
				}
				let parames = {
					dateType: dateType,
					statDateStart: this.timeobj.statDateStart,
					statDateEnd: this.timeobj.statDateEnd,
					houseId: this.buildingID,
					marketingBusiness: this.marketingBusiness,
				}
				this.$u.post("/matchKeywords/findmatchdata", parames).then(data => {
					this.LOADING = false
					// this.numlist.push({
					// 	name:"有效接待",
					// 	num:data.total
					// })
					this.efficient = data.total
					this.markCount = data.markCount
					this.noMarkCount = data.noMarkCount

					data.list.forEach((item, index) => {
						this.numlist.push({
							name: item.name,
							num: item.total
						})
						item.activeTab = 0;
						item.opts = {
							"title": {
								"name": item.total,
								"color": '#666666',
								"fontSize": 20
							},
							"subtitle": {
								"name": '总触达次数',
								"color": '#32363D',
								"fontSize": 12,
								"offsetY": 4
							}
						}
						item.chartData = {
							"categories": [],
							"series": [{
								"data": []
							}],
						};
						item.matchKeywords.forEach(chend => {
							item.chartData.series[0].data.push({
								"name": chend.name,
								"value": chend.proportion
							})
						})
					})
					data.list.forEach(item => {
						item.matchKeywords.forEach(chend => {
							if (chend.isInterval == 0) {
								chend.name = chend.name + chend.unit + '-' + chend.endName + chend
									.unit
							} else {
								chend.name = chend.name
							}
						})
					})
					this.objlist = data.list;
					this.Afolding = true;
					this.numlist.forEach((citem, index) => {
						if (index < 6) {
							citem.isshow = true
						} else {
							citem.isshow = false
						}
					})
				}).catch(e => {
					this.LOADING = false
				})
			},
			//查看
			Toview(item, i) {
				console.log(item)
				let keywordsid = item.matchKeywords[i].keywordsId || 0
				uni.navigateTo({
					url: '/pages/center/Piabodata/Customerportrait/Receivingrecords?datatype=' + this.activeTotal +
						"&keywordsId=" + keywordsid + "&starttime=" + this.timeobj.statDateStart + "&endoftime=" +
						this.timeobj.statDateEnd
				})
			},
			//时间切换
			tabtimetap(index, text) {
				if (index == 3) {
					this.totalTimeShow = true;
					this.screenShow = false
				} else {
					this.screenShow = false
					this.showTimeText = text
					this.activeTotal = index;
					this.gitinit()
				}
			},
			//自定义时间
			totalTimeChange(e) {
				this.screenShow = false
				this.showTimeText = `${e.startDate}-${e.endDate}`
				this.timeobj.statDateStart = e.startDate;
				this.timeobj.statDateEnd = e.endDate;
				this.activeTotal = 3;
				this.gitinit()
			},
			charttoswitch(index, num) {
				this.objlist[index].activeTab = num
			}
		}
	};
</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;
			}
		}
	
		.screen {
			width: 100%;
	
			.boxtittab {
				width: 100%;
				flex-direction: column;
				border: none;
				.tabbox {
					width: 100%;
				}
			}
		}
	
	.info {
		display: flex;
		justify-content: space-between;
		background: #fff;
		padding: 10px 20px;

		.item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			text {
				font-size: 32rpx;
			}

			.num {
				font-weight: bold;
			}

			.tit {
				margin-top: 20rpx;
			}
		}
	}

	.anclack {
		width: 100%;
		height: 78rpx;
		text-align: center;
		line-height: 78rpx;
		font-size: 30rpx;
		border: 1rpx solid #E0E0E0;
		font-weight: 400;
		color: #666666;
	}

	.box {
		width: 100%;
		height: 100%;
		background: #FAFAFA;
		padding-bottom: 60rpx;
	}

	.boxtittab {
		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;
			display: flex;
			justify-content: center;

			.activecllasscet {
				width: 96rpx;
				border-bottom: 2px solid #2671E2;
			}
		}
	}

	.tabtime {
		width: 100%;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 24rpx;
		color: #666666;
	}

	.boxzonglan {
		width: 100%;
		min-height: 496rpx;
		background: #FFFFFF;
		padding: 30rpx 30rpx 30rpx 30rpx;

		.zonglantit {
			font-size: 30rpx;
			color: #333333;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
		}

		.zonglanbox {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin-top: 24rpx;

			.grid {
				width: 50%;
				height: 128rpx;
				border: 1px solid #E0E0E0;

				.audonum {
					color: #666666;
					text-indent: 40rpx;
					font-size: 26rpx;
					margin-top: 20rpx;
				}

				.num {
					color: #333333;
					text-indent: 40rpx;
					font-size: 32rpx;
					font-weight: 600;
					margin-top: 10rpx;
				}
			}
		}
	}

	.centerfor {
		width: 100%;
		height: 686rpx;
		background: #FFFFFF;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-top: 20rpx;

		.fortit {
			width: 100%;
			height: 86rpx;
			display: flex;
			border-bottom: 1px solid #E0E0E0;

			.left {
				width: 70%;
				height: 100%;
				display: flex;
				align-items: center;

				.lefti {
					width: 6rpx;
					height: 30rpx;
					background: #2671E2;
				}

				.lefttext {
					font-size: 30rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
					margin-left: 10rpx;
				}
			}

			.right {
				width: 30%;
				height: 70rpx;
				display: flex;
				font-size: 28rpx;
				align-items: center;
				margin-top: 16rpx;

			}

			.right view {
				width: 92rpx;
				height: 50rpx;
				text-align: center;
			}
		}
	}

	.activeclass {
		color: #2671E2;
		border-bottom: 2px solid #2671E2;
	}

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