983 lines
42 KiB
JavaScript
983 lines
42 KiB
JavaScript
import Group from 'zrender/src/container/Group';
|
||
import ETextName from '../element/ETextName'; // 名称文字 (共有)
|
||
import ERelease from './ERelease'; // 线段 (共有)
|
||
import ELimitLines from './ELimitLines'; // 区段限速 (私有)
|
||
import ELines from './ELines'; // 创建多线条 曲线 (私有)
|
||
import EblockLines from './EblockLines'; // 区段封锁特有
|
||
import ESeparator from './ESeparator'; // 分隔符 (私有)
|
||
import EMouse from './EMouse';
|
||
import EAxle from './EAxle'; // 创建计轴
|
||
import { EBackArrow, EBackArrowTriangle } from './EBackArrow'; // 折返进路箭头
|
||
import ELimitName from './ELimitName'; // 成都三号线 限速名称
|
||
import JTriangle from '../../utils/JTriangle';
|
||
import { drawSectionStyle } from '../../config/defaultStyle';
|
||
import store from '@/store/index_APP_TARGET';
|
||
import Vue from 'vue';
|
||
|
||
/** 区段*/
|
||
export default class Section extends Group {
|
||
constructor(model, style) {
|
||
super();
|
||
this._code = model.code;
|
||
this._type = model._type;
|
||
this.zlevel = model.zlevel;
|
||
this.z = 5 + parseInt(model.layer || 0);
|
||
this.model = model;
|
||
this.style = style;
|
||
this.selected = false; // 绘图选中状态
|
||
this.selectedType = ''; // 绘图批量选中状态
|
||
this.isShowShape = true;
|
||
this.create();
|
||
this.createMouseEvent();
|
||
this.setState(model);
|
||
}
|
||
|
||
create() {
|
||
// 区段type 01计轴区段；02逻辑区段；03道岔区段 04道岔计轴区段
|
||
this.createSectionText(); // 创建区段文字
|
||
this.createSection(); // 创建区段
|
||
this.creatRelease(); // 创建延时释放
|
||
this.createSeparator(); // 创建分隔符
|
||
this.createTurnBack(); // 创建成都三号线 折返箭头
|
||
this.createAxlex(); // 创建计轴 （西安二号线）
|
||
this.createReleaseText(); // 创建延迟解锁计时
|
||
}
|
||
// 创建计轴
|
||
createAxlex() {
|
||
if (this.style.Section.axle.show) {
|
||
const length = this.model.points.length;
|
||
const traingleStart = new JTriangle(this.model.points[0], this.model.points[1]);
|
||
const traingleEnd = new JTriangle(this.model.points[length - 2], this.model.points[length - 1]);
|
||
if (this.model.leftAxlePosition) {
|
||
const leftPoint = {x:this.model.points[0].x, y: this.model.points[0].y};
|
||
if (this.model.leftAxleOffset) {
|
||
leftPoint.x = leftPoint.x + this.model.leftAxleOffset.x || 0;
|
||
leftPoint.y = leftPoint.y + this.model.leftAxleOffset.y || 0;
|
||
}
|
||
this.leftAxle = new EAxle({
|
||
_subType: 'leftAxle',
|
||
zlevel: this.zlevel,
|
||
z: this.z,
|
||
shape: {
|
||
style: this.style,
|
||
traingle: traingleStart,
|
||
drictx: 1,
|
||
dricty: this.model.leftAxlePosition === 1 || this.model.leftAxlePosition === 2 ? 1 : -1,
|
||
isSpecial: this.model.leftAxlePosition === -2 || this.model.leftAxlePosition === 2,
|
||
point: leftPoint,
|
||
difference: this.model.points[0].y - this.model.points[1].y,
|
||
multiple: 1
|
||
},
|
||
style: {
|
||
lineWidth: this.style.Section.axle.lineWidth,
|
||
fill: this.style.Section.axle.color,
|
||
stroke: this.style.Section.axle.color
|
||
}
|
||
});
|
||
this.add(this.leftAxle);
|
||
}
|
||
if (this.model.rightAxlePosition) {
|
||
const rightPoint = {x:this.model.points[length - 1].x, y: this.model.points[length - 1].y};
|
||
if (this.model.rightAxleOffset) {
|
||
rightPoint.x = rightPoint.x + this.model.rightAxleOffset.x || 0;
|
||
rightPoint.y = rightPoint.y + this.model.rightAxleOffset.y || 0;
|
||
}
|
||
this.rightAxle = new EAxle({
|
||
_subType: 'rightAxle',
|
||
zlevel: this.zlevel,
|
||
z: this.z,
|
||
shape: {
|
||
style: this.style,
|
||
traingle: traingleEnd,
|
||
drictx: -1,
|
||
dricty: this.model.rightAxlePosition === 1 || this.model.rightAxlePosition === 2 ? 1 : -1,
|
||
isSpecial: this.model.rightAxlePosition === -2 || this.model.rightAxlePosition === 2,
|
||
point: rightPoint,
|
||
difference: this.model.points[length - 2].y - this.model.points[length - 1].y,
|
||
multiple1: -1
|
||
},
|
||
style: {
|
||
lineWidth: this.style.Section.axle.lineWidth,
|
||
fill: this.style.Section.axle.color,
|
||
stroke: this.style.Section.axle.color
|
||
}
|
||
});
|
||
this.add(this.rightAxle);
|
||
}
|
||
}
|
||
}
|
||
// 创建区段名称
|
||
createSectionText() {
|
||
const model = this.model;
|
||
const style = this.style;
|
||
|
||
if (model && style) {
|
||
// 计算区段坐标位置
|
||
const x = Math.min(model.points[0].x, model.points[model.points.length - 1].x) + Math.abs(model.points[model.points.length - 1].x - model.points[0].x) / 2;
|
||
const y = Math.min(model.points[0].y, model.points[model.points.length - 1].y) + Math.abs(model.points[model.points.length - 1].y - model.points[0].y) / 2;
|
||
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
|
||
const drict = model.trainPosType != '01' ? 1 : -1;
|
||
if (model.type == '01') { // 物理区段名称
|
||
const opposite = style.Section.text.opposite ? -1 : 1;
|
||
const tempx = x + traingle.getSin(style.Section.text.distance);
|
||
const tempy = y + traingle.getCos(style.Section.text.distance) * (style.Section.text.position || opposite * drict);
|
||
this.name = new ETextName({
|
||
zlevel: this.zlevel,
|
||
z: this.z + 2,
|
||
style: this.style,
|
||
silent: false,
|
||
x: tempx + model.namePosition.x,
|
||
y: tempy + model.namePosition.y,
|
||
fontWeight: style.Section.text.fontWeight,
|
||
fontSize: style.Section.text.fontSize,
|
||
fontFamily: style.fontFamily,
|
||
text: model.name,
|
||
textFill: style.Section.text.fontColor,
|
||
textAlign: style.Section.text.textAlign,
|
||
textPosition: style.Section.text.textPosition,
|
||
textVerticalAlign: style.Section.text.textVerticalAlign
|
||
});
|
||
this.add(this.name);
|
||
model.nameShow && style.Section.text.show ? this.name.show() : this.name.hide();
|
||
} else if (model.type == '02') { // 逻辑区段
|
||
const opposite = style.Section.logicText.opposite ? -1 : 1;
|
||
const tempx = x + traingle.getSin(style.Section.logicText.distance);
|
||
const tempy = y + traingle.getCos(style.Section.logicText.distance) * (style.Section.logicText.position || opposite * drict);
|
||
this.name = new ETextName({
|
||
zlevel: this.zlevel,
|
||
z: this.z + 2,
|
||
style: this.style,
|
||
silent: false,
|
||
x: tempx + model.namePosition.x,
|
||
y: tempy + model.namePosition.y,
|
||
fontWeight: style.Section.logicText.fontWeight,
|
||
fontSize: style.Section.logicText.fontSize,
|
||
fontFamily: style.fontFamily,
|
||
text: model.name,
|
||
textFill: style.Section.logicText.fontColor,
|
||
textAlign: style.Section.logicText.textAlign,
|
||
textPosition: style.Section.logicText.textPosition,
|
||
textVerticalAlign: style.Section.logicText.textVerticalAlign
|
||
});
|
||
this.add(this.name);
|
||
model.nameShow && style.Section.logicText.show ? this.name.show() : this.name.hide();
|
||
} else if (model.type == '04') { // 道岔计轴区段
|
||
this.name = new ETextName({
|
||
zlevel: this.zlevel,
|
||
z: this.z + 2,
|
||
style: this.style,
|
||
silent: false,
|
||
x: x + model.namePosition.x,
|
||
y: y + model.namePosition.y + style.Section.text.distance * drict,
|
||
fontWeight: style.Section.text.fontWeight,
|
||
fontSize: style.Section.text.fontSize,
|
||
fontFamily: style.fontFamily,
|
||
text: model.name,
|
||
textFill: style.Section.text.fontColor,
|
||
textAlign: style.Section.text.textAlign,
|
||
textPosition: style.Section.text.textPosition,
|
||
textVerticalAlign: style.Section.text.textVerticalAlign
|
||
});
|
||
this.add(this.name);
|
||
model.nameShow ? this.name.show() : this.name.hide();
|
||
}
|
||
|
||
/** 站台轨名称*/
|
||
if (model.standTrack) {
|
||
const opposite = style.Section.standText.opposite ? -1 : 1;
|
||
const tempx = x + traingle.getSin(style.Section.standText.distance);
|
||
const tempy = y + traingle.getCos(style.Section.standText.distance) * (style.Section.standText.position || opposite * drict);
|
||
this.standTrackText = new ETextName({
|
||
zlevel: this.zlevel,
|
||
z: this.z + 2,
|
||
silent: false,
|
||
x: tempx + model.standTrackNamePosition.x,
|
||
y: tempy + model.standTrackNamePosition.y,
|
||
fontWeight: style.Section.standText.fontWeight,
|
||
fontSize: style.Section.standText.fontSize,
|
||
fontFamily: style.fontFamily,
|
||
text: model.standTrackName,
|
||
textFill: style.Section.standText.fontColor,
|
||
textAlign: style.Section.standText.textAlign,
|
||
textPosition: style.Section.standText.textPosition,
|
||
textVerticalAlign: style.Section.standText.textVerticalAlign
|
||
});
|
||
this.add(this.standTrackText);
|
||
model.standTrackNameShow && style.Section.standText.show ? this.standTrackText.show() : this.standTrackText.hide();
|
||
}
|
||
|
||
/** 折返轨名称*/
|
||
if (model.reentryTrack) {
|
||
const opposite = style.Section.reentryText.opposite ? -1 : 1;
|
||
const tempx = x + traingle.getSin(style.Section.reentryText.distance);
|
||
const tempy = y + traingle.getCos(style.Section.reentryText.distance) * (style.Section.reentryText.position || opposite * drict);
|
||
this.reentryTrackText = new ETextName({
|
||
zlevel: this.zlevel,
|
||
z: this.z + 2,
|
||
silent: false,
|
||
x: tempx + model.reentryTrackNamePosition.x,
|
||
y: tempy + model.reentryTrackNamePosition.y,
|
||
fontWeight: style.Section.reentryText.fontWeight,
|
||
fontSize: style.Section.reentryText.fontSize,
|
||
fontFamily: style.fontFamily,
|
||
text: model.reentryTrackName,
|
||
textFill: style.Section.reentryText.fontColor,
|
||
textAlign: style.Section.reentryText.textAlign,
|
||
textPosition: style.Section.reentryText.textPosition,
|
||
textVerticalAlign: style.Section.reentryText.textVerticalAlign
|
||
});
|
||
this.add(this.reentryTrackText);
|
||
model.reentryTrackNameShow && style.Section.reentryText.show ? this.reentryTrackText.show() : this.reentryTrackText.hide();
|
||
}
|
||
|
||
/** 转换轨名称*/
|
||
if (model.transferTrack) {
|
||
const opposite = style.Section.transferText.opposite ? -1 : 1;
|
||
const tempx = x + traingle.getSin(style.Section.transferText.distance);
|
||
const tempy = y + traingle.getCos(style.Section.transferText.distance) * (style.Section.transferText.position || opposite * drict);
|
||
this.transferTrackText = new ETextName({
|
||
zlevel: this.zlevel,
|
||
z: this.z + 2,
|
||
silent: false,
|
||
x: tempx + model.transferTrackNamePosition.x,
|
||
y: tempy + model.transferTrackNamePosition.y,
|
||
fontWeight: style.Section.transferText.fontWeight,
|
||
fontSize: style.Section.transferText.fontSize,
|
||
fontFamily: style.fontFamily,
|
||
text: model.transferTrackName,
|
||
textFill: style.Section.transferText.fontColor,
|
||
textAlign: style.Section.transferText.textAlign,
|
||
textPosition: style.Section.transferText.textPosition,
|
||
textVerticalAlign: style.Section.transferText.textVerticalAlign
|
||
});
|
||
this.add(this.transferTrackText);
|
||
model.transferTrackNameShow && style.Section.transferText.show ? this.transferTrackText.show() : this.transferTrackText.hide();
|
||
}
|
||
|
||
/** 目的码名称*/
|
||
if (model.destinationCode) {
|
||
const opposite = style.Section.destinationText.opposite ? -1 : 1;
|
||
let tempx = x + traingle.getSin(style.Section.destinationText.distance);
|
||
let tempy = y + traingle.getCos(style.Section.destinationText.distance) * (style.Section.destinationText.position || opposite * drict);
|
||
if (!tempx || !tempy) {
|
||
tempx = 0;
|
||
tempy = 0;
|
||
}
|
||
this.destinationText = new ETextName({
|
||
zlevel: this.zlevel,
|
||
z: this.z + 2,
|
||
silent: false,
|
||
x: tempx + model.destinationCodePoint.x,
|
||
y: tempy + model.destinationCodePoint.y,
|
||
fontWeight: style.Section.destinationText.fontWeight,
|
||
fontSize: style.Section.destinationText.fontSize,
|
||
fontFamily: style.fontFamily,
|
||
text: model.destinationCode,
|
||
textFill: style.Section.destinationText.fontColor,
|
||
textAlign: style.Section.destinationText.textAlign,
|
||
textPosition: style.Section.destinationText.textPosition,
|
||
textVerticalAlign: style.Section.destinationText.textVerticalAlign
|
||
});
|
||
this.add(this.destinationText);
|
||
model.destinationNameShow && style.Section.destinationText.show ? this.destinationText.show() : this.destinationText.hide();
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
/** 创建区段*/
|
||
createSection() {
|
||
const model = this.model;
|
||
const style = this.style;
|
||
// 创建区段 model.logicSectionCodeList 为空 或 0 表明没有逻辑区段 创建 否则过滤
|
||
if ((model.type == '01' && (!model.logicSectionCodeList || !model.logicSectionCodeList.length)) || model.type == '02' || model.type == '03') {
|
||
this.section = new ELines({
|
||
zlevel: this.zlevel,
|
||
z: model.type == '02' ? this.z + 1 : this.z, // 逻辑区段会覆盖物理区段
|
||
isSwitchSection: model.switchSection,
|
||
isCurve: model.curve,
|
||
points: model.type == '04' ? [model.namePosition, model.namePosition] : model.points,
|
||
style: style
|
||
});
|
||
this.add(this.section);
|
||
if (this.style.Section.block.special) { // 创建哈尔滨特殊区段（用作封锁显示）
|
||
this.sectionBlock = new EblockLines({
|
||
zlevel: this.zlevel,
|
||
z: this.z + 2,
|
||
isSwitchSection: model.switchSection,
|
||
isCurve: model.curve,
|
||
points: model.points,
|
||
style: style
|
||
});
|
||
this.add(this.sectionBlock);
|
||
}
|
||
|
||
if (this.style.Section.line.isActiveShow) { // 哈尔滨线路点击背景色
|
||
this.lineBorder = new ELines({
|
||
zlevel: this.zlevel,
|
||
z: this.z - 1,
|
||
isSwitchSection: model.switchSection,
|
||
isCurve: model.curve,
|
||
points: model.type == '04' ? [model.namePosition, model.namePosition] : model.points,
|
||
style: style
|
||
});
|
||
this.add(this.lineBorder);
|
||
this.lineBorder.setStyle({ lineWidth: 0 });
|
||
}
|
||
}
|
||
}
|
||
|
||
// 折返箭头
|
||
createTurnBack() {
|
||
const model = this.model;
|
||
const style = this.style;
|
||
if (model.reentryTrack && style.Section.shuttleBack) {
|
||
const radius = 3;
|
||
model.drict = 1; // 箭头朝向 (是折返轨加一个方向选择) 目前在区段右边
|
||
const width = style.Section.line.width * 2;
|
||
const height = style.Section.line.width * 1;
|
||
const turnBackDistance = style.Section.shuttleBack.distance + radius * 4;
|
||
|
||
const points = model.points;
|
||
let x = -model.drict * width * 1.2;
|
||
let y = -turnBackDistance;
|
||
|
||
if (model.drict < 0) {
|
||
x += points[0].x;
|
||
y += points[0].y;
|
||
} else {
|
||
x += points[points.length - 1].x;
|
||
y += points[points.length - 1].y;
|
||
}
|
||
|
||
this.turnBack = new EBackArrow({
|
||
zlevel: this.zlevel,
|
||
z: this.z + 10,
|
||
shape: {
|
||
drict: model.drict,
|
||
width: width,
|
||
height: height,
|
||
points: {
|
||
x: x,
|
||
y: y
|
||
}
|
||
},
|
||
style: {
|
||
lineWidth: style.Section.separator.width,
|
||
stroke: style.Section.separator.color,
|
||
fill: 'rgba(0, 0, 0, 0)'
|
||
}
|
||
});
|
||
this.turnBackriangle = new EBackArrowTriangle({
|
||
zlevel: this.zlevel,
|
||
z: this.z + 10,
|
||
shape: {
|
||
drict: model.drict,
|
||
width: width,
|
||
height: height,
|
||
points: {
|
||
x: x,
|
||
y: y
|
||
}
|
||
},
|
||
style: {
|
||
lineWidth: style.Section.separator.width,
|
||
stroke: style.Section.separator.color,
|
||
fill: style.Section.separator.color
|
||
}
|
||
});
|
||
this.add(this.turnBack);
|
||
this.add(this.turnBackriangle);
|
||
this.turnBack.hide();
|
||
this.turnBackriangle.hide();
|
||
}
|
||
}
|
||
|
||
// 创建延时释放
|
||
creatRelease() {
|
||
const model = this.model;
|
||
const style = this.style;
|
||
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
|
||
if ((model.type == '01' && (!model.logicSectionCodeList || !model.logicSectionCodeList.length)) || model.type == '02' || model.type == '03') {
|
||
this.release = new ERelease({
|
||
zlevel: this.zlevel,
|
||
z: this.z,
|
||
shape: {
|
||
x1: model.points[0].x + traingle.getCos(traingle.absz / 3),
|
||
y1: model.points[0].y + traingle.getSin(traingle.absz / 3),
|
||
x2: model.points[0].x + traingle.getCos(traingle.absz / 3 * 2),
|
||
y2: model.points[0].y + traingle.getSin(traingle.absz / 3 * 2)
|
||
},
|
||
lineWidth: style.Section.line.width,
|
||
stroke: style.Section.line.spareColor
|
||
});
|
||
|
||
this.add(this.release);
|
||
}
|
||
}
|
||
|
||
// 创建限速线
|
||
creatSpeedLimit() {
|
||
const model = this.model;
|
||
const style = this.style;
|
||
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
|
||
let x = traingle.drictx * (style.Section.speedLimit.distance) * traingle.getSinRate();
|
||
let y = traingle.dricty * (style.Section.speedLimit.distance) * traingle.getCosRate();
|
||
if (x == Infinity) { x = 0; }
|
||
if (y == Infinity) { y = 0; }
|
||
if (!this.speedLimitLeft && !this.speedLimitRight) {
|
||
this.speedLimitLeft = new ELimitLines({
|
||
zlevel: this.zlevel,
|
||
z: this.z,
|
||
position: [x, -y],
|
||
style: style,
|
||
switch: model.switch,
|
||
code: model.code,
|
||
isSwitchSection: model.switchSection,
|
||
relSwitchCode: model.relSwitchCode,
|
||
isCurve: model.curve, // 是否曲线
|
||
points: model.points
|
||
});
|
||
this.speedLimitRight = new ELimitLines({
|
||
zlevel: this.zlevel,
|
||
z: this.z,
|
||
position: [-x, y],
|
||
style: style,
|
||
switch: model.switch,
|
||
code: model.code,
|
||
isSwitchSection: model.switchSection,
|
||
relSwitchCode: model.relSwitchCode,
|
||
isCurve: model.curve, // 是否曲线
|
||
points: model.points
|
||
});
|
||
if (style.Section.speedLimit.nameShow) {
|
||
// 开头 起点位置
|
||
this.speedLimitNameLeft = new ELimitName({
|
||
zlevel: this.zlevel,
|
||
z: this.z + 10,
|
||
drict: -1,
|
||
x: model.points[0].x,
|
||
y: model.points[0].y - 15,
|
||
style: style
|
||
});
|
||
// 终点位置
|
||
this.speedLimitNameRight = new ELimitName({
|
||
zlevel: this.zlevel,
|
||
z: this.z + 10,
|
||
drict: 1,
|
||
x: model.points[model.points.length - 1].x,
|
||
y: model.points[model.points.length - 1].y - 15,
|
||
style: style
|
||
});
|
||
this.add(this.speedLimitNameLeft);
|
||
this.add(this.speedLimitNameRight);
|
||
}
|
||
}
|
||
this.add(this.speedLimitLeft);
|
||
this.add(this.speedLimitRight);
|
||
}
|
||
|
||
// 创建分隔符
|
||
createSeparator() {
|
||
const model = this.model;
|
||
const style = this.style;
|
||
let traingle = null;
|
||
|
||
if (model && style && model.points && model.points.length > 1) {
|
||
/** 创建左侧分隔符*/
|
||
traingle = new JTriangle(model.points[0], model.points[1]);
|
||
this.lPartition = new ESeparator({
|
||
style: style,
|
||
zlevel: this.zlevel,
|
||
z: this.z + 3,
|
||
traingle: traingle,
|
||
point: {
|
||
x: model.points[0].x,
|
||
y: model.points[0].y
|
||
},
|
||
sepType: model.sepTypeLeft,
|
||
drict: -1 // 方向
|
||
});
|
||
|
||
/** 创建右侧分隔符*/
|
||
traingle = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]);
|
||
this.rPartition = new ESeparator({
|
||
style: style,
|
||
zlevel: this.zlevel,
|
||
z: this.z + 3,
|
||
traingle: traingle,
|
||
point: {
|
||
x: model.points[model.points.length - 1].x,
|
||
y: model.points[model.points.length - 1].y
|
||
},
|
||
sepType: model.sepTypeRight,
|
||
drict: 1 // 方向
|
||
});
|
||
|
||
/** 添加视图*/
|
||
this.add(this.lPartition);
|
||
this.add(this.rPartition);
|
||
}
|
||
}
|
||
|
||
// 创建延迟解锁计时
|
||
createReleaseText() {
|
||
const model = this.model;
|
||
const style = this.style;
|
||
this.releaseName = new ETextName({
|
||
zlevel: this.zlevel,
|
||
z: this.z + 2,
|
||
style: this.style,
|
||
silent: false,
|
||
x: model.points[0].x + 10,
|
||
y: model.points[0].y - style.Section.line.width * 2,
|
||
fontWeight: style.Section.text.fontWeight,
|
||
fontSize: style.Section.text.fontSize,
|
||
fontFamily: style.fontFamily,
|
||
text: '30',
|
||
textFill: style.Section.text.fontColor,
|
||
textAlign: style.Section.text.textAlign,
|
||
textPosition: style.Section.text.textPosition,
|
||
textVerticalAlign: style.Section.text.textVerticalAlign
|
||
});
|
||
this.add(this.releaseName);
|
||
}
|
||
|
||
/** 设置区段恢复默认状态*/
|
||
recover() {
|
||
if (this.section) {
|
||
this.section.stopAnimation(true);
|
||
this.sectionBlock && this.sectionBlock.hide(); // 因此特殊区段
|
||
this.section.setStyle({
|
||
stroke: this.style.Section.line.spareColor,
|
||
lineWidth: this.style.Section.line.width
|
||
});
|
||
this.release && this.release.hide();
|
||
if (this.speedLimitLeft && this.speedLimitRight) {
|
||
this.remove(this.speedLimitLeft);
|
||
this.remove(this.speedLimitRight);
|
||
}
|
||
}
|
||
this.releaseName && this.releaseName.hide();
|
||
if (this.leftAxle) {
|
||
this.leftAxle.setStyle({
|
||
stroke: this.style.Section.line.spareColor,
|
||
fill: this.style.Section.line.spareColor
|
||
});
|
||
}
|
||
if (this.rightAxle) {
|
||
this.rightAxle.setStyle({
|
||
stroke: this.style.Section.line.spareColor,
|
||
fill: this.style.Section.line.spareColor
|
||
});
|
||
}
|
||
}
|
||
|
||
/** 未定义状态 00*/
|
||
undefine() {
|
||
if (this.section) {
|
||
this.section.setStyle({
|
||
stroke: this.style.Section.line.undefinedColor,
|
||
lineWidth: this.style.Section.line.width
|
||
});
|
||
}
|
||
}
|
||
|
||
/** 空闲状态 01*/
|
||
spare() {
|
||
if (this.section) {
|
||
this.section.setStyle({
|
||
stroke: this.style.Section.line.spareColor,
|
||
lineWidth: this.style.Section.line.width
|
||
});
|
||
}
|
||
}
|
||
|
||
/** 通信车占用状态 02*/
|
||
communicationOccupied() {
|
||
if (this.section) {
|
||
this.section.setStyle({
|
||
stroke: this.style.Section.line.communicationOccupiedColor,
|
||
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||
});
|
||
}
|
||
if (this.leftAxle) {
|
||
this.leftAxle.setStyle({
|
||
stroke: this.style.Section.line.communicationOccupiedColor,
|
||
fill:this.style.Section.line.communicationOccupiedColor
|
||
});
|
||
}
|
||
if (this.rightAxle) {
|
||
this.rightAxle.setStyle({
|
||
stroke: this.style.Section.line.communicationOccupiedColor,
|
||
fill:this.style.Section.line.communicationOccupiedColor
|
||
});
|
||
}
|
||
}
|
||
|
||
/** 非通信车占用状态 03*/
|
||
unCommunicationOccupied() {
|
||
if (this.section) {
|
||
this.section.setStyle({
|
||
stroke: this.style.Section.line.unCommunicationOccupiedColor,
|
||
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||
});
|
||
}
|
||
if (this.leftAxle) {
|
||
this.leftAxle.setStyle({
|
||
stroke: this.style.Section.line.unCommunicationOccupiedColor,
|
||
fill:this.style.Section.line.unCommunicationOccupiedColor
|
||
});
|
||
}
|
||
if (this.rightAxle) {
|
||
this.rightAxle.setStyle({
|
||
stroke: this.style.Section.line.unCommunicationOccupiedColor,
|
||
fill:this.style.Section.line.unCommunicationOccupiedColor
|
||
});
|
||
}
|
||
}
|
||
/** ARB故障 */
|
||
invalid() {
|
||
this.section && this.section.setStyle({
|
||
stroke: this.style.Section.line.invalidColor,
|
||
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||
});
|
||
}
|
||
/** 进路锁闭 04*/
|
||
routeLock() {
|
||
if (this.section) {
|
||
this.section.setStyle({
|
||
stroke: this.style.Section.line.routeLockColor,
|
||
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||
});
|
||
}
|
||
}
|
||
|
||
/** 封锁 06*/
|
||
block() {
|
||
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
|
||
});
|
||
}
|
||
if (this.style.Section.block.blockGlint && this.section) {
|
||
this.section.animateStyle(true, [
|
||
{ time: 1000, styles: { stroke: this.style.backgroundColor } },
|
||
{ time: 2000, styles: { stroke: this.style.Section.line.blockColor } }
|
||
]);
|
||
}
|
||
}
|
||
|
||
/** 故障锁闭 05*/
|
||
faultLock() {
|
||
if (this.section) {
|
||
this.section.setStyle({
|
||
stroke: this.style.Section.line.faultLockColor,
|
||
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||
});
|
||
}
|
||
}
|
||
|
||
/** atc切除状态 07*/
|
||
atcExcision() {
|
||
if (this.section) {
|
||
this.section.setStyle({
|
||
stroke: this.style.Section.line.atcExcisionColor,
|
||
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||
});
|
||
}
|
||
}
|
||
|
||
/** ats切除状态 08*/
|
||
atsExcision() {
|
||
if (this.section) {
|
||
this.atcExcision();
|
||
this.section.animateStyle(true, [
|
||
{ time: 1000, styles: { stroke: this.style.backgroundColor } },
|
||
{ time: 2000, styles: { stroke: this.style.Section.line.atsExcisionColor, lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth } }
|
||
]);
|
||
}
|
||
}
|
||
|
||
/** 保护区段锁闭 09*/
|
||
protectiveLock() {
|
||
if (this.section) {
|
||
this.section.setStyle({
|
||
stroke: this.style.Section.line.protectiveLockColor,
|
||
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||
});
|
||
}
|
||
// this.protectiveTimeRelease();
|
||
}
|
||
|
||
/** 延时释放*/
|
||
async timeRelease() {
|
||
this.section.setStyle({
|
||
stroke: this.style.Section.line.routeLockColor,
|
||
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||
});
|
||
|
||
if (this.release) {
|
||
this.release.show();
|
||
this.release.setStyle({
|
||
stroke: this.style.Section.line.routeLockColor,
|
||
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||
});
|
||
this.release.animateStyle(true, [
|
||
{ time: 1000, styles: { stroke: this.style.Section.line.routeLockColor } },
|
||
{ time: 2000, styles: { stroke: this.style.Section.line.timeReleaseColor } }
|
||
]);
|
||
}
|
||
}
|
||
|
||
/** 保护区段延时解锁 时间计时*/
|
||
protectiveTimeRelease() {
|
||
// console.log(this.model);
|
||
// this.releaseName.setStyle('text', '20');
|
||
// this.section.setStyle({
|
||
// stroke: this.style.Section.line.protectiveLockColor,
|
||
// lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||
// });
|
||
// this.release && this.release.show();
|
||
// this.release && this.release.setStyle({
|
||
// stroke: this.style.Section.line.protectiveLockColor,
|
||
// lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||
// });
|
||
// this.release && this.release.animateStyle(true, [
|
||
// { time: 1000, styles: { stroke: this.style.Section.line.protectiveLockColor } },
|
||
// { time: 2000, styles: { stroke: this.style.Section.line.protectiveTimeReleaseColor } }
|
||
// ]);
|
||
}
|
||
|
||
/** 区段切除*/
|
||
sectionCutOff() {
|
||
const lineWidth = this.style.Section.line.width + (this.model.status != '01' ? this.style.Section.line.beyondWidth : 0);
|
||
if (this.section) {
|
||
this.section.animateStyle(true, [
|
||
{ time: 0, styles: { lineWidth: lineWidth } },
|
||
{ time: 1000, styles: { stroke: this.style.backgroundColor } },
|
||
{ time: 2000, styles: { lineWidth: lineWidth } }
|
||
]);
|
||
}
|
||
}
|
||
|
||
/** 设置限速*/
|
||
setSpeedUpperLimit() {
|
||
if (this.section) {
|
||
this.creatSpeedLimit();
|
||
}
|
||
}
|
||
|
||
/** 计轴预复位 12*/
|
||
axleReset() {
|
||
if (this.release) {
|
||
this.release.show();
|
||
this.release && this.release.setStyle({
|
||
stroke: this.style.Section.axle.resetColor,
|
||
fill: 'green'
|
||
});
|
||
}
|
||
}
|
||
|
||
/** 计轴失效 13*/
|
||
alxeFailure() {
|
||
if (this.section) {
|
||
this.section.setStyle({
|
||
stroke: this.style.Section.axle.Failure,
|
||
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||
});
|
||
}
|
||
}
|
||
|
||
showRemainTime(number) { // 区段延时保护倒计时显示
|
||
this.releaseName && this.releaseName.show();
|
||
// this.releaseName && this.releaseName.setStyle({ text: number });
|
||
let pointX = this.model.points[0].x + 45;
|
||
let pointY = this.model.points[0].y;
|
||
if (!this.model.timeRight) {
|
||
pointX = this.model.points[this.model.points.length - 1].x - 45;
|
||
pointY = this.model.points[this.model.points.length - 1].y;
|
||
}
|
||
this.releaseName && this.releaseName.attr({
|
||
style: {
|
||
text: number
|
||
},
|
||
shape: {
|
||
x: pointX,
|
||
y: pointY - this.style.Section.line.width * 2
|
||
}
|
||
});
|
||
}
|
||
|
||
/** 设置状态*/
|
||
setState(model, flag = false) {
|
||
if (!this.isShowShape) return;
|
||
this.recover();
|
||
// 哈尔滨线路 道岔相关区段设置 默认颜色
|
||
if (this.style.Switch.sectionAction.flag && model.relSwitchCode && !flag) {
|
||
const switchModel = Vue.prototype.$jlmap.mapDevice[model.relSwitchCode];
|
||
if (switchModel.normalPosition != 0) { // 定位情况
|
||
const sectionC = Vue.prototype.$jlmap.mapDevice[switchModel.sectionCCode];
|
||
sectionC && sectionC.instance && sectionC.instance.section.setStyle({ stroke: this.style.Switch.sectionAction.spareColor });
|
||
const sectionB = Vue.prototype.$jlmap.mapDevice[switchModel.sectionBCode];
|
||
sectionB && sectionB.instance && sectionB.instance.setState(sectionB, true);
|
||
} else if (switchModel.normalPosition == 0) { // 反位情况
|
||
const sectionB = Vue.prototype.$jlmap.mapDevice[switchModel.sectionBCode];
|
||
sectionB && sectionB.instance && sectionB.instance.section.setStyle({ stroke: this.style.Switch.sectionAction.spareColor });
|
||
const sectionC = Vue.prototype.$jlmap.mapDevice[switchModel.sectionCCode];
|
||
sectionC && sectionC.instance && sectionC.instance.setState(sectionC, true);
|
||
}
|
||
}
|
||
// 顺序代表优先级
|
||
/** 道岔保护区段锁闭 */
|
||
model.overlapLock && this.protectiveLock();
|
||
/** 空闲锁闭或者叫进路锁闭 */
|
||
model.routeLock && this.routeLock();
|
||
/** 轨道封锁 */
|
||
model.invalid && this.invalid();
|
||
/** 计轴故障 */
|
||
model.blockade && this.block();
|
||
/** 非通信车占用状态 */
|
||
model.nctOccupied && this.unCommunicationOccupied();
|
||
/** 通信车占用状态 */
|
||
model.ctOccupied && this.communicationOccupied();
|
||
/** 区段切除*/
|
||
model.cutOff && this.sectionCutOff();
|
||
/** 是否限速*/
|
||
model.speedUpLimit > 0 && this.setSpeedUpperLimit();
|
||
// 区段计轴预复位状态 (未处理)
|
||
// 区段故障锁闭
|
||
model.fault && this.faultLock();
|
||
// 区段延时保护倒计时显示
|
||
// model.remainTime = 10;
|
||
model.remainTime && this.showRemainTime(model.remainTime);
|
||
/** 道岔区段更新岔心颜色 */
|
||
if (model.type === '03' && model.switch) {
|
||
const sectionSwitch = store.getters['map/getDeviceByCode'](model.switch.code);
|
||
if (sectionSwitch && sectionSwitch.sectionACode === model.code) {
|
||
sectionSwitch.instance && sectionSwitch.instance.setState(sectionSwitch);
|
||
}
|
||
}
|
||
}
|
||
|
||
/** 计算提示位置*/
|
||
getShapeTipPoint() {
|
||
let rect = this.getBoundingRect();
|
||
const distance = this.style.Section.line.width / 2;
|
||
if (this.section) {
|
||
rect = this.section.getBoundingRect();
|
||
// if (this.model.type !== '02' && this.model.nameShow) {
|
||
// if (this.model.trainPosType == '01') {
|
||
// distance = distance + this.style.Section.text.distance + this.style.Section.text.fontSize;
|
||
// }
|
||
// }
|
||
}
|
||
return {
|
||
x: rect.x + rect.width / 2,
|
||
y: rect.y + rect.height / 2.7 - distance
|
||
};
|
||
}
|
||
|
||
getBoundingRect() {
|
||
if (this.section) {
|
||
// if (this.model.code == 'T197' || this.model.code == 'T189') {
|
||
// console.log(this.section.getBoundingRect().clone(), this.model, this.model.name);
|
||
// }
|
||
return this.section.getBoundingRect().clone();
|
||
} else if (this.name) {
|
||
return this.name.getBoundingRect().clone();
|
||
}
|
||
}
|
||
|
||
createMouseEvent() { // 鼠标事件
|
||
if (this.style.Section.mouseOverStyle) {
|
||
this.mouseEvent = new EMouse(this, this.model.relSwitchCode);
|
||
this.add(this.mouseEvent);
|
||
this.on('mouseout', (e) => { this.mouseEvent.mouseout(e); });
|
||
this.on('mouseover', (e) => { this.mouseEvent.mouseover(e); });
|
||
}
|
||
const path = window.location.href;
|
||
if (path.includes('/map/draw')) {
|
||
this.on('mouseout', () => {
|
||
!this.selectedType && !this.selected && this.section && this.section.setStyle({ stroke: this.style.Section.line.spareColor, lineWidth: this.style.Section.line.width });
|
||
});
|
||
this.on('mouseover', () => {
|
||
!this.selectedType && this.section && this.section.setStyle({ stroke: '#fbfbfb', lineWidth: this.style.Section.line.width - 0.2 });
|
||
});
|
||
}
|
||
}
|
||
|
||
drawSelected(selected) {
|
||
this.selected = selected;
|
||
if (selected) {
|
||
if (this.style.Section.line.isActiveShow) { // 哈尔滨线路专属显示
|
||
this.lineBorder && this.lineBorder.setStyle({ lineWidth: this.style.Section.line.width + 3 });
|
||
} else {
|
||
!this.selectedType && this.section && this.section.setStyle({ stroke: '#fbfbfb' });
|
||
}
|
||
} else {
|
||
this.lineBorder && this.lineBorder.setStyle({ lineWidth: 0 });
|
||
!this.selectedType && this.setState(this.model);
|
||
}
|
||
}
|
||
drawBatchSelected(selected, type) {
|
||
if (this.selectedType === type) {
|
||
return;
|
||
}
|
||
if (selected && type) {
|
||
this.section && this.section.setStyle({ stroke: drawSectionStyle[type] });
|
||
} else {
|
||
this.section && this.section.setStyle({ stroke: this.style.Section.line.spareColor });
|
||
}
|
||
this.selectedType = type;
|
||
}
|
||
|
||
mouseout() {
|
||
this.drawSelected(false);
|
||
}
|
||
|
||
mouseover() {
|
||
this.section && this.section.setStyle({ stroke: 'rgba(255,255,255,0.8)' });
|
||
}
|
||
setShowMode() { }
|
||
setShowStation(stationCode) {
|
||
if (!stationCode || this.model.stationCode === stationCode) {
|
||
this.eachChild(item => {
|
||
item.show();
|
||
});
|
||
this.isShowShape = true;
|
||
if (this.name) {
|
||
if (this.model.type == '01') {
|
||
this.model.nameShow && this.style.Section.text.show ? this.name.show() : this.name.hide();
|
||
} else if (this.model.type == '02') {
|
||
this.model.nameShow && this.style.Section.logicText.show ? this.name.show() : this.name.hide();
|
||
} else if (this.model.type == '04') {
|
||
this.model.nameShow ? this.name.show() : this.name.hide();
|
||
}
|
||
}
|
||
if (this.transferTrackText) {
|
||
this.model.transferTrackNameShow && this.style.Section.transferText.show ? this.transferTrackText.show() : this.transferTrackText.hide();
|
||
}
|
||
if (this.standTrackText) {
|
||
this.model.standTrackNameShow && this.style.Section.standText.show ? this.standTrackText.show() : this.standTrackText.hide();
|
||
}
|
||
if (this.destinationText) {
|
||
this.model.destinationNameShow && this.style.Section.destinationText.show ? this.destinationText.show() : this.destinationText.hide();
|
||
}
|
||
if (this.reentryTrackText) {
|
||
this.model.reentryTrackNameShow && this.style.Section.reentryText.show ? this.reentryTrackText.show() : this.reentryTrackText.hide();
|
||
}
|
||
|
||
this.setState(this.model);
|
||
} else {
|
||
this.eachChild(item => {
|
||
item.hide();
|
||
});
|
||
this.isShowShape = false;
|
||
}
|
||
}
|
||
}
|