徐烜 / bsth-ebus-h5_editor · Commits

Commit e20cc90385d2cbf99f02cbf7fd32b7ed32b67900

Authored by 徐烜
1 parent 80062bc4

临港公交电子站牌项目 

1、修改lggj/chart/eBusStop-line-chart组件，添加报站功能（调用android移动端的方法，其他平台打印console.log）
Inline Side-by-side
Showing 4 changed files with 149 additions and 21 deletions
front-end/h5/src/components/core/plugins/bsth/lggj/chart/eBusStop-line-chart.js
  View file @e20cc90
... ... @@ -41,6 +41,23 @@ export default {
41 41 millisecond: 1000
42 42 },
43 43  
  44 + // ----------- 报站使用的timer，每个到达时间对应一个 ----------- //
  45 +
  46 + announcementTimer1: {
  47 + timer: -1,
  48 + count: 0,
  49 + maxCount: 4,
  50 + millisecond: 30000,
  51 + switchOn: false
  52 + },
  53 + announcementTimer2: {
  54 + timer: -1,
  55 + count: 0,
  56 + maxCount: 4,
  57 + millisecond: 30000,
  58 + switchOn: false
  59 + },
  60 +
44 61 // 注意：css里设定了box-sizing: border-box;，所以组件本身的宽高包括了margin,padding,border
45 62 // 所以计算内部其他组件宽高需要减去margin,padding,border
46 63 component_width: 350, // 组件宽度
... ... @@ -93,6 +110,13 @@ export default {
93 110 }
94 111 // 3、计算到达时间和当前时间差值（分钟）返回
95 112 let _diffMinutes = _arriveTimeMoment.diff(_systemMoment, 'minutes')
  113 + // 3-1、报站
  114 + if (_diffMinutes <= 2) { // 小于定于2分钟开始报站，30秒一次，不能超过最大报站次数
  115 + this.announcementTimer1.switchOn = true // 开启报站
  116 + } else {
  117 + this.announcementTimer1.switchOn = false // 关闭报站
  118 + }
  119 + // 3-2、提示信息
96 120 if (_diffMinutes === 1) {
97 121 return '即将到站'
98 122 } else if (_diffMinutes === 0) {
... ... @@ -100,7 +124,6 @@ export default {
100 124 } else {
101 125 return _diffMinutes + '分钟'
102 126 }
103   - // TODO：报站功能
104 127 },
105 128 arriveTime2 () {
106 129 if (this.eBusStopData.routeStationDataList.length === 0) {
... ... @@ -124,6 +147,13 @@ export default {
124 147 }
125 148 // 3、计算到达时间和当前时间差值（分钟）返回
126 149 let _diffMinutes = _arriveTimeMoment.diff(_systemMoment, 'minutes')
  150 + // 3-1、报站
  151 + if (_diffMinutes <= 2) { // 小于定于2分钟开始报站，30秒一次，不能超过最大报站次数
  152 + this.announcementTimer2.switchOn = true // 开启报站
  153 + } else {
  154 + this.announcementTimer2.switchOn = false // 关闭报站
  155 + }
  156 + // 3-2、提示信息
127 157 if (_diffMinutes === 1) {
128 158 return '即将到站'
129 159 } else if (_diffMinutes === 0) {
... ... @@ -131,7 +161,6 @@ export default {
131 161 } else {
132 162 return _diffMinutes + '分钟'
133 163 }
134   - // TODO：报站功能
135 164 },
136 165 startTime () {
137 166 if (this.eBusStopData.routeStationDataList.length === 0) {
... ... @@ -322,8 +351,8 @@ export default {
322 351 const lineInfoStyle2ForStartEndTime = {
323 352 'padding-right': this.line_info_s_e_time_right_padding + 'px',
324 353 'color': this.line_info_s_e_time_font_color,
325   - 'font-size': this.line_info_s_e_time_font_size + 'px',
326   - // 'font-weight': 'bold'
  354 + // 'font-weight': 'bold',
  355 + 'font-size': this.line_info_s_e_time_font_size + 'px'
327 356 }
328 357  
329 358 const arriveInfoContainerStyle = {
... ... @@ -481,8 +510,93 @@ export default {
481 510 clearTimeout(timer)
482 511 this.watchWidthHeightTimer.timer = null
483 512 }
  513 + timer = this.announcementTimer1.timer
  514 + if (timer) {
  515 + clearTimeout(timer)
  516 + this.announcementTimer1.timer = null
  517 + }
  518 + timer = this.announcementTimer2.timer
  519 + if (timer) {
  520 + clearTimeout(timer)
  521 + this.announcementTimer2.timer = null
  522 + }
484 523 },
485 524 watch: {
  525 + 'announcementTimer1.switchOn' (flag) {
  526 + if (flag) {
  527 + console.log("线路[%s]到达时间1[%s]开始报站", this.eBusStopData.lineName, this.eBusStopData.arriveTime1)
  528 + if (this.announcementTimer1.count > 0) {
  529 + this.announcementTimer1.count = 0
  530 + } else {
  531 + this.announcementTimer1.count++
  532 + }
  533 + } else {
  534 + console.log("线路[%s]到达时间1[%s]关闭报站", this.eBusStopData.lineName, this.eBusStopData.arriveTime1)
  535 + this.announcementTimer1.count = 0
  536 + }
  537 + },
  538 + 'announcementTimer1.count' (count) {
  539 + if (!this.announcementTimer1.switchOn) {
  540 + return
  541 + }
  542 + let timer = this.announcementTimer1.timer
  543 + if (timer) {
  544 + clearTimeout(timer)
  545 + this.announcementTimer1.timer = -1
  546 + }
  547 + this.announcementTimer1.timer = setTimeout(() => {
  548 + try {
  549 + // eslint-disable-next-line
  550 + android.soundPlay(this.eBusStopData.announcementText)
  551 + } catch (err) {
  552 +
  553 + }
  554 + console.log('线路[%s]到达时间1[%s]调用android报站功能第[%d]次，共[%d]次，每次间隔[%d]秒',
  555 + this.eBusStopData.lineName, this.eBusStopData.arriveTime1,
  556 + count, this.announcementTimer1.maxCount, this.announcementTimer1.millisecond / 1000)
  557 + if (count < this.announcementTimer1.maxCount) {
  558 + this.announcementTimer1.count++
  559 + }
  560 + }, this.announcementTimer1.millisecond)
  561 + },
  562 + 'announcementTimer2.switchOn' (flag) {
  563 + if (flag) {
  564 + console.log("线路[%s]到达时间2[%s]开始报站", this.eBusStopData.lineName, this.eBusStopData.arriveTime2)
  565 + if (this.announcementTimer2.count > 0) {
  566 + this.announcementTimer2.count = 0
  567 + } else {
  568 + this.announcementTimer2.count++
  569 + }
  570 + } else {
  571 + console.log("线路[%s]到达时间2[%s]关闭报站", this.eBusStopData.lineName, this.eBusStopData.arriveTime2)
  572 + this.announcementTimer2.count = 0
  573 + }
  574 + },
  575 + 'announcementTimer2.count' (count) {
  576 + if (!this.announcementTimer2.switchOn) {
  577 + return
  578 + }
  579 + let timer = this.announcementTimer2.timer
  580 + if (timer) {
  581 + clearTimeout(timer)
  582 + this.announcementTimer2.timer = -1
  583 + }
  584 + this.announcementTimer2.timer = setTimeout(() => {
  585 + try {
  586 + // eslint-disable-next-line
  587 + android.soundPlay(this.eBusStopData.announcementText)
  588 + } catch (err) {
  589 +
  590 + }
  591 + console.log('线路[%s]到达时间2[%s]调用android报站功能第[%d]次，共[%d]次，每次间隔[%d]秒',
  592 + this.eBusStopData.lineName, this.eBusStopData.arriveTime2,
  593 + count, this.announcementTimer2.maxCount, this.announcementTimer2.millisecond / 1000)
  594 + if (count < this.announcementTimer2.maxCount) {
  595 + this.announcementTimer2.count++
  596 + }
  597 + }, this.announcementTimer2.millisecond)
  598 + },
  599 +
486 600 'watchWidthHeightTimer.count' () { // 定时器监控
487 601 let timer = this.watchWidthHeightTimer.timer
488 602 if (timer) {
... ... @@ -587,6 +701,7 @@ export default {
587 701 this.line_height = this.component_height - this.text_info_height - this.border_size * 2
588 702  
589 703 },
  704 +
590 705 // ----------- 图内层css 监控 ----------- //
591 706 // ----------- _flag_4_属性
592 707 up_rect_left_padding: function () {
... ... @@ -757,6 +872,7 @@ export default {
757 872 this.up_rect_width = width - self.up_rect_left_padding - self.up_rect_right_padding
758 873  
759 874 },
  875 +
760 876 refreshDownLineSvg () {
761 877 let self = this
762 878  
... ... @@ -784,13 +900,13 @@ export default {
784 900 refreshLineSvg () {
785 901 let self = this
786 902  
787   - let $jQuery = self.private_jQuery
  903 + // let $jQuery = self.private_jQuery
788 904 let d3 = self.private_d3
789 905  
790 906 let routeData = self.eBusStopData.routeStationDataList
791 907 let width = self.line_width // 内部整个svg的宽度
792   - let height = self.line_height // 内部整个svg的高度
793   - let svgNameSpace = self.private_svgns
  908 + // let height = self.line_height // 内部整个svg的高度
  909 + // let svgNameSpace = self.private_svgns
794 910 let svg = self.private_svg
795 911 let chartLeftPadding = self.chart_left_padding
796 912 let chartRightPadding = self.chart_right_padding
... ...
front-end/h5/src/components/core/plugins/bsth/lggj/chart/models/eBusStopData.js
  View file @e20cc90
... ... @@ -52,9 +52,10 @@ class EBusStopData {
52 52 * @param systemDateTime 系统日期时间字符串（格式：yyyy-MM-dd HH:mm）
53 53 * @param startTime 首班车时间字符串（格式: HH:mm）
54 54 * @param endTime 末班车时间字符串（格式：HH:mm）
  55 + * @param announcementText 报站信息
55 56 */
56 57 constructor (lineName, lineCode, routeData, arriveTimes = [], systemDateTime = '2022-01-01 10:10',
57   - startTime = '00:00', endTime = '23:59') {
  58 + startTime = '00:00', endTime = '23:59', announcementText = '车辆即将进站，请注意安全。') {
58 59 this._lineName = lineName
59 60 this._lineCode = lineCode
60 61 this._routeData = routeData
... ... @@ -62,6 +63,15 @@ class EBusStopData {
62 63 this._systemDateTime = systemDateTime
63 64 this._startTime = startTime
64 65 this._endTime = endTime
  66 + this._announcementText = announcementText
  67 + }
  68 +
  69 + /**
  70 + * 获取报站信息。
  71 + * @return {string|*}
  72 + */
  73 + get announcementText () {
  74 + return this._announcementText
65 75 }
66 76  
67 77 /**
... ... @@ -189,7 +199,7 @@ class EBusStopData {
189 199 let s6 = new StationData('站点6', '6')
190 200 let stationDataList = [s1, s2, s3, s4, s5, s6]
191 201 // 2、路由信息
192   - let routeData = new RouteData(2, stationDataList)
  202 + let routeData = new RouteData(2, stationDataList)
193 203 // 3、电子站牌信息
194 204 return new EBusStopData('线路1', '1', routeData, ['10:11', '10:15'], '2022-01-01 10:10')
195 205 }
... ...
front-end/h5/src/components/core/plugins/bsth/lggj/list/models/eBusStop-line-chart-list-scrollPage-innerData.js
  View file @e20cc90
... ... @@ -324,6 +324,8 @@ class EBusStopLineChartListScrollPageInnerData {
324 324 // 2-1、测试数据
325 325 let eBusStopData1 = EBusStopData.generateTestData()
326 326 let eBusStopData2 = EBusStopData.generateTestData()
  327 + eBusStopData2._lineName = "线路2"
  328 + eBusStopData2._lineCode = "2"
327 329 let eBusStopData3 = EBusStopData.generateEmptyTestData()
328 330 let eBusStopDataList = [eBusStopData1, eBusStopData2, eBusStopData3]
329 331 eBusStopDataList.map(stopData => {
... ...
front-end/h5/src/components/core/plugins/index.js
  View file @e20cc90
1 1 import Vue from 'vue'
2 2 // import LbpButton from '@luban-h5/lbc-button'
3 3 // import LbpButton from 'core/plugins/lbp-button'
4   -// import LbpPicture from 'core/plugins/lbp-picture'
  4 +import LbpPicture from 'core/plugins/lbp-picture'
5 5 // import LbpVideo from 'core/plugins/lbp-video'
6 6 import LbpText from 'core/plugins/lbp-text'
7 7 // import LbpFormInput from 'core/plugins/lbp-form-input'
... ... @@ -134,17 +134,17 @@ export const pluginsList = [
134 134 // visible: true,
135 135 // name: LbpRate.name
136 136 // },
137   - // {
138   - // title: '图片',
139   - // i18nTitle: {
140   - // 'en-US': 'Picture',
141   - // 'zh-CN': '图片'
142   - // },
143   - // icon: 'photo',
144   - // component: LbpPicture,
145   - // visible: true,
146   - // name: LbpPicture.name
147   - // },
  137 + {
  138 + title: '图片',
  139 + i18nTitle: {
  140 + 'en-US': 'Picture',
  141 + 'zh-CN': '图片'
  142 + },
  143 + icon: 'photo',
  144 + component: LbpPicture,
  145 + visible: true,
  146 + name: LbpPicture.name
  147 + },
148 148 {
149 149 i18nTitle: {
150 150 'en-US': 'Text',
... ...