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

<template>
    <div class="schema" :style="{top: offset+'px'}">
        <el-select size="small" v-model="swch" v-if="isScript" @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>
            <el-button size="small" @click="viewRunQuest" v-if="isDemon" :disabled="viewDisabled" type="success">加载任务
            </el-button>
            <el-button size="small" @click="viewRunPlan" v-if="runing" :disabled="viewDisabled">运行图预览</el-button>
            <el-button size="small" @click="loadRunPlan" v-if="!runing && !isPlan" :disabled="viewDisabled"
                type="warning">运行图加载</el-button>
            <el-button size="small" @click="setFault" v-if="mode==OperateMode.FAULT" type="danger">故障设置</el-button>
        </el-button-group>

        <el-radio-group size="small" v-model="mode" v-if="!isPlan" @change="changeOperateMode(mode)">
            <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, queryRunPlan } from '@/api/runplan';
    import { getEveryDayRunPlanData } from '@/api/simulation';

    export default {
        name: 'MenuSchema',
        props: {
            group: {
                type: String,
                required: true
            },
            offset: {
                type: Number,
                required: true
            }
        },
        data() {
            return {
                mode: OperateMode.NORMAL,
                OperateMode: OperateMode,
                viewDisabled: true,
                runing: false,
                swch: '02',
                swchList: [
                    { value: '01', name: '现地' },
                    { value: '02', name: '行调' },
                ]
            }
        },
        computed: {
            ...mapGetters('runPlan', [
                'stations',
            ]),
            isPlan() {
                return this.$route.params.mode === 'plan';
            },
            isScript() {
                return this.$route.params.mode === 'script';
            },
            isDemon() {
                return this.$route.params.mode === 'demon';
            },
        },
        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() {
            await this.loadRunData(this.$route.query);
        },
        methods: {
            loadRunData(opt) {
                this.$store.dispatch('runPlan/clear').then(() => {
                    if (opt && opt.skinStyle) {
                        this.viewDisabled = true;
                        getStationListBySkinStyle(opt.skinStyle).then(response => {
                            this.$store.dispatch('runPlan/setStations', response.data).then(() => {
                                if (this.$route.params.mode == 'plan') {
                                    // 测试运行图功能
                                    queryRunPlan(this.$route.query.planId).then(resp => {
                                        this.$store.dispatch('runPlan/setPlanData', resp.data);
                                        this.viewDisabled = false;
                                    }).catch(error => {
                                        this.$store.dispatch('runPlan/setPlanData', []);
                                        this.$messageBox(`获取运行图数据失败`);
                                    })
                                } else {
                                    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(`获取车站列表失败`);
                        });
                    }
                })
            },
            changeOperateMode(handle) {
                this.$store.dispatch('training/changeOperateMode', { mode: handle });
            },
            setRuning(run) {
                this.runing = run;
            },
            setFault() {
                this.$emit('faultChooseShow')
            },
            loadRunPlan() {
                this.$emit('runPlanLoadShow');
            },
            viewRunPlan() {
                this.$emit('runPlanViewShow');
            },
            viewRunQuest() {
                this.$emit('runQuestLoadShow');
            },
            switchMode(swch) {
                this.$emit('switchMode', swch);
            }
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .schema {
        z-index: 9;
        display: inline;
        position: absolute;
        right: 15px;
    }

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