From 56126bdbf366ab4bb1755921a0432ce5c24c2c52 Mon Sep 17 00:00:00 2001 From: joylink_cuiweidong <364937672@qq.com> Date: Thu, 12 Mar 2020 14:41:53 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=97=E8=BD=A6=E7=B2=BE=E7=A1=AE=E5=AE=9A?= =?UTF-8?q?=E4=BD=8D=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4=20=E5=88=97?= =?UTF-8?q?=E8=BD=A6=E7=9A=84=E7=8A=B6=E6=80=81=E4=BF=A1=E6=81=AF=E8=B0=83?= =?UTF-8?q?=E6=95=B4=20=E5=8E=BB=E6=8E=89=E4=BB=BF=E7=9C=9F=E9=87=8C?= =?UTF-8?q?=E7=9A=84=E6=8B=96=E5=8A=A8=E9=BC=A0=E6=A0=87=E7=94=9F=E6=88=90?= =?UTF-8?q?=E5=8C=85=E5=9B=B4=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jmap/shape/Train/TrainBody.js | 448 +++++++++--------- src/jmapNew/map.js | 2 + src/jmapNew/mouseController.js | 3 +- src/jmapNew/shape/Train/EMouse.js | 4 +- src/jmapNew/shape/Train/ETriangle.js | 4 +- src/jmapNew/shape/Train/TrainBody.js | 2 +- src/jmapNew/shape/Train/index.js | 115 ++++- .../theme/chengdu_01/menus/menuTrain.vue | 2 +- src/views/newMap/jlmapNew/index.vue | 8 +- 9 files changed, 328 insertions(+), 260 deletions(-) diff --git a/src/jmap/shape/Train/TrainBody.js b/src/jmap/shape/Train/TrainBody.js index 86a9a54fe..58596d45f 100644 --- a/src/jmap/shape/Train/TrainBody.js +++ b/src/jmap/shape/Train/TrainBody.js @@ -7,234 +7,234 @@ import store from '@/store'; /** 车身*/ export default class TrainBody extends Group { - constructor(model) { - super(); - this.model = model; - this.deviceModel = model.model; - this.nameFormat = model.nameFormat; - this.create(); - this.createMouse(); // 鼠标事件 - } + constructor(model) { + super(); + this.model = model; + this.deviceModel = model.model; + this.nameFormat = model.nameFormat; + this.create(); + this.createMouse(); // 鼠标事件 + } - createMouse() { - this.mouseEvent = new EMouse(this); - this.add(this.mouseEvent); - if (this.deviceModel.down) { - store.dispatch('map/setTrainDetails', this.deviceModel); - this.mouseEvent.mouseover(); - } + createMouse() { + this.mouseEvent = new EMouse(this); + this.add(this.mouseEvent); + if (this.deviceModel.down) { + store.dispatch('map/setTrainDetails', this.deviceModel); + this.mouseEvent.mouseover(); + } - this.on('mouseover', () => { - store.dispatch('map/setTrainDetails', this.deviceModel); - this.mouseEvent.mouseover(); - }); - this.on('mouseout', () => { - store.dispatch('map/setTrainDetails', null); - this.mouseEvent.mouseout(); - }); - } + this.on('mouseover', () => { + store.dispatch('map/setTrainDetails', this.deviceModel); + this.mouseEvent.mouseover(); + }); + this.on('mouseout', () => { + store.dispatch('map/setTrainDetails', null); + this.mouseEvent.mouseout(); + }); + } - create() { - const model = this.model; - const style = this.model.style; - this.trainBodyBox = new TrainBodyBox({ - zlevel: model.zlevel, - z: model.z, - point: model.point, - style: style - }); + create() { + const model = this.model; + const style = this.model.style; + this.trainBodyBox = new TrainBodyBox({ + zlevel: model.zlevel, + z: model.z, + point: model.point, + style: style + }); - const beginX = (model.point.x + style.Train.trainBody.lrPadding); - const beginY = (model.point.y - style.Train.hsda.trainHSDATextFontSize - style.Train.hsda.upPaddingHSDA); - const margin = (style.Train.common.trainWidth - style.Train.hsda.lrPaddingHSDA * 2) / 4; + const beginX = (model.point.x + style.Train.trainBody.lrPadding); + const beginY = (model.point.y - style.Train.hsda.trainHSDATextFontSize - style.Train.hsda.upPaddingHSDA); + const margin = (style.Train.common.trainWidth - style.Train.hsda.lrPaddingHSDA * 2) / 4; - this.textH = style.Train.common.haveTextHSDA ? new ETextName({ - zlevel: model.zlevel, - z: model.z, - x: parseInt(beginX + margin * 0), - y: parseInt(beginY), - text: style.Train.hsda.textHContent, - textFill: style.trainYellowColor, - fontSize: style.Train.hsda.trainHSDATextFontSize, - fontFamily: style.Train.common.fontFamily, - textAlign: 'middle', - textVerticalAlign: 'top' - }) : ''; - this.textS = style.Train.common.haveTextHSDA ? new ETextName({ - zlevel: model.zlevel, - z: model.z, - x: parseInt(beginX + margin * 1), - y: parseInt(beginY), - text: style.Train.hsda.textSContent, - textFill: style.trainBlueColor, - fontSize: style.Train.hsda.trainHSDATextFontSize, - fontFamily: style.Train.common.fontFamily, - textAlign: 'middle', - textVerticalAlign: 'top' - }) : ''; - this.textD = style.Train.common.haveTextHSDA ? new ETextName({ - zlevel: model.zlevel, - z: model.z, - x: parseInt(beginX + margin * 2), - y: parseInt(beginY), - text: style.Train.hsda.textDContent, - textFill: style.trainGreenColor, - fontSize: style.Train.hsda.trainHSDATextFontSize, - fontFamily: style.Train.common.fontFamily, - textAlign: 'middle', - textVerticalAlign: 'top' - }) : ''; - this.textA = style.Train.common.haveTextHSDA ? new ETextName({ - zlevel: model.zlevel, - z: model.z, - x: parseInt(beginX + margin * 3), - y: parseInt(beginY), - text: style.Train.hsda.textAContent, - textFill: style.trainRedColor, - fontSize: style.Train.hsda.trainHSDATextFontSize, - fontFamily: style.Train.common.fontFamily, - textAlign: 'middle', - textVerticalAlign: 'top' - }) : ''; - const serviceNumber = style.Train.trainServer.serviceNumberPrefix + (model.serviceNumber || style.Train.trainServer.defaultServiceNumber) + '';// 服务号(表号) - const tripNumber = style.Train.trainTarget.tripNumberPrefix + (style.Train.trainTarget.defaultDirectionCode - ?(model.directionCode||style.Train.trainTarget.defaultDirectionCode) + (model.tripNumber || style.Train.trainTarget.defaultTripNumber) - :model.tripNumber || style.Train.trainTarget.defaultTripNumber) + ''; // 车次号 - const targetCode = style.Train.trainNumber.targetCodePrefix + (model.targetCode || style.Train.trainNumber.defaultTargetCode) + ''; // 目的地码 - const groupNumber = style.Train.trainTargetNumber.groupNumberPrefix + (model.groupNumber || style.Train.trainTargetNumber.defaultGroupNumber) + ''; // 车组号 - this.textTrainServer = new ETextName({ - zlevel: model.zlevel, - z: model.z+1, - x: parseInt(model.point.x + style.Train.trainServer.trainServerOffset.x), - y: parseInt(model.point.y + style.Train.trainServer.trainServerOffset.y), - text: serviceNumber.substring(serviceNumber.length - style.Train.trainServer.serviceNumberPrefix.length), - textFill: style.trainTextColor, - fontSize: model.fontSize, - fontFamily: style.Train.common.fontFamily, - textAlign: 'left', - textVerticalAlign: 'top' - }); - this.textTrainTarget = new ETextName({ - zlevel: this.model.zlevel, - z: this.model.z+1, - x: parseInt(model.point.x + model.style.Train.trainTarget.trainTargetOffset.x), - y: parseInt(model.point.y + model.style.Train.trainTarget.trainTargetOffset.y), - text: tripNumber.substring(tripNumber.length - style.Train.trainTarget.tripNumberPrefix.length), - textFill: style.trainTextColor, - fontSize: model.fontSize, - fontFamily: style.Train.common.fontFamily, - textAlign: style.Train.trainTarget.trainTargetTextAlign, - textVerticalAlign: 'top' - }); - this.textTrainNumber = new ETextName({ - zlevel: model.zlevel, - z: model.z+1, - x: parseInt(model.point.x + style.Train.trainNumber.trainNumberOffset.x), - y: parseInt(model.point.y + style.Train.trainNumber.trainNumberOffset.y), - text: targetCode.substring(targetCode.length - 3), - textFill: style.trainTextColor, - textStroke: style.trainTextColor, - fontWeight: 400, - textStrokeWidth: 0, - fontSize: model.fontSize, - fontFamily: style.Train.common.fontFamily, - textAlign: 'left', - textVerticalAlign: 'top' - }); - this.textTrainTargetNumber = new ETextName({ - zlevel: model.zlevel, - z: model.z+1, - x: parseInt(model.point.x - style.Train.trainBody.lrPadding), - y: parseInt(model.point.y + style.Train.trainBody.upPadding), - text: groupNumber.substring(groupNumber.length - 3), - textFill: style.trainTextColor, - textStroke: style.trainTextColor, - textStrokeWidth: 0, - fontSize: model.fontSize, - fontFamily: style.Train.common.fontFamily, - textAlign: 'left', - textVerticalAlign: 'top' - }); - this.formatChangePosition(model, style); - this.add(this.trainBodyBox); - if (style.Train.common.haveTextHSDA) { - this.add(this.textH); - this.add(this.textS); - this.add(this.textD); - this.add(this.textA); - } - } + this.textH = style.Train.common.haveTextHSDA ? new ETextName({ + zlevel: model.zlevel, + z: model.z, + x: parseInt(beginX + margin * 0), + y: parseInt(beginY), + text: style.Train.hsda.textHContent, + textFill: style.trainYellowColor, + fontSize: style.Train.hsda.trainHSDATextFontSize, + fontFamily: style.Train.common.fontFamily, + textAlign: 'middle', + textVerticalAlign: 'top' + }) : ''; + this.textS = style.Train.common.haveTextHSDA ? new ETextName({ + zlevel: model.zlevel, + z: model.z, + x: parseInt(beginX + margin * 1), + y: parseInt(beginY), + text: style.Train.hsda.textSContent, + textFill: style.trainBlueColor, + fontSize: style.Train.hsda.trainHSDATextFontSize, + fontFamily: style.Train.common.fontFamily, + textAlign: 'middle', + textVerticalAlign: 'top' + }) : ''; + this.textD = style.Train.common.haveTextHSDA ? new ETextName({ + zlevel: model.zlevel, + z: model.z, + x: parseInt(beginX + margin * 2), + y: parseInt(beginY), + text: style.Train.hsda.textDContent, + textFill: style.trainGreenColor, + fontSize: style.Train.hsda.trainHSDATextFontSize, + fontFamily: style.Train.common.fontFamily, + textAlign: 'middle', + textVerticalAlign: 'top' + }) : ''; + this.textA = style.Train.common.haveTextHSDA ? new ETextName({ + zlevel: model.zlevel, + z: model.z, + x: parseInt(beginX + margin * 3), + y: parseInt(beginY), + text: style.Train.hsda.textAContent, + textFill: style.trainRedColor, + fontSize: style.Train.hsda.trainHSDATextFontSize, + fontFamily: style.Train.common.fontFamily, + textAlign: 'middle', + textVerticalAlign: 'top' + }) : ''; + const serviceNumber = style.Train.trainServer.serviceNumberPrefix + (model.serviceNumber || style.Train.trainServer.defaultServiceNumber) + '';// 服务号(表号) + const tripNumber = style.Train.trainTarget.tripNumberPrefix + (style.Train.trainTarget.defaultDirectionCode + ? (model.directionCode || style.Train.trainTarget.defaultDirectionCode) + (model.tripNumber || style.Train.trainTarget.defaultTripNumber) + : model.tripNumber || style.Train.trainTarget.defaultTripNumber) + ''; // 车次号 + const targetCode = style.Train.trainNumber.targetCodePrefix + (model.destinationCode || style.Train.trainNumber.defaultTargetCode) + ''; // 目的地码 + const groupNumber = style.Train.trainTargetNumber.groupNumberPrefix + (model.groupNumber || style.Train.trainTargetNumber.defaultGroupNumber) + ''; // 车组号 + this.textTrainServer = new ETextName({ + zlevel: model.zlevel, + z: model.z + 1, + x: parseInt(model.point.x + style.Train.trainServer.trainServerOffset.x), + y: parseInt(model.point.y + style.Train.trainServer.trainServerOffset.y), + text: serviceNumber.substring(serviceNumber.length - style.Train.trainServer.serviceNumberPrefix.length), + textFill: style.trainTextColor, + fontSize: model.fontSize, + fontFamily: style.Train.common.fontFamily, + textAlign: 'left', + textVerticalAlign: 'top' + }); + this.textTrainTarget = new ETextName({ + zlevel: this.model.zlevel, + z: this.model.z + 1, + x: parseInt(model.point.x + model.style.Train.trainTarget.trainTargetOffset.x), + y: parseInt(model.point.y + model.style.Train.trainTarget.trainTargetOffset.y), + text: tripNumber.substring(tripNumber.length - style.Train.trainTarget.tripNumberPrefix.length), + textFill: style.trainTextColor, + fontSize: model.fontSize, + fontFamily: style.Train.common.fontFamily, + textAlign: style.Train.trainTarget.trainTargetTextAlign, + textVerticalAlign: 'top' + }); + this.textTrainNumber = new ETextName({ + zlevel: model.zlevel, + z: model.z + 1, + x: parseInt(model.point.x + style.Train.trainNumber.trainNumberOffset.x), + y: parseInt(model.point.y + style.Train.trainNumber.trainNumberOffset.y), + text: targetCode.substring(targetCode.length - 3), + textFill: style.trainTextColor, + textStroke: style.trainTextColor, + fontWeight: 400, + textStrokeWidth: 0, + fontSize: model.fontSize, + fontFamily: style.Train.common.fontFamily, + textAlign: 'left', + textVerticalAlign: 'top' + }); + this.textTrainTargetNumber = new ETextName({ + zlevel: model.zlevel, + z: model.z + 1, + x: parseInt(model.point.x - style.Train.trainBody.lrPadding), + y: parseInt(model.point.y + style.Train.trainBody.upPadding), + text: groupNumber.substring(groupNumber.length - 3), + textFill: style.trainTextColor, + textStroke: style.trainTextColor, + textStrokeWidth: 0, + fontSize: model.fontSize, + fontFamily: style.Train.common.fontFamily, + textAlign: 'left', + textVerticalAlign: 'top' + }); + this.formatChangePosition(model, style); + this.add(this.trainBodyBox); + if (style.Train.common.haveTextHSDA) { + this.add(this.textH); + this.add(this.textS); + this.add(this.textD); + this.add(this.textA); + } + } - removeTrainDetail() { - this.mouseEvent.mouseout(); - store.dispatch('map/setTrainDetails', null); - this.deviceModel.down = false; - } - setTrainColor(color) { - this.trainBodyBox && this.trainBodyBox.setStyle('fill', color); - } - setTextTrainServerColor(color) { - this.textTrainServer&&this.textTrainServer.setStyle('textFill', color); - this.textTrainServer&&this.textTrainServer.setStyle('textStroke', color); - } - setTextTrainTargetColor(color) { - this.textTrainTarget&&this.textTrainTarget.setStyle('textFill', color); - this.textTrainTarget&&this.textTrainTarget.setStyle('textStroke', color); - } - setTextTrainNumberColor(color) { - this.textTrainNumber&&this.textTrainNumber.setStyle('textFill', color); - this.textTrainNumber&&this.textTrainNumber.setStyle('textStroke', color); - } - setTextTrainTargetNumberColor(color) { - this.textTrainTargetNumber&&this.textTrainTargetNumber.setStyle('textFill', color); - this.textTrainTargetNumber&&this.textTrainTargetNumber.setStyle('textStroke', color); - } - setHShow(isShow) { - if (this.textH) { - isShow ? this.textH.show() : this.textH.hide(); - } - } - setSShow(isShow) { - if (this.textS) { - isShow ? this.textS.show() : this.textS.hide(); - } - } - setDShow(isShow) { - if (this.textD) { - isShow ? this.textD.show() : this.textD.hide(); - } - } - setAShow(isShow) { - if (this.textA) { - isShow ? this.textA.show() : this.textA.hide(); - } - } - setBodyBoxShape(key, color) { - this.trainBodyBox && this.trainBodyBox.setColor(key, color); - } - formatChangePosition(model, style) { - if (this.nameFormat) { - const arr = this.nameFormat.split(':'); - let widthText = 0; - arr.forEach(ele => { - if (ele == 'targetCode') { - this.textTrainNumber.setStyle('x', parseInt(model.point.x + widthText + style.Train.common.textOffset) ); - widthText += this.textTrainNumber.getBoundingRect().width; - this.add(this.textTrainNumber); - } else if (ele == 'serviceNumber') { - this.textTrainServer.setStyle('x', parseInt(model.point.x + widthText + style.Train.common.textOffset)); - widthText += this.textTrainServer.getBoundingRect().width; - this.add(this.textTrainServer); - } else if (ele == 'tripNumber') { - this.textTrainTarget.setStyle('x', parseInt(model.point.x + widthText + style.Train.common.textOffset)); - widthText += this.textTrainTarget.getBoundingRect().width; - this.add(this.textTrainTarget); - } else if (ele == 'groupNumber') { - this.textTrainTargetNumber.setStyle('x', parseInt(model.point.x + widthText + style.Train.common.textOffset)); - widthText += this.textTrainTargetNumber.getBoundingRect().width; - this.add(this.textTrainTargetNumber); - } - }); - } - } + removeTrainDetail() { + this.mouseEvent.mouseout(); + store.dispatch('map/setTrainDetails', null); + this.deviceModel.down = false; + } + setTrainColor(color) { + this.trainBodyBox && this.trainBodyBox.setStyle('fill', color); + } + setTextTrainServerColor(color) { + this.textTrainServer && this.textTrainServer.setStyle('textFill', color); + this.textTrainServer && this.textTrainServer.setStyle('textStroke', color); + } + setTextTrainTargetColor(color) { + this.textTrainTarget && this.textTrainTarget.setStyle('textFill', color); + this.textTrainTarget && this.textTrainTarget.setStyle('textStroke', color); + } + setTextTrainNumberColor(color) { + this.textTrainNumber && this.textTrainNumber.setStyle('textFill', color); + this.textTrainNumber && this.textTrainNumber.setStyle('textStroke', color); + } + setTextTrainTargetNumberColor(color) { + this.textTrainTargetNumber && this.textTrainTargetNumber.setStyle('textFill', color); + this.textTrainTargetNumber && this.textTrainTargetNumber.setStyle('textStroke', color); + } + setHShow(isShow) { + if (this.textH) { + isShow ? this.textH.show() : this.textH.hide(); + } + } + setSShow(isShow) { + if (this.textS) { + isShow ? this.textS.show() : this.textS.hide(); + } + } + setDShow(isShow) { + if (this.textD) { + isShow ? this.textD.show() : this.textD.hide(); + } + } + setAShow(isShow) { + if (this.textA) { + isShow ? this.textA.show() : this.textA.hide(); + } + } + setBodyBoxShape(key, color) { + this.trainBodyBox && this.trainBodyBox.setColor(key, color); + } + formatChangePosition(model, style) { + if (this.nameFormat) { + const arr = this.nameFormat.split(':'); + let widthText = 0; + arr.forEach(ele => { + if (ele == 'targetCode') { + this.textTrainNumber.setStyle('x', parseInt(model.point.x + widthText + style.Train.common.textOffset) ); + widthText += this.textTrainNumber.getBoundingRect().width; + this.add(this.textTrainNumber); + } else if (ele == 'serviceNumber') { + this.textTrainServer.setStyle('x', parseInt(model.point.x + widthText + style.Train.common.textOffset)); + widthText += this.textTrainServer.getBoundingRect().width; + this.add(this.textTrainServer); + } else if (ele == 'tripNumber') { + this.textTrainTarget.setStyle('x', parseInt(model.point.x + widthText + style.Train.common.textOffset)); + widthText += this.textTrainTarget.getBoundingRect().width; + this.add(this.textTrainTarget); + } else if (ele == 'groupNumber') { + this.textTrainTargetNumber.setStyle('x', parseInt(model.point.x + widthText + style.Train.common.textOffset)); + widthText += this.textTrainTargetNumber.getBoundingRect().width; + this.add(this.textTrainTargetNumber); + } + }); + } + } } diff --git a/src/jmapNew/map.js b/src/jmapNew/map.js index c295b489d..f8c48a7c5 100644 --- a/src/jmapNew/map.js +++ b/src/jmapNew/map.js @@ -43,6 +43,7 @@ class Jlmap { const width = opts.dom.clientWidth; const height = opts.dom.clientHeight; this.zoomOnMouseWheel = opts.options.zoomOnMouseWheel; + this.previewOrMapDraw = opts.showConfig.previewOrMapDraw; this.$zr = zrender.init(opts.dom, deepAssign({ renderer, devicePixelRatio, width, height }, opts.config)); @@ -137,6 +138,7 @@ class Jlmap { this.$mouseController.disable(); } else { opts['zoomOnMouseWheel'] = this.zoomOnMouseWheel; + opts['previewOrMapDraw'] = this.previewOrMapDraw; this.$mouseController.enable(opts); } diff --git a/src/jmapNew/mouseController.js b/src/jmapNew/mouseController.js index e29b617e7..510143007 100644 --- a/src/jmapNew/mouseController.js +++ b/src/jmapNew/mouseController.js @@ -54,6 +54,7 @@ class MouseController extends Eventful { this._moveOnMouseMove = opts.moveOnMouseMove || true; this._zoomOnMouseWheel = opts.zoomOnMouseWheel || false; this._preventDefaultMouseMove = opts.preventDefaultMouseMove || true; + this._previewOrMapDraw = opts.previewOrMapDraw || false; this.disable(); @@ -121,7 +122,7 @@ class MouseController extends Eventful { this._preventDefaultMouseMove && eventTool.stop(e.event); this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y }); - } else if (e.which === 3 && this._zoomOnMouseWheel) { + } else if (e.which === 3 && this._zoomOnMouseWheel && this._previewOrMapDraw) { this.handleMouseMoveRight({x: e.offsetX, y: e.offsetY}); } } diff --git a/src/jmapNew/shape/Train/EMouse.js b/src/jmapNew/shape/Train/EMouse.js index f0a1ab761..2bcd4d25a 100644 --- a/src/jmapNew/shape/Train/EMouse.js +++ b/src/jmapNew/shape/Train/EMouse.js @@ -27,9 +27,9 @@ class EMouse extends Group { } let text = ''; if (LangStorage.getLang() == 'en') { - text = ` The planned train: ${trainType} \n Table No.: ${this.device.model.serviceNumber} \n Train Trip No.: ${this.device.model.tripNumber}\n Destination: ${this.device.model.targetCode ? this.device.model.targetCode : ''}\n Train No.: ${this.device.model.groupNumber}\n Early or late: ${destinationText}\n Direction: ${this.device.model.directionType == '02' ? 'up' : 'down'}\n Crew No.: \n Start Station: \n Terminal Station: \n Occupied Track: ${this.device.model.sectionModel ? this.device.model.sectionModel.name : ''}\n Current Station: \n Train-ground communication: normal \n Operation Speed level: 4 \n Detained: ${!this.device.model.hold ? 'Normal' : 'Detained'}\n \n 跳停状态: ${!this.device.model.jump ? 'Normal' : 'Skip to continue moving'}Stationary: ${!this.device.model.stop ? 'No' : 'Yes'}\n Blocked: No \n Speed: ${this.device.model.speed || 0} km/h \n Authorized Distance: ${this.device.model.maLen || 0} m`; + text = ` The planned train: ${trainType} \n Table No.: ${this.device.model.serviceNumber} \n Train Trip No.: ${this.device.model.tripNumber}\n Destination: ${this.device.model.destinationCode ? this.device.model.destinationCode : ''}\n Train No.: ${this.device.model.groupNumber}\n Early or late: ${destinationText}\n Direction: ${this.device.model.directionType == '02' ? 'up' : 'down'}\n Crew No.: \n Start Station: \n Terminal Station: \n Occupied Track: ${this.device.model.sectionModel ? this.device.model.sectionModel.name : ''}\n Current Station: \n Train-ground communication: normal \n Operation Speed level: 4 \n Detained: ${!this.device.model.hold ? 'Normal' : 'Detained'}\n \n 跳停状态: ${!this.device.model.jump ? 'Normal' : 'Skip to continue moving'}Stationary: ${!this.device.model.stop ? 'No' : 'Yes'}\n Blocked: No \n Speed: ${this.device.model.speed || 0} km/h \n Authorized Distance: ${this.device.model.maLen || 0} m`; } else { - text = `列车类型: ${trainType} \n表\0\0\0\0号: ${this.device.model.serviceNumber}\n车\0次\0号: ${this.device.model.tripNumber}\n目的地号: ${this.device.model.targetCode ? this.device.model.targetCode : ''}\n车\0组\0号: ${this.device.model.groupNumber}\n早\0晚\0点: ${destinationText}\n运行方向: ${this.device.model.directionType == '02' ? '上行' : '下行'}\n乘务组号: \n起点站名: \n终点站名: \n占用轨道: ${this.device.model.sectionModel ? this.device.model.sectionModel.name : ''}\n所在车站: \n车地通信: 正常\n运行等级: 4\n扣车状态: ${ !this.device.model.hold ? '正常' : '扣车'}\n 跳停状态: ${!this.device.model.jump ? '正常' : '跳停'} \n停稳状态: ${!this.device.model.stop ? '未停稳' : '停稳'}\n阻塞状态: 无\n列车速度: ${this.device.model.speed || 0} km/h\n列车移动授权距离: ${this.device.model.maLen || 0} m`; + text = `列车类型: ${trainType} \n表\0\0\0\0号: ${this.device.model.serviceNumber}\n车\0次\0号: ${this.device.model.tripNumber}\n目的地号: ${this.device.model.destinationCode ? this.device.model.destinationCode : ''}\n车\0组\0号: ${this.device.model.groupNumber}\n早\0晚\0点: ${destinationText}\n运行方向: ${this.device.model.directionType == '02' ? '上行' : '下行'}\n乘务组号: \n起点站名: \n终点站名: \n占用轨道: ${this.device.model.sectionModel ? this.device.model.sectionModel.name : ''}\n所在车站: \n车地通信: 正常\n运行等级: 4\n扣车状态: ${ !this.device.model.hold ? '正常' : '扣车'}\n 跳停状态: ${!this.device.model.jump ? '正常' : '跳停'} \n停稳状态: ${!this.device.model.stop ? '未停稳' : '停稳'}\n阻塞状态: 无\n列车速度: ${this.device.model.speed || 0} km/h\n列车移动授权距离: ${this.device.model.maLen || 0} m`; } // 文字描述 this.arrowText = new Text({ diff --git a/src/jmapNew/shape/Train/ETriangle.js b/src/jmapNew/shape/Train/ETriangle.js index d47ec973e..f658cb6bc 100644 --- a/src/jmapNew/shape/Train/ETriangle.js +++ b/src/jmapNew/shape/Train/ETriangle.js @@ -21,9 +21,9 @@ export default class ETriangle extends Group { points:[[model.point.x + 10 * right, model.point.y], [model.point.x, model.point.y - 6], [model.point.x, model.point.y + 6]] }, style: { - stroke:'#FFFF00', + stroke:'#00FF00', lineWidth: 0.5, - fill: '#FFFF00' + fill: '#00FF00' } }); this.add(this.angle); diff --git a/src/jmapNew/shape/Train/TrainBody.js b/src/jmapNew/shape/Train/TrainBody.js index c58218619..20329f85b 100644 --- a/src/jmapNew/shape/Train/TrainBody.js +++ b/src/jmapNew/shape/Train/TrainBody.js @@ -102,7 +102,7 @@ export default class TrainBody extends Group { const tripNumber = style.Train.trainTarget.tripNumberPrefix + (style.Train.trainTarget.defaultDirectionCode ? (model.directionCode || style.Train.trainTarget.defaultDirectionCode) + (model.tripNumber || style.Train.trainTarget.defaultTripNumber) : model.tripNumber || style.Train.trainTarget.defaultTripNumber) + ''; // 车次号 - const targetCode = style.Train.trainNumber.targetCodePrefix + (model.targetCode || style.Train.trainNumber.defaultTargetCode) + ''; // 目的地码 + const targetCode = style.Train.trainNumber.targetCodePrefix + (model.destinationCode || style.Train.trainNumber.defaultTargetCode) + ''; // 目的地码 const groupNumber = style.Train.trainTargetNumber.groupNumberPrefix + (model.groupNumber || style.Train.trainTargetNumber.defaultGroupNumber) + ''; // 车组号 this.textTrainServer = new ETextName({ zlevel: model.zlevel, diff --git a/src/jmapNew/shape/Train/index.js b/src/jmapNew/shape/Train/index.js index c32a940fa..121f85696 100644 --- a/src/jmapNew/shape/Train/index.js +++ b/src/jmapNew/shape/Train/index.js @@ -18,6 +18,7 @@ export default class Train extends Group { this.z = 40; this.size = 0; this.section = null; + this.nextPointIndex = 1; this.fontSize = style.Train.common.useSelfText ? style.Train.common.nameFontSize || style.Train.common.trainTextFontSize : model.nameFontSize || style.Train.common.nameFontSize || style.Train.common.trainTextFontSize; this.newScale = this.fontSize / style.Train.common.trainTextFontSize; this.nameFormat = style.Train.common.useSelfFormat ? style.Train.trainBody.trainNameFormat : model.nameFormat || style.Train.trainBody.trainNameFormat; @@ -68,7 +69,7 @@ export default class Train extends Group { destinationStatus: model.destinationStatus, serviceNumber: model.serviceNumber, tripNumber: model.tripNumber, - targetCode: model.targetCode, + destinationCode: model.destinationCode, groupNumber: model.groupNumber, directionType: model.directionType, directionCode: model.directionCode, @@ -105,21 +106,38 @@ export default class Train extends Group { scale: this.newScale }); - const data = this.model.physicalCode; - const oldmodel = store.getters['map/getDeviceByCode'](data); - const leftPoint = oldmodel.points[0]; - const rightPoint = oldmodel.points[oldmodel.points.length - 1]; - const right = this.model.right == 1 ? 1 : 0; - this.startX = leftPoint.x + (1 - right) * (rightPoint.x - leftPoint.x); - this.startY = leftPoint.y + (1 - right) * (rightPoint.y - leftPoint.y); - this.triangle = new ETriangle({ - style: this.style, - zlevel: this.zlevel, - z:10, - right: this.model.right, - point:{x:this.startX, y:this.startY} - }); - this.add(this.triangle); + if (style.Section.trainPosition.display) { + const data = this.model.physicalCode; + const oldmodel = store.getters['map/getDeviceByCode'](data); + const leftPoint = oldmodel.points[0]; + const rightPoint = oldmodel.points[oldmodel.points.length - 1]; + const right = this.model.right == 1 ? 1 : 0; + this.startX = leftPoint.x + (1 - right) * (rightPoint.x - leftPoint.x); + this.startY = leftPoint.y + (1 - right) * (rightPoint.y - leftPoint.y); + // 算出折线的长度 + this.lineLength = 0; + this.currentAdd = 0; + let oldPoint = null; + oldmodel.points.forEach((point)=>{ + if (oldPoint) { + const temp = Math.sqrt( + Math.pow(point.x - oldPoint.x, 2) + + Math.pow(point.y - oldPoint.y, 2), + ); + this.lineLength += temp; + } + oldPoint = point; + }); + // this.animatePoint = {x:this.startX, y:this.startY}; + this.triangle = new ETriangle({ + style: this.style, + zlevel: this.zlevel, + z:10, + right: this.model.right, + point:{x:this.startX, y:this.startY} + }); + this.add(this.triangle); + } this.add(this.trainB); this.add(this.trainL); @@ -136,20 +154,67 @@ export default class Train extends Group { updateSection() { const train = this.model; - if (train.physicalCode && train.offsetp) { + if (train.physicalCode && train.offsetp && this.triangle) { const data = train.physicalCode; const oldmodel = store.getters['map/getDeviceByCode'](data); - const leftPoint = oldmodel.points[0]; - const rightPoint = oldmodel.points[oldmodel.points.length - 1]; - if (this.triangle) { + // 待处理（多个点的问题） + // const points = train.right == 1 ? oldmodel.points : oldmodel.points.reverse(); + const points = oldmodel.points; + // 目标距离 + let targetDistance = Math.sqrt( + Math.pow(points[this.nextPointIndex - 1].x - points[this.nextPointIndex].x, 2) + + Math.pow(points[this.nextPointIndex - 1].y - points[this.nextPointIndex].y, 2), + ); + // // 当前距离 + // const currentDistance = Math.sqrt( + // Math.pow(points[this.nextPointIndex - 1].x - this.animatePoint.x, 2) + + // Math.pow(points[this.nextPointIndex - 1].y - this.animatePoint.y, 2), + // ); + + const currentDistance = this.lineLength * train.offsetp - this.currentAdd; + + // let cureent this.lineLength * train.offsetp + // 利用运动距离与目标距离, 判断运动的点是否超过下一个目标点, 超过了就重置下一个点 + if (currentDistance >= targetDistance) { + // this.animatePoint = { + // x: points[this.nextPointIndex].x, + // y: points[this.nextPointIndex].y + // }; + this.nextPointIndex++; + this.currentAdd += targetDistance; + targetDistance = Math.sqrt( + Math.pow(points[this.nextPointIndex - 1].x - points[this.nextPointIndex].x, 2) + + Math.pow(points[this.nextPointIndex - 1].y - points[this.nextPointIndex].y, 2), + ); + } + if (this.nextPointIndex > points.length - 1) { + const leftPoint = oldmodel.points[0]; + const rightPoint = oldmodel.points[oldmodel.points.length - 1]; this.startX = leftPoint.x + (rightPoint.x - leftPoint.x) * train.offsetp; this.startY = leftPoint.y + (rightPoint.y - leftPoint.y) * train.offsetp; - const point = {x:this.startX, y:this.startY}; - this.triangle.point = point; - this.triangle.updateTriangle(point, train.right); - this.triangle.dirty(); - this.dirty(); + } else { + // debugger; + // this.lineLength * train.offsetp + // if (this.currentLength > targetDistance) { + // this.currentLength = this.currentLength - targetDistance; + // this.nextPointIndex++; + // targetDistance = Math.sqrt( + // Math.pow(points[this.nextPointIndex - 1].x - points[this.nextPointIndex].x, 2) + + // Math.pow(points[this.nextPointIndex - 1].y - points[this.nextPointIndex].y, 2), + // ); + // } + debugger; + const rate = (this.lineLength * train.offsetp - this.currentAdd) / targetDistance; + this.startX = points[this.nextPointIndex - 1].x + (points[this.nextPointIndex].x - points[this.nextPointIndex - 1].x) * rate; + this.startY = points[this.nextPointIndex - 1].y + (points[this.nextPointIndex].y - points[this.nextPointIndex - 1].y) * rate; + // this.animatePoint.x = this.startX; + // this.animatePoint.y = this.startY; } + const point = {x:this.startX, y:this.startY}; + this.triangle.point = point; + this.triangle.updateTriangle(point, train.right); + this.triangle.dirty(); + this.dirty(); } } diff --git a/src/jmapNew/theme/chengdu_01/menus/menuTrain.vue b/src/jmapNew/theme/chengdu_01/menus/menuTrain.vue index b29cd645f..87afa9c2f 100644 --- a/src/jmapNew/theme/chengdu_01/menus/menuTrain.vue +++ b/src/jmapNew/theme/chengdu_01/menus/menuTrain.vue @@ -1,7 +1,7 @@  diff --git a/src/views/newMap/jlmapNew/index.vue b/src/views/newMap/jlmapNew/index.vue index afc917fe7..c32936182 100644 --- a/src/views/newMap/jlmapNew/index.vue +++ b/src/views/newMap/jlmapNew/index.vue @@ -158,11 +158,11 @@ export default { }; // 默认个人地图绘制可以滚轮放大缩小 其他地图显示不允许此操作 const path = window.location.href; - let mouseWheelFlag = false; + const mouseWheelFlag = true; let previewOrMapDraw = false; - if (path.includes('design/userlist/map/draw') || path.includes('design/usermap/map/draw')) { - mouseWheelFlag = true; - } + // if (path.includes('design/userlist/map/draw') || path.includes('design/usermap/map/draw')) { + // mouseWheelFlag = true; + // } if (path.indexOf('map/draw') !== -1 || path.indexOf('mapPreviewNew') !== -1) { previewOrMapDraw = true; }