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

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

<script>
    import Vue from 'vue';
    import MapCommon from './common/index';
    import StompClient from '@/utils/sock';
    import { handleToken } from '@/utils/auth';
    import { creatSubscribe, clearSubscribe, displayTopic, screenTopic, planTopic } from '@/utils/stomp';

    export default {
        name: 'MapSystemDraft',
        components: {
            MapCommon
        },
        data() {
            return {
                topic: '/user/queue/training',
                stomp: null,
                currentMap: null,
                mode: '',
            }
        },
        computed: {
            group() { return this.$route.query.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.currentMap = this.$refs.mapCommon;
            this.$nextTick(() => {
                setTimeout(() => {
                    this.$store.dispatch('config/resetCanvasOffset');
                }, 100);
            });
        },
        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('获取地图状态数据异常，请刷新页面重新加载。若多次遇到此类问题，请急时联系开发团队处理！', '提示', {
                    confirmButtonText: '确定',
                    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() {
                let header = { group: this.group || '', 'X-Token': handleToken() };

                if (this.mode === 'dp') {
                    creatSubscribe(screenTopic, header);
                } else if (this.mode === 'plan') {
                    creatSubscribe(planTopic, header);
                } else {
                    creatSubscribe(displayTopic, header);
                }

                await this.$store.dispatch('training/setHasSubscribed');
            },
            clearSubscribe() {
                if (this.mode === 'dp') {
                    clearSubscribe(screenTopic);
                } else if (this.mode === 'plan') {
                    clearSubscribe(planTopic);
                } else {
                    clearSubscribe(displayTopic);
                }
            },
            sendDeviceChangeEvent(data, header) {
                // 发送设备操作事件到服务器
                sendCommand('', data).then(response => {
                }).catch(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>