JD1A-信号按钮和表示状态修改

This commit is contained in:
Yuan 2022-07-20 15:35:55 +08:00
parent 3c82c261fa
commit c4fc19c88e
6 changed files with 389 additions and 341 deletions

View File

@ -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', // 无电颜色

View File

@ -541,6 +541,7 @@ class SkinCode extends defaultStyle {
distance: 5 // 灯跟文字距离
},
lamp: {
square: false, // 方形
radiusR: 6, // 控制灯大小
controlColor: '#000000', // 控制灯颜色
offColor: '#ff0000',

View File

@ -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,

View File

@ -1,331 +1,341 @@
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);
if (pictureDevice) {
this.computedPosition = pictureDevice.position;
} else {
this.computedPosition = model.position;
}
this.z = 0;
this.model = model;
this.style = style;
// Line
this.create();
this.setState(model);
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
} else {
this.computedPosition = model.position
}
this.z = 0
this.model = model
this.style = style
// Line
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 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)){
this.arcShape = new Arc({
zlevel: this.zlevel,
z: this.z,
shape: {
cx: computedPosition.x + 7,
cy: computedPosition.y + 7,
r: 7
},
style: {
stroke: '#69666E',
lineWidth: 1,
fill: fillColor
}
});
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,
shape: {
cx: computedPosition.x + 7,
cy: computedPosition.y + 7,
r: 7
},
style: {
stroke: '#69666E',
lineWidth: 1,
fill: fillColor
}
})
const circle2 = new Circle({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
cx: computedPosition.x + 7,
cy: computedPosition.y + 9,
r: 8
},
style: {
fill: '#000'
}
})
const circle3 = new Circle({
zlevel: this.zlevel,
z: this.z,
shape: {
cx: computedPosition.x + 7,
cy: computedPosition.y + 9,
r: 9
},
style: {
fill: '#eee'
}
})
this.arcShape = circle1
this.add(circle1).add(circle2).add(circle3)
create() {
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']
// if (model.code === 'BTN31730') debugger
if (queryCtc && ctcArcList.includes(model.type)) {
this.arcShape = new Arc({
zlevel: this.zlevel,
z: this.z,
shape: {
cx: computedPosition.x + 7,
cy: computedPosition.y + 7,
r: 7
},
style: {
stroke: '#69666E',
lineWidth: 1,
fill: fillColor
}
})
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,
shape: {
cx: computedPosition.x + 7,
cy: computedPosition.y + 7,
r: 7
},
style: {
stroke: '#69666E',
lineWidth: 1,
fill: fillColor
}
})
const circle2 = new Circle({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
cx: computedPosition.x + 7,
cy: computedPosition.y + 9,
r: 8
},
style: {
fill: '#000'
}
})
const circle3 = new Circle({
zlevel: this.zlevel,
z: this.z,
shape: {
cx: computedPosition.x + 7,
cy: computedPosition.y + 9,
r: 9
},
style: {
fill: '#eee'
}
})
this.arcShape = circle1
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: computedPosition.x,
y: computedPosition.y,
width: 14,
height: 14
},
style: {
lineDash: null,
stroke: '#69666E',
lineWidth: 1,
fill: fillColor
}
})
this.add(this.rectButton)
}
this.leftLine = new Line({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
x1: computedPosition.x + 1,
y1: computedPosition.y + 1,
x2: computedPosition.x + 13,
y2: computedPosition.y + 13
},
style: {
lineWidth: 2,
stroke: '#ff0000'
}
})
this.add(this.leftLine)
this.leftLine.hide()
this.rightLine = new Line({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
x1: computedPosition.x + 13,
y1: computedPosition.y + 1,
x2: computedPosition.x + 1,
y2: computedPosition.y + 13
},
style: {
lineWidth: 2,
stroke: '#ff0000'
}
})
this.add(this.rightLine)
this.rightLine.hide()
this.leftBoard = new Line({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
x1: computedPosition.x - 1,
y1: computedPosition.y - 1,
x2: computedPosition.x - 1,
y2: computedPosition.y + 15
},
style: {
lineWidth: 2,
stroke: '#FFFFFF'
}
})
this.add(this.leftBoard)
this.leftBoard.hide()
this.topBoard = new Line({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
x1: computedPosition.x - 1,
y1: computedPosition.y - 1,
x2: computedPosition.x + 15,
y2: computedPosition.y - 1
},
style: {
lineWidth: 2,
stroke: '#FFFFFF'
}
})
this.add(this.topBoard)
this.topBoard.hide()
this.rightBoard = new Line({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
x1: computedPosition.x + 15,
y1: computedPosition.y - 1,
x2: computedPosition.x + 15,
y2: computedPosition.y + 15
},
style: {
lineWidth: 2,
stroke: '#A0A0A0'
}
})
this.add(this.rightBoard)
this.rightBoard.hide()
this.bottomBoard = new Line({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
x1: computedPosition.x - 1,
y1: computedPosition.y + 15,
x2: computedPosition.x + 15,
y2: computedPosition.y + 15
},
style: {
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.style.SignalButton && this.style.SignalButton.showName)) {
this.buttonText = new Text({
zlevel: this.zlevel,
z: this.z,
style: {
x: computedPosition.x + model.nameOffset.x,
y: computedPosition.y + model.nameOffset.y,
fontWeight: '400',
fontSize: 10,
fontFamily: '',
text: model.name,
textFill: '#C0C0C0',
textAlign: 'middle',
textVerticalAlign: 'top'
}
})
this.add(this.buttonText)
}
}
startAnimate() {
this.rectButton &&
this.rectButton
.animateStyle(true)
.when(0, { fill: '#000' })
.when(1000, { fill: this.getTypeColor() })
.when(2000, { fill: '#000' })
.start()
}
stopAnimation() {
this.rectButton && this.rectButton.stopAnimation(true)
// this.arcFlash && this.arcFlash.stopAnimation(false);
}
getTypeColor() {
if (this.style.SignalButton && this.style.SignalButton.fillColor && typeList.includes(this.model.type)) {
return this.style.SignalButton.fillColor
}
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.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()
}
setState(model) {
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']
if (list.includes(model.type)) {
if (this.rectButton) {
if (model.pressDown) {
this.rectButton.setStyle({ fill: '#FFFF00' })
// this.arcFlash.show();
// const style = this.style;
// this.arcFlash.animateStyle(true)
// .when(0, { fill: style.backgroundColor })
// .when(500, { fill: '#FFFF00' })
// .when(1000, { fill: style.backgroundColor })
// .start();
} else {
this.rectButton = new Rect({
zlevel: this.zlevel,
z: this.z,
shape: {
x: model.position.x,
y: model.position.y,
width: 14,
height: 14
},
style: {
lineDash: null,
stroke: '#69666E',
lineWidth:1,
fill: fillColor
}
});
this.add(this.rectButton);
}
this.leftLine = new Line({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
x1: computedPosition.x + 1,
y1: computedPosition.y + 1,
x2: computedPosition.x + 13,
y2: computedPosition.y + 13
},
style: {
lineWidth: 2,
stroke: '#ff0000'
}
});
this.add(this.leftLine);
this.leftLine.hide();
this.rightLine = new Line({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
x1: computedPosition.x + 13,
y1: computedPosition.y + 1,
x2: computedPosition.x + 1,
y2: computedPosition.y + 13
},
style: {
lineWidth: 2,
stroke: '#ff0000'
}
});
this.add(this.rightLine);
this.rightLine.hide();
this.leftBoard = new Line({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
x1: computedPosition.x - 1,
y1: computedPosition.y - 1,
x2: computedPosition.x - 1,
y2: computedPosition.y + 15
},
style: {
lineWidth: 2,
stroke: '#FFFFFF'
}
});
this.add(this.leftBoard);
this.leftBoard.hide();
this.topBoard = new Line({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
x1: computedPosition.x - 1,
y1: computedPosition.y - 1,
x2: computedPosition.x + 15,
y2: computedPosition.y - 1
},
style: {
lineWidth: 2,
stroke: '#FFFFFF'
}
});
this.add(this.topBoard);
this.topBoard.hide();
this.rightBoard = new Line({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
x1: computedPosition.x + 15,
y1: computedPosition.y - 1,
x2: computedPosition.x + 15,
y2: computedPosition.y + 15
},
style: {
lineWidth: 2,
stroke: '#A0A0A0'
}
});
this.add(this.rightBoard);
this.rightBoard.hide();
this.bottomBoard = new Line({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
x1: computedPosition.x - 1,
y1: computedPosition.y + 15,
x2: computedPosition.x + 15,
y2: computedPosition.y + 15
},
style: {
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.buttonText = new Text({
zlevel: this.zlevel,
z: this.z,
style: {
x: computedPosition.x + model.nameOffset.x,
y: computedPosition.y + model.nameOffset.y,
fontWeight: '400',
fontSize: 10,
fontFamily: '',
text: model.name,
textFill: '#C0C0C0',
textAlign: 'middle',
textVerticalAlign: 'top'
}
});
this.add(this.buttonText);
this.rectButton.setStyle({ fill: this.getTypeColor() })
// this.arcFlash.stopAnimation(false);
// this.arcFlash.hide();
}
// 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)
.when(0, { fill: '#000' })
.when(1000, { fill: this.getTypeColor() })
.when(2000, { fill: '#000' })
.start();
}
stopAnimation() {
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';
}
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();
}
blockShow() {
this.rightLine && this.rightLine.show();
this.leftLine && this.leftLine.show();
}
setState(model) {
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'];
if (list.includes(model.type)) {
if (this.rectButton) {
if (model.pressDown) {
this.rectButton.setStyle({ fill:'#FFFF00' });
// this.arcFlash.show();
// const style = this.style;
// this.arcFlash.animateStyle(true)
// .when(0, { fill: style.backgroundColor })
// .when(500, { fill: '#FFFF00' })
// .when(1000, { fill: style.backgroundColor })
// .start();
} else {
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();
} else {
if (model.hasSelected) {
this.startAnimate();
}
}
}
getAnchorPoint() {
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.arcShapeDock1 && this.arcShapeDock1.hide()
this.arcShapeDock2 && this.arcShapeDock2.hide()
} else {
if (model.hasSelected) {
this.startAnimate()
}
}
}
getAnchorPoint() {}
}

View File

@ -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);

View File

@ -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: [], //