From dcdf45f0b34c3d02f1da9b06f319e692cda18122 Mon Sep 17 00:00:00 2001 From: ival <610568032@qq.com> Date: Mon, 15 Jul 2019 10:06:07 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jmap/config/deviceRender.js | 40 +- src/jmap/config/deviceStyle.js | 44 ++ src/jmap/shape/Signal.js | 1033 ++++++++++++++++++++++++++++ src/jmap/shape/factory.js | 4 + src/jmap/shape/libs/ShapePoints.js | 102 +++ src/jmap/utils/parser.js | 4 + 6 files changed, 1225 insertions(+), 2 deletions(-) create mode 100644 src/jmap/shape/Signal.js create mode 100644 src/jmap/shape/libs/ShapePoints.js diff --git a/src/jmap/config/deviceRender.js b/src/jmap/config/deviceRender.js index 89df5c062..b5f0384fc 100644 --- a/src/jmap/config/deviceRender.js +++ b/src/jmap/config/deviceRender.js @@ -2,10 +2,46 @@ import deviceType from './deviceType'; const deviceRender = {}; -/** link状态配置*/ +/** link渲染配置*/ deviceRender[deviceType.Link] = { - zlevel: 1, + zlevel: 0, progressive: 1 }; +/** Section渲染配置*/ +deviceRender[deviceType.Section] = { + zlevel: 1, + progressive: 2, +} + +/** Signal渲染配置*/ +deviceRender[deviceType.Signal] = { + zlevel: 1, + progressive: 3, +} + +/** Switch渲染配置*/ +deviceRender[deviceType.Switch] = { + zlevel: 3, + progressive: 5, +} + +/** Station渲染配置*/ +deviceRender[deviceType.Station] = { + zlevel: 1, + progressive: 4, +} + +/** StationStand渲染配置*/ +deviceRender[deviceType.StationStand] = { + zlevel: 1, + progressive: 5, +} + +/** StationControl渲染配置*/ +deviceRender[deviceType.StationControl] = { + zlevel: 1, + progressive: 4, +} + export default deviceRender; diff --git a/src/jmap/config/deviceStyle.js b/src/jmap/config/deviceStyle.js index 7089f7e23..9d3c26ce3 100644 --- a/src/jmap/config/deviceStyle.js +++ b/src/jmap/config/deviceStyle.js @@ -13,6 +13,50 @@ fuzhouSkin[deviceType.Link] = { linkTextColor: '#FFFFFF' } +fuzhouSkin[deviceType.Signal] = { + /** 信号机宽度 */ + signalR: 6.5, + + /** 灯柱宽度*/ + signalLampStandardWidth: 1.5, + + /** 设备距离区段的距离*/ + signalDistance: 13, + + /** 信号灯按钮边线*/ + signalButtonDashColor: '#C0C0C0', //'#C0C0C0' + + /** 信号灯按钮颜色*/ + signalButtonColor: 'darkgreen', + + /** 信号灯按钮闪烁颜色*/ + signalButtonLightenColor: '#E4EF50', + + /** 信号灯字体红色*/ + signalTextRed: '#C00808', + + /** 信号灯字体绿色*/ + signalTextGreen: '#00FF00', + + /** 信号灯灯柱颜色*/ + signalLampStandardColor: '#FFFFFF', + + /** 信号灯灰色*/ + signalLampGrayColor: '#7F7F7F', + + /** 信号灯绿色*/ + signalLampGreenColor: '#00FF00', + + /** 信号灯黄色*/ + signalLampYellowColor: '#FFFF00', + + /** 信号灯白色*/ + signalLampWhiteColor: '#FFFFFF', + + /** 信号灯蓝色*/ + signalLampBlueColor: '#0000FF', +} + /** 皮肤配置*/ const deviceSkin = { diff --git a/src/jmap/shape/Signal.js b/src/jmap/shape/Signal.js new file mode 100644 index 000000000..fe55c3a35 --- /dev/null +++ b/src/jmap/shape/Signal.js @@ -0,0 +1,1033 @@ +/* +* 信号机 +*/ +import Line from 'zrender/src/graphic/shape/Line'; +import Text from 'zrender/src/graphic/Text'; +import Polygon from 'zrender/src/graphic/shape/Polygon'; +import Polyline from 'zrender/src/graphic/shape/Polyline'; +import Circle from 'zrender/src/graphic/shape/Circle'; +import Arc from 'zrender/src/graphic/shape/Arc'; +import Rect from 'zrender/src/graphic/shape/Rect'; +import Group from 'zrender/src/container/Group'; +import { arrows, triangular } from './libs/ShapePoints'; + +class Lamp extends Group { + constructor(model) { + super(); + this.model = model; + this.zlevel = model.zlevel; + this.z = 10; + this._create(); + } + + _create() { + let model = this.model; + this.lamp = new Arc({ + name: model.index, + zlevel: this.zlevel + 1, + z: this.z, + shape: { + cx: model.position.x, + cy: model.position.y, + r: model.style.signalR + }, + style: { + lineWidth: 0.4, + fill: model.style.backgroundColor, + stroke: model.style.signalLampStandardColor + } + }); + + let shapeDate = null; + if (model.highType === '01') { + // 矮柱 + if (model.drict != 1) { + // 左侧 + shapeDate = { + x: model.origin.x + model.drict * model.lampCount * 2 * model.style.signalR - 2.5, + y: model.origin.y + model.drict * model.style.signalR - 1, + width: model.style.signalR * 2 * model.lampCount + 2, + height: model.style.signalR * 2 + 2 + }; + } else { + shapeDate = { + x: model.origin.x - model.drict + 1.5, + y: model.origin.y - model.drict * model.style.signalR - 1, + width: model.style.signalR * 2 * model.lampCount + 2, + height: model.style.signalR * 2 + 2 + }; + } + } else { + // 高柱 + if (model.drict != 1) { + // 左侧 + shapeDate = { + x: model.origin.x + model.drict * model.lampCount * 2 * model.style.signalR - 2.5 - 3, + y: model.origin.y + model.drict * model.style.signalR - 1, + width: model.style.signalR * 2 * model.lampCount + 2, + height: model.style.signalR * 2 + 2 + }; + } else { + shapeDate = { + x: model.origin.x - model.drict + 1.5 + 3, + y: model.origin.y - model.drict * model.style.signalR - 1, + width: model.style.signalR * 2 * model.lampCount + 2, + height: model.style.signalR * 2 + 2 + }; + } + } + + this.lstop = new Line({ + zlevel: this.zlevel + 1, + z: this.z, + origin: model.origin, + rotation: -Math.PI / 180 * model.rotate, + shape: { + x1: model.position.x + (model.style.signalR + 1) * Math.cos(Math.PI / 4), + y1: model.position.y + (model.style.signalR + 1) * Math.sin(Math.PI / 4), + x2: model.position.x - (model.style.signalR + 1) * Math.cos(Math.PI / 4), + y2: model.position.y - (model.style.signalR + 1) * Math.sin(Math.PI / 4) + }, + style: { + lineWidth: 1.5, + stroke: model.style.backgroundColor, + } + }); + + this.rstop = new Line({ + zlevel: this.zlevel + 1, + z: this.z, + origin: model.origin, + rotation: -Math.PI / 180 * model.rotate, + shape: { + x1: model.position.x + (model.style.signalR + 1) * Math.cos(Math.PI / 4), + y1: model.position.y + (model.style.signalR + 1) * (Math.sin(Math.PI / 4) - Math.sqrt(2)), + x2: model.position.x - (model.style.signalR + 1) * Math.cos(Math.PI / 4), + y2: model.position.y - (model.style.signalR + 1) * (Math.sin(Math.PI / 4) - Math.sqrt(2)) + }, + style: { + lineWidth: 1.5, + stroke: model.style.backgroundColor, + } + }); + this.add(this.lamp); + } + + setColor(color) { + if (color) { + this.lamp.setStyle('fill', color); + } + } + + // 两条交叉黑线 + setStop(has) { + if (has) { + this.add(this.lstop); + this.add(this.rstop); + } else { + this.remove(this.lstop); + this.remove(this.rstop); + } + } +} + +// 自动进路箭头 +class AutoSig extends Group { + constructor(model) { + super(); + this.model = model; + this.zlevel = model.zlevel; + this.z = 10; + this._create(); + } + + _create() { + let model = this.model; + let rotation = Math.PI; + if (model.drict != 1) { + // 右侧 + rotation = 0; + } + + // 箭头 + let x = model.position.x + model.drict * (model.lampCount * model.style.signalR + model.style.signalLampStandardWidth) * 2; + let y = model.position.y - model.style.signalLampStandardWidth; + this.arrowsControl = new Polygon({ + zlevel: this.zlevel, + rotation: rotation, + origin: [x, y], + shape: { + points: arrows(x, y, model.style.stationControlDistance / 8, model.style.signalR * 0.8) + }, + style: { + stroke: model.style.sidelineColor, + lineWidth: 0.6, + fill: model.style.signalLampGreenColor + } + }); + this.add(this.arrowsControl); + } + + // 停止动画 + animationRecover() { + this.arrowsControl.stopAnimation(false); + } + + // 箭头颜色 + setColor(color) { + if (color) { + this.arrowsControl.setStyle('fill', color); + } + } + + // 箭头闪烁 + arrowsAnimation() { + let fill = this.arrowsControl.style.fill; + let style = this.model.style; + this.arrowsControl.animate('style', true) + .when(1000, { fill: style.backgroundColor, stroke: style.backgroundColor }) + .when(2000, { fill: fill, stroke: style.sidelineColor }) + .when(3000, { fill: style.backgroundColor, stroke: style.backgroundColor }) + .when(4000, { fill: fill, stroke: style.sidelineColor }) + .start(); + } +} + +// 运行方向三角 +class JSigDrict extends Group { + constructor(model) { + super(); + this.model = model; + this.zlevel = model.zlevel; + this.z = 10; + this._create(); + } + + _create() { + // 箭头 + let model = this.model; + this.sigDrict = new Polygon({ + zlevel: this.zlevel, + z: this.z, + shape: { + // points: triangular(model.position.x, model.position.y + model.drict * model.style.signalLampStandardWidth, model.drict, model.style.signalR), + points: triangular(model.position.x, model.position.y, model.drict, model.style.signalR), + }, + style: { + stroke: model.style.backgroundColor, + lineWidth: 0.5, + fill: model.style.signalLampYellowColor + } + }); + this.add(this.sigDrict); + } +} + +// 信号灯 几灯、高柱等 +class JSiglamp extends Group { + constructor(model) { + super(); + this.model = model; + this.zlevel = model.zlevel; + this.z = 10; + this.lamps = new Group(); + this.poles = new Group(); + this._subType = 'SignalLamp'; + this._val = '3'; /** 信号机*/ + this._create(); + } + + _create() { + let model = this.model; + this.text = new Text({ + zlevel: this.zlevel, + z: this.z, + position: [0, 0], + style: { + x: model.position.x + model.namePosition.x, + y: model.position.y + model.posit * (model.style.signalR + model.namePosition.y), + text: model.name, + textAlign: 'middle', + textVerticalAlign: model.posit === 1 ? 'top' : 'bottom', + textFont: 'bold ' + (model.style.textFontSize + 1) + 'px ' + model.style.textFontFormat, + textFill: model.style.signalTextGreen + } + }); + + this.ver = new Polyline({ + zlevel: this.zlevel, + z: this.z - 2, + shape: { + points: [ + [model.position.x, model.position.y + model.style.signalR * 1.2], + [model.position.x, model.position.y - model.style.signalR * 1.2] + ] + }, + style: { + lineWidth: model.style.signalLampStandardWidth, + stroke: model.style.signalLampStandardColor + } + }); + + this.hor = new Polyline({ + zlevel: this.zlevel, + z: this.z - 1, + shape: { + points: [ + [model.position.x, model.position.y], + [model.position.x + model.drict * model.style.signalR * 1.2, model.position.y] + ] + }, + style: { + lineWidth: model.style.signalLampStandardWidth, + stroke: model.style.signalLampStandardColor + } + }); + + this.add(this.lamps); + this.add(this.poles); + this.setShowName(model.isShowName); + this.setShowHighSigType(model.highType); + + //旋转 + if (model.rotate) { + this.transformRotation(this.ver); + this.transformRotation(this.hor); + } + } + + // border显示 + setBorderVisible(isVisible) { + if (isVisible) { + this.textBorder.show(); + this.lampsBorder.show(); + } else { + this.textBorder.hide(); + this.lampsBorder.hide(); + } + } + + // 设置显示信号灯名称 + setShowName(isShow) { + if (isShow) this.add(this.text); else this.remove(this.text); + } + + // 显示信号灯名称颜色 + setNameColor(color) { + this.text.setStyle({ textFill: color }); + } + + setShowHighSigType(type) { + let model = this.model; + this.lamps.removeAll(); + this.poles.removeAll(); + this.poles.add(this.ver); + if (type === '01') this.poles.remove(this.hor); else this.poles.add(this.hor); + let highPosition = this.getEndPosition(model.highType); + for (let i = 0; i < model.lampCount; i++) { + let lamp = new Lamp({ + style: model.style, + zlevel: this.zlevel, + lampCount: model.lampCount, + position: { + x: highPosition.x + i * model.drict * model.style.signalR * 2, + y: highPosition.y + }, + index: i + 1, + origin: { + x: model.position.x, + y: model.position.y + }, + rotate: model.rotate, + drict: model.drict, + highType: model.highType, + }); + this.lamps.add(lamp); + } + + this.delay = new Text({ + zlevel: this.zlevel, + style: { + x: model.position.x - model.drict * (model.style.signalLampStandardWidth), + y: model.position.y, + text: this.model.delayCount || 0, + textAlign: model.drict > 0 ? 'right' : 'left', + textVerticalAlign: 'middle', + textFont: 'bold ' + (model.style.textFontSize + 1) + 'px ' + model.style.textFontFormat, + textFill: model.style.signalTextRed + } + }) + this.add(this.delay); + + this.sigDriction = new JSigDrict({ + style: model.style, + zlevel: this.zlevel, + position: { + x: highPosition.x + model.drict * (model.lampCount * model.style.signalR * 2 + model.style.signalR - 1), + y: model.position.y + }, + drict: model.drict, + origin: { + x: model.position.x, + y: model.position.y + }, + rotate: model.rotate, + }); + + this.autoSig = new AutoSig({ + style: model.style, + zlevel: this.zlevel, + position: { + x: highPosition.x, + y: highPosition.y + }, + lampCount: model.lampCount, + drict: model.drict, + origin: { + x: model.position.x, + y: model.position.y + }, + rotate: model.rotate, + }); + + //旋转 + if (model.rotate) { + this.transformRotation(this.sigDriction); + this.transformRotation(this.autoSig); + this.transformRotation(this.lamps); + this.transformRotation(this.delay); + } + + let rect = this.lamps.getBoundingRect(); + rect.union(this.hor.getBoundingRect()); + this.lampsBorder = new Rect({ + zlevel: this.zlevel, + z: this.z - 3, + silent: true, + shape: rect, + style: { + lineDash: [3, 3], + stroke: model.style.borderColor, + fill: model.style.transparentColor + } + }); + + this.textBorder = new Rect({ + zlevel: this.zlevel, + z: this.z - 1, + silent: true, + shape: this.text.getBoundingRect(), + style: { + lineDash: [3, 3], + stroke: model.style.borderColor, + fill: model.style.borderContextBackgroundColor + } + }); + + this.add(this.lampsBorder); + this.add(this.textBorder); + } + + // 整体旋转信号灯 + transformRotation(item) { + if (this.model.rotate) { + let origin = [this.model.position.x, this.model.position.y]; + let rotation = -Math.PI / 180 * Number(this.model.rotate); + item.origin = origin; + item.rotation = rotation; + item.dirty(); + } + } + + setColorByIndex(index, color) { + for (let i = 0; i < this.model.lampCount; i++) { + if (this.lamps.childAt(i).model.index === index) { + this.lamps.childAt(i).setColor(color); + return; + } + } + } + + setStopByIndex(index, has) { + for (let i = 0; i < this.model.lampCount; i++) { + if (this.lamps.childAt(i).model.index === index) { + this.lamps.childAt(i).setStop(has); + return; + } + } + } + + setDelayUnlockAnimation() { + this.delay.show(); + } + + setAutoFlickerAnimation() { + this.autoSig.arrowsAnimation(); + } + + setRecover() { + this.delay.hide(); + this.autoSig.animationRecover(); + this.setNameColor(this.model.style.signalTextGreen); + } + + setColorSig(color) { + this.autoSig.setColor(color); + } + + getEndPosition(type) { + if (type === '01') { + return { + x: this.model.position.x + this.model.drict * this.model.style.signalR * 3 / 2, + y: this.model.position.y + }; + } else { + return { + x: this.hor.shape.points[1][0] + this.model.drict * this.model.style.signalR, + y: this.hor.shape.points[1][1] + }; + } + } + + setShowSigDrict(showSigDrict) { + if (showSigDrict) this.add(this.sigDriction); else this.remove(this.sigDriction); + } + + setAutoSig(isShow) { + if (isShow) this.add(this.autoSig); else this.remove(this.autoSig); + } + + getShapeTipPoint() { + if (this.lamps) { + var distance = this.model.style.signalR; + this.lamps.dirty(); + let rect = this.lamps.getBoundingRect(); + return { + x: rect.x + Math.cos(Number(this.model.rotate)) * rect.width / 2 || (this.model.position.x), + y: rect.y + Math.cos(Number(this.model.rotate)) * rect.height / 2 - distance || (this.model.position.y - distance) + }; + } + return null; + } +} + +/** 按钮*/ +class SigButton extends Group { + constructor(model) { + super(); + this.model = model; + this.zlevel = model.zlevel; + this._subType = 'SignalButton'; + this.z = 10; + this._create(); + } + + _create() { + let model = this.model; + this.sigNormalButtom = new Rect({ + zlevel: this.zlevel, + z: this.z, + _subType: this._subType, + _val: '1', + shape: { + x: model.position.x - model.style.signalR, + y: 0, + width: model.style.signalR * 2, + height: model.style.signalR * 2 + }, + style: { + lineWidth: 0.2, + stroke: model.style.signalButtonDashColor, + fill: model.style.signalButtonColor + }, + }); + + this.sigNormalButtomDown = new Polyline({ + zlevel: this.zlevel, + z: this.z + 1, + silent: true, + shape: { points: [] }, + style: { + lineWidth: 0.8, + stroke: model.style.backgroundColor + } + }); + + this.sigReentryButton = new Circle({ + zlevel: this.zlevel, + z: this.z, + _subType: this._subType, + _val: '2', //折返按钮 + shape: { + cx: model.position.x, + cy: 0, + r: model.style.signalR + }, + style: { + lineWidth: 0.2, + stroke: model.style.signalButtonDashColor, + fill: model.style.signalButtonColor + }, + }); + + this.sigReentryButtonDown = new Arc({ + zlevel: this.zlevel, + z: this.z + 1, + silent: true, + shape: { + cx: 0, + cy: 0, + r: 0, + startAngle: Math.PI * 8 / 5, + endAngle: Math.PI * 4 / 5, + clockwise: false + }, + style: { + lineWidth: 0.8, + stroke: model.style.backgroundColor, + } + }); + + this.add(this.sigNormalButtom); + this.add(this.sigReentryButton); + this.setSigDrict(); + } + + setSigDrict() { + let padding = 1; + let model = this.model; + let r = model.style.signalR * 0.8; + if (model.drict === 1) { + this.sigNormalButtom.attrKV('shape', { + y: model.position.y - 1 / 2 * r + }); + this.sigReentryButton.attrKV('shape', { + cy: model.position.y - 5 / 2 * r + }); + } else { + this.sigReentryButton.attrKV('shape', { + cy: model.position.y + 5 / 2 * r + }); + this.sigNormalButtom.attrKV('shape', { + y: model.position.y - 3 / 2 * r + }); + } + + this.sigNormalButtomDown.attrKV('shape', { + points: [ + [model.position.x - padding + r, this.sigNormalButtom.shape.y + padding], + [model.position.x + padding - r, this.sigNormalButtom.shape.y + padding], + [model.position.x + padding - r, this.sigNormalButtom.shape.y + padding * 2 + r], + ] + }); + + this.sigReentryButtonDown.attrKV('shape', { + cx: this.sigReentryButton.shape.cx, + cy: this.sigReentryButton.shape.cy, + r: this.sigReentryButton.shape.r - padding + }); + } + + colorRecover() { + this.sigNormalButtom.setStyle('fill', this.model.style.signalButtonColor); + this.sigReentryButton.setStyle('fill', this.model.style.signalButtonColor); + } + + animationRecover() { + this.sigNormalButtom.stopAnimation(true); + this.sigReentryButton.stopAnimation(true); + } + + recover() { + this.colorRecover(); + this.animationRecover(); + } + + setButtonStatus(buttonStatus) { + switch (buttonStatus) { + case '00': + case '01': { + this.remove(this.sigNormalButtomDown); + this.remove(this.sigReentryButtonDown); + this.recover(); + } break; + case '02': { + this.add(this.sigNormalButtomDown); + } break; + case '03': { + this.add(this.sigReentryButtonDown); + } break; + case '04': { + this.remove(this.sigNormalButtomDown); + this.sigNormalButtom.animateStyle(true) + .when(1000, { + fill: this.model.style.signalButtonLightenColor + }) + .when(2000, { + fill: this.model.style.backgroundColor + }) + .start(); + } break; + case '05': { + this.remove(this.sigReentryButtonDown); + this.sigReentryButton.animateStyle(true) + .when(1000, { + fill: this.model.style.signalButtonLightenColor + }) + .when(2000, { + fill: this.model.style.backgroundColor + }) + .start(); + } break; + } + } + + getShapeTipPoint(val) { + var view = null; + switch (val) { + case '1': { + view = this.sigNormalButtom; + break; + } + case '2': { + view = this.sigReentryButton; + break; + } + default: { + break; + } + } + if (view) { + var distance = 2; + var rect = view.getBoundingRect(); + return { + x: rect.x + rect.width / 2, + y: rect.y - distance + }; + } + return null; + } +} + +export default class Signal extends Group { + constructor({ _code, _type, zlevel, model, state }, style, styleGlobal) { + super(); + this._code = _code; + this._type = _type; + this.zlevel = zlevel; + this.model = model; + this.state = state; + this.style = style; + this.styleGlobal = styleGlobal; + this.selected = false; + this.lampCount = parseInt(model.lampPositionType); + this._create(); + + // this.on('mousedown', this.mouseclick); + // this.on('mouseout', this.mouseleave); + // this.on('mouseover', this.mouseenter); + } + + _create() { + const model = this.model; + const style = this.style; + const styleGlobal = this.styleGlobal; + const drict = model.directionType === '01' ? -1 : 1; + const posit = model.positionType === '01' ? -1 : 1; + + // 信号灯文字说明 + this.siglamp = new JSiglamp({ + style: style, + styleGlobal: styleGlobal, + zlevel: this.zlevel, + position: { + x: model.position.x, + y: model.position.y + posit * style.signalDistance + }, + drict: drict, + posit: posit, + name: model.name, + namePosition: model.namePosition, + isShowName: model.nameShow, + highType: model.lampPostType, + lampCount: parseInt(model.lampPositionType), + showSigDrict: this.showSigDrict, + pop: true, + rotate: model.rotate, + }); + + // 信号灯按钮 + this.sigButton = new SigButton({ + style: style, + styleGlobal: styleGlobal, + zlevel: this.zlevel, + position: { + x: model.buttonPosition.x, + y: model.buttonPosition.y - posit * style.signalDistance + }, + drict: posit, + pop: false, + }); + + this.add(this.siglamp); + + this.mouseStateRecover(); + this.setState(model); + } + + setButtonStatus(model) { + if (model.buttonShow) { + this.add(this.sigButton); + } else { + this.remove(this.sigButton); + } + + if (this.sigButton) { + this.sigButton.setButtonStatus(model.buttonStatus); + } + } + + setShowSigDrict(isShow) { + this.siglamp.setShowSigDrict(isShow); + } + + setAutoSig(isShow) { + this.siglamp.setAutoSig(isShow); + } + + setShowHighSigType(hightp) { + if (this.siglamp) { + this.highType = hightp; + this.siglamp.setShowHighSigType(hightp); + } + } + + isPop(e) { + for (var i = 0; i < this.childCount(); i++) { + let rect = this.childAt(i).getBoundingRect(); + if (rect.contain(e.offsetX, e.offsetY) && this.childAt(i).pop) { + return true; + } + } + } + + //关闭 + close() { + if (this.lampCount === 1) { + if (this.model.useType === '05') { + /** 单灯 调车信号机*/ + this.siglamp.setColorByIndex(1, this.style.signalLampBlueColor); + } else { + /** 单灯 出站信号机 */ + /** 单灯 阻挡信号机*/ + /** 单灯 阻挡兼调车信号 */ + /** 单灯 列兼调信号机 */ + this.siglamp.setColorByIndex(1, this.style.signalTextRed); + } + } + } + + //开放 + open() { + if (this.lampCount === 1) { + /** 单灯 出站信号机*/ + /** 单灯 阻隔信号机*/ + this.siglamp.setColorByIndex(1, this.style.signalLampGreenColor); + } + } + + + //列车进路 + trainRoute() { + if (this.lampCount === 1) { + /** 单灯 列兼调信号*/ + this.siglamp.setColorByIndex(1, this.style.signalLampYellowColor); + } + } + + //调车进路 + shuntRoute() { + if (this.lampCount === 1) { + /** 单灯 列兼调信号*/ + /** 单灯 阻挡兼调车信号*/ + this.siglamp.setColorByIndex(1, this.style.signalLampWhiteColor); + } + } + + //引导 + guid() { + + } + + //封锁 + block() { + this.siglamp.setColorByIndex(1, this.style.signalTextRed); + this.siglamp.setNameColor(this.style.sectionBlockTextColor); + } + + //功能封锁 + functionBlock() { + + } + + //信号保护区段监视状态显示 + signalblock() { + } + + //故障 + fault() { + } + + //物理点灯 + logicalLight() { + for (var i = 0; i < this.lampCount; i++) { + this.siglamp.setStopByIndex(i + 1, false); + } + } + + //逻辑点灯 + physicsLight() { + for (var i = 0; i < this.lampCount; i++) { + this.siglamp.setStopByIndex(i + 1, true); + } + } + + //设置自动进路模式状态类型 + setAutoRouteOpen() { + if (this.model.linkageAutoRouteShow) { + this.siglamp.setAutoSig(true); + } else { + this.siglamp.setAutoSig(false); + } + + this.siglamp.setRecover(); + this.siglamp.setColorSig(this.style.signalLampGreenColor); + } + + //信号机进路自动触发模式状态类型 + setAutoAccessOpen() { + if (this.model.atsAutoTriggerShow) { + this.siglamp.setAutoSig(true); + } else { + this.siglamp.setAutoSig(false); + } + + this.siglamp.setRecover(); + this.siglamp.setColorSig(this.style.signalLampYellowColor); + } + + //设置自动信号模式状态类型 + setAutoSignalOpen() { + this.siglamp.setShowSigDrict(true); + } + + //隐藏自动信号和自动进路 + setAutoClose() { + this.siglamp.setColorSig(this.style.backgroundColor); + this.siglamp.setAutoSig(false); + this.siglamp.setShowSigDrict(false); + } + + //自动信号和自动进路开始动画 + setAutoFlicker() { + this.siglamp.setAutoFlickerAnimation(); + } + + //设置延时解锁 + setDelayUnlock() { + this.siglamp.setDelayUnlockAnimation(); + } + + //恢复状态 + recover() { + this.siglamp.setRecover(); + } + + setState(model) { + this.recover(); + + /** 设置状态 (点灯类型)*/ + switch (model.status) { + case '01': { this.close(); } break; //关闭 + case '02': { this.open(); } break; //开放 + case '03': { this.guid(); } break; //引导 + case '04': { this.block(); } break; //封锁 + case '05': { this.fault(); } break; //故障 + case '06': { this.block(); } break; //功能封锁 + case '07': { this.signalblock(); } break; //信号保护区段检测 + } + + /** 进路性质类型*/ + switch (model.natureType) { + case '01': { this.trainRoute(); } break; //列车进路 + case '02': { this.shuntRoute(); } break; //调车进路 + } + + /** 设置点灯类型*/ + switch (model.lightType) { + case '01': { this.logicalLight(); } break; //设置逻辑点灯 + case '02': { this.physicsLight(); } break; //设置物理点灯 + } + + /** 设置自动类型*/ + switch (model.autoType) { + case '01': { this.setAutoClose(); } break; // 隐藏 隐藏自动信号和自动进路 + case '02': { this.setAutoSignalOpen(); } break; // 显示 设置自动信号模式状态类型 + case '03': { this.setAutoRouteOpen(); } break; // 显示 设置自动进路模式状态类型 + case '04': { this.setAutoAccessOpen(); } break; // 显示 信号机进路自动触发模式状态类型 + } + + /** 延时解锁*/ + model.delayType = '02'; + switch (model.delayType) { + case '01': { } // 未延时解锁 + case '02': { } // 人工闭塞延时解锁 + case '03': { } // 自动闭塞延时解锁 + } + + /** 信号机进路办理，先停止动画，再判断当前颜色是否闪烁*/ + if (model.routeSetting && (model.autoType == '03' || model.autoType == '04')) { + this.setAutoFlicker(); + } + } + + getShapeTipPoint(val) { + if (val === '1' || val === '2') { + return this.sigButton.getShapeTipPoint(val); + } else { + return this.siglamp.getShapeTipPoint(val); + } + } + + mouseStateVisible() { + this.siglamp.setBorderVisible(true); + this.siglamp.setNameColor('#000'); + } + + mouseStateRecover() { + this.siglamp.setBorderVisible(false); + this.siglamp.setNameColor(this.style.signalTextGreen); + } + + mouseclick(e) { + if ([3].includes(e.which)) { + this.selected = !this.selected; + if (this.selected) { + this.mouseStateVisible(); + } + } + } + + mouseenter() { + if (!this.selected) { + this.mouseStateVisible(); + } + } + + mouseleave() { + if (!this.selected) { + this.mouseStateRecover(); + } + } +} + diff --git a/src/jmap/shape/factory.js b/src/jmap/shape/factory.js index fe56ad006..f81e33171 100644 --- a/src/jmap/shape/factory.js +++ b/src/jmap/shape/factory.js @@ -1,9 +1,13 @@ import deviceType from '../config/deviceType'; import Link from './Link'; +import Section from './Link'; +import Signal from './Signal'; /** 图库*/ const mapShape = {}; mapShape[deviceType.Link] = Link; +mapShape[deviceType.Section] = Section; +mapShape[deviceType.Signal] = Signal; function shapefactory(type, device, style) { const shape = mapShape[type]; diff --git a/src/jmap/shape/libs/ShapePoints.js b/src/jmap/shape/libs/ShapePoints.js new file mode 100644 index 000000000..dfc6dd6b1 --- /dev/null +++ b/src/jmap/shape/libs/ShapePoints.js @@ -0,0 +1,102 @@ +import Path from 'zrender/src/graphic/Path'; + + + +/** 指向箭头坐标*/ +export function arrows(modelX, modelY, length, radius) { + return [ + [modelX - length, modelY], + [modelX - length + radius / 1.5, modelY - radius / 1.2], + [modelX - length + radius / 1.5, modelY - radius / 3], + [modelX + length, modelY - radius / 3], + [modelX + length, modelY + radius / 3], + [modelX - length + radius / 1.5, modelY + radius / 3], + [modelX - length + radius / 1.5, modelY + radius / 1.2] + ]; +} + +/** 指向三角形坐标*/ +export function triangular(modelX, modelY, drict, radius) { + return [ + [modelX, modelY], + [modelX - drict * (radius + 2), modelY - radius], + [modelX - drict * (radius + 2), modelY + radius] + ]; +} + +/** 屏蔽门手电筒*/ +export function flashlight(modelX, modelY, drict, width, height, offsetx, offsety, beyond) { + return [ + [modelX + drict * (offsetx), modelY + drict * offsety - (height + beyond) / 2], + [modelX + drict * (offsetx + beyond), modelY + drict * offsety - height / 2], + [modelX + drict * (offsetx + beyond + width), modelY + drict * offsety - height / 2], + [modelX + drict * (offsetx + beyond + width), modelY + drict * offsety + height / 2], + [modelX + drict * (offsetx + beyond), modelY + drict * offsety + height / 2], + [modelX + drict * (offsetx), modelY + drict * offsety + (height + beyond) / 2], + ]; +} + +/** 区段限速体带方向*/ +export function limitArrows(modelX, modelY, drict, radius) { + return [ + [modelX + drict * radius, modelY - radius], + [modelX + drict * radius, modelY + radius], + [modelX - drict * radius, modelY + radius], + [modelX - drict * radius * 1.8, modelY], + [modelX - drict * radius, modelY - radius] + ] +} + +/** 区段折返标记*/ +export function turnbackArrows(modelX, modelY, drict, width, height) { + return [ + [modelX - drict * (width - 1), modelY + height], + [modelX + drict * width / 2, modelY + height], + [modelX + drict * width / 2, modelY - height], + [modelX - drict * (width - 3), modelY - height], + ] +} + +export var Ugraph = Path.extend({ + type: 'ugraph', + + shape: { + points: null, + counterclockwise: true, + }, + + style: { + stroke: '#000', + fill: null + }, + + buildPath: function (ctx, shape) { + var points = shape.points; + var r = Math.abs(points[1][1] - points[2][1]) / 2; + var x = Math.abs(points[1][0] + points[2][0]) / 2; + var y = Math.abs(points[1][1] + points[2][1]) / 2; + ctx.moveTo(points[0][0], points[0][1]); + ctx.lineTo(points[1][0], points[1][1]); + + shape.counterclockwise && ctx.arc(x, y, r, Math.PI / 2, Math.PI * 3 / 2, false); + shape.counterclockwise || ctx.arc(x, y, r, Math.PI / 2, -Math.PI / 2, true); + + ctx.moveTo(points[2][0], points[2][1]); + ctx.lineTo(points[3][0], points[3][1]); + + ctx.closePath(); var points = shape.points; + var r = Math.abs(points[1][1] - points[2][1]) / 2; + var x = Math.abs(points[1][0] + points[2][0]) / 2; + var y = Math.abs(points[1][1] + points[2][1]) / 2; + ctx.moveTo(points[0][0], points[0][1]); + ctx.lineTo(points[1][0], points[1][1]); + + shape.counterclockwise && ctx.arc(x, y, r, Math.PI / 2, Math.PI * 3 / 2, false); + shape.counterclockwise || ctx.arc(x, y, r, Math.PI / 2, -Math.PI / 2, true); + + ctx.moveTo(points[2][0], points[2][1]); + ctx.lineTo(points[3][0], points[3][1]); + + ctx.closePath(); + } +}); \ No newline at end of file diff --git a/src/jmap/utils/parser.js b/src/jmap/utils/parser.js index 68f4a6d0f..d8c77da5d 100644 --- a/src/jmap/utils/parser.js +++ b/src/jmap/utils/parser.js @@ -19,6 +19,10 @@ export function parser(data, defaultStateDict) { zrUtil.each(data.linkList || [], (elem) => { mapDevice[elem.code] = deviceFactory(deviceType.Link, defaultStateDict, elem); }); + + zrUtil.each(data.signalList || [], (elem) => { + mapDevice[elem.code] = deviceFactory(deviceType.Signal, defaultStateDict, elem); + }); } return mapDevice;