fix: 成绩报告页canvas调用的顺序

pages2/bank/question_report.vue

@@ -192,95 +192,6 @@ export default {
 		await this.bankExam();
 		await this.examReport();
 		
-		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.reportdata.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.reportdata.performance, caculateX * 90, caculateX * 90, caculateX * 180);
-							context1.setFillStyle('#999999');
-							context1.setFontSize(caculateX * 20);
-							context1.fillText(`满分${this.reportdata.totalScore}`, caculateX * 90, caculateX * 130, caculateX * 180);
-							context1.arc(caculateX * 90, caculateX * 90, caculateX * 80, -Math.PI/2, -Math.PI/2 + (this.reportdata.performance / this.reportdata.totalScore) * 2 * Math.PI, false);
-							context1.stroke();
-							context1.draw();
-						}
-						
-						if(this.reportdata.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.reportdata.doTime}'`, caculateX * 90, caculateX * 90, caculateX * 180);
-							context2.setFillStyle('#999999');
-							context2.setFontSize(caculateX * 20);
-							context2.fillText(`限时${this.reportdata.examTime}'`, caculateX * 90, caculateX * 130, caculateX * 180);
-							context2.arc(caculateX * 90, caculateX * 90, caculateX * 80, -Math.PI/2, -Math.PI/2 + (this.reportdata.doTime / this.reportdata.examTime) * 2 * Math.PI, false);
-							context2.stroke();
-							context2.draw();
-						}
-						
-						if(this.reportdata.score != -1) {
-							var context3 = uni.createCanvasContext('Canvas3');
-							this.context3 = context3;
-							context3.setStrokeStyle('#EEEEEE');
-							context3.setLineWidth(caculateX * 20);
-							context3.arc(caculateX * 90, caculateX * 90, caculateX * 80, 0, 2 * Math.PI, true);
-							context3.stroke();
-							context3.beginPath();
-							context3.setStrokeStyle('#32D74B');
-							context3.setFillStyle('#32D74B');
-							context3.setTextAlign('center');
-							context3.setTextBaseline('middle');
-							context3.setLineCap('round');
-							context3.setFontSize(caculateX * 64);
-							context3.fillText((this.reportdata.performance + this.reportdata.score), caculateX * 90, caculateX * 90, caculateX * 180);
-							context3.setFillStyle('#999999');
-							context3.setFontSize(caculateX * 20);
-							context3.fillText(`满分${this.reportdata.totalScore}`, caculateX * 90, caculateX * 130, caculateX * 180);
-							context3.arc(caculateX * 90, caculateX * 90, caculateX * 80, -Math.PI/2, -Math.PI/2 + ((this.reportdata.performance + this.reportdata.score) / this.reportdata.totalScore) * 2 * Math.PI, false);
-							context3.stroke();
-							context3.draw();
-						}
-						
-						
-					});
-			}
-		});
-		
 	},
 	onPullDownRefresh() {
 		this.pageNum = 1
@@ -290,14 +201,102 @@ export default {
 		// }, 500)
 	},
 	onReachBottom() {
-		console.log(this.total,'total')
-		console.log(this.courseList.length,'length')
 		if (this.courseList.length < this.total) {
 			this.pageNum++
 			this.getcourList()
 		}
 	},
 	methods: {
+		getCanvas() {
+			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.reportdata.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.reportdata.performance, caculateX * 90, caculateX * 90, caculateX * 180);
+								context1.setFillStyle('#999999');
+								context1.setFontSize(caculateX * 20);
+								context1.fillText(`满分${this.reportdata.totalScore}`, caculateX * 90, caculateX * 130, caculateX * 180);
+								context1.arc(caculateX * 90, caculateX * 90, caculateX * 80, -Math.PI/2, -Math.PI/2 + (this.reportdata.performance / this.reportdata.totalScore) * 2 * Math.PI, false);
+								context1.stroke();
+								context1.draw();
+							}
+							
+							if(this.reportdata.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.reportdata.doTime}'`, caculateX * 90, caculateX * 90, caculateX * 180);
+								context2.setFillStyle('#999999');
+								context2.setFontSize(caculateX * 20);
+								context2.fillText(`限时${this.reportdata.examTime}'`, caculateX * 90, caculateX * 130, caculateX * 180);
+								context2.arc(caculateX * 90, caculateX * 90, caculateX * 80, -Math.PI/2, -Math.PI/2 + (this.reportdata.doTime / this.reportdata.examTime) * 2 * Math.PI, false);
+								context2.stroke();
+								context2.draw();
+							}
+							
+							if(this.reportdata.score != -1) {
+								var context3 = uni.createCanvasContext('Canvas3');
+								this.context3 = context3;
+								context3.setStrokeStyle('#EEEEEE');
+								context3.setLineWidth(caculateX * 20);
+								context3.arc(caculateX * 90, caculateX * 90, caculateX * 80, 0, 2 * Math.PI, true);
+								context3.stroke();
+								context3.beginPath();
+								context3.setStrokeStyle('#32D74B');
+								context3.setFillStyle('#32D74B');
+								context3.setTextAlign('center');
+								context3.setTextBaseline('middle');
+								context3.setLineCap('round');
+								context3.setFontSize(caculateX * 64);
+								context3.fillText((this.reportdata.performance + this.reportdata.score), caculateX * 90, caculateX * 90, caculateX * 180);
+								context3.setFillStyle('#999999');
+								context3.setFontSize(caculateX * 20);
+								context3.fillText(`满分${this.reportdata.totalScore}`, caculateX * 90, caculateX * 130, caculateX * 180);
+								context3.arc(caculateX * 90, caculateX * 90, caculateX * 80, -Math.PI/2, -Math.PI/2 + ((this.reportdata.performance + this.reportdata.score) / this.reportdata.totalScore) * 2 * Math.PI, false);
+								context3.stroke();
+								context3.draw();
+							}
+							
+							
+						});
+				}
+			});
+		},
 		getcourList() {
             this.$http({
                 url: '/apply/recommend/goodsList',
@@ -429,6 +428,7 @@ export default {
 			return new Promise(resolve => {
 				this.$api.examReport(this.recordId).then(res => {
 					this.reportdata = res.data.data;
+					this.getCanvas()
 					resolve()
 				});
 				

pages2/class/question_report.vue

@@ -173,71 +173,6 @@ export default {
 	async onShow() {
 		this.courseList = []
 		this.getcourList()
-		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.examType = option.type
@@ -256,6 +191,73 @@ export default {
 		this.bankReport()
 	},
 	methods: {
+		getCanvas() {
+			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();
+							}
+							
+							
+						});
+				}
+			});
+		},
 		getcourList() {
             this.$http({
                 url: '/apply/recommend/goodsList',
@@ -292,7 +294,7 @@ export default {
 		bankReport() {
 			this.$api.bankReportData(this.recordId).then((res) => {
 				this.reportdata = res.data.data
-				console.log('reportdata:', this.reportdata)
+				// console.log('reportdata:', this.reportdata)
 				const {examTime, doTime, reportStatus, rightQuestionNum, performance, lessQuestionNum, totalScore} = this.reportdata
 				this.examTime = examTime
 				this.doTime = doTime
@@ -302,6 +304,7 @@ export default {
 				this.score = performance
 				this.lessQuestionNum = lessQuestionNum
 				this.totalScore = totalScore
+				this.getCanvas()
 			});
 		},
 		/**