电子站牌项目

1、修改bsth-line-prop-panel.css 添加分割线css（中间带文字），具体看css中注释 2、修改bsth-line-chart-list，bsth-line-chart组件，添加分割线属性

电子站牌项目
1、修改bsth-line-prop-panel.css 添加分割线css（中间带文字），具体看css中注释 2、修改bsth-line-chart-list，bsth-line-chart组件，添加分割线属性
徐烜
1 parent e05967b8
Showing 3 changed files with 30 additions and 6 deletions
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart-list.js
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart.js
front-end/h5/src/components/core/plugins/bsth/bsth-line-prop-panel.css
@@ -45,7 +45,7 @@ export default {
       visible: false
     }),
     // --------------- 外层css属性 --------------- //
-    _flag_2_: PropTypes.string({ label: '', component: null, extra: '外层css属性' }),
+    _flag_2_: PropTypes.string({ label: '', component: null, extra: function(h) {return (<hr data-label="外层css属性" class="bsth-line-item-divider"/>)} }),
     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' } }),
@@ -53,7 +53,7 @@ export default {
     border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
     background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
     // --------------- 内部线路模拟图外层css属性 --------------- //
-    _flag_3_: PropTypes.string({ label: '', component: null, extra: '内部线路模拟图外层css属性' }),
+    _flag_3_: PropTypes.string({ label: '', component: null, extra: function(h) {return (<hr data-label="内部线路模拟图外层css属性" class="bsth-line-item-divider"></hr>)} }),
     line_chart_margin_left: PropTypes.number({ label: '图左边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
     line_chart_margin_right: PropTypes.number({ label: '图右边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
     line_chart_margin_top: PropTypes.number({ label: '图上边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
@@ -61,7 +61,7 @@ export default {
     line_chart_border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
     line_chart_background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
     // --------------- 内部线路模拟图内层css属性 --------------- //
-    _flag_4_: PropTypes.string({ label: '', component: null, extra: '内部线路模拟图内层css属性' }),
+    _flag_4_: 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: '内部线路图距离左边padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
     chart_right_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
     chart_center_top_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 4, layout: { prefixCls: 'bsth-line' } }),
@@ -67,11 +67,11 @@ export default {
       visible: false
     }),
     // 数据属性
-    _flag_1_: PropTypes.string({ label: '', component: null, extra: '数据属性' }),
+    _flag_1_: PropTypes.string({ label: '', component: null, extra: function(h) {return (<hr data-label="数据属性" class="bsth-line-item-divider"></hr>)} }),
     line_name: PropTypes.string({ label: '线路名称', defaultValue: '线路1', layout: { prefixCls: 'bsth-line' } }),
     line_code: PropTypes.string({ label: '线路代码', defaultValue: 'ACODE', layout: { prefixCls: 'bsth-line' } }),
     // 图外层css
-    _flag_2_: PropTypes.string({ label: '', component: null, extra: '图外层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' } }),
@@ -81,7 +81,7 @@ export default {
     border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
     background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
     // 图内层css
-    _flag_3_: PropTypes.string({ label: '', component: null, extra: '图内层css属性' }),
+    _flag_3_: 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: '内部线路图距离左边padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
     chart_right_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
     chart_center_top_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 4, layout: { prefixCls: 'bsth-line' } }),
@@ -36,3 +36,27 @@
     top: -0.5px;
     margin: 0 8px 0 2px;
 }
+
+/**
+    线路模拟图，线路模拟列表右侧属性面板使用的分割线
+    1、定义一个属性 PropTypes.string label为空''，
+    2、定义个extra属性 如下：extra: function(h) {return (<hr data-label="外层css属性" class="bsth-line-item-divider"/>)}
+    3、如上，内部模版使用hr属性，使用 class=bsth-line-item-divider，定义属性data-label表示分割线中间的文字
+ */
+.bsth-line-item-divider {
+    text-align:center;
+    line-height:0px;
+    background:blue;
+    margin-left: -20px;
+    margin-right: -70px;
+}
+
+.bsth-line-item-divider::after {
+    content: attr(data-label);
+    font-weight:bold;
+    font-size:14px;
+    background:white;
+    z-index:2;
+    padding-left: 5px;
+    padding-right: 5px;
+}