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

<template>
  <span>
    <el-select v-if="$store.state.training.prdType === '01'" v-model="oldShowMemberId" :style="styleCss" size="small" @change="switchStationMode">
      <el-option v-for="item in stationListMode" :key="item.value" :label="item.name" :value="item.value" />
    </el-select>
    <el-select v-else-if="$store.state.training.prdType === '09'" v-model="oldShowMemberId" :style="styleCss" size="small" style="margin-right:20px;" @change="switchStationMode">
      <el-option v-for="item in depotListMode" :key="item.value" :label="item.name" :value="item.value" />
    </el-select>
  </span>
</template>
<script>
import { mapGetters } from 'vuex';
import { assignUsersPlayRoles } from '@/api/jointSimulation';
import { EventBus } from '@/scripts/event-bus';

export default {
    name:'SelectStation',
    props:{
        styleCss: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            stationListMode: [], // 设备集中站列表
            depotListMode: [],
            showMemberId: '', // 展示的值班站memberId
            oldShowMemberId: '',
            stationCentralizedMap: {},
            showStation: ''
        };
    },
    computed:{
        ...mapGetters('map', [
            'map',
            'stationList'
        ])
    },
    watch:{
        '$store.state.training.memberData': function (val) {
            this.initStationListMode();
        },
        '$store.state.training.simulationUserList': function(val) {
            this.initData();
        }
    },
    mounted() {
        this.initStationListMode();
        this.initData();
        EventBus.$on('switchStationMode', (stationCode) => {
            this.$store.state.training.memberList.filter(el => el.type == 'STATION_SUPERVISOR').find(el => {
                if (el.deviceCode == stationCode) {
                    this.oldShowMemberId = el.id;
                    this.switchStationMode(el.id);
                }
            });
        });
    },
    methods:{
        switchStationMode(val) {
            assignUsersPlayRoles([{ userId: this.$store.state.user.id, memberId: val}], this.$route.query.group).then(resp => {
                this.showMemberId = val;
                const member = this.$store.state.training.memberData[val];
                const station = this.$store.getters['map/getDeviceByCode'](member.deviceCode);
                if (station) {
                    this.showStation = station.code;
                    const showStationCode = this.stationCentralizedMap[station.code];
                    const mapDevice = this.$store.state.map.mapDevice;
                    const list = [];
                    for (const key in mapDevice) {
                        list.push(mapDevice[key]);
                    }
                    this.$store.dispatch('training/setRoleDeviceCode', station.code);
                    this.$jlmap.updateShowStation(list, showStationCode || station.code);
                    this.setCenter(showStationCode);
                }
            }).catch((err) => {
                console.log(err);
                this.showMemberId = this.oldShowMemberId;
                this.$message.error('调整角色成员失败！');
            });
        },
        setCenter(code) {
            if (this.$store.state.training.prdType === '09' && this.$store.state.map.map.displayList && this.$store.state.map.map.displayList.length) {
                const tempData = this.$store.state.map.map.displayList.find(item => { return item.stationCodeList.includes(code) && item.type === 'DEPOT_IL'; });
                const dataZoom = { offsetX: tempData.offsetX, offsetY: tempData.offsetY, scaleRate: tempData.scaleRate };
                this.$store.commit('map/setDataZoom', dataZoom);
                this.$jlmap.setDepot(dataZoom);
            } else {
                this.$jlmap.setCenter(code);
            }
        },
        initStationListMode() {
            this.stationListMode = [];
            this.$store.state.training.memberList.forEach(item => {
                if (item.type === 'STATION_SUPERVISOR') {
                    const station = this.$store.getters['map/getDeviceByCode'](item.deviceCode);
                    if (station) {
                        this.stationListMode.push({value:item.id, name: station.name});
                    }
                } else if (item.type === 'DEPOT_DISPATCHER') {
                    const station = this.$store.getters['map/getDeviceByCode'](item.deviceCode);
                    if (station) {
                        this.depotListMode.push({value:item.id, name: station.name});
                    }
                }
            });
        },
        initData() {
            this.$store.state.training.simulationUserList.forEach(item => {
                if (item.type === 'STATION_SUPERVISOR' && item.userId == this.$store.state.user.id) {
                    this.showMemberId = item.memberId;
                    this.oldShowMemberId = item.memberId;
                } else if (item.type === 'DEPOT_DISPATCHER' && item.userId == this.$store.state.user.id) {
                    this.showMemberId = item.memberId;
                    this.oldShowMemberId = item.memberId;
                }
            });
            this.stationList.forEach(item => {
                if (item.centralized) {
                    this.stationCentralizedMap[item.code] = item.code;
                    item.chargeStationCodeList.forEach(ele => {
                        this.stationCentralizedMap[ele] = item.code;
                    });
                }
            });
            if (this.showMemberId) {
                this.switchStationMode( this.showMemberId);
            }
        }
    }
};
</script>