2019-11-29 12:51:58 +08:00
|
|
|
/*
|
|
|
|
* 车站
|
|
|
|
*/
|
|
|
|
import Group from 'zrender/src/container/Group';
|
2019-12-04 11:32:30 +08:00
|
|
|
import ETextName from '../element/ETextName';
|
2019-12-04 18:39:28 +08:00
|
|
|
import EControl from '../element/EControl';
|
2019-12-05 10:25:07 +08:00
|
|
|
import EMouse from './EMouse';
|
2019-12-05 10:19:41 +08:00
|
|
|
import ESingleControl from './ESingleControl';
|
|
|
|
import EArrow from './EArrow';
|
|
|
|
import { arrow } from '../utils/ShapePoints';
|
2020-03-05 14:33:08 +08:00
|
|
|
import Rect from 'zrender/src/graphic/shape/Rect';
|
2019-12-18 09:49:44 +08:00
|
|
|
import BoundingRect from 'zrender/src/core/BoundingRect';
|
2020-03-17 17:59:47 +08:00
|
|
|
// import {isShowThePrdType} from '../../utils/handlePath';
|
2020-04-13 17:12:33 +08:00
|
|
|
import Text from 'zrender/src/graphic/Text';
|
2019-11-29 12:51:58 +08:00
|
|
|
|
|
|
|
export default class Station extends Group {
|
2019-12-04 11:32:30 +08:00
|
|
|
constructor(model, style) {
|
|
|
|
super();
|
|
|
|
this._code = model.code;
|
|
|
|
this._type = model._type;
|
|
|
|
this.zlevel = model.zlevel;
|
|
|
|
this.z = 40;
|
|
|
|
this.model = model;
|
|
|
|
this.style = style;
|
2020-03-13 13:01:58 +08:00
|
|
|
this.isShowShape = true;
|
2019-12-04 11:32:30 +08:00
|
|
|
this.create();
|
2019-12-05 10:25:07 +08:00
|
|
|
this.createTurnBack(); // 创建按图折返
|
2019-12-05 10:19:41 +08:00
|
|
|
this.createControlMode();
|
2019-12-04 11:32:30 +08:00
|
|
|
this.setState(model);
|
2019-12-05 10:25:07 +08:00
|
|
|
this.checkIsDrawMap();
|
2019-12-04 11:32:30 +08:00
|
|
|
}
|
2019-11-29 12:51:58 +08:00
|
|
|
|
2019-12-04 11:32:30 +08:00
|
|
|
create() {
|
|
|
|
const model = this.model;
|
|
|
|
const style = this.style;
|
2019-11-29 12:51:58 +08:00
|
|
|
|
2019-12-04 11:32:30 +08:00
|
|
|
if (model.visible) {
|
|
|
|
// 公里标名称是否显示
|
|
|
|
this.stationText = new ETextName({
|
|
|
|
zlevel: this.zlevel,
|
|
|
|
z: this.z,
|
|
|
|
x: model.position.x,
|
|
|
|
y: model.position.y,
|
|
|
|
fontWeight: model.fontWeight,
|
|
|
|
fontSize: model.nameFont || 18,
|
|
|
|
fontFamily: style.fontFamily,
|
2019-12-13 14:58:28 +08:00
|
|
|
text: model.number ? model.number + model.name : model.name,
|
2019-12-04 11:32:30 +08:00
|
|
|
textAlign: 'middle',
|
|
|
|
textVerticalAlign: 'top',
|
|
|
|
textFill: model.nameFontColor
|
|
|
|
});
|
|
|
|
this.add(this.stationText);
|
2020-02-03 17:26:17 +08:00
|
|
|
if (style.Station.text.borderShow) {
|
|
|
|
this.stationText.setStyle('textPadding', [2, 6]);
|
|
|
|
this.stationText.setStyle('textBorderColor', model.nameFontColor);
|
|
|
|
this.stationText.setStyle('textBorderWidth', 1);
|
|
|
|
}
|
2019-12-04 11:32:30 +08:00
|
|
|
const path = window.location.href;
|
|
|
|
if (style.Station.kmPostShow || path.includes('/map/draw')) {
|
|
|
|
// 公里标是否显示
|
|
|
|
let direction = 1;
|
|
|
|
if (this.style.Station.kilometerPosition == 'up') {
|
|
|
|
direction = -1;
|
|
|
|
}
|
2019-12-12 18:15:25 +08:00
|
|
|
const offset = { x: 0, y: 0 };
|
|
|
|
if (model.kilometerPosition) {
|
|
|
|
offset.x = model.kilometerPosition.x;
|
|
|
|
offset.y = model.kilometerPosition.y;
|
|
|
|
}
|
2019-12-04 11:32:30 +08:00
|
|
|
this.mileageText = new ETextName({
|
|
|
|
zlevel: this.zlevel,
|
|
|
|
z: this.z,
|
|
|
|
position: [0, 0],
|
2019-12-12 18:15:25 +08:00
|
|
|
x: model.position.x + offset.x,
|
|
|
|
y: model.position.y + ((parseInt(model.nameFont) + 2) * direction) + offset.y,
|
2019-12-04 11:32:30 +08:00
|
|
|
fontWeight: model.fontWeight,
|
|
|
|
fontSize: model.kmPostFont || 18,
|
|
|
|
fontFamily: style.fontFamily,
|
|
|
|
text: model.kmPost,
|
|
|
|
textAlign: 'middle',
|
|
|
|
textVerticalAlign: 'top',
|
|
|
|
textFill: model.kmPostFontColor
|
|
|
|
});
|
|
|
|
this.add(this.mileageText);
|
2020-04-15 14:19:22 +08:00
|
|
|
model.kmPostShow ? this.mileageText.show() : this.mileageText.hide();
|
2019-12-04 11:32:30 +08:00
|
|
|
}
|
2020-02-03 17:17:56 +08:00
|
|
|
if (model.subheadDisplay) { // 副标题
|
2019-12-13 16:13:10 +08:00
|
|
|
this.subheadText = new ETextName({
|
|
|
|
zlevel: this.zlevel,
|
|
|
|
z: this.z,
|
|
|
|
x: model.subheadPosition.x,
|
|
|
|
y: model.subheadPosition.y,
|
|
|
|
fontWeight: model.fontWeight,
|
|
|
|
fontSize: model.subheadFont || 18,
|
|
|
|
fontFamily: style.fontFamily,
|
|
|
|
text: model.subhead,
|
|
|
|
textAlign: 'middle',
|
|
|
|
textVerticalAlign: 'top',
|
|
|
|
textFill: model.subheadFontColor
|
|
|
|
});
|
|
|
|
this.add(this.subheadText);
|
2020-02-04 15:43:58 +08:00
|
|
|
if (style.Station.text.borderShow) {
|
|
|
|
this.subheadText.setStyle('textPadding', [2, 6]);
|
|
|
|
this.subheadText.setStyle('textBorderColor', model.nameFontColor);
|
|
|
|
this.subheadText.setStyle('textBorderWidth', 1);
|
|
|
|
}
|
2019-12-13 16:13:10 +08:00
|
|
|
}
|
2019-12-04 11:32:30 +08:00
|
|
|
}
|
|
|
|
}
|
2019-12-04 18:39:28 +08:00
|
|
|
createTurnBack() { // 创建按图折返
|
2019-12-04 14:59:04 +08:00
|
|
|
const model = this.model;
|
|
|
|
const style = this.style;
|
2019-12-18 13:05:29 +08:00
|
|
|
if (model.visible && model.createTurnBack) {
|
2019-12-05 10:25:07 +08:00
|
|
|
this.turnBacks = [];
|
2019-12-06 10:31:19 +08:00
|
|
|
for (let index = 0; index < style.Station.turnBack.lamp; index++) {
|
2019-12-05 10:25:07 +08:00
|
|
|
const turnBack = new EControl({
|
|
|
|
zlevel: this.zlevel,
|
|
|
|
z: this.z,
|
|
|
|
arc: {
|
|
|
|
shape: {
|
2019-12-06 10:31:19 +08:00
|
|
|
cx: model.turnBackPoint.x + style.Station.turnBack.lampSpace * index,
|
|
|
|
cy: model.turnBackPoint.y,
|
2019-12-05 10:25:07 +08:00
|
|
|
r: style.Station.lamp.radiusR
|
|
|
|
},
|
|
|
|
lineWidth: 0,
|
|
|
|
fill: style.Station.lamp.controlColor
|
2019-12-04 18:39:28 +08:00
|
|
|
},
|
2019-12-05 10:25:07 +08:00
|
|
|
text: {
|
|
|
|
position: [0, 0],
|
2019-12-06 10:31:19 +08:00
|
|
|
x: model.turnBackPoint.x + style.Station.turnBack.lampSpace * index,
|
2019-12-19 10:08:12 +08:00
|
|
|
y: model.turnBackPoint.y + style.Station.lamp.radiusR + style.Station.StationControl.text.distance,
|
2019-12-05 10:25:07 +08:00
|
|
|
fontWeight: style.Station.text.fontWeight,
|
|
|
|
fontSize: style.Station.text.fontSize,
|
|
|
|
fontFamily: style.fontFamily,
|
|
|
|
text: '按图折返',
|
|
|
|
textFill: '#fff',
|
|
|
|
textAlign: 'middle',
|
|
|
|
textVerticalAlign: 'top'
|
|
|
|
},
|
|
|
|
style: this.style
|
|
|
|
});
|
|
|
|
this.turnBacks.push(turnBack);
|
2019-12-06 10:31:19 +08:00
|
|
|
}
|
2019-12-05 10:25:07 +08:00
|
|
|
this.turnBacks.forEach(lamp => { this.add(lamp); });
|
2019-12-04 14:59:04 +08:00
|
|
|
}
|
|
|
|
}
|
2019-12-05 10:19:41 +08:00
|
|
|
// 创建控制模式
|
|
|
|
createControlMode() {
|
|
|
|
const model = this.model;
|
2019-12-18 13:05:29 +08:00
|
|
|
if (model.visible && model.createControlMode) {
|
2019-12-05 10:19:41 +08:00
|
|
|
// 紧急站控
|
2019-12-05 10:52:45 +08:00
|
|
|
if (this.style.Station.StationControl.lamp.emergencyControlShow) {
|
2019-12-05 10:19:41 +08:00
|
|
|
this.emergencyControl = new ESingleControl({
|
|
|
|
_subType: 'emergency',
|
|
|
|
style: this.style,
|
|
|
|
zlevel: this.zlevel,
|
|
|
|
z: this.z,
|
|
|
|
point: {
|
2019-12-05 10:52:45 +08:00
|
|
|
x: model.controlModePoint.x - this.style.Station.StationControl.lamp.distance * 3 / 2 + this.style.Station.StationControl.lamp.offset.x,
|
|
|
|
y: model.controlModePoint.y + this.style.Station.StationControl.lamp.offset.y
|
2019-12-05 10:19:41 +08:00
|
|
|
},
|
2019-12-05 10:52:45 +08:00
|
|
|
context: this.style.Station.StationControl.text.emergencyControlText,
|
2019-12-05 10:19:41 +08:00
|
|
|
pop: false
|
|
|
|
});
|
|
|
|
this.add(this.emergencyControl);
|
|
|
|
}
|
|
|
|
// 中控按钮
|
2019-12-05 10:52:45 +08:00
|
|
|
if (this.style.Station.StationControl.lamp.centerControlShow) {
|
2019-12-05 10:19:41 +08:00
|
|
|
this.centerControl = new ESingleControl({
|
|
|
|
_subType: 'center',
|
|
|
|
style: this.style,
|
|
|
|
zlevel: this.zlevel,
|
|
|
|
z: this.z,
|
|
|
|
point: {
|
2019-12-05 10:52:45 +08:00
|
|
|
x: model.controlModePoint.x - this.style.Station.StationControl.lamp.distance / 2 + this.style.Station.StationControl.lamp.offset.x,
|
|
|
|
y: model.controlModePoint.y + this.style.Station.StationControl.lamp.offset.y
|
2019-12-05 10:19:41 +08:00
|
|
|
},
|
2019-12-05 10:52:45 +08:00
|
|
|
context: this.style.Station.StationControl.text.centerControlText,
|
2019-12-05 10:19:41 +08:00
|
|
|
pop: false
|
|
|
|
});
|
|
|
|
this.add(this.centerControl);
|
|
|
|
}
|
|
|
|
// 站控按钮
|
2019-12-05 10:52:45 +08:00
|
|
|
if (this.style.Station.StationControl.lamp.substationControlShow) {
|
2019-12-05 10:19:41 +08:00
|
|
|
this.substationControl = new ESingleControl({
|
|
|
|
_subType: 'substation',
|
|
|
|
style: this.style,
|
|
|
|
zlevel: this.zlevel,
|
|
|
|
z: this.z,
|
|
|
|
point: {
|
2019-12-05 10:52:45 +08:00
|
|
|
x: model.controlModePoint.x + this.style.Station.StationControl.lamp.distance / 2 + this.style.Station.StationControl.lamp.offset.x,
|
|
|
|
y: model.controlModePoint.y + this.style.Station.StationControl.lamp.offset.y
|
2019-12-05 10:19:41 +08:00
|
|
|
},
|
2019-12-05 10:52:45 +08:00
|
|
|
context: this.style.Station.StationControl.text.substationControlText,
|
2019-12-05 10:19:41 +08:00
|
|
|
pop: false
|
|
|
|
});
|
|
|
|
this.add(this.substationControl);
|
|
|
|
}
|
|
|
|
// 联锁控
|
2019-12-05 10:52:45 +08:00
|
|
|
if (this.style.Station.StationControl.lamp.interconnectedControlShow) {
|
2019-12-05 10:19:41 +08:00
|
|
|
this.interconnectedControl = new ESingleControl({
|
|
|
|
_subType: 'interconnected',
|
|
|
|
style: this.style,
|
|
|
|
zlevel: this.zlevel,
|
|
|
|
z: this.z,
|
|
|
|
point: {
|
2019-12-05 10:52:45 +08:00
|
|
|
x: model.controlModePoint.x + this.style.Station.StationControl.lamp.distance * 3 / 2 + this.style.Station.StationControl.lamp.offset.x,
|
|
|
|
y: model.controlModePoint.y + this.style.Station.StationControl.lamp.offset.y
|
2019-12-05 10:19:41 +08:00
|
|
|
},
|
2020-02-03 17:17:56 +08:00
|
|
|
context: this.style.Station.StationControl.text.interconnectedControlText || '联锁控',
|
2019-12-05 10:19:41 +08:00
|
|
|
pop: false
|
|
|
|
});
|
|
|
|
this.add(this.interconnectedControl);
|
|
|
|
}
|
|
|
|
// 箭头
|
2019-12-05 10:52:45 +08:00
|
|
|
if (this.style.Station.StationControl.arrow.show) {
|
|
|
|
const point = arrow(this.model.controlModePoint.x, this.model.controlModePoint.y + this.style.Station.StationControl.lamp.radiusR / 2, this.style.Station.StationControl.lamp.distance / 6, this.style.Station.StationControl.lamp.radiusR * 0.8);
|
2019-12-05 10:19:41 +08:00
|
|
|
this.arrowsControl = new EArrow({
|
|
|
|
zlevel: this.zlevel,
|
|
|
|
z: this.z,
|
|
|
|
style: this.style,
|
|
|
|
count: this.count,
|
|
|
|
drict: 1,
|
|
|
|
point: point,
|
2019-12-05 10:52:45 +08:00
|
|
|
x: model.controlModePoint.x + this.style.Station.StationControl.lamp.offset.x,
|
|
|
|
y: model.controlModePoint.y + this.style.Station.StationControl.lamp.radiusR / 2 + this.style.Station.StationControl.lamp.offset.y,
|
|
|
|
fill: this.style.Station.StationControl.lamp.grayColor,
|
2019-12-05 10:19:41 +08:00
|
|
|
lineWidth: 1,
|
|
|
|
stroke: this.style.sidelineColor
|
|
|
|
});
|
|
|
|
this.add(this.arrowsControl);
|
|
|
|
}
|
2020-01-08 14:59:27 +08:00
|
|
|
// 中控按钮
|
|
|
|
if (this.style.Station.StationControl.lamp.centerControlButtonShow) {
|
|
|
|
this.centerControlButton = new ESingleControl({
|
|
|
|
_subType: 'button',
|
|
|
|
style: this.style,
|
|
|
|
zlevel: this.zlevel,
|
|
|
|
z: this.z,
|
|
|
|
point: {
|
|
|
|
x: model.controlModePoint.x - this.style.Station.StationControl.lamp.distance * 3 / -2 + this.style.Station.StationControl.lamp.offset.x,
|
|
|
|
y: model.controlModePoint.y + this.style.Station.StationControl.lamp.offset.y
|
|
|
|
},
|
|
|
|
context: this.style.Station.StationControl.text.centerControlButton,
|
|
|
|
pop: false
|
|
|
|
});
|
|
|
|
this.add(this.centerControlButton);
|
2020-03-05 14:33:08 +08:00
|
|
|
const arcRect = this.centerControlButton.getArcBoundingRect();
|
|
|
|
this.arcBorder = new Rect({
|
|
|
|
zlevel: this.zlevel,
|
|
|
|
z: this.z,
|
|
|
|
silent: true,
|
|
|
|
shape: arcRect,
|
|
|
|
style: {
|
|
|
|
lineDash: null,
|
|
|
|
stroke: this.style.Station.StationControl.lamp.stroke,
|
|
|
|
fill: this.style.Station.StationControl.lamp.fill
|
|
|
|
}
|
|
|
|
});
|
|
|
|
this.add(this.arcBorder);
|
2020-01-08 14:59:27 +08:00
|
|
|
}
|
2019-12-05 10:19:41 +08:00
|
|
|
|
|
|
|
}
|
|
|
|
this.setState(model);
|
|
|
|
}
|
|
|
|
|
2020-03-23 13:48:35 +08:00
|
|
|
handleCenter() { // 中控
|
|
|
|
this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.grayColor);
|
|
|
|
this.substationControl && this.substationControl.setColor(this.style.Station.StationControl.lamp.grayColor);
|
|
|
|
this.centerControl && this.centerControl.setColor(this.style.Station.StationControl.lamp.greenColor);
|
|
|
|
}
|
|
|
|
|
|
|
|
handleLocal() { // 站控
|
|
|
|
this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.grayColor);
|
|
|
|
this.substationControl && this.substationControl.setColor(this.style.Station.StationControl.lamp.yellowColor);
|
|
|
|
this.centerControl && this.centerControl.setColor(this.style.Station.StationControl.lamp.grayColor);
|
|
|
|
}
|
|
|
|
|
|
|
|
handleEmergency() { // 紧急站控
|
|
|
|
this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.redColor);
|
|
|
|
this.substationControl && this.substationControl.setColor(this.style.Station.StationControl.lamp.grayColor);
|
|
|
|
this.centerControl && this.centerControl.setColor(this.style.Station.StationControl.lamp.grayColor);
|
|
|
|
}
|
|
|
|
|
|
|
|
recover() {
|
|
|
|
this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.grayColor);
|
|
|
|
this.substationControl && this.substationControl.setColor(this.style.Station.StationControl.lamp.grayColor);
|
|
|
|
this.centerControl && this.centerControl.setColor(this.style.Station.StationControl.lamp.grayColor);
|
|
|
|
}
|
|
|
|
|
2019-12-05 10:19:41 +08:00
|
|
|
// 设置状态
|
2019-12-04 11:32:30 +08:00
|
|
|
setState(model) {
|
2020-03-13 13:01:58 +08:00
|
|
|
if (!this.isShowShape) return;
|
2020-03-23 13:48:35 +08:00
|
|
|
this.recover();
|
|
|
|
model.controlMode && this['handle' + model.controlMode]();
|
2019-12-04 11:32:30 +08:00
|
|
|
}
|
2019-11-29 12:51:58 +08:00
|
|
|
|
2020-04-07 13:09:34 +08:00
|
|
|
getShapeTipPoint(opts) {
|
|
|
|
let rect;
|
|
|
|
if (opts.subDeviceType === 'button') {
|
|
|
|
rect = this.centerControlButton.getArcBoundingRect();
|
|
|
|
} else {
|
|
|
|
rect = this.stationText.getBoundingRect();
|
|
|
|
}
|
|
|
|
return {
|
|
|
|
x: rect.x + rect.width,
|
|
|
|
y: rect.y
|
|
|
|
};
|
2019-12-04 11:32:30 +08:00
|
|
|
}
|
2019-12-17 09:13:57 +08:00
|
|
|
|
2019-12-18 09:49:44 +08:00
|
|
|
getBoundingRect() {
|
|
|
|
if (this.model.visible) {
|
2019-12-18 16:20:30 +08:00
|
|
|
const rect = this.stationText.getBoundingRect().clone();
|
|
|
|
if (this.model.subheadDisplay) {
|
2020-01-07 14:49:51 +08:00
|
|
|
const subheadText = this.subheadText.getBoundingRect().clone();
|
2019-12-18 16:20:30 +08:00
|
|
|
rect.union(subheadText);
|
|
|
|
return rect;
|
|
|
|
} else {
|
|
|
|
return rect;
|
|
|
|
}
|
2019-12-18 09:49:44 +08:00
|
|
|
} else {
|
|
|
|
return new BoundingRect(0, 0, 0, 0);
|
|
|
|
}
|
|
|
|
}
|
2019-12-17 09:13:57 +08:00
|
|
|
|
2019-12-04 11:32:30 +08:00
|
|
|
drawSelected(selected) {
|
2019-12-05 10:25:07 +08:00
|
|
|
this.EMouse && this.EMouse.drawSelected(selected);
|
2019-12-04 11:32:30 +08:00
|
|
|
}
|
|
|
|
|
2019-12-05 10:25:07 +08:00
|
|
|
checkIsDrawMap() {
|
|
|
|
const path = window.location.href;
|
|
|
|
if (path.includes('/map/draw')) {
|
|
|
|
this.EMouse = new EMouse(this);
|
|
|
|
this.add(this.EMouse);
|
|
|
|
this.on('mouseout', () => { this.EMouse.mouseout(); });
|
|
|
|
this.on('mouseover', () => { this.EMouse.mouseover(); });
|
|
|
|
}
|
|
|
|
}
|
2020-03-18 10:31:23 +08:00
|
|
|
setShowMode() {
|
|
|
|
}
|
2020-03-13 13:01:58 +08:00
|
|
|
setShowStation(flag) {
|
|
|
|
if (flag) {
|
|
|
|
this.eachChild(item => {
|
|
|
|
item.show();
|
|
|
|
});
|
|
|
|
this.isShowShape = true;
|
|
|
|
this.setState(this.model);
|
|
|
|
} else {
|
|
|
|
this.eachChild(item => {
|
|
|
|
item.hide();
|
|
|
|
});
|
|
|
|
this.isShowShape = false;
|
|
|
|
}
|
|
|
|
}
|
2019-11-29 12:51:58 +08:00
|
|
|
}
|