rt-sim-training-client/src/views/mapsystem/index.vue

<template>
  <div class="mainContext">
    <map-common ref="mapCommon" />
  </div>
</template>

<script>
import MapCommon from './common/index';
import { getToken } from '@/utils/auth';
import { creatSubscribe, clearSubscribe, displayTopic} from '@/utils/stomp';
import { sendCommand } from '@/api/jmap/training';
import { getSessionStorage } from '@/utils/auth';

export default {
    name: 'MapSystemDraft',
    components: {
        MapCommon
    },
    data() {
        return {
            topic: '/user/queue/training',
            stomp: null,
            currentMap: null,
            mode: '',
            isDesignPlatform: false,
            group: ''
        };
    },
    watch: {
        '$store.state.map.mapViewLoadedCount': function (val) {
            this.subscribe();
        },
        '$store.state.socket.equipmentStatus': function (val) {
            if (val.length) {
                this.statusMessage(val);
            }
        },
        '$store.state.socket.trainStationList': function (val) {
            if (val.length) {
                this.runFactMessage(val);
            }
        },
        '$store.state.socket.simulationError': function (val) {
            if (val) {
                this.simulationError(val);
            }
        },
        '$store.state.socket.simulationReset': function (val) {
            if (val) {
                this.simulationReset(val);
            }
        }
    },
    mounted() {
        window.onbeforeunload = this.clearSubscribe;
        this.mode = this.$route.params.mode || '';
        this.group = this.$route.query.group || '';
        this.currentMap = this.$refs.mapCommon;
        this.$nextTick(() => {
            setTimeout(() => {
                this.$store.dispatch('config/resetCanvasOffset');
            }, 100);
        });
        this.isDesignPlatform = getSessionStorage('project').startsWith('design');
    },
    beforeDestroy() {
        this.clearSubscribe();
    },
    methods: {
        async mapViewLoaded(loading) {
            this.currentMap.mapViewLoaded(loading);
        },
        async statusMessage(list) {
            await this.$store.dispatch('training/updateMapState', list);
            await this.$store.dispatch('socket/setEquipmentStatus');
        },
        async runFactMessage(list) {
            await this.$store.dispatch('runPlan/updateRunPlanData', list);
            await this.$store.dispatch('socket/setTrainStationList');
        },
        async simulationError() {
            await this.$store.dispatch('map/clearJlmapTrainView');
            await this.$store.dispatch('map/setTrainWindowShow', false);
            await this.$store.dispatch('socket/setSimulationError');
            await this.$store.dispatch('training/setMapDefaultState');
            this.clearSubscribe();
            this.$confirm(this.$t('tip.getMapStateDataException'), this.$t('tip.hint'), {
                confirmButtonText: this.$t('global.confirm'),
                showCancelButton: false,
                type: 'warning'
            }).then(() => {
                this.$emit('back');
            }).catch(() => {
            });
        },
        async simulationReset() {
            await this.$store.dispatch('map/clearJlmapTrainView');
            await this.$store.dispatch('map/setTrainWindowShow', false);
            await this.$store.dispatch('training/over');
            await this.$store.dispatch('socket/setSimulationReset');
            await this.$store.dispatch('socket/setSimulationStart');
            await this.$store.dispatch('training/setMapDefaultState');
        },
        async subscribe() {
            this.clearSubscribe();
            const header = { group: this.group || '', 'X-Token': getToken() };
            creatSubscribe(`${displayTopic}\/${this.group}`, header);

            await this.$store.dispatch('training/setHasSubscribed');
        },
        clearSubscribe() {
            clearSubscribe(`${displayTopic}\/${this.group}`);
        },
        sendDeviceChangeEvent(data, header) {
            // 发送设备操作事件到服务器
            sendCommand('', data).then(response => {
            }).catch(error => {
                console.error(error);
            });
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .mainContext {
        font-family: "Helvetica Neue ", Helvetica, "PingFang SC ", "Hiragino Sans GB ", "Microsoft YaHei ", "PingFang SC ", Arial, consolas;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
</style>