diff --git a/src/jmapNew/config/skinCode/bejing_01.js b/src/jmapNew/config/skinCode/bejing_01.js index 540acd13f..694ba5cad 100644 --- a/src/jmapNew/config/skinCode/bejing_01.js +++ b/src/jmapNew/config/skinCode/bejing_01.js @@ -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 // 列车实时位置显示 } diff --git a/src/jmapNew/config/skinCode/chengdu_01.js b/src/jmapNew/config/skinCode/chengdu_01.js index 8de214730..bac08b050 100644 --- a/src/jmapNew/config/skinCode/chengdu_01.js +++ b/src/jmapNew/config/skinCode/chengdu_01.js @@ -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 // 列车实时位置显示 } diff --git a/src/jmapNew/config/skinCode/chengdu_03.js b/src/jmapNew/config/skinCode/chengdu_03.js index 90ed061ce..212d66665 100644 --- a/src/jmapNew/config/skinCode/chengdu_03.js +++ b/src/jmapNew/config/skinCode/chengdu_03.js @@ -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 // 列车实时位置显示 diff --git a/src/jmapNew/config/skinCode/foshan_01.js b/src/jmapNew/config/skinCode/foshan_01.js index 53a60fcf1..c5662b837 100644 --- a/src/jmapNew/config/skinCode/foshan_01.js +++ b/src/jmapNew/config/skinCode/foshan_01.js @@ -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 // 列车实时位置显示 } diff --git a/src/jmapNew/config/skinCode/fuzhou_01.js b/src/jmapNew/config/skinCode/fuzhou_01.js index 36991e5aa..fa8096d89 100644 --- a/src/jmapNew/config/skinCode/fuzhou_01.js +++ b/src/jmapNew/config/skinCode/fuzhou_01.js @@ -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 // 列车实时位置显示 } diff --git a/src/jmapNew/config/skinCode/haerbin_01.js b/src/jmapNew/config/skinCode/haerbin_01.js index d9e7eb75e..dd1447daf 100644 --- a/src/jmapNew/config/skinCode/haerbin_01.js +++ b/src/jmapNew/config/skinCode/haerbin_01.js @@ -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 // 列车实时位置显示 } diff --git a/src/jmapNew/config/skinCode/ningbo_01.js b/src/jmapNew/config/skinCode/ningbo_01.js index 99bd2a8df..a517fe1ba 100644 --- a/src/jmapNew/config/skinCode/ningbo_01.js +++ b/src/jmapNew/config/skinCode/ningbo_01.js @@ -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:{ diff --git a/src/jmapNew/config/skinCode/ningbo_03.js b/src/jmapNew/config/skinCode/ningbo_03.js index e61300691..a1a51821f 100644 --- a/src/jmapNew/config/skinCode/ningbo_03.js +++ b/src/jmapNew/config/skinCode/ningbo_03.js @@ -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:{ diff --git a/src/jmapNew/config/skinCode/xian_01.js b/src/jmapNew/config/skinCode/xian_01.js index 1bb524eb5..85c036924 100644 --- a/src/jmapNew/config/skinCode/xian_01.js +++ b/src/jmapNew/config/skinCode/xian_01.js @@ -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 // 列车实时位置显示 } diff --git a/src/jmapNew/config/skinCode/xian_02.js b/src/jmapNew/config/skinCode/xian_02.js index 5a41d7c75..4f2a48f26 100644 --- a/src/jmapNew/config/skinCode/xian_02.js +++ b/src/jmapNew/config/skinCode/xian_02.js @@ -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 // 列车实时位置显示 } diff --git a/src/jmapNew/map.js b/src/jmapNew/map.js index 2b06adb33..96e142f24 100644 --- a/src/jmapNew/map.js +++ b/src/jmapNew/map.js @@ -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 { diff --git a/src/jmapNew/mouseController.js b/src/jmapNew/mouseController.js index eb18bcbd7..07e93027a 100644 --- a/src/jmapNew/mouseController.js +++ b/src/jmapNew/mouseController.js @@ -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); } diff --git a/src/jmapNew/shape/OverAp/index.js b/src/jmapNew/shape/OverAp/index.js index 2dc3ef13b..317ef97fa 100644 --- a/src/jmapNew/shape/OverAp/index.js +++ b/src/jmapNew/shape/OverAp/index.js @@ -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', diff --git a/src/jmapNew/shape/Section/EAxle.js b/src/jmapNew/shape/Section/EAxle.js index 492efc9ec..8ee50b1b5 100644 --- a/src/jmapNew/shape/Section/EAxle.js +++ b/src/jmapNew/shape/Section/EAxle.js @@ -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() { + } } diff --git a/src/jmapNew/shape/Section/EBackArrow.js b/src/jmapNew/shape/Section/EBackArrow.js index abac1f491..43f94edb5 100644 --- a/src/jmapNew/shape/Section/EBackArrow.js +++ b/src/jmapNew/shape/Section/EBackArrow.js @@ -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 diff --git a/src/jmapNew/shape/Section/ELimitLines.js b/src/jmapNew/shape/Section/ELimitLines.js index 9db8ba1b3..681f6e749 100644 --- a/src/jmapNew/shape/Section/ELimitLines.js +++ b/src/jmapNew/shape/Section/ELimitLines.js @@ -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,185 @@ 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; } + // 上侧临时限速线 + 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(); + }); } } diff --git a/src/jmapNew/shape/Section/ELimitName.js b/src/jmapNew/shape/Section/ELimitName.js index dbdcf0494..b81f6a7b6 100644 --- a/src/jmapNew/shape/Section/ELimitName.js +++ b/src/jmapNew/shape/Section/ELimitName.js @@ -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(); + }); + } } diff --git a/src/jmapNew/shape/Section/ELines.js b/src/jmapNew/shape/Section/ELines.js index 9f64d2fb4..9f9a76431 100644 --- a/src/jmapNew/shape/Section/ELines.js +++ b/src/jmapNew/shape/Section/ELines.js @@ -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() { + } } diff --git a/src/jmapNew/shape/Section/EMouse.js b/src/jmapNew/shape/Section/EMouse.js index 0ada938ea..b3e68ecab 100644 --- a/src/jmapNew/shape/Section/EMouse.js +++ b/src/jmapNew/shape/Section/EMouse.js @@ -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 = []; diff --git a/src/jmapNew/shape/Section/ERelease.js b/src/jmapNew/shape/Section/ERelease.js deleted file mode 100644 index 98282fb77..000000000 --- a/src/jmapNew/shape/Section/ERelease.js +++ /dev/null @@ -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); - } - }); - } -} diff --git a/src/jmapNew/shape/Section/ESeparator.js b/src/jmapNew/shape/Section/ESeparator.js index 7aa299a93..f9bd91589 100644 --- a/src/jmapNew/shape/Section/ESeparator.js +++ b/src/jmapNew/shape/Section/ESeparator.js @@ -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; } } } diff --git a/src/jmapNew/shape/Section/EStopRouteImg.js b/src/jmapNew/shape/Section/EStopRouteImg.js index 3fb1d47a3..215178b2b 100644 --- a/src/jmapNew/shape/Section/EStopRouteImg.js +++ b/src/jmapNew/shape/Section/EStopRouteImg.js @@ -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() { + + } } diff --git a/src/jmapNew/shape/Section/ETextName.js b/src/jmapNew/shape/Section/ETextName.js new file mode 100644 index 000000000..6f2d5bb4d --- /dev/null +++ b/src/jmapNew/shape/Section/ETextName.js @@ -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; diff --git a/src/jmapNew/shape/Section/EblockLines.js b/src/jmapNew/shape/Section/EblockLines.js index 34d7834e2..1557a28a5 100644 --- a/src/jmapNew/shape/Section/EblockLines.js +++ b/src/jmapNew/shape/Section/EblockLines.js @@ -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() { + + } } diff --git a/src/jmapNew/shape/Section/index.js b/src/jmapNew/shape/Section/index.js index 5dbc03e9e..75508f463 100644 --- a/src/jmapNew/shape/Section/index.js +++ b/src/jmapNew/shape/Section/index.js @@ -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); diff --git a/src/jmapNew/theme/chengdu_03/menus/menuDialog/viewName.vue b/src/jmapNew/theme/chengdu_03/menus/menuDialog/viewName.vue index dc1958aff..e76393b55 100644 --- a/src/jmapNew/theme/chengdu_03/menus/menuDialog/viewName.vue +++ b/src/jmapNew/theme/chengdu_03/menus/menuDialog/viewName.vue @@ -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; } diff --git a/src/jmapNew/theme/fuzhou_01/menus/menuDialog/viewName.vue b/src/jmapNew/theme/fuzhou_01/menus/menuDialog/viewName.vue index a063d149c..a2a4092fc 100644 --- a/src/jmapNew/theme/fuzhou_01/menus/menuDialog/viewName.vue +++ b/src/jmapNew/theme/fuzhou_01/menus/menuDialog/viewName.vue @@ -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; }