rt-sim-training-client/src/views/exam/detail/examDetail.vue
2020-05-14 14:39:38 +08:00

407 lines
16 KiB
Vue

<template>
<div class="joylink-card">
<div class="card-title">
<b>{{ $t('exam.nameOfTestPaper') +': ' + examDetails.name }}</b>
</div>
<div class="card_content">
<el-scrollbar wrap-class="scrollbar-wrapper">
<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" v-html="parseInt(examDetails.duration) / 60 + $t('exam.minutes')" />
</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>
<div class="btn-start">
<el-button :disabled="disabled" type="primary" @click="exmaStart">{{ $t('exam.startTheExam') }}</el-button>
<el-button :disabled="disabled" @click="back">{{ $t('global.back') }}</el-button>
</div>
</el-scrollbar>
</div>
</div>
</template>
<script>
import { examNotify, examNotifyNew } 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 '@/scripts/ConstDic';
import LangStorage from '@/utils/lang';
import { getPublishMapInfo } from '@/api/jmap/map';
import ConstConfig from '@/scripts/ConstConfig';
import CMD from '@/scripts/cmdPlugin/CommandEnum';
export default {
name: 'ExamDetailView',
data() {
return {
disabled: false,
examDetails: {
lessonId: '',
name: '',
remarks: '',
examDefinitionRulesVOList: [],
startTime: '',
endTime: '',
fullPoint: '',
passingPoint: '',
duration: 0,
type: ''
},
typeList: [],
examList: [],
trainingOperateTypeMap: {},
drawWay: false,
lineCode: '' // 线路对应的皮肤
};
},
computed: {
...mapGetters('trainingList', [
'trainingList'
])
},
watch: {
'$route.params.examId': function (val) {
this.loadInitPage(val);
}
},
async mounted() {
this.loadInitPage(this.$route.params.examId);
},
methods: {
async getList() {
if (this.drawWay) {
this.typeList = [];
for (const val in ConstConfig.ConstSelect.trainingDeviceType) {
this.typeList.push({name: LangStorage.getLang() == 'en' ? ConstConfig.ConstSelect.trainingDeviceType[val].enlabel : ConstConfig.ConstSelect.trainingDeviceType[val].label, code: val});
}
this.trainingOperateTypeMap = {
Switch: [],
Section: [],
Signal: [],
Stand: [],
Station: [],
ControlConvertMenu: [],
TrainWindow: []
};
let ele;
for ( ele in CMD['Switch']) {
this.trainingOperateTypeMap['Switch'].push(CMD['Switch'][ele]);
}
for ( ele in CMD['Section']) {
this.trainingOperateTypeMap['Section'].push(CMD['Section'][ele]);
}
for ( ele in CMD['Signal']) {
this.trainingOperateTypeMap['Signal'].push(CMD['Signal'][ele]);
}
for ( ele in CMD['Stand']) {
this.trainingOperateTypeMap['Stand'].push(CMD['Stand'][ele]);
}
for ( ele in CMD['Station']) {
this.trainingOperateTypeMap['Station'].push(CMD['Station'][ele]);
}
for ( ele in CMD['ControlConvertMenu']) {
this.trainingOperateTypeMap['ControlConvertMenu'].push(CMD['ControlConvertMenu'][ele]);
}
for ( ele in CMD['Train']) {
this.trainingOperateTypeMap['TrainWindow'].push(CMD['Train'][ele]);
}
} else {
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; // 列车实训
});
const res = await getDetailList('training_type');
this.typeList = res.data;
if (LangStorage.getLang() == 'en' && this.typeList) {
this.typeList.forEach(item => {
switch (item.code) {
case '01':
item.name = 'Control permission operation';
break;
case '02':
item.name = 'Signalling machine operation';
break;
case '03':
item.name = 'Turnout operation';
break;
case '04':
item.name = 'Section operation';
break;
case '05':
item.name = 'Platform operation';
break;
case '06':
item.name = 'Train scheduling operation';
break;
case '07':
item.name = 'Train operation';
break;
case '08':
item.name = 'Temporary speed limit operation of the whole line';
break;
}
});
}
}
},
async loadInitPage(examId) {
if (examId) {
try {
const response = await getPublishMapInfo(this.$route.query.mapId);
if (response.data) {
this.drawWay = response.data.drawWay;
this.lineCode = response.data.lineCode;
this.typeList = [];
await this.getList();
}
} catch (e) {
this.$message.error(this.$t('error.getMapDataFailed'));
}
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 || item.value) === res.operateType) {
this.examDetails.examDefinitionRulesVOList[index].name = `${this.examDetails.examDefinitionRulesVOList[index].name}-${item.name || item.label}`;
return;
}
});
}
}
});
});
}
},
buy() {
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, prdType: res.data.prdType, mapId: res.data.mapId }
});
}).catch(() => {
this.$messageBox(this.$t('error.obtainCourseDetailsFailed'));
});
},
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.disabled = true;
await this.examDetail();
if (this.examList.length && !this.drawWay) {
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,
lineCode: this.lineCode
};
this.$router.push({ path: `${UrlConfig.display}/exam`, query: query });
launchFullscreen();
}).catch(error => {
this.disabled = false;
this.$messageBox( this.$t('error.createSimulationFailed') + `: ${error.message}`);
});
} else if (this.examList.length && this.drawWay) {
examNotifyNew({ 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,
lineCode: this.lineCode
};
this.$router.push({ path: `${UrlConfig.displayNew}/exam`, query: query });
launchFullscreen();
}).catch(error => {
this.disabled = false;
this.$messageBox( this.$t('error.createSimulationFailed') + `: ${error.message}`);
});
} else {
this.disabled = false;
}
},
back() {
this.disabled = true;
setTimeout(() => {
this.$router.push({ path: `${UrlConfig.trainingPlatform.course}/${this.$route.query.subSystem}`, query: {lessonId: this.examDetails.lessonId}});
}, 100);
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.joylink-card{
height: 100%;
overflow: hidden;
.card-title{
height: 47px;
line-height: 47px;
text-align: center;
border-bottom: 1px solid #e6e6e6;
}
.card_content{
padding:50px;
padding-right: 0;
height: 100%;
}
}
.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% - 80px);
}
.list-elem {
color: #808080 !important;
}
.btn-start {
text-align: center;
margin-bottom: 20px;
}
</style>