JD1A-信号按钮和表示状态修改
This commit is contained in:
Yuan
parent
3c82c261fa
commit
c4fc19c88e
@ -256,9 +256,28 @@ class SkinCode extends defaultStyle {
|
||||
};
|
||||
|
||||
this[deviceType.SignalButton] = {
|
||||
shape: 'roundWithDock'
|
||||
shape: 'roundWithDock',
|
||||
fillColor: '#808080',
|
||||
showName: true
|
||||
}
|
||||
|
||||
this[deviceType.SwitchFault] = {
|
||||
displayCondition: '01', // 显示条件 （01所有模式下显示 02 行调显示 03现地显示）
|
||||
text: {
|
||||
fontSize: 14, // 字体大小
|
||||
fontWeight: 'normal', // 字体粗细
|
||||
distance: -50 // 灯跟文字距离
|
||||
},
|
||||
lamp: {
|
||||
square: true, // 方形
|
||||
radiusR: 20, // 控制灯大小
|
||||
controlColor: '#00d900', // 控制灯颜色
|
||||
offColor: '#ff0000',
|
||||
lineWidth: 2,
|
||||
strokeColor: '#FFFFFF' // 控制灯描边样式
|
||||
}
|
||||
};
|
||||
|
||||
// 供电线路
|
||||
this[deviceType.Power] = {
|
||||
noElectricStrokeColor:'#808080', // 无电颜色
|
||||
|
||||
@ -541,6 +541,7 @@ class SkinCode extends defaultStyle {
|
||||
distance: 5 // 灯跟文字距离
|
||||
},
|
||||
lamp: {
|
||||
square: false, // 方形
|
||||
radiusR: 6, // 控制灯大小
|
||||
controlColor: '#000000', // 控制灯颜色
|
||||
offColor: '#ff0000',
|
||||
|
||||
@ -45,12 +45,13 @@ export default class SaidLamp extends Group {
|
||||
this.control = new EControl({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
arc: {
|
||||
control: {
|
||||
shape: {
|
||||
cx: this.computedPosition.x,
|
||||
cy: this.computedPosition.y,
|
||||
r: this.deviceStyle.lamp.radiusR
|
||||
},
|
||||
isSquare: this.deviceStyle.lamp.square,
|
||||
subType: 'Control',
|
||||
lineWidth: this.deviceStyle.lamp.lineWidth || 0,
|
||||
fill: this.deviceStyle.lamp.controlColor,
|
||||
|
||||
@ -1,42 +1,59 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
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';
|
||||
import Group from 'zrender/src/container/Group'
|
||||
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'
|
||||
const typeList = [
|
||||
'PICK_ASSIST',
|
||||
'DEPART_ASSIST',
|
||||
'ASSIST',
|
||||
'GUIDELOCK',
|
||||
'SECTION_FAULT_UNLOCK',
|
||||
'LOCATE',
|
||||
'REVERSE',
|
||||
'CANCEL',
|
||||
'HUMAN_RELEASE_ROUTE',
|
||||
'MONOLOCK',
|
||||
'UNLOCK',
|
||||
'BLOCK',
|
||||
'UNBLOCK',
|
||||
'CHANGE_DIRECTION'
|
||||
]
|
||||
|
||||
export default class SignalButton extends Group {
|
||||
constructor(model, {style}) {
|
||||
super();
|
||||
this._code = model.code;
|
||||
this._type = model._type;
|
||||
this.zlevel = model.zlevel;
|
||||
const pictureDevice = store.getters['map/getPictureDeviceByCode'](model.code);
|
||||
constructor(model, { style }) {
|
||||
super()
|
||||
this._code = model.code
|
||||
this._type = model._type
|
||||
this.zlevel = model.zlevel
|
||||
const pictureDevice = store.getters['map/getPictureDeviceByCode'](model.code)
|
||||
if (pictureDevice) {
|
||||
this.computedPosition = pictureDevice.position;
|
||||
this.computedPosition = pictureDevice.position
|
||||
} else {
|
||||
this.computedPosition = model.position;
|
||||
this.computedPosition = model.position
|
||||
}
|
||||
this.z = 0;
|
||||
this.model = model;
|
||||
this.style = style;
|
||||
this.z = 0
|
||||
this.model = model
|
||||
this.style = style
|
||||
// Line
|
||||
this.create();
|
||||
this.setState(model);
|
||||
this.create()
|
||||
this.setState(model)
|
||||
}
|
||||
|
||||
create() {
|
||||
const model = this.model;
|
||||
const computedPosition = this.computedPosition;
|
||||
const fillColor = this.getTypeColor();
|
||||
const queryList = window.location.search.substring(1).split('&');
|
||||
const model = this.model
|
||||
const computedPosition = this.computedPosition
|
||||
const fillColor = this.getTypeColor()
|
||||
const queryList = window.location.search.substring(1).split('&')
|
||||
const queryCtc = queryList.find(item => {
|
||||
return item.includes('ctc');
|
||||
});
|
||||
const ctcArcList = ['OCCLUSION', 'RECOVERY', 'CHANGE_DIRECTION', 'ACCIDENT', 'DEPART_ASSIST', 'PICK_ASSIST', 'ASSIST'];
|
||||
const typeList = []
|
||||
if (queryCtc && ctcArcList.includes(model.type)){
|
||||
return item.includes('ctc')
|
||||
})
|
||||
const ctcArcList = ['OCCLUSION', 'RECOVERY', 'CHANGE_DIRECTION', 'ACCIDENT', 'DEPART_ASSIST', 'PICK_ASSIST', 'ASSIST']
|
||||
|
||||
// if (model.code === 'BTN31730') debugger
|
||||
if (queryCtc && ctcArcList.includes(model.type)) {
|
||||
this.arcShape = new Arc({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
@ -50,11 +67,9 @@ export default class SignalButton extends Group {
|
||||
lineWidth: 1,
|
||||
fill: fillColor
|
||||
}
|
||||
});
|
||||
this.add(this.arcShape);
|
||||
} else if (this.style.SignalButton
|
||||
&& this.style.SignalButton.shape === 'roundWithDock'
|
||||
&& typeList.includes(model.type)) {
|
||||
})
|
||||
this.add(this.arcShape)
|
||||
} else if (this.style.SignalButton && this.style.SignalButton.shape === 'roundWithDock' && typeList.includes(model.type)) {
|
||||
const circle1 = new Circle({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 2,
|
||||
@ -94,25 +109,29 @@ export default class SignalButton extends Group {
|
||||
}
|
||||
})
|
||||
this.arcShape = circle1
|
||||
this.add(circle1).add(circle2).add(circle3)
|
||||
this.arcShapeDock1 = circle2
|
||||
this.arcShapeDock2 = circle3
|
||||
this.add(circle1)
|
||||
.add(circle2)
|
||||
.add(circle3)
|
||||
} else {
|
||||
this.rectButton = new Rect({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
shape: {
|
||||
x: model.position.x,
|
||||
y: model.position.y,
|
||||
x: computedPosition.x,
|
||||
y: computedPosition.y,
|
||||
width: 14,
|
||||
height: 14
|
||||
},
|
||||
style: {
|
||||
lineDash: null,
|
||||
stroke: '#69666E',
|
||||
lineWidth:1,
|
||||
lineWidth: 1,
|
||||
fill: fillColor
|
||||
}
|
||||
});
|
||||
this.add(this.rectButton);
|
||||
})
|
||||
this.add(this.rectButton)
|
||||
}
|
||||
this.leftLine = new Line({
|
||||
zlevel: this.zlevel,
|
||||
@ -127,9 +146,9 @@ export default class SignalButton extends Group {
|
||||
lineWidth: 2,
|
||||
stroke: '#ff0000'
|
||||
}
|
||||
});
|
||||
this.add(this.leftLine);
|
||||
this.leftLine.hide();
|
||||
})
|
||||
this.add(this.leftLine)
|
||||
this.leftLine.hide()
|
||||
this.rightLine = new Line({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 1,
|
||||
@ -143,9 +162,9 @@ export default class SignalButton extends Group {
|
||||
lineWidth: 2,
|
||||
stroke: '#ff0000'
|
||||
}
|
||||
});
|
||||
this.add(this.rightLine);
|
||||
this.rightLine.hide();
|
||||
})
|
||||
this.add(this.rightLine)
|
||||
this.rightLine.hide()
|
||||
this.leftBoard = new Line({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 1,
|
||||
@ -159,9 +178,9 @@ export default class SignalButton extends Group {
|
||||
lineWidth: 2,
|
||||
stroke: '#FFFFFF'
|
||||
}
|
||||
});
|
||||
this.add(this.leftBoard);
|
||||
this.leftBoard.hide();
|
||||
})
|
||||
this.add(this.leftBoard)
|
||||
this.leftBoard.hide()
|
||||
this.topBoard = new Line({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 1,
|
||||
@ -175,9 +194,9 @@ export default class SignalButton extends Group {
|
||||
lineWidth: 2,
|
||||
stroke: '#FFFFFF'
|
||||
}
|
||||
});
|
||||
this.add(this.topBoard);
|
||||
this.topBoard.hide();
|
||||
})
|
||||
this.add(this.topBoard)
|
||||
this.topBoard.hide()
|
||||
this.rightBoard = new Line({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 1,
|
||||
@ -191,9 +210,9 @@ export default class SignalButton extends Group {
|
||||
lineWidth: 2,
|
||||
stroke: '#A0A0A0'
|
||||
}
|
||||
});
|
||||
this.add(this.rightBoard);
|
||||
this.rightBoard.hide();
|
||||
})
|
||||
this.add(this.rightBoard)
|
||||
this.rightBoard.hide()
|
||||
this.bottomBoard = new Line({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 1,
|
||||
@ -207,11 +226,11 @@ export default class SignalButton extends Group {
|
||||
lineWidth: 2,
|
||||
stroke: '#A0A0A0'
|
||||
}
|
||||
});
|
||||
this.add(this.bottomBoard);
|
||||
this.bottomBoard.hide();
|
||||
const hasTextList = ['PASS', 'ASSIST', 'PICK_ASSIST', 'DEPART_ASSIST', 'ACCIDENT', 'CHANGE_DIRECTION', 'RECOVERY', 'OCCLUSION'];
|
||||
if (hasTextList.includes(model.type)) {
|
||||
})
|
||||
this.add(this.bottomBoard)
|
||||
this.bottomBoard.hide()
|
||||
const hasTextList = ['PASS', 'ASSIST', 'PICK_ASSIST', 'DEPART_ASSIST', 'ACCIDENT', 'CHANGE_DIRECTION', 'RECOVERY', 'OCCLUSION']
|
||||
if (hasTextList.includes(model.type) || (this.style.SignalButton && this.style.SignalButton.showName)) {
|
||||
this.buttonText = new Text({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
@ -226,80 +245,70 @@ export default class SignalButton extends Group {
|
||||
textAlign: 'middle',
|
||||
textVerticalAlign: 'top'
|
||||
}
|
||||
});
|
||||
this.add(this.buttonText);
|
||||
})
|
||||
this.add(this.buttonText)
|
||||
}
|
||||
// if (model.type === 'CHANGE_DIRECTION') {
|
||||
// this.arcFlash = new Arc({
|
||||
// _subType: 'change_direction_flash',
|
||||
// zlevel: this.zlevel,
|
||||
// z: this.z,
|
||||
// shape: {
|
||||
// cx: model.position.x + 18 + 7,
|
||||
// cy: model.position.y + 7,
|
||||
// r: 6
|
||||
// },
|
||||
// style: {
|
||||
// lineWidth: 0,
|
||||
// fill: '#ffff00'
|
||||
// }
|
||||
// });
|
||||
// this.add(this.arcFlash);
|
||||
// }
|
||||
}
|
||||
startAnimate() {
|
||||
this.rectButton && this.rectButton.animateStyle(true)
|
||||
this.rectButton &&
|
||||
this.rectButton
|
||||
.animateStyle(true)
|
||||
.when(0, { fill: '#000' })
|
||||
.when(1000, { fill: this.getTypeColor() })
|
||||
.when(2000, { fill: '#000' })
|
||||
.start();
|
||||
.start()
|
||||
}
|
||||
stopAnimation() {
|
||||
this.rectButton && this.rectButton.stopAnimation(true);
|
||||
this.rectButton && this.rectButton.stopAnimation(true)
|
||||
// this.arcFlash && this.arcFlash.stopAnimation(false);
|
||||
}
|
||||
getTypeColor() {
|
||||
let color = '';
|
||||
const list = ['ASSIST', 'ACCIDENT', 'PICK_ASSIST', 'DEPART_ASSIST', 'CHANGE_DIRECTION', 'RECOVERY', 'OCCLUSION'];
|
||||
if (this.model.type === 'FLEXIBLE' || this.model.type === 'SHUNT_TERMINAL') {
|
||||
color = '#808080';
|
||||
} else if (this.model.type === 'GUIDE') {
|
||||
color = '#5050E1';
|
||||
} else if (list.includes(this.model.type)) {
|
||||
color = '#ccc';
|
||||
} else {
|
||||
color = '#008000';
|
||||
if (this.style.SignalButton && this.style.SignalButton.fillColor && typeList.includes(this.model.type)) {
|
||||
return this.style.SignalButton.fillColor
|
||||
}
|
||||
return color;
|
||||
}//
|
||||
let color = ''
|
||||
const list = ['ASSIST', 'ACCIDENT', 'PICK_ASSIST', 'DEPART_ASSIST', 'CHANGE_DIRECTION', 'RECOVERY', 'OCCLUSION']
|
||||
if (this.model.type === 'FLEXIBLE' || this.model.type === 'SHUNT_TERMINAL') {
|
||||
color = '#808080'
|
||||
} else if (this.model.type === 'GUIDE') {
|
||||
color = '#5050E1'
|
||||
} else if (list.includes(this.model.type)) {
|
||||
color = '#ccc'
|
||||
} else {
|
||||
color = '#008000'
|
||||
}
|
||||
return color
|
||||
} //
|
||||
recover() {
|
||||
this.stopAnimation();
|
||||
this.rectButton && this.rectButton.setStyle({ fill:this.getTypeColor() });
|
||||
this.arcShape && this.arcShape.setStyle({ fill:this.getTypeColor() });
|
||||
this.rightLine && this.rightLine.hide();
|
||||
this.leftLine && this.leftLine.hide();
|
||||
this.rectButton && this.rectButton.show();
|
||||
this.arcShape && this.arcShape.show();
|
||||
this.buttonText && this.buttonText.show();
|
||||
this.leftBoard && this.leftBoard.hide();
|
||||
this.rightBoard && this.rightBoard.hide();
|
||||
this.topBoard && this.topBoard.hide();
|
||||
this.bottomBoard && this.bottomBoard.hide();
|
||||
this.stopAnimation()
|
||||
this.rectButton && this.rectButton.setStyle({ fill: this.getTypeColor() })
|
||||
this.arcShape && this.arcShape.setStyle({ fill: this.getTypeColor() })
|
||||
this.rightLine && this.rightLine.hide()
|
||||
this.leftLine && this.leftLine.hide()
|
||||
this.rectButton && this.rectButton.show()
|
||||
this.arcShape && this.arcShape.show()
|
||||
this.arcShapeDock1 && this.arcShapeDock1.show()
|
||||
this.arcShapeDock2 && this.arcShapeDock2.show()
|
||||
this.buttonText && this.buttonText.show()
|
||||
this.leftBoard && this.leftBoard.hide()
|
||||
this.rightBoard && this.rightBoard.hide()
|
||||
this.topBoard && this.topBoard.hide()
|
||||
this.bottomBoard && this.bottomBoard.hide()
|
||||
}
|
||||
blockShow() {
|
||||
this.rightLine && this.rightLine.show();
|
||||
this.leftLine && this.leftLine.show();
|
||||
this.rightLine && this.rightLine.show()
|
||||
this.leftLine && this.leftLine.show()
|
||||
}
|
||||
setState(model) {
|
||||
this.recover();
|
||||
this.recover()
|
||||
// { value: 'ASSIST', label: '总辅助按钮' },
|
||||
// { value: 'PICK_ASSIST', label: '接辅助按钮' },
|
||||
// { value: 'DEPART_ASSIST', label: '发辅助按钮' },
|
||||
const list = ['ASSIST', 'PICK_ASSIST', 'DEPART_ASSIST', 'CHANGE_DIRECTION', 'ACCIDENT', 'RECOVERY', 'OCCLUSION'];
|
||||
const list = ['ASSIST', 'PICK_ASSIST', 'DEPART_ASSIST', 'CHANGE_DIRECTION', 'ACCIDENT', 'RECOVERY', 'OCCLUSION']
|
||||
if (list.includes(model.type)) {
|
||||
if (this.rectButton) {
|
||||
if (model.pressDown) {
|
||||
this.rectButton.setStyle({ fill:'#FFFF00' });
|
||||
this.rectButton.setStyle({ fill: '#FFFF00' })
|
||||
// this.arcFlash.show();
|
||||
// const style = this.style;
|
||||
// this.arcFlash.animateStyle(true)
|
||||
@ -308,24 +317,25 @@ export default class SignalButton extends Group {
|
||||
// .when(1000, { fill: style.backgroundColor })
|
||||
// .start();
|
||||
} else {
|
||||
this.rectButton.setStyle({ fill:this.getTypeColor() });
|
||||
this.rectButton.setStyle({ fill: this.getTypeColor() })
|
||||
// this.arcFlash.stopAnimation(false);
|
||||
// this.arcFlash.hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!store.getters['map/checkDeviceShow'](this._code)) {
|
||||
this.buttonText && this.buttonText.hide();
|
||||
this.rectButton && this.rectButton.hide();
|
||||
this.leftLine && this.leftLine.hide();
|
||||
this.rightLine && this.rightLine.hide();
|
||||
this.arcShape && this.arcShape.hide();
|
||||
this.buttonText && this.buttonText.hide()
|
||||
this.rectButton && this.rectButton.hide()
|
||||
this.leftLine && this.leftLine.hide()
|
||||
this.rightLine && this.rightLine.hide()
|
||||
this.arcShape && this.arcShape.hide()
|
||||
this.arcShapeDock1 && this.arcShapeDock1.hide()
|
||||
this.arcShapeDock2 && this.arcShapeDock2.hide()
|
||||
} else {
|
||||
if (model.hasSelected) {
|
||||
this.startAnimate();
|
||||
this.startAnimate()
|
||||
}
|
||||
}
|
||||
}
|
||||
getAnchorPoint() {
|
||||
}
|
||||
getAnchorPoint() {}
|
||||
}
|
||||
|
||||
@ -13,23 +13,40 @@ export default class EControl extends Group {
|
||||
this.z = model.z;
|
||||
this.style = model.style;
|
||||
this.textStyle = model.text;
|
||||
this.arcStyle = model.arc;
|
||||
this.controlStyle = model.control;
|
||||
this.create();
|
||||
}
|
||||
|
||||
create() {
|
||||
this.control = new Arc({
|
||||
_subType: this.arcStyle.subType,
|
||||
this.control = this.controlStyle.isSquare ? new Rect({
|
||||
_subType: this.controlStyle.subType,
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
shape: this.arcStyle.shape,
|
||||
style: {
|
||||
lineWidth: this.arcStyle.lineWidth,
|
||||
fill: this.arcStyle.fill,
|
||||
stroke: this.arcStyle.stroke
|
||||
shape: {
|
||||
width: this.controlStyle.shape.r,
|
||||
height: this.controlStyle.shape.r,
|
||||
x: this.controlStyle.shape.cx - this.controlStyle.shape.r / 2,
|
||||
y: this.controlStyle.shape.cy - this.controlStyle.shape.r / 2,
|
||||
},
|
||||
onmouseover: this.arcStyle.mouseover,
|
||||
onmouseout: this.arcStyle.mouseout
|
||||
style: {
|
||||
lineWidth: this.controlStyle.lineWidth,
|
||||
fill: this.controlStyle.fill,
|
||||
stroke: this.controlStyle.stroke
|
||||
},
|
||||
onmouseover: this.controlStyle.mouseover,
|
||||
onmouseout: this.controlStyle.mouseout
|
||||
}) : new Arc({
|
||||
_subType: this.controlStyle.subType,
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
shape: this.controlStyle.shape,
|
||||
style: {
|
||||
lineWidth: this.controlStyle.lineWidth,
|
||||
fill: this.controlStyle.fill,
|
||||
stroke: this.controlStyle.stroke
|
||||
},
|
||||
onmouseover: this.controlStyle.mouseover,
|
||||
onmouseout: this.controlStyle.mouseout
|
||||
});
|
||||
this.text = new Text({
|
||||
_subType: 'Text',
|
||||
@ -63,7 +80,7 @@ export default class EControl extends Group {
|
||||
height: arcRect.height + 4
|
||||
},
|
||||
style: {
|
||||
lineDash: this.arcStyle.lineDash || this.style.arcBorderStyle.lineDash,
|
||||
lineDash: this.controlStyle.lineDash || this.style.arcBorderStyle.lineDash,
|
||||
stroke: this.style.arcBorderStyle.stroke,
|
||||
fill: this.style.arcBorderStyle.fill
|
||||
}
|
||||
@ -106,15 +123,15 @@ export default class EControl extends Group {
|
||||
setControlFlashing(color) {
|
||||
if (color) {
|
||||
this.control.animateStyle(true)
|
||||
.when(0, { fill: this.arcStyle.fill })
|
||||
.when(0, { fill: this.controlStyle.fill })
|
||||
.when(1000, { stroke: color })
|
||||
.when(2000, { fill: this.arcStyle.fill })
|
||||
.when(2000, { fill: this.controlStyle.fill })
|
||||
.start();
|
||||
}
|
||||
}
|
||||
recover() {
|
||||
this.control.stopAnimation(false);
|
||||
this.control.setStyle('fill', this.arcStyle.fill);
|
||||
this.control.setStyle('fill', this.controlStyle.fill);
|
||||
}
|
||||
setControlStroke(color, lineWidth) {
|
||||
this.control.setStyle('lineWidth', lineWidth);
|
||||
|
||||
@ -95,9 +95,9 @@ export default {
|
||||
{ value: 'GUIDELOCK', label: '引导总锁按钮' },
|
||||
{ value: 'SECTION_FAULT_UNLOCK', label: '区故解按钮' },
|
||||
{ value: 'MONOLOCK', label: '单锁按钮' },
|
||||
{ value: 'UNLOCK', label: '' },
|
||||
{ value: 'GUIDELOCK', label: '引导总锁按钮' },
|
||||
{ value: 'GUIDELOCK', label: '引导总锁按钮' },
|
||||
{ value: 'UNLOCK', label: '单解按钮' },
|
||||
{ value: 'BLOCK', label: '单封按钮' },
|
||||
{ value: 'UNBLOCK', label: '解封按钮' },
|
||||
|
||||
],
|
||||
centralizedStationList: [], // 设备集中站列表
|
||||
|
||||
Loading…
Reference in New Issue
Block a user