增加区段的脱轨其设备

src/jmapNew/config/skinCode/datie_01.js

@@ -6,7 +6,7 @@ class SkinCode extends defaultStyle {
         super();
         this.fontFamily = '宋体';
         this[deviceType.Section] = {
-            elemnetType:['name', 'line', 'separator', 'badShunt'],
+            elemnetType:['name', 'line', 'separator', 'badShunt', 'derailer'],
             // 'speedLimit', 'speedLimitName','standTrackText','reentryTrackText','transferTrackText',
             active: {
                 routeColor: true							// 进路触发颜色
@@ -143,12 +143,24 @@ class SkinCode extends defaultStyle {
                 invadeSpecial:true, // 特殊侵限
                 halfHeight: 3								// 区段分隔符高度的一半
             },
-            shuttleBack: { 									// 折返进路 (存在此对象 显示折返箭头)
+            shuttleBack: { 										// 折返进路 (存在此对象 显示折返箭头)
                 z: 10,
                 width: 1.5,
                 color: '#FFFFFF',
-                distance: 5 								// 限速线距离区段距离
+                distance: 5 									// 限速线距离区段距离
             },
+			derailer: {
+				text: {
+					color: 'green',
+					offset: {
+						x: -5,
+						y: -15
+					}
+				},
+				symbol: {
+					color: 'red'
+				}
+			},
             trainPosition:{
                 display: false // 列车实时位置显示
             }

src/jmapNew/shape/Section/EDerailer.js

@@ -0,0 +1,86 @@
+import Group from "zrender/src/container/Group";
+import Text from "zrender/src/graphic/Text";
+import Polygon from "zrender/src/graphic/shape/Polygon";
+
+class EDerailer extends Group {
+	constructor(model) {
+		super();
+		this.zlevel = model.zlevel;
+        this.z = model.z;
+		this.style = model.style;
+		this.model = model;
+		this.create();
+	}
+
+	create() {
+		this.createText();
+		this.createSymbol();
+	}
+
+	createText() {
+		const style = this.model.style;
+		const model = this.model.modelData;
+		const length = model.points.length;
+		const offset = style.Section.derailer.text.offset||{};
+		const offsetX = offset.x||0;
+		const offsetY = offset.y||0;
+		const positionX = (model.points[0].x + model.points[length-1].x) / 2 + offsetX;
+		const positionY = (model.points[0].y + model.points[length-1].y) / 2 + offsetY;
+
+		this.text = new Text({
+			zlevel: this.zlevel,
+			z: this.z,
+			style: {
+				x: positionX,
+                y: positionY,
+				text: 'T',
+                fontWeight: style.fontWeight,
+                fontSize: style.fontSize,
+                fontFamily: style.fontFamily,
+                textFill: style.Section.derailer.text.color,
+				textPosition: 'inside',
+                textAlign: 'center',
+                textVerticalAlign: 'center'
+			}
+		})
+		this.add(this.text);
+	}
+
+	createSymbol() {
+		const style = this.model.style;
+		const model = this.model.modelData;
+		const length = model.points.length;
+		const offset = style.Section.derailer.symbol.offset||{};
+		const offsetX = offset.x||0;
+		const offsetY = offset.y||0;
+		const pointX = (model.points[0].x + model.points[length-1].x) / 2 + offsetX;
+		const pointY = (model.points[0].y + model.points[length-1].y) / 2 + offsetY;
+
+		this.symbol = new Polygon({
+			zlevel: this.zlevel,
+			z: this.z,
+			shape: {
+				points: [
+					[pointX-3, pointY],
+					[pointX, pointY-8],
+					[pointX+3, pointY]
+				]
+			},
+			style: {
+				fill: style.Section.derailer.symbol.color,
+			}
+		})
+		this.add(this.symbol);
+		console.log(this.symbol);
+	}
+
+	setTextStyle(style) {
+		this.text && this.text.setStyle(style);
+	}
+
+	setSymbolStyle(style) {
+		this.symbol && this.symbol.setStyle(style);
+	}
+}
+
+export default EDerailer;

src/jmapNew/shape/Section/index.js

@@ -6,6 +6,7 @@ import EblockLines from './EblockLines'; // 区段封锁特有
 import ESeparator from './ESeparator'; // 分隔符 (私有)
 import EMouse from './EMouse';
 import EAxle from './EAxle'; // 创建计轴
+import EDerailer from './EDerailer'; //脱轨器
 // import { EBackArrow, EBackArrowTriangle } from './EBackArrow'; // 折返进路箭头
 import EBackArrowGroup from './EBackArrow'; // 折返进路箭头
 import ELimitName from './ELimitName'; // 成都三号线 限速名称
@@ -15,6 +16,40 @@ import EStopRouteImg from './EStopRouteImg';
 import EBadShunt from './EBadShunt';
 import store from '@/store/index';
 
+const exec = (f,...args) => { f && f(...args); };
+const DerailerMap = {
+	0: (derailer, style) => {
+		derailer.show();
+		derailer.setTextStyle({textFill: 'green'});
+		derailer.setSymbolStyle({fill: 'red'});
+	},
+	1: (derailer, style) => {
+		derailer.show();
+		derailer.setTextStyle({textFill: 'yellow'});
+		derailer.setSymbolStyle({fill: 'red'});
+	},
+	2: (derailer, style) => {
+		derailer.show();
+		derailer.setTextStyle({textFill: 'green'});
+		derailer.setSymbolStyle({fill: 'green'});
+	},
+	3: (derailer, style) => {
+		derailer.show();
+		derailer.setTextStyle({textFill: 'yellow'});
+		derailer.setSymbolStyle({fill: 'green'});
+	},
+	4: (derailer, style) => {
+		derailer.show();
+		derailer.setTextStyle({textFill: 'red'});
+		derailer.setSymbolStyle({fill: 'red'});
+	},
+	5: (derailer, style) => {
+		derailer.show();
+		derailer.setTextStyle({textFill: 'red'});
+		derailer.setSymbolStyle({fill: 'gray'});
+	}
+}
+
 /** 区段*/
 export default class Section extends Group {
     constructor(model, {style, mapDevice}) {
@@ -63,7 +98,8 @@ export default class Section extends Group {
                 'speedLimit': ELimitLines, // 限速线
                 'speedLimitName': ELimitName, // 限速线名称
                 'shuttleBack': EBackArrowGroup, // 折返箭头 (成都三号线显示)
-                'badShunt':EBadShunt // 大铁项目 分路不良
+                'badShunt':EBadShunt, // 大铁项目 分路不良
+				'derailer': EDerailer
             };
             // 遍历当前线路下的绘图元素
             const model = this.model;
@@ -105,6 +141,7 @@ export default class Section extends Group {
             // this.line.setRunLineDefault();
         }
         this.name && this.name.recover();
+		this.derailer && this.derailer.hide();
         this.speedLimit && this.speedLimit.hide();
         this.speedLimitName && this.speedLimitName.hide();
         this.badShunt && this.badShunt.hide();
@@ -428,6 +465,9 @@ export default class Section extends Group {
             model.faultLock && this.faultLock();
             // 设置灰显
             model.noStatus && this.setAshShow();
+			// 设置脱轨器
+			model.signalDerailer && exec(DerailerMap[model.signalDerailer], this.derailer, this.style);
+
             /** 道岔区段更新岔心颜色 */
             if (model.type === '03' && model.switch) {
                 const sectionSwitch = this.mapDevice[model.switch.code];