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

1、修改othergj-eBusStop-line-chart组件，添加报站信息显示，站名文本动画显示（从下而上），背景渐变显示 2、修改othergj-eBusStop-line-chart-list组件，修正远端报站信息获取

其他公交公司用的公交电子站牌页面组件
1、修改othergj-eBusStop-line-chart组件，添加报站信息显示，站名文本动画显示（从下而上），背景渐变显示 2、修改othergj-eBusStop-line-chart-list组件，修正远端报站信息获取
徐烜
1 parent cad89ba3
Showing 5 changed files with 864 additions and 138 deletions
front-end/h5/src/components/core/plugins/bsth/othergj/linechart/chart/css/othergj-eBusStop-line-chart.css
front-end/h5/src/components/core/plugins/bsth/othergj/linechart/chart/models/eBusStopGpsData.js
front-end/h5/src/components/core/plugins/bsth/othergj/linechart/chart/othergj-eBusStop-line-chart.js
front-end/h5/src/components/core/plugins/bsth/othergj/linechart/list/models/othergj-eBusStop-line-chart-list-scrollPage-innerData.js
front-end/h5/src/components/core/plugins/bsth/othergj/linechart/list/othergj-eBusStop-line-chart-list.js
@@ -19,16 +19,16 @@ svg.othergj-eBusStop-line-chart {
     left: 0;
     /* 文本css */
-    font-style: normal;
-    font-variant-ligatures: normal;
-    font-variant-caps: normal;
-    font-variant-numeric: normal;
-    font-variant-east-asian: normal;
-    font-weight: 400;
-    font-stretch: normal;
-    font-size: 14px;
-    line-height: 20px;
-    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    /*font-style: normal;*/
+    /*font-variant-ligatures: normal;*/
+    /*font-variant-caps: normal;*/
+    /*font-variant-numeric: normal;*/
+    /*font-variant-east-asian: normal;*/
+    /*font-weight: 400;*/
+    /*font-stretch: normal;*/
+    /*font-size: 14px;*/
+    /*line-height: 20px;*/
+    /*font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;*/
 }
 svg.othergj-eBusStop-line-chart path.station_link {
@@ -49,7 +49,7 @@ svg.othergj-eBusStop-line-chart text.station_text {
     writing-mode: tb;
     fill: #3e3e3e;
     letter-spacing: -.2px;
-    text-shadow: 0 0 2px #dadada;
+    /*text-shadow: 0 0 2px #dadada;*/
     Pointer-events: none;
 }
@@ -107,11 +107,25 @@ class EBusStopGpsData {
   get arrivalInfo () { return this._arrivalInfo }
   get gpsDataList () { return this._gpsDataList }
+  generateArrivalInfoForSvg () { // d3绘制svg用数据
+    let dataList = []
+    if (this._lineName) {
+      dataList.push({
+        d3DataKey: this._lineName + '_' + this._lineCode,
+        lineName: this._lineName,
+        stopName: this._endStopName,
+        startTime: this._startTime,
+        endTime: this._endTime,
+        arrivalInfo: this._arrivalInfo
+      })
+    }
+    return dataList
+  }
   // 使用远程数据设置属性，对应 othergj-eBusStop-line-chart-list-scrollPage-innerData.js中的ScrollPageInnerDataItem类
   // 远程数据格式参考 http://36.134.151.106:19102/General_Interface/getArriveVO?deviceId=66MH0001
   setFromRemoteInfo (info) {
-    // 重新构造gps数据
+    // 1、重新构造gps数据
     let gpsDataList = []
     if (info['lineRoute'] && info['lineRoute'].length) {
       info['lineRoute'].map((station, i) => {
@@ -123,7 +137,47 @@ class EBusStopGpsData {
     }
     this._gpsDataList = gpsDataList
-    // TODO：计算报站信息
+    // 2、计算报站信息
+    // 2-1、计算当前站牌站点在路由中的index
+    let currentStopIndexList = [] // 当前站点索引列表（可能有多个）
+    if (info['lineRoute'] && info['lineRoute'].length) {
+      info['lineRoute'].map((station, i) => {
+        if (station['this'] && station['this'] === 'yes') {
+          currentStopIndexList.push(i)
+        }
+      })
+    }
+    if (currentStopIndexList.length === 0) {
+      this._arrivalInfo = '等待发车'
+      return this
+    }
+    let currentStopIndex = currentStopIndexList[0] // 当前站点索引（默认取第一个）
+    for (let i = currentStopIndex; i >= 0; i--) {
+      // 计算离当前站点最近的一班车的报站信息
+      let info = info['lineRoute'][i]
+      if (info['laststop'] && info['laststop'] === info['stationCode']) {
+        let stops = currentStopIndex - i // 距离几站
+        if (stops >= 2) {
+          this._arrivalInfo = stops + "站"
+        } else if (stops === 1) {
+          if (info['state'] === '1') { // 本站前一站进站
+            this._arrivalInfo = "1站"
+          } else { // 本站前一站出站
+            this._arrivalInfo = "即将进站"
+          }
+        } else {
+          if (info['state'] === '1') { // 本站进站
+            this._arrivalInfo = "即将进站"
+          } else { // 本站出站
+            this._arrivalInfo = "等待发车"
+          }
+        }
+        break;
+      }
+    }
+
+
+
     return this
   }
@@ -136,32 +136,37 @@ export default {
     background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
     // 图内层css
     _flag_5_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层线路图css属性" class="bsth-line-item-divider"></hr>) } }),
-    svg_background: PropTypes.color({ label: '线路图背景颜色', defaultValue: '#9EE0DF', layout: { prefixCls: 'bsth-line' } }),
+    svg_background: PropTypes.color({ label: '线路图背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    chart_line_gradient_color_start: PropTypes.color({ label: '背景渐变开始颜色', defaultValue: '#041e4c', layout: { prefixCls: 'bsth-line' } }),
+    chart_line_gradient_color_end: PropTypes.color({ label: '背景渐变结束颜色', defaultValue: '#0c5198', layout: { prefixCls: 'bsth-line' } }),
+    chart_line_background_rect_r: PropTypes.number({ label: '背景框圈角大小', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
+    chart_line_background_up_stroke_color: PropTypes.color({ label: '背景上边框颜色', defaultValue: '#819ebe', layout: { prefixCls: 'bsth-line' } }),
+    chart_line_background_up_stroke_width: PropTypes.number({ label: '背景上边框宽度', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
     chart_left_padding: PropTypes.number({ label: '内部线路图距离左边', defaultValue: 50, layout: { prefixCls: 'bsth-line' } }),
     chart_right_padding: PropTypes.number({ label: '内部线路图距离右边', defaultValue: 50, layout: { prefixCls: 'bsth-line' } }),
     chart_top_padding: PropTypes.number({ label: '内部线路图距离上边', defaultValue: 40, layout: { prefixCls: 'bsth-line' } }),
-    chart_up_line_path_s_width: PropTypes.number({ label: '上部分线宽度', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
-    chart_up_line_path_s_color: PropTypes.color({ label: '上部分线颜色', defaultValue: '#008000', layout: { prefixCls: 'bsth-line' } }),
+    chart_up_line_path_s_width: PropTypes.number({ label: '上部分线宽度', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }),
+    chart_up_line_path_s_color: PropTypes.color({ label: '上部分线颜色', defaultValue: '#6ab5fc', layout: { prefixCls: 'bsth-line' } }),
     chart_up_line_circle_f_color_current: PropTypes.color({ label: '线圆圈填充色-当前站点', defaultValue: '#CB0808', layout: { prefixCls: 'bsth-line' } }),
     chart_up_line_circle_f_color_before: PropTypes.color({ label: '线圆圈填充色-前面站点', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
     chart_up_line_circle_f_color_after: PropTypes.color({ label: '线圆圈填充色-后面站点', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
-    chart_up_line_circle_r: PropTypes.number({ label: '线圆圈大小', defaultValue: 8, layout: { prefixCls: 'bsth-line' } }),
-    chart_station_text_top_padding: PropTypes.number({ label: '站点文字距离上边', defaultValue: 60, layout: { prefixCls: 'bsth-line' } }),
-    chart_station_text_font_size_current: PropTypes.number({ label: '站名字体大小-当前站点', defaultValue: 25, layout: { prefixCls: 'bsth-line' } }),
-    chart_station_text_font_size_before: PropTypes.number({ label: '站名字体大小-前面站点', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
-    chart_station_text_font_size_after: PropTypes.number({ label: '站名字体大小-后面站点', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
-    chart_station_text_space: PropTypes.number({ label: '站名间距', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
-    chart_station_text_transform_second: PropTypes.number({ label: '站名滚动间隔(秒)', defaultValue: 6, layout: { prefixCls: 'bsth-line' } }),
-    chart_up_station_text_font_f_color_current: PropTypes.color({ label: '站名颜色-当前站点', defaultValue: '#060D37', layout: { prefixCls: 'bsth-line' } }),
-    chart_up_station_text_font_f_color_before: PropTypes.color({ label: '站名颜色-前面站点', defaultValue: '#9398B4', layout: { prefixCls: 'bsth-line' } }),
-    chart_up_station_text_font_f_color_after: PropTypes.color({ label: '站名颜色-后面站点', defaultValue: '#4556b6', layout: { prefixCls: 'bsth-line' } }),
+    chart_up_line_circle_r: PropTypes.number({ label: '线圆圈大小', defaultValue: 3, layout: { prefixCls: 'bsth-line' } }),
+    chart_station_text_top_padding: PropTypes.number({ label: '站点文字距离上边', defaultValue: 50, layout: { prefixCls: 'bsth-line' } }),
+    chart_station_text_font_size_current: PropTypes.number({ label: '站名字体大小-当前站点', defaultValue: 12, layout: { prefixCls: 'bsth-line' } }),
+    chart_station_text_font_size_before: PropTypes.number({ label: '站名字体大小-前面站点', defaultValue: 12, layout: { prefixCls: 'bsth-line' } }),
+    chart_station_text_font_size_after: PropTypes.number({ label: '站名字体大小-后面站点', defaultValue: 12, layout: { prefixCls: 'bsth-line' } }),
+    chart_station_text_space: PropTypes.number({ label: '站名间距', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }),
+    chart_station_text_transform_second: PropTypes.number({ label: '站名滚动间隔(秒)', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
+    chart_up_station_text_font_f_color_current: PropTypes.color({ label: '站名颜色-当前站点', defaultValue: '#CB0808', layout: { prefixCls: 'bsth-line' } }),
+    chart_up_station_text_font_f_color_before: PropTypes.color({ label: '站名颜色-前面站点', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    chart_up_station_text_font_f_color_after: PropTypes.color({ label: '站名颜色-后面站点', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
     _flag_6_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层下部分线css属性" class="bsth-line-item-divider"></hr>) } }),
-    down_line_left_padding: PropTypes.number({ label: '线距离左边', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
-    down_line_right_padding: PropTypes.number({ label: '线距离右边', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
+    down_line_left_padding: PropTypes.number({ label: '线距离左边', defaultValue: 100, layout: { prefixCls: 'bsth-line' } }),
+    down_line_right_padding: PropTypes.number({ label: '线距离右边', defaultValue: 100, layout: { prefixCls: 'bsth-line' } }),
     down_line_bottom_padding: PropTypes.number({ label: '线距离下边', defaultValue: 6, layout: { prefixCls: 'bsth-line' } }),
-    down_line_s_width: PropTypes.number({ label: '线宽度', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
+    down_line_s_width: PropTypes.number({ label: '线宽度', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }),
     down_line_s_color: PropTypes.color({ label: '线颜色', defaultValue: '#277461', layout: { prefixCls: 'bsth-line' } }),
-    down_line_arrow_width: PropTypes.number({ label: '箭头宽度', defaultValue: 55, layout: { prefixCls: 'bsth-line' } }),
+    down_line_arrow_width: PropTypes.number({ label: '箭头宽度', defaultValue: 100, layout: { prefixCls: 'bsth-line' } }),
     down_line_arrow_height: PropTypes.number({ label: '箭头高度', defaultValue: 15, layout: { prefixCls: 'bsth-line' } }),
     _flag_7_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="无数据提示css属性" class="bsth-line-item-divider"></hr>) } }),
     empty_info_font_size: PropTypes.number({ label: '无数据提示文字字体大小', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
@@ -171,13 +176,31 @@ export default {
     chart_gps_rect_color: PropTypes.color({ label: 'gps车辆rect背景色', defaultValue: '#3e50b3', layout: { prefixCls: 'bsth-line' } }),
     chart_gps_rect_width: PropTypes.number({ label: 'gps车辆rect宽度', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
     chart_gps_rect_height: PropTypes.number({ label: 'gps车辆rect高度', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
+    _flag_9_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="左侧线路信息css属性" class="bsth-line-item-divider"></hr>) } }),
+    left_part_width: PropTypes.number({ label: '左侧信息整体宽度', defaultValue: 200, layout: { prefixCls: 'bsth-line' } }),
+    left_part_right_padding: PropTypes.number({ label: '左侧信息具体右侧', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }),
+    left_part_gradient_color_start: PropTypes.color({ label: '背景渐变开始颜色', defaultValue: '#031945', layout: { prefixCls: 'bsth-line' } }),
+    left_part_gradient_color_end: PropTypes.color({ label: '背景渐变结束颜色', defaultValue: '#04275c', layout: { prefixCls: 'bsth-line' } }),
+    left_part_background_rect_r: PropTypes.number({ label: '背景框圈角大小', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
+    left_part_background_up_stroke_color: PropTypes.color({ label: '背景上边框颜色', defaultValue: '#819ebe', layout: { prefixCls: 'bsth-line' } }),
+    left_part_background_up_stroke_width: PropTypes.number({ label: '背景上边框宽度', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
+    left_part_line_name_font_size: PropTypes.number({ label: '线路名称字体大小', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
+    left_part_line_name_font_color: PropTypes.color({ label: '线路名称字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    left_part_info_left_font_size: PropTypes.number({ label: '左侧标题字体大小', defaultValue: 15, layout: { prefixCls: 'bsth-line' } }),
+    left_part_info_left_font_color: PropTypes.color({ label: '左侧标题字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    left_part_end_stop_font_size: PropTypes.number({ label: '开往站点字体大小', defaultValue: 16, layout: { prefixCls: 'bsth-line' } }),
+    left_part_end_stop_font_color: PropTypes.color({ label: '开往站点字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    left_part_arrival_info_font_size: PropTypes.number({ label: '到站信息字体大小', defaultValue: 16, layout: { prefixCls: 'bsth-line' } }),
+    left_part_arrival_info_font_color: PropTypes.color({ label: '到站信息字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    left_part_start_end_time_font_size: PropTypes.number({ label: '首末班信息字体大小', defaultValue: 16, layout: { prefixCls: 'bsth-line' } }),
+    left_part_start_end_time_font_color: PropTypes.color({ label: '首末班信息字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } })
   },
   render () {
     const innerDivStyle = {
       'width': this.component_width + 'px',
       'height': this.component_height + 'px',
-      'border': this.border_size + 'px solid black',
+      'border': this.border_size + 'px solid white',
       'margin-left': this.margin_left + 'px',
       'margin-right': this.margin_right + 'px',
       'margin-top': this.margin_top + 'px',
@@ -220,12 +243,33 @@ export default {
           <svg class="othergj-eBusStop-line-chart"
                data-code={this.eBusStopData.lineCode}
                style={svgStyle}>
-            <g class="line-wrap"></g>
-            <g class="gps-wrap"></g>
-            <g class="marker-cluster"></g>
-            <g class="arrow-wrap">
-              <path d={downLinePathD} style={{ 'fill': this.down_line_s_color }}></path>
+            <defs>
+              <linearGradient id="leftpart-background-gradient">
+                <stop offset="0%" stop-color={this.left_part_gradient_color_start}></stop>
+                <stop offset="100%" stop-color={this.left_part_gradient_color_end}></stop>
+              </linearGradient>
+              <linearGradient id="linechart-background-gradient">
+                <stop offset="0%" stop-color={this.chart_line_gradient_color_start} />
+                <stop offset="50%" stop-color={this.chart_line_gradient_color_end} />
+                <stop offset="100%" stop-color={this.chart_line_gradient_color_start} />
+              </linearGradient>
+              <linearGradient id="empty-background-gradient">
+                <stop offset="0%" stop-color={this.chart_line_gradient_color_start} />
+                <stop offset="50%" stop-color={this.chart_line_gradient_color_end} />
+                <stop offset="100%" stop-color={this.chart_line_gradient_color_start} />
+              </linearGradient>
+            </defs>
+
+            <g class="lineInfo"></g>
+            <g class="lineRouteGpsInfo" transform={ "translate(" + this.left_part_width + ",0)" }>
+              <g class="line-wrap"></g>
+              <g class="gps-wrap"></g>
+              <g class="marker-cluster"></g>
+              <g class="arrow-wrap">
+                <path d={downLinePathD} style={{ 'fill': this.down_line_s_color }}></path>
+              </g>
             </g>
+            <g class="emptyInfo"></g>
           </svg>
           {
             this.eBusStopData.routeStationDataList.length === 0 ? (<div style={emptyInfoStyle}>线路未开通，系统调试中</div>) : ''
@@ -281,6 +325,12 @@ export default {
     // 刷新gps svg
     this.refreshLineSvg_gps()
+    // 刷新线路信息
+    this.refreshLineInfoSvg()
+
+    // 刷新空信息
+    this.refreshEmptyDataSvg()
+
     // svg文本滚动监控开启
     if (this.editorMode === 'preview') {
       this.svgTextTransformPositionTimer.count ++
@@ -335,7 +385,8 @@ export default {
       let self = this
       self.svgTextTransformPositionTimer.timer = setTimeout(function () {
         // console.log('svgTextTransformPositionTimer.count')
-        self.transformStationText()
+        // self.transformStationText_repeatReverse()
+        self.transformStationText_upScroll()
         self.svgTextTransformPositionTimer.count ++
       }, self.svgTextTransformPositionTimer.millisecond)
     },
@@ -374,6 +425,7 @@ export default {
       let self = this
       if (!Utils.objectEquals(currentVal, oldVal)) {
         self.refreshLineSvg()
+        self.refreshEmptyDataSvg()
       }
     },
     eBusStopGpsData: {
@@ -381,6 +433,8 @@ export default {
         let self = this
         console.log('refreshLineSvg_gps')
         self.refreshLineSvg_gps()
+        self.refreshLineInfoSvg()
+        self.refreshEmptyDataSvg()
       },
       deep: true
     },
@@ -396,11 +450,15 @@ export default {
       this.refreshLineSvg()
       this.refreshDownLineSvg()
       this.refreshLineSvg_gps()
+      this.refreshLineInfoSvg()
+      this.refreshEmptyDataSvg()
     },
     svg_height () {
       this.refreshLineSvg()
       this.refreshDownLineSvg()
       this.refreshLineSvg_gps()
+      this.refreshLineInfoSvg()
+      this.refreshEmptyDataSvg()
     },
     // ----------- 图外层css 监控 ----------- //
     margin_left () {
@@ -430,6 +488,28 @@ export default {
     svg_background () {
       this.refreshLineSvg()
     },
+
+    chart_line_background_rect_r (val) {
+      let svg = this.private_svg
+      svg.selectAll('g.background rect.main')
+        .attr('rx', val)
+        .attr('ry', val)
+      svg.selectAll('g.mask rect.up_mask')
+        .attr('rx', val)
+        .attr('ry', val)
+      svg.selectAll('g.mask rect.down_mask')
+        .attr('rx', val)
+        .attr('ry', val)
+    },
+    chart_line_background_rect_r () {
+      this.refreshLineSvg()
+    },
+    chart_line_background_up_stroke_color () {
+      this.refreshLineSvg()
+    },
+    chart_line_background_up_stroke_width () {
+      this.refreshLineSvg()
+    },
     chart_left_padding: function () {
       this.refreshLineSvg()
       this.refreshDownLineSvg()
@@ -483,7 +563,7 @@ export default {
     },
     chart_station_text_font_size_current: function (val) {
       let svg = this.private_svg
-      svg.selectAll('g.item text.station_text.up.current')
+      svg.selectAll('g.textItems text.station_text.up.current')
         .style('font-size', val)
       this.refreshLineSvg()
       this.refreshDownLineSvg()
@@ -491,7 +571,7 @@ export default {
     },
     chart_station_text_font_size_before: function (val) {
       let svg = this.private_svg
-      svg.selectAll('g.item text.station_text.up.before')
+      svg.selectAll('g.textItems text.station_text.up.before')
         .style('font-size', val)
       this.refreshLineSvg()
       this.refreshDownLineSvg()
@@ -499,7 +579,7 @@ export default {
     },
     chart_station_text_font_size_after: function (val) {
       let svg = this.private_svg
-      svg.selectAll('g.item text.station_text.up.after')
+      svg.selectAll('g.textItems text.station_text.up.after')
         .style('font-size', val)
       this.refreshLineSvg()
       this.refreshDownLineSvg()
@@ -507,7 +587,7 @@ export default {
     },
     chart_station_text_space: function (val) {
       let d3 = this.private_d3
-      d3.selectAll('g.item text')
+      d3.selectAll('g.textItems text')
         .attr('textLength', function (d) {
           if (!d.name) {
             return 0
@@ -518,18 +598,18 @@ export default {
     },
     chart_up_station_text_font_f_color_current: function (val) {
       let svg = this.private_svg
-      svg.selectAll('g.item text.station_text.up.current')
-        .style('stroke', val)
+      svg.selectAll('g.textItems text.station_text.up.current')
+        .style('fill', val)
     },
     chart_up_station_text_font_f_color_before: function (val) {
       let svg = this.private_svg
-      svg.selectAll('g.item text.station_text.up.before')
-        .style('stroke', val)
+      svg.selectAll('g.textItems text.station_text.up.before')
+        .style('fill', val)
     },
     chart_up_station_text_font_f_color_after: function (val) {
       let svg = this.private_svg
-      svg.selectAll('g.item text.station_text.up.after')
-        .style('stroke', val)
+      svg.selectAll('g.textItems text.station_text.up.after')
+        .style('fill', val)
     },
     // ----------- _flag_6_属性 ------------- //
     down_line_left_padding: function () {
@@ -565,9 +645,65 @@ export default {
     chart_gps_rect_height (val) {
       this.busIconComData.height = val
       this.refreshLineSvg_gps()
+    },
+
+    // ----------- _flag_8_属性 ------------- //
+    left_part_width () {
+      this.refreshLineSvg()
+      this.refreshDownLineSvg()
+      this.refreshLineSvg_gps()
+      this.refreshLineInfoSvg()
+    },
+    left_part_right_padding () {
+      this.refreshLineInfoSvg()
+    },
+    left_part_background_rect_r () {
+      this.refreshLineInfoSvg()
+      this.refreshEmptyDataSvg()
+    },
+    left_part_background_up_stroke_color () {
+      this.refreshLineInfoSvg()
+      this.refreshEmptyDataSvg()
+    },
+    left_part_background_up_stroke_width () {
+      this.refreshLineInfoSvg()
+      this.refreshEmptyDataSvg()
+    },
+
+    left_part_right_padding () {
+      this.refreshLineInfoSvg()
+    },
+    left_part_line_name_font_size () {
+      this.refreshLineInfoSvg()
+    },
+    left_part_line_name_font_color () {
+      this.refreshLineInfoSvg()
+    },
+    left_part_info_left_font_size () {
+      this.refreshLineInfoSvg()
+    },
+    left_part_info_left_font_color () {
+      this.refreshLineInfoSvg()
+    },
+    left_part_end_stop_font_size () {
+      this.refreshLineInfoSvg()
+    },
+    left_part_end_stop_font_color () {
+      this.refreshLineInfoSvg()
+    },
+    left_part_arrival_info_font_size () {
+      this.refreshLineInfoSvg()
+    },
+    left_part_arrival_info_font_color () {
+      this.refreshLineInfoSvg()
+    },
+    left_part_start_end_time_font_size () {
+      this.refreshLineInfoSvg()
+    },
+    left_part_start_end_time_font_color () {
+      this.refreshLineInfoSvg()
     }
-    // TODO：
   },
   methods: {
     findD3SvgDom () {
@@ -579,7 +715,7 @@ export default {
     refreshDownLineSvg () {
       let self = this
-      let width = self.svg_width // 内部整个svg的宽度
+      let width = self.svg_width - self.left_part_width // 内部整个svg的宽度
       let height = self.svg_height // 内部整个svg的高度
       // 计算svg内部下部分线的属性
@@ -607,7 +743,7 @@ export default {
       let d3 = self.private_d3
       let routeData = self.eBusStopData.routeStationDataList
-      let width = self.svg_width // 内部整个svg的宽度
+      let width = self.svg_width - self.left_part_width // 内部整个svg的宽度
       let height = self.svg_height // 内部整个svg的高度
       // let svgNameSpace = self.private_svgns
       let svg = self.private_svg
@@ -623,24 +759,50 @@ export default {
       let textDownMaskRectHeight = self.down_line_bottom_padding +
         self.down_line_arrow_height + self.down_line_s_width + 10;
-      // ------------ 1、添加g元素 ---------- //
-      let itemsUpdate = svg.select('g.line-wrap').selectAll('g.item')
-        .data(routeData, function (d) {
-          return d.code
-        })
-      let itemsEnter = itemsUpdate
-      let itemsExit = itemsUpdate.exit()
-
-      itemsExit.remove()
-      itemsEnter = itemsEnter.enter().append('g').classed('item', true)
-
       // 创建x轴比例尺
       let xScale = d3.scaleLinear()
         .domain([0, routeData.length - 1]) // 定义域
         .range([chartLeftPadding, width - chartRightPadding]) // 值域
-      // ------------ 2、添加/更新线路图上部分的站点名称text元素 ---------- //
-      itemsEnter.append('text')
+      // --------------- 1、添加/更新 线路图背景rect ------------- //
+      let backgroundRectData = [{key: 'bgKey1', id: 'linechart-background-gradient'}]
+      if (!routeData || routeData.length === 0) {
+        backgroundRectData = []
+      }
+      let backgroundUpdate = svg.select('g.line-wrap').selectAll('g.background')
+        .data(backgroundRectData, function (d) {
+          return d.key
+        })
+      let backgroundEnter = backgroundUpdate
+      let backgroundExit = backgroundUpdate.exit()
+      backgroundExit.remove()
+      backgroundEnter = backgroundEnter.enter().append('g').classed('background', true)
+      backgroundEnter.append('rect')
+        .classed('main', true)
+        .style('fill', function (d) {
+          return `url(#${d.id})`
+        })
+        .attr('width', width)
+        .attr('height', height)
+        .attr('rx', self.chart_line_background_rect_r)
+        .attr('ry', self.chart_line_background_rect_r)
+      backgroundUpdate.select('rect.main')
+        .attr('width', width)
+        .attr('height', height)
+        .attr('rx', self.chart_line_background_rect_r)
+        .attr('ry', self.chart_line_background_rect_r)
+
+      // --------------- 2、添加/更新线路图上部分的站点名称text元素 ------------- //
+      let stationTextItemsUpdate = svg.select('g.line-wrap').selectAll('g.textItems')
+        .data(routeData, function (d) {
+          return d.code
+        })
+      let stationTextItemsEnter = stationTextItemsUpdate
+      let stationTextItemsExit = stationTextItemsUpdate.exit()
+      stationTextItemsExit.remove()
+      stationTextItemsEnter = stationTextItemsEnter.enter().append('g').classed('textItems', true)
+
+      stationTextItemsEnter.append('text')
         .classed('station_text', true)
         .classed('up', true)
         .classed('current', function (d, i) {
@@ -661,7 +823,7 @@ export default {
             return self.chart_station_text_font_size_after + 'px'
           }
         })
-        .style('stroke', function (d, i) {
+        .style('fill', function (d, i) {
           if (i === self.eBusStopData.currentStopStationIndex) {
             return self.chart_up_station_text_font_f_color_current
           } else if (i < self.eBusStopData.currentStopStationIndex) {
@@ -702,9 +864,9 @@ export default {
         })
         .attr('data-y-transform-flag', function () {
           // 判定文字上下滚动标识，1：可滚动，0：不可滚动，2：滚动中
-          let textMaxLenth = textDownMaskRectY - (textUpMaskRectY + textUpMaskRectHeight)
+          let textMaxLength = textDownMaskRectY - (textUpMaskRectY + textUpMaskRectHeight)
           let textLength = this.getBBox().height
-          if (textLength > textMaxLenth) {
+          if (textLength > textMaxLength) {
             // TODO：使用svg animate测试
             // let textAnimate = document.createElementNS(svgNameSpace, 'animate')
@@ -736,7 +898,7 @@ export default {
           }
         })
-      itemsUpdate.select('text.station_text')
+      stationTextItemsUpdate.select('text.station_text')
         .classed('up', true)
         .text(function (d) {
           // 更新的时候需要删除textLength，方便重新计算原始长度
@@ -772,9 +934,9 @@ export default {
         })
         .attr('data-y-transform-flag', function () {
           // 判定文字上下是否滚动，1：滚动，0：不滚动
-          let textMaxLenth = textDownMaskRectY - (textUpMaskRectY + textUpMaskRectHeight)
+          let textMaxLength = textDownMaskRectY - (textUpMaskRectY + textUpMaskRectHeight)
           let textLength = this.getBBox().height
-          if (textLength > textMaxLenth) {
+          if (textLength > textMaxLength) {
             // // TODO：使用svg animate测试
             // let textAnimate = document.createElementNS(svgNameSpace, 'animate')
@@ -816,8 +978,106 @@ export default {
             return 0
           }
         })
+      // ------------ 3、添加/更新 文本遮罩用的rect（和背景rect使用相同数据） ------------- //
+      let maskUpdate = svg.select('g.line-wrap').selectAll('g.mask')
+        .data(backgroundRectData, function (d) {
+          return d.key
+        })
+      let maskEnter = maskUpdate
+      let maskExit = maskUpdate.exit()
+      maskExit.remove()
+      maskEnter = maskEnter.enter().append('g').classed('mask', true)
-      // ------------ 3、添加/更新线路图上部分的的path元素 ---------- //
+      // 当text向上移动的时候，遮住超出的部分，类似div的overflow
+      maskEnter.append('rect')
+        .classed('up_mask', true)
+        .style('fill', function (d) {
+          return `url(#${d.id})`
+        })
+        .attr('x', 0)
+        .attr('y', 0)
+        .attr('width', width)
+        .attr('height', textUpMaskRectHeight)
+        .attr('rx', self.chart_line_background_rect_r)
+        .attr('ry', self.chart_line_background_rect_r)
+      maskUpdate.select('rect.up_mask')
+        .attr('width', width)
+        .attr('height', textUpMaskRectHeight)
+      // 当text向下移动的时候，遮住超出的部分，类似div的overflow
+      maskEnter.append('rect')
+        .classed('down_mask', true)
+        .style('fill', function (d) {
+          return `url(#${d.id})`
+        })
+        .attr('x', 0)
+        .attr('y', function () {
+          return textDownMaskRectY
+        })
+        .attr('width', width)
+        .attr('height', textDownMaskRectHeight)
+        .attr('rx', self.chart_line_background_rect_r)
+        .attr('ry', self.chart_line_background_rect_r)
+      maskUpdate.select('rect.down_mask')
+        .attr('y', function () {
+          return textDownMaskRectY
+        })
+        .attr('width', width)
+        .attr('height', textDownMaskRectHeight)
+
+      // ------------ 3-1、添加/更新背景rect的上边框 ------------- //
+      let strokeUpdate = svg.select('g.line-wrap').selectAll('g.stroke')
+        .data(backgroundRectData, function (d) {
+          return d.key
+        })
+      let strokeEnter = strokeUpdate
+      let strokeExit = strokeUpdate.exit()
+      strokeExit.remove()
+      strokeEnter = strokeEnter.enter().append('g').classed('stroke', true)
+
+      let s_data = [
+        [self.chart_line_background_rect_r / 2, self.chart_line_background_up_stroke_width / 2],
+        [width - self.chart_line_background_rect_r / 2, self.chart_line_background_up_stroke_width / 2]]
+      let s_line = d3.line()
+      strokeEnter.append('path')
+        .classed('up_stroke', true)
+        .style('stroke', self.chart_line_background_up_stroke_color)
+        .style('stroke-width', self.chart_line_background_up_stroke_width)
+        .attr('d', function (d, i) {
+          return s_line(s_data)
+        })
+      strokeUpdate.select('path.up_stroke')
+        .style('stroke', self.chart_line_background_up_stroke_color)
+        .style('stroke-width', self.chart_line_background_up_stroke_width)
+        .attr('d', function (d, i) {
+          return s_line(s_data)
+        })
+
+      // strokeEnter.append('circle')
+      //   .classed('left_corner', true)
+      //   .attr('cx', self.chart_line_background_rect_r + self.chart_line_background_up_stroke_width / 2 - 1)
+      //   .attr('cy', self.chart_line_background_rect_r + self.chart_line_background_up_stroke_width / 2 - 1)
+      //   .attr('r', self.chart_line_background_rect_r)
+      //   .style('stroke', self.chart_line_background_up_stroke_color)
+      //   .style('stroke-width', self.chart_line_background_up_stroke_width)
+      //   .style('stroke-dashoffset', - 3.14 * self.chart_line_background_rect_r)
+      //   .style('stroke-dasharray', 3.14 * self.chart_line_background_rect_r / 2 + ",100")
+      //   .style('fill', 'none')
+
+      // ------------ 4、添加线路图 ------------- //
+      // ------------ 4-1、添加g元素 ---------- //
+      let itemsUpdate = svg.select('g.line-wrap').selectAll('g.item')
+        .data(routeData, function (d) {
+          return d.code
+        })
+      let itemsEnter = itemsUpdate
+      let itemsExit = itemsUpdate.exit()
+      itemsExit.remove()
+      itemsEnter = itemsEnter.enter().append('g').classed('item', true)
+
+      // ------------ 4-2、添加/更新线路图上部分的站点名称text元素 ---------- //
+      // 由第2步添加
+
+      // ------------ 4-3、添加/更新线路图上部分的的path元素 ---------- //
       let upLineFun = d3.line()
         .x(xScale)
         .y(function () {
@@ -836,35 +1096,36 @@ export default {
         })
       // ------------ 4-up_mask、添加/更新上部分rect ------------- //
+      // 由第3步添加了
       // 当text向上移动的时候，遮住超出的部分，类似div的overflow
-      itemsEnter.append('rect')
-        .classed('up_mask', true)
-        .style('fill', self.svg_background)
-        .style('stroke-width', 0)
-        .attr('x', function (d, i) {
-          let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
-          return text_bound.x
-        })
-        .attr('y', textUpMaskRectY)
-        .attr('width', function () {
-          let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
-          return text_bound.width
-        })
-        .attr('height', textUpMaskRectHeight)
-      itemsUpdate.select('rect.up_mask')
-        .style('fill', self.svg_background)
-        .attr('x', function (d, i) {
-          let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
-          return text_bound.x
-        })
-        .attr('y', textUpMaskRectY)
-        .attr('width', function () {
-          let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
-          return text_bound.width
-        })
-        .attr('height', textUpMaskRectHeight)
+      // itemsEnter.append('rect')
+      //   .classed('up_mask', true)
+      //   .style('fill', self.svg_background)
+      //   .style('stroke-width', 0)
+      //   .attr('x', function (d, i) {
+      //     let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
+      //     return text_bound.x
+      //   })
+      //   .attr('y', textUpMaskRectY)
+      //   .attr('width', function () {
+      //     let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
+      //     return text_bound.width
+      //   })
+      //   .attr('height', textUpMaskRectHeight)
+      // itemsUpdate.select('rect.up_mask')
+      //   .style('fill', self.svg_background)
+      //   .attr('x', function (d, i) {
+      //     let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
+      //     return text_bound.x
+      //   })
+      //   .attr('y', textUpMaskRectY)
+      //   .attr('width', function () {
+      //     let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
+      //     return text_bound.width
+      //   })
+      //   .attr('height', textUpMaskRectHeight)
-      // ------------ 4、添加/更新线路图上部分的circle元素 ---------- //
+      // ------------ 4-4、添加/更新线路图上部分的circle元素 ---------- //
       itemsEnter.select(function (d) {
         return d.type !== 1 ? this : null
       }).append('circle')
@@ -907,44 +1168,91 @@ export default {
         })
       // ------------ 4-down_mask、添加/更新上部分rect ------------- //
+      // 由第3步添加了
       // 当text向下移动的时候，遮住超出的部分，类似div的overflow
-      itemsEnter.append('rect')
-        .classed('down_mask', true)
-        .style('fill', self.svg_background)
-        .style('stroke-width', 0)
-        .attr('x', function () {
-          let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
-          return text_bound.x
-        })
-        .attr('y', function () {
-          return textDownMaskRectY
-        })
-        .attr('width', function () {
-          let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
-          return text_bound.width
-        })
-        .attr('height', function () {
-          return textDownMaskRectHeight
-        })
-      itemsUpdate.select('rect.down_mask')
-        .style('fill', self.svg_background)
-        .attr('x', function () {
-          let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
-          return text_bound.x
+      // itemsEnter.append('rect')
+      //   .classed('down_mask', true)
+      //   .style('fill', self.svg_background)
+      //   .style('stroke-width', 0)
+      //   .attr('x', function () {
+      //     let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
+      //     return text_bound.x
+      //   })
+      //   .attr('y', function () {
+      //     return textDownMaskRectY
+      //   })
+      //   .attr('width', function () {
+      //     let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
+      //     return text_bound.width
+      //   })
+      //   .attr('height', function () {
+      //     return textDownMaskRectHeight
+      //   })
+      // itemsUpdate.select('rect.down_mask')
+      //   .style('fill', self.svg_background)
+      //   .attr('x', function () {
+      //     let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
+      //     return text_bound.x
+      //   })
+      //   .attr('y', function () {
+      //     return textDownMaskRectY
+      //   })
+      //   .attr('width', function () {
+      //     let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
+      //     return text_bound.width
+      //   })
+      //   .attr('height', function () {
+      //     return textDownMaskRectHeight
+      //   })
+
+    },
+    transformStationText_upScroll () { // 从下往上，反复移动
+      let self = this
+      let d3 = self.private_d3
+
+      let height = self.svg_height // 内部整个svg的高度
+
+      let chartStopNameTopPadding = self.chart_station_text_top_padding
+      let textUpMaskRectY = 0;
+      let textUpMaskRectHeight = chartStopNameTopPadding;
+      let textDownMaskRectY = (height - self.down_line_bottom_padding) -
+        (self.down_line_arrow_height + self.down_line_s_width)
+      let textMaxLength = textDownMaskRectY - (textUpMaskRectY + textUpMaskRectHeight)
+
+      d3.selectAll('text.station_text')
+        .select(function () {
+          let transform_flag = d3.select(this).attr('data-y-transform-flag')
+          return transform_flag === "1" ? this : null
         })
+        .transition()
+        .duration(self.chart_station_text_transform_second * 1000)
+        .ease(d3.easeLinear)
+        .attr('data-y-transform-flag', '2') // 状态变成滚动中
         .attr('y', function () {
-          return textDownMaskRectY
-        })
-        .attr('width', function () {
-          let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
-          return text_bound.width
+          // console.log('go y transform')
+
+          // 滚动的y坐标
+          let y = this.getBBox().y
+          // 滚动的方向
+          let dir = d3.select(this).attr('data-y-transform-direction')
+          // 滚动的距离
+          let y_transform_distance = this.getBBox().height
+          if (dir === 'up') {
+            return y - y_transform_distance // 第一次往上
+          } else {
+            return y - y_transform_distance - textMaxLength // 第二次开始从底部往上
+          }
         })
-        .attr('height', function () {
-          return textDownMaskRectHeight
+        .on('end', function () {
+          // 重置滚动状态
+          d3.select(this).attr('data-y-transform-flag', 1)
+          // 重置滚动状态
+          d3.select(this).attr('data-y-transform-direction', 'up_next_scroll')
+          d3.select(this).attr('y', textDownMaskRectY)
         })
-
     },
-    transformStationText () {
+
+    transformStationText_repeatReverse () { // 弹簧移动
       let self = this
       let d3 = self.private_d3
       d3.selectAll('text.station_text')
@@ -990,7 +1298,7 @@ export default {
       let $jQuery = self.private_jQuery
       let d3 = self.private_d3
-      let width = self.svg_width // 内部整个svg的宽度
+      let width = self.svg_width - self.left_part_width // 线路图的宽度
       let height = self.svg_height // 内部整个svg的高度
       let chartLeftPadding = self.chart_left_padding
       let chartRightPadding = self.chart_right_padding
@@ -1103,6 +1411,15 @@ export default {
           y = -100
           return y
         }
+        if (routeDataGroupByStationCode[d.stopCode]) { // 终点站的站外车不显示
+          if (routeDataGroupByStationCode[d.stopCode][0].isZdz) {
+            if (d.state === '0') {
+              y = -100
+              return y
+            }
+          }
+        }
+
         // 车辆rect的y坐标在circle上方，并偏移1.5倍circle的直径
         y = parseInt(svgCircle.attr('cy')) - self.chart_gps_rect_height - self.chart_up_line_circle_r * 1.5
         return y
@@ -1163,6 +1480,316 @@ export default {
       //   .attr('y', gpsRectY)
       // TODO：暂时不考虑rect内的文本显示，多个rect叠加后的显示问题
+    },
+
+    refreshLineInfoSvg () {
+      let self = this
+
+      let svg = self.private_svg
+      let $jQuery = self.private_jQuery
+      let d3 = self.private_d3
+
+      let width = self.left_part_width - self.left_part_right_padding // 线路信息区域的宽度
+      let height = self.svg_height // 内部整个svg的高度
+
+      let routeData = self.eBusStopData.routeStationDataList
+      let arrivalInfo = this.eBusStopGpsData.generateArrivalInfoForSvg()
+
+      // --------------- 0、添加/更新 线路图背景rect ------------- //
+      let backgroundRectData = [{key: 'bgKey2', id: 'leftpart-background-gradient'}]
+      if (!routeData || routeData.length === 0) {
+        backgroundRectData = []
+      }
+      let backgroundUpdate = svg.select('g.lineInfo').selectAll('g.background')
+        .data(backgroundRectData, function (d) {
+          return d.key
+        })
+      let backgroundEnter = backgroundUpdate
+      let backgroundExit = backgroundUpdate.exit()
+      backgroundExit.remove()
+      backgroundEnter = backgroundEnter.enter().append('g').classed('background', true)
+      backgroundEnter.append('rect')
+        .classed('main', true)
+        .style('fill', function (d) {
+          return `url(#${d.id})`
+        })
+        .attr('width', width)
+        .attr('height', height)
+        .attr('rx', self.left_part_background_rect_r)
+        .attr('ry', self.left_part_background_rect_r)
+      backgroundUpdate.select('rect.main')
+        .attr('width', width)
+        .attr('height', height)
+        .attr('rx', self.left_part_background_rect_r)
+        .attr('ry', self.left_part_background_rect_r)
+
+      // ------------ 0-1、添加/更新背景rect的上边框 ------------- //
+      let strokeUpdate = svg.select('g.lineInfo').selectAll('g.stroke')
+        .data(backgroundRectData, function (d) {
+          return d.key
+        })
+      let strokeEnter = strokeUpdate
+      let strokeExit = strokeUpdate.exit()
+      strokeExit.remove()
+      strokeEnter = strokeEnter.enter().append('g').classed('stroke', true)
+      let s_data = [
+        [self.left_part_background_rect_r / 2, self.left_part_background_up_stroke_width / 2],
+        [width - self.left_part_background_rect_r / 2, self.left_part_background_up_stroke_width / 2]]
+      let s_line = d3.line()
+      strokeEnter.append('path')
+        .classed('up_stroke', true)
+        .style('stroke', self.left_part_background_up_stroke_color)
+        .style('stroke-width', self.left_part_background_up_stroke_width)
+        .attr('d', function (d, i) {
+          return s_line(s_data)
+        })
+      strokeUpdate.select('path.up_stroke')
+        .style('stroke', self.left_part_background_up_stroke_color)
+        .style('stroke-width', self.left_part_background_up_stroke_width)
+        .attr('d', function (d, i) {
+          return s_line(s_data)
+        })
+
+      // --------------- 1、添加/更新 g,text 元素 -------------- //
+      // 添加g元素
+      let textItemsUpdate = svg.select('g.lineInfo').selectAll('g.arrivalInfo')
+        .data(arrivalInfo, function (d) {
+          return d.d3DataKey
+        })
+      let textItemsEnter = textItemsUpdate
+      let textItemsExit = textItemsUpdate.exit()
+      textItemsExit.remove()
+      textItemsEnter = textItemsEnter.enter().append('g')
+        .classed('arrivalInfo', true)
+
+      // 添加text主元素
+      textItemsEnter.append('text')
+        .attr('text-anchor', 'middle')
+
+      // --------------- 2、添加/更新 tspan 元素 ----------------- //
+      // 2-1、添加/更新 线路名称 tspan
+      textItemsEnter.select('text')
+        .append('tspan')
+        .classed('lineName', true)
+        .text(function (d) {
+          return d.lineName
+        })
+        .style('font-size', self.left_part_line_name_font_size)
+        .style('fill', self.left_part_line_name_font_color)
+        .attr('x', 0)
+      textItemsUpdate.select('tspan.lineName')
+        .style('font-size', self.left_part_line_name_font_size)
+        .style('fill', self.left_part_line_name_font_color)
+
+      // 2-2、添加/更新 开往站点 tspan
+      textItemsEnter.select('text').append('tspan')
+        .classed('endStop_left', true)
+        .text('开往：')
+        .style('font-size', self.left_part_info_left_font_size)
+        .style('fill', self.left_part_info_left_font_color)
+        .attr('x', 0)
+        .attr('dy', function () {
+          let tspan_box = d3.select(this.parentNode).select('tspan.lineName').node().getBBox()
+          return tspan_box.height + 2
+        })
+      textItemsEnter.select('text').append('tspan')
+        .classed('endStop_right', true)
+        .text(function (d) {
+          return d.stopName
+        })
+        .style('font-size', self.left_part_end_stop_font_size)
+        .style('fill', self.left_part_end_stop_font_color)
+
+      textItemsUpdate.select('tspan.endStop_left')
+        .style('font-size', self.left_part_info_left_font_size)
+        .style('fill', self.left_part_info_left_font_color)
+        .attr('dy', function () {
+          let tspan_box = d3.select(this.parentNode).select('tspan.lineName').node().getBBox()
+          return tspan_box.height + 2
+        })
+      textItemsUpdate.select('tspan.endStop_right')
+        .style('font-size', self.left_part_end_stop_font_size)
+        .style('fill', self.left_part_end_stop_font_color)
+
+      // 2-3、添加/更新 到站信息 tspan
+      textItemsEnter.select('text').append('tspan')
+        .classed('arrival_left', true)
+        .text('距离本站：')
+        .style('font-size', self.left_part_info_left_font_size)
+        .style('fill', self.left_part_info_left_font_color)
+        .attr('x', 0)
+        .attr('dy', function () {
+          let tspan_box_left = d3.select(this.parentNode).select('tspan.endStop_left').node().getBBox()
+          let tspan_box_right = d3.select(this.parentNode).select('tspan.endStop_right').node().getBBox()
+          if (tspan_box_left.height > tspan_box_right.height) {
+            return tspan_box_left.height + 2
+          } else {
+            return tspan_box_right.height + 2
+          }
+        })
+      textItemsEnter.select('text').append('tspan')
+        .classed('arrival_right', true)
+        .text(function (d) {
+          return d.arrivalInfo
+        })
+        .style('font-size', self.left_part_arrival_info_font_size)
+        .style('fill', self.left_part_arrival_info_font_color)
+
+      textItemsUpdate.select('tspan.arrival_left')
+        .style('font-size', self.left_part_info_left_font_size)
+        .style('fill', self.left_part_info_left_font_color)
+        .attr('dy', function () {
+          let tspan_box_left = d3.select(this.parentNode).select('tspan.endStop_left').node().getBBox()
+          let tspan_box_right = d3.select(this.parentNode).select('tspan.endStop_right').node().getBBox()
+          if (tspan_box_left.height > tspan_box_right.height) {
+            return tspan_box_left.height + 2
+          } else {
+            return tspan_box_right.height + 2
+          }
+        })
+      textItemsUpdate.select('tspan.arrival_right')
+        .text(function (d) {
+          return d.arrivalInfo
+        })
+        .style('font-size', self.left_part_arrival_info_font_size)
+        .style('fill', self.left_part_arrival_info_font_color)
+
+      // 2-4、添加/更新 首末班 tspan
+      textItemsEnter.select('text').append('tspan')
+        .classed('startEnd_left', true)
+        .text('首末班：')
+        .style('font-size', self.left_part_info_left_font_size)
+        .style('fill', self.left_part_info_left_font_color)
+        .attr('x', 0)
+        .attr('dy', function () {
+          let tspan_box_left = d3.select(this.parentNode).select('tspan.arrival_left').node().getBBox()
+          let tspan_box_right = d3.select(this.parentNode).select('tspan.arrival_right').node().getBBox()
+          if (tspan_box_left.height > tspan_box_right.height) {
+            return tspan_box_left.height + 2
+          } else {
+            return tspan_box_right.height + 2
+          }
+        })
+      textItemsEnter.select('text').append('tspan')
+        .classed('startEnd_right', true)
+        .text(function (d) {
+          return d.startTime + '~' + d.endTime
+        })
+        .style('font-size', self.left_part_start_end_time_font_size)
+        .style('fill', self.left_part_start_end_time_font_color)
+
+      textItemsUpdate.select('tspan.startEnd_left')
+        .style('font-size', self.left_part_info_left_font_size)
+        .style('fill', self.left_part_info_left_font_color)
+        .attr('dy', function () {
+          let tspan_box_left = d3.select(this.parentNode).select('tspan.arrival_left').node().getBBox()
+          let tspan_box_right = d3.select(this.parentNode).select('tspan.arrival_right').node().getBBox()
+          if (tspan_box_left.height > tspan_box_right.height) {
+            return tspan_box_left.height + 2
+          } else {
+            return tspan_box_right.height + 2
+          }
+        })
+      textItemsUpdate.select('tspan.startEnd_right')
+        .style('font-size', self.left_part_start_end_time_font_size)
+        .style('fill', self.left_part_start_end_time_font_color)
+
+      // 2-5、更新g的位置，水平居中/垂直居中
+      textItemsEnter.attr('transform', function (d) {
+        let g_bounds = this.getBBox()
+        let dx = (width - g_bounds.width) / 2 - g_bounds.x
+        let dy = (height - g_bounds.height) / 2 - g_bounds.y
+        if (dx < 0) {
+          dx = 1
+        }
+        if (dy < 0) {
+          dy = 1
+        }
+        return `translate(${dx}, ${dy})`
+      })
+
+      textItemsUpdate.attr('transform', function () {
+        let g_bounds = this.getBBox()
+        let dx = (width - g_bounds.width) / 2 - g_bounds.x
+        let dy = (height - g_bounds.height) / 2 - g_bounds.y
+        if (dx < 0) {
+          dx = 1
+        }
+        if (dy < 0) {
+          dy = 1
+        }
+        return `translate(${dx}, ${dy})`
+      })
+
+
+    },
+
+    refreshEmptyDataSvg () {
+      let self = this
+
+      let svg = self.private_svg
+      let $jQuery = self.private_jQuery
+      let d3 = self.private_d3
+
+      let width = self.svg_width // 线路信息区域的宽度
+      let height = self.svg_height // 内部整个svg的高度
+
+      let routeData = self.eBusStopData.routeStationDataList
+
+      // --------------- 0、添加/更新 线路图背景rect ------------- //
+      let backgroundRectData = [{key: 'bgKey3', id: 'empty-background-gradient'}]
+      if (routeData && routeData.length > 0) {
+        backgroundRectData = []
+      }
+      let backgroundUpdate = svg.select('g.emptyInfo').selectAll('g.background')
+        .data(backgroundRectData, function (d) {
+          return d.key
+        })
+      let backgroundEnter = backgroundUpdate
+      let backgroundExit = backgroundUpdate.exit()
+      backgroundExit.remove()
+      backgroundEnter = backgroundEnter.enter().append('g').classed('background', true)
+      backgroundEnter.append('rect')
+        .classed('main', true)
+        .style('fill', function (d) {
+          return `url(#${d.id})`
+        })
+        .attr('width', width)
+        .attr('height', height)
+        .attr('rx', self.left_part_background_rect_r)
+        .attr('ry', self.left_part_background_rect_r)
+      backgroundUpdate.select('rect.main')
+        .attr('width', width)
+        .attr('height', height)
+        .attr('rx', self.left_part_background_rect_r)
+        .attr('ry', self.left_part_background_rect_r)
+
+      // ------------ 0-1、添加/更新背景rect的上边框 ------------- //
+      let strokeUpdate = svg.select('g.emptyInfo').selectAll('g.stroke')
+        .data(backgroundRectData, function (d) {
+          return d.key
+        })
+      let strokeEnter = strokeUpdate
+      let strokeExit = strokeUpdate.exit()
+      strokeExit.remove()
+      strokeEnter = strokeEnter.enter().append('g').classed('stroke', true)
+      let s_data = [
+        [self.left_part_background_rect_r / 2, self.left_part_background_up_stroke_width / 2],
+        [width - self.left_part_background_rect_r / 2, self.left_part_background_up_stroke_width / 2]]
+      let s_line = d3.line()
+      strokeEnter.append('path')
+        .classed('up_stroke', true)
+        .style('stroke', self.left_part_background_up_stroke_color)
+        .style('stroke-width', self.left_part_background_up_stroke_width)
+        .attr('d', function (d, i) {
+          return s_line(s_data)
+        })
+      strokeUpdate.select('path.up_stroke')
+        .style('stroke', self.left_part_background_up_stroke_color)
+        .style('stroke-width', self.left_part_background_up_stroke_width)
+        .attr('d', function (d, i) {
+          return s_line(s_data)
+        })
     }
   }
@@ -303,7 +303,7 @@ class ScrollPageInnerData {
       }
       let eBusStopGpsData = new EBusStopGpsData(
         lineName, lineCode, routeData.lastStationName,
-        startTime, endTime, 'TODO：计算发车', gpsDataList)
+        startTime, endTime, '等待发车', gpsDataList)
       // 添加scroll数据
       rtnData._innerDataItemList.push(
@@ -72,12 +72,17 @@ export default {
     line_chart_background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
     // 图内层css
     _flag_5_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层上部分矩形css属性" class="bsth-line-item-divider"></hr>) } }),
-    svg_background: PropTypes.color({ label: '线路图背景颜色', defaultValue: '#9EE0DF', layout: { prefixCls: 'bsth-line' } }),
+    svg_background: PropTypes.color({ label: '线路图背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    chart_line_gradient_color_start: PropTypes.color({ label: '背景渐变开始颜色', defaultValue: '#041e4c', layout: { prefixCls: 'bsth-line' } }),
+    chart_line_gradient_color_end: PropTypes.color({ label: '背景渐变结束颜色', defaultValue: '#0c5198', layout: { prefixCls: 'bsth-line' } }),
+    chart_line_background_rect_r: PropTypes.number({ label: '背景框圈角大小', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
+    chart_line_background_up_stroke_color: PropTypes.color({ label: '背景上边框颜色', defaultValue: '#819ebe', layout: { prefixCls: 'bsth-line' } }),
+    chart_line_background_up_stroke_width: PropTypes.number({ label: '背景上边框宽度', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
     chart_left_padding: PropTypes.number({ label: '内部线路图距离左边', defaultValue: 50, layout: { prefixCls: 'bsth-line' } }),
     chart_right_padding: PropTypes.number({ label: '内部线路图距离右边', defaultValue: 50, layout: { prefixCls: 'bsth-line' } }),
     chart_top_padding: PropTypes.number({ label: '内部线路图距离上边', defaultValue: 40, layout: { prefixCls: 'bsth-line' } }),
     chart_up_line_path_s_width: PropTypes.number({ label: '上部分线宽度', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }),
-    chart_up_line_path_s_color: PropTypes.color({ label: '上部分线颜色', defaultValue: '#008000', layout: { prefixCls: 'bsth-line' } }),
+    chart_up_line_path_s_color: PropTypes.color({ label: '上部分线颜色', defaultValue: '#6ab5fc', layout: { prefixCls: 'bsth-line' } }),
     chart_up_line_circle_f_color_current: PropTypes.color({ label: '线圆圈填充色-当前站点', defaultValue: '#CB0808', layout: { prefixCls: 'bsth-line' } }),
     chart_up_line_circle_f_color_before: PropTypes.color({ label: '线圆圈填充色-前面站点', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
     chart_up_line_circle_f_color_after: PropTypes.color({ label: '线圆圈填充色-后面站点', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
@@ -87,10 +92,10 @@ export default {
     chart_station_text_font_size_before: PropTypes.number({ label: '站名字体大小-前面站点', defaultValue: 12, layout: { prefixCls: 'bsth-line' } }),
     chart_station_text_font_size_after: PropTypes.number({ label: '站名字体大小-后面站点', defaultValue: 12, layout: { prefixCls: 'bsth-line' } }),
     chart_station_text_space: PropTypes.number({ label: '站名间距', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }),
-    chart_station_text_transform_second: PropTypes.number({ label: '站名滚动间隔(秒)', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
-    chart_up_station_text_font_f_color_current: PropTypes.color({ label: '站名颜色-当前站点', defaultValue: '#060D37', layout: { prefixCls: 'bsth-line' } }),
-    chart_up_station_text_font_f_color_before: PropTypes.color({ label: '站名颜色-前面站点', defaultValue: '#9398B4', layout: { prefixCls: 'bsth-line' } }),
-    chart_up_station_text_font_f_color_after: PropTypes.color({ label: '站名颜色-后面站点', defaultValue: '#4556b6', layout: { prefixCls: 'bsth-line' } }),
+    chart_station_text_transform_second: PropTypes.number({ label: '站名滚动间隔(秒)', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
+    chart_up_station_text_font_f_color_current: PropTypes.color({ label: '站名颜色-当前站点', defaultValue: '#CB0808', layout: { prefixCls: 'bsth-line' } }),
+    chart_up_station_text_font_f_color_before: PropTypes.color({ label: '站名颜色-前面站点', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    chart_up_station_text_font_f_color_after: PropTypes.color({ label: '站名颜色-后面站点', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
     _flag_6_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层下部分线css属性" class="bsth-line-item-divider"></hr>) } }),
     down_line_left_padding: PropTypes.number({ label: '线距离左边', defaultValue: 100, layout: { prefixCls: 'bsth-line' } }),
     down_line_right_padding: PropTypes.number({ label: '线距离右边', defaultValue: 100, layout: { prefixCls: 'bsth-line' } }),
@@ -106,7 +111,25 @@ export default {
     _flag_8_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="车辆gps报站数据css属性" class="bsth-line-item-divider"></hr>) } }),
     chart_gps_rect_color: PropTypes.color({ label: 'gps车辆rect背景色', defaultValue: '#3e50b3', layout: { prefixCls: 'bsth-line' } }),
     chart_gps_rect_width: PropTypes.number({ label: 'gps车辆rect宽度', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
-    chart_gps_rect_height: PropTypes.number({ label: 'gps车辆rect高度', defaultValue: 20, layout: { prefixCls: 'bsth-line' } })
+    chart_gps_rect_height: PropTypes.number({ label: 'gps车辆rect高度', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
+    _flag_9_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="左侧线路信息css属性" class="bsth-line-item-divider"></hr>) } }),
+    left_part_width: PropTypes.number({ label: '左侧信息整体宽度', defaultValue: 200, layout: { prefixCls: 'bsth-line' } }),
+    left_part_right_padding: PropTypes.number({ label: '左侧信息具体右侧', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }),
+    left_part_gradient_color_start: PropTypes.color({ label: '背景渐变开始颜色', defaultValue: '#031945', layout: { prefixCls: 'bsth-line' } }),
+    left_part_gradient_color_end: PropTypes.color({ label: '背景渐变结束颜色', defaultValue: '#04275c', layout: { prefixCls: 'bsth-line' } }),
+    left_part_background_rect_r: PropTypes.number({ label: '背景框圈角大小', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
+    left_part_background_up_stroke_color: PropTypes.color({ label: '背景上边框颜色', defaultValue: '#819ebe', layout: { prefixCls: 'bsth-line' } }),
+    left_part_background_up_stroke_width: PropTypes.number({ label: '背景上边框宽度', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
+    left_part_line_name_font_size: PropTypes.number({ label: '线路名称字体大小', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
+    left_part_line_name_font_color: PropTypes.color({ label: '线路名称字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    left_part_info_left_font_size: PropTypes.number({ label: '左侧标题字体大小', defaultValue: 15, layout: { prefixCls: 'bsth-line' } }),
+    left_part_info_left_font_color: PropTypes.color({ label: '左侧标题字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    left_part_end_stop_font_size: PropTypes.number({ label: '开往站点字体大小', defaultValue: 16, layout: { prefixCls: 'bsth-line' } }),
+    left_part_end_stop_font_color: PropTypes.color({ label: '开往站点字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    left_part_arrival_info_font_size: PropTypes.number({ label: '到站信息字体大小', defaultValue: 16, layout: { prefixCls: 'bsth-line' } }),
+    left_part_arrival_info_font_color: PropTypes.color({ label: '到站信息字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    left_part_start_end_time_font_size: PropTypes.number({ label: '首末班信息字体大小', defaultValue: 16, layout: { prefixCls: 'bsth-line' } }),
+    left_part_start_end_time_font_color: PropTypes.color({ label: '首末班信息字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } })
   },
   render () {
     /* 最外层div对应编辑器的通用样式 */
@@ -295,6 +318,11 @@ export default {
           background_color={this.line_chart_background_color}
           // 内部线路模拟图内层css属性
           svg_background={this.svg_background}
+          chart_line_gradient_color_start={this.chart_line_gradient_color_start}
+          chart_line_gradient_color_end={this.chart_line_gradient_color_end}
+          chart_line_background_rect_r={this.chart_line_background_rect_r}
+          chart_line_background_up_stroke_color={this.chart_line_background_up_stroke_color}
+          chart_line_background_up_stroke_width={this.chart_line_background_up_stroke_width}
           chart_left_padding={this.chart_left_padding}
           chart_right_padding={this.chart_right_padding}
           chart_top_padding={this.chart_top_padding}
@@ -326,6 +354,23 @@ export default {
           chart_gps_rect_color={this.chart_gps_rect_color}
           chart_gps_rect_width={this.chart_gps_rect_width}
           chart_gps_rect_height={this.chart_gps_rect_height}
+          left_part_width={this.left_part_width}
+          left_part_right_padding={this.left_part_right_padding}
+          left_part_gradient_color_start={this.left_part_gradient_color_start}
+          left_part_gradient_color_end={this.left_part_gradient_color_end}
+          left_part_background_rect_r={this.left_part_background_rect_r}
+          left_part_background_up_stroke_color={this.left_part_background_up_stroke_color}
+          left_part_background_up_stroke_width={this.left_part_background_up_stroke_width}
+          left_part_line_name_font_size={this.left_part_line_name_font_size}
+          left_part_line_name_font_color={this.left_part_line_name_font_color}
+          left_part_info_left_font_size={this.left_part_info_left_font_size}
+          left_part_info_left_font_color={this.left_part_info_left_font_color}
+          left_part_end_stop_font_size={this.left_part_end_stop_font_size}
+          left_part_end_stop_font_color={this.left_part_end_stop_font_color}
+          left_part_arrival_info_font_size={this.left_part_arrival_info_font_size}
+          left_part_arrival_info_font_color={this.left_part_arrival_info_font_color}
+          left_part_start_end_time_font_size={this.left_part_start_end_time_font_size}
+          left_part_start_end_time_font_color={this.left_part_start_end_time_font_color}
         />
       )
     }