闵行公交电子站牌页面组件化

1、新建mggj/list目录，添加mhgj-eBusStop-line-chart-list相关组件

闵行公交电子站牌页面组件化
1、新建mggj/list目录，添加mhgj-eBusStop-line-chart-list相关组件
徐烜
1 parent 7e7c73ce
Showing 9 changed files with 1743 additions and 148 deletions
front-end/h5/src/components/core/plugins/bsth/lggj/list/models/eBusStop-line-chart-list-scrollPage-innerData.js
front-end/h5/src/components/core/plugins/bsth/mhgj/chart/css/mhgj-eBusStop-line-chart.css
front-end/h5/src/components/core/plugins/bsth/mhgj/chart/mhgj-eBusStop-line-chart.js
front-end/h5/src/components/core/plugins/bsth/mhgj/chart/models/MhgjEBusStopLineChartData.js → front-end/h5/src/components/core/plugins/bsth/mhgj/chart/models/mhgjEBusStopLineChartData.js
front-end/h5/src/components/core/plugins/bsth/mhgj/list/css/mhgj-eBusStop-line-chart-list.css
front-end/h5/src/components/core/plugins/bsth/mhgj/list/mhgj-eBusStop-line-chart-list-scrollPage.js
front-end/h5/src/components/core/plugins/bsth/mhgj/list/mhgj-eBusStop-line-chart-list.js
front-end/h5/src/components/core/plugins/bsth/mhgj/list/models/mhgj-eBusStop-line-chart-list-scrollPage-innerData.js
front-end/h5/src/components/core/plugins/index.js
@@ -34,6 +34,10 @@ class EBusStopLineChartListScrollPageInnerDataItem {
     return this._height
   }
+  get top () {
+    return this._cssTop
+  }
+
   /**
    * 使用类本身对象创建。
    * @param dataItem EBusStopLineChartListScrollPageInnerDataItem
@@ -68,7 +68,7 @@ svg.mhgj-eBusStop-line-chart g.part g.content1Bound text.content1 {
     text-shadow: 0 0 2px #dadada;
     Pointer-events: none;
 }
-svg.mhgj-eBusStop-line-chart g.part g.content1Bound {
+svg.mhgj-eBusStop-line-chart g.part g.content2Bound {
 }
 svg.mhgj-eBusStop-line-chart g.part g.content2Bound text.content2 {
     font-size: 28px;
@@ -135,6 +135,39 @@ svg.mhgj-eBusStop-line-chart g.part g.content6Bound text.content6_right {
     Pointer-events: none;
 }
+svg.mhgj-eBusStop-line-chart g.part g.content7Bound1 {
+}
+svg.mhgj-eBusStop-line-chart g.part g.content7Bound1 text.content7_1_left {
+    font-size: 80px;
+    font-weight: bold;
+    fill: #cd2a40;
+    letter-spacing: -.2px;
+    text-shadow: 0 0 2px #dadada;
+    Pointer-events: none;
+}
+svg.mhgj-eBusStop-line-chart g.part g.content7Bound text.content7_1_right {
+    font-size: 20px;
+    letter-spacing: -.2px;
+    text-shadow: 0 0 2px #dadada;
+    Pointer-events: none;
+}
+svg.mhgj-eBusStop-line-chart g.part g.content7Bound2 {
+}
+svg.mhgj-eBusStop-line-chart g.part g.content7Bound2 text.content7_2_left {
+    font-size: 80px;
+    font-weight: bold;
+    fill: #cd2a40;
+    letter-spacing: -.2px;
+    text-shadow: 0 0 2px #dadada;
+    Pointer-events: none;
+}
+svg.mhgj-eBusStop-line-chart g.part g.content7Bound2 text.content7_2_right {
+    font-size: 20px;
+    letter-spacing: -.2px;
+    text-shadow: 0 0 2px #dadada;
+    Pointer-events: none;
+}
+
 /** part3用 */
 svg.mhgj-eBusStop-line-chart g.part g.contentAllBound {
 }
@@ -9,7 +9,7 @@ import &#39;./css/mhgj-eBusStop-line-chart.css&#39;
 import CarIcon from './svgicon/car.svg'
 import Utils from 'core/plugins/bsth/bsth-utils'
-import { MhgjEBusStopLineChartData } from 'core/plugins/bsth/mhgj/chart/models/MhgjEBusStopLineChartData'
+import { MhgjEBusStopLineChartData } from 'core/plugins/bsth/mhgj/chart/models/mhgjEBusStopLineChartData'
 export default {
   extra: {
@@ -105,21 +105,23 @@ export default {
     _flag_3_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层线路信息css属性" class="bsth-line-item-divider"></hr>) } }),
     part1_background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
     part1_border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
+    part1_line_icon_width: PropTypes.number({ label: '线路图标宽度', defaultValue: 50, layout: { prefixCls: 'bsth-line' } }),
+    part1_line_icon_height: PropTypes.number({ label: '线路图标高度', defaultValue: 50, layout: { prefixCls: 'bsth-line' } }),
     part1_line_name_font_size: PropTypes.number({ label: '线路名称字体大小', defaultValue: 60, layout: { prefixCls: 'bsth-line' } }),
     part1_line_name_font_color: PropTypes.color({ label: '线路名称字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
     part1_terminal_stop_font_size: PropTypes.number({ label: '开往站点字体大小', defaultValue: 28, layout: { prefixCls: 'bsth-line' } }),
     part1_terminal_stop_font_color: PropTypes.color({ label: '开往站点字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
     _flag_4_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层本班车信息css属性" class="bsth-line-item-divider"></hr>) } }),
     part2_background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
-    part2_border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
+    part2_border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
     part2_title1_font_size: PropTypes.number({ label: '标题1字体大小', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
     part2_title1_font_color: PropTypes.color({ label: '标题1字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
     part2_title1_background_color: PropTypes.color({ label: '标题1背景颜色', defaultValue: '#acd48e', layout: { prefixCls: 'bsth-line' } }),
     part2_title2_font_size: PropTypes.number({ label: '标题2字体大小', defaultValue: 28, layout: { prefixCls: 'bsth-line' } }),
     part2_title2_font_color: PropTypes.color({ label: '标题2字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
     part2_title2_background_color: PropTypes.color({ label: '标题2背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
-    part2_arrival_time_font_size: PropTypes.number({ label: '到达时间字体大小', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
-    part2_arrival_time_font_color: PropTypes.color({ label: '到达时间字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    part2_arrival_time_font_size: PropTypes.number({ label: '到达时间字体大小', defaultValue: 60, layout: { prefixCls: 'bsth-line' } }),
+    part2_arrival_time_font_color: PropTypes.color({ label: '到达时间字体颜色', defaultValue: '#cd2a40', layout: { prefixCls: 'bsth-line' } }),
     part2_arrival_time_minutes_left_font_size: PropTypes.number({ label: '到达时间(分钟)左边字体大小', defaultValue: 80, layout: { prefixCls: 'bsth-line' } }),
     part2_arrival_time_minutes_left_font_color: PropTypes.color({ label: '到达时间(分钟)左边字体颜色', defaultValue: '#cd2a40', layout: { prefixCls: 'bsth-line' } }),
     part2_arrival_time_minutes_right_font_size: PropTypes.number({ label: '到达时间(分钟)右边字体大小', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
@@ -130,14 +132,14 @@ export default {
     part2_from_stops_right_font_color: PropTypes.color({ label: '距离本站(几站)右边字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
     _flag_5_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层下一班车信息css属性" class="bsth-line-item-divider"></hr>) } }),
     part3_background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
-    part3_border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
+    part3_border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
     part3_title1_font_size: PropTypes.number({ label: '标题1字体大小', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
     part3_title1_font_color: PropTypes.color({ label: '标题1字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
     part3_title1_background_color: PropTypes.color({ label: '标题1背景颜色', defaultValue: '#7dc6fe', layout: { prefixCls: 'bsth-line' } }),
     part3_title2_font_size: PropTypes.number({ label: '标题2字体大小', defaultValue: 28, layout: { prefixCls: 'bsth-line' } }),
     part3_title2_font_color: PropTypes.color({ label: '标题2字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } }),
     part3_title2_background_color: PropTypes.color({ label: '标题2背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
-    part3_arrival_time_font_size: PropTypes.number({ label: '到达时间字体大小', defaultValue: 80, layout: { prefixCls: 'bsth-line' } }),
+    part3_arrival_time_font_size: PropTypes.number({ label: '到达时间字体大小', defaultValue: 60, layout: { prefixCls: 'bsth-line' } }),
     part3_arrival_time_font_color: PropTypes.color({ label: '到达时间字体颜色', defaultValue: '#000000', layout: { prefixCls: 'bsth-line' } })
   },
@@ -264,21 +266,21 @@ export default {
         self.component_height = val - self.margin_top - self.margin_bottom
       }
     },
-    eBusStopData_child: function (val) {
-      let self = this
-      if (self.useMode === 'child') {
-        self.eBusStopData_child = val
-      }
-    },
     //------------- data方法中绑定的数据监控 --------------------//
     // ----------- 数据属性 ----------- //
-    eBusStopData: function (currentVal, oldVal) {
-      let self = this
-      if (!Utils.objectEquals(currentVal, oldVal)) {
+    eBusStopData: { // 使用deep检测所有属性变化
+      handler (currentVal, oldVal) {
+        let self = this
+        // TODO：这里objectEquals有点问题，暂时不用了
+        // if (!Utils.objectEquals(currentVal, oldVal)) {
+        //   self.refreshSvg()
+        // }
         self.refreshSvg()
-      }
+      },
+      deep: true
     },
+
     // ------------ 本身宽高 ----------- //
     component_width () {
       let self = this
@@ -326,117 +328,223 @@ export default {
     //---------- 图内层css监控 --------//
     // part1 线路信息，对应_flag_3_属性集合
-    part1_background_color () {
-      let self = this;
-      // TODO：
+    part1_background_color (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(1) rect.main')
+        .style('fill', val)
     },
-    part1_border_size () {
-      let self = this;
-      // TODO：
+    part1_border_size (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(1) rect.main')
+        .style('stroke-width', val)
     },
-    part1_line_name_font_size () {
-      let self = this;
-      // TODO：
+    part1_line_icon_width () {
+      let self = this
+      self.refreshSvg()
     },
-    part1_line_name_font_color () {
-      let self = this;
-      // TODO：
+    part1_line_icon_height () {
+      let self = this
+      self.refreshSvg()
     },
-    part1_terminal_stop_font_size () {
-      let self = this;
-      // TODO：
+    part1_line_name_font_size (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(1) g.titleBound text.title')
+        .style('font-size', val)
     },
-    part1_terminal_stop_font_color () {
-      let self = this;
-      // TODO：
+    part1_line_name_font_color (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(1) g.titleBound text.title')
+        .style('fill', val)
+    },
+    part1_terminal_stop_font_size (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(1) g.content1Bound text.content1')
+        .style('font-size', val)
+      svg.selectAll('g.part:nth-child(1) g.content2Bound text.content2')
+        .style('font-size', val)
+    },
+    part1_terminal_stop_font_color (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(1) g.content1Bound text.content1')
+        .style('fill', val)
+      svg.selectAll('g.part:nth-child(1) g.content2Bound text.content2')
+        .style('fill', val)
     },
     // part2 本班车信息，对应_flag_4属性集合
-    part2_background_color () {
-      // TODO：
+    part2_background_color (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(2) rect.main')
+        .style('fill', val)
     },
-    part2_border_size () {
-      // TODO：
+    part2_border_size (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(2) rect.main')
+        .style('stroke-width', val)
     },
-    part2_title1_font_size () {
-      // TODO：
+    part2_title1_font_size (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(2) g.titleBound text.title')
+        .style('font-size', val)
     },
-    part2_title1_font_color () {
-      // TODO：
+    part2_title1_font_color (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(2) g.titleBound text.title')
+        .style('fill', val)
     },
-    part2_title1_background_color () {
-      // TODO：
+    part2_title1_background_color (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(2) rect.titleBackground')
+        .style('fill', val)
     },
-    part2_title2_font_size () {
-      // TODO：
+    part2_title2_font_size (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(2) g.content3Bound text.content3')
+        .style('font-size', val)
+      svg.selectAll('g.part:nth-child(2) g.content4Bound text.content4')
+        .style('font-size', val)
     },
-    part2_title2_font_color () {
-      // TODO：
+    part2_title2_font_color (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(2) g.content3Bound text.content3')
+        .style('fill', val)
+      svg.selectAll('g.part:nth-child(2) g.content4Bound text.content4')
+        .style('fill', val)
     },
     part2_title2_background_color () {
       // TODO：
     },
-    part2_arrival_time_font_size () {
-      // TODO：
+    part2_arrival_time_font_size (val) {
+      let showType = this.eBusStopData.showType
+      if (showType === 0 || showType === 2) {
+        let svg = this.private_svg
+        svg.selectAll('g.part:nth-child(2) g.content5Bound text.content5_left')
+          .style('font-size', val)
+      }
     },
-    part2_arrival_time_font_color () {
-      // TODO：
+    part2_arrival_time_font_color (val) {
+      let showType = this.eBusStopData.showType
+      if (showType === 0 || showType === 2) {
+        let svg = this.private_svg
+        svg.selectAll('g.part:nth-child(2) g.content5Bound text.content5_left')
+          .style('fill', val)
+      }
     },
-    part2_arrival_time_minutes_left_font_size () {
-      // TODO：
+    part2_arrival_time_minutes_left_font_size (val) {
+      let svg = this.private_svg
+      let showType = this.eBusStopData.showType
+      if (showType === 1 || showType === 3) {
+        svg.selectAll('g.part:nth-child(2) g.content5Bound text.content5_left')
+          .style('font-size', val)
+      }
+
+      // part3不存在时添加
+      svg.selectAll('g.part:nth-child(2) g.content7Bound2 text.content7_2_left')
+        .style('font-size', val)
     },
-    part2_arrival_time_minutes_left_font_color () {
-      // TODO：
+    part2_arrival_time_minutes_left_font_color (val) {
+      let svg = this.private_svg
+      let showType = this.eBusStopData.showType
+      if (showType === 1 || showType === 3) {
+        svg.selectAll('g.part:nth-child(2) g.content5Bound text.content5_left')
+          .style('fill', val)
+      }
+
+      // part3不存在时添加
+      svg.selectAll('g.part:nth-child(2) g.content7Bound2 text.content7_2_left')
+        .style('fill', val)
     },
-    part2_arrival_time_minutes_right_font_size () {
-      // TODO：
+    part2_arrival_time_minutes_right_font_size (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(2) g.content5Bound text.content5_right')
+        .style('font-size', val)
+      svg.selectAll('g.part:nth-child(2) g.content7Bound2 text.content7_2_right')
+        .style('font-size', val)
     },
-    part2_arrival_time_minutes_right_font_color () {
-      // TODO：
+    part2_arrival_time_minutes_right_font_color (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(2) g.content5Bound text.content5_right')
+        .style('fill', val)
+      svg.selectAll('g.part:nth-child(2) g.content7Bound2 text.content7_2_right')
+        .style('fill', val)
     },
-    part2_from_stops_left_font_size () {
-      // TODO：
+    part2_from_stops_left_font_size (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(2) g.content6Bound text.content6_left')
+        .style('font-size', val)
+      svg.selectAll('g.part:nth-child(2) g.content7Bound1 text.content7_1_left')
+        .style('font-size', val)
     },
-    part2_from_stops_left_font_color () {
-      // TODO：
+    part2_from_stops_left_font_color (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(2) g.content6Bound text.content6_left')
+        .style('fill', val)
+      svg.selectAll('g.part:nth-child(2) g.content7Bound1 text.content7_1_left')
+        .style('fill', val)
     },
-    part2_from_stops_right_font_size () {
-      // TODO：
+    part2_from_stops_right_font_size (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(2) g.content6Bound text.content6_right')
+        .style('font-size', val)
+      svg.selectAll('g.part:nth-child(2) g.content7Bound1 text.content7_1_right')
+        .style('font-size', val)
     },
-    part2_from_stops_right_font_color () {
-      // TODO：
+    part2_from_stops_right_font_color (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(2) g.content6Bound text.content6_right')
+        .style('fill', val)
+      svg.selectAll('g.part:nth-child(2) g.content7Bound1 text.content7_1_right')
+        .style('fill', val)
     },
     // part3 下一班车信息，对应_flag_5_属性集合
-    part3_background_color () {
-      // TODO：
+    part3_background_color (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(3) rect.main')
+        .style('fill', val)
     },
-    part3_border_size () {
-      // TODO：
+    part3_border_size (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(3) rect.main')
+        .style('stroke-width', val)
     },
-    part3_title1_font_size () {
-      // TODO：
+    part3_title1_font_size (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(3) g.titleBound text.title')
+        .style('font-size', val)
     },
-    part3_title1_font_color () {
-      // TODO：
+    part3_title1_font_color (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(3) g.titleBound text.title')
+        .style('fill', val)
     },
-    part3_title1_background_color () {
-      // TODO：
+    part3_title1_background_color (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(3) rect.titleBackground')
+        .style('fill', val)
     },
-    part3_title2_font_size () {
-      // TODO：
+    part3_title2_font_size (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(3) g.contentAllBound text.content')
+        .style('font-size', val)
     },
-    part3_title2_font_color () {
-      // TODO：
+    part3_title2_font_color (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(3) g.contentAllBound text.content')
+        .style('fill', val)
     },
     part3_title2_background_color () {
       // TODO：
     },
-    part3_arrival_time_font_size () {
-      // TODO：
+    part3_arrival_time_font_size (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(3) g.contentAllBound text.arrivalTime')
+        .style('font-size', val)
     },
-    part3_arrival_time_font_color () {
-      // TODO：
+    part3_arrival_time_font_color (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.part:nth-child(3) g.contentAllBound text.arrivalTime')
+        .style('fill', val)
     }
   },
@@ -450,22 +558,35 @@ export default {
     // 刷新svg数据，对应_flag_3_，_flag_4_，_flag_5_属性集合
     refreshSvg () {
+      // console.log('refreshsvg')
+
       let self = this
       let d3 = self.private_d3
       let svg = self.private_svg
       let width = self.svg_width
       let height = self.svg_height
+
+      let svgData = self.eBusStopData.generateSvgData()
+      let showType = self.eBusStopData.showType
+
+      // console.log(svgData)
+
+      // ------------ 0、前置计算准备 --------------//
+      // part上下左右，之间的间隔
       let partUpPadding = 10
       let partDownPadding = 10
       let partLeftPadding = 10
       let partRightPadding = 10
       let partBetweenPadding = 5
-      let svgData = self.eBusStopData.generateSvgData()
-      let showType = self.eBusStopData.showType
+      // part上部放置title的rect的高度
+      let partTitleRectHeight = 48
+
+      // 计算三个part的宽度（宽度相同）
+      let partWidth = Math.floor((width - partLeftPadding - partRightPadding - partBetweenPadding * 2) / 3)
+      let partHeight = height - partUpPadding - partDownPadding
-      // ------------ 0、前置计算准备 --------------//
       // 创建x轴比例尺
       let xScale = d3.scaleLinear()
         .domain([0, 3]) // 定义域
@@ -473,9 +594,6 @@ export default {
       let yScale = d3.scaleLinear()
         .domain([0, 1]) // 定义域
         .range([partUpPadding, height - partDownPadding]) // 值域
-      // 计算三个part的宽度（宽度相同）
-      let partWidth = Math.floor((width - partLeftPadding - partRightPadding - partBetweenPadding * 2) / 3)
-      let partHeight = height - partUpPadding - partDownPadding
       // ------------ 1、添加g元素 ----------------//
       let itemsUpdate = svg.selectAll('g.part')
@@ -514,17 +632,42 @@ export default {
           return `translate(${x}, ${y})`
         })
-      // ------------ 2、添加part的上半部分 ----------------//
+      // ------------ 2、添加各个part的上半部分 ----------------//
+      // ------------- 2-1、添加每个part最外部的rect（以下）------------//
       itemsEnter.append('rect')
         .classed('main', true)
-        .attr('stroke-dasharray', function (d, i) {
+        .style('fill', function (d, i) {
           if (i === 0) {
-            return null
+            return self.part1_background_color
+          } else if (i === 1) {
+            return self.part2_background_color
+          } else if (i === 2) {
+            return self.part3_background_color
+          } else {
+            return '#FFFFFF'
+          }
+        })
+        .style('stroke-width', function (d, i) {
+          if (i === 0) { // part1没有边框
+            return self.part1_border_size
+          } else if (i === 1) {
+            return self.part2_border_size
+          } else if (i === 2) {
+            return self.part3_border_size
           } else {
+            return 0
+          }
+        })
+        .attr('stroke-dasharray', function (d, i) {
+          if (i === 0) { // part1没有边框
+            return null
+          } else { // part2、part3的边框样式为虚线
             return "4,2"
           }
         })
         .attr('width', function (d, i) {
+          // 三个part都存在，同宽度，part3不存在时，part2占用2个宽度
+          // 宽度计算参考 0、前置计算准备
           if (i === 1 ) { // part2
             if (showType === 0 || showType === 1) {
               return partWidth
@@ -539,13 +682,6 @@ export default {
         })
         .attr('height', partHeight + 'px')
       itemsUpdate.select('rect.main')
-        .attr('stroke-dasharray', function (d, i) {
-          if (i === 0) {
-            return null
-          } else {
-            return "4,2"
-          }
-        })
         .attr('width', function (d, i) {
           if (i === 1 ) { // part2
             if (showType === 0 || showType === 1) {
@@ -560,7 +696,9 @@ export default {
           }
         })
         .attr('height', partHeight + 'px')
+      // ------------- 2-1、添加每个part最外部的rect（以上）------------//
+      // ------------- 2-1、添加每个part上部放置title的外部rect（以下）------------//
       itemsEnter.append('rect')
         .classed('titleBackground', true)
         .attr('width', function (d, i) {
@@ -577,10 +715,10 @@ export default {
           }
         })
         .attr('height', function (d, i) {
-          if (i === 0) {
+          if (i === 0) { // part1的title外部不需要rect
             return 0
           } else {
-            return 48
+            return partTitleRectHeight
           }
         })
         .style('fill', function (d, i) {
@@ -608,24 +746,22 @@ export default {
             return partWidth - 2
           }
         })
+      // ------------- 2-1、添加每个part上部放置title的外部rect（以上）------------//
+      // ------------- 2-2、添加每个part上部title（以下）------------//
       itemsEnter.append('g')
         .classed('titleBound', true)
         .attr('transform', 'translate(10, 10)')
-      itemsUpdate.select('g.titleBound')
-        .attr('transform', function (d, i) {
-
-        })
-      itemsEnter.select('g.titleBound')
+      itemsEnter.select('g.titleBound') // 添加part1上部分title中的图标
         .select(function (d, i) {return i === 0 ? this : null})
         .append('image')
         .classed('carIcon', true)
-        .attr('x', 0) // 指定x位置，TODO：之后这个属性可能需要可编辑
-        .attr('y', 15) // 指定y位置，TODO：之后这个属性可能需要可编辑
+        .attr('x', 0)
+        .attr('y', 0)
         .attr('href', CarIcon)
-        .attr('width', 50) // 指定宽度，TODO：之后这个属性可能需要可编辑
-        .attr('height', 50) // 指定高度，TODO：之后这个属性可能需要可编辑
-      itemsEnter.select('g.titleBound')
+        .attr('width', self.part1_line_icon_width) // 指定宽度
+        .attr('height', self.part1_line_icon_height) // 指定高度
+      itemsEnter.select('g.titleBound') // 添加所有part上部分title中的text
         .append('text')
         .classed('title', true)
         .text(function (d, i) {
@@ -659,27 +795,65 @@ export default {
         })
         .attr('x', function (d, i) {
           if (i === 0) {
-            return 60
+            return self.part1_line_icon_width + 10
           } else {
             return 0
           }
         })
         .attr('y', function (d, i) {
-          return this.getBBox().height - 10
+          if (i === 0) {
+            let icon_bounds = svg.select('image.carIcon').node().getBBox();
+            let text_bounds = this.getBBox();
+            let temp = (text_bounds.height - icon_bounds.height) / 2
+            if (temp > 0) {
+              return icon_bounds.height - temp + 5
+            } else {
+              return text_bounds.height
+            }
+
+          } else {
+            return 0
+          }
+        })
+      itemsUpdate.select('g.titleBound image.carIcon')
+        .attr('width', self.part1_line_icon_width) // 指定宽度
+        .attr('height', self.part1_line_icon_height) // 指定高度
+      itemsUpdate.select('g.titleBound text.title')
+        .attr('x', function (d, i) {
+          if (i === 0) {
+            return self.part1_line_icon_width + 10
+          } else {
+            return 0
+          }
+        })
+        .attr('y', function (d, i) {
+          if (i === 0) {
+            let icon_bounds = svg.select('image.carIcon').node().getBBox();
+            let text_bounds = this.getBBox();
+            let temp = (text_bounds.height - icon_bounds.height) / 2
+            if (temp > 0) {
+              return icon_bounds.height - temp + 5
+            } else {
+              return text_bounds.height
+            }
+
+          } else {
+            return 0
+          }
         })
       itemsUpdate.select('g.titleBound')
         .attr('transform', function (d, i) {
-          let g_part_bounds = svg.select('g.part:nth-child(' + (i + 1) +')').node().getBBox()
+          let rect_bounds = svg.select('g.part:nth-child(' + (i + 1) +') rect.main').node().getBBox()
           let title_bounds = this.getBBox()
           let dx = 1
           let dy = 1
-          if (i === 0) {
-            dx = (g_part_bounds.width - title_bounds.width) / 2 - title_bounds.x
-            dy = (g_part_bounds.height / 2 - title_bounds.height) / 2 - title_bounds.y
-          } else {
-            dx = (g_part_bounds.width - title_bounds.width) / 2 - title_bounds.x
-            dy = (48 - title_bounds.height) / 2 - title_bounds.y
+          if (i === 0) { // part1标题部分相对于rect.main的上半部分居中
+            dx = (rect_bounds.width - title_bounds.width) / 2 - title_bounds.x
+            dy = (rect_bounds.height / 2 - title_bounds.height) / 2 - title_bounds.y
+          } else { // part2，part3标题部分相对于rect.main的partTitleRectHeight高度居中
+            dx = (rect_bounds.width - title_bounds.width) / 2 - title_bounds.x
+            dy = (partTitleRectHeight - title_bounds.height) / 2 - title_bounds.y
           }
           if (dx < 0) {
             dx = 1
@@ -689,6 +863,7 @@ export default {
           }
           return `translate(${dx}, ${dy})`
         })
+      // ------------- 2-2、添加每个part上部title（以上）------------//
       // ------------ 3、添加part的下半部分 ----------------//
       // ------------ 3-1、part1部分 -------------//
@@ -711,12 +886,12 @@ export default {
         .style('fill', self.part1_terminal_stop_font_color)
       itemsUpdate.select('g.content1Bound')
         .attr('transform', function (d, i) {
-          if (i === 0) {
+          if (i === 0) { // 相对于rect.main的下半部分的上二分之一居中（其中-5表示向上偏离5）
             let rect_part1_bounds = svg.select('rect.main:nth-child(1)').node().getBBox()
             let g_content1_bounds = this.getBBox()
             let dx = (rect_part1_bounds.width - g_content1_bounds.width) / 2 - g_content1_bounds.x
             let dy = (rect_part1_bounds.height / 4 - g_content1_bounds.height) - g_content1_bounds.y
-              + rect_part1_bounds.height / 2
+              + rect_part1_bounds.height / 2 - 5
             if (dx < 0) {
               dx = 1
             }
@@ -746,7 +921,7 @@ export default {
         .style('fill', self.part1_terminal_stop_font_color)
       itemsUpdate.select('g.content2Bound')
         .attr('transform', function (d, i) {
-          if (i === 0) {
+          if (i === 0) { // 相对于rect.main的下半部分的下二分之一居中
             let rect_part1_bounds = svg.select('rect.main:nth-child(1)').node().getBBox()
             let g_content1_bounds = this.getBBox()
             let dx = (rect_part1_bounds.width - g_content1_bounds.width) / 2 - g_content1_bounds.x
@@ -762,27 +937,29 @@ export default {
           }
         })
-
       // ------------ 3-2、part2部分 -------------//
+      // ------------ 3-2-1、当part3存在时，part2中间纵向添加一条虚线（以下）---------- //
       let boundLineFun = d3.line()
       itemsEnter.select(function (d, i) {
-        return i === 1 ? this : null
+        return i === 1 && (showType === 0 || showType === 1) ? this : null
       }).append('path')
         .classed('bound', true)
-        .attr('d', function (d) {
+        .attr('d', function () {
           return boundLineFun([
-            [partWidth / 2, 48],
+            [partWidth / 2, partTitleRectHeight],
             [partWidth / 2, partHeight]
           ])
         })
       itemsUpdate.select('path.bound')
-        .attr('d', function (d) {
+        .attr('d', function () {
           return boundLineFun([
-            [partWidth / 2, 48],
+            [partWidth / 2, partTitleRectHeight],
             [partWidth / 2, partHeight]
           ])
         })
+      // ------------ 3-2-1、当part3存在时，part2中间纵向添加一条虚线（以上）---------- //
+      // ------------ 3-2-2、当part3存在时，part2纵向中间左侧添加内容标题（以下）----------- //
       itemsEnter.select(function (d, i) {
         return i === 1 ? this : null
       }).append('g')
@@ -801,11 +978,11 @@ export default {
         .style('fill', self.part2_title2_font_color)
       itemsUpdate.select('g.content3Bound')
         .attr('transform', function (d, i) {
-          if (i === 1) {
+          if (i === 1) { // x方向居中对齐，y方向顶部对齐
             let rect_part2_bounds = d3.select(this.parentNode).select('rect.main').node().getBBox()
             let g_bounds = this.getBBox()
             let dx = (rect_part2_bounds.width / 2 - g_bounds.width) / 2 - g_bounds.x
-            let dy = 48 - g_bounds.y
+            let dy = partTitleRectHeight - g_bounds.y
             if (dx < 0) {
               dx = 1
             }
@@ -815,7 +992,9 @@ export default {
             return `translate(${dx}, ${dy})`
           }
         })
+      // ------------ 3-2-2、当part3存在时，part2纵向中间左侧添加内容标题（以上）----------- //
+      // ------------ 3-2-3、当part3存在时，part2纵向中间右侧添加内容标题（以下）----------- //
       itemsEnter.select(function (d, i) {
         return i === 1 ? this : null
       }).append('g')
@@ -834,7 +1013,7 @@ export default {
         .style('fill', self.part2_title2_font_color)
       itemsUpdate.select('g.content4Bound')
         .attr('transform', function (d, i) {
-          if (i === 1) {
+          if (i === 1) { // x方向居中对齐，y方向顶部对齐
             let rect_part2_bounds = d3.select(this.parentNode).select('rect.main').node().getBBox()
             let g_bounds = this.getBBox()
             let dx = (rect_part2_bounds.width / 2 - g_bounds.width) / 2 - g_bounds.x
@@ -849,7 +1028,9 @@ export default {
             return `translate(${dx},${dy})`
           }
         })
+      // ------------ 3-2-3、当part3存在时，part2纵向中间右侧添加内容标题（以上）----------- //
+      // ------------ 3-2-3、当part3存在时，part2纵向中间左侧添加内容（以下）----------- //
       itemsEnter.select(function (d, i) {
         return i === 1 ? this : null
       }).append('g')
@@ -859,21 +1040,86 @@ export default {
         .append('text')
         .classed('content5_left', true)
         .text(function (d) {
-          return d.currentArrivalMinutes_left
+          if (showType === 0) {
+            return d.currentArrivalTime
+          } else if (showType === 1) {
+            return d.currentArrivalMinutes_left
+          } else if (showType === 2) {
+            return d.currentArrivalTime
+          } else if (showType === 3) {
+            return d.currentFromMinutes_left
+          } else {
+            return "todo"
+          }
+
         })
         .attr('title', function (d) {
-          return d.currentArrivalMinutes_left
+          if (showType === 0) {
+            return d.currentArrivalTime
+          } else if (showType === 1) {
+            return d.currentArrivalMinutes_left
+          } else if (showType === 2) {
+            return d.currentArrivalTime
+          } else if (showType === 3) {
+            return d.currentFromMinutes_left
+          } else {
+            return "todo"
+          }
+        })
+        .style('font-size', function () {
+          if (showType === 0) {
+            return self.part2_arrival_time_font_size
+          } else if (showType === 1) {
+            return self.part2_arrival_time_minutes_left_font_size
+          } else if (showType === 2) {
+            return self.part2_arrival_time_font_size
+          } else if (showType === 3) {
+            return self.part2_arrival_time_minutes_left_font_size
+          } else {
+            return self.part2_arrival_time_font_size
+          }
+        })
+        .style('fill', function () {
+          if (showType === 0) {
+            return self.part2_arrival_time_font_color
+          } else if (showType === 1) {
+            return self.part2_arrival_time_minutes_left_font_color
+          } else if (showType === 2) {
+            return self.part2_arrival_time_font_color
+          } else if (showType === 3) {
+            return self.part2_arrival_time_minutes_left_font_color
+          } else {
+            return self.part2_arrival_time_font_color
+          }
         })
-        .style('font-size', self.part2_arrival_time_minutes_left_font_size)
-        .style('fill', self.part2_arrival_time_minutes_left_font_color)
       itemsEnter.select('g.content5Bound')
         .append('text')
         .classed('content5_right', true)
         .text(function (d) {
-          return d.currentArrivalMinutes_right
+          if (showType === 0) {
+            return ""
+          } else if (showType === 1) {
+            return d.currentArrivalMinutes_right
+          } else if (showType === 2) {
+            return ""
+          } else if (showType === 3) {
+            return d.currentFromMinutes_right
+          } else {
+            return "todo"
+          }
         })
         .attr('title', function (d) {
-          return d.currentArrivalMinutes_right
+          if (showType === 0) {
+            return ""
+          } else if (showType === 1) {
+            return d.currentArrivalMinutes_right
+          } else if (showType === 2) {
+            return ""
+          } else if (showType === 3) {
+            return d.currentFromMinutes_right
+          } else {
+            return "todo"
+          }
         })
         .style('font-size', self.part2_arrival_time_minutes_right_font_size)
         .style('fill', self.part2_arrival_time_minutes_right_font_color)
@@ -881,6 +1127,70 @@ export default {
           let left_bound = svg.select('text.content5_left').node().getBBox()
           return left_bound.width + 2
         })
+
+      itemsUpdate.select(function (d, i) {
+        return i === 1 ? this : null
+      }).select('g.content5Bound text.content5_left')
+        .text(function (d) {
+          if (showType === 0) {
+            return d.currentArrivalTime
+          } else if (showType === 1) {
+            return d.currentArrivalMinutes_left
+          } else if (showType === 2) {
+            return d.currentArrivalTime
+          } else if (showType === 3) {
+            return d.currentFromMinutes_left
+          } else {
+            return "todo"
+          }
+
+        })
+        .attr('title', function (d) {
+          if (showType === 0) {
+            return d.currentArrivalTime
+          } else if (showType === 1) {
+            return d.currentArrivalMinutes_left
+          } else if (showType === 2) {
+            return d.currentArrivalTime
+          } else if (showType === 3) {
+            return d.currentFromMinutes_left
+          } else {
+            return "todo"
+          }
+        })
+      itemsUpdate.select(function (d, i) {
+        return i === 1 ? this : null
+      }).select('g.content5Bound text.content5_right')
+        .text(function (d) {
+          if (showType === 0) {
+            return ""
+          } else if (showType === 1) {
+            return d.currentArrivalMinutes_right
+          } else if (showType === 2) {
+            return ""
+          } else if (showType === 3) {
+            return d.currentFromMinutes_right
+          } else {
+            return "todo"
+          }
+        })
+        .attr('title', function (d) {
+          if (showType === 0) {
+            return ""
+          } else if (showType === 1) {
+            return d.currentArrivalMinutes_right
+          } else if (showType === 2) {
+            return ""
+          } else if (showType === 3) {
+            return d.currentFromMinutes_right
+          } else {
+            return "todo"
+          }
+        })
+        .attr('x', function () {
+          let left_bound = svg.select('text.content5_left').node().getBBox()
+          return left_bound.width + 2
+        })
       itemsUpdate.select('g.content5Bound')
         .attr('transform', function (d, i) {
           if (i === 1) {
@@ -898,9 +1208,11 @@ export default {
             return `translate(${dx}, ${dy})`
           }
         })
+      // ------------ 3-2-3、当part3存在时，part2纵向中间左侧添加内容（以上）----------- //
+      // ------------ 3-2-4、当part3存在时，part2纵向中间右侧添加内容（以下）----------- //
       itemsEnter.select(function (d, i) {
-        return i === 1 ? this : null
+        return i === 1 && (showType === 0 || showType === 1 || showType === 3) ? this : null
       }).append('g')
         .classed('content6Bound', true)
         .attr('transform', 'translate(10, 10)')
@@ -908,10 +1220,18 @@ export default {
         .append('text')
         .classed('content6_left', true)
         .text(function (d) {
-          return d.currentFromStations_left
+          if (showType === 3) {
+            return d.currentFromStations
+          } else {
+            return d.currentFromStations_left
+          }
         })
         .attr('title', function (d) {
-          return d.currentFromStations_left
+          if (showType === 3) {
+            return d.currentFromStations
+          } else {
+            return d.currentFromStations_left
+          }
         })
         .style('font-size', self.part2_from_stops_left_font_size)
         .style('fill', self.part2_from_stops_left_font_color)
@@ -919,10 +1239,18 @@ export default {
         .append('text')
         .classed('content6_right', true)
         .text(function (d) {
-          return d.currentFromStations_right
+          if (showType === 3) {
+            return ""
+          } else {
+            return d.currentFromStations_right
+          }
         })
         .attr('title', function (d) {
-          return d.currentFromStations_right
+          if (showType === 3) {
+            return ""
+          } else {
+            return d.currentFromStations_right
+          }
         })
         .style('font-size', self.part2_from_stops_right_font_size)
         .style('fill', self.part2_from_stops_right_font_color)
@@ -930,6 +1258,45 @@ export default {
           let left_bound = svg.select('text.content6_left').node().getBBox()
           return left_bound.width + 2
         })
+
+      itemsUpdate.select(function (d, i) {
+        return i === 1 && (showType === 0 || showType === 1 || showType === 3) ? this : null
+      }).select('g.content6Bound text.content6_left')
+        .text(function (d) {
+          if (showType === 3) {
+            return d.currentFromStations
+          } else {
+            return d.currentFromStations_left
+          }
+        })
+        .attr('title', function (d) {
+          if (showType === 3) {
+            return d.currentFromStations
+          } else {
+            return d.currentFromStations_left
+          }
+        })
+      itemsUpdate.select(function (d, i) {
+        return i === 1 && (showType === 0 || showType === 1 || showType === 3) ? this : null
+      }).select('g.content6Bound text.content6_right')
+        .text(function (d) {
+          if (showType === 3) {
+            return ""
+          } else {
+            return d.currentFromStations_right
+          }
+        })
+        .attr('title', function (d) {
+          if (showType === 3) {
+            return ""
+          } else {
+            return d.currentFromStations_right
+          }
+        })
+        .attr('x', function () {
+          let left_bound = svg.select('text.content6_left').node().getBBox()
+          return left_bound.width + 2
+        })
       itemsUpdate.select('g.content6Bound')
         .attr('transform', function (d, i) {
           if (i === 1) {
@@ -948,6 +1315,155 @@ export default {
             return `translate(${dx}, ${dy})`
           }
         })
+      // ------------ 3-2-4、当part3存在时，part2纵向中间右侧添加内容（以上）----------- //
+
+      // ------------ 3-2-5、当part3不存在时，part2添加内容（以下）----------- //
+      itemsEnter.select(function (d, i) {
+        return i === 1 && showType === 2 ? this : null
+      }).append('g')
+        .classed('content7Bound1', true)
+        .attr('transform', 'translate(10, 10)')
+      itemsEnter.select('g.content7Bound1')
+        .append('text')
+        .classed('content7_1_left', true)
+        .text(function (d) {
+          return d.currentFromStations_left
+        })
+        .attr('title', function (d) {
+          return d.currentFromStations_left
+        })
+        .style('font-size', self.part2_from_stops_left_font_size)
+        .style('fill', self.part2_from_stops_left_font_color)
+      itemsEnter.select('g.content7Bound1')
+        .append('text')
+        .classed('content7_1_right', true)
+        .text(function (d) {
+          return d.currentFromStations_right
+        })
+        .attr('title', function (d) {
+          return d.currentFromStations_right
+        })
+        .style('font-size', self.part2_from_stops_right_font_size)
+        .style('fill', self.part2_from_stops_right_font_color)
+        .attr('x', function () {
+          let left_bound = svg.select('text.content7_1_left').node().getBBox()
+          return left_bound.width + 2
+        })
+
+      itemsUpdate.select(function (d, i) {
+        return i === 1 && showType === 2 ? this : null
+      }).select('g.content7Bound1 text.content7_1_left')
+        .text(function (d) {
+          return d.currentFromStations_left
+        })
+        .attr('title', function (d) {
+          return d.currentFromStations_left
+        })
+      itemsUpdate.select(function (d, i) {
+        return i === 1 && showType === 2 ? this : null
+      }).select('g.content7Bound1 text.content7_1_right')
+        .text(function (d) {
+          return d.currentFromStations_right
+        })
+        .attr('title', function (d) {
+          return d.currentFromStations_right
+        })
+        .attr('x', function () {
+          let left_bound = svg.select('text.content7_1_left').node().getBBox()
+          return left_bound.width + 2
+        })
+      itemsUpdate.select('g.content7Bound1')
+        .attr('transform', function (d, i) {
+          if (i === 1) {
+            let rect_part2_bounds = d3.select(this.parentNode).select('rect.main').node().getBBox()
+            let g_bounds = this.getBBox()
+            let dx = (rect_part2_bounds.width / 4 - g_bounds.width) / 2 - g_bounds.x
+              + rect_part2_bounds.width / 2
+            let dy = (rect_part2_bounds.height / 2 - g_bounds.height) / 2 - g_bounds.y
+              + rect_part2_bounds.height / 2
+            if (dx < 0) {
+              dx = 1
+            }
+            if (dy < 0) {
+              dy = 1
+            }
+            return `translate(${dx}, ${dy})`
+          }
+        })
+
+      itemsEnter.select(function (d, i) {
+        return i === 1 && showType === 2 ? this : null
+      }).append('g')
+        .classed('content7Bound2', true)
+        .attr('transform', 'translate(10, 10)')
+      itemsEnter.select('g.content7Bound2')
+        .append('text')
+        .classed('content7_2_left', true)
+        .text(function (d) {
+          return d.currentFromMinutes_left
+        })
+        .attr('title', function (d) {
+          return d.currentFromMinutes_left
+        })
+        .style('font-size', self.part2_arrival_time_minutes_left_font_size)
+        .style('fill', self.part2_arrival_time_minutes_left_font_color)
+      itemsEnter.select('g.content7Bound2')
+        .append('text')
+        .classed('content7_2_right', true)
+        .text(function (d) {
+          return d.currentFromMinutes_right
+        })
+        .attr('title', function (d) {
+          return d.currentFromMinutes_right
+        })
+        .style('font-size', self.part2_arrival_time_minutes_right_font_size)
+        .style('fill', self.part2_arrival_time_minutes_right_font_color)
+        .attr('x', function () {
+          let left_bound = svg.select('text.content7_2_left').node().getBBox()
+          return left_bound.width + 2
+        })
+
+      itemsUpdate.select(function (d, i) {
+        return i === 1 && showType === 2 ? this : null
+      }).select('g.content7Bound2 text.content7_2_left')
+        .text(function (d) {
+          return d.currentFromMinutes_left
+        })
+        .attr('title', function (d) {
+          return d.currentFromMinutes_left
+        })
+      itemsUpdate.select(function (d, i) {
+        return i === 1 && showType === 2 ? this : null
+      }).select('g.content7Bound2 text.content7_2_right')
+        .text(function (d) {
+          return d.currentFromMinutes_right
+        })
+        .attr('title', function (d) {
+          return d.currentFromMinutes_right
+        })
+        .attr('x', function () {
+          let left_bound = svg.select('text.content7_2_left').node().getBBox()
+          return left_bound.width + 2
+        })
+      itemsUpdate.select('g.content7Bound2')
+        .attr('transform', function (d, i) {
+          if (i === 1) {
+            let rect_part2_bounds = d3.select(this.parentNode).select('rect.main').node().getBBox()
+            let g_bounds = this.getBBox()
+            let dx = (rect_part2_bounds.width / 4 - g_bounds.width) / 2 - g_bounds.x
+              + rect_part2_bounds.width * 0.75
+            let dy = (rect_part2_bounds.height / 2 - g_bounds.height) / 2 - g_bounds.y
+              + rect_part2_bounds.height / 2
+            if (dx < 0) {
+              dx = 1
+            }
+            if (dy < 0) {
+              dy = 1
+            }
+            return `translate(${dx}, ${dy})`
+          }
+        })
+      // ------------ 3-2-5、当part3不存在时，part2添加内容（以上）----------- //
       // ------------ 3-3、part3部分 -------------//
       itemsEnter.select(function (d, i) {
@@ -972,9 +1488,34 @@ export default {
         .text(function (d) {
           return d.nextArrivalTime
         })
+        .attr('title', function (d) {
+          return d.nextArrivalTime
+        })
         .style('font-size', self.part3_arrival_time_font_size)
         .style('fill', self.part3_arrival_time_font_color)
-        .attr('x', 100)
+        .attr('x', function () {
+          let left_bounds = svg.select('g.contentAllBound text.content').node().getBBox()
+          return left_bounds.width + 10
+        })
+
+      itemsUpdate.select(function (d, i) {
+        return i === 2 ? this : null
+      }).select('g.contentAllBound text.content')
+        .text(function (d) {
+          return d.text2
+        })
+        .attr('title', function (d) {
+          return d.text2
+        })
+      itemsUpdate.select(function (d, i) {
+        return i === 2 ? this : null
+      }).select('g.contentAllBound text.arrivalTime')
+        .text(function (d) {
+          return d.nextArrivalTime
+        })
+        .attr('title', function (d) {
+          return d.nextArrivalTime
+        })
       itemsUpdate.select('g.contentAllBound')
         .attr('transform', function (d, i) {
           if (i === 2) {
 // 电子站牌数据信息
+import { ScrollPageInnerDataItem } from '../../list/models/mhgj-eBusStop-line-chart-list-scrollPage-innerData'
+
+import moment from 'moment'
+
 class MhgjEBusStopLineChartData {
   /**
    * 构造函数。
@@ -29,6 +33,72 @@ class MhgjEBusStopLineChartData {
     this._showType = null;
   }
+  // 使用远程数据设置属性，对应 mhgj-eBusStop-line-chart-list-scrollPage-innerData.js中的ScrollPageInnerDataItem类
+  // 远程数据格式参考 http://27.115.69.123:19102/General_Interface/getArriveVO?deviceId=66MH0001
+  setFromRemoteLineInfo (info) {
+    this._lineName = info['lineName'] || '' // 线路名称
+    this._terminalStationName = (info['direction'] === 0 ? info['endStop'] : info['startStop']) || '' // 当前线路方向终点站名称
+
+    // 构造当前日期
+    let _currentMoment = null
+    if (info['currDate'] && info['currTime']) {
+      _currentMoment = moment(info['currDate'] + " " + info['currTime'], moment.ISO_8601)
+    } else {
+      _currentMoment = moment(moment().format('YYYY-MM-dd HH:mm'), moment.ISO_8601)
+    }
+    if (!_currentMoment.isValid()) {
+      console.log('当前时间[%s]格式错误，正确格式[yyyy-MM-dd HH:mm]', _currentMoment)
+      this._showType = 3
+      return this
+    }
+
+    if (info['arrive'] && info['arrive'].length >= 2) { // 判定是否显示part3
+      let firstArrive = info['arrive'][0]
+      let arrive_moment = moment(_currentMoment).add(firstArrive['time'], 'seconds')
+      if (!arrive_moment.isValid()) {
+        console.log('arrive.time异常，不是数字[%s]', firstArrive['time'])
+        this._showType = 3
+        return this
+      }
+      let _diffMinutes = arrive_moment.diff(_currentMoment, 'minutes')
+      if (_diffMinutes <= 1) {
+        this._showType = 0
+        this._currentArrivalTime = arrive_moment.format('HH:mm')
+        this._currentFromStations = firstArrive['stopdis']
+        // console.log(this._showType)
+      } else {
+        this._showType = 1
+        this._currentArrivalMinutes = Math.ceil(firstArrive['time'] / 60)
+        this._currentFromStations = firstArrive['stopdis']
+        // console.log(this._showType)
+      }
+
+      let nextArrive = info['arrive'][1]
+      let next_arrive_moment = moment(_currentMoment).add(nextArrive['time'], 's')
+      if (next_arrive_moment.isValid()) {
+        this._nextArrivalTime = next_arrive_moment.format("HH:mm")
+      }
+    } else {
+      if (info['arrive'] && info['arrive'].length === 1) {
+        let arrive = info['arrive'][0]
+        let arrive_moment = moment(_currentMoment).add(arrive['time'], 's')
+        if (!arrive_moment.isValid()) {
+          console.log('arrive.time异常，不是数字[%s]', arrive['time'])
+          this._showType = 3
+          return this
+        }
+        this._showType = 2
+        this._currentArrivalTime = arrive_moment.format('HH:mm')
+        this._currentFromStations = arrive['stopdis']
+        this._currentFromMinutes = Math.ceil(arrive['time'] / 60)
+      } else {
+        this._showType = 3
+      }
+    }
+
+    return this
+  }
+
   setLineName (lineName) {
     this._lineName = lineName
     return this
@@ -87,6 +157,32 @@ class MhgjEBusStopLineChartData {
     return this._showType
   }
+
+  set lineName (val) {
+    this._lineName = val
+  }
+  set terminalStationName (val) {
+    this._terminalStationName = val
+  }
+  set currentArrivalTime (val) {
+    this._currentArrivalTime = val
+  }
+  set currentArrivalMinutes (val) {
+    this._currentArrivalMinutes = val
+  }
+  set currentFromStations (val) {
+    this._currentFromStations = val
+  }
+  set currentFromMinutes (val) {
+    this._currentFromMinutes = val
+  }
+  set nextArrivalTime (val) {
+    this._nextArrivalTime = val
+  }
+  set showType (val) {
+    this._showType = val
+  }
+
   generateSvgData () {
     // 根据内部数据产生svg用数据
     let showData = [];
@@ -178,6 +274,20 @@ class MhgjEBusStopLineChartData {
   /**
    * 产生测试数据1，包含三个完整部分的显示，part1，part2，part3
    */
+  static generateTestData_type0 () {
+    let testData = new MhgjEBusStopLineChartData()
+    return testData
+      .setShowType(0)
+      .setLineName("浦江12路")
+      .setTerminalStationName("漕河泾综合保税区")
+      .setCurrentArrivalTime("11:30")
+      .setCurrentFromStations("1")
+      .setNextArrivalTime("11:47")
+  }
+
+  /**
+   * 产生测试数据1，包含三个完整部分的显示，part1，part2，part3
+   */
   static generateTestData_type1 () {
     let testData = new MhgjEBusStopLineChartData()
     return testData
+/*
+    内部使用的是border-box
+    注意：
+    1、这个设置很重要，因为内部计算width是减去两侧border的
+    2、在编辑器模式下，外层的.ant-layout会给内层所有元素设置border-box，此时你不设置无所谓
+    3、但是在打包预览模式下，是没有外层.ant-layout定义的，此时如果组件内部不定义，则会使用content-box，会和内部计算宽度产生偏差
+*/
+.mhgj-eBusStop-line-chart-list-outer-div, .mhgj-eBusStop-line-chart-list-outer-div * {
+    box-sizing: border-box;
+}
+
+/**
+    这里使用float布局，当多个线路模拟图排列的时候
+    1、如果最外层div使用position: relative或不指定position，
+    最外层的div位置会有偏差，滚动列表是会造成距离偏差
+    2、如果使用position:absolute，需要指定top，可以算出的，但是麻烦
+    3、直接使用float:left，不会有问题，因为宽度是死的，高度是活的，排列时没有偏差
+ */
+.mhgj-eBusStop-line-chart-list-outer-div .mhgj-eBusStop-line-chart-outer-div {
+    float: left;
+}
+/**
+ * 自定义线路模拟图组件列表滚动Page
+ * 注意：此组件不单独使用，只用在 mhgj-eBusStop-line-chart-list 组件内部）
+ */
+
+import { jsonp } from 'vue-jsonp'
+import { ScrollPageInnerData } from 'core/plugins/bsth/mhgj/list/models/mhgj-eBusStop-line-chart-list-scrollPage-innerData'
+
+export default {
+  props: {
+    // ---------------- 父组件传递的属性 ---------------- //
+    // 编辑模式
+    editorMode: { type: String, required: true },
+    // 每页大小
+    page_size: { type: Number, required: true },
+    // 列表宽度
+    list_width: { type: Number, required: true },
+    // 列表高度
+    list_height: { type: Number, required: true },
+    // 滚动时间间隔（秒）
+    scroll_seconds: { type: Number, required: true },
+    // 滚动速度（像素/秒）
+    scroll_speed: { type: Number, required: true },
+
+    // 获取远端数据url
+    remote_data_url: { type: String, required: true },
+    // 获取远端数据url参数：站牌设备id
+    remote_data_url_param_device_id: { type: String, required: true },
+    // 获取远端数据间隔（秒）
+    remote_data_refresh_seconds: { type: Number, required: true }
+  },
+  computed: {
+    remoteUrl () {
+      return this.remote_data_url + '?deviceId=' + this.remote_data_url_param_device_id
+    }
+  },
+
+  data () {
+    return {
+      // --------------- lazy加载slot --------------- //
+      lazySlot: true,
+
+      // --------------- 滚动翻页数据对象 --------------//
+      scrollPageInnerData: null,
+      initLoading: true,
+      initLoadingText: '',
+
+      // ---------------- 内部的定时timer --------------- //
+      scrollTimer: { // 滚动间隔timer
+        timer: undefined,
+        count: 0
+      },
+      remoteDataTimer: { // 远程数据刷新间隔timer
+        timer: undefined,
+        count: 0
+      }
+    }
+  },
+  mounted () {
+    // 1、初始化数据
+    // 1.1、edit模式下，使用测试数据
+    if (this.editorMode === 'edit') {
+      this.initLoading = true
+      this.initLoadingText = '初始化数据...'
+      this.scrollPageInnerData = ScrollPageInnerData.generateDataListByTest(
+        this.page_size, this.list_width, this.list_height)
+      // 发送bindData事件，父组件绑定该事件
+      this.$emit('bindData', this.scrollPageInnerData.scrollDataItemList)
+      this.initLoading = false
+      this.lazySlot = false
+
+    }
+    // 1.2、preview模式下，使用远程数据
+    if (this.editorMode === 'preview') {
+      this.initDataByRemoteApi()
+    }
+  },
+  destroyed () {
+    // 重置滚动间隔timer
+    let scrollTimer = this.scrollTimer.timer
+    if (scrollTimer) {
+      try {
+        clearTimeout(scrollTimer)
+      } catch (err) {}
+    }
+    this.scrollTimer.timer = undefined
+
+    // 重置远程数据刷新间隔timer
+    let remoteDataTimer = this.remoteDataTimer.timer
+    if (remoteDataTimer) {
+      try {
+        clearTimeout(remoteDataTimer)
+      } catch (err) {}
+    }
+    this.remoteDataTimer.timer = undefined
+
+    // 重置滚动翻页数据对象
+    if (this.scrollPageInnerData) {
+      this.scrollPageInnerData.resetData()
+    }
+  },
+  watch: {
+    'scrollTimer.count' () {
+      let timer = this.scrollTimer.timer
+      if (timer) {
+        try {
+          clearTimeout(timer)
+        } catch (err) {}
+        this.scrollTimer.timer = undefined
+      }
+      let self = this
+      this.scrollTimer.timer = setTimeout(function () {
+        self.startScroll()
+        // self.scrollTimer.count++ // 滚动完成再触发，this.scrollListInnerData.scrollUp触发
+      }, this.scroll_seconds * 1000)
+    },
+    'remoteDataTimer.count' () {
+      let timer = this.remoteDataTimer.timer
+      if (timer) {
+        try {
+          clearTimeout(timer)
+        } catch (err) {}
+      }
+      let self = this
+      this.remoteDataTimer.timer = setTimeout(function () {
+        self.refreshDataByRemoteApi()
+      }, this.remote_data_refresh_seconds * 1000)
+    },
+    // -------------------- 监控父组件传递的属性 --------------- //
+    page_size (val) {
+      // 只在edit模式下监控，preview模式下不监控
+      if (this.editorMode === 'edit') { // 使用测试数据
+        this.scrollPageInnerData.pageSize = val
+      }
+    },
+    list_width (val) {
+      if (this.editorMode === 'edit') {
+        this.scrollPageInnerData.width = val
+      } else {
+        // TODO：
+      }
+    },
+    list_height (val) {
+      if (this.editorMode === 'edit') {
+        this.scrollPageInnerData.height = val
+      } else {
+        // TODO：
+      }
+    }
+  },
+  render () {
+    // TODO：暂时是没有内容显示的，只处理内部数据，后面再根据不同的错误显示内容
+    return (
+      <a-spin tip={this.initLoadingText} spinning={this.initLoading} size="large">
+        {
+          !this.lazySlot ? this.$slots.default : ''
+        }
+      </a-spin>
+    )
+  },
+  methods: {
+    startScroll () {
+      this.scrollPageInnerData.scrollUp(this)
+    },
+    initDataByRemoteApi () { // 使用后台api初始化数据
+      this.initLoading = true
+      this.initLoadingText = '初始化数据...'
+      jsonp(this.remoteUrl).then(remoteDataList => {
+        if (!remoteDataList || !remoteDataList.length) {
+          this.initLoadingText = `远端数据为空，等待${this.remote_data_refresh_seconds}秒后重新获取，请稍后...`
+          this.remoteDataTimer.count++
+        } else {
+          this.scrollPageInnerData = ScrollPageInnerData.generateDataListByRemoteData(
+            this.page_size, this.list_width, this.list_height, remoteDataList)
+          // 发送bindData事件，父组件绑定该事件
+          this.$emit('bindData', this.scrollPageInnerData.scrollDataItemList)
+          this.initLoading = false
+          this.lazySlot = false
+          // 启动滚动分页，后台数据刷新
+          this.scrollTimer.count++
+          this.remoteDataTimer.count++
+        }
+      }).catch(err => {
+        console.log(err)
+        this.$message.error(`获取远端数据失败，状态：${err.status}，错误：${err.statusText}`, 1)
+        this.initLoadingText = `获取远端数据失败，等待${this.remote_data_refresh_seconds}秒后重新获取，请稍后...`
+        this.remoteDataTimer.count++
+      })
+    },
+    refreshDataByRemoteApi () { // 使用后台api刷新数据
+      // console.log('refreshDataByRemoteApi')
+      // length===0说明初始化失败，或者后台无数据，重新刷新
+      if (!this.scrollPageInnerData || !this.scrollPageInnerData.scrollDataItemList.length) {
+        this.initDataByRemoteApi()
+      } else {
+        jsonp(this.remoteUrl).then(remoteDataList => {
+          this.scrollPageInnerData.refreshDataWithRemoteData(remoteDataList)
+        }).catch(err => {
+          console.log(err)
+          this.$message.error(` 获取数据失败，状态：${err.status}，错误：${err.statusText}`, 1)
+        })
+        this.remoteDataTimer.count++
+      }
+    }
+  }
+}
+
+
+
+/**
+ * 自定义线路模拟图组件列表（内部使用 mhgj-eBusStop-line-chart 组件）
+ */
+
+import PropTypes from '@luban-h5/plugin-common-props'
+
+import scrollPage from 'core/plugins/bsth/mhgj/list/mhgj-eBusStop-line-chart-list-scrollPage'
+
+import './css/mhgj-eBusStop-line-chart-list.css'
+
+export default {
+  extra: {
+    defaultStyle: { // 默认属性
+      top: 0,
+      left: 0,
+      width: 1000,
+      height: 800
+    }
+  },
+  name: 'mhgj-eBusStop-line-chart-list',
+  data () {
+    // eslint-disable-next-line
+    this.private_jQuery = jQuery.noConflict() // jquery引用
+    return {
+      /**
+       * 监控外层元素的宽度高度变化
+       * 1、由于编辑器缩放，自定义组件无法监控，所以需要定义一个定时器监控最外层元素的大小变化
+       * 2、建议所有自定义组件，最外层都定义一个div包在自定义组件最外层，不要关联任何自定义的属性，样式对应编辑器的通用样式
+       */
+      watchWidthHeightTimer: {
+        timer: undefined,
+        count: 0,
+        millisecond: 1000
+      },
+      list_width: 350, // 列表组件宽度
+      list_height: 300, // 列表组件高度
+      line_chart_outer_div_width: 0, // 线路图外层div宽度
+      line_chart_outer_div_height: 0, // 线路图外层div高度
+      internalDataSet: [], // 内部数据（ScrollPageInnerDataItem类型数组，由数据组件生成）
+      scrollTop: 0 // 控制垂直滚动 top
+    }
+  },
+  props: {
+    editorMode: PropTypes.string({ // 编辑模式会由编辑器自动注入（值：edit, preview）
+      defaultValue: 'preview',
+      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: 4, layout: { prefixCls: 'bsth-line' } }),
+    scroll_seconds: PropTypes.number({ label: '滚动时间间隔（秒）', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
+    scroll_speed: PropTypes.number({ label: '滚动速度（像素/秒）', defaultValue: 1000000, layout: { prefixCls: 'bsth-line' } }),
+    remote_data_refresh_seconds: PropTypes.number({ label: '数据刷新间隔（秒）', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
+    remote_data_url: PropTypes.string({ label: '远端数据url', component: 'a-textarea', defaultValue: 'http://27.115.69.123:19102/General_Interface/getArriveVO', layout: { prefixCls: 'bsth-line' } }),
+    device_id: PropTypes.string({ label: '站牌设备Id', defaultValue: '66MH0001', layout: { prefixCls: 'bsth-line' } }),
+    // --------------- 外层css属性 --------------- //
+    _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' } }),
+    margin_bottom: PropTypes.number({ label: '图底部margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
+    border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
+    background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#9EE0DF', 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_border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
+    line_chart_background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    _flag_3_1_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层线路信息css属性" class="bsth-line-item-divider"></hr>) } }),
+    part1_line_icon_width: PropTypes.number({ label: '线路图标宽度', defaultValue: 50, layout: { prefixCls: 'bsth-line' } }),
+    part1_line_icon_height: PropTypes.number({ label: '线路图标高度', defaultValue: 50, layout: { prefixCls: 'bsth-line' } }),
+    part1_line_name_font_size: PropTypes.number({ label: '线路名称字体大小', defaultValue: 60, layout: { prefixCls: 'bsth-line' } }),
+    part1_terminal_stop_font_size: PropTypes.number({ label: '开往站点字体大小', defaultValue: 28, layout: { prefixCls: 'bsth-line' } }),
+    _flag_3_2_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层本班车信息css属性" class="bsth-line-item-divider"></hr>) } }),
+    part2_title1_font_size: PropTypes.number({ label: '标题1字体大小', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
+    part2_title2_font_size: PropTypes.number({ label: '标题2字体大小', defaultValue: 28, layout: { prefixCls: 'bsth-line' } }),
+    part2_arrival_time_font_size: PropTypes.number({ label: '到达时间字体大小', defaultValue: 60, layout: { prefixCls: 'bsth-line' } }),
+    part2_arrival_time_minutes_left_font_size: PropTypes.number({ label: '到达时间(分钟)左边字体大小', defaultValue: 80, layout: { prefixCls: 'bsth-line' } }),
+    part2_arrival_time_minutes_right_font_size: PropTypes.number({ label: '到达时间(分钟)右边字体大小', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
+    part2_from_stops_left_font_size: PropTypes.number({ label: '距离本站(几站)左边字体大小', defaultValue: 80, layout: { prefixCls: 'bsth-line' } }),
+    part2_from_stops_right_font_size: PropTypes.number({ label: '距离本站(几站)右边字体大小', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
+    _flag_3_3_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层下一班车信息css属性" class="bsth-line-item-divider"></hr>) } }),
+    part3_title1_font_size: PropTypes.number({ label: '标题1字体大小', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
+    part3_title2_font_size: PropTypes.number({ label: '标题2字体大小', defaultValue: 28, layout: { prefixCls: 'bsth-line' } }),
+    part3_arrival_time_font_size: PropTypes.number({ label: '到达时间字体大小', defaultValue: 60, layout: { prefixCls: 'bsth-line' } }),
+
+  },
+  render () {
+    /* 最外层div对应编辑器的通用样式 */
+    return (
+      <div class="mhgj-eBusStop-line-chart-list-outer-div">
+        {
+          this.renderScrollPage()
+        }
+      </div>
+    )
+  },
+  mounted () {
+    // 使用外部元素的框架定义图的长宽
+    let $jQuery = this.private_jQuery
+    this.list_width = $jQuery(this.$el).width() - this.margin_left - this.margin_right
+    this.list_height = $jQuery(this.$el).height() - this.margin_top - this.margin_bottom
+    // 开启外部元素长宽监控计数
+    /**
+     * 开启外部元素长宽监控逻辑
+     * 1、必须在编辑模式下启效果，否则无效
+     */
+    if (this.editorMode === 'edit') {
+      this.watchWidthHeightTimer.count++
+    }
+  },
+  destroyed () {
+    // 消耗 watchWidthHeightTimer 定时器
+    let timer1 = this.watchWidthHeightTimer.timer
+    if (timer1) {
+      try {
+        clearTimeout(timer1)
+      } catch (e) {}
+      this.watchWidthHeightTimer.timer = undefined
+    }
+  },
+  watch: {
+    'watchWidthHeightTimer.count' () { // 长宽定时器监控
+      let timer = this.watchWidthHeightTimer.timer
+      if (timer) {
+        clearTimeout(timer)
+        this.watchWidthHeightTimer.timer = null
+      }
+
+      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
+        }
+        if (height !== self.list_height) {
+          self.list_height = height - self.margin_top - self.margin_bottom
+        }
+
+        self.watchWidthHeightTimer.count++
+      }, self.watchWidthHeightTimer.millisecond)
+    },
+    // ----------------- 数据属性 ---------------- //
+    page_size () {
+      this.line_chart_outer_div_height = Math.floor(this.list_height / this.page_size)
+    },
+    // ----------------- 本身宽高 监控 ---------------- //
+    list_width () {
+      this.line_chart_outer_div_width = this.list_width - this.border_size * 2
+    },
+    list_height () {
+      this.line_chart_outer_div_height = Math.floor((this.list_height - this.border_size * 2) / this.page_size)
+    },
+    // ----------------- 外层css属性 监控 ----------------- //
+    margin_left () {
+      this.list_width = this.list_width - this.margin_left - this.margin_right
+    },
+    margin_right () {
+      this.list_width = this.list_width - this.margin_left - this.margin_right
+    },
+    margin_top () {
+      this.list_height = this.list_height - this.margin_top - this.margin_bottom
+    },
+    margin_bottom () {
+      this.list_height = this.list_height - this.margin_top - this.margin_bottom
+    },
+    border_size () {
+      this.line_chart_outer_div_width = this.list_width - this.border_size * 2
+      this.line_chart_outer_div_height = Math.floor((this.list_height - this.border_size * 2) / this.page_size)
+    }
+  },
+  methods: {
+    /**
+     * scrollPage组件的scrollTop事件处理函数。
+     * @param val 视口距离内部page的距离
+     */
+    onScrollTop (val) {
+
+      // 注意：默认向上滚动，scrollPage组件内部的view视口是向下移动的，top是大于等于0的
+      // 但是，使用scrollPage的组件外部view视口div是固定的，只能移动内部的div，所以top要变成负值
+      if (val === 0) {
+        this.scrollTop = 0
+      } else {
+        this.scrollTop = -val
+      }
+    },
+    /**
+     * scrollPage组件的bindData事件处理函数。
+     * @param dataSet
+     */
+    onBindData (dataSet) {
+      // 初始化的时候绑定一次数据，之后所有数据的变化都在ScrollPage内部变化
+      this.internalDataSet = dataSet
+    },
+
+    /**
+     * 绘制scrollPage组件（内部组件，只能在本组件中使用，index.js中未注册）。
+     * @return {*}
+     */
+    renderScrollPage () {
+      const innerDivStyle = {
+        'width': this.list_width + 'px',
+        'height': this.list_height + 'px',
+        'border': this.border_size + 'px solid black',
+        'margin-left': this.margin_left + 'px',
+        'margin-right': this.margin_right + 'px',
+        'margin-top': this.margin_top + 'px',
+        'margin-bottom': this.margin_bottom + 'px',
+        'background': this.background_color,
+        'position': 'relative',
+        'overflow': 'hidden' // 隐藏超出的模拟图
+      }
+
+      // 包含所有的线路模拟图，滚动时设置top值，总高度等于所有图高度和
+      const wrapperDivStyle = {
+        'top': this.scrollTop + 'px',
+        'position': 'absolute',
+        'width': this.list_width + 'px',
+        'height': this.line_chart_outer_div_height * this.internalDataSet.length + 'px'
+      }
+
+      return (
+        <scrollPage
+          editorMode={this.editorMode}
+          page_size={this.page_size}
+          list_width={this.list_width}
+          list_height={this.list_height}
+          scroll_seconds={this.scroll_seconds}
+          scroll_speed={this.scroll_speed}
+          remote_data_url={this.remote_data_url}
+          remote_data_url_param_device_id={this.device_id}
+          remote_data_refresh_seconds={this.remote_data_refresh_seconds}
+          onBindData={this.onBindData}
+          onScrollTop={this.onScrollTop}>
+          <div style={innerDivStyle}>
+            <div style={wrapperDivStyle}>
+              {
+                this.internalDataSet.map(dataItem => (
+                  this.renderLineChart(dataItem._eBusStopData)
+                ))
+              }
+            </div>
+          </div>
+        </scrollPage>
+      )
+    },
+    /**
+     * 绘制eBusStop-line-chart组件（index.js中已经注册过，不需要import）。
+     * @param eBusStopData EBusStopData类型
+     * @return {*}
+     */
+    renderLineChart (eBusStopData) {
+      return (
+        <mhgj-eBusStop-line-chart
+          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}
+          eBusStopData_child={eBusStopData}
+          // 内部线路模拟图外层css属性
+          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属性
+          part1_line_icon_width={this.part1_line_icon_width}
+          part1_line_icon_height={this.part1_line_icon_height}
+          part1_line_name_font_size={this.part1_line_name_font_size}
+          part1_terminal_stop_font_size={this.part1_terminal_stop_font_size}
+          part2_title1_font_size={this.part2_title1_font_size}
+          part2_title2_font_size={this.part2_title2_font_size}
+          part2_arrival_time_font_size={this.part2_arrival_time_font_size}
+          part2_arrival_time_minutes_left_font_size={this.part2_arrival_time_minutes_left_font_size}
+          part2_arrival_time_minutes_right_font_size={this.part2_arrival_time_minutes_right_font_size}
+          part2_from_stops_left_font_size={this.part2_from_stops_left_font_size}
+          part2_from_stops_right_font_size={this.part2_from_stops_right_font_size}
+          part3_title1_font_size={this.part3_title1_font_size}
+          part3_title2_font_size={this.part3_title2_font_size}
+          part3_arrival_time_font_size={this.part3_arrival_time_font_size}
+
+        />
+      )
+    }
+
+  }
+
+}
+
+/**
+ * mhgj-eBusStop-line-chart-list-scrollPage.js 内部使用数据对象
+ */
+
+import Utils from 'core/plugins/bsth/bsth-utils'
+import { MhgjEBusStopLineChartData } from 'core/plugins/bsth/mhgj/chart/models/mhgjEBusStopLineChartData'
+
+class ScrollPageInnerDataItem {
+  /**
+   * 构造函数。
+   * @param width int 对应chart组件宽度
+   * @param height int 对应chart组件高度
+   * @param cssTop int 对应chart组件距离顶部css top值
+   * @param itemIndex int 每页中的item下标（从0开始）
+   * @param pageIndex int 第几页下标（从0开始）
+   * @param eBusStopData MhgjEBusStopLineChartData 对应mhgj-eBusStop-line-chart组件使用的数据对象
+   */
+  constructor (width = 0, height = 0, cssTop, itemIndex, pageIndex, eBusStopData) {
+    // 数据对象
+    this._eBusStopData = eBusStopData
+
+    // ------------- 滚动列表用的数据 ------------ //
+    this._width = width
+    this._height = height
+    this._cssTop = cssTop
+    this._itemIndex = itemIndex
+    this._pageIndex = pageIndex
+  }
+
+  get width () {
+    return this._width
+  }
+  get height () {
+    return this._height
+  }
+
+  get top () {
+    return this._cssTop
+  }
+
+  /**
+   * 使用类本身对象创建。
+   * @param dataItem ScrollPageInnerDataItem
+   * @return ScrollPageInnerDataItem
+   */
+  static createByDataItem (dataItem) {
+    return new ScrollPageInnerDataItem(
+      0, 0,
+      dataItem._cssTop,
+      dataItem._itemIndex,
+      dataItem._pageIndex,
+      dataItem._eBusStopData
+    )
+  }
+
+  // TODO：
+}
+
+class ScrollPageInnerData {
+  /**
+   * 构造函数。
+   * @param pageSize 每页大小
+   * @param width 列表宽度
+   * @param height 列表高度
+   */
+  constructor (pageSize, width, height) {
+    this._pageSize = pageSize
+    this._width = width
+    this._height = height
+
+    // --------------- 内部数据对象 ---------------- //
+    // ScrollPageInnerDataItem 类型数组
+    this._innerDataItemList = []
+    this._pageCount = 0 // 一共多少页
+
+    // --------------- 内部滚动数据对象 --------------- //
+    // 滚动用的 ScrollPageInnerDataItem 类型数组（根据不同的滚动策略会和_innerDataItemList不一致）
+    this._scrollDataItemList = []
+    this._currentScrollIndex = 0 // 当前滚动项index
+    this._nextScrollIndex = 1 // 下一个滚动项index
+    this._scrollAnimateTimer = { // 滚动动画效果timer
+      timer: undefined,
+      count: 0,
+      millisecond: 1
+    }
+  }
+
+  // ---------------- get/set方法 -------------- //
+  set pageSize (val) { // 设置每页大小
+    this._pageSize = val
+    this._pageCount = Math.ceil(this._innerDataItemList.length / this._pageSize)
+    // 重新计算_scrollDataItemList
+    _private_refreshScrollData.call(this)
+  }
+
+  get scrollDataItemList () { // 返回滚动数据集
+    return this._scrollDataItemList
+  }
+
+  set width (val) {
+    this._width = val
+    // 刷新滚动数据中 宽，高，top
+    _private_refreshScrollDataSizeProperty.call(this)
+  }
+
+  set height (val) {
+    this._height = val
+    // 刷新滚动数据中 宽，高，top
+    _private_refreshScrollDataSizeProperty.call(this)
+  }
+
+  // --------------------- 分页移动方法 --------------------- //
+  /**
+   * mhgj-eBusStop-line-chart-list-scrollPage组件联动，向上滚动翻页
+   * 主要分页逻辑：每次向上移动一个chart，第一个chart接到最后一个chart组成一个环滚动翻
+   * @param scrollListComponent mhgj-eBusStop-line-chart-list-scrollPage组件
+   */
+  scrollUp (scrollListComponent) {
+    if (this._scrollDataItemList.length <= this._pageSize) { // 小于一页，不滚动
+      return
+    }
+
+    if (this._scrollAnimateTimer.timer) {
+      try {
+        clearInterval(this._scrollAnimateTimer.timer)
+      } catch (err) {
+      }
+      this._scrollAnimateTimer.timer = undefined
+    }
+
+    // 往上滚动，相当于视口view向下移动
+    let viewTopFrom = this._scrollDataItemList[this._currentScrollIndex].top
+    let viewTopTo = this._scrollDataItemList[this._nextScrollIndex].top
+    let speed = scrollListComponent.scroll_speed // 每秒移动像素数
+    let step = speed / 1000 // 每毫秒移动像素数
+    // let step = (topTo - topFrom) / 20 // 每毫秒移动距离差的5分之一
+    let self = this
+    self._scrollAnimateTimer.timer = setInterval(function () {
+      self._scrollAnimateTimer.count++
+      let currentViewTop = viewTopFrom + self._scrollAnimateTimer.count * step
+      // console.log(currentViewTop)
+      if (currentViewTop > viewTopTo || (viewTopTo - currentViewTop) < step) {
+        scrollListComponent.$emit('scrollTop', viewTopTo)
+        self._scrollAnimateTimer.count = 0
+
+        // console.log(self._pageCount)
+        // console.log(self._scrollDataItemList[self._nextScrollIndex].pageIndex)
+        if (self._scrollDataItemList[self._nextScrollIndex].pageIndex === self._pageCount) {
+          scrollListComponent.$emit('scrollTop', self._scrollDataItemList[0].top)
+          self._currentScrollIndex = 0
+          self._nextScrollIndex = 1
+        } else {
+          self._currentScrollIndex = self._nextScrollIndex
+          self._nextScrollIndex++
+        }
+
+        if (self._scrollAnimateTimer.timer) {
+          try {
+            clearInterval(self._scrollAnimateTimer.timer)
+          } catch (err) {
+          }
+          self._scrollAnimateTimer.timer = null
+        }
+
+        scrollListComponent.scrollTimer.count++
+      } else {
+        scrollListComponent.$emit('scrollTop', currentViewTop)
+      }
+
+    }, 1)
+  }
+
+  // ----------------------- 数据方法 --------------------- //
+  /**
+   * 重置内部数据
+   */
+  resetData () {
+    // ------------ 重置内部数据对象 ------------ //
+    this._innerDataItemList.splice(0, this._innerDataItemList.length) // 直接删除数据内部数据，而不是 = []
+    this._pageCount = 0
+
+    // ------------ 重置内部滚动数据对象 ---------- //
+    this._scrollDataItemList.splice(0, this._scrollDataItemList.length)
+    this._currentScrollIndex = 0
+    this._nextScrollIndex = 1
+    if (this._scrollAnimateTimer.timer) {
+      try {
+        clearInterval(this._scrollAnimateTimer.timer)
+      } catch (err) {}
+    }
+    this._scrollAnimateTimer.timer = undefined
+    this._scrollAnimateTimer.count = 0
+  }
+
+  /**
+   * 使用远程数据刷新内部数据。
+   * @param remoteDataList Object
+   */
+  refreshDataWithRemoteData (remoteDataList) {
+    // 远程数据格式参考 http://27.115.69.123:19102/General_Interface/getArriveVO?deviceId=66MH0001
+    if (!remoteDataList || !remoteDataList.length) {
+      return
+    }
+
+    // 1、按照线路名字分组数据
+    let dataGroupByLineName = Utils.listGroupBy(remoteDataList, function (d) {
+      return d['lineName']
+    })
+    // 2、设置数据
+    for (let internalData of this._innerDataItemList) {
+      let key = internalData._eBusStopData.lineName
+      if (dataGroupByLineName[key]) {
+        let remoteInfo = dataGroupByLineName[key][0]
+        internalData._eBusStopData.setFromRemoteLineInfo(remoteInfo)
+
+        // console.log(`${key}刷新remote数据`)
+      }
+    }
+    // this._innerDataItemList[0]._eBusStopData.currentFromStations = 20
+    // console.log(this._innerDataItemList[0]._eBusStopData)
+
+  }
+
+  // --------------------------- static构建方法 ------------------------- //
+  /**
+   * 使用远程数据生成对象。
+   * @param pageSize 每页大小
+   * @param width 列表宽度
+   * @param height 列表高度
+   * @param remoteDataList Object
+   * @return ScrollPageInnerData
+   */
+  static generateDataListByRemoteData (pageSize, width, height, remoteDataList) {
+    let rtnData = new ScrollPageInnerData(
+      pageSize, width, height
+    )
+
+    // 1、重置内部数据
+    rtnData.resetData()
+    // 1-1、如果远端数据为空，直接返回
+    if (!remoteDataList || !remoteDataList.length) {
+      return rtnData
+    }
+
+    // 2、计算内部数据对象
+    rtnData._innerDataItemList.splice(0, rtnData._innerDataItemList.length)
+
+    // 2-1、使用远端数据构造内部数据
+    // 远程数据格式参考 http://27.115.69.123:19102/General_Interface/getArriveVO?deviceId=66MH0001
+    for (const info of remoteDataList) {
+      if (info) {
+        let eBusStopData = new MhgjEBusStopLineChartData()
+          .setFromRemoteLineInfo(info)
+        rtnData._innerDataItemList.push(new ScrollPageInnerDataItem(0, 0, 0, 0, 0, eBusStopData))
+      }
+    }
+
+    // 2.2、一共有多少页
+    rtnData._pageCount = Math.ceil(rtnData._innerDataItemList.length / rtnData._pageSize)
+
+    // 3、计算内部滚动数据对象
+    _private_refreshScrollData.call(rtnData)
+
+    return rtnData
+  }
+
+  /**
+   * static方法，使用测试数据生成对象。
+   * @param pageSize 每页大小
+   * @param width 列表宽度
+   * @param height 列表高度
+   * @return ScrollPageInnerData
+   */
+  static generateDataListByTest (pageSize, width, height) {
+    let rtnData = new ScrollPageInnerData(
+      pageSize, width, height
+    )
+
+    // 1、重置内部数据
+    rtnData.resetData()
+
+    // 2、计算内部数据对象
+    rtnData._innerDataItemList.splice(0, rtnData._innerDataItemList.length)
+    // 2-1、测试数据
+    let type1_data0 = MhgjEBusStopLineChartData.generateTestData_type0()
+    let type1_data1 = MhgjEBusStopLineChartData.generateTestData_type1().setLineName('test1路')
+    let type1_data2 = MhgjEBusStopLineChartData.generateTestData_type2().setLineName('test2路')
+    let type1_data3 = MhgjEBusStopLineChartData.generateTestData_type3().setLineName('test3路')
+
+    rtnData._innerDataItemList.push(new ScrollPageInnerDataItem(0, 0, 0, 0, 0, type1_data0))
+    rtnData._innerDataItemList.push(new ScrollPageInnerDataItem(0, 0, 0, 0, 0, type1_data1))
+    rtnData._innerDataItemList.push(new ScrollPageInnerDataItem(0, 0, 0, 0, 0, type1_data2))
+    rtnData._innerDataItemList.push(new ScrollPageInnerDataItem(0, 0, 0, 0, 0, type1_data3))
+
+    // 2.2、一共有多少页
+    rtnData._pageCount = Math.ceil(rtnData._innerDataItemList.length / rtnData._pageSize)
+
+    // 3、计算内部滚动数据对象
+    _private_refreshScrollData.call(rtnData)
+
+    // console.log(rtnData)
+
+    return rtnData
+  }
+
+}
+
+// ---------------- private私有方法 -----------------//
+/**
+ * 计算内部滚动数据。
+ */
+function _private_refreshScrollData () {
+  this._scrollDataItemList.splice(0, this._scrollDataItemList.length)
+
+  // 3.1、拷贝属性赋值
+  for (let dataItem of this._innerDataItemList) {
+    // 注意这里直接拷贝_innerDataItemList元素属性，然后new新的ScrollListInnerDataItem对象
+    this._scrollDataItemList.push(
+      ScrollPageInnerDataItem.createByDataItem(dataItem)
+    )
+  }
+  // 3.2、如果总数据小于等于1页，不用计算其他滚动数据，返回
+  if (this._innerDataItemList.length <= this._pageSize) {
+    return
+  }
+  // 3.3、计算每条数据的 itemIndex pageIndex 属性
+  for (let i = 0; i < this._pageCount; i++) { // 计算itemIndex pageIndex
+    for (let j = 0; j < this._pageSize; j++) {
+      let index = i * this._pageSize + j
+      if (index === this._scrollDataItemList.length) { // 超出记录退出
+        break
+      }
+      let innerDataItem = this._scrollDataItemList[i * this._pageSize + j]
+      innerDataItem.itemIndex = j
+      innerDataItem.pageIndex = i
+    }
+  }
+  // 3.4、在最后添加第一页的数据（为了无缝滚动需要），同时pageIndex要加1
+  // 注意：添加的一页不计算进this.pageCount中
+  for (let i = 0; i < this._pageSize; i++) {
+    let InnerDataItem = ScrollPageInnerDataItem.createByDataItem(this._innerDataItemList[i])
+    InnerDataItem.pageIndex = this._pageCount
+    this._scrollDataItemList.push(InnerDataItem)
+  }
+  // 3.5、计算每个元素的宽，高，top
+  _private_refreshScrollDataSizeProperty.call(this)
+}
+
+/**
+ * 刷新滚动数据中 宽，高，top
+ */
+function _private_refreshScrollDataSizeProperty () {
+  // TODO：先直接除假设每个item高度相同，后面再改
+  let scrollHeight = Math.floor(this._height / this._pageSize)
+  for (let i = 0; i < this._scrollDataItemList.length; i++) {
+    let innerDataItem = this._scrollDataItemList[i]
+    innerDataItem._width = this._width
+    innerDataItem._height = scrollHeight
+    innerDataItem._cssTop = i * scrollHeight
+  }
+}
+
+export {
+  ScrollPageInnerDataItem,
+  ScrollPageInnerData
+}
@@ -31,6 +31,7 @@ import EBusStopLineChart from &#39;core/plugins/bsth/lggj/chart/eBusStop-line-chart&#39;
 import EBusStopLineChartList from 'core/plugins/bsth/lggj/list/eBusStop-line-chart-list'
 import MhgjEBusStopLineChart from 'core/plugins/bsth/mhgj/chart/mhgj-eBusStop-line-chart'
+import MhgjEBusStopLineChartList from 'core/plugins/bsth/mhgj/list/mhgj-eBusStop-line-chart-list'
 export const pluginsList = [
   // {
@@ -354,6 +355,18 @@ export const pluginsList = [
     name: MhgjEBusStopLineChart.name
   },
+  {
+    i18nTitle: {
+      'en-US': 'MhgjEBusStopLineChartList',
+      'zh-CN': '电子站牌单线路模拟图2list'
+    },
+    title: '电子站牌单线路模拟图2list',
+    icon: 'list',
+    component: MhgjEBusStopLineChartList,
+    visible: true,
+    name: MhgjEBusStopLineChartList.name
+  },
+
   // {
   //   i18nTitle: {
   //     'en-US': 'LineChart',