前面介绍了WRF气象预报查询(城市)和CMAQ空气质量查询(站点和城市的)功能说明,现在我们开始介绍代码实现:
布局分为三部分:顶部工具栏,中间查询表格,底部是点击站点(或城市)出现的预报趋势图表。
工具栏:
选择某项因子,点击查询按钮后,图例说明和单位说明更新为当前查询因子的配置,同时表格内容刷新。
表格区域:
由于可能数据行数较多,设置表格为纵向可滚动,同时在前面插入一个只有表头的空表,来达到纵向滚动表格时固定表头的效果。
底部图表:
底部为echarts图表。当点击城市或站点名称时展现。
下面介绍页面的html和js代码:
用到的后台接口格式如下:
由于我们使用一个页面实现了三种数据的查询,所以我们根据当前url中传参来判断当前使用的是哪个功能。
根据b参数的不同,切换隐藏查询条件上的表单元素,同时实现不同的数据接口查询和以及不同的表格模板。
后续重构后将展现具体代码。