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

<template>
    <div class="schema" :style="{top: offset+'px'}">
        <el-select size="small" v-model="swch" v-if="userRole == 'Instructor' || userRole == 'Admin'"
            @change="switchMode" placeholder="请选择产品类型">
            <el-option v-for="item in swchList" :key="item.value" :label="item.name" :value="item.value"> </el-option>
        </el-select>

        <el-button-group>
            <template>
                <el-button size="small" @click="viewRunPlan" v-if="runing" :disabled="viewDisabled">运行图预览</el-button>
            </template>
            <template v-if="userRole == 'Admin'">
                <el-button size="small" @click="loadRunPlan" v-if="!runing" type="warning" :disabled="viewDisabled">
                    运行图加载</el-button>
            </template>
            <template v-if="userRole == 'Instructor' || userRole == 'Admin'">
                <el-button size="small" @click="setFault" v-if="mode==OperateMode.FAULT" type="danger">故障设置</el-button>
            </template>
        </el-button-group>

        <el-radio-group size="small" v-model="mode" @change="changeOperateMode(mode)"
            v-if="userRole == 'Instructor' || userRole == 'Admin'">
            <el-radio-button class="mode" :label="OperateMode.NORMAL">正常操作</el-radio-button>
            <el-radio-button class="mode" :label="OperateMode.FAULT">故障操作</el-radio-button>
        </el-radio-group>
    </div>
</template>
<script>
    import { mapGetters } from 'vuex';
    import { OperateMode, TrainingMode } from '@/scripts/ConstDic';
    import { getStationListBySkinStyle } from '@/api/runplan';
    import { getEveryDayRunPlanData } from '@/api/simulation';
    import { getjointTraining } from '@/api/chat';

    export default {
        name: 'MenuDemonSchema',
        props: {
            group: {
                type: String
            },
            offset: {
                type: Number
            },
            userRole: {
                type: String,
            }
        },

        data() {
            return {
                mode: OperateMode.NORMAL,
                OperateMode: OperateMode,
                viewDisabled: true,
                realData: {},
                series: [],
                kmRangeCoordMap: {},
                runPlanData: {},
                swch: '02',
                swchList: [
                    { value: '01', name: '现地' },
                    { value: '02', name: '行调' },
                ],
                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) {
                    let 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.skinStyle) {
                        this.viewDisabled = true;
                        getStationListBySkinStyle(opt.skinStyle).then(response => {
                            let 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(`今日运行图未加载`);
                                    } else {
                                        this.$messageBox(`获取运行图数据失败`);
                                    }
                                })
                            })
                        }).catch(error => {
                            this.$messageBox(`获取车站列表失败`);
                        });
                    }
                })
            },
            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>