电子站牌项目

1、修改bsth-line-chart-list-pageMode，添加ScrollPage滚动分页类 2、修改bsth-line-chart-list，添加滚动分页使用逻辑

电子站牌项目
1、修改bsth-line-chart-list-pageMode，添加ScrollPage滚动分页类 2、修改bsth-line-chart-list，添加滚动分页使用逻辑
徐烜
1 parent d49786f8
Showing 3 changed files with 256 additions and 27 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-chart.js
@@ -35,6 +35,11 @@ class NormalPage {
       this.page * this.pageSize,
       this.page * this.pageSize + this.pageSize)
   }
+
+  /**
+   * 重置页面大小
+   * @param val
+   */
   resetPageSize (val) {
     this.pageSize = val
     this.pageCount = Math.ceil(this.count / this.pageSize)
@@ -72,9 +77,159 @@ class NormalPage {
 /**
  * 滚动分页类。
+ * 内部根据数据集构造一个双向链表。
  */
 class ScrollPage {
-  // TODO：
+  /**
+   * 构造函数。
+   * @param pageSize 每页多少条记录
+   * @param result 总的记录列表（对象数组）
+   * @param valueFun 用于比较对象的值函数，参数result的每个对象，返回比较值表达式，如：return d.lineName + '_' + d.lineCode
+   */
+  constructor (pageSize, result, valueFun) {
+    this._pageSize = pageSize === 0 ? 1 : pageSize
+    this._dataSet = result
+    this._valueFun = valueFun
+
+    // -------------- 内部数据 -------------- //
+    this._dataCount = this._dataSet.length // 总记录数
+    this._cLinkedList = [] // 内部双向循环链表
+    this._pageCLinkedNode = null // 每页开头节点
+    this._currentPageDataSet = [] // 当前页数据
+
+    _ScrollPageRefreshInternal.call(this)
+  }
+  /**
+   * 重新设置数据集。
+   * @param result
+   */
+  set dataSet (result) {
+    this._dataSet = result
+    this._dataCount = this._dataSet.length
+    _ScrollPageRefreshInternal.call(this)
+  }
+  /**
+   * 获取当前页
+   * @return {*}
+   */
+  get currentPage () {
+    return this._currentPageDataSet
+  }
+  /**
+   * 重置页面大小
+   * @param pageSize
+   */
+  set pageSize (pageSize) {
+    this._pageSize = pageSize === 0 ? 1 : pageSize
+    this._currentPageDataSet = []
+    let count = Math.min(this._cLinkedList.length, this._pageSize)
+    let node = this._pageCLinkedNode
+    for (let i = 0; i < count; i++) {
+      this._currentPageDataSet.push(node.nodeDataObj)
+      node = node.nextNode
+    }
+  }
+
+  /**
+   * 向下滚动翻页（每次滚动1条记录）。
+   */
+  scrollDown () {
+    if (!this._pageCLinkedNode) {
+      return this._currentPageDataSet
+    }
+    this._pageCLinkedNode = this._pageCLinkedNode.preNode
+    this._currentPageDataSet = []
+    let count = Math.min(this._cLinkedList.length, this._pageSize)
+    let node = this._pageCLinkedNode
+    for (let i = 0; i < count; i++) {
+      this._currentPageDataSet.push(node.nodeDataObj)
+      node = node.nextNode
+    }
+    return this._currentPageDataSet
+  }
+
+  /**
+   * 向上滚动翻页（每次滚动1条记录）。
+   */
+  scrollUp () {
+    if (!this._pageCLinkedNode) {
+      return this._currentPageDataSet
+    }
+    this._pageCLinkedNode = this._pageCLinkedNode.nextNode
+    this._currentPageDataSet = []
+    let count = Math.min(this._cLinkedList.length, this._pageSize)
+    let node = this._pageCLinkedNode
+    for (let i = 0; i < count; i++) {
+      this._currentPageDataSet.push(node.nodeDataObj)
+      node = node.nextNode
+    }
+    return this._currentPageDataSet
+  }
+}
+
+/**
+ * ScrollPage私有方法，刷新内部数据
+ */
+function _ScrollPageRefreshInternal () {
+  // 1、构造循环双向链表
+  this._cLinkedList = []
+  for (let i = 0; i < this._dataCount; i++) {
+    let linkedListNode = { // 双向链表节点
+      preNode: null, // 上一个节点
+      nodeDataObj: this._dataSet[i], // 当前节点数据
+      nextNode: null // 下一个节点
+    }
+    this._cLinkedList.push(linkedListNode)
+  }
+  for (let i = 0; i < this._cLinkedList.length; i++) {
+    if (i === 0) { // 头节点
+      this._cLinkedList[0].preNode = this._cLinkedList[this._cLinkedList.length - 1]
+      if (this._cLinkedList.length === 1) {
+        this._cLinkedList[0].nextNode = this._cLinkedList[0]
+      } else {
+        this._cLinkedList[0].nextNode = this._cLinkedList[i + 1]
+      }
+    } else if (i === this._cLinkedList.length - 1) { // 尾节点
+      this._cLinkedList[this._cLinkedList.length - 1].nextNode = this._cLinkedList[0]
+      if (this._cLinkedList.length === 1) {
+        this._cLinkedList[this._cLinkedList.length - 1].preNode = this._cLinkedList[this._cLinkedList.length - 1]
+      } else {
+        this._cLinkedList[this._cLinkedList.length - 1].preNode = this._cLinkedList[i - 1]
+      }
+    } else { // 中间节点
+      this._cLinkedList[i].preNode = this._cLinkedList[i - 1]
+      this._cLinkedList[i].nextNode = this._cLinkedList[i + 1]
+    }
+  }
+  // 2、定位每页开头节点
+  if (this._cLinkedList.length === 0) { // 如果数据集为空，赋值null
+    this._pageCLinkedNode = null
+  } else if (!this._pageCLinkedNode) { // 如果数据集不为空，定位每页开头节点为空（初始化的时候），赋值第一个节点
+    this._pageCLinkedNode = this._cLinkedList[0]
+  } else { // 数据集不为空，定位每页开头节点不为空（重设数据集），使用valueFun比较得出新的位置节点，如没有找到，赋值第一个节点
+    for (let node of this._cLinkedList) {
+      if (this._valueFun(node.nodeDataObj) === this._valueFun(this._pageCLinkedNode.nodeDataObj)) {
+        this._pageCLinkedNode = node
+        break
+      }
+    }
+    if (!this._pageCLinkedNode) {
+      this._pageCLinkedNode = this._cLinkedList[0]
+    }
+  }
+
+  // 3、构造当前页数据
+  if (!this._pageCLinkedNode) {
+    this.currentPageDataSet = []
+  } else {
+    this._currentPageDataSet = []
+    let count = Math.min(this._cLinkedList.length, this._pageSize)
+    let node = this._pageCLinkedNode
+    for (let i = 0; i < count; i++) {
+      this._currentPageDataSet.push(node.nodeDataObj)
+      node = node.nextNode
+    }
+  }
 }
 export {
@@ -4,7 +4,7 @@
 import PropTypes from '@luban-h5/plugin-common-props'
 import Utils from 'core/plugins/bsth/bsth-utils'
-import { NormalPageClass } from 'core/plugins/bsth/bsth-line-chart-list-pageMode'
+import { NormalPageClass, ScrollPageClass } from 'core/plugins/bsth/bsth-line-chart-list-pageMode'
 import TestData from 'core/plugins/bsth/bsth-line-chart-list_testData'
 export default {
@@ -70,7 +70,7 @@ export default {
     // --------------- 数据属性 -------------- //
     _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_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属性 --------------- //
@@ -83,10 +83,12 @@ export default {
     background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
     // --------------- 内部线路模拟图外层css属性 --------------- //
     _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' } }),
-    line_chart_margin_bottom: PropTypes.number({ label: '图底部margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
+    line_chart_name_font_size: PropTypes.number({ label: '线路名称字体大小', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
+    line_chart_name_font_color: PropTypes.color({ label: '线路名称字体颜色', defaultValue: '#babdbd', layout: { prefixCls: 'bsth-line' } }),
+    line_chart_margin_left: PropTypes.number({ label: '图左边margin', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
+    line_chart_margin_right: PropTypes.number({ label: '图右边margin', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
+    line_chart_margin_top: PropTypes.number({ label: '图上边margin', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
+    line_chart_margin_bottom: PropTypes.number({ label: '图底部margin', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
     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属性 --------------- //
@@ -135,7 +137,37 @@ export default {
         line_route_data: data.route,
         line_gps_data: data.gps,
         line_name: data.lineName,
-        line_code: data.lineCode
+        line_code: data.lineCode,
+        // 内部线路模拟图外层css属性
+        line_name_font_size: this.line_chart_name_font_size,
+        line_name_font_color: this.line_chart_name_font_color,
+        margin_left: this.line_chart_margin_left,
+        margin_right: this.line_chart_margin_right,
+        margin_top: this.line_chart_margin_top,
+        margin_bottom: this.line_chart_margin_bottom,
+        border_size: this.line_chart_border_size,
+        background_color: this.line_chart_background_color,
+        // 内部线路模拟图内层css属性
+        chart_left_padding: this.chart_left_padding,
+        chart_right_padding: this.chart_right_padding,
+        chart_center_top_padding: this.chart_center_top_padding,
+        chart_station_name_max_size: this.chart_station_name_max_size,
+        chart_up_line_path_s_color: this.chart_up_line_path_s_color,
+        chart_down_line_path_s_color: this.chart_down_line_path_s_color,
+        chart_up_line_circle_f_color: this.chart_up_line_circle_f_color,
+        chart_down_line_circle_f_color: this.chart_down_line_circle_f_color,
+        chart_station_text_font_size: this.chart_station_text_font_size,
+        chart_up_station_text_font_f_color: this.chart_up_station_text_font_f_color,
+        chart_down_station_text_font_f_color: this.chart_down_station_text_font_f_color,
+        chart_up_down_station_text_font_f_color: this.chart_up_down_station_text_font_f_color,
+        chart_gps_up_rect_color: this.chart_gps_up_rect_color,
+        chart_gps_up_text_f_color: this.chart_gps_up_text_f_color,
+        chart_gps_down_rect_color: this.chart_gps_down_rect_color,
+        chart_gps_down_text_f_color: this.chart_gps_down_text_f_color,
+        chart_gps_up_merge_rect_color: this.chart_gps_up_merge_rect_color,
+        chart_gps_up_merge_text_f_color: this.chart_gps_up_merge_text_f_color,
+        chart_gps_down_merge_rect_color: this.chart_gps_down_merge_rect_color,
+        chart_gps_down_merge_text_f_color: this.chart_gps_down_merge_text_f_color
       })
     }
@@ -155,6 +187,34 @@ export default {
                   line_gps_data_child={item.line_gps_data}
                   line_name={item.line_name}
                   line_code={item.line_code}
+                  line_name_font_size={item.line_name_font_size}
+                  line_name_font_color={item.line_name_font_color}
+                  margin_left={item.margin_left}
+                  margin_right={item.margin_right}
+                  margin_top={item.margin_top}
+                  margin_bottom={item.margin_bottom}
+                  border_size={item.border_size}
+                  background_color={item.background_color}
+                  chart_left_padding={item.chart_left_padding}
+                  chart_right_padding={item.chart_right_padding}
+                  chart_center_top_padding={item.chart_center_top_padding}
+                  chart_station_name_max_size={item.chart_station_name_max_size}
+                  chart_up_line_path_s_color={item.chart_up_line_path_s_color}
+                  chart_down_line_path_s_color={item.chart_down_line_path_s_color}
+                  chart_up_line_circle_f_color={item.chart_up_line_circle_f_color}
+                  chart_down_line_circle_f_color={item.chart_down_line_circle_f_color}
+                  chart_station_text_font_size={item.chart_station_text_font_size}
+                  chart_up_station_text_font_f_color={item.chart_up_station_text_font_f_color}
+                  chart_down_station_text_font_f_color={item.chart_down_station_text_font_f_color}
+                  chart_up_down_station_text_font_f_color={item.chart_up_down_station_text_font_f_color}
+                  chart_gps_up_rect_color={item.chart_gps_up_rect_color}
+                  chart_gps_up_text_f_color={item.chart_gps_up_text_f_color}
+                  chart_gps_down_rect_color={item.chart_gps_down_rect_color}
+                  chart_gps_down_text_f_color={item.chart_gps_down_text_f_color}
+                  chart_gps_up_merge_rect_color={item.chart_gps_up_merge_rect_color}
+                  chart_gps_up_merge_text_f_color={item.chart_gps_up_merge_text_f_color}
+                  chart_gps_down_merge_rect_color={item.chart_gps_down_merge_rect_color}
+                  chart_gps_down_merge_text_f_color={item.chart_gps_down_merge_text_f_color}
                 />
               )
             })
@@ -179,16 +239,16 @@ export default {
     if (this.editorMode === 'edit') {
       this.watchWidthHeightTimer.count++
     }
-    // 开启原始数据监控计数（preview监控变化，edit模式下使用测试数据）
-    if (this.editorMode === 'preview') {
-      this.watchSourceDataSetTimer.count++
-    } else {
+    // 开启原始数据监控计数（edit模式下使用测试数据，其他情况下监控变化）
+    if (this.editorMode === 'edit') {
       this.sourceDataSet.route = TestData.lineRouteList
       this.sourceDataSet.gps = TestData.lineGpsList
       this.private_computeInternalDataSet(this.sourceDataSet.route, this.sourceDataSet.gps)
+    } else {
+      this.watchSourceDataSetTimer.count++
     }
-    // 开启翻页数据变化监控计数（preview监控变化）
-    if (this.editorMode === 'preview') {
+    // 开启翻页数据变化监控计数（非edit模式下都监控变化）
+    if (this.editorMode !== 'edit') {
       this.watchPageTimer.count++
     }
     // 定义分页处理器
@@ -196,7 +256,10 @@ export default {
       this.normalPageMode = new NormalPageClass(0, this.page_size, this.internalDataSet)
       this.pageDataSet = this.normalPageMode.next()
     } else if (this.pageable_mode === 'scroll') {
-      throw new Error('滚动分页模式还未实现')
+      this.scrollPageMode = new ScrollPageClass(this.page_size, this.internalDataSet, function (d) {
+        return d.lineName + '_' + d.lineCode
+      })
+      this.pageDataSet = this.scrollPageMode.currentPage
     } else {
       throw new Error('未知分页模式=' + this.pageable_mode)
     }
@@ -254,7 +317,7 @@ export default {
       }
       let self = this
-      self.watchSourceDataSetTimer.timer = setTimeout(function() {
+      self.watchSourceDataSetTimer.timer = setTimeout(function () {
         // TODO：处理逻辑，之后用jsonp获取数据，获取完数据后更新，进行如下操作
         // TODO：self.private_computeInternalDataSet(self.sourceDataSet.route, self.sourceDataSet.gps)
         // TODO：self.normalPageMode.dataSet = self.internalDataSet
@@ -263,8 +326,14 @@ export default {
         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
+        if (self.pageable_mode === 'normal') {
+          self.normalPageMode.dataSet = self.internalDataSet
+          self.pageDataSet = self.normalPageMode.currentPage
+        } else {
+          self.scrollPageMode.dataSet = self.internalDataSet
+          self.pageDataSet = self.scrollPageMode.currentPage
+        }
+
         self.watchSourceDataSetTimer.count++
       }, self.gps_data_refresh_minute * 60 * 1000)
     },
@@ -276,11 +345,11 @@ export default {
       }
       let self = this
-      self.watchPageTimer.timer = setTimeout(function() {
+      self.watchPageTimer.timer = setTimeout(function () {
         if (self.pageable_mode === 'normal') {
           self.pageDataSet = self.normalPageMode.next()
         } else if (self.pageable_mode === 'scroll') {
-          throw new Error('滚动分页模式还未实现')
+          self.pageDataSet = self.scrollPageMode.scrollUp()
         } else {
           throw new Error('未知分页模式=' + self.pageable_mode)
         }
@@ -290,12 +359,18 @@ export default {
     // ----------------- 数据属性 ---------------- //
     page_size (val) {
       let self = this
+      if (val <= 0) {
+        console.log('警告：每页大小必须大于0')
+        self.pageDataSet = []
+        return
+      }
       if (self.editorMode === 'edit') {
         if (self.pageable_mode === 'normal') {
           self.normalPageMode.resetPageSize(val)
           self.pageDataSet = self.normalPageMode.currentPage
         } else if (self.pageable_mode === 'scroll') {
-          throw new Error('滚动分页模式还未实现')
+          self.scrollPageMode.pageSize = val
+          self.pageDataSet = self.scrollPageMode.currentPage
         } else {
           throw new Error('未知分页模式=' + self.pageable_mode)
         }
@@ -79,11 +79,11 @@ export default {
       }
     },
     // 数据属性
-    _flag_1_: PropTypes.string({ label: '', component: null, extra: function(h) {return (<hr data-label="数据属性" class="bsth-line-item-divider"></hr>)} }),
+    _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' } }),
     line_code: PropTypes.string({ label: '线路代码', defaultValue: 'ACODE', 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"></hr>)} }),
+    _flag_2_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图外层css属性" class="bsth-line-item-divider"></hr>) } }),
     line_name_font_size: PropTypes.number({ label: '线路名称字体大小', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
     line_name_font_color: PropTypes.color({ label: '线路名称字体颜色', defaultValue: '#babdbd', layout: { prefixCls: 'bsth-line' } }),
     margin_left: PropTypes.number({ label: '图左边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
@@ -93,7 +93,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: function (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' } }),
@@ -171,11 +171,10 @@ export default {
       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
     }
-    // 测试数据
-    if (this.useMode === 'alone') {
+    if (this.useMode === 'alone') { // 单独使用，使用测试数据
       this.line_route_data = TestData.route_test_data
       this.line_gps_data = TestData.gps_test_data
-    } else {
+    } else { // 自组件使用，使用父组件传值
       this.line_route_data = this.line_route_data_child
       this.line_gps_data = this.line_gps_data_child
     }