实训调整

This commit is contained in:
fan 2022-09-09 13:06:12 +08:00
parent 4904e30450
commit e42537a8e4
2 changed files with 83 additions and 53 deletions

View File

@ -3,10 +3,14 @@
<div v-quickMenuDrag class="reminder-drag" :style="{bottom: offsetBottom + 'px'}">
<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>{{ lessonName }}</span>
<div>
<i v-show="isShrink" class="icon el-icon-minus" @click="shrink" />
<i v-show="!isShrink" class="icon el-icon-plus" @click="shrink" />
<i v-show="!isShrink && !trainingSwitch && trainingDetail" class="icon el-icon-video-play" @click="handlerStart" />
<i v-show="!isShrink && trainingSwitch" class="icon el-icon-switch-button" @click="handlerEnd" />
</div>
<p style="color: #fff;">
<span>{{ courseModel.name }}</span>
</p>
</div>
<div v-if="isShrink" class="reminder-box-content">
@ -18,17 +22,30 @@
<span class="list-label">{{ $t('display.training.trainingName') }}</span>
<span class="list-elem">{{ courseModel.name }}</span>
</p>
<p class="list-item">
<span class="list-label">{{ $t('display.training.bestTime') }}</span>
<span class="list-elem">{{ courseModel.minDuration }} {{ $t('display.seconds') }} </span>
<p v-if="demoMode === TrainingMode.TEST" class="list-item">
<span class="list-label">{{ $t('display.lesson.score') }}</span>
<span class="list-elem">{{ trainingScore }}</span>
</p>
<p class="list-item">
<span class="list-label">{{ $t('display.training.maximumTime') }}</span>
<span class="list-elem">{{ courseModel.maxDuration }} {{ $t('display.seconds') }} </span>
<span class="list-label">实训模式</span>
<span class="list-elem">
<el-radio-group v-model="demoMode" :disabled="trainingSwitch" class="mode" size="small" @change="changeMode">
<el-radio :label="TrainingMode.TEACH" border>{{ $t('display.lesson.teachingMode') }}</el-radio>
<el-radio :label="TrainingMode.PRACTICE" border>{{ $t('display.lesson.practiceMode') }}</el-radio>
<el-radio :label="TrainingMode.TEST" border>{{ $t('display.lesson.testMode') }}</el-radio>
</el-radio-group>
</span>
</p>
<p class="list-item">
<span class="list-label" style="vertical-align: top;"> {{ $t('display.training.trainingInstructions') }}</span>
<span class="list-elem elem-span">{{ courseModel.remarks }}</span>
<span class="list-elem elem-span">{{ courseModel.description }}</span>
</p>
<p class="list-item">
<span class="list-label">操作按钮</span>
<span class="list-elem">
<el-button v-if="!trainingSwitch && trainingDetail" size="small" type="success" @click="handlerStart">开始</el-button>
<el-button v-if="trainingSwitch" size="small" type="danger" @click="handlerEnd">结束</el-button>
</span>
</p>
</el-scrollbar>
</div>
@ -43,12 +60,14 @@
</template>
<script>
import { mapGetters } from 'vuex';
import { getPublishLessonDetail } from '@/api/jmap/lesson';
import { launchFullscreen } from '@/utils/screen';
import { ScriptMode } from '@/scripts/ConstDic';
import { clearSimulation } from '@/api/simulation';
import { startTraining, endTraining } from '@/api/jmap/training';
export default {
name: 'TipTrainingDetail',
components: {
},
props: {
offsetBottom: {
type: Number,
@ -57,29 +76,30 @@ export default {
},
data() {
return {
training: {
id: '',
name: '',
remarks: ''
},
isShrink: true,
lessonName: '',
courseModel: {
id: '',
name: '',
maxDuration: '',
minDuration: '',
remarks: '',
updateTime: ''
description: ''
},
showSumbit: false,
lessonIndex: 0
demoMode: ScriptMode.TEACH,
TrainingMode: ScriptMode
};
},
computed: {
...mapGetters('trainingList', [
'trainingList'
])
trainingSwitch() {
return this.$store.state.trainingNew.trainingSwitch;
},
trainingScore() {
return this.$store.state.trainingNew.trainingScore;
},
trainingDetail() {
return this.$store.state.trainingNew.trainingDetail;
},
group() {
return this.$route.query.group;
}
},
watch: {
'$store.state.trainingNew.trainingDetail': function (val) {
@ -93,37 +113,16 @@ export default {
}
},
mounted() {
this.loadInitData(this.$route.query);
this.loadInitData();
},
methods: {
loadInitData(obj) {
loadInitData() {
this.showSumbit = false;
this.lessonName = '';
this.courseModel = {
id: '',
name: '',
maxDuration: '',
minDuration: '',
remarks: '',
updateTime: ''
description: ''
};
if (parseInt(obj.lessonId)) {
getPublishLessonDetail({ id: obj.lessonId }).then(response => {
this.lessonName = response.data.name;
}).catch(error => {
this.$message.error(this.$t('display.training.getCourseInformationFail') + ':' + error.message);
});
}
},
jump(obj) {
const query = {
group: this.$route.query.group,
trainingId: this.$route.query.trainingId,
lessonId: this.$route.query.lessonId
};
this.$router.push({ path: `/display/${this.$route.params.mode}`, query: query });
launchFullscreen();
},
shrink() {
// const height = this.$refs.dragBody.offsetHeight + 40;
@ -144,6 +143,33 @@ export default {
// this.$refs.drapBox.style.height = height + 'px';
// this.$refs.drapBox.style.top = top;
}
},
changeMode(val) {
this.demoMode = val;
this.$store.dispatch('trainingNew/changeTeachMode', this.demoMode);
},
handlerStart() {
startTraining(this.group, {mode: this.teachMode}).then(() => {
this.$store.dispatch('trainingNew/trainingStart');
this.$store.dispatch('trainingNew/setTrainingScore', '');
}).catch(() => {
this.$message.error('开始实训失败!');
});
},
handlerEnd() {
endTraining(this.group).then((resp) => {
this.$store.dispatch('trainingNew/trainingEnd');
this.$store.dispatch('socket/clearTrainingStepTip');
this.$store.dispatch('trainingNew/clearStepOrder');
this.$store.dispatch('trainingNew/setTrainingScore', resp.data);
}).catch(() => {
this.$message.error('结束实训失败!');
});
},
back() {
if (this.group) {
clearSimulation(this.group);
}
}
}
};

View File

@ -4,6 +4,7 @@
<training-jlmap refs="trainingJlmap" />
<training-tip ref="trainingTip" />
<training-position-tip ref="trainingPositionTip" />
<!-- <training-menu ref="trainingMenu" :offset-bottom="offsetBottom" />-->
<div class="trainBack">
<el-button-group>
<el-button v-if="!trainingSwitch && trainingDetail" type="success" @click="handlerStart">开始</el-button>
@ -20,13 +21,15 @@ import MenuDemon from './demonMenu.vue';
import TrainingTip from './trainingTip';
import TrainingPositionTip from './trainingPositionTip';
import TrainingJlmap from './trainingJlmap';
import TrainingMenu from './trainingMenu';
export default {
name: 'TrainingDesign',
components: {
MenuDemon,
TrainingTip,
TrainingJlmap,
TrainingPositionTip
TrainingPositionTip,
TrainingMenu
},
props: {
widthLeft: {
@ -40,7 +43,8 @@ export default {
trainingObj: null,
starting: false,
selected: null,
menus: null
menus: null,
offsetBottom: 50
};
},
computed: {