Commit 520ec72fc2f9bdb1a7bdfa71c3fcbeeee08e1dab

Authored by 徐烜
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中
front-end/h5/package.json
@@ -38,11 +38,12 @@ @@ -38,11 +38,12 @@
38 "vant": "^2.2.12", 38 "vant": "^2.2.12",
39 "vue": "^2.6.10", 39 "vue": "^2.6.10",
40 "vue-i18n": "^8.14.1", 40 "vue-i18n": "^8.14.1",
  41 + "vue-jsonp": "^2.0.0",
41 "vue-matomo": "^3.13.0-2", 42 "vue-matomo": "^3.13.0-2",
42 "vue-quill-editor": "^3.0.6", 43 "vue-quill-editor": "^3.0.6",
43 "vue-router": "^3.0.3", 44 "vue-router": "^3.0.3",
44 - "vuex": "^3.0.1",  
45 "vue-video-player": "^5.0.2", 45 "vue-video-player": "^5.0.2",
  46 + "vuex": "^3.0.1",
46 "x-data-spreadsheet": "^1.1.4" 47 "x-data-spreadsheet": "^1.1.4"
47 }, 48 },
48 "devDependencies": { 49 "devDependencies": {
front-end/h5/src/components/core/editor/modals/preview.vue
@@ -49,10 +49,10 @@ export default { @@ -49,10 +49,10 @@ export default {
49 * 这个可能是个bug 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 this.confirmLoading = true 58 this.confirmLoading = true
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart-scrollList-page.js
@@ -4,7 +4,9 @@ @@ -4,7 +4,9 @@
4 4
5 import TestData from 'core/plugins/bsth/bsth-line-chart-list_testData' 5 import TestData from 'core/plugins/bsth/bsth-line-chart-list_testData'
6 import LineRouteDataOfApi from 'core/plugins/bsth/models/lineRouteDataOfApi' 6 import LineRouteDataOfApi from 'core/plugins/bsth/models/lineRouteDataOfApi'
  7 +import LineGpsDataOfApi from 'core/plugins/bsth/models/lineGpsDataOfApi'
7 import ScrollListInnerData from 'core/plugins/bsth/models/scrollListInnerData' 8 import ScrollListInnerData from 'core/plugins/bsth/models/scrollListInnerData'
  9 +import { jsonp } from 'vue-jsonp'
8 10
9 export default { 11 export default {
10 props: { 12 props: {
@@ -28,37 +30,50 @@ export default { @@ -28,37 +30,50 @@ export default {
28 30
29 // --------------- 滚动翻页数据对象 --------------// 31 // --------------- 滚动翻页数据对象 --------------//
30 scrollListInnerData: null, 32 scrollListInnerData: null,
  33 + initLoading: true,
  34 + initLoadingText: '',
31 35
32 // ---------------- 内部的定时timer --------------- // 36 // ---------------- 内部的定时timer --------------- //
33 scrollTimer: { // 滚动间隔timer 37 scrollTimer: { // 滚动间隔timer
34 timer: null, 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 mounted () { 49 mounted () {
41 // 1、创建滚动翻页对象 50 // 1、创建滚动翻页对象
42 this.scrollListInnerData = new ScrollListInnerData(this.page_size, this.list_width, this.list_height) 51 this.scrollListInnerData = new ScrollListInnerData(this.page_size, this.list_width, this.list_height)
  52 +
43 // 2、初始化数据 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 if (this.editorMode === 'preview') { 71 if (this.editorMode === 'preview') {
58 - this.scrollTimer.count++ 72 + this.initDataOfApi()
59 } 73 }
60 }, 74 },
61 destroyed () { 75 destroyed () {
  76 + // 重置滚动间隔timer
62 let scrollTimer = this.scrollTimer.timer 77 let scrollTimer = this.scrollTimer.timer
63 if (scrollTimer) { 78 if (scrollTimer) {
64 try { 79 try {
@@ -67,6 +82,16 @@ export default { @@ -67,6 +82,16 @@ export default {
67 } 82 }
68 this.scrollTimer.timer = null 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 if (this.scrollListInnerData) { 95 if (this.scrollListInnerData) {
71 this.scrollListInnerData.resetData() 96 this.scrollListInnerData.resetData()
72 } 97 }
@@ -83,9 +108,22 @@ export default { @@ -83,9 +108,22 @@ export default {
83 let self = this 108 let self = this
84 this.scrollTimer.timer = setTimeout(function () { 109 this.scrollTimer.timer = setTimeout(function () {
85 self.startScroll() 110 self.startScroll()
86 - self.scrollTimer.count++ 111 + // self.scrollTimer.count++ // 滚动完成再触发,this.scrollListInnerData.scrollUp触发
87 }, this.scroll_milliseconds) 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 page_size (val) { 128 page_size (val) {
91 // 只在edit模式下监控,preview模式下不监控 129 // 只在edit模式下监控,preview模式下不监控
@@ -103,12 +141,65 @@ export default { @@ -103,12 +141,65 @@ export default {
103 render () { 141 render () {
104 // TODO:暂时是没有内容显示的,只处理内部数据,后面再根据不同的错误显示内容 142 // TODO:暂时是没有内容显示的,只处理内部数据,后面再根据不同的错误显示内容
105 return ( 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 methods: { 151 methods: {
110 startScroll () { 152 startScroll () {
111 this.scrollListInnerData.scrollUp(this) 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,7 +3,7 @@
3 */ 3 */
4 import PropTypes from '@luban-h5/plugin-common-props' 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 import './bsth-line-chart-scrollList.css' 8 import './bsth-line-chart-scrollList.css'
9 9
@@ -93,42 +93,12 @@ export default { @@ -93,42 +93,12 @@ export default {
93 chart_gps_down_merge_text_f_color: PropTypes.color({ label: '下行合并gps车辆文本颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } }) 93 chart_gps_down_merge_text_f_color: PropTypes.color({ label: '下行合并gps车辆文本颜色', defaultValue: '#FFFFFF', layout: { prefixCls: 'bsth-line' } })
94 }, 94 },
95 render () { 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 /* 最外层div对应编辑器的通用样式 */ 96 /* 最外层div对应编辑器的通用样式 */
118 return ( 97 return (
119 <div class="line-chart-scrollList-outer-div"> 98 <div class="line-chart-scrollList-outer-div">
120 { 99 {
121 this.renderScrollDataComponent() 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 </div> 102 </div>
133 ) 103 )
134 }, 104 },
@@ -234,8 +204,28 @@ export default { @@ -234,8 +204,28 @@ export default {
234 this.internalDataSet = dataSet 204 this.internalDataSet = dataSet
235 }, 205 },
236 renderScrollDataComponent () { 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 return ( 227 return (
238 - <ScrollPage 228 + <scrollPage
239 editorMode={this.editorMode} 229 editorMode={this.editorMode}
240 page_size={this.page_size} 230 page_size={this.page_size}
241 list_width={this.list_width} 231 list_width={this.list_width}
@@ -243,8 +233,17 @@ export default { @@ -243,8 +233,17 @@ export default {
243 scroll_milliseconds={this.scroll_milliseconds} 233 scroll_milliseconds={this.scroll_milliseconds}
244 gps_data_refresh_minute={this.gps_data_refresh_minute} 234 gps_data_refresh_minute={this.gps_data_refresh_minute}
245 onBindData={this.onBindData} 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 renderBsthLinechartDataList (dataItem) { 249 renderBsthLinechartDataList (dataItem) {
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart.js
@@ -6,6 +6,8 @@ import PropTypes from &#39;@luban-h5/plugin-common-props&#39; @@ -6,6 +6,8 @@ import PropTypes from &#39;@luban-h5/plugin-common-props&#39;
6 import TestData from 'core/plugins/bsth/bsth-line-chart_testData' 6 import TestData from 'core/plugins/bsth/bsth-line-chart_testData'
7 import Utils from 'core/plugins/bsth/bsth-utils' 7 import Utils from 'core/plugins/bsth/bsth-utils'
8 8
  9 +import LineGpsDataOfLineChart from 'core/plugins/bsth/models/lineGpsDataOfLineChart'
  10 +
9 import './bsth-line-chart.css' 11 import './bsth-line-chart.css'
10 import './bsth-line-prop-panel.css' 12 import './bsth-line-prop-panel.css'
11 13
@@ -263,10 +265,14 @@ export default { @@ -263,10 +265,14 @@ export default {
263 }, 265 },
264 line_gps_data: function (currentVal, oldVal) { 266 line_gps_data: function (currentVal, oldVal) {
265 let self = this 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 line_width () { 278 line_width () {
@@ -670,38 +676,41 @@ export default { @@ -670,38 +676,41 @@ export default {
670 * 按照站点编码和上下行分组 676 * 按照站点编码和上下行分组
671 * 数据示例: 677 * 数据示例:
672 * gps_group_by_stopNo_upDown = { 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 let gpsGroupByStopNoUpDown = {} 685 let gpsGroupByStopNoUpDown = {}
680 $jQuery.each(gpsData, function (i, d) { 686 $jQuery.each(gpsData, function (i, d) {
  687 + if (d && !(d instanceof LineGpsDataOfLineChart)) {
  688 + throw new Error('d不等于null,up参数不是LineGpsDataOfLineChart类型')
  689 + }
681 let stopNo = d.stopNo // 站点编码 690 let stopNo = d.stopNo // 站点编码
682 let upDown = d.upDown // 上下行(0 上行 , 1 下行 , -1 无效) 691 let upDown = d.upDown // 上下行(0 上行 , 1 下行 , -1 无效)
683 let groupKey = stopNo + '_' + upDown 692 let groupKey = stopNo + '_' + upDown
684 if (!gpsGroupByStopNoUpDown[groupKey]) { 693 if (!gpsGroupByStopNoUpDown[groupKey]) {
685 gpsGroupByStopNoUpDown[groupKey] = [] 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 * 将分组后的设备编码array转换成map 700 * 将分组后的设备编码array转换成map
692 * 数据示例: 701 * 数据示例:
693 * test_gps_index_mapp = { 702 * test_gps_index_mapp = {
694 * 'BCODE_0': { 703 * 'BCODE_0': {
695 - * '559L1014': 0, '559L1013' : 1 704 + * '559L1014_内部编码': 0, '559L1013_内部编码' : 1
696 * }, 705 * },
697 * 'CCODE_0': { 706 * 'CCODE_0': {
698 - * '559L1015': 0 707 + * '559L1015_内部编码': 0
699 * }, 708 * },
700 * 'E1CODE_1': { 709 * 'E1CODE_1': {
701 - * '559L1025': 0 710 + * '559L1025_内部编码': 0
702 * }, 711 * },
703 * 'ACODE_1': { 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,8 +719,8 @@ export default {
710 if (!gpsIndexMap[key]) { 719 if (!gpsIndexMap[key]) {
711 gpsIndexMap[key] = {} 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,7 +729,7 @@ export default {
720 // 绘制rect 729 // 绘制rect
721 let gpsRectUpdate = gpsWrapSvg.selectAll('rect') 730 let gpsRectUpdate = gpsWrapSvg.selectAll('rect')
722 .data(gpsData, function (d) { 731 .data(gpsData, function (d) {
723 - return d.deviceId // 指定主键,默认使用数组下标 732 + return d.getKey() // 指定主键,默认使用数组下标
724 }) 733 })
725 let gpsRectEnter = gpsRectUpdate 734 let gpsRectEnter = gpsRectUpdate
726 let gpsRectExit = gpsRectUpdate.exit() 735 let gpsRectExit = gpsRectUpdate.exit()
@@ -769,7 +778,7 @@ export default { @@ -769,7 +778,7 @@ export default {
769 return y 778 return y
770 } 779 }
771 y = parseInt(svgCircle.attr('cy')) 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 if (d.upDown === 0) { 782 if (d.upDown === 0) {
774 y = y - 22 - (index * 17) 783 y = y - 22 - (index * 17)
775 } else { 784 } else {
@@ -799,7 +808,7 @@ export default { @@ -799,7 +808,7 @@ export default {
799 } 808 }
800 }) 809 })
801 .attr('_id', function (d) { 810 .attr('_id', function (d) {
802 - return 'rct_' + d.deviceId 811 + return 'rct_' + d.getKey()
803 }) 812 })
804 .transition() 813 .transition()
805 .attr('x', gpsRectX) 814 .attr('x', gpsRectX)
@@ -809,7 +818,7 @@ export default { @@ -809,7 +818,7 @@ export default {
809 }) 818 })
810 gpsRectUpdate 819 gpsRectUpdate
811 .attr('_id', function (d) { 820 .attr('_id', function (d) {
812 - return 'rct_' + d.deviceId 821 + return 'rct_' + d.getKey()
813 }) 822 })
814 .transition() 823 .transition()
815 .attr('x', gpsRectX) 824 .attr('x', gpsRectX)
@@ -821,7 +830,7 @@ export default { @@ -821,7 +830,7 @@ export default {
821 // --------------- 3、添加/更新车辆text元素 -------------- // 830 // --------------- 3、添加/更新车辆text元素 -------------- //
822 let gpsTextUpdate = gpsWrapSvg.selectAll('text') 831 let gpsTextUpdate = gpsWrapSvg.selectAll('text')
823 .data(gpsData, function (d) { 832 .data(gpsData, function (d) {
824 - return d.deviceId // 指定主键,默认使用数组下标 833 + return d.getKey() // 指定主键,默认使用数组下标
825 }) 834 })
826 let gpsTextEnter = gpsTextUpdate 835 let gpsTextEnter = gpsTextUpdate
827 let gpsTextExit = gpsTextUpdate.exit() 836 let gpsTextExit = gpsTextUpdate.exit()
@@ -870,7 +879,7 @@ export default { @@ -870,7 +879,7 @@ export default {
870 return y 879 return y
871 } 880 }
872 y = parseInt(svgCircle.attr('cy')) 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 if (d.upDown === 0) { 883 if (d.upDown === 0) {
875 y = y - 22 - (index * 17) 884 y = y - 22 - (index * 17)
876 } else { 885 } else {
@@ -881,21 +890,7 @@ export default { @@ -881,21 +890,7 @@ export default {
881 } 890 }
882 891
883 let gpsTextText = function (d) { 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 gpsTextEnter.enter().append('text') 896 gpsTextEnter.enter().append('text')
@@ -909,7 +904,7 @@ export default { @@ -909,7 +904,7 @@ export default {
909 } 904 }
910 }) 905 })
911 .attr('_id', function (d) { 906 .attr('_id', function (d) {
912 - return 'tx_' + d.deviceId 907 + return 'tx_' + d.getKey()
913 }) 908 })
914 .transition() 909 .transition()
915 .attr('x', gpsTextX) 910 .attr('x', gpsTextX)
@@ -921,7 +916,7 @@ export default { @@ -921,7 +916,7 @@ export default {
921 916
922 gpsTextUpdate 917 gpsTextUpdate
923 .attr('_id', function (d) { 918 .attr('_id', function (d) {
924 - return 'tx_' + d.deviceId 919 + return 'tx_' + d.getKey()
925 }) 920 })
926 .transition() 921 .transition()
927 .attr('x', gpsTextX) 922 .attr('x', gpsTextX)
@@ -934,16 +929,17 @@ export default { @@ -934,16 +929,17 @@ export default {
934 // --------------- 4、绘制/更新车辆合并显示元素(g rect text) --------------// 929 // --------------- 4、绘制/更新车辆合并显示元素(g rect text) --------------//
935 // 绘制聚合点的数据集对象列表 930 // 绘制聚合点的数据集对象列表
936 let mergerData = [] 931 let mergerData = []
  932 + // console.log(gpsIndexMap)
937 $jQuery.each(gpsIndexMap, function (key, value) { 933 $jQuery.each(gpsIndexMap, function (key, value) {
938 let stopNo = key.split('_')[0] 934 let stopNo = key.split('_')[0]
939 let upDown = key.split('_')[1] 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 $jQuery(self.$el).find('g[_id=' + 'merger_' + key + ']').remove() 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 return true 943 return true
948 } 944 }
949 945
@@ -957,7 +953,7 @@ export default { @@ -957,7 +953,7 @@ export default {
957 let y = parseInt(svgCircle.attr('cy')) 953 let y = parseInt(svgCircle.attr('cy'))
958 954
959 // 隐藏车辆rect 955 // 隐藏车辆rect
960 - $jQuery.each(deviceIds, function (i, d) { 956 + $jQuery.each(deviceIdNbbms, function (i, d) {
961 $jQuery(self.$el).find('rect[_id=rct_' + d + '],text[_id=tx_' + d + ']').attr('class', 'merge_hide') 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,7 +962,7 @@ export default {
966 y: y, 962 y: y,
967 key: key, 963 key: key,
968 upDown: parseInt(upDown), 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,9 +17,9 @@ class LineGpsDataOfApi {
17 this.lineName = value.lineName // 线路名字 17 this.lineName = value.lineName // 线路名字
18 this.lineCode = value.lineCode // 线路编码 18 this.lineCode = value.lineCode // 线路编码
19 this.stopNo = value.stopNo // 站定编码 19 this.stopNo = value.stopNo // 站定编码
20 - this.upDown = value.upDown // 上下行(0 上行 , 1 下行 , -1 无效) 20 + this.upDown = parseInt(value.upDown) // 上下行(0 上行 , 1 下行 , -1 无效)
21 this.deviceId = value.deviceId // 设备编码 21 this.deviceId = value.deviceId // 设备编码
22 - this.instation = value.instation // 0: 站外 1:站内 2:场内 22 + this.instation = parseInt(value.instation) // 0: 站外 1:站内 2:场内
23 this.nbbm = value.nbbm // 车辆内部编码(自编号) 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,7 +16,58 @@ class LineGpsDataOfLineChart {
16 this.upDown = value.upDown // 上下行(0 上行 , 1 下行 , -1 无效) 16 this.upDown = value.upDown // 上下行(0 上行 , 1 下行 , -1 无效)
17 this.deviceId = value.deviceId // 设备编码 17 this.deviceId = value.deviceId // 设备编码
18 this.instation = value.instation // 0: 站外 1:站内 2:场内 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,8 +16,8 @@ class LineRouteDataOfApi {
16 constructor (value = {}) { 16 constructor (value = {}) {
17 this.lineName = value.lineName // 线路名字 17 this.lineName = value.lineName // 线路名字
18 this.lineCode = value.lineCode // 线路编码 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 this.stationCode = value.stationCode // 站点编码 21 this.stationCode = value.stationCode // 站点编码
22 this.stationName = value.stationName // 站点名字 22 this.stationName = value.stationName // 站点名字
23 this.stationMark = value.stationMark // 站定标识 B:起点站,E:终点站,Z:中途站 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,24 +25,24 @@ class LineRouteDataOfLineChart {
25 * @param down 下行站点数据(LineRouteDataOfApi类型) 25 * @param down 下行站点数据(LineRouteDataOfApi类型)
26 */ 26 */
27 static fromLineRouteDataOfApi (up, down) { 27 static fromLineRouteDataOfApi (up, down) {
28 - if (up === null && down === null) { 28 + if (!up && !down) {
29 return null 29 return null
30 } 30 }
31 31
32 - if (up !== null && !(up instanceof LineRouteDataOfApi)) { 32 + if (up && !(up instanceof LineRouteDataOfApi)) {
33 throw new Error('up不等于null,up参数不是LineRouteDataOfApi类型') 33 throw new Error('up不等于null,up参数不是LineRouteDataOfApi类型')
34 } 34 }
35 - if (down !== null && !(down instanceof LineRouteDataOfApi)) { 35 + if (down && !(down instanceof LineRouteDataOfApi)) {
36 throw new Error('down不等于null,down参数不是LineRouteDataOfApi类型') 36 throw new Error('down不等于null,down参数不是LineRouteDataOfApi类型')
37 } 37 }
38 38
39 let [names, type, ids, stationMark] = [null, 2, null, null] 39 let [names, type, ids, stationMark] = [null, 2, null, null]
40 - if (up === null) { 40 + if (!up) {
41 type = 1 41 type = 1
42 names = [down.stationName] 42 names = [down.stationName]
43 ids = [down.stationCode + '_' + down.directions] 43 ids = [down.stationCode + '_' + down.directions]
44 stationMark = down.stationMark 44 stationMark = down.stationMark
45 - } else if (down === null) { 45 + } else if (!down) {
46 type = 0 46 type = 0
47 names = [up.stationName] 47 names = [up.stationName]
48 ids = [up.stationCode + '_' + up.directions] 48 ids = [up.stationCode + '_' + up.directions]
front-end/h5/src/components/core/plugins/bsth/models/scrollListInnerData.js
@@ -27,6 +27,7 @@ class ScrollListInnerData { @@ -27,6 +27,7 @@ class ScrollListInnerData {
27 millisecond: 1 27 millisecond: 1
28 } 28 }
29 } 29 }
  30 +
30 set pageSize (val) { // 设置每页大小 31 set pageSize (val) { // 设置每页大小
31 this._pageSize = val 32 this._pageSize = val
32 this._pageCount = Math.ceil(this._innerDataItemList.length / this._pageSize) 33 this._pageCount = Math.ceil(this._innerDataItemList.length / this._pageSize)
@@ -62,7 +63,7 @@ class ScrollListInnerData { @@ -62,7 +63,7 @@ class ScrollListInnerData {
62 63
63 let topFrom = this._scrollDataItemList[this._currentScrollIndex].top 64 let topFrom = this._scrollDataItemList[this._currentScrollIndex].top
64 let topTo = this._scrollDataItemList[this._nextScrollIndex].top 65 let topTo = this._scrollDataItemList[this._nextScrollIndex].top
65 - let step = (topTo - topFrom) / 100 66 + let step = (topTo - topFrom) / 200
66 let self = this 67 let self = this
67 self._scrollAnimateTimer.timer = setInterval(function () { 68 self._scrollAnimateTimer.timer = setInterval(function () {
68 self._scrollAnimateTimer.count++ 69 self._scrollAnimateTimer.count++
@@ -90,6 +91,8 @@ class ScrollListInnerData { @@ -90,6 +91,8 @@ class ScrollListInnerData {
90 } catch (err) {} 91 } catch (err) {}
91 self._scrollAnimateTimer.timer = null 92 self._scrollAnimateTimer.timer = null
92 } 93 }
  94 +
  95 + scrollListComponent.scrollTimer.count++
93 } 96 }
94 }, 1) 97 }, 1)
95 } 98 }
@@ -244,6 +247,8 @@ function initInnerDataSetWithRoute (routeDataArray) { @@ -244,6 +247,8 @@ function initInnerDataSetWithRoute (routeDataArray) {
244 return [] 247 return []
245 } 248 }
246 249
  250 + // console.log(routeGroupByLineNameCode)
  251 +
247 let innerDataSet = [] 252 let innerDataSet = []
248 253
249 for (let key of lineNameCodeList) { 254 for (let key of lineNameCodeList) {
@@ -271,6 +276,15 @@ function initInnerDataSetWithRoute (routeDataArray) { @@ -271,6 +276,15 @@ function initInnerDataSetWithRoute (routeDataArray) {
271 let lineRouteGroupByDir = Utils.listGroupBy(lineRoute, function (d) { 276 let lineRouteGroupByDir = Utils.listGroupBy(lineRoute, function (d) {
272 return d.directions 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 // 3.2.3 排序分组,上行升序,下行降序(下行降序为了后面进行站点名合并) 288 // 3.2.3 排序分组,上行升序,下行降序(下行降序为了后面进行站点名合并)
275 try { 289 try {
276 lineRouteGroupByDir[0].sort(function (a, b) { 290 lineRouteGroupByDir[0].sort(function (a, b) {
@@ -314,6 +328,7 @@ function initInnerDataSetWithRoute (routeDataArray) { @@ -314,6 +328,7 @@ function initInnerDataSetWithRoute (routeDataArray) {
314 if (dirUpData == null && dirDownData == null) { 328 if (dirUpData == null && dirDownData == null) {
315 break 329 break
316 } 330 }
  331 +
317 mergeRouteData.splice(i, 1, LineRouteDataOfLineChart.fromLineRouteDataOfApi(dirUpData, dirDownData)) 332 mergeRouteData.splice(i, 1, LineRouteDataOfLineChart.fromLineRouteDataOfApi(dirUpData, dirDownData))
318 } 333 }
319 internalData.route = mergeRouteData 334 internalData.route = mergeRouteData