临港公交电子站牌项目

1、修改lggj/chart/eBusStop-line-chart组件，添加报站功能（调用android移动端的方法，其他平台打印console.log）

临港公交电子站牌项目
1、修改lggj/chart/eBusStop-line-chart组件，添加报站功能（调用android移动端的方法，其他平台打印console.log）
徐烜
1 parent 80062bc4
Showing 4 changed files with 149 additions and 21 deletions
front-end/h5/src/components/core/plugins/bsth/lggj/chart/eBusStop-line-chart.js
front-end/h5/src/components/core/plugins/bsth/lggj/chart/models/eBusStopData.js
front-end/h5/src/components/core/plugins/bsth/lggj/list/models/eBusStop-line-chart-list-scrollPage-innerData.js
front-end/h5/src/components/core/plugins/index.js
@@ -41,6 +41,23 @@ export default {
         millisecond: 1000
       },
+      // ----------- 报站使用的timer，每个到达时间对应一个 ----------- //
+
+      announcementTimer1: {
+        timer: -1,
+        count: 0,
+        maxCount: 4,
+        millisecond: 30000,
+        switchOn: false
+      },
+      announcementTimer2: {
+        timer: -1,
+        count: 0,
+        maxCount: 4,
+        millisecond: 30000,
+        switchOn: false
+      },
+
       // 注意：css里设定了box-sizing: border-box;，所以组件本身的宽高包括了margin,padding,border
       //      所以计算内部其他组件宽高需要减去margin,padding,border
       component_width: 350, // 组件宽度
@@ -93,6 +110,13 @@ export default {
       }
       // 3、计算到达时间和当前时间差值（分钟）返回
       let _diffMinutes = _arriveTimeMoment.diff(_systemMoment, 'minutes')
+      // 3-1、报站
+      if (_diffMinutes <= 2) { // 小于定于2分钟开始报站，30秒一次，不能超过最大报站次数
+        this.announcementTimer1.switchOn = true // 开启报站
+      } else {
+        this.announcementTimer1.switchOn = false // 关闭报站
+      }
+      // 3-2、提示信息
       if (_diffMinutes === 1) {
         return '即将到站'
       } else if (_diffMinutes === 0) {
@@ -100,7 +124,6 @@ export default {
       } else {
         return _diffMinutes + '分钟'
       }
-      // TODO：报站功能
     },
     arriveTime2 () {
       if (this.eBusStopData.routeStationDataList.length === 0) {
@@ -124,6 +147,13 @@ export default {
       }
       // 3、计算到达时间和当前时间差值（分钟）返回
       let _diffMinutes = _arriveTimeMoment.diff(_systemMoment, 'minutes')
+      // 3-1、报站
+      if (_diffMinutes <= 2) { // 小于定于2分钟开始报站，30秒一次，不能超过最大报站次数
+        this.announcementTimer2.switchOn = true // 开启报站
+      } else {
+        this.announcementTimer2.switchOn = false // 关闭报站
+      }
+      // 3-2、提示信息
       if (_diffMinutes === 1) {
         return '即将到站'
       } else if (_diffMinutes === 0) {
@@ -131,7 +161,6 @@ export default {
       } else {
         return _diffMinutes + '分钟'
       }
-      // TODO：报站功能
     },
     startTime () {
       if (this.eBusStopData.routeStationDataList.length === 0) {
@@ -322,8 +351,8 @@ export default {
     const lineInfoStyle2ForStartEndTime = {
       'padding-right': this.line_info_s_e_time_right_padding + 'px',
       'color': this.line_info_s_e_time_font_color,
-      'font-size': this.line_info_s_e_time_font_size + 'px',
-      // 'font-weight': 'bold'
+      // 'font-weight': 'bold',
+      'font-size': this.line_info_s_e_time_font_size + 'px'
     }
     const arriveInfoContainerStyle = {
@@ -481,8 +510,93 @@ export default {
       clearTimeout(timer)
       this.watchWidthHeightTimer.timer = null
     }
+    timer = this.announcementTimer1.timer
+    if (timer) {
+      clearTimeout(timer)
+      this.announcementTimer1.timer = null
+    }
+    timer = this.announcementTimer2.timer
+    if (timer) {
+      clearTimeout(timer)
+      this.announcementTimer2.timer = null
+    }
   },
   watch: {
+    'announcementTimer1.switchOn' (flag) {
+      if (flag) {
+        console.log("线路[%s]到达时间1[%s]开始报站", this.eBusStopData.lineName, this.eBusStopData.arriveTime1)
+        if (this.announcementTimer1.count > 0) {
+          this.announcementTimer1.count = 0
+        } else {
+          this.announcementTimer1.count++
+        }
+      } else {
+        console.log("线路[%s]到达时间1[%s]关闭报站", this.eBusStopData.lineName, this.eBusStopData.arriveTime1)
+        this.announcementTimer1.count = 0
+      }
+    },
+    'announcementTimer1.count' (count) {
+      if (!this.announcementTimer1.switchOn) {
+        return
+      }
+      let timer = this.announcementTimer1.timer
+      if (timer) {
+        clearTimeout(timer)
+        this.announcementTimer1.timer = -1
+      }
+      this.announcementTimer1.timer = setTimeout(() => {
+        try {
+          // eslint-disable-next-line
+          android.soundPlay(this.eBusStopData.announcementText)
+        } catch (err) {
+
+        }
+        console.log('线路[%s]到达时间1[%s]调用android报站功能第[%d]次，共[%d]次，每次间隔[%d]秒',
+          this.eBusStopData.lineName, this.eBusStopData.arriveTime1,
+          count, this.announcementTimer1.maxCount, this.announcementTimer1.millisecond / 1000)
+        if (count < this.announcementTimer1.maxCount) {
+          this.announcementTimer1.count++
+        }
+      }, this.announcementTimer1.millisecond)
+    },
+    'announcementTimer2.switchOn' (flag) {
+      if (flag) {
+        console.log("线路[%s]到达时间2[%s]开始报站", this.eBusStopData.lineName, this.eBusStopData.arriveTime2)
+        if (this.announcementTimer2.count > 0) {
+          this.announcementTimer2.count = 0
+        } else {
+          this.announcementTimer2.count++
+        }
+      } else {
+        console.log("线路[%s]到达时间2[%s]关闭报站", this.eBusStopData.lineName, this.eBusStopData.arriveTime2)
+        this.announcementTimer2.count = 0
+      }
+    },
+    'announcementTimer2.count' (count) {
+      if (!this.announcementTimer2.switchOn) {
+        return
+      }
+      let timer = this.announcementTimer2.timer
+      if (timer) {
+        clearTimeout(timer)
+        this.announcementTimer2.timer = -1
+      }
+      this.announcementTimer2.timer = setTimeout(() => {
+        try {
+          // eslint-disable-next-line
+          android.soundPlay(this.eBusStopData.announcementText)
+        } catch (err) {
+
+        }
+        console.log('线路[%s]到达时间2[%s]调用android报站功能第[%d]次，共[%d]次，每次间隔[%d]秒',
+          this.eBusStopData.lineName, this.eBusStopData.arriveTime2,
+          count, this.announcementTimer2.maxCount, this.announcementTimer2.millisecond / 1000)
+        if (count < this.announcementTimer2.maxCount) {
+          this.announcementTimer2.count++
+        }
+      }, this.announcementTimer2.millisecond)
+    },
+
     'watchWidthHeightTimer.count' () { // 定时器监控
       let timer = this.watchWidthHeightTimer.timer
       if (timer) {
@@ -587,6 +701,7 @@ export default {
       this.line_height = this.component_height - this.text_info_height - this.border_size * 2
     },
+
     // ----------- 图内层css 监控 ----------- //
     // ----------- _flag_4_属性
     up_rect_left_padding: function () {
@@ -757,6 +872,7 @@ export default {
       this.up_rect_width = width - self.up_rect_left_padding - self.up_rect_right_padding
     },
+
     refreshDownLineSvg () {
       let self = this
@@ -784,13 +900,13 @@ export default {
     refreshLineSvg () {
       let self = this
-      let $jQuery = self.private_jQuery
+      // let $jQuery = self.private_jQuery
       let d3 = self.private_d3
       let routeData = self.eBusStopData.routeStationDataList
       let width = self.line_width // 内部整个svg的宽度
-      let height = self.line_height // 内部整个svg的高度
-      let svgNameSpace = self.private_svgns
+      // let height = self.line_height // 内部整个svg的高度
+      // let svgNameSpace = self.private_svgns
       let svg = self.private_svg
       let chartLeftPadding = self.chart_left_padding
       let chartRightPadding = self.chart_right_padding
@@ -52,9 +52,10 @@ class EBusStopData {
    * @param systemDateTime 系统日期时间字符串（格式：yyyy-MM-dd HH:mm）
    * @param startTime 首班车时间字符串（格式: HH:mm）
    * @param endTime 末班车时间字符串（格式：HH:mm）
+   * @param announcementText 报站信息
    */
   constructor (lineName, lineCode, routeData, arriveTimes = [], systemDateTime = '2022-01-01 10:10',
-               startTime = '00:00', endTime = '23:59') {
+               startTime = '00:00', endTime = '23:59', announcementText = '车辆即将进站，请注意安全。') {
     this._lineName = lineName
     this._lineCode = lineCode
     this._routeData = routeData
@@ -62,6 +63,15 @@ class EBusStopData {
     this._systemDateTime = systemDateTime
     this._startTime = startTime
     this._endTime = endTime
+    this._announcementText = announcementText
+  }
+
+  /**
+   * 获取报站信息。
+   * @return {string|*}
+   */
+  get announcementText () {
+    return this._announcementText
   }
   /**
@@ -189,7 +199,7 @@ class EBusStopData {
     let s6 = new StationData('站点6', '6')
     let stationDataList = [s1, s2, s3, s4, s5, s6]
     // 2、路由信息
-    let routeData  = new RouteData(2, stationDataList)
+    let routeData = new RouteData(2, stationDataList)
     // 3、电子站牌信息
     return new EBusStopData('线路1', '1', routeData, ['10:11', '10:15'], '2022-01-01 10:10')
   }
@@ -324,6 +324,8 @@ class EBusStopLineChartListScrollPageInnerData {
     // 2-1、测试数据
     let eBusStopData1 = EBusStopData.generateTestData()
     let eBusStopData2 = EBusStopData.generateTestData()
+    eBusStopData2._lineName = "线路2"
+    eBusStopData2._lineCode = "2"
     let eBusStopData3 = EBusStopData.generateEmptyTestData()
     let eBusStopDataList = [eBusStopData1, eBusStopData2, eBusStopData3]
     eBusStopDataList.map(stopData => {
 import Vue from 'vue'
 // import LbpButton from '@luban-h5/lbc-button'
 // import LbpButton from 'core/plugins/lbp-button'
-// import LbpPicture from 'core/plugins/lbp-picture'
+import LbpPicture from 'core/plugins/lbp-picture'
 // import LbpVideo from 'core/plugins/lbp-video'
 import LbpText from 'core/plugins/lbp-text'
 // import LbpFormInput from 'core/plugins/lbp-form-input'
@@ -134,17 +134,17 @@ export const pluginsList = [
   //   visible: true,
   //   name: LbpRate.name
   // },
-  // {
-  //   title: '图片',
-  //   i18nTitle: {
-  //     'en-US': 'Picture',
-  //     'zh-CN': '图片'
-  //   },
-  //   icon: 'photo',
-  //   component: LbpPicture,
-  //   visible: true,
-  //   name: LbpPicture.name
-  // },
+  {
+    title: '图片',
+    i18nTitle: {
+      'en-US': 'Picture',
+      'zh-CN': '图片'
+    },
+    icon: 'photo',
+    component: LbpPicture,
+    visible: true,
+    name: LbpPicture.name
+  },
   {
     i18nTitle: {
       'en-US': 'Text',