徐烜 / bsth-ebus-h5_editor · Commits

Commit 350ffe9c09f00b837f634036d54c555d8d1b5d19

Authored by 徐烜
1 parent cad89ba3

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

1、修改othergj-eBusStop-line-chart组件，添加报站信息显示，站名文本动画显示（从下而上），背景渐变显示
2、修改othergj-eBusStop-line-chart-list组件，修正远端报站信息获取
Inline Side-by-side
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
  View file @350ffe9
... ... @@ -19,16 +19,16 @@ svg.othergj-eBusStop-line-chart {
19 19 left: 0;
20 20  
21 21 /* 文本css */
22   - font-style: normal;
23   - font-variant-ligatures: normal;
24   - font-variant-caps: normal;
25   - font-variant-numeric: normal;
26   - font-variant-east-asian: normal;
27   - font-weight: 400;
28   - font-stretch: normal;
29   - font-size: 14px;
30   - line-height: 20px;
31   - font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  22 + /*font-style: normal;*/
  23 + /*font-variant-ligatures: normal;*/
  24 + /*font-variant-caps: normal;*/
  25 + /*font-variant-numeric: normal;*/
  26 + /*font-variant-east-asian: normal;*/
  27 + /*font-weight: 400;*/
  28 + /*font-stretch: normal;*/
  29 + /*font-size: 14px;*/
  30 + /*line-height: 20px;*/
  31 + /*font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;*/
32 32 }
33 33  
34 34 svg.othergj-eBusStop-line-chart path.station_link {
... ... @@ -49,7 +49,7 @@ svg.othergj-eBusStop-line-chart text.station_text {
49 49 writing-mode: tb;
50 50 fill: #3e3e3e;
51 51 letter-spacing: -.2px;
52   - text-shadow: 0 0 2px #dadada;
  52 + /*text-shadow: 0 0 2px #dadada;*/
53 53 Pointer-events: none;
54 54 }
55 55  
... ...
front-end/h5/src/components/core/plugins/bsth/othergj/linechart/chart/models/eBusStopGpsData.js
  View file @350ffe9
... ... @@ -107,11 +107,25 @@ class EBusStopGpsData {
107 107 get arrivalInfo () { return this._arrivalInfo }
108 108 get gpsDataList () { return this._gpsDataList }
109 109  
  110 + generateArrivalInfoForSvg () { // d3绘制svg用数据
  111 + let dataList = []
  112 + if (this._lineName) {
  113 + dataList.push({
  114 + d3DataKey: this._lineName + '_' + this._lineCode,
  115 + lineName: this._lineName,
  116 + stopName: this._endStopName,
  117 + startTime: this._startTime,
  118 + endTime: this._endTime,
  119 + arrivalInfo: this._arrivalInfo
  120 + })
  121 + }
  122 + return dataList
  123 + }
110 124  
111 125 // 使用远程数据设置属性，对应 othergj-eBusStop-line-chart-list-scrollPage-innerData.js中的ScrollPageInnerDataItem类
112 126 // 远程数据格式参考 http://36.134.151.106:19102/General_Interface/getArriveVO?deviceId=66MH0001
113 127 setFromRemoteInfo (info) {
114   - // 重新构造gps数据
  128 + // 1、重新构造gps数据
115 129 let gpsDataList = []
116 130 if (info['lineRoute'] && info['lineRoute'].length) {
117 131 info['lineRoute'].map((station, i) => {
... ... @@ -123,7 +137,47 @@ class EBusStopGpsData {
123 137 }
124 138 this._gpsDataList = gpsDataList
125 139  
126   - // TODO：计算报站信息
  140 + // 2、计算报站信息
  141 + // 2-1、计算当前站牌站点在路由中的index
  142 + let currentStopIndexList = [] // 当前站点索引列表（可能有多个）
  143 + if (info['lineRoute'] && info['lineRoute'].length) {
  144 + info['lineRoute'].map((station, i) => {
  145 + if (station['this'] && station['this'] === 'yes') {
  146 + currentStopIndexList.push(i)
  147 + }
  148 + })
  149 + }
  150 + if (currentStopIndexList.length === 0) {
  151 + this._arrivalInfo = '等待发车'
  152 + return this
  153 + }
  154 + let currentStopIndex = currentStopIndexList[0] // 当前站点索引（默认取第一个）
  155 + for (let i = currentStopIndex; i >= 0; i--) {
  156 + // 计算离当前站点最近的一班车的报站信息
  157 + let info = info['lineRoute'][i]
  158 + if (info['laststop'] && info['laststop'] === info['stationCode']) {
  159 + let stops = currentStopIndex - i // 距离几站
  160 + if (stops >= 2) {
  161 + this._arrivalInfo = stops + "站"
  162 + } else if (stops === 1) {
  163 + if (info['state'] === '1') { // 本站前一站进站
  164 + this._arrivalInfo = "1站"
  165 + } else { // 本站前一站出站
  166 + this._arrivalInfo = "即将进站"
  167 + }
  168 + } else {
  169 + if (info['state'] === '1') { // 本站进站
  170 + this._arrivalInfo = "即将进站"
  171 + } else { // 本站出站
  172 + this._arrivalInfo = "等待发车"
  173 + }
  174 + }
  175 + break;
  176 + }
  177 + }
  178 +
  179 +
  180 +
127 181  
128 182 return this
129 183 }
... ...
front-end/h5/src/components/core/plugins/bsth/othergj/linechart/chart/othergj-eBusStop-line-chart.js
  View file @350ffe9
... ... @@ -136,32 +136,37 @@ export default {
136 136 background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
137 137 // 图内层css
138 138 _flag_5_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层线路图css属性" class="bsth-line-item-divider"></hr>) } }),
139   - svg_background: PropTypes.color({ label: '线路图背景颜色', defaultValue: '#9EE0DF', layout: { prefixCls: 'bsth-line' } }),
  139 + svg_background: PropTypes.color({ label: '线路图背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
  140 + chart_line_gradient_color_start: PropTypes.color({ label: '背景渐变开始颜色', defaultValue: '#041e4c', layout: { prefixCls: 'bsth-line' } }),
  141 + chart_line_gradient_color_end: PropTypes.color({ label: '背景渐变结束颜色', defaultValue: '#0c5198', layout: { prefixCls: 'bsth-line' } }),
  142 + chart_line_background_rect_r: PropTypes.number({ label: '背景框圈角大小', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
  143 + chart_line_background_up_stroke_color: PropTypes.color({ label: '背景上边框颜色', defaultValue: '#819ebe', layout: { prefixCls: 'bsth-line' } }),
  144 + chart_line_background_up_stroke_width: PropTypes.number({ label: '背景上边框宽度', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
140 145 chart_left_padding: PropTypes.number({ label: '内部线路图距离左边', defaultValue: 50, layout: { prefixCls: 'bsth-line' } }),
141 146 chart_right_padding: PropTypes.number({ label: '内部线路图距离右边', defaultValue: 50, layout: { prefixCls: 'bsth-line' } }),
142 147 chart_top_padding: PropTypes.number({ label: '内部线路图距离上边', defaultValue: 40, layout: { prefixCls: 'bsth-line' } }),
143   - chart_up_line_path_s_width: PropTypes.number({ label: '上部分线宽度', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
144   - chart_up_line_path_s_color: PropTypes.color({ label: '上部分线颜色', defaultValue: '#008000', layout: { prefixCls: 'bsth-line' } }),
  148 + chart_up_line_path_s_width: PropTypes.number({ label: '上部分线宽度', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }),
  149 + chart_up_line_path_s_color: PropTypes.color({ label: '上部分线颜色', defaultValue: '#6ab5fc', layout: { prefixCls: 'bsth-line' } }),
145 150 chart_up_line_circle_f_color_current: PropTypes.color({ label: '线圆圈填充色-当前站点', defaultValue: '#CB0808', layout: { prefixCls: 'bsth-line' } }),
146 151 chart_up_line_circle_f_color_before: PropTypes.color({ label: '线圆圈填充色-前面站点', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
147 152 chart_up_line_circle_f_color_after: PropTypes.color({ label: '线圆圈填充色-后面站点', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
148   - chart_up_line_circle_r: PropTypes.number({ label: '线圆圈大小', defaultValue: 8, layout: { prefixCls: 'bsth-line' } }),
149   - chart_station_text_top_padding: PropTypes.number({ label: '站点文字距离上边', defaultValue: 60, layout: { prefixCls: 'bsth-line' } }),
150   - chart_station_text_font_size_current: PropTypes.number({ label: '站名字体大小-当前站点', defaultValue: 25, layout: { prefixCls: 'bsth-line' } }),
151   - chart_station_text_font_size_before: PropTypes.number({ label: '站名字体大小-前面站点', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
152   - chart_station_text_font_size_after: PropTypes.number({ label: '站名字体大小-后面站点', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
153   - chart_station_text_space: PropTypes.number({ label: '站名间距', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
154   - chart_station_text_transform_second: PropTypes.number({ label: '站名滚动间隔(秒)', defaultValue: 6, layout: { prefixCls: 'bsth-line' } }),
155   - chart_up_station_text_font_f_color_current: PropTypes.color({ label: '站名颜色-当前站点', defaultValue: '#060D37', layout: { prefixCls: 'bsth-line' } }),
156   - chart_up_station_text_font_f_color_before: PropTypes.color({ label: '站名颜色-前面站点', defaultValue: '#9398B4', layout: { prefixCls: 'bsth-line' } }),
157   - chart_up_station_text_font_f_color_after: PropTypes.color({ label: '站名颜色-后面站点', defaultValue: '#4556b6', layout: { prefixCls: 'bsth-line' } }),
  153 + chart_up_line_circle_r: PropTypes.number({ label: '线圆圈大小', defaultValue: 3, layout: { prefixCls: 'bsth-line' } }),
  154 + chart_station_text_top_padding: PropTypes.number({ label: '站点文字距离上边', defaultValue: 50, layout: { prefixCls: 'bsth-line' } }),
  155 + chart_station_text_font_size_current: PropTypes.number({ label: '站名字体大小-当前站点', defaultValue: 12, layout: { prefixCls: 'bsth-line' } }),
  156 + chart_station_text_font_size_before: PropTypes.number({ label: '站名字体大小-前面站点', defaultValue: 12, layout: { prefixCls: 'bsth-line' } }),
  157 + chart_station_text_font_size_after: PropTypes.number({ label: '站名字体大小-后面站点', defaultValue: 12, layout: { prefixCls: 'bsth-line' } }),
  158 + chart_station_text_space: PropTypes.number({ label: '站名间距', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }),
  159 + chart_station_text_transform_second: PropTypes.number({ label: '站名滚动间隔(秒)', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
  160 + chart_up_station_text_font_f_color_current: PropTypes.color({ label: '站名颜色-当前站点', defaultValue: '#CB0808', layout: { prefixCls: 'bsth-line' } }),
  161 + chart_up_station_text_font_f_color_before: PropTypes.color({ label: '站名颜色-前面站点', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
  162 + chart_up_station_text_font_f_color_after: PropTypes.color({ label: '站名颜色-后面站点', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
158 163 _flag_6_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层下部分线css属性" class="bsth-line-item-divider"></hr>) } }),
159   - down_line_left_padding: PropTypes.number({ label: '线距离左边', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
160   - down_line_right_padding: PropTypes.number({ label: '线距离右边', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
  164 + down_line_left_padding: PropTypes.number({ label: '线距离左边', defaultValue: 100, layout: { prefixCls: 'bsth-line' } }),
  165 + down_line_right_padding: PropTypes.number({ label: '线距离右边', defaultValue: 100, layout: { prefixCls: 'bsth-line' } }),
161 166 down_line_bottom_padding: PropTypes.number({ label: '线距离下边', defaultValue: 6, layout: { prefixCls: 'bsth-line' } }),
162   - down_line_s_width: PropTypes.number({ label: '线宽度', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
  167 + down_line_s_width: PropTypes.number({ label: '线宽度', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }),
163 168 down_line_s_color: PropTypes.color({ label: '线颜色', defaultValue: '#277461', layout: { prefixCls: 'bsth-line' } }),
164   - down_line_arrow_width: PropTypes.number({ label: '箭头宽度', defaultValue: 55, layout: { prefixCls: 'bsth-line' } }),
  169 + down_line_arrow_width: PropTypes.number({ label: '箭头宽度', defaultValue: 100, layout: { prefixCls: 'bsth-line' } }),
165 170 down_line_arrow_height: PropTypes.number({ label: '箭头高度', defaultValue: 15, layout: { prefixCls: 'bsth-line' } }),
166 171 _flag_7_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="无数据提示css属性" class="bsth-line-item-divider"></hr>) } }),
167 172 empty_info_font_size: PropTypes.number({ label: '无数据提示文字字体大小', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
... ... @@ -171,13 +176,31 @@ export default {
171 176 chart_gps_rect_color: PropTypes.color({ label: 'gps车辆rect背景色', defaultValue: '#3e50b3', layout: { prefixCls: 'bsth-line' } }),
172 177 chart_gps_rect_width: PropTypes.number({ label: 'gps车辆rect宽度', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
173 178 chart_gps_rect_height: PropTypes.number({ label: 'gps车辆rect高度', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
  179 + _flag_9_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="左侧线路信息css属性" class="bsth-line-item-divider"></hr>) } }),
  180 + left_part_width: PropTypes.number({ label: '左侧信息整体宽度', defaultValue: 200, layout: { prefixCls: 'bsth-line' } }),
  181 + left_part_right_padding: PropTypes.number({ label: '左侧信息具体右侧', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }),
  182 + left_part_gradient_color_start: PropTypes.color({ label: '背景渐变开始颜色', defaultValue: '#031945', layout: { prefixCls: 'bsth-line' } }),
  183 + left_part_gradient_color_end: PropTypes.color({ label: '背景渐变结束颜色', defaultValue: '#04275c', layout: { prefixCls: 'bsth-line' } }),
  184 + left_part_background_rect_r: PropTypes.number({ label: '背景框圈角大小', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
  185 + left_part_background_up_stroke_color: PropTypes.color({ label: '背景上边框颜色', defaultValue: '#819ebe', layout: { prefixCls: 'bsth-line' } }),
  186 + left_part_background_up_stroke_width: PropTypes.number({ label: '背景上边框宽度', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
  187 + left_part_line_name_font_size: PropTypes.number({ label: '线路名称字体大小', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
  188 + left_part_line_name_font_color: PropTypes.color({ label: '线路名称字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
  189 + left_part_info_left_font_size: PropTypes.number({ label: '左侧标题字体大小', defaultValue: 15, layout: { prefixCls: 'bsth-line' } }),
  190 + left_part_info_left_font_color: PropTypes.color({ label: '左侧标题字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
  191 + left_part_end_stop_font_size: PropTypes.number({ label: '开往站点字体大小', defaultValue: 16, layout: { prefixCls: 'bsth-line' } }),
  192 + left_part_end_stop_font_color: PropTypes.color({ label: '开往站点字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
  193 + left_part_arrival_info_font_size: PropTypes.number({ label: '到站信息字体大小', defaultValue: 16, layout: { prefixCls: 'bsth-line' } }),
  194 + left_part_arrival_info_font_color: PropTypes.color({ label: '到站信息字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
  195 + left_part_start_end_time_font_size: PropTypes.number({ label: '首末班信息字体大小', defaultValue: 16, layout: { prefixCls: 'bsth-line' } }),
  196 + left_part_start_end_time_font_color: PropTypes.color({ label: '首末班信息字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } })
174 197 },
175 198  
176 199 render () {
177 200 const innerDivStyle = {
178 201 'width': this.component_width + 'px',
179 202 'height': this.component_height + 'px',
180   - 'border': this.border_size + 'px solid black',
  203 + 'border': this.border_size + 'px solid white',
181 204 'margin-left': this.margin_left + 'px',
182 205 'margin-right': this.margin_right + 'px',
183 206 'margin-top': this.margin_top + 'px',
... ... @@ -220,12 +243,33 @@ export default {
220 243 <svg class="othergj-eBusStop-line-chart"
221 244 data-code={this.eBusStopData.lineCode}
222 245 style={svgStyle}>
223   - <g class="line-wrap"></g>
224   - <g class="gps-wrap"></g>
225   - <g class="marker-cluster"></g>
226   - <g class="arrow-wrap">
227   - <path d={downLinePathD} style={{ 'fill': this.down_line_s_color }}></path>
  246 + <defs>
  247 + <linearGradient id="leftpart-background-gradient">
  248 + <stop offset="0%" stop-color={this.left_part_gradient_color_start}></stop>
  249 + <stop offset="100%" stop-color={this.left_part_gradient_color_end}></stop>
  250 + </linearGradient>
  251 + <linearGradient id="linechart-background-gradient">
  252 + <stop offset="0%" stop-color={this.chart_line_gradient_color_start} />
  253 + <stop offset="50%" stop-color={this.chart_line_gradient_color_end} />
  254 + <stop offset="100%" stop-color={this.chart_line_gradient_color_start} />
  255 + </linearGradient>
  256 + <linearGradient id="empty-background-gradient">
  257 + <stop offset="0%" stop-color={this.chart_line_gradient_color_start} />
  258 + <stop offset="50%" stop-color={this.chart_line_gradient_color_end} />
  259 + <stop offset="100%" stop-color={this.chart_line_gradient_color_start} />
  260 + </linearGradient>
  261 + </defs>
  262 +
  263 + <g class="lineInfo"></g>
  264 + <g class="lineRouteGpsInfo" transform={ "translate(" + this.left_part_width + ",0)" }>
  265 + <g class="line-wrap"></g>
  266 + <g class="gps-wrap"></g>
  267 + <g class="marker-cluster"></g>
  268 + <g class="arrow-wrap">
  269 + <path d={downLinePathD} style={{ 'fill': this.down_line_s_color }}></path>
  270 + </g>
228 271 </g>
  272 + <g class="emptyInfo"></g>
229 273 </svg>
230 274 {
231 275 this.eBusStopData.routeStationDataList.length === 0 ? (<div style={emptyInfoStyle}>线路未开通，系统调试中</div>) : ''
... ... @@ -281,6 +325,12 @@ export default {
281 325 // 刷新gps svg
282 326 this.refreshLineSvg_gps()
283 327  
  328 + // 刷新线路信息
  329 + this.refreshLineInfoSvg()
  330 +
  331 + // 刷新空信息
  332 + this.refreshEmptyDataSvg()
  333 +
284 334 // svg文本滚动监控开启
285 335 if (this.editorMode === 'preview') {
286 336 this.svgTextTransformPositionTimer.count ++
... ... @@ -335,7 +385,8 @@ export default {
335 385 let self = this
336 386 self.svgTextTransformPositionTimer.timer = setTimeout(function () {
337 387 // console.log('svgTextTransformPositionTimer.count')
338   - self.transformStationText()
  388 + // self.transformStationText_repeatReverse()
  389 + self.transformStationText_upScroll()
339 390 self.svgTextTransformPositionTimer.count ++
340 391 }, self.svgTextTransformPositionTimer.millisecond)
341 392 },
... ... @@ -374,6 +425,7 @@ export default {
374 425 let self = this
375 426 if (!Utils.objectEquals(currentVal, oldVal)) {
376 427 self.refreshLineSvg()
  428 + self.refreshEmptyDataSvg()
377 429 }
378 430 },
379 431 eBusStopGpsData: {
... ... @@ -381,6 +433,8 @@ export default {
381 433 let self = this
382 434 console.log('refreshLineSvg_gps')
383 435 self.refreshLineSvg_gps()
  436 + self.refreshLineInfoSvg()
  437 + self.refreshEmptyDataSvg()
384 438 },
385 439 deep: true
386 440 },
... ... @@ -396,11 +450,15 @@ export default {
396 450 this.refreshLineSvg()
397 451 this.refreshDownLineSvg()
398 452 this.refreshLineSvg_gps()
  453 + this.refreshLineInfoSvg()
  454 + this.refreshEmptyDataSvg()
399 455 },
400 456 svg_height () {
401 457 this.refreshLineSvg()
402 458 this.refreshDownLineSvg()
403 459 this.refreshLineSvg_gps()
  460 + this.refreshLineInfoSvg()
  461 + this.refreshEmptyDataSvg()
404 462 },
405 463 // ----------- 图外层css 监控 ----------- //
406 464 margin_left () {
... ... @@ -430,6 +488,28 @@ export default {
430 488 svg_background () {
431 489 this.refreshLineSvg()
432 490 },
  491 +
  492 + chart_line_background_rect_r (val) {
  493 + let svg = this.private_svg
  494 + svg.selectAll('g.background rect.main')
  495 + .attr('rx', val)
  496 + .attr('ry', val)
  497 + svg.selectAll('g.mask rect.up_mask')
  498 + .attr('rx', val)
  499 + .attr('ry', val)
  500 + svg.selectAll('g.mask rect.down_mask')
  501 + .attr('rx', val)
  502 + .attr('ry', val)
  503 + },
  504 + chart_line_background_rect_r () {
  505 + this.refreshLineSvg()
  506 + },
  507 + chart_line_background_up_stroke_color () {
  508 + this.refreshLineSvg()
  509 + },
  510 + chart_line_background_up_stroke_width () {
  511 + this.refreshLineSvg()
  512 + },
433 513 chart_left_padding: function () {
434 514 this.refreshLineSvg()
435 515 this.refreshDownLineSvg()
... ... @@ -483,7 +563,7 @@ export default {
483 563 },
484 564 chart_station_text_font_size_current: function (val) {
485 565 let svg = this.private_svg
486   - svg.selectAll('g.item text.station_text.up.current')
  566 + svg.selectAll('g.textItems text.station_text.up.current')
487 567 .style('font-size', val)
488 568 this.refreshLineSvg()
489 569 this.refreshDownLineSvg()
... ... @@ -491,7 +571,7 @@ export default {
491 571 },
492 572 chart_station_text_font_size_before: function (val) {
493 573 let svg = this.private_svg
494   - svg.selectAll('g.item text.station_text.up.before')
  574 + svg.selectAll('g.textItems text.station_text.up.before')
495 575 .style('font-size', val)
496 576 this.refreshLineSvg()
497 577 this.refreshDownLineSvg()
... ... @@ -499,7 +579,7 @@ export default {
499 579 },
500 580 chart_station_text_font_size_after: function (val) {
501 581 let svg = this.private_svg
502   - svg.selectAll('g.item text.station_text.up.after')
  582 + svg.selectAll('g.textItems text.station_text.up.after')
503 583 .style('font-size', val)
504 584 this.refreshLineSvg()
505 585 this.refreshDownLineSvg()
... ... @@ -507,7 +587,7 @@ export default {
507 587 },
508 588 chart_station_text_space: function (val) {
509 589 let d3 = this.private_d3
510   - d3.selectAll('g.item text')
  590 + d3.selectAll('g.textItems text')
511 591 .attr('textLength', function (d) {
512 592 if (!d.name) {
513 593 return 0
... ... @@ -518,18 +598,18 @@ export default {
518 598 },
519 599 chart_up_station_text_font_f_color_current: function (val) {
520 600 let svg = this.private_svg
521   - svg.selectAll('g.item text.station_text.up.current')
522   - .style('stroke', val)
  601 + svg.selectAll('g.textItems text.station_text.up.current')
  602 + .style('fill', val)
523 603 },
524 604 chart_up_station_text_font_f_color_before: function (val) {
525 605 let svg = this.private_svg
526   - svg.selectAll('g.item text.station_text.up.before')
527   - .style('stroke', val)
  606 + svg.selectAll('g.textItems text.station_text.up.before')
  607 + .style('fill', val)
528 608 },
529 609 chart_up_station_text_font_f_color_after: function (val) {
530 610 let svg = this.private_svg
531   - svg.selectAll('g.item text.station_text.up.after')
532   - .style('stroke', val)
  611 + svg.selectAll('g.textItems text.station_text.up.after')
  612 + .style('fill', val)
533 613 },
534 614 // ----------- _flag_6_属性 ------------- //
535 615 down_line_left_padding: function () {
... ... @@ -565,9 +645,65 @@ export default {
565 645 chart_gps_rect_height (val) {
566 646 this.busIconComData.height = val
567 647 this.refreshLineSvg_gps()
  648 + },
  649 +
  650 + // ----------- _flag_8_属性 ------------- //
  651 + left_part_width () {
  652 + this.refreshLineSvg()
  653 + this.refreshDownLineSvg()
  654 + this.refreshLineSvg_gps()
  655 + this.refreshLineInfoSvg()
  656 + },
  657 + left_part_right_padding () {
  658 + this.refreshLineInfoSvg()
  659 + },
  660 + left_part_background_rect_r () {
  661 + this.refreshLineInfoSvg()
  662 + this.refreshEmptyDataSvg()
  663 + },
  664 + left_part_background_up_stroke_color () {
  665 + this.refreshLineInfoSvg()
  666 + this.refreshEmptyDataSvg()
  667 + },
  668 + left_part_background_up_stroke_width () {
  669 + this.refreshLineInfoSvg()
  670 + this.refreshEmptyDataSvg()
  671 + },
  672 +
  673 + left_part_right_padding () {
  674 + this.refreshLineInfoSvg()
  675 + },
  676 + left_part_line_name_font_size () {
  677 + this.refreshLineInfoSvg()
  678 + },
  679 + left_part_line_name_font_color () {
  680 + this.refreshLineInfoSvg()
  681 + },
  682 + left_part_info_left_font_size () {
  683 + this.refreshLineInfoSvg()
  684 + },
  685 + left_part_info_left_font_color () {
  686 + this.refreshLineInfoSvg()
  687 + },
  688 + left_part_end_stop_font_size () {
  689 + this.refreshLineInfoSvg()
  690 + },
  691 + left_part_end_stop_font_color () {
  692 + this.refreshLineInfoSvg()
  693 + },
  694 + left_part_arrival_info_font_size () {
  695 + this.refreshLineInfoSvg()
  696 + },
  697 + left_part_arrival_info_font_color () {
  698 + this.refreshLineInfoSvg()
  699 + },
  700 + left_part_start_end_time_font_size () {
  701 + this.refreshLineInfoSvg()
  702 + },
  703 + left_part_start_end_time_font_color () {
  704 + this.refreshLineInfoSvg()
568 705 }
569 706  
570   - // TODO：
571 707 },
572 708 methods: {
573 709 findD3SvgDom () {
... ... @@ -579,7 +715,7 @@ export default {
579 715 refreshDownLineSvg () {
580 716 let self = this
581 717  
582   - let width = self.svg_width // 内部整个svg的宽度
  718 + let width = self.svg_width - self.left_part_width // 内部整个svg的宽度
583 719 let height = self.svg_height // 内部整个svg的高度
584 720  
585 721 // 计算svg内部下部分线的属性
... ... @@ -607,7 +743,7 @@ export default {
607 743 let d3 = self.private_d3
608 744  
609 745 let routeData = self.eBusStopData.routeStationDataList
610   - let width = self.svg_width // 内部整个svg的宽度
  746 + let width = self.svg_width - self.left_part_width // 内部整个svg的宽度
611 747 let height = self.svg_height // 内部整个svg的高度
612 748 // let svgNameSpace = self.private_svgns
613 749 let svg = self.private_svg
... ... @@ -623,24 +759,50 @@ export default {
623 759 let textDownMaskRectHeight = self.down_line_bottom_padding +
624 760 self.down_line_arrow_height + self.down_line_s_width + 10;
625 761  
626   - // ------------ 1、添加g元素 ---------- //
627   - let itemsUpdate = svg.select('g.line-wrap').selectAll('g.item')
628   - .data(routeData, function (d) {
629   - return d.code
630   - })
631   - let itemsEnter = itemsUpdate
632   - let itemsExit = itemsUpdate.exit()
633   -
634   - itemsExit.remove()
635   - itemsEnter = itemsEnter.enter().append('g').classed('item', true)
636   -
637 762 // 创建x轴比例尺
638 763 let xScale = d3.scaleLinear()
639 764 .domain([0, routeData.length - 1]) // 定义域
640 765 .range([chartLeftPadding, width - chartRightPadding]) // 值域
641 766  
642   - // ------------ 2、添加/更新线路图上部分的站点名称text元素 ---------- //
643   - itemsEnter.append('text')
  767 + // --------------- 1、添加/更新 线路图背景rect ------------- //
  768 + let backgroundRectData = [{key: 'bgKey1', id: 'linechart-background-gradient'}]
  769 + if (!routeData || routeData.length === 0) {
  770 + backgroundRectData = []
  771 + }
  772 + let backgroundUpdate = svg.select('g.line-wrap').selectAll('g.background')
  773 + .data(backgroundRectData, function (d) {
  774 + return d.key
  775 + })
  776 + let backgroundEnter = backgroundUpdate
  777 + let backgroundExit = backgroundUpdate.exit()
  778 + backgroundExit.remove()
  779 + backgroundEnter = backgroundEnter.enter().append('g').classed('background', true)
  780 + backgroundEnter.append('rect')
  781 + .classed('main', true)
  782 + .style('fill', function (d) {
  783 + return `url(#${d.id})`
  784 + })
  785 + .attr('width', width)
  786 + .attr('height', height)
  787 + .attr('rx', self.chart_line_background_rect_r)
  788 + .attr('ry', self.chart_line_background_rect_r)
  789 + backgroundUpdate.select('rect.main')
  790 + .attr('width', width)
  791 + .attr('height', height)
  792 + .attr('rx', self.chart_line_background_rect_r)
  793 + .attr('ry', self.chart_line_background_rect_r)
  794 +
  795 + // --------------- 2、添加/更新线路图上部分的站点名称text元素 ------------- //
  796 + let stationTextItemsUpdate = svg.select('g.line-wrap').selectAll('g.textItems')
  797 + .data(routeData, function (d) {
  798 + return d.code
  799 + })
  800 + let stationTextItemsEnter = stationTextItemsUpdate
  801 + let stationTextItemsExit = stationTextItemsUpdate.exit()
  802 + stationTextItemsExit.remove()
  803 + stationTextItemsEnter = stationTextItemsEnter.enter().append('g').classed('textItems', true)
  804 +
  805 + stationTextItemsEnter.append('text')
644 806 .classed('station_text', true)
645 807 .classed('up', true)
646 808 .classed('current', function (d, i) {
... ... @@ -661,7 +823,7 @@ export default {
661 823 return self.chart_station_text_font_size_after + 'px'
662 824 }
663 825 })
664   - .style('stroke', function (d, i) {
  826 + .style('fill', function (d, i) {
665 827 if (i === self.eBusStopData.currentStopStationIndex) {
666 828 return self.chart_up_station_text_font_f_color_current
667 829 } else if (i < self.eBusStopData.currentStopStationIndex) {
... ... @@ -702,9 +864,9 @@ export default {
702 864 })
703 865 .attr('data-y-transform-flag', function () {
704 866 // 判定文字上下滚动标识，1：可滚动，0：不可滚动，2：滚动中
705   - let textMaxLenth = textDownMaskRectY - (textUpMaskRectY + textUpMaskRectHeight)
  867 + let textMaxLength = textDownMaskRectY - (textUpMaskRectY + textUpMaskRectHeight)
706 868 let textLength = this.getBBox().height
707   - if (textLength > textMaxLenth) {
  869 + if (textLength > textMaxLength) {
708 870  
709 871 // TODO：使用svg animate测试
710 872 // let textAnimate = document.createElementNS(svgNameSpace, 'animate')
... ... @@ -736,7 +898,7 @@ export default {
736 898 }
737 899 })
738 900  
739   - itemsUpdate.select('text.station_text')
  901 + stationTextItemsUpdate.select('text.station_text')
740 902 .classed('up', true)
741 903 .text(function (d) {
742 904 // 更新的时候需要删除textLength，方便重新计算原始长度
... ... @@ -772,9 +934,9 @@ export default {
772 934 })
773 935 .attr('data-y-transform-flag', function () {
774 936 // 判定文字上下是否滚动，1：滚动，0：不滚动
775   - let textMaxLenth = textDownMaskRectY - (textUpMaskRectY + textUpMaskRectHeight)
  937 + let textMaxLength = textDownMaskRectY - (textUpMaskRectY + textUpMaskRectHeight)
776 938 let textLength = this.getBBox().height
777   - if (textLength > textMaxLenth) {
  939 + if (textLength > textMaxLength) {
778 940  
779 941 // // TODO：使用svg animate测试
780 942 // let textAnimate = document.createElementNS(svgNameSpace, 'animate')
... ... @@ -816,8 +978,106 @@ export default {
816 978 return 0
817 979 }
818 980 })
  981 + // ------------ 3、添加/更新 文本遮罩用的rect（和背景rect使用相同数据） ------------- //
  982 + let maskUpdate = svg.select('g.line-wrap').selectAll('g.mask')
  983 + .data(backgroundRectData, function (d) {
  984 + return d.key
  985 + })
  986 + let maskEnter = maskUpdate
  987 + let maskExit = maskUpdate.exit()
  988 + maskExit.remove()
  989 + maskEnter = maskEnter.enter().append('g').classed('mask', true)
819 990  
820   - // ------------ 3、添加/更新线路图上部分的的path元素 ---------- //
  991 + // 当text向上移动的时候，遮住超出的部分，类似div的overflow
  992 + maskEnter.append('rect')
  993 + .classed('up_mask', true)
  994 + .style('fill', function (d) {
  995 + return `url(#${d.id})`
  996 + })
  997 + .attr('x', 0)
  998 + .attr('y', 0)
  999 + .attr('width', width)
  1000 + .attr('height', textUpMaskRectHeight)
  1001 + .attr('rx', self.chart_line_background_rect_r)
  1002 + .attr('ry', self.chart_line_background_rect_r)
  1003 + maskUpdate.select('rect.up_mask')
  1004 + .attr('width', width)
  1005 + .attr('height', textUpMaskRectHeight)
  1006 + // 当text向下移动的时候，遮住超出的部分，类似div的overflow
  1007 + maskEnter.append('rect')
  1008 + .classed('down_mask', true)
  1009 + .style('fill', function (d) {
  1010 + return `url(#${d.id})`
  1011 + })
  1012 + .attr('x', 0)
  1013 + .attr('y', function () {
  1014 + return textDownMaskRectY
  1015 + })
  1016 + .attr('width', width)
  1017 + .attr('height', textDownMaskRectHeight)
  1018 + .attr('rx', self.chart_line_background_rect_r)
  1019 + .attr('ry', self.chart_line_background_rect_r)
  1020 + maskUpdate.select('rect.down_mask')
  1021 + .attr('y', function () {
  1022 + return textDownMaskRectY
  1023 + })
  1024 + .attr('width', width)
  1025 + .attr('height', textDownMaskRectHeight)
  1026 +
  1027 + // ------------ 3-1、添加/更新背景rect的上边框 ------------- //
  1028 + let strokeUpdate = svg.select('g.line-wrap').selectAll('g.stroke')
  1029 + .data(backgroundRectData, function (d) {
  1030 + return d.key
  1031 + })
  1032 + let strokeEnter = strokeUpdate
  1033 + let strokeExit = strokeUpdate.exit()
  1034 + strokeExit.remove()
  1035 + strokeEnter = strokeEnter.enter().append('g').classed('stroke', true)
  1036 +
  1037 + let s_data = [
  1038 + [self.chart_line_background_rect_r / 2, self.chart_line_background_up_stroke_width / 2],
  1039 + [width - self.chart_line_background_rect_r / 2, self.chart_line_background_up_stroke_width / 2]]
  1040 + let s_line = d3.line()
  1041 + strokeEnter.append('path')
  1042 + .classed('up_stroke', true)
  1043 + .style('stroke', self.chart_line_background_up_stroke_color)
  1044 + .style('stroke-width', self.chart_line_background_up_stroke_width)
  1045 + .attr('d', function (d, i) {
  1046 + return s_line(s_data)
  1047 + })
  1048 + strokeUpdate.select('path.up_stroke')
  1049 + .style('stroke', self.chart_line_background_up_stroke_color)
  1050 + .style('stroke-width', self.chart_line_background_up_stroke_width)
  1051 + .attr('d', function (d, i) {
  1052 + return s_line(s_data)
  1053 + })
  1054 +
  1055 + // strokeEnter.append('circle')
  1056 + // .classed('left_corner', true)
  1057 + // .attr('cx', self.chart_line_background_rect_r + self.chart_line_background_up_stroke_width / 2 - 1)
  1058 + // .attr('cy', self.chart_line_background_rect_r + self.chart_line_background_up_stroke_width / 2 - 1)
  1059 + // .attr('r', self.chart_line_background_rect_r)
  1060 + // .style('stroke', self.chart_line_background_up_stroke_color)
  1061 + // .style('stroke-width', self.chart_line_background_up_stroke_width)
  1062 + // .style('stroke-dashoffset', - 3.14 * self.chart_line_background_rect_r)
  1063 + // .style('stroke-dasharray', 3.14 * self.chart_line_background_rect_r / 2 + ",100")
  1064 + // .style('fill', 'none')
  1065 +
  1066 + // ------------ 4、添加线路图 ------------- //
  1067 + // ------------ 4-1、添加g元素 ---------- //
  1068 + let itemsUpdate = svg.select('g.line-wrap').selectAll('g.item')
  1069 + .data(routeData, function (d) {
  1070 + return d.code
  1071 + })
  1072 + let itemsEnter = itemsUpdate
  1073 + let itemsExit = itemsUpdate.exit()
  1074 + itemsExit.remove()
  1075 + itemsEnter = itemsEnter.enter().append('g').classed('item', true)
  1076 +
  1077 + // ------------ 4-2、添加/更新线路图上部分的站点名称text元素 ---------- //
  1078 + // 由第2步添加
  1079 +
  1080 + // ------------ 4-3、添加/更新线路图上部分的的path元素 ---------- //
821 1081 let upLineFun = d3.line()
822 1082 .x(xScale)
823 1083 .y(function () {
... ... @@ -836,35 +1096,36 @@ export default {
836 1096 })
837 1097  
838 1098 // ------------ 4-up_mask、添加/更新上部分rect ------------- //
  1099 + // 由第3步添加了
839 1100 // 当text向上移动的时候，遮住超出的部分，类似div的overflow
840   - itemsEnter.append('rect')
841   - .classed('up_mask', true)
842   - .style('fill', self.svg_background)
843   - .style('stroke-width', 0)
844   - .attr('x', function (d, i) {
845   - let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
846   - return text_bound.x
847   - })
848   - .attr('y', textUpMaskRectY)
849   - .attr('width', function () {
850   - let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
851   - return text_bound.width
852   - })
853   - .attr('height', textUpMaskRectHeight)
854   - itemsUpdate.select('rect.up_mask')
855   - .style('fill', self.svg_background)
856   - .attr('x', function (d, i) {
857   - let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
858   - return text_bound.x
859   - })
860   - .attr('y', textUpMaskRectY)
861   - .attr('width', function () {
862   - let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
863   - return text_bound.width
864   - })
865   - .attr('height', textUpMaskRectHeight)
  1101 + // itemsEnter.append('rect')
  1102 + // .classed('up_mask', true)
  1103 + // .style('fill', self.svg_background)
  1104 + // .style('stroke-width', 0)
  1105 + // .attr('x', function (d, i) {
  1106 + // let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
  1107 + // return text_bound.x
  1108 + // })
  1109 + // .attr('y', textUpMaskRectY)
  1110 + // .attr('width', function () {
  1111 + // let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
  1112 + // return text_bound.width
  1113 + // })
  1114 + // .attr('height', textUpMaskRectHeight)
  1115 + // itemsUpdate.select('rect.up_mask')
  1116 + // .style('fill', self.svg_background)
  1117 + // .attr('x', function (d, i) {
  1118 + // let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
  1119 + // return text_bound.x
  1120 + // })
  1121 + // .attr('y', textUpMaskRectY)
  1122 + // .attr('width', function () {
  1123 + // let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
  1124 + // return text_bound.width
  1125 + // })
  1126 + // .attr('height', textUpMaskRectHeight)
866 1127  
867   - // ------------ 4、添加/更新线路图上部分的circle元素 ---------- //
  1128 + // ------------ 4-4、添加/更新线路图上部分的circle元素 ---------- //
868 1129 itemsEnter.select(function (d) {
869 1130 return d.type !== 1 ? this : null
870 1131 }).append('circle')
... ... @@ -907,44 +1168,91 @@ export default {
907 1168 })
908 1169  
909 1170 // ------------ 4-down_mask、添加/更新上部分rect ------------- //
  1171 + // 由第3步添加了
910 1172 // 当text向下移动的时候，遮住超出的部分，类似div的overflow
911   - itemsEnter.append('rect')
912   - .classed('down_mask', true)
913   - .style('fill', self.svg_background)
914   - .style('stroke-width', 0)
915   - .attr('x', function () {
916   - let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
917   - return text_bound.x
918   - })
919   - .attr('y', function () {
920   - return textDownMaskRectY
921   - })
922   - .attr('width', function () {
923   - let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
924   - return text_bound.width
925   - })
926   - .attr('height', function () {
927   - return textDownMaskRectHeight
928   - })
929   - itemsUpdate.select('rect.down_mask')
930   - .style('fill', self.svg_background)
931   - .attr('x', function () {
932   - let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
933   - return text_bound.x
  1173 + // itemsEnter.append('rect')
  1174 + // .classed('down_mask', true)
  1175 + // .style('fill', self.svg_background)
  1176 + // .style('stroke-width', 0)
  1177 + // .attr('x', function () {
  1178 + // let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
  1179 + // return text_bound.x
  1180 + // })
  1181 + // .attr('y', function () {
  1182 + // return textDownMaskRectY
  1183 + // })
  1184 + // .attr('width', function () {
  1185 + // let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
  1186 + // return text_bound.width
  1187 + // })
  1188 + // .attr('height', function () {
  1189 + // return textDownMaskRectHeight
  1190 + // })
  1191 + // itemsUpdate.select('rect.down_mask')
  1192 + // .style('fill', self.svg_background)
  1193 + // .attr('x', function () {
  1194 + // let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
  1195 + // return text_bound.x
  1196 + // })
  1197 + // .attr('y', function () {
  1198 + // return textDownMaskRectY
  1199 + // })
  1200 + // .attr('width', function () {
  1201 + // let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
  1202 + // return text_bound.width
  1203 + // })
  1204 + // .attr('height', function () {
  1205 + // return textDownMaskRectHeight
  1206 + // })
  1207 +
  1208 + },
  1209 + transformStationText_upScroll () { // 从下往上，反复移动
  1210 + let self = this
  1211 + let d3 = self.private_d3
  1212 +
  1213 + let height = self.svg_height // 内部整个svg的高度
  1214 +
  1215 + let chartStopNameTopPadding = self.chart_station_text_top_padding
  1216 + let textUpMaskRectY = 0;
  1217 + let textUpMaskRectHeight = chartStopNameTopPadding;
  1218 + let textDownMaskRectY = (height - self.down_line_bottom_padding) -
  1219 + (self.down_line_arrow_height + self.down_line_s_width)
  1220 + let textMaxLength = textDownMaskRectY - (textUpMaskRectY + textUpMaskRectHeight)
  1221 +
  1222 + d3.selectAll('text.station_text')
  1223 + .select(function () {
  1224 + let transform_flag = d3.select(this).attr('data-y-transform-flag')
  1225 + return transform_flag === "1" ? this : null
934 1226 })
  1227 + .transition()
  1228 + .duration(self.chart_station_text_transform_second * 1000)
  1229 + .ease(d3.easeLinear)
  1230 + .attr('data-y-transform-flag', '2') // 状态变成滚动中
935 1231 .attr('y', function () {
936   - return textDownMaskRectY
937   - })
938   - .attr('width', function () {
939   - let text_bound = d3.select(this.parentNode).select('text').node().getBBox();
940   - return text_bound.width
  1232 + // console.log('go y transform')
  1233 +
  1234 + // 滚动的y坐标
  1235 + let y = this.getBBox().y
  1236 + // 滚动的方向
  1237 + let dir = d3.select(this).attr('data-y-transform-direction')
  1238 + // 滚动的距离
  1239 + let y_transform_distance = this.getBBox().height
  1240 + if (dir === 'up') {
  1241 + return y - y_transform_distance // 第一次往上
  1242 + } else {
  1243 + return y - y_transform_distance - textMaxLength // 第二次开始从底部往上
  1244 + }
941 1245 })
942   - .attr('height', function () {
943   - return textDownMaskRectHeight
  1246 + .on('end', function () {
  1247 + // 重置滚动状态
  1248 + d3.select(this).attr('data-y-transform-flag', 1)
  1249 + // 重置滚动状态
  1250 + d3.select(this).attr('data-y-transform-direction', 'up_next_scroll')
  1251 + d3.select(this).attr('y', textDownMaskRectY)
944 1252 })
945   -
946 1253 },
947   - transformStationText () {
  1254 +
  1255 + transformStationText_repeatReverse () { // 弹簧移动
948 1256 let self = this
949 1257 let d3 = self.private_d3
950 1258 d3.selectAll('text.station_text')
... ... @@ -990,7 +1298,7 @@ export default {
990 1298 let $jQuery = self.private_jQuery
991 1299 let d3 = self.private_d3
992 1300  
993   - let width = self.svg_width // 内部整个svg的宽度
  1301 + let width = self.svg_width - self.left_part_width // 线路图的宽度
994 1302 let height = self.svg_height // 内部整个svg的高度
995 1303 let chartLeftPadding = self.chart_left_padding
996 1304 let chartRightPadding = self.chart_right_padding
... ... @@ -1103,6 +1411,15 @@ export default {
1103 1411 y = -100
1104 1412 return y
1105 1413 }
  1414 + if (routeDataGroupByStationCode[d.stopCode]) { // 终点站的站外车不显示
  1415 + if (routeDataGroupByStationCode[d.stopCode][0].isZdz) {
  1416 + if (d.state === '0') {
  1417 + y = -100
  1418 + return y
  1419 + }
  1420 + }
  1421 + }
  1422 +
1106 1423 // 车辆rect的y坐标在circle上方，并偏移1.5倍circle的直径
1107 1424 y = parseInt(svgCircle.attr('cy')) - self.chart_gps_rect_height - self.chart_up_line_circle_r * 1.5
1108 1425 return y
... ... @@ -1163,6 +1480,316 @@ export default {
1163 1480 // .attr('y', gpsRectY)
1164 1481  
1165 1482 // TODO：暂时不考虑rect内的文本显示，多个rect叠加后的显示问题
  1483 + },
  1484 +
  1485 + refreshLineInfoSvg () {
  1486 + let self = this
  1487 +
  1488 + let svg = self.private_svg
  1489 + let $jQuery = self.private_jQuery
  1490 + let d3 = self.private_d3
  1491 +
  1492 + let width = self.left_part_width - self.left_part_right_padding // 线路信息区域的宽度
  1493 + let height = self.svg_height // 内部整个svg的高度
  1494 +
  1495 + let routeData = self.eBusStopData.routeStationDataList
  1496 + let arrivalInfo = this.eBusStopGpsData.generateArrivalInfoForSvg()
  1497 +
  1498 + // --------------- 0、添加/更新 线路图背景rect ------------- //
  1499 + let backgroundRectData = [{key: 'bgKey2', id: 'leftpart-background-gradient'}]
  1500 + if (!routeData || routeData.length === 0) {
  1501 + backgroundRectData = []
  1502 + }
  1503 + let backgroundUpdate = svg.select('g.lineInfo').selectAll('g.background')
  1504 + .data(backgroundRectData, function (d) {
  1505 + return d.key
  1506 + })
  1507 + let backgroundEnter = backgroundUpdate
  1508 + let backgroundExit = backgroundUpdate.exit()
  1509 + backgroundExit.remove()
  1510 + backgroundEnter = backgroundEnter.enter().append('g').classed('background', true)
  1511 + backgroundEnter.append('rect')
  1512 + .classed('main', true)
  1513 + .style('fill', function (d) {
  1514 + return `url(#${d.id})`
  1515 + })
  1516 + .attr('width', width)
  1517 + .attr('height', height)
  1518 + .attr('rx', self.left_part_background_rect_r)
  1519 + .attr('ry', self.left_part_background_rect_r)
  1520 + backgroundUpdate.select('rect.main')
  1521 + .attr('width', width)
  1522 + .attr('height', height)
  1523 + .attr('rx', self.left_part_background_rect_r)
  1524 + .attr('ry', self.left_part_background_rect_r)
  1525 +
  1526 + // ------------ 0-1、添加/更新背景rect的上边框 ------------- //
  1527 + let strokeUpdate = svg.select('g.lineInfo').selectAll('g.stroke')
  1528 + .data(backgroundRectData, function (d) {
  1529 + return d.key
  1530 + })
  1531 + let strokeEnter = strokeUpdate
  1532 + let strokeExit = strokeUpdate.exit()
  1533 + strokeExit.remove()
  1534 + strokeEnter = strokeEnter.enter().append('g').classed('stroke', true)
  1535 + let s_data = [
  1536 + [self.left_part_background_rect_r / 2, self.left_part_background_up_stroke_width / 2],
  1537 + [width - self.left_part_background_rect_r / 2, self.left_part_background_up_stroke_width / 2]]
  1538 + let s_line = d3.line()
  1539 + strokeEnter.append('path')
  1540 + .classed('up_stroke', true)
  1541 + .style('stroke', self.left_part_background_up_stroke_color)
  1542 + .style('stroke-width', self.left_part_background_up_stroke_width)
  1543 + .attr('d', function (d, i) {
  1544 + return s_line(s_data)
  1545 + })
  1546 + strokeUpdate.select('path.up_stroke')
  1547 + .style('stroke', self.left_part_background_up_stroke_color)
  1548 + .style('stroke-width', self.left_part_background_up_stroke_width)
  1549 + .attr('d', function (d, i) {
  1550 + return s_line(s_data)
  1551 + })
  1552 +
  1553 + // --------------- 1、添加/更新 g,text 元素 -------------- //
  1554 + // 添加g元素
  1555 + let textItemsUpdate = svg.select('g.lineInfo').selectAll('g.arrivalInfo')
  1556 + .data(arrivalInfo, function (d) {
  1557 + return d.d3DataKey
  1558 + })
  1559 + let textItemsEnter = textItemsUpdate
  1560 + let textItemsExit = textItemsUpdate.exit()
  1561 + textItemsExit.remove()
  1562 + textItemsEnter = textItemsEnter.enter().append('g')
  1563 + .classed('arrivalInfo', true)
  1564 +
  1565 + // 添加text主元素
  1566 + textItemsEnter.append('text')
  1567 + .attr('text-anchor', 'middle')
  1568 +
  1569 + // --------------- 2、添加/更新 tspan 元素 ----------------- //
  1570 + // 2-1、添加/更新 线路名称 tspan
  1571 + textItemsEnter.select('text')
  1572 + .append('tspan')
  1573 + .classed('lineName', true)
  1574 + .text(function (d) {
  1575 + return d.lineName
  1576 + })
  1577 + .style('font-size', self.left_part_line_name_font_size)
  1578 + .style('fill', self.left_part_line_name_font_color)
  1579 + .attr('x', 0)
  1580 + textItemsUpdate.select('tspan.lineName')
  1581 + .style('font-size', self.left_part_line_name_font_size)
  1582 + .style('fill', self.left_part_line_name_font_color)
  1583 +
  1584 + // 2-2、添加/更新 开往站点 tspan
  1585 + textItemsEnter.select('text').append('tspan')
  1586 + .classed('endStop_left', true)
  1587 + .text('开往：')
  1588 + .style('font-size', self.left_part_info_left_font_size)
  1589 + .style('fill', self.left_part_info_left_font_color)
  1590 + .attr('x', 0)
  1591 + .attr('dy', function () {
  1592 + let tspan_box = d3.select(this.parentNode).select('tspan.lineName').node().getBBox()
  1593 + return tspan_box.height + 2
  1594 + })
  1595 + textItemsEnter.select('text').append('tspan')
  1596 + .classed('endStop_right', true)
  1597 + .text(function (d) {
  1598 + return d.stopName
  1599 + })
  1600 + .style('font-size', self.left_part_end_stop_font_size)
  1601 + .style('fill', self.left_part_end_stop_font_color)
  1602 +
  1603 + textItemsUpdate.select('tspan.endStop_left')
  1604 + .style('font-size', self.left_part_info_left_font_size)
  1605 + .style('fill', self.left_part_info_left_font_color)
  1606 + .attr('dy', function () {
  1607 + let tspan_box = d3.select(this.parentNode).select('tspan.lineName').node().getBBox()
  1608 + return tspan_box.height + 2
  1609 + })
  1610 + textItemsUpdate.select('tspan.endStop_right')
  1611 + .style('font-size', self.left_part_end_stop_font_size)
  1612 + .style('fill', self.left_part_end_stop_font_color)
  1613 +
  1614 + // 2-3、添加/更新 到站信息 tspan
  1615 + textItemsEnter.select('text').append('tspan')
  1616 + .classed('arrival_left', true)
  1617 + .text('距离本站：')
  1618 + .style('font-size', self.left_part_info_left_font_size)
  1619 + .style('fill', self.left_part_info_left_font_color)
  1620 + .attr('x', 0)
  1621 + .attr('dy', function () {
  1622 + let tspan_box_left = d3.select(this.parentNode).select('tspan.endStop_left').node().getBBox()
  1623 + let tspan_box_right = d3.select(this.parentNode).select('tspan.endStop_right').node().getBBox()
  1624 + if (tspan_box_left.height > tspan_box_right.height) {
  1625 + return tspan_box_left.height + 2
  1626 + } else {
  1627 + return tspan_box_right.height + 2
  1628 + }
  1629 + })
  1630 + textItemsEnter.select('text').append('tspan')
  1631 + .classed('arrival_right', true)
  1632 + .text(function (d) {
  1633 + return d.arrivalInfo
  1634 + })
  1635 + .style('font-size', self.left_part_arrival_info_font_size)
  1636 + .style('fill', self.left_part_arrival_info_font_color)
  1637 +
  1638 + textItemsUpdate.select('tspan.arrival_left')
  1639 + .style('font-size', self.left_part_info_left_font_size)
  1640 + .style('fill', self.left_part_info_left_font_color)
  1641 + .attr('dy', function () {
  1642 + let tspan_box_left = d3.select(this.parentNode).select('tspan.endStop_left').node().getBBox()
  1643 + let tspan_box_right = d3.select(this.parentNode).select('tspan.endStop_right').node().getBBox()
  1644 + if (tspan_box_left.height > tspan_box_right.height) {
  1645 + return tspan_box_left.height + 2
  1646 + } else {
  1647 + return tspan_box_right.height + 2
  1648 + }
  1649 + })
  1650 + textItemsUpdate.select('tspan.arrival_right')
  1651 + .text(function (d) {
  1652 + return d.arrivalInfo
  1653 + })
  1654 + .style('font-size', self.left_part_arrival_info_font_size)
  1655 + .style('fill', self.left_part_arrival_info_font_color)
  1656 +
  1657 + // 2-4、添加/更新 首末班 tspan
  1658 + textItemsEnter.select('text').append('tspan')
  1659 + .classed('startEnd_left', true)
  1660 + .text('首末班：')
  1661 + .style('font-size', self.left_part_info_left_font_size)
  1662 + .style('fill', self.left_part_info_left_font_color)
  1663 + .attr('x', 0)
  1664 + .attr('dy', function () {
  1665 + let tspan_box_left = d3.select(this.parentNode).select('tspan.arrival_left').node().getBBox()
  1666 + let tspan_box_right = d3.select(this.parentNode).select('tspan.arrival_right').node().getBBox()
  1667 + if (tspan_box_left.height > tspan_box_right.height) {
  1668 + return tspan_box_left.height + 2
  1669 + } else {
  1670 + return tspan_box_right.height + 2
  1671 + }
  1672 + })
  1673 + textItemsEnter.select('text').append('tspan')
  1674 + .classed('startEnd_right', true)
  1675 + .text(function (d) {
  1676 + return d.startTime + '~' + d.endTime
  1677 + })
  1678 + .style('font-size', self.left_part_start_end_time_font_size)
  1679 + .style('fill', self.left_part_start_end_time_font_color)
  1680 +
  1681 + textItemsUpdate.select('tspan.startEnd_left')
  1682 + .style('font-size', self.left_part_info_left_font_size)
  1683 + .style('fill', self.left_part_info_left_font_color)
  1684 + .attr('dy', function () {
  1685 + let tspan_box_left = d3.select(this.parentNode).select('tspan.arrival_left').node().getBBox()
  1686 + let tspan_box_right = d3.select(this.parentNode).select('tspan.arrival_right').node().getBBox()
  1687 + if (tspan_box_left.height > tspan_box_right.height) {
  1688 + return tspan_box_left.height + 2
  1689 + } else {
  1690 + return tspan_box_right.height + 2
  1691 + }
  1692 + })
  1693 + textItemsUpdate.select('tspan.startEnd_right')
  1694 + .style('font-size', self.left_part_start_end_time_font_size)
  1695 + .style('fill', self.left_part_start_end_time_font_color)
  1696 +
  1697 + // 2-5、更新g的位置，水平居中/垂直居中
  1698 + textItemsEnter.attr('transform', function (d) {
  1699 + let g_bounds = this.getBBox()
  1700 + let dx = (width - g_bounds.width) / 2 - g_bounds.x
  1701 + let dy = (height - g_bounds.height) / 2 - g_bounds.y
  1702 + if (dx < 0) {
  1703 + dx = 1
  1704 + }
  1705 + if (dy < 0) {
  1706 + dy = 1
  1707 + }
  1708 + return `translate(${dx}, ${dy})`
  1709 + })
  1710 +
  1711 + textItemsUpdate.attr('transform', function () {
  1712 + let g_bounds = this.getBBox()
  1713 + let dx = (width - g_bounds.width) / 2 - g_bounds.x
  1714 + let dy = (height - g_bounds.height) / 2 - g_bounds.y
  1715 + if (dx < 0) {
  1716 + dx = 1
  1717 + }
  1718 + if (dy < 0) {
  1719 + dy = 1
  1720 + }
  1721 + return `translate(${dx}, ${dy})`
  1722 + })
  1723 +
  1724 +
  1725 + },
  1726 +
  1727 + refreshEmptyDataSvg () {
  1728 + let self = this
  1729 +
  1730 + let svg = self.private_svg
  1731 + let $jQuery = self.private_jQuery
  1732 + let d3 = self.private_d3
  1733 +
  1734 + let width = self.svg_width // 线路信息区域的宽度
  1735 + let height = self.svg_height // 内部整个svg的高度
  1736 +
  1737 + let routeData = self.eBusStopData.routeStationDataList
  1738 +
  1739 + // --------------- 0、添加/更新 线路图背景rect ------------- //
  1740 + let backgroundRectData = [{key: 'bgKey3', id: 'empty-background-gradient'}]
  1741 + if (routeData && routeData.length > 0) {
  1742 + backgroundRectData = []
  1743 + }
  1744 + let backgroundUpdate = svg.select('g.emptyInfo').selectAll('g.background')
  1745 + .data(backgroundRectData, function (d) {
  1746 + return d.key
  1747 + })
  1748 + let backgroundEnter = backgroundUpdate
  1749 + let backgroundExit = backgroundUpdate.exit()
  1750 + backgroundExit.remove()
  1751 + backgroundEnter = backgroundEnter.enter().append('g').classed('background', true)
  1752 + backgroundEnter.append('rect')
  1753 + .classed('main', true)
  1754 + .style('fill', function (d) {
  1755 + return `url(#${d.id})`
  1756 + })
  1757 + .attr('width', width)
  1758 + .attr('height', height)
  1759 + .attr('rx', self.left_part_background_rect_r)
  1760 + .attr('ry', self.left_part_background_rect_r)
  1761 + backgroundUpdate.select('rect.main')
  1762 + .attr('width', width)
  1763 + .attr('height', height)
  1764 + .attr('rx', self.left_part_background_rect_r)
  1765 + .attr('ry', self.left_part_background_rect_r)
  1766 +
  1767 + // ------------ 0-1、添加/更新背景rect的上边框 ------------- //
  1768 + let strokeUpdate = svg.select('g.emptyInfo').selectAll('g.stroke')
  1769 + .data(backgroundRectData, function (d) {
  1770 + return d.key
  1771 + })
  1772 + let strokeEnter = strokeUpdate
  1773 + let strokeExit = strokeUpdate.exit()
  1774 + strokeExit.remove()
  1775 + strokeEnter = strokeEnter.enter().append('g').classed('stroke', true)
  1776 + let s_data = [
  1777 + [self.left_part_background_rect_r / 2, self.left_part_background_up_stroke_width / 2],
  1778 + [width - self.left_part_background_rect_r / 2, self.left_part_background_up_stroke_width / 2]]
  1779 + let s_line = d3.line()
  1780 + strokeEnter.append('path')
  1781 + .classed('up_stroke', true)
  1782 + .style('stroke', self.left_part_background_up_stroke_color)
  1783 + .style('stroke-width', self.left_part_background_up_stroke_width)
  1784 + .attr('d', function (d, i) {
  1785 + return s_line(s_data)
  1786 + })
  1787 + strokeUpdate.select('path.up_stroke')
  1788 + .style('stroke', self.left_part_background_up_stroke_color)
  1789 + .style('stroke-width', self.left_part_background_up_stroke_width)
  1790 + .attr('d', function (d, i) {
  1791 + return s_line(s_data)
  1792 + })
1166 1793 }
1167 1794  
1168 1795 }
... ...
front-end/h5/src/components/core/plugins/bsth/othergj/linechart/list/models/othergj-eBusStop-line-chart-list-scrollPage-innerData.js
  View file @350ffe9
... ... @@ -303,7 +303,7 @@ class ScrollPageInnerData {
303 303 }
304 304 let eBusStopGpsData = new EBusStopGpsData(
305 305 lineName, lineCode, routeData.lastStationName,
306   - startTime, endTime, 'TODO：计算发车', gpsDataList)
  306 + startTime, endTime, '等待发车', gpsDataList)
307 307  
308 308 // 添加scroll数据
309 309 rtnData._innerDataItemList.push(
... ...
front-end/h5/src/components/core/plugins/bsth/othergj/linechart/list/othergj-eBusStop-line-chart-list.js
  View file @350ffe9
... ... @@ -72,12 +72,17 @@ export default {
72 72 line_chart_background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
73 73 // 图内层css
74 74 _flag_5_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层上部分矩形css属性" class="bsth-line-item-divider"></hr>) } }),
75   - svg_background: PropTypes.color({ label: '线路图背景颜色', defaultValue: '#9EE0DF', layout: { prefixCls: 'bsth-line' } }),
  75 + svg_background: PropTypes.color({ label: '线路图背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
  76 + chart_line_gradient_color_start: PropTypes.color({ label: '背景渐变开始颜色', defaultValue: '#041e4c', layout: { prefixCls: 'bsth-line' } }),
  77 + chart_line_gradient_color_end: PropTypes.color({ label: '背景渐变结束颜色', defaultValue: '#0c5198', layout: { prefixCls: 'bsth-line' } }),
  78 + chart_line_background_rect_r: PropTypes.number({ label: '背景框圈角大小', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
  79 + chart_line_background_up_stroke_color: PropTypes.color({ label: '背景上边框颜色', defaultValue: '#819ebe', layout: { prefixCls: 'bsth-line' } }),
  80 + chart_line_background_up_stroke_width: PropTypes.number({ label: '背景上边框宽度', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
76 81 chart_left_padding: PropTypes.number({ label: '内部线路图距离左边', defaultValue: 50, layout: { prefixCls: 'bsth-line' } }),
77 82 chart_right_padding: PropTypes.number({ label: '内部线路图距离右边', defaultValue: 50, layout: { prefixCls: 'bsth-line' } }),
78 83 chart_top_padding: PropTypes.number({ label: '内部线路图距离上边', defaultValue: 40, layout: { prefixCls: 'bsth-line' } }),
79 84 chart_up_line_path_s_width: PropTypes.number({ label: '上部分线宽度', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }),
80   - chart_up_line_path_s_color: PropTypes.color({ label: '上部分线颜色', defaultValue: '#008000', layout: { prefixCls: 'bsth-line' } }),
  85 + chart_up_line_path_s_color: PropTypes.color({ label: '上部分线颜色', defaultValue: '#6ab5fc', layout: { prefixCls: 'bsth-line' } }),
81 86 chart_up_line_circle_f_color_current: PropTypes.color({ label: '线圆圈填充色-当前站点', defaultValue: '#CB0808', layout: { prefixCls: 'bsth-line' } }),
82 87 chart_up_line_circle_f_color_before: PropTypes.color({ label: '线圆圈填充色-前面站点', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
83 88 chart_up_line_circle_f_color_after: PropTypes.color({ label: '线圆圈填充色-后面站点', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
... ... @@ -87,10 +92,10 @@ export default {
87 92 chart_station_text_font_size_before: PropTypes.number({ label: '站名字体大小-前面站点', defaultValue: 12, layout: { prefixCls: 'bsth-line' } }),
88 93 chart_station_text_font_size_after: PropTypes.number({ label: '站名字体大小-后面站点', defaultValue: 12, layout: { prefixCls: 'bsth-line' } }),
89 94 chart_station_text_space: PropTypes.number({ label: '站名间距', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }),
90   - chart_station_text_transform_second: PropTypes.number({ label: '站名滚动间隔(秒)', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
91   - chart_up_station_text_font_f_color_current: PropTypes.color({ label: '站名颜色-当前站点', defaultValue: '#060D37', layout: { prefixCls: 'bsth-line' } }),
92   - chart_up_station_text_font_f_color_before: PropTypes.color({ label: '站名颜色-前面站点', defaultValue: '#9398B4', layout: { prefixCls: 'bsth-line' } }),
93   - chart_up_station_text_font_f_color_after: PropTypes.color({ label: '站名颜色-后面站点', defaultValue: '#4556b6', layout: { prefixCls: 'bsth-line' } }),
  95 + chart_station_text_transform_second: PropTypes.number({ label: '站名滚动间隔(秒)', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
  96 + chart_up_station_text_font_f_color_current: PropTypes.color({ label: '站名颜色-当前站点', defaultValue: '#CB0808', layout: { prefixCls: 'bsth-line' } }),
  97 + chart_up_station_text_font_f_color_before: PropTypes.color({ label: '站名颜色-前面站点', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
  98 + chart_up_station_text_font_f_color_after: PropTypes.color({ label: '站名颜色-后面站点', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
94 99 _flag_6_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层下部分线css属性" class="bsth-line-item-divider"></hr>) } }),
95 100 down_line_left_padding: PropTypes.number({ label: '线距离左边', defaultValue: 100, layout: { prefixCls: 'bsth-line' } }),
96 101 down_line_right_padding: PropTypes.number({ label: '线距离右边', defaultValue: 100, layout: { prefixCls: 'bsth-line' } }),
... ... @@ -106,7 +111,25 @@ export default {
106 111 _flag_8_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="车辆gps报站数据css属性" class="bsth-line-item-divider"></hr>) } }),
107 112 chart_gps_rect_color: PropTypes.color({ label: 'gps车辆rect背景色', defaultValue: '#3e50b3', layout: { prefixCls: 'bsth-line' } }),
108 113 chart_gps_rect_width: PropTypes.number({ label: 'gps车辆rect宽度', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
109   - chart_gps_rect_height: PropTypes.number({ label: 'gps车辆rect高度', defaultValue: 20, layout: { prefixCls: 'bsth-line' } })
  114 + chart_gps_rect_height: PropTypes.number({ label: 'gps车辆rect高度', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
  115 + _flag_9_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="左侧线路信息css属性" class="bsth-line-item-divider"></hr>) } }),
  116 + left_part_width: PropTypes.number({ label: '左侧信息整体宽度', defaultValue: 200, layout: { prefixCls: 'bsth-line' } }),
  117 + left_part_right_padding: PropTypes.number({ label: '左侧信息具体右侧', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }),
  118 + left_part_gradient_color_start: PropTypes.color({ label: '背景渐变开始颜色', defaultValue: '#031945', layout: { prefixCls: 'bsth-line' } }),
  119 + left_part_gradient_color_end: PropTypes.color({ label: '背景渐变结束颜色', defaultValue: '#04275c', layout: { prefixCls: 'bsth-line' } }),
  120 + left_part_background_rect_r: PropTypes.number({ label: '背景框圈角大小', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
  121 + left_part_background_up_stroke_color: PropTypes.color({ label: '背景上边框颜色', defaultValue: '#819ebe', layout: { prefixCls: 'bsth-line' } }),
  122 + left_part_background_up_stroke_width: PropTypes.number({ label: '背景上边框宽度', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
  123 + left_part_line_name_font_size: PropTypes.number({ label: '线路名称字体大小', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
  124 + left_part_line_name_font_color: PropTypes.color({ label: '线路名称字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
  125 + left_part_info_left_font_size: PropTypes.number({ label: '左侧标题字体大小', defaultValue: 15, layout: { prefixCls: 'bsth-line' } }),
  126 + left_part_info_left_font_color: PropTypes.color({ label: '左侧标题字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
  127 + left_part_end_stop_font_size: PropTypes.number({ label: '开往站点字体大小', defaultValue: 16, layout: { prefixCls: 'bsth-line' } }),
  128 + left_part_end_stop_font_color: PropTypes.color({ label: '开往站点字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
  129 + left_part_arrival_info_font_size: PropTypes.number({ label: '到站信息字体大小', defaultValue: 16, layout: { prefixCls: 'bsth-line' } }),
  130 + left_part_arrival_info_font_color: PropTypes.color({ label: '到站信息字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
  131 + left_part_start_end_time_font_size: PropTypes.number({ label: '首末班信息字体大小', defaultValue: 16, layout: { prefixCls: 'bsth-line' } }),
  132 + left_part_start_end_time_font_color: PropTypes.color({ label: '首末班信息字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } })
110 133 },
111 134 render () {
112 135 /* 最外层div对应编辑器的通用样式 */
... ... @@ -295,6 +318,11 @@ export default {
295 318 background_color={this.line_chart_background_color}
296 319 // 内部线路模拟图内层css属性
297 320 svg_background={this.svg_background}
  321 + chart_line_gradient_color_start={this.chart_line_gradient_color_start}
  322 + chart_line_gradient_color_end={this.chart_line_gradient_color_end}
  323 + chart_line_background_rect_r={this.chart_line_background_rect_r}
  324 + chart_line_background_up_stroke_color={this.chart_line_background_up_stroke_color}
  325 + chart_line_background_up_stroke_width={this.chart_line_background_up_stroke_width}
298 326 chart_left_padding={this.chart_left_padding}
299 327 chart_right_padding={this.chart_right_padding}
300 328 chart_top_padding={this.chart_top_padding}
... ... @@ -326,6 +354,23 @@ export default {
326 354 chart_gps_rect_color={this.chart_gps_rect_color}
327 355 chart_gps_rect_width={this.chart_gps_rect_width}
328 356 chart_gps_rect_height={this.chart_gps_rect_height}
  357 + left_part_width={this.left_part_width}
  358 + left_part_right_padding={this.left_part_right_padding}
  359 + left_part_gradient_color_start={this.left_part_gradient_color_start}
  360 + left_part_gradient_color_end={this.left_part_gradient_color_end}
  361 + left_part_background_rect_r={this.left_part_background_rect_r}
  362 + left_part_background_up_stroke_color={this.left_part_background_up_stroke_color}
  363 + left_part_background_up_stroke_width={this.left_part_background_up_stroke_width}
  364 + left_part_line_name_font_size={this.left_part_line_name_font_size}
  365 + left_part_line_name_font_color={this.left_part_line_name_font_color}
  366 + left_part_info_left_font_size={this.left_part_info_left_font_size}
  367 + left_part_info_left_font_color={this.left_part_info_left_font_color}
  368 + left_part_end_stop_font_size={this.left_part_end_stop_font_size}
  369 + left_part_end_stop_font_color={this.left_part_end_stop_font_color}
  370 + left_part_arrival_info_font_size={this.left_part_arrival_info_font_size}
  371 + left_part_arrival_info_font_color={this.left_part_arrival_info_font_color}
  372 + left_part_start_end_time_font_size={this.left_part_start_end_time_font_size}
  373 + left_part_start_end_time_font_color={this.left_part_start_end_time_font_color}
329 374 />
330 375 )
331 376 }
... ...