stage
This commit is contained in:
Yuan
parent
827faf8987
commit
acb63a1a8a
@ -3,6 +3,7 @@ import Rect from 'zrender/src/graphic/shape/Rect';
|
||||
import Line from 'zrender/src/graphic/shape/Line';
|
||||
import Text from 'zrender/src/graphic/Text';
|
||||
import Arc from 'zrender/src/graphic/shape/Arc';
|
||||
import Circle from 'zrender/src/graphic/shape/Circle';
|
||||
import store from '@/store/index';
|
||||
|
||||
export default class SignalButton extends Group {
|
||||
@ -43,7 +44,48 @@ export default class SignalButton extends Group {
|
||||
}
|
||||
});
|
||||
this.add(this.arcShape);
|
||||
} else {
|
||||
} else if (model.buttonShape === 'roundWithDock') { //TODO 通过线路配置（this.style）和按钮类型（type）判断
|
||||
const circle1 = new Circle({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 2,
|
||||
shape: {
|
||||
cx: this.model.position.x + 7,
|
||||
cy: this.model.position.y + 7,
|
||||
r: 7
|
||||
},
|
||||
style: {
|
||||
stroke: '#69666E',
|
||||
lineWidth: 1,
|
||||
fill: fillColor
|
||||
}
|
||||
})
|
||||
const circle2 = new Circle({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 1,
|
||||
shape: {
|
||||
cx: this.model.position.x + 7,
|
||||
cy: this.model.position.y + 9,
|
||||
r: 8
|
||||
},
|
||||
style: {
|
||||
fill: '#000'
|
||||
}
|
||||
})
|
||||
const circle3 = new Circle({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
shape: {
|
||||
cx: this.model.position.x + 7,
|
||||
cy: this.model.position.y + 9,
|
||||
r: 9
|
||||
},
|
||||
style: {
|
||||
fill: '#eee'
|
||||
}
|
||||
})
|
||||
this.arcShape = circle1
|
||||
this.add(circle1).add(circle2).add(circle3)
|
||||
} else {
|
||||
this.rectButton = new Rect({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
|
||||
@ -50,13 +50,59 @@
|
||||
</center>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button_box" :style="{ width: width + 'px' }" @click="toggleDisplay('sectionName')">
|
||||
<button class="button_box" @click="toggleDisplay('sectionName')">
|
||||
<span style="color: black">
|
||||
<center>
|
||||
<b>{{ displayFlags.sectionName ? '√ ' : '' }}区段名称</b>
|
||||
</center>
|
||||
</span>
|
||||
</button>
|
||||
<div style="width: 50px; height: 100%; display: block; float: left;"></div>
|
||||
<button class="button_box" :style="{ width: width + 'px' }">
|
||||
<span style="color: black">
|
||||
<center>
|
||||
<b>语音暂停</b>
|
||||
</center>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button_box" :style="{ width: width + 'px' }">
|
||||
<span style="color: black">
|
||||
<center>
|
||||
<b>时钟设置</b>
|
||||
</center>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button_box" :style="{ width: width + 'px' }">
|
||||
<span style="color: black">
|
||||
<center>
|
||||
<b>遛放存储</b>
|
||||
</center>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button_box" :style="{ width: width + 'px' }">
|
||||
<span style="color: black">
|
||||
<center>
|
||||
<b>铅封记录</b>
|
||||
</center>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button_box" :style="{ width: width + 'px' }">
|
||||
<span style="color: black">
|
||||
<center>
|
||||
<b>按钮戴帽</b>
|
||||
</center>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
:id="Section.defectiveShunting.button.domId"
|
||||
class="button_box"
|
||||
:style="{ width: width + 'px', backgroundColor: buttonUpColor }"
|
||||
@click="buttonDown(Section.defectiveShunting.button.operation, ['Section'])"
|
||||
>
|
||||
<span style="color: black">
|
||||
<center><b>分路不良</b></center>
|
||||
</span>
|
||||
</button>
|
||||
<!-- <button :id="Signal.humanTrainRoute.button.domId" class="button_box" :style="{width: width+'px', backgroundColor:buttonUpColor}" @click="buttonDown(Signal.humanTrainRoute.button.operation, ['Signal','SignalButton'])">
|
||||
<span style="color: #800000">
|
||||
<center><b>总人解</b></center>
|
||||
|
||||
@ -24,12 +24,12 @@ export function handlerUrl(data) {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// const data = null;
|
||||
// BASE_API = 'https://joylink.club/jlcloud';
|
||||
// BASE_API = 'https://test.joylink.club/jlcloud';
|
||||
BASE_API = 'https://test.joylink.club/jlcloud';
|
||||
// BASE_API = 'http://192.168.3.233/rtss-server';
|
||||
// BASE_API = 'http://114.116.51.125/jlcloud';
|
||||
// BASE_API = 'http://192.168.8.152:9000'; // 袁琪
|
||||
// BASE_API = 'http://192.168.3.94:9000'; // 旭强
|
||||
BASE_API = 'http://192.168.3.15:9000'; // 张赛
|
||||
// BASE_API = 'http://192.168.3.15:9000'; // 张赛
|
||||
// BASE_API = 'http://192.168.8.140:9000'; // 杜康
|
||||
// BASE_API = 'http://192.168.3.37:9000'; // 卫志宏
|
||||
// BASE_API = 'http://b29z135112.zicp.vip';
|
||||
|
||||
@ -12,328 +12,437 @@
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second" :lazy="lazy">
|
||||
<create-operate
|
||||
ref="createForm"
|
||||
:create-form="createForm"
|
||||
:add-model="addModel"
|
||||
:create-rules="rules"
|
||||
@create="create"
|
||||
/>
|
||||
<create-operate ref="createForm" :create-form="createForm" :add-model="addModel" :create-rules="rules" @create="create" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmapNew/utils/Uid';
|
||||
import OperateProperty from './components/operateProperty';
|
||||
import CreateOperate from './components/createOperate';
|
||||
import { deepAssign } from '@/utils/index';
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getUID } from '@/jmapNew/utils/Uid'
|
||||
import OperateProperty from './components/operateProperty'
|
||||
import CreateOperate from './components/createOperate'
|
||||
import { deepAssign } from '@/utils/index'
|
||||
|
||||
export default {
|
||||
name: 'SignalButton',
|
||||
components: {
|
||||
OperateProperty,
|
||||
CreateOperate
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
lazy: true,
|
||||
field: '',
|
||||
editModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
type: '',
|
||||
signalCode: '',
|
||||
sectionCode: '',
|
||||
switchCode: '',
|
||||
labelEnum: '',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
nameOffset: {
|
||||
x: 0,
|
||||
y: -10
|
||||
},
|
||||
stationCode: ''
|
||||
},
|
||||
addModel: {
|
||||
name: '',
|
||||
type: '',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
nameOffset: {
|
||||
x: 0,
|
||||
y: -10
|
||||
}
|
||||
},
|
||||
typeList: [
|
||||
{ value: 'PICK', label: '接车按钮' },
|
||||
{ value: 'PASS', label: '通过按钮' },
|
||||
{ value: 'GUIDE', label: '引导按钮' },
|
||||
{ value: 'FLEXIBLE', label: '变通按钮' },
|
||||
{ value: 'RAMP_TERMINAL', label: '坡道终端按钮'},
|
||||
{ value: 'TRAIN_TERMINAL', label: '列车终端按钮'},
|
||||
{ value: 'SHUNT_TERMINAL', label: '调车终端按钮'},
|
||||
{ value: 'ASSIST', label: '总辅助按钮' },
|
||||
{ value: 'PICK_ASSIST', label: '接辅助按钮' },
|
||||
{ value: 'DEPART_ASSIST', label: '发辅助按钮' },
|
||||
{ value: 'ACCIDENT', label: '事故按钮' },
|
||||
{ value: 'CHANGE_DIRECTION', label: '改方按钮' },
|
||||
{ value: 'RECOVERY', label: '复原按钮' },
|
||||
{ value: 'OCCLUSION', label: '闭塞按钮' }
|
||||
],
|
||||
centralizedStationList: [], // 设备集中站列表
|
||||
directionList: [{label:'X',value:'X'},{label:'XF',value:'XF'},{label:'XD',value:'XD'},{label:'S',value:'S'},{label:'SF',value:'SF'},{label:'SD',value:'SD'}],
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.selectText'), trigger: 'blur' }
|
||||
],
|
||||
// name: [
|
||||
// { required: true, message: '请输入按钮名称', trigger: 'blur' }
|
||||
// ],
|
||||
type: [
|
||||
{ required: true, message: '请选择按钮类型', trigger: 'change' }
|
||||
],
|
||||
signalCode: [
|
||||
{ required: true, message: '请选择关联的信号机设备', trigger: 'change' }
|
||||
],
|
||||
sectionCode: [
|
||||
{ required: true, message: '请选择关联的区段设备', trigger: 'change' }
|
||||
],
|
||||
switchCode: [
|
||||
{ required: true, message: '请选择关联的道岔设备', trigger: 'change' }
|
||||
],
|
||||
'position.x': [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterXCoordinate'), trigger: 'blur' }
|
||||
],
|
||||
'position.y': [
|
||||
{ required: true, message: this.$t('rules.pleaseEnterYCoordinate'), trigger: 'blur' }
|
||||
],
|
||||
labelEnum: [
|
||||
{ required: true, message: '请选择方向', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'signalButtonList',
|
||||
'stationList',
|
||||
'lineCode',
|
||||
'signalList',
|
||||
'sectionList',
|
||||
'switchList'
|
||||
]),
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '130px',
|
||||
items: {
|
||||
code: {
|
||||
name: '',
|
||||
item: []
|
||||
},
|
||||
draw: {
|
||||
name: this.$t('map.drawData'),
|
||||
item: [
|
||||
{ prop: 'code', label: '按钮编码:', type: 'select', optionLabel: 'code', optionValue: 'code', options: this.signalButtonList, deviceChange: this.deviceChange },
|
||||
{ prop: 'name', label: '按钮名称:', type: 'input' },
|
||||
{ prop: 'nameOffset', label: '名称偏移:', type: 'coordinate', width: '120px', children: [
|
||||
{ prop: 'nameOffset.x', firstLevel: 'nameOffset', secondLevel: 'x', label: 'x', type: 'number', labelWidth: '25px', disabled: false },
|
||||
{ prop: 'nameOffset.y', firstLevel: 'nameOffset', secondLevel: 'y', label: 'y', type: 'number', labelWidth: '25px', disabled: false }
|
||||
] },
|
||||
{ prop: 'type', label: '按钮类型:', type: 'select', optionLabel: 'label', optionValue: 'value', options: this.typeList},
|
||||
{ prop: 'signalCode', label: '关联信号机:', type: 'selectHover', optionLabel: 'name&&code', optionValue: 'code', clearable: true, options: this.signalList, hover: this.hover, buttonType: 'linkSignal', buttonShowType: this.isLinkSignalShow, isHidden: !this.isLinkSignal },
|
||||
{ prop: 'sectionCode', label: '关联区段:', type: 'selectHover', optionLabel: 'name&&code', optionValue: 'code', clearable: true, options: this.sectionList, hover: this.hover, buttonType: 'linkSection', buttonShowType: this.isLinkSectionShow, isHidden: !this.isLinkSection },
|
||||
{ prop: 'switchCode', label: '关联道岔:', type: 'selectHover', optionLabel: 'name&&code', optionValue: 'code', clearable: true, options: this.switchList, hover: this.hover, buttonType: 'linkSwitch', buttonShowType: this.isLinkSwitchShow, isHidden: !this.isLinkSwitch },
|
||||
{ prop: 'labelEnum', label: '方向:', type: 'select', optionLabel: 'label', optionValue: 'value', options: this.directionList, isHidden: !this.isLinkDirection },
|
||||
{ prop: 'position', label: this.$t('map.textPoints'), type: 'coordinate', width: '120px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
|
||||
] },
|
||||
{ prop: 'stationCode', label: this.$t('map.equipmentStation') + ':', type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.centralizedStationList }
|
||||
]
|
||||
},
|
||||
map: {
|
||||
name: this.$t('map.mapData'),
|
||||
item: [
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
return form;
|
||||
},
|
||||
createForm() {
|
||||
const form = {
|
||||
labelWidth: '110px',
|
||||
items:{
|
||||
all:{
|
||||
name:'',
|
||||
item: [
|
||||
{ prop: 'name', label: '按钮名称:', type: 'input' },
|
||||
{ prop: 'type', label: '按钮类型:', type: 'select', optionLabel: 'label', optionValue: 'value', options: this.typeList},
|
||||
{ prop: 'position', label: this.$t('map.textPoints'), type: 'coordinate', width: '120px', children: [
|
||||
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
|
||||
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
|
||||
] }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
return form;
|
||||
},
|
||||
isLinkSignalShow() {
|
||||
return this.field === 'linkSignal';
|
||||
},
|
||||
isLinkSignal() {
|
||||
const list = ['PICK', 'PASS', 'GUIDE'];
|
||||
return list.includes(this.editModel.type);
|
||||
},
|
||||
isLinkSectionShow() {
|
||||
return this.field === 'linkSection';
|
||||
},
|
||||
isLinkSwitchShow() {
|
||||
return this.field === 'linkSwitch';
|
||||
},
|
||||
isLinkSection() {
|
||||
const list = ['RAMP_TERMINAL', 'TRAIN_TERMINAL', 'SHUNT_TERMINAL'];
|
||||
return list.includes(this.editModel.type);
|
||||
},
|
||||
isLinkSwitch() {
|
||||
return this.editModel.type === 'FLEXIBLE';
|
||||
},
|
||||
isLinkDirection() {
|
||||
return ['ASSIST', 'PICK_ASSIST', 'DEPART_ASSIST', 'ACCIDENT', 'CHANGE_DIRECTION', 'RECOVERY', 'OCCLUSION'].includes(this.editModel.type);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInit() {
|
||||
if (this.stationList && this.stationList.length) {
|
||||
this.centralizedStationList = this.stationList.filter(station=> station.centralized);
|
||||
}
|
||||
},
|
||||
hover(field) {
|
||||
this.field = field == this.field ? '' : field;
|
||||
if (this.field) {
|
||||
this.$emit('deviceSelect', 'SignalButton');
|
||||
} else {
|
||||
this.$emit('deviceSelect', '');
|
||||
}
|
||||
},
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code);
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
if (selected && selected._type.toUpperCase() === 'SignalButton'.toUpperCase()) {
|
||||
this.handleInit();
|
||||
this.$refs.form && this.$refs.form.resetFields();
|
||||
this.$refs.dataform && this.$refs.dataform.resetFields();
|
||||
this.editModel.signalCode = '';
|
||||
this.editModel.switchCode = '';
|
||||
this.editModel.sectionCode = '';
|
||||
this.editModel.labelEnum = '';
|
||||
this.activeName = 'first';
|
||||
this.editModel = deepAssign(this.editModel, selected);
|
||||
} else if (this.field === 'linkSignal' && selected && selected._type.toUpperCase() === 'Signal'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.editModel.signalCode = selected.code;
|
||||
} else if (this.field === 'linkSection' && selected && selected._type.toUpperCase() === 'Section'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.editModel.sectionCode = selected.code;
|
||||
} else if (this.field === 'linkSwitch' && selected && selected._type.toUpperCase() === 'Switch'.toUpperCase()) {
|
||||
this.activeName = 'first';
|
||||
this.editModel.switchCode = selected.code;
|
||||
}
|
||||
this.field = '';
|
||||
this.$emit('deviceSelect', '');
|
||||
},
|
||||
clearDeviceSelect() {
|
||||
this.$emit('deviceSelect', '');
|
||||
},
|
||||
create() {
|
||||
const model = {
|
||||
_type: 'SignalButton',
|
||||
code: getUID('BTN', this.signalButtonList),
|
||||
type: this.addModel.type,
|
||||
name: this.addModel.name,
|
||||
position: {
|
||||
x: this.addModel.position.x,
|
||||
y: this.addModel.position.y
|
||||
},
|
||||
nameOffset: {
|
||||
x: this.addModel.nameOffset.x,
|
||||
y: this.addModel.nameOffset.y
|
||||
}
|
||||
};
|
||||
this.$refs.createForm.resetForm();
|
||||
this.$emit('updateMapModel', model);
|
||||
},
|
||||
deleteObj() {
|
||||
this.$refs.dataform.deleteObj();
|
||||
},
|
||||
// 修改对象
|
||||
edit() {
|
||||
this.$refs.dataform.edit();
|
||||
},
|
||||
updateMapModel(data) {
|
||||
if (this.isLinkSignal) {
|
||||
data.sectionCode = ''; data.switchCode = ''; data.labelEnum = '';
|
||||
} else if (this.isLinkSection) {
|
||||
data.signalCode = ''; data.switchCode = ''; data.labelEnum = '';
|
||||
} else if (this.isLinkSwitch) {
|
||||
data.signalCode = ''; data.sectionCode = ''; data.labelEnum = '';
|
||||
} else if (this.isLinkDirection) {
|
||||
data.sectionCode = ''; data.signalCode = ''; data.switchCode = '';
|
||||
}
|
||||
this.$emit('updateMapModel', data);
|
||||
}
|
||||
name: 'SignalButton',
|
||||
components: {
|
||||
OperateProperty,
|
||||
CreateOperate
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return null
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
lazy: true,
|
||||
field: '',
|
||||
editModel: {
|
||||
code: '',
|
||||
name: '',
|
||||
type: '',
|
||||
signalCode: '',
|
||||
sectionCode: '',
|
||||
switchCode: '',
|
||||
labelEnum: '',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
nameOffset: {
|
||||
x: 0,
|
||||
y: -10
|
||||
},
|
||||
stationCode: ''
|
||||
},
|
||||
addModel: {
|
||||
name: '',
|
||||
type: '',
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
nameOffset: {
|
||||
x: 0,
|
||||
y: -10
|
||||
}
|
||||
},
|
||||
typeList: [
|
||||
{ value: 'PICK', label: '接车按钮' },
|
||||
{ value: 'PASS', label: '通过按钮' },
|
||||
{ value: 'GUIDE', label: '引导按钮' },
|
||||
{ value: 'FLEXIBLE', label: '变通按钮' },
|
||||
{ value: 'RAMP_TERMINAL', label: '坡道终端按钮' },
|
||||
{ value: 'TRAIN_TERMINAL', label: '列车终端按钮' },
|
||||
{ value: 'SHUNT_TERMINAL', label: '调车终端按钮' },
|
||||
{ value: 'ASSIST', label: '总辅助按钮' },
|
||||
{ value: 'PICK_ASSIST', label: '接辅助按钮' },
|
||||
{ value: 'DEPART_ASSIST', label: '发辅助按钮' },
|
||||
{ value: 'ACCIDENT', label: '事故按钮' },
|
||||
{ value: 'CHANGE_DIRECTION', label: '改方按钮' },
|
||||
{ value: 'RECOVERY', label: '复原按钮' },
|
||||
{ value: 'OCCLUSION', label: '闭塞按钮' }
|
||||
],
|
||||
centralizedStationList: [], // 设备集中站列表
|
||||
directionList: [
|
||||
{ label: 'X', value: 'X' },
|
||||
{ label: 'XF', value: 'XF' },
|
||||
{ label: 'XD', value: 'XD' },
|
||||
{ label: 'S', value: 'S' },
|
||||
{ label: 'SF', value: 'SF' },
|
||||
{ label: 'SD', value: 'SD' }
|
||||
],
|
||||
rules: {
|
||||
code: [{ required: true, message: this.$t('rules.selectText'), trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请选择按钮类型', trigger: 'change' }],
|
||||
signalCode: [{ required: true, message: '请选择关联的信号机设备', trigger: 'change' }],
|
||||
sectionCode: [{ required: true, message: '请选择关联的区段设备', trigger: 'change' }],
|
||||
switchCode: [{ required: true, message: '请选择关联的道岔设备', trigger: 'change' }],
|
||||
'position.x': [{ required: true, message: this.$t('rules.pleaseEnterXCoordinate'), trigger: 'blur' }],
|
||||
'position.y': [{ required: true, message: this.$t('rules.pleaseEnterYCoordinate'), trigger: 'blur' }],
|
||||
labelEnum: [{ required: true, message: '请选择方向', trigger: 'change' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', ['signalButtonList', 'stationList', 'lineCode', 'signalList', 'sectionList', 'switchList']),
|
||||
form() {
|
||||
const form = {
|
||||
labelWidth: '130px',
|
||||
items: {
|
||||
code: {
|
||||
name: '',
|
||||
item: []
|
||||
},
|
||||
draw: {
|
||||
name: this.$t('map.drawData'),
|
||||
item: [
|
||||
{
|
||||
prop: 'code',
|
||||
label: '按钮编码:',
|
||||
type: 'select',
|
||||
optionLabel: 'code',
|
||||
optionValue: 'code',
|
||||
options: this.signalButtonList,
|
||||
deviceChange: this.deviceChange
|
||||
},
|
||||
{ prop: 'name', label: '按钮名称:', type: 'input' },
|
||||
{
|
||||
prop: 'nameOffset',
|
||||
label: '名称偏移:',
|
||||
type: 'coordinate',
|
||||
width: '120px',
|
||||
children: [
|
||||
{
|
||||
prop: 'nameOffset.x',
|
||||
firstLevel: 'nameOffset',
|
||||
secondLevel: 'x',
|
||||
label: 'x',
|
||||
type: 'number',
|
||||
labelWidth: '25px',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
prop: 'nameOffset.y',
|
||||
firstLevel: 'nameOffset',
|
||||
secondLevel: 'y',
|
||||
label: 'y',
|
||||
type: 'number',
|
||||
labelWidth: '25px',
|
||||
disabled: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{ prop: 'type', label: '按钮类型:', type: 'select', optionLabel: 'label', optionValue: 'value', options: this.typeList },
|
||||
{
|
||||
prop: 'signalCode',
|
||||
label: '关联信号机:',
|
||||
type: 'selectHover',
|
||||
optionLabel: 'name&&code',
|
||||
optionValue: 'code',
|
||||
clearable: true,
|
||||
options: this.signalList,
|
||||
hover: this.hover,
|
||||
buttonType: 'linkSignal',
|
||||
buttonShowType: this.isLinkSignalShow,
|
||||
isHidden: !this.isLinkSignal
|
||||
},
|
||||
{
|
||||
prop: 'sectionCode',
|
||||
label: '关联区段:',
|
||||
type: 'selectHover',
|
||||
optionLabel: 'name&&code',
|
||||
optionValue: 'code',
|
||||
clearable: true,
|
||||
options: this.sectionList,
|
||||
hover: this.hover,
|
||||
buttonType: 'linkSection',
|
||||
buttonShowType: this.isLinkSectionShow,
|
||||
isHidden: !this.isLinkSection
|
||||
},
|
||||
{
|
||||
prop: 'switchCode',
|
||||
label: '关联道岔:',
|
||||
type: 'selectHover',
|
||||
optionLabel: 'name&&code',
|
||||
optionValue: 'code',
|
||||
clearable: true,
|
||||
options: this.switchList,
|
||||
hover: this.hover,
|
||||
buttonType: 'linkSwitch',
|
||||
buttonShowType: this.isLinkSwitchShow,
|
||||
isHidden: !this.isLinkSwitch
|
||||
},
|
||||
{
|
||||
prop: 'labelEnum',
|
||||
label: '方向:',
|
||||
type: 'select',
|
||||
optionLabel: 'label',
|
||||
optionValue: 'value',
|
||||
options: this.directionList,
|
||||
isHidden: !this.isLinkDirection
|
||||
},
|
||||
{
|
||||
prop: 'position',
|
||||
label: this.$t('map.textPoints'),
|
||||
type: 'coordinate',
|
||||
width: '120px',
|
||||
children: [
|
||||
{
|
||||
prop: 'position.x',
|
||||
firstLevel: 'position',
|
||||
secondLevel: 'x',
|
||||
label: 'x:',
|
||||
type: 'number',
|
||||
labelWidth: '25px',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
prop: 'position.y',
|
||||
firstLevel: 'position',
|
||||
secondLevel: 'y',
|
||||
label: 'y:',
|
||||
type: 'number',
|
||||
labelWidth: '25px',
|
||||
disabled: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'stationCode',
|
||||
label: this.$t('map.equipmentStation') + ':',
|
||||
type: 'select',
|
||||
optionLabel: 'name&&code',
|
||||
optionValue: 'code',
|
||||
options: this.centralizedStationList
|
||||
}
|
||||
]
|
||||
},
|
||||
map: {
|
||||
name: this.$t('map.mapData'),
|
||||
item: []
|
||||
}
|
||||
}
|
||||
}
|
||||
return form
|
||||
},
|
||||
createForm() {
|
||||
const form = {
|
||||
labelWidth: '110px',
|
||||
items: {
|
||||
all: {
|
||||
name: '',
|
||||
item: [
|
||||
{ prop: 'name', label: '按钮名称:', type: 'input' },
|
||||
{ prop: 'type', label: '按钮类型:', type: 'select', optionLabel: 'label', optionValue: 'value', options: this.typeList },
|
||||
{
|
||||
prop: 'position',
|
||||
label: this.$t('map.textPoints'),
|
||||
type: 'coordinate',
|
||||
width: '120px',
|
||||
children: [
|
||||
{
|
||||
prop: 'position.x',
|
||||
firstLevel: 'position',
|
||||
secondLevel: 'x',
|
||||
label: 'x:',
|
||||
type: 'number',
|
||||
labelWidth: '25px',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
prop: 'position.y',
|
||||
firstLevel: 'position',
|
||||
secondLevel: 'y',
|
||||
label: 'y:',
|
||||
type: 'number',
|
||||
labelWidth: '25px',
|
||||
disabled: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
return form
|
||||
},
|
||||
isLinkSignalShow() {
|
||||
return this.field === 'linkSignal'
|
||||
},
|
||||
isLinkSignal() {
|
||||
const list = ['PICK', 'PASS', 'GUIDE']
|
||||
return list.includes(this.editModel.type)
|
||||
},
|
||||
isLinkSectionShow() {
|
||||
return this.field === 'linkSection'
|
||||
},
|
||||
isLinkSwitchShow() {
|
||||
return this.field === 'linkSwitch'
|
||||
},
|
||||
isLinkSection() {
|
||||
const list = ['RAMP_TERMINAL', 'TRAIN_TERMINAL', 'SHUNT_TERMINAL']
|
||||
return list.includes(this.editModel.type)
|
||||
},
|
||||
isLinkSwitch() {
|
||||
return this.editModel.type === 'FLEXIBLE'
|
||||
},
|
||||
isLinkDirection() {
|
||||
return ['ASSIST', 'PICK_ASSIST', 'DEPART_ASSIST', 'ACCIDENT', 'CHANGE_DIRECTION', 'RECOVERY', 'OCCLUSION'].includes(
|
||||
this.editModel.type
|
||||
)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInit() {
|
||||
if (this.stationList && this.stationList.length) {
|
||||
this.centralizedStationList = this.stationList.filter(station => station.centralized)
|
||||
}
|
||||
},
|
||||
hover(field) {
|
||||
this.field = field == this.field ? '' : field
|
||||
if (this.field) {
|
||||
this.$emit('deviceSelect', 'SignalButton')
|
||||
} else {
|
||||
this.$emit('deviceSelect', '')
|
||||
}
|
||||
},
|
||||
deviceChange(code) {
|
||||
this.$emit('setCenter', code)
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code))
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
if (selected && selected._type.toUpperCase() === 'SignalButton'.toUpperCase()) {
|
||||
this.handleInit()
|
||||
this.$refs.form && this.$refs.form.resetFields()
|
||||
this.$refs.dataform && this.$refs.dataform.resetFields()
|
||||
this.editModel.signalCode = ''
|
||||
this.editModel.switchCode = ''
|
||||
this.editModel.sectionCode = ''
|
||||
this.editModel.labelEnum = ''
|
||||
this.activeName = 'first'
|
||||
this.editModel = deepAssign(this.editModel, selected)
|
||||
} else if (this.field === 'linkSignal' && selected && selected._type.toUpperCase() === 'Signal'.toUpperCase()) {
|
||||
this.activeName = 'first'
|
||||
this.editModel.signalCode = selected.code
|
||||
} else if (this.field === 'linkSection' && selected && selected._type.toUpperCase() === 'Section'.toUpperCase()) {
|
||||
this.activeName = 'first'
|
||||
this.editModel.sectionCode = selected.code
|
||||
} else if (this.field === 'linkSwitch' && selected && selected._type.toUpperCase() === 'Switch'.toUpperCase()) {
|
||||
this.activeName = 'first'
|
||||
this.editModel.switchCode = selected.code
|
||||
}
|
||||
this.field = ''
|
||||
this.$emit('deviceSelect', '')
|
||||
},
|
||||
clearDeviceSelect() {
|
||||
this.$emit('deviceSelect', '')
|
||||
},
|
||||
create() {
|
||||
const model = {
|
||||
_type: 'SignalButton',
|
||||
code: getUID('BTN', this.signalButtonList),
|
||||
type: this.addModel.type,
|
||||
name: this.addModel.name,
|
||||
position: {
|
||||
x: this.addModel.position.x,
|
||||
y: this.addModel.position.y
|
||||
},
|
||||
nameOffset: {
|
||||
x: this.addModel.nameOffset.x,
|
||||
y: this.addModel.nameOffset.y
|
||||
}
|
||||
}
|
||||
this.$refs.createForm.resetForm()
|
||||
this.$emit('updateMapModel', model)
|
||||
},
|
||||
deleteObj() {
|
||||
this.$refs.dataform.deleteObj()
|
||||
},
|
||||
// 修改对象
|
||||
edit() {
|
||||
this.$refs.dataform.edit()
|
||||
},
|
||||
updateMapModel(data) {
|
||||
if (this.isLinkSignal) {
|
||||
data.sectionCode = ''
|
||||
data.switchCode = ''
|
||||
data.labelEnum = ''
|
||||
} else if (this.isLinkSection) {
|
||||
data.signalCode = ''
|
||||
data.switchCode = ''
|
||||
data.labelEnum = ''
|
||||
} else if (this.isLinkSwitch) {
|
||||
data.signalCode = ''
|
||||
data.sectionCode = ''
|
||||
data.labelEnum = ''
|
||||
} else if (this.isLinkDirection) {
|
||||
data.sectionCode = ''
|
||||
data.signalCode = ''
|
||||
data.switchCode = ''
|
||||
}
|
||||
this.$emit('updateMapModel', data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
.coordinate {
|
||||
overflow: hidden;
|
||||
@import 'src/styles/mixin.scss';
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
.coordinate {
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 40px;
|
||||
padding: 0 12px 0 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
line-height: 28px;
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
/deep/ {
|
||||
.el-select .el-input {
|
||||
width: 130px;
|
||||
}
|
||||
.title {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 40px;
|
||||
padding: 0 12px 0 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
line-height: 28px;
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
/deep/ {
|
||||
.el-select .el-input {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.input-with-select .el-input-group__prepend {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
.input-with-select .el-input-group__prepend {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user