/* * 车站 */ import Group from 'zrender/src/container/Group'; import ETextName from '../element/ETextName'; import EControl from '../element/EControl'; import EMouse from './EMouse'; import EMouseDraw from './EMouseDraw'; import ESingleControl from './ESingleControl'; import EArrow from './EArrow'; import { arrow } from '../utils/ShapePoints'; import Rect from 'zrender/src/graphic/shape/Rect'; import Text from 'zrender/src/graphic/Text'; import store from '@/store/index'; import EStationText from './EStationText'; import { traverseLineElements } from '../utils/ShapeStatusCovert'; 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.noneBeforeMode = ''; this.isShowShape = true; this.create(); this.createTurnBack(); // 创建按图折返 this.createControlMode(); this.setState(model); this.checkIsDrawMap(); this.setVisible(model.visible); } create() { const model = this.model; const style = this.style; // 站台所有的绘图元素 const elementTypeList = { 'stationText': EStationText // 车站名称 (普通站台样式) }; // 遍历当前线路下的绘图元素 组合模式 traverseLineElements(style.Station, elementTypeList, model, style, this); 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, silent: !model.visible, text: model.kmPost, textAlign: 'middle', textVerticalAlign: 'top', textFill: model.kmPostFontColor }); this.add(this.mileageText); model.kmPostShow ? this.mileageText.show() : this.mileageText.hide(); if (!model.visible) { this.mileageText.setStyle('fontSize', 0); } } // 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)'); // this.eachChild(elem => { elem.hide(); }); // } } 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 (this.style.Station.StationControl.special) { if (model.visible && model.createControlMode) { // model.createControlMode 控制模式 this.createSpecialControlMode(); } } else { if (model.visible && model.createControlMode) { // model.createControlMode 控制模式 this.createEmergencyControl(); // 紧急站控 this.createCenterControl(); // 中控按钮 this.createSubstationControl(); // 站控按钮 this.createInterconnectedControl(); // 联锁控 } } } this.setState(model); } createSpecialControlMode() { const model = this.model; this.stationControlText = new Text({ zlevel: this.zlevel, z: this.z, style: { x: model.controlModePoint.x, y: model.controlModePoint.y, fontWeight: this.style.Station.StationControl.text.fontWeight, fontSize: this.style.Station.StationControl.text.fontSize, fontFamily: this.style.fontFamily, text: 'CC', textFill: this.style.Station.StationControl.text.centerControlColor, textAlign: this.style.Station.StationControl.text.textAlign, textVerticalAlign: this.style.Station.StationControl.text.textVerticalAlign } }); this.add(this.stationControlText); } 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); } if (this.style.Station.StationControl.centerControl.lightShow) { this.controlLight = new ESingleControl({ _subType: 'light', style: this.style, zlevel: this.zlevel, z: this.z, point: { x: model.controlModePoint.x + this.style.Station.StationControl.lamp.distance * 6 / 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.lightText, pop: false }); this.add(this.controlLight); const arcRect = this.controlLight.getArcBoundingRect(); this.lightArcBorder = 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.lightArcBorder); } } 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.noneBeforeMode = 'Center'; 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.stationText.isSpecialType) { // simulationRoleList } else { this.stationText.setColor('#1fdc1f'); } this.stationControlText && this.stationControlText.setStyle({text:'CC', textFill:this.style.Station.StationControl.text.centerControlColor}); // // // 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.noneBeforeMode = 'Local'; 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); this.stationControlText && this.stationControlText.setStyle({text:'LC', textFill:this.style.Station.StationControl.text.stationControlColor}); // if (this.style.Station.StationControl.disPlayNone) { // this.stationText && this.stationText.setStyle('textFill', '#fff'); // if (this.model.subheadDisplay) { // 副标题 // this.subheadText && this.subheadText.setStyle('textFill', '#fff'); // } // } if (this.style.Station.stationText.isSpecialType) { } else { this.stationText.setColor('#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); this.stationControlText && this.stationControlText.setStyle({text:'EL', textFill:this.style.Station.StationControl.text.emergencyControlColor}); // if (this.style.Station.StationControl.disPlayNone) { // this.stationText && this.stationText.setStyle('textFill', '#fff'); // if (this.model.subheadDisplay) { // 副标题 // this.subheadText && this.subheadText.setStyle('textFill', '#fff'); // } // } if (this.style.Station.stationText.isSpecialType) { } else { this.stationText.setColor('#fff'); } } handleInterlock() { // 联锁控 成都三号线 this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.grayColor); this.emergencyControl && this.emergencyControl.setTextColor(this.style.Station.StationControl.lamp.grayColor); this.substationControl && this.substationControl.setColor(this.style.Station.StationControl.lamp.grayColor); this.substationControl && this.substationControl.setTextColor(this.style.Station.StationControl.lamp.grayColor); this.centerControl && this.centerControl.setColor(this.style.Station.StationControl.lamp.grayColor); this.centerControl && this.centerControl.setTextColor(this.style.Station.StationControl.lamp.grayColor); this.interconnectedControl && this.interconnectedControl.setColor(this.style.Station.StationControl.lamp.purpleColor); this.interconnectedControl && this.interconnectedControl.setTextColor(this.style.Station.StationControl.lamp.purpleColor); } handleNone() { // 空 if (this.style.Station.stationText.noneModeColor) { this.stationText.setColor(this.style.Station.stationText.noneModeColor); } if (this.style.Station.stationText.noneModeFlash) { this.stationText.setAnimateStyle(this.noneBeforeMode); } if (this.style.Station.stationText.isSpecialType) { this.stationText.setColor(this.style.Station.stationText.noneModeColor); } } 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.interconnectedControl && this.interconnectedControl.setColor(this.style.Station.StationControl.lamp.grayColor); this.interconnectedControl && this.interconnectedControl.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); if (this.style.Station.stationText.isSpecialType) { } else { this.stationText && this.stationText.stopAnimate(); } } // 设置状态 setState(model) { if (!this.isShowShape) return; this.recover(); model.controlMode && this['handle' + model.controlMode](); if (this.style.Station.syncCentralizeStation && model.controlMode && model.centralized) { model.chargeStationCodeList.forEach(item => { const device = store.getters['map/getDeviceByCode'](item); device.controlMode = model.controlMode; device && device.instance && device.instance.recover(); device && device.instance && device.instance['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); } }); } } // setState(model) { // if (!this.isShowShape) return; // // // 新版地图使用新版状态变更方式 // this.recover(); // // 更新状态 // const currentTypeList = this.style.Station.elemnetType; // currentTypeList.forEach(element => { // this[element].setState(model); // }); // } getShapeTipPoint(opts) { let rect; switch (opts.subDeviceType) { case 'button': rect = this.centerControlButton.getArcBoundingRect(); break; case 'center': rect = this.centerControl.getArcBoundingRect(); break; case 'substation': rect = this.substationControl.getArcBoundingRect(); break; case 'emergency': rect = this.emergencyControl.getArcBoundingRect(); break; case 'interconnected': rect = this.interconnectedControl.getArcBoundingRect(); break; default: rect = this.stationText.getBoundingRect(); break; } return { x: rect.x + rect.width, y: rect.y }; } getBoundingRect() { const rect = this.stationText.getBoundingRect().clone(); // if (this.model.subheadDisplay) { // const subheadText = this.subheadText.getBoundingRect().clone(); // rect.union(subheadText); // return rect; // } else { // return rect; // } return rect; } drawSelected(selected) { this.EMouse && this.EMouse.drawSelected(selected); } checkIsDrawMap() { const path = window.location.href; if (path.includes('/map/draw')) { this.EMouse = new EMouseDraw(this); this.add(this.EMouse); this.on('mouseout', e => { this.EMouse.mouseout(e); }); this.on('mouseover', e => { this.EMouse.mouseover(e); }); } else if (this.style.Station.StationControl.mouseOverStyle) { this.EMouse = new EMouse(this); this.add(this.EMouse); this.on('mouseout', e => { this.EMouse.mouseout(e); }); this.on('mouseover', e => { this.EMouse.mouseover(e); }); } } setShowMode() { } setShowStation(flag) { if (flag) { if (this.model.visible) { 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; } } setVisible(visible) { if (visible) { this.eachChild(elem => { elem.show(); }); } else { this.eachChild(elem => { elem.hide(); }); } } getAnchorPoint() { return this.model.position; } }