NewZkgj/pages/reportExcel/dayReport.vue

<template>
	<view class="pages">
		<!-- 日报内容部分 -->
		<view class="container" ref="lists">
			<!-- 头部日报卡 -->
			<view class="c-head-card">
				<view class="c-title-text">
					{{ projectName }}数智工牌日报
				</view>
				<text class="date">{{ weekObj.createTime | fomatDate }}</text>
				<view class="creative-time">
					生成时间：{{ weekObj.createTime || '--' }}
				</view>
			</view>

			<!-- 循环渲染的数据 -->
			<view class="dateList">
				<!--  -->
				<view class="arrs">
					<view class="arrs-items index1">
						<view class="left">
							1
						</view>
						<view class="right">
							<view class="r-title">
								<text>接待量：</text>
							</view>
							<view class="r-box">
								<view class="r-box-item">
									<text>接待量</text><text class="value">{{ weekObj.receptionCount || 0 }}</text>
								</view>
								<view class="r-box-item">
									<text>有效接待</text><text class="value">{{ weekObj.activeCustomer || 0 }}</text>
								</view>
								<view class="r-box-item-lang">
									<view>有效接待率<text class="value">{{ weekObj.validReceptionRate || 0 }}%</text></view>
									<view class="contrast">对比昨天<text class="value"
											:class="{down: weekObj.validReceptionRatePK < 0, up: weekObj.validReceptionRatePK > 0}">{{ weekObj.validReceptionRatePK > 0 ? '+' : '' }}{{ weekObj.validReceptionRatePK || 0 }}%</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="arrs-items index2">
						<view class="left">
							2
						</view>
						<view class="right">
							<view class="r-title">
								<text>平均执行率：</text>
							</view>
							<view class="r-box">
								<view class="r-box-item-lang">
									<view>平均执行率<text class="value">{{ weekObj.fraction || 0 }}%</text></view>
									<view class="contrast">对比昨天<text class="value"
											:class="{down: weekObj.fractionPK < 0, up: weekObj.fractionPK > 0}">{{ weekObj.fractionPK > 0 ? '+' : '' }}{{ weekObj.fractionPK || 0 }}%</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="arrs-items index3">
						<view class="left">
							3
						</view>
						<view class="right">
							<view class="r-title">
								<text>平均接待时长：</text>
							</view>
							<view class="r-box">
								<view class="r-box-item-lang">
									<view>平均接待时长<text class="value">{{ weekObj.avgDuration || 0 }}min</text></view>
									<view class="contrast">对比昨天<text class="value"
											:class="{down: weekObj.avgDurationPK < 0, up: weekObj.avgDurationPK > 0}">{{ weekObj.avgDurationPK > 0 ? '+' : '' }}{{ weekObj.avgDurationPK || 0 }}min</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="arrs-items index4">
						<view class="left">
							4
						</view>
						<view class="right">
							<view class="r-title">
								<text>销讲维度执行前三：</text>
							</view>
							<view class="ranking">
								<block v-for="(rank, rankIndex) in carryOutTop" :key="rankIndex">
									<view class="ranking-item">
										<view class="serial">
											{{ rankIndex+1 }}
										</view>
										<view class="lside">
											{{ rank.title || '--' }}
										</view>
										<view class="rside">
											({{ rank.value || 0 }}%)
										</view>
									</view>
								</block>
								<template v-if="carryOutTop.length == 0">
									<view class="empty">
										暂无数据
									</view>
								</template>
							</view>
						</view>
					</view>
					
					<view class="arrs-items index5">
						<view class="left">
							5
						</view>
						<view class="right">
							<view class="r-title">
								<text>销讲维度执行弱项前三：</text>
							</view>
							<view class="ranking">
								<block v-for="(rank, rankIndex) in carryOutLast" :key="rankIndex">
									<view class="ranking-item">
										<view class="serial">
											{{ rankIndex+1 }}
										</view>
										<view class="lside">
											{{ rank.title || '--' }}
										</view>
										<view class="rside">
											({{ rank.value || 0 }}%)
										</view>
									</view>
								</block>
								<template v-if="carryOutLast.length == 0">
									<view class="empty">
										暂无数据
									</view>
								</template>
							</view>
						</view>
					</view>

					<view class="arrs-items index6">
						<view class="left">
							6
						</view>
						<view class="right">
							<view class="r-title">
								<text>置业顾问平均执行率排名：</text>
							</view>
							<view class="ranking">
								<block v-for="(rank, rankIndex) in consultant" :key="rankIndex">
									<view class="ranking-item">
										<view class="serial">
											{{ rankIndex+1 }}
										</view>
										<view class="lside">
											{{ rank.title || '--' }}
										</view>
										<view class="rside">
											({{ rank.value || 0 }}%)
										</view>
									</view>
								</block>
								<template v-if="consultant.length == 0">
									<view class="empty">
										暂无数据
									</view>
								</template>
							</view>
						</view>
					</view>

					<view class="arrs-items index7">
						<view class="left">
							7
						</view>
						<view class="right">
							<view class="r-title">
								<text>置业顾问平均接访时长排名：</text>
							</view>
							<view class="ranking">
								<block v-for="(rank, rankIndex) in recording" :key="rankIndex">
									<view class="ranking-item">
										<view class="serial">
											{{ rankIndex+1 }}
										</view>
										<view class="lside">
											{{ rank.title  || '--' }}
										</view>
										<view class="rside">
											({{ rank.value || 0 }}min)
										</view>
									</view>
								</block>

								<template v-if="recording.length == 0">
									<view class="empty">
										暂无数据
									</view>
								</template>
							</view>
						</view>
					</view>

					<view class="arrs-items index8">
						<view class="left">
							8
						</view>
						<view class="right">
							<view class="r-title">
								<text>平均执行率最低的顾问：</text>
							</view>
							<view class="ranking">
								<block v-for="(rank, rankIndex) in lowest" :key="rankIndex">
									<view class="ranking-item">
										<view class="lside">
											{{ rank.title || '--' }}
										</view>
										<view class="rside value">
											{{ rank.value || 0 }}%
										</view>
									</view>
								</block>
							</view>
						</view>
					</view>

					<view class="arrs-items index9">
						<view class="left">
							9
						</view>
						<view class="right">
							<view class="r-title">
								<text>客户画像触达：</text>
								<text class="num value">{{ weekObj.reachSum || 0 }}次</text>
							</view>
						</view>
					</view>

					<view class="arrs-items index10">
						<view class="left">
							10
						</view>
						<view class="right">
							<view class="r-title">
								<text>未标记接待数：</text>
								<text class="num value down"
									style="font-weight: 500;font-size: 34rpx;">{{ weekObj.unlabelledReceptionNum || 0 }}</text>
								<text class="down value">条</text>
							</view>
						</view>
					</view>

					<view class="arrs-items index11">
						<view class="left">
							11
						</view>
						<view class="right">
							<view class="r-title">
								<text>设备情况：</text>
							</view>
							<view class="r-box">
								<view class="r-box-item-lang">
									<view>在线<text class="value">{{ weekObj.equipmentInfo.onlineNum || 0 }}</text></view>
									<view style="margin-left: 24rpx;">
										离线<text class="value">{{ weekObj.equipmentInfo.offlineNum || 0 }}</text></view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="nav-footer">
			
			<view class="footer-item" @click="toHome">
				回到管理端
			</view>
			
			<view class="footer-item" @click="copy" style="margin-left: 24rpx;">
				复制内容
			</view>
			
			<view class="footer-item full" style="margin-left: 24rpx;">
				<button open-type="share" class="fulls">
					一键转发
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				needList: ['XJTop', 'ZXLTop', 'avgJds'], // 需要转换数组的内容
				carryOutTop: [], // 销讲维度执行前三：
				carryOutLast: [], // 销讲维度执行倒三：
				consultant: [], // 置业顾问排名
				recording: [], // 录音排名
				lowest: [], // 执行率最低的顾问
				building: uni.getStorageSync('buildingID'),
				id: '', // 消息id
				projectName: '', // 项目名称
				weekObj: {}, // 日报详情
			}
		},


		onLoad(option) {
			if (option.id) this.id = option.id
			this.getMessage()
		},

		onShareAppMessage() {
			return {
				title: `${this.projectName}数智工牌日报`,
				path: `/pages/reportExcel/dayReport?id=${this.id}`
			}
		},

		methods: {
			// 跳转首页
			toHome() {
				uni.navigateTo({
					url: '/pages/index/guide'
				})
			},
			// 获取日报详情
			getMessage() {
				this.$u.get('/zkMessage/findByProjectId', {
					id: this.id
				}).then(res => {
					console.log(res)
					let data = JSON.parse(res.zkMessage.content)
					this.weekObj = {
						...res.zkMessage,
						...data
					}
					this.projectName = res.projectName
					this.init()
				}).catch(e => {
					console.log(e)
				})
			},

			copy() {
				let str = `
				${this.projectName}数智工牌日报
				
				生成时间：${this.weekObj.createTime || '--'}
				
				
				1、接待量：${this.weekObj.receptionCount || 0 }
				
				2、有效接待：${this.weekObj.activeCustomer || 0}
				
				3、有效接待率：${this.weekObj.validReceptionRate || 0}%
				对比昨天：${ this.weekObj.validReceptionRatePK > 0 ? '+' : '' }${ this.weekObj.validReceptionRatePK || 0 }%
				
				4、平均执行率：${ this.weekObj.fraction || 0 }%
				对比昨天：${ this.weekObj.fractionPK > 0 ? '+' : '' }${ this.weekObj.fractionPK || 0 }%
				
				5、平均接待时长：${ this.weekObj.avgDuration || 0 }min
				对比昨天：${this.weekObj.avgDurationPK > 0 ? '+' : '' }${ this.weekObj.avgDurationPK || 0 }min`
				if (this.carryOutTop.length > 0) {
					str += `
					
					6、销讲维度执行前三：`
					this.carryOutTop.map((item, index) => {
						str += `
						top${index+1}.${item.title || '--'}${item.value||'0'}%`
					})
				}
				
				if (this.carryOutLast.length > 0) {
					str += `
					
					7、销讲维度执行弱项前三：`
					this.carryOutLast.map((item, index) => {						str += `
						top${index+1}.${item.title || '--'}${item.value||'0'}%`
					})
				}
				if (this.consultant.length > 0) {
					str += `
					
					8、置业顾问平均执行率排名：`
					this.consultant.map((item, index) => {
						str += `
						top${index+1}.${item.title || '--'}${item.value||'0'}%`
					})
				}
				if (this.recording.length > 0) {
					str += `
					
					9、平均执行率最低的顾问：`
					this.recording.map((item, index) => {
						str += `
						top${index+1}.${item.title || '--'}${item.value||'0'}min`
					})
				}
				str += `
				
				10、客户画像触达：${this.weekObj.reachSum || 0}次
				
				11、未标记接待数：${ this.weekObj.unlabelledReceptionNum || 0 }条
				
				12、设备情况：
				在线${this.weekObj.equipmentInfo.onlineNum || 0}
				离线:${this.weekObj.equipmentInfo.offlineNum || 0}`

				uni.setClipboardData({
					data: str
				})
			},

			// 分割数组排名前三，倒三
			getTopThree() {
				if (this.weekObj.XJTopList && this.weekObj.XJTopList.length > 0) {
					this.carryOutLast = this.weekObj.XJTopList.slice(0, 3)
					this.carryOutTop = this.weekObj.XJTopList.reverse().slice(0, 3)
				}
				if (this.weekObj.ZXLTopList && this.weekObj.ZXLTopList.length > 0) {
					this.consultant = this.weekObj.ZXLTopList.reverse().slice(0, 3)
					this.lowest.push(this.weekObj.ZXLTopList[this.weekObj.ZXLTopList.length - 1])
				}
				if (this.weekObj.avgJdsList && this.weekObj.avgJdsList.length > 0) {
					console.log(this.weekObj.avgJdsList.slice(0, 3))
					this.recording = this.weekObj.avgJdsList.reverse().slice(0, 3)
				}
			},

			init() {
				// 把对象转成数组并在后续的步骤方便处理
				this.needList.forEach(item => {
					if (this.weekObj[item] && Object.keys(this.weekObj[item]).length > 0) {
						this.weekObj[item + 'List'] = [] // 销讲执行
						for (let i in this.weekObj[item]) {
							this.weekObj[item + 'List'].push({
								title: i,
								value: this.weekObj[item][i]
							})
						}
					}
				})
				this.sortInitArr()
			},

			// 排序对象转换后的数组
			sortInitArr() {
				this.needList.forEach(item => {
					if (this.weekObj[item + 'List']) {
						this.bubbleSort(this.weekObj[item + 'List'])
					}
				})
				this.getTopThree()
			},


			// 冒泡排序
			bubbleSort(arr) {
				for (let i = 0; i < arr.length - 1; i += 1) {
					//通过 arr.length 次把第一位放到最后,完成排序
					//-i是因为最后的位置是会动态改变的，当完成一次后,最后一位会变成倒数第二位 
					for (let j = 0; j < arr.length - 1 - i; j += 1) {
						if (arr[j].value > arr[j + 1].value) {
							const temp = arr[j];
							arr[j] = arr[j + 1];
							arr[j + 1] = temp;
						}
					}
				}
			},
		},
		filters: {
			fomatDate(date) {
				if (!date) return '--'
				let arr = date.split(' ')
				let str = arr[0]
				let result = str.split('-')
				return `${result[1]}-${result[2]}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		width: 100vw;
		min-height: 100vh;
		display: flex;
		flex-direction: column;

		.nav-header {
			flex-shrink: 0;
		}

		.container {
			padding: 30rpx 30rpx 0;
			flex-grow: 1;
			display: flex;
			flex-direction: column;

			.c-head-card {
				padding: 30rpx;
				width: 100%;
				min-height: 252rpx;
				border: 2rpx solid #000000;
				border-radius: 12rpx;
				box-shadow: 10rpx 10rpx #2671E2;
				display: flex;
				flex-direction: column;

				.c-title-text {
					// position: relative;
					flex-grow: 1;
					font-size: 48rpx;
					font-weight: bold;
					color: #303030;
				}


				.date {
					// position: absolute;
					// right: 0;
					// bottom: 6rpx;
					font-size: 30rpx;
					color: #303030;
				}

				.creative-time {
					margin: 20rpx 0 0 0;
					flex-shrink: 0;

				}

			}


			.dateList {
				width: 100%;

				.arrs {
					width: 100%;

					.arrs-items {
						margin: 40rpx 0 0 0;
						display: flex;
						min-height: 100rpx;

						.left {
							flex-shrink: 0;
							margin-right: 12rpx;
							width: 48rpx;
							height: 44rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 8rpx;
							border: 1rpx solid #999999;
							font-size: 32rpx;
						}

						.right {
							flex-grow: 1;

							.r-title {
								font-size: 32rpx;
								height: 44rpx;
								display: flex;
								align-items: center;

								.num {
									font-size: 34rpx;

								}
							}

							.r-box {
								padding: 21rpx 0 0 0;
								display: flex;
								flex-wrap: wrap;

								.r-box-item {
									margin-right: 24rpx;
								}

								.r-box-item-lang {
									margin-top: 19rpx;
									width: 100%;
									display: flex;
									align-items: center;

									.contrast {
										margin: 0 0 0 24rpx;
										display: flex;
										align-items: center;
									}

									.down {
										color: #43CD80;
										font-size: 34rpx;
									}

									.up {
										font-size: 34rpx;
										color: #E7483C;
									}
								}
							}

							.ranking {
								padding: 21rpx 0 0 0;
								display: flex;
								flex-direction: column;

								.ranking-item {
									margin-bottom: 22rpx;
									display: flex;
									align-items: center;
									font-size: 30rpx;

									.serial {
										flex-shrink: 0;
										width: 42rpx;
										height: 42rpx;
										background: #2671E2;
										border-radius: 50%;
										display: flex;
										justify-content: center;
										align-items: center;
										color: #fff;
									}

									.lside {
										margin: 0 20rpx;
										color: #505050;

									}

									.rside {
										flex-shrink: 0;
										font-size: 32rpx;
									}
								}
							}

						}
					}
				}
			}
		}

		.nav-footer {
			position: sticky;
			bottom: 0;
			padding: 32rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			background: #fff;

			.footer-item {
				flex: 1;
				height: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #2671E2;
				border: 2rpx solid #2671E2;
				border-radius: 8rpx;
				overflow: hidden;
				font-size: 32rpx;

				&.full {
					background: #2671E2;
					color: #fff;

					.fulls {
						box-sizing: border-box;
						width: 100%;
						height: 100%;
						background: transparent;
						color: #fff;
						font-size: 32rpx;
						font-weight: normal;
						line-height: 88rpx;
					}
				}
			}

		}


		.up {
			color: #43CD80 !important;
		}

		.down {
			color: #E6273A !important;
		}

		.empty {
			width: 100%;
			line-height: 48rpx;
		}
		
		.value {
			margin-left: 5rpx;
			font-size: 30rpx !important;
			font-weight: bold !important;
		}
	}
</style>