rt-sim-training-client/src/views/newMap/displayNew/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-select v-if="showSelectStation" v-model="showStation" style="width: 100px;position: fixed; right: 10px;" size="small" @change="switchStationMode">
          <el-option v-for="item in stationList" :key="item.value" :label="item.name" :value="item.value" />
        </el-select>
      </el-row>
    </div>
    <div 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" :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 :offset-bottom="offsetBottom" @refresh="refresh" />
  </div>
</template>

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

export default {
    name: 'MenuExam',
    components: {
        TipExamList
    },
    props: {
        group: {
            type: String,
            required: true
        },
        offset: {
            type: Number,
            required: true
        },
        offsetBottom: {
            type: Number,
            required: true
        },
        showSelectStation: {
            type: Boolean,
            default() {
                return false;
            }
        },
        stationList: {
            type: Array,
            default() {
                return [];
            }
        },
        showStation: {
            type: String,
            default() {
                return '';
            }
        }
    },
    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;
                startTrainingNew({ 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.go(-1);
                Notification.closeAll();
            }).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, mapId:this.$route.query.mapId } });
                } else {
                    this.$messageBox(this.$t('display.exam.refreshListError'));
                }
            });
        },
        refresh() {
            this.isDisable = false;
            this.$store.dispatch('training/end', null);
        },
        switchStationMode(val) {
            this.$emit('switchStationMode', val);
        }
    }
};
</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>