rt-sim-training-client/src/views/newMap/displayNew/menuLesson.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="success" :disabled="isDisable" :loading="startLoading" @click="start">{{ $t('display.startBtn') }}</el-button>
        <el-button type="danger" class="end" :disabled="!isDisable" @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
        }
    },
    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.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.setAttribute('style', 'transform: translateX(-400px)');
            } else {
                buttons.setAttribute('style', '');
            }
        }
    }
};
</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;
        }

        /deep/ .el-button {
            font-weight: bold;
        }
    }
</style>