320 lines
11 KiB
Vue
320 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<div class="display-card" :style="{top: offset + 'px'}">
|
|
<el-row>
|
|
<el-radio-group v-model="demoMode" class="mode" size="small">
|
|
<el-radio-button :label="TrainingMode.TEACH">{{ $t('display.lesson.teachingMode') }}</el-radio-button>
|
|
<el-radio-button :label="TrainingMode.PRACTICE">{{ $t('display.lesson.practiceMode') }}</el-radio-button>
|
|
<el-radio-button :label="TrainingMode.TEST">{{ $t('display.lesson.testMode') }}</el-radio-button>
|
|
</el-radio-group>
|
|
<span class="display-time">{{ formatUsedTime }}</span>
|
|
<span v-if="demoMode === TrainingMode.TEST" class="display-score">{{ $t('display.lesson.score') }}{{ formatScore }}</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 id="teachGroupButton" class="display-draft" :style="{bottom: offsetBottom + 'px'}">
|
|
<el-button-group>
|
|
<el-button type="success" class="start" :disabled="isDisable || dataError" :loading="startLoading" @click="start">{{ $t('display.startBtn') }}</el-button>
|
|
<el-button type="danger" class="end" :disabled="!isDisable || dataError" @click="end">{{ $t('display.endBtn') }}</el-button>
|
|
<el-button type="primary" :disabled="backDisable" class="back" @click="back">{{ $t('display.backBtn') }}</el-button>
|
|
</el-button-group>
|
|
</div>
|
|
<tip-training-detail :training-obj="trainingObj" :offset-bottom="offsetBottom" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TipTrainingDetail from './tipTrainingDetail';
|
|
import { mapGetters } from 'vuex';
|
|
import { Notification } from 'element-ui';
|
|
import { startTrainingNew, endTrainingNew } from '@/api/jmap/training';
|
|
import { trainingNotifyNew } from '@/api/simulation';
|
|
import { TrainingMode } from '@/scripts/ConstDic';
|
|
import { timeFormat } from '@/utils/date';
|
|
import { UrlConfig } from '@/scripts/ConstDic';
|
|
|
|
export default {
|
|
name: 'MenuLesson',
|
|
components: {
|
|
TipTrainingDetail
|
|
},
|
|
props: {
|
|
group: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
trainingObj: {
|
|
type: Object,
|
|
default() {
|
|
return null;
|
|
}
|
|
},
|
|
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 '';
|
|
}
|
|
},
|
|
dataError: {
|
|
type: Boolean,
|
|
default() {
|
|
return false;
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
timeInterval: null,
|
|
TrainingMode: TrainingMode,
|
|
demoMode: TrainingMode.TEACH,
|
|
isDisable: false,
|
|
backDisable: false,
|
|
startLoading: false
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters('training', [
|
|
'score',
|
|
'started',
|
|
'usedTime',
|
|
'basicInfo'
|
|
]),
|
|
formatScore() {
|
|
return this.score;
|
|
},
|
|
formatUsedTime() {
|
|
return timeFormat(this.usedTime);
|
|
}
|
|
},
|
|
watch: {
|
|
demoMode: function (val) {
|
|
this.$store.dispatch('training/end', null);
|
|
this.$store.dispatch('training/reset');
|
|
this.$store.dispatch('training/emitTipFresh');
|
|
this.$store.dispatch('menuOperation/setButtonOperation', null);
|
|
|
|
this.isDisable = false;
|
|
},
|
|
'$store.state.map.mapViewLoadedCount': function (val) {
|
|
this.$store.dispatch('training/end', null);
|
|
this.$store.dispatch('training/reset');
|
|
this.$store.dispatch('training/emitTipFresh');
|
|
this.$store.dispatch('menuOperation/setButtonOperation', null);
|
|
this.isDisable = false;
|
|
},
|
|
'$store.state.training.operateErrMsg': function (val) {
|
|
this.tipInfo({ color: val.color, message: val.errMsg });
|
|
}
|
|
},
|
|
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 }, opt.message)
|
|
});
|
|
}
|
|
},
|
|
start() {
|
|
// 清空按钮操作
|
|
this.$store.dispatch('menuOperation/setButtonOperation', null);
|
|
this.startLoading = true;
|
|
if (this.trainingObj && this.trainingObj.id) {
|
|
this.isDisable = true;
|
|
startTrainingNew(this.trainingObj, this.group).then(response => {
|
|
this.$store.dispatch('map/clearJlmapTrainView').then(() => {
|
|
this.$store.dispatch('training/teachModeStart', this.demoMode);
|
|
this.$store.dispatch('training/setMapDefaultState').then(() => {
|
|
this.$store.dispatch('training/emitTipFresh');
|
|
this.tipInfo({ color: 'green', message: this.$t('global.pleaseOpearte') });
|
|
});
|
|
});
|
|
this.startLoading = false;
|
|
}).catch(() => {
|
|
this.isDisable = false;
|
|
this.startLoading = false;
|
|
});
|
|
} else {
|
|
this.startLoading = false;
|
|
this.$messageBox(this.$t('display.lesson.selectTraining'));
|
|
}
|
|
},
|
|
endCommit() {
|
|
this.$store.dispatch('training/setStopCountTime');
|
|
const mode = {
|
|
mode: this.demoMode,
|
|
id: this.trainingObj.id,
|
|
lessonId: this.$route.query.lessonId,
|
|
usedTime: this.usedTime
|
|
};
|
|
|
|
endTrainingNew(mode, this.group).then(response => {
|
|
const data = response.data;
|
|
this.$store.dispatch('training/judgeFinish', data).then(rsp => {
|
|
this.$store.dispatch('training/emitTipFresh');
|
|
});
|
|
}).catch(() => {
|
|
this.$messageBox(this.$t('display.lesson.endTrainingError'));
|
|
});
|
|
},
|
|
end() {
|
|
// 如果是测试模式需要获取最终的得分
|
|
if (this.trainingObj && this.trainingObj.id) {
|
|
if (this.started) {
|
|
this.isDisable = false;
|
|
this.$store.dispatch('training/isStepOver').then((rnt) => {
|
|
if (rnt) {
|
|
this.endCommit();
|
|
} else {
|
|
this.backDisable = true;
|
|
this.$confirm(this.$t('display.lesson.endTrainingTip'), this.$t('global.tips'), {
|
|
cancelButtonText: this.$t('global.cancel'),
|
|
confirmButtonText: this.$t('global.confirm'),
|
|
type: 'warning',
|
|
center: true,
|
|
zIndex: 9999
|
|
}).then(() => {
|
|
this.backDisable = false;
|
|
this.$store.dispatch('training/end', null);
|
|
this.$store.dispatch('training/setScore', 0);
|
|
this.$store.dispatch('training/emitTipFresh');
|
|
}).catch(() => {
|
|
this.isDisable = true;
|
|
this.backDisable = false;
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
this.$messageBox(this.$t('display.lesson.startTrainingTip'));
|
|
}
|
|
}
|
|
},
|
|
back() {
|
|
this.$emit('quit');
|
|
Notification.closeAll();
|
|
|
|
if (this.$route.params.mode == 'record') {
|
|
/** 如果是演示返回时，需要重新创建仿真*/
|
|
trainingNotifyNew({ trainingId: this.$route.query.trainingId }).then(resp => {
|
|
this.$router.push({ path: `${UrlConfig.lesson.record}/${this.$route.query.trainingId}/${this.$route.query.trainingName}`, query: { group: resp.data } });
|
|
}).catch(error => {
|
|
this.$messageBox(`${this.$t('display.lesson.createSimulationError')}: ${error.message}`);
|
|
});
|
|
} else {
|
|
history.go(-1);
|
|
}
|
|
},
|
|
handelGroupButtonTranslate(flag) {
|
|
// const buttons = document.getElementById('teachGroupButton');
|
|
// if (flag) {
|
|
// buttons.style.transform = 'translateX(-400px)';
|
|
// } else {
|
|
// buttons.style.transform = 'translateX(0px)';
|
|
// }
|
|
},
|
|
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-block;
|
|
position: absolute;
|
|
left: 160px;
|
|
height: 32px;
|
|
}
|
|
|
|
.display-card .el-row {
|
|
line-height: 32px !important;
|
|
}
|
|
|
|
.display-mode {
|
|
display: -moz-inline-box;
|
|
display: inline-block;
|
|
|
|
/deep/ .el-radio-button__inner {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.display-time {
|
|
background-color: white;
|
|
display: -moz-inline-box;
|
|
display: inline-block;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
border: 1px solid lightskyblue;
|
|
width: 100px;
|
|
height: 32px;
|
|
line-height: 24px;
|
|
border-radius: 4px;
|
|
margin-left: 10px;
|
|
font-family: "Microsoft" !important;
|
|
font-size: 18px !important;
|
|
color: black;
|
|
}
|
|
|
|
.display-score {
|
|
background-color: black;
|
|
display: -moz-inline-box;
|
|
display: inline-block;
|
|
text-align: left;
|
|
border: 1px solid lightskyblue;
|
|
width: 100px;
|
|
height: 32px;
|
|
line-height: 24px;
|
|
border-radius: 4px;
|
|
padding-left: 2px;
|
|
margin-left: 10px;
|
|
font-family: "Microsoft" !important;
|
|
font-size: 18px !important;
|
|
color: #fff;
|
|
}
|
|
|
|
.display-draft {
|
|
position: absolute;
|
|
float: right;
|
|
right: 15px;
|
|
bottom: 15px;
|
|
|
|
.back {
|
|
z-index: 100000;
|
|
}
|
|
|
|
.start,.end{z-index:2}
|
|
|
|
/deep/ .el-button {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
</style>
|