zc_saas_h5/pages2/bank/question_statistics.vue

<template>
	<view>
		<nav-bar title="做题统计"></nav-bar>
		<view class="top">
			<view class="title">
				做题统计
				<text>（不含简答和案例题）</text>
			</view>

			<view class="circle-wrap">
				<view class="circle-list">
					<view class="item">
						<canvas class="canvas" canvas-id="Canvas1"></canvas>
						<view class="text">正确率</view>
					</view>
					<view class="item">
						<canvas canvas-id="Canvas2"></canvas>
						<view class="text">做题进度</view>
					</view>
					<view class="numbers">
						<view class="blue">已答 {{ goodsCount.doNum }}</view>
						<view>总数 {{ goodsCount.totalNum }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="title-list">
			<view class="content">
				<view class="list" v-for="(item1, index1) in bankList" :key="index1">
					<template v-if="item1.type == 1">
						<view class="moduleItem" @click="clickModule(item1.majorId, index1)">
							<view class="courseName">{{ item1.name }}</view>
							<view>
								<image src="/static/icon/up.png" class="icon_up" v-if="!item1.showList"></image>
								<image src="/static/icon/down.png" class="icon_up" v-if="item1.showList"></image>
							</view>
						</view>

						<template v-if="item1.showList">
							<view v-for="(item2, index2) in item1.list" :key="index2">
								<view class="section" @click="changeItem(item1.majorId,index1, item2.chapterExamId, item1.type,index2)">
									<image src="/static/icon/up1.png" class="icon_up" v-if="!item2.showList"></image>
									<image src="/static/icon/down1.png" class="icon_up" v-if="item2.showList"></image>
									<!-- <u-icon name="arrow-up" color="#999" size="24" v-if="item2.showList"></u-icon>
									<u-icon name="arrow-down" color="#999" size="24" v-if="!item2.showList"></u-icon> -->
									<text style="margin-left:34rpx;font-size: 24rpx;color:#666;">
										{{ item2.name }}
									</text>
								</view>
								<view v-if="item2.showList">
									<view class="article" v-for="(article, index3) in item2.list" :key="index3">
										<view class="flex-auto">
											<view class="tit">{{ article.examName }}</view>
											<view class="desc">
												<view class="flex-auto">
													正确率
													<text class="green">{{article.totalQuestionNum != 0 ?((article.rightQuestionNum / article.totalQuestionNum * 100).toFixed(0)) : 0 +'%'}}</text>
												</view>
												<view class="flex-auto">
													已完成
													<text class="blue">{{article.doQuestionNum +'/'+article.totalQuestionNum}}</text>
												</view>
											</view>
										</view>
										<navigator  hover-class="none" :url="'/pages2/bank/questionBankExplainDetail?goodsId='+id+'&examId='+article.examId">
											<view class="btn">详情</view>
										</navigator>
									</view>
								</view>
								<u-line></u-line>
							</view>
						</template>
					</template>

					<template v-if="item1.type == 2">
						<view class="section" @click="changeItem(0,index1, item1.majorId, item1.type)">
							<image src="/static/icon/up1.png" class="icon_up" v-if="!item1.showList"></image>
							<image src="/static/icon/down1.png" class="icon_up" v-if="item1.showList"></image>
							<!-- <u-icon name="arrow-up" color="#999" size="24" v-if="item1.showList"></u-icon>
							<u-icon name="arrow-down" color="#999" size="24" v-if="!item1.showList"></u-icon> -->
							<text style="margin-left:34rpx;font-size: 24rpx;color:#666;">{{ item1.name }}</text>
						</view>
						<view v-if="item1.showList">
							<view class="article" :key="index2" v-for="(article, index2) in item1.list">
								<view class="flex-auto">
									<view class="tit">{{ article.name }}</view>
									<view class="desc">
										<view class="flex-auto">
											正确率
											<text class="green">{{article.totalQuestionNum != 0 ?((article.rightQuestionNum / article.totalQuestionNum * 100).toFixed(0)) : 0 +'%'}}</text>
										</view>
										<view class="flex-auto">
											已完成
											<text class="blue">{{article.doQuestionNum +'/'+article.totalQuestionNum}}</text>
										</view>
									</view>
								</view>
								<navigator  hover-class="none" :url="'/pages2/bank/questionBankExplainDetail?goodsId='+id+'&examId='+article.examId">
									<view class="btn">详情</view>
								</navigator>
							</view>
						</view>
					</template>

					<template v-if="item1.type == 3">
						<view class="article">
							<view class="flex-auto">
								<view class="tit">{{ item1.name }}</view>
								<view class="desc">
									<view class="flex-auto">
										正确率
										<text class="green">{{item1.totalQuestionNum != 0 ?((item1.rightQuestionNum / item1.totalQuestionNum * 100).toFixed(0)) : 0+'%'}}</text>
									</view>
									<view class="flex-auto">
										已完成
										<text class="blue">{{item1.doQuestionNum +'/'+item1.totalQuestionNum}}</text>
									</view>
								</view>
							</view>
							<navigator  hover-class="none" :url="'/pages2/bank/questionBankExplainDetail?goodsId='+id+'&examId='+item1.majorId">
								<view class="btn">详情</view>
							</navigator>
						</view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			bankList: [],
			goodsCount: {},
			id: '',
			context1: null,
			context2: null,
			caculateX: 0,
			caculateY: 0,
			orderGoodsId:'',
		};
	},
	onUnload() {},
	computed: { ...mapGetters(['userInfo']) },
	onLoad(option) {
		this.orderGoodsId = option.orderGoodsId
		this.id = option.id;
		
	},
	onShow() {
		uni.getSystemInfo({
			success: res => {
				var winW = res.screenWidth;
				var winH = res.screenHeight;
				uni.createSelectorQuery()
					.in(this)
					.select('.canvas')
					.boundingClientRect()
					.exec(newRes => {
						// this.goodsBankList();
		
						var width = newRes[0].width;
						var height = newRes[0].height;
						this.caculateX = winW / 750;
						this.caculateY = winH / 1334;
						var context1 = uni.createCanvasContext('Canvas1');
						this.context1 = context1;
						context1.setStrokeStyle('#EEEEEE');
						context1.setLineWidth(this.caculateX * 20);
						context1.arc(this.caculateX * 90, this.caculateX * 90, this.caculateX * 80, 0, 2 * Math.PI, true);
						context1.stroke();
						context1.draw();
		
						var context2 = uni.createCanvasContext('Canvas2');
						this.context2 = context2;
						context2.setStrokeStyle('#EEEEEE');
						context2.setLineWidth(this.caculateX * 20);
						context2.arc(this.caculateX * 90, this.caculateX * 90, this.caculateX * 80, 0, 2 * Math.PI, false);
						context2.stroke();
						context2.draw();
						
						this.goodsBankQuestionNum();
						this.goodsBankDolist();
					});
			}
		});
	},
	methods: {
		goodsBankDolist() {
			this.$api
				.goodsBankDolist({
					goodsId:this.id,
					orderGoodsId: this.orderGoodsId
				})
				.then(res => {
					console.log(res);
					this.bankList = res.data.data;
				});
		},
		goodsBankList() {
			this.$api
				.goodsBankList({
					goodsId:this.id,
					orderGoodsId: this.orderGoodsId
				})
				.then(res => {
					console.log(res);
					this.bankList = res.data.data;
				});
		},
		goodsBankQuestionNum() {
			this.$api.goodsBankQuestionNum(this.orderGoodsId).then(res => {
				this.goodsCount = res.data.data;

				this.context1.beginPath();
				this.context1.setStrokeStyle('#32D74B');
				this.context1.setFillStyle('#32D74B');
				this.context1.setTextAlign('center');
				this.context1.setLineCap('round');
				this.context1.setFontSize(this.caculateX * 32);
				this.context1.fillText(
					((this.goodsCount.rightNum / this.goodsCount.totalNum) * 100).toFixed(2) + '%',
					this.caculateX * 90,
					this.caculateX * 90,
					this.caculateX * 180
				);
				this.context1.save();
				this.context1.arc(this.caculateX * 90, this.caculateX * 90, this.caculateX * 80, -Math.PI/2, -Math.PI/2 + (this.goodsCount.rightNum / this.goodsCount.totalNum) * 2 * Math.PI, false);
				this.context1.restore();
				this.context1.stroke();
				this.context1.draw(true);

				this.context2.beginPath();
				this.context2.setStrokeStyle('#007AFF');
				this.context2.setFillStyle('#007AFF');
				this.context2.setTextAlign('center');
				this.context2.setLineCap('round');
				this.context2.setFontSize(this.caculateX * 32);
				this.context2.fillText(((this.goodsCount.doNum / this.goodsCount.totalNum) * 100).toFixed(2) + '%', this.caculateX * 90, this.caculateX * 90, this.caculateX * 180);
				this.context2.save();
				this.context2.translate(this.caculateX * 90, this.caculateX * 90);
				this.context2.rotate((-90 * Math.PI) / 180);
				this.context2.arc(this.caculateX * 90, this.caculateX * 90, this.caculateX * 80, -Math.PI/2, -Math.PI/2 + (this.goodsCount.doNum / this.goodsCount.totalNum) * 2 * Math.PI, false);
				this.context2.restore();
				this.context2.stroke();
				this.context2.draw(true);
			});
		},
		clickModule(id, index) {
			if (this.bankList[index].list) {
				this.$set(this.bankList[index], 'showList', !this.bankList[index].showList);
				return;
			}

			this.$api
				.goodsChapterDolist({
					goodsId:this.id,
					orderGoodsId: this.orderGoodsId,
					moduleExamId: id
				})
				.then(res => {
					this.$set(this.bankList[index], 'showList', true);
					this.$set(this.bankList[index], 'list', res.data.data);
				});
		},
		changeItem(moduleExamId,index1, id, type,index2) {
			if (type == 1) {
				if (this.bankList[index1].list[index2].list) {
					this.$set(this.bankList[index1].list[index2], 'showList', !this.bankList[index1].list[index2].showList);
					return;
				}

				this.$api
					.goodsExamDolist({
					goodsId:this.id,
						orderGoodsId: this.orderGoodsId,
						moduleExamId: moduleExamId,
						chapterExamId: id
					})
					.then(res => {
						this.$set(this.bankList[index1].list[index2], 'showList', true);
						this.$set(this.bankList[index1].list[index2], 'list', res.data.data);
					});
			} else if (type == 2) {
				if (this.bankList[index1].list) {
					this.$set(this.bankList[index1], 'showList', !this.bankList[index1].showList);
					return;
				}

				this.$api
					.goodsExamDolist({
					goodsId:this.id,
						orderGoodsId: this.orderGoodsId,
						moduleExamId: moduleExamId,
						chapterExamId: id
					})
					.then(res => {
						this.$set(this.bankList[index1], 'showList', true);
						this.$set(this.bankList[index1], 'list', res.data.data);
					});
			}
		}
	}
};
</script>
<style>
page {
	background-color: #eaeef1;
}
</style>
<style lang="scss" scope>
.top {
	margin: 16rpx;
	border-radius: 16rpx;
	background: #fff;
	padding: 24rpx;
	.title {
		font-size: 24rpx;
		line-height: 24rpx;
		color: #333333;

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

	.circle-wrap {
		margin-top: 20rpx;

		.circle-list {
			display: flex;

			.item {
				flex: 1;
				padding-left: 30rpx;

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

				.text {
					text-align: center;
					margin-top: 16rpx;
					font-size: 24rpx;
					color: #333333;
				}
			}
			.numbers {
				display: flex;
				color: #999999;
				font-size: 24rpx;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.blue {
					margin-bottom: 40rpx;
					color: #007aff;
				}
			}
		}
	}
}

.courseName {
	font-size: 24rpx;
	color: #666;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.moduleItem {
	height: 80rpx;
	color: #333333;
	font-size: 32rpx;
	line-height: 80rpx;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
}

.icon_up {
	width: 32rpx;
	height: 32rpx;
}

.title-list {
	background: #eaeef1;
	padding: 16rpx 16rpx 124rpx;
	.content {
		.list {
			background: #fff;
			margin-bottom: 30rpx;
			overflow: hidden;
			border-radius: 16rpx;
			padding: 10rpx 16rpx;

			.module {
				font-size: 30rpx;
				color: #333333;

				.icon {
					margin-right: 10rpx;
				}
			}

			.section {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin: 20rpx 0;
				display: flex;
				align-items: center;
			}

			.article {
				padding: 14rpx 0 10rpx;
				display: flex;
				align-items: center;
				margin-left: 40rpx;
				font-size: 24rpx;
				color: #666666;
				border-bottom: 1rpx solid #eeeeee;

				.flex-auto {
					font-size: 26rpx;
					flex: 1;
					margin-right: 30rpx;

					&:nth-last-of-type(1) {
						border: 0;
					}

					.desc {
						width: 480rpx;
						padding: 0 14rpx;
						margin-top: 20rpx;
						height: 40rpx;
						border: 1px solid #eeeeee;
						border-radius: 16rpx;
						font-size: 26rpx;
						display: flex;
						align-items: center;

						.blue {
							font-size: 26rpx;
							color: #007aff;
						}
						.green {
							font-size: 26rpx;
							color: #32d74b;
						}
					}
				}

				.btn {
					width: 96rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					color: #fff;
					font-size: 30rpx;
					border-radius: 24rpx;
					background: #007aff;
					// margin-left:36rpx;
					border-radius: 24rpx;
				}
			}
		}
	}
}
</style>