diff --git a/src/jmap/config/defaultSkin.js b/src/jmap/config/defaultSkin.js index 917dd35f6..170edabda 100644 --- a/src/jmap/config/defaultSkin.js +++ b/src/jmap/config/defaultSkin.js @@ -68,90 +68,6 @@ export default class DefaultSkin { this.zcControlmodeR = 4; - /** 区段 宽度*/ - this.sectionWidth = 4.4; - - /** 区段宽超出宽度*/ - this.sectionBeyondWidth = 0; - - /** 计轴 半径*/ - this.sectionAxleR = 3; - - /** 计轴和区段之间的距离*/ - this.sectionAxleDistance = 5; - - /** 限速线的宽度*/ - this.sectionSpeedLimitLinewidth = 1; - - /** 限速线距离区段距离*/ - this.sectionSpeedLimitDistance = 5; - - /** 分隔符宽度*/ - this.sectionSeparatorWidth = 1.2; - - /** 区段侵入颜色*/ - this.sectionInvadeColor = '#EF0C08'; - - /** 限速线颜色*/ - this.sectionSpeedLimitColor = '#FFFF00'; - - /** 逻辑区段颜色*/ - this.sectionLogicalBackgroundColor = '#FFFF00'; - - /** 区段计轴颜色*/ - this.sectionAxleColor = '#C0C0C0'; - - /** 区段边界符颜色*/ - this.sectionSeparatorColor = '#7F7F7F'; - - /** 区段空闲颜色*/ - this.sectionSpareColor = '#606060'; - - /** 逻辑区段名称颜色*/ - this.sectionLogicalTextColor = '#C0C0C0'; - - /** 区段通信车占用颜色**/ - this.sectionCommunicationOccupiedColor = '#FF0000'; - - /** 区段非通讯车占用颜色*/ - this.sectionUnCommunicationOccupiedColor = '#800080'; - - /** 区段路由锁定颜色*/ - this.sectionRouteLockColor = '#FFFFFF'; - - /** 区段故障锁定颜色*/ - this.sectionFaultLockColor = '#006400'; - - /** 区段未定义颜色*/ - this.sectionUndefinedColor = '#0071C1'; - - /** 保护区段锁闭*/ - this.sectionProtectionSectionLockedColor = '#FEFF00'; - - /** 区段计轴预复位*/ - this.sectionAxleResetColor = '#00FFFF'; - - /** 区段封锁颜色*/ - this.sectionBlockColor = '#800080'; - - /** 区段atc切除颜色*/ - this.sectionAtcExcisionColor = '#A0522D'; - - /** 区段ats切除颜色*/ - this.sectionAtsExcisionColor = '#A0522D'; - - /** 区段延时释放颜色*/ - this.sectionTimeReleaseColor = '#3F3F3F'; - - /** 区段保护锁闭*/ - this.sectionProtectiveLockColor = '#FFFF00'; - - /** 区段保护延时解锁*/ - this.sectionProtectiveTimeReleaseColor = '#0071C1'; - - /** 计轴失效*/ - this.sectionAxleFailure = '#E6A23C'; // #FFFF00 - /** 道岔单边长度 */ this.switchLen = 6; diff --git a/src/jmap/constant/deviceType.js b/src/jmap/constant/deviceType.js index 86e8c21ae..b9ec52ffc 100644 --- a/src/jmap/constant/deviceType.js +++ b/src/jmap/constant/deviceType.js @@ -18,5 +18,4 @@ const deviceType = { Text: 'Text' }; -console.log(deviceType, 4444); export default deviceType; diff --git a/src/jmap/shape/Section.js b/src/jmap/shape/Section.js index bd064b1f9..a39dad7c7 100644 --- a/src/jmap/shape/Section.js +++ b/src/jmap/shape/Section.js @@ -1,409 +1,12 @@ import Group from 'zrender/src/container/Group'; -import Rect from 'zrender/src/graphic/shape/Rect'; -import Polyline from 'zrender/src/graphic/shape/Polyline'; -import Circle from 'zrender/src/graphic/shape/Circle'; -import Line from 'zrender/src/graphic/shape/Line'; -import BezierCurve from 'zrender/src/graphic/shape/BezierCurve'; -import Text from 'zrender/src/graphic/Text'; +import ETextName from './element/ETextName'; // 名称文字 (共有) +import ELine from './element/ELine'; // 线段 (共有) +import ELimitLines from './element/ELimitLines'; // 区段限速 (私有) +import ELines from './element/ELines'; // 创建多线条 曲线 (私有) +import ESeparator from './element/ESeparator'; // 分隔符 (私有) +import EAxle from './element/EAxle'; // 创建计轴 (私有) import JTriangle from '../utils/JTriangle'; -/** 计轴*/ -class SectionAxle extends Group { - constructor(model) { - super(); - this.model = model; - this.zlevel = model.zlevel; - this.z = 5; - this._create(model); - } - - _create(model) { - if (model && model.style && model.traingle) { - const axleLength = 2 * model.style.sectionAxleR; - const positionx = model.point.x + model.drictx * (model.traingle.getCos(axleLength)); - const positiony = model.point.y + model.dricty * (model.traingle.getCos(axleLength)); - - this.line = new Line({ - zlevel: this.zlevel, - z: this.z, - shape: { - x1: positionx - model.traingle.getCos(axleLength) - model.dricty * model.traingle.getSin(axleLength), - y1: positiony + model.drictx * model.traingle.getSin(axleLength) - model.traingle.getSin(axleLength), - x2: positionx + model.traingle.getCos(axleLength) - model.dricty * model.traingle.getSin(axleLength), - y2: positiony + model.drictx * model.traingle.getSin(axleLength) + model.traingle.getSin(axleLength) - }, - style: { - GBaseLineWidth: 1, - stroke: model.style.sectionAxleColor - } - }); - this.axle = new Circle({ - zlevel: this.zlevel, - z: this.z, - shape: { - cx: positionx - model.dricty * model.traingle.getSin(axleLength), - cy: positiony + model.drictx * model.traingle.getSin(axleLength), - r: model.style.sectionAxleR - }, - style: { - GBaseLineWidth: 1, - stroke: model.style.sectionAxleColor, - fill: model.style.transparentColor - } - }); - - this.add(this.line); - this.add(this.axle); - } - } -} - -/** 分隔符*/ -class SectionSeparator extends Group { - constructor(model) { - super(); - this.model = model; - this.zlevel = model.zlevel; - this.z = 6; - this._create(model); - } - - _create(model) { - if (model && model.style) { - this.partition = new Polyline({ - zlevel: this.zlevel, - z: this.z, - shape: { - points: [ - [model.point.x, model.point.y], - [model.point.x, model.point.y] - ] - }, - style: { - lineWidth: model.style.sectionSeparatorWidth, - stroke: model.style.sectionSeparatorColor - } - }); - - this.circle = new Circle({ - zlevel: this.zlevel, - z: this.z + 9, - shape: { - cx: model.point.x, - cy: model.point.y, - r: model.style.sectionWidth - }, - style: { - stroke: model.style.sectionInvadeColor, - GBaseLineWidth: 0.5, - fill: model.style.transparentColor - } - }); - - this.add(this.partition); - this.setType(model.sepType, model.borderBorderShow); - } - } - - setType(type, show) { - const model = this.model; - if (model && model.style && model.traingle) { - this.remove(this.circle); - if (type === '00') { - this.partition.setShape('points', [ - [model.point.x, model.point.y], - [model.point.x, model.point.y] - ]); - } else if (type === '01') { - this.partition.setShape('points', [ - [model.point.x, model.point.y - (model.style.sectionWidth)], - [model.point.x, model.point.y + (model.style.sectionWidth)] - ]); - this.add(this.partition); - } else if (type === '02') { - this.partition.setShape('points', [ - [model.point.x + model.drict * (model.style.sectionWidth), model.point.y - (model.style.sectionWidth * 1.5)], - [model.point.x, model.point.y - (model.style.sectionWidth * 1.5)], - [model.point.x, model.point.y + (model.style.sectionWidth * 1.5)] - ]); - this.add(this.partition); - } else if (type === '03') { - this.partition.setShape('points', [ - [model.point.x + model.drict * (model.style.sectionWidth) * 1.2, model.point.y - (model.style.sectionWidth * 1.2)], - [model.point.x, model.point.y - (model.style.sectionWidth * 1.2)], - [model.point.x, model.point.y + (model.style.sectionWidth * 1.2)], - [model.point.x + model.drict * (model.style.sectionWidth) * 1.2, model.point.y + (model.style.sectionWidth * 1.2)] - ]); - this.add(this.partition); - } else if (type === '04') { - this.add(this.circle); - } - } - - if (model.traingle) { - this.origin = [model.point.x, model.point.y]; - this.rotation = Math.PI * 2 - Math.atan2(model.traingle.absy, model.traingle.absx) * model.traingle.drictx * model.traingle.dricty; - this.dirty(); // 可以无需调用 - } - - if (this.partition) { - if (type === '03' && !show) { - this.partition.hide(); - } else { - this.partition.show(); - } - } - } -} - -/** 创建区段限速限集合*/ -class LimitLines extends Group { - constructor(model) { - super(); - this.model = model; - this.zlevel = model.zlevel; - this.z = model.z; - this._create(model); - } - - _create(model) { - /** 创建区段*/ - if (model && model.points.length > 1) { - if (model.isCurve) { - const shape = {}; - for (let i = 1; i < (model.points.length - 1); i++) { - shape[`cpx${i}`] = model.points[i].x; - shape[`cpy${i}`] = model.points[i].y; - } - - shape[`x1`] = model.points[0].x; - shape[`y1`] = model.points[0].y; - shape[`x2`] = model.points[model.points.length - 1].x; - shape[`y2`] = model.points[model.points.length - 1].y; - - this.add(new BezierCurve({ - isLine: true, - zlevel: this.zlevel, - z: this.z + 10, - culling: true, - shape: shape, - position: model.position, - style: { - lineWidth: model.style.sectionSpeedLimitLinewidth, - stroke: model.style.sectionSpeedLimitColor, - fillOpacity: 0 - } - })); - } else { - // const swPadding = model.style.switchLen; // 定位和反位时区段距离岔芯的距离 - // var switchWidth = model.style.sectionWidth + model.style.sectionBeyondWidth; // 道岔宽度 - const beg = Object.assign({}, model.points[0]); - const end = Object.assign({}, model.points[model.points.length - 1]); - // if (model.isSwitchSection && beg.y !== end.y) { - // const swch = store.getters['map/getDeviceByCode'](model.relSwitchCode); - // if (swch) { - // const traingle = new JTriangle(swch.intersection, swch.skew); - // if ((swch.intersection.x === beg.x) && (swch.intersection.y === beg.y)) { - // beg.x = beg.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate(); - // beg.y = beg.y + traingle.dricty * (swPadding + switchWidth); - // } - - // if ((swch.intersection.x === end.x) && (swch.intersection.y === end.y)) { - // end.x = end.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate(); - // end.y = end.y + traingle.dricty * (swPadding + switchWidth); - // } - // } - // } - - if (model.points.length == 2) { - this.add(new Line({ - isLine: true, - zlevel: this.zlevel, - z: this.z, - position: model.position, - shape: { - x1: beg.x, - y1: beg.y, - x2: end.x, - y2: end.y - }, - style: { - lineWidth: model.style.sectionSpeedLimitLinewidth, - stroke: model.style.sectionSpeedLimitColor - } - })); - } else { - this.add(new Line({ - isLine: true, - zlevel: this.zlevel, - z: this.z, - position: model.position, - shape: { - x1: beg.x, - y1: beg.y, - x2: model.points[1].x, - y2: model.points[1].y - }, - style: { - lineWidth: model.style.sectionSpeedLimitLinewidth, - stroke: model.style.sectionSpeedLimitColor - } - })); - - for (let i = 1; i < (model.points.length - 2); i++) { - this.add(new Line({ - isLine: true, - zlevel: this.zlevel, - z: this.z, - position: model.position, - shape: { - x1: model.points[i].x, - y1: model.points[i].y, - x2: model.points[i + 1].x, - y2: model.points[i + 1].y - }, - style: { - lineWidth: model.style.sectionSpeedLimitLinewidth, - stroke: model.style.sectionSpeedLimitColor - } - })); - } - - this.add(new Line({ - isLine: true, - zlevel: this.zlevel, - z: this.z, - position: model.position, - shape: { - x1: model.points[model.points.length - 2].x, - y1: model.points[model.points.length - 2].y, - x2: end.x, - y2: end.y - }, - style: { - lineWidth: model.style.sectionSpeedLimitLinewidth, - stroke: model.style.sectionSpeedLimitColor - } - })); - } - } - } - } -} - -/** 创建区段线集合*/ -class Lines extends Group { - constructor(model) { - super(); - this.model = model; - this.zlevel = model.zlevel; - this.z = model.z; - this._create(model); - } - - _create(model) { - /** 创建区段*/ - if (model && model.points.length > 1) { - if (model.isCurve) { - const shape = {}; - for (let i = 1; i < (model.points.length - 1); i++) { - shape[`cpx${i}`] = model.points[i].x; - shape[`cpy${i}`] = model.points[i].y; - } - - shape[`x1`] = model.points[0].x; - shape[`y1`] = model.points[0].y; - shape[`x2`] = model.points[model.points.length - 1].x; - shape[`y2`] = model.points[model.points.length - 1].y; - - this.add(new BezierCurve({ - isLine: true, - zlevel: this.zlevel, - z: this.z + 10, - culling: true, - shape: shape, - style: { - lineWidth: model.style.sectionWidth, - stroke: model.style.sectionSpareColor, - fillOpacity: 0 - } - })); - } else { - for (let i = 0; i < (model.points.length - 1); i++) { - this.add(new Line({ - isLine: true, - zlevel: this.zlevel, - z: this.z, - shape: { - x1: model.points[i].x, - y1: model.points[i].y, - x2: model.points[i + 1].x, - y2: model.points[i + 1].y - }, - style: { - lineWidth: model.style.sectionWidth, - stroke: model.style.sectionSpareColor - } - })); - } - } - - if (!model.isSwitchSection) { - this.lineBorder = new Rect({ - zlevel: this.zlevel, - z: this.z - 1, - silent: true, - shape: this.getBoundingRect(), - style: { - lineDash: [3, 3], - stroke: model.style.borderColor, - fill: model.style.transparentColor - } - }); - - this.add(this.lineBorder); - } - } - } - - setStyle(styles) { - this.eachChild((child) => { - if (child.setStyle && child.isLine) { - child.setStyle(styles); - } - }); - } - - animateStyle(loop, animates) { - if (animates && animates.length) { - this.eachChild((child) => { - if (child.animateStyle && child.isLine) { - let an = child.animateStyle(loop); - animates.forEach(elem => { - an = an.when(elem.time, elem.styles); - }); - an.start(); - } - }); - } - } - - stopAnimation(flag) { - this.eachChild((child) => { - if (child.stopAnimation && child.isLine) { - child.stopAnimation(flag); - } - }); - } - - setBorderVisible(isVisible) { - this.lineBorder && this.lineBorder.hide(); - if (isVisible) { - this.lineBorder && this.lineBorder.show(); - } - } -} - /** 区段*/ export default class Section extends Group { constructor({ _code, _type, zlevel, model, state }, style, jmap) { @@ -419,9 +22,9 @@ export default class Section extends Group { this.jmap = jmap; this._create(); - this.on('mousedown', this.mouseclick); - this.on('mouseout', this.mouseleave); - this.on('mouseover', this.mouseenter); + // this.on('mousedown', this.mouseclick); + // this.on('mouseout', this.mouseleave); + // this.on('mouseover', this.mouseenter); } _create() { @@ -450,7 +53,7 @@ export default class Section extends Group { const style = this.style; // 创建区段 - this.section = new Lines({ + this.section = new ELines({ zlevel: this.zlevel, z: this.z, isSwitchSection: model.isSwitchSection, @@ -461,7 +64,8 @@ export default class Section extends Group { // 创建延时释放 const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]); - this.release = new Line({ + + this.release = new ELine({ zlevel: model.zlevel + 1, z: this.z, shape: { @@ -470,19 +74,17 @@ export default class Section extends Group { x2: model.points[0].x + traingle.getCos(traingle.absz / 3 * 2), y2: model.points[0].y + traingle.getSin(traingle.absz / 3 * 2) }, - style: { - lineWidth: style.sectionWidth, - stroke: style.sectionSpareColor - } + lineWidth: style.Section.sectionWidth, + stroke: style.Section.sectionSpareColor }); - let x = traingle.drictx * (style.sectionSpeedLimitDistance) * traingle.getSinRate(); - let y = traingle.dricty * (style.sectionSpeedLimitDistance) * traingle.getCosRate(); + let x = traingle.drictx * (style.Section.sectionSpeedLimitDistance) * traingle.getSinRate(); + let y = traingle.dricty * (style.Section.sectionSpeedLimitDistance) * traingle.getCosRate(); if (x == Infinity) { x = 0; } if (y == Infinity) { y = 0; } // 创建限速线 - this.speedLimitLeft = new LimitLines({ + this.speedLimitLeft = new ELimitLines({ zlevel: this.zlevel + 4, z: this.z, position: [x, -y], @@ -493,7 +95,7 @@ export default class Section extends Group { style: style }); - this.speedLimitRight = new LimitLines({ + this.speedLimitRight = new ELimitLines({ zlevel: this.zlevel + 4, z: this.z, position: [-x, y], @@ -523,7 +125,7 @@ export default class Section extends Group { /** 区段名称*/ if (model.nameShow) { let tempx = x; - let tempy = y - (style.sectionWidth + style.textFontSize + style.nameDistance); + let tempy = y - (style.Section.sectionWidth + style.textFontSize + style.nameDistance); // 如果不是道岔区段 if (model.type !== '03') { @@ -541,52 +143,48 @@ export default class Section extends Group { // 创建区段名称 const fontSize = style.type == '02' ? style.textFontSize + 2 : style.textFontSize; - this.sectionText = new Text({ + this.sectionText = new ETextName({ _subType: 'Text', zlevel: this.zlevel + 3, z: 6, - style: { - x: tempx, - y: tempy, - text: model.name, - textFont: fontSize + 'px ' + style.textFontFormat, - textFill: style.textFontColor, - textAlign: 'center', - textPosition: 'inside' - } + x: tempx, + y: tempy, + text: model.name, + textFont: fontSize + 'px ' + style.textFontFormat, + textFill: style.textFontColor, + textAlign: 'center', + textPosition: 'inside', + style: this.style }); this.add(this.sectionText); - if (!model.isSwitchSection) { - this.sectionTextBorder = new Rect({ - zlevel: model.zlevel + 3, - z: 5, - shape: this.sectionText.getBoundingRect(), - style: { - lineDash: [3, 3], - stroke: '#fff', // 白色 - fill: model.type == '02' ? style.sectionLogicalBackgroundColor : '#00FFFF' // 蓝色 - } - }); - this.add(this.sectionTextBorder); - } + // if (!model.isSwitchSection) { + // this.sectionTextBorder = new Rect({ + // zlevel: model.zlevel + 3, + // z: 5, + // shape: this.sectionText.getBoundingRect(), + // style: { + // lineDash: [3, 3], + // stroke: '#fff', // 白色 + // fill: model.type == '02' ? style.sectionLogicalBackgroundColor : '#00FFFF' // 蓝色 + // } + // }); + // this.add(this.sectionTextBorder); + // } - this.sectionTextShadow = new Text({ - zlevel: this.zlevel + 3, - z: 5, - position: [4, -2], - silent: true, - style: { - x: tempx, - y: tempy, - text: model.name, - textFill: style.textShadowColor, // 黄色 - textAlign: 'middle', - textVerticalAlign: 'top', - textFont: 'bold ' + (fontSize + 1) + 'px ' + style.textFontFormat - } - }); - this.add(this.sectionTextShadow); + // this.sectionTextShadow = new ETextName({ + // zlevel: this.zlevel + 3, + // z: 5, + // x: tempx, + // y: tempy, + // text: model.name, + // textFont: 'bold ' + (fontSize + 1) + 'px ' + style.textFontFormat + // textFill: style.textShadowColor, + // textAlign: 'middle', + // textPosition: 'top', + // style: this.style + // }); + // this.add(this.sectionTextShadow); } /** 站台轨名称*/ @@ -600,42 +198,37 @@ export default class Section extends Group { tempy += traingle.getCos(style.nameDistance); // 创建站台轨名称 - this.standTrackText = new Text({ + this.standTrackText = new ETextName({ zlevel: this.zlevel + 3, z: 6, - style: { - x: tempx + model.standTrackNamePosition.x, - y: tempy + model.standTrackNamePosition.y, - text: model.standTrackName, - textFont: style.textFontSize + 'px ' + style.textFontFormat, - textFill: style.textFontColor, - textAlign: 'center', - textPosition: 'inside' - } + x: tempx + model.standTrackNamePosition.x, + y: tempy + model.standTrackNamePosition.y, + text: model.standTrackName, + textFont: style.textFontSize + 'px ' + style.textFontFormat, + textFill: style.textFontColor, + textAlign: 'center', + textPosition: 'inside', + style: this.style }); - // 添加视图 this.add(this.standTrackText); - } /** 折返轨名称*/ if (model.isReentryTrack && model.reentryTrackNameShow) { // 创建折返轨名称 - this.reentryTrackText = new Text({ + this.reentryTrackText = new ETextName({ zlevel: this.zlevel + 3, z: 6, - style: { - x: x + model.reentryTrackNamePosition.x, - y: y + model.reentryTrackNamePosition.y + style.nameDistance + style.textFontSize, - text: model.reentryTrackName, - textFont: style.textFontSize + 'px ' + style.textFontFormat, - textFill: style.textFontColor, - textAlign: 'center', - textPosition: 'inside' - } + x: x + model.reentryTrackNamePosition.x, + y: y + model.reentryTrackNamePosition.y + style.nameDistance + style.textFontSize, + text: model.reentryTrackName, + textFont: style.textFontSize + 'px ' + style.textFontFormat, + textFill: style.textFontColor, + textAlign: 'center', + textPosition: 'inside', + style: this.style }); - // 添加视图 this.add(this.reentryTrackText); } @@ -643,20 +236,18 @@ export default class Section extends Group { /** 转换轨名称*/ if (model.isTransferTrack && model.transferTrackNameShow) { // 转换轨名称 - this.transferTrackText = new Text({ + this.transferTrackText = new ETextName({ zlevel: this.zlevel + 3, z: 6, - style: { - x: x + model.transferTrackNamePosition.x, - y: y + model.transferTrackNamePosition.y + style.nameDistance + style.textFontSize * 2, - text: model.transferTrackName, - textFont: style.textFontSize + 'px ' + style.textFontFormat, - textFill: style.textFontColor, - textAlign: 'center', - textPosition: 'inside' - } + x: x + model.transferTrackNamePosition.x, + y: y + model.transferTrackNamePosition.y + style.nameDistance + style.textFontSize * 2, + text: model.transferTrackName, + textFont: style.textFontSize + 'px ' + style.textFontFormat, + textFill: style.textFontColor, + textAlign: 'center', + textPosition: 'inside', + style: this.style }); - // 添加视图 this.add(this.transferTrackText); } @@ -664,20 +255,18 @@ export default class Section extends Group { /** 目的码名称*/ if (model.destinationCode && model.destinationCodeShow) { // 转换轨名称 - this.destinationText = new Text({ + this.destinationText = new ETextName({ zlevel: this.zlevel + 3, z: 6, - style: { - x: x + model.destinationCodePoint.x, - y: y + model.destinationCodePoint.y, - text: model.destinationCode, - textFont: style.textFontSize + 'px ' + style.textFontFormat, - textFill: style.destinationTextFontColor, - textAlign: 'center', - textPosition: 'inside' - } + x: x + model.destinationCodePoint.x, + y: y + model.destinationCodePoint.y, + text: model.destinationCode, + textFont: style.textFontSize + 'px ' + style.textFontFormat, + textFill: style.destinationTextFontColor, + textAlign: 'center', + textPosition: 'inside', + style: this.style }); - // 添加视图 this.add(this.destinationText); } @@ -693,7 +282,7 @@ export default class Section extends Group { let traingle = null; if (model && style && model.axleShow && model.points && model.points.length > 1) { traingle = new JTriangle(model.points[0], model.points[1]); - this.lUpAxle = new SectionAxle({ + this.lUpAxle = new EAxle({ style: style, zlevel: this.zlevel, point: { @@ -704,7 +293,7 @@ export default class Section extends Group { dricty: -1, traingle: traingle }); - this.lBottomAxle = new SectionAxle({ + this.lBottomAxle = new EAxle({ style: style, zlevel: this.zlevel, point: { @@ -717,7 +306,7 @@ export default class Section extends Group { }); traingle = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]); - this.rUpAxle = new SectionAxle({ + this.rUpAxle = new EAxle({ style: style, zlevel: this.zlevel, point: { @@ -728,7 +317,7 @@ export default class Section extends Group { dricty: -1, traingle: traingle }); - this.rBottomAxle = new SectionAxle({ + this.rBottomAxle = new EAxle({ style: style, zlevel: this.zlevel, point: { @@ -756,7 +345,7 @@ export default class Section extends Group { if (model && style && model.points && model.points.length > 1) { /** 创建左侧分隔符*/ traingle = new JTriangle(model.points[0], model.points[1]); - this.lPartition = new SectionSeparator({ + this.lPartition = new ESeparator({ style: style, borderBorderShow: model.borderBorderShow, zlevel: this.zlevel - 2, @@ -771,7 +360,7 @@ export default class Section extends Group { /** 创建右侧分隔符*/ traingle = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]); - this.rPartition = new SectionSeparator({ + this.rPartition = new ESeparator({ style: style, borderBorderShow: model.borderBorderShow, zlevel: this.zlevel - 2, @@ -804,8 +393,8 @@ export default class Section extends Group { this.section.stopAnimation(true); this.section.setStyle({ fill: this.style.backgroundColor, - stroke: this.style.sectionSpareColor, - lineWidth: this.style.sectionWidth + stroke: this.style.Section.sectionSpareColor, + lineWidth: this.style.Section.sectionWidth }); this.release.hide(); @@ -814,137 +403,137 @@ export default class Section extends Group { } } - /** 未定义状态*/ + /** 未定义状态 00*/ undefine() { if (this.section) { this.section.setStyle({ - stroke: this.style.sectionUndefinedColor, - lineWidth: this.style.sectionWidth + stroke: this.style.Section.sectionUndefinedColor, + lineWidth: this.style.Section.sectionWidth }); } } - /** 空闲状态*/ + /** 空闲状态 01*/ spare() { if (this.section) { this.section.setStyle({ - stroke: this.style.sectionSpareColor, - lineWidth: this.style.sectionWidth + stroke: this.style.Section.sectionSpareColor, + lineWidth: this.style.Section.sectionWidth }); } } - /** 通信车占用状态*/ + /** 通信车占用状态 02*/ communicationOccupied() { if (this.section) { this.section.setStyle({ - stroke: this.style.sectionCommunicationOccupiedColor, - lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth + stroke: this.style.Section.sectionCommunicationOccupiedColor, + lineWidth: this.style.Section.sectionWidth + this.style.Section.sectionBeyondWidth }); } } - /** 非通信车占用状态*/ + /** 非通信车占用状态 03*/ unCommunicationOccupied() { if (this.section) { this.section.setStyle({ - stroke: this.style.sectionUnCommunicationOccupiedColor, - lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth + stroke: this.style.Section.sectionUnCommunicationOccupiedColor, + lineWidth: this.style.Section.sectionWidth + this.style.Section.sectionBeyondWidth }); } } - /** 进路锁闭*/ + /** 进路锁闭 04*/ routeLock() { if (this.section) { this.section.setStyle({ - stroke: this.style.sectionRouteLockColor, - lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth + stroke: this.style.Section.sectionRouteLockColor, + lineWidth: this.style.Section.sectionWidth + this.style.Section.sectionBeyondWidth }); } } - /** 封锁*/ + /** 封锁 06*/ block() { if (this.section) { this.section.setStyle({ - stroke: this.style.sectionBlockColor, - lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth + stroke: this.style.Section.sectionBlockColor, + lineWidth: this.style.Section.sectionWidth + this.style.Section.sectionBeyondWidth }); } } - /** 故障锁定状态*/ + /** 故障锁定状态 05*/ faultLock() { if (this.section) { this.section.setStyle({ - stroke: this.style.sectionFaultLockColor, - lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth + stroke: this.style.Section.sectionFaultLockColor, + lineWidth: this.style.Section.sectionWidth + this.style.Section.sectionBeyondWidth }); } } - /** atc切除状态*/ + /** atc切除状态 07*/ atcExcision() { if (this.section) { this.section.setStyle({ - stroke: this.style.sectionAtcExcisionColor, - lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth + stroke: this.style.Section.sectionAtcExcisionColor, + lineWidth: this.style.Section.sectionWidth + this.style.Section.sectionBeyondWidth }); } } - /** ats切除状态*/ + /** ats切除状态 08*/ atsExcision() { if (this.section) { this.atcExcision(); this.section.animateStyle(true, [ { time: 1000, styles: { stroke: this.style.backgroundColor } }, - { time: 2000, styles: { stroke: this.style.sectionAtsExcisionColor, lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth } } + { time: 2000, styles: { stroke: this.style.Section.sectionAtsExcisionColor, lineWidth: this.style.Section.sectionWidth + this.style.Section.sectionBeyondWidth } } ]); } } - /** 保护区段锁闭*/ + /** 保护区段锁闭 09*/ protectiveLock() { if (this.section) { this.section.setStyle({ - stroke: this.style.sectionProtectiveLockColor, - lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth + stroke: this.style.Section.sectionProtectiveLockColor, + lineWidth: this.style.Section.sectionWidth + this.style.Section.sectionBeyondWidth }); } } - /** 延时释放*/ + /** 延时释放 10*/ timeRelease() { if (this.release) { this.section.setStyle({ - stroke: this.style.sectionRouteLockColor, - lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth + stroke: this.style.Section.sectionRouteLockColor, + lineWidth: this.style.Section.sectionWidth + this.style.Section.sectionBeyondWidth }); this.release.show(); - this.release.setStyle('lineWidth', this.style.sectionWidth + this.style.sectionBeyondWidth); - this.release.setStyle('stroke', this.style.sectionRouteLockColor); + this.release.setStyle('lineWidth', this.style.Section.sectionWidth + this.style.Section.sectionBeyondWidth); + this.release.setStyle('stroke', this.style.Section.sectionRouteLockColor); this.release.animateStyle(true) - .when(1000, { stroke: this.style.sectionRouteLockColor }) - .when(2000, { stroke: this.style.sectionTimeReleaseColor }) + .when(1000, { stroke: this.style.Section.sectionRouteLockColor }) + .when(2000, { stroke: this.style.Section.sectionTimeReleaseColor }) .start(); } } - /** 保护区段延时解锁*/ + /** 保护区段延时解锁 11*/ protectiveTimeRelease() { if (this.release) { this.section.setStyle({ - stroke: this.style.sectionProtectiveLockColor, - lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth + stroke: this.style.Section.sectionProtectiveLockColor, + lineWidth: this.style.Section.sectionWidth + this.style.Section.sectionBeyondWidth }); this.release.show(); - this.release.setStyle('lineWidth', this.style.sectionWidth + this.style.sectionBeyondWidth); - this.release.setStyle('stroke', this.style.sectionProtectiveLockColor); + this.release.setStyle('lineWidth', this.style.Section.sectionWidth + this.style.Section.sectionBeyondWidth); + this.release.setStyle('stroke', this.style.Section.sectionProtectiveLockColor); this.release.animateStyle(true) - .when(1000, { stroke: this.style.sectionProtectiveLockColor }) - .when(2000, { stroke: this.style.sectionProtectiveTimeReleaseColor }) + .when(1000, { stroke: this.style.Section.sectionProtectiveLockColor }) + .when(2000, { stroke: this.style.Section.sectionProtectiveTimeReleaseColor }) .start(); } } @@ -952,7 +541,7 @@ export default class Section extends Group { /** 区段切除*/ sectionCutOff() { if (this.release) { - const lineWidth = this.style.sectionWidth + (this.model.status != '01' ? this.style.sectionBeyondWidth : 0); + const lineWidth = this.style.Section.sectionWidth + (this.model.status != '01' ? this.style.Section.sectionBeyondWidth : 0); this.section.animateStyle(true, [ { time: 0, styles: { lineWidth: lineWidth } }, { time: 1000, styles: { stroke: this.style.backgroundColor } }, @@ -969,22 +558,22 @@ export default class Section extends Group { } } - /** 计轴预复位*/ + /** 计轴预复位 12*/ axleReset() { if (this.release) { this.release.show(); this.release.setStyle({ - stroke: this.style.sectionAxleResetColor + stroke: this.style.Section.sectionAxleResetColor }); } } - /** 计轴失效*/ + /** 计轴失效 13*/ alxeFailure() { if (this.section) { this.section.setStyle({ - stroke: this.style.sectionAxleFailure, - lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth + stroke: this.style.Section.sectionAxleFailure, + lineWidth: this.style.Section.sectionWidth + this.style.Section.sectionBeyondWidth }); } } @@ -1053,7 +642,7 @@ export default class Section extends Group { /** 计算提示位置*/ getShapeTipPoint() { let rect = this.getBoundingRect(); - let distance = this.style.sectionWidth / 2; + let distance = this.style.Section.sectionWidth / 2; if (this.section) { rect = this.section.getBoundingRect(); if (this.model.type !== '02' && this.model.nameShow) { diff --git a/src/jmap/shape/Switch.js b/src/jmap/shape/Switch.js index 2298dd569..57487168f 100644 --- a/src/jmap/shape/Switch.js +++ b/src/jmap/shape/Switch.js @@ -43,8 +43,8 @@ export default class Switch extends Group { const model = this.model; const style = this.style; - var halfWidth = style.sectionWidth / 2; - var switchWidth = style.sectionWidth + style.sectionBeyondWidth*2 + 0.8; + var halfWidth = style.Section.sectionWidth / 2; + var switchWidth = style.Section.sectionWidth + style.Section.sectionBeyondWidth*2 + 0.8; var swPadding = style.switchLen; var directx = this.triangle.drictx; var directy = this.triangle.dricty; @@ -134,8 +134,8 @@ export default class Switch extends Group { this.relocShelter.position = [-directx * rpx, -directy * 0.2]; this.relocShelter.hide(); - var sinX = style.sectionWidth / this.triangle.getSinRate(); - var switchWidth1 = style.sectionWidth / 2; + var sinX = style.Section.sectionWidth / this.triangle.getSinRate(); + var switchWidth1 = style.Section.sectionWidth / 2; var width1 = switchWidth1 * this.triangle.getSinRate(); var height1 = switchWidth1 * this.triangle.getCosRate(); var width2 = (height1 + switchWidth1) / this.triangle.getTanRate(); @@ -152,7 +152,7 @@ export default class Switch extends Group { ] }, style: { - fill: style.sectionSpareColor + fill: style.Section.sectionSpareColor }, cursor: 'pointer', onmouseover: () => { this.arrowText.show(); }, @@ -170,7 +170,7 @@ export default class Switch extends Group { y2: model.intersection.y }, style: { - lineWidth: style.sectionWidth + style.sectionBeyondWidth + 1, + lineWidth: style.Section.sectionWidth + style.Section.sectionBeyondWidth + 1, stroke: style.backgroundColor } }); @@ -235,7 +235,7 @@ export default class Switch extends Group { zlevel: this.zlevel, z: this.z + 3, style: { - x: model.namePosition.x + model.intersection.x + this.triangle.drictx * (style.sectionWidth * 3 + style.nameDistance) * this.triangle.getCotRate(), + x: model.namePosition.x + model.intersection.x + this.triangle.drictx * (style.Section.sectionWidth * 3 + style.nameDistance) * this.triangle.getCotRate(), y: model.namePosition.y + model.intersection.y + this.triangle.dricty * (style.nameDistance), text: model.name, textAlign: this.triangle.drictx === 1 ? 'left' : 'right', @@ -423,35 +423,35 @@ export default class Switch extends Group { switch (state) { case '00': break; case '01': /** 空闲*/ - section.setStyle(style, this.style.sectionSpareColor); + section.setStyle(style, this.style.Section.sectionSpareColor); break; case '02': /** 通信车占用*/ - section.setStyle(style, this.style.sectionCommunicationOccupiedColor); + section.setStyle(style, this.style.Section.sectionCommunicationOccupiedColor); break; case '03': /** 非通信车占用*/ - section.setStyle(style, this.style.sectionUnCommunicationOccupiedColor); + section.setStyle(style, this.style.Section.sectionUnCommunicationOccupiedColor); break; case '04': /** 进路锁闭*/ - section.setStyle(style, this.style.sectionRouteLockColor); + section.setStyle(style, this.style.Section.sectionRouteLockColor); break; case '05': /** 故障锁闭*/ - section.setStyle(style, this.style.sectionFaultLockColor); + section.setStyle(style, this.style.Section.sectionFaultLockColor); break; case '06': /** 封锁*/ - section.setStyle(style, this.style.sectionBlockColor); + section.setStyle(style, this.style.Section.sectionBlockColor); break; case '07': /** ATC切除*/ - section.setStyle(style, this.style.sectionAtcExcisionColor); + section.setStyle(style, this.style.Section.sectionAtcExcisionColor); break; case '08': /** ATS切除*/ - section.setStyle(style, this.style.sectionAtsExcisionColor); + section.setStyle(style, this.style.Section.sectionAtsExcisionColor); section.animateStyle(true) .when(1000, { fill: this.style.backgroundColor }) - .when(2000, { fill: this.style.sectionAtsExcisionColor }) + .when(2000, { fill: this.style.Section.sectionAtsExcisionColor }) .start(); break; case '09': /** 进路延续保护 */ - section.setStyle(style, this.style.sectionProtectiveLockColor); + section.setStyle(style, this.style.Section.sectionProtectiveLockColor); break; } } diff --git a/src/jmap/shape/element/EAxle.js b/src/jmap/shape/element/EAxle.js new file mode 100644 index 000000000..6abaa3a80 --- /dev/null +++ b/src/jmap/shape/element/EAxle.js @@ -0,0 +1,54 @@ +import Group from 'zrender/src/container/Group'; +import Line from 'zrender/src/graphic/shape/Line'; +import Circle from 'zrender/src/graphic/shape/Circle'; + +/** 计轴*/ +export default class EAxle extends Group { + constructor(model) { + super(); + this.model = model; + this.zlevel = model.zlevel; + this.z = 5; + this._create(model); + } + + _create(model) { + if (model && model.style && model.traingle) { + const axleLength = 2 * model.style.Section.sectionAxleR; + const positionx = model.point.x + model.drictx * (model.traingle.getCos(axleLength)); + const positiony = model.point.y + model.dricty * (model.traingle.getCos(axleLength)); + + this.line = new Line({ + zlevel: this.zlevel, + z: this.z, + shape: { + x1: positionx - model.traingle.getCos(axleLength) - model.dricty * model.traingle.getSin(axleLength), + y1: positiony + model.drictx * model.traingle.getSin(axleLength) - model.traingle.getSin(axleLength), + x2: positionx + model.traingle.getCos(axleLength) - model.dricty * model.traingle.getSin(axleLength), + y2: positiony + model.drictx * model.traingle.getSin(axleLength) + model.traingle.getSin(axleLength) + }, + style: { + GBaseLineWidth: 1, + stroke: model.style.Section.sectionAxleColor + } + }); + this.axle = new Circle({ + zlevel: this.zlevel, + z: this.z, + shape: { + cx: positionx - model.dricty * model.traingle.getSin(axleLength), + cy: positiony + model.drictx * model.traingle.getSin(axleLength), + r: model.style.Section.sectionAxleR + }, + style: { + GBaseLineWidth: 1, + stroke: model.style.Section.sectionAxleColor, + fill: model.style.transparentColor + } + }); + + this.add(this.line); + this.add(this.axle); + } + } +} diff --git a/src/jmap/shape/element/ELimitLines.js b/src/jmap/shape/element/ELimitLines.js new file mode 100644 index 000000000..da330264c --- /dev/null +++ b/src/jmap/shape/element/ELimitLines.js @@ -0,0 +1,138 @@ +import Group from 'zrender/src/container/Group'; +import BezierCurve from 'zrender/src/graphic/shape/BezierCurve'; +import Line from 'zrender/src/graphic/shape/Line'; + +/** 创建区段限速限集合*/ +export default class ELimitLines extends Group { + constructor(model) { + super(); + this.model = model; + this.zlevel = model.zlevel; + this.z = model.z; + this._create(model); + } + + _create(model) { + /** 创建区段*/ + if (model && model.points.length > 1) { + if (model.isCurve) { + const shape = {}; + for (let i = 1; i < (model.points.length - 1); i++) { + shape[`cpx${i}`] = model.points[i].x; + shape[`cpy${i}`] = model.points[i].y; + } + + shape[`x1`] = model.points[0].x; + shape[`y1`] = model.points[0].y; + shape[`x2`] = model.points[model.points.length - 1].x; + shape[`y2`] = model.points[model.points.length - 1].y; + + this.add(new BezierCurve({ + isLine: true, + zlevel: this.zlevel, + z: this.z + 10, + culling: true, + shape: shape, + position: model.position, + style: { + lineWidth: model.style.Section.sectionSpeedLimitLinewidth, + stroke: model.style.Section.sectionSpeedLimitColor, + fillOpacity: 0 + } + })); + } else { + // const swPadding = model.style.switchLen; // 定位和反位时区段距离岔芯的距离 + // var switchWidth = model.style.Section.sectionWidth + model.style.Section.sectionBeyondWidth; // 道岔宽度 + const beg = Object.assign({}, model.points[0]); + const end = Object.assign({}, model.points[model.points.length - 1]); + // if (model.isSwitchSection && beg.y !== end.y) { + // const swch = store.getters['map/getDeviceByCode'](model.relSwitchCode); + // if (swch) { + // const traingle = new JTriangle(swch.intersection, swch.skew); + // if ((swch.intersection.x === beg.x) && (swch.intersection.y === beg.y)) { + // beg.x = beg.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate(); + // beg.y = beg.y + traingle.dricty * (swPadding + switchWidth); + // } + + // if ((swch.intersection.x === end.x) && (swch.intersection.y === end.y)) { + // end.x = end.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate(); + // end.y = end.y + traingle.dricty * (swPadding + switchWidth); + // } + // } + // } + + if (model.points.length == 2) { + this.add(new Line({ + isLine: true, + zlevel: this.zlevel, + z: this.z, + position: model.position, + shape: { + x1: beg.x, + y1: beg.y, + x2: end.x, + y2: end.y + }, + style: { + lineWidth: model.style.Section.sectionSpeedLimitLinewidth, + stroke: model.style.Section.sectionSpeedLimitColor + } + })); + } else { + this.add(new Line({ + isLine: true, + zlevel: this.zlevel, + z: this.z, + position: model.position, + shape: { + x1: beg.x, + y1: beg.y, + x2: model.points[1].x, + y2: model.points[1].y + }, + style: { + lineWidth: model.style.Section.sectionSpeedLimitLinewidth, + stroke: model.style.Section.sectionSpeedLimitColor + } + })); + + for (let i = 1; i < (model.points.length - 2); i++) { + this.add(new Line({ + isLine: true, + zlevel: this.zlevel, + z: this.z, + position: model.position, + shape: { + x1: model.points[i].x, + y1: model.points[i].y, + x2: model.points[i + 1].x, + y2: model.points[i + 1].y + }, + style: { + lineWidth: model.style.Section.sectionSpeedLimitLinewidth, + stroke: model.style.Section.sectionSpeedLimitColor + } + })); + } + + this.add(new Line({ + isLine: true, + zlevel: this.zlevel, + z: this.z, + position: model.position, + shape: { + x1: model.points[model.points.length - 2].x, + y1: model.points[model.points.length - 2].y, + x2: end.x, + y2: end.y + }, + style: { + lineWidth: model.style.Section.sectionSpeedLimitLinewidth, + stroke: model.style.Section.sectionSpeedLimitColor + } + })); + } + } + } + } +} diff --git a/src/jmap/shape/element/ELine.js b/src/jmap/shape/element/ELine.js new file mode 100644 index 000000000..962fe393e --- /dev/null +++ b/src/jmap/shape/element/ELine.js @@ -0,0 +1,63 @@ +import Group from 'zrender/src/container/Group'; +import Line from 'zrender/src/graphic/shape/Line'; + +/** 名称元素*/ +export default class ELine extends Group { + constructor(model) { + super(); + this.model = model; + this.zlevel = model.zlevel; + this.z = model.z; + this._create(); + } + + _create() { + const model = this.model; + this.Lines = new Line({ + zlevel: model.zlevel, + z: this.z, + shape: model.shape, + style: { + lineWidth: model.lineWidth, + stroke: model.stroke + } + }); + this.add(this.Lines); + } + + setStyle(model) { + this.Lines.setStyle(model); + } + + hide() { + this.Lines.hide(); + } + + show() { + this.Lines.show(); + } + + // 开始动画 + animateStyle(loop, animates) { + if (animates && animates.length) { + this.eachChild((child) => { + if (child.animateStyle && child.isLine) { + let an = child.animateStyle(loop); + animates.forEach(elem => { + an = an.when(elem.time, elem.styles); + }); + an.start(); + } + }); + } + } + + // 结束动画 + stopAnimation(flag) { + this.eachChild((child) => { + if (child.stopAnimation && child.isLine) { + child.stopAnimation(flag); + } + }); + } +} diff --git a/src/jmap/shape/element/ELines.js b/src/jmap/shape/element/ELines.js new file mode 100644 index 000000000..0c2e6e79a --- /dev/null +++ b/src/jmap/shape/element/ELines.js @@ -0,0 +1,117 @@ +import Group from 'zrender/src/container/Group'; +import Line from 'zrender/src/graphic/shape/Line'; +import BezierCurve from 'zrender/src/graphic/shape/BezierCurve'; +import Rect from 'zrender/src/graphic/shape/Rect'; + +/** 创建区段线集合*/ +export default class ELines extends Group { + constructor(model) { + super(); + this.model = model; + this.zlevel = model.zlevel; + this.z = model.z; + this._create(model); + } + + _create(model) { + /** 创建区段*/ + if (model && model.points.length > 1) { + if (model.isCurve) { + const shape = {}; + for (let i = 1; i < (model.points.length - 1); i++) { + shape[`cpx${i}`] = model.points[i].x; + shape[`cpy${i}`] = model.points[i].y; + } + + shape[`x1`] = model.points[0].x; + shape[`y1`] = model.points[0].y; + shape[`x2`] = model.points[model.points.length - 1].x; + shape[`y2`] = model.points[model.points.length - 1].y; + + this.add(new BezierCurve({ + isLine: true, + zlevel: this.zlevel, + z: this.z + 10, + culling: true, + shape: shape, + style: { + lineWidth: model.style.Section.sectionWidth, + stroke: model.style.Section.sectionSpareColor, + fillOpacity: 0 + } + })); + } else { + for (let i = 0; i < (model.points.length - 1); i++) { + this.add(new Line({ + isLine: true, + zlevel: this.zlevel, + z: this.z, + shape: { + x1: model.points[i].x, + y1: model.points[i].y, + x2: model.points[i + 1].x, + y2: model.points[i + 1].y + }, + style: { + lineWidth: model.style.Section.sectionWidth, + stroke: model.style.Section.sectionSpareColor + } + })); + } + } + + if (!model.isSwitchSection) { + this.lineBorder = new Rect({ + zlevel: this.zlevel, + z: this.z - 1, + silent: true, + shape: this.getBoundingRect(), + style: { + lineDash: [3, 3], + stroke: model.style.borderColor, + fill: model.style.transparentColor + } + }); + + this.add(this.lineBorder); + } + } + } + + setStyle(styles) { + this.eachChild((child) => { + if (child.setStyle && child.isLine) { + child.setStyle(styles); + } + }); + } + + animateStyle(loop, animates) { + if (animates && animates.length) { + this.eachChild((child) => { + if (child.animateStyle && child.isLine) { + let an = child.animateStyle(loop); + animates.forEach(elem => { + an = an.when(elem.time, elem.styles); + }); + an.start(); + } + }); + } + } + + stopAnimation(flag) { + this.eachChild((child) => { + if (child.stopAnimation && child.isLine) { + child.stopAnimation(flag); + } + }); + } + + setBorderVisible(isVisible) { + this.lineBorder && this.lineBorder.hide(); + if (isVisible) { + this.lineBorder && this.lineBorder.show(); + } + } +} diff --git a/src/jmap/shape/element/ESeparator.js b/src/jmap/shape/element/ESeparator.js new file mode 100644 index 000000000..94e8a0bd3 --- /dev/null +++ b/src/jmap/shape/element/ESeparator.js @@ -0,0 +1,102 @@ +import Group from 'zrender/src/container/Group'; +import Polyline from 'zrender/src/graphic/shape/Polyline'; +import Circle from 'zrender/src/graphic/shape/Circle'; + +/** 分隔符*/ +export default class ESeparator extends Group { + constructor(model) { + super(); + this.model = model; + this.zlevel = model.zlevel; + this.style = model.style; + this.z = 6; + this._create(model); + } + + _create(model) { + if (model && this.style) { + this.partition = new Polyline({ + zlevel: this.zlevel, + z: this.z, + shape: { + points: [ + [model.point.x, model.point.y], + [model.point.x, model.point.y] + ] + }, + style: { + lineWidth: this.style.Section.sectionSeparatorWidth, + stroke: this.style.Section.sectionSeparatorColor + } + }); + + this.circle = new Circle({ + zlevel: this.zlevel, + z: this.z + 9, + shape: { + cx: model.point.x, + cy: model.point.y, + r: this.style.Section.sectionWidth + }, + style: { + stroke: this.style.Section.sectionInvadeColor, + GBaseLineWidth: 0.5, + fill: this.style.transparentColor + } + }); + + this.add(this.partition); + this.setType(model.sepType, model.borderBorderShow); + } + } + + setType(type, show) { + const model = this.model; + if (model && this.style && model.traingle) { + this.remove(this.circle); + if (type === '00') { + this.partition.setShape('points', [ + [model.point.x, model.point.y], + [model.point.x, model.point.y] + ]); + } else if (type === '01') { + this.partition.setShape('points', [ + [model.point.x, model.point.y - (this.style.Section.sectionWidth)], + [model.point.x, model.point.y + (this.style.Section.sectionWidth)] + ]); + this.add(this.partition); + } else if (type === '02') { + this.partition.setShape('points', [ + [model.point.x + model.drict * (this.style.Section.sectionWidth), model.point.y - (this.style.Section.sectionWidth * 1.5)], + [model.point.x, model.point.y - (this.style.Section.sectionWidth * 1.5)], + [model.point.x, model.point.y + (this.style.Section.sectionWidth * 1.5)] + ]); + this.add(this.partition); + } else if (type === '03') { + this.partition.setShape('points', [ + [model.point.x + model.drict * (this.style.Section.sectionWidth) * 1.2, model.point.y - (this.style.Section.sectionWidth * 1.2)], + [model.point.x, model.point.y - (this.style.Section.sectionWidth * 1.2)], + [model.point.x, model.point.y + (this.style.Section.sectionWidth * 1.2)], + [model.point.x + model.drict * (this.style.Section.sectionWidth) * 1.2, model.point.y + (this.style.Section.sectionWidth * 1.2)] + ]); + this.add(this.partition); + } else if (type === '04') { + this.add(this.circle); + } + } + + if (model.traingle) { + this.origin = [model.point.x, model.point.y]; + this.rotation = Math.PI * 2 - Math.atan2(model.traingle.absy, model.traingle.absx) * model.traingle.drictx * model.traingle.dricty; + this.dirty(); // 可以无需调用 + } + + if (this.partition) { + if (type === '03' && !show) { + this.partition.hide(); + } else { + this.partition.show(); + } + } + } +} diff --git a/src/jmap/shape/element/ETextName.js b/src/jmap/shape/element/ETextName.js new file mode 100644 index 000000000..118c688ea --- /dev/null +++ b/src/jmap/shape/element/ETextName.js @@ -0,0 +1,43 @@ +import Group from 'zrender/src/container/Group'; +import Text from 'zrender/src/graphic/Text'; + +/** 名称元素*/ +export default class ETextName extends Group { + constructor(model) { + super(); + this.model = model; + this.zlevel = model.zlevel; + this.z = model.z; + this._create(); + } + + _create() { + this.TextName = new Text({ + _subType: this.model._subType, + zlevel: this.zlevel, + z: this.z, + style: { + x: this.model.x, + y: this.model.y, + text: this.model.text, + textFont: this.model.textFont, + textFill: this.model.textFill, + textAlign: this.model.textAlign, + textPosition: this.model.textPosition + } + }); + this.add(this.TextName); + } + + setStyle(model) { + this.TextName.setStyle(model); + } + + hide() { + this.TextName.hide(); + } + + show() { + this.TextName.show(); + } +} diff --git a/src/jmap/shape/element/Text.js b/src/jmap/shape/element/Text.js deleted file mode 100644 index 89125b099..000000000 --- a/src/jmap/shape/element/Text.js +++ /dev/null @@ -1,2 +0,0 @@ -// import Text from 'zrender/src/graphic/Text'; - diff --git a/src/jmap/shape/factory.js b/src/jmap/shape/factory.js index b9f2ea875..2b8359143 100644 --- a/src/jmap/shape/factory.js +++ b/src/jmap/shape/factory.js @@ -37,6 +37,7 @@ function shapefactory(type, device, jmap) { const style = jmap.getStyleDict(); const shape = mapShape[type]; if (shape instanceof Function) { + // eslint-disable-next-line return new shape(device, style, jmap); } } diff --git a/src/jmap/theme/bejing.js b/src/jmap/theme/bejing.js index 5dbd3faf4..12939e599 100644 --- a/src/jmap/theme/bejing.js +++ b/src/jmap/theme/bejing.js @@ -8,7 +8,62 @@ class Beijing extends defaultSkin { textFontColor: '' }; this.Section = { - + /** 区段 宽度*/ + sectionWidth: 4.4, + /** 区段宽超出宽度*/ + sectionBeyondWidth: 0, + /** 计轴 半径*/ + sectionAxleR: 3, + /** 计轴和区段之间的距离*/ + sectionAxleDistance: 5, + /** 限速线的宽度*/ + sectionSpeedLimitLinewidth: 1, + /** 限速线距离区段距离*/ + sectionSpeedLimitDistance: 5, + /** 分隔符宽度*/ + sectionSeparatorWidth: 1.2, + /** 区段侵入颜色*/ + sectionInvadeColor: '#EF0C08', + /** 限速线颜色*/ + sectionSpeedLimitColor: '#FFFF00', + /** 逻辑区段颜色*/ + sectionLogicalBackgroundColor: '#FFFF00', + /** 区段计轴颜色*/ + sectionAxleColor: '#C0C0C0', + /** 区段边界符颜色*/ + sectionSeparatorColor: '#7F7F7F', + /** 区段空闲颜色*/ + sectionSpareColor: '#606060', + /** 逻辑区段名称颜色*/ + sectionLogicalTextColor: '#C0C0C0', + /** 区段通信车占用颜色**/ + sectionCommunicationOccupiedColor: '#FF0000', + /** 区段非通讯车占用颜色*/ + sectionUnCommunicationOccupiedColor: '#800080', + /** 区段路由锁定颜色*/ + sectionRouteLockColor: '#FFFFFF', + /** 区段故障锁定颜色*/ + sectionFaultLockColor: '#006400', + /** 区段未定义颜色*/ + sectionUndefinedColor: '#0071C1', + /** 保护区段锁闭*/ + sectionProtectionSectionLockedColor: '#FEFF00', + /** 区段计轴预复位*/ + sectionAxleResetColor: '#00FFFF', + /** 区段封锁颜色*/ + sectionBlockColor: '#800080', + /** 区段atc切除颜色*/ + sectionAtcExcisionColor: '#A0522D', + /** 区段ats切除颜色*/ + sectionAtsExcisionColor: '#A0522D', + /** 区段延时释放颜色*/ + sectionTimeReleaseColor: '#3F3F3F', + /** 区段保护锁闭*/ + sectionProtectiveLockColor: '#FFFF00', + /** 区段保护延时解锁*/ + sectionProtectiveTimeReleaseColor: '#0071C1', + /** 计轴失效*/ + sectionAxleFailure: '#E6A23C' // #FFFF00 }; this[deviceType.Signal] = {