rt-sim-training-client/src/views/designPlatform/trainingPreview.vue

<template>
  <div class="train">
    <menu-demon ref="menuDemon" />
    <training-jlmap refs="trainingJlmap" />
    <training-tip ref="trainingTip" />
    <training-position-tip ref="trainingPositionTip" />
    <!--    <scene-play-role ref="scenePlayRole" @startTraining="startTraining" />-->
    <training-menu v-if="trainingDetail" ref="trainingMenu" :offset-bottom="offsetBottom" />
    <div class="trainBack">
      <el-button-group>
        <!--        <el-button v-if="!trainingSwitch && trainingDetail" type="success" @click="handlerStart">开始</el-button>-->
        <!--        <el-button v-if="trainingSwitch" type="danger" @click="handlerEnd">结束</el-button>-->
        <el-button type="primary" @click="back">返回</el-button>
      </el-button-group>
    </div>
  </div>
</template>
<script>
import { clearSimulation } from '@/api/simulation';
import { startTraining, endTraining, endTrainingStep } from '@/api/jmap/training';
import MenuDemon from './demonMenu.vue';
import TrainingTip from './trainingTip';
import TrainingPositionTip from './trainingPositionTip';
import TrainingJlmap from './trainingJlmap';
// import ScenePlayRole from './scenePlayRole';
import TrainingMenu from './trainingMenu';
export default {
    name: 'TrainingDesign',
    components: {
        MenuDemon,
        TrainingTip,
        TrainingJlmap,
        TrainingPositionTip,
        // ScenePlayRole,
        TrainingMenu
    },
    props: {
        widthLeft: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            // maskOpen: false,
            trainingObj: null,
            starting: false,
            selected: null,
            menus: null,
            offsetBottom: 15
        };
    },
    computed: {
        mapId() {
            return this.$route.query.mapId;
        },
        width() {
            return this.$store.state.app.width;
        },
        height() {
            return this.$store.state.app.height;
        },
        group() {
            return this.$route.query.group;
        },
        teachMode() {
            return this.$store.state.trainingNew.teachMode;
        },
        trainingSwitch() {
            return this.$store.state.trainingNew.trainingSwitch;
        },
        trainingDetail() {
            return this.$store.state.trainingNew.trainingDetail;
        }
    },
    watch: {
        '$store.state.trainingNew.stepOverCount': function(val) {
            this.nextStep();
        }
    },
    async beforeDestroy() {
        this.$store.dispatch('socket/clearTrainingOverCount');
        this.$store.dispatch('trainingNew/clearStepOverCount');
        this.$store.dispatch('trainingNew/setTrainingDetail', null);
        this.$store.dispatch('trainingNew/trainingEnd');
        this.$store.dispatch('trainingNew/clearStepOrder');
        this.$store.dispatch('trainingNew/clearOperateOrder');
        this.$store.dispatch('trainingNew/changeTeachMode', '');
    },
    mounted() {
        this.$store.dispatch('trainingNew/setTrainingScore', '');
        this.handleOffsetBottom();
    },
    methods: {
        handleOffsetBottom() {
            setTimeout(() => {
                const menuBottom = document.getElementById('menuButtons_box');
                const tipInfoBox = document.getElementById('tipInfoBox');
                const buttonWidth = this.width - 1200;
                if (menuBottom && buttonWidth < 780) {
                    this.offsetBottom = (menuBottom.offsetHeight || 0) + 15;
                }
                if (tipInfoBox) {
                    this.offsetBottom += tipInfoBox.offsetHeight;
                }
            }, 500);
        },
        overallTranslation(flag) {
            const panel = document.getElementById('leftSlider');
            if (flag) {
                panel.style.transform = 'translateX(400px)';
            } else {
                panel.style.transform = '';
            }
        },
        async back() {
            if (this.$route.query.group) {
                await clearSimulation(this.$route.query.group);
            }
        },
        handlerStart() {
            if (this.trainingDetail.type === 'SCENE') {
                this.$refs.scenePlayRole.doShow();
            } else {
                this.startTraining();
            }
        },
        startTraining() {
            startTraining(this.group, {mode: this.teachMode}).then(() => {
                this.$store.dispatch('trainingNew/trainingStart');
                this.$store.dispatch('trainingNew/setTrainingScore', '');
            }).catch(() => {
                this.$message.error('开始实训失败！');
            });
        },
        nextStep() {
            const stepList = JSON.parse(this.$store.state.trainingNew.trainingDetail.stepJson);
            const step = stepList[this.$store.state.trainingNew.stepOrder - 1];
            endTrainingStep(this.group, step.id).then(resp => {
            }).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('结束实训失败！');
            });
        }
    }
};
</script>
<style lang="scss" scoped>
    .train {
        width: 100%;
		overflow: hidden;
        position: relative;
    }
	.trainMask{
        opacity: 1;
        background: #000;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9;
    }
	.trainBack {
        position: absolute;
        float: right;
        right: 15px;
        bottom: 15px;
		z-index: 19;
    }
</style>