临港公交电子站牌项目

1、修正新组件eBusStop-line-chart，添加线路名信息，到站信息界面逻辑和属性编辑界面

临港公交电子站牌项目
1、修正新组件eBusStop-line-chart，添加线路名信息，到站信息界面逻辑和属性编辑界面
徐烜
1 parent a63fe967
Showing 1 changed file with 167 additions and 50 deletions
front-end/h5/src/components/core/plugins/bsth/lggj/eBusStop-line-chart.js
@@ -13,8 +13,8 @@ export default {
     defaultStyle: { // 默认属性
       top: 0,
       left: 0,
-      width: 550,
-      height: 300
+      width: 700,
+      height: 230
     }
   },
   name: 'eBusStop-line-chart',
@@ -38,6 +38,13 @@ export default {
         count: 0,
         millisecond: 1000
       },
+
+      // 注意：css里设定了box-sizing: border-box;，所以组件本身的宽高包括了margin,padding,border
+      //      所以计算内部其他组件宽高需要减去margin,padding,border
+      component_width: 350, // 组件宽度
+      component_height: 400, // 组件高度
+      text_info_width: 350, // 文字信息宽度
+      text_info_height: 100, // 文字信息高度
       line_width: 350, // 图宽度
       line_height: 300, // 图高度
  
@@ -60,9 +67,6 @@ export default {
  
       eBusStopData: null // 电子站牌数据（EBusStopData类型）
     }
-
-
-
   },
   props: {
     useMode: PropTypes.string({ // 自定义使用模式，alone:（单独使用），child:（子组件）
@@ -97,8 +101,6 @@ export default {
  
     // 图外层css
     _flag_2_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图外层css属性" class="bsth-line-item-divider"></hr>) } }),
-    line_name_font_size: PropTypes.number({ label: '线路名称字体大小', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
-    line_name_font_color: PropTypes.color({ label: '线路名称字体颜色', defaultValue: '#babdbd', layout: { prefixCls: 'bsth-line' } }),
     margin_left: PropTypes.number({ label: '图左边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
     margin_right: PropTypes.number({ label: '图右边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
     margin_top: PropTypes.number({ label: '图上边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
@@ -106,31 +108,46 @@ export default {
     border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
     background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
     // 图内层css
-    _flag_3_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层css属性" class="bsth-line-item-divider"></hr>) } }),
-    svg_background: PropTypes.color({ label: '线路图背景颜色', defaultValue: '#9EE0DF', layout: { prefixCls: 'bsth-line' } }),
+    _flag_3_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层线路到达信息css属性" class="bsth-line-item-divider"></hr>) } }),
+    text_info_background: PropTypes.color({ label: '信息背景颜色', defaultValue: '#238A94', layout: { prefixCls: 'bsth-line' } }),
+    line_info_height: PropTypes.number({ label: '线路信息高度', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
+    line_info_name_font_size: PropTypes.number({ label: '线路名称字体大小', defaultValue: 22, layout: { prefixCls: 'bsth-line' } }),
+    line_info_name_font_color: PropTypes.color({ label: '线路名称字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    line_info_name_left_padding: PropTypes.number({ label: '线路名称距离左边', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
+    line_info_name_top_padding: PropTypes.number({ label: '线路名称距离上边', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }),
+    arrive_info_height: PropTypes.number({ label: '到达信息高度', defaultValue: 35, layout: { prefixCls: 'bsth-line' } }),
+    arrive_info_fix_text_font_size: PropTypes.number({ label: '固定文字字体大小', defaultValue: 18, layout: { prefixCls: 'bsth-line' } }),
+    arrive_info_fix_text_font_color: PropTypes.color({ label: '固定文字字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    arrive_info_fix_text_left_padding: PropTypes.number({ label: '固定文字距离左边', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
+    arrive_info_fix_text_top_padding: PropTypes.number({ label: '固定文字距离上边', defaultValue: 2, layout: { prefixCls: 'bsth-line' } }),
+    arrive_info_stop_text_font_size: PropTypes.number({ label: '开往站点名字体大小', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
+    arrive_info_stop_text_font_color: PropTypes.color({ label: '开往站点名字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
+    arrive_info_text_font_size: PropTypes.number({ label: '到达信息字体大小', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
+    arrive_info_text_font_color: PropTypes.color({ label: '到达信息字体颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
     _flag_4_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层上部分矩形css属性" class="bsth-line-item-divider"></hr>) } }),
+    svg_background: PropTypes.color({ label: '线路图背景颜色', defaultValue: '#9EE0DF', layout: { prefixCls: 'bsth-line' } }),
     up_rect_left_padding: PropTypes.number({ label: '矩形距离左边', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
     up_rect_right_padding: PropTypes.number({ label: '矩形距离右边', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
-    up_rect_top_padding: PropTypes.number({ label: '矩形距离上边', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
+    up_rect_top_padding: PropTypes.number({ label: '矩形距离上边', defaultValue: 3, layout: { prefixCls: 'bsth-line' } }),
     up_rect_height: PropTypes.number({ label: '矩形高度', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
     up_rect_r: PropTypes.number({ label: '矩形圆边大小', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
     up_rect_b_color: PropTypes.color({ label: '矩形背景颜色', defaultValue: '#9FA067', layout: { prefixCls: 'bsth-line' } }),
     _flag_5_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层线路图css属性" class="bsth-line-item-divider"></hr>) } }),
     chart_left_padding: PropTypes.number({ label: '内部线路图距离左边', defaultValue: 50, layout: { prefixCls: 'bsth-line' } }),
     chart_right_padding: PropTypes.number({ label: '内部线路图距离右边', defaultValue: 50, layout: { prefixCls: 'bsth-line' } }),
-    chart_top_padding: PropTypes.number({ label: '内部线路图距离上边', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
+    chart_top_padding: PropTypes.number({ label: '内部线路图距离上边', defaultValue: 13, layout: { prefixCls: 'bsth-line' } }),
     chart_up_line_path_s_width: PropTypes.number({ label: '上部分线宽度', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
     chart_up_line_path_s_color: PropTypes.color({ label: '上部分线颜色', defaultValue: '#008000', layout: { prefixCls: 'bsth-line' } }),
     chart_up_line_circle_f_color: PropTypes.color({ label: '线圆圈填充色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
     chart_up_line_circle_r: PropTypes.number({ label: '线圆圈大小', defaultValue: 8, layout: { prefixCls: 'bsth-line' } }),
-    chart_station_text_top_padding: PropTypes.number({ label: '站点文字距离上边', defaultValue: 50, layout: { prefixCls: 'bsth-line' } }),
+    chart_station_text_top_padding: PropTypes.number({ label: '站点文字距离上边', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
     chart_station_text_font_size: PropTypes.number({ label: '站名字体大小', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
     chart_station_text_length: PropTypes.number({ label: '站名长度', defaultValue: 100, layout: { prefixCls: 'bsth-line' } }),
-    chart_up_station_text_font_f_color: PropTypes.color({ label: '上行站名颜色', defaultValue: '#4556b6', layout: { prefixCls: 'bsth-line' } }),
+    chart_up_station_text_font_f_color: PropTypes.color({ label: '站名颜色', defaultValue: '#4556b6', layout: { prefixCls: 'bsth-line' } }),
     _flag_6_: PropTypes.string({ label: '', component: null, extra: function (h) { return (<hr data-label="图内层下部分线css属性" class="bsth-line-item-divider"></hr>) } }),
     down_line_left_padding: PropTypes.number({ label: '线距离左边', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
     down_line_right_padding: PropTypes.number({ label: '线距离右边', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
-    down_line_bottom_padding: PropTypes.number({ label: '线距离下边', defaultValue: 20, layout: { prefixCls: 'bsth-line' } }),
+    down_line_bottom_padding: PropTypes.number({ label: '线距离下边', defaultValue: 6, layout: { prefixCls: 'bsth-line' } }),
     down_line_s_width: PropTypes.number({ label: '线宽度', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
     down_line_s_color: PropTypes.color({ label: '线颜色', defaultValue: '#277461', layout: { prefixCls: 'bsth-line' } }),
     down_line_arrow_width: PropTypes.number({ label: '箭头宽度', defaultValue: 55, layout: { prefixCls: 'bsth-line' } }),
@@ -139,8 +156,8 @@ export default {
  
   render () {
     const innerDivStyle = {
-      'width': this.line_width + 'px',
-      'height': this.line_height + 'px',
+      'width': this.component_width + 'px',
+      'height': this.component_height + 'px',
       'border': this.border_size + 'px solid black',
       'margin-left': this.margin_left + 'px',
       'margin-right': this.margin_right + 'px',
@@ -150,19 +167,6 @@ export default {
       'position': 'relative'
     }
  
-    const lineNameStyle = {
-      'height': '44px',
-      'position': 'absolute',
-      'left': '50%',
-      'transform': 'translate(-50%, 0)',
-      '-webkit-transform': 'translate(-50%, 0)',
-      'color': this.line_name_font_color,
-      'font-size': this.line_name_font_size + 'px',
-      'padding': '20px 0px',
-      'font-weight': 'bold',
-      'font-family': 'Open Sans, sans-serif'
-    }
-
     const downLinePathD =
       'M' + this.down_line_x1 + ' ' + this.down_line_y1 + ' ' +
       'L' + this.down_line_x2 + ' ' + this.down_line_y2 + ' ' +
@@ -171,14 +175,105 @@ export default {
       'L' + this.down_line_x5 + ' ' + this.down_line_y5 + ' ' +
       'Z'
  
+    const textInfoStyle = {
+      'border': '0px',
+      'margin': '0px',
+      'width': this.text_info_width + 'px',
+      'height': this.text_info_height + 'px',
+      'background': this.text_info_background
+    }
+
+    const lineInfoStyle = {
+      'border': '0px',
+      'margin': '0px',
+      'width': this.text_info_width + 'px',
+      'height': this.line_info_height + 'px',
+      'background': this.text_info_background
+    }
+    const lineInfoStyleForLineName = {
+      'border': '0px',
+      'margin': '0px',
+      'width': this.text_info_width / 2 + 'px',
+      'height': this.line_info_height + 'px',
+      'background': this.text_info_background,
+      'color': this.line_info_name_font_color,
+      'font-size': this.line_info_name_font_size + 'px',
+      'font-weight': 'bold',
+      'text-align': 'left',
+      'padding-left': this.line_info_name_left_padding + 'px',
+      'padding-top': this.line_info_name_top_padding + 'px'
+    }
+
+    const arriveInfoContainerStyle = {
+      'border': '0px',
+      'margin': '0px',
+      'width': this.text_info_width + 'px',
+      'height': this.arrive_info_height + 'px',
+      'background': this.text_info_background
+    }
+
+    const arriveInfoStyle = {
+      'border': '0px',
+      'margin': '0px',
+      'width': this.text_info_width / 3 + 'px',
+      'height': this.arrive_info_height + 'px',
+      'background': this.text_info_background,
+      'text-align': 'left',
+      'float': 'left',
+      'padding-left': this.arrive_info_fix_text_left_padding + 'px',
+      'padding-top': this.arrive_info_fix_text_top_padding + 'px'
+    }
+
+    const arriveInfoFixTextStyle = {
+      'color': this.arrive_info_fix_text_font_color,
+      'font-size': this.arrive_info_fix_text_font_size + 'px'
+    }
+
+    const arriveInfoStopTextStyle = {
+      'font-size': this.arrive_info_stop_text_font_size + 'px',
+      'color': this.arrive_info_stop_text_font_color,
+      'font-weight': 'bold'
+    }
+
+    const arriveInfoTextStyle = {
+      'font-size': this.arrive_info_text_font_size + 'px',
+      'color': this.arrive_info_text_font_color,
+      'font-weight': 'bold'
+    }
+
+    const svgStyle = {
+      // 'width': this.line_width + 'px',
+      'height': this.line_height + 'px',
+      'background-color': this.svg_background
+    }
+
     /* 最外层div对应编辑器的通用样式 */
     return (
       <div class="eBusStop-line-chart-outer-div">
         <div style={innerDivStyle}>
-          <div style={lineNameStyle}>{this.eBusStopData.lineName}</div>
+          <div style={textInfoStyle}>
+            <div style={lineInfoStyle}>
+              <div style={lineInfoStyleForLineName}>{this.eBusStopData.lineName}</div>
+              <div></div>
+            </div>
+            <div style={arriveInfoContainerStyle}>
+              <div style={arriveInfoStyle}>
+                <span style={arriveInfoFixTextStyle}>开往：</span>
+                <span style={arriveInfoStopTextStyle}>{this.eBusStopData.endStationName}</span>
+              </div>
+              <div style={arriveInfoStyle}>
+                <span style={arriveInfoFixTextStyle}>预计本次班车：</span>
+                <span style={arriveInfoTextStyle}>{this.eBusStopData.arriveTime1}</span>
+              </div>
+              <div style={arriveInfoStyle}>
+                <span style={arriveInfoFixTextStyle}>预计下次班车：</span>
+                <span style={arriveInfoTextStyle}>{this.eBusStopData.arriveTime2}</span>
+              </div>
+            </div>
+          </div>
           <svg class="eBusStop-line-chart"
                data-code={this.eBusStopData.lineCode}
-               style={{ 'background-color': this.svg_background }}>
+               style={svgStyle}>
             <g class="up-rect-wrap">
               <rect x={this.up_rect_x}
                     y={this.up_rect_y}
@@ -210,11 +305,12 @@ export default {
  
     // 使用外部元素的框架定义图的长宽
     let $jQuery = this.private_jQuery
-    this.line_width = $jQuery(this.$el).width() - this.margin_left - this.margin_right
-    this.line_height = $jQuery(this.$el).height() - this.margin_top - this.margin_bottom
+    this.component_width = $jQuery(this.$el).width() - this.margin_left - this.margin_right
+    this.component_height = $jQuery(this.$el).height() - this.margin_top - this.margin_bottom
+
     if (this.useMode === 'child') {
-      this.line_width = this.line_chart_outer_div_width - this.margin_left - this.margin_right
-      this.line_height = this.line_chart_outer_div_height - this.margin_top - this.margin_bottom
+      this.component_width = this.line_chart_outer_div_width - this.margin_left - this.margin_right
+      this.component_height = this.line_chart_outer_div_height - this.margin_top - this.margin_bottom
     }
  
     // 开启外部元素长宽监控计数
@@ -257,11 +353,11 @@ export default {
         let width = $jQuery(self.$el).width()
         let height = $jQuery(self.$el).height()
  
-        if (width !== self.line_width) {
-          self.line_width = width - self.margin_left - self.margin_right
+        if (width !== self.component_width) {
+          self.component_width = width - self.margin_left - self.margin_right
         }
-        if (height !== self.line_height) {
-          self.line_height = height - self.margin_top - self.margin_bottom
+        if (height !== self.component_height) {
+          self.component_height = height - self.margin_top - self.margin_bottom
         }
         self.watchWidthHeightTimer.count++
       }, self.watchWidthHeightTimer.millisecond)
@@ -296,6 +392,15 @@ export default {
       }
     },
     // ------------ 本身宽高 ----------- //
+    component_width () {
+      this.text_info_width = this.component_width - this.border_size * 2
+      this.line_width = this.component_width - this.border_size * 2
+    },
+    component_height () {
+      this.text_info_height = this.line_info_height + this.arrive_info_height
+      this.line_height = this.component_height - this.text_info_height - this.border_size * 2
+    },
+
     line_width () {
       this.refreshLineSvg()
       this.refreshUpRectSvg()
@@ -306,6 +411,14 @@ export default {
       this.refreshUpRectSvg()
       this.refreshDownLineSvg()
     },
+    line_info_height () {
+      this.text_info_height = this.line_info_height + this.arrive_info_height
+      this.line_height = this.component_height - this.text_info_height - this.border_size * 2
+    },
+    arrive_info_height () {
+      this.text_info_height = this.line_info_height + this.arrive_info_height
+      this.line_height = this.component_height - this.text_info_height - this.border_size * 2
+    },
     // ----------- 图外层css 监控 ----------- //
     margin_left () {
       let self = this
@@ -324,9 +437,11 @@ export default {
       self.line_height = self.line_height - self.margin_top - self.margin_bottom
     },
     border_size () {
-      this.refreshLineSvg()
-      this.refreshUpRectSvg()
-      this.refreshDownLineSvg()
+      this.text_info_width = this.component_width - this.border_size * 2
+      this.line_width = this.component_width - this.border_size * 2
+      this.text_info_height = this.line_info_height + this.arrive_info_height
+      this.line_height = this.component_height - this.text_info_height - this.border_size * 2
+
     },
     // ----------- 图内层css 监控 ----------- //
     // ----------- _flag_4_属性
@@ -460,25 +575,27 @@ export default {
       //   })
       let self = this
  
+      let width = self.line_width // 内部整个svg的宽度
+
       // 计算svg内部上部分矩形的属性
       this.up_rect_x = self.up_rect_left_padding
       this.up_rect_y = self.up_rect_top_padding
-      this.up_rect_width = self.line_width - self.border_size * 2 -
-        self.up_rect_left_padding - self.up_rect_right_padding
+      this.up_rect_width = width - self.up_rect_left_padding - self.up_rect_right_padding
  
     },
     refreshDownLineSvg () {
       let self = this
  
+      let width = self.line_width // 内部整个svg的宽度
+      let height = self.line_height // 内部整个svg的高度
+
       // 计算svg内部下部分线的属性
       // 5个点，左边两个点作为起点（两个起点用来模拟宽度，如果使用stroke-width，右边箭头无法是夹的），右边3个点组成半个箭头
       // 最左边起点（左下）
       this.down_line_x1 = self.down_line_left_padding
-      this.down_line_y1 = self.line_height - self.border_size * 2 -
-        self.down_line_bottom_padding
+      this.down_line_y1 = height - self.down_line_bottom_padding
       // 最右边箭头起点
-      this.down_line_x2 = self.line_width - self.border_size * 2 -
-        self.down_line_right_padding
+      this.down_line_x2 = width - self.down_line_right_padding
       this.down_line_y2 = this.down_line_y1
       // 箭头左上角
       this.down_line_x3 = this.down_line_x2 - self.down_line_arrow_width
@@ -497,8 +614,8 @@ export default {
       let d3 = self.private_d3
  
       let routeData = self.eBusStopData.routeStationDataList
-      let width = self.line_width - self.border_size * 2 // 内部整个svg的宽度
-      let height = self.line_height - self.border_size * 2 // 内部整个svg的高度
+      let width = self.line_width // 内部整个svg的宽度
+      let height = self.line_height // 内部整个svg的高度
       let svgNameSpace = self.private_svgns
       let svg = self.private_svg
       let chartLeftPadding = self.chart_left_padding