rt-sim-training-client/src/views/display/menuExam.vue

<template>
  <div>
    <div class="display-card" :style="{top: offset + 'px'}">
      <el-row style="vertical-align:middle; ">
        <span class="display-time">{{ formatUsedTime }}</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" :disabled="!isDisable" @click="end">{{ $t('display.endBtn') }}</el-button>
        <el-button type="primary" class="back" @click="back">{{ $t('display.backBtn') }}</el-button>
      </el-button-group>
    </div>
    <tip-exam-list @refresh="refresh" />
  </div>
</template>

<script>
import TipExamList from './tipExamList';
import { Notification } from 'element-ui';
import { startTraining } from '@/api/jmap/training';
import { exitFullscreen } from '@/utils/screen';
import { timeFormat } from '@/utils/date';
import { refreshExamList, finishOneExamQuestion } from '@/api/management/userexam';
import { launchFullscreen } from '@/utils/screen';
import { UrlConfig } from '@/router/index';

export default {
	name: 'MenuExam',
	components: {
		TipExamList
	},
	props: {
		group: {
			type: String,
			required: true
		},
		offset: {
			type: Number,
			required: true
		}
	},
	data() {
		return {
			isDisable: false,
			startLoading: false,
			training: {
				id: '',
				name: '',
				remarks: ''
			}
		};
	},
	computed: {
		formatUsedTime() {
			return timeFormat(this.$store.state.training.usedTime);
		}
	},
	watch: {
		'$store.state.map.mapViewLoadedCount': function() {
			this.$store.dispatch('exam/countUsedTime');
		}
	},
	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 }, this.$t('display.exam.startTestOperateTip'))
				});
			}
		},
		start() {
			this.$store.dispatch('menuOperation/setButtonOperation', null);
			this.startLoading = true;
			if (this.$route.query.trainingId) {
				this.isDisable = true;
				startTraining({ id: this.$route.query.trainingId }, this.group).then(response => {
					this.$store.dispatch('training/examModeStart');
					this.$store.dispatch('map/clearJlmapTrainView').then(() => {
						this.$store.dispatch('training/setMapDefaultState').then(() => {
							this.$store.dispatch('training/emitTipFresh');
						});
					});
					this.startLoading = false;
				}).catch(() => {
					this.isDisable = false;
					this.startLoading = false;
				});
			} else {
				this.startLoading = true;
				this.$messageBox(this.$t('display.exam.selectTest'));
			}
		},
		end() {
			if (this.$route.query.trainingId) {
				this.isDisable = false;
				if (this.$store.state.training.started) {
					const model = {
						id: this.$route.query.examQuestionId,
						usedTime: this.$store.state.training.usedTime,
						group: this.group
					};

					this.$store.dispatch('training/end', null);
					finishOneExamQuestion(model).then(response => {
						this.$store.dispatch('training/emitTipFresh');
						this.init();
					}).catch(() => {
						this.$store.dispatch('training/emitTipFresh');
						this.$messageBox(this.$t('display.exam.endTrainingError'));
					});
				} else {
					this.isDisable = true;
					this.$messageBox(this.$t('display.exam.startTestTip'));
				}
			}
		},
		back() {
			this.$confirm(this.$t('display.exam.endTestTip'), this.$t('global.tips'), {
				confirmButtonText: this.$t('global.confirm'),
				cancelButtonText: this.$t('global.cancel'),
				type: 'warning'
			}).then(() => {
				this.$emit('quit');
				this.$router.push({ path: `${UrlConfig.trainingPlatform.examDetail}/${this.$route.query.examId}`, query: { subSystem: this.$route.query.subSystem }});
				Notification.closeAll();
				exitFullscreen();
			}).catch(() => {

			});
		},
		init() {
			launchFullscreen();
			// 刷新考试列表
			refreshExamList(this.$route.query.userExamId).then(response => {
				this.$store.dispatch('exam/setUsedTime', response.data.usedTime);
				this.$store.dispatch('exam/setTotalTime', response.data.duration);
				this.$store.dispatch('trainingList/setTrainingList', response.data.userExamQuestionsVOs).then(response => { });
			}).catch(error => {
				// 如果时50009则表示考试已完成，不能再次进行y
				if (error.code === 500009) {
					this.$router.replace({ path: `/trainingPlatform/result/${this.$route.params.userExamId}`, query: {subSystem: this.$route.query.subSystem} });
				} else {
					this.$messageBox(this.$t('display.exam.refreshListError'));
				}
			});
		},
		refresh() {
			this.isDisable = false;
			this.$store.dispatch('training/end', null);
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .display-card {
        z-index: 9;
        display: inline;
        position: absolute;
        // float: left;
        left: 160px;
    }

    .display-time {
        background-color: white;
        display: -moz-inline-box;
        display: inline-block;
        border: 1px solid lightskyblue;
        width: 100px;
        height: 32px;
        line-height: 32px;
        border-radius: 4px;
        text-align: center;
        font-family: "Microsoft" !important;
        font-size: 18px !important;
        font-weight: bold;
        color: black;
    }

    .display-draft {
        position: absolute;
        float: right;
        right: 15px;
        bottom: 15px;

        .back {
            z-index: 100000;
        }
    }

    .tip-body-box {
        position: relative;
        height: 430px;
    }

    .reminder-box {
        position: absolute;
        float: left;
        left: 15px;
        bottom: 15px;
        width: 650px;
        height: 470px;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        z-index: 500;
        /* transition: height 0.5s; */
        font-size: 18px;

        .tip-title {
            width: 100%;
            overflow: hidden;
            height: 40px;
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
            background-color: #409EFF;
            cursor: move;
            border-radius: 5px 5px 0 0;
            justify-content: space-between;
            padding: 0 10px;
        }

        .drag-right,
        .drag-left {
            width: 10px;
            cursor: e-resize;
            background-color: yellow;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .drag-left {
            left: 0;
        }

        .drag-bottom {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 10px;
            cursor: s-resize;
            background-color: yellow;
            opacity: 0;
        }

        .tip-body {
            height: 366px;
            padding: 10px;
        }

        .tip-foot {
            width: 100%;
            margin-right: 10px;
            position: absolute;
            right: 0px;
            bottom: 0px;
            background-color: #fff;
            padding: 10px 0;
            display: flex;
            align-items: center;
            flex-direction: row-reverse;

            .btn {
                margin-right: 10px;
            }
        }

        .icon {
            float: right;
            margin-right: 10px;
            cursor: pointer;
            background-color: #d2d2d2;
            border-radius: 50%;
        }

        /deep/ {
            .el-tree-node__content {
                margin-bottom: 4px;
            }

            .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
                background-color: #d6e5f7;
            }
        }
    }
</style>