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

Merge branch 'master' of https://git.cloud.tencent.com/joylink/jl-nclient

Browse Source 
# Conflicts:
#	src/jmap/config/deviceStyle.js
#	src/jmap/config/deviceType.js
#	src/jmap/shape/factory.js
#	src/jmap/utils/parser.js
This commit is contained in:
fan 2019-07-15 16:01:19 +08:00
commit b35470c513
21 changed files with 2477 additions and 324 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,38 +11,92 @@ deviceRender[deviceType.Link] = {
/** Section渲染配置*/ /** Section渲染配置*/
deviceRender[deviceType.Section] = { deviceRender[deviceType.Section] = {
zlevel: 1, zlevel: 1,
progressive: 2, progressive: 2
} };
/** Signal渲染配置*/ /** Signal渲染配置*/
deviceRender[deviceType.Signal] = { deviceRender[deviceType.Signal] = {
zlevel: 1, zlevel: 1,
progressive: 3, progressive: 3
} };
/** Switch渲染配置*/ /** Switch渲染配置*/
deviceRender[deviceType.Switch] = { deviceRender[deviceType.Switch] = {
zlevel: 3, zlevel: 3,
progressive: 5, progressive: 5
} };
/** Station渲染配置*/ /** Station渲染配置*/
deviceRender[deviceType.Station] = { deviceRender[deviceType.Station] = {
zlevel: 1, zlevel: 1,
progressive: 4, progressive: 4
} };
/** StationStand渲染配置*/ /** StationStand渲染配置*/
deviceRender[deviceType.StationStand] = { deviceRender[deviceType.StationStand] = {
zlevel: 1, zlevel: 1,
progressive: 5, progressive: 5
} };
/** StationControl渲染配置*/ /** StationControl渲染配置*/
deviceRender[deviceType.StationControl] = { deviceRender[deviceType.StationControl] = {
zlevel: 1, zlevel: 1,
progressive: 4, progressive: 4
} };
/** ImageControl渲染配置*/
deviceRender[deviceType.ImageControl] = {
zlevel: 1,
progressive: 5
};
/** ZcControl渲染配置*/
deviceRender[deviceType.ZcControl] = {
zlevel: 1,
progressive: 6
};
/** LcControl渲染配置*/
deviceRender[deviceType.LcControl] = {
zlevel: 1,
progressive: 6
};
/** LimitControl渲染配置*/
deviceRender[deviceType.LimitControl] = {
zlevel: 1,
progressive: 5
};
/** StationDelayUnlock渲染配置*/
deviceRender[deviceType.StationDelayUnlock] = {
zlevel: 1,
progressive: 6
};
/** Train渲染配置*/
deviceRender[deviceType.Train] = {
zlevel: 1,
progressive: 9
};
/** TrainWindow渲染配置*/
deviceRender[deviceType.TrainWindow] = {
zlevel: 1,
progressive: 8
};
/** Line渲染配置*/
deviceRender[deviceType.Line] = {
zlevel: 1,
progressive: 7
};
/** Text渲染配置*/
deviceRender[deviceType.Text] = {
zlevel: 1,
progressive: 7
};
/** TrainWindow渲染配置*/ /** TrainWindow渲染配置*/
deviceRender[deviceType.TrainWindow] = { deviceRender[deviceType.TrainWindow] = {

328
src/jmap/config/deviceState.js
View File

@ -2,19 +2,329 @@ import deviceType from './deviceType';
const deviceState = {}; const deviceState = {};
/** link状态配置*/ deviceState[deviceType.Section] = {
deviceState[deviceType.Link] = { /** 区段状态*/
status: { status: {
Default: '01', // 01默认状态 Default: '01', /** 空闲（缺省值）*/
State01: '01', // 01状态 State00: '00', /** 未定义状态 */
State02: '02' // 02状态 State01: '01', /** 空闲 */
State02: '02', /** 通信车占用 */
State03: '03', /** 非通信车占用 */
State04: '04', /** 进路锁闭 */
State05: '05', /** 故障锁闭 */
State06: '06', /** 封锁 */
State07: '07', /** ATC切除 */
State08: '08', /** ATS切除 */
State09: '09', /** 进路延续保护 */
State10: '10', /** 延时释放 */
State11: '11', /** 保护区段锁闭 */
State12: '12', /** 保护区段延时解锁 */
State13: '13', /** ARB出清检测错误状态 */
State14: '14' /** 计轴失效 */
},
/** 限速*/
speedUpperLimit: {
Default: -1 /** 不限速*/
},
/** 是否切除*/
cutOff: {
Default: false /** 是否切除*/
},
/** 是否故障*/
fault: {
Default: false /** 非故障*/
} }
}; };
deviceState[deviceType.Section] = {
deviceState[deviceType.Switch] = {
/** 定位状态*/
locateType: {
Default: '01', /** 道岔位置类型 - 定位（缺省值）*/
State01: '01', /** 道岔位置类型 - 定位 */
State02: '02', /** 道岔位置类型 - 反位 */
State03: '03', /** 道岔位置类型 - 失去表示 */
State04: '04' /** 道岔位置类型 - 挤岔 */
},
/** 道岔状态*/
status: { status: {
Default: '01', // 01默认状态 Default: '01', /** 道岔状态类型 - 空闲（缺省值）*/
State01: '01', // 01状态 State01: '01', /** 道岔状态类型 - 空闲 */
State02: '02' // 02状态 State02: '02', /** 道岔状态类型 - 通信车占用 */
State03: '03', /** 道岔状态类型 - 非通信车占用 */
State04: '04', /** 道岔状态类型 - 进路锁闭 */
State05: '05', /** 道岔状态类型 - 故障锁闭 */
State06: '06', /** 道岔状态类型 - 进路延续保护 */
State07: '07', /** 道岔状态类型 - 进路延续保护解锁 */
State08: '08', /** 道岔状态类型 - ATC切除 */
State09: '09', /** 道岔状态类型 - ATS切除 */
State10: '10', /** 道岔状态类型 - 人工单锁 */
State11: '11', /** 道岔状态类型 - 逻辑锁 */
State12: '12', /** 道岔状态类型 - 人工锁+逻辑锁 */
State13: '13', /** 道岔状态类型 - 延时释放*/
State14: '14' /** 道岔状态类型 - 封锁*/
},
/** 是否故障*/
fault: {
Default: false /** 非故障*/
},
/** 是否切除*/
cutOff: {
Default: false /** 是否切除*/
}
};
deviceState[deviceType.Signal] = {
/** 进路性质类型 */
natureType: {
Default: '00', /** 无状态（缺省值）*/
State01: '01', /** 列车进路 */
State02: '02', /** 调车进路 */
State03: '03' /** 折返进路 */
},
/** 信号机状态类型 */
status: {
Default: '01', /** 关闭（缺省值）*/
State01: '01', /** 关闭 */
State02: '02', /** 开放 */
State03: '03', /** 引导 */
State04: '04', /** 封锁 */
State05: '05' /** 故障 */
},
/** 信号机状态类型 */
lightType: {
Default: '01', /** 物理点灯（缺省值）*/
State01: '01', /** 物理点灯 */
State02: '02' /** 逻辑点灯 */
},
/** 信号机延时状态类型 */
delayType: {
Default: '01', /** 未延时解锁（缺省值）*/
State01: '01', /** 未延时解锁 */
State02: '02', /** 人工闭塞延时解锁 */
State03: '03' /** 自动闭塞延时解锁 */
},
/** 信号机自动信号状态类型 */
autoType: {
Default: '01', /** 隐藏（缺省值）*/
State01: '01', /** 隐藏 */
State02: '02', /** 设置自动信号模式状态类型 */
State03: '03', /** 设置自动进路模式状态类型 */
State04: '04' /** 信号机进路自动触发模式状态类型 */
},
/** 信号机自动通过信号状态类型 */
autoAccessType: {
Default: '01', /** 不自动通过（缺省值）*/
State01: '01', /** 不自动通过 */
State02: '02' /** 自动通过 */
},
/** 信号机按钮状态类型 */
buttonState: {
Default: '01', /** 空闲（缺省值）*/
State01: '01', /** 空闲 */
State02: '02', /** 选择基本进路始端 */
State03: '03', /** 选择折返进路始端 */
State04: '04', /** 基本进路终端待选 */
State05: '05' /** 折返进路终端待选 */
},
/** 引导信号按钮状态类型 */
guideState: {
Default: '01', /** 空闲（缺省值）*/
State01: '01', /** 空闲 */
State02: '02' /** 引导 */
},
/** 道岔定位状态*/
switchLocateType: {
Default: '01', /** 定位（缺省值）*/
State01: '01', /** 定位*/
State02: '02' /** 反位*/
},
/** 信号机进路办理*/
routeSetting: {
Default: false /** 信号机进路办理*/
},
/** 是否故障*/
fault: {
Default: false /** 非故障*/
}
};
deviceState[deviceType.Station] = {
/** 是否故障*/
fault: {
Default: false /** 非故障*/
}
};
deviceState[deviceType.StationControl] = {
/** 控制模式状态 */
status: {
Default: '01', /** 中控（缺省值）*/
State01: '01', /** 中控 */
State02: '02', /** 站控 */
State03: '03' /** 紧急站控 */
},
/** 是否故障*/
fault: {
Default: false /** 非故障*/
}
};
deviceState[deviceType.StationDelayUnlock] = {
/** 延迟解锁状态*/
status: {
Default: '01', /** 关闭（默认值）*/
State01: '01', /** 关闭 */
State02: '02' /** 显示 */
},
/** 是否故障*/
fault: {
Default: false /** 非故障*/
}
};
deviceState[deviceType.StationStand] = {
/** 车站状态*/
status: {
Default: '01', /** 空闲（缺省值）*/
State01: '01', /** 空闲 */
State02: '02', /** 列车停站 */
State05: '03' /** 站台紧急关闭 */
},
/** 屏蔽门状态*/
screenDoorState: {
Default: '01', /** 关门（缺省值）*/
State01: '01', /** 正常 */
State02: '02', /** 故障 */
State03: '03' /** 切除 */
},
/** 屏蔽门开门状态*/
screenDoorOpenState: {
Default: '01', /** 关门（缺省值）*/
State01: '01', /** 关门 */
State02: '02' /** 开门 */
},
/** 扣车状态*/
holdState: {
Default: '01', /** 未设置扣车（缺省值）*/
State01: '01', /** 未设置扣车*/
State02: '02', /** 车站扣车*/
State03: '03', /** 中心扣车*/
State04: '04' /** 中心+车站扣车*/
},
/** 跳停*/
jumpStopState: {
Default: '01', /** 未设置跳停（缺省值）*/
State01: '01', /** 未设置跳停 */
State02: '02', /** 指定列车跳停 */
State03: '03' /** 全部跳停 */
},
/** 停站时间*/
parkingTime: {
Default: -1 /** 无停站时间*/
},
/** 运行等级*/
intervalRunTime: {
Default: -1 /** 无运行等级*/
},
/** 折返策略*/
reentryStrategy: {
Default: '01', /** 默认（缺省值）*/
State01: '01', /** 无折返策略 */
State02: '02', /** 无人折返 */
State03: '03', /** 自动换端 */
State04: '04' /** 默认 */
},
/** 是否故障*/
fault: {
Default: false /** 非故障*/
}
};
deviceState[deviceType.Train] = {
/** 列车类型*/
type: {
Default: '01', /** 计划车-指运行图编制出的有车组号、表号、车次号的列车（缺省值）*/
State01: '01', /** 计划车-指运行图编制出的有车组号、表号、车次号的列车*/
State02: '02', /** 头码车-指赋予了车组号和运行目的地的非计划列车*/
State03: '03' /** 人工车-指由调度员手工添加的并人工组织运行的只赋予车组号的非计划列车*/
},
/** 服务号状态类型*/
serverNoType: {
Default: '01', /** 显示服务号，白色（缺省值）*/
State01: '01', /** 显示服务号，白色 */
State02: '02', /** 显示车组号（计划车、头码车），黄色 */
State03: '03' /** 显示车组号（人工车），粉色 */
},
/** 目的地状态类型*/
destinationState: {
Default: '01', /** 准点（缺省值）*/
State01: '01', /** 准点*/
State02: '02', /** 早点*/
State03: '03', /** 严重早点*/
State04: '04', /** 晚点*/
State05: '05', /** 严重晚点*/
State06: '06', /** 头码车*/
State07: '07' /** ATP切除*/
},
/** 运行方向状态类型*/
directionType: {
Default: '01', /** 未知方向（缺省值）*/
State01: '01', /** 未知方向 */
State02: '02', /** 从左向右 */
State03: '03' /** 从右向左 */
},
/** 运行状态*/
runState: {
Default: '01', /** 停止（缺省值）*/
State01: '01', /** 停止 */
State02: '02' /** 运行 */
},
/** 运行模式*/
runMode: {
Default: '01', /** 未知模式（缺省值）*/
State01: '01', /** 未知模式 */
State02: '02', /** ATO自动驾驶模式 AM */
State03: '03', /** ATP监控下的人工驾驶模式 CM */
State04: '04', /** 限制人工驾驶模式 RM */
State05: '05' /** 非限制人工驾驶模式 RM */
},
/** 运行控制状态类型*/
runControlState: {
Default: '01', /** 正常（缺省值）*/
State01: '01', /** 正常 */
State02: '02', /** 扣车 */
State03: '03' /** 跳停 */
},
/** 车门状态 */
doorState: {
Default: '01', /** 关门（缺省值）*/
State01: '01', /** 关门 */
State02: '02', /** 开门 */
State03: '03' /** 故障 */
},
/** 通信状态类型*/
communicationState: {
Default: '01', /** 正常（缺省值）*/
State01: '01', /** 正常 */
State02: '02' /** 故障 */
},
/** 计划冲突状态*/
planConflictState: {
Default: '01', /** 无冲突（缺省值）*/
State01: '01', /** 无冲突 */
State02: '02' /** 有冲突 */
},
/** 报警状态*/
alarmState: {
Default: '01', /** 无报警（缺省值）*/
State01: '01', /** 无报警 */
State02: '02' /** 有报警 */
},
/** 是否故障*/
fault: {
Default: false /** 非故障*/
} }
}; };

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

@ -125,10 +125,10 @@ fuzhouSkin[deviceType.Section] = {
fuzhouSkin[deviceType.Signal] = { fuzhouSkin[deviceType.Signal] = {
/** 信号机宽度 */ /** 信号机宽度 */
signalR: 6.5, signalR: 7,
/** 灯柱宽度*/ /** 灯柱宽度*/
signalLampStandardWidth: 1.5, signalLampStandardWidth: 1,
/** 设备距离区段的距离*/ /** 设备距离区段的距离*/
signalDistance: 13, signalDistance: 13,
@ -149,7 +149,7 @@ fuzhouSkin[deviceType.Signal] = {
signalTextGreen: '#00FF00', signalTextGreen: '#00FF00',
/** 信号灯灯柱颜色*/ /** 信号灯灯柱颜色*/
signalLampStandardColor: '#FFFFFF', signalLampStandardColor: '#606060',
/** 信号灯灰色*/ /** 信号灯灰色*/
signalLampGrayColor: '#7F7F7F', signalLampGrayColor: '#7F7F7F',
@ -164,168 +164,150 @@ fuzhouSkin[deviceType.Signal] = {
signalLampWhiteColor: '#FFFFFF', signalLampWhiteColor: '#FFFFFF',
/** 信号灯蓝色*/ /** 信号灯蓝色*/
signalLampBlueColor: '#0000FF' signalLampBlueColor: '#0000FF',
};
fuzhouSkin[deviceType.StationStand] = {
/** 站台空闲颜色*/
stationStandSpareColor: '#74747C',
/** 列车边线颜色*/
trainSidelineColor: '#C0C0C0',
/** 站台和屏蔽门之间的距离*/
stationStandDistance: 8,
/** 站台无人折返*/
stationStandNoHumanReentryColor: '#0F16DA',
/** 站台首端字体大小*/
stationStandHeadFontSize: 10,
/** 中心扣车颜色*/
stationStandCenterDetainTrainColor: '#FFFFFF',
/** 默认字体 族类*/
textFontFormat: '宋体', //consolas
/** 默认背景 颜色*/
backgroundColor: '#000000',
/** 默认字体 大小*/
textFontSize: 8.2,
/** 停站时间字体颜色*/
stationStandTimeTextColor: '#FFFFFF',
/** 站台紧急关闭颜色*/
stationStandEmergentCloseColor: '#F61107',
/** 站台屏蔽门高度*/
statonStandSafeHeight: 1.6,
/** 屏蔽门默认颜色*/
stationStandDoorDefaultColor: '#4DD43F',
/** 站台列车停站颜色*/
stationStandStopColor: '#FEFE00',
/** 站台指定列车跳停颜色*/
stationStandDesignatedJumpStopColor: 'lightSkyBlue',
/** 站台跳停颜色*/
stationStandJumpStopColor: '#9A99FF',
/** 车站扣除文字颜色*/
stationstandDetainTrainTextColor: '#E4EF50',
/** 屏蔽门切除颜色*/
stationStandSplitDoorColor: '#F61107',
/** 站台自动换端*/
stationStandAutoChangeEndsColor: '#0BF400',
/** 默认border文字背景色*/
borderContextBackgroundColor: '#00FFFF',
/** 默认边线 颜色*/
sidelineColor: '#FFFFFF',
/** 信号灯锁闭*/
signalBlockColor: '#EF0C08'
}; };
fuzhouSkin[deviceType.TrainWindow] = { fuzhouSkin[deviceType.Switch] = {
/** 车次窗高度*/ /** 默认背景 颜色*/
trainWindowWidth: 40, backgroundColor: '#000000',
/** 车次窗高度*/ /** 默认提示背景 颜色*/
trainWindowHeight: 15, tipBackgroundColor: 'yellow',
/** 车次窗颜色*/ /** 透明填充 颜色*/
trainWindowColor: '#4DD43F', transparentColor: 'rgba(0,0,0,0)',
/** 透明填充 颜色*/ /** 默认字体 大小*/
transparentColor: 'rgba(0,0,0,0)', textFontSize: 9,
/** 默认字体 族类*/
textFontFormat: 'consolas',
/** 默认border文字背景色*/
borderContextBackgroundColor: '#00FFFF',
/** 默认border颜色*/
borderColor: '#C0C0C0',
/** 默认名称和设备的距离*/
nameDistance: 2,
/** 区段宽超出宽度*/
sectionBeyondWidth: 0,
/** 区段 宽度*/
sectionWidth: 4.4,
/** 道岔单边长度*/
switchLen: 7,
/** 道岔字体颜色*/
switchTextColor: 'lightgreen',
/** 道岔边框颜色*/
switchTextBorderColor: '#FE0000',
/** 道岔失去颜色*/
switchTextLossColor: '#C00808',
/** 道岔定位颜色*/
switchLocateTextColor: '#08C008',
/** 道岔反位颜色*/
switchInversionColor: '#C0C000',
/** 道岔单锁颜色*/
switchMonolockColor: '#FFFFFF',
/** 道岔封锁*/
switchBlockLockColor: '#E20F0A'
};
fuzhouSkin[deviceType.Station] = {
/** 默认字体 族类*/
textFontFormat: '宋体' // consolas
};
fuzhouSkin[deviceType.StationControl] = {
nameDistance: 2,
/** 默认字体颜色*/
textFontColor: '#C0C0C0',
/** 默认字体阴影颜色*/
textShadowColor: '#FFFF00',
/** 默认字体 族类*/
textFontFormat: 'consolas',
/** 控制模式灯的半径 */
stationControlmodeR: 5,
/** 控制模式之间灯之间的距离*/
stationControlDistance: 44,
/** 控制模式字体大小*/
stationControlTextSize: 12,
/** 控制模式灰色*/
stationControlGrayColor: '#74747C',
/** 控制模式绿色*/
stationControlGreenColor: '#4DD43F',
/** 控制模式红色*/
stationControlRedColor: '#EF0C08',
/** 控制模式黄色*/
stationControlYellowColor: '#E4EF50'
};
fuzhouSkin[deviceType.LcControl] = {
nameDistance: 2,
zcControlmodeR: 4,
lcControlColor: '#FFFF00',
stationControlTextSize: 10,
textFontFormat: 'consolas',
textShadowColor: '#FFFF00',
borderColor: '#fff',
transparentColor: 'rgba(0,0,0,0)',
borderContextBackgroundColor: '#00FFFF'
};
fuzhouSkin[deviceType.LimitControl] = {
nameDistance: 2,
zcControlmodeR: 4,
lcControlColor: '#FFFF00',
stationControlTextSize: 10,
textFontFormat: 'consolas',
textShadowColor: '#FFFF00',
borderColor: '#fff',
transparentColor: 'rgba(0,0,0,0)',
borderContextBackgroundColor: '#00FFFF',
limitControlColor: 4
};
fuzhouSkin[deviceType.ZcControl] = {
nameDistance: 2,
zcControlmodeR: 4,
stationControlTextSize: 10,
textFontFormat: 'consolas',
textShadowColor: '#FFFF00',
borderColor: '#fff',
transparentColor: 'rgba(0,0,0,0)',
borderContextBackgroundColor: '#00FFFF',
zcControlGrayColor: '#00FF00'
}; };
fuzhouSkin[deviceType.Train] = { fuzhouSkin[deviceType.StationCounter] = {
/** 列车长度*/ /** 默认字体 大小*/
trainWidth: 76, textFontSize: 9,
/** 列车高度*/ /** 默认字体 族类*/
trainHeight: 17, textFontFormat: 'consolas',
/** 列车字号*/ /** 计数器字体颜色*/
trainTextFontSize: 15, stationCounterTextColor: '#FFFFFF',
// 列车文字间距 /** 计数器边框颜色*/
trainTextSpaceBetween: 27, stationCounterBorderColor: '#E4EF50'
/** 列车HDSA字号*/
trainHSDATextFontSize: 8,
/** 列车信号的半径*/
trainConflictR: 3,
/** 列车信号距离车的距离*/
trainConflictDistance: 5,
/** 列车车头比车身高出的长度,上下相比车体伸出去的边框*/
trainMoreLength: 1,
/** 列车和车头之间的间距*/
trainHeadDistance: 2,
/** 列车竖杠的宽度*/
trainConntWidth: 4,
/** 列车竖杠和方向之间的间隔*/
trainPadding: 1,
/** 列车方向的宽度*/
trainArrowWidth: 6,
/** 列车和区段之间的距离*/
trainDistance: 18,
/** 列车背景*/
trainBackground: 'rgba(0,0,0,0)',
/** 列车边线颜色*/
trainSidelineColor: '#C0C0C0',
/** 列车文字颜色*/
trainTextColor: '#ffffff',
/** 列车 灰色*/
trainGrayColor: '#C0C0C0',
/** 列车 白色*/
trainWitheColor: '#FFFFFF',
/** 列车 棕色*/
trainBrownColor: '#9B4A09',
/** 列车 黄色*/
trainYellowColor: '#FFFF00',
/** 列车 绿色*/
trainGreenColor: '#00AF50',
/** 列车 蓝色*/
trainBlueColor: '#3265FF',
/** 列车 红色*/
trainRedColor: '#EF0C08',
/** 列车 橘色*/
trainOrangeColor: '#EA700D',
/** 列车 紫色*/
trainPurpleColor: 'purple',
/** 列车 粉色*/
trainPinkColor: 'pink',
}; };
/** 皮肤配置*/ /** 皮肤配置*/
const deviceSkin = { const deviceSkin = {

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

@ -1,12 +1,21 @@
const deviceType = { const deviceType = {
Link: 'Link', Link: 'Link',
Section: 'Section', Section: 'Section',
Switch: 'Switch',
Signal: 'Signal', Signal: 'Signal',
ZcControl: 'ZcControl',
LcControl: 'LcControl',
LimitControl: 'LimitControl',
ImageControl: 'ImageControl',
Station: 'Station', Station: 'Station',
StationControl: 'StationControl',
StationStand: 'StationStand', StationStand: 'StationStand',
TrainWindow:'TrainWindow', StationControl: 'StationControl',
Train:'Train', StationCounter: 'StationCounter',
StationDelayUnlock: 'StationDelayUnlock',
Train: 'Train',
TrainWindow: 'TrainWindow',
Line: 'Line',
Text: 'Text'
}; };
export default deviceType; export default deviceType;

18
src/jmap/map.js
View File

@ -73,7 +73,7 @@ class Jmap {
this.styleDict = this.loadStyle(this.skinStyle); this.styleDict = this.loadStyle(this.skinStyle);
// 解析地图数据 // 解析地图数据
this.mapDevice = parser(data, this.defaultStateDict); this.mapDevice = parser(data, this);
// 生成代理对象 // 生成代理对象
this.proxyData = new Proxy(this.mapDevice, new ProxyHandle(this.$painter)); this.proxyData = new Proxy(this.mapDevice, new ProxyHandle(this.$painter));
@ -125,6 +125,10 @@ class Jmap {
if (this.methods.optionsUpdate instanceof Function) { this.methods.optionsUpdate(); } if (this.methods.optionsUpdate instanceof Function) { this.methods.optionsUpdate(); }
} }
setLevelInvisible(list) {
this.$painter.setLevelInvisible(list);
}
render(list) { render(list) {
(list || []).forEach(elem => { (list || []).forEach(elem => {
const type = elem.type; const type = elem.type;
@ -166,6 +170,10 @@ class Jmap {
switch (type) { switch (type) {
case deviceType.Link: prop = 'linkList'; break; case deviceType.Link: prop = 'linkList'; break;
case deviceType.Sction: prop = 'sectionList'; break; case deviceType.Sction: prop = 'sectionList'; break;
case deviceType.Station: prop = 'stationList'; break;
case deviceType.StationControl: prop = 'stationControlList'; break;
case deviceType.LcControl: prop = 'LcControlList'; break;
case deviceType.LimitControl: prop = 'tempSpeedLimitList'; break;
} }
const list = this.data[prop]; const list = this.data[prop];
@ -207,6 +215,14 @@ class Jmap {
return this.mapDevice; return this.mapDevice;
} }
getDeviceByCode(code) {
return this.mapDevice[code];
}
getViewInstanceByCode(code) {
return this.$painter.getViewInstanceByCode(code);
}
refresh() { refresh() {
this.$painter.refresh(); this.$painter.refresh();
} }

26
src/jmap/painter.js
View File

@ -64,7 +64,7 @@ class Painter {
add(device) { add(device) {
const type = device._type; const type = device._type;
const code = device._code; const code = device._code;
const view = shapefactory(type, device, this.$jmap.getStyleDict()); const view = shapefactory(type, device, this.$jmap);
if (view) { if (view) {
this.$zoomHandle.transformView(view); this.$zoomHandle.transformView(view);
this.viewInstance[code] = view; this.viewInstance[code] = view;
@ -94,7 +94,7 @@ class Painter {
const code = device._code; const code = device._code;
const view = this.viewInstance[code]; const view = this.viewInstance[code];
if (view) { if (view) {
view.setState(device); view.setState(device.state);
} }
} }
@ -106,6 +106,21 @@ class Painter {
this.$zoomHandle.updateTransform(zoom); this.$zoomHandle.updateTransform(zoom);
} }
/**
* 设置图层显隐
* @param {*} code
*/
setLevelInvisible(list) {
zrUtil.each(Object.values(deviceType), type => {
const level = this.viewLevelMap[type];
if (list.includes(type)) {
level.hide();
} else {
level.show();
}
});
}
/** /**
* 视图是否存在 * 视图是否存在
* @param {*} code * @param {*} code
@ -114,6 +129,13 @@ class Painter {
return this.viewInstance[code]; return this.viewInstance[code];
} }
/**
* 获取视图实例
*/
getViewInstanceByCode(code) {
return this.viewInstance[code];
}
/** /**
* 刷新画布，将在下一个渲染帧的时候被刷新。 * 刷新画布，将在下一个渲染帧的时候被刷新。
*/ */

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

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

9
src/jmap/shape/Link.js
View File

@ -1,6 +1,5 @@
import Line from 'zrender/src/graphic/shape/Line'; import Line from 'zrender/src/graphic/shape/Line';
import Group from 'zrender/src/container/Group'; import Group from 'zrender/src/container/Group';
// import { stat } from 'fs';
class Link extends Group { class Link extends Group {
constructor({ _code, _type, zlevel, model, state }, style) { constructor({ _code, _type, zlevel, model, state }, style) {
@ -43,17 +42,9 @@ class Link extends Group {
} }
setState({ _code, _type, zlevel, model, state }) { setState({ _code, _type, zlevel, model, state }) {
switch (state.status) {
case '01': this.link.setStyle('stroke', 'green'); break;
case '02': this.link.setStyle('stroke', 'yellow'); break;
}
} }
tipBasePoint() { tipBasePoint() {
return {
x: (this.link.shape.x1 + this.link.shape.x2) / 2,
y: (this.link.shape.y1 + this.link.shape.y2) / 2
};
} }
} }

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

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

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

@ -0,0 +1,222 @@
/*
* 控制模式
*/
import Arc from 'zrender/src/graphic/shape/Arc';
import Text from 'zrender/src/graphic/Text';
import Group from 'zrender/src/container/Group';
/** 单个控制灯*/
class SingleControl extends Group {
constructor(model) {
super();
this.model = model;
this.zlevel = model.zlevel;
this._subType = model._subType;
this.z = 20;
this._create(model);
}
_create(model) {
var _subType = 'ControlSignal';
var _val = '0';
if (model.pop) {
_subType = 'ControlButton';
_val = '1';
}
this.control = new Arc({
pop: model.pop,
_subType: _subType,
_val: _val,
zlevel: this.zlevel,
z: this.z,
shape: {
cx: model.point.x,
cy: model.point.y,
r: model.style.stationControlmodeR
},
style: {
lineWidth: 0.5,
fill: model.style.stationControlGrayColor,
stroke: model.style.stationControlGrayColor
}
});
this.text = new Text({
pop: model.pop,
_subType: _subType,
zlevel: this.zlevel,
z: this.z,
position: [0, 0],
style: {
x: model.point.x,
y: model.point.y + model.style.stationControlmodeR + model.style.nameDistance,
text: model.context,
textFill: model.style.textFontColor,
textFont: model.style.textFontSize + 'px ' + model.style.textFontFormat,
textAlign: 'middle',
textVerticalAlign: 'top'
}
});
this.add(this.control);
this.add(this.text);
}
setColor(color) {
if (color) {
this.control.setStyle('fill', color);
}
}
}
/** 控制模式*/
export default class StationControl extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super();
this.selected = false;
this._code = _code;
this._type = _type;
this.zlevel = zlevel;
this.model = model;
this.state = state;
this.style = style;
this._create();
this.on('mouseout', this.mouseleave);
this.on('mouseover', this.mouseenter);
}
_create() {
const model = this.model;
this.emergencyControl = new SingleControl({
_subType: 'emergency',
style: this.style,
zlevel: this.zlevel,
point: {
x: model.position.x - this.style.stationControlDistance,
y: model.position.y
},
context: model.jjzkContent,
pop: false
});
this.centerControl = new SingleControl({
_subType: 'center',
style: this.style,
zlevel: this.zlevel,
point: {
x: model.position.x,
y: model.position.y
},
context: model.zokContent,
pop: false
});
this.substationControl = new SingleControl({
_subType: 'substation',
style: this.style,
zlevel: this.zlevel,
point: {
x: model.position.x + this.style.stationControlDistance,
y: model.position.y
},
context: model.zakContent,
pop: false
});
this.textShadow = new Text({
zlevel: this.zlevel,
z: this.z + 1,
position: [0, -4],
silent: true,
style: {
x: model.position.x,
y: model.position.y,
text: '',
textFill: this.style.textShadowColor, // 黄色
textAlign: 'middle',
textVerticalAlign: 'top',
textFont: 'bold ' + (this.style.stationControlTextSize + 1) + 'px ' + this.style.textFontFormat
}
});
this.add(this.substationControl);
this.add(this.centerControl);
this.add(this.emergencyControl);
this.add(this.textShadow);
this.setState(this.state);
this.mouseStatusRecover();
}
// 设置状态
setState(state) {
switch (state.status) {
case '00': // 无状态
this.emergencyControl.setColor(this.style.stationControlGrayColor);
this.substationControl.setColor(this.style.stationControlGrayColor);
this.centerControl.setColor(this.style.stationControlGrayColor);
break;
case '01': // 中控
this.emergencyControl.setColor(this.style.stationControlGrayColor);
this.substationControl.setColor(this.style.stationControlGrayColor);
this.centerControl.setColor(this.style.stationControlGreenColor);
break;
case '02': // 站控
this.emergencyControl.setColor(this.style.stationControlGrayColor);
this.substationControl.setColor(this.style.stationControlYellowColor);
this.centerControl.setColor(this.style.stationControlGrayColor);
break;
case '03': // 紧急站控
this.emergencyControl.setColor(this.style.stationControlRedColor);
this.substationControl.setColor(this.style.stationControlGrayColor);
this.centerControl.setColor(this.style.stationControlGrayColor);
break;
}
}
/** 按钮是否按下*/
isPop(e) {
for (var i = 0; i < this.childCount(); i++) {
var rect = this.childAt(i).getBoundingRect();
if (rect.contain(e.offsetX, e.offsetY) && this.childAt(i).pop) {
return true;
}
}
}
getShapeTipPoint() {
if (this.stationControl) {
var distance = 2;
var rect = this.stationControl.getBoundingRect();
return {
x: rect.x + rect.width / 2,
y: rect.y - distance
};
}
return null;
}
mouseStatusVisible(subType) {
switch (subType) {
case 'emergency': this.textShadow.setStyle({ text: this.model.jjzkContent }); break;
case 'center': this.textShadow.setStyle({ text: this.model.zokContent }); break;
case 'substation': this.textShadow.setStyle({ text: this.model.zakContent }); break;
}
this.textShadow.show();
}
mouseStatusRecover() {
this.textShadow.hide();
}
mouseenter(e) {
if (e.target.parent && e.target.parent._subType) {
this.mouseStatusVisible(e.target.parent._subType);
}
}
mouseleave(e) {
if (e.target._subType) {
this.mouseStatusRecover();
}
}
}

88
src/jmap/shape/StationCounter.js Normal file
View File

@ -0,0 +1,88 @@
/*
* 计数器
*/
import Polyline from 'zrender/src/graphic/shape/Polyline';
import Group from 'zrender/src/container/Group';
import Text from 'zrender/src/graphic/Text';
export default class StationCounter extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super();
this._code = _code;
this._type = _type;
this.model = model;
this.state = state;
this.style = style;
this.zlevel = zlevel;
this.z = 30;
this._create();
}
_create() {
const model = this.model;
const style = this.style;
const state = this.state;
this.counter = new Text({
zlevel: this.zlevel,
z: this.z,
position: [0, 0],
style: {
x: model.position.x,
y: model.position.y,
text: model.val,
textFill: style.stationCounterTextColor,
textAlign: 'middle',
textStrokeWidth: 1,
textFont: style.textFontSize + 'px ' + style.textFontFormat
}
});
this.rect = this.counter.getBoundingRect();
this.vPadding = 0;
this.lPadding = 2;
this.table = new Polyline({
zlevel: this.zlevel,
z: this.z,
shape: {
points: [
[this.rect.x - this.lPadding, this.rect.y - this.vPadding],
[this.rect.x + this.lPadding + this.rect.width, this.rect.y - this.vPadding],
[this.rect.x + this.lPadding + this.rect.width, this.rect.y + this.vPadding + this.rect.height],
[this.rect.x - this.lPadding, this.rect.y + this.vPadding + this.rect.height],
[this.rect.x - this.lPadding, this.rect.y - this.vPadding]]
},
style: {
stroke: style.stationCounterBorderColor
}
});
this.counterName = new Text({
zlevel: this.zlevel,
z: this.z,
position: [0, 0],
style: {
x: model.position.x,
y: model.position.y + this.rect.width + this.vPadding + style.textFontSize + style.nameDistance,
text: model.name,
textFill: style.stationCounterTextColor,
textAlign: 'middle',
textVerticalAlign: 'top',
textStrokeWidth: 1,
textFont: style.textFontSize + 'px ' + style.textFontFormat
}
});
this.add(this.counterName);
this.add(this.table);
this.add(this.counter);
this.setStatus(state);
}
setStatus(state) {
}
getShapeTipPoint() {
return null;
}
}

106
src/jmap/shape/StationDelayUnlock.js Normal file
View File

@ -0,0 +1,106 @@
/*
* 延迟解锁
*/
import Rect from 'zrender/src/graphic/shape/Rect';
import Text from 'zrender/src/graphic/Text';
import Group from 'zrender/src/container/Group';
export default class StationDelayUnlock extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super();
this._code = _code;
this._type = _type;
this.model = model;
this.state = state;
this.style = style;
this.zlevel = zlevel;
this.z = 1;
this._create();
}
_create() {
const model = this.model;
const style = this.style;
const state = this.state;
this.text = new Text({
zlevel: this.zlevel,
z: this.z + 1,
position: [0, 0],
style: {
x: model.position.x,
y: model.position.y,
text: model.deviceName + ' ',
textFill: style.stationDelayUnlockTextColor,
textStrokeWidth: 1,
textFont: model.textFont + 'px ' + style.textFontFormat,
textAlign: 'left'
}
});
const fontSize = parseInt(model.textFont.split(' ')[0]) || 30;
this.time = new Text({
zlevel: this.zlevel,
z: this.z + 1,
position: [0, 0],
style: {
x: model.position.x,
y: model.position.y + fontSize + style.stationDelayUnlockDistance,
text: model.remainTime || '',
textFill: style.stationDelayUnlockTextColor,
textStrokeWidth: 1,
textFont: model.textFont + 'px ' + style.textFontFormat,
textAlign: 'left'
}
});
this.add(this.text);
this.add(this.time);
this.lPadding = 3;
this.vPadding = 3;
this.rect = this.getBoundingRect();
if (this.rect.width < 35) this.rect.width = 35;
if (this.rect.height < 20) this.rect.height = 20;
this.table = new Rect({
zlevel: this.zlevel - 1,
z: this.z,
shape: {
x: model.position.x - this.lPadding,
y: model.position.y - this.vPadding,
width: this.rect.width + this.lPadding * 2,
height: this.rect.height + this.vPadding * 2
},
style: {
stroke: style.stationDelayUnlockBorderColor,
fill: style.backgroundColor
}
});
this.add(this.table);
this.setStatus(state);
}
/** 延时解锁关闭*/
delayClose() {
this.time.setStyle('text', '');
this.text.setStyle('text', '');
this.table.setStyle('stroke', this.style.backgroundColor);
}
/** 延时解锁计数*/
delayUnlock() {
this.table.setStyle('stroke', this.style.sidelineColor);
this.time.setStyle('text', '' + this.model.remainTime);
}
setStatus(state) {
switch (state.status) {
case '01': this.delayClose(); break; // 关闭
case '02': this.delayUnlock(); break; // 延迟解锁
}
}
getShapeTipPoint() {
return null;
}
}

606
src/jmap/shape/Switch.js Normal file
View File

@ -0,0 +1,606 @@
/*
* 道岔
*/
import Text from 'zrender/src/graphic/Text';
import Rect from 'zrender/src/graphic/shape/Rect';
import Line from 'zrender/src/graphic/shape/Line';
import Group from 'zrender/src/container/Group';
import Polygon from 'zrender/src/graphic/shape/Polygon';
import JTriangle from '../utils/JTriangle';
export default class Switch extends Group {
constructor({ _code, _type, zlevel, model, state }, style, jmap) {
super();
this._code = _code;
this._type = _type;
this.model = model;
this.state = state;
this.style = style;
this.jmap = jmap;
this.selected = false;
this.zlevel = zlevel;
this.z = 8;
this._create();
// this.on('mousedown', this.mouseclick);
// this.on('mouseout', this.mouseleave);
// this.on('mouseover', this.mouseenter);
}
_create() {
const model = this.model;
const state = this.state;
this.triangle = new JTriangle(model.intersection, model.skew);
this.createSwitch();
this.createNameText();
this.craeteSwitchBorder();
this.setState(state);
this.mouseStateRecover();
}
/** 道岔实体，不显示，响应鼠标事件*/
createSwitch() {
const model = this.model;
const style = this.style;
var halfWidth = style.sectionWidth / 2; // 一般宽度
var switchWidth = style.sectionWidth + style.sectionBeyondWidth*2 + 0.8; // 道岔宽度, 增大遮挡宽度0.8
var swPadding = style.switchLen; // 定位和反位时区段距离岔芯的距离
var directx = this.triangle.drictx;
var directy = this.triangle.dricty;
var direct = -this.triangle.drictx * this.triangle.dricty;
var coverLength = switchWidth * 1.5;
// 道岔遮挡
var line = new Line({
zlevel: this.zlevel,
z: this.z,
silent: true,
shape: {
x1: model.intersection.x - coverLength,
y1: model.intersection.y,
x2: model.intersection.x + coverLength,
y2: model.intersection.y
},
style: {
lineWidth: switchWidth,
stroke: style.backgroundColor
}
});
var skewLine = new Line({
zlevel: this.zlevel,
z: this.z,
silent: true,
shape: {
x1: model.intersection.x,
y1: model.intersection.y,
x2: model.intersection.x + directx * this.triangle.getCotRate() * coverLength,
y2: model.intersection.y + directy * coverLength
},
style: {
lineWidth: switchWidth,
stroke: style.backgroundColor
}
});
this.switchView = new Group();
this.switchView.add(line);
this.switchView.add(skewLine);
// 定位遮挡
halfWidth += 0.3;
var point1 = [model.intersection.x - directx * halfWidth, model.intersection.y + directy * halfWidth];
var point2 = [point1[0] + directx * switchWidth / this.triangle.getSinRate(), point1[1]];
var point3 = [point2[0] + directx * this.triangle.getCotRate() * swPadding, point2[1] + directy * swPadding];
var point4 = [point3[0] + direct * this.triangle.getSin(switchWidth), point3[1] - direct * this.triangle.getCos(switchWidth)];
this.locShelter = new Polygon({
zlevel: this.zlevel,
z: this.z,
shape: {
points: [
point1, point2, point3, point4
]
},
style: {
fill: style.backgroundColor
},
cursor: 'pointer',
onmouseover: () => { this.arrowText.show(); },
onmouseout: () => { this.arrowText.hide(); }
});
var lpx = Math.abs(this.triangle.getCos(1));
this.locShelter.position = [directx * lpx, -directy * 0.2];
this.locShelter.show();
// 反位遮挡
var slen = switchWidth / this.triangle.getSinRate(); // 斜切长度
var rpoint1 = [model.intersection.x + directx * halfWidth, model.intersection.y - directy * halfWidth];
var rpoint2 = [rpoint1[0] + directx * (swPadding + switchWidth * this.triangle.getCotRate()), rpoint1[1]];
var rpoint3 = [rpoint2[0], rpoint2[1] + directy * switchWidth];
var rpoint4 = [rpoint1[0] + this.triangle.getCos(slen), rpoint1[1] + this.triangle.getSin(slen)];
this.relocShelter = new Polygon({
zlevel: this.zlevel,
z: this.z,
shape: {
points: [
rpoint1, rpoint2, rpoint3, rpoint4
]
},
style: {
fill: style.backgroundColor
},
cursor: 'pointer',
onmouseover: () => { this.arrowText.show(); },
onmouseout: () => { this.arrowText.hide(); }
});
var rpx = Math.abs(this.triangle.getCos(halfWidth)) + 0.2;
this.relocShelter.position = [-directx * rpx, -directy * 0.2];
this.relocShelter.hide();
// 反位/平行四边形 遮挡
var sinX = style.sectionWidth / this.triangle.getSinRate();
var switchWidth1 = style.sectionWidth / 2;
var width1 = switchWidth1 * this.triangle.getSinRate();
var height1 = switchWidth1 * this.triangle.getCosRate();
var width2 = (height1 + switchWidth1) / this.triangle.getTanRate();
var width3 = sinX - width2 - width1;
var switchPoint1 = [model.intersection.x + directx * width3, model.intersection.y - directy * switchWidth1];
var switchPoint2 = [switchPoint1[0] - directx * (width2 + width1) - directx * width3, switchPoint1[1]];
var switchPoint3 = [model.intersection.x - directx * width3, model.intersection.y + directy * switchWidth1];
var switchPoint4 = [switchPoint1[0] + directx * (width2 + width1) - directx * width3, switchPoint3[1]];
this.reserveSection = new Polygon({
zlevel: this.zlevel,
shape: {
points: [
switchPoint1, switchPoint2, switchPoint3, switchPoint4
]
},
style: {
fill: style.sectionSpareColor
},
cursor: 'pointer',
onmouseover: () => { this.arrowText.show(); },
onmouseout: () => { this.arrowText.hide(); }
});
this.reserveSection.hide();
// 失去
// this.release = new Line({
// zlevel: this.zlevel,
// z: this.z + 2,
// shape: {
// x1: model.intersection.x - (coverLength * this.triangle.getCotRate()),
// y1: model.intersection.y,
// x2: model.intersection.x + (coverLength * this.triangle.getCotRate()),
// y2: model.intersection.y
// },
// style: {
// lineWidth: style.sectionWidth,
// stroke: style.sectionTimeReleaseColor,
// }
// });
// 释放解锁
this.releaseBackground = new Line({
zlevel: this.zlevel,
z: this.z,
shape: {
x1: model.intersection.x - (coverLength * this.triangle.getCotRate()),
y1: model.intersection.y,
x2: model.intersection.x + (coverLength * this.triangle.getCotRate()),
y2: model.intersection.y
},
style: {
lineWidth: style.sectionWidth + style.sectionBeyondWidth + 1,
stroke: style.backgroundColor
}
});
// 添加
this.add(this.switchView);
this.add(this.locShelter);
this.add(this.relocShelter);
this.add(this.reserveSection);
// this.add(this.release);
this.add(this.releaseBackground);
}
/** 创建道岔边框*/
craeteSwitchBorder() {
const sectionA = this.getSectionInstance(this.model.sectionACode);
const sectionB = this.getSectionInstance(this.model.sectionBCode);
const sectionC = this.getSectionInstance(this.model.sectionCCode);
const rect = this.getBoundingRect();
sectionA && rect.union(sectionA.getBoundingRect());
sectionB && rect.union(sectionB.getBoundingRect());
sectionC && rect.union(sectionC.getBoundingRect());
this.switchBorder = new Rect({
zlevel: this.model.zlevel,
z: this.z,
silent: true,
shape: Object.assign({ r: 4 }, rect),
style: {
lineDash: [3, 3],
stroke: this.style.borderColor,
fill: this.style.transparentColor
}
});
this.add(this.switchBorder);
}
/** 道岔名称，显示，响应鼠标事件*/
createNameText() {
const model = this.model;
const style = this.style;
// 描述文字
this.arrowText = new Text({
zlevel: this.zlevel,
z: this.z,
position: [0, 0],
style: {
x: model.intersection.x + 10,
y: model.intersection.y + 15,
text: `道岔区段名称: ${model.sectionName}`,
textFill: '#000',
textAlign: 'letf',
textFont: 10 + 'px consolas',
textPadding: 3,
textBackgroundColor: style.tipBackgroundColor
}
});
this.arrowText.hide();
this.add(this.arrowText);
// 创建道岔名称
this.nameText = new Text({
zlevel: this.zlevel,
z: this.z + 3,
style: {
x: model.namePosition.x + model.intersection.x + this.triangle.drictx * (style.sectionWidth * 3 + style.nameDistance) * this.triangle.getCotRate(),
y: model.namePosition.y + model.intersection.y + this.triangle.dricty * (style.nameDistance),
text: model.name,
textAlign: this.triangle.drictx === 1 ? 'left' : 'right',
textVerticalAlign: this.triangle.dricty === 1 ? 'top' : 'bottom',
textFont: style.textFontSize + 'px ' + style.textFontFormat,
textFill: style.switchTextLossColor
}
});
// 添加道岔名称视图
this.add(this.nameText);
// 设置道岔名称视图显隐
model.nameShow ? this.nameText.show() : this.nameText.hide();
// 创建锁闭文字框
const rect = this.nameText.getBoundingRect();
let textWidth = rect.width * 0.8;
if (this.triangle.drictx !== 1) {
rect.x += rect.width;
textWidth = -textWidth;
}
this.textRect = new Rect({
zlevel: this.zlevel,
z: this.z + 2,
silent: true,
shape: {
x: rect.x,
y: rect.y,
width: textWidth,
height: rect.height
},
style: {
lineWidth: 0,
lineDash: [3, 3],
stroke: style.switchTextBorderColor,
fill: style.transparentColor
}
});
this.add(this.textRect);
}
/** 名称动画*/
nameTextAnimation() {
this.nameText.animateStyle(true)
.when(0, { textFill: this.style.backgroundColor })
.when(1000, { textFill: this.style.switchTextLossColor })
.when(2000, { textFill: this.style.backgroundColor })
.start();
this.textRect.animateStyle(true)
.when(0, { textFill: this.style.backgroundColor })
.when(1000, { textFill: this.style.switchTextBorderColor })
.when(2000, { textFill: this.style.backgroundColor })
.start();
}
/** 设置岔芯是否隐藏*/
setSwitchCoreInvisible(invisible) {
if (invisible) {
this.switchView.hide();
} else {
this.switchView.show();
}
}
/** 设置岔芯颜色*/
setSwitchCoreColor(color) {
this.switchView.eachChild(child => {
child.setStyle({ stroke: color });
});
}
/** 设置道岔文字颜色*/
setTextColor(color) {
this.nameText.setStyle('textFill', color);
}
/** 设置道岔文字边框颜色 */
setHasTextBorder(width) {
this.textRect.setStyle('lineWidth', width);
}
/** 恢复状态*/
recover() {
this.setSwitchCoreColor(this.style.backgroundColor);
this.nameText.stopAnimation(false);
// this.release.stopAnimation(false);
this.reserveSection.stopAnimation(false);
this.switchView.eachChild((child) => {
child.stopAnimation(false);
});
// this.release.hide();
this.relocShelter.hide();
this.releaseBackground.hide();
this.setHasTextBorder(0);
switch (this.state.locateType) {
case '01': // 定位
this.setTextColor(this.style.switchLocateTextColor);
break;
case '02': // 反位
this.setTextColor(this.style.switchInversionColor);
break;
default: // 其他
this.setTextColor(this.style.switchTextLossColor);
break;
}
}
/** 定位*/
setLocationAction() {
this.recover();
this.setSwitchCoreInvisible(true);
this.locShelter.show();
this.relocShelter.hide();
this.reserveSection.hide();
}
/** 反位*/
setInversionAction() {
this.recover();
this.setSwitchCoreInvisible(true);
this.locShelter.hide();
this.relocShelter.show();
this.reserveSection.show();
}
/** 失去*/
setLossAction(nameFlicker) {
this.recover();
this.locShelter.hide();
this.relocShelter.hide();
this.reserveSection.hide();
this.setSwitchCoreInvisible(false);
nameFlicker && this.nameTextAnimation();
}
/** 挤叉*/
setForkAction() {
this.setLossAction(true);
this.switchView.eachChild((child) => {
child.animateStyle(true)
.when(0, { stroke: this.style.backgroundColor })
.when(1000, { stroke: 'red' })
.when(2000, { stroke: this.style.backgroundColor })
.start();
});
}
/** 空闲*/
spare() {
}
/** 单锁*/
setMonolock() {
this.setTextColor(this.style.switchMonolockColor);
}
/** 封锁 */
block() {
this.setHasTextBorder(1);
}
/** 延时释放*/
timeRelease() {
this.setSwitchCoreInvisible(true);
// this.release.show();
this.releaseBackground.show();
// this.release.setStyle('stroke', this.style.sectionTimeReleaseColor);
// this.release.animateStyle(true)
// .when(0, { stroke: this.style.sectionTimeReleaseColor })
// .when(1000, { stroke: this.style.backgroundColor })
// .start();
}
/** 设置道岔切除*/
setSwitchCutOff() {
this.setSwitchCoreInvisible(true);
switch (this.model.locateType) {
case '01': // 定位
// this.release.show();
this.releaseBackground.hide();
this.setSectionState(this.release, 'stroke', this.model.sectionAstatus);
// this.release.animateStyle(true)
// .when(1000, { stroke: this.style.backgroundColor })
// .start();
break;
case '02': // 反位
this.reserveSection.animateStyle(true)
.when(1000, { fill: this.style.backgroundColor })
.start();
break;
}
}
setSectionState(section, style, state) {
if (section) {
switch (state) {
case '00': break;
case '01': /** 空闲*/
section.setStyle(style, this.style.sectionSpareColor);
break;
case '02': /** 通信车占用*/
section.setStyle(style, this.style.sectionCommunicationOccupiedColor);
break;
case '03': /** 非通信车占用*/
section.setStyle(style, this.style.sectionUnCommunicationOccupiedColor);
break;
case '04': /** 进路锁闭*/
section.setStyle(style, this.style.sectionRouteLockColor);
break;
case '05': /** 故障锁闭*/
section.setStyle(style, this.style.sectionFaultLockColor);
break;
case '06': /** 封锁*/
section.setStyle(style, this.style.sectionBlockColor);
break;
case '07': /** ATC切除*/
section.setStyle(style, this.style.sectionAtcExcisionColor);
break;
case '08': /** ATS切除*/
section.setStyle(style, this.style.sectionAtsExcisionColor);
section.animateStyle(true)
.when(1000, { fill: this.style.backgroundColor })
.when(2000, { fill: this.style.sectionAtsExcisionColor })
.start();
break;
case '09': /** 进路延续保护 */
section.setStyle(style, this.style.sectionProtectiveLockColor);
break;
}
}
}
setLocateType(state) {
this.setSectionState(this.reserveSection, 'fill', this.model.sectionCstatus);
switch (state.locateType) {
case '01':
this.setLocationAction(); /** 定位*/
break;
case '02':
this.setInversionAction(); /** 反位*/
break;
case '03':
this.setLossAction(true); /** 失去*/
break;
case '04':
this.setForkAction(); /** 挤岔*/
break;
}
}
setState(state) {
this.setLocateType(state);
switch (state.status) {
case '01':
this.spare(); /** 空闲*/
break;
case '10':
this.setMonolock(); /** 单锁*/
break;
case '13':
this.timeRelease(); /** 延时释放*/
break;
case '14':
this.block(); /** 封锁*/
break;
}
/** 区段切除*/
if (state.cutOff) {
this.setSwitchCutOff();
}
}
getShapeTipPoint() {
var rect = null;
rect = this.nameText.getBoundingRect();
if (rect) {
return {
x: rect.x + rect.width / 2,
y: rect.y
};
}
return null;
}
getSectionInstance(code) {
return this.jmap.getViewInstanceByCode(code);
}
mouseStateVisible() {
const section = this.getSectionInstance(this.model.switchSectionCode);
section && section.setTrainWindowEventShow(true);
this.switchBorder.show();
this.setLossAction(false);
this.setSwitchCoreColor(this.style.borderContextBackgroundColor);
this.setTextColor(this.style.backgroundColor);
this.textRect.setStyle({
lineWidth: 1,
stroke: this.style.borderColor,
fill: this.style.borderContextBackgroundColor
});
}
mouseStateRecover() {
const section = this.getSectionInstance(this.model.switchSectionCode);
section && section.setTrainWindowEventShow(false);
this.switchBorder.hide();
this.setSwitchCoreColor(this.style.backgroundColor);
this.textRect.setStyle({
lineWidth: 0,
stroke: this.style.switchTextBorderColor,
fill: this.style.transparentColor
});
this.setState(this.model);
}
mouseclick(e) {
if ([3].includes(e.which)) {
this.selected = !this.selected;
if (this.selected) {
this.mouseStateVisible();
}
}
}
mouseenter(e) {
if (!this.selected) {
this.mouseStateVisible();
}
}
mouseleave(e) {
if (!this.selected) {
this.mouseStateRecover();
}
}
}

167
src/jmap/shape/ZcControl.js Normal file
View File

@ -0,0 +1,167 @@
/*
* ZC区域控制模式
*/
import Arc from 'zrender/src/graphic/shape/Arc';
import Rect from 'zrender/src/graphic/shape/Rect';
import Text from 'zrender/src/graphic/Text';
import Group from 'zrender/src/container/Group';
export default class ZcControl extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super({name: _code});
this.z = 20;
this._code = _code;
this._type = _type;
this.zlevel = zlevel;
this.model = model;
this.state = state;
this.style = style;
this._create(model);
console.log('zc');
this.on('mouseout', this.mouseleave);
this.on('mouseover', this.mouseenter);
}
_create(model) {
this.control = new Arc({
_subType: 'Control',
zlevel: this.zlevel,
z: this.z,
shape: {
cx: model.position.x,
cy: model.position.y,
r: this.style.zcControlmodeR
},
style: {
lineWidth: 0,
fill: this.style.zcControlGrayColor
}
});
this.text = new Text({
_subType: 'Text',
zlevel: this.zlevel,
z: this.z,
position: [0, 0],
style: {
x: model.position.x,
y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance,
text: model.name,
textFill: '#fff',
textAlign: 'middle',
textVerticalAlign: 'top',
textFont: this.style.stationControlTextSize + 'px ' + this.style.textFontFormat
}
});
if (this.model.visible) {
this.add(this.control);
this.add(this.text);
}
this.textShadow = new Text({
zlevel: this.zlevel,
z: this.z + 1,
position: [4, -4],
silent: true,
style: {
x: model.position.x,
y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance,
text: model.name,
textFill: this.style.textShadowColor, // 黄色
textAlign: 'middle',
textVerticalAlign: 'top',
textFont: 'bold ' + (this.style.stationControlTextSize + 1) + 'px ' + this.style.textFontFormat
}
});
this.controlBorder = new Rect({
zlevel: model.zlevel,
z: this.z - 1,
silent: true,
shape: this.control.getBoundingRect(),
style: {
lineDash: [3, 3],
stroke: this.style.borderColor,
fill: this.style.transparentColor
}
});
this.textBorder = new Rect({
zlevel: model.zlevel,
z: this.z - 1,
silent: true,
shape: this.text.getBoundingRect(),
style: {
lineDash: [3, 3],
stroke: this.style.borderColor,
fill: this.style.borderContextBackgroundColor
}
});
this.add(this.control);
this.add(this.text);
this.add(this.textShadow);
this.add(this.textBorder);
this.add(this.controlBorder);
this.setState(this.state);
this.mouseStatusRecover();
}
setControlColor(color) {
if (color) {
this.control.setStyle('fill', color);
}
}
// 设置状态
setState(state) {
}
getShapeTipPoint() {
if (this.control) {
var distance = 2;
var rect = this.control.getBoundingRect();
return {
x: rect.x + rect.width / 2,
y: rect.y - distance
};
}
return null;
}
mouseStatusVisible(subType) {
if (subType == 'Text') {
this.textShadow.show();
}
if (subType == 'Control') {
this.textBorder.show();
this.controlBorder.show();
this.text.setStyle({ textFill: '#000' });
this.control.setStyle({ fill: this.style.borderContextBackgroundColor });
}
}
mouseStatusRecover() {
this.textShadow.hide();
this.textBorder.hide();
this.controlBorder.hide();
this.text.setStyle({ textFill: '#fff' });
this.control.setStyle({ fill: this.style.zcControlGrayColor });
this.setState(this.state);
}
mouseenter(e) {
if (e.target._subType) {
this.mouseStatusRecover();
this.mouseStatusVisible(e.target._subType);
}
}
mouseleave(e) {
if (e.target._subType) {
this.mouseStatusRecover();
}
}
}

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

@ -2,23 +2,36 @@ import deviceType from '../config/deviceType';
import Link from './Link'; import Link from './Link';
import Section from './section'; import Section from './section';
import Signal from './Signal'; import Signal from './Signal';
import StationStand from "./StationStand"; import Station from './station';
import TrainWindow from "./TrainWindow"; import StationControl from './StationControl';
import Train from "./Train"; import ImageControl from './ImageControl';
import LcControl from './lcControl';
import LimitControl from './limitControl';
import Switch from './Switch';
import ZcControl from './ZcControl';
import StationCounter from './StationCounter';
import StationDelayUnlock from './StationDelayUnlock';
/** 图库*/ /** 图库*/
const mapShape = {}; const mapShape = {};
mapShape[deviceType.Link] = Link; mapShape[deviceType.Link] = Link;
mapShape[deviceType.Section] = Section; mapShape[deviceType.Section] = Section;
mapShape[deviceType.Signal] = Signal; mapShape[deviceType.Signal] = Signal;
mapShape[deviceType.StationStand] = StationStand; mapShape[deviceType.Station] = Station;
mapShape[deviceType.TrainWindow] = TrainWindow; mapShape[deviceType.StationControl] = StationControl;
mapShape[deviceType.Train] = Train; mapShape[deviceType.ImageControl] = ImageControl;
mapShape[deviceType.LcControl] = LcControl;
mapShape[deviceType.LimitControl] = LimitControl;
mapShape[deviceType.Switch] = Switch;
mapShape[deviceType.ZcControl] = ZcControl;
mapShape[deviceType.StationCounter] = StationCounter;
mapShape[deviceType.StationDelayUnlock] = StationDelayUnlock;
function shapefactory(type, device, style) { function shapefactory(type, device, jmap) {
const style = jmap.getStyleDict();
const shape = mapShape[type]; const shape = mapShape[type];
if (shape instanceof Function) { if (shape instanceof Function) {
return new shape(device, style[type]); return new shape(device, style[type], jmap);
} }
} }

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

@ -0,0 +1,157 @@
/*
* lC区域控制模式
*/
import Arc from 'zrender/src/graphic/shape/Arc';
import Rect from 'zrender/src/graphic/shape/Rect';
import Text from 'zrender/src/graphic/Text';
import Group from 'zrender/src/container/Group';
export default class LcControl extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super({name: _code});
this.z = 20;
this._code = _code;
this._type = _type;
this.zlevel = zlevel;
this.model = model;
this.state = state;
this.style = style;
this._create(model);
this.on('mouseout', this.mouseleave);
this.on('mouseover', this.mouseenter);
}
_create(model) {
this.control = new Arc({
_subType: 'Control',
zlevel: this.zlevel,
z: this.z,
shape: {
cx: model.position.x,
cy: model.position.y,
r: this.style.zcControlmodeR
},
style: {
lineWidth: 0,
fill: ''
}
});
this.text = new Text({
_subType: 'Text',
zlevel: this.zlevel,
z: this.z,
position: [0, 0],
style: {
x: model.position.x,
y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance,
text: model.name,
textFill: '',
textAlign: 'middle',
textVerticalAlign: 'top',
textFont: this.style.stationControlTextSize + 'px ' + this.style.textFontFormat
}
});
this.textShadow = new Text({
zlevel: this.zlevel,
z: this.z + 1,
position: [4, -2],
silent: true,
style: {
x: model.position.x,
y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance,
text: model.name,
textFill: this.style.textShadowColor, // 黄色
textAlign: 'middle',
textVerticalAlign: 'top',
textFont: 'bold ' + (this.style.stationControlTextSize + 1) + 'px ' + this.style.textFontFormat
}
});
this.controlBorder = new Rect({
zlevel: model.zlevel,
z: this.z - 1,
silent: true,
shape: this.control.getBoundingRect(),
style: {
lineDash: [3, 3],
stroke: this.style.borderColor,
fill: this.style.transparentColor
}
});
this.textBorder = new Rect({
zlevel: model.zlevel,
z: this.z - 1,
silent: true,
shape: this.text.getBoundingRect(),
style: {
lineDash: [3, 3],
stroke: this.style.borderColor,
fill: this.style.borderContextBackgroundColor
}
});
this.add(this.control);
this.add(this.text);
this.add(this.textShadow);
this.add(this.textBorder);
this.add(this.controlBorder);
this.setState(this.state);
this.mouseStatusRecover();
}
// 设置状态
setState(state) {
}
getShapeTipPoint() {
if (this.control) {
var distance = 2;
var rect = this.control.getBoundingRect();
return {
x: rect.x + rect.width / 2,
y: rect.y - distance
};
}
return null;
}
mouseStatusVisible(subType) {
if (subType == 'Text') {
this.textShadow.show();
}
if (subType == 'Control') {
this.textBorder.show();
this.controlBorder.show();
this.text.setStyle({ textFill: '#000' });
this.control.setStyle({ fill: this.style.borderContextBackgroundColor });
}
}
mouseStatusRecover() {
this.textShadow.hide();
this.textBorder.hide();
this.controlBorder.hide();
this.text.setStyle({ textFill: '#fff' });
this.control.setStyle({ fill: this.style.lcControlColor });
// this.setState(this.state);
}
mouseenter(e) {
if (e.target._subType) {
console.log(e.target, e.target._subType);
// this.mouseStatusRecover();
this.mouseStatusVisible(e.target._subType);
}
}
mouseleave(e) {
if (e.target._subType) {
this.mouseStatusRecover();
}
}
}

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

@ -0,0 +1,171 @@
/*
* 权限临时限速
*/
import Arc from 'zrender/src/graphic/shape/Arc';
import Rect from 'zrender/src/graphic/shape/Rect';
import Text from 'zrender/src/graphic/Text';
import Group from 'zrender/src/container/Group';
export default class LimitControl extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super({name: _code});
this.selected = false;
this._code = _code;
this._type = _type;
this.model = model;
this.state = state;
this.style = style;
this.zlevel = zlevel;
this.z = 20;
this._create(model);
this.on('mousedown', this.mouseclick);
this.on('mouseout', this.mouseleave);
this.on('mouseover', this.mouseenter);
}
_create(model) {
this.control = new Arc({
_subType: 'Control',
zlevel: this.zlevel,
z: this.z,
shape: {
cx: model.position.x,
cy: model.position.y,
r: this.style.zcControlmodeR
},
style: {
lineWidth: 0,
fill: ''
}
});
this.text = new Text({
_subType: 'Text',
zlevel: this.zlevel,
z: this.z,
position: [0, 0],
style: {
x: model.position.x,
y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance,
text: model.name,
textFill: '',
textAlign: 'middle',
textVerticalAlign: 'top',
textFont: this.style.stationControlTextSize + 'px ' + this.style.textFontFormat
}
});
this.textShadow = new Text({
zlevel: this.zlevel,
z: this.z + 1,
position: [4, -4],
silent: true,
style: {
x: model.position.x,
y: model.position.y + this.style.zcControlmodeR + this.style.nameDistance,
text: model.name,
textFill: this.style.textShadowColor, // 黄色
textAlign: 'middle',
textVerticalAlign: 'top',
textFont: 'bold ' + (this.style.stationControlTextSize + 1) + 'px ' + this.style.textFontFormat
}
});
this.controlBorder = new Rect({
zlevel: model.zlevel,
z: this.z - 1,
silent: true,
shape: this.control.getBoundingRect(),
style: {
lineDash: [3, 3],
stroke: this.style.borderColor,
fill: this.style.transparentColor
}
});
this.textBorder = new Rect({
zlevel: model.zlevel,
z: this.z - 1,
silent: true,
shape: this.text.getBoundingRect(),
style: {
lineDash: [3, 3],
stroke: this.style.borderColor,
fill: this.style.borderContextBackgroundColor
}
});
this.add(this.control);
this.add(this.text);
this.add(this.textShadow);
this.add(this.textBorder);
this.add(this.controlBorder);
this.setState(this.state);
this.mouseStatusRecover();
}
// 设置状态
setState(state) {
}
getShapeTipPoint() {
if (this.control) {
var distance = 2;
var rect = this.control.getBoundingRect();
return {
x: rect.x + rect.width / 2,
y: rect.y - distance
};
}
return null;
}
mouseStatusVisible(subType) {
if (subType == 'Text') {
this.textShadow.show();
}
if (subType == 'Control') {
this.textBorder.show();
this.controlBorder.show();
this.text.setStyle({ textFill: '#000' });
this.control.setStyle({ fill: this.style.borderContextBackgroundColor });
}
}
mouseStatusRecover() {
this.textShadow.hide();
this.textBorder.hide();
this.controlBorder.hide();
this.text.setStyle({ textFill: '#fff' });
this.control.setStyle({ fill: this.style.limitControlColor });
this.setState(this.state);
}
mouseclick(e) {
if ([3].includes(e.which)) {
this.selected = !this.selected;
if (this.selected) {
// this.mouseStatusRecover();
this.mouseStatusVisible('Control');
}
}
}
mouseenter(e) {
if (!this.selected && e.target._subType) {
// this.mouseStatusRecover();
this.mouseStatusVisible(e.target._subType);
}
}
mouseleave(e) {
if (e.target && e.target._subType) {
if (!this.selected && e.target._subType) {
this.mouseStatusRecover();
}
}
}
}

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

@ -6,13 +6,11 @@ import Line from 'zrender/src/graphic/shape/Line';
import BezierCurve from 'zrender/src/graphic/shape/BezierCurve'; import BezierCurve from 'zrender/src/graphic/shape/BezierCurve';
import Text from 'zrender/src/graphic/Text'; import Text from 'zrender/src/graphic/Text';
import JTriangle from '../utils/JTriangle'; import JTriangle from '../utils/JTriangle';
import deviceType from '../config/deviceType';
import store from '@/store';
/** 计轴*/ /** 计轴*/
class SectionAxle extends Group { class SectionAxle extends Group {
constructor(model) { constructor(model) {
super(); super({name: `${model.name}`});
this.model = model; this.model = model;
this.zlevel = model.zlevel; this.zlevel = model.zlevel;
this.z = 5; this.z = 5;
@ -63,7 +61,7 @@ class SectionAxle extends Group {
/** 分隔符*/ /** 分隔符*/
class SectionSeparator extends Group { class SectionSeparator extends Group {
constructor(model) { constructor(model) {
super(); super({name: `${model.name}`});
this.model = model; this.model = model;
this.zlevel = model.zlevel; this.zlevel = model.zlevel;
this.z = 6; this.z = 6;
@ -161,7 +159,7 @@ class SectionSeparator extends Group {
/** 创建区段限速限集合*/ /** 创建区段限速限集合*/
class LimitLines extends Group { class LimitLines extends Group {
constructor(model) { constructor(model) {
super(); super({name: `${model.name}`});
this.model = model; this.model = model;
this.zlevel = model.zlevel; this.zlevel = model.zlevel;
this.z = model.z; this.z = model.z;
@ -296,7 +294,7 @@ class LimitLines extends Group {
/** 创建区段线集合*/ /** 创建区段线集合*/
class Lines extends Group { class Lines extends Group {
constructor(model) { constructor(model) {
super(); super({name: `${model.name}`});
this.model = model; this.model = model;
this.zlevel = model.zlevel; this.zlevel = model.zlevel;
this.z = model.z; this.z = model.z;
@ -408,8 +406,8 @@ class Lines extends Group {
/** 区段*/ /** 区段*/
export default class Section extends Group { export default class Section extends Group {
constructor({ _code, _type, zlevel, model, state }, style) { constructor({ _code, _type, zlevel, model, state }, style, jmap) {
super(); super({name: _code});
this._code = _code; this._code = _code;
this._type = _type; this._type = _type;
this.zlevel = zlevel; this.zlevel = zlevel;
@ -418,6 +416,7 @@ export default class Section extends Group {
this.state = state; this.state = state;
this.style = style; this.style = style;
this.selected = false; this.selected = false;
this.jmap = jmap;
this._create(); this._create();
// this.on('mousedown', this.mouseclick); // this.on('mousedown', this.mouseclick);
@ -427,21 +426,22 @@ export default class Section extends Group {
_create() { _create() {
const model = this.model; const model = this.model;
const state = this.state;
// 01:物理区段；02逻辑区段；03道岔区段 // 01:物理区段；02逻辑区段；03道岔区段
this.createSectionText(); // 创建区段文字 this.createSectionText(); // 创建区段文字
if (model.type === '01' && ( if (model.type === '01' && (
model.logicSectionNum.length <= 0 || model.logicSectionNum.length <= 0 ||
model.logicSectionNum.length == 1 && model.logicSectionNum[0] == 0) || model.logicSectionNum.length == 1 && model.logicSectionNum[0] == 0) ||
model.type === '02') { model.type === '02') {
this.createSection(); // 创建区段 this.createSection(); // 创建区段
this.createSeparator(); // 创建分隔符 this.createSeparator(); // 创建分隔符
if (model.type === '01') { if (model.type === '01') {
this.createAxles(); // 创建计轴 this.createAxles(); // 创建计轴
} }
this.setState(model); this.setState(state);
} }
// this.mouseStateRecover(); this.mouseStateRecover();
} }
/** 创建区段*/ /** 创建区段*/
@ -453,6 +453,7 @@ export default class Section extends Group {
this.section = new Lines({ this.section = new Lines({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
name: `${this._code}_Lines`,
isSwitchSection: model.isSwitchSection, isSwitchSection: model.isSwitchSection,
isCurve: model.isCurve, isCurve: model.isCurve,
points: model.points, points: model.points,
@ -485,6 +486,7 @@ export default class Section extends Group {
this.speedLimitLeft = new LimitLines({ this.speedLimitLeft = new LimitLines({
zlevel: this.zlevel + 4, zlevel: this.zlevel + 4,
z: this.z, z: this.z,
name: `${this._code}_LimitLines_L`,
position: [x, -y], position: [x, -y],
isCurve: model.isCurve, isCurve: model.isCurve,
points: model.points, points: model.points,
@ -496,6 +498,7 @@ export default class Section extends Group {
this.speedLimitRight = new LimitLines({ this.speedLimitRight = new LimitLines({
zlevel: this.zlevel + 4, zlevel: this.zlevel + 4,
z: this.z, z: this.z,
name: `${this._code}_LimitLines_R`,
position: [-x, y], position: [-x, y],
isCurve: model.isCurve, isCurve: model.isCurve,
points: model.points, points: model.points,
@ -522,22 +525,22 @@ export default class Section extends Group {
/** 区段名称*/ /** 区段名称*/
if (model.nameShow) { if (model.nameShow) {
const tempx = x; let tempx = x;
const tempy = y - (style.sectionWidth + style.textFontSize + style.nameDistance); let tempy = y - (style.sectionWidth + style.textFontSize + style.nameDistance);
// 如果不是道岔区段 // 如果不是道岔区段
// if (model.type !== '03') { if (model.type !== '03') {
// // 如果逻辑区段，让名称和区段距离减少 // 如果逻辑区段，让名称和区段距离减少
// const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]); const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
// if (model.type === '02') { if (model.type === '02') {
// tempx += traingle.getSin(style.textFontSize * 0.8 + style.nameDistance); tempx += traingle.getSin(style.textFontSize * 0.8 + style.nameDistance);
// tempy += traingle.getCos(style.textFontSize * 0.8 + style.nameDistance) - style.textFontSize * 2; tempy += traingle.getCos(style.textFontSize * 0.8 + style.nameDistance) - style.textFontSize * 2;
// const parent = store.getters['map/getDeviceByCode'](model.parentCode); const parent = this.jmap.getDeviceByCode(model.parentCode);
// if (parent) { if (parent) {
// model.name = `${parent.name}-${model.name}`; model.name = `${parent.name}-${model.name}`;
// } }
// } }
// } }
// 创建区段名称 // 创建区段名称
const fontSize = style.type == '02' ? style.textFontSize + 2 : style.textFontSize; const fontSize = style.type == '02' ? style.textFontSize + 2 : style.textFontSize;
@ -696,6 +699,7 @@ export default class Section extends Group {
this.lUpAxle = new SectionAxle({ this.lUpAxle = new SectionAxle({
style: style, style: style,
zlevel: this.zlevel, zlevel: this.zlevel,
name: `${this._code}_SectionAxle_LU`,
point: { point: {
x: model.points[0].x, x: model.points[0].x,
y: model.points[0].y y: model.points[0].y
@ -707,6 +711,7 @@ export default class Section extends Group {
this.lBottomAxle = new SectionAxle({ this.lBottomAxle = new SectionAxle({
style: style, style: style,
zlevel: this.zlevel, zlevel: this.zlevel,
name: `${this._code}_SectionAxle_LB`,
point: { point: {
x: model.points[0].x, x: model.points[0].x,
y: model.points[0].y y: model.points[0].y
@ -720,6 +725,7 @@ export default class Section extends Group {
this.rUpAxle = new SectionAxle({ this.rUpAxle = new SectionAxle({
style: style, style: style,
zlevel: this.zlevel, zlevel: this.zlevel,
name: `${this._code}_SectionAxle_RU`,
point: { point: {
x: model.points[model.points.length - 1].x, x: model.points[model.points.length - 1].x,
y: model.points[model.points.length - 1].y y: model.points[model.points.length - 1].y
@ -731,6 +737,7 @@ export default class Section extends Group {
this.rBottomAxle = new SectionAxle({ this.rBottomAxle = new SectionAxle({
style: style, style: style,
zlevel: this.zlevel, zlevel: this.zlevel,
name: `${this._code}_SectionAxle_RB`,
point: { point: {
x: model.points[model.points.length - 1].x, x: model.points[model.points.length - 1].x,
y: model.points[model.points.length - 1].y y: model.points[model.points.length - 1].y
@ -758,6 +765,7 @@ export default class Section extends Group {
traingle = new JTriangle(model.points[0], model.points[1]); traingle = new JTriangle(model.points[0], model.points[1]);
this.lPartition = new SectionSeparator({ this.lPartition = new SectionSeparator({
style: style, style: style,
name: `${this._code}_SectionSeparator_L`,
borderBorderShow: model.borderBorderShow, borderBorderShow: model.borderBorderShow,
zlevel: this.zlevel - 2, zlevel: this.zlevel - 2,
traingle: traingle, traingle: traingle,
@ -772,6 +780,7 @@ export default class Section extends Group {
/** 创建右侧分隔符*/ /** 创建右侧分隔符*/
traingle = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]); traingle = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]);
this.rPartition = new SectionSeparator({ this.rPartition = new SectionSeparator({
name: `${this._code}_SectionSeparator_R`,
style: style, style: style,
borderBorderShow: model.borderBorderShow, borderBorderShow: model.borderBorderShow,
zlevel: this.zlevel - 2, zlevel: this.zlevel - 2,
@ -990,9 +999,9 @@ export default class Section extends Group {
} }
/** 设置状态*/ /** 设置状态*/
setState(model) { setState(state) {
this.recover(); this.recover();
switch (model.status) { switch (state.status) {
case '00': /** 未定义*/ case '00': /** 未定义*/
this.undefine(); this.undefine();
break; break;
@ -1040,12 +1049,12 @@ export default class Section extends Group {
} }
/** 区段切除*/ /** 区段切除*/
if (model.cutOff) { if (state.cutOff) {
this.sectionCutOff(); this.sectionCutOff();
} }
/** 是否限速*/ /** 是否限速*/
if (model.speedUpperLimit >= 0) { if (state.speedUpperLimit >= 0) {
this.setSpeedUpperLimit(); this.setSpeedUpperLimit();
} }
} }
@ -1072,13 +1081,13 @@ export default class Section extends Group {
setTrainWindowEventShow(show) { setTrainWindowEventShow(show) {
let trainWindowCode = this.model.trainWindowCode; let trainWindowCode = this.model.trainWindowCode;
if (this.model.isSwitchSection && this.model.parentCode) { if (this.model.isSwitchSection && this.model.parentCode) {
const device = store.getters['map/getDeviceByCode'](this.model.parentCode); const device = this.jmap.getDeviceByCode(this.model.parentCode);
if (device) { if (device) {
trainWindowCode = device.trainWindowCode; trainWindowCode = device.trainWindowCode;
} }
} }
const trainWindow = store.getters['map/getViewInstanceByDevice']({ _type: deviceType.TrainWindow, _code: trainWindowCode }); const trainWindow = this.jmap.getViewInstanceByCode(trainWindowCode);
if (trainWindow) { if (trainWindow) {
trainWindow.setTrainWindowEventShow(show); trainWindow.setTrainWindowEventShow(show);
} }
@ -1091,7 +1100,7 @@ export default class Section extends Group {
this.sectionTextShadow && this.sectionTextShadow.show(); this.sectionTextShadow && this.sectionTextShadow.show();
} else { } else {
// 道岔区段 // 道岔区段
const refSwitch = store.getters['map/getViewInstanceByDevice']({ _type: deviceType.Switch, _code: this.model.relSwitchCode }); const refSwitch = this.jmap.getViewInstanceByCode(this.model.relSwitchCode);
refSwitch && refSwitch.mouseStateVisible(); refSwitch && refSwitch.mouseStateVisible();
} }
} else { } else {
@ -1109,7 +1118,7 @@ export default class Section extends Group {
this.sectionTextShadow && this.sectionTextShadow.hide(); this.sectionTextShadow && this.sectionTextShadow.hide();
if (this.model.isSwitchSection) { if (this.model.isSwitchSection) {
// 道岔区段 // 道岔区段
const refSwitch = store.getters['map/getViewInstanceByDevice']({ _type: deviceType.Switch, _code: this.model.relSwitchCode }); const refSwitch = this.jmap.getViewInstanceByCode(this.model.relSwitchCode);
refSwitch && refSwitch.mouseStateRecover(); refSwitch && refSwitch.mouseStateRecover();
} else { } else {
this.section && this.section.setBorderVisible(false); this.section && this.section.setBorderVisible(false);

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

@ -0,0 +1,77 @@
/*
* 车站
*/
import Group from 'zrender/src/container/Group';
import Text from 'zrender/src/graphic/Text';
export default class Station extends Group {
constructor({ _code, _type, zlevel, model, state }, style) {
super();
this.z = 40;
this._code = _code;
this._type = _type;
this.zlevel = zlevel;
this.model = model;
this.state = state;
this.style = style;
this._create();
}
_create() {
const model = this.model;
const style = this.style;
if (model.visible) {
this.stationText = new Text({
zlevel: this.zlevel,
z: this.z,
position: [0, 0],
style: {
x: model.position.x,
y: model.position.y,
text: model.name,
textAlign: 'middle',
textVerticalAlign: 'top',
textFont: model.nameFont || '18px ' + style.textFontFormat,
textFill: model.nameFontColor
}
});
this.mileageText = new Text({
zlevel: this.zlevel,
z: this.z,
position: [0, 0],
style: {
x: model.position.x,
y: model.position.y + parseInt(model.nameFont) + 2,
text: model.kmPost,
textAlign: 'middle',
textVerticalAlign: 'top',
textFont: model.kmPostFont || '12px ' + style.textFontFormat,
textFill: model.kmPostFontColor
}
});
this.add(this.stationText);
this.add(this.mileageText);
this.setShowMileageText(model.kmPostShow);
this.setState(this.state);
}
}
/** 设置公里标是否显示*/
setShowMileageText(show) {
if (show) {
this.mileageText.show();
} else {
this.mileageText.hide();
}
}
// eslint-disable-next-line no-unused-vars
setState(state) {
}
getShapeTipPoint() {
return null;
}
}

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

@ -12,29 +12,104 @@ export function deviceFactory(type, defaultStateDict, elem) {
}, deviceRender[type]); }, deviceRender[type]);
} }
export function parser(data, defaultStateDict) { export function parser(data, jmap) {
const mapDevice = {}; const mapDevice = {};
const defaultStateDict = jmap.getDefaultStateDict();
if (data) { if (data) {
// zrUtil.each(data.linkList || [], (elem) => { zrUtil.each(data.linkList || [], elem => {
// mapDevice[elem.code] = deviceFactory(deviceType.Link, defaultStateDict, elem); mapDevice[elem.code] = deviceFactory(deviceType.Link, defaultStateDict, elem);
// }); });
console.log('data',data);
zrUtil.each(data.sectionList || [], (elem) => { zrUtil.each(data.sectionList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.Section, defaultStateDict, elem); mapDevice[elem.code] = deviceFactory(deviceType.Section, defaultStateDict, elem);
}); });
zrUtil.each(data.signalList || [], (elem) => {
zrUtil.each(data.signalList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.Signal, defaultStateDict, elem); mapDevice[elem.code] = deviceFactory(deviceType.Signal, defaultStateDict, elem);
}); });
zrUtil.each(data.stationStandList || [],(elem) => {
mapDevice[elem.code] = deviceFactory(deviceType.StationStand, defaultStateDict, elem); zrUtil.each(data.stationList || [], elem => {
}); mapDevice[elem.code] = deviceFactory(deviceType.Station, defaultStateDict, elem);
zrUtil.each(data.trainWindowList || [],(elem) => { });
mapDevice[elem.code] = deviceFactory(deviceType.TrainWindow, defaultStateDict, elem);
}); zrUtil.each(data.stationStandList || [], elem => {
zrUtil.each(data.trainList || [],(elem) => { mapDevice[elem.code] = deviceFactory(deviceType.StationStand, defaultStateDict, elem);
mapDevice[elem.code] = deviceFactory(deviceType.TrainWindow, defaultStateDict, elem); });
});
zrUtil.each(data.stationControlList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.StationControl, defaultStateDict, elem);
});
zrUtil.each(data.counterList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.StationCounter, defaultStateDict, elem);
});
zrUtil.each(data.delayShowList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.StationDelayUnlock, defaultStateDict, elem);
});
zrUtil.each(data.lineList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.Line, defaultStateDict, elem);
});
zrUtil.each(data.textList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.Text, defaultStateDict, elem);
});
zrUtil.each(data.zcList || [], elem => {
console.log(elem);
mapDevice[elem.code] = deviceFactory(deviceType.ZcControl, defaultStateDict, elem);
});
zrUtil.each(data.lcList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.LcControl, defaultStateDict, elem);
});
zrUtil.each(data.tempSpeedLimitList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.LimitControl, defaultStateDict, elem);
});
zrUtil.each(data.resourceList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.ImageControl, defaultStateDict, elem);
});
zrUtil.each(data.trainList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.Train, defaultStateDict, elem);
});
zrUtil.each(data.trainWindowList || [], elem => {
mapDevice[elem.code] = deviceFactory(deviceType.TrainWindow, defaultStateDict, elem);
});
zrUtil.each(data.switchList || [], elem => {
const cnodeSection = mapDevice[elem.sectionACode];
const lnodeSection = mapDevice[elem.sectionBCode];
const rnodeSection = mapDevice[elem.sectionCCode];
if (cnodeSection && lnodeSection && rnodeSection) {
const cnode = mapDevice[cnodeSection.model.linkCode];
if (cnode && cnode.model.leftFdCode === lnodeSection.model.linkCode && cnode.model.leftSdCode === rnodeSection.model.linkCode) {
elem.intersection = {
x: cnodeSection.model.points[0].x,
y: cnodeSection.model.points[0].y
};
elem.skew = {
x: rnodeSection.model.points[rnodeSection.model.points.length - 2].x,
y: rnodeSection.model.points[rnodeSection.model.points.length - 2].y
};
} else if (cnode && cnode.model.rightFdCode === lnodeSection.model.linkCode && cnode.model.rightSdCode === rnodeSection.model.linkCode) {
elem.intersection = {
x: cnodeSection.model.points[cnodeSection.model.points.length - 1].x,
y: cnodeSection.model.points[cnodeSection.model.points.length - 1].y
};
elem.skew = {
x: rnodeSection.model.points[1].x,
y: rnodeSection.model.points[1].y
};
}
}
mapDevice[elem.code] = deviceFactory(deviceType.Switch, defaultStateDict, elem);
});
} }
return mapDevice; return mapDevice;

2
src/views/jmap/index.vue
View File

@ -4,6 +4,7 @@
<script> <script>
import Jmaps from '@/jmap/maps'; import Jmaps from '@/jmap/maps';
import deviceType from '@/jmap/config/deviceType';
import { getPublishMapDetail } from '@/api/test.js'; import { getPublishMapDetail } from '@/api/test.js';
export default { export default {
@ -56,6 +57,7 @@ export default {
getPublishMapDetail('03').then(resp => { getPublishMapDetail('03').then(resp => {
this.jmap.loadData(resp.data); this.jmap.loadData(resp.data);
this.jmap.setDefaultState(); this.jmap.setDefaultState();
this.jmap.setLevelInvisible([deviceType.Link]);
}); });
// this.jmap.render([ // this.jmap.render([