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

<template>
  <el-select 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>
</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: [], // 设备集中站列表
            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 nameList = Object.keys(this.$store.state.map.map || {});
                let list = [];
                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];
                    nameList.forEach(item => {
                        if (this.$store.state.map.map[item] && this.$store.state.map.map[item].constructor === Array) {
                            if (item === 'trainList') {
                                this.$store.state.map.map[item].forEach(elem => {
                                    elem && list.push(elem);
                                });
                            } else {
                                list = [...list, ...this.$store.state.map.map[item]];
                            }
                        }
                    });
                    this.$jlmap.updateShowStation(list, showStationCode);
                    this.setCenter(showStationCode);
                }
            }).catch((err) => {
                console.log(err);
                this.showMemberId = this.oldShowMemberId;
                this.$message.error('调整角色成员失败！');
            });
        },
        setCenter(code) {
            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});
                    }
                }
            });
        },
        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;
                }
            });
            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>