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

<template>
  <transition name="el-zoom-in-center">
    <div class="map-control">
      <div class="joylink-card">
        <div class="clearfix">
          <span>
            {{ $t('map.mapName') }}
            <b>{{ mapInfo.name }}</b>
          </span>
          <el-button type="text" class="mapEdit_box" @click="previewRouteEvent">{{ $t('map.preview') }}</el-button>
          <el-button type="text" class="mapEdit_box" @click="createRouteEvent">{{ $t('map.newConstruction') }}</el-button>
          <el-button type="text" class="mapEdit_box" @click="drawMap">{{ $t('map.drawMap') }}</el-button>
          <el-button type="text" class="mapEdit_box" @click="showMap">{{ $t('map.viewLayer') }}</el-button>
        </div>
        <el-tabs v-model="enabledTab" type="card" class="map_card" :before-leave="tabBeforeLeave" @tab-click="changePane">
          <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"
              :map-info="mapInfo"
              @setCenter="setCenter"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </transition>
</template>

<script>
import RouteOperate from './routeoperate/index';
import RoutingOperate from './routingoperate/index';
import AutomaticOperate from './automaticoperate/index';
// import PathOperate from './pathoperate/index';
import RunLevelOperate from './runLeveloperate/index';
import SignalOperate from './signaloperate/index';
import TurnedOperate from './turnedoperate/index';
import FlankProtectOperate from './flankProtectOperate/index';
import DwellTimeOperate from './dwellTimeOperate/index';

export default {
    name: 'DataRelation',
    components: {
        RouteOperate,
        RoutingOperate,
        AutomaticOperate,
        RunLevelOperate,
        FlankProtectOperate,
        // PathOperate,
        SignalOperate,
        TurnedOperate,
        DwellTimeOperate
    },
    props: {
        selected: {
            type: Object,
            default: function () {
                return null;
            }
        },
        mapInfo: {
            type: Object,
            default: function() { return {name: this.$t('map.pleaseSelectMap')}; }
        }
    },
    data() {
        return {
            enabledTab: 'route',
            oldDevice: null,
            lazy: true,
            tabList:[
                {label:this.$t('map.routeID'), name:'route', menus:RouteOperate},
                {label:'侧防', name:'flankProtect', menus:FlankProtectOperate},
                {label:'自动折返', name:'turned', menus:TurnedOperate},
                {label:this.$t('map.automaticSignal'), name:'automatic', menus:AutomaticOperate},
                {label:this.$t('map.signalApprochSection'), name:'signal', menus:SignalOperate},
                {label:this.$t('map.routing'), name:'routing', menus:RoutingOperate},
                {label:'停站时间', name:'dwellTime', menus:DwellTimeOperate},
                {label:'设置运行等级', name:'runLevel', menus:RunLevelOperate}
            ]
        };
    },
    mounted() {
        this.initLoad();
    },
    methods: {
        showMap() {
            this.$emit('showMap');
        },
        initLoad() {
            if (this.enabledTab === 'route') {
                this.$refs[this.enabledTab][0].initLoad();
            }
            this.tabBeforeLeave(this.enabledTab);
        },
        createRouteEvent() { // 创建 清空表单内容
            this.$refs[this.enabledTab][0].createRouteEvent();
        },
        previewRouteEvent() { // 预览调用
            this.$refs[this.enabledTab][0].previewRouteEvent();
        },
        changePane(data) {
            this.enabledTab = data.name;
        },
        setSelected(selected) {
            this.$refs[this.enabledTab][0].setSelected(selected);
        },
        setCenter(code) {
            this.$emit('setCenter', code);
        },
        drawMap() {
            this.tabBeforeLeave('', this.enabledTab);
            this.$emit('selectView', 'draft');
        },
        tabBeforeLeave(activeName, oldActiveName) {
            const tabNames = ['route', 'signal', 'runLevel', 'routing'];
            tabNames.includes(oldActiveName) && this.$refs[oldActiveName][0].batchSectionListFocus(false);
            if (tabNames.includes(activeName)) {
                this.$nextTick(() => {
                    this.$refs[activeName][0].batchSectionListFocus(true);
                });
            }
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .map-control {
        float: right;
        width: 100%;
		height: 100%;
		.clearfix{
			height: 47px;
			padding: 15px;
		}
		.joylink-card{
			height: 100%;
		}
    }
	.mapEdit_box{
		float: right;
		padding: 3px 0;
		margin-right: 5px;
	}
	.map_card {
		height: calc(100% - 47px);
		.tab_pane_box{
			height: 100%;
		}
	}

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

        .el-checkbox {
            width: 70px;
            margin: 0;
            margin-right: 30px;
        }
    }
	/deep/ {
		.map_card .el-tabs__header .el-tabs__item.is-active {
			border-bottom-color: #f5f7fa;
			background: #f5f7fa;
		}
		.map_card .el-tabs__content{
			height: calc(100% - 56px);
		}
	}

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

    /deep/ {
        .view-control {
            overflow-y: auto;
        }
    }
</style>