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 :label="$t('map.routeID')" class="tab_pane_box" name="route">
            <route-operate
              ref="routeOperate"
              :map-info="mapInfo"
              :selected="selected"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane label="侧防" class="tab_pane_box" name="flankProtect">
            <flank-protect-operate
              ref="flankProtectOperate"
              :map-info="mapInfo"
              :selected="selected"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane label="自动折返" class="tab_pane_box" name="turned">
            <turned-operate
              ref="turnedOperate"
              :map-info="mapInfo"
              :selected="selected"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.automaticSignal')" class="tab_pane_box" name="automatic">
            <automatic-operate
              ref="automaticOperate"
              :map-info="mapInfo"
              :selected="selected"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.signalApprochSection')" class="tab_pane_box" name="signal">
            <signal-operate
              ref="signalOperate"
              :map-info="mapInfo"
              :selected="selected"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane label="设置运行等级" class="tab_pane_box" name="runLevel">
            <run-level-operate
              ref="runLevelOperate"
              :map-info="mapInfo"
              :selected="selected"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.routing')" class="tab_pane_box" name="routing">
            <routing-operate
              ref="routingOperate"
              :map-info="mapInfo"
              :selected="selected"
              @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';

export default {
    name: 'DataRelation',
    components: {
        RouteOperate,
        RoutingOperate,
        AutomaticOperate,
        RunLevelOperate,
        FlankProtectOperate,
        // PathOperate,
        SignalOperate,
        TurnedOperate
    },
    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,
            enabledTabMenu: {
                route: 'routeOperate',
                routing: 'routingOperate',
                automatic: 'automaticOperate',
                signal: 'signalOperate',
                runLevel: 'runLevelOperate',
                turned: 'turnedOperate',
                flankProtect: 'flankProtectOperate'
            }
        };
    },
    mounted() {
    },
    methods: {
        showMap() {
            this.$emit('showMap');
        },
        initLoad() {
            if (this.enabledTab === 'route') {
                this.$refs[this.enabledTabMenu[this.enabledTab]].initLoad();
            }
        },
        createRouteEvent() { // 创建 清空表单内容
            this.$refs[this.enabledTabMenu[this.enabledTab]].createRouteEvent();
        },
        previewRouteEvent() { // 预览调用
            this.$refs[this.enabledTabMenu[this.enabledTab]].previewRouteEvent();
        },
        changePane(data) {
            this.enabledTab = data.name;
        },
        setSelected(selected) {
            this.$refs[this.enabledTabMenu[this.enabledTab]].setSelected(selected);
        },
        setCenter(code) {
            this.$emit('setCenter', code);
        },
        drawMap() {
            this.$refs.routeOperate.batchSectionListFocus(false);
            this.$refs.signalOperate.batchSectionListFocus(false);
            this.$emit('selectView', 'draft');
        },
        tabBeforeLeave(activeName, oldActiveName) {
            if (activeName === 'route' || activeName === 'signal') {
                this.$refs[this.enabledTabMenu[activeName]].batchSectionListFocus(true);
            }
            if (oldActiveName === 'route' || oldActiveName === 'signal') {
                this.$refs[this.enabledTabMenu[oldActiveName]].batchSectionListFocus(false);
            }
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .map-context {
        display: block;
        float: left;
        margin-left: 5px;
    }

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