电子站牌项目

1、修改bsth-line-chart-scrollList组件，添加如下新的属性（bsth-line-chart-scrollList-page类似） 2、新属性1：线路路由数据url 3、新属性2：线路gps数据url 4、新属性3：站牌设备Id 5、新属性4：滚动速度（像素/秒） 6、修改滚动时间间隔，gps数据刷新间隔为秒

电子站牌项目
1、修改bsth-line-chart-scrollList组件，添加如下新的属性（bsth-line-chart-scrollList-page类似） 2、新属性1：线路路由数据url 3、新属性2：线路gps数据url 4、新属性3：站牌设备Id 5、新属性4：滚动速度（像素/秒） 6、修改滚动时间间隔，gps数据刷新间隔为秒
徐烜
1 parent 520ec72f
Showing 3 changed files with 43 additions and 16 deletions
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart-scrollList-page.js
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart-scrollList.js
front-end/h5/src/components/core/plugins/bsth/models/scrollListInnerData.js
@@ -19,10 +19,26 @@ export default {
     list_width: { type: Number, required: true },
     // 列表高度
     list_height: { type: Number, required: true },
-    // 滚动时间间隔（毫秒）
-    scroll_milliseconds: { type: Number, required: true },
-    // gps数据刷新间隔（分钟）
-    gps_data_refresh_minute: { type: Number, required: true }
+    // 滚动时间间隔（秒）
+    scroll_seconds: { type: Number, required: true },
+    // 滚动速度（像素/秒）
+    scroll_speed: { type: Number, required: true },
+    // gps数据刷新间隔（秒）
+    gps_data_refresh_seconds: { type: Number, required: true },
+    // 线路路由数据url
+    route_data_of_api_url: { type: String, required: true },
+    // 线路gps数据url
+    gps_data_of_api_url: { type: String, required: true },
+    // 站牌设备Id
+    device_id: { type: String, required: true }
+  },
+  computed: {
+    routeDataOfApiUrl () {
+      return this.route_data_of_api_url + '?deviceId=' + this.device_id
+    },
+    gpsDataOfApiUrl () {
+      return this.gps_data_of_api_url + '?deviceId=' + this.device_id
+    }
   },
   data () {
     return {
@@ -41,9 +57,7 @@ export default {
       gpsTimer: { // gps刷新间隔timer
         timer: null,
         count: 0
-      },
-      routeDataOfApiUrl: 'http://192.168.168.228:8910/General_Interface/getLineRouteVO?deviceId=66MH0001',
-      gpsDataOfApiUrl: 'http://192.168.168.228:8910/General_Interface/getLineGpsVO?deviceId=66MH0001'
+      }
     }
   },
   mounted () {
@@ -109,7 +123,7 @@ export default {
       this.scrollTimer.timer = setTimeout(function () {
         self.startScroll()
         // self.scrollTimer.count++ // 滚动完成再触发，this.scrollListInnerData.scrollUp触发
-      }, this.scroll_milliseconds)
+      }, this.scroll_seconds * 1000)
     },
     'gpsTimer.count' () {
       let timer = this.gpsTimer.timer
@@ -122,7 +136,7 @@ export default {
       this.gpsTimer.timer = setTimeout(function () {
         self.refreshGpsDataOfApi()
         // self.gpsTimer.count++ // refreshGpsDataOfApi触发
-      }, this.gps_data_refresh_minute * 60 * 1000)
+      }, this.gps_data_refresh_seconds * 1000)
     },
     // -------------------- 监控父组件传递的属性 --------------- //
     page_size (val) {
@@ -172,6 +186,7 @@ export default {
           this.scrollListInnerData.refreshGps(lineGpsDataOfApiArray)
         }).catch((err2) => {
           console.log(err2)
+          this.$message.error(` 获取gps数据失败，状态：${err2.status}，错误：${err2.statusText}`, 1)
         })
         // 发送bindData事件，父组件绑定该事件
         this.$emit('bindData', this.innerDataSet)
@@ -181,7 +196,8 @@ export default {
         this.gpsTimer.count++
       }).catch((err) => {
         console.log(err)
-        this.initLoadingText = `初始化线路路由失败，等待${this.gps_data_refresh_minute}分钟后重新获取，请稍后...`
+        this.$message.error(` 获取路由数据失败，状态：${err.status}，错误：${err.statusText}`, 1)
+        this.initLoadingText = `初始化线路路由失败，等待${this.gps_data_refresh_seconds}秒后重新获取，请稍后...`
         this.gpsTimer.count++
       })
     },
@@ -197,6 +213,7 @@ export default {
           this.scrollListInnerData.refreshGps(lineGpsDataOfApiArray)
         }).catch((err2) => {
           console.log(err2)
+          this.$message.error(` 获取gps数据失败，状态：${err2.status}，错误：${err2.statusText}`, 1)
         })
         this.gpsTimer.count++
       }
@@ -49,8 +49,12 @@ export default {
     _flag_1_: PropTypes.string({ label: '', component: null, extra (h) { return (<hr data-label='数据属性' class='bsth-line-item-divider'/>) } }),
     page_size: PropTypes.number({ label: '每页显示线路图数量', defaultValue: 5, layout: { prefixCls: 'bsth-line' } }),
     scroll_mode: PropTypes.select({ label: '滚动模式', defaultValue: 'up', options: [{ label: '向上滚动', value: 'up' }, { label: '向下滚动', value: 'down' }], layout: { prefixCls: 'bsth-line' } }),
-    scroll_milliseconds: PropTypes.number({ label: '滚动时间间隔（毫秒）', defaultValue: 2000, layout: { prefixCls: 'bsth-line' } }),
-    gps_data_refresh_minute: PropTypes.number({ label: 'gps数据刷新间隔（分钟）', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
+    scroll_seconds: PropTypes.number({ label: '滚动时间间隔（秒）', defaultValue: 2000, layout: { prefixCls: 'bsth-line' } }),
+    scroll_speed: PropTypes.number({ label: '滚动速度（像素/秒）', defaultValue: 10, layout: { prefixCls: 'bsth-line' } }),
+    gps_data_refresh_seconds: PropTypes.number({ label: 'gps数据刷新间隔（秒）', defaultValue: 1, layout: { prefixCls: 'bsth-line' } }),
+    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' } }),
+    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' } }),
+    device_id: PropTypes.string({ label: '站牌设备Id', defaultValue: '66MH0001', layout: { prefixCls: 'bsth-line' } }),
     // --------------- 外层css属性 --------------- //
     _flag_2_: PropTypes.string({ label: '', component: null, extra (h) { return (<hr data-label='外层css属性' class='bsth-line-item-divider'/>) } }),
     margin_left: PropTypes.number({ label: '图左边margin', defaultValue: 0, layout: { prefixCls: 'bsth-line' } }),
@@ -72,7 +76,7 @@ export default {
     // --------------- 内部线路模拟图内层css属性 --------------- //
     _flag_4_: PropTypes.string({ label: '', component: null, extra (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_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' } }),
     chart_station_name_max_size: PropTypes.number({ label: '站定名显示最大文字个数', defaultValue: 7, layout: { prefixCls: 'bsth-line' } }),
     chart_up_line_path_s_color: PropTypes.color({ label: '上行线颜色', defaultValue: '#5E96D2', layout: { prefixCls: 'bsth-line' } }),
@@ -230,8 +234,12 @@ export default {
           page_size={this.page_size}
           list_width={this.list_width}
           list_height={this.list_height}
-          scroll_milliseconds={this.scroll_milliseconds}
-          gps_data_refresh_minute={this.gps_data_refresh_minute}
+          scroll_seconds={this.scroll_seconds}
+          scroll_speed={this.scroll_speed}
+          gps_data_refresh_seconds={this.gps_data_refresh_seconds}
+          route_data_of_api_url={this.route_data_of_api_url}
+          gps_data_of_api_url={this.gps_data_of_api_url}
+          device_id={this.device_id}
           onBindData={this.onBindData}
           onScrollTop={this.onScrollTop}>
           <div style={innerDivStyle}>
@@ -63,7 +63,9 @@ class ScrollListInnerData {
     let topFrom = this._scrollDataItemList[this._currentScrollIndex].top
     let topTo = this._scrollDataItemList[this._nextScrollIndex].top
-    let step = (topTo - topFrom) / 200
+    let speed = scrollListComponent.scroll_speed // 每秒移动像素数
+    let step = -(speed / 1000) // 每毫秒移动像素数
+    // let step = (topTo - topFrom) / 20 // 每毫秒移动距离差的5分之一
     let self = this
     self._scrollAnimateTimer.timer = setInterval(function () {
       self._scrollAnimateTimer.count++