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

<template>
  <div style="height:100%">
    <div class="schema" :style="{top: offset+'px'}">
      <!--<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>
        <el-button v-if="userRole=== 'STATION_SUPERVISOR' && !$route.query.projectDevice" size="small" @click="goIbp">IBP盘</el-button>
        <el-button v-if="userRole=== 'DISPATCHER' && !$route.query.projectDevice" size="small" @click="goBigScreen">大屏</el-button>
        <el-button v-if="userRole==='DISPATCHER' && !$route.query.projectDevice" size="small" @click="goIscs">ISCS</el-button>
        <el-button v-if="running && !dataError && $route.query.type !== 'ILW'" size="small" :disabled="viewDisabled" @click="viewRunPlan">{{ $t('joinTraining.runGraphPreview') }}</el-button>
        <template v-if="isAdmin">
          <el-button v-if="!running && !dataError && $route.query.type !== 'ILW'" size="small" type="warning" @click="loadRunPlan">
            {{ $t('joinTraining.runGraphLoading') }}</el-button><!-- 运行图加载 -->
        </template>
      </el-button-group>
      <el-button v-if="(isAdmin || $route.query.type === 'ILW') && !dataError && !isScreen" size="small" :type="faultMode ? '' : 'primary' " @click="changeOperateMode()">{{ faultMode?' 切换到普通模式':'切换到故障模式' }}</el-button>
      <!-- isCenter && !dataError && !isAdmin 此判断用于以后(目前 暂时不用) -->
      <el-button v-if="isShowDirective" size="small" :type="directiveMode ? 'primary' : ''" @click="changeDirectiveMode()">{{ directiveMode? '切换到普通模式':'切换到指令模式' }}</el-button>
    </div>
    <join-run-plan-view v-if="running && !dataError" ref="runPlanView" :group="group" />
    <select-ibp ref="selectIbp" />
  </div>

</template>
<script>
import { mapGetters } from 'vuex';
import { OperateMode } from '@/scripts/ConstDic';
import { getByGroupStationList } from '@/api/jmap/map';
import { getSessionStorage } from '@/utils/auth';
import JoinRunPlanView from '@/views/newMap/displayNew/demon/runPlanView';
import SelectIbp from '@/views/newMap/displayNew/demon/selectIbp';
import { getIbpInfoByStation } from '@/api/ibp';
import { loadRunPlanData } from '@/utils/loaddata';
export default {
    name: 'MenuDemonSchema',
    components:{
        JoinRunPlanView,
        SelectIbp
    },
    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 [];
            }
        },
        dataError: {
            type: Boolean,
            default() {
                return false;
            }
        },
        isAdmin: {
            type: Boolean,
            default() {
                return false;
            }
        },
        deviceCode: {
            type: String,
            default() {
                return '';
            }
        }
    },
    data() {
        return {
            mode: OperateMode.NORMAL,
            OperateMode: OperateMode,
            viewDisabled: true,
            realData: {},
            series: [],
            chiShowStation: '',
            kmRangeCoordMap: {},
            runPlanData: {},
            userId: '',
            faultMode: false,
            directiveMode: false,
            firstLoad: true
        };
    },
    computed: {
        ...mapGetters('runPlan', [
            'stations'
        ]),
        running() {
            return this.$store.state.training.started;
        },
        isScreen() {
            return this.$store.state.training.prdType === '07';
        },
        project() {
            return getSessionStorage('project');
        },
        isShowDirective() { // 哈尔滨项目 行调设备显示
            return this.$route.query.type == 'CW' && this.project == 'heb';
        }
    },
    watch: {
        // '$store.state.training.switchcount': async function () {
        //     if (this.group) {
        //         const started = this.$store.state.training.started;
        //         if (started && !this.firstLoad) {
        //             await this.loadRunData(this.$route.query);
        //         } else if (this.firstLoad) {
        //             await this.loadRunData(this.$route.query);
        //         }
        //     }
        // }
        '$store.state.map.mapDataLoadedCount': function () {
            this.loadRunData(this.$route.query);
        },
        '$store.state.training.triggerFaultCount': function () {
            this.setFault();
        },
        '$store.state.runPlan.loadRunPlanCount': function () {
            this.viewDisabled = false;
            this.firstLoad = false;
        }
    },
    async mounted() {
        this.userId = this.$store.state.user.id;
    },
    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(() => {
                            loadRunPlanData(this.group, this.dataError);
                        });
                    }).catch(() => {
                        this.$messageBox(this.$t('error.obtainStationListFailed'));
                    });
                }
            });
        },
        // initPlannedDriving(isDisable) {
        //     this.isDisable = isDisable;
        // },
        changeOperateMode() {
            this.faultMode = !this.faultMode;
            let mode = OperateMode.NORMAL;
            if (this.faultMode) {
                mode = OperateMode.FAULT;
            }
            this.$store.dispatch('training/changeOperateMode', { mode: mode });
        },
        changeDirectiveMode() { // 调整指令模式
            this.directiveMode = !this.directiveMode;
            let mode = OperateMode.NORMAL;
            if (this.directiveMode) {
                mode = OperateMode.DIRECTIVE;
            }
            this.$store.dispatch('training/changeOperateMode', { mode: mode });
        },
        setFault() {
            this.$emit('faultChooseShow');
        },
        loadRunPlan() {
            this.$emit('runPlanLoadShow');
        },
        viewRunPlan() {
            this.$refs.runPlanView.doShow();
        },
        // 选择车站
        switchStationMode(stationCode) {
            this.$emit('switchStationMode', stationCode);
        },
        // 点击大屏预览
        goBigScreen() {
            const routeData = this.$router.resolve({
                path:`/displayBigScreen/${this.$route.query.mapId}`,
                query:{
                    lineCode: this.$route.query.lineCode,
                    mapId:this.$route.query.mapId,
                    group:this.$route.query.group,
                    prdType: '07',
                    try:0,
                    noPreLogout: true
                }
            });
            window.open(routeData.href, '_blank', 'noopener noreferrer');
        },
        goIscs() {
            const routeData = this.$router.resolve({
                path:`/displayIscs/system`,
                query:{
                    lineCode: this.$route.query.lineCode,
                    mapId: this.$route.query.mapId,
                    group: this.$route.query.group,
                    noPreLogout: true
                }
            });
            window.open(routeData.href, '_blank', 'noopener noreferrer');
        },
        // 点击ibp预览
        goIbp() {
            // this.$refs.selectIbp.doShow();
            getIbpInfoByStation(this.$route.query.mapId, this.deviceCode).then(resp => {
                if (resp.data) {
                    const routeData = this.$router.resolve({
                        path:`/ibpShow`,
                        query:{
                            lineCode: this.$route.query.lineCode,
                            mapId: this.$route.query.mapId,
                            group: this.$route.query.group,
                            stationCode: this.deviceCode,
                            loadAll: true,
                            noPreLogout: true
                        }
                    });
                    window.open(routeData.href, '_blank', 'noopener noreferrer');
                } else {
                    this.$messageBox('本车站暂无IBP盘数据！');
                }
            }).catch((error) => {
                if (error.code == '10007') {
                    this.$messageBox('本车站暂无IBP盘数据！');
                } else {
                    this.$message.error('获取IBP盘数据异常');
                }
            });

        }
    }
};
</script>
<style>
    .schema {
        z-index: 18;
        display: inline;
        position: absolute;
        right: 5px;
    }

    .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>