NewZkgj/pages/mine/reportExcel/weekReport.vue

<template>
	<view class="pages">
		<!-- 导航栏 -->
		<view class="nav-header">
			<u-navbar  title="数智工牌周报" titles="05.02-05.08"></u-navbar>
		</view>
		<!-- 日报内容部分 -->
		<view class="container">
			<!-- 头部日报卡 -->
			<view class="c-head-card">
				<view class="c-title-text">
					避暑山庄数智工牌周报
					<text class="date">01月24日～1月30日</text>
				</view>
				<view class="creative-time">
					生成时间：2022-01-27 22:00
				</view>
			</view>
		</view>
		
		
		<!-- 简报 -->
		<view class="briefing">
			<view class="briefing-title">
				简报
			</view>
			<!-- 简报表格部分 -->
			<view class="briefing-box">
				<block v-for="(data, index) in 8" :key="index">
					<view class="briefing-box-item">
						<view class="tops">
							接待量（次）
						</view>
						<view class="middle">
							0
						</view>
						<view class="bottom">
							对比上周:0
							<text class="b-text">--</text>
						</view>
					</view>
				</block>
			</view>	
		</view>
		
		
		<!-- 销讲场景执行排名 -->
		<view class="execution-ranking">
			<view class="execution-ranking-title">
				销讲场景执行排名
			</view>
			
			<view class="execution-ranking-desc">
				销讲场景平均执行对比上周下跌12%，其中【送客执行】最强为99%，【区位介绍】执行最弱为25%;
			</view>
			
			<!-- 排名百分比列表 -->
			<view class="ranking-box">
				<block v-for="(percent, index) in 9" :key="index">
					<view class="ranking-item">
						<view class="left">产品设计</view>
						<view class="middle"><u-line-progress inactive-color="#F2F2F2" :show-percent="false" :percent="(index+1)*10"></u-line-progress></view>
						<view class="right"> {{ (index+1)*10 }} %</view>
					</view>
				</block>
			</view>
		</view>
		
		<!-- 接待统计 -->
		<view class="statistics">
			<view class="statistics-title">
				接待统计
			</view>
			<view class="statistics-desc">
				顾问平均执行率对比上周上升5人，下降3人，期中齐猛上升6%为最高，王楠下降-2%降幅最大。
			</view>
			<view class="table">
				<view class="thead">
					<block v-for="(head, headIndex) in tableHead" :key="headIndex">
						<view class="thead-item" :style="[head.style]">
							{{ head.title }}
						</view>
					</block>
				</view>
				
				<view class="tbody">
					<block v-for="(data, index) in 10" :key="index">
						<view class="tbody-item">
							<view class="tbody-items name">白课程</view>
							<view class="tbody-items nums">6</view>
							<view class="tbody-items time">66m</view>
							<view class="tbody-items percent">71%</view>
							<view class="tbody-items week">+6%</view>
						</view>
					</block>
				</view>
				
				<view class="tbottom">
					查看全部
				</view>
			</view>
		</view>
		
		<!-- 顾问排名 -->
		<view class="guwen-ranking">
			<view class="guwen-ranking-title">
				顾问销讲执行率排名（TOP10）
			</view>
			
			<!-- 排名百分比列表 -->
			<view class="ranking-box">
				<block v-for="(percent, index) in 9" :key="index">
					<view class="ranking-item">
						<view class="left">产品设计</view>
						<view class="middle"><u-line-progress inactive-color="#F2F2F2" :show-percent="false" :percent="(index+1)*10"></u-line-progress></view>
						<view class="right"> {{ (index+1)*10 }} %</view>
					</view>
				</block>
			</view>
		</view>
		
		<!-- 顾问排名 -->
		<view class="guwen-ranking">
			<view class="guwen-ranking-title">
				顾问接待量排名（TOP10）
			</view>
			
			<!-- 排名百分比列表 -->
			<view class="ranking-box">
				<block v-for="(percent, index) in 9" :key="index">
					<view class="ranking-item">
						<view class="left">产品设计</view>
						<view class="middle"><u-line-progress inactive-color="#F2F2F2" :show-percent="false" :percent="(index+1)*10"></u-line-progress></view>
						<view class="right"> {{ (index+1)*10 }} %</view>
					</view>
				</block>
			</view>
		</view>
		
		<!-- 使用建议 -->
		<view class="proposal">
			<view class="proposal-title">
				使用建议
			</view>
			
			<!-- 建议的文字 -->
			<view class="proposal-box">
				<block v-for="(data, index) in 3" :key="index">
					<view class="proposal-item">
						<view class="lside">
							{{ index+1 }}
						</view>
						<view class="rside">
							<view class="rside-title">
								执行率整体较低；
							</view>
							
							<view class="rside-box">
								<view class="reason">
									原因：整体平均执率低
								</view>
								<view class="advice">
									建议：	1、精简话术（关键词、指标点）;
											2、对顾问进行话术培训。
								</view>
							</view>
							
						</view>
					</view>
				</block>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="footer">
			<view class="footer-item">
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableHead: [
					{
						title: '顾问',
						style: {
							flex: 1
						}
					},
					{
						title: '接待量',
						style: {
							flex: 1
						}
					},
					{
						title: '平均接待时长',
						style: {
							flex: 2
						}
					},
					{
						title: '平均执行率',
						style: {
							flex: 2
						}
					},
					{
						title: '对比上周',
						style: {
							flex: 1.5
						}
					},
				],
				// list: []
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.pages {
		width: 100vw;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background: #F8F8F8;
		
		.nav-header {
			flex-shrink: 0;
		}
		
		.container {
			padding: 30rpx 30rpx 0;
			display: flex;
			flex-direction: column;
			background: #fff;
			
			.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;
					color: #303030;
					
					.date {
						position: absolute;
						right: 0;
						bottom: 6rpx;
						font-size: 30rpx;
						color: #303030;
					}
				}
				
				.creative-time {
					margin: 20rpx 0 0 0;
					flex-shrink: 0;
				}
			}
		}
		
		
		
		.briefing {
			margin: 40rpx 0 0 0;
			
			.briefing-title {
				padding: 0 30rpx;
				height: 90rpx;
				display: flex;
				align-items: center;
				border: 1rpx solid #E0E0E0;
				font-size: 32rpx;
				font-weight: 600;
			}
			
			.briefing-box {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				
				.briefing-box-item {
					padding: 20rpx 30rpx;
					width: 50%;
					height: 186rpx;
					border: 1px solid #E0E0E0;
					border-left: none;
					border-top: none;
					
					&:nth-of-type(2n) {
						border-right: none;
					}
					
					.top {
						font-size: 28rpx;
					}
					
					.middle {
						margin: 14rpx 0 12rpx;
						font-size: 32rpx;
						font-weight: 600;
						color: #333333;
					}
					
					.bottom {
						font-size: 26rpx;
						color: #666666;
						
						.b-text {
							margin-left: 20rpx;
						}
					}
				}
			}
		}
		
		
		.execution-ranking {
			margin: 20rpx 0 0 0;
			padding: 30rpx;
			background: #fff;
			
			.execution-ranking-title {
				font-size: 32rpx;
				font-weight: 500;
			}
			
			.execution-ranking-desc {
				margin-top: 20rpx;
				font-size: 30rpx;
			}
			
			.ranking-box {
				margin: 30rpx 0 0 0;
				.ranking-item {
					margin-bottom: 18rpx;
					display: flex;
					
					&:nth-last-of-type(1) {
						margin-bottom: 0;
					}
					
					.left {
						flex-shrink: 0;
						width: 140rpx;
						font-size: 30rpx;
					}
					
					.middle {
						flex-grow: 1;
					}
					
					.right {
						flex-shrink: 0;
						width: 118rpx;
						font-size: 30rpx;
						text-align: center;
					}
				}
			}
		}
		
		.statistics {
			margin: 20rpx 0 0 0;
			background: #fff;
			
			.statistics-title {
				padding: 30rpx 30rpx 0;
				width: 100%;
			}
			
			.statistics-desc {
				padding: 0 30rpx;
				margin-top: 20rpx;
			}
			
			.table {
				margin: 30rpx 0 0 0;
				
				.thead {
					padding: 0 30rpx;
					width: 100%;
					height: 72rpx;
					display: flex;
					align-items: center;
					border: 1rpx solid #E0E0E0;
					border-left: none;
					border-right: none;
					font-size: 26rpx;
					
					.thead-item {
						text-align: center;
					}
				}
				
				.tbody {
					
					.tbody-item {
						padding: 0 30rpx;
						display: flex;
						align-items: center;
						height: 72rpx;
						background: #FAFCFF;
						
						&:nth-of-type(2n) {
							background: #FFFFFF;
						}
						
						.tbody-items {
							flex: 1;
							display: flex;
							justify-content: center;
						}
						
						.time {
							flex: 2;
						}
						
						.percent {
							flex: 2;
						}
						
						.week {
							flex: 1.5;
						}
					}
				}
				
				.tbottom {
					width: 100%;
					height: 72rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 30rpx;
					color: #2671E2;
					background: #FAFCFF;
				}
			}
		}
		
		.guwen-ranking {
			margin: 20rpx 0 0 0;
			width: 100%;
			padding: 30rpx;
			background: #fff;
			
			.guwen-ranking-title {
				font-size: 32rpx;
				font-weight: 500;
			}
			
			.guwen-ranking-desc {
				margin-top: 20rpx;
				font-size: 30rpx;
			}
			
			.ranking-box {
				margin: 30rpx 0 0 0;
				.ranking-item {
					margin-bottom: 18rpx;
					display: flex;
					
					&:nth-last-of-type(1) {
						margin-bottom: 0;
					}
					
					.left {
						flex-shrink: 0;
						width: 140rpx;
						font-size: 30rpx;
					}
					
					.middle {
						flex-grow: 1;
					}
					
					.right {
						flex-shrink: 0;
						width: 118rpx;
						font-size: 30rpx;
						text-align: center;
					}
				}
			}
		}
		
		.proposal {
			margin: 20rpx 0 0 0;
			padding: 30rpx;
			
			.proposal-title {
				font-size: 32rpx;
				font-weight: 500;
			}
			
			.proposal-box {
				margin: 30rpx 0 0 0;
				
				.proposal-item {
					margin: 20rpx 0 0 0;
					display: flex;
					
					.lside {
						flex-shrink: 0;
						margin: 0 12rpx 0 0;
						width: 44rpx;
						height: 44rpx;
						border-radius: 50%;
						background: #2671E2;
						text-align: center;
						line-height: 44rpx;
						color: #fff;
					}
					
					.rside {
						
						.rside-title {
							font-size: 32rpx;
						}
						
						.rside-box {
							margin: 16rpx 0 0 0;
						}
					}
				}
			}
			
		}
		
		.up {
			color: #E6273A;
		}
		
		.down {
			color: #43CD80;
		}
	}
</style>