温室监控大屏

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

背景信息

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

监控大屏示例图：

1. 创建Web可视化应用。具体操作，请参见创建Web应用。
2. 在Web应用编辑页左侧导航栏，单击页面，然后配置应用页面背景、分辨率等信息。
   • 分辨率选择为1920*1080（常见宽屏比例）。
   • 在底部工具栏，选中自适应前的复选框，应用页面就可以自适应屏幕大小（等比缩放，宽度撑满屏幕）。

   
3. 布局。
   1. 拖拽矩形组件到画布上。这些矩形组件将作为其他组件的背景。
   2. 单击选中矩形组件，然后在右侧配置样式：大小、位置、填充颜色、边框颜色和粗细。
      
   3. 拖拽一个iframe组件到页面中间，调整组件大小、位置，和配置关联链接。iframe组件可用于展示链接的页面内容，如企业介绍视频等。
      

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

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

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

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

   本文示例中，使用了以下组件：

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

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

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

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

     • 手动输入的数据类名称。
     • 单击文字内容右侧配置数据源按钮，在数据源配置面板，配置设备上报的相关属性数据。
     • 手动输入的属性数据单位。

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

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

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

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

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

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