徐烜 / bsth-ebus-h5_editor · Commits

Commit 946be975916772f34491a7cc0fa279da520dba7a

Authored by 徐烜
1 parent d49786f8

电子站牌项目 

1、修改bsth-line-chart-list-pageMode，添加ScrollPage滚动分页类
2、修改bsth-line-chart-list，添加滚动分页使用逻辑
Inline Side-by-side
Showing 3 changed files with 256 additions and 27 deletions
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart-list-pageMode.js
  View file @946be97
... ... @@ -35,6 +35,11 @@ class NormalPage {
35 35 this.page * this.pageSize,
36 36 this.page * this.pageSize + this.pageSize)
37 37 }
  38 +
  39 + /**
  40 + * 重置页面大小
  41 + * @param val
  42 + */
38 43 resetPageSize (val) {
39 44 this.pageSize = val
40 45 this.pageCount = Math.ceil(this.count / this.pageSize)
... ... @@ -72,9 +77,159 @@ class NormalPage {
72 77  
73 78 /**
74 79 * 滚动分页类。
  80 + * 内部根据数据集构造一个双向链表。
75 81 */
76 82 class ScrollPage {
77   - // TODO：
  83 + /**
  84 + * 构造函数。
  85 + * @param pageSize 每页多少条记录
  86 + * @param result 总的记录列表（对象数组）
  87 + * @param valueFun 用于比较对象的值函数，参数result的每个对象，返回比较值表达式，如：return d.lineName + '_' + d.lineCode
  88 + */
  89 + constructor (pageSize, result, valueFun) {
  90 + this._pageSize = pageSize === 0 ? 1 : pageSize
  91 + this._dataSet = result
  92 + this._valueFun = valueFun
  93 +
  94 + // -------------- 内部数据 -------------- //
  95 + this._dataCount = this._dataSet.length // 总记录数
  96 + this._cLinkedList = [] // 内部双向循环链表
  97 + this._pageCLinkedNode = null // 每页开头节点
  98 + this._currentPageDataSet = [] // 当前页数据
  99 +
  100 + _ScrollPageRefreshInternal.call(this)
  101 + }
  102 + /**
  103 + * 重新设置数据集。
  104 + * @param result
  105 + */
  106 + set dataSet (result) {
  107 + this._dataSet = result
  108 + this._dataCount = this._dataSet.length
  109 + _ScrollPageRefreshInternal.call(this)
  110 + }
  111 + /**
  112 + * 获取当前页
  113 + * @return {*}
  114 + */
  115 + get currentPage () {
  116 + return this._currentPageDataSet
  117 + }
  118 + /**
  119 + * 重置页面大小
  120 + * @param pageSize
  121 + */
  122 + set pageSize (pageSize) {
  123 + this._pageSize = pageSize === 0 ? 1 : pageSize
  124 + this._currentPageDataSet = []
  125 + let count = Math.min(this._cLinkedList.length, this._pageSize)
  126 + let node = this._pageCLinkedNode
  127 + for (let i = 0; i < count; i++) {
  128 + this._currentPageDataSet.push(node.nodeDataObj)
  129 + node = node.nextNode
  130 + }
  131 + }
  132 +
  133 + /**
  134 + * 向下滚动翻页（每次滚动1条记录）。
  135 + */
  136 + scrollDown () {
  137 + if (!this._pageCLinkedNode) {
  138 + return this._currentPageDataSet
  139 + }
  140 + this._pageCLinkedNode = this._pageCLinkedNode.preNode
  141 + this._currentPageDataSet = []
  142 + let count = Math.min(this._cLinkedList.length, this._pageSize)
  143 + let node = this._pageCLinkedNode
  144 + for (let i = 0; i < count; i++) {
  145 + this._currentPageDataSet.push(node.nodeDataObj)
  146 + node = node.nextNode
  147 + }
  148 + return this._currentPageDataSet
  149 + }
  150 +
  151 + /**
  152 + * 向上滚动翻页（每次滚动1条记录）。
  153 + */
  154 + scrollUp () {
  155 + if (!this._pageCLinkedNode) {
  156 + return this._currentPageDataSet
  157 + }
  158 + this._pageCLinkedNode = this._pageCLinkedNode.nextNode
  159 + this._currentPageDataSet = []
  160 + let count = Math.min(this._cLinkedList.length, this._pageSize)
  161 + let node = this._pageCLinkedNode
  162 + for (let i = 0; i < count; i++) {
  163 + this._currentPageDataSet.push(node.nodeDataObj)
  164 + node = node.nextNode
  165 + }
  166 + return this._currentPageDataSet
  167 + }
  168 +}
  169 +
  170 +/**
  171 + * ScrollPage私有方法，刷新内部数据
  172 + */
  173 +function _ScrollPageRefreshInternal () {
  174 + // 1、构造循环双向链表
  175 + this._cLinkedList = []
  176 + for (let i = 0; i < this._dataCount; i++) {
  177 + let linkedListNode = { // 双向链表节点
  178 + preNode: null, // 上一个节点
  179 + nodeDataObj: this._dataSet[i], // 当前节点数据
  180 + nextNode: null // 下一个节点
  181 + }
  182 + this._cLinkedList.push(linkedListNode)
  183 + }
  184 + for (let i = 0; i < this._cLinkedList.length; i++) {
  185 + if (i === 0) { // 头节点
  186 + this._cLinkedList[0].preNode = this._cLinkedList[this._cLinkedList.length - 1]
  187 + if (this._cLinkedList.length === 1) {
  188 + this._cLinkedList[0].nextNode = this._cLinkedList[0]
  189 + } else {
  190 + this._cLinkedList[0].nextNode = this._cLinkedList[i + 1]
  191 + }
  192 + } else if (i === this._cLinkedList.length - 1) { // 尾节点
  193 + this._cLinkedList[this._cLinkedList.length - 1].nextNode = this._cLinkedList[0]
  194 + if (this._cLinkedList.length === 1) {
  195 + this._cLinkedList[this._cLinkedList.length - 1].preNode = this._cLinkedList[this._cLinkedList.length - 1]
  196 + } else {
  197 + this._cLinkedList[this._cLinkedList.length - 1].preNode = this._cLinkedList[i - 1]
  198 + }
  199 + } else { // 中间节点
  200 + this._cLinkedList[i].preNode = this._cLinkedList[i - 1]
  201 + this._cLinkedList[i].nextNode = this._cLinkedList[i + 1]
  202 + }
  203 + }
  204 + // 2、定位每页开头节点
  205 + if (this._cLinkedList.length === 0) { // 如果数据集为空，赋值null
  206 + this._pageCLinkedNode = null
  207 + } else if (!this._pageCLinkedNode) { // 如果数据集不为空，定位每页开头节点为空（初始化的时候），赋值第一个节点
  208 + this._pageCLinkedNode = this._cLinkedList[0]
  209 + } else { // 数据集不为空，定位每页开头节点不为空（重设数据集），使用valueFun比较得出新的位置节点，如没有找到，赋值第一个节点
  210 + for (let node of this._cLinkedList) {
  211 + if (this._valueFun(node.nodeDataObj) === this._valueFun(this._pageCLinkedNode.nodeDataObj)) {
  212 + this._pageCLinkedNode = node
  213 + break
  214 + }
  215 + }
  216 + if (!this._pageCLinkedNode) {
  217 + this._pageCLinkedNode = this._cLinkedList[0]
  218 + }
  219 + }
  220 +
  221 + // 3、构造当前页数据
  222 + if (!this._pageCLinkedNode) {
  223 + this.currentPageDataSet = []
  224 + } else {
  225 + this._currentPageDataSet = []
  226 + let count = Math.min(this._cLinkedList.length, this._pageSize)
  227 + let node = this._pageCLinkedNode
  228 + for (let i = 0; i < count; i++) {
  229 + this._currentPageDataSet.push(node.nodeDataObj)
  230 + node = node.nextNode
  231 + }
  232 + }
78 233 }
79 234  
80 235 export {
... ...
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart-list.js
  View file @946be97
... ... @@ -4,7 +4,7 @@
4 4 import PropTypes from '@luban-h5/plugin-common-props'
5 5  
6 6 import Utils from 'core/plugins/bsth/bsth-utils'
7   -import { NormalPageClass } from 'core/plugins/bsth/bsth-line-chart-list-pageMode'
  7 +import { NormalPageClass, ScrollPageClass } from 'core/plugins/bsth/bsth-line-chart-list-pageMode'
8 8 import TestData from 'core/plugins/bsth/bsth-line-chart-list_testData'
9 9  
10 10 export default {
... ... @@ -70,7 +70,7 @@ export default {
70 70 // --------------- 数据属性 -------------- //
71 71 _flag_1_: PropTypes.string({ label: '', component: null, extra (h) { return (<hr data-label='数据属性' class='bsth-line-item-divider'/>) } }),
72 72 page_size: PropTypes.number({ label: '每页显示线路图数量', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
73   - pageable_mode: PropTypes.select({ label: '分页模式', defaultValue: 'normal', options: [{ label: '一般翻页', value: 'normal' }, { label: '滚动翻页', value: 'scroll' }], layout: { prefixCls: 'bsth-line' } }),
  73 + pageable_mode: PropTypes.select({ label: '分页模式', defaultValue: 'normal', options: [{ label: '左右翻页', value: 'normal' }, { label: '滚动翻页', value: 'scroll' }], layout: { prefixCls: 'bsth-line' } }),
74 74 pageable_millisecond: PropTypes.number({ label: '自动翻页间隔（毫秒）', defaultValue: 2000, layout: { prefixCls: 'bsth-line' } }),
75 75 gps_data_refresh_minute: PropTypes.number({ label: 'gps数据刷新间隔（分钟）', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
76 76 // --------------- 外层css属性 --------------- //
... ... @@ -83,10 +83,12 @@ export default {
83 83 background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
84 84 // --------------- 内部线路模拟图外层css属性 --------------- //
85 85 _flag_3_: PropTypes.string({ label: '', component: null, extra (h) { return (<hr data-label='内部线路模拟图外层css属性' class='bsth-line-item-divider'></hr>) } }),
86   - line_chart_margin_left: PropTypes.number({ label: '图左边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
87   - line_chart_margin_right: PropTypes.number({ label: '图右边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
88   - line_chart_margin_top: PropTypes.number({ label: '图上边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
89   - line_chart_margin_bottom: PropTypes.number({ label: '图底部margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
  86 + line_chart_name_font_size: PropTypes.number({ label: '线路名称字体大小', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
  87 + line_chart_name_font_color: PropTypes.color({ label: '线路名称字体颜色', defaultValue: '#babdbd', layout: { prefixCls: 'bsth-line' } }),
  88 + line_chart_margin_left: PropTypes.number({ label: '图左边margin', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
  89 + line_chart_margin_right: PropTypes.number({ label: '图右边margin', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
  90 + line_chart_margin_top: PropTypes.number({ label: '图上边margin', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
  91 + line_chart_margin_bottom: PropTypes.number({ label: '图底部margin', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
90 92 line_chart_border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
91 93 line_chart_background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
92 94 // --------------- 内部线路模拟图内层css属性 --------------- //
... ... @@ -135,7 +137,37 @@ export default {
135 137 line_route_data: data.route,
136 138 line_gps_data: data.gps,
137 139 line_name: data.lineName,
138   - line_code: data.lineCode
  140 + line_code: data.lineCode,
  141 + // 内部线路模拟图外层css属性
  142 + line_name_font_size: this.line_chart_name_font_size,
  143 + line_name_font_color: this.line_chart_name_font_color,
  144 + margin_left: this.line_chart_margin_left,
  145 + margin_right: this.line_chart_margin_right,
  146 + margin_top: this.line_chart_margin_top,
  147 + margin_bottom: this.line_chart_margin_bottom,
  148 + border_size: this.line_chart_border_size,
  149 + background_color: this.line_chart_background_color,
  150 + // 内部线路模拟图内层css属性
  151 + chart_left_padding: this.chart_left_padding,
  152 + chart_right_padding: this.chart_right_padding,
  153 + chart_center_top_padding: this.chart_center_top_padding,
  154 + chart_station_name_max_size: this.chart_station_name_max_size,
  155 + chart_up_line_path_s_color: this.chart_up_line_path_s_color,
  156 + chart_down_line_path_s_color: this.chart_down_line_path_s_color,
  157 + chart_up_line_circle_f_color: this.chart_up_line_circle_f_color,
  158 + chart_down_line_circle_f_color: this.chart_down_line_circle_f_color,
  159 + chart_station_text_font_size: this.chart_station_text_font_size,
  160 + chart_up_station_text_font_f_color: this.chart_up_station_text_font_f_color,
  161 + chart_down_station_text_font_f_color: this.chart_down_station_text_font_f_color,
  162 + chart_up_down_station_text_font_f_color: this.chart_up_down_station_text_font_f_color,
  163 + chart_gps_up_rect_color: this.chart_gps_up_rect_color,
  164 + chart_gps_up_text_f_color: this.chart_gps_up_text_f_color,
  165 + chart_gps_down_rect_color: this.chart_gps_down_rect_color,
  166 + chart_gps_down_text_f_color: this.chart_gps_down_text_f_color,
  167 + chart_gps_up_merge_rect_color: this.chart_gps_up_merge_rect_color,
  168 + chart_gps_up_merge_text_f_color: this.chart_gps_up_merge_text_f_color,
  169 + chart_gps_down_merge_rect_color: this.chart_gps_down_merge_rect_color,
  170 + chart_gps_down_merge_text_f_color: this.chart_gps_down_merge_text_f_color
139 171 })
140 172 }
141 173  
... ... @@ -155,6 +187,34 @@ export default {
155 187 line_gps_data_child={item.line_gps_data}
156 188 line_name={item.line_name}
157 189 line_code={item.line_code}
  190 + line_name_font_size={item.line_name_font_size}
  191 + line_name_font_color={item.line_name_font_color}
  192 + margin_left={item.margin_left}
  193 + margin_right={item.margin_right}
  194 + margin_top={item.margin_top}
  195 + margin_bottom={item.margin_bottom}
  196 + border_size={item.border_size}
  197 + background_color={item.background_color}
  198 + chart_left_padding={item.chart_left_padding}
  199 + chart_right_padding={item.chart_right_padding}
  200 + chart_center_top_padding={item.chart_center_top_padding}
  201 + chart_station_name_max_size={item.chart_station_name_max_size}
  202 + chart_up_line_path_s_color={item.chart_up_line_path_s_color}
  203 + chart_down_line_path_s_color={item.chart_down_line_path_s_color}
  204 + chart_up_line_circle_f_color={item.chart_up_line_circle_f_color}
  205 + chart_down_line_circle_f_color={item.chart_down_line_circle_f_color}
  206 + chart_station_text_font_size={item.chart_station_text_font_size}
  207 + chart_up_station_text_font_f_color={item.chart_up_station_text_font_f_color}
  208 + chart_down_station_text_font_f_color={item.chart_down_station_text_font_f_color}
  209 + chart_up_down_station_text_font_f_color={item.chart_up_down_station_text_font_f_color}
  210 + chart_gps_up_rect_color={item.chart_gps_up_rect_color}
  211 + chart_gps_up_text_f_color={item.chart_gps_up_text_f_color}
  212 + chart_gps_down_rect_color={item.chart_gps_down_rect_color}
  213 + chart_gps_down_text_f_color={item.chart_gps_down_text_f_color}
  214 + chart_gps_up_merge_rect_color={item.chart_gps_up_merge_rect_color}
  215 + chart_gps_up_merge_text_f_color={item.chart_gps_up_merge_text_f_color}
  216 + chart_gps_down_merge_rect_color={item.chart_gps_down_merge_rect_color}
  217 + chart_gps_down_merge_text_f_color={item.chart_gps_down_merge_text_f_color}
158 218 />
159 219 )
160 220 })
... ... @@ -179,16 +239,16 @@ export default {
179 239 if (this.editorMode === 'edit') {
180 240 this.watchWidthHeightTimer.count++
181 241 }
182   - // 开启原始数据监控计数（preview监控变化，edit模式下使用测试数据）
183   - if (this.editorMode === 'preview') {
184   - this.watchSourceDataSetTimer.count++
185   - } else {
  242 + // 开启原始数据监控计数（edit模式下使用测试数据，其他情况下监控变化）
  243 + if (this.editorMode === 'edit') {
186 244 this.sourceDataSet.route = TestData.lineRouteList
187 245 this.sourceDataSet.gps = TestData.lineGpsList
188 246 this.private_computeInternalDataSet(this.sourceDataSet.route, this.sourceDataSet.gps)
  247 + } else {
  248 + this.watchSourceDataSetTimer.count++
189 249 }
190   - // 开启翻页数据变化监控计数（preview监控变化）
191   - if (this.editorMode === 'preview') {
  250 + // 开启翻页数据变化监控计数（非edit模式下都监控变化）
  251 + if (this.editorMode !== 'edit') {
192 252 this.watchPageTimer.count++
193 253 }
194 254 // 定义分页处理器
... ... @@ -196,7 +256,10 @@ export default {
196 256 this.normalPageMode = new NormalPageClass(0, this.page_size, this.internalDataSet)
197 257 this.pageDataSet = this.normalPageMode.next()
198 258 } else if (this.pageable_mode === 'scroll') {
199   - throw new Error('滚动分页模式还未实现')
  259 + this.scrollPageMode = new ScrollPageClass(this.page_size, this.internalDataSet, function (d) {
  260 + return d.lineName + '_' + d.lineCode
  261 + })
  262 + this.pageDataSet = this.scrollPageMode.currentPage
200 263 } else {
201 264 throw new Error('未知分页模式=' + this.pageable_mode)
202 265 }
... ... @@ -254,7 +317,7 @@ export default {
254 317 }
255 318  
256 319 let self = this
257   - self.watchSourceDataSetTimer.timer = setTimeout(function() {
  320 + self.watchSourceDataSetTimer.timer = setTimeout(function () {
258 321 // TODO：处理逻辑，之后用jsonp获取数据，获取完数据后更新，进行如下操作
259 322 // TODO：self.private_computeInternalDataSet(self.sourceDataSet.route, self.sourceDataSet.gps)
260 323 // TODO：self.normalPageMode.dataSet = self.internalDataSet
... ... @@ -263,8 +326,14 @@ export default {
263 326 self.sourceDataSet.route = TestData.lineRouteList
264 327 self.sourceDataSet.gps = TestData.lineGpsList
265 328 self.private_computeInternalDataSet(self.sourceDataSet.route, self.sourceDataSet.gps)
266   - self.normalPageMode.dataSet = self.internalDataSet
267   - self.pageDataSet = self.normalPageMode.currentPage
  329 + if (self.pageable_mode === 'normal') {
  330 + self.normalPageMode.dataSet = self.internalDataSet
  331 + self.pageDataSet = self.normalPageMode.currentPage
  332 + } else {
  333 + self.scrollPageMode.dataSet = self.internalDataSet
  334 + self.pageDataSet = self.scrollPageMode.currentPage
  335 + }
  336 +
268 337 self.watchSourceDataSetTimer.count++
269 338 }, self.gps_data_refresh_minute * 60 * 1000)
270 339 },
... ... @@ -276,11 +345,11 @@ export default {
276 345 }
277 346  
278 347 let self = this
279   - self.watchPageTimer.timer = setTimeout(function() {
  348 + self.watchPageTimer.timer = setTimeout(function () {
280 349 if (self.pageable_mode === 'normal') {
281 350 self.pageDataSet = self.normalPageMode.next()
282 351 } else if (self.pageable_mode === 'scroll') {
283   - throw new Error('滚动分页模式还未实现')
  352 + self.pageDataSet = self.scrollPageMode.scrollUp()
284 353 } else {
285 354 throw new Error('未知分页模式=' + self.pageable_mode)
286 355 }
... ... @@ -290,12 +359,18 @@ export default {
290 359 // ----------------- 数据属性 ---------------- //
291 360 page_size (val) {
292 361 let self = this
  362 + if (val <= 0) {
  363 + console.log('警告：每页大小必须大于0')
  364 + self.pageDataSet = []
  365 + return
  366 + }
293 367 if (self.editorMode === 'edit') {
294 368 if (self.pageable_mode === 'normal') {
295 369 self.normalPageMode.resetPageSize(val)
296 370 self.pageDataSet = self.normalPageMode.currentPage
297 371 } else if (self.pageable_mode === 'scroll') {
298   - throw new Error('滚动分页模式还未实现')
  372 + self.scrollPageMode.pageSize = val
  373 + self.pageDataSet = self.scrollPageMode.currentPage
299 374 } else {
300 375 throw new Error('未知分页模式=' + self.pageable_mode)
301 376 }
... ...
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart.js
  View file @946be97
... ... @@ -79,11 +79,11 @@ export default {
79 79 }
80 80 },
81 81 // 数据属性
82   - _flag_1_: PropTypes.string({ label: '', component: null, extra: function(h) {return (<hr data-label="数据属性" class="bsth-line-item-divider"></hr>)} }),
  82 + _flag_1_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="数据属性" class="bsth-line-item-divider"></hr>) } }),
83 83 line_name: PropTypes.string({ label: '线路名称', defaultValue: '线路1', layout: { prefixCls: 'bsth-line' } }),
84 84 line_code: PropTypes.string({ label: '线路代码', defaultValue: 'ACODE', layout: { prefixCls: 'bsth-line' } }),
85 85 // 图外层css
86   - _flag_2_: PropTypes.string({ label: '', component: null, extra: function(h) {return (<hr data-label="图外层css属性" class="bsth-line-item-divider"></hr>)} }),
  86 + _flag_2_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图外层css属性" class="bsth-line-item-divider"></hr>) } }),
87 87 line_name_font_size: PropTypes.number({ label: '线路名称字体大小', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
88 88 line_name_font_color: PropTypes.color({ label: '线路名称字体颜色', defaultValue: '#babdbd', layout: { prefixCls: 'bsth-line' } }),
89 89 margin_left: PropTypes.number({ label: '图左边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
... ... @@ -93,7 +93,7 @@ export default {
93 93 border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
94 94 background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
95 95 // 图内层css
96   - _flag_3_: PropTypes.string({ label: '', component: null, extra: function(h) {return (<hr data-label="图内层css属性" class="bsth-line-item-divider"></hr>)} }),
  96 + _flag_3_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层css属性" class="bsth-line-item-divider"></hr>) } }),
97 97 chart_left_padding: PropTypes.number({ label: '内部线路图距离左边padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
98 98 chart_right_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
99 99 chart_center_top_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 4, layout: { prefixCls: 'bsth-line' } }),
... ... @@ -171,11 +171,10 @@ export default {
171 171 this.line_width = this.line_chart_outer_div_width - this.margin_left - this.margin_right
172 172 this.line_height = this.line_chart_outer_div_height - this.margin_top - this.margin_bottom
173 173 }
174   - // 测试数据
175   - if (this.useMode === 'alone') {
  174 + if (this.useMode === 'alone') { // 单独使用，使用测试数据
176 175 this.line_route_data = TestData.route_test_data
177 176 this.line_gps_data = TestData.gps_test_data
178   - } else {
  177 + } else { // 自组件使用，使用父组件传值
179 178 this.line_route_data = this.line_route_data_child
180 179 this.line_gps_data = this.line_gps_data_child
181 180 }
... ...