本文介绍如何使用Web可视化开发搭建一个农业生产环境的温室监控大屏。

背景信息

在农业生产的场景中,使用监控大屏实时展示各智能监控设备上报的数据,便可随时了解温室内和温室外的温度、湿度、光照度、土壤水分等信息。

监控大屏示例图:



操作步骤

  1. 创建项目、产品和设备。具体操作指导,请参见创建项目
  2. 在项目页,选择Web可视化开发 > 新建Web应用,新建一个Web应用。
  3. 在Web应用编辑页左侧导航栏,单击页面,然后配置应用页面背景、分辨率等信息。
    • 分辨率选择为1920*1080(常见宽屏比例)。
    • 在底部工具栏,勾选自适应前的复选框,应用页面就可以自适应屏幕大小(等比缩放,宽度撑满屏幕)。


  4. 布局。
    1. 拖拽矩形组件到画布上。这些矩形组件将作为其他组件的背景。
    2. 单击选中矩形组件,然后在右侧配置样式:大小、位置、填充颜色、边框颜色和粗细。


    3. 拖拽一个iframe组件到页面中间,调整组件大小、位置,和配置关联链接。iframe组件可用于展示链接的页面内容,如企业介绍视频等。


      设置目标链接为HTTPS链接后,组件中将展示目标页面的内容。



      如果设置为HTTP链接,画布上不会显示链接页面内容。需单击上方预览按钮,预览页面会展示HTTP链接页的内容。

  5. 配置文字组件,用于展示大屏的标题。
    从左侧组件中,拖拽一个文字组件到画布上。然后在右侧配置栏中,设置文字显示位置、文字内容、文字样式等。

  6. 配置时钟组件,用于展示当前时间。


  7. 配置数据展示组件。

    设备上报的数据可使用多种组件展示,如文字组件、表格组件、各种图形组件。配置组件时,需将组件的数据源配置为设备上报的对应数据。

    本文示例中,使用了以下组件:

    • 配置文字组件,展示各区域的标题。
    • 配置仪表盘组件,用于展示智能设备上报的属性数据。
      • 在仪表盘组件样式配置中,配置标题为该仪表盘展示的数据类名称,如湿度、室内温度、室外温度等。
      • 数据源配置为设备上报的对应属性。如,湿度的数据源为温湿度计上报的当前湿度。

      下图为展示温度数据的仪表盘配置。



    • 配置文字组件,用于展示某类数据值。

      本示例中,使用三个文字组件共同实现数据展示,组成数据类+数据+数据单位的组合。三个文字组件的文字内容分别为:

      • 手动输入的数据类名称。
      • 设备上报的相关属性数据。
      • 手动输入的属性数据单位。

      下图为展示室外温度数据的配置。



    • 配置开关组件,用于展示温室内设备状态。

      开关组件的数据源需配置为对应的设备。



    • 配置一个曲线图,展示一天内的光照度。

      曲线图的数据源配置为光照监控设备;实时数据时间段选择为当天0点-24点



  8. 配置完成后,单击预览,查看和验证应用页面。
  9. 单击发布,将应用发布到云端。