This commit is contained in:
ival 2021-04-13 17:37:48 +08:00
commit 821d0b28e2
3 changed files with 280 additions and 62 deletions

View File

@ -6,7 +6,8 @@ class SkinCode extends defaultStyle {
super();
this.fontFamily = '宋体';
this[deviceType.Section] = {
elemnetType:['name', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'line', 'separator', 'speedLimit', 'speedLimitName'],
elemnetType:['name', 'line', 'separator', 'badShunt'],
// 'speedLimit', 'speedLimitName','standTrackText','reentryTrackText','transferTrackText',
active: {
routeColor: true // 进路触发颜色
},
@ -16,7 +17,7 @@ class SkinCode extends defaultStyle {
distance: 10, // 文字离区段距离
fontSize: 12, // 字体大小
fontWeight: 'normal', // 字体粗细
fontColor: '#FFFFFF', // 字体颜色
fontColor: 'rgb(192,192,192)', // 字体颜色 (银白)
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle', // 文字垂直对齐方式
@ -33,39 +34,39 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standTrackText: {
z: 10,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 24, // 文字离区段距离
fontSize: 11, // 字体大小
fontWeight: 'normal', // 字体粗细
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
reentryTrackText: {
z: 10,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 36, // 文字离区段距离
fontSize: 11, // 字体大小
fontWeight: 'normal', // 字体粗细
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
transferTrackText: {
z: 10,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 36, // 文字离区段距离
fontSize: 11, // 字体大小
fontWeight: 'normal', // 字体粗细
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
// standTrackText: {
// z: 10,
// position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
// distance: 24, // 文字离区段距离
// fontSize: 11, // 字体大小
// fontWeight: 'normal', // 字体粗细
// fontColor: '#FFFFFF', // 字体颜色
// textAlign: 'center', // 水平对齐方式
// textPosition: 'inside', // 文字位置
// textVerticalAlign: 'middle' // 文字垂直对齐方式
// },
// reentryTrackText: {
// z: 10,
// position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
// distance: 36, // 文字离区段距离
// fontSize: 11, // 字体大小
// fontWeight: 'normal', // 字体粗细
// fontColor: '#FFFFFF', // 字体颜色
// textAlign: 'center', // 水平对齐方式
// textPosition: 'inside', // 文字位置
// textVerticalAlign: 'middle' // 文字垂直对齐方式
// },
// transferTrackText: {
// z: 10,
// position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
// distance: 36, // 文字离区段距离
// fontSize: 11, // 字体大小
// fontWeight: 'normal', // 字体粗细
// fontColor: '#FFFFFF', // 字体颜色
// textAlign: 'center', // 水平对齐方式
// textPosition: 'inside', // 文字位置
// textVerticalAlign: 'middle' // 文字垂直对齐方式
// },
destinationText: {
z: 10,
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
@ -79,48 +80,59 @@ class SkinCode extends defaultStyle {
},
line: {
z: 0,
width: 5, // 区段宽度
width: 3, // 区段宽度
beyondWidth: 0, // 区段宽超出宽度
invadeColor: '#FFFFFF', // 区段侵入颜色
spareColor: '#618cc3', // 区段空闲颜色
communicationOccupiedColor: '#FF00FF', // 区段通信车占用颜色
unCommunicationOccupiedColor: '#DE310C', // 区段非通讯车占用颜色
routeLockColor: '#3FFD46', // 区段进路锁定颜色
spareColor: 'rgb(85,120,182)', // 区段空闲颜色 (浅蓝)
communicationOccupiedColor: '#FF0000', // 区段通信车占用颜色 (红色)
unCommunicationOccupiedColor: '#FF0000', // 区段非通讯车占用颜色 (红色)
routeLockColor: '#FFFFFF', // 区段进路锁定颜色 (白色)
faultLockColor: '#006400', // 区段故障锁定颜色
undefinedColor: '#0071C1', // 区段未定义颜色
blockColor: '#00FF00', // 区段封锁颜色
atcExcisionColor: '#A0522D', // 区段atc切除颜色
atsExcisionColor: '#A0522D', // 区段ats切除颜色
timeReleaseColor: '#3F3F3F', // 区段延时释放颜色
protectiveLockColor: '#FFFF00', // 区段保护锁闭
protectiveTimeReleaseColor: '#0071C1', // 区段保护延时解锁
logicalColor: '#FFFF00', // 逻辑区段颜色 (未用)
logicalTextColor: '#C0C0C0', // 逻辑区段名称颜色 (未用)
invalidColor: '#B18E38' // 区段ARB故障颜色
},
speedLimit: { // 限速元素
badShunt:{
z: 2,
width: 1, // 限速线的宽度
distance: 5, // 限速线距离区段距离
lineColor: '#C0C000', // 限速线颜色 (黄色透明光)
nameShow: true // 名称显示
},
speedLimitName: {
z: 10,
leftName: true, // 左侧限速值是否展示
rightName: true, // 右侧限速值是否展示
nameBackgroundIsRect: false, // 限速值背景是否为矩形
nameBackgroundBorderWidth: 0, // 限速值背景是否边框宽度
nameBackgroundBorderColor: '#000', // 限速值背景边框颜色
limitValueDistance: -15,
kilometerFontSize: 8, // 公里标大小
kilometerColor: '#fff', // 公里标颜色
nameNumberFontSize: 11, // 限速值大小
nameNumberColor: '#C00808', // 限速值颜色
nameBackground: '#C0C000', // 限速名称背景颜色
drogueWidth: 19, // 浮标宽度
drogueHeight: 12 // 浮标高度
distance: 2, // 分路不良 距离区段距离
width: 1, // 分路不良的宽度
lineColor: 'rgb(188,67,180)' // 分路不良颜色 (粉红色)
},
// speedLimit: { // 限速元素
// z: 2,
// width: 1, // 限速线的宽度
// distance: 5, // 限速线距离区段距离
// lineColor: '#C0C000', // 限速线颜色 (黄色透明光)
// nameShow: true // 名称显示
// },
// speedLimitName: {
// z: 10,
// leftName: true, // 左侧限速值是否展示
// rightName: true, // 右侧限速值是否展示
// nameBackgroundIsRect: false, // 限速值背景是否为矩形
// nameBackgroundBorderWidth: 0, // 限速值背景是否边框宽度
// nameBackgroundBorderColor: '#000', // 限速值背景边框颜色
// limitValueDistance: -15,
// kilometerFontSize: 8, // 公里标大小
// kilometerColor: '#fff', // 公里标颜色
// nameNumberFontSize: 11, // 限速值大小
// nameNumberColor: '#C00808', // 限速值颜色
// nameBackground: '#C0C000', // 限速名称背景颜色
// drogueWidth: 19, // 浮标宽度
// drogueHeight: 12 // 浮标高度
// },
separator: {
z: 3, // 分割符层级
width: 1.5, // 物理区段分隔符宽度

View File

@ -0,0 +1,196 @@
import Group from 'zrender/src/container/Group';
import BezierCurve from 'zrender/src/graphic/shape/BezierCurve';
import Line from 'zrender/src/graphic/shape/Line';
import JTriangle from '../../utils/JTriangle';
import Vue from 'vue';
export default class EBadShunt extends Group {
constructor(model) {
super();
this.model = model;
this.zlevel = model.zlevel;
this.z = model.z;
this.create();
}
create() {
// 分路不良
const model = this.model.modelData;
const style = this.model.style;
/** 创建区段*/
if (model && model.points.length > 1) {
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
let x = traingle.drictx * (style.Section.badShunt.distance) * traingle.getSinRate();
let y = traingle.dricty * (style.Section.badShunt.distance) * traingle.getCosRate();
if (x == Infinity) { x = 0; }
if (y == Infinity) { y = 0; }
// if (model.switch) {
// 上侧临时限速线
const badShuntLeft = this.createLimit({
position: [x, -y],
switch: model.switch,
code: model.code,
isSwitchSection: model.switchSection,
relSwitchCode: model.relSwitchCode,
isCurve: model.curve, // 是否曲线
points: model.points
});
// 下侧临时限速线
const badShuntRight = this.createLimit({
position: [-x, y],
switch: model.switch,
code: model.code,
isSwitchSection: model.switchSection,
relSwitchCode: model.relSwitchCode,
isCurve: model.curve, // 是否曲线
points: model.points
});
badShuntLeft.forEach(item => {
this.add(item);
});
badShuntRight.forEach(item => {
this.add(item);
});
// }
}
}
createLimit(model) {
const style = this.model.style;
const dataList = [];
if (model.isCurve) {
const shape = {};
for (let i = 1; i < (model.points.length - 1); i++) {
shape[`cpx${i}`] = model.points[i].x;
shape[`cpy${i}`] = model.points[i].y;
}
shape[`x1`] = model.points[0].x;
shape[`y1`] = model.points[0].y;
shape[`x2`] = model.points[model.points.length - 1].x;
shape[`y2`] = model.points[model.points.length - 1].y;
dataList.push(new BezierCurve({
isLine: true,
zlevel: this.zlevel,
progressive: model.progressive,
z: this.z,
culling: true,
shape: shape,
position: model.position,
style: {
lineWidth: style.Section.badShunt.width,
stroke: style.Section.badShunt.lineColor,
fillOpacity: 0
}
}));
} else {
const swPadding = style.Switch.core.length; // 定位和反位时区段距离岔芯的距离
var switchWidth = style.Section.line.width + style.Section.line.beyondWidth; // 道岔宽度
const beg = Object.assign({}, model.points[0]);
const end = Object.assign({}, model.points[model.points.length - 1]);
if (model.isSwitchSection && beg.y !== end.y) {
const swch = Vue.prototype.$jlmap.mapDevice[model.relSwitchCode]; // 获取道岔model 及状态数据
if (swch && swch.instance) {
const traingle = new JTriangle(swch.intersection, swch.skew);
if ((swch.intersection.x === beg.x) && (swch.intersection.y === beg.y) && !swch.normalPosition && swch.sectionCCode == model.code) {
beg.x = beg.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate();
beg.y = beg.y + traingle.dricty * (swPadding + switchWidth);
}
if ((swch.intersection.x === end.x) && (swch.intersection.y === end.y) && swch.normalPosition && swch.sectionCCode == model.code) {
end.x = end.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate();
end.y = end.y + traingle.dricty * (swPadding + switchWidth);
}
}
}
if (model.points.length == 2) {
dataList.push(new Line({
isLine: true,
zlevel: this.zlevel,
progressive: model.progressive,
z: this.z,
position: model.position,
shape: {
x1: beg.x,
y1: beg.y,
x2: end.x,
y2: end.y
},
style: {
lineWidth: style.Section.badShunt.width,
stroke: style.Section.badShunt.lineColor
}
}));
} else {
dataList.push(new Line({
isLine: true,
zlevel: this.zlevel,
progressive: model.progressive,
z: this.z,
position: model.position,
shape: {
x1: beg.x,
y1: beg.y,
x2: model.points[1].x,
y2: model.points[1].y
},
style: {
lineWidth: style.Section.badShunt.width,
stroke: style.Section.badShunt.lineColor
}
}));
for (let i = 1; i < (model.points.length - 2); i++) {
dataList.push(new Line({
isLine: true,
zlevel: this.zlevel,
z: this.z,
progressive: model.progressive,
position: model.position,
shape: {
x1: model.points[i].x,
y1: model.points[i].y,
x2: model.points[i + 1].x,
y2: model.points[i + 1].y
},
style: {
lineWidth: style.Section.badShunt.width,
stroke: style.Section.badShunt.lineColor
}
}));
}
dataList.push(new Line({
isLine: true,
zlevel: this.zlevel,
z: this.z,
position: model.position,
progressive: model.progressive,
shape: {
x1: model.points[model.points.length - 2].x,
y1: model.points[model.points.length - 2].y,
x2: end.x,
y2: end.y
},
style: {
lineWidth: style.Section.badShunt.width,
stroke: style.Section.badShunt.lineColor
}
}));
}
}
return dataList;
}
hide() {
this.eachChild((child) => {
child.hide();
});
}
show() {
this.eachChild((child) => {
child.show();
});
}
}

View File

@ -12,6 +12,7 @@ import ELimitName from './ELimitName'; // 成都三号线 限速名称
// import JTriangle from '../../utils/JTriangle';
import { drawSectionStyle } from '../../config/defaultStyle';
import EStopRouteImg from './EStopRouteImg';
import EBadShunt from './EBadShunt';
import store from '@/store/index';
/** 区段*/
@ -61,7 +62,8 @@ export default class Section extends Group {
'separator': ESeparator, // 分隔符
'speedLimit': ELimitLines, // 限速线
'speedLimitName': ELimitName, // 限速线名称
'shuttleBack': EBackArrowGroup // 折返箭头 (成都三号线显示)
'shuttleBack': EBackArrowGroup, // 折返箭头 (成都三号线显示)
'badShunt':EBadShunt // 大铁项目 分路不良
};
// 遍历当前线路下的绘图元素
const model = this.model;
@ -105,6 +107,7 @@ export default class Section extends Group {
this.name && this.name.recover();
this.speedLimit && this.speedLimit.hide();
this.speedLimitName && this.speedLimitName.hide();
this.badShunt && this.badShunt.hide();
this.axle && this.axle.setStyle({
stroke: this.style.Section.line.spareColor,
@ -433,9 +436,16 @@ export default class Section extends Group {
sectionSwitch.instance && sectionSwitch.instance.setLimitState(model.speedUpLimit > 0, model.speedUpLimit);
}
}
// 分路不良
model.badShunt && this.badShuntStatus();
}
}
// 分路不良
badShuntStatus() {
this.badShunt && this.badShunt.show();
}
/** 计算提示位置*/
getShapeTipPoint() {
const rect = this.getBoundingRect();