rt-sim-training-client/src/views/jointTraining/menuSchema.vue

<template>
  <div class="schema" :style="{top: offset+'px'}">
    <el-select
      v-if="userRole == 'Instructor' || userRole == 'Admin'"
      v-model="swch"
      size="small"
      :placeholder="this.$t('rules.productTypeInput')"
      @change="switchMode"
    >
      <el-option v-for="item in swchList" :key="item.value" :label="item.name" :value="item.value" />
    </el-select>

    <el-button-group>
      <template>
        <el-button v-if="runing" size="small" :disabled="viewDisabled" @click="viewRunPlan">{{ $t('joinTraining.runGraphPreview') }}</el-button>
      </template>
      <template v-if="userRole == 'Admin'">
        <el-button v-if="!runing" size="small" type="warning" :disabled="viewDisabled" @click="loadRunPlan">
          {{ $t('joinTraining.runGraphLoading') }}</el-button>
      </template>
      <template v-if="userRole == 'Instructor' || userRole == 'Admin'">
        <el-button v-if="mode==OperateMode.FAULT" size="small" type="danger" @click="setFault">{{ $t('joinTraining.faultSetting') }}</el-button>
      </template>
    </el-button-group>

    <el-radio-group
      v-if="userRole == 'Instructor' || userRole == 'Admin'"
      v-model="mode"
      size="small"
      @change="changeOperateMode(mode)"
    >
      <el-radio-button class="mode" :label="OperateMode.NORMAL">{{ $t('joinTraining.normalOperation') }}</el-radio-button>
      <el-radio-button class="mode" :label="OperateMode.FAULT">{{ $t('joinTraining.faultOperation') }}</el-radio-button>
    </el-radio-group>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { OperateMode } from '@/scripts/ConstDic';
import { getStationList } from '@/api/runplan';
import { getEveryDayRunPlanData } from '@/api/simulation';

export default {
    name: 'MenuDemonSchema',
    props: {
        group: {
            type: String,
            required: true
        },
        offset: {
            type: Number,
            required: true
        },
        userRole: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            mode: OperateMode.NORMAL,
            OperateMode: OperateMode,
            viewDisabled: true,
            realData: {},
            series: [],
            kmRangeCoordMap: {},
            runPlanData: {},
            swch: '02',
            swchList: [
                { value: '01', name: this.$t('joinTraining.local') },
                { value: '02', name: this.$t('joinTraining.lineAdjustment') }
            ],
            runing: false,
            userId: ''
        };
    },
    computed: {
        ...mapGetters('runPlan', [
            'stations'
        ]),
        isShowMenuBar() {
            return this.$store.state.map.roles == 'Admin';
        }
    },
    watch: {
        '$store.state.training.started': function (val) {
            this.setRuning(val);
        },
        '$store.state.training.switchcount': async function () {
            if (this.group) {
                const started = this.$store.state.training.started;
                if (started) {
                    await this.loadRunData(this.$route.query);
                }
            }
        }
    },
    async mounted() {
        this.userId = this.$store.state.user.id;
        console.log(this.$route.query);
        await this.loadRunData(this.$route.query);
    },
    methods: {
        loadRunData(opt) {
            this.$store.dispatch('runPlan/clear').then(resp => {
                if (opt && opt.mapId) {
                    this.viewDisabled = true;
                    getStationList(opt.mapId).then(response => {
                        const stations = response.data;
                        this.$store.dispatch('runPlan/setStations', stations).then(() => {
                            getEveryDayRunPlanData(this.group).then(resp => {
                                this.$store.dispatch('runPlan/setPlanData', resp.data);
                                this.viewDisabled = false;
                            }).catch(error => {
                                this.$store.dispatch('runPlan/setPlanData', []);
                                if (error.code == 30001) {
                                    this.$messageBox(this.$t('error.runGraphIsNotLoaded'));
                                } else {
                                    this.$messageBox(this.$t('error.obtainOperationGraphFailed'));
                                }
                            });
                        });
                    }).catch(() => {
                        this.$messageBox(this.$t('error.obtainStationListFailed'));
                    });
                }
            });
        },
        switchMode(swch) {
            this.$store.dispatch('training/setPrdType', swch);
        },
        changeOperateMode(handle) {
            this.$store.dispatch('training/changeOperateMode', { mode: handle });
        },
        setFault() {
            this.$emit('faultChooseShow');
        },
        loadRunPlan() {
            this.$emit('runPlanLoadShow');
        },
        viewRunPlan() {
            this.$emit('runPlanViewShow');
        },
        setRuning(run) {
            this.runing = run;
        }
    }
};
</script>
<style>
    .schema {
        z-index: 9;
        display: inline;
        position: absolute;
        right: 20px;
    }

    .schema .el-radio-group .el-radio-button__inner {
        padding: 0px 15px 0px 15px;
        height: 32px;
        line-height: 32px;
        font-size: 12px;
    }

    /* /deep/ .el-button+ .el-button {
        margin-left: 0px;
    } */
</style>