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="clearfix">
          <span>
            {{ $t('map.mapName') }}
            <b>{{ mapInfo.name }}</b>
          </span>
          <el-button v-if="isSave" type="text" style="float: right; padding: 3px 0" :disabled="mapSaveing" @click="saveMapEvent">{{ $t('map.save') }}</el-button>
          <el-button v-if="isSave" type="text" style="float: right; padding: 3px 0; margin-right: 5px;" :disabled="mapSaveing" @click="verifyMapEvent">{{ $t('map.dataVerification') }}</el-button>
          <el-button type="text" style="float: right; padding: 3px 0; margin-right: 5px;" @click="dataRelation">{{ $t('map.advanced') }}</el-button>
          <el-button type="text" style="float: right; padding: 3px 0; margin-right: 5px;" @click="showMap">{{ $t('map.viewLayer') }}</el-button>
        </div>
        <el-tabs v-model="enabledTab" class="mapEdit" type="card">
          <el-tab-pane :label="$t('map.section')" class="tab_pane_box" name="Section">
            <section-draft
              ref="Section"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
              @fieldSelect="fieldSelect"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.switch')" class="tab_pane_box" name="Switch">
            <switch-draft
              ref="Switch"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
              @fieldSelectSwitchSection="fieldSelectSwitchSection"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.station')" class="tab_pane_box" name="Station">
            <station-draft
              ref="Station"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
              @stationSectionCode="stationEnabledTab"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.controlMode')" class="tab_pane_box" name="StationControl">
            <station-control-draft
              ref="StationControl"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.signal')" class="tab_pane_box" name="Signal">
            <signal-draft
              ref="Signal"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
              @signalSectionCode="selectEnabledTab"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.platform')" class="tab_pane_box" name="StationStand">
            <station-stand-draft
              ref="StationStand"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.zcZoneControl')" class="tab_pane_box" name="ZcControl">
            <zc-control-draft
              ref="ZcControl"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.temporaryLimit')" class="tab_pane_box" name="LimitControl">
            <limit-control-draft
              ref="LimitControl"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.lcControl')" class="tab_pane_box" name="LcControl">
            <lc-control-draft
              ref="LcControl"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.counter')" class="tab_pane_box" name="Counter">
            <counter-draft
              ref="Counter"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.delayUnlock')" class="tab_pane_box" name="DelayUnlock">
            <delay-unlock-draft
              ref="DelayUnlock"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.train')" class="tab_pane_box" name="Train">
            <train-draft
              ref="Train"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.trainWindow')" class="tab_pane_box" name="TrainWindow">
            <train-window-draft
              ref="TrainWindow"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.line')" class="tab_pane_box" name="Line">
            <line-draft
              ref="Line"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.text')" class="tab_pane_box" name="Text">
            <text-draft
              ref="Text"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.image')" class="tab_pane_box" name="ImageControl">
            <Image-control-draft
              ref="ImageControl"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.button')" class="tab_pane_box" name="ButtonControl">
            <button-draft
              ref="ButtonControl"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane label="包围框" class="tab_pane_box" name="CheckBox">
            <checkbox-draft
              ref="CheckBox"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </transition>
</template>

<script>
import SectionDraft from './section';
import SwitchDraft from './switch';
import SignalDraft from './signal';
import StationDraft from './station';
import StationStandDraft from './stationstand';
import StationControlDraft from './stationcontrol';
import CounterDraft from './counter';
import DelayUnlockDraft from './delayunlock';
import TrainDraft from './train/index';
import LineDraft from './line';
import TextDraft from './text';
import TrainWindowDraft from './trainwindow';
import ZcControlDraft from './zcControl';
import LimitControlDraft from './limitControl';
import LcControlDraft from './lcControl';
import ImageControlDraft from './ImageControl';
import ButtonDraft from './buttonDraft';
import CheckboxDraft from './checkboxDraft';

import { ViewMode } from '@/scripts/ConstDic';

export default {
    name: 'MapOperate',
    components: {
        CounterDraft,
        SectionDraft,
        SwitchDraft,
        SignalDraft,
        StationDraft,
        StationStandDraft,
        StationControlDraft,
        DelayUnlockDraft,
        TrainWindowDraft,
        TrainDraft,
        LineDraft,
        TextDraft,
        ZcControlDraft,
        LimitControlDraft,
        LcControlDraft,
        ImageControlDraft,
        ButtonDraft,
        CheckboxDraft
    },
    props: {
        selected: {
            type: Object,
            default: function () {
                return null;
            }
        },
        mapInfo: {
            type: Object,
            default: function() { return {name: this.$t('map.pleaseSelectMap')}; }
        },
        mapSaveing: [Boolean]
    },
    data() {
        return {
            feild: '',
            singlaType: '',
            stationType: '',
            switchType: '',
            ViewMode: ViewMode,
            LogicalViewTypeList: [
                { code: 'Link', name: this.$t('map.link') }
            ],
            PhysicalViewTypeList: [
                { code: 'Section', name: this.$t('map.section') },
                { code: 'Signal', name: this.$t('map.signal') },
                { code: 'Switch', name: this.$t('map.switch') }
            ],
            logicalLevelsSelect: [],
            physicalLevelsSelect: [],
            enabledTab: 'Section',
            autoSaveTask: null,
            show: {
                mapEditShow: false,
                mapPaintShow: true
            }
        };
    },
    computed: {
        isSave() {
            return this.mapInfo && this.mapInfo.id;
        }
    },
    mounted() {
        this.initPage();
    },
    methods: {
        dataRelation() {
            this.$emit('selectView', 'path');
        },
        showMap() {
            this.$emit('showMap');
        },
        initPage() {
            this.$Dictionary.logicalViewType().then(list => {
                this.LogicalViewTypeList = list;
                this.LogicalViewTypeList.forEach(elem => {
                    this.logicalLevelsSelect.push(elem.code);
                });
            });
            this.$Dictionary.physicalViewType().then(list => {
                this.PhysicalViewTypeList = list;
                this.PhysicalViewTypeList.forEach(elem => {
                    this.physicalLevelsSelect.push(elem.code);
                });
            });
        },
        handleSelectControlPage(device) {
            const type = device._type;
            if (this.stationType) {
                this.enabledTab = 'Station';
            } else if (this.switchType) {
                this.enabledTab = 'Switch';
            } else if (this.singlaType) {
                this.enabledTab = 'Signal';
            } else if (this.feild) {
                this.enabledTab = 'Section';
            } else {
                this.enabledTab = type;
            }
        },
        stationEnabledTab(type) {
            this.stationType = type;
        },
        selectEnabledTab(type) {
            this.singlaType = type;
        },
        fieldSelect(type) {
            this.feild = type;
        },
        fieldSelectSwitchSection(type) {
            this.switchType = type;
        },
        handleSelectLogicalView(handle) {
            this.$emit('handleSelectLogicalView', handle);
        },
        handleSelectPhysicalView(handle) {
            this.$emit('handleSelectPhysicalView', handle);
        },
        saveMapEvent() {
            this.$emit('saveMapEvent');
        },
        verifyMapEvent() {
            this.$emit('verifyMapEvent');
        },
        updateMapModel(obj) {
            this.$emit('updateMapModel', obj);
        },
        setCenter(code) {
            this.$emit('setCenter', code);
        }
    }
};
</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%;
        .border-card{
            height: 100%;
        }
    }

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

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

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

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

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

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

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

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