4.2智慧工厂云平台数据可视化展示

项目四基于云平台技术的智慧工厂管理系统搭建与部署任务2智慧工厂云平台数据可视化展示目录CONTENTS任务描述与要求02职业目标01任务学习与实践03任务小结0401职业目标职业目标任务描述与要求任务小结任务学习与实践职业目标任务描述与要求任务小结任务学习与实践知识目标：

能力目标：01能分析Web应用程序的架构（重点）02理解Web应用程序的基本概念（重点）掌握Web应用程序的组成结构（重点）了解Web应用程序开发的基本流程能设计简单的Web应用程序架构02任务描述与要求职业目标任务描述与要求任务小结任务学习与实践职业目标任务描述与要求任务小结任务学习与实践任务描述：

任务要求：我们已在云平台上实现了对设备的实时监控功能。为了进一步提升用户体验，使设备数据的展示与监控更加直观、人性化，我们接下来将专注于智慧工厂监测系统中云平台数据可视化展示界面的实现。这一界面将采用先进的可视化技术，将复杂的设备数据转化为易于理解和分析的图形、图表等形式，使管理者能够迅速捕捉设备运行状态的关键信息，从而做出更加精准的决策。0102完成智慧工厂的Web应用程序开发自行绘制一个Web应用程序草图03任务学习与实践职业目标任务描述与要求任务小结任务学习与实践Web应用程序简介Web应用程序开发21职业目标任务描述与要求任务小结任务学习与实践1.Web应用程序认知在物联网技术蓬勃发展的今天，Web应用程序在物联网云平台中占据着举足轻重的地位，并发挥着不可替代的作用。物联网云平台作为连接物理世界与数字世界的桥梁，其核心功能之一便是通过Web应用程序向用户提供直观、便捷的交互界面，从而实现对物联网设备的远程监控、数据管理和业务逻辑处理。Web应用程序是指通过Web浏览器进行访问的应用程序。它们可以是静态的，如展示公司信息的网站，也可以是动态的，如在线购物网站或社交网络平台。Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践1.Web应用程序认知Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践Web应用程序的特性

可访问性用户可以通过任何具有互联网连接的设备访问Web应用程序，无需在本地计算机上安装软件。可伸缩性Web应用程序可以轻松地在不同的计算机和操作系统之间进行共享，适应不同规模的用户群体。易维护性与传统的本地应用程序相比，Web应用程序通常更容易维护和升级，因为更新可以集中在服务器端进行。1.Web应用程序认知Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践社交媒体允许用户分享信息、建立联系和交流，包括用户注册、个人资料、好友关系、消息发送等功能。在线购物提供商品展示、购物车、支付、订单管理等功能。在线学习提供在线课程和学习资源，包括课程发布、学习管理、作业提交、成绩统计等功能。在线政务与公共服务允许用户在线办理各项政务服务，包括身份认证、在线申

报、智能问答、实时交互等功能。新闻/媒体网站发布新闻和媒体内容，包括文章发布、新闻分类、标签、评论等功能。功能和用途1.Web应用程序认知Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践鉴于Web应用程序及其API常成为恶意攻击的主要目标，安全性应作为系统开发全生命周期的核心要素予以重点考量。为了保护Web应用程序免受潜在的安全威胁和漏洞，开发人员需要采取多种安全技术和策略，如Web应用防火墙、API保护、Bot防护和DDoS(DistributedDenialofService,分布式拒绝服务)攻击防护等。这些技术和策略的结合可以提供全面的安全防护，确保Web应用程序的稳定性和用户数据的安全性。随着Web技术的不断发展，Web应用程序的功能和用途也在不断扩展和完善。同

时，为了确保Web应用程序的安全性和稳定性，开发人员需要时刻关注最新的安全威

胁和漏洞，并采取相应的防护措施来保护用户数据的安全。2.Web应用程序组成结构Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践（1）设计界面组成结构Web应用程序设计界面一般由设计区和组件库组成，如图所示。2.Web应用程序组成结构Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践（2）组件库组成结构组件库是一组预制的、可复用的UI元素集合，这些元素可以被开发人员直接引入到项目中，用于构建Web应用的界面。组件库的出现极大地简化了前端开发流程，使得开发人员能够快速搭建出高质量的界面，同时保持界面的一致性和可维护性。在组件库中，将UI元素分为三类，分别是基础元素、图表元素和设备元素，这些UI元素都可以直接拖拽到设计区。其中设备元素必须在云平台项目配置完成，能够在云平台上正常进行数据监测和操纵后才会出现。如果在设计时没有出现物联网网关等设计元素，则需要检查云平台项目配置。此外，为了界面的美观和多元化，往往在组件库中会加入特定场景中常见的一些图片标识。例如本次项目类型选择为工业物联，则在组件库中可以选择工业图库，就可以使用一些常见的工业设备图标。2.Web应用程序组成结构Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践（3）设计区组成结构设计区通常指的是在Web前端开发工具中用于设计UI界面的区域。在这个区域中，开发者可以使用各种设计工具（如画布、组件库等）来构建和预览UI界面。设计区的作用是为开发者提供一个直观、便捷的设计环境，使得开发人员能够快速地设计出符合需求的界面。如图所示。设计区支持可视化设计，即开发人员可以通过拖放组件、调整样式等方式来构建界面，而无需编写大量的代码。开发人员在设计界面的同时可以看到界面的实际效果，从而及时调整和优化设计。同时设计区支持对组件的管理，包括添加、删除、修改组件等操作。这有助于开发者更好地组织和管理界面元素。3.Web应用程序草图绘制Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践步骤一：首先，我们在完成任务1的基础上新建一个应用，点击“生成应用”跳转至项目生成器的新增界面，在弹出的页面点击“马上创建一个应用”，如右图所示。3.Web应用程序草图绘制Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践步骤二：创建后需要填写应用信息，其中应用模板选择“项目生成器”，如右图所示。步骤三：正确填写应用信息以后，可以进入应用设计视图，开始web应用程序开发，如右图所示。3.Web应用程序草图绘制Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践步骤四：随后我们将项目中的传感器和执行器设备控件从组件库中拖出到设计区，即可实现一个简单的Web应用程序，如下图所示。1.Web应用程序的主要开发方法Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践添加标题敏捷开发和DevOps3传统手工编码1项标框架和库的使用题2人工智能和自动化54低代码开发传统的手工编码方法是Web应用程序开发的基石。在这种方法中，开发人员使用编程语言（如HTML、CSS、JavaScript、Java、Python等）直接编写代码来构建应用程序。这种方法对开发人员的编程技能要求较高，需要深入理解Web开发的相关技术和标准。尽管它提供了最大的灵活性和控制能力，但开发周期长、成本高，且容易出错。1.Web应用程序的主要开发方法Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践添加标题3传统手工编码1项标框架和库的使用题2人工智能和自动化54低代码开发为了减轻传统手工编码的负担，开发人员开始使用各种框架和库来加速开发过程。这些框架和库提供了一套预定义的工具、组件和API，使得开发人员能够更快地构建应用程序。例如，React、Vue.js和Angular等前端框架简化了前端开发，而SpringBoot、Django和Express等后端框架则简化了后端逻辑的实现。使用框架和库可以显著提高开发效率，同时保持代码的可读性和可维护性。敏捷开发和DevOps1.Web应用程序的主要开发方法Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践添加标题3传统手工编码1项标框架和库的使用题2人工智能和自动化54低代码开发随着软件开发方法的不断演进，敏捷开发和DevOps成为了主流的开发模式。敏捷开发强调快速迭代和响应变化，通过短周期的开发和反馈循环来持续交付价值。DevOps则强调开发（Dev）和运维（Ops）之间的紧密合作，通过自动化工具和流程来加速软件交付并提高软件质量。这两种模式都极大地提升了Web应用程序的开发效率和稳定性。敏捷开发和DevOps1.Web应用程序的主要开发方法Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践添加标题3传统手工编码1项标框架和库的使用题2人工智能和自动化54低代码开发低代码开发（Low-CodeDevelopment）是近年来兴起的一种革命性的开发方法。它允许开发人员通过图形界面和配置方式快速构建应用程序，而无需深入编写大量的代码。低代码平台通常提供了一套丰富的预构建组件、模板和自动化工具，使得开发人员可以通过拖放、配置和连接组件来构建复杂的应用程序。这种方法极大地降低了技术门槛，使得非专业开发人员也能参与到应用程序的开发中来。同时，它也提高了开发效率，缩短了开发周期，并降低了开发成本。敏捷开发和DevOps1.Web应用程序的主要开发方法Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践添加标题3传统手工编码1项标框架和库的使用题2人工智能和自动化54低代码开发随着人工智能技术的不断发展，越来越多的Web应用程序开发方法开始融入人工智能技术。例如，自动化测试、代码审查、性能优化等方面都可以借助人工智能技术来提高效率和准确性。此外，一些低代码平台也开始引入人工智能助手，为开发人员提供更加智能化的辅助和支持。敏捷开发和DevOps2.Web应用程序开发操作Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践（1）界面开发1）页面page的背景设置：点击主页面，再右侧应用配置中，选择一张背景图片上传即可。2.Web应用程序开发操作Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践（1）界面开发2）标题设置：点击左侧组件库中的文本，将其拖放到你需要放置的位置，按下列方式进行设置。●样式设置：字号为24，颜色为rgba(255,255,255,1)，样式为加粗；●数据类型设置：静态数据，内容为智慧工厂管理平台。2.Web应用程序开发操作Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践（1）界面开发3）传感器设置：分别点击左侧组件库中的光照传感器、接近开关、温度传感器、湿度传感器，将其拖放到你需要放置的位置，按下列方式进行设置。●

尺寸设置：宽度180，高度130；●

标题设置：字号18，颜色为rgba(125,200,227,255)，居中对齐；●

内容设置：字号18，颜色为rgba(250,240,180,255)，背景颜色为rgba(37,70,152,255)2.Web应用程序开发操作Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践（1）界面开发4）三色灯设置：分别点击左侧组件库中的三色灯红灯、三色灯黄灯、三色灯绿灯，将其拖放到你需要放置的位置，按下列方式进行设置。●

尺寸设置：宽度250，高度80；●

风格设置：精简；●

标题设置：字号18，颜色为rgba(125,200,227,255)，样式为加粗；●

内容设置：背景颜色为rgba(37,70,152,255)。2.Web应用程序开发操作Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践（1）界面开发5）推杆前后设置：点击左侧组件库中的电动推杆，将其拖放到你需要放置的位置，按下列方式进行设置。●

尺寸设置：宽度180，高度280；●

标题设置：字号18，颜色为rgba(125,200,227,255)，居中对齐，样式为加粗；●

内容设置：背景颜色为rgba(37,70,152,255)。2.Web应用程序开发操作Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践（1）界面开发6）地图设置：点击左侧组件库中的静态地图，将其拖放到你需要放置的位置，按下列方式进行设置。●

尺寸设置：宽度340，高度280；●

显示标题栏设置：隐藏；●

上传图片设置：选择一张厂区地图的照片即可；●

地图样式设置：拉伸。2.Web应用程序开发操作Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践（1）界面开发7）监控画面设置：点击左侧组件库中的图片，将其拖放到你需要放置的位置，按下列方式进行设置。●

尺寸设置：宽度280，高度160；●

图片样式设置：拉伸。●

数据类型设置：由于这里我们没有摄像头设备，因此采用图片的形式替代，数据类型选择为单张图片，并选择一张厂区图片即可；2.Web应用程序开发操作Web应用程序开发Web应用程序简介职业目标任务描述与要求任务小结任务学习与实践（1）界面开发8）告警设置：点击左侧组件库中的告警记录，将其拖放到你需要放置的位置，按下列方式进行设置。在项目生成器中，完成项目应用的设计，设计结果参考右图所示。●

尺寸设置：宽度1220，高度160；●

统计范围设置：距今时间1周；●

标题设置：字号18，颜色为rgba(125,200,227,255)，对齐为居中，背景颜色为rgba(6,65,155,1)；