GSExamProj/pages/pracResult/pracResult.vue

<template>
	<view class="hole-page">
		<view class="ex-chart">
			<l-echart ref="chart"></l-echart>
		</view>
		<view class="prac-data">
			<h4>
				<h5>姓名</h5>
				<span>{{ name }}</span>
			</h4>
			<h4>
				<h5>考试得分</h5>
				<span
					:class="[
						{ succeed: pracData.isSucceed == '已通过' },
						{ failed: pracData.isSucceed == '不通过' }
					]"
				>{{ score }}/100</span>
			</h4>
			<h4>
				<h5>考试时间</h5>
				<span>{{ pracData.startTime }}</span>
			</h4>
			<h4>
				<h5>状态</h5>
				<span
					:class="[
						{ succeed: pracData.isSucceed == '已通过' },
						{ failed: pracData.isSucceed == '不通过' }
					]"
				>
					{{ pracData.isSucceed }}
				</span>
			</h4>
		</view>
		<view class="back-home" @click="backHome">返回首页</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts'
	import { publicPath } from '../../public.js'
	export default {
		data() {
			return {
				option: {},
				score: '',
				pracData: {},
				name: uni.getStorageSync('name')
			}
		},
		methods: {
			async init () {
				const chart = await this.$refs.chart.init(echarts)
				chart.setOption(this.option)
			},
			setOp () {
				let that = this
				that.option = {
					title: [
						{
							text: that.score,
							x: 'center',
							y: '35%',
							textStyle: {
							    fontWeight: 'normal',
							    color: '#000',
							    fontSize: '50',
								fontWeight: 'bold'
							}
						},
					    {
							text: `考试得分`,
							x: 'center',
							y: '55%',
							textStyle: {
							    fontWeight: 'normal',
							    color: '#000',
							    fontSize: '14'
							}
						},
						{
							text: that.score >= 60 ? '恭喜您，通过本次考试！' : '很遗憾，您未能通过考试！',
							x: 'center',
							y: '80%',
							textStyle: {
							    fontWeight: 'normal',
							    color: that.score >= 60 ? '#1e92dc' : '#E53E30',
							    fontSize: '16'
							}
						}
					],
					series: [{
					    name: 'Line 1',
					    type: 'pie',
						startAngle: 90,
					    clockwise: false,
					    radius: ['60%', '66%'],
						labelLine: {
							show: false
						},
					    data: [{
					        value: that.score,
					        itemStyle: {
					            color: {
									colorStops: [{
									    offset: 0,
									    color: that.score >= 60 ? '#5decfc' : '#FFCC40' // 0% 处的颜色
									}, {
									    offset: 1,
									    color: that.score >= 60 ? '#1e92dc' : '#E53E30' // 100% 处的颜色
									}]
								}
					        }
					    }, {
					        value: 100 - that.score,
									itemStyle: {
										color: '#fff'
									}
					    }]
					}]
				}
				that.$refs.chart.init(echarts, chart => {
					chart.setOption(that.option)
				})
			},
			backHome () {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		},
		onShow() {
			let that = this
			uni.request({
				url: publicPath + '/backstage/app/selStudyScore',
				method: 'POST',
				header: {
					'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
				},
				data: {
					tableName1: 'exam_paper_self',
					tableName2: 'exam_question_self',
					tableName3: 'exam_profess_self',
					examType: '2',
					keyWord: uni.getStorageSync('id'),
					idNumber: uni.getStorageSync('idCard')
				},
				success: (res) => {
					console.log(res);
					if (res.data.data.length != 0) {
						that.score = Number(res.data.data[0].examScore.split('.')[0])
						that.pracData = res.data.data[0]
					}
					console.log(that.score, that.pracData);
					that.setOp()
				}
			})
		}
	}
</script>

<style lang="scss">
	.hole-page{
		width: 100vw;
		height: 100vh;
		background-color: #f7fbfe;
		.ex-chart{
			box-sizing: border-box;
			padding: 15vw 15vw 3vw 15vw;
			background-color: #fff;
			width: 100%;
			margin: 0 auto;
		}
		.prac-data{
			width: 100%;
			box-sizing: border-box;
			margin: 20rpx auto;
			padding: 20rpx;
			background-color: #fff;
			h4{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 20rpx;
				border-bottom: 1px solid #eaeaea;
				font-weight: normal;
				h5{
					font-weight: normal;
					color: #969696;
					font-size: 14px;
				}
				span{
					font-size: 14px;
				}
				.succeed{
					color: #3ba9f9;
				}
				.failed{
					color: red;
				}
			}
		}
		.back-home{
			width: 60%;
			margin: 5vh auto;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			padding: 15rpx 0;
			font-size: 16px;
			background-color: #3ba9f9;
			color: #fff;
			border-radius: 15rpx;
		}
	}
</style>