515 lines
21 KiB
JavaScript
515 lines
21 KiB
JavaScript
import Group from 'zrender/src/container/Group';
|
|
import TrainHead from './TrainHead';
|
|
import TrainBody from './TrainBody';
|
|
import BoundingRect from 'zrender/src/core/BoundingRect';
|
|
import Rect from 'zrender/src/graphic/shape/Rect';
|
|
import ETriangle from '../Train/ETriangle';
|
|
import store from '@/store/index_APP_TARGET';
|
|
import EDirection from './EDirection';
|
|
|
|
/** 列车 */
|
|
export default class Train extends Group {
|
|
constructor(model, style) {
|
|
super();
|
|
this._code = model.code;
|
|
this._type = model._type;
|
|
this.zlevel = model.zlevel;
|
|
this.model = model;
|
|
this.style = style;
|
|
this.z = 40;
|
|
// this.size = 0;
|
|
this.section = null;
|
|
this.isShowShape = true;
|
|
this.fontSize = style.Train.common.useSelfText ? style.Train.common.nameFontSize || style.Train.common.trainTextFontSize : model.nameFontSize || style.Train.common.nameFontSize || style.Train.common.trainTextFontSize;
|
|
this.newScale = this.fontSize / style.Train.common.trainTextFontSize;
|
|
this.nameFormat = style.Train.common.useSelfFormat ? style.Train.trainBody.trainNameFormat : model.nameFormat || style.Train.trainBody.trainNameFormat;
|
|
if ( style.Train.trainBody.specialTrainType.length > 0) {
|
|
style.Train.trainBody.specialTrainType.some((item) =>{
|
|
if (model.type === item.type) {
|
|
this.nameFormat = item.nameFormat;
|
|
model.serviceNumber = item.serviceNumber ? item.serviceNumber : model.serviceNumber;
|
|
return true;
|
|
}
|
|
});
|
|
}
|
|
this.create();
|
|
this.setState(model, this);
|
|
this.initShowStation(model);
|
|
}
|
|
|
|
_computed() {
|
|
const model = this.model;
|
|
const style = this.style;
|
|
if (model.trainWindowModel) {
|
|
this.point = {
|
|
x: model.trainWindowModel.point.x,
|
|
y: model.trainWindowModel.point.y
|
|
};
|
|
if (model.right) {
|
|
this.point.x = this.point.x - style.Train.trainHead.trainConntWidth * this.newScale - style.Train.common.trainWidth / 2;
|
|
this.point.y = this.point.y - style.Train.common.trainHeight / 2;
|
|
} else {
|
|
this.point.x = this.point.x + style.Train.trainHead.trainConntWidth * this.newScale - style.Train.common.trainWidth / 2;
|
|
this.point.y = this.point.y + model.trainWindowModel.height - style.Train.common.trainHeight / 2;
|
|
}
|
|
} else {
|
|
this.point = model.position;
|
|
this.traingle = null;
|
|
}
|
|
}
|
|
create() {
|
|
this._computed();
|
|
this.isChangeTrainWidth(this.model, this.style);
|
|
const model = this.model;
|
|
const style = this.style;
|
|
if (this.point) {
|
|
this.trainB = new TrainBody({
|
|
zlevel: this.zlevel,
|
|
z: this.z,
|
|
style: style,
|
|
point: this.point,
|
|
destinationStatus: model.destinationStatus,
|
|
serviceNumber: model.serviceNumber,
|
|
tripNumber: model.tripNumber,
|
|
destinationCode: model.destinationCode,
|
|
groupNumber: model.groupNumber,
|
|
right: model.right,
|
|
directionCode: model.directionCode,
|
|
sectionModel: model.sectionModel,
|
|
runStatus: model.runStatus,
|
|
fontSize: this.fontSize,
|
|
nameFormat: this.nameFormat,
|
|
type: model.type,
|
|
speed: model.speed,
|
|
maLen: model.maLen,
|
|
model: model
|
|
});
|
|
this.trainL = new TrainHead({
|
|
style: style,
|
|
zlevel: this.zlevel,
|
|
z: this.z,
|
|
point: {
|
|
x: this.point.x - style.Train.common.trainHeadDistance,
|
|
y: this.point.y
|
|
},
|
|
drect: -1,
|
|
scale: this.newScale
|
|
});
|
|
|
|
this.trainR = new TrainHead({
|
|
style: style,
|
|
zlevel: this.zlevel,
|
|
z: this.z,
|
|
point: {
|
|
x: this.point.x + style.Train.common.trainWidth + style.Train.common.trainHeadDistance,
|
|
y: this.point.y
|
|
},
|
|
drect: 1,
|
|
scale: this.newScale
|
|
});
|
|
|
|
if (style.Section.trainPosition.display) {
|
|
const data = this.model.physicalCode;
|
|
const oldmodel = store.getters['map/getDeviceByCode'](data);
|
|
const leftPoint = oldmodel.points[0];
|
|
const rightPoint = oldmodel.points[oldmodel.points.length - 1];
|
|
this.startX = this.model.right == 1 ? leftPoint.x : rightPoint.x;
|
|
this.startY = this.model.right == 1 ? leftPoint.y : rightPoint.y;
|
|
// 算出折线的长度
|
|
this.lineLength = 0;
|
|
let oldPoint = null;
|
|
this.pointList = [];
|
|
oldmodel.points.forEach((point)=>{
|
|
if (oldPoint) {
|
|
const temp = Math.sqrt(
|
|
Math.pow(point.x - oldPoint.x, 2) +
|
|
Math.pow(point.y - oldPoint.y, 2),
|
|
);
|
|
this.pointList.push({length:temp, pointStart:{x:oldPoint.x, y:oldPoint.y}, pointEnd:{x:point.x, y:point.y}});
|
|
this.lineLength += temp;
|
|
}
|
|
oldPoint = point;
|
|
});
|
|
oldPoint = 0;
|
|
this.pointList.forEach(point=>{
|
|
point.percentStart = oldPoint / this.lineLength;
|
|
oldPoint += point.length;
|
|
point.percentEnd = oldPoint / this.lineLength;
|
|
});
|
|
|
|
this.triangle = new ETriangle({
|
|
style: this.style,
|
|
zlevel: this.zlevel,
|
|
z:10,
|
|
right: this.model.right,
|
|
point:{x:this.startX, y:this.startY}
|
|
});
|
|
this.add(this.triangle);
|
|
}
|
|
|
|
this.add(this.trainB);
|
|
this.add(this.trainL);
|
|
this.add(this.trainR);
|
|
}
|
|
if (style.Train.common.haveTrainBorder) {
|
|
this.createTrainBorder();
|
|
}
|
|
if (style.Train.directionArrow.hasArrow) {
|
|
const arrowPoint = {x: 0, y: 0};
|
|
if (model.trainWindowModel) {
|
|
arrowPoint.x = model.trainWindowModel.point.x;
|
|
arrowPoint.y = model.right ? model.trainWindowModel.point.y + style.Train.directionArrow.distanceBottom : model.trainWindowModel.point.y - style.Train.directionArrow.distanceTop;
|
|
}
|
|
this.directionArrow = new EDirection({
|
|
zlevel: this.zlevel,
|
|
z:10,
|
|
right: model.right,
|
|
x: arrowPoint.x,
|
|
y: arrowPoint.y,
|
|
style: style
|
|
});
|
|
this.add(this.directionArrow);
|
|
}
|
|
}
|
|
|
|
// 获取设备提示坐标
|
|
getShapeTipPoint() {
|
|
}
|
|
|
|
updateSection() {
|
|
const train = this.model;
|
|
if (train.physicalCode && train.offsetp && this.triangle) {
|
|
this.pointList.forEach(point=>{
|
|
if (train.offsetp > point.percentStart && train.offsetp <= point.percentEnd) {
|
|
this.startX = point.pointStart.x + (point.pointEnd.x - point.pointStart.x) * (train.offsetp - point.percentStart);
|
|
this.startY = point.pointStart.y + (point.pointEnd.y - point.pointStart.y) * (train.offsetp - point.percentStart);
|
|
}
|
|
});
|
|
const point = {x:this.startX, y:this.startY};
|
|
this.triangle.point = point;
|
|
this.triangle.updateTriangle(point, train.right);
|
|
this.triangle.dirty();
|
|
}
|
|
}
|
|
|
|
// 恢复颜色状态
|
|
recover() {
|
|
this.trainB && this.trainB.setHShow(false);
|
|
this.trainB && this.trainB.setSShow(false);
|
|
this.trainB && this.trainB.setDShow(false);
|
|
this.trainB && this.trainB.setAShow(false);
|
|
|
|
this.trainL && this.trainL.setLineShow(false);
|
|
this.trainR && this.trainR.setLineShow(false);
|
|
this.trainL && this.trainL.setArrowShow(false);
|
|
this.trainR && this.trainR.setArrowShow(false);
|
|
}
|
|
|
|
// 设置服务号状态类型
|
|
setServerNoType(type) {
|
|
if (this.style.Train.trainStatusStyle.serverNoType.length > 0) {
|
|
const flag = this.style.Train.trainStatusStyle.serverNoType.some((item) =>{
|
|
if (type === item.type) {
|
|
this.trainB && this.trainB.setTextTrainServerColor(item.showColor);
|
|
return true;
|
|
}
|
|
});
|
|
if (this.style.Train.trainStatusStyle.defaultServerNoColor && !flag) {
|
|
this.trainB && this.trainB.setTextTrainServerColor(this.style.Train.trainStatusStyle.defaultServerNoColor);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 设置目的地状态
|
|
setDestinationStatus(status) {
|
|
if (this.style.Train.trainStatusStyle.destinationStatus.length > 0) {
|
|
const flag = this.style.Train.trainStatusStyle.destinationStatus.some((item) =>{
|
|
if (status === item.status) {
|
|
switch (this.style.Train.trainStatusStyle.destinationStatusSetText) {
|
|
case 'trainTarget':
|
|
this.trainB && this.trainB.setTextTrainTargetColor(item.showColor);
|
|
break;
|
|
case 'trainServer':
|
|
this.trainB && this.trainB.setTextTrainServerColor(item.showColor);
|
|
break;
|
|
case 'trainWindowBorder':
|
|
this.trainB && this.trainB.setBodyBoxShape('stroke', item.showColor);
|
|
break;
|
|
default:
|
|
this.trainB && this.trainB.setTextTrainTargetColor(item.showColor);
|
|
}
|
|
return true;
|
|
}
|
|
});
|
|
if (this.style.Train.trainStatusStyle.defaultDestinationColor && !flag) {
|
|
switch (this.style.Train.trainStatusStyle.destinationStatusSetText) {
|
|
case 'trainTarget':
|
|
this.trainB && this.trainB.setTextTrainTargetColor(this.style.Train.trainStatusStyle.defaultDestinationColor);
|
|
break;
|
|
case 'trainServer':
|
|
this.trainB && this.trainB.setTextTrainServerColor(this.style.Train.trainStatusStyle.defaultDestinationColor);
|
|
break;
|
|
case 'trainWindowBorder':
|
|
this.trainB && this.trainB.setBodyBoxShape('stroke', this.style.Train.trainStatusStyle.defaultDestinationColor);
|
|
break;
|
|
default:
|
|
this.trainB && this.trainB.setTextTrainTargetColor(this.style.Train.trainStatusStyle.defaultDestinationColor);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 设置运行方向状态类型
|
|
setDirectionType(right, flag) {
|
|
if (this.style.Train.trainStatusStyle.directionType.length > 0) {
|
|
this.style.Train.trainStatusStyle.directionType.forEach((item) => {
|
|
if (right === item.type) {
|
|
let lineLShow = item.lineLShow;
|
|
let arrowLShow = item.arrowLShow;
|
|
let lineRShow = item.lineRShow;
|
|
let arrowRShow = item.arrowRShow;
|
|
if (flag) {
|
|
lineLShow = !item.lineLShow;
|
|
arrowLShow = !item.arrowLShow;
|
|
lineRShow = !item.lineRShow;
|
|
arrowRShow = !item.arrowRShow;
|
|
}
|
|
this.trainL && this.trainL.setLineShow(lineLShow);
|
|
this.trainL && this.trainL.setArrowShow(arrowLShow);
|
|
this.trainR && this.trainR.setLineShow(lineRShow);
|
|
this.trainR && this.trainR.setArrowShow(arrowRShow);
|
|
return true;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
// 设置列车停止方向类型
|
|
setDirectionStopType(right) {
|
|
if (this.style.Train.trainStatusStyle.directionStopType.length > 0) {
|
|
this.style.Train.trainStatusStyle.directionStopType.forEach((item) => {
|
|
if (right === item.type) {
|
|
this.trainL && this.trainL.setLineShow(item.lineLShow);
|
|
this.trainR && this.trainR.setLineShow(item.lineRShow);
|
|
return true;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
// 设置运行状态
|
|
setRunStatus(status, flag) {
|
|
if (status) {
|
|
this.setDirectionStopType(this.model.right); // 设置运行方向状态类型
|
|
} else {
|
|
this.setDirectionType(this.model.right, flag); // 设置运行方向状态类型
|
|
}
|
|
}
|
|
// 设置运行模式
|
|
setDriveMode(status) {
|
|
if (this.style.Train.trainStatusStyle.driveModeStatus.length > 0) {
|
|
this.style.Train.trainStatusStyle.driveModeStatus.some((item) => {
|
|
if (status === item.status) {
|
|
this.trainL && this.trainL.setColor(item.trainLColor);
|
|
this.trainR && this.trainR.setColor(item.trainRColor);
|
|
return true;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// 设置扣车状态
|
|
setHoldStatus(status) {
|
|
if (status) {
|
|
this.trainB && this.trainB.setHShow(true);
|
|
} else {
|
|
this.trainB && this.trainB.setHShow(false);
|
|
}
|
|
}
|
|
|
|
// 设置跳停状态
|
|
setJumpStatus(status) {
|
|
if (status) {
|
|
this.trainB && this.trainB.setSShow(true);
|
|
} else {
|
|
this.trainB && this.trainB.setSShow(false);
|
|
}
|
|
}
|
|
|
|
// 设置车门状态类型
|
|
setDoorStatus(status) {
|
|
if (status != undefined) {
|
|
if (status) {
|
|
this.trainB && this.trainB.setDShow(false);
|
|
} else {
|
|
this.trainB && this.trainB.setDShow(true);
|
|
}
|
|
} else {
|
|
this.trainB && this.trainB.setDShow(false);
|
|
}
|
|
}
|
|
// 设置通信状态类型
|
|
setCommunicationStatus() {
|
|
if (this.style.Train.trainStatusStyle.communicationStatus.length > 0) {
|
|
this.style.Train.trainStatusStyle.communicationStatus.some((item) => {
|
|
if (status === item.status) {
|
|
this.trainB && this.trainB.setTrainColor(item.trainColor);
|
|
return true;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
// 设置报警状态
|
|
setAlarmStatus(status) {
|
|
if (status) {
|
|
this.trainB && this.trainB.setAShow(true);
|
|
} else {
|
|
this.trainB && this.trainB.setAShow(false);
|
|
}
|
|
}
|
|
setTrainTypeStatus(type) {
|
|
if (this.style.Train.trainStatusStyle.trainTypeStatus) {
|
|
this.style.Train.trainStatusStyle.trainTypeStatus.some((item) => {
|
|
if ( type === item.type) {
|
|
item.serviceNumberColor && this.trainB && this.trainB.setTextTrainServerColor(item.serviceNumberColor);
|
|
item.trainNumberColor && this.trainB && this.trainB.setTextTrainNumberColor(item.trainNumberColor);
|
|
item.trainTargetColor && this.trainB && this.trainB.setTextTrainTargetColor(item.trainTargetColor);
|
|
item.groupNumberColor && this.trainB && this.trainB.setTextTrainTargetNumberColor(item.groupNumberColor);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
// 设置状态
|
|
setState(model, object) {
|
|
if (!this.isShowShape) return;
|
|
const flag = model.trainWindowModel ? model.trainWindowModel.reversal : false;
|
|
if (model) {
|
|
this.recover();
|
|
if (this.style.Train.common.trainHeadColorChangeMode) {
|
|
this.setDriveMode(model.driveMode + model.runLevel);
|
|
} else {
|
|
this.setDriveMode(model.driveMode);
|
|
}
|
|
this.setRunStatus(model.stop, flag);
|
|
this.setCommunicationStatus(model.runLevel);
|
|
// this.setTrainTypeStatus(model.type); 配合早晚点设置
|
|
this.setDoorStatus(model.doorCloseLock);
|
|
this.setAlarmStatus(model.alarmStatus);
|
|
this.setHoldStatus(model.hold);
|
|
this.setJumpStatus(model.jump);
|
|
|
|
const style = this.style;
|
|
if (style.Section.trainPosition.display) {
|
|
this.updateSection(object);
|
|
}
|
|
}
|
|
// let points = [];
|
|
// if (model) {
|
|
// this.recover();
|
|
// this.setServerNoType(model.serverNoType); // 设置服务号状态类型
|
|
// this.setDestinationStatus(model.destinationStatus); // 设置目的地状态
|
|
// this.setRunStatus(model.runStatus, flag); // 设置运行状态
|
|
// this.setRunMode(model.runMode); // 设置运行模式
|
|
// this.setRunControlStatus(model.runControlStatus); // 设置运行控制状态类型
|
|
// this.setDoorStatus(model.doorStatus); // 设置车门状态类型
|
|
// this.setCommunicationStatus(model.communicationStatus); // 设置通信状态类型
|
|
// this.setAlarmStatus(model.alarmStatus); // 设置报警状态
|
|
// this.setTrainTypeStatus(model.type); // 根据列车类型设置列车识别号样式
|
|
// }
|
|
}
|
|
// 是否根据车身上车组号、服务号、车次号、目的地码显示情况改变列车长度
|
|
isChangeTrainWidth(model, style) {
|
|
if (!style.Train.trainBody.changeTrainWidth) { return; }
|
|
if (this.nameFormat) {
|
|
const arr = this.nameFormat.split(':');
|
|
arr.forEach(ele => {
|
|
switch (ele) {
|
|
case 'targetCode': {
|
|
this.size += (style.Train.trainNumber.targetCodePrefix || '').length;
|
|
break;
|
|
}
|
|
case 'serviceNumber': {
|
|
this.size += (style.Train.trainServer.serviceNumberPrefix || '').length;
|
|
break;
|
|
}
|
|
case 'tripNumber': {
|
|
this.size += (style.Train.trainTarget.tripNumberPrefix || '').length;
|
|
break;
|
|
}
|
|
case 'groupNumber': {
|
|
this.size += (style.Train.trainTargetNumber.groupNumberPrefix || '').length;
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
this.size = 9;
|
|
}
|
|
this.style.Train.common.trainWidth = this.size * this.fontSize * this.style.Train.common.aspectRatio + this.style.Train.common.trainWidthMoreText;
|
|
}
|
|
removeTrainDetail() {
|
|
this.trainB && this.trainB.removeTrainDetail();
|
|
}
|
|
|
|
getBoundingRect() {
|
|
const list = [this.trainB, this.trainL, this.trainR];
|
|
let rect = null;
|
|
list.forEach(elem => {
|
|
if (elem) {
|
|
const tempRect = elem.getBoundingRect();
|
|
if (tempRect.x && tempRect.y && tempRect.width && tempRect.height) {
|
|
if (rect) {
|
|
rect.union(tempRect);
|
|
} else {
|
|
rect = tempRect;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
return rect || new BoundingRect(0, 0, 0, 0);
|
|
}
|
|
createTrainBorder() {
|
|
const rect = Object.assign({}, this.getBoundingRect());
|
|
rect.x -= this.style.Train.common.trainWidth / 2;
|
|
rect.y -= 5;
|
|
rect.width += this.style.Train.common.trainWidth;
|
|
rect.height += 10;
|
|
|
|
this.trainBorder = new Rect({
|
|
zlevel: this.zlevel,
|
|
z: this.z,
|
|
silent: true,
|
|
shape: rect,
|
|
style: {
|
|
lineDash: [3, 3],
|
|
stroke: this.style.borderColor,
|
|
fill: this.style.transparentColor
|
|
}
|
|
});
|
|
|
|
this.add(this.trainBorder);
|
|
}
|
|
setShowMode() {}
|
|
initShowStation(model) {
|
|
if (model.trainWindowModel && model.trainWindowModel.instance && !model.trainWindowModel.instance.isShowShape) {
|
|
this.eachChild(item => {
|
|
item.hide();
|
|
});
|
|
}
|
|
}
|
|
setShowStation(stationCode) {
|
|
if ((this.model.sectionModel && this.model.sectionModel.stationCode === stationCode) || !stationCode ) {
|
|
this.eachChild(item => {
|
|
item.show();
|
|
});
|
|
this.isShowShape = true;
|
|
this.nextPointIndex = 1;
|
|
this.currentAdd = 0;
|
|
this.setState(this.model, this);
|
|
} else {
|
|
this.eachChild(item => {
|
|
item.hide();
|
|
});
|
|
this.isShowShape = false;
|
|
}
|
|
}
|
|
}
|