rt-sim-training-client/src/views/system/iscsDraw/index.vue

<template>
  <transition name="el-zoom-in-center">
    <div class="mapPaint">
      <div class="map-view">
        <iscs-plate ref="iscsPlate" />
      </div>
      <div class="map-draft">
        <iscs-operate ref="iscsOperate" @iscsChange="iscsChange" />
      </div>
    </div>
  </transition>
</template>
<script>
import IscsPlate from '@/views/iscsSystem/index';
import IscsOperate from './iscsOperate/index';

export default {
    name: 'IscsView',
    components: {
        IscsPlate,
        IscsOperate
    },
    data() {
        return {
            size: {
                width: this.$store.state.app.width - 521,
                height: this.$store.state.app.height - 60
            }
        };
    },
    watch: {

    },
    created() {
    },
    mounted() {
        this.$refs.iscsPlate.show();
        this.$refs.iscsPlate.drawIscsInit();
    },
    beforeDestroy() {

    },
    methods: {
        iscsChange() {
            this.$refs.iscsPlate.drawIscsInit();
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .map-draft{
    /deep/{
    .v-modal{
        opacity: 0;
    }
    }
    }

    .map-view {
        float: left;
        width: 60%;
    }
    .mapPaint{
        height: 100%;
        overflow: hidden;
    }
    .map-draft {
        float: right;
        width: 520px;

    // /deep/ .el-scrollbar__view {
       // width: 510px !important;
       // height: calc(100% - 40px);
       // }
    }
</style>