NewZkgj/pages/mine/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>{{ weekObj.receptionCount || 0 }}</text>
								</view>
								<view class="r-box-item">
									<text>有效接待</text><text>{{ weekObj.activeCustomer || 0 }}</text>
								</view>
								<view class="r-box-item-lang">
									<view>有效接待率<text>{{ weekObj.validReceptionRate || 0 }}%</text></view>
									<view class="contrast">对比昨天<text
											:class="{down: weekObj.validReceptionRatePK < 0, up: 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>{{ weekObj.fraction || 0 }}%</text></view>
									<view class="contrast">对比昨天<text
											:class="{down: weekObj.fractionPK < 0, up: 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>{{ weekObj.avgDuration || 0 }}min</text></view>
									<view class="contrast">对比昨天<text
											:class="{down: weekObj.avgDurationPK < 0, up: weekObj.avgDurationPK > 0}">{{ weekObj.avgDurationPK }}</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 }}%)
										</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">
											{{ 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">{{ 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 up"
									style="font-weight: 500;font-size: 34rpx;">{{ weekObj.unlabelledReceptionNum || 0 }}</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>{{ weekObj.equipmentInfo.onlineNum || 0 }}</text></view>
									<view style="margin-left: 24rpx;">
										离线<text>{{ weekObj.equipmentInfo.offlineNum || 0 }}</text></view>
								</view>
							</view>
						</view>
					</view>

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

		<!-- 底部按钮 -->
		<view class="nav-footer">
			<view class="footer-item full">
				<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}数智工牌日报`,
				type: 2,
				path: `/pages/mine/reportExcel/dayReport?id=${this.id}`
			}
		},

		methods: {
			// 获取日报详情
			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 = ``

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

						.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: 32rpx;
			margin: 32rpx 0;
			width: 100%;
			display: flex;
			justify-content: center;

			.footer-item {
				width: 686rpx;
				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 {
						width: 100%;
						height: 100%;
						background: transparent;
						color: #fff;
					}
				}
			}

		}


		.empty {
			width: 100%;
			height: 240rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
	}
</style>