423 lines
14 KiB
Vue
423 lines
14 KiB
Vue
<template>
|
||
<div v-drag class="reminder-drag">
|
||
<div ref="drapBox" class="reminder-box">
|
||
<div class="tip-title">
|
||
<i v-show="isShrink" class="icon el-icon-minus" @click="shrink" />
|
||
<i v-show="!isShrink" class="icon el-icon-plus" @click="shrink" />
|
||
<p v-if="!isShrink" style="color: #fff;">
|
||
<span class="time-label">{{ $t('display.exam.examTime') }}</span>
|
||
|
||
<span class="time-elem">{{ formatRemainTime }}</span>
|
||
</p>
|
||
<p v-if="isShrink" style="color: #fff;">
|
||
<span>{{ examName }}</span>
|
||
</p>
|
||
</div>
|
||
<div ref="dragBody" class="tip-body-box">
|
||
<div v-show="detailShow" class="tip-body">
|
||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||
<el-tree
|
||
ref="treeQuestion"
|
||
:data="trainingList"
|
||
node-key="id"
|
||
highlight-current
|
||
@node-click="getTrainDetail"
|
||
>
|
||
<span slot-scope="{ node, data }">
|
||
<span :style="{color: data.usedTime !== undefined ? 'green':''}"> {{ trainingList.indexOf(data)+1 }}.{{
|
||
data.trainingName }}
|
||
</span>
|
||
</span>
|
||
</el-tree>
|
||
</el-scrollbar>
|
||
</div>
|
||
<div v-show="!detailShow" class="tip-body">
|
||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||
<p class="list-item">
|
||
<span class="list-label">{{ $t('display.exam.questionTitle') }}</span>
|
||
<span class="list-elem">{{ courseModel.name }}</span>
|
||
</p>
|
||
<p class="list-item">
|
||
<span class="list-label">{{ $t('display.exam.bestTime') }}</span>
|
||
<span class="list-elem">{{ courseModel.minDuration }} {{ $t('display.seconds') }} </span>
|
||
</p>
|
||
<p class="list-item">
|
||
<span class="list-label">{{ $t('display.exam.maximumTime') }}</span>
|
||
<span class="list-elem">{{ courseModel.maxDuration }} {{ $t('display.seconds') }} </span>
|
||
</p>
|
||
<p class="list-item">
|
||
<span class="list-label"> {{ $t('display.exam.trainingInstructions') }}</span>
|
||
<span class="list-elem">{{ courseModel.remarks }}</span>
|
||
</p>
|
||
</el-scrollbar>
|
||
</div>
|
||
<div class="tip-foot">
|
||
<div v-show="!detailShow" class="foot-detail">
|
||
<el-button class="btn" @click="backList">{{ $t('display.exam.viewQuestions') }}</el-button>
|
||
<el-button v-if="!isFirst" class="btn" type="primary" @click="lastExam">{{ $t('display.exam.prev') }}</el-button>
|
||
<el-button v-if="!isLast" class="btn" type="primary" @click="nextExam">{{ $t('display.exam.next') }}</el-button>
|
||
<el-button v-if="isLast" class="btn" type="primary" @click="overExam">{{ $t('display.exam.submitExaminationPaper') }}</el-button>
|
||
</div>
|
||
<div v-show="detailShow" class="foot-submit">
|
||
<el-button class="btn" type="primary" @click="overExam">{{ $t('display.exam.submitExaminationPaper') }}</el-button>
|
||
</div>
|
||
<p style="color: #000; float: left;">
|
||
<span class="time-label">{{ $t('display.exam.examTime') }}</span>
|
||
<span class="time-elem">{{ formatRemainTime }}</span>
|
||
</p>
|
||
</div>
|
||
<div class="drag-right" />
|
||
<div class="drag-left" />
|
||
<div class="drag-bottom" />
|
||
<div class="drag-top" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from 'vuex';
|
||
import { timeFormat } from '@/utils/date';
|
||
import { refreshExamList } from '@/api/management/userexam';
|
||
import { getTrainingDetail } from '@/api/jmap/training';
|
||
import { launchFullscreen } from '@/utils/screen';
|
||
|
||
export default {
|
||
name: 'TipExamList',
|
||
components: {
|
||
},
|
||
data() {
|
||
return {
|
||
training: {
|
||
id: '',
|
||
name: '',
|
||
remarks: ''
|
||
},
|
||
isShrink: true,
|
||
examName: '',
|
||
courseModel: {
|
||
id: '',
|
||
name: '',
|
||
maxDuration: '',
|
||
minDuration: '',
|
||
remarks: '',
|
||
updateTime: ''
|
||
},
|
||
detailShow: false,
|
||
examIndex: 0,
|
||
scanInter:null
|
||
};
|
||
},
|
||
computed: {
|
||
...mapGetters('trainingList', [
|
||
'trainingList'
|
||
]),
|
||
remainTime() {
|
||
return this.$store.state.exam.totalTime - this.$store.state.exam.usedTime;
|
||
},
|
||
formatRemainTime() {
|
||
return this.remainTime >= 0 ? timeFormat(this.remainTime) : '';
|
||
},
|
||
isFirst() {
|
||
return this.examIndex == 0;
|
||
},
|
||
isLast() {
|
||
return this.examIndex == this.trainingList.length - 1;
|
||
}
|
||
},
|
||
watch: {
|
||
'$store.state.map.mapViewLoadedCount': function() {
|
||
this.$store.dispatch('exam/stopCountTime');
|
||
this.loadInitData();
|
||
this.$store.dispatch('exam/countUsedTime');
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
this.clearScanCommit();
|
||
},
|
||
methods: {
|
||
backList() {
|
||
this.detailShow = true;
|
||
this.$nextTick(() => {
|
||
this.$refs.treeQuestion.setCurrentKey(this.$route.query.examQuestionId); // value 绑定的node-key
|
||
});
|
||
},
|
||
// 获取试题详情
|
||
selectedTraining(obj) {
|
||
this.trainingList.forEach((item, index) => {
|
||
if (item.id == obj.id) {
|
||
this.examIndex = index;
|
||
return;
|
||
}
|
||
});
|
||
if (obj) {
|
||
getTrainingDetail(obj.trainingId).then(res => {
|
||
this.courseModel = {
|
||
id: res.data.id,
|
||
name: res.data.name,
|
||
maxDuration: res.data.maxDuration,
|
||
remarks: res.data.remarks,
|
||
minDuration: res.data.minDuration,
|
||
updateTime: res.data.updateTime
|
||
};
|
||
this.$store.dispatch('exam/setCenter ', res.data.locateDeviceCode);
|
||
}).catch(error => {
|
||
this.$message.error(this.$t('display.exam.getTestInformation') + ':' + error.message);
|
||
});
|
||
}
|
||
|
||
this.jump(obj);
|
||
},
|
||
getTrainDetail(obj) {
|
||
this.selectedTraining(obj);
|
||
this.detailShow = false;
|
||
},
|
||
// 获取试题列表
|
||
async loadInitData() {
|
||
// 刷新考试列表
|
||
refreshExamList(this.$route.query.userExamId).then(response => {
|
||
this.examName = response.data.examName;
|
||
this.$store.commit('exam/setUsedTime', response.data.usedTime);
|
||
this.$store.commit('exam/setTotalTime', response.data.duration);
|
||
this.$store.commit('trainingList/setTrainingList', response.data.userExamQuestionsVOs);
|
||
const obj = {
|
||
trainingId: '',
|
||
id: ''
|
||
};
|
||
|
||
if (this.$route.query.examQuestionId && this.$route.query.trainingId) {
|
||
obj.trainingId = this.$route.query.trainingId;
|
||
obj.id = this.$route.query.examQuestionId;
|
||
} else {
|
||
obj.trainingId = response.data.userExamQuestionsVOs[0].trainingId;
|
||
obj.id = response.data.userExamQuestionsVOs[0].id;
|
||
}
|
||
this.selectedTraining(obj);
|
||
this.scanCommit();
|
||
}).catch(error => {
|
||
// 如果时50009则表示考试已完成，不能再次进行y
|
||
if (error.code === 500009) {
|
||
this.$router.replace({ path: `/trainingPlatform/result/${this.$route.params.userExamId}`, query: { subSystem: this.$route.query.subSystem, mapId:this.$route.query.mapId } });
|
||
} else {
|
||
this.$messageBox(this.$t('display.exam.refreshListError'));
|
||
|
||
}
|
||
});
|
||
},
|
||
scanCommit() {
|
||
this.clearScanCommit();
|
||
this.scanInter = setInterval(()=>{
|
||
if (this.remainTime < 0) {
|
||
this.$message.success(this.$t('display.exam.autoSubmit'));
|
||
this.clearScanCommit();
|
||
this.submit();
|
||
}
|
||
}, 1000);
|
||
},
|
||
clearScanCommit() {
|
||
clearInterval(this.scanInter);
|
||
this.scanInter = null;
|
||
},
|
||
nextExam() {
|
||
const obj = {
|
||
trainingId: '',
|
||
id: ''
|
||
};
|
||
if (this.trainingList[this.examIndex + 1] && this.trainingList[this.examIndex + 1].trainingId) {
|
||
obj.trainingId = this.trainingList[this.examIndex + 1].trainingId;
|
||
obj.id = this.trainingList[this.examIndex + 1].id;
|
||
this.examIndex = this.examIndex + 1;
|
||
}
|
||
if (obj.trainingId && obj.id) {
|
||
this.selectedTraining(obj);
|
||
}
|
||
},
|
||
lastExam() {
|
||
const obj = {
|
||
trainingId: '',
|
||
id: ''
|
||
};
|
||
if (this.trainingList[this.examIndex - 1] && this.trainingList[this.examIndex - 1].trainingId) {
|
||
obj.trainingId = this.trainingList[this.examIndex - 1].trainingId;
|
||
obj.id = this.trainingList[this.examIndex - 1].id;
|
||
this.examIndex = this.examIndex - 1;
|
||
}
|
||
if (obj.trainingId && obj.id) {
|
||
this.selectedTraining(obj);
|
||
}
|
||
},
|
||
jump(obj) {
|
||
const query = {
|
||
group: this.$route.query.group,
|
||
userExamId: this.$route.query.userExamId,
|
||
trainingId: obj.trainingId,
|
||
examQuestionId: obj.id,
|
||
subSystem: this.$route.query.subSystem,
|
||
examId: this.$route.query.examId,
|
||
mapId: this.$route.query.mapId
|
||
};
|
||
this.$router.replace({ path: '/display/exam', query: query });
|
||
this.$emit('refresh');
|
||
launchFullscreen();
|
||
},
|
||
overExam() {
|
||
this.$store.dispatch('exam/isOver').then(isOver => {
|
||
if (isOver) {
|
||
this.submit();
|
||
} else {
|
||
this.$confirm(this.$t('display.exam.cancleExam'), this.$t('global.tips'), {
|
||
cancelButtonText: this.$t('global.cancel'),
|
||
confirmButtonText: this.$t('global.confirm'),
|
||
type: 'warning',
|
||
center: true
|
||
}).then(() => {
|
||
this.submit();
|
||
}).catch(() => {
|
||
});
|
||
}
|
||
});
|
||
},
|
||
submit() {
|
||
this.$store.dispatch('exam/over').then(() => {
|
||
this.$store.dispatch('trainingList/clearTrainingList');
|
||
this.$router.replace({ path: `/trainingPlatform/result/${this.$route.query.userExamId}`, query: { subSystem: this.$route.query.subSystem, mapId:this.$route.query.mapId } });
|
||
});
|
||
},
|
||
shrink() {
|
||
const height = this.$refs.dragBody.offsetHeight + 40;
|
||
const top = this.$refs.drapBox.style.top;
|
||
if (this.isShrink) {
|
||
this.$refs.drapBox.style.height = '40px';
|
||
this.$refs.drapBox.style.top = '';
|
||
this.isShrink = false;
|
||
} else {
|
||
this.$refs.drapBox.style.height = height + 'px';
|
||
this.$refs.drapBox.style.top = top;
|
||
this.isShrink = true;
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||
@import "src/styles/mixin.scss";
|
||
|
||
.tip-body-box {
|
||
position: relative;
|
||
height: 430px;
|
||
}
|
||
|
||
.reminder-box {
|
||
position: absolute;
|
||
float: left;
|
||
left: 15px;
|
||
bottom: 15px;
|
||
width: 650px;
|
||
height: 470px;
|
||
background-color: #fff;
|
||
border-radius: 5px;
|
||
overflow: hidden;
|
||
z-index: 10;
|
||
font-size: 18px;
|
||
|
||
.tip-title {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: row-reverse;
|
||
background-color: #409EFF;
|
||
border-radius: 5px 5px 0 0;
|
||
justify-content: space-between;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.drag-right,
|
||
.drag-left {
|
||
width: 10px;
|
||
cursor: e-resize;
|
||
background-color: yellow;
|
||
height: 100%;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
opacity: 0;
|
||
}
|
||
|
||
.drag-left {
|
||
left: 0;
|
||
}
|
||
|
||
.drag-bottom {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 10px;
|
||
cursor: s-resize;
|
||
background-color: yellow;
|
||
opacity: 0;
|
||
}
|
||
|
||
.drag-top {
|
||
position: absolute;
|
||
top: -45px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 10px;
|
||
cursor: s-resize;
|
||
background-color: yellow;
|
||
opacity: 0;
|
||
}
|
||
|
||
.tip-body {
|
||
height: 366px;
|
||
padding: 10px;
|
||
|
||
.list-label {
|
||
width: 105px;
|
||
}
|
||
}
|
||
|
||
.tip-foot {
|
||
width: 100%;
|
||
position: absolute;
|
||
right: 0px;
|
||
bottom: 0px;
|
||
background-color: #fff;
|
||
padding: 10px 0 10px 10px;
|
||
|
||
.foot-detail {
|
||
height: 100%;
|
||
float: right;
|
||
margin-top: 9px;
|
||
padding-right: 15px;
|
||
}
|
||
|
||
.foot-submit {
|
||
float: right;
|
||
margin-top: 9px;
|
||
padding-right: 15px;
|
||
}
|
||
}
|
||
|
||
.icon {
|
||
float: right;
|
||
margin-right: 10px;
|
||
cursor: pointer;
|
||
background-color: #f3f3f3;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/deep/ {
|
||
.el-tree-node__content {
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||
background-color: #d6e5f7;
|
||
}
|
||
}
|
||
}
|
||
</style>
|