321 lines
9.7 KiB
Vue
321 lines
9.7 KiB
Vue
<template>
|
||
<div>
|
||
<div class="display-card" :style="{top: offset + 'px'}">
|
||
<el-row style="vertical-align:middle; ">
|
||
<span class="display-time">{{ formatUsedTime }}</span>
|
||
<el-select v-if="showSelectStation" v-model="showStation" style="width: 100px;position: fixed; right: 10px;" size="small" @change="switchStationMode">
|
||
<el-option v-for="item in stationList" :key="item.value" :label="item.name" :value="item.value" />
|
||
</el-select>
|
||
</el-row>
|
||
</div>
|
||
<div class="display-draft" :style="{bottom: offsetBottom + 'px'}">
|
||
<el-button-group>
|
||
<el-button type="success" :disabled="isDisable" :loading="startLoading" @click="start">{{ $t('display.startBtn') }}</el-button>
|
||
<el-button type="danger" :disabled="!isDisable" @click="end">{{ $t('display.endBtn') }}</el-button>
|
||
<el-button type="primary" class="back" @click="back">{{ $t('display.backBtn') }}</el-button>
|
||
</el-button-group>
|
||
</div>
|
||
<tip-exam-list :offset-bottom="offsetBottom" @refresh="refresh" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import TipExamList from './tipExamList';
|
||
import { Notification } from 'element-ui';
|
||
import { startTrainingNew } from '@/api/jmap/training';
|
||
import { timeFormat } from '@/utils/date';
|
||
import { refreshExamList, finishOneExamQuestion } from '@/api/management/userexam';
|
||
import { launchFullscreen } from '@/utils/screen';
|
||
|
||
export default {
|
||
name: 'MenuExam',
|
||
components: {
|
||
TipExamList
|
||
},
|
||
props: {
|
||
group: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
offset: {
|
||
type: Number,
|
||
required: true
|
||
},
|
||
offsetBottom: {
|
||
type: Number,
|
||
required: true
|
||
},
|
||
showSelectStation: {
|
||
type: Boolean,
|
||
default() {
|
||
return false;
|
||
}
|
||
},
|
||
stationList: {
|
||
type: Array,
|
||
default() {
|
||
return [];
|
||
}
|
||
},
|
||
showStation: {
|
||
type: String,
|
||
default() {
|
||
return '';
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
isDisable: false,
|
||
startLoading: false,
|
||
training: {
|
||
id: '',
|
||
name: '',
|
||
remarks: ''
|
||
}
|
||
};
|
||
},
|
||
computed: {
|
||
formatUsedTime() {
|
||
return timeFormat(this.$store.state.training.usedTime);
|
||
}
|
||
},
|
||
watch: {
|
||
'$store.state.map.mapViewLoadedCount': function() {
|
||
this.$store.dispatch('exam/countUsedTime');
|
||
}
|
||
},
|
||
methods: {
|
||
tipInfo(opt) {
|
||
if (opt && opt.hasOwnProperty('color') && opt.hasOwnProperty('message')) {
|
||
const h = this.$createElement;
|
||
this.$notify({
|
||
title: this.$t('global.tips'),
|
||
message: h('i', { style: 'color:' + opt.color }, this.$t('display.exam.startTestOperateTip'))
|
||
});
|
||
}
|
||
},
|
||
start() {
|
||
this.$store.dispatch('menuOperation/setButtonOperation', null);
|
||
this.startLoading = true;
|
||
if (this.$route.query.trainingId) {
|
||
this.isDisable = true;
|
||
startTrainingNew({ id: this.$route.query.trainingId }, this.group).then(response => {
|
||
this.$store.dispatch('training/examModeStart');
|
||
this.$store.dispatch('map/clearJlmapTrainView').then(() => {
|
||
this.$store.dispatch('training/setMapDefaultState').then(() => {
|
||
this.$store.dispatch('training/emitTipFresh');
|
||
});
|
||
});
|
||
this.startLoading = false;
|
||
}).catch(() => {
|
||
this.isDisable = false;
|
||
this.startLoading = false;
|
||
});
|
||
} else {
|
||
this.startLoading = true;
|
||
this.$messageBox(this.$t('display.exam.selectTest'));
|
||
}
|
||
},
|
||
end() {
|
||
if (this.$route.query.trainingId) {
|
||
this.isDisable = false;
|
||
if (this.$store.state.training.started) {
|
||
const model = {
|
||
id: this.$route.query.examQuestionId,
|
||
usedTime: this.$store.state.training.usedTime,
|
||
group: this.group
|
||
};
|
||
|
||
this.$store.dispatch('training/end', null);
|
||
finishOneExamQuestion(model).then(response => {
|
||
this.$store.dispatch('training/emitTipFresh');
|
||
this.init();
|
||
}).catch(() => {
|
||
this.$store.dispatch('training/emitTipFresh');
|
||
this.$messageBox(this.$t('display.exam.endTrainingError'));
|
||
});
|
||
} else {
|
||
this.isDisable = true;
|
||
this.$messageBox(this.$t('display.exam.startTestTip'));
|
||
}
|
||
}
|
||
},
|
||
back() {
|
||
this.$confirm(this.$t('display.exam.endTestTip'), this.$t('global.tips'), {
|
||
confirmButtonText: this.$t('global.confirm'),
|
||
cancelButtonText: this.$t('global.cancel'),
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.$emit('quit');
|
||
this.$router.go(-1);
|
||
Notification.closeAll();
|
||
}).catch(() => {
|
||
|
||
});
|
||
},
|
||
init() {
|
||
launchFullscreen();
|
||
// 刷新考试列表
|
||
refreshExamList(this.$route.query.userExamId).then(response => {
|
||
this.$store.dispatch('exam/setUsedTime', response.data.usedTime);
|
||
this.$store.dispatch('exam/setTotalTime', response.data.duration);
|
||
this.$store.dispatch('trainingList/setTrainingList', response.data.userExamQuestionsVOs).then(response => { });
|
||
}).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'));
|
||
}
|
||
});
|
||
},
|
||
refresh() {
|
||
this.isDisable = false;
|
||
this.$store.dispatch('training/end', null);
|
||
},
|
||
switchStationMode(val) {
|
||
this.$emit('switchStationMode', val);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||
@import "src/styles/mixin.scss";
|
||
|
||
.display-card {
|
||
z-index: 9;
|
||
display: inline;
|
||
position: absolute;
|
||
// float: left;
|
||
left: 160px;
|
||
}
|
||
|
||
.display-time {
|
||
background-color: white;
|
||
display: -moz-inline-box;
|
||
display: inline-block;
|
||
border: 1px solid lightskyblue;
|
||
width: 100px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
font-family: "Microsoft" !important;
|
||
font-size: 18px !important;
|
||
font-weight: bold;
|
||
color: black;
|
||
}
|
||
|
||
.display-draft {
|
||
position: absolute;
|
||
float: right;
|
||
right: 15px;
|
||
bottom: 15px;
|
||
|
||
.back {
|
||
z-index: 100000;
|
||
}
|
||
}
|
||
|
||
.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: 500;
|
||
/* transition: height 0.5s; */
|
||
font-size: 18px;
|
||
|
||
.tip-title {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: row-reverse;
|
||
background-color: #409EFF;
|
||
cursor: move;
|
||
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;
|
||
}
|
||
|
||
.tip-body {
|
||
height: 366px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.tip-foot {
|
||
width: 100%;
|
||
margin-right: 10px;
|
||
position: absolute;
|
||
right: 0px;
|
||
bottom: 0px;
|
||
background-color: #fff;
|
||
padding: 10px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: row-reverse;
|
||
|
||
.btn {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
.icon {
|
||
float: right;
|
||
margin-right: 10px;
|
||
cursor: pointer;
|
||
background-color: #d2d2d2;
|
||
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>
|