459 lines
14 KiB
Vue
459 lines
14 KiB
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"
|
|
@stationSectionCode="stationEnabledTab"
|
|
/>
|
|
</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: '',
|
|
stationStand:'',
|
|
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, oldDevice) {
|
|
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;
|
|
if ( device && device.instance && typeof device.instance.drawSelected === 'function' ) {
|
|
device.instance.drawSelected(true);
|
|
}
|
|
if ( oldDevice && device.instance && typeof device.instance.drawSelected === 'function') {
|
|
oldDevice.instance.drawSelected(false);
|
|
}
|
|
}
|
|
},
|
|
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>
|