diff --git a/src/jmap/shape/Signal.js b/src/jmap/shape/Signal.js index 8837475a8..b9636b5ad 100644 --- a/src/jmap/shape/Signal.js +++ b/src/jmap/shape/Signal.js @@ -4,7 +4,10 @@ import ESigPost from './element/ESigPost'; import ESigLmap from './element/ESigLmap'; +import ESigAuto from './element/ESigAuto'; +import ESigDrict from './element/ESigDrict'; import ESigButton from './element/ESigButton'; +import ETextName from './element/ETextName'; import Group from 'zrender/src/container/Group'; class Signal extends Group { @@ -19,7 +22,7 @@ class Signal extends Group { this.count = parseInt(model.lampPositionType); this.lamps = new Array(this.count); this.create(); - this.setState(state); + // this.setState(state); } create() { @@ -27,20 +30,18 @@ class Signal extends Group { const posit = this.model.positionType == '01' ? -1 : 1; // 位置 上:下 // 信号机高柱矮柱 - this.siglpost = new ESigPost({ + this.sigPost = new ESigPost({ zlevel: this.zlevel, z: 1, style: this.style, drict: drict, type: this.model.lampPostType, - position: { - x: this.model.position.x, - y: this.model.position.y + posit * (this.style.Signal.signalDistance + this.style.Section.sectionWidth) - } + x: this.model.position.x, + y: this.model.position.y + posit * (this.style.Signal.signalDistance + this.style.Section.sectionWidth + this.style.Signal.signalR) }); // 信号灯 - const nextPosition = this.siglpost.getLampPosition(this.model.highType); + const nextPosition = this.sigPost.getLampPosition(this.model.lampPostType); this.lamps = []; for (let i = 0; i < this.count; i++) { const lamp = new ESigLmap({ @@ -49,19 +50,66 @@ class Signal extends Group { style: this.style, index: i + 1, drict: drict, - position: { - x: nextPosition.x + i * drict * this.style.Signal.signalR * 2, - y: nextPosition.y - }, - origin: { - x: this.model.position.x, - y: this.model.position.y - } + x: nextPosition.x + i * drict * this.style.Signal.signalR * 2, + y: nextPosition.y, + originX: this.model.position.x, + originY: this.model.position.y }); this.lamps.push(lamp); } + // 信号机名称 + this.sigName = this.sectionText = new ETextName({ + _subType: 'Text', + zlevel: this.zlevel, + z: 2, + style: this.style, + x: this.model.position.x + this.model.namePosition.x, + y: this.model.position.y + posit * (this.style.Signal.signalDistance + this.style.Section.sectionWidth + this.style.Signal.signalR * 2 + this.model.namePosition.y), + text: this.model.name, + textFont: 'bold ' + this.style.Signal.sigTextFontSize + 'px ' + this.style.textFontFormat, + textFill: this.style.Signal.sigTextGreen, + textAlign: 'middle', + textVerticalAlign: posit == 1 ? 'top' : 'bottom' + }); + + // 三角方向 + this.sigDrict = new ESigDrict({ + zlevel: this.zlevel, + z: 1, + style: this.style, + x: nextPosition.x + drict * (this.count * this.style.Signal.signalR * 2 + this.style.Signal.signalR - 1), + y: this.model.position.y, + drict: drict + }); + + // 自动进路 + this.sigAuto = new ESigAuto({ + zlevel: this.zlevel, + z: 1, + style: this.style, + count: this.count, + drict: drict, + x: nextPosition.x, + y: nextPosition.y, + width: this.style.Signal.signalSigAutoWidth + }); + + // 延迟解锁 + this.sigDelay = new ETextName({ + zlevel: this.zlevel, + z: 2, + style: this.style, + x: this.model.position.x - drict * this.style.Signal.signalLampStandardWidth, + y: this.model.position.y + posit * (this.style.Signal.signalDistance + this.style.Section.sectionWidth + this.style.Signal.signalR * 2 + this.model.namePosition.y), + text: this.state.delayCount || '110', + textFont: 'bold ' + this.style.Signal.signalDelayTextFontSize + 'px ' + this.style.textFontFormat, + textFill: this.style.Signal.signalTextRed, + textAlign: drict > 0 ? 'right' : 'left', + textVerticalAlign: 'middle' + }); + // 信号灯按钮 this.sigButton = new ESigButton({ zlevel: this.zlevel, @@ -69,19 +117,201 @@ class Signal extends Group { style: this.style, posit: posit, show: this.model.buttonShow, - position: { - x: this.model.buttonPosition.x, - y: this.model.buttonPosition.y - } + x: this.model.buttonPosition.x, + y: this.model.buttonPosition.y - posit * (this.style.Signal.signalButtonDistance + this.style.Signal.signalR * 2) }); - - this.add(this.siglpost); + this.add(this.sigPost); this.lamps.forEach(lamp => { this.add(lamp); }); + this.add(this.sigName); + this.add(this.sigAuto); + this.add(this.sigDrict); + this.add(this.sigDelay); // this.add(this.sigButton); } + // 关闭 + close() { + if (this.count === 1) { + if (this.model.useType === '05') { + /** 单灯 调车信号机*/ + this.lamps[0] && this.lamps[0].setColor(this.style.Signal.signalLampBlueColor); + } else { + /** 单灯 出站信号机 */ + /** 单灯 阻挡信号机*/ + /** 单灯 阻挡兼调车信号 */ + /** 单灯 列兼调信号机 */ + this.lamps[0] && this.lamps[0].setColor(this.style.Signal.signalLampRedColor); + } + } + } + + // 开放 + open() { + if (this.count === 1) { + /** 单灯 出站信号机*/ + /** 单灯 阻隔信号机*/ + this.lamps[0] && this.lamps[0].setColor(this.style.Signal.signalLampGreenColor); + } + } + + // 列车进路 + trainRoute() { + if (this.count === 1) { + /** 单灯 列兼调信号*/ + this.lamps[0] && this.lamps[0].setColor(this.style.Signal.signalLampYellowColor); + } + } + + // 调车进路 + shuntRoute() { + if (this.count === 1) { + /** 单灯 列兼调信号*/ + /** 单灯 阻挡兼调车信号*/ + this.lamps[0] && this.lamps[0].setColor(this.style.Signal.signalLampWhiteColor); + } + } + + // 引导 + guid() { + + } + + // 封锁 + block() { + this.lamps[0] && this.lamps[0].setColor(this.style.Signal.signalLampRedColor); + this.sigName.setColor(this.style.Signal.sectionBlockTextColor); + } + + // 功能封锁 + functionBlock() { + + } + + // 信号保护区段监视状态显示 + signalblock() { + } + + // 故障 + fault() { + } + + // 物理点灯 + logicalLight() { + this.lamps.forEach(lamp => { lamp.setStop(false); }); + } + + // 逻辑点灯 + physicsLight() { + this.lamps.forEach(lamp => { lamp.setStop(true); }); + } + + // 设置自动进路模式状态类型 + setAutoRouteOpen() { + if (this.model.linkageAutoRouteShow) { + this.sigAuto.show(); + } else { + this.sigAuto.hide(); + } + + this.recover(); + this.sigAuto.setColor(this.style.Signal.signalLampGreenColor); + } + + // 信号机进路自动触发模式状态类型 + setAutoAccessOpen() { + if (this.model.atsAutoTriggerShow) { + this.sigAuto.show(); + } else { + this.sigAuto.hide(); + } + + this.recover(); + this.sigAuto.setColor(this.style.Signal.signalLampYellowColor); + } + + // 设置自动信号模式状态类型 + setAutoSignalOpen() { + this.sigDrict.show(); + } + + // 隐藏自动信号和自动进路 + setAutoClose() { + this.sigAuto.hide(); + this.sigAuto.setColor(this.style.backgroundColor); + this.sigDrict.hide(); + } + + // 自动信号和自动进路开始动画 + setAutoFlicker() { + this.sigAuto.arrowsAnimation(); + } + + // 设置延时解锁 + setDelayUnlock() { + this.sigDelay.show(); + } + + // 恢复状态 + recover() { + this.sigDelay.hide(); + this.sigAuto.animationRecover(); + this.sigName.setColor(this.style.Signal.signalTextGreen); + } + setState(state) { + this.recover(); + /** 设置状态 (点灯类型)*/ + switch (state.status) { + case '01': this.close(); break; // 关闭 + case '02': this.open(); break; // 开放 + case '03': this.guid(); break; // 引导 + case '04': this.block(); break; // 封锁 + case '05': this.fault(); break; // 故障 + case '06': this.block(); break; // 功能封锁 + case '07': this.signalblock(); break; // 信号保护区段检测 + } + + /** 进路性质类型*/ + switch (state.natureType) { + case '01': this.trainRoute(); break; // 列车进路 + case '02': this.shuntRoute(); break; // 调车进路 + } + + /** 设置点灯类型*/ + switch (state.lightType) { + case '01': this.logicalLight(); break; // 设置逻辑点灯 + case '02': this.physicsLight(); break; // 设置物理点灯 + } + + /** 设置自动类型*/ + switch (state.autoType) { + case '01': this.setAutoClose(); break; // 隐藏 隐藏自动信号和自动进路 + case '02': this.setAutoSignalOpen(); break; // 显示 设置自动信号模式状态类型 + case '03': this.setAutoRouteOpen(); break; // 显示 设置自动进路模式状态类型 + case '04': this.setAutoAccessOpen(); break; // 显示 信号机进路自动触发模式状态类型 + } + + /** 延时解锁*/ + state.delayType = '02'; + switch (state.delayType) { + case '01': break; // 未延时解锁 + case '02': break; // 人工闭塞延时解锁 + case '03': break; // 自动闭塞延时解锁 + } + + /** 信号机进路办理，先停止动画，再判断当前颜色是否闪烁*/ + if (state.routeSetting && (state.autoType == '03' || state.autoType == '04')) { + this.setAutoFlicker(); + } + } + + getShapeTipPoint(val) { + if (val === '1' || val === '2') { + // return this.sigButton.getShapeTipPoint(val); + } else { + // return this.siglamp.getShapeTipPoint(val); + } } } diff --git a/src/jmap/shape/element/EAutoSig.js b/src/jmap/shape/element/EAutoSig.js deleted file mode 100644 index 2532d4e90..000000000 --- a/src/jmap/shape/element/EAutoSig.js +++ /dev/null @@ -1,52 +0,0 @@ -import Polygon from 'zrender/src/graphic/shape/Polygon'; -import Group from 'zrender/src/container/Group'; -import { arrows } from './libs/ShapePoints'; - -class EAutoSig extends Group { - constructor({position, count, drict, zlevel, z, style}) { - super(); - const rotation = drict != 1? 0 : Math.PI; - const x = position.x + drict * (count * style.Signal.signalR + style.Signal.signalLampStandardWidth) * 2; - const y = position.y - style.Signal.signalLampStandardWidth; - - this.style = style; - this.arrows = new Polygon({ - zlevel: zlevel, - z: z, - rotation: rotation, - origin: [x, y], - shape: { - points: arrows(x, y, style.Signal.stationControlDistance / 8, style.Signal.signalR * 0.8) - }, - style: { - stroke: style.Signal.sidelineColor, - lineWidth: 0.6, - fill: style.Signal.signalLampGreenColor - } - }); - this.add(this.arrows); - } - - // 停止动画 - animationRecover() { - this.arrows.stopAnimation(false); - } - - // 箭头颜色 - setColor(color) { - color && this.arrows.setStyle('fill', color); - } - - // 箭头闪烁 - arrowsAnimation() { - const fill = this.arrows.style.Signal.fill; - this.arrows.animate(true) - .when(1000, { fill: this.style.backgroundColor, stroke: this.style.style.backgroundColor }) - .when(2000, { fill: fill, stroke: this.style.style.Signal.sidelineColor }) - .when(3000, { fill: this.style.style.backgroundColor, stroke: this.style.style.backgroundColor }) - .when(4000, { fill: fill, stroke: this.style.style.Signal.sidelineColor }) - .start(); - } -} - -export default EAutoSig; diff --git a/src/jmap/shape/element/ESigButton.js b/src/jmap/shape/element/ESigButton.js index cbb8d568b..7e0e17bcf 100644 --- a/src/jmap/shape/element/ESigButton.js +++ b/src/jmap/shape/element/ESigButton.js @@ -5,9 +5,15 @@ import Rect from 'zrender/src/graphic/shape/Rect'; import Group from 'zrender/src/container/Group'; class ESigButton extends Group { - constructor({position, posit, show, zlevel, z, style}) { + constructor(model) { super(); + this.model = model; + this._create(); + } + _create() { + const model = this.model; + const style = this.model.style; const padding = 1; const r = style.Signal.signalR * 0.8; @@ -15,13 +21,13 @@ class ESigButton extends Group { this._subType = 'SignalButton'; this.sigNormalButtom = new Rect({ - zlevel: zlevel, - z: z, + zlevel: model.zlevel, + z: model.z, _subType: this._subType, _val: '1', shape: { - x: position.x - style.Signal.signalR, - y: position.y - r + r * posit, + x: model.x - style.Signal.signalR, + y: model.y - r + r * model.posit, width: style.Signal.signalR * 2, height: style.Signal.signalR * 2 }, @@ -33,13 +39,13 @@ class ESigButton extends Group { }); this.sigReentryButton = new Circle({ - zlevel: zlevel, - z: z, + zlevel: model.zlevel, + z: model.z, _subType: this._subType, _val: '2', // 折返按钮 shape: { - cx: position.x, - cy: position.y - 5 / 2 * r * posit, + cx: model.x, + cy: model.y - 5 / 2 * r * model.posit, r: style.Signal.signalR }, style: { @@ -50,13 +56,13 @@ class ESigButton extends Group { }); this.sigNormalButtomDown = new Polyline({ - zlevel: zlevel, - z: z + 1, + zlevel: model.zlevel, + z: model.z + 1, silent: true, shape: { points: [ - [position.x - padding + r, this.sigNormalButtom.shape.y + padding], - [position.x + padding - r, this.sigNormalButtom.shape.y + padding], - [position.x + padding - r, this.sigNormalButtom.shape.y + padding * 2 + r] + [model.x - padding + r, this.sigNormalButtom.shape.y + padding], + [model.x + padding - r, this.sigNormalButtom.shape.y + padding], + [model.x + padding - r, this.sigNormalButtom.shape.y + padding * 2 + r] ] }, style: { lineWidth: 0.8, @@ -65,8 +71,8 @@ class ESigButton extends Group { }); this.sigReentryButtonDown = new Arc({ - zlevel: zlevel, - z: z + 1, + zlevel: model.zlevel, + z: model.z + 1, silent: true, shape: { cx: this.sigReentryButton.shape.cx, @@ -84,7 +90,7 @@ class ESigButton extends Group { this.add(this.sigNormalButtom); this.add(this.sigReentryButton); - this.setVisible(show); + this.setVisible(model.show); } setVisible(show) { diff --git a/src/jmap/shape/element/ESigDrict.js b/src/jmap/shape/element/ESigDrict.js index 15bfd3d66..4d2d63a77 100644 --- a/src/jmap/shape/element/ESigDrict.js +++ b/src/jmap/shape/element/ESigDrict.js @@ -1,15 +1,22 @@ import Polygon from 'zrender/src/graphic/shape/Polygon'; import Group from 'zrender/src/container/Group'; -import { triangular } from './libs/ShapePoints'; +import { triangular } from '../libs/ShapePoints'; class ESigDrict extends Group { - constructor({position, drict, zlevel, z, style}) { + constructor(model) { super(); + this.model = model; + this._create(); + } + + _create() { + const model = this.model; + const style = this.model.style; this.sigDrict = new Polygon({ - zlevel: zlevel, - z: z, + zlevel: model.zlevel, + z: model.z, shape: { - points: triangular(position.x, position.y, drict, style.Signal.signalR) + points: triangular(model.x, model.y, model.drict, style.Signal.signalR) }, style: { stroke: style.backgroundColor, diff --git a/src/jmap/shape/element/ESigLmap.js b/src/jmap/shape/element/ESigLmap.js index 87a492e1c..6dac566de 100644 --- a/src/jmap/shape/element/ESigLmap.js +++ b/src/jmap/shape/element/ESigLmap.js @@ -3,16 +3,23 @@ import Arc from 'zrender/src/graphic/shape/Arc'; import Group from 'zrender/src/container/Group'; class ESigLmap extends Group { - constructor({index, position, origin, zlevel, z, style}) { + constructor(model) { super(); + this.model = model; + this._create(); + } + + _create() { + const model = this.model; + const style = this.model.style; this.lamp = new Arc({ - name: index, - zlevel: zlevel + 1, - z: z, + name: model.index, + zlevel: model.zlevel + 1, + z: model.z, shape: { - cx: position.x, - cy: position.y, + cx: model.x, + cy: model.y, r: style.Signal.signalR }, style: { @@ -23,15 +30,17 @@ class ESigLmap extends Group { }); this.lstop = new Line({ - zlevel: zlevel + 1, - z: z, - origin: origin, - // rotation: -Math.PI / 180 * rotate, + zlevel: model.zlevel + 1, + z: model.z, + origin: { + x: model.originX, + y: model.originY + }, shape: { - x1: position.x + (style.Signal.signalR + 1) * Math.cos(Math.PI / 4), - y1: position.y + (style.Signal.signalR + 1) * Math.sin(Math.PI / 4), - x2: position.x - (style.Signal.signalR + 1) * Math.cos(Math.PI / 4), - y2: position.y - (style.Signal.signalR + 1) * Math.sin(Math.PI / 4) + x1: model.x + (style.Signal.signalR + 1) * Math.cos(Math.PI / 4), + y1: model.y + (style.Signal.signalR + 1) * Math.sin(Math.PI / 4), + x2: model.x - (style.Signal.signalR + 1) * Math.cos(Math.PI / 4), + y2: model.y - (style.Signal.signalR + 1) * Math.sin(Math.PI / 4) }, style: { lineWidth: 1.5, @@ -40,15 +49,17 @@ class ESigLmap extends Group { }); this.rstop = new Line({ - zlevel: zlevel + 1, - z: z, - origin: origin, - // rotation: -Math.PI / 180 * rotate, + zlevel: model.zlevel + 1, + z: model.z, + origin: { + x: model.originX, + y: model.originY + }, shape: { - x1: position.x + (style.Signal.signalR + 1) * Math.cos(Math.PI / 4), - y1: position.y + (style.Signal.signalR + 1) * (Math.sin(Math.PI / 4) - Math.sqrt(2)), - x2: position.x - (style.Signal.signalR + 1) * Math.cos(Math.PI / 4), - y2: position.y - (style.Signal.signalR + 1) * (Math.sin(Math.PI / 4) - Math.sqrt(2)) + x1: model.x + (style.Signal.signalR + 1) * Math.cos(Math.PI / 4), + y1: model.y + (style.Signal.signalR + 1) * (Math.sin(Math.PI / 4) - Math.sqrt(2)), + x2: model.x - (style.Signal.signalR + 1) * Math.cos(Math.PI / 4), + y2: model.y - (style.Signal.signalR + 1) * (Math.sin(Math.PI / 4) - Math.sqrt(2)) }, style: { lineWidth: 1.5, @@ -56,10 +67,12 @@ class ESigLmap extends Group { } }); this.add(this.lamp); + this.add(this.lstop); + this.add(this.rstop); } setColor(color) { - color && this.lamp.setStyle('fill', color); + this.lamp.setStyle('fill', color); } setStop(has) { diff --git a/src/jmap/shape/element/ESigPost.js b/src/jmap/shape/element/ESigPost.js index ecb6f9d9f..59eced36a 100644 --- a/src/jmap/shape/element/ESigPost.js +++ b/src/jmap/shape/element/ESigPost.js @@ -2,20 +2,23 @@ import Polyline from 'zrender/src/graphic/shape/Polyline'; import Group from 'zrender/src/container/Group'; class ESigPost extends Group { - constructor({position, drict, type, zlevel, z, style}) { + constructor(model) { super(); + this.model = model; + this._create(); + } - this.drict = drict; - this.position = position; - this.style = style; + _create() { + const model = this.model; + const style = this.model.style; this.ver = new Polyline({ - zlevel: zlevel, - z: z, + zlevel: model.zlevel, + z: model.z, shape: { points: [ - [position.x, position.y + style.Signal.signalR * 1.2], - [position.x, position.y - style.Signal.signalR * 1.2] + [model.x, model.y + style.Signal.signalR * 1.2], + [model.x, model.y - style.Signal.signalR * 1.2] ] }, style: { @@ -25,12 +28,12 @@ class ESigPost extends Group { }); this.hor = new Polyline({ - zlevel: zlevel, - z: z, + zlevel: model.zlevel, + z: model.z, shape: { points: [ - [position.x, position.y], - [position.x + drict * style.Signal.signalR * 1.2, position.y] + [model.x, model.y], + [model.x + model.drict * style.Signal.signalR * 1.2, model.y] ] }, style: { @@ -42,18 +45,20 @@ class ESigPost extends Group { this.add(this.ver); this.add(this.hor); - type === '01' ? this.hor.hide() : this.hor.show(); + model.type === '01' ? this.hor.hide() : this.hor.show(); } getLampPosition(type) { + const model = this.model; + const style = this.model.style; if (type === '01') { return { - x: this.position.x + this.drict * this.style.Signal.signalR * 3 / 2, - y: this.position.y + x: model.x + model.drict * style.Signal.signalR * 3 / 2, + y: model.y }; } else { return { - x: this.hor.shape.points[1][0] + this.drict * this.style.Signal.signalR, + x: this.hor.shape.points[1][0] + model.drict * style.Signal.signalR, y: this.hor.shape.points[1][1] }; } diff --git a/src/jmap/shape/element/ETextName.js b/src/jmap/shape/element/ETextName.js index 118c688ea..8a4f4e45b 100644 --- a/src/jmap/shape/element/ETextName.js +++ b/src/jmap/shape/element/ETextName.js @@ -23,7 +23,8 @@ export default class ETextName extends Group { textFont: this.model.textFont, textFill: this.model.textFill, textAlign: this.model.textAlign, - textPosition: this.model.textPosition + textPosition: this.model.textPosition, + textVerticalAlign: this.model.textVerticalAlign } }); this.add(this.TextName); @@ -33,6 +34,10 @@ export default class ETextName extends Group { this.TextName.setStyle(model); } + setColor(color) { + this.TextName.setStyle('textFill', color); + } + hide() { this.TextName.hide(); } diff --git a/src/jmap/theme/bejing.js b/src/jmap/theme/bejing.js index 12939e599..aa5c1da9e 100644 --- a/src/jmap/theme/bejing.js +++ b/src/jmap/theme/bejing.js @@ -9,7 +9,7 @@ class Beijing extends defaultSkin { }; this.Section = { /** 区段 宽度*/ - sectionWidth: 4.4, + sectionWidth: 5, /** 区段宽超出宽度*/ sectionBeyondWidth: 0, /** 计轴 半径*/ @@ -69,46 +69,42 @@ class Beijing extends defaultSkin { this[deviceType.Signal] = { /** 信号机宽度 */ signalR: 6, - + /** 自动信号宽度*/ + signalSigAutoWidth: 20, + /** 延迟解锁字体大小*/ + signalDelayTextFontSize: 28, + /** 信号机名称字体大小*/ + signalTextFontSize: 12, /** 灯柱宽度*/ signalLampStandardWidth: 1.2, - /** 设备距离区段的距离*/ - signalDistance: 5, - + signalDistance: 3, + /** 信号灯按钮距离区段的距离*/ + signalButtonDistance: 5, /** 信号灯按钮边线*/ signalButtonDashColor: '#FFFFFF', - /** 信号灯按钮颜色*/ signalButtonColor: 'darkgreen', - /** 信号灯按钮闪烁颜色*/ signalButtonLightenColor: '#E4EF50', - /** 信号灯字体颜色*/ - signalTextColor: '#007600', - + signalTextRed: '#EF0C08', + /** 信号机字体绿色*/ + signalTextGreen: '#007600', /** 信号灯灯柱颜色*/ signalLampStandardColor: '#5578B6', - /** 信号灯锁闭*/ signalBlockColor: '#EF0C08', - /** 信号灯灰色*/ signalLampGrayColor: '#7F7F7F', - /** 信号灯红色*/ signalLampRedColor: '#FF0000', - /** 信号灯绿色*/ signalLampGreenColor: '#00FF00', - /** 信号灯黄色*/ signalLampYellowColor: '#FFFF00', - /** 信号灯白色*/ signalLampWhiteColor: '#FFFFFF', - /** 信号灯蓝色*/ signalLampBlueColor: '#0070C0' };