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

<template>
  <div>
    <div class="schema" :style="{top: offset+'px'}">
      <el-select v-if="isScript" 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>

      <el-button-group>
        <el-button v-if="isDemon && isDesignPlatform" size="small" :disabled="viewDisabled" type="success" @click="viewScriptRoles">{{ $t('display.schema.selectRoles') }}</el-button>
        <!-- 加载剧本 -->
        <el-button v-if="isDemon && !isDesignPlatform" size="small" :disabled="viewDisabled" type="success" @click="viewRunQuest">{{ $t('display.schema.loadScript') }}</el-button>
        <el-button v-if="notScript && runing" size="small" :disabled="viewDisabled" @click="viewRunPlan">{{ $t('display.schema.previewRunDiagram') }}</el-button>
        <el-button v-if="!runing && notScript" size="small" :disabled="viewDisabled" type="warning" @click="loadRunPlan">{{ $t('display.schema.loadRunDiagram') }}</el-button>
        <el-button v-if="mode==OperateMode.FAULT" size="small" type="danger" @click="setFault">{{ $t('display.schema.faultSetting') }}</el-button>
      </el-button-group>

      <el-radio-group v-model="mode" size="small" @change="changeOperateMode(mode)">
        <el-radio-button class="mode" :label="OperateMode.NORMAL">{{ $t('display.schema.normalOperation') }}</el-radio-button>
        <el-radio-button class="mode" :label="OperateMode.FAULT">{{ $t('display.schema.faultOperation') }}</el-radio-button>
      </el-radio-group>
    </div>
    <fault-choose v-if="isDemon || isScript" ref="faultChoose" :group="group" />
    <run-plan-Load ref="runPlanLoad" :group="group" />
    <run-plan-view ref="runPlanView" :group="group" />
    <!-- 加载剧本列表弹窗 -->
    <add-quest ref="addQuest" @selectQuest="selectQuest" />
  </div>
</template>
<script>
import RunPlanLoad from './demon/runPlanLoad';
import RunPlanView from './demon/runPlanView';
import FaultChoose from './demon/faultChoose';
import AddQuest from './demon/addQuest';
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: 'MenuSchema',
    components: {
        RunPlanLoad,
        RunPlanView,
        FaultChoose,
        AddQuest
    },
    props: {
        group: {
            type: String,
            required: true
        },
        offset: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            mode: OperateMode.NORMAL,
            OperateMode: OperateMode,
            viewDisabled: true,
            runing: false,
            swch: '01',
            swchList: [
                { value: '01', name: '现地' },
                { value: '02', name: '行调' }
            ]
        };
    },
    computed: {
        ...mapGetters('runPlan', [
            'stations'
        ]),
        notScript() {
            return this.$route.params.mode !== 'script';
        },
        isScript() {
            return this.$route.params.mode === 'script';
        },
        isDemon() {
            return this.$route.params.mode === 'demon';
        },
        isDesignPlatform() {
            return this.$route.fullPath.includes('design/display/demon');
        }
    },
    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() {
        await this.loadRunData(this.$route.query);
    },
    methods: {
        loadRunData(opt) {
            this.$store.dispatch('runPlan/clear').then(() => {
                if (opt && opt.mapId) {
                    this.viewDisabled = true;
                    getByGroupStationList(this.$route.query.group).then(response => {
                        // getStationList(opt.mapId).then(response => {
                        this.$store.dispatch('runPlan/setStations', response.data).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('display.schema.todayRunDiagramNoLoad'));
                                } else {
                                    this.$messageBox(this.$t('display.schema.getRunDiagramFail'));
                                }
                            });
                        });
                    }).catch(() => {
                        this.$messageBox(this.$t('display.schema.getStationListFail'));
                    });
                }
            });
        },
        changeOperateMode(handle) {
            this.$store.dispatch('training/changeOperateMode', { mode: handle });
        },
        setRuning(run) {
            this.runing = run;
        },
        setFault() {
            this.$refs.faultChoose.doShow();
        },
        loadRunPlan() {
            this.$refs.runPlanLoad.doShow();
        },
        viewRunPlan() {
            this.$refs.runPlanView.doShow();
        },
        viewRunQuest() {
            this.$refs.addQuest.doShow();
        },
        viewScriptRoles() {
            const row = {id: this.$route.query.scriptId, group:this.$route.query.group};
            this.$refs.addQuest.handleLoad(1, row);
        },
        selectQuest(row, id, mapLocation, roleName) {
            this.$emit('selectQuest', row, id, mapLocation, roleName);
        },
        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>