IoT Studio平台,即物联网开发平台。您可以使用IoT Studio中的Web应用编辑器可搭建监控大屏,用于展示设备上报的数据。

操作步骤

  1. 在物联网平台控制台左侧导航栏,选择IoT Studio > 开发服务
  2. IoT Studio页的项目管理栏,单击新建项目,新建一个项目。
  3. 在项目左侧导航栏,选择产品,再单击关联物联网平台产品,将已创建的气象监测产品与该项目关联。
  4. 在在项目左侧导航栏,选择设备,再单击关联物联网平台设备,将要监控数据的来源设备与该项目关联。
  5. 在左侧导航栏,选择Web可视化开发,然后新建一个Web应用。
  6. 在Web应用编辑器中,搭建实时气象数据监控面板。
    1. 选择自定义新增页,然后在页面右侧,设置页面标题和背景颜色等面板页面显示效果。
    2. 在左侧导航栏中,单击组件,从组件列表中,拖拽一个矩形组件到画布上,并配置组件样式。
    3. 从组件列表中,拖拽一个文字组件,重叠于矩形组件上,再单击右侧配置栏中文字内容输入框右侧的配置数据源,配置文字组件的数据源为气象监测设备的温度属性。
      设置完成后,该文字组件将显示气象监测设备上报的温度值。文字组件数据
    4. 再从组件列表中,拖拽一个文字组件到矩形组件上,文字内容设置为温度(℃),作为温度显示组件的标题。
    5. 选中刚配置好的三个组件,单击鼠标右键,选择成组,将这三个组件组成组件组。
    6. 根据要展示的属性数量,复制多个组。
      复制组件组时,各组件的显示效果配置和数据源配置同时被复制。
    7. 单击鼠标右键,选择解散组
      复制的组件组所有配置均相同。需先解散组,才能重新配置组件数据源等信息。
    8. 分别将数据源设置为该产品的其他属性,并设置对应的属性名称和单位。
    9. 如有需要,还可在页面上增加其他组件,如图片组件等。
      控制面板效果参考图如下。
    10. 所有组件配置完成后,单击上方操作栏中的预览,预览和测试应用页面。
  7. 新建空白页面,配置历史属性数据曲线展示图。
    以配置温度数据展示曲线图为例。
    1. 在左侧导航栏,选择页面,再单击新建符号+,新增空白页面。
    2. 在左侧导航栏,选择组件,拖拽一个曲线图组件到画布上,并配置曲线组件的数据源为气象监测设备的温度属性。
    3. 配置曲线图的显示样式。
      调整曲线图大小、坐标,设置是否显示时间选择器,设置系列名称为温度等。
      说明 如果勾选时间选择器前的复选框,表示曲线图上显示时间选择器。应用发布后,可以设置时间,查看对应时间段的温度数据。
    4. 配置完成后,单击页面上方操作栏中的预览,预览和测试应用页面。
  8. 单击页面上方的发布,发布应用。

执行结果

应用发布后,左侧导航栏中选择设置,可以开启应用Token验证,为应用绑定您自己的域名等。

更多Web应用可视化开发操作指导,请参见Web可视化开发文档