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

<template>
  <div>
    <div class="schema" :style="{top: offset+'px'}">
      <el-select v-if="(isScript&&!isScriptCommand) || isDesignPlatform" 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>
      <!-- ||(isScriptCommand && isLocalStation)  -->
      <el-select v-if="showSelectStation&&((!isScriptCommand&&swch=='01')||(isScriptCommand && isLocalStation))" v-model="showStationContent" style="width: 100px;" size="small" @change="switchStationModeInfo">
        <el-option v-for="item in stationList" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
      <el-button-group>
        <el-button v-if="isDemon && isDesignPlatform && !dataError" size="small" :disabled="viewDisabled" type="success" @click="viewScriptRoles">{{ $t('display.schema.selectRoles') }}</el-button>
        <!-- 加载剧本 -->
        <el-button v-if="isDemon && !isDesignPlatform && !isScheduling && !dataError" size="small" :disabled="viewDisabled" type="success" @click="viewRunQuest">{{ $t('display.schema.loadScript') }}</el-button>
        <el-button v-if="notScript && runing && !dataError" size="small" :disabled="viewDisabled" @click="viewRunPlan">{{ $t('display.schema.previewRunDiagram') }}</el-button>
        <el-button v-if="!runing && notScript && !dataError" size="small" type="warning" @click="loadRunPlan">{{ $t('display.schema.loadRunDiagram') }}</el-button>
        <el-button v-if="mode==OperateMode.FAULT && !dataError" size="small" type="danger" @click="setFault">自动故障设置</el-button>
      </el-button-group>

      <el-radio-group v-if="!isScheduling && !dataError" 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">故障模式</el-radio-button>
      </el-radio-group>
    </div>
    <fault-choose v-if="isDemon || isScript" ref="faultChoose" :group="group" :offset="offset" />
    <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 {loadDraftScript, loadDraftScriptNew} from '@/api/designPlatform';
import { getEveryDayRunPlanNew, loadScriptNew } from '@/api/simulation';
import Vue from 'vue';

// 右上角操作
export default {
    name: 'MenuSchema',
    components: {
        RunPlanLoad,
        RunPlanView,
        FaultChoose,
        AddQuest
    },
    props: {
        offset: {
            type: Number,
            required: true
        },
        showSelectStation: {
            type: Boolean,
            default() {
                return false;
            }
        },
        stationList: {
            type: Array,
            default() {
                return [];
            }
        },
        showStation: {
            type: String,
            default() {
                return '';
            }
        },
        dataError: {
            type: Boolean,
            default() {
                return false;
            }
        }
    },
    data() {
        return {
            mode: OperateMode.NORMAL,
            OperateMode: OperateMode,
            viewDisabled: true,
            runing: false,
            swch: '02',
            showStationContent:'',
            isScriptCommand:false,
            swchList: [
                { value: '01', name: '现地' },
                { value: '02', name: '行调' }
            ]
        };
    },
    computed: {
        ...mapGetters('runPlan', [
            'stations'
        ]),
        group() {
            return this.$route.query.group;
        },
        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/displayNew/demon');
        },
        isScheduling() {
            return this.$route.query.prdType === '05';
        },
        isLocalStation() {
            return this.$store.state.training.prdType === '01';
        },
        drawWay() {
            const drawWay = this.$route.query.drawWay;
            return drawWay && JSON.parse(drawWay);
        }
    },
    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);
                }
            }
        },
        '$store.state.scriptRecord.bgSet':function (val) {
            this.isScriptCommand = val;
            if (!val) {
                this.swch = '01';
            }
        },
        'showStation':function(val) {
            this.showStationContent = val;
        },
        '$store.state.training.prdType':function(val) {
            if (val == '01') { this.switchModeInner('01'); } else { this.switchModeInner('02'); }
        }
    },
    async mounted() {
        await this.loadRunData(this.$route.query);
        // this.isScriptCommand = this.$store.state.scriptRecord.bgSet;
        // this.showStationContent = this.showStation;
    },
    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.dataError && 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, drawWay:this.$route.query.drawWay};
            this.$refs.addQuest.handleLoad(1, row);
        },
        async selectQuest(row, id, mapLocation, roleName) {
            try {
                let res;
                if (this.isDesignPlatform) {
                    res = this.drawWay ? await loadDraftScriptNew(id, this.group) : await loadDraftScript(row.id, id, this.group);
                } else {
                    res = await loadScriptNew(row.id, id, this.group);
                }
                if (res && res.code == 200) {
                    this.questId = parseInt(row.id);
                    if (mapLocation) {
                        const newMapLocation = {'offsetX': mapLocation.x, 'offsetY': mapLocation.y, 'scaleRate': mapLocation.scale};
                        Vue.prototype.$jlmap.setOptions(newMapLocation);
                    }
                }
                this.$emit('selectQuest', {row, roleName, id});
            } catch (error) {
                this.$messageBox(error.message);
            }
        },
        switchMode(swch) {
            this.$emit('switchMode', swch);
            this.switchModeInner(swch);
        },
        switchModeInner(swch) {
            let showMode = '03';
            if (swch == '01') {
                showMode = '03';
            } else if (swch == '02') {
                showMode = '02';
            }
            const nameList = Object.keys(this.$store.state.map.map || {});
            let list = [];
            nameList.forEach(item => {
                if (item !== 'skinVO') {
                    const data = this.$store.state.map.map[item];
                    if (data && data.constructor === Array) {
                        list = [...list, ...data];
                    }
                }
			});
            if (swch == '01') {
				this.$emit('switchStationMode', this.showStationContent); // 设置显示集中站元素
            } else {
				this.$jlmap.updateShowStation(list, ''); // 显示全部元素
			}
            this.$jlmap.updateShowMode(list, showMode); // 二次过滤
        },
        switchStationModeInfo(val) {
            this.showStationContent = val;
            this.$emit('switchStationMode', val);
        }
    }
};
</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>