rt-sim-training-client/src/views/designPlatform/bigScreen.vue

<template>
  <div class="map-view">
    <jlmap-visual ref="jlmapVisual" />
    <div class="display-draft">
      <el-button-group>
        <el-button type="primary" @click="back">{{ $t('scriptRecord.scriptBack') }}</el-button>
      </el-button-group>
    </div>
  </div>
</template>
<script>
import JlmapVisual from '@/views/newMap/jlmapNew/index';
import { loadNewMapDataByGroup, loadMapDataById } from '@/utils/loaddata';
import { EventBus } from '@/scripts/event-bus';
import { mapGetters } from 'vuex';
import { creatSubscribe, clearSubscribe, displayTopic} from '@/utils/stomp';
import { getToken } from '@/utils/auth';

export default {
    name: 'MapPreview',
    components: {
        JlmapVisual
    },
    props: {
        widthLeft: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            size: {
                width: document.documentElement.clientWidth - 400,
                height: document.documentElement.clientHeight - 80
            }
        };
    },
    computed: {
        mapId() {
            return this.$route.params.mapId;
        },
        height() {
            return this.$store.state.app.height - 50 - 30;
        },
        ...mapGetters('config', [
            'canvasId'
        ])
    },
    watch: {
        widthLeft(val) {
            this.setWindowSize();
        },
        $route() {
            this.$nextTick(() => {
                this.initLoadData();
            });
        },
        '$store.state.app.windowSizeCount': function() {
            this.setWindowSize();
        },
        '$store.state.map.mapViewLoadedCount':function() {
            this.$store.dispatch('map/setTrainWindowShow', false);
            this.$jlmap.off('zoom');
            this.$jlmap.off('pan');
            this.handleUpdateScreen();
            this.subscribe();
        },
        '$store.state.socket.equipmentStatus': function (val) {
            if (val.length && this.$route.query.group) {
                this.statusMessage(val);
            }
        }
    },
    async beforeDestroy() {
        await this.$store.dispatch('map/mapClear');
    },
    async mounted() {
        await this.setWindowSize();
        await this.initLoadData();
    },
    methods: {
        async initLoadData() { // 加载地图数据
            if (this.$route.query.group) {
                await loadNewMapDataByGroup(this.$route.query.group);
            } else {
                await loadMapDataById(this.$route.params.mapId);
            }
        },
        async statusMessage(list) {
            await this.$store.dispatch('training/updateMapState', list);
            await this.$store.dispatch('socket/setEquipmentStatus');
        },
        // 通过id加载地图数据
        async loadMapDataById(mapId) {
            // try {
            //     await this.$store.dispatch('training/changeMode', { mode: null });
            //     loadMapDataById(mapId).then(()=>{
            //         this.$store.dispatch('training/over');
            //         this.$store.dispatch('training/setMapDefaultState');
            //         this.$store.dispatch('map/clearJlmapTrainView');
            //     });
            // } catch (error) {
            //     this.$messageBox(`获取地图数据失败: ${error.message}`);
            //     this.endViewLoading();
            // }
        },
        // 结束加载状态
        endViewLoading(isSuccess) {
            if (!isSuccess) {
                this.$store.dispatch('map/mapClear');
            }

            this.$nextTick(() => {
                EventBus.$emit('viewLoading', false);
            });
        },
        setWindowSize() {
            this.$nextTick(() => {
                if (this.widthLeft) {
                    const width = this.$store.state.app.width - (this.widthLeft || 450) - 2;
                    const height = this.height;
                    this.$store.dispatch('config/resize', { width, height });
                } else {
                    const width = this.$store.state.app.width - 2;
                    const height = this.$store.state.app.height;
                    this.$store.dispatch('config/resize', { width, height });
                }
            });
        },
        handleUpdateScreen() {
            if (this.widthLeft) {
                const size = {
                    width: this.$store.state.app.width - (this.widthLeft || 450) - 2,
                    height: this.height,
                    num: this.$theme.loadPropConvert(this.$store.state.map.map.skinVO.code).screenLine
                };
                this.$jlmap.setUpdateScreen(size);
            } else {
                const size = {
                    width: this.$store.state.app.width - 2,
                    height: this.$store.state.app.height,
                    num: this.$theme.loadPropConvert(this.$store.state.map.map.skinVO.code).screenLine
                };
                this.$jlmap.setUpdateScreen(size);
            }
            this.$refs.jlmapVisual.handleStateLoaded();
        },
        back() {
            this.$store.dispatch('training/over').then(() => {
                EventBus.$emit('runPlanStop');
                EventBus.$emit('chatSubscribeStop');
                history.go(-1);
            });
        },
        async subscribe() {
            this.clearSubscribe();
            const header = { group: this.$route.query.group || '', 'X-Token': getToken() };
            creatSubscribe(`${displayTopic}\/${this.$route.query.group}`, header);

            await this.$store.dispatch('training/setHasSubscribed');
        },
        clearSubscribe() {
            clearSubscribe(`${displayTopic}\/${this.$route.query.group}`);
        }
    }
};
</script>
<style lang="scss" scoped>
    .map-view {
        float: left;
        width: auto;
    }
	.display-draft {
        position: absolute;
        float: right;
        right: 15px;
        bottom: 15px;
    }
</style>