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" @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="$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.signal')" class="tab_pane_box" name="signal">
            <signal-operate
              ref="signalOperate"
              :map-info="mapInfo"
              :selected="selected"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.pathUnit')" class="tab_pane_box" name="path">
            <path-operate
              ref="pathOperate"
              :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 SignalOperate from './signaloperate/index';

export default {
    name: 'DataRelation',
    components: {
        RouteOperate,
        RoutingOperate,
        AutomaticOperate,
        PathOperate,
        SignalOperate
    },
    props: {
        selected: {
            type: Object,
            default: function () {
                return null;
            }
        },
        mapInfo: {
            type: Object,
            default: function() { return {name: this.$t('map.pleaseSelectMap')}; }
        }
    },
    data() {
        return {
            enabledTab: 'route'
        };
    },
    mounted() {
    },
    methods: {
        showMap() {
            this.$emit('showMap');
        },
        createRouteEvent() {
            switch (this.enabledTab) {
            case 'route':
                this.$refs.routeOperate.createRouteEvent();
                break;
            case 'routing':
                this.$refs.routingOperate.createRouteEvent();
                break;
            case 'automatic':
                this.$refs.automaticOperate.createRouteEvent();
                break;
            case 'signal':
                this.$refs.signalOperate.createRouteEvent();
                break;
            case 'path':
                this.$refs.pathOperate.createRouteEvent();
                break;
            }
        },
        previewRouteEvent() {
            switch (this.enabledTab) {
            case 'route':
                this.$refs.routeOperate.previewRouteEvent();
                break;
            case 'routing':
                this.$refs.routingOperate.previewRouteEvent();
                break;
            case 'automatic':
                this.$refs.automaticOperate.previewRouteEvent();
                break;
            case 'signal':
                this.$refs.signalOperate.previewRouteEvent();
                break;
            case 'path':
                this.$refs.pathOperate.previewRouteEvent();
                break;
            }
        },
        changePane(data) {
            this.enabledTab = data.name;
        },
        setSelected(selected) {
            switch (this.enabledTab) {
            case 'route':
                this.$refs.routeOperate.setSelected(selected);
                break;
            case 'routing':
                this.$refs.routingOperate.setSelected(selected);
                break;
            case 'automatic':
                this.$refs.automaticOperate.setSelected(selected);
                break;
            case 'signal':
                this.$refs.signalOperate.setSelected(selected);
                break;
            case 'path':
                this.$refs.pathOperate.setSelected(selected);
                break;
            }
        },
        setCenter(code) {
            this.$emit('setCenter', code);
        },
        drawMap() {
            this.$emit('selectView', 'draft');
        }
    }
};
</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>