rt-sim-training-client/src/views/exam/result.vue

<template>
  <div v-loading="loading">
    <el-card class="paper" :style="{height: height - 10 + 'px'}">
      <div slot="header" style="text-align: center;">
        <span style="font-weight:bold ">{{ $t('exam.examResultsDetails') }}</span>
      </div>
      <el-scrollbar wrap-class="scrollbar-wrapper" :style="{height: height - 150 + 'px'}">
        <div class="context">
          <el-form ref="form" :model="resultModel" size="mini">
            <el-form-item :label="this.$t('exam.testQuestionsName')+':'" prop="name">
              <span>{{ resultModel.examName }}</span>
            </el-form-item>
            <el-form-item :label="this.$t('exam.testScores')+':'" prop="score">
              <span>{{ resultModel.score + ' '+ $t('exam.points') }}</span>
            </el-form-item>
            <el-form-item :label="this.$t('exam.whetherThrough')+':'" prop="detail">
              <span v-if="resultModel.result === '01'" style="color:darkgray">{{ $t('exam.didNotCalculate') }}</span>
              <span v-else-if="resultModel.result === '02'" style="color:green">{{ $t('exam.pass') }}</span>
              <span v-else-if="resultModel.result === '03'" style="color:red">{{ $t('exam.notPass') }}</span>
            </el-form-item>
            <el-form-item :label="this.$t('exam.examTime')+':'" prop="detail">
              <span>{{ Math.ceil(resultModel.usedTime/60) + ' '+ $t('global.minutes') }}</span>
            </el-form-item>
          </el-form>
          <el-table
            :data="resultModel.userExamQuestionsVOs"
            border
            style="width: 100%"
            :summary-method="getSummaries"
            show-summary
          >
            <el-table-column prop="trainingName" :label="this.$t('exam.trainingName')" />
            <el-table-column prop="score" :label="this.$('exam.trainingScore')" />
          </el-table>
        </div>
      </el-scrollbar>
      <div style="position: relative; float: right; right: 60px; bottom: -30px;">
        <el-button type="primary " @click="back">{{ $t('exam.returnToExamList') }}</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import { submitExam } from '@/api/management/userexam';
import { UrlConfig } from '@/router/index';

export default {
	name: 'ExamResult',
	props: {
		examDetails: {
			type: Object,
			default: null
		}
	},
	data() {
		return {
			resultModel: {
				trainingName: '',
				score: 0
			},
			loading: true
		};
	},
	computed: {
		height() {
			return this.$store.state.app.height - 50;
		}
	},
	mounted() {
		this.submitExamData();
	},
	methods: {
		getSummaries(param) {
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = this.$t('exam.totalScore');
					return;
				}
				const values = data.map(item => Number(item[column.property]));
				if (!values.every(value => isNaN(value))) {
					sums[index] = values.reduce((prev, curr) => {
						const value = Number(curr);
						if (!isNaN(value)) {
							return prev + curr;
						} else {
							return prev;
						}
					}, 0);
					sums[index] += this.$('exam.points');
				} else {
					sums[index] = 'N/A';
				}
			});
			return sums;
		},
		submitExamData() {
			this.loading = true;
			let count = 3;
			const userExamId = this.$route.params.userExamId;
			let interval = setInterval(() => {
				submitExam(userExamId).then(response => {
					this.loading = false;
					this.resultModel = response.data;
					clearInterval(interval);
					interval = null;
				}).catch(() => {
					if (count-- < 0) {
						this.loading = false;
						clearInterval(interval);
						interval = null;
						this.$messageBox(this.$t('error.submitExamFailed'));
					}
				});
			}, 1000);

		},
		back() {
			const examId = this.resultModel.examId;
			this.$router.push(`${UrlConfig.exam.detail}/${examId}`);
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    /deep/ {
        .scrollbar-wrapper {
            margin-bottom: 0 !important;
        }
    }

    .paper {
        width: 900px;
        margin: 0 auto;
        border: 1px solid #F8F8F8;
    }

    .context {
        margin: 30px 60px;
    }
</style>