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

<template>
    <div class="map-view">
        <jlmap-visual ref="jlmapVisual" @onSelect="clickEvent" @onMenu="onContextmenu" />
    </div>
</template>
<script>
    import JlmapVisual from '@/views/jlmap/index';
    import { loadMapData, loadMapDataById } from '@/utils/loaddata';
    export default {
        name: 'mapPreview',
        components: {
            JlmapVisual
        },
        data(){
            return{
                size: {
                    width: document.documentElement.clientWidth - 400,
                    height: document.documentElement.clientHeight-80
                },
            }
        },
        props: {
            widthLeft: {
                required: true
            }
        },
        computed: {
            mapId() {
                return this.$route.params.mapId;
            },
            height() {
                return this.$store.state.app.height - 50-30;
            }
        },
        async beforeDestroy() {
            // await this.clearAllTimer();
            // if (!this.isReplay) {
            //     await this.quit();
            // }
            // await this.$store.dispatch('training/reset');
            await this.$store.dispatch('map/mapClear');
            // EventBus.$off('clearCheckLogin');
        },
        watch: {
            widthLeft(val){
                this.setWindowSize();
            },
            $route() {
                this.$nextTick(() => {
                    this.initLoadData();
                });
            },
            // '$store.state.map.mapViewLoadedCount': function (val) {
            //     // this.subscribe();
            //     debugger;
            //     this.$store.dispatch('map/setTrainWindowShow', false);
            // },
            '$store.state.app.windowSizeCount': function() {
                this.setWindowSize();
            },
        },
        async mounted() {
            await this.setWindowSize();
            await this.initLoadData();
        },
        methods:{
            async initLoadData(){
                if (parseInt(this.mapId)) {
                    await this.loadMapDataById(this.mapId);
                } else {
                    this.endViewLoading();
                }
            },
            // 通过id加载地图数据
            async loadMapDataById(mapId) {
                try {
                    await loadMapDataById(mapId);
                    await this.$store.dispatch('training/setMapDefaultState');
                    await this.$store.dispatch('map/setTrainWindowShow', false);
                    await 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);
                });
            },
            clickEvent(em){

            },
            onContextmenu(em){

            },
            setWindowSize() {
                this.$nextTick(() => {
                    const width = this.$store.state.app.width-this.widthLeft;
                    const height = this.height;
                    this.$store.dispatch('config/resize', { width, height });
                    this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode });
                });
            }
        }
    };
</script>
<style lang="scss" scoped>
    .map-view {
        float: left;
        width: auto;
    }
</style>