rt-sim-training-client/src/views/exam/detail/examDetail.vue

<template>
  <el-card>
    <div slot="header" style="text-align: center;">
      <b>{{ $t('exam.nameOfTestPaper') +': ' + examDetails.name }}</b>
    </div>
    <div style="margin:50px; overflow-y: auto;">
      <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height - 190 +'px' }">
        <p class="list-item">
          <span class="list-label">{{ $t('exam.examStartTime') +':' }}</span>
          <span v-if="examDetails.startTime" class="list-elem">
            {{ examDetails.startTime }} - {{ examDetails.endTime }}</span>
          <span v-else class="list-elem">{{ $t('exam.theExamIsReadyAnyTime') }}</span>
        </p>
        <p class="list-item">
          <span class="list-label">{{ $t('exam.testExplanation') + ':' }}</span>
          <span class="list-elem">{{ examDetails.remarks }}</span>
        </p>
        <p class="list-item">
          <span class="list-label">{{ $t('exam.examTimeAvailable') + ':' }}</span>
          <span class="list-elem">{{ parseInt(examDetails.duration) / 60 + $t('exam.minutes') }}</span>
        </p>
        <p class="list-item">
          <span class="list-label">{{ $t('exam.fullMarksInTheExam') + ':' }}</span>
          <span class="list-elem">{{ examDetails.fullPoint }}</span>
        </p>
        <p class="list-item">
          <span class="list-label">{{ $t('exam.passMarkTheExam') + ':' }}</span>
          <span class="list-elem">{{ examDetails.passingPoint }}</span>
        </p>
        <p class="list-item">
          <span class="list-label">{{ $t('exam.examinationRules') + ':' }}</span>
          <span class="list-elem">
            <p class="list-table">
              <el-table :data="examDetails.examDefinitionRulesVOList" border show-summary>
                <el-table-column prop="name" :label="this.$t('exam.trainingType')" width="180" />
                <el-table-column prop="num" :label="this.$t('exam.numberOfQuestions')" />
                <el-table-column prop="point" :label="this.$t('exam.score')" />
                <el-table-column prop="chapterIdLong" :label="this.$t('exam.totalScore')" />
              </el-table>
            </p>
          </span>
        </p>
      </el-scrollbar>
    </div>
    <div class="btn-start">
      <el-button :loading="loading" type="primary" @click="exmaStart">{{ $t('exam.startTheExam') }}</el-button>
      <el-button @click="back">{{ $t('global.back') }}</el-button>
    </div>
  </el-card>
</template>
<script>
import { examNotify } from '@/api/simulation';
import { getExamLessonDetail } from '@/api/management/exam';
import { generateExamList } from '@/api/management/userexam';
import { getPublishLessonDetail } from '@/api/jmap/lesson';
import { PermissionType } from '@/scripts/ConstDic';
import { getDetailList } from '@/api/management/dictionary';
import { mapGetters } from 'vuex';
import { launchFullscreen } from '@/utils/screen';
import { UrlConfig } from '@/router/index';

export default {
    name: 'ExamDetailView',
    data() {
        return {
            loading: false,
            examDetails: {
                lessonId: '',
                name: '',
                remarks: '',
                examDefinitionRulesVOList: [],
                startTime: '',
                endTime: '',
                fullPoint: '',
                passingPoint: '',
                duration: '',
                type: ''
            },
            typeList: [],
            examList: [],
            trainingOperateTypeMap: {}
        };
    },
    computed: {
        ...mapGetters('trainingList', [
            'trainingList'
        ]),
        height() {
            return this.$store.state.app.height - 50;
        }
    },
    watch: {
        '$route.params.examId': function (val) {
            this.loadInitPage(val);
        }
    },
    async mounted() {
        this.trainingOperateTypeMap = {};
        this.$Dictionary.stationControl().then(list => {
            this.trainingOperateTypeMap['01'] = list; // 控制权实训
        });
        this.$Dictionary.signalOperation().then(list => {
            this.trainingOperateTypeMap['02'] = list; // 信号机实训
        });
        this.$Dictionary.switchOperation().then(list => {
            this.trainingOperateTypeMap['03'] = list; // 道岔实训
        });
        this.$Dictionary.sectionOperation().then(list => {
            this.trainingOperateTypeMap['04'] = list; // 区段实训
        });
        this.$Dictionary.stationStandOperation().then(list => {
            this.trainingOperateTypeMap['05'] = list; // 站台实训
        });
        this.$Dictionary.trainPlanOperation().then(list => {
            this.trainingOperateTypeMap['06'] = list; // 行车计划实训
        });
        this.$Dictionary.trainOperation().then(list => {
            this.trainingOperateTypeMap['07'] = list; // 列车实训
        });
        await this.getList();
        this.loadInitPage(this.$route.params.examId);
    },
    methods: {
        async getList() {
            this.typeList = [];
            await getDetailList('training_type').then(res => {
                this.typeList = res.data;
            });
        },
        async loadInitPage(examId) {
            if (examId) {
                const res = await getExamLessonDetail(examId);
                this.examDetails = res.data;
                this.examDetails.examDefinitionRulesVOList.forEach((res, index) => {
                    res.chapterIdLong = Number(res.num) * Number(res.point);
                    this.typeList.forEach(v => {
                        if (res.trainingType == v.code) {
                            this.examDetails.examDefinitionRulesVOList[index].name = v.name;
                            if (res.operateType) {
                                this.trainingOperateTypeMap[res.trainingType].forEach(item => {
                                    if (item.code == res.operateType) {
                                        this.examDetails.examDefinitionRulesVOList[index].name = `${this.examDetails.examDefinitionRulesVOList[index].name}-${item.name}`;
                                        return;
                                    }
                                });
                            }
                        }
                    });
                });

            }
        },
        buy() {
            this.loading = true;
            getPublishLessonDetail({ id: this.examDetails.lessonId }).then((res) => {
                this.$router.push({
                    path: `${UrlConfig.trainingPlatform.pay}/${this.examDetails.lessonId}`,
                    query: { permissionType: PermissionType.EXAM, lessonId: this.examDetails.lessonId, prdCode: res.data.prdCode, mapId: res.data.mapId }
                });
            }).catch(() => {
                this.$messageBox(this.$t('error.obtainCourseDetailsFailed'));
                this.loading = false;
            });

        },
        async examDetail() {
            const data = this.examDetails;
            try {
                const response = await generateExamList(data.id);
                this.examList = response.data.userExamQuestionsVOs;
                this.userExam = response.data;
                const list = response.data.userExamQuestionsVOs;
                await this.$store.dispatch('exam/setUsedTime', this.userExam.usedTime);
                await this.$store.dispatch('exam/setTotalTime', this.userExam.duration);
                await this.$store.dispatch('trainingList/setTrainingList', list);
            } catch (error) {
                // 判断是否有考试权限，如果没有权限则跳到购买页面，否则报错
                if (error.code === 500004) {
                    this.$confirm( this.$t('tip.noCourseAuthority'), this.$t('tip.hint'), {
                        cancelButtonText: this.$t('global.cancel'),
                        confirmButtonText: this.$t('global.confirm'),
                        type: 'warning',
                        center: true
                    }).then(() => {
                        this.buy();
                    }).catch(() => { });
                } else if (error.code === 500005) {
                    this.$messageBox(this.$t('tip.notWithinTheScopeOfTheExamination'));
                } else {
                    this.$messageBox(`${error.message}`);
                }
            }
        },
        async exmaStart() {
            this.loading = true;
            await this.examDetail();
            if (this.examList.length) {
                examNotify({ examId: this.$route.params.examId }).then(resp => {
                    const query = {
                        group: resp.data,
                        trainingId: this.examList[0].trainingId,
                        userExamId: this.userExam.id,
                        examQuestionId: this.examList[0].id,
                        subSystem: this.$route.query.subSystem,
                        examId: this.$route.params.examId,
                        mapId: this.$route.query.mapId
                    };
                    this.$router.push({ path: `${UrlConfig.display}/exam`, query: query });
                    launchFullscreen();
                }).catch(error => {
                    this.loading = false;
                    this.$messageBox( this.$t('error.createSimulationFailed') + `: ${error.message}`);
                });
            } else {
                this.loading = false;
            }
        },
        back() {
            this.$router.push({ path: `${UrlConfig.trainingPlatform.course}/${this.$route.query.subSystem}`, query: {lessonId: this.examDetails.lessonId}});
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .menu li {
        border-right: solid white 1px;
    }

    ul {
        line-height: 22px;
        margin: 5px;
    }

    .noList {
        text-align: center;
        padding-top: 20px;
        font-size: 20px;
    }

    .btn-buy {
        width: 100%;
        display: flex;
        justify-content: center;
        padding-right: 50px;
        transform: translateY(-30px);
    }

    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    /deep/ {
        .el-table__footer-wrapper {
            .is-leaf:nth-child(3) {
                font-size: 0;
            }
        }
    }

    .title {
        font-weight: bold
    }

    .list-item {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .list-label {
        display: -moz-inline-box;
        display: inline-block;
        text-align: right;
        width: 120px;
    }

    .list-table {
        padding-top: 10px;
        padding-left: 120px;
        width: calc(100%);
    }

    .list-elem {
        color: #808080 !important;
    }

    .btn-start {
        position: relative;
        text-align: center;
        justify-content: center;
        transform: translateY(-20px);
    }
</style>