From ddbf5edeb22d800d735e11c9f1aa6a2597865b7c Mon Sep 17 00:00:00 2001 From: zyy <1787816799@qq.com> Date: Wed, 17 Jul 2019 09:08:23 +0800 Subject: [PATCH] =?UTF-8?q?desc:=20=E5=A2=9E=E5=8A=A0=E5=8D=95=E4=B8=AA?= =?UTF-8?q?=E7=BB=98=E5=9B=BE=E5=85=83=E7=B4=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/jmap/shape/LcControl.js | 120 +++----------------- src/jmap/shape/LimitControl.js | 135 +++-------------------- src/jmap/shape/Station.js | 38 +++---- src/jmap/shape/StationControl.js | 118 +------------------- src/jmap/shape/ZcControl.js | 126 +++------------------ src/jmap/shape/element/EControl.js | 61 ++++++++++ src/jmap/shape/element/ESingleControl.js | 68 ++++++++++++ src/jmap/shape/element/ETextName.js | 4 +- 8 files changed, 196 insertions(+), 474 deletions(-) create mode 100644 src/jmap/shape/element/EControl.js create mode 100644 src/jmap/shape/element/ESingleControl.js diff --git a/src/jmap/shape/LcControl.js b/src/jmap/shape/LcControl.js index 08d016564..7c43f90d5 100644 --- a/src/jmap/shape/LcControl.js +++ b/src/jmap/shape/LcControl.js @@ -1,10 +1,8 @@ /* * 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'; +import EControl from './element/EControl'; export default class LcControl extends Group { constructor({ _code, _type, zlevel, model, state }, style) { @@ -17,91 +15,38 @@ export default class LcControl extends Group { 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', + this.control = new EControl({ zlevel: this.zlevel, z: this.z, - shape: { - cx: model.position.x, - cy: model.position.y, - r: this.style.zcControlmodeR - }, - style: { + arc: { + shape: { + cx: model.position.x, + cy: model.position.y, + r: this.style.zcControlmodeR + }, lineWidth: 0, - fill: '' - } - }); - - this.text = new Text({ - _subType: 'Text', - zlevel: this.zlevel, - z: this.z, - position: [0, 0], - style: { + fill: this.style.lcControlColor + }, + text: { + position: [0, 0], x: model.position.x, y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance, text: model.name, - textFill: '', + textFill: '#fff', 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 - } + }, + style: this.style }); 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(); } // 设置状态 @@ -118,39 +63,4 @@ export default class LcControl extends Group { } 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 index d010bf441..3b47c6b0a 100644 --- a/src/jmap/shape/LimitControl.js +++ b/src/jmap/shape/LimitControl.js @@ -1,10 +1,8 @@ /* * 权限临时限速 */ -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'; +import EControl from './element/EControl'; export default class LimitControl extends Group { constructor({ _code, _type, zlevel, model, state }, style) { @@ -18,91 +16,36 @@ export default class LimitControl extends Group { 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', + this.control = new EControl({ zlevel: this.zlevel, z: this.z, - shape: { - cx: model.position.x, - cy: model.position.y, - r: this.style.zcControlmodeR - }, - style: { + arc: { + shape: { + cx: model.position.x, + cy: model.position.y, + r: this.style.zcControlmodeR + }, lineWidth: 0, - fill: '' - } - }); - - this.text = new Text({ - _subType: 'Text', - zlevel: this.zlevel, - z: this.z, - position: [0, 0], - style: { + fill: this.style.limitControlColor + }, + text: { + position: [0, 0], x: model.position.x, y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance, text: model.name, - textFill: '', + textFill: '#fff', 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 - } + }, + style: this.style }); 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(); } // 设置状态 @@ -120,52 +63,4 @@ export default class LimitControl extends Group { } 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(); - } - } - - } } diff --git a/src/jmap/shape/Station.js b/src/jmap/shape/Station.js index 0e22da58c..da0833a92 100644 --- a/src/jmap/shape/Station.js +++ b/src/jmap/shape/Station.js @@ -2,7 +2,7 @@ * 车站 */ import Group from 'zrender/src/container/Group'; -import Text from 'zrender/src/graphic/Text'; +import ETextName from './element/ETextName'; // 名称文字 (共有) export default class Station extends Group { constructor({ _code, _type, zlevel, model, state }, style) { @@ -23,34 +23,30 @@ export default class Station extends Group { const state = this.state; if (model.visible) { - this.stationText = new Text({ + this.stationText = new ETextName({ 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 - } + 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({ + this.mileageText = new ETextName({ 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 - } + x: model.position.x, + y: model.position.y + parseInt(model.nameFont) + 2, + text: model.kmPost, + textAlign: 'middle', + textVerticalAlign: 'top', + textFont: model.kmPostFont || '18px ' + style.textFontFormat, + textFill: model.kmPostFontColor }); this.add(this.stationText); diff --git a/src/jmap/shape/StationControl.js b/src/jmap/shape/StationControl.js index fdc434ec6..3d1edf594 100644 --- a/src/jmap/shape/StationControl.js +++ b/src/jmap/shape/StationControl.js @@ -1,73 +1,8 @@ /* * 控制模式 */ -import Arc from 'zrender/src/graphic/shape/Arc'; -import Text from 'zrender/src/graphic/Text'; import Group from 'zrender/src/container/Group'; - -/** 单个控制灯*/ -class SingleControl extends Group { - constructor(model) { - super(); - this.model = model; - this.zlevel = model.zlevel; - this._subType = model._subType; - this.z = 20; - this._create(model); - } - - _create(model) { - var _subType = 'ControlSignal'; - var _val = '0'; - if (model.pop) { - _subType = 'ControlButton'; - _val = '1'; - } - this.control = new Arc({ - pop: model.pop, - _subType: _subType, - _val: _val, - zlevel: this.zlevel, - z: this.z, - shape: { - cx: model.point.x, - cy: model.point.y, - r: model.style.stationControlmodeR - }, - style: { - lineWidth: 0.5, - fill: model.style.stationControlGrayColor, - stroke: model.style.stationControlGrayColor - } - }); - - this.text = new Text({ - pop: model.pop, - _subType: _subType, - zlevel: this.zlevel, - z: this.z, - position: [0, 0], - style: { - x: model.point.x, - y: model.point.y + model.style.stationControlmodeR + model.style.nameDistance, - text: model.context, - textFill: model.style.textFontColor, - textFont: model.style.textFontSize + 'px ' + model.style.textFontFormat, - textAlign: 'middle', - textVerticalAlign: 'top' - } - }); - - this.add(this.control); - this.add(this.text); - } - - setColor(color) { - if (color) { - this.control.setStyle('fill', color); - } - } -} +import ESingleControl from './element/ESingleControl'; // 单个信号灯 (私有) /** 控制模式*/ export default class StationControl extends Group { @@ -81,15 +16,13 @@ export default class StationControl extends Group { 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.emergencyControl = new SingleControl({ + this.emergencyControl = new ESingleControl({ _subType: 'emergency', style: this.style, zlevel: this.zlevel, @@ -101,7 +34,7 @@ export default class StationControl extends Group { pop: false }); - this.centerControl = new SingleControl({ + this.centerControl = new ESingleControl({ _subType: 'center', style: this.style, zlevel: this.zlevel, @@ -113,7 +46,7 @@ export default class StationControl extends Group { pop: false }); - this.substationControl = new SingleControl({ + this.substationControl = new ESingleControl({ _subType: 'substation', style: this.style, zlevel: this.zlevel, @@ -125,28 +58,10 @@ export default class StationControl extends Group { pop: false }); - this.textShadow = new Text({ - zlevel: this.zlevel, - z: this.z + 1, - position: [0, -4], - silent: true, - style: { - x: model.position.x, - y: model.position.y, - text: '', - textFill: this.style.textShadowColor, // 黄色 - textAlign: 'middle', - textVerticalAlign: 'top', - textFont: 'bold ' + (this.style.stationControlTextSize + 1) + 'px ' + this.style.textFontFormat - } - }); - this.add(this.substationControl); this.add(this.centerControl); this.add(this.emergencyControl); - this.add(this.textShadow); this.setState(state); - this.mouseStateRecover(); } // 设置状态 @@ -196,29 +111,4 @@ export default class StationControl extends Group { } return null; } - - mouseStateVisible(subType) { - switch (subType) { - case 'emergency': this.textShadow.setStyle({ text: this.model.jjzkContent }); break; - case 'center': this.textShadow.setStyle({ text: this.model.zokContent }); break; - case 'substation': this.textShadow.setStyle({ text: this.model.zakContent }); break; - } - this.textShadow.show(); - } - - mouseStateRecover() { - this.textShadow.hide(); - } - - mouseenter(e) { - if (e.target.parent && e.target.parent._subType) { - this.mouseStateVisible(e.target.parent._subType); - } - } - - mouseleave(e) { - if (e.target._subType) { - this.mouseStateRecover(); - } - } } diff --git a/src/jmap/shape/ZcControl.js b/src/jmap/shape/ZcControl.js index 020e87c9d..9451977df 100644 --- a/src/jmap/shape/ZcControl.js +++ b/src/jmap/shape/ZcControl.js @@ -1,10 +1,8 @@ /* * ZC区域控制模式 */ -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'; +import EControl from './element/EControl'; export default class ZcControl extends Group { constructor({ _code, _type, zlevel, model, state }, style) { @@ -17,32 +15,23 @@ export default class ZcControl extends Group { this.state = state; this.style = style; this._create(model); - this.on('mouseout', this.mouseleave); - this.on('mouseover', this.mouseenter); } _create(model) { - this.control = new Arc({ - _subType: 'Control', + this.control = new EControl({ zlevel: this.zlevel, z: this.z, - shape: { - cx: model.position.x, - cy: model.position.y, - r: this.style.zcControlmodeR - }, - style: { + arc: { + shape: { + cx: model.position.x, + cy: model.position.y, + r: this.style.zcControlmodeR + }, lineWidth: 0, fill: this.style.zcControlGrayColor - } - }); - - this.text = new Text({ - _subType: 'Text', - zlevel: this.zlevel, - z: this.z, - position: [0, 0], - style: { + }, + text: { + position: [0, 0], x: model.position.x, y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance, text: model.name, @@ -50,66 +39,12 @@ export default class ZcControl extends Group { textAlign: 'middle', textVerticalAlign: 'top', textFont: this.style.stationControlTextSize + 'px ' + this.style.textFontFormat - } - }); - - if (this.model.visible) { - this.add(this.control); - this.add(this.text); - } - - 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 - } + }, + style: this.style }); 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.mouseStatusRecover(); - } - - setControlColor(color) { - if (color) { - this.control.setStyle('fill', color); - } } // 设置状态 @@ -128,39 +63,4 @@ export default class ZcControl extends Group { } return null; } - - mouseStatusVisible(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 }); - } - } - - mouseStatusRecover() { - this.textShadow.hide(); - this.textBorder.hide(); - this.controlBorder.hide(); - this.text.setStyle({ textFill: '#fff' }); - this.control.setStyle({ fill: this.style.zcControlGrayColor }); - this.setState(this.state); - } - - mouseenter(e) { - if (e.target._subType) { - this.mouseStatusRecover(); - this.mouseStatusVisible(e.target._subType); - } - } - - mouseleave(e) { - if (e.target._subType) { - this.mouseStatusRecover(); - } - } } diff --git a/src/jmap/shape/element/EControl.js b/src/jmap/shape/element/EControl.js new file mode 100644 index 000000000..26634885b --- /dev/null +++ b/src/jmap/shape/element/EControl.js @@ -0,0 +1,61 @@ +import Group from 'zrender/src/container/Group'; +import Arc from 'zrender/src/graphic/shape/Arc'; +import Text from 'zrender/src/graphic/Text'; + +/** lc zc limit 单灯元素*/ +export default class EControl extends Group { + constructor(model) { + super(); + this.model = model; + this.zlevel = model.zlevel; + this.z = model.z; + this.style = model.style; + this.textStyle = model.text; + this.arcStyle = model.arc; + this._create(); + } + + _create() { + this.control = new Arc({ + _subType: 'Control', + zlevel: this.zlevel, + z: this.z, + shape: this.arcStyle.shape, + style: { + lineWidth: this.arcStyle.lineWidth, + fill: this.arcStyle.fill + } + }); + + this.text = new Text({ + _subType: 'Text', + zlevel: this.zlevel, + z: this.z, + position: this.textStyle.position, + style: { + x: this.textStyle.x, + y: this.textStyle.y, + text: this.textStyle.text, + textFill: this.textStyle.textFill, + textAlign: this.textStyle.textAlign, + textVerticalAlign: this.textStyle.textVerticalAlign, + textFont: this.textStyle.textFont + } + }); + + this.add(this.control); + this.add(this.text); + } + + setControlColor(color) { + if (color) { + this.control.setStyle('fill', color); + } + } + + setTextColor(color) { + if (color) { + this.text.setStyle('fill', color); + } + } +} diff --git a/src/jmap/shape/element/ESingleControl.js b/src/jmap/shape/element/ESingleControl.js new file mode 100644 index 000000000..51974baed --- /dev/null +++ b/src/jmap/shape/element/ESingleControl.js @@ -0,0 +1,68 @@ +import Arc from 'zrender/src/graphic/shape/Arc'; +import Group from 'zrender/src/container/Group'; +import Text from 'zrender/src/graphic/Text'; + +/** 单个控制灯*/ +export default class ESingleControl extends Group { + constructor(model) { + super(); + this.model = model; + this.zlevel = model.zlevel; + this._subType = model._subType; + // this.z = model.z; + this.z = 20; + this._create(model); + } + + _create(model) { + var _subType = 'ControlSignal'; + var _val = '0'; + if (model.pop) { + _subType = 'ControlButton'; + _val = '1'; + } + this.control = new Arc({ + pop: model.pop, + _subType: _subType, + _val: _val, + zlevel: this.zlevel, + z: this.z, + shape: { + cx: model.point.x, + cy: model.point.y, + r: model.style.stationControlmodeR + }, + style: { + lineWidth: 0.5, + fill: model.style.stationControlGrayColor, + stroke: model.style.stationControlGrayColor + } + }); + + this.text = new Text({ + pop: model.pop, + _subType: _subType, + zlevel: this.zlevel, + z: this.z, + position: [0, 0], + style: { + x: model.point.x, + y: model.point.y + model.style.stationControlmodeR + model.style.nameDistance, + text: model.context, + textFill: model.style.textFontColor, + textFont: model.style.textFontSize + 'px ' + model.style.textFontFormat, + textAlign: 'middle', + textVerticalAlign: 'top' + } + }); + + this.add(this.control); + this.add(this.text); + } + + setColor(color) { + if (color) { + this.control.setStyle('fill', color); + } + } +} diff --git a/src/jmap/shape/element/ETextName.js b/src/jmap/shape/element/ETextName.js index 118c688ea..84dcb8fb8 100644 --- a/src/jmap/shape/element/ETextName.js +++ b/src/jmap/shape/element/ETextName.js @@ -16,6 +16,7 @@ export default class ETextName extends Group { _subType: this.model._subType, zlevel: this.zlevel, z: this.z, + silent: this.model.silent || false, style: { x: this.model.x, y: this.model.y, @@ -23,7 +24,8 @@ export default class ETextName extends Group { textFont: this.model.textFont, textFill: this.model.textFill, textAlign: this.model.textAlign, - textPosition: this.model.textPosition + textPosition: this.model.textPosition || 'inside', + textVerticalAlign: this.model.textVerticalAlign || null } }); this.add(this.TextName);