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:
fan 2020-08-21 14:14:26 +08:00
parent ea2d1b9dd1
commit 5df9b4aa6f
7 changed files with 269 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/stop_route.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 173 B

27
src/jmapNew/config/skinCode/ningbo_03.js
View File

@ -83,7 +83,7 @@ class SkinCode extends defaultStyle {
spareColor: '#C0C0C0', // 区段空闲颜色
communicationOccupiedColor: '#FE0000', // 区段通信车占用颜色 // 调整 未确定
unCommunicationOccupiedColor: '#EF72A7', // 区段非通讯车占用颜色
routeLockColor: '#00ff00', // 区段进路锁定颜色
routeLockColor: '#C0C0C0', // 区段进路锁定颜色
faultLockColor: '#81007F', // 区段故障锁定颜色
undefinedColor: '#0071C1', // 区段未定义颜色
protectionLockedColor: '#FFFFFF', // 保护区段锁闭
@ -92,9 +92,9 @@ class SkinCode extends defaultStyle {
atsExcisionColor: '#A0522D', // 区段ats切除颜色
invalidColor: '#AC8F40', // 计轴故障颜色
timeReleaseColor: '#3F3F3F', // 区段延时释放颜色
protectiveLockColor: '#03C85C', // 区段保护锁闭 延续保护
protectiveLockColor: '#C0C0C0', // 区段保护锁闭 延续保护
protectiveTimeReleaseColor: '#0071C1', // 区段保护延时解锁
logicalColor: '#FFFF00', // 逻辑区段颜色 (未用)
logicalColor: '#C0C0C0', // 逻辑区段颜色 (未用)
logicalTextColor: 'white', // 逻辑区段名称颜色 (未用)
speedLimitColor: '#008081' // 临时限速颜色
},
@ -106,6 +106,27 @@ class SkinCode extends defaultStyle {
width: 2,
defaultColor: '#03FFF8'
},
routeArrow: {
radius: 5,
lineWidth: 3,
arrowLineWidth: 1,
defaultArrowStroke: '#0F0',
defaultArrowFill: '#0F0',
defaultLineStroke: '#0F0',
autoArrowStroke: '#000',
manualArrowStroke: '#000',
manualArrowFill: '#0201F2',
atmArrowStroke: '#0201F2',
atmArrowFill: '#0201F2',
atmLineStroke: '#0201F2',
mauArrowStroke: '#FFFF00',
mauArrowFill: '#FFFF00',
mauLineStroke: '#FFFF00',
cancelMauArrowStroke: '#000',
cancelMauArrowFill: '#000',
cancelMauLineStroke: '#000'
},
stopRouteImg: {},
axle: {}, // 计轴
speedLimit: { // 限速元素
width: 1, // 限速线的宽度

3
src/jmapNew/constant/deviceState.js
View File

@ -12,7 +12,8 @@ deviceState[deviceType.Section] = {
cutOff: 0, // 是否切除
invalid: 0, // 是否失效
speedUpLimit: 0, // 最高限速
fault: 0 /** 非故障*/
fault: 0, /** 非故障*/
lockRight: 0 // 区段进路锁闭方向
};
// 进路后端状态
// boolean cbtcMode;是否CBTC模式

179
src/jmapNew/shape/Section/ELines.js
View File

@ -1,7 +1,8 @@
import Group from 'zrender/src/container/Group';
// import Line from 'zrender/src/graphic/shape/Line';
import Polyline from 'zrender/src/graphic/shape/Polyline';
import Isogon from 'zrender/src/graphic/shape/Isogon';
import BezierCurve from 'zrender/src/graphic/shape/BezierCurve';
import JTriangle from '../../utils/JTriangle';
/** 创建区段线集合*/
export default class ELines extends Group {
@ -110,6 +111,101 @@ export default class ELines extends Group {
this.add(this.bottomWithSection);
this.bottomWithSection.hide();
}
if (model.style.Section.routeArrow && !model.isCurve) {
const cPointLeft = {x: 0, y:0};
const cPointRight = {x: 0, y:0};
const pointsLeft = [];
const pointsRight = [];
const length = this.model.points.length;
const triangleLeft = new JTriangle(this.model.points[0], this.model.points[1]);
cPointLeft.x = this.model.points[0].x + triangleLeft.getCos(model.style.Section.routeArrow.radius);
cPointLeft.y = this.model.points[0].y + triangleLeft.getSin(model.style.Section.routeArrow.radius);
for (let i = 0; i < length; i++) {
if (i === 0) {
pointsLeft.push([cPointLeft.x, cPointLeft.y]);
} else {
pointsLeft.push([model.points[i].x, model.points[i].y]);
}
}
const triangleRight = new JTriangle(this.model.points[length - 2], this.model.points[length - 1 ]);
cPointRight.x = this.model.points[length - 1].x - triangleRight.getCos(model.style.Section.routeArrow.radius);
cPointRight.y = this.model.points[length - 1].y - triangleRight.getSin(model.style.Section.routeArrow.radius);
for (let i = 0; i < length; i++) {
if (i === length - 1) {
pointsRight.push([cPointRight.x, cPointRight.y]);
} else {
pointsRight.push([model.points[i].x, model.points[i].y]);
}
}
this.routeArrowLeft = new Isogon({
zlevel: this.zlevel,
origin: [cPointLeft.x, cPointLeft.y],
rotation: Math.PI / 2 - triangleLeft.getRotation(),
z: this.z + 9,
shape: {
x: cPointLeft.x,
y: cPointLeft.y,
r: model.style.Section.routeArrow.radius,
n: 3
},
style: {
lineWidth: model.style.Section.routeArrow.arrowLineWidth,
stroke: model.style.Section.routeArrow.defaultArrowStroke,
fill: model.style.Section.routeArrow.defaultArrowFill
}
});
this.routeArrowRight = new Isogon({
zlevel: this.zlevel,
origin: [cPointLeft.x, cPointLeft.y],
rotation: -Math.PI / 2 - triangleRight.getRotation(),
z: this.z + 9,
shape: {
x: cPointRight.x,
y: cPointRight.y,
r: model.style.Section.routeArrow.radius,
n: 3
},
style: {
lineWidth: model.style.Section.routeArrow.arrowLineWidth,
stroke: model.style.Section.routeArrow.defaultArrowStroke,
fill: model.style.Section.routeArrow.defaultArrowFill
}
});
this.routeLineLeft = new Polyline({
zlevel: this.zlevel,
progressive: model.progressive,
z: this.z,
shape: {
points: pointsLeft
},
style: {
lineWidth: model.style.Section.routeArrow.lineWidth,
stroke: model.style.Section.routeArrow.defaultLineStroke
}
});
this.routeLineRight = new Polyline({
zlevel: this.zlevel,
progressive: model.progressive,
z: this.z,
shape: {
points: pointsRight
},
style: {
lineWidth: model.style.Section.routeArrow.lineWidth,
stroke: model.style.Section.routeArrow.defaultLineStroke
}
});
this.add(this.routeArrowLeft);
this.add(this.routeLineLeft);
this.add(this.routeArrowRight);
this.add(this.routeLineRight);
this.routeArrowLeft.hide();
this.routeLineLeft.hide();
this.routeArrowRight.hide();
this.routeLineRight.hide();
}
}
}
@ -179,7 +275,86 @@ export default class ELines extends Group {
this.lineBorder && this.lineBorder.show();
}
}
setRouteLock(lockRight) {
if (lockRight) {
this.routeArrowRight && this.routeArrowRight.show();
this.routeLineRight && this.routeLineRight.show();
} else {
this.routeLineLeft && this.routeArrowLeft.show();
this.routeLineLeft && this.routeLineLeft.show();
}
}
setAutoRoute(lockRight) {
if (lockRight) {
this.routeArrowRight && this.routeArrowRight.show();
this.routeLineRight && this.routeLineRight.show();
this.routeArrowRight && this.routeArrowRight.setStyle({stroke: this.model.style.Section.routeArrow.autoArrowStroke});
} else {
this.routeLineLeft && this.routeLineLeft.show();
this.routeArrowLeft && this.routeArrowLeft.show();
this.routeArrowRight && this.routeArrowRight.setStyle({stroke: this.model.style.Section.routeArrow.autoArrowStroke});
}
}
setManualRoute(lockRight) {
if (lockRight) {
this.routeArrowRight && this.routeArrowRight.show();
this.routeLineRight && this.routeLineRight.show();
this.routeArrowRight && this.routeArrowRight.setStyle({stroke: this.model.style.Section.routeArrow.manualArrowStroke, fill: this.model.style.Section.routeArrow.manualArrowFill});
} else {
this.routeLineLeft && this.routeLineLeft.show();
this.routeArrowLeft && this.routeArrowLeft.show();
this.routeArrowRight && this.routeArrowRight.setStyle({stroke: this.model.style.Section.routeArrow.manualArrowStroke, fill: this.model.style.Section.routeArrow.manualArrowFill});
}
}
setAtmRoute(lockRight) {
if (lockRight) {
this.routeArrowRight && this.routeArrowRight.show();
this.routeLineRight && this.routeLineRight.show();
this.routeArrowRight && this.routeArrowRight.setStyle({stroke: this.model.style.Section.routeArrow.atmArrowStroke, fill: this.model.style.Section.routeArrow.atmArrowFill});
this.routeLineRight && this.routeLineRight.setStyle({stroke: this.model.style.Section.routeArrow.atmLineStroke});
} else {
this.routeLineLeft && this.routeLineLeft.show();
this.routeArrowLeft && this.routeArrowLeft.show();
this.routeArrowRight && this.routeArrowRight.setStyle({stroke: this.model.style.Section.routeArrow.atmArrowStroke, fill: this.model.style.Section.routeArrow.atmArrowFill});
this.routeLineRight && this.routeLineRight.setStyle({stroke: this.model.style.Section.routeArrow.atmLineStroke});
}
}
setMauRoute(lockRight) {
if (lockRight) {
this.routeArrowRight && this.routeArrowRight.show();
this.routeLineRight && this.routeLineRight.show();
this.routeArrowRight && this.routeArrowRight.setStyle({stroke: this.model.style.Section.routeArrow.mauArrowStroke, fill: this.model.style.Section.routeArrow.mauArrowFill});
this.routeLineRight && this.routeLineRight.setStyle({stroke: this.model.style.Section.routeArrow.mauLineStroke});
} else {
this.routeLineLeft && this.routeLineLeft.show();
this.routeArrowLeft && this.routeArrowLeft.show();
this.routeArrowRight && this.routeArrowRight.setStyle({stroke: this.model.style.Section.routeArrow.mauArrowStroke, fill: this.model.style.Section.routeArrow.mauArrowFill});
this.routeLineRight && this.routeLineRight.setStyle({stroke: this.model.style.Section.routeArrow.mauLineStroke});
}
}
setCancelMauRoute(lockRight) {
if (lockRight) {
this.routeArrowRight && this.routeArrowRight.show();
this.routeLineRight && this.routeLineRight.show();
this.routeArrowRight && this.routeArrowRight.setStyle({stroke: this.model.style.Section.routeArrow.cancelMauArrowStroke, fill: this.model.style.Section.routeArrow.cancelMauArrowFill});
this.routeLineRight && this.routeLineRight.setStyle({stroke: this.model.style.Section.routeArrow.cancelMauLineStroke});
} else {
this.routeLineLeft && this.routeLineLeft.show();
this.routeArrowLeft && this.routeArrowLeft.show();
this.routeArrowRight && this.routeArrowRight.setStyle({stroke: this.model.style.Section.routeArrow.cancelMauArrowStroke, fill: this.model.style.Section.routeArrow.cancelMauArrowFill});
this.routeLineRight && this.routeLineRight.setStyle({stroke: this.model.style.Section.routeArrow.cancelMauLineStroke});
}
}
recoverRoute() {
this.routeArrowLeft && this.routeArrowLeft.hide();
this.routeLineLeft && this.routeLineLeft.hide();
this.routeArrowRight && this.routeArrowRight.hide();
this.routeLineRight && this.routeLineRight.hide();
this.routeArrowLeft && this.routeArrowLeft.setStyle({ stroke: this.model.style.Section.routeArrow.defaultArrowStroke, fill: this.model.style.Section.routeArrow.defaultArrowFill });
this.routeArrowRight && this.routeArrowRight.setStyle({ stroke: this.model.style.Section.routeArrow.defaultArrowStroke, fill: this.model.style.Section.routeArrow.defaultArrowFill });
this.routeLineLeft && this.routeLineLeft.setStyle({ fill: this.model.style.Section.routeArrow.defaultLineStroke });
this.routeArrowRight && this.routeArrowRight.setStyle({ fill: this.model.style.Section.routeArrow.defaultLineStroke });
}
getBoundingRect() {
return this.section.getBoundingRect().clone();
}

52
src/jmapNew/shape/Section/EStopRouteImg.js Normal file
View File

@ -0,0 +1,52 @@
import Group from 'zrender/src/container/Group';
import Rect from 'zrender/src/graphic/shape/Rect';
import Stop_Route from '@/assets/stop_route.png';
import Pattern from 'zrender/src/graphic/Pattern';
import JTriangle from '../../utils/JTriangle';
export default class EStopRouteImg extends Group {
constructor(model) {
super();
this.model = model;
this.zlevel = model.zlevel;
this.z = model.z;
this.stopRouteImgList = [];
this.create();
}
create() {
const image = new Image(5, 8);
image.src = Stop_Route;
image.decode()
.then(() => {
const pattern = new Pattern(image, 'repeat');
for (let i = 1; i < this.model.points.length; i++) {
const triangle = new JTriangle(this.model.points[i - 1], this.model.points[i]);
this.stopRouteImgList.push(new Rect({
zlevel: this.zlevel,
z: this.z + 1,
origin: [this.model.points[i - 1].x, this.model.points[i - 1].y],
rotation: -triangle.getRotation(),
shape: {
x: this.model.points[i - 1].x,
y: this.model.points[i - 1].y - this.model.style.Section.line.width / 2,
width: triangle.getLength(),
height: this.model.style.Section.line.width
},
style: {
fill: pattern
}
}));
}
this.stopRouteImgList.forEach(item => {
this.add(item);
item.hide();
});
});
}
setModel(dx, dy) {
}
setCursor(mouseStyle) {
this.imageBg.attr('cursor', mouseStyle);
}
}

11
src/jmapNew/shape/Section/index.js
View File

@ -11,6 +11,7 @@ import { EBackArrow, EBackArrowTriangle } from './EBackArrow'; // 折返进路
import ELimitName from './ELimitName'; // 成都三号线 限速名称
import JTriangle from '../../utils/JTriangle';
import { drawSectionStyle } from '../../config/defaultStyle';
import EStopRouteImg from './EStopRouteImg';
import store from '@/store/index_APP_TARGET';
import Vue from 'vue';
@ -318,6 +319,15 @@ export default class Section extends Group {
this.add(this.lineBorder);
this.lineBorder.setStyle({ lineWidth: 0 });
}
if (this.style.Section.stopRouteImg && model.type !== '04') {
this.stopRouteImg = new EStopRouteImg({
zlevel: this.zlevel,
z: this.z,
points: model.points,
style:style
});
this.add(this.stopRouteImg);
}
}
}
@ -565,6 +575,7 @@ export default class Section extends Group {
fill: this.style.Section.line.spareColor
});
}
this.section && this.section.recoverRoute();
}
/** 未定义状态 00*/

3
src/jmapNew/utils/JTriangle.js
View File

@ -52,6 +52,9 @@ JTriangle.prototype = {
getSinRate () {
return Math.sqrt(this.abspowy / this.abspowz);
},
getLength() {
return Math.sqrt(this.abspowz);
},
getTanRate () {
var diff_x = this.end.x - this.beg.x;
var diff_y = this.end.y - this.beg.y;