From dd1b7b934e46c0d9a05709f05a4d6f1c5b145e66 Mon Sep 17 00:00:00 2001 From: joylink_cuiweidong <364937672@qq.com> Date: Tue, 19 Jul 2022 16:53:37 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E9=93=81=E7=BA=BF=E8=B7=AFIII?= =?UTF-8?q?=E5=9E=8B=20=E5=AE=9A=E5=8F=8D=E4=BD=8D=20=E5=AE=9E=E5=BF=83?= =?UTF-8?q?=E5=B0=8F=E5=9C=86=E5=9C=88=20=20=E5=A4=B1=E8=A1=A8=E7=8A=B6?= =?UTF-8?q?=E6=80=81=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jmapNew/config/skinCode/datie_tky.js | 10 +++- .../shape/graph/Switch/ESpecialCircle.js | 49 +++++++++++++++++++ src/jmapNew/shape/graph/Switch/index.js | 40 ++++++++++++++- 3 files changed, 96 insertions(+), 3 deletions(-) create mode 100644 src/jmapNew/shape/graph/Switch/ESpecialCircle.js diff --git a/src/jmapNew/config/skinCode/datie_tky.js b/src/jmapNew/config/skinCode/datie_tky.js index 82c2ec0c1..26b5bfc35 100644 --- a/src/jmapNew/config/skinCode/datie_tky.js +++ b/src/jmapNew/config/skinCode/datie_tky.js @@ -359,8 +359,10 @@ class SkinCode extends defaultStyle { core: { length: 6, // 道岔单边长度 graphShow: true, // 图形显示 + specialCircle:true, // 大铁线路III型 定反位 实心小圆圈 graphInversionColor: '#FFFF00', // 反位颜色 - graphLocalColor: '#00FF00' // 定位颜色 + graphLocalColor: '#00FF00', // 定位颜色 + lossActionColor:'#fff' // 失表颜色 }, rectLock: { // 矩形封锁框图形 rectWidth: 18, // 矩形框 宽高 @@ -368,6 +370,12 @@ class SkinCode extends defaultStyle { block: true, // 封锁显示 blockColor: 'red', // 封锁颜色 followName: true // 位置跟随名称确定 + }, + jointImg: { // 道岔 A B C D四元素属性配置 + trapezoidLength: 8, // 直角梯形元素默认长度 + faultStatus: true, // 挤岔表示 + fork: true, // 挤岔专用（如有挤岔操作 变为true） + forKColor: 'red' // 挤岔颜色 配合挤岔专用 } }; diff --git a/src/jmapNew/shape/graph/Switch/ESpecialCircle.js b/src/jmapNew/shape/graph/Switch/ESpecialCircle.js new file mode 100644 index 000000000..c066f3d21 --- /dev/null +++ b/src/jmapNew/shape/graph/Switch/ESpecialCircle.js @@ -0,0 +1,49 @@ +import Group from 'zrender/src/container/Group'; +import Circle from 'zrender/src/graphic/shape/Circle'; + +class ESpecialCircle extends Group { + constructor(model) { + // drictx, dricty + super(); + this.model = model; + this.dricty = model.dricty; + this.drictx = model.drictx > 0; + this.create(); + } + create() { + const { model } = this; + this.specialCircle = new Circle({ + zlevel: model.zlevel + 1, + z: model.z + 2, + shape: { + cx: model.point.x + (this.drictx ? 14 : -14), + cy: model.point.y, + r: 3 + }, + style: { + fill: '#FF0000' + } + }); + this.add(this.specialCircle); + } + + setColor(color) { + console.log(this.specialCircle); + console.log(color); + this.specialCircle.setStyle({ fill: color }); + } + + animate() { + this.specialCircle && this.specialCircle.animateStyle(true) + .when(0, { opacity: 1 }) + .when(500, { opacity: 0 }) + .when(1000, { opacity: 1 }) + .start(); + } + + stopAnimation(flag) { + this.specialCircle.stopAnimation(flag); + } +} + +export default ESpecialCircle; diff --git a/src/jmapNew/shape/graph/Switch/index.js b/src/jmapNew/shape/graph/Switch/index.js index 1e6072d31..ddc7e7ba9 100644 --- a/src/jmapNew/shape/graph/Switch/index.js +++ b/src/jmapNew/shape/graph/Switch/index.js @@ -14,6 +14,7 @@ import EHighlight from '../element/EHighlight'; import ETriangle from './ETriangle'; import store from '@/store/index'; import ESwDot from './ESwDot'; +import ESpecialCircle from './ESpecialCircle'; export default class Switch extends Group { constructor(model, {style, mapDevice}) { @@ -221,6 +222,20 @@ export default class Switch extends Group { this.add(this.dot); } + if (style.Switch.core.specialCircle) { + // 大铁线路III型 定反位 实心小圆圈 + const { drictx, dricty } = this.triangle; + this.specialCircle = new ESpecialCircle({ + zlevel: this.zlevel, + z: this.z, + point:sectionAPoint, + drictx:drictx, + dricty:dricty + }); + this.add(this.specialCircle); + this.specialCircle.hide(); + } + this.add(this.shapeModelA); this.add(this.shapeModelB); this.add(this.shapeModelC); @@ -353,6 +368,8 @@ export default class Switch extends Group { this.name && this.name.show(); this.limitName && this.limitName.show(); this.dot && this.dot.hide(); + this.specialCircle && this.specialCircle.hide(); + this.specialCircle && this.specialCircle.stopAnimation(false); } /** 定位*/ @@ -368,7 +385,13 @@ export default class Switch extends Group { } if (this.style.Switch.core.graphShow) { // 佛山线路显示 this.shapeModelB.show(); - this.shapeModelB.setColor(this.style.Switch.core.graphLocalColor); + if (this.style.Switch.core.specialCircle) { // 大铁线路III型 定反位 实心小圆圈 + this.specialCircle.show(); + this.specialCircle.setColor(this.style.Switch.core.graphLocalColor); + } else { + this.shapeModelB.setColor(this.style.Switch.core.graphLocalColor); + } + this.shapeModelC.show(); this.shapeModelC.setColor(this.style.backgroundColor); } @@ -388,7 +411,13 @@ export default class Switch extends Group { this.shapeModelA.setColor(this.style.Section.line.spareColor); if (this.style.Switch.core.graphShow) { // 佛山线路显示 this.shapeModelC.show(); - this.shapeModelC.setColor(this.style.Switch.core.graphInversionColor); + if (this.style.Switch.core.specialCircle) { // 大铁线路III型 定反位 实心小圆圈 + this.specialCircle.show(); + this.specialCircle.setColor(this.style.Switch.core.graphInversionColor); + this.shapeModelC.setColor(this.style.Section.line.spareColor); + } else { + this.shapeModelC.setColor(this.style.Switch.core.graphInversionColor); + } this.shapeModelC.attr({ z: this.z + 6 }); @@ -436,6 +465,13 @@ export default class Switch extends Group { this.setTextColor(this.style.Switch.text.lossColor); this.style.Switch.text.faultFlashing && this.nameTextAnimation(); + if (this.style.Switch.core.specialCircle) { + this.specialCircle.show(); + this.specialCircle.setColor(this.style.Switch.core.lossActionColor); + // 大铁线路III型 定反位 实心小圆圈 + this.specialCircle && this.specialCircle.animate(); + } + this.lossShow && this.lossShow.show(); // 西安线路专有 this.lossShow && this.lossShow.animateStyle(true) .when(0, { stroke: this.style.backgroundColor })