您可开发一个Web可视化应用,用于展示和查询指定时间段中,设备上报的每小时内的最高温度。

操作步骤

  1. 物联网平台控制台左侧导航栏,单击IoT Studio > 应用开发
  2. 在快速开始页面开发工具模块,单击Web应用
    Web应用
  3. 创建可视化Web应用。
    1. 可视化Web应用开发页面,单击空白应用区域。
      创建可视化Web应用
    2. 新建Web应用对话框中,设置应用基本信息,单击确认
      新建Web应用
  4. 配置应用页面和标题。
    1. 设置页面背景和分辨率;配置一个矩形组件,作为其他组件的背景。
      矩形组件
    2. 配置一个文字组件,用于展示标题。
      文字标题
  5. 配置选择设备的下拉框。
    1. 配置一个文字组件,作为下拉框的标题。
    2. 添加一个下拉框组件,配置其样式。下拉框中,显示设备名称。
      参数 说明
      列表内容 选择为设备,表示下拉框中展示设备名称。
      选择产品 选择设备所属的产品。下拉框中,展示该产品下的设备名称。
      默认值 可选设置。指定选项或始终选择列表第一项为默认项。
      下拉框配置
    3. 选择配置栏中的交互,单击新增交互
    4. 选择事件为值改变;动作为赋值给变量,单击管理变量
    5. 单击新增变量,新增一个名称为DeviceName的变量。
      新增变量
    6. 返回交互页面,单击配置 > 赋值,选择value,赋值给变量DeviceName
      赋值
    7. 单击确定,完成交互动作配置。
  6. 配置用户设置查询起始时间的时间组件。
    1. 配置一个文字组件,作为时间组件的标题。
    2. 配置时间组件样式。时间单位选择为
      时间组件
    3. 配置交互动作。
      创建一个变量startTime,并配置通过值改变事件,触发交互动作,赋值给变量。详细操作指导请参见步骤:配置选择设备的下拉框
  7. 参照上一步骤,配置查询结束时间的时间组件,并配置交互动作。
    交互动作:值改变事件,触发交互动作,赋值给变量endTime事件组件
  8. 配置一个折线图组件,用于展示温度数据。
    1. 配置一个文字组件,作为折线图组件的标题。
    2. 配置折线图组件样式。
    3. 配置折线图组件的数据源为已创建的HTTP接口,请求参数值设置为前面创建的变量。接口详情请参见开发获取温度数据的服务
      折线图数据
    4. 为结束时间的组件,配置交互动作2:值改变事件,触发交互动作,刷新折线图组件。
      刷新组件
  9. 单击顶部栏中的保存按钮,保存应用配置。

执行结果

  1. 单击顶部栏中的预览按钮,预览应用。
  2. 单击发布按钮,发布应用。