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

<template>
  <transition name="el-zoom-in-center">
    <div class="map-control heightClass ">
      <el-card type="border-card" class="heightClass">
        <div slot="header" class="clearfix">
          <el-button
            type="text"
            style="float: right; padding: 3px 0; margin-right: 5px;"
            @click="handleSave"
          >{{ $t('ibp.save') }}</el-button>
        </div>
        <el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
          <el-tab-pane label="按钮" name="IscsButton">
            <iscs-button
              ref="iscsButton"
              style="width: 100%;height: 100%;"
              @createDataModel="createDataModel"
              @deleteDataModel="deleteDataModel"
            />
          </el-tab-pane>
          <el-tab-pane label="文字" name="IscsText">
            <iscs-text
              ref="iscsText"
              style="width: 100%;height: 100%;"
              @createDataModel="createDataModel"
              @deleteDataModel="deleteDataModel"
            />
          </el-tab-pane>
          <el-tab-pane label="线段" name="IscsLine">
            <iscs-line
              ref="iscsLine"
              style="width: 100%;height: 100%;"
              @createDataModel="createDataModel"
              @deleteDataModel="deleteDataModel"
            />
          </el-tab-pane>
          <el-tab-pane label="矩形" name="IscsRect">
            <iscs-rect
              ref="iscsRect"
              style="width: 100%;height: 100%;"
              @createDataModel="createDataModel"
              @deleteDataModel="deleteDataModel"
            />
          </el-tab-pane>
          <el-tab-pane label="文字矩形组合" name="RectText">
            <iscs-rect-text
              ref="iscsRectText"
              style="width: 100%;height: 100%;"
              @createDataModel="createDataModel"
              @deleteDataModel="deleteDataModel"
            />
          </el-tab-pane>
          <el-tab-pane label="屏蔽门" name="FuzhouPsd">
            <fuzhou-psd
              ref="fuzhouPsd"
              style="width: 100%;height: 100%;"
              @createDataModel="createDataModel"
              @deleteDataModel="deleteDataModel"
            />
          </el-tab-pane>
          <el-tab-pane label="图片" name="IscsPicture">
            <iscs-picture
              ref="iscsPicture"
              style="width: 100%;height: 100%;"
              @createDataModel="createDataModel"
              @deleteDataModel="deleteDataModel"
            />
          </el-tab-pane>
          <el-tab-pane label="表格" name="StateTable">
            <state-table
              ref="stateTable"
              style="width: 100%;height: 100%;"
              @createDataModel="createDataModel"
              @deleteDataModel="deleteDataModel"
            />
          </el-tab-pane>
          <el-tab-pane label="三角形" name="IscsTriangle">
            <iscs-triangle
              ref="iscsTriangle"
              style="width: 100%;height: 100%;"
              @createDataModel="createDataModel"
              @deleteDataModel="deleteDataModel"
            />
          </el-tab-pane>
          <el-tab-pane label="圆形" name="IscsCircle">
            <iscs-circle
              ref="iscsCircle"
              style="width: 100%;height: 100%;"
              @createDataModel="createDataModel"
              @deleteDataModel="deleteDataModel"
            />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </transition>
</template>
<script>
import {deviceFactory} from '@/iscs/utils/parser';
import IscsLine from '../icscComponents/line';
import IscsText from '../icscComponents/text';
import IscsRect from '../icscComponents/rect';
import IscsPicture from '../icscComponents/picture';
import IscsTriangle from '../icscComponents/triangle';
import StateTable from '../icscComponents/stateTable';
import IscsCircle from '../icscComponents/circle';
import IscsButton from '../icscComponents/button';
import IscsRectText from '../iscsCommonElem/rectText';
import FuzhouPsd from '../iscsCommonElem/fuzhouPsd';

export default {
    name: 'IscsOperate',
    components: {
        IscsRect,
        IscsLine,
        IscsText,
        IscsButton,
        IscsRectText,
        IscsTriangle,
        IscsCircle,
        StateTable,
        IscsPicture,
        FuzhouPsd
    },
    mixins: [
    ],
    data() {
        return {
            enabledTab: 'IscsButton',
            data: '',
            stationCode: ''
        };
    },
    computed: {
        height() {
            return this.$store.state.config.height;
        }
    },
    watch: {
        '$store.state.iscs.rightClickCount': function (val) {
            const model = this.$store.getters['iscs/updateDeviceData'];
            this.enabledTab = model._type;
        }
    },
    mounted() {
        this.$emit('iscsChange', this.$route.params.id);
    },
    beforeDestroy() {

    },
    methods: {
        createDataModel(model) {
            const newModel = deviceFactory(model._type, model);
            this.$store.dispatch('iscs/updateIscsDevices', newModel.model);
        },
        deleteDataModel(model) {
            this.$store.dispatch('iscs/deleteIscsDevices', model);
        },
        handleSave() {
            const data = JSON.stringify(this.$store.state.iscs.iscs);
            this.$emit('handleSave', data);
        },
        handleTabClick() {

        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
	.map-control {
		float: right;
		width: 100%;
		height: 100%;
		.border-card{
			height: 100%;
		}
	}
	.mapEdit{
		height: calc(100% - 47px);
		.tab_pane_box{
			height: 100%;
		}
	}
	/deep/ .el-card__body{
		height:100%;
	}
	/deep/ {
		.mapEdit .el-tabs__nav-wrap.is-scrollable  {
			padding: 0 20px;
		}
		.mapEdit .el-tabs__header .el-tabs__item.is-active {
			border-bottom-color: #f5f7fa;
			background: #f5f7fa;
		}
		.mapEdit .el-tabs__active-bar{
			background: transparent;
		}
		.mapEdit .el-tabs__content {
			height: calc(100% - 56px);
		}
		.mapEdit .el-tab-pane {
			height: 100%;
		}
		.card .el-tabs__nav .el-tabs__item.is-active {
			border-bottom: 2px solid #E4E7ED;
			background: #409eff;
			color: #fff;
		}
		.card .el-tabs__nav .el-tabs__item{
			padding: 0 20px!important;
		}

		.mapEdit .el-tabs__nav-prev {
			width: 20px;
			height: 41px;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 1px 1px 4px #ccc;
		}

		.mapEdit .el-tabs__nav-next {
			width: 20px;
			height: 41px;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 1px 1px 4px #ccc;
		}
	}
    .heightClass{height:100%;}
</style>