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

<template>
  <transition name="el-zoom-in-center">
    <div class="mapPaint">
      <div class="map-view">
        <iscs-plate ref="iscsPlate" @iscsChange="iscsChange" />
      </div>
      <div class="map-draft">
        <iscs-operate v-if="iscsMode==='fas'" ref="iscsOperate" @iscsChange="iscsChange" />
        <iscs-bas-operate v-else-if="iscsMode==='bas'" ref="iscsBasOperate" @iscsChange="iscsChange" />
        <iscs-psd-operate v-else-if="iscsMode==='psd'" ref="iscsPsdOperate" @iscsChange="iscsChange" />
        <iscs-cctv-operate v-else-if="iscsMode==='cctv'" ref="iscsCctvOperate" @iscsChange="iscsChange" />
        <iscs-afc-operate v-else-if="iscsMode==='afc'" ref="iscsAfcOperate" @iscsChange="iscsChange" />
        <iscs-acs-operate v-else-if="iscsMode==='acs'" ref="iscsAcsOperate" @iscsChange="iscsChange" />
        <iscs-net-operate v-else-if="iscsMode==='netState'" ref="iscsNetOperate" @iscsChange="iscsChange" />
      </div>
    </div>
  </transition>
</template>
<script>
import localStore from 'storejs';
import IscsPlate from '@/views/iscsSystem/index';
import IscsOperate from './iscsOperate/index';
import IscsBasOperate from './iscsBasOperate/index';
import IscsPsdOperate from './iscsPsdOperate/index';
import IscsCctvOperate from './iscsCctvOperate/index';
import IscsAfcOperate from './iscsAfcOperate/index';
import IscsAcsOperate from './iscsAcsOperate/index';
import IscsNetOperate from './IscsNetOperate/index';
export default {
    name: 'IscsView',
    components: {
        IscsPlate,
        IscsOperate,
        IscsBasOperate,
        IscsPsdOperate,
        IscsCctvOperate,
        IscsAfcOperate,
        IscsAcsOperate,
        IscsNetOperate
    },
    data() {
        return {
            size: {
                width: this.$store.state.app.width - 521,
                height: this.$store.state.app.height - 60
            },
            widthLeft: Number(localStore.get('LeftWidth')) || 450
        };
    },
    computed:{
        iscsMode() {
            return this.$route.query.mode;
        }
    },
    watch: {
        $route(val) {
            this.iscsChange(this.$route.query.mode, this.$route.query.system, this.$route.query.part);
        }
    },
    mounted() {
        this.$refs.iscsPlate.show(this.$route.query.mode, this.$route.query.system, this.$route.query.part);
        this.$refs.iscsPlate.drawIscsInit();
    },
    beforeDestroy() {

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

    .map-draft{
        height:100%;
        /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>