joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

调整道岔绘画方式，兼容哈尔滨线路道岔绘制方法

Browse Source
This commit is contained in:
joylink_zyy 2020-02-04 14:28:18 +08:00
parent e598f8bfcf
commit 732c80ca6d
4 changed files with 177 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/jmapNew/config/skinCode/haerbin_01.js
View File

@ -341,6 +341,7 @@ class SkinCode extends defaultStyle {
monolockColor: '#870E10' // 道岔单锁颜色
},
core: {
splice: true, // 哈尔滨特殊显示
length: 6 // 道岔单边长度
},
block: { // 道岔封锁配置

50
src/jmapNew/shape/Switch/ERhomboid.js Normal file
View File

@ -0,0 +1,50 @@
import Group from 'zrender/src/container/Group';
import Polygon from 'zrender/src/graphic/shape/Polygon';
class ERhomboid extends Group {
constructor(model) {
super();
this.model = model;
this.create();
}
create() {
const model = this.model;
const style = this.model.style;
this.section = new Polygon({ // 平行四边形
zlevel: model.zlevel,
z: model.z + 1,
shape: {
points: model.sectionPoints
},
style: {
fill: style.Section.line.spareColor
},
cursor: model.cursor,
onmouseover: model.onmouseover,
onmouseout: model.onmouseout
});
this.hide();
this.add(this.section);
}
hide() {
this.section.hide();
}
show() {
this.section.show();
}
stopAnimation(flag) {
this.section.stopAnimation(flag);
}
getSection() {
return this.section;
}
}
export default ERhomboid;

37
src/jmapNew/shape/Switch/ESwLnversion.js
View File

@ -11,7 +11,7 @@ class ESwLnversion extends Group {
create() {
const model = this.model;
const style = this.model.style;
this.relocShelter = new Polygon({
this.relocShelter = new Polygon({ // 遮盖B区段范围
zlevel: model.zlevel,
z: model.z,
shape: {
@ -27,37 +27,38 @@ class ESwLnversion extends Group {
const rpx = Math.abs(model.triangle.getCos(model.halfWidth)) + 0.2;
this.relocShelter.position = [-model.triangle.drictx * rpx, -model.triangle.dricty * 0.2];
this.section = new Polygon({
zlevel: model.zlevel,
z: model.z + 1,
shape: {
points: model.sectionPoints
},
style: {
fill: style.Section.line.spareColor
},
cursor: model.cursor,
onmouseover: model.onmouseover,
onmouseout: model.onmouseout
});
// this.section = new Polygon({ // 平行四边形
// zlevel: model.zlevel,
// z: model.z + 1,
// shape: {
// points: model.sectionPoints
// },
// style: {
// // fill: style.Section.line.spareColor
// fill: 'blue'
// },
// cursor: model.cursor,
// onmouseover: model.onmouseover,
// onmouseout: model.onmouseout
// });
this.hide();
this.add(this.relocShelter);
this.add(this.section);
// this.add(this.section);
}
hide() {
this.relocShelter.hide();
this.section.hide();
// this.section.hide();
}
show() {
this.relocShelter.show();
this.section.show();
// this.section.show();
}
stopAnimation(flag) {
this.section.stopAnimation(flag);
// this.section.stopAnimation(flag);
}
getSection() {

181
src/jmapNew/shape/Switch/index.js
View File

@ -11,6 +11,7 @@ import ESwLnversion from './ESwLnversion';
import ELockRect from './ELockRect';
import EMouse from './EMouse';
import EHighlight from '../element/EHighlight';
import ERhomboid from './ERhomboid';
export default class Switch extends Group {
constructor(model, style) {
@ -51,7 +52,7 @@ export default class Switch extends Group {
const direct = -this.triangle.drictx * this.triangle.dricty;
const coverLength = switchWidth * 1.5;
this.swCore = new ESwCore({
this.swCore = new ESwCore({ // 道岔两个斜线 盖住所有
zlevel: this.zlevel,
z: this.z,
style: style,
@ -90,11 +91,13 @@ export default class Switch extends Group {
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 spoint2 = [spoint1[0] - directx * (width2 + width1) - directx * width3, spoint1[1]];
// const spoint3 = [model.intersection.x - directx * width3, model.intersection.y + directy * switchWidth1];
const spoint2 = [model.intersection.x - directx * 13, spoint1[1]];
const spoint3 = [model.intersection.x - directx * 13, model.intersection.y + directy * switchWidth1];
const spoint4 = [spoint1[0] + directx * (width2 + width1) - directx * width3, spoint3[1]];
this.relocShelter = new ESwLnversion({ // 反位
this.relocShelter = new ESwLnversion({ // 反位覆盖形状
zlevel: this.zlevel,
z: this.z,
style: style,
@ -107,6 +110,19 @@ export default class Switch extends Group {
onmouseout: () => { this.name.getArrowText().hide(); }
});
this.rhomboid = new ERhomboid({ // 平行四边形覆盖范围
zlevel: this.zlevel,
z: this.z,
style: style,
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,
@ -127,7 +143,7 @@ export default class Switch extends Group {
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({
this.name = new ESwName({ // 道岔名称
zlevel: this.zlevel,
z: this.z,
style: style,
@ -144,6 +160,7 @@ export default class Switch extends Group {
this.add(this.swCore); // 岔芯link
this.add(this.locShelter);
this.add(this.relocShelter);
this.add(this.rhomboid);
this.add(this.releaseBackground);
this.add(this.name);
}
@ -195,7 +212,7 @@ export default class Switch extends Group {
/** 设置道岔文字颜色*/
setTextColor(color) {
this.name.getNameText().setStyle({textFill: color});
this.name.getNameText().setStyle({ textFill: color });
}
/** 设置道岔背景颜色*/
@ -205,17 +222,18 @@ export default class Switch extends Group {
/** 设置道岔文字边框颜色 (道岔封锁) */
setHasTextBorder(width) {
this.name.getTextRect().setStyle({lineWidth: width});
this.name.getTextRect().setStyle({ lineWidth: width });
}
/** 恢复状态*/
recover() {
this.lockRect.hide();
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.relocShelter.hide();
// this.rhomboid.hide();
this.rhomboid.stopAnimation(false);
this.releaseBackground.hide();
this.setHasTextBorder(0);
}
@ -224,8 +242,13 @@ export default class Switch extends Group {
setLocationAction() {
this.recover();
this.setSwitchCoreInvisible(true);
this.locShelter.show();
if (this.style.Switch.core.splice) {
this.locShelter.hide();
} else {
this.locShelter.show();
}
this.relocShelter.hide();
this.rhomboid.hide();
this.setTextColor(this.style.Switch.text.locateColor);
}
@ -234,9 +257,15 @@ export default class Switch extends Group {
this.recover();
this.setSwitchCoreInvisible(true);
this.setTextColor(this.style.Switch.text.inversionColor);
this.locShelter.hide();
this.relocShelter.show();
if (this.style.Switch.core.splice) {
this.relocShelter.hide();
} else {
this.relocShelter.show(); // 反位
}
this.locShelter.hide(); // 定位
this.rhomboid.show();
this.setSectionState(this.relocShelter.getSection(), 'fill', this.model);
this.setSectionState(this.rhomboid.getSection(), 'fill', this.model);
}
/** 失去*/
@ -244,6 +273,7 @@ export default class Switch extends Group {
this.recover();
this.locShelter.hide();
this.relocShelter.hide();
this.rhomboid.hide();
this.setSwitchCoreInvisible(false);
this.setTextColor(this.style.Switch.text.lossColor);
nameFlicker && this.nameTextAnimation();
@ -271,12 +301,12 @@ export default class Switch extends Group {
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;
case '01': // 定位
this.setTextColor(this.style.Switch.monolock.locationColor); // 设置道岔名称颜色
break;
case '02': // 反位
this.setTextColor(this.style.Switch.monolock.inversionColor); // 设置道岔名称颜色
break;
}
}
@ -286,7 +316,7 @@ export default class Switch extends Group {
this.setHasTextBorder(1);
} else if (this.style.Switch.block.contentRectShow) {
this.lockRect.show();
this.lockRect.setStyle({stroke: this.style.Switch.block.contentRectColor});
this.lockRect.setStyle({ stroke: this.style.Switch.block.contentRectColor });
}
}
@ -300,14 +330,17 @@ export default class Switch extends Group {
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;
case '01':
this.releaseBackground.hide();
break;
case '02':
this.relocShelter.getSection().animateStyle(true)
.when(1000, { fill: this.style.backgroundColor })
.start();
this.rhomboid.getSection().animateStyle(true)
.when(1000, { fill: this.style.backgroundColor })
.start();
break;
}
}
@ -325,38 +358,38 @@ export default class Switch extends Group {
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;
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) {
@ -368,20 +401,20 @@ export default class Switch extends Group {
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();
case '01':
this.setLocationAction(); /** 定位*/
break;
case '02':
this.setInversionAction(); /** 反位*/
break;
case '03':
this.setLossAction(true); /** 失去*/
break;
case '04':
this.setForkAction(); /** 挤岔*/
break;
default:
this.setLocationAction();
}
}