426 lines
15 KiB
JavaScript
426 lines
15 KiB
JavaScript
|
/*
|
||
|
|
* 道岔
|
||
|
|
*/
|
||
|
|
import Line from 'zrender/src/graphic/shape/Line';
|
||
|
|
import Group from 'zrender/src/container/Group';
|
||
|
|
import JTriangle from '../../utils/JTriangle';
|
||
|
|
import ESwName from './ESwName.js';
|
||
|
|
import ESwCore from './ESwCore.js';
|
||
|
|
import ESwLocal from './ESwLocal.js';
|
||
|
|
import ESwLnversion from './ESwLnversion';
|
||
|
|
import ELockRect from './ELockRect';
|
||
|
|
import EMouse from './EMouse';
|
||
|
|
|
||
|
|
export default class Switch extends Group {
|
||
|
|
constructor(model, style) {
|
||
|
|
super();
|
||
|
|
this._code = model.code;
|
||
|
|
this._type = model._type;
|
||
|
|
this.model = model;
|
||
|
|
this.style = style;
|
||
|
|
this.zlevel = model.zlevel;
|
||
|
|
this.z = 6;
|
||
|
|
this.triangle = new JTriangle(model.intersection, model.skew);
|
||
|
|
this.create();
|
||
|
|
this.createLockRect(); // 创建单锁矩形框显示
|
||
|
|
this.createMouseEvent();
|
||
|
|
this.setState(model);
|
||
|
|
}
|
||
|
|
|
||
|
|
createMouseEvent() {
|
||
|
|
// 鼠标事件
|
||
|
|
if (this.style.Switch.mouseOverStyle) {
|
||
|
|
this.mouseEvent = new EMouse(this);
|
||
|
|
this.add(this.mouseEvent);
|
||
|
|
this.on('mouseout', (e) => { this.mouseEvent.mouseout(e); });
|
||
|
|
this.on('mouseover', (e) => { this.mouseEvent.mouseover(e); });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
create() {
|
||
|
|
const model = this.model;
|
||
|
|
const style = this.style;
|
||
|
|
|
||
|
|
let halfWidth = style.Section.line.width / 2;
|
||
|
|
const switchWidth = style.Section.line.width + style.Section.line.beyondWidth * 2 + 0.8;
|
||
|
|
const swPadding = style.Switch.core.length;
|
||
|
|
const directx = this.triangle.drictx;
|
||
|
|
const directy = this.triangle.dricty;
|
||
|
|
const direct = -this.triangle.drictx * this.triangle.dricty;
|
||
|
|
const coverLength = switchWidth * 1.5;
|
||
|
|
|
||
|
|
this.swCore = new ESwCore({
|
||
|
|
zlevel: this.zlevel,
|
||
|
|
z: this.z,
|
||
|
|
style: style,
|
||
|
|
intersectionX: model.intersection.x,
|
||
|
|
intersectionY: model.intersection.y,
|
||
|
|
coverLength: coverLength,
|
||
|
|
lineWidth: switchWidth,
|
||
|
|
triangle: this.triangle
|
||
|
|
});
|
||
|
|
|
||
|
|
halfWidth += 0.3;
|
||
|
|
const point1 = [model.intersection.x - directx * halfWidth, model.intersection.y + directy * halfWidth];
|
||
|
|
const point2 = [point1[0] + directx * switchWidth / this.triangle.getSinRate(), point1[1]];
|
||
|
|
const point3 = [point2[0] + directx * this.triangle.getCotRate() * swPadding, point2[1] + directy * swPadding];
|
||
|
|
const point4 = [point3[0] + direct * this.triangle.getSin(switchWidth), point3[1] - direct * this.triangle.getCos(switchWidth)];
|
||
|
|
this.locShelter = new ESwLocal({ // 定位
|
||
|
|
zlevel: this.zlevel,
|
||
|
|
z: this.z,
|
||
|
|
style: style,
|
||
|
|
shelterPoints: [point1, point2, point3, point4],
|
||
|
|
cursor: 'pointer',
|
||
|
|
triangle: this.triangle,
|
||
|
|
onmouseover: () => { this.name.getArrowText().show(); },
|
||
|
|
onmouseout: () => { this.name.getArrowText().hide(); }
|
||
|
|
});
|
||
|
|
|
||
|
|
const slen = switchWidth / this.triangle.getSinRate();
|
||
|
|
const rpoint1 = [model.intersection.x + directx * halfWidth, model.intersection.y - directy * halfWidth];
|
||
|
|
const rpoint2 = [rpoint1[0] + directx * (swPadding + switchWidth * this.triangle.getCotRate()), rpoint1[1]];
|
||
|
|
const rpoint3 = [rpoint2[0], rpoint2[1] + directy * switchWidth];
|
||
|
|
const rpoint4 = [rpoint1[0] + this.triangle.getCos(slen), rpoint1[1] + this.triangle.getSin(slen)];
|
||
|
|
|
||
|
|
const switchWidth1 = style.Section.line.width / 2 + 0.1;
|
||
|
|
const width1 = switchWidth1 * this.triangle.getSinRate();
|
||
|
|
const height1 = switchWidth1 * this.triangle.getCosRate();
|
||
|
|
const width2 = (height1 + switchWidth1) / this.triangle.getTanRate();
|
||
|
|
const width3 = (style.Section.line.width / this.triangle.getSinRate()) - width2 - width1;
|
||
|
|
const spoint1 = [model.intersection.x + directx * width3, model.intersection.y - directy * switchWidth1];
|
||
|
|
const spoint2 = [spoint1[0] - directx * (width2 + width1) - directx * width3, spoint1[1]];
|
||
|
|
const spoint3 = [model.intersection.x - directx * width3, model.intersection.y + directy * switchWidth1];
|
||
|
|
const spoint4 = [spoint1[0] + directx * (width2 + width1) - directx * width3, spoint3[1]];
|
||
|
|
|
||
|
|
this.relocShelter = new ESwLnversion({ // 反位
|
||
|
|
zlevel: this.zlevel,
|
||
|
|
z: this.z,
|
||
|
|
style: style,
|
||
|
|
shelterPoints: [rpoint1, rpoint2, rpoint3, rpoint4],
|
||
|
|
sectionPoints: [spoint1, spoint2, spoint3, spoint4],
|
||
|
|
cursor: 'pointer',
|
||
|
|
halfWidth: halfWidth,
|
||
|
|
triangle: this.triangle,
|
||
|
|
onmouseover: () => { this.name.getArrowText().show(); },
|
||
|
|
onmouseout: () => { this.name.getArrowText().hide(); }
|
||
|
|
});
|
||
|
|
|
||
|
|
this.releaseBackground = new Line({ // 区段上遮盖段
|
||
|
|
zlevel: this.zlevel,
|
||
|
|
z: this.z,
|
||
|
|
shape: {
|
||
|
|
x1: model.intersection.x - (coverLength * this.triangle.getCotRate()),
|
||
|
|
y1: model.intersection.y,
|
||
|
|
x2: model.intersection.x + (coverLength * this.triangle.getCotRate()),
|
||
|
|
y2: model.intersection.y
|
||
|
|
},
|
||
|
|
style: {
|
||
|
|
lineWidth: style.Section.line.width + style.Section.line.beyondWidth + 1,
|
||
|
|
stroke: style.backgroundColor
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const arrowTextX = model.intersection.x + 10;
|
||
|
|
const arrowTextY = model.intersection.y + 15;
|
||
|
|
const nameTextX = model.namePosition.x + model.intersection.x + directx * (style.Section.line.width * 3 + style.Switch.text.offset.x) * this.triangle.getCotRate();
|
||
|
|
const nameTextY = model.namePosition.y + model.intersection.y + style.Switch.text.offset.y * (style.Switch.text.position || directy);
|
||
|
|
|
||
|
|
this.name = new ESwName({
|
||
|
|
zlevel: this.zlevel,
|
||
|
|
z: this.z,
|
||
|
|
style: style,
|
||
|
|
arrowTextX: arrowTextX,
|
||
|
|
arrowTextY: arrowTextY,
|
||
|
|
nameTextX: nameTextX,
|
||
|
|
nameTextY: nameTextY,
|
||
|
|
sectionName: model.sectionName,
|
||
|
|
name: model.name,
|
||
|
|
nameShow: style.Switch.text.show,
|
||
|
|
triangle: this.triangle
|
||
|
|
});
|
||
|
|
|
||
|
|
this.add(this.swCore); // 岔芯link
|
||
|
|
this.add(this.locShelter);
|
||
|
|
this.add(this.relocShelter);
|
||
|
|
this.add(this.releaseBackground);
|
||
|
|
this.add(this.name);
|
||
|
|
}
|
||
|
|
|
||
|
|
createLockRect() {
|
||
|
|
const offsetX = this.model.locateType == '01' ? 3 : 0;
|
||
|
|
this.lockRect = new ELockRect({ // 锁定矩形
|
||
|
|
zlevel: this.zlevel,
|
||
|
|
z: this.z + 6,
|
||
|
|
x: this.model.intersection.x - this.style.Switch.monolock.rectWidth / 2 + offsetX,
|
||
|
|
y: this.model.intersection.y - this.style.Switch.monolock.rectWidth / 2,
|
||
|
|
width: this.style.Switch.monolock.rectWidth,
|
||
|
|
lineWidth: 1.8,
|
||
|
|
stroke: this.style.Switch.monolock.rectBorderColor,
|
||
|
|
fill: this.style.transparentColor
|
||
|
|
});
|
||
|
|
this.add(this.lockRect);
|
||
|
|
this.lockRect.hide();
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 名称动画*/
|
||
|
|
nameTextAnimation() {
|
||
|
|
this.name.getNameText().animateStyle(true)
|
||
|
|
.when(0, { textFill: this.style.backgroundColor })
|
||
|
|
.when(1000, { textFill: this.style.Switch.text.lossColor })
|
||
|
|
.when(2000, { textFill: this.style.backgroundColor })
|
||
|
|
.start();
|
||
|
|
|
||
|
|
this.name.getTextRect().animateStyle(true)
|
||
|
|
.when(0, { textFill: this.style.backgroundColor })
|
||
|
|
.when(1000, { textFill: this.style.Switch.text.borderColor })
|
||
|
|
.when(2000, { textFill: this.style.backgroundColor })
|
||
|
|
.start();
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 设置岔芯是否隐藏*/
|
||
|
|
setSwitchCoreInvisible(invisible) {
|
||
|
|
if (invisible) {
|
||
|
|
this.swCore.hide();
|
||
|
|
} else {
|
||
|
|
this.swCore.show();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 设置岔芯颜色*/
|
||
|
|
setSwitchCoreColor(color) {
|
||
|
|
this.swCore && this.swCore.setColor(color);
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 设置道岔文字颜色*/
|
||
|
|
setTextColor(color) {
|
||
|
|
this.name.getNameText().setStyle({textFill: color});
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 设置道岔背景颜色*/
|
||
|
|
setTextStyle(style) {
|
||
|
|
this.name.getNameText().setStyle(style);
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 设置道岔文字边框颜色 (道岔封锁) */
|
||
|
|
setHasTextBorder(width) {
|
||
|
|
this.name.getTextRect().setStyle({lineWidth: width});
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 恢复状态*/
|
||
|
|
recover() {
|
||
|
|
this.lockRect.hide();
|
||
|
|
this.setSwitchCoreColor(this.style.backgroundColor);
|
||
|
|
this.name.getNameText().stopAnimation(false);
|
||
|
|
this.swCore.stopAnimation(false);
|
||
|
|
this.relocShelter.stopAnimation(false);
|
||
|
|
this.relocShelter.hide();
|
||
|
|
this.releaseBackground.hide();
|
||
|
|
this.setHasTextBorder(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 定位*/
|
||
|
|
setLocationAction() {
|
||
|
|
this.recover();
|
||
|
|
this.setSwitchCoreInvisible(true);
|
||
|
|
this.locShelter.show();
|
||
|
|
this.relocShelter.hide();
|
||
|
|
this.setTextColor(this.style.Switch.text.locateColor);
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 反位*/
|
||
|
|
setInversionAction() {
|
||
|
|
this.recover();
|
||
|
|
this.setSwitchCoreInvisible(true);
|
||
|
|
this.setTextColor(this.style.Switch.text.inversionColor);
|
||
|
|
this.locShelter.hide();
|
||
|
|
this.relocShelter.show();
|
||
|
|
this.setSectionState(this.relocShelter.getSection(), 'fill', this.model);
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 失去*/
|
||
|
|
setLossAction(nameFlicker) {
|
||
|
|
this.recover();
|
||
|
|
this.locShelter.hide();
|
||
|
|
this.relocShelter.hide();
|
||
|
|
this.setSwitchCoreInvisible(false);
|
||
|
|
this.setTextColor(this.style.Switch.text.lossColor);
|
||
|
|
nameFlicker && this.nameTextAnimation();
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 挤叉*/
|
||
|
|
setForkAction() {
|
||
|
|
this.setLossAction(true);
|
||
|
|
this.swCore.animateStyle(item => {
|
||
|
|
item.animateStyle(true)
|
||
|
|
.when(0, { stroke: this.style.backgroundColor })
|
||
|
|
.when(1000, { stroke: 'red' })
|
||
|
|
.when(2000, { stroke: this.style.backgroundColor })
|
||
|
|
.start();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 空闲*/
|
||
|
|
spare() {
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 单锁*/
|
||
|
|
setMonolock() {
|
||
|
|
if (this.style.Switch.monolock.rectShow) { // 判断单锁矩形是否显示
|
||
|
|
this.lockRect.show();
|
||
|
|
}
|
||
|
|
switch (this.model.locateType) {
|
||
|
|
case '01': // 定位
|
||
|
|
this.setTextColor(this.style.Switch.monolock.locationColor); // 设置道岔名称颜色
|
||
|
|
break;
|
||
|
|
case '02': // 反位
|
||
|
|
this.setTextColor(this.style.Switch.monolock.inversionColor); // 设置道岔名称颜色
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 封锁 */
|
||
|
|
block() {
|
||
|
|
if (this.style.Switch.block.nameBorderShow) {
|
||
|
|
this.setHasTextBorder(1);
|
||
|
|
} else if (this.style.Switch.block.contentRectShow) {
|
||
|
|
this.lockRect.show();
|
||
|
|
this.lockRect.setStyle({stroke: this.style.Switch.block.contentRectColor});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 延时释放*/
|
||
|
|
timeRelease() {
|
||
|
|
this.setSwitchCoreInvisible(true);
|
||
|
|
this.releaseBackground.show();
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 设置道岔切除*/
|
||
|
|
setSwitchCutOff() {
|
||
|
|
this.setSwitchCoreInvisible(true);
|
||
|
|
switch (this.model.locateType) {
|
||
|
|
case '01':
|
||
|
|
this.releaseBackground.hide();
|
||
|
|
break;
|
||
|
|
case '02':
|
||
|
|
this.relocShelter.getSection().animateStyle(true)
|
||
|
|
.when(1000, { fill: this.style.backgroundColor })
|
||
|
|
.start();
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
sectionCutOff(section) {
|
||
|
|
const lineWidth = this.style.Section.line.width + (this.model.sectionAstatus != '01' ? this.style.Section.line.beyondWidth : 0);
|
||
|
|
if (section) {
|
||
|
|
section.animateStyle(true, [
|
||
|
|
{ time: 0, styles: { lineWidth: lineWidth } },
|
||
|
|
{ time: 1000, styles: { stroke: this.style.backgroundColor } },
|
||
|
|
{ time: 2000, styles: { lineWidth: lineWidth } }
|
||
|
|
]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
setSectionState(section, style, state) {
|
||
|
|
if (section && !section.animators.length) {
|
||
|
|
switch (state.sectionAstatus) {
|
||
|
|
case '00': break;
|
||
|
|
case '01': /** 空闲*/
|
||
|
|
section.setStyle(style, this.style.Section.line.spareColor);
|
||
|
|
break;
|
||
|
|
case '02': /** 通信车占用*/
|
||
|
|
section.setStyle(style, this.style.Section.line.communicationOccupiedColor);
|
||
|
|
break;
|
||
|
|
case '03': /** 非通信车占用*/
|
||
|
|
section.setStyle(style, this.style.Section.line.unCommunicationOccupiedColor);
|
||
|
|
break;
|
||
|
|
case '04': /** 进路锁闭*/
|
||
|
|
section.setStyle(style, this.style.Section.line.routeLockColor);
|
||
|
|
break;
|
||
|
|
case '05': /** 故障锁闭*/
|
||
|
|
section.setStyle(style, this.style.Section.line.faultLockColor);
|
||
|
|
break;
|
||
|
|
case '06': /** 封锁*/
|
||
|
|
section.setStyle(style, this.style.Section.line.blockColor);
|
||
|
|
break;
|
||
|
|
case '07': /** ATC切除*/
|
||
|
|
section.setStyle(style, this.style.Section.line.atcExcisionColor);
|
||
|
|
break;
|
||
|
|
case '08': /** ATS切除*/
|
||
|
|
section.setStyle(style, this.style.Section.line.atsExcisionColor);
|
||
|
|
section.animateStyle(true)
|
||
|
|
.when(1000, { fill: this.style.backgroundColor })
|
||
|
|
.when(2000, { fill: this.style.Section.line.atsExcisionColor })
|
||
|
|
.start();
|
||
|
|
break;
|
||
|
|
case '09': /** 进路延续保护 */
|
||
|
|
section.setStyle(style, this.style.Section.line.protectiveLockColor);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (state.cutOff) {
|
||
|
|
this.sectionCutOff(section);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
setLocateType(model) {
|
||
|
|
switch (model.locateType) {
|
||
|
|
case '01':
|
||
|
|
this.setLocationAction(); /** 定位*/
|
||
|
|
break;
|
||
|
|
case '02':
|
||
|
|
this.setInversionAction(); /** 反位*/
|
||
|
|
break;
|
||
|
|
case '03':
|
||
|
|
this.setLossAction(true); /** 失去*/
|
||
|
|
break;
|
||
|
|
case '04':
|
||
|
|
this.setForkAction(); /** 挤岔*/
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
this.setLocationAction();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
setState(model) {
|
||
|
|
this.setLocateType(model);
|
||
|
|
|
||
|
|
switch (model.status) {
|
||
|
|
case '01':
|
||
|
|
this.spare(); /** 空闲*/
|
||
|
|
break;
|
||
|
|
case '10':
|
||
|
|
this.setMonolock(); /** 单锁*/
|
||
|
|
break;
|
||
|
|
case '13':
|
||
|
|
this.timeRelease(); /** 延时释放*/
|
||
|
|
break;
|
||
|
|
case '14':
|
||
|
|
this.block(); /** 封锁*/
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 区段切除*/
|
||
|
|
if (model.cutOff) {
|
||
|
|
this.setSwitchCutOff();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
getBoundingRect() {
|
||
|
|
return this.name.getBoundingRect();
|
||
|
|
}
|
||
|
|
|
||
|
|
getShapeTipPoint() {
|
||
|
|
const text = this.name.getNameText();
|
||
|
|
if (text) {
|
||
|
|
const rect = text.getBoundingRect();
|
||
|
|
return {
|
||
|
|
x: rect.x + rect.width / 2,
|
||
|
|
y: rect.y
|
||
|
|
};
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
}
|