rt-sim-training-client/src/views/iscs/iscsDraw/iscsAfcOperate/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="BrakeMachine">
            <brake-machine
              ref="brakeMachine"
              style="width: 90%;"
              @createDataModel="createDataModel"
              @deleteDataModel="deleteDataModel"
            />
          </el-tab-pane>
          <el-tab-pane label="自动售货机" name="TicketMachine">
            <ticket-machine
              ref="ticketMachine"
              style="width: 90%"
              @createDataModel="createDataModel"
              @deleteDataModel="deleteDataModel"
            />
          </el-tab-pane>
          <el-tab-pane label="半自动售货机" name="SemiAutomaticTicketMachine">
            <semi-automatic-ticket-machine
              ref="semiAutomaticTicketMachine"
              style="width: 90%"
              @createDataModel="createDataModel"
              @deleteDataModel="deleteDataModel"
            />
          </el-tab-pane>
            <el-tab-pane label="文字" name="IscsText">
                <iscs-text
                    ref="iscsText"
                    style="width: 90%;"
                    @createDataModel="createDataModel"
                    @deleteDataModel="deleteDataModel">
                </iscs-text>
            </el-tab-pane>
            <el-tab-pane label="线段" name="IscsLine">
                <iscs-line
                    ref="iscsLine"
                    style="width: 90%;"
                    @createDataModel="createDataModel"
                    @deleteDataModel="deleteDataModel">
                </iscs-line>
            </el-tab-pane>
            <el-tab-pane label="矩形" name="IscsRect">
                <iscs-rect
                    ref="iscsRect"
                    style="width: 90%;"
                    @createDataModel="createDataModel"
                    @deleteDataModel="deleteDataModel">
                </iscs-rect>
            </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </transition>
</template>
<script>
import {deviceFactory} from '@/iscs/utils/parser';
import BrakeMachine from './brakeMachine';
import TicketMachine from './ticketMachine';
import SemiAutomaticTicketMachine from './semiAutomaticTicketMachine';
import IscsLine from '../iscsCommonElem/line';
import IscsText from '../iscsCommonElem/text';
import IscsRect from '../iscsCommonElem/rect';

export default {
    name: 'IscsOperate',
    components: {
        BrakeMachine,
        TicketMachine,
        SemiAutomaticTicketMachine,
        IscsLine,
        IscsRect,
        IscsText
    },
    mixins: [
    ],
    data() {
        return {
            enabledTab: 'brakeMachine',
            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() {
    },
    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);
            console.log(data);
        },
        handleTabClick() {

        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .map-control {
        float: right;
        width: 100%;
    }
    .heightClass{height:100%;}
</style>