rt-sim-training-client/src/views/display/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 class="display-draft">
      <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" />
  </div>
</template>

<script>
import TipTrainingDetail from './tipTrainingDetail';
import { mapGetters } from 'vuex';
import { Notification } from 'element-ui';
import { startTraining, endTraining } from '@/api/jmap/training';
import { trainingNotify } from '@/api/simulation';
import { TrainingMode } from '@/scripts/ConstDic';
import { exitFullscreen } from '@/utils/screen';
import { timeFormat } from '@/utils/date';
import { UrlConfig } from '@/router/index';

export default {
	name: 'MenuLesson',
	components: {
		TipTrainingDetail
	},
	props: {
		group: {
			type: String,
			required: true
		},
		trainingObj: {
			type: Object,
			default() {
				return null;
			}
		},
		offset: {
			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;
				startTraining(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
			};

			endTraining(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();
			exitFullscreen();

			if (this.$route.params.mode == 'record') {
				/** 如果是演示返回时，需要重新创建仿真*/
				trainingNotify({ 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);
			}
		}
	}
};
</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>