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

<template>
  <div class="designPlatform" :style="'padding-left:'+(widthLeft)+'px'">
    <div class="designPubMapList" :style="{width: widthLeft+'px'}">
      <demon-list ref="demonList" />
      <drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
    </div>
    <transition>
      <router-view :width-left="widthLeft" />
    </transition>
  </div>
</template>

<script>
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';

export default {
    name: 'DesignPlatform',
    components: {
        demonList,
        drapLeft
    },
    data() {
        return {
            widthLeft: Number(localStore.get('LeftWidth')) || 450
        };
    },
    computed: {
        width() {
            return this.$store.state.app.width;
        }
    },
    watch: {
        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')) || 450;
    },
    methods: {
        drapWidth(width) {
            this.widthLeft = Number(width);
        },
        resize() {
            this.widthLeft = Number(localStore.get('LeftWidth')) || this.widthLeft;
            const width = this.$store.state.app.width - 521 - this.widthLeft;
            this.$store.dispatch('config/resize', { width: width });
        },
        setMapResize(LeftWidth) {
            const widths = this.$store.state.app.width - 521 - LeftWidth;
            this.$store.dispatch('config/resize', { width: widths });
        }

    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .designPlatform {
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    .designPubMapList {
        position:absolute;
        left:0;
        top:0;
        height: 100%;
    }
</style>