Merge branch 'test' of https://git.code.tencent.com/lian-cbtc/jl-client into test
This commit is contained in:
sunzhenyu
commit
22db894742
@ -24,6 +24,8 @@ class IbpPan {
|
||||
// 展示的画布大小
|
||||
this.canvasSize = {};
|
||||
|
||||
this.optsPan = {};
|
||||
|
||||
this.initIbpPage(opts);
|
||||
}
|
||||
initIbpPage(opts) {
|
||||
@ -98,6 +100,7 @@ class IbpPan {
|
||||
if (this.$options.disabled == true) {
|
||||
this.$mouseController.disable();
|
||||
} else {
|
||||
opts = Object.assign(opts, this.optsPan);
|
||||
this.$mouseController.enable(opts);
|
||||
}
|
||||
|
||||
@ -199,6 +202,13 @@ class IbpPan {
|
||||
this.$mouseController.setAllowDragging(true);
|
||||
}
|
||||
|
||||
setMoveOnMouseMove(data) {
|
||||
this.$mouseController.setMoveOnMouseMove(data);
|
||||
this.optsPan = {
|
||||
moveOnMouseMove: data || false
|
||||
};
|
||||
}
|
||||
|
||||
pullBack(payload) {
|
||||
if (payload.type === 'zoom') {
|
||||
const zrWidth = this.$ibpZr.getWidth();
|
||||
@ -283,6 +293,9 @@ class IbpPan {
|
||||
case this.events.DataZoom:
|
||||
this.$mouseController.on(this.events.DataZoom, cb, context);
|
||||
break;
|
||||
case this.events.__Pan:
|
||||
this.$mouseController.on(this.events.__Pan, this.optionsHandler);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -300,6 +313,9 @@ class IbpPan {
|
||||
case this.events.DataZoom:
|
||||
this.$mouseController.off(this.events.DataZoom, cb);
|
||||
break;
|
||||
case this.events.__Pan:
|
||||
this.$mouseController.off(this.events.__Pan, cb);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,7 +46,7 @@ class MouseController extends Eventful {
|
||||
|
||||
this.enable = function (opts) {
|
||||
opts = opts || {};
|
||||
this._moveOnMouseMove = opts.moveOnMouseMove || true;
|
||||
this._moveOnMouseMove = opts.moveOnMouseMove || false;
|
||||
this._preventDefaultMouseMove = opts.preventDefaultMouseMove || true;
|
||||
|
||||
this.disable();
|
||||
@ -83,6 +83,10 @@ class MouseController extends Eventful {
|
||||
this.isAllowDragging = data;
|
||||
}
|
||||
|
||||
setMoveOnMouseMove(data) {
|
||||
this._moveOnMouseMove = data;
|
||||
}
|
||||
|
||||
mousedown(e) {
|
||||
e.event.preventDefault();
|
||||
e.event.stopPropagation();
|
||||
@ -232,6 +236,13 @@ class MouseController extends Eventful {
|
||||
}
|
||||
/** 处理左键拖动事件--- 图形移动 */
|
||||
handleMouseMoveLeft(e, dx, dy, oldX, oldY) {
|
||||
console.log(this._moveOnMouseMove);
|
||||
if (this._dragging && this.eventTarget && this._moveOnMouseMove) {
|
||||
if (( this.eventTarget._type == deviceType.Background)) {
|
||||
this._preventDefaultMouseMove && eventTool.stop(e.event);
|
||||
this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
|
||||
}
|
||||
}
|
||||
if (!this._moveOnMouseMove || !this._dragging || !this.isAllowDragging) {
|
||||
return;
|
||||
}
|
||||
@ -241,10 +252,7 @@ class MouseController extends Eventful {
|
||||
item.grouper.drift(dx, dy, e);
|
||||
});
|
||||
} else if (this._dragging && this.eventTarget) { // 选中元素图形移动
|
||||
if (( this.eventTarget._type === deviceType.Background) || !this.isAllowDragging) {
|
||||
this._preventDefaultMouseMove && eventTool.stop(e.event);
|
||||
this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
|
||||
} else if (this.isAllowDragging) {
|
||||
if (this.isAllowDragging && this.eventTarget.grouper) {
|
||||
this.eventTarget.grouper.drift(dx, dy, e);
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,11 +6,12 @@ class SkinCode extends defaultStyle {
|
||||
super();
|
||||
this.fontFamily = '宋体';
|
||||
this[deviceType.Section] = {
|
||||
elemnetType:['name', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'separator', 'speedLimit'],
|
||||
active: {
|
||||
routeColor: false // 进路触发颜色
|
||||
},
|
||||
text: { // 物理区段名称
|
||||
show: true, // 物理区段名称显示
|
||||
name: { // 物理区段名称
|
||||
z: 2,
|
||||
position: -1, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 11, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -21,7 +22,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
logicText: { // 逻辑区段名称
|
||||
show: false, // 逻辑区段名称显示
|
||||
z: 2,
|
||||
position: -1, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 11, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -31,8 +32,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
standText: { // 站台轨名称
|
||||
show: true, // 站台轨名称显示
|
||||
standTrackText: { // 站台轨名称
|
||||
z: 2,
|
||||
position: 1, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 11, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -42,8 +43,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
reentryText: { // 折返轨名称
|
||||
show: true, // 折返轨名称显示
|
||||
reentryTrackText: { // 折返轨名称
|
||||
z: 2,
|
||||
position: 1, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 11, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -53,8 +54,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
transferText: { // 转换轨名称
|
||||
show: true, // 转换轨名称显示
|
||||
transferTrackText: { // 转换轨名称
|
||||
z: 2,
|
||||
position: 1, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 11, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -65,7 +66,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
destinationText: { // 目的码名称
|
||||
show: true, // 目的码名称显示
|
||||
z: 2,
|
||||
position: 1, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 11, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -84,6 +85,7 @@ class SkinCode extends defaultStyle {
|
||||
lineWidthMore: 2.5
|
||||
},
|
||||
line: {
|
||||
z: 0,
|
||||
width: 5, // 区段宽度
|
||||
beyondWidth: 0, // 区段宽超出宽度
|
||||
invadeColor: '#EF0C08', // 区段侵入颜色
|
||||
@ -104,8 +106,8 @@ class SkinCode extends defaultStyle {
|
||||
logicalColor: '#FFFF00', // 逻辑区段颜色 (未用)
|
||||
logicalTextColor: '#C0C0C0' // 逻辑区段名称颜色 (未用)
|
||||
},
|
||||
axle: {}, // 计轴
|
||||
speedLimit: { // 限速元素
|
||||
z: 2,
|
||||
width: 1, // 限速线的宽度
|
||||
distance: 5, // 限速线距离区段距离
|
||||
lineColor: '#FFFF00', // 限速线颜色
|
||||
@ -119,9 +121,6 @@ class SkinCode extends defaultStyle {
|
||||
color: '#7F7F7F', // 区段边界符颜色
|
||||
halfHeight: 5 // 区段分隔符高度的一半
|
||||
},
|
||||
block: {
|
||||
special: false // 区段特殊显示
|
||||
},
|
||||
trainPosition:{
|
||||
display: false // 列车实时位置显示
|
||||
}
|
||||
@ -290,35 +289,26 @@ class SkinCode extends defaultStyle {
|
||||
distance: 9, // 站台和屏蔽门之间的距离
|
||||
defaultColor: '#00FF00', // 屏蔽门默认颜色
|
||||
splitDoorColor: '#F61107' // 屏蔽门切除颜色
|
||||
},
|
||||
// 关联的后端属性
|
||||
relatedStatus:{
|
||||
// 该属性 关联的绘图元素
|
||||
'fault':['safetyDoorNormal'],
|
||||
'screenDoorOpenStatus':['safetyDoorNormal']
|
||||
}
|
||||
};
|
||||
|
||||
// 站台
|
||||
this[deviceType.StationStand] = {
|
||||
// 北京线站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级
|
||||
elemnetType:['safeStand', 'emergent', 'detainCarNormal', 'stopTime', 'level'],
|
||||
elemnetType:['solidStand', 'emergentRhombus', 'detainNormal', 'stopTime', 'level'],
|
||||
// 站台
|
||||
safeStand:{
|
||||
solidStand:{
|
||||
// 层级
|
||||
z:0,
|
||||
special:false,
|
||||
spareColor: '#606060', // 站台空闲颜色
|
||||
jumpStopColor: 'lightSkyBlue', // 站台跳停颜色
|
||||
designatedJumpStopColor: 'lightSkyBlue', // 站台指定列车跳停颜色
|
||||
headFontSize: 8, // 站台首端字体大小
|
||||
stopColor: '#FEFE00' // 站台列车停站颜色
|
||||
// relatedStatus:['trainParking', 'assignSkip', 'allSkip', 'emergencyClosed']
|
||||
},
|
||||
// 站台紧急关闭
|
||||
emergent:{
|
||||
emergentRhombus:{
|
||||
z:1,
|
||||
special:false,
|
||||
mergentR: 4, // 站台紧急关闭半径
|
||||
mergentN: 4, // 站台紧急关闭边数
|
||||
insideOffset: { x: 0, y: -40 }, // 内站台紧急关闭偏移量
|
||||
@ -326,7 +316,7 @@ class SkinCode extends defaultStyle {
|
||||
closeColor: '#F61107' // 站台紧急关闭颜色
|
||||
},
|
||||
// 扣车元素 普通扣车
|
||||
detainCarNormal:{
|
||||
detainNormal:{
|
||||
z:0,
|
||||
position: -1, // 扣车标识在站台上显示方向
|
||||
text: 'H', // 扣车显示内容
|
||||
|
||||
@ -6,11 +6,12 @@ class SkinCode extends defaultStyle {
|
||||
super();
|
||||
this.fontFamily = '宋体';
|
||||
this[deviceType.Section] = {
|
||||
elemnetType:['name', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'separator', 'speedLimit', 'speedLimitName'],
|
||||
active: {
|
||||
routeColor: false // 进路触发颜色
|
||||
},
|
||||
text: {
|
||||
show: true, // 物理区段名称显示
|
||||
name: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 10, // 文字离区段距离
|
||||
fontSize: 12, // 字体大小
|
||||
@ -21,7 +22,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
logicText: { // 逻辑区段名称
|
||||
show: false, // 逻辑区段名称显示
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 12, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -31,8 +32,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
standText: { // 站台
|
||||
show: true, // 站台轨名称显示
|
||||
standTrackText: { // 站台
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 24, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -42,8 +43,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
reentryText: { // 折返
|
||||
show: true, // 折返轨名称显示
|
||||
reentryTrackText: { // 折返
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 36, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -53,8 +54,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
transferText: { // 转换轨
|
||||
show: true, // 转换轨名称显示
|
||||
transferTrackText: { // 转换轨
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 36, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -65,7 +66,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
destinationText: { // 目的地
|
||||
show: true, // 目的码名称显示
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 12, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -76,6 +77,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
line: {
|
||||
z: 0,
|
||||
width: 5, // 区段宽度
|
||||
beyondWidth: 0, // 区段宽超出宽度
|
||||
invadeColor: '#FFFFFF', // 区段侵入颜色
|
||||
@ -96,17 +98,20 @@ class SkinCode extends defaultStyle {
|
||||
logicalTextColor: '#C0C0C0', // 逻辑区段名称颜色 (未用)
|
||||
invalidColor: '#A0522D' // 计轴故障
|
||||
},
|
||||
axle: {}, // 计轴
|
||||
speedLimit: { // 限速元素
|
||||
z: 2,
|
||||
width: 1, // 限速线的宽度
|
||||
distance: 5, // 限速线距离区段距离
|
||||
lineColor: '#C0C000', // 限速线颜色 （黄色透明光）
|
||||
nameBackground: '#C0C000', // 限速名称背景颜色
|
||||
nameShow: true, // 名称显示
|
||||
nameNumberColor: '#C00808', // 限速值颜色
|
||||
nameNumberFontSize: 11, // 限速值大小
|
||||
kilometerColor: '#fff', // 公里标颜色
|
||||
nameShow: true // 名称显示
|
||||
},
|
||||
speedLimitName: {
|
||||
z: 10,
|
||||
kilometerFontSize: 8, // 公里标大小
|
||||
kilometerColor: '#fff', // 公里标颜色
|
||||
nameNumberFontSize: 11, // 限速值大小
|
||||
nameNumberColor: '#C00808', // 限速值颜色
|
||||
nameBackground: '#C0C000', // 限速名称背景颜色
|
||||
drogueWidth: 19, // 浮标宽度
|
||||
drogueHeight: 12 // 浮标高度
|
||||
},
|
||||
@ -118,9 +123,6 @@ class SkinCode extends defaultStyle {
|
||||
color: 'white', // 区段边界符颜色
|
||||
halfHeight: 5 // 区段分隔符高度的一半
|
||||
},
|
||||
block: {
|
||||
special: false // 区段特殊显示
|
||||
},
|
||||
trainPosition:{
|
||||
display: true // 列车实时位置显示
|
||||
}
|
||||
@ -204,34 +206,25 @@ class SkinCode extends defaultStyle {
|
||||
distance: 4, // 站台和屏蔽门之间的距离
|
||||
defaultColor: 'green', // 屏蔽门默认颜色
|
||||
splitDoorColor: 'green' // 屏蔽门切除颜色
|
||||
},
|
||||
// 关联的后端属性
|
||||
relatedStatus:{
|
||||
// 该属性 关联的绘图元素 (注意优先级,后面的高于前面的优先级)
|
||||
'screenDoorOpenStatus':['safetyDoorNormal'],
|
||||
'fault':['safetyDoorNormal']
|
||||
}
|
||||
};
|
||||
|
||||
this[deviceType.StationStand] = {
|
||||
// 成都一号线站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级 跳停
|
||||
elemnetType:['safeStand', 'emergent', 'detainCarNormal', 'stopTime', 'level', 'jump'],
|
||||
elemnetType:['solidStand', 'emergentRhombus', 'detainNormal', 'stopTime', 'level', 'jumpCircle'],
|
||||
// 站台
|
||||
safeStand:{
|
||||
solidStand:{
|
||||
// 层级
|
||||
z:0,
|
||||
special:false,
|
||||
spareColor: 'white', // 站台空闲颜色
|
||||
jumpStopColor: 'blue', // 站台跳停颜色
|
||||
designatedJumpStopColor: 'lightSkyBlue', // 站台指定列车跳停颜色
|
||||
headFontSize: 10, // 站台首端字体大小
|
||||
stopColor: 'yellow' // 站台列车停站颜色
|
||||
// relatedStatus:['trainParking', 'assignSkip', 'allSkip', 'emergencyClosed']
|
||||
},
|
||||
// 站台紧急关闭
|
||||
emergent:{
|
||||
emergentRhombus:{
|
||||
z:1,
|
||||
special:false,
|
||||
mergentR: 4, // 站台紧急关闭半径
|
||||
mergentN: 4, // 站台紧急关闭边数
|
||||
insideOffset: { x: 0, y: 25 }, // 内站台紧急关闭偏移量
|
||||
@ -239,7 +232,7 @@ class SkinCode extends defaultStyle {
|
||||
closeColor: 'red' // 站台紧急关闭颜色
|
||||
},
|
||||
// 扣车元素 普通扣车
|
||||
detainCarNormal:{
|
||||
detainNormal:{
|
||||
z:0,
|
||||
position: -1, // 扣车标识在站台上显示方向
|
||||
text: 'H', // 扣车显示内容
|
||||
@ -266,7 +259,7 @@ class SkinCode extends defaultStyle {
|
||||
offset: {x: -8, y: 30}, // 运行等级偏移量
|
||||
textColor: '#FFF000' // 停站等级字体颜色
|
||||
},
|
||||
jump: {
|
||||
jumpCircle: {
|
||||
z:1,
|
||||
position: 1, // 停跳方向
|
||||
text: '跳', // 停跳显示内容
|
||||
|
||||
@ -6,11 +6,12 @@ class SkinCode extends defaultStyle {
|
||||
super();
|
||||
this.fontFamily = '宋体';
|
||||
this[deviceType.Section] = {
|
||||
elemnetType:['name', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'line', 'separator', 'speedLimit', 'speedLimitName'],
|
||||
active: {
|
||||
routeColor: true // 进路触发颜色
|
||||
},
|
||||
text: {
|
||||
show: true, // 物理区段名称显示
|
||||
name: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 10, // 文字离区段距离
|
||||
fontSize: 12, // 字体大小
|
||||
@ -21,7 +22,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
logicText: {
|
||||
show: false, // 逻辑区段名称显示
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 12, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -31,8 +32,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
standText: {
|
||||
show: true, // 站台轨名称显示
|
||||
standTrackText: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 24, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -42,8 +43,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
reentryText: {
|
||||
show: true, // 折返轨名称显示
|
||||
reentryTrackText: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 36, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -53,8 +54,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
transferText: {
|
||||
show: true, // 转换轨名称显示
|
||||
transferTrackText: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 36, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -65,7 +66,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
destinationText: {
|
||||
show: false, // 目的码名称显示
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 12, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -76,6 +77,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
line: {
|
||||
z: 0,
|
||||
width: 5, // 区段宽度
|
||||
beyondWidth: 0, // 区段宽超出宽度
|
||||
invadeColor: '#FFFFFF', // 区段侵入颜色
|
||||
@ -96,17 +98,20 @@ class SkinCode extends defaultStyle {
|
||||
logicalTextColor: '#C0C0C0', // 逻辑区段名称颜色 (未用)
|
||||
invalidColor: '#B18E38' // 区段ARB故障颜色
|
||||
},
|
||||
axle: {}, // 计轴
|
||||
speedLimit: { // 限速元素
|
||||
z: 2,
|
||||
width: 1, // 限速线的宽度
|
||||
distance: 5, // 限速线距离区段距离
|
||||
lineColor: '#C0C000', // 限速线颜色 （黄色透明光）
|
||||
nameBackground: '#C0C000', // 限速名称背景颜色
|
||||
nameShow: true, // 名称显示
|
||||
nameNumberColor: '#C00808', // 限速值颜色
|
||||
nameNumberFontSize: 11, // 限速值大小
|
||||
kilometerColor: '#fff', // 公里标颜色
|
||||
nameShow: true // 名称显示
|
||||
},
|
||||
speedLimitName: {
|
||||
z: 10,
|
||||
kilometerFontSize: 8, // 公里标大小
|
||||
kilometerColor: '#fff', // 公里标颜色
|
||||
nameNumberFontSize: 11, // 限速值大小
|
||||
nameNumberColor: '#C00808', // 限速值颜色
|
||||
nameBackground: '#C0C000', // 限速名称背景颜色
|
||||
drogueWidth: 19, // 浮标宽度
|
||||
drogueHeight: 12 // 浮标高度
|
||||
},
|
||||
@ -118,11 +123,11 @@ class SkinCode extends defaultStyle {
|
||||
color: '#FFFFFF', // 区段边界符颜色
|
||||
halfHeight: 5 // 区段分隔符高度的一半
|
||||
},
|
||||
// shuttleBack: { // 折返进路 (存在此对象 显示折返箭头)
|
||||
// distance: 5 // 限速线距离区段距离
|
||||
// },
|
||||
block: {
|
||||
special: false // 区段特殊显示
|
||||
shuttleBack: { // 折返进路 (存在此对象 显示折返箭头)
|
||||
z: 10,
|
||||
width: 1.5,
|
||||
color: '#FFFFFF',
|
||||
distance: 5 // 限速线距离区段距离
|
||||
},
|
||||
trainPosition:{
|
||||
display: false // 列车实时位置显示
|
||||
@ -221,35 +226,26 @@ class SkinCode extends defaultStyle {
|
||||
distance: 8, // 站台和屏蔽门之间的距离
|
||||
defaultColor: '#00FF00', // 屏蔽门默认颜色
|
||||
splitDoorColor: '#C00808' // 屏蔽门切除颜色
|
||||
},
|
||||
// 关联的后端属性
|
||||
relatedStatus:{
|
||||
// 该属性 关联的绘图元素 (注意优先级,后面的高于前面的优先级)
|
||||
'screenDoorOpenStatus':['safetyDoorNormal'],
|
||||
'fault':['safetyDoorNormal']
|
||||
}
|
||||
};
|
||||
|
||||
this[deviceType.StationStand] = {
|
||||
// 成都三号线站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级 跳停
|
||||
elemnetType:['safeStand', 'emergent', 'detainCarNormal', 'stopTime', 'level', 'jump'],
|
||||
elemnetType:['solidStand', 'emergentRhombus', 'detainNormal', 'stopTime', 'level', 'jumpCircle'],
|
||||
// 站台
|
||||
safeStand:{
|
||||
solidStand:{
|
||||
// 层级
|
||||
z:0,
|
||||
special:false,
|
||||
spareColor: '#ffffff', // 站台空闲颜色
|
||||
jumpStopColor: '#808080', // 站台跳停颜色
|
||||
designatedJumpStopColor: '#808080', // 站台指定列车跳停颜色
|
||||
headFontSize: 10, // 站台首端字体大小
|
||||
stopColor: '#FFF000' // 站台列车停站颜色
|
||||
// relatedStatus:['trainParking', 'assignSkip', 'allSkip', 'emergencyClosed']
|
||||
},
|
||||
// 站台紧急关闭
|
||||
emergent:{
|
||||
emergentRhombus:{
|
||||
z:1,
|
||||
flicker: true, // 闪烁
|
||||
special:false,
|
||||
mergentR: 5, // 站台紧急关闭半径
|
||||
mergentN: 4, // 站台紧急关闭边数
|
||||
insideOffset: { x: 0, y: 30 }, // 内站台紧急关闭偏移量
|
||||
@ -257,7 +253,7 @@ class SkinCode extends defaultStyle {
|
||||
closeColor: '#F61107' // 站台紧急关闭颜色
|
||||
},
|
||||
// 扣车元素 普通扣车
|
||||
detainCarNormal:{
|
||||
detainNormal:{
|
||||
z:0,
|
||||
position: -1, // 扣车标识在站台上显示方向
|
||||
text: '扣', // 扣车显示内容
|
||||
@ -285,7 +281,7 @@ class SkinCode extends defaultStyle {
|
||||
textColor: '#FFF000' // 停站等级字体颜色
|
||||
},
|
||||
// 跳停
|
||||
jump: {
|
||||
jumpCircle: {
|
||||
z:1,
|
||||
position: 1, // 停跳方向
|
||||
text: '跳', // 停跳显示内容
|
||||
|
||||
@ -6,11 +6,12 @@ class SkinCode extends defaultStyle {
|
||||
super();
|
||||
this.fontFamily = '宋体';
|
||||
this[deviceType.Section] = {
|
||||
elemnetType:['name', 'logicText', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'separator', 'speedLimit'],
|
||||
active: {
|
||||
routeColor: false // 进路触发颜色
|
||||
},
|
||||
text: {
|
||||
show: true, // 物理区段名称显示
|
||||
name: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 18, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -21,7 +22,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
logicText: {
|
||||
show: true, // 逻辑区段名称显示
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 6, // 文字离区段距离
|
||||
fontSize: 8, // 字体大小
|
||||
@ -31,8 +32,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
standText: {
|
||||
show: true, // 站台轨名称显示
|
||||
standTrackText: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 30, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -42,8 +43,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
reentryText: {
|
||||
show: true, // 折返轨名称显示
|
||||
reentryTrackText: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 30, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -53,8 +54,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
transferText: {
|
||||
show: true, // 转换轨名称显示
|
||||
transferTrackText: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 28, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -65,7 +66,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
destinationText: {
|
||||
show: true, // 目的码名称显示
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 10, // 文字离区段距离
|
||||
fontSize: 10, // 字体大小
|
||||
@ -76,6 +77,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
line: {
|
||||
z: 0,
|
||||
width: 5, // 区段宽度
|
||||
beyondWidth: 0, // 区段宽超出宽度
|
||||
invadeColor: '#EF0C08', // 区段侵入颜色
|
||||
@ -96,8 +98,8 @@ class SkinCode extends defaultStyle {
|
||||
logicalTextColor: '#FFFFFF', // 逻辑区段名称颜色 (未用)
|
||||
invalidColor: '#A25100' // 区段ARB故障颜色
|
||||
},
|
||||
axle: {}, // 计轴
|
||||
speedLimit: { // 限速元素
|
||||
z: 2,
|
||||
width: 1, // 限速线的宽短
|
||||
distance: 5, // 限速线距离区段距离
|
||||
lineColor: '#FFFF00', // 限速线颜色
|
||||
@ -111,9 +113,6 @@ class SkinCode extends defaultStyle {
|
||||
color: '#3149C3', // 区段边界符颜色
|
||||
halfHeight: 5 // 区段分隔符高度的一半
|
||||
},
|
||||
block: {
|
||||
special: false // 区段特殊显示
|
||||
},
|
||||
trainPosition:{
|
||||
display: false // 列车实时位置显示
|
||||
}
|
||||
@ -199,34 +198,25 @@ class SkinCode extends defaultStyle {
|
||||
distance: 8, // 站台和屏蔽门之间的距离
|
||||
defaultColor: '#00FF00', // 屏蔽门默认颜色
|
||||
splitDoorColor: '#F61107' // 屏蔽门切除颜色
|
||||
},
|
||||
// 关联的后端属性
|
||||
relatedStatus:{
|
||||
// 该属性 关联的绘图元素 (注意优先级,后面的高于前面的优先级)
|
||||
'screenDoorOpenStatus':['safetyDoorNormal'],
|
||||
'fault':['safetyDoorNormal']
|
||||
}
|
||||
};
|
||||
|
||||
this[deviceType.StationStand] = {
|
||||
// 佛山有轨电车站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级 跳停
|
||||
elemnetType:['safeStand', 'emergent', 'detainCarNormal', 'stopTime', 'level', 'jump'],
|
||||
elemnetType:['solidStand', 'emergentRhombus', 'detainNormal', 'stopTime', 'level', 'jump'],
|
||||
// 站台
|
||||
safeStand:{
|
||||
solidStand:{
|
||||
// 层级
|
||||
z:0,
|
||||
special:false,
|
||||
spareColor: '#606060', // 站台空闲颜色
|
||||
jumpStopColor: '#9A99FF', // 站台跳停颜色
|
||||
designatedJumpStopColor: '#606060', // 站台指定列车跳停颜色
|
||||
headFontSize: 11, // 站台首端字体大小
|
||||
stopColor: '#FEFE00' // 站台列车停站颜色
|
||||
// relatedStatus:['trainParking', 'assignSkip', 'allSkip', 'emergencyClosed']
|
||||
},
|
||||
// 站台紧急关闭
|
||||
emergent:{
|
||||
emergentRhombus:{
|
||||
z:1,
|
||||
special:false,
|
||||
mergentR: 4, // 站台紧急关闭半径
|
||||
mergentN: 4, // 站台紧急关闭边数
|
||||
insideOffset: { x: 0, y: 25}, // 内站台紧急关闭偏移量
|
||||
@ -234,7 +224,7 @@ class SkinCode extends defaultStyle {
|
||||
closeColor: '#F61107' // 站台紧急关闭颜色
|
||||
},
|
||||
// 扣车元素 普通扣车
|
||||
detainCarNormal:{
|
||||
detainNormal:{
|
||||
z:0,
|
||||
position: 1, // 扣车标识在站台上显示方向
|
||||
text: 'H', // 扣车显示内容
|
||||
@ -270,7 +260,6 @@ class SkinCode extends defaultStyle {
|
||||
textColor: '#5376B3', // 停跳文字颜色
|
||||
arcColor: '#000000', // 停跳圆圈颜色
|
||||
fillColor: 'rgba(0,0,0,0)', // 透明填充颜色
|
||||
r: 0, // 圆半径大小
|
||||
fontWeight: 'normal', // 文字居中
|
||||
fontSize: 11 // 文字大小
|
||||
},
|
||||
|
||||
@ -6,11 +6,12 @@ class SkinCode extends defaultStyle {
|
||||
super();
|
||||
this.fontFamily = '宋体';
|
||||
this[deviceType.Section] = {
|
||||
elemnetType:['name', 'logicText', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'separator', 'speedLimit'],
|
||||
active: {
|
||||
routeColor: false // 进路触发颜色
|
||||
},
|
||||
text: {
|
||||
show: true, // 物理区段名称显示
|
||||
name: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 18, // 文字离区段距离
|
||||
fontSize: 12, // 字体大小
|
||||
@ -21,7 +22,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
logicText: {
|
||||
show: true, // 逻辑区段名称显示
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 6, // 文字离区段距离
|
||||
fontSize: 12, // 字体大小
|
||||
@ -31,8 +32,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
standText: {
|
||||
show: true, // 站台轨名称显示
|
||||
standTrackText: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 30, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -42,8 +43,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
reentryText: {
|
||||
show: true, // 折返轨名称显示
|
||||
reentryTrackText: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 30, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -53,8 +54,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
transferText: {
|
||||
show: true, // 转换轨名称显示
|
||||
transferTrackText: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 28, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -65,7 +66,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
destinationText: {
|
||||
show: true, // 目的码名称显示
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 10, // 文字离区段距离
|
||||
fontSize: 10, // 字体大小
|
||||
@ -76,6 +77,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
line: {
|
||||
z: 0,
|
||||
width: 5, // 区段宽度
|
||||
beyondWidth: 0, // 区段宽超出宽度
|
||||
invadeColor: '#EF0C08', // 区段侵入颜色
|
||||
@ -96,8 +98,8 @@ class SkinCode extends defaultStyle {
|
||||
logicalTextColor: '#FFFFFF', // 逻辑区段名称颜色 (未用)
|
||||
invalidColor: '#A25100' // 区段ARB故障颜色
|
||||
},
|
||||
axle: {}, // 计轴
|
||||
speedLimit: { // 限速元素
|
||||
z: 2,
|
||||
width: 1, // 限速线的宽短
|
||||
distance: 5, // 限速线距离区段距离
|
||||
lineColor: '#FFFF00', // 限速线颜色
|
||||
@ -111,9 +113,6 @@ class SkinCode extends defaultStyle {
|
||||
color: '#3149C3', // 区段边界符颜色
|
||||
halfHeight: 5 // 区段分隔符高度的一半
|
||||
},
|
||||
block: {
|
||||
special: false // 区段特殊显示
|
||||
},
|
||||
trainPosition:{
|
||||
display: false // 列车实时位置显示
|
||||
}
|
||||
@ -198,34 +197,25 @@ class SkinCode extends defaultStyle {
|
||||
distance: 8, // 站台和屏蔽门之间的距离
|
||||
defaultColor: '#00FF00', // 屏蔽门默认颜色
|
||||
splitDoorColor: '#F61107' // 屏蔽门切除颜色
|
||||
},
|
||||
// 关联的后端属性
|
||||
relatedStatus:{
|
||||
// 该属性 关联的绘图元素 (注意优先级,后面的高于前面的优先级)
|
||||
'screenDoorOpenStatus':['safetyDoorNormal'],
|
||||
'fault':['safetyDoorNormal']
|
||||
}
|
||||
};
|
||||
|
||||
this[deviceType.StationStand] = {
|
||||
// 福州一号线新版站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级 跳停 折返策略
|
||||
elemnetType:['safeStand', 'emergent', 'detainCarNormal', 'stopTime', 'level', 'reentry'],
|
||||
elemnetType:['solidStand', 'emergentRhombus', 'detainHollow', 'stopTime', 'level', 'reentry'],
|
||||
// 站台
|
||||
safeStand:{
|
||||
solidStand:{
|
||||
// 层级
|
||||
z:0,
|
||||
special:false,
|
||||
spareColor: '#606060', // 站台空闲颜色
|
||||
jumpStopColor: '#9A99FF', // 站台跳停颜色
|
||||
designatedJumpStopColor: 'lightSkyBlue', // 站台指定列车跳停颜色
|
||||
headFontSize: 11, // 站台首端字体大小
|
||||
stopColor: '#FEFE00' // 站台列车停站颜色
|
||||
// relatedStatus:['trainParking', 'assignSkip', 'allSkip', 'emergencyClosed']
|
||||
},
|
||||
// 站台紧急关闭
|
||||
emergent:{
|
||||
emergentRhombus:{
|
||||
z:1,
|
||||
special:false,
|
||||
mergentR: 4, // 站台紧急关闭半径
|
||||
mergentN: 4, // 站台紧急关闭边数
|
||||
insideOffset: { x: 0, y: 25 }, // 内站台紧急关闭偏移量
|
||||
@ -233,7 +223,7 @@ class SkinCode extends defaultStyle {
|
||||
closeColor: '#F61107' // 站台紧急关闭颜色
|
||||
},
|
||||
// 扣车元素 普通扣车
|
||||
detainCarNormal:{
|
||||
detainHollow:{
|
||||
z:0,
|
||||
position: 1, // 扣车标识在站台上显示方向
|
||||
text: 'H', // 扣车显示内容
|
||||
@ -243,7 +233,6 @@ class SkinCode extends defaultStyle {
|
||||
detainTrainTextColor: '#E4EF50', // 车站扣除文字颜色
|
||||
// trainColor: '#E4EF50', // 车站扣车颜色
|
||||
fontSize: 11, // 字体大小
|
||||
circle: true, // 空心圆环
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
// 停站时间
|
||||
|
||||
@ -6,11 +6,12 @@ class SkinCode extends defaultStyle {
|
||||
super();
|
||||
this.fontFamily = '宋体';
|
||||
this[deviceType.Section] = {
|
||||
elemnetType:['name', 'logicText', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'line', 'lineBorder', 'sectionBlock', 'speedLimit'],
|
||||
active: {
|
||||
routeColor: false // 进路触发颜色
|
||||
},
|
||||
text: {
|
||||
show: true, // 物理区段名称显示
|
||||
name: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 18, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -21,7 +22,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
logicText: {
|
||||
show: true, // 逻辑区段名称显示
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 6, // 文字离区段距离
|
||||
fontSize: 8, // 字体大小
|
||||
@ -31,8 +32,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
standText: {
|
||||
show: true, // 站台轨名称显示
|
||||
standTrackText: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 30, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -42,8 +43,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
reentryText: {
|
||||
show: true, // 折返轨名称显示
|
||||
reentryTrackText: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 30, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -53,8 +54,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
transferText: {
|
||||
show: true, // 转换轨名称显示
|
||||
transferTrackText: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 28, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -65,7 +66,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
destinationText: {
|
||||
show: false, // 目的码名称显示
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 10, // 文字离区段距离
|
||||
fontSize: 10, // 字体大小
|
||||
@ -76,7 +77,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
line: {
|
||||
isActiveShow: true, // 哈尔滨点击元素显示
|
||||
z: 0,
|
||||
width: 5, // 区段宽度
|
||||
beyondWidth: 0, // 区段宽超出宽度
|
||||
invadeColor: '#EF0C08', // 区段侵入颜色
|
||||
@ -97,8 +98,15 @@ class SkinCode extends defaultStyle {
|
||||
logicalColor: '#FFFF00', // 逻辑区段颜色 (未用)
|
||||
logicalTextColor: '#FFFFFF' // 逻辑区段名称颜色 (未用)
|
||||
},
|
||||
axle: {}, // 计轴
|
||||
lineBorder: { // 哈尔滨点击背景 元素
|
||||
z: -1,
|
||||
activeStroke: '#2EBFBF'
|
||||
},
|
||||
sectionBlock: {
|
||||
z: 2
|
||||
}, // 计轴
|
||||
speedLimit: { // 限速元素
|
||||
z: 2,
|
||||
width: 1, // 限速线的宽短
|
||||
distance: 5, // 限速线距离区段距离
|
||||
lineColor: '#FFFF00', // 限速线颜色
|
||||
@ -112,9 +120,6 @@ class SkinCode extends defaultStyle {
|
||||
color: '#3149C3', // 区段边界符颜色
|
||||
halfHeight: 5 // 区段分隔符高度的一半
|
||||
},
|
||||
block: {
|
||||
special: true // 区段特殊显示
|
||||
},
|
||||
trainPosition:{
|
||||
display: false // 列车实时位置显示
|
||||
}
|
||||
@ -205,33 +210,25 @@ class SkinCode extends defaultStyle {
|
||||
distance: 8, // 站台和屏蔽门之间的距离
|
||||
defaultColor: '#fff', // 屏蔽门默认颜色
|
||||
splitDoorColor: '#F61107' // 屏蔽门切除颜色
|
||||
},
|
||||
// 关联的后端属性
|
||||
relatedStatus:{
|
||||
// 该属性 关联的绘图元素 (注意优先级,后面的高于前面的优先级)
|
||||
'screenDoorOpenStatus':['horizontal2Door'],
|
||||
'fault':['horizontal2Door']
|
||||
}
|
||||
};
|
||||
|
||||
this[deviceType.StationStand] = {
|
||||
// 哈尔滨一号线站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级 跳停
|
||||
elemnetType:['safeStand', 'emergent', 'detainCarNormal', 'level', 'jump', 'trainStop', 'trainDepart'],
|
||||
elemnetType:['gapStand', 'emergentArrow', 'detainNormal', 'level', 'jump', 'trainStop', 'trainDepart'],
|
||||
// 站台
|
||||
safeStand:{
|
||||
gapStand:{
|
||||
// 层级
|
||||
z:0,
|
||||
special:true,
|
||||
spareColor: '#00FFFF', // 站台空闲颜色
|
||||
jumpStopColor: '#9A99FF', // 站台跳停颜色
|
||||
designatedJumpStopColor: 'lightSkyBlue', // 站台指定列车跳停颜色
|
||||
headFontSize: 11, // 站台首端字体大小
|
||||
stopColor: '#FEFE00', // 站台列车停站颜色
|
||||
textFill: '#fff' // 站台字体颜色
|
||||
// relatedStatus:['trainParking', 'assignSkip', 'allSkip', 'emergencyClosed']
|
||||
},
|
||||
// 站台紧急关闭
|
||||
emergent:{
|
||||
emergentArrow:{
|
||||
z:1,
|
||||
special:false,
|
||||
mergentR: 4, // 站台紧急关闭半径
|
||||
@ -243,7 +240,7 @@ class SkinCode extends defaultStyle {
|
||||
radiusR: 6
|
||||
},
|
||||
// 扣车元素 普通扣车
|
||||
detainCarNormal:{
|
||||
detainNormal:{
|
||||
z:0,
|
||||
position: 1, // 扣车标识在站台上显示方向
|
||||
text: 'H', // 扣车显示内容
|
||||
|
||||
@ -6,11 +6,12 @@ class SkinCode extends defaultStyle {
|
||||
super();
|
||||
this.fontFamily = '宋体';
|
||||
this[deviceType.Section] = {
|
||||
elemnetType:['name', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'separator', 'speedLimit'],
|
||||
active: {
|
||||
routeColor: false // 进路触发颜色
|
||||
},
|
||||
text: {
|
||||
show: true, // 物理区段名称显示
|
||||
name: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 10, // 文字离区段距离
|
||||
fontSize: 12, // 字体大小
|
||||
@ -21,7 +22,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
logicText: { // 逻辑区段名称
|
||||
show: false, // 逻辑区段名称显示
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 12, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -31,8 +32,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
standText: { // 站台
|
||||
show: true, // 站台轨名称显示
|
||||
standTrackText: { // 站台
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 24, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -42,8 +43,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
reentryText: { // 折返
|
||||
show: true, // 折返轨名称显示
|
||||
reentryTrackText: { // 折返
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 36, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -53,8 +54,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
transferText: { // 转换轨
|
||||
show: true, // 转换轨名称显示
|
||||
transferTrackText: { // 转换轨
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 36, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -65,7 +66,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
destinationText: { // 目的地
|
||||
show: true, // 目的码名称显示
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 12, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -76,6 +77,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
line: {
|
||||
z: 0,
|
||||
width: 5, // 区段宽度
|
||||
beyondWidth: 0, // 区段宽超出宽度
|
||||
invadeColor: '#FFFFFF', // 区段侵入颜色
|
||||
@ -96,19 +98,12 @@ class SkinCode extends defaultStyle {
|
||||
logicalColor: '#FFFF00', // 逻辑区段颜色 (未用)
|
||||
logicalTextColor: 'white' // 逻辑区段名称颜色 (未用)
|
||||
},
|
||||
axle: {}, // 计轴
|
||||
speedLimit: { // 限速元素
|
||||
z: 2,
|
||||
width: 1, // 限速线的宽度
|
||||
distance: 5, // 限速线距离区段距离
|
||||
lineColor: '#C0C000', // 限速线颜色 （黄色透明光）
|
||||
nameBackground: '#C0C000', // 限速名称背景颜色
|
||||
nameShow: false, // 名称显示
|
||||
nameNumberColor: '#C00808', // 限速值颜色
|
||||
nameNumberFontSize: 11, // 限速值大小
|
||||
kilometerColor: '#fff', // 公里标颜色
|
||||
kilometerFontSize: 8, // 公里标大小
|
||||
drogueWidth: 19, // 浮标宽度
|
||||
drogueHeight: 12 // 浮标高度
|
||||
nameShow: false // 名称显示
|
||||
},
|
||||
separator: {
|
||||
z: 3, // 分割符层级
|
||||
@ -119,7 +114,6 @@ class SkinCode extends defaultStyle {
|
||||
halfHeight: 5 // 区段分隔符高度的一半
|
||||
},
|
||||
block: {
|
||||
special: false, // 区段特殊显示
|
||||
blockGlint: true // 区段封锁闪烁显示
|
||||
},
|
||||
trainPosition:{
|
||||
@ -328,34 +322,25 @@ class SkinCode extends defaultStyle {
|
||||
distance: 4, // 站台和屏蔽门之间的距离
|
||||
defaultColor: 'green', // 屏蔽门默认颜色
|
||||
splitDoorColor: 'green' // 屏蔽门切除颜色
|
||||
},
|
||||
// 关联的后端属性
|
||||
relatedStatus:{
|
||||
// 该属性 关联的绘图元素 (注意优先级,后面的高于前面的优先级)
|
||||
'screenDoorOpenStatus':['safetyDoorNormal'],
|
||||
'fault':['safetyDoorNormal']
|
||||
}
|
||||
};
|
||||
|
||||
this[deviceType.StationStand] = {
|
||||
// 宁波一号线站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级
|
||||
elemnetType:['safeStand', 'emergent', 'detainCarNormal', 'stopTime', 'level'],
|
||||
elemnetType:['solidStand', 'emergentRhombus', 'detainNormal', 'stopTime', 'level'],
|
||||
// 站台
|
||||
safeStand:{
|
||||
solidStand:{
|
||||
// 层级
|
||||
z:0,
|
||||
special:false,
|
||||
spareColor: 'white', // 站台空闲颜色
|
||||
jumpStopColor: '#6260f3', // 站台跳停颜色
|
||||
designatedJumpStopColor: 'lightSkyBlue', // 站台指定列车跳停颜色
|
||||
headFontSize: 10, // 站台首端字体大小
|
||||
stopColor: 'yellow' // 站台列车停站颜色
|
||||
// relatedStatus:['trainParking', 'assignSkip', 'allSkip', 'emergencyClosed']
|
||||
},
|
||||
// 站台紧急关闭
|
||||
emergent:{
|
||||
emergentRhombus:{
|
||||
z:1,
|
||||
special:false,
|
||||
mergentR: 4, // 站台紧急关闭半径
|
||||
mergentN: 4, // 站台紧急关闭边数
|
||||
insideOffset: { x: 0, y: 25 }, // 内站台紧急关闭偏移量
|
||||
@ -363,7 +348,7 @@ class SkinCode extends defaultStyle {
|
||||
closeColor: 'red' // 站台紧急关闭颜色
|
||||
},
|
||||
// 扣车元素 普通扣车
|
||||
detainCarNormal:{
|
||||
detainNormal:{
|
||||
z:0,
|
||||
position: 1, // 扣车标识在站台上显示方向
|
||||
text: 'H', // 扣车显示内容
|
||||
|
||||
@ -7,11 +7,12 @@ class SkinCode extends defaultStyle {
|
||||
this.fontFamily = '宋体';
|
||||
this.backgroundColor = '#808080';
|
||||
this[deviceType.Section] = {
|
||||
elemnetType:['name', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'stopRouteImg', 'separator', 'speedLimit'],
|
||||
active: {
|
||||
routeColor: false // 进路触发颜色
|
||||
},
|
||||
text: {
|
||||
show: true, // 物理区段名称显示
|
||||
name: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 10, // 文字离区段距离
|
||||
fontSize: 12, // 字体大小
|
||||
@ -22,7 +23,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
logicText: { // 逻辑区段名称
|
||||
show: false, // 逻辑区段名称显示
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 12, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -32,8 +33,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
standText: { // 站台
|
||||
show: true, // 站台轨名称显示
|
||||
standTrackText: { // 站台
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 24, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -43,8 +44,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
reentryText: { // 折返
|
||||
show: true, // 折返轨名称显示
|
||||
reentryTrackText: { // 折返
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 36, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -54,8 +55,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
transferText: { // 转换轨
|
||||
show: true, // 转换轨名称显示
|
||||
transferTrackText: { // 转换轨
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 36, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -66,7 +67,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
destinationText: { // 目的地
|
||||
show: true, // 目的码名称显示
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 12, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -77,6 +78,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
line: {
|
||||
z: 0,
|
||||
width: 8, // 区段宽度
|
||||
beyondWidth: 0, // 区段宽超出宽度
|
||||
invadeColor: '#FFFFFF', // 区段侵入颜色
|
||||
@ -127,19 +129,12 @@ class SkinCode extends defaultStyle {
|
||||
cancelMauLineStroke: '#000'
|
||||
},
|
||||
stopRouteImg: {},
|
||||
axle: {}, // 计轴
|
||||
speedLimit: { // 限速元素
|
||||
z: 2,
|
||||
width: 1, // 限速线的宽度
|
||||
distance: 5, // 限速线距离区段距离
|
||||
lineColor: '#C0C000', // 限速线颜色 （黄色透明光）
|
||||
nameBackground: '#C0C000', // 限速名称背景颜色
|
||||
nameShow: false, // 名称显示
|
||||
nameNumberColor: '#C00808', // 限速值颜色
|
||||
nameNumberFontSize: 11, // 限速值大小
|
||||
kilometerColor: '#fff', // 公里标颜色
|
||||
kilometerFontSize: 8, // 公里标大小
|
||||
drogueWidth: 19, // 浮标宽度
|
||||
drogueHeight: 12 // 浮标高度
|
||||
nameShow: false // 名称显示
|
||||
},
|
||||
separator: {
|
||||
z: -1, // 分割符层级
|
||||
@ -150,7 +145,6 @@ class SkinCode extends defaultStyle {
|
||||
halfHeight: 8 // 区段分隔符高度的一半
|
||||
},
|
||||
block: {
|
||||
special: false, // 区段特殊显示
|
||||
blockGlint: true // 区段封锁闪烁显示
|
||||
},
|
||||
trainPosition:{
|
||||
@ -377,23 +371,16 @@ class SkinCode extends defaultStyle {
|
||||
distance: 4, // 站台和屏蔽门之间的距离
|
||||
defaultColor: 'green', // 屏蔽门默认颜色
|
||||
splitDoorColor: 'green' // 屏蔽门切除颜色
|
||||
},
|
||||
// 关联的后端属性
|
||||
relatedStatus:{
|
||||
// 该属性 关联的绘图元素 (注意优先级,后面的高于前面的优先级)
|
||||
'screenDoorOpenStatus':['safetyDoorNormal'],
|
||||
'fault':['safetyDoorNormal']
|
||||
}
|
||||
};
|
||||
|
||||
this[deviceType.StationStand] = {
|
||||
// 宁波三号线站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级 跳停
|
||||
elemnetType:['safeStand', 'emergent', 'detainRect', 'stopTime', 'level'],
|
||||
elemnetType:['solidStand', 'emergentRhombus', 'detainRect', 'stopTime', 'level'],
|
||||
// 站台
|
||||
safeStand:{
|
||||
solidStand:{
|
||||
// 层级
|
||||
z:0,
|
||||
special:false,
|
||||
spareColor: '#0080C0', // 站台空闲颜色
|
||||
spareStrokeColor: '#000000', // 站台空闲描边颜色
|
||||
jumpStopColor: '#C00000', // 站台跳停颜色
|
||||
@ -403,12 +390,10 @@ class SkinCode extends defaultStyle {
|
||||
stopColor: 'yellow', // 站台列车停站颜色
|
||||
virtualColor: '#585858', // 虚拟站台颜色
|
||||
lineWidth: 3 // 站台线宽
|
||||
// relatedStatus:['trainParking', 'assignSkip', 'allSkip', 'emergencyClosed']
|
||||
},
|
||||
// 站台紧急关闭
|
||||
emergent:{
|
||||
emergentRhombus:{
|
||||
z:1,
|
||||
special:false,
|
||||
mergentR: 4, // 站台紧急关闭半径
|
||||
mergentN: 4, // 站台紧急关闭边数
|
||||
insideOffset: { x: 0, y: 25 }, // 内站台紧急关闭偏移量
|
||||
|
||||
@ -6,11 +6,12 @@ class SkinCode extends defaultStyle {
|
||||
super();
|
||||
this.fontFamily = '宋体';
|
||||
this[deviceType.Section] = {
|
||||
elemnetType:['name', 'logicText', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'separator', 'speedLimit'],
|
||||
active: {
|
||||
routeColor: false // 进路触发颜色
|
||||
},
|
||||
text: {
|
||||
show: true, // 物理区段名称显示
|
||||
name: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 18, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -21,7 +22,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
logicText: {
|
||||
show: true, // 逻辑区段名称显示
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 6, // 文字离区段距离
|
||||
fontSize: 8, // 字体大小
|
||||
@ -31,8 +32,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
standText: {
|
||||
show: true, // 站台轨名称显示
|
||||
standTrackText: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 30, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -42,8 +43,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
reentryText: {
|
||||
show: true, // 折返轨名称显示
|
||||
reentryTrackText: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 30, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -53,8 +54,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
transferText: {
|
||||
show: true, // 转换轨名称显示
|
||||
transferTrackText: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 28, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -65,7 +66,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
destinationText: {
|
||||
show: true, // 目的码名称显示
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 10, // 文字离区段距离
|
||||
fontSize: 10, // 字体大小
|
||||
@ -84,6 +85,7 @@ class SkinCode extends defaultStyle {
|
||||
lineWidthMore: 5
|
||||
},
|
||||
line: {
|
||||
z: 0,
|
||||
width: 5, // 区段宽度
|
||||
beyondWidth: 0, // 区段宽超出宽度
|
||||
invadeColor: '#EF0C08', // 区段侵入颜色
|
||||
@ -104,8 +106,8 @@ class SkinCode extends defaultStyle {
|
||||
logicalTextColor: '#FFFFFF', // 逻辑区段名称颜色 (未用)
|
||||
invalidColor: '#9C5208' // 区段ARB故障颜色
|
||||
},
|
||||
axle: {}, // 计轴
|
||||
speedLimit: { // 限速元素
|
||||
z: 2,
|
||||
width: 1, // 限速线的宽短
|
||||
distance: 5, // 限速线距离区段距离
|
||||
lineColor: '#FFFF00', // 限速线颜色
|
||||
@ -119,9 +121,6 @@ class SkinCode extends defaultStyle {
|
||||
color: '#3149C3', // 区段边界符颜色
|
||||
halfHeight: 5 // 区段分隔符高度的一半
|
||||
},
|
||||
block: {
|
||||
special: false // 区段特殊显示
|
||||
},
|
||||
trainPosition:{
|
||||
display: false // 列车实时位置显示
|
||||
}
|
||||
@ -207,46 +206,25 @@ class SkinCode extends defaultStyle {
|
||||
distance: 8, // 站台和屏蔽门之间的距离
|
||||
defaultColor: '#00FF00', // 屏蔽门默认颜色
|
||||
splitDoorColor: '#F61107' // 屏蔽门切除颜色
|
||||
},
|
||||
// 关联的后端属性
|
||||
relatedStatus:{
|
||||
// 该属性 关联的绘图元素 (注意优先级,后面的高于前面的优先级)
|
||||
'screenDoorOpenStatus':['safetyDoorNormal'],
|
||||
'fault':['safetyDoorNormal']
|
||||
}
|
||||
};
|
||||
|
||||
this[deviceType.StationStand] = {
|
||||
// 西安一/三号线 站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级 折返策略
|
||||
elemnetType:['safeStand', 'emergent', 'detainCarNormal', 'stopTime', 'level', 'reentry'],
|
||||
// // 关联的后端属性
|
||||
// relatedStatus:{
|
||||
// // 该属性 关联的绘图元素
|
||||
// 'trainParking':{
|
||||
// type:Boolean,
|
||||
// data:['safeStand']
|
||||
// },
|
||||
// 'emergencyClosed':{
|
||||
// type:Boolean,
|
||||
// data:['emergent']
|
||||
// }
|
||||
// },
|
||||
elemnetType:['solidStand', 'emergentRhombus', 'detainHollow', 'stopTime', 'level', 'reentry'],
|
||||
// 站台
|
||||
safeStand:{
|
||||
solidStand:{
|
||||
// 层级
|
||||
z:0,
|
||||
special:false,
|
||||
spareColor: '#606060', // 站台空闲颜色
|
||||
jumpStopColor: '#9A99FF', // 站台跳停颜色
|
||||
designatedJumpStopColor: 'lightSkyBlue', // 站台指定列车跳停颜色
|
||||
headFontSize: 11, // 站台首端字体大小
|
||||
stopColor: '#FEFE00' // 站台列车停站颜色
|
||||
// relatedStatus:['trainParking', 'assignSkip', 'allSkip', 'emergencyClosed'] // 关联的后端属性
|
||||
},
|
||||
// 站台紧急关闭
|
||||
emergent:{
|
||||
emergentRhombus:{
|
||||
z:1,
|
||||
special:false,
|
||||
mergentR: 4, // 站台紧急关闭半径
|
||||
mergentN: 4, // 站台紧急关闭边数
|
||||
insideOffset: { x: 0, y: 25 }, // 内站台紧急关闭偏移量
|
||||
@ -254,7 +232,7 @@ class SkinCode extends defaultStyle {
|
||||
closeColor: '#F61107' // 站台紧急关闭颜色
|
||||
},
|
||||
// 扣车元素 普通扣车
|
||||
detainCarNormal:{
|
||||
detainHollow:{
|
||||
z:0,
|
||||
position: 1, // 扣车标识在站台上显示方向
|
||||
text: 'H', // 扣车显示内容
|
||||
@ -264,7 +242,6 @@ class SkinCode extends defaultStyle {
|
||||
andCenterTrainColor: '#F61107', // 车站+中心扣车颜色
|
||||
detainTrainTextColor: '#E4EF50', // 车站扣除文字颜色
|
||||
fontSize: 11, // 字体大小
|
||||
circle: true, // 空心圆环
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
// 停站时间
|
||||
|
||||
@ -6,11 +6,12 @@ class SkinCode extends defaultStyle {
|
||||
super();
|
||||
this.fontFamily = '宋体';
|
||||
this[deviceType.Section] = {
|
||||
elemnetType:['name', 'standTrackText', 'reentryTrackText', 'transferTrackText', 'destinationText', 'line', 'axle', 'speedLimit'],
|
||||
active: {
|
||||
routeColor: false // 进路触发颜色
|
||||
},
|
||||
text: {
|
||||
show: true, // 物理区段名称显示
|
||||
name: {
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 18, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -21,7 +22,7 @@ class SkinCode extends defaultStyle {
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
logicText: { // 逻辑区段名称
|
||||
show: false, // 逻辑区段名称显示
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 6, // 文字离区段距离
|
||||
fontSize: 8, // 字体大小
|
||||
@ -31,8 +32,8 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
standText: { // 站台
|
||||
show: true, // 站台轨名称显示
|
||||
standTrackText: { // 站台名称
|
||||
z: 2,
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 30, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
@ -42,9 +43,9 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
reentryText: { // 折返
|
||||
show: true, // 折返轨名称显示
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
reentryTrackText: { // 折返名称
|
||||
z: 2,
|
||||
position: 0, // 名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 30, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
fontWeight: 'normal', // 字体粗细
|
||||
@ -53,9 +54,9 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
transferText: { // 转换轨
|
||||
show: true, // 转换轨名称显示
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
transferTrackText: { // 转换轨名称
|
||||
z: 2,
|
||||
position: 0, // 名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 30, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
fontWeight: 'normal', // 字体粗细
|
||||
@ -64,9 +65,9 @@ class SkinCode extends defaultStyle {
|
||||
textPosition: 'inside', // 文字位置
|
||||
textVerticalAlign: 'middle' // 文字垂直对齐方式
|
||||
},
|
||||
destinationText: { // 目的地
|
||||
show: true, // 目的码名称显示
|
||||
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
|
||||
destinationText: { // 目的地名称
|
||||
z: 2,
|
||||
position: 0, // 名称位置 1 上面 -1 下面 0 对称
|
||||
distance: 28, // 文字离区段距离
|
||||
fontSize: 11, // 字体大小
|
||||
fontWeight: 'bold', // 字体粗细
|
||||
@ -84,6 +85,7 @@ class SkinCode extends defaultStyle {
|
||||
lineWidthMore: 6
|
||||
},
|
||||
line: {
|
||||
z: 0,
|
||||
width: 4, // 区段宽度
|
||||
beyondWidth: 0, // 区段宽超出宽度
|
||||
invadeColor: '#FFFFFF', // 区段侵入颜色
|
||||
@ -104,7 +106,7 @@ class SkinCode extends defaultStyle {
|
||||
logicalTextColor: '#C0C0C0' // 逻辑区段名称颜色 (未用)
|
||||
},
|
||||
axle: {
|
||||
show: true, // 计轴是否显示
|
||||
z: 3,
|
||||
radius: 3, // 计轴 半径
|
||||
distance: 4, // 计轴和区段之间的距离 （未用）
|
||||
color: '#9F9C9C', // 区段计轴颜色
|
||||
@ -114,17 +116,11 @@ class SkinCode extends defaultStyle {
|
||||
lineWidth: 2
|
||||
},
|
||||
speedLimit: { // 限速元素
|
||||
z: 2,
|
||||
width: 1, // 限速线的宽度
|
||||
distance: 5, // 限速线距离区段距离
|
||||
lineColor: '#C0C000', // 限速线颜色 （黄色透明光）
|
||||
nameBackground: '#C0C000', // 限速名称背景颜色
|
||||
nameShow: true, // 名称显示
|
||||
nameNumberColor: '#C00808', // 限速值颜色
|
||||
nameNumberFontSize: 11, // 限速值大小
|
||||
kilometerColor: '#fff', // 公里标颜色
|
||||
kilometerFontSize: 8, // 公里标大小
|
||||
drogueWidth: 19, // 浮标宽度
|
||||
drogueHeight: 12 // 浮标高度
|
||||
nameShow: false // 名称显示
|
||||
},
|
||||
separator: {
|
||||
z: 3, // 分割符层级
|
||||
@ -134,9 +130,6 @@ class SkinCode extends defaultStyle {
|
||||
color: '#AAA9A9', // 区段边界符颜色
|
||||
halfHeight: 4 // 区段分隔符高度的一半
|
||||
},
|
||||
block: {
|
||||
special: false // 区段特殊显示
|
||||
},
|
||||
trainPosition:{
|
||||
display: true // 列车实时位置显示
|
||||
}
|
||||
@ -251,36 +244,25 @@ class SkinCode extends defaultStyle {
|
||||
splitDoorColor: '#009900', // 屏蔽门切除颜色
|
||||
alarmColor:'red', // 收到警报颜色
|
||||
emergencyColor:'yellow' // 紧急出发按钮激活颜色
|
||||
},
|
||||
// 关联的后端属性
|
||||
relatedStatus:{
|
||||
// 该属性 关联的绘图元素 (注意优先级,后面的高于前面的优先级)
|
||||
'screenDoorOpenStatus':['vertical2Door'],
|
||||
'fault':['vertical2Door'],
|
||||
'alarmStatus':['vertical2Door'],
|
||||
'emergencyDepart':['vertical2Door']
|
||||
}
|
||||
};
|
||||
|
||||
this[deviceType.StationStand] = {
|
||||
// 西安二号线 站台元素 站台 站台紧急关闭 扣车元素 停站时间 运行等级 跳停 模式筛选标识
|
||||
elemnetType:['safeStand', 'emergent', 'detainCircle', 'stopTime', 'level', 'jump', 'patternFilter'],
|
||||
elemnetType:['hollowStand', 'emergentCross', 'detainCircle', 'stopTime', 'level', 'jumpCircle', 'patternFilter'],
|
||||
// 站台
|
||||
safeStand:{
|
||||
hollowStand:{
|
||||
// 层级
|
||||
z:0,
|
||||
special:false,
|
||||
spareColor: '#808080', // 站台空闲颜色
|
||||
jumpStopColor: 'yellow', // 站台跳停颜色
|
||||
designatedJumpStopColor: 'yellow', // 站台指定列车跳停颜色
|
||||
headFontSize: 10, // 站台首端字体大小
|
||||
stopColor: '#808080', // 站台列车停站颜色
|
||||
standType:'notFill', // 站台的样式（NotFill为未填充，目前是西安二号线线路样式）
|
||||
doorOpenColor:'#007f00' // 车门开启状态颜色（西安二号线线路样式）
|
||||
// relatedStatus:['trainParking', 'assignSkip', 'allSkip', 'emergencyClosed']
|
||||
},
|
||||
// 站台紧急关闭
|
||||
emergent:{
|
||||
emergentCross:{
|
||||
z:1,
|
||||
special:true, // 西安二号线特殊样式
|
||||
mergentR: 9, // 站台紧急关闭半径
|
||||
@ -321,7 +303,7 @@ class SkinCode extends defaultStyle {
|
||||
textColor: '#FFF000' // 停站等级字体颜色
|
||||
},
|
||||
// 跳停
|
||||
jump: {
|
||||
jumpCircle: {
|
||||
z:1,
|
||||
position: 1, // 停跳方向
|
||||
text: '跳', // 停跳显示内容
|
||||
|
||||
@ -453,7 +453,6 @@ class Jlmap {
|
||||
} else if (elem.deviceType == 'OVERLAP') {
|
||||
const overlapRoute = this.mapDevice[elem.code];
|
||||
const model = this.mapDevice[overlapRoute.pathList[0].sectionList[0]];
|
||||
// console.log(overlapRoute.pathList[0].right, model.name, elem.remainTime);
|
||||
if (overlapRoute.pathList[0].right) {
|
||||
overlapRoute['points'] = { x: model.points[0].x, y: model.points[0].y };
|
||||
} else {
|
||||
|
||||
@ -164,6 +164,7 @@ class MouseController extends Eventful {
|
||||
|
||||
click(e) {
|
||||
var em = this.checkEvent(e);
|
||||
// console.log(em, e);
|
||||
this.trigger(this.events.Selected, em);
|
||||
}
|
||||
|
||||
|
||||
@ -161,9 +161,7 @@ class Painter {
|
||||
} else {
|
||||
const instance = device.instance;
|
||||
if (instance) {
|
||||
// 更新状态的时候传入旧的数据，以便于更新
|
||||
const oldDevice = Object.assign({}, device);
|
||||
instance.setState(transitionDeviceStatus(device), oldDevice); // 改变试图状态
|
||||
instance.setState(transitionDeviceStatus(device)); // 改变视图状态
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
|
||||
@ -28,9 +28,9 @@ export default class OverAp extends Group {
|
||||
silent: false,
|
||||
x: model.points.x + 30,
|
||||
y: model.points.y - style.Section.line.width * 2,
|
||||
fontWeight: style.Section.text.fontWeight,
|
||||
fontWeight: style.Section.name.fontWeight,
|
||||
text: model.remainTime || 30,
|
||||
textPosition: style.Section.text.textPosition,
|
||||
textPosition: style.Section.name.textPosition,
|
||||
fontSize: 12,
|
||||
fontFamily: style.fontFamily,
|
||||
textFill: '#FFF',
|
||||
|
||||
@ -55,19 +55,20 @@ class EHorizontal2Door extends Group {
|
||||
|
||||
setState(model) {
|
||||
const style = this.model.style;
|
||||
if (model.screenDoorOpenStatus == 0) {
|
||||
// 开门
|
||||
this.stand1.setStyle('fill', style.transparentColor);
|
||||
this.stand2.setStyle('fill', style.transparentColor);
|
||||
} else {
|
||||
// 关门
|
||||
this.stand1.setStyle('fill', style.Psd.horizontal2Door.defaultColor);
|
||||
this.stand2.setStyle('fill', style.Psd.horizontal2Door.defaultColor);
|
||||
}
|
||||
if (model.fault == 'FAULT_PSD_OPEN') {
|
||||
// 开门
|
||||
this.stand1.setStyle('fill', style.transparentColor);
|
||||
this.stand2.setStyle('fill', style.transparentColor);
|
||||
} else {
|
||||
if (model.screenDoorOpenStatus == 0) {
|
||||
// 开门
|
||||
this.stand1.setStyle('fill', style.transparentColor);
|
||||
this.stand2.setStyle('fill', style.transparentColor);
|
||||
} else {
|
||||
// 关门
|
||||
this.stand1.setStyle('fill', style.Psd.horizontal2Door.defaultColor);
|
||||
this.stand2.setStyle('fill', style.Psd.horizontal2Door.defaultColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,6 +13,7 @@ class ESafeDoor extends Group {
|
||||
const style = this.model.style;
|
||||
const padding = 0.1;
|
||||
|
||||
// show: model.hasDoor
|
||||
model.width = model.width || style.Psd.safetyDoorNormal.width;
|
||||
model.height = model.height || style.Psd.safetyDoorNormal.height;
|
||||
|
||||
@ -81,11 +82,12 @@ class ESafeDoor extends Group {
|
||||
}
|
||||
|
||||
setState(model) {
|
||||
model.screenDoorOpenStatus == 0 ? this.safeC.hide() : this.safeC.show();
|
||||
if (model.fault == 'FAULT_PSD_OPEN') {
|
||||
this.safeC.hide();
|
||||
const style = this.model.style;
|
||||
this.setColor(style.Psd.safetyDoorNormal.splitDoorColor);
|
||||
} else {
|
||||
model.screenDoorOpenStatus == 0 ? this.safeC.hide() : this.safeC.show();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -15,6 +15,7 @@ class EVertical2Door extends Group {
|
||||
|
||||
// x: model.position.x,
|
||||
// y: model.position.y - (model.height / 2),
|
||||
// show: model.hasDoor
|
||||
|
||||
model.width = model.width || style.Psd.vertical2Door.width;
|
||||
model.height = model.height || style.Psd.vertical2Door.height;
|
||||
@ -69,17 +70,18 @@ class EVertical2Door extends Group {
|
||||
}
|
||||
|
||||
setState(model) {
|
||||
// 关门
|
||||
const style = this.model.style;
|
||||
if (model.screenDoorOpenStatus == 0) {
|
||||
// 开门
|
||||
this.setColor(style.Psd.vertical2Door.splitDoorColor);
|
||||
} else {
|
||||
this.setColor(style.Psd.vertical2Door.defaultColor);
|
||||
}
|
||||
if (model.fault == 'FAULT_PSD_OPEN') {
|
||||
// 开门
|
||||
this.setColor(style.Psd.vertical2Door.splitDoorColor);
|
||||
} else {
|
||||
if (model.screenDoorOpenStatus == 0) {
|
||||
// 开门
|
||||
this.setColor(style.Psd.vertical2Door.splitDoorColor);
|
||||
} else {
|
||||
// 关门
|
||||
this.setColor(style.Psd.vertical2Door.defaultColor);
|
||||
}
|
||||
}
|
||||
model.alarmStatus && this.setColor(style.Psd.vertical2Door.alarmColor);
|
||||
model.emergencyDepart && this.setColor(style.Psd.vertical2Door.emergencyColor);
|
||||
|
||||
@ -3,6 +3,7 @@ import ESafeDoor from './ESafeDoor';
|
||||
import EVertical2Door from './EVertical2Door';
|
||||
import EHorizontal2Door from './EHorizontal2Door';
|
||||
import EHighlight from '../element/EHighlight';
|
||||
import {traverseLineElements} from '../utils/ShapeStatusCovert';
|
||||
|
||||
export default class Line2 extends Group {
|
||||
constructor(model, style) {
|
||||
@ -23,26 +24,14 @@ export default class Line2 extends Group {
|
||||
/** 屏蔽门*/
|
||||
const model = this.model;
|
||||
const style = this.style;
|
||||
// // 站台所有的绘图元素
|
||||
// 站台所有的绘图元素
|
||||
const elementTypeList = {
|
||||
'safetyDoorNormal':ESafeDoor, // 正常屏蔽门
|
||||
'vertical2Door':EVertical2Door, // 西安二号线屏蔽门 上下两条虚线型
|
||||
'horizontal2Door':EHorizontal2Door // 哈尔滨线路屏蔽门 左右两个
|
||||
};
|
||||
|
||||
// 遍历当前线路下的绘图元素
|
||||
const currentTypeList = style.Psd.elemnetType;
|
||||
currentTypeList.forEach(element => {
|
||||
const ClassName = elementTypeList[element];
|
||||
this[element] = new ClassName({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + style.Psd[element].z,
|
||||
style: style,
|
||||
modelData:model
|
||||
// show: model.hasDoor
|
||||
});
|
||||
this.add(this[element]);
|
||||
});
|
||||
// 遍历当前线路下的绘图元素 组合模式
|
||||
traverseLineElements(style.Psd, elementTypeList, model, style, this);
|
||||
}
|
||||
|
||||
/** 恢复初始状态*/
|
||||
@ -53,78 +42,16 @@ export default class Line2 extends Group {
|
||||
});
|
||||
}
|
||||
|
||||
// /** 开门*/
|
||||
// openDoor() {
|
||||
// this.safeDoor && this.safeDoor.hasDoor(true);
|
||||
// if (this.style.StationStand.safetyDoor.special) {
|
||||
// this.safeDoor && this.safeDoor.setColor(this.style.StationStand.safetyDoor.splitDoorColor);
|
||||
// }
|
||||
// }
|
||||
|
||||
// /** 关门*/
|
||||
// closeDoor() {
|
||||
// this.safeDoor && this.safeDoor.hasDoor(false);
|
||||
// if (this.style.StationStand.safetyDoor.special) {
|
||||
// this.recover();
|
||||
// }
|
||||
// }
|
||||
|
||||
// /** 屏蔽门正常*/
|
||||
// doorNormal() {
|
||||
// this.safeDoor && this.safeDoor.setColor(this.style.StationStand.safetyDoor.defaultColor);
|
||||
// }
|
||||
|
||||
// /** 屏蔽门故障*/
|
||||
// doorFault() {
|
||||
// this.safeDoor && this.safeDoor.setColor(this.style.StationStand.safetyDoor.splitDoorColor);
|
||||
// }
|
||||
|
||||
// /** 屏蔽门切除*/
|
||||
// doorSplit() {
|
||||
// this.safeDoor && this.safeDoor.setColor(this.style.StationStand.safetyDoor.splitDoorColor);
|
||||
// }
|
||||
|
||||
// /** 收到警报 */
|
||||
// alarm() {
|
||||
// this.safeDoor && this.safeDoor.setColor(this.style.StationStand.safetyDoor.alarmColor);
|
||||
// }
|
||||
|
||||
// /** 紧急出发按钮激活 */
|
||||
// emergencyDepart() {
|
||||
// this.safeDoor && this.safeDoor.setColor(this.style.StationStand.safetyDoor.emergencyColor);
|
||||
// }
|
||||
|
||||
setState(model, oldDevice = null) {
|
||||
setState(model) {
|
||||
this.recover();
|
||||
if (!this.isShowShape) return;
|
||||
// 后端关联属性
|
||||
const relatedStatusList = this.style.Psd.relatedStatus;
|
||||
// 后端关联属性名称list
|
||||
const statusNameList = Object.keys(relatedStatusList);
|
||||
statusNameList.forEach(statusName=>{
|
||||
// 该属性发生变化的时候更新视图
|
||||
// console.log(statusName, ',', model[statusName], ',', oldDevice[statusName] );
|
||||
// 第一次时更新（旧数据不存在，新数据存在），之后每次状态更新才会更新视图
|
||||
if (model[statusName] != undefined && (!oldDevice || (oldDevice && oldDevice[statusName] != model[statusName]))) {
|
||||
const currentModel = {};
|
||||
currentModel[statusName] = model[statusName];
|
||||
// 该属性关联的绘图元素
|
||||
this.style.Psd.relatedStatus[statusName].forEach((element)=>{
|
||||
this[element].setState(currentModel);
|
||||
});
|
||||
}
|
||||
|
||||
const currentTypeList = this.style.Psd.elemnetType;
|
||||
currentTypeList.forEach(element => {
|
||||
this[element].setState(model);
|
||||
});
|
||||
// /** 设置屏蔽门开关*/
|
||||
// if (model.fault == 'FAULT_PSD_OPEN') {
|
||||
// this.doorFault(); // 故障
|
||||
// this.openDoor();
|
||||
// } else {
|
||||
// model.screenDoorOpenStatus == 0 && this.openDoor(); /** 开门*/
|
||||
// model.screenDoorOpenStatus != 0 && this.closeDoor(); /** 关门*/
|
||||
// }
|
||||
// model.alarmStatus && this.alarm(); /** 收到警报（西安二号线样式） */
|
||||
// model.emergencyDepart && this.emergencyDepart(); /** 紧急出发按钮激活（西安二号线样式） */
|
||||
}
|
||||
|
||||
drawSelected(selected) {
|
||||
this.highlight && this.highlight.drawSelected(selected);
|
||||
}
|
||||
@ -145,7 +72,6 @@ export default class Line2 extends Group {
|
||||
item.show();
|
||||
});
|
||||
this.isShowShape = true;
|
||||
// oldDevice
|
||||
this.setState(this.model);
|
||||
} else {
|
||||
this.eachChild(item => {
|
||||
|
||||
@ -2,68 +2,98 @@ import Group from 'zrender/src/container/Group';
|
||||
import Line from 'zrender/src/graphic/shape/Line';
|
||||
import Circle from 'zrender/src/graphic/shape/Circle';
|
||||
import Isogon from 'zrender/src/graphic/shape/Isogon';
|
||||
// import Path from 'zrender/src/graphic/Path';
|
||||
import JTriangle from '../../utils/JTriangle';
|
||||
|
||||
// 计轴
|
||||
// export default Path.extend({
|
||||
// type: 'EAxle',
|
||||
// _subType: '',
|
||||
// buildPath: function (path, shape) {
|
||||
// if (shape && shape.style && shape.traingle) {
|
||||
// const axleLength = 2 * shape.style.Section.axle.radius;
|
||||
// // const positionx = shape.point.x + shape.drictx * (shape.traingle.getCos(axleLength) * 1.2);
|
||||
// // const positiony = shape.point.y + shape.dricty * (shape.traingle.getCos(axleLength) * 1.2);
|
||||
// const positionx = shape.point.x + shape.drictx * (shape.traingle.getCos(axleLength) * 1.05);
|
||||
// const positiony = shape.point.y + shape.dricty * (shape.traingle.getCos(axleLength) * 1.05);
|
||||
// // 圆弧
|
||||
// const arcX = positionx - shape.dricty * shape.traingle.getSin(axleLength);
|
||||
// const arcY = positiony + shape.drictx * shape.traingle.getSin(axleLength);
|
||||
// const arcR = shape.style.Section.axle.radius;
|
||||
// path.arc(arcX, arcY, arcR, 0, 2 * Math.PI, false);
|
||||
// path.closePath();
|
||||
//
|
||||
// const x1 = positionx - shape.traingle.getCos(axleLength * shape.multiple1) - shape.dricty * shape.traingle.getSin(axleLength);
|
||||
// const y1 = positiony + shape.drictx * shape.traingle.getSin(axleLength * shape.multiple1) - shape.traingle.getSin(axleLength);
|
||||
// const x2 = positionx + shape.traingle.getCos(axleLength * shape.multiple2) - shape.dricty * shape.traingle.getSin(axleLength);
|
||||
// const y2 = positiony + shape.drictx * shape.traingle.getSin(axleLength * shape.multiple2) + shape.traingle.getSin(axleLength);
|
||||
// path.moveTo(x1, y1);
|
||||
// path.lineTo(x2, y2);
|
||||
// path.closePath();
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
export default class EAxle111 extends Group {
|
||||
export default class EAxle extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.zlevel = model.zlevel;
|
||||
this._subType = model._subType;
|
||||
this.style = model.style;
|
||||
this.z = model.z;
|
||||
this.create(model);
|
||||
this.create();
|
||||
}
|
||||
create(model) {
|
||||
const axleLength = 2 * model.shape.style.Section.axle.radius;
|
||||
let positionx = model.shape.point.x - model.shape.dricty * (model.shape.traingle.getSin(axleLength) * 1.2);
|
||||
let positiony = model.shape.point.y + model.shape.dricty * (model.shape.traingle.getCos(axleLength) * 1.2);
|
||||
if (model.shape.difference === 0) {
|
||||
positionx += model.shape.drictx * 1;
|
||||
} else if (model.shape.difference > 0) {
|
||||
positionx -= model.shape.drictx * model.shape.traingle.getSin(1);
|
||||
positiony -= model.shape.drictx * model.shape.traingle.getCos(1);
|
||||
create() {
|
||||
const model = this.model.modelData;
|
||||
if (model.leftAxlePosition) {
|
||||
this.createAxleLeft();
|
||||
} else if (model.rightAxlePosition) {
|
||||
this.createAxleRight();
|
||||
}
|
||||
}
|
||||
|
||||
createAxleLeft() {
|
||||
const model = this.model.modelData;
|
||||
|
||||
const traingle = new JTriangle(model.points[0], model.points[1]);
|
||||
const drictx = 1;
|
||||
const dricty = model.leftAxlePosition === 1 || model.leftAxlePosition === 2 ? 1 : -1;
|
||||
const isSpecial = model.leftAxlePosition === -2 || model.leftAxlePosition === 2;
|
||||
const difference = model.points[0].y - model.points[1].y;
|
||||
let point = {};
|
||||
point = {x:model.points[0].x, y: model.points[0].y};
|
||||
if (model.leftAxleOffset) {
|
||||
point.x = point.x + model.leftAxleOffset.x || 0;
|
||||
point.y = point.y + model.leftAxleOffset.y || 0;
|
||||
}
|
||||
this.createAxle({
|
||||
traingle: traingle,
|
||||
drictx: drictx,
|
||||
dricty: dricty,
|
||||
isSpecial: isSpecial,
|
||||
point: point,
|
||||
difference: difference
|
||||
});
|
||||
}
|
||||
|
||||
createAxleRight() {
|
||||
const model = this.model.modelData;
|
||||
const length = model.points.length;
|
||||
const traingle = new JTriangle(model.points[length - 2], model.points[length - 1]);
|
||||
const drictx = -1;
|
||||
const dricty = model.rightAxlePosition === 1 || model.rightAxlePosition === 2 ? 1 : -1;
|
||||
const isSpecial = model.rightAxlePosition === -2 || model.rightAxlePosition === 2;
|
||||
const difference = model.points[length - 2].y - model.points[length - 1].y;
|
||||
|
||||
let point = {};
|
||||
point = {x:model.points[length - 1].x, y: model.points[length - 1].y};
|
||||
if (model.rightAxleOffset) {
|
||||
point.x = point.x + model.rightAxleOffset.x || 0;
|
||||
point.y = point.y + model.rightAxleOffset.y || 0;
|
||||
}
|
||||
this.createAxle({
|
||||
traingle: traingle,
|
||||
drictx: drictx,
|
||||
dricty: dricty,
|
||||
isSpecial: isSpecial,
|
||||
point: point,
|
||||
difference: difference
|
||||
});
|
||||
}
|
||||
|
||||
createAxle(modelData) {
|
||||
const style = this.model.style;
|
||||
|
||||
const axleLength = 2 * style.Section.axle.radius;
|
||||
let positionx = modelData.point.x - modelData.dricty * (modelData.traingle.getSin(axleLength) * 1.2);
|
||||
let positiony = modelData.point.y + modelData.dricty * (modelData.traingle.getCos(axleLength) * 1.2);
|
||||
if (modelData.difference === 0) {
|
||||
positionx += modelData.drictx * 1;
|
||||
} else if (modelData.difference > 0) {
|
||||
positionx -= modelData.drictx * modelData.traingle.getSin(1);
|
||||
positiony -= modelData.drictx * modelData.traingle.getCos(1);
|
||||
} else {
|
||||
positionx += model.shape.drictx * model.shape.traingle.getSin(1);
|
||||
positiony += model.shape.drictx * model.shape.traingle.getCos(1);
|
||||
positionx += modelData.drictx * modelData.traingle.getSin(1);
|
||||
positiony += modelData.drictx * modelData.traingle.getCos(1);
|
||||
}
|
||||
const x1 = positionx;
|
||||
const y1 = positiony;
|
||||
const x2 = positionx + model.shape.drictx * 9 / 2 * model.shape.style.Section.axle.radius;
|
||||
const x2 = positionx + modelData.drictx * 9 / 2 * style.Section.axle.radius;
|
||||
const y2 = positiony;
|
||||
const arcX = positionx + model.shape.drictx * 2 * model.shape.style.Section.axle.radius;
|
||||
const arcX = positionx + modelData.drictx * 2 * style.Section.axle.radius;
|
||||
const arcY = positiony;
|
||||
const angle = -model.shape.traingle.getRotation();
|
||||
const angle = -modelData.traingle.getRotation();
|
||||
|
||||
this.line = new Line({
|
||||
this.add(new Line({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
origin: [positionx, positiony],
|
||||
@ -75,58 +105,54 @@ export default class EAxle111 extends Group {
|
||||
y2:y2
|
||||
},
|
||||
style: {
|
||||
lineWidth: this.style.lineWidth,
|
||||
fill: this.style.fill,
|
||||
stroke: this.style.stroke
|
||||
lineWidth: style.Section.axle.lineWidth,
|
||||
fill: style.Section.axle.fill,
|
||||
stroke: style.Section.axle.stroke
|
||||
}
|
||||
});
|
||||
this.add(this.line);
|
||||
if (model.shape.isSpecial) {
|
||||
const brokenLineX1 = positionx + model.shape.drictx * model.shape.style.Section.axle.radius;
|
||||
const brokenLineY1 = positiony - model.shape.style.Section.axle.radius * 2 / 3;
|
||||
const brokenLineY2 = positiony + model.shape.style.Section.axle.radius * 2 / 3;
|
||||
const brokenLineX2 = positionx + model.shape.drictx * model.shape.style.Section.axle.radius * 4;
|
||||
const brokenLineY3 = positiony - model.shape.style.Section.axle.radius * 2 / 3;
|
||||
const brokenLineY4 = positiony + model.shape.style.Section.axle.radius * 2 / 3;
|
||||
const brokenLineX3 = positionx + model.shape.drictx * model.shape.style.Section.axle.radius * 4 / 3;
|
||||
const brokenLineX4 = positionx + model.shape.drictx * model.shape.style.Section.axle.radius * 11 / 3;
|
||||
const brokenLineY5 = positiony - model.shape.style.Section.axle.radius;
|
||||
const brokenLineY6 = positiony + model.shape.style.Section.axle.radius;
|
||||
this.isogonOutside = new Isogon({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
}));
|
||||
// this.add(this.line);
|
||||
if (modelData.isSpecial) {
|
||||
const brokenLineX1 = positionx + modelData.drictx * style.Section.axle.radius;
|
||||
const brokenLineY1 = positiony - style.Section.axle.radius * 2 / 3;
|
||||
const brokenLineY2 = positiony + style.Section.axle.radius * 2 / 3;
|
||||
const brokenLineX2 = positionx + modelData.drictx * style.Section.axle.radius * 4;
|
||||
const brokenLineY3 = positiony - style.Section.axle.radius * 2 / 3;
|
||||
const brokenLineY4 = positiony + style.Section.axle.radius * 2 / 3;
|
||||
const brokenLineX3 = positionx + modelData.drictx * style.Section.axle.radius * 4 / 3;
|
||||
const brokenLineX4 = positionx + modelData.drictx * style.Section.axle.radius * 11 / 3;
|
||||
const brokenLineY5 = positiony - style.Section.axle.radius;
|
||||
const brokenLineY6 = positiony + style.Section.axle.radius;
|
||||
this.add(new Isogon({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
origin: [positionx, positiony],
|
||||
rotation:angle,
|
||||
// origin: [arcX, arcY],
|
||||
// rotation:Math.PI / 8,
|
||||
shape: {
|
||||
x: arcX,
|
||||
y: arcY,
|
||||
r: model.shape.style.Section.axle.radius,
|
||||
r: style.Section.axle.radius,
|
||||
n: 8
|
||||
},
|
||||
style: {
|
||||
fill: this.style.fill
|
||||
fill: style.Section.axle.fill
|
||||
}
|
||||
});
|
||||
this.isogonInside = new Isogon({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z + 1,
|
||||
}));
|
||||
this.add(new Isogon({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 1,
|
||||
origin: [positionx, positiony],
|
||||
rotation:angle,
|
||||
// origin: [arcX, arcY],
|
||||
// rotation:Math.PI / 4,
|
||||
shape: {
|
||||
x: arcX,
|
||||
y: arcY,
|
||||
r: model.shape.style.Section.axle.radius / 2,
|
||||
r: style.Section.axle.radius / 2,
|
||||
n: 4
|
||||
},
|
||||
style: {
|
||||
fill: '#000'
|
||||
}
|
||||
});
|
||||
this.line1 = new Line({
|
||||
}));
|
||||
this.add(new Line({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
origin: [positionx, positiony],
|
||||
@ -139,11 +165,11 @@ export default class EAxle111 extends Group {
|
||||
},
|
||||
style: {
|
||||
lineWidth: 1,
|
||||
fill: this.style.fill,
|
||||
stroke: this.style.stroke
|
||||
fill: style.Section.axle.fill,
|
||||
stroke: style.Section.axle.stroke
|
||||
}
|
||||
});
|
||||
this.line2 = new Line({
|
||||
}));
|
||||
this.add(new Line({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
origin: [positionx, positiony],
|
||||
@ -156,11 +182,11 @@ export default class EAxle111 extends Group {
|
||||
},
|
||||
style: {
|
||||
lineWidth: 1,
|
||||
fill: this.style.fill,
|
||||
stroke: this.style.stroke
|
||||
fill: style.Section.axle.fill,
|
||||
stroke: style.Section.axle.stroke
|
||||
}
|
||||
});
|
||||
this.line3 = new Line({
|
||||
}));
|
||||
this.add(new Line({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
origin: [positionx, positiony],
|
||||
@ -173,11 +199,11 @@ export default class EAxle111 extends Group {
|
||||
},
|
||||
style: {
|
||||
lineWidth: 1,
|
||||
fill: this.style.fill,
|
||||
stroke: this.style.stroke
|
||||
fill: style.Section.axle.fill,
|
||||
stroke: style.Section.axle.stroke
|
||||
}
|
||||
});
|
||||
this.line4 = new Line({
|
||||
}));
|
||||
this.add(new Line({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
origin: [positionx, positiony],
|
||||
@ -190,11 +216,11 @@ export default class EAxle111 extends Group {
|
||||
},
|
||||
style: {
|
||||
lineWidth: 1,
|
||||
fill: this.style.fill,
|
||||
stroke: this.style.stroke
|
||||
fill: style.Section.axle.fill,
|
||||
stroke: style.Section.axle.stroke
|
||||
}
|
||||
});
|
||||
this.line5 = new Line({
|
||||
}));
|
||||
this.add(new Line({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
origin: [positionx, positiony],
|
||||
@ -207,11 +233,11 @@ export default class EAxle111 extends Group {
|
||||
},
|
||||
style: {
|
||||
lineWidth: 1,
|
||||
fill: this.style.fill,
|
||||
stroke: this.style.stroke
|
||||
fill: style.Section.axle.fill,
|
||||
stroke: style.Section.axle.stroke
|
||||
}
|
||||
});
|
||||
this.line6 = new Line({
|
||||
}));
|
||||
this.add(new Line({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
origin: [positionx, positiony],
|
||||
@ -224,49 +250,68 @@ export default class EAxle111 extends Group {
|
||||
},
|
||||
style: {
|
||||
lineWidth: 1,
|
||||
fill: this.style.fill,
|
||||
stroke: this.style.stroke
|
||||
fill: style.Section.axle.fill,
|
||||
stroke: style.Section.axle.stroke
|
||||
}
|
||||
});
|
||||
this.add(this.isogonInside);
|
||||
this.add(this.isogonOutside);
|
||||
this.add(this.line1);
|
||||
this.add(this.line2);
|
||||
this.add(this.line3);
|
||||
this.add(this.line4);
|
||||
this.add(this.line5);
|
||||
this.add(this.line6);
|
||||
}));
|
||||
// this.add(this.isogonInside);
|
||||
// this.add(this.isogonOutside);
|
||||
// this.add(this.line1);
|
||||
// this.add(this.line2);
|
||||
// this.add(this.line3);
|
||||
// this.add(this.line4);
|
||||
// this.add(this.line5);
|
||||
// this.add(this.line6);
|
||||
} else {
|
||||
this.circle = new Circle({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
this.add(new Circle({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
origin: [positionx, positiony],
|
||||
rotation:angle,
|
||||
shape: {
|
||||
cx: arcX,
|
||||
cy: arcY,
|
||||
r: model.shape.style.Section.axle.radius
|
||||
r: style.Section.axle.radius
|
||||
},
|
||||
style: {
|
||||
fill: this.style.fill
|
||||
fill: style.Section.axle.fill
|
||||
}
|
||||
});
|
||||
this.add(this.circle);
|
||||
}));
|
||||
// this.add(this.circle);
|
||||
}
|
||||
}
|
||||
|
||||
setStyle(styles) {
|
||||
if (this.model.shape.isSpecial) {
|
||||
this.isogonOutside.setStyle(styles);
|
||||
this.line1.setStyle(styles);
|
||||
this.line2.setStyle(styles);
|
||||
this.line3.setStyle(styles);
|
||||
this.line4.setStyle(styles);
|
||||
this.line5.setStyle(styles);
|
||||
this.line6.setStyle(styles);
|
||||
} else {
|
||||
this.circle.setStyle(styles);
|
||||
}
|
||||
this.line.setStyle(styles);
|
||||
// if (this.isSpecial) {
|
||||
// this.eachChild((child) => {
|
||||
// if (child.setStyle) {
|
||||
// child.setStyle(styles);
|
||||
// }
|
||||
// });
|
||||
// this.isogonOutside && this.isogonOutside.setStyle(styles);
|
||||
// this.isogonInside && this.isogonInside.setStyle(styles);
|
||||
// this.line1 && this.line1.setStyle(styles);
|
||||
// this.line2 && this.line2.setStyle(styles);
|
||||
// this.line3 && this.line3.setStyle(styles);
|
||||
// this.line4 && this.line4.setStyle(styles);
|
||||
// this.line5 && this.line5.setStyle(styles);
|
||||
// this.line6 && this.line6.setStyle(styles);
|
||||
// } else {
|
||||
// this.circle && this.circle.setStyle(styles);
|
||||
// }
|
||||
// this.line && this.line.setStyle(styles);
|
||||
this.eachChild((child) => {
|
||||
if (child && child.setStyle) {
|
||||
child.setStyle(styles);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
recover() {
|
||||
|
||||
}
|
||||
|
||||
setState() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,91 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Path from 'zrender/src/graphic/Path';
|
||||
|
||||
export default class EBackArrowGroup extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.zlevel = model.zlevel;
|
||||
this.z = model.z;
|
||||
this.create();
|
||||
}
|
||||
create() {
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
if (model.reentryTrack && style.Section.shuttleBack) {
|
||||
const radius = 3;
|
||||
model.drict = 1; // 箭头朝向 (是折返轨加一个方向选择) 目前在区段右边
|
||||
const width = style.Section.line.width * 2;
|
||||
const height = style.Section.line.width * 1;
|
||||
const turnBackDistance = style.Section.shuttleBack.distance + radius * 4;
|
||||
|
||||
const points = model.points;
|
||||
let x = -model.drict * width * 1.2;
|
||||
let y = -turnBackDistance;
|
||||
|
||||
if (model.drict < 0) {
|
||||
x += points[0].x;
|
||||
y += points[0].y;
|
||||
} else {
|
||||
x += points[points.length - 1].x;
|
||||
y += points[points.length - 1].y;
|
||||
}
|
||||
|
||||
this.turnBack = new EBackArrow({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
shape: {
|
||||
drict: model.drict,
|
||||
width: width,
|
||||
height: height,
|
||||
points: {
|
||||
x: x,
|
||||
y: y
|
||||
}
|
||||
},
|
||||
style: {
|
||||
lineWidth: style.Section.shuttleBack.width,
|
||||
stroke: style.Section.shuttleBack.color,
|
||||
fill: 'rgba(0, 0, 0, 0)'
|
||||
}
|
||||
});
|
||||
this.turnBackriangle = new EBackArrowTriangle({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
shape: {
|
||||
drict: model.drict,
|
||||
width: width,
|
||||
height: height,
|
||||
points: {
|
||||
x: x,
|
||||
y: y
|
||||
}
|
||||
},
|
||||
style: {
|
||||
lineWidth: style.Section.shuttleBack.width,
|
||||
stroke: style.Section.shuttleBack.color,
|
||||
fill: style.Section.shuttleBack.color
|
||||
}
|
||||
});
|
||||
this.add(this.turnBack);
|
||||
this.add(this.turnBackriangle);
|
||||
this.turnBack.hide();
|
||||
this.turnBackriangle.hide();
|
||||
}
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.turnBack.hide();
|
||||
this.turnBackriangle.hide();
|
||||
}
|
||||
|
||||
show() {
|
||||
this.turnBack.show();
|
||||
this.turnBackriangle.show();
|
||||
}
|
||||
}
|
||||
// 成都三号线 折返进路
|
||||
export const EBackArrow = Path.extend({
|
||||
const EBackArrow = Path.extend({
|
||||
type: 'EBackArrow',
|
||||
shape: {
|
||||
points: null
|
||||
@ -24,7 +108,7 @@ export const EBackArrow = Path.extend({
|
||||
});
|
||||
|
||||
// 箭头
|
||||
export const EBackArrowTriangle = Path.extend({
|
||||
const EBackArrowTriangle = Path.extend({
|
||||
type: 'EBackArrowTriangle',
|
||||
shape: {
|
||||
points: null
|
||||
|
||||
@ -3,78 +3,6 @@ import BezierCurve from 'zrender/src/graphic/shape/BezierCurve';
|
||||
import Line from 'zrender/src/graphic/shape/Line';
|
||||
import JTriangle from '../../utils/JTriangle';
|
||||
import Vue from 'vue';
|
||||
// import Path from 'zrender/src/graphic/Path';
|
||||
|
||||
// 创建区段限速限集合
|
||||
// export default const ELimitLines = Path.extend({
|
||||
// type: 'ELimitLines',
|
||||
// shape: {
|
||||
// points: null
|
||||
// },
|
||||
// buildPath: function (ctx, model) {
|
||||
// /** 创建区段*/
|
||||
// if (model && model.points.length > 1) {
|
||||
// if (model.isCurve) {
|
||||
// ctx.beginPath();
|
||||
// const shape = {};
|
||||
// for (let i = 1; i < (model.points.length - 1); i++) {
|
||||
// shape[`cpx${i}`] = model.points[i].x;
|
||||
// shape[`cpy${i}`] = model.points[i].y;
|
||||
// }
|
||||
// shape[`x1`] = model.points[0].x;
|
||||
// shape[`y1`] = model.points[0].y;
|
||||
// shape[`x2`] = model.points[model.points.length - 1].x;
|
||||
// shape[`y2`] = model.points[model.points.length - 1].y;
|
||||
|
||||
// ctx.moveTo(shape[`x1`], shape[`y1`]);
|
||||
// if (model.points.length <= 3) {
|
||||
// ctx.quadraticCurveTo(shape[`cpx1`], shape[`cpy1`], shape[`x2`], shape[`y2`]);
|
||||
// } else {
|
||||
// ctx.bezierCurveTo(shape[`cpx1`], shape[`cpy1`], shape[`cpx2`], shape[`cpy2`], shape[`x2`], shape[`y2`]);
|
||||
// }
|
||||
// } else {
|
||||
// const swPadding = model.style.Switch.core.length; // 定位和反位时区段距离岔芯的距离
|
||||
// var switchWidth = model.style.Section.line.width + model.style.Section.line.beyondWidth; // 道岔宽度
|
||||
// const beg = Object.assign({}, model.points[0]);
|
||||
// const end = Object.assign({}, model.points[model.points.length - 1]);
|
||||
// if (model.isSwitchSection && beg.y !== end.y) {
|
||||
// const swch = model.switch;
|
||||
// if (swch) {
|
||||
// const traingle = new JTriangle(swch.intersection, swch.skew);
|
||||
// if ((swch.intersection.x === beg.x) && (swch.intersection.y === beg.y)) {
|
||||
// beg.x = beg.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate();
|
||||
// beg.y = beg.y + traingle.dricty * (swPadding + switchWidth);
|
||||
// }
|
||||
|
||||
// if ((swch.intersection.x === end.x) && (swch.intersection.y === end.y)) {
|
||||
// end.x = end.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate();
|
||||
// end.y = end.y + traingle.dricty * (swPadding + switchWidth);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// if (model.points.length == 2) {
|
||||
// ctx.moveTo(beg.x, beg.y);
|
||||
// ctx.lineTo(end.x, end.y);
|
||||
// ctx.closePath();
|
||||
// } else {
|
||||
// ctx.moveTo(beg.x, beg.y);
|
||||
// ctx.lineTo(model.points[1].x, model.points[1].y);
|
||||
// ctx.closePath();
|
||||
|
||||
// for (let i = 1; i < (model.points.length - 2); i++) {
|
||||
// ctx.moveTo(model.points[i].x, model.points[i].y);
|
||||
// ctx.lineTo(model.points[i + 1].x, model.points[i + 1].y);
|
||||
// ctx.closePath();
|
||||
// }
|
||||
// ctx.moveTo(model.points[model.points.length - 2].x, model.points[model.points.length - 2].y);
|
||||
// ctx.lineTo(end.x, end.y);
|
||||
// ctx.closePath();
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
export default class ELimitLines extends Group {
|
||||
constructor(model) {
|
||||
@ -82,136 +10,187 @@ export default class ELimitLines extends Group {
|
||||
this.model = model;
|
||||
this.zlevel = model.zlevel;
|
||||
this.z = model.z;
|
||||
this.create(model);
|
||||
this.create();
|
||||
}
|
||||
|
||||
create(model) {
|
||||
create() {
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
/** 创建区段*/
|
||||
if (model && model.points.length > 1) {
|
||||
if (model.isCurve) {
|
||||
const shape = {};
|
||||
for (let i = 1; i < (model.points.length - 1); i++) {
|
||||
shape[`cpx${i}`] = model.points[i].x;
|
||||
shape[`cpy${i}`] = model.points[i].y;
|
||||
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
|
||||
let x = traingle.drictx * (style.Section.speedLimit.distance) * traingle.getSinRate();
|
||||
let y = traingle.dricty * (style.Section.speedLimit.distance) * traingle.getCosRate();
|
||||
if (x == Infinity) { x = 0; }
|
||||
if (y == Infinity) { y = 0; }
|
||||
if (model.switch) {
|
||||
// 上侧临时限速线
|
||||
const speedLimitLeft = this.createLimit({
|
||||
position: [x, -y],
|
||||
switch: model.switch,
|
||||
code: model.code,
|
||||
isSwitchSection: model.switchSection,
|
||||
relSwitchCode: model.relSwitchCode,
|
||||
isCurve: model.curve, // 是否曲线
|
||||
points: model.points
|
||||
});
|
||||
// 下侧临时限速线
|
||||
const speedLimitRight = this.createLimit({
|
||||
position: [-x, y],
|
||||
switch: model.switch,
|
||||
code: model.code,
|
||||
isSwitchSection: model.switchSection,
|
||||
relSwitchCode: model.relSwitchCode,
|
||||
isCurve: model.curve, // 是否曲线
|
||||
points: model.points
|
||||
});
|
||||
speedLimitLeft.forEach(item => {
|
||||
this.add(item);
|
||||
});
|
||||
speedLimitRight.forEach(item => {
|
||||
this.add(item);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
createLimit(model) {
|
||||
const style = this.model.style;
|
||||
const dataList = [];
|
||||
if (model.isCurve) {
|
||||
const shape = {};
|
||||
for (let i = 1; i < (model.points.length - 1); i++) {
|
||||
shape[`cpx${i}`] = model.points[i].x;
|
||||
shape[`cpy${i}`] = model.points[i].y;
|
||||
}
|
||||
|
||||
shape[`x1`] = model.points[0].x;
|
||||
shape[`y1`] = model.points[0].y;
|
||||
shape[`x2`] = model.points[model.points.length - 1].x;
|
||||
shape[`y2`] = model.points[model.points.length - 1].y;
|
||||
|
||||
dataList.push(new BezierCurve({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
progressive: model.progressive,
|
||||
z: this.z,
|
||||
culling: true,
|
||||
shape: shape,
|
||||
position: model.position,
|
||||
style: {
|
||||
lineWidth: style.Section.speedLimit.width,
|
||||
stroke: style.Section.speedLimit.lineColor,
|
||||
fillOpacity: 0
|
||||
}
|
||||
}));
|
||||
} else {
|
||||
const swPadding = style.Switch.core.length; // 定位和反位时区段距离岔芯的距离
|
||||
var switchWidth = style.Section.line.width + style.Section.line.beyondWidth; // 道岔宽度
|
||||
const beg = Object.assign({}, model.points[0]);
|
||||
const end = Object.assign({}, model.points[model.points.length - 1]);
|
||||
if (model.isSwitchSection && beg.y !== end.y) {
|
||||
const swch = Vue.prototype.$jlmap.mapDevice[model.switch.code]; // 获取道岔model 及状态数据
|
||||
|
||||
shape[`x1`] = model.points[0].x;
|
||||
shape[`y1`] = model.points[0].y;
|
||||
shape[`x2`] = model.points[model.points.length - 1].x;
|
||||
shape[`y2`] = model.points[model.points.length - 1].y;
|
||||
if (swch && swch.instance) {
|
||||
const traingle = new JTriangle(swch.intersection, swch.skew);
|
||||
if ((swch.intersection.x === beg.x) && (swch.intersection.y === beg.y) && !swch.normalPosition && swch.sectionCCode == model.code) {
|
||||
beg.x = beg.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate();
|
||||
beg.y = beg.y + traingle.dricty * (swPadding + switchWidth);
|
||||
}
|
||||
|
||||
this.add(new BezierCurve({
|
||||
if ((swch.intersection.x === end.x) && (swch.intersection.y === end.y) && swch.normalPosition && swch.sectionCCode == model.code) {
|
||||
end.x = end.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate();
|
||||
end.y = end.y + traingle.dricty * (swPadding + switchWidth);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (model.points.length == 2) {
|
||||
dataList.push(new Line({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
progressive: model.progressive,
|
||||
z: this.z,
|
||||
culling: true,
|
||||
shape: shape,
|
||||
position: model.position,
|
||||
shape: {
|
||||
x1: beg.x,
|
||||
y1: beg.y,
|
||||
x2: end.x,
|
||||
y2: end.y
|
||||
},
|
||||
style: {
|
||||
lineWidth: model.style.Section.speedLimit.width,
|
||||
stroke: model.style.Section.speedLimit.lineColor,
|
||||
fillOpacity: 0
|
||||
lineWidth: style.Section.speedLimit.width,
|
||||
stroke: style.Section.speedLimit.lineColor
|
||||
}
|
||||
}));
|
||||
} else {
|
||||
const swPadding = model.style.Switch.core.length; // 定位和反位时区段距离岔芯的距离
|
||||
var switchWidth = model.style.Section.line.width + model.style.Section.line.beyondWidth; // 道岔宽度
|
||||
const beg = Object.assign({}, model.points[0]);
|
||||
const end = Object.assign({}, model.points[model.points.length - 1]);
|
||||
if (model.isSwitchSection && beg.y !== end.y) {
|
||||
const swch = Vue.prototype.$jlmap.mapDevice[model.switch.code]; // 获取道岔model 及状态数据
|
||||
|
||||
if (swch && swch.instance) {
|
||||
const traingle = new JTriangle(swch.intersection, swch.skew);
|
||||
if ((swch.intersection.x === beg.x) && (swch.intersection.y === beg.y) && !swch.normalPosition && swch.sectionCCode == model.code) {
|
||||
beg.x = beg.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate();
|
||||
beg.y = beg.y + traingle.dricty * (swPadding + switchWidth);
|
||||
}
|
||||
|
||||
if ((swch.intersection.x === end.x) && (swch.intersection.y === end.y) && swch.normalPosition && swch.sectionCCode == model.code) {
|
||||
end.x = end.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate();
|
||||
end.y = end.y + traingle.dricty * (swPadding + switchWidth);
|
||||
}
|
||||
dataList.push(new Line({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
progressive: model.progressive,
|
||||
z: this.z,
|
||||
position: model.position,
|
||||
shape: {
|
||||
x1: beg.x,
|
||||
y1: beg.y,
|
||||
x2: model.points[1].x,
|
||||
y2: model.points[1].y
|
||||
},
|
||||
style: {
|
||||
lineWidth: style.Section.speedLimit.width,
|
||||
stroke: style.Section.speedLimit.lineColor
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
||||
if (model.points.length == 2) {
|
||||
this.add(new Line({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
progressive: model.progressive,
|
||||
z: this.z,
|
||||
position: model.position,
|
||||
shape: {
|
||||
x1: beg.x,
|
||||
y1: beg.y,
|
||||
x2: end.x,
|
||||
y2: end.y
|
||||
},
|
||||
style: {
|
||||
lineWidth: model.style.Section.speedLimit.width,
|
||||
stroke: model.style.Section.speedLimit.lineColor
|
||||
}
|
||||
}));
|
||||
} else {
|
||||
this.add(new Line({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
progressive: model.progressive,
|
||||
z: this.z,
|
||||
position: model.position,
|
||||
shape: {
|
||||
x1: beg.x,
|
||||
y1: beg.y,
|
||||
x2: model.points[1].x,
|
||||
y2: model.points[1].y
|
||||
},
|
||||
style: {
|
||||
lineWidth: model.style.Section.speedLimit.width,
|
||||
stroke: model.style.Section.speedLimit.lineColor
|
||||
}
|
||||
}));
|
||||
|
||||
for (let i = 1; i < (model.points.length - 2); i++) {
|
||||
this.add(new Line({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
progressive: model.progressive,
|
||||
position: model.position,
|
||||
shape: {
|
||||
x1: model.points[i].x,
|
||||
y1: model.points[i].y,
|
||||
x2: model.points[i + 1].x,
|
||||
y2: model.points[i + 1].y
|
||||
},
|
||||
style: {
|
||||
lineWidth: model.style.Section.speedLimit.width,
|
||||
stroke: model.style.Section.speedLimit.lineColor
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
this.add(new Line({
|
||||
for (let i = 1; i < (model.points.length - 2); i++) {
|
||||
dataList.push(new Line({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
position: model.position,
|
||||
progressive: model.progressive,
|
||||
position: model.position,
|
||||
shape: {
|
||||
x1: model.points[model.points.length - 2].x,
|
||||
y1: model.points[model.points.length - 2].y,
|
||||
x2: end.x,
|
||||
y2: end.y
|
||||
x1: model.points[i].x,
|
||||
y1: model.points[i].y,
|
||||
x2: model.points[i + 1].x,
|
||||
y2: model.points[i + 1].y
|
||||
},
|
||||
style: {
|
||||
lineWidth: model.style.Section.speedLimit.width,
|
||||
stroke: model.style.Section.speedLimit.lineColor
|
||||
lineWidth: style.Section.speedLimit.width,
|
||||
stroke: style.Section.speedLimit.lineColor
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
dataList.push(new Line({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
position: model.position,
|
||||
progressive: model.progressive,
|
||||
shape: {
|
||||
x1: model.points[model.points.length - 2].x,
|
||||
y1: model.points[model.points.length - 2].y,
|
||||
x2: end.x,
|
||||
y2: end.y
|
||||
},
|
||||
style: {
|
||||
lineWidth: style.Section.speedLimit.width,
|
||||
stroke: style.Section.speedLimit.lineColor
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
return dataList;
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.eachChild((child) => {
|
||||
child.hide();
|
||||
});
|
||||
}
|
||||
show() {
|
||||
this.eachChild((child) => {
|
||||
child.show();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,91 +1,110 @@
|
||||
// import Path from 'zrender/src/graphic/Path';
|
||||
|
||||
// 成都三号线 临时限速名称显示
|
||||
// export const ELimitName = Path.extend({
|
||||
// type: 'ELimitName',
|
||||
// shape: {
|
||||
// points: null
|
||||
// },
|
||||
// buildPath: function (ctx, shape) {
|
||||
// const points = shape.points;
|
||||
// const y = points.y - 15;
|
||||
// ctx.moveTo(points.x, y);
|
||||
// ctx.lineTo(points.x - shape.drict * shape.style.Section.speedLimit.drogueWidth, y);
|
||||
// ctx.lineTo(points.x - shape.drict * (shape.style.Section.speedLimit.drogueWidth + 5), y - 5);
|
||||
// ctx.lineTo(points.x - shape.drict * shape.style.Section.speedLimit.drogueWidth, y - 10);
|
||||
// ctx.lineTo(points.x, y - 10);
|
||||
// ctx.lineTo(points.x, y);
|
||||
// }
|
||||
// });
|
||||
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Text from 'zrender/src/graphic/Text';
|
||||
import Polygon from 'zrender/src/graphic/shape/Polygon';
|
||||
|
||||
export default class ELimitName extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.zlevel = model.zlevel;
|
||||
this.z = model.z;
|
||||
this.create(model);
|
||||
}
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.zlevel = model.zlevel;
|
||||
this.z = model.z;
|
||||
this.create();
|
||||
}
|
||||
|
||||
create(model) {
|
||||
const rectW = model.style.Section.speedLimit.drogueWidth;
|
||||
const rectH = model.style.Section.speedLimit.drogueHeight;
|
||||
this.add(new Polygon({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 9,
|
||||
shape: {
|
||||
points: [
|
||||
[model.x, model.y],
|
||||
[model.x - model.drict * rectW, model.y],
|
||||
[model.x - model.drict * (rectW + rectH / 2), model.y - rectH / 2],
|
||||
[model.x - model.drict * rectW, model.y - rectH],
|
||||
[model.x, model.y - rectH]
|
||||
]
|
||||
},
|
||||
style: {
|
||||
lineWidth: 0,
|
||||
fill: model.style.Section.speedLimit.nameBackground
|
||||
}
|
||||
}));
|
||||
create() {
|
||||
/** 创建区段*/
|
||||
const model = this.model.modelData;
|
||||
// 开头 起点位置
|
||||
const speedLimitNameLeft = this.createName({
|
||||
drict: -1,
|
||||
x: model.points[0].x,
|
||||
y: model.points[0].y - 15
|
||||
});
|
||||
// 终点位置
|
||||
const speedLimitNameRight = this.createName({
|
||||
drict: 1,
|
||||
x: model.points[model.points.length - 1].x,
|
||||
y: model.points[model.points.length - 1].y - 15
|
||||
});
|
||||
speedLimitNameLeft.forEach(item => {
|
||||
this.add(item);
|
||||
});
|
||||
speedLimitNameRight.forEach(item => {
|
||||
this.add(item);
|
||||
});
|
||||
}
|
||||
|
||||
// 公里标内容
|
||||
this.add(new Text({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 10,
|
||||
style: {
|
||||
x: model.x - model.drict * 2,
|
||||
y: model.y,
|
||||
fontWeight: 'normal',
|
||||
fontSize: model.style.Section.speedLimit.nameNumberFontSize,
|
||||
fontFamily: model.style.fontFamily,
|
||||
text: '15',
|
||||
textFill: model.style.Section.speedLimit.nameNumberColor,
|
||||
textAlign: model.drict == -1 ? 'left' : 'right',
|
||||
textPosition: model.style.Section.text.textPosition || 'inside',
|
||||
textVerticalAlign: 'bottom'
|
||||
}
|
||||
}));
|
||||
createName(model) {
|
||||
const dataList = [];
|
||||
const style = this.model.style;
|
||||
|
||||
// 公里值
|
||||
this.add(new Text({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 10,
|
||||
style: {
|
||||
x: model.x,
|
||||
y: model.y + 12,
|
||||
fontWeight: 'normal',
|
||||
fontSize: model.style.Section.speedLimit.kilometerFontSize,
|
||||
fontFamily: model.style.fontFamily,
|
||||
text: '17.981km',
|
||||
textFill: model.style.Section.speedLimit.kilometerColor,
|
||||
textAlign: model.drict == -1 ? 'left' : 'right',
|
||||
textPosition: model.style.Section.text.textPosition || 'inside',
|
||||
textVerticalAlign: 'bottom'
|
||||
}
|
||||
}));
|
||||
}
|
||||
const rectW = style.Section.speedLimitName.drogueWidth;
|
||||
const rectH = style.Section.speedLimitName.drogueHeight;
|
||||
|
||||
dataList.push(new Polygon({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 9,
|
||||
shape: {
|
||||
points: [
|
||||
[model.x, model.y],
|
||||
[model.x - model.drict * rectW, model.y],
|
||||
[model.x - model.drict * (rectW + rectH / 2), model.y - rectH / 2],
|
||||
[model.x - model.drict * rectW, model.y - rectH],
|
||||
[model.x, model.y - rectH]
|
||||
]
|
||||
},
|
||||
style: {
|
||||
lineWidth: 0,
|
||||
fill: style.Section.speedLimitName.nameBackground
|
||||
}
|
||||
}));
|
||||
|
||||
// 公里标内容
|
||||
dataList.push(new Text({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 10,
|
||||
style: {
|
||||
x: model.x - model.drict * 2,
|
||||
y: model.y,
|
||||
fontWeight: 'normal',
|
||||
fontSize: style.Section.speedLimitName.nameNumberFontSize,
|
||||
fontFamily: style.fontFamily,
|
||||
text: '15',
|
||||
textFill: style.Section.speedLimitName.nameNumberColor,
|
||||
textAlign: model.drict == -1 ? 'left' : 'right',
|
||||
textPosition: style.Section.name.textPosition || 'inside',
|
||||
textVerticalAlign: 'bottom'
|
||||
}
|
||||
}));
|
||||
|
||||
// 公里值
|
||||
dataList.push(new Text({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 10,
|
||||
style: {
|
||||
x: model.x,
|
||||
y: model.y + 12,
|
||||
fontWeight: 'normal',
|
||||
fontSize: style.Section.speedLimitName.kilometerFontSize,
|
||||
fontFamily: style.fontFamily,
|
||||
text: '17.981km',
|
||||
textFill: style.Section.speedLimitName.kilometerColor,
|
||||
textAlign: model.drict == -1 ? 'left' : 'right',
|
||||
textPosition: style.Section.name.textPosition || 'inside',
|
||||
textVerticalAlign: 'bottom'
|
||||
}
|
||||
}));
|
||||
return dataList;
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.eachChild((child) => {
|
||||
child.hide();
|
||||
});
|
||||
}
|
||||
show() {
|
||||
this.eachChild((child) => {
|
||||
child.show();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,29 +12,44 @@ export default class ELines extends Group {
|
||||
this.zlevel = model.zlevel;
|
||||
this.z = model.z;
|
||||
this.sections = [];
|
||||
this.create(model);
|
||||
this.create();
|
||||
}
|
||||
|
||||
create(model) {
|
||||
create() {
|
||||
const model = this.model.modelData;
|
||||
// 创建区段 model.logicSectionCodeList 为空 或 0 表明没有逻辑区段 创建 否则过滤
|
||||
if ((model.type == '01' && (!model.logicSectionCodeList || !model.logicSectionCodeList.length)) || model.type == '02' || model.type == '03') {
|
||||
this.createLine();
|
||||
}
|
||||
}
|
||||
|
||||
createLine() {
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
|
||||
const Z = model.type == '02' ? this.z + 1 : this.z;
|
||||
|
||||
const modelPoints = model.type == '04' ? [model.namePosition, model.namePosition] : model.points;
|
||||
const isCurve = model.curve;
|
||||
/** 创建区段*/
|
||||
if (model && model.points.length > 1) {
|
||||
if (model && modelPoints.length > 1) {
|
||||
let stroke;
|
||||
stroke = model.style.Section.line.spareColor;
|
||||
if (model.style.Section.line.isActiveShow) {
|
||||
stroke = '#2EBFBF';
|
||||
stroke = style.Section.line.spareColor;
|
||||
if (this.model.type == 'lineBorder') {
|
||||
stroke = style.Section.lineBorder.activeStroke;
|
||||
}
|
||||
|
||||
if (model.isCurve) {
|
||||
if (isCurve) {
|
||||
const shape = {};
|
||||
for (let i = 1; i < (model.points.length - 1); i++) {
|
||||
shape[`cpx${i}`] = model.points[i].x;
|
||||
shape[`cpy${i}`] = model.points[i].y;
|
||||
for (let i = 1; i < (modelPoints.length - 1); i++) {
|
||||
shape[`cpx${i}`] = modelPoints[i].x;
|
||||
shape[`cpy${i}`] = modelPoints[i].y;
|
||||
}
|
||||
|
||||
shape[`x1`] = model.points[0].x;
|
||||
shape[`y1`] = model.points[0].y;
|
||||
shape[`x2`] = model.points[model.points.length - 1].x;
|
||||
shape[`y2`] = model.points[model.points.length - 1].y;
|
||||
shape[`x1`] = modelPoints[0].x;
|
||||
shape[`y1`] = modelPoints[0].y;
|
||||
shape[`x2`] = modelPoints[modelPoints.length - 1].x;
|
||||
shape[`y2`] = modelPoints[modelPoints.length - 1].y;
|
||||
this.section = new BezierCurve({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
@ -44,157 +59,157 @@ export default class ELines extends Group {
|
||||
culling: false,
|
||||
shape: shape,
|
||||
style: {
|
||||
lineWidth: model.style.Section.line.width,
|
||||
lineWidth: style.Section.line.width,
|
||||
stroke: stroke
|
||||
}
|
||||
});
|
||||
this.add(this.section);
|
||||
} else {
|
||||
const points = [];
|
||||
for (let i = 0; i < model.points.length; i++) {
|
||||
points.push([model.points[i].x, model.points[i].y]);
|
||||
for (let i = 0; i < modelPoints.length; i++) {
|
||||
points.push([modelPoints[i].x, modelPoints[i].y]);
|
||||
}
|
||||
this.section = new Polyline({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
progressive: model.progressive,
|
||||
z: this.z,
|
||||
z: Z,
|
||||
shape: {
|
||||
points: points
|
||||
},
|
||||
style: {
|
||||
lineWidth: model.style.Section.line.width,
|
||||
lineWidth: style.Section.line.width,
|
||||
stroke: stroke
|
||||
}
|
||||
});
|
||||
this.add(this.section);
|
||||
}
|
||||
if (model.style.Section.topWithLine && !model.isCurve) {
|
||||
if (style.Section.topWithLine && !isCurve) {
|
||||
const topPoints = [];
|
||||
for (let i = 0; i < model.points.length; i++) {
|
||||
topPoints.push([model.points[i].x, model.points[i].y - model.style.Section.line.width / 2 - model.style.Section.topWithLine.width / 2]);
|
||||
for (let i = 0; i < modelPoints.length; i++) {
|
||||
topPoints.push([modelPoints[i].x, modelPoints[i].y - style.Section.line.width / 2 - style.Section.topWithLine.width / 2]);
|
||||
}
|
||||
this.topWithSection = new Polyline({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
progressive: model.progressive,
|
||||
z: this.z,
|
||||
z: Z,
|
||||
shape: {
|
||||
points: topPoints
|
||||
},
|
||||
style: {
|
||||
lineWidth: model.style.Section.topWithLine.width,
|
||||
stroke: model.style.Section.topWithLine.defaultColor
|
||||
lineWidth: style.Section.topWithLine.width,
|
||||
stroke: style.Section.topWithLine.defaultColor
|
||||
}
|
||||
});
|
||||
this.add(this.topWithSection);
|
||||
this.topWithSection.hide();
|
||||
}
|
||||
if (model.style.Section.bottomWithLine && !model.isCurve) {
|
||||
if (style.Section.bottomWithLine && !isCurve) {
|
||||
const bottomPoints = [];
|
||||
for (let i = 0; i < model.points.length; i++) {
|
||||
bottomPoints.push([model.points[i].x, model.points[i].y + model.style.Section.line.width / 2 + model.style.Section.bottomWithLine.width / 2]);
|
||||
for (let i = 0; i < modelPoints.length; i++) {
|
||||
bottomPoints.push([modelPoints[i].x, modelPoints[i].y + style.Section.line.width / 2 + style.Section.bottomWithLine.width / 2]);
|
||||
}
|
||||
this.bottomWithSection = new Polyline({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
progressive: model.progressive,
|
||||
z: this.z,
|
||||
z: Z,
|
||||
shape: {
|
||||
points: bottomPoints
|
||||
},
|
||||
style: {
|
||||
lineWidth: model.style.Section.bottomWithLine.width,
|
||||
stroke: model.style.Section.bottomWithLine.defaultColor
|
||||
lineWidth: style.Section.bottomWithLine.width,
|
||||
stroke: style.Section.bottomWithLine.defaultColor
|
||||
}
|
||||
});
|
||||
this.add(this.bottomWithSection);
|
||||
this.bottomWithSection.hide();
|
||||
}
|
||||
|
||||
if (model.style.Section.routeArrow && !model.isCurve) {
|
||||
if (style.Section.routeArrow && !isCurve) {
|
||||
const cPointLeft = {x: 0, y:0};
|
||||
const cPointRight = {x: 0, y:0};
|
||||
const pointsLeft = [];
|
||||
const pointsRight = [];
|
||||
const length = this.model.points.length;
|
||||
const triangleLeft = new JTriangle(this.model.points[0], this.model.points[1]);
|
||||
cPointLeft.x = this.model.points[0].x + triangleLeft.getCos(model.style.Section.routeArrow.radius);
|
||||
cPointLeft.y = this.model.points[0].y + triangleLeft.getSin(model.style.Section.routeArrow.radius);
|
||||
const length = modelPoints.length;
|
||||
const triangleLeft = new JTriangle(modelPoints[0], modelPoints[1]);
|
||||
cPointLeft.x = modelPoints[0].x + triangleLeft.getCos(style.Section.routeArrow.radius);
|
||||
cPointLeft.y = modelPoints[0].y + triangleLeft.getSin(style.Section.routeArrow.radius);
|
||||
for (let i = 0; i < length; i++) {
|
||||
if (i === 0) {
|
||||
pointsLeft.push([cPointLeft.x, cPointLeft.y]);
|
||||
} else {
|
||||
pointsLeft.push([model.points[i].x, model.points[i].y]);
|
||||
pointsLeft.push([modelPoints[i].x, modelPoints[i].y]);
|
||||
}
|
||||
}
|
||||
|
||||
const triangleRight = new JTriangle(this.model.points[length - 2], this.model.points[length - 1 ]);
|
||||
cPointRight.x = this.model.points[length - 1].x - triangleRight.getCos(model.style.Section.routeArrow.radius);
|
||||
cPointRight.y = this.model.points[length - 1].y - triangleRight.getSin(model.style.Section.routeArrow.radius);
|
||||
const triangleRight = new JTriangle(modelPoints[length - 2], modelPoints[length - 1 ]);
|
||||
cPointRight.x = modelPoints[length - 1].x - triangleRight.getCos(style.Section.routeArrow.radius);
|
||||
cPointRight.y = modelPoints[length - 1].y - triangleRight.getSin(style.Section.routeArrow.radius);
|
||||
for (let i = 0; i < length; i++) {
|
||||
if (i === length - 1) {
|
||||
pointsRight.push([cPointRight.x, cPointRight.y]);
|
||||
} else {
|
||||
pointsRight.push([model.points[i].x, model.points[i].y]);
|
||||
pointsRight.push([modelPoints[i].x, modelPoints[i].y]);
|
||||
}
|
||||
}
|
||||
this.routeArrowLeft = new Isogon({
|
||||
zlevel: this.zlevel,
|
||||
origin: [cPointLeft.x, cPointLeft.y],
|
||||
rotation: Math.PI / 2 - triangleLeft.getRotation(),
|
||||
z: this.z + 9,
|
||||
z: Z + 9,
|
||||
shape: {
|
||||
x: cPointLeft.x,
|
||||
y: cPointLeft.y,
|
||||
r: model.style.Section.routeArrow.radius,
|
||||
r: style.Section.routeArrow.radius,
|
||||
n: 3
|
||||
},
|
||||
style: {
|
||||
lineWidth: model.style.Section.routeArrow.arrowLineWidth,
|
||||
stroke: model.style.Section.routeArrow.defaultArrowStroke,
|
||||
fill: model.style.Section.routeArrow.defaultArrowFill
|
||||
lineWidth: style.Section.routeArrow.arrowLineWidth,
|
||||
stroke: style.Section.routeArrow.defaultArrowStroke,
|
||||
fill: style.Section.routeArrow.defaultArrowFill
|
||||
}
|
||||
});
|
||||
this.routeArrowRight = new Isogon({
|
||||
zlevel: this.zlevel,
|
||||
origin: [cPointLeft.x, cPointLeft.y],
|
||||
rotation: -Math.PI / 2 - triangleRight.getRotation(),
|
||||
z: this.z + 9,
|
||||
z: Z + 9,
|
||||
shape: {
|
||||
x: cPointRight.x,
|
||||
y: cPointRight.y,
|
||||
r: model.style.Section.routeArrow.radius,
|
||||
r: style.Section.routeArrow.radius,
|
||||
n: 3
|
||||
},
|
||||
style: {
|
||||
lineWidth: model.style.Section.routeArrow.arrowLineWidth,
|
||||
stroke: model.style.Section.routeArrow.defaultArrowStroke,
|
||||
fill: model.style.Section.routeArrow.defaultArrowFill
|
||||
lineWidth: style.Section.routeArrow.arrowLineWidth,
|
||||
stroke: style.Section.routeArrow.defaultArrowStroke,
|
||||
fill: style.Section.routeArrow.defaultArrowFill
|
||||
}
|
||||
});
|
||||
this.routeLineLeft = new Polyline({
|
||||
zlevel: this.zlevel,
|
||||
progressive: model.progressive,
|
||||
z: this.z,
|
||||
z: Z,
|
||||
shape: {
|
||||
points: pointsLeft
|
||||
},
|
||||
style: {
|
||||
lineWidth: model.style.Section.routeArrow.lineWidth,
|
||||
stroke: model.style.Section.routeArrow.defaultLineStroke
|
||||
lineWidth: style.Section.routeArrow.lineWidth,
|
||||
stroke: style.Section.routeArrow.defaultLineStroke
|
||||
}
|
||||
});
|
||||
this.routeLineRight = new Polyline({
|
||||
zlevel: this.zlevel,
|
||||
progressive: model.progressive,
|
||||
z: this.z,
|
||||
z: Z,
|
||||
shape: {
|
||||
points: pointsRight
|
||||
},
|
||||
style: {
|
||||
lineWidth: model.style.Section.routeArrow.lineWidth,
|
||||
stroke: model.style.Section.routeArrow.defaultLineStroke
|
||||
lineWidth: style.Section.routeArrow.lineWidth,
|
||||
stroke: style.Section.routeArrow.defaultLineStroke
|
||||
}
|
||||
});
|
||||
this.add(this.routeArrowLeft);
|
||||
@ -210,21 +225,11 @@ export default class ELines extends Group {
|
||||
}
|
||||
|
||||
setStyle(styles) {
|
||||
// this.eachChild((child) => {
|
||||
// if (child.setStyle && child.isLine) {
|
||||
// child.setStyle(styles);
|
||||
// }
|
||||
// });
|
||||
this.section.setStyle(styles);
|
||||
this.section && this.section.setStyle(styles);
|
||||
}
|
||||
|
||||
setZleve(lev) {
|
||||
// this.eachChild((child) => {
|
||||
// if (child.setStyle && child.isLine) {
|
||||
// child.attr('z', lev);
|
||||
// }
|
||||
// });
|
||||
this.section.attr('z', lev);
|
||||
this.section && this.section.attr('z', lev);
|
||||
}
|
||||
|
||||
hide() {
|
||||
@ -233,24 +238,11 @@ export default class ELines extends Group {
|
||||
});
|
||||
}
|
||||
show() {
|
||||
// this.eachChild((child) => {
|
||||
// // console.log(child);
|
||||
// child.show();
|
||||
// });
|
||||
this.section && this.section.show();
|
||||
}
|
||||
|
||||
animateStyle(loop, animates) {
|
||||
if (animates && animates.length) {
|
||||
// this.eachChild((child) => {
|
||||
// if (child.animateStyle && child.isLine) {
|
||||
// let an = child.animateStyle(loop);
|
||||
// animates.forEach(elem => {
|
||||
// an = an.when(elem.time, elem.styles);
|
||||
// });
|
||||
// an.start();
|
||||
// }
|
||||
// });
|
||||
if (this.section.animateStyle && this.section.isLine) {
|
||||
let an = this.section.animateStyle(loop);
|
||||
animates.forEach(elem => {
|
||||
@ -356,6 +348,16 @@ export default class ELines extends Group {
|
||||
this.routeArrowRight && this.routeArrowRight.setStyle({ fill: this.model.style.Section.routeArrow.defaultLineStroke });
|
||||
}
|
||||
getBoundingRect() {
|
||||
return this.section.getBoundingRect().clone();
|
||||
if (this.section) {
|
||||
return this.section.getBoundingRect().clone();
|
||||
}
|
||||
}
|
||||
|
||||
recover() {
|
||||
|
||||
}
|
||||
|
||||
setState() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,62 +15,66 @@ class EMouse extends Group {
|
||||
// 名称的包围框
|
||||
if (this.device.name && this.device.style.Section.mouseOverStyle.nameShow) {
|
||||
const rect = this.device.name.getBoundingRect();
|
||||
this.sectionTextBorder = new Rect({
|
||||
zlevel: this.device.zlevel,
|
||||
z: this.device.z + 4,
|
||||
shape: rect,
|
||||
style: {
|
||||
lineDash: [3, 3],
|
||||
stroke: '#fff', // 白色
|
||||
fill: this.device.model.sectionType == '02' ? this.device.style.Section.line.logicalColor : '#00FFFF' // 蓝色
|
||||
}
|
||||
});
|
||||
this.add(this.sectionTextBorder);
|
||||
this.sectionTextBorder.hide();
|
||||
if (rect) {
|
||||
this.sectionTextBorder = new Rect({
|
||||
zlevel: this.device.zlevel,
|
||||
z: this.device.z + 4,
|
||||
shape: rect,
|
||||
style: {
|
||||
lineDash: [3, 3],
|
||||
stroke: '#fff', // 白色
|
||||
fill: this.device.model.sectionType == '02' ? this.device.style.Section.line.logicalColor : '#00FFFF' // 蓝色
|
||||
}
|
||||
});
|
||||
this.add(this.sectionTextBorder);
|
||||
this.sectionTextBorder.hide();
|
||||
|
||||
const fontSize = this.device.model.type == '02' ? this.device.style.Section.text.fontSize + 2 : this.device.style.Section.text.fontSize;
|
||||
this.TextName = new Text({
|
||||
zlevel: this.device.zlevel,
|
||||
z: this.device.z + 4,
|
||||
style: {
|
||||
x: rect.x + (rect.width / 2),
|
||||
y: rect.y + (rect.height / 2),
|
||||
fontWeight: 'normal',
|
||||
fontSize: fontSize,
|
||||
fontFamily: this.device.style.fontFamily,
|
||||
text: this.device.model.name,
|
||||
textFill: '#000',
|
||||
textAlign: this.device.style.Section.text.textAlign,
|
||||
textPosition: this.device.style.Section.text.textPosition || 'inside',
|
||||
textVerticalAlign: this.device.style.Section.text.textVerticalAlign || null
|
||||
}
|
||||
});
|
||||
this.add(this.TextName);
|
||||
this.TextName.hide();
|
||||
const fontSize = this.device.model.type == '02' ? this.device.style.Section.name.fontSize + 2 : this.device.style.Section.name.fontSize;
|
||||
this.TextName = new Text({
|
||||
zlevel: this.device.zlevel,
|
||||
z: this.device.z + 4,
|
||||
style: {
|
||||
x: rect.x + (rect.width / 2),
|
||||
y: rect.y + (rect.height / 2),
|
||||
fontWeight: 'normal',
|
||||
fontSize: fontSize,
|
||||
fontFamily: this.device.style.fontFamily,
|
||||
text: this.device.model.name,
|
||||
textFill: '#000',
|
||||
textAlign: this.device.style.Section.name.textAlign,
|
||||
textPosition: this.device.style.Section.name.textPosition || 'inside',
|
||||
textVerticalAlign: this.device.style.Section.name.textVerticalAlign || null
|
||||
}
|
||||
});
|
||||
this.add(this.TextName);
|
||||
this.TextName.hide();
|
||||
}
|
||||
}
|
||||
// 区段包围框
|
||||
if (this.device.section) {
|
||||
if (this.device.model.curve) {
|
||||
const rect = this.device.section.getBoundingRect();
|
||||
rect.height = rect.height + this.device.style.Section.mouseOverStyle.lineWidthMore;
|
||||
const shape = {
|
||||
x: rect.x,
|
||||
y: rect.y - this.device.style.Section.mouseOverStyle.lineWidthMore / 2,
|
||||
width: rect.width,
|
||||
height: rect.height
|
||||
};
|
||||
this.lineBorder = new Rect({
|
||||
zlevel: this.device.zlevel,
|
||||
z: this.device.z - 1,
|
||||
shape: shape,
|
||||
style: {
|
||||
lineDash: this.device.style.Section.mouseOverStyle.lineDash,
|
||||
stroke: this.device.style.Section.mouseOverStyle.borderColor,
|
||||
fill: this.device.style.transparentColor
|
||||
}
|
||||
});
|
||||
this.add(this.lineBorder);
|
||||
this.lineBorder.hide();
|
||||
if (rect) {
|
||||
rect.height = rect.height + this.device.style.Section.mouseOverStyle.lineWidthMore;
|
||||
const shape = {
|
||||
x: rect.x,
|
||||
y: rect.y - this.device.style.Section.mouseOverStyle.lineWidthMore / 2,
|
||||
width: rect.width,
|
||||
height: rect.height
|
||||
};
|
||||
this.lineBorder = new Rect({
|
||||
zlevel: this.device.zlevel,
|
||||
z: this.device.z - 1,
|
||||
shape: shape,
|
||||
style: {
|
||||
lineDash: this.device.style.Section.mouseOverStyle.lineDash,
|
||||
stroke: this.device.style.Section.mouseOverStyle.borderColor,
|
||||
fill: this.device.style.transparentColor
|
||||
}
|
||||
});
|
||||
this.add(this.lineBorder);
|
||||
this.lineBorder.hide();
|
||||
}
|
||||
} else {
|
||||
const model = this.device.model;
|
||||
let points = [];
|
||||
|
||||
@ -1,72 +0,0 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Line from 'zrender/src/graphic/shape/Line';
|
||||
|
||||
/** 延时释放*/
|
||||
export default class ERelease extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.isNew = false;
|
||||
|
||||
}
|
||||
|
||||
create() {
|
||||
if (!this.isNew) {
|
||||
const model = this.model;
|
||||
|
||||
this.isNew = true;
|
||||
this.lines = new Line({
|
||||
zlevel: model.zlevel,
|
||||
z: model.z,
|
||||
shape: model.shape,
|
||||
progressive: model.progressive,
|
||||
style: {
|
||||
lineWidth: model.lineWidth,
|
||||
stroke: model.stroke
|
||||
}
|
||||
});
|
||||
this.add(this.lines);
|
||||
}
|
||||
}
|
||||
|
||||
setStyle(model) {
|
||||
this.create();
|
||||
this.lines.setStyle(model);
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.create();
|
||||
this.lines.hide();
|
||||
}
|
||||
|
||||
show() {
|
||||
this.create();
|
||||
this.lines.show();
|
||||
}
|
||||
|
||||
// 开始动画
|
||||
animateStyle(loop, animates) {
|
||||
this.create();
|
||||
if (animates && animates.length) {
|
||||
this.eachChild((child) => {
|
||||
if (child.animateStyle) {
|
||||
let an = child.animateStyle(loop);
|
||||
animates.forEach(elem => {
|
||||
an = an.when(elem.time, elem.styles);
|
||||
});
|
||||
an.start();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 结束动画
|
||||
stopAnimation(flag) {
|
||||
this.create();
|
||||
this.eachChild((child) => {
|
||||
if (child.stopAnimation) {
|
||||
child.stopAnimation(flag);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Polyline from 'zrender/src/graphic/shape/Polyline';
|
||||
import Circle from 'zrender/src/graphic/shape/Circle';
|
||||
import JTriangle from '../../utils/JTriangle';
|
||||
|
||||
/** 分隔符*/
|
||||
export default class ESeparator extends Group {
|
||||
@ -10,15 +11,48 @@ export default class ESeparator extends Group {
|
||||
this.zlevel = model.zlevel;
|
||||
this.z = model.z || 6;
|
||||
this.style = model.style;
|
||||
this.setType();
|
||||
this.create();
|
||||
}
|
||||
|
||||
createModel(points, lineWidth, stroke) {
|
||||
const model = this.model;
|
||||
this.partition = new Polyline({
|
||||
create() {
|
||||
/** 创建区段*/
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
if (model && style && model.points && model.points.length > 1) {
|
||||
/** 创建左侧分隔符*/
|
||||
const traingleLeft = new JTriangle(model.points[0], model.points[1]);
|
||||
this.lPartition = this.setType({
|
||||
traingle: traingleLeft,
|
||||
point: {
|
||||
x: model.points[0].x,
|
||||
y: model.points[0].y
|
||||
},
|
||||
sepType: model.sepTypeLeft,
|
||||
drict: -1 // 方向
|
||||
});
|
||||
|
||||
/** 创建右侧分隔符*/
|
||||
const traingleRight = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]);
|
||||
this.rPartition = this.setType({
|
||||
traingle: traingleRight,
|
||||
point: {
|
||||
x: model.points[model.points.length - 1].x,
|
||||
y: model.points[model.points.length - 1].y
|
||||
},
|
||||
sepType: model.sepTypeRight,
|
||||
drict: 1 // 方向
|
||||
});
|
||||
this.add(this.lPartition);
|
||||
this.add(this.rPartition);
|
||||
}
|
||||
}
|
||||
|
||||
createModel(modelData, points, lineWidth, stroke) {
|
||||
const partition = new Polyline({
|
||||
zlevel: this.zlevel,
|
||||
progressive: model.progressive,
|
||||
z: this.z,
|
||||
origin: [modelData.point.x, modelData.point.y],
|
||||
rotation: Math.PI * 2 - Math.atan2(modelData.traingle.absy, modelData.traingle.absx) * modelData.traingle.drictx * modelData.traingle.dricty,
|
||||
shape: {
|
||||
points: points
|
||||
},
|
||||
@ -27,19 +61,19 @@ export default class ESeparator extends Group {
|
||||
stroke: stroke || this.style.Section.separator.color
|
||||
}
|
||||
});
|
||||
this.add(this.partition);
|
||||
return partition;
|
||||
}
|
||||
|
||||
// 创建 侵限分隔符
|
||||
createCircle() {
|
||||
const model = this.model;
|
||||
this.circle = new Circle({
|
||||
createCircle(modelData) {
|
||||
const partition = new Circle({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
progressive: model.progressive,
|
||||
origin: [modelData.point.x, modelData.point.y],
|
||||
rotation: Math.PI * 2 - Math.atan2(modelData.traingle.absy, modelData.traingle.absx) * modelData.traingle.drictx * modelData.traingle.dricty,
|
||||
shape: {
|
||||
cx: model.point.x,
|
||||
cy: model.point.y,
|
||||
cx: modelData.point.x,
|
||||
cy: modelData.point.y,
|
||||
r: this.style.Section.line.width
|
||||
},
|
||||
style: {
|
||||
@ -48,18 +82,18 @@ export default class ESeparator extends Group {
|
||||
fill: this.style.transparentColor
|
||||
}
|
||||
});
|
||||
this.add(this.circle);
|
||||
return partition;
|
||||
}
|
||||
|
||||
createCircleArc() {
|
||||
const model = this.model;
|
||||
this.circleArc = new Circle({
|
||||
createCircleArc(modelData) {
|
||||
const partition = new Circle({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
progressive: model.progressive,
|
||||
origin: [modelData.point.x, modelData.point.y],
|
||||
rotation: Math.PI * 2 - Math.atan2(modelData.traingle.absy, modelData.traingle.absx) * modelData.traingle.drictx * modelData.traingle.dricty,
|
||||
shape: {
|
||||
cx: model.point.x,
|
||||
cy: model.point.y,
|
||||
cx: modelData.point.x,
|
||||
cy: modelData.point.y,
|
||||
r: this.style.Section.line.width + 2
|
||||
},
|
||||
style: {
|
||||
@ -68,47 +102,44 @@ export default class ESeparator extends Group {
|
||||
fill: this.style.transparentColor
|
||||
}
|
||||
});
|
||||
this.add(this.circleArc);
|
||||
return partition;
|
||||
}
|
||||
|
||||
setType() {
|
||||
const type = this.model.sepType;
|
||||
const model = this.model;
|
||||
if (model && this.style && model.traingle) {
|
||||
setType(modelData) {
|
||||
const style = this.model.style;
|
||||
const type = modelData.sepType;
|
||||
|
||||
if (modelData && style && modelData.traingle) {
|
||||
let partition = null;
|
||||
if (type === '01') { // 普通分割
|
||||
const points = [
|
||||
[model.point.x, model.point.y - (this.style.Section.separator.halfHeight)],
|
||||
[model.point.x, model.point.y + (this.style.Section.separator.halfHeight)]
|
||||
[modelData.point.x, modelData.point.y - (style.Section.separator.halfHeight)],
|
||||
[modelData.point.x, modelData.point.y + (style.Section.separator.halfHeight)]
|
||||
];
|
||||
this.createModel(points);
|
||||
partition = this.createModel(modelData, points);
|
||||
} else if (type === '02') { // 单侧分割符
|
||||
const points = [
|
||||
[model.point.x + model.drict * (this.style.Section.separator.halfHeight), model.point.y - (this.style.Section.separator.halfHeight * 1.5)],
|
||||
[model.point.x, model.point.y - (this.style.Section.separator.halfHeight * 1.5)],
|
||||
[model.point.x, model.point.y + (this.style.Section.separator.halfHeight * 1.5)]
|
||||
[modelData.point.x + modelData.drict * (style.Section.separator.halfHeight), modelData.point.y - (style.Section.separator.halfHeight * 1.5)],
|
||||
[modelData.point.x, modelData.point.y - (style.Section.separator.halfHeight * 1.5)],
|
||||
[modelData.point.x, modelData.point.y + (style.Section.separator.halfHeight * 1.5)]
|
||||
];
|
||||
this.createModel(points);
|
||||
partition = this.createModel(modelData, points);
|
||||
} else if (type === '03') { // 尽头分隔符
|
||||
const points = [
|
||||
[model.point.x + model.drict * (this.style.Section.separator.halfHeight) * 1.2, model.point.y - (this.style.Section.separator.halfHeight * 1.2)],
|
||||
[model.point.x, model.point.y - (this.style.Section.separator.halfHeight * 1.2)],
|
||||
[model.point.x, model.point.y + (this.style.Section.separator.halfHeight * 1.2)],
|
||||
[model.point.x + model.drict * (this.style.Section.separator.halfHeight) * 1.2, model.point.y + (this.style.Section.separator.halfHeight * 1.2)]
|
||||
[modelData.point.x + modelData.drict * (style.Section.separator.halfHeight) * 1.2, modelData.point.y - (style.Section.separator.halfHeight * 1.2)],
|
||||
[modelData.point.x, modelData.point.y - (style.Section.separator.halfHeight * 1.2)],
|
||||
[modelData.point.x, modelData.point.y + (style.Section.separator.halfHeight * 1.2)],
|
||||
[modelData.point.x + modelData.drict * (style.Section.separator.halfHeight) * 1.2, modelData.point.y + (style.Section.separator.halfHeight * 1.2)]
|
||||
];
|
||||
const lineWidth = this.style.Section.separator.endWidth;
|
||||
const stroke = this.style.Section.separator.endColor;
|
||||
this.createModel(points, lineWidth, stroke);
|
||||
const lineWidth = style.Section.separator.endWidth;
|
||||
const stroke = style.Section.separator.endColor;
|
||||
partition = this.createModel(modelData, points, lineWidth, stroke);
|
||||
} else if (type === '04') { // 侵限分隔符
|
||||
this.createCircle();
|
||||
partition = this.createCircle(modelData);
|
||||
} else if (type === '05') { // 特色分隔符
|
||||
this.createCircleArc();
|
||||
partition = this.createCircleArc(modelData);
|
||||
}
|
||||
}
|
||||
|
||||
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(); // 可以无需调用
|
||||
return partition;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,39 +14,51 @@ export default class EStopRouteImg extends Group {
|
||||
this.create();
|
||||
}
|
||||
create() {
|
||||
const image = new Image(5, 8);
|
||||
image.src = Stop_Route;
|
||||
|
||||
image.decode()
|
||||
.then(() => {
|
||||
const pattern = new Pattern(image, 'repeat');
|
||||
for (let i = 1; i < this.model.points.length; i++) {
|
||||
const triangle = new JTriangle(this.model.points[i - 1], this.model.points[i]);
|
||||
this.stopRouteImgList.push(new Rect({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 1,
|
||||
origin: [this.model.points[i - 1].x, this.model.points[i - 1].y],
|
||||
rotation: -triangle.getRotation(),
|
||||
shape: {
|
||||
x: this.model.points[i - 1].x,
|
||||
y: this.model.points[i - 1].y - this.model.style.Section.line.width / 2,
|
||||
width: triangle.getLength(),
|
||||
height: this.model.style.Section.line.width
|
||||
},
|
||||
style: {
|
||||
fill: pattern
|
||||
}
|
||||
}));
|
||||
}
|
||||
this.stopRouteImgList.forEach(item => {
|
||||
this.add(item);
|
||||
item.hide();
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
const modelPoints = model.points;
|
||||
if (model.type !== '04') {
|
||||
const image = new Image(5, 8);
|
||||
image.src = Stop_Route;
|
||||
image.decode()
|
||||
.then(() => {
|
||||
const pattern = new Pattern(image, 'repeat');
|
||||
for (let i = 1; i < modelPoints.length; i++) {
|
||||
const triangle = new JTriangle(modelPoints[i - 1], modelPoints[i]);
|
||||
this.stopRouteImgList.push(new Rect({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 1,
|
||||
origin: [modelPoints[i - 1].x, modelPoints[i - 1].y],
|
||||
rotation: -triangle.getRotation(),
|
||||
shape: {
|
||||
x: modelPoints[i - 1].x,
|
||||
y: modelPoints[i - 1].y - style.Section.line.width / 2,
|
||||
width: triangle.getLength(),
|
||||
height: style.Section.line.width
|
||||
},
|
||||
style: {
|
||||
fill: pattern
|
||||
}
|
||||
}));
|
||||
}
|
||||
this.stopRouteImgList.forEach(item => {
|
||||
this.add(item);
|
||||
item.hide();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
setModel(dx, dy) {
|
||||
}
|
||||
setCursor(mouseStyle) {
|
||||
this.imageBg.attr('cursor', mouseStyle);
|
||||
}
|
||||
|
||||
recover() {
|
||||
|
||||
}
|
||||
|
||||
setState() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
163
src/jmapNew/shape/Section/ETextName.js
Normal file
163
src/jmapNew/shape/Section/ETextName.js
Normal file
@ -0,0 +1,163 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Text from 'zrender/src/graphic/Text';
|
||||
import JTriangle from '../../utils/JTriangle';
|
||||
|
||||
class ETextName extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.create();
|
||||
}
|
||||
|
||||
create() {
|
||||
const model = this.model.modelData;
|
||||
const styleModel = this.model.style.Section[this.model.type];
|
||||
let styleX = '';
|
||||
let styleY = '';
|
||||
let styleName = '';
|
||||
let isCreate = false;
|
||||
let isShow = false;
|
||||
|
||||
// 计算区段坐标位置
|
||||
const x = Math.min(model.points[0].x, model.points[model.points.length - 1].x) + Math.abs(model.points[model.points.length - 1].x - model.points[0].x) / 2;
|
||||
const y = Math.min(model.points[0].y, model.points[model.points.length - 1].y) + Math.abs(model.points[model.points.length - 1].y - model.points[0].y) / 2;
|
||||
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
|
||||
const drict = model.trainPosType != '01' ? 1 : -1;
|
||||
if (this.model.type == 'name') {
|
||||
if (model.type == '01') { // 物理区段名称
|
||||
const tempx = x + traingle.getSin(styleModel.distance);
|
||||
const tempy = y + traingle.getCos(styleModel.distance) * (styleModel.position || drict);
|
||||
styleX = tempx + model.namePosition.x;
|
||||
styleY = tempy + model.namePosition.y;
|
||||
isCreate = true;
|
||||
} else if (model.type == '04') { // 道岔计轴区段
|
||||
styleX = x + model.namePosition.x;
|
||||
styleY = y + model.namePosition.y + styleModel.distance * drict;
|
||||
isCreate = true;
|
||||
}
|
||||
styleName = model.name;
|
||||
if (model.nameShow) {
|
||||
isShow = true;
|
||||
}
|
||||
}
|
||||
// 逻辑区段
|
||||
if (this.model.type == 'logicText' && model.type == '02') {
|
||||
const tempx = x + traingle.getSin(styleModel.distance);
|
||||
const tempy = y + traingle.getCos(styleModel.distance) * (styleModel.position || drict);
|
||||
styleX = tempx + model.namePosition.x;
|
||||
styleY = tempy + model.namePosition.y;
|
||||
styleName = model.name;
|
||||
isCreate = true;
|
||||
if (model.nameShow) {
|
||||
isShow = true;
|
||||
}
|
||||
}
|
||||
// 站台轨名称
|
||||
if (this.model.type == 'standTrackText') {
|
||||
if (model.standTrack && model.standTrackName) {
|
||||
isCreate = true;
|
||||
const tempx = x + traingle.getSin(styleModel.distance);
|
||||
const tempy = y + traingle.getCos(styleModel.distance) * (styleModel.position || drict);
|
||||
styleX = tempx + model.standTrackNamePosition.x;
|
||||
styleY = tempy + model.standTrackNamePosition.y;
|
||||
styleName = model.standTrackName;
|
||||
}
|
||||
if (model.standTrackNameShow) {
|
||||
isShow = true;
|
||||
}
|
||||
}
|
||||
// 折返轨名称
|
||||
if (this.model.type == 'reentryTrackText') {
|
||||
if (model.reentryTrack && model.reentryTrackName) {
|
||||
isCreate = true;
|
||||
const tempx = x + traingle.getSin(styleModel.distance);
|
||||
const tempy = y + traingle.getCos(styleModel.distance) * (styleModel.position || drict);
|
||||
styleX = tempx + model.reentryTrackNamePosition.x;
|
||||
styleY = tempy + model.reentryTrackNamePosition.y;
|
||||
styleName = model.reentryTrackName;
|
||||
}
|
||||
if (model.reentryTrackNameShow) {
|
||||
isShow = true;
|
||||
}
|
||||
}
|
||||
// 转换轨名称
|
||||
if (this.model.type == 'transferTrackText') {
|
||||
if (model.transferTrack && model.transferTrackName) {
|
||||
isCreate = true;
|
||||
const tempx = x + traingle.getSin(styleModel.distance);
|
||||
const tempy = y + traingle.getCos(styleModel.distance) * (styleModel.position || drict);
|
||||
styleX = tempx + model.transferTrackNamePosition.x;
|
||||
styleY = tempy + model.transferTrackNamePosition.y;
|
||||
styleName = model.transferTrackName;
|
||||
}
|
||||
if (model.transferTrackNameShow) {
|
||||
isShow = true;
|
||||
}
|
||||
}
|
||||
// 目的码名称
|
||||
if (this.model.type == 'destinationText') {
|
||||
if (model.destinationCode) {
|
||||
isCreate = true;
|
||||
let tempx = x + traingle.getSin(styleModel.distance);
|
||||
let tempy = y + traingle.getCos(styleModel.distance) * (styleModel.position || drict);
|
||||
if (!tempx || !tempy) {
|
||||
tempx = 0;
|
||||
tempy = 0;
|
||||
}
|
||||
styleX = tempx + model.destinationCodePoint.x;
|
||||
styleY = tempy + model.destinationCodePoint.y;
|
||||
styleName = model.destinationCode;
|
||||
}
|
||||
if (model.destinationNameShow) {
|
||||
isShow = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (isCreate) {
|
||||
this.text = new Text({
|
||||
_subType: 'Text',
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
silent: model.silent || false,
|
||||
style: {
|
||||
x: styleX,
|
||||
y: styleY,
|
||||
fontWeight: styleModel.fontWeight || 'normal',
|
||||
fontSize: styleModel.fontSize,
|
||||
fontFamily: styleModel.fontFamily || this.model.style.fontFamily,
|
||||
text: styleName,
|
||||
textFill: styleModel.fontColor,
|
||||
textAlign: styleModel.textAlign,
|
||||
textPosition: styleModel.textPosition || 'inside',
|
||||
textVerticalAlign: styleModel.textVerticalAlign || null
|
||||
}
|
||||
});
|
||||
this.add(this.text);
|
||||
isShow ? this.text.show() : this.text.hide();
|
||||
}
|
||||
}
|
||||
|
||||
show() {
|
||||
this.text && this.text.show();
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.text && this.text.hide();
|
||||
}
|
||||
|
||||
getBoundingRect() {
|
||||
if (this.text) {
|
||||
return this.text.getBoundingRect().clone();
|
||||
}
|
||||
}
|
||||
|
||||
recover() {
|
||||
// 暂时不做状态初始化
|
||||
}
|
||||
|
||||
setState() {
|
||||
// 区段名称类暂时不做状态处理
|
||||
}
|
||||
}
|
||||
|
||||
export default ETextName;
|
||||
@ -16,13 +16,17 @@ export default class ELines extends Group {
|
||||
this.model = model;
|
||||
this.zlevel = model.zlevel;
|
||||
this.z = model.z;
|
||||
this.create(model);
|
||||
this.create();
|
||||
}
|
||||
|
||||
create(model) {
|
||||
create() {
|
||||
/** 创建区段*/
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
|
||||
const isCurve = model.curve;
|
||||
if (model && model.points.length > 1) {
|
||||
if (model.isCurve) { // 曲线 用贝塞尔曲线绘图 封锁 必须4个点来绘图
|
||||
if (isCurve) { // 曲线 用贝塞尔曲线绘图 封锁 必须4个点来绘图
|
||||
const shape = {};
|
||||
for (let i = 1; i < (model.points.length - 1); i++) {
|
||||
shape[`cpx${i}`] = model.points[i].x;
|
||||
@ -41,8 +45,8 @@ export default class ELines extends Group {
|
||||
culling: true,
|
||||
shape: this.couvert(shape),
|
||||
style: {
|
||||
lineWidth: model.style.Section.line.width,
|
||||
stroke: model.style.Section.line.blockColor,
|
||||
lineWidth: style.Section.line.width,
|
||||
stroke: style.Section.line.blockColor,
|
||||
fillOpacity: 0
|
||||
}
|
||||
});
|
||||
@ -63,8 +67,8 @@ export default class ELines extends Group {
|
||||
y2: model.points[0].y + spaceY + spaceY
|
||||
},
|
||||
style: {
|
||||
lineWidth: model.style.Section.line.width,
|
||||
stroke: model.style.Section.line.blockColor
|
||||
lineWidth: style.Section.line.width,
|
||||
stroke: style.Section.line.blockColor
|
||||
}
|
||||
});
|
||||
this.add(this.sectionM);
|
||||
@ -183,4 +187,12 @@ export default class ELines extends Group {
|
||||
cpy1: (cpy1 + cpy2) / 2 + v[0] * y0 * 0.128
|
||||
};
|
||||
}
|
||||
|
||||
recover() {
|
||||
|
||||
}
|
||||
|
||||
setState() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import ETextName from '../element/ETextName'; // 名称文字 (共有)
|
||||
// import ERelease from './ERelease'; // 线段 (共有)
|
||||
import ETextName from './ETextName'; // 名称文字
|
||||
import ELimitLines from './ELimitLines'; // 区段限速 (私有)
|
||||
import ELines from './ELines'; // 创建多线条 曲线 (私有)
|
||||
import EblockLines from './EblockLines'; // 区段封锁特有
|
||||
import ESeparator from './ESeparator'; // 分隔符 (私有)
|
||||
import EMouse from './EMouse';
|
||||
import EAxle from './EAxle'; // 创建计轴
|
||||
import { EBackArrow, EBackArrowTriangle } from './EBackArrow'; // 折返进路箭头
|
||||
// import { EBackArrow, EBackArrowTriangle } from './EBackArrow'; // 折返进路箭头
|
||||
import EBackArrowGroup from './EBackArrow'; // 折返进路箭头
|
||||
import ELimitName from './ELimitName'; // 成都三号线 限速名称
|
||||
import JTriangle from '../../utils/JTriangle';
|
||||
// import JTriangle from '../../utils/JTriangle';
|
||||
import { drawSectionStyle } from '../../config/defaultStyle';
|
||||
import EStopRouteImg from './EStopRouteImg';
|
||||
import store from '@/store/index_APP_TARGET';
|
||||
@ -35,556 +35,67 @@ export default class Section extends Group {
|
||||
|
||||
create() {
|
||||
// 区段type 01计轴区段；02逻辑区段；03道岔区段 04道岔计轴区段
|
||||
this.createSectionText(); // 创建区段文字
|
||||
this.createSection(); // 创建区段
|
||||
// this.creatRelease(); // 创建延时释放
|
||||
this.createSeparator(); // 创建分隔符
|
||||
this.createTurnBack(); // 创建成都三号线 折返箭头
|
||||
this.createAxlex(); // 创建计轴 （西安二号线）
|
||||
this.createReleaseText(); // 创建延迟解锁计时
|
||||
}
|
||||
// 创建计轴
|
||||
createAxlex() {
|
||||
if (this.style.Section.axle.show) {
|
||||
const length = this.model.points.length;
|
||||
const traingleStart = new JTriangle(this.model.points[0], this.model.points[1]);
|
||||
const traingleEnd = new JTriangle(this.model.points[length - 2], this.model.points[length - 1]);
|
||||
if (this.model.leftAxlePosition) {
|
||||
const leftPoint = {x:this.model.points[0].x, y: this.model.points[0].y};
|
||||
if (this.model.leftAxleOffset) {
|
||||
leftPoint.x = leftPoint.x + this.model.leftAxleOffset.x || 0;
|
||||
leftPoint.y = leftPoint.y + this.model.leftAxleOffset.y || 0;
|
||||
}
|
||||
this.leftAxle = new EAxle({
|
||||
_subType: 'leftAxle',
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
shape: {
|
||||
style: this.style,
|
||||
traingle: traingleStart,
|
||||
drictx: 1,
|
||||
dricty: this.model.leftAxlePosition === 1 || this.model.leftAxlePosition === 2 ? 1 : -1,
|
||||
isSpecial: this.model.leftAxlePosition === -2 || this.model.leftAxlePosition === 2,
|
||||
point: leftPoint,
|
||||
difference: this.model.points[0].y - this.model.points[1].y,
|
||||
multiple: 1
|
||||
},
|
||||
style: {
|
||||
lineWidth: this.style.Section.axle.lineWidth,
|
||||
fill: this.style.Section.axle.color,
|
||||
stroke: this.style.Section.axle.color
|
||||
}
|
||||
});
|
||||
this.add(this.leftAxle);
|
||||
}
|
||||
if (this.model.rightAxlePosition) {
|
||||
const rightPoint = {x:this.model.points[length - 1].x, y: this.model.points[length - 1].y};
|
||||
if (this.model.rightAxleOffset) {
|
||||
rightPoint.x = rightPoint.x + this.model.rightAxleOffset.x || 0;
|
||||
rightPoint.y = rightPoint.y + this.model.rightAxleOffset.y || 0;
|
||||
}
|
||||
this.rightAxle = new EAxle({
|
||||
_subType: 'rightAxle',
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
shape: {
|
||||
style: this.style,
|
||||
traingle: traingleEnd,
|
||||
drictx: -1,
|
||||
dricty: this.model.rightAxlePosition === 1 || this.model.rightAxlePosition === 2 ? 1 : -1,
|
||||
isSpecial: this.model.rightAxlePosition === -2 || this.model.rightAxlePosition === 2,
|
||||
point: rightPoint,
|
||||
difference: this.model.points[length - 2].y - this.model.points[length - 1].y,
|
||||
multiple1: -1
|
||||
},
|
||||
style: {
|
||||
lineWidth: this.style.Section.axle.lineWidth,
|
||||
fill: this.style.Section.axle.color,
|
||||
stroke: this.style.Section.axle.color
|
||||
}
|
||||
});
|
||||
this.add(this.rightAxle);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 创建区段名称
|
||||
createSectionText() {
|
||||
// 站台所有的绘图元素
|
||||
const elementTypeList = {
|
||||
'name': ETextName, // 区段名称
|
||||
'logicText': ETextName, // 逻辑区段名称
|
||||
'standTrackText': ETextName, // 站台轨名称
|
||||
'reentryTrackText': ETextName, // 折返轨名称
|
||||
'transferTrackText': ETextName, // 转换轨名称
|
||||
'destinationText': ETextName, // 目的码名称
|
||||
'line': ELines, // 创建区段
|
||||
'lineBorder': ELines, // 哈尔滨线路点击背景色
|
||||
'sectionBlock': EblockLines, // 哈尔滨线路区段（封锁显示）
|
||||
'stopRouteImg': EStopRouteImg, // 宁波三线路特有
|
||||
'axle': EAxle, // 计轴 (西安二号线 )
|
||||
'separator': ESeparator, // 分隔符
|
||||
'speedLimit': ELimitLines, // 限速线
|
||||
'speedLimitName': ELimitName, // 限速线名称
|
||||
'shuttleBack': EBackArrowGroup // 折返箭头 (成都三号线显示)
|
||||
};
|
||||
// 遍历当前线路下的绘图元素
|
||||
const model = this.model;
|
||||
const style = this.style;
|
||||
|
||||
if (model && style) {
|
||||
// 计算区段坐标位置
|
||||
const x = Math.min(model.points[0].x, model.points[model.points.length - 1].x) + Math.abs(model.points[model.points.length - 1].x - model.points[0].x) / 2;
|
||||
const y = Math.min(model.points[0].y, model.points[model.points.length - 1].y) + Math.abs(model.points[model.points.length - 1].y - model.points[0].y) / 2;
|
||||
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
|
||||
const drict = model.trainPosType != '01' ? 1 : -1;
|
||||
if (model.type == '01') { // 物理区段名称
|
||||
const tempx = x + traingle.getSin(style.Section.text.distance);
|
||||
const tempy = y + traingle.getCos(style.Section.text.distance) * (style.Section.text.position || drict);
|
||||
this.name = new ETextName({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 2,
|
||||
style: this.style,
|
||||
silent: false,
|
||||
x: tempx + model.namePosition.x,
|
||||
y: tempy + model.namePosition.y,
|
||||
fontWeight: style.Section.text.fontWeight,
|
||||
fontSize: style.Section.text.fontSize,
|
||||
fontFamily: style.fontFamily,
|
||||
text: model.name,
|
||||
textFill: style.Section.text.fontColor,
|
||||
textAlign: style.Section.text.textAlign,
|
||||
textPosition: style.Section.text.textPosition,
|
||||
textVerticalAlign: style.Section.text.textVerticalAlign
|
||||
});
|
||||
this.add(this.name);
|
||||
model.nameShow && style.Section.text.show ? this.name.show() : this.name.hide();
|
||||
} else if (model.type == '02') { // 逻辑区段
|
||||
const tempx = x + traingle.getSin(style.Section.logicText.distance);
|
||||
const tempy = y + traingle.getCos(style.Section.logicText.distance) * (style.Section.logicText.position || drict);
|
||||
this.name = new ETextName({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 2,
|
||||
style: this.style,
|
||||
silent: false,
|
||||
x: tempx + model.namePosition.x,
|
||||
y: tempy + model.namePosition.y,
|
||||
fontWeight: style.Section.logicText.fontWeight,
|
||||
fontSize: style.Section.logicText.fontSize,
|
||||
fontFamily: style.fontFamily,
|
||||
text: model.name,
|
||||
textFill: style.Section.logicText.fontColor,
|
||||
textAlign: style.Section.logicText.textAlign,
|
||||
textPosition: style.Section.logicText.textPosition,
|
||||
textVerticalAlign: style.Section.logicText.textVerticalAlign
|
||||
});
|
||||
this.add(this.name);
|
||||
model.nameShow && style.Section.logicText.show ? this.name.show() : this.name.hide();
|
||||
} else if (model.type == '04') { // 道岔计轴区段
|
||||
this.name = new ETextName({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 2,
|
||||
style: this.style,
|
||||
silent: false,
|
||||
x: x + model.namePosition.x,
|
||||
y: y + model.namePosition.y + style.Section.text.distance * drict,
|
||||
fontWeight: style.Section.text.fontWeight,
|
||||
fontSize: style.Section.text.fontSize,
|
||||
fontFamily: style.fontFamily,
|
||||
text: model.name,
|
||||
textFill: style.Section.text.fontColor,
|
||||
textAlign: style.Section.text.textAlign,
|
||||
textPosition: style.Section.text.textPosition,
|
||||
textVerticalAlign: style.Section.text.textVerticalAlign
|
||||
});
|
||||
this.add(this.name);
|
||||
model.nameShow ? this.name.show() : this.name.hide();
|
||||
}
|
||||
|
||||
/** 站台轨名称*/
|
||||
// 站台轨存在且站台轨名称存在时显示
|
||||
if (model.standTrack && model.standTrackName) {
|
||||
const tempx = x + traingle.getSin(style.Section.standText.distance);
|
||||
const tempy = y + traingle.getCos(style.Section.standText.distance) * (style.Section.standText.position || drict);
|
||||
this.standTrackText = new ETextName({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 2,
|
||||
silent: false,
|
||||
x: tempx + model.standTrackNamePosition.x,
|
||||
y: tempy + model.standTrackNamePosition.y,
|
||||
fontWeight: style.Section.standText.fontWeight,
|
||||
fontSize: style.Section.standText.fontSize,
|
||||
fontFamily: style.fontFamily,
|
||||
text: model.standTrackName,
|
||||
textFill: style.Section.standText.fontColor,
|
||||
textAlign: style.Section.standText.textAlign,
|
||||
textPosition: style.Section.standText.textPosition,
|
||||
textVerticalAlign: style.Section.standText.textVerticalAlign
|
||||
});
|
||||
this.add(this.standTrackText);
|
||||
model.standTrackNameShow && style.Section.standText.show ? this.standTrackText.show() : this.standTrackText.hide();
|
||||
}
|
||||
|
||||
/** 折返轨名称*/
|
||||
// 折返轨存在且折返轨名称存在时显示
|
||||
if (model.reentryTrack && model.reentryTrackName) {
|
||||
const tempx = x + traingle.getSin(style.Section.reentryText.distance);
|
||||
const tempy = y + traingle.getCos(style.Section.reentryText.distance) * (style.Section.reentryText.position || drict);
|
||||
this.reentryTrackText = new ETextName({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 2,
|
||||
silent: false,
|
||||
x: tempx + model.reentryTrackNamePosition.x,
|
||||
y: tempy + model.reentryTrackNamePosition.y,
|
||||
fontWeight: style.Section.reentryText.fontWeight,
|
||||
fontSize: style.Section.reentryText.fontSize,
|
||||
fontFamily: style.fontFamily,
|
||||
text: model.reentryTrackName,
|
||||
textFill: style.Section.reentryText.fontColor,
|
||||
textAlign: style.Section.reentryText.textAlign,
|
||||
textPosition: style.Section.reentryText.textPosition,
|
||||
textVerticalAlign: style.Section.reentryText.textVerticalAlign
|
||||
});
|
||||
this.add(this.reentryTrackText);
|
||||
model.reentryTrackNameShow && style.Section.reentryText.show ? this.reentryTrackText.show() : this.reentryTrackText.hide();
|
||||
}
|
||||
|
||||
/** 转换轨名称*/
|
||||
// 转换轨存在且转换轨名称存在时显示
|
||||
if (model.transferTrack && model.transferTrackName) {
|
||||
const tempx = x + traingle.getSin(style.Section.transferText.distance);
|
||||
const tempy = y + traingle.getCos(style.Section.transferText.distance) * (style.Section.transferText.position || drict);
|
||||
this.transferTrackText = new ETextName({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 2,
|
||||
silent: false,
|
||||
x: tempx + model.transferTrackNamePosition.x,
|
||||
y: tempy + model.transferTrackNamePosition.y,
|
||||
fontWeight: style.Section.transferText.fontWeight,
|
||||
fontSize: style.Section.transferText.fontSize,
|
||||
fontFamily: style.fontFamily,
|
||||
text: model.transferTrackName,
|
||||
textFill: style.Section.transferText.fontColor,
|
||||
textAlign: style.Section.transferText.textAlign,
|
||||
textPosition: style.Section.transferText.textPosition,
|
||||
textVerticalAlign: style.Section.transferText.textVerticalAlign
|
||||
});
|
||||
this.add(this.transferTrackText);
|
||||
model.transferTrackNameShow && style.Section.transferText.show ? this.transferTrackText.show() : this.transferTrackText.hide();
|
||||
}
|
||||
|
||||
/** 目的码名称*/
|
||||
// 目的码存在且目的码名称存在时显示
|
||||
if (model.destinationCode) {
|
||||
let tempx = x + traingle.getSin(style.Section.destinationText.distance);
|
||||
let tempy = y + traingle.getCos(style.Section.destinationText.distance) * (style.Section.destinationText.position || drict);
|
||||
if (!tempx || !tempy) {
|
||||
tempx = 0;
|
||||
tempy = 0;
|
||||
}
|
||||
this.destinationText = new ETextName({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 2,
|
||||
silent: false,
|
||||
x: tempx + model.destinationCodePoint.x,
|
||||
y: tempy + model.destinationCodePoint.y,
|
||||
fontWeight: style.Section.destinationText.fontWeight,
|
||||
fontSize: style.Section.destinationText.fontSize,
|
||||
fontFamily: style.fontFamily,
|
||||
text: model.destinationCode,
|
||||
textFill: style.Section.destinationText.fontColor,
|
||||
textAlign: style.Section.destinationText.textAlign,
|
||||
textPosition: style.Section.destinationText.textPosition,
|
||||
textVerticalAlign: style.Section.destinationText.textVerticalAlign
|
||||
});
|
||||
this.add(this.destinationText);
|
||||
model.destinationNameShow && style.Section.destinationText.show ? this.destinationText.show() : this.destinationText.hide();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/** 创建区段*/
|
||||
createSection() {
|
||||
const model = this.model;
|
||||
const style = this.style;
|
||||
// 创建区段 model.logicSectionCodeList 为空 或 0 表明没有逻辑区段 创建 否则过滤
|
||||
if ((model.type == '01' && (!model.logicSectionCodeList || !model.logicSectionCodeList.length)) || model.type == '02' || model.type == '03') {
|
||||
this.section = new ELines({
|
||||
const currentTypeList = style.Section.elemnetType;
|
||||
currentTypeList.forEach(element => {
|
||||
const ClassName = elementTypeList[element];
|
||||
const elementZ = style.Section[element] ? style.Section[element].z ? style.Section[element].z : 0 : 0;
|
||||
this[element] = new ClassName({
|
||||
zlevel: this.zlevel,
|
||||
z: model.type == '02' ? this.z + 1 : this.z, // 逻辑区段会覆盖物理区段
|
||||
isSwitchSection: model.switchSection,
|
||||
isCurve: model.curve,
|
||||
points: model.type == '04' ? [model.namePosition, model.namePosition] : model.points,
|
||||
style: style
|
||||
});
|
||||
this.add(this.section);
|
||||
if (this.style.Section.block.special) { // 创建哈尔滨特殊区段（用作封锁显示）
|
||||
this.sectionBlock = new EblockLines({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 2,
|
||||
isSwitchSection: model.switchSection,
|
||||
isCurve: model.curve,
|
||||
points: model.points,
|
||||
style: style
|
||||
});
|
||||
this.add(this.sectionBlock);
|
||||
}
|
||||
|
||||
if (this.style.Section.line.isActiveShow) { // 哈尔滨线路点击背景色
|
||||
this.lineBorder = new ELines({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z - 1,
|
||||
isSwitchSection: model.switchSection,
|
||||
isCurve: model.curve,
|
||||
points: model.type == '04' ? [model.namePosition, model.namePosition] : model.points,
|
||||
style: style
|
||||
});
|
||||
this.add(this.lineBorder);
|
||||
this.lineBorder.setStyle({ lineWidth: 0 });
|
||||
}
|
||||
if (this.style.Section.stopRouteImg && model.type !== '04') {
|
||||
this.stopRouteImg = new EStopRouteImg({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
points: model.points,
|
||||
style:style
|
||||
});
|
||||
this.add(this.stopRouteImg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 折返箭头
|
||||
createTurnBack() {
|
||||
const model = this.model;
|
||||
const style = this.style;
|
||||
if (model.reentryTrack && style.Section.shuttleBack) {
|
||||
const radius = 3;
|
||||
model.drict = 1; // 箭头朝向 (是折返轨加一个方向选择) 目前在区段右边
|
||||
const width = style.Section.line.width * 2;
|
||||
const height = style.Section.line.width * 1;
|
||||
const turnBackDistance = style.Section.shuttleBack.distance + radius * 4;
|
||||
|
||||
const points = model.points;
|
||||
let x = -model.drict * width * 1.2;
|
||||
let y = -turnBackDistance;
|
||||
|
||||
if (model.drict < 0) {
|
||||
x += points[0].x;
|
||||
y += points[0].y;
|
||||
} else {
|
||||
x += points[points.length - 1].x;
|
||||
y += points[points.length - 1].y;
|
||||
}
|
||||
|
||||
this.turnBack = new EBackArrow({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 10,
|
||||
shape: {
|
||||
drict: model.drict,
|
||||
width: width,
|
||||
height: height,
|
||||
points: {
|
||||
x: x,
|
||||
y: y
|
||||
}
|
||||
},
|
||||
style: {
|
||||
lineWidth: style.Section.separator.width,
|
||||
stroke: style.Section.separator.color,
|
||||
fill: 'rgba(0, 0, 0, 0)'
|
||||
}
|
||||
});
|
||||
this.turnBackriangle = new EBackArrowTriangle({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 10,
|
||||
shape: {
|
||||
drict: model.drict,
|
||||
width: width,
|
||||
height: height,
|
||||
points: {
|
||||
x: x,
|
||||
y: y
|
||||
}
|
||||
},
|
||||
style: {
|
||||
lineWidth: style.Section.separator.width,
|
||||
stroke: style.Section.separator.color,
|
||||
fill: style.Section.separator.color
|
||||
}
|
||||
});
|
||||
this.add(this.turnBack);
|
||||
this.add(this.turnBackriangle);
|
||||
this.turnBack.hide();
|
||||
this.turnBackriangle.hide();
|
||||
}
|
||||
}
|
||||
|
||||
// // 创建延时释放
|
||||
// creatRelease() {
|
||||
// const model = this.model;
|
||||
// const style = this.style;
|
||||
// const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
|
||||
// if ((model.type == '01' && (!model.logicSectionCodeList || !model.logicSectionCodeList.length)) || model.type == '02' || model.type == '03') {
|
||||
// this.release = new ERelease({
|
||||
// zlevel: this.zlevel,
|
||||
// z: this.z,
|
||||
// shape: {
|
||||
// x1: model.points[0].x + traingle.getCos(traingle.absz / 3),
|
||||
// y1: model.points[0].y + traingle.getSin(traingle.absz / 3),
|
||||
// x2: model.points[0].x + traingle.getCos(traingle.absz / 3 * 2),
|
||||
// y2: model.points[0].y + traingle.getSin(traingle.absz / 3 * 2)
|
||||
// },
|
||||
// lineWidth: style.Section.line.width,
|
||||
// stroke: style.Section.line.spareColor
|
||||
// });
|
||||
|
||||
// this.add(this.release);
|
||||
// }
|
||||
// }
|
||||
|
||||
// 创建限速线
|
||||
creatSpeedLimit() {
|
||||
const model = this.model;
|
||||
const style = this.style;
|
||||
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
|
||||
let x = traingle.drictx * (style.Section.speedLimit.distance) * traingle.getSinRate();
|
||||
let y = traingle.dricty * (style.Section.speedLimit.distance) * traingle.getCosRate();
|
||||
if (x == Infinity) { x = 0; }
|
||||
if (y == Infinity) { y = 0; }
|
||||
if (!this.speedLimitLeft && !this.speedLimitRight) {
|
||||
this.speedLimitLeft = new ELimitLines({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
position: [x, -y],
|
||||
z: this.z + elementZ,
|
||||
style: style,
|
||||
switch: model.switch,
|
||||
code: model.code,
|
||||
isSwitchSection: model.switchSection,
|
||||
relSwitchCode: model.relSwitchCode,
|
||||
isCurve: model.curve, // 是否曲线
|
||||
points: model.points
|
||||
type: element,
|
||||
modelData: model
|
||||
});
|
||||
this.speedLimitRight = new ELimitLines({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
position: [-x, y],
|
||||
style: style,
|
||||
switch: model.switch,
|
||||
code: model.code,
|
||||
isSwitchSection: model.switchSection,
|
||||
relSwitchCode: model.relSwitchCode,
|
||||
isCurve: model.curve, // 是否曲线
|
||||
points: model.points
|
||||
});
|
||||
if (style.Section.speedLimit.nameShow) {
|
||||
// 开头 起点位置
|
||||
this.speedLimitNameLeft = new ELimitName({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 10,
|
||||
drict: -1,
|
||||
x: model.points[0].x,
|
||||
y: model.points[0].y - 15,
|
||||
style: style
|
||||
});
|
||||
// 终点位置
|
||||
this.speedLimitNameRight = new ELimitName({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 10,
|
||||
drict: 1,
|
||||
x: model.points[model.points.length - 1].x,
|
||||
y: model.points[model.points.length - 1].y - 15,
|
||||
style: style
|
||||
});
|
||||
this.add(this.speedLimitNameLeft);
|
||||
this.add(this.speedLimitNameRight);
|
||||
}
|
||||
}
|
||||
this.add(this.speedLimitLeft);
|
||||
this.add(this.speedLimitRight);
|
||||
}
|
||||
|
||||
// 创建分隔符
|
||||
createSeparator() {
|
||||
const model = this.model;
|
||||
const style = this.style;
|
||||
let traingle = null;
|
||||
|
||||
if (model && style && model.points && model.points.length > 1) {
|
||||
/** 创建左侧分隔符*/
|
||||
traingle = new JTriangle(model.points[0], model.points[1]);
|
||||
this.lPartition = new ESeparator({
|
||||
style: style,
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + style.Section.separator.z,
|
||||
traingle: traingle,
|
||||
point: {
|
||||
x: model.points[0].x,
|
||||
y: model.points[0].y
|
||||
},
|
||||
sepType: model.sepTypeLeft,
|
||||
drict: -1 // 方向
|
||||
});
|
||||
|
||||
/** 创建右侧分隔符*/
|
||||
traingle = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]);
|
||||
this.rPartition = new ESeparator({
|
||||
style: style,
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + style.Section.separator.z,
|
||||
traingle: traingle,
|
||||
point: {
|
||||
x: model.points[model.points.length - 1].x,
|
||||
y: model.points[model.points.length - 1].y
|
||||
},
|
||||
sepType: model.sepTypeRight,
|
||||
drict: 1 // 方向
|
||||
});
|
||||
/** 添加视图*/
|
||||
this.add(this.lPartition);
|
||||
this.add(this.rPartition);
|
||||
}
|
||||
}
|
||||
|
||||
// 创建延迟解锁计时
|
||||
createReleaseText() {
|
||||
const model = this.model;
|
||||
const style = this.style;
|
||||
this.releaseName = new ETextName({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + 2,
|
||||
style: this.style,
|
||||
silent: false,
|
||||
x: model.points[0].x + 10,
|
||||
y: model.points[0].y - style.Section.line.width * 2,
|
||||
fontWeight: style.Section.text.fontWeight,
|
||||
fontSize: style.Section.text.fontSize,
|
||||
fontFamily: style.fontFamily,
|
||||
text: '30',
|
||||
textFill: style.Section.text.fontColor,
|
||||
textAlign: style.Section.text.textAlign,
|
||||
textPosition: style.Section.text.textPosition,
|
||||
textVerticalAlign: style.Section.text.textVerticalAlign
|
||||
this.add(this[element]);
|
||||
});
|
||||
this.add(this.releaseName);
|
||||
}
|
||||
|
||||
/** 设置区段恢复默认状态*/
|
||||
recover() {
|
||||
if (this.section) {
|
||||
this.section.stopAnimation(true);
|
||||
if (this.line) {
|
||||
this.line.stopAnimation(true);
|
||||
this.sectionBlock && this.sectionBlock.hide(); // 因此特殊区段
|
||||
this.section.setStyle({
|
||||
this.line.setStyle({
|
||||
stroke: this.style.Section.line.spareColor,
|
||||
lineWidth: this.style.Section.line.width
|
||||
});
|
||||
// this.release && this.release.hide();
|
||||
if (this.speedLimitLeft && this.speedLimitRight) {
|
||||
this.remove(this.speedLimitLeft);
|
||||
this.remove(this.speedLimitRight);
|
||||
}
|
||||
}
|
||||
this.releaseName && this.releaseName.hide();
|
||||
if (this.leftAxle) {
|
||||
this.leftAxle.setStyle({
|
||||
stroke: this.style.Section.line.spareColor,
|
||||
fill: this.style.Section.line.spareColor
|
||||
});
|
||||
}
|
||||
if (this.rightAxle) {
|
||||
this.rightAxle.setStyle({
|
||||
stroke: this.style.Section.line.spareColor,
|
||||
fill: this.style.Section.line.spareColor
|
||||
});
|
||||
}
|
||||
this.section && this.section.recoverRoute();
|
||||
this.speedLimit && this.speedLimit.hide();
|
||||
this.speedLimitName && this.speedLimitName.hide();
|
||||
|
||||
this.axle && this.axle.setStyle({
|
||||
stroke: this.style.Section.line.spareColor,
|
||||
fill: this.style.Section.line.spareColor
|
||||
});
|
||||
this.line && this.line.recoverRoute();
|
||||
this.lineBorder && this.lineBorder.setStyle({ lineWidth: 0 });
|
||||
}
|
||||
|
||||
/** 未定义状态 00*/
|
||||
undefine() {
|
||||
if (this.section) {
|
||||
this.section.setStyle({
|
||||
if (this.line) {
|
||||
this.line.setStyle({
|
||||
stroke: this.style.Section.line.undefinedColor,
|
||||
lineWidth: this.style.Section.line.width
|
||||
});
|
||||
@ -593,8 +104,8 @@ export default class Section extends Group {
|
||||
|
||||
/** 空闲状态 01*/
|
||||
spare() {
|
||||
if (this.section) {
|
||||
this.section.setStyle({
|
||||
if (this.line) {
|
||||
this.line.setStyle({
|
||||
stroke: this.style.Section.line.spareColor,
|
||||
lineWidth: this.style.Section.line.width
|
||||
});
|
||||
@ -603,58 +114,42 @@ export default class Section extends Group {
|
||||
|
||||
/** 通信车占用状态 02*/
|
||||
communicationOccupied() {
|
||||
if (this.section) {
|
||||
this.section.setStyle({
|
||||
if (this.line) {
|
||||
this.line.setStyle({
|
||||
stroke: this.style.Section.line.communicationOccupiedColor,
|
||||
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||||
});
|
||||
}
|
||||
if (this.leftAxle) {
|
||||
this.leftAxle.setStyle({
|
||||
stroke: this.style.Section.line.communicationOccupiedColor,
|
||||
fill:this.style.Section.line.communicationOccupiedColor
|
||||
});
|
||||
}
|
||||
if (this.rightAxle) {
|
||||
this.rightAxle.setStyle({
|
||||
stroke: this.style.Section.line.communicationOccupiedColor,
|
||||
fill:this.style.Section.line.communicationOccupiedColor
|
||||
});
|
||||
}
|
||||
this.axle && this.axle.setStyle({
|
||||
stroke: this.style.Section.line.communicationOccupiedColor,
|
||||
fill:this.style.Section.line.communicationOccupiedColor
|
||||
});
|
||||
}
|
||||
|
||||
/** 非通信车占用状态 03*/
|
||||
unCommunicationOccupied() {
|
||||
if (this.section) {
|
||||
this.section.setStyle({
|
||||
if (this.line) {
|
||||
this.line.setStyle({
|
||||
stroke: this.style.Section.line.unCommunicationOccupiedColor,
|
||||
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||||
});
|
||||
}
|
||||
if (this.leftAxle) {
|
||||
this.leftAxle.setStyle({
|
||||
stroke: this.style.Section.line.unCommunicationOccupiedColor,
|
||||
fill:this.style.Section.line.unCommunicationOccupiedColor
|
||||
});
|
||||
}
|
||||
if (this.rightAxle) {
|
||||
this.rightAxle.setStyle({
|
||||
stroke: this.style.Section.line.unCommunicationOccupiedColor,
|
||||
fill:this.style.Section.line.unCommunicationOccupiedColor
|
||||
});
|
||||
}
|
||||
this.axle && this.axle.setStyle({
|
||||
stroke: this.style.Section.line.unCommunicationOccupiedColor,
|
||||
fill:this.style.Section.line.unCommunicationOccupiedColor
|
||||
});
|
||||
}
|
||||
/** ARB故障 */
|
||||
invalid() {
|
||||
this.section && this.section.setStyle({
|
||||
this.line && this.line.setStyle({
|
||||
stroke: this.style.Section.line.invalidColor,
|
||||
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||||
});
|
||||
}
|
||||
/** 进路锁闭 04*/
|
||||
routeLock() {
|
||||
if (this.section) {
|
||||
this.section.setStyle({
|
||||
if (this.line) {
|
||||
this.line.setStyle({
|
||||
stroke: this.style.Section.line.routeLockColor,
|
||||
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||||
});
|
||||
@ -663,16 +158,16 @@ export default class Section extends Group {
|
||||
|
||||
/** 封锁 06*/
|
||||
block() {
|
||||
if (this.style.Section.block.special) {
|
||||
this.sectionBlock && this.sectionBlock.show();
|
||||
if (this.sectionBlock) {
|
||||
this.sectionBlock.show();
|
||||
} else {
|
||||
this.section && this.section.setStyle({
|
||||
this.line && this.line.setStyle({
|
||||
stroke: this.style.Section.line.blockColor,
|
||||
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||||
});
|
||||
}
|
||||
if (this.style.Section.block.blockGlint && this.section) {
|
||||
this.section.animateStyle(true, [
|
||||
if (this.style.Section.block && this.style.Section.block.blockGlint && this.line) {
|
||||
this.line.animateStyle(true, [
|
||||
{ time: 1000, styles: { stroke: this.style.backgroundColor } },
|
||||
{ time: 2000, styles: { stroke: this.style.Section.line.blockColor } }
|
||||
]);
|
||||
@ -681,8 +176,8 @@ export default class Section extends Group {
|
||||
|
||||
/** 故障锁闭 05*/
|
||||
faultLock() {
|
||||
if (this.section) {
|
||||
this.section.setStyle({
|
||||
if (this.line) {
|
||||
this.line.setStyle({
|
||||
stroke: this.style.Section.line.faultLockColor,
|
||||
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||||
});
|
||||
@ -691,8 +186,8 @@ export default class Section extends Group {
|
||||
|
||||
/** atc切除状态 07*/
|
||||
atcExcision() {
|
||||
if (this.section) {
|
||||
this.section.setStyle({
|
||||
if (this.line) {
|
||||
this.line.setStyle({
|
||||
stroke: this.style.Section.line.atcExcisionColor,
|
||||
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||||
});
|
||||
@ -701,9 +196,9 @@ export default class Section extends Group {
|
||||
|
||||
/** ats切除状态 08*/
|
||||
atsExcision() {
|
||||
if (this.section) {
|
||||
if (this.line) {
|
||||
this.atcExcision();
|
||||
this.section.animateStyle(true, [
|
||||
this.line.animateStyle(true, [
|
||||
{ time: 1000, styles: { stroke: this.style.backgroundColor } },
|
||||
{ time: 2000, styles: { stroke: this.style.Section.line.atsExcisionColor, lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth } }
|
||||
]);
|
||||
@ -712,39 +207,19 @@ export default class Section extends Group {
|
||||
|
||||
/** 保护区段锁闭 09*/
|
||||
protectiveLock() {
|
||||
if (this.section) {
|
||||
this.section.setStyle({
|
||||
if (this.line) {
|
||||
this.line.setStyle({
|
||||
stroke: this.style.Section.line.protectiveLockColor,
|
||||
lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// /** 延时释放*/
|
||||
// async timeRelease() {
|
||||
// this.section.setStyle({
|
||||
// stroke: this.style.Section.line.routeLockColor,
|
||||
// lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||||
// });
|
||||
|
||||
// if (this.release) {
|
||||
// this.release.show();
|
||||
// this.release.setStyle({
|
||||
// stroke: this.style.Section.line.routeLockColor,
|
||||
// lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||||
// });
|
||||
// this.release.animateStyle(true, [
|
||||
// { time: 1000, styles: { stroke: this.style.Section.line.routeLockColor } },
|
||||
// { time: 2000, styles: { stroke: this.style.Section.line.timeReleaseColor } }
|
||||
// ]);
|
||||
// }
|
||||
// }
|
||||
|
||||
/** 区段切除*/
|
||||
sectionCutOff() {
|
||||
const lineWidth = this.style.Section.line.width + (this.model.status != '01' ? this.style.Section.line.beyondWidth : 0);
|
||||
if (this.section) {
|
||||
this.section.animateStyle(true, [
|
||||
if (this.line) {
|
||||
this.line.animateStyle(true, [
|
||||
{ time: 0, styles: { lineWidth: lineWidth } },
|
||||
{ time: 1000, styles: { stroke: this.style.backgroundColor } },
|
||||
{ time: 2000, styles: { lineWidth: lineWidth } }
|
||||
@ -754,54 +229,14 @@ export default class Section extends Group {
|
||||
|
||||
/** 设置限速*/
|
||||
setSpeedUpperLimit() {
|
||||
if (this.style.Section.line.speedLimitColor) {
|
||||
this.section.setStyle({stroke: this.style.Section.line.speedLimitColor});
|
||||
} else if (this.section) {
|
||||
this.creatSpeedLimit();
|
||||
if (this.style.Section.line.speedLimitColor) { // 宁波三号线 独有
|
||||
this.line.setStyle({stroke: this.style.Section.line.speedLimitColor});
|
||||
} else {
|
||||
this.speedLimit && this.speedLimit.show();
|
||||
this.speedLimitName && this.speedLimitName.show();
|
||||
}
|
||||
}
|
||||
|
||||
// /** 计轴预复位 12*/
|
||||
// axleReset() {
|
||||
// if (this.release) {
|
||||
// this.release.show();
|
||||
// this.release && this.release.setStyle({
|
||||
// stroke: this.style.Section.axle.resetColor,
|
||||
// fill: 'green'
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
// /** 计轴失效 13*/
|
||||
// alxeFailure() {
|
||||
// if (this.section) {
|
||||
// this.section.setStyle({
|
||||
// stroke: this.style.Section.axle.Failure,
|
||||
// lineWidth: this.style.Section.line.width + this.style.Section.line.beyondWidth
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
showRemainTime(number) { // 区段延时保护倒计时显示
|
||||
this.releaseName && this.releaseName.show();
|
||||
// this.releaseName && this.releaseName.setStyle({ text: number });
|
||||
let pointX = this.model.points[0].x + 45;
|
||||
let pointY = this.model.points[0].y;
|
||||
if (!this.model.timeRight) {
|
||||
pointX = this.model.points[this.model.points.length - 1].x - 45;
|
||||
pointY = this.model.points[this.model.points.length - 1].y;
|
||||
}
|
||||
this.releaseName && this.releaseName.attr({
|
||||
style: {
|
||||
text: number
|
||||
},
|
||||
shape: {
|
||||
x: pointX,
|
||||
y: pointY - this.style.Section.line.width * 2
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 设置状态*/
|
||||
setState(model, flag = false) {
|
||||
if (!this.isShowShape) return;
|
||||
@ -811,12 +246,12 @@ export default class Section extends Group {
|
||||
const switchModel = Vue.prototype.$jlmap.mapDevice[model.relSwitchCode];
|
||||
if (switchModel.normalPosition != 0) { // 定位情况
|
||||
const sectionC = Vue.prototype.$jlmap.mapDevice[switchModel.sectionCCode];
|
||||
sectionC && sectionC.instance && sectionC.instance.section.setStyle({ stroke: this.style.Switch.sectionAction.spareColor });
|
||||
sectionC && sectionC.instance && sectionC.instance.line.setStyle({ stroke: this.style.Switch.sectionAction.spareColor });
|
||||
const sectionB = Vue.prototype.$jlmap.mapDevice[switchModel.sectionBCode];
|
||||
sectionB && sectionB.instance && sectionB.instance.setState(sectionB, true);
|
||||
} else if (switchModel.normalPosition == 0) { // 反位情况
|
||||
const sectionB = Vue.prototype.$jlmap.mapDevice[switchModel.sectionBCode];
|
||||
sectionB && sectionB.instance && sectionB.instance.section.setStyle({ stroke: this.style.Switch.sectionAction.spareColor });
|
||||
sectionB && sectionB.instance && sectionB.instance.line.setStyle({ stroke: this.style.Switch.sectionAction.spareColor });
|
||||
const sectionC = Vue.prototype.$jlmap.mapDevice[switchModel.sectionCCode];
|
||||
sectionC && sectionC.instance && sectionC.instance.setState(sectionC, true);
|
||||
}
|
||||
@ -841,9 +276,6 @@ export default class Section extends Group {
|
||||
// 区段计轴预复位状态 (未处理)
|
||||
// 区段故障锁闭
|
||||
model.fault && this.faultLock();
|
||||
// 区段延时保护倒计时显示
|
||||
// model.remainTime = 10;
|
||||
model.remainTime && this.showRemainTime(model.remainTime);
|
||||
|
||||
/** 道岔区段更新岔心颜色 */
|
||||
if (model.type === '03' && model.switch) {
|
||||
@ -858,13 +290,8 @@ export default class Section extends Group {
|
||||
getShapeTipPoint() {
|
||||
let rect = this.getBoundingRect();
|
||||
const distance = this.style.Section.line.width / 2;
|
||||
if (this.section) {
|
||||
rect = this.section.getBoundingRect();
|
||||
// if (this.model.type !== '02' && this.model.nameShow) {
|
||||
// if (this.model.trainPosType == '01') {
|
||||
// distance = distance + this.style.Section.text.distance + this.style.Section.text.fontSize;
|
||||
// }
|
||||
// }
|
||||
if (this.line) {
|
||||
rect = this.line.getBoundingRect();
|
||||
}
|
||||
return {
|
||||
x: rect.x + rect.width / 2,
|
||||
@ -873,10 +300,10 @@ export default class Section extends Group {
|
||||
}
|
||||
|
||||
getBoundingRect() {
|
||||
if (this.section) {
|
||||
return this.section.getBoundingRect().clone();
|
||||
} else if (this.name) {
|
||||
return this.name.getBoundingRect().clone();
|
||||
if (this.line && this.line.getBoundingRect()) {
|
||||
return this.line.getBoundingRect().clone();
|
||||
} else if (this.name && this.name.getBoundingRect()) {
|
||||
return this.name.getBoundingRect();
|
||||
}
|
||||
}
|
||||
|
||||
@ -890,10 +317,10 @@ export default class Section extends Group {
|
||||
const path = window.location.href;
|
||||
if (path.includes('/map/draw')) {
|
||||
this.on('mouseout', () => {
|
||||
!this.selectedType && !this.selected && this.section && this.section.setStyle({ stroke: this.style.Section.line.spareColor, lineWidth: this.style.Section.line.width });
|
||||
!this.selectedType && !this.selected && this.line && this.line.setStyle({ stroke: this.style.Section.line.spareColor, lineWidth: this.style.Section.line.width });
|
||||
});
|
||||
this.on('mouseover', () => {
|
||||
!this.selectedType && this.section && this.section.setStyle({ stroke: '#fbfbfb', lineWidth: this.style.Section.line.width - 0.2 });
|
||||
!this.selectedType && this.line && this.line.setStyle({ stroke: '#fbfbfb', lineWidth: this.style.Section.line.width - 0.2 });
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -901,10 +328,10 @@ export default class Section extends Group {
|
||||
drawSelected(selected) {
|
||||
this.selected = selected;
|
||||
if (selected) {
|
||||
if (this.style.Section.line.isActiveShow) { // 哈尔滨线路专属显示
|
||||
this.lineBorder && this.lineBorder.setStyle({ lineWidth: this.style.Section.line.width + 3 });
|
||||
if (this.lineBorder) { // 哈尔滨线路专属显示
|
||||
this.lineBorder.setStyle({ lineWidth: this.style.Section.line.width + 3 });
|
||||
} else {
|
||||
!this.selectedType && this.section && this.section.setStyle({ stroke: '#fbfbfb' });
|
||||
!this.selectedType && this.line && this.line.setStyle({ stroke: '#fbfbfb' });
|
||||
}
|
||||
} else {
|
||||
this.lineBorder && this.lineBorder.setStyle({ lineWidth: 0 });
|
||||
@ -916,9 +343,9 @@ export default class Section extends Group {
|
||||
return;
|
||||
}
|
||||
if (selected && type) {
|
||||
this.section && this.section.setStyle({ stroke: drawSectionStyle[type] });
|
||||
this.line && this.line.setStyle({ stroke: drawSectionStyle[type] });
|
||||
} else {
|
||||
this.section && this.section.setStyle({ stroke: this.style.Section.line.spareColor });
|
||||
this.line && this.line.setStyle({ stroke: this.style.Section.line.spareColor });
|
||||
}
|
||||
this.selectedType = type;
|
||||
}
|
||||
@ -928,7 +355,7 @@ export default class Section extends Group {
|
||||
}
|
||||
|
||||
mouseover() {
|
||||
this.section && this.section.setStyle({ stroke: 'rgba(255,255,255,0.8)' });
|
||||
this.line && this.line.setStyle({ stroke: 'rgba(255,255,255,0.8)' });
|
||||
}
|
||||
setShowMode() { }
|
||||
setShowStation(stationCode) {
|
||||
@ -938,25 +365,22 @@ export default class Section extends Group {
|
||||
});
|
||||
this.isShowShape = true;
|
||||
if (this.name) {
|
||||
if (this.model.type == '01') {
|
||||
this.model.nameShow && this.style.Section.text.show ? this.name.show() : this.name.hide();
|
||||
} else if (this.model.type == '02') {
|
||||
this.model.nameShow && this.style.Section.logicText.show ? this.name.show() : this.name.hide();
|
||||
} else if (this.model.type == '04') {
|
||||
this.model.nameShow ? this.name.show() : this.name.hide();
|
||||
}
|
||||
this.model.nameShow ? this.name.show() : this.name.hide();
|
||||
}
|
||||
if (this.logicText) {
|
||||
this.model.nameShow ? this.logicText.show() : this.logicText.hide();
|
||||
}
|
||||
if (this.transferTrackText) {
|
||||
this.model.transferTrackNameShow && this.style.Section.transferText.show ? this.transferTrackText.show() : this.transferTrackText.hide();
|
||||
this.model.transferTrackNameShow ? this.transferTrackText.show() : this.transferTrackText.hide();
|
||||
}
|
||||
if (this.standTrackText) {
|
||||
this.model.standTrackNameShow && this.style.Section.standText.show ? this.standTrackText.show() : this.standTrackText.hide();
|
||||
this.model.standTrackNameShow ? this.standTrackText.show() : this.standTrackText.hide();
|
||||
}
|
||||
if (this.destinationText) {
|
||||
this.model.destinationNameShow && this.style.Section.destinationText.show ? this.destinationText.show() : this.destinationText.hide();
|
||||
this.model.destinationNameShow ? this.destinationText.show() : this.destinationText.hide();
|
||||
}
|
||||
if (this.reentryTrackText) {
|
||||
this.model.reentryTrackNameShow && this.style.Section.reentryText.show ? this.reentryTrackText.show() : this.reentryTrackText.hide();
|
||||
this.model.reentryTrackNameShow ? this.reentryTrackText.show() : this.reentryTrackText.hide();
|
||||
}
|
||||
|
||||
this.setState(this.model);
|
||||
|
||||
@ -1,104 +0,0 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Text from 'zrender/src/graphic/Text';
|
||||
import Circle from 'zrender/src/graphic/shape/Circle';
|
||||
|
||||
class EDetain extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.detain = null;
|
||||
this.isNew = false;
|
||||
}
|
||||
|
||||
create() {
|
||||
if (!this.isNew) {
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
this.isNew = true;
|
||||
|
||||
/** 站台扣车*/
|
||||
const detainD = model.right ? 1 : -1;
|
||||
const detainX = model.position.x - detainD * (style.StationStand.detainCarNormal.offset.x - model.width / 2);
|
||||
const detainY = model.position.y + detainD * (style.StationStand.detainCarNormal.offset.y - model.height / 2);
|
||||
|
||||
this.detain = new Text({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
position: [0, 0],
|
||||
style: {
|
||||
x: detainX,
|
||||
y: detainY,
|
||||
text: style.StationStand.detainCarNormal.text,
|
||||
fontSize: `${style.StationStand.detainCarNormal.fontSize}px`,
|
||||
fontFamily: style.fontFamily,
|
||||
textFill: style.StationStand.detainCarNormal.centerTrainColor,
|
||||
textStroke: style.backgroundColor,
|
||||
textAlign: style.textStyle.textAlign,
|
||||
textVerticalAlign: style.StationStand.detainCarNormal.textVerticalAlign || style.textStyle.textVerticalAlign
|
||||
}
|
||||
});
|
||||
if (style.StationStand.detainCarNormal.circle) {
|
||||
const offsetX = model.right ? 8 : -8;
|
||||
this.circleDetain = new Circle({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
shape: {
|
||||
cx: detainX + offsetX,
|
||||
cy: detainY - 3,
|
||||
r: 2
|
||||
},
|
||||
style: {
|
||||
fill: '#000',
|
||||
lineWidth: 1,
|
||||
stroke: '#FFF'
|
||||
}
|
||||
});
|
||||
this.add(this.circleDetain);
|
||||
}
|
||||
this.add(this.detain);
|
||||
}
|
||||
}
|
||||
|
||||
setColor(color) {
|
||||
this.create();
|
||||
this.detain.setStyle('textFill', color);
|
||||
}
|
||||
|
||||
recover() {
|
||||
this.hideMode();
|
||||
}
|
||||
|
||||
hideMode() {
|
||||
this.detain && this.detain.hide();
|
||||
this.circleDetain && this.circleDetain.hide();
|
||||
}
|
||||
|
||||
showMode() {
|
||||
this.create();
|
||||
this.detain && this.detain.show();
|
||||
this.circleDetain && this.circleDetain.show();
|
||||
}
|
||||
|
||||
holdTrain(type) {
|
||||
const style = this.model.style;
|
||||
switch (type) {
|
||||
case 'centerAndTrain': {
|
||||
this.showMode();
|
||||
this.setColor(style.StationStand.detainCarNormal.andCenterTrainColor);
|
||||
break;
|
||||
}
|
||||
case 'centerDetain': {
|
||||
this.showMode();
|
||||
this.setColor(style.StationStand.detainCarNormal.centerTrainColor);
|
||||
break;
|
||||
}
|
||||
case 'trainDetain': {
|
||||
this.showMode();
|
||||
this.setColor(style.StationStand.detainCarNormal.detainTrainTextColor);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default EDetain;
|
||||
@ -1,83 +0,0 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Text from 'zrender/src/graphic/Text';
|
||||
import Arc from 'zrender/src/graphic/shape/Arc';
|
||||
|
||||
class EJump extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.isNew = false;
|
||||
}
|
||||
create() {
|
||||
if (!this.isNew) {
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
this.isNew = true;
|
||||
|
||||
const jumpDirct = model.right ? -1 : 1;
|
||||
const jumpX = model.position.x - jumpDirct * (style.StationStand.jump.offset.x - model.width / 2);
|
||||
const jumpY = model.position.y + jumpDirct * style.StationStand.jump.offset.y;
|
||||
const jumpCX = model.position.x - jumpDirct * (style.StationStand.jump.offset.x - model.width / 2);
|
||||
const jumpCY = model.position.y + jumpDirct * style.StationStand.jump.offset.y;
|
||||
|
||||
this.jump = new Text({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
style: {
|
||||
x: jumpX,
|
||||
y: jumpY,
|
||||
fontWeight: style.StationStand.jump.fontWeight,
|
||||
fontSize: style.StationStand.jump.fontSize,
|
||||
fontFamily: style.fontFamily,
|
||||
text: style.StationStand.jump.text,
|
||||
textFill: style.StationStand.jump.textColor,
|
||||
textAlign: style.textStyle.textAlign,
|
||||
textVerticalAlign: style.textStyle.textVerticalAlign
|
||||
}
|
||||
});
|
||||
this.add(this.jump);
|
||||
if (style.StationStand.jump.r) {
|
||||
this.jumpArc = new Arc({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
shape: {
|
||||
cx: jumpCX,
|
||||
cy: jumpCY,
|
||||
r: style.StationStand.jump.r
|
||||
},
|
||||
style: {
|
||||
stroke: style.StationStand.jump.arcColor,
|
||||
fill: style.StationStand.jump.fillColor
|
||||
}
|
||||
});
|
||||
this.add(this.jumpArc);
|
||||
this.jumpArc.hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setColor(color) {
|
||||
this.create();
|
||||
this.jump.setStyle('textFill', color);
|
||||
}
|
||||
|
||||
hideMode() {
|
||||
this.jump && this.jump.hide();
|
||||
this.jumpArc && this.jumpArc.hide();
|
||||
}
|
||||
|
||||
showMode(isAllJump) {
|
||||
this.create();
|
||||
if (isAllJump) { // 站台跳停
|
||||
this.jump.show();
|
||||
this.jumpArc && this.jumpArc.show();
|
||||
} else { // 指定列车跳停
|
||||
this.jump.show();
|
||||
}
|
||||
}
|
||||
recover() {
|
||||
this.hideMode();
|
||||
}
|
||||
}
|
||||
|
||||
export default EJump;
|
||||
@ -40,7 +40,6 @@ class ELevel extends Group {
|
||||
}
|
||||
|
||||
setName(val) {
|
||||
this.create();
|
||||
this.level.setStyle('text', val);
|
||||
}
|
||||
|
||||
@ -61,6 +60,13 @@ class ELevel extends Group {
|
||||
recover() {
|
||||
this.hideMode();
|
||||
}
|
||||
setState(model) {
|
||||
// 运行等级
|
||||
if (Number(model.runLevelTime) > 0) {
|
||||
this.showMode();
|
||||
this.setName(model.runLevelTime);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ELevel;
|
||||
|
||||
@ -58,6 +58,10 @@ class EPatternFilter extends Group {
|
||||
recover() {
|
||||
|
||||
}
|
||||
|
||||
setState(model) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export default EPatternFilter;
|
||||
|
||||
@ -54,15 +54,26 @@ class EReentry extends Group {
|
||||
this.hideMode();
|
||||
}
|
||||
|
||||
execOperation(type) {
|
||||
setState(model) {
|
||||
const style = this.model.style;
|
||||
switch (type) {
|
||||
case 'noHumanReentry': {
|
||||
this.showMode();
|
||||
let reentryStrategy = '';
|
||||
if (model.reentryStrategy !== '04') {
|
||||
reentryStrategy = model.reentryStrategy;
|
||||
} else {
|
||||
reentryStrategy = model.defaultReentryStrategy;
|
||||
}
|
||||
switch (reentryStrategy) {
|
||||
case '04': /** 默认*/
|
||||
case '01': {
|
||||
this.reentry && this.reentry.hideMode(); /** 无折返策略*/
|
||||
break;
|
||||
}
|
||||
case '02': {
|
||||
this.showMode(); /** 无人折返*/
|
||||
this.setColor(style.StationStand.reentry.noHumanColor);
|
||||
break;
|
||||
}
|
||||
case 'autoChangeEnds': {
|
||||
case '03':/** 自动换端*/ {
|
||||
this.showMode();
|
||||
this.setColor(style.StationStand.reentry.autoChangeEndsColor);
|
||||
break;
|
||||
|
||||
@ -1,135 +0,0 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Isogon from 'zrender/src/graphic/shape/Isogon';
|
||||
import Polygon from 'zrender/src/graphic/shape/Polygon';
|
||||
import Line from 'zrender/src/graphic/shape/Line';
|
||||
import {arrow} from '../utils/ShapePoints';
|
||||
|
||||
class ESafeEmergent extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.isNew = false;
|
||||
if (this.model.style.StationStand.emergent.special) {
|
||||
this.create();
|
||||
}
|
||||
}
|
||||
|
||||
create() {
|
||||
if (!this.isNew) {
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
|
||||
const emergentOffset = model.inside ? style.StationStand.emergent.insideOffset : style.StationStand.emergent.outsideOffset;
|
||||
const emergentH = model.right ? 1 : -1;
|
||||
const emergentX = model.position.x + emergentH * emergentOffset.x;
|
||||
const emergentY = model.position.y + emergentH * emergentOffset.y;
|
||||
|
||||
model.r = style.StationStand.emergent.mergentR;
|
||||
model.n = style.StationStand.emergent.mergentN;
|
||||
this.isNew = true;
|
||||
if (style.StationStand.emergent.radiusR) {
|
||||
const rotation = model.right == 1 ? Math.PI / 2 : Math.PI * 3 / 2;
|
||||
this.emergent = new Polygon({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
origin: [emergentX, emergentY],
|
||||
rotation: rotation,
|
||||
shape: {
|
||||
points: arrow(emergentX, emergentY, style.StationStand.emergent.width, style.StationStand.emergent.radiusR * 0.8)
|
||||
},
|
||||
style: {
|
||||
stroke: style.StationStand.emergent.closeColor,
|
||||
fill: style.StationStand.emergent.closeColor
|
||||
}
|
||||
});
|
||||
this.add(this.emergent);
|
||||
} else {
|
||||
this.emergent = new Isogon({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
shape: {
|
||||
x: emergentX,
|
||||
y: emergentY,
|
||||
r: model.r,
|
||||
n: model.n
|
||||
},
|
||||
style: {
|
||||
lineWidth: 0
|
||||
}
|
||||
});
|
||||
if (style.StationStand.emergent.special) {
|
||||
this.emergent.setStyle('lineWidth', 2);
|
||||
this.emergent.setStyle('stroke', style.StationStand.emergent.defaultColor);
|
||||
} else {
|
||||
this.emergent.setStyle('stroke', style.StationStand.emergent.closeColor);
|
||||
this.emergent.setStyle('fill', style.StationStand.emergent.closeColor);
|
||||
}
|
||||
this.add(this.emergent);
|
||||
if (style.StationStand.emergent.special) {
|
||||
// r*Math.r*cos(Math.PI/180*22.5)
|
||||
// Math.sin(Math.PI/180*50)
|
||||
// Math.cos(Math.PI/180*50)
|
||||
this.emergent.rotation = Math.PI / 8;
|
||||
this.emergent.origin = [emergentX, emergentY];
|
||||
this.emergent.dirty();
|
||||
this.emergentLine1 = new Line({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
shape:{
|
||||
x1:emergentX - model.r * 0.5939,
|
||||
y1:emergentY - model.r * 0.7077,
|
||||
x2:emergentX + model.r * 0.5939,
|
||||
y2:emergentY + model.r * 0.7077
|
||||
},
|
||||
style:{
|
||||
lineWidth:2,
|
||||
stroke:style.StationStand.emergent.defaultColor
|
||||
}
|
||||
});
|
||||
this.emergentLine2 = new Line({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
shape:{
|
||||
x1:emergentX + model.r * 0.5939,
|
||||
y1:emergentY - model.r * 0.7077,
|
||||
x2:emergentX - model.r * 0.5939,
|
||||
y2:emergentY + model.r * 0.7077
|
||||
},
|
||||
style:{
|
||||
lineWidth:2,
|
||||
stroke:style.StationStand.emergent.defaultColor
|
||||
}
|
||||
});
|
||||
this.add(this.emergentLine1);
|
||||
this.add(this.emergentLine2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hideMode() {
|
||||
if (!this.model.style.StationStand.emergent.special) {
|
||||
this.emergent && this.emergent.hide();
|
||||
}
|
||||
}
|
||||
|
||||
showMode() {
|
||||
this.create();
|
||||
this.emergent.show();
|
||||
}
|
||||
|
||||
getElement() {
|
||||
return this.emergent;
|
||||
}
|
||||
|
||||
recover() {
|
||||
this.hideMode();
|
||||
}
|
||||
|
||||
// emergencyClosed() {
|
||||
// this.showMode();
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
export default ESafeEmergent;
|
||||
@ -1,98 +0,0 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Rect from 'zrender/src/graphic/shape/Rect';
|
||||
import EGapStand from './EGapStand';
|
||||
|
||||
class ESafeStand extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.create();
|
||||
}
|
||||
|
||||
create() {
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
const standX = model.position.x - model.width / 2;
|
||||
const standY = model.position.y - model.height / 2;
|
||||
|
||||
// model.x /y 是整个坐标左上角起点
|
||||
if (style.StationStand.safeStand.special) {
|
||||
// 有间隔的站台 哈尔滨线路暂时使用
|
||||
this.gapStand = new EGapStand({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z + 2,
|
||||
x:standX,
|
||||
y:standY,
|
||||
style:style,
|
||||
width:model.width,
|
||||
height:model.height,
|
||||
inside:model.inside,
|
||||
right:model.right,
|
||||
name:model.name
|
||||
});
|
||||
this.add(this.gapStand);
|
||||
} else {
|
||||
this.stand = new Rect({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
shape: {
|
||||
x: standX,
|
||||
y: standY,
|
||||
width: model.width,
|
||||
height: model.height
|
||||
},
|
||||
style: {
|
||||
lineWidth: style.StationStand.safeStand.lineWidth || 0,
|
||||
stroke: style.StationStand.safeStand.spareStrokeColor || style.sidelineColor
|
||||
}
|
||||
});
|
||||
if (style.StationStand.safeStand.standType && style.StationStand.safeStand.standType == 'notFill') {
|
||||
this.stand && this.stand.setStyle('lineWidth', 2);
|
||||
} else {
|
||||
this.stand && this.stand.setStyle('fill', style.StationStand.safeStand.spareColor);
|
||||
}
|
||||
this.add(this.stand);
|
||||
}
|
||||
}
|
||||
|
||||
setColor(color) {
|
||||
const style = this.model.style;
|
||||
if (style.StationStand.safeStand.standType && style.StationStand.safeStand.standType == 'notFill') {
|
||||
this.stand && this.stand.setStyle('stroke', color);
|
||||
} else {
|
||||
this.stand && this.stand.setStyle('fill', color);
|
||||
}
|
||||
}
|
||||
|
||||
recover() {
|
||||
const style = this.model.style;
|
||||
if (!style.StationStand.safeStand.special) {
|
||||
this.setColor(style.StationStand.safeStand.spareColor);
|
||||
}
|
||||
}
|
||||
|
||||
execOperation(type) {
|
||||
const style = this.model.style;
|
||||
switch (type) {
|
||||
case 'designatedJumpStop': {
|
||||
this.setColor(style.StationStand.safeStand.designatedJumpStopColor);
|
||||
break;
|
||||
}
|
||||
case 'jumpStop': {
|
||||
this.setColor(style.StationStand.safeStand.jumpStopColor);
|
||||
break;
|
||||
}
|
||||
case 'trainStop': {
|
||||
this.setColor(style.StationStand.safeStand.stopColor);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// trainParking() {
|
||||
// this.execOperation('trainStop');
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
export default ESafeStand;
|
||||
@ -38,7 +38,6 @@ class ETime extends Group {
|
||||
}
|
||||
|
||||
setName(val) {
|
||||
this.create();
|
||||
this.time.setStyle('text', val);
|
||||
}
|
||||
|
||||
@ -59,6 +58,14 @@ class ETime extends Group {
|
||||
recover() {
|
||||
this.hideMode();
|
||||
}
|
||||
|
||||
setState(model) {
|
||||
// 停站时间
|
||||
if (Number(model.parkingTime) > 0) {
|
||||
this.showMode();
|
||||
this.setName(model.parkingTime);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ETime;
|
||||
|
||||
@ -60,6 +60,11 @@ class ETrainDepart extends Group {
|
||||
recover() {
|
||||
this.hideMode();
|
||||
}
|
||||
|
||||
setState(model) {
|
||||
// 停车
|
||||
model.trainParking && this.showMode(model.remainTime);
|
||||
}
|
||||
}
|
||||
|
||||
export default ETrainDepart;
|
||||
|
||||
@ -53,6 +53,11 @@ class ETrainStop extends Group {
|
||||
recover() {
|
||||
this.hideMode();
|
||||
}
|
||||
|
||||
setState(model) {
|
||||
// 停车
|
||||
model.trainParking && this.showMode();
|
||||
}
|
||||
}
|
||||
|
||||
export default ETrainStop;
|
||||
|
||||
75
src/jmapNew/shape/StationStand/detain/EDetain.js
Normal file
75
src/jmapNew/shape/StationStand/detain/EDetain.js
Normal file
@ -0,0 +1,75 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Text from 'zrender/src/graphic/Text';
|
||||
|
||||
class EDetain extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.detain = null;
|
||||
this.isNew = false;
|
||||
}
|
||||
|
||||
create(deviceParam) {
|
||||
if (!this.isNew) {
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
this.isNew = true;
|
||||
|
||||
/** 站台扣车*/
|
||||
const detainD = model.right ? 1 : -1;
|
||||
const detainX = model.position.x - detainD * (deviceParam.offset.x - model.width / 2);
|
||||
const detainY = model.position.y + detainD * (deviceParam.offset.y - model.height / 2);
|
||||
|
||||
this.detain = new Text({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
position: [0, 0],
|
||||
style: {
|
||||
x: detainX,
|
||||
y: detainY,
|
||||
text: deviceParam.text,
|
||||
fontSize: `${deviceParam.fontSize}px`,
|
||||
fontFamily: style.fontFamily,
|
||||
textFill: deviceParam.centerTrainColor,
|
||||
textStroke: style.backgroundColor,
|
||||
textAlign: style.textStyle.textAlign,
|
||||
textVerticalAlign: deviceParam.textVerticalAlign || style.textStyle.textVerticalAlign
|
||||
}
|
||||
});
|
||||
this.add(this.detain);
|
||||
}
|
||||
}
|
||||
|
||||
setColor(color) {
|
||||
this.detain.setStyle('textFill', color);
|
||||
}
|
||||
|
||||
recover() {
|
||||
this.hideMode();
|
||||
}
|
||||
|
||||
hideMode() {
|
||||
this.detain && this.detain.hide();
|
||||
}
|
||||
|
||||
showMode(deviceParam) {
|
||||
this.create(deviceParam);
|
||||
this.detain && this.detain.show();
|
||||
}
|
||||
|
||||
setState(model, deviceParam = this.model.style.StationStand.detainNormal) {
|
||||
/** 设置扣车*/
|
||||
if (model.stationHoldTrain && model.centerHoldTrain) {
|
||||
this.showMode(deviceParam);
|
||||
this.setColor(deviceParam.andCenterTrainColor);
|
||||
} else if (model.stationHoldTrain) {
|
||||
this.showMode(deviceParam);
|
||||
this.setColor(deviceParam.detainTrainTextColor);
|
||||
} else if (model.centerHoldTrain) {
|
||||
this.showMode(deviceParam);
|
||||
this.setColor(deviceParam.centerTrainColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default EDetain;
|
||||
@ -76,21 +76,15 @@ class EDetainCircle extends Group {
|
||||
this.setColor(style.StationStand.detainCircle.defaultColor);
|
||||
}
|
||||
|
||||
holdTrain(type) {
|
||||
setState(model) {
|
||||
const style = this.model.style;
|
||||
switch (type) {
|
||||
case 'centerAndTrain': {
|
||||
/** 设置扣车*/
|
||||
if (model.stationHoldTrain && model.centerHoldTrain) {
|
||||
this.setColor(style.StationStand.detainCircle.centerTrainColor);
|
||||
break;
|
||||
}
|
||||
case 'centerDetain': {
|
||||
} else if (model.stationHoldTrain) {
|
||||
this.setColor(style.StationStand.detainCircle.centerTrainColor);
|
||||
break;
|
||||
}
|
||||
case 'trainDetain': {
|
||||
} else if (model.centerHoldTrain) {
|
||||
this.setColor(style.StationStand.detainCircle.centerTrainColor);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
63
src/jmapNew/shape/StationStand/detain/EDetainHollow.js
Normal file
63
src/jmapNew/shape/StationStand/detain/EDetainHollow.js
Normal file
@ -0,0 +1,63 @@
|
||||
import Circle from 'zrender/src/graphic/shape/Circle';
|
||||
import EDetain from './EDetain';
|
||||
|
||||
class EDetainHollow extends EDetain {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.isNew = false;
|
||||
}
|
||||
|
||||
create() {
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
/** 站台扣车*/
|
||||
const detainD = model.right ? 1 : -1;
|
||||
const detainX = model.position.x - detainD * (style.StationStand.detainHollow.offset.x - model.width / 2);
|
||||
const detainY = model.position.y + detainD * (style.StationStand.detainHollow.offset.y - model.height / 2);
|
||||
if (!this.isNew) {
|
||||
super.create(style.StationStand.detainHollow);
|
||||
const offsetX = model.right ? 8 : -8;
|
||||
this.circleDetain = new Circle({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
shape: {
|
||||
cx: detainX + offsetX,
|
||||
cy: detainY - 3,
|
||||
r: 2
|
||||
},
|
||||
style: {
|
||||
fill: '#000',
|
||||
lineWidth: 1,
|
||||
stroke: '#FFF'
|
||||
}
|
||||
});
|
||||
this.add(this.circleDetain);
|
||||
this.isNew = true;
|
||||
}
|
||||
}
|
||||
|
||||
setColor(color) {
|
||||
super.setColor(color);
|
||||
}
|
||||
|
||||
recover() {
|
||||
this.hideMode();
|
||||
}
|
||||
|
||||
hideMode() {
|
||||
super.hideMode();
|
||||
this.circleDetain && this.circleDetain.hide();
|
||||
}
|
||||
|
||||
showMode(deviceType) {
|
||||
super.showMode(deviceType);
|
||||
this.circleDetain && this.circleDetain.show();
|
||||
}
|
||||
|
||||
setState(model) {
|
||||
super.setState(model, this.model.style.StationStand.detainHollow);
|
||||
}
|
||||
|
||||
}
|
||||
export default EDetainHollow;
|
||||
@ -57,24 +57,18 @@ class EDetainCircle extends Group {
|
||||
this.setHide();
|
||||
}
|
||||
|
||||
holdTrain(type) {
|
||||
setState(model) {
|
||||
const style = this.model.style;
|
||||
switch (type) {
|
||||
case 'centerAndTrain': {
|
||||
/** 设置扣车*/
|
||||
if (model.stationHoldTrain && model.centerHoldTrain) {
|
||||
this.showMode();
|
||||
this.setColor(style.StationStand.detainRect.centerTrainColor);
|
||||
break;
|
||||
}
|
||||
case 'centerDetain': {
|
||||
this.showMode();
|
||||
this.setColor(style.StationStand.detainRect.centerTrainColor);
|
||||
break;
|
||||
}
|
||||
case 'trainDetain': {
|
||||
} else if (model.stationHoldTrain) {
|
||||
this.showMode();
|
||||
this.setColor(style.StationStand.detainRect.detainTrainTextColor);
|
||||
break;
|
||||
}
|
||||
} else if (model.centerHoldTrain) {
|
||||
this.showMode();
|
||||
this.setColor(style.StationStand.detainRect.centerTrainColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
59
src/jmapNew/shape/StationStand/emergent/EEmergentArrow.js
Normal file
59
src/jmapNew/shape/StationStand/emergent/EEmergentArrow.js
Normal file
@ -0,0 +1,59 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Polygon from 'zrender/src/graphic/shape/Polygon';
|
||||
import {arrow} from '../../utils/ShapePoints';
|
||||
|
||||
class EEmergentArrow extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.isNew = false;
|
||||
this.create();
|
||||
}
|
||||
|
||||
create() {
|
||||
if (!this.isNew) {
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
|
||||
const emergentOffset = model.inside ? style.StationStand.emergentArrow.insideOffset : style.StationStand.emergentArrow.outsideOffset;
|
||||
const emergentH = model.right ? 1 : -1;
|
||||
const emergentX = model.position.x + emergentH * emergentOffset.x;
|
||||
const emergentY = model.position.y + emergentH * emergentOffset.y;
|
||||
|
||||
const rotation = model.right == 1 ? Math.PI / 2 : Math.PI * 3 / 2;
|
||||
this.emergent = new Polygon({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
origin: [emergentX, emergentY],
|
||||
rotation: rotation,
|
||||
shape: {
|
||||
points: arrow(emergentX, emergentY, style.StationStand.emergentArrow.width, style.StationStand.emergentArrow.radiusR * 0.8)
|
||||
},
|
||||
style: {
|
||||
stroke: style.StationStand.emergentArrow.closeColor,
|
||||
fill: style.StationStand.emergentArrow.closeColor
|
||||
}
|
||||
});
|
||||
this.add(this.emergent);
|
||||
}
|
||||
}
|
||||
|
||||
recover() {
|
||||
this.hideMode();
|
||||
}
|
||||
|
||||
setState(model) {
|
||||
// 紧急停车
|
||||
model.emergencyClosed && this.showMode();
|
||||
}
|
||||
|
||||
hideMode() {
|
||||
this.emergent && this.emergent.hide();
|
||||
}
|
||||
|
||||
showMode() {
|
||||
this.create();
|
||||
this.emergent.show();
|
||||
}
|
||||
}
|
||||
export default EEmergentArrow;
|
||||
102
src/jmapNew/shape/StationStand/emergent/EEmergentCross.js
Normal file
102
src/jmapNew/shape/StationStand/emergent/EEmergentCross.js
Normal file
@ -0,0 +1,102 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Isogon from 'zrender/src/graphic/shape/Isogon';
|
||||
import Line from 'zrender/src/graphic/shape/Line';
|
||||
|
||||
class EEmergentCross extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.isNew = false;
|
||||
this.create();
|
||||
}
|
||||
|
||||
create() {
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
|
||||
const emergentOffset = model.inside ? style.StationStand.emergentCross.insideOffset : style.StationStand.emergentCross.outsideOffset;
|
||||
const emergentH = model.right ? 1 : -1;
|
||||
const emergentX = model.position.x + emergentH * emergentOffset.x;
|
||||
const emergentY = model.position.y + emergentH * emergentOffset.y;
|
||||
|
||||
model.r = style.StationStand.emergentCross.mergentR;
|
||||
model.n = style.StationStand.emergentCross.mergentN;
|
||||
|
||||
this.emergent = new Isogon({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
shape: {
|
||||
x: emergentX,
|
||||
y: emergentY,
|
||||
r: model.r,
|
||||
n: model.n
|
||||
},
|
||||
style: {
|
||||
lineWidth: 2,
|
||||
stroke:style.StationStand.emergentCross.defaultColor
|
||||
}
|
||||
});
|
||||
this.add(this.emergent);
|
||||
|
||||
this.emergent.rotation = Math.PI / 8;
|
||||
this.emergent.origin = [emergentX, emergentY];
|
||||
this.emergent.dirty();
|
||||
this.emergentLine1 = new Line({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
shape:{
|
||||
x1:emergentX - model.r * 0.5939,
|
||||
y1:emergentY - model.r * 0.7077,
|
||||
x2:emergentX + model.r * 0.5939,
|
||||
y2:emergentY + model.r * 0.7077
|
||||
},
|
||||
style:{
|
||||
lineWidth:2,
|
||||
stroke:style.StationStand.emergentCross.defaultColor
|
||||
}
|
||||
});
|
||||
this.emergentLine2 = new Line({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
shape:{
|
||||
x1:emergentX + model.r * 0.5939,
|
||||
y1:emergentY - model.r * 0.7077,
|
||||
x2:emergentX - model.r * 0.5939,
|
||||
y2:emergentY + model.r * 0.7077
|
||||
},
|
||||
style:{
|
||||
lineWidth:2,
|
||||
stroke:style.StationStand.emergentCross.defaultColor
|
||||
}
|
||||
});
|
||||
this.add(this.emergentLine1);
|
||||
this.add(this.emergentLine2);
|
||||
}
|
||||
|
||||
hideMode() {
|
||||
const style = this.model.style;
|
||||
this.setStyle(style.StationStand.emergentCross.defaultColor);
|
||||
}
|
||||
|
||||
setStyle(color) {
|
||||
this.emergent.setStyle('stroke', color);
|
||||
this.emergentLine1.setStyle('stroke', color);
|
||||
this.emergentLine2.setStyle('stroke', color);
|
||||
}
|
||||
|
||||
recover() {
|
||||
this.hideMode();
|
||||
}
|
||||
|
||||
setState(model) {
|
||||
// 紧急停车
|
||||
model.emergencyClosed && this.showMode();
|
||||
}
|
||||
|
||||
showMode() {
|
||||
const style = this.model.style;
|
||||
this.setStyle(style.StationStand.emergentCross.closeColor);
|
||||
}
|
||||
}
|
||||
|
||||
export default EEmergentCross;
|
||||
69
src/jmapNew/shape/StationStand/emergent/EEmergentRhombus.js
Normal file
69
src/jmapNew/shape/StationStand/emergent/EEmergentRhombus.js
Normal file
@ -0,0 +1,69 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Isogon from 'zrender/src/graphic/shape/Isogon';
|
||||
|
||||
class EEmergentRhombus extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.isNew = false;
|
||||
}
|
||||
|
||||
create() {
|
||||
if (!this.isNew) {
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
|
||||
const emergentOffset = model.inside ? style.StationStand.emergentRhombus.insideOffset : style.StationStand.emergentRhombus.outsideOffset;
|
||||
const emergentH = model.right ? 1 : -1;
|
||||
const emergentX = model.position.x + emergentH * emergentOffset.x;
|
||||
const emergentY = model.position.y + emergentH * emergentOffset.y;
|
||||
|
||||
model.r = style.StationStand.emergentRhombus.mergentR;
|
||||
model.n = style.StationStand.emergentRhombus.mergentN;
|
||||
|
||||
this.emergent = new Isogon({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
shape: {
|
||||
x: emergentX,
|
||||
y: emergentY,
|
||||
r: model.r,
|
||||
n: model.n
|
||||
},
|
||||
style: {
|
||||
lineWidth: 0,
|
||||
stroke:style.StationStand.emergentRhombus.closeColor,
|
||||
fill:style.StationStand.emergentRhombus.closeColor
|
||||
}
|
||||
});
|
||||
this.add(this.emergent);
|
||||
}
|
||||
}
|
||||
|
||||
hideMode() {
|
||||
this.emergent && this.emergent.hide();
|
||||
}
|
||||
|
||||
recover() {
|
||||
this.hideMode();
|
||||
}
|
||||
|
||||
setState(model) {
|
||||
// 紧急停车
|
||||
model.emergencyClosed && this.showMode();
|
||||
}
|
||||
|
||||
showMode() {
|
||||
this.create();
|
||||
this.emergent.show();
|
||||
if (this.model.style.StationStand.emergentRhombus.flicker) {
|
||||
this.emergent.getElement().animateStyle(true)
|
||||
.when(0, { fill: this.style.backgroundColor })
|
||||
.when(1000, { fill: this.style.StationStand.emergentRhombus.closeColor })
|
||||
.when(2000, { fill: this.style.backgroundColor })
|
||||
.start();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default EEmergentRhombus;
|
||||
@ -1,20 +1,36 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
// 站台元素
|
||||
import ESolidStand from './safeStand/ESolidStand';
|
||||
import EHollowStand from './safeStand/EHollowStand';
|
||||
import EGapStand from './safeStand/EGapStand';
|
||||
// 扣车元素
|
||||
import EDetain from './detain/EDetain';
|
||||
import EDetainHollow from './detain/EDetainHollow';
|
||||
import EDetainCircle from './detain/EDetainCircle';
|
||||
import EDetainRect from './detain/EDetainRect';
|
||||
// 跳停元素
|
||||
import EJump from './jump/EJump';
|
||||
import EJumpCircle from './jump/EJumpCircle';
|
||||
|
||||
import ETime from './ETime';
|
||||
import ELevel from './ELevel';
|
||||
import EReentry from './EReentry';
|
||||
import EDetain from './EDetain';
|
||||
import ESafeStand from './ESafeStand/index';
|
||||
import ESafeEmergent from './ESafeEmergent';
|
||||
|
||||
// 紧急停车
|
||||
import EEmergentCross from './emergent/EEmergentCross';
|
||||
import EEmergentArrow from './emergent/EEmergentArrow';
|
||||
import EEmergentRhombus from './emergent/EEmergentRhombus';
|
||||
|
||||
import EMouse from './EMouse';
|
||||
import EJump from './EJump';
|
||||
|
||||
import EHighlight from '../element/EHighlight';
|
||||
import ETrainStop from './ETrainStop';
|
||||
import ETrainDepart from './ETrainDepart';
|
||||
import EControl from '../element/EControl';
|
||||
import EDetainCircle from './EDetainCircle';
|
||||
import EDetainRect from './EDetainRect';
|
||||
|
||||
import EPatternFilter from './EPatternFilter';
|
||||
import {isShowThePrdType} from '../../utils/handlePath';
|
||||
import {traverseLineElements} from '../utils/ShapeStatusCovert';
|
||||
|
||||
class StationStand extends Group {
|
||||
constructor(model, style) {
|
||||
@ -43,31 +59,32 @@ class StationStand extends Group {
|
||||
const style = this.style;
|
||||
// // 站台所有的绘图元素
|
||||
const elementTypeList = {
|
||||
'safeStand':ESafeStand, // 列车站台图形
|
||||
'emergent':ESafeEmergent, // 站台紧急关闭
|
||||
'detainCarNormal':EDetain, // 普通扣车图标
|
||||
'solidStand':ESolidStand, // 矩形实心站台 （普通站台样式）
|
||||
'hollowStand':EHollowStand, // 矩形空心站台 （西安二号线站台样式）
|
||||
'gapStand':EGapStand, // 分割站台（哈尔滨站台特有）
|
||||
|
||||
'emergentCross':EEmergentCross, // 站台紧急关闭 西安二号线 正八边形
|
||||
'emergentArrow':EEmergentArrow, // 站台紧急关闭 哈尔滨 箭头型
|
||||
'emergentRhombus':EEmergentRhombus, // 站台紧急关闭 普通 菱形
|
||||
|
||||
'jump':EJump, // 列车跳停
|
||||
'jumpCircle':EJumpCircle, // 列车跳停(带圆圈)
|
||||
|
||||
'detainNormal':EDetain, // 普通扣车图标
|
||||
'detainHollow':EDetainHollow, // 含空心圆的扣车图标
|
||||
'detainCircle':EDetainCircle, // 圆形扣车图标
|
||||
'detainRect':EDetainRect, // 矩形扣车图标
|
||||
|
||||
'stopTime':ETime, // 停站时间
|
||||
'level':ELevel, // 运行等级
|
||||
'patternFilter':EPatternFilter, // 模式筛选标识(西安二号线特殊的情况)
|
||||
'jump':EJump, // 列车停跳
|
||||
|
||||
'reentry':EReentry, // 站台折返策略
|
||||
'trainStop':ETrainStop, // 列车停站
|
||||
'trainDepart':ETrainDepart// 列车出发
|
||||
'trainStop':ETrainStop, // 列车停车点标识 哈尔滨一号线
|
||||
'trainDepart':ETrainDepart// 列车停站时间 哈尔滨一号线
|
||||
};
|
||||
// 遍历当前线路下的绘图元素
|
||||
const currentTypeList = style.StationStand.elemnetType;
|
||||
currentTypeList.forEach(element => {
|
||||
const ClassName = elementTypeList[element];
|
||||
this[element] = new ClassName({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z + style.StationStand[element].z,
|
||||
style: style,
|
||||
modelData:model
|
||||
});
|
||||
this.add(this[element]);
|
||||
});
|
||||
// 遍历当前线路下的绘图元素 组合模式
|
||||
traverseLineElements(style.StationStand, elementTypeList, model, style, this);
|
||||
}
|
||||
|
||||
createMouseEvent() {
|
||||
@ -203,6 +220,7 @@ class StationStand extends Group {
|
||||
this.add(this.downDetainLampButton);
|
||||
}
|
||||
}
|
||||
|
||||
setVisible(visible) {
|
||||
if (visible) {
|
||||
this.eachChild(elem => { elem.show(); });
|
||||
@ -219,169 +237,21 @@ class StationStand extends Group {
|
||||
});
|
||||
}
|
||||
|
||||
/** 列车停站*/
|
||||
stop() {
|
||||
if (!this.style.StationStand.safeStand.special) {
|
||||
this.safeStand && this.safeStand.execOperation('trainStop');
|
||||
} else {
|
||||
this.trainStop && this.trainStop.showMode();
|
||||
this.trainDepart && this.trainDepart.showMode(this.model.remainTime);
|
||||
}
|
||||
}
|
||||
|
||||
/** 车门开启 */
|
||||
doorOpen() {
|
||||
if (this.style.StationStand.safeStand.doorOpenColor) {
|
||||
this.safeStand && this.safeStand.setColor(this.style.StationStand.safeStand.doorOpenColor);
|
||||
}
|
||||
}
|
||||
|
||||
/** 站台紧急关闭*/
|
||||
emergentClose() {
|
||||
if (!this.style.StationStand.safeStand.special) {
|
||||
this.safeStand && this.safeStand.setColor(this.style.StationStand.safeStand.spareColor);
|
||||
}
|
||||
this.emergent && this.emergent.showMode();
|
||||
if (this.style.StationStand.emergent.flicker) {
|
||||
this.emergent.getElement().animateStyle(true)
|
||||
.when(0, { fill: this.style.backgroundColor })
|
||||
.when(1000, { fill: this.style.StationStand.emergent.closeColor })
|
||||
.when(2000, { fill: this.style.backgroundColor })
|
||||
.start();
|
||||
}
|
||||
}
|
||||
|
||||
/** 指定列车跳站*/
|
||||
designatedJumpStop() {
|
||||
this.safeStand && this.safeStand.execOperation('designatedJumpStop');
|
||||
this.jump && this.jump.showMode(0);
|
||||
}
|
||||
|
||||
/** 站台跳停*/
|
||||
jumpStop() {
|
||||
this.safeStand && this.safeStand.execOperation('jumpStop');
|
||||
this.jump && this.jump.showMode(1);
|
||||
}
|
||||
|
||||
/** 车站扣车*/
|
||||
standDetainTrain() {
|
||||
this.detainCarNormal && this.detainCarNormal.holdTrain('trainDetain');
|
||||
this.detainCircle && this.detainCircle.holdTrain('trainDetain');
|
||||
this.detainRect && this.detainRect.holdTrain('trainDetain');
|
||||
}
|
||||
|
||||
/** 中心扣车*/
|
||||
centerDetainTrain() {
|
||||
this.detainCarNormal && this.detainCarNormal.holdTrain('centerDetain');
|
||||
this.detainRect && this.detainRect.holdTrain('centerDetain');
|
||||
this.detainCircle && this.detainCircle.holdTrain('centerDetain');
|
||||
}
|
||||
|
||||
/** 中心+车站扣车*/
|
||||
standAndCenterDetainTrain() {
|
||||
this.detainCarNormal && this.detainCarNormal.holdTrain('centerAndTrain');
|
||||
this.detainRect && this.detainRect.holdTrain('centerAndTrain');
|
||||
this.detainCircle && this.detainCircle.holdTrain('centerAndTrain');
|
||||
}
|
||||
|
||||
/** 人工设置停战时间*/
|
||||
setManuallyArmisticeTime(val) {
|
||||
this.stopTime && this.stopTime.showMode();
|
||||
this.stopTime && this.stopTime.setName(val);
|
||||
}
|
||||
|
||||
/** 人工设置运行等级*/
|
||||
setManuallyOperationLevel(val) {
|
||||
this.level && this.level.showMode();
|
||||
this.level && this.level.setName(val);
|
||||
}
|
||||
|
||||
/** 无折返(默认)*/
|
||||
noReentry() {
|
||||
this.reentry && this.reentry.hideMode();
|
||||
}
|
||||
|
||||
/** 无人折返*/
|
||||
noHumanReentry() {
|
||||
this.reentry && this.reentry.execOperation('noHumanReentry');
|
||||
}
|
||||
/** 自动换端*/
|
||||
autoChangeEnds() {
|
||||
this.reentry && this.reentry.execOperation('autoChangeEnds');
|
||||
}
|
||||
|
||||
setState(model) {
|
||||
if (!this.isShowShape) return;
|
||||
// // 新版地图使用新版状态变更方式
|
||||
this.recover();
|
||||
|
||||
// const style = this.style;
|
||||
// const statusList = style.StationStand.relatedStatus;
|
||||
// const paramNameList = Object.keys(statusList);
|
||||
// paramNameList.forEach(element => {
|
||||
// if (model[element].type == Boolean) {
|
||||
// statusList[element].data.forEach(modelName=>{
|
||||
// this[modelName][element()];
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
|
||||
// // // // style.StationStand[element].relatedStatus
|
||||
// // // let currentMode={};
|
||||
// // // currentMode[]=model[]
|
||||
// // // this[element].setState();
|
||||
// });
|
||||
// model.trainParking && style.StationStand.relatedStatus['trainParking'].forEach(modelName=>{ this[modelName].trainParking(); });
|
||||
|
||||
model.trainParking && this.stop(); /** 列车停站*/
|
||||
model.emergencyClosed && this.emergentClose(); /** 站台紧急关闭*/
|
||||
|
||||
model.trainParking && this.doorOpen(); /** 车门开启 （西安二号线样式）*/
|
||||
|
||||
if (Number(model.parkingTime) > 0) {
|
||||
this.setManuallyArmisticeTime(model.parkingTime); // 设置站台停车时间
|
||||
}
|
||||
|
||||
if (Number(model.runLevelTime) > 0) {
|
||||
this.setManuallyOperationLevel(model.runLevelTime); // 设置站台间运行等级
|
||||
}
|
||||
|
||||
/** 设置跳停*/
|
||||
model.assignSkip && this.designatedJumpStop(); // 指定列车跳停
|
||||
model.allSkip && this.jumpStop(); // 站台全部跳停
|
||||
|
||||
/** 设置扣车*/
|
||||
if (model.stationHoldTrain && model.centerHoldTrain) {
|
||||
this.standAndCenterDetainTrain(); // 中心+车站扣车
|
||||
} else if (model.stationHoldTrain) {
|
||||
this.standDetainTrain(); // 车站扣车
|
||||
} else if (model.centerHoldTrain) {
|
||||
this.centerDetainTrain(); // 中心扣车
|
||||
}
|
||||
|
||||
/** 设置折返策略*/
|
||||
let reentryStrategy = '';
|
||||
if (model.reentryStrategy !== '04') {
|
||||
reentryStrategy = model.reentryStrategy;
|
||||
} else {
|
||||
reentryStrategy = model.defaultReentryStrategy;
|
||||
}
|
||||
switch (reentryStrategy) {
|
||||
case '04': /** 默认*/
|
||||
case '01':
|
||||
this.noReentry(); /** 无折返策略*/
|
||||
break;
|
||||
case '02':
|
||||
this.noHumanReentry(); /** 无人折返*/
|
||||
break;
|
||||
case '03':
|
||||
this.autoChangeEnds(); /** 自动换端*/
|
||||
break;
|
||||
}
|
||||
// 更新状态
|
||||
const currentTypeList = this.style.StationStand.elemnetType;
|
||||
currentTypeList.forEach(element => {
|
||||
this[element].setState(model);
|
||||
});
|
||||
}
|
||||
|
||||
getBoundingRect() {
|
||||
const rect = this.safeStand.getBoundingRect().clone();
|
||||
const element = this.style.StationStand.elemnetType[0];
|
||||
const rect = this[element].getBoundingRect().clone();
|
||||
return rect;
|
||||
}
|
||||
|
||||
|
||||
64
src/jmapNew/shape/StationStand/jump/EJump.js
Normal file
64
src/jmapNew/shape/StationStand/jump/EJump.js
Normal file
@ -0,0 +1,64 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Text from 'zrender/src/graphic/Text';
|
||||
|
||||
class EJump extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.isNew = false;
|
||||
}
|
||||
create(deviceParam) {
|
||||
if (!this.isNew) {
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
this.isNew = true;
|
||||
|
||||
const jumpDirct = model.right ? -1 : 1;
|
||||
const jumpX = model.position.x - jumpDirct * (deviceParam.offset.x - model.width / 2);
|
||||
const jumpY = model.position.y + jumpDirct * deviceParam.offset.y;
|
||||
|
||||
this.jump = new Text({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
style: {
|
||||
x: jumpX,
|
||||
y: jumpY,
|
||||
fontWeight: deviceParam.fontWeight,
|
||||
fontSize: deviceParam.fontSize,
|
||||
fontFamily: style.fontFamily,
|
||||
text: deviceParam.text,
|
||||
textFill: deviceParam.textColor,
|
||||
textAlign: style.textStyle.textAlign,
|
||||
textVerticalAlign: style.textStyle.textVerticalAlign
|
||||
}
|
||||
});
|
||||
this.add(this.jump);
|
||||
}
|
||||
}
|
||||
|
||||
setColor(color) {
|
||||
this.create();
|
||||
this.jump.setStyle('textFill', color);
|
||||
}
|
||||
|
||||
hideMode() {
|
||||
this.jump && this.jump.hide();
|
||||
}
|
||||
|
||||
showMode(deviceParam) {
|
||||
this.create(deviceParam);
|
||||
this.jump.show();
|
||||
}
|
||||
recover() {
|
||||
this.hideMode();
|
||||
}
|
||||
|
||||
setState(model, deviceParam = this.model.style.StationStand.jump) {
|
||||
// 列车跳停
|
||||
model.assignSkip && this.showMode(deviceParam);
|
||||
// 全部跳停
|
||||
model.allSkip && this.showMode(deviceParam);
|
||||
}
|
||||
}
|
||||
|
||||
export default EJump;
|
||||
62
src/jmapNew/shape/StationStand/jump/EJumpCircle.js
Normal file
62
src/jmapNew/shape/StationStand/jump/EJumpCircle.js
Normal file
@ -0,0 +1,62 @@
|
||||
import Arc from 'zrender/src/graphic/shape/Arc';
|
||||
import EJump from './EJump';
|
||||
|
||||
class EJumpCircle extends EJump {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.isNew = false;
|
||||
}
|
||||
create() {
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
|
||||
const jumpDirct = model.right ? -1 : 1;
|
||||
const jumpCX = model.position.x - jumpDirct * (style.StationStand.jumpCircle.offset.x - model.width / 2);
|
||||
const jumpCY = model.position.y + jumpDirct * style.StationStand.jumpCircle.offset.y;
|
||||
|
||||
if (!this.isNew) {
|
||||
super.create(style.StationStand.jumpCircle);
|
||||
this.jumpArc = new Arc({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
shape: {
|
||||
cx: jumpCX,
|
||||
cy: jumpCY,
|
||||
r: style.StationStand.jumpCircle.r
|
||||
},
|
||||
style: {
|
||||
stroke: style.StationStand.jumpCircle.arcColor,
|
||||
fill: style.StationStand.jumpCircle.fillColor
|
||||
}
|
||||
});
|
||||
this.add(this.jumpArc);
|
||||
this.jumpArc.hide();
|
||||
}
|
||||
}
|
||||
|
||||
hideMode() {
|
||||
super.hideMode();
|
||||
this.jumpArc && this.jumpArc.hide();
|
||||
}
|
||||
|
||||
showMode(isAllJump) {
|
||||
super.showMode(this.model.style.StationStand.jumpCircle);
|
||||
if (isAllJump) { // 站台跳停
|
||||
this.jumpArc && this.jumpArc.show();
|
||||
}
|
||||
}
|
||||
|
||||
recover() {
|
||||
this.hideMode();
|
||||
}
|
||||
|
||||
setState(model) {
|
||||
// 列车跳停
|
||||
model.assignSkip && this.showMode(0);
|
||||
// 全部跳停
|
||||
model.allSkip && this.showMode(1);
|
||||
}
|
||||
|
||||
}
|
||||
export default EJumpCircle;
|
||||
@ -10,36 +10,35 @@ class EGapStand extends Group {
|
||||
}
|
||||
|
||||
create() {
|
||||
const model = this.model;
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
const standX = model.position.x - model.width / 2;
|
||||
const standY = model.position.y - model.height / 2;
|
||||
|
||||
this.stand1 = new Rect({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z + 1,
|
||||
shape: {
|
||||
x: model.x,
|
||||
y: model.y,
|
||||
x: standX,
|
||||
y: standY,
|
||||
width: model.width / 4 - 2,
|
||||
height: model.height
|
||||
},
|
||||
style: {
|
||||
lineWidth: style.StationStand.safeStand.lineWidth || 0,
|
||||
stroke: style.StationStand.safeStand.spareStrokeColor || style.sidelineColor,
|
||||
fill: style.StationStand.safeStand.spareColor
|
||||
fill: style.StationStand.gapStand.spareColor
|
||||
}
|
||||
});
|
||||
this.stand2 = new Rect({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z + 1,
|
||||
shape: {
|
||||
x: model.x + model.width * 3 / 4,
|
||||
y: model.y,
|
||||
x: standX + model.width * 3 / 4,
|
||||
y: standY,
|
||||
width: model.width / 4 - 2,
|
||||
height: model.height
|
||||
},
|
||||
style: {
|
||||
lineWidth: style.StationStand.safeStand.lineWidth || 0,
|
||||
stroke: style.StationStand.safeStand.spareStrokeColor || style.sidelineColor,
|
||||
fill: style.StationStand.safeStand.spareColor
|
||||
fill: style.StationStand.gapStand.spareColor
|
||||
}
|
||||
});
|
||||
let height = model.inside ? 7 : -12;
|
||||
@ -60,11 +59,11 @@ class EGapStand extends Group {
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
style: {
|
||||
x: model.x + model.width / 2,
|
||||
y: model.y + height,
|
||||
fontSize: style.StationStand.safeStand.headFontSize,
|
||||
x: standX + model.width / 2,
|
||||
y: standY + height,
|
||||
fontSize: style.StationStand.gapStand.headFontSize,
|
||||
text: model.name,
|
||||
textFill: style.StationStand.safeStand.textFill,
|
||||
textFill: style.StationStand.gapStand.textFill,
|
||||
textPosition: 'inside',
|
||||
textAlign: 'center'
|
||||
}
|
||||
@ -73,6 +72,13 @@ class EGapStand extends Group {
|
||||
this.add(this.stand2);
|
||||
this.add(this.standText);
|
||||
}
|
||||
|
||||
recover() {
|
||||
}
|
||||
|
||||
setState(model) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export default EGapStand;
|
||||
56
src/jmapNew/shape/StationStand/safeStand/EHollowStand.js
Normal file
56
src/jmapNew/shape/StationStand/safeStand/EHollowStand.js
Normal file
@ -0,0 +1,56 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Rect from 'zrender/src/graphic/shape/Rect';
|
||||
|
||||
class EHollowStand extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.create();
|
||||
}
|
||||
|
||||
create() {
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
const standX = model.position.x - model.width / 2;
|
||||
const standY = model.position.y - model.height / 2;
|
||||
|
||||
this.stand = new Rect({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
shape: {
|
||||
x: standX,
|
||||
y: standY,
|
||||
width: model.width,
|
||||
height: model.height
|
||||
},
|
||||
style: {
|
||||
lineWidth: 2,
|
||||
stroke: style.StationStand.hollowStand.spareStrokeColor || style.sidelineColor
|
||||
}
|
||||
});
|
||||
this.add(this.stand);
|
||||
}
|
||||
|
||||
setColor(color) {
|
||||
this.stand.setStyle('stroke', color);
|
||||
}
|
||||
|
||||
recover() {
|
||||
const style = this.model.style;
|
||||
this.setColor(style.StationStand.hollowStand.spareColor);
|
||||
}
|
||||
|
||||
setState(model) {
|
||||
const style = this.model.style;
|
||||
// 列车跳停
|
||||
model.assignSkip && this.setColor(style.StationStand.hollowStand.designatedJumpStopColor);
|
||||
// 全部跳停
|
||||
model.allSkip && this.setColor(style.StationStand.hollowStand.jumpStopColor);
|
||||
// 停车
|
||||
model.trainParking && this.setColor(style.StationStand.hollowStand.doorOpenColor);
|
||||
// 紧急停车
|
||||
model.emergencyClosed && this.setColor(this.style.StationStand.hollowStand.spareColor);
|
||||
}
|
||||
}
|
||||
|
||||
export default EHollowStand;
|
||||
55
src/jmapNew/shape/StationStand/safeStand/ESolidStand.js
Normal file
55
src/jmapNew/shape/StationStand/safeStand/ESolidStand.js
Normal file
@ -0,0 +1,55 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Rect from 'zrender/src/graphic/shape/Rect';
|
||||
|
||||
class ESolidStand extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.create();
|
||||
}
|
||||
|
||||
create() {
|
||||
const model = this.model.modelData;
|
||||
const style = this.model.style;
|
||||
const standX = model.position.x - model.width / 2;
|
||||
const standY = model.position.y - model.height / 2;
|
||||
|
||||
this.stand = new Rect({
|
||||
zlevel: this.model.zlevel,
|
||||
z: this.model.z,
|
||||
shape: {
|
||||
x: standX,
|
||||
y: standY,
|
||||
width: model.width,
|
||||
height: model.height
|
||||
},
|
||||
style: {
|
||||
'fill':style.StationStand.solidStand.spareColor
|
||||
}
|
||||
});
|
||||
this.add(this.stand);
|
||||
}
|
||||
|
||||
setColor(color) {
|
||||
this.stand.setStyle('fill', color);
|
||||
}
|
||||
|
||||
recover() {
|
||||
const style = this.model.style;
|
||||
this.setColor(style.StationStand.solidStand.spareColor);
|
||||
}
|
||||
|
||||
setState(model) {
|
||||
const style = this.model.style;
|
||||
// 列车跳停
|
||||
model.assignSkip && this.setColor(style.StationStand.solidStand.designatedJumpStopColor);
|
||||
// 全部跳停
|
||||
model.allSkip && this.setColor(style.StationStand.solidStand.jumpStopColor);
|
||||
// 停车
|
||||
model.trainParking && this.setColor(style.StationStand.solidStand.stopColor);
|
||||
// 紧急停车
|
||||
model.emergencyClosed && this.setColor(this.style.StationStand.solidStand.spareColor);
|
||||
}
|
||||
}
|
||||
|
||||
export default ESolidStand;
|
||||
@ -1,6 +1,6 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import TrainBodyBox from './TrainBodyBox';
|
||||
import '../StationStand/EDetain';
|
||||
// import '../StationStand/EDetain';
|
||||
import ETextName from '../element/ETextName'; // 名称文字 (共有)
|
||||
import EMouse from './EMouse';
|
||||
import store from '@/store/index_APP_TARGET';
|
||||
|
||||
16
src/jmapNew/shape/utils/ShapeStatusCovert.js
Normal file
16
src/jmapNew/shape/utils/ShapeStatusCovert.js
Normal file
@ -0,0 +1,16 @@
|
||||
// 中介者模式
|
||||
|
||||
/* 遍历当前线路下的绘图元素 组合模式 */
|
||||
export function traverseLineElements(currentType, elementTypeList, model, style, obj) {
|
||||
const currentTypeList = currentType.elemnetType;
|
||||
currentTypeList.forEach(element => {
|
||||
const ClassName = elementTypeList[element];
|
||||
obj[element] = new ClassName({
|
||||
zlevel: model.zlevel,
|
||||
z: 1 + currentType[element].z,
|
||||
style: style,
|
||||
modelData:model
|
||||
});
|
||||
obj.add(obj[element]);
|
||||
});
|
||||
}
|
||||
@ -214,17 +214,17 @@ export default {
|
||||
}
|
||||
|
||||
// 站台轨名称
|
||||
if (elem.isStandTrack) {
|
||||
if (elem.standTrack) {
|
||||
standTrackNameShow = this.nameLevels.indexOf(2) !== -1;
|
||||
}
|
||||
|
||||
// 折返轨名称
|
||||
if (elem.isReentryTrack) {
|
||||
if (elem.reentryTrack) {
|
||||
reentryTrackNameShow = this.nameLevels.indexOf(4) !== -1;
|
||||
}
|
||||
|
||||
// 转换轨名称
|
||||
if (elem.isTransferTrack) {
|
||||
if (elem.transferTrack) {
|
||||
transferTrackNameShow = this.nameLevels.indexOf(6) !== -1;
|
||||
}
|
||||
|
||||
|
||||
@ -214,17 +214,17 @@ export default {
|
||||
}
|
||||
|
||||
// 站台轨名称
|
||||
if (elem.isStandTrack) {
|
||||
if (elem.standTrack) {
|
||||
standTrackNameShow = this.nameLevels.indexOf(2) !== -1;
|
||||
}
|
||||
|
||||
// 折返轨名称
|
||||
if (elem.isReentryTrack) {
|
||||
if (elem.reentryTrack) {
|
||||
reentryTrackNameShow = this.nameLevels.indexOf(4) !== -1;
|
||||
}
|
||||
|
||||
// 转换轨名称
|
||||
if (elem.isTransferTrack) {
|
||||
if (elem.transferTrack) {
|
||||
transferTrackNameShow = this.nameLevels.indexOf(6) !== -1;
|
||||
}
|
||||
|
||||
|
||||
@ -128,6 +128,9 @@
|
||||
<occupancy-train-correlation ref="occupancyTrainCorrelation" />
|
||||
<modify-train-number ref="modifyTrainNumber" />
|
||||
<train-run-type ref="trainRunType" />
|
||||
<train-detail ref="trainDetail" />
|
||||
<all-train-detail ref="allTrainDetail" />
|
||||
<route-detail ref="routeDetail" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -178,6 +181,10 @@ import TrainIdAssociated from './menuDialog/trainIdAssociated';
|
||||
import OccupancyTrainCorrelation from './menuDialog/occupancyTrainCorrelation';
|
||||
import ModifyTrainNumber from './menuDialog/modifyTrainNumber';
|
||||
import TrainRunType from './menuDialog/trainRunType';
|
||||
import TrainDetail from './menuDialog/trainDetail';
|
||||
import AllTrainDetail from './menuDialog/allTrainDetail';
|
||||
import RouteDetail from './menuDialog/routeDetail';
|
||||
import Route from '../../../../views/newMap/newMapdraft/dataRelation/runLeveloperate/route';
|
||||
|
||||
export default {
|
||||
name: 'MenuBar',
|
||||
@ -222,7 +229,10 @@ export default {
|
||||
TrainIdAssociated,
|
||||
OccupancyTrainCorrelation,
|
||||
ModifyTrainNumber,
|
||||
TrainRunType
|
||||
TrainRunType,
|
||||
TrainDetail,
|
||||
AllTrainDetail,
|
||||
RouteDetail
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
@ -292,15 +302,15 @@ export default {
|
||||
children: [
|
||||
{
|
||||
title: '运行线',
|
||||
click: this.handleTrainDistribution
|
||||
click: this.handleTrainDistributionRunLine
|
||||
},
|
||||
{
|
||||
title: '班次',
|
||||
click: this.handleTrainDistribution
|
||||
click: this.handleTrainDistributionClass
|
||||
},
|
||||
{
|
||||
title: '往返',
|
||||
click: this.handleTrainDistribution
|
||||
click: this.handleTrainDistributionBack
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -384,15 +394,15 @@ export default {
|
||||
children: [
|
||||
{
|
||||
title: '详细列车信息',
|
||||
click: this.undeveloped
|
||||
click: this.showTrainDetail
|
||||
},
|
||||
{
|
||||
title: '所有列车',
|
||||
click: this.undeveloped
|
||||
click: this.showAllTrainDetail
|
||||
},
|
||||
{
|
||||
title: 'CBTC进路信息',
|
||||
click: this.undeveloped
|
||||
click: this.showRouteDetail
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -759,15 +769,15 @@ export default {
|
||||
children: [
|
||||
{
|
||||
title: '运行线',
|
||||
click: this.handleTrainDistribution
|
||||
click: this.handleTrainDistributionRunLine
|
||||
},
|
||||
{
|
||||
title: '班次',
|
||||
click: this.undeveloped
|
||||
click: this.handleTrainDistributionClass
|
||||
},
|
||||
{
|
||||
title: '往返',
|
||||
click: this.undeveloped
|
||||
click: this.handleTrainDistributionBack
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -851,15 +861,15 @@ export default {
|
||||
children: [
|
||||
{
|
||||
title: '详细列车信息',
|
||||
click: this.undeveloped
|
||||
click: this.showTrainDetail
|
||||
},
|
||||
{
|
||||
title: '所有列车',
|
||||
click: this.undeveloped
|
||||
click: this.showAllTrainDetail
|
||||
},
|
||||
{
|
||||
title: 'CBTC进路信息',
|
||||
click: this.undeveloped
|
||||
click: this.showRouteDetail
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1328,7 +1338,7 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
handleTrainDistribution() {
|
||||
handleTrainDistributionRunLine() {
|
||||
const operate = {
|
||||
type: 'bar',
|
||||
operation: ''
|
||||
@ -1337,7 +1347,33 @@ export default {
|
||||
if (valid) {
|
||||
this.closeMenu(true);
|
||||
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
|
||||
this.$refs.trainDistribution.doShow();
|
||||
this.$refs.trainDistribution.doShow(operate, 'first');
|
||||
}
|
||||
});
|
||||
},
|
||||
handleTrainDistributionClass() {
|
||||
const operate = {
|
||||
type: 'bar',
|
||||
operation: ''
|
||||
};
|
||||
this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
|
||||
if (valid) {
|
||||
this.closeMenu(true);
|
||||
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
|
||||
this.$refs.trainDistribution.doShow(operate, 'second');
|
||||
}
|
||||
});
|
||||
},
|
||||
handleTrainDistributionBack() {
|
||||
const operate = {
|
||||
type: 'bar',
|
||||
operation: ''
|
||||
};
|
||||
this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
|
||||
if (valid) {
|
||||
this.closeMenu(true);
|
||||
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
|
||||
this.$refs.trainDistribution.doShow(operate, 'third');
|
||||
}
|
||||
});
|
||||
},
|
||||
@ -1902,6 +1938,45 @@ export default {
|
||||
this.$refs.trainRunType.doShow(operate);
|
||||
}
|
||||
});
|
||||
},
|
||||
showTrainDetail() {
|
||||
const operate = {
|
||||
type: 'bar',
|
||||
operation: ''
|
||||
};
|
||||
this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
|
||||
if (valid) {
|
||||
this.closeMenu(true);
|
||||
this.$store.dispatch('menuOperation/handleBreakFlag', {break:true});
|
||||
this.$refs.trainDetail.doShow(operate);
|
||||
}
|
||||
});
|
||||
},
|
||||
showAllTrainDetail() {
|
||||
const operate = {
|
||||
type: 'bar',
|
||||
operation: ''
|
||||
};
|
||||
this.$store.dispatch('training/nextNew', operate).then(({valid}) => {
|
||||
if (valid) {
|
||||
this.closeMenu(true);
|
||||
this.$store.dispatch('menuOperation/handleBreakFlag', {break: true});
|
||||
this.$refs.allTrainDetail.doShow(operate);
|
||||
}
|
||||
});
|
||||
},
|
||||
showRouteDetail() {
|
||||
const operate = {
|
||||
type: 'bar',
|
||||
operation: ''
|
||||
};
|
||||
this.$store.dispatch('training/nextNew', operate).then(({valid}) => {
|
||||
if (valid) {
|
||||
this.closeMenu(true);
|
||||
this.$store.dispatch('menuOperation/handleBreakFlag', {break:true});
|
||||
this.$refs.routeDetail.doShow(operate);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -1913,7 +1988,7 @@ export default {
|
||||
$height: 30px;
|
||||
$menuPadding: 10px;
|
||||
$menuItemHeight: 30px;
|
||||
$menuItemWidth: 180px;
|
||||
$menuItemWidth: 200px;
|
||||
$menuItemPadding: 5px;
|
||||
|
||||
#menuBar {
|
||||
@ -1986,7 +2061,7 @@ export default {
|
||||
.menu-ul {
|
||||
display: none;
|
||||
position: relative;
|
||||
left: 180px;
|
||||
left: 196px;
|
||||
transform: translateY(-30px);
|
||||
list-style: none;
|
||||
padding-left: 0 !important;
|
||||
|
||||
170
src/jmapNew/theme/ningbo_03/menus/menuDialog/allTrainDetail.vue
Normal file
170
src/jmapNew/theme/ningbo_03/menus/menuDialog/allTrainDetail.vue
Normal file
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag class="ningbo-01__systerm route-setting" :title="title" :visible.sync="show" width="900px" :before-close="doClose" :z-index="2000" :modal="false" :close-on-click-modal="false">
|
||||
<el-row>
|
||||
<el-table :data="trainList" height="500px">
|
||||
<el-table-column prop="code" label="列车" />
|
||||
<el-table-column prop="trainID" label="列车ID" />
|
||||
<el-table-column prop="class" label="班次" />
|
||||
<el-table-column prop="runLine" label="运行线" />
|
||||
<el-table-column prop="nextStation" label="下一站" />
|
||||
<el-table-column prop="position" label="位置" />
|
||||
<el-table-column prop="atsTracking" label="ATS追踪" />
|
||||
<el-table-column prop="trainMode" label="模式" />
|
||||
<el-table-column prop="autoAvailability" label="自动操作可用性" />
|
||||
<el-table-column prop="state" label="状态" />
|
||||
<el-table-column prop="direction" label="运行方向" />
|
||||
<el-table-column prop="actualSpeed" label="实际速度" />
|
||||
<el-table-column prop="stopQuasi" label="停准" />
|
||||
<el-table-column prop="door" label="车门" />
|
||||
<el-table-column prop="emergencyBrakingCondition" label="紧急制动状态" />
|
||||
<el-table-column prop="trainOffset" label="列车偏差" />
|
||||
<el-table-column prop="acceleratedSpeed" label="加速度/制动率" />
|
||||
<el-table-column prop="actualRunType" label="实际运行类型" />
|
||||
<el-table-column prop="runType" label="运行类型" />
|
||||
<el-table-column prop="frontPosition" label="车头位置" />
|
||||
<el-table-column prop="rearPosition" label="车尾位置" />
|
||||
<el-table-column prop="lmaStart" label="LMA起点" />
|
||||
<el-table-column prop="lmaEnd" label="LMA终点" />
|
||||
<el-table-column prop="amtStart" label="AMT起点" />
|
||||
<el-table-column prop="amtEnd" label="AMT终点" />
|
||||
<el-table-column prop="stopStand" label="停止站台" />
|
||||
<el-table-column prop="jumpStand" label="站台跳停" />
|
||||
</el-table>
|
||||
</el-row>
|
||||
<el-row justify="center" class="button-group">
|
||||
<el-col :span="4" :offset="1">
|
||||
<el-button :id="domIdConfirm" type="primary" :loading="loading" @click="commit">确定(O)</el-button>
|
||||
</el-col>
|
||||
<el-col :span="4" :offset="2">
|
||||
<el-button>应用(A)</el-button>
|
||||
</el-col>
|
||||
<el-col :span="4" :offset="2">
|
||||
<el-button :id="domIdCancel" @click="cancel">关闭(C)</el-button>
|
||||
</el-col>
|
||||
<el-col :span="4" :offset="2">
|
||||
<el-button>帮助(H)</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<notice-info ref="noticeInfo" pop-class="ningbo-01__systerm" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
|
||||
import NoticeInfo from '@/jmapNew/theme/components/menus/childDialog/noticeInfo';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'ModifyTrainNumber',
|
||||
components: {
|
||||
NoticeInfo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status: false,
|
||||
command: true,
|
||||
allChecked: false,
|
||||
dialogShow: false,
|
||||
loading: false,
|
||||
selected: null,
|
||||
activeName: 'first',
|
||||
operate: {},
|
||||
allCheck: false,
|
||||
slidingTime: 0,
|
||||
data: [],
|
||||
trainId: '',
|
||||
groupNumber: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'trainList'
|
||||
]),
|
||||
show() {
|
||||
return this.dialogShow && !this.$store.state.menuOperation.break;
|
||||
},
|
||||
domIdCancel() {
|
||||
return this.dialogShow ? OperationEvent.Command.cancel.menu.domId : '';
|
||||
},
|
||||
domIdChoose() {
|
||||
return this.dialogShow ? OperationEvent.Signal.arrangementRoute.choose.domId : '';
|
||||
},
|
||||
domIdConfirm() {
|
||||
return this.dialogShow ? OperationEvent.Signal.arrangementRoute.menu.domId : '';
|
||||
},
|
||||
title() {
|
||||
return '所有列车';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.keyboardEnterCount': function (val) {
|
||||
if (this.show) {
|
||||
this.commit();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.$store.dispatch('training/tipReload');
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
doShow(operate, selected) {
|
||||
this.selected = selected;
|
||||
this.operate = operate;
|
||||
// 如果不是断点激活，而是第一次显示，则需要设置初始值
|
||||
this.dialogShow = true;
|
||||
this.$nextTick(function () {
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
});
|
||||
},
|
||||
doClose() {
|
||||
this.loading = false;
|
||||
this.dialogShow = false;
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
},
|
||||
commit() {
|
||||
},
|
||||
handleClick() {
|
||||
|
||||
},
|
||||
cancel() {
|
||||
const operate = {
|
||||
operation: OperationEvent.Command.cancel.menu.operation
|
||||
};
|
||||
this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
|
||||
if (valid) {
|
||||
this.doClose();
|
||||
}
|
||||
}).catch(() => {
|
||||
this.doClose();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.menu-li {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
list-style:none;
|
||||
padding-left: 5px;
|
||||
border-right: 2px solid #696969;
|
||||
color: #000;
|
||||
}
|
||||
.set-status-box {
|
||||
position: relative;
|
||||
border: 1px solid #AFAFAF;
|
||||
padding: 15px 5px 5px;
|
||||
}
|
||||
.set-status-title{
|
||||
position: relative;
|
||||
top: 15px;
|
||||
background: #F0F0F0;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
z-index: 22;
|
||||
left: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -30,7 +30,23 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="信号机" name="second">信号机</el-tab-pane>
|
||||
<el-tab-pane label="信号机" name="second">
|
||||
<el-row>
|
||||
<el-col :span="11">
|
||||
<el-table :data="signalList" height="380px">
|
||||
<el-table-column prop="name" label="信号机" />
|
||||
<el-table-column prop="show" label="显示" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :span="12" :offset="1">
|
||||
<el-table :data="tempData" height="340px">
|
||||
<el-table-column prop="groupNumber" label="路径" />
|
||||
<el-table-column prop="groupNumber" label="运行方向" />
|
||||
</el-table>
|
||||
<el-checkbox v-model="displayCopyPath">显示复制路径</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -79,7 +95,8 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'stationStandList'
|
||||
'stationStandList',
|
||||
'signalList'
|
||||
]),
|
||||
show() {
|
||||
return this.dialogShow && !this.$store.state.menuOperation.break;
|
||||
|
||||
@ -7,6 +7,10 @@
|
||||
<el-table-column prop="name" label="可用状态" />
|
||||
<el-table-column prop="name" label="运行方向" />
|
||||
<el-table-column prop="groupNumber" label="区间车站" />
|
||||
<el-table-column prop="stand1" label="区间边界站台1" />
|
||||
<el-table-column prop="stand2" label="区间边界站台2" />
|
||||
<el-table-column prop="number1" label="当前区间列车数量" />
|
||||
<el-table-column prop="maxNum" label="最大区间列车数量" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :span="7" :offset="1">
|
||||
@ -17,7 +21,6 @@
|
||||
<el-radio v-model="status" :label="false">禁用</el-radio>
|
||||
</div>
|
||||
<el-input v-model="value" size="small" style="position: relative; top: 80px;" />
|
||||
|
||||
<el-checkbox-group v-model="checkedDirection" style="position: relative; top: 90px;" @change="handleCheckedDirectionChange">
|
||||
<el-checkbox label="up">所有上行</el-checkbox>
|
||||
<el-checkbox label="down">所有下行</el-checkbox>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag class="ningbo-01__systerm route-setting" :title="title" :visible.sync="show" width="850px" :before-close="doClose" :z-index="2000" :modal="false" :close-on-click-modal="false">
|
||||
<el-dialog v-dialogDrag class="ningbo-01__systerm route-setting" :title="title" :visible.sync="show" width="900px" :before-close="doClose" :z-index="2000" :modal="false" :close-on-click-modal="false">
|
||||
<el-row>
|
||||
<el-col :span="4" class="content-left">
|
||||
<el-row>
|
||||
@ -60,8 +60,51 @@
|
||||
<el-input placeholder="PMI进路选择" size="mini" style="position: relative;top: -10px;" />
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="取消进路" name="second">取消进路</el-tab-pane>
|
||||
<el-tab-pane label="禁止进路" name="third">禁止进路</el-tab-pane>
|
||||
<el-tab-pane label="取消进路" name="second">
|
||||
<el-row>
|
||||
<div class="border-box">
|
||||
<div class="border-box-title">CBTC</div>
|
||||
<el-table :data="routeList" height="120px" style="position: relative;top: -15px;">
|
||||
<el-table-column prop="name" width="130" label="进路" />
|
||||
<el-table-column prop="area" label="区域" />
|
||||
<el-table-column prop="status" label="状态" />
|
||||
</el-table>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row class="border-box">
|
||||
<div class="border-box-title">后备</div>
|
||||
<el-table :data="routeList" height="160px" style="position: relative;top: -15px;">
|
||||
<el-table-column prop="name" width="130" label="进路" />
|
||||
<el-table-column prop="direction" label="运行方向" />
|
||||
<el-table-column prop="status" label="状态" />
|
||||
<el-table-column prop="pmi" width="50" label="PMI" />
|
||||
<el-table-column prop="signalModel" width="80" label="信号模式" />
|
||||
</el-table>
|
||||
<el-input placeholder="PMI进路选择" size="mini" style="position: relative;top: -10px;" />
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="禁止进路" name="third">
|
||||
<el-row class="border-box">
|
||||
<el-col :span="18">
|
||||
<div class="border-box-title">后备</div>
|
||||
<el-table :data="routeList" height="332px" style="position: relative;top: -15px;">
|
||||
<el-table-column prop="name" width="130" label="进路" />
|
||||
<el-table-column prop="direction" label="运行方向" />
|
||||
<el-table-column prop="status" label="状态" />
|
||||
<el-table-column prop="pmi" width="50" label="PMI" />
|
||||
<el-table-column prop="signalModel" width="80" label="信号模式" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="radio-box-title">禁止进路</div>
|
||||
<div class="radio-box">
|
||||
<el-radio v-model="forbidRoute" :label="true" style="display: block;margin-bottom: 10px;">设置(S)</el-radio>
|
||||
<el-radio v-model="forbidRoute" :label="false" style="display: block;">取消(N)</el-radio>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-input placeholder="PMI进路选择" size="mini" style="position: relative;top: -10px;" />
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -106,7 +149,8 @@ export default {
|
||||
activeName: 'first',
|
||||
tempData: [],
|
||||
checked: false,
|
||||
unlockType: ''
|
||||
unlockType: '',
|
||||
forbidRoute: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
149
src/jmapNew/theme/ningbo_03/menus/menuDialog/routeDetail.vue
Normal file
149
src/jmapNew/theme/ningbo_03/menus/menuDialog/routeDetail.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag class="ningbo-01__systerm route-setting" :title="title" :visible.sync="show" width="900px" :before-close="doClose" :z-index="2000" :modal="false" :close-on-click-modal="false">
|
||||
<el-row>
|
||||
<el-table :data="trainList" height="300px">
|
||||
<el-table-column prop="route" label="进路" />
|
||||
<el-table-column prop="area" label="区域" />
|
||||
<el-table-column prop="userType" label="用户类型" />
|
||||
<el-table-column prop="user" label="用户" />
|
||||
<el-table-column prop="state" label="状态" />
|
||||
<el-table-column prop="reservedObstacle" label="预留障碍物" />
|
||||
<el-table-column prop="reserved" label="预留" />
|
||||
<el-table-column prop="authorizedType" label="授权类型" />
|
||||
<el-table-column prop="authorizedObstruction" label="授权障碍物" />
|
||||
</el-table>
|
||||
</el-row>
|
||||
<el-row justify="center" class="button-group">
|
||||
<el-col :span="4" :offset="1">
|
||||
<el-button :id="domIdConfirm" type="primary" :loading="loading" @click="commit">打印(P)</el-button>
|
||||
</el-col>
|
||||
<el-col :span="4" :offset="2">
|
||||
<el-button :id="domIdCancel" @click="cancel">关闭(C)</el-button>
|
||||
</el-col>
|
||||
<el-col :span="4" :offset="2">
|
||||
<el-button>帮助(H)</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<notice-info ref="noticeInfo" pop-class="ningbo-01__systerm" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
|
||||
import NoticeInfo from '@/jmapNew/theme/components/menus/childDialog/noticeInfo';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'ModifyTrainNumber',
|
||||
components: {
|
||||
NoticeInfo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status: false,
|
||||
command: true,
|
||||
allChecked: false,
|
||||
dialogShow: false,
|
||||
loading: false,
|
||||
selected: null,
|
||||
activeName: 'first',
|
||||
operate: {},
|
||||
allCheck: false,
|
||||
slidingTime: 0,
|
||||
data: [],
|
||||
trainId: '',
|
||||
groupNumber: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'trainList'
|
||||
]),
|
||||
show() {
|
||||
return this.dialogShow && !this.$store.state.menuOperation.break;
|
||||
},
|
||||
domIdCancel() {
|
||||
return this.dialogShow ? OperationEvent.Command.cancel.menu.domId : '';
|
||||
},
|
||||
domIdChoose() {
|
||||
return this.dialogShow ? OperationEvent.Signal.arrangementRoute.choose.domId : '';
|
||||
},
|
||||
domIdConfirm() {
|
||||
return this.dialogShow ? OperationEvent.Signal.arrangementRoute.menu.domId : '';
|
||||
},
|
||||
title() {
|
||||
return 'CBTC进路消息';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.map.keyboardEnterCount': function (val) {
|
||||
if (this.show) {
|
||||
this.commit();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.$store.dispatch('training/tipReload');
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
doShow(operate, selected) {
|
||||
this.selected = selected;
|
||||
this.operate = operate;
|
||||
// 如果不是断点激活，而是第一次显示，则需要设置初始值
|
||||
this.dialogShow = true;
|
||||
this.$nextTick(function () {
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
});
|
||||
},
|
||||
doClose() {
|
||||
this.loading = false;
|
||||
this.dialogShow = false;
|
||||
this.$store.dispatch('training/emitTipFresh');
|
||||
},
|
||||
commit() {
|
||||
},
|
||||
handleClick() {
|
||||
|
||||
},
|
||||
cancel() {
|
||||
const operate = {
|
||||
operation: OperationEvent.Command.cancel.menu.operation
|
||||
};
|
||||
this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
|
||||
if (valid) {
|
||||
this.doClose();
|
||||
}
|
||||
}).catch(() => {
|
||||
this.doClose();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.menu-li {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
list-style:none;
|
||||
padding-left: 5px;
|
||||
border-right: 2px solid #696969;
|
||||
color: #000;
|
||||
}
|
||||
.set-status-box {
|
||||
position: relative;
|
||||
border: 1px solid #AFAFAF;
|
||||
padding: 15px 5px 5px;
|
||||
}
|
||||
.set-status-title{
|
||||
position: relative;
|
||||
top: 15px;
|
||||
background: #F0F0F0;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
z-index: 22;
|
||||
left: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -6,9 +6,10 @@
|
||||
<el-table-column prop="name" label="轨道" />
|
||||
<el-table-column prop="blockStatus" label="MAU" />
|
||||
<el-table-column prop="blockProcess" label="临时限速" />
|
||||
<el-table-column prop="unblockProcess" label="PM临时限速" />
|
||||
<el-table-column prop="blockProcess" label="设置临时限速进程" width="160" />
|
||||
<el-table-column prop="unblockProcess" label="用户里程起点" />
|
||||
<el-table-column prop="unblockProcess" label="PM临时限速" width="110" />
|
||||
<el-table-column prop="blockProcess" label="设置临时限速进程" width="140" />
|
||||
<el-table-column prop="unblockProcess" label="用户里程起点" width="110" />
|
||||
<el-table-column prop="unblockProcess" label="用户里程终点" width="110" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
@ -105,7 +106,7 @@ export default {
|
||||
return this.dialogShow ? OperationEvent.Signal.arrangementRoute.menu.domId : '';
|
||||
},
|
||||
title() {
|
||||
return '初始化开放轨道';
|
||||
return '确认/取消设置临时限速区域';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
@ -8,6 +8,14 @@
|
||||
<el-table-column prop="blockProcess" label="状态" />
|
||||
<el-table-column prop="unblockProcess" label="临时限速" />
|
||||
<el-table-column prop="unblockProcess" label="PM临时限速" />
|
||||
<el-table-column prop="unblockProcess" label="站台" />
|
||||
<el-table-column prop="unblockProcess" label="闭塞区段" />
|
||||
<el-table-column prop="unblockProcess" label="打开进程" />
|
||||
<el-table-column prop="unblockProcess" label="关闭进程" />
|
||||
<el-table-column prop="unblockProcess" label="设置临时限速进程" />
|
||||
<el-table-column prop="unblockProcess" label="清除临时限速进程" />
|
||||
<el-table-column prop="unblockProcess" label="用户里程起点" />
|
||||
<el-table-column prop="unblockProcess" label="用户里程终点" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
@ -7,20 +7,26 @@
|
||||
<el-table-column prop="status" label="错误代码" />
|
||||
<el-table-column prop="status" label="引导过程" />
|
||||
<el-table-column prop="status" width="160" label="区间信号机引导过程" />
|
||||
<el-table-column prop="status" label="运行锁闭" />
|
||||
<el-table-column prop="status" label="允许锁闭" />
|
||||
<el-table-column prop="agree" label="同意取消" />
|
||||
<el-table-column prop="cancelProcess" label="取消进程" />
|
||||
<el-table-column prop="tempSpeedLimit" width="160" label="临时限速状态" />
|
||||
<el-table-column prop="allowSpeed" label="允许速度" />
|
||||
<el-table-column prop="canOrdered" label="可命令" />
|
||||
<el-table-column prop="confirmProcess" label="确认进程" />
|
||||
<el-table-column prop="signalBlockState" width="160" label="信号机封锁状态" />
|
||||
<el-table-column prop="setBlockProcess" width="160" label="信号机封锁进程" />
|
||||
<el-table-column prop="cancelBlockProcess" width="160" label="解除封锁进程" />
|
||||
</el-table>
|
||||
</el-row>
|
||||
<el-row justify="center" class="button-group">
|
||||
<el-col :span="4" :offset="1">
|
||||
<el-button :id="domIdConfirm" type="primary" :loading="loading" @click="commit">确定(O)</el-button>
|
||||
<el-col :span="6" :offset="2">
|
||||
<el-button :id="domIdConfirm" type="primary" :loading="loading" @click="commit">打印(P)</el-button>
|
||||
</el-col>
|
||||
<el-col :span="4" :offset="2">
|
||||
<el-button>应用(A)</el-button>
|
||||
</el-col>
|
||||
<el-col :span="4" :offset="2">
|
||||
<el-col :span="6" :offset="2">
|
||||
<el-button :id="domIdCancel" @click="cancel">关闭(C)</el-button>
|
||||
</el-col>
|
||||
<el-col :span="4" :offset="2">
|
||||
<el-col :span="6" :offset="2">
|
||||
<el-button>帮助(H)</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -65,7 +71,7 @@ export default {
|
||||
return this.dialogShow ? OperationEvent.Signal.arrangementRoute.menu.domId : '';
|
||||
},
|
||||
title() {
|
||||
return this.operate.operation === OperationEvent.Signal.lock.menu.operation ? '初始化信号机封锁' : '初始化信号机解除封锁';
|
||||
return '信号机信息显示';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<el-table :data="switchList" height="300px">
|
||||
<el-table-column prop="name" label="道岔" />
|
||||
<el-table-column prop="blockStatus" label="请求或允许动岔" />
|
||||
<el-table-column prop="blockProcess" label="请求或允许动岔" />
|
||||
<el-table-column prop="blockProcess" label="请求或允许动岔输出错" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
|
||||
@ -135,7 +135,7 @@ export default {
|
||||
return this.dialogShow ? OperationEvent.Signal.arrangementRoute.menu.domId : '';
|
||||
},
|
||||
title() {
|
||||
return '设置/清除站台跳停';
|
||||
return '列车偏离';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<el-dialog v-dialogDrag class="ningbo-01__systerm route-setting" :title="title" :visible.sync="show" width="900px" :before-close="doClose" :z-index="2000" :modal="false" :close-on-click-modal="false">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-table :data="trainList" height="300px">
|
||||
<el-table :data="trainList" height="600px">
|
||||
<el-table-column prop="code" label="列车" />
|
||||
<el-table-column prop="area" label="班次" />
|
||||
<el-table-column prop="status" label="运行线" />
|
||||
@ -10,27 +10,173 @@
|
||||
</el-col>
|
||||
<el-col :span="18" style="padding-left: 5px;color: #000;">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>运行模式</span>
|
||||
<el-input v-model="train.runMode" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<span></span>
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>LMA起点</span>
|
||||
<el-input v-model="train.lmaStart" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>状态</span>
|
||||
<el-input v-model="train.status" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>LMA终点</span>
|
||||
<el-input v-model="train.lmaEnd" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>运行方向</span>
|
||||
<el-input v-model="train.runDirection" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>AMT起点</span>
|
||||
<el-input v-model="train.amtStart" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>车头位置</span>
|
||||
<el-input v-model="train.frontPosition" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>AMT终点</span>
|
||||
<el-input v-model="train.amtEnd" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>车尾位置</span>
|
||||
<el-input v-model="train.rearPosition" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>下一站</span>
|
||||
<el-input v-model="train.nextStation" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>停准</span>
|
||||
<el-input v-model="train.stopQuasi" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>列车跳停站台</span>
|
||||
<el-input v-model="train.jumpStand" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>车门状态</span>
|
||||
<el-input v-model="train.doorState" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>偏离运行线</span>
|
||||
<el-input v-model="train.runLineOffset" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>列车类型</span>
|
||||
<el-input v-model="train.trainType" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>偏离开始</span>
|
||||
<el-input v-model="train.offsetStart" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>EB状态</span>
|
||||
<el-input v-model="train.ebState" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>偏离恢复</span>
|
||||
<el-input v-model="train.offsetRecover" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>完整性</span>
|
||||
<el-input v-model="train.integrity" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>列车偏差</span>
|
||||
<el-input v-model="train.trainOffset" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>长度</span>
|
||||
<el-input v-model="train.length" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>停站时间</span>
|
||||
<el-input v-model="train.stopTime" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>司机ID号</span>
|
||||
<el-input v-model="train.driverId" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>下次发车时间</span>
|
||||
<el-input v-model="train.nextDepartureTime" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>方位</span>
|
||||
<el-input v-model="train.orientation" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>实际运行类型</span>
|
||||
<el-input v-model="train.actualOperationType" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>车体号</span>
|
||||
<el-input v-model="train.groupNumber" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>实际速度</span>
|
||||
<el-input v-model="train.actualSpeed" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>列车停靠站台</span>
|
||||
<el-input v-model="train.dockingPlatform" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex; justify-content: space-between;padding-left: 10px;">
|
||||
<span>加速度/制动率</span>
|
||||
<el-input v-model="train.acceleratedSpeed" size="mini" style="width: 120px;" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<span>记事簿</span>
|
||||
<el-input
|
||||
v-model="train.notebook"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
/>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row justify="center" class="button-group">
|
||||
<el-col :span="4" :offset="1">
|
||||
<el-button :id="domIdConfirm" type="primary" :loading="loading" @click="commit">确定(O)</el-button>
|
||||
</el-col>
|
||||
<el-col :span="4" :offset="2">
|
||||
<el-button>应用(A)</el-button>
|
||||
</el-col>
|
||||
<el-col :span="4" :offset="2">
|
||||
<el-col :span="6" :offset="2">
|
||||
<el-button :id="domIdCancel" @click="cancel">关闭(C)</el-button>
|
||||
</el-col>
|
||||
<el-col :span="4" :offset="2">
|
||||
<el-col :span="6" :offset="2">
|
||||
<el-button :id="domIdCancel" @click="cancel">打印(P)</el-button>
|
||||
</el-col>
|
||||
<el-col :span="6" :offset="2">
|
||||
<el-button>帮助(H)</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -44,7 +190,7 @@ import NoticeInfo from '@/jmapNew/theme/components/menus/childDialog/noticeInfo'
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'ModifyTrainNumber',
|
||||
name: 'TrainDetail',
|
||||
components: {
|
||||
NoticeInfo
|
||||
},
|
||||
@ -63,13 +209,6 @@ export default {
|
||||
data: [],
|
||||
trainId: '',
|
||||
groupNumber: '',
|
||||
runTypeList: [
|
||||
{label: '节能', value: 1},
|
||||
{label: '中间的2', value: 2},
|
||||
{label: '中间的1', value: 3},
|
||||
{label: '正常', value: 4},
|
||||
{label: '加速', value: 5}
|
||||
],
|
||||
train: {}
|
||||
};
|
||||
},
|
||||
@ -90,7 +229,7 @@ export default {
|
||||
return this.dialogShow ? OperationEvent.Signal.arrangementRoute.menu.domId : '';
|
||||
},
|
||||
title() {
|
||||
return '修改列车描述号';
|
||||
return '显示列车信息';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
@ -14,21 +14,50 @@
|
||||
<el-col :span="13" :offset="1">
|
||||
<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
|
||||
<el-tab-pane label="运行线" name="first">
|
||||
<div class="menu-box-title">站台</div>
|
||||
<div class="menu-box">
|
||||
<template v-for="(stationStand, index) in stationStandList">
|
||||
<li :key="index" class="menu-li" :style="{background: selectStandCode === stationStand.code? '#BFCDDB': '#FFF'}" @click="selectStand(stationStand)">{{ stationStand.name }}</li>
|
||||
</template>
|
||||
</div>
|
||||
<el-table :data="stationStandList" height="380px">
|
||||
<el-table-column prop="name" label="站台" />
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="往返" name="second">
|
||||
<el-row>
|
||||
<el-col :span="12" style="padding-right: 10px;">
|
||||
<el-table :data="stationStandList" height="200px">
|
||||
<el-table-column prop="name" label="站台" />
|
||||
<el-table-column prop="state" label="状态" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-table :data="stationStandList" height="200px">
|
||||
<el-table-column prop="name" label="站台" />
|
||||
<el-table-column prop="state" label="状态" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 20px;">
|
||||
<el-col :span="12" style="padding-right: 10px;">
|
||||
<el-table height="160px">
|
||||
<el-table-column prop="path" label="路径" />
|
||||
<el-table-column prop="direction" label="运行方向" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :span="12" style="padding: 20px;">
|
||||
<el-checkbox v-model="showPath">显示复制路径</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="班次" name="third">
|
||||
<el-table :data="trainList" height="382px">
|
||||
<el-table-column prop="class" label="班次" />
|
||||
<el-table-column prop="length" label="长度" />
|
||||
<el-table-column prop="code" label="列车" />
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="往返" name="second">往返</el-tab-pane>
|
||||
<el-tab-pane label="班次" name="third">班次</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row justify="center" class="button-group">
|
||||
<el-col :span="4" :offset="1">
|
||||
<el-button :id="domIdConfirm" type="primary" :loading="loading" @click="commit">确定(O)</el-button>
|
||||
<el-button :id="domIdConfirm" type="primary" :loading="loading" @click="commit">确定(O)</el-button>
|
||||
</el-col>
|
||||
<el-col :span="4" :offset="2">
|
||||
<el-button>应用(A)</el-button>
|
||||
@ -63,12 +92,14 @@ export default {
|
||||
dialogShow: false,
|
||||
loading: false,
|
||||
selected: null,
|
||||
selectStandCode: ''
|
||||
selectStandCode: '',
|
||||
showPath: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'stationStandList'
|
||||
'stationStandList',
|
||||
'trainList'
|
||||
]),
|
||||
show() {
|
||||
return this.dialogShow && !this.$store.state.menuOperation.break;
|
||||
@ -102,8 +133,9 @@ export default {
|
||||
expandPath() {
|
||||
console.log('展开进路预览');
|
||||
},
|
||||
doShow(operate, selected) {
|
||||
this.selected = selected;
|
||||
doShow(operate, activeName) {
|
||||
// this.selected = selected;
|
||||
this.activeName = activeName;
|
||||
// 如果不是断点激活，而是第一次显示，则需要设置初始值
|
||||
this.dialogShow = true;
|
||||
this.$nextTick(function () {
|
||||
|
||||
@ -69,6 +69,7 @@ const PracticeDisplayNew = () => import('@/views/competitionManage/practiceList/
|
||||
|
||||
const IbpHome = () => import('@/views/ibp/home');
|
||||
const IbpDraw = () => import('@/views/ibp/ibpDraw/index');
|
||||
const IbpShow = () => import('@/views/ibp/ibpsystem/index');
|
||||
|
||||
const TeachDetail = () => import('@/views/teach/detail/index');
|
||||
const TeachHome = () => import('@/views/teach/index');
|
||||
@ -278,6 +279,11 @@ export const publicAsyncRoute = [
|
||||
component: Display,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/ibpShow',
|
||||
component: IbpShow,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/displayNew/:mode',
|
||||
component: DisplayNew,
|
||||
|
||||
@ -41,7 +41,8 @@ const training = {
|
||||
memberData: {}, // 综合仿真成员列表
|
||||
simulationUserList: [], // 综合仿真用户列表
|
||||
orignalUserRoleId:'', // 设置旧的角色的id
|
||||
scriptQuitCount: 0 // 主动退出剧本
|
||||
scriptQuitCount: 0, // 主动退出剧本
|
||||
scriptOperationType: '' // 剧本操作类型
|
||||
},
|
||||
|
||||
getters: {
|
||||
@ -107,6 +108,9 @@ const training = {
|
||||
},
|
||||
scriptQuitCount: (state) => {
|
||||
return state.scriptQuitCount;
|
||||
},
|
||||
scriptOperationType: (state) => {
|
||||
return state.scriptOperationType;
|
||||
}
|
||||
},
|
||||
|
||||
@ -297,6 +301,9 @@ const training = {
|
||||
},
|
||||
setScriptQuit: (state) => {
|
||||
state.scriptQuitCount++;
|
||||
},
|
||||
setScriptOperationType: (state, scriptOperationType) => {
|
||||
state.scriptOperationType = scriptOperationType;
|
||||
}
|
||||
},
|
||||
|
||||
@ -726,6 +733,10 @@ const training = {
|
||||
/** 剧本仿真 设置旧的角色的id */
|
||||
setOrignalUserRoleId:({ commit }, data) => {
|
||||
commit('setOrignalUserRoleId', data);
|
||||
},
|
||||
/** 操作剧本类型（教学、练习、考试）*/
|
||||
setScriptOperationType: ({ commit }, data) => {
|
||||
commit('setScriptOperationType', data);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,124 +1,124 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<el-form-item :label="this.$t('ibp.alarmCode')" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{$t('ibp.generateCode')}}</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.alarmWidth')" prop="alarmWidth">
|
||||
<el-input-number v-model="form.alarmWidth" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.xCoordinate')">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.yCoordinate')">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">{{$t('global.delete')}}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">{{$t('global.cancel')}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<el-form-item :label="this.$t('ibp.alarmCode')" prop="code">
|
||||
<el-input v-model="form.code" :disabled="true">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{ $t('ibp.generateCode') }}</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.alarmWidth')" prop="alarmWidth">
|
||||
<el-input-number v-model="form.alarmWidth" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.xCoordinate')">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.yCoordinate')">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ButtonDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
alarmWidth: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.enterTheAlarmCode'), trigger: 'blur' },
|
||||
],
|
||||
alarmWidth: [
|
||||
{ required: true, message: this.$t('rules.enterTheAlarmWidth'), trigger: 'blur' },
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'Alarm' ){
|
||||
this.buttonText = this.$t('global.modify');
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.alarmWidth = model.width;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
export default {
|
||||
name: 'ButtonDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
alarmWidth: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.enterTheAlarmCode'), trigger: 'blur' }
|
||||
],
|
||||
alarmWidth: [
|
||||
{ required: true, message: this.$t('rules.enterTheAlarmWidth'), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid){
|
||||
const alarmModel = {
|
||||
point:{
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'Alarm',
|
||||
width: this.form .alarmWidth,
|
||||
};
|
||||
this.$emit('createAlarm', alarmModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteDevice() {
|
||||
const alarmModel = {
|
||||
point:{
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'Alarm',
|
||||
width: this.form .alarmWidth,
|
||||
};
|
||||
this.$emit('deleteDataModel',alarmModel );
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = this.$t('ibp.createNow');
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
alarmWidth: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "alarm_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'Alarm' ) {
|
||||
this.buttonText = this.$t('global.modify');
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.alarmWidth = model.width;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
const alarmModel = {
|
||||
point:{
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'Alarm',
|
||||
width: this.form.alarmWidth
|
||||
};
|
||||
this.$emit('createData', alarmModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteDevice() {
|
||||
const alarmModel = {
|
||||
point:{
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'Alarm',
|
||||
width: this.form.alarmWidth
|
||||
};
|
||||
this.$emit('deleteDataModel', alarmModel );
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = this.$t('ibp.createNow');
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
alarmWidth: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = 'alarm_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
|
||||
@ -1,146 +1,146 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<el-form-item :label="this.$t('ibp.escalatorFrameCode')" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code" >
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{$t('ibp.generateCode')}}</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.escalatorFrameWidth')" prop="appendageBoxWidth">
|
||||
<el-input-number v-model="form.appendageBoxWidth" controls-position="right" :min="50"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.escalatorFrameHeight')" prop="appendageBoxHeight">
|
||||
<el-input-number v-model="form.appendageBoxHeight" controls-position="right" :min="75"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.borderWidth')" prop="borderWidth">
|
||||
<el-input-number v-model="form.borderWidth" controls-position="right" :min="1"></el-input-number><span>  {{$t('ibp.recommendedSize')}}</span>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.xCoordinate')">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.yCoordinate')">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">{{$t('global.delete')}}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">{{$t('global.cancel')}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<el-form-item :label="this.$t('ibp.escalatorFrameCode')" prop="code">
|
||||
<el-input v-model="form.code" :disabled="true">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{ $t('ibp.generateCode') }}</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.escalatorFrameWidth')" prop="appendageBoxWidth">
|
||||
<el-input-number v-model="form.appendageBoxWidth" controls-position="right" :min="50" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.escalatorFrameHeight')" prop="appendageBoxHeight">
|
||||
<el-input-number v-model="form.appendageBoxHeight" controls-position="right" :min="75" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.borderWidth')" prop="borderWidth">
|
||||
<el-input-number v-model="form.borderWidth" controls-position="right" :min="1" /><span> {{ $t('ibp.recommendedSize') }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.xCoordinate')">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.yCoordinate')">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AppendageBoxDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
appendageBoxWidth: '',
|
||||
appendageBoxHeight: '',
|
||||
x: 10,
|
||||
y: 10,
|
||||
borderWidth: 25
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('ibp.enterTheEscalatorFrameCode'), trigger: 'blur' },
|
||||
],
|
||||
appendageBoxWidth: [
|
||||
{ required: true, message: this.$t('ibp.enterTheEscalatorFrameWidth'), trigger: 'blur' },
|
||||
],
|
||||
appendageBoxHeight: [
|
||||
{ required: true, message: this.$t('ibp.enterTheEscalatorFrameHeight'), trigger: 'blur' },
|
||||
],
|
||||
borderWidth: [
|
||||
{ required: true, message: this.$t('ibp.enterTheBorderWidth'), trigger: 'blur'},
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'AppendageBox' ){
|
||||
this.buttonText = this.$t('global.modify');
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.appendageBoxWidth = model.width;
|
||||
this.form.appendageBoxHeight = model.height;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
this.form.borderWidth = model.borderWidth
|
||||
}
|
||||
export default {
|
||||
name: 'AppendageBoxDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
appendageBoxWidth: '',
|
||||
appendageBoxHeight: '',
|
||||
x: 10,
|
||||
y: 10,
|
||||
borderWidth: 25
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('ibp.enterTheEscalatorFrameCode'), trigger: 'blur' }
|
||||
],
|
||||
appendageBoxWidth: [
|
||||
{ required: true, message: this.$t('ibp.enterTheEscalatorFrameWidth'), trigger: 'blur' }
|
||||
],
|
||||
appendageBoxHeight: [
|
||||
{ required: true, message: this.$t('ibp.enterTheEscalatorFrameHeight'), trigger: 'blur' }
|
||||
],
|
||||
borderWidth: [
|
||||
{ required: true, message: this.$t('ibp.enterTheBorderWidth'), trigger: 'blur'}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid){
|
||||
const appendageBoxModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'AppendageBox',
|
||||
code: this.form.code,
|
||||
width: this.form .appendageBoxWidth,
|
||||
height: this.form.appendageBoxHeight,
|
||||
borderWidth: this.form.borderWidth
|
||||
};
|
||||
this.$emit('createAppendageBox', appendageBoxModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteDevice() {
|
||||
const appendageBoxModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'AppendageBox',
|
||||
code: this.form.code,
|
||||
width: this.form .appendageBoxWidth,
|
||||
height: this.form.appendageBoxHeight,
|
||||
borderWidth: this.form.borderWidth
|
||||
};
|
||||
this.$emit('deleteDataModel',appendageBoxModel );
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = this.$t('ibp.createNow');
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
appendageBoxWidth: '',
|
||||
appendageBoxHeight: '',
|
||||
borderWidth: 25,
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "aBox"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'AppendageBox' ) {
|
||||
this.buttonText = this.$t('global.modify');
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.appendageBoxWidth = model.width;
|
||||
this.form.appendageBoxHeight = model.height;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
this.form.borderWidth = model.borderWidth;
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
const appendageBoxModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'AppendageBox',
|
||||
code: this.form.code,
|
||||
width: this.form.appendageBoxWidth,
|
||||
height: this.form.appendageBoxHeight,
|
||||
borderWidth: this.form.borderWidth
|
||||
};
|
||||
this.$emit('createData', appendageBoxModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteDevice() {
|
||||
const appendageBoxModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'AppendageBox',
|
||||
code: this.form.code,
|
||||
width: this.form.appendageBoxWidth,
|
||||
height: this.form.appendageBoxHeight,
|
||||
borderWidth: this.form.borderWidth
|
||||
};
|
||||
this.$emit('deleteDataModel', appendageBoxModel );
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = this.$t('ibp.createNow');
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
appendageBoxWidth: '',
|
||||
appendageBoxHeight: '',
|
||||
borderWidth: 25,
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = 'aBox' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
|
||||
@ -1,163 +1,163 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<el-form-item :label="this.$t('ibp.arrowCode')" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code" >
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{$t('ibp.generateCode')}}</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.arrowDirection')" prop="orientation">
|
||||
<el-select v-model="form.orientation" :placeholder="this.$t('rules.selectTheDirectionOfTheArrow')">
|
||||
<el-option :label="this.$t('ibp.up')" value="top"></el-option>
|
||||
<el-option :label="this.$t('ibp.down')" value="bottom"></el-option>
|
||||
<el-option :label="this.$t('ibp.left')" value="left"></el-option>
|
||||
<el-option :label="this.$t('ibp.right')" value="right"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.arrowLength')" prop="arrowLength">
|
||||
<el-input-number v-model="form.arrowLength" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.arrowWidth')" prop="arrowLength">
|
||||
<el-input-number v-model="form.arrowWidth" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.arrowColor')" prop="fillColor">
|
||||
<el-color-picker v-model="form.fillColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.vertexXCoordinate')">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.vertexYCoordinate')">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">{{$t('global.delete')}}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">{{$t('global.cancel')}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<el-form-item :label="this.$t('ibp.arrowCode')" prop="code">
|
||||
<el-input v-model="form.code" :disabled="true">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{ $t('ibp.generateCode') }}</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.arrowDirection')" prop="orientation">
|
||||
<el-select v-model="form.orientation" :placeholder="this.$t('rules.selectTheDirectionOfTheArrow')">
|
||||
<el-option :label="this.$t('ibp.up')" value="top" />
|
||||
<el-option :label="this.$t('ibp.down')" value="bottom" />
|
||||
<el-option :label="this.$t('ibp.left')" value="left" />
|
||||
<el-option :label="this.$t('ibp.right')" value="right" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.arrowLength')" prop="arrowLength">
|
||||
<el-input-number v-model="form.arrowLength" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.arrowWidth')" prop="arrowLength">
|
||||
<el-input-number v-model="form.arrowWidth" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.arrowColor')" prop="fillColor">
|
||||
<el-color-picker v-model="form.fillColor" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.vertexXCoordinate')">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.vertexYCoordinate')">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ArrowDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
orientation: 'left',
|
||||
arrowWidth: '',
|
||||
arrowLength: '',
|
||||
fillColor: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.enterTheArrowCode'), trigger: 'blur' },
|
||||
],
|
||||
orientation: [
|
||||
{ required: true, message: this.$t('rules.selectTheDirectionOfTheArrow'), trigger: 'change'}
|
||||
],
|
||||
arrowLength: [
|
||||
{ required: true, message: this.$t('rules.enterTheArrowLength'), trigger: 'blur' },
|
||||
],
|
||||
arrowWidth: [
|
||||
{ required: true, message: this.$t('rules.enterTheArrowWidth'), trigger: 'blur' },
|
||||
],
|
||||
fillColor: [
|
||||
{ required: true, message: this.$t('rules.enterTheArrowColor'), trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'Arrow' ){
|
||||
this.buttonText = this.$t('global.modify');
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.orientation = model.orientation;
|
||||
this.form.arrowLength = model.length;
|
||||
this.form.arrowWidth = model.width;
|
||||
this.form.fillColor = model.fill;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
export default {
|
||||
name: 'ArrowDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
orientation: 'left',
|
||||
arrowWidth: '',
|
||||
arrowLength: '',
|
||||
fillColor: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.enterTheArrowCode'), trigger: 'blur' }
|
||||
],
|
||||
orientation: [
|
||||
{ required: true, message: this.$t('rules.selectTheDirectionOfTheArrow'), trigger: 'change'}
|
||||
],
|
||||
arrowLength: [
|
||||
{ required: true, message: this.$t('rules.enterTheArrowLength'), trigger: 'blur' }
|
||||
],
|
||||
arrowWidth: [
|
||||
{ required: true, message: this.$t('rules.enterTheArrowWidth'), trigger: 'blur' }
|
||||
],
|
||||
fillColor: [
|
||||
{ required: true, message: this.$t('rules.enterTheArrowColor'), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid){
|
||||
const arrowModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'Arrow',
|
||||
code: this.form.code,
|
||||
orientation: this.form.orientation,
|
||||
fill: this.form.fillColor,
|
||||
width: this.form .arrowWidth,
|
||||
length: this.form.arrowLength,
|
||||
};
|
||||
this.$emit('createArrow', arrowModel);
|
||||
this.initPage();
|
||||
}else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const arrowModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'Arrow',
|
||||
code: this.form.code,
|
||||
orientation: this.form.orientation,
|
||||
fill: this.form.fillColor,
|
||||
width: this.form .arrowWidth,
|
||||
length: this.form.arrowLength,
|
||||
};
|
||||
this.$emit('deleteDataModel',arrowModel);
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = this.$t('ibp.createNow');
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
orientation: 'left',
|
||||
arrowWidth: '',
|
||||
arrowLength: '',
|
||||
fillColor: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "arrow_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'Arrow' ) {
|
||||
this.buttonText = this.$t('global.modify');
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.orientation = model.orientation;
|
||||
this.form.arrowLength = model.length;
|
||||
this.form.arrowWidth = model.width;
|
||||
this.form.fillColor = model.fill;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
const arrowModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'Arrow',
|
||||
code: this.form.code,
|
||||
orientation: this.form.orientation,
|
||||
fill: this.form.fillColor,
|
||||
width: this.form.arrowWidth,
|
||||
length: this.form.arrowLength
|
||||
};
|
||||
this.$emit('createData', arrowModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const arrowModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'Arrow',
|
||||
code: this.form.code,
|
||||
orientation: this.form.orientation,
|
||||
fill: this.form.fillColor,
|
||||
width: this.form.arrowWidth,
|
||||
length: this.form.arrowLength
|
||||
};
|
||||
this.$emit('deleteDataModel', arrowModel);
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = this.$t('ibp.createNow');
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
orientation: 'left',
|
||||
arrowWidth: '',
|
||||
arrowLength: '',
|
||||
fillColor: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = 'arrow_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
|
||||
@ -62,7 +62,7 @@ export default {
|
||||
width: this.form.bgWidth,
|
||||
height: this.form.bgHeight
|
||||
};
|
||||
this.$emit('updateBg', bgModel);
|
||||
this.$emit('createData', bgModel);
|
||||
},
|
||||
initPage() {
|
||||
this.form.bgWidth = this.$store.state.ibp.ibpBgDevice.model ? this.$store.state.ibp.ibpBgDevice.model.width : 1;
|
||||
|
||||
@ -54,12 +54,15 @@ export default {
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
operateMeanList: [
|
||||
{ label: '上行扣车', value: 'Up_Hold_Train' },
|
||||
{ label: '下行扣车', value: 'Down_Hold_Train' },
|
||||
{ label: '上行取消扣车', value: 'Up_Cancel_Hold_Train' },
|
||||
{ label: '下行取消扣车', value: 'Down_Cancel_Hold_Train' },
|
||||
{ label: '上行打开屏蔽门', value: 'Up_Open_Screen_Door' },
|
||||
{ label: '下行打开屏蔽门', value: 'Down_Open_Screen_Door' }
|
||||
{ label: '上行扣车', value: 'SXKC' },
|
||||
{ label: '下行扣车', value: 'XXKC' },
|
||||
{ label: '上行终止扣车', value: 'SXZZKC' },
|
||||
{ label: '下行终止扣车', value: 'XXZZKC' },
|
||||
{ label: '紧急停车', value: 'JJTC' },
|
||||
{ label: '取消紧急停车', value: 'QXJJTC' },
|
||||
{ label: '报警切除', value: 'BJQC' },
|
||||
{ label: '下行屏蔽门开门', value: 'XXKM' },
|
||||
{ label: '上行屏蔽门开门', value: 'SXKM' }
|
||||
],
|
||||
form: {
|
||||
code: '',
|
||||
@ -116,9 +119,9 @@ export default {
|
||||
color: this.form.buttonColor,
|
||||
status: 'off',
|
||||
width: this.form.buttonWidth,
|
||||
mean: this.from.mean
|
||||
mean: this.form.mean
|
||||
};
|
||||
this.$emit('createButton', buttonModel);
|
||||
this.$emit('createData', buttonModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
|
||||
@ -1,125 +1,125 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<el-form-item :label="this.$t('ibp.digitalClockCode')" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code" >
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{$t('ibp.generateCode')}}</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.digitalClockWidth')" prop="clockWidth">
|
||||
<el-input-number v-model="form.clockWidth" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.xCoordinate')">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.yCoordinate')">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">{{$t('global.delete')}}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">{{$t('global.cancel')}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<el-form-item :label="this.$t('ibp.digitalClockCode')" prop="code">
|
||||
<el-input v-model="form.code" :disabled="true">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{ $t('ibp.generateCode') }}</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.digitalClockWidth')" prop="clockWidth">
|
||||
<el-input-number v-model="form.clockWidth" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.xCoordinate')">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.yCoordinate')">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ClockDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
clockWidth: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.enterTheDigitalClockCode'), trigger: 'blur' },
|
||||
],
|
||||
clockWidth: [
|
||||
{ required: true, message: this.$t('rules.enterTheDigitalClockWidth'), trigger: 'blur' },
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'Clock' ){
|
||||
this.buttonText = this.$t('global.modify');
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.clockWidth = model.width;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
export default {
|
||||
name: 'ClockDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
clockWidth: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('rules.enterTheDigitalClockCode'), trigger: 'blur' }
|
||||
],
|
||||
clockWidth: [
|
||||
{ required: true, message: this.$t('rules.enterTheDigitalClockWidth'), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
const clockModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'Clock',
|
||||
code: this.form.code,
|
||||
width: this.form.clockWidth,
|
||||
};
|
||||
this.$emit('createClock', clockModel);
|
||||
this.initPage();
|
||||
}else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteDevice() {
|
||||
const clockModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'Clock',
|
||||
code: this.form.code,
|
||||
width: this.form.clockWidth,
|
||||
};
|
||||
this.$emit('deleteDataModel',clockModel );
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = this.$t('ibp.createNow');
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
buttonColor: '',
|
||||
buttonWidth: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "clock_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'Clock' ) {
|
||||
this.buttonText = this.$t('global.modify');
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.clockWidth = model.width;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
const clockModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'Clock',
|
||||
code: this.form.code,
|
||||
width: this.form.clockWidth
|
||||
};
|
||||
this.$emit('createData', clockModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteDevice() {
|
||||
const clockModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'Clock',
|
||||
code: this.form.code,
|
||||
width: this.form.clockWidth
|
||||
};
|
||||
this.$emit('deleteDataModel', clockModel );
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = this.$t('ibp.createNow');
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
buttonColor: '',
|
||||
buttonWidth: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = 'clock_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
|
||||
@ -1,161 +1,161 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
||||
<el-form-item :label="this.$t('ibp.escalatorCode')" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{$t('ibp.generateCode')}}</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.escalatorWidth')" prop="elevatorWidth">
|
||||
<el-input-number v-model="form.elevatorWidth" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.escalatorHeight')" prop="elevatorHeight">
|
||||
<el-input-number v-model="form.elevatorHeight" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.escalatorColor')" prop="elevatorColor">
|
||||
<el-color-picker v-model="form.elevatorColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.startingDirection')" prop="direction">
|
||||
<el-select v-model="form.direction" placeholder="请选择启动方向">
|
||||
<el-option :label="this.$t('ibp.doNotStart')" value="none"></el-option>
|
||||
<el-option :label="this.$t('ibp.startUp')" value="top"></el-option>
|
||||
<el-option :label="this.$t('ibp.startDown')" value="bottom"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.xCoordinate')">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.yCoordinate')">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">{{$t('global.delete')}}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">{{$t('global.cancel')}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
||||
<el-form-item :label="this.$t('ibp.escalatorCode')" prop="code">
|
||||
<el-input v-model="form.code" :disabled="true">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{ $t('ibp.generateCode') }}</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.escalatorWidth')" prop="elevatorWidth">
|
||||
<el-input-number v-model="form.elevatorWidth" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.escalatorHeight')" prop="elevatorHeight">
|
||||
<el-input-number v-model="form.elevatorHeight" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.escalatorColor')" prop="elevatorColor">
|
||||
<el-color-picker v-model="form.elevatorColor" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.startingDirection')" prop="direction">
|
||||
<el-select v-model="form.direction" placeholder="请选择启动方向">
|
||||
<el-option :label="this.$t('ibp.doNotStart')" value="none" />
|
||||
<el-option :label="this.$t('ibp.startUp')" value="top" />
|
||||
<el-option :label="this.$t('ibp.startDown')" value="bottom" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.xCoordinate')">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.yCoordinate')">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ElevatorDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
elevatorWidth: '',
|
||||
elevatorHeight: '',
|
||||
elevatorColor:'',
|
||||
direction:'none',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('ibp.enterTheElevatorCode'), trigger: 'blur' },
|
||||
],
|
||||
elevatorWidth: [
|
||||
{ required: true, message: this.$t('ibp.enterTheElevatorWidth'), trigger: 'blur' },
|
||||
],
|
||||
elevatorHeight: [
|
||||
{ required: true, message: this.$t('ibp.enterTheElevatorHeight'), trigger: 'blur' },
|
||||
],
|
||||
elevatorColor: [
|
||||
{ required: true, message: this.$t('ibp.enterTheElevatorColor'), trigger: 'change' },
|
||||
],
|
||||
direction: [
|
||||
{ required: true, message: this.$t('ibp.selectTheStartingDirection'), trigger: 'change' },
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'Elevator' ){
|
||||
this.buttonText = this.$t('global.modify');
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.elevatorWidth = model.width;
|
||||
this.form.elevatorHeight = model.height;
|
||||
this.form.elevatorColor = model.fillColor;
|
||||
this.form.direction = model.direction;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
export default {
|
||||
name: 'ElevatorDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
elevatorWidth: '',
|
||||
elevatorHeight: '',
|
||||
elevatorColor:'',
|
||||
direction:'none',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: this.$t('ibp.enterTheElevatorCode'), trigger: 'blur' }
|
||||
],
|
||||
elevatorWidth: [
|
||||
{ required: true, message: this.$t('ibp.enterTheElevatorWidth'), trigger: 'blur' }
|
||||
],
|
||||
elevatorHeight: [
|
||||
{ required: true, message: this.$t('ibp.enterTheElevatorHeight'), trigger: 'blur' }
|
||||
],
|
||||
elevatorColor: [
|
||||
{ required: true, message: this.$t('ibp.enterTheElevatorColor'), trigger: 'change' }
|
||||
],
|
||||
direction: [
|
||||
{ required: true, message: this.$t('ibp.selectTheStartingDirection'), trigger: 'change' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid){
|
||||
const elevatorModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'Elevator',
|
||||
code: this.form.code,
|
||||
width: this.form.elevatorWidth,
|
||||
height: this.form.elevatorHeight,
|
||||
fillColor: this.form.elevatorColor,
|
||||
direction: this.form.direction,
|
||||
};
|
||||
this.$emit('createElevator', elevatorModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const elevatorModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'Elevator',
|
||||
code: this.form.code,
|
||||
width: this.form.elevatorWidth,
|
||||
height: this.form.elevatorHeight,
|
||||
fillColor: this.form.elevatorColor,
|
||||
direction: this.form.direction,
|
||||
};
|
||||
this.$emit('deleteDataModel',elevatorModel );
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = this.$t('ibp.createNow');
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
elevatorWidth: '',
|
||||
elevatorHeight: '',
|
||||
elevatorColor:'',
|
||||
direction:'none',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "elevator_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'Elevator' ) {
|
||||
this.buttonText = this.$t('global.modify');
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.elevatorWidth = model.width;
|
||||
this.form.elevatorHeight = model.height;
|
||||
this.form.elevatorColor = model.fillColor;
|
||||
this.form.direction = model.direction;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
const elevatorModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'Elevator',
|
||||
code: this.form.code,
|
||||
width: this.form.elevatorWidth,
|
||||
height: this.form.elevatorHeight,
|
||||
fillColor: this.form.elevatorColor,
|
||||
direction: this.form.direction
|
||||
};
|
||||
this.$emit('createData', elevatorModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const elevatorModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'Elevator',
|
||||
code: this.form.code,
|
||||
width: this.form.elevatorWidth,
|
||||
height: this.form.elevatorHeight,
|
||||
fillColor: this.form.elevatorColor,
|
||||
direction: this.form.direction
|
||||
};
|
||||
this.$emit('deleteDataModel', elevatorModel );
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = this.$t('ibp.createNow');
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
elevatorWidth: '',
|
||||
elevatorHeight: '',
|
||||
elevatorColor:'',
|
||||
direction:'none',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = 'elevator_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
|
||||
@ -66,8 +66,8 @@ export default {
|
||||
bottomText:''
|
||||
},
|
||||
operateMeanList: [
|
||||
{ label: '上行屏蔽门操作开关', value: 'Ban_Up_Open_Screen_Door' },
|
||||
{ label: '下行屏蔽门操作开关', value: 'Ban_Down_Open_Screen_Door' }
|
||||
{ label: '上行钥匙', value: 'SXYS' },
|
||||
{ label: '下行钥匙', value: 'XXYS' }
|
||||
],
|
||||
rules: {
|
||||
code: [
|
||||
@ -129,7 +129,7 @@ export default {
|
||||
bottomText:this.form.bottomText,
|
||||
mean:this.form.mean
|
||||
};
|
||||
this.$emit('createKey', keyModel);
|
||||
this.$emit('createData', keyModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
|
||||
@ -1,155 +1,155 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
||||
<el-form-item :label="this.$t('ibp.circularLampCode')" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code" >
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{$t('ibp.generateCode')}}</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.circularLampRadius')" prop="r">
|
||||
<el-input-number v-model="form.r" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.xCoordinate')">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.yCoordinate')">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="表示状态">
|
||||
<el-select v-model="form.mean" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in showMeanList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="关联设备">
|
||||
<el-input v-model="form.linkDevice"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">{{$t('global.delete')}}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">{{$t('global.cancel')}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
||||
<el-form-item :label="this.$t('ibp.circularLampCode')" prop="code">
|
||||
<el-input v-model="form.code" :disabled="true">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">{{ $t('ibp.generateCode') }}</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.circularLampRadius')" prop="r">
|
||||
<el-input-number v-model="form.r" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.xCoordinate')">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('ibp.yCoordinate')">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="表示状态">
|
||||
<el-select v-model="form.mean" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in showMeanList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="关联设备">
|
||||
<el-input v-model="form.linkDevice" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'LampDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
showMeanList: [
|
||||
{label: '扣车', value: 'Show_Detain'},
|
||||
{label: '屏蔽门打开', value: 'Show_Open_Screen_Door'},
|
||||
{label: '屏蔽门紧闭', value: 'Show_Close_Screen_Door'}
|
||||
export default {
|
||||
name: 'LampDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: this.$t('ibp.createNow'),
|
||||
showDeleteButton: false,
|
||||
showMeanList: [
|
||||
{label: '扣车', value: 'Show_Detain'},
|
||||
{label: '屏蔽门打开', value: 'Show_Open_Screen_Door'},
|
||||
{label: '屏蔽门紧闭', value: 'Show_Close_Screen_Door'}
|
||||
],
|
||||
form: {
|
||||
code: '',
|
||||
r: '',
|
||||
x: 10,
|
||||
y: 10,
|
||||
mean: '',
|
||||
linkDevice: ''
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入按钮编号', trigger: 'blur' }
|
||||
],
|
||||
form: {
|
||||
code: '',
|
||||
r: '',
|
||||
x: 10,
|
||||
y: 10,
|
||||
mean: '',
|
||||
linkDevice: ''
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入按钮编号', trigger: 'blur' },
|
||||
],
|
||||
r: [
|
||||
{ required: true, message: '请输入圆形灯半径', trigger: 'blur'}
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'CircularLamp' ){
|
||||
this.buttonText = this.$t('global.modify');
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.r = model.r;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
this.form.mean = model.mean;
|
||||
this.form.linkDevice = model.linkDevice;
|
||||
}
|
||||
r: [
|
||||
{ required: true, message: '请输入圆形灯半径', trigger: 'blur'}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if(valid){
|
||||
const lampModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'CircularLamp',
|
||||
code: this.form.code,
|
||||
r: this.form.r,
|
||||
mean: this.form.mean,
|
||||
linkDevice: this.form.linkDevice,
|
||||
fillColor: '#332C22'
|
||||
};
|
||||
this.$emit('createLamp', lampModel);
|
||||
this.initPage();
|
||||
}else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const lampModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'CircularLamp',
|
||||
code: this.form.code,
|
||||
r: this.form.r,
|
||||
mean: this.form.mean,
|
||||
linkDevice: this.form.linkDevice,
|
||||
fillColor: '#332C22'
|
||||
};
|
||||
this.$emit('deleteDataModel',lampModel );
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = this.$t('ibp.createNow');
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
r: '',
|
||||
x: 10,
|
||||
y: 10,
|
||||
mean: '',
|
||||
linkDevice: '',
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "lamp_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'CircularLamp' ) {
|
||||
this.buttonText = this.$t('global.modify');
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.r = model.r;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
this.form.mean = model.mean;
|
||||
this.form.linkDevice = model.linkDevice;
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
const lampModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'CircularLamp',
|
||||
code: this.form.code,
|
||||
r: this.form.r,
|
||||
mean: this.form.mean,
|
||||
linkDevice: this.form.linkDevice,
|
||||
fillColor: '#332C22'
|
||||
};
|
||||
this.$emit('createData', lampModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const lampModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'CircularLamp',
|
||||
code: this.form.code,
|
||||
r: this.form.r,
|
||||
mean: this.form.mean,
|
||||
linkDevice: this.form.linkDevice,
|
||||
fillColor: '#332C22'
|
||||
};
|
||||
this.$emit('deleteDataModel', lampModel );
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = this.$t('ibp.createNow');
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
r: '',
|
||||
x: 10,
|
||||
y: 10,
|
||||
mean: '',
|
||||
linkDevice: ''
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = 'lamp_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
</style>
|
||||
|
||||
@ -1,156 +1,156 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<el-form-item label="线段编号" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code" >
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="线段宽度" prop="lineWidth">
|
||||
<el-input-number v-model="form.lineWidth" controls-position="right" :min="1" :max="50"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="线段颜色" prop="fillColor">
|
||||
<el-color-picker v-model="form.fillColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="起始X轴坐标">
|
||||
<el-input-number v-model="form.x1" controls-position="right" :min="0"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="起始Y轴坐标">
|
||||
<el-input-number v-model="form.y1" controls-position="right" :min="0"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="终止X轴坐标">
|
||||
<el-input-number v-model="form.x2" controls-position="right" :min="0"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="终止Y轴坐标">
|
||||
<el-input-number v-model="form.y2" controls-position="right" :min="0"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<el-form-item label="线段编号" prop="code">
|
||||
<el-input v-model="form.code" :disabled="true">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="线段宽度" prop="lineWidth">
|
||||
<el-input-number v-model="form.lineWidth" controls-position="right" :min="1" :max="50" />
|
||||
</el-form-item>
|
||||
<el-form-item label="线段颜色" prop="fillColor">
|
||||
<el-color-picker v-model="form.fillColor" />
|
||||
</el-form-item>
|
||||
<el-form-item label="起始X轴坐标">
|
||||
<el-input-number v-model="form.x1" controls-position="right" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="起始Y轴坐标">
|
||||
<el-input-number v-model="form.y1" controls-position="right" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="终止X轴坐标">
|
||||
<el-input-number v-model="form.x2" controls-position="right" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="终止Y轴坐标">
|
||||
<el-input-number v-model="form.y2" controls-position="right" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TextDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
lineWidth: '',
|
||||
fillColor: '#000000',
|
||||
x1: 10,
|
||||
y1: 10,
|
||||
x2: 20,
|
||||
y2: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入线段编号', trigger: 'blur' },
|
||||
],
|
||||
lineWidth: [
|
||||
{ required: true, message: '请输入线段宽度', trigger: 'blur' },
|
||||
],
|
||||
fillColor: [
|
||||
{ required: true, message: '请输入线段颜色', trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'IbpLine' ){
|
||||
this.buttonText = '修改';
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.lineWidth = model.lineWidth;
|
||||
this.form.fillColor = model.fillColor;
|
||||
this.form.x1 = model.point1.x;
|
||||
this.form.y1 = model.point1.y;
|
||||
this.form.x2 = model.point2.x;
|
||||
this.form.y2 = model.point2.y;
|
||||
}
|
||||
export default {
|
||||
name: 'TextDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
lineWidth: '',
|
||||
fillColor: '#000000',
|
||||
x1: 10,
|
||||
y1: 10,
|
||||
x2: 20,
|
||||
y2: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入线段编号', trigger: 'blur' }
|
||||
],
|
||||
lineWidth: [
|
||||
{ required: true, message: '请输入线段宽度', trigger: 'blur' }
|
||||
],
|
||||
fillColor: [
|
||||
{ required: true, message: '请输入线段颜色', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) =>{
|
||||
if (valid){
|
||||
const lineModel = {
|
||||
point1: {
|
||||
x: this.form.x1,
|
||||
y: this.form.y1
|
||||
},
|
||||
point2: {
|
||||
x: this.form.x2,
|
||||
y: this.form.y2
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'IbpLine',
|
||||
lineWidth: this.form.lineWidth,
|
||||
fillColor: this.form.fillColor
|
||||
};
|
||||
this.$emit('createLine', lineModel);
|
||||
this.initPage();
|
||||
}else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const lineModel = {
|
||||
point1: {
|
||||
x: this.form.x1,
|
||||
y: this.form.y1
|
||||
},
|
||||
point2: {
|
||||
x: this.form.x2,
|
||||
y: this.form.y2
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'IbpLine',
|
||||
lineWidth: this.form.lineWidth,
|
||||
fillColor: this.form.fillColor
|
||||
};
|
||||
this.$emit('deleteDataModel',lineModel );
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = '立即创建';
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
lineWidth: '',
|
||||
fillColor: '',
|
||||
x1: 10,
|
||||
y1: 10,
|
||||
x2: 20,
|
||||
y2: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "line_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'IbpLine' ) {
|
||||
this.buttonText = '修改';
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.lineWidth = model.lineWidth;
|
||||
this.form.fillColor = model.fillColor;
|
||||
this.form.x1 = model.point1.x;
|
||||
this.form.y1 = model.point1.y;
|
||||
this.form.x2 = model.point2.x;
|
||||
this.form.y2 = model.point2.y;
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) =>{
|
||||
if (valid) {
|
||||
const lineModel = {
|
||||
point1: {
|
||||
x: this.form.x1,
|
||||
y: this.form.y1
|
||||
},
|
||||
point2: {
|
||||
x: this.form.x2,
|
||||
y: this.form.y2
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'IbpLine',
|
||||
lineWidth: this.form.lineWidth,
|
||||
fillColor: this.form.fillColor
|
||||
};
|
||||
this.$emit('createData', lineModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const lineModel = {
|
||||
point1: {
|
||||
x: this.form.x1,
|
||||
y: this.form.y1
|
||||
},
|
||||
point2: {
|
||||
x: this.form.x2,
|
||||
y: this.form.y2
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'IbpLine',
|
||||
lineWidth: this.form.lineWidth,
|
||||
fillColor: this.form.fillColor
|
||||
};
|
||||
this.$emit('deleteDataModel', lineModel );
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = '立即创建';
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
lineWidth: '',
|
||||
fillColor: '',
|
||||
x1: 10,
|
||||
y1: 10,
|
||||
x2: 20,
|
||||
y2: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = 'line_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
|
||||
@ -1,141 +1,141 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
||||
<el-form-item label="旋转提示编号" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="旋转提示宽度" prop="rotateTipWidth">
|
||||
<el-input-number v-model="form.rotateTipWidth" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="X轴坐标">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="Y轴坐标">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="提示颜色" prop="rotateTipColor">
|
||||
<el-select v-model="form.rotateTipColor" placeholder="请选择提示颜色">
|
||||
<el-option label="红色" value="red"></el-option>
|
||||
<el-option label="黑色" value="black"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
||||
<el-form-item label="旋转提示编号" prop="code">
|
||||
<el-input v-model="form.code" :disabled="true">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="旋转提示宽度" prop="rotateTipWidth">
|
||||
<el-input-number v-model="form.rotateTipWidth" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="X轴坐标">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Y轴坐标">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="提示颜色" prop="rotateTipColor">
|
||||
<el-select v-model="form.rotateTipColor" placeholder="请选择提示颜色">
|
||||
<el-option label="红色" value="red" />
|
||||
<el-option label="黑色" value="black" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'KeyDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
rotateTipWidth: '',
|
||||
rotateTipColor: 'black',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入旋转提示编号', trigger: 'blur' },
|
||||
],
|
||||
rotateTipWidth: [
|
||||
{ required: true, message: '请输入旋转提示宽度', trigger: 'blur' },
|
||||
],
|
||||
rotateTipColor: [
|
||||
{ required: true, message: '请选择按钮颜色', trigger: 'change'}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'RotateTip' ){
|
||||
this.buttonText = '修改';
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.rotateTipWidth = model.width;
|
||||
this.form.rotateTipColor = model.color?model.color:'black';
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
export default {
|
||||
name: 'KeyDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
rotateTipWidth: '',
|
||||
rotateTipColor: 'black',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入旋转提示编号', trigger: 'blur' }
|
||||
],
|
||||
rotateTipWidth: [
|
||||
{ required: true, message: '请输入旋转提示宽度', trigger: 'blur' }
|
||||
],
|
||||
rotateTipColor: [
|
||||
{ required: true, message: '请选择按钮颜色', trigger: 'change'}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if(valid) {
|
||||
const rotateTipModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
draggable: true,
|
||||
_type: 'RotateTip',
|
||||
code: this.form.code,
|
||||
width: this.form.rotateTipWidth,
|
||||
color: this.form.rotateTipColor
|
||||
};
|
||||
this.$emit('createRotateTip', rotateTipModel);
|
||||
this.initPage();
|
||||
}else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const rotateTipModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
draggable: true,
|
||||
_type: 'RotateTip',
|
||||
code: this.form.code,
|
||||
width: this.form .rotateTipWidth,
|
||||
color: this.form.rotateTipColor
|
||||
};
|
||||
this.$emit('deleteDataModel',rotateTipModel);
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = '立即创建';
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
rotateTipWidth: '',
|
||||
rotateTipColor: 'black',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "rTip_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'RotateTip' ) {
|
||||
this.buttonText = '修改';
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.rotateTipWidth = model.width;
|
||||
this.form.rotateTipColor = model.color ? model.color : 'black';
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
const rotateTipModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
draggable: true,
|
||||
_type: 'RotateTip',
|
||||
code: this.form.code,
|
||||
width: this.form.rotateTipWidth,
|
||||
color: this.form.rotateTipColor
|
||||
};
|
||||
this.$emit('createData', rotateTipModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const rotateTipModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
draggable: true,
|
||||
_type: 'RotateTip',
|
||||
code: this.form.code,
|
||||
width: this.form.rotateTipWidth,
|
||||
color: this.form.rotateTipColor
|
||||
};
|
||||
this.$emit('deleteDataModel', rotateTipModel);
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = '立即创建';
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
rotateTipWidth: '',
|
||||
rotateTipColor: 'black',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = 'rTip_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
|
||||
@ -1,128 +1,128 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
||||
<el-form-item label="端子编号" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="端子宽度" prop="terminalWidth">
|
||||
<el-input-number v-model="form.terminalWidth" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="X轴坐标">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="Y轴坐标">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
||||
<el-form-item label="端子编号" prop="code">
|
||||
<el-input v-model="form.code" :disabled="true">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="端子宽度" prop="terminalWidth">
|
||||
<el-input-number v-model="form.terminalWidth" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="X轴坐标">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Y轴坐标">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'KeyDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
terminalWidth: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入端子编号', trigger: 'blur' },
|
||||
],
|
||||
terminalWidth: [
|
||||
{ required: true, message: '请输入端子宽度', trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'TeleTerminal' ){
|
||||
this.buttonText = '修改';
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.terminalWidth = model.width;
|
||||
this.form.terminalHeight = model.height;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
export default {
|
||||
name: 'KeyDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
terminalWidth: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入端子编号', trigger: 'blur' }
|
||||
],
|
||||
terminalWidth: [
|
||||
{ required: true, message: '请输入端子宽度', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid){
|
||||
const TerminalModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
draggable: true,
|
||||
_type: 'TeleTerminal',
|
||||
code: this.form.code,
|
||||
width: this.form.terminalWidth,
|
||||
};
|
||||
this.$emit('createTeleTerminal', TerminalModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const TerminalModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
draggable: true,
|
||||
_type: 'TeleTerminal',
|
||||
code: this.form.code,
|
||||
width: this.form .terminalWidth,
|
||||
};
|
||||
this.$emit('deleteDataModel',TerminalModel);
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = '立即创建';
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
terminalWidth: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "terminal"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'TeleTerminal' ) {
|
||||
this.buttonText = '修改';
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.terminalWidth = model.width;
|
||||
this.form.terminalHeight = model.height;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
const TerminalModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
draggable: true,
|
||||
_type: 'TeleTerminal',
|
||||
code: this.form.code,
|
||||
width: this.form.terminalWidth
|
||||
};
|
||||
this.$emit('createData', TerminalModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const TerminalModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
draggable: true,
|
||||
_type: 'TeleTerminal',
|
||||
code: this.form.code,
|
||||
width: this.form.terminalWidth
|
||||
};
|
||||
this.$emit('deleteDataModel', TerminalModel);
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = '立即创建';
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
terminalWidth: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = 'terminal' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
|
||||
@ -10,13 +10,20 @@
|
||||
<el-input v-model="form.context" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="文字颜色" prop="textFill">
|
||||
<el-input v-model="form.textFill" />
|
||||
<el-color-picker v-model="form.textFill" />
|
||||
</el-form-item>
|
||||
<el-form-item label="文字大小" prop="fontSize">
|
||||
<el-input-number v-model="form.fontSize" controls-position="right" :min="1" :max="100" />
|
||||
</el-form-item>
|
||||
<el-form-item label="文字粗细" prop="fontWeight">
|
||||
<el-input-number v-model="form.fontWeight" controls-position="right" :min="1" />
|
||||
<el-select v-model="form.fontWeight">
|
||||
<el-option
|
||||
v-for="item in fontWeightList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="X轴坐标">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1" />
|
||||
@ -24,24 +31,6 @@
|
||||
<el-form-item label="Y轴坐标">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<!--<el-form-item label="文字背景">-->
|
||||
<!--<el-switch v-model="form.hasRect" @change="handleChange"></el-switch>-->
|
||||
<!--</el-form-item>-->
|
||||
<!--<el-form-item v-show="form.hasRect" label="背景X轴坐标">-->
|
||||
<!--<el-input-number v-model="form.xBg" controls-position="right" :min="0"></el-input-number>-->
|
||||
<!--</el-form-item>-->
|
||||
<!--<el-form-item v-show="form.hasRect" label="背景Y轴坐标">-->
|
||||
<!--<el-input-number v-model="form.yBg" controls-position="right" :min="0"></el-input-number>-->
|
||||
<!--</el-form-item>-->
|
||||
<!--<el-form-item v-show="form.hasRect" label="背景宽度">-->
|
||||
<!--<el-input-number v-model="form.bgWidth" controls-position="right" :min="1"></el-input-number>-->
|
||||
<!--</el-form-item>-->
|
||||
<!--<el-form-item v-show="form.hasRect" label="背景高度">-->
|
||||
<!--<el-input-number v-model="form.bgHeight" controls-position="right" :min="1"></el-input-number>-->
|
||||
<!--</el-form-item>-->
|
||||
<!--<el-form-item v-show="form.hasRect" label="背景颜色" prop="elevatorColor">-->
|
||||
<!--<el-color-picker v-model="form.textBackgroundColor"></el-color-picker>-->
|
||||
<!--</el-form-item>-->
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">删除</el-button>
|
||||
@ -61,6 +50,17 @@ export default {
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
fontWeightList: [
|
||||
{ label: '100', value: '100' },
|
||||
{ label: '200', value: '200' },
|
||||
{ label: '300', value: '300' },
|
||||
{ label: '400', value: '400' },
|
||||
{ label: '500', value: '500' },
|
||||
{ label: '600', value: '600' },
|
||||
{ label: '700', value: '700' },
|
||||
{ label: '800', value: '800' },
|
||||
{ label: '900', value: '900' }
|
||||
],
|
||||
form: {
|
||||
code: '',
|
||||
context: '',
|
||||
@ -69,12 +69,6 @@ export default {
|
||||
fontWeight: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
// hasRect: false,
|
||||
// xBg: 10,
|
||||
// yBg: 10,
|
||||
// bgWidth: 0,
|
||||
// bgHeight: 0,
|
||||
// textBackgroundColor: ''
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
@ -112,12 +106,6 @@ export default {
|
||||
this.form.fontWeight = model.fontWeight;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
// this.form.hasRect = model.hasRect;
|
||||
// this.form.xBg = model.textRect ? model.textRect.x : 10;
|
||||
// this.form.yBg = model.textRect ? model.textRect.y : 10;
|
||||
// this.form.bgWidth = model.textRect ? model.textRect.width : 0;
|
||||
// this.form.bgHeight = model.textRect ? model.textRect.height : 0;
|
||||
// this.form.textBackgroundColor = model.textRect ? model.textRect.textBackgroundColor : '';
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -139,17 +127,8 @@ export default {
|
||||
fontSize: this.form.fontSize,
|
||||
fontWeight: this.form.fontWeight,
|
||||
fontFamily: 'consolas'
|
||||
// hasRect: this.form.hasRect,
|
||||
// textRect: this.form.hasRect ?
|
||||
// {
|
||||
// x: this.form.xBg,
|
||||
// y: this.form.yBg,
|
||||
// width: this.form.bgWidth,
|
||||
// height: this.form.bgHeight
|
||||
// }:'',
|
||||
// textBackgroundColor: this.form.hasRect?this.form.textBackgroundColor: ''
|
||||
};
|
||||
this.$emit('createText', textModel);
|
||||
this.$emit('createData', textModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
@ -171,15 +150,6 @@ export default {
|
||||
fontSize: this.form.fontSize,
|
||||
fontWeight: this.form.fontWeight,
|
||||
fontFamily: 'consolas'
|
||||
// hasRect: this.form.hasRect,
|
||||
// textRect: this.form.hasRect ?
|
||||
// {
|
||||
// x: this.form.xBg,
|
||||
// y: this.form.yBg,
|
||||
// width: this.form.bgWidth,
|
||||
// height: this.form.bgHeight
|
||||
// }:'',
|
||||
// textBackgroundColor: this.form.hasRect?this.form.textBackgroundColor: ''
|
||||
};
|
||||
this.$emit('deleteDataModel', textModel);
|
||||
this.initPage();
|
||||
|
||||
@ -1,172 +1,172 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<el-form-item label="矩形编号" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code" >
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="矩形宽度" prop="tipBoxWidth">
|
||||
<el-input-number v-model="form.tipBoxWidth" controls-position="right" :min="1" ></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="矩形高度" prop="tipBoxHeight">
|
||||
<el-input-number v-model="form.tipBoxHeight" controls-position="right" :min="1" ></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="填充颜色" prop="fillColor">
|
||||
<el-color-picker v-model="form.fillColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="填充透明颜色">
|
||||
<el-switch v-model="opacity"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="边框线宽" prop="lineWidth">
|
||||
<el-input-number v-model="form.lineWidth" controls-position="right" :min="0" ></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="边线颜色" prop="stroke">
|
||||
<el-color-picker v-model="form.stroke"></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="X轴坐标">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="Y轴坐标">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<el-form-item label="矩形编号" prop="code">
|
||||
<el-input v-model="form.code" :disabled="true">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="矩形宽度" prop="tipBoxWidth">
|
||||
<el-input-number v-model="form.tipBoxWidth" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="矩形高度" prop="tipBoxHeight">
|
||||
<el-input-number v-model="form.tipBoxHeight" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="填充颜色" prop="fillColor">
|
||||
<el-color-picker v-model="form.fillColor" />
|
||||
</el-form-item>
|
||||
<el-form-item label="填充透明颜色">
|
||||
<el-switch v-model="opacity" />
|
||||
</el-form-item>
|
||||
<el-form-item label="边框线宽" prop="lineWidth">
|
||||
<el-input-number v-model="form.lineWidth" controls-position="right" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="边线颜色" prop="stroke">
|
||||
<el-color-picker v-model="form.stroke" />
|
||||
</el-form-item>
|
||||
<el-form-item label="X轴坐标">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Y轴坐标">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'TextDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
opacity: false,
|
||||
form: {
|
||||
code: '',
|
||||
tipBoxWidth: '',
|
||||
tipBoxHeight: '',
|
||||
fillColor: '#CE950F',
|
||||
x: 10,
|
||||
y: 10,
|
||||
lineWidth: 0,
|
||||
stroke: ''
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入提示框编号', trigger: 'blur' },
|
||||
],
|
||||
tipBoxWidth: [
|
||||
{ required: true, message: '请输入提示框宽度', trigger: 'blur' },
|
||||
],
|
||||
tipBoxHeight: [
|
||||
{ required: true, message: '请输入提示框高度', trigger: 'blur' },
|
||||
],
|
||||
fillColor: [
|
||||
{ required: true, message: '请输入提示框颜色', trigger: 'blur' },
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'TipBox' ){
|
||||
this.buttonText = '修改';
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.tipBoxWidth = model.width;
|
||||
this.form.tipBoxHeight = model.height;
|
||||
this.form.fillColor = model.fillColor;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
this.opacity = model.opacity;
|
||||
this.form.lineWidth = model.lineWidth;
|
||||
this.form.stroke = model.stroke;
|
||||
}
|
||||
export default {
|
||||
name: 'TextDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
opacity: false,
|
||||
form: {
|
||||
code: '',
|
||||
tipBoxWidth: '',
|
||||
tipBoxHeight: '',
|
||||
fillColor: '#CE950F',
|
||||
x: 10,
|
||||
y: 10,
|
||||
lineWidth: 0,
|
||||
stroke: ''
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入提示框编号', trigger: 'blur' }
|
||||
],
|
||||
tipBoxWidth: [
|
||||
{ required: true, message: '请输入提示框宽度', trigger: 'blur' }
|
||||
],
|
||||
tipBoxHeight: [
|
||||
{ required: true, message: '请输入提示框高度', trigger: 'blur' }
|
||||
],
|
||||
fillColor: [
|
||||
{ required: true, message: '请输入提示框颜色', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
const tipBoxModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'TipBox',
|
||||
width: this.form.tipBoxWidth,
|
||||
height: this.form.tipBoxHeight,
|
||||
fillColor: this.form.fillColor,
|
||||
opacity: this.opacity,
|
||||
lineWidth: this.form.lineWidth,
|
||||
stroke: this.form.stroke
|
||||
};
|
||||
this.$emit('createTipBox', tipBoxModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const tipBoxModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'TipBox',
|
||||
width: this.form.tipBoxWidth,
|
||||
height: this.form.tipBoxHeight,
|
||||
fillColor: this.form.fillColor,
|
||||
opacity: this.opacity,
|
||||
lineWidth: this.form.lineWidth,
|
||||
stroke: this.form.stroke
|
||||
};
|
||||
this.$emit('deleteDataModel',tipBoxModel);
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = '立即创建';
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
tipBoxWidth: '',
|
||||
tipBoxHeight: '',
|
||||
fillColor: '',
|
||||
x: 10,
|
||||
y: 10,
|
||||
opacity: false,
|
||||
lineWidth: 0,
|
||||
stroke: ''
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "tipBox_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'TipBox' ) {
|
||||
this.buttonText = '修改';
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.tipBoxWidth = model.width;
|
||||
this.form.tipBoxHeight = model.height;
|
||||
this.form.fillColor = model.fillColor;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
this.opacity = model.opacity;
|
||||
this.form.lineWidth = model.lineWidth;
|
||||
this.form.stroke = model.stroke;
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
const tipBoxModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'TipBox',
|
||||
width: this.form.tipBoxWidth,
|
||||
height: this.form.tipBoxHeight,
|
||||
fillColor: this.form.fillColor,
|
||||
opacity: this.opacity,
|
||||
lineWidth: this.form.lineWidth,
|
||||
stroke: this.form.stroke
|
||||
};
|
||||
this.$emit('createData', tipBoxModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const tipBoxModel = {
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'TipBox',
|
||||
width: this.form.tipBoxWidth,
|
||||
height: this.form.tipBoxHeight,
|
||||
fillColor: this.form.fillColor,
|
||||
opacity: this.opacity,
|
||||
lineWidth: this.form.lineWidth,
|
||||
stroke: this.form.stroke
|
||||
};
|
||||
this.$emit('deleteDataModel', tipBoxModel);
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = '立即创建';
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
tipBoxWidth: '',
|
||||
tipBoxHeight: '',
|
||||
fillColor: '',
|
||||
x: 10,
|
||||
y: 10,
|
||||
opacity: false,
|
||||
lineWidth: 0,
|
||||
stroke: ''
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = 'tipBox_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
@ -2,153 +2,28 @@
|
||||
<transition name="el-zoom-in-center">
|
||||
<div class="map-control">
|
||||
<div class="clearfix">
|
||||
<span style="padding-top: 5px;">{{ $t('ibp.stationName') }}</span>
|
||||
<el-select v-model="stationCode" :placeholder="this.$t('rules.selectStation')" style="padding-top: 5px;" @change="changeStationCode">
|
||||
<div style="float: left;padding-top: 17px;">
|
||||
<span style="padding-top: 5px;">{{ $t('ibp.stationName') }}</span>
|
||||
<span>{{ stationCode }}</span>
|
||||
</div>
|
||||
<!-- <el-select v-model="stationCode" :placeholder="this.$t('rules.selectStation')" style="padding-top: 5px;" @change="changeStationCode">
|
||||
<el-option
|
||||
v-for="item in stationOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-select> -->
|
||||
<el-button type="text" style="float: right; padding: 15px 0; margin-right: 5px;" @click="handleSave">{{ $t('ibp.save') }}</el-button>
|
||||
</div>
|
||||
<el-tabs v-model="enabledTab" class="ibpEdit" type="card" @tab-click="handleTabClick">
|
||||
<el-tab-pane :label="this.$t('ibp.background')" name="Background">
|
||||
<el-tab-pane v-for="(each, index) in tabList" :key="index" :label="each.label" :name="each.name">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
|
||||
<ibp-bg
|
||||
ref="background"
|
||||
<component
|
||||
:is="each.menus"
|
||||
:ref="each.name"
|
||||
style="width:90%"
|
||||
@updateBg="createDataModel"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.line')" name="IbpLine">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
|
||||
<ibp-line
|
||||
ref="ibpline"
|
||||
style="width:90%"
|
||||
@createLine="createDataModel"
|
||||
@deleteDataModel="deleteDataModel"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.text')" name="IbpText">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
|
||||
<ibp-text
|
||||
ref="ibptext"
|
||||
style="width:90%"
|
||||
@createText="createDataModel"
|
||||
@deleteDataModel="deleteDataModel"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.rect')" name="TipBox">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
|
||||
<ibp-tip-box
|
||||
ref="tipbox"
|
||||
style="width:90%"
|
||||
@createTipBox="createDataModel"
|
||||
@deleteDataModel="deleteDataModel"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.button')" name="SquareButton">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
|
||||
<ibp-button
|
||||
ref="squarebutton"
|
||||
style="width:90%"
|
||||
@createButton="createDataModel"
|
||||
@deleteDataModel="deleteDataModel"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.circularLamp')" name="CircularLamp">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
|
||||
<ibp-lamp
|
||||
ref="circularlamp"
|
||||
style="width:90%"
|
||||
@createLamp="createDataModel"
|
||||
@deleteDataModel="deleteDataModel"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.arrow')" name="Arrow">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
|
||||
<ibp-arrow
|
||||
ref="arrow"
|
||||
style="width:90%"
|
||||
@createArrow="createDataModel"
|
||||
@deleteDataModel="deleteDataModel"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.escalatorFrame')" name="AppendageBox">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
|
||||
<ibp-appendage-box
|
||||
ref="appendagebox"
|
||||
style="width:90%"
|
||||
@createAppendageBox="createDataModel"
|
||||
@deleteDataModel="deleteDataModel"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.alarm')" name="Alarm">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
|
||||
<ibp-alarm
|
||||
ref="alarm"
|
||||
style="width:90%"
|
||||
@createAlarm="createDataModel"
|
||||
@deleteDataModel="deleteDataModel"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.telephoneTerminal')" name="TeleTerminal">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
|
||||
<ibp-telephone-terminal
|
||||
ref="teleTerminal"
|
||||
style="width:90%"
|
||||
@createTeleTerminal="createDataModel"
|
||||
@deleteDataModel="deleteDataModel"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.escalator')" name="Elevator">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
|
||||
<ibp-elevator
|
||||
ref="elevator"
|
||||
style="width:90%"
|
||||
@createElevator="createDataModel"
|
||||
@deleteDataModel="deleteDataModel"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.key')" name="Key">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
|
||||
<ibp-key
|
||||
ref="key"
|
||||
style="width:90%"
|
||||
@createKey="createDataModel"
|
||||
@deleteDataModel="deleteDataModel"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.digitalClock')" name="Clock">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
|
||||
<ibp-clock
|
||||
ref="clock"
|
||||
style="width:90%"
|
||||
@createClock="createDataModel"
|
||||
@deleteDataModel="deleteDataModel"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="this.$t('ibp.rotateTip')" name="RotateTip">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
|
||||
<ibp-rotate-tip
|
||||
ref="rotateTip"
|
||||
style="width:90%"
|
||||
@createRotateTip="createDataModel"
|
||||
@createData="createDataModel"
|
||||
@deleteDataModel="deleteDataModel"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
@ -200,32 +75,34 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
enabledTab: 'Background',
|
||||
lazy: true,
|
||||
tabList:[
|
||||
{ label: this.$t('ibp.background'), name:'Background', menus: IbpBg },
|
||||
{ label: this.$t('ibp.line'), name:'IbpLine', menus: IbpLine },
|
||||
{ label: this.$t('ibp.text'), name:'IbpText', menus: IbpText },
|
||||
{ label: this.$t('ibp.rect'), name:'TipBox', menus: IbpTipBox },
|
||||
{ label: this.$t('ibp.button'), name:'SquareButton', menus: IbpButton },
|
||||
{ label: this.$t('ibp.circularLamp'), name:'CircularLamp', menus: IbpLamp },
|
||||
{ label: this.$t('ibp.arrow'), name:'Arrow', menus: IbpArrow },
|
||||
{ label: this.$t('ibp.escalatorFrame'), name:'AppendageBox', menus: IbpAppendageBox },
|
||||
{ label: this.$t('ibp.alarm'), name:'Alarm', menus: IbpAlarm },
|
||||
{ label: this.$t('ibp.telephoneTerminal'), name:'TeleTerminal', menus: IbpTelephoneTerminal },
|
||||
{ label: this.$t('ibp.escalator'), name:'Elevator', menus: IbpElevator },
|
||||
{ label: this.$t('ibp.key'), name:'Key', menus: IbpKey },
|
||||
{ label: this.$t('ibp.digitalClock'), name:'Clock', menus: IbpClock },
|
||||
{ label: this.$t('ibp.rotateTip'), name:'RotateTip', menus: IbpRotateTip }
|
||||
],
|
||||
data: '',
|
||||
stationOptions:[],
|
||||
// stationOptions:[
|
||||
// {
|
||||
// value: 'Station_203_0.07533',
|
||||
// // label: '通化门站'
|
||||
// label: '车站一'
|
||||
// },
|
||||
// {
|
||||
// value: 'Station_207_0.62282',
|
||||
// // label: '枣园站'
|
||||
// label: '车站二'
|
||||
// },
|
||||
// {
|
||||
// value: 'Station_209_0.95175',
|
||||
// label: '车站三'
|
||||
// // label: '后卫寨站'
|
||||
// }
|
||||
// ],
|
||||
// drawData: {},
|
||||
// stationCode: '',
|
||||
height: this.$store.state.app.height - 190
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
stationCode() {
|
||||
if (this.stationOptions.length) {
|
||||
const obj = this.stationOptions.find(ele => ele.value == this.$route.query.stationCode);
|
||||
return obj.label;
|
||||
}
|
||||
return this.$route.query.stationCode;
|
||||
}
|
||||
},
|
||||
@ -254,9 +131,6 @@ export default {
|
||||
} catch (error) {
|
||||
console.log('error', error);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
createDataModel(model) {
|
||||
@ -278,31 +152,35 @@ export default {
|
||||
}
|
||||
},
|
||||
setIbpShow(data) {
|
||||
this.$emit('set-ibp-show', data);
|
||||
if (data) {
|
||||
this.$emit('set-ibp-show', data);
|
||||
}
|
||||
this.handleTabClick();
|
||||
},
|
||||
setEmptyShow() {
|
||||
this.$emit('set-empty-show');
|
||||
},
|
||||
changeStationCode(e) {
|
||||
this.$emit('ibpChange', e);
|
||||
this.handleTabClick();
|
||||
},
|
||||
// changeStationCode(e) {
|
||||
// this.$emit('ibpChange', e);
|
||||
// this.handleTabClick();
|
||||
// },
|
||||
handleTabClick() {
|
||||
this.$refs.ibpline.initPage();
|
||||
this.$refs.ibptext.initPage();
|
||||
this.$refs.tipbox.initPage();
|
||||
this.$refs.squarebutton.initPage();
|
||||
this.$refs.circularlamp.initPage();
|
||||
this.$refs.arrow.initPage();
|
||||
this.$refs.appendagebox.initPage();
|
||||
this.$refs.alarm.initPage();
|
||||
this.$refs.elevator.initPage();
|
||||
this.$refs.key.initPage();
|
||||
this.$refs.teleTerminal.initPage();
|
||||
this.$refs.clock.initPage();
|
||||
this.$refs.rotateTip.initPage();
|
||||
this.$refs.background.initPage();
|
||||
this.$nextTick(() => {
|
||||
this.$refs.IbpLine[0].initPage();
|
||||
this.$refs.IbpText[0].initPage();
|
||||
this.$refs.TipBox[0].initPage();
|
||||
this.$refs.SquareButton[0].initPage();
|
||||
this.$refs.CircularLamp[0].initPage();
|
||||
this.$refs.Arrow[0].initPage();
|
||||
this.$refs.AppendageBox[0].initPage();
|
||||
this.$refs.Alarm[0].initPage();
|
||||
this.$refs.Elevator[0].initPage();
|
||||
this.$refs.Key[0].initPage();
|
||||
this.$refs.TeleTerminal[0].initPage();
|
||||
this.$refs.Clock[0].initPage();
|
||||
this.$refs.RotateTip[0].initPage();
|
||||
this.$refs.Background[0].initPage();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -317,6 +195,7 @@ export default {
|
||||
.clearfix{
|
||||
height: 50px;
|
||||
padding: 0 22px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ibpEdit{
|
||||
height: calc(100% - 50px);
|
||||
|
||||
@ -49,6 +49,7 @@ export default {
|
||||
mounted() {
|
||||
this.$refs.ibpPlate.show();
|
||||
this.$refs.ibpPlate.drawIbpInit();
|
||||
this.$refs.ibpPlate.setMoveInit(true);
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
||||
@ -57,11 +58,13 @@ export default {
|
||||
ibpChange(stationCode) {
|
||||
this.$refs.ibpPlate.show(stationCode);
|
||||
this.$refs.ibpPlate.drawIbpInit();
|
||||
this.$refs.ibpPlate.setMoveInit(true);
|
||||
},
|
||||
setIbpShow(data) {
|
||||
const newData = parser(data, {width: this.canvasWidth, height: this.canvasHeight});
|
||||
this.$refs.ibpPlate.setIbp(newData, data);
|
||||
this.$refs.ibpPlate.drawIbpInit();
|
||||
this.$refs.ibpPlate.setMoveInit(true);
|
||||
},
|
||||
setEmptyShow() {
|
||||
this.$nextTick(() => { // 执行一次 微任务 等待this.$ibp加载完成
|
||||
|
||||
@ -86,9 +86,14 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
async mounted() {
|
||||
this.setWindowSize();
|
||||
this.initIbp();
|
||||
if (this.$route.query.loadAll && this.$route.query.stationCode) {
|
||||
await this.show(this.$route.query.stationCode);
|
||||
await this.setMoveInit(true);
|
||||
this.showBackButton = false;
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.ibpDestroy();
|
||||
@ -167,6 +172,7 @@ export default {
|
||||
},
|
||||
setIbp(data, oldData) {
|
||||
this.$ibp.setIbp(oldData, data);
|
||||
this.$store.dispatch('ibp/setIbpData', oldData);
|
||||
},
|
||||
handleBanOpenScreenDoorStatus() {
|
||||
this.$store.state.ibp.ibp['keyList'].forEach(item => {
|
||||
@ -218,6 +224,10 @@ export default {
|
||||
this.$ibp && this.$ibp.drawIbpInit();
|
||||
this.showBackButton = false;
|
||||
},
|
||||
// 地图可拖拽
|
||||
setMoveInit(data) {
|
||||
this.$ibp && this.$ibp.setMoveOnMouseMove(data);
|
||||
},
|
||||
// 初始化电子表时间
|
||||
initClockTime(initTime) {
|
||||
this.$ibp.initClockTime(initTime);
|
||||
|
||||
130
src/views/newMap/displayNew/demon/selectIbp.vue
Normal file
130
src/views/newMap/displayNew/demon/selectIbp.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
:title="$t('display.script.scriptList')"
|
||||
:visible.sync="show"
|
||||
top="50px"
|
||||
width="60%"
|
||||
:before-do-close="doClose"
|
||||
:close-on-click-modal="false"
|
||||
:z-index="2000"
|
||||
>
|
||||
<QueryListPage
|
||||
ref="queryListPage"
|
||||
:pager-config="pagerConfig"
|
||||
:query-form="queryForm"
|
||||
:query-list="queryList"
|
||||
/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getScriptPageListOnlineNew } from '@/api/script';
|
||||
|
||||
// 剧本弹窗
|
||||
export default {
|
||||
name: 'AddQuest',
|
||||
props: {
|
||||
trainings: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
type: Object,
|
||||
default() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
pagerConfig: {
|
||||
pageSize: 'pageSize',
|
||||
pageIndex: 'pageNum'
|
||||
},
|
||||
queryForm: {
|
||||
labelWidth: '80px',
|
||||
reset: false,
|
||||
show: false,
|
||||
queryObject: {
|
||||
|
||||
}
|
||||
},
|
||||
queryList: {
|
||||
query: this.listQuest,
|
||||
selectCheckShow: false,
|
||||
indexShow: true,
|
||||
columns: [
|
||||
{
|
||||
title: '关联站台',
|
||||
prop: 'name'
|
||||
},
|
||||
// {
|
||||
// title: '创建时间',
|
||||
// prop: 'createTime'
|
||||
// },
|
||||
{
|
||||
type: 'button',
|
||||
title: '操作',
|
||||
width: '250',
|
||||
buttons: [
|
||||
{
|
||||
name: '预览',
|
||||
type: 'primary',
|
||||
handleClick: this.handleLoad
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
actions: [
|
||||
]
|
||||
},
|
||||
|
||||
currentModel: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.loadInitData();
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.show = true;
|
||||
this.reloadTable();
|
||||
},
|
||||
doClose() {
|
||||
this.show = false;
|
||||
},
|
||||
listQuest(params) {
|
||||
params['mapId'] = this.$route.query.mapId;
|
||||
return getScriptPageListOnlineNew(params);
|
||||
},
|
||||
async loadInitData() {
|
||||
|
||||
},
|
||||
|
||||
async handleLoad(index, row) {
|
||||
this.row = row;
|
||||
// const routeData = this.$router.resolve({
|
||||
// path:`/ibpShow`,
|
||||
// query:{
|
||||
// lineCode: this.$route.query.lineCode,
|
||||
// mapId: this.$route.query.mapId,
|
||||
// group: this.$route.query.group
|
||||
// }
|
||||
// });
|
||||
// window.open(routeData.href, '_blank', 'noopener noreferrer');
|
||||
},
|
||||
|
||||
reloadTable() {
|
||||
if (this.queryList && this.queryList.reload) {
|
||||
this.queryList.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -57,200 +57,11 @@ export default {
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
// '$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始获取仿真成员
|
||||
// getSimulationMemberList(this.group).then(resp => {
|
||||
// this.driverList = [];
|
||||
// this.treeData = [];
|
||||
// const result = covertMemberData(this.activeTrainList, resp.data);
|
||||
// this.driverList = result.driverList;
|
||||
// this.treeData = [{
|
||||
// label: '行调',
|
||||
// id: 'dispatcher',
|
||||
// type: 'role',
|
||||
// children: result.deviceListData[0]
|
||||
// }, {
|
||||
// label: '车站值班员',
|
||||
// id: 'stationSupervisor',
|
||||
// type: 'role',
|
||||
// children: result.deviceListData[2]
|
||||
// }, {
|
||||
// label: '司机',
|
||||
// id: 'driver',
|
||||
// type: 'role',
|
||||
// children: result.deviceListData[3]
|
||||
// }, {
|
||||
// label: '通号',
|
||||
// id: 'maintainer',
|
||||
// type: 'role',
|
||||
// children: result.deviceListData[1]
|
||||
// }, {
|
||||
// label: '车辆段',
|
||||
// id: 'depotDispatcher',
|
||||
// type: 'role',
|
||||
// children: result.deviceListData[4]
|
||||
// }];
|
||||
// this.memberData = result.lastMemberList;
|
||||
// }).catch(() => {
|
||||
// this.$messageBox('获取仿真成员列表失败！');
|
||||
// });
|
||||
// },
|
||||
// 创建会话
|
||||
// '$store.state.socket.createConversition':function(val) {
|
||||
// if (this.memberData.length > 0) {
|
||||
// const conversitionMember = this.memberData.find(member=>{ return member.userId == this.$store.state.user.id; });
|
||||
// if (conversitionMember && val.memberIds.includes(conversitionMember.id)) {
|
||||
// // 当前用户创建的会话
|
||||
// if (val.creatorId !== conversitionMember.id) {
|
||||
// this.$message.success(this.coverName(val) + '与你开启会话');
|
||||
// }
|
||||
// this.isHasCoversition = true;
|
||||
// this.isStartRecord = true;
|
||||
// this.isQuitShow = true;
|
||||
// this.conversitionId = val.id;
|
||||
// const memberList = [];
|
||||
// val.memberIds.forEach(id=>{
|
||||
// if (val.creatorId == id) {
|
||||
// const member = this.memberData.find(member=>{ return member.id == id; });
|
||||
// member.connect = true;
|
||||
// memberList.push(member);
|
||||
// } else {
|
||||
// const member = this.memberData.find(member=>{ return member.id == id; });
|
||||
// // member.connect = false;
|
||||
// member.connect = true;
|
||||
// member && memberList.push(member);
|
||||
// }
|
||||
// });
|
||||
// this.currentMemberList = memberList;
|
||||
// } else {
|
||||
// // 如果是观众看所有人的会话
|
||||
// if (this.userRole == 'AUDIENCE') {
|
||||
// this.isHasCoversition = true;
|
||||
// this.currentMemberList = this.memberData;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// 用户接受会话
|
||||
// '$store.state.socket.acceptConversionInvite':function(val) {
|
||||
// this.conversitionId = val.id;
|
||||
// if (this.conversitionId) {
|
||||
// let result = false;
|
||||
// // 更改成员列表里面的成员状态
|
||||
// const memberList = this.currentMemberList.map(member => {
|
||||
// if (member.id == val.memberId) {
|
||||
// member.connect = true;
|
||||
// result = true;
|
||||
// }
|
||||
// return member;
|
||||
// });
|
||||
// // 如果该用户不在成员列表里面，就动态加进去（当前会话）
|
||||
// if (!result && this.conversitionId) {
|
||||
// const member = this.memberData.find(member=>{ return member.id == val.memberId; });
|
||||
// if (member) {
|
||||
// member.connect = true;
|
||||
// memberList.push(member);
|
||||
// // 如果是当前的用户
|
||||
// if (member.userId == this.$store.state.user.id) {
|
||||
// memberList.push(this.inviteUser);
|
||||
// this.isStartRecord = true;
|
||||
// this.isQuitShow = true;
|
||||
// this.inviteUser = {};
|
||||
// this.isHasCoversition = true;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// this.currentMemberList = memberList;
|
||||
// }
|
||||
// },
|
||||
// 会话聊天消息
|
||||
// '$store.state.socket.conversationInfo':function (val, old) { // 仿真聊天
|
||||
// const simulationText = this.$store.state.socket.conversationInfo;
|
||||
// if (val.messageType == 'MESSAGE' && (this.conversitionId == val.id || this.userRole == 'AUDIENCE')) {
|
||||
// const content = this.addContent(simulationText.message);
|
||||
// this.chatContentList.push(content);
|
||||
// if (!content.self) {
|
||||
// this.$refs.chatbox.addAudioList(content);
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// 按计划行车的列车列表更新(更新司机列表)
|
||||
// '$store.state.map.activeTrainListChange': function (val) {
|
||||
// const activeTrainList = this.$store.state.map.activeTrainList;
|
||||
// activeTrainList.sort((a, b) => {
|
||||
// return parseInt(a) - parseInt(b);
|
||||
// });
|
||||
// if (this.driverList.length > 0) {
|
||||
// const driverList = [];
|
||||
// if (activeTrainList && activeTrainList.length) {
|
||||
// activeTrainList.forEach(groupNumber => {
|
||||
// const drivers = this.driverList.find(driver=>{
|
||||
// return driver.deviceCode == groupNumber;
|
||||
// });
|
||||
// if (drivers) {
|
||||
// driverList.push(drivers);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// this.treeData[2].children = driverList;
|
||||
// this.memberData = [...this.treeData[0].children, ...this.treeData[1].children, ...this.treeData[2].children, ...this.treeData[3].children, ...this.treeData[4].children];
|
||||
// } else {
|
||||
// this.activeTrainList = activeTrainList;
|
||||
// }
|
||||
// },
|
||||
// 剧本执行完成消息
|
||||
'$store.state.socket.scriptFinish':function(val, old) {
|
||||
this.$message('剧本演出完毕');
|
||||
this.$refs.scriptTip.resetScriptTip();
|
||||
},
|
||||
// 退出会话消息
|
||||
// '$store.state.socket.overConversition': function (val) {
|
||||
// if (val.id === this.conversitionId) {
|
||||
// this.conversitionId = '';
|
||||
// this.currentMemberList = [];
|
||||
// this.chatContentList = [];
|
||||
// this.isHasCoversition = false;
|
||||
// this.isStartRecord = false;
|
||||
// }
|
||||
// },
|
||||
// '$store.state.socket.exitConversition': function (val) {
|
||||
// const member = this.memberData.find(member=>{ return member.memberId == val.member; });
|
||||
// if (val.id === this.conversitionId && member.userId == this.$store.state.user.id) {
|
||||
// this.conversitionId = '';
|
||||
// this.currentMemberList = [];
|
||||
// this.chatContentList = [];
|
||||
// this.isHasCoversition = false;
|
||||
// this.isStartRecord = false;
|
||||
// } else if (val.id === this.conversitionId) {
|
||||
// const mList = [];
|
||||
// this.currentMemberList.forEach(member => {
|
||||
// if (member.memberId != val.memberId) {
|
||||
// mList.push(member);
|
||||
// }
|
||||
// });
|
||||
// this.currentMemberList = mList;
|
||||
// }
|
||||
// },
|
||||
// 邀请会话的消息
|
||||
'$store.state.socket.inviteSimulationConversition':function(val) {
|
||||
// const conversitionMember = this.memberData.find(member=>{ return member.id == val.creatorId; });
|
||||
// if (conversitionMember) {
|
||||
// this.inviteUserName = conversitionMember.label;
|
||||
// this.conversitionId = val.id;
|
||||
// conversitionMember.connect = true;
|
||||
// conversitionMember.online = true;
|
||||
// this.inviteUser = conversitionMember;
|
||||
//
|
||||
// this.currentMemberList.push(conversitionMember);
|
||||
// const member = this.memberData.find(member=>{ return member.id == val.memberId; });
|
||||
// member.connect = true;
|
||||
// this.currentMemberList.push(member);
|
||||
// this.isStartRecord = true;
|
||||
// this.isHasCoversition = true;
|
||||
// // this.$refs.chatbox.inviteMember();
|
||||
// this.$message.success(this.inviteUserName + '与你开启会话');
|
||||
// }
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
<el-button v-if="scheduleLoadShow" type="primary" size="small" @click="jumpScheduling">派班计划加载</el-button>
|
||||
<el-button v-if="schedulePreviewShow" type="primary" size="small" @click="schedulingView">派班计划预览</el-button>
|
||||
<el-button v-if="isContest" size="small" @click="fieldPractice">实操练习</el-button>
|
||||
<el-button v-if="isContest" size="small" @click=" fieldTeach">实操教学</el-button>
|
||||
<el-button v-if="isContest" size="small" @click="viewChangeMap">切换地图</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
@ -204,7 +205,10 @@ export default {
|
||||
this.$emit('changeMap', query);
|
||||
},
|
||||
fieldPractice() {
|
||||
this.$emit('fieldPractice');
|
||||
this.$emit('fieldPractice', 'practice');
|
||||
},
|
||||
fieldTeach() {
|
||||
this.$emit('fieldPractice', 'teach');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -376,7 +376,8 @@ export default {
|
||||
}
|
||||
this.userRole = userRole;
|
||||
this.$store.dispatch('scriptRecord/updateBgSet', true);
|
||||
this.$refs.chatbox.setMembers(id);
|
||||
console.log(id, '-------------');
|
||||
// this.$refs.chatbox.setMembers(id);
|
||||
const res = await loadScriptNew(row.id, id, this.group);
|
||||
if (res && res.code == 200) {
|
||||
if (mapLocation) {
|
||||
@ -387,6 +388,7 @@ export default {
|
||||
// this.initLoadPage();
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
this.$messageBox(error.message);
|
||||
}
|
||||
// if (this.isScript) {
|
||||
@ -410,7 +412,7 @@ export default {
|
||||
}
|
||||
}
|
||||
this.userRole = userRole;
|
||||
this.$refs.chatbox.setMembers(this.$store.state.training.orignalUserRoleId);
|
||||
// this.$refs.chatbox.setMembers(this.$store.state.training.orignalUserRoleId);
|
||||
this.$refs.chatbox.clearAllData();
|
||||
this.$store.dispatch('training/setPrdType', this.$route.query.prdType);
|
||||
this.$store.dispatch('training/setRoles', userRole);
|
||||
@ -441,8 +443,8 @@ export default {
|
||||
|
||||
}
|
||||
},
|
||||
fieldPractice() {
|
||||
this.$refs.sceneList.doShow();
|
||||
fieldPractice(param) {
|
||||
this.$refs.sceneList.doShow(param);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -48,6 +48,7 @@ export default {
|
||||
memberList: [],
|
||||
memberId:'',
|
||||
selectMapLineCode:'',
|
||||
operationType: '',
|
||||
mainSceneData: [
|
||||
{type: '车辆故障', scene: '列车救援'},
|
||||
{type: '信号系统故障', scene: '道岔故障', id: '9'},
|
||||
@ -83,7 +84,8 @@ export default {
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
doShow(row) {
|
||||
doShow(param) {
|
||||
this.operationType = param;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
doClose() {
|
||||
@ -133,6 +135,7 @@ export default {
|
||||
this.confirm();
|
||||
},
|
||||
confirm() {
|
||||
this.$store.dispatch('training/setScriptOperationType', this.operationType);
|
||||
this.$emit('selectQuest', {row:this.row, id:this.memberId, mapLocation:this.mapLocation});
|
||||
this.doClose();
|
||||
},
|
||||
|
||||
@ -332,7 +332,7 @@ export default {
|
||||
this.$store.dispatch('training/setRoles', 'AUDIENCE');
|
||||
this.$store.dispatch('training/setPrdType', '');
|
||||
}
|
||||
this.$refs.menuSchema.loadRunData();
|
||||
// this.$refs.menuSchema.loadRunData();
|
||||
this.userRole = userRole;
|
||||
this.$store.dispatch('scriptRecord/updateBgSet', true);
|
||||
// this.$refs.chatbox.setMembers(id);
|
||||
|
||||
@ -26,7 +26,7 @@ export default {
|
||||
watch:{
|
||||
// 剧本提示
|
||||
'$store.state.socket.simulationScriptTip':function(val, old) {
|
||||
if (val) {
|
||||
if (val && this.$store.state.training.scriptOperationType === 'teach') {
|
||||
if (val.type == 'Conversation') {
|
||||
this.scriptTipMessage = '请说：' + val.content;
|
||||
} else if (val.type == 'Operation') {
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
<el-option v-for="item in stationList" :key="item.value" :label="item.name" :value="item.value" />
|
||||
</el-select>
|
||||
<el-button-group>
|
||||
<!-- <el-button v-if="userRole=== 'DISPATCHER' && !$route.query.projectDevice" size="small" @click="goIbp">IBP盘</el-button> -->
|
||||
<el-button v-if="userRole=== 'DISPATCHER' && !$route.query.projectDevice" size="small" @click="goBigScreen">大屏</el-button>
|
||||
<el-button v-if="running && !dataError" size="small" :disabled="viewDisabled" @click="viewRunPlan">{{ $t('joinTraining.runGraphPreview') }}</el-button>
|
||||
<template v-if="isAdmin">
|
||||
@ -20,6 +21,7 @@
|
||||
<el-button v-if="isShowDirective" size="small" :type="directiveMode ? 'primary' : ''" @click="changeDirectiveMode()">{{ directiveMode? '切换到普通模式':'切换到指令模式' }}</el-button>
|
||||
</div>
|
||||
<join-run-plan-view v-if="running && !dataError" ref="runPlanView" :group="group" />
|
||||
<select-ibp ref="selectIbp" />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@ -30,10 +32,12 @@ import { getByGroupStationList } from '@/api/jmap/map';
|
||||
import { getEveryDayRunPlanNew } from '@/api/simulation';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import JoinRunPlanView from '@/views/newMap/displayNew/demon/runPlanView';
|
||||
import SelectIbp from '@/views/newMap/displayNew/demon/selectIbp';
|
||||
export default {
|
||||
name: 'MenuDemonSchema',
|
||||
components:{
|
||||
JoinRunPlanView
|
||||
JoinRunPlanView,
|
||||
SelectIbp
|
||||
},
|
||||
props: {
|
||||
group: {
|
||||
@ -199,6 +203,21 @@ export default {
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank', 'noopener noreferrer');
|
||||
},
|
||||
// 点击ibp预览
|
||||
goIbp() {
|
||||
// this.$refs.selectIbp.doShow();
|
||||
const routeData = this.$router.resolve({
|
||||
path:`/ibpShow`,
|
||||
query:{
|
||||
lineCode: this.$route.query.lineCode,
|
||||
mapId: this.$route.query.mapId,
|
||||
group: this.$route.query.group,
|
||||
stationCode: 'Station25166',
|
||||
loadAll: true
|
||||
}
|
||||
});
|
||||
window.open(routeData.href, '_blank', 'noopener noreferrer');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -164,8 +164,10 @@ export default {
|
||||
this.$emit('hover', filed);
|
||||
},
|
||||
addModelList() {
|
||||
const uname = getUID('T', [...this.sectionList, ...this.createModel.modelList]);
|
||||
const param = {
|
||||
sectionName: 'T',
|
||||
code: uname,
|
||||
sectionName: uname,
|
||||
length: ''
|
||||
};
|
||||
this.createModel.modelList.push(param);
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user