From 4a2c539553cc47206a0146a852365dca5d87064d Mon Sep 17 00:00:00 2001 From: fan <18706759286@163.com> Date: Fri, 13 Mar 2020 13:01:58 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E5=93=88=E5=B0=94=E6=BB=A8=E7=8E=B0?= =?UTF-8?q?=E5=9C=B0=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jmapNew/map.js | 56 ++ src/jmapNew/painter.js | 13 + src/jmapNew/shape/Automactic/index.js | 35 +- src/jmapNew/shape/AutomacticRoute/EMouse.js | 94 +-- src/jmapNew/shape/AutomacticRoute/index.js | 32 +- src/jmapNew/shape/LcControl/index.js | 13 +- src/jmapNew/shape/LimitControl/index.js | 12 + src/jmapNew/shape/Line/index.js | 16 + src/jmapNew/shape/OutFrame/index.js | 13 + src/jmapNew/shape/Psd/ESafeDoor.js | 14 + src/jmapNew/shape/Psd/index.js | 13 +- src/jmapNew/shape/Resource/index.js | 12 + src/jmapNew/shape/Section/EAxle.js | 48 +- src/jmapNew/shape/Section/ESeparator.js | 204 ++--- src/jmapNew/shape/Section/index.js | 16 + src/jmapNew/shape/Signal/index.js | 16 + src/jmapNew/shape/Station/index.js | 17 +- src/jmapNew/shape/StationControl/index.js | 16 + src/jmapNew/shape/StationCounter/index.js | 16 + src/jmapNew/shape/StationDelayUnlock/index.js | 16 + src/jmapNew/shape/StationStand/index.js | 16 + src/jmapNew/shape/Switch/index.js | 18 +- src/jmapNew/shape/Text/index.js | 16 + src/jmapNew/shape/Train/index.js | 24 + src/jmapNew/shape/TrainWindow/index.js | 16 + src/jmapNew/shape/ZcControl/index.js | 16 + src/jmapNew/shape/element/EControl.js | 8 - src/jmapNew/theme/factory.js | 9 + src/jmapNew/theme/haerbin_01/menus/index.vue | 13 +- .../theme/haerbin_01/menus/menuBar.vue | 701 +++--------------- src/store/modules/map.js | 15 +- src/utils/loaddata.js | 1 + src/views/newMap/jlmapNew/index.vue | 50 +- .../newMap/jlmapNew/pendant/showMode.vue | 30 +- .../newMap/jlmapNew/pendant/switchStation.vue | 117 +++ src/views/newMap/jlmapNew/pendant/zoom.vue | 4 +- 36 files changed, 905 insertions(+), 821 deletions(-) create mode 100644 src/views/newMap/jlmapNew/pendant/switchStation.vue diff --git a/src/jmapNew/map.js b/src/jmapNew/map.js index c295b489d..156c189e6 100644 --- a/src/jmapNew/map.js +++ b/src/jmapNew/map.js @@ -36,6 +36,9 @@ class Jlmap { this.defaultStateDict = this.loadDefaultState(); this.initMapInstance(opts); + + // 显示集中站 + this.stationCode = ''; } // 初始化属性有鼠标事件 缩放等 @@ -171,6 +174,8 @@ class Jlmap { }); if (this.methods.viewUpdate instanceof Function) { this.methods.viewUpdate(list); } + this.updateShowMode(list, this.showConfig.showMode); + this.updateShowStation(list, this.stationCode); } // 中间处理 @@ -264,6 +269,57 @@ class Jlmap { getShowConfig() { return this.showConfig; } + updateShowStation(list, stationCode) { + this.stationCode = stationCode; + (list || []).forEach(elem => { + const code = elem.code; + const type = elem._type; + const oDevice = this.mapDevice[code] || deviceFactory(type, elem, this.showConfig); + if (oDevice._type === deviceType.Station) { + this.showStationHandleStation(oDevice, stationCode); + } else if (oDevice._type === deviceType.Section) { + this.$painter.updateShowStation(oDevice, stationCode); + this.showStationHandleSection(oDevice, stationCode); + } else if (oDevice._type === deviceType.TrainWindow) { + } else if (oDevice._type === deviceType.Psd) { + this.showStationHandlePsd(oDevice, stationCode); + } else { + this.$painter.updateShowStation(oDevice, stationCode); + } + }); + this.$painter.$transformHandle.revisibleAll(); + } + showStationHandlePsd(oDevice, stationCode) { + const standDevice = this.mapDevice[oDevice.standCode]; + if (standDevice.deviceStationCode === stationCode || !stationCode) { + this.$painter.updateSpecialShowStation(oDevice, true); + } else { + this.$painter.updateSpecialShowStation(oDevice, false); + } + } + showStationHandleSection(oDevice, stationCode) { + const trainWinDevice = this.mapDevice[oDevice.trainWindowCode]; + if (oDevice.stationCode === stationCode || !stationCode) { + this.$painter.updateSpecialShowStation(trainWinDevice, true); + } else { + this.$painter.updateSpecialShowStation(trainWinDevice, false); + } + } + showStationHandleStation (oDevice, stationCode) { + if ((oDevice.centralized && oDevice.code === stationCode) || !stationCode) { + this.$painter.updateSpecialShowStation(oDevice, true); + oDevice.chargeStationCodeList.forEach(staCode => { + const staDevice = this.mapDevice[staCode]; + this.$painter.updateSpecialShowStation(staDevice, true); + }); + } else if (oDevice.centralized && oDevice.code !== stationCode) { + this.$painter.updateSpecialShowStation(oDevice, false); + oDevice.chargeStationCodeList.forEach(staCode => { + const staDevice = this.mapDevice[staCode]; + this.$painter.updateSpecialShowStation(staDevice, false); + }); + } + } update(list) { this.setUpdateMapDevice(list || []); // 增加一个 前数据 处理 为了在区段中 获取全部的 道岔信息 (list || []).forEach(elem => { diff --git a/src/jmapNew/painter.js b/src/jmapNew/painter.js index 4ecb76566..4ebd5ebb1 100644 --- a/src/jmapNew/painter.js +++ b/src/jmapNew/painter.js @@ -169,6 +169,19 @@ class Painter { device.instance.setShowMode(); } } + /** + * 更新现地显示单独集中站 + * */ + updateShowStation(device, stationCode) { + if (device && device.instance) { + device.instance.setShowStation(stationCode); + } + } + updateSpecialShowStation(device, flag) { + if (device && device.instance) { + device.instance.setShowStation(flag); + } + } /** * 更新transform变化 * @param {*} opt diff --git a/src/jmapNew/shape/Automactic/index.js b/src/jmapNew/shape/Automactic/index.js index 38778b06e..1606a7e05 100644 --- a/src/jmapNew/shape/Automactic/index.js +++ b/src/jmapNew/shape/Automactic/index.js @@ -17,6 +17,7 @@ export default class Automactic extends Group { this.zlevel = model.zlevel; this.model = model; this.style = style; + this.isShowShape = true; if (isShowThePrdType(model.prdType, style.MapCycleButtonVO.visibleConditions) || model.previewOrMapDraw) { this.create(); this.createMouseEvent(); @@ -104,6 +105,7 @@ export default class Automactic extends Group { // 设置状态 setState(model) { + if (!this.isShowShape) return; } createMouseEvent() { @@ -114,7 +116,6 @@ export default class Automactic extends Group { this.on('mouseover', (e) => { this.mouseEvent.mouseover(e); }); } } - getArcBoundingRect() { const rect = this.control.getBoundingRect().clone(); const scale = this.control.scale[0]; @@ -142,15 +143,31 @@ export default class Automactic extends Group { const showMode = this.model.showMode; const showConditions = this.style.MapCycleButtonVO.visibleConditions; if (!showConditions || showConditions === '01' || showMode === showConditions) { - this.control.show(); - this.text.show(); - this.subtitleText && this.subtitleText.show(); - this.arcBorder && this.arcBorder.show(); + this.show(); } else { - this.control.hide(); - this.text.hide(); - this.subtitleText && this.subtitleText.hide(); - this.arcBorder && this.arcBorder.hide(); + this.hide(); } } + setShowStation(stationCode) { + if (!stationCode || this.model.stationCode === stationCode) { + this.isShowShape = true; + this.show(); + } else { + this.isShowShape = false; + this.hide(); + } + } + show() { + this.control && this.control.show(); + this.text && this.text.show(); + this.subtitleText && this.subtitleText.show(); + this.arcBorder && this.arcBorder.show(); + this.setState(this.model); + } + hide() { + this.control && this.control.hide(); + this.text && this.text.hide(); + this.subtitleText && this.subtitleText.hide(); + this.arcBorder && this.arcBorder.hide(); + } } diff --git a/src/jmapNew/shape/AutomacticRoute/EMouse.js b/src/jmapNew/shape/AutomacticRoute/EMouse.js index fdb639e95..96e179317 100644 --- a/src/jmapNew/shape/AutomacticRoute/EMouse.js +++ b/src/jmapNew/shape/AutomacticRoute/EMouse.js @@ -2,52 +2,52 @@ import Group from 'zrender/src/container/Group'; import Text from 'zrender/src/graphic/Text'; export default class EMouse extends Group { - constructor(device) { - super(); - this.device = device; - this.create(); - } - create() { - this.text = new Text({ - zlevel: this.device.zlevel, - z: this.device.z+1, - position: [0, 0], - style: { - x: this.device.model.position.x, - y: this.device.model.position.y + this.device.style.LcControl.lamp.radiusR + this.device.style.LcControl.text.distance-30, - fontWeight: 'normal', - fontSize: this.device.style.LcControl.mouseOverStyle.fontSize, - fontFamily: this.device.style.LcControl.mouseOverStyle.fontFamily, - text: this.device.model.name, - textFill: this.device.style.LcControl.mouseOverStyle.fontColor, - textAlign: this.device.style.LcControl.mouseOverStyle.textAlign, - textVerticalAlign: this.device.style.LcControl.mouseOverStyle.textVerticalAlign - } - }); - this.add(this.text); - this.text.hide(); - } - mouseover(e) { - if (e.target && e.target._subType == 'Text') { - this.text.show(); - } else { - this.device.control.setControlColor(this.device.style.LcControl.mouseOverStyle.arcColor); - this.device.control.setTextColor(this.device.style.LcControl.mouseOverStyle.textColor); - this.device.control.setTextBorder(true); - this.device.control.setArcBorder(true); - } - } + constructor(device) { + super(); + this.device = device; + this.create(); + } + create() { + this.text = new Text({ + zlevel: this.device.zlevel, + z: this.device.z + 1, + position: [0, 0], + style: { + x: this.device.model.position.x, + y: this.device.model.position.y + this.device.style.LcControl.lamp.radiusR + this.device.style.LcControl.text.distance - 30, + fontWeight: 'normal', + fontSize: this.device.style.LcControl.mouseOverStyle.fontSize, + fontFamily: this.device.style.LcControl.mouseOverStyle.fontFamily, + text: this.device.model.name, + textFill: this.device.style.LcControl.mouseOverStyle.fontColor, + textAlign: this.device.style.LcControl.mouseOverStyle.textAlign, + textVerticalAlign: this.device.style.LcControl.mouseOverStyle.textVerticalAlign + } + }); + this.add(this.text); + this.text.hide(); + } + mouseover(e) { + if (e.target && e.target._subType == 'Text') { + this.text.show(); + } else { + this.device.control.setControlColor(this.device.style.LcControl.mouseOverStyle.arcColor); + this.device.control.setTextColor(this.device.style.LcControl.mouseOverStyle.textColor); + this.device.control.setTextBorder(true); + this.device.control.setArcBorder(true); + } + } - mouseout(e) { - if (!this.device.model.down) { - if (e.target && e.target._subType == 'Text') { - this.text.hide(); - } else { - this.device.control.setControlColor(this.device.style.LcControl.lamp.controlColor); - this.device.control.setTextColor('#FFFFFF'); - this.device.control.setTextBorder(false); - this.device.control.setArcBorder(false); - } - } - } + mouseout(e) { + if (!this.device.model.down) { + if (e.target && e.target._subType == 'Text') { + this.text.hide(); + } else { + this.device.control.setControlColor(this.device.style.LcControl.lamp.controlColor); + this.device.control.setTextColor('#FFFFFF'); + this.device.control.setTextBorder(false); + this.device.control.setArcBorder(false); + } + } + } } diff --git a/src/jmapNew/shape/AutomacticRoute/index.js b/src/jmapNew/shape/AutomacticRoute/index.js index dfa8499a5..baae62795 100644 --- a/src/jmapNew/shape/AutomacticRoute/index.js +++ b/src/jmapNew/shape/AutomacticRoute/index.js @@ -7,7 +7,7 @@ import Text from 'zrender/src/graphic/Text'; import EMouse from './EMouse'; import {isShowThePrdType} from '../../utils/handlePath'; -export default class LcControl extends Group { +export default class AutomacticRoute extends Group { constructor(model, style) { super(); this.z = 20; @@ -16,6 +16,7 @@ export default class LcControl extends Group { this.zlevel = model.zlevel; this.model = model; this.style = style; + this.isShowShape = true; if (isShowThePrdType(model.prdType, style.AutomaticRoute.displayCondition) || model.previewOrMapDraw) { this.create(); this.createMouseEvent(); @@ -87,6 +88,7 @@ export default class LcControl extends Group { // 设置状态 setState(model) { + if (!this.isShowShape) return; } createMouseEvent() { @@ -112,13 +114,29 @@ export default class LcControl extends Group { const showMode = this.model.showMode; const showConditions = this.style.AutomaticRoute.displayCondition; if (!showConditions || showConditions === '01' || showMode === showConditions) { - this.control.show(); - this.text.show(); - this.subtitleText && this.subtitleText.show(); + this.show(); } else { - this.control.hide(); - this.text.hide(); - this.subtitleText && this.subtitleText.hide(); + this.hide(); } } + setShowStation(stationCode) { + if (!stationCode || this.model.stationCode === stationCode) { + this.isShowShape = true; + this.show(); + } else { + this.isShowShape = false; + this.hide(); + } + } + show() { + this.control && this.control.show(); + this.text && this.text.show(); + this.subtitleText && this.subtitleText.show(); + this.setState(this.model); + } + hide() { + this.control && this.control.hide(); + this.text && this.text.hide(); + this.subtitleText && this.subtitleText.hide(); + } } diff --git a/src/jmapNew/shape/LcControl/index.js b/src/jmapNew/shape/LcControl/index.js index d160a39c7..130afab8e 100644 --- a/src/jmapNew/shape/LcControl/index.js +++ b/src/jmapNew/shape/LcControl/index.js @@ -14,6 +14,7 @@ export default class LcControl extends Group { this.zlevel = model.zlevel; this.model = model; this.style = style; + this.isShowShape = true; this.create(); this.createMouseEvent(); this.setState(model); @@ -54,6 +55,7 @@ export default class LcControl extends Group { // 设置状态 setState(model) { + if (!this.isShowShape) return; } createMouseEvent() { @@ -64,7 +66,6 @@ export default class LcControl extends Group { this.on('mouseover', (e) => { this.mouseEvent.mouseover(e); }); } } - getShapeTipPoint() { if (this.control) { var distance = 2; @@ -77,4 +78,14 @@ export default class LcControl extends Group { return null; } setShowMode() {} + setShowStation(stationCode) { + if (!stationCode || this.model.stationCode === stationCode) { + this.control.show(); + this.isShowShape = true; + this.setState(this.model); + } else { + this.control.hide(); + this.isShowShape = false; + } + } } diff --git a/src/jmapNew/shape/LimitControl/index.js b/src/jmapNew/shape/LimitControl/index.js index e93aa7760..a5577c44d 100644 --- a/src/jmapNew/shape/LimitControl/index.js +++ b/src/jmapNew/shape/LimitControl/index.js @@ -14,6 +14,7 @@ export default class LimitControl extends Group { this.zlevel = model.zlevel; this.model = model; this.style = style; + this.isShowShape = true; this.z = 20; this.create(model); this.createMouseEvent(); @@ -58,6 +59,7 @@ export default class LimitControl extends Group { // 设置状态 setState(model) { + if (!this.isShowShape) return; } createMouseEvent() { @@ -81,4 +83,14 @@ export default class LimitControl extends Group { return null; } setShowMode() {} + setShowStation(stationCode) { + if (!stationCode || this.model.stationCode === stationCode) { + this.control.show(); + this.isShowShape = true; + this.setState(this.model); + } else { + this.control.hide(); + this.isShowShape = false; + } + } } diff --git a/src/jmapNew/shape/Line/index.js b/src/jmapNew/shape/Line/index.js index 87601d9ef..963ba4ef1 100644 --- a/src/jmapNew/shape/Line/index.js +++ b/src/jmapNew/shape/Line/index.js @@ -11,6 +11,7 @@ export default class Line2 extends Group { this.z = 0; this.model = model; this.style = style; + this.isShowShape = true; if (isShowThePrdType(model.prdType, model.showConditions) || model.previewOrMapDraw) { this.create(); this.setState(model); @@ -55,6 +56,7 @@ export default class Line2 extends Group { } setState(model) { + if (!this.isShowShape) return; this.setLineType(model.type); } // 设置显示模式 @@ -71,4 +73,18 @@ export default class Line2 extends Group { }); } } + setShowStation(stationCode) { + if (!stationCode || this.model.stationCode === stationCode) { + this.eachChild((child) => { + child.show(); + }); + this.isShowShape = true; + this.setState(this.model); + } else { + this.eachChild((child) => { + child.hide(); + }); + this.isShowShape = false; + } + } } diff --git a/src/jmapNew/shape/OutFrame/index.js b/src/jmapNew/shape/OutFrame/index.js index 6a8dd70b8..07e405b37 100644 --- a/src/jmapNew/shape/OutFrame/index.js +++ b/src/jmapNew/shape/OutFrame/index.js @@ -10,6 +10,7 @@ export default class OutFrame extends Group { this._code = model.code; this.style = style; this.zlevel = model.zlevel; + this.isShowShape = true; this.z = 0; if (isShowThePrdType(model.prdType, model.showConditions) || model.previewOrMapDraw) { this.create(); @@ -43,6 +44,7 @@ export default class OutFrame extends Group { // 设置状态 setState(model) { + if (!this.isShowShape) return; } // 设置显示模式 setShowMode() { @@ -50,8 +52,19 @@ export default class OutFrame extends Group { const showConditions = this.model.showConditions; if (!showConditions || showConditions === '01' || showMode === showConditions) { this.box && this.box.show(); + this.setState(this.model); } else { this.box && this.box.hide(); } } + setShowStation(stationCode) { + if (!stationCode || this.model.stationCode === stationCode) { + this.box && this.box.show(); + this.isShowShape = true; + this.setState(this.model); + } else { + this.box && this.box.hide(); + this.isShowShape = false; + } + } } diff --git a/src/jmapNew/shape/Psd/ESafeDoor.js b/src/jmapNew/shape/Psd/ESafeDoor.js index 76869d33f..74ad26be0 100644 --- a/src/jmapNew/shape/Psd/ESafeDoor.js +++ b/src/jmapNew/shape/Psd/ESafeDoor.js @@ -119,6 +119,20 @@ class ESafeDoor extends Group { this.safeC && this.safeC.setStyle('fill', color); this.safeR && this.safeR.setStyle('fill', color); } + hide() { + this.stand1 && this.stand1.hide(); + this.stand2 && this.stand2.hide(); + this.safeL && this.safeL.hide(); + this.safeC && this.safeC.hide(); + this.safeR && this.safeR.hide(); + } + show() { + this.stand1 && this.stand1.show(); + this.stand2 && this.stand2.show(); + this.safeL && this.safeL.show(); + this.safeC && this.safeC.show(); + this.safeR && this.safeR.show(); + } } export default ESafeDoor; diff --git a/src/jmapNew/shape/Psd/index.js b/src/jmapNew/shape/Psd/index.js index 71f5d1e2d..72353cb14 100644 --- a/src/jmapNew/shape/Psd/index.js +++ b/src/jmapNew/shape/Psd/index.js @@ -11,6 +11,7 @@ export default class Line2 extends Group { this.z = 1; this.model = model; this.style = style; + this.isShowShape = true; this.create(); this.setState(model); this.checkIsDrawMap(); @@ -64,6 +65,7 @@ export default class Line2 extends Group { } setState(model) { + if (!this.isShowShape) return; /** 设置屏蔽门开关*/ // if (model.name == 'Psd44') { // console.log(model, model.screenDoorOpenStatus, '1 为关门 0 为开门'); @@ -96,6 +98,15 @@ export default class Line2 extends Group { this.on('mouseover', () => { this.highlight.mouseover(); }); } } - setShowMode() {} + setShowStation(flag) { + if (flag) { + this.safeDoor && this.safeDoor.show(); + this.isShowShape = true; + this.setState(this.model); + } else { + this.safeDoor && this.safeDoor.hide(); + this.isShowShape = false; + } + } } diff --git a/src/jmapNew/shape/Resource/index.js b/src/jmapNew/shape/Resource/index.js index 650eb1f49..c4887e6e0 100644 --- a/src/jmapNew/shape/Resource/index.js +++ b/src/jmapNew/shape/Resource/index.js @@ -12,6 +12,7 @@ export default class Resource extends Group { this.zlevel = model.zlevel; this.model = model; this.style = style; + this.isShowShape = true; this.z = model.zIndex || 1; this.create(); } @@ -42,6 +43,7 @@ export default class Resource extends Group { } setState(model) { + if (!this.isShowShape) return; } // 整体图片 @@ -67,4 +69,14 @@ export default class Resource extends Group { return null; } setShowMode() {} + setShowStation(stationCode) { + if (!stationCode || this.model.stationCode === stationCode) { + this.image && this.image.show(); + this.isShowShape = true; + this.setState(this.model); + } else { + this.image && this.image.hide(); + this.isShowShape = false; + } + } } diff --git a/src/jmapNew/shape/Section/EAxle.js b/src/jmapNew/shape/Section/EAxle.js index 17e404671..ff299b4c9 100644 --- a/src/jmapNew/shape/Section/EAxle.js +++ b/src/jmapNew/shape/Section/EAxle.js @@ -5,31 +5,31 @@ import Path from 'zrender/src/graphic/Path'; // 计轴 export const EAxle = Path.extend({ - type: 'EAxle', - shape: { - point: null - }, - buildPath: function (ctx, model) { - if (model && model.style && model.traingle) { - const axleLength = 2 * model.style.Section.axle.radius; - const positionx = model.point.x + model.drictx * (model.traingle.getCos(axleLength)); - const positiony = model.point.y + model.dricty * (model.traingle.getCos(axleLength)); - // 圆弧 - const arcX = positionx - model.dricty * model.traingle.getSin(axleLength); - const arcY = positiony + model.drictx * model.traingle.getSin(axleLength); - const arcR = model.style.Section.axle.radius; - ctx.arc(arcX, arcY, arcR, 0, 2 * Math.PI, false); - ctx.closePath(); + type: 'EAxle', + shape: { + point: null + }, + buildPath: function (ctx, model) { + if (model && model.style && model.traingle) { + const axleLength = 2 * model.style.Section.axle.radius; + const positionx = model.point.x + model.drictx * (model.traingle.getCos(axleLength)); + const positiony = model.point.y + model.dricty * (model.traingle.getCos(axleLength)); + // 圆弧 + const arcX = positionx - model.dricty * model.traingle.getSin(axleLength); + const arcY = positiony + model.drictx * model.traingle.getSin(axleLength); + const arcR = model.style.Section.axle.radius; + ctx.arc(arcX, arcY, arcR, 0, 2 * Math.PI, false); + ctx.closePath(); - const x1 = positionx - model.traingle.getCos(axleLength) - model.dricty * model.traingle.getSin(axleLength); - const y1 = positiony + model.drictx * model.traingle.getSin(axleLength) - model.traingle.getSin(axleLength); - const x2 = positionx + model.traingle.getCos(axleLength) - model.dricty * model.traingle.getSin(axleLength); - const y2 = positiony + model.drictx * model.traingle.getSin(axleLength) + model.traingle.getSin(axleLength); - ctx.moveTo(x1, y1); - ctx.lineTo(x2, y2); - ctx.closePath(); - } - } + const x1 = positionx - model.traingle.getCos(axleLength) - model.dricty * model.traingle.getSin(axleLength); + const y1 = positiony + model.drictx * model.traingle.getSin(axleLength) - model.traingle.getSin(axleLength); + const x2 = positionx + model.traingle.getCos(axleLength) - model.dricty * model.traingle.getSin(axleLength); + const y2 = positiony + model.drictx * model.traingle.getSin(axleLength) + model.traingle.getSin(axleLength); + ctx.moveTo(x1, y1); + ctx.lineTo(x2, y2); + ctx.closePath(); + } + } }); // export default class EAxle extends Group { diff --git a/src/jmapNew/shape/Section/ESeparator.js b/src/jmapNew/shape/Section/ESeparator.js index 6087d0597..0c64ff1a8 100644 --- a/src/jmapNew/shape/Section/ESeparator.js +++ b/src/jmapNew/shape/Section/ESeparator.js @@ -4,111 +4,111 @@ import Circle from 'zrender/src/graphic/shape/Circle'; /** 分隔符*/ export default class ESeparator extends Group { - constructor(model) { - super(); - this.model = model; - this.zlevel = model.zlevel; - this.z = model.style.Section.separator.z || 6; - this.style = model.style; - this.setType(); - } + constructor(model) { + super(); + this.model = model; + this.zlevel = model.zlevel; + this.z = model.style.Section.separator.z || 6; + this.style = model.style; + this.setType(); + } - createModel(points, lineWidth = null, stroke = null) { - const model = this.model; - this.partition = new Polyline({ - zlevel: this.zlevel, - progressive: model.progressive, - z: this.z, - shape: { - points: points - }, - style: { - lineWidth: lineWidth || this.style.Section.separator.width, - stroke: stroke || this.style.Section.separator.color - } - }); - this.add(this.partition); - } + createModel(points, lineWidth = null, stroke = null) { + const model = this.model; + this.partition = new Polyline({ + zlevel: this.zlevel, + progressive: model.progressive, + z: this.z, + shape: { + points: points + }, + style: { + lineWidth: lineWidth || this.style.Section.separator.width, + stroke: stroke || this.style.Section.separator.color + } + }); + this.add(this.partition); + } - // 创建 侵限分隔符 - createCircle() { - const model = this.model; - this.circle = new Circle({ - zlevel: this.zlevel, - z: this.z, - progressive: model.progressive, - shape: { - cx: model.point.x, - cy: model.point.y, - r: this.style.Section.line.width - }, - style: { - stroke: this.style.Section.line.invadeColor, - GBaseLineWidth: 0.5, - fill: this.style.transparentColor - } - }); - this.add(this.circle); - } + // 创建 侵限分隔符 + createCircle() { + const model = this.model; + this.circle = new Circle({ + zlevel: this.zlevel, + z: this.z, + progressive: model.progressive, + shape: { + cx: model.point.x, + cy: model.point.y, + r: this.style.Section.line.width + }, + style: { + stroke: this.style.Section.line.invadeColor, + GBaseLineWidth: 0.5, + fill: this.style.transparentColor + } + }); + this.add(this.circle); + } - createCircleArc() { - const model = this.model; - this.circleArc = new Circle({ - zlevel: this.zlevel, - z: this.z, - progressive: model.progressive, - shape: { - cx: model.point.x, - cy: model.point.y, - r: this.style.Section.line.width + 2 - }, - style: { - stroke: 'red', - GBaseLineWidth: 0.5, - fill: this.style.transparentColor - } - }); - this.add(this.circleArc); - } + createCircleArc() { + const model = this.model; + this.circleArc = new Circle({ + zlevel: this.zlevel, + z: this.z, + progressive: model.progressive, + shape: { + cx: model.point.x, + cy: model.point.y, + r: this.style.Section.line.width + 2 + }, + style: { + stroke: 'red', + GBaseLineWidth: 0.5, + fill: this.style.transparentColor + } + }); + this.add(this.circleArc); + } - setType() { - const type = this.model.sepType; - const model = this.model; - if (model && this.style && model.traingle) { - if (type === '01') { // 普通分割 - const points = [ - [model.point.x, model.point.y - (this.style.Section.line.width)], - [model.point.x, model.point.y + (this.style.Section.line.width)] - ]; - this.createModel(points); - } else if (type === '02') { // 单侧分割符 - const points = [ - [model.point.x + model.drict * (this.style.Section.line.width), model.point.y - (this.style.Section.line.width * 1.5)], - [model.point.x, model.point.y - (this.style.Section.line.width * 1.5)], - [model.point.x, model.point.y + (this.style.Section.line.width * 1.5)] - ]; - this.createModel(points); - } else if (type === '03') { // 尽头分隔符 - const points = [ - [model.point.x + model.drict * (this.style.Section.line.width) * 1.2, model.point.y - (this.style.Section.line.width * 1.2)], - [model.point.x, model.point.y - (this.style.Section.line.width * 1.2)], - [model.point.x, model.point.y + (this.style.Section.line.width * 1.2)], - [model.point.x + model.drict * (this.style.Section.line.width) * 1.2, model.point.y + (this.style.Section.line.width * 1.2)] - ]; - const lineWidth = this.style.Section.separator.endWidth; - const stroke = this.style.Section.separator.endColor; - this.createModel(points, lineWidth, stroke); - } else if (type === '04') { // 侵限分隔符 - this.createCircle(); - } else if (type === '05') { // 特色分隔符 - this.createCircleArc(); - } - } + setType() { + const type = this.model.sepType; + const model = this.model; + if (model && this.style && model.traingle) { + if (type === '01') { // 普通分割 + const points = [ + [model.point.x, model.point.y - (this.style.Section.line.width)], + [model.point.x, model.point.y + (this.style.Section.line.width)] + ]; + this.createModel(points); + } else if (type === '02') { // 单侧分割符 + const points = [ + [model.point.x + model.drict * (this.style.Section.line.width), model.point.y - (this.style.Section.line.width * 1.5)], + [model.point.x, model.point.y - (this.style.Section.line.width * 1.5)], + [model.point.x, model.point.y + (this.style.Section.line.width * 1.5)] + ]; + this.createModel(points); + } else if (type === '03') { // 尽头分隔符 + const points = [ + [model.point.x + model.drict * (this.style.Section.line.width) * 1.2, model.point.y - (this.style.Section.line.width * 1.2)], + [model.point.x, model.point.y - (this.style.Section.line.width * 1.2)], + [model.point.x, model.point.y + (this.style.Section.line.width * 1.2)], + [model.point.x + model.drict * (this.style.Section.line.width) * 1.2, model.point.y + (this.style.Section.line.width * 1.2)] + ]; + const lineWidth = this.style.Section.separator.endWidth; + const stroke = this.style.Section.separator.endColor; + this.createModel(points, lineWidth, stroke); + } else if (type === '04') { // 侵限分隔符 + this.createCircle(); + } else if (type === '05') { // 特色分隔符 + this.createCircleArc(); + } + } - 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 (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(); // 可以无需调用 + } + } } diff --git a/src/jmapNew/shape/Section/index.js b/src/jmapNew/shape/Section/index.js index 8ffa8cbcb..be0b59e9e 100644 --- a/src/jmapNew/shape/Section/index.js +++ b/src/jmapNew/shape/Section/index.js @@ -27,6 +27,7 @@ export default class Section extends Group { this.style = style; this.selected = false; // 绘图选中状态 this.selectedType = ''; // 绘图批量选中状态 + this.isShowShape = true; this.create(); this.createMouseEvent(); this.setState(model); @@ -783,6 +784,7 @@ export default class Section extends Group { /** 设置状态*/ setState(model, flag = false) { + if (!this.isShowShape) return; this.recover(); // 实际上就是 状态重置 必须在设置其他状态之前 设置颜色之类的 if (this.style.Switch.sectionAction.flag && model.relSwitchCode && !flag) { @@ -887,4 +889,18 @@ export default class Section extends Group { this.section && this.section.setStyle({ stroke: 'rgba(255,255,255,0.8)' }); } setShowMode() {} + setShowStation(stationCode) { + if (!stationCode || this.model.stationCode === stationCode) { + this.eachChild(item => { + item.show(); + }); + this.isShowShape = true; + this.setState(this.model); + } else { + this.eachChild(item => { + item.hide(); + }); + this.isShowShape = false; + } + } } diff --git a/src/jmapNew/shape/Signal/index.js b/src/jmapNew/shape/Signal/index.js index c8f1a2bbb..9d230e29d 100644 --- a/src/jmapNew/shape/Signal/index.js +++ b/src/jmapNew/shape/Signal/index.js @@ -25,6 +25,7 @@ class Signal extends Group { this.count = parseInt(model.lampPositionType); this.lamps = new Array(this.count); this.zlevel = model.zlevel; + this.isShowShape = true; this.z = 7; this.create(); this.createMouseEvent(); @@ -461,6 +462,7 @@ class Signal extends Group { } setState(model) { + if (!this.isShowShape) return; this.recover(); // /** 设置状态 (点灯类型)*/ // switch (model.status) { @@ -589,6 +591,20 @@ class Signal extends Group { } } setShowMode() {} + setShowStation(stationCode) { + if (!stationCode || this.model.stationCode === stationCode) { + this.eachChild(item => { + item.show(); + }); + this.isShowShape = true; + this.setState(this.model); + } else { + this.eachChild(item => { + item.hide(); + }); + this.isShowShape = false; + } + } } export default Signal; diff --git a/src/jmapNew/shape/Station/index.js b/src/jmapNew/shape/Station/index.js index c43b575f7..30340368c 100644 --- a/src/jmapNew/shape/Station/index.js +++ b/src/jmapNew/shape/Station/index.js @@ -21,7 +21,7 @@ export default class Station extends Group { this.z = 40; this.model = model; this.style = style; - + this.isShowShape = true; this.create(); this.createTurnBack(); // 创建按图折返 if (isShowThePrdType(model.prdType, style.Station.functionButtonShow) || model.previewOrMapDraw) { @@ -312,6 +312,7 @@ export default class Station extends Group { // 设置状态 setState(model) { + if (!this.isShowShape) return; switch (model.controlMode) { case '': // 无状态 this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.grayColor); @@ -378,4 +379,18 @@ export default class Station extends Group { this.guideLamp && this.guideLamp.hide(); } } + setShowStation(flag) { + if (flag) { + this.eachChild(item => { + item.show(); + }); + this.isShowShape = true; + this.setState(this.model); + } else { + this.eachChild(item => { + item.hide(); + }); + this.isShowShape = false; + } + } } diff --git a/src/jmapNew/shape/StationControl/index.js b/src/jmapNew/shape/StationControl/index.js index 43e2a090c..137911f19 100644 --- a/src/jmapNew/shape/StationControl/index.js +++ b/src/jmapNew/shape/StationControl/index.js @@ -18,6 +18,7 @@ export default class StationControl extends Group { this.z = 1; this.model = model; this.style = style; + this.isShowShape = true; this.create(); this.createMouseEvent(); this.setState(model); @@ -114,6 +115,7 @@ export default class StationControl extends Group { // 设置状态 setState(model) { + if (!this.isShowShape) return; // switch (model.status) { // case '00': // 无状态 // this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.grayColor); @@ -179,4 +181,18 @@ export default class StationControl extends Group { return null; } setShowMode() {} + setShowStation(stationCode) { + if (!stationCode || this.model.stationCode === stationCode) { + this.eachChild(item => { + item.show(); + }); + this.isShowShape = true; + this.setState(this.model); + } else { + this.eachChild(item => { + item.hide(); + }); + this.isShowShape = false; + } + } } diff --git a/src/jmapNew/shape/StationCounter/index.js b/src/jmapNew/shape/StationCounter/index.js index 4e17573d8..9f6217d11 100644 --- a/src/jmapNew/shape/StationCounter/index.js +++ b/src/jmapNew/shape/StationCounter/index.js @@ -14,6 +14,7 @@ export default class StationCounter extends Group { this.style = style; this.zlevel = model.zlevel; this.z = 30; + this.isShowShape = true; this.create(); this.setState(model); } @@ -81,11 +82,26 @@ export default class StationCounter extends Group { } setState(model) { + if (!this.isShowShape) return; } getShapeTipPoint() { return null; } setShowMode() {} + setShowStation(stationCode) { + if (!stationCode || this.model.stationCode === stationCode) { + this.eachChild(item => { + item.show(); + }); + this.isShowShape = true; + this.setState(this.model); + } else { + this.eachChild(item => { + item.hide(); + }); + this.isShowShape = false; + } + } } diff --git a/src/jmapNew/shape/StationDelayUnlock/index.js b/src/jmapNew/shape/StationDelayUnlock/index.js index a068cf5ca..df90f1276 100644 --- a/src/jmapNew/shape/StationDelayUnlock/index.js +++ b/src/jmapNew/shape/StationDelayUnlock/index.js @@ -14,6 +14,7 @@ export default class StationDelayUnlock extends Group { this.style = style; this.zlevel = model.zlevel; this.z = 1; + this.isShowShape = true; this.create(); this.setState(model); } @@ -90,6 +91,7 @@ export default class StationDelayUnlock extends Group { /** 延时解锁计数*/ delayUnlock() { + if (!this.isShowShape) return; this.table.setStyle('stroke', this.style.sidelineColor); this.time.setStyle('text', '' + this.model.remainTime); } @@ -105,4 +107,18 @@ export default class StationDelayUnlock extends Group { return null; } setShowMode() {} + setShowStation(stationCode) { + if (!stationCode || this.model.stationCode === stationCode) { + this.eachChild(item => { + item.show(); + }); + this.isShowShape = true; + this.setState(this.model); + } else { + this.eachChild(item => { + item.hide(); + }); + this.isShowShape = false; + } + } } diff --git a/src/jmapNew/shape/StationStand/index.js b/src/jmapNew/shape/StationStand/index.js index e5ee7e4e3..a1b17a219 100644 --- a/src/jmapNew/shape/StationStand/index.js +++ b/src/jmapNew/shape/StationStand/index.js @@ -23,6 +23,7 @@ class StationStand extends Group { this.style = style; this.zlevel = model.zlevel; this.z = 1; + this.isShowShape = true; this.doors = new Group(); this.create(); this.createMouseEvent(); @@ -492,6 +493,7 @@ class StationStand extends Group { } setState(model) { + if (!this.isShowShape) return; // 新版地图使用新版状态变更方式 this.recover(); model.free && this.spare(); /** 空闲*/ @@ -581,5 +583,19 @@ class StationStand extends Group { this.downDetainLamp && this.downDetainLamp.hide(); } } + setShowStation(stationCode) { + if (!stationCode || this.model.deviceStationCode === stationCode) { + this.eachChild(item => { + item.show(); + }); + this.isShowShape = true; + this.setState(this.model); + } else { + this.eachChild(item => { + item.hide(); + }); + this.isShowShape = false; + } + } } export default StationStand; diff --git a/src/jmapNew/shape/Switch/index.js b/src/jmapNew/shape/Switch/index.js index 567771dd9..2d6f7493b 100644 --- a/src/jmapNew/shape/Switch/index.js +++ b/src/jmapNew/shape/Switch/index.js @@ -15,7 +15,7 @@ import EHighlight from '../element/EHighlight'; import ERhomboid from './ERhomboid'; import ETriangle from './ETriangle'; import store from '@/store'; -// import Vue from 'vue'; +import Vue from 'vue'; export default class Switch extends Group { constructor(model, style) { @@ -26,6 +26,7 @@ export default class Switch extends Group { this.style = style; this.zlevel = model.zlevel; this.z = 6; + this.isShowShape = true; this.triangle = new JTriangle(model.intersection, model.skew); this.create(); this.createLockRect(); // 创建单锁矩形框显示 @@ -428,6 +429,7 @@ export default class Switch extends Group { } setState(model) { + if (!this.isShowShape) return; if (model.normalPosition) { this.setLocationAction(model); /** 定位*/ } else if (model.reversePosition) { @@ -483,4 +485,18 @@ export default class Switch extends Group { } } setShowMode() {} + setShowStation(stationCode) { + if (!stationCode || this.model.stationCode === stationCode) { + this.eachChild(item => { + item.show(); + }); + this.isShowShape = true; + this.setState(this.model); + } else { + this.eachChild(item => { + item.hide(); + }); + this.isShowShape = false; + } + } } diff --git a/src/jmapNew/shape/Text/index.js b/src/jmapNew/shape/Text/index.js index b2209aa4d..d46e54728 100644 --- a/src/jmapNew/shape/Text/index.js +++ b/src/jmapNew/shape/Text/index.js @@ -12,6 +12,7 @@ export default class Text2 extends Group { this.model = model; this.style = style; this.z = 6; + this.isShowShape = true; if (isShowThePrdType(model.prdType, model.showConditions) || model.previewOrMapDraw) { this.create(); this.setState(model); @@ -46,6 +47,7 @@ export default class Text2 extends Group { } setState(model) { + if (!this.isShowShape) return; } // 设置显示模式 setShowMode() { @@ -57,4 +59,18 @@ export default class Text2 extends Group { this.text && this.text.hide(); } } + setShowStation(stationCode) { + if (!stationCode || this.model.stationCode === stationCode) { + this.eachChild(item => { + item.show(); + }); + this.isShowShape = true; + this.setState(this.model); + } else { + this.eachChild(item => { + item.hide(); + }); + this.isShowShape = false; + } + } } diff --git a/src/jmapNew/shape/Train/index.js b/src/jmapNew/shape/Train/index.js index c32a940fa..728d56291 100644 --- a/src/jmapNew/shape/Train/index.js +++ b/src/jmapNew/shape/Train/index.js @@ -18,6 +18,7 @@ export default class Train extends Group { this.z = 40; this.size = 0; this.section = null; + this.isShowShape = true; this.fontSize = style.Train.common.useSelfText ? style.Train.common.nameFontSize || style.Train.common.trainTextFontSize : model.nameFontSize || style.Train.common.nameFontSize || style.Train.common.trainTextFontSize; this.newScale = this.fontSize / style.Train.common.trainTextFontSize; this.nameFormat = style.Train.common.useSelfFormat ? style.Train.trainBody.trainNameFormat : model.nameFormat || style.Train.trainBody.trainNameFormat; @@ -32,6 +33,7 @@ export default class Train extends Group { } this.create(); this.setState(model, this); + this.initShowStation(model); } _computed() { @@ -340,6 +342,7 @@ export default class Train extends Group { } // 设置状态 setState(model, object) { + if (!this.isShowShape) return; const flag = model.trainWindowModel ? model.trainWindowModel.reversal : false; if (model) { this.recover(); @@ -448,4 +451,25 @@ export default class Train extends Group { this.add(this.trainBorder); } setShowMode() {} + initShowStation(model) { + if (model.trainWindowModel && model.trainWindowModel.instance && !model.trainWindowModel.instance.isShowShape) { + this.eachChild(item => { + item.hide(); + }); + } + } + setShowStation(stationCode) { + if ((this.model.sectionModel && this.model.sectionModel.stationCode === stationCode) || !stationCode ) { + this.eachChild(item => { + item.show(); + }); + this.isShowShape = true; + this.setState(this.model, this); + } else { + this.eachChild(item => { + item.hide(); + }); + this.isShowShape = false; + } + } } diff --git a/src/jmapNew/shape/TrainWindow/index.js b/src/jmapNew/shape/TrainWindow/index.js index e270244eb..7f008b8fe 100644 --- a/src/jmapNew/shape/TrainWindow/index.js +++ b/src/jmapNew/shape/TrainWindow/index.js @@ -14,6 +14,7 @@ class TrainWindow extends Group { this.style = style; this.z = 9; this.prdType = store.state.training.prdType; + this.isShowShape = true; this.create(model); this.createMouseEvent(); this.setState(model); @@ -67,6 +68,7 @@ class TrainWindow extends Group { } setState(model) { + if (!this.isShowShape) return; this.setVisible(model.trainWindowShow); } @@ -79,6 +81,20 @@ class TrainWindow extends Group { return (store.getters['map/getDeviceByCode'](code) || {}).instance; } setShowMode() {} + setShowStation(flag) { + if (flag) { + this.eachChild(item => { + item.show(); + }); + this.isShowShape = true; + this.setState(this.model); + } else { + this.eachChild(item => { + item.hide(); + }); + this.isShowShape = false; + } + } } export default TrainWindow; diff --git a/src/jmapNew/shape/ZcControl/index.js b/src/jmapNew/shape/ZcControl/index.js index 2797866f3..a5bf38970 100644 --- a/src/jmapNew/shape/ZcControl/index.js +++ b/src/jmapNew/shape/ZcControl/index.js @@ -14,6 +14,7 @@ export default class ZcControl extends Group { this.zlevel = model.zlevel; this.model = model; this.style = style; + this.isShowShape = true; this.create(model); this.createMouseEvent(); this.setState(model); @@ -60,6 +61,7 @@ export default class ZcControl extends Group { // 设置状态 setState(model) { + if (!this.isShowShape) return; } createMouseEvent() { if (this.style.ZcControl.mouseOverStyle) { @@ -81,4 +83,18 @@ export default class ZcControl extends Group { return null; } setShowMode() {} + setShowStation(stationCode) { + if (!stationCode || this.model.stationCode === stationCode) { + this.eachChild(item => { + item.show(); + }); + this.isShowShape = true; + this.setState(this.model); + } else { + this.eachChild(item => { + item.hide(); + }); + this.isShowShape = false; + } + } } diff --git a/src/jmapNew/shape/element/EControl.js b/src/jmapNew/shape/element/EControl.js index ca72e7336..18b4c3897 100644 --- a/src/jmapNew/shape/element/EControl.js +++ b/src/jmapNew/shape/element/EControl.js @@ -102,12 +102,4 @@ export default class EControl extends Group { this.text.setStyle('textFill', color); } } - hide() { - this.control.hide(); - this.text.hide(); - } - show() { - this.control.show(); - this.text.show(); - } } diff --git a/src/jmapNew/theme/factory.js b/src/jmapNew/theme/factory.js index 0c4aef1a2..6523bc302 100644 --- a/src/jmapNew/theme/factory.js +++ b/src/jmapNew/theme/factory.js @@ -10,6 +10,15 @@ class Theme { '06': 'ningbo_01', '07': 'haerbin_01' // 哈尔滨培训线路 }; + this._localShowMode = { // 现地显示模式 + '01': 'all', // 成都一 全显 + '02': 'all', // 福州一 全显 + '03': 'all', // 北京一 全显 + '04': 'all', // 成都三 全显 + '05': 'all', // 国际版运行图皮肤 指向05 福州线路 全显 + '06': 'all', // 宁波一 全显 + '07': 'ecStation' // 哈尔滨培训线路 集中站显示 + }; } // 加载菜单组件 diff --git a/src/jmapNew/theme/haerbin_01/menus/index.vue b/src/jmapNew/theme/haerbin_01/menus/index.vue index b64f0c18f..437ecb332 100644 --- a/src/jmapNew/theme/haerbin_01/menus/index.vue +++ b/src/jmapNew/theme/haerbin_01/menus/index.vue @@ -63,7 +63,7 @@ export default { this.$store.state.training.roles != 'BigScreen'; }, isShowBar() { - return this.$store.state.training.prdType; + return this.$store.state.training.prdType === '01'; } }, watch: { @@ -353,4 +353,15 @@ export default { .haerbin-01__systerm .el-dialog .button-group { margin-top: 10px; } + .haerbin-01__systerm .nav-border .el-button { + height: 20px; + line-height: 20px; + padding: 0px; + width: 80px; + border: 1px solid #1F313F; + font-size: 12px; + border-radius: 5px !important; + color: #000; + background: #FFFFFF; + } diff --git a/src/jmapNew/theme/haerbin_01/menus/menuBar.vue b/src/jmapNew/theme/haerbin_01/menus/menuBar.vue index e59b47d55..c0d107e6f 100644 --- a/src/jmapNew/theme/haerbin_01/menus/menuBar.vue +++ b/src/jmapNew/theme/haerbin_01/menus/menuBar.vue @@ -1,118 +1,75 @@