Commit 520ec72fc2f9bdb1a7bdfa71c3fcbeeee08e1dab
1 parent
2076bb86
电子站牌项目
1、修改package.json,添加jsonp的依赖 2、修改bsth-line-chart-scrollList,添加在preview模式下通过jsonp获取线路路由,线路gps数据 3、修改bsth-line-chart-scrollList,将滚动定时器触发放到bsth-line-chart-scrollList-page中
Showing
10 changed files
with
266 additions
and
113 deletions
front-end/h5/package.json
| ... | ... | @@ -38,11 +38,12 @@ |
| 38 | 38 | "vant": "^2.2.12", |
| 39 | 39 | "vue": "^2.6.10", |
| 40 | 40 | "vue-i18n": "^8.14.1", |
| 41 | + "vue-jsonp": "^2.0.0", | |
| 41 | 42 | "vue-matomo": "^3.13.0-2", |
| 42 | 43 | "vue-quill-editor": "^3.0.6", |
| 43 | 44 | "vue-router": "^3.0.3", |
| 44 | - "vuex": "^3.0.1", | |
| 45 | 45 | "vue-video-player": "^5.0.2", |
| 46 | + "vuex": "^3.0.1", | |
| 46 | 47 | "x-data-spreadsheet": "^1.1.4" |
| 47 | 48 | }, |
| 48 | 49 | "devDependencies": { | ... | ... |
front-end/h5/src/components/core/editor/modals/preview.vue
| ... | ... | @@ -49,10 +49,10 @@ export default { |
| 49 | 49 | * 这个可能是个bug |
| 50 | 50 | */ |
| 51 | 51 | // ----------------- 以下 ------------------ // |
| 52 | - let _work_copy = this.work | |
| 53 | - _work_copy.title = this.$store.state.editor.work.title | |
| 54 | - _work_copy.description = this.$store.state.editor.work.description | |
| 55 | - this.$store.state.editor.work = _work_copy | |
| 52 | + let workCopy = this.work | |
| 53 | + workCopy.title = this.$store.state.editor.work.title | |
| 54 | + workCopy.description = this.$store.state.editor.work.description | |
| 55 | + this.$store.state.editor.work = workCopy | |
| 56 | 56 | // ----------------- 以上 ------------------ // |
| 57 | 57 | |
| 58 | 58 | this.confirmLoading = true | ... | ... |
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart-scrollList-page.js
| ... | ... | @@ -4,7 +4,9 @@ |
| 4 | 4 | |
| 5 | 5 | import TestData from 'core/plugins/bsth/bsth-line-chart-list_testData' |
| 6 | 6 | import LineRouteDataOfApi from 'core/plugins/bsth/models/lineRouteDataOfApi' |
| 7 | +import LineGpsDataOfApi from 'core/plugins/bsth/models/lineGpsDataOfApi' | |
| 7 | 8 | import ScrollListInnerData from 'core/plugins/bsth/models/scrollListInnerData' |
| 9 | +import { jsonp } from 'vue-jsonp' | |
| 8 | 10 | |
| 9 | 11 | export default { |
| 10 | 12 | props: { |
| ... | ... | @@ -28,37 +30,50 @@ export default { |
| 28 | 30 | |
| 29 | 31 | // --------------- 滚动翻页数据对象 --------------// |
| 30 | 32 | scrollListInnerData: null, |
| 33 | + initLoading: true, | |
| 34 | + initLoadingText: '', | |
| 31 | 35 | |
| 32 | 36 | // ---------------- 内部的定时timer --------------- // |
| 33 | 37 | scrollTimer: { // 滚动间隔timer |
| 34 | 38 | timer: null, |
| 35 | - count: 0, | |
| 36 | - millisecond: 2000 | |
| 37 | - } | |
| 39 | + count: 0 | |
| 40 | + }, | |
| 41 | + gpsTimer: { // gps刷新间隔timer | |
| 42 | + timer: null, | |
| 43 | + 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' | |
| 38 | 47 | } |
| 39 | 48 | }, |
| 40 | 49 | mounted () { |
| 41 | 50 | // 1、创建滚动翻页对象 |
| 42 | 51 | this.scrollListInnerData = new ScrollListInnerData(this.page_size, this.list_width, this.list_height) |
| 52 | + | |
| 43 | 53 | // 2、初始化数据 |
| 44 | - // TODO:先使用测试数据,后面使用后台数据 | |
| 45 | - const lineRouteDataOfApiArray = [] | |
| 46 | - for (let obj of TestData.lineRouteList) { | |
| 47 | - lineRouteDataOfApiArray.push(new LineRouteDataOfApi(obj)) | |
| 54 | + // 2.1、edit模式下,使用测试数据 | |
| 55 | + if (this.editorMode === 'edit') { | |
| 56 | + this.initLoading = true | |
| 57 | + this.initLoadingText = '初始化线路路由...' | |
| 58 | + const lineRouteDataOfApiArray = [] | |
| 59 | + for (let obj of TestData.lineRouteList) { | |
| 60 | + lineRouteDataOfApiArray.push(new LineRouteDataOfApi(obj)) | |
| 61 | + } | |
| 62 | + this.scrollListInnerData.initRouteData(lineRouteDataOfApiArray) | |
| 63 | + this.initLoadingText = '初始化线路gps...' | |
| 64 | + this.scrollListInnerData.refreshGps(TestData.lineGpsList) | |
| 65 | + this.innerDataSet = this.scrollListInnerData.scrollDataItemList | |
| 66 | + // 发送bindData事件,父组件绑定该事件 | |
| 67 | + this.$emit('bindData', this.innerDataSet) | |
| 68 | + this.initLoading = false | |
| 48 | 69 | } |
| 49 | - this.scrollListInnerData.initRouteData(lineRouteDataOfApiArray) | |
| 50 | - this.scrollListInnerData.refreshGps(TestData.lineGpsList) | |
| 51 | - this.innerDataSet = this.scrollListInnerData.scrollDataItemList | |
| 52 | - | |
| 53 | - // 3、发送refreshData事件 | |
| 54 | - this.$emit('bindData', this.innerDataSet) | |
| 55 | - | |
| 56 | - // 4、preview模式下启动滚动分页 | |
| 70 | + // 2.2、preview模式下,使用远程数据 | |
| 57 | 71 | if (this.editorMode === 'preview') { |
| 58 | - this.scrollTimer.count++ | |
| 72 | + this.initDataOfApi() | |
| 59 | 73 | } |
| 60 | 74 | }, |
| 61 | 75 | destroyed () { |
| 76 | + // 重置滚动间隔timer | |
| 62 | 77 | let scrollTimer = this.scrollTimer.timer |
| 63 | 78 | if (scrollTimer) { |
| 64 | 79 | try { |
| ... | ... | @@ -67,6 +82,16 @@ export default { |
| 67 | 82 | } |
| 68 | 83 | this.scrollTimer.timer = null |
| 69 | 84 | |
| 85 | + // 重置gps刷新间隔timer | |
| 86 | + let gpsTimer = this.gpsTimer.timer | |
| 87 | + if (gpsTimer) { | |
| 88 | + try { | |
| 89 | + clearTimeout(gpsTimer) | |
| 90 | + } catch (err) {} | |
| 91 | + } | |
| 92 | + this.gpsTimer.timer = null | |
| 93 | + | |
| 94 | + // 重置滚动翻页数据对象 | |
| 70 | 95 | if (this.scrollListInnerData) { |
| 71 | 96 | this.scrollListInnerData.resetData() |
| 72 | 97 | } |
| ... | ... | @@ -83,9 +108,22 @@ export default { |
| 83 | 108 | let self = this |
| 84 | 109 | this.scrollTimer.timer = setTimeout(function () { |
| 85 | 110 | self.startScroll() |
| 86 | - self.scrollTimer.count++ | |
| 111 | + // self.scrollTimer.count++ // 滚动完成再触发,this.scrollListInnerData.scrollUp触发 | |
| 87 | 112 | }, this.scroll_milliseconds) |
| 88 | 113 | }, |
| 114 | + 'gpsTimer.count' () { | |
| 115 | + let timer = this.gpsTimer.timer | |
| 116 | + if (timer) { | |
| 117 | + try { | |
| 118 | + clearTimeout(timer) | |
| 119 | + } catch (err) {} | |
| 120 | + } | |
| 121 | + let self = this | |
| 122 | + this.gpsTimer.timer = setTimeout(function () { | |
| 123 | + self.refreshGpsDataOfApi() | |
| 124 | + // self.gpsTimer.count++ // refreshGpsDataOfApi触发 | |
| 125 | + }, this.gps_data_refresh_minute * 60 * 1000) | |
| 126 | + }, | |
| 89 | 127 | // -------------------- 监控父组件传递的属性 --------------- // |
| 90 | 128 | page_size (val) { |
| 91 | 129 | // 只在edit模式下监控,preview模式下不监控 |
| ... | ... | @@ -103,12 +141,65 @@ export default { |
| 103 | 141 | render () { |
| 104 | 142 | // TODO:暂时是没有内容显示的,只处理内部数据,后面再根据不同的错误显示内容 |
| 105 | 143 | return ( |
| 106 | - <div></div> | |
| 144 | + <a-spin tip={this.initLoadingText} spinning={this.initLoading} size="large"> | |
| 145 | + { | |
| 146 | + this.$slots.default | |
| 147 | + } | |
| 148 | + </a-spin> | |
| 107 | 149 | ) |
| 108 | 150 | }, |
| 109 | 151 | methods: { |
| 110 | 152 | startScroll () { |
| 111 | 153 | this.scrollListInnerData.scrollUp(this) |
| 154 | + }, | |
| 155 | + initDataOfApi () { // 使用后台api初始化数据 | |
| 156 | + this.initLoading = true | |
| 157 | + this.initLoadingText = '初始化线路路由...' | |
| 158 | + jsonp(this.routeDataOfApiUrl).then((routeArray) => { | |
| 159 | + const lineRouteDataOfApiArray = [] | |
| 160 | + for (let obj of routeArray) { | |
| 161 | + lineRouteDataOfApiArray.push(new LineRouteDataOfApi(obj)) | |
| 162 | + } | |
| 163 | + this.scrollListInnerData.initRouteData(lineRouteDataOfApiArray) | |
| 164 | + this.innerDataSet = this.scrollListInnerData.scrollDataItemList | |
| 165 | + | |
| 166 | + this.initLoadingText = '初始化线路gps...' | |
| 167 | + jsonp(this.gpsDataOfApiUrl).then((gpsArray) => { | |
| 168 | + const lineGpsDataOfApiArray = [] | |
| 169 | + for (let obj of gpsArray) { | |
| 170 | + lineGpsDataOfApiArray.push(new LineGpsDataOfApi(obj)) | |
| 171 | + } | |
| 172 | + this.scrollListInnerData.refreshGps(lineGpsDataOfApiArray) | |
| 173 | + }).catch((err2) => { | |
| 174 | + console.log(err2) | |
| 175 | + }) | |
| 176 | + // 发送bindData事件,父组件绑定该事件 | |
| 177 | + this.$emit('bindData', this.innerDataSet) | |
| 178 | + this.initLoading = false | |
| 179 | + // 启动滚动分页,gps刷新 | |
| 180 | + this.scrollTimer.count++ | |
| 181 | + this.gpsTimer.count++ | |
| 182 | + }).catch((err) => { | |
| 183 | + console.log(err) | |
| 184 | + this.initLoadingText = `初始化线路路由失败,等待${this.gps_data_refresh_minute}分钟后重新获取,请稍后...` | |
| 185 | + this.gpsTimer.count++ | |
| 186 | + }) | |
| 187 | + }, | |
| 188 | + refreshGpsDataOfApi () { // 使用后台api刷新gps数据 | |
| 189 | + if (this.innerDataSet.length === 0) { // length===0说明初始化失败,或者后台无数据,重新刷新 | |
| 190 | + this.initDataOfApi() | |
| 191 | + } else { | |
| 192 | + jsonp(this.gpsDataOfApiUrl).then((gpsArray) => { | |
| 193 | + const lineGpsDataOfApiArray = [] | |
| 194 | + for (let obj of gpsArray) { | |
| 195 | + lineGpsDataOfApiArray.push(new LineGpsDataOfApi(obj)) | |
| 196 | + } | |
| 197 | + this.scrollListInnerData.refreshGps(lineGpsDataOfApiArray) | |
| 198 | + }).catch((err2) => { | |
| 199 | + console.log(err2) | |
| 200 | + }) | |
| 201 | + this.gpsTimer.count++ | |
| 202 | + } | |
| 112 | 203 | } |
| 113 | 204 | } |
| 114 | 205 | } | ... | ... |
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart-scrollList.js
| ... | ... | @@ -3,7 +3,7 @@ |
| 3 | 3 | */ |
| 4 | 4 | import PropTypes from '@luban-h5/plugin-common-props' |
| 5 | 5 | |
| 6 | -import ScrollPage from 'core/plugins/bsth/bsth-line-chart-scrollList-page' | |
| 6 | +import scrollPage from 'core/plugins/bsth/bsth-line-chart-scrollList-page' | |
| 7 | 7 | |
| 8 | 8 | import './bsth-line-chart-scrollList.css' |
| 9 | 9 | |
| ... | ... | @@ -93,42 +93,12 @@ export default { |
| 93 | 93 | chart_gps_down_merge_text_f_color: PropTypes.color({ label: '下行合并gps车辆文本颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }) |
| 94 | 94 | }, |
| 95 | 95 | render () { |
| 96 | - const innerDivStyle = { | |
| 97 | - 'width': this.list_width + 'px', | |
| 98 | - 'height': this.list_height + 'px', | |
| 99 | - 'border': this.border_size + 'px solid black', | |
| 100 | - 'margin-left': this.margin_left + 'px', | |
| 101 | - 'margin-right': this.margin_right + 'px', | |
| 102 | - 'margin-top': this.margin_top + 'px', | |
| 103 | - 'margin-bottom': this.margin_bottom + 'px', | |
| 104 | - 'background': this.background_color, | |
| 105 | - 'position': 'relative', | |
| 106 | - 'overflow': 'hidden' // 隐藏超出的模拟图 | |
| 107 | - } | |
| 108 | - | |
| 109 | - // 包含所有的线路模拟图,滚动时设置top值,总高度等于所有图高度和 | |
| 110 | - const wrapperDivStyle = { | |
| 111 | - 'top': this.scrollTop + 'px', | |
| 112 | - 'position': 'absolute', | |
| 113 | - 'width': this.list_width + 'px', | |
| 114 | - 'height': this.line_chart_outer_div_height * this.internalDataSet.length + 'px' | |
| 115 | - } | |
| 116 | - | |
| 117 | 96 | /* 最外层div对应编辑器的通用样式 */ |
| 118 | 97 | return ( |
| 119 | 98 | <div class="line-chart-scrollList-outer-div"> |
| 120 | 99 | { |
| 121 | 100 | this.renderScrollDataComponent() |
| 122 | 101 | } |
| 123 | - <div style={innerDivStyle}> | |
| 124 | - <div style={wrapperDivStyle}> | |
| 125 | - { | |
| 126 | - this.internalDataSet.map(dataItem => ( | |
| 127 | - this.renderBsthLinechartDataList(dataItem) | |
| 128 | - )) | |
| 129 | - } | |
| 130 | - </div> | |
| 131 | - </div> | |
| 132 | 102 | </div> |
| 133 | 103 | ) |
| 134 | 104 | }, |
| ... | ... | @@ -234,8 +204,28 @@ export default { |
| 234 | 204 | this.internalDataSet = dataSet |
| 235 | 205 | }, |
| 236 | 206 | renderScrollDataComponent () { |
| 207 | + const innerDivStyle = { | |
| 208 | + 'width': this.list_width + 'px', | |
| 209 | + 'height': this.list_height + 'px', | |
| 210 | + 'border': this.border_size + 'px solid black', | |
| 211 | + 'margin-left': this.margin_left + 'px', | |
| 212 | + 'margin-right': this.margin_right + 'px', | |
| 213 | + 'margin-top': this.margin_top + 'px', | |
| 214 | + 'margin-bottom': this.margin_bottom + 'px', | |
| 215 | + 'background': this.background_color, | |
| 216 | + 'position': 'relative', | |
| 217 | + 'overflow': 'hidden' // 隐藏超出的模拟图 | |
| 218 | + } | |
| 219 | + | |
| 220 | + // 包含所有的线路模拟图,滚动时设置top值,总高度等于所有图高度和 | |
| 221 | + const wrapperDivStyle = { | |
| 222 | + 'top': this.scrollTop + 'px', | |
| 223 | + 'position': 'absolute', | |
| 224 | + 'width': this.list_width + 'px', | |
| 225 | + 'height': this.line_chart_outer_div_height * this.internalDataSet.length + 'px' | |
| 226 | + } | |
| 237 | 227 | return ( |
| 238 | - <ScrollPage | |
| 228 | + <scrollPage | |
| 239 | 229 | editorMode={this.editorMode} |
| 240 | 230 | page_size={this.page_size} |
| 241 | 231 | list_width={this.list_width} |
| ... | ... | @@ -243,8 +233,17 @@ export default { |
| 243 | 233 | scroll_milliseconds={this.scroll_milliseconds} |
| 244 | 234 | gps_data_refresh_minute={this.gps_data_refresh_minute} |
| 245 | 235 | onBindData={this.onBindData} |
| 246 | - onScrollTop={this.onScrollTop} | |
| 247 | - ></ScrollPage> | |
| 236 | + onScrollTop={this.onScrollTop}> | |
| 237 | + <div style={innerDivStyle}> | |
| 238 | + <div style={wrapperDivStyle}> | |
| 239 | + { | |
| 240 | + this.internalDataSet.map(dataItem => ( | |
| 241 | + this.renderBsthLinechartDataList(dataItem) | |
| 242 | + )) | |
| 243 | + } | |
| 244 | + </div> | |
| 245 | + </div> | |
| 246 | + </scrollPage> | |
| 248 | 247 | ) |
| 249 | 248 | }, |
| 250 | 249 | renderBsthLinechartDataList (dataItem) { | ... | ... |
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart.js
| ... | ... | @@ -6,6 +6,8 @@ import PropTypes from '@luban-h5/plugin-common-props' |
| 6 | 6 | import TestData from 'core/plugins/bsth/bsth-line-chart_testData' |
| 7 | 7 | import Utils from 'core/plugins/bsth/bsth-utils' |
| 8 | 8 | |
| 9 | +import LineGpsDataOfLineChart from 'core/plugins/bsth/models/lineGpsDataOfLineChart' | |
| 10 | + | |
| 9 | 11 | import './bsth-line-chart.css' |
| 10 | 12 | import './bsth-line-prop-panel.css' |
| 11 | 13 | |
| ... | ... | @@ -263,10 +265,14 @@ export default { |
| 263 | 265 | }, |
| 264 | 266 | line_gps_data: function (currentVal, oldVal) { |
| 265 | 267 | let self = this |
| 266 | - if (!Utils.objectEquals(currentVal, oldVal)) { | |
| 267 | - // refreshLineSvg(); | |
| 268 | - self.refreshGpsSvg() | |
| 269 | - } | |
| 268 | + // console.log("oldVal=" + oldVal) | |
| 269 | + // console.log("currentVal=" + currentVal) | |
| 270 | + self.refreshGpsSvg() | |
| 271 | + // if (!Utils.objectEquals(currentVal, oldVal)) { | |
| 272 | + // // refreshLineSvg(); | |
| 273 | + // console.log(123456) | |
| 274 | + // self.refreshGpsSvg() | |
| 275 | + // } | |
| 270 | 276 | }, |
| 271 | 277 | // ------------ 本身宽高 ----------- // |
| 272 | 278 | line_width () { |
| ... | ... | @@ -670,38 +676,41 @@ export default { |
| 670 | 676 | * 按照站点编码和上下行分组 |
| 671 | 677 | * 数据示例: |
| 672 | 678 | * gps_group_by_stopNo_upDown = { |
| 673 | - * 'BCODE_0': ['559L1014', '559L1013'], | |
| 674 | - * 'CCODE_0': ['559L1015'], | |
| 675 | - * 'E1CODE_1': ['559L1025'], | |
| 676 | - * 'ACODE_1': ['559L1035', '559L1045', '559L1055'] | |
| 679 | + * 'BCODE_0': ['559L1014_内部编码', '559L1013_内部编码'], | |
| 680 | + * 'CCODE_0': ['559L1015_内部编码'], | |
| 681 | + * 'E1CODE_1': ['559L1025_内部编码'], | |
| 682 | + * 'ACODE_1': ['559L1035_内部编码', '559L1045_内部编码', '559L1055_内部编码'] | |
| 677 | 683 | * }; |
| 678 | 684 | */ |
| 679 | 685 | let gpsGroupByStopNoUpDown = {} |
| 680 | 686 | $jQuery.each(gpsData, function (i, d) { |
| 687 | + if (d && !(d instanceof LineGpsDataOfLineChart)) { | |
| 688 | + throw new Error('d不等于null,up参数不是LineGpsDataOfLineChart类型') | |
| 689 | + } | |
| 681 | 690 | let stopNo = d.stopNo // 站点编码 |
| 682 | 691 | let upDown = d.upDown // 上下行(0 上行 , 1 下行 , -1 无效) |
| 683 | 692 | let groupKey = stopNo + '_' + upDown |
| 684 | 693 | if (!gpsGroupByStopNoUpDown[groupKey]) { |
| 685 | 694 | gpsGroupByStopNoUpDown[groupKey] = [] |
| 686 | 695 | } |
| 687 | - let deviceId = d.deviceId // 设备编码 | |
| 688 | - gpsGroupByStopNoUpDown[groupKey].push(deviceId) | |
| 696 | + // 设备id + "_" + 内部编码,具体看getkey方法 | |
| 697 | + gpsGroupByStopNoUpDown[groupKey].push(d.getKey()) | |
| 689 | 698 | }) |
| 690 | 699 | /* |
| 691 | 700 | * 将分组后的设备编码array转换成map |
| 692 | 701 | * 数据示例: |
| 693 | 702 | * test_gps_index_mapp = { |
| 694 | 703 | * 'BCODE_0': { |
| 695 | - * '559L1014': 0, '559L1013' : 1 | |
| 704 | + * '559L1014_内部编码': 0, '559L1013_内部编码' : 1 | |
| 696 | 705 | * }, |
| 697 | 706 | * 'CCODE_0': { |
| 698 | - * '559L1015': 0 | |
| 707 | + * '559L1015_内部编码': 0 | |
| 699 | 708 | * }, |
| 700 | 709 | * 'E1CODE_1': { |
| 701 | - * '559L1025': 0 | |
| 710 | + * '559L1025_内部编码': 0 | |
| 702 | 711 | * }, |
| 703 | 712 | * 'ACODE_1': { |
| 704 | - * '559L1035': 0, '559L1045': 1, '559L1055': 2 | |
| 713 | + * '559L1035_内部编码': 0, '559L1045_内部编码': 1, '559L1055_内部编码': 2 | |
| 705 | 714 | * } |
| 706 | 715 | * }; |
| 707 | 716 | */ |
| ... | ... | @@ -710,8 +719,8 @@ export default { |
| 710 | 719 | if (!gpsIndexMap[key]) { |
| 711 | 720 | gpsIndexMap[key] = {} |
| 712 | 721 | } |
| 713 | - $jQuery.each(value, function (index, deviceId) { | |
| 714 | - gpsIndexMap[key][deviceId] = index | |
| 722 | + $jQuery.each(value, function (index, value2) { | |
| 723 | + gpsIndexMap[key][value2] = index | |
| 715 | 724 | }) |
| 716 | 725 | }) |
| 717 | 726 | |
| ... | ... | @@ -720,7 +729,7 @@ export default { |
| 720 | 729 | // 绘制rect |
| 721 | 730 | let gpsRectUpdate = gpsWrapSvg.selectAll('rect') |
| 722 | 731 | .data(gpsData, function (d) { |
| 723 | - return d.deviceId // 指定主键,默认使用数组下标 | |
| 732 | + return d.getKey() // 指定主键,默认使用数组下标 | |
| 724 | 733 | }) |
| 725 | 734 | let gpsRectEnter = gpsRectUpdate |
| 726 | 735 | let gpsRectExit = gpsRectUpdate.exit() |
| ... | ... | @@ -769,7 +778,7 @@ export default { |
| 769 | 778 | return y |
| 770 | 779 | } |
| 771 | 780 | y = parseInt(svgCircle.attr('cy')) |
| 772 | - let index = gpsIndexMap[d.stopNo + '_' + d.upDown][d.deviceId] | |
| 781 | + let index = gpsIndexMap[d.stopNo + '_' + d.upDown][d.getKey()] | |
| 773 | 782 | if (d.upDown === 0) { |
| 774 | 783 | y = y - 22 - (index * 17) |
| 775 | 784 | } else { |
| ... | ... | @@ -799,7 +808,7 @@ export default { |
| 799 | 808 | } |
| 800 | 809 | }) |
| 801 | 810 | .attr('_id', function (d) { |
| 802 | - return 'rct_' + d.deviceId | |
| 811 | + return 'rct_' + d.getKey() | |
| 803 | 812 | }) |
| 804 | 813 | .transition() |
| 805 | 814 | .attr('x', gpsRectX) |
| ... | ... | @@ -809,7 +818,7 @@ export default { |
| 809 | 818 | }) |
| 810 | 819 | gpsRectUpdate |
| 811 | 820 | .attr('_id', function (d) { |
| 812 | - return 'rct_' + d.deviceId | |
| 821 | + return 'rct_' + d.getKey() | |
| 813 | 822 | }) |
| 814 | 823 | .transition() |
| 815 | 824 | .attr('x', gpsRectX) |
| ... | ... | @@ -821,7 +830,7 @@ export default { |
| 821 | 830 | // --------------- 3、添加/更新车辆text元素 -------------- // |
| 822 | 831 | let gpsTextUpdate = gpsWrapSvg.selectAll('text') |
| 823 | 832 | .data(gpsData, function (d) { |
| 824 | - return d.deviceId // 指定主键,默认使用数组下标 | |
| 833 | + return d.getKey() // 指定主键,默认使用数组下标 | |
| 825 | 834 | }) |
| 826 | 835 | let gpsTextEnter = gpsTextUpdate |
| 827 | 836 | let gpsTextExit = gpsTextUpdate.exit() |
| ... | ... | @@ -870,7 +879,7 @@ export default { |
| 870 | 879 | return y |
| 871 | 880 | } |
| 872 | 881 | y = parseInt(svgCircle.attr('cy')) |
| 873 | - let index = gpsIndexMap[d.stopNo + '_' + d.upDown][d.deviceId] | |
| 882 | + let index = gpsIndexMap[d.stopNo + '_' + d.upDown][d.getKey()] | |
| 874 | 883 | if (d.upDown === 0) { |
| 875 | 884 | y = y - 22 - (index * 17) |
| 876 | 885 | } else { |
| ... | ... | @@ -881,21 +890,7 @@ export default { |
| 881 | 890 | } |
| 882 | 891 | |
| 883 | 892 | let gpsTextText = function (d) { |
| 884 | - if (d.nbbm) { | |
| 885 | - let nbbmLength = d.nbbm.length | |
| 886 | - if (nbbmLength > 3) { | |
| 887 | - let nbbmText = d.nbbm.substr(nbbmLength - 3) | |
| 888 | - if (d.nbbm.indexOf('-') > 0) { | |
| 889 | - return d.nbbm.substr(d.nbbm.indexOf('-') - 1, 1) + nbbmText | |
| 890 | - } else { | |
| 891 | - return nbbmText | |
| 892 | - } | |
| 893 | - } else { | |
| 894 | - return d.nbbm | |
| 895 | - } | |
| 896 | - } else { | |
| 897 | - return d.nbbm | |
| 898 | - } | |
| 893 | + return d.getText() | |
| 899 | 894 | } |
| 900 | 895 | |
| 901 | 896 | gpsTextEnter.enter().append('text') |
| ... | ... | @@ -909,7 +904,7 @@ export default { |
| 909 | 904 | } |
| 910 | 905 | }) |
| 911 | 906 | .attr('_id', function (d) { |
| 912 | - return 'tx_' + d.deviceId | |
| 907 | + return 'tx_' + d.getKey() | |
| 913 | 908 | }) |
| 914 | 909 | .transition() |
| 915 | 910 | .attr('x', gpsTextX) |
| ... | ... | @@ -921,7 +916,7 @@ export default { |
| 921 | 916 | |
| 922 | 917 | gpsTextUpdate |
| 923 | 918 | .attr('_id', function (d) { |
| 924 | - return 'tx_' + d.deviceId | |
| 919 | + return 'tx_' + d.getKey() | |
| 925 | 920 | }) |
| 926 | 921 | .transition() |
| 927 | 922 | .attr('x', gpsTextX) |
| ... | ... | @@ -934,16 +929,17 @@ export default { |
| 934 | 929 | // --------------- 4、绘制/更新车辆合并显示元素(g rect text) --------------// |
| 935 | 930 | // 绘制聚合点的数据集对象列表 |
| 936 | 931 | let mergerData = [] |
| 932 | + // console.log(gpsIndexMap) | |
| 937 | 933 | $jQuery.each(gpsIndexMap, function (key, value) { |
| 938 | 934 | let stopNo = key.split('_')[0] |
| 939 | 935 | let upDown = key.split('_')[1] |
| 940 | - let deviceIds = [] | |
| 941 | - $jQuery.each(value, function (deviceId) { | |
| 942 | - deviceIds.push(deviceId) | |
| 936 | + let deviceIdNbbms = [] | |
| 937 | + $jQuery.each(value, function (deviceIdNbbm) { | |
| 938 | + deviceIdNbbms.push(deviceIdNbbm) | |
| 943 | 939 | }) |
| 944 | 940 | // 删除旧的合并点 |
| 945 | 941 | $jQuery(self.$el).find('g[_id=' + 'merger_' + key + ']').remove() |
| 946 | - if (deviceIds.length <= 2) { // 小于等于2个gps,不合并 | |
| 942 | + if (deviceIdNbbms.length <= 2) { // 小于等于2个gps,不合并 | |
| 947 | 943 | return true |
| 948 | 944 | } |
| 949 | 945 | |
| ... | ... | @@ -957,7 +953,7 @@ export default { |
| 957 | 953 | let y = parseInt(svgCircle.attr('cy')) |
| 958 | 954 | |
| 959 | 955 | // 隐藏车辆rect |
| 960 | - $jQuery.each(deviceIds, function (i, d) { | |
| 956 | + $jQuery.each(deviceIdNbbms, function (i, d) { | |
| 961 | 957 | $jQuery(self.$el).find('rect[_id=rct_' + d + '],text[_id=tx_' + d + ']').attr('class', 'merge_hide') |
| 962 | 958 | }) |
| 963 | 959 | |
| ... | ... | @@ -966,7 +962,7 @@ export default { |
| 966 | 962 | y: y, |
| 967 | 963 | key: key, |
| 968 | 964 | upDown: parseInt(upDown), |
| 969 | - length: deviceIds.length | |
| 965 | + length: deviceIdNbbms.length | |
| 970 | 966 | }) |
| 971 | 967 | }) |
| 972 | 968 | ... | ... |
front-end/h5/src/components/core/plugins/bsth/models/lineGpsDataOfApi.js
| ... | ... | @@ -17,9 +17,9 @@ class LineGpsDataOfApi { |
| 17 | 17 | this.lineName = value.lineName // 线路名字 |
| 18 | 18 | this.lineCode = value.lineCode // 线路编码 |
| 19 | 19 | this.stopNo = value.stopNo // 站定编码 |
| 20 | - this.upDown = value.upDown // 上下行(0 上行 , 1 下行 , -1 无效) | |
| 20 | + this.upDown = parseInt(value.upDown) // 上下行(0 上行 , 1 下行 , -1 无效) | |
| 21 | 21 | this.deviceId = value.deviceId // 设备编码 |
| 22 | - this.instation = value.instation // 0: 站外 1:站内 2:场内 | |
| 22 | + this.instation = parseInt(value.instation) // 0: 站外 1:站内 2:场内 | |
| 23 | 23 | this.nbbm = value.nbbm // 车辆内部编码(自编号) |
| 24 | 24 | } |
| 25 | 25 | } | ... | ... |
front-end/h5/src/components/core/plugins/bsth/models/lineGpsDataOfLineChart.js
| ... | ... | @@ -16,7 +16,58 @@ class LineGpsDataOfLineChart { |
| 16 | 16 | this.upDown = value.upDown // 上下行(0 上行 , 1 下行 , -1 无效) |
| 17 | 17 | this.deviceId = value.deviceId // 设备编码 |
| 18 | 18 | this.instation = value.instation // 0: 站外 1:站内 2:场内 |
| 19 | - this.nbbm = value.nbbm // 车辆内部编码(自编号) | |
| 19 | + this.nbbm = value.nbbm // 车辆内部编码(自编号/车牌号) | |
| 20 | + } | |
| 21 | + | |
| 22 | + getKey () { | |
| 23 | + return this.deviceId + '_' + this.nbbm | |
| 24 | + } | |
| 25 | + | |
| 26 | + getText () { | |
| 27 | + if (this.nbbm.indexOf('沪') >= 0) { | |
| 28 | + return getCphShortText.call(this) | |
| 29 | + } else { | |
| 30 | + return getZbhShortText.call(this) | |
| 31 | + } | |
| 32 | + } | |
| 33 | +} | |
| 34 | + | |
| 35 | +function getZbhShortText() { // 获取自编号短文本 | |
| 36 | + let d = this | |
| 37 | + if (d.nbbm) { | |
| 38 | + let nbbmLength = d.nbbm.length | |
| 39 | + if (nbbmLength > 3) { | |
| 40 | + let nbbmText = d.nbbm.substr(nbbmLength - 3) | |
| 41 | + if (d.nbbm.indexOf('-') > 0) { | |
| 42 | + return d.nbbm.substr(d.nbbm.indexOf('-') - 1, 1) + nbbmText | |
| 43 | + } else { | |
| 44 | + return nbbmText | |
| 45 | + } | |
| 46 | + } else { | |
| 47 | + return d.nbbm | |
| 48 | + } | |
| 49 | + } else { | |
| 50 | + return d.nbbm | |
| 51 | + } | |
| 52 | +} | |
| 53 | + | |
| 54 | +function getCphShortText() { // 获取车牌号短文本 | |
| 55 | + let nbbm = this.nbbm | |
| 56 | + if (nbbm.indexOf('沪') !== -1) { | |
| 57 | + let startIndex = nbbm.indexOf('沪') | |
| 58 | + if (startIndex + 5 > nbbm.length) { // 沪后面至少还有5个字符 | |
| 59 | + return nbbm.substr(0, 3) | |
| 60 | + } else { | |
| 61 | + let code1 = nbbm.substr(startIndex + 1, 1) | |
| 62 | + let code2 = nbbm.substr(startIndex + 2, 1) | |
| 63 | + if (code2 === '-') { | |
| 64 | + return code1 + nbbm.substr(startIndex + 3, 3) | |
| 65 | + } else { | |
| 66 | + return code1 + nbbm.substr(startIndex + 2, 3) | |
| 67 | + } | |
| 68 | + } | |
| 69 | + } else { | |
| 70 | + return nbbm.substr(0, 3) | |
| 20 | 71 | } |
| 21 | 72 | } |
| 22 | 73 | ... | ... |
front-end/h5/src/components/core/plugins/bsth/models/lineRouteDataOfApi.js
| ... | ... | @@ -16,8 +16,8 @@ class LineRouteDataOfApi { |
| 16 | 16 | constructor (value = {}) { |
| 17 | 17 | this.lineName = value.lineName // 线路名字 |
| 18 | 18 | this.lineCode = value.lineCode // 线路编码 |
| 19 | - this.directions = value.directions // 方向 0:上行,1:下行 | |
| 20 | - this.stationRouteCode = value.stationRouteCode // 站点路由代码(用于站点排序) | |
| 19 | + this.directions = parseInt(value.directions) // 方向 0:上行,1:下行 | |
| 20 | + this.stationRouteCode = parseInt(value.stationRouteCode) // 站点路由代码(用于站点排序) | |
| 21 | 21 | this.stationCode = value.stationCode // 站点编码 |
| 22 | 22 | this.stationName = value.stationName // 站点名字 |
| 23 | 23 | this.stationMark = value.stationMark // 站定标识 B:起点站,E:终点站,Z:中途站 | ... | ... |
front-end/h5/src/components/core/plugins/bsth/models/lineRouteDataOfLineChart.js
| ... | ... | @@ -25,24 +25,24 @@ class LineRouteDataOfLineChart { |
| 25 | 25 | * @param down 下行站点数据(LineRouteDataOfApi类型) |
| 26 | 26 | */ |
| 27 | 27 | static fromLineRouteDataOfApi (up, down) { |
| 28 | - if (up === null && down === null) { | |
| 28 | + if (!up && !down) { | |
| 29 | 29 | return null |
| 30 | 30 | } |
| 31 | 31 | |
| 32 | - if (up !== null && !(up instanceof LineRouteDataOfApi)) { | |
| 32 | + if (up && !(up instanceof LineRouteDataOfApi)) { | |
| 33 | 33 | throw new Error('up不等于null,up参数不是LineRouteDataOfApi类型') |
| 34 | 34 | } |
| 35 | - if (down !== null && !(down instanceof LineRouteDataOfApi)) { | |
| 35 | + if (down && !(down instanceof LineRouteDataOfApi)) { | |
| 36 | 36 | throw new Error('down不等于null,down参数不是LineRouteDataOfApi类型') |
| 37 | 37 | } |
| 38 | 38 | |
| 39 | 39 | let [names, type, ids, stationMark] = [null, 2, null, null] |
| 40 | - if (up === null) { | |
| 40 | + if (!up) { | |
| 41 | 41 | type = 1 |
| 42 | 42 | names = [down.stationName] |
| 43 | 43 | ids = [down.stationCode + '_' + down.directions] |
| 44 | 44 | stationMark = down.stationMark |
| 45 | - } else if (down === null) { | |
| 45 | + } else if (!down) { | |
| 46 | 46 | type = 0 |
| 47 | 47 | names = [up.stationName] |
| 48 | 48 | ids = [up.stationCode + '_' + up.directions] | ... | ... |
front-end/h5/src/components/core/plugins/bsth/models/scrollListInnerData.js
| ... | ... | @@ -27,6 +27,7 @@ class ScrollListInnerData { |
| 27 | 27 | millisecond: 1 |
| 28 | 28 | } |
| 29 | 29 | } |
| 30 | + | |
| 30 | 31 | set pageSize (val) { // 设置每页大小 |
| 31 | 32 | this._pageSize = val |
| 32 | 33 | this._pageCount = Math.ceil(this._innerDataItemList.length / this._pageSize) |
| ... | ... | @@ -62,7 +63,7 @@ class ScrollListInnerData { |
| 62 | 63 | |
| 63 | 64 | let topFrom = this._scrollDataItemList[this._currentScrollIndex].top |
| 64 | 65 | let topTo = this._scrollDataItemList[this._nextScrollIndex].top |
| 65 | - let step = (topTo - topFrom) / 100 | |
| 66 | + let step = (topTo - topFrom) / 200 | |
| 66 | 67 | let self = this |
| 67 | 68 | self._scrollAnimateTimer.timer = setInterval(function () { |
| 68 | 69 | self._scrollAnimateTimer.count++ |
| ... | ... | @@ -90,6 +91,8 @@ class ScrollListInnerData { |
| 90 | 91 | } catch (err) {} |
| 91 | 92 | self._scrollAnimateTimer.timer = null |
| 92 | 93 | } |
| 94 | + | |
| 95 | + scrollListComponent.scrollTimer.count++ | |
| 93 | 96 | } |
| 94 | 97 | }, 1) |
| 95 | 98 | } |
| ... | ... | @@ -244,6 +247,8 @@ function initInnerDataSetWithRoute (routeDataArray) { |
| 244 | 247 | return [] |
| 245 | 248 | } |
| 246 | 249 | |
| 250 | + // console.log(routeGroupByLineNameCode) | |
| 251 | + | |
| 247 | 252 | let innerDataSet = [] |
| 248 | 253 | |
| 249 | 254 | for (let key of lineNameCodeList) { |
| ... | ... | @@ -271,6 +276,15 @@ function initInnerDataSetWithRoute (routeDataArray) { |
| 271 | 276 | let lineRouteGroupByDir = Utils.listGroupBy(lineRoute, function (d) { |
| 272 | 277 | return d.directions |
| 273 | 278 | }) |
| 279 | + // console.log(lineRouteGroupByDir) | |
| 280 | + | |
| 281 | + if (!lineRouteGroupByDir[0]) { | |
| 282 | + lineRouteGroupByDir[0] = [] | |
| 283 | + } | |
| 284 | + if (!lineRouteGroupByDir[1]) { | |
| 285 | + lineRouteGroupByDir[1] = [] | |
| 286 | + } | |
| 287 | + | |
| 274 | 288 | // 3.2.3 排序分组,上行升序,下行降序(下行降序为了后面进行站点名合并) |
| 275 | 289 | try { |
| 276 | 290 | lineRouteGroupByDir[0].sort(function (a, b) { |
| ... | ... | @@ -314,6 +328,7 @@ function initInnerDataSetWithRoute (routeDataArray) { |
| 314 | 328 | if (dirUpData == null && dirDownData == null) { |
| 315 | 329 | break |
| 316 | 330 | } |
| 331 | + | |
| 317 | 332 | mergeRouteData.splice(i, 1, LineRouteDataOfLineChart.fromLineRouteDataOfApi(dirUpData, dirDownData)) |
| 318 | 333 | } |
| 319 | 334 | internalData.route = mergeRouteData | ... | ... |