joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

desc: 增加单个绘图元素

Browse Source
This commit is contained in:
zyy 2019-07-17 09:08:23 +08:00
parent 896438f51e
commit ddbf5edeb2
8 changed files with 196 additions and 474 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/jmap/shape/LcControl.js
View File

@ -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();
}
}
}

135
src/jmap/shape/LimitControl.js
View File

@ -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();
}
}
}
}

38
src/jmap/shape/Station.js
View File

@ -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);

118
src/jmap/shape/StationControl.js
View File

@ -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();
}
}
}

126
src/jmap/shape/ZcControl.js
View File

@ -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();
}
}
}

61
src/jmap/shape/element/EControl.js Normal file
View File

@ -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);
}
}
}

68
src/jmap/shape/element/ESingleControl.js Normal file
View File

@ -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);
}
}
}

4
src/jmap/shape/element/ETextName.js
View File

@ -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);