徐烜 / bsth-ebus-h5_editor · Commits

Commit e05967b814e9f51b9c983af31bbdb8a594b2dc7f

Authored by 徐烜
1 parent 96bcfa6d

电子站牌项目 

1、添加线路模拟图列表组件
2、修正线路模拟图作为自组件使用时尺寸变化的一些逻辑
3、修改index.js，添加线路模拟图列表组件定义
Inline Side-by-side
Showing 4 changed files with 489 additions and 11 deletions
front-end/h5/src/components/core/plugins/bsth/bsth-line-char-list_testData.js 0 → 100644
  View file @e05967b
  1 +/* eslint-disable */
  2 +/**
  3 + * 线路模拟图列表数据。
  4 + */
  5 +export default {
  6 + lineRouteList: [
  7 + { // 测试线路1
  8 + lineName: '测试线路1',
  9 + lineCode: '线路编码1',
  10 + directions: 0,
  11 + stationRouteCode: 10,
  12 + stationCode: 'ACODE',
  13 + stationName: 'A起点站',
  14 + stationMark: 'B'
  15 + }, {
  16 + lineName: '测试线路1',
  17 + lineCode: '线路编码1',
  18 + directions: 0,
  19 + stationRouteCode: 20,
  20 + stationCode: 'BCODE',
  21 + stationName: 'B中途站',
  22 + stationMark: 'Z'
  23 + }, {
  24 + lineName: '测试线路1',
  25 + lineCode: '线路编码1',
  26 + directions: 0,
  27 + stationRouteCode: 30,
  28 + stationCode: 'CCODE',
  29 + stationName: 'C中途站',
  30 + stationMark: 'Z'
  31 + }, {
  32 + lineName: '测试线路1',
  33 + lineCode: '线路编码1',
  34 + directions: 0,
  35 + stationRouteCode: 40,
  36 + stationCode: 'DCODE',
  37 + stationName: 'D中途站',
  38 + stationMark: 'Z'
  39 + }, {
  40 + lineName: '测试线路1',
  41 + lineCode: '线路编码1',
  42 + directions: 0,
  43 + stationRouteCode: 50,
  44 + stationCode: 'ECODE',
  45 + stationName: 'E中途站',
  46 + stationMark: 'Z'
  47 + }, {
  48 + lineName: '测试线路1',
  49 + lineCode: '线路编码1',
  50 + directions: 0,
  51 + stationRouteCode: 100,
  52 + stationCode: 'FCODE',
  53 + stationName: 'F终点站',
  54 + stationMark: 'E'
  55 + }, {
  56 + lineName: '测试线路1',
  57 + lineCode: '线路编码1',
  58 + directions: 1,
  59 + stationRouteCode: 10,
  60 + stationCode: 'FCODE',
  61 + stationName: 'F终点站',
  62 + stationMark: 'B'
  63 + }, {
  64 + lineName: '测试线路1',
  65 + lineCode: '线路编码1',
  66 + directions: 1,
  67 + stationRouteCode: 20,
  68 + stationCode: 'E1CODE',
  69 + stationName: 'E1中途站',
  70 + stationMark: 'Z'
  71 + }, {
  72 + lineName: '测试线路1',
  73 + lineCode: '线路编码1',
  74 + directions: 1,
  75 + stationRouteCode: 30,
  76 + stationCode: 'DCODE',
  77 + stationName: 'D中途站',
  78 + stationMark: 'Z'
  79 + }, {
  80 + lineName: '测试线路1',
  81 + lineCode: '线路编码1',
  82 + directions: 1,
  83 + stationRouteCode: 40,
  84 + stationCode: 'C1CODE',
  85 + stationName: 'C1中途站',
  86 + stationMark: 'Z'
  87 + }, {
  88 + lineName: '测试线路1',
  89 + lineCode: '线路编码1',
  90 + directions: 1,
  91 + stationRouteCode: 100,
  92 + stationCode: 'ACODE',
  93 + stationName: 'A起点站',
  94 + stationMark: 'E'
  95 + },
  96 +
  97 + // 测试线路2
  98 + {
  99 + lineName: '测试线路2',
  100 + lineCode: '线路编码2',
  101 + directions: 0,
  102 + stationRouteCode: 10,
  103 + stationCode: 'ACODE',
  104 + stationName: 'A起点站',
  105 + stationMark: 'B'
  106 + }, {
  107 + lineName: '测试线路2',
  108 + lineCode: '线路编码2',
  109 + directions: 0,
  110 + stationRouteCode: 20,
  111 + stationCode: 'BCODE',
  112 + stationName: 'B中途站',
  113 + stationMark: 'Z'
  114 + }, {
  115 + lineName: '测试线路2',
  116 + lineCode: '线路编码2',
  117 + directions: 0,
  118 + stationRouteCode: 100,
  119 + stationCode: 'FCODE',
  120 + stationName: 'F终点站',
  121 + stationMark: 'E'
  122 + }, {
  123 + lineName: '测试线路2',
  124 + lineCode: '线路编码2',
  125 + directions: 1,
  126 + stationRouteCode: 10,
  127 + stationCode: 'FCODE',
  128 + stationName: 'F终点站',
  129 + stationMark: 'B'
  130 + }, {
  131 + lineName: '测试线路2',
  132 + lineCode: '线路编码2',
  133 + directions: 1,
  134 + stationRouteCode: 40,
  135 + stationCode: 'C1CODE',
  136 + stationName: 'C1中途站',
  137 + stationMark: 'Z'
  138 + }, {
  139 + lineName: '测试线路2',
  140 + lineCode: '线路编码2',
  141 + directions: 1,
  142 + stationRouteCode: 100,
  143 + stationCode: 'ACODE',
  144 + stationName: 'A起点站',
  145 + stationMark: 'E'
  146 + },
  147 +
  148 + // 测试线路3
  149 + {
  150 + lineName: '测试线路3',
  151 + lineCode: '线路编码3',
  152 + directions: 0,
  153 + stationRouteCode: 10,
  154 + stationCode: 'ACODE',
  155 + stationName: 'A起点站',
  156 + stationMark: 'B'
  157 + }, {
  158 + lineName: '测试线路3',
  159 + lineCode: '线路编码3',
  160 + directions: 0,
  161 + stationRouteCode: 20,
  162 + stationCode: 'BCODE',
  163 + stationName: 'B中途站',
  164 + stationMark: 'Z'
  165 + }, {
  166 + lineName: '测试线路3',
  167 + lineCode: '线路编码3',
  168 + directions: 0,
  169 + stationRouteCode: 100,
  170 + stationCode: 'FCODE',
  171 + stationName: 'F终点站',
  172 + stationMark: 'E'
  173 + }, {
  174 + lineName: '测试线路3',
  175 + lineCode: '线路编码3',
  176 + directions: 1,
  177 + stationRouteCode: 10,
  178 + stationCode: 'FCODE',
  179 + stationName: 'F终点站',
  180 + stationMark: 'B'
  181 + }, {
  182 + lineName: '测试线路3',
  183 + lineCode: '线路编码3',
  184 + directions: 1,
  185 + stationRouteCode: 40,
  186 + stationCode: 'C1CODE',
  187 + stationName: 'C1中途站',
  188 + stationMark: 'Z'
  189 + }, {
  190 + lineName: '测试线路3',
  191 + lineCode: '线路编码3',
  192 + directions: 1,
  193 + stationRouteCode: 100,
  194 + stationCode: 'ACODE',
  195 + stationName: 'A起点站',
  196 + stationMark: 'E'
  197 + }],
  198 + lineGpsList: [
  199 + {
  200 + lineName: '测试线路1',
  201 + lineCode: '线路编码1',
  202 + stopNo: 'BCODE', // 站点编码
  203 + upDown: 0, // 上下行（0 上行 ， 1 下行 ， -1 无效）
  204 + deviceId: '559L1014', // 设备编码
  205 + instation: 1, // 0： 站外 1：站内 2：场内
  206 + nbbm: 'W2B-064' // 车辆内部编码（自编号）
  207 + },
  208 + {
  209 + lineName: '测试线路1',
  210 + lineCode: '线路编码1',
  211 + stopNo: 'BCODE', // 站点编码
  212 + upDown: 0, // 上下行（0 上行 ， 1 下行 ， -1 无效）
  213 + deviceId: '559L1013', // 设备编码
  214 + instation: 1, // 0： 站外 1：站内 2：场内
  215 + nbbm: 'W2B-065' // 车辆内部编码（自编号）
  216 + },
  217 + {
  218 + lineName: '测试线路1',
  219 + lineCode: '线路编码1',
  220 + stopNo: 'CCODE', // 站点编码
  221 + upDown: 0, // 上下行（0 上行 ， 1 下行 ， -1 无效）
  222 + deviceId: '559L1015', // 设备编码
  223 + instation: 0, // 0： 站外 1：站内 2：场内
  224 + nbbm: 'W2B-066' // 车辆内部编码（自编号）
  225 + },
  226 + {
  227 + lineName: '测试线路1',
  228 + lineCode: '线路编码1',
  229 + stopNo: 'E1CODE', // 站点编码
  230 + upDown: 1, // 上下行（0 上行 ， 1 下行 ， -1 无效）
  231 + deviceId: '559L1025', // 设备编码
  232 + instation: 1, // 0： 站外 1：站内 2：场内
  233 + nbbm: 'W2B-026' // 车辆内部编码（自编号）
  234 + },
  235 +
  236 + {
  237 + lineName: '测试线路1',
  238 + lineCode: '线路编码1',
  239 + stopNo: 'ACODE', // 站点编码
  240 + upDown: 1, // 上下行（0 上行 ， 1 下行 ， -1 无效）
  241 + deviceId: '559L1035', // 设备编码
  242 + instation: 1, // 0： 站外 1：站内 2：场内
  243 + nbbm: 'W2B-036' // 车辆内部编码（自编号）
  244 + },
  245 + {
  246 + lineName: '测试线路1',
  247 + lineCode: '线路编码1',
  248 + stopNo: 'ACODE', // 站点编码
  249 + upDown: 1, // 上下行（0 上行 ， 1 下行 ， -1 无效）
  250 + deviceId: '559L1045', // 设备编码
  251 + instation: 1, // 0： 站外 1：站内 2：场内
  252 + nbbm: 'W2B-046' // 车辆内部编码（自编号）
  253 + },
  254 + {
  255 + lineName: '测试线路1',
  256 + lineCode: '线路编码1',
  257 + stopNo: 'ACODE', // 站点编码
  258 + upDown: 1, // 上下行（0 上行 ， 1 下行 ， -1 无效）
  259 + deviceId: '559L1055', // 设备编码
  260 + instation: 1, // 0： 站外 1：站内 2：场内
  261 + nbbm: 'W2B-056' // 车辆内部编码（自编号）
  262 + }
  263 +
  264 + ]
  265 +}
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart-list.js 0 → 100644
  View file @e05967b
  1 +/**
  2 + * 自定义线路模拟图列表组件。
  3 + */
  4 +import PropTypes from '@luban-h5/plugin-common-props'
  5 +
  6 +import TestData from 'core/plugins/bsth/bsth-line-char-list_testData'
  7 +import TestData2 from 'core/plugins/bsth/bsth-line-chart_testData'
  8 +
  9 +export default {
  10 + extra: {
  11 + defaultStyle: { // 默认属性
  12 + top: 0,
  13 + left: 0,
  14 + width: 350,
  15 + height: 300
  16 + }
  17 + },
  18 + name: 'bsth-line-chart-list',
  19 + data () {
  20 + // eslint-disable-next-line
  21 + this.private_jQuery = jQuery.noConflict() // jquery引用
  22 + return {
  23 + /**
  24 + * 监控外层元素的宽度高度变化
  25 + * 1、由于编辑器缩放，自定义组件无法监控，所以需要定义一个定时器监控最外层元素的大小变化
  26 + * 2、建议所有自定义组件，最外层都定义一个div包在自定义组件最外层，不要关联任何自定义的属性，样式对应编辑器的通用样式
  27 + */
  28 + watchWidthHeightTimer: {
  29 + timer: null,
  30 + count: 0,
  31 + millisecond: 1000
  32 + },
  33 + list_width: 350, // 列表宽度
  34 + list_height: 300, // 列表高度
  35 + line_chart_outer_div_width: 0, // 线路图外层div宽度
  36 + line_chart_outer_div_height: 0, // 线路图外层div高度
  37 + internalDataSet: [], // 内部总数据
  38 + viewPortDataSet: [] // 可视区域对应的数据
  39 + }
  40 + },
  41 + props: {
  42 + editorMode: PropTypes.string({ // 编辑模式会由编辑器自动注入（值：edit, preview）
  43 + defaultValue: 'preview',
  44 + label: '模式',
  45 + visible: false
  46 + }),
  47 + // --------------- 外层css属性 --------------- //
  48 + _flag_2_: PropTypes.string({ label: '', component: null, extra: '外层css属性' }),
  49 + margin_left: PropTypes.number({ label: '图左边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
  50 + margin_right: PropTypes.number({ label: '图右边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
  51 + margin_top: PropTypes.number({ label: '图上边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
  52 + margin_bottom: PropTypes.number({ label: '图底部margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
  53 + border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
  54 + background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
  55 + // --------------- 内部线路模拟图外层css属性 --------------- //
  56 + _flag_3_: PropTypes.string({ label: '', component: null, extra: '内部线路模拟图外层css属性' }),
  57 + line_chart_margin_left: PropTypes.number({ label: '图左边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
  58 + line_chart_margin_right: PropTypes.number({ label: '图右边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
  59 + line_chart_margin_top: PropTypes.number({ label: '图上边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
  60 + line_chart_margin_bottom: PropTypes.number({ label: '图底部margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
  61 + line_chart_border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
  62 + line_chart_background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
  63 + // --------------- 内部线路模拟图内层css属性 --------------- //
  64 + _flag_4_: PropTypes.string({ label: '', component: null, extra: '内部线路模拟图内层css属性' }),
  65 + chart_left_padding: PropTypes.number({ label: '内部线路图距离左边padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
  66 + chart_right_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
  67 + chart_center_top_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 4, layout: { prefixCls: 'bsth-line' } }),
  68 + chart_station_name_max_size: PropTypes.number({ label: '站定名显示最大文字个数', defaultValue: 7, layout: { prefixCls: 'bsth-line' } }),
  69 + chart_up_line_path_s_color: PropTypes.color({ label: '上行线颜色', defaultValue: '#5E96D2', layout: { prefixCls: 'bsth-line' } }),
  70 + chart_down_line_path_s_color: PropTypes.color({ label: '下行线颜色', defaultValue: '#c92121', layout: { prefixCls: 'bsth-line' } }),
  71 + chart_up_line_circle_f_color: PropTypes.color({ label: '上行线站点圆圈填充色', defaultValue: '#5e96d2', layout: { prefixCls: 'bsth-line' } }),
  72 + chart_down_line_circle_f_color: PropTypes.color({ label: '下行线站点圆圈填充色', defaultValue: '#c92121', layout: { prefixCls: 'bsth-line' } }),
  73 + chart_station_text_font_size: PropTypes.number({ label: '站名字体大小', defaultValue: 14, layout: { prefixCls: 'bsth-line' } }),
  74 + chart_up_station_text_font_f_color: PropTypes.color({ label: '上行站名颜色', defaultValue: '#4556b6', layout: { prefixCls: 'bsth-line' } }),
  75 + chart_down_station_text_font_f_color: PropTypes.color({ label: '下行站名颜色', defaultValue: '#c94f21', layout: { prefixCls: 'bsth-line' } }),
  76 + chart_up_down_station_text_font_f_color: PropTypes.color({ label: '上行下行同名站名颜色', defaultValue: '#3e3e3e', layout: { prefixCls: 'bsth-line' } }),
  77 + chart_gps_up_rect_color: PropTypes.color({ label: '上行gps车辆rect背景色', defaultValue: '#3e50b3', layout: { prefixCls: 'bsth-line' } }),
  78 + chart_gps_up_text_f_color: PropTypes.color({ label: '上行gps车辆文本颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
  79 + chart_gps_down_rect_color: PropTypes.color({ label: '下行gps车辆rect背景色', defaultValue: '#c94f21', layout: { prefixCls: 'bsth-line' } }),
  80 + chart_gps_down_text_f_color: PropTypes.color({ label: '下行gps车辆文本颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
  81 + chart_gps_up_merge_rect_color: PropTypes.color({ label: '上行合并gps车辆rect背景色', defaultValue: '#19a53a', layout: { prefixCls: 'bsth-line' } }),
  82 + chart_gps_up_merge_text_f_color: PropTypes.color({ label: '上行合并gps车辆文本颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
  83 + chart_gps_down_merge_rect_color: PropTypes.color({ label: '下行合并gps车辆rect背景色', defaultValue: '#19a53a', layout: { prefixCls: 'bsth-line' } }),
  84 + chart_gps_down_merge_text_f_color: PropTypes.color({ label: '下行合并gps车辆文本颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } })
  85 + },
  86 + render () {
  87 + const lineRouteData = TestData.route_test_data
  88 + const lineGpsData = TestData.gps_test_data
  89 +
  90 + const innerDivStyle = {
  91 + 'width': this.list_width + 'px',
  92 + 'height': this.list_height + 'px',
  93 + 'border': this.border_size + 'px solid black',
  94 + 'margin-left': this.margin_left + 'px',
  95 + 'margin-right': this.margin_right + 'px',
  96 + 'margin-top': this.margin_top + 'px',
  97 + 'margin-bottom': this.margin_bottom + 'px',
  98 + 'background': this.background_color,
  99 + 'position': 'relative'
  100 + }
  101 +
  102 + /* 最外层div对应编辑器的通用样式 */
  103 + return (
  104 + <div>
  105 + <div style={innerDivStyle}>
  106 + <bsth-line-chart
  107 + editorMode={this.editorMode}
  108 + useMode='child'
  109 + line_chart_outer_div_width={this.line_chart_outer_div_width}
  110 + line_chart_outer_div_height={this.line_chart_outer_div_height}
  111 + line_route_data={lineRouteData}
  112 + line_gps_data={lineGpsData}
  113 + >
  114 + </bsth-line-chart>
  115 + </div>
  116 + </div>
  117 + )
  118 + },
  119 + mounted () {
  120 + // 使用外部元素的框架定义图的长宽
  121 + let $jQuery = this.private_jQuery
  122 + this.list_width = $jQuery(this.$el).width() - this.margin_left - this.margin_right - this.border_size * 2
  123 + this.list_height = $jQuery(this.$el).height() - this.margin_top - this.margin_bottom - this.border_size * 2
  124 + // 开启外部元素长宽监控计数
  125 + this.watchWidthHeightTimer.count++
  126 + // 线路图外层div长宽就是列表长宽，因为线路图作为子组件无法编辑通用样式，最外穿div的margin,border一律为0
  127 + this.line_chart_outer_div_width = this.list_width
  128 + this.line_chart_outer_div_height = this.list_height
  129 + },
  130 + destroyed () {
  131 + // 组件删除的时候，删除监控定时器
  132 + let timer = this.watchWidthHeightTimer.timer
  133 + if (timer) {
  134 + clearTimeout(timer)
  135 + this.watchWidthHeightTimer.timer = null
  136 + }
  137 + },
  138 + watch: {
  139 + /**
  140 + * 开启外部元素长宽监控逻辑
  141 + * 1、必须在编辑模式下启效果，否则无效
  142 + */
  143 + 'watchWidthHeightTimer.count' () { // 定时器监控
  144 + let timer = this.watchWidthHeightTimer.timer
  145 + if (timer) {
  146 + clearTimeout(timer)
  147 + this.watchWidthHeightTimer.timer = null
  148 + }
  149 +
  150 + let self = this
  151 + let $jQuery = this.private_jQuery
  152 + if (self.editorMode === 'edit') {
  153 + self.watchWidthHeightTimer.timer = setTimeout(function () {
  154 + // 处理逻辑
  155 + let width = $jQuery(self.$el).width()
  156 + let height = $jQuery(self.$el).height()
  157 +
  158 + if (width !== self.list_width) {
  159 + self.list_width = width - self.margin_left - self.margin_right - self.border_size * 2
  160 + self.line_chart_outer_div_width = self.list_width
  161 + }
  162 + if (height !== self.list_height) {
  163 + self.list_height = height - self.margin_top - self.margin_bottom - self.border_size * 2
  164 + self.line_chart_outer_div_height = self.list_height
  165 + }
  166 +
  167 + self.watchWidthHeightTimer.count++
  168 + }, self.watchWidthHeightTimer.millisecond)
  169 + }
  170 + }
  171 + }
  172 + // methods () {}
  173 +}
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart.js
  View file @e05967b
@@ -52,14 +52,26 @@ export default { @@ -52,14 +52,26 @@ export default {
52 visible: false 52 visible: false
53 }), 53 }),
54 editorMode: PropTypes.string({ // 编辑模式会由编辑器自动注入（值：edit, preview） 54 editorMode: PropTypes.string({ // 编辑模式会由编辑器自动注入（值：edit, preview）
55 - defaultValue: 'preview', 55 + defaultValue: 'edit',
56 label: '模式', 56 label: '模式',
57 visible: false 57 visible: false
58 }), 58 }),
  59 + line_chart_outer_div_width: PropTypes.number({
  60 + defaultValue: 350,
  61 + label: 'line-chart-outer-div样式的div宽度',
  62 + visible: false
  63 + }),
  64 + line_chart_outer_div_height: PropTypes.number({
  65 + defaultValue: 300,
  66 + label: 'line-chart-outer-div样式的div高度',
  67 + visible: false
  68 + }),
59 // 数据属性 69 // 数据属性
  70 + _flag_1_: PropTypes.string({ label: '', component: null, extra: '数据属性' }),
60 line_name: PropTypes.string({ label: '线路名称', defaultValue: '线路1', layout: { prefixCls: 'bsth-line' } }), 71 line_name: PropTypes.string({ label: '线路名称', defaultValue: '线路1', layout: { prefixCls: 'bsth-line' } }),
61 line_code: PropTypes.string({ label: '线路代码', defaultValue: 'ACODE', layout: { prefixCls: 'bsth-line' } }), 72 line_code: PropTypes.string({ label: '线路代码', defaultValue: 'ACODE', layout: { prefixCls: 'bsth-line' } }),
62 // 图外层css 73 // 图外层css
  74 + _flag_2_: PropTypes.string({ label: '', component: null, extra: '图外层css属性' }),
63 line_name_font_size: PropTypes.number({ label: '线路名称字体大小', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }), 75 line_name_font_size: PropTypes.number({ label: '线路名称字体大小', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
64 line_name_font_color: PropTypes.color({ label: '线路名称字体颜色', defaultValue: '#babdbd', layout: { prefixCls: 'bsth-line' } }), 76 line_name_font_color: PropTypes.color({ label: '线路名称字体颜色', defaultValue: '#babdbd', layout: { prefixCls: 'bsth-line' } }),
65 margin_left: PropTypes.number({ label: '图左边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }), 77 margin_left: PropTypes.number({ label: '图左边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
@@ -68,7 +80,8 @@ export default { @@ -68,7 +80,8 @@ export default {
68 margin_bottom: PropTypes.number({ label: '图底部margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }), 80 margin_bottom: PropTypes.number({ label: '图底部margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
69 border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }), 81 border_size: PropTypes.number({ label: '图边框宽度', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
70 background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }), 82 background_color: PropTypes.color({ label: '背景颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }),
71 - // 图内存css 83 + // 图内层css
  84 + _flag_3_: PropTypes.string({ label: '', component: null, extra: '图内层css属性' }),
72 chart_left_padding: PropTypes.number({ label: '内部线路图距离左边padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }), 85 chart_left_padding: PropTypes.number({ label: '内部线路图距离左边padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
73 chart_right_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }), 86 chart_right_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
74 chart_center_top_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 4, layout: { prefixCls: 'bsth-line' } }), 87 chart_center_top_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 4, layout: { prefixCls: 'bsth-line' } }),
@@ -92,7 +105,7 @@ export default { @@ -92,7 +105,7 @@ export default {
92 }, 105 },
93 106
94 render () { 107 render () {
95 - const outerDivStyle = { 108 + const innerDivStyle = {
96 'width': this.line_width + 'px', 109 'width': this.line_width + 'px',
97 'height': this.line_height + 'px', 110 'height': this.line_height + 'px',
98 'border': this.border_size + 'px solid black', 111 'border': this.border_size + 'px solid black',
@@ -119,8 +132,8 @@ export default { @@ -119,8 +132,8 @@ export default {
119 132
120 /* 最外层div对应编辑器的通用样式 */ 133 /* 最外层div对应编辑器的通用样式 */
121 return ( 134 return (
122 - <div>  
123 - <div style={outerDivStyle}> 135 + <div class="line-chart-outer-div">
  136 + <div style={innerDivStyle}>
124 <div style={lineNameStyle}>{this.line_name}</div> 137 <div style={lineNameStyle}>{this.line_name}</div>
125 <svg class="line-chart" 138 <svg class="line-chart"
126 data-code={this.line_code} 139 data-code={this.line_code}
@@ -147,17 +160,15 @@ export default { @@ -147,17 +160,15 @@ export default {
147 this.line_route_data = TestData.route_test_data 160 this.line_route_data = TestData.route_test_data
148 this.line_gps_data = TestData.gps_test_data 161 this.line_gps_data = TestData.gps_test_data
149 162
150 - // 如果在编辑模式下，启动外部元素长宽的监控  
151 - 163 + // 开启外部元素长宽监控计数
152 /** 164 /**
153 - * 开启外部元素长宽监控逻辑  
154 - * 1、useMode必须是alone，单独使用，宽高自动匹配外部元素  
155 - * 2、必须在编辑模式下启效果，否则无效 165 + * 开启外部元素长宽监控逻辑（class='line-chart-outer-div'）
  166 + * 1、使用模式是alone，并且是编辑模式edit
  167 + * 2、preview预览模式下有条件监控
156 */ 168 */
157 if (this.useMode === 'alone' && this.editorMode === 'edit') { 169 if (this.useMode === 'alone' && this.editorMode === 'edit') {
158 this.watchWidthHeightTimer.count++ 170 this.watchWidthHeightTimer.count++
159 } 171 }
160 -  
161 // 刷新svg 172 // 刷新svg
162 this.refreshLineSvg() 173 this.refreshLineSvg()
163 this.refreshGpsSvg() 174 this.refreshGpsSvg()
@@ -194,6 +205,22 @@ export default { @@ -194,6 +205,22 @@ export default {
194 self.watchWidthHeightTimer.count++ 205 self.watchWidthHeightTimer.count++
195 }, self.watchWidthHeightTimer.millisecond) 206 }, self.watchWidthHeightTimer.millisecond)
196 }, 207 },
  208 + /**
  209 + * 当组件作为自组件使用时（useMode=child），line-chart-outer-div样式的div尺寸无法通过编辑器改变（通用样式）
  210 + * 必须由父组件设定，自组件需要监控改变
  211 + */
  212 + line_chart_outer_div_width: function (val) {
  213 + let self = this
  214 + if (this.useMode === 'child') {
  215 + self.line_width = val - self.margin_left - self.margin_right
  216 + }
  217 + },
  218 + line_chart_outer_div_height: function (val) {
  219 + let self = this
  220 + if (this.useMode === 'child') {
  221 + self.line_height = val - self.margin_top - self.margin_bottom
  222 + }
  223 + },
197 // ----------- 数据属性 ----------- // 224 // ----------- 数据属性 ----------- //
198 line_route_data: function (currentVal, oldVal) { 225 line_route_data: function (currentVal, oldVal) {
199 let self = this 226 let self = this
front-end/h5/src/components/core/plugins/index.js
  View file @e05967b
@@ -20,6 +20,7 @@ import LbpNewsList from &#39;core/plugins/lbp-news-list&#39; @@ -20,6 +20,7 @@ import LbpNewsList from &#39;core/plugins/lbp-news-list&#39;
20 // import LbpTabs from 'core/components/plugins/lbp-tabs' 20 // import LbpTabs from 'core/components/plugins/lbp-tabs'
21 21
22 import BsthLineChart from 'core/plugins/bsth/bsth-line-chart' 22 import BsthLineChart from 'core/plugins/bsth/bsth-line-chart'
  23 +import BsthLineChartList from 'core/plugins/bsth/bsth-line-chart-list'
23 24
24 export const pluginsList = [ 25 export const pluginsList = [
25 { 26 {
@@ -317,6 +318,18 @@ export const pluginsList = [ @@ -317,6 +318,18 @@ export const pluginsList = [
317 component: BsthLineChart, 318 component: BsthLineChart,
318 visible: true, 319 visible: true,
319 name: BsthLineChart.name 320 name: BsthLineChart.name
  321 + },
  322 +
  323 + {
  324 + i18nTitle: {
  325 + 'en-US': 'LineChartList',
  326 + 'zh-CN': '线路模拟图列表'
  327 + },
  328 + title: '线路模拟图列表',
  329 + icon: 'list',
  330 + component: BsthLineChartList,
  331 + visible: true,
  332 + name: BsthLineChartList.name
320 } 333 }
321 ] 334 ]
322 335