调整区段,道岔显示样式

This commit is contained in:
joylink_zyy 2020-02-28 15:20:26 +08:00
parent b880101a46
commit 870a68a476
13 changed files with 96 additions and 45 deletions

View File

@ -132,6 +132,9 @@ class SkinCode extends defaultStyle {
endWidth: 1.5, // 尽头分隔符宽度
endColor: '#7F7F7F', // 尽头分隔符颜色
color: '#7F7F7F' // 区段边界符颜色
},
block: {
special: false, // 区段特殊显示
}
};

View File

@ -132,6 +132,9 @@ class SkinCode extends defaultStyle {
endWidth: 1.5, // 尽头分隔符宽度
endColor: '#FFFFFF', // 尽头分隔符颜色
color: 'white' // 区段边界符颜色
},
block: {
special: false, // 区段特殊显示
}
};

View File

@ -135,6 +135,9 @@ class SkinCode extends defaultStyle {
},
shuttleBack: { // 折返进路 (存在此对象 显示折返箭头)
distance: 5 // 限速线距离区段距离
},
block: {
special: false, // 区段特殊显示
}
};

View File

@ -125,6 +125,9 @@ class SkinCode extends defaultStyle {
endWidth: 3.5, // 尽头分隔符宽度
endColor: '#3F3F3F', // 尽头分隔符颜色
color: '#3149C3' // 区段边界符颜色
},
block: {
special: false, // 区段特殊显示
}
};

View File

@ -90,17 +90,17 @@ class SkinCode extends defaultStyle {
width: 5, // 区段宽度
beyondWidth: 1, // 区段宽超出宽度
invadeColor: '#EF0C08', // 区段侵入颜色
spareColor: '#3F3F3F', // 区段空闲颜色
communicationOccupiedColor: '#FF329A', // 区段通信车占用颜色
unCommunicationOccupiedColor: '#FE0000', // 区段非通讯车占用颜色
spareColor: '#ffff00', // 区段空闲颜色
communicationOccupiedColor: '#00ff00', // 区段通信车占用颜色
unCommunicationOccupiedColor: '#190000', // 区段非通讯车占用颜色
routeLockColor: '#FFFFFF', // 区段路由锁定颜色
faultLockColor: '#9B4A0A', // 区段故障锁定颜色
undefinedColor: '#0071C1', // 区段未定义颜色
protectionLockedColor: '#FEFF00', // 保护区段锁闭(未用)
blockColor: '#800080', // 区段封锁颜色
blockColor: '#000080', // 区段封锁颜色
atcExcisionColor: '#A0522D', // 区段atc切除颜色
atsExcisionColor: '#A0522D', // 区段ats切除颜色
timeReleaseColor: '#3F3F3F', // 区段延时释放颜色
timeReleaseColor: '#ffff00', // 区段延时释放颜色
protectiveLockColor: '#FFFF00', // 区段保护锁闭
protectiveTimeReleaseColor: '#0071C1', // 区段保护延时解锁
logicalColor: '#FFFF00', // 逻辑区段颜色 (未用)
@ -125,6 +125,9 @@ class SkinCode extends defaultStyle {
endWidth: 3.5, // 尽头分隔符宽度
endColor: '#3F3F3F', // 尽头分隔符颜色
color: '#3149C3' // 区段边界符颜色
},
block: {
special: true, // 区段特殊显示
}
};
@ -333,13 +336,13 @@ class SkinCode extends defaultStyle {
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
offset: { x: 0, y: 8 }, // 道岔名称与区段距离
fontSize: 11, // 字体大小
fontColor: '#C0C0C0', // 道岔名称颜色
fontColor: '#fff', // 道岔名称颜色
fontWeight: 'bold', // 字体粗细
borderColor: '#FE0000', // 道岔边框颜色
borderColor: 'red', // 道岔边框颜色
lossColor: '#FFFFFF', // 道岔失去颜色
locateColor: '#00FF00', // 道岔定位颜色
inversionColor: '#9C9D09', // 道岔反位颜色
monolockColor: '#870E10' // 道岔单锁颜色
locateColor: '#fff', // 道岔定位颜色
inversionColor: '#fff', // 道岔反位颜色
monolockColor: '#fff' // 道岔单锁颜色
},
core: {
splice: true, // 哈尔滨特殊显示
@ -347,13 +350,18 @@ class SkinCode extends defaultStyle {
},
block: { // 道岔封锁配置
blockName: 'default', // 默认道岔封锁类型
nameBorderShow: true, // 道岔名称是否有包围框 显示
contentRectShow: false // 道岔封锁显示
nameBorderShow: false, // 道岔名称是否有包围框 显示
contentRectShow: false, // 道岔封锁显示
contentRectColor: '#fff', // 道岔封锁名称颜色
rhomboidShow: true, // 道岔单独显示
},
monolock: { // 道岔单锁配置
locationColor: '#ea282c', // 道岔单锁定位颜色 (红色)
inversionColor: '#ea282c', // 道岔单锁反位颜色 (红色)
rectShow: false // 道岔单锁 矩形框是否显示
locationColor: '#fff', // 道岔单锁定位颜色 (红色)
inversionColor: '#fff', // 道岔单锁反位颜色 (红色)
nameBorderShow: true, // 道岔名称是否有包围框 显示
rectShow: false, // 道岔单锁 矩形框是否显示
rectWidth: 18, // 矩形框 宽高
rectBorderColor: 'red' // 矩形边框颜色
}
};

View File

@ -132,6 +132,9 @@ class SkinCode extends defaultStyle {
endWidth: 1.5, // 尽头分隔符宽度
endColor: '#FFFFFF', // 尽头分隔符颜色
color: 'white' // 区段边界符颜色
},
block: {
special: false, // 区段特殊显示
}
};

View File

@ -28,7 +28,7 @@ class Status {
}
handleSection(device) {
this.statusObj = {
blockade: device.blockade, // 是否封锁
blockade: device.blockade, // 轨道是否封锁
routeLock: device.routeLock, // 是否进路锁闭
overlapLock: device.overlapLock, // 进路延续保护锁闭
ctOccupied: device.ctOccupied, // 通信车占用

View File

@ -26,8 +26,7 @@ export default class ELines extends Group {
shape[`y1`] = model.points[0].y;
shape[`x2`] = model.points[model.points.length - 1].x;
shape[`y2`] = model.points[model.points.length - 1].y;
this.add(new BezierCurve({
this.section = new BezierCurve({
isLine: true,
zlevel: this.zlevel,
progressive: model.progressive,
@ -39,7 +38,8 @@ export default class ELines extends Group {
stroke: model.style.Section.line.spareColor,
fillOpacity: 0
}
}));
});
this.add(this.section);
} else {
for (let i = 0; i < (model.points.length - 1); i++) {
this.add(new Line({
@ -71,6 +71,18 @@ export default class ELines extends Group {
});
}
hide() {
this.eachChild((child) => {
child.hide();
});
}
show() {
this.eachChild((child) => {
// console.log(child);
child.show();
});
}
animateStyle(loop, animates) {
if (animates && animates.length) {
this.eachChild((child) => {

View File

@ -73,8 +73,18 @@ export default class Section extends Group {
points: model.points,
style: style
});
// 创建哈尔滨特殊区段(用作封锁显示)
this.sectionBlock = new ELines({
zlevel: this.zlevel,
z: this.z,
isSwitchSection: model.switchSection,
isCurve: model.curve,
points: model.points,
style: style
});
this.add(this.section);
this.add(this.sectionBlock);
}
// 折返箭头
@ -563,6 +573,7 @@ export default class Section extends Group {
recover() {
if (this.section) {
this.section.stopAnimation(true);
this.sectionBlock && this.sectionBlock.hide(); // 因此特殊区段
this.section.setStyle({
fill: this.style.backgroundColor,
stroke: this.style.Section.line.spareColor,
@ -631,8 +642,10 @@ export default class Section extends Group {
/** 封锁 06*/
block() {
if (this.section) {
this.section.setStyle({
if (this.style.Section.block.special) {
this.sectionBlock && this.sectionBlock.show();
} else {
this.section && this.section.setStyle({
stroke: this.style.Section.line.blockColor,
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
});
@ -761,29 +774,20 @@ export default class Section extends Group {
setState(model) {
this.recover();
/** 道岔保护区段锁闭 */
if (model.overlapLock) {
this.protectiveLock();
}
model.overlapLock && this.protectiveLock();
/** 空闲锁闭或者叫进路锁闭 */
if (model.routeLock) {
this.routeLock();
}
model.routeLock && this.routeLock();
/** 轨道封锁 */
// model.blockade = 1;
model.blockade && this.block();
/** 非CBTC车占用 */
if (model.nctOccupied) {
this.unCommunicationOccupied();
}
model.nctOccupied && this.unCommunicationOccupied();
/** CBTC车占用 */
if (model.ctOccupied) {
this.communicationOccupied();
}
model.ctOccupied && this.communicationOccupied();
/** 区段切除*/
if (model.cutOff) {
this.sectionCutOff();
}
model.cutOff && this.sectionCutOff();
/** 是否限速*/
if (model.speedUpLimit > 0) {
this.setSpeedUpperLimit();
}
model.speedUpLimit && this.setSpeedUpperLimit();
/** 道岔区段更新岔心颜色 */
if (model.type === '03' && model.switch) {
const sectionSwitch = store.getters['map/getDeviceByCode'](model.switch.code);

View File

@ -32,6 +32,9 @@ class ESwName extends Group {
const rect = this.nameText.getBoundingRect();
let textWidth = rect.width * 0.8;
if (style.Switch.monolock.nameBorderShow) {
textWidth = rect.width * 0.8 + 8;
}
if (model.triangle.drictx !== 1) {
rect.x += rect.width;
textWidth = -textWidth;
@ -49,7 +52,6 @@ class ESwName extends Group {
},
style: {
lineWidth: 0,
// lineDash: [3, 3],
stroke: style.Switch.text.borderColor,
fill: style.transparentColor
}

View File

@ -19,9 +19,9 @@ class ETriangle extends Group {
},
style: {
fill: style.Section.line.spareColor,
// fill: 'green',
lineWidth: 0,
stroke: style.Section.line.spareColor
// fill: 'green'
},
cursor: model.cursor,
onmouseover: model.onmouseover,

View File

@ -123,9 +123,13 @@ export default class Switch extends Group {
onmouseout: () => { this.name.getArrowText().hide(); }
});
let spointLength1 = 8;
const Tspoint1 = [model.intersection.x + directx * width3 + directx * (width2 + width1) - directx * width3, model.intersection.y + directy * switchWidth1];
const Tspoint2 = [Tspoint1[0] - directx * 8, Tspoint1[1]];
const Tspoint3 = [Tspoint1[0] - directx * 8, model.intersection.y - directy * switchWidth1];
if (this.style.Switch.block.rhomboidShow) {
spointLength1 = 16
}
const Tspoint2 = [Tspoint1[0] - directx * spointLength1, Tspoint1[1]];
const Tspoint3 = [Tspoint1[0] - directx * spointLength1, model.intersection.y - directy * switchWidth1];
const Tspoint4 = [model.intersection.x + directx * width3, Tspoint3[1]];
const Tspoint5 = [Tspoint1[0], Tspoint1[1]];
this.sheltertriangle = new ETriangle({ // 平行四边形覆盖范围 内侧三角形覆盖物 (用于宁波线路'挤岔' 专用)其他线路不能使用
@ -322,6 +326,9 @@ export default class Switch extends Group {
if (this.style.Switch.monolock.rectShow) { // 判断单锁矩形是否显示
this.lockRect.show();
}
if (this.style.Switch.monolock.nameBorderShow) { // 单锁显示名称包围框
this.setHasTextBorder(1);
}
if (this.model.normalPosition) {
this.setTextColor(this.style.Switch.monolock.locationColor); // 定位 设置道岔名称颜色
} else if (this.model.reversePosition) {
@ -336,6 +343,9 @@ export default class Switch extends Group {
} else if (this.style.Switch.block.contentRectShow) {
this.lockRect.show();
this.lockRect.setStyle({ stroke: this.style.Switch.block.contentRectColor });
} else if (this.style.Switch.block.rhomboidShow && this.model.reversePosition) { // 范围且封锁时显示
this.sheltertriangle.show();
this.sheltertriangle.getSection().setStyle('fill', '#000080');
}
}
@ -409,7 +419,7 @@ export default class Switch extends Group {
}
/** 道岔单锁 */
model.singleLock && this.setMonolock();
/** 道岔 */
/** 道岔锁 */
model.blockade && this.block();
/** 区段切除*/
model.cutOff && this.setSwitchCutOff();

View File

@ -3,7 +3,7 @@ export function getBaseUrl() {
let BASE_API;
if (process.env.NODE_ENV === 'development') {
// BASE_API = 'https://joylink.club/jlcloud';
// BASE_API = 'https://test.joylink.club/jlcloud';
BASE_API = 'https://test.joylink.club/jlcloud';
// BASE_API = 'http://192.168.3.5:9000'; // 袁琪
// BASE_API = 'http://192.168.3.6:9000'; // 旭强
// BASE_API = 'http://192.168.3.41:9000'; // 张赛