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

<template>
    <div class="app-wrapper">
        <el-scrollbar wrap-class="scrollbar-wrapper">
            <div v-show="listShow" class="examList" :style="{width: widthLeft+'px'}">
                <demon-list ref="demonList" :height="height" :width="widthLeft"/>
            </div>
            <drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
            <transition>
                <!-- position:'relative', -->
                <!-- :style="{left:widthLeft+'px', width: (width - widthLeft)+'px'}"  -->
                <router-view :product-list="productList" :style="{width:(width - widthLeft)+'px',display:'inline-block'}"/>
            </transition>
        </el-scrollbar>
    </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';

    export default {
        name: 'DesignPlatform',
        components: {
            demonList,
            drapLeft,
            MapCreate
        },
        data() {
            return {
                listShow: true,
                widthLeft: Number(localStore.get('LeftWidth')) || 450,
                productList: [],
                skinCode: '',
            };
        },
        computed: {
            ...mapGetters([
                'lessonbar'
            ]),
            height() {
                return this.$store.state.app.height - 50;
            },
            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.refresh();
            },
            drapWidth(width) {
                this.widthLeft = Number(width);
            },

            refresh1() {

            },
            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 {
        // position: fixed;
        // top: 61px;
        float: left;
        height: 100%;
    }
</style>