From 732c80ca6d7a34d008d1bd02bc82ef09b8524fd7 Mon Sep 17 00:00:00 2001 From: joylink_zyy <> Date: Tue, 4 Feb 2020 14:28:18 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=81=93=E5=B2=94=E7=BB=98?= =?UTF-8?q?=E7=94=BB=E6=96=B9=E5=BC=8F=EF=BC=8C=E5=85=BC=E5=AE=B9=E5=93=88?= =?UTF-8?q?=E5=B0=94=E6=BB=A8=E7=BA=BF=E8=B7=AF=E9=81=93=E5=B2=94=E7=BB=98?= =?UTF-8?q?=E5=88=B6=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jmapNew/config/skinCode/haerbin_01.js | 1 + src/jmapNew/shape/Switch/ERhomboid.js | 50 ++++++ src/jmapNew/shape/Switch/ESwLnversion.js | 37 ++--- src/jmapNew/shape/Switch/index.js | 181 +++++++++++++--------- 4 files changed, 177 insertions(+), 92 deletions(-) create mode 100644 src/jmapNew/shape/Switch/ERhomboid.js diff --git a/src/jmapNew/config/skinCode/haerbin_01.js b/src/jmapNew/config/skinCode/haerbin_01.js index 7d3f3a6c1..02249707c 100644 --- a/src/jmapNew/config/skinCode/haerbin_01.js +++ b/src/jmapNew/config/skinCode/haerbin_01.js @@ -341,6 +341,7 @@ class SkinCode extends defaultStyle { monolockColor: '#870E10' // 道岔单锁颜色 }, core: { + splice: true, // 哈尔滨特殊显示 length: 6 // 道岔单边长度 }, block: { // 道岔封锁配置 diff --git a/src/jmapNew/shape/Switch/ERhomboid.js b/src/jmapNew/shape/Switch/ERhomboid.js new file mode 100644 index 000000000..abb6b1f5a --- /dev/null +++ b/src/jmapNew/shape/Switch/ERhomboid.js @@ -0,0 +1,50 @@ +import Group from 'zrender/src/container/Group'; +import Polygon from 'zrender/src/graphic/shape/Polygon'; + +class ERhomboid extends Group { + constructor(model) { + super(); + this.model = model; + this.create(); + } + + create() { + const model = this.model; + const style = this.model.style; + this.section = new Polygon({ // 平行四边形 + zlevel: model.zlevel, + z: model.z + 1, + shape: { + points: model.sectionPoints + }, + style: { + fill: style.Section.line.spareColor + }, + cursor: model.cursor, + onmouseover: model.onmouseover, + onmouseout: model.onmouseout + }); + + this.hide(); + this.add(this.section); + } + + hide() { + this.section.hide(); + } + + show() { + this.section.show(); + } + + stopAnimation(flag) { + this.section.stopAnimation(flag); + } + + getSection() { + return this.section; + } + +} + +export default ERhomboid; diff --git a/src/jmapNew/shape/Switch/ESwLnversion.js b/src/jmapNew/shape/Switch/ESwLnversion.js index 8cbc78f9c..e7aa4563c 100644 --- a/src/jmapNew/shape/Switch/ESwLnversion.js +++ b/src/jmapNew/shape/Switch/ESwLnversion.js @@ -11,7 +11,7 @@ class ESwLnversion extends Group { create() { const model = this.model; const style = this.model.style; - this.relocShelter = new Polygon({ + this.relocShelter = new Polygon({ // 遮盖B区段范围 zlevel: model.zlevel, z: model.z, shape: { @@ -27,37 +27,38 @@ class ESwLnversion extends Group { const rpx = Math.abs(model.triangle.getCos(model.halfWidth)) + 0.2; this.relocShelter.position = [-model.triangle.drictx * rpx, -model.triangle.dricty * 0.2]; - this.section = new Polygon({ - zlevel: model.zlevel, - z: model.z + 1, - shape: { - points: model.sectionPoints - }, - style: { - fill: style.Section.line.spareColor - }, - cursor: model.cursor, - onmouseover: model.onmouseover, - onmouseout: model.onmouseout - }); + // this.section = new Polygon({ // 平行四边形 + // zlevel: model.zlevel, + // z: model.z + 1, + // shape: { + // points: model.sectionPoints + // }, + // style: { + // // fill: style.Section.line.spareColor + // fill: 'blue' + // }, + // cursor: model.cursor, + // onmouseover: model.onmouseover, + // onmouseout: model.onmouseout + // }); this.hide(); this.add(this.relocShelter); - this.add(this.section); + // this.add(this.section); } hide() { this.relocShelter.hide(); - this.section.hide(); + // this.section.hide(); } show() { this.relocShelter.show(); - this.section.show(); + // this.section.show(); } stopAnimation(flag) { - this.section.stopAnimation(flag); + // this.section.stopAnimation(flag); } getSection() { diff --git a/src/jmapNew/shape/Switch/index.js b/src/jmapNew/shape/Switch/index.js index 8d0eaf4b3..5632a08f3 100644 --- a/src/jmapNew/shape/Switch/index.js +++ b/src/jmapNew/shape/Switch/index.js @@ -11,6 +11,7 @@ import ESwLnversion from './ESwLnversion'; import ELockRect from './ELockRect'; import EMouse from './EMouse'; import EHighlight from '../element/EHighlight'; +import ERhomboid from './ERhomboid'; export default class Switch extends Group { constructor(model, style) { @@ -51,7 +52,7 @@ export default class Switch extends Group { const direct = -this.triangle.drictx * this.triangle.dricty; const coverLength = switchWidth * 1.5; - this.swCore = new ESwCore({ + this.swCore = new ESwCore({ // 道岔两个斜线 盖住所有 zlevel: this.zlevel, z: this.z, style: style, @@ -90,11 +91,13 @@ export default class Switch extends Group { const width2 = (height1 + switchWidth1) / this.triangle.getTanRate(); const width3 = (style.Section.line.width / this.triangle.getSinRate()) - width2 - width1; const spoint1 = [model.intersection.x + directx * width3, model.intersection.y - directy * switchWidth1]; - const spoint2 = [spoint1[0] - directx * (width2 + width1) - directx * width3, spoint1[1]]; - const spoint3 = [model.intersection.x - directx * width3, model.intersection.y + directy * switchWidth1]; + // const spoint2 = [spoint1[0] - directx * (width2 + width1) - directx * width3, spoint1[1]]; + // const spoint3 = [model.intersection.x - directx * width3, model.intersection.y + directy * switchWidth1]; + const spoint2 = [model.intersection.x - directx * 13, spoint1[1]]; + const spoint3 = [model.intersection.x - directx * 13, model.intersection.y + directy * switchWidth1]; const spoint4 = [spoint1[0] + directx * (width2 + width1) - directx * width3, spoint3[1]]; - this.relocShelter = new ESwLnversion({ // 反位 + this.relocShelter = new ESwLnversion({ // 反位覆盖形状 zlevel: this.zlevel, z: this.z, style: style, @@ -107,6 +110,19 @@ export default class Switch extends Group { onmouseout: () => { this.name.getArrowText().hide(); } }); + this.rhomboid = new ERhomboid({ // 平行四边形覆盖范围 + zlevel: this.zlevel, + z: this.z, + style: style, + sectionPoints: [spoint1, spoint2, spoint3, spoint4], + cursor: 'pointer', + halfWidth: halfWidth, + triangle: this.triangle, + onmouseover: () => { this.name.getArrowText().show(); }, + onmouseout: () => { this.name.getArrowText().hide(); } + }); + + this.releaseBackground = new Line({ // 区段上遮盖段 zlevel: this.zlevel, z: this.z, @@ -127,7 +143,7 @@ export default class Switch extends Group { const nameTextX = model.namePosition.x + model.intersection.x + directx * (style.Section.line.width * 3 + style.Switch.text.offset.x) * this.triangle.getCotRate(); const nameTextY = model.namePosition.y + model.intersection.y + style.Switch.text.offset.y * (style.Switch.text.position || directy); - this.name = new ESwName({ + this.name = new ESwName({ // 道岔名称 zlevel: this.zlevel, z: this.z, style: style, @@ -144,6 +160,7 @@ export default class Switch extends Group { this.add(this.swCore); // 岔芯link this.add(this.locShelter); this.add(this.relocShelter); + this.add(this.rhomboid); this.add(this.releaseBackground); this.add(this.name); } @@ -195,7 +212,7 @@ export default class Switch extends Group { /** 设置道岔文字颜色*/ setTextColor(color) { - this.name.getNameText().setStyle({textFill: color}); + this.name.getNameText().setStyle({ textFill: color }); } /** 设置道岔背景颜色*/ @@ -205,17 +222,18 @@ export default class Switch extends Group { /** 设置道岔文字边框颜色 (道岔封锁) */ setHasTextBorder(width) { - this.name.getTextRect().setStyle({lineWidth: width}); + this.name.getTextRect().setStyle({ lineWidth: width }); } /** 恢复状态*/ recover() { - this.lockRect.hide(); + this.lockRect.hide(); // 矩形包围框 this.setSwitchCoreColor(this.style.backgroundColor); this.name.getNameText().stopAnimation(false); this.swCore.stopAnimation(false); - this.relocShelter.stopAnimation(false); - this.relocShelter.hide(); + // this.relocShelter.hide(); + // this.rhomboid.hide(); + this.rhomboid.stopAnimation(false); this.releaseBackground.hide(); this.setHasTextBorder(0); } @@ -224,8 +242,13 @@ export default class Switch extends Group { setLocationAction() { this.recover(); this.setSwitchCoreInvisible(true); - this.locShelter.show(); + if (this.style.Switch.core.splice) { + this.locShelter.hide(); + } else { + this.locShelter.show(); + } this.relocShelter.hide(); + this.rhomboid.hide(); this.setTextColor(this.style.Switch.text.locateColor); } @@ -234,9 +257,15 @@ export default class Switch extends Group { this.recover(); this.setSwitchCoreInvisible(true); this.setTextColor(this.style.Switch.text.inversionColor); - this.locShelter.hide(); - this.relocShelter.show(); + if (this.style.Switch.core.splice) { + this.relocShelter.hide(); + } else { + this.relocShelter.show(); // 反位 + } + this.locShelter.hide(); // 定位 + this.rhomboid.show(); this.setSectionState(this.relocShelter.getSection(), 'fill', this.model); + this.setSectionState(this.rhomboid.getSection(), 'fill', this.model); } /** 失去*/ @@ -244,6 +273,7 @@ export default class Switch extends Group { this.recover(); this.locShelter.hide(); this.relocShelter.hide(); + this.rhomboid.hide(); this.setSwitchCoreInvisible(false); this.setTextColor(this.style.Switch.text.lossColor); nameFlicker && this.nameTextAnimation(); @@ -271,12 +301,12 @@ export default class Switch extends Group { this.lockRect.show(); } switch (this.model.locateType) { - case '01': // 定位 - this.setTextColor(this.style.Switch.monolock.locationColor); // 设置道岔名称颜色 - break; - case '02': // 反位 - this.setTextColor(this.style.Switch.monolock.inversionColor); // 设置道岔名称颜色 - break; + case '01': // 定位 + this.setTextColor(this.style.Switch.monolock.locationColor); // 设置道岔名称颜色 + break; + case '02': // 反位 + this.setTextColor(this.style.Switch.monolock.inversionColor); // 设置道岔名称颜色 + break; } } @@ -286,7 +316,7 @@ export default class Switch extends Group { this.setHasTextBorder(1); } else if (this.style.Switch.block.contentRectShow) { this.lockRect.show(); - this.lockRect.setStyle({stroke: this.style.Switch.block.contentRectColor}); + this.lockRect.setStyle({ stroke: this.style.Switch.block.contentRectColor }); } } @@ -300,14 +330,17 @@ export default class Switch extends Group { setSwitchCutOff() { this.setSwitchCoreInvisible(true); switch (this.model.locateType) { - case '01': - this.releaseBackground.hide(); - break; - case '02': - this.relocShelter.getSection().animateStyle(true) - .when(1000, { fill: this.style.backgroundColor }) - .start(); - break; + case '01': + this.releaseBackground.hide(); + break; + case '02': + this.relocShelter.getSection().animateStyle(true) + .when(1000, { fill: this.style.backgroundColor }) + .start(); + this.rhomboid.getSection().animateStyle(true) + .when(1000, { fill: this.style.backgroundColor }) + .start(); + break; } } @@ -325,38 +358,38 @@ export default class Switch extends Group { setSectionState(section, style, state) { if (section && !section.animators.length) { switch (state.sectionAstatus) { - case '00': break; - case '01': /** 空闲*/ - section.setStyle(style, this.style.Section.line.spareColor); - break; - case '02': /** 通信车占用*/ - section.setStyle(style, this.style.Section.line.communicationOccupiedColor); - break; - case '03': /** 非通信车占用*/ - section.setStyle(style, this.style.Section.line.unCommunicationOccupiedColor); - break; - case '04': /** 进路锁闭*/ - section.setStyle(style, this.style.Section.line.routeLockColor); - break; - case '05': /** 故障锁闭*/ - section.setStyle(style, this.style.Section.line.faultLockColor); - break; - case '06': /** 封锁*/ - section.setStyle(style, this.style.Section.line.blockColor); - break; - case '07': /** ATC切除*/ - section.setStyle(style, this.style.Section.line.atcExcisionColor); - break; - case '08': /** ATS切除*/ - section.setStyle(style, this.style.Section.line.atsExcisionColor); - section.animateStyle(true) - .when(1000, { fill: this.style.backgroundColor }) - .when(2000, { fill: this.style.Section.line.atsExcisionColor }) - .start(); - break; - case '09': /** 进路延续保护 */ - section.setStyle(style, this.style.Section.line.protectiveLockColor); - break; + case '00': break; + case '01': /** 空闲*/ + section.setStyle(style, this.style.Section.line.spareColor); + break; + case '02': /** 通信车占用*/ + section.setStyle(style, this.style.Section.line.communicationOccupiedColor); + break; + case '03': /** 非通信车占用*/ + section.setStyle(style, this.style.Section.line.unCommunicationOccupiedColor); + break; + case '04': /** 进路锁闭*/ + section.setStyle(style, this.style.Section.line.routeLockColor); + break; + case '05': /** 故障锁闭*/ + section.setStyle(style, this.style.Section.line.faultLockColor); + break; + case '06': /** 封锁*/ + section.setStyle(style, this.style.Section.line.blockColor); + break; + case '07': /** ATC切除*/ + section.setStyle(style, this.style.Section.line.atcExcisionColor); + break; + case '08': /** ATS切除*/ + section.setStyle(style, this.style.Section.line.atsExcisionColor); + section.animateStyle(true) + .when(1000, { fill: this.style.backgroundColor }) + .when(2000, { fill: this.style.Section.line.atsExcisionColor }) + .start(); + break; + case '09': /** 进路延续保护 */ + section.setStyle(style, this.style.Section.line.protectiveLockColor); + break; } if (state.cutOff) { @@ -368,20 +401,20 @@ export default class Switch extends Group { setLocateType(model) { switch (model.locateType) { - case '01': - this.setLocationAction(); /** 定位*/ - break; - case '02': - this.setInversionAction(); /** 反位*/ - break; - case '03': - this.setLossAction(true); /** 失去*/ - break; - case '04': - this.setForkAction(); /** 挤岔*/ - break; - default: - this.setLocationAction(); + case '01': + this.setLocationAction(); /** 定位*/ + break; + case '02': + this.setInversionAction(); /** 反位*/ + break; + case '03': + this.setLossAction(true); /** 失去*/ + break; + case '04': + this.setForkAction(); /** 挤岔*/ + break; + default: + this.setLocationAction(); } }