From 74bc2653d16f57afb2822a0c7cabad39ee13e5fc Mon Sep 17 00:00:00 2001 From: ival <610568032@qq.com> Date: Wed, 17 Jul 2019 18:16:52 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jmap/shape/StationStand.js | 178 ++++++----- src/jmap/shape/Switch.js | 94 +----- src/jmap/shape/Train.js | 475 +++++++++++++---------------- src/jmap/shape/TrainWindow.js | 67 +--- src/jmap/shape/element/EDetain.js | 42 +++ src/jmap/shape/element/EReentry.js | 39 +++ src/jmap/theme/bejing.js | 2 + 7 files changed, 390 insertions(+), 507 deletions(-) create mode 100644 src/jmap/shape/element/EDetain.js create mode 100644 src/jmap/shape/element/EReentry.js diff --git a/src/jmap/shape/StationStand.js b/src/jmap/shape/StationStand.js index bee6af4b8..5b65e87c5 100644 --- a/src/jmap/shape/StationStand.js +++ b/src/jmap/shape/StationStand.js @@ -1,8 +1,8 @@ /**/ import Group from 'zrender/src/container/Group'; import Text from 'zrender/src/graphic/Text'; -import Polygon from 'zrender/src/graphic/shape/Polygon'; -import { flashlight } from './libs/ShapePoints'; +import EReentry from './element/EReentry'; +import EDetain from './element/EDetain'; import ESafeDoor from './element/ESafeDoor'; import ESafeStand from './element/ESafeStand'; import ESafeEmergent from './element/ESafeEmergent'; @@ -18,109 +18,53 @@ class StationStand extends Group { this.style = style; this.doors = new Group(); this._create(); - this.setVisible(model.visible); - this.setState(state); + // this.setVisible(model.visible); + // this.setState(state); } _create() { const model = this.model; const style = this.style; const drict = model.doorLocationType == '01' ? 1 : -1; - /** 站台折返策略*/ - const beyond = 4; - const height = 5; - const width = 10; - const offsetx = (model.width - width / 2); - const offsety = (model.height + height + style.StationStand.standDistance) / 2; - - this.reentry = new Polygon({ - zlevel: this.zlevel, - z: this.z, - shape: { - points: flashlight(model.position.x, model.position.y, drict, width, height, offsetx, offsety, beyond) - }, - style: { - lineWidth: 0, - fill: style.StationStand.stationNoHumanReentryColor - } - }); - this.add(this.reentry); - - /** 站台扣车*/ - const distance = 0; - const textX = model.position.x + drict * (model.width / 2 + model.textFontSize + distance); - this.text = new Text({ - zlevel: this.zlevel, - z: this.z + 2, - position: [0, 0], - style: { - x: textX, - y: 0, - text: 'H', - textAlign: 'middle', - textVerticalAlign: 'top', - fontSize: style.StationStand.stationHeadFontSize + 'px ' + style.textFontFormat, - textFill: style.StationStand.stationCenterDetainTrainColor, - textStroke: style.StationStand.backgroundColor - } - }); - this.add(this.text); - /** 停站时间*/ - let textLevelT = [0, 0]; - if (model.doorLocationType == '02') { - textLevelT = [0, 5]; - } - const timeX = model.position.x - drict * (model.width / 2 + style.textFontSize + distance); + let timePosition = [0, 0]; + if (model.doorLocationType == '02') { timePosition = [0, 5]; } + const timeH = drict > 0 ? style.StationStand.statonSafeHeight -style.textFontSize : style.textFontSize; + const timeX = model.position.x - drict * (model.width / 2 + style.textFontSize); + const timeY = model.position.y + drict * (model.height + style.StationStand.standDistance + timeH); this.time = new Text({ zlevel: this.zlevel, - z: this.z + 2, - position: textLevelT, + z: 2, + position: timePosition, style: { x: timeX, - y: 0, + y: timeY, text: model.parkingTime, textFill: style.StationStand.stationTimeTextColor, textAlign: 'middle', textFont: style.textFontSize + 'px ' + style.textFontFormat } }); - this.add(this.time); /** 区间运行时间*/ - let textLevelP = [0, 2]; - if (model.doorLocationType == '01') { - textLevelP = [0, 15]; - } - const levelX = model.position.x - drict * (model.width / 2 + style.textFontSize + distance); + let levelPosition = [0, 2]; + if (model.doorLocationType == '01') { levelPosition = [0, 15]; } + const levelH = drict > 0 ? model.height - style.textFontSize / 1.2 : style.textFontSize / 2; + const levelX = model.position.x - drict * (model.width / 2 + style.textFontSize); + const levelY = model.position.y - drict * (model.height + style.StationStand.standDistance + levelH); this.level = new Text({ zlevel: this.zlevel, - z: this.z + 2, - position: textLevelP, + z: 2, + position: levelPosition, style: { x: levelX, - y: 0, + y: levelY, text: model.intervalRunTime, textFill: style.StationStand.stationTimeTextColor, textAlign: 'middle', textFont: style.textFontSize + 'px ' + style.textFontFormat } }); - this.add(this.level); - - /** 站台紧急关闭*/ - const emergentH = drict ? style.StationStand.standSafeHeight - style.StationStand.standDistance / 2: style.StationStand.standDistance / 2; - const emergentX = model.position.x; - const emergentY = model.position.y + drict * (style.StationStand.standDistance + emergentH); - this.emergent = new ESafeEmergent({ - zlevel: this.zlevel, - z: this.z, - style: style, - x: emergentX, - y: emergentY, - r: style.StationStand.standDistance / 2, - n: 4 - }); /** 屏蔽门*/ this.safeDoor = new ESafeDoor({ @@ -148,9 +92,63 @@ class StationStand extends Group { height: model.height }); - this.add(this.emergent); + /** 站台紧急关闭*/ + const emergentH = drict ? style.StationStand.standSafeHeight - style.StationStand.standDistance / 2: style.StationStand.standDistance / 2; + const emergentX = model.position.x; + const emergentY = model.position.y + drict * (style.StationStand.standDistance + emergentH); + this.emergent = new ESafeEmergent({ + zlevel: this.zlevel, + z: 10, + style: style, + x: emergentX, + y: emergentY, + r: style.StationStand.standDistance / 2, + n: 4 + }); + + /** 站台折返策略*/ + const beyond = 4; + const height = 5; + const width = 10; + const offsetx = (model.width - width / 2); + const offsety = (model.height + height + style.StationStand.standDistance) / 2; + this.reentry = new EReentry({ + zlevel: this.zlevel, + z: 1, + style: style, + drict: drict, + x: model.position.x, + y: model.position.y, + width: width, + height: height, + offsetx: offsetx, + offsety: offsety, + beyond: beyond, + lineWidth: 0, + fill: style.StationStand.stationNoHumanReentryColor + }); + + /** 站台扣车*/ + const detainH = model.drict > 0 ? style.StationStand.standHeadFontSize / 2 - style.StationStand.standSafeHeight: style.StationStand.standHeadFontSize / 2; + const detainX = model.position.x + drict * (model.width / 2 + style.textFontSize); + const detainY = model.position.y + drict * (model.height / 2 + style.StationStand.standDistance + detainH); + this.detain = new EDetain({ + zlevel: this.zlevel, + z: 1, + style: style, + x: detainX, + y: detainY, + textAlign: 'middle', + textVerticalAlign: 'top' + }); + + this.add(this.time); + this.add(this.level); this.add(this.safeDoor); this.add(this.safeStand); + this.add(this.emergent); + this.add(this.detain); + this.add(this.reentry); } setVisible(visible) { @@ -165,8 +163,8 @@ class StationStand extends Group { recover() { this.time.hide(); this.level.hide(); - this.text.hide(); - this.reentry.hide(); + this.detain.setVisible(false); + this.reentry.setVisible(false); this.emergent.setVisible(false); if (this.model.visible) { this.safeDoor.hasDoor(true); } this.safeDoor.setColor(this.style.StationStand.standDoorDefaultColor); @@ -204,24 +202,24 @@ class StationStand extends Group { /** 未设置扣车*/ unDetainTrain() { - this.text.hide(); + this.detain.setVisible(false); } /** 车站扣车*/ standDetainTrain() { - this.text.show(); - this.text.setStyle('textFill', this.style.StationStand.standDetainTrainTextColor); + this.detain.setVisible(true); + this.detain.setColor(this.style.StationStand.standDetainTrainTextColor); } /** 中心扣车*/ centerDetainTrain() { - this.text.show(); - this.text.setStyle('textFill', this.style.StationStand.standCenterDetainTrainColor); + this.detain.setVisible(true); + this.detain.setColor(this.style.StationStand.standCenterDetainTrainColor); } /** 中心+车站扣车*/ standAndCenterDetainTrain() { - this.text.show(); + this.detain.show(); } /** 人工设置停战时间*/ @@ -271,18 +269,18 @@ class StationStand extends Group { /** 无折返(默认)*/ noReentry() { - this.reentry.hide(); + this.reentry.setVisible(false); } /** 无人折返*/ noHumanReentry() { - this.reentry.show(); - this.reentry.setStyle('fill', this.style.StationStand.standNoHumanReentryColor); + this.reentry.setVisible(true); + this.reentry.setColor(this.style.StationStand.standNoHumanReentryColor); } /** 自动换端*/ autoChangeEnds() { - this.reentry.show(); - this.reentry.setStyle('fill', this.style.StationStand.standAutoChangeEndsColor); + this.reentry.setVisible(true); + this.reentry.setColor(this.style.StationStand.standAutoChangeEndsColor); } setState(state) { diff --git a/src/jmap/shape/Switch.js b/src/jmap/shape/Switch.js index 57487168f..f184539d8 100644 --- a/src/jmap/shape/Switch.js +++ b/src/jmap/shape/Switch.js @@ -22,20 +22,13 @@ export default class Switch extends Group { this.z = 8; this._create(); - this.on('mousedown', this.mouseclick); - this.on('mouseout', this.mouseleave); - this.on('mouseover', this.mouseenter); + this.setState(state); } _create() { - const model = this.model; - const state = this.state; - this.triangle = new JTriangle(model.intersection, model.skew); + this.triangle = new JTriangle(this.model.intersection, this.model.skew); this.createSwitch(); this.createNameText(); - this.craeteSwitchBorder(); - this.setState(state); - this.mouseStateRecover(); } /** 道岔实体，不显示，响应鼠标事件*/ @@ -182,32 +175,6 @@ export default class Switch extends Group { this.add(this.releaseBackground); } - /** 创建道岔边框*/ - craeteSwitchBorder() { - const sectionA = this.getSectionInstance(this.model.sectionACode); - const sectionB = this.getSectionInstance(this.model.sectionBCode); - const sectionC = this.getSectionInstance(this.model.sectionCCode); - const rect = this.getBoundingRect(); - - sectionA && rect.union(sectionA.getBoundingRect()); - sectionB && rect.union(sectionB.getBoundingRect()); - sectionC && rect.union(sectionC.getBoundingRect()); - - this.switchBorder = new Rect({ - zlevel: this.model.zlevel, - z: this.z, - silent: true, - shape: Object.assign({ r: 4 }, rect), - style: { - lineDash: [3, 3], - stroke: this.style.borderColor, - fill: this.style.transparentColor - } - }); - - this.add(this.switchBorder); - } - /** 道岔名称，显示，响应鼠标事件*/ createNameText() { const model = this.model; @@ -509,61 +476,4 @@ export default class Switch extends Group { } return null; } - - getSectionInstance(code) { - const device = this.jmap.getDeviceByCode(code); - if (device && device.instance) { - return device.instance; - } - } - - mouseStateVisible() { - const section = this.getSectionInstance(this.model.switchSectionCode); - section && section.setTrainWindowEventShow(true); - - this.switchBorder.show(); - this.setLossAction(false); - this.setSwitchCoreColor(this.style.borderContextBackgroundColor); - this.setTextColor(this.style.backgroundColor); - this.textRect.setStyle({ - lineWidth: 1, - stroke: this.style.borderColor, - fill: this.style.borderContextBackgroundColor - }); - } - - mouseStateRecover() { - const section = this.getSectionInstance(this.model.switchSectionCode); - section && section.setTrainWindowEventShow(false); - - this.switchBorder.hide(); - this.setSwitchCoreColor(this.style.backgroundColor); - this.textRect.setStyle({ - lineWidth: 0, - stroke: this.style.switchTextBorderColor, - fill: this.style.transparentColor - }); - this.setState(this.state); - } - - mouseclick(e) { - if ([3].includes(e.which)) { - this.selected = !this.selected; - if (this.selected) { - this.mouseStateVisible(); - } - } - } - - mouseenter(e) { - if (!this.selected) { - this.mouseStateVisible(); - } - } - - mouseleave(e) { - if (!this.selected) { - this.mouseStateRecover(); - } - } } diff --git a/src/jmap/shape/Train.js b/src/jmap/shape/Train.js index 58dc80d74..d6208bc7c 100644 --- a/src/jmap/shape/Train.js +++ b/src/jmap/shape/Train.js @@ -9,21 +9,23 @@ class TrainBody extends Group { constructor(model) { super(); this.model = model; - this._create(model); + this._create(); } - _create(model) { - const textFont = model.style.trainTextFontSize + 'px ' + model.style.textFontFormat; - const TextFontHSDA = model.style.trainHSDATextFontSize + 'px ' + model.style.textFontFormat; + _create() { + const model = this.model; + const style = this.model.style; + const textFont = style.trainTextFontSize + 'px ' + style.textFontFormat; + const TextFontHSDA = style.trainHSDATextFontSize + 'px ' + style.textFontFormat; let destinationText = ''; - switch (model.model.destinationStatus) { - case '01': destinationText = '准点'; break; - case '02': destinationText = '早点'; break; - case '03': destinationText = '严重早点'; break; - case '04': destinationText = '晚点'; break; - case '05': destinationText = '严重晚点'; break; - default: destinationText = '未知'; break; + switch (model.destinationStatus) { + case '01': destinationText = '准点'; break; + case '02': destinationText = '早点'; break; + case '03': destinationText = '严重早点'; break; + case '04': destinationText = '晚点'; break; + case '05': destinationText = '严重晚点'; break; + default: destinationText = '未知'; break; } // 文字描述 @@ -33,12 +35,12 @@ class TrainBody extends Group { style: { x: model.point.x + 50, y: model.point.y + 25, - text: `列车类型: 计划车\n表\0\0\0\0号: ${model.model.serviceNumber}\n车\0次\0号: ${model.model.tripNumber}\n目的地号: ${model.model.targetCode ? model.model.targetCode : ''}\n车\0组\0号: ${model.model.groupNumber}\n早\0晚\0点: ${destinationText}\n运行方向: ${model.model.directionType == '02' ? '上行' : '下行'}\n乘务组号: \n起点站名: \n终点站名: \n占用轨道: ${model.model.sectionModel ? model.model.sectionModel.trackName : ''}\n所在车站: \n车地通信: 正常\n运行等级: 4\n扣车状态: ${model.model.runControlStatus == '01' ? '正常' : model.model.runControlStatus == '03' ? '跳停' : '扣车'}\n停稳状态: ${model.model.runStatus == '02' ? '未停稳' : '停稳'}\n阻塞状态: 无\n列车速度: ${model.model.speed || 0} km/h\n列车移动授权距离: ${model.model.maLen || 0} m`, + text: `列车类型: 计划车\n表\0\0\0\0号: ${model.serviceNumber}\n车\0次\0号: ${model.tripNumber}\n目的地号: ${model.targetCode ? model.targetCode : ''}\n车\0组\0号: ${model.groupNumber}\n早\0晚\0点: ${destinationText}\n运行方向: ${model.directionType == '02' ? '上行' : '下行'}\n乘务组号: \n起点站名: \n终点站名: \n占用轨道: ${model.sectionModel ? model.sectionModel.trackName : ''}\n所在车站: \n车地通信: 正常\n运行等级: 4\n扣车状态: ${model.runControlStatus == '01' ? '正常' : model.runControlStatus == '03' ? '跳停' : '扣车'}\n停稳状态: ${model.runStatus == '02' ? '未停稳' : '停稳'}\n阻塞状态: 无\n列车速度: ${model.speed || 0} km/h\n列车移动授权距离: ${model.maLen || 0} m`, textFill: '#000', textAlign: 'letf', textFont: 10 + 'px consolas', textPadding: 3, - textBackgroundColor: this.model.style.tipBackgroundColor, + textBackgroundColor: style.tipBackgroundColor } }); @@ -48,13 +50,13 @@ class TrainBody extends Group { shape: { x: model.point.x, y: model.point.y, - width: model.style.trainWidth, - height: model.style.trainHeight + width: style.trainWidth, + height: style.trainHeight }, style: { lineWidth: 0.1, - stroke: model.style.trainSidelineColor, - fill: model.style.trainBrown1Color + stroke: style.trainSidelineColor, + fill: style.trainBrown1Color }, cursor: 'pointer' }); @@ -62,8 +64,8 @@ class TrainBody extends Group { let lrPadding = 3; // 两边间隔 let upPadding = 4; // 上边距离 const beginX = (model.point.x + lrPadding); - const beginY = (model.point.y - model.style.trainHSDATextFontSize - upPadding); - const margin = (model.style.trainWidth - lrPadding * 2) / 4; + const beginY = (model.point.y - style.trainHSDATextFontSize - upPadding); + const margin = (style.trainWidth - lrPadding * 2) / 4; this.textH = new Text({ zlevel: model.zlevel, z: model.z, @@ -71,10 +73,10 @@ class TrainBody extends Group { x: parseInt(beginX + margin * 0), y: parseInt(beginY), text: 'H', - textFill: model.style.trainYellowColor, + textFill: style.trainYellowColor, textFont: TextFontHSDA, textAlign: 'middle', - textVerticalAlign: 'top', + textVerticalAlign: 'top' } }); @@ -85,10 +87,10 @@ class TrainBody extends Group { x: parseInt(beginX + margin * 1), y: parseInt(beginY), text: 'S', - textFill: model.style.trainBlueColor, + textFill: style.trainBlueColor, textFont: TextFontHSDA, textAlign: 'middle', - textVerticalAlign: 'top', + textVerticalAlign: 'top' } }); @@ -99,10 +101,10 @@ class TrainBody extends Group { x: parseInt(beginX + margin * 2), y: parseInt(beginY), text: 'D', - textFill: model.style.trainGreenColor, + textFill: style.trainGreenColor, textFont: TextFontHSDA, textAlign: 'middle', - textVerticalAlign: 'top', + textVerticalAlign: 'top' } }); @@ -113,17 +115,17 @@ class TrainBody extends Group { x: parseInt(beginX + margin * 3), y: parseInt(beginY), text: 'A', - textFill: model.style.trainRedColor, + textFill: style.trainRedColor, textFont: TextFontHSDA, textAlign: 'middle', - textVerticalAlign: 'top', + textVerticalAlign: 'top' } }); lrPadding = 4; // 两边间隔 upPadding = 4; // 上边距离 - let serviceNumber = model.model.serviceNumber || 'AA'; - let tripNumber = model.model.tripNumber || 'DDD'; + let serviceNumber = model.serviceNumber || 'AA'; + let tripNumber = model.tripNumber || 'DDD'; serviceNumber = '00' + serviceNumber; tripNumber = '000' + tripNumber; @@ -134,10 +136,10 @@ class TrainBody extends Group { x: parseInt(model.point.x + lrPadding), y: parseInt(model.point.y + upPadding), text: serviceNumber.substring(serviceNumber.length - 2), - textFill: model.style.trainBrownColor, + textFill: style.trainBrownColor, textFont: textFont, textAlign: 'left', - textVerticalAlign: 'top', + textVerticalAlign: 'top' } }); @@ -145,13 +147,13 @@ class TrainBody extends Group { zlevel: model.zlevel, z: model.z, style: { - x: parseInt(model.point.x + model.style.trainWidth - lrPadding), + x: parseInt(model.point.x + style.trainWidth - lrPadding), y: parseInt(model.point.y + upPadding), text: tripNumber.substring(tripNumber.length - 3), - textFill: model.style.trainYellowColor, + textFill: style.trainYellowColor, textFont: textFont, textAlign: 'right', - textVerticalAlign: 'top', + textVerticalAlign: 'top' } }); this.add(this.train); @@ -163,19 +165,21 @@ class TrainBody extends Group { this.add(this.textTrainTarget); } setMouseOver() { - //store.dispatch('map/setTrainDetails', this.model); - //this.details = store.state.map.trainDetails; - /*this.add(this.arrowText); + // store.dispatch('map/setTrainDetails', this.model); + // this.details = store.state.map.trainDetails; + /* + this.add(this.arrowText); this.arrowText.attr({ style: { x: this.details.point.x + 50, y: this.details.point.y + 25, } - });*/ + }); + */ } setMouseOut() { this.remove(this.arrowText); - //store.dispatch('map/setTrainDetails', null); + // store.dispatch('map/setTrainDetails', null); } setTrainColor(color) { this.train && this.train.setStyle('fill', color); @@ -208,41 +212,43 @@ class TrainHead extends Group { constructor(model) { super(); this.model = model; - this._create(model); + this._create(); } - _create(model) { - let baseMargin = (model.drect === -1 ? 1 : 0); + _create() { + const model = this.model; + const style = this.model.style; + const baseMargin = (model.drect === -1 ? 1 : 0); this.line = new Rect({ zlevel: model.zlevel, z: model.z, shape: { - x: model.point.x - baseMargin * (model.style.trainConntWidth), + x: model.point.x - baseMargin * (style.trainConntWidth), y: model.point.y, - width: model.style.trainConntWidth, - height: model.style.trainHeight + 2 * model.style.trainMoreLength + width: style.trainConntWidth, + height: style.trainHeight + 2 * style.trainMoreLength }, style: { lineWidth: 0.1, - stroke: model.style.trainSidelineColor, - fill: model.style.trainBackground + stroke: style.trainSidelineColor, + fill: style.trainBackground } }); - let arrowMargin = model.style.trainPadding + model.style.trainConntWidth; + const arrowMargin = style.trainPadding + style.trainConntWidth; this.arrow = new Polygon({ zlevel: model.zlevel, z: model.z, shape: { points: [ - [model.point.x + model.drect * (arrowMargin), model.point.y + 1 - model.style.trainMoreLength], - [model.point.x + model.drect * (arrowMargin + model.style.trainArrowWidth), model.point.y + (model.style.trainHeight + model.style.trainMoreLength) / 2], - [model.point.x + model.drect * (arrowMargin), model.point.y - 1 + model.style.trainHeight + model.style.trainMoreLength] + [model.point.x + model.drect * (arrowMargin), model.point.y + 1 - style.trainMoreLength], + [model.point.x + model.drect * (arrowMargin + style.trainArrowWidth), model.point.y + (style.trainHeight + style.trainMoreLength) / 2], + [model.point.x + model.drect * (arrowMargin), model.point.y - 1 + style.trainHeight + style.trainMoreLength] ] }, style: { lineWidth: 0.1, - stroke: model.style.trainSidelineColor, - fill: model.style.trainBackground + stroke: style.trainSidelineColor, + fill: style.trainBackground } }); @@ -280,13 +286,13 @@ export default class Train extends Group { this.selected = false; this.fontSize = model.nameFontSize || style.trainTextFontSize; this.newScale = this.fontSize / style.trainTextFontSize; - this._create(model, style); - this.on('mousedown', this.mouseclick); - this.on('mouseout', this.mouseleave); - this.on('mouseover', this.mouseenter); + this._create(); + this.setState(state); } - _computed(model, style) { + _computed() { + const model = this.model; + const style = this.style; if (model.trainWindowModel) { this.point = { x: model.trainWindowModel.point.x, @@ -294,15 +300,15 @@ export default class Train extends Group { }; switch (model.directionType) { - case '01': { //未知方向 - this.point.x = this.point.x + model.trainWindowModel.width / 2 + Math.abs((style.trainWidth - model.trainWindowModel.width) / 2); - } break; - case '02': { //从左向右 - this.point.x = this.point.x + model.trainWindowModel.width / 2 - style.trainConntWidth * this.newScale - style.trainWidth; - } break; - case '03': { //从右向左 - this.point.x = this.point.x - model.trainWindowModel.width / 2 + style.trainConntWidth * this.newScale; - } break; + case '01': // 未知方向 + this.point.x = this.point.x + model.trainWindowModel.width / 2 + Math.abs((style.trainWidth - model.trainWindowModel.width) / 2); + break; + case '02': // 从左向右 + this.point.x = this.point.x + model.trainWindowModel.width / 2 - style.trainConntWidth * this.newScale - style.trainWidth; + break; + case '03': // 从右向左 + this.point.x = this.point.x - model.trainWindowModel.width / 2 + style.trainConntWidth * this.newScale; + break; } } else { this.point = model.position; @@ -310,21 +316,29 @@ export default class Train extends Group { } } - _create(model, style) { - //计算画图坐标点 - this._computed(model, style); - - //画图 + _create() { + const model = this.model; + const style = this.style; + this._computed(); if (this.point) { - // body this.trainB = new TrainBody({ - model: model, - style: style, zlevel: this.zlevel, z: this.z, - point: this.point + style: style, + point: this.point, + destinationStatus: model.destinationStatus, + serviceNumber: model.serviceNumber, + tripNumber: model.tripNumber, + targetCode: model.targetCode, + groupNumber: model.groupNumber, + directionType: model.directionType, + sectionModel: model.sectionModel, + runControlStatus: model.runControlStatus, + runStatus: model.runStatus, + speed: model.speed, + maLen: model.maLen }); - // left 头 + this.trainL = new TrainHead({ style: style, zlevel: this.zlevel, @@ -335,7 +349,7 @@ export default class Train extends Group { }, drect: -1 }); - // right 头 + this.trainR = new TrainHead({ style: style, zlevel: this.zlevel, @@ -349,28 +363,6 @@ export default class Train extends Group { this.add(this.trainB); this.add(this.trainL); this.add(this.trainR); - - let rect = Object.assign({}, this.getBoundingRect()); - rect.x -= style.trainWidth / 2; - rect.y -= 5; - rect.width += style.trainWidth; - rect.height += 10; - - this.trainBorder = new Rect({ - zlevel: model.zlevel, - z: this.z, - silent: true, - shape: rect, - style: { - lineDash: [3, 3], - stroke: style.borderColor, - fill: style.transparentColor - } - }) - - this.add(this.trainBorder); - this.setState(model); - this.mouseStatusRecover(); } } getShapeTipPoint() { @@ -379,7 +371,7 @@ export default class Train extends Group { y: (this.train.shape.y) }; } - //恢复颜色状态 + // 恢复颜色状态 recover() { this.trainB.setHShow(false); this.trainB.setSShow(false); @@ -390,180 +382,180 @@ export default class Train extends Group { this.trainL.setArrowShow(false); this.trainR.setArrowShow(false); } - //设置服务号状态类型 + // 设置服务号状态类型 setServerNoType(type) { switch (type) { - case '01': { //显示服务号 计划车 - this.trainB.setTextTrainServerColor(this.style.trainWitheColor); - } break; - case '02': { //显示车组号: 头码车与人工车 - this.trainB.setTextTrainServerColor(this.style.trainYellowColor); - } break; - default: { - this.trainB.setTextTrainServerColor(this.style.backgroundColor); - } + case '01': // 显示服务号 计划车 + this.trainB.setTextTrainServerColor(this.style.trainWitheColor); + break; + case '02': // 显示车组号: 头码车与人工车 + this.trainB.setTextTrainServerColor(this.style.trainYellowColor); + break; + default: + this.trainB.setTextTrainServerColor(this.style.backgroundColor); + break; } } - //设置目的地状态 + // 设置目的地状态 setDestinationStatus(status) { switch (status) { - case '01': { //准点 - this.trainB.setTextTrainTargetColor(this.style.trainWitheColor); - } break; - case '02': { //早点 - this.trainB.setTextTrainTargetColor(this.style.trainGreenColor); - } break; - case '03': { //晚点 - this.trainB.setTextTrainTargetColor(this.style.trainBrownColor); - } break; - case '04': { //头码车 - this.trainB.setTextTrainTargetColor(this.style.trainYellowColor); - } break; - default: { - this.trainB.setTextTrainTargetColor(this.style.backgroundColor); - } + case '01': // 准点 + this.trainB.setTextTrainTargetColor(this.style.trainWitheColor); + break; + case '02': // 早点 + this.trainB.setTextTrainTargetColor(this.style.trainGreenColor); + break; + case '03': // 晚点 + this.trainB.setTextTrainTargetColor(this.style.trainBrownColor); + break; + case '04': // 头码车 + this.trainB.setTextTrainTargetColor(this.style.trainYellowColor); + break; + default: + this.trainB.setTextTrainTargetColor(this.style.backgroundColor); + break; } } - //设置运行方向状态类型 + // 设置运行方向状态类型 setDirectionType(type) { switch (type) { - case '01': { //未知方向 - this.trainL.setLineShow(true); - this.trainR.setLineShow(true); - } break; - case '02': { //从左往右 上行 - this.trainR.setLineShow(true); - this.trainR.setArrowShow(true); - } break; - case '03': { //从右往左 下行 - this.trainL.setLineShow(true); - this.trainL.setArrowShow(true); - } break; + case '01': // 未知方向 + this.trainL.setLineShow(true); + this.trainR.setLineShow(true); + break; + case '02': // 从左往右 上行 + this.trainR.setLineShow(true); + this.trainR.setArrowShow(true); + break; + case '03': // 从右往左 下行 + this.trainL.setLineShow(true); + this.trainL.setArrowShow(true); + break; } } // 设置列车停止方向类型 setDirectionStopType(type) { switch (type) { - case '01': { //未知方向 - } break; - case '02': { //从左往右 上行 - this.trainR.setLineShow(true); - } break; - case '03': { //从右往左 下行 - this.trainL.setLineShow(true); - } break; + case '01': // 未知方向 + break; + case '02': // 从左往右 上行 + this.trainR.setLineShow(true); + break; + case '03': // 从右往左 下行 + this.trainL.setLineShow(true); + break; } } - //设置运行状态 + // 设置运行状态 setRunStatus(status) { switch (status) { - case '01': { //停止 - this.setDirectionStopType(this.model.directionType); //设置运行方向状态类型 - } break; - case '02': { //运行 - this.setDirectionType(this.model.directionType); //设置运行方向状态类型 - } break; + case '01': // 停止 + this.setDirectionStopType(this.model.directionType); // 设置运行方向状态类型 + break; + case '02': // 运行 + this.setDirectionType(this.model.directionType); // 设置运行方向状态类型 + break; } } - //设置运行模式 + // 设置运行模式 setRunMode(status) { switch (status) { - case '01': { //未知 - this.trainL.setColor(this.style.trainWitheColor); - this.trainR.setColor(this.style.trainWitheColor); - } break; - case '02': { //ATO自动驾驶模式 AM - this.trainL.setColor(this.style.trainGreenColor); - this.trainR.setColor(this.style.trainGreenColor); - } break; - case '03': { //ATP监控下的人工驾驶模式 CM - this.trainL.setColor(this.style.trainYellowColor); - this.trainR.setColor(this.style.trainYellowColor); - } break; - case '04': { //限制人工驾驶模式 RM - this.trainL.setColor(this.style.trainBrownColor); - this.trainR.setColor(this.style.trainBrownColor); - } break; - case '05': { //非限制人工驾驶模式 RM - this.trainL.setColor(this.style.trainBrownColor); - this.trainR.setColor(this.style.trainBrownColor); - } break; + case '01': // 未知 + this.trainL.setColor(this.style.trainWitheColor); + this.trainR.setColor(this.style.trainWitheColor); + break; + case '02': // ATO自动驾驶模式 AM + this.trainL.setColor(this.style.trainGreenColor); + this.trainR.setColor(this.style.trainGreenColor); + break; + case '03': // ATP监控下的人工驾驶模式 CM + this.trainL.setColor(this.style.trainYellowColor); + this.trainR.setColor(this.style.trainYellowColor); + break; + case '04': // 限制人工驾驶模式 RM + this.trainL.setColor(this.style.trainBrownColor); + this.trainR.setColor(this.style.trainBrownColor); + break; + case '05': // 非限制人工驾驶模式 RM + this.trainL.setColor(this.style.trainBrownColor); + this.trainR.setColor(this.style.trainBrownColor); + break; } } - //设置运行控制状态类型 + // 设置运行控制状态类型 setRunControlStatus(status) { switch (status) { - case '01': { //正常 - this.trainB.setHShow(false); - this.trainB.setSShow(false); - } break; - case '02': { //扣车 - this.trainB.setHShow(true); - } break; - case '03': { //跳停 - this.trainB.setSShow(true); - } break; + case '01': // 正常 + this.trainB.setHShow(false); + this.trainB.setSShow(false); + break; + case '02': // 扣车 + this.trainB.setHShow(true); + break; + case '03': // 跳停 + this.trainB.setSShow(true); + break; } } - //设置车门状态类型 + // 设置车门状态类型 setDoorStatus(status) { switch (status) { - case '01': { //关门 - this.trainB.setDShow(false); - } break; - case '02': { //开门 - this.trainB.setDShow(true); - } break; + case '01': // 关门 + this.trainB.setDShow(false); + break; + case '02': // 开门 + this.trainB.setDShow(true); + break; } } - //设置通信状态类型 + // 设置通信状态类型 setCommunicationStatus() { switch (status) { - case '01': { //正常 - this.trainB.setTrainColor(this.style.trainBrown1Color); - } break; - case '02': { //故障 - this.trainB.setTrainColor(this.style.trainGrayColor); - } break; + case '01': // 正常 + this.trainB.setTrainColor(this.style.trainBrown1Color); + break; + case '02': // 故障 + this.trainB.setTrainColor(this.style.trainGrayColor); + break; } } - //设置报警状态 + // 设置报警状态 setAlarmStatus(status) { switch (status) { - case '01': { //不报警 - this.trainB.setAShow(false); - } break; - case '02': { //报警 - this.trainB.setAShow(true); - } break; + case '01': // 不报警 + this.trainB.setAShow(false); + break; + case '02': // 报警 + this.trainB.setAShow(true); + break; } } - //设置状态 - setState(model) { - if (model) { + // 设置状态 + setState(state) { + if (state) { this.recover(); - this.setServerNoType(model.serverNoType); //设置服务号状态类型 - this.setDestinationStatus(model.destinationStatus); //设置目的地状态 - this.setRunStatus(model.runStatus); //设置运行状态 - this.setRunMode(model.runMode); //设置运行模式 - this.setRunControlStatus(model.runControlStatus); //设置运行控制状态类型 - this.setDoorStatus(model.doorStatus); //设置车门状态类型 - this.setCommunicationStatus(model.communicationStatus); //设置通信状态类型 - this.setAlarmStatus(model.alarmStatus); //设置报警状态 + this.setServerNoType(state.serverNoType); // 设置服务号状态类型 + this.setDestinationStatus(state.destinationStatus); // 设置目的地状态 + this.setRunStatus(state.runStatus); // 设置运行状态 + this.setRunMode(state.runMode); // 设置运行模式 + this.setRunControlStatus(state.runControlStatus); // 设置运行控制状态类型 + this.setDoorStatus(state.doorStatus); // 设置车门状态类型 + this.setCommunicationStatus(state.communicationStatus); // 设置通信状态类型 + this.setAlarmStatus(state.alarmStatus); // 设置报警状态 } } - //获取列车包围框 + // 获取列车包围框 getBoundingRect() { - let list = [this.trainB, this.trainL, this.trainR]; + const list = [this.trainB, this.trainL, this.trainR]; let rect = null; list.forEach(elem => { if (elem) { - let tempRect = elem.getBoundingRect(); + const tempRect = elem.getBoundingRect(); if (tempRect.x && tempRect.y && tempRect.width && tempRect.height) { if (rect) { rect.union(tempRect); @@ -576,43 +568,4 @@ export default class Train extends Group { return rect || new BoundingRect(0, 0, 0, 0); } - - setSectionBorderShow(show) { - /* let section = store.getters['map/getViewInstanceByDevice']({ _type: ModelType.Section, _code: this.model.sectionCode }); - show && section && section.mouseStatusVisible(); - show || section && section.mouseStatusRecover();*/ - } - - mouseStatusVisible() { - this.trainBorder.show(); - this.setSectionBorderShow(true); - this.trainB.setMouseOver(); - } - - mouseStatusRecover() { - this.trainBorder.hide(); - this.setSectionBorderShow(false); - this.trainB.setMouseOut(); - } - - mouseclick(e) { - if ([3].includes(e.which)) { - this.selected = !this.selected; - if (this.selected) { - this.mouseStatusVisible(); - } - } - } - - mouseenter(e) { - if (!this.selected) { - this.mouseStatusVisible(); - } - } - - mouseleave(e) { - if (!this.selected) { - this.mouseStatusRecover(); - } - } } diff --git a/src/jmap/shape/TrainWindow.js b/src/jmap/shape/TrainWindow.js index c3bb509e8..43f7e9a7e 100644 --- a/src/jmap/shape/TrainWindow.js +++ b/src/jmap/shape/TrainWindow.js @@ -12,19 +12,13 @@ class TrainWindow extends Group { this.state = state; this.style = style; this.z = 1; - this.selected = false; this._create(model); - this.on('mousedown', this.mouseclick); - this.on('mouseout', this.mouseleave); - this.on('mouseover', this.mouseenter); + this.setState(state); } _create(model) { const prdType = '02';// store.state.map.prdType; if (prdType !== '01') { this.createTrainWindow(); - this.setTrainWindowEventShow(model.trainWindowShow); - this.setState(model); - this.mouseStatusRecover(); } } @@ -55,11 +49,6 @@ class TrainWindow extends Group { this.add(this.trainRect); } - setTrainWindowEventShow(show) { - const lineWidth = show ? 1 : 0; - this.trainRect && this.trainRect.setStyle('lineWidth', lineWidth); - } - isPop(e) { for (var i = 0; i < this.childCount(); i++) { var rect = this.childAt(i).getBoundingRect(); @@ -70,58 +59,8 @@ class TrainWindow extends Group { } // 设置状态 - setState(model) { - } - - getShapeTipPoint() { - if (this.stationControl) { - var distance = 2; - var rect = this.stationControl.getBoundingRect(); - return { - x: rect.x + rect.width / 2, - y: rect.y - distance - }; - } - return null; - } - - setSectionEventShow(e, show) { - /* - let section = store.getters['map/getViewInstanceByDevice']({ _type: ModelType.Section, _code: this.model.sectionCode }); - show && section && section.mouseStatusVisible(e); - show || section && section.mouseStatusRecover(e); - */ - } - - mouseStatusRecover(e) { - this.setTrainWindowEventShow(false); - this.setSectionEventShow(e, false); - } - - mouseStatusVisible(e) { - this.setTrainWindowEventShow(true); - this.setSectionEventShow(e, true); - } - - mouseclick(e) { - if ([3].includes(e.which)) { - this.selected = !this.selected; - if (this.selected) { - this.mouseStatusVisible(e); - } - } - } - - mouseenter(e) { - if (!this.selected) { - this.mouseStatusVisible(e); - } - } - - mouseleave(e) { - if (!this.selected) { - this.mouseStatusRecover(e); - } + setState(state) { + this.trainRect.hide(); } } diff --git a/src/jmap/shape/element/EDetain.js b/src/jmap/shape/element/EDetain.js new file mode 100644 index 000000000..964d4b66b --- /dev/null +++ b/src/jmap/shape/element/EDetain.js @@ -0,0 +1,42 @@ +import Group from 'zrender/src/container/Group'; +import Text from 'zrender/src/graphic/Text'; + +class EDetain extends Group { + constructor(model) { + super(); + this.model = model; + this._create(); + } + + _create() { + const model = this.model; + const style = this.model.style; + this.detain = new Text({ + zlevel: model.zlevel, + z: model.z + 2, + position: [0, 0], + style: { + x: model.x, + y: model.y, + text: style.StationStand.standDetainText, + textAlign: model.textAlign, + textVerticalAlign: model.textVerticalAlign, + fontSize: `${style.StationStand.standHeadFontSize} px ${style.textFontFormat}`, + textFill: style.StationStand.standCenterDetainTrainColor, + textStroke: style.backgroundColor + } + }); + + this.add(this.detain); + } + + setColor(color) { + this.detain.setStyle('textFill', color); + } + + setVisible(show) { + show ? this.detain.show(): this.detain.hide(); + } +} + +export default EDetain; diff --git a/src/jmap/shape/element/EReentry.js b/src/jmap/shape/element/EReentry.js new file mode 100644 index 000000000..442bcc5be --- /dev/null +++ b/src/jmap/shape/element/EReentry.js @@ -0,0 +1,39 @@ +import Group from 'zrender/src/container/Group'; +import Polygon from 'zrender/src/graphic/shape/Polygon'; +import { flashlight } from '../libs/ShapePoints'; + +class EReentry extends Group { + constructor(model) { + super(); + this.model = model; + this._create(); + } + + _create() { + const model = this.model; + + this.reentry = new Polygon({ + zlevel: model.zlevel, + z: model.z, + shape: { + points: flashlight(model.x, model.y, model.drict, model.width, model.height, model.offsetx, model.offsety, model.beyond) + }, + style: { + lineWidth: model.lineWidth, + fill: model.fill + } + }); + + this.add(this.reentry); + } + + setColor(color) { + this.reentry.setStyle('textFill', color); + } + + setVisible(show) { + show ? this.reentry.show(): this.reentry.hide(); + } +} + +export default EReentry; diff --git a/src/jmap/theme/bejing.js b/src/jmap/theme/bejing.js index 85ef62970..794e1bf53 100644 --- a/src/jmap/theme/bejing.js +++ b/src/jmap/theme/bejing.js @@ -116,6 +116,8 @@ class Beijing extends defaultSkin { standSafeHeight: 1.6, /** 站台首端字体大小*/ standHeadFontSize: 9, + /** 扣车显示内容*/ + standDetainText: 'H', /** 站台无人折返*/ standNoHumanReentryColor: '#0F16DA', /** 站台自动换端*/