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" />
    <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 TrainingJlmap from './trainingJlmap';
export default {
    name: 'TrainingDesign',
    components: {
        MenuDemon,
        TrainingTip,
        TrainingJlmap
    },
    props: {
        widthLeft: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            // maskOpen: false,
            trainingObj: null,
            starting: false,
            selected: null,
            menus: null
        };
    },
    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.trainingOperate':function(val) {
            if (this.trainingSwitch && val) {
                const stepList = JSON.parse(this.trainingDetail.stepJson);
                const step = stepList.find(item => item.id == this.$store.state.trainingNew.stepOrder );
                const operateIndex = step.operations.findIndex(item => item.id == this.$store.state.trainingNew.operateOrder);
                this.checkOperation(val, step.operations[operateIndex], step.operations.length === (operateIndex + 1 ));
            }
        }
    },
    async beforeDestroy() {
        this.$store.dispatch('socket/clearTrainingOverCount');
    },
    mounted() {
    },
    methods: {
        checkOperation(now, data, stepOver) {
            let flag = true;
            if (now.cmdType || data.operationType) {
                const cmd = now.cmdType ? now.cmdType.value : '';
                flag = (cmd === data.operationType) && flag;
            }
            if (now.code || data.deviceCode) {
                flag = (now.code === data.deviceCode) && flag;
            }
            if (now.operation || data.domId) {
                flag = (now.operation === data.domId) && flag;
            }
            if (now.userOperationType || data.userOperationType) {
                flag = (now.userOperationType === data.userOperationType) && flag;
            }
            for (const param in data.params) {
                flag = (now.params[param] === data.params[param]) && flag;
            }
            console.log(now, data, stepOver, flag);
            if (flag && stepOver) {
                this.nextStep();
            } else if (flag) {
                this.$store.dispatch('trainingNew/operateOrderIncrease');
            } else {
                console.error('校验失败；');
            }
        },
        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() {
            startTraining(this.group, {mode: this.teachMode}).then(() => {
                this.$store.dispatch('trainingNew/trainingStart');
            }).catch(() => {
                this.$message.error('开始实训失败！');
            });
        },
        nextStep() {
            endTrainingStep(this.group, this.$store.state.trainingNew.stepOrder).then(resp => {
                this.$store.dispatch('trainingNew/clearOperateOrder');
                this.$store.dispatch('trainingNew/stepOrderIncrease');
            }).catch(() => {
                this.$message.error('进入下一步实训失败！');
            });
        },
        handlerEnd() {
            endTraining(this.group).then(() => {
                this.$store.dispatch('trainingNew/trainingEnd');
                this.$store.dispatch('socket/clearTrainingStepTip');
                this.$store.dispatch('trainingNew/clearStepOrder');
                this.$store.dispatch('trainingNew/setTrainingDetail', null);
            }).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>