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

desc: 增加lc,limiit,image 图层

Browse Source
This commit is contained in:
zyy 2019-07-15 15:25:49 +08:00
parent 1a3c9ca500
commit cf389a7381
13 changed files with 867 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/jmap/config/deviceRender.js
View File

@ -11,37 +11,55 @@ deviceRender[deviceType.Link] = {
/** Section渲染配置*/
deviceRender[deviceType.Section] = {
zlevel: 1,
progressive: 2,
}
progressive: 2
};
/** Signal渲染配置*/
deviceRender[deviceType.Signal] = {
zlevel: 1,
progressive: 3,
}
progressive: 3
};
/** Switch渲染配置*/
deviceRender[deviceType.Switch] = {
zlevel: 3,
progressive: 5,
}
progressive: 5
};
/** Station渲染配置*/
deviceRender[deviceType.Station] = {
zlevel: 1,
progressive: 4,
}
progressive: 4
};
/** StationStand渲染配置*/
deviceRender[deviceType.StationStand] = {
zlevel: 1,
progressive: 5,
}
progressive: 5
};
/** StationControl渲染配置*/
deviceRender[deviceType.StationControl] = {
zlevel: 1,
progressive: 4,
}
progressive: 4
};
/** ImageControl渲染配置*/
deviceRender[deviceType.ImageControl] = {
zlevel: 1,
progressive: 5
};
/** LcControl渲染配置*/
deviceRender[deviceType.LcControl] = {
zlevel: 1,
progressive: 5
};
/** LimitControl渲染配置*/
deviceRender[deviceType.LimitControl] = {
zlevel: 1,
progressive: 5
};
export default deviceRender;

59
src/jmap/config/deviceStyle.js
View File

@ -166,6 +166,65 @@ fuzhouSkin[deviceType.Signal] = {
/** 信号灯蓝色*/
signalLampBlueColor: '#0000FF'
};
fuzhouSkin[deviceType.Station] = {
/** 默认字体 族类*/
textFontFormat: '宋体' // consolas
};
fuzhouSkin[deviceType.StationControl] = {
nameDistance: 2,
/** 默认字体颜色*/
textFontColor: '#C0C0C0',
/** 默认字体阴影颜色*/
textShadowColor: '#FFFF00',
/** 默认字体 族类*/
textFontFormat: 'consolas',
/** 控制模式灯的半径 */
stationControlmodeR: 5,
/** 控制模式之间灯之间的距离*/
stationControlDistance: 44,
/** 控制模式字体大小*/
stationControlTextSize: 12,
/** 控制模式灰色*/
stationControlGrayColor: '#74747C',
/** 控制模式绿色*/
stationControlGreenColor: '#4DD43F',
/** 控制模式红色*/
stationControlRedColor: '#EF0C08',
/** 控制模式黄色*/
stationControlYellowColor: '#E4EF50'
};
fuzhouSkin[deviceType.LcControl] = {
nameDistance: 2,
zcControlmodeR: 4,
lcControlColor: '#FFFF00',
stationControlTextSize: 10,
textFontFormat: 'consolas',
textShadowColor: '#FFFF00',
borderColor: '#fff',
transparentColor: 'rgba(0,0,0,0)',
borderContextBackgroundColor: '#00FFFF'
};
fuzhouSkin[deviceType.LimitControl] = {
nameDistance: 2,
zcControlmodeR: 4,
lcControlColor: '#FFFF00',
stationControlTextSize: 10,
textFontFormat: 'consolas',
textShadowColor: '#FFFF00',
borderColor: '#fff',
transparentColor: 'rgba(0,0,0,0)',
borderContextBackgroundColor: '#00FFFF',
limitControlColor: 4
};
/** 皮肤配置*/
const deviceSkin = {

6
src/jmap/config/deviceType.js
View File

@ -4,7 +4,11 @@ const deviceType = {
Signal: 'Signal',
Station: 'Station',
StationControl: 'StationControl',
StationStand: 'StationStand'
StationStand: 'StationStand',
ImageControl: 'ImageControl',
LcControl: 'LcControl',
ZcControl: 'ZcControl',
LimitControl: 'LimitControl'
};
export default deviceType;

4
src/jmap/map.js
View File

@ -166,6 +166,10 @@ class Jmap {
switch (type) {
case deviceType.Link: prop = 'linkList'; break;
case deviceType.Sction: prop = 'sectionList'; break;
case deviceType.Station: prop = 'stationList'; break;
case deviceType.StationControl: prop = 'stationControlList'; break;
case deviceType.LcControl: prop = 'LcControlList'; break;
case deviceType.LimitControl: prop = 'tempSpeedLimitList'; break;
}
const list = this.data[prop];

71
src/jmap/shape/ImageControl.js Normal file
View File

@ -0,0 +1,71 @@
/*
* 图片list
*/
import Group from 'zrender/src/container/Group';
import Image from 'zrender/src/graphic/Image';
export default class ImageControl extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super({name: _code});
this._code = _code;
this._type = _type;
this.zlevel = zlevel;
this.model = model;
this.state = state;
this.style = style;
this.z = model.zIndex || 5;
this._create();
}
_create() {
const model = this.model;
this.image = new Image({
zlevel: this.zlevel,
z: this.z,
origin: {
x: model.position.x,
y: model.position.y
},
rotation: -Math.PI / 180 * model.rotate,
style: {
image: model.url,
x: model.position.x,
y: model.position.y,
width: model.width,
height: model.height
}
});
this.add(this.image);
// 旋转
if (model.rotate) {
this.transformRotation(this.image);
}
}
setState(model) {
}
// 整体图片
transformRotation(item) {
if (this.model.rotate) {
const origin = [this.model.position.x, this.model.position.y];
const rotation = -Math.PI / 180 * Number(this.model.rotate);
item.origin = origin;
item.rotation = rotation;
item.dirty();
}
}
getShapeTipPoint() {
if (this.image) {
var distance = 2;
var rect = this.image.getBoundingRect();
return {
x: rect.x + rect.width / 2,
y: rect.y - distance
};
}
return null;
}
}

44
src/jmap/shape/Signal.js
View File

@ -13,7 +13,7 @@ import { arrows, triangular } from './libs/ShapePoints';
class Lamp extends Group {
constructor(model) {
super();
super({name: `${model.name}`});
this.model = model;
this.zlevel = model.zlevel;
this.z = 10;
@ -134,7 +134,7 @@ class Lamp extends Group {
// 自动进路箭头
class AutoSig extends Group {
constructor(model) {
super();
super({name: `${model.name}`});
this.model = model;
this.zlevel = model.zlevel;
this.z = 10;
@ -196,7 +196,7 @@ class AutoSig extends Group {
// 运行方向三角
class JSigDrict extends Group {
constructor(model) {
super();
super({name: `${model.name}`});
this.model = model;
this.zlevel = model.zlevel;
this.z = 10;
@ -226,12 +226,12 @@ class JSigDrict extends Group {
// 信号灯 几灯、高柱等
class JSiglamp extends Group {
constructor(model) {
super();
super({name: `${model.name}`});
this.model = model;
this.zlevel = model.zlevel;
this.z = 10;
this.lamps = new Group();
this.poles = new Group();
this.lamps = new Group({name: `${model.name}_Lamps`});
this.poles = new Group({name: `${model.name}_Poles`});
this._subType = 'SignalLamp';
this._val = '3'; /** 信号机*/
this._create();
@ -246,7 +246,7 @@ class JSiglamp extends Group {
style: {
x: model.position.x + model.namePosition.x,
y: model.position.y + model.posit * (model.style.signalR + model.namePosition.y),
text: model.name,
text: model.signalName,
textAlign: 'middle',
textVerticalAlign: model.posit === 1 ? 'top' : 'bottom',
textFont: 'bold ' + (model.style.textFontSize + 1) + 'px ' + model.style.textFontFormat,
@ -328,6 +328,7 @@ class JSiglamp extends Group {
const lamp = new Lamp({
style: model.style,
zlevel: this.zlevel,
name: `${this._code}_Lamp_${i}`,
lampCount: model.lampCount,
position: {
x: highPosition.x + i * model.drict * model.style.signalR * 2,
@ -362,6 +363,7 @@ class JSiglamp extends Group {
this.sigDriction = new JSigDrict({
style: model.style,
zlevel: this.zlevel,
name: `${this._code}_JSigDrict`,
position: {
x: highPosition.x + model.drict * (model.lampCount * model.style.signalR * 2 + model.style.signalR - 1),
y: model.position.y
@ -377,6 +379,7 @@ class JSiglamp extends Group {
this.autoSig = new AutoSig({
style: model.style,
zlevel: this.zlevel,
name: `${this._code}_AutoSig`,
position: {
x: highPosition.x,
y: highPosition.y
@ -514,7 +517,7 @@ class JSiglamp extends Group {
/** 按钮*/
class SigButton extends Group {
constructor(model) {
super();
super({name: `${model.name}`});
this.model = model;
this.zlevel = model.zlevel;
this._subType = 'SignalButton';
@ -711,7 +714,7 @@ class SigButton extends Group {
export default class Signal extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super();
super({name: _code});
this._code = _code;
this._type = _type;
this.zlevel = zlevel;
@ -730,6 +733,7 @@ export default class Signal extends Group {
_create() {
const model = this.model;
const style = this.style;
const state = this.state;
const drict = model.directionType === '01' ? -1 : 1;
const posit = model.positionType === '01' ? -1 : 1;
@ -737,13 +741,14 @@ export default class Signal extends Group {
this.siglamp = new JSiglamp({
style: style,
zlevel: this.zlevel,
name: `${this._code}_JSiglamp`,
position: {
x: model.position.x,
y: model.position.y + posit * style.signalDistance
},
drict: drict,
posit: posit,
name: model.name,
signalName: model.name,
namePosition: model.namePosition,
isShowName: model.nameShow,
highType: model.lampPostType,
@ -757,6 +762,7 @@ export default class Signal extends Group {
this.sigButton = new SigButton({
style: style,
zlevel: this.zlevel,
name: `${this._code}_SigButton`,
position: {
x: model.buttonPosition.x,
y: model.buttonPosition.y - posit * style.signalDistance
@ -768,7 +774,7 @@ export default class Signal extends Group {
this.add(this.siglamp);
this.mouseStateRecover();
this.setState(model);
this.setState(state);
}
setButtonStatus(model) {
@ -938,11 +944,11 @@ export default class Signal extends Group {
this.siglamp.setRecover();
}
setState(model) {
setState(state) {
this.recover();
/** 设置状态 (点灯类型)*/
switch (model.status) {
switch (state.status) {
case '01': { this.close(); } break; // 关闭
case '02': { this.open(); } break; // 开放
case '03': { this.guid(); } break; // 引导
@ -953,19 +959,19 @@ export default class Signal extends Group {
}
/** 进路性质类型*/
switch (model.natureType) {
switch (state.natureType) {
case '01': { this.trainRoute(); } break; // 列车进路
case '02': { this.shuntRoute(); } break; // 调车进路
}
/** 设置点灯类型*/
switch (model.lightType) {
switch (state.lightType) {
case '01': { this.logicalLight(); } break; // 设置逻辑点灯
case '02': { this.physicsLight(); } break; // 设置物理点灯
}
/** 设置自动类型*/
switch (model.autoType) {
switch (state.autoType) {
case '01': { this.setAutoClose(); } break; // 隐藏 隐藏自动信号和自动进路
case '02': { this.setAutoSignalOpen(); } break; // 显示 设置自动信号模式状态类型
case '03': { this.setAutoRouteOpen(); } break; // 显示 设置自动进路模式状态类型
@ -973,15 +979,15 @@ export default class Signal extends Group {
}
/** 延时解锁*/
model.delayType = '02';
switch (model.delayType) {
state.delayType = '02';
switch (state.delayType) {
case '01': { } // 未延时解锁
case '02': { } // 人工闭塞延时解锁
case '03': { } // 自动闭塞延时解锁
}
/** 信号机进路办理，先停止动画，再判断当前颜色是否闪烁*/
if (model.routeSetting && (model.autoType == '03' || model.autoType == '04')) {
if (state.routeSetting && (state.autoType == '03' || state.autoType == '04')) {
this.setAutoFlicker();
}
}

222
src/jmap/shape/StationControl.js Normal file
View File

@ -0,0 +1,222 @@
/*
* 控制模式
*/
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);
}
}
}
/** 控制模式*/
export default class StationControl extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super();
this.selected = false;
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;
this.emergencyControl = new SingleControl({
_subType: 'emergency',
style: this.style,
zlevel: this.zlevel,
point: {
x: model.position.x - this.style.stationControlDistance,
y: model.position.y
},
context: model.jjzkContent,
pop: false
});
this.centerControl = new SingleControl({
_subType: 'center',
style: this.style,
zlevel: this.zlevel,
point: {
x: model.position.x,
y: model.position.y
},
context: model.zokContent,
pop: false
});
this.substationControl = new SingleControl({
_subType: 'substation',
style: this.style,
zlevel: this.zlevel,
point: {
x: model.position.x + this.style.stationControlDistance,
y: model.position.y
},
context: model.zakContent,
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(model);
this.mouseStatusRecover();
}
// 设置状态
setState(model) {
switch (model.status) {
case '00': // 无状态
this.emergencyControl.setColor(this.style.stationControlGrayColor);
this.substationControl.setColor(this.style.stationControlGrayColor);
this.centerControl.setColor(this.style.stationControlGrayColor);
break;
case '01': // 中控
this.emergencyControl.setColor(this.style.stationControlGrayColor);
this.substationControl.setColor(this.style.stationControlGrayColor);
this.centerControl.setColor(this.style.stationControlGreenColor);
break;
case '02': // 站控
this.emergencyControl.setColor(this.style.stationControlGrayColor);
this.substationControl.setColor(this.style.stationControlYellowColor);
this.centerControl.setColor(this.style.stationControlGrayColor);
break;
case '03': // 紧急站控
this.emergencyControl.setColor(this.style.stationControlRedColor);
this.substationControl.setColor(this.style.stationControlGrayColor);
this.centerControl.setColor(this.style.stationControlGrayColor);
break;
}
}
/** 按钮是否按下*/
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;
}
}
}
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;
}
mouseStatusVisible(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();
}
mouseStatusRecover() {
this.textShadow.hide();
}
mouseenter(e) {
if (e.target.parent && e.target.parent._subType) {
this.mouseStatusVisible(e.target.parent._subType);
}
}
mouseleave(e) {
if (e.target._subType) {
this.mouseStatusRecover();
}
}
}

12
src/jmap/shape/factory.js
View File

@ -1,13 +1,23 @@
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 StationControl from './StationControl';
import ImageControl from './ImageControl';
import LcControl from './lcControl';
import LimitControl from './limitControl';
/** 图库*/
const mapShape = {};
mapShape[deviceType.Link] = Link;
mapShape[deviceType.Section] = Section;
mapShape[deviceType.Signal] = Signal;
mapShape[deviceType.Station] = Station;
mapShape[deviceType.StationControl] = StationControl;
mapShape[deviceType.ImageControl] = ImageControl;
mapShape[deviceType.LcControl] = LcControl;
mapShape[deviceType.LimitControl] = LimitControl;
function shapefactory(type, device, style) {
const shape = mapShape[type];

157
src/jmap/shape/lcControl.js Normal file
View File

@ -0,0 +1,157 @@
/*
* 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(model);
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, -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(this.state);
this.mouseStatusRecover();
}
// 设置状态
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;
}
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.lcControlColor });
// this.setState(this.state);
}
mouseenter(e) {
if (e.target._subType) {
console.log(e.target, e.target._subType);
// this.mouseStatusRecover();
this.mouseStatusVisible(e.target._subType);
}
}
mouseleave(e) {
if (e.target._subType) {
this.mouseStatusRecover();
}
}
}

171
src/jmap/shape/limitControl.js Normal file
View File

@ -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.mouseStatusRecover();
}
// 设置状态
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;
}
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.limitControlColor });
this.setState(this.state);
}
mouseclick(e) {
if ([3].includes(e.which)) {
this.selected = !this.selected;
if (this.selected) {
// this.mouseStatusRecover();
this.mouseStatusVisible('Control');
}
}
}
mouseenter(e) {
if (!this.selected && e.target._subType) {
// this.mouseStatusRecover();
this.mouseStatusVisible(e.target._subType);
}
}
mouseleave(e) {
if (e.target && e.target._subType) {
if (!this.selected && e.target._subType) {
this.mouseStatusRecover();
}
}
}
}

30
src/jmap/shape/section.js
View File

@ -12,7 +12,7 @@ import store from '@/store';
/** 计轴*/
class SectionAxle extends Group {
constructor(model) {
super();
super({name: `${model.name}`});
this.model = model;
this.zlevel = model.zlevel;
this.z = 5;
@ -63,7 +63,7 @@ class SectionAxle extends Group {
/** 分隔符*/
class SectionSeparator extends Group {
constructor(model) {
super();
super({name: `${model.name}`});
this.model = model;
this.zlevel = model.zlevel;
this.z = 6;
@ -161,7 +161,7 @@ class SectionSeparator extends Group {
/** 创建区段限速限集合*/
class LimitLines extends Group {
constructor(model) {
super();
super({name: `${model.name}`});
this.model = model;
this.zlevel = model.zlevel;
this.z = model.z;
@ -296,7 +296,7 @@ class LimitLines extends Group {
/** 创建区段线集合*/
class Lines extends Group {
constructor(model) {
super();
super({name: `${model.name}`});
this.model = model;
this.zlevel = model.zlevel;
this.z = model.z;
@ -409,7 +409,7 @@ class Lines extends Group {
/** 区段*/
export default class Section extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super();
super({name: _code});
this._code = _code;
this._type = _type;
this.zlevel = zlevel;
@ -427,6 +427,7 @@ export default class Section extends Group {
_create() {
const model = this.model;
const state = this.state;
// 01:物理区段；02逻辑区段；03道岔区段
this.createSectionText(); // 创建区段文字
if (model.type === '01' && (
@ -438,7 +439,7 @@ export default class Section extends Group {
if (model.type === '01') {
this.createAxles(); // 创建计轴
}
this.setState(model);
this.setState(state);
}
// this.mouseStateRecover();
@ -453,6 +454,7 @@ export default class Section extends Group {
this.section = new Lines({
zlevel: this.zlevel,
z: this.z,
name: `${this._code}_Lines`,
isSwitchSection: model.isSwitchSection,
isCurve: model.isCurve,
points: model.points,
@ -485,6 +487,7 @@ export default class Section extends Group {
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,
@ -496,6 +499,7 @@ export default class Section extends Group {
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,
@ -696,6 +700,7 @@ export default class Section extends Group {
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
@ -707,6 +712,7 @@ export default class Section extends Group {
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
@ -720,6 +726,7 @@ export default class Section extends Group {
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
@ -731,6 +738,7 @@ export default class Section extends Group {
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
@ -758,6 +766,7 @@ export default class Section extends Group {
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,
@ -772,6 +781,7 @@ export default class Section extends Group {
/** 创建右侧分隔符*/
traingle = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]);
this.rPartition = new SectionSeparator({
name: `${this._code}_SectionSeparator_R`,
style: style,
borderBorderShow: model.borderBorderShow,
zlevel: this.zlevel - 2,
@ -990,9 +1000,9 @@ export default class Section extends Group {
}
/** 设置状态*/
setState(model) {
setState(state) {
this.recover();
switch (model.status) {
switch (state.status) {
case '00': /** 未定义*/
this.undefine();
break;
@ -1040,12 +1050,12 @@ export default class Section extends Group {
}
/** 区段切除*/
if (model.cutOff) {
if (state.cutOff) {
this.sectionCutOff();
}
/** 是否限速*/
if (model.speedUpperLimit >= 0) {
if (state.speedUpperLimit >= 0) {
this.setSpeedUpperLimit();
}
}

77
src/jmap/shape/station.js Normal file
View File

@ -0,0 +1,77 @@
/*
* 车站
*/
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();
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;
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(model);
}
}
/** 设置公里标是否显示*/
setShowMileageText(show) {
if (show) {
this.mileageText.show();
} else {
this.mileageText.hide();
}
}
// eslint-disable-next-line no-unused-vars
setState(model) {
}
getShapeTipPoint() {
return null;
}
}

15
src/jmap/utils/parser.js
View File

@ -25,6 +25,21 @@ export function parser(data, defaultStateDict) {
zrUtil.each(data.signalList || [], (elem) => {
mapDevice[elem.code] = deviceFactory(deviceType.Signal, defaultStateDict, elem);
});
zrUtil.each(data.stationList || [], (elem) => {
mapDevice[elem.code] = deviceFactory(deviceType.Station, defaultStateDict, elem);
});
zrUtil.each(data.stationControlList || [], (elem) => {
mapDevice[elem.code] = deviceFactory(deviceType.StationControl, defaultStateDict, elem);
});
zrUtil.each(data.resourceList || [], (elem) => {
mapDevice[elem.code] = deviceFactory(deviceType.ImageControl, defaultStateDict, elem);
});
zrUtil.each(data.lcList || [], (elem) => {
mapDevice[elem.code] = deviceFactory(deviceType.LcControl, defaultStateDict, elem);
});
zrUtil.each(data.tempSpeedLimitList || [], (elem) => {
mapDevice[elem.code] = deviceFactory(deviceType.LimitControl, defaultStateDict, elem);
});
}
return mapDevice;