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" :class="{'hide': draftShow}">
        <div class="btn_left_box" @click="clickRightBtn"><i :class="draftShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
        <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,
            draftShow: false
        };
    },
    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();
        },
        clickRightBtn() {
            this.draftShow = !this.draftShow;
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .map-draft{
		width: 420px;
		height: 100%;
		position: absolute;
		right: 0;
		transform: translateX(420px);
		transition: all 0.5s;
		background: #fff;
		z-index: 9;
		/deep/{
			.v-modal{
				opacity: 0;
			}
		}
		&.hide{
			transform: translateX(0);
		}
    }

    .map-view {
        float: left;
        width: 60%;
    }
    .mapPaint{
        height: 100%;
        overflow: hidden;
    }
	.btn_left_box{
		position: absolute;
		left: 0;
		top: 50%;
		padding: 8px 3px;
		background: #fff;
		z-index: 10;
		transform: translateX(-22px);
		cursor: pointer;
		border-radius: 5px 0 0 5px;
	}
</style>