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.$t('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.$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 }});
        }
    }
};
</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>