预报查询-前端介绍

2021-12-04 19:48:24 浏览数 (3)

前面介绍了WRF气象预报查询(城市)和CMAQ空气质量查询(站点和城市的)功能说明,现在我们开始介绍代码实现:

布局分为三部分:顶部工具栏,中间查询表格,底部是点击站点(或城市)出现的预报趋势图表。

工具栏:

选择某项因子,点击查询按钮后,图例说明和单位说明更新为当前查询因子的配置,同时表格内容刷新。

表格区域:

由于可能数据行数较多,设置表格为纵向可滚动,同时在前面插入一个只有表头的空表,来达到纵向滚动表格时固定表头的效果。

底部图表:

底部为echarts图表。当点击城市或站点名称时展现。

下面介绍页面的html和js代码:

用到的后台接口格式如下:

由于我们使用一个页面实现了三种数据的查询,所以我们根据当前url中传参来判断当前使用的是哪个功能。

根据b参数的不同,切换隐藏查询条件上的表单元素,同时实现不同的数据接口查询和以及不同的表格模板。

后续重构后将展现具体代码。

0 人点赞