From 557f98f4b4173caf51edd9bdcf9a120da8b45607 Mon Sep 17 00:00:00 2001 From: fan <18706759286@163.com> Date: Thu, 25 Jul 2019 08:50:07 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=EF=BC=9A=E5=88=97=E8=BD=A6?= =?UTF-8?q?=E6=8A=BD=E8=B1=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jmap/config/defaultSkin.js | 25 +- src/jmap/shape/Train/TrainBody/ArrowText.js | 40 ++ src/jmap/shape/Train/TrainBody/TextHSDA.js | 83 +++ .../shape/Train/TrainBody/TextTrainNumber.js | 46 ++ .../shape/Train/TrainBody/TextTrainServer.js | 45 ++ .../shape/Train/TrainBody/TextTrainTarget.js | 45 ++ .../Train/TrainBody/TextTrainTargetNumber.js | 45 ++ src/jmap/shape/Train/TrainBody/Train.js | 48 ++ src/jmap/shape/Train/TrainBody/index.js | 261 +++++++ src/jmap/shape/Train/TrainHead/index.js | 66 ++ src/jmap/shape/Train/index.js | 636 ++++++------------ src/jmap/theme/batong.js | 105 +++ src/jmap/theme/bejing.js | 132 +++- src/jmap/theme/chengdu.js | 109 +++ src/jmap/theme/fuzhou.js | 105 +++ 15 files changed, 1355 insertions(+), 436 deletions(-) create mode 100644 src/jmap/shape/Train/TrainBody/ArrowText.js create mode 100644 src/jmap/shape/Train/TrainBody/TextHSDA.js create mode 100644 src/jmap/shape/Train/TrainBody/TextTrainNumber.js create mode 100644 src/jmap/shape/Train/TrainBody/TextTrainServer.js create mode 100644 src/jmap/shape/Train/TrainBody/TextTrainTarget.js create mode 100644 src/jmap/shape/Train/TrainBody/TextTrainTargetNumber.js create mode 100644 src/jmap/shape/Train/TrainBody/Train.js create mode 100644 src/jmap/shape/Train/TrainBody/index.js create mode 100644 src/jmap/shape/Train/TrainHead/index.js diff --git a/src/jmap/config/defaultSkin.js b/src/jmap/config/defaultSkin.js index 7446b9e98..9497b9422 100644 --- a/src/jmap/config/defaultSkin.js +++ b/src/jmap/config/defaultSkin.js @@ -14,10 +14,6 @@ export default class DefaultSkin { /** 默认字体 大小*/ this.textFontSize = 10; - - /** 默认字体 族类*/ - this.textFontFormat = 'consolas'; - /** 默认字体颜色*/ this.textFontColor = '#C0C0C0'; @@ -39,18 +35,6 @@ export default class DefaultSkin { /** 目的码字体颜色*/ this.destinationTextFontColor = 'yellow'; - /** 列车长度*/ - this.trainWidth = 40; - - /** 列车高度*/ - this.trainHeight = 20; - - /** 列车字号*/ - this.trainTextFontSize = 12; - - /** 列车HDSA字号*/ - this.trainHSDATextFontSize = 9; - /** 列车信号的半径*/ this.trainConflictR = 3; @@ -60,12 +44,6 @@ export default class DefaultSkin { /** 列车车头比车身高出的长度;上下相比车体伸出去的边框*/ this.trainMoreLength = 0; - /** 列车和车头之间的间距*/ - this.trainHeadDistance = 4; - - /** 列车竖杠的宽度*/ - this.trainConntWidth = 3; - /** 列车竖杠和方向之间的间隔*/ this.trainPadding = 4; @@ -122,5 +100,8 @@ export default class DefaultSkin { /** 车次窗颜色*/ this.trainWindowColor = '#fff'; + + /** 列车文字颜色*/ + this.trainTextColor = '#ffffff'; } } diff --git a/src/jmap/shape/Train/TrainBody/ArrowText.js b/src/jmap/shape/Train/TrainBody/ArrowText.js new file mode 100644 index 000000000..67eb68f22 --- /dev/null +++ b/src/jmap/shape/Train/TrainBody/ArrowText.js @@ -0,0 +1,40 @@ +import Group from "zrender/src/container/Group"; +import Text from "zrender/src/graphic/Text"; +/** 文字描述 */ +class ArrowText extends Group{ + constructor(model){ + super(); + this.model = model; + this._create(); + } + _create(){ + this.arrowText = new Text({ + zlevel: this.model.zlevel, + z: this.model.z, + position: [0, 0], + style: { + x: this.model.x, + y: this.model.y, + text: this.model.text, + textFill: this.model.textFill, + textAlign: this.model.textAlign, + textFont: this.model.textFont, + textPadding: this.model.textPadding, + textBackgroundColor: this.model.tipBackgroundColor + } + }); + // this.add(this.arrowText); + /*福州线特殊处理*/ + /*const selectTrain = store.getters['map/trainDetails']; + if (selectTrain && selectTrain.model._code == model._code) { + this.add(this.arrowText); + this.arrowText.attr({ + style: { + x: selectTrain.point.x + 50, + y: selectTrain.point.y + 25, + } + }); + }*/ + } +} +export default ArrowText; diff --git a/src/jmap/shape/Train/TrainBody/TextHSDA.js b/src/jmap/shape/Train/TrainBody/TextHSDA.js new file mode 100644 index 000000000..21524693e --- /dev/null +++ b/src/jmap/shape/Train/TrainBody/TextHSDA.js @@ -0,0 +1,83 @@ +import Group from 'zrender/src/container/Group'; +import Text from 'zrender/src/graphic/Text'; + +export default class TextHSDA extends Group{ + constructor(model) { + super(); + this.model = model; + this._create(); + } + _create() { + const model = this.model; + this.textH = new Text({ + zlevel: model.zlevel, + z: model.z, + style: { + x: parseInt(model.beginX + model.margin * 0), + y: parseInt(model.beginY), + text: 'H', + textFill: model.trainYellowColor, + textFont: model.TextFontHSDA, + textAlign: model.textAlign, + textVerticalAlign: model.textVerticalAlign + } + }); + this.textS = new Text({ + zlevel: model.zlevel, + z: model.z, + style: { + x: parseInt(model.beginX + model.margin * 1), + y: parseInt(model.beginY), + text: 'S', + textFill: model.trainBlueColor, + textFont: model.TextFontHSDA, + textAlign: model.textAlign, + textVerticalAlign: model.textVerticalAlign + } + }); + + this.textD = new Text({ + zlevel: model.zlevel, + z: model.z, + style: { + x: parseInt(model.beginX + model.margin * 2), + y: parseInt(model.beginY), + text: 'D', + textFill: model.trainGreenColor, + textFont: model.TextFontHSDA, + textAlign: model.textAlign, + textVerticalAlign: model.textVerticalAlign + } + }); + + this.textA = new Text({ + zlevel: model.zlevel, + z: model.z, + style: { + x: parseInt(model.beginX + model.margin * 3), + y: parseInt(model.beginY), + text: 'A', + textFill: model.trainRedColor, + textFont: model.TextFontHSDA, + textAlign: model.textAlign, + textVerticalAlign: model.textVerticalAlign + } + }); + this.add(this.textH); + this.add(this.textS); + this.add(this.textD); + this.add(this.textA); + } + setHShow(isShow) { + isShow ? this.textH.show() : this.textH.hide(); + } + setSShow(isShow) { + isShow ? this.textS.show() : this.textS.hide(); + } + setDShow(isShow) { + isShow ? this.textD.show() : this.textD.hide(); + } + setAShow(isShow) { + isShow ? this.textA.show() : this.textA.hide(); + } +} diff --git a/src/jmap/shape/Train/TrainBody/TextTrainNumber.js b/src/jmap/shape/Train/TrainBody/TextTrainNumber.js new file mode 100644 index 000000000..ac6743d59 --- /dev/null +++ b/src/jmap/shape/Train/TrainBody/TextTrainNumber.js @@ -0,0 +1,46 @@ +import Group from "zrender/src/container/Group"; +import Text from "zrender/src/graphic/Text"; +/** 目的码 */ +export default class TextTrainNumber extends Group{ + constructor(model) { + super(); + this.model = model; + this._create(); + } + _create() { + const model = this.model; + this.textTrainNumber = new Text({ + zlevel: model.zlevel, + z: model.z, + style: { + x: parseInt(model.point.x + model.lrPadding), + y: parseInt(model.point.y + model.upPadding), + text: model.targetCode.substring(model.targetCode.length - 3), + textFill: model.trainTextColor, + textStroke: model.trainTextColor, + fontWeight: 400, + textStrokeWidth: 0, + textFont: model.textFont, + textAlign: 'left', + textVerticalAlign: 'top', + }, + cursor: 'pointer', + onmouseover: this.onMouseOver(), + onmouseout: this.onMouseOut(), + }); + this.add(this.textTrainNumber); + }; + setShapeStyle(key, style) { + this.textTrainNumber.setStyle(key, style); + }; + onMouseOver() { + if (this.model.trainBodyOnMouseOver.textTrainNumber) { + this.add(this.model.arrowText); + } + } + onMouseOut() { + if (this.model.trainBodyOnMouseOut.textTrainNumber){ + this.remove(this.model.arrowText); + } + } +} diff --git a/src/jmap/shape/Train/TrainBody/TextTrainServer.js b/src/jmap/shape/Train/TrainBody/TextTrainServer.js new file mode 100644 index 000000000..2be402a76 --- /dev/null +++ b/src/jmap/shape/Train/TrainBody/TextTrainServer.js @@ -0,0 +1,45 @@ +import Group from "zrender/src/container/Group"; +import Text from "zrender/src/graphic/Text"; +/** 服务号、表号 */ +export default class TextTrainServer extends Group{ + constructor(model){ + super(); + this.model = model; + this._create(); + } + _create() { + this.textTrainServer = new Text({ + zlevel: this.model.zlevel, + z: this.model.z+1, + style: { + x: parseInt(this.model.point.x + this.model.lrPadding), + y: parseInt(this.model.point.y + this.model.upPadding), + text: this.model.serviceNumber.substring(this.model.serviceNumber.length - 2), + textFill: this.model.trainBrownColor, + textFont: this.model.textFont, + textAlign: 'left', + textVerticalAlign: 'top' + }, + cursor: 'pointer', + onmouseover: this.onMouseOver(), + onmouseout: this.onMouseOut(), + }); + this.add(this.textTrainServer); + }; + setColor(key,color) { + this.textTrainServer.setStyle(key,color); + }; + setShapeStyle(key, style) { + this.textTrainServer.setStyle(key, style); + }; + onMouseOver() { + if (this.model.trainBodyOnMouseOver.textTrainServer) { + this.add(this.model.arrowText); + } + } + onMouseOut() { + if (this.model.trainBodyOnMouseOut.textTrainServer){ + this.remove(this.model.arrowText); + } + } +} diff --git a/src/jmap/shape/Train/TrainBody/TextTrainTarget.js b/src/jmap/shape/Train/TrainBody/TextTrainTarget.js new file mode 100644 index 000000000..97ccfd727 --- /dev/null +++ b/src/jmap/shape/Train/TrainBody/TextTrainTarget.js @@ -0,0 +1,45 @@ +import Group from "zrender/src/container/Group"; +import Text from "zrender/src/graphic/Text"; + +export default class TextTrainTarget extends Group{ + constructor(model){ + super(); + this.model = model; + this._create(); + } + _create() { + this.textTrainTarget = new Text({ + zlevel: this.model.zlevel, + z: this.model.z+1, + style: { + x: parseInt(this.model.point.x + this.model.trainWidth - this.model.lrPadding), + y: parseInt(this.model.point.y + this.model.upPadding), + text: this.model.tripNumber.substring(this.model.tripNumber.length - 3), + textFill: this.model.trainYellowColor, + textFont: this.model.textFont, + textAlign: 'right', + textVerticalAlign: 'top' + }, + cursor: 'pointer', + onmouseover: this.onMouseOver(), + onmouseout: this.onMouseOut(), + }); + this.add(this.textTrainTarget); + }; + setColor(key, color) { + this.textTrainTarget.setStyle(key, color); + }; + setShapeStyle(key, style) { + this.textTrainTarget.setStyle(key, style); + }; + onMouseOver() { + if (this.model.trainBodyOnMouseOver.textTrainTarget) { + this.add(this.model.arrowText); + } + } + onMouseOut() { + if (this.model.trainBodyOnMouseOut.textTrainTarget){ + this.remove(this.model.arrowText); + } + } +} diff --git a/src/jmap/shape/Train/TrainBody/TextTrainTargetNumber.js b/src/jmap/shape/Train/TrainBody/TextTrainTargetNumber.js new file mode 100644 index 000000000..f8a41d2bd --- /dev/null +++ b/src/jmap/shape/Train/TrainBody/TextTrainTargetNumber.js @@ -0,0 +1,45 @@ +import Group from "zrender/src/container/Group"; +import Text from "zrender/src/graphic/Text"; +/** 车组号 */ +export default class TextTrainTargetNumber extends Group{ + constructor(model){ + super(); + this.model = model; + this._create(); + } + _create() { + const model = this.model; + this.textTrainTargetNumber = new Text({ + zlevel: model.zlevel, + z: model.z, + style: { + x: parseInt(model.point.x - model.lrPadding), + y: parseInt(model.point.y + model.upPadding), + text: model.groupNumber.substring(model.groupNumber.length - 3), + textFill: model.trainTextColor, + textStroke: model.trainTextColor, + textStrokeWidth: 0, + textFont: model.textFont, + textAlign: 'left', + textVerticalAlign: 'top', + }, + cursor: 'pointer', + onmouseover: this.onMouseOver(), + onmouseout: this.onMouseOut(), + }); + this.add(this.textTrainTargetNumber); + } + setShapeStyle(key, style) { + this.textTrainTargetNumber.setStyle(key, style); + }; + onMouseOver() { + if (this.model.trainBodyOnMouseOver.textTrainTargetNumber) { + this.add(this.model.arrowText); + } + } + onMouseOut() { + if (this.model.trainBodyOnMouseOut.textTrainTargetNumber){ + this.remove(this.model.arrowText); + } + } +} diff --git a/src/jmap/shape/Train/TrainBody/Train.js b/src/jmap/shape/Train/TrainBody/Train.js new file mode 100644 index 000000000..ceb8e5532 --- /dev/null +++ b/src/jmap/shape/Train/TrainBody/Train.js @@ -0,0 +1,48 @@ +import Group from "zrender/src/container/Group"; +import Rect from "zrender/src/graphic/shape/Rect"; +import store from '@/store'; + + +export default class Train extends Group{ + constructor(model){ + super(); + this.model = model; + this._create(); + } + _create() { + const model = this.model; + this.train = new Rect({ + zlevel: model.zlevel, + z: model.z, + shape: model.shape, + style: model.style, + cursor: model.cursor, + onmouseover: this.onMouseOver(), + onmouseout: this.onMouseOut(), + }); + this.add(this.train); + } + onMouseOver() { + if (this.model.trainBodyOnMouseOver.train) { + this.add(this.model.arrowText); + /*store.dispatch('map/setTrainDetails', model); + this.details = store.state.map.trainDetails; + this.add(this.model.arrowText); + this.model.arrowText.attr({ + style: { + x: this.details.point.x + 50, + y: this.details.point.y + 25, + } + });*/ + } + } + onMouseOut() { + if (this.model.trainBodyOnMouseOut.train){ + this.remove(this.model.arrowText); + // store.dispatch('map/setTrainDetails', null); + } + } + setColor(key, color) { + this.train.setStyle(key, color); + } +} diff --git a/src/jmap/shape/Train/TrainBody/index.js b/src/jmap/shape/Train/TrainBody/index.js new file mode 100644 index 000000000..a92057e63 --- /dev/null +++ b/src/jmap/shape/Train/TrainBody/index.js @@ -0,0 +1,261 @@ +import Group from "zrender/src/container/Group"; +import ArrowText from "./ArrowText"; +import Train from "./Train"; +import "../../StationStand/EDetain"; +import TextHSDA from "./TextHSDA"; +import TextTrainServer from "./TextTrainServer"; +import TextTrainTarget from "./TextTrainTarget"; +import TextTrainNumber from "./TextTrainNumber"; +import TextTrainTargetNumber from "./TextTrainTargetNumber"; +/** 车身*/ +export default class TrainBody extends Group { + constructor(model) { + super(); + this.model = model; + this._create(); + } + + _create() { + const model = this.model; + const style = this.model.style; + const textFont = style.Train.trainTextFontSize + 'px ' + style.Train.textFontFormat; + const TextFontHSDA = style.Train.trainHSDATextFontSize + 'px ' + style.Train.textFontFormat; + + let destinationText = ''; + 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; + } + const textContain = `列车类型: 计划车\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`; + this.arrowText = style.Train.haveArrowText ? new ArrowText({ + zlevel: model.zlevel, + z: model.z, + x: model.point.x+50, + y: model.point.y+25, + text: textContain, + textFill: '#000', + textAlign: 'left', + textFont: 10 + 'px consolas', + textPadding: 3, + textBackgroundColor: style.tipBackgroundColor + }) : ''; + this.train = new Train({ + zlevel: model.zlevel, + z: model.z, + shape: { + x: model.point.x, + y: model.point.y, + width: style.Train.trainWidth, + height: style.Train.trainHeight + }, + style: { + lineWidth: style.Train.trainBodyLineWidth, + stroke: style.trainSidelineColor, + fill: style.Train.trainBodyFillColor + }, + cursor: 'pointer', + trainBodyOnMouseOver: style.Train.trainBodyOnMouseOver, + trainBodyOnMouseOut: style.Train.trainBodyOnMouseOut, + arrowText: this.arrowText, + }); + /*let selectTrain = store.getters['map/trainDetails']; + if (selectTrain && selectTrain.model._code == model.model._code) { + this.add(this.arrowText); + this.arrowText.attr({ + style: { + x: selectTrain.point.x + 50, + y: selectTrain.point.y + 25, + } + }); + }*/ + const beginX = (model.point.x + style.Train.lrPadding); + const beginY = (model.point.y - style.Train.trainHSDATextFontSize - style.Train.upPaddingHSDA); + const margin = (style.Train.trainWidth - style.Train.lrPaddingHSDA * 2) / 4; + this.textHSDA = style.Train.haveTextHSDA ? new TextHSDA({ + zlevel: model.zlevel, + z: model.z, + beginX: beginX, + beginY: beginY, + margin: margin, + trainYellowColor: style.trainYellowColor, + trainBlueColor: style.trainBlueColor, + textFontHSDA: TextFontHSDA, + textAlign: 'middle', + textVerticalAlign: 'top' + }) : ''; + + let serviceNumber = style.Train.serviceNumberPrefix + (model.serviceNumber || style.Train.defaultServiceNumber) + '';// 服务号(表号) + let tripNumber = style.Train.tripNumberPrefix + (style.Train.defaultDirectionCode? + (model.directionCode||style.Train.defaultDirectionCode) + (model.tripNumber || style.Train.defaultTripNumber) + :model.tripNumber || style.Train.defaultTripNumber) + ''; // 车次号 + let targetCode = style.Train.targetCodePrefix + (model.targetCode || style.Train.defaultTargetCode) + ''; // 目的地码 + let groupNumber = style.Train.groupNumberPrefix + (model.groupNumber || style.Train.defaultGroupNumber) + ''; // 车组号 + + this.textTrainServer = new TextTrainServer({ + zlevel: model.zlevel, + z: model.z, + point: model.point, + lrPadding: style.Train.lrPadding, + upPadding: style.Train.upPadding, + serviceNumber: serviceNumber, + trainBrownColor: style.trainTextColor, + textFont: textFont, + trainBodyOnMouseOver: style.Train.trainBodyOnMouseOver, + trainBodyOnMouseOut: style.Train.trainBodyOnMouseOut, + }); + + this.textTrainTarget = new TextTrainTarget({ + zlevel: model.zlevel, + z: model.z, + point: model.point, + trainWidth: model.style.Train.trainWidth, + lrPadding: style.Train.lrPadding, + upPadding: style.Train.upPadding, + tripNumber: tripNumber, + trainYellowColor: style.trainTextColor, + textFont: textFont, + trainBodyOnMouseOver: style.Train.trainBodyOnMouseOver, + trainBodyOnMouseOut: style.Train.trainBodyOnMouseOut, + }); + + this.textTrainNumber = new TextTrainNumber({ + zlevel: model.zlevel, + z: model.z, + point: model.point, + lrPadding: style.Train.lrPadding, + upPadding: style.Train.upPadding, + targetCode: targetCode, + trainTextColor: style.trainTextColor, + textFont: textFont, + trainBodyOnMouseOver: style.Train.trainBodyOnMouseOver, + trainBodyOnMouseOut: style.Train.trainBodyOnMouseOut, + }); + + this.textTrainTargetNumber = new TextTrainTargetNumber({ + zlevel: model.zlevel, + z: model.z, + point: model.point, + lrPadding: style.Train.lrPadding, + upPadding: style.Train.upPadding, + groupNumber: groupNumber, + trainTextColor: style.trainTextColor, + textFont: textFont, + trainBodyOnMouseOver: style.Train.trainBodyOnMouseOver, + trainBodyOnMouseOut: style.Train.trainBodyOnMouseOut, + }); + // 根据列车类型设置显示格式 + if( style.Train.specialTrainType.length > 0){ + style.Train.specialTrainType.forEach((item) =>{ + if (model.type === item.type) { + serviceNumber = item.serviceNumber; + model.nameFormat = item.nameFormat; + } + }) + } + if ( style.Train.dynamicLoadingDisplay ){ + this.formatChangePosition(model,style) + }else { + this.add(this.textTrainServer); + this.add(this.textTrainTarget); + this.add(this.textHSDA); + } + this.add(this.train); + + } + setMouseOver() { + // 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); + } + removeTrainDetail() { + this.remove(this.arrowText); + // store.dispatch('map/setTrainDetails', null); + } + setTrainColor(color) { + this.train && this.train.setColor('fill', color); + } + setTextTrainServerColor(color) { + this.textTrainServer.setColor('textFill', color); + this.textTrainServer.setColor('textStroke', color); + } + setTextTrainTargetColor(color) { + this.textTrainTarget.setColor('textFill', color); + this.textTrainTarget.setColor('textStroke', color); + } + setHShow(isShow) { + this.textHSDA && this.textHSDA.setHShow(isShow); + } + setSShow(isShow) { + this.textHSDA && this.textHSDA.setSShow(isShow); + } + setDShow(isShow) { + this.textHSDA && this.textHSDA.setDShow(isShow); + } + setAShow(isShow) { + this.textHSDA && this.textHSDA.setAShow(isShow); + } + formatChangePosition(model, style){ + if (model.nameFormat) { + let arr = model.nameFormat.split(':'); + arr.forEach(ele => { + if (ele == 'targetCode') { + this.add(this.textTrainNumber); + } else if (ele == 'serviceNumber') { + let show = arr.includes('targetCode'); + if (show) { + this.textTrainServer.setShapeStyle('x', parseInt(model.point.x + (3 * model.fontSize * (2 / 3)) - 3 - style.Train.lrPadding)); + } + this.add(this.textTrainServer); + } else if (ele == 'tripNumber') { + let show = arr.includes('targetCode'); + let serverNoShow = arr.includes('serviceNumber'); + if (show) { + this.textTrainTarget.setStsetShapeStyleyle('x', parseInt(model.point.x + (3 * model.fontSize * (2 / 3)) - 3 - style.Train.lrPadding)); + } + if (serverNoShow) { + this.textTrainTarget.setShapeStyle('x', parseInt(model.point.x + (2 * model.fontSize * (2 / 3)) - 3 - style.Train.lrPadding)); + } + if (serverNoShow && show) { + this.textTrainTarget.setShapeStyle('x', parseInt(model.point.x + (5 * model.fontSize * (2 / 3)) - 6.5 - style.Train.lrPadding)); + } + this.add(this.textTrainTarget); + } else if (ele == 'groupNumber') { + let show = arr.includes('targetCode'); + let serverNoShow = arr.includes('serviceNumber'); + if (show) { + this.textTrainTargetNumber.setShapeStyle('x', parseInt(model.point.x + (3 * model.fontSize * (2 / 3)) - 3 - style.Train.lrPadding)); + } + if (serverNoShow) { + this.textTrainTargetNumber.setShapeStyle('x', parseInt(model.point.x + (2 * model.fontSize * (2 / 3)) - 3 - style.Train.lrPadding)); + } + if (serverNoShow && show) { + this.textTrainTargetNumber.setShapeStyle('x', parseInt(model.point.x + (5 * model.fontSize * (2 / 3)) - 6.5 - style.Train.lrPadding)); + } + this.add(this.textTrainTargetNumber); + } + }); + } else { + this.textTrainServer.setStyle('x', parseInt(model.point.x + 27 - style.Train.lrPadding)); + this.textTrainTarget.setStyle('x', parseInt(model.point.x + 43 - style.Train.lrPadding)); + this.add(this.textTrainServer); + this.add(this.textTrainTarget); + this.add(this.textTrainNumber); + } + } +} diff --git a/src/jmap/shape/Train/TrainHead/index.js b/src/jmap/shape/Train/TrainHead/index.js new file mode 100644 index 000000000..fe6f58e06 --- /dev/null +++ b/src/jmap/shape/Train/TrainHead/index.js @@ -0,0 +1,66 @@ +import Group from "zrender/src/container/Group"; +import Rect from "zrender/src/graphic/shape/Rect"; +import Polygon from "zrender/src/graphic/shape/Polygon"; + +/** 车头*/ +export default class TrainHead extends Group { + constructor(model) { + super(); + this.model = model; + this._create(); + } + _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 * (style.trainConntWidth), + y: model.point.y, + width: style.trainConntWidth * model.scale, + height: style.Train.trainHeadRectHeight, + }, + style: { + lineWidth: 0.1, + stroke: style.trainSidelineColor, + fill: style.Train.trainHeadFillColor + } + }); + this.arrow = new Polygon({ + zlevel: model.zlevel, + z: model.z, + shape: { + points: [ + [model.point.x + model.drect * (style.Train.trainHeadTriangleFirst.x), model.point.y + style.Train.trainHeadTriangleFirst.y], + [model.point.x + model.drect * (style.Train.trainHeadTriangleSecond.x), model.point.y + style.Train.trainHeadTriangleSecond.y], + [model.point.x + model.drect * (style.Train.trainHeadTriangleThird.x), model.point.y + style.Train.trainHeadTriangleThird.y] + ], + }, + style: { + lineWidth: 0.1, + stroke: style.trainSidelineColor, + fill: style.Train.trainHeadFillColor + } + }); + + this.add(this.line); + this.add(this.arrow); + } + setColor(color) { + this.line && this.line.setStyle('fill', color); + this.arrow && this.arrow.setStyle('fill', color); + } + setLineShow(isShow) { + isShow ? this.line.show() : this.line.hide(); + } + setArrowShow(isShow) { + isShow ? this.arrow.show() : this.arrow.hide(); + } + setInvisible(invisible) { + this.eachChild((child) => { + child.attr('invisible', invisible); + }); + } +} diff --git a/src/jmap/shape/Train/index.js b/src/jmap/shape/Train/index.js index d6208bc7c..9d062d927 100644 --- a/src/jmap/shape/Train/index.js +++ b/src/jmap/shape/Train/index.js @@ -1,276 +1,8 @@ import Group from 'zrender/src/container/Group'; -import Text from 'zrender/src/graphic/Text'; -import Rect from 'zrender/src/graphic/shape/Rect'; -import Polygon from 'zrender/src/graphic/shape/Polygon'; import BoundingRect from 'zrender/src/core/BoundingRect'; +import TrainHead from './TrainHead/index'; +import TrainBody from './TrainBody/index'; -/** 车身*/ -class TrainBody extends Group { - constructor(model) { - super(); - this.model = model; - this._create(); - } - - _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.destinationStatus) { - case '01': destinationText = '准点'; break; - case '02': destinationText = '早点'; break; - case '03': destinationText = '严重早点'; break; - case '04': destinationText = '晚点'; break; - case '05': destinationText = '严重晚点'; break; - default: destinationText = '未知'; break; - } - - // 文字描述 - this.arrowText = new Text({ - zlevel: model.zlevel, - z: model.z, - style: { - x: model.point.x + 50, - y: model.point.y + 25, - 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: style.tipBackgroundColor - } - }); - - this.train = new Rect({ - zlevel: model.zlevel, - z: model.z, - shape: { - x: model.point.x, - y: model.point.y, - width: style.trainWidth, - height: style.trainHeight - }, - style: { - lineWidth: 0.1, - stroke: style.trainSidelineColor, - fill: style.trainBrown1Color - }, - cursor: 'pointer' - }); - - let lrPadding = 3; // 两边间隔 - let upPadding = 4; // 上边距离 - const beginX = (model.point.x + lrPadding); - 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, - style: { - x: parseInt(beginX + margin * 0), - y: parseInt(beginY), - text: 'H', - textFill: style.trainYellowColor, - textFont: TextFontHSDA, - textAlign: 'middle', - textVerticalAlign: 'top' - } - }); - - this.textS = new Text({ - zlevel: model.zlevel, - z: model.z, - style: { - x: parseInt(beginX + margin * 1), - y: parseInt(beginY), - text: 'S', - textFill: style.trainBlueColor, - textFont: TextFontHSDA, - textAlign: 'middle', - textVerticalAlign: 'top' - } - }); - - this.textD = new Text({ - zlevel: model.zlevel, - z: model.z, - style: { - x: parseInt(beginX + margin * 2), - y: parseInt(beginY), - text: 'D', - textFill: style.trainGreenColor, - textFont: TextFontHSDA, - textAlign: 'middle', - textVerticalAlign: 'top' - } - }); - - this.textA = new Text({ - zlevel: model.zlevel, - z: model.z, - style: { - x: parseInt(beginX + margin * 3), - y: parseInt(beginY), - text: 'A', - textFill: style.trainRedColor, - textFont: TextFontHSDA, - textAlign: 'middle', - textVerticalAlign: 'top' - } - }); - - lrPadding = 4; // 两边间隔 - upPadding = 4; // 上边距离 - let serviceNumber = model.serviceNumber || 'AA'; - let tripNumber = model.tripNumber || 'DDD'; - - serviceNumber = '00' + serviceNumber; - tripNumber = '000' + tripNumber; - this.textTrainServer = new Text({ - zlevel: model.zlevel, - z: model.z, - style: { - x: parseInt(model.point.x + lrPadding), - y: parseInt(model.point.y + upPadding), - text: serviceNumber.substring(serviceNumber.length - 2), - textFill: style.trainBrownColor, - textFont: textFont, - textAlign: 'left', - textVerticalAlign: 'top' - } - }); - - this.textTrainTarget = new Text({ - zlevel: model.zlevel, - z: model.z, - style: { - x: parseInt(model.point.x + style.trainWidth - lrPadding), - y: parseInt(model.point.y + upPadding), - text: tripNumber.substring(tripNumber.length - 3), - textFill: style.trainYellowColor, - textFont: textFont, - textAlign: 'right', - textVerticalAlign: 'top' - } - }); - this.add(this.train); - this.add(this.textH); - this.add(this.textS); - this.add(this.textD); - this.add(this.textA); - this.add(this.textTrainServer); - this.add(this.textTrainTarget); - } - setMouseOver() { - // 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); - } - setTrainColor(color) { - this.train && this.train.setStyle('fill', color); - } - setTextTrainServerColor(color) { - this.textTrainServer.setStyle('textFill', color); - this.textTrainServer.setStyle('textStroke', color); - } - setTextTrainTargetColor(color) { - this.textTrainTarget.setStyle('textFill', color); - this.textTrainTarget.setStyle('textStroke', color); - } - setHShow(isShow) { - isShow ? this.textH.show() : this.textH.hide(); - } - setSShow(isShow) { - isShow ? this.textS.show() : this.textS.hide(); - } - setDShow(isShow) { - isShow ? this.textD.show() : this.textD.hide(); - } - setAShow(isShow) { - isShow ? this.textA.show() : this.textA.hide(); - } - -} - -/** 车头*/ -class TrainHead extends Group { - constructor(model) { - super(); - this.model = model; - this._create(); - } - _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 * (style.trainConntWidth), - y: model.point.y, - width: style.trainConntWidth, - height: style.trainHeight + 2 * style.trainMoreLength - }, - style: { - lineWidth: 0.1, - stroke: style.trainSidelineColor, - fill: style.trainBackground - } - }); - - 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 - 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: style.trainSidelineColor, - fill: style.trainBackground - } - }); - - this.add(this.line); - this.add(this.arrow); - } - setColor(color) { - this.line && this.line.setStyle('fill', color); - this.arrow && this.arrow.setStyle('fill', color); - } - setLineShow(isShow) { - isShow ? this.line.show() : this.line.hide(); - } - setArrowShow(isShow) { - isShow ? this.arrow.show() : this.arrow.hide(); - } - setInvisible(invisible) { - this.eachChild((child) => { - child.attr('invisible', invisible); - }); - } -} /** 列车 */ export default class Train extends Group { constructor({ _code, _type, zlevel, model, state }, style) { @@ -283,11 +15,13 @@ export default class Train extends Group { this.style = style; this.z = 40; this.section = null; - this.selected = false; - this.fontSize = model.nameFontSize || style.trainTextFontSize; - this.newScale = this.fontSize / style.trainTextFontSize; + this.fontSize = model.nameFontSize || style.Train.trainTextFontSize; + this.newScale = this.fontSize / style.Train.trainTextFontSize; this._create(); this.setState(state); + /*this.on('mousedown', this.mouseclick); + this.on('mouseout', this.mouseleave); + this.on('mouseover', this.mouseenter);*/ } _computed() { @@ -301,13 +35,13 @@ 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); + this.point.x = this.point.x + model.trainWindowModel.width / 2 + Math.abs((style.Train.trainWidth - model.trainWindowModel.width) / 2); break; case '02': // 从左向右 - this.point.x = this.point.x + model.trainWindowModel.width / 2 - style.trainConntWidth * this.newScale - style.trainWidth; + this.point.x = this.point.x + model.trainWindowModel.width / 2 - style.Train.trainConntWidth * this.newScale - style.Train.trainWidth; break; case '03': // 从右向左 - this.point.x = this.point.x - model.trainWindowModel.width / 2 + style.trainConntWidth * this.newScale; + this.point.x = this.point.x - model.trainWindowModel.width / 2 + style.Train.trainConntWidth * this.newScale; break; } } else { @@ -315,11 +49,11 @@ export default class Train extends Group { this.traingle = null; } } - _create() { - const model = this.model; - const style = this.style; this._computed(); + this.isChangeTrainWidth(this.model,this.style); + const model = this.model; + const style = this.style; if (this.point) { this.trainB = new TrainBody({ zlevel: this.zlevel, @@ -335,19 +69,21 @@ export default class Train extends Group { sectionModel: model.sectionModel, runControlStatus: model.runControlStatus, runStatus: model.runStatus, + fontSize: this.fontSize, + type: model.type, speed: model.speed, maLen: model.maLen }); - this.trainL = new TrainHead({ style: style, zlevel: this.zlevel, z: this.z, point: { - x: this.point.x - style.trainHeadDistance, + x: this.point.x - style.Train.trainHeadDistance, y: this.point.y }, - drect: -1 + drect: -1, + scale: this.newScale }); this.trainR = new TrainHead({ @@ -355,22 +91,48 @@ export default class Train extends Group { zlevel: this.zlevel, z: this.z, point: { - x: this.point.x + style.trainWidth + style.trainHeadDistance, + x: this.point.x + style.Train.trainWidth + style.Train.trainHeadDistance, y: this.point.y }, - drect: 1 + drect: 1, + scale: this.newScale }); + this.add(this.trainB); this.add(this.trainL); this.add(this.trainR); } + /*let rect = Object.assign({}, this.getBoundingRect()); + rect.x -= theme.trainWidth / 2; + rect.y -= 5; + rect.width += theme.trainWidth; + rect.height += 10; + + this.trainBorder = new Rect({ + zlevel: model.zlevel, + z: this.z, + silent: true, + shape: rect, + style: { + lineDash: [3, 3], + stroke: theme.borderColor, + fill: theme.transparentColor + } + }) + + this.add(this.trainBorder); + + this.mouseStatusRecover();*/ } + + //获取设备提示坐标 getShapeTipPoint() { return { x: (this.train.shape.x), y: (this.train.shape.y) }; } + // 恢复颜色状态 recover() { this.trainB.setHShow(false); @@ -382,69 +144,62 @@ 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); - break; - } + if(this.style.Train.serverNoType.length>0) { + let flag = this.style.Train.serverNoType.some((item) =>{ + if (type === item.type){ + this.trainB.setTextTrainServerColor(item.showColor); + return true; + } + }); + if (this.style.Train.defaultServerNoColor && !flag) { + this.trainB.setTextTrainServerColor(this.style.this.style.Train.defaultServerNoColor); + } + } } + // 设置目的地状态 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); - break; - } + if(this.style.Train.destinationStatus.length>0) { + let flag = this.style.Train.destinationStatus.some((item) =>{ + if (status === item.status){ + this.trainB.setTextTrainTargetColor(item.showColor); + return true; + } + }); + if(this.style.Train.defaultDestinationColor && !flag){ + this.trainB.setTextTrainTargetColor(this.style.Train.defaultDestinationColor) + } + } } + // 设置运行方向状态类型 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; - } + if (this.style.Train.directionType.length > 0){ + this.style.Train.directionType.some((item) => { + if (type === item.type){ + this.trainL.setLineShow(item.lineLShow); + this.trainL.setArrowShow(item.arrowLShow); + this.trainR.setLineShow(item.lineRShow); + this.trainR.setLineShow(item.arrowRShow); + return true; + } + }); + } } // 设置列车停止方向类型 setDirectionStopType(type) { - switch (type) { - case '01': // 未知方向 - break; - case '02': // 从左往右 上行 - this.trainR.setLineShow(true); - break; - case '03': // 从右往左 下行 - this.trainL.setLineShow(true); - break; - } + if(this.style.Train.directionStopType.length > 0) { + this.style.Train.directionStopType.some((item) => { + if (type === item.type){ + this.trainL.setLineShow(item.lineLShow); + this.trainR.setLineShow(item.lineRShow); + return true; + } + }); + } } // 设置运行状态 setRunStatus(status) { @@ -460,77 +215,60 @@ export default class Train extends Group { } // 设置运行模式 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; - } + if(this.style.Train.runModeStatus.length > 0) { + this.style.Train.runModeStatus.some((item) => { + if (status === item.status) { + this.trainL.setColor(item.trainLColor); + this.trainR.setColor(item.trainRColor); + return true; + } + }); + } } - // 设置运行控制状态类型 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; - } + if(this.style.Train.runControlStatus.length > 0) { + this.style.Train.runControlStatus.some((item) => { + if (status === item.status) { + this.trainB.setHShow(item.hShow); + this.trainB.setSShow(item.sShow); + return true; + } + }); + } } // 设置车门状态类型 setDoorStatus(status) { - switch (status) { - case '01': // 关门 - this.trainB.setDShow(false); - break; - case '02': // 开门 - this.trainB.setDShow(true); - break; - } + if (this.style.Train.doorStatus.length > 0) { + this.style.Train.doorStatus.some((item) => { + if(status === item.status){ + this.trainB.setDShow(item.dShow); + return true; + } + }); + } } // 设置通信状态类型 setCommunicationStatus() { - switch (status) { - case '01': // 正常 - this.trainB.setTrainColor(this.style.trainBrown1Color); - break; - case '02': // 故障 - this.trainB.setTrainColor(this.style.trainGrayColor); - break; - } + if (this.style.Train.communicationStatus.length > 0) { + this.style.Train.doorStatus.some((item) => { + if (status === item.status){ + this.trainB.setTrainColor(item.trainColor); + return true; + } + }); + } } // 设置报警状态 setAlarmStatus(status) { - switch (status) { - case '01': // 不报警 - this.trainB.setAShow(false); - break; - case '02': // 报警 - this.trainB.setAShow(true); - break; - } + if (this.style.Train.alarmStatus.length >0) { + this.style.Train.alarmStatus.some((item) => { + if (status === item.status){ + this.trainB.setAShow(item.aShow); + return true; + } + }); + } } // 设置状态 @@ -547,25 +285,97 @@ export default class Train extends Group { this.setAlarmStatus(state.alarmStatus); // 设置报警状态 } } + // 是否根据车身上车组号、服务号、车次号、目的地码显示情况改变列车长度 + isChangeTrainWidth(model,style) { + if(!style.Train.changeTrainWidth) + return; + if (model.nameFormat) { + let arr = model.nameFormat.split(':'); + arr.forEach(ele => { + switch (ele) { + case 'targetCode': { + this.size += 3; + break; + } + case 'serviceNumber': { + this.size += 2; + break; + } + case 'tripNumber': { + this.size += 4; + break; + } + case 'groupNumber': { + this.size += 3; + break; + } + } + }); + } else { + this.size = 9; + } - // 获取列车包围框 - getBoundingRect() { - const list = [this.trainB, this.trainL, this.trainR]; - let rect = null; + this.style.Train.trainWidth = this.size * this.fontSize * (2 / 3) - 16; + } + removeTrainDetail() { + this.trainB.removeTrainDetail(); + } + //获取列车包围框 + /*getBoundingRect() { + let list = [this.trainB, this.trainL, this.trainR]; + let rect = null; - list.forEach(elem => { - if (elem) { - const tempRect = elem.getBoundingRect(); - if (tempRect.x && tempRect.y && tempRect.width && tempRect.height) { - if (rect) { - rect.union(tempRect); - } else { - rect = tempRect; - } - } - } - }); + list.forEach(elem => { + if (elem) { + let tempRect = elem.getBoundingRect(); + if (tempRect.x && tempRect.y && tempRect.width && tempRect.height) { + if (rect) { + rect.union(tempRect); + } else { + rect = tempRect; + } + } + } + }); - return rect || new BoundingRect(0, 0, 0, 0); - } + 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/theme/batong.js b/src/jmap/theme/batong.js index 2f20406c3..4abb5264c 100644 --- a/src/jmap/theme/batong.js +++ b/src/jmap/theme/batong.js @@ -241,6 +241,111 @@ class Batong extends defaultSkin { /** 道岔单锁颜色*/ switchMonolockColor: '#870E10' }; + this[deviceType.Train] = { + /** 车身line宽 */ + trainBodyLineWidth: 0, + /** 车身鼠标悬浮事件 */ + trainBodyOnMouseOver: {train: true, textTrainNumber: true, textTrainServer: true, textTrainTarget: true, textTrainTargetNumber: true}, + /** 车身鼠标移出事件 */ + trainBodyOnMouseOut: {train: true, textTrainNumber: true, textTrainServer: true, textTrainTarget: true, textTrainTargetNumber: true}, + /** 目的地码前缀*/ + targetCodePrefix: '000', + /** 默认目的地码 */ + defaultTargetCode: 'AAA', + /** 服务号(表号)前缀 */ + serviceNumberPrefix: '00', + /** 默认服务号（表号） */ + defaultServiceNumber: 'BB', + /** 车次号前缀 */ + tripNumberPrefix: '0000', + /** 默认车次号1 */ + defaultDirectionCode: 'D', + /** 默认车次号2 */ + defaultTripNumber: 'CCC', + /** 车组号前缀 */ + groupNumberPrefix: '000', + /** 默认车组号 */ + defaultGroupNumber: 'EEE', + /** 列车车头比车身高出的长度,上下相比车体伸出去的边框*/ + trainMoreLength: 1, + /** 列车车头三角坐标1偏移量 */ + trainHeadTriangleFirst: { x: 0,y: 0}, + /** 列车车头三角坐标2偏移量 */ + trainHeadTriangleSecond: { x: 4, y: 8.5}, + /** 列车车头三角坐标3偏移量 */ + trainHeadTriangleThird: { x: 0, y: 15}, + /** 列车高度*/ + trainHeight: 17, + /** 列车和车头之间的间距*/ + trainHeadDistance: 2, + /** 列车车头矩形高度 */ + trainHeadRectHeight: 15, + /** 列车长度*/ + trainWidth: 76, + /** 列车竖杠的宽度*/ + trainConntWidth: 4, + /** 是否根据车身上车组号、服务号、车次号、目的地码显示情况改变列车长度 */ + changeTrainWidth: true, + /** 是否根据nameFormat去动态加载车组号、服务号、车次号、目的地码 */ + dynamicLoadingDisplay: true, + /** 特殊列车类型需设置显示格式 */ + specialTrainType: [], + /** 两边间隔 */ + lrPadding: 1, + /** 上边距离 */ + upPadding: 1, + /** 列车字号*/ + trainTextFontSize: 15, + /** 目的地状态 01准点 02早点 03严重早点 04晚点 05严重晚点 06头码车 07ATP切除 */ + destinationStatus: [ + {status: '01',showColor: '#FFFFFF'}, + {status: '02',showColor: '#00FF00'}, + {status: '03',showColor: '#3265FF'}, + {status: '04',showColor: '#9B4A09'}, + {status: '05',showColor: '#EF0C08'}, + {status: '06',showColor: '#FFFFFF'}, + {status: '07',showColor: '#FFFF00'}, + ], + /** 默认字体 族类*/ + textFontFormat: '宋体', + /** 列车HDSA字号*/ + trainHSDATextFontSize: 8, + /** 服务号状态类型 eg:{type: '01', showColor: '#FFFFFF'} */ + serverNoType: [], + /** 运行方向状态类型对应车头显示状态 01未知方向 02从左往右 上行 03从右往左 下行*/ + directionType: [ + {type: '01', lineLShow: false, lineRShow: false, arrowLShow: false, arrowRShow: false }, + {type: '02', lineLShow: false, lineRShow: false, arrowLShow: false, arrowRShow: true }, + {type: '03', lineLShow: false, lineRShow: false, arrowLShow: true, arrowRShow: false } + ], + /** 列车停止方向类型对应车头显示状态 01未知方向 02从左往右 上行 03从右往左 下行 */ + directionStopType: [ + {type: '01', lineLShow: false, lineRShow: false}, + {type: '02', lineLShow: false, lineRShow: true}, + {type: '03', lineLShow: true, lineRShow: false} + ], + /** 列车运行模式对应车头颜色 01信号中断 02 ATO自动驾驶模式AM 03 ATP监控下的人工驾驶模式CM + * 04 限制人工驾驶模式RM 05 非限制人工驾驶模式RM*/ + runModeStatus: [ + {status: '01', trainLColor: '#EF0C08', trainRColor: '#EF0C08'}, + {status: '01', trainLColor: '#00FF00', trainRColor: '#00FF00'}, + {status: '01', trainLColor: '#FFFF00', trainRColor: '#FFFF00'}, + {status: '01', trainLColor: '#EA700D', trainRColor: '#EA700D'}, + {status: '01', trainLColor: '#A0522D', trainRColor: '#A0522D'} + ], + /** 设置运行控制状态类型 eg:{status: '01', hShow: false, sShow: false}, */ + runControlStatus: [], + /** 设置车门状态类型 eg:{status: '01', dShow: false}, */ + doorStatus: [], + /** 设置通信状态 eg:{status: '01', trainColor:'#725A64'}, */ + communicationStatus: [], + /** 设置报警状态 eg:{status: '01', aShow: false}, */ + alarmStatus: [], + /** 列车车头矩形填充颜色 */ + trainHeadFillColor: '#EF0C08', + /** 列车车身填充颜色 */ + trainBodyFillColor: '#000000', + }; } } diff --git a/src/jmap/theme/bejing.js b/src/jmap/theme/bejing.js index e4af39b45..4c6f282f0 100644 --- a/src/jmap/theme/bejing.js +++ b/src/jmap/theme/bejing.js @@ -240,8 +240,138 @@ class Beijing extends defaultSkin { /** 道岔反位颜色*/ switchInversionColor: '#9C9D09', /** 道岔单锁颜色*/ - switchMonolockColor: '#870E10' + switchMonolockColor: '#870E10', }; + this[deviceType.Train] = { + /** 车身line宽 */ + trainBodyLineWidth: 0.1, + /** 车身鼠标悬浮事件 */ + trainBodyOnMouseOver: {train: true, textTrainNumber: false, textTrainServer: false, textTrainTarget: false, textTrainTargetNumber: false}, + /** 车身鼠标移出事件 */ + trainBodyOnMouseOut: {train: true, textTrainNumber: false, textTrainServer: false, textTrainTarget: false, textTrainTargetNumber: false}, + /** 服务号(表号)前缀 */ + serviceNumberPrefix: '00', + /** 默认服务号（表号） */ + defaultServiceNumber: 'AA', + /** 车次号前缀 */ + tripNumberPrefix: '000', + /** 默认车次号2 */ + defaultTripNumber: 'DDD', + /** 列车车头比车身高出的长度,上下相比车体伸出去的边框*/ + trainMoreLength: 0, + /** 列车车头三角坐标1偏移量 */ + trainHeadTriangleFirst: { x: 7, y: 1}, + /** 列车车头三角坐标2偏移量 */ + trainHeadTriangleSecond: { x: 13, y: 10}, + /** 列车车头三角坐标3偏移量 */ + trainHeadTriangleThird: { x: 7, y: 19}, + /** 列车高度*/ + trainHeight: 20, + /** 列车和车头之间的间距*/ + trainHeadDistance: 4, + /** 列车车头矩形高度 */ + trainHeadRectHeight: 20, + /** 列车长度*/ + trainWidth: 40, + /** 列车竖杠的宽度*/ + trainConntWidth: 3, + /** 是否根据车身上车组号、服务号、车次号、目的地码显示情况改变列车长度 */ + changeTrainWidth: false, + /** 是否根据nameFormat去动态加载车组号、服务号、车次号、目的地码 */ + dynamicLoadingDisplay: false, + /** 特殊列车类型需设置显示格式 */ + specialTrainType: [], + /** 两边间隔 */ + lrPadding: 4, + /** 上边距离 */ + upPadding: 4, + /** HSDA两边间隔 */ + lrPaddingHSDA: 3, + /** HSDA上边距离 */ + upPaddingHSDA: 4, + /** 列车字号*/ + trainTextFontSize: 12, + /** 目的地状态 01准点 02早点 03晚点 04头码车 */ + destinationStatus: [ + {status: '01',showColor: '#FFFFFF'}, + {status: '02',showColor: '#00FF00'}, + {status: '03',showColor: '#A0522D'}, + {status: '04',showColor: '#FFFF00'}, + ], + /** 默认目的地状态显示颜色 */ + defaultDestinationColor: '#000000', + /** 默认字体 族类*/ + textFontFormat: 'consolas', + /** 列车HDSA字号*/ + trainHSDATextFontSize: 9, + /** 服务号状态类型 01显示服务号 计划车 02显示车组号: 头码车与人工车 */ + serverNoType: [ + {type: '01', showColor: '#FFFFFF'}, + {type: '01', showColor: '#FFFFFF'}, + ], + /** 默认服务号状态显示颜色 */ + defaultServerNoColor: '#000000', + /** 列车运行方向状态类型对应车头显示状态 01未知方向 02从左往右 上行 03从右往左 下行*/ + directionType: [ + {type: '01', lineLShow: true, lineRShow: true, arrowLShow: false, arrowRShow: false }, + {type: '02', lineLShow: false, lineRShow: true, arrowLShow: false, arrowRShow: true }, + {type: '03', lineLShow: true, lineRShow: false, arrowLShow: true, arrowRShow: false } + ], + /** 列车停止方向类型对应车头显示状态 01未知方向 02从左往右 上行 03从右往左 下行 */ + directionStopType: [ + {type: '01', lineLShow: false, lineRShow: false}, + {type: '02', lineLShow: false, lineRShow: true}, + {type: '03', lineLShow: true, lineRShow: false} + ], + /** 列车运行模式对应车头颜色 01未知 02 ATO自动驾驶模式AM 03 ATP监控下的人工驾驶模式CM + * 04 限制人工驾驶模式RM 05 非限制人工驾驶模式RM*/ + runModeStatus: [ + {status: '01', trainLColor: '#FFFFFF', trainRColor: '#FFFFFF'}, + {status: '01', trainLColor: '#00FF00', trainRColor: '#00FF00'}, + {status: '01', trainLColor: '#FFFF00', trainRColor: '#FFFF00'}, + {status: '01', trainLColor: '#A0522D', trainRColor: '#A0522D'}, + {status: '01', trainLColor: '#A0522D', trainRColor: '#A0522D'} + ], + /** 设置运行控制状态类型 01正常 02扣车 03停跳 */ + runControlStatus: [ + {status: '01', hShow: false, sShow: false}, + {status: '02', hShow: true, sShow: false}, + {status: '03', hShow: false, sShow: true} + ], + /** 设置车门状态类型 01关门 02开门 */ + doorStatus: [ + {status: '01', dShow: false}, + {status: '02', dShow: true} + ], + /** 设置通信状态 01正常 02故障 */ + communicationStatus: [ + {status: '01', trainColor:'#725A64'}, + {status: '02', trainColor:'#C0C0C0'} + ], + /** 设置报警状态 01不报警 02报警 */ + alarmStatus: [ + {status: '01', aShow: false}, + {status: '02', aShow: true} + ], + /** 列车车头矩形填充颜色 */ + trainHeadFillColor: '#000000', + /** 列车车身填充颜色 */ + trainBodyFillColor: '#725A64', + /** textH文本 */ + textHContent: 'H', + /** textS文本 */ + textSContent: 'S', + /** textD文本 */ + textDContent: 'D', + /** textA文本 */ + textAContent: 'A', + /** 是否需创建textHSDA对象 */ + haveTextHSDA: true, + /** 是否需创建arrowText对象 */ + haveArrowText: true, + /** 是否需创建trainBorder对象 */ + haveTrainBorder: true, + } } } diff --git a/src/jmap/theme/chengdu.js b/src/jmap/theme/chengdu.js index f7d132424..b480035d1 100644 --- a/src/jmap/theme/chengdu.js +++ b/src/jmap/theme/chengdu.js @@ -244,6 +244,115 @@ class Beijing extends defaultSkin { /** 道岔单锁颜色*/ switchMonolockColor: '#FFFFFF' }; + this[deviceType.Train] = { + /** 车身line宽 */ + trainBodyLineWidth: 0.5, + /** 车身鼠标悬浮事件 */ + trainBodyOnMouseOver: {train: false, textTrainNumber: false, textTrainServer: false, textTrainTarget: false, textTrainTargetNumber: false}, + /** 车身鼠标移出事件 */ + trainBodyOnMouseOut: {train: false, textTrainNumber: false, textTrainServer: false, textTrainTarget: false, textTrainTargetNumber: false}, + /** 服务号(表号)前缀 */ + serviceNumberPrefix: '00', + /** 默认服务号（表号） */ + defaultServiceNumber: 'AA', + /** 车次号前缀 */ + tripNumberPrefix: '000', + /** 默认车次号2 */ + defaultTripNumber: 'DDD', + /** 列车车头比车身高出的长度,上下相比车体伸出去的边框*/ + trainMoreLength: 1, + /** 列车车头三角坐标1偏移量 */ + trainHeadTriangleFirst: { x: 4, y: 0}, + /** 列车车头三角坐标2偏移量 */ + trainHeadTriangleSecond: { x: 10, y: 9.5}, + /** 列车车头三角坐标3偏移量 */ + trainHeadTriangleThird: { x: 4, y: 18}, + /** 列车高度*/ + trainHeight: 18, + /** 列车和车头之间的间距*/ + trainHeadDistance: 2, + /** 列车车头矩形高度 */ + trainHeadRectHeight: 18, + /** 列车长度*/ + trainWidth: 60, + /** 列车竖杠的宽度*/ + trainConntWidth: 2, + /** 是否根据车身上车组号、服务号、车次号、目的地码显示情况改变列车长度 */ + changeTrainWidth: false, + /** 是否根据nameFormat去动态加载车组号、服务号、车次号、目的地码 */ + dynamicLoadingDisplay: false, + /** 特殊列车类型需设置显示格式 */ + specialTrainType: [], + /** 两边间隔 */ + lrPadding: 4, + /** 上边距离 */ + upPadding: 4, + /** HSDA两边间隔 */ + lrPaddingHSDA: 4, + /** HSDA上边距离 */ + upPaddingHSDA: 4, + /** 列车字号*/ + trainTextFontSize: 12, + /** 目的地状态 eg:{status: '01',showColor: '#FFFFFF'} */ + destinationStatus: [], + /** 默认字体 族类*/ + textFontFormat: 'consolas', + /** 列车HDSA字号*/ + trainHSDATextFontSize: 9, + /** 服务号状态类型 eg:{type: '01', showColor: '#FFFFFF'} */ + serverNoType: [], + /** 列车运行方向状态类型对应车头显示状态 01未知方向 02从左往右 上行 03从右往左 下行*/ + directionType: [ + {type: '01', lineLShow: true, lineRShow: true, arrowLShow: false, arrowRShow: false }, + {type: '02', lineLShow: false, lineRShow: true, arrowLShow: false, arrowRShow: true }, + {type: '03', lineLShow: true, lineRShow: false, arrowLShow: true, arrowRShow: false } + ], + /** 列车停止方向类型对应车头显示状态 01未知方向 02从左往右 上行 03从右往左 下行 */ + directionStopType: [ + {type: '01', lineLShow: false, lineRShow: false}, + {type: '02', lineLShow: false, lineRShow: true}, + {type: '03', lineLShow: true, lineRShow: false} + ], + /** 列车运行模式对应车头颜色 01未知 02 ATO自动驾驶模式AM 03 ATP监控下的人工驾驶模式CM + * 04 限制人工驾驶模式RM 05 非限制人工驾驶模式RM*/ + runModeStatus: [ + {status: '01', trainLColor: '#FFFFFF', trainRColor: '#FFFFFF'}, + {status: '01', trainLColor: '#00FF00', trainRColor: '#00FF00'}, + {status: '01', trainLColor: '#FFFF00', trainRColor: '#FFFF00'}, + {status: '01', trainLColor: '#A0522D', trainRColor: '#A0522D'}, + {status: '01', trainLColor: '#A0522D', trainRColor: '#A0522D'} + ], + /** 设置运行控制状态类型 01正常 02扣车 03停跳 */ + runControlStatus: [ + {status: '01', hShow: false, sShow: false}, + {status: '02', hShow: true, sShow: false}, + {status: '03', hShow: false, sShow: true} + ], + /** 设置车门状态类型 01关门 02开门 */ + doorStatus: [ + {status: '01', dShow: false}, + {status: '02', dShow: true} + ], + /** 设置通信状态 eg:{status: '01', trainColor:'#725A64'}, */ + communicationStatus: [], + /** 设置报警状态 01不报警 02报警 */ + alarmStatus: [ + {status: '01', aShow: false}, + {status: '02', aShow: true} + ], + /** 列车车头矩形填充颜色 */ + trainHeadFillColor: '#000000', + /** 列车车身填充颜色 */ + trainBodyFillColor: '#3265FF', + /** textH文本 */ + textHContent: '扣', + /** textS文本 */ + textSContent: '跳', + /** textD文本 */ + textDContent: '门', + /** textA文本 */ + textAContent: '警', + } } } diff --git a/src/jmap/theme/fuzhou.js b/src/jmap/theme/fuzhou.js index acca5e351..42b095900 100644 --- a/src/jmap/theme/fuzhou.js +++ b/src/jmap/theme/fuzhou.js @@ -239,6 +239,111 @@ class Fuzhou extends defaultSkin { /** 道岔单锁颜色*/ switchMonolockColor: '#870E10' }; + this[deviceType.Train] = { + /** 车身line宽 */ + trainBodyLineWidth: 0, + /** 车身鼠标悬浮事件 */ + trainBodyOnMouseOver: {train: true, textTrainNumber: false, textTrainServer: true, textTrainTarget: false, textTrainTargetNumber: false}, + /** 车身鼠标移出事件 */ + trainBodyOnMouseOut: {train: true, textTrainNumber: false, textTrainServer: true, textTrainTarget: false, textTrainTargetNumber: false}, + /** 目的地码前缀*/ + targetCodePrefix: '000', + /** 默认目的地码 */ + defaultTargetCode: 'AAA', + /** 服务号(表号)前缀 */ + serviceNumberPrefix: '00', + /** 默认服务号（表号） */ + defaultServiceNumber: 'BB', + /** 车次号前缀 */ + tripNumberPrefix: '0000', + /** 默认车次号1 */ + defaultDirectionCode: 'D', + /** 默认车次号2 */ + defaultTripNumber: 'CCC', + /** 车组号前缀 */ + groupNumberPrefix: '000', + /** 默认车组号 */ + defaultGroupNumber: 'EEE', + /** 列车车头比车身高出的长度,上下相比车体伸出去的边框*/ + trainMoreLength: 1, + /** 列车车头三角坐标1偏移量 */ + trainHeadTriangleFirst: { x: 0,y: 0}, + /** 列车车头三角坐标2偏移量 */ + trainHeadTriangleSecond: { x: 4, y: 8.5}, + /** 列车车头三角坐标3偏移量 */ + trainHeadTriangleThird: { x: 0, y: 15}, + /** 列车高度*/ + trainHeight: 17, + /** 列车和车头之间的间距*/ + trainHeadDistance: 2, + /** 列车车头矩形高度 */ + trainHeadRectHeight: 15, + /** 列车长度*/ + trainWidth: 76, + /** 列车竖杠的宽度*/ + trainConntWidth: 4, + /** 是否根据车身上车组号、服务号、车次号、目的地码显示情况改变列车长度 */ + changeTrainWidth: true, + /** 是否根据nameFormat去动态加载车组号、服务号、车次号、目的地码 */ + dynamicLoadingDisplay: true, + /** 特殊列车类型需设置显示格式 */ + specialTrainType: [{ type: '03', serviceNumber: 'MM', nameFormat: 'serviceNumber:groupNumber'}], + /** 两边间隔 */ + lrPadding: 1, + /** 上边距离 */ + upPadding: 1, + /** 列车字号*/ + trainTextFontSize: 15, + /** 目的地状态 01准点 02早点 03严重早点 04晚点 05严重晚点 06头码车 07ATP切除 */ + destinationStatus: [ + {status: '01',showColor: '#FFFFFF'}, + {status: '02',showColor: '#00FF00'}, + {status: '03',showColor: '#3265FF'}, + {status: '04',showColor: '#9B4A09'}, + {status: '05',showColor: '#EF0C08'}, + {status: '06',showColor: '#FFFFFF'}, + {status: '07',showColor: '#FFFF00'}, + ], + /** 默认字体 族类*/ + textFontFormat: '宋体', + /** 列车HDSA字号*/ + trainHSDATextFontSize: 8, + /** 服务号状态类型 eg:{type: '01', showColor: '#FFFFFF'} */ + serverNoType: [], + /** 运行方向状态类型对应车头显示状态 01未知方向 02从左往右 上行 03从右往左 下行*/ + directionType: [ + {type: '01', lineLShow: false, lineRShow: false, arrowLShow: false, arrowRShow: false }, + {type: '02', lineLShow: false, lineRShow: false, arrowLShow: false, arrowRShow: true }, + {type: '03', lineLShow: false, lineRShow: false, arrowLShow: true, arrowRShow: false } + ], + /** 列车停止方向类型对应车头显示状态 01未知方向 02从左往右 上行 03从右往左 下行 */ + directionStopType: [ + {type: '01', lineLShow: false, lineRShow: false}, + {type: '02', lineLShow: false, lineRShow: true}, + {type: '03', lineLShow: true, lineRShow: false} + ], + /** 列车运行模式对应车头颜色 01信号中断 02 ATO自动驾驶模式AM 03 ATP监控下的人工驾驶模式CM + * 04 限制人工驾驶模式RM 05 非限制人工驾驶模式RM*/ + runModeStatus: [ + {status: '01', trainLColor: '#EF0C08', trainRColor: '#EF0C08'}, + {status: '01', trainLColor: '#00FF00', trainRColor: '#00FF00'}, + {status: '01', trainLColor: '#FFFF00', trainRColor: '#FFFF00'}, + {status: '01', trainLColor: '#EA700D', trainRColor: '#EA700D'}, + {status: '01', trainLColor: '#A0522D', trainRColor: '#A0522D'} + ], + /** 设置运行控制状态类型 eg:{status: '01', hShow: false, sShow: false}, */ + runControlStatus: [], + /** 设置车门状态类型 eg:{status: '01', dShow: false}, */ + doorStatus: [], + /** 设置通信状态 eg:{status: '01', trainColor:'#725A64'}, */ + communicationStatus: [], + /** 设置报警状态 eg:{status: '01', aShow: false}, */ + alarmStatus: [], + /** 列车车头矩形填充颜色 */ + trainHeadFillColor: '#EF0C08', + /** 列车车身填充颜色 */ + trainBodyFillColor: '#000000', + } } }