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

Merge branch 'master' of https://git.qcloud.com/joylink/jl-nclient

Browse Source 
# Conflicts:
#	src/jmap/theme/batong.js
This commit is contained in:
zyy 2019-07-22 17:20:31 +08:00
commit 23117a8f1f
17 changed files with 700 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/jmap/config/defaultSkin.js
View File

@ -39,74 +39,6 @@ export default class DefaultSkin {
/** 目的码字体颜色*/
this.destinationTextFontColor = 'yellow';
/** line 颜色*/
this.lineWidthColor = '#FFFFFF';
/** link 宽度*/
this.linkWidth = 4.4;
/** link 线条颜色*/
this.linkColor = '#3F3F3F';
/** link 字体颜色*/
this.linkTextColor = '#FFFFFF';
/** StopPoint 颜色*/
this.stopPointColor = '#FE0000';
/** StopPoint 字体颜色*/
this.stopPointTextColor = '#FFFFFF';
this.zcControlGrayColor = '#00FF00';
this.limitControlColor = '#ECE9D8';
this.lcControlColor = '#FFFF00';
this.zcControlmodeR = 4;
/** 道岔单边长度 */
this.switchLen = 6;
/** 道岔边框颜色*/
this.switchTextBorderColor = '#FE0000';
/** 道岔失去颜色*/
this.switchTextLossColor = '#FFFFFF';
/** 道岔定位颜色*/
this.switchLocateTextColor = '#00FF00';
/** 道岔反位颜色*/
this.switchInversionColor = '#9C9D09';
/** 道岔单锁颜色*/
this.switchMonolockColor = '#870E10';
/** 公里表距离车站距离*/
this.stationKmRangeDistance = 22;
/** 计数器字体颜色*/
this.stationCounterTextColor = '#FFFFFF';
/** 计数器边框颜色*/
this.stationCounterBorderColor = '#E4EF50';
/** 延迟解锁倒计时和设备文字之间的距离*/
this.stationDelayUnlockDistance = 3;
/** 延时解锁字体颜色*/
this.stationDelayUnlockTextColor = '#FFFFFF';
/** 延迟解锁边框颜色*/
this.stationDelayUnlockBorderColor = '#FFFFFF';
// 停车点折返点目的码名字颜色
this.stopPointTexDestCodetColor = '#FFF07B';
/** 停车点目的码文字大小*/
this.textPointFontSize = 10;
/** 列车长度*/
this.trainWidth = 40;

8
src/jmap/config/deviceStyle.js
View File

@ -1,14 +1,12 @@
import beijingSkin from '../theme/bejing';
import fuzhouSkin from '../theme/fuzhou';
import batongSkin from '../theme/batong';
import chengduSkin from '../theme/chengdu';
/** 皮肤配置*/
const deviceSkin = {
'02': fuzhouSkin,
'03': beijingSkin,
'04': batongSkin, // 八通
'05': chengduSkin // 成都
// '03': fuzhouSkin
// '03': beijingSkin
'03': chengduSkin
};
export function selectSkinStyle(code) {

2
src/jmap/map.js
View File

@ -9,7 +9,7 @@ import deviceType from './constant/deviceType';
import { parser, deviceFactory } from './utils/parser';
const renderer = 'canvas';
const devicePixelRatio = 2;
const devicePixelRatio = 1;
class Jmap {
constructor(opts) {

20
src/jmap/shape/Link/index.js
View File

@ -17,6 +17,11 @@ class Link extends Group {
const model = this.model;
const style = this.style;
// let textPosition = 'insideBottom';
// if (model.lp.x !== model.rp.x && model.lp.y !== model.rp.y) {
// textPosition = model.lp.y > model.rp.y ? 'insideLeft' : 'insideRight';
// }
this.link = new Line({
zlevel: this.zlevel,
shape: {
@ -26,18 +31,17 @@ class Link extends Group {
y2: model.rp.y
},
style: {
lineWidth: style.linkWidth,
stroke: style.linkColor,
text: model.code,
textDistance: style.linkWidth * 2,
lineWidth: style.Link.linkWidth,
stroke: style.Link.linkColor,
text: model.name,
textDistance: style.Link.linkWidth * 2,
textPosition: 'inside',
textAlign: 'middle',
fontSize: style.textFontSize,
textFill: style.linkTextColor,
textStroke: style.backgroundColor
fontSize: style.Link.textFontSize,
textFill: style.Link.linkTextColor,
textStroke: style.Link.backgroundColor
}
});
this.add(this.link);
}

2
src/jmap/shape/Signal/ESigName.js
View File

@ -14,7 +14,7 @@ class ESigName extends Group {
_subType: model._subType,
zlevel: model.zlevel,
z: model.z,
silent: model.silent || false,
silent: model.silent,
style: {
x: model.x,
y: model.y,

20
src/jmap/shape/Signal/index.js
View File

@ -9,7 +9,6 @@ import ESigRoute from './ESigRoute';
import ESigButton from './ESigButton';
import ESigDelay from './ESigDelay';
import ESigName from './ESigName';
// import Text from 'zrender/src/graphic/Text';
import Group from 'zrender/src/container/Group';
class Signal extends Group {
@ -25,6 +24,7 @@ class Signal extends Group {
this.zlevel = zlevel;
this.z = 1;
this.create();
this.transformRotation(this);
this.setState(state);
}
@ -70,12 +70,13 @@ class Signal extends Group {
this.sigName = new ESigName({
zlevel: this.zlevel,
z: this.z,
silent: false,
style: style,
x: sigNameX,
y: sigNameY,
text: model.name,
textFont: `bold ${style.Signal.signalTextFontSize} px ${style.textFontFormat}`,
textFill: style.Signal.sigTextGreen,
textFill: style.Signal.signalTextGreen,
textAlign: 'middle',
textVerticalAlign: posit == 1 ? 'top' : 'bottom'
});
@ -148,6 +149,21 @@ class Signal extends Group {
// this.add(this.sigButton);
}
// 整体旋转信号灯
transformRotation(device) {
if (this.model.rotate) {
device.eachChild(item => {
if (item instanceof Group) {
this.transformRotation(item);
} else {
item.origin = [this.model.position.x, this.model.position.y];
item.rotation = -Math.PI / 180 * Number(this.model.rotate);
item.dirty();
}
});
}
}
// 关闭
close() {
if (this.count === 1) {

2
src/jmap/shape/StationStand/ESafeEmergent.js
View File

@ -18,7 +18,7 @@ class ESafeEmergent extends Group {
shape: {
x: model.x,
y: model.y,
r: style.StationStand.standDistance / 2,
r: model.r,
n: model.n
},
style: {

12
src/jmap/shape/StationStand/index.js
View File

@ -84,8 +84,10 @@ class StationStand extends Group {
fill: style.StationStand.standNoHumanReentryColor
});
const distance = style.StationStand.standSafeHeight*2 - style.StationStand.standHeadFontSize/2 - 2;
/** 站台扣车*/
const detainD = style.StationStand.standDetainDirection ? model.height + style.StationStand.standHeadFontSize / 2 - 2: -style.StationStand.standSafeHeight;
const detainD = style.StationStand.standDetainDirection ? model.height - distance: -style.StationStand.standSafeHeight;
const detainH = drict > 0 ? style.StationStand.standEmergentR : style.StationStand.standEmergentR + style.StationStand.standDistance + detainD;
const detainX = model.position.x - (style.StationStand.standDetainDirection || drict) * (style.StationStand.standDetainOffset.x - model.width / 2);
const detainY = model.position.y + (style.StationStand.standDetainDirection || drict) * (style.StationStand.standDetainOffset.y) + drict * detainH;
@ -100,7 +102,7 @@ class StationStand extends Group {
});
/** 停站时间*/
const timeD = style.StationStand.standTimeDirection ? model.height + style.StationStand.standTextFontSize / 2 - 2: -style.StationStand.standSafeHeight;
const timeD = style.StationStand.standTimeDirection ? model.height - distance: -style.StationStand.standSafeHeight;
const timeH = drict > 0 ? style.StationStand.standEmergentR : style.StationStand.standEmergentR + style.StationStand.standDistance + timeD;
const timeX = model.position.x - (style.StationStand.standTimeDirection || drict) * (style.StationStand.standTimeOffset.x - model.width / 2);
const timeY = model.position.y + (style.StationStand.standTimeDirection || drict) * (style.StationStand.standTimeOffset.y) + drict * timeH;
@ -110,11 +112,11 @@ class StationStand extends Group {
style: style,
x: timeX,
y: timeY,
name: model.parkingTime
name: model.parkingTime || '30'
});
/** 运行等级*/
const levelD = style.StationStand.standLevelDirection ? model.height + style.StationStand.standTextFontSize / 2 - 2: -style.StationStand.standSafeHeight;
const levelD = style.StationStand.standLevelDirection ? model.height - distance: -style.StationStand.standSafeHeight;
const levelH = drict > 0 ? style.StationStand.standEmergentR : style.StationStand.standEmergentR + style.StationStand.standDistance + levelD;
const levelX = model.position.x - (style.StationStand.standLevelDirection || drict) * (style.StationStand.standLevelOffset.x - model.width / 2);
const levelY = model.position.y + (style.StationStand.standLevelDirection || drict) * (style.StationStand.standLevelOffset.y) + drict * levelH;
@ -124,7 +126,7 @@ class StationStand extends Group {
style: style,
x: levelX,
y: levelY,
name: model.intervalRunTime
name: model.intervalRunTime || '5'
});
this.add(this.safeDoor);

33
src/jmap/shape/Switch/ESwCore.js
View File

@ -11,23 +11,6 @@ class ESwCore extends Group {
_create() {
const model = this.model;
const style = this.model.style;
this.line = new Line({
zlevel: model.zlevel,
z: model.z,
silent: true,
shape: {
x1: model.intersectionX - (model.coverLength * model.triangle.drictx),
y1: model.intersectionY,
x2: model.intersectionX + model.triangle.drictx * model.triangle.getCotRate() * model.coverLength,
y2: model.intersectionY
},
style: {
lineWidth: model.lineWidth,
stroke: style.backgroundColor
}
});
this.skewLine = new Line({
zlevel: model.zlevel,
z: model.z,
@ -44,6 +27,22 @@ class ESwCore extends Group {
}
});
this.line = new Line({
zlevel: model.zlevel,
z: model.z,
silent: true,
shape: {
x1: model.intersectionX - model.triangle.getCotRate() * model.coverLength,
y1: model.intersectionY,
x2: model.intersectionX + model.triangle.getCotRate() * model.coverLength,
y2: model.intersectionY
},
style: {
lineWidth: model.lineWidth,
stroke: style.backgroundColor
}
});
this.add(this.line);
this.add(this.skewLine);
}

69
src/jmap/shape/Switch/ESwLnversion.js Normal file
View File

@ -0,0 +1,69 @@
import Group from 'zrender/src/container/Group';
import Polygon from 'zrender/src/graphic/shape/Polygon';
class ESwLnversion extends Group {
constructor(model) {
super();
this.model = model;
this._create();
}
_create() {
const model = this.model;
const style = this.model.style;
this.relocShelter = new Polygon({
zlevel: model.zlevel,
z: model.z,
shape: {
points: model.shelterPoints
},
style: {
fill: style.backgroundColor
},
cursor: model.cursor,
onmouseover: model.onmouseover,
onmouseout: model.onmouseout
});
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,
shape: {
points: model.sectionPoints
},
style: {
fill: style.Section.sectionSpareColor
},
cursor: model.cursor,
onmouseover: model.onmouseover,
onmouseout: model.onmouseout
});
this.hide();
this.add(this.relocShelter);
this.add(this.section);
}
hide() {
this.relocShelter.hide();
this.section.hide();
}
show() {
this.relocShelter.show();
this.section.show();
}
stopAnimation(flag) {
this.section.stopAnimation(flag);
}
getSection() {
return this.section;
}
}
export default ESwLnversion;

44
src/jmap/shape/Switch/ESwLocal.js Normal file
View File

@ -0,0 +1,44 @@
import Group from 'zrender/src/container/Group';
import Polygon from 'zrender/src/graphic/shape/Polygon';
class ESwLocal extends Group {
constructor(model) {
super();
this.model = model;
this._create();
}
_create() {
const model = this.model;
const style = this.model.style;
this.locShelter = new Polygon({
zlevel: model.zlevel,
z: model.z,
shape: {
points: model.shelterPoints
},
style: {
fill: style.backgroundColor
},
cursor: model.cursor,
onmouseover: model.onmouseover,
onmouseout: model.onmouseout
});
const lpx = Math.abs(model.triangle.getCos(1));
this.locShelter.position = [model.triangle.drictx * lpx, -model.triangle.dricty * 0.2];
this.locShelter.show();
this.add(this.locShelter);
}
hide() {
this.locShelter.hide();
}
show() {
this.locShelter.show();
}
}
export default ESwLocal;

398
src/jmap/shape/Switch/index copy.js Normal file
View File

@ -0,0 +1,398 @@
/*
* 道岔
*/
import Line from 'zrender/src/graphic/shape/Line';
import Group from 'zrender/src/container/Group';
import Polygon from 'zrender/src/graphic/shape/Polygon';
import JTriangle from '../../utils/JTriangle';
import ESwName from './ESwName.js';
import ESwCore from './ESwCore.js';
export default class Switch extends Group {
constructor({ _code, _type, zlevel, model, state }, style, jmap) {
super();
this._code = _code;
this._type = _type;
this.model = model;
this.state = state;
this.style = style;
this.jmap = jmap;
this.selected = false;
this.zlevel = zlevel;
this.z = 8;
this._create();
this.setState(state);
}
_create() {
const model = this.model;
const style = this.style;
this.triangle = new JTriangle(model.intersection, model.skew);
let halfWidth = style.Section.sectionWidth / 2;
const switchWidth = style.Section.sectionWidth + style.Section.sectionBeyondWidth*2 + 0.8;
const swPadding = style.Switch.switchLen;
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 Polygon({
zlevel: this.zlevel,
z: this.z,
shape: {
points: [
point1, point2, point3, point4
]
},
style: {
fill: style.backgroundColor
},
cursor: 'pointer',
onmouseover: () => { this.name.getArrowText().show(); },
onmouseout: () => { this.name.getArrowText().hide(); }
});
const lpx = Math.abs(this.triangle.getCos(1));
this.locShelter.position = [directx * lpx, -directy * 0.2];
this.locShelter.show();
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)];
this.relocShelter = new Polygon({
zlevel: this.zlevel,
z: this.z,
shape: {
points: [
rpoint1, rpoint2, rpoint3, rpoint4
]
},
style: {
fill: style.backgroundColor
},
cursor: 'pointer',
onmouseover: () => { this.name.getArrowText().show(); },
onmouseout: () => { this.name.getArrowText().hide(); }
});
const rpx = Math.abs(this.triangle.getCos(halfWidth)) + 0.2;
this.relocShelter.position = [-directx * rpx, -directy * 0.2];
this.relocShelter.hide();
const sinX = style.Section.sectionWidth / this.triangle.getSinRate();
const switchWidth1 = style.Section.sectionWidth / 2;
const width1 = switchWidth1 * this.triangle.getSinRate();
const height1 = switchWidth1 * this.triangle.getCosRate();
const width2 = (height1 + switchWidth1) / this.triangle.getTanRate();
const width3 = sinX - width2 - width1;
const switchPoint1 = [model.intersection.x + directx * width3, model.intersection.y - directy * switchWidth1];
const switchPoint2 = [switchPoint1[0] - directx * (width2 + width1) - directx * width3, switchPoint1[1]];
const switchPoint3 = [model.intersection.x - directx * width3, model.intersection.y + directy * switchWidth1];
const switchPoint4 = [switchPoint1[0] + directx * (width2 + width1) - directx * width3, switchPoint3[1]];
this.reserveSection = new Polygon({
zlevel: this.zlevel,
shape: {
points: [
switchPoint1, switchPoint2, switchPoint3, switchPoint4
]
},
style: {
fill: style.Section.sectionSpareColor
},
cursor: 'pointer',
onmouseover: () => { this.name.getArrowText().show(); },
onmouseout: () => { this.name.getArrowText().hide(); }
});
this.reserveSection.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.sectionWidth + style.Section.sectionBeyondWidth + 1,
stroke: style.backgroundColor
}
});
const arrowTextX = model.intersection.x + 10;
const arrowTextY = model.intersection.y + 15;
const nameTextX = model.namePosition.x + model.intersection.x + this.triangle.drictx * (style.Section.sectionWidth * 3 + style.Switch.switchNameDistance) * this.triangle.getCotRate();
const nameTextY = model.namePosition.y + model.intersection.y + this.triangle.dricty * (style.Switch.switchNameDistance);
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: model.nameShow,
triangle: this.triangle
});
this.add(this.swCore);
this.add(this.locShelter);
this.add(this.relocShelter);
this.add(this.reserveSection);
this.add(this.releaseBackground);
this.add(this.name);
}
/** 名称动画*/
nameTextAnimation() {
this.name.getNameText().animateStyle(true)
.when(0, { textFill: this.style.backgroundColor })
.when(1000, { textFill: this.style.Switch.switchTextLossColor })
.when(2000, { textFill: this.style.backgroundColor })
.start();
this.name.getTextRect().animateStyle(true)
.when(0, { textFill: this.style.backgroundColor })
.when(1000, { textFill: this.style.Switch.switchTextBorderColor })
.when(2000, { textFill: this.style.backgroundColor })
.start();
}
/** 设置岔芯是否隐藏*/
setSwitchCoreInvisible(invisible) {
if (invisible) {
this.swCore.hide();
} else {
this.swCore.show();
}
}
/** 设置岔芯颜色*/
setSwitchCoreColor(color) {
this.swCore.setColor(color);
}
/** 设置道岔文字颜色*/
setTextColor(color) {
this.name.getNameText().setStyle('textFill', color);
}
/** 设置道岔文字边框颜色 */
setHasTextBorder(width) {
this.name.getTextRect().setStyle('lineWidth', width);
}
/** 恢复状态*/
recover() {
this.setSwitchCoreColor(this.style.backgroundColor);
this.name.getNameText().stopAnimation(false);
this.reserveSection.stopAnimation(false);
this.swCore.stopAnimation(false);
this.relocShelter.hide();
this.releaseBackground.hide();
this.setHasTextBorder(0);
switch (this.state.locateType) {
case '01':
this.setTextColor(this.style.Switch.switchLocateTextColor);
break;
case '02':
this.setTextColor(this.style.Switch.switchInversionColor);
break;
default:
this.setTextColor(this.style.Switch.switchTextLossColor);
break;
}
}
/** 定位*/
setLocationAction() {
this.recover();
this.setSwitchCoreInvisible(true);
this.locShelter.show();
this.relocShelter.hide();
this.reserveSection.hide();
}
/** 反位*/
setInversionAction() {
this.recover();
this.setSwitchCoreInvisible(true);
this.locShelter.hide();
this.relocShelter.show();
this.reserveSection.show();
}
/** 失去*/
setLossAction(nameFlicker) {
this.recover();
this.locShelter.hide();
this.relocShelter.hide();
this.reserveSection.hide();
this.setSwitchCoreInvisible(false);
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() {
this.setTextColor(this.style.Switch.switchMonolockColor);
}
/** 封锁 */
block() {
this.setHasTextBorder(1);
}
/** 延时释放*/
timeRelease() {
this.setSwitchCoreInvisible(true);
this.releaseBackground.show();
}
/** 设置道岔切除*/
setSwitchCutOff() {
this.setSwitchCoreInvisible(true);
switch (this.model.locateType) {
case '01':
this.releaseBackground.hide();
this.setSectionState(this.release, 'stroke', this.model.sectionAstatus);
break;
case '02':
this.reserveSection.animateStyle(true)
.when(1000, { fill: this.style.backgroundColor })
.start();
break;
}
}
setSectionState(section, style, state) {
if (section) {
switch (state) {
case '00': break;
case '01': /** 空闲*/
section.setStyle(style, this.style.Section.sectionSpareColor);
break;
case '02': /** 通信车占用*/
section.setStyle(style, this.style.Section.sectionCommunicationOccupiedColor);
break;
case '03': /** 非通信车占用*/
section.setStyle(style, this.style.Section.sectionUnCommunicationOccupiedColor);
break;
case '04': /** 进路锁闭*/
section.setStyle(style, this.style.Section.sectionRouteLockColor);
break;
case '05': /** 故障锁闭*/
section.setStyle(style, this.style.Section.sectionFaultLockColor);
break;
case '06': /** 封锁*/
section.setStyle(style, this.style.Section.sectionBlockColor);
break;
case '07': /** ATC切除*/
section.setStyle(style, this.style.Section.sectionAtcExcisionColor);
break;
case '08': /** ATS切除*/
section.setStyle(style, this.style.Section.sectionAtsExcisionColor);
section.animateStyle(true)
.when(1000, { fill: this.style.backgroundColor })
.when(2000, { fill: this.style.Section.sectionAtsExcisionColor })
.start();
break;
case '09': /** 进路延续保护 */
section.setStyle(style, this.style.Section.sectionProtectiveLockColor);
break;
}
}
}
setLocateType(state) {
this.setSectionState(this.reserveSection, 'fill', this.model.sectionCstatus);
switch (state.locateType) {
case '01':
this.setLocationAction(); /** 定位*/
break;
case '02':
this.setInversionAction(); /** 反位*/
break;
case '03':
this.setLossAction(true); /** 失去*/
break;
case '04':
this.setForkAction(); /** 挤岔*/
break;
}
}
setState(state) {
this.setLocateType(state);
switch (state.status) {
case '01':
this.spare(); /** 空闲*/
break;
case '10':
this.setMonolock(); /** 单锁*/
break;
case '13':
this.timeRelease(); /** 延时释放*/
break;
case '14':
this.block(); /** 封锁*/
break;
}
/** 区段切除*/
if (state.cutOff) {
this.setSwitchCutOff();
}
}
getShapeTipPoint() {
let rect = null;
rect = this.name.getNameText().getBoundingRect();
if (rect) {
return {
x: rect.x + rect.width / 2,
y: rect.y
};
}
return null;
}
}

78
src/jmap/shape/Switch/index.js
View File

@ -3,10 +3,11 @@
*/
import Line from 'zrender/src/graphic/shape/Line';
import Group from 'zrender/src/container/Group';
import Polygon from 'zrender/src/graphic/shape/Polygon';
import JTriangle from '../../utils/JTriangle';
import ESwName from './ESwName.js';
import ESwCore from './ESwCore.js';
import ESwLocal from './ESwLocal.js';
import ESwLnversion from './ESwLnversion';
export default class Switch extends Group {
constructor({ _code, _type, zlevel, model, state }, style, jmap) {
@ -55,75 +56,45 @@ export default class Switch extends Group {
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 Polygon({ // 定位道岔
this.locShelter = new ESwLocal({
zlevel: this.zlevel,
z: this.z,
shape: {
points: [
point1, point2, point3, point4
]
},
style: {
fill: style.backgroundColor
},
style: style,
shelterPoints: [point1, point2, point3, point4],
cursor: 'pointer',
triangle: this.triangle,
onmouseover: () => { this.name.getArrowText().show(); },
onmouseout: () => { this.name.getArrowText().hide(); }
});
const lpx = Math.abs(this.triangle.getCos(1));
this.locShelter.position = [directx * lpx, -directy * 0.2];
this.locShelter.show();
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)];
this.relocShelter = new Polygon({ // 反位道岔
zlevel: this.zlevel,
z: this.z,
shape: {
points: [
rpoint1, rpoint2, rpoint3, rpoint4
]
},
style: {
fill: style.backgroundColor
},
cursor: 'pointer',
onmouseover: () => { this.name.getArrowText().show(); },
onmouseout: () => { this.name.getArrowText().hide(); }
});
const rpx = Math.abs(this.triangle.getCos(halfWidth)) + 0.2;
this.relocShelter.position = [-directx * rpx, -directy * 0.2];
this.relocShelter.hide();
const sinX = style.Section.sectionWidth / this.triangle.getSinRate();
const switchWidth1 = style.Section.sectionWidth / 2;
const width1 = switchWidth1 * this.triangle.getSinRate();
const height1 = switchWidth1 * this.triangle.getCosRate();
const width2 = (height1 + switchWidth1) / this.triangle.getTanRate();
const width3 = sinX - width2 - width1;
const switchPoint1 = [model.intersection.x + directx * width3, model.intersection.y - directy * switchWidth1];
const switchPoint2 = [switchPoint1[0] - directx * (width2 + width1) - directx * width3, switchPoint1[1]];
const switchPoint3 = [model.intersection.x - directx * width3, model.intersection.y + directy * switchWidth1];
const switchPoint4 = [switchPoint1[0] + directx * (width2 + width1) - directx * width3, switchPoint3[1]];
this.reserveSection = new Polygon({ // 道岔中心
const width3 = (style.Section.sectionWidth / 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,
shape: {
points: [
switchPoint1, switchPoint2, switchPoint3, switchPoint4
]
},
style: {
fill: style.Section.sectionSpareColor
},
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.reserveSection.hide();
this.releaseBackground = new Line({ // 区段上遮盖段
zlevel: this.zlevel,
@ -161,7 +132,6 @@ export default class Switch extends Group {
this.add(this.swCore); // 岔芯link
this.add(this.locShelter);
this.add(this.relocShelter);
this.add(this.reserveSection);
this.add(this.releaseBackground);
this.add(this.name);
}
@ -209,9 +179,8 @@ export default class Switch extends Group {
recover() {
this.setSwitchCoreColor(this.style.backgroundColor);
this.name.getNameText().stopAnimation(false);
this.reserveSection.stopAnimation(false);
this.swCore.stopAnimation(false);
this.relocShelter.stopAnimation(false);
this.relocShelter.hide();
this.releaseBackground.hide();
@ -235,7 +204,6 @@ export default class Switch extends Group {
this.setSwitchCoreInvisible(true);
this.locShelter.show();
this.relocShelter.hide();
this.reserveSection.hide();
}
/** 反位*/
@ -244,7 +212,6 @@ export default class Switch extends Group {
this.setSwitchCoreInvisible(true);
this.locShelter.hide();
this.relocShelter.show();
this.reserveSection.show();
}
/** 失去*/
@ -252,7 +219,6 @@ export default class Switch extends Group {
this.recover();
this.locShelter.hide();
this.relocShelter.hide();
this.reserveSection.hide();
this.setSwitchCoreInvisible(false);
nameFlicker && this.nameTextAnimation();
}
@ -295,10 +261,10 @@ export default class Switch extends Group {
switch (this.model.locateType) {
case '01':
this.releaseBackground.hide();
this.setSectionState(this.release, 'stroke', this.model.sectionAstatus);
this.setSectionState(this.relocShelter.getSection(), 'stroke', this.model.sectionAstatus);
break;
case '02':
this.reserveSection.animateStyle(true)
this.relocShelter.getSection().animateStyle(true)
.when(1000, { fill: this.style.backgroundColor })
.start();
break;
@ -345,7 +311,7 @@ export default class Switch extends Group {
}
setLocateType(state) {
this.setSectionState(this.reserveSection, 'fill', this.model.sectionCstatus);
this.setSectionState(this.relocShelter.getSection(), 'fill', this.model.sectionCstatus);
switch (state.locateType) {
case '01':
this.setLocationAction(); /** 定位*/

20
src/jmap/theme/bejing.js
View File

@ -4,8 +4,18 @@ import deviceType from '../constant/deviceType';
class Beijing extends defaultSkin {
constructor() {
super();
this.Link = {
textFontColor: ''
this[deviceType.Link] = {
/** line 颜色*/
lineWidthColor: '#FFFFFF',
/** link 宽度*/
linkWidth: 4.4,
/** link 线条颜色*/
linkColor: '#3F3F3F',
/** link 字体颜色*/
linkTextColor: '#FFFFFF'
};
this[deviceType.Section] = {
sectionTextPosition: 1, // 区段名称位置 1 上行 -1 下面 0 默认
@ -70,9 +80,9 @@ class Beijing extends defaultSkin {
};
this[deviceType.Signal] = {
/** 信号机宽度 */
signalR: 6,
signalR: 7,
/** 自动信号宽度*/
signalSigPassWidth: 6,
signalSigPassWidth: 5,
/** 延迟解锁字体大小*/
signalDelayTextFontSize: 10,
/** 信号机名称字体大小*/
@ -80,7 +90,7 @@ class Beijing extends defaultSkin {
/** 灯柱宽度*/
signalLampStandardWidth: 1.2,
/** 设备距离区段的距离*/
signalDistance: 3,
signalDistance: 0,
/** 信号灯按钮距离区段的距离*/
signalButtonDistance: 5,
/** 自动进路方向*/

127
src/jmap/theme/chengdu.js
View File

@ -1,57 +1,70 @@
import defaultSkin from '../config/defaultSkin';
import deviceType from '../constant/deviceType';
class Fuzhou extends defaultSkin {
class Beijing extends defaultSkin {
constructor() {
super();
this.Link = {
textFontColor: ''
this[deviceType.Link] = {
/** line 颜色*/
lineWidthColor: '#FFFFFF',
/** link 宽度*/
linkWidth: 4.4,
/** link 线条颜色*/
linkColor: '#3F3F3F',
/** link 字体颜色*/
linkTextColor: '#FFFFFF'
};
this[deviceType.Section] = {
sectionTextPosition: 1, // 区段名称位置 1 上行 -1 下面 0 默认
/** 区段 宽度*/
sectionWidth: 5,
/** 区段宽超出宽度*/
sectionBeyondWidth: 1,
sectionBeyondWidth: 0,
/** 计轴 半径*/
sectionAxleR: 3,
/** 计轴和区段之间的距离*/ /** 需要添加*/
/** 计轴和区段之间的距离*/
sectionAxleDistance: 5,
/** 限速线的宽短*/
/** 限速线的宽度*/
sectionSpeedLimitLinewidth: 1,
/** 限速线距离区段距离*/
sectionSpeedLimitDistance: 5,
sectionSeparatorWidth: 1.2, // 分隔符宽度
sectionEndSeparatorWidth: 3.5, // 尽头分隔符宽度
sectionEndSeparatorStroke: '#3F3F3F', // 尽头分隔符颜色
/** 分隔符宽度*/
sectionSeparatorWidth: 1.2,
sectionEndSeparatorWidth: 1.2, // 尽头分隔符宽度
sectionEndSeparatorStroke: '#C0C0C0', // 尽头分隔符颜色
/** 区段侵入颜色*/
sectionInvadeColor: '#EF0C08',
sectionInvadeColor: '#C00808',
/** 限速线颜色*/
sectionSpeedLimitColor: '#FFFF00',
sectionLogicalBackgroundColor: '#FFFF00', // 逻辑区段颜色
sectionSpeedLimitColor: '#C0C000',
/** 逻辑区段颜色*/
sectionLogicalBackgroundColor: '#C0C000',
/** 区段计轴颜色*/
sectionAxleColor: '#FFFFFF',
sectionAxleColor: '#C0C0C0',
/** 区段边界符颜色*/
sectionSeparatorColor: '#3149C3',
sectionSeparatorColor: '#C0C0C0',
/** 区段空闲颜色*/
sectionSpareColor: '#3F3F3F',
sectionSpareColor: '#5B5893',
/** 逻辑区段名称颜色*/
sectionLogicalTextColor: '#FFFFFF',
/** 区段通信车占用颜色**/
sectionCommunicationOccupiedColor: '#FF329A',
sectionCommunicationOccupiedColor: '#FF00FF',
/** 区段非通讯车占用颜色*/
sectionUnCommunicationOccupiedColor: '#FE0000',
sectionUnCommunicationOccupiedColor: '#DE310C',
/** 区段路由锁定颜色*/
sectionRouteLockColor: '#FFFFFF',
sectionRouteLockColor: '#00FF00',
/** 区段故障锁定颜色*/
sectionFaultLockColor: '#9B4A0A',
sectionFaultLockColor: '#FFFFFF',
/** 区段未定义颜色*/
sectionUndefinedColor: '#0071C1',
/** 保护区段锁闭*/
sectionProtectionSectionLockedColor: '#FEFF00',
sectionProtectionSectionLockedColor: '#00FF00',
/** 区段计轴预复位*/
sectionAxleResetColor: '#00FFFF',
/** 区段封锁颜色*/
sectionBlockColor: '#800080',
sectionBlockColor: '#00FFFF',
/** 区段atc切除颜色*/
sectionAtcExcisionColor: '#A0522D',
/** 区段ats切除颜色*/
@ -59,16 +72,17 @@ class Fuzhou extends defaultSkin {
/** 区段延时释放颜色*/
sectionTimeReleaseColor: '#3F3F3F',
/** 区段保护锁闭*/
sectionProtectiveLockColor: '#FFFF00',
sectionProtectiveLockColor: '#00C957',
/** 区段保护延时解锁*/
sectionProtectiveTimeReleaseColor: '#0071C1',
sectionAxleFailure: '#E6A23C' // #FFFF00 计轴失效
/** 计轴失效*/
sectionAxleFailure: '#B18F38'
};
this[deviceType.Signal] = {
/** 信号机宽度 */
signalR: 5,
signalR: 6.5,
/** 自动信号宽度*/
signalSigPassWidth: 10,
signalSigPassWidth: 5,
/** 延迟解锁字体大小*/
signalDelayTextFontSize: 10,
/** 信号机名称字体大小*/
@ -76,11 +90,23 @@ class Fuzhou extends defaultSkin {
/** 灯柱宽度*/
signalLampStandardWidth: 1.2,
/** 设备距离区段的距离*/
signalDistance: 3,
signalDistance: 0,
/** 信号灯按钮距离区段的距离*/
signalButtonDistance: 5,
/** 自动进路方向*/
signalSigRouteDirection: false,
/** 自动进路偏移量*/
signalSigRouteOffset: { x: 4, y: -2 },
/** 自动通过方向*/
signalSigPassDirection: true,
/** 自动通过偏移量*/
signalSigPassOffset: { x: 4, y: 0},
/** 延时解锁方向*/
signalSigDelayDirection: false,
/** 延时解锁偏移量*/
signalSigDelayOffset: { x: 0, y: -5},
/** 信号灯按钮边线*/
signalButtonDashColor: '#FFFFFF',
signalButtonDashColor: '#C0C0C0',
/** 信号灯按钮颜色*/
signalButtonColor: 'darkgreen',
/** 信号灯按钮闪烁颜色*/
@ -88,9 +114,9 @@ class Fuzhou extends defaultSkin {
/** 信号灯字体颜色*/
signalTextRed: '#EF0C08',
/** 信号机字体绿色*/
signalTextGreen: '#4DD43F',
signalTextGreen: '#00FF00',
/** 信号灯灯柱颜色*/
signalLampStandardColor: '#3149C3',
signalLampStandardColor: '#FFFFFF',
/** 信号灯锁闭*/
signalBlockColor: '#EF0C08',
/** 信号灯灰色*/
@ -104,39 +130,41 @@ class Fuzhou extends defaultSkin {
/** 信号灯白色*/
signalLampWhiteColor: '#FFFFFF',
/** 信号灯蓝色*/
signalLampBlueColor: '#0070C0'
signalLampBlueColor: '#0000FF'
};
this[deviceType.StationStand] = {
/** 站台和屏蔽门之间的距离*/
standDistance: 8,
standDistance: 1.5,
/** 站台屏蔽门高度*/
standSafeHeight: 3,
standSafeHeight: 4,
/** 站台首端字体大小*/
standHeadFontSize: 10,
standHeadFontSize: 8,
/** 站台默认字体大小*/
standTextFontSize: 10,
standTextFontSize: 8,
/** 站台紧急关闭半径*/
standEmergentR: 4,
/** 站台紧急关闭偏移量*/
standEmergentOffset: {x: 0, y: 40},
standEmergentOffset: {x: 0, y: -15},
/** 扣车方向*/
standDetainDirection: -1,
/** 扣车偏移量*/
standDetainOffset: {x: -8, y: -6},
standDetainOffset: {x: -12, y: -20},
/** 运行时间方向*/
standTimeDirection: 1,
/** 运行时间偏移量*/
standTimeOffset: {x: -8, y: 26},
standTimeOffset: {x: -12, y: 5},
/** 运行等级方向*/
standLevelDirection: 1,
/** 运行等级偏移量*/
standLevelOffset: {x: -8, y: 6},
standLevelOffset: {x: -12, y: 20},
/** 折返方向*/
standReentryDirection: 0,
/** 折返偏移量*/
standReentryOffset: {x: -16, y: 20},
standReentryOffset: {x: -16, y: 18},
/** 扣车显示内容*/
standDetainText: 'H',
standDetainText: '扣',
/** 跳停显示内容*/
standJumpText: '跳',
/** 站台无人折返*/
standNoHumanReentryColor: '#0F16DA',
/** 站台自动换端*/
@ -179,8 +207,9 @@ class Fuzhou extends defaultSkin {
stationDelayUnlockBorderColor: '#FFFFFF'
};
this[deviceType.StationControl] = {
singleControlNum: 2,
arrowsShow: true,
singleControlNum: 3,
stationOffset: {x: 20, y: 0},
arrowsShow: false, // 控制模式箭头显隐
/** 控制模式字体大小*/
stationControlTextSize: 10,
/** 控制模式灯的半径 */
@ -197,7 +226,7 @@ class Fuzhou extends defaultSkin {
stationControlYellowColor: '#FFFF00'
};
this[deviceType.Station] = {
kilometerPosition: 'up'
kilometerPosition: 'down' // 公里标位置
};
this[deviceType.Switch] = {
/** 道岔单边长度 */
@ -207,17 +236,17 @@ class Fuzhou extends defaultSkin {
/** 道岔边框颜色*/
switchTextBorderColor: '#FE0000',
/** 道岔失去颜色*/
switchTextLossColor: '#FFFFFF',
switchTextLossColor: '#C00808',
/** 道岔定位颜色*/
switchLocateTextColor: '#00FF00',
switchLocateTextColor: '#08C008',
/** 道岔反位颜色*/
switchInversionColor: '#9C9D09',
switchInversionColor: '#C0C000',
/** 道岔单锁颜色*/
switchMonolockColor: '#870E10'
switchMonolockColor: '#FFFFFF'
};
}
}
const fuzhouSkin = new Fuzhou();
const chengduSkin = new Beijing();
export default fuzhouSkin;
export default chengduSkin;

14
src/jmap/theme/fuzhou.js
View File

@ -4,8 +4,18 @@ import deviceType from '../constant/deviceType';
class Fuzhou extends defaultSkin {
constructor() {
super();
this.Link = {
textFontColor: ''
this[deviceType.Link] = {
/** line 颜色*/
lineWidthColor: '#FFFFFF',
/** link 宽度*/
linkWidth: 4.4,
/** link 线条颜色*/
linkColor: '#3F3F3F',
/** link 字体颜色*/
linkTextColor: '#FFFFFF'
};
this[deviceType.Section] = {
sectionTextPosition: 0, // 区段名称位置 1 上行 -1 下面 0 默认

6
src/jmap/utils/parser.js
View File

@ -80,9 +80,9 @@ export function parser(data, jmap) {
}, this);
zrUtil.each(data.switchList || [], elem => {
const cnodeSection = mapDevice[elem.sectionACode];
const lnodeSection = mapDevice[elem.sectionBCode];
const rnodeSection = mapDevice[elem.sectionCCode];
const cnodeSection = elem['sectionA'] = mapDevice[elem.sectionACode];
const lnodeSection = elem['sectionB'] = mapDevice[elem.sectionBCode];
const rnodeSection = elem['sectionC'] =mapDevice[elem.sectionCCode];
if (cnodeSection && lnodeSection && rnodeSection) {
const cnode = mapDevice[cnodeSection.model.linkCode];
if (cnode && cnode.model.leftFdCode === lnodeSection.model.linkCode && cnode.model.leftSdCode === rnodeSection.model.linkCode) {