zc_saas_h5/pages2/class/question_report.vue

<template>
	<view>
		<nav-bar title="试卷报告"></nav-bar>
		<view :class="reportStatus == 0 ? 'redBtn' : reportStatus == 1 ? 'greenBtn' : 'disNone'" v-if="reportStatus !== null">
			{{ reportStatus == 0 ? '测试未通过' : reportStatus == 1 ? '测试通过' : '' }}
		</view>
		<view class="top">

			<view class="box">
				<view class="left">
					<view>{{ ((rightQuestionNum / (rightQuestionNum + doWrongQuestionNum)) * 100).toFixed(0) }}%</view>
					<view>正确率</view>
					<view>不含简答/案例题</view>
				</view>
				<view class="right">
					<view class="flex up">
						<!-- <u-icon name="checkmark" color="#16D48B" size="48" style="margin-right: 14rpx;"></u-icon> -->
						<image class="right_num"  src="/static/right_num.png" mode="widthFix"></image>
						<view class="text">正确题数</view>
						<text class="green">{{ rightQuestionNum }}</text>
					</view>
					<view class="flex up">
						<!-- <u-icon name="checkmark" color="#16D48B" size="48" style="margin-right: 14rpx;"></u-icon> -->
						<image class="right_num"  src="/static/right_num.png" mode="widthFix"></image>
						<view class="text">少选题数</view>
						<text class="yellow">{{ rightQuestionNum }}</text>
					</view>
					<view class="flex down">
						<!-- <u-icon name="close" color="#FF3B30" size="38" style="margin-right: 26rpx;"></u-icon> -->
						<image class="right_num"  src="/static/right_num.png" mode="widthFix"></image>
						<view class="text">错误题数</view>
						<text class="red">{{ doWrongQuestionNum }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="circle-wrap">
				<view class="circle-list">
					<view class="item" v-show="totalScore">
						<view class="title">
							试卷得分
							<text>（不含简答和案例题）</text>
						</view>
						<canvas class="canvas" canvas-id="Canvas1"></canvas>
					</view>
					<view class="item" v-show="examTime">
						<view class="title">答题时长</view>
						<canvas canvas-id="Canvas2"></canvas>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			id: '',
			hideBtns:false,
			examData:{},
			examId:'',
			context1: null,
			context2: null,
			rightQuestionNum:'',
			doWrongQuestionNum:'',
			score:'',
			totalScore:'',
			doTime:'',
			examTime:'',
			reportStatus:null,
		};
	},
	onUnload() {},
	computed: { ...mapGetters(['userInfo']) },
	async onShow() {
		
		uni.getSystemInfo({
			success: res => {
				var winW = res.screenWidth;
				var winH = res.screenHeight;
				uni.createSelectorQuery()
					.in(this)
					.select('.canvas')
					.boundingClientRect()
					.exec(async newRes => {
						var width = newRes[0].width;
						var height = newRes[0].height;
						var caculateX = winW / 750;
						var caculateY = winH / 1334;
						console.log(caculateX);
						
						if(this.totalScore) {
							var context1 = uni.createCanvasContext('Canvas1');
							this.context1 = context1;
							context1.setStrokeStyle('#EEEEEE');
							context1.setLineWidth(caculateX * 20);
							context1.arc(caculateX * 90, caculateX * 90, caculateX * 80, 0, 2 * Math.PI, true);
							context1.stroke();
							context1.beginPath();
							context1.setStrokeStyle('#32D74B');
							context1.setFillStyle('#32D74B');
							context1.setTextAlign('center');
							context1.setTextBaseline('middle');
							context1.setLineCap('round');
							context1.setFontSize(caculateX * 64);
							context1.fillText(this.score, caculateX * 90, caculateX * 90, caculateX * 180);
							context1.setFillStyle('#999999');
							context1.setFontSize(caculateX * 20);
							context1.fillText(`满分${this.totalScore}`, caculateX * 90, caculateX * 130, caculateX * 180);
							context1.arc(caculateX * 90, caculateX * 90, caculateX * 80, -Math.PI/2, -Math.PI/2 + (this.score / this.totalScore) * 2 * Math.PI, false);
							context1.stroke();
							context1.draw();
						}
						
						if(this.examTime) {
							var context2 = uni.createCanvasContext('Canvas2');
							this.context2 = context2;
							context2.setStrokeStyle('#EEEEEE');
							context2.setLineWidth(caculateX * 20);
							context2.arc(caculateX * 90, caculateX * 90, caculateX * 80, 0, 2 * Math.PI, true);
							context2.stroke();
							context2.beginPath();
							context2.setStrokeStyle('#007AFF');
							context2.setFillStyle('#007AFF');
							context2.setTextAlign('center');
							context2.setTextBaseline('middle');
							context2.setLineCap('round');
							context2.setFontSize(caculateX * 64);
							context2.fillText(`${this.doTime}'`, caculateX * 90, caculateX * 90, caculateX * 180);
							context2.setFillStyle('#999999');
							context2.setFontSize(caculateX * 20);
							context2.fillText(`限时${this.examTime}'`, caculateX * 90, caculateX * 130, caculateX * 180);
							context2.arc(caculateX * 90, caculateX * 90, caculateX * 80, -Math.PI/2, -Math.PI/2 + (this.doTime / this.examTime) * 2 * Math.PI, false);
							context2.stroke();
							context2.draw();
						}
						
						
					});
			}
		});
	},
	async onLoad(option) {
		this.examTime = option.examTime;
		this.doTime = option.doTime;
		this.reportStatus = option.reportStatus;
		this.rightQuestionNum = +option.rightQuestionNum;
		this.doWrongQuestionNum = +option.doWrongQuestionNum;
		this.score = +option.score;
		this.totalScore = +option.totalScore;
		// this.hideBtns = Boolean(option.hideBtns);
		
	},
	methods: {
		
	}
};
</script>
<style>
page {
	background-color: #eaeef1;
}
</style>
<style lang="scss" scope>
.disNone {
	display: none;
}
.greenBtn {
	margin: 16rpx 16rpx 0;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #f7fff8;
	border-radius: 16rpx;
	color: #34c759;
	font-weight: bold;
	font-size: 30rpx;
}
.redBtn {
	margin: 16rpx 16rpx 0;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #FFF3F2;
	border-radius: 16rpx;
	color: #FF3B30;
	font-weight: bold;
	font-size: 30rpx;

}
.dis_fst {
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.btnACs {
	height: 48rpx;
	width: 160rpx;
	text-align: center;
	line-height: 48rpx;
	border: 1rpx solid #007aff;
	border-radius: 16rpx;
	color: #007aff;
	font-size: 24rpx;
}
.top {
	margin: 16rpx 16rpx 0;
	border-radius: 16rpx;
	padding: 40rpx 24rpx 16rpx;
	background: #fff;
	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.desc {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.box {
		margin-top: 30rpx;
		display: flex;

		.left {
			width: 250rpx;
			height: 176rpx;
			background: #f5f5f5;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-right: 16rpx;

			view {
				text-align: center;

				&:nth-of-type(1) {
					font-size: 60rpx;
					font-weight: bold;
					color: #007aff;
				}
				&:nth-of-type(2) {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}
				&:nth-of-type(3) {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.flex {
				background: #f5f5f5;
				display: flex;
				height: 80rpx;
				align-items: center;
				padding: 0 40rpx;
				border-radius: 16rpx;

				image {
					margin-right: 28rpx;
					
					&.right_num {
						width:26rpx;
					}
					
					&.out_num {
						width:38rpx;
						
					}
					
					&.wrong_num {
						width:30rpx;
						
					}
				}

				.text {
					flex: 1;
					font-size: 30rpx;
					color: #666666;
				}

				text {
					font-size: 48rpx;
					color: #e12626;

					&.red {
						color: #FF3B30;
					}

					&.green {
						color: #36C75A;
					}
					
					&.yellow {
						color:#FFC53D;
					}
				}
			}
		}
	}
}

.bottom {
	.circle-wrap {
		.circle-list {
			display: flex;

			.item {
				padding: 20rpx;
				border-radius: 16rpx;
				background: #fff;
				margin: 16rpx;
				flex: 1;

				.title {
					font-weight: bold;
					font-size: 30rpx;
					line-height: 24rpx;
					color: #333333;

					text {
						font-size: 20rpx;
						color: #999999;
					}
				}

				canvas {
					margin: 36rpx auto 0;
					width: 180rpx;
					height: 180rpx;
				}

				.text {
					text-align: center;
					margin-top: 16rpx;
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
	}
}
</style>