rt-sim-training-client/src/views/newMap/jointTrainingNew/menuSchema.vue

<template>
  <div class="schema" :style="{top: offset+'px'}">
    <el-select
      v-if="isAdmin && adminMode"
      v-model="swch"
      size="small"
      style="width: 100px;"
      @change="switchMode"
    >
      <el-option v-for="item in swchList" :key="item.value" :label="item.name" :value="item.value" />
    </el-select>
    <el-select v-if="showSelectStation" v-model="chiShowStation" style="width: 100px;" size="small" @change="switchStationMode">
      <el-option v-for="item in stationList" :key="item.value" :label="item.name" :value="item.value" />
    </el-select>
    <el-button-group>
      <template>
        <el-button v-if="runing && !dataError" size="small" :disabled="viewDisabled" @click="viewRunPlan">{{ $t('joinTraining.runGraphPreview') }}</el-button>
      </template>
      <template v-if="isAdmin && adminMode">
        <el-button v-if="!runing && !dataError" size="small" type="warning" @click="loadRunPlan">
          {{ $t('joinTraining.runGraphLoading') }}</el-button><!-- 运行图加载 -->
      </template>
      <template v-if="isAdmin && adminMode">
        <el-button v-if="mode==OperateMode.FAULT && !dataError" size="small" type="danger" @click="setFault">{{ $t('joinTraining.faultSetting') }}</el-button>
      </template>
    </el-button-group>
    <el-radio-group
      v-if="isAdmin && adminMode && !dataError && !isScreen"
      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>
    <el-radio-group v-if="isAdmin" v-model="adminMode" size="small" @change="changeAdminMode">
      <el-radio-button class="mode" :label="true">管理模式</el-radio-button>
      <el-radio-button class="mode" :label="false">演练模式</el-radio-button>
    </el-radio-group>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { OperateMode } from '@/scripts/ConstDic';
// import { getStationList } from '@/api/runplan';
import { getByGroupStationList } from '@/api/jmap/map';
import { getEveryDayRunPlanNew } from '@/api/simulation';

export default {
    name: 'MenuDemonSchema',
    props: {
        group: {
            type: String,
            required: true
        },
        offset: {
            type: Number,
            required: true
        },
        userRole: {
            type: String,
            required: true
        },
        showSelectStation: {
            type: Boolean,
            default() {
                return false;
            }
        },
        stationList: {
            type: Array,
            default() {
                return [];
            }
        },
        showStation: {
            type: String,
            default() {
                return '';
            }
        },
        dataError: {
            type: Boolean,
            default() {
                return false;
            }
        },
        isAdmin: {
            type: Boolean,
            default() {
                return false;
            }
        }
    },
    data() {
        return {
            mode: OperateMode.NORMAL,
            OperateMode: OperateMode,
            viewDisabled: true,
            realData: {},
            series: [],
            chiShowStation: '',
            kmRangeCoordMap: {},
            runPlanData: {},
            swch: '02',
            swchList: [
                { value: '01', name: this.$t('joinTraining.local') },
                { value: '02', name: this.$t('joinTraining.lineAdjustment') },
                { value: '07', name: '大屏'}
            ],
            runing: false,
            userId: '',
            adminMode: true
        };
    },
    computed: {
        ...mapGetters('runPlan', [
            'stations'
        ]),
        isScreen() {
            return this.$store.state.training.prdType === '07';
        }
    },
    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;
        await this.loadRunData(this.$route.query);
    },
    methods: {
        loadRunData(opt) {
            this.$store.dispatch('runPlan/clear').then(resp => {
                if (opt && opt.mapId) {
                    this.viewDisabled = true;
                    getByGroupStationList(this.$route.query.group).then(response => {
                        const stations = response.data;
                        this.$store.dispatch('runPlan/setStations', stations).then(() => {
                            getEveryDayRunPlanNew(this.group).then(resp => {
                                this.$store.dispatch('runPlan/setPlanData', resp.data);
                                this.$store.dispatch('runPlan/setInitialPlanData', resp.data);
                                this.viewDisabled = false;
                            }).catch(error => {
                                this.$store.dispatch('runPlan/setPlanData', []);
                                if (error.code == 30001) {
                                    this.$messageBox(this.$t('error.runGraphIsNotLoaded'));
                                } else {
                                    !this.dataError && this.$messageBox(this.$t('error.obtainOperationGraphFailed'));
                                }
                            });
                        });
                    }).catch(() => {
                        this.$messageBox(this.$t('error.obtainStationListFailed'));
                    });
                }
            });
        },
        switchMode(swch) {
            this.chiShowStation = this.showStation;
            this.$store.dispatch('training/setPrdType', swch);
        },
        initPlannedDriving(isDisable) {
            this.isDisable = isDisable;
        },
        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;
        },
        switchStationMode(val) {
            this.$emit('switchStationMode', val);
        },
        changeAdminMode(adminMode) {
            this.$emit('changeAdminMode', adminMode, this.swch);
        }
    }
};
</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>