天天看点

如何通过ZWS-IoT低代码开发平台搭建一个环保系统

作者:ZLG致远电子

使用ZWS-IoT低代码开发平台,可以快速搭建不同web应用页面,以及多个页面的物联网应用系统。本文将介绍通过ZWS-IoT低代码开发平台如何自主搭建一个智慧环保系统。

简介

ZWS-IoT低代码开发平台是一款以图形化、拖拽方式并辅以少量代码就能快速搭建企业数字化应用的工具平台。提供了常用的基础组件、工业组件(用于工业生产场景)、大屏组件(用于展示大量数据)以及业务组件(物联网相关业务),无需深入了解编程语言和开发技术,只需简单地拖拽组件即可快速搭建物联网Web 应用。

不同行业的物联网平台,对数据监测的web页面样式、功能模块的要求都各有差异。使用ZWS-IoT低代码开发平台,可以快速搭建不同web应用页面,以及多个页面的物联网应用系统。

比如,智慧环保系统主要包括:实时数据、小时数据统计、日数据统计、月数据统计、报表导出等页面。主要展示数据指标有:PM2.5、PM10、二氧化硫、二氧化氮、一氧化碳、臭氧等,根据这些指标计算空气指令指数(AQI)、单因子分析、单设备分析、报表数据统计等等。要实现的效果如下:

如何通过ZWS-IoT低代码开发平台搭建一个环保系统

下文将具体介绍环保系统核心的搭建步骤。

前期准备

  1. 注册/登录ZWS物联网云平台账号:
  2. 用DTU(CATCOM-100)或者网关将环保检测设备连接到ZWS物联网云平台,参见往期文章《》。
如何通过ZWS-IoT低代码开发平台搭建一个环保系统

环保系统搭建

1. 菜单栏配置

在右侧属性配置栏目中,找到【顶部栏】和【左导航】,启用对应的【排列方式】。

如何通过ZWS-IoT低代码开发平台搭建一个环保系统

添加左侧菜单项。

如何通过ZWS-IoT低代码开发平台搭建一个环保系统

然后在【页面目录】中新建页面;在【菜单链接配置】 => 【目标链接】选择当前应用对应页面,即可完成菜单和页面的关联。配置效果图如下:

如何通过ZWS-IoT低代码开发平台搭建一个环保系统

2. GIS地图展示

GIS地图展示页面,用于查看不同设备的地理分布以及点位详情。可以用地图组件和抽屉组件实现。

地图配置:拖拽地图组件 => 标记数据配置 => 选择表格数据 => 设备表 => 选择设备类型,这样地图上就能够展示设备的地理信息坐标了。

如何通过ZWS-IoT低代码开发平台搭建一个环保系统

地图中的设备详情配置:拖拽抽屉组件 => 配置参数。

如何通过ZWS-IoT低代码开发平台搭建一个环保系统

3. 日数据查询

日数据查询,用于查看每日各项环保数据指标的平均值。可以用周期统计表组件来实现。

拖拽【周期统计表】后进行数据配置,如图所示:

如何通过ZWS-IoT低代码开发平台搭建一个环保系统

周期统计表可以配置筛选项表单、筛选项按钮、分页配置以及表格的基础属性配置。

其中筛选项表单可以预先配置将要查询的设备类型、统计纬度、统计类型、统计时间等,通过不同的配置组合,可以实现每小时/日/周/月/年的数据查询。

如何通过ZWS-IoT低代码开发平台搭建一个环保系统

4. 日单因子分析、日单设备分析

日单因子分析主要是查询某个因子的数据信息,而单设备分析在查询条件上可以同时选择多个因子。

点位名称配置:可选值 => 表格数据 => 设备表 => 设备类型。

如何通过ZWS-IoT低代码开发平台搭建一个环保系统

因子数据源配置:获取因子选择列表。

如何通过ZWS-IoT低代码开发平台搭建一个环保系统

折线图数据源配置:

如何通过ZWS-IoT低代码开发平台搭建一个环保系统

最终效果图:

如何通过ZWS-IoT低代码开发平台搭建一个环保系统

5. 日报

日报主要根据污染物数据,计算对应的空气质量指数(AQI)、污染物的变化趋势、各点位污染物浓度和环比情况、浓度排名等。

数据源配置通过请求自定义接口,根据各自的功能需求,利用接口的提供污染物的统计基础数据,结合过滤脚本生成出最终的展示数据。

数据源配置如图:

如何通过ZWS-IoT低代码开发平台搭建一个环保系统

添加过滤脚本:

如何通过ZWS-IoT低代码开发平台搭建一个环保系统

日报实现效果图:

如何通过ZWS-IoT低代码开发平台搭建一个环保系统

ZLG商城:https://j.youzan.com/Kt-L3L

ZLG开发者社区:https://z.zlg.cn/

更多技术干货可关注“ZLG致远电子”微信公众号

继续阅读