开发一个Web应用,用于展示和查询指定时间段中,设备上报的每小时内的最高温度。
操作步骤
- 在项目页,选择Web可视化开发 > 新建Web应用。
- 在Web可视化开发页,鼠标光标移至选择模板下的区域,单击出现的使用该模板开发按钮。
- 在新建Web可视化应用对话框中,填入应用名称和描述,单击完成,新建一个Web可视化应用。
- 配置应用页面,设置页面背景和分辨率。
- 配置一个矩形组件,作为其他组件的背景。
- 配置一个文字组件,用于展示标题。
- 配置选择设备的下拉框。
- 配置一个文字组件,作为下拉框的标题。
- 配置下拉框组件样式。下拉框中,显示设备名称。
参数 说明 列表内容 选择为设备,表示下拉框中展示设备名称。 选择产品 选择设备所属的产品。下拉框中,展示该产品下的设备名称。 - 选择配置栏中的交互。
- 选择事件为值改变;动作为赋值给变量,单击管理变量。
- 单击新增变量,新增一个名称为DeviceName的变量。
- 单击配置 > 赋值,选择value,赋值给变量DeviceName。
- 单击确定,完成交互动作配置。
- 配置用户设置查询起始时间的时间组件。
- 配置一个文字组件,作为时间组件的标题。
- 配置时间组件样式。时间单位选择为秒。
- 配置交互动作,创建一个变量startTime,并配置通过值改变事件,触发交互动作,赋值给变量。
- 以相同的方法,配置查询结束时间的时间组件,并配置交互动作,赋值给变量endTime。
- 配置一个折线图组件,用于展示温度数据。
- 配置一个文字组件,作为折线图组件的标题。
- 配置折线图组件样式。
- 配置折线图组件的数据源为步骤三中创建的HTTP接口,请求参数值设置为前面创建的变量。
- 单击顶部栏中的预览按钮,预览应用。
- 单击发布按钮,发布应用。