diff --git a/src/ibp/ibpPan.js b/src/ibp/ibpPan.js index e129e83f3..c5804b570 100644 --- a/src/ibp/ibpPan.js +++ b/src/ibp/ibpPan.js @@ -24,6 +24,8 @@ class IbpPan { // 展示的画布大小 this.canvasSize = {}; + this.optsPan = {}; + this.initIbpPage(opts); } initIbpPage(opts) { @@ -98,6 +100,7 @@ class IbpPan { if (this.$options.disabled == true) { this.$mouseController.disable(); } else { + opts = Object.assign(opts, this.optsPan); this.$mouseController.enable(opts); } @@ -199,6 +202,13 @@ class IbpPan { this.$mouseController.setAllowDragging(true); } + setMoveOnMouseMove(data) { + this.$mouseController.setMoveOnMouseMove(data); + this.optsPan = { + moveOnMouseMove: data || false + }; + } + pullBack(payload) { if (payload.type === 'zoom') { const zrWidth = this.$ibpZr.getWidth(); @@ -283,6 +293,9 @@ class IbpPan { case this.events.DataZoom: this.$mouseController.on(this.events.DataZoom, cb, context); break; + case this.events.__Pan: + this.$mouseController.on(this.events.__Pan, this.optionsHandler); + break; } } } @@ -300,6 +313,9 @@ class IbpPan { case this.events.DataZoom: this.$mouseController.off(this.events.DataZoom, cb); break; + case this.events.__Pan: + this.$mouseController.off(this.events.__Pan, cb); + break; } } } diff --git a/src/ibp/mouseController.js b/src/ibp/mouseController.js index 26af6ceff..9a908d8b7 100644 --- a/src/ibp/mouseController.js +++ b/src/ibp/mouseController.js @@ -46,7 +46,7 @@ class MouseController extends Eventful { this.enable = function (opts) { opts = opts || {}; - this._moveOnMouseMove = opts.moveOnMouseMove || true; + this._moveOnMouseMove = opts.moveOnMouseMove || false; this._preventDefaultMouseMove = opts.preventDefaultMouseMove || true; this.disable(); @@ -83,6 +83,10 @@ class MouseController extends Eventful { this.isAllowDragging = data; } + setMoveOnMouseMove(data) { + this._moveOnMouseMove = data; + } + mousedown(e) { e.event.preventDefault(); e.event.stopPropagation(); @@ -232,6 +236,13 @@ class MouseController extends Eventful { } /** 处理左键拖动事件--- 图形移动 */ handleMouseMoveLeft(e, dx, dy, oldX, oldY) { + console.log(this._moveOnMouseMove); + if (this._dragging && this.eventTarget && this._moveOnMouseMove) { + if (( this.eventTarget._type == deviceType.Background)) { + this._preventDefaultMouseMove && eventTool.stop(e.event); + this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y }); + } + } if (!this._moveOnMouseMove || !this._dragging || !this.isAllowDragging) { return; } @@ -241,10 +252,7 @@ class MouseController extends Eventful { item.grouper.drift(dx, dy, e); }); } else if (this._dragging && this.eventTarget) { // 选中元素图形移动 - if (( this.eventTarget._type === deviceType.Background) || !this.isAllowDragging) { - this._preventDefaultMouseMove && eventTool.stop(e.event); - this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y }); - } else if (this.isAllowDragging) { + if (this.isAllowDragging && this.eventTarget.grouper) { this.eventTarget.grouper.drift(dx, dy, e); } } diff --git a/src/jmapNew/config/skinCode/bejing_01.js b/src/jmapNew/config/skinCode/bejing_01.js index 540acd13f..ba1056710 100644 --- a/src/jmapNew/config/skinCode/bejing_01.js +++ b/src/jmapNew/config/skinCode/bejing_01.js @@ -6,11 +6,12 @@ class SkinCode extends defaultStyle { super(); this.fontFamily = '宋体'; this[deviceType.Section] = { + elemnetType:['name', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'separator', 'speedLimit'], active: { routeColor: false // 进路触发颜色 }, - text: { // 物理区段名称 - show: true, // 物理区段名称显示 + name: { // 物理区段名称 + z: 2, position: -1, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 11, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -21,7 +22,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, logicText: { // 逻辑区段名称 - show: false, // 逻辑区段名称显示 + z: 2, position: -1, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 11, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -31,8 +32,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - standText: { // 站台轨名称 - show: true, // 站台轨名称显示 + standTrackText: { // 站台轨名称 + z: 2, position: 1, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 11, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -42,8 +43,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - reentryText: { // 折返轨名称 - show: true, // 折返轨名称显示 + reentryTrackText: { // 折返轨名称 + z: 2, position: 1, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 11, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -53,8 +54,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - transferText: { // 转换轨名称 - show: true, // 转换轨名称显示 + transferTrackText: { // 转换轨名称 + z: 2, position: 1, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 11, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -65,7 +66,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, destinationText: { // 目的码名称 - show: true, // 目的码名称显示 + z: 2, position: 1, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 11, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -84,6 +85,7 @@ class SkinCode extends defaultStyle { lineWidthMore: 2.5 }, line: { + z: 0, width: 5, // 区段宽度 beyondWidth: 0, // 区段宽超出宽度 invadeColor: '#EF0C08', // 区段侵入颜色 @@ -104,8 +106,8 @@ class SkinCode extends defaultStyle { logicalColor: '#FFFF00', // 逻辑区段颜色 (未用) logicalTextColor: '#C0C0C0' // 逻辑区段名称颜色 (未用) }, - axle: {}, // 计轴 speedLimit: { // 限速元素 + z: 2, width: 1, // 限速线的宽度 distance: 5, // 限速线距离区段距离 lineColor: '#FFFF00', // 限速线颜色 @@ -119,9 +121,6 @@ class SkinCode extends defaultStyle { color: '#7F7F7F', // 区段边界符颜色 halfHeight: 5 // 区段分隔符高度的一半 }, - block: { - special: false // 区段特殊显示 - }, trainPosition:{ display: false // 列车实时位置显示 } @@ -290,35 +289,26 @@ class SkinCode extends defaultStyle { distance: 9, // 站台和屏蔽门之间的距离 defaultColor: '#00FF00', // 屏蔽门默认颜色 splitDoorColor: '#F61107' // 屏蔽门切除颜色 - }, - // 关联的后端属性 - relatedStatus:{ - // 该属性 关联的绘图元素 - 'fault':['safetyDoorNormal'], - 'screenDoorOpenStatus':['safetyDoorNormal'] } }; // 站台 this[deviceType.StationStand] = { // 北京线站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级 - elemnetType:['safeStand', 'emergent', 'detainCarNormal', 'stopTime', 'level'], + elemnetType:['solidStand', 'emergentRhombus', 'detainNormal', 'stopTime', 'level'], // 站台 - safeStand:{ + solidStand:{ // 层级 z:0, - special:false, spareColor: '#606060', // 站台空闲颜色 jumpStopColor: 'lightSkyBlue', // 站台跳停颜色 designatedJumpStopColor: 'lightSkyBlue', // 站台指定列车跳停颜色 headFontSize: 8, // 站台首端字体大小 stopColor: '#FEFE00' // 站台列车停站颜色 - // relatedStatus:['trainParking', 'assignSkip', 'allSkip', 'emergencyClosed'] }, // 站台紧急关闭 - emergent:{ + emergentRhombus:{ z:1, - special:false, mergentR: 4, // 站台紧急关闭半径 mergentN: 4, // 站台紧急关闭边数 insideOffset: { x: 0, y: -40 }, // 内站台紧急关闭偏移量 @@ -326,7 +316,7 @@ class SkinCode extends defaultStyle { closeColor: '#F61107' // 站台紧急关闭颜色 }, // 扣车元素 普通扣车 - detainCarNormal:{ + detainNormal:{ z:0, position: -1, // 扣车标识在站台上显示方向 text: 'H', // 扣车显示内容 diff --git a/src/jmapNew/config/skinCode/chengdu_01.js b/src/jmapNew/config/skinCode/chengdu_01.js index 8de214730..cf7a16b89 100644 --- a/src/jmapNew/config/skinCode/chengdu_01.js +++ b/src/jmapNew/config/skinCode/chengdu_01.js @@ -6,11 +6,12 @@ class SkinCode extends defaultStyle { super(); this.fontFamily = '宋体'; this[deviceType.Section] = { + elemnetType:['name', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'separator', 'speedLimit', 'speedLimitName'], active: { routeColor: false // 进路触发颜色 }, - text: { - show: true, // 物理区段名称显示 + name: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 10, // 文字离区段距离 fontSize: 12, // 字体大小 @@ -21,7 +22,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, logicText: { // 逻辑区段名称 - show: false, // 逻辑区段名称显示 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 12, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -31,8 +32,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - standText: { // 站台 - show: true, // 站台轨名称显示 + standTrackText: { // 站台 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 24, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -42,8 +43,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - reentryText: { // 折返 - show: true, // 折返轨名称显示 + reentryTrackText: { // 折返 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 36, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -53,8 +54,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - transferText: { // 转换轨 - show: true, // 转换轨名称显示 + transferTrackText: { // 转换轨 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 36, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -65,7 +66,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, destinationText: { // 目的地 - show: true, // 目的码名称显示 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 12, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -76,6 +77,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, line: { + z: 0, width: 5, // 区段宽度 beyondWidth: 0, // 区段宽超出宽度 invadeColor: '#FFFFFF', // 区段侵入颜色 @@ -96,17 +98,20 @@ class SkinCode extends defaultStyle { logicalTextColor: '#C0C0C0', // 逻辑区段名称颜色 (未用) invalidColor: '#A0522D' // 计轴故障 }, - axle: {}, // 计轴 speedLimit: { // 限速元素 + z: 2, width: 1, // 限速线的宽度 distance: 5, // 限速线距离区段距离 lineColor: '#C0C000', // 限速线颜色 （黄色透明光） - nameBackground: '#C0C000', // 限速名称背景颜色 - nameShow: true, // 名称显示 - nameNumberColor: '#C00808', // 限速值颜色 - nameNumberFontSize: 11, // 限速值大小 - kilometerColor: '#fff', // 公里标颜色 + nameShow: true // 名称显示 + }, + speedLimitName: { + z: 10, kilometerFontSize: 8, // 公里标大小 + kilometerColor: '#fff', // 公里标颜色 + nameNumberFontSize: 11, // 限速值大小 + nameNumberColor: '#C00808', // 限速值颜色 + nameBackground: '#C0C000', // 限速名称背景颜色 drogueWidth: 19, // 浮标宽度 drogueHeight: 12 // 浮标高度 }, @@ -118,9 +123,6 @@ class SkinCode extends defaultStyle { color: 'white', // 区段边界符颜色 halfHeight: 5 // 区段分隔符高度的一半 }, - block: { - special: false // 区段特殊显示 - }, trainPosition:{ display: true // 列车实时位置显示 } @@ -204,34 +206,25 @@ class SkinCode extends defaultStyle { distance: 4, // 站台和屏蔽门之间的距离 defaultColor: 'green', // 屏蔽门默认颜色 splitDoorColor: 'green' // 屏蔽门切除颜色 - }, - // 关联的后端属性 - relatedStatus:{ - // 该属性 关联的绘图元素 (注意优先级,后面的高于前面的优先级) - 'screenDoorOpenStatus':['safetyDoorNormal'], - 'fault':['safetyDoorNormal'] } }; this[deviceType.StationStand] = { // 成都一号线站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级 跳停 - elemnetType:['safeStand', 'emergent', 'detainCarNormal', 'stopTime', 'level', 'jump'], + elemnetType:['solidStand', 'emergentRhombus', 'detainNormal', 'stopTime', 'level', 'jumpCircle'], // 站台 - safeStand:{ + solidStand:{ // 层级 z:0, - special:false, spareColor: 'white', // 站台空闲颜色 jumpStopColor: 'blue', // 站台跳停颜色 designatedJumpStopColor: 'lightSkyBlue', // 站台指定列车跳停颜色 headFontSize: 10, // 站台首端字体大小 stopColor: 'yellow' // 站台列车停站颜色 - // relatedStatus:['trainParking', 'assignSkip', 'allSkip', 'emergencyClosed'] }, // 站台紧急关闭 - emergent:{ + emergentRhombus:{ z:1, - special:false, mergentR: 4, // 站台紧急关闭半径 mergentN: 4, // 站台紧急关闭边数 insideOffset: { x: 0, y: 25 }, // 内站台紧急关闭偏移量 @@ -239,7 +232,7 @@ class SkinCode extends defaultStyle { closeColor: 'red' // 站台紧急关闭颜色 }, // 扣车元素 普通扣车 - detainCarNormal:{ + detainNormal:{ z:0, position: -1, // 扣车标识在站台上显示方向 text: 'H', // 扣车显示内容 @@ -266,7 +259,7 @@ class SkinCode extends defaultStyle { offset: {x: -8, y: 30}, // 运行等级偏移量 textColor: '#FFF000' // 停站等级字体颜色 }, - jump: { + jumpCircle: { z:1, position: 1, // 停跳方向 text: '跳', // 停跳显示内容 diff --git a/src/jmapNew/config/skinCode/chengdu_03.js b/src/jmapNew/config/skinCode/chengdu_03.js index 90ed061ce..dcdac4527 100644 --- a/src/jmapNew/config/skinCode/chengdu_03.js +++ b/src/jmapNew/config/skinCode/chengdu_03.js @@ -6,11 +6,12 @@ class SkinCode extends defaultStyle { super(); this.fontFamily = '宋体'; this[deviceType.Section] = { + elemnetType:['name', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'line', 'separator', 'speedLimit', 'speedLimitName'], active: { routeColor: true // 进路触发颜色 }, - text: { - show: true, // 物理区段名称显示 + name: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 10, // 文字离区段距离 fontSize: 12, // 字体大小 @@ -21,7 +22,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, logicText: { - show: false, // 逻辑区段名称显示 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 12, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -31,8 +32,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - standText: { - show: true, // 站台轨名称显示 + standTrackText: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 24, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -42,8 +43,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - reentryText: { - show: true, // 折返轨名称显示 + reentryTrackText: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 36, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -53,8 +54,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - transferText: { - show: true, // 转换轨名称显示 + transferTrackText: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 36, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -65,7 +66,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, destinationText: { - show: false, // 目的码名称显示 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 12, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -76,6 +77,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, line: { + z: 0, width: 5, // 区段宽度 beyondWidth: 0, // 区段宽超出宽度 invadeColor: '#FFFFFF', // 区段侵入颜色 @@ -96,17 +98,20 @@ class SkinCode extends defaultStyle { logicalTextColor: '#C0C0C0', // 逻辑区段名称颜色 (未用) invalidColor: '#B18E38' // 区段ARB故障颜色 }, - axle: {}, // 计轴 speedLimit: { // 限速元素 + z: 2, width: 1, // 限速线的宽度 distance: 5, // 限速线距离区段距离 lineColor: '#C0C000', // 限速线颜色 （黄色透明光） - nameBackground: '#C0C000', // 限速名称背景颜色 - nameShow: true, // 名称显示 - nameNumberColor: '#C00808', // 限速值颜色 - nameNumberFontSize: 11, // 限速值大小 - kilometerColor: '#fff', // 公里标颜色 + nameShow: true // 名称显示 + }, + speedLimitName: { + z: 10, kilometerFontSize: 8, // 公里标大小 + kilometerColor: '#fff', // 公里标颜色 + nameNumberFontSize: 11, // 限速值大小 + nameNumberColor: '#C00808', // 限速值颜色 + nameBackground: '#C0C000', // 限速名称背景颜色 drogueWidth: 19, // 浮标宽度 drogueHeight: 12 // 浮标高度 }, @@ -118,11 +123,11 @@ class SkinCode extends defaultStyle { color: '#FFFFFF', // 区段边界符颜色 halfHeight: 5 // 区段分隔符高度的一半 }, - // shuttleBack: { // 折返进路 (存在此对象 显示折返箭头) - // distance: 5 // 限速线距离区段距离 - // }, - block: { - special: false // 区段特殊显示 + shuttleBack: { // 折返进路 (存在此对象 显示折返箭头) + z: 10, + width: 1.5, + color: '#FFFFFF', + distance: 5 // 限速线距离区段距离 }, trainPosition:{ display: false // 列车实时位置显示 @@ -221,35 +226,26 @@ class SkinCode extends defaultStyle { distance: 8, // 站台和屏蔽门之间的距离 defaultColor: '#00FF00', // 屏蔽门默认颜色 splitDoorColor: '#C00808' // 屏蔽门切除颜色 - }, - // 关联的后端属性 - relatedStatus:{ - // 该属性 关联的绘图元素 (注意优先级,后面的高于前面的优先级) - 'screenDoorOpenStatus':['safetyDoorNormal'], - 'fault':['safetyDoorNormal'] } }; this[deviceType.StationStand] = { // 成都三号线站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级 跳停 - elemnetType:['safeStand', 'emergent', 'detainCarNormal', 'stopTime', 'level', 'jump'], + elemnetType:['solidStand', 'emergentRhombus', 'detainNormal', 'stopTime', 'level', 'jumpCircle'], // 站台 - safeStand:{ + solidStand:{ // 层级 z:0, - special:false, spareColor: '#ffffff', // 站台空闲颜色 jumpStopColor: '#808080', // 站台跳停颜色 designatedJumpStopColor: '#808080', // 站台指定列车跳停颜色 headFontSize: 10, // 站台首端字体大小 stopColor: '#FFF000' // 站台列车停站颜色 - // relatedStatus:['trainParking', 'assignSkip', 'allSkip', 'emergencyClosed'] }, // 站台紧急关闭 - emergent:{ + emergentRhombus:{ z:1, flicker: true, // 闪烁 - special:false, mergentR: 5, // 站台紧急关闭半径 mergentN: 4, // 站台紧急关闭边数 insideOffset: { x: 0, y: 30 }, // 内站台紧急关闭偏移量 @@ -257,7 +253,7 @@ class SkinCode extends defaultStyle { closeColor: '#F61107' // 站台紧急关闭颜色 }, // 扣车元素 普通扣车 - detainCarNormal:{ + detainNormal:{ z:0, position: -1, // 扣车标识在站台上显示方向 text: '扣', // 扣车显示内容 @@ -285,7 +281,7 @@ class SkinCode extends defaultStyle { textColor: '#FFF000' // 停站等级字体颜色 }, // 跳停 - jump: { + jumpCircle: { z:1, position: 1, // 停跳方向 text: '跳', // 停跳显示内容 diff --git a/src/jmapNew/config/skinCode/foshan_01.js b/src/jmapNew/config/skinCode/foshan_01.js index 53a60fcf1..6e02282b0 100644 --- a/src/jmapNew/config/skinCode/foshan_01.js +++ b/src/jmapNew/config/skinCode/foshan_01.js @@ -6,11 +6,12 @@ class SkinCode extends defaultStyle { super(); this.fontFamily = '宋体'; this[deviceType.Section] = { + elemnetType:['name', 'logicText', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'separator', 'speedLimit'], active: { routeColor: false // 进路触发颜色 }, - text: { - show: true, // 物理区段名称显示 + name: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 18, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -21,7 +22,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, logicText: { - show: true, // 逻辑区段名称显示 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 6, // 文字离区段距离 fontSize: 8, // 字体大小 @@ -31,8 +32,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - standText: { - show: true, // 站台轨名称显示 + standTrackText: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 30, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -42,8 +43,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - reentryText: { - show: true, // 折返轨名称显示 + reentryTrackText: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 30, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -53,8 +54,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - transferText: { - show: true, // 转换轨名称显示 + transferTrackText: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 28, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -65,7 +66,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, destinationText: { - show: true, // 目的码名称显示 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 10, // 文字离区段距离 fontSize: 10, // 字体大小 @@ -76,6 +77,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, line: { + z: 0, width: 5, // 区段宽度 beyondWidth: 0, // 区段宽超出宽度 invadeColor: '#EF0C08', // 区段侵入颜色 @@ -96,8 +98,8 @@ class SkinCode extends defaultStyle { logicalTextColor: '#FFFFFF', // 逻辑区段名称颜色 (未用) invalidColor: '#A25100' // 区段ARB故障颜色 }, - axle: {}, // 计轴 speedLimit: { // 限速元素 + z: 2, width: 1, // 限速线的宽短 distance: 5, // 限速线距离区段距离 lineColor: '#FFFF00', // 限速线颜色 @@ -111,9 +113,6 @@ class SkinCode extends defaultStyle { color: '#3149C3', // 区段边界符颜色 halfHeight: 5 // 区段分隔符高度的一半 }, - block: { - special: false // 区段特殊显示 - }, trainPosition:{ display: false // 列车实时位置显示 } @@ -199,34 +198,25 @@ class SkinCode extends defaultStyle { distance: 8, // 站台和屏蔽门之间的距离 defaultColor: '#00FF00', // 屏蔽门默认颜色 splitDoorColor: '#F61107' // 屏蔽门切除颜色 - }, - // 关联的后端属性 - relatedStatus:{ - // 该属性 关联的绘图元素 (注意优先级,后面的高于前面的优先级) - 'screenDoorOpenStatus':['safetyDoorNormal'], - 'fault':['safetyDoorNormal'] } }; this[deviceType.StationStand] = { // 佛山有轨电车站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级 跳停 - elemnetType:['safeStand', 'emergent', 'detainCarNormal', 'stopTime', 'level', 'jump'], + elemnetType:['solidStand', 'emergentRhombus', 'detainNormal', 'stopTime', 'level', 'jump'], // 站台 - safeStand:{ + solidStand:{ // 层级 z:0, - special:false, spareColor: '#606060', // 站台空闲颜色 jumpStopColor: '#9A99FF', // 站台跳停颜色 designatedJumpStopColor: '#606060', // 站台指定列车跳停颜色 headFontSize: 11, // 站台首端字体大小 stopColor: '#FEFE00' // 站台列车停站颜色 - // relatedStatus:['trainParking', 'assignSkip', 'allSkip', 'emergencyClosed'] }, // 站台紧急关闭 - emergent:{ + emergentRhombus:{ z:1, - special:false, mergentR: 4, // 站台紧急关闭半径 mergentN: 4, // 站台紧急关闭边数 insideOffset: { x: 0, y: 25}, // 内站台紧急关闭偏移量 @@ -234,7 +224,7 @@ class SkinCode extends defaultStyle { closeColor: '#F61107' // 站台紧急关闭颜色 }, // 扣车元素 普通扣车 - detainCarNormal:{ + detainNormal:{ z:0, position: 1, // 扣车标识在站台上显示方向 text: 'H', // 扣车显示内容 @@ -270,7 +260,6 @@ class SkinCode extends defaultStyle { textColor: '#5376B3', // 停跳文字颜色 arcColor: '#000000', // 停跳圆圈颜色 fillColor: 'rgba(0,0,0,0)', // 透明填充颜色 - r: 0, // 圆半径大小 fontWeight: 'normal', // 文字居中 fontSize: 11 // 文字大小 }, diff --git a/src/jmapNew/config/skinCode/fuzhou_01.js b/src/jmapNew/config/skinCode/fuzhou_01.js index 36991e5aa..0a1d96ad1 100644 --- a/src/jmapNew/config/skinCode/fuzhou_01.js +++ b/src/jmapNew/config/skinCode/fuzhou_01.js @@ -6,11 +6,12 @@ class SkinCode extends defaultStyle { super(); this.fontFamily = '宋体'; this[deviceType.Section] = { + elemnetType:['name', 'logicText', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'separator', 'speedLimit'], active: { routeColor: false // 进路触发颜色 }, - text: { - show: true, // 物理区段名称显示 + name: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 18, // 文字离区段距离 fontSize: 12, // 字体大小 @@ -21,7 +22,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, logicText: { - show: true, // 逻辑区段名称显示 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 6, // 文字离区段距离 fontSize: 12, // 字体大小 @@ -31,8 +32,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - standText: { - show: true, // 站台轨名称显示 + standTrackText: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 30, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -42,8 +43,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - reentryText: { - show: true, // 折返轨名称显示 + reentryTrackText: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 30, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -53,8 +54,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - transferText: { - show: true, // 转换轨名称显示 + transferTrackText: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 28, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -65,7 +66,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, destinationText: { - show: true, // 目的码名称显示 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 10, // 文字离区段距离 fontSize: 10, // 字体大小 @@ -76,6 +77,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, line: { + z: 0, width: 5, // 区段宽度 beyondWidth: 0, // 区段宽超出宽度 invadeColor: '#EF0C08', // 区段侵入颜色 @@ -96,8 +98,8 @@ class SkinCode extends defaultStyle { logicalTextColor: '#FFFFFF', // 逻辑区段名称颜色 (未用) invalidColor: '#A25100' // 区段ARB故障颜色 }, - axle: {}, // 计轴 speedLimit: { // 限速元素 + z: 2, width: 1, // 限速线的宽短 distance: 5, // 限速线距离区段距离 lineColor: '#FFFF00', // 限速线颜色 @@ -111,9 +113,6 @@ class SkinCode extends defaultStyle { color: '#3149C3', // 区段边界符颜色 halfHeight: 5 // 区段分隔符高度的一半 }, - block: { - special: false // 区段特殊显示 - }, trainPosition:{ display: false // 列车实时位置显示 } @@ -198,34 +197,25 @@ class SkinCode extends defaultStyle { distance: 8, // 站台和屏蔽门之间的距离 defaultColor: '#00FF00', // 屏蔽门默认颜色 splitDoorColor: '#F61107' // 屏蔽门切除颜色 - }, - // 关联的后端属性 - relatedStatus:{ - // 该属性 关联的绘图元素 (注意优先级,后面的高于前面的优先级) - 'screenDoorOpenStatus':['safetyDoorNormal'], - 'fault':['safetyDoorNormal'] } }; this[deviceType.StationStand] = { // 福州一号线新版站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级 跳停 折返策略 - elemnetType:['safeStand', 'emergent', 'detainCarNormal', 'stopTime', 'level', 'reentry'], + elemnetType:['solidStand', 'emergentRhombus', 'detainHollow', 'stopTime', 'level', 'reentry'], // 站台 - safeStand:{ + solidStand:{ // 层级 z:0, - special:false, spareColor: '#606060', // 站台空闲颜色 jumpStopColor: '#9A99FF', // 站台跳停颜色 designatedJumpStopColor: 'lightSkyBlue', // 站台指定列车跳停颜色 headFontSize: 11, // 站台首端字体大小 stopColor: '#FEFE00' // 站台列车停站颜色 - // relatedStatus:['trainParking', 'assignSkip', 'allSkip', 'emergencyClosed'] }, // 站台紧急关闭 - emergent:{ + emergentRhombus:{ z:1, - special:false, mergentR: 4, // 站台紧急关闭半径 mergentN: 4, // 站台紧急关闭边数 insideOffset: { x: 0, y: 25 }, // 内站台紧急关闭偏移量 @@ -233,7 +223,7 @@ class SkinCode extends defaultStyle { closeColor: '#F61107' // 站台紧急关闭颜色 }, // 扣车元素 普通扣车 - detainCarNormal:{ + detainHollow:{ z:0, position: 1, // 扣车标识在站台上显示方向 text: 'H', // 扣车显示内容 @@ -243,7 +233,6 @@ class SkinCode extends defaultStyle { detainTrainTextColor: '#E4EF50', // 车站扣除文字颜色 // trainColor: '#E4EF50', // 车站扣车颜色 fontSize: 11, // 字体大小 - circle: true, // 空心圆环 fontWeight: 'normal' }, // 停站时间 diff --git a/src/jmapNew/config/skinCode/haerbin_01.js b/src/jmapNew/config/skinCode/haerbin_01.js index d9e7eb75e..bd52cea2c 100644 --- a/src/jmapNew/config/skinCode/haerbin_01.js +++ b/src/jmapNew/config/skinCode/haerbin_01.js @@ -6,11 +6,12 @@ class SkinCode extends defaultStyle { super(); this.fontFamily = '宋体'; this[deviceType.Section] = { + elemnetType:['name', 'logicText', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'line', 'lineBorder', 'sectionBlock', 'speedLimit'], active: { routeColor: false // 进路触发颜色 }, - text: { - show: true, // 物理区段名称显示 + name: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 18, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -21,7 +22,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, logicText: { - show: true, // 逻辑区段名称显示 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 6, // 文字离区段距离 fontSize: 8, // 字体大小 @@ -31,8 +32,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - standText: { - show: true, // 站台轨名称显示 + standTrackText: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 30, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -42,8 +43,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - reentryText: { - show: true, // 折返轨名称显示 + reentryTrackText: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 30, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -53,8 +54,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - transferText: { - show: true, // 转换轨名称显示 + transferTrackText: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 28, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -65,7 +66,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, destinationText: { - show: false, // 目的码名称显示 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 10, // 文字离区段距离 fontSize: 10, // 字体大小 @@ -76,7 +77,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, line: { - isActiveShow: true, // 哈尔滨点击元素显示 + z: 0, width: 5, // 区段宽度 beyondWidth: 0, // 区段宽超出宽度 invadeColor: '#EF0C08', // 区段侵入颜色 @@ -97,8 +98,15 @@ class SkinCode extends defaultStyle { logicalColor: '#FFFF00', // 逻辑区段颜色 (未用) logicalTextColor: '#FFFFFF' // 逻辑区段名称颜色 (未用) }, - axle: {}, // 计轴 + lineBorder: { // 哈尔滨点击背景 元素 + z: -1, + activeStroke: '#2EBFBF' + }, + sectionBlock: { + z: 2 + }, // 计轴 speedLimit: { // 限速元素 + z: 2, width: 1, // 限速线的宽短 distance: 5, // 限速线距离区段距离 lineColor: '#FFFF00', // 限速线颜色 @@ -112,9 +120,6 @@ class SkinCode extends defaultStyle { color: '#3149C3', // 区段边界符颜色 halfHeight: 5 // 区段分隔符高度的一半 }, - block: { - special: true // 区段特殊显示 - }, trainPosition:{ display: false // 列车实时位置显示 } @@ -205,33 +210,25 @@ class SkinCode extends defaultStyle { distance: 8, // 站台和屏蔽门之间的距离 defaultColor: '#fff', // 屏蔽门默认颜色 splitDoorColor: '#F61107' // 屏蔽门切除颜色 - }, - // 关联的后端属性 - relatedStatus:{ - // 该属性 关联的绘图元素 (注意优先级,后面的高于前面的优先级) - 'screenDoorOpenStatus':['horizontal2Door'], - 'fault':['horizontal2Door'] } }; this[deviceType.StationStand] = { // 哈尔滨一号线站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级 跳停 - elemnetType:['safeStand', 'emergent', 'detainCarNormal', 'level', 'jump', 'trainStop', 'trainDepart'], + elemnetType:['gapStand', 'emergentArrow', 'detainNormal', 'level', 'jump', 'trainStop', 'trainDepart'], // 站台 - safeStand:{ + gapStand:{ // 层级 z:0, - special:true, spareColor: '#00FFFF', // 站台空闲颜色 jumpStopColor: '#9A99FF', // 站台跳停颜色 designatedJumpStopColor: 'lightSkyBlue', // 站台指定列车跳停颜色 headFontSize: 11, // 站台首端字体大小 stopColor: '#FEFE00', // 站台列车停站颜色 textFill: '#fff' // 站台字体颜色 - // relatedStatus:['trainParking', 'assignSkip', 'allSkip', 'emergencyClosed'] }, // 站台紧急关闭 - emergent:{ + emergentArrow:{ z:1, special:false, mergentR: 4, // 站台紧急关闭半径 @@ -243,7 +240,7 @@ class SkinCode extends defaultStyle { radiusR: 6 }, // 扣车元素 普通扣车 - detainCarNormal:{ + detainNormal:{ z:0, position: 1, // 扣车标识在站台上显示方向 text: 'H', // 扣车显示内容 diff --git a/src/jmapNew/config/skinCode/ningbo_01.js b/src/jmapNew/config/skinCode/ningbo_01.js index 99bd2a8df..6537458fd 100644 --- a/src/jmapNew/config/skinCode/ningbo_01.js +++ b/src/jmapNew/config/skinCode/ningbo_01.js @@ -6,11 +6,12 @@ class SkinCode extends defaultStyle { super(); this.fontFamily = '宋体'; this[deviceType.Section] = { + elemnetType:['name', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'separator', 'speedLimit'], active: { routeColor: false // 进路触发颜色 }, - text: { - show: true, // 物理区段名称显示 + name: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 10, // 文字离区段距离 fontSize: 12, // 字体大小 @@ -21,7 +22,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, logicText: { // 逻辑区段名称 - show: false, // 逻辑区段名称显示 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 12, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -31,8 +32,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - standText: { // 站台 - show: true, // 站台轨名称显示 + standTrackText: { // 站台 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 24, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -42,8 +43,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - reentryText: { // 折返 - show: true, // 折返轨名称显示 + reentryTrackText: { // 折返 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 36, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -53,8 +54,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - transferText: { // 转换轨 - show: true, // 转换轨名称显示 + transferTrackText: { // 转换轨 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 36, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -65,7 +66,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, destinationText: { // 目的地 - show: true, // 目的码名称显示 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 12, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -76,6 +77,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, line: { + z: 0, width: 5, // 区段宽度 beyondWidth: 0, // 区段宽超出宽度 invadeColor: '#FFFFFF', // 区段侵入颜色 @@ -96,19 +98,12 @@ class SkinCode extends defaultStyle { logicalColor: '#FFFF00', // 逻辑区段颜色 (未用) logicalTextColor: 'white' // 逻辑区段名称颜色 (未用) }, - axle: {}, // 计轴 speedLimit: { // 限速元素 + z: 2, width: 1, // 限速线的宽度 distance: 5, // 限速线距离区段距离 lineColor: '#C0C000', // 限速线颜色 （黄色透明光） - nameBackground: '#C0C000', // 限速名称背景颜色 - nameShow: false, // 名称显示 - nameNumberColor: '#C00808', // 限速值颜色 - nameNumberFontSize: 11, // 限速值大小 - kilometerColor: '#fff', // 公里标颜色 - kilometerFontSize: 8, // 公里标大小 - drogueWidth: 19, // 浮标宽度 - drogueHeight: 12 // 浮标高度 + nameShow: false // 名称显示 }, separator: { z: 3, // 分割符层级 @@ -119,7 +114,6 @@ class SkinCode extends defaultStyle { halfHeight: 5 // 区段分隔符高度的一半 }, block: { - special: false, // 区段特殊显示 blockGlint: true // 区段封锁闪烁显示 }, trainPosition:{ @@ -328,34 +322,25 @@ class SkinCode extends defaultStyle { distance: 4, // 站台和屏蔽门之间的距离 defaultColor: 'green', // 屏蔽门默认颜色 splitDoorColor: 'green' // 屏蔽门切除颜色 - }, - // 关联的后端属性 - relatedStatus:{ - // 该属性 关联的绘图元素 (注意优先级,后面的高于前面的优先级) - 'screenDoorOpenStatus':['safetyDoorNormal'], - 'fault':['safetyDoorNormal'] } }; this[deviceType.StationStand] = { // 宁波一号线站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级 - elemnetType:['safeStand', 'emergent', 'detainCarNormal', 'stopTime', 'level'], + elemnetType:['solidStand', 'emergentRhombus', 'detainNormal', 'stopTime', 'level'], // 站台 - safeStand:{ + solidStand:{ // 层级 z:0, - special:false, spareColor: 'white', // 站台空闲颜色 jumpStopColor: '#6260f3', // 站台跳停颜色 designatedJumpStopColor: 'lightSkyBlue', // 站台指定列车跳停颜色 headFontSize: 10, // 站台首端字体大小 stopColor: 'yellow' // 站台列车停站颜色 - // relatedStatus:['trainParking', 'assignSkip', 'allSkip', 'emergencyClosed'] }, // 站台紧急关闭 - emergent:{ + emergentRhombus:{ z:1, - special:false, mergentR: 4, // 站台紧急关闭半径 mergentN: 4, // 站台紧急关闭边数 insideOffset: { x: 0, y: 25 }, // 内站台紧急关闭偏移量 @@ -363,7 +348,7 @@ class SkinCode extends defaultStyle { closeColor: 'red' // 站台紧急关闭颜色 }, // 扣车元素 普通扣车 - detainCarNormal:{ + detainNormal:{ z:0, position: 1, // 扣车标识在站台上显示方向 text: 'H', // 扣车显示内容 diff --git a/src/jmapNew/config/skinCode/ningbo_03.js b/src/jmapNew/config/skinCode/ningbo_03.js index e61300691..3636be246 100644 --- a/src/jmapNew/config/skinCode/ningbo_03.js +++ b/src/jmapNew/config/skinCode/ningbo_03.js @@ -7,11 +7,12 @@ class SkinCode extends defaultStyle { this.fontFamily = '宋体'; this.backgroundColor = '#808080'; this[deviceType.Section] = { + elemnetType:['name', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'stopRouteImg', 'separator', 'speedLimit'], active: { routeColor: false // 进路触发颜色 }, - text: { - show: true, // 物理区段名称显示 + name: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 10, // 文字离区段距离 fontSize: 12, // 字体大小 @@ -22,7 +23,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, logicText: { // 逻辑区段名称 - show: false, // 逻辑区段名称显示 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 12, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -32,8 +33,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - standText: { // 站台 - show: true, // 站台轨名称显示 + standTrackText: { // 站台 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 24, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -43,8 +44,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - reentryText: { // 折返 - show: true, // 折返轨名称显示 + reentryTrackText: { // 折返 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 36, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -54,8 +55,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - transferText: { // 转换轨 - show: true, // 转换轨名称显示 + transferTrackText: { // 转换轨 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 36, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -66,7 +67,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, destinationText: { // 目的地 - show: true, // 目的码名称显示 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 12, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -77,6 +78,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, line: { + z: 0, width: 8, // 区段宽度 beyondWidth: 0, // 区段宽超出宽度 invadeColor: '#FFFFFF', // 区段侵入颜色 @@ -127,19 +129,12 @@ class SkinCode extends defaultStyle { cancelMauLineStroke: '#000' }, stopRouteImg: {}, - axle: {}, // 计轴 speedLimit: { // 限速元素 + z: 2, width: 1, // 限速线的宽度 distance: 5, // 限速线距离区段距离 lineColor: '#C0C000', // 限速线颜色 （黄色透明光） - nameBackground: '#C0C000', // 限速名称背景颜色 - nameShow: false, // 名称显示 - nameNumberColor: '#C00808', // 限速值颜色 - nameNumberFontSize: 11, // 限速值大小 - kilometerColor: '#fff', // 公里标颜色 - kilometerFontSize: 8, // 公里标大小 - drogueWidth: 19, // 浮标宽度 - drogueHeight: 12 // 浮标高度 + nameShow: false // 名称显示 }, separator: { z: -1, // 分割符层级 @@ -150,7 +145,6 @@ class SkinCode extends defaultStyle { halfHeight: 8 // 区段分隔符高度的一半 }, block: { - special: false, // 区段特殊显示 blockGlint: true // 区段封锁闪烁显示 }, trainPosition:{ @@ -377,23 +371,16 @@ class SkinCode extends defaultStyle { distance: 4, // 站台和屏蔽门之间的距离 defaultColor: 'green', // 屏蔽门默认颜色 splitDoorColor: 'green' // 屏蔽门切除颜色 - }, - // 关联的后端属性 - relatedStatus:{ - // 该属性 关联的绘图元素 (注意优先级,后面的高于前面的优先级) - 'screenDoorOpenStatus':['safetyDoorNormal'], - 'fault':['safetyDoorNormal'] } }; this[deviceType.StationStand] = { // 宁波三号线站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级 跳停 - elemnetType:['safeStand', 'emergent', 'detainRect', 'stopTime', 'level'], + elemnetType:['solidStand', 'emergentRhombus', 'detainRect', 'stopTime', 'level'], // 站台 - safeStand:{ + solidStand:{ // 层级 z:0, - special:false, spareColor: '#0080C0', // 站台空闲颜色 spareStrokeColor: '#000000', // 站台空闲描边颜色 jumpStopColor: '#C00000', // 站台跳停颜色 @@ -403,12 +390,10 @@ class SkinCode extends defaultStyle { stopColor: 'yellow', // 站台列车停站颜色 virtualColor: '#585858', // 虚拟站台颜色 lineWidth: 3 // 站台线宽 - // relatedStatus:['trainParking', 'assignSkip', 'allSkip', 'emergencyClosed'] }, // 站台紧急关闭 - emergent:{ + emergentRhombus:{ z:1, - special:false, mergentR: 4, // 站台紧急关闭半径 mergentN: 4, // 站台紧急关闭边数 insideOffset: { x: 0, y: 25 }, // 内站台紧急关闭偏移量 diff --git a/src/jmapNew/config/skinCode/xian_01.js b/src/jmapNew/config/skinCode/xian_01.js index 1bb524eb5..d60861517 100644 --- a/src/jmapNew/config/skinCode/xian_01.js +++ b/src/jmapNew/config/skinCode/xian_01.js @@ -6,11 +6,12 @@ class SkinCode extends defaultStyle { super(); this.fontFamily = '宋体'; this[deviceType.Section] = { + elemnetType:['name', 'logicText', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'separator', 'speedLimit'], active: { routeColor: false // 进路触发颜色 }, - text: { - show: true, // 物理区段名称显示 + name: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 18, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -21,7 +22,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, logicText: { - show: true, // 逻辑区段名称显示 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 6, // 文字离区段距离 fontSize: 8, // 字体大小 @@ -31,8 +32,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - standText: { - show: true, // 站台轨名称显示 + standTrackText: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 30, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -42,8 +43,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - reentryText: { - show: true, // 折返轨名称显示 + reentryTrackText: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 30, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -53,8 +54,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - transferText: { - show: true, // 转换轨名称显示 + transferTrackText: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 28, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -65,7 +66,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, destinationText: { - show: true, // 目的码名称显示 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 10, // 文字离区段距离 fontSize: 10, // 字体大小 @@ -84,6 +85,7 @@ class SkinCode extends defaultStyle { lineWidthMore: 5 }, line: { + z: 0, width: 5, // 区段宽度 beyondWidth: 0, // 区段宽超出宽度 invadeColor: '#EF0C08', // 区段侵入颜色 @@ -104,8 +106,8 @@ class SkinCode extends defaultStyle { logicalTextColor: '#FFFFFF', // 逻辑区段名称颜色 (未用) invalidColor: '#9C5208' // 区段ARB故障颜色 }, - axle: {}, // 计轴 speedLimit: { // 限速元素 + z: 2, width: 1, // 限速线的宽短 distance: 5, // 限速线距离区段距离 lineColor: '#FFFF00', // 限速线颜色 @@ -119,9 +121,6 @@ class SkinCode extends defaultStyle { color: '#3149C3', // 区段边界符颜色 halfHeight: 5 // 区段分隔符高度的一半 }, - block: { - special: false // 区段特殊显示 - }, trainPosition:{ display: false // 列车实时位置显示 } @@ -207,46 +206,25 @@ class SkinCode extends defaultStyle { distance: 8, // 站台和屏蔽门之间的距离 defaultColor: '#00FF00', // 屏蔽门默认颜色 splitDoorColor: '#F61107' // 屏蔽门切除颜色 - }, - // 关联的后端属性 - relatedStatus:{ - // 该属性 关联的绘图元素 (注意优先级,后面的高于前面的优先级) - 'screenDoorOpenStatus':['safetyDoorNormal'], - 'fault':['safetyDoorNormal'] } }; this[deviceType.StationStand] = { // 西安一/三号线 站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级 折返策略 - elemnetType:['safeStand', 'emergent', 'detainCarNormal', 'stopTime', 'level', 'reentry'], - // // 关联的后端属性 - // relatedStatus:{ - // // 该属性 关联的绘图元素 - // 'trainParking':{ - // type:Boolean, - // data:['safeStand'] - // }, - // 'emergencyClosed':{ - // type:Boolean, - // data:['emergent'] - // } - // }, + elemnetType:['solidStand', 'emergentRhombus', 'detainHollow', 'stopTime', 'level', 'reentry'], // 站台 - safeStand:{ + solidStand:{ // 层级 z:0, - special:false, spareColor: '#606060', // 站台空闲颜色 jumpStopColor: '#9A99FF', // 站台跳停颜色 designatedJumpStopColor: 'lightSkyBlue', // 站台指定列车跳停颜色 headFontSize: 11, // 站台首端字体大小 stopColor: '#FEFE00' // 站台列车停站颜色 - // relatedStatus:['trainParking', 'assignSkip', 'allSkip', 'emergencyClosed'] // 关联的后端属性 }, // 站台紧急关闭 - emergent:{ + emergentRhombus:{ z:1, - special:false, mergentR: 4, // 站台紧急关闭半径 mergentN: 4, // 站台紧急关闭边数 insideOffset: { x: 0, y: 25 }, // 内站台紧急关闭偏移量 @@ -254,7 +232,7 @@ class SkinCode extends defaultStyle { closeColor: '#F61107' // 站台紧急关闭颜色 }, // 扣车元素 普通扣车 - detainCarNormal:{ + detainHollow:{ z:0, position: 1, // 扣车标识在站台上显示方向 text: 'H', // 扣车显示内容 @@ -264,7 +242,6 @@ class SkinCode extends defaultStyle { andCenterTrainColor: '#F61107', // 车站+中心扣车颜色 detainTrainTextColor: '#E4EF50', // 车站扣除文字颜色 fontSize: 11, // 字体大小 - circle: true, // 空心圆环 fontWeight: 'normal' }, // 停站时间 diff --git a/src/jmapNew/config/skinCode/xian_02.js b/src/jmapNew/config/skinCode/xian_02.js index 5a41d7c75..334d76d09 100644 --- a/src/jmapNew/config/skinCode/xian_02.js +++ b/src/jmapNew/config/skinCode/xian_02.js @@ -6,11 +6,12 @@ class SkinCode extends defaultStyle { super(); this.fontFamily = '宋体'; this[deviceType.Section] = { + elemnetType:['name', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'axle', 'speedLimit'], active: { routeColor: false // 进路触发颜色 }, - text: { - show: true, // 物理区段名称显示 + name: { + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 18, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -21,7 +22,7 @@ class SkinCode extends defaultStyle { textVerticalAlign: 'middle' // 文字垂直对齐方式 }, logicText: { // 逻辑区段名称 - show: false, // 逻辑区段名称显示 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 6, // 文字离区段距离 fontSize: 8, // 字体大小 @@ -31,8 +32,8 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - standText: { // 站台 - show: true, // 站台轨名称显示 + standTrackText: { // 站台名称 + z: 2, position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 distance: 30, // 文字离区段距离 fontSize: 11, // 字体大小 @@ -42,9 +43,9 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - reentryText: { // 折返 - show: true, // 折返轨名称显示 - position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 + reentryTrackText: { // 折返名称 + z: 2, + position: 0, // 名称位置 1 上面 -1 下面 0 对称 distance: 30, // 文字离区段距离 fontSize: 11, // 字体大小 fontWeight: 'normal', // 字体粗细 @@ -53,9 +54,9 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - transferText: { // 转换轨 - show: true, // 转换轨名称显示 - position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 + transferTrackText: { // 转换轨名称 + z: 2, + position: 0, // 名称位置 1 上面 -1 下面 0 对称 distance: 30, // 文字离区段距离 fontSize: 11, // 字体大小 fontWeight: 'normal', // 字体粗细 @@ -64,9 +65,9 @@ class SkinCode extends defaultStyle { textPosition: 'inside', // 文字位置 textVerticalAlign: 'middle' // 文字垂直对齐方式 }, - destinationText: { // 目的地 - show: true, // 目的码名称显示 - position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 + destinationText: { // 目的地名称 + z: 2, + position: 0, // 名称位置 1 上面 -1 下面 0 对称 distance: 28, // 文字离区段距离 fontSize: 11, // 字体大小 fontWeight: 'bold', // 字体粗细 @@ -84,6 +85,7 @@ class SkinCode extends defaultStyle { lineWidthMore: 6 }, line: { + z: 0, width: 4, // 区段宽度 beyondWidth: 0, // 区段宽超出宽度 invadeColor: '#FFFFFF', // 区段侵入颜色 @@ -104,7 +106,7 @@ class SkinCode extends defaultStyle { logicalTextColor: '#C0C0C0' // 逻辑区段名称颜色 (未用) }, axle: { - show: true, // 计轴是否显示 + z: 3, radius: 3, // 计轴 半径 distance: 4, // 计轴和区段之间的距离 （未用） color: '#9F9C9C', // 区段计轴颜色 @@ -114,17 +116,11 @@ class SkinCode extends defaultStyle { lineWidth: 2 }, speedLimit: { // 限速元素 + z: 2, width: 1, // 限速线的宽度 distance: 5, // 限速线距离区段距离 lineColor: '#C0C000', // 限速线颜色 （黄色透明光） - nameBackground: '#C0C000', // 限速名称背景颜色 - nameShow: true, // 名称显示 - nameNumberColor: '#C00808', // 限速值颜色 - nameNumberFontSize: 11, // 限速值大小 - kilometerColor: '#fff', // 公里标颜色 - kilometerFontSize: 8, // 公里标大小 - drogueWidth: 19, // 浮标宽度 - drogueHeight: 12 // 浮标高度 + nameShow: false // 名称显示 }, separator: { z: 3, // 分割符层级 @@ -134,9 +130,6 @@ class SkinCode extends defaultStyle { color: '#AAA9A9', // 区段边界符颜色 halfHeight: 4 // 区段分隔符高度的一半 }, - block: { - special: false // 区段特殊显示 - }, trainPosition:{ display: true // 列车实时位置显示 } @@ -251,36 +244,25 @@ class SkinCode extends defaultStyle { splitDoorColor: '#009900', // 屏蔽门切除颜色 alarmColor:'red', // 收到警报颜色 emergencyColor:'yellow' // 紧急出发按钮激活颜色 - }, - // 关联的后端属性 - relatedStatus:{ - // 该属性 关联的绘图元素 (注意优先级,后面的高于前面的优先级) - 'screenDoorOpenStatus':['vertical2Door'], - 'fault':['vertical2Door'], - 'alarmStatus':['vertical2Door'], - 'emergencyDepart':['vertical2Door'] } }; this[deviceType.StationStand] = { // 西安二号线 站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级 跳停 模式筛选标识 - elemnetType:['safeStand', 'emergent', 'detainCircle', 'stopTime', 'level', 'jump', 'patternFilter'], + elemnetType:['hollowStand', 'emergentCross', 'detainCircle', 'stopTime', 'level', 'jumpCircle', 'patternFilter'], // 站台 - safeStand:{ + hollowStand:{ // 层级 z:0, - special:false, spareColor: '#808080', // 站台空闲颜色 jumpStopColor: 'yellow', // 站台跳停颜色 designatedJumpStopColor: 'yellow', // 站台指定列车跳停颜色 headFontSize: 10, // 站台首端字体大小 stopColor: '#808080', // 站台列车停站颜色 - standType:'notFill', // 站台的样式（NotFill为未填充，目前是西安二号线线路样式） doorOpenColor:'#007f00' // 车门开启状态颜色（西安二号线线路样式） - // relatedStatus:['trainParking', 'assignSkip', 'allSkip', 'emergencyClosed'] }, // 站台紧急关闭 - emergent:{ + emergentCross:{ z:1, special:true, // 西安二号线特殊样式 mergentR: 9, // 站台紧急关闭半径 @@ -321,7 +303,7 @@ class SkinCode extends defaultStyle { textColor: '#FFF000' // 停站等级字体颜色 }, // 跳停 - jump: { + jumpCircle: { z:1, position: 1, // 停跳方向 text: '跳', // 停跳显示内容 diff --git a/src/jmapNew/map.js b/src/jmapNew/map.js index 2b06adb33..96e142f24 100644 --- a/src/jmapNew/map.js +++ b/src/jmapNew/map.js @@ -453,7 +453,6 @@ class Jlmap { } else if (elem.deviceType == 'OVERLAP') { const overlapRoute = this.mapDevice[elem.code]; const model = this.mapDevice[overlapRoute.pathList[0].sectionList[0]]; - // console.log(overlapRoute.pathList[0].right, model.name, elem.remainTime); if (overlapRoute.pathList[0].right) { overlapRoute['points'] = { x: model.points[0].x, y: model.points[0].y }; } else { diff --git a/src/jmapNew/mouseController.js b/src/jmapNew/mouseController.js index eb18bcbd7..07e93027a 100644 --- a/src/jmapNew/mouseController.js +++ b/src/jmapNew/mouseController.js @@ -164,6 +164,7 @@ class MouseController extends Eventful { click(e) { var em = this.checkEvent(e); + // console.log(em, e); this.trigger(this.events.Selected, em); } diff --git a/src/jmapNew/painter.js b/src/jmapNew/painter.js index 09522d02b..637772076 100644 --- a/src/jmapNew/painter.js +++ b/src/jmapNew/painter.js @@ -161,9 +161,7 @@ class Painter { } else { const instance = device.instance; if (instance) { - // 更新状态的时候传入旧的数据，以便于更新 - const oldDevice = Object.assign({}, device); - instance.setState(transitionDeviceStatus(device), oldDevice); // 改变试图状态 + instance.setState(transitionDeviceStatus(device)); // 改变视图状态 } } } catch (err) { diff --git a/src/jmapNew/shape/OverAp/index.js b/src/jmapNew/shape/OverAp/index.js index 2dc3ef13b..317ef97fa 100644 --- a/src/jmapNew/shape/OverAp/index.js +++ b/src/jmapNew/shape/OverAp/index.js @@ -28,9 +28,9 @@ export default class OverAp extends Group { silent: false, x: model.points.x + 30, y: model.points.y - style.Section.line.width * 2, - fontWeight: style.Section.text.fontWeight, + fontWeight: style.Section.name.fontWeight, text: model.remainTime || 30, - textPosition: style.Section.text.textPosition, + textPosition: style.Section.name.textPosition, fontSize: 12, fontFamily: style.fontFamily, textFill: '#FFF', diff --git a/src/jmapNew/shape/Psd/EHorizontal2Door.js b/src/jmapNew/shape/Psd/EHorizontal2Door.js index f0000210d..1fd0ad851 100644 --- a/src/jmapNew/shape/Psd/EHorizontal2Door.js +++ b/src/jmapNew/shape/Psd/EHorizontal2Door.js @@ -55,19 +55,20 @@ class EHorizontal2Door extends Group { setState(model) { const style = this.model.style; - if (model.screenDoorOpenStatus == 0) { - // 开门 - this.stand1.setStyle('fill', style.transparentColor); - this.stand2.setStyle('fill', style.transparentColor); - } else { - // 关门 - this.stand1.setStyle('fill', style.Psd.horizontal2Door.defaultColor); - this.stand2.setStyle('fill', style.Psd.horizontal2Door.defaultColor); - } if (model.fault == 'FAULT_PSD_OPEN') { // 开门 this.stand1.setStyle('fill', style.transparentColor); this.stand2.setStyle('fill', style.transparentColor); + } else { + if (model.screenDoorOpenStatus == 0) { + // 开门 + this.stand1.setStyle('fill', style.transparentColor); + this.stand2.setStyle('fill', style.transparentColor); + } else { + // 关门 + this.stand1.setStyle('fill', style.Psd.horizontal2Door.defaultColor); + this.stand2.setStyle('fill', style.Psd.horizontal2Door.defaultColor); + } } } } diff --git a/src/jmapNew/shape/Psd/ESafeDoor.js b/src/jmapNew/shape/Psd/ESafeDoor.js index 7b3e2f37c..c2ea345b6 100644 --- a/src/jmapNew/shape/Psd/ESafeDoor.js +++ b/src/jmapNew/shape/Psd/ESafeDoor.js @@ -13,6 +13,7 @@ class ESafeDoor extends Group { const style = this.model.style; const padding = 0.1; + // show: model.hasDoor model.width = model.width || style.Psd.safetyDoorNormal.width; model.height = model.height || style.Psd.safetyDoorNormal.height; @@ -81,11 +82,12 @@ class ESafeDoor extends Group { } setState(model) { - model.screenDoorOpenStatus == 0 ? this.safeC.hide() : this.safeC.show(); if (model.fault == 'FAULT_PSD_OPEN') { this.safeC.hide(); const style = this.model.style; this.setColor(style.Psd.safetyDoorNormal.splitDoorColor); + } else { + model.screenDoorOpenStatus == 0 ? this.safeC.hide() : this.safeC.show(); } } diff --git a/src/jmapNew/shape/Psd/EVertical2Door.js b/src/jmapNew/shape/Psd/EVertical2Door.js index b768b61ab..3b9fe0f91 100644 --- a/src/jmapNew/shape/Psd/EVertical2Door.js +++ b/src/jmapNew/shape/Psd/EVertical2Door.js @@ -15,6 +15,7 @@ class EVertical2Door extends Group { // x: model.position.x, // y: model.position.y - (model.height / 2), + // show: model.hasDoor model.width = model.width || style.Psd.vertical2Door.width; model.height = model.height || style.Psd.vertical2Door.height; @@ -69,17 +70,18 @@ class EVertical2Door extends Group { } setState(model) { - // 关门 const style = this.model.style; - if (model.screenDoorOpenStatus == 0) { - // 开门 - this.setColor(style.Psd.vertical2Door.splitDoorColor); - } else { - this.setColor(style.Psd.vertical2Door.defaultColor); - } if (model.fault == 'FAULT_PSD_OPEN') { // 开门 this.setColor(style.Psd.vertical2Door.splitDoorColor); + } else { + if (model.screenDoorOpenStatus == 0) { + // 开门 + this.setColor(style.Psd.vertical2Door.splitDoorColor); + } else { + // 关门 + this.setColor(style.Psd.vertical2Door.defaultColor); + } } model.alarmStatus && this.setColor(style.Psd.vertical2Door.alarmColor); model.emergencyDepart && this.setColor(style.Psd.vertical2Door.emergencyColor); diff --git a/src/jmapNew/shape/Psd/index.js b/src/jmapNew/shape/Psd/index.js index 4a18abe36..1f9f68ba5 100644 --- a/src/jmapNew/shape/Psd/index.js +++ b/src/jmapNew/shape/Psd/index.js @@ -3,6 +3,7 @@ import ESafeDoor from './ESafeDoor'; import EVertical2Door from './EVertical2Door'; import EHorizontal2Door from './EHorizontal2Door'; import EHighlight from '../element/EHighlight'; +import {traverseLineElements} from '../utils/ShapeStatusCovert'; export default class Line2 extends Group { constructor(model, style) { @@ -23,26 +24,14 @@ export default class Line2 extends Group { /** 屏蔽门*/ const model = this.model; const style = this.style; - // // 站台所有的绘图元素 + // 站台所有的绘图元素 const elementTypeList = { 'safetyDoorNormal':ESafeDoor, // 正常屏蔽门 'vertical2Door':EVertical2Door, // 西安二号线屏蔽门 上下两条虚线型 'horizontal2Door':EHorizontal2Door // 哈尔滨线路屏蔽门 左右两个 }; - - // 遍历当前线路下的绘图元素 - const currentTypeList = style.Psd.elemnetType; - currentTypeList.forEach(element => { - const ClassName = elementTypeList[element]; - this[element] = new ClassName({ - zlevel: this.zlevel, - z: this.z + style.Psd[element].z, - style: style, - modelData:model - // show: model.hasDoor - }); - this.add(this[element]); - }); + // 遍历当前线路下的绘图元素 组合模式 + traverseLineElements(style.Psd, elementTypeList, model, style, this); } /** 恢复初始状态*/ @@ -53,78 +42,16 @@ export default class Line2 extends Group { }); } - // /** 开门*/ - // openDoor() { - // this.safeDoor && this.safeDoor.hasDoor(true); - // if (this.style.StationStand.safetyDoor.special) { - // this.safeDoor && this.safeDoor.setColor(this.style.StationStand.safetyDoor.splitDoorColor); - // } - // } - - // /** 关门*/ - // closeDoor() { - // this.safeDoor && this.safeDoor.hasDoor(false); - // if (this.style.StationStand.safetyDoor.special) { - // this.recover(); - // } - // } - - // /** 屏蔽门正常*/ - // doorNormal() { - // this.safeDoor && this.safeDoor.setColor(this.style.StationStand.safetyDoor.defaultColor); - // } - - // /** 屏蔽门故障*/ - // doorFault() { - // this.safeDoor && this.safeDoor.setColor(this.style.StationStand.safetyDoor.splitDoorColor); - // } - - // /** 屏蔽门切除*/ - // doorSplit() { - // this.safeDoor && this.safeDoor.setColor(this.style.StationStand.safetyDoor.splitDoorColor); - // } - - // /** 收到警报 */ - // alarm() { - // this.safeDoor && this.safeDoor.setColor(this.style.StationStand.safetyDoor.alarmColor); - // } - - // /** 紧急出发按钮激活 */ - // emergencyDepart() { - // this.safeDoor && this.safeDoor.setColor(this.style.StationStand.safetyDoor.emergencyColor); - // } - - setState(model, oldDevice = null) { + setState(model) { this.recover(); if (!this.isShowShape) return; - // 后端关联属性 - const relatedStatusList = this.style.Psd.relatedStatus; - // 后端关联属性名称list - const statusNameList = Object.keys(relatedStatusList); - statusNameList.forEach(statusName=>{ - // 该属性发生变化的时候更新视图 - // console.log(statusName, ',', model[statusName], ',', oldDevice[statusName] ); - // 第一次时更新（旧数据不存在，新数据存在），之后每次状态更新才会更新视图 - if (model[statusName] != undefined && (!oldDevice || (oldDevice && oldDevice[statusName] != model[statusName]))) { - const currentModel = {}; - currentModel[statusName] = model[statusName]; - // 该属性关联的绘图元素 - this.style.Psd.relatedStatus[statusName].forEach((element)=>{ - this[element].setState(currentModel); - }); - } + + const currentTypeList = this.style.Psd.elemnetType; + currentTypeList.forEach(element => { + this[element].setState(model); }); - // /** 设置屏蔽门开关*/ - // if (model.fault == 'FAULT_PSD_OPEN') { - // this.doorFault(); // 故障 - // this.openDoor(); - // } else { - // model.screenDoorOpenStatus == 0 && this.openDoor(); /** 开门*/ - // model.screenDoorOpenStatus != 0 && this.closeDoor(); /** 关门*/ - // } - // model.alarmStatus && this.alarm(); /** 收到警报（西安二号线样式） */ - // model.emergencyDepart && this.emergencyDepart(); /** 紧急出发按钮激活（西安二号线样式） */ } + drawSelected(selected) { this.highlight && this.highlight.drawSelected(selected); } @@ -145,7 +72,6 @@ export default class Line2 extends Group { item.show(); }); this.isShowShape = true; - // oldDevice this.setState(this.model); } else { this.eachChild(item => { diff --git a/src/jmapNew/shape/Section/EAxle.js b/src/jmapNew/shape/Section/EAxle.js index 492efc9ec..8ee50b1b5 100644 --- a/src/jmapNew/shape/Section/EAxle.js +++ b/src/jmapNew/shape/Section/EAxle.js @@ -2,68 +2,98 @@ import Group from 'zrender/src/container/Group'; import Line from 'zrender/src/graphic/shape/Line'; import Circle from 'zrender/src/graphic/shape/Circle'; import Isogon from 'zrender/src/graphic/shape/Isogon'; -// import Path from 'zrender/src/graphic/Path'; +import JTriangle from '../../utils/JTriangle'; -// 计轴 -// export default Path.extend({ -// type: 'EAxle', -// _subType: '', -// buildPath: function (path, shape) { -// if (shape && shape.style && shape.traingle) { -// const axleLength = 2 * shape.style.Section.axle.radius; -// // const positionx = shape.point.x + shape.drictx * (shape.traingle.getCos(axleLength) * 1.2); -// // const positiony = shape.point.y + shape.dricty * (shape.traingle.getCos(axleLength) * 1.2); -// const positionx = shape.point.x + shape.drictx * (shape.traingle.getCos(axleLength) * 1.05); -// const positiony = shape.point.y + shape.dricty * (shape.traingle.getCos(axleLength) * 1.05); -// // 圆弧 -// const arcX = positionx - shape.dricty * shape.traingle.getSin(axleLength); -// const arcY = positiony + shape.drictx * shape.traingle.getSin(axleLength); -// const arcR = shape.style.Section.axle.radius; -// path.arc(arcX, arcY, arcR, 0, 2 * Math.PI, false); -// path.closePath(); -// -// const x1 = positionx - shape.traingle.getCos(axleLength * shape.multiple1) - shape.dricty * shape.traingle.getSin(axleLength); -// const y1 = positiony + shape.drictx * shape.traingle.getSin(axleLength * shape.multiple1) - shape.traingle.getSin(axleLength); -// const x2 = positionx + shape.traingle.getCos(axleLength * shape.multiple2) - shape.dricty * shape.traingle.getSin(axleLength); -// const y2 = positiony + shape.drictx * shape.traingle.getSin(axleLength * shape.multiple2) + shape.traingle.getSin(axleLength); -// path.moveTo(x1, y1); -// path.lineTo(x2, y2); -// path.closePath(); -// } -// } -// }); -export default class EAxle111 extends Group { +export default class EAxle extends Group { constructor(model) { super(); this.model = model; this.zlevel = model.zlevel; - this._subType = model._subType; - this.style = model.style; this.z = model.z; - this.create(model); + this.create(); } - create(model) { - const axleLength = 2 * model.shape.style.Section.axle.radius; - let positionx = model.shape.point.x - model.shape.dricty * (model.shape.traingle.getSin(axleLength) * 1.2); - let positiony = model.shape.point.y + model.shape.dricty * (model.shape.traingle.getCos(axleLength) * 1.2); - if (model.shape.difference === 0) { - positionx += model.shape.drictx * 1; - } else if (model.shape.difference > 0) { - positionx -= model.shape.drictx * model.shape.traingle.getSin(1); - positiony -= model.shape.drictx * model.shape.traingle.getCos(1); + create() { + const model = this.model.modelData; + if (model.leftAxlePosition) { + this.createAxleLeft(); + } else if (model.rightAxlePosition) { + this.createAxleRight(); + } + } + + createAxleLeft() { + const model = this.model.modelData; + + const traingle = new JTriangle(model.points[0], model.points[1]); + const drictx = 1; + const dricty = model.leftAxlePosition === 1 || model.leftAxlePosition === 2 ? 1 : -1; + const isSpecial = model.leftAxlePosition === -2 || model.leftAxlePosition === 2; + const difference = model.points[0].y - model.points[1].y; + let point = {}; + point = {x:model.points[0].x, y: model.points[0].y}; + if (model.leftAxleOffset) { + point.x = point.x + model.leftAxleOffset.x || 0; + point.y = point.y + model.leftAxleOffset.y || 0; + } + this.createAxle({ + traingle: traingle, + drictx: drictx, + dricty: dricty, + isSpecial: isSpecial, + point: point, + difference: difference + }); + } + + createAxleRight() { + const model = this.model.modelData; + const length = model.points.length; + const traingle = new JTriangle(model.points[length - 2], model.points[length - 1]); + const drictx = -1; + const dricty = model.rightAxlePosition === 1 || model.rightAxlePosition === 2 ? 1 : -1; + const isSpecial = model.rightAxlePosition === -2 || model.rightAxlePosition === 2; + const difference = model.points[length - 2].y - model.points[length - 1].y; + + let point = {}; + point = {x:model.points[length - 1].x, y: model.points[length - 1].y}; + if (model.rightAxleOffset) { + point.x = point.x + model.rightAxleOffset.x || 0; + point.y = point.y + model.rightAxleOffset.y || 0; + } + this.createAxle({ + traingle: traingle, + drictx: drictx, + dricty: dricty, + isSpecial: isSpecial, + point: point, + difference: difference + }); + } + + createAxle(modelData) { + const style = this.model.style; + + const axleLength = 2 * style.Section.axle.radius; + let positionx = modelData.point.x - modelData.dricty * (modelData.traingle.getSin(axleLength) * 1.2); + let positiony = modelData.point.y + modelData.dricty * (modelData.traingle.getCos(axleLength) * 1.2); + if (modelData.difference === 0) { + positionx += modelData.drictx * 1; + } else if (modelData.difference > 0) { + positionx -= modelData.drictx * modelData.traingle.getSin(1); + positiony -= modelData.drictx * modelData.traingle.getCos(1); } else { - positionx += model.shape.drictx * model.shape.traingle.getSin(1); - positiony += model.shape.drictx * model.shape.traingle.getCos(1); + positionx += modelData.drictx * modelData.traingle.getSin(1); + positiony += modelData.drictx * modelData.traingle.getCos(1); } const x1 = positionx; const y1 = positiony; - const x2 = positionx + model.shape.drictx * 9 / 2 * model.shape.style.Section.axle.radius; + const x2 = positionx + modelData.drictx * 9 / 2 * style.Section.axle.radius; const y2 = positiony; - const arcX = positionx + model.shape.drictx * 2 * model.shape.style.Section.axle.radius; + const arcX = positionx + modelData.drictx * 2 * style.Section.axle.radius; const arcY = positiony; - const angle = -model.shape.traingle.getRotation(); + const angle = -modelData.traingle.getRotation(); - this.line = new Line({ + this.add(new Line({ zlevel: this.zlevel, z: this.z, origin: [positionx, positiony], @@ -75,58 +105,54 @@ export default class EAxle111 extends Group { y2:y2 }, style: { - lineWidth: this.style.lineWidth, - fill: this.style.fill, - stroke: this.style.stroke + lineWidth: style.Section.axle.lineWidth, + fill: style.Section.axle.fill, + stroke: style.Section.axle.stroke } - }); - this.add(this.line); - if (model.shape.isSpecial) { - const brokenLineX1 = positionx + model.shape.drictx * model.shape.style.Section.axle.radius; - const brokenLineY1 = positiony - model.shape.style.Section.axle.radius * 2 / 3; - const brokenLineY2 = positiony + model.shape.style.Section.axle.radius * 2 / 3; - const brokenLineX2 = positionx + model.shape.drictx * model.shape.style.Section.axle.radius * 4; - const brokenLineY3 = positiony - model.shape.style.Section.axle.radius * 2 / 3; - const brokenLineY4 = positiony + model.shape.style.Section.axle.radius * 2 / 3; - const brokenLineX3 = positionx + model.shape.drictx * model.shape.style.Section.axle.radius * 4 / 3; - const brokenLineX4 = positionx + model.shape.drictx * model.shape.style.Section.axle.radius * 11 / 3; - const brokenLineY5 = positiony - model.shape.style.Section.axle.radius; - const brokenLineY6 = positiony + model.shape.style.Section.axle.radius; - this.isogonOutside = new Isogon({ - zlevel: this.model.zlevel, - z: this.model.z, + })); + // this.add(this.line); + if (modelData.isSpecial) { + const brokenLineX1 = positionx + modelData.drictx * style.Section.axle.radius; + const brokenLineY1 = positiony - style.Section.axle.radius * 2 / 3; + const brokenLineY2 = positiony + style.Section.axle.radius * 2 / 3; + const brokenLineX2 = positionx + modelData.drictx * style.Section.axle.radius * 4; + const brokenLineY3 = positiony - style.Section.axle.radius * 2 / 3; + const brokenLineY4 = positiony + style.Section.axle.radius * 2 / 3; + const brokenLineX3 = positionx + modelData.drictx * style.Section.axle.radius * 4 / 3; + const brokenLineX4 = positionx + modelData.drictx * style.Section.axle.radius * 11 / 3; + const brokenLineY5 = positiony - style.Section.axle.radius; + const brokenLineY6 = positiony + style.Section.axle.radius; + this.add(new Isogon({ + zlevel: this.zlevel, + z: this.z, origin: [positionx, positiony], rotation:angle, - // origin: [arcX, arcY], - // rotation:Math.PI / 8, shape: { x: arcX, y: arcY, - r: model.shape.style.Section.axle.radius, + r: style.Section.axle.radius, n: 8 }, style: { - fill: this.style.fill + fill: style.Section.axle.fill } - }); - this.isogonInside = new Isogon({ - zlevel: this.model.zlevel, - z: this.model.z + 1, + })); + this.add(new Isogon({ + zlevel: this.zlevel, + z: this.z + 1, origin: [positionx, positiony], rotation:angle, - // origin: [arcX, arcY], - // rotation:Math.PI / 4, shape: { x: arcX, y: arcY, - r: model.shape.style.Section.axle.radius / 2, + r: style.Section.axle.radius / 2, n: 4 }, style: { fill: '#000' } - }); - this.line1 = new Line({ + })); + this.add(new Line({ zlevel: this.zlevel, z: this.z, origin: [positionx, positiony], @@ -139,11 +165,11 @@ export default class EAxle111 extends Group { }, style: { lineWidth: 1, - fill: this.style.fill, - stroke: this.style.stroke + fill: style.Section.axle.fill, + stroke: style.Section.axle.stroke } - }); - this.line2 = new Line({ + })); + this.add(new Line({ zlevel: this.zlevel, z: this.z, origin: [positionx, positiony], @@ -156,11 +182,11 @@ export default class EAxle111 extends Group { }, style: { lineWidth: 1, - fill: this.style.fill, - stroke: this.style.stroke + fill: style.Section.axle.fill, + stroke: style.Section.axle.stroke } - }); - this.line3 = new Line({ + })); + this.add(new Line({ zlevel: this.zlevel, z: this.z, origin: [positionx, positiony], @@ -173,11 +199,11 @@ export default class EAxle111 extends Group { }, style: { lineWidth: 1, - fill: this.style.fill, - stroke: this.style.stroke + fill: style.Section.axle.fill, + stroke: style.Section.axle.stroke } - }); - this.line4 = new Line({ + })); + this.add(new Line({ zlevel: this.zlevel, z: this.z, origin: [positionx, positiony], @@ -190,11 +216,11 @@ export default class EAxle111 extends Group { }, style: { lineWidth: 1, - fill: this.style.fill, - stroke: this.style.stroke + fill: style.Section.axle.fill, + stroke: style.Section.axle.stroke } - }); - this.line5 = new Line({ + })); + this.add(new Line({ zlevel: this.zlevel, z: this.z, origin: [positionx, positiony], @@ -207,11 +233,11 @@ export default class EAxle111 extends Group { }, style: { lineWidth: 1, - fill: this.style.fill, - stroke: this.style.stroke + fill: style.Section.axle.fill, + stroke: style.Section.axle.stroke } - }); - this.line6 = new Line({ + })); + this.add(new Line({ zlevel: this.zlevel, z: this.z, origin: [positionx, positiony], @@ -224,49 +250,68 @@ export default class EAxle111 extends Group { }, style: { lineWidth: 1, - fill: this.style.fill, - stroke: this.style.stroke + fill: style.Section.axle.fill, + stroke: style.Section.axle.stroke } - }); - this.add(this.isogonInside); - this.add(this.isogonOutside); - this.add(this.line1); - this.add(this.line2); - this.add(this.line3); - this.add(this.line4); - this.add(this.line5); - this.add(this.line6); + })); + // this.add(this.isogonInside); + // this.add(this.isogonOutside); + // this.add(this.line1); + // this.add(this.line2); + // this.add(this.line3); + // this.add(this.line4); + // this.add(this.line5); + // this.add(this.line6); } else { - this.circle = new Circle({ - zlevel: this.model.zlevel, - z: this.model.z, + this.add(new Circle({ + zlevel: this.zlevel, + z: this.z, origin: [positionx, positiony], rotation:angle, shape: { cx: arcX, cy: arcY, - r: model.shape.style.Section.axle.radius + r: style.Section.axle.radius }, style: { - fill: this.style.fill + fill: style.Section.axle.fill } - }); - this.add(this.circle); + })); + // this.add(this.circle); } } setStyle(styles) { - if (this.model.shape.isSpecial) { - this.isogonOutside.setStyle(styles); - this.line1.setStyle(styles); - this.line2.setStyle(styles); - this.line3.setStyle(styles); - this.line4.setStyle(styles); - this.line5.setStyle(styles); - this.line6.setStyle(styles); - } else { - this.circle.setStyle(styles); - } - this.line.setStyle(styles); + // if (this.isSpecial) { + // this.eachChild((child) => { + // if (child.setStyle) { + // child.setStyle(styles); + // } + // }); + // this.isogonOutside && this.isogonOutside.setStyle(styles); + // this.isogonInside && this.isogonInside.setStyle(styles); + // this.line1 && this.line1.setStyle(styles); + // this.line2 && this.line2.setStyle(styles); + // this.line3 && this.line3.setStyle(styles); + // this.line4 && this.line4.setStyle(styles); + // this.line5 && this.line5.setStyle(styles); + // this.line6 && this.line6.setStyle(styles); + // } else { + // this.circle && this.circle.setStyle(styles); + // } + // this.line && this.line.setStyle(styles); + this.eachChild((child) => { + if (child && child.setStyle) { + child.setStyle(styles); + } + }); + } + + recover() { + + } + + setState() { + } } diff --git a/src/jmapNew/shape/Section/EBackArrow.js b/src/jmapNew/shape/Section/EBackArrow.js index abac1f491..43f94edb5 100644 --- a/src/jmapNew/shape/Section/EBackArrow.js +++ b/src/jmapNew/shape/Section/EBackArrow.js @@ -1,7 +1,91 @@ +import Group from 'zrender/src/container/Group'; import Path from 'zrender/src/graphic/Path'; +export default class EBackArrowGroup extends Group { + constructor(model) { + super(); + this.model = model; + this.zlevel = model.zlevel; + this.z = model.z; + this.create(); + } + create() { + const model = this.model.modelData; + const style = this.model.style; + if (model.reentryTrack && style.Section.shuttleBack) { + const radius = 3; + model.drict = 1; // 箭头朝向 (是折返轨加一个方向选择) 目前在区段右边 + const width = style.Section.line.width * 2; + const height = style.Section.line.width * 1; + const turnBackDistance = style.Section.shuttleBack.distance + radius * 4; + + const points = model.points; + let x = -model.drict * width * 1.2; + let y = -turnBackDistance; + + if (model.drict < 0) { + x += points[0].x; + y += points[0].y; + } else { + x += points[points.length - 1].x; + y += points[points.length - 1].y; + } + + this.turnBack = new EBackArrow({ + zlevel: this.zlevel, + z: this.z, + shape: { + drict: model.drict, + width: width, + height: height, + points: { + x: x, + y: y + } + }, + style: { + lineWidth: style.Section.shuttleBack.width, + stroke: style.Section.shuttleBack.color, + fill: 'rgba(0, 0, 0, 0)' + } + }); + this.turnBackriangle = new EBackArrowTriangle({ + zlevel: this.zlevel, + z: this.z, + shape: { + drict: model.drict, + width: width, + height: height, + points: { + x: x, + y: y + } + }, + style: { + lineWidth: style.Section.shuttleBack.width, + stroke: style.Section.shuttleBack.color, + fill: style.Section.shuttleBack.color + } + }); + this.add(this.turnBack); + this.add(this.turnBackriangle); + this.turnBack.hide(); + this.turnBackriangle.hide(); + } + } + + hide() { + this.turnBack.hide(); + this.turnBackriangle.hide(); + } + + show() { + this.turnBack.show(); + this.turnBackriangle.show(); + } +} // 成都三号线 折返进路 -export const EBackArrow = Path.extend({ +const EBackArrow = Path.extend({ type: 'EBackArrow', shape: { points: null @@ -24,7 +108,7 @@ export const EBackArrow = Path.extend({ }); // 箭头 -export const EBackArrowTriangle = Path.extend({ +const EBackArrowTriangle = Path.extend({ type: 'EBackArrowTriangle', shape: { points: null diff --git a/src/jmapNew/shape/Section/ELimitLines.js b/src/jmapNew/shape/Section/ELimitLines.js index 9db8ba1b3..3143d6ba2 100644 --- a/src/jmapNew/shape/Section/ELimitLines.js +++ b/src/jmapNew/shape/Section/ELimitLines.js @@ -3,78 +3,6 @@ import BezierCurve from 'zrender/src/graphic/shape/BezierCurve'; import Line from 'zrender/src/graphic/shape/Line'; import JTriangle from '../../utils/JTriangle'; import Vue from 'vue'; -// import Path from 'zrender/src/graphic/Path'; - -// 创建区段限速限集合 -// export default const ELimitLines = Path.extend({ -// type: 'ELimitLines', -// shape: { -// points: null -// }, -// buildPath: function (ctx, model) { -// /** 创建区段*/ -// if (model && model.points.length > 1) { -// if (model.isCurve) { -// ctx.beginPath(); -// const shape = {}; -// for (let i = 1; i < (model.points.length - 1); i++) { -// shape[`cpx${i}`] = model.points[i].x; -// shape[`cpy${i}`] = model.points[i].y; -// } -// shape[`x1`] = model.points[0].x; -// shape[`y1`] = model.points[0].y; -// shape[`x2`] = model.points[model.points.length - 1].x; -// shape[`y2`] = model.points[model.points.length - 1].y; - -// ctx.moveTo(shape[`x1`], shape[`y1`]); -// if (model.points.length <= 3) { -// ctx.quadraticCurveTo(shape[`cpx1`], shape[`cpy1`], shape[`x2`], shape[`y2`]); -// } else { -// ctx.bezierCurveTo(shape[`cpx1`], shape[`cpy1`], shape[`cpx2`], shape[`cpy2`], shape[`x2`], shape[`y2`]); -// } -// } else { -// const swPadding = model.style.Switch.core.length; // 定位和反位时区段距离岔芯的距离 -// var switchWidth = model.style.Section.line.width + model.style.Section.line.beyondWidth; // 道岔宽度 -// const beg = Object.assign({}, model.points[0]); -// const end = Object.assign({}, model.points[model.points.length - 1]); -// if (model.isSwitchSection && beg.y !== end.y) { -// const swch = model.switch; -// if (swch) { -// const traingle = new JTriangle(swch.intersection, swch.skew); -// if ((swch.intersection.x === beg.x) && (swch.intersection.y === beg.y)) { -// beg.x = beg.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate(); -// beg.y = beg.y + traingle.dricty * (swPadding + switchWidth); -// } - -// if ((swch.intersection.x === end.x) && (swch.intersection.y === end.y)) { -// end.x = end.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate(); -// end.y = end.y + traingle.dricty * (swPadding + switchWidth); -// } -// } -// } - -// if (model.points.length == 2) { -// ctx.moveTo(beg.x, beg.y); -// ctx.lineTo(end.x, end.y); -// ctx.closePath(); -// } else { -// ctx.moveTo(beg.x, beg.y); -// ctx.lineTo(model.points[1].x, model.points[1].y); -// ctx.closePath(); - -// for (let i = 1; i < (model.points.length - 2); i++) { -// ctx.moveTo(model.points[i].x, model.points[i].y); -// ctx.lineTo(model.points[i + 1].x, model.points[i + 1].y); -// ctx.closePath(); -// } -// ctx.moveTo(model.points[model.points.length - 2].x, model.points[model.points.length - 2].y); -// ctx.lineTo(end.x, end.y); -// ctx.closePath(); -// } -// } -// } -// } -// }); export default class ELimitLines extends Group { constructor(model) { @@ -82,136 +10,187 @@ export default class ELimitLines extends Group { this.model = model; this.zlevel = model.zlevel; this.z = model.z; - this.create(model); + this.create(); } - create(model) { + create() { + const model = this.model.modelData; + const style = this.model.style; /** 创建区段*/ if (model && model.points.length > 1) { - if (model.isCurve) { - const shape = {}; - for (let i = 1; i < (model.points.length - 1); i++) { - shape[`cpx${i}`] = model.points[i].x; - shape[`cpy${i}`] = model.points[i].y; + const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]); + let x = traingle.drictx * (style.Section.speedLimit.distance) * traingle.getSinRate(); + let y = traingle.dricty * (style.Section.speedLimit.distance) * traingle.getCosRate(); + if (x == Infinity) { x = 0; } + if (y == Infinity) { y = 0; } + if (model.switch) { + // 上侧临时限速线 + const speedLimitLeft = this.createLimit({ + position: [x, -y], + switch: model.switch, + code: model.code, + isSwitchSection: model.switchSection, + relSwitchCode: model.relSwitchCode, + isCurve: model.curve, // 是否曲线 + points: model.points + }); + // 下侧临时限速线 + const speedLimitRight = this.createLimit({ + position: [-x, y], + switch: model.switch, + code: model.code, + isSwitchSection: model.switchSection, + relSwitchCode: model.relSwitchCode, + isCurve: model.curve, // 是否曲线 + points: model.points + }); + speedLimitLeft.forEach(item => { + this.add(item); + }); + speedLimitRight.forEach(item => { + this.add(item); + }); + } + } + } + + createLimit(model) { + const style = this.model.style; + const dataList = []; + if (model.isCurve) { + const shape = {}; + for (let i = 1; i < (model.points.length - 1); i++) { + shape[`cpx${i}`] = model.points[i].x; + shape[`cpy${i}`] = model.points[i].y; + } + + shape[`x1`] = model.points[0].x; + shape[`y1`] = model.points[0].y; + shape[`x2`] = model.points[model.points.length - 1].x; + shape[`y2`] = model.points[model.points.length - 1].y; + + dataList.push(new BezierCurve({ + isLine: true, + zlevel: this.zlevel, + progressive: model.progressive, + z: this.z, + culling: true, + shape: shape, + position: model.position, + style: { + lineWidth: style.Section.speedLimit.width, + stroke: style.Section.speedLimit.lineColor, + fillOpacity: 0 } + })); + } else { + const swPadding = style.Switch.core.length; // 定位和反位时区段距离岔芯的距离 + var switchWidth = style.Section.line.width + style.Section.line.beyondWidth; // 道岔宽度 + const beg = Object.assign({}, model.points[0]); + const end = Object.assign({}, model.points[model.points.length - 1]); + if (model.isSwitchSection && beg.y !== end.y) { + const swch = Vue.prototype.$jlmap.mapDevice[model.switch.code]; // 获取道岔model 及状态数据 - shape[`x1`] = model.points[0].x; - shape[`y1`] = model.points[0].y; - shape[`x2`] = model.points[model.points.length - 1].x; - shape[`y2`] = model.points[model.points.length - 1].y; + if (swch && swch.instance) { + const traingle = new JTriangle(swch.intersection, swch.skew); + if ((swch.intersection.x === beg.x) && (swch.intersection.y === beg.y) && !swch.normalPosition && swch.sectionCCode == model.code) { + beg.x = beg.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate(); + beg.y = beg.y + traingle.dricty * (swPadding + switchWidth); + } - this.add(new BezierCurve({ + if ((swch.intersection.x === end.x) && (swch.intersection.y === end.y) && swch.normalPosition && swch.sectionCCode == model.code) { + end.x = end.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate(); + end.y = end.y + traingle.dricty * (swPadding + switchWidth); + } + } + } + if (model.points.length == 2) { + dataList.push(new Line({ isLine: true, zlevel: this.zlevel, progressive: model.progressive, z: this.z, - culling: true, - shape: shape, position: model.position, + shape: { + x1: beg.x, + y1: beg.y, + x2: end.x, + y2: end.y + }, style: { - lineWidth: model.style.Section.speedLimit.width, - stroke: model.style.Section.speedLimit.lineColor, - fillOpacity: 0 + lineWidth: style.Section.speedLimit.width, + stroke: style.Section.speedLimit.lineColor } })); } else { - const swPadding = model.style.Switch.core.length; // 定位和反位时区段距离岔芯的距离 - var switchWidth = model.style.Section.line.width + model.style.Section.line.beyondWidth; // 道岔宽度 - const beg = Object.assign({}, model.points[0]); - const end = Object.assign({}, model.points[model.points.length - 1]); - if (model.isSwitchSection && beg.y !== end.y) { - const swch = Vue.prototype.$jlmap.mapDevice[model.switch.code]; // 获取道岔model 及状态数据 - - if (swch && swch.instance) { - const traingle = new JTriangle(swch.intersection, swch.skew); - if ((swch.intersection.x === beg.x) && (swch.intersection.y === beg.y) && !swch.normalPosition && swch.sectionCCode == model.code) { - beg.x = beg.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate(); - beg.y = beg.y + traingle.dricty * (swPadding + switchWidth); - } - - if ((swch.intersection.x === end.x) && (swch.intersection.y === end.y) && swch.normalPosition && swch.sectionCCode == model.code) { - end.x = end.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate(); - end.y = end.y + traingle.dricty * (swPadding + switchWidth); - } + dataList.push(new Line({ + isLine: true, + zlevel: this.zlevel, + progressive: model.progressive, + z: this.z, + position: model.position, + shape: { + x1: beg.x, + y1: beg.y, + x2: model.points[1].x, + y2: model.points[1].y + }, + style: { + lineWidth: style.Section.speedLimit.width, + stroke: style.Section.speedLimit.lineColor } - } + })); - if (model.points.length == 2) { - this.add(new Line({ - isLine: true, - zlevel: this.zlevel, - progressive: model.progressive, - z: this.z, - position: model.position, - shape: { - x1: beg.x, - y1: beg.y, - x2: end.x, - y2: end.y - }, - style: { - lineWidth: model.style.Section.speedLimit.width, - stroke: model.style.Section.speedLimit.lineColor - } - })); - } else { - this.add(new Line({ - isLine: true, - zlevel: this.zlevel, - progressive: model.progressive, - z: this.z, - position: model.position, - shape: { - x1: beg.x, - y1: beg.y, - x2: model.points[1].x, - y2: model.points[1].y - }, - style: { - lineWidth: model.style.Section.speedLimit.width, - stroke: model.style.Section.speedLimit.lineColor - } - })); - - for (let i = 1; i < (model.points.length - 2); i++) { - this.add(new Line({ - isLine: true, - zlevel: this.zlevel, - z: this.z, - progressive: model.progressive, - position: model.position, - shape: { - x1: model.points[i].x, - y1: model.points[i].y, - x2: model.points[i + 1].x, - y2: model.points[i + 1].y - }, - style: { - lineWidth: model.style.Section.speedLimit.width, - stroke: model.style.Section.speedLimit.lineColor - } - })); - } - - this.add(new Line({ + for (let i = 1; i < (model.points.length - 2); i++) { + dataList.push(new Line({ isLine: true, zlevel: this.zlevel, z: this.z, - position: model.position, progressive: model.progressive, + position: model.position, shape: { - x1: model.points[model.points.length - 2].x, - y1: model.points[model.points.length - 2].y, - x2: end.x, - y2: end.y + x1: model.points[i].x, + y1: model.points[i].y, + x2: model.points[i + 1].x, + y2: model.points[i + 1].y }, style: { - lineWidth: model.style.Section.speedLimit.width, - stroke: model.style.Section.speedLimit.lineColor + lineWidth: style.Section.speedLimit.width, + stroke: style.Section.speedLimit.lineColor } })); } + + dataList.push(new Line({ + isLine: true, + zlevel: this.zlevel, + z: this.z, + position: model.position, + progressive: model.progressive, + shape: { + x1: model.points[model.points.length - 2].x, + y1: model.points[model.points.length - 2].y, + x2: end.x, + y2: end.y + }, + style: { + lineWidth: style.Section.speedLimit.width, + stroke: style.Section.speedLimit.lineColor + } + })); } } + return dataList; + } + + hide() { + this.eachChild((child) => { + child.hide(); + }); + } + show() { + this.eachChild((child) => { + child.show(); + }); } } diff --git a/src/jmapNew/shape/Section/ELimitName.js b/src/jmapNew/shape/Section/ELimitName.js index dbdcf0494..b81f6a7b6 100644 --- a/src/jmapNew/shape/Section/ELimitName.js +++ b/src/jmapNew/shape/Section/ELimitName.js @@ -1,91 +1,110 @@ -// import Path from 'zrender/src/graphic/Path'; - -// 成都三号线 临时限速名称显示 -// export const ELimitName = Path.extend({ -// type: 'ELimitName', -// shape: { -// points: null -// }, -// buildPath: function (ctx, shape) { -// const points = shape.points; -// const y = points.y - 15; -// ctx.moveTo(points.x, y); -// ctx.lineTo(points.x - shape.drict * shape.style.Section.speedLimit.drogueWidth, y); -// ctx.lineTo(points.x - shape.drict * (shape.style.Section.speedLimit.drogueWidth + 5), y - 5); -// ctx.lineTo(points.x - shape.drict * shape.style.Section.speedLimit.drogueWidth, y - 10); -// ctx.lineTo(points.x, y - 10); -// ctx.lineTo(points.x, y); -// } -// }); - import Group from 'zrender/src/container/Group'; import Text from 'zrender/src/graphic/Text'; import Polygon from 'zrender/src/graphic/shape/Polygon'; export default class ELimitName extends Group { - constructor(model) { - super(); - this.model = model; - this.zlevel = model.zlevel; - this.z = model.z; - this.create(model); - } + constructor(model) { + super(); + this.model = model; + this.zlevel = model.zlevel; + this.z = model.z; + this.create(); + } - create(model) { - const rectW = model.style.Section.speedLimit.drogueWidth; - const rectH = model.style.Section.speedLimit.drogueHeight; - this.add(new Polygon({ - zlevel: this.zlevel, - z: this.z + 9, - shape: { - points: [ - [model.x, model.y], - [model.x - model.drict * rectW, model.y], - [model.x - model.drict * (rectW + rectH / 2), model.y - rectH / 2], - [model.x - model.drict * rectW, model.y - rectH], - [model.x, model.y - rectH] - ] - }, - style: { - lineWidth: 0, - fill: model.style.Section.speedLimit.nameBackground - } - })); + create() { + /** 创建区段*/ + const model = this.model.modelData; + // 开头 起点位置 + const speedLimitNameLeft = this.createName({ + drict: -1, + x: model.points[0].x, + y: model.points[0].y - 15 + }); + // 终点位置 + const speedLimitNameRight = this.createName({ + drict: 1, + x: model.points[model.points.length - 1].x, + y: model.points[model.points.length - 1].y - 15 + }); + speedLimitNameLeft.forEach(item => { + this.add(item); + }); + speedLimitNameRight.forEach(item => { + this.add(item); + }); + } - // 公里标内容 - this.add(new Text({ - zlevel: this.zlevel, - z: this.z + 10, - style: { - x: model.x - model.drict * 2, - y: model.y, - fontWeight: 'normal', - fontSize: model.style.Section.speedLimit.nameNumberFontSize, - fontFamily: model.style.fontFamily, - text: '15', - textFill: model.style.Section.speedLimit.nameNumberColor, - textAlign: model.drict == -1 ? 'left' : 'right', - textPosition: model.style.Section.text.textPosition || 'inside', - textVerticalAlign: 'bottom' - } - })); + createName(model) { + const dataList = []; + const style = this.model.style; - // 公里值 - this.add(new Text({ - zlevel: this.zlevel, - z: this.z + 10, - style: { - x: model.x, - y: model.y + 12, - fontWeight: 'normal', - fontSize: model.style.Section.speedLimit.kilometerFontSize, - fontFamily: model.style.fontFamily, - text: '17.981km', - textFill: model.style.Section.speedLimit.kilometerColor, - textAlign: model.drict == -1 ? 'left' : 'right', - textPosition: model.style.Section.text.textPosition || 'inside', - textVerticalAlign: 'bottom' - } - })); - } + const rectW = style.Section.speedLimitName.drogueWidth; + const rectH = style.Section.speedLimitName.drogueHeight; + + dataList.push(new Polygon({ + zlevel: this.zlevel, + z: this.z + 9, + shape: { + points: [ + [model.x, model.y], + [model.x - model.drict * rectW, model.y], + [model.x - model.drict * (rectW + rectH / 2), model.y - rectH / 2], + [model.x - model.drict * rectW, model.y - rectH], + [model.x, model.y - rectH] + ] + }, + style: { + lineWidth: 0, + fill: style.Section.speedLimitName.nameBackground + } + })); + + // 公里标内容 + dataList.push(new Text({ + zlevel: this.zlevel, + z: this.z + 10, + style: { + x: model.x - model.drict * 2, + y: model.y, + fontWeight: 'normal', + fontSize: style.Section.speedLimitName.nameNumberFontSize, + fontFamily: style.fontFamily, + text: '15', + textFill: style.Section.speedLimitName.nameNumberColor, + textAlign: model.drict == -1 ? 'left' : 'right', + textPosition: style.Section.name.textPosition || 'inside', + textVerticalAlign: 'bottom' + } + })); + + // 公里值 + dataList.push(new Text({ + zlevel: this.zlevel, + z: this.z + 10, + style: { + x: model.x, + y: model.y + 12, + fontWeight: 'normal', + fontSize: style.Section.speedLimitName.kilometerFontSize, + fontFamily: style.fontFamily, + text: '17.981km', + textFill: style.Section.speedLimitName.kilometerColor, + textAlign: model.drict == -1 ? 'left' : 'right', + textPosition: style.Section.name.textPosition || 'inside', + textVerticalAlign: 'bottom' + } + })); + return dataList; + } + + hide() { + this.eachChild((child) => { + child.hide(); + }); + } + show() { + this.eachChild((child) => { + child.show(); + }); + } } diff --git a/src/jmapNew/shape/Section/ELines.js b/src/jmapNew/shape/Section/ELines.js index 9f64d2fb4..9f9a76431 100644 --- a/src/jmapNew/shape/Section/ELines.js +++ b/src/jmapNew/shape/Section/ELines.js @@ -12,29 +12,44 @@ export default class ELines extends Group { this.zlevel = model.zlevel; this.z = model.z; this.sections = []; - this.create(model); + this.create(); } - create(model) { + create() { + const model = this.model.modelData; + // 创建区段 model.logicSectionCodeList 为空 或 0 表明没有逻辑区段 创建 否则过滤 + if ((model.type == '01' && (!model.logicSectionCodeList || !model.logicSectionCodeList.length)) || model.type == '02' || model.type == '03') { + this.createLine(); + } + } + + createLine() { + const model = this.model.modelData; + const style = this.model.style; + + const Z = model.type == '02' ? this.z + 1 : this.z; + + const modelPoints = model.type == '04' ? [model.namePosition, model.namePosition] : model.points; + const isCurve = model.curve; /** 创建区段*/ - if (model && model.points.length > 1) { + if (model && modelPoints.length > 1) { let stroke; - stroke = model.style.Section.line.spareColor; - if (model.style.Section.line.isActiveShow) { - stroke = '#2EBFBF'; + stroke = style.Section.line.spareColor; + if (this.model.type == 'lineBorder') { + stroke = style.Section.lineBorder.activeStroke; } - if (model.isCurve) { + if (isCurve) { const shape = {}; - for (let i = 1; i < (model.points.length - 1); i++) { - shape[`cpx${i}`] = model.points[i].x; - shape[`cpy${i}`] = model.points[i].y; + for (let i = 1; i < (modelPoints.length - 1); i++) { + shape[`cpx${i}`] = modelPoints[i].x; + shape[`cpy${i}`] = modelPoints[i].y; } - shape[`x1`] = model.points[0].x; - shape[`y1`] = model.points[0].y; - shape[`x2`] = model.points[model.points.length - 1].x; - shape[`y2`] = model.points[model.points.length - 1].y; + shape[`x1`] = modelPoints[0].x; + shape[`y1`] = modelPoints[0].y; + shape[`x2`] = modelPoints[modelPoints.length - 1].x; + shape[`y2`] = modelPoints[modelPoints.length - 1].y; this.section = new BezierCurve({ isLine: true, zlevel: this.zlevel, @@ -44,157 +59,157 @@ export default class ELines extends Group { culling: false, shape: shape, style: { - lineWidth: model.style.Section.line.width, + lineWidth: style.Section.line.width, stroke: stroke } }); this.add(this.section); } else { const points = []; - for (let i = 0; i < model.points.length; i++) { - points.push([model.points[i].x, model.points[i].y]); + for (let i = 0; i < modelPoints.length; i++) { + points.push([modelPoints[i].x, modelPoints[i].y]); } this.section = new Polyline({ isLine: true, zlevel: this.zlevel, progressive: model.progressive, - z: this.z, + z: Z, shape: { points: points }, style: { - lineWidth: model.style.Section.line.width, + lineWidth: style.Section.line.width, stroke: stroke } }); this.add(this.section); } - if (model.style.Section.topWithLine && !model.isCurve) { + if (style.Section.topWithLine && !isCurve) { const topPoints = []; - for (let i = 0; i < model.points.length; i++) { - topPoints.push([model.points[i].x, model.points[i].y - model.style.Section.line.width / 2 - model.style.Section.topWithLine.width / 2]); + for (let i = 0; i < modelPoints.length; i++) { + topPoints.push([modelPoints[i].x, modelPoints[i].y - style.Section.line.width / 2 - style.Section.topWithLine.width / 2]); } this.topWithSection = new Polyline({ isLine: true, zlevel: this.zlevel, progressive: model.progressive, - z: this.z, + z: Z, shape: { points: topPoints }, style: { - lineWidth: model.style.Section.topWithLine.width, - stroke: model.style.Section.topWithLine.defaultColor + lineWidth: style.Section.topWithLine.width, + stroke: style.Section.topWithLine.defaultColor } }); this.add(this.topWithSection); this.topWithSection.hide(); } - if (model.style.Section.bottomWithLine && !model.isCurve) { + if (style.Section.bottomWithLine && !isCurve) { const bottomPoints = []; - for (let i = 0; i < model.points.length; i++) { - bottomPoints.push([model.points[i].x, model.points[i].y + model.style.Section.line.width / 2 + model.style.Section.bottomWithLine.width / 2]); + for (let i = 0; i < modelPoints.length; i++) { + bottomPoints.push([modelPoints[i].x, modelPoints[i].y + style.Section.line.width / 2 + style.Section.bottomWithLine.width / 2]); } this.bottomWithSection = new Polyline({ isLine: true, zlevel: this.zlevel, progressive: model.progressive, - z: this.z, + z: Z, shape: { points: bottomPoints }, style: { - lineWidth: model.style.Section.bottomWithLine.width, - stroke: model.style.Section.bottomWithLine.defaultColor + lineWidth: style.Section.bottomWithLine.width, + stroke: style.Section.bottomWithLine.defaultColor } }); this.add(this.bottomWithSection); this.bottomWithSection.hide(); } - if (model.style.Section.routeArrow && !model.isCurve) { + if (style.Section.routeArrow && !isCurve) { const cPointLeft = {x: 0, y:0}; const cPointRight = {x: 0, y:0}; const pointsLeft = []; const pointsRight = []; - const length = this.model.points.length; - const triangleLeft = new JTriangle(this.model.points[0], this.model.points[1]); - cPointLeft.x = this.model.points[0].x + triangleLeft.getCos(model.style.Section.routeArrow.radius); - cPointLeft.y = this.model.points[0].y + triangleLeft.getSin(model.style.Section.routeArrow.radius); + const length = modelPoints.length; + const triangleLeft = new JTriangle(modelPoints[0], modelPoints[1]); + cPointLeft.x = modelPoints[0].x + triangleLeft.getCos(style.Section.routeArrow.radius); + cPointLeft.y = modelPoints[0].y + triangleLeft.getSin(style.Section.routeArrow.radius); for (let i = 0; i < length; i++) { if (i === 0) { pointsLeft.push([cPointLeft.x, cPointLeft.y]); } else { - pointsLeft.push([model.points[i].x, model.points[i].y]); + pointsLeft.push([modelPoints[i].x, modelPoints[i].y]); } } - const triangleRight = new JTriangle(this.model.points[length - 2], this.model.points[length - 1 ]); - cPointRight.x = this.model.points[length - 1].x - triangleRight.getCos(model.style.Section.routeArrow.radius); - cPointRight.y = this.model.points[length - 1].y - triangleRight.getSin(model.style.Section.routeArrow.radius); + const triangleRight = new JTriangle(modelPoints[length - 2], modelPoints[length - 1 ]); + cPointRight.x = modelPoints[length - 1].x - triangleRight.getCos(style.Section.routeArrow.radius); + cPointRight.y = modelPoints[length - 1].y - triangleRight.getSin(style.Section.routeArrow.radius); for (let i = 0; i < length; i++) { if (i === length - 1) { pointsRight.push([cPointRight.x, cPointRight.y]); } else { - pointsRight.push([model.points[i].x, model.points[i].y]); + pointsRight.push([modelPoints[i].x, modelPoints[i].y]); } } this.routeArrowLeft = new Isogon({ zlevel: this.zlevel, origin: [cPointLeft.x, cPointLeft.y], rotation: Math.PI / 2 - triangleLeft.getRotation(), - z: this.z + 9, + z: Z + 9, shape: { x: cPointLeft.x, y: cPointLeft.y, - r: model.style.Section.routeArrow.radius, + r: style.Section.routeArrow.radius, n: 3 }, style: { - lineWidth: model.style.Section.routeArrow.arrowLineWidth, - stroke: model.style.Section.routeArrow.defaultArrowStroke, - fill: model.style.Section.routeArrow.defaultArrowFill + lineWidth: style.Section.routeArrow.arrowLineWidth, + stroke: style.Section.routeArrow.defaultArrowStroke, + fill: style.Section.routeArrow.defaultArrowFill } }); this.routeArrowRight = new Isogon({ zlevel: this.zlevel, origin: [cPointLeft.x, cPointLeft.y], rotation: -Math.PI / 2 - triangleRight.getRotation(), - z: this.z + 9, + z: Z + 9, shape: { x: cPointRight.x, y: cPointRight.y, - r: model.style.Section.routeArrow.radius, + r: style.Section.routeArrow.radius, n: 3 }, style: { - lineWidth: model.style.Section.routeArrow.arrowLineWidth, - stroke: model.style.Section.routeArrow.defaultArrowStroke, - fill: model.style.Section.routeArrow.defaultArrowFill + lineWidth: style.Section.routeArrow.arrowLineWidth, + stroke: style.Section.routeArrow.defaultArrowStroke, + fill: style.Section.routeArrow.defaultArrowFill } }); this.routeLineLeft = new Polyline({ zlevel: this.zlevel, progressive: model.progressive, - z: this.z, + z: Z, shape: { points: pointsLeft }, style: { - lineWidth: model.style.Section.routeArrow.lineWidth, - stroke: model.style.Section.routeArrow.defaultLineStroke + lineWidth: style.Section.routeArrow.lineWidth, + stroke: style.Section.routeArrow.defaultLineStroke } }); this.routeLineRight = new Polyline({ zlevel: this.zlevel, progressive: model.progressive, - z: this.z, + z: Z, shape: { points: pointsRight }, style: { - lineWidth: model.style.Section.routeArrow.lineWidth, - stroke: model.style.Section.routeArrow.defaultLineStroke + lineWidth: style.Section.routeArrow.lineWidth, + stroke: style.Section.routeArrow.defaultLineStroke } }); this.add(this.routeArrowLeft); @@ -210,21 +225,11 @@ export default class ELines extends Group { } setStyle(styles) { - // this.eachChild((child) => { - // if (child.setStyle && child.isLine) { - // child.setStyle(styles); - // } - // }); - this.section.setStyle(styles); + this.section && this.section.setStyle(styles); } setZleve(lev) { - // this.eachChild((child) => { - // if (child.setStyle && child.isLine) { - // child.attr('z', lev); - // } - // }); - this.section.attr('z', lev); + this.section && this.section.attr('z', lev); } hide() { @@ -233,24 +238,11 @@ export default class ELines extends Group { }); } show() { - // this.eachChild((child) => { - // // console.log(child); - // child.show(); - // }); this.section && this.section.show(); } animateStyle(loop, animates) { if (animates && animates.length) { - // this.eachChild((child) => { - // if (child.animateStyle && child.isLine) { - // let an = child.animateStyle(loop); - // animates.forEach(elem => { - // an = an.when(elem.time, elem.styles); - // }); - // an.start(); - // } - // }); if (this.section.animateStyle && this.section.isLine) { let an = this.section.animateStyle(loop); animates.forEach(elem => { @@ -356,6 +348,16 @@ export default class ELines extends Group { this.routeArrowRight && this.routeArrowRight.setStyle({ fill: this.model.style.Section.routeArrow.defaultLineStroke }); } getBoundingRect() { - return this.section.getBoundingRect().clone(); + if (this.section) { + return this.section.getBoundingRect().clone(); + } + } + + recover() { + + } + + setState() { + } } diff --git a/src/jmapNew/shape/Section/EMouse.js b/src/jmapNew/shape/Section/EMouse.js index 0ada938ea..b3e68ecab 100644 --- a/src/jmapNew/shape/Section/EMouse.js +++ b/src/jmapNew/shape/Section/EMouse.js @@ -15,62 +15,66 @@ class EMouse extends Group { // 名称的包围框 if (this.device.name && this.device.style.Section.mouseOverStyle.nameShow) { const rect = this.device.name.getBoundingRect(); - this.sectionTextBorder = new Rect({ - zlevel: this.device.zlevel, - z: this.device.z + 4, - shape: rect, - style: { - lineDash: [3, 3], - stroke: '#fff', // 白色 - fill: this.device.model.sectionType == '02' ? this.device.style.Section.line.logicalColor : '#00FFFF' // 蓝色 - } - }); - this.add(this.sectionTextBorder); - this.sectionTextBorder.hide(); + if (rect) { + this.sectionTextBorder = new Rect({ + zlevel: this.device.zlevel, + z: this.device.z + 4, + shape: rect, + style: { + lineDash: [3, 3], + stroke: '#fff', // 白色 + fill: this.device.model.sectionType == '02' ? this.device.style.Section.line.logicalColor : '#00FFFF' // 蓝色 + } + }); + this.add(this.sectionTextBorder); + this.sectionTextBorder.hide(); - const fontSize = this.device.model.type == '02' ? this.device.style.Section.text.fontSize + 2 : this.device.style.Section.text.fontSize; - this.TextName = new Text({ - zlevel: this.device.zlevel, - z: this.device.z + 4, - style: { - x: rect.x + (rect.width / 2), - y: rect.y + (rect.height / 2), - fontWeight: 'normal', - fontSize: fontSize, - fontFamily: this.device.style.fontFamily, - text: this.device.model.name, - textFill: '#000', - textAlign: this.device.style.Section.text.textAlign, - textPosition: this.device.style.Section.text.textPosition || 'inside', - textVerticalAlign: this.device.style.Section.text.textVerticalAlign || null - } - }); - this.add(this.TextName); - this.TextName.hide(); + const fontSize = this.device.model.type == '02' ? this.device.style.Section.name.fontSize + 2 : this.device.style.Section.name.fontSize; + this.TextName = new Text({ + zlevel: this.device.zlevel, + z: this.device.z + 4, + style: { + x: rect.x + (rect.width / 2), + y: rect.y + (rect.height / 2), + fontWeight: 'normal', + fontSize: fontSize, + fontFamily: this.device.style.fontFamily, + text: this.device.model.name, + textFill: '#000', + textAlign: this.device.style.Section.name.textAlign, + textPosition: this.device.style.Section.name.textPosition || 'inside', + textVerticalAlign: this.device.style.Section.name.textVerticalAlign || null + } + }); + this.add(this.TextName); + this.TextName.hide(); + } } // 区段包围框 if (this.device.section) { if (this.device.model.curve) { const rect = this.device.section.getBoundingRect(); - rect.height = rect.height + this.device.style.Section.mouseOverStyle.lineWidthMore; - const shape = { - x: rect.x, - y: rect.y - this.device.style.Section.mouseOverStyle.lineWidthMore / 2, - width: rect.width, - height: rect.height - }; - this.lineBorder = new Rect({ - zlevel: this.device.zlevel, - z: this.device.z - 1, - shape: shape, - style: { - lineDash: this.device.style.Section.mouseOverStyle.lineDash, - stroke: this.device.style.Section.mouseOverStyle.borderColor, - fill: this.device.style.transparentColor - } - }); - this.add(this.lineBorder); - this.lineBorder.hide(); + if (rect) { + rect.height = rect.height + this.device.style.Section.mouseOverStyle.lineWidthMore; + const shape = { + x: rect.x, + y: rect.y - this.device.style.Section.mouseOverStyle.lineWidthMore / 2, + width: rect.width, + height: rect.height + }; + this.lineBorder = new Rect({ + zlevel: this.device.zlevel, + z: this.device.z - 1, + shape: shape, + style: { + lineDash: this.device.style.Section.mouseOverStyle.lineDash, + stroke: this.device.style.Section.mouseOverStyle.borderColor, + fill: this.device.style.transparentColor + } + }); + this.add(this.lineBorder); + this.lineBorder.hide(); + } } else { const model = this.device.model; let points = []; diff --git a/src/jmapNew/shape/Section/ERelease.js b/src/jmapNew/shape/Section/ERelease.js deleted file mode 100644 index 98282fb77..000000000 --- a/src/jmapNew/shape/Section/ERelease.js +++ /dev/null @@ -1,72 +0,0 @@ -import Group from 'zrender/src/container/Group'; -import Line from 'zrender/src/graphic/shape/Line'; - -/** 延时释放*/ -export default class ERelease extends Group { - constructor(model) { - super(); - this.model = model; - this.isNew = false; - - } - - create() { - if (!this.isNew) { - const model = this.model; - - this.isNew = true; - this.lines = new Line({ - zlevel: model.zlevel, - z: model.z, - shape: model.shape, - progressive: model.progressive, - style: { - lineWidth: model.lineWidth, - stroke: model.stroke - } - }); - this.add(this.lines); - } - } - - setStyle(model) { - this.create(); - this.lines.setStyle(model); - } - - hide() { - this.create(); - this.lines.hide(); - } - - show() { - this.create(); - this.lines.show(); - } - - // 开始动画 - animateStyle(loop, animates) { - this.create(); - if (animates && animates.length) { - this.eachChild((child) => { - if (child.animateStyle) { - let an = child.animateStyle(loop); - animates.forEach(elem => { - an = an.when(elem.time, elem.styles); - }); - an.start(); - } - }); - } - } - - // 结束动画 - stopAnimation(flag) { - this.create(); - this.eachChild((child) => { - if (child.stopAnimation) { - child.stopAnimation(flag); - } - }); - } -} diff --git a/src/jmapNew/shape/Section/ESeparator.js b/src/jmapNew/shape/Section/ESeparator.js index 7aa299a93..f9bd91589 100644 --- a/src/jmapNew/shape/Section/ESeparator.js +++ b/src/jmapNew/shape/Section/ESeparator.js @@ -1,6 +1,7 @@ import Group from 'zrender/src/container/Group'; import Polyline from 'zrender/src/graphic/shape/Polyline'; import Circle from 'zrender/src/graphic/shape/Circle'; +import JTriangle from '../../utils/JTriangle'; /** 分隔符*/ export default class ESeparator extends Group { @@ -10,15 +11,48 @@ export default class ESeparator extends Group { this.zlevel = model.zlevel; this.z = model.z || 6; this.style = model.style; - this.setType(); + this.create(); } - createModel(points, lineWidth, stroke) { - const model = this.model; - this.partition = new Polyline({ + create() { + /** 创建区段*/ + const model = this.model.modelData; + const style = this.model.style; + if (model && style && model.points && model.points.length > 1) { + /** 创建左侧分隔符*/ + const traingleLeft = new JTriangle(model.points[0], model.points[1]); + this.lPartition = this.setType({ + traingle: traingleLeft, + point: { + x: model.points[0].x, + y: model.points[0].y + }, + sepType: model.sepTypeLeft, + drict: -1 // 方向 + }); + + /** 创建右侧分隔符*/ + const traingleRight = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]); + this.rPartition = this.setType({ + traingle: traingleRight, + point: { + x: model.points[model.points.length - 1].x, + y: model.points[model.points.length - 1].y + }, + sepType: model.sepTypeRight, + drict: 1 // 方向 + }); + this.add(this.lPartition); + this.add(this.rPartition); + } + } + + createModel(modelData, points, lineWidth, stroke) { + const partition = new Polyline({ zlevel: this.zlevel, - progressive: model.progressive, z: this.z, + origin: [modelData.point.x, modelData.point.y], + rotation: Math.PI * 2 - Math.atan2(modelData.traingle.absy, modelData.traingle.absx) * modelData.traingle.drictx * modelData.traingle.dricty, shape: { points: points }, @@ -27,19 +61,19 @@ export default class ESeparator extends Group { stroke: stroke || this.style.Section.separator.color } }); - this.add(this.partition); + return partition; } // 创建 侵限分隔符 - createCircle() { - const model = this.model; - this.circle = new Circle({ + createCircle(modelData) { + const partition = new Circle({ zlevel: this.zlevel, z: this.z, - progressive: model.progressive, + origin: [modelData.point.x, modelData.point.y], + rotation: Math.PI * 2 - Math.atan2(modelData.traingle.absy, modelData.traingle.absx) * modelData.traingle.drictx * modelData.traingle.dricty, shape: { - cx: model.point.x, - cy: model.point.y, + cx: modelData.point.x, + cy: modelData.point.y, r: this.style.Section.line.width }, style: { @@ -48,18 +82,18 @@ export default class ESeparator extends Group { fill: this.style.transparentColor } }); - this.add(this.circle); + return partition; } - createCircleArc() { - const model = this.model; - this.circleArc = new Circle({ + createCircleArc(modelData) { + const partition = new Circle({ zlevel: this.zlevel, z: this.z, - progressive: model.progressive, + origin: [modelData.point.x, modelData.point.y], + rotation: Math.PI * 2 - Math.atan2(modelData.traingle.absy, modelData.traingle.absx) * modelData.traingle.drictx * modelData.traingle.dricty, shape: { - cx: model.point.x, - cy: model.point.y, + cx: modelData.point.x, + cy: modelData.point.y, r: this.style.Section.line.width + 2 }, style: { @@ -68,47 +102,44 @@ export default class ESeparator extends Group { fill: this.style.transparentColor } }); - this.add(this.circleArc); + return partition; } - setType() { - const type = this.model.sepType; - const model = this.model; - if (model && this.style && model.traingle) { + setType(modelData) { + const style = this.model.style; + const type = modelData.sepType; + + if (modelData && style && modelData.traingle) { + let partition = null; if (type === '01') { // 普通分割 const points = [ - [model.point.x, model.point.y - (this.style.Section.separator.halfHeight)], - [model.point.x, model.point.y + (this.style.Section.separator.halfHeight)] + [modelData.point.x, modelData.point.y - (style.Section.separator.halfHeight)], + [modelData.point.x, modelData.point.y + (style.Section.separator.halfHeight)] ]; - this.createModel(points); + partition = this.createModel(modelData, points); } else if (type === '02') { // 单侧分割符 const points = [ - [model.point.x + model.drict * (this.style.Section.separator.halfHeight), model.point.y - (this.style.Section.separator.halfHeight * 1.5)], - [model.point.x, model.point.y - (this.style.Section.separator.halfHeight * 1.5)], - [model.point.x, model.point.y + (this.style.Section.separator.halfHeight * 1.5)] + [modelData.point.x + modelData.drict * (style.Section.separator.halfHeight), modelData.point.y - (style.Section.separator.halfHeight * 1.5)], + [modelData.point.x, modelData.point.y - (style.Section.separator.halfHeight * 1.5)], + [modelData.point.x, modelData.point.y + (style.Section.separator.halfHeight * 1.5)] ]; - this.createModel(points); + partition = this.createModel(modelData, points); } else if (type === '03') { // 尽头分隔符 const points = [ - [model.point.x + model.drict * (this.style.Section.separator.halfHeight) * 1.2, model.point.y - (this.style.Section.separator.halfHeight * 1.2)], - [model.point.x, model.point.y - (this.style.Section.separator.halfHeight * 1.2)], - [model.point.x, model.point.y + (this.style.Section.separator.halfHeight * 1.2)], - [model.point.x + model.drict * (this.style.Section.separator.halfHeight) * 1.2, model.point.y + (this.style.Section.separator.halfHeight * 1.2)] + [modelData.point.x + modelData.drict * (style.Section.separator.halfHeight) * 1.2, modelData.point.y - (style.Section.separator.halfHeight * 1.2)], + [modelData.point.x, modelData.point.y - (style.Section.separator.halfHeight * 1.2)], + [modelData.point.x, modelData.point.y + (style.Section.separator.halfHeight * 1.2)], + [modelData.point.x + modelData.drict * (style.Section.separator.halfHeight) * 1.2, modelData.point.y + (style.Section.separator.halfHeight * 1.2)] ]; - const lineWidth = this.style.Section.separator.endWidth; - const stroke = this.style.Section.separator.endColor; - this.createModel(points, lineWidth, stroke); + const lineWidth = style.Section.separator.endWidth; + const stroke = style.Section.separator.endColor; + partition = this.createModel(modelData, points, lineWidth, stroke); } else if (type === '04') { // 侵限分隔符 - this.createCircle(); + partition = this.createCircle(modelData); } else if (type === '05') { // 特色分隔符 - this.createCircleArc(); + partition = this.createCircleArc(modelData); } - } - - if (model.traingle) { - this.origin = [model.point.x, model.point.y]; - this.rotation = Math.PI * 2 - Math.atan2(model.traingle.absy, model.traingle.absx) * model.traingle.drictx * model.traingle.dricty; - this.dirty(); // 可以无需调用 + return partition; } } } diff --git a/src/jmapNew/shape/Section/EStopRouteImg.js b/src/jmapNew/shape/Section/EStopRouteImg.js index 3fb1d47a3..215178b2b 100644 --- a/src/jmapNew/shape/Section/EStopRouteImg.js +++ b/src/jmapNew/shape/Section/EStopRouteImg.js @@ -14,39 +14,51 @@ export default class EStopRouteImg extends Group { this.create(); } create() { - const image = new Image(5, 8); - image.src = Stop_Route; - - image.decode() - .then(() => { - const pattern = new Pattern(image, 'repeat'); - for (let i = 1; i < this.model.points.length; i++) { - const triangle = new JTriangle(this.model.points[i - 1], this.model.points[i]); - this.stopRouteImgList.push(new Rect({ - zlevel: this.zlevel, - z: this.z + 1, - origin: [this.model.points[i - 1].x, this.model.points[i - 1].y], - rotation: -triangle.getRotation(), - shape: { - x: this.model.points[i - 1].x, - y: this.model.points[i - 1].y - this.model.style.Section.line.width / 2, - width: triangle.getLength(), - height: this.model.style.Section.line.width - }, - style: { - fill: pattern - } - })); - } - this.stopRouteImgList.forEach(item => { - this.add(item); - item.hide(); + const model = this.model.modelData; + const style = this.model.style; + const modelPoints = model.points; + if (model.type !== '04') { + const image = new Image(5, 8); + image.src = Stop_Route; + image.decode() + .then(() => { + const pattern = new Pattern(image, 'repeat'); + for (let i = 1; i < modelPoints.length; i++) { + const triangle = new JTriangle(modelPoints[i - 1], modelPoints[i]); + this.stopRouteImgList.push(new Rect({ + zlevel: this.zlevel, + z: this.z + 1, + origin: [modelPoints[i - 1].x, modelPoints[i - 1].y], + rotation: -triangle.getRotation(), + shape: { + x: modelPoints[i - 1].x, + y: modelPoints[i - 1].y - style.Section.line.width / 2, + width: triangle.getLength(), + height: style.Section.line.width + }, + style: { + fill: pattern + } + })); + } + this.stopRouteImgList.forEach(item => { + this.add(item); + item.hide(); + }); }); - }); + } } setModel(dx, dy) { } setCursor(mouseStyle) { this.imageBg.attr('cursor', mouseStyle); } + + recover() { + + } + + setState() { + + } } diff --git a/src/jmapNew/shape/Section/ETextName.js b/src/jmapNew/shape/Section/ETextName.js new file mode 100644 index 000000000..6f2d5bb4d --- /dev/null +++ b/src/jmapNew/shape/Section/ETextName.js @@ -0,0 +1,163 @@ +import Group from 'zrender/src/container/Group'; +import Text from 'zrender/src/graphic/Text'; +import JTriangle from '../../utils/JTriangle'; + +class ETextName extends Group { + constructor(model) { + super(); + this.model = model; + this.create(); + } + + create() { + const model = this.model.modelData; + const styleModel = this.model.style.Section[this.model.type]; + let styleX = ''; + let styleY = ''; + let styleName = ''; + let isCreate = false; + let isShow = false; + + // 计算区段坐标位置 + const x = Math.min(model.points[0].x, model.points[model.points.length - 1].x) + Math.abs(model.points[model.points.length - 1].x - model.points[0].x) / 2; + const y = Math.min(model.points[0].y, model.points[model.points.length - 1].y) + Math.abs(model.points[model.points.length - 1].y - model.points[0].y) / 2; + const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]); + const drict = model.trainPosType != '01' ? 1 : -1; + if (this.model.type == 'name') { + if (model.type == '01') { // 物理区段名称 + const tempx = x + traingle.getSin(styleModel.distance); + const tempy = y + traingle.getCos(styleModel.distance) * (styleModel.position || drict); + styleX = tempx + model.namePosition.x; + styleY = tempy + model.namePosition.y; + isCreate = true; + } else if (model.type == '04') { // 道岔计轴区段 + styleX = x + model.namePosition.x; + styleY = y + model.namePosition.y + styleModel.distance * drict; + isCreate = true; + } + styleName = model.name; + if (model.nameShow) { + isShow = true; + } + } + // 逻辑区段 + if (this.model.type == 'logicText' && model.type == '02') { + const tempx = x + traingle.getSin(styleModel.distance); + const tempy = y + traingle.getCos(styleModel.distance) * (styleModel.position || drict); + styleX = tempx + model.namePosition.x; + styleY = tempy + model.namePosition.y; + styleName = model.name; + isCreate = true; + if (model.nameShow) { + isShow = true; + } + } + // 站台轨名称 + if (this.model.type == 'standTrackText') { + if (model.standTrack && model.standTrackName) { + isCreate = true; + const tempx = x + traingle.getSin(styleModel.distance); + const tempy = y + traingle.getCos(styleModel.distance) * (styleModel.position || drict); + styleX = tempx + model.standTrackNamePosition.x; + styleY = tempy + model.standTrackNamePosition.y; + styleName = model.standTrackName; + } + if (model.standTrackNameShow) { + isShow = true; + } + } + // 折返轨名称 + if (this.model.type == 'reentryTrackText') { + if (model.reentryTrack && model.reentryTrackName) { + isCreate = true; + const tempx = x + traingle.getSin(styleModel.distance); + const tempy = y + traingle.getCos(styleModel.distance) * (styleModel.position || drict); + styleX = tempx + model.reentryTrackNamePosition.x; + styleY = tempy + model.reentryTrackNamePosition.y; + styleName = model.reentryTrackName; + } + if (model.reentryTrackNameShow) { + isShow = true; + } + } + // 转换轨名称 + if (this.model.type == 'transferTrackText') { + if (model.transferTrack && model.transferTrackName) { + isCreate = true; + const tempx = x + traingle.getSin(styleModel.distance); + const tempy = y + traingle.getCos(styleModel.distance) * (styleModel.position || drict); + styleX = tempx + model.transferTrackNamePosition.x; + styleY = tempy + model.transferTrackNamePosition.y; + styleName = model.transferTrackName; + } + if (model.transferTrackNameShow) { + isShow = true; + } + } + // 目的码名称 + if (this.model.type == 'destinationText') { + if (model.destinationCode) { + isCreate = true; + let tempx = x + traingle.getSin(styleModel.distance); + let tempy = y + traingle.getCos(styleModel.distance) * (styleModel.position || drict); + if (!tempx || !tempy) { + tempx = 0; + tempy = 0; + } + styleX = tempx + model.destinationCodePoint.x; + styleY = tempy + model.destinationCodePoint.y; + styleName = model.destinationCode; + } + if (model.destinationNameShow) { + isShow = true; + } + } + + if (isCreate) { + this.text = new Text({ + _subType: 'Text', + zlevel: this.model.zlevel, + z: this.model.z, + silent: model.silent || false, + style: { + x: styleX, + y: styleY, + fontWeight: styleModel.fontWeight || 'normal', + fontSize: styleModel.fontSize, + fontFamily: styleModel.fontFamily || this.model.style.fontFamily, + text: styleName, + textFill: styleModel.fontColor, + textAlign: styleModel.textAlign, + textPosition: styleModel.textPosition || 'inside', + textVerticalAlign: styleModel.textVerticalAlign || null + } + }); + this.add(this.text); + isShow ? this.text.show() : this.text.hide(); + } + } + + show() { + this.text && this.text.show(); + } + + hide() { + this.text && this.text.hide(); + } + + getBoundingRect() { + if (this.text) { + return this.text.getBoundingRect().clone(); + } + } + + recover() { + // 暂时不做状态初始化 + } + + setState() { + // 区段名称类暂时不做状态处理 + } +} + +export default ETextName; diff --git a/src/jmapNew/shape/Section/EblockLines.js b/src/jmapNew/shape/Section/EblockLines.js index 34d7834e2..1557a28a5 100644 --- a/src/jmapNew/shape/Section/EblockLines.js +++ b/src/jmapNew/shape/Section/EblockLines.js @@ -16,13 +16,17 @@ export default class ELines extends Group { this.model = model; this.zlevel = model.zlevel; this.z = model.z; - this.create(model); + this.create(); } - create(model) { + create() { /** 创建区段*/ + const model = this.model.modelData; + const style = this.model.style; + + const isCurve = model.curve; if (model && model.points.length > 1) { - if (model.isCurve) { // 曲线 用贝塞尔曲线绘图 封锁 必须4个点来绘图 + if (isCurve) { // 曲线 用贝塞尔曲线绘图 封锁 必须4个点来绘图 const shape = {}; for (let i = 1; i < (model.points.length - 1); i++) { shape[`cpx${i}`] = model.points[i].x; @@ -41,8 +45,8 @@ export default class ELines extends Group { culling: true, shape: this.couvert(shape), style: { - lineWidth: model.style.Section.line.width, - stroke: model.style.Section.line.blockColor, + lineWidth: style.Section.line.width, + stroke: style.Section.line.blockColor, fillOpacity: 0 } }); @@ -63,8 +67,8 @@ export default class ELines extends Group { y2: model.points[0].y + spaceY + spaceY }, style: { - lineWidth: model.style.Section.line.width, - stroke: model.style.Section.line.blockColor + lineWidth: style.Section.line.width, + stroke: style.Section.line.blockColor } }); this.add(this.sectionM); @@ -183,4 +187,12 @@ export default class ELines extends Group { cpy1: (cpy1 + cpy2) / 2 + v[0] * y0 * 0.128 }; } + + recover() { + + } + + setState() { + + } } diff --git a/src/jmapNew/shape/Section/index.js b/src/jmapNew/shape/Section/index.js index 5dbc03e9e..75508f463 100644 --- a/src/jmapNew/shape/Section/index.js +++ b/src/jmapNew/shape/Section/index.js @@ -1,15 +1,15 @@ import Group from 'zrender/src/container/Group'; -import ETextName from '../element/ETextName'; // 名称文字 (共有) -// import ERelease from './ERelease'; // 线段 (共有) +import ETextName from './ETextName'; // 名称文字 import ELimitLines from './ELimitLines'; // 区段限速 (私有) import ELines from './ELines'; // 创建多线条 曲线 (私有) import EblockLines from './EblockLines'; // 区段封锁特有 import ESeparator from './ESeparator'; // 分隔符 (私有) import EMouse from './EMouse'; import EAxle from './EAxle'; // 创建计轴 -import { EBackArrow, EBackArrowTriangle } from './EBackArrow'; // 折返进路箭头 +// import { EBackArrow, EBackArrowTriangle } from './EBackArrow'; // 折返进路箭头 +import EBackArrowGroup from './EBackArrow'; // 折返进路箭头 import ELimitName from './ELimitName'; // 成都三号线 限速名称 -import JTriangle from '../../utils/JTriangle'; +// import JTriangle from '../../utils/JTriangle'; import { drawSectionStyle } from '../../config/defaultStyle'; import EStopRouteImg from './EStopRouteImg'; import store from '@/store/index_APP_TARGET'; @@ -35,556 +35,67 @@ export default class Section extends Group { create() { // 区段type 01计轴区段；02逻辑区段；03道岔区段 04道岔计轴区段 - this.createSectionText(); // 创建区段文字 - this.createSection(); // 创建区段 - // this.creatRelease(); // 创建延时释放 - this.createSeparator(); // 创建分隔符 - this.createTurnBack(); // 创建成都三号线 折返箭头 - this.createAxlex(); // 创建计轴 （西安二号线） - this.createReleaseText(); // 创建延迟解锁计时 - } - // 创建计轴 - createAxlex() { - if (this.style.Section.axle.show) { - const length = this.model.points.length; - const traingleStart = new JTriangle(this.model.points[0], this.model.points[1]); - const traingleEnd = new JTriangle(this.model.points[length - 2], this.model.points[length - 1]); - if (this.model.leftAxlePosition) { - const leftPoint = {x:this.model.points[0].x, y: this.model.points[0].y}; - if (this.model.leftAxleOffset) { - leftPoint.x = leftPoint.x + this.model.leftAxleOffset.x || 0; - leftPoint.y = leftPoint.y + this.model.leftAxleOffset.y || 0; - } - this.leftAxle = new EAxle({ - _subType: 'leftAxle', - zlevel: this.zlevel, - z: this.z, - shape: { - style: this.style, - traingle: traingleStart, - drictx: 1, - dricty: this.model.leftAxlePosition === 1 || this.model.leftAxlePosition === 2 ? 1 : -1, - isSpecial: this.model.leftAxlePosition === -2 || this.model.leftAxlePosition === 2, - point: leftPoint, - difference: this.model.points[0].y - this.model.points[1].y, - multiple: 1 - }, - style: { - lineWidth: this.style.Section.axle.lineWidth, - fill: this.style.Section.axle.color, - stroke: this.style.Section.axle.color - } - }); - this.add(this.leftAxle); - } - if (this.model.rightAxlePosition) { - const rightPoint = {x:this.model.points[length - 1].x, y: this.model.points[length - 1].y}; - if (this.model.rightAxleOffset) { - rightPoint.x = rightPoint.x + this.model.rightAxleOffset.x || 0; - rightPoint.y = rightPoint.y + this.model.rightAxleOffset.y || 0; - } - this.rightAxle = new EAxle({ - _subType: 'rightAxle', - zlevel: this.zlevel, - z: this.z, - shape: { - style: this.style, - traingle: traingleEnd, - drictx: -1, - dricty: this.model.rightAxlePosition === 1 || this.model.rightAxlePosition === 2 ? 1 : -1, - isSpecial: this.model.rightAxlePosition === -2 || this.model.rightAxlePosition === 2, - point: rightPoint, - difference: this.model.points[length - 2].y - this.model.points[length - 1].y, - multiple1: -1 - }, - style: { - lineWidth: this.style.Section.axle.lineWidth, - fill: this.style.Section.axle.color, - stroke: this.style.Section.axle.color - } - }); - this.add(this.rightAxle); - } - } - } - // 创建区段名称 - createSectionText() { + // 站台所有的绘图元素 + const elementTypeList = { + 'name': ETextName, // 区段名称 + 'logicText': ETextName, // 逻辑区段名称 + 'standTrackText': ETextName, // 站台轨名称 + 'reentryTrackText': ETextName, // 折返轨名称 + 'transferTrackText': ETextName, // 转换轨名称 + 'destinationText': ETextName, // 目的码名称 + 'line': ELines, // 创建区段 + 'lineBorder': ELines, // 哈尔滨线路点击背景色 + 'sectionBlock': EblockLines, // 哈尔滨线路区段（封锁显示） + 'stopRouteImg': EStopRouteImg, // 宁波三线路特有 + 'axle': EAxle, // 计轴 (西安二号线 ) + 'separator': ESeparator, // 分隔符 + 'speedLimit': ELimitLines, // 限速线 + 'speedLimitName': ELimitName, // 限速线名称 + 'shuttleBack': EBackArrowGroup // 折返箭头 (成都三号线显示) + }; + // 遍历当前线路下的绘图元素 const model = this.model; const style = this.style; - - if (model && style) { - // 计算区段坐标位置 - const x = Math.min(model.points[0].x, model.points[model.points.length - 1].x) + Math.abs(model.points[model.points.length - 1].x - model.points[0].x) / 2; - const y = Math.min(model.points[0].y, model.points[model.points.length - 1].y) + Math.abs(model.points[model.points.length - 1].y - model.points[0].y) / 2; - const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]); - const drict = model.trainPosType != '01' ? 1 : -1; - if (model.type == '01') { // 物理区段名称 - const tempx = x + traingle.getSin(style.Section.text.distance); - const tempy = y + traingle.getCos(style.Section.text.distance) * (style.Section.text.position || drict); - this.name = new ETextName({ - zlevel: this.zlevel, - z: this.z + 2, - style: this.style, - silent: false, - x: tempx + model.namePosition.x, - y: tempy + model.namePosition.y, - fontWeight: style.Section.text.fontWeight, - fontSize: style.Section.text.fontSize, - fontFamily: style.fontFamily, - text: model.name, - textFill: style.Section.text.fontColor, - textAlign: style.Section.text.textAlign, - textPosition: style.Section.text.textPosition, - textVerticalAlign: style.Section.text.textVerticalAlign - }); - this.add(this.name); - model.nameShow && style.Section.text.show ? this.name.show() : this.name.hide(); - } else if (model.type == '02') { // 逻辑区段 - const tempx = x + traingle.getSin(style.Section.logicText.distance); - const tempy = y + traingle.getCos(style.Section.logicText.distance) * (style.Section.logicText.position || drict); - this.name = new ETextName({ - zlevel: this.zlevel, - z: this.z + 2, - style: this.style, - silent: false, - x: tempx + model.namePosition.x, - y: tempy + model.namePosition.y, - fontWeight: style.Section.logicText.fontWeight, - fontSize: style.Section.logicText.fontSize, - fontFamily: style.fontFamily, - text: model.name, - textFill: style.Section.logicText.fontColor, - textAlign: style.Section.logicText.textAlign, - textPosition: style.Section.logicText.textPosition, - textVerticalAlign: style.Section.logicText.textVerticalAlign - }); - this.add(this.name); - model.nameShow && style.Section.logicText.show ? this.name.show() : this.name.hide(); - } else if (model.type == '04') { // 道岔计轴区段 - this.name = new ETextName({ - zlevel: this.zlevel, - z: this.z + 2, - style: this.style, - silent: false, - x: x + model.namePosition.x, - y: y + model.namePosition.y + style.Section.text.distance * drict, - fontWeight: style.Section.text.fontWeight, - fontSize: style.Section.text.fontSize, - fontFamily: style.fontFamily, - text: model.name, - textFill: style.Section.text.fontColor, - textAlign: style.Section.text.textAlign, - textPosition: style.Section.text.textPosition, - textVerticalAlign: style.Section.text.textVerticalAlign - }); - this.add(this.name); - model.nameShow ? this.name.show() : this.name.hide(); - } - - /** 站台轨名称*/ - // 站台轨存在且站台轨名称存在时显示 - if (model.standTrack && model.standTrackName) { - const tempx = x + traingle.getSin(style.Section.standText.distance); - const tempy = y + traingle.getCos(style.Section.standText.distance) * (style.Section.standText.position || drict); - this.standTrackText = new ETextName({ - zlevel: this.zlevel, - z: this.z + 2, - silent: false, - x: tempx + model.standTrackNamePosition.x, - y: tempy + model.standTrackNamePosition.y, - fontWeight: style.Section.standText.fontWeight, - fontSize: style.Section.standText.fontSize, - fontFamily: style.fontFamily, - text: model.standTrackName, - textFill: style.Section.standText.fontColor, - textAlign: style.Section.standText.textAlign, - textPosition: style.Section.standText.textPosition, - textVerticalAlign: style.Section.standText.textVerticalAlign - }); - this.add(this.standTrackText); - model.standTrackNameShow && style.Section.standText.show ? this.standTrackText.show() : this.standTrackText.hide(); - } - - /** 折返轨名称*/ - // 折返轨存在且折返轨名称存在时显示 - if (model.reentryTrack && model.reentryTrackName) { - const tempx = x + traingle.getSin(style.Section.reentryText.distance); - const tempy = y + traingle.getCos(style.Section.reentryText.distance) * (style.Section.reentryText.position || drict); - this.reentryTrackText = new ETextName({ - zlevel: this.zlevel, - z: this.z + 2, - silent: false, - x: tempx + model.reentryTrackNamePosition.x, - y: tempy + model.reentryTrackNamePosition.y, - fontWeight: style.Section.reentryText.fontWeight, - fontSize: style.Section.reentryText.fontSize, - fontFamily: style.fontFamily, - text: model.reentryTrackName, - textFill: style.Section.reentryText.fontColor, - textAlign: style.Section.reentryText.textAlign, - textPosition: style.Section.reentryText.textPosition, - textVerticalAlign: style.Section.reentryText.textVerticalAlign - }); - this.add(this.reentryTrackText); - model.reentryTrackNameShow && style.Section.reentryText.show ? this.reentryTrackText.show() : this.reentryTrackText.hide(); - } - - /** 转换轨名称*/ - // 转换轨存在且转换轨名称存在时显示 - if (model.transferTrack && model.transferTrackName) { - const tempx = x + traingle.getSin(style.Section.transferText.distance); - const tempy = y + traingle.getCos(style.Section.transferText.distance) * (style.Section.transferText.position || drict); - this.transferTrackText = new ETextName({ - zlevel: this.zlevel, - z: this.z + 2, - silent: false, - x: tempx + model.transferTrackNamePosition.x, - y: tempy + model.transferTrackNamePosition.y, - fontWeight: style.Section.transferText.fontWeight, - fontSize: style.Section.transferText.fontSize, - fontFamily: style.fontFamily, - text: model.transferTrackName, - textFill: style.Section.transferText.fontColor, - textAlign: style.Section.transferText.textAlign, - textPosition: style.Section.transferText.textPosition, - textVerticalAlign: style.Section.transferText.textVerticalAlign - }); - this.add(this.transferTrackText); - model.transferTrackNameShow && style.Section.transferText.show ? this.transferTrackText.show() : this.transferTrackText.hide(); - } - - /** 目的码名称*/ - // 目的码存在且目的码名称存在时显示 - if (model.destinationCode) { - let tempx = x + traingle.getSin(style.Section.destinationText.distance); - let tempy = y + traingle.getCos(style.Section.destinationText.distance) * (style.Section.destinationText.position || drict); - if (!tempx || !tempy) { - tempx = 0; - tempy = 0; - } - this.destinationText = new ETextName({ - zlevel: this.zlevel, - z: this.z + 2, - silent: false, - x: tempx + model.destinationCodePoint.x, - y: tempy + model.destinationCodePoint.y, - fontWeight: style.Section.destinationText.fontWeight, - fontSize: style.Section.destinationText.fontSize, - fontFamily: style.fontFamily, - text: model.destinationCode, - textFill: style.Section.destinationText.fontColor, - textAlign: style.Section.destinationText.textAlign, - textPosition: style.Section.destinationText.textPosition, - textVerticalAlign: style.Section.destinationText.textVerticalAlign - }); - this.add(this.destinationText); - model.destinationNameShow && style.Section.destinationText.show ? this.destinationText.show() : this.destinationText.hide(); - } - - } - } - - /** 创建区段*/ - createSection() { - const model = this.model; - const style = this.style; - // 创建区段 model.logicSectionCodeList 为空 或 0 表明没有逻辑区段 创建 否则过滤 - if ((model.type == '01' && (!model.logicSectionCodeList || !model.logicSectionCodeList.length)) || model.type == '02' || model.type == '03') { - this.section = new ELines({ + const currentTypeList = style.Section.elemnetType; + currentTypeList.forEach(element => { + const ClassName = elementTypeList[element]; + const elementZ = style.Section[element] ? style.Section[element].z ? style.Section[element].z : 0 : 0; + this[element] = new ClassName({ zlevel: this.zlevel, - z: model.type == '02' ? this.z + 1 : this.z, // 逻辑区段会覆盖物理区段 - isSwitchSection: model.switchSection, - isCurve: model.curve, - points: model.type == '04' ? [model.namePosition, model.namePosition] : model.points, - style: style - }); - this.add(this.section); - if (this.style.Section.block.special) { // 创建哈尔滨特殊区段（用作封锁显示） - this.sectionBlock = new EblockLines({ - zlevel: this.zlevel, - z: this.z + 2, - isSwitchSection: model.switchSection, - isCurve: model.curve, - points: model.points, - style: style - }); - this.add(this.sectionBlock); - } - - if (this.style.Section.line.isActiveShow) { // 哈尔滨线路点击背景色 - this.lineBorder = new ELines({ - zlevel: this.zlevel, - z: this.z - 1, - isSwitchSection: model.switchSection, - isCurve: model.curve, - points: model.type == '04' ? [model.namePosition, model.namePosition] : model.points, - style: style - }); - this.add(this.lineBorder); - this.lineBorder.setStyle({ lineWidth: 0 }); - } - if (this.style.Section.stopRouteImg && model.type !== '04') { - this.stopRouteImg = new EStopRouteImg({ - zlevel: this.zlevel, - z: this.z, - points: model.points, - style:style - }); - this.add(this.stopRouteImg); - } - } - } - - // 折返箭头 - createTurnBack() { - const model = this.model; - const style = this.style; - if (model.reentryTrack && style.Section.shuttleBack) { - const radius = 3; - model.drict = 1; // 箭头朝向 (是折返轨加一个方向选择) 目前在区段右边 - const width = style.Section.line.width * 2; - const height = style.Section.line.width * 1; - const turnBackDistance = style.Section.shuttleBack.distance + radius * 4; - - const points = model.points; - let x = -model.drict * width * 1.2; - let y = -turnBackDistance; - - if (model.drict < 0) { - x += points[0].x; - y += points[0].y; - } else { - x += points[points.length - 1].x; - y += points[points.length - 1].y; - } - - this.turnBack = new EBackArrow({ - zlevel: this.zlevel, - z: this.z + 10, - shape: { - drict: model.drict, - width: width, - height: height, - points: { - x: x, - y: y - } - }, - style: { - lineWidth: style.Section.separator.width, - stroke: style.Section.separator.color, - fill: 'rgba(0, 0, 0, 0)' - } - }); - this.turnBackriangle = new EBackArrowTriangle({ - zlevel: this.zlevel, - z: this.z + 10, - shape: { - drict: model.drict, - width: width, - height: height, - points: { - x: x, - y: y - } - }, - style: { - lineWidth: style.Section.separator.width, - stroke: style.Section.separator.color, - fill: style.Section.separator.color - } - }); - this.add(this.turnBack); - this.add(this.turnBackriangle); - this.turnBack.hide(); - this.turnBackriangle.hide(); - } - } - - // // 创建延时释放 - // creatRelease() { - // const model = this.model; - // const style = this.style; - // const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]); - // if ((model.type == '01' && (!model.logicSectionCodeList || !model.logicSectionCodeList.length)) || model.type == '02' || model.type == '03') { - // this.release = new ERelease({ - // zlevel: this.zlevel, - // z: this.z, - // shape: { - // x1: model.points[0].x + traingle.getCos(traingle.absz / 3), - // y1: model.points[0].y + traingle.getSin(traingle.absz / 3), - // x2: model.points[0].x + traingle.getCos(traingle.absz / 3 * 2), - // y2: model.points[0].y + traingle.getSin(traingle.absz / 3 * 2) - // }, - // lineWidth: style.Section.line.width, - // stroke: style.Section.line.spareColor - // }); - - // this.add(this.release); - // } - // } - - // 创建限速线 - creatSpeedLimit() { - const model = this.model; - const style = this.style; - const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]); - let x = traingle.drictx * (style.Section.speedLimit.distance) * traingle.getSinRate(); - let y = traingle.dricty * (style.Section.speedLimit.distance) * traingle.getCosRate(); - if (x == Infinity) { x = 0; } - if (y == Infinity) { y = 0; } - if (!this.speedLimitLeft && !this.speedLimitRight) { - this.speedLimitLeft = new ELimitLines({ - zlevel: this.zlevel, - z: this.z, - position: [x, -y], + z: this.z + elementZ, style: style, - switch: model.switch, - code: model.code, - isSwitchSection: model.switchSection, - relSwitchCode: model.relSwitchCode, - isCurve: model.curve, // 是否曲线 - points: model.points + type: element, + modelData: model }); - this.speedLimitRight = new ELimitLines({ - zlevel: this.zlevel, - z: this.z, - position: [-x, y], - style: style, - switch: model.switch, - code: model.code, - isSwitchSection: model.switchSection, - relSwitchCode: model.relSwitchCode, - isCurve: model.curve, // 是否曲线 - points: model.points - }); - if (style.Section.speedLimit.nameShow) { - // 开头 起点位置 - this.speedLimitNameLeft = new ELimitName({ - zlevel: this.zlevel, - z: this.z + 10, - drict: -1, - x: model.points[0].x, - y: model.points[0].y - 15, - style: style - }); - // 终点位置 - this.speedLimitNameRight = new ELimitName({ - zlevel: this.zlevel, - z: this.z + 10, - drict: 1, - x: model.points[model.points.length - 1].x, - y: model.points[model.points.length - 1].y - 15, - style: style - }); - this.add(this.speedLimitNameLeft); - this.add(this.speedLimitNameRight); - } - } - this.add(this.speedLimitLeft); - this.add(this.speedLimitRight); - } - - // 创建分隔符 - createSeparator() { - const model = this.model; - const style = this.style; - let traingle = null; - - if (model && style && model.points && model.points.length > 1) { - /** 创建左侧分隔符*/ - traingle = new JTriangle(model.points[0], model.points[1]); - this.lPartition = new ESeparator({ - style: style, - zlevel: this.zlevel, - z: this.z + style.Section.separator.z, - traingle: traingle, - point: { - x: model.points[0].x, - y: model.points[0].y - }, - sepType: model.sepTypeLeft, - drict: -1 // 方向 - }); - - /** 创建右侧分隔符*/ - traingle = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]); - this.rPartition = new ESeparator({ - style: style, - zlevel: this.zlevel, - z: this.z + style.Section.separator.z, - traingle: traingle, - point: { - x: model.points[model.points.length - 1].x, - y: model.points[model.points.length - 1].y - }, - sepType: model.sepTypeRight, - drict: 1 // 方向 - }); - /** 添加视图*/ - this.add(this.lPartition); - this.add(this.rPartition); - } - } - - // 创建延迟解锁计时 - createReleaseText() { - const model = this.model; - const style = this.style; - this.releaseName = new ETextName({ - zlevel: this.zlevel, - z: this.z + 2, - style: this.style, - silent: false, - x: model.points[0].x + 10, - y: model.points[0].y - style.Section.line.width * 2, - fontWeight: style.Section.text.fontWeight, - fontSize: style.Section.text.fontSize, - fontFamily: style.fontFamily, - text: '30', - textFill: style.Section.text.fontColor, - textAlign: style.Section.text.textAlign, - textPosition: style.Section.text.textPosition, - textVerticalAlign: style.Section.text.textVerticalAlign + this.add(this[element]); }); - this.add(this.releaseName); } /** 设置区段恢复默认状态*/ recover() { - if (this.section) { - this.section.stopAnimation(true); + if (this.line) { + this.line.stopAnimation(true); this.sectionBlock && this.sectionBlock.hide(); // 因此特殊区段 - this.section.setStyle({ + this.line.setStyle({ stroke: this.style.Section.line.spareColor, lineWidth: this.style.Section.line.width }); - // this.release && this.release.hide(); - if (this.speedLimitLeft && this.speedLimitRight) { - this.remove(this.speedLimitLeft); - this.remove(this.speedLimitRight); - } } - this.releaseName && this.releaseName.hide(); - if (this.leftAxle) { - this.leftAxle.setStyle({ - stroke: this.style.Section.line.spareColor, - fill: this.style.Section.line.spareColor - }); - } - if (this.rightAxle) { - this.rightAxle.setStyle({ - stroke: this.style.Section.line.spareColor, - fill: this.style.Section.line.spareColor - }); - } - this.section && this.section.recoverRoute(); + this.speedLimit && this.speedLimit.hide(); + this.speedLimitName && this.speedLimitName.hide(); + + this.axle && this.axle.setStyle({ + stroke: this.style.Section.line.spareColor, + fill: this.style.Section.line.spareColor + }); + this.line && this.line.recoverRoute(); + this.lineBorder && this.lineBorder.setStyle({ lineWidth: 0 }); } /** 未定义状态 00*/ undefine() { - if (this.section) { - this.section.setStyle({ + if (this.line) { + this.line.setStyle({ stroke: this.style.Section.line.undefinedColor, lineWidth: this.style.Section.line.width }); @@ -593,8 +104,8 @@ export default class Section extends Group { /** 空闲状态 01*/ spare() { - if (this.section) { - this.section.setStyle({ + if (this.line) { + this.line.setStyle({ stroke: this.style.Section.line.spareColor, lineWidth: this.style.Section.line.width }); @@ -603,58 +114,42 @@ export default class Section extends Group { /** 通信车占用状态 02*/ communicationOccupied() { - if (this.section) { - this.section.setStyle({ + if (this.line) { + this.line.setStyle({ stroke: this.style.Section.line.communicationOccupiedColor, lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth }); } - if (this.leftAxle) { - this.leftAxle.setStyle({ - stroke: this.style.Section.line.communicationOccupiedColor, - fill:this.style.Section.line.communicationOccupiedColor - }); - } - if (this.rightAxle) { - this.rightAxle.setStyle({ - stroke: this.style.Section.line.communicationOccupiedColor, - fill:this.style.Section.line.communicationOccupiedColor - }); - } + this.axle && this.axle.setStyle({ + stroke: this.style.Section.line.communicationOccupiedColor, + fill:this.style.Section.line.communicationOccupiedColor + }); } /** 非通信车占用状态 03*/ unCommunicationOccupied() { - if (this.section) { - this.section.setStyle({ + if (this.line) { + this.line.setStyle({ stroke: this.style.Section.line.unCommunicationOccupiedColor, lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth }); } - if (this.leftAxle) { - this.leftAxle.setStyle({ - stroke: this.style.Section.line.unCommunicationOccupiedColor, - fill:this.style.Section.line.unCommunicationOccupiedColor - }); - } - if (this.rightAxle) { - this.rightAxle.setStyle({ - stroke: this.style.Section.line.unCommunicationOccupiedColor, - fill:this.style.Section.line.unCommunicationOccupiedColor - }); - } + this.axle && this.axle.setStyle({ + stroke: this.style.Section.line.unCommunicationOccupiedColor, + fill:this.style.Section.line.unCommunicationOccupiedColor + }); } /** ARB故障 */ invalid() { - this.section && this.section.setStyle({ + this.line && this.line.setStyle({ stroke: this.style.Section.line.invalidColor, lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth }); } /** 进路锁闭 04*/ routeLock() { - if (this.section) { - this.section.setStyle({ + if (this.line) { + this.line.setStyle({ stroke: this.style.Section.line.routeLockColor, lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth }); @@ -663,16 +158,16 @@ export default class Section extends Group { /** 封锁 06*/ block() { - if (this.style.Section.block.special) { - this.sectionBlock && this.sectionBlock.show(); + if (this.sectionBlock) { + this.sectionBlock.show(); } else { - this.section && this.section.setStyle({ + this.line && this.line.setStyle({ stroke: this.style.Section.line.blockColor, lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth }); } - if (this.style.Section.block.blockGlint && this.section) { - this.section.animateStyle(true, [ + if (this.style.Section.block && this.style.Section.block.blockGlint && this.line) { + this.line.animateStyle(true, [ { time: 1000, styles: { stroke: this.style.backgroundColor } }, { time: 2000, styles: { stroke: this.style.Section.line.blockColor } } ]); @@ -681,8 +176,8 @@ export default class Section extends Group { /** 故障锁闭 05*/ faultLock() { - if (this.section) { - this.section.setStyle({ + if (this.line) { + this.line.setStyle({ stroke: this.style.Section.line.faultLockColor, lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth }); @@ -691,8 +186,8 @@ export default class Section extends Group { /** atc切除状态 07*/ atcExcision() { - if (this.section) { - this.section.setStyle({ + if (this.line) { + this.line.setStyle({ stroke: this.style.Section.line.atcExcisionColor, lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth }); @@ -701,9 +196,9 @@ export default class Section extends Group { /** ats切除状态 08*/ atsExcision() { - if (this.section) { + if (this.line) { this.atcExcision(); - this.section.animateStyle(true, [ + this.line.animateStyle(true, [ { time: 1000, styles: { stroke: this.style.backgroundColor } }, { time: 2000, styles: { stroke: this.style.Section.line.atsExcisionColor, lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth } } ]); @@ -712,39 +207,19 @@ export default class Section extends Group { /** 保护区段锁闭 09*/ protectiveLock() { - if (this.section) { - this.section.setStyle({ + if (this.line) { + this.line.setStyle({ stroke: this.style.Section.line.protectiveLockColor, lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth }); } } - // /** 延时释放*/ - // async timeRelease() { - // this.section.setStyle({ - // stroke: this.style.Section.line.routeLockColor, - // lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth - // }); - - // if (this.release) { - // this.release.show(); - // this.release.setStyle({ - // stroke: this.style.Section.line.routeLockColor, - // lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth - // }); - // this.release.animateStyle(true, [ - // { time: 1000, styles: { stroke: this.style.Section.line.routeLockColor } }, - // { time: 2000, styles: { stroke: this.style.Section.line.timeReleaseColor } } - // ]); - // } - // } - /** 区段切除*/ sectionCutOff() { const lineWidth = this.style.Section.line.width + (this.model.status != '01' ? this.style.Section.line.beyondWidth : 0); - if (this.section) { - this.section.animateStyle(true, [ + if (this.line) { + this.line.animateStyle(true, [ { time: 0, styles: { lineWidth: lineWidth } }, { time: 1000, styles: { stroke: this.style.backgroundColor } }, { time: 2000, styles: { lineWidth: lineWidth } } @@ -754,54 +229,14 @@ export default class Section extends Group { /** 设置限速*/ setSpeedUpperLimit() { - if (this.style.Section.line.speedLimitColor) { - this.section.setStyle({stroke: this.style.Section.line.speedLimitColor}); - } else if (this.section) { - this.creatSpeedLimit(); + if (this.style.Section.line.speedLimitColor) { // 宁波三号线 独有 + this.line.setStyle({stroke: this.style.Section.line.speedLimitColor}); + } else { + this.speedLimit && this.speedLimit.show(); + this.speedLimitName && this.speedLimitName.show(); } } - // /** 计轴预复位 12*/ - // axleReset() { - // if (this.release) { - // this.release.show(); - // this.release && this.release.setStyle({ - // stroke: this.style.Section.axle.resetColor, - // fill: 'green' - // }); - // } - // } - - // /** 计轴失效 13*/ - // alxeFailure() { - // if (this.section) { - // this.section.setStyle({ - // stroke: this.style.Section.axle.Failure, - // lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth - // }); - // } - // } - - showRemainTime(number) { // 区段延时保护倒计时显示 - this.releaseName && this.releaseName.show(); - // this.releaseName && this.releaseName.setStyle({ text: number }); - let pointX = this.model.points[0].x + 45; - let pointY = this.model.points[0].y; - if (!this.model.timeRight) { - pointX = this.model.points[this.model.points.length - 1].x - 45; - pointY = this.model.points[this.model.points.length - 1].y; - } - this.releaseName && this.releaseName.attr({ - style: { - text: number - }, - shape: { - x: pointX, - y: pointY - this.style.Section.line.width * 2 - } - }); - } - /** 设置状态*/ setState(model, flag = false) { if (!this.isShowShape) return; @@ -811,12 +246,12 @@ export default class Section extends Group { const switchModel = Vue.prototype.$jlmap.mapDevice[model.relSwitchCode]; if (switchModel.normalPosition != 0) { // 定位情况 const sectionC = Vue.prototype.$jlmap.mapDevice[switchModel.sectionCCode]; - sectionC && sectionC.instance && sectionC.instance.section.setStyle({ stroke: this.style.Switch.sectionAction.spareColor }); + sectionC && sectionC.instance && sectionC.instance.line.setStyle({ stroke: this.style.Switch.sectionAction.spareColor }); const sectionB = Vue.prototype.$jlmap.mapDevice[switchModel.sectionBCode]; sectionB && sectionB.instance && sectionB.instance.setState(sectionB, true); } else if (switchModel.normalPosition == 0) { // 反位情况 const sectionB = Vue.prototype.$jlmap.mapDevice[switchModel.sectionBCode]; - sectionB && sectionB.instance && sectionB.instance.section.setStyle({ stroke: this.style.Switch.sectionAction.spareColor }); + sectionB && sectionB.instance && sectionB.instance.line.setStyle({ stroke: this.style.Switch.sectionAction.spareColor }); const sectionC = Vue.prototype.$jlmap.mapDevice[switchModel.sectionCCode]; sectionC && sectionC.instance && sectionC.instance.setState(sectionC, true); } @@ -841,9 +276,6 @@ export default class Section extends Group { // 区段计轴预复位状态 (未处理) // 区段故障锁闭 model.fault && this.faultLock(); - // 区段延时保护倒计时显示 - // model.remainTime = 10; - model.remainTime && this.showRemainTime(model.remainTime); /** 道岔区段更新岔心颜色 */ if (model.type === '03' && model.switch) { @@ -858,13 +290,8 @@ export default class Section extends Group { getShapeTipPoint() { let rect = this.getBoundingRect(); const distance = this.style.Section.line.width / 2; - if (this.section) { - rect = this.section.getBoundingRect(); - // if (this.model.type !== '02' && this.model.nameShow) { - // if (this.model.trainPosType == '01') { - // distance = distance + this.style.Section.text.distance + this.style.Section.text.fontSize; - // } - // } + if (this.line) { + rect = this.line.getBoundingRect(); } return { x: rect.x + rect.width / 2, @@ -873,10 +300,10 @@ export default class Section extends Group { } getBoundingRect() { - if (this.section) { - return this.section.getBoundingRect().clone(); - } else if (this.name) { - return this.name.getBoundingRect().clone(); + if (this.line && this.line.getBoundingRect()) { + return this.line.getBoundingRect().clone(); + } else if (this.name && this.name.getBoundingRect()) { + return this.name.getBoundingRect(); } } @@ -890,10 +317,10 @@ export default class Section extends Group { const path = window.location.href; if (path.includes('/map/draw')) { this.on('mouseout', () => { - !this.selectedType && !this.selected && this.section && this.section.setStyle({ stroke: this.style.Section.line.spareColor, lineWidth: this.style.Section.line.width }); + !this.selectedType && !this.selected && this.line && this.line.setStyle({ stroke: this.style.Section.line.spareColor, lineWidth: this.style.Section.line.width }); }); this.on('mouseover', () => { - !this.selectedType && this.section && this.section.setStyle({ stroke: '#fbfbfb', lineWidth: this.style.Section.line.width - 0.2 }); + !this.selectedType && this.line && this.line.setStyle({ stroke: '#fbfbfb', lineWidth: this.style.Section.line.width - 0.2 }); }); } } @@ -901,10 +328,10 @@ export default class Section extends Group { drawSelected(selected) { this.selected = selected; if (selected) { - if (this.style.Section.line.isActiveShow) { // 哈尔滨线路专属显示 - this.lineBorder && this.lineBorder.setStyle({ lineWidth: this.style.Section.line.width + 3 }); + if (this.lineBorder) { // 哈尔滨线路专属显示 + this.lineBorder.setStyle({ lineWidth: this.style.Section.line.width + 3 }); } else { - !this.selectedType && this.section && this.section.setStyle({ stroke: '#fbfbfb' }); + !this.selectedType && this.line && this.line.setStyle({ stroke: '#fbfbfb' }); } } else { this.lineBorder && this.lineBorder.setStyle({ lineWidth: 0 }); @@ -916,9 +343,9 @@ export default class Section extends Group { return; } if (selected && type) { - this.section && this.section.setStyle({ stroke: drawSectionStyle[type] }); + this.line && this.line.setStyle({ stroke: drawSectionStyle[type] }); } else { - this.section && this.section.setStyle({ stroke: this.style.Section.line.spareColor }); + this.line && this.line.setStyle({ stroke: this.style.Section.line.spareColor }); } this.selectedType = type; } @@ -928,7 +355,7 @@ export default class Section extends Group { } mouseover() { - this.section && this.section.setStyle({ stroke: 'rgba(255,255,255,0.8)' }); + this.line && this.line.setStyle({ stroke: 'rgba(255,255,255,0.8)' }); } setShowMode() { } setShowStation(stationCode) { @@ -938,25 +365,22 @@ export default class Section extends Group { }); this.isShowShape = true; if (this.name) { - if (this.model.type == '01') { - this.model.nameShow && this.style.Section.text.show ? this.name.show() : this.name.hide(); - } else if (this.model.type == '02') { - this.model.nameShow && this.style.Section.logicText.show ? this.name.show() : this.name.hide(); - } else if (this.model.type == '04') { - this.model.nameShow ? this.name.show() : this.name.hide(); - } + this.model.nameShow ? this.name.show() : this.name.hide(); + } + if (this.logicText) { + this.model.nameShow ? this.logicText.show() : this.logicText.hide(); } if (this.transferTrackText) { - this.model.transferTrackNameShow && this.style.Section.transferText.show ? this.transferTrackText.show() : this.transferTrackText.hide(); + this.model.transferTrackNameShow ? this.transferTrackText.show() : this.transferTrackText.hide(); } if (this.standTrackText) { - this.model.standTrackNameShow && this.style.Section.standText.show ? this.standTrackText.show() : this.standTrackText.hide(); + this.model.standTrackNameShow ? this.standTrackText.show() : this.standTrackText.hide(); } if (this.destinationText) { - this.model.destinationNameShow && this.style.Section.destinationText.show ? this.destinationText.show() : this.destinationText.hide(); + this.model.destinationNameShow ? this.destinationText.show() : this.destinationText.hide(); } if (this.reentryTrackText) { - this.model.reentryTrackNameShow && this.style.Section.reentryText.show ? this.reentryTrackText.show() : this.reentryTrackText.hide(); + this.model.reentryTrackNameShow ? this.reentryTrackText.show() : this.reentryTrackText.hide(); } this.setState(this.model); diff --git a/src/jmapNew/shape/StationStand/EDetain.js b/src/jmapNew/shape/StationStand/EDetain.js deleted file mode 100644 index 18db679a2..000000000 --- a/src/jmapNew/shape/StationStand/EDetain.js +++ /dev/null @@ -1,104 +0,0 @@ -import Group from 'zrender/src/container/Group'; -import Text from 'zrender/src/graphic/Text'; -import Circle from 'zrender/src/graphic/shape/Circle'; - -class EDetain extends Group { - constructor(model) { - super(); - this.model = model; - this.detain = null; - this.isNew = false; - } - - create() { - if (!this.isNew) { - const model = this.model.modelData; - const style = this.model.style; - this.isNew = true; - - /** 站台扣车*/ - const detainD = model.right ? 1 : -1; - const detainX = model.position.x - detainD * (style.StationStand.detainCarNormal.offset.x - model.width / 2); - const detainY = model.position.y + detainD * (style.StationStand.detainCarNormal.offset.y - model.height / 2); - - this.detain = new Text({ - zlevel: this.model.zlevel, - z: this.model.z, - position: [0, 0], - style: { - x: detainX, - y: detainY, - text: style.StationStand.detainCarNormal.text, - fontSize: `${style.StationStand.detainCarNormal.fontSize}px`, - fontFamily: style.fontFamily, - textFill: style.StationStand.detainCarNormal.centerTrainColor, - textStroke: style.backgroundColor, - textAlign: style.textStyle.textAlign, - textVerticalAlign: style.StationStand.detainCarNormal.textVerticalAlign || style.textStyle.textVerticalAlign - } - }); - if (style.StationStand.detainCarNormal.circle) { - const offsetX = model.right ? 8 : -8; - this.circleDetain = new Circle({ - zlevel: this.model.zlevel, - z: this.model.z, - shape: { - cx: detainX + offsetX, - cy: detainY - 3, - r: 2 - }, - style: { - fill: '#000', - lineWidth: 1, - stroke: '#FFF' - } - }); - this.add(this.circleDetain); - } - this.add(this.detain); - } - } - - setColor(color) { - this.create(); - this.detain.setStyle('textFill', color); - } - - recover() { - this.hideMode(); - } - - hideMode() { - this.detain && this.detain.hide(); - this.circleDetain && this.circleDetain.hide(); - } - - showMode() { - this.create(); - this.detain && this.detain.show(); - this.circleDetain && this.circleDetain.show(); - } - - holdTrain(type) { - const style = this.model.style; - switch (type) { - case 'centerAndTrain': { - this.showMode(); - this.setColor(style.StationStand.detainCarNormal.andCenterTrainColor); - break; - } - case 'centerDetain': { - this.showMode(); - this.setColor(style.StationStand.detainCarNormal.centerTrainColor); - break; - } - case 'trainDetain': { - this.showMode(); - this.setColor(style.StationStand.detainCarNormal.detainTrainTextColor); - break; - } - } - } -} - -export default EDetain; diff --git a/src/jmapNew/shape/StationStand/EJump.js b/src/jmapNew/shape/StationStand/EJump.js deleted file mode 100644 index 0c99d7f06..000000000 --- a/src/jmapNew/shape/StationStand/EJump.js +++ /dev/null @@ -1,83 +0,0 @@ -import Group from 'zrender/src/container/Group'; -import Text from 'zrender/src/graphic/Text'; -import Arc from 'zrender/src/graphic/shape/Arc'; - -class EJump extends Group { - constructor(model) { - super(); - this.model = model; - this.isNew = false; - } - create() { - if (!this.isNew) { - const model = this.model.modelData; - const style = this.model.style; - this.isNew = true; - - const jumpDirct = model.right ? -1 : 1; - const jumpX = model.position.x - jumpDirct * (style.StationStand.jump.offset.x - model.width / 2); - const jumpY = model.position.y + jumpDirct * style.StationStand.jump.offset.y; - const jumpCX = model.position.x - jumpDirct * (style.StationStand.jump.offset.x - model.width / 2); - const jumpCY = model.position.y + jumpDirct * style.StationStand.jump.offset.y; - - this.jump = new Text({ - zlevel: this.model.zlevel, - z: this.model.z, - style: { - x: jumpX, - y: jumpY, - fontWeight: style.StationStand.jump.fontWeight, - fontSize: style.StationStand.jump.fontSize, - fontFamily: style.fontFamily, - text: style.StationStand.jump.text, - textFill: style.StationStand.jump.textColor, - textAlign: style.textStyle.textAlign, - textVerticalAlign: style.textStyle.textVerticalAlign - } - }); - this.add(this.jump); - if (style.StationStand.jump.r) { - this.jumpArc = new Arc({ - zlevel: this.model.zlevel, - z: this.model.z, - shape: { - cx: jumpCX, - cy: jumpCY, - r: style.StationStand.jump.r - }, - style: { - stroke: style.StationStand.jump.arcColor, - fill: style.StationStand.jump.fillColor - } - }); - this.add(this.jumpArc); - this.jumpArc.hide(); - } - } - } - - setColor(color) { - this.create(); - this.jump.setStyle('textFill', color); - } - - hideMode() { - this.jump && this.jump.hide(); - this.jumpArc && this.jumpArc.hide(); - } - - showMode(isAllJump) { - this.create(); - if (isAllJump) { // 站台跳停 - this.jump.show(); - this.jumpArc && this.jumpArc.show(); - } else { // 指定列车跳停 - this.jump.show(); - } - } - recover() { - this.hideMode(); - } -} - -export default EJump; diff --git a/src/jmapNew/shape/StationStand/ELevel.js b/src/jmapNew/shape/StationStand/ELevel.js index b333161b8..4b35fb63f 100644 --- a/src/jmapNew/shape/StationStand/ELevel.js +++ b/src/jmapNew/shape/StationStand/ELevel.js @@ -40,7 +40,6 @@ class ELevel extends Group { } setName(val) { - this.create(); this.level.setStyle('text', val); } @@ -61,6 +60,13 @@ class ELevel extends Group { recover() { this.hideMode(); } + setState(model) { + // 运行等级 + if (Number(model.runLevelTime) > 0) { + this.showMode(); + this.setName(model.runLevelTime); + } + } } export default ELevel; diff --git a/src/jmapNew/shape/StationStand/EPatternFilter.js b/src/jmapNew/shape/StationStand/EPatternFilter.js index d6531a837..e29c4c863 100644 --- a/src/jmapNew/shape/StationStand/EPatternFilter.js +++ b/src/jmapNew/shape/StationStand/EPatternFilter.js @@ -58,6 +58,10 @@ class EPatternFilter extends Group { recover() { } + + setState(model) { + + } } export default EPatternFilter; diff --git a/src/jmapNew/shape/StationStand/EReentry.js b/src/jmapNew/shape/StationStand/EReentry.js index 647143ad5..f9f9b821d 100644 --- a/src/jmapNew/shape/StationStand/EReentry.js +++ b/src/jmapNew/shape/StationStand/EReentry.js @@ -54,15 +54,26 @@ class EReentry extends Group { this.hideMode(); } - execOperation(type) { + setState(model) { const style = this.model.style; - switch (type) { - case 'noHumanReentry': { - this.showMode(); + let reentryStrategy = ''; + if (model.reentryStrategy !== '04') { + reentryStrategy = model.reentryStrategy; + } else { + reentryStrategy = model.defaultReentryStrategy; + } + switch (reentryStrategy) { + case '04': /** 默认*/ + case '01': { + this.reentry && this.reentry.hideMode(); /** 无折返策略*/ + break; + } + case '02': { + this.showMode(); /** 无人折返*/ this.setColor(style.StationStand.reentry.noHumanColor); break; } - case 'autoChangeEnds': { + case '03':/** 自动换端*/ { this.showMode(); this.setColor(style.StationStand.reentry.autoChangeEndsColor); break; diff --git a/src/jmapNew/shape/StationStand/ESafeEmergent.js b/src/jmapNew/shape/StationStand/ESafeEmergent.js deleted file mode 100644 index d0d32dca0..000000000 --- a/src/jmapNew/shape/StationStand/ESafeEmergent.js +++ /dev/null @@ -1,135 +0,0 @@ -import Group from 'zrender/src/container/Group'; -import Isogon from 'zrender/src/graphic/shape/Isogon'; -import Polygon from 'zrender/src/graphic/shape/Polygon'; -import Line from 'zrender/src/graphic/shape/Line'; -import {arrow} from '../utils/ShapePoints'; - -class ESafeEmergent extends Group { - constructor(model) { - super(); - this.model = model; - this.isNew = false; - if (this.model.style.StationStand.emergent.special) { - this.create(); - } - } - - create() { - if (!this.isNew) { - const model = this.model.modelData; - const style = this.model.style; - - const emergentOffset = model.inside ? style.StationStand.emergent.insideOffset : style.StationStand.emergent.outsideOffset; - const emergentH = model.right ? 1 : -1; - const emergentX = model.position.x + emergentH * emergentOffset.x; - const emergentY = model.position.y + emergentH * emergentOffset.y; - - model.r = style.StationStand.emergent.mergentR; - model.n = style.StationStand.emergent.mergentN; - this.isNew = true; - if (style.StationStand.emergent.radiusR) { - const rotation = model.right == 1 ? Math.PI / 2 : Math.PI * 3 / 2; - this.emergent = new Polygon({ - zlevel: this.model.zlevel, - z: this.model.z, - origin: [emergentX, emergentY], - rotation: rotation, - shape: { - points: arrow(emergentX, emergentY, style.StationStand.emergent.width, style.StationStand.emergent.radiusR * 0.8) - }, - style: { - stroke: style.StationStand.emergent.closeColor, - fill: style.StationStand.emergent.closeColor - } - }); - this.add(this.emergent); - } else { - this.emergent = new Isogon({ - zlevel: this.model.zlevel, - z: this.model.z, - shape: { - x: emergentX, - y: emergentY, - r: model.r, - n: model.n - }, - style: { - lineWidth: 0 - } - }); - if (style.StationStand.emergent.special) { - this.emergent.setStyle('lineWidth', 2); - this.emergent.setStyle('stroke', style.StationStand.emergent.defaultColor); - } else { - this.emergent.setStyle('stroke', style.StationStand.emergent.closeColor); - this.emergent.setStyle('fill', style.StationStand.emergent.closeColor); - } - this.add(this.emergent); - if (style.StationStand.emergent.special) { - // r*Math.r*cos(Math.PI/180*22.5) - // Math.sin(Math.PI/180*50) - // Math.cos(Math.PI/180*50) - this.emergent.rotation = Math.PI / 8; - this.emergent.origin = [emergentX, emergentY]; - this.emergent.dirty(); - this.emergentLine1 = new Line({ - zlevel: this.model.zlevel, - z: this.model.z, - shape:{ - x1:emergentX - model.r * 0.5939, - y1:emergentY - model.r * 0.7077, - x2:emergentX + model.r * 0.5939, - y2:emergentY + model.r * 0.7077 - }, - style:{ - lineWidth:2, - stroke:style.StationStand.emergent.defaultColor - } - }); - this.emergentLine2 = new Line({ - zlevel: this.model.zlevel, - z: this.model.z, - shape:{ - x1:emergentX + model.r * 0.5939, - y1:emergentY - model.r * 0.7077, - x2:emergentX - model.r * 0.5939, - y2:emergentY + model.r * 0.7077 - }, - style:{ - lineWidth:2, - stroke:style.StationStand.emergent.defaultColor - } - }); - this.add(this.emergentLine1); - this.add(this.emergentLine2); - } - } - } - } - - hideMode() { - if (!this.model.style.StationStand.emergent.special) { - this.emergent && this.emergent.hide(); - } - } - - showMode() { - this.create(); - this.emergent.show(); - } - - getElement() { - return this.emergent; - } - - recover() { - this.hideMode(); - } - - // emergencyClosed() { - // this.showMode(); - // } - -} - -export default ESafeEmergent; diff --git a/src/jmapNew/shape/StationStand/ESafeStand/index.js b/src/jmapNew/shape/StationStand/ESafeStand/index.js deleted file mode 100644 index c6f7a61bf..000000000 --- a/src/jmapNew/shape/StationStand/ESafeStand/index.js +++ /dev/null @@ -1,98 +0,0 @@ -import Group from 'zrender/src/container/Group'; -import Rect from 'zrender/src/graphic/shape/Rect'; -import EGapStand from './EGapStand'; - -class ESafeStand extends Group { - constructor(model) { - super(); - this.model = model; - this.create(); - } - - create() { - const model = this.model.modelData; - const style = this.model.style; - const standX = model.position.x - model.width / 2; - const standY = model.position.y - model.height / 2; - - // model.x /y 是整个坐标左上角起点 - if (style.StationStand.safeStand.special) { - // 有间隔的站台 哈尔滨线路暂时使用 - this.gapStand = new EGapStand({ - zlevel: this.model.zlevel, - z: this.model.z + 2, - x:standX, - y:standY, - style:style, - width:model.width, - height:model.height, - inside:model.inside, - right:model.right, - name:model.name - }); - this.add(this.gapStand); - } else { - this.stand = new Rect({ - zlevel: this.model.zlevel, - z: this.model.z, - shape: { - x: standX, - y: standY, - width: model.width, - height: model.height - }, - style: { - lineWidth: style.StationStand.safeStand.lineWidth || 0, - stroke: style.StationStand.safeStand.spareStrokeColor || style.sidelineColor - } - }); - if (style.StationStand.safeStand.standType && style.StationStand.safeStand.standType == 'notFill') { - this.stand && this.stand.setStyle('lineWidth', 2); - } else { - this.stand && this.stand.setStyle('fill', style.StationStand.safeStand.spareColor); - } - this.add(this.stand); - } - } - - setColor(color) { - const style = this.model.style; - if (style.StationStand.safeStand.standType && style.StationStand.safeStand.standType == 'notFill') { - this.stand && this.stand.setStyle('stroke', color); - } else { - this.stand && this.stand.setStyle('fill', color); - } - } - - recover() { - const style = this.model.style; - if (!style.StationStand.safeStand.special) { - this.setColor(style.StationStand.safeStand.spareColor); - } - } - - execOperation(type) { - const style = this.model.style; - switch (type) { - case 'designatedJumpStop': { - this.setColor(style.StationStand.safeStand.designatedJumpStopColor); - break; - } - case 'jumpStop': { - this.setColor(style.StationStand.safeStand.jumpStopColor); - break; - } - case 'trainStop': { - this.setColor(style.StationStand.safeStand.stopColor); - break; - } - } - } - - // trainParking() { - // this.execOperation('trainStop'); - // } - -} - -export default ESafeStand; diff --git a/src/jmapNew/shape/StationStand/ETime.js b/src/jmapNew/shape/StationStand/ETime.js index 1cad1dbe0..7b1ed0a62 100644 --- a/src/jmapNew/shape/StationStand/ETime.js +++ b/src/jmapNew/shape/StationStand/ETime.js @@ -38,7 +38,6 @@ class ETime extends Group { } setName(val) { - this.create(); this.time.setStyle('text', val); } @@ -59,6 +58,14 @@ class ETime extends Group { recover() { this.hideMode(); } + + setState(model) { + // 停站时间 + if (Number(model.parkingTime) > 0) { + this.showMode(); + this.setName(model.parkingTime); + } + } } export default ETime; diff --git a/src/jmapNew/shape/StationStand/ETrainDepart.js b/src/jmapNew/shape/StationStand/ETrainDepart.js index e1e8ba68d..a3ac22737 100644 --- a/src/jmapNew/shape/StationStand/ETrainDepart.js +++ b/src/jmapNew/shape/StationStand/ETrainDepart.js @@ -60,6 +60,11 @@ class ETrainDepart extends Group { recover() { this.hideMode(); } + + setState(model) { + // 停车 + model.trainParking && this.showMode(model.remainTime); + } } export default ETrainDepart; diff --git a/src/jmapNew/shape/StationStand/ETrainStop.js b/src/jmapNew/shape/StationStand/ETrainStop.js index 3e64b92b9..e4271141d 100644 --- a/src/jmapNew/shape/StationStand/ETrainStop.js +++ b/src/jmapNew/shape/StationStand/ETrainStop.js @@ -53,6 +53,11 @@ class ETrainStop extends Group { recover() { this.hideMode(); } + + setState(model) { + // 停车 + model.trainParking && this.showMode(); + } } export default ETrainStop; diff --git a/src/jmapNew/shape/StationStand/detain/EDetain.js b/src/jmapNew/shape/StationStand/detain/EDetain.js new file mode 100644 index 000000000..9b838771e --- /dev/null +++ b/src/jmapNew/shape/StationStand/detain/EDetain.js @@ -0,0 +1,75 @@ +import Group from 'zrender/src/container/Group'; +import Text from 'zrender/src/graphic/Text'; + +class EDetain extends Group { + constructor(model) { + super(); + this.model = model; + this.detain = null; + this.isNew = false; + } + + create(deviceParam) { + if (!this.isNew) { + const model = this.model.modelData; + const style = this.model.style; + this.isNew = true; + + /** 站台扣车*/ + const detainD = model.right ? 1 : -1; + const detainX = model.position.x - detainD * (deviceParam.offset.x - model.width / 2); + const detainY = model.position.y + detainD * (deviceParam.offset.y - model.height / 2); + + this.detain = new Text({ + zlevel: this.model.zlevel, + z: this.model.z, + position: [0, 0], + style: { + x: detainX, + y: detainY, + text: deviceParam.text, + fontSize: `${deviceParam.fontSize}px`, + fontFamily: style.fontFamily, + textFill: deviceParam.centerTrainColor, + textStroke: style.backgroundColor, + textAlign: style.textStyle.textAlign, + textVerticalAlign: deviceParam.textVerticalAlign || style.textStyle.textVerticalAlign + } + }); + this.add(this.detain); + } + } + + setColor(color) { + this.detain.setStyle('textFill', color); + } + + recover() { + this.hideMode(); + } + + hideMode() { + this.detain && this.detain.hide(); + } + + showMode(deviceParam) { + this.create(deviceParam); + this.detain && this.detain.show(); + } + + setState(model, deviceParam = this.model.style.StationStand.detainNormal) { + /** 设置扣车*/ + if (model.stationHoldTrain && model.centerHoldTrain) { + this.showMode(deviceParam); + this.setColor(deviceParam.andCenterTrainColor); + } else if (model.stationHoldTrain) { + this.showMode(deviceParam); + this.setColor(deviceParam.detainTrainTextColor); + } else if (model.centerHoldTrain) { + this.showMode(deviceParam); + this.setColor(deviceParam.centerTrainColor); + } + } +} + +export default EDetain; diff --git a/src/jmapNew/shape/StationStand/EDetainCircle.js b/src/jmapNew/shape/StationStand/detain/EDetainCircle.js similarity index 92% rename from src/jmapNew/shape/StationStand/EDetainCircle.js rename to src/jmapNew/shape/StationStand/detain/EDetainCircle.js index 118a9a079..09b5bcba6 100644 --- a/src/jmapNew/shape/StationStand/EDetainCircle.js +++ b/src/jmapNew/shape/StationStand/detain/EDetainCircle.js @@ -76,21 +76,15 @@ class EDetainCircle extends Group { this.setColor(style.StationStand.detainCircle.defaultColor); } - holdTrain(type) { + setState(model) { const style = this.model.style; - switch (type) { - case 'centerAndTrain': { + /** 设置扣车*/ + if (model.stationHoldTrain && model.centerHoldTrain) { this.setColor(style.StationStand.detainCircle.centerTrainColor); - break; - } - case 'centerDetain': { + } else if (model.stationHoldTrain) { this.setColor(style.StationStand.detainCircle.centerTrainColor); - break; - } - case 'trainDetain': { + } else if (model.centerHoldTrain) { this.setColor(style.StationStand.detainCircle.centerTrainColor); - break; - } } } } diff --git a/src/jmapNew/shape/StationStand/detain/EDetainHollow.js b/src/jmapNew/shape/StationStand/detain/EDetainHollow.js new file mode 100644 index 000000000..e23a9bc8a --- /dev/null +++ b/src/jmapNew/shape/StationStand/detain/EDetainHollow.js @@ -0,0 +1,63 @@ +import Circle from 'zrender/src/graphic/shape/Circle'; +import EDetain from './EDetain'; + +class EDetainHollow extends EDetain { + constructor(model) { + super(); + this.model = model; + this.isNew = false; + } + + create() { + const model = this.model.modelData; + const style = this.model.style; + /** 站台扣车*/ + const detainD = model.right ? 1 : -1; + const detainX = model.position.x - detainD * (style.StationStand.detainHollow.offset.x - model.width / 2); + const detainY = model.position.y + detainD * (style.StationStand.detainHollow.offset.y - model.height / 2); + if (!this.isNew) { + super.create(style.StationStand.detainHollow); + const offsetX = model.right ? 8 : -8; + this.circleDetain = new Circle({ + zlevel: this.model.zlevel, + z: this.model.z, + shape: { + cx: detainX + offsetX, + cy: detainY - 3, + r: 2 + }, + style: { + fill: '#000', + lineWidth: 1, + stroke: '#FFF' + } + }); + this.add(this.circleDetain); + this.isNew = true; + } + } + + setColor(color) { + super.setColor(color); + } + + recover() { + this.hideMode(); + } + + hideMode() { + super.hideMode(); + this.circleDetain && this.circleDetain.hide(); + } + + showMode(deviceType) { + super.showMode(deviceType); + this.circleDetain && this.circleDetain.show(); + } + + setState(model) { + super.setState(model, this.model.style.StationStand.detainHollow); + } + +} +export default EDetainHollow; diff --git a/src/jmapNew/shape/StationStand/EDetainRect.js b/src/jmapNew/shape/StationStand/detain/EDetainRect.js similarity index 89% rename from src/jmapNew/shape/StationStand/EDetainRect.js rename to src/jmapNew/shape/StationStand/detain/EDetainRect.js index 9eb75c5c5..103add84e 100644 --- a/src/jmapNew/shape/StationStand/EDetainRect.js +++ b/src/jmapNew/shape/StationStand/detain/EDetainRect.js @@ -57,24 +57,18 @@ class EDetainCircle extends Group { this.setHide(); } - holdTrain(type) { + setState(model) { const style = this.model.style; - switch (type) { - case 'centerAndTrain': { + /** 设置扣车*/ + if (model.stationHoldTrain && model.centerHoldTrain) { this.showMode(); this.setColor(style.StationStand.detainRect.centerTrainColor); - break; - } - case 'centerDetain': { - this.showMode(); - this.setColor(style.StationStand.detainRect.centerTrainColor); - break; - } - case 'trainDetain': { + } else if (model.stationHoldTrain) { this.showMode(); this.setColor(style.StationStand.detainRect.detainTrainTextColor); - break; - } + } else if (model.centerHoldTrain) { + this.showMode(); + this.setColor(style.StationStand.detainRect.centerTrainColor); } } } diff --git a/src/jmapNew/shape/StationStand/emergent/EEmergentArrow.js b/src/jmapNew/shape/StationStand/emergent/EEmergentArrow.js new file mode 100644 index 000000000..2fd49e6a2 --- /dev/null +++ b/src/jmapNew/shape/StationStand/emergent/EEmergentArrow.js @@ -0,0 +1,59 @@ +import Group from 'zrender/src/container/Group'; +import Polygon from 'zrender/src/graphic/shape/Polygon'; +import {arrow} from '../../utils/ShapePoints'; + +class EEmergentArrow extends Group { + constructor(model) { + super(); + this.model = model; + this.isNew = false; + this.create(); + } + + create() { + if (!this.isNew) { + const model = this.model.modelData; + const style = this.model.style; + + const emergentOffset = model.inside ? style.StationStand.emergentArrow.insideOffset : style.StationStand.emergentArrow.outsideOffset; + const emergentH = model.right ? 1 : -1; + const emergentX = model.position.x + emergentH * emergentOffset.x; + const emergentY = model.position.y + emergentH * emergentOffset.y; + + const rotation = model.right == 1 ? Math.PI / 2 : Math.PI * 3 / 2; + this.emergent = new Polygon({ + zlevel: this.model.zlevel, + z: this.model.z, + origin: [emergentX, emergentY], + rotation: rotation, + shape: { + points: arrow(emergentX, emergentY, style.StationStand.emergentArrow.width, style.StationStand.emergentArrow.radiusR * 0.8) + }, + style: { + stroke: style.StationStand.emergentArrow.closeColor, + fill: style.StationStand.emergentArrow.closeColor + } + }); + this.add(this.emergent); + } + } + + recover() { + this.hideMode(); + } + + setState(model) { + // 紧急停车 + model.emergencyClosed && this.showMode(); + } + + hideMode() { + this.emergent && this.emergent.hide(); + } + + showMode() { + this.create(); + this.emergent.show(); + } +} +export default EEmergentArrow; diff --git a/src/jmapNew/shape/StationStand/emergent/EEmergentCross.js b/src/jmapNew/shape/StationStand/emergent/EEmergentCross.js new file mode 100644 index 000000000..9060d3733 --- /dev/null +++ b/src/jmapNew/shape/StationStand/emergent/EEmergentCross.js @@ -0,0 +1,102 @@ +import Group from 'zrender/src/container/Group'; +import Isogon from 'zrender/src/graphic/shape/Isogon'; +import Line from 'zrender/src/graphic/shape/Line'; + +class EEmergentCross extends Group { + constructor(model) { + super(); + this.model = model; + this.isNew = false; + this.create(); + } + + create() { + const model = this.model.modelData; + const style = this.model.style; + + const emergentOffset = model.inside ? style.StationStand.emergentCross.insideOffset : style.StationStand.emergentCross.outsideOffset; + const emergentH = model.right ? 1 : -1; + const emergentX = model.position.x + emergentH * emergentOffset.x; + const emergentY = model.position.y + emergentH * emergentOffset.y; + + model.r = style.StationStand.emergentCross.mergentR; + model.n = style.StationStand.emergentCross.mergentN; + + this.emergent = new Isogon({ + zlevel: this.model.zlevel, + z: this.model.z, + shape: { + x: emergentX, + y: emergentY, + r: model.r, + n: model.n + }, + style: { + lineWidth: 2, + stroke:style.StationStand.emergentCross.defaultColor + } + }); + this.add(this.emergent); + + this.emergent.rotation = Math.PI / 8; + this.emergent.origin = [emergentX, emergentY]; + this.emergent.dirty(); + this.emergentLine1 = new Line({ + zlevel: this.model.zlevel, + z: this.model.z, + shape:{ + x1:emergentX - model.r * 0.5939, + y1:emergentY - model.r * 0.7077, + x2:emergentX + model.r * 0.5939, + y2:emergentY + model.r * 0.7077 + }, + style:{ + lineWidth:2, + stroke:style.StationStand.emergentCross.defaultColor + } + }); + this.emergentLine2 = new Line({ + zlevel: this.model.zlevel, + z: this.model.z, + shape:{ + x1:emergentX + model.r * 0.5939, + y1:emergentY - model.r * 0.7077, + x2:emergentX - model.r * 0.5939, + y2:emergentY + model.r * 0.7077 + }, + style:{ + lineWidth:2, + stroke:style.StationStand.emergentCross.defaultColor + } + }); + this.add(this.emergentLine1); + this.add(this.emergentLine2); + } + + hideMode() { + const style = this.model.style; + this.setStyle(style.StationStand.emergentCross.defaultColor); + } + + setStyle(color) { + this.emergent.setStyle('stroke', color); + this.emergentLine1.setStyle('stroke', color); + this.emergentLine2.setStyle('stroke', color); + } + + recover() { + this.hideMode(); + } + + setState(model) { + // 紧急停车 + model.emergencyClosed && this.showMode(); + } + + showMode() { + const style = this.model.style; + this.setStyle(style.StationStand.emergentCross.closeColor); + } +} + +export default EEmergentCross; diff --git a/src/jmapNew/shape/StationStand/emergent/EEmergentRhombus.js b/src/jmapNew/shape/StationStand/emergent/EEmergentRhombus.js new file mode 100644 index 000000000..d3934e729 --- /dev/null +++ b/src/jmapNew/shape/StationStand/emergent/EEmergentRhombus.js @@ -0,0 +1,69 @@ +import Group from 'zrender/src/container/Group'; +import Isogon from 'zrender/src/graphic/shape/Isogon'; + +class EEmergentRhombus extends Group { + constructor(model) { + super(); + this.model = model; + this.isNew = false; + } + + create() { + if (!this.isNew) { + const model = this.model.modelData; + const style = this.model.style; + + const emergentOffset = model.inside ? style.StationStand.emergentRhombus.insideOffset : style.StationStand.emergentRhombus.outsideOffset; + const emergentH = model.right ? 1 : -1; + const emergentX = model.position.x + emergentH * emergentOffset.x; + const emergentY = model.position.y + emergentH * emergentOffset.y; + + model.r = style.StationStand.emergentRhombus.mergentR; + model.n = style.StationStand.emergentRhombus.mergentN; + + this.emergent = new Isogon({ + zlevel: this.model.zlevel, + z: this.model.z, + shape: { + x: emergentX, + y: emergentY, + r: model.r, + n: model.n + }, + style: { + lineWidth: 0, + stroke:style.StationStand.emergentRhombus.closeColor, + fill:style.StationStand.emergentRhombus.closeColor + } + }); + this.add(this.emergent); + } + } + + hideMode() { + this.emergent && this.emergent.hide(); + } + + recover() { + this.hideMode(); + } + + setState(model) { + // 紧急停车 + model.emergencyClosed && this.showMode(); + } + + showMode() { + this.create(); + this.emergent.show(); + if (this.model.style.StationStand.emergentRhombus.flicker) { + this.emergent.getElement().animateStyle(true) + .when(0, { fill: this.style.backgroundColor }) + .when(1000, { fill: this.style.StationStand.emergentRhombus.closeColor }) + .when(2000, { fill: this.style.backgroundColor }) + .start(); + } + } +} + +export default EEmergentRhombus; diff --git a/src/jmapNew/shape/StationStand/index.js b/src/jmapNew/shape/StationStand/index.js index e29731f37..dde33a609 100644 --- a/src/jmapNew/shape/StationStand/index.js +++ b/src/jmapNew/shape/StationStand/index.js @@ -1,20 +1,36 @@ import Group from 'zrender/src/container/Group'; +// 站台元素 +import ESolidStand from './safeStand/ESolidStand'; +import EHollowStand from './safeStand/EHollowStand'; +import EGapStand from './safeStand/EGapStand'; +// 扣车元素 +import EDetain from './detain/EDetain'; +import EDetainHollow from './detain/EDetainHollow'; +import EDetainCircle from './detain/EDetainCircle'; +import EDetainRect from './detain/EDetainRect'; +// 跳停元素 +import EJump from './jump/EJump'; +import EJumpCircle from './jump/EJumpCircle'; + import ETime from './ETime'; import ELevel from './ELevel'; import EReentry from './EReentry'; -import EDetain from './EDetain'; -import ESafeStand from './ESafeStand/index'; -import ESafeEmergent from './ESafeEmergent'; + +// 紧急停车 +import EEmergentCross from './emergent/EEmergentCross'; +import EEmergentArrow from './emergent/EEmergentArrow'; +import EEmergentRhombus from './emergent/EEmergentRhombus'; + import EMouse from './EMouse'; -import EJump from './EJump'; + import EHighlight from '../element/EHighlight'; import ETrainStop from './ETrainStop'; import ETrainDepart from './ETrainDepart'; import EControl from '../element/EControl'; -import EDetainCircle from './EDetainCircle'; -import EDetainRect from './EDetainRect'; + import EPatternFilter from './EPatternFilter'; import {isShowThePrdType} from '../../utils/handlePath'; +import {traverseLineElements} from '../utils/ShapeStatusCovert'; class StationStand extends Group { constructor(model, style) { @@ -43,31 +59,32 @@ class StationStand extends Group { const style = this.style; // // 站台所有的绘图元素 const elementTypeList = { - 'safeStand':ESafeStand, // 列车站台图形 - 'emergent':ESafeEmergent, // 站台紧急关闭 - 'detainCarNormal':EDetain, // 普通扣车图标 + 'solidStand':ESolidStand, // 矩形实心站台 （普通站台样式） + 'hollowStand':EHollowStand, // 矩形空心站台 （西安二号线站台样式） + 'gapStand':EGapStand, // 分割站台（哈尔滨站台特有） + + 'emergentCross':EEmergentCross, // 站台紧急关闭 西安二号线 正八边形 + 'emergentArrow':EEmergentArrow, // 站台紧急关闭 哈尔滨 箭头型 + 'emergentRhombus':EEmergentRhombus, // 站台紧急关闭 普通 菱形 + + 'jump':EJump, // 列车跳停 + 'jumpCircle':EJumpCircle, // 列车跳停(带圆圈) + + 'detainNormal':EDetain, // 普通扣车图标 + 'detainHollow':EDetainHollow, // 含空心圆的扣车图标 'detainCircle':EDetainCircle, // 圆形扣车图标 'detainRect':EDetainRect, // 矩形扣车图标 + 'stopTime':ETime, // 停站时间 'level':ELevel, // 运行等级 'patternFilter':EPatternFilter, // 模式筛选标识(西安二号线特殊的情况) - 'jump':EJump, // 列车停跳 + 'reentry':EReentry, // 站台折返策略 - 'trainStop':ETrainStop, // 列车停站 - 'trainDepart':ETrainDepart// 列车出发 + 'trainStop':ETrainStop, // 列车停车点标识 哈尔滨一号线 + 'trainDepart':ETrainDepart// 列车停站时间 哈尔滨一号线 }; - // 遍历当前线路下的绘图元素 - const currentTypeList = style.StationStand.elemnetType; - currentTypeList.forEach(element => { - const ClassName = elementTypeList[element]; - this[element] = new ClassName({ - zlevel: this.zlevel, - z: this.z + style.StationStand[element].z, - style: style, - modelData:model - }); - this.add(this[element]); - }); + // 遍历当前线路下的绘图元素 组合模式 + traverseLineElements(style.StationStand, elementTypeList, model, style, this); } createMouseEvent() { @@ -203,6 +220,7 @@ class StationStand extends Group { this.add(this.downDetainLampButton); } } + setVisible(visible) { if (visible) { this.eachChild(elem => { elem.show(); }); @@ -219,169 +237,21 @@ class StationStand extends Group { }); } - /** 列车停站*/ - stop() { - if (!this.style.StationStand.safeStand.special) { - this.safeStand && this.safeStand.execOperation('trainStop'); - } else { - this.trainStop && this.trainStop.showMode(); - this.trainDepart && this.trainDepart.showMode(this.model.remainTime); - } - } - - /** 车门开启 */ - doorOpen() { - if (this.style.StationStand.safeStand.doorOpenColor) { - this.safeStand && this.safeStand.setColor(this.style.StationStand.safeStand.doorOpenColor); - } - } - - /** 站台紧急关闭*/ - emergentClose() { - if (!this.style.StationStand.safeStand.special) { - this.safeStand && this.safeStand.setColor(this.style.StationStand.safeStand.spareColor); - } - this.emergent && this.emergent.showMode(); - if (this.style.StationStand.emergent.flicker) { - this.emergent.getElement().animateStyle(true) - .when(0, { fill: this.style.backgroundColor }) - .when(1000, { fill: this.style.StationStand.emergent.closeColor }) - .when(2000, { fill: this.style.backgroundColor }) - .start(); - } - } - - /** 指定列车跳站*/ - designatedJumpStop() { - this.safeStand && this.safeStand.execOperation('designatedJumpStop'); - this.jump && this.jump.showMode(0); - } - - /** 站台跳停*/ - jumpStop() { - this.safeStand && this.safeStand.execOperation('jumpStop'); - this.jump && this.jump.showMode(1); - } - - /** 车站扣车*/ - standDetainTrain() { - this.detainCarNormal && this.detainCarNormal.holdTrain('trainDetain'); - this.detainCircle && this.detainCircle.holdTrain('trainDetain'); - this.detainRect && this.detainRect.holdTrain('trainDetain'); - } - - /** 中心扣车*/ - centerDetainTrain() { - this.detainCarNormal && this.detainCarNormal.holdTrain('centerDetain'); - this.detainRect && this.detainRect.holdTrain('centerDetain'); - this.detainCircle && this.detainCircle.holdTrain('centerDetain'); - } - - /** 中心+车站扣车*/ - standAndCenterDetainTrain() { - this.detainCarNormal && this.detainCarNormal.holdTrain('centerAndTrain'); - this.detainRect && this.detainRect.holdTrain('centerAndTrain'); - this.detainCircle && this.detainCircle.holdTrain('centerAndTrain'); - } - - /** 人工设置停战时间*/ - setManuallyArmisticeTime(val) { - this.stopTime && this.stopTime.showMode(); - this.stopTime && this.stopTime.setName(val); - } - - /** 人工设置运行等级*/ - setManuallyOperationLevel(val) { - this.level && this.level.showMode(); - this.level && this.level.setName(val); - } - - /** 无折返(默认)*/ - noReentry() { - this.reentry && this.reentry.hideMode(); - } - - /** 无人折返*/ - noHumanReentry() { - this.reentry && this.reentry.execOperation('noHumanReentry'); - } - /** 自动换端*/ - autoChangeEnds() { - this.reentry && this.reentry.execOperation('autoChangeEnds'); - } - setState(model) { if (!this.isShowShape) return; // // 新版地图使用新版状态变更方式 this.recover(); - // const style = this.style; - // const statusList = style.StationStand.relatedStatus; - // const paramNameList = Object.keys(statusList); - // paramNameList.forEach(element => { - // if (model[element].type == Boolean) { - // statusList[element].data.forEach(modelName=>{ - // this[modelName][element()]; - // }); - // } - // }); - - // // // // style.StationStand[element].relatedStatus - // // // let currentMode={}; - // // // currentMode[]=model[] - // // // this[element].setState(); - // }); - // model.trainParking && style.StationStand.relatedStatus['trainParking'].forEach(modelName=>{ this[modelName].trainParking(); }); - - model.trainParking && this.stop(); /** 列车停站*/ - model.emergencyClosed && this.emergentClose(); /** 站台紧急关闭*/ - - model.trainParking && this.doorOpen(); /** 车门开启 （西安二号线样式）*/ - - if (Number(model.parkingTime) > 0) { - this.setManuallyArmisticeTime(model.parkingTime); // 设置站台停车时间 - } - - if (Number(model.runLevelTime) > 0) { - this.setManuallyOperationLevel(model.runLevelTime); // 设置站台间运行等级 - } - - /** 设置跳停*/ - model.assignSkip && this.designatedJumpStop(); // 指定列车跳停 - model.allSkip && this.jumpStop(); // 站台全部跳停 - - /** 设置扣车*/ - if (model.stationHoldTrain && model.centerHoldTrain) { - this.standAndCenterDetainTrain(); // 中心+车站扣车 - } else if (model.stationHoldTrain) { - this.standDetainTrain(); // 车站扣车 - } else if (model.centerHoldTrain) { - this.centerDetainTrain(); // 中心扣车 - } - - /** 设置折返策略*/ - let reentryStrategy = ''; - if (model.reentryStrategy !== '04') { - reentryStrategy = model.reentryStrategy; - } else { - reentryStrategy = model.defaultReentryStrategy; - } - switch (reentryStrategy) { - case '04': /** 默认*/ - case '01': - this.noReentry(); /** 无折返策略*/ - break; - case '02': - this.noHumanReentry(); /** 无人折返*/ - break; - case '03': - this.autoChangeEnds(); /** 自动换端*/ - break; - } + // 更新状态 + const currentTypeList = this.style.StationStand.elemnetType; + currentTypeList.forEach(element => { + this[element].setState(model); + }); } getBoundingRect() { - const rect = this.safeStand.getBoundingRect().clone(); + const element = this.style.StationStand.elemnetType[0]; + const rect = this[element].getBoundingRect().clone(); return rect; } diff --git a/src/jmapNew/shape/StationStand/jump/EJump.js b/src/jmapNew/shape/StationStand/jump/EJump.js new file mode 100644 index 000000000..1cd20c1d4 --- /dev/null +++ b/src/jmapNew/shape/StationStand/jump/EJump.js @@ -0,0 +1,64 @@ +import Group from 'zrender/src/container/Group'; +import Text from 'zrender/src/graphic/Text'; + +class EJump extends Group { + constructor(model) { + super(); + this.model = model; + this.isNew = false; + } + create(deviceParam) { + if (!this.isNew) { + const model = this.model.modelData; + const style = this.model.style; + this.isNew = true; + + const jumpDirct = model.right ? -1 : 1; + const jumpX = model.position.x - jumpDirct * (deviceParam.offset.x - model.width / 2); + const jumpY = model.position.y + jumpDirct * deviceParam.offset.y; + + this.jump = new Text({ + zlevel: this.model.zlevel, + z: this.model.z, + style: { + x: jumpX, + y: jumpY, + fontWeight: deviceParam.fontWeight, + fontSize: deviceParam.fontSize, + fontFamily: style.fontFamily, + text: deviceParam.text, + textFill: deviceParam.textColor, + textAlign: style.textStyle.textAlign, + textVerticalAlign: style.textStyle.textVerticalAlign + } + }); + this.add(this.jump); + } + } + + setColor(color) { + this.create(); + this.jump.setStyle('textFill', color); + } + + hideMode() { + this.jump && this.jump.hide(); + } + + showMode(deviceParam) { + this.create(deviceParam); + this.jump.show(); + } + recover() { + this.hideMode(); + } + + setState(model, deviceParam = this.model.style.StationStand.jump) { + // 列车跳停 + model.assignSkip && this.showMode(deviceParam); + // 全部跳停 + model.allSkip && this.showMode(deviceParam); + } +} + +export default EJump; diff --git a/src/jmapNew/shape/StationStand/jump/EJumpCircle.js b/src/jmapNew/shape/StationStand/jump/EJumpCircle.js new file mode 100644 index 000000000..0b8f47e29 --- /dev/null +++ b/src/jmapNew/shape/StationStand/jump/EJumpCircle.js @@ -0,0 +1,62 @@ +import Arc from 'zrender/src/graphic/shape/Arc'; +import EJump from './EJump'; + +class EJumpCircle extends EJump { + constructor(model) { + super(); + this.model = model; + this.isNew = false; + } + create() { + const model = this.model.modelData; + const style = this.model.style; + + const jumpDirct = model.right ? -1 : 1; + const jumpCX = model.position.x - jumpDirct * (style.StationStand.jumpCircle.offset.x - model.width / 2); + const jumpCY = model.position.y + jumpDirct * style.StationStand.jumpCircle.offset.y; + + if (!this.isNew) { + super.create(style.StationStand.jumpCircle); + this.jumpArc = new Arc({ + zlevel: this.model.zlevel, + z: this.model.z, + shape: { + cx: jumpCX, + cy: jumpCY, + r: style.StationStand.jumpCircle.r + }, + style: { + stroke: style.StationStand.jumpCircle.arcColor, + fill: style.StationStand.jumpCircle.fillColor + } + }); + this.add(this.jumpArc); + this.jumpArc.hide(); + } + } + + hideMode() { + super.hideMode(); + this.jumpArc && this.jumpArc.hide(); + } + + showMode(isAllJump) { + super.showMode(this.model.style.StationStand.jumpCircle); + if (isAllJump) { // 站台跳停 + this.jumpArc && this.jumpArc.show(); + } + } + + recover() { + this.hideMode(); + } + + setState(model) { + // 列车跳停 + model.assignSkip && this.showMode(0); + // 全部跳停 + model.allSkip && this.showMode(1); + } + +} +export default EJumpCircle; diff --git a/src/jmapNew/shape/StationStand/ESafeStand/EGapStand.js b/src/jmapNew/shape/StationStand/safeStand/EGapStand.js similarity index 65% rename from src/jmapNew/shape/StationStand/ESafeStand/EGapStand.js rename to src/jmapNew/shape/StationStand/safeStand/EGapStand.js index be75a62f7..df02673b8 100644 --- a/src/jmapNew/shape/StationStand/ESafeStand/EGapStand.js +++ b/src/jmapNew/shape/StationStand/safeStand/EGapStand.js @@ -10,36 +10,35 @@ class EGapStand extends Group { } create() { - const model = this.model; + const model = this.model.modelData; const style = this.model.style; + const standX = model.position.x - model.width / 2; + const standY = model.position.y - model.height / 2; + this.stand1 = new Rect({ zlevel: this.model.zlevel, z: this.model.z + 1, shape: { - x: model.x, - y: model.y, + x: standX, + y: standY, width: model.width / 4 - 2, height: model.height }, style: { - lineWidth: style.StationStand.safeStand.lineWidth || 0, - stroke: style.StationStand.safeStand.spareStrokeColor || style.sidelineColor, - fill: style.StationStand.safeStand.spareColor + fill: style.StationStand.gapStand.spareColor } }); this.stand2 = new Rect({ zlevel: this.model.zlevel, z: this.model.z + 1, shape: { - x: model.x + model.width * 3 / 4, - y: model.y, + x: standX + model.width * 3 / 4, + y: standY, width: model.width / 4 - 2, height: model.height }, style: { - lineWidth: style.StationStand.safeStand.lineWidth || 0, - stroke: style.StationStand.safeStand.spareStrokeColor || style.sidelineColor, - fill: style.StationStand.safeStand.spareColor + fill: style.StationStand.gapStand.spareColor } }); let height = model.inside ? 7 : -12; @@ -60,11 +59,11 @@ class EGapStand extends Group { zlevel: this.model.zlevel, z: this.model.z, style: { - x: model.x + model.width / 2, - y: model.y + height, - fontSize: style.StationStand.safeStand.headFontSize, + x: standX + model.width / 2, + y: standY + height, + fontSize: style.StationStand.gapStand.headFontSize, text: model.name, - textFill: style.StationStand.safeStand.textFill, + textFill: style.StationStand.gapStand.textFill, textPosition: 'inside', textAlign: 'center' } @@ -73,6 +72,13 @@ class EGapStand extends Group { this.add(this.stand2); this.add(this.standText); } + + recover() { + } + + setState(model) { + + } } export default EGapStand; diff --git a/src/jmapNew/shape/StationStand/safeStand/EHollowStand.js b/src/jmapNew/shape/StationStand/safeStand/EHollowStand.js new file mode 100644 index 000000000..6132f8af1 --- /dev/null +++ b/src/jmapNew/shape/StationStand/safeStand/EHollowStand.js @@ -0,0 +1,56 @@ +import Group from 'zrender/src/container/Group'; +import Rect from 'zrender/src/graphic/shape/Rect'; + +class EHollowStand extends Group { + constructor(model) { + super(); + this.model = model; + this.create(); + } + + create() { + const model = this.model.modelData; + const style = this.model.style; + const standX = model.position.x - model.width / 2; + const standY = model.position.y - model.height / 2; + + this.stand = new Rect({ + zlevel: this.model.zlevel, + z: this.model.z, + shape: { + x: standX, + y: standY, + width: model.width, + height: model.height + }, + style: { + lineWidth: 2, + stroke: style.StationStand.hollowStand.spareStrokeColor || style.sidelineColor + } + }); + this.add(this.stand); + } + + setColor(color) { + this.stand.setStyle('stroke', color); + } + + recover() { + const style = this.model.style; + this.setColor(style.StationStand.hollowStand.spareColor); + } + + setState(model) { + const style = this.model.style; + // 列车跳停 + model.assignSkip && this.setColor(style.StationStand.hollowStand.designatedJumpStopColor); + // 全部跳停 + model.allSkip && this.setColor(style.StationStand.hollowStand.jumpStopColor); + // 停车 + model.trainParking && this.setColor(style.StationStand.hollowStand.doorOpenColor); + // 紧急停车 + model.emergencyClosed && this.setColor(this.style.StationStand.hollowStand.spareColor); + } +} + +export default EHollowStand; diff --git a/src/jmapNew/shape/StationStand/safeStand/ESolidStand.js b/src/jmapNew/shape/StationStand/safeStand/ESolidStand.js new file mode 100644 index 000000000..0d6d996ad --- /dev/null +++ b/src/jmapNew/shape/StationStand/safeStand/ESolidStand.js @@ -0,0 +1,55 @@ +import Group from 'zrender/src/container/Group'; +import Rect from 'zrender/src/graphic/shape/Rect'; + +class ESolidStand extends Group { + constructor(model) { + super(); + this.model = model; + this.create(); + } + + create() { + const model = this.model.modelData; + const style = this.model.style; + const standX = model.position.x - model.width / 2; + const standY = model.position.y - model.height / 2; + + this.stand = new Rect({ + zlevel: this.model.zlevel, + z: this.model.z, + shape: { + x: standX, + y: standY, + width: model.width, + height: model.height + }, + style: { + 'fill':style.StationStand.solidStand.spareColor + } + }); + this.add(this.stand); + } + + setColor(color) { + this.stand.setStyle('fill', color); + } + + recover() { + const style = this.model.style; + this.setColor(style.StationStand.solidStand.spareColor); + } + + setState(model) { + const style = this.model.style; + // 列车跳停 + model.assignSkip && this.setColor(style.StationStand.solidStand.designatedJumpStopColor); + // 全部跳停 + model.allSkip && this.setColor(style.StationStand.solidStand.jumpStopColor); + // 停车 + model.trainParking && this.setColor(style.StationStand.solidStand.stopColor); + // 紧急停车 + model.emergencyClosed && this.setColor(this.style.StationStand.solidStand.spareColor); + } +} + +export default ESolidStand; diff --git a/src/jmapNew/shape/Train/TrainBody.js b/src/jmapNew/shape/Train/TrainBody.js index cf8be6bb6..7e9cdd3b2 100644 --- a/src/jmapNew/shape/Train/TrainBody.js +++ b/src/jmapNew/shape/Train/TrainBody.js @@ -1,6 +1,6 @@ import Group from 'zrender/src/container/Group'; import TrainBodyBox from './TrainBodyBox'; -import '../StationStand/EDetain'; +// import '../StationStand/EDetain'; import ETextName from '../element/ETextName'; // 名称文字 (共有) import EMouse from './EMouse'; import store from '@/store/index_APP_TARGET'; diff --git a/src/jmapNew/shape/utils/ShapeStatusCovert.js b/src/jmapNew/shape/utils/ShapeStatusCovert.js new file mode 100644 index 000000000..6e315a972 --- /dev/null +++ b/src/jmapNew/shape/utils/ShapeStatusCovert.js @@ -0,0 +1,16 @@ +// 中介者模式 + +/* 遍历当前线路下的绘图元素 组合模式 */ +export function traverseLineElements(currentType, elementTypeList, model, style, obj) { + const currentTypeList = currentType.elemnetType; + currentTypeList.forEach(element => { + const ClassName = elementTypeList[element]; + obj[element] = new ClassName({ + zlevel: model.zlevel, + z: 1 + currentType[element].z, + style: style, + modelData:model + }); + obj.add(obj[element]); + }); +} diff --git a/src/jmapNew/theme/chengdu_03/menus/menuDialog/viewName.vue b/src/jmapNew/theme/chengdu_03/menus/menuDialog/viewName.vue index dc1958aff..e76393b55 100644 --- a/src/jmapNew/theme/chengdu_03/menus/menuDialog/viewName.vue +++ b/src/jmapNew/theme/chengdu_03/menus/menuDialog/viewName.vue @@ -214,17 +214,17 @@ export default { } // 站台轨名称 - if (elem.isStandTrack) { + if (elem.standTrack) { standTrackNameShow = this.nameLevels.indexOf(2) !== -1; } // 折返轨名称 - if (elem.isReentryTrack) { + if (elem.reentryTrack) { reentryTrackNameShow = this.nameLevels.indexOf(4) !== -1; } // 转换轨名称 - if (elem.isTransferTrack) { + if (elem.transferTrack) { transferTrackNameShow = this.nameLevels.indexOf(6) !== -1; } diff --git a/src/jmapNew/theme/fuzhou_01/menus/menuDialog/viewName.vue b/src/jmapNew/theme/fuzhou_01/menus/menuDialog/viewName.vue index a063d149c..a2a4092fc 100644 --- a/src/jmapNew/theme/fuzhou_01/menus/menuDialog/viewName.vue +++ b/src/jmapNew/theme/fuzhou_01/menus/menuDialog/viewName.vue @@ -214,17 +214,17 @@ export default { } // 站台轨名称 - if (elem.isStandTrack) { + if (elem.standTrack) { standTrackNameShow = this.nameLevels.indexOf(2) !== -1; } // 折返轨名称 - if (elem.isReentryTrack) { + if (elem.reentryTrack) { reentryTrackNameShow = this.nameLevels.indexOf(4) !== -1; } // 转换轨名称 - if (elem.isTransferTrack) { + if (elem.transferTrack) { transferTrackNameShow = this.nameLevels.indexOf(6) !== -1; } diff --git a/src/jmapNew/theme/ningbo_03/menus/menuBar.vue b/src/jmapNew/theme/ningbo_03/menus/menuBar.vue index 7aa244773..adcd6e633 100644 --- a/src/jmapNew/theme/ningbo_03/menus/menuBar.vue +++ b/src/jmapNew/theme/ningbo_03/menus/menuBar.vue @@ -128,6 +128,9 @@ + + + + diff --git a/src/jmapNew/theme/ningbo_03/menus/menuDialog/arrangeRoute.vue b/src/jmapNew/theme/ningbo_03/menus/menuDialog/arrangeRoute.vue index 76d1a91cf..c9958e90b 100644 --- a/src/jmapNew/theme/ningbo_03/menus/menuDialog/arrangeRoute.vue +++ b/src/jmapNew/theme/ningbo_03/menus/menuDialog/arrangeRoute.vue @@ -30,7 +30,23 @@ - 信号机 + + + + + + + + + + + + + + 显示复制路径 + + + @@ -79,7 +95,8 @@ export default { }, computed: { ...mapGetters('map', [ - 'stationStandList' + 'stationStandList', + 'signalList' ]), show() { return this.dialogShow && !this.$store.state.menuOperation.break; diff --git a/src/jmapNew/theme/ningbo_03/menus/menuDialog/intervalStopNumber.vue b/src/jmapNew/theme/ningbo_03/menus/menuDialog/intervalStopNumber.vue index af1a78823..4bb72f361 100644 --- a/src/jmapNew/theme/ningbo_03/menus/menuDialog/intervalStopNumber.vue +++ b/src/jmapNew/theme/ningbo_03/menus/menuDialog/intervalStopNumber.vue @@ -7,6 +7,10 @@ + + + + @@ -17,7 +21,6 @@ 禁用 - 所有上行 所有下行 diff --git a/src/jmapNew/theme/ningbo_03/menus/menuDialog/routeCommand.vue b/src/jmapNew/theme/ningbo_03/menus/menuDialog/routeCommand.vue index 50b66bfae..bb18d7609 100644 --- a/src/jmapNew/theme/ningbo_03/menus/menuDialog/routeCommand.vue +++ b/src/jmapNew/theme/ningbo_03/menus/menuDialog/routeCommand.vue @@ -1,5 +1,5 @@