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

<template>
  <div class="map-view">
    <jlmap-visual ref="jlmapVisual" @onMenu="onContextmenu" />
    <pop-menu ref="popMenu" :menu="menu" :pop-class="'preview_new_pop'" />
  </div>
</template>
<script>
import JlmapVisual from '@/views/newMap/jlmapNew/index';
import { loadMapDataById } from '@/utils/loaddata';
import { EventBus } from '@/scripts/event-bus';
import { DeviceMenu, getDeviceMenuByDeviceType } from '@/scripts/ConstDic';
import PopMenu from '@/components/PopMenu';
import { mapGetters } from 'vuex';

export default {
    name: 'MapPreview',
    components: {
        JlmapVisual,
        PopMenu
    },
    props: {
        widthLeft: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            size: {
                width: document.documentElement.clientWidth - 400,
                height: document.documentElement.clientHeight - 80
            },
            menu: [],
            menuNormal: []
        };
    },
    computed: {
        ...mapGetters('map', [
            'stationList'
        ]),
        mapId() {
            return this.$route.params.mapId;
        },
        height() {
            return this.$store.state.app.height - 50 - 30;
        }
    },
    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);
        },
        '$store.state.menuOperation.menuCount': function (val) {
            if (this.$store.getters['menuOperation/checkDialogIsOpen'](DeviceMenu.Cancel)) {
                this.popDoShow(this.$store.state.menuOperation.menuPosition);
            } else {
                this.popDoClose();
            }
        }
    },
    async beforeDestroy() {
        await this.$store.dispatch('map/mapClear');
    },
    async mounted() {
        await this.setWindowSize();
        await this.initLoadData();
    },
    methods: {
        async initLoadData() { // 加载地图数据
            if (parseInt(this.mapId)) {
                await this.loadMapDataById(this.mapId);
            } else {
                this.endViewLoading();
            }
        },
        onContextmenu(em) {
            const point = { x: em.clientX, y: em.clientY };
            if (!em.deviceType) {
                var menu = getDeviceMenuByDeviceType('Cancel');
                this.$store.dispatch('menuOperation/setPopMenu', { position: point, menu: menu });
            }
        },
        // 设置地图定位
        mapLocation(item) {
            if (item) {
                this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: item.code });
                this.popDoClose();
            }
        },
        initMenu() {
            this.menuNormal = [];
            this.stationList.forEach(station => {
                if (station.chargeStationCodeList && station.chargeStationCodeList.length) {
                    const node = {
                        label: station.name,
                        children: [{
                            code: station.code,
                            label: station.name,
                            handler: this.mapLocation
                        }]
                    };
                    station.chargeStationCodeList.forEach(item => {
                        const next = this.$store.getters['map/getDeviceByCode'](item);
                        node.children.push({
                            code: next.code,
                            label: next.name,
                            handler: this.mapLocation
                        });
                    });
                    this.menuNormal.push(node);
                }
            });
            this.menu = [...this.menuNormal];
        },
        popDoShow(point) {
            this.popClickEvent();
            this.initMenu();
            if (this.$refs && this.$refs.popMenu && this.menu && this.menu.length) {
                this.$refs.popMenu.resetShowPosition(point);
            }
        },
        popClickEvent() {
            const self = this;
            window.onclick = function (e) {
                self.popDoClose();
            };
        },
        popDoClose() {
            if (this.$refs && this.$refs.popMenu) {
                this.$refs.popMenu.close();
            }
        },
        // 通过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(() => {
                const width = this.$store.state.app.width - (this.widthLeft || 450) - 2;
                const height = this.height;
                this.$store.dispatch('config/resize', { width, height });
            });
        }
    }
};
</script>
<style lang="scss" scoped>
    .map-view {
        float: left;
        width: auto;
	}
	/deep/ {
		.preview_new_pop{
			background: #f1ecec;
			.pop-menu {
				background: #5F9EA0;
			}
		}
	}
</style>