diff --git a/src/jmapNew/config/skinCode/datie_01.js b/src/jmapNew/config/skinCode/datie_01.js index 4c501a85f..900fab011 100644 --- a/src/jmapNew/config/skinCode/datie_01.js +++ b/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 // 列车实时位置显示 } diff --git a/src/jmapNew/shape/Section/EDerailer.js b/src/jmapNew/shape/Section/EDerailer.js new file mode 100644 index 000000000..28e06880c --- /dev/null +++ b/src/jmapNew/shape/Section/EDerailer.js @@ -0,0 +1,85 @@ +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); + } + + setTextStyle(style) { + this.text && this.text.setStyle(style); + } + + setSymbolStyle(style) { + this.symbol && this.symbol.setStyle(style); + } +} + +export default EDerailer; diff --git a/src/jmapNew/shape/Section/index.js b/src/jmapNew/shape/Section/index.js index b65457a35..dea35f8c7 100644 --- a/src/jmapNew/shape/Section/index.js +++ b/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];