344 lines
10 KiB
Vue
344 lines
10 KiB
Vue
<template>
|
|
<transition name="el-zoom-in-center">
|
|
<div class="map-control">
|
|
<div class="border-card">
|
|
<div class="map-operate">
|
|
<span>
|
|
{{ $t('map.mapName') }}
|
|
<b>{{ mapInfo.name }}</b>
|
|
</span>
|
|
<el-button v-if="isSave" type="text" style="float: right; padding: 3px 0" :disabled="$attrs.mapSaveing" @click="saveMapEvent">{{ $t('map.save') }}</el-button>
|
|
<el-dropdown class="operate-button" trigger="click">
|
|
<span class="el-dropdown-link">数据操作</span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item><span style="display:block;" :disabled="$attrs.mapSaveing" @click="verifyMapEvent">{{ $t('map.dataVerification') }}</span></el-dropdown-item>
|
|
<el-dropdown-item><span style="display:block;" :disabled="$attrs.mapSaveing" @click="generateCIEvent">生成联锁</span></el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
<el-button type="text" class="operate-button" @click="dataRelation">{{ $t('map.advanced') }}</el-button>
|
|
<el-button type="text" class="operate-button" @click="showMap">绘图显隐</el-button>
|
|
</div>
|
|
<el-tabs v-show="projectType" v-model="enabledTab" class="mapEdit" type="card">
|
|
<el-tab-pane v-for="(each,index) in tabList" :key="index" :label="each.label" class="tab_pane_box" :name="each.name" :lazy="lazy">
|
|
<component
|
|
:is="each.menus"
|
|
:ref="each.name"
|
|
:selected="selected"
|
|
v-bind="$attrs"
|
|
v-on="$listeners"
|
|
@deviceSelect="deviceSelect"
|
|
/>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<template v-show="!projectType">
|
|
<split-screen
|
|
ref="splitScreen"
|
|
:selected="selected"
|
|
/>
|
|
</template>
|
|
</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 PowerDraft from './power';
|
|
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 Arrow from './arrow';
|
|
import SplitScreen from './splitScreen';
|
|
import { EventBus } from '@/scripts/event-bus';
|
|
|
|
export default {
|
|
name: 'MapOperate',
|
|
components: {
|
|
// CounterDraft,
|
|
SectionDraft,
|
|
SwitchDraft,
|
|
SignalDraft,
|
|
StationDraft,
|
|
StationStandDraft,
|
|
PsdDraft,
|
|
EspDraft,
|
|
ControlDraft,
|
|
TrainWindowDraft,
|
|
TrainDraft,
|
|
LineDraft,
|
|
PowerDraft,
|
|
TextDraft,
|
|
ZcControlDraft,
|
|
OutFrameDraft,
|
|
LcControlDraft,
|
|
ImageControlDraft,
|
|
CheckboxDraft,
|
|
ControlLamp,
|
|
SplitStation,
|
|
Arrow,
|
|
SplitScreen
|
|
},
|
|
props: {
|
|
selected: {
|
|
type: Object,
|
|
default: function () {
|
|
return null;
|
|
}
|
|
},
|
|
mapInfo: {
|
|
type: Object,
|
|
default: function() { return {name: this.$t('map.pleaseSelectMap')}; }
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
lazy: true,
|
|
tabList:[
|
|
{label:this.$t('map.section'), name:'Section', menus:SectionDraft},
|
|
{label:this.$t('map.switch'), name:'Switch', menus:SwitchDraft},
|
|
{label:this.$t('map.station'), name:'Station', menus:StationDraft},
|
|
{label:this.$t('map.signal'), name:'Signal', menus:SignalDraft},
|
|
{label:this.$t('map.platform'), name:'StationStand', menus:StationStandDraft},
|
|
{label:this.$t('map.psd'), name:'Psd', menus:PsdDraft},
|
|
{label:this.$t('map.platformEmergencyStop'), name:'Esp', menus:EspDraft},
|
|
{label:this.$t('map.trainWindow'), name:'TrainWindow', menus:TrainWindowDraft},
|
|
{label:this.$t('map.zcZoneControl'), name:'ZcControl', menus:ZcControlDraft},
|
|
{label:this.$t('map.functionButton'), name:'ControlDraft', menus:ControlDraft},
|
|
{label:this.$t('map.saidLamp'), name:'ControlLamp', menus:ControlLamp},
|
|
{label:this.$t('map.train'), name:'Train', menus:TrainDraft},
|
|
{label:this.$t('map.line'), name:'Line', menus:LineDraft},
|
|
{label:'供电线', name:'Power', menus:PowerDraft},
|
|
{label:this.$t('map.text'), name:'Text', menus:TextDraft},
|
|
{label:this.$t('map.lcControl'), name:'LcControl', menus:LcControlDraft},
|
|
{label:this.$t('map.rectangularBox'), name:'OutFrame', menus:OutFrameDraft},
|
|
{label:this.$t('map.image'), name:'Resource', menus:ImageControlDraft},
|
|
{label:this.$t('map.boundingBox'), name:'CheckBox', menus:CheckboxDraft},
|
|
{label:'站间分隔', name:'SplitStation', menus:SplitStation},
|
|
{label:'箭头', name:'Arrow', menus:Arrow}
|
|
],
|
|
selectDevice:'',
|
|
enabledTab: 'Section',
|
|
projectType: true
|
|
};
|
|
},
|
|
computed: {
|
|
isSave() {
|
|
return this.mapInfo && this.mapInfo.id;
|
|
}
|
|
},
|
|
watch: {
|
|
'$store.state.map.deleteCount': function (val) {
|
|
if (this.selected) {
|
|
this.$refs[this.enabledTab][0].deleteObj();
|
|
}
|
|
},
|
|
'$store.state.map.updateCount': function (val) {
|
|
this.$refs[this.enabledTab][0].edit();
|
|
},
|
|
selected(val, oldVal) {
|
|
if (this.selected) {
|
|
this.$nextTick(() => {
|
|
this.$refs[this.enabledTab][0].deviceSelect(val);
|
|
});
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
EventBus.$on('select_DrawType', (showMode) => {
|
|
if (showMode == '04') {
|
|
this.projectType = false;
|
|
} else {
|
|
this.projectType = true;
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
dataRelation() {
|
|
this.$emit('selectView', 'path');
|
|
},
|
|
showMap() {
|
|
this.$emit('showMap');
|
|
},
|
|
handleSelectControlPage(device) {
|
|
const controlLampTypeList = ['AtsControl', 'CenterCommunication', 'ChainControl', 'IntersiteControl', 'LeuControl', 'LocalControl', 'Maintain', 'SwitchFault', 'PowerSupply', 'NoOneReturn', 'MaintenanceLamps', 'ZcCommunication', 'FaultStatusGroup', 'ModeStatusGroup', 'LampFilament', 'ReturnModeGroup', 'ControlSwitch', 'Axle'];
|
|
const type = device._type;
|
|
if (this.selectDevice) {
|
|
this.enabledTab = this.selectDevice;
|
|
} else if (['AutomaticRoute', 'AutoTurnBack', 'AxleReset', 'LimitControl', 'GuideLock', 'StationTurnBack'].includes(type)) {
|
|
this.enabledTab = 'ControlDraft';
|
|
} else if (controlLampTypeList.includes(type)) {
|
|
this.enabledTab = 'ControlLamp';
|
|
} else {
|
|
this.enabledTab = type;
|
|
}
|
|
},
|
|
deviceSelect(type) {
|
|
this.selectDevice = type;
|
|
},
|
|
saveMapEvent() {
|
|
this.$emit('saveMapEvent');
|
|
},
|
|
verifyMapEvent() {
|
|
this.$emit('verifyMapEvent');
|
|
},
|
|
generateCIEvent() {
|
|
this.$emit('generateCIEvent');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
@import "src/styles/mixin.scss";
|
|
.el-dropdown-link {
|
|
cursor: pointer;
|
|
color: #409EFF;
|
|
}
|
|
.el-icon-arrow-down {
|
|
font-size: 12px;
|
|
}
|
|
.map-control {
|
|
width: 100%;
|
|
height: 100%;
|
|
.border-card{
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.operate-button{
|
|
float: right;
|
|
padding: 3px 0;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.physical-view {
|
|
line-height: 25px;
|
|
height: 118px;
|
|
padding-left: 12px;
|
|
|
|
.el-checkbox {
|
|
width: 70px;
|
|
margin: 0;
|
|
margin-right: 30px;
|
|
}
|
|
}
|
|
|
|
.map-operate{
|
|
height: 47px;
|
|
padding: 15px
|
|
}
|
|
.mapEdit{
|
|
height: calc(100% - 47px);
|
|
.tab_pane_box{
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
/deep/ .button_box{
|
|
width: 100%;
|
|
background: #ffffff;
|
|
border-top: 1px #f3f1f1 solid;
|
|
box-shadow: 4px 7px 10px #565656;
|
|
border-radius: 0;
|
|
border-bottom: 1px transparent solid;
|
|
position:absolute;
|
|
bottom:0;
|
|
z-index:3;
|
|
}
|
|
|
|
/deep/ .view-control-content{
|
|
height:100%;
|
|
padding-bottom:46px;
|
|
overflow-y:auto;
|
|
}
|
|
|
|
/deep/ .map-draft-group {
|
|
float: right;
|
|
margin: 6px 5px;
|
|
}
|
|
|
|
/deep/ .view-control {
|
|
height:100%;
|
|
}
|
|
|
|
/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>
|