diff --git a/src/jmap/config/defaultSkin.js b/src/jmap/config/defaultSkin.js index 6824b3580..7446b9e98 100644 --- a/src/jmap/config/defaultSkin.js +++ b/src/jmap/config/defaultSkin.js @@ -39,74 +39,6 @@ export default class DefaultSkin { /** 目的码字体颜色*/ this.destinationTextFontColor = 'yellow'; - /** line 颜色*/ - this.lineWidthColor = '#FFFFFF'; - - /** link 宽度*/ - this.linkWidth = 4.4; - - /** link 线条颜色*/ - this.linkColor = '#3F3F3F'; - - /** link 字体颜色*/ - this.linkTextColor = '#FFFFFF'; - - /** StopPoint 颜色*/ - this.stopPointColor = '#FE0000'; - - /** StopPoint 字体颜色*/ - this.stopPointTextColor = '#FFFFFF'; - - this.zcControlGrayColor = '#00FF00'; - - this.limitControlColor = '#ECE9D8'; - - this.lcControlColor = '#FFFF00'; - - this.zcControlmodeR = 4; - - /** 道岔单边长度 */ - this.switchLen = 6; - - /** 道岔边框颜色*/ - this.switchTextBorderColor = '#FE0000'; - - /** 道岔失去颜色*/ - this.switchTextLossColor = '#FFFFFF'; - - /** 道岔定位颜色*/ - this.switchLocateTextColor = '#00FF00'; - - /** 道岔反位颜色*/ - this.switchInversionColor = '#9C9D09'; - - /** 道岔单锁颜色*/ - this.switchMonolockColor = '#870E10'; - - /** 公里表距离车站距离*/ - this.stationKmRangeDistance = 22; - - /** 计数器字体颜色*/ - this.stationCounterTextColor = '#FFFFFF'; - - /** 计数器边框颜色*/ - this.stationCounterBorderColor = '#E4EF50'; - - /** 延迟解锁倒计时和设备文字之间的距离*/ - this.stationDelayUnlockDistance = 3; - - /** 延时解锁字体颜色*/ - this.stationDelayUnlockTextColor = '#FFFFFF'; - - /** 延迟解锁边框颜色*/ - this.stationDelayUnlockBorderColor = '#FFFFFF'; - - // 停车点折返点目的码名字颜色 - this.stopPointTexDestCodetColor = '#FFF07B'; - - /** 停车点目的码文字大小*/ - this.textPointFontSize = 10; - /** 列车长度*/ this.trainWidth = 40; diff --git a/src/jmap/config/deviceStyle.js b/src/jmap/config/deviceStyle.js index 1432199fb..8c5535c3f 100644 --- a/src/jmap/config/deviceStyle.js +++ b/src/jmap/config/deviceStyle.js @@ -1,14 +1,12 @@ import beijingSkin from '../theme/bejing'; import fuzhouSkin from '../theme/fuzhou'; -import batongSkin from '../theme/batong'; import chengduSkin from '../theme/chengdu'; /** 皮肤配置*/ const deviceSkin = { - '02': fuzhouSkin, - '03': beijingSkin, - '04': batongSkin, // 八通 - '05': chengduSkin // 成都 + // '03': fuzhouSkin + // '03': beijingSkin + '03': chengduSkin }; export function selectSkinStyle(code) { diff --git a/src/jmap/map.js b/src/jmap/map.js index 993f8ec34..5e410ec8e 100644 --- a/src/jmap/map.js +++ b/src/jmap/map.js @@ -9,7 +9,7 @@ import deviceType from './constant/deviceType'; import { parser, deviceFactory } from './utils/parser'; const renderer = 'canvas'; -const devicePixelRatio = 2; +const devicePixelRatio = 1; class Jmap { constructor(opts) { diff --git a/src/jmap/shape/Link/index.js b/src/jmap/shape/Link/index.js index 3bb1a2970..4c7dd19f9 100644 --- a/src/jmap/shape/Link/index.js +++ b/src/jmap/shape/Link/index.js @@ -17,6 +17,11 @@ class Link extends Group { const model = this.model; const style = this.style; + // let textPosition = 'insideBottom'; + // if (model.lp.x !== model.rp.x && model.lp.y !== model.rp.y) { + // textPosition = model.lp.y > model.rp.y ? 'insideLeft' : 'insideRight'; + // } + this.link = new Line({ zlevel: this.zlevel, shape: { @@ -26,18 +31,17 @@ class Link extends Group { y2: model.rp.y }, style: { - lineWidth: style.linkWidth, - stroke: style.linkColor, - text: model.code, - textDistance: style.linkWidth * 2, + lineWidth: style.Link.linkWidth, + stroke: style.Link.linkColor, + text: model.name, + textDistance: style.Link.linkWidth * 2, textPosition: 'inside', textAlign: 'middle', - fontSize: style.textFontSize, - textFill: style.linkTextColor, - textStroke: style.backgroundColor + fontSize: style.Link.textFontSize, + textFill: style.Link.linkTextColor, + textStroke: style.Link.backgroundColor } }); - this.add(this.link); } diff --git a/src/jmap/shape/Signal/ESigName.js b/src/jmap/shape/Signal/ESigName.js index 980af7446..785cf1aac 100644 --- a/src/jmap/shape/Signal/ESigName.js +++ b/src/jmap/shape/Signal/ESigName.js @@ -14,7 +14,7 @@ class ESigName extends Group { _subType: model._subType, zlevel: model.zlevel, z: model.z, - silent: model.silent || false, + silent: model.silent, style: { x: model.x, y: model.y, diff --git a/src/jmap/shape/Signal/index.js b/src/jmap/shape/Signal/index.js index bea36cf12..20596c112 100644 --- a/src/jmap/shape/Signal/index.js +++ b/src/jmap/shape/Signal/index.js @@ -9,7 +9,6 @@ import ESigRoute from './ESigRoute'; import ESigButton from './ESigButton'; import ESigDelay from './ESigDelay'; import ESigName from './ESigName'; -// import Text from 'zrender/src/graphic/Text'; import Group from 'zrender/src/container/Group'; class Signal extends Group { @@ -25,6 +24,7 @@ class Signal extends Group { this.zlevel = zlevel; this.z = 1; this.create(); + this.transformRotation(this); this.setState(state); } @@ -70,12 +70,13 @@ class Signal extends Group { this.sigName = new ESigName({ zlevel: this.zlevel, z: this.z, + silent: false, style: style, x: sigNameX, y: sigNameY, text: model.name, textFont: `bold ${style.Signal.signalTextFontSize} px ${style.textFontFormat}`, - textFill: style.Signal.sigTextGreen, + textFill: style.Signal.signalTextGreen, textAlign: 'middle', textVerticalAlign: posit == 1 ? 'top' : 'bottom' }); @@ -148,6 +149,21 @@ class Signal extends Group { // this.add(this.sigButton); } + // 整体旋转信号灯 + transformRotation(device) { + if (this.model.rotate) { + device.eachChild(item => { + if (item instanceof Group) { + this.transformRotation(item); + } else { + item.origin = [this.model.position.x, this.model.position.y]; + item.rotation = -Math.PI / 180 * Number(this.model.rotate); + item.dirty(); + } + }); + } + } + // 关闭 close() { if (this.count === 1) { diff --git a/src/jmap/shape/StationStand/ESafeEmergent.js b/src/jmap/shape/StationStand/ESafeEmergent.js index 7d8530779..cc2734de0 100644 --- a/src/jmap/shape/StationStand/ESafeEmergent.js +++ b/src/jmap/shape/StationStand/ESafeEmergent.js @@ -18,7 +18,7 @@ class ESafeEmergent extends Group { shape: { x: model.x, y: model.y, - r: style.StationStand.standDistance / 2, + r: model.r, n: model.n }, style: { diff --git a/src/jmap/shape/StationStand/index.js b/src/jmap/shape/StationStand/index.js index 076103358..fd5e3333e 100644 --- a/src/jmap/shape/StationStand/index.js +++ b/src/jmap/shape/StationStand/index.js @@ -84,8 +84,10 @@ class StationStand extends Group { fill: style.StationStand.standNoHumanReentryColor }); + const distance = style.StationStand.standSafeHeight*2 - style.StationStand.standHeadFontSize/2 - 2; + /** 站台扣车*/ - const detainD = style.StationStand.standDetainDirection ? model.height + style.StationStand.standHeadFontSize / 2 - 2: -style.StationStand.standSafeHeight; + const detainD = style.StationStand.standDetainDirection ? model.height - distance: -style.StationStand.standSafeHeight; const detainH = drict > 0 ? style.StationStand.standEmergentR : style.StationStand.standEmergentR + style.StationStand.standDistance + detainD; const detainX = model.position.x - (style.StationStand.standDetainDirection || drict) * (style.StationStand.standDetainOffset.x - model.width / 2); const detainY = model.position.y + (style.StationStand.standDetainDirection || drict) * (style.StationStand.standDetainOffset.y) + drict * detainH; @@ -100,7 +102,7 @@ class StationStand extends Group { }); /** 停站时间*/ - const timeD = style.StationStand.standTimeDirection ? model.height + style.StationStand.standTextFontSize / 2 - 2: -style.StationStand.standSafeHeight; + const timeD = style.StationStand.standTimeDirection ? model.height - distance: -style.StationStand.standSafeHeight; const timeH = drict > 0 ? style.StationStand.standEmergentR : style.StationStand.standEmergentR + style.StationStand.standDistance + timeD; const timeX = model.position.x - (style.StationStand.standTimeDirection || drict) * (style.StationStand.standTimeOffset.x - model.width / 2); const timeY = model.position.y + (style.StationStand.standTimeDirection || drict) * (style.StationStand.standTimeOffset.y) + drict * timeH; @@ -110,11 +112,11 @@ class StationStand extends Group { style: style, x: timeX, y: timeY, - name: model.parkingTime + name: model.parkingTime || '30' }); /** 运行等级*/ - const levelD = style.StationStand.standLevelDirection ? model.height + style.StationStand.standTextFontSize / 2 - 2: -style.StationStand.standSafeHeight; + const levelD = style.StationStand.standLevelDirection ? model.height - distance: -style.StationStand.standSafeHeight; const levelH = drict > 0 ? style.StationStand.standEmergentR : style.StationStand.standEmergentR + style.StationStand.standDistance + levelD; const levelX = model.position.x - (style.StationStand.standLevelDirection || drict) * (style.StationStand.standLevelOffset.x - model.width / 2); const levelY = model.position.y + (style.StationStand.standLevelDirection || drict) * (style.StationStand.standLevelOffset.y) + drict * levelH; @@ -124,7 +126,7 @@ class StationStand extends Group { style: style, x: levelX, y: levelY, - name: model.intervalRunTime + name: model.intervalRunTime || '5' }); this.add(this.safeDoor); diff --git a/src/jmap/shape/Switch/ESwCore.js b/src/jmap/shape/Switch/ESwCore.js index 3214a961b..dfbe35a21 100644 --- a/src/jmap/shape/Switch/ESwCore.js +++ b/src/jmap/shape/Switch/ESwCore.js @@ -11,23 +11,6 @@ class ESwCore extends Group { _create() { const model = this.model; const style = this.model.style; - - this.line = new Line({ - zlevel: model.zlevel, - z: model.z, - silent: true, - shape: { - x1: model.intersectionX - (model.coverLength * model.triangle.drictx), - y1: model.intersectionY, - x2: model.intersectionX + model.triangle.drictx * model.triangle.getCotRate() * model.coverLength, - y2: model.intersectionY - }, - style: { - lineWidth: model.lineWidth, - stroke: style.backgroundColor - } - }); - this.skewLine = new Line({ zlevel: model.zlevel, z: model.z, @@ -44,6 +27,22 @@ class ESwCore extends Group { } }); + this.line = new Line({ + zlevel: model.zlevel, + z: model.z, + silent: true, + shape: { + x1: model.intersectionX - model.triangle.getCotRate() * model.coverLength, + y1: model.intersectionY, + x2: model.intersectionX + model.triangle.getCotRate() * model.coverLength, + y2: model.intersectionY + }, + style: { + lineWidth: model.lineWidth, + stroke: style.backgroundColor + } + }); + this.add(this.line); this.add(this.skewLine); } diff --git a/src/jmap/shape/Switch/ESwLnversion.js b/src/jmap/shape/Switch/ESwLnversion.js new file mode 100644 index 000000000..5863a776c --- /dev/null +++ b/src/jmap/shape/Switch/ESwLnversion.js @@ -0,0 +1,69 @@ +import Group from 'zrender/src/container/Group'; +import Polygon from 'zrender/src/graphic/shape/Polygon'; + +class ESwLnversion extends Group { + constructor(model) { + super(); + this.model = model; + this._create(); + } + + _create() { + const model = this.model; + const style = this.model.style; + this.relocShelter = new Polygon({ + zlevel: model.zlevel, + z: model.z, + shape: { + points: model.shelterPoints + }, + style: { + fill: style.backgroundColor + }, + cursor: model.cursor, + onmouseover: model.onmouseover, + onmouseout: model.onmouseout + }); + const rpx = Math.abs(model.triangle.getCos(model.halfWidth)) + 0.2; + this.relocShelter.position = [-model.triangle.drictx * rpx, -model.triangle.dricty * 0.2]; + + this.section = new Polygon({ + zlevel: model.zlevel, + z: model.z, + shape: { + points: model.sectionPoints + }, + style: { + fill: style.Section.sectionSpareColor + }, + cursor: model.cursor, + onmouseover: model.onmouseover, + onmouseout: model.onmouseout + }); + + this.hide(); + this.add(this.relocShelter); + this.add(this.section); + } + + hide() { + this.relocShelter.hide(); + this.section.hide(); + } + + show() { + this.relocShelter.show(); + this.section.show(); + } + + stopAnimation(flag) { + this.section.stopAnimation(flag); + } + + getSection() { + return this.section; + } + +} + +export default ESwLnversion; diff --git a/src/jmap/shape/Switch/ESwLocal.js b/src/jmap/shape/Switch/ESwLocal.js new file mode 100644 index 000000000..97957aa5e --- /dev/null +++ b/src/jmap/shape/Switch/ESwLocal.js @@ -0,0 +1,44 @@ +import Group from 'zrender/src/container/Group'; +import Polygon from 'zrender/src/graphic/shape/Polygon'; + +class ESwLocal extends Group { + constructor(model) { + super(); + this.model = model; + this._create(); + } + + _create() { + const model = this.model; + const style = this.model.style; + + this.locShelter = new Polygon({ + zlevel: model.zlevel, + z: model.z, + shape: { + points: model.shelterPoints + }, + style: { + fill: style.backgroundColor + }, + cursor: model.cursor, + onmouseover: model.onmouseover, + onmouseout: model.onmouseout + }); + + const lpx = Math.abs(model.triangle.getCos(1)); + this.locShelter.position = [model.triangle.drictx * lpx, -model.triangle.dricty * 0.2]; + this.locShelter.show(); + this.add(this.locShelter); + } + + hide() { + this.locShelter.hide(); + } + + show() { + this.locShelter.show(); + } +} + +export default ESwLocal; diff --git a/src/jmap/shape/Switch/index copy.js b/src/jmap/shape/Switch/index copy.js new file mode 100644 index 000000000..ac8b2af31 --- /dev/null +++ b/src/jmap/shape/Switch/index copy.js @@ -0,0 +1,398 @@ +/* +* 道岔 +*/ +import Line from 'zrender/src/graphic/shape/Line'; +import Group from 'zrender/src/container/Group'; +import Polygon from 'zrender/src/graphic/shape/Polygon'; +import JTriangle from '../../utils/JTriangle'; +import ESwName from './ESwName.js'; +import ESwCore from './ESwCore.js'; + +export default class Switch extends Group { + constructor({ _code, _type, zlevel, model, state }, style, jmap) { + super(); + this._code = _code; + this._type = _type; + this.model = model; + this.state = state; + this.style = style; + this.jmap = jmap; + this.selected = false; + this.zlevel = zlevel; + this.z = 8; + + this._create(); + this.setState(state); + } + + _create() { + const model = this.model; + const style = this.style; + + this.triangle = new JTriangle(model.intersection, model.skew); + + let halfWidth = style.Section.sectionWidth / 2; + const switchWidth = style.Section.sectionWidth + style.Section.sectionBeyondWidth*2 + 0.8; + const swPadding = style.Switch.switchLen; + const directx = this.triangle.drictx; + const directy = this.triangle.dricty; + const direct = -this.triangle.drictx * this.triangle.dricty; + const coverLength = switchWidth * 1.5; + + this.swCore = new ESwCore({ + zlevel: this.zlevel, + z: this.z, + style: style, + intersectionX: model.intersection.x, + intersectionY: model.intersection.y, + coverLength: coverLength, + lineWidth: switchWidth, + triangle: this.triangle + }); + + halfWidth += 0.3; + const point1 = [model.intersection.x - directx * halfWidth, model.intersection.y + directy * halfWidth]; + const point2 = [point1[0] + directx * switchWidth / this.triangle.getSinRate(), point1[1]]; + const point3 = [point2[0] + directx * this.triangle.getCotRate() * swPadding, point2[1] + directy * swPadding]; + const point4 = [point3[0] + direct * this.triangle.getSin(switchWidth), point3[1] - direct * this.triangle.getCos(switchWidth)]; + this.locShelter = new Polygon({ + zlevel: this.zlevel, + z: this.z, + shape: { + points: [ + point1, point2, point3, point4 + ] + }, + style: { + fill: style.backgroundColor + }, + cursor: 'pointer', + onmouseover: () => { this.name.getArrowText().show(); }, + onmouseout: () => { this.name.getArrowText().hide(); } + }); + const lpx = Math.abs(this.triangle.getCos(1)); + this.locShelter.position = [directx * lpx, -directy * 0.2]; + this.locShelter.show(); + + const slen = switchWidth / this.triangle.getSinRate(); + const rpoint1 = [model.intersection.x + directx * halfWidth, model.intersection.y - directy * halfWidth]; + const rpoint2 = [rpoint1[0] + directx * (swPadding + switchWidth * this.triangle.getCotRate()), rpoint1[1]]; + const rpoint3 = [rpoint2[0], rpoint2[1] + directy * switchWidth]; + const rpoint4 = [rpoint1[0] + this.triangle.getCos(slen), rpoint1[1] + this.triangle.getSin(slen)]; + this.relocShelter = new Polygon({ + zlevel: this.zlevel, + z: this.z, + shape: { + points: [ + rpoint1, rpoint2, rpoint3, rpoint4 + ] + }, + style: { + fill: style.backgroundColor + }, + cursor: 'pointer', + onmouseover: () => { this.name.getArrowText().show(); }, + onmouseout: () => { this.name.getArrowText().hide(); } + }); + const rpx = Math.abs(this.triangle.getCos(halfWidth)) + 0.2; + this.relocShelter.position = [-directx * rpx, -directy * 0.2]; + this.relocShelter.hide(); + + const sinX = style.Section.sectionWidth / this.triangle.getSinRate(); + const switchWidth1 = style.Section.sectionWidth / 2; + const width1 = switchWidth1 * this.triangle.getSinRate(); + const height1 = switchWidth1 * this.triangle.getCosRate(); + const width2 = (height1 + switchWidth1) / this.triangle.getTanRate(); + const width3 = sinX - width2 - width1; + const switchPoint1 = [model.intersection.x + directx * width3, model.intersection.y - directy * switchWidth1]; + const switchPoint2 = [switchPoint1[0] - directx * (width2 + width1) - directx * width3, switchPoint1[1]]; + const switchPoint3 = [model.intersection.x - directx * width3, model.intersection.y + directy * switchWidth1]; + const switchPoint4 = [switchPoint1[0] + directx * (width2 + width1) - directx * width3, switchPoint3[1]]; + this.reserveSection = new Polygon({ + zlevel: this.zlevel, + shape: { + points: [ + switchPoint1, switchPoint2, switchPoint3, switchPoint4 + ] + }, + style: { + fill: style.Section.sectionSpareColor + }, + cursor: 'pointer', + onmouseover: () => { this.name.getArrowText().show(); }, + onmouseout: () => { this.name.getArrowText().hide(); } + }); + this.reserveSection.hide(); + + this.releaseBackground = new Line({ + zlevel: this.zlevel, + z: this.z, + shape: { + x1: model.intersection.x - (coverLength * this.triangle.getCotRate()), + y1: model.intersection.y, + x2: model.intersection.x + (coverLength * this.triangle.getCotRate()), + y2: model.intersection.y + }, + style: { + lineWidth: style.Section.sectionWidth + style.Section.sectionBeyondWidth + 1, + stroke: style.backgroundColor + } + }); + + const arrowTextX = model.intersection.x + 10; + const arrowTextY = model.intersection.y + 15; + const nameTextX = model.namePosition.x + model.intersection.x + this.triangle.drictx * (style.Section.sectionWidth * 3 + style.Switch.switchNameDistance) * this.triangle.getCotRate(); + const nameTextY = model.namePosition.y + model.intersection.y + this.triangle.dricty * (style.Switch.switchNameDistance); + this.name = new ESwName({ + zlevel: this.zlevel, + z: this.z, + style: style, + arrowTextX: arrowTextX, + arrowTextY: arrowTextY, + nameTextX: nameTextX, + nameTextY: nameTextY, + sectionName: model.sectionName, + name: model.name, + nameShow: model.nameShow, + triangle: this.triangle + }); + + this.add(this.swCore); + this.add(this.locShelter); + this.add(this.relocShelter); + this.add(this.reserveSection); + this.add(this.releaseBackground); + this.add(this.name); + } + + /** 名称动画*/ + nameTextAnimation() { + this.name.getNameText().animateStyle(true) + .when(0, { textFill: this.style.backgroundColor }) + .when(1000, { textFill: this.style.Switch.switchTextLossColor }) + .when(2000, { textFill: this.style.backgroundColor }) + .start(); + + this.name.getTextRect().animateStyle(true) + .when(0, { textFill: this.style.backgroundColor }) + .when(1000, { textFill: this.style.Switch.switchTextBorderColor }) + .when(2000, { textFill: this.style.backgroundColor }) + .start(); + } + + /** 设置岔芯是否隐藏*/ + setSwitchCoreInvisible(invisible) { + if (invisible) { + this.swCore.hide(); + } else { + this.swCore.show(); + } + } + + /** 设置岔芯颜色*/ + setSwitchCoreColor(color) { + this.swCore.setColor(color); + } + + /** 设置道岔文字颜色*/ + setTextColor(color) { + this.name.getNameText().setStyle('textFill', color); + } + + /** 设置道岔文字边框颜色 */ + setHasTextBorder(width) { + this.name.getTextRect().setStyle('lineWidth', width); + } + + /** 恢复状态*/ + recover() { + this.setSwitchCoreColor(this.style.backgroundColor); + this.name.getNameText().stopAnimation(false); + this.reserveSection.stopAnimation(false); + this.swCore.stopAnimation(false); + + this.relocShelter.hide(); + this.releaseBackground.hide(); + + this.setHasTextBorder(0); + switch (this.state.locateType) { + case '01': + this.setTextColor(this.style.Switch.switchLocateTextColor); + break; + case '02': + this.setTextColor(this.style.Switch.switchInversionColor); + break; + default: + this.setTextColor(this.style.Switch.switchTextLossColor); + break; + } + } + + /** 定位*/ + setLocationAction() { + this.recover(); + this.setSwitchCoreInvisible(true); + this.locShelter.show(); + this.relocShelter.hide(); + this.reserveSection.hide(); + } + + /** 反位*/ + setInversionAction() { + this.recover(); + this.setSwitchCoreInvisible(true); + this.locShelter.hide(); + this.relocShelter.show(); + this.reserveSection.show(); + } + + /** 失去*/ + setLossAction(nameFlicker) { + this.recover(); + this.locShelter.hide(); + this.relocShelter.hide(); + this.reserveSection.hide(); + this.setSwitchCoreInvisible(false); + nameFlicker && this.nameTextAnimation(); + } + + /** 挤叉*/ + setForkAction() { + this.setLossAction(true); + this.swCore.animateStyle(item => { + item.animateStyle(true) + .when(0, { stroke: this.style.backgroundColor }) + .when(1000, { stroke: 'red' }) + .when(2000, { stroke: this.style.backgroundColor }) + .start(); + }); + } + + /** 空闲*/ + spare() { + } + + /** 单锁*/ + setMonolock() { + this.setTextColor(this.style.Switch.switchMonolockColor); + } + + /** 封锁 */ + block() { + this.setHasTextBorder(1); + } + + /** 延时释放*/ + timeRelease() { + this.setSwitchCoreInvisible(true); + this.releaseBackground.show(); + } + + /** 设置道岔切除*/ + setSwitchCutOff() { + this.setSwitchCoreInvisible(true); + switch (this.model.locateType) { + case '01': + this.releaseBackground.hide(); + this.setSectionState(this.release, 'stroke', this.model.sectionAstatus); + break; + case '02': + this.reserveSection.animateStyle(true) + .when(1000, { fill: this.style.backgroundColor }) + .start(); + break; + } + } + + setSectionState(section, style, state) { + if (section) { + switch (state) { + case '00': break; + case '01': /** 空闲*/ + section.setStyle(style, this.style.Section.sectionSpareColor); + break; + case '02': /** 通信车占用*/ + section.setStyle(style, this.style.Section.sectionCommunicationOccupiedColor); + break; + case '03': /** 非通信车占用*/ + section.setStyle(style, this.style.Section.sectionUnCommunicationOccupiedColor); + break; + case '04': /** 进路锁闭*/ + section.setStyle(style, this.style.Section.sectionRouteLockColor); + break; + case '05': /** 故障锁闭*/ + section.setStyle(style, this.style.Section.sectionFaultLockColor); + break; + case '06': /** 封锁*/ + section.setStyle(style, this.style.Section.sectionBlockColor); + break; + case '07': /** ATC切除*/ + section.setStyle(style, this.style.Section.sectionAtcExcisionColor); + break; + case '08': /** ATS切除*/ + section.setStyle(style, this.style.Section.sectionAtsExcisionColor); + section.animateStyle(true) + .when(1000, { fill: this.style.backgroundColor }) + .when(2000, { fill: this.style.Section.sectionAtsExcisionColor }) + .start(); + break; + case '09': /** 进路延续保护 */ + section.setStyle(style, this.style.Section.sectionProtectiveLockColor); + break; + } + } + } + + setLocateType(state) { + this.setSectionState(this.reserveSection, 'fill', this.model.sectionCstatus); + switch (state.locateType) { + case '01': + this.setLocationAction(); /** 定位*/ + break; + case '02': + this.setInversionAction(); /** 反位*/ + break; + case '03': + this.setLossAction(true); /** 失去*/ + break; + case '04': + this.setForkAction(); /** 挤岔*/ + break; + } + } + + setState(state) { + this.setLocateType(state); + switch (state.status) { + case '01': + this.spare(); /** 空闲*/ + break; + case '10': + this.setMonolock(); /** 单锁*/ + break; + case '13': + this.timeRelease(); /** 延时释放*/ + break; + case '14': + this.block(); /** 封锁*/ + break; + } + + /** 区段切除*/ + if (state.cutOff) { + this.setSwitchCutOff(); + } + } + + getShapeTipPoint() { + let rect = null; + rect = this.name.getNameText().getBoundingRect(); + if (rect) { + return { + x: rect.x + rect.width / 2, + y: rect.y + }; + } + return null; + } +} diff --git a/src/jmap/shape/Switch/index.js b/src/jmap/shape/Switch/index.js index b2f17bdc3..7cd9bc12f 100644 --- a/src/jmap/shape/Switch/index.js +++ b/src/jmap/shape/Switch/index.js @@ -3,10 +3,11 @@ */ import Line from 'zrender/src/graphic/shape/Line'; import Group from 'zrender/src/container/Group'; -import Polygon from 'zrender/src/graphic/shape/Polygon'; import JTriangle from '../../utils/JTriangle'; import ESwName from './ESwName.js'; import ESwCore from './ESwCore.js'; +import ESwLocal from './ESwLocal.js'; +import ESwLnversion from './ESwLnversion'; export default class Switch extends Group { constructor({ _code, _type, zlevel, model, state }, style, jmap) { @@ -55,75 +56,45 @@ export default class Switch extends Group { const point2 = [point1[0] + directx * switchWidth / this.triangle.getSinRate(), point1[1]]; const point3 = [point2[0] + directx * this.triangle.getCotRate() * swPadding, point2[1] + directy * swPadding]; const point4 = [point3[0] + direct * this.triangle.getSin(switchWidth), point3[1] - direct * this.triangle.getCos(switchWidth)]; - this.locShelter = new Polygon({ // 定位道岔 + this.locShelter = new ESwLocal({ zlevel: this.zlevel, z: this.z, - shape: { - points: [ - point1, point2, point3, point4 - ] - }, - style: { - fill: style.backgroundColor - }, + style: style, + shelterPoints: [point1, point2, point3, point4], cursor: 'pointer', + triangle: this.triangle, onmouseover: () => { this.name.getArrowText().show(); }, onmouseout: () => { this.name.getArrowText().hide(); } }); - const lpx = Math.abs(this.triangle.getCos(1)); - this.locShelter.position = [directx * lpx, -directy * 0.2]; - this.locShelter.show(); const slen = switchWidth / this.triangle.getSinRate(); const rpoint1 = [model.intersection.x + directx * halfWidth, model.intersection.y - directy * halfWidth]; const rpoint2 = [rpoint1[0] + directx * (swPadding + switchWidth * this.triangle.getCotRate()), rpoint1[1]]; const rpoint3 = [rpoint2[0], rpoint2[1] + directy * switchWidth]; const rpoint4 = [rpoint1[0] + this.triangle.getCos(slen), rpoint1[1] + this.triangle.getSin(slen)]; - this.relocShelter = new Polygon({ // 反位道岔 - zlevel: this.zlevel, - z: this.z, - shape: { - points: [ - rpoint1, rpoint2, rpoint3, rpoint4 - ] - }, - style: { - fill: style.backgroundColor - }, - cursor: 'pointer', - onmouseover: () => { this.name.getArrowText().show(); }, - onmouseout: () => { this.name.getArrowText().hide(); } - }); - const rpx = Math.abs(this.triangle.getCos(halfWidth)) + 0.2; - this.relocShelter.position = [-directx * rpx, -directy * 0.2]; - this.relocShelter.hide(); - const sinX = style.Section.sectionWidth / this.triangle.getSinRate(); const switchWidth1 = style.Section.sectionWidth / 2; const width1 = switchWidth1 * this.triangle.getSinRate(); const height1 = switchWidth1 * this.triangle.getCosRate(); const width2 = (height1 + switchWidth1) / this.triangle.getTanRate(); - const width3 = sinX - width2 - width1; - const switchPoint1 = [model.intersection.x + directx * width3, model.intersection.y - directy * switchWidth1]; - const switchPoint2 = [switchPoint1[0] - directx * (width2 + width1) - directx * width3, switchPoint1[1]]; - const switchPoint3 = [model.intersection.x - directx * width3, model.intersection.y + directy * switchWidth1]; - const switchPoint4 = [switchPoint1[0] + directx * (width2 + width1) - directx * width3, switchPoint3[1]]; - this.reserveSection = new Polygon({ // 道岔中心 + const width3 = (style.Section.sectionWidth / this.triangle.getSinRate()) - width2 - width1; + const spoint1 = [model.intersection.x + directx * width3, model.intersection.y - directy * switchWidth1]; + const spoint2 = [spoint1[0] - directx * (width2 + width1) - directx * width3, spoint1[1]]; + const spoint3 = [model.intersection.x - directx * width3, model.intersection.y + directy * switchWidth1]; + const spoint4 = [spoint1[0] + directx * (width2 + width1) - directx * width3, spoint3[1]]; + + this.relocShelter = new ESwLnversion({ zlevel: this.zlevel, z: this.z, - shape: { - points: [ - switchPoint1, switchPoint2, switchPoint3, switchPoint4 - ] - }, - style: { - fill: style.Section.sectionSpareColor - }, + style: style, + shelterPoints: [rpoint1, rpoint2, rpoint3, rpoint4], + sectionPoints: [spoint1, spoint2, spoint3, spoint4], cursor: 'pointer', + halfWidth: halfWidth, + triangle: this.triangle, onmouseover: () => { this.name.getArrowText().show(); }, onmouseout: () => { this.name.getArrowText().hide(); } }); - this.reserveSection.hide(); this.releaseBackground = new Line({ // 区段上遮盖段 zlevel: this.zlevel, @@ -161,7 +132,6 @@ export default class Switch extends Group { this.add(this.swCore); // 岔芯link this.add(this.locShelter); this.add(this.relocShelter); - this.add(this.reserveSection); this.add(this.releaseBackground); this.add(this.name); } @@ -209,9 +179,8 @@ export default class Switch extends Group { recover() { this.setSwitchCoreColor(this.style.backgroundColor); this.name.getNameText().stopAnimation(false); - this.reserveSection.stopAnimation(false); this.swCore.stopAnimation(false); - + this.relocShelter.stopAnimation(false); this.relocShelter.hide(); this.releaseBackground.hide(); @@ -235,7 +204,6 @@ export default class Switch extends Group { this.setSwitchCoreInvisible(true); this.locShelter.show(); this.relocShelter.hide(); - this.reserveSection.hide(); } /** 反位*/ @@ -244,7 +212,6 @@ export default class Switch extends Group { this.setSwitchCoreInvisible(true); this.locShelter.hide(); this.relocShelter.show(); - this.reserveSection.show(); } /** 失去*/ @@ -252,7 +219,6 @@ export default class Switch extends Group { this.recover(); this.locShelter.hide(); this.relocShelter.hide(); - this.reserveSection.hide(); this.setSwitchCoreInvisible(false); nameFlicker && this.nameTextAnimation(); } @@ -295,10 +261,10 @@ export default class Switch extends Group { switch (this.model.locateType) { case '01': this.releaseBackground.hide(); - this.setSectionState(this.release, 'stroke', this.model.sectionAstatus); + this.setSectionState(this.relocShelter.getSection(), 'stroke', this.model.sectionAstatus); break; case '02': - this.reserveSection.animateStyle(true) + this.relocShelter.getSection().animateStyle(true) .when(1000, { fill: this.style.backgroundColor }) .start(); break; @@ -345,7 +311,7 @@ export default class Switch extends Group { } setLocateType(state) { - this.setSectionState(this.reserveSection, 'fill', this.model.sectionCstatus); + this.setSectionState(this.relocShelter.getSection(), 'fill', this.model.sectionCstatus); switch (state.locateType) { case '01': this.setLocationAction(); /** 定位*/ diff --git a/src/jmap/theme/bejing.js b/src/jmap/theme/bejing.js index a2c393a6f..e4af39b45 100644 --- a/src/jmap/theme/bejing.js +++ b/src/jmap/theme/bejing.js @@ -4,8 +4,18 @@ import deviceType from '../constant/deviceType'; class Beijing extends defaultSkin { constructor() { super(); - this.Link = { - textFontColor: '' + this[deviceType.Link] = { + /** line 颜色*/ + lineWidthColor: '#FFFFFF', + + /** link 宽度*/ + linkWidth: 4.4, + + /** link 线条颜色*/ + linkColor: '#3F3F3F', + + /** link 字体颜色*/ + linkTextColor: '#FFFFFF' }; this[deviceType.Section] = { sectionTextPosition: 1, // 区段名称位置 1 上行 -1 下面 0 默认 @@ -70,9 +80,9 @@ class Beijing extends defaultSkin { }; this[deviceType.Signal] = { /** 信号机宽度 */ - signalR: 6, + signalR: 7, /** 自动信号宽度*/ - signalSigPassWidth: 6, + signalSigPassWidth: 5, /** 延迟解锁字体大小*/ signalDelayTextFontSize: 10, /** 信号机名称字体大小*/ @@ -80,7 +90,7 @@ class Beijing extends defaultSkin { /** 灯柱宽度*/ signalLampStandardWidth: 1.2, /** 设备距离区段的距离*/ - signalDistance: 3, + signalDistance: 0, /** 信号灯按钮距离区段的距离*/ signalButtonDistance: 5, /** 自动进路方向*/ diff --git a/src/jmap/theme/chengdu.js b/src/jmap/theme/chengdu.js index 67d7aa617..f7d132424 100644 --- a/src/jmap/theme/chengdu.js +++ b/src/jmap/theme/chengdu.js @@ -1,57 +1,70 @@ import defaultSkin from '../config/defaultSkin'; import deviceType from '../constant/deviceType'; -class Fuzhou extends defaultSkin { +class Beijing extends defaultSkin { constructor() { super(); - this.Link = { - textFontColor: '' + this[deviceType.Link] = { + /** line 颜色*/ + lineWidthColor: '#FFFFFF', + + /** link 宽度*/ + linkWidth: 4.4, + + /** link 线条颜色*/ + linkColor: '#3F3F3F', + + /** link 字体颜色*/ + linkTextColor: '#FFFFFF' }; this[deviceType.Section] = { + sectionTextPosition: 1, // 区段名称位置 1 上行 -1 下面 0 默认 /** 区段 宽度*/ sectionWidth: 5, /** 区段宽超出宽度*/ - sectionBeyondWidth: 1, + sectionBeyondWidth: 0, /** 计轴 半径*/ sectionAxleR: 3, - /** 计轴和区段之间的距离*/ /** 需要添加*/ + /** 计轴和区段之间的距离*/ sectionAxleDistance: 5, - /** 限速线的宽短*/ + /** 限速线的宽度*/ sectionSpeedLimitLinewidth: 1, /** 限速线距离区段距离*/ sectionSpeedLimitDistance: 5, - sectionSeparatorWidth: 1.2, // 分隔符宽度 - sectionEndSeparatorWidth: 3.5, // 尽头分隔符宽度 - sectionEndSeparatorStroke: '#3F3F3F', // 尽头分隔符颜色 + /** 分隔符宽度*/ + sectionSeparatorWidth: 1.2, + sectionEndSeparatorWidth: 1.2, // 尽头分隔符宽度 + sectionEndSeparatorStroke: '#C0C0C0', // 尽头分隔符颜色 /** 区段侵入颜色*/ - sectionInvadeColor: '#EF0C08', + sectionInvadeColor: '#C00808', /** 限速线颜色*/ - sectionSpeedLimitColor: '#FFFF00', - sectionLogicalBackgroundColor: '#FFFF00', // 逻辑区段颜色 + sectionSpeedLimitColor: '#C0C000', + /** 逻辑区段颜色*/ + sectionLogicalBackgroundColor: '#C0C000', /** 区段计轴颜色*/ - sectionAxleColor: '#FFFFFF', + sectionAxleColor: '#C0C0C0', /** 区段边界符颜色*/ - sectionSeparatorColor: '#3149C3', + sectionSeparatorColor: '#C0C0C0', /** 区段空闲颜色*/ - sectionSpareColor: '#3F3F3F', + sectionSpareColor: '#5B5893', /** 逻辑区段名称颜色*/ sectionLogicalTextColor: '#FFFFFF', /** 区段通信车占用颜色**/ - sectionCommunicationOccupiedColor: '#FF329A', + sectionCommunicationOccupiedColor: '#FF00FF', /** 区段非通讯车占用颜色*/ - sectionUnCommunicationOccupiedColor: '#FE0000', + sectionUnCommunicationOccupiedColor: '#DE310C', /** 区段路由锁定颜色*/ - sectionRouteLockColor: '#FFFFFF', + sectionRouteLockColor: '#00FF00', /** 区段故障锁定颜色*/ - sectionFaultLockColor: '#9B4A0A', + sectionFaultLockColor: '#FFFFFF', /** 区段未定义颜色*/ sectionUndefinedColor: '#0071C1', /** 保护区段锁闭*/ - sectionProtectionSectionLockedColor: '#FEFF00', + sectionProtectionSectionLockedColor: '#00FF00', /** 区段计轴预复位*/ sectionAxleResetColor: '#00FFFF', /** 区段封锁颜色*/ - sectionBlockColor: '#800080', + sectionBlockColor: '#00FFFF', /** 区段atc切除颜色*/ sectionAtcExcisionColor: '#A0522D', /** 区段ats切除颜色*/ @@ -59,16 +72,17 @@ class Fuzhou extends defaultSkin { /** 区段延时释放颜色*/ sectionTimeReleaseColor: '#3F3F3F', /** 区段保护锁闭*/ - sectionProtectiveLockColor: '#FFFF00', + sectionProtectiveLockColor: '#00C957', /** 区段保护延时解锁*/ sectionProtectiveTimeReleaseColor: '#0071C1', - sectionAxleFailure: '#E6A23C' // #FFFF00 计轴失效 + /** 计轴失效*/ + sectionAxleFailure: '#B18F38' }; this[deviceType.Signal] = { /** 信号机宽度 */ - signalR: 5, + signalR: 6.5, /** 自动信号宽度*/ - signalSigPassWidth: 10, + signalSigPassWidth: 5, /** 延迟解锁字体大小*/ signalDelayTextFontSize: 10, /** 信号机名称字体大小*/ @@ -76,11 +90,23 @@ class Fuzhou extends defaultSkin { /** 灯柱宽度*/ signalLampStandardWidth: 1.2, /** 设备距离区段的距离*/ - signalDistance: 3, + signalDistance: 0, /** 信号灯按钮距离区段的距离*/ signalButtonDistance: 5, + /** 自动进路方向*/ + signalSigRouteDirection: false, + /** 自动进路偏移量*/ + signalSigRouteOffset: { x: 4, y: -2 }, + /** 自动通过方向*/ + signalSigPassDirection: true, + /** 自动通过偏移量*/ + signalSigPassOffset: { x: 4, y: 0}, + /** 延时解锁方向*/ + signalSigDelayDirection: false, + /** 延时解锁偏移量*/ + signalSigDelayOffset: { x: 0, y: -5}, /** 信号灯按钮边线*/ - signalButtonDashColor: '#FFFFFF', + signalButtonDashColor: '#C0C0C0', /** 信号灯按钮颜色*/ signalButtonColor: 'darkgreen', /** 信号灯按钮闪烁颜色*/ @@ -88,9 +114,9 @@ class Fuzhou extends defaultSkin { /** 信号灯字体颜色*/ signalTextRed: '#EF0C08', /** 信号机字体绿色*/ - signalTextGreen: '#4DD43F', + signalTextGreen: '#00FF00', /** 信号灯灯柱颜色*/ - signalLampStandardColor: '#3149C3', + signalLampStandardColor: '#FFFFFF', /** 信号灯锁闭*/ signalBlockColor: '#EF0C08', /** 信号灯灰色*/ @@ -104,39 +130,41 @@ class Fuzhou extends defaultSkin { /** 信号灯白色*/ signalLampWhiteColor: '#FFFFFF', /** 信号灯蓝色*/ - signalLampBlueColor: '#0070C0' + signalLampBlueColor: '#0000FF' }; this[deviceType.StationStand] = { /** 站台和屏蔽门之间的距离*/ - standDistance: 8, + standDistance: 1.5, /** 站台屏蔽门高度*/ - standSafeHeight: 3, + standSafeHeight: 4, /** 站台首端字体大小*/ - standHeadFontSize: 10, + standHeadFontSize: 8, /** 站台默认字体大小*/ - standTextFontSize: 10, + standTextFontSize: 8, /** 站台紧急关闭半径*/ standEmergentR: 4, /** 站台紧急关闭偏移量*/ - standEmergentOffset: {x: 0, y: 40}, + standEmergentOffset: {x: 0, y: -15}, /** 扣车方向*/ standDetainDirection: -1, /** 扣车偏移量*/ - standDetainOffset: {x: -8, y: -6}, + standDetainOffset: {x: -12, y: -20}, /** 运行时间方向*/ standTimeDirection: 1, /** 运行时间偏移量*/ - standTimeOffset: {x: -8, y: 26}, + standTimeOffset: {x: -12, y: 5}, /** 运行等级方向*/ standLevelDirection: 1, /** 运行等级偏移量*/ - standLevelOffset: {x: -8, y: 6}, + standLevelOffset: {x: -12, y: 20}, /** 折返方向*/ standReentryDirection: 0, /** 折返偏移量*/ - standReentryOffset: {x: -16, y: 20}, + standReentryOffset: {x: -16, y: 18}, /** 扣车显示内容*/ - standDetainText: 'H', + standDetainText: '扣', + /** 跳停显示内容*/ + standJumpText: '跳', /** 站台无人折返*/ standNoHumanReentryColor: '#0F16DA', /** 站台自动换端*/ @@ -179,8 +207,9 @@ class Fuzhou extends defaultSkin { stationDelayUnlockBorderColor: '#FFFFFF' }; this[deviceType.StationControl] = { - singleControlNum: 2, - arrowsShow: true, + singleControlNum: 3, + stationOffset: {x: 20, y: 0}, + arrowsShow: false, // 控制模式箭头显隐 /** 控制模式字体大小*/ stationControlTextSize: 10, /** 控制模式灯的半径 */ @@ -197,7 +226,7 @@ class Fuzhou extends defaultSkin { stationControlYellowColor: '#FFFF00' }; this[deviceType.Station] = { - kilometerPosition: 'up' + kilometerPosition: 'down' // 公里标位置 }; this[deviceType.Switch] = { /** 道岔单边长度 */ @@ -207,17 +236,17 @@ class Fuzhou extends defaultSkin { /** 道岔边框颜色*/ switchTextBorderColor: '#FE0000', /** 道岔失去颜色*/ - switchTextLossColor: '#FFFFFF', + switchTextLossColor: '#C00808', /** 道岔定位颜色*/ - switchLocateTextColor: '#00FF00', + switchLocateTextColor: '#08C008', /** 道岔反位颜色*/ - switchInversionColor: '#9C9D09', + switchInversionColor: '#C0C000', /** 道岔单锁颜色*/ - switchMonolockColor: '#870E10' + switchMonolockColor: '#FFFFFF' }; } } -const fuzhouSkin = new Fuzhou(); +const chengduSkin = new Beijing(); -export default fuzhouSkin; +export default chengduSkin; diff --git a/src/jmap/theme/fuzhou.js b/src/jmap/theme/fuzhou.js index 3c8268319..acca5e351 100644 --- a/src/jmap/theme/fuzhou.js +++ b/src/jmap/theme/fuzhou.js @@ -4,8 +4,18 @@ import deviceType from '../constant/deviceType'; class Fuzhou extends defaultSkin { constructor() { super(); - this.Link = { - textFontColor: '' + this[deviceType.Link] = { + /** line 颜色*/ + lineWidthColor: '#FFFFFF', + + /** link 宽度*/ + linkWidth: 4.4, + + /** link 线条颜色*/ + linkColor: '#3F3F3F', + + /** link 字体颜色*/ + linkTextColor: '#FFFFFF' }; this[deviceType.Section] = { sectionTextPosition: 0, // 区段名称位置 1 上行 -1 下面 0 默认 diff --git a/src/jmap/utils/parser.js b/src/jmap/utils/parser.js index 1362c365c..613f10dbf 100644 --- a/src/jmap/utils/parser.js +++ b/src/jmap/utils/parser.js @@ -80,9 +80,9 @@ export function parser(data, jmap) { }, this); zrUtil.each(data.switchList || [], elem => { - const cnodeSection = mapDevice[elem.sectionACode]; - const lnodeSection = mapDevice[elem.sectionBCode]; - const rnodeSection = mapDevice[elem.sectionCCode]; + const cnodeSection = elem['sectionA'] = mapDevice[elem.sectionACode]; + const lnodeSection = elem['sectionB'] = mapDevice[elem.sectionBCode]; + const rnodeSection = elem['sectionC'] =mapDevice[elem.sectionCCode]; if (cnodeSection && lnodeSection && rnodeSection) { const cnode = mapDevice[cnodeSection.model.linkCode]; if (cnode && cnode.model.leftFdCode === lnodeSection.model.linkCode && cnode.model.leftSdCode === rnodeSection.model.linkCode) {