/* * 车站 */ import Group from 'zrender/src/container/Group'; import ETextName from '../element/ETextName'; import EControl from '../element/EControl'; import EMouse from './EMouse'; import ESingleControl from './ESingleControl'; import EArrow from './EArrow'; import { arrow } from '../utils/ShapePoints'; import Rect from 'zrender/src/graphic/shape/Rect'; // import BoundingRect from 'zrender/src/core/BoundingRect'; // import {isShowThePrdType} from '../../utils/handlePath'; import Text from 'zrender/src/graphic/Text'; import store from '@/store/index_APP_TARGET'; import Vue from 'vue'; export default class Station extends Group { 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; this.isShowShape = true; this.create(); this.createTurnBack(); // 创建按图折返 this.createControlMode(); this.setState(model); this.checkIsDrawMap(); } create() { const model = this.model; const style = this.style; // 公里标名称是否显示 this.stationText = new ETextName({ zlevel: this.zlevel, z: this.z, x: model.position.x, y: model.position.y, fontWeight: style.Station.text.fontWeight, fontSize: isNaN(Number(model.nameFont)) ? 20 : Number(model.nameFont), fontFamily: style.fontFamily, text: model.number ? model.number + model.name : model.name, textAlign: 'middle', textVerticalAlign: 'top', textFill: model.nameFontColor }); this.add(this.stationText); if (style.Station.text.borderShow) { this.stationText.setStyle('textPadding', [2, 6]); this.stationText.setStyle('textBorderColor', model.nameFontColor); this.stationText.setStyle('textBorderWidth', 1); } const path = window.location.href; if (style.Station.kmPostShow || path.includes('/map/draw')) { // 公里标是否显示 let direction = 1; if (this.style.Station.kilometerPosition == 'up') { direction = -1; } const offset = { x: 0, y: 0 }; if (model.kilometerPosition) { offset.x = model.kilometerPosition.x; offset.y = model.kilometerPosition.y; } this.mileageText = new ETextName({ zlevel: this.zlevel, z: this.z, position: [0, 0], x: model.position.x + offset.x, y: model.position.y + ((parseInt(model.nameFont) + 2) * direction) + offset.y, fontWeight: model.fontWeight, fontSize: model.kmPostFont || 18, fontFamily: style.fontFamily, text: model.kmPost, textAlign: 'middle', textVerticalAlign: 'top', textFill: model.kmPostFontColor }); this.add(this.mileageText); model.kmPostShow ? this.mileageText.show() : this.mileageText.hide(); } if (model.subheadDisplay) { // 副标题 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); if (style.Station.text.borderShow) { this.subheadText.setStyle('textPadding', [2, 6]); this.subheadText.setStyle('textBorderColor', model.nameFontColor); this.subheadText.setStyle('textBorderWidth', 1); } } if (!model.visible) { // 隐藏车站 this.subheadText && this.subheadText.setStyle('textFill', 'rgba(0,0,0,0)'); this.mileageText && this.mileageText.setStyle('textFill', 'rgba(0,0,0,0)'); this.stationText && this.stationText.setStyle('textFill', 'rgba(0,0,0,0)'); } } createTurnBack() { // 创建按图折返 const model = this.model; const style = this.style; if (model.visible && model.createTurnBack) { this.turnBacks = []; if (style.Station.turnBack.topText) { this.turnBackTopText = new Text({ zlevel: this.zlevel, z: this.z, position: [0, 0], style: { x: model.turnBackPoint.x, y: model.turnBackPoint.y - style.Station.lamp.radiusR - style.Station.turnBack.toptextDistance, fontWeight: style.Station.text.fontWeight, fontSize: style.Station.text.fontSize, fontFamily: style.fontFamily, text: model.name + '站后折返', textFill: '#fff', textAlign: 'middle', textVerticalAlign: 'top' } }); this.add(this.turnBackTopText); } for (let index = 0; index < style.Station.turnBack.lamp; index++) { const turnBack = new EControl({ zlevel: this.zlevel, z: this.z, arc: { shape: { cx: model.turnBackPoint.x + style.Station.turnBack.lampSpace * index, cy: model.turnBackPoint.y, r: style.Station.lamp.radiusR }, lineWidth: 0, lineDash: style.Station.turnBack.lineDash, fill: style.Station.lamp.controlColor }, text: { position: [0, 0], x: model.turnBackPoint.x + style.Station.turnBack.lampSpace * index, y: model.turnBackPoint.y + style.Station.lamp.radiusR + style.Station.StationControl.text.distance, fontWeight: style.Station.text.fontWeight, fontSize: style.Station.text.fontSize, fontFamily: style.fontFamily, text: style.Station.turnBack.textName || '按图折返', textFill: '#fff', textAlign: 'middle', textVerticalAlign: 'top' }, style: this.style }); this.turnBacks.push(turnBack); } this.turnBacks.forEach(lamp => { lamp.setArcBorder(style.Station.turnBack.showLampBorder); this.add(lamp); }); } } // 创建控制模式 createControlMode() { const model = this.model; if (!this.style.Station.StationControl.disPlayNone) { if (model.visible && model.createControlMode) { // 紧急站控 this.createEmergencyControl(); // 中控按钮 this.createCenterControl(); // 站控按钮 this.createSubstationControl(); // 联锁控 this.createInterconnectedControl(); } } this.setState(model); } createEmergencyControl() { // 紧急站控 const model = this.model; if (this.style.Station.StationControl.emergencyControl.show) { this.emergencyControl = new ESingleControl({ _subType: 'emergency', 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.emergencyControl.offset.x, y: model.controlModePoint.y + this.style.Station.StationControl.emergencyControl.offset.y }, context: this.style.Station.StationControl.emergencyControl.text, pop: false }); this.add(this.emergencyControl); if (this.style.Station.StationControl.emergencyControl.arrowShow) { const x = model.controlModePoint.x - this.style.Station.StationControl.lamp.distance * 2 + this.style.Station.StationControl.emergencyControl.offset.x; const y = model.controlModePoint.y + this.style.Station.StationControl.emergencyControl.offset.y; const point = arrow(x, y + this.style.Station.StationControl.lamp.radiusR / 2, this.style.Station.StationControl.lamp.distance / 6, this.style.Station.StationControl.lamp.radiusR * 0.8); this.emergencyArrowsControl = new EArrow({ zlevel: this.zlevel, z: this.z, style: this.style, count: this.count, drict: 1, point: point, 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.emergencyControl.grayColor, lineWidth: 1, stroke: this.style.sidelineColor }); this.add(this.emergencyArrowsControl); } } } createCenterControl() { // 中控按钮 const model = this.model; if (this.style.Station.StationControl.centerControl.show) { this.centerControl = new ESingleControl({ _subType: 'center', style: this.style, zlevel: this.zlevel, z: this.z, point: { x: model.controlModePoint.x - this.style.Station.StationControl.lamp.distance / 2 + this.style.Station.StationControl.centerControl.offset.x, y: model.controlModePoint.y + this.style.Station.StationControl.centerControl.offset.y }, context: this.style.Station.StationControl.centerControl.text, pop: false }); this.add(this.centerControl); if (this.style.Station.StationControl.centerControl.arrowShow) { const x = model.controlModePoint.x - this.style.Station.StationControl.lamp.distance * 3 / 2 + this.style.Station.StationControl.emergencyControl.offset.x; const y = model.controlModePoint.y + this.style.Station.StationControl.emergencyControl.offset.y; const point = arrow(x, y + this.style.Station.StationControl.lamp.radiusR / 2, this.style.Station.StationControl.lamp.distance / 6, this.style.Station.StationControl.lamp.radiusR * 0.8); this.centerArrowsControl = new EArrow({ zlevel: this.zlevel, z: this.z, style: this.style, count: this.count, drict: 1, point: point, 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.centerControl.grayColor, lineWidth: 1, stroke: this.style.sidelineColor }); this.add(this.centerArrowsControl); } } // 中控按钮 if (this.style.Station.StationControl.centerControl.buttonShow) { // 宁波一 显示 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.centerControl.buttonText, pop: false }); this.add(this.centerControlButton); 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); } } createSubstationControl() { // 站控按钮 const model = this.model; if (this.style.Station.StationControl.substationControl.show) { this.substationControl = new ESingleControl({ _subType: 'substation', style: this.style, zlevel: this.zlevel, z: this.z, point: { x: model.controlModePoint.x + this.style.Station.StationControl.lamp.distance / 2 + this.style.Station.StationControl.substationControl.offset.x, y: model.controlModePoint.y + this.style.Station.StationControl.substationControl.offset.y }, context: this.style.Station.StationControl.substationControl.text, pop: false }); this.add(this.substationControl); if (this.style.Station.StationControl.substationControl.arrowShow) { const x = this.model.controlModePoint.x + this.style.Station.StationControl.substationControl.offset.x; const y = this.model.controlModePoint.y + this.style.Station.StationControl.substationControl.offset.y; const point = arrow(x, y + this.style.Station.StationControl.lamp.radiusR / 2, this.style.Station.StationControl.lamp.distance / 6, this.style.Station.StationControl.lamp.radiusR * 0.8); this.substationArrowsControl = new EArrow({ zlevel: this.zlevel, z: this.z, style: this.style, count: this.count, drict: 1, point: point, 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.substationControl.grayColor, lineWidth: 1, stroke: this.style.sidelineColor }); this.add(this.substationArrowsControl); } } } createInterconnectedControl() { // 联锁控 const model = this.model; if (this.style.Station.StationControl.interconnectedControl.show) { // 成都三会显示 this.interconnectedControl = new ESingleControl({ _subType: 'interconnected', 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.interconnectedControl.offset.x, y: model.controlModePoint.y + this.style.Station.StationControl.interconnectedControl.offset.y }, context: this.style.Station.StationControl.interconnectedControl.text || '联锁控', pop: false }); this.add(this.interconnectedControl); } } 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); this.centerControl && this.centerControl.setTextColor(this.style.Station.StationControl.lamp.greenColor); // 文字颜色 if (this.style.Station.StationControl.disPlayNone) { this.stationText && this.stationText.setStyle('textFill', '#1fdc1f'); if (this.model.subheadDisplay) { // 副标题 this.subheadText && this.subheadText.setStyle('textFill', '#1fdc1f'); } } } handleLocal() { // 站控 this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.grayColor); this.substationControl && this.substationControl.setColor(this.style.Station.StationControl.lamp.yellowColor); this.substationControl && this.substationControl.setTextColor(this.style.Station.StationControl.lamp.yellowColor); // 文字颜色 this.centerControl && this.centerControl.setColor(this.style.Station.StationControl.lamp.grayColor); this.substationArrowsControl && this.substationArrowsControl.setColor(this.style.Station.StationControl.lamp.greenColor); if (this.style.Station.StationControl.disPlayNone) { this.stationText && this.stationText.setStyle('textFill', '#fff'); if (this.model.subheadDisplay) { // 副标题 this.subheadText && this.subheadText.setStyle('textFill', '#fff'); } } } handleEmergency() { // 紧急站控 this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.redColor); this.emergencyControl && this.emergencyControl.setTextColor(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); this.emergencyArrowsControl && this.emergencyArrowsControl.setColor(this.style.Station.StationControl.lamp.greenColor); if (this.style.Station.StationControl.disPlayNone) { this.stationText && this.stationText.setStyle('textFill', '#fff'); if (this.model.subheadDisplay) { // 副标题 this.subheadText && this.subheadText.setStyle('textFill', '#fff'); } } } handleNone() { // 空 if (this.style.Station.StationControl.disPlayNone) { // 没有控制时显示 黄色 this.stationText && this.stationText.setStyle('textFill', '#FFFF00'); if (this.model.subheadDisplay) { // 副标题 this.subheadText && this.subheadText.setStyle('textFill', '#FFFF00'); } } } recover() { this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.grayColor); this.emergencyControl && this.emergencyControl.setTextColor(this.style.Station.StationControl.text.fontColor); this.substationControl && this.substationControl.setColor(this.style.Station.StationControl.lamp.grayColor); this.substationControl && this.substationControl.setTextColor(this.style.Station.StationControl.text.fontColor); this.centerControl && this.centerControl.setColor(this.style.Station.StationControl.lamp.grayColor); this.centerControl && this.centerControl.setTextColor(this.style.Station.StationControl.text.fontColor); this.substationArrowsControl && this.substationArrowsControl.setColor(this.style.Station.StationControl.lamp.grayColor); this.emergencyArrowsControl && this.emergencyArrowsControl.setColor(this.style.Station.StationControl.lamp.grayColor); } // 设置状态 setState(model) { if (!this.isShowShape) return; this.recover(); model.controlMode && this['handle' + model.controlMode](); if (model.tbStrategyId) { store.state.map.map.tbStrategyList.forEach(item => { if (item.stationCode == model.code) { const modelData = Vue.prototype.$jlmap.mapDevice[item.code]; modelData && modelData.instance && modelData.instance.setState(modelData, model.tbStrategyId); } }); } } 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 }; } getBoundingRect() { // if (this.model.visible) { const rect = this.stationText.getBoundingRect().clone(); if (this.model.subheadDisplay) { const subheadText = this.subheadText.getBoundingRect().clone(); rect.union(subheadText); return rect; } else { return rect; } // } else { // return new BoundingRect(0, 0, 0, 0); // } } drawSelected(selected) { this.EMouse && this.EMouse.drawSelected(selected); } 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(); }); } } setShowMode() { } setShowStation(flag) { if (flag) { this.eachChild(item => { item.show(); }); if (this.mileageText) { this.model.kmPostShow ? this.mileageText.show() : this.mileageText.hide(); } this.isShowShape = true; this.setState(this.model); } else { this.eachChild(item => { item.hide(); }); this.isShowShape = false; } } }