This commit is contained in:
fan 2020-08-20 16:57:58 +08:00
commit 428d547a25
9 changed files with 245 additions and 53 deletions

View File

@ -409,7 +409,7 @@ class SkinCode extends defaultStyle {
// 延续保护计时
this[deviceType.OverAp] = {
show: false
show: true
};
this[deviceType.Switch] = {

View File

@ -421,7 +421,7 @@ class SkinCode extends defaultStyle {
};
// 延续保护计时
this[deviceType.OverAp] = {
show: true
show: false
};
this[deviceType.Switch] = {

View File

@ -133,7 +133,11 @@ class SkinCode extends defaultStyle {
blockGlint: true // 区段封锁闪烁显示
},
trainPosition:{
display: false // 列车实时位置显示
display: true, // 列车实时位置显示
specialShow: true, // 列车特殊显示
specialBackground: 'rgba(36, 219, 219, 0.8)',
specialRectWidth: 14,
stopTrainRectWidth: 7
}
};
@ -219,7 +223,11 @@ class SkinCode extends defaultStyle {
text: {
fontSize: 11, // 字体大小
fontWeight: 'normal', // 字体粗细
distance: 5 // 灯跟文字距离
distance: 5, // 灯跟文字距离
borderShow: true,
borderColor: '#000',
textPadding: [3, 20],
textBorderWidth: 2
},
lamp: {
radiusR: 6, // 控制灯大小
@ -616,12 +624,12 @@ class SkinCode extends defaultStyle {
], // 特殊列车类型需设置显示格式
lrPadding: 4, // 两边间隔
upPadding: 4, // 上边距离
trainSidelineColor: '#ABFE9B',
trainBodyFillColor: '#A388B1', // 列车车身填充颜色
trainSidelineColor: 'rgba(0,0,0,0)',
trainBodyFillColor: 'rgba(0,0,0,0)', // 列车车身填充颜色
trainNameFormat: 'serviceNumber:tripNumber:targetCode'// 列车显示格式
},
directionArrow: {
hasArrow: true,
hasArrow: false,
width: 6,
radiusR: 4,
fillColor: '#00FF00',
@ -640,6 +648,8 @@ class SkinCode extends defaultStyle {
trainNumber: {
targetCodePrefix: '00', // 目的地码前缀
defaultTargetCode: 'DD', // 默认目的地码
fontColor: '#000',
fontSize: 10,
trainTargetTextAlign: 'left', // 目的地码文字显示位置
trainNumberOffset: { x: 36, y: 4 }, // 目的地码偏移量
headTypeColor: '#1CBAFD', // 头码车目的地号显示颜色
@ -647,12 +657,16 @@ class SkinCode extends defaultStyle {
},
trainServer: {
serviceNumberPrefix: '000', // 服务号(表号)前缀
fontColor: '#000',
fontSize: 10,
defaultServiceNumber: 'TTT', // 默认服务号(表号)
defaultServerNoColor: '#FFFFFF', // 默认服务号状态显示颜色
defaultServerNoColor: '#000', // 默认服务号状态显示颜色
trainServerOffset: { x: 4, y: 4 } // 列车服务号偏移
},
trainTarget: {
tripNumberPrefix: '00', // 车次号前缀
fontColor: '#000',
fontSize: 10,
defaultTripNumber: 'DD', // 默认车次号2
trainTargetOffset: { x: 24, y: 4 }, // 列车车次号偏移
trainTargetTextAlign: 'right' // 车次号文字显示位置
@ -666,13 +680,13 @@ class SkinCode extends defaultStyle {
maskText: '0' // 车组号遮罩
},
trainHead: {
trainConntWidth: 2, // 列车竖杠的宽度
trainConntWidth: 0, // 列车竖杠的宽度
trainHeadFillColor: '#000000', // 列车车头矩形填充颜色
trainHeadRectHeight: 20, // 列车车头矩形高度
directionStopType:'normal', // special 西安二号线 停车 列车方向图标不消失 normal 正常
trainHeadHeight: 'trainBox', // 列车车头高度取决于trainBox高度
trainHeadArrowWidth: 5, // 列车车头三角宽度
trainHeadArrowOffsetX: 4 // 列车车头三角偏移
trainHeadArrowWidth: 0, // 列车车头三角宽度
trainHeadArrowOffsetX: 0 // 列车车头三角偏移
},
common: {
trainHeight: 20, // 列车高度
@ -680,7 +694,7 @@ class SkinCode extends defaultStyle {
trainWidth: 70, // 列车长度
trainTextFontSize: 16, // 列车字号
fontFamily: 'consolas', // 默认字体 族类
haveTextHSDA: true, // 是否需创建textHSDA对象
haveTextHSDA: false, // 是否需创建textHSDA对象
haveArrowText: true, // 是否需创建arrowText对象
textOffset: 4, // 字体偏移(用以控制字体据车头的距离)
trainWidthMoreText: 8, // 计算列车长度时--列车长比text多出尺寸
@ -689,7 +703,7 @@ class SkinCode extends defaultStyle {
trainTip:false // 鼠标悬停列车状态信息框是否显示
},
mouseOverStyle:{
borderLineColor: '#FFFFFF',
borderLineColor: 'rgba(0,0,0,0)',
borderLineDash: [3, 3],
leftOffset:30,
rightOffset:30

View File

@ -52,9 +52,9 @@ export default class Station extends Group {
if (style.Station.text.borderShow) { // 哈尔滨线路单独显示
this.stationText.attr({
style: {
textPadding: [2, 6],
textBorderColor: model.nameFontColor,
textBorderWidth: 1
textPadding: style.Station.text.textPadding || [2, 6],
textBorderColor: style.Station.text.borderColor || model.nameFontColor,
textBorderWidth: style.Station.text.textBorderWidth || 1
}
});
}

View File

@ -1,5 +1,6 @@
import Group from 'zrender/src/container/Group';
import Polygon from 'zrender/src/graphic/shape/Polygon';
import Rect from 'zrender/src/graphic/shape/Rect';
/** 创建三角形*/
export default class ETriangle extends Group {
@ -7,6 +8,7 @@ export default class ETriangle extends Group {
super();
this.model = model;
this.zlevel = model.zlevel;
this.style = model.style;
this.z = model.z;
this.create(model);
}
@ -14,6 +16,57 @@ export default class ETriangle extends Group {
create(model) {
if (model && model.point) {
const right = model.right == 1 ? 1 : -1;
if (this.style.Section.trainPosition.specialShow) {
this.stopRect = new Rect({ // 停车标识
zlevel: model.zlevel,
z: model.z,
shape: {
x: model.point.x - this.style.Section.trainPosition.stopTrainRectWidth,
y: model.point.y - this.style.Section.line.width / 4,
width: this.style.Section.trainPosition.stopTrainRectWidth,
height: this.style.Section.line.width - 2
},
style: {
lineWidth: 0,
fill: 'rgba(26, 54, 88, 0.7)'
}
});
this.angle1 = new Rect({
zlevel: model.zlevel,
z: model.z,
shape: {
x: model.point.x - this.style.Section.trainPosition.specialRectWidth,
y: model.point.y - this.style.Section.line.width / 2,
width: this.style.Section.trainPosition.specialRectWidth,
height: this.style.Section.line.width + 2
},
style: {
lineWidth: 0,
fill: this.style.Section.trainPosition.specialBackground
},
cursor: 'pointer'
});
this.angle = new Polygon({
zlevel: model.zlevel,
z: model.z,
shape: {
points:[
[model.point.x + 5 * right, model.point.y + 1],
[model.point.x, model.point.y - this.style.Section.line.width / 2],
[model.point.x, model.point.y + this.style.Section.line.width / 2 + 2]
]
},
style: {
// stroke:'#00FF00',
lineWidth: 0,
fill: this.style.Section.trainPosition.specialBackground
}
});
this.add(this.angle1);
this.add(this.angle);
this.add(this.stopRect);
this.stopRect.hide();
} else {
this.angle = new Polygon({
zlevel: model.zlevel,
z: model.z,
@ -29,12 +82,23 @@ export default class ETriangle extends Group {
this.add(this.angle);
}
}
}
updateTriangle(model, right) {
updateTriangle(model, right, trainB) {
if (this.angle) {
const trainRight = right == 1 ? 1 : -1;
const data = [[model.x + 10 * trainRight, model.y], [model.x, model.y - 6], [model.x, model.y + 6]];
// this.angle.shape.points.push([model.x + 10 * trainRight, model.y]);
// this.angle.attr('shape', { points: this.angle.shape.points });
let data = [
[model.x + 10 * trainRight, model.y],
[model.x, model.y - 6],
[model.x, model.y + 6]
];
if (this.style.Section.trainPosition.specialShow) {
data = [
[model.x + 5 * trainRight, model.y + 1],
[model.x, model.y - this.style.Section.line.width / 2],
[model.x, model.y + this.style.Section.line.width / 2 + 2]
];
}
this.angle.attr({
shape: {
points:data
@ -46,6 +110,59 @@ export default class ETriangle extends Group {
}
}, 10, 0, 'elasticOut', function () {
});
this.dirty();
this.angle.dirty();
}
if (this.angle1) {
let trainRight = model.x;
if (right == 1) {
trainRight = model.x - this.style.Section.trainPosition.specialRectWidth;
}
const pointsData = {
x: trainRight,
y: model.y - this.style.Section.line.width / 2,
width: this.style.Section.trainPosition.specialRectWidth,
height: this.style.Section.line.width + 2
};
this.angle1.attr({
shape: pointsData
});
this.angle1.animateTo({
shape: pointsData
}, 10, 0, 'elasticOut', function () {
});
this.angle1.dirty();
}
if (this.stopRect) {
const offset = (this.style.Section.trainPosition.specialRectWidth - this.style.Section.trainPosition.stopTrainRectWidth) / 2;
let trainRight = model.x + offset;
if (right == 1) {
trainRight = model.x - offset - this.style.Section.trainPosition.stopTrainRectWidth;
}
const pointsData = {
x: trainRight,
y: model.y - this.style.Section.line.width / 4,
width: this.style.Section.trainPosition.stopTrainRectWidth,
height: this.style.Section.line.width - 2
};
this.stopRect.attr({
shape: pointsData
});
this.stopRect.animateTo({
shape: pointsData
}, 10, 0, 'elasticOut', function () {
});
this.stopRect.dirty();
}
if (this.style.Section.trainPosition.specialShow) {
trainB.setPositionText(model, right);
}
}
setStopShow(flag) {
if (flag) {
this.stopRect && this.stopRect.show();
} else {
this.stopRect && this.stopRect.hide();
}
}
}

View File

@ -53,7 +53,7 @@ export default class TrainBody extends Group {
y: parseInt(model.point.y + style.Train.trainServer.trainServerOffset.y),
text: serviceNumber.substring(serviceNumber.length - style.Train.trainServer.serviceNumberPrefix.length),
textFill: model.style.Train.trainServer.fontColor || style.trainTextColor,
fontSize: model.fontSize,
fontSize: model.style.Train.trainServer.fontSize || model.fontSize,
fontFamily: style.Train.common.fontFamily,
textAlign: 'left',
textVerticalAlign: 'top'
@ -66,7 +66,7 @@ export default class TrainBody extends Group {
y: parseInt(model.point.y + model.style.Train.trainTarget.trainTargetOffset.y),
text: tripNumber.substring(tripNumber.length - style.Train.trainTarget.tripNumberPrefix.length),
textFill: model.style.Train.trainTarget.fontColor || style.trainTextColor,
fontSize: model.fontSize,
fontSize: model.style.Train.trainTarget.fontSize || model.fontSize,
fontFamily: style.Train.common.fontFamily,
textAlign: 'left',
textVerticalAlign: 'top'
@ -80,7 +80,7 @@ export default class TrainBody extends Group {
textFill: model.style.Train.trainNumber.fontColor || style.trainTextColor,
textStroke: style.trainTextColor,
textStrokeWidth: 0,
fontSize: model.fontSize,
fontSize: model.style.Train.trainNumber.fontSize || model.fontSize,
fontFamily: style.Train.common.fontFamily,
textAlign: 'left',
textVerticalAlign: 'top'
@ -401,4 +401,61 @@ export default class TrainBody extends Group {
}
}
}
setPositionText(model, right) {
let widthText = 0;
let point = {
x: model.x - 10,
y: model.y
};
if (right == 1) {
point = {
x: model.x - 20,
y: model.y
};
}
if (this.textTrainTarget) {
this.textTrainTarget.attr({
style: {
x: parseInt(point.x + widthText),
y: parseInt(point.y - this.style.Section.line.width),
textVerticalAlign: 'middle'
}
});
widthText += this.textTrainTarget.getBoundingRect().width;
this.textTrainTarget.dirty();
}
if (this.textTrainServer) {
this.textTrainServer.attr({
style: {
x: parseInt(point.x + widthText),
y: parseInt(point.y - this.style.Section.line.width),
textVerticalAlign: 'middle'
}
});
widthText += this.textTrainServer.getBoundingRect().width;
this.textTrainServer.dirty();
}
if (this.textTrainTrip) {
this.textTrainTrip.attr({
style: {
x: parseInt(point.x + widthText),
y: parseInt(point.y - this.style.Section.line.width),
textVerticalAlign: 'middle'
}
});
widthText += this.textTrainTrip.getBoundingRect().width;
this.textTrainTrip.dirty();
}
if (this.textTrainGroup) {
this.textTrainGroup.attr({
style: {
x: parseInt(point.x + widthText),
y: parseInt(point.y - this.style.Section.line.width),
textVerticalAlign: 'middle'
}
});
widthText += this.textTrainGroup.getBoundingRect().width;
this.textTrainGroup.dirty();
}
}
}

View File

@ -1,6 +1,6 @@
import Group from 'zrender/src/container/Group';
import Rect from 'zrender/src/graphic/shape/Rect';
import BoundingRect from 'zrender/src/core/BoundingRect';
// import BoundingRect from 'zrender/src/core/BoundingRect';
export default class TrainBodyBox extends Group {
constructor(model) {

View File

@ -60,6 +60,7 @@ export default class Train extends Group {
this._computed();
const model = this.model;
const style = this.style;
if (this.point) {
this.trainB = new TrainBody({
zlevel: this.zlevel,
@ -153,6 +154,7 @@ export default class Train extends Group {
right: this.model.right,
point: { x: this.startX, y: this.startY }
});
this.add(this.triangle);
}
@ -193,7 +195,7 @@ export default class Train extends Group {
});
const point = { x: this.startX, y: this.startY };
this.triangle.point = point;
this.triangle.updateTriangle(point, train.right);
this.triangle.updateTriangle(point, train.right, this.trainB);
this.triangle.dirty();
}
}
@ -230,6 +232,7 @@ export default class Train extends Group {
this.trainL && this.trainL.setArrowShow(arrowLShow);
this.trainR && this.trainR.setLineShow(lineRShow);
this.trainR && this.trainR.setArrowShow(arrowRShow);
this.triangle && this.triangle.setStopShow(false); // 运行
return true;
}
});
@ -246,6 +249,7 @@ export default class Train extends Group {
} else {
this.trainL && this.trainL.setLineShow(item.lineLShow);
this.trainR && this.trainR.setLineShow(item.lineRShow);
this.triangle && this.triangle.setStopShow(true); // 停车
}
return true;
}