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

1、新建mhgj/chart/svgicon/carSvgComp.js，将之前的car.svg组件化，给mhgj-eBusStop-line-chart组件使用（具体参看代码）

闵行公交公司用的公交电子站牌页面组件
1、新建mhgj/chart/svgicon/carSvgComp.js，将之前的car.svg组件化，给mhgj-eBusStop-line-chart组件使用（具体参看代码）
徐烜
1 parent 1e8c4d43
Showing 4 changed files with 107 additions and 13 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/svgicon/carSvgComp.js
front-end/h5/src/components/core/plugins/index.js
@@ -46,7 +46,10 @@ 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 {
+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 {
 /**
  * 自定义线路模拟图组件（闵行公交电子站牌使用）
  */
+import Vue from 'vue'
+
 import moment from 'moment'
 import PropTypes from '@luban-h5/plugin-common-props'
 import './css/mhgj-eBusStop-line-chart.css'
-import CarIcon from './svgicon/car.svg'
+import CarIcon from './svgicon/carSvgComp'
 import Utils from 'core/plugins/bsth/bsth-utils'
 import { MhgjEBusStopLineChartData } from 'core/plugins/bsth/mhgj/chart/models/mhgjEBusStopLineChartData'
@@ -53,6 +55,12 @@ export default {
       // TODO：其他属性
+      // CarIcon组件属性
+      carIconComData : {
+        width: 50,
+        height: 50
+      },
+
       eBusStopData: null // 电子站牌数据（MhgjEBusStopLineChartData类型）
     }
   },
@@ -209,6 +217,10 @@ export default {
       this.watchWidthHeightTimer.count++
     }
+    // 设置CarIcon组件的宽度高度
+    this.carIconComData.width = this.part1_line_icon_width;
+    this.carIconComData.height = this.part1_line_icon_height;
+
     // 刷新svg
     this.refreshSvg()
   },
@@ -338,12 +350,14 @@ export default {
       svg.selectAll('g.part:nth-child(1) rect.main')
         .style('stroke-width', val)
     },
-    part1_line_icon_width () {
+    part1_line_icon_width (val) {
       let self = this
+      self.carIconComData.width = val
       self.refreshSvg()
     },
-    part1_line_icon_height () {
+    part1_line_icon_height (val) {
       let self = this
+      self.carIconComData.height = val
       self.refreshSvg()
     },
     part1_line_name_font_size (val) {
@@ -755,16 +769,36 @@ export default {
       itemsEnter.select('g.titleBound') // 添加part1上部分title中的图标
         .select(function (d, i) {return i === 0 ? this : null})
         .append('image')
-        .classed('carIcon', true)
+        .classed('CarIcon', true)
+        // 需要将svg图标代码嵌入组件代码中，避免打包engine包含外部svg，所以把svg图标组件话，动态添加
+        // .attr('href', CarIcon)
         .attr('x', 0)
         .attr('y', 0)
-        .attr('href', CarIcon)
         .attr('width', self.part1_line_icon_width) // 指定宽度
         .attr('height', self.part1_line_icon_height) // 指定高度
       itemsEnter.select('g.titleBound') // 添加所有part上部分title中的text
         .append('text')
         .classed('title', true)
         .text(function (d, i) {
+          // 动态添加CarIcon组件替换之前添加的image
+          if (i === 0) {
+            let car_g = svg.select('g.titleBound g.CarIcon')
+            if (car_g.empty()) {
+              // 动态创建CarIcon组件
+              let CarIconClass = Vue.extend(CarIcon)
+              // console.log(svg.select('g.titleBound').node())
+              // console.log(self.part1_line_icon_width)
+              new CarIconClass({
+                propsData: {
+                  cls: 'CarIcon'
+                },
+                data() {
+                  return self.carIconComData
+                }
+              }).$mount(svg.select('g.titleBound image.CarIcon').node())
+            }
+          }
+          // 添加文本
           if (i === 0) {
             return d.lineName
           } else if (i === 1) {
@@ -802,7 +836,7 @@ export default {
         })
         .attr('y', function (d, i) {
           if (i === 0) {
-            let icon_bounds = svg.select('image.carIcon').node().getBBox();
+            let icon_bounds = svg.select('g.CarIcon').node().getBBox();
             let text_bounds = this.getBBox();
             let temp = (text_bounds.height - icon_bounds.height) / 2
             if (temp > 0) {
@@ -815,9 +849,9 @@ export default {
             return 0
           }
         })
-      itemsUpdate.select('g.titleBound image.carIcon')
-        .attr('width', self.part1_line_icon_width) // 指定宽度
-        .attr('height', self.part1_line_icon_height) // 指定高度
+      // itemsUpdate.select('g.titleBound 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) {
@@ -828,7 +862,7 @@ export default {
         })
         .attr('y', function (d, i) {
           if (i === 0) {
-            let icon_bounds = svg.select('image.carIcon').node().getBBox();
+            let icon_bounds = svg.select('g.CarIcon').node().getBBox();
             let text_bounds = this.getBBox();
             let temp = (text_bounds.height - icon_bounds.height) / 2
             if (temp > 0) {
+/**
+ * car图标svg封装组件类。
+ * svg内容参照car.svg
+ */
+
+let initWidth = 50 // 初始宽度（为了计算放大缩小比例，固定初始宽度）
+let initHeight = 50 // 初始高度（为了计算放大缩小比例，固定初始高度）
+
+export default {
+  data () {
+    return {
+      width: 50, // 改变后的宽度
+      height: 50, // 改变后的高度
+      width_scale: 1, // 改变后的宽度比例
+      height_scale: 1 // 改变后的高度比例
+    }
+  },
+  props: {
+    cls: { type: String, required: true } // css样式类
+  },
+  watch: {
+    'width': {
+      handler (val) {
+        if (val && Number.isFinite(val)) {
+          this.width_scale = val / initWidth
+        }
+      },
+      immediate: true
+    },
+    'height': {
+      handler (val) {
+        if (val && Number.isFinite(val)) {
+          this.height_scale = val / initHeight
+        }
+      },
+      immediate: true
+    }
+  },
+  render () {
+    return (
+      <g class={this.cls} transform={ 'scale(' + this.width_scale + ',' + this.height_scale + ')' }>
+        <g><path style="opacity:1" fill="#1f78bd" d="M 19.5,-0.5 C 22.8333,-0.5 26.1667,-0.5 29.5,-0.5C 39.8333,2.5 46.5,9.16667 49.5,19.5C 49.5,22.8333 49.5,26.1667 49.5,29.5C 46.5,39.8333 39.8333,46.5 29.5,49.5C 26.1667,49.5 22.8333,49.5 19.5,49.5C 9.16667,46.5 2.5,39.8333 -0.5,29.5C -0.5,26.1667 -0.5,22.8333 -0.5,19.5C 2.5,9.16667 9.16667,2.5 19.5,-0.5 Z"/></g>
+        <g><path style="opacity:1" fill="#377fbf" d="M 13.5,14.5 C 13.5,13.8333 13.5,13.1667 13.5,12.5C 20.9818,11.508 28.6484,11.1746 36.5,11.5C 36.5,12.8333 36.5,14.1667 36.5,15.5C 28.6484,15.8254 20.9818,15.492 13.5,14.5 Z"/></g>
+        <g><path style="opacity:1" fill="#1d74ba" d="M 13.5,16.5 C 17.1667,16.5 20.8333,16.5 24.5,16.5C 24.5,19.5 24.5,22.5 24.5,25.5C 20.8333,25.5 17.1667,25.5 13.5,25.5C 13.5,22.5 13.5,19.5 13.5,16.5 Z"/></g>
+        <g><path style="opacity:1" fill="#bdd6ea" d="M 12.5,11.5 C 12.5,12.1667 12.8333,12.5 13.5,12.5C 13.5,13.1667 13.5,13.8333 13.5,14.5C 12.1667,15.1667 12.1667,15.8333 13.5,16.5C 13.5,19.5 13.5,22.5 13.5,25.5C 17.1667,25.5 20.8333,25.5 24.5,25.5C 24.8333,26.8333 25.1667,26.8333 25.5,25.5C 29.1667,25.5 32.8333,25.5 36.5,25.5C 36.5,26.1667 36.5,26.8333 36.5,27.5C 28.8333,27.5 21.1667,27.5 13.5,27.5C 13.5,28.5 13.5,29.5 13.5,30.5C 12.8333,30.5 12.1667,30.5 11.5,30.5C 11.8285,26.646 11.1618,22.9793 9.5,19.5C 10.7322,16.7892 11.7322,14.1226 12.5,11.5 Z"/></g>
+        <g><path style="opacity:1" fill="#2276bb" d="M 36.5,27.5 C 29.8933,29.705 23.06,30.0383 16,28.5C 14.9701,28.8361 14.4701,29.5028 14.5,30.5C 14.1667,30.5 13.8333,30.5 13.5,30.5C 13.5,29.5 13.5,28.5 13.5,27.5C 21.1667,27.5 28.8333,27.5 36.5,27.5 Z"/></g>
+        <g><path style="opacity:1" fill="#5090c8" d="M 36.5,27.5 C 37.404,28.209 37.7373,29.209 37.5,30.5C 29.8333,30.5 22.1667,30.5 14.5,30.5C 14.4701,29.5028 14.9701,28.8361 16,28.5C 23.06,30.0383 29.8933,29.705 36.5,27.5 Z"/></g>
+        <g><path style="opacity:1" fill="#d9e7f3" d="M 31.5,39.5 C 27.8274,37.6823 23.8274,37.0157 19.5,37.5C 19.5,38.5 19.5,39.5 19.5,40.5C 17.8333,40.5 16.1667,40.5 14.5,40.5C 13.8611,38.2396 12.6945,36.2396 11,34.5C 10.235,32.9343 10.4017,31.6009 11.5,30.5C 12.1667,30.5 12.8333,30.5 13.5,30.5C 13.8333,30.5 14.1667,30.5 14.5,30.5C 22.1667,30.5 29.8333,30.5 37.5,30.5C 37.7373,29.209 37.404,28.209 36.5,27.5C 36.5,26.8333 36.5,26.1667 36.5,25.5C 36.5,22.5 36.5,19.5 36.5,16.5C 32.8333,16.5 29.1667,16.5 25.5,16.5C 25.5,19.5 25.5,22.5 25.5,25.5C 25.1667,26.8333 24.8333,26.8333 24.5,25.5C 24.5,22.5 24.5,19.5 24.5,16.5C 20.8333,16.5 17.1667,16.5 13.5,16.5C 12.1667,15.8333 12.1667,15.1667 13.5,14.5C 20.9818,15.492 28.6484,15.8254 36.5,15.5C 36.5,14.1667 36.5,12.8333 36.5,11.5C 28.6484,11.1746 20.9818,11.508 13.5,12.5C 12.8333,12.5 12.5,12.1667 12.5,11.5C 12.6107,10.8826 12.944,10.3826 13.5,10C 21.1667,9.33333 28.8333,9.33333 36.5,10C 37,10.5 37.5,11 38,11.5C 38.3302,14.324 39.1635,16.9906 40.5,19.5C 40.3333,20.1667 40.1667,20.8333 40,21.5C 39.6667,20.5 39.3333,19.5 39,18.5C 38.2807,23.2007 38.4474,27.8673 39.5,32.5C 38.8094,35.3535 37.4761,37.8535 35.5,40C 33.9343,40.765 32.6009,40.5983 31.5,39.5 Z"/></g>
+        <g><path style="opacity:1" fill="#327ebf" d="M 12.5,31.5 C 21.1922,31.1686 29.8589,31.502 38.5,32.5C 34.1667,32.8333 29.8333,33.1667 25.5,33.5C 20.7784,33.4921 16.4451,32.8255 12.5,31.5 Z"/></g>
+        <g><path style="opacity:1" fill="#2276bb" d="M 36.5,25.5 C 32.8333,25.5 29.1667,25.5 25.5,25.5C 25.5,22.5 25.5,19.5 25.5,16.5C 29.1667,16.5 32.8333,16.5 36.5,16.5C 36.5,19.5 36.5,22.5 36.5,25.5 Z"/></g>
+        <g><path style="opacity:1" fill="#78acd6" d="M 13.5,34.5 C 21.1955,34.1692 28.8622,34.5025 36.5,35.5C 32.6667,35.8333 28.8333,36.1667 25,36.5C 20.771,36.4898 16.9377,35.8232 13.5,34.5 Z"/></g>
+        <g><path style="opacity:1" fill="#5f98cc" d="M 15.5,37.5 C 16.675,37.281 17.675,37.6143 18.5,38.5C 16.9483,39.7979 15.9483,39.4646 15.5,37.5 Z"/></g>
+        <g><path style="opacity:1" fill="#649acd" d="M 31.5,39.5 C 31.9483,37.5354 32.9483,37.2021 34.5,38.5C 33.675,39.3857 32.675,39.719 31.5,39.5 Z"/></g>
+      </g>
+    )
+  }
+}
@@ -353,7 +353,7 @@ export const pluginsList = [
     title: '电子站牌单线路模拟图2',
     icon: 'list',
     component: MhgjEBusStopLineChart,
-    visible: false,
+    visible: true,
     name: MhgjEBusStopLineChart.name
   },
@@ -377,7 +377,7 @@ export const pluginsList = [
     title: '电子站牌单线路模拟图3',
     icon: 'list',
     component: OthergjEBusStopLineChart,
-    visible: true,
+    visible: false,
     name: OthergjEBusStopLineChart.name
   },