Commit 80062bc44279026932dc7501dc69fcade29cd9a8
1 parent
546380c8
临港公交电子站牌项目
1、修改lggj/chart/eBusStop-line-chart组件,添加首末班车时间显示 2、修改lggj/chart/eBusStop-line-chart组件,添加无数据时的样式显示 3、修改lggj/list/eBusStop-line-chart-list组件,使用后台系统时间计算到达时间等信息 4、修改lggj/list/eBusStop-line-chart-list组件,使用后台数据计算当前站点index
Showing
5 changed files
with
221 additions
and
85 deletions
front-end/h5/src/components/core/plugins/bsth/lggj/chart/eBusStop-line-chart.js
| @@ -72,59 +72,89 @@ export default { | @@ -72,59 +72,89 @@ export default { | ||
| 72 | }, | 72 | }, |
| 73 | computed: { | 73 | computed: { |
| 74 | arriveTime1 () { | 74 | arriveTime1 () { |
| 75 | - // TODO:要使用后台返回的系统时间 | ||
| 76 | - // TODO:添加报站功能 | ||
| 77 | - let _time = this.eBusStopData.arriveTime1 | ||
| 78 | - if (_time === '') { | ||
| 79 | - return _time | 75 | + if (this.eBusStopData.routeStationDataList.length === 0) { |
| 76 | + // 内部数据为空(路由),不计算 | ||
| 77 | + return '' | ||
| 80 | } | 78 | } |
| 81 | - try { | ||
| 82 | - // 1、获取到达时间的hours,minutes | ||
| 83 | - let _hours = parseInt(_time.split(':')[0]) | ||
| 84 | - let _minutes = parseInt(_time.split(':')[1]) | ||
| 85 | - // 2、使用hours,minutes创建一个到达时间 | ||
| 86 | - let _arriveMomentTime = moment().startOf('day').add(_hours, 'hours').add(_minutes, 'minutes') | ||
| 87 | - // 3、计算到达时间和当前时间差值(分钟)返回 | ||
| 88 | - let _diffMinutes = _arriveMomentTime.diff(moment(), 'minutes') | ||
| 89 | - | ||
| 90 | - if (_diffMinutes === 1) { | ||
| 91 | - return '车辆即将到站' | ||
| 92 | - } else if (_diffMinutes === 0) { | ||
| 93 | - return '车辆进站' | ||
| 94 | - } else { | ||
| 95 | - return _diffMinutes + '分钟' | ||
| 96 | - } | ||
| 97 | - } catch (err) { | ||
| 98 | - console.log(` 转换到达时间1失败(格式必须为:HH:mm),状态:${err.status},错误:${err.statusText}`, 1) | ||
| 99 | - return _time; | 79 | + |
| 80 | + // 1、使用系统时间创建moment | ||
| 81 | + let _systemMoment = moment(this.eBusStopData.systemDateTime, moment.ISO_8601) | ||
| 82 | + if (!_systemMoment.isValid()) { | ||
| 83 | + console.log('系统日期时间[%s]格式错误,正确格式[yyyy-MM-dd HH:mm]', this.eBusStopData.systemDateTime) | ||
| 84 | + return this.eBusStopData.arriveTime1 | ||
| 85 | + } | ||
| 86 | + // 2、使用arriveTime创建moment | ||
| 87 | + let _systemDateStr = this.eBusStopData.systemDateTime.split(' ')[0] | ||
| 88 | + let _arriveTimeStr = _systemDateStr + ' ' + this.eBusStopData.arriveTime1 | ||
| 89 | + let _arriveTimeMoment = moment(_arriveTimeStr, moment.ISO_8601) | ||
| 90 | + if (!_arriveTimeMoment.isValid()) { | ||
| 91 | + console.log('到达日期时间[%s]格式错误,正确格式[yyyy-MM-dd HH:mm]', _arriveTimeStr) | ||
| 92 | + return this.eBusStopData.arriveTime1 | ||
| 100 | } | 93 | } |
| 94 | + // 3、计算到达时间和当前时间差值(分钟)返回 | ||
| 95 | + let _diffMinutes = _arriveTimeMoment.diff(_systemMoment, 'minutes') | ||
| 96 | + if (_diffMinutes === 1) { | ||
| 97 | + return '即将到站' | ||
| 98 | + } else if (_diffMinutes === 0) { | ||
| 99 | + return '进站' | ||
| 100 | + } else { | ||
| 101 | + return _diffMinutes + '分钟' | ||
| 102 | + } | ||
| 103 | + // TODO:报站功能 | ||
| 101 | }, | 104 | }, |
| 102 | arriveTime2 () { | 105 | arriveTime2 () { |
| 103 | - // TODO:要使用后台返回的系统时间 | ||
| 104 | - // TODO:添加报站功能 | ||
| 105 | - let _time = this.eBusStopData.arriveTime2 | ||
| 106 | - if (_time === '') { | ||
| 107 | - return _time | 106 | + if (this.eBusStopData.routeStationDataList.length === 0) { |
| 107 | + // 内部数据为空(路由),不计算 | ||
| 108 | + return '' | ||
| 108 | } | 109 | } |
| 109 | - try { | ||
| 110 | - // 1、获取到达时间的hours,minutes | ||
| 111 | - let _hours = parseInt(_time.split(':')[0]) | ||
| 112 | - let _minutes = parseInt(_time.split(':')[1]) | ||
| 113 | - // 2、使用hours,minutes创建一个到达时间 | ||
| 114 | - let _arriveMomentTime = moment().startOf('day').add(_hours, 'hours').add(_minutes, 'minutes') | ||
| 115 | - // 3、计算到达时间和当前时间差值(分钟)返回 | ||
| 116 | - let _diffMinutes = _arriveMomentTime.diff(moment(), 'minutes') | ||
| 117 | - | ||
| 118 | - if (_diffMinutes === 1) { | ||
| 119 | - return '车辆即将到站' | ||
| 120 | - } else if (_diffMinutes === 0) { | ||
| 121 | - return '车辆进站' | ||
| 122 | - } else { | ||
| 123 | - return _diffMinutes + '分钟' | ||
| 124 | - } | ||
| 125 | - } catch (err) { | ||
| 126 | - console.log(` 转换到达时间1失败(格式必须为:HH:mm),状态:${err.status},错误:${err.statusText}`, 1) | ||
| 127 | - return _time; | 110 | + |
| 111 | + // 1、使用系统时间创建moment | ||
| 112 | + let _systemMoment = moment(this.eBusStopData.systemDateTime, moment.ISO_8601) | ||
| 113 | + if (!_systemMoment.isValid()) { | ||
| 114 | + console.log('系统日期时间[%s]格式错误,正确格式[yyyy-MM-dd HH:mm]', this.eBusStopData.systemDateTime) | ||
| 115 | + return this.eBusStopData.arriveTime2 | ||
| 116 | + } | ||
| 117 | + // 2、使用arriveTime创建moment | ||
| 118 | + let _systemDateStr = this.eBusStopData.systemDateTime.split(' ')[0] | ||
| 119 | + let _arriveTimeStr = _systemDateStr + ' ' + this.eBusStopData.arriveTime2 | ||
| 120 | + let _arriveTimeMoment = moment(_arriveTimeStr, moment.ISO_8601) | ||
| 121 | + if (!_arriveTimeMoment.isValid()) { | ||
| 122 | + console.log('到达日期时间[%s]格式错误,正确格式[yyyy-MM-dd HH:mm]', _arriveTimeStr) | ||
| 123 | + return this.eBusStopData.arriveTime2 | ||
| 124 | + } | ||
| 125 | + // 3、计算到达时间和当前时间差值(分钟)返回 | ||
| 126 | + let _diffMinutes = _arriveTimeMoment.diff(_systemMoment, 'minutes') | ||
| 127 | + if (_diffMinutes === 1) { | ||
| 128 | + return '即将到站' | ||
| 129 | + } else if (_diffMinutes === 0) { | ||
| 130 | + return '进站' | ||
| 131 | + } else { | ||
| 132 | + return _diffMinutes + '分钟' | ||
| 133 | + } | ||
| 134 | + // TODO:报站功能 | ||
| 135 | + }, | ||
| 136 | + startTime () { | ||
| 137 | + if (this.eBusStopData.routeStationDataList.length === 0) { | ||
| 138 | + // 内部数据为空(路由),不计算 | ||
| 139 | + return '' | ||
| 140 | + } | ||
| 141 | + | ||
| 142 | + if (this.eBusStopData.startTime) { | ||
| 143 | + return '首班车:' + this.eBusStopData.startTime | ||
| 144 | + } else { | ||
| 145 | + return '' | ||
| 146 | + } | ||
| 147 | + }, | ||
| 148 | + endTime () { | ||
| 149 | + if (this.eBusStopData.routeStationDataList.length === 0) { | ||
| 150 | + // 内部数据为空(路由),不计算 | ||
| 151 | + return '' | ||
| 152 | + } | ||
| 153 | + | ||
| 154 | + if (this.eBusStopData.endTime) { | ||
| 155 | + return ' 末班车:' + this.eBusStopData.endTime | ||
| 156 | + } else { | ||
| 157 | + return '' | ||
| 128 | } | 158 | } |
| 129 | } | 159 | } |
| 130 | }, | 160 | }, |
| @@ -174,6 +204,10 @@ export default { | @@ -174,6 +204,10 @@ export default { | ||
| 174 | line_info_name_font_color: PropTypes.color({ label: '线路名称字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }), | 204 | line_info_name_font_color: PropTypes.color({ label: '线路名称字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }), |
| 175 | line_info_name_left_padding: PropTypes.number({ label: '线路名称距离左边', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }), | 205 | line_info_name_left_padding: PropTypes.number({ label: '线路名称距离左边', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }), |
| 176 | line_info_name_top_padding: PropTypes.number({ label: '线路名称距离上边', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }), | 206 | line_info_name_top_padding: PropTypes.number({ label: '线路名称距离上边', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }), |
| 207 | + line_info_s_e_time_font_size: PropTypes.number({ label: '线路首末班时间字体大小', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }), | ||
| 208 | + line_info_s_e_time_font_color: PropTypes.color({ label: '线路首末班时间字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }), | ||
| 209 | + line_info_s_e_time_right_padding: PropTypes.number({ label: '线路首末班时间距离右边', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }), | ||
| 210 | + line_info_s_e_time_top_padding: PropTypes.number({ label: '线路首末班时间距离上边', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }), | ||
| 177 | arrive_info_height: PropTypes.number({ label: '到达信息高度', defaultValue: 35, layout: { prefixCls: 'bsth-line' } }), | 211 | arrive_info_height: PropTypes.number({ label: '到达信息高度', defaultValue: 35, layout: { prefixCls: 'bsth-line' } }), |
| 178 | arrive_info_fix_text_font_size: PropTypes.number({ label: '固定文字字体大小', defaultValue: 18, layout: { prefixCls: 'bsth-line' } }), | 212 | arrive_info_fix_text_font_size: PropTypes.number({ label: '固定文字字体大小', defaultValue: 18, layout: { prefixCls: 'bsth-line' } }), |
| 179 | arrive_info_fix_text_font_color: PropTypes.color({ label: '固定文字字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }), | 213 | arrive_info_fix_text_font_color: PropTypes.color({ label: '固定文字字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }), |
| @@ -216,7 +250,11 @@ export default { | @@ -216,7 +250,11 @@ export default { | ||
| 216 | down_line_s_width: PropTypes.number({ label: '线宽度', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }), | 250 | down_line_s_width: PropTypes.number({ label: '线宽度', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }), |
| 217 | down_line_s_color: PropTypes.color({ label: '线颜色', defaultValue: '#277461', layout: { prefixCls: 'bsth-line' } }), | 251 | down_line_s_color: PropTypes.color({ label: '线颜色', defaultValue: '#277461', layout: { prefixCls: 'bsth-line' } }), |
| 218 | down_line_arrow_width: PropTypes.number({ label: '箭头宽度', defaultValue: 55, layout: { prefixCls: 'bsth-line' } }), | 252 | down_line_arrow_width: PropTypes.number({ label: '箭头宽度', defaultValue: 55, layout: { prefixCls: 'bsth-line' } }), |
| 219 | - down_line_arrow_height: PropTypes.number({ label: '箭头高度', defaultValue: 15, layout: { prefixCls: 'bsth-line' } }) | 253 | + down_line_arrow_height: PropTypes.number({ label: '箭头高度', defaultValue: 15, layout: { prefixCls: 'bsth-line' } }), |
| 254 | + _flag_7_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="无数据提示css属性" class="bsth-line-item-divider"></hr>) } }), | ||
| 255 | + empty_info_font_size: PropTypes.number({ label: '无数据提示文字字体大小', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }), | ||
| 256 | + empty_info_font_color: PropTypes.color({ label: '无数据提示文字字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }), | ||
| 257 | + empty_info_top_padding: PropTypes.number({ label: '无数据提示文字距离上边', defaultValue: 25, layout: { prefixCls: 'bsth-line' } }) | ||
| 220 | }, | 258 | }, |
| 221 | 259 | ||
| 222 | render () { | 260 | render () { |
| @@ -248,26 +286,45 @@ export default { | @@ -248,26 +286,45 @@ export default { | ||
| 248 | 'background': this.text_info_background | 286 | 'background': this.text_info_background |
| 249 | } | 287 | } |
| 250 | 288 | ||
| 251 | - const lineInfoStyle = { | 289 | + const lineInfoContainerStyle = { |
| 252 | 'border': '0px', | 290 | 'border': '0px', |
| 253 | 'margin': '0px', | 291 | 'margin': '0px', |
| 254 | 'width': this.text_info_width + 'px', | 292 | 'width': this.text_info_width + 'px', |
| 255 | 'height': this.line_info_height + 'px', | 293 | 'height': this.line_info_height + 'px', |
| 256 | 'background': this.text_info_background | 294 | 'background': this.text_info_background |
| 257 | } | 295 | } |
| 258 | - const lineInfoStyleForLineName = { | 296 | + const lineInfoStyle = { |
| 259 | 'border': '0px', | 297 | 'border': '0px', |
| 260 | 'margin': '0px', | 298 | 'margin': '0px', |
| 261 | 'width': this.text_info_width / 2 + 'px', | 299 | 'width': this.text_info_width / 2 + 'px', |
| 262 | 'height': this.line_info_height + 'px', | 300 | 'height': this.line_info_height + 'px', |
| 263 | 'background': this.text_info_background, | 301 | 'background': this.text_info_background, |
| 264 | - 'color': this.line_info_name_font_color, | ||
| 265 | - 'font-size': this.line_info_name_font_size + 'px', | ||
| 266 | - 'font-weight': 'bold', | ||
| 267 | 'text-align': 'left', | 302 | 'text-align': 'left', |
| 303 | + 'float': 'left', | ||
| 268 | 'padding-left': this.line_info_name_left_padding + 'px', | 304 | 'padding-left': this.line_info_name_left_padding + 'px', |
| 269 | 'padding-top': this.line_info_name_top_padding + 'px' | 305 | 'padding-top': this.line_info_name_top_padding + 'px' |
| 270 | } | 306 | } |
| 307 | + const lineInfoStyleForLineName = { | ||
| 308 | + 'color': this.line_info_name_font_color, | ||
| 309 | + 'font-size': this.line_info_name_font_size + 'px', | ||
| 310 | + 'font-weight': 'bold' | ||
| 311 | + } | ||
| 312 | + const lineInfoStyle2 = { | ||
| 313 | + 'border': '0px', | ||
| 314 | + 'margin': '0px', | ||
| 315 | + 'width': this.text_info_width / 2 + 'px', | ||
| 316 | + 'height': this.line_info_height + 'px', | ||
| 317 | + 'background': this.text_info_background, | ||
| 318 | + 'text-align': 'right', | ||
| 319 | + 'float': 'left', | ||
| 320 | + 'padding-top': this.line_info_s_e_time_top_padding + 'px' | ||
| 321 | + } | ||
| 322 | + const lineInfoStyle2ForStartEndTime = { | ||
| 323 | + 'padding-right': this.line_info_s_e_time_right_padding + 'px', | ||
| 324 | + 'color': this.line_info_s_e_time_font_color, | ||
| 325 | + 'font-size': this.line_info_s_e_time_font_size + 'px', | ||
| 326 | + // 'font-weight': 'bold' | ||
| 327 | + } | ||
| 271 | 328 | ||
| 272 | const arriveInfoContainerStyle = { | 329 | const arriveInfoContainerStyle = { |
| 273 | 'border': '0px', | 330 | 'border': '0px', |
| @@ -312,14 +369,32 @@ export default { | @@ -312,14 +369,32 @@ export default { | ||
| 312 | 'background-color': this.svg_background | 369 | 'background-color': this.svg_background |
| 313 | } | 370 | } |
| 314 | 371 | ||
| 372 | + const emptyInfoStyle = { | ||
| 373 | + 'height': '44px', | ||
| 374 | + 'position': 'absolute', | ||
| 375 | + 'left': '50%', | ||
| 376 | + 'transform': 'translate(-50%, 0)', | ||
| 377 | + '-webkit-transform': 'translate(-50%, 0)', | ||
| 378 | + 'color': this.empty_info_font_color, | ||
| 379 | + 'font-size': this.empty_info_font_size + 'px', | ||
| 380 | + 'padding-top': this.empty_info_top_padding + 'px', | ||
| 381 | + // 'font-family': 'Open Sans, sans-serif', | ||
| 382 | + 'font-weight': 'bold' | ||
| 383 | + } | ||
| 384 | + | ||
| 315 | /* 最外层div对应编辑器的通用样式 */ | 385 | /* 最外层div对应编辑器的通用样式 */ |
| 316 | return ( | 386 | return ( |
| 317 | <div class="eBusStop-line-chart-outer-div"> | 387 | <div class="eBusStop-line-chart-outer-div"> |
| 318 | <div style={innerDivStyle}> | 388 | <div style={innerDivStyle}> |
| 319 | <div style={textInfoStyle}> | 389 | <div style={textInfoStyle}> |
| 320 | - <div style={lineInfoStyle}> | ||
| 321 | - <div style={lineInfoStyleForLineName}>{this.eBusStopData.lineName}</div> | ||
| 322 | - <div></div> | 390 | + <div style={lineInfoContainerStyle}> |
| 391 | + <div style={lineInfoStyle}> | ||
| 392 | + <span style={lineInfoStyleForLineName}>{this.eBusStopData.lineName}</span> | ||
| 393 | + </div> | ||
| 394 | + <div style={lineInfoStyle2}> | ||
| 395 | + <span style={lineInfoStyle2ForStartEndTime}>{this.startTime}</span> | ||
| 396 | + <span style={lineInfoStyle2ForStartEndTime}>{this.endTime}</span> | ||
| 397 | + </div> | ||
| 323 | </div> | 398 | </div> |
| 324 | <div style={arriveInfoContainerStyle}> | 399 | <div style={arriveInfoContainerStyle}> |
| 325 | <div style={arriveInfoStyle}> | 400 | <div style={arriveInfoStyle}> |
| @@ -351,6 +426,10 @@ export default { | @@ -351,6 +426,10 @@ export default { | ||
| 351 | <path d={downLinePathD} style={{ 'fill': this.down_line_s_color }}></path> | 426 | <path d={downLinePathD} style={{ 'fill': this.down_line_s_color }}></path> |
| 352 | </g> | 427 | </g> |
| 353 | </svg> | 428 | </svg> |
| 429 | + { | ||
| 430 | + this.eBusStopData.routeStationDataList.length === 0 ? (<div style={emptyInfoStyle}>线路未开通,系统调试中</div>) : '' | ||
| 431 | + } | ||
| 432 | + | ||
| 354 | </div> | 433 | </div> |
| 355 | </div> | 434 | </div> |
| 356 | ) | 435 | ) |
front-end/h5/src/components/core/plugins/bsth/lggj/chart/models/eBusStopData.js
| @@ -49,12 +49,19 @@ class EBusStopData { | @@ -49,12 +49,19 @@ class EBusStopData { | ||
| 49 | * @param lineCode 线路编码 | 49 | * @param lineCode 线路编码 |
| 50 | * @param routeData 路由信息(RouteData类型) | 50 | * @param routeData 路由信息(RouteData类型) |
| 51 | * @param arriveTimes 到达时间数组(字符串类型) | 51 | * @param arriveTimes 到达时间数组(字符串类型) |
| 52 | + * @param systemDateTime 系统日期时间字符串(格式:yyyy-MM-dd HH:mm) | ||
| 53 | + * @param startTime 首班车时间字符串(格式: HH:mm) | ||
| 54 | + * @param endTime 末班车时间字符串(格式:HH:mm) | ||
| 52 | */ | 55 | */ |
| 53 | - constructor (lineName, lineCode, routeData, arriveTimes = []) { | 56 | + constructor (lineName, lineCode, routeData, arriveTimes = [], systemDateTime = '2022-01-01 10:10', |
| 57 | + startTime = '00:00', endTime = '23:59') { | ||
| 54 | this._lineName = lineName | 58 | this._lineName = lineName |
| 55 | this._lineCode = lineCode | 59 | this._lineCode = lineCode |
| 56 | this._routeData = routeData | 60 | this._routeData = routeData |
| 57 | this._arriveTimes = [...arriveTimes] | 61 | this._arriveTimes = [...arriveTimes] |
| 62 | + this._systemDateTime = systemDateTime | ||
| 63 | + this._startTime = startTime | ||
| 64 | + this._endTime = endTime | ||
| 58 | } | 65 | } |
| 59 | 66 | ||
| 60 | /** | 67 | /** |
| @@ -148,6 +155,28 @@ class EBusStopData { | @@ -148,6 +155,28 @@ class EBusStopData { | ||
| 148 | } | 155 | } |
| 149 | 156 | ||
| 150 | /** | 157 | /** |
| 158 | + * 获取后台系统时间。 | ||
| 159 | + * @return {*} | ||
| 160 | + */ | ||
| 161 | + get systemDateTime () { | ||
| 162 | + return this._systemDateTime | ||
| 163 | + } | ||
| 164 | + | ||
| 165 | + /** | ||
| 166 | + * 获取首班车时间。 | ||
| 167 | + */ | ||
| 168 | + get startTime () { | ||
| 169 | + return this._startTime | ||
| 170 | + } | ||
| 171 | + | ||
| 172 | + /** | ||
| 173 | + * 获取末班车时间。 | ||
| 174 | + */ | ||
| 175 | + get endTime () { | ||
| 176 | + return this._endTime | ||
| 177 | + } | ||
| 178 | + | ||
| 179 | + /** | ||
| 151 | * 产生测试数据。 | 180 | * 产生测试数据。 |
| 152 | */ | 181 | */ |
| 153 | static generateTestData () { | 182 | static generateTestData () { |
| @@ -162,14 +191,14 @@ class EBusStopData { | @@ -162,14 +191,14 @@ class EBusStopData { | ||
| 162 | // 2、路由信息 | 191 | // 2、路由信息 |
| 163 | let routeData = new RouteData(2, stationDataList) | 192 | let routeData = new RouteData(2, stationDataList) |
| 164 | // 3、电子站牌信息 | 193 | // 3、电子站牌信息 |
| 165 | - return new EBusStopData('线路1', '1', routeData, ['23:58', '23:59']) | 194 | + return new EBusStopData('线路1', '1', routeData, ['10:11', '10:15'], '2022-01-01 10:10') |
| 166 | } | 195 | } |
| 167 | 196 | ||
| 168 | /** | 197 | /** |
| 169 | * 产生空测试数据。 | 198 | * 产生空测试数据。 |
| 170 | */ | 199 | */ |
| 171 | static generateEmptyTestData () { | 200 | static generateEmptyTestData () { |
| 172 | - return new EBusStopData('', '', new RouteData(0, []), []) | 201 | + return new EBusStopData('', '', new RouteData(0, []), [], '2022-01-01 10:10', '', '') |
| 173 | } | 202 | } |
| 174 | } | 203 | } |
| 175 | 204 |
front-end/h5/src/components/core/plugins/bsth/lggj/list/eBusStop-line-chart-list.js
| @@ -78,6 +78,10 @@ export default { | @@ -78,6 +78,10 @@ export default { | ||
| 78 | line_info_name_font_color: PropTypes.color({ label: '线路名称字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }), | 78 | line_info_name_font_color: PropTypes.color({ label: '线路名称字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }), |
| 79 | line_info_name_left_padding: PropTypes.number({ label: '线路名称距离左边', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }), | 79 | line_info_name_left_padding: PropTypes.number({ label: '线路名称距离左边', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }), |
| 80 | line_info_name_top_padding: PropTypes.number({ label: '线路名称距离上边', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }), | 80 | line_info_name_top_padding: PropTypes.number({ label: '线路名称距离上边', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }), |
| 81 | + line_info_s_e_time_font_size: PropTypes.number({ label: '线路首末班时间字体大小', defaultValue: 18, layout: { prefixCls: 'bsth-line' } }), | ||
| 82 | + line_info_s_e_time_font_color: PropTypes.color({ label: '线路首末班时间字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }), | ||
| 83 | + line_info_s_e_time_right_padding: PropTypes.number({ label: '线路首末班时间距离右边', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }), | ||
| 84 | + line_info_s_e_time_top_padding: PropTypes.number({ label: '线路首末班时间距离上边', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }), | ||
| 81 | arrive_info_height: PropTypes.number({ label: '到达信息高度', defaultValue: 35, layout: { prefixCls: 'bsth-line' } }), | 85 | arrive_info_height: PropTypes.number({ label: '到达信息高度', defaultValue: 35, layout: { prefixCls: 'bsth-line' } }), |
| 82 | arrive_info_fix_text_font_size: PropTypes.number({ label: '固定文字字体大小', defaultValue: 18, layout: { prefixCls: 'bsth-line' } }), | 86 | arrive_info_fix_text_font_size: PropTypes.number({ label: '固定文字字体大小', defaultValue: 18, layout: { prefixCls: 'bsth-line' } }), |
| 83 | arrive_info_fix_text_font_color: PropTypes.color({ label: '固定文字字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }), | 87 | arrive_info_fix_text_font_color: PropTypes.color({ label: '固定文字字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }), |
| @@ -120,7 +124,11 @@ export default { | @@ -120,7 +124,11 @@ export default { | ||
| 120 | down_line_s_width: PropTypes.number({ label: '线宽度', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }), | 124 | down_line_s_width: PropTypes.number({ label: '线宽度', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }), |
| 121 | down_line_s_color: PropTypes.color({ label: '线颜色', defaultValue: '#277461', layout: { prefixCls: 'bsth-line' } }), | 125 | down_line_s_color: PropTypes.color({ label: '线颜色', defaultValue: '#277461', layout: { prefixCls: 'bsth-line' } }), |
| 122 | down_line_arrow_width: PropTypes.number({ label: '箭头宽度', defaultValue: 55, layout: { prefixCls: 'bsth-line' } }), | 126 | down_line_arrow_width: PropTypes.number({ label: '箭头宽度', defaultValue: 55, layout: { prefixCls: 'bsth-line' } }), |
| 123 | - down_line_arrow_height: PropTypes.number({ label: '箭头高度', defaultValue: 15, layout: { prefixCls: 'bsth-line' } }) | 127 | + down_line_arrow_height: PropTypes.number({ label: '箭头高度', defaultValue: 15, layout: { prefixCls: 'bsth-line' } }), |
| 128 | + _flag_8_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="无数据提示css属性" class="bsth-line-item-divider"></hr>) } }), | ||
| 129 | + empty_info_font_size: PropTypes.number({ label: '无数据提示文字字体大小', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }), | ||
| 130 | + empty_info_font_color: PropTypes.color({ label: '无数据提示文字字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }), | ||
| 131 | + empty_info_top_padding: PropTypes.number({ label: '无数据提示文字距离上边', defaultValue: 25, layout: { prefixCls: 'bsth-line' } }) | ||
| 124 | }, | 132 | }, |
| 125 | render () { | 133 | render () { |
| 126 | /* 最外层div对应编辑器的通用样式 */ | 134 | /* 最外层div对应编辑器的通用样式 */ |
| @@ -311,6 +319,10 @@ export default { | @@ -311,6 +319,10 @@ export default { | ||
| 311 | line_info_name_font_color={this.line_info_name_font_color} | 319 | line_info_name_font_color={this.line_info_name_font_color} |
| 312 | line_info_name_left_padding={this.line_info_name_left_padding} | 320 | line_info_name_left_padding={this.line_info_name_left_padding} |
| 313 | line_info_name_top_padding={this.line_info_name_top_padding} | 321 | line_info_name_top_padding={this.line_info_name_top_padding} |
| 322 | + line_info_s_e_time_font_size={this.line_info_s_e_time_font_size} | ||
| 323 | + line_info_s_e_time_font_color={this.line_info_s_e_time_font_color} | ||
| 324 | + line_info_s_e_time_right_padding={this.line_info_s_e_time_right_padding} | ||
| 325 | + line_info_s_e_time_top_padding={this.line_info_s_e_time_top_padding} | ||
| 314 | arrive_info_height={this.arrive_info_height} | 326 | arrive_info_height={this.arrive_info_height} |
| 315 | arrive_info_fix_text_font_size={this.arrive_info_fix_text_font_size} | 327 | arrive_info_fix_text_font_size={this.arrive_info_fix_text_font_size} |
| 316 | arrive_info_fix_text_font_color={this.arrive_info_fix_text_font_color} | 328 | arrive_info_fix_text_font_color={this.arrive_info_fix_text_font_color} |
| @@ -351,6 +363,9 @@ export default { | @@ -351,6 +363,9 @@ export default { | ||
| 351 | down_line_s_color={this.down_line_s_color} | 363 | down_line_s_color={this.down_line_s_color} |
| 352 | down_line_arrow_width={this.down_line_arrow_width} | 364 | down_line_arrow_width={this.down_line_arrow_width} |
| 353 | down_line_arrow_height={this.down_line_arrow_height} | 365 | down_line_arrow_height={this.down_line_arrow_height} |
| 366 | + empty_info_font_size={this.empty_info_font_size} | ||
| 367 | + empty_info_font_color={this.empty_info_font_color} | ||
| 368 | + empty_info_top_padding={this.empty_info_top_padding} | ||
| 354 | /> | 369 | /> |
| 355 | ) | 370 | ) |
| 356 | } | 371 | } |
front-end/h5/src/components/core/plugins/bsth/lggj/list/models/eBusStop-line-chart-list-scrollPage-innerData.js
| @@ -208,9 +208,12 @@ class EBusStopLineChartListScrollPageInnerData { | @@ -208,9 +208,12 @@ class EBusStopLineChartListScrollPageInnerData { | ||
| 208 | for (let internalData of this._innerDataItemList) { | 208 | for (let internalData of this._innerDataItemList) { |
| 209 | let key = internalData._eBusStopData.lineName + '_' + internalData._eBusStopData.lineCode | 209 | let key = internalData._eBusStopData.lineName + '_' + internalData._eBusStopData.lineCode |
| 210 | if (dataGroupByLineNameCode[key]) { | 210 | if (dataGroupByLineNameCode[key]) { |
| 211 | - // 构造到达时间数组 | ||
| 212 | - let arriveTimes = [] | ||
| 213 | let info = dataGroupByLineNameCode[key][0] | 211 | let info = dataGroupByLineNameCode[key][0] |
| 212 | + // 更新系统时间 | ||
| 213 | + let systemDateTime = (info['currDate'] || '') + ' ' + (info['currTime']) | ||
| 214 | + internalData._eBusStopData._systemDateTime = systemDateTime | ||
| 215 | + // 更新到达时间数组 | ||
| 216 | + let arriveTimes = [] | ||
| 214 | if (info['arrive'] && info['arrive'].length) { | 217 | if (info['arrive'] && info['arrive'].length) { |
| 215 | info['arrive'].map(arrive => { | 218 | info['arrive'].map(arrive => { |
| 216 | arriveTimes.push(arrive.timeFormat || '') | 219 | arriveTimes.push(arrive.timeFormat || '') |
| @@ -250,39 +253,49 @@ class EBusStopLineChartListScrollPageInnerData { | @@ -250,39 +253,49 @@ class EBusStopLineChartListScrollPageInnerData { | ||
| 250 | 253 | ||
| 251 | // 2-1、使用远端数据构造内部数据 | 254 | // 2-1、使用远端数据构造内部数据 |
| 252 | // 远程数据格式参考 http://27.115.69.123:19102/General_Interface/getArriveVO?deviceId=L55C0001 | 255 | // 远程数据格式参考 http://27.115.69.123:19102/General_Interface/getArriveVO?deviceId=L55C0001 |
| 253 | - let eBusStopDataList = [] | ||
| 254 | remoteDataList.map(info => { | 256 | remoteDataList.map(info => { |
| 255 | - let lineName = info.lineName || '' | ||
| 256 | - let lineCode = info.lineCode || '' | ||
| 257 | - let startTime = info.startTime || '' | ||
| 258 | - let endTime = info.endTime || '' | ||
| 259 | - let arriveTimes = [] | 257 | + let systemDateTime = (info['currDate'] || '') + ' ' + (info['currTime']) // 系统时间 |
| 258 | + let lineName = info['lineName'] || '' // 线路名字 | ||
| 259 | + let lineCode = info['lineCode'] || '' // 线路代码 | ||
| 260 | + let startTime = info['startTime'] || '' // 首班车时间 | ||
| 261 | + let endTime = info['endTime'] || '' // 末班车时间 | ||
| 262 | + let arriveTimes = [] // 到达时间 | ||
| 260 | if (info['arrive'] && info['arrive'].length) { | 263 | if (info['arrive'] && info['arrive'].length) { |
| 261 | info['arrive'].map(arrive => { | 264 | info['arrive'].map(arrive => { |
| 262 | - arriveTimes.push(arrive.timeFormat || '') | 265 | + arriveTimes.push(arrive['timeFormat'] || '') |
| 263 | }) | 266 | }) |
| 264 | } | 267 | } |
| 268 | + let currentStopIndex = 0 // 当前站点索引 | ||
| 265 | let stationDataList = [] | 269 | let stationDataList = [] |
| 266 | if (info['lineRoute'] && info['lineRoute'].length) { | 270 | if (info['lineRoute'] && info['lineRoute'].length) { |
| 267 | - info['lineRoute'].map(station => { | 271 | + info['lineRoute'].map((station, i) => { |
| 272 | + if (station['this'] === 'yes') { | ||
| 273 | + currentStopIndex = i; | ||
| 274 | + } | ||
| 268 | let stationData = new StationData( | 275 | let stationData = new StationData( |
| 269 | - station.stationName || '', | ||
| 270 | - station.stationCode || '', | 276 | + station['stationName'] || '', |
| 277 | + station['stationCode'] || '', | ||
| 271 | ) | 278 | ) |
| 272 | stationDataList.push(stationData) | 279 | stationDataList.push(stationData) |
| 273 | }) | 280 | }) |
| 274 | } | 281 | } |
| 275 | - // TODO:当前站点索引后面再算,目前默认0 | ||
| 276 | - let routeData = new RouteData(0, stationDataList) | ||
| 277 | - eBusStopDataList.push(new EBusStopData( | ||
| 278 | - lineName, lineCode, routeData, arriveTimes)) | ||
| 279 | - }) | ||
| 280 | - eBusStopDataList.map(stopData => { | 282 | + |
| 283 | + let routeData = new RouteData(currentStopIndex, stationDataList) | ||
| 281 | rtnData._innerDataItemList.push(new EBusStopLineChartListScrollPageInnerDataItem( | 284 | rtnData._innerDataItemList.push(new EBusStopLineChartListScrollPageInnerDataItem( |
| 282 | - 0, 0, 0, 0, 0, stopData | ||
| 283 | - )) | 285 | + 0, 0, 0, 0, 0, |
| 286 | + new EBusStopData(lineName, lineCode, routeData, arriveTimes, systemDateTime, startTime, endTime))) | ||
| 284 | }) | 287 | }) |
| 285 | - // 2.2、一共有多少页 | 288 | + |
| 289 | + // 2.2、如果不足一页,补足一页数据,用空数据补充(TODO:如果要测试分页,可以在这里添加更多的emptyTestData) | ||
| 290 | + let _size = pageSize - rtnData._innerDataItemList.length | ||
| 291 | + if (_size > 0) { | ||
| 292 | + for (let i = 0; i < _size; i++) { | ||
| 293 | + rtnData._innerDataItemList.push(new EBusStopLineChartListScrollPageInnerDataItem( | ||
| 294 | + 0, 0, 0, 0, 0, EBusStopData.generateEmptyTestData())) | ||
| 295 | + } | ||
| 296 | + } | ||
| 297 | + | ||
| 298 | + // 2.3、一共有多少页 | ||
| 286 | rtnData._pageCount = Math.ceil(rtnData._innerDataItemList.length / rtnData._pageSize) | 299 | rtnData._pageCount = Math.ceil(rtnData._innerDataItemList.length / rtnData._pageSize) |
| 287 | 300 | ||
| 288 | // 3、计算内部滚动数据对象 | 301 | // 3、计算内部滚动数据对象 |
front-end/h5/src/components/core/plugins/index.js
| @@ -324,7 +324,7 @@ export const pluginsList = [ | @@ -324,7 +324,7 @@ export const pluginsList = [ | ||
| 324 | title: '电子站牌单线路模拟图', | 324 | title: '电子站牌单线路模拟图', |
| 325 | icon: 'list', | 325 | icon: 'list', |
| 326 | component: EBusStopLineChart, | 326 | component: EBusStopLineChart, |
| 327 | - visible: true, | 327 | + visible: false, |
| 328 | name: EBusStopLineChart.name | 328 | name: EBusStopLineChart.name |
| 329 | }, | 329 | }, |
| 330 | 330 | ||
| @@ -372,7 +372,7 @@ export const pluginsList = [ | @@ -372,7 +372,7 @@ export const pluginsList = [ | ||
| 372 | title: '线路模拟图滚动列表', | 372 | title: '线路模拟图滚动列表', |
| 373 | icon: 'list', | 373 | icon: 'list', |
| 374 | component: BsthLineChartScrollList, | 374 | component: BsthLineChartScrollList, |
| 375 | - visible: true, | 375 | + visible: false, |
| 376 | name: BsthLineChartScrollList.name | 376 | name: BsthLineChartScrollList.name |
| 377 | }, | 377 | }, |
| 378 | 378 | ||
| @@ -397,7 +397,7 @@ export const pluginsList = [ | @@ -397,7 +397,7 @@ export const pluginsList = [ | ||
| 397 | title: '实时天气', | 397 | title: '实时天气', |
| 398 | icon: 'photo', | 398 | icon: 'photo', |
| 399 | component: BsthWeatherRealtime, | 399 | component: BsthWeatherRealtime, |
| 400 | - visible: true, | 400 | + visible: false, |
| 401 | name: BsthWeatherRealtime.name | 401 | name: BsthWeatherRealtime.name |
| 402 | // disabled: true | 402 | // disabled: true |
| 403 | }, | 403 | }, |