徐烜 / bsth-ebus-h5_editor · Commits

Commit b41df8b58916316badffd51b6f2a318ff7d9f7c2

Authored by 徐烜
1 parent 520ec72f

电子站牌项目 

1、修改bsth-line-chart-scrollList组件，添加如下新的属性（bsth-line-chart-scrollList-page类似）
2、新属性1：线路路由数据url
3、新属性2：线路gps数据url
4、新属性3：站牌设备Id
5、新属性4：滚动速度（像素/秒）
6、修改滚动时间间隔，gps数据刷新间隔为秒
Inline Side-by-side
Showing 3 changed files with 43 additions and 16 deletions
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart-scrollList-page.js
  View file @b41df8b
... ... @@ -19,10 +19,26 @@ export default {
19 19 list_width: { type: Number, required: true },
20 20 // 列表高度
21 21 list_height: { type: Number, required: true },
22   - // 滚动时间间隔（毫秒）
23   - scroll_milliseconds: { type: Number, required: true },
24   - // gps数据刷新间隔（分钟）
25   - gps_data_refresh_minute: { type: Number, required: true }
  22 + // 滚动时间间隔（秒）
  23 + scroll_seconds: { type: Number, required: true },
  24 + // 滚动速度（像素/秒）
  25 + scroll_speed: { type: Number, required: true },
  26 + // gps数据刷新间隔（秒）
  27 + gps_data_refresh_seconds: { type: Number, required: true },
  28 + // 线路路由数据url
  29 + route_data_of_api_url: { type: String, required: true },
  30 + // 线路gps数据url
  31 + gps_data_of_api_url: { type: String, required: true },
  32 + // 站牌设备Id
  33 + device_id: { type: String, required: true }
  34 + },
  35 + computed: {
  36 + routeDataOfApiUrl () {
  37 + return this.route_data_of_api_url + '?deviceId=' + this.device_id
  38 + },
  39 + gpsDataOfApiUrl () {
  40 + return this.gps_data_of_api_url + '?deviceId=' + this.device_id
  41 + }
26 42 },
27 43 data () {
28 44 return {
... ... @@ -41,9 +57,7 @@ export default {
41 57 gpsTimer: { // gps刷新间隔timer
42 58 timer: null,
43 59 count: 0
44   - },
45   - routeDataOfApiUrl: 'http://192.168.168.228:8910/General_Interface/getLineRouteVO?deviceId=66MH0001',
46   - gpsDataOfApiUrl: 'http://192.168.168.228:8910/General_Interface/getLineGpsVO?deviceId=66MH0001'
  60 + }
47 61 }
48 62 },
49 63 mounted () {
... ... @@ -109,7 +123,7 @@ export default {
109 123 this.scrollTimer.timer = setTimeout(function () {
110 124 self.startScroll()
111 125 // self.scrollTimer.count++ // 滚动完成再触发，this.scrollListInnerData.scrollUp触发
112   - }, this.scroll_milliseconds)
  126 + }, this.scroll_seconds * 1000)
113 127 },
114 128 'gpsTimer.count' () {
115 129 let timer = this.gpsTimer.timer
... ... @@ -122,7 +136,7 @@ export default {
122 136 this.gpsTimer.timer = setTimeout(function () {
123 137 self.refreshGpsDataOfApi()
124 138 // self.gpsTimer.count++ // refreshGpsDataOfApi触发
125   - }, this.gps_data_refresh_minute * 60 * 1000)
  139 + }, this.gps_data_refresh_seconds * 1000)
126 140 },
127 141 // -------------------- 监控父组件传递的属性 --------------- //
128 142 page_size (val) {
... ... @@ -172,6 +186,7 @@ export default {
172 186 this.scrollListInnerData.refreshGps(lineGpsDataOfApiArray)
173 187 }).catch((err2) => {
174 188 console.log(err2)
  189 + this.$message.error(` 获取gps数据失败，状态：${err2.status}，错误：${err2.statusText}`, 1)
175 190 })
176 191 // 发送bindData事件，父组件绑定该事件
177 192 this.$emit('bindData', this.innerDataSet)
... ... @@ -181,7 +196,8 @@ export default {
181 196 this.gpsTimer.count++
182 197 }).catch((err) => {
183 198 console.log(err)
184   - this.initLoadingText = `初始化线路路由失败，等待${this.gps_data_refresh_minute}分钟后重新获取，请稍后...`
  199 + this.$message.error(` 获取路由数据失败，状态：${err.status}，错误：${err.statusText}`, 1)
  200 + this.initLoadingText = `初始化线路路由失败，等待${this.gps_data_refresh_seconds}秒后重新获取，请稍后...`
185 201 this.gpsTimer.count++
186 202 })
187 203 },
... ... @@ -197,6 +213,7 @@ export default {
197 213 this.scrollListInnerData.refreshGps(lineGpsDataOfApiArray)
198 214 }).catch((err2) => {
199 215 console.log(err2)
  216 + this.$message.error(` 获取gps数据失败，状态：${err2.status}，错误：${err2.statusText}`, 1)
200 217 })
201 218 this.gpsTimer.count++
202 219 }
... ...
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart-scrollList.js
  View file @b41df8b
... ... @@ -49,8 +49,12 @@ export default {
49 49 _flag_1_: PropTypes.string({ label: '', component: null, extra (h) { return (<hr data-label='数据属性' class='bsth-line-item-divider'/>) } }),
50 50 page_size: PropTypes.number({ label: '每页显示线路图数量', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
51 51 scroll_mode: PropTypes.select({ label: '滚动模式', defaultValue: 'up', options: [{ label: '向上滚动', value: 'up' }, { label: '向下滚动', value: 'down' }], layout: { prefixCls: 'bsth-line' } }),
52   - scroll_milliseconds: PropTypes.number({ label: '滚动时间间隔（毫秒）', defaultValue: 2000, layout: { prefixCls: 'bsth-line' } }),
53   - gps_data_refresh_minute: PropTypes.number({ label: 'gps数据刷新间隔（分钟）', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
  52 + scroll_seconds: PropTypes.number({ label: '滚动时间间隔（秒）', defaultValue: 2000, layout: { prefixCls: 'bsth-line' } }),
  53 + scroll_speed: PropTypes.number({ label: '滚动速度（像素/秒）', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
  54 + gps_data_refresh_seconds: PropTypes.number({ label: 'gps数据刷新间隔（秒）', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
  55 + route_data_of_api_url: PropTypes.string({ label: '线路路由数据url', component: 'a-textarea', defaultValue: 'http://192.168.168.228:8910/General_Interface/getLineRouteVO', layout: { prefixCls: 'bsth-line' } }),
  56 + gps_data_of_api_url: PropTypes.string({ label: '线路gps数据url', component: 'a-textarea', defaultValue: 'http://192.168.168.228:8910/General_Interface/getLineGpsVO', layout: { prefixCls: 'bsth-line' } }),
  57 + device_id: PropTypes.string({ label: '站牌设备Id', defaultValue: '66MH0001', layout: { prefixCls: 'bsth-line' } }),
54 58 // --------------- 外层css属性 --------------- //
55 59 _flag_2_: PropTypes.string({ label: '', component: null, extra (h) { return (<hr data-label='外层css属性' class='bsth-line-item-divider'/>) } }),
56 60 margin_left: PropTypes.number({ label: '图左边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
... ... @@ -72,7 +76,7 @@ export default {
72 76 // --------------- 内部线路模拟图内层css属性 --------------- //
73 77 _flag_4_: PropTypes.string({ label: '', component: null, extra (h) { return (<hr data-label='内部线路模拟图内层css属性' class='bsth-line-item-divider'></hr>) } }),
74 78 chart_left_padding: PropTypes.number({ label: '内部线路图距离左边padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
75   - chart_right_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
  79 + chart_right_padding: PropTypes.number({ label: '内部线路图距离右边padding', defaultValue: 30, layout: { prefixCls: 'bsth-line' } }),
76 80 chart_center_top_padding: PropTypes.number({ label: '内部线路图居中修正padding', defaultValue: 4, layout: { prefixCls: 'bsth-line' } }),
77 81 chart_station_name_max_size: PropTypes.number({ label: '站定名显示最大文字个数', defaultValue: 7, layout: { prefixCls: 'bsth-line' } }),
78 82 chart_up_line_path_s_color: PropTypes.color({ label: '上行线颜色', defaultValue: '#5E96D2', layout: { prefixCls: 'bsth-line' } }),
... ... @@ -230,8 +234,12 @@ export default {
230 234 page_size={this.page_size}
231 235 list_width={this.list_width}
232 236 list_height={this.list_height}
233   - scroll_milliseconds={this.scroll_milliseconds}
234   - gps_data_refresh_minute={this.gps_data_refresh_minute}
  237 + scroll_seconds={this.scroll_seconds}
  238 + scroll_speed={this.scroll_speed}
  239 + gps_data_refresh_seconds={this.gps_data_refresh_seconds}
  240 + route_data_of_api_url={this.route_data_of_api_url}
  241 + gps_data_of_api_url={this.gps_data_of_api_url}
  242 + device_id={this.device_id}
235 243 onBindData={this.onBindData}
236 244 onScrollTop={this.onScrollTop}>
237 245 <div style={innerDivStyle}>
... ...
front-end/h5/src/components/core/plugins/bsth/models/scrollListInnerData.js
  View file @b41df8b
... ... @@ -63,7 +63,9 @@ class ScrollListInnerData {
63 63  
64 64 let topFrom = this._scrollDataItemList[this._currentScrollIndex].top
65 65 let topTo = this._scrollDataItemList[this._nextScrollIndex].top
66   - let step = (topTo - topFrom) / 200
  66 + let speed = scrollListComponent.scroll_speed // 每秒移动像素数
  67 + let step = -(speed / 1000) // 每毫秒移动像素数
  68 + // let step = (topTo - topFrom) / 20 // 每毫秒移动距离差的5分之一
67 69 let self = this
68 70 self._scrollAnimateTimer.timer = setInterval(function () {
69 71 self._scrollAnimateTimer.count++
... ...