HarmonyOS应用开发实战 课件《智慧工厂》App实战开发-任务07.实操.实现环境监测数据可视化.pptx

《智慧工厂》App实战开发任务7实现环境监测数据可视化

任务描述本任务完成《智慧工厂》App的主页开发，并在主页的“车间监测”页签中完成车间环境监测数据的可视化开发。

任务能力目标能使用ArkTS组件编写主页；能完成车间环境监测页面的开发；能从ThingsBoard获取传感器数据；能展示车间的环境数据；能实现车间环境数据的动画显示效果。

开发主页面分析环境监测内容视图页的结构封装一级标题组件任务实施-步骤TaskImplementationSteps010203封装二级标题组件04封装展示告警提示信息的组件封装多合一传感器的数据实体类封装展示传感数据的组件050607

获取多合一传感器的遥测数据展示多合一传感器的数据实现环境监测数据可视化任务实施-步骤TaskImplementationSteps080910验证11

01开发主页面

开发主页面在《智慧工厂》App中，需要三个页面，分别用来展示车间的环境监测数据、物品的监测数据和设备告警的数据，可以使用Tabs容器组件来实现，通过Tabs的tabBar页签进行三个数据展示的内容子视图切换。

02分析环境监测内容视图页的结构

分析环境监测内容视图页的结构

03封装一级标题组件

封装一级标题组件

04封装二级标题组件

封装二级标题组件

05封装展示告警提示信息的组件

封装展示告警提示信息的组件当车间环境超过预设的阀值时，在车间环境数据展示页面的告警提示区，可以展示告警提示信息。为方便后续的操作，封装展示告警提示信息的组件，使用Marquee进行告警提示信息的滚动展示。

06封装多合一传感器的数据实体类

封装多合一传感器的数据实体类在etsmodel目录下新建SensorBean.ets文件，并在该文件中创建SensorBean类，该类用装饰器@Observed修饰。

07封装展示传感数据的组件

封装展示传感数据的组件当获取每一个传感器设备的遥测数据后，需要进行数据展示，封装一个类用于展示单个传感器的数据。

08获取多合一传感器的遥测数据

获取多合一传感器的遥测数据封装好上述组件和数据实体类后，接下来就可以编写获取多合一传感器信息的业务逻辑类。

09展示多合一传感器的数据

展示多合一传感器的数据在view目录下新建Sensor组件，按环境监测内容视图页的结构，组合上述封装好的组件和数据，展示从ThingsBoard获取的多合一传感器的数据，实现车间环境的监测。

10实现环境监测数据可视化

实现环境监测数据可视化。在Index.ets主页面，在组件的生命周期函数aboutToAppear()中接收登录成功后传递过来的ACCESS_TOKEN，并传递到获取遥测数据的方法中，每隔10秒从ThingsBoard获取多合一传感器的数据，并在“车间监测”页签对应的内容子视图里，使用Sensor()组件替换原来的Text组件，实现车间环境监测数据的展示。

11验证

验证123登录ThingsBoard，获取温度设备的访问令牌。配置MQTTBox，以便发送温度的遥测数据给ThingsBoard。发送40°C的温度值。4在ThingsBoard云平台上查看上报的温度的遥测数据。

任务小结本任务从主页的开发开始，逐步分析和分解车间环境监测数据页面的结构，拆解出一级标题、二级标题、单个传感器数据的显示组件等，并封装了对应的实体类和业务类，实现从物联网云平台获取传感数据并展示到页面上。通过本任务，学会了App与物联网云平台进行数据交互的开发技能，请读者们好好理解本任务的设计与实施的过程，以指导后续任务的顺利实施。

谢谢您的观看