From 41b9adcc2862f8392a6ed77141da752ea04cf419 Mon Sep 17 00:00:00 2001 From: zyy <1787816799@qq.com> Date: Thu, 20 Aug 2020 16:02:21 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=AE=81=E6=B3=A2?= =?UTF-8?q?=E4=B8=89=E5=8F=B7=E7=BA=BF=E5=88=97=E8=BD=A6=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jmapNew/config/skinCode/foshan_01.js | 2 +- src/jmapNew/config/skinCode/haerbin_01.js | 2 +- src/jmapNew/config/skinCode/ningbo_03.js | 30 ++-- src/jmapNew/shape/Train/EMouse.js | 8 +- src/jmapNew/shape/Train/ETriangle.js | 173 ++++++++++++++++++---- src/jmapNew/shape/Train/TrainBody.js | 63 +++++++- src/jmapNew/shape/Train/TrainBodyBox.js | 2 +- src/jmapNew/shape/Train/index.js | 6 +- 8 files changed, 237 insertions(+), 49 deletions(-) diff --git a/src/jmapNew/config/skinCode/foshan_01.js b/src/jmapNew/config/skinCode/foshan_01.js index 405da2a73..82eb40cb9 100644 --- a/src/jmapNew/config/skinCode/foshan_01.js +++ b/src/jmapNew/config/skinCode/foshan_01.js @@ -409,7 +409,7 @@ class SkinCode extends defaultStyle { // 延续保护计时 this[deviceType.OverAp] = { - show: false + show: true }; this[deviceType.Switch] = { diff --git a/src/jmapNew/config/skinCode/haerbin_01.js b/src/jmapNew/config/skinCode/haerbin_01.js index a78f7771f..f51223659 100644 --- a/src/jmapNew/config/skinCode/haerbin_01.js +++ b/src/jmapNew/config/skinCode/haerbin_01.js @@ -421,7 +421,7 @@ class SkinCode extends defaultStyle { }; // 延续保护计时 this[deviceType.OverAp] = { - show: true + show: false }; this[deviceType.Switch] = { diff --git a/src/jmapNew/config/skinCode/ningbo_03.js b/src/jmapNew/config/skinCode/ningbo_03.js index 1cd7fe701..44de6c666 100644 --- a/src/jmapNew/config/skinCode/ningbo_03.js +++ b/src/jmapNew/config/skinCode/ningbo_03.js @@ -133,7 +133,11 @@ class SkinCode extends defaultStyle { blockGlint: true // 区段封锁闪烁显示 }, trainPosition:{ - display: false // 列车实时位置显示 + display: true, // 列车实时位置显示 + specialShow: true, // 列车特殊显示 + specialBackground: 'rgba(36, 219, 219, 0.8)', + specialRectWidth: 14, + stopTrainRectWidth: 7 } }; @@ -616,12 +620,12 @@ class SkinCode extends defaultStyle { ], // 特殊列车类型需设置显示格式 lrPadding: 4, // 两边间隔 upPadding: 4, // 上边距离 - trainSidelineColor: '#ABFE9B', - trainBodyFillColor: '#A388B1', // 列车车身填充颜色 + trainSidelineColor: 'rgba(0,0,0,0)', + trainBodyFillColor: 'rgba(0,0,0,0)', // 列车车身填充颜色 trainNameFormat: 'serviceNumber:tripNumber:targetCode'// 列车显示格式 }, directionArrow: { - hasArrow: true, + hasArrow: false, width: 6, radiusR: 4, fillColor: '#00FF00', @@ -640,6 +644,8 @@ class SkinCode extends defaultStyle { trainNumber: { targetCodePrefix: '00', // 目的地码前缀 defaultTargetCode: 'DD', // 默认目的地码 + fontColor: '#000', + fontSize: 10, trainTargetTextAlign: 'left', // 目的地码文字显示位置 trainNumberOffset: { x: 36, y: 4 }, // 目的地码偏移量 headTypeColor: '#1CBAFD', // 头码车目的地号显示颜色 @@ -647,12 +653,16 @@ class SkinCode extends defaultStyle { }, trainServer: { serviceNumberPrefix: '000', // 服务号(表号)前缀 + fontColor: '#000', + fontSize: 10, defaultServiceNumber: 'TTT', // 默认服务号（表号） - defaultServerNoColor: '#FFFFFF', // 默认服务号状态显示颜色 + defaultServerNoColor: '#000', // 默认服务号状态显示颜色 trainServerOffset: { x: 4, y: 4 } // 列车服务号偏移 }, trainTarget: { tripNumberPrefix: '00', // 车次号前缀 + fontColor: '#000', + fontSize: 10, defaultTripNumber: 'DD', // 默认车次号2 trainTargetOffset: { x: 24, y: 4 }, // 列车车次号偏移 trainTargetTextAlign: 'right' // 车次号文字显示位置 @@ -666,13 +676,13 @@ class SkinCode extends defaultStyle { maskText: '0' // 车组号遮罩 }, trainHead: { - trainConntWidth: 2, // 列车竖杠的宽度 + trainConntWidth: 0, // 列车竖杠的宽度 trainHeadFillColor: '#000000', // 列车车头矩形填充颜色 trainHeadRectHeight: 20, // 列车车头矩形高度 directionStopType:'normal', // special 西安二号线 停车 列车方向图标不消失 normal 正常 trainHeadHeight: 'trainBox', // 列车车头高度取决于trainBox高度 - trainHeadArrowWidth: 5, // 列车车头三角宽度 - trainHeadArrowOffsetX: 4 // 列车车头三角偏移 + trainHeadArrowWidth: 0, // 列车车头三角宽度 + trainHeadArrowOffsetX: 0 // 列车车头三角偏移 }, common: { trainHeight: 20, // 列车高度 @@ -680,7 +690,7 @@ class SkinCode extends defaultStyle { trainWidth: 70, // 列车长度 trainTextFontSize: 16, // 列车字号 fontFamily: 'consolas', // 默认字体 族类 - haveTextHSDA: true, // 是否需创建textHSDA对象 + haveTextHSDA: false, // 是否需创建textHSDA对象 haveArrowText: true, // 是否需创建arrowText对象 textOffset: 4, // 字体偏移（用以控制字体据车头的距离） trainWidthMoreText: 8, // 计算列车长度时--列车长比text多出尺寸 @@ -689,7 +699,7 @@ class SkinCode extends defaultStyle { trainTip:false // 鼠标悬停列车状态信息框是否显示 }, mouseOverStyle:{ - borderLineColor: '#FFFFFF', + borderLineColor: 'rgba(0,0,0,0)', borderLineDash: [3, 3], leftOffset:30, rightOffset:30 diff --git a/src/jmapNew/shape/Train/EMouse.js b/src/jmapNew/shape/Train/EMouse.js index d39723bfa..91b623f9c 100644 --- a/src/jmapNew/shape/Train/EMouse.js +++ b/src/jmapNew/shape/Train/EMouse.js @@ -82,10 +82,10 @@ class EMouse extends Group { z: this.device.model.z + 10, silent: true, shape: { - x:rect.x - 30, - y:rect.y, - width:rect.width + 60, - height:rect.height + x: rect.x - 30, + y: rect.y, + width: rect.width + 60, + height: rect.height }, style: { lineDash: [3, 3], diff --git a/src/jmapNew/shape/Train/ETriangle.js b/src/jmapNew/shape/Train/ETriangle.js index f658cb6bc..93f46425a 100644 --- a/src/jmapNew/shape/Train/ETriangle.js +++ b/src/jmapNew/shape/Train/ETriangle.js @@ -1,5 +1,6 @@ import Group from 'zrender/src/container/Group'; import Polygon from 'zrender/src/graphic/shape/Polygon'; +import Rect from 'zrender/src/graphic/shape/Rect'; /** 创建三角形*/ export default class ETriangle extends Group { @@ -7,6 +8,7 @@ export default class ETriangle extends Group { super(); this.model = model; this.zlevel = model.zlevel; + this.style = model.style; this.z = model.z; this.create(model); } @@ -14,38 +16,153 @@ export default class ETriangle extends Group { create(model) { if (model && model.point) { const right = model.right == 1 ? 1 : -1; - this.angle = new Polygon({ - zlevel: model.zlevel, - z: model.z, - shape: { - 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:'#00FF00', - lineWidth: 0.5, - fill: '#00FF00' - } - }); - this.add(this.angle); + if (this.style.Section.trainPosition.specialShow) { + this.stopRect = new Rect({ // 停车标识 + zlevel: model.zlevel, + z: model.z, + shape: { + x: model.point.x - this.style.Section.trainPosition.stopTrainRectWidth, + y: model.point.y - this.style.Section.line.width / 4, + width: this.style.Section.trainPosition.stopTrainRectWidth, + height: this.style.Section.line.width - 2 + }, + style: { + lineWidth: 0, + fill: 'rgba(26, 54, 88, 0.7)' + } + }); + this.angle1 = new Rect({ + zlevel: model.zlevel, + z: model.z, + shape: { + x: model.point.x - this.style.Section.trainPosition.specialRectWidth, + y: model.point.y - this.style.Section.line.width / 2, + width: this.style.Section.trainPosition.specialRectWidth, + height: this.style.Section.line.width + 2 + }, + style: { + lineWidth: 0, + fill: this.style.Section.trainPosition.specialBackground + }, + cursor: 'pointer' + }); + this.angle = new Polygon({ + zlevel: model.zlevel, + z: model.z, + shape: { + points:[ + [model.point.x + 5 * right, model.point.y + 1], + [model.point.x, model.point.y - this.style.Section.line.width / 2], + [model.point.x, model.point.y + this.style.Section.line.width / 2 + 2] + ] + }, + style: { + // stroke:'#00FF00', + lineWidth: 0, + fill: this.style.Section.trainPosition.specialBackground + } + }); + this.add(this.angle1); + this.add(this.angle); + this.add(this.stopRect); + this.stopRect.hide(); + } else { + this.angle = new Polygon({ + zlevel: model.zlevel, + z: model.z, + shape: { + 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:'#00FF00', + lineWidth: 0.5, + fill: '#00FF00' + } + }); + this.add(this.angle); + } } } - updateTriangle(model, right) { - const trainRight = right == 1 ? 1 : -1; - const data = [[model.x + 10 * trainRight, model.y], [model.x, model.y - 6], [model.x, model.y + 6]]; - // this.angle.shape.points.push([model.x + 10 * trainRight, model.y]); - // this.angle.attr('shape', { points: this.angle.shape.points }); - this.angle.attr({ - shape: { - points:data + updateTriangle(model, right, trainB) { + if (this.angle) { + const trainRight = right == 1 ? 1 : -1; + let data = [ + [model.x + 10 * trainRight, model.y], + [model.x, model.y - 6], + [model.x, model.y + 6] + ]; + if (this.style.Section.trainPosition.specialShow) { + data = [ + [model.x + 5 * trainRight, model.y + 1], + [model.x, model.y - this.style.Section.line.width / 2], + [model.x, model.y + this.style.Section.line.width / 2 + 2] + ]; } - }); - this.angle.animateTo({ - shape: { - points:data + this.angle.attr({ + shape: { + points:data + } + }); + this.angle.animateTo({ + shape: { + points:data + } + }, 10, 0, 'elasticOut', function () { + }); + this.angle.dirty(); + } + if (this.angle1) { + let trainRight = model.x; + if (right == 1) { + trainRight = model.x - this.style.Section.trainPosition.specialRectWidth; } - }, 10, 0, 'elasticOut', function () { - }); - this.dirty(); + const pointsData = { + x: trainRight, + y: model.y - this.style.Section.line.width / 2, + width: this.style.Section.trainPosition.specialRectWidth, + height: this.style.Section.line.width + 2 + }; + this.angle1.attr({ + shape: pointsData + }); + this.angle1.animateTo({ + shape: pointsData + }, 10, 0, 'elasticOut', function () { + }); + this.angle1.dirty(); + } + if (this.stopRect) { + const offset = (this.style.Section.trainPosition.specialRectWidth - this.style.Section.trainPosition.stopTrainRectWidth) / 2; + let trainRight = model.x + offset; + if (right == 1) { + trainRight = model.x - offset - this.style.Section.trainPosition.stopTrainRectWidth; + } + const pointsData = { + x: trainRight, + y: model.y - this.style.Section.line.width / 4, + width: this.style.Section.trainPosition.stopTrainRectWidth, + height: this.style.Section.line.width - 2 + }; + this.stopRect.attr({ + shape: pointsData + }); + this.stopRect.animateTo({ + shape: pointsData + }, 10, 0, 'elasticOut', function () { + }); + this.stopRect.dirty(); + } + if (this.style.Section.trainPosition.specialShow) { + trainB.setPositionText(model, right); + } + } + + setStopShow(flag) { + if (flag) { + this.stopRect && this.stopRect.show(); + } else { + this.stopRect && this.stopRect.hide(); + } } } diff --git a/src/jmapNew/shape/Train/TrainBody.js b/src/jmapNew/shape/Train/TrainBody.js index 69f8d00dc..036ce8f73 100644 --- a/src/jmapNew/shape/Train/TrainBody.js +++ b/src/jmapNew/shape/Train/TrainBody.js @@ -53,7 +53,7 @@ export default class TrainBody extends Group { y: parseInt(model.point.y + style.Train.trainServer.trainServerOffset.y), text: serviceNumber.substring(serviceNumber.length - style.Train.trainServer.serviceNumberPrefix.length), textFill: model.style.Train.trainServer.fontColor || style.trainTextColor, - fontSize: model.fontSize, + fontSize: model.style.Train.trainServer.fontSize || model.fontSize, fontFamily: style.Train.common.fontFamily, textAlign: 'left', textVerticalAlign: 'top' @@ -66,7 +66,7 @@ export default class TrainBody extends Group { y: parseInt(model.point.y + model.style.Train.trainTarget.trainTargetOffset.y), text: tripNumber.substring(tripNumber.length - style.Train.trainTarget.tripNumberPrefix.length), textFill: model.style.Train.trainTarget.fontColor || style.trainTextColor, - fontSize: model.fontSize, + fontSize: model.style.Train.trainTarget.fontSize || model.fontSize, fontFamily: style.Train.common.fontFamily, textAlign: 'left', textVerticalAlign: 'top' @@ -80,7 +80,7 @@ export default class TrainBody extends Group { textFill: model.style.Train.trainNumber.fontColor || style.trainTextColor, textStroke: style.trainTextColor, textStrokeWidth: 0, - fontSize: model.fontSize, + fontSize: model.style.Train.trainNumber.fontSize || model.fontSize, fontFamily: style.Train.common.fontFamily, textAlign: 'left', textVerticalAlign: 'top' @@ -401,4 +401,61 @@ export default class TrainBody extends Group { } } } + setPositionText(model, right) { + let widthText = 0; + let point = { + x: model.x - 10, + y: model.y + }; + if (right == 1) { + point = { + x: model.x - 20, + y: model.y + }; + } + if (this.textTrainTarget) { + this.textTrainTarget.attr({ + style: { + x: parseInt(point.x + widthText), + y: parseInt(point.y - this.style.Section.line.width), + textVerticalAlign: 'middle' + } + }); + widthText += this.textTrainTarget.getBoundingRect().width; + this.textTrainTarget.dirty(); + } + if (this.textTrainServer) { + this.textTrainServer.attr({ + style: { + x: parseInt(point.x + widthText), + y: parseInt(point.y - this.style.Section.line.width), + textVerticalAlign: 'middle' + } + }); + widthText += this.textTrainServer.getBoundingRect().width; + this.textTrainServer.dirty(); + } + if (this.textTrainTrip) { + this.textTrainTrip.attr({ + style: { + x: parseInt(point.x + widthText), + y: parseInt(point.y - this.style.Section.line.width), + textVerticalAlign: 'middle' + } + }); + widthText += this.textTrainTrip.getBoundingRect().width; + this.textTrainTrip.dirty(); + } + if (this.textTrainGroup) { + this.textTrainGroup.attr({ + style: { + x: parseInt(point.x + widthText), + y: parseInt(point.y - this.style.Section.line.width), + textVerticalAlign: 'middle' + } + }); + widthText += this.textTrainGroup.getBoundingRect().width; + this.textTrainGroup.dirty(); + } + } } diff --git a/src/jmapNew/shape/Train/TrainBodyBox.js b/src/jmapNew/shape/Train/TrainBodyBox.js index 2deca880d..8a3ebf691 100644 --- a/src/jmapNew/shape/Train/TrainBodyBox.js +++ b/src/jmapNew/shape/Train/TrainBodyBox.js @@ -1,6 +1,6 @@ import Group from 'zrender/src/container/Group'; import Rect from 'zrender/src/graphic/shape/Rect'; -import BoundingRect from 'zrender/src/core/BoundingRect'; +// import BoundingRect from 'zrender/src/core/BoundingRect'; export default class TrainBodyBox extends Group { constructor(model) { diff --git a/src/jmapNew/shape/Train/index.js b/src/jmapNew/shape/Train/index.js index 56654d4c0..55913cfa3 100644 --- a/src/jmapNew/shape/Train/index.js +++ b/src/jmapNew/shape/Train/index.js @@ -60,6 +60,7 @@ export default class Train extends Group { this._computed(); const model = this.model; const style = this.style; + if (this.point) { this.trainB = new TrainBody({ zlevel: this.zlevel, @@ -153,6 +154,7 @@ export default class Train extends Group { right: this.model.right, point: { x: this.startX, y: this.startY } }); + this.add(this.triangle); } @@ -193,7 +195,7 @@ export default class Train extends Group { }); const point = { x: this.startX, y: this.startY }; this.triangle.point = point; - this.triangle.updateTriangle(point, train.right); + this.triangle.updateTriangle(point, train.right, this.trainB); this.triangle.dirty(); } } @@ -230,6 +232,7 @@ export default class Train extends Group { this.trainL && this.trainL.setArrowShow(arrowLShow); this.trainR && this.trainR.setLineShow(lineRShow); this.trainR && this.trainR.setArrowShow(arrowRShow); + this.triangle && this.triangle.setStopShow(false); // 运行 return true; } }); @@ -246,6 +249,7 @@ export default class Train extends Group { } else { this.trainL && this.trainL.setLineShow(item.lineLShow); this.trainR && this.trainR.setLineShow(item.lineRShow); + this.triangle && this.triangle.setStopShow(true); // 停车 } return true; } From d026ce783fefe8551f3954c15c5898313c34eb49 Mon Sep 17 00:00:00 2001 From: zyy <1787816799@qq.com> Date: Thu, 20 Aug 2020 16:43:35 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=BD=A6=E7=AB=99?= =?UTF-8?q?=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jmapNew/config/skinCode/ningbo_03.js | 6 +++++- src/jmapNew/shape/Station/index.js | 6 +++--- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/jmapNew/config/skinCode/ningbo_03.js b/src/jmapNew/config/skinCode/ningbo_03.js index bdc084e2f..4e8a4b4cf 100644 --- a/src/jmapNew/config/skinCode/ningbo_03.js +++ b/src/jmapNew/config/skinCode/ningbo_03.js @@ -223,7 +223,11 @@ class SkinCode extends defaultStyle { text: { fontSize: 11, // 字体大小 fontWeight: 'normal', // 字体粗细 - distance: 5 // 灯跟文字距离 + distance: 5, // 灯跟文字距离 + borderShow: true, + borderColor: '#000', + textPadding: [3, 20], + textBorderWidth: 2 }, lamp: { radiusR: 6, // 控制灯大小 diff --git a/src/jmapNew/shape/Station/index.js b/src/jmapNew/shape/Station/index.js index 2fd2fbd8f..450a8f1bb 100644 --- a/src/jmapNew/shape/Station/index.js +++ b/src/jmapNew/shape/Station/index.js @@ -52,9 +52,9 @@ export default class Station extends Group { if (style.Station.text.borderShow) { // 哈尔滨线路单独显示 this.stationText.attr({ style: { - textPadding: [2, 6], - textBorderColor: model.nameFontColor, - textBorderWidth: 1 + textPadding: style.Station.text.textPadding || [2, 6], + textBorderColor: style.Station.text.borderColor || model.nameFontColor, + textBorderWidth: style.Station.text.textBorderWidth || 1 } }); }