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

<template>
  <div class="app-wrapper" style="height: 100%;">
    <map-create ref="mapCreate" :skin-code="skinCode" @refresh="refresh1" @editmap="handleNodeClick" />
    <div v-show="listShow" class="examList" :style="{width: widthLeft+'px'}">
      <demon-list ref="demonList" :width="widthLeft" @createMap="createMap" />
    </div>
    <drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
    <transition>
      <router-view :product-list="productList" />
    </transition>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import demonList from './demonList';
import drapLeft from '@/views/components/drapLeft/index';
import { launchFullscreen } from '@/utils/screen';
import localStore from 'storejs';
import { getSessionStorage, setSessionStorage } from '@/utils/auth';
import MapCreate from '@/views/map/mapdraft/mapmanage/create';
import { UrlConfig } from '@/router/index';

export default {
    name: 'DesignPlatform',
    components: {
        demonList,
        drapLeft,
        MapCreate
    },
    data() {
        return {
            listShow: true,
            widthLeft: Number(localStore.get('LeftWidth')) || 450,
            productList: [],
            skinCode: ''
        };
    },
    computed: {
        ...mapGetters([
            'lessonbar'
        ]),
        width() {
            return this.$store.state.app.width;
        }
    },
    watch: {
        'lessonbar.opened': function (val) {
            this.listShow = val;
        },
        widthLeft(val) {
            this.setMapResize(val);
        },
        '$store.state.app.windowSizeCount': function() {
            this.resize();
        }
    },
    mounted() {
        const againEnter = getSessionStorage('againEnter') || null;
        if (!againEnter) {
            launchFullscreen();
            setSessionStorage('againEnter', true);
        }
        this.resize();
        this.widthLeft = Number(localStore.get('LeftWidth'));
    },
    methods: {
        refresh() {
            this.$refs && this.$refs.demonList && this.$refs.demonList.loadInitData();
        },
        drapWidth(width) {
            this.widthLeft = Number(width);
        },

        createMap() {
            this.$refs.mapCreate.show();
        },

        refresh1() {
            this.$refs.demonList.loadInitData();
        },

        getSkinCode(node) {
            let next = node;
            while (next) {
                if (next.data && next.data.type == 'skin') {
                    this.skinCode = next.data.id;
                    break;
                }
                next = next.parent;
            }
        },
        handleNodeClick(obj, node) {
            this.getSkinCode(node);
            if (obj && obj.type == 'map') {
                this.editModel = obj;
                this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
                this.mapSelected({ view: 'draft' });
            }
        },
        mapSelected(data) {
            if (data && this.editModel) {
                this.$router.push({ path: `${UrlConfig.map.draft}/${this.editModel.id}/${data.view}`, query: { name: this.editModel.name } });
            }
        },
        resize() {
            this.widthLeft = Number(localStore.get('LeftWidth')) || this.widthLeft;
            const width = this.$store.state.app.width - 521 - this.widthLeft;
            const height = this.$store.state.app.height - 90;
            this.$store.dispatch('config/resize', { width: width, height: height });
        },
        setMapResize(LeftWidth) {
            const widths = this.$store.state.app.width - 521 - LeftWidth;
            const heights = this.$store.state.app.height - 90;
            this.$store.dispatch('config/resize', { width: widths, height: heights });
        }

    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .app-wrapper {
    @include clearfix;
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    .examList {
        float: left;
        height: 100%;
    }
</style>