From db4795604655545caedacfa3f41203d9941ee6aa Mon Sep 17 00:00:00 2001 From: fan <18706759286@163.com> Date: Mon, 15 Jul 2019 15:30:59 +0800 Subject: [PATCH 1/7] =?UTF-8?q?=E7=AB=99=E5=8F=B0=E3=80=81=E8=BD=A6?= =?UTF-8?q?=E6=AC=A1=E7=AA=97=E3=80=81=E5=88=97=E8=BD=A6=E8=BF=81=E7=A7=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jmap/config/deviceRender.js | 10 + src/jmap/config/deviceStyle.js | 160 +++++++++ src/jmap/config/deviceType.js | 4 +- src/jmap/shape/StationStand.js | 528 +++++++++++++++++++++++++++ src/jmap/shape/Train.js | 620 ++++++++++++++++++++++++++++++++ src/jmap/shape/TrainWindow.js | 129 +++++++ src/jmap/shape/factory.js | 6 + src/jmap/utils/parser.js | 10 + 8 files changed, 1466 insertions(+), 1 deletion(-) create mode 100644 src/jmap/shape/StationStand.js create mode 100644 src/jmap/shape/Train.js create mode 100644 src/jmap/shape/TrainWindow.js diff --git a/src/jmap/config/deviceRender.js b/src/jmap/config/deviceRender.js index b5f0384fc..2f526e8bf 100644 --- a/src/jmap/config/deviceRender.js +++ b/src/jmap/config/deviceRender.js @@ -44,4 +44,14 @@ deviceRender[deviceType.StationControl] = { progressive: 4, } +/** TrainWindow渲染配置*/ +deviceRender[deviceType.TrainWindow] = { + zlevel: 5, + progressive: 4, +}; +/** Train渲染配置*/ +deviceRender[deviceType.TRain] = { + zlevel: 6, + progressive: 4, +}; export default deviceRender; diff --git a/src/jmap/config/deviceStyle.js b/src/jmap/config/deviceStyle.js index 530bec33e..6b5199bf1 100644 --- a/src/jmap/config/deviceStyle.js +++ b/src/jmap/config/deviceStyle.js @@ -166,7 +166,167 @@ fuzhouSkin[deviceType.Signal] = { /** 信号灯蓝色*/ signalLampBlueColor: '#0000FF' }; +fuzhouSkin[deviceType.StationStand] = { + /** 站台空闲颜色*/ + stationStandSpareColor: '#74747C', + /** 列车边线颜色*/ + trainSidelineColor: '#C0C0C0', + + /** 站台和屏蔽门之间的距离*/ + stationStandDistance: 8, + + /** 站台无人折返*/ + stationStandNoHumanReentryColor: '#0F16DA', + + /** 站台首端字体大小*/ + stationStandHeadFontSize: 10, + + /** 中心扣车颜色*/ + stationStandCenterDetainTrainColor: '#FFFFFF', + + /** 默认字体 族类*/ + textFontFormat: '宋体', //consolas + + /** 默认背景 颜色*/ + backgroundColor: '#000000', + + /** 默认字体 大小*/ + textFontSize: 8.2, + + /** 停站时间字体颜色*/ + stationStandTimeTextColor: '#FFFFFF', + + /** 站台紧急关闭颜色*/ + stationStandEmergentCloseColor: '#F61107', + + /** 站台屏蔽门高度*/ + statonStandSafeHeight: 1.6, + + /** 屏蔽门默认颜色*/ + stationStandDoorDefaultColor: '#4DD43F', + + /** 站台列车停站颜色*/ + stationStandStopColor: '#FEFE00', + + /** 站台指定列车跳停颜色*/ + stationStandDesignatedJumpStopColor: 'lightSkyBlue', + + /** 站台跳停颜色*/ + stationStandJumpStopColor: '#9A99FF', + + /** 车站扣除文字颜色*/ + stationstandDetainTrainTextColor: '#E4EF50', + + /** 屏蔽门切除颜色*/ + stationStandSplitDoorColor: '#F61107', + + /** 站台自动换端*/ + stationStandAutoChangeEndsColor: '#0BF400', + + /** 默认border文字背景色*/ + borderContextBackgroundColor: '#00FFFF', + + /** 默认边线 颜色*/ + sidelineColor: '#FFFFFF', + +}; + +fuzhouSkin[deviceType.TrainWindow] = { + /** 车次窗高度*/ + trainWindowWidth: 40, + + /** 车次窗高度*/ + trainWindowHeight: 15, + + /** 车次窗颜色*/ + trainWindowColor: '#4DD43F', + + /** 透明填充 颜色*/ + transparentColor: 'rgba(0,0,0,0)', + +}; + +fuzhouSkin[deviceType.Train] = { + /** 列车长度*/ + trainWidth: 76, + + /** 列车高度*/ + trainHeight: 17, + + /** 列车字号*/ + trainTextFontSize: 15, + + // 列车文字间距 + trainTextSpaceBetween: 27, + + + /** 列车HDSA字号*/ + trainHSDATextFontSize: 8, + + /** 列车信号的半径*/ + trainConflictR: 3, + + /** 列车信号距离车的距离*/ + trainConflictDistance: 5, + + /** 列车车头比车身高出的长度,上下相比车体伸出去的边框*/ + trainMoreLength: 1, + + /** 列车和车头之间的间距*/ + trainHeadDistance: 2, + + /** 列车竖杠的宽度*/ + trainConntWidth: 4, + + /** 列车竖杠和方向之间的间隔*/ + trainPadding: 1, + + /** 列车方向的宽度*/ + trainArrowWidth: 6, + + /** 列车和区段之间的距离*/ + trainDistance: 18, + + /** 列车背景*/ + trainBackground: 'rgba(0,0,0,0)', + + /** 列车边线颜色*/ + trainSidelineColor: '#C0C0C0', + + /** 列车文字颜色*/ + trainTextColor: '#ffffff', + + /** 列车 灰色*/ + trainGrayColor: '#C0C0C0', + + /** 列车 白色*/ + trainWitheColor: '#FFFFFF', + + /** 列车 棕色*/ + trainBrownColor: '#9B4A09', + + /** 列车 黄色*/ + trainYellowColor: '#FFFF00', + + /** 列车 绿色*/ + trainGreenColor: '#00AF50', + + /** 列车 蓝色*/ + trainBlueColor: '#3265FF', + + /** 列车 红色*/ + trainRedColor: '#EF0C08', + + /** 列车 橘色*/ + trainOrangeColor: '#EA700D', + + /** 列车 紫色*/ + trainPurpleColor: 'purple', + + /** 列车 粉色*/ + trainPinkColor: 'pink', +}; /** 皮肤配置*/ const deviceSkin = { '03': fuzhouSkin, diff --git a/src/jmap/config/deviceType.js b/src/jmap/config/deviceType.js index be865826b..ebde09373 100644 --- a/src/jmap/config/deviceType.js +++ b/src/jmap/config/deviceType.js @@ -4,7 +4,9 @@ const deviceType = { Signal: 'Signal', Station: 'Station', StationControl: 'StationControl', - StationStand: 'StationStand' + StationStand: 'StationStand', + TrainWindow:'TrainWindow', + Train:'Train', }; export default deviceType; diff --git a/src/jmap/shape/StationStand.js b/src/jmap/shape/StationStand.js new file mode 100644 index 000000000..b8a6e74c3 --- /dev/null +++ b/src/jmap/shape/StationStand.js @@ -0,0 +1,528 @@ +/**/ +import Group from 'zrender/src/container/Group'; +import Text from 'zrender/src/graphic/Text'; +import Rect from 'zrender/src/graphic/shape/Rect'; +import Isogon from 'zrender/src/graphic/shape/Isogon'; +import Polygon from 'zrender/src/graphic/shape/Polygon'; +import { flashlight } from './libs/ShapePoints'; + +class StationStand extends Group { + constructor({ _code, _type, zlevel, model, state }, style){ + super(); + this._code = _code; + this._type = _type; + this.zlevel = zlevel; + this.model = model; + this.state = state; + this.style = style; + this.z = 40; + this.doors = new Group(); + this._create(model); + } + _create(model) { + // 方向值 + let drict = model.doorLocationType == '01' ? 1 : -1; + + this.stationStand = new Rect({ + zlevel: this.zlevel, + z: this.z, + shape: { + x: model.position.x - model.width / 2, + y: 0, + width: model.width, + height: model.height + }, + style: { + lineWidth: 0, + stroke: this.style.sidelineColor, + fill: this.style.stationStandSpareColor + } + }); + /** 站台折返策略*/ + let beyond = 4; + let height = 5; + let width = 10; + let offsetx = (model.width - width / 2); + let offsety = (model.height + height + this.style.stationStandDistance) / 2; + + this.reentry = new Polygon({ + zlevel: this.zlevel, + z: this.z, + shape: { + points: flashlight(model.position.x, model.position.y, drict, width, height, offsetx, offsety, beyond) + }, + style: { + lineWidth: 0, + fill: this.style.stationStandNoHumanReentryColor + } + }); + this.add(this.reentry); + + /** 站台扣车*/ + let distance = 0; + let textX = model.position.x + drict * (model.width / 2 + model.textFontSize + distance); + this.text = new Text({ + zlevel: this.zlevel, + z: this.z + 2, + position: [0, 0], + style: { + x: textX, + y: 0, + text: 'H', + textAlign: 'middle', + textVerticalAlign: 'top', + fontSize: this.style.stationStandHeadFontSize + 'px ' + this.style.textFontFormat, + textFill: this.style.stationStandCenterDetainTrainColor, + textStroke: this.style.backgroundColor, + } + }); + this.add(this.text); + + // 停站时间 + let textLevelT = [0, 0]; + if (model.doorLocationType == '02') { + textLevelT = [0, 5]; + } + let timeX = model.position.x - drict * (model.width / 2 + this.style.textFontSize + distance); + this.time = new Text({ + zlevel: this.zlevel, + z: this.z + 2, + position: textLevelT, + style: { + x: timeX, + y: 0, + text: model.parkingTime, + textFill: this.style.stationStandTimeTextColor, + textAlign: 'middle', + textFont: this.style.textFontSize + 'px ' + this.style.textFontFormat + } + }); + this.add(this.time); + + // 区间运行时间 + let textLevelP = [0, 2]; + if (model.doorLocationType == '01') { + textLevelP = [0, 15]; + } + let levelX = model.position.x - drict * (model.width / 2 + this.style.textFontSize + distance); + this.level = new Text({ + zlevel: this.zlevel, + z: this.z + 2, + position: textLevelP, + style: { + x: levelX, + y: 0, + text: model.intervalRunTime, + textFill: this.style.stationStandTimeTextColor, + textAlign: 'middle', + textFont: this.style.textFontSize + 'px ' + this.style.textFontFormat + } + }); + this.add(this.level); + + /** 站台紧急关闭*/ + this.emergent = new Isogon({ + zlevel: this.zlevel, + z: this.z, + shape: { + x: model.position.x, + y: 0, + r: this.style.stationStandDistance / 2, + n: 4, + }, + style: { + lineWidth: 0, + stroke: this.style.stationStandEmergentCloseColor, + fill: this.style.stationStandEmergentCloseColor + } + }); + this.doors.add(this.emergent); + + /** 屏蔽门*/ + let padding = 0.1; + //屏蔽门高度福州没有 北京有 + this.safeDoorL = new Rect({ + zlevel: this.zlevel, + z: this.z, + shape: { + x: model.position.x - model.width / 2 - padding, + y: model.position.y, + width: model.width / 4 + padding, + height: this.style.statonStandSafeHeight + }, + style: { + lineWidth: 0, + stroke: this.style.stationStandDoorDefaultColor, + fill: this.style.stationStandDoorDefaultColor + } + }); + + this.safeDoorC = new Rect({ + zlevel: this.zlevel, + z: this.z + 1, + shape: { + x: model.position.x - model.width / 4 - padding, + y: model.position.y, + width: model.width / 2 + padding * 2, + height: this.style.statonStandSafeHeight + }, + style: { + lineWidth: 0, + stroke: this.style.stationStandDoorDefaultColor, + fill: this.style.stationStandDoorDefaultColor + } + }); + + this.safeDoorR = new Rect({ + zlevel: this.zlevel, + z: this.z, + shape: { + x: model.position.x + model.width / 4, + y: model.position.y, + width: model.width / 4 + padding, + height: this.style.statonStandSafeHeight + }, + style: { + lineWidth: 0, + stroke: this.style.stationStandDoorDefaultColor, + fill: this.style.stationStandDoorDefaultColor + } + }); + + this.setHasSafeDoor(model.hasDoor); + this.setDrict(model.doorLocationType); + this.setVisible(model.visible); + this.setState(model); + this.mouseStatusRecover(); + } + setDrict(doorLocationType) { + let model = this.model; + let style = this.style; + if (doorLocationType === '01') { + let distance = model.position.y + style.stationStandDistance + style.statonStandSafeHeight; + this.text.setStyle('y', distance + model.height / 2 - style.stationStandHeadFontSize / 2); + this.time.setStyle('y', distance + model.height - style.textFontSize); + this.level.setStyle('y', distance - model.height + style.textFontSize / 1.2); + this.emergent.setShape('y', distance - style.stationStandDistance / 2); + this.stationStand.setShape('y', distance); + } else { + let distance = model.position.y - style.stationStandDistance; + this.text.setStyle('y', distance - model.height / 2 - style.stationStandHeadFontSize / 2); + this.time.setStyle('y', distance - model.height + style.textFontSize); + this.level.setStyle('y', distance - model.height - style.textFontSize / 2); + this.emergent.setShape('y', distance + style.stationStandDistance / 2); + this.stationStand.setShape('y', distance - model.height); + } + this.add(this.doors); + this.add(this.stationStand); + + + let rect = this.stationStand.getBoundingRect(); + rect.union(this.doors.getBoundingRect()); + this.standBorder = new Rect({ + zlevel: this.model.zlevel, + silent: true, + z: this.z - 1, + shape: rect, + style: { + lineDash: [3, 3], + stroke: style.borderColor, + fill: style.transparentColor + } + }); + this.add(this.standBorder); + } + setHasSafeDoor(hasDoor) { + if (hasDoor) { + this.doors.add(this.safeDoorL); + this.doors.add(this.safeDoorC); + this.doors.add(this.safeDoorR); + } else { + this.doors.remove(this.safeDoorL); + this.doors.remove(this.safeDoorC); + this.doors.remove(this.safeDoorR); + } + } + + setVisible(visible) { + if (visible) { + this.eachChild((it) => { + it.show(); + }); + } else { + this.eachChild((it) => { + it.hide(); + }); + } + } + + //恢复初始状态 + recover() { + this.time.hide(); + this.level.hide(); + this.text.hide(); + this.emergent.hide(); + this.reentry.hide(); + if (this.model.visible) { this.safeDoorC.show(); } + this.safeDoorL.setStyle('fill', this.style.stationStandDoorDefaultColor); + this.safeDoorC.setStyle('fill', this.style.stationStandDoorDefaultColor); + this.safeDoorR.setStyle('fill', this.style.stationStandDoorDefaultColor); + } + + //空闲 + spare() { + this.stationStand.setStyle('fill', this.style.stationStandSpareColor); + } + + //列车停站 + stop() { + this.stationStand.setStyle('fill', this.style.stationStandStopColor); + } + + //指定列车跳站 + designatedJumpStop() { + this.stationStand.setStyle('fill', this.style.stationStandDesignatedJumpStopColor); + } + + //站台紧急关闭 + emergentClose() { + this.stationStand.setStyle('fill', this.style.stationStandSpareColor); + this.emergent.show(); + } + + //未设置跳停 + unJumpStop() { + } + + //站台跳停 + jumpStop() { + this.stationStand.setStyle('fill', this.style.stationStandJumpStopColor); + } + + //未设置扣车 + unDetainTrain() { + this.text.hide(); + } + + //车站扣车 + standDetainTrain() { + this.text.show(); + this.text.setStyle('textFill', this.style.stationStandDetainTrainTextColor); + } + + //中心扣车 + centerDetainTrain() { + this.text.show(); + this.text.setStyle('textFill', this.style.stationStandCenterDetainTrainColor); + } + + //中心+车站扣车 + standAndCenterDetainTrain() { + this.text.show(); + } + + //人工设置停战时间 + setManuallyArmisticeTime(val) { + this.time.show(); + this.time.attr({ + style: { + text: val + }, + }); + } + + //人工设置运行等级 + setManuallyOperationLevel(val) { + this.level.show(); + this.level.attr({ + style: { + text: val + }, + }); + } + + //开门 + openDoor() { + this.safeDoorC.hide(); + } + + //关门 + closeDoor() { + if (this.model.model.visible) { this.safeDoorC.show(); } + } + + //屏蔽门正常 + doorNormal() { + this.safeDoorL.setStyle('fill', this.style.stationStandDoorDefaultColor); + this.safeDoorC.setStyle('fill', this.style.stationStandDoorDefaultColor); + this.safeDoorR.setStyle('fill', this.style.stationStandDoorDefaultColor); + } + + //屏蔽门故障 + doorFault() { + this.safeDoorL.setStyle('fill', this.style.stationStandSplitDoorColor); + this.safeDoorC.setStyle('fill', this.style.stationStandSplitDoorColor); + this.safeDoorR.setStyle('fill', this.style.stationStandSplitDoorColor); + } + + //屏蔽门切除 + doorSplit() { + this.safeDoorL.setStyle('fill', this.style.stationStandSplitDoorColor); + this.safeDoorC.setStyle('fill', this.style.stationStandSplitDoorColor); + this.safeDoorR.setStyle('fill', this.style.stationStandSplitDoorColor); + } + + //无折返(默认) + noReentry() { + this.reentry.hide(); + } + + //无人折返 + noHumanReentry() { + this.reentry.show(); + this.reentry.setStyle('fill', this.style.stationStandNoHumanReentryColor); + } + //自动换端 + autoChangeEnds() { + this.reentry.show(); + this.reentry.setStyle('fill', this.style.stationStandAutoChangeEndsColor); + } + + setState(model) { + this.recover(); + switch (model.status) { + case '01': { //空闲 + this.spare(); + } break; + case '02': { //列车停站 + this.stop(); + } break; + case '03': { //站台紧急关闭 + this.emergentClose(); + } break; + } + + if (Number(model.parkingTime) >= 0) { + this.setManuallyArmisticeTime(model.parkingTime); + } + + if (Number(model.intervalRunTime) > 0) { + this.setManuallyOperationLevel(model.intervalRunTime); // 运行等级显示 + } + + /** 设置跳停*/ + if (model.status == '01') { + switch (model.jumpStopStatus) { + case '01': { //未设置跳停 + this.unJumpStop(); + } break; + case '02': { //指定站台跳停 + this.designatedJumpStop(); + } break; + case '03': { //站台全部跳停 + this.jumpStop(); + } + } + } + + /** 设置扣车*/ + switch (model.holdStatus) { + case '01': { //未设置扣车 + this.unDetainTrain(); + } break; + case '02': { //车站扣车 + this.standDetainTrain(); + } break; + case '03': { //中心扣车 + this.centerDetainTrain(); + } break; + case '04': { //中心+车站扣车 + this.standAndCenterDetainTrain(); + } break; + } + + /** 设置屏蔽门开关*/ + switch (model.screenDoorOpenStatus) { + case '01': { + this.closeDoor(); //关门 + } break; + case '02': { + this.openDoor(); //开门 + } break; + } + + /** 设置屏蔽门状态*/ + switch (model.screenDoorStatus) { + case '01': { + this.doorNormal(); //正常 + } break; + case '02': { + this.doorFault(); //故障 + } break; + case '03': { + this.doorSplit(); //切除 + } + } + + /** 设置折返策略*/ + switch (model.reentryStrategy) { + case '04': //默认 + case '01': { + this.noReentry(); //无折返策略 + } break; + case '02': { + this.noHumanReentry(); //无人折返 + } break; + case '03': { + this.autoChangeEnds(); //自动换端 + } break; + } + } + + getShapeTipPoint() { + let rect = this.stationStand.getBoundingRect(); + if (rect) { + return { + x: rect.x + rect.width / 2, + y: rect.y + }; + } + return null; + } + + mouseStatusVisible() { + this.standBorder.show(); + //福州无 + this.stationStand.setStyle({ fill: this.style.borderContextBackgroundColor }) + } + + mouseStatusRecover() { + this.standBorder.hide(); + this.stationStand.setStyle({ fill: this.style.stationStandSpareColor }) + this.setState(this.model); + } + + mouseclick(e) { + if ([3].includes(e.which)) { + this.selected = !this.selected; + if (this.selected) { + this.mouseStatusRecover(); + this.mouseStatusVisible(); + } + } + } + + mouseenter(e) { + if (!this.selected) { + this.mouseStatusRecover(); + this.mouseStatusVisible(); + } + } + + mouseleave(e) { + if (!this.selected) { + this.mouseStatusRecover(); + } + } +} +export default StationStand; diff --git a/src/jmap/shape/Train.js b/src/jmap/shape/Train.js new file mode 100644 index 000000000..2f3d85b93 --- /dev/null +++ b/src/jmap/shape/Train.js @@ -0,0 +1,620 @@ +import Group from 'zrender/src/container/Group'; +import Text from 'zrender/src/graphic/Text'; +import Rect from 'zrender/src/graphic/shape/Rect'; +import Polygon from 'zrender/src/graphic/shape/Polygon'; +import BoundingRect from 'zrender/src/core/BoundingRect'; +//import ModelType from '@/jlmap/model/ModelType'; +import store from '@/store'; + +/** 车身*/ +class TrainBody extends Group { + constructor(model) { + super(); + this.model = model; + this._create(model); + } + + _create(model) { + let textFont = model.style.trainTextFontSize + 'px ' + model.style.textFontFormat; + let TextFontHSDA = model.style.trainHSDATextFontSize + 'px ' + model.style.textFontFormat; + + let destinationText = ''; + switch (model.model.destinationStatus) { + case '01': destinationText = '准点'; break; + case '02': destinationText = '早点'; break; + case '03': destinationText = '严重早点'; break; + case '04': destinationText = '晚点'; break; + case '05': destinationText = '严重晚点'; break; + default: destinationText = '未知'; break; + } + + // 文字描述 + this.arrowText = new Text({ + zlevel: model.zlevel, + z: model.z, + style: { + x: model.point.x + 50, + y: model.point.y + 25, + text: `列车类型: 计划车\n表\0\0\0\0号: ${model.model.serviceNumber}\n车\0次\0号: ${model.model.tripNumber}\n目的地号: ${model.model.targetCode ? model.model.targetCode : ''}\n车\0组\0号: ${model.model.groupNumber}\n早\0晚\0点: ${destinationText}\n运行方向: ${model.model.directionType == '02' ? '上行' : '下行'}\n乘务组号: \n起点站名: \n终点站名: \n占用轨道: ${model.model.sectionModel ? model.model.sectionModel.trackName : ''}\n所在车站: \n车地通信: 正常\n运行等级: 4\n扣车状态: ${model.model.runControlStatus == '01' ? '正常' : model.model.runControlStatus == '03' ? '跳停' : '扣车'}\n停稳状态: ${model.model.runStatus == '02' ? '未停稳' : '停稳'}\n阻塞状态: 无\n列车速度: ${model.model.speed || 0} km/h\n列车移动授权距离: ${model.model.maLen || 0} m`, + textFill: '#000', + textAlign: 'letf', + textFont: 10 + 'px consolas', + textPadding: 3, + textBackgroundColor: this.model.style.tipBackgroundColor, + } + }); + + this.train = new Rect({ + zlevel: model.zlevel, + z: model.z, + shape: { + x: model.point.x, + y: model.point.y, + width: model.style.trainWidth, + height: model.style.trainHeight + }, + style: { + lineWidth: 0.1, + stroke: model.style.trainSidelineColor, + fill: model.style.trainBrown1Color + }, + cursor: 'pointer' + }); + + let lrPadding = 3; //两边间隔 + let upPadding = 4; //上边距离 + let beginX = (model.point.x + lrPadding); + let beginY = (model.point.y - model.style.trainHSDATextFontSize - upPadding); + let margin = (model.style.trainWidth - lrPadding * 2) / 4; + this.textH = new Text({ + zlevel: model.zlevel, + z: model.z, + style: { + x: parseInt(beginX + margin * 0), + y: parseInt(beginY), + text: 'H', + textFill: model.style.trainYellowColor, + textFont: TextFontHSDA, + textAlign: 'middle', + textVerticalAlign: 'top', + } + }); + + this.textS = new Text({ + zlevel: model.zlevel, + z: model.z, + style: { + x: parseInt(beginX + margin * 1), + y: parseInt(beginY), + text: 'S', + textFill: model.style.trainBlueColor, + textFont: TextFontHSDA, + textAlign: 'middle', + textVerticalAlign: 'top', + } + }); + + this.textD = new Text({ + zlevel: model.zlevel, + z: model.z, + style: { + x: parseInt(beginX + margin * 2), + y: parseInt(beginY), + text: 'D', + textFill: model.style.trainGreenColor, + textFont: TextFontHSDA, + textAlign: 'middle', + textVerticalAlign: 'top', + } + }); + + this.textA = new Text({ + zlevel: model.zlevel, + z: model.z, + style: { + x: parseInt(beginX + margin * 3), + y: parseInt(beginY), + text: 'A', + textFill: model.style.trainRedColor, + textFont: TextFontHSDA, + textAlign: 'middle', + textVerticalAlign: 'top', + } + }); + + lrPadding = 4; //两边间隔 + upPadding = 4; //上边距离 + let serviceNumber = model.model.serviceNumber || 'AA'; + let tripNumber = model.model.tripNumber || 'DDD'; + + serviceNumber = '00' + serviceNumber; + tripNumber = '000' + tripNumber; + this.textTrainServer = new Text({ + zlevel: model.zlevel, + z: model.z, + style: { + x: parseInt(model.point.x + lrPadding), + y: parseInt(model.point.y + upPadding), + text: serviceNumber.substring(serviceNumber.length - 2), + textFill: model.style.trainBrownColor, + textFont: textFont, + textAlign: 'left', + textVerticalAlign: 'top', + } + }); + + this.textTrainTarget = new Text({ + zlevel: model.zlevel, + z: model.z, + style: { + x: parseInt(model.point.x + model.style.trainWidth - lrPadding), + y: parseInt(model.point.y + upPadding), + text: tripNumber.substring(tripNumber.length - 3), + textFill: model.style.trainYellowColor, + textFont: textFont, + textAlign: 'right', + textVerticalAlign: 'top', + } + }); + this.add(this.train); + this.add(this.textH); + this.add(this.textS); + this.add(this.textD); + this.add(this.textA); + this.add(this.textTrainServer); + this.add(this.textTrainTarget); + } + setMouseOver() { + store.dispatch('map/setTrainDetails', this.model); + this.details = store.state.map.trainDetails; + this.add(this.arrowText); + this.arrowText.attr({ + style: { + x: this.details.point.x + 50, + y: this.details.point.y + 25, + } + }); + } + setMouseOut() { + this.remove(this.arrowText); + store.dispatch('map/setTrainDetails', null); + } + setTrainColor(color) { + this.train && this.train.setStyle('fill', color); + } + setTextTrainServerColor(color) { + this.textTrainServer.setStyle('textFill', color); + this.textTrainServer.setStyle('textStroke', color); + } + setTextTrainTargetColor(color) { + this.textTrainTarget.setStyle('textFill', color); + this.textTrainTarget.setStyle('textStroke', color); + } + setHShow(isShow) { + isShow ? this.textH.show() : this.textH.hide(); + } + setSShow(isShow) { + isShow ? this.textS.show() : this.textS.hide(); + } + setDShow(isShow) { + isShow ? this.textD.show() : this.textD.hide(); + } + setAShow(isShow) { + isShow ? this.textA.show() : this.textA.hide(); + } + +} + +/** 车头*/ +class TrainHead extends Group { + constructor(model) { + super(); + this.model = model; + this._create(model); + } + _create(model) { + let baseMargin = (model.drect === -1 ? 1 : 0); + this.line = new Rect({ + zlevel: model.zlevel, + z: model.z, + shape: { + x: model.point.x - baseMargin * (model.style.trainConntWidth), + y: model.point.y, + width: model.style.trainConntWidth, + height: model.style.trainHeight + 2 * model.style.trainMoreLength + }, + style: { + lineWidth: 0.1, + stroke: model.style.trainSidelineColor, + fill: model.style.trainBackground + } + }); + + let arrowMargin = model.style.trainPadding + model.style.trainConntWidth; + this.arrow = new Polygon({ + zlevel: model.zlevel, + z: model.z, + shape: { + points: [ + [model.point.x + model.drect * (arrowMargin), model.point.y + 1 - model.style.trainMoreLength], + [model.point.x + model.drect * (arrowMargin + model.style.trainArrowWidth), model.point.y + (model.style.trainHeight + model.style.trainMoreLength) / 2], + [model.point.x + model.drect * (arrowMargin), model.point.y - 1 + model.style.trainHeight + model.style.trainMoreLength] + ] + }, + style: { + lineWidth: 0.1, + stroke: model.style.trainSidelineColor, + fill: model.style.trainBackground + } + }); + + this.add(this.line); + this.add(this.arrow); + } + setColor(color) { + this.line && this.line.setStyle('fill', color); + this.arrow && this.arrow.setStyle('fill', color); + } + setLineShow(isShow) { + isShow ? this.line.show() : this.line.hide(); + } + setArrowShow(isShow) { + isShow ? this.arrow.show() : this.arrow.hide(); + } + setInvisible(invisible) { + this.eachChild((child) => { + child.attr('invisible', invisible); + }); + } +} +/** 列车 */ +export default class Train extends Group { + constructor({ _code, _type, zlevel, model, state }, style) { + super(); + this._code = _code; + this._type = _type; + this.zlevel = zlevel; + this.model = model; + this.state = state; + this.style = style; + this.z = 40; + this.section = null; + this.selected = false; + this.fontSize = model.nameFontSize || style.trainTextFontSize; + this.newScale = this.fontSize / style.trainTextFontSize; + this._create(model, style); + this.on('mousedown', this.mouseclick); + this.on('mouseout', this.mouseleave); + this.on('mouseover', this.mouseenter); + } + + _computed(model, style) { + if (model.trainWindowModel) { + this.point = { + x: model.trainWindowModel.point.x, + y: model.trainWindowModel.point.y + }; + + switch (model.directionType) { + case '01': { //未知方向 + this.point.x = this.point.x + model.trainWindowModel.width / 2 + Math.abs((style.trainWidth - model.trainWindowModel.width) / 2); + } break; + case '02': { //从左向右 + this.point.x = this.point.x + model.trainWindowModel.width / 2 - style.trainConntWidth * this.newScale - style.trainWidth; + } break; + case '03': { //从右向左 + this.point.x = this.point.x - model.trainWindowModel.width / 2 + style.trainConntWidth * this.newScale; + } break; + } + } else { + this.point = model.position; + this.traingle = null; + } + } + + _create(model, style) { + //计算画图坐标点 + this._computed(model, style); + + //画图 + if (this.point) { + // body + this.trainB = new TrainBody({ + model: model, + style: style, + zlevel: this.zlevel, + z: this.z, + point: this.point + }); + // left 头 + this.trainL = new TrainHead({ + style: style, + zlevel: this.zlevel, + z: this.z, + point: { + x: this.point.x - style.trainHeadDistance, + y: this.point.y + }, + drect: -1 + }); + // right 头 + this.trainR = new TrainHead({ + style: style, + zlevel: this.zlevel, + z: this.z, + point: { + x: this.point.x + style.trainWidth + style.trainHeadDistance, + y: this.point.y + }, + drect: 1 + }); + this.add(this.trainB); + this.add(this.trainL); + this.add(this.trainR); + + let rect = Object.assign({}, this.getBoundingRect()); + rect.x -= style.trainWidth / 2; + rect.y -= 5; + rect.width += style.trainWidth; + rect.height += 10; + + this.trainBorder = new Rect({ + zlevel: model.zlevel, + z: this.z, + silent: true, + shape: rect, + style: { + lineDash: [3, 3], + stroke: style.borderColor, + fill: style.transparentColor + } + }) + + this.add(this.trainBorder); + this.setStatus(model); + this.mouseStatusRecover(); + } + } + getShapeTipPoint() { + return { + x: (this.train.shape.x), + y: (this.train.shape.y) + }; + } + //恢复颜色状态 + recover() { + this.trainB.setHShow(false); + this.trainB.setSShow(false); + this.trainB.setDShow(false); + this.trainB.setAShow(false); + this.trainL.setLineShow(false); + this.trainR.setLineShow(false); + this.trainL.setArrowShow(false); + this.trainR.setArrowShow(false); + } + //设置服务号状态类型 + setServerNoType(type) { + switch (type) { + case '01': { //显示服务号 计划车 + this.trainB.setTextTrainServerColor(this.style.trainWitheColor); + } break; + case '02': { //显示车组号: 头码车与人工车 + this.trainB.setTextTrainServerColor(this.style.trainYellowColor); + } break; + default: { + this.trainB.setTextTrainServerColor(this.style.backgroundColor); + } + } + } + //设置目的地状态 + setDestinationStatus(status) { + switch (status) { + case '01': { //准点 + this.trainB.setTextTrainTargetColor(this.style.trainWitheColor); + } break; + case '02': { //早点 + this.trainB.setTextTrainTargetColor(this.style.trainGreenColor); + } break; + case '03': { //晚点 + this.trainB.setTextTrainTargetColor(this.style.trainBrownColor); + } break; + case '04': { //头码车 + this.trainB.setTextTrainTargetColor(this.style.trainYellowColor); + } break; + default: { + this.trainB.setTextTrainTargetColor(this.style.backgroundColor); + } + } + } + //设置运行方向状态类型 + setDirectionType(type) { + switch (type) { + case '01': { //未知方向 + this.trainL.setLineShow(true); + this.trainR.setLineShow(true); + } break; + case '02': { //从左往右 上行 + this.trainR.setLineShow(true); + this.trainR.setArrowShow(true); + } break; + case '03': { //从右往左 下行 + this.trainL.setLineShow(true); + this.trainL.setArrowShow(true); + } break; + } + } + // 设置列车停止方向类型 + setDirectionStopType(type) { + switch (type) { + case '01': { //未知方向 + } break; + case '02': { //从左往右 上行 + this.trainR.setLineShow(true); + } break; + case '03': { //从右往左 下行 + this.trainL.setLineShow(true); + } break; + } + } + //设置运行状态 + setRunStatus(status) { + switch (status) { + case '01': { //停止 + this.setDirectionStopType(this.model.directionType); //设置运行方向状态类型 + } break; + case '02': { //运行 + this.setDirectionType(this.model.directionType); //设置运行方向状态类型 + } break; + } + + } + //设置运行模式 + setRunMode(status) { + switch (status) { + case '01': { //未知 + this.trainL.setColor(this.style.trainWitheColor); + this.trainR.setColor(this.style.trainWitheColor); + } break; + case '02': { //ATO自动驾驶模式 AM + this.trainL.setColor(this.style.trainGreenColor); + this.trainR.setColor(this.style.trainGreenColor); + } break; + case '03': { //ATP监控下的人工驾驶模式 CM + this.trainL.setColor(this.style.trainYellowColor); + this.trainR.setColor(this.style.trainYellowColor); + } break; + case '04': { //限制人工驾驶模式 RM + this.trainL.setColor(this.style.trainBrownColor); + this.trainR.setColor(this.style.trainBrownColor); + } break; + case '05': { //非限制人工驾驶模式 RM + this.trainL.setColor(this.style.trainBrownColor); + this.trainR.setColor(this.style.trainBrownColor); + } break; + } + } + + //设置运行控制状态类型 + setRunControlStatus(status) { + switch (status) { + case '01': { //正常 + this.trainB.setHShow(false); + this.trainB.setSShow(false); + } break; + case '02': { //扣车 + this.trainB.setHShow(true); + } break; + case '03': { //跳停 + this.trainB.setSShow(true); + } break; + } + } + //设置车门状态类型 + setDoorStatus(status) { + switch (status) { + case '01': { //关门 + this.trainB.setDShow(false); + } break; + case '02': { //开门 + this.trainB.setDShow(true); + } break; + } + } + //设置通信状态类型 + setCommunicationStatus() { + switch (status) { + case '01': { //正常 + this.trainB.setTrainColor(this.style.trainBrown1Color); + } break; + case '02': { //故障 + this.trainB.setTrainColor(this.style.trainGrayColor); + } break; + } + } + //设置报警状态 + setAlarmStatus(status) { + switch (status) { + case '01': { //不报警 + this.trainB.setAShow(false); + } break; + case '02': { //报警 + this.trainB.setAShow(true); + } break; + } + } + + //设置状态 + setStatus(model) { + if (model) { + this.recover(); + this.setServerNoType(model.serverNoType); //设置服务号状态类型 + this.setDestinationStatus(model.destinationStatus); //设置目的地状态 + this.setRunStatus(model.runStatus); //设置运行状态 + this.setRunMode(model.runMode); //设置运行模式 + this.setRunControlStatus(model.runControlStatus); //设置运行控制状态类型 + this.setDoorStatus(model.doorStatus); //设置车门状态类型 + this.setCommunicationStatus(model.communicationStatus); //设置通信状态类型 + this.setAlarmStatus(model.alarmStatus); //设置报警状态 + } + } + + //获取列车包围框 + getBoundingRect() { + let list = [this.trainB, this.trainL, this.trainR]; + let rect = null; + + list.forEach(elem => { + if (elem) { + let tempRect = elem.getBoundingRect(); + if (tempRect.x && tempRect.y && tempRect.width && tempRect.height) { + if (rect) { + rect.union(tempRect); + } else { + rect = tempRect; + } + } + } + }); + + return rect || new BoundingRect(0, 0, 0, 0); + } + + setSectionBorderShow(show) { + /* let section = store.getters['map/getViewInstanceByDevice']({ _type: ModelType.Section, _code: this.model.sectionCode }); + show && section && section.mouseStatusVisible(); + show || section && section.mouseStatusRecover();*/ + } + + mouseStatusVisible() { + this.trainBorder.show(); + this.setSectionBorderShow(true); + this.trainB.setMouseOver(); + } + + mouseStatusRecover() { + this.trainBorder.hide(); + this.setSectionBorderShow(false); + this.trainB.setMouseOut(); + } + + mouseclick(e) { + if ([3].includes(e.which)) { + this.selected = !this.selected; + if (this.selected) { + this.mouseStatusVisible(); + } + } + } + + mouseenter(e) { + if (!this.selected) { + this.mouseStatusVisible(); + } + } + + mouseleave(e) { + if (!this.selected) { + this.mouseStatusRecover(); + } + } +} diff --git a/src/jmap/shape/TrainWindow.js b/src/jmap/shape/TrainWindow.js new file mode 100644 index 000000000..6956a2791 --- /dev/null +++ b/src/jmap/shape/TrainWindow.js @@ -0,0 +1,129 @@ +/*车次窗*/ +import Polygon from 'zrender/src/graphic/shape/Polygon'; +import Group from 'zrender/src/container/Group'; +//import ModelType from '@/jlmap/model/ModelType'; +import store from '@/store'; + +class TrainWindow extends Group { + constructor({ _code, _type, zlevel, model, state }, style){ + super(); + this._code = _code; + this._type = _type; + this.zlevel = zlevel; + this.model = model; + this.state = state; + this.style = style; + this.z = 1; + this.selected = false; + this._create(model); + this.on('mousedown', this.mouseclick); + this.on('mouseout', this.mouseleave); + this.on('mouseover', this.mouseenter); + } + _create(model) { + let prdType = '02'//store.state.map.prdType; + if (prdType !== '01') { + this.createTrainWindow(); + this.setTrainWindowEventShow(model.trainWindowShow); + this.setState(model); + this.mouseStatusRecover(); + } + } + + /** 创建车次窗*/ + createTrainWindow() { + let model = this.model; + let point = model.point||model.position; + this.trainRect = new Polygon({ + _subType: 'TrainWindow', + zlevel: this.zlevel - 1, + z: this.z, + shape: { + smooth: 0.01, + points: [ + [point.x - model.width / 2, point.y], + [point.x + model.width / 2, point.y], + [point.x + model.width / 2, point.y + model.height], + [point.x - model.width / 2, point.y + model.height], + ] + }, + style: { + lineDash: [3, 3], + lineWidth: 1, + stroke: this.style.trainWindowColor, + fill: this.style.transparentColor + } + }); + this.add(this.trainRect); + } + + setTrainWindowEventShow(show) { + let lineWidth = show ? 1 : 0; + this.trainRect && this.trainRect.setStyle('lineWidth', lineWidth); + } + + isPop(e) { + for (var i = 0; i < this.childCount(); i++) { + var rect = this.childAt(i).getBoundingRect(); + if (rect.contain(e.offsetX, e.offsetY) && this.childAt(i).pop) { + return true; + } + } + } + + //设置状态 + setState(model) { + } + + getShapeTipPoint() { + if (this.stationControl) { + var distance = 2; + var rect = this.stationControl.getBoundingRect(); + return { + x: rect.x + rect.width / 2, + y: rect.y - distance, + }; + } + return null; + } + + setSectionEventShow(e, show) { + /*let section = store.getters['map/getViewInstanceByDevice']({ _type: ModelType.Section, _code: this.model.sectionCode }); + + show && section && section.mouseStatusVisible(e); + show || section && section.mouseStatusRecover(e);*/ + } + + mouseStatusRecover(e) { + this.setTrainWindowEventShow(false); + this.setSectionEventShow(e, false); + } + + mouseStatusVisible(e) { + this.setTrainWindowEventShow(true); + this.setSectionEventShow(e, true); + } + + mouseclick(e) { + if ([3].includes(e.which)) { + this.selected = !this.selected; + if (this.selected) { + this.mouseStatusVisible(e); + } + } + } + + mouseenter(e) { + if (!this.selected) { + this.mouseStatusVisible(e); + } + } + + mouseleave(e) { + if (!this.selected) { + this.mouseStatusRecover(e); + } + } +} + +export default TrainWindow; diff --git a/src/jmap/shape/factory.js b/src/jmap/shape/factory.js index e452a7551..880295485 100644 --- a/src/jmap/shape/factory.js +++ b/src/jmap/shape/factory.js @@ -2,12 +2,18 @@ import deviceType from '../config/deviceType'; import Link from './Link'; import Section from './section'; import Signal from './Signal'; +import StationStand from "./StationStand"; +import TrainWindow from "./TrainWindow"; +import Train from "./Train"; /** 图库*/ const mapShape = {}; mapShape[deviceType.Link] = Link; mapShape[deviceType.Section] = Section; mapShape[deviceType.Signal] = Signal; +mapShape[deviceType.StationStand] = StationStand; +mapShape[deviceType.TrainWindow] = TrainWindow; +mapShape[deviceType.Train] = Train; function shapefactory(type, device, style) { const shape = mapShape[type]; diff --git a/src/jmap/utils/parser.js b/src/jmap/utils/parser.js index cca121379..ce6833084 100644 --- a/src/jmap/utils/parser.js +++ b/src/jmap/utils/parser.js @@ -19,12 +19,22 @@ export function parser(data, defaultStateDict) { // zrUtil.each(data.linkList || [], (elem) => { // mapDevice[elem.code] = deviceFactory(deviceType.Link, defaultStateDict, elem); // }); + console.log('data',data); zrUtil.each(data.sectionList || [], (elem) => { mapDevice[elem.code] = deviceFactory(deviceType.Section, defaultStateDict, elem); }); zrUtil.each(data.signalList || [], (elem) => { mapDevice[elem.code] = deviceFactory(deviceType.Signal, defaultStateDict, elem); }); + zrUtil.each(data.stationStandList || [],(elem) => { + mapDevice[elem.code] = deviceFactory(deviceType.StationStand, defaultStateDict, elem); + }); + zrUtil.each(data.trainWindowList || [],(elem) => { + mapDevice[elem.code] = deviceFactory(deviceType.TrainWindow, defaultStateDict, elem); + }); + zrUtil.each(data.trainList || [],(elem) => { + mapDevice[elem.code] = deviceFactory(deviceType.TrainWindow, defaultStateDict, elem); + }); } return mapDevice; From b7c982bad6ac8ad41e7700ce10f294a789223c7c Mon Sep 17 00:00:00 2001 From: ival <610568032@qq.com> Date: Mon, 15 Jul 2019 15:51:39 +0800 Subject: [PATCH 2/7] =?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/shape/ImageControl.js | 3 +-- src/jmap/shape/Link.js | 2 +- src/jmap/shape/Signal.js | 40 ---------------------------- src/jmap/shape/StationControl.js | 26 +++++++++++------- src/jmap/shape/StationCounter.js | 6 ++--- src/jmap/shape/StationDelayUnlock.js | 6 ++--- src/jmap/shape/Switch.js | 6 ++--- src/jmap/shape/lcControl.js | 27 +++++++++---------- src/jmap/shape/limitControl.js | 16 +++++------ src/jmap/shape/station.js | 8 +++--- 10 files changed, 53 insertions(+), 87 deletions(-) diff --git a/src/jmap/shape/ImageControl.js b/src/jmap/shape/ImageControl.js index a1cb7b0ed..4c19d52c1 100644 --- a/src/jmap/shape/ImageControl.js +++ b/src/jmap/shape/ImageControl.js @@ -42,8 +42,7 @@ export default class ImageControl extends Group { } } - setState(model) { - + setState(state) { } // 整体图片 diff --git a/src/jmap/shape/Link.js b/src/jmap/shape/Link.js index d39190bd0..34c03334b 100644 --- a/src/jmap/shape/Link.js +++ b/src/jmap/shape/Link.js @@ -3,7 +3,7 @@ import Group from 'zrender/src/container/Group'; class Link extends Group { constructor({ _code, _type, zlevel, model, state }, style) { - super(); + super({name: _code}); this._code = _code; this._type = _type; this.zlevel = zlevel; diff --git a/src/jmap/shape/Signal.js b/src/jmap/shape/Signal.js index 502414e9b..4d0111cef 100644 --- a/src/jmap/shape/Signal.js +++ b/src/jmap/shape/Signal.js @@ -38,45 +38,6 @@ class Lamp extends Group { } }); - // 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, @@ -210,7 +171,6 @@ class JSigDrict extends Group { 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: { diff --git a/src/jmap/shape/StationControl.js b/src/jmap/shape/StationControl.js index ac8eac388..06166389b 100644 --- a/src/jmap/shape/StationControl.js +++ b/src/jmap/shape/StationControl.js @@ -8,7 +8,7 @@ import Group from 'zrender/src/container/Group'; /** 单个控制灯*/ class SingleControl extends Group { constructor(model) { - super(); + super({name: `${model.name}`}); this.model = model; this.zlevel = model.zlevel; this._subType = model._subType; @@ -72,7 +72,7 @@ class SingleControl extends Group { /** 控制模式*/ export default class StationControl extends Group { constructor({ _code, _type, zlevel, model, state }, style) { - super(); + super({name: _code}); this.selected = false; this._code = _code; this._type = _type; @@ -87,10 +87,13 @@ export default class StationControl extends Group { _create() { const model = this.model; + const state = this.state; + this.emergencyControl = new SingleControl({ _subType: 'emergency', style: this.style, zlevel: this.zlevel, + name: `${this._code}_Emergency`, point: { x: model.position.x - this.style.stationControlDistance, y: model.position.y @@ -103,6 +106,7 @@ export default class StationControl extends Group { _subType: 'center', style: this.style, zlevel: this.zlevel, + name: `${this._code}_Center`, point: { x: model.position.x, y: model.position.y @@ -115,6 +119,7 @@ export default class StationControl extends Group { _subType: 'substation', style: this.style, zlevel: this.zlevel, + name: `${this._code}_Substation`, point: { x: model.position.x + this.style.stationControlDistance, y: model.position.y @@ -126,6 +131,7 @@ export default class StationControl extends Group { this.textShadow = new Text({ zlevel: this.zlevel, z: this.z + 1, + name: `${this._code}_TextShadow`, position: [0, -4], silent: true, style: { @@ -143,13 +149,13 @@ export default class StationControl extends Group { this.add(this.centerControl); this.add(this.emergencyControl); this.add(this.textShadow); - this.setState(model); - this.mouseStatusRecover(); + this.setState(state); + this.mouseStateRecover(); } // 设置状态 - setState(model) { - switch (model.status) { + setState(state) { + switch (state.status) { case '00': // 无状态 this.emergencyControl.setColor(this.style.stationControlGrayColor); this.substationControl.setColor(this.style.stationControlGrayColor); @@ -195,7 +201,7 @@ export default class StationControl extends Group { return null; } - mouseStatusVisible(subType) { + mouseStateVisible(subType) { switch (subType) { case 'emergency': this.textShadow.setStyle({ text: this.model.jjzkContent }); break; case 'center': this.textShadow.setStyle({ text: this.model.zokContent }); break; @@ -204,19 +210,19 @@ export default class StationControl extends Group { this.textShadow.show(); } - mouseStatusRecover() { + mouseStateRecover() { this.textShadow.hide(); } mouseenter(e) { if (e.target.parent && e.target.parent._subType) { - this.mouseStatusVisible(e.target.parent._subType); + this.mouseStateVisible(e.target.parent._subType); } } mouseleave(e) { if (e.target._subType) { - this.mouseStatusRecover(); + this.mouseStateRecover(); } } } diff --git a/src/jmap/shape/StationCounter.js b/src/jmap/shape/StationCounter.js index 8b3905d6a..565afea78 100644 --- a/src/jmap/shape/StationCounter.js +++ b/src/jmap/shape/StationCounter.js @@ -7,7 +7,7 @@ import Text from 'zrender/src/graphic/Text'; export default class StationCounter extends Group { constructor({ _code, _type, zlevel, model, state }, style) { - super(); + super({name: _code}); this._code = _code; this._type = _type; this.model = model; @@ -75,10 +75,10 @@ export default class StationCounter extends Group { this.add(this.counterName); this.add(this.table); this.add(this.counter); - this.setStatus(state); + this.setState(state); } - setStatus(state) { + setState(state) { } getShapeTipPoint() { diff --git a/src/jmap/shape/StationDelayUnlock.js b/src/jmap/shape/StationDelayUnlock.js index 08c60f5bc..ffcf2d308 100644 --- a/src/jmap/shape/StationDelayUnlock.js +++ b/src/jmap/shape/StationDelayUnlock.js @@ -7,7 +7,7 @@ import Group from 'zrender/src/container/Group'; export default class StationDelayUnlock extends Group { constructor({ _code, _type, zlevel, model, state }, style) { - super(); + super({name: _code}); this._code = _code; this._type = _type; this.model = model; @@ -77,7 +77,7 @@ export default class StationDelayUnlock extends Group { }); this.add(this.table); - this.setStatus(state); + this.setState(state); } /** 延时解锁关闭*/ @@ -93,7 +93,7 @@ export default class StationDelayUnlock extends Group { this.time.setStyle('text', '' + this.model.remainTime); } - setStatus(state) { + setState(state) { switch (state.status) { case '01': this.delayClose(); break; // 关闭 case '02': this.delayUnlock(); break; // 延迟解锁 diff --git a/src/jmap/shape/Switch.js b/src/jmap/shape/Switch.js index 90a8f4bb1..56a4416ed 100644 --- a/src/jmap/shape/Switch.js +++ b/src/jmap/shape/Switch.js @@ -10,7 +10,7 @@ import JTriangle from '../utils/JTriangle'; export default class Switch extends Group { constructor({ _code, _type, zlevel, model, state }, style, jmap) { - super(); + super({name: _code}); this._code = _code; this._type = _type; this.model = model; @@ -82,7 +82,7 @@ export default class Switch extends Group { stroke: style.backgroundColor } }); - this.switchView = new Group(); + this.switchView = new Group({name: `${this._code}_SwitchView`}); this.switchView.add(line); this.switchView.add(skewLine); @@ -580,7 +580,7 @@ export default class Switch extends Group { stroke: this.style.switchTextBorderColor, fill: this.style.transparentColor }); - this.setState(this.model); + this.setState(this.state); } mouseclick(e) { diff --git a/src/jmap/shape/lcControl.js b/src/jmap/shape/lcControl.js index c5da6d79e..18ce63f58 100644 --- a/src/jmap/shape/lcControl.js +++ b/src/jmap/shape/lcControl.js @@ -16,13 +16,15 @@ export default class LcControl extends Group { this.model = model; this.state = state; this.style = style; - this._create(model); + this._create(); this.on('mouseout', this.mouseleave); this.on('mouseover', this.mouseenter); } - _create(model) { + _create() { + const model = this.model; + const state = this.state; this.control = new Arc({ _subType: 'Control', zlevel: this.zlevel, @@ -98,14 +100,12 @@ export default class LcControl extends Group { this.add(this.textShadow); this.add(this.textBorder); this.add(this.controlBorder); - this.setState(this.state); - this.mouseStatusRecover(); + this.setState(state); + this.mouseStateRecover(); } // 设置状态 - setState(state) { - - } + setState(state) {} getShapeTipPoint() { if (this.control) { @@ -119,7 +119,7 @@ export default class LcControl extends Group { return null; } - mouseStatusVisible(subType) { + mouseStateVisible(subType) { if (subType == 'Text') { this.textShadow.show(); } @@ -132,26 +132,25 @@ export default class LcControl extends Group { } } - mouseStatusRecover() { + mouseStateRecover() { this.textShadow.hide(); this.textBorder.hide(); this.controlBorder.hide(); this.text.setStyle({ textFill: '#fff' }); this.control.setStyle({ fill: this.style.lcControlColor }); - // this.setState(this.state); + this.setState(this.state); } mouseenter(e) { if (e.target._subType) { - console.log(e.target, e.target._subType); - // this.mouseStatusRecover(); - this.mouseStatusVisible(e.target._subType); + this.mouseStateRecover(); + this.mouseStateVisible(e.target._subType); } } mouseleave(e) { if (e.target._subType) { - this.mouseStatusRecover(); + this.mouseStateRecover(); } } } diff --git a/src/jmap/shape/limitControl.js b/src/jmap/shape/limitControl.js index 97a8fa0c0..b3aa6edea 100644 --- a/src/jmap/shape/limitControl.js +++ b/src/jmap/shape/limitControl.js @@ -102,7 +102,7 @@ export default class LimitControl extends Group { this.add(this.textBorder); this.add(this.controlBorder); this.setState(this.state); - this.mouseStatusRecover(); + this.mouseStateRecover(); } // 设置状态 @@ -121,7 +121,7 @@ export default class LimitControl extends Group { return null; } - mouseStatusVisible(subType) { + mouseStateVisible(subType) { if (subType == 'Text') { this.textShadow.show(); } @@ -134,7 +134,7 @@ export default class LimitControl extends Group { } } - mouseStatusRecover() { + mouseStateRecover() { this.textShadow.hide(); this.textBorder.hide(); this.controlBorder.hide(); @@ -147,23 +147,23 @@ export default class LimitControl extends Group { if ([3].includes(e.which)) { this.selected = !this.selected; if (this.selected) { - // this.mouseStatusRecover(); - this.mouseStatusVisible('Control'); + // this.mouseStateRecover(); + this.mouseStateVisible('Control'); } } } mouseenter(e) { if (!this.selected && e.target._subType) { - // this.mouseStatusRecover(); - this.mouseStatusVisible(e.target._subType); + // this.mouseStateRecover(); + this.mouseStateVisible(e.target._subType); } } mouseleave(e) { if (e.target && e.target._subType) { if (!this.selected && e.target._subType) { - this.mouseStatusRecover(); + this.mouseStateRecover(); } } diff --git a/src/jmap/shape/station.js b/src/jmap/shape/station.js index db70d7a47..ea278dbbf 100644 --- a/src/jmap/shape/station.js +++ b/src/jmap/shape/station.js @@ -6,7 +6,7 @@ import Text from 'zrender/src/graphic/Text'; export default class Station extends Group { constructor({ _code, _type, zlevel, model, state }, style) { - super(); + super({name: _code}); this.z = 40; this._code = _code; this._type = _type; @@ -20,6 +20,8 @@ export default class Station extends Group { _create() { const model = this.model; const style = this.style; + const state = this.state; + if (model.visible) { this.stationText = new Text({ zlevel: this.zlevel, @@ -54,7 +56,7 @@ export default class Station extends Group { this.add(this.stationText); this.add(this.mileageText); this.setShowMileageText(model.kmPostShow); - this.setState(model); + this.setState(state); } } @@ -68,7 +70,7 @@ export default class Station extends Group { } // eslint-disable-next-line no-unused-vars - setState(model) { + setState(state) { } getShapeTipPoint() { From 0ea864e96dd29f53bd5d3811fa57854a9697982c Mon Sep 17 00:00:00 2001 From: ival <610568032@qq.com> Date: Mon, 15 Jul 2019 15:54:47 +0800 Subject: [PATCH 3/7] 12312 --- src/jmap/shape/section.js | 1153 ------------------------------------- src/jmap/shape/station.js | 79 --- 2 files changed, 1232 deletions(-) delete mode 100644 src/jmap/shape/section.js delete mode 100644 src/jmap/shape/station.js diff --git a/src/jmap/shape/section.js b/src/jmap/shape/section.js deleted file mode 100644 index e5e0e4f60..000000000 --- a/src/jmap/shape/section.js +++ /dev/null @@ -1,1153 +0,0 @@ -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 JTriangle from '../utils/JTriangle'; - -/** 计轴*/ -class SectionAxle extends Group { - constructor(model) { - super({name: `${model.name}`}); - 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({name: `${model.name}`}); - 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({name: `${model.name}`}); - 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({name: `${model.name}`}); - 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) { - super({name: _code}); - this._code = _code; - this._type = _type; - this.zlevel = zlevel; - this.z = model.layer || 0; - this.model = model; - this.state = state; - this.style = style; - this.selected = false; - this.jmap = jmap; - this._create(); - - // this.on('mousedown', this.mouseclick); - // this.on('mouseout', this.mouseleave); - // this.on('mouseover', this.mouseenter); - } - - _create() { - const model = this.model; - const state = this.state; - // 01:物理区段；02逻辑区段；03道岔区段 - this.createSectionText(); // 创建区段文字 - if (model.type === '01' && ( - model.logicSectionNum.length <= 0 || - model.logicSectionNum.length == 1 && model.logicSectionNum[0] == 0) || - model.type === '02') { - this.createSection(); // 创建区段 - this.createSeparator(); // 创建分隔符 - if (model.type === '01') { - this.createAxles(); // 创建计轴 - } - this.setState(state); - } - - this.mouseStateRecover(); - } - - /** 创建区段*/ - createSection() { - const model = this.model; - const style = this.style; - - // 创建区段 - this.section = new Lines({ - zlevel: this.zlevel, - z: this.z, - name: `${this._code}_Lines`, - isSwitchSection: model.isSwitchSection, - isCurve: model.isCurve, - points: model.points, - style: style - }); - - // 创建延时释放 - const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]); - this.release = new Line({ - zlevel: model.zlevel + 1, - z: this.z, - shape: { - x1: model.points[0].x + traingle.getCos(traingle.absz / 3), - y1: model.points[0].y + traingle.getSin(traingle.absz / 3), - 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 - } - }); - - let x = traingle.drictx * (style.sectionSpeedLimitDistance) * traingle.getSinRate(); - let y = traingle.dricty * (style.sectionSpeedLimitDistance) * traingle.getCosRate(); - if (x == Infinity) { x = 0; } - if (y == Infinity) { y = 0; } - - // 创建限速线 - this.speedLimitLeft = new LimitLines({ - zlevel: this.zlevel + 4, - z: this.z, - name: `${this._code}_LimitLines_L`, - position: [x, -y], - isCurve: model.isCurve, - points: model.points, - isSwitchSection: model.isSwitchSection, - relSwitchCode: model.relSwitchCode, - style: style - }); - - this.speedLimitRight = new LimitLines({ - zlevel: this.zlevel + 4, - z: this.z, - name: `${this._code}_LimitLines_R`, - position: [-x, y], - isCurve: model.isCurve, - points: model.points, - isSwitchSection: model.isSwitchSection, - relSwitchCode: model.relSwitchCode, - style: style - }); - - this.add(this.section); - this.add(this.release); - this.add(this.speedLimitLeft); - this.add(this.speedLimitRight); - } - - /** 创建区段名称*/ - createSectionText() { - const model = this.model; - const style = this.style; - - if (model && style) { - // 计算区段坐标位置 - const x = Math.min(model.points[0].x, model.points[model.points.length - 1].x) + Math.abs(model.points[model.points.length - 1].x - model.points[0].x) / 2 + model.namePosition.x; - const y = Math.min(model.points[0].y, model.points[model.points.length - 1].y) + Math.abs(model.points[model.points.length - 1].y - model.points[0].y) / 2 + model.namePosition.y; - - /** 区段名称*/ - if (model.nameShow) { - let tempx = x; - let tempy = y - (style.sectionWidth + style.textFontSize + style.nameDistance); - - // 如果不是道岔区段 - if (model.type !== '03') { - // 如果逻辑区段，让名称和区段距离减少 - const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]); - if (model.type === '02') { - tempx += traingle.getSin(style.textFontSize * 0.8 + style.nameDistance); - tempy += traingle.getCos(style.textFontSize * 0.8 + style.nameDistance) - style.textFontSize * 2; - const parent = this.jmap.getDeviceByCode(model.parentCode); - if (parent) { - model.name = `${parent.name}-${model.name}`; - } - } - } - - // 创建区段名称 - const fontSize = style.type == '02' ? style.textFontSize + 2 : style.textFontSize; - this.sectionText = new Text({ - _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' - } - }); - 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); - // } - - // 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); - } - - /** 站台轨名称*/ - if (model.isStandTrack && model.standTrackNameShow) { - let tempx = x; - let tempy = y; - - // 计算文字和物理区段的距离 - const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]); - tempx += traingle.getSin(style.nameDistance); - tempy += traingle.getCos(style.nameDistance); - - // 创建站台轨名称 - this.standTrackText = new Text({ - 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' - } - }); - - // 添加视图 - this.add(this.standTrackText); - - } - - /** 折返轨名称*/ - if (model.isReentryTrack && model.reentryTrackNameShow) { - // 创建折返轨名称 - this.reentryTrackText = new Text({ - 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' - } - }); - - // 添加视图 - this.add(this.reentryTrackText); - } - - /** 转换轨名称*/ - if (model.isTransferTrack && model.transferTrackNameShow) { - // 转换轨名称 - this.transferTrackText = new Text({ - 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' - } - }); - - // 添加视图 - this.add(this.transferTrackText); - } - - /** 目的码名称*/ - if (model.destinationCode && model.destinationCodeShow) { - // 转换轨名称 - this.destinationText = new Text({ - 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' - } - }); - - // 添加视图 - this.add(this.destinationText); - } - } - } - - /** 创建计轴*/ - createAxles() { - const model = this.model; - const style = this.style; - - /** 创建四个计轴*/ - 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({ - style: style, - zlevel: this.zlevel, - name: `${this._code}_SectionAxle_LU`, - point: { - x: model.points[0].x, - y: model.points[0].y - }, - drictx: 1, - dricty: -1, - traingle: traingle - }); - this.lBottomAxle = new SectionAxle({ - style: style, - zlevel: this.zlevel, - name: `${this._code}_SectionAxle_LB`, - point: { - x: model.points[0].x, - y: model.points[0].y - }, - drictx: 1, - dricty: 1, - traingle: traingle - }); - - traingle = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]); - this.rUpAxle = new SectionAxle({ - style: style, - zlevel: this.zlevel, - name: `${this._code}_SectionAxle_RU`, - point: { - x: model.points[model.points.length - 1].x, - y: model.points[model.points.length - 1].y - }, - drictx: -1, - dricty: -1, - traingle: traingle - }); - this.rBottomAxle = new SectionAxle({ - style: style, - zlevel: this.zlevel, - name: `${this._code}_SectionAxle_RB`, - point: { - x: model.points[model.points.length - 1].x, - y: model.points[model.points.length - 1].y - }, - drictx: -1, - dricty: 1, - traingle: traingle - }); - - this.add(this.lUpAxle); - this.add(this.rUpAxle); - this.add(this.lBottomAxle); - this.add(this.rBottomAxle); - } - } - - /** 创建分隔符*/ - createSeparator() { - const model = this.model; - const style = this.style; - let traingle = null; - - if (model && style && model.points && model.points.length > 1) { - /** 创建左侧分隔符*/ - traingle = new JTriangle(model.points[0], model.points[1]); - this.lPartition = new SectionSeparator({ - style: style, - name: `${this._code}_SectionSeparator_L`, - borderBorderShow: model.borderBorderShow, - zlevel: this.zlevel - 2, - traingle: traingle, - point: { - x: model.points[0].x, - y: model.points[0].y - }, - sepType: model.sepTypeLeft, - drict: -1 - }); - - /** 创建右侧分隔符*/ - traingle = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]); - this.rPartition = new SectionSeparator({ - name: `${this._code}_SectionSeparator_R`, - style: style, - borderBorderShow: model.borderBorderShow, - zlevel: this.zlevel - 2, - traingle: traingle, - point: { - x: model.points[model.points.length - 1].x, - y: model.points[model.points.length - 1].y - }, - sepType: model.sepTypeRight, - drict: 1 - }); - - /** 添加视图*/ - this.add(this.lPartition); - this.add(this.rPartition); - } - } - - /** 设置区段集合显隐*/ - setInvisible() { - const invisible = this.model.type === '02' && this.model.logicSectionShow; - this.eachChild((child) => { - child.attr('invisible', invisible); - }); - } - - /** 设置区段恢复默认状态*/ - recover() { - if (this.section) { - this.section.stopAnimation(true); - this.section.setStyle({ - fill: this.style.backgroundColor, - stroke: this.style.sectionSpareColor, - lineWidth: this.style.sectionWidth - }); - - this.release.hide(); - this.speedLimitLeft.hide(); - this.speedLimitRight.hide(); - } - } - - /** 未定义状态*/ - undefine() { - if (this.section) { - this.section.setStyle({ - stroke: this.style.sectionUndefinedColor, - lineWidth: this.style.sectionWidth - }); - } - } - - /** 空闲状态*/ - spare() { - if (this.section) { - this.section.setStyle({ - stroke: this.style.sectionSpareColor, - lineWidth: this.style.sectionWidth - }); - } - } - - /** 通信车占用状态*/ - communicationOccupied() { - if (this.section) { - this.section.setStyle({ - stroke: this.style.sectionCommunicationOccupiedColor, - lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth - }); - } - } - - /** 非通信车占用状态*/ - unCommunicationOccupied() { - if (this.section) { - this.section.setStyle({ - stroke: this.style.sectionUnCommunicationOccupiedColor, - lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth - }); - } - } - - /** 进路锁闭*/ - routeLock() { - if (this.section) { - this.section.setStyle({ - stroke: this.style.sectionRouteLockColor, - lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth - }); - } - } - - /** 封锁*/ - block() { - if (this.section) { - this.section.setStyle({ - stroke: this.style.sectionBlockColor, - lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth - }); - } - } - - /** 故障锁定状态*/ - faultLock() { - if (this.section) { - this.section.setStyle({ - stroke: this.style.sectionFaultLockColor, - lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth - }); - } - } - - /** atc切除状态*/ - atcExcision() { - if (this.section) { - this.section.setStyle({ - stroke: this.style.sectionAtcExcisionColor, - lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth - }); - } - } - - /** ats切除状态*/ - 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 } } - ]); - } - } - - /** 保护区段锁闭*/ - protectiveLock() { - if (this.section) { - this.section.setStyle({ - stroke: this.style.sectionProtectiveLockColor, - lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth - }); - } - } - - /** 延时释放*/ - timeRelease() { - if (this.release) { - this.section.setStyle({ - stroke: this.style.sectionRouteLockColor, - lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth - }); - this.release.show(); - this.release.setStyle('lineWidth', this.style.sectionWidth + this.style.sectionBeyondWidth); - this.release.setStyle('stroke', this.style.sectionRouteLockColor); - this.release.animateStyle(true) - .when(1000, { stroke: this.style.sectionRouteLockColor }) - .when(2000, { stroke: this.style.sectionTimeReleaseColor }) - .start(); - } - } - - /** 保护区段延时解锁*/ - protectiveTimeRelease() { - if (this.release) { - this.section.setStyle({ - stroke: this.style.sectionProtectiveLockColor, - lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth - }); - this.release.show(); - this.release.setStyle('lineWidth', this.style.sectionWidth + this.style.sectionBeyondWidth); - this.release.setStyle('stroke', this.style.sectionProtectiveLockColor); - this.release.animateStyle(true) - .when(1000, { stroke: this.style.sectionProtectiveLockColor }) - .when(2000, { stroke: this.style.sectionProtectiveTimeReleaseColor }) - .start(); - } - } - - /** 区段切除*/ - sectionCutOff() { - if (this.release) { - const lineWidth = this.style.sectionWidth + (this.model.status != '01' ? this.style.sectionBeyondWidth : 0); - this.section.animateStyle(true, [ - { time: 0, styles: { lineWidth: lineWidth } }, - { time: 1000, styles: { stroke: this.style.backgroundColor } }, - { time: 2000, styles: { lineWidth: lineWidth } } - ]); - } - } - - /** 设置限速*/ - setSpeedUpperLimit() { - if (this.section) { - this.speedLimitLeft.show(); - this.speedLimitRight.show(); - } - } - - /** 计轴预复位*/ - axleReset() { - if (this.release) { - this.release.show(); - this.release.setStyle({ - stroke: this.style.sectionAxleResetColor - }); - } - } - - /** 计轴失效*/ - alxeFailure() { - if (this.section) { - this.section.setStyle({ - stroke: this.style.sectionAxleFailure, - lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth - }); - } - } - - /** 设置状态*/ - setState(state) { - this.recover(); - switch (state.status) { - case '00': /** 未定义*/ - this.undefine(); - break; - case '01': /** 空闲*/ - this.spare(); - break; - case '02': /** 通信车占用*/ - this.communicationOccupied(); - break; - case '03': /** 非通信车占用*/ - this.unCommunicationOccupied(); - break; - case '04': /** 进路锁闭*/ - this.routeLock(); - break; - case '05': /** 故障锁闭*/ - this.faultLock(); - break; - case '06': /** 封锁*/ - this.block(); - break; - case '07': /** ATC切除*/ - this.atcExcision(); - break; - case '08': /** ATS切除*/ - this.atsExcision(); - break; - case '09': /** 保护区段锁闭 */ - this.protectiveLock(); - break; - case '10': /** 延时释放 */ - this.timeRelease(); - break; - case '11': /** 保护区段延时解锁*/ - this.protectiveTimeRelease(); - break; - case '12': /** 计轴预复位*/ - this.axleReset(); - break; - case '13': /** ARB出清检测错误状态*/ - break; - case '14': /** 计轴失效*/ - this.alxeFailure(); - break; - } - - /** 区段切除*/ - if (state.cutOff) { - this.sectionCutOff(); - } - - /** 是否限速*/ - if (state.speedUpperLimit >= 0) { - this.setSpeedUpperLimit(); - } - } - - /** 计算提示位置*/ - getShapeTipPoint() { - let rect = this.getBoundingRect(); - let distance = this.style.sectionWidth / 2; - if (this.section) { - rect = this.section.getBoundingRect(); - if (this.model.type !== '02' && this.model.nameShow) { - if (this.model.trainPosType == '01') { - distance = distance + this.style.nameDistance + this.style.textFontSize; - } - } - } - - return { - x: rect.x + rect.width / 2, - y: rect.y + rect.height / 2.7 - distance - }; - } - - setTrainWindowEventShow(show) { - let trainWindowCode = this.model.trainWindowCode; - if (this.model.isSwitchSection && this.model.parentCode) { - const device = this.jmap.getDeviceByCode(this.model.parentCode); - if (device) { - trainWindowCode = device.trainWindowCode; - } - } - - const trainWindow = this.jmap.getViewInstanceByCode(trainWindowCode); - if (trainWindow) { - trainWindow.setTrainWindowEventShow(show); - } - } - - mouseStateVisible(subType) { - this.setTrainWindowEventShow(true); - if (this.model.isSwitchSection) { - if (subType == 'Text') { - this.sectionTextShadow && this.sectionTextShadow.show(); - } else { - // 道岔区段 - const refSwitch = this.jmap.getViewInstanceByCode(this.model.relSwitchCode); - refSwitch && refSwitch.mouseStateVisible(); - } - } else { - this.section && this.section.setBorderVisible(true); - this.sectionTextBorder && this.sectionTextBorder.show(); - this.sectionText && this.sectionText.setStyle({ textFill: '#000' }); - if (this.model.type == '02' && this.model.parentCode) { - this.sectionText && this.sectionText.show(); - } - } - } - - mouseStateRecover() { - this.setTrainWindowEventShow(false); - this.sectionTextShadow && this.sectionTextShadow.hide(); - if (this.model.isSwitchSection) { - // 道岔区段 - const refSwitch = this.jmap.getViewInstanceByCode(this.model.relSwitchCode); - refSwitch && refSwitch.mouseStateRecover(); - } else { - this.section && this.section.setBorderVisible(false); - this.sectionTextBorder && this.sectionTextBorder.hide(); - this.sectionText && this.sectionText.setStyle({ textFill: '#fff' }); - if (this.model.type == '02' && this.model.parentCode) { - this.sectionText && this.sectionText.hide(); - } - } - } - - mouseclick(e) { - if ([3].includes(e.which)) { - this.selected = !this.selected; - if (this.selected) { - this.mouseStateVisible(e.target._subType); - } - } - } - - mouseenter(e) { - if (!this.selected) { - this.mouseStateVisible(e.target._subType); - } - } - - mouseleave(e) { - if (!this.selected) { - this.mouseStateRecover(); - } - } -} diff --git a/src/jmap/shape/station.js b/src/jmap/shape/station.js deleted file mode 100644 index ea278dbbf..000000000 --- a/src/jmap/shape/station.js +++ /dev/null @@ -1,79 +0,0 @@ -/* -* 车站 -*/ -import Group from 'zrender/src/container/Group'; -import Text from 'zrender/src/graphic/Text'; - -export default class Station extends Group { - constructor({ _code, _type, zlevel, model, state }, style) { - super({name: _code}); - this.z = 40; - this._code = _code; - this._type = _type; - this.zlevel = zlevel; - this.model = model; - this.state = state; - this.style = style; - this._create(); - } - - _create() { - const model = this.model; - const style = this.style; - const state = this.state; - - if (model.visible) { - this.stationText = new Text({ - zlevel: this.zlevel, - z: this.z, - position: [0, 0], - style: { - x: model.position.x, - y: model.position.y, - text: model.name, - textAlign: 'middle', - textVerticalAlign: 'top', - textFont: model.nameFont || '18px ' + style.textFontFormat, - textFill: model.nameFontColor - } - }); - - this.mileageText = new Text({ - zlevel: this.zlevel, - z: this.z, - position: [0, 0], - style: { - x: model.position.x, - y: model.position.y + parseInt(model.nameFont) + 2, - text: model.kmPost, - textAlign: 'middle', - textVerticalAlign: 'top', - textFont: model.kmPostFont || '12px ' + style.textFontFormat, - textFill: model.kmPostFontColor - } - }); - - this.add(this.stationText); - this.add(this.mileageText); - this.setShowMileageText(model.kmPostShow); - this.setState(state); - } - } - - /** 设置公里标是否显示*/ - setShowMileageText(show) { - if (show) { - this.mileageText.show(); - } else { - this.mileageText.hide(); - } - } - - // eslint-disable-next-line no-unused-vars - setState(state) { - } - - getShapeTipPoint() { - return null; - } -} From 175417026cf24499bf1a04a802aad4dece3af8e2 Mon Sep 17 00:00:00 2001 From: ival <610568032@qq.com> Date: Mon, 15 Jul 2019 15:56:03 +0800 Subject: [PATCH 4/7] 1223 --- src/jmap/shape/Section.js | 1153 ++++++++++++++++++++++++++++++++ src/jmap/shape/Station.js | 79 +++ src/jmap/shape/lcControl.js | 156 ----- src/jmap/shape/limitControl.js | 171 ----- 4 files changed, 1232 insertions(+), 327 deletions(-) create mode 100644 src/jmap/shape/Section.js create mode 100644 src/jmap/shape/Station.js delete mode 100644 src/jmap/shape/lcControl.js delete mode 100644 src/jmap/shape/limitControl.js diff --git a/src/jmap/shape/Section.js b/src/jmap/shape/Section.js new file mode 100644 index 000000000..e5e0e4f60 --- /dev/null +++ b/src/jmap/shape/Section.js @@ -0,0 +1,1153 @@ +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 JTriangle from '../utils/JTriangle'; + +/** 计轴*/ +class SectionAxle extends Group { + constructor(model) { + super({name: `${model.name}`}); + 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({name: `${model.name}`}); + 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({name: `${model.name}`}); + 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({name: `${model.name}`}); + 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) { + super({name: _code}); + this._code = _code; + this._type = _type; + this.zlevel = zlevel; + this.z = model.layer || 0; + this.model = model; + this.state = state; + this.style = style; + this.selected = false; + this.jmap = jmap; + this._create(); + + // this.on('mousedown', this.mouseclick); + // this.on('mouseout', this.mouseleave); + // this.on('mouseover', this.mouseenter); + } + + _create() { + const model = this.model; + const state = this.state; + // 01:物理区段；02逻辑区段；03道岔区段 + this.createSectionText(); // 创建区段文字 + if (model.type === '01' && ( + model.logicSectionNum.length <= 0 || + model.logicSectionNum.length == 1 && model.logicSectionNum[0] == 0) || + model.type === '02') { + this.createSection(); // 创建区段 + this.createSeparator(); // 创建分隔符 + if (model.type === '01') { + this.createAxles(); // 创建计轴 + } + this.setState(state); + } + + this.mouseStateRecover(); + } + + /** 创建区段*/ + createSection() { + const model = this.model; + const style = this.style; + + // 创建区段 + this.section = new Lines({ + zlevel: this.zlevel, + z: this.z, + name: `${this._code}_Lines`, + isSwitchSection: model.isSwitchSection, + isCurve: model.isCurve, + points: model.points, + style: style + }); + + // 创建延时释放 + const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]); + this.release = new Line({ + zlevel: model.zlevel + 1, + z: this.z, + shape: { + x1: model.points[0].x + traingle.getCos(traingle.absz / 3), + y1: model.points[0].y + traingle.getSin(traingle.absz / 3), + 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 + } + }); + + let x = traingle.drictx * (style.sectionSpeedLimitDistance) * traingle.getSinRate(); + let y = traingle.dricty * (style.sectionSpeedLimitDistance) * traingle.getCosRate(); + if (x == Infinity) { x = 0; } + if (y == Infinity) { y = 0; } + + // 创建限速线 + this.speedLimitLeft = new LimitLines({ + zlevel: this.zlevel + 4, + z: this.z, + name: `${this._code}_LimitLines_L`, + position: [x, -y], + isCurve: model.isCurve, + points: model.points, + isSwitchSection: model.isSwitchSection, + relSwitchCode: model.relSwitchCode, + style: style + }); + + this.speedLimitRight = new LimitLines({ + zlevel: this.zlevel + 4, + z: this.z, + name: `${this._code}_LimitLines_R`, + position: [-x, y], + isCurve: model.isCurve, + points: model.points, + isSwitchSection: model.isSwitchSection, + relSwitchCode: model.relSwitchCode, + style: style + }); + + this.add(this.section); + this.add(this.release); + this.add(this.speedLimitLeft); + this.add(this.speedLimitRight); + } + + /** 创建区段名称*/ + createSectionText() { + const model = this.model; + const style = this.style; + + if (model && style) { + // 计算区段坐标位置 + const x = Math.min(model.points[0].x, model.points[model.points.length - 1].x) + Math.abs(model.points[model.points.length - 1].x - model.points[0].x) / 2 + model.namePosition.x; + const y = Math.min(model.points[0].y, model.points[model.points.length - 1].y) + Math.abs(model.points[model.points.length - 1].y - model.points[0].y) / 2 + model.namePosition.y; + + /** 区段名称*/ + if (model.nameShow) { + let tempx = x; + let tempy = y - (style.sectionWidth + style.textFontSize + style.nameDistance); + + // 如果不是道岔区段 + if (model.type !== '03') { + // 如果逻辑区段，让名称和区段距离减少 + const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]); + if (model.type === '02') { + tempx += traingle.getSin(style.textFontSize * 0.8 + style.nameDistance); + tempy += traingle.getCos(style.textFontSize * 0.8 + style.nameDistance) - style.textFontSize * 2; + const parent = this.jmap.getDeviceByCode(model.parentCode); + if (parent) { + model.name = `${parent.name}-${model.name}`; + } + } + } + + // 创建区段名称 + const fontSize = style.type == '02' ? style.textFontSize + 2 : style.textFontSize; + this.sectionText = new Text({ + _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' + } + }); + 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); + // } + + // 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); + } + + /** 站台轨名称*/ + if (model.isStandTrack && model.standTrackNameShow) { + let tempx = x; + let tempy = y; + + // 计算文字和物理区段的距离 + const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]); + tempx += traingle.getSin(style.nameDistance); + tempy += traingle.getCos(style.nameDistance); + + // 创建站台轨名称 + this.standTrackText = new Text({ + 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' + } + }); + + // 添加视图 + this.add(this.standTrackText); + + } + + /** 折返轨名称*/ + if (model.isReentryTrack && model.reentryTrackNameShow) { + // 创建折返轨名称 + this.reentryTrackText = new Text({ + 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' + } + }); + + // 添加视图 + this.add(this.reentryTrackText); + } + + /** 转换轨名称*/ + if (model.isTransferTrack && model.transferTrackNameShow) { + // 转换轨名称 + this.transferTrackText = new Text({ + 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' + } + }); + + // 添加视图 + this.add(this.transferTrackText); + } + + /** 目的码名称*/ + if (model.destinationCode && model.destinationCodeShow) { + // 转换轨名称 + this.destinationText = new Text({ + 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' + } + }); + + // 添加视图 + this.add(this.destinationText); + } + } + } + + /** 创建计轴*/ + createAxles() { + const model = this.model; + const style = this.style; + + /** 创建四个计轴*/ + 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({ + style: style, + zlevel: this.zlevel, + name: `${this._code}_SectionAxle_LU`, + point: { + x: model.points[0].x, + y: model.points[0].y + }, + drictx: 1, + dricty: -1, + traingle: traingle + }); + this.lBottomAxle = new SectionAxle({ + style: style, + zlevel: this.zlevel, + name: `${this._code}_SectionAxle_LB`, + point: { + x: model.points[0].x, + y: model.points[0].y + }, + drictx: 1, + dricty: 1, + traingle: traingle + }); + + traingle = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]); + this.rUpAxle = new SectionAxle({ + style: style, + zlevel: this.zlevel, + name: `${this._code}_SectionAxle_RU`, + point: { + x: model.points[model.points.length - 1].x, + y: model.points[model.points.length - 1].y + }, + drictx: -1, + dricty: -1, + traingle: traingle + }); + this.rBottomAxle = new SectionAxle({ + style: style, + zlevel: this.zlevel, + name: `${this._code}_SectionAxle_RB`, + point: { + x: model.points[model.points.length - 1].x, + y: model.points[model.points.length - 1].y + }, + drictx: -1, + dricty: 1, + traingle: traingle + }); + + this.add(this.lUpAxle); + this.add(this.rUpAxle); + this.add(this.lBottomAxle); + this.add(this.rBottomAxle); + } + } + + /** 创建分隔符*/ + createSeparator() { + const model = this.model; + const style = this.style; + let traingle = null; + + if (model && style && model.points && model.points.length > 1) { + /** 创建左侧分隔符*/ + traingle = new JTriangle(model.points[0], model.points[1]); + this.lPartition = new SectionSeparator({ + style: style, + name: `${this._code}_SectionSeparator_L`, + borderBorderShow: model.borderBorderShow, + zlevel: this.zlevel - 2, + traingle: traingle, + point: { + x: model.points[0].x, + y: model.points[0].y + }, + sepType: model.sepTypeLeft, + drict: -1 + }); + + /** 创建右侧分隔符*/ + traingle = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]); + this.rPartition = new SectionSeparator({ + name: `${this._code}_SectionSeparator_R`, + style: style, + borderBorderShow: model.borderBorderShow, + zlevel: this.zlevel - 2, + traingle: traingle, + point: { + x: model.points[model.points.length - 1].x, + y: model.points[model.points.length - 1].y + }, + sepType: model.sepTypeRight, + drict: 1 + }); + + /** 添加视图*/ + this.add(this.lPartition); + this.add(this.rPartition); + } + } + + /** 设置区段集合显隐*/ + setInvisible() { + const invisible = this.model.type === '02' && this.model.logicSectionShow; + this.eachChild((child) => { + child.attr('invisible', invisible); + }); + } + + /** 设置区段恢复默认状态*/ + recover() { + if (this.section) { + this.section.stopAnimation(true); + this.section.setStyle({ + fill: this.style.backgroundColor, + stroke: this.style.sectionSpareColor, + lineWidth: this.style.sectionWidth + }); + + this.release.hide(); + this.speedLimitLeft.hide(); + this.speedLimitRight.hide(); + } + } + + /** 未定义状态*/ + undefine() { + if (this.section) { + this.section.setStyle({ + stroke: this.style.sectionUndefinedColor, + lineWidth: this.style.sectionWidth + }); + } + } + + /** 空闲状态*/ + spare() { + if (this.section) { + this.section.setStyle({ + stroke: this.style.sectionSpareColor, + lineWidth: this.style.sectionWidth + }); + } + } + + /** 通信车占用状态*/ + communicationOccupied() { + if (this.section) { + this.section.setStyle({ + stroke: this.style.sectionCommunicationOccupiedColor, + lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth + }); + } + } + + /** 非通信车占用状态*/ + unCommunicationOccupied() { + if (this.section) { + this.section.setStyle({ + stroke: this.style.sectionUnCommunicationOccupiedColor, + lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth + }); + } + } + + /** 进路锁闭*/ + routeLock() { + if (this.section) { + this.section.setStyle({ + stroke: this.style.sectionRouteLockColor, + lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth + }); + } + } + + /** 封锁*/ + block() { + if (this.section) { + this.section.setStyle({ + stroke: this.style.sectionBlockColor, + lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth + }); + } + } + + /** 故障锁定状态*/ + faultLock() { + if (this.section) { + this.section.setStyle({ + stroke: this.style.sectionFaultLockColor, + lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth + }); + } + } + + /** atc切除状态*/ + atcExcision() { + if (this.section) { + this.section.setStyle({ + stroke: this.style.sectionAtcExcisionColor, + lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth + }); + } + } + + /** ats切除状态*/ + 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 } } + ]); + } + } + + /** 保护区段锁闭*/ + protectiveLock() { + if (this.section) { + this.section.setStyle({ + stroke: this.style.sectionProtectiveLockColor, + lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth + }); + } + } + + /** 延时释放*/ + timeRelease() { + if (this.release) { + this.section.setStyle({ + stroke: this.style.sectionRouteLockColor, + lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth + }); + this.release.show(); + this.release.setStyle('lineWidth', this.style.sectionWidth + this.style.sectionBeyondWidth); + this.release.setStyle('stroke', this.style.sectionRouteLockColor); + this.release.animateStyle(true) + .when(1000, { stroke: this.style.sectionRouteLockColor }) + .when(2000, { stroke: this.style.sectionTimeReleaseColor }) + .start(); + } + } + + /** 保护区段延时解锁*/ + protectiveTimeRelease() { + if (this.release) { + this.section.setStyle({ + stroke: this.style.sectionProtectiveLockColor, + lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth + }); + this.release.show(); + this.release.setStyle('lineWidth', this.style.sectionWidth + this.style.sectionBeyondWidth); + this.release.setStyle('stroke', this.style.sectionProtectiveLockColor); + this.release.animateStyle(true) + .when(1000, { stroke: this.style.sectionProtectiveLockColor }) + .when(2000, { stroke: this.style.sectionProtectiveTimeReleaseColor }) + .start(); + } + } + + /** 区段切除*/ + sectionCutOff() { + if (this.release) { + const lineWidth = this.style.sectionWidth + (this.model.status != '01' ? this.style.sectionBeyondWidth : 0); + this.section.animateStyle(true, [ + { time: 0, styles: { lineWidth: lineWidth } }, + { time: 1000, styles: { stroke: this.style.backgroundColor } }, + { time: 2000, styles: { lineWidth: lineWidth } } + ]); + } + } + + /** 设置限速*/ + setSpeedUpperLimit() { + if (this.section) { + this.speedLimitLeft.show(); + this.speedLimitRight.show(); + } + } + + /** 计轴预复位*/ + axleReset() { + if (this.release) { + this.release.show(); + this.release.setStyle({ + stroke: this.style.sectionAxleResetColor + }); + } + } + + /** 计轴失效*/ + alxeFailure() { + if (this.section) { + this.section.setStyle({ + stroke: this.style.sectionAxleFailure, + lineWidth: this.style.sectionWidth + this.style.sectionBeyondWidth + }); + } + } + + /** 设置状态*/ + setState(state) { + this.recover(); + switch (state.status) { + case '00': /** 未定义*/ + this.undefine(); + break; + case '01': /** 空闲*/ + this.spare(); + break; + case '02': /** 通信车占用*/ + this.communicationOccupied(); + break; + case '03': /** 非通信车占用*/ + this.unCommunicationOccupied(); + break; + case '04': /** 进路锁闭*/ + this.routeLock(); + break; + case '05': /** 故障锁闭*/ + this.faultLock(); + break; + case '06': /** 封锁*/ + this.block(); + break; + case '07': /** ATC切除*/ + this.atcExcision(); + break; + case '08': /** ATS切除*/ + this.atsExcision(); + break; + case '09': /** 保护区段锁闭 */ + this.protectiveLock(); + break; + case '10': /** 延时释放 */ + this.timeRelease(); + break; + case '11': /** 保护区段延时解锁*/ + this.protectiveTimeRelease(); + break; + case '12': /** 计轴预复位*/ + this.axleReset(); + break; + case '13': /** ARB出清检测错误状态*/ + break; + case '14': /** 计轴失效*/ + this.alxeFailure(); + break; + } + + /** 区段切除*/ + if (state.cutOff) { + this.sectionCutOff(); + } + + /** 是否限速*/ + if (state.speedUpperLimit >= 0) { + this.setSpeedUpperLimit(); + } + } + + /** 计算提示位置*/ + getShapeTipPoint() { + let rect = this.getBoundingRect(); + let distance = this.style.sectionWidth / 2; + if (this.section) { + rect = this.section.getBoundingRect(); + if (this.model.type !== '02' && this.model.nameShow) { + if (this.model.trainPosType == '01') { + distance = distance + this.style.nameDistance + this.style.textFontSize; + } + } + } + + return { + x: rect.x + rect.width / 2, + y: rect.y + rect.height / 2.7 - distance + }; + } + + setTrainWindowEventShow(show) { + let trainWindowCode = this.model.trainWindowCode; + if (this.model.isSwitchSection && this.model.parentCode) { + const device = this.jmap.getDeviceByCode(this.model.parentCode); + if (device) { + trainWindowCode = device.trainWindowCode; + } + } + + const trainWindow = this.jmap.getViewInstanceByCode(trainWindowCode); + if (trainWindow) { + trainWindow.setTrainWindowEventShow(show); + } + } + + mouseStateVisible(subType) { + this.setTrainWindowEventShow(true); + if (this.model.isSwitchSection) { + if (subType == 'Text') { + this.sectionTextShadow && this.sectionTextShadow.show(); + } else { + // 道岔区段 + const refSwitch = this.jmap.getViewInstanceByCode(this.model.relSwitchCode); + refSwitch && refSwitch.mouseStateVisible(); + } + } else { + this.section && this.section.setBorderVisible(true); + this.sectionTextBorder && this.sectionTextBorder.show(); + this.sectionText && this.sectionText.setStyle({ textFill: '#000' }); + if (this.model.type == '02' && this.model.parentCode) { + this.sectionText && this.sectionText.show(); + } + } + } + + mouseStateRecover() { + this.setTrainWindowEventShow(false); + this.sectionTextShadow && this.sectionTextShadow.hide(); + if (this.model.isSwitchSection) { + // 道岔区段 + const refSwitch = this.jmap.getViewInstanceByCode(this.model.relSwitchCode); + refSwitch && refSwitch.mouseStateRecover(); + } else { + this.section && this.section.setBorderVisible(false); + this.sectionTextBorder && this.sectionTextBorder.hide(); + this.sectionText && this.sectionText.setStyle({ textFill: '#fff' }); + if (this.model.type == '02' && this.model.parentCode) { + this.sectionText && this.sectionText.hide(); + } + } + } + + mouseclick(e) { + if ([3].includes(e.which)) { + this.selected = !this.selected; + if (this.selected) { + this.mouseStateVisible(e.target._subType); + } + } + } + + mouseenter(e) { + if (!this.selected) { + this.mouseStateVisible(e.target._subType); + } + } + + mouseleave(e) { + if (!this.selected) { + this.mouseStateRecover(); + } + } +} diff --git a/src/jmap/shape/Station.js b/src/jmap/shape/Station.js new file mode 100644 index 000000000..ea278dbbf --- /dev/null +++ b/src/jmap/shape/Station.js @@ -0,0 +1,79 @@ +/* +* 车站 +*/ +import Group from 'zrender/src/container/Group'; +import Text from 'zrender/src/graphic/Text'; + +export default class Station extends Group { + constructor({ _code, _type, zlevel, model, state }, style) { + super({name: _code}); + this.z = 40; + this._code = _code; + this._type = _type; + this.zlevel = zlevel; + this.model = model; + this.state = state; + this.style = style; + this._create(); + } + + _create() { + const model = this.model; + const style = this.style; + const state = this.state; + + if (model.visible) { + this.stationText = new Text({ + zlevel: this.zlevel, + z: this.z, + position: [0, 0], + style: { + x: model.position.x, + y: model.position.y, + text: model.name, + textAlign: 'middle', + textVerticalAlign: 'top', + textFont: model.nameFont || '18px ' + style.textFontFormat, + textFill: model.nameFontColor + } + }); + + this.mileageText = new Text({ + zlevel: this.zlevel, + z: this.z, + position: [0, 0], + style: { + x: model.position.x, + y: model.position.y + parseInt(model.nameFont) + 2, + text: model.kmPost, + textAlign: 'middle', + textVerticalAlign: 'top', + textFont: model.kmPostFont || '12px ' + style.textFontFormat, + textFill: model.kmPostFontColor + } + }); + + this.add(this.stationText); + this.add(this.mileageText); + this.setShowMileageText(model.kmPostShow); + this.setState(state); + } + } + + /** 设置公里标是否显示*/ + setShowMileageText(show) { + if (show) { + this.mileageText.show(); + } else { + this.mileageText.hide(); + } + } + + // eslint-disable-next-line no-unused-vars + setState(state) { + } + + getShapeTipPoint() { + return null; + } +} diff --git a/src/jmap/shape/lcControl.js b/src/jmap/shape/lcControl.js deleted file mode 100644 index 18ce63f58..000000000 --- a/src/jmap/shape/lcControl.js +++ /dev/null @@ -1,156 +0,0 @@ -/* -* lC区域控制模式 -*/ -import Arc from 'zrender/src/graphic/shape/Arc'; -import Rect from 'zrender/src/graphic/shape/Rect'; -import Text from 'zrender/src/graphic/Text'; -import Group from 'zrender/src/container/Group'; - -export default class LcControl extends Group { - constructor({ _code, _type, zlevel, model, state }, style) { - super({name: _code}); - this.z = 20; - this._code = _code; - this._type = _type; - this.zlevel = zlevel; - this.model = model; - this.state = state; - this.style = style; - this._create(); - - this.on('mouseout', this.mouseleave); - this.on('mouseover', this.mouseenter); - } - - _create() { - const model = this.model; - const state = this.state; - this.control = new Arc({ - _subType: 'Control', - zlevel: this.zlevel, - z: this.z, - shape: { - cx: model.position.x, - cy: model.position.y, - r: this.style.zcControlmodeR - }, - style: { - lineWidth: 0, - fill: '' - } - }); - - this.text = new Text({ - _subType: 'Text', - zlevel: this.zlevel, - z: this.z, - position: [0, 0], - style: { - x: model.position.x, - y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance, - text: model.name, - textFill: '', - textAlign: 'middle', - textVerticalAlign: 'top', - textFont: this.style.stationControlTextSize + 'px ' + this.style.textFontFormat - } - }); - - this.textShadow = new Text({ - zlevel: this.zlevel, - z: this.z + 1, - position: [4, -2], - silent: true, - style: { - x: model.position.x, - y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance, - text: model.name, - textFill: this.style.textShadowColor, // 黄色 - textAlign: 'middle', - textVerticalAlign: 'top', - textFont: 'bold ' + (this.style.stationControlTextSize + 1) + 'px ' + this.style.textFontFormat - } - }); - this.controlBorder = new Rect({ - zlevel: model.zlevel, - z: this.z - 1, - silent: true, - shape: this.control.getBoundingRect(), - style: { - lineDash: [3, 3], - stroke: this.style.borderColor, - fill: this.style.transparentColor - } - }); - - this.textBorder = new Rect({ - zlevel: model.zlevel, - z: this.z - 1, - silent: true, - shape: this.text.getBoundingRect(), - style: { - lineDash: [3, 3], - stroke: this.style.borderColor, - fill: this.style.borderContextBackgroundColor - } - }); - - this.add(this.control); - this.add(this.text); - this.add(this.textShadow); - this.add(this.textBorder); - this.add(this.controlBorder); - this.setState(state); - this.mouseStateRecover(); - } - - // 设置状态 - setState(state) {} - - getShapeTipPoint() { - if (this.control) { - var distance = 2; - var rect = this.control.getBoundingRect(); - return { - x: rect.x + rect.width / 2, - y: rect.y - distance - }; - } - return null; - } - - mouseStateVisible(subType) { - if (subType == 'Text') { - this.textShadow.show(); - } - - if (subType == 'Control') { - this.textBorder.show(); - this.controlBorder.show(); - this.text.setStyle({ textFill: '#000' }); - this.control.setStyle({ fill: this.style.borderContextBackgroundColor }); - } - } - - mouseStateRecover() { - this.textShadow.hide(); - this.textBorder.hide(); - this.controlBorder.hide(); - this.text.setStyle({ textFill: '#fff' }); - this.control.setStyle({ fill: this.style.lcControlColor }); - this.setState(this.state); - } - - mouseenter(e) { - if (e.target._subType) { - this.mouseStateRecover(); - this.mouseStateVisible(e.target._subType); - } - } - - mouseleave(e) { - if (e.target._subType) { - this.mouseStateRecover(); - } - } -} diff --git a/src/jmap/shape/limitControl.js b/src/jmap/shape/limitControl.js deleted file mode 100644 index b3aa6edea..000000000 --- a/src/jmap/shape/limitControl.js +++ /dev/null @@ -1,171 +0,0 @@ -/* -* 权限临时限速 -*/ -import Arc from 'zrender/src/graphic/shape/Arc'; -import Rect from 'zrender/src/graphic/shape/Rect'; -import Text from 'zrender/src/graphic/Text'; -import Group from 'zrender/src/container/Group'; - -export default class LimitControl extends Group { - constructor({ _code, _type, zlevel, model, state }, style) { - super({name: _code}); - this.selected = false; - this._code = _code; - this._type = _type; - this.model = model; - this.state = state; - this.style = style; - this.zlevel = zlevel; - this.z = 20; - this._create(model); - - this.on('mousedown', this.mouseclick); - this.on('mouseout', this.mouseleave); - this.on('mouseover', this.mouseenter); - } - - _create(model) { - this.control = new Arc({ - _subType: 'Control', - zlevel: this.zlevel, - z: this.z, - shape: { - cx: model.position.x, - cy: model.position.y, - r: this.style.zcControlmodeR - }, - style: { - lineWidth: 0, - fill: '' - } - }); - - this.text = new Text({ - _subType: 'Text', - zlevel: this.zlevel, - z: this.z, - position: [0, 0], - style: { - x: model.position.x, - y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance, - text: model.name, - textFill: '', - textAlign: 'middle', - textVerticalAlign: 'top', - textFont: this.style.stationControlTextSize + 'px ' + this.style.textFontFormat - } - }); - - this.textShadow = new Text({ - zlevel: this.zlevel, - z: this.z + 1, - position: [4, -4], - silent: true, - style: { - x: model.position.x, - y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance, - text: model.name, - textFill: this.style.textShadowColor, // 黄色 - textAlign: 'middle', - textVerticalAlign: 'top', - textFont: 'bold ' + (this.style.stationControlTextSize + 1) + 'px ' + this.style.textFontFormat - } - }); - - this.controlBorder = new Rect({ - zlevel: model.zlevel, - z: this.z - 1, - silent: true, - shape: this.control.getBoundingRect(), - style: { - lineDash: [3, 3], - stroke: this.style.borderColor, - fill: this.style.transparentColor - } - }); - - this.textBorder = new Rect({ - zlevel: model.zlevel, - z: this.z - 1, - silent: true, - shape: this.text.getBoundingRect(), - style: { - lineDash: [3, 3], - stroke: this.style.borderColor, - fill: this.style.borderContextBackgroundColor - } - }); - - this.add(this.control); - this.add(this.text); - this.add(this.textShadow); - this.add(this.textBorder); - this.add(this.controlBorder); - this.setState(this.state); - this.mouseStateRecover(); - } - - // 设置状态 - setState(state) { - } - - getShapeTipPoint() { - if (this.control) { - var distance = 2; - var rect = this.control.getBoundingRect(); - return { - x: rect.x + rect.width / 2, - y: rect.y - distance - }; - } - return null; - } - - mouseStateVisible(subType) { - if (subType == 'Text') { - this.textShadow.show(); - } - - if (subType == 'Control') { - this.textBorder.show(); - this.controlBorder.show(); - this.text.setStyle({ textFill: '#000' }); - this.control.setStyle({ fill: this.style.borderContextBackgroundColor }); - } - } - - mouseStateRecover() { - this.textShadow.hide(); - this.textBorder.hide(); - this.controlBorder.hide(); - this.text.setStyle({ textFill: '#fff' }); - this.control.setStyle({ fill: this.style.limitControlColor }); - this.setState(this.state); - } - - mouseclick(e) { - if ([3].includes(e.which)) { - this.selected = !this.selected; - if (this.selected) { - // this.mouseStateRecover(); - this.mouseStateVisible('Control'); - } - } - } - - mouseenter(e) { - if (!this.selected && e.target._subType) { - // this.mouseStateRecover(); - this.mouseStateVisible(e.target._subType); - } - } - - mouseleave(e) { - if (e.target && e.target._subType) { - if (!this.selected && e.target._subType) { - this.mouseStateRecover(); - } - } - - } -} From d95554b0a89868f3e3720e5368475c8f4e884142 Mon Sep 17 00:00:00 2001 From: ival <610568032@qq.com> Date: Mon, 15 Jul 2019 15:56:41 +0800 Subject: [PATCH 5/7] =?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/shape/LcControl.js | 156 ++++++++++++++++++++++++++++++ src/jmap/shape/LimitControl.js | 171 +++++++++++++++++++++++++++++++++ 2 files changed, 327 insertions(+) create mode 100644 src/jmap/shape/LcControl.js create mode 100644 src/jmap/shape/LimitControl.js diff --git a/src/jmap/shape/LcControl.js b/src/jmap/shape/LcControl.js new file mode 100644 index 000000000..18ce63f58 --- /dev/null +++ b/src/jmap/shape/LcControl.js @@ -0,0 +1,156 @@ +/* +* lC区域控制模式 +*/ +import Arc from 'zrender/src/graphic/shape/Arc'; +import Rect from 'zrender/src/graphic/shape/Rect'; +import Text from 'zrender/src/graphic/Text'; +import Group from 'zrender/src/container/Group'; + +export default class LcControl extends Group { + constructor({ _code, _type, zlevel, model, state }, style) { + super({name: _code}); + this.z = 20; + this._code = _code; + this._type = _type; + this.zlevel = zlevel; + this.model = model; + this.state = state; + this.style = style; + this._create(); + + this.on('mouseout', this.mouseleave); + this.on('mouseover', this.mouseenter); + } + + _create() { + const model = this.model; + const state = this.state; + this.control = new Arc({ + _subType: 'Control', + zlevel: this.zlevel, + z: this.z, + shape: { + cx: model.position.x, + cy: model.position.y, + r: this.style.zcControlmodeR + }, + style: { + lineWidth: 0, + fill: '' + } + }); + + this.text = new Text({ + _subType: 'Text', + zlevel: this.zlevel, + z: this.z, + position: [0, 0], + style: { + x: model.position.x, + y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance, + text: model.name, + textFill: '', + textAlign: 'middle', + textVerticalAlign: 'top', + textFont: this.style.stationControlTextSize + 'px ' + this.style.textFontFormat + } + }); + + this.textShadow = new Text({ + zlevel: this.zlevel, + z: this.z + 1, + position: [4, -2], + silent: true, + style: { + x: model.position.x, + y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance, + text: model.name, + textFill: this.style.textShadowColor, // 黄色 + textAlign: 'middle', + textVerticalAlign: 'top', + textFont: 'bold ' + (this.style.stationControlTextSize + 1) + 'px ' + this.style.textFontFormat + } + }); + this.controlBorder = new Rect({ + zlevel: model.zlevel, + z: this.z - 1, + silent: true, + shape: this.control.getBoundingRect(), + style: { + lineDash: [3, 3], + stroke: this.style.borderColor, + fill: this.style.transparentColor + } + }); + + this.textBorder = new Rect({ + zlevel: model.zlevel, + z: this.z - 1, + silent: true, + shape: this.text.getBoundingRect(), + style: { + lineDash: [3, 3], + stroke: this.style.borderColor, + fill: this.style.borderContextBackgroundColor + } + }); + + this.add(this.control); + this.add(this.text); + this.add(this.textShadow); + this.add(this.textBorder); + this.add(this.controlBorder); + this.setState(state); + this.mouseStateRecover(); + } + + // 设置状态 + setState(state) {} + + getShapeTipPoint() { + if (this.control) { + var distance = 2; + var rect = this.control.getBoundingRect(); + return { + x: rect.x + rect.width / 2, + y: rect.y - distance + }; + } + return null; + } + + mouseStateVisible(subType) { + if (subType == 'Text') { + this.textShadow.show(); + } + + if (subType == 'Control') { + this.textBorder.show(); + this.controlBorder.show(); + this.text.setStyle({ textFill: '#000' }); + this.control.setStyle({ fill: this.style.borderContextBackgroundColor }); + } + } + + mouseStateRecover() { + this.textShadow.hide(); + this.textBorder.hide(); + this.controlBorder.hide(); + this.text.setStyle({ textFill: '#fff' }); + this.control.setStyle({ fill: this.style.lcControlColor }); + this.setState(this.state); + } + + mouseenter(e) { + if (e.target._subType) { + this.mouseStateRecover(); + this.mouseStateVisible(e.target._subType); + } + } + + mouseleave(e) { + if (e.target._subType) { + this.mouseStateRecover(); + } + } +} diff --git a/src/jmap/shape/LimitControl.js b/src/jmap/shape/LimitControl.js new file mode 100644 index 000000000..b3aa6edea --- /dev/null +++ b/src/jmap/shape/LimitControl.js @@ -0,0 +1,171 @@ +/* +* 权限临时限速 +*/ +import Arc from 'zrender/src/graphic/shape/Arc'; +import Rect from 'zrender/src/graphic/shape/Rect'; +import Text from 'zrender/src/graphic/Text'; +import Group from 'zrender/src/container/Group'; + +export default class LimitControl extends Group { + constructor({ _code, _type, zlevel, model, state }, style) { + super({name: _code}); + this.selected = false; + this._code = _code; + this._type = _type; + this.model = model; + this.state = state; + this.style = style; + this.zlevel = zlevel; + this.z = 20; + this._create(model); + + this.on('mousedown', this.mouseclick); + this.on('mouseout', this.mouseleave); + this.on('mouseover', this.mouseenter); + } + + _create(model) { + this.control = new Arc({ + _subType: 'Control', + zlevel: this.zlevel, + z: this.z, + shape: { + cx: model.position.x, + cy: model.position.y, + r: this.style.zcControlmodeR + }, + style: { + lineWidth: 0, + fill: '' + } + }); + + this.text = new Text({ + _subType: 'Text', + zlevel: this.zlevel, + z: this.z, + position: [0, 0], + style: { + x: model.position.x, + y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance, + text: model.name, + textFill: '', + textAlign: 'middle', + textVerticalAlign: 'top', + textFont: this.style.stationControlTextSize + 'px ' + this.style.textFontFormat + } + }); + + this.textShadow = new Text({ + zlevel: this.zlevel, + z: this.z + 1, + position: [4, -4], + silent: true, + style: { + x: model.position.x, + y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance, + text: model.name, + textFill: this.style.textShadowColor, // 黄色 + textAlign: 'middle', + textVerticalAlign: 'top', + textFont: 'bold ' + (this.style.stationControlTextSize + 1) + 'px ' + this.style.textFontFormat + } + }); + + this.controlBorder = new Rect({ + zlevel: model.zlevel, + z: this.z - 1, + silent: true, + shape: this.control.getBoundingRect(), + style: { + lineDash: [3, 3], + stroke: this.style.borderColor, + fill: this.style.transparentColor + } + }); + + this.textBorder = new Rect({ + zlevel: model.zlevel, + z: this.z - 1, + silent: true, + shape: this.text.getBoundingRect(), + style: { + lineDash: [3, 3], + stroke: this.style.borderColor, + fill: this.style.borderContextBackgroundColor + } + }); + + this.add(this.control); + this.add(this.text); + this.add(this.textShadow); + this.add(this.textBorder); + this.add(this.controlBorder); + this.setState(this.state); + this.mouseStateRecover(); + } + + // 设置状态 + setState(state) { + } + + getShapeTipPoint() { + if (this.control) { + var distance = 2; + var rect = this.control.getBoundingRect(); + return { + x: rect.x + rect.width / 2, + y: rect.y - distance + }; + } + return null; + } + + mouseStateVisible(subType) { + if (subType == 'Text') { + this.textShadow.show(); + } + + if (subType == 'Control') { + this.textBorder.show(); + this.controlBorder.show(); + this.text.setStyle({ textFill: '#000' }); + this.control.setStyle({ fill: this.style.borderContextBackgroundColor }); + } + } + + mouseStateRecover() { + this.textShadow.hide(); + this.textBorder.hide(); + this.controlBorder.hide(); + this.text.setStyle({ textFill: '#fff' }); + this.control.setStyle({ fill: this.style.limitControlColor }); + this.setState(this.state); + } + + mouseclick(e) { + if ([3].includes(e.which)) { + this.selected = !this.selected; + if (this.selected) { + // this.mouseStateRecover(); + this.mouseStateVisible('Control'); + } + } + } + + mouseenter(e) { + if (!this.selected && e.target._subType) { + // this.mouseStateRecover(); + this.mouseStateVisible(e.target._subType); + } + } + + mouseleave(e) { + if (e.target && e.target._subType) { + if (!this.selected && e.target._subType) { + this.mouseStateRecover(); + } + } + + } +} From 5372284ff832841327a99a3418ed4f89596d12ae Mon Sep 17 00:00:00 2001 From: ival <610568032@qq.com> Date: Mon, 15 Jul 2019 15:58:09 +0800 Subject: [PATCH 6/7] =?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/shape/factory.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/jmap/shape/factory.js b/src/jmap/shape/factory.js index 59893aa07..3644de766 100644 --- a/src/jmap/shape/factory.js +++ b/src/jmap/shape/factory.js @@ -1,12 +1,12 @@ import deviceType from '../config/deviceType'; import Link from './Link'; -import Section from './section'; +import Section from './Section'; import Signal from './Signal'; -import Station from './station'; +import Station from './Station'; import StationControl from './StationControl'; import ImageControl from './ImageControl'; -import LcControl from './lcControl'; -import LimitControl from './limitControl'; +import LcControl from './LcControl'; +import LimitControl from './LimitControl'; import Switch from './Switch'; import ZcControl from './ZcControl'; import StationCounter from './StationCounter'; From 1b392a3832457b3bba8bfd04ed86129404d95885 Mon Sep 17 00:00:00 2001 From: fan <18706759286@163.com> Date: Mon, 15 Jul 2019 16:03:23 +0800 Subject: [PATCH 7/7] Merge branch 'master' of https://git.cloud.tencent.com/joylink/jl-nclient # Conflicts: # src/jmap/config/deviceStyle.js # src/jmap/config/deviceType.js # src/jmap/shape/factory.js # src/jmap/utils/parser.js --- src/jmap/config/deviceStyle.js | 161 +++++++++++++++++++++++++++++++++ src/jmap/shape/Train.js | 8 +- src/jmap/shape/factory.js | 4 + 3 files changed, 169 insertions(+), 4 deletions(-) diff --git a/src/jmap/config/deviceStyle.js b/src/jmap/config/deviceStyle.js index b96962ed2..4de81149c 100644 --- a/src/jmap/config/deviceStyle.js +++ b/src/jmap/config/deviceStyle.js @@ -309,6 +309,167 @@ fuzhouSkin[deviceType.StationCounter] = { /** 计数器边框颜色*/ stationCounterBorderColor: '#E4EF50' }; +fuzhouSkin[deviceType.StationStand] = { + /** 站台空闲颜色*/ + stationStandSpareColor: '#74747C', + + /** 列车边线颜色*/ + trainSidelineColor: '#C0C0C0', + + /** 站台和屏蔽门之间的距离*/ + stationStandDistance: 8, + + /** 站台无人折返*/ + stationStandNoHumanReentryColor: '#0F16DA', + + /** 站台首端字体大小*/ + stationStandHeadFontSize: 10, + + /** 中心扣车颜色*/ + stationStandCenterDetainTrainColor: '#FFFFFF', + + /** 默认字体 族类*/ + textFontFormat: '宋体', //consolas + + /** 默认背景 颜色*/ + backgroundColor: '#000000', + + /** 默认字体 大小*/ + textFontSize: 8.2, + + /** 停站时间字体颜色*/ + stationStandTimeTextColor: '#FFFFFF', + + /** 站台紧急关闭颜色*/ + stationStandEmergentCloseColor: '#F61107', + + /** 站台屏蔽门高度*/ + statonStandSafeHeight: 1.6, + + /** 屏蔽门默认颜色*/ + stationStandDoorDefaultColor: '#4DD43F', + + /** 站台列车停站颜色*/ + stationStandStopColor: '#FEFE00', + + /** 站台指定列车跳停颜色*/ + stationStandDesignatedJumpStopColor: 'lightSkyBlue', + + /** 站台跳停颜色*/ + stationStandJumpStopColor: '#9A99FF', + + /** 车站扣除文字颜色*/ + stationstandDetainTrainTextColor: '#E4EF50', + + /** 屏蔽门切除颜色*/ + stationStandSplitDoorColor: '#F61107', + + /** 站台自动换端*/ + stationStandAutoChangeEndsColor: '#0BF400', + + /** 默认border文字背景色*/ + borderContextBackgroundColor: '#00FFFF', + + /** 默认边线 颜色*/ + sidelineColor: '#FFFFFF', + +}; + +fuzhouSkin[deviceType.TrainWindow] = { + /** 车次窗高度*/ + trainWindowWidth: 40, + + /** 车次窗高度*/ + trainWindowHeight: 15, + + /** 车次窗颜色*/ + trainWindowColor: '#4DD43F', + + /** 透明填充 颜色*/ + transparentColor: 'rgba(0,0,0,0)', + +}; + +fuzhouSkin[deviceType.Train] = { + /** 列车长度*/ + trainWidth: 76, + + /** 列车高度*/ + trainHeight: 17, + + /** 列车字号*/ + trainTextFontSize: 15, + + // 列车文字间距 + trainTextSpaceBetween: 27, + + + /** 列车HDSA字号*/ + trainHSDATextFontSize: 8, + + /** 列车信号的半径*/ + trainConflictR: 3, + + /** 列车信号距离车的距离*/ + trainConflictDistance: 5, + + /** 列车车头比车身高出的长度,上下相比车体伸出去的边框*/ + trainMoreLength: 1, + + /** 列车和车头之间的间距*/ + trainHeadDistance: 2, + + /** 列车竖杠的宽度*/ + trainConntWidth: 4, + + /** 列车竖杠和方向之间的间隔*/ + trainPadding: 1, + + /** 列车方向的宽度*/ + trainArrowWidth: 6, + + /** 列车和区段之间的距离*/ + trainDistance: 18, + + /** 列车背景*/ + trainBackground: 'rgba(0,0,0,0)', + + /** 列车边线颜色*/ + trainSidelineColor: '#C0C0C0', + + /** 列车文字颜色*/ + trainTextColor: '#ffffff', + + /** 列车 灰色*/ + trainGrayColor: '#C0C0C0', + + /** 列车 白色*/ + trainWitheColor: '#FFFFFF', + + /** 列车 棕色*/ + trainBrownColor: '#9B4A09', + + /** 列车 黄色*/ + trainYellowColor: '#FFFF00', + + /** 列车 绿色*/ + trainGreenColor: '#00AF50', + + /** 列车 蓝色*/ + trainBlueColor: '#3265FF', + + /** 列车 红色*/ + trainRedColor: '#EF0C08', + + /** 列车 橘色*/ + trainOrangeColor: '#EA700D', + + /** 列车 紫色*/ + trainPurpleColor: 'purple', + + /** 列车 粉色*/ + trainPinkColor: 'pink', +}; /** 皮肤配置*/ const deviceSkin = { '03': fuzhouSkin, diff --git a/src/jmap/shape/Train.js b/src/jmap/shape/Train.js index 2f3d85b93..a00d62f17 100644 --- a/src/jmap/shape/Train.js +++ b/src/jmap/shape/Train.js @@ -165,7 +165,7 @@ class TrainBody extends Group { this.add(this.textTrainTarget); } setMouseOver() { - store.dispatch('map/setTrainDetails', this.model); + //store.dispatch('map/setTrainDetails', this.model); this.details = store.state.map.trainDetails; this.add(this.arrowText); this.arrowText.attr({ @@ -177,7 +177,7 @@ class TrainBody extends Group { } setMouseOut() { this.remove(this.arrowText); - store.dispatch('map/setTrainDetails', null); + //store.dispatch('map/setTrainDetails', null); } setTrainColor(color) { this.train && this.train.setStyle('fill', color); @@ -371,7 +371,7 @@ export default class Train extends Group { }) this.add(this.trainBorder); - this.setStatus(model); + this.setState(model); this.mouseStatusRecover(); } } @@ -544,7 +544,7 @@ export default class Train extends Group { } //设置状态 - setStatus(model) { + setState(model) { if (model) { this.recover(); this.setServerNoType(model.serverNoType); //设置服务号状态类型 diff --git a/src/jmap/shape/factory.js b/src/jmap/shape/factory.js index 3644de766..db6366fb3 100644 --- a/src/jmap/shape/factory.js +++ b/src/jmap/shape/factory.js @@ -11,6 +11,8 @@ import Switch from './Switch'; import ZcControl from './ZcControl'; import StationCounter from './StationCounter'; import StationDelayUnlock from './StationDelayUnlock'; +import TrainWindow from "./TrainWindow"; +import Train from "./Train"; /** 图库*/ const mapShape = {}; @@ -26,6 +28,8 @@ mapShape[deviceType.Switch] = Switch; mapShape[deviceType.ZcControl] = ZcControl; mapShape[deviceType.StationCounter] = StationCounter; mapShape[deviceType.StationDelayUnlock] = StationDelayUnlock; +mapShape[deviceType.TrainWindow] = TrainWindow; +mapShape[deviceType.Train] = Train; function shapefactory(type, device, jmap) { const style = jmap.getStyleDict();