NewZkgj/pages/mine/reportExcel/weekReport.vue

<template>
	<view class="pages">
		<!-- 导航栏 -->
		<view class="nav-header">
			<u-navbar title="数智工牌周报" :titles="$options.filters.getTimeLine(weekObj.createTime, 1)"></u-navbar>
		</view>
		<!-- 日报内容部分 -->
		<view class="container">
			<!-- 头部日报卡 -->
			<view class="c-head-card">
				<view class="c-title-text">
					{{ projectName || '' }}数智工牌周报
					<text class="date">{{ weekObj.createTime | getTimeLine }}</text>
				</view>
				<view class="creative-time">
					生成时间：{{ weekObj.createTime || '--' }}
				</view>
			</view>
		</view>


		<!-- 简报 -->
		<view class="briefing">
			<view class="briefing-title">
				简报
			</view>
			<!-- 简报表格部分 -->
			<view class="briefing-box">
				<block v-for="(data, index) in numlist" :key="index">
					<view class="briefing-box-item">
						<view class="tops">
							{{ data.name }}
						</view>
						<view class="middle">
							{{ data.num || 0 }}
						</view>
						<view class="bottom">
							对比上周: {{ data.preNum || 0 }}
							<text class="b-text"
								:class="{up: data.percent > 0, down: data.percent < 0}">{{ data.percent || '--' }}</text>
							<template v-if="data.percent != 0">
								<text style="margin-left: 8rpx;font-size: 34rpx;font-weight: bold;" :class="{up: data.percent > 0, down: data.percent < 0}">{{ data.percent > 0 ? '↑' : '↓' }}</text>
							</template>
						</view>
					</view>
				</block>
			</view>
		</view>


		<!-- 销讲场景执行排名 -->
		<view class="execution-ranking">
			<view class="execution-ranking-title">
				销讲场景执行排名
			</view>
			<template v-if="weekObj.fractionPK && weekObj.fractionPK != 0">
				<view class="execution-ranking-desc">
					<text>销讲场景平均执行对比上周</text>
					<text>{{ rankTop('fractionPKName') }}</text>
					<text>{{ rankTop('fractionPK') }}</text>
					<text>%，其中【{{ rankTop('fractionBastName') }}】最强为</text>
					<text class="up">{{ rankTop('fractionBastValue') }}</text>
					<text>%，【{{ rankTop('fractionLastName') }}】执行最弱为</text>
					<text class="down">{{ rankTop('fractionLastValue') }}</text>
					<text>%;</text>
				</view>

				<!-- 排名百分比列表 -->
				<view class="ranking-box">
					<block v-for="(percent, index) in weekObj.XJTop1List" :key="index">
						<view class="ranking-item">
							<view class="left">{{ percent.title }}</view>
							<view class="middle">
								<u-line-progress :active-color="$options.filters.setColor(percent.value)" inactive-color="#F2F2F2" :show-percent="false"
									:percent="percent.value"></u-line-progress>
							</view>
							<view class="right"> {{ percent.value || '0' }} %</view>
						</view>
					</block>
				</view>
			</template>
			<template v-else>
				<view class="empity">
					暂无数据
				</view>
			</template>
		</view>

		<!-- 接待统计 -->
		<view class="statistics">
			<view class="statistics-title">
				接待统计
			</view>
			<template v-if="weekObj.customerInfo1.length - weekObj.customerInfo2.length != 0">
				<view class="statistics-desc">
					<text>
						顾问平均执行率对比上周
					</text>
					<text>
						{{ rankTop('ranktype') }}
					</text>
					<text :class="[rankTop('class')]">{{ rankTop('people') }}</text>
					<text class="">
						人，其中{{ rankTop('topName') }}上升
					</text>
					<text class="up">{{ rankTop('topPk') }}</text>
					<text class="">
						%为最高，{{ rankTop('lastName') }}下降
					</text>
					<text class="down">{{ rankTop('lastPk') }}</text>
					<text class="">
						%降幅最大。
					</text>
				</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 weekObj.customerInfo1" :key="index">
							<view class="tbody-item">
								<view class="tbody-items name">{{ data.name }}</view>
								<view class="tbody-items nums">{{ data.receptionCount }}</view>
								<view class="tbody-items time">{{ data.avgDuration }}m</view>
								<view class="tbody-items percent">{{ data.fraction }}%</view>
								<view class="tbody-items week" :class="{up: data.pk > 0, down: data.pk < 0}">
									{{ data.pk > 0 ? `+${data.pk}` : data.pk }}%
								</view>
							</view>
						</block>
					</view>
				</view>
			</template>

			<template v-else>
				<view class="empity">
					暂无数据
				</view>
			</template>
		</view>

		<!-- 顾问排名 -->
		<view class="guwen-ranking">
			<view class="guwen-ranking-title">
				顾问销讲执行率排名（TOP10）
			</view>
			<template v-if="weekObj.ZXLTopList && weekObj.ZXLTopList.length > 0">
				<!-- 排名百分比列表 -->
				<view class="ranking-box">
					<block v-for="(percent, index) in weekObj.ZXLTopList" :key="index">
						<view class="ranking-item">
							<view class="left">{{ percent.title }}</view>
							<view class="middle">
								<u-line-progress :active-color="$options.filters.setColor(percent.value)" inactive-color="#F2F2F2" :show-percent="false"
									:percent="percent.value">
								</u-line-progress>
							</view>
							<view class="right"> {{ percent.value || '0' }} %</view>
						</view>
					</block>
				</view>
			</template>

			<template v-else>
				<view class="empity">
					暂无数据
				</view>
			</template>
		</view>

		<!-- 顾问排名 -->
		<view class="guwen-ranking">
			<view class="guwen-ranking-title">
				顾问接待量排名（TOP10）
			</view>

			<template v-if="weekObj.JDLTopList && weekObj.JDLTopList.length > 0">
				<!-- 排名百分比列表 -->
				<view class="ranking-box">
					<block v-for="(percent, index) in weekObj.JDLTopList" :key="index">
						<view class="ranking-item">
							<view class="left">{{ percent.title }}</view>
							<view class="middle">
								<u-line-progress :active-color="$options.filters.setColor(percent.value)" inactive-color="#F2F2F2" :show-percent="false"
									:percent="percent.value">
								</u-line-progress>
							</view>
							<view class="right"> {{ percent.value || '0' }} %</view>
						</view>
					</block>
				</view>
			</template>

			<template v-else>
				<view class="empity">
					暂无数据
				</view>
			</template>
		</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
						}
					},
				],
				id: '', // id

				needList: ['JDLTop', 'ZXLTop', 'XJTop1'], // 需要转换数组的内容

				// 简报
				numlist: [{
						name: '接待量 (次)',
						num: '',
						setName: 'receptionCount1',
						percent: '',
						percentName: 'receptionCountPK',
						preNum: '', // 上周数量
						preNumName: 'receptionCount2', // 

					}, {
						name: '有效接待 (次)',
						num: '',
						setName: 'activeCustomer1',
						percent: '',
						percentName: 'activeCustomerPK',
						preNum: '', // 上周数量
						preNumName: 'receptionCount2', // 
					},
					{
						name: '平均执行率（%）',
						num: '',
						setName: 'fraction1',
						percent: '',
						percentName: 'fractionPK',
						preNum: '', // 上周数量
						preNumName: 'receptionCount2', // 
					},
					{
						name: '平均接待时长（分）',
						num: '',
						setName: 'avgDuration1',
						percent: '',
						percentName: 'avgDurationPK',
						preNum: '', // 上周数量
						preNumName: 'receptionCount2', // 
					},
					{
						name: '违禁接待 (次)',
						num: '',
						setName: 'prohibitedNum1',
						percent: '',
						percentName: 'prohibitedNumPK',
						preNum: '', // 上周数量
						preNumName: 'prohibitedNum2', // 
					},
					{
						name: '客户画像触达 (次)',
						num: '',
						setName: 'reachSum1',
						percent: '',
						percentName: 'reachSumPK',
						preNum: '', // 上周数量
						preNumName: 'reachSum2', // 
					},
					{
						name: '已标记',
						num: '',
						setName: 'labelledReceptionNum1',
						percent: '',
						percentName: 'labelledReceptionNumPK',
						preNum: '', // 上周数量
						preNumName: 'labelledReceptionNum2', // 
					},
					{
						name: '未标记',
						num: '',
						setName: 'unlabelledReceptionNum1',
						percent: '',
						percentName: 'unlabelledReceptionNumPK',
						preNum: '', // 上周数量
						preNumName: 'unlabelledReceptionNum2', // 
					},
				],

				// 周报详情
				weekObj: {},
				projectName: '', // 项目名称
			}
		},


		computed: {
			
			// 排名最高与最低
			rankTop() {
				return name => {
					let obj = {
						ranktype: (this.weekObj.customerInfo1.length - this.weekObj.customerInfo2.length) > 0 ?  '上升' : '下降',
						people: Math.abs(this.weekObj.customerInfo1.length - this.weekObj.customerInfo2.length),
						topName: this.weekObj.customerInfo1[0].name,
						topPk: Math.abs(this.weekObj.customerInfo1[0].pk),
						lastName: this.weekObj.customerInfo1[this.weekObj.customerInfo1.length-1].name,
						lastPk: Math.abs(this.weekObj.customerInfo1[this.weekObj.customerInfo1.length-1].pk), // 
						class: (this.weekObj.customerInfo1.length - this.weekObj.customerInfo2.length) > 0 ? 'up' : 'down',
						fractionPKName: this.weekObj.fractionPK > 0 ? '上涨' : '下跌',
						fractionPK: Math.abs(this.weekObj.fractionPK),
						fractionBastName: this.weekObj.XJTop1List[0].title,
						fractionBastValue: this.weekObj.XJTop1List[0].value,
						fractionLastName: this.weekObj.XJTop1List[this.weekObj.XJTop1List.length-1].title,
						fractionLastValue: this.weekObj.XJTop1List[this.weekObj.XJTop1List.length-1].value,
					}
					return obj[name]
				}
			},
		},

		onLoad(option) {
			if (option.id) this.id = option.id
			this.getMessage()
			console.log(this.rankTop(this.weekObj), '12312312312')
		},


		onShareAppMessage() {
			return {
				title: `${this.projectName}数智工牌周报`,
				path: `/pages/mine/reportExcel/weekRepor?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)
					console.log(data)
					this.bubbleSort(data.customerInfo1, 'pk')
					this.bubbleSort(data.customerInfo2, 'pk')
					data.customerInfo1.reverse()
					data.customerInfo2.reverse()
					this.weekObj = {
						...res.zkMessage,
						...data
					}
					console.log(this.weekObj, 'this.weekObj')
					this.projectName = res.projectName
					this.numlist.forEach(item => {
						if (data[item.setName]) {
							item.num = data[item.setName]
						}
						if (data[item.percentName]) {
							item.percent = data[item.percentName]
						}
						if (data[item.preNumName]) {
							item.preNum = data[item.preNumName]
						}
					})
					this.init()
				}).catch(e => {
					console.log(e)
				})

			},
			
			
			// 把对象转成数组并在后续的步骤方便处理
			init() {
				console.log(this.weekObj, 'this.weekObj')
				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.reverseList()
			},

			// 反转数组
			reverseList() {
				this.needList.forEach(item => {
					if (this.weekObj[item + 'List']) {
						this.weekObj[item + 'List'].reverse()
					}
				})
			},

			// 冒泡排序
			bubbleSort(arr, keys = 'value') {
				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][keys] > arr[j + 1][keys]) {
							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]}`
			},

			// 转换时间
			getTimeLine(date, type = 1) {
				if (!date) return '--'
				let time = new Date(date)
				time.setDate(time.getDate() - 7)
				let arr = date.split(' ')
				let str = arr[0]
				let result = str.split('-')

				let m = (time.getMonth() + 1) < 10 ? `0${time.getMonth() + 1}` : (time.getMonth() + 1)
				let d = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate()

				if (type == 1) {
					return `${m}.${d}-${result[1]}.${result[2]}`
				} else {
					return `${m}月${d}日～${result[1]}月${result[2]}日`
				}
			},
			
			// 设置颜色
			setColor(value) {
				let color = ''
				switch(true) {
					case 0 <= value && value <= 70 :
						color = '#4FC78F';
						break;
					case 70 < value && value <= 80 :
						color = '#FFCC00';
						break;
					case  80 < value && value <= 90 :
						color = '#FF8C13';
						break;
					case 90 < value && value <= 100 :
						color = '#E7483C';
						break;
				}
				return color
			},
		}
	}
</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;


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

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


		.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;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.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;
						}
						
						.name {
							justify-content: flex-start;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.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;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.middle {
						flex-grow: 1;
					}

					.right {
						flex-shrink: 0;
						width: 118rpx;
						font-size: 30rpx;
						text-align: center;
					}
				}
			}
		}

		.proposal {
			margin: 20rpx 0 0 0;
			padding: 30rpx;
			background: #fff;

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

		.empity {
			width: 100%;
			height: 300rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-weight: 600;
		}
	}
</style>