1、增强bsth-line-chart-list组件，可分页，有不同的分页模式

2、添加bsth-line-chart-list-pageMode类，将分页模式逻辑写入其中

1、增强bsth-line-chart-list组件，可分页，有不同的分页模式
2、添加bsth-line-chart-list-pageMode类，将分页模式逻辑写入其中
徐烜
1 parent a9b53576
Showing 5 changed files with 515 additions and 48 deletions
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart-list-pageMode.js
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart-list.js
front-end/h5/src/components/core/plugins/bsth/bsth-line-char-list_testData.js → front-end/h5/src/components/core/plugins/bsth/bsth-line-chart-list_testData.js
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart.js
front-end/h5/src/components/core/plugins/bsth/bsth-utils.js
+/**
+ * 一般分页类。
+ */
+class NormalPage {
+  /**
+   * 构造函数。
+   * @param page 页码（从0开始）
+   * @param pageSize 每页多少记录
+   * @param result 总的记录列表（array）
+   */
+  constructor (page, pageSize, result) {
+    this.page = 0
+    this.pageSize = pageSize === 0 ? 1 : pageSize
+    this.allDataSet = result
+    // ----------- 内部计算值 ----------- //
+    this.count = this.allDataSet.length // 总记录数
+    this.pageCount = Math.ceil(this.count / this.pageSize) // 总页数
+    this.currentPageDataSet = this.allDataSet.slice( // 当前页数据
+      this.page * this.pageSize,
+      this.page * this.pageSize + this.pageSize)
+  }
+
+  /**
+   * 重新设置总的记录列表。
+   * @param result
+   */
+  set dataSet (result) {
+    this.allDataSet = result
+    this.count = result.length
+    this.pageCount = Math.ceil(this.count / this.pageSize)
+    if (this.page > this.pageCount - 1) {
+      this.page = this.pageCount - 1
+    }
+    this.currentPageDataSet = this.allDataSet.slice(
+      this.page * this.pageSize,
+      this.page * this.pageSize + this.pageSize)
+  }
+  resetPageSize (val) {
+    this.pageSize = val
+    this.pageCount = Math.ceil(this.count / this.pageSize)
+    if (this.page > this.pageCount - 1) {
+      this.page = this.pageCount - 1
+    }
+    this.currentPageDataSet = this.allDataSet.slice(
+      this.page * this.pageSize,
+      this.page * this.pageSize + this.pageSize)
+  }
+  /**
+   * 获取当前页，不翻页
+   * @return {*}
+   */
+  get currentPage () {
+    return this.currentPageDataSet
+  }
+  /**
+   * 返回当前页，并计算下一页数据，如果当前页是最后一页，则下一页跳转到第一页
+   */
+  next () {
+    // 当前页面记录列表
+    let currentPageDataSet = this.currentPageDataSet
+    // 计算下一页数据，如果当前是最后一页，跳转到第一页
+    this.page++
+    if (this.page > this.pageCount - 1) {
+      this.page = 0
+    }
+    this.currentPageDataSet = this.allDataSet.slice(
+      this.page * this.pageSize,
+      this.page * this.pageSize + this.pageSize)
+    return currentPageDataSet
+  }
+}
+
+/**
+ * 滚动分页类。
+ */
+class ScrollPage {
+  // TODO：
+}
+
+export {
+  NormalPage as NormalPageClass,
+  ScrollPage as ScrollPageClass
+}
@@ -3,8 +3,9 @@
  */
 import PropTypes from '@luban-h5/plugin-common-props'
-import TestData from 'core/plugins/bsth/bsth-line-char-list_testData'
-import TestData2 from 'core/plugins/bsth/bsth-line-chart_testData'
+import Utils from 'core/plugins/bsth/bsth-utils'
+import { NormalPageClass } from 'core/plugins/bsth/bsth-line-chart-list-pageMode'
+import TestData from 'core/plugins/bsth/bsth-line-chart-list_testData'
 export default {
   extra: {
@@ -35,7 +36,29 @@ export default {
       line_chart_outer_div_width: 0, // 线路图外层div宽度
       line_chart_outer_div_height: 0, // 线路图外层div高度
       internalDataSet: [], // 内部总数据
-      viewPortDataSet: [] // 可视区域对应的数据
+      sourceDataSet: { // 原始数据
+        route: [], // 路由数据
+        gps: [] // gps数据
+      },
+      /**
+       * 监控外部数据变化（preview下通过ajax获取定时获取外部数据）
+       * 时间间隔定义成prop gps_data_refresh_minute
+       */
+      watchSourceDataSetTimer: {
+        timer: null,
+        count: 0
+      },
+      /**
+       * 监控翻页数据变化（priview下定时翻页）
+       * 翻页间隔定义成prop pageable_millisecond
+       */
+      watchPageTimer: {
+        timer: null,
+        count: 0
+      },
+      normalPageMode: null, // 一般分页处理器
+      scrollPageMode: null, // 滚动分页处理器
+      pageDataSet: [] // 分页对应的数据
     }
   },
   props: {
@@ -44,8 +67,14 @@ export default {
       label: '模式',
       visible: false
     }),
+    // --------------- 数据属性 -------------- //
+    _flag_1_: PropTypes.string({ label: '', component: null, extra (h) { return (<hr data-label='数据属性' class='bsth-line-item-divider'/>) } }),
+    page_size: PropTypes.number({ label: '每页显示线路图数量', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
+    pageable_mode: PropTypes.select({ label: '分页模式', defaultValue: 'normal', options: [{ label: '一般翻页', value: 'normal' }, { label: '滚动翻页', value: 'scroll' }], layout: { prefixCls: 'bsth-line' } }),
+    pageable_millisecond: PropTypes.number({ label: '自动翻页间隔（毫秒）', defaultValue: 2000, layout: { prefixCls: 'bsth-line' } }),
+    gps_data_refresh_minute: PropTypes.number({ label: 'gps数据刷新间隔（分钟）', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
     // --------------- 外层css属性 --------------- //
-    _flag_2_: PropTypes.string({ label: '', component: null, extra: function(h) {return (<hr data-label="外层css属性" class="bsth-line-item-divider"/>)} }),
+    _flag_2_: PropTypes.string({ label: '', component: null, extra (h) { return (<hr data-label='外层css属性' class='bsth-line-item-divider'/>) } }),
     margin_left: PropTypes.number({ label: '图左边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
     margin_right: PropTypes.number({ label: '图右边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
     margin_top: PropTypes.number({ label: '图上边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
@@ -53,7 +82,7 @@ export default {
     border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
     background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
     // --------------- 内部线路模拟图外层css属性 --------------- //
-    _flag_3_: PropTypes.string({ label: '', component: null, extra: function(h) {return (<hr data-label="内部线路模拟图外层css属性" class="bsth-line-item-divider"></hr>)} }),
+    _flag_3_: PropTypes.string({ label: '', component: null, extra (h) { return (<hr data-label='内部线路模拟图外层css属性' class='bsth-line-item-divider'></hr>) } }),
     line_chart_margin_left: PropTypes.number({ label: '图左边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
     line_chart_margin_right: PropTypes.number({ label: '图右边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
     line_chart_margin_top: PropTypes.number({ label: '图上边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
@@ -61,7 +90,7 @@ export default {
     line_chart_border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
     line_chart_background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
     // --------------- 内部线路模拟图内层css属性 --------------- //
-    _flag_4_: PropTypes.string({ label: '', component: null, extra: function(h) {return (<hr data-label="内部线路模拟图内层css属性" class="bsth-line-item-divider"></hr>)} }),
+    _flag_4_: PropTypes.string({ label: '', component: null, extra (h) { return (<hr data-label='内部线路模拟图内层css属性' class='bsth-line-item-divider'></hr>) } }),
     chart_left_padding: PropTypes.number({ label: '内部线路图距离左边padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
     chart_right_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
     chart_center_top_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 4, layout: { prefixCls: 'bsth-line' } }),
@@ -84,9 +113,6 @@ export default {
     chart_gps_down_merge_text_f_color: PropTypes.color({ label: '下行合并gps车辆文本颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } })
   },
   render () {
-    const lineRouteData = TestData.route_test_data
-    const lineGpsData = TestData.gps_test_data
-
     const innerDivStyle = {
       'width': this.list_width + 'px',
       'height': this.list_height + 'px',
@@ -99,19 +125,40 @@ export default {
       'position': 'relative'
     }
+    const bsthLineChartDataList = []
+    for (let data of this.pageDataSet) {
+      bsthLineChartDataList.push({ // TODO：还有其他属性数据
+        useMode: 'child',
+        editorMode: this.editorMode,
+        line_chart_outer_div_width: this.line_chart_outer_div_width,
+        line_chart_outer_div_height: this.line_chart_outer_div_height,
+        line_route_data: data.route,
+        line_gps_data: data.gps,
+        line_name: data.lineName,
+        line_code: data.lineCode
+      })
+    }
+
     /* 最外层div对应编辑器的通用样式 */
     return (
       <div>
         <div style={innerDivStyle}>
-          <bsth-line-chart
-            editorMode={this.editorMode}
-            useMode='child'
-            line_chart_outer_div_width={this.line_chart_outer_div_width}
-            line_chart_outer_div_height={this.line_chart_outer_div_height}
-            line_route_data={lineRouteData}
-            line_gps_data={lineGpsData}
-          >
-          </bsth-line-chart>
+          {
+            bsthLineChartDataList.map(item => {
+              return (
+                <bsth-line-chart
+                  useMode={item.useMode}
+                  editorMode={item.editorMode}
+                  line_chart_outer_div_width={item.line_chart_outer_div_width}
+                  line_chart_outer_div_height={item.line_chart_outer_div_height}
+                  line_route_data_child={item.line_route_data}
+                  line_gps_data_child={item.line_gps_data}
+                  line_name={item.line_name}
+                  line_code={item.line_code}
+                />
+              )
+            })
+          }
         </div>
       </div>
     )
@@ -121,26 +168,59 @@ export default {
     let $jQuery = this.private_jQuery
     this.list_width = $jQuery(this.$el).width() - this.margin_left - this.margin_right - this.border_size * 2
     this.list_height = $jQuery(this.$el).height() - this.margin_top - this.margin_bottom - this.border_size * 2
-    // 开启外部元素长宽监控计数
-    this.watchWidthHeightTimer.count++
     // 线路图外层div长宽就是列表长宽，因为线路图作为子组件无法编辑通用样式，最外穿div的margin,border一律为0
     this.line_chart_outer_div_width = this.list_width
-    this.line_chart_outer_div_height = this.list_height
+    this.line_chart_outer_div_height = Math.floor(this.list_height / this.page_size)
+    // 开启外部元素长宽监控计数
+    /**
+     * 开启外部元素长宽监控逻辑
+     * 1、必须在编辑模式下启效果，否则无效
+     */
+    if (this.editorMode === 'edit') {
+      this.watchWidthHeightTimer.count++
+    }
+    // 开启原始数据监控计数（preview监控变化，edit模式下使用测试数据）
+    if (this.editorMode === 'preview') {
+      this.watchSourceDataSetTimer.count++
+    } else {
+      this.sourceDataSet.route = TestData.lineRouteList
+      this.sourceDataSet.gps = TestData.lineGpsList
+      this.private_computeInternalDataSet(this.sourceDataSet.route, this.sourceDataSet.gps)
+    }
+    // 开启翻页数据变化监控计数（preview监控变化）
+    if (this.editorMode === 'preview') {
+      this.watchPageTimer.count++
+    }
+    // 定义分页处理器
+    if (this.pageable_mode === 'normal') {
+      this.normalPageMode = new NormalPageClass(0, this.page_size, this.internalDataSet)
+      this.pageDataSet = this.normalPageMode.next()
+    } else if (this.pageable_mode === 'scroll') {
+      throw new Error('滚动分页模式还未实现')
+    } else {
+      throw new Error('未知分页模式=' + this.pageable_mode)
+    }
   },
   destroyed () {
     // 组件删除的时候，删除监控定时器
-    let timer = this.watchWidthHeightTimer.timer
-    if (timer) {
-      clearTimeout(timer)
+    let timer1 = this.watchWidthHeightTimer.timer
+    if (timer1) {
+      clearTimeout(timer1)
       this.watchWidthHeightTimer.timer = null
     }
+    let timer2 = this.watchSourceDataSetTimer.timer
+    if (timer2) {
+      clearTimeout(timer2)
+      this.watchSourceDataSetTimer.timer = null
+    }
+    let timer3 = this.watchPageTimer.timer
+    if (timer3) {
+      clearTimeout(timer3)
+      this.watchPageTimer.timer = null
+    }
   },
   watch: {
-    /**
-     * 开启外部元素长宽监控逻辑
-     * 1、必须在编辑模式下启效果，否则无效
-     */
-    'watchWidthHeightTimer.count' () { // 定时器监控
+    'watchWidthHeightTimer.count' () { // 长宽定时器监控
       let timer = this.watchWidthHeightTimer.timer
       if (timer) {
         clearTimeout(timer)
@@ -149,25 +229,257 @@ export default {
       let self = this
       let $jQuery = this.private_jQuery
+      self.watchWidthHeightTimer.timer = setTimeout(function () {
+        // 处理逻辑
+        let width = $jQuery(self.$el).width()
+        let height = $jQuery(self.$el).height()
+
+        if (width !== self.list_width) {
+          self.list_width = width - self.margin_left - self.margin_right - self.border_size * 2
+          self.line_chart_outer_div_width = self.list_width
+        }
+        if (height !== self.list_height) {
+          self.list_height = height - self.margin_top - self.margin_bottom - self.border_size * 2
+          self.line_chart_outer_div_height = Math.floor(self.list_height / self.page_size)
+        }
+
+        self.watchWidthHeightTimer.count++
+      }, self.watchWidthHeightTimer.millisecond)
+    },
+    'watchSourceDataSetTimer.count' () { // 原始数据定时器监控
+      let timer = this.watchSourceDataSetTimer.timer
+      if (timer) {
+        clearTimeout(timer)
+        this.watchSourceDataSetTimer.timer = null
+      }
+
+      let self = this
+      self.watchSourceDataSetTimer.timer = setTimeout(function() {
+        // TODO：处理逻辑，之后用jsonp获取数据，获取完数据后更新，进行如下操作
+        // TODO：self.private_computeInternalDataSet(self.sourceDataSet.route, self.sourceDataSet.gps)
+        // TODO：self.normalPageMode.dataSet = self.internalDataSet
+        // TODO：self.pageDataSet = self.normalPageMode.currentPage
+        // TODO：以下数据是测试代码
+        self.sourceDataSet.route = TestData.lineRouteList
+        self.sourceDataSet.gps = TestData.lineGpsList
+        self.private_computeInternalDataSet(self.sourceDataSet.route, self.sourceDataSet.gps)
+        self.normalPageMode.dataSet = self.internalDataSet
+        self.pageDataSet = self.normalPageMode.currentPage
+        self.watchSourceDataSetTimer.count++
+      }, self.gps_data_refresh_minute * 60 * 1000)
+    },
+    'watchPageTimer.count' () { // 翻页数据定时器监控
+      let timer = this.watchPageTimer.timer
+      if (timer) {
+        clearTimeout(timer)
+        this.watchPageTimer.timer = null
+      }
+
+      let self = this
+      self.watchPageTimer.timer = setTimeout(function() {
+        if (self.pageable_mode === 'normal') {
+          self.pageDataSet = self.normalPageMode.next()
+        } else if (self.pageable_mode === 'scroll') {
+          throw new Error('滚动分页模式还未实现')
+        } else {
+          throw new Error('未知分页模式=' + self.pageable_mode)
+        }
+        self.watchPageTimer.count++
+      }, self.pageable_millisecond)
+    },
+    // ----------------- 数据属性 ---------------- //
+    page_size (val) {
+      let self = this
       if (self.editorMode === 'edit') {
-        self.watchWidthHeightTimer.timer = setTimeout(function () {
-          // 处理逻辑
-          let width = $jQuery(self.$el).width()
-          let height = $jQuery(self.$el).height()
+        if (self.pageable_mode === 'normal') {
+          self.normalPageMode.resetPageSize(val)
+          self.pageDataSet = self.normalPageMode.currentPage
+        } else if (self.pageable_mode === 'scroll') {
+          throw new Error('滚动分页模式还未实现')
+        } else {
+          throw new Error('未知分页模式=' + self.pageable_mode)
+        }
+      }
+      self.line_chart_outer_div_height = Math.floor(self.list_height / self.page_size)
+    },
+    // ----------------- 本身宽高 监控 ---------------- //
+    list_width () {
+      let self = this
+      self.line_chart_outer_div_width = self.list_width
+    },
+    list_height () {
+      let self = this
+      self.line_chart_outer_div_height = Math.floor(self.list_height / self.page_size)
+    },
+    // ----------------- 外层css属性 监控 ----------------- //
+    margin_left () {
+      let self = this
+      self.list_width = self.list_width - self.margin_left - self.margin_right - self.border_size * 2
+    },
+    margin_right () {
+      let self = this
+      self.list_width = self.list_width - self.margin_left - self.margin_right - self.border_size * 2
+    },
+    margin_top () {
+      let self = this
+      self.list_height = self.list_height - self.margin_top - self.margin_bottom - self.border_size * 2
+    },
+    margin_bottom () {
+      let self = this
+      self.list_height = self.list_height - self.margin_top - self.margin_bottom - self.border_size * 2
+    },
+    border_size () {
+      let self = this
+      self.list_width = self.list_width - self.margin_left - self.margin_right - self.border_size * 2
+      self.list_height = self.list_height - self.margin_top - self.margin_bottom - self.border_size * 2
+    }
+  },
+  methods: {
+    /**
+     * 创建内部数据（线路模拟图数据格式）。
+     * @param up 上行站点数据
+     * @param down 下行站点数据
+     * @return {*}
+     *  数据示例：
+     *  {
+     *   names: ["A起点站"], // 站点名字数组
+     *   ids: ["ACODE_0", "ACODE_1"], // 站点编码_上下行
+     *   type: 2, // 0：上行 1：下行 2：同名合并 3：异名合并
+     *   stationMark: "B" // 站点表识
+     *  }
+     * @private
+     */
+    private_createInternalData (up, down) {
+      if (up === null && down === null) {
+        return null
+      }
+      let [names, type, ids, mark] = [null, 2, null, null]
+      if (up === null) {
+        type = 1
+        names = [down.stationName]
+        ids = [down.stationCode + '_' + down.directions]
+        mark = down.stationMark
+      } else if (down === null) {
+        type = 0
+        names = [up.stationName]
+        ids = [up.stationCode + '_' + up.directions]
+        mark = up.stationMark
+      } else {
+        names = [up.stationName]
+        ids = [up.stationCode + '_' + up.directions, down.stationCode + '_' + down.directions]
+        mark = up.stationMark
+        if (up.stationName !== down.stationName) {
+          type = 3
+          names.push(down.stationName)
+        }
+      }
+      return {
+        names: names,
+        ids: ids,
+        type: type,
+        stationMark: mark
+      }
+    },
+    /**
+     * 计算内部总数据。
+     */
+    private_computeInternalDataSet (routeData, gpsData) {
+      let self = this
+
+      // 1、按照线路名字_线路编码分组数据
+      let routeGroupByLineNameCode = Utils.listGroupBy(routeData, function (d) {
+        return d.lineName + '_' + d.lineCode
+      })
+      let gpsGroupByLineNameCode = Utils.listGroupBy(gpsData, function (d) {
+        return d.lineName + '_' + d.lineCode
+      })
+      // 2、获取线路名字_线路编码列表（按照线路名字排序）
+      let lineNameCodeList = []
+      let routeGroupByLineNameCodeKeys = Object.keys(routeGroupByLineNameCode)
+      for (let key of routeGroupByLineNameCodeKeys) {
+        lineNameCodeList.push(key)
+      }
+      lineNameCodeList.sort(function (a, b) {
+        return a.localeCompare(b)
+      })
+      // 3、处理数据，循环计算每条线路的数据
+      if (lineNameCodeList.length === 0) {
+        return
+      } else {
+        self.internalDataSet = []
+      }
+      for (let key of lineNameCodeList) {
+        let lineName = key.split('_')[0]
+        let lineCode = key.split('_')[1]
-          if (width !== self.list_width) {
-            self.list_width = width - self.margin_left - self.margin_right - self.border_size * 2
-            self.line_chart_outer_div_width = self.list_width
+        // 3.1 定义内部数据
+        let internalData = {
+          lineName: lineName,
+          lineCode: lineCode,
+          route: [],
+          gps: []
+        }
+        // 3.2 处理路由数据
+        // 3.2.1 获取指定线路路由
+        let lineRoute = routeGroupByLineNameCode[key]
+        // 3.2.2 按照directions方向分组
+        let lineRouteGroupByDir = Utils.listGroupBy(lineRoute, function (d) {
+          return d.directions
+        })
+        // 3.2.3 排序分组，上行升序，下行降序（下行降序为了后面进行站点名合并）
+        try {
+          lineRouteGroupByDir[0].sort(function (a, b) {
+            return a.stationRouteCode - b.stationRouteCode
+          })
+          lineRouteGroupByDir[1].sort(function (a, b) {
+            return b.stationRouteCode - a.stationRouteCode
+          })
+        } catch (e) {
+          console.log('站定路由数据异常！')
+          console.log(e)
+        }
+
+        // TODO：如果是环线，lineRouteGroupByDir[1] = []
+        /**
+         * 3.2.4 核心合并算法。
+         */
+        let mergeRouteData = []
+        let dirUpData
+        let dirDownData
+        for (let i = 0; i < 888; i++) {
+          dirUpData = lineRouteGroupByDir[0][i]
+          dirDownData = lineRouteGroupByDir[1][i]
+          if (dirUpData != null && dirDownData != null && dirUpData.stationName !== dirDownData.stationName) {
+            // arr2 包含 a1
+            let ii = Utils.listIndexOf(lineRouteGroupByDir[1], dirUpData, 'stationName')
+            if (ii > i) {
+              Utils.insertNullToList(lineRouteGroupByDir[0], i, ii - i)
+              i -= 1
+              continue
+            }
+            // arr1 包含 a2
+            ii = Utils.listIndexOf(lineRouteGroupByDir[0], dirDownData, 'stationName')
+            if (ii > i) {
+              Utils.insertNullToList(lineRouteGroupByDir[1], i, ii - i)
+              i -= 1
+              continue
+            }
           }
-          if (height !== self.list_height) {
-            self.list_height = height - self.margin_top - self.margin_bottom - self.border_size * 2
-            self.line_chart_outer_div_height = self.list_height
+
+          if (dirUpData == null && dirDownData == null) {
+            break
           }
+          mergeRouteData.splice(i, 1, self.private_createInternalData(dirUpData, dirDownData))
+        }
+        internalData.route = mergeRouteData
-          self.watchWidthHeightTimer.count++
-        }, self.watchWidthHeightTimer.millisecond)
+        // 3.3 处理gps数据
+        if (gpsGroupByLineNameCode[key]) {
+          internalData.gps = gpsGroupByLineNameCode[key]
+        }
+        // 3.4 处理总数据集
+        self.internalDataSet.push(internalData)
       }
     }
   }
-  // methods () {}
 }
@@ -66,6 +66,18 @@ export default {
       label: 'line-chart-outer-div样式的div高度',
       visible: false
     }),
+    line_route_data_child: { // 作为子组件，父对象传值
+      type: Array,
+      default: function () {
+        return []
+      }
+    },
+    line_gps_data_child: { // 作为子组件，父对象传值
+      type: Array,
+      default: function () {
+        return []
+      }
+    },
     // 数据属性
     _flag_1_: PropTypes.string({ label: '', component: null, extra: function(h) {return (<hr data-label="数据属性" class="bsth-line-item-divider"></hr>)} }),
     line_name: PropTypes.string({ label: '线路名称', defaultValue: '线路1', layout: { prefixCls: 'bsth-line' } }),
@@ -155,11 +167,18 @@ export default {
     let $jQuery = this.private_jQuery
     this.line_width = $jQuery(this.$el).width() - this.margin_left - this.margin_right
     this.line_height = $jQuery(this.$el).height() - this.margin_top - this.margin_bottom
-
+    if (this.useMode === 'child') {
+      this.line_width = this.line_chart_outer_div_width - this.margin_left - this.margin_right
+      this.line_height = this.line_chart_outer_div_height - this.margin_top - this.margin_bottom
+    }
     // 测试数据
-    this.line_route_data = TestData.route_test_data
-    this.line_gps_data = TestData.gps_test_data
-
+    if (this.useMode === 'alone') {
+      this.line_route_data = TestData.route_test_data
+      this.line_gps_data = TestData.gps_test_data
+    } else {
+      this.line_route_data = this.line_route_data_child
+      this.line_gps_data = this.line_gps_data_child
+    }
     // 开启外部元素长宽监控计数
     /**
      * 开启外部元素长宽监控逻辑（class='line-chart-outer-div'）
@@ -211,16 +230,28 @@ export default {
      */
     line_chart_outer_div_width: function (val) {
       let self = this
-      if (this.useMode === 'child') {
+      if (self.useMode === 'child') {
         self.line_width = val - self.margin_left - self.margin_right
       }
     },
     line_chart_outer_div_height: function (val) {
       let self = this
-      if (this.useMode === 'child') {
+      if (self.useMode === 'child') {
         self.line_height = val - self.margin_top - self.margin_bottom
       }
     },
+    line_route_data_child: function (val) {
+      let self = this
+      if (self.useMode === 'child') {
+        self.line_route_data = val
+      }
+    },
+    line_gps_data_child: function (val) {
+      let self = this
+      if (self.useMode === 'child') {
+        self.line_gps_data = val
+      }
+    },
     // ----------- 数据属性 ----------- //
     line_route_data: function (currentVal, oldVal) {
       let self = this
@@ -50,5 +50,46 @@ export default {
     }
     return true;
+  },
+  /**
+   * 按照分组key值分组列表数组
+   * @param list 对象数组
+   * @param groupKeyFun 分组key函数（参数为列表数组中的每个元素）
+   */
+  listGroupBy (list, groupKeyFun) {
+    let rs = {}
+    for (let value of list) {
+      let key = groupKeyFun(value)
+      if (!rs[key]) {
+        rs[key] = []
+      }
+      rs[key].push(value)
+    }
+    return rs
+  },
+  /**
+   * 比较对象指定属性值第一次在数组对象中出现的位置。
+   * @param list 对象数组
+   * @param obj1 对象
+   * @param objProperty 对象属性名
+   */
+  listIndexOf (list, obj1, objProperty) {
+    for (let j = 0, len = list.length; j < len; j++) {
+      if (list[j] != null && obj1[objProperty] === list[j][objProperty]) {
+        return j
+      }
+    }
+    return -1
+  },
+  /**
+   * 在数组的指定位置插入指定数量的null。
+   * @param list 数组
+   * @param i 指定位置
+   * @param size null的数量
+   */
+  insertNullToList (list, i, size) {
+    for (let j = 0; j < size; j++) {
+      list.splice(j + i, 0, null)
+    }
   }
 }