大铁线路III型 定反位 实心小圆圈 失表状态调整

This commit is contained in:
joylink_cuiweidong 2022-07-19 16:53:37 +08:00
parent 226f0fd71b
commit dd1b7b934e
3 changed files with 96 additions and 3 deletions

View File

@ -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' // 挤岔颜色 配合挤岔专用
}
};

View File

@ -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;

View File

@ -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();
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();
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 })