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

1、修改othergj-eBusStop-line-chart组件，添加gps车辆显示 2、修改othergj-eBusStop-line-chart-list组件，添加获取gps车辆数据逻辑

其他公交公司用的公交电子站牌页面组件
1、修改othergj-eBusStop-line-chart组件，添加gps车辆显示 2、修改othergj-eBusStop-line-chart-list组件，添加获取gps车辆数据逻辑
徐烜
1 parent e11ed9fe
Showing 5 changed files with 364 additions and 29 deletions
front-end/h5/src/components/core/plugins/bsth/othergj/linechart/chart/models/eBusStopData.js
front-end/h5/src/components/core/plugins/bsth/othergj/linechart/chart/models/eBusStopGpsData.js
front-end/h5/src/components/core/plugins/bsth/othergj/linechart/chart/othergj-eBusStop-line-chart.js
front-end/h5/src/components/core/plugins/bsth/othergj/linechart/list/models/othergj-eBusStop-line-chart-list-scrollPage-innerData.js
front-end/h5/src/components/core/plugins/bsth/othergj/linechart/list/othergj-eBusStop-line-chart-list.js
@@ -39,6 +39,11 @@ class RouteData {
   get dataList () {
     return this._stationDataList
   }
+
+  get lastStationName () {
+    let length = this._stationDataList.length
+    return length > 0 ? this._stationDataList[length - 1] : ''
+  }
 }
 // 电子站牌信息
+import { EBusStopData, RouteData } from './eBusStopData'
+
+/**
+ * 公交线路模拟图组件用数据。
+ */
+
+// gps数据
+class GpsData {
+  /**
+   * 构造函数。
+   * @param stopCode 当前车辆对应的站点编码
+   * @param nbbm 当前车辆内部编码（自编号/车牌号）
+   * @param state 当前车辆对应状态，1：进站 0：出站
+   */
+  constructor (stopCode, nbbm, state) {
+    this._stopCode = stopCode
+    this._nbbm = nbbm
+    this._state = state
+  }
+
+  get d3DataKey () { // d3绘制绑定数据用的key
+    return this._stopCode + '_' + this._nbbm
+  }
+
+  get busText () { // 获取车辆文本显示
+    if (this._nbbm.indexOf('苏') >= 0) {
+      return getCphShortText.call(this)
+    } else {
+      return getZbhShortText.call(this)
+    }
+  }
+
+  get stopCode () { return this._stopCode }
+  get state () { return this._state }
+}
+
+function getZbhShortText() { // 获取自编号短文本
+  let self = this
+  let nbbm = self._nbbm
+  if (nbbm) {
+    let nbbmLength = nbbm.length
+    if (nbbmLength > 3) {
+      let nbbmText = nbbm.substr(nbbmLength - 3)
+      if (nbbm.indexOf('-') > 0) {
+        return nbbm.substr(nbbm.indexOf('-') - 1, 1) + nbbmText
+      } else {
+        return nbbmText
+      }
+    } else {
+      return nbbm
+    }
+  } else {
+    return nbbm
+  }
+}
+
+function getCphShortText() { // 获取车牌号短文本
+  let self = this
+  let nbbm = self._nbbm
+  if (nbbm.indexOf('沪') !== -1) {
+    let startIndex = nbbm.indexOf('沪')
+    if (startIndex + 5 > nbbm.length) { // 沪后面至少还有5个字符
+      return nbbm.substr(0, 3)
+    } else {
+      let code1 = nbbm.substr(startIndex + 1, 1)
+      let code2 = nbbm.substr(startIndex + 2, 1)
+      if (code2 === '-') {
+        return code1 + nbbm.substr(startIndex + 3, 3)
+      } else {
+        return code1 + nbbm.substr(startIndex + 2, 3)
+      }
+    }
+  } else {
+    return nbbm.substr(0, 3)
+  }
+}
+
+// 电子站牌车辆报站信息
+class EBusStopGpsData {
+  /**
+   * 构造函数。
+   * @param lineName 线路名称
+   * @param lineCode 线路编码
+   * @param endStopName 终点站站名
+   * @param startTime 首班车时间
+   * @param endTime 末班车时间
+   * @param arrivalInfo 到站信息（如：2站，等待发车，即将进站）
+   * @param gpsDataList gps数据列表
+   */
+  constructor (lineName, lineCode, endStopName,
+               startTime = '00:00', endTime = '23:59',
+               arrivalInfo = '等待发车', gpsDataList = [] ) {
+    this._lineName = lineName
+    this._lineCode = lineCode
+    this._endStopName = endStopName
+    this._startTime = startTime
+    this._endTime = endTime
+    this._arrivalInfo = arrivalInfo
+    this._gpsDataList = [...gpsDataList]
+  }
+
+  get lineName () { return this._lineName }
+  get lineCode () { return this._lineCode }
+  get endStopName () { return this._endStopName }
+  get startTime () { return this._startTime }
+  get endTime () { return this._endTime }
+  get arrivalInfo () { return this._arrivalInfo }
+  get gpsDataList () { return this._gpsDataList }
+
+  /**
+   * 产生测试数据。
+   */
+  static generateTestData () {
+    // 1、创建gps数据
+    let gps1 = new GpsData('1', '苏J07622D', '1')
+    let gps2 = new GpsData('3', '苏J07612D', '0')
+    let gps3 = new GpsData('4', '苏J07613D', '1')
+    let gps4 = new GpsData('4', '苏J07614D', '1')
+    let gps5 = new GpsData('5', '苏J07615D', '0')
+    let gps6 = new GpsData('5', '苏J07616D', '0')
+    let gps7 = new GpsData('6', '苏J07617D', '1')
+    let gpsDataList = [gps1, gps2, gps3, gps4, gps5, gps6, gps7]
+    // 2、发车信息
+    return new EBusStopGpsData(
+      '线路1', '1', '站点6',
+      '6:00', '23:00',
+      '2站', gpsDataList)
+
+  }
+
+  /**
+   * 产生空测试数据。
+   */
+  static generateTestData_null () {
+    return new EBusStopGpsData('', '', '')
+  }
+
+  // TODO：
+}
+
+export {
+  EBusStopGpsData,
+  GpsData
+}
@@ -5,6 +5,7 @@ import PropTypes from &#39;@luban-h5/plugin-common-props&#39;
 import Utils from 'core/plugins/bsth/bsth-utils'
 import { EBusStopData } from 'core/plugins/bsth/othergj/linechart/chart/models/eBusStopData'
+import { EBusStopGpsData } from 'core/plugins/bsth/othergj/linechart/chart/models/eBusStopGpsData'
 import './css/othergj-eBusStop-line-chart.css'
@@ -73,7 +74,8 @@ export default {
       down_line_x5: 0,
       down_line_y5: 0,
-      eBusStopData: null // 电子站牌数据（EBusStopData类型）
+      eBusStopData: null, // 电子站牌数据（EBusStopData类型）
+      eBusStopGpsData: null // 电子站牌报站数据（EBusStopGpsData类型）
     }
   },
   computed: {
@@ -106,6 +108,12 @@ export default {
         return null
       }
     },
+    eBusStopGpsData_child: { // 作为子组件，父对象传值
+      type: EBusStopGpsData,
+      default: function () {
+        return null
+      }
+    },
     // 数据属性
     _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 {
     _flag_7_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="无数据提示css属性" class="bsth-line-item-divider"></hr>) } }),
     empty_info_font_size: PropTypes.number({ label: '无数据提示文字字体大小', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
     empty_info_font_color: PropTypes.color({ label: '无数据提示文字字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
-    empty_info_top_padding: PropTypes.number({ label: '无数据提示文字距离上边', defaultValue: 25, layout: { prefixCls: 'bsth-line' } })
+    empty_info_top_padding: PropTypes.number({ label: '无数据提示文字距离上边', defaultValue: 25, layout: { prefixCls: 'bsth-line' } }),
+    _flag_8_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="车辆gps报站数据css属性" class="bsth-line-item-divider"></hr>) } }),
+    chart_gps_rect_color: PropTypes.color({ label: 'gps车辆rect背景色', defaultValue: '#3e50b3', layout: { prefixCls: 'bsth-line' } }),
   },
   render () {
@@ -199,9 +209,9 @@ export default {
           <svg class="othergj-eBusStop-line-chart"
                data-code={this.eBusStopData.lineCode}
                style={svgStyle}>
-            <g class="line-wrap">
-
-            </g>
+            <g class="line-wrap"></g>
+            <g class="gps-wrap"></g>
+            <g class="marker-cluster"></g>
             <g class="arrow-wrap">
               <path d={downLinePathD} style={{ 'fill': this.down_line_s_color }}></path>
             </g>
@@ -218,8 +228,10 @@ export default {
     // 设置数据
     if (this.useMode === 'alone') { // 单独使用，使用测试数据
       this.eBusStopData = EBusStopData.generateTestData()
+      this.eBusStopGpsData = EBusStopGpsData.generateTestData()
     } else { // 自组件使用，使用父组件传值
       this.eBusStopData = this.eBusStopData_child
+      this.eBusStopGpsData = this.eBusStopGpsData_child
     }
   },
   mounted () {
@@ -251,6 +263,8 @@ export default {
     this.refreshLineSvg()
     // 刷新下部分线svg
     this.refreshDownLineSvg()
+    // 刷新gps svg
+    this.refreshLineSvg_gps()
     // svg文本滚动监控开启
     if (this.editorMode === 'preview') {
@@ -327,9 +341,17 @@ export default {
       }
     },
     eBusStopData_child: function (val) {
+      // console.log('eBusStopData_child')
       let self = this
       if (self.useMode === 'child') {
-        self.eBusStopData_child = val
+        self.eBusStopData = val
+      }
+    },
+    eBusStopGpsData_child: function (val) {
+      // console.log('eBusStopGpsData_child')
+      let self = this
+      if (self.useMode === 'child') {
+        self.eBusStopGpsData = val
       }
     },
     // ----------- 数据属性 ----------- //
@@ -339,6 +361,14 @@ export default {
         self.refreshLineSvg()
       }
     },
+    eBusStopGpsData: {
+      handler () {
+        let self = this
+        console.log('refreshLineSvg_gps')
+        self.refreshLineSvg_gps()
+      },
+      deep: true
+    },
     // ------------ 本身宽高 ----------- //
     component_width () {
       this.svg_width = this.component_width - this.border_size * 2
@@ -350,10 +380,12 @@ export default {
     svg_width () {
       this.refreshLineSvg()
       this.refreshDownLineSvg()
+      this.refreshLineSvg_gps()
     },
     svg_height () {
       this.refreshLineSvg()
       this.refreshDownLineSvg()
+      this.refreshLineSvg_gps()
     },
     // ----------- 图外层css 监控 ----------- //
     margin_left () {
@@ -382,12 +414,18 @@ export default {
     // ----------- _flag_5_属性 -------------//
     chart_left_padding: function () {
       this.refreshLineSvg()
+      this.refreshDownLineSvg()
+      this.refreshLineSvg_gps()
     },
     chart_right_padding: function () {
       this.refreshLineSvg()
+      this.refreshDownLineSvg()
+      this.refreshLineSvg_gps()
     },
     chart_top_padding: function () {
       this.refreshLineSvg()
+      this.refreshDownLineSvg()
+      this.refreshLineSvg_gps()
     },
     chart_up_line_path_s_width: function (val) {
       let svg = this.private_svg
@@ -421,24 +459,32 @@ export default {
     },
     chart_station_text_top_padding: function (val) {
       this.refreshLineSvg()
+      this.refreshDownLineSvg()
+      this.refreshLineSvg_gps()
     },
     chart_station_text_font_size_current: function (val) {
       let svg = this.private_svg
       svg.selectAll('g.item text.station_text.up.current')
         .style('font-size', val)
       this.refreshLineSvg()
+      this.refreshDownLineSvg()
+      this.refreshLineSvg_gps()
     },
     chart_station_text_font_size_before: function (val) {
       let svg = this.private_svg
       svg.selectAll('g.item text.station_text.up.before')
         .style('font-size', val)
       this.refreshLineSvg()
+      this.refreshDownLineSvg()
+      this.refreshLineSvg_gps()
     },
     chart_station_text_font_size_after: function (val) {
       let svg = this.private_svg
       svg.selectAll('g.item text.station_text.up.after')
         .style('font-size', val)
       this.refreshLineSvg()
+      this.refreshDownLineSvg()
+      this.refreshLineSvg_gps()
     },
     chart_station_text_space: function (val) {
       let d3 = this.private_d3
@@ -528,7 +574,7 @@ export default {
       let routeData = self.eBusStopData.routeStationDataList
       let width = self.svg_width // 内部整个svg的宽度
       let height = self.svg_height // 内部整个svg的高度
-      let svgNameSpace = self.private_svgns
+      // let svgNameSpace = self.private_svgns
       let svg = self.private_svg
       let chartLeftPadding = self.chart_left_padding
       let chartRightPadding = self.chart_right_padding
@@ -881,7 +927,7 @@ export default {
           // 滚动的方向
           let dir = d3.select(this).attr('data-y-transform-direction')
           // 滚动的距离
-          let y_transform_distance = parseInt(d3.select(this).attr('data-y-transform-distance'))
+          let y_transform_distance = parseInt(d3.select(this).attr('data-y-transform-distance')) + 10
           if (dir === 'up') {
             return y - y_transform_distance
           } else {
@@ -899,6 +945,121 @@ export default {
             d3.select(this).attr('data-y-transform-direction', 'up')
           }
         })
+    },
+    refreshLineSvg_gps () {
+      let self = this
+
+      let svg = self.private_svg
+      let $jQuery = self.private_jQuery
+      let d3 = self.private_d3
+
+      let width = self.svg_width // 内部整个svg的宽度
+      let height = self.svg_height // 内部整个svg的高度
+      let chartLeftPadding = self.chart_left_padding
+      let chartRightPadding = self.chart_right_padding
+
+      let routeData = self.eBusStopData.routeStationDataList
+      let gpsData = self.eBusStopGpsData.gpsDataList
+
+      // --------------- 1、添加/更新车辆rect元素 -------------- //
+      $jQuery(self.$el).find('.merge_hide', svg).removeAttr('class') // 删除.mverge_hide元素的class属性（样式）
+      // 绘制rect
+      let gpsRectUpdate = d3.select($jQuery(this.$el).find('svg g.gps-wrap')[0]).selectAll('rect')
+        .data(gpsData, function (d) {
+          return d.d3DataKey // 指定主键，默认使用数组下标
+        })
+      let gpsRectEnter = gpsRectUpdate
+      let gpsRectExit = gpsRectUpdate.exit()
+      gpsRectExit.remove()
+
+      let gpsRectX = function (d) {
+        // 查找对应的站点circle
+        let svgCircle
+        try {
+          svgCircle = $jQuery(self.$el).find('.station_circle[data-id=' + d.stopCode + ']')
+          if (svgCircle.length === 0) {
+            svgCircle = null
+          }
+        } catch (e) {
+          console.log('未找到svg circle, data-id = ' + d.stopCode )
+          svgCircle = null
+        }
+
+        // 计算x
+        let x
+        if (!svgCircle) {
+          x = -100
+          return x
+        }
+        let x1 = parseInt(svgCircle.attr('cx'))
+        if (d.state === '1') { // 进站
+          x = x1
+        } else { // 出站
+          x = x1 + 10
+        }
+
+        // 显示/隐藏
+        if (x === -100) {
+          $jQuery(this).css('transition-duration', 0).hide()
+        } else {
+          $jQuery(this).show()
+        }
+
+        return x
+      }
+
+      let gpsRectY = function (d) {
+        // 查找对应的站点circle
+        let svgCircle
+        try {
+          svgCircle = $jQuery(self.$el).find('.station_circle[data-id=' + d.stopCode + ']')
+          if (svgCircle.length === 0) {
+            svgCircle = null
+          }
+        } catch (e) {
+          console.log('未找到svg circle, data-id = ' + d.stopCode )
+          svgCircle = null
+        }
+
+        // 计算y
+        let y
+        if (!svgCircle) {
+          y = -100
+          return y
+        }
+        y = parseInt(svgCircle.attr('cy'))
+        // let index = gpsIndexMap[d.stopNo + '_' + d.upDown][d.getKey()]
+        // if (d.upDown === 0) {
+        //   y = y - 22 - (index * 17)
+        // } else {
+        //   y = y + 6 + (index * 19)
+        // }
+        // TODO：后面修正
+
+        return y
+      }
+
+      gpsRectEnter.enter().append('rect')
+        .style('fill', self.chart_gps_rect_color)
+        .style('stroke', self.chart_gps_rect_color)
+        .attr('_id', function (d) {
+          return 'rct_' + d.d3DataKey
+        })
+        .transition()
+        .attr('width', '30px') // css也设置了，但是有些游览器不支持（如 android5.1的内置游览器），所以直接定义成属性
+        .attr('height', '15px') // css也设置了，但是有些游览器不支持（如 android5.1的内置游览器），所以直接定义成属性
+        .attr('rx', '2px') // css也设置了，但是有些游览器不支持（如 android5.1的内置游览器），所以直接定义成属性
+        .attr('x', gpsRectX)
+        .attr('y', gpsRectY)
+      gpsRectUpdate
+        .attr('_id', function (d) {
+          return 'rct_' + d.d3DataKey
+        })
+        .transition()
+        .attr('x', gpsRectX)
+        .attr('y', gpsRectY)
+
+      // TODO：
     }
   }
@@ -4,6 +4,7 @@
 import Utils from 'core/plugins/bsth/bsth-utils'
 import { StationData, RouteData, EBusStopData } from 'core/plugins/bsth/othergj/linechart/chart/models/eBusStopData'
+import { GpsData, EBusStopGpsData } from 'core/plugins/bsth/othergj/linechart/chart/models/eBusStopGpsData'
 class ScrollPageInnerDataItem {
   /**
@@ -14,10 +15,12 @@ class ScrollPageInnerDataItem {
    * @param itemIndex int 每页中的item下标（从0开始）
    * @param pageIndex int 第几页下标（从0开始）
    * @param eBusStopData EBusStopData 对应eBusStop-line-chart组件使用的数据对象
+   * @param eBusStopGpsData EBusStopGpsData 对应eBusStop-line-chart组件使用的数据对象
    */
-  constructor (width = 0, height = 0, cssTop, itemIndex, pageIndex, eBusStopData) {
+  constructor (width = 0, height = 0, cssTop, itemIndex, pageIndex, eBusStopData, eBusStopGpsData) {
     // 数据对象
     this._eBusStopData = eBusStopData
+    this._eBusStopGpsData = eBusStopGpsData
     // ------------- 滚动列表用的数据 ------------ //
     this._width = width
@@ -49,7 +52,8 @@ class ScrollPageInnerDataItem {
       dataItem._cssTop,
       dataItem._itemIndex,
       dataItem._pageIndex,
-      dataItem._eBusStopData
+      dataItem._eBusStopData,
+      dataItem._eBusStopGpsData
     )
   }
@@ -261,6 +265,7 @@ class ScrollPageInnerData {
     // 2-1、使用远端数据构造内部数据
     // 远程数据格式参考 http://36.134.151.106:19102/General_Interface/getArriveVO?deviceId=66MH0001
     remoteDataList.map(info => {
+      // 构造route数据
       let lineName = info['lineName'] || '' // 线路名称
       let lineCode = info['lineCode'] || '' // 线路代码
       let lineDir = info['direction'] || '' // 线路方向
@@ -296,11 +301,25 @@ class ScrollPageInnerData {
         currentStopIndex = currentStopIndexList[0]
       }
       let routeData = new RouteData(currentStopIndex, stationDataList)
-      rtnData._innerDataItemList.push(
-        new ScrollPageInnerDataItem(0, 0, 0, 0, 0,
-          new EBusStopData(lineName, lineCode, routeData, startTime, endTime)))
+      let eBusStopData = new EBusStopData(lineName, lineCode, routeData, startTime, endTime)
+
+      // 构造gps数据
+      let gpsDataList = []
+      if (info['lineRoute'] && info['lineRoute'].length) {
+        info['lineRoute'].map((station, i) => {
+          if (station['laststop'] && station['laststop'] === station['stationCode']) {
+            let gpsData = new GpsData(station['laststop'], station['nbbm'], station['state'])
+            gpsDataList.push(gpsData)
+          }
+        })
+      }
+      let eBusStopGpsData = new EBusStopGpsData(
+        lineName, lineCode, routeData.lastStationName,
+        startTime, endTime, 'TODO：计算发车', gpsDataList)
-      // TODO：gps数据
+      // 添加scroll数据
+      rtnData._innerDataItemList.push(
+        new ScrollPageInnerDataItem(0, 0, 0, 0, 0, eBusStopData, eBusStopGpsData))
     })
     // 2.2、如果不足一页，补足一页数据，用空数据补充（TODO：如果要测试分页，可以在这里添加更多的emptyTestData）
@@ -308,7 +327,7 @@ class ScrollPageInnerData {
     if (_size > 0) {
       for (let i = 0; i < _size; i++) {
         rtnData._innerDataItemList.push(new ScrollPageInnerDataItem(
-          0, 0, 0, 0, 0, EBusStopData.generateTestData_null()))
+          0, 0, 0, 0, 0, EBusStopData.generateTestData_null(), EBusStopGpsData.generateTestData_null()))
       }
     }
@@ -338,27 +357,30 @@ class ScrollPageInnerData {
     // 2、计算内部数据对象
     rtnData._innerDataItemList.splice(0, rtnData._innerDataItemList.length)
-    // 2-1、测试数据
+    // 2-1、线路路由测试数据
     let eBusStopData1 = EBusStopData.generateTestData()
     let eBusStopData2 = EBusStopData.generateTestData()
     eBusStopData2._lineName = "线路2"
     eBusStopData2._lineCode = "2"
-    let eBusStopDataList = [eBusStopData1, eBusStopData2]
-    eBusStopDataList.map(stopData => {
-      rtnData._innerDataItemList.push(new ScrollPageInnerDataItem(
-        0, 0, 0, 0, 0, stopData
-      ))
-    })
-
-    // TODO：gps数据
-
+    // 2-2、线路报站gps测试数据
+    let eBusStopGpsData1 = EBusStopGpsData.generateTestData()
+    let eBusStopGpsData2 = EBusStopGpsData.generateTestData()
+    eBusStopGpsData2._lineName = "线路2"
+    eBusStopGpsData2._lineCode = "2"
+
+    rtnData._innerDataItemList.push(new ScrollPageInnerDataItem(
+      0, 0, 0, 0, 0, eBusStopData1, eBusStopGpsData1
+    ))
+    rtnData._innerDataItemList.push(new ScrollPageInnerDataItem(
+      0, 0, 0, 0, 0, eBusStopData2, eBusStopGpsData2
+    ))
     // 2.2、如果不足一页，补足一页数据，用空数据补充（TODO：如果要测试分页，可以在这里添加更多的emptyTestData）
     let _size = pageSize - rtnData._innerDataItemList.length
     if (_size > 0) {
       for (let i = 0; i < _size; i++) {
         rtnData._innerDataItemList.push(new ScrollPageInnerDataItem(
-          0, 0, 0, 0, 0, EBusStopData.generateTestData_null()))
+          0, 0, 0, 0, 0, EBusStopData.generateTestData_null(), EBusStopGpsData.generateTestData_null()))
       }
     }
@@ -87,7 +87,7 @@ export default {
     chart_station_text_font_size_before: PropTypes.number({ label: '站名字体大小-前面站点', defaultValue: 12, layout: { prefixCls: 'bsth-line' } }),
     chart_station_text_font_size_after: PropTypes.number({ label: '站名字体大小-后面站点', defaultValue: 12, layout: { prefixCls: 'bsth-line' } }),
     chart_station_text_space: PropTypes.number({ label: '站名间距', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }),
-    chart_station_text_transform_second: PropTypes.number({ label: '站名滚动间隔(秒)', defaultValue: 3, layout: { prefixCls: 'bsth-line' } }),
+    chart_station_text_transform_second: PropTypes.number({ label: '站名滚动间隔(秒)', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
     chart_up_station_text_font_f_color_current: PropTypes.color({ label: '站名颜色-当前站点', defaultValue: '#060D37', layout: { prefixCls: 'bsth-line' } }),
     chart_up_station_text_font_f_color_before: PropTypes.color({ label: '站名颜色-前面站点', defaultValue: '#9398B4', layout: { prefixCls: 'bsth-line' } }),
     chart_up_station_text_font_f_color_after: PropTypes.color({ label: '站名颜色-后面站点', defaultValue: '#4556b6', layout: { prefixCls: 'bsth-line' } }),
@@ -258,7 +258,7 @@ export default {
             <div style={wrapperDivStyle}>
               {
                 this.internalDataSet.map(dataItem => (
-                  this.renderLineChart(dataItem._eBusStopData)
+                  this.renderLineChart(dataItem._eBusStopData, dataItem._eBusStopGpsData)
                 ))
               }
             </div>
@@ -269,9 +269,11 @@ export default {
     /**
      * 绘制eBusStop-line-chart组件（index.js中已经注册过，不需要import）。
      * @param eBusStopData EBusStopData类型
+     * @param eBusStopGpsData EBusStopGpsData类型
      * @return {*}
      */
-    renderLineChart (eBusStopData) {
+    renderLineChart (eBusStopData, eBusStopGpsData) {
+      console.log(eBusStopGpsData._gpsDataList)
       return (
         <othergj-eBusStop-line-chart
           useMode='child'
@@ -279,6 +281,7 @@ export default {
           line_chart_outer_div_width={this.line_chart_outer_div_width}
           line_chart_outer_div_height={this.line_chart_outer_div_height}
           eBusStopData_child={eBusStopData}
+          eBusStopGpsData_child={eBusStopGpsData}
           // 内部线路模拟图外层css属性
           margin_left={this.line_chart_margin_left}
           margin_right={this.line_chart_margin_right}