rt-sim-training-client/src/views/newMap/displayNew/menuPractice.vue

<template>
  <div class="menuPractice">
    <div class="practice-schema" :style="{top: offset+'px'}">
      <el-select v-model="swch" size="small" :placeholder="$t('display.schema.selectProduct')" @change="switchMode">
        <el-option v-for="item in swchList" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
      <select-station ref="selectStation" :style-css="'width: 100px;'" />
    </div>
    <div class="practice-bottom" :style="{bottom: offsetBottom + 'px'}">
      <el-button-group>
        <el-button type="success" :disabled="isDisable || dataError" @click="selectBeginTime">按计划行车</el-button>
        <el-button type="danger" :disabled="dataError" @click="end">初始化</el-button>
        <el-button type="primary" @click="back">返回</el-button>
      </el-button-group>
    </div>
    <set-time ref="setTime" @ConfirmSelectBeginTime="start" />
  </div>
</template>
<script>
import SelectStation from './selectStation';
import { TrainingMode } from '@/scripts/ConstDic';
import SetTime from '@/views/newMap/displayNew/demon/setTime';
import { ranAsPlan, exitRunPlan } from '@/api/simulation';
import { Notification } from 'element-ui';
export default {
    name: 'MenuPractice',
    components:{
        SetTime,
        SelectStation
    },
    props: {
        offset: {
            type: Number,
            required: true
        },
        offsetBottom: {
            type: Number,
            required: true
        },
        dataError: {
            type: Boolean,
            default() {
                return false;
            }
        }
    },
    data() {
        return {
            isDisable: false,
            swch: '01',
            showStationContent:'',
            swchList: [
                { value: '01', name: '现地' },
                { value: '02', name: '行调' }
            ]
        };
    },
    computed:{
        group() {
            return this.$route.query.group;
        }
    },
    watch:{
        'showStation':function(val) {
            this.showStationContent = this.showStation;
        }
    },
    methods:{
        back() {
            this.$store.dispatch('training/over').then(() => {
                history.go(-1);
                Notification.closeAll();
            });
        },
        selectBeginTime() {
            this.$refs.setTime.doShow();
        },
        start(model) {
            this.isDisable = true;
            const data = {
                time: model.initTime
            };
            ranAsPlan(data, this.group).then(res => {
                this.$store.dispatch('training/simulationStart').then(() => {
                    this.$store.dispatch('training/setInitTime', +new Date(`${new Date().toLocaleDateString()} ${model.initTime}`));
                    this.$store.dispatch('map/setShowCentralizedStationNum');
                });
            }).catch((error) => {
                this.isDisable = false;
                if (error.code == '5001') {
                    this.$messageBox(this.$t('error.mapDataError') + '，' + this.$t('error.startSimulationFailed'));
                } else if (error.code == '5002') {
                    this.$messageBox(this.$t('error.runningChartDataError') + ',' + this.$t('error.startSimulationFailed'));
                } else if (error.code == '5003') {
                    this.$messageBox(this.$t('error.runningChartIsNotLoaded') + ',' + this.$t('error.startSimulationFailed'));
                } else if (error.code == '5004') {
                    this.$messageBox(this.$t('error.runningDataError') + ',' + this.$t('error.startSimulationFailed'));
                } else if (error.code == '5000') {
                    this.$messageBox(this.$t('error.systemError') + ',' + this.$t('error.startSimulationFailed'));
                } else if (error.code == '4000') {
                    this.$messageBox(this.$t('error.simulationDoesNotExist') + ',' + this.$t('error.startSimulationFailed'));
                } else if (error.code == '4001') {
                    this.$messageBox(this.$t('error.simulationOperationIsNotDefined') + ',' + this.$t('error.startSimulationFailed'));
                } else if (error.code == '4002') {
                    this.$messageBox(this.$t('error.simulationOperationProcessingMethodNotFound') + ',' + this.$t('error.startSimulationFailed'));
                } else if (error.code == '4003') {
                    this.$messageBox(this.$t('error.simulationOperationFailed') + ',' + this.$t('error.startSimulationFailed'));
                } else if (error.code == '4004') {
                    this.$messageBox(this.$t('error.operationConflict') + ',' + this.$t('error.startSimulationFailed'));
                }
            });
        },
        switchMode(swch) {
            this.$store.dispatch('training/setPrdType', swch); // 改变prdType
            this.switchModeInner(swch);
        },
        switchModeInner(swch) {
            let showMode = '03';
            if (swch == '01') {
                showMode = '03';
            } else if (swch == '02') {
                showMode = '02';
            }
            const nameList = Object.keys(this.$store.state.map.map || {});
            let list = [];
            nameList.forEach(item => {
                if (item !== 'skinVO') {
                    const data = this.$store.state.map.map[item];
                    if (data && data.constructor === Array) {
                        list = [...list, ...data];
                    }
                }
            });
            this.$jlmap.updateShowMode(list, showMode);
        },
        end() {
            this.isDisable = false;
            exitRunPlan(this.group).then(() => {
                this.$store.dispatch('training/over').then(() => {
                    this.$store.dispatch('training/setMapDefaultState').then(() => {
                        this.$store.dispatch('map/clearJlmapTrainView');
                        this.$store.dispatch('map/setTrainWindowShow', false);
                    });
                });
            }).catch(() => {
                this.isDisable = true;
                this.$messageBox(this.$t('display.demon.endSimulationFail'));
            });
        },
        // 加载实操地图数据
        async initData() {
            this.$store.dispatch('training/end', TrainingMode.NORMAL);
            this.$store.dispatch('training/setPrdType', '01'); // 改变prdType
        },
        // 结束加载状态
        endViewLoading(isSuccess) {
            if (!isSuccess) {
                this.$store.dispatch('map/mapClear');
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.practice-schema {
    z-index: 9;
    display: inline;
    position: absolute;
    right: 15px;
}
.practice-bottom {
    position: absolute;
    float: right;
    right: 15px;
    bottom: 15px;
}
</style>