徐烜 / bsth-ebus-h5_editor · Commits

Commit cf7054870d72fcc16a74e98a018c86044d43e3a9

Authored by 徐烜
1 parent e11ed9fe

其他公交公司用的公交电子站牌页面组件 

1、修改othergj-eBusStop-line-chart组件，添加gps车辆显示
2、修改othergj-eBusStop-line-chart-list组件，添加获取gps车辆数据逻辑
Inline Side-by-side
Showing 5 changed files with 364 additions and 29 deletions
front-end/h5/src/components/core/plugins/bsth/othergj/linechart/chart/models/eBusStopData.js
  View file @cf70548
... ... @@ -39,6 +39,11 @@ class RouteData {
39 39 get dataList () {
40 40 return this._stationDataList
41 41 }
  42 +
  43 + get lastStationName () {
  44 + let length = this._stationDataList.length
  45 + return length > 0 ? this._stationDataList[length - 1] : ''
  46 + }
42 47 }
43 48  
44 49 // 电子站牌信息
... ...
front-end/h5/src/components/core/plugins/bsth/othergj/linechart/chart/models/eBusStopGpsData.js 0 → 100644
  View file @cf70548
  1 +import { EBusStopData, RouteData } from './eBusStopData'
  2 +
  3 +/**
  4 + * 公交线路模拟图组件用数据。
  5 + */
  6 +
  7 +// gps数据
  8 +class GpsData {
  9 + /**
  10 + * 构造函数。
  11 + * @param stopCode 当前车辆对应的站点编码
  12 + * @param nbbm 当前车辆内部编码（自编号/车牌号）
  13 + * @param state 当前车辆对应状态，1：进站 0：出站
  14 + */
  15 + constructor (stopCode, nbbm, state) {
  16 + this._stopCode = stopCode
  17 + this._nbbm = nbbm
  18 + this._state = state
  19 + }
  20 +
  21 + get d3DataKey () { // d3绘制绑定数据用的key
  22 + return this._stopCode + '_' + this._nbbm
  23 + }
  24 +
  25 + get busText () { // 获取车辆文本显示
  26 + if (this._nbbm.indexOf('苏') >= 0) {
  27 + return getCphShortText.call(this)
  28 + } else {
  29 + return getZbhShortText.call(this)
  30 + }
  31 + }
  32 +
  33 + get stopCode () { return this._stopCode }
  34 + get state () { return this._state }
  35 +}
  36 +
  37 +function getZbhShortText() { // 获取自编号短文本
  38 + let self = this
  39 + let nbbm = self._nbbm
  40 + if (nbbm) {
  41 + let nbbmLength = nbbm.length
  42 + if (nbbmLength > 3) {
  43 + let nbbmText = nbbm.substr(nbbmLength - 3)
  44 + if (nbbm.indexOf('-') > 0) {
  45 + return nbbm.substr(nbbm.indexOf('-') - 1, 1) + nbbmText
  46 + } else {
  47 + return nbbmText
  48 + }
  49 + } else {
  50 + return nbbm
  51 + }
  52 + } else {
  53 + return nbbm
  54 + }
  55 +}
  56 +
  57 +function getCphShortText() { // 获取车牌号短文本
  58 + let self = this
  59 + let nbbm = self._nbbm
  60 + if (nbbm.indexOf('沪') !== -1) {
  61 + let startIndex = nbbm.indexOf('沪')
  62 + if (startIndex + 5 > nbbm.length) { // 沪后面至少还有5个字符
  63 + return nbbm.substr(0, 3)
  64 + } else {
  65 + let code1 = nbbm.substr(startIndex + 1, 1)
  66 + let code2 = nbbm.substr(startIndex + 2, 1)
  67 + if (code2 === '-') {
  68 + return code1 + nbbm.substr(startIndex + 3, 3)
  69 + } else {
  70 + return code1 + nbbm.substr(startIndex + 2, 3)
  71 + }
  72 + }
  73 + } else {
  74 + return nbbm.substr(0, 3)
  75 + }
  76 +}
  77 +
  78 +// 电子站牌车辆报站信息
  79 +class EBusStopGpsData {
  80 + /**
  81 + * 构造函数。
  82 + * @param lineName 线路名称
  83 + * @param lineCode 线路编码
  84 + * @param endStopName 终点站站名
  85 + * @param startTime 首班车时间
  86 + * @param endTime 末班车时间
  87 + * @param arrivalInfo 到站信息（如：2站，等待发车，即将进站）
  88 + * @param gpsDataList gps数据列表
  89 + */
  90 + constructor (lineName, lineCode, endStopName,
  91 + startTime = '00:00', endTime = '23:59',
  92 + arrivalInfo = '等待发车', gpsDataList = [] ) {
  93 + this._lineName = lineName
  94 + this._lineCode = lineCode
  95 + this._endStopName = endStopName
  96 + this._startTime = startTime
  97 + this._endTime = endTime
  98 + this._arrivalInfo = arrivalInfo
  99 + this._gpsDataList = [...gpsDataList]
  100 + }
  101 +
  102 + get lineName () { return this._lineName }
  103 + get lineCode () { return this._lineCode }
  104 + get endStopName () { return this._endStopName }
  105 + get startTime () { return this._startTime }
  106 + get endTime () { return this._endTime }
  107 + get arrivalInfo () { return this._arrivalInfo }
  108 + get gpsDataList () { return this._gpsDataList }
  109 +
  110 + /**
  111 + * 产生测试数据。
  112 + */
  113 + static generateTestData () {
  114 + // 1、创建gps数据
  115 + let gps1 = new GpsData('1', '苏J07622D', '1')
  116 + let gps2 = new GpsData('3', '苏J07612D', '0')
  117 + let gps3 = new GpsData('4', '苏J07613D', '1')
  118 + let gps4 = new GpsData('4', '苏J07614D', '1')
  119 + let gps5 = new GpsData('5', '苏J07615D', '0')
  120 + let gps6 = new GpsData('5', '苏J07616D', '0')
  121 + let gps7 = new GpsData('6', '苏J07617D', '1')
  122 + let gpsDataList = [gps1, gps2, gps3, gps4, gps5, gps6, gps7]
  123 + // 2、发车信息
  124 + return new EBusStopGpsData(
  125 + '线路1', '1', '站点6',
  126 + '6:00', '23:00',
  127 + '2站', gpsDataList)
  128 +
  129 + }
  130 +
  131 + /**
  132 + * 产生空测试数据。
  133 + */
  134 + static generateTestData_null () {
  135 + return new EBusStopGpsData('', '', '')
  136 + }
  137 +
  138 + // TODO：
  139 +}
  140 +
  141 +export {
  142 + EBusStopGpsData,
  143 + GpsData
  144 +}
... ...
front-end/h5/src/components/core/plugins/bsth/othergj/linechart/chart/othergj-eBusStop-line-chart.js
  View file @cf70548
... ... @@ -5,6 +5,7 @@ import PropTypes from '@luban-h5/plugin-common-props'
5 5  
6 6 import Utils from 'core/plugins/bsth/bsth-utils'
7 7 import { EBusStopData } from 'core/plugins/bsth/othergj/linechart/chart/models/eBusStopData'
  8 +import { EBusStopGpsData } from 'core/plugins/bsth/othergj/linechart/chart/models/eBusStopGpsData'
8 9  
9 10 import './css/othergj-eBusStop-line-chart.css'
10 11  
... ... @@ -73,7 +74,8 @@ export default {
73 74 down_line_x5: 0,
74 75 down_line_y5: 0,
75 76  
76   - eBusStopData: null // 电子站牌数据（EBusStopData类型）
  77 + eBusStopData: null, // 电子站牌数据（EBusStopData类型）
  78 + eBusStopGpsData: null // 电子站牌报站数据（EBusStopGpsData类型）
77 79 }
78 80 },
79 81 computed: {
... ... @@ -106,6 +108,12 @@ export default {
106 108 return null
107 109 }
108 110 },
  111 + eBusStopGpsData_child: { // 作为子组件，父对象传值
  112 + type: EBusStopGpsData,
  113 + default: function () {
  114 + return null
  115 + }
  116 + },
109 117  
110 118 // 数据属性
111 119 _flag_1_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="数据属性" class="bsth-line-item-divider"></hr>) } }),
... ... @@ -149,7 +157,9 @@ export default {
149 157 _flag_7_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="无数据提示css属性" class="bsth-line-item-divider"></hr>) } }),
150 158 empty_info_font_size: PropTypes.number({ label: '无数据提示文字字体大小', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
151 159 empty_info_font_color: PropTypes.color({ label: '无数据提示文字字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
152   - empty_info_top_padding: PropTypes.number({ label: '无数据提示文字距离上边', defaultValue: 25, layout: { prefixCls: 'bsth-line' } })
  160 + empty_info_top_padding: PropTypes.number({ label: '无数据提示文字距离上边', defaultValue: 25, layout: { prefixCls: 'bsth-line' } }),
  161 + _flag_8_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="车辆gps报站数据css属性" class="bsth-line-item-divider"></hr>) } }),
  162 + chart_gps_rect_color: PropTypes.color({ label: 'gps车辆rect背景色', defaultValue: '#3e50b3', layout: { prefixCls: 'bsth-line' } }),
153 163 },
154 164  
155 165 render () {
... ... @@ -199,9 +209,9 @@ export default {
199 209 <svg class="othergj-eBusStop-line-chart"
200 210 data-code={this.eBusStopData.lineCode}
201 211 style={svgStyle}>
202   - <g class="line-wrap">
203   -
204   - </g>
  212 + <g class="line-wrap"></g>
  213 + <g class="gps-wrap"></g>
  214 + <g class="marker-cluster"></g>
205 215 <g class="arrow-wrap">
206 216 <path d={downLinePathD} style={{ 'fill': this.down_line_s_color }}></path>
207 217 </g>
... ... @@ -218,8 +228,10 @@ export default {
218 228 // 设置数据
219 229 if (this.useMode === 'alone') { // 单独使用，使用测试数据
220 230 this.eBusStopData = EBusStopData.generateTestData()
  231 + this.eBusStopGpsData = EBusStopGpsData.generateTestData()
221 232 } else { // 自组件使用，使用父组件传值
222 233 this.eBusStopData = this.eBusStopData_child
  234 + this.eBusStopGpsData = this.eBusStopGpsData_child
223 235 }
224 236 },
225 237 mounted () {
... ... @@ -251,6 +263,8 @@ export default {
251 263 this.refreshLineSvg()
252 264 // 刷新下部分线svg
253 265 this.refreshDownLineSvg()
  266 + // 刷新gps svg
  267 + this.refreshLineSvg_gps()
254 268  
255 269 // svg文本滚动监控开启
256 270 if (this.editorMode === 'preview') {
... ... @@ -327,9 +341,17 @@ export default {
327 341 }
328 342 },
329 343 eBusStopData_child: function (val) {
  344 + // console.log('eBusStopData_child')
330 345 let self = this
331 346 if (self.useMode === 'child') {
332   - self.eBusStopData_child = val
  347 + self.eBusStopData = val
  348 + }
  349 + },
  350 + eBusStopGpsData_child: function (val) {
  351 + // console.log('eBusStopGpsData_child')
  352 + let self = this
  353 + if (self.useMode === 'child') {
  354 + self.eBusStopGpsData = val
333 355 }
334 356 },
335 357 // ----------- 数据属性 ----------- //
... ... @@ -339,6 +361,14 @@ export default {
339 361 self.refreshLineSvg()
340 362 }
341 363 },
  364 + eBusStopGpsData: {
  365 + handler () {
  366 + let self = this
  367 + console.log('refreshLineSvg_gps')
  368 + self.refreshLineSvg_gps()
  369 + },
  370 + deep: true
  371 + },
342 372 // ------------ 本身宽高 ----------- //
343 373 component_width () {
344 374 this.svg_width = this.component_width - this.border_size * 2
... ... @@ -350,10 +380,12 @@ export default {
350 380 svg_width () {
351 381 this.refreshLineSvg()
352 382 this.refreshDownLineSvg()
  383 + this.refreshLineSvg_gps()
353 384 },
354 385 svg_height () {
355 386 this.refreshLineSvg()
356 387 this.refreshDownLineSvg()
  388 + this.refreshLineSvg_gps()
357 389 },
358 390 // ----------- 图外层css 监控 ----------- //
359 391 margin_left () {
... ... @@ -382,12 +414,18 @@ export default {
382 414 // ----------- _flag_5_属性 -------------//
383 415 chart_left_padding: function () {
384 416 this.refreshLineSvg()
  417 + this.refreshDownLineSvg()
  418 + this.refreshLineSvg_gps()
385 419 },
386 420 chart_right_padding: function () {
387 421 this.refreshLineSvg()
  422 + this.refreshDownLineSvg()
  423 + this.refreshLineSvg_gps()
388 424 },
389 425 chart_top_padding: function () {
390 426 this.refreshLineSvg()
  427 + this.refreshDownLineSvg()
  428 + this.refreshLineSvg_gps()
391 429 },
392 430 chart_up_line_path_s_width: function (val) {
393 431 let svg = this.private_svg
... ... @@ -421,24 +459,32 @@ export default {
421 459 },
422 460 chart_station_text_top_padding: function (val) {
423 461 this.refreshLineSvg()
  462 + this.refreshDownLineSvg()
  463 + this.refreshLineSvg_gps()
424 464 },
425 465 chart_station_text_font_size_current: function (val) {
426 466 let svg = this.private_svg
427 467 svg.selectAll('g.item text.station_text.up.current')
428 468 .style('font-size', val)
429 469 this.refreshLineSvg()
  470 + this.refreshDownLineSvg()
  471 + this.refreshLineSvg_gps()
430 472 },
431 473 chart_station_text_font_size_before: function (val) {
432 474 let svg = this.private_svg
433 475 svg.selectAll('g.item text.station_text.up.before')
434 476 .style('font-size', val)
435 477 this.refreshLineSvg()
  478 + this.refreshDownLineSvg()
  479 + this.refreshLineSvg_gps()
436 480 },
437 481 chart_station_text_font_size_after: function (val) {
438 482 let svg = this.private_svg
439 483 svg.selectAll('g.item text.station_text.up.after')
440 484 .style('font-size', val)
441 485 this.refreshLineSvg()
  486 + this.refreshDownLineSvg()
  487 + this.refreshLineSvg_gps()
442 488 },
443 489 chart_station_text_space: function (val) {
444 490 let d3 = this.private_d3
... ... @@ -528,7 +574,7 @@ export default {
528 574 let routeData = self.eBusStopData.routeStationDataList
529 575 let width = self.svg_width // 内部整个svg的宽度
530 576 let height = self.svg_height // 内部整个svg的高度
531   - let svgNameSpace = self.private_svgns
  577 + // let svgNameSpace = self.private_svgns
532 578 let svg = self.private_svg
533 579 let chartLeftPadding = self.chart_left_padding
534 580 let chartRightPadding = self.chart_right_padding
... ... @@ -881,7 +927,7 @@ export default {
881 927 // 滚动的方向
882 928 let dir = d3.select(this).attr('data-y-transform-direction')
883 929 // 滚动的距离
884   - let y_transform_distance = parseInt(d3.select(this).attr('data-y-transform-distance'))
  930 + let y_transform_distance = parseInt(d3.select(this).attr('data-y-transform-distance')) + 10
885 931 if (dir === 'up') {
886 932 return y - y_transform_distance
887 933 } else {
... ... @@ -899,6 +945,121 @@ export default {
899 945 d3.select(this).attr('data-y-transform-direction', 'up')
900 946 }
901 947 })
  948 + },
  949 + refreshLineSvg_gps () {
  950 + let self = this
  951 +
  952 + let svg = self.private_svg
  953 + let $jQuery = self.private_jQuery
  954 + let d3 = self.private_d3
  955 +
  956 + let width = self.svg_width // 内部整个svg的宽度
  957 + let height = self.svg_height // 内部整个svg的高度
  958 + let chartLeftPadding = self.chart_left_padding
  959 + let chartRightPadding = self.chart_right_padding
  960 +
  961 + let routeData = self.eBusStopData.routeStationDataList
  962 + let gpsData = self.eBusStopGpsData.gpsDataList
  963 +
  964 + // --------------- 1、添加/更新车辆rect元素 -------------- //
  965 + $jQuery(self.$el).find('.merge_hide', svg).removeAttr('class') // 删除.mverge_hide元素的class属性（样式）
  966 + // 绘制rect
  967 + let gpsRectUpdate = d3.select($jQuery(this.$el).find('svg g.gps-wrap')[0]).selectAll('rect')
  968 + .data(gpsData, function (d) {
  969 + return d.d3DataKey // 指定主键，默认使用数组下标
  970 + })
  971 + let gpsRectEnter = gpsRectUpdate
  972 + let gpsRectExit = gpsRectUpdate.exit()
  973 + gpsRectExit.remove()
  974 +
  975 + let gpsRectX = function (d) {
  976 + // 查找对应的站点circle
  977 + let svgCircle
  978 + try {
  979 + svgCircle = $jQuery(self.$el).find('.station_circle[data-id=' + d.stopCode + ']')
  980 + if (svgCircle.length === 0) {
  981 + svgCircle = null
  982 + }
  983 + } catch (e) {
  984 + console.log('未找到svg circle, data-id = ' + d.stopCode )
  985 + svgCircle = null
  986 + }
  987 +
  988 + // 计算x
  989 + let x
  990 + if (!svgCircle) {
  991 + x = -100
  992 + return x
  993 + }
  994 + let x1 = parseInt(svgCircle.attr('cx'))
  995 + if (d.state === '1') { // 进站
  996 + x = x1
  997 + } else { // 出站
  998 + x = x1 + 10
  999 + }
  1000 +
  1001 + // 显示/隐藏
  1002 + if (x === -100) {
  1003 + $jQuery(this).css('transition-duration', 0).hide()
  1004 + } else {
  1005 + $jQuery(this).show()
  1006 + }
  1007 +
  1008 + return x
  1009 + }
  1010 +
  1011 + let gpsRectY = function (d) {
  1012 + // 查找对应的站点circle
  1013 + let svgCircle
  1014 + try {
  1015 + svgCircle = $jQuery(self.$el).find('.station_circle[data-id=' + d.stopCode + ']')
  1016 + if (svgCircle.length === 0) {
  1017 + svgCircle = null
  1018 + }
  1019 + } catch (e) {
  1020 + console.log('未找到svg circle, data-id = ' + d.stopCode )
  1021 + svgCircle = null
  1022 + }
  1023 +
  1024 + // 计算y
  1025 + let y
  1026 + if (!svgCircle) {
  1027 + y = -100
  1028 + return y
  1029 + }
  1030 + y = parseInt(svgCircle.attr('cy'))
  1031 + // let index = gpsIndexMap[d.stopNo + '_' + d.upDown][d.getKey()]
  1032 + // if (d.upDown === 0) {
  1033 + // y = y - 22 - (index * 17)
  1034 + // } else {
  1035 + // y = y + 6 + (index * 19)
  1036 + // }
  1037 + // TODO：后面修正
  1038 +
  1039 + return y
  1040 + }
  1041 +
  1042 + gpsRectEnter.enter().append('rect')
  1043 + .style('fill', self.chart_gps_rect_color)
  1044 + .style('stroke', self.chart_gps_rect_color)
  1045 + .attr('_id', function (d) {
  1046 + return 'rct_' + d.d3DataKey
  1047 + })
  1048 + .transition()
  1049 + .attr('width', '30px') // css也设置了，但是有些游览器不支持（如 android5.1的内置游览器），所以直接定义成属性
  1050 + .attr('height', '15px') // css也设置了，但是有些游览器不支持（如 android5.1的内置游览器），所以直接定义成属性
  1051 + .attr('rx', '2px') // css也设置了，但是有些游览器不支持（如 android5.1的内置游览器），所以直接定义成属性
  1052 + .attr('x', gpsRectX)
  1053 + .attr('y', gpsRectY)
  1054 + gpsRectUpdate
  1055 + .attr('_id', function (d) {
  1056 + return 'rct_' + d.d3DataKey
  1057 + })
  1058 + .transition()
  1059 + .attr('x', gpsRectX)
  1060 + .attr('y', gpsRectY)
  1061 +
  1062 + // TODO：
902 1063 }
903 1064  
904 1065 }
... ...
front-end/h5/src/components/core/plugins/bsth/othergj/linechart/list/models/othergj-eBusStop-line-chart-list-scrollPage-innerData.js
  View file @cf70548
... ... @@ -4,6 +4,7 @@
4 4  
5 5 import Utils from 'core/plugins/bsth/bsth-utils'
6 6 import { StationData, RouteData, EBusStopData } from 'core/plugins/bsth/othergj/linechart/chart/models/eBusStopData'
  7 +import { GpsData, EBusStopGpsData } from 'core/plugins/bsth/othergj/linechart/chart/models/eBusStopGpsData'
7 8  
8 9 class ScrollPageInnerDataItem {
9 10 /**
... ... @@ -14,10 +15,12 @@ class ScrollPageInnerDataItem {
14 15 * @param itemIndex int 每页中的item下标（从0开始）
15 16 * @param pageIndex int 第几页下标（从0开始）
16 17 * @param eBusStopData EBusStopData 对应eBusStop-line-chart组件使用的数据对象
  18 + * @param eBusStopGpsData EBusStopGpsData 对应eBusStop-line-chart组件使用的数据对象
17 19 */
18   - constructor (width = 0, height = 0, cssTop, itemIndex, pageIndex, eBusStopData) {
  20 + constructor (width = 0, height = 0, cssTop, itemIndex, pageIndex, eBusStopData, eBusStopGpsData) {
19 21 // 数据对象
20 22 this._eBusStopData = eBusStopData
  23 + this._eBusStopGpsData = eBusStopGpsData
21 24  
22 25 // ------------- 滚动列表用的数据 ------------ //
23 26 this._width = width
... ... @@ -49,7 +52,8 @@ class ScrollPageInnerDataItem {
49 52 dataItem._cssTop,
50 53 dataItem._itemIndex,
51 54 dataItem._pageIndex,
52   - dataItem._eBusStopData
  55 + dataItem._eBusStopData,
  56 + dataItem._eBusStopGpsData
53 57 )
54 58 }
55 59  
... ... @@ -261,6 +265,7 @@ class ScrollPageInnerData {
261 265 // 2-1、使用远端数据构造内部数据
262 266 // 远程数据格式参考 http://36.134.151.106:19102/General_Interface/getArriveVO?deviceId=66MH0001
263 267 remoteDataList.map(info => {
  268 + // 构造route数据
264 269 let lineName = info['lineName'] || '' // 线路名称
265 270 let lineCode = info['lineCode'] || '' // 线路代码
266 271 let lineDir = info['direction'] || '' // 线路方向
... ... @@ -296,11 +301,25 @@ class ScrollPageInnerData {
296 301 currentStopIndex = currentStopIndexList[0]
297 302 }
298 303 let routeData = new RouteData(currentStopIndex, stationDataList)
299   - rtnData._innerDataItemList.push(
300   - new ScrollPageInnerDataItem(0, 0, 0, 0, 0,
301   - new EBusStopData(lineName, lineCode, routeData, startTime, endTime)))
  304 + let eBusStopData = new EBusStopData(lineName, lineCode, routeData, startTime, endTime)
  305 +
  306 + // 构造gps数据
  307 + let gpsDataList = []
  308 + if (info['lineRoute'] && info['lineRoute'].length) {
  309 + info['lineRoute'].map((station, i) => {
  310 + if (station['laststop'] && station['laststop'] === station['stationCode']) {
  311 + let gpsData = new GpsData(station['laststop'], station['nbbm'], station['state'])
  312 + gpsDataList.push(gpsData)
  313 + }
  314 + })
  315 + }
  316 + let eBusStopGpsData = new EBusStopGpsData(
  317 + lineName, lineCode, routeData.lastStationName,
  318 + startTime, endTime, 'TODO：计算发车', gpsDataList)
302 319  
303   - // TODO：gps数据
  320 + // 添加scroll数据
  321 + rtnData._innerDataItemList.push(
  322 + new ScrollPageInnerDataItem(0, 0, 0, 0, 0, eBusStopData, eBusStopGpsData))
304 323 })
305 324  
306 325 // 2.2、如果不足一页，补足一页数据，用空数据补充（TODO：如果要测试分页，可以在这里添加更多的emptyTestData）
... ... @@ -308,7 +327,7 @@ class ScrollPageInnerData {
308 327 if (_size > 0) {
309 328 for (let i = 0; i < _size; i++) {
310 329 rtnData._innerDataItemList.push(new ScrollPageInnerDataItem(
311   - 0, 0, 0, 0, 0, EBusStopData.generateTestData_null()))
  330 + 0, 0, 0, 0, 0, EBusStopData.generateTestData_null(), EBusStopGpsData.generateTestData_null()))
312 331 }
313 332 }
314 333  
... ... @@ -338,27 +357,30 @@ class ScrollPageInnerData {
338 357  
339 358 // 2、计算内部数据对象
340 359 rtnData._innerDataItemList.splice(0, rtnData._innerDataItemList.length)
341   - // 2-1、测试数据
  360 + // 2-1、线路路由测试数据
342 361 let eBusStopData1 = EBusStopData.generateTestData()
343 362 let eBusStopData2 = EBusStopData.generateTestData()
344 363 eBusStopData2._lineName = "线路2"
345 364 eBusStopData2._lineCode = "2"
346   - let eBusStopDataList = [eBusStopData1, eBusStopData2]
347   - eBusStopDataList.map(stopData => {
348   - rtnData._innerDataItemList.push(new ScrollPageInnerDataItem(
349   - 0, 0, 0, 0, 0, stopData
350   - ))
351   - })
352   -
353   - // TODO：gps数据
354   -
  365 + // 2-2、线路报站gps测试数据
  366 + let eBusStopGpsData1 = EBusStopGpsData.generateTestData()
  367 + let eBusStopGpsData2 = EBusStopGpsData.generateTestData()
  368 + eBusStopGpsData2._lineName = "线路2"
  369 + eBusStopGpsData2._lineCode = "2"
  370 +
  371 + rtnData._innerDataItemList.push(new ScrollPageInnerDataItem(
  372 + 0, 0, 0, 0, 0, eBusStopData1, eBusStopGpsData1
  373 + ))
  374 + rtnData._innerDataItemList.push(new ScrollPageInnerDataItem(
  375 + 0, 0, 0, 0, 0, eBusStopData2, eBusStopGpsData2
  376 + ))
355 377  
356 378 // 2.2、如果不足一页，补足一页数据，用空数据补充（TODO：如果要测试分页，可以在这里添加更多的emptyTestData）
357 379 let _size = pageSize - rtnData._innerDataItemList.length
358 380 if (_size > 0) {
359 381 for (let i = 0; i < _size; i++) {
360 382 rtnData._innerDataItemList.push(new ScrollPageInnerDataItem(
361   - 0, 0, 0, 0, 0, EBusStopData.generateTestData_null()))
  383 + 0, 0, 0, 0, 0, EBusStopData.generateTestData_null(), EBusStopGpsData.generateTestData_null()))
362 384 }
363 385 }
364 386  
... ...
front-end/h5/src/components/core/plugins/bsth/othergj/linechart/list/othergj-eBusStop-line-chart-list.js
  View file @cf70548
... ... @@ -87,7 +87,7 @@ export default {
87 87 chart_station_text_font_size_before: PropTypes.number({ label: '站名字体大小-前面站点', defaultValue: 12, layout: { prefixCls: 'bsth-line' } }),
88 88 chart_station_text_font_size_after: PropTypes.number({ label: '站名字体大小-后面站点', defaultValue: 12, layout: { prefixCls: 'bsth-line' } }),
89 89 chart_station_text_space: PropTypes.number({ label: '站名间距', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }),
90   - chart_station_text_transform_second: PropTypes.number({ label: '站名滚动间隔(秒)', defaultValue: 3, layout: { prefixCls: 'bsth-line' } }),
  90 + chart_station_text_transform_second: PropTypes.number({ label: '站名滚动间隔(秒)', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
91 91 chart_up_station_text_font_f_color_current: PropTypes.color({ label: '站名颜色-当前站点', defaultValue: '#060D37', layout: { prefixCls: 'bsth-line' } }),
92 92 chart_up_station_text_font_f_color_before: PropTypes.color({ label: '站名颜色-前面站点', defaultValue: '#9398B4', layout: { prefixCls: 'bsth-line' } }),
93 93 chart_up_station_text_font_f_color_after: PropTypes.color({ label: '站名颜色-后面站点', defaultValue: '#4556b6', layout: { prefixCls: 'bsth-line' } }),
... ... @@ -258,7 +258,7 @@ export default {
258 258 <div style={wrapperDivStyle}>
259 259 {
260 260 this.internalDataSet.map(dataItem => (
261   - this.renderLineChart(dataItem._eBusStopData)
  261 + this.renderLineChart(dataItem._eBusStopData, dataItem._eBusStopGpsData)
262 262 ))
263 263 }
264 264 </div>
... ... @@ -269,9 +269,11 @@ export default {
269 269 /**
270 270 * 绘制eBusStop-line-chart组件（index.js中已经注册过，不需要import）。
271 271 * @param eBusStopData EBusStopData类型
  272 + * @param eBusStopGpsData EBusStopGpsData类型
272 273 * @return {*}
273 274 */
274   - renderLineChart (eBusStopData) {
  275 + renderLineChart (eBusStopData, eBusStopGpsData) {
  276 + console.log(eBusStopGpsData._gpsDataList)
275 277 return (
276 278 <othergj-eBusStop-line-chart
277 279 useMode='child'
... ... @@ -279,6 +281,7 @@ export default {
279 281 line_chart_outer_div_width={this.line_chart_outer_div_width}
280 282 line_chart_outer_div_height={this.line_chart_outer_div_height}
281 283 eBusStopData_child={eBusStopData}
  284 + eBusStopGpsData_child={eBusStopGpsData}
282 285 // 内部线路模拟图外层css属性
283 286 margin_left={this.line_chart_margin_left}
284 287 margin_right={this.line_chart_margin_right}
... ...