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

<template>
  <div v-loading="loading" class="joylink-card paper">
    <div class="card-title">
      <span style="font-weight:bold ">{{ $t('exam.examResultsDetails') }}</span>
    </div>
    <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%; min-height: 200px;" :summary-method="getSummaries" show-summary>
        <el-table-column prop="trainingName" :label="this.$t('exam.trainingName')" />
        <el-table-column prop="score" :label="this.$t('exam.trainingScore')" />
      </el-table>
    </div>
    <div class="draf_box">
      <el-button type="primary " @click="back">{{ $t('exam.returnToExamList') }}</el-button>
    </div>
  </div>
</template>
<script>
import { submitExam } from '@/api/management/userexam';
import { UrlConfig } from '@/scripts/ConstDic';

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.$t('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({path: `${UrlConfig.trainingPlatform.examDetail}/${examId}`, query: { subSystem: this.$route.query.subSystem, mapId: this.$route.query.mapId }});
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .paper {
        height: 100%;
        overflow: hidden;
        .card-title{
            height: 47px;
            line-height: 47px;
            border-bottom: 1px solid #e6e6e6;
            text-align: center;
        }

        .context {
            padding: 30px 60px;
            height: calc(100% - 107px);
            overflow: auto;
        }
    }

    .draf_box{
        padding: 10px 0;
        text-align: center;
    }
</style>