360 lines
14 KiB
Vue
360 lines
14 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-row>
|
|
</div>
|
|
<div id="teachGroupButton" class="display-draft" :style="{bottom: offsetBottom + 'px'}">
|
|
<el-button-group>
|
|
<el-button type="primary" :disabled="backDisable" class="back" @click="back">{{ $t('display.backBtn') }}</el-button>
|
|
<el-button type="danger" class="end" :disabled="!isDisable || dataError" @click="end">{{ $t('display.endBtn') }}</el-button>
|
|
<el-button type="success" class="start" :disabled="isDisable || dataError" :loading="startLoading" @click="start">{{ $t('display.startBtn') }}</el-button>
|
|
</el-button-group>
|
|
</div>
|
|
<tip-training-detail :training-obj="trainingObj" :offset-bottom="offsetBottom + tipBottom" />
|
|
<left-slider v-if="isShowLeftSlider" :offset-bottom="offsetBottom" @overallTranslation="overallTranslation" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getTrainingDetailNew } from '@/api/jmap/training';
|
|
import TipTrainingDetail from './tipTrainingDetail';
|
|
import LeftSlider from './LeftSlider';
|
|
import { mapGetters } from 'vuex';
|
|
import { Notification } from 'element-ui';
|
|
import { startTrainingNew, endTrainingNew } from '@/api/jmap/training';
|
|
import { trainingNotifyNew } from '@/api/simulation';
|
|
import { TrainingMode, UrlConfig } from '@/scripts/ConstDic';
|
|
import { timeFormat } from '@/utils/date';
|
|
import { getTrainingStepsDetailNew } from '@/api/jmap/training';
|
|
|
|
export default {
|
|
name: 'MenuLesson',
|
|
components: {
|
|
TipTrainingDetail,
|
|
LeftSlider
|
|
},
|
|
props: {
|
|
offset: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
offsetBottom: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
tipBottom: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
dataError: {
|
|
type: Boolean,
|
|
default() {
|
|
return false;
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
timeInterval: null,
|
|
TrainingMode: TrainingMode,
|
|
trainingObj:{},
|
|
demoMode: TrainingMode.TEACH,
|
|
isDisable: false,
|
|
backDisable: false,
|
|
startLoading: false,
|
|
prdTypeMap: {
|
|
'01': '01', // 现地 => 现地
|
|
'02': '02', // 行调 => 行调
|
|
'04': '02', // 司机 => 行调
|
|
'05': '' // 派班 => null
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters('training', [
|
|
'score',
|
|
'usedTime',
|
|
'basicInfo'
|
|
]),
|
|
group() {
|
|
return this.$route.query.group;
|
|
},
|
|
formatScore() {
|
|
return this.score;
|
|
},
|
|
formatUsedTime() {
|
|
return timeFormat(this.usedTime);
|
|
},
|
|
isShowLeftSlider() {
|
|
return this.$route.query.lessonId != '0';
|
|
},
|
|
prdType() {
|
|
return this.$route.query.prdType;
|
|
}
|
|
},
|
|
watch: {
|
|
demoMode: function (val) {
|
|
this.$store.dispatch('training/end', null);
|
|
this.$store.dispatch('training/reset');
|
|
this.$store.dispatch('training/setStopCountTime');
|
|
this.$store.dispatch('training/emitTipFresh');
|
|
this.$store.dispatch('menuOperation/setButtonOperation', null);
|
|
this.isDisable = false;
|
|
},
|
|
'$store.state.map.mapViewLoadedCount': function (val) {
|
|
if (this.$route.query.trainingId) {
|
|
// 获取实训步骤数据（新版地图）
|
|
getTrainingStepsDetailNew(this.$route.query.trainingId, { group: this.group }).then(resp => {
|
|
this.trainingObj = resp.data;
|
|
this.$store.dispatch('training/setTrainingData', this.trainingObj); // 设置实训教学信息
|
|
}).catch(error => {
|
|
this.$messageBox(`初始化失败实训内容失败: ${error.message}`);
|
|
});
|
|
}
|
|
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 });
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initData();
|
|
},
|
|
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)
|
|
});
|
|
}
|
|
},
|
|
overallTranslation(flag) {
|
|
const panel = document.getElementById('leftSlider');
|
|
if (flag) {
|
|
panel.style.transform = 'translateX(400px)';
|
|
} else {
|
|
panel.style.transform = '';
|
|
}
|
|
},
|
|
start() {
|
|
// 清空按钮操作
|
|
this.$store.dispatch('menuOperation/setButtonOperation', null);
|
|
this.startLoading = true;
|
|
if (this.trainingObj && this.trainingObj.id) {
|
|
startTrainingNew(this.trainingObj, this.group).then(response => {
|
|
this.isDisable = true;
|
|
this.$store.dispatch('training/setTrainingStart', true);
|
|
this.$store.dispatch('map/clearJlmapTrainView').then(() => {
|
|
this.$store.dispatch('training/teachModeStart', this.demoMode).then(()=>{
|
|
this.$store.dispatch('training/countTime', 'Lesson'); // 开始计时
|
|
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/setStopCountTime');
|
|
this.$store.dispatch('training/emitTipFresh');
|
|
this.$store.dispatch('training/setTrainingStart', false);
|
|
});
|
|
}).catch(() => {
|
|
this.$messageBox(this.$t('display.lesson.endTrainingError'));
|
|
});
|
|
},
|
|
end() {
|
|
// 如果是测试模式需要获取最终的得分
|
|
if (this.trainingObj && this.trainingObj.id) {
|
|
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;
|
|
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/end', null);
|
|
this.$store.dispatch('training/setStopCountTime');
|
|
this.$store.dispatch('training/setScore', 0);
|
|
this.$store.dispatch('training/emitTipFresh');
|
|
this.$store.dispatch('training/setTrainingStart', false);
|
|
}).catch(() => {
|
|
this.$messageBox(this.$t('display.lesson.endTrainingError'));
|
|
});
|
|
}).catch(() => {
|
|
this.isDisable = true;
|
|
this.backDisable = false;
|
|
});
|
|
}
|
|
});
|
|
}
|
|
},
|
|
back() {
|
|
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 {
|
|
if (this.$route.query.noPreLogout) {
|
|
this.$router.replace({path:'/device/teachDetail', query: {lessonId: this.$route.query.lessonId, mapId: this.$route.query.mapId, noPreLogout: this.$route.query.noPreLogout}});
|
|
} else {
|
|
history.go(-1);
|
|
}
|
|
}
|
|
},
|
|
// 课程和考试系统
|
|
async initData() {
|
|
// this.$store.dispatch('training/end', null);
|
|
if (parseInt(this.$route.query.trainingId)) {
|
|
// 设置地图数据
|
|
// 设置实训数据
|
|
const resp = await getTrainingDetailNew(this.$route.query.trainingId);
|
|
this.$store.dispatch('exam/setCenter', resp.data.locateDeviceCode);
|
|
if (resp && resp.code == 200) {
|
|
const detail = resp.data;
|
|
await this.$store.dispatch('training/setPrdType', this.prdTypeMap[detail.prdType]);
|
|
} else {
|
|
this.$messageBox(`获取实训步骤数据失败`);
|
|
this.endViewLoading();
|
|
}
|
|
} else {
|
|
this.endViewLoading();
|
|
}
|
|
},
|
|
// 结束加载状态
|
|
endViewLoading(isSuccess) {
|
|
if (!isSuccess) {
|
|
this.$store.dispatch('map/mapClear');
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
@import "src/styles/mixin.scss";
|
|
|
|
.display-card {
|
|
z-index: 9;
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 5px;
|
|
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{z-index:2;}
|
|
.end{z-index:2}
|
|
|
|
/deep/ .el-button {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
</style>
|