rt-sim-training-client/src/views/newMap/newMapdraft/mapoperate/index.vue

<template>
  <transition name="el-zoom-in-center">
    <div class="map-control">
      <div class="border-card">
        <div class="map-operate">
          <span>
            {{ $t('map.mapName') }}
            <b>{{ mapInfo.name }}</b>
          </span>
          <el-button v-if="isSave" type="text" style="float: right; padding: 3px 0" :disabled="$attrs.mapSaveing" @click="saveMapEvent">{{ $t('map.save') }}</el-button>
          <el-dropdown class="operate-button" trigger="click">
            <span class="el-dropdown-link">数据操作</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><span style="display:block;" :disabled="$attrs.mapSaveing" @click="verifyMapEvent">{{ $t('map.dataVerification') }}</span></el-dropdown-item>
              <el-dropdown-item><span style="display:block;" :disabled="$attrs.mapSaveing" @click="generateCIEvent">生成联锁</span></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="text" class="operate-button" @click="dataRelation">{{ $t('map.advanced') }}</el-button>
          <el-button type="text" class="operate-button" @click="showMap">绘图显隐</el-button>
        </div>
        <el-tabs v-show="projectType" v-model="enabledTab" class="mapEdit" type="card">
          <el-tab-pane v-for="(each,index) in tabList" :key="index" :label="each.label" class="tab_pane_box" :name="each.name" :lazy="lazy">
            <component
              :is="each.menus"
              :ref="each.name"
              :selected="selected"
              v-bind="$attrs"
              v-on="$listeners"
              @deviceSelect="deviceSelect"
            />
          </el-tab-pane>
        </el-tabs>
        <template v-show="!projectType">
          <split-screen
            ref="splitScreen"
            :selected="selected"
          />
        </template>
      </div>
    </div>
  </transition>
</template>

<script>
import SectionDraft from './section/index';
import SwitchDraft from './switch/index';
import SignalDraft from './signal/index';
import StationDraft from './station';
import StationStandDraft from './stationstand';
import PsdDraft from './psdDraft';
import EspDraft from './espDraft';
import TrainDraft from './train/index';
import LineDraft from './line';
import PowerDraft from './power';
import TextDraft from './text';
import ControlDraft from './ControlDraft';
import TrainWindowDraft from './trainwindow';
import ZcControlDraft from './zcControl';
import OutFrameDraft from './outFrameControl';
import LcControlDraft from './lcControl';
import ImageControlDraft from './ImageControl';
import CheckboxDraft from './checkboxDraft';
import ControlLamp from './controlLamp';
import SplitStation from './splitStation';
import Arrow from './arrow';
import SplitScreen from './splitScreen';
import { EventBus } from '@/scripts/event-bus';

export default {
    name: 'MapOperate',
    components: {
        // CounterDraft,
        SectionDraft,
        SwitchDraft,
        SignalDraft,
        StationDraft,
        StationStandDraft,
        PsdDraft,
        EspDraft,
        ControlDraft,
        TrainWindowDraft,
        TrainDraft,
        LineDraft,
        PowerDraft,
        TextDraft,
        ZcControlDraft,
        OutFrameDraft,
        LcControlDraft,
        ImageControlDraft,
        CheckboxDraft,
        ControlLamp,
        SplitStation,
        Arrow,
        SplitScreen
    },
    props: {
        selected: {
            type: Object,
            default: function () {
                return null;
            }
        },
        mapInfo: {
            type: Object,
            default: function() { return {name: this.$t('map.pleaseSelectMap')}; }
        }
    },
    data() {
        return {
            lazy: true,
            tabList:[
                {label:this.$t('map.section'), name:'Section', menus:SectionDraft},
                {label:this.$t('map.switch'), name:'Switch', menus:SwitchDraft},
                {label:this.$t('map.station'), name:'Station', menus:StationDraft},
                {label:this.$t('map.signal'), name:'Signal', menus:SignalDraft},
                {label:this.$t('map.platform'), name:'StationStand', menus:StationStandDraft},
                {label:this.$t('map.psd'), name:'Psd', menus:PsdDraft},
                {label:this.$t('map.platformEmergencyStop'), name:'Esp', menus:EspDraft},
                {label:this.$t('map.trainWindow'), name:'TrainWindow', menus:TrainWindowDraft},
                {label:this.$t('map.zcZoneControl'), name:'ZcControl', menus:ZcControlDraft},
                {label:this.$t('map.functionButton'), name:'ControlDraft', menus:ControlDraft},
                {label:this.$t('map.saidLamp'), name:'ControlLamp', menus:ControlLamp},
                {label:this.$t('map.train'), name:'Train', menus:TrainDraft},
                {label:this.$t('map.line'), name:'Line', menus:LineDraft},
                {label:'供电线', name:'Power', menus:PowerDraft},
                {label:this.$t('map.text'), name:'Text', menus:TextDraft},
                {label:this.$t('map.lcControl'), name:'LcControl', menus:LcControlDraft},
                {label:this.$t('map.rectangularBox'), name:'OutFrame', menus:OutFrameDraft},
                {label:this.$t('map.image'), name:'Resource', menus:ImageControlDraft},
                {label:this.$t('map.boundingBox'), name:'CheckBox', menus:CheckboxDraft},
                {label:'站间分隔', name:'SplitStation', menus:SplitStation},
                {label:'箭头', name:'Arrow', menus:Arrow}
            ],
            selectDevice:'',
            enabledTab: 'Section',
            projectType: true
        };
    },
    computed: {
        isSave() {
            return this.mapInfo && this.mapInfo.id;
        }
    },
    watch: {
        '$store.state.map.deleteCount': function (val) {
            if (this.selected) {
                this.$refs[this.enabledTab][0].deleteObj();
            }
        },
        '$store.state.map.updateCount': function (val) {
            this.$refs[this.enabledTab][0].edit();
        },
        selected(val, oldVal) {
            if (this.selected) {
                this.$nextTick(() => {
                    this.$refs[this.enabledTab][0].deviceSelect(val);
                });
            }
        }
    },
    mounted() {
        EventBus.$on('select_DrawType', (showMode) => {
            if (showMode == '04') {
                this.projectType = false;
            } else {
                this.projectType = true;
            }
        });
    },
    methods: {
        dataRelation() {
            this.$emit('selectView', 'path');
        },
        showMap() {
            this.$emit('showMap');
        },
        handleSelectControlPage(device) {
            const controlLampTypeList = ['AtsControl', 'CenterCommunication', 'ChainControl', 'IntersiteControl', 'LeuControl', 'LocalControl', 'Maintain', 'SwitchFault', 'PowerSupply', 'NoOneReturn', 'MaintenanceLamps', 'ZcCommunication', 'FaultStatusGroup', 'ModeStatusGroup', 'LampFilament', 'ReturnModeGroup', 'ControlSwitch', 'Axle'];
            const type = device._type;
            if (this.selectDevice) {
                this.enabledTab = this.selectDevice;
            } else if (['AutomaticRoute', 'AutoTurnBack', 'AxleReset', 'LimitControl', 'GuideLock', 'StationTurnBack'].includes(type)) {
                this.enabledTab = 'ControlDraft';
            } else if (controlLampTypeList.includes(type)) {
                this.enabledTab = 'ControlLamp';
            } else {
                this.enabledTab = type;
            }
        },
        deviceSelect(type) {
            this.selectDevice = type;
        },
        saveMapEvent() {
            this.$emit('saveMapEvent');
        },
        verifyMapEvent() {
            this.$emit('verifyMapEvent');
        },
        generateCIEvent() {
            this.$emit('generateCIEvent');
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
	.el-dropdown-link {
		cursor: pointer;
		color: #409EFF;
	}
	.el-icon-arrow-down {
		font-size: 12px;
	}
    .map-control {
        width: 100%;
        height: 100%;
        .border-card{
            height: 100%;
        }
    }

    .operate-button{
        float: right;
        padding: 3px 0;
        margin-right: 5px;
    }

    .physical-view {
        line-height: 25px;
        height: 118px;
        padding-left: 12px;

        .el-checkbox {
            width: 70px;
            margin: 0;
            margin-right: 30px;
        }
    }

    .map-operate{
        height: 47px;
        padding: 15px
    }
    .mapEdit{
        height: calc(100% - 47px);
        .tab_pane_box{
            height: 100%;
        }
    }

    /deep/ .button_box{
        width: 100%;
        background: #ffffff;
        border-top: 1px #f3f1f1 solid;
        box-shadow: 4px 7px 10px #565656;
        border-radius: 0;
        border-bottom: 1px transparent solid;
        position:absolute;
        bottom:0;
        z-index:3;
	}

    /deep/ .view-control-content{
        height:100%;
        padding-bottom:46px;
        overflow-y:auto;
    }

    /deep/ .map-draft-group {
        float: right;
        margin: 6px 5px;
    }

    /deep/ .view-control {
            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);
		}

		.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;
		}
	}

    // 页面页签样式
    /deep/ {
		.card .el-transfer-panel__filter{
			margin: 5px 15px;
		}
		.card .el-transfer-panel__list.is-filterable{
			height: 290px;
		}

		.card .el-transfer-panel__body{
			height: 328px;
		}
		.card .el-transfer__buttons{
			padding: 0 16px;
		}

		.card .el-transfer{
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>