智能播种机作业监管云平台Web前端的开发与实现

英文篇名：Development and implementation of Web front-end of cloud platform for intelligent seeder operation supervision
作者：张清博 ; 孙宜田 ; 孙永佳 ; 陈刚
英文作者：Zhang Qingbo;Sun Yitian;Sun Yongjia;Chen Gang;Shandong Academy of Agricultural Machinery Sciences;
关键词：作业远程监管 ; 作业实时监测 ; Web前端开发 ; 数据可视化 ; Angular
英文关键词：remote monitoring of operation;;real time monitoring of operation;;web front-end development;;data visualization;;Angular
中文刊名：GLJH
英文刊名：Journal of Chinese Agricultural Mechanization
机构：山东省农业机械科学研究院;
出版日期：2019-06-15
出版单位：中国农机化学报
年：2019
期：v.40;No.304
基金：山东省农机装备研发创新计划项目(2017YF014);山东省农机装备研发创新计划项目(2017YF033);; 山东省重点产业关键技术创新工程项目(2016CYJS03A01)
语种：中文;
页：GLJH201906033
页数：6
CN：06
ISSN：32-1837/S
分类号：173-178

摘要

为实现智能播种机作业的信息采集、处理与统计、质量追溯等远程监管目标,使用前后端分离模式开发一套智能播种机作业监管云平台。对平台Web前端进行研究和总体设计,开发框架、响应式编程库、数据可视化分别采用业界领先、开源免费的Angular、RxJS、ECharts,通过GoogleMaps JavaScript API接入Google地图;接着以播种机分布、播种机作业实时监测两个模块为例描述开发实现过程。平台前端具备技术前瞻、展示效果好、成本低的优势,对提升和推广智能播种机作业的远程监管具有重大推动作用。
In order to achieve the remote monitoring objectives of information collection, processing and statistics, quality traceability and so on, the author developed a cloud platform for intelligent seeder operation supervision by using front-end and back-end separation mode. This paper studies and designs the front-end of the platform Web. The development framework, responsive programming library and data visualization adopt industry-leading, open-source free Angular, RxJS and ECharts respectively. The platform accesses to Google Maps through Google Maps JavaScript API. Then, the development and implementation process is described with two modules of seeder distribution and real-time monitoring of seeder operation as examples. The front-end of the platform has the advantages of technology foresight, good display effect and low cost. It plays an important role in promoting and popularizing the remote monitoring of intelligent seeder operation.

引文

[1] Adam Freeman著,杨明军,颜炯,等译.Angular 5高级编程(第2版)[M].北京:清华大学出版社,2018.
    [2] 陆凌牛.HTML 5与CSS 3权威指南(第3版)[M].北京:机械工业出版社,2015.
    [3] 张亚涛.前后端分离实践[EB/OL].https://segmentfault.com/a/1190000009329474,2017-05-08.
    [4] Angular架构概览 [EB/OL].https://www.angular.cn/guide/architecture.
    [5] RxJS中文文档概览 [EB/OL].https://cn.rx.js.org/manual/overview.html.
    [6] Angular HttpClient [EB/OL].https://www.angular.cn/guide/http.
    [7] Angular powered Bootstrap [EB/OL].https://ng-bootstrap.github.io/.
    [8] Overview | Maps JavaScript API | GoogleDevelopers [EB/OL].https://developers.google.cn/maps/documentation/javascript/tutorial,2018-12-19.
    [9] Maps | Maps JavaScript API | GoogleDevelopers [EB/OL].https://developers.google.cn/maps/documentation/javascript/reference/map,2018-12-19.
    [10] Markers | Maps JavaScript API | GoogleDevelopers [EB/OL].https://developers.google.cn/maps/documentation/javascript/markers,2018-12-19.
    [11] Marker | Maps JavaScript API | GoogleDevelopers [EB/OL].https://developers.google.cn/maps/documentation/javascript/reference/marker,2018-12-19.
    [12] Info Windows | Maps JavaScript API | GoogleDevelopers [EB/OL].https://developers.google.cn/maps/documentation/javascript/infowindows,2018-12-19.
    [13] Info Window | Maps JavaScript API | GoogleDevelopers [EB/OL].https://developers.google.cn/maps/documentation/javascript/reference/info-window,2018-12-19.
    [14] Events | Maps JavaScript API | GoogleDevelopers[EB/OL].https://developers.google.cn/maps/documentation/javascript/events,2018-12-19.
    [15] Event system | Maps JavaScript API | GoogleDevelopers [EB/OL].https://developers.google.cn/maps/documentation/javascript/reference/event,2018-12-19.
    [16] ECharts特性 [EB/OL].https://echarts.baidu.com/feature.html.
    [17] ngx-echarts/README.md at v2.x [EB/OL].https://github.com/xieziyu/ngx-echarts/blob/v2.x/README.md,2018-07-24.
    [18] ECharts gauge-car-dark Demo [EB/OL].https://echarts.baidu.com/examples/editor.html?c=gauge-car-dark.