闵行公交公司用的公交电子站牌页面组件

1、修正mhgj-eBusStop-line-chart组件bug（part没有正确的删除更新，主要修正model的generateSvgData方法，添加svgD3PartKey，svgPartIndex辅助d3绘制svg）

闵行公交公司用的公交电子站牌页面组件
1、修正mhgj-eBusStop-line-chart组件bug（part没有正确的删除更新，主要修正model的generateSvgData方法，添加svgD3PartKey，svgPartIndex辅助d3绘制svg）
徐烜
1 parent eeaa9c0c
Showing 4 changed files with 346 additions and 145 deletions
front-end/h5/src/components/core/plugins/bsth/mhgj/chart/css/mhgj-eBusStop-line-chart.css
front-end/h5/src/components/core/plugins/bsth/mhgj/chart/mhgj-eBusStop-line-chart.js
front-end/h5/src/components/core/plugins/bsth/mhgj/chart/models/mhgjEBusStopLineChartData.js
front-end/h5/src/components/core/plugins/bsth/mhgj/list/mhgj-eBusStop-line-chart-list-scrollPage.js
@@ -31,6 +31,7 @@ svg.mhgj-eBusStop-line-chart {
     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 }
+/** 每个part对应一个g，和rect */
 svg.mhgj-eBusStop-line-chart g.part {
 }
 svg.mhgj-eBusStop-line-chart g.part rect.main {
@@ -39,6 +40,7 @@ svg.mhgj-eBusStop-line-chart g.part rect.main {
     stroke-width: 1;
     Pointer-events: none;
 }
+/** 每个part上部title相关 */
 svg.mhgj-eBusStop-line-chart g.part rect.titleBackground {
     fill: #7dc6fe;
     stroke-width: 0;
@@ -46,12 +48,6 @@ svg.mhgj-eBusStop-line-chart g.part rect.titleBackground {
 }
 svg.mhgj-eBusStop-line-chart g.part g.titleBound {
 }
-svg.mhgj-eBusStop-line-chart g.part g.titleBound image.CarIcon { /* 这个会先添加，之后被g.CarIcon替换，具体参见代码 */
-    /** 第一个part内部会使用 */
-}
-svg.mhgj-eBusStop-line-chart g.part g.titleBound g.CarIcon { /* 和carSvgComp.js里的属性对应 */
-    /** 第一个part内部会使用 */
-}
 svg.mhgj-eBusStop-line-chart g.part g.titleBound text.title {
     font-size: 60px;
     font-weight: 900;
@@ -60,8 +56,15 @@ svg.mhgj-eBusStop-line-chart g.part g.titleBound text.title {
     Pointer-events: none;
 }
-/** 每个part的下半部分差异较大，分开css */
-/** part1用 */
+/** part1 */
+/** part1相对于其他part，上部分title多了图标 */
+svg.mhgj-eBusStop-line-chart g.part g.titleBound image.part1.CarIcon { /* 这个会先添加，之后被g.CarIcon替换，具体参见代码 */
+    /** 第一个part内部会使用 */
+}
+svg.mhgj-eBusStop-line-chart g.part g.titleBound g.part1.CarIcon { /* 和carSvgComp.js里的属性对应 */
+    /** 第一个part内部会使用 */
+}
+
 svg.mhgj-eBusStop-line-chart g.part g.content1Bound {
 }
 svg.mhgj-eBusStop-line-chart g.part g.content1Bound text.content1 {
@@ -80,7 +83,8 @@ svg.mhgj-eBusStop-line-chart g.part g.content2Bound text.content2 {
     text-shadow: 0 0 2px #dadada;
     Pointer-events: none;
 }
-/** part2用 */
+
+/** part2 */
 svg.mhgj-eBusStop-line-chart g.part path.bound {
     stroke: rgb(0, 0, 0);
     stroke-width: 1;
@@ -170,8 +174,7 @@ svg.mhgj-eBusStop-line-chart g.part g.content7Bound2 text.content7_2_right {
     text-shadow: 0 0 2px #dadada;
     Pointer-events: none;
 }
-
-/** part3用 */
+/** part3 */
 svg.mhgj-eBusStop-line-chart g.part g.contentAllBound {
 }
 svg.mhgj-eBusStop-line-chart g.part g.contentAllBound text.content {
-/**
- * 自定义线路模拟图组件（闵行公交电子站牌使用）
- */
 import Vue from 'vue'
 import moment from 'moment'
@@ -288,6 +285,7 @@ export default {
         // if (!Utils.objectEquals(currentVal, oldVal)) {
         //   self.refreshSvg()
         // }
+        console.log('refreshSvg()')
         self.refreshSvg()
       },
       deep: true
@@ -609,10 +607,10 @@ export default {
         .domain([0, 1]) // 定义域
         .range([partUpPadding, height - partDownPadding]) // 值域
-      // ------------ 1、添加g元素 ----------------//
+      // ------------ 1、添加g元素 ---------------- //
       let itemsUpdate = svg.selectAll('g.part')
         .data(svgData, function (d) {
-          return d.text1
+          return d.svgD3PartKey
         })
       let itemsEnter = itemsUpdate
       let itemsExit = itemsUpdate.exit()
@@ -620,69 +618,68 @@ export default {
       itemsExit.remove()
       itemsEnter = itemsEnter.enter().append('g')
         .classed('part', true)
-        .attr('transform', function (d, i) {
+        .attr('transform', function (d) {
           let x, y
-          if (i === 0) { // part1
+          if (d.svgPartIndex === 1) { // part1
             x = xScale(0)
-          } else if (i === 1) { // part2
+          } else if (d.svgPartIndex === 2) { // part2
             x = xScale(0) + partWidth + partBetweenPadding
-          } else if (i === 2) { // part3
+          } else if (d.svgPartIndex === 3) { // part3
             x = xScale(0) + partWidth * 2 + partBetweenPadding * 2
           }
           y = yScale(0)
           return `translate(${x}, ${y})`
         })
       itemsUpdate
-        .attr('transform', function (d, i) {
+        .attr('transform', function (d) {
           let x, y
-          if (i === 0) { // part1
+          if (d.svgPartIndex === 1) { // part1
             x = xScale(0)
-          } else if (i === 1) { // part2
+          } else if (d.svgPartIndex === 2) { // part2
             x = xScale(0) + partWidth + partBetweenPadding
-          } else if (i === 2) { // part3
+          } else if (d.svgPartIndex === 3) { // part3
             x = xScale(0) + partWidth * 2 + partBetweenPadding * 2
           }
           y = yScale(0)
           return `translate(${x}, ${y})`
         })
-      // ------------ 2、添加各个part的上半部分 ----------------//
-      // ------------- 2-1、添加每个part最外部的rect（以下）------------//
+      // ------------ 1-1、添加g rect.main 元素 ---------------- //
       itemsEnter.append('rect')
         .classed('main', true)
-        .style('fill', function (d, i) {
-          if (i === 0) {
+        .style('fill', function (d) {
+          if (d.svgPartIndex === 1) {
             return self.part1_background_color
-          } else if (i === 1) {
+          } else if (d.svgPartIndex === 2) {
             return self.part2_background_color
-          } else if (i === 2) {
+          } else if (d.svgPartIndex === 3) {
             return self.part3_background_color
           } else {
             return '#FFFFFF'
           }
         })
-        .style('stroke-width', function (d, i) {
-          if (i === 0) { // part1没有边框
+        .style('stroke-width', function (d) {
+          if (d.svgPartIndex === 1) { // part1没有边框
             return self.part1_border_size
-          } else if (i === 1) {
+          } else if (d.svgPartIndex === 2) {
             return self.part2_border_size
-          } else if (i === 2) {
+          } else if (d.svgPartIndex === 3) {
             return self.part3_border_size
           } else {
             return 0
           }
         })
-        .attr('stroke-dasharray', function (d, i) {
-          if (i === 0) { // part1没有边框
+        .attr('stroke-dasharray', function (d) {
+          if (d.svgPartIndex === 1) { // part1没有边框
             return null
           } else { // part2、part3的边框样式为虚线
             return "4,2"
           }
         })
-        .attr('width', function (d, i) {
+        .attr('width', function (d) {
           // 三个part都存在，同宽度，part3不存在时，part2占用2个宽度
           // 宽度计算参考 0、前置计算准备
-          if (i === 1 ) { // part2
+          if (d.svgPartIndex === 2 ) { // part2
             if (showType === 0 || showType === 1) {
               return partWidth
             } else if (showType === 2 || showType === 3) {
@@ -696,8 +693,8 @@ export default {
         })
         .attr('height', partHeight + 'px')
       itemsUpdate.select('rect.main')
-        .attr('width', function (d, i) {
-          if (i === 1 ) { // part2
+        .attr('width', function (d) {
+          if (d.svgPartIndex === 2) { // part2
             if (showType === 0 || showType === 1) {
               return partWidth
             } else if (showType === 2 || showType === 3) {
@@ -710,13 +707,13 @@ export default {
           }
         })
         .attr('height', partHeight + 'px')
-      // ------------- 2-1、添加每个part最外部的rect（以上）------------//
+      // ------------ 2、添加各个part的上半部分 ----------------//
       // ------------- 2-1、添加每个part上部放置title的外部rect（以下）------------//
       itemsEnter.append('rect')
         .classed('titleBackground', true)
-        .attr('width', function (d, i) {
-          if (i === 1) {
+        .attr('width', function (d) {
+          if (d.svgPartIndex === 2) { // part2
             if (showType === 0 || showType === 1) {
               return partWidth - 2
             } else if (showType === 2 || showType === 3) {
@@ -728,27 +725,27 @@ export default {
             return partWidth - 2
           }
         })
-        .attr('height', function (d, i) {
-          if (i === 0) { // part1的title外部不需要rect
+        .attr('height', function (d) {
+          if (d.svgPartIndex === 1) { // part1的title外部不需要rect
             return 0
           } else {
             return partTitleRectHeight
           }
         })
-        .style('fill', function (d, i) {
-          if (i === 0) {
+        .style('fill', function (d) {
+          if (d.svgPartIndex === 1) {
             return self.part1_background_color
-          } else if (i === 1) {
+          } else if (d.svgPartIndex === 2) {
             return self.part2_title1_background_color
-          } else if (i === 2) {
+          } else if (d.svgPartIndex === 3) {
             return self.part3_title1_background_color
           }
         })
         .attr('x', 1)
         .attr('y', 1)
       itemsUpdate.select('rect.titleBackground')
-        .attr('width', function (d, i) {
-          if (i === 1) {
+        .attr('width', function (d) {
+          if (d.svgPartIndex === 2) { // part2
             if (showType === 0 || showType === 1) {
               return partWidth - 2
             } else if (showType === 2 || showType === 3) {
@@ -767,8 +764,9 @@ export default {
         .classed('titleBound', true)
         .attr('transform', 'translate(10, 10)')
       itemsEnter.select('g.titleBound') // 添加part1上部分title中的图标
-        .select(function (d, i) {return i === 0 ? this : null})
+        .select(function (d) {return d.svgPartIndex === 1 ? this : null})
         .append('image')
+        .classed('part1', true)
         .classed('CarIcon', true)
         // 需要将svg图标代码嵌入组件代码中，避免打包engine包含外部svg，所以把svg图标组件话，动态添加
         // .attr('href', CarIcon)
@@ -779,9 +777,9 @@ export default {
       itemsEnter.select('g.titleBound') // 添加所有part上部分title中的text
         .append('text')
         .classed('title', true)
-        .text(function (d, i) {
+        .text(function (d) {
           // 动态添加CarIcon组件替换之前添加的image
-          if (i === 0) {
+          if (d.svgPartIndex === 1) {
             let car_g = svg.select('g.titleBound g.CarIcon')
             if (car_g.empty()) {
               // 动态创建CarIcon组件
@@ -790,53 +788,54 @@ export default {
               // console.log(self.part1_line_icon_width)
               new CarIconClass({
                 propsData: {
-                  cls: 'CarIcon'
+                  cls: 'part1 CarIcon'
                 },
                 data() {
                   return self.carIconComData
                 }
-              }).$mount(svg.select('g.titleBound image.CarIcon').node())
+              }).$mount(svg.select('g.titleBound image.part1.CarIcon').node())
             }
           }
+
           // 添加文本
-          if (i === 0) {
+          if (d.svgPartIndex === 1) {
             return d.lineName
-          } else if (i === 1) {
+          } else if (d.svgPartIndex === 2) {
             return d.text1
-          } else if (i === 2) {
+          } else if (d.svgPartIndex === 3) {
             return d.text1
           } else {
             return '-'
           }
         })
-        .style('font-size', function (d, i) {
-          if (i === 0) {
+        .style('font-size', function (d) {
+          if (d.svgPartIndex === 1) {
             return self.part1_line_name_font_size
-          } else if (i === 1) {
+          } else if (d.svgPartIndex === 2) {
             return self.part2_title1_font_size
-          } else if (i === 2) {
+          } else if (d.svgPartIndex === 3) {
             return self.part3_title1_font_size
           }
         })
-        .style('fill', function (d, i) {
-          if (i === 0) {
+        .style('fill', function (d) {
+          if (d.svgPartIndex === 1) {
             return self.part1_line_name_font_color
-          } else if (i === 1) {
+          } else if (d.svgPartIndex === 2) {
             return self.part2_title1_font_color
-          } else if (i === 2) {
+          } else if (d.svgPartIndex === 3) {
             return self.part3_title1_font_color
           }
         })
-        .attr('x', function (d, i) {
-          if (i === 0) {
+        .attr('x', function (d) {
+          if (d.svgPartIndex === 1) {
             return self.part1_line_icon_width + 10
           } else {
             return 0
           }
         })
-        .attr('y', function (d, i) {
-          if (i === 0) {
-            let icon_bounds = svg.select('g.CarIcon').node().getBBox();
+        .attr('y', function (d) {
+          if (d.svgPartIndex === 1) {
+            let icon_bounds = svg.select('g.part1.CarIcon').node().getBBox();
             let text_bounds = this.getBBox();
             let temp = (text_bounds.height - icon_bounds.height) / 2
             if (temp > 0) {
@@ -849,20 +848,44 @@ export default {
             return 0
           }
         })
+      itemsEnter.select('g.titleBound')
+        .attr('transform', function (d) {
+          let rect_bounds = svg.select('g.part:nth-child(' + d.svgPartIndex +') rect.main').node().getBBox()
+          let title_bounds = this.getBBox()
+          let dx = 1
+          let dy = 1
+
+          if (d.svgPartIndex === 1) { // part1标题部分相对于rect.main的上半部分居中
+            dx = (rect_bounds.width - title_bounds.width) / 2 - title_bounds.x
+            dy = (rect_bounds.height / 2 - title_bounds.height) / 2 - title_bounds.y
+          } else { // part2，part3标题部分相对于rect.main的partTitleRectHeight高度居中
+            dx = (rect_bounds.width - title_bounds.width) / 2 - title_bounds.x
+            dy = (partTitleRectHeight - title_bounds.height) / 2 - title_bounds.y
+          }
+          if (dx < 0) {
+            dx = 1
+          }
+          if (dy < 0) {
+            dy = 1
+          }
+
+          return `translate(${dx}, ${dy})`
+        })
+
       // itemsUpdate.select('g.titleBound image.carIcon')
       //   .attr('width', self.part1_line_icon_width) // 指定宽度
       //   .attr('height', self.part1_line_icon_height) // 指定高度
       itemsUpdate.select('g.titleBound text.title')
-        .attr('x', function (d, i) {
-          if (i === 0) {
+        .attr('x', function (d) {
+          if (d.svgPartIndex === 1) {
             return self.part1_line_icon_width + 10
           } else {
             return 0
           }
         })
-        .attr('y', function (d, i) {
-          if (i === 0) {
-            let icon_bounds = svg.select('g.CarIcon').node().getBBox();
+        .attr('y', function (d) {
+          if (d.svgPartIndex === 1) {
+            let icon_bounds = svg.select('g.part1.CarIcon').node().getBBox();
             let text_bounds = this.getBBox();
             let temp = (text_bounds.height - icon_bounds.height) / 2
             if (temp > 0) {
@@ -876,13 +899,13 @@ export default {
           }
         })
       itemsUpdate.select('g.titleBound')
-        .attr('transform', function (d, i) {
-          let rect_bounds = svg.select('g.part:nth-child(' + (i + 1) +') rect.main').node().getBBox()
+        .attr('transform', function (d) {
+          let rect_bounds = svg.select('g.part:nth-child(' + d.svgPartIndex +') rect.main').node().getBBox()
           let title_bounds = this.getBBox()
           let dx = 1
           let dy = 1
-          if (i === 0) { // part1标题部分相对于rect.main的上半部分居中
+          if (d.svgPartIndex === 1) { // part1标题部分相对于rect.main的上半部分居中
             dx = (rect_bounds.width - title_bounds.width) / 2 - title_bounds.x
             dy = (rect_bounds.height / 2 - title_bounds.height) / 2 - title_bounds.y
           } else { // part2，part3标题部分相对于rect.main的partTitleRectHeight高度居中
@@ -895,14 +918,15 @@ export default {
           if (dy < 0) {
             dy = 1
           }
+
           return `translate(${dx}, ${dy})`
         })
       // ------------- 2-2、添加每个part上部title（以上）------------//
-      // ------------ 3、添加part的下半部分 ----------------//
+      // ------------ 3、添加每个part的下半部分 ----------------//
       // ------------ 3-1、part1部分 -------------//
-      itemsEnter.select(function (d, i) {
-        return i === 0 ? this : null
+      itemsEnter.select(function (d) {
+        return d.svgPartIndex === 1 ? this : null
       }).append('g')
         .classed('content1Bound', true)
         .attr('transform', 'translate(10, 10)')
@@ -918,9 +942,26 @@ export default {
         .attr('y', 0)
         .style('font-size', self.part1_terminal_stop_font_size)
         .style('fill', self.part1_terminal_stop_font_color)
+      itemsEnter.select('g.content1Bound')
+        .attr('transform', function (d) {
+          if (d.svgPartIndex === 1) { // 相对于rect.main的下半部分的上二分之一居中（其中-5表示向上偏离5）
+            let rect_part1_bounds = svg.select('rect.main:nth-child(1)').node().getBBox()
+            let g_content1_bounds = this.getBBox()
+            let dx = (rect_part1_bounds.width - g_content1_bounds.width) / 2 - g_content1_bounds.x
+            let dy = (rect_part1_bounds.height / 4 - g_content1_bounds.height) - g_content1_bounds.y
+              + rect_part1_bounds.height / 2 - 5
+            if (dx < 0) {
+              dx = 1
+            }
+            if (dy < 0) {
+              dy = 1
+            }
+            return `translate(${dx}, ${dy})`
+          }
+        })
       itemsUpdate.select('g.content1Bound')
-        .attr('transform', function (d, i) {
-          if (i === 0) { // 相对于rect.main的下半部分的上二分之一居中（其中-5表示向上偏离5）
+        .attr('transform', function (d) {
+          if (d.svgPartIndex === 1) { // 相对于rect.main的下半部分的上二分之一居中（其中-5表示向上偏离5）
             let rect_part1_bounds = svg.select('rect.main:nth-child(1)').node().getBBox()
             let g_content1_bounds = this.getBBox()
             let dx = (rect_part1_bounds.width - g_content1_bounds.width) / 2 - g_content1_bounds.x
@@ -936,8 +977,8 @@ export default {
           }
         })
-      itemsEnter.select(function (d, i) {
-        return i === 0 ? this : null
+      itemsEnter.select(function (d) {
+        return d.svgPartIndex === 1 ? this : null
       }).append('g')
         .classed('content2Bound', true)
         .attr('transform', 'translate(10, 10)')
@@ -953,9 +994,26 @@ export default {
         .attr('y', 0)
         .style('font-size', self.part1_terminal_stop_font_size)
         .style('fill', self.part1_terminal_stop_font_color)
+      itemsEnter.select('g.content2Bound')
+        .attr('transform', function (d) {
+          if (d.svgPartIndex === 1) { // 相对于rect.main的下半部分的下二分之一居中
+            let rect_part1_bounds = svg.select('rect.main:nth-child(1)').node().getBBox()
+            let g_content1_bounds = this.getBBox()
+            let dx = (rect_part1_bounds.width - g_content1_bounds.width) / 2 - g_content1_bounds.x
+            let dy =  - g_content1_bounds.y
+              + rect_part1_bounds.height * 0.75
+            if (dx < 0) {
+              dx = 1
+            }
+            if (dy < 0) {
+              dy = 1
+            }
+            return `translate(${dx}, ${dy})`
+          }
+        })
       itemsUpdate.select('g.content2Bound')
-        .attr('transform', function (d, i) {
-          if (i === 0) { // 相对于rect.main的下半部分的下二分之一居中
+        .attr('transform', function (d) {
+          if (d.svgPartIndex === 1) { // 相对于rect.main的下半部分的下二分之一居中
             let rect_part1_bounds = svg.select('rect.main:nth-child(1)').node().getBBox()
             let g_content1_bounds = this.getBBox()
             let dx = (rect_part1_bounds.width - g_content1_bounds.width) / 2 - g_content1_bounds.x
@@ -974,8 +1032,8 @@ export default {
       // ------------ 3-2、part2部分 -------------//
       // ------------ 3-2-1、当part3存在时，part2中间纵向添加一条虚线（以下）---------- //
       let boundLineFun = d3.line()
-      itemsEnter.select(function (d, i) {
-        return i === 1 && (showType === 0 || showType === 1) ? this : null
+      itemsEnter.select(function (d) {
+        return d.svgPartIndex === 2 && (showType === 0 || showType === 1) ? this : null
       }).append('path')
         .classed('bound', true)
         .attr('d', function () {
@@ -992,10 +1050,9 @@ export default {
           ])
         })
       // ------------ 3-2-1、当part3存在时，part2中间纵向添加一条虚线（以上）---------- //
-
       // ------------ 3-2-2、当part3存在时，part2纵向中间左侧添加内容标题（以下）----------- //
-      itemsEnter.select(function (d, i) {
-        return i === 1 ? this : null
+      itemsEnter.select(function (d) {
+        return d.svgPartIndex === 2 ? this : null
       }).append('g')
         .classed('content3Bound', true)
         .attr('transform', 'translate(10, 10)')
@@ -1010,9 +1067,25 @@ export default {
         })
         .style('font-size', self.part2_title2_font_size)
         .style('fill', self.part2_title2_font_color)
+      itemsEnter.select('g.content3Bound')
+        .attr('transform', function (d) {
+          if (d.svgPartIndex === 2) { // x方向居中对齐，y方向顶部对齐
+            let rect_part2_bounds = d3.select(this.parentNode).select('rect.main').node().getBBox()
+            let g_bounds = this.getBBox()
+            let dx = (rect_part2_bounds.width / 2 - g_bounds.width) / 2 - g_bounds.x
+            let dy = partTitleRectHeight - g_bounds.y
+            if (dx < 0) {
+              dx = 1
+            }
+            if (dy < 0) {
+              dy = 1
+            }
+            return `translate(${dx}, ${dy})`
+          }
+        })
       itemsUpdate.select('g.content3Bound')
-        .attr('transform', function (d, i) {
-          if (i === 1) { // x方向居中对齐，y方向顶部对齐
+        .attr('transform', function (d) {
+          if (d.svgPartIndex === 2) { // x方向居中对齐，y方向顶部对齐
             let rect_part2_bounds = d3.select(this.parentNode).select('rect.main').node().getBBox()
             let g_bounds = this.getBBox()
             let dx = (rect_part2_bounds.width / 2 - g_bounds.width) / 2 - g_bounds.x
@@ -1027,10 +1100,9 @@ export default {
           }
         })
       // ------------ 3-2-2、当part3存在时，part2纵向中间左侧添加内容标题（以上）----------- //
-
       // ------------ 3-2-3、当part3存在时，part2纵向中间右侧添加内容标题（以下）----------- //
-      itemsEnter.select(function (d, i) {
-        return i === 1 ? this : null
+      itemsEnter.select(function (d) {
+        return d.svgPartIndex === 2 ? this : null
       }).append('g')
         .classed('content4Bound', true)
         .attr('transform', 'translate(10, 10)')
@@ -1045,9 +1117,26 @@ export default {
         })
         .style('font-size', self.part2_title2_font_size)
         .style('fill', self.part2_title2_font_color)
+      itemsEnter.select('g.content4Bound')
+        .attr('transform', function (d) {
+          if (d.svgPartIndex === 2) { // x方向居中对齐，y方向顶部对齐
+            let rect_part2_bounds = d3.select(this.parentNode).select('rect.main').node().getBBox()
+            let g_bounds = this.getBBox()
+            let dx = (rect_part2_bounds.width / 2 - g_bounds.width) / 2 - g_bounds.x
+              + rect_part2_bounds.width / 2
+            let dy = 48 - g_bounds.y
+            if (dx < 0) {
+              dx = 1
+            }
+            if (dy < 0) {
+              dy = 1
+            }
+            return `translate(${dx},${dy})`
+          }
+        })
       itemsUpdate.select('g.content4Bound')
-        .attr('transform', function (d, i) {
-          if (i === 1) { // x方向居中对齐，y方向顶部对齐
+        .attr('transform', function (d) {
+          if (d.svgPartIndex === 2) { // x方向居中对齐，y方向顶部对齐
             let rect_part2_bounds = d3.select(this.parentNode).select('rect.main').node().getBBox()
             let g_bounds = this.getBBox()
             let dx = (rect_part2_bounds.width / 2 - g_bounds.width) / 2 - g_bounds.x
@@ -1063,10 +1152,9 @@ export default {
           }
         })
       // ------------ 3-2-3、当part3存在时，part2纵向中间右侧添加内容标题（以上）----------- //
-
       // ------------ 3-2-3、当part3存在时，part2纵向中间左侧添加内容（以下）----------- //
-      itemsEnter.select(function (d, i) {
-        return i === 1 ? this : null
+      itemsEnter.select(function (d) {
+        return d.svgPartIndex === 2 ? this : null
       }).append('g')
         .classed('content5Bound', true)
         .attr('transform', 'translate(10, 10)')
@@ -1161,9 +1249,26 @@ export default {
           let left_bound = svg.select('text.content5_left').node().getBBox()
           return left_bound.width + 2
         })
+      itemsEnter.select('g.content5Bound')
+        .attr('transform', function (d) {
+          if (d.svgPartIndex === 2) {
+            let rect_part2_bounds = d3.select(this.parentNode).select('rect.main').node().getBBox()
+            let g_bounds = this.getBBox()
+            let dx = (rect_part2_bounds.width / 2 - g_bounds.width) / 2 - g_bounds.x
+            let dy = (rect_part2_bounds.height / 2 - g_bounds.height) / 2 - g_bounds.y
+              + rect_part2_bounds.height / 2
+            if (dx < 0) {
+              dx = 1
+            }
+            if (dy < 0) {
+              dy = 1
+            }
+            return `translate(${dx}, ${dy})`
+          }
+        })
-      itemsUpdate.select(function (d, i) {
-        return i === 1 ? this : null
+      itemsUpdate.select(function (d) {
+        return d.svgPartIndex === 2 ? this : null
       }).select('g.content5Bound text.content5_left')
         .text(function (d) {
           if (showType === 0) {
@@ -1192,8 +1297,8 @@ export default {
             return "todo"
           }
         })
-      itemsUpdate.select(function (d, i) {
-        return i === 1 ? this : null
+      itemsUpdate.select(function (d) {
+        return d.svgPartIndex === 2 ? this : null
       }).select('g.content5Bound text.content5_right')
         .text(function (d) {
           if (showType === 0) {
@@ -1226,8 +1331,8 @@ export default {
           return left_bound.width + 2
         })
       itemsUpdate.select('g.content5Bound')
-        .attr('transform', function (d, i) {
-          if (i === 1) {
+        .attr('transform', function (d) {
+          if (d.svgPartIndex === 2) {
             let rect_part2_bounds = d3.select(this.parentNode).select('rect.main').node().getBBox()
             let g_bounds = this.getBBox()
             let dx = (rect_part2_bounds.width / 2 - g_bounds.width) / 2 - g_bounds.x
@@ -1243,10 +1348,9 @@ export default {
           }
         })
       // ------------ 3-2-3、当part3存在时，part2纵向中间左侧添加内容（以上）----------- //
-
       // ------------ 3-2-4、当part3存在时，part2纵向中间右侧添加内容（以下）----------- //
-      itemsEnter.select(function (d, i) {
-        return i === 1 && (showType === 0 || showType === 1 || showType === 3) ? this : null
+      itemsEnter.select(function (d) {
+        return d.svgPartIndex === 2 && (showType === 0 || showType === 1 || showType === 3) ? this : null
       }).append('g')
         .classed('content6Bound', true)
         .attr('transform', 'translate(10, 10)')
@@ -1292,9 +1396,27 @@ export default {
           let left_bound = svg.select('text.content6_left').node().getBBox()
           return left_bound.width + 2
         })
+      itemsEnter.select('g.content6Bound')
+        .attr('transform', function (d) {
+          if (d.svgPartIndex === 2) {
+            let rect_part2_bounds = d3.select(this.parentNode).select('rect.main').node().getBBox()
+            let g_bounds = this.getBBox()
+            let dx = (rect_part2_bounds.width / 2 - g_bounds.width) / 2 - g_bounds.x
+              + rect_part2_bounds.width / 2
+            let dy = (rect_part2_bounds.height / 2 - g_bounds.height) / 2 - g_bounds.y
+              + rect_part2_bounds.height / 2
+            if (dx < 0) {
+              dx = 1
+            }
+            if (dy < 0) {
+              dy = 1
+            }
+            return `translate(${dx}, ${dy})`
+          }
+        })
-      itemsUpdate.select(function (d, i) {
-        return i === 1 && (showType === 0 || showType === 1 || showType === 3) ? this : null
+      itemsUpdate.select(function (d) {
+        return d.svgPartIndex === 2 && (showType === 0 || showType === 1 || showType === 3) ? this : null
       }).select('g.content6Bound text.content6_left')
         .text(function (d) {
           if (showType === 3) {
@@ -1310,8 +1432,8 @@ export default {
             return d.currentFromStations_left
           }
         })
-      itemsUpdate.select(function (d, i) {
-        return i === 1 && (showType === 0 || showType === 1 || showType === 3) ? this : null
+      itemsUpdate.select(function (d) {
+        return d.svgPartIndex === 2 && (showType === 0 || showType === 1 || showType === 3) ? this : null
       }).select('g.content6Bound text.content6_right')
         .text(function (d) {
           if (showType === 3) {
@@ -1332,8 +1454,8 @@ export default {
           return left_bound.width + 2
         })
       itemsUpdate.select('g.content6Bound')
-        .attr('transform', function (d, i) {
-          if (i === 1) {
+        .attr('transform', function (d) {
+          if (d.svgPartIndex === 2) {
             let rect_part2_bounds = d3.select(this.parentNode).select('rect.main').node().getBBox()
             let g_bounds = this.getBBox()
             let dx = (rect_part2_bounds.width / 2 - g_bounds.width) / 2 - g_bounds.x
@@ -1350,10 +1472,9 @@ export default {
           }
         })
       // ------------ 3-2-4、当part3存在时，part2纵向中间右侧添加内容（以上）----------- //
-
       // ------------ 3-2-5、当part3不存在时，part2添加内容（以下）----------- //
-      itemsEnter.select(function (d, i) {
-        return i === 1 && showType === 2 ? this : null
+      itemsEnter.select(function (d) {
+        return d.svgPartIndex === 2 && showType === 2 ? this : null
       }).append('g')
         .classed('content7Bound1', true)
         .attr('transform', 'translate(10, 10)')
@@ -1383,9 +1504,27 @@ export default {
           let left_bound = svg.select('text.content7_1_left').node().getBBox()
           return left_bound.width + 2
         })
+      itemsEnter.select('g.content7Bound1')
+        .attr('transform', function (d) {
+          if (d.svgPartIndex === 2) {
+            let rect_part2_bounds = d3.select(this.parentNode).select('rect.main').node().getBBox()
+            let g_bounds = this.getBBox()
+            let dx = (rect_part2_bounds.width / 4 - g_bounds.width) / 2 - g_bounds.x
+              + rect_part2_bounds.width / 2
+            let dy = (rect_part2_bounds.height / 2 - g_bounds.height) / 2 - g_bounds.y
+              + rect_part2_bounds.height / 2
+            if (dx < 0) {
+              dx = 1
+            }
+            if (dy < 0) {
+              dy = 1
+            }
+            return `translate(${dx}, ${dy})`
+          }
+        })
-      itemsUpdate.select(function (d, i) {
-        return i === 1 && showType === 2 ? this : null
+      itemsUpdate.select(function (d) {
+        return d.svgPartIndex === 2 && showType === 2 ? this : null
       }).select('g.content7Bound1 text.content7_1_left')
         .text(function (d) {
           return d.currentFromStations_left
@@ -1393,8 +1532,8 @@ export default {
         .attr('title', function (d) {
           return d.currentFromStations_left
         })
-      itemsUpdate.select(function (d, i) {
-        return i === 1 && showType === 2 ? this : null
+      itemsUpdate.select(function (d) {
+        return d.svgPartIndex === 2 && showType === 2 ? this : null
       }).select('g.content7Bound1 text.content7_1_right')
         .text(function (d) {
           return d.currentFromStations_right
@@ -1407,8 +1546,8 @@ export default {
           return left_bound.width + 2
         })
       itemsUpdate.select('g.content7Bound1')
-        .attr('transform', function (d, i) {
-          if (i === 1) {
+        .attr('transform', function (d) {
+          if (d.svgPartIndex === 2) {
             let rect_part2_bounds = d3.select(this.parentNode).select('rect.main').node().getBBox()
             let g_bounds = this.getBBox()
             let dx = (rect_part2_bounds.width / 4 - g_bounds.width) / 2 - g_bounds.x
@@ -1425,8 +1564,8 @@ export default {
           }
         })
-      itemsEnter.select(function (d, i) {
-        return i === 1 && showType === 2 ? this : null
+      itemsEnter.select(function (d) {
+        return d.svgPartIndex === 2 && showType === 2 ? this : null
       }).append('g')
         .classed('content7Bound2', true)
         .attr('transform', 'translate(10, 10)')
@@ -1456,9 +1595,27 @@ export default {
           let left_bound = svg.select('text.content7_2_left').node().getBBox()
           return left_bound.width + 2
         })
+      itemsEnter.select('g.content7Bound2')
+        .attr('transform', function (d) {
+          if (d.svgPartIndex === 2) {
+            let rect_part2_bounds = d3.select(this.parentNode).select('rect.main').node().getBBox()
+            let g_bounds = this.getBBox()
+            let dx = (rect_part2_bounds.width / 4 - g_bounds.width) / 2 - g_bounds.x
+              + rect_part2_bounds.width * 0.75
+            let dy = (rect_part2_bounds.height / 2 - g_bounds.height) / 2 - g_bounds.y
+              + rect_part2_bounds.height / 2
+            if (dx < 0) {
+              dx = 1
+            }
+            if (dy < 0) {
+              dy = 1
+            }
+            return `translate(${dx}, ${dy})`
+          }
+        })
-      itemsUpdate.select(function (d, i) {
-        return i === 1 && showType === 2 ? this : null
+      itemsUpdate.select(function (d) {
+        return d.svgPartIndex === 2 && showType === 2 ? this : null
       }).select('g.content7Bound2 text.content7_2_left')
         .text(function (d) {
           return d.currentFromMinutes_left
@@ -1466,8 +1623,8 @@ export default {
         .attr('title', function (d) {
           return d.currentFromMinutes_left
         })
-      itemsUpdate.select(function (d, i) {
-        return i === 1 && showType === 2 ? this : null
+      itemsUpdate.select(function (d) {
+        return d.svgPartIndex === 2 && showType === 2 ? this : null
       }).select('g.content7Bound2 text.content7_2_right')
         .text(function (d) {
           return d.currentFromMinutes_right
@@ -1480,8 +1637,8 @@ export default {
           return left_bound.width + 2
         })
       itemsUpdate.select('g.content7Bound2')
-        .attr('transform', function (d, i) {
-          if (i === 1) {
+        .attr('transform', function (d) {
+          if (d.svgPartIndex === 2) {
             let rect_part2_bounds = d3.select(this.parentNode).select('rect.main').node().getBBox()
             let g_bounds = this.getBBox()
             let dx = (rect_part2_bounds.width / 4 - g_bounds.width) / 2 - g_bounds.x
@@ -1500,8 +1657,8 @@ export default {
       // ------------ 3-2-5、当part3不存在时，part2添加内容（以上）----------- //
       // ------------ 3-3、part3部分 -------------//
-      itemsEnter.select(function (d, i) {
-        return i === 2 ? this : null
+      itemsEnter.select(function (d) {
+        return d.svgPartIndex === 3 ? this : null
       }).append('g')
         .classed('contentAllBound', true)
         .attr('transform', 'translate(10, 10)')
@@ -1531,9 +1688,25 @@ export default {
           let left_bounds = svg.select('g.contentAllBound text.content').node().getBBox()
           return left_bounds.width + 10
         })
+      itemsEnter.select('g.contentAllBound')
+        .attr('transform', function (d) {
+          if (d.svgPartIndex === 3) {
+            let rect_part3_bounds = d3.select(this.parentNode).select('rect.main').node().getBBox()
+            let g_content_bounds = this.getBBox()
+            let dx = (rect_part3_bounds.width - g_content_bounds.width) / 2 - g_content_bounds.x
+            let dy = (rect_part3_bounds.height - 48 - g_content_bounds.height) / 2 - g_content_bounds.y + 48
+            if (dx < 0) {
+              dx = 1
+            }
+            if (dy < 0) {
+              dy = 1
+            }
+            return `translate(${dx}, ${dy})`
+          }
+        })
-      itemsUpdate.select(function (d, i) {
-        return i === 2 ? this : null
+      itemsUpdate.select(function (d) {
+        return d.svgPartIndex === 3 ? this : null
       }).select('g.contentAllBound text.content')
         .text(function (d) {
           return d.text2
@@ -1541,8 +1714,8 @@ export default {
         .attr('title', function (d) {
           return d.text2
         })
-      itemsUpdate.select(function (d, i) {
-        return i === 2 ? this : null
+      itemsUpdate.select(function (d) {
+        return d.svgPartIndex === 3 ? this : null
       }).select('g.contentAllBound text.arrivalTime')
         .text(function (d) {
           return d.nextArrivalTime
@@ -1551,8 +1724,8 @@ export default {
           return d.nextArrivalTime
         })
       itemsUpdate.select('g.contentAllBound')
-        .attr('transform', function (d, i) {
-          if (i === 2) {
+        .attr('transform', function (d) {
+          if (d.svgPartIndex === 3) {
             let rect_part3_bounds = d3.select(this.parentNode).select('rect.main').node().getBBox()
             let g_content_bounds = this.getBBox()
             let dx = (rect_part3_bounds.width - g_content_bounds.width) / 2 - g_content_bounds.x
@@ -1569,7 +1742,6 @@ export default {
     }
-
   }
 }
@@ -185,14 +185,19 @@ class MhgjEBusStopLineChartData {
   generateSvgData () {
     // 根据内部数据产生svg用数据
+    // part用于d3中的data指定key，命名规则第一个数字表示第几部分，下划线第二个数字表示showType
     let showData = [];
     if (this._showType === 0) {
       showData.push({
+        svgD3PartKey: 'part1',
+        svgPartIndex: 1,
         lineName: this._lineName,
         text1: '开往',
         text2: this._terminalStationName
       });
       showData.push({
+        svgD3PartKey: 'part2_0',
+        svgPartIndex: 2,
         text1: "本班车",
         text2: "到达时间",
         text3: "距本站",
@@ -201,6 +206,8 @@ class MhgjEBusStopLineChartData {
         currentFromStations_right: "站"
       })
       showData.push({
+        svgD3PartKey: 'part3',
+        svgPartIndex: 3,
         text1: "下一班车",
         text2: "预计到站",
         nextArrivalTime: this._nextArrivalTime
@@ -208,11 +215,15 @@ class MhgjEBusStopLineChartData {
     } else if (this._showType === 1) {
       showData.push({
+        svgD3PartKey: 'part1',
+        svgPartIndex: 1,
         lineName: this._lineName,
         text1: '开往',
         text2: this._terminalStationName
       });
       showData.push({
+        svgD3PartKey: 'part2_1',
+        svgPartIndex: 2,
         text1: "本班车",
         text2: "到达时间",
         text3: "距本站",
@@ -222,17 +233,23 @@ class MhgjEBusStopLineChartData {
         currentFromStations_right: "站"
       })
       showData.push({
+        svgD3PartKey: 'part3',
+        svgPartIndex: 3,
         text1: "下一班车",
         text2: "预计到站",
         nextArrivalTime: this._nextArrivalTime
       })
     } else if (this._showType === 2) {
       showData.push({
+        svgD3PartKey: 'part1',
+        svgPartIndex: 1,
         lineName: this._lineName,
         text1: '开往',
         text2: this._terminalStationName
       });
       showData.push({
+        svgD3PartKey: 'part2_2',
+        svgPartIndex: 2,
         text1: "本班车",
         text2: "到达时间",
         text3: "距本站",
@@ -245,11 +262,15 @@ class MhgjEBusStopLineChartData {
     } else if (this._showType === 3) {
       showData.push({
+        svgD3PartKey: 'part1',
+        svgPartIndex: 1,
         lineName: this._lineName,
         text1: '开往',
         text2: this._terminalStationName
       });
       showData.push({
+        svgD3PartKey: 'part2_3',
+        svgPartIndex: 2,
         text1: "本班车",
         text2: "到达时间",
         text3: "距本站",
@@ -172,6 +172,9 @@ export default {
         } else {
           this.scrollPageInnerData = ScrollPageInnerData.generateDataListByRemoteData(
             this.page_size, this.list_width, this.list_height, remoteDataList)
+          // this.scrollPageInnerData = ScrollPageInnerData.generateDataListByTest(
+          //   this.page_size, this.list_width, this.list_height)
+
           // 发送bindData事件，父组件绑定该事件
           this.$emit('bindData', this.scrollPageInnerData.scrollDataItemList)
           this.initLoading = false
@@ -195,6 +198,8 @@ export default {
       } else {
         jsonp(this.remoteUrl).then(remoteDataList => {
           this.scrollPageInnerData.refreshDataWithRemoteData(remoteDataList)
+          // console.log('refresh')
+          // this.scrollPageInnerData._scrollDataItemList[0]._eBusStopData.showType = 2
         }).catch(err => {
           console.log(err)
           this.$message.error(` 获取数据失败，状态：${err.status}，错误：${err.statusText}`, 1)