477 lines
14 KiB
Vue
477 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">绘图显隐</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.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"
|
|
@standStationCode="standStationTab"
|
|
/>
|
|
</el-tab-pane>
|
|
<el-tab-pane :label="$t('map.psd')" class="tab_pane_box" name="Psd">
|
|
<psd-draft
|
|
ref="PsdDraft"
|
|
:selected="selected"
|
|
@updateMapModel="updateMapModel"
|
|
@setCenter="setCenter"
|
|
@standStationCode="psdTab"
|
|
/>
|
|
</el-tab-pane>
|
|
<el-tab-pane :label="$t('map.platformEmergencyStop')" class="tab_pane_box" name="Esp">
|
|
<esp-draft
|
|
ref="EspDraft"
|
|
:selected="selected"
|
|
@updateMapModel="updateMapModel"
|
|
@setCenter="setCenter"
|
|
@standStationCode="esqTab"
|
|
/>
|
|
</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.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.functionButton')" class="tab_pane_box" name="ControlDraft">
|
|
<control-draft
|
|
ref="ControlDraft"
|
|
:selected="selected"
|
|
@updateMapModel="updateMapModel"
|
|
@setCenter="setCenter"
|
|
/>
|
|
</el-tab-pane>
|
|
<el-tab-pane :label="$t('map.saidLamp')" class="tab_pane_box" name="ControlLamp">
|
|
<control-lamp
|
|
ref="ControlLamp"
|
|
: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.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.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.rectangularBox')" class="tab_pane_box" name="OutFrame">
|
|
<out-frame-draft
|
|
ref="OutFrame"
|
|
:selected="selected"
|
|
@updateMapModel="updateMapModel"
|
|
@setCenter="setCenter"
|
|
/>
|
|
</el-tab-pane>
|
|
<el-tab-pane :label="$t('map.image')" class="tab_pane_box" name="Resource">
|
|
<Image-control-draft
|
|
ref="Resource"
|
|
:selected="selected"
|
|
@updateMapModel="updateMapModel"
|
|
@setCenter="setCenter"
|
|
/>
|
|
</el-tab-pane>
|
|
<el-tab-pane :label="$t('map.boundingBox')" class="tab_pane_box" name="CheckBox">
|
|
<checkbox-draft
|
|
ref="CheckBox"
|
|
:selected="selected"
|
|
@updateMapModel="updateMapModel"
|
|
@setCenter="setCenter"
|
|
/>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="站间分隔" class="tab_pane_box" name="SplitStation">
|
|
<split-station
|
|
ref="SplitStation"
|
|
:selected="selected"
|
|
@updateMapModel="updateMapModel"
|
|
@setCenter="setCenter"
|
|
/>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
import SectionDraft from './section/index';
|
|
import SwitchDraft from './switch/index';
|
|
import SignalDraft from './signal/index';
|
|
import StationDraft from './station';
|
|
import StationStandDraft from './stationstand';
|
|
import PsdDraft from './psdDraft';
|
|
import EspDraft from './espDraft';
|
|
import TrainDraft from './train/index';
|
|
import LineDraft from './line';
|
|
import TextDraft from './text';
|
|
import ControlDraft from './ControlDraft';
|
|
import TrainWindowDraft from './trainwindow';
|
|
import ZcControlDraft from './zcControl';
|
|
import OutFrameDraft from './outFrameControl';
|
|
import LcControlDraft from './lcControl';
|
|
import ImageControlDraft from './ImageControl';
|
|
import CheckboxDraft from './checkboxDraft';
|
|
import ControlLamp from './controlLamp';
|
|
import SplitStation from './splitStation';
|
|
|
|
import { ViewMode } from '@/scripts/ConstDic';
|
|
|
|
export default {
|
|
name: 'MapOperate',
|
|
components: {
|
|
// CounterDraft,
|
|
SectionDraft,
|
|
SwitchDraft,
|
|
SignalDraft,
|
|
StationDraft,
|
|
StationStandDraft,
|
|
PsdDraft,
|
|
EspDraft,
|
|
ControlDraft,
|
|
TrainWindowDraft,
|
|
TrainDraft,
|
|
LineDraft,
|
|
TextDraft,
|
|
ZcControlDraft,
|
|
OutFrameDraft,
|
|
LcControlDraft,
|
|
ImageControlDraft,
|
|
CheckboxDraft,
|
|
ControlLamp,
|
|
SplitStation
|
|
},
|
|
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: '',
|
|
stationStandType:'',
|
|
psdType: '',
|
|
ViewMode: ViewMode,
|
|
enabledTab: 'Section',
|
|
autoSaveTask: null,
|
|
show: {
|
|
mapEditShow: false,
|
|
mapPaintShow: true
|
|
},
|
|
oldDevice: null
|
|
};
|
|
},
|
|
computed: {
|
|
isSave() {
|
|
return this.mapInfo && this.mapInfo.id;
|
|
}
|
|
},
|
|
watch: {
|
|
'$store.state.map.deleteCount': function (val) {
|
|
if (this.selected) {
|
|
this.$refs[this.enabledTab].deleteObj();
|
|
}
|
|
},
|
|
'$store.state.map.updateCount': function (val) {
|
|
this.$refs[this.enabledTab].edit();
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
dataRelation() {
|
|
this.$emit('selectView', 'path');
|
|
},
|
|
showMap() {
|
|
this.$emit('showMap');
|
|
},
|
|
handleSelectControlPage(device) {
|
|
const controlLampTypeList = ['AtsControl', 'CenterCommunication', 'ChainControl', 'IntersiteControl', 'LeuControl', 'LocalControl', 'Maintain',
|
|
'PowerSupply', 'NoOneReturn', 'MaintenanceLamps', 'ZcCommunication', 'FaultStatusGroup', 'ModeStatusGroup', 'LampFilament', 'ReturnModeGroup', 'ControlSwitch', 'Axle'];
|
|
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.stationStandType) {
|
|
this.enabledTab = 'StationStand';
|
|
} else if (this.psdType) {
|
|
this.enabledTab = 'Psd';
|
|
} else if (this.esqType) {
|
|
this.enabledTab = 'Esp';
|
|
} else if (this.feild) {
|
|
this.enabledTab = 'Section';
|
|
} else if (type == 'AutomaticRoute' || type == 'AutoTurnBack' || type == 'AxleReset' || type == 'LimitControl' || type == 'GuideLock') {
|
|
this.enabledTab = 'ControlDraft';
|
|
} else if (controlLampTypeList.includes(type)) {
|
|
this.enabledTab = 'ControlLamp';
|
|
} else {
|
|
this.enabledTab = type;
|
|
}
|
|
},
|
|
esqTab(type) {
|
|
this.esqType = type;
|
|
},
|
|
psdTab(type) {
|
|
this.psdType = type;
|
|
},
|
|
standStationTab(type) {
|
|
this.stationStandType = 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;
|
|
}
|
|
.card .el-tabs__nav .el-tabs__item{
|
|
padding: 0 20px!important;
|
|
}
|
|
|
|
.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>
|