工业互联网APP开发技术与应用（微课版）

工业互联网App简介2学习目标

了解工业互联网App特征了解工业互联网App分类理解工业互联网App定义理解工业互联网App体系架构3CONTENTS

目录工业互联网App定义1工业互联网App特征2工业互联网App分类3工业互联网App体系架构44PART01工业互联网App定义5工业互联网App是一种基于工业互联网技术的应用程序，旨在帮助工业用户通过移动设备管理和控制工业设备、数据、流程等，从而实现远程监控、优化生产效率和降低成本。工业互联网App，简称工业App，承载工业知识和经验，是满足特定需求的工业应用软件，是工业技术软件化的重要成果。工业互联网App结合物联网、云计算、大数据等技术，为用户提供可视化的工业数据分析、智能化的生产决策，使用户能够更加高效地管理和控制工业生产流程。工业互联网App定义6PART02工业互联网App特征7相对于传统的工业软件而言，工业互联网App具有以下这几个特征，企业运用这些特征从而创造价值和保持竞争优势。工业互联网App特征轻量化定制化专用化灵活复用8轻量化工业互联网App的轻量化特征是指应用程序在功能上和体积上都更加轻量化和精简，以适应移动互联网时代的发展趋势。其轻量化特征主要包括以下几个方面：工业互联网App特征精简化功能设计：工业互联网App在设计时需要考虑到用户的操作习惯和使用场景，避免在应用程序中出现冗余或不必要的功能。采用精简化功能设计能够提高应用程序的易用性和用户体验。云端计算和存储：工业互联网App在数据采集和处理方面可以借助云端计算和存储技术，将数据上传到云端进行处理和存储，从而减轻应用程序的负担，提高应用程序的响应速度。9工业互联网App特征模块化开发：采用模块化开发方式能够将应用程序拆分成多个独立的模块，降低应用程序的耦合性，提高应用程序的可扩展性和可维护性。压缩技术：采用压缩技术可以有效地减小应用程序的体积，提高应用程序的下载速度和安装速度，从而提高用户的使用体验。响应式设计：采用响应式设计能够使应用程序适配不同的终端设备和屏幕尺寸，提高应用程序的跨平台兼容性和适用性。10定制化工业互联网App是一种针对工业领域的应用程序，主要用于实现设备和数据的互联互通、实时监测和控制、数据分析和决策支持等功能。其定制化特征主要包括以下几个方面：工业互联网App特征行业特定功能定制化：由于不同行业的工业应用具有不同的特点，因此工业互联网App需要根据具体行业需求进行功能的定制化开发。例如，针对制造业的工业互联网App需要具备工厂生产流程监控、设备状态实时监测和设备维修保养等功能，而针对物流行业的工业互联网App需要具备货物追踪、运输路线规划和物流资源调度等功能。数据采集与处理定制化：工业互联网App需要实现对各种设备和传感器数据的采集和处理，同时还需要根据用户需求对采集到的数据进行分析和展示。因此，工业互联网App需要根据不同的设备类型和数据特点进行数据采集和处理的定制化开发，以便能够提供更加精准和有效的数据分析和决策支持。11安全性和稳定性定制化：由于工业互联网App所涉及的数据和设备具有重要性，因此安全性和稳定性是其重要的特征之一。工业互联网App需要根据具体应用场景和用户需求进行安全性和稳定性方面的定制化开发，以确保应用程序能够在稳定、可靠和安全的环境下运行。用户界面和交互定制化：由于工业互联网App用户群体一般是工程师和技术人员，因此用户界面和交互设计需要具有专业性和易用性。工业互联网App需要根据用户需求进行用户界面和交互方面的定制化开发，以便提供更加直观和便捷的操作体验。工业互联网App特征12专用化工业互联网App的专用化特征指的是根据特定的工业应用场景和需求，针对性地开发的应用特征。这些特征可以帮助用户更好地实现工业智能化、数字化和自动化，提高生产效率和产品质量。具体来说，工业互联网App的专用化特征包括以下几个方面：工业互联网App特征设备连接和控制：工业互联网App需要支持不同种类的设备连接和控制，包括传感器、执行器、PLC等，实现设备的远程监控、操作和维护。数据采集和分析：工业互联网App需要支持实时数据采集和分析，包括设备状态、生产过程参数、物流信息等。通过数据挖掘和分析，帮助用户发现问题、优化流程和提高效率。。13生产调度和优化：工业互联网App需要支持生产调度和优化，包括生产计划的制定、任务的分配和调度、设备的维护和保养等，帮助用户实现生产线的高效运转。质量控制和追溯：工业互联网App需要支持质量控制和追溯，包括产品质量的监控、问题追溯、质量报告的生成等，保证产品质量和用户满意度。安全和可靠性：工业互联网App需要保证数据和设备的安全和可靠性，包括数据加密、身份认证、漏洞修复等，防范安全威胁和故障风险。工业互联网App特征14灵活和复用工业互联网App的灵活和复用特征是指能够快速适应不同的工业场景和需求，同时具有可重复利用性的特征。具体来说，工业互联网App的灵活和复用特征包括以下几个方面：工业互联网App特征模块化设计：工业互联网App采用模块化设计，不同的功能模块可以相互独立，方便进行增删改查等操作，同时可以根据需要组合成不同的应用，满足不同的需求。可配置性：工业互联网App具有可配置性，可以根据用户需求进行配置和定制，包括界面设计、数据采集、数据分析、报表生成等方面，满足不同用户的需求。15可扩展性：工业互联网App具有可扩展性，可以根据业务需求进行功能扩展和升级，例如增加新的设备类型、数据分析算法等，保持应用的前沿性和竞争力。数据共享和复用：工业互联网App能够实现数据的共享和复用，不同的应用可以共享相同的数据来源和数据分析结果，避免重复开发和浪费资源。通用性：工业互联网App具有通用性，可以适用于不同的工业应用场景和领域，例如制造业、物流业、能源行业等，同时可以支持不同的设备类型和通信协议，实现跨平台和跨系统的兼容性。16PART03工业互联网App分类17从适用范围的维度分类

从适用范围的维度分类可分为基础共性工业App、行业通用工业App、企业专用工业App。工业互联网App分类18从业务环节的维度分类从业务环节的维度分类依据工业场景的业务环节将工业App大致分为四类：研发设计类工业App、生产制造类工业App、运营维护类工业App和经营管理类工业App。工业互联网App分类19从知识来源的维度分类从知识来源的维度分类有业务信息化类、数据分析类、知识建模类。业务信息化类是面向企业实际业务场景的；数据分析类是基于企业各业务环节中所产生数据的集成；知识建模类是基于特定应用场景下归纳提炼的工业经验或机理。工业互联网App分类20PART04工业互联网App体系架构21工业App体系框架是一个三维体系，包含了工业维、技术维和软件维三个维度，体现了“工业·技术·软件（化）”的工作主旨。工业互联网App体系架构22（1）工业维：具有较为完整的工业生命周期。该维度涉及研发设计、生产制造、运维服务和经营管理四大类工业活动，在每一个工业活动中都可以细分为若干小类的活动。（2）技术维：各类工业产品需要不同层次的工业技术，根据工业产品体系的层次关系映射，形成工业App的三大层级结构，即由机械、电子、光学，原理性基础工业技术形成了基础共性App。（3）软件维：按照工业技术转换为工业App的开发过程，以及参考软件生命周期。该维度分为体系规划、技术建模、开发测评和应用改进四大阶段的软件活动，每个软件活动可以细分为更具体的软件活动。工业互联网App体系架构23小结在当前世界走向开放、共享的时代，传统资源型企业将逐步没落或转型，技型企业不断引领经济发展方向，知识经济成为时代特征。发展工业互联网是必然趋势。感谢聆听网址：电话：400-620-9999徐工汉云-国家级跨行业跨领域工业互联网平台徐工汉云技术股份有限公司2023年2月工业互联网App发展趋势26学习目标

了解工业互联网发展演变路径了解工业互联网典型应用27CONTENTS

目录工业互联网发展演变路径1工业互联网App国外发展扎实先进2工业互联网App国内发展起步前行3工业互联网典型应用428PART01工业互联网发展演变路径29工业互联网信息通信技术与工业经济的深度融合阶段通用电气提出过工业互联网的概念，并在在美国政府和企业的大力支持下，逐步形成了在航空、医疗、生物制药、半导体芯片、材料等行业的各种应用案例。工业互联网发展演变路径30工业互联网与企业合作相互推动阶段2016年，日本提出“互联产业”战略，2018年日本开始关注互联产业，其特点是通过利用数字技术实现网络空间与现实空间的高度融合，包括社会生产经营的方方面面。工业互联网发展演变路径315G加速工业互联网的发展进程我国，上海做出多项首个工业互联网项目，牵头出台了相关政策和三年行动计划。率先建立工信部全国互联网产业示范城市。获批首个互联网产业示范基地，开发汇众汽车配件、汽临港基地、诺玛高端智能液压、三菱电梯智能机器人仓库等系列相关场景。鼓励集成电路、生物医药、汽车、航空等300多家企业在工业互联网应用领域进行创新。2022年，上海互联网核心产业目标规模从800亿元提高到1500亿元。在强大的智能制造产业基础上，深圳适时出台了多项促进工业互联网环境的政策工业互联网发展演变路径32PART02工业互联网App国外发展扎实先进33全球多个国家都从国家战略的高度开展工业互联网领域布局。美国政府立足工业、信息通信业的全面优势，先后提出“先进制造伙伴计划”和“国家制造创新网络计划”。德国政府立足机械、电子、自动控制、工业管理软件等方面的优势，推出“工业4.0”国家计划。法国政府先后推出“新工业法国”和“新工业法国Ⅱ”。工业互联网App国外发展扎实先进34国外制造业传统巨头立足传统优势，一方面注重生产与制造过程的自动化、数字化和智能化改造，另一方面重点布局开放工业平台和工业生态体系，打造工业设备+工业平台+工业App的生态体系。工业互联网App国外发展扎实先进35PART03工业互联网App国内发展起步前行36我国的工业互联网仍处于起步与探索的阶段，尚未形成完整的模式和体系。但我国工业互联网的市场态势良好，其发展具有重要意义。工业互联网App国内发展起步前行37我国的工业互联网的现状:工业互联网发展的机遇与挑战并存，我国的工业互联网平台虽然成立时间短，但发展迅速，正朝着技术化、管理化、商业化等模式方向发展，并取得了显著的进展。行业发展存在的不足，工业互联网产业支撑不足，核心技术不强、综合能力不强，体系也尚不完善，其数字化和网络化水平低，人才支撑和安全保障不足，缺乏龙头企业的引导等。工业互联网App国内发展起步前行38PART04工业互联网典型应用39工业互联网融合应用向国民经济重点行业广泛拓展，形成平台化设计、智能化制造、网络化协同、个性化定制、服务化延伸、数字化管理六大新模式，赋能、赋智、赋值作用不断显现，有力地促进了实体经济提质、增效、降本、绿色、安全发展。工业互联网目前已延伸至40个国民经济大类，涉及原材料、装备、消费品、电子等制造业各大领域，以及采矿、电力、建筑等实体经济重点产业，实现更大范围、更高水平、更深程度发展，形成了千姿百态的融合应用实践。工业互联网典型应用40国民经济支柱产业钢铁行业，应用工业互联网积极探索生产工艺优化、多工序协同优化、多基地协同、产融结合等典型应用场景，通过数据深度分析带动生产效率、质量和效益提升，另一方面实现多区域、多环节、多业务系统的协同响应与综合决策，通过模式创新实现新价值创造和新动能培育。工业互联网典型应用41工程机械行业作为国民经济的重要行业，应用工业互联网加快企业数字化步伐。通过工业互联网进行设备预测性维护、远程可视化管理，不仅降低了设备运维成本，提高了生产资源的动态配置效率，还在此基础上延伸出供应链金融、融资租赁等服务模式，实现“制造+服务”，带来新的增长空间。工业互联网典型应用42家电行业依托工业互联网开展规模化定制、产品设计优化、质量管理、生产监控分析及设备管理等应用探索，提升用户交互体验、品质一次合格率与生产效率，节省设备运维成本，满足客户个性化需求。工业互联网典型应用43电子信息行业通过工业互联网开展设备可视化管理、产品良率提升、库存管理优化、全流程调度优化和多工厂协同等典型应用探索，一方面通过机器视觉、大数据分析等新技术提升质量管理、设备故障诊断、产品库存管理等环节效率，另一方面通过建设互联工厂实现企业级决策优化和需求敏捷响应。工业互联网典型应用44小结工业互联网在国内起步较晚但发展较快，同事也面临着严峻的挑战，工业互联网正融合应用向国民经济重点行业广泛拓展。感谢聆听网址：电话：400-620-9999徐工汉云-国家级跨行业跨领域工业互联网平台徐工汉云技术股份有限公司2023年2月工业互联网App开发概览47学习目标

了解工业互联网App开发的整个流程掌握开发工业互联网App的关键技术48CONTENTS

目录工业互联网App开发流程1工业互联网App开发所需技术249PART01工业互联网App开发流程50工业App需要经过市场调研、需求分析、原型设计、UI设计、前端设计。工业App功能开发之后，还会进行软件测试，应用市场上架，后期的日常维护和工业App推广运营工业互联网App开发流程51PART02工业互联网App开发所需技术52工业App开发需要解决多类工业设备接入、多源工业数据集成、海量数据管理与处理、工业数据建模分析、工业应用创新与集成、工业知识积累迭代实现等一系列问题，涉及七大类关键技术，分别为数据集成和边缘处理技术、IaaS技术、平台使能技术、数据管理技术、应用开发和微服务技术、安全技术、工业数据建模与分析技术。工业互联网App开发所需技术53数据集成和边缘处理技术设备接入：于工业以太网、工业总线等工业通信协议，以太网、光纤等通用协议，3G/4G、NB-IOT等无线协议将工业现场设备接入到平台边缘层。协议转换：运用协议解析、中间件等技术兼容Modbus、OPC、CAN、Profibus等各类工业通信协议和软件通信接口，实现数据格式转换和统一。另一方面利用HTTP、MQTT等方式从边缘侧将采集到的数据传输到云端，实现数据的远程接入。边缘数据处理：基于高性能计算芯片、实时操作系统、边缘分析算法等技术支撑，在靠近设备或数据源头的网络边缘侧进行数据预处理、存储以及智能分析应用，提升操作响应灵敏度、消除网络堵塞，并与云端分析形成协同。工业互联网App开发所需技术54IaaS技术基于虚拟化、分布式存储、并行计算、负载调度等技术，实现网络、计算、存储等计算机资源的池化管理，根据需求进行弹性分配，并确保资源使用的安全与隔离，为用户提供完善的云基础设施服务。工业互联网App开发所需技术55平台使能技术资源调度：通过实时监控云端应用的业务量动态变化，结合相应的调度算法为应用程序分配相应的底层资源，从而使云端应用可以自动适应业务量的变化。多租户管理：通过虚拟化、数据库隔离、容器等技术实现不同租户应用和服务的隔离，保护其隐私与安全。工业互联网App开发所需技术56应用开发和微服务技术微服务架构：提供涵盖服务注册、发现、通信、调用的管理机制和运行环境，支撑基于微型服务单元集成的“松耦合”应用开发和部署。图形化编程：通过类似LabVIEW的图形化编程工具，简化开发流程，支持用户采用拖拽方式进行应用创建、测试、扩展等。工业互联网App开发所需技术57工业数据建模与分析技术数据分析算法：运用数学统计、机器学习及最新的人工智能算法实现面向历史数据、实时数据、时序数据的聚类、关联和预测分析。机理建模：利用机械、电子、物理、化学等领域专业知识，结合工业生产实践经验，基于已知工业机理构建各类模型，实现分析应用。工业互联网App开发所需技术58安全技术数据接入安全：通过工业防火墙技术、工业网闸技术、加密隧道传输技术，防止数据泄漏、被侦听或篡改，保障数据在源头和传输过程中安全。平台安全：通过平台入侵实时检测、网络安全防御系统、恶意代码防护、网站威胁防护、网页防篡改等技术实现工业互联网平台的代码安全、应用安全、数据安全、网站安全。访问安全：通过建立统一的访问机制，限制用户的访问权限和所能使用的计算资源和网络资源实现对云平台重要资源的访问控制和管理，防止非法访问。工业互联网App开发所需技术59小结工业互联网App开发需要进行市场调研、需求分析、原型设计、UI设计、前端设计，功能开发之后，还会进行软件测试，应用市场上架，后期的日常维护和工业App推广运营，涉及七大类关键技术，分别为数据集成和边缘处理技术、IaaS技术、平台使能技术、数据管理技术、应用开发和微服务技术、安全技术、工业数据建模与分析技术。感谢聆听网址：电话：400-620-9999徐工汉云-国家级跨行业跨领域工业互联网平台工业管道监控系统开发案例徐工汉云技术股份有限公司2022年2月62在企业实际运用中管道的长距离铺设和运输缺少实时的监控与监管。管道的维护工人也只能够通过日常的巡检对膨胀节的外观进行查验以确认膨胀节是否处于良好的工作状态。整个过程全部采用人工完成，电子化和信息化程度极低，严重影响了工作效率。于此同时人工检查的方式难免会有写疏忽。市场调研63本任务选取实时监测的功能来进行需求分析实时监测信息界面呈现当前租户下的所有管道信息以卡片布局的形式展示，用户可以单击每个管道所在的选项卡，当单击所在的选项卡时可以弹出管道的实时详细信息界面，通过弹出的页面展示管道的基本信息（基本信息包括：实时信息、历史信息、指标分析、历史报警、日志操作、设备文档、在线时长等）。实时信息展示当前管道绑定的传感器实时数据；历史信息展示当前管道一周内的数据信息；指标分析根据当前数据和历史数据分析管道的实际情况；历史报警记录当前管道的报警信息和历史报警信息；日志操作记录当前管道发生报警处理情况；设备文档记录管道和绑定传感器的使用手册和说明书。还需展示一些设备其他参数如在线时长、运行时长、设备名称等。要求租户可以根据管道编码对管道进行查找、还需可以按照管道类型进行分类查找。需求分析64卡片布局的形式展示当前租户下所有管道原型设计65用户单击某管道所在的卡片展示一些基本信息和实时信息，基本信息包括：实时信息、历史信息、指标分析、历史报警、日志操作、设备文档、在线时长等原型设计66多个状态实现管道信息展示页面的切换原型设计67管道实时信息原型设计68管道历史信息原型设计69管道指标分析原型设计70管道历史报警原型设计71管道操作日志原型设计72管道相关文档原型设计73UI泛指人和物（人造物、工具、机器）互动过程中的界面（接口）,这里可以根据个人审美对项目原型进行相关设计和美化UI设计GUI图形设计师ID交互设计师UE/UX用户体验UI74前端使用Vue.js和ElementUI来构建，代码编辑工具使用的WebStorm。前端开发75后端SpringCloud、实时监控模块使用WebSocket与前台交互、使用Kafka作为消息服务器。后端开发76使用Postman对后端接口进行测试，测试完毕之后没有什么问题我们就打包部署到服务器，后续对服务器上相关服务进行维护测试维护感谢聆听网址：电话：400-620-9999徐工汉云-国家级跨行业跨领域工业互联网平台工业互联App开发平台指南徐工汉云技术股份有限公司2022年2月79为了能够直观的体验App开发平台的便捷性，这里演示如何通过App市场订阅的方式去构建基于市场模板的个人应用。选择App市场菜单，在App市场中挑选精美、符合自己需求的模板，这里我们以泰隆金工车间实况这个市场应用为例，订阅这个应用。基于App市场构建应用80回到“我的App”页面中会发现这里会显示刚刚订阅的模板应用，单击模板应用卡片中的“编辑”按钮即可对模板应用进行编辑从而实现自定义。基于App市场构建应用81根据自身需求在原有的应用模板上修改，修改之后的效果。基于App市场构建应用感谢聆听网址：电话：400-620-9999徐工汉云-国家级跨行业跨领域工业互联网平台徐工汉云技术股份有限公司2023年2月工业互联网App平台开发指南84学习目标

了解工业互联网App开发平台掌握平台各个功能和工具使用基于平台构建工业互联网应用85CONTENTS

目录首页看板1我的App2可视化编辑器3App市场486App分组5数据源库6资源库管理7App原生开发887PART01首页看板88功能描述：首页看板中包括应用案例展示、应用中心入口、我的App统计、App市场统计、控件数量统计、以及素材数量统计等相关模块。展示系统资源信息，提供应用快捷方式。首页看板89应用案例应用中心我的AppApp市场控件数量素材数量90PART02我的App91功能描述：我的App面板中展示当前租户所拥有的App，租户可以根据自己的需求构建、编辑、删除、分享App我的App92PART03可视化编辑器93功能描述：编辑器按照页面区域可以划分为：控件工具栏、工具导航、属性/数据源编辑区、控件选择区、画布区域。可视化编辑器94PART04App市场95功能描述：App市场显示审核通过的用户分享App，在此页面可以查询、预览和订阅App。App市场96PART05App分组97功能描述：App分组页面可以维护App的分组信息，包括App分组的查询、新增、编辑、删除功能。App分组98PART06数据源库管理99功能介绍：单击数据源管理菜单即可进入数据源管理界面。页面展示的是数据源列表界面，支持数据源新增、查询功能。数据源分为API、数据库两种。数据源库管理100API数据源必填项：数据源名称、数据源类型（API，不可编辑）、请求方式、请求地址。操作提示：仅支持无鉴权的API，API返回成功字段名为code等于200或者0标识成功，API返回体名称为value或者data或者result。数据源库管理101数据库数据源输入数据源名称、刷新周期、用户名、密码、连接地址、备注。必填项：数据源名称、数据源类型（数据库，不可编辑）、数据库类型、用户名、密码、连接地址。数据源库管理102数据库链接地址格式为：（1）MySQL数据库：

jdbc：mysql：//ip地址：端口号/数据库名?characterEncoding=UTF-8（2）Oracle数据库：

jdbc：oracle：thin：@{ip地址}：{端口号}：{服务名}（3）postgresql数据库：

jdbc：postgresql：//{ip地址}：{端口号}/{数据库名}（4）SQLServer数据库： jdbc：sqlserver：//{ip地址}：{端口号};DatabaseName={数据库名}（5）Mongo数据库 {ip地址}：{端口号}/{AuthenticationDB}。数据源库管理103PART07资源库管理104功能描述：我们通过资源库管理管理可视化页面设计中使用到的各种素材，用户可自行上传文件到个人资源库中，也可以对资源进行批量管理。资源库管理105PART08原生开发106功能描述：App原生开发页面提供前端开发框架、后端开发框架、控件编辑器以及它们对应使用教程的下载，为资源供给高度定制化实现提供了便利。App原生开发107小结介绍了App开发平台的部分功能点，使学生了解平台提供的可视化编辑器功能，App市场功能，我的App管理功能，数据源管理功能，资源管理功能等。感谢聆听网址：电话：400-620-9999徐工汉云-国家级跨行业跨领域工业互联网平台徐工汉云技术股份有限公司2023年2月工业互联网App开发平台实践110学习目标

了解租户功能了解工业互联网App开发平台基础控件掌握控件使用方式掌握控件开发技巧并开发控件111CONTENTS

目录控件1控件编辑器2租户功能3112PART01控件113用户在进行可视化设计时，可使用各种控件来展现不同工况。用户选择合适的控件，拖动到画面中，控件被成功放置，在右侧的属性区和数据源区可以调整控件的属性和配置控件数据源。控件114图片控件控件-基础控件图片控件的可调整属性如下图所示，包含图片大小、图片地址、边框、透明度等。在进行图片控件数据源配置时可为其增设判断条件来实现展示满足对应条件的效果图115文本控件文本控件的属性可调整如下：字体、颜色、位置、行高、边距、边框、背景和滚动条设置等。在进行文本数据源编辑时，可以为文本控件增加判断条件，实现不同判断结果时展示不同文本内容。文本控件支持超链接设置控件-基础控件116表格控件表格控件可调整属性包括：表头属性、表格属性、网格、滚动和表格事件。用户可以分别设置这些项的属性，比如字体、字号、颜色、高度等。还可以绑定对应数据格式的数据源。控件-基础控件117视频控件视频控件的可调属性包括视频宽度、高度、视频数据源等。控件-基础控件118视频监控控件视频监控控件可实时链接视频源目前支持海康协议，其可调属性包括视频大小、视频平台配置等。控件-基础控件119Iframe控件Iframe控件类似网页的内联框架可以设置宽度、高度和数据源链接地址。控件-基础控件120柱状图控件柱状图控件包含：横向柱状图、垂直堆叠柱状图、单柱状图、折线柱状图、分组柱状图、象形图、横向多柱状图、立体柱状图、Top3排名柱状图、Top5排名柱状图、堆叠条形图。控件-图表控件121折线图控件折线图控件的可调整属性包含：背景色、主题序列、Bar宽度、圆角、图表选项配置（包括：是否显示图例、X/Y轴线、X/Y刻度、值标签等）、轴线样式、值标签。折线图控件配置数据源时，根据数据源的默认数据格式调整。控件-图表控件122饼图控件饼图控件包含基础饼图、环形图、对比环形图、百分比图、条纹百分比图和玫瑰图。饼图控件配置数据源时，根据数据源的默认数据格式调整。控件-图表控件123散点图控件散点图控件的可调整属性包含背景色、曲线、颜色序列、图表选项配置（包括：是否显示图例、X/Y轴线、X/Y刻度、值标签等）、轴线样式、值标签和图例等。散点图控件配置数据源时，根据数据源的默认数据格式调整。控件-图表控件124其它控件其它控件包括矩形控件、雷达图控件、雷达图控件2。控件-图表控件125散点地图控件散点地图的可调整属性包含：图表的样式（默认颜色、边框颜色、高亮颜色）、地图标点样式，地图标签样式。散点地图控件可配置数据源。控件-图地控件1263D球形地图控件3D球形地图的可调整属性包含：背景色、距离和自转速度等，3D球形地图控件可配置数据源。控件-图地控件127标签地图控件标签地图的可调整属性有背景色，标签地图控件可配置数据源。控件-图地控件128地图控件-航线地图航线地图的可调整属性包含：背景色、图表样式、地图标点等，航线地图控件可配置数据源。控件-图地控件129中国地图控件中国地图控件，引用展示中国地图样式。中国地图的可调整属性包含：地图样式（背景色、显示地名、地名颜色和开启动画）、映射组件（显示，颜色范围，最小值，最大值，字体颜色）、提示信息（标签和描述），中国地图控件可配置数据源。控件-图地控件1303D地球控件3D地球控件的可调整属性包含：背景色、距离和自转速度，3D地球控件可配置数据源。控件-图地控件131仪表盘控件仪表盘控件包含半环仪表盘、环形仪表盘、环形仪表盘2、仪表盘、仪表盘2，如所示。仪表盘控件（半环仪表盘、环形仪表盘、环形仪表盘2）可调整的属性包括仪表盘样式、百分比属性和标签属性）。控件-工控控件132进度条控件进度条控件包含力矩百分比、方形水位图、垂直进度条、横向进度条、环形进度条、和水位图。控件-工控控件133指示牌控件指示牌控件有：数字翻牌、数字面板、数值控件-工控控件134温湿度计控件温湿度文本控件用于展示温度数值信息。温湿度文本控件可调整的属性包括：数值（颜色、字体）、标签（颜色、字体），温度计控件可以用来展示0-100摄氏度范围的量值。温度湿计控件可以配置数据源。控件-工控控件135指示灯控件指示灯控件可以用来展示设备的运行状况，可调整属性是灯的颜色。指示灯控件可以配置数据源。控件-工控控件136按钮控件按钮控件主要用于操作事件处理，可控属性有：背景色、按下背景色、文本、文本颜色、文本字体、按下、禁用、单击、以及超链接设置。控件-网页控件137卡片控件卡片控件用来显示图片文字信息。可调整的属性有：图片、边框、背景色、透明度、数值（颜色、字体）、标签（标题、颜色、字体）。控件-网页控件138日期控件日期控件来实时显示当前系统的日期/时间，有3种样式。控件-网页控件139筛选器控件下拉框控件可绑定属性包括：下拉框样式（背景色、编辑框颜色、内边距、边框颜色和宽度）、数值（属性名、属性值、占位符、文本颜色、数据源、字体等）、图标样式（图标、图标宽度和高度）、事件。控件-网页控件140选项卡控件选项卡控件类似于Web端的Tab切页，适用于多个功能页面的切换，可配置属性：选项卡配置（宽度、高度、背景色、字体颜色、选中背景色、选中字体色）、新增选项卡（设置选项卡名称和关联选项卡控件）。控件-网页控件141PART02控件编辑器142控件编辑器是用来开发自定义控件的，当App开发平台提供的控件没有满足需求时可以使用平台提供的控件开发工具进行开发，编辑器可以根据开发矢量控件、HTML控件（支持ECharts）、图表控件，控件开发工具下载方式为“App原生开发”→“编辑器下载”。控件编辑器143控件编辑器运行环境配置控件编辑器的运行环境依赖于Node.js需事先安装，本地编辑器还需要按照如下配置，在hosts文件中添加对应的域名映射。控件编辑器144运行控件编辑器安装编辑器的相关依赖，输入“cdserver”回车，输入“npminstall”回车。安装完成后，输入“cd../”返回到根目录，输入“nodeserver/server.js”回车，在浏览器中输入地址:5888/index.html即可打开编辑器。控件编辑器145界面介绍控件编辑器界面概览，顶部为功能栏，左侧为资源管理栏，右侧为属性编辑栏，中间为画布编辑区。控件编辑器146PART03租户功能147租户管理功能是针对二级租户相关信息管理，可以进行查询、新增、编辑、启用、锁定、注销租户、权限分配，也可以对租户进行重置密码操作，新增、重置密码租户的默认密码都是123456租户功能148小结本任务讲解了平台提供的各类基础控件类型，以及平台提供的控件开发工具的本地配置与运行，介绍了租户功能概要。感谢聆听网址：电话：400-620-9999徐工汉云-国家级跨行业跨领域工业互联网平台工业互联网App开发平台实践徐工汉云技术股份有限公司2022年2月151租户登录/注册平台的租户可以通过已有的账户信息登录到App开发平台。新用户可以通过平台注册功能注册到平台，新注册的租户需要填写相关注信息）。平台初步体验152创建App租户登录App开发平台之后，可以通过选择“我的App”→“新增App”输入App相关信息单击“确定”按钮即可完成App的创建。平台初步体验153拖拽控件构建页面这里将鼠标移入创建好的应用所在的卡片上去会显示“编辑”按钮，单击“编辑”按钮会跳转到App云组态设计器页面。平台初步体验154在云组态编辑器中可以拖拽任意控件来构建App，接下来要做的示例效果如下左图所示。从效果图中可以得知使用到的控件有选项卡控件、双轴线图控件、折线面积图控件、表格控件。当鼠标单击“双轴线图”选项卡时页面会显示双轴线图控件，单击“折线面积图”选项卡时页面会显示折线面积图控件，单击“图表”选项卡时页面会显示图表控件。平台初步体验155鼠标选中选项卡控件右侧会显示相应的属性，找到“选项卡配置”为每一个选项配置管理控件，图中Tab1关联的是双轴线图控件，依次类推关联其它控件。平台初步体验156配置选项卡名称，需要用户单击“数据源”按钮编辑对应的数据值，这里在“数据值编辑”弹框中找到name字段修改对应的值即可改变选项卡名称。平台初步体验157保存运行App选项卡控件选项关联好之后，调整其它控件布局，参见效果图修改大小和位置，单击“保存”按钮之后再单击“运行”按钮。平台初步体验158进入控件编辑器首页，单击左上角的“菜单”按钮，选择“文件”→“新建控件”菜单，控件开发工具可以开发三类控件：矢量控件、图表控件、HTML控件控件开发159矢量控件开发监控控件是从iconfont上下载的一个矢量图，将矢量图放到相应的文件夹下，转换成控件只需选中对应的矢量图鼠标右击选中“转换控件”即可。控件开发160对外暴露控件属性。比如监控控件需要对外设置颜色，那么找到相应的不规则图形节点，然后设置其属性的外链。161测试暴露的属性是否可用。新建一个画面，将新建的控件拖拽到画布区域，选中该控件，右侧属性栏出现监控背景色属性，更改属性值发现该控件的属性发生变化及验证成功。162图表控件开发基于ECharts图表库开发，以“柱状图”图表开发为例。新建一个图表控件单击右侧“属性”→“渲染元素”弹出“编辑”框。控件开发163在渲染元素的编辑框中编写代码，其中options为ECharts图表提供的图表配置项，可以参考，其中cache.htmlView这段是组件渲染图表的重要代码，代码参见教材部分。控件开发164图表开发的控件默认缩略图为空，可以通过属性自定义，在快照地址中输入缩略图地址。控件开发165测试渲染的柱状图控件是否可用，同样的步骤参照矢量控件验证步骤验证。控件开发166HTML控件开发同图表控件类似，需要在渲染元素中编写代码实现功能。比如开发一个视频监控控件控件开发167通过document创建了一个video容器用于存放视频窗口，相关代码如下控件开发168新增API数据源单击“新增”按钮进入API数据源新增页面，填写数据源信息相关信息数据源名称、刷新周期、选择请求方式、输入请求地址、入参，参数可以新增，输入参数后校验，校验结果在返回内容中显示。数据源导入169必填项为数据源名称、数据源类型（API，不可编辑）、请求方式、请求地址。这里需要注意的是仅支持无鉴权的API；API返回成功字段名为code200或者0标识成功；API返回体名称为value或者data或者result。接口返回值例子数据源导入170添加数据库数据源单击“新增”→“数据库”按钮，进入数据库数据源新增页面，填写数据源信息，输入数据源名称、刷新周期、用户名、密码、连接地址、备注，可以对配置好的数据进行连接测试测试通过单击“保存”按钮即可添加成功。数据源导入171必填项为数据源名称、数据源类型（数据库，不可编辑）、数据库类型、用户名、密码、连接地址。数据库链接地址格式为：数据源导入MySQL数据库：jdbc:mysql://ip地址:端口号/数据库名?characterEncoding=UTF-8Oracle数据库：jdbc:oracle:thin:@{ip地址}：{端口号}：{服务名}postgresql数据库：jdbc:postgresql://{ip地址}:{端口号}/{数据库名}SQLServer数据库：jdbc:sqlserver://{ip地址}:{端口号};DatabaseName={数据库名}Mongo数据库：{ip地址}:{端口号}/{AuthenticationDB}感谢聆听网址：电话：400-620-9999徐工汉云-国家级跨行业跨领域工业互联网平台徐工汉云技术股份有限公司2023年2月研发设计类应用开发174学习目标

了解研发设计类应用需求掌握数据库数据源制作和使用方式掌握API数据源制作和使用方式掌握控件绑定事件175CONTENTS

目录需求分析1176PART01需求分析177应用主要功能包含各省份空气质量实时信息展示、智能提示、趋势曲线、质量报告等，应用根据空气当中的成分给出相关报告以及智能的应对措施，通过鼠标单击对应数据行显示弹窗的形式展现，从App组态画面中可以看到实时的省份实时空气指数，右侧的表格中可以得知每个省份空气成分含量，右下脚展示各省份污染物排放量趋势。需求分析178小结本任务通过构建研发设计类应用空气质量分析App，巩固了平台控件使用方法，应用中使用到表格控件、中国地图控件、折线面积图控件等，强化了控件绑定数据源技能，从控件数据分析开始到设计控件数据库数据源和API数据源。感谢聆听网址：电话：400-620-9999徐工汉云-国家级跨行业跨领域工业互联网平台研发设计类应用开发徐工汉云技术股份有限公司2022年2月181创建App首先创建一个2D的App，单击“新增App”按钮，弹出“新增App”对话框输入相关信息，这里命名为空气质量分析App。应用开发182构建页面在构建App页面时需要拖拽一个根节点，这里选择“素材”→“默认装饰”分组边框5素材作为App的根节点，设置根节点布局指定宽高为1920*1080，为了后面的编辑方便控制属性中设置不可选中不可移动。应用开发183构建页面配置好根节点之后开始构建顶部标题部分，顶部标题部分涉及基础控件中的文本控件、网页控件中的日期控件以及素材库默认装饰中的2#标题素材。应用开发184构建页面右侧中国地图部分构建，在控件选项下找到地图控件类型中的中国地图，设置布局以适应整体效果，这里需要配置中国地图属性和数据源，属性配置需要设置显示地名、开启动画效果。应用开发185构建页面构建右侧数据表表格部分，需要使用到基础控件中的表格控件。拖拽表格控件预设好大小和布局。应用开发186构建页面右侧底部污染物排放量趋势曲线图需要使用到图标类控件中的折线面积图，找到对应的控件拖拽到画布中设置好布局。应用开发187数据源需要配置中国地图属性和数据源，属性配置需要设置显示地名、开启动画效果。显示地名是为了能够显示地图中各省份名称，动画设置当鼠标移入对应的省份区域出现选中效果。应用开发188开发API数据源中国地图控件配置API数据源，地图的原数据源格式如下，从中国地图控件的静态数据源分析得出控件需要的是一个数组，数组中包含的是一个一个的省份对象，省份对象中包含相关属性例如有省份名称、提示信息等。应用开发[{"name":"北京","value":572,"tipData":[245,264]},{"name":"天津","value":39,"tipData":[893,722]},//省略相同格式数据…]189开发API数据源根据静态数据源编写满足条件的API数据源，创建实体Province，创建控制器showProvince，创建业务逻辑层类参见教材部分。应用开发@AllArgsConstructor@NoArgsConstructor@DatapublicclassProvince{privateStringname;privateStringvalue;privateString[]tipData;}@GetMapping("/province/1")publicResponseshowProvince1(){returncharService.showProvince1();}190API测试运行测试，使用接口测试工具例如Postman、Apifox、Swagger等测试工具测试接口返回数据是否满足控件需求。应用开发191发布打包发布。测试通过之后将项目打包成Jar包运行在公有云服务器中，或者通过集成开发工具IDEA发布功能直接部署到公有云服务器。部署完毕之后使用App开发平台添加相应的API数据源，后台API是每个5秒更新一下数据。应用开发192配置数据源任务一：平台基础环境建设任务任务二：平台基础环境运维任务（微软雅黑正文、16号、1.5倍行距）应用开发193数据库数据源表格控件中默认的表头属性数据和静态数据源数据参照教材部分，分析表头数据属性可知displayName属性表示表头信息，例如displayName为城市时对应列的表头就是城市；key属性需要对应静态数分析，key对应静态数据中数据对象键值对key，例如表头为城市的key为column1，静态数据对象中就会对应一个column1属性和数据（北京、上海）与之对应。应用开发194数据库数据源表格控件绑定数据库数据源，根据以上的数据分析可以很容易的设计数据库表对象。使用数据库可视化连接工具连接公有云服务器数据库，运行SQL脚本创建air表并且导入数据，详细的SQL脚本参见教材。应用开发195数据库数据源设置表格控件的表头属性数据，将key与数据库表中属性一一对应，单击“数据源”选项，选择数据类型为数据库，找到SQL语句对应的“编辑”按钮单击，弹出“编写SQL语句编辑”，编写查询语句代码如下。应用开发SELECTcity,so2,nox,co,pm10, `pm2.5`,tsp,pb,DATE_FORMAT(now(),'%Y-%m-%d’)asdateFROM air196弹框提示当用户单击表格数据行时需要弹出智能提示，智能提示是根据各数据项以及各项建议值生成，通过为表格控件添加行事件实现。应用开发197弹框提示相关智能提示代码：应用开发function(row,data,view){varmsg=row.city+"("+row.date+")"+"空气质量分析:"+"\n"varadvice="建议："if(row.pm10>200){msg=msg+"pm10超标!"advice=advice+"做好降尘措施，"}if(row.co>200){msg=msg+"co超标!"advice=advice+"减少尾气排放，"}if(row.nox>200){msg=msg+"nox超标!"advice=advice+"减少硫化物的排放，"}if(row.so2>200){msg=msg+"so2超标!"advice=advice+"减少温室气体排放，提倡绿色出行！"}msg=msg+"，其它均正常！"confirm(msg+"\n"+"\n"+advice)}198静态数据源右侧底部污染物排放量趋势曲线图需要使用到图标类控件中的折线面积图，找到对应的控件拖拽到画布中设置好布局，配置静态数据源。应用开发199配置页面展示鼠标单击空白处，在编辑器右侧会出现“基础”属性栏，下拉“基础”属性栏可以配置页面相关参数，根据个人需求配置相关参数即可。这里简单配置了页面刷新的时间和页面大小。应用开发感谢聆听网址：电话：400-620-9999徐工汉云-国家级跨行业跨领域工业互联网平台徐工汉云技术股份有限公司2023年2月生产制造类应用开发202学习目标

了解生产制造类应用需求掌握多种类型控件使用方式掌握页面适配203CONTENTS

目录需求分析1204PART01需求分析205数控车间数据监控系统的主要功能是获取车间里的每一个设备的运行状态，将数据可视化之后可以合理排产从而提高生产效率，从大屏面板中可以看到实时的物料统计，设备状态、设备报警数据、设备能耗情况、材料的配比、车间操作画面、生成效率等相关生产制造中关心的信息。需求分析206207小结JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script是脚本的意思）脚本语言：不需要编译，运行过程中由js解释器(js引擎）逐行来进行解释并执行感谢聆听网址：电话：400-620-9999徐工汉云-国家级跨行业跨领域工业互联网平台生产制造类应用开发徐工汉云技术股份有限公司2022年2月210创建App创建一个2D的App，单击“新增App”按钮，弹出“新增App”对话框输入相关信息，这里命名为数控车间数据监控系统生产制造类应用开发211页面构建为了合理化布局首先会绘制一个根节点，在根节点上布局一般按照头部和内容区域进行划分，之后按照App的页面结构分区分组。单击“素材”栏找到名为TL-bg的素材作为根节点生产制造类应用开发212页面构建构建应用标题部分，这里使用的是素材库中的2#标题生产制造类应用开发213页面构建应用物料统计区域构建使用到的是图标类控件中对比环形图控件，选中对应控件拖拽道画布中设置好布局。此外还需要拖拽基础控件中的文本控件并设置文本为物料统计，最终将这两个控件选中归为一组命名为物料统计。生产制造类应用开发214页面构建构建设备组状态占比部分，需要使用到基础控件中文本控件和图标类中间中的环形图控件，文本控件作为区域标题，环形图控件作为内容显示。最终将这两个控件选中归为一组命名为设备状态组。生产制造类应用开发215页面构建构建报警日志部分需要使用到基础控件中的表格控件和文本控件，同样操作最终将它们合并成一组命名为报警日志。生产制造类应用开发216页面构建车间设备部分效果需要选择素材中的指定素材，只需要拖拽一个素材通过复制粘贴生成多个，最后调整布局将它们合并成一组命名为车间设备组。生产制造类应用开发217页面构建产品合格/不合格部分构建需要拖拽图标类控件中的双轴折线图配置好参数实现，如图321所示。为了显示每个柱状条的数值显示需要勾选“图表选项”下的“值标签”选项，如图322所示。生产制造类应用开发218页面构建构建合格率部分需要拖拽仪表盘类控件中的数字面板控件和基础控件中的文本控件。设置好数值之后合并成一组并命名为合格率数值。生产制造类应用开发219页面构建实现能耗数据区域效果需要拖拽仪表盘类控件中的圆环、电、燃气、水控件以及基础控件中的文本控件，设置圆环的背景颜色为蓝色。最终合并成一组并命名为能耗数据。生产制造类应用开发220数据库数据源这里只给报警日志表格控件绑定了数据库数据源，其它控件需要绑定数据源需自行设计数据源类型。根据以下表格数据格式设计数据库表和表格控件属性，可参照任务一中表格数据库数据源绑定和数据库数据源设计方式进行设计。生产制造类应用开发221屏幕适配做好不同屏幕的适配问题，选择的根节配置参数指定长宽为1920px和1080px，样式为全屏为填充。生产制造类应用开发感谢聆听网址：电话：400-620-9999徐工汉云-国家级跨行业跨领域工业互联网平台徐工汉云技术股份有限公司2023年2月运维服务类应用开发224学习目标

了解运维服务类应用需求掌握速度仪表盘控件开发掌握自定义控件绑定数据源技巧225CONTENTS

目录需求分析1226PART01需求分析227汽车数据检测中心大屏系统主要功能是监视汽车的行驶轨迹和各部件的状况。从画面中可以看到可以实时的监控车辆轨道、车辆各个部件的情况、汽车器件报警次数、汽车各维修状况以及汽车当前行驶速度，当鼠标落在地图的哪个省份就会显示当前车辆到达过该省份的次数。需求分析228小结本任务通过构建运维服务类汽车监测数据中心大屏，讲解使用控件编辑器开发仪表盘控件以及对外暴露数据属性，最终将自定义的控件绑定API数据源的全过程。巩固了控件开发方式以及数据源绑定方法。感谢聆听网址：电话：400-620-9999徐工汉云-国家级跨行业跨领域工业互联网平台运维服务类应用开发徐工汉云技术股份有限公司2022年2月231创建App创建一个2D的App，单击“新增App”按钮，弹出“新增App”对话框输入相关信息，这里命名为汽车数据检测中心大屏，如图所示。运维服务类应用开发232运维服务类应用开发构建页面首先创建一个根节点，这样在对整个页面操作时，只需对这个节点进行操作，而不是费劲的选择当前页面的所有元素。233运维服务类应用开发构建页面构建标题部分，选择“素材”→“默认装饰”下的“4#标题”素材拖拽至画布头部区域，添加文本控件在“4#标题”素材之上，编辑文本控件内容为“汽车数据检测中心大屏”，最后将文本控件和“4#标题”素材合并为一组并命名为“标题”。234运维服务类应用开发构建页面构建车辆轨迹部分，找到基础控件中表格控件，拖拽至画布中并配置表格控件相关属性，。添加并编辑文本控件，最后将文本控件和表格控件合并为一组名称为“车辆行驶轨迹。235运维服务类应用开发构建页面构建汽车零件维修情况部分，需要使用到图表控件中柱状图控件和文本控件，将柱状图控件和文本控件拖拽至画布中，配置图表控件相关属性，编辑文本控件内容为“汽车零件维修情况”。236运维服务类应用开发构建页面构建汽车局部监控部分，使用到仪表盘类控件环形仪表盘2控件，将其拖拽至画布中编辑相应配置属性，在环形仪表盘2控件下方添加文本控件，还需要选择环形仪表盘2控件和文本控件，按“Ctrl+C”、“Ctrl+V”复制粘贴三分调整好布局即可。参照效果图编辑控件属性最后将这些控件合并为一组命名为“汽车局部监控”。237运维服务类应用开发构建页面构建全国汽车覆盖面积部分需要使用到中国地图控件，将中国地图拖拽至画布中配置相关属，拖拽文本控件并编辑内容为“全国汽车覆盖面积”，调整它们之间布局效果，并合并为一组命名为“全国汽车覆盖面积”。238运维服务类应用开发构建页面构建汽车报警部分需要使用折线图类控件，选中立体折线图控件并拖拽至画布区域中，添加文本控件编辑内容为“汽车报警”，调整它们之间的布局，最后将文本控件和立体折线图控件合并为一组命名为“汽车报警”。239运维服务类应用开发自定义Speed仪表盘控件使用App开发平台提供的控件编辑器开发Speed仪表盘控件。Speed仪表盘控件是基于ECharts阶段速度仪表盘示例制作的如图所示。240运维服务类应用开发自定义Speed仪表盘控件控件编辑器支持这样的元素渲染，只需要将Option部分复制到控件编辑器的元素渲染编辑区如图所示。241运维服务类应用开发自定义Speed仪表盘控件Speed仪表盘控件按照需求分析需要绑定API数据源实时展示当前汽车速度，需要在控件属性“数据绑定”栏下添加需要对外暴露属性，这里对外暴露speed属，在元素渲染区域还需添加相关代码来实现对外的数据绑定，渲染区域全部代码如下。if

(!cache.htmlView)

{

cache.htmlView

=

document.createElement('div');

cache.htmlChart

=

echarts.init(cache.htmlView);

//

layoutHTML

will

be

called

when

the

data

needs

to

be

drawing

cache.htmlView.layoutHTML

=

function()

{

gv.layoutHTML(data,

cache.htmlView,

false);

cache.htmlChart.resize();

};

}

option.series[0].data[0].value

=

data.a('speed');

cache.htmlChart.setOption(option);

//

html

for

showing

return

cache.htmlView;242运维服务类应用开发自定义Speed仪表盘控件配置Speed仪表盘控件快照，由于通过代码渲染的控件没有控件图标这里需要手动设置图标地址也就是快照地址。单击控件找到“基础”列表下的快照地址配置，快照地址是基于控件编辑器运行环境路径。243运维服务类应用开发自定义Speed仪表盘控件配置完快照之后就可以对控件进行测试了，找到空间编辑器“画面”栏，新建画面，将Speed仪表盘控件拖拽至画面中保存运行监测是否达到效果。测试完毕将Speed仪表盘控件从控件编辑器中导出，单击控件选择“导出”即可完成控件导出。App开发平台导入Speed仪表盘控件只需在“控件管理”菜单下选择“导入”即可实现自定义控件导入244运维服务类应用开发模拟数据为Speed仪表盘控件设计API数据源，控制器层、业务层接口和实现代码如下，最后将API添加至App开发平台。详细代码参见教材。245运维服务类应用开发模拟数据构建汽车速度部分，拖拽自定义Speed仪表盘控件调整布局。配置数据源这里选择API数据源/char/3246运维服务类应用开发配置页面展示选中根节点设置节点属性以适应屏幕的宽度和高度。感谢聆听网址：电话：400-620-9999徐工汉云-国家级跨行业跨领域工业互联网平台徐工汉云技术股份有限公司2023年2月经营管理类应用开发249学习目标

了解经营管理类应用需求掌握控件绑定多种数据源掌握多控件之间的数据交互250CONTENTS

目录需求分析1251PART01需求分析252可点奶茶数据管理平台需要具有预算分配、开销分析、人员出勤记录、品种分类统计、库料管理、热点分析、销量排行等相关功能。数据管理平台需要能直观让用户掌握库存、热点商品、销量排名、人员出勤等情况，在库料管理部分还需能够手动完成补料操作，效果如图所示。工业互联网App定义253小结本任务通过构建经营管理类App构建掌握多种数据源的绑定方式，在单个控件工作的基础上拓展为多个控件之间的数据交互，初步体验了真实项目开发中控件做的处理复杂程度。感谢聆听网址：电话：400-620-9999徐工汉云-国家级跨行业跨领域工业互联网平台经营管理类应用开发徐工汉云技术股份有限公司2023年6月256创建App创建一个2D的App，单击“新增App”按钮，弹出“新增App”对话框输入相关信息，这里命名为可点奶茶数据管理平台。经营管理类应用开发257构建页面可点奶茶数据管理平台页面由头部标题部分、预算开销部分、品种分类统计部分、人员出勤部分、库料管理部分、热点分析部分、销量排行部分构成。首先需要做的是创建一个根节点，设计标题部分需要使用到素材中title素材和文本控件，将对应的控件和素材拖拽到画布编辑使其达到如图效果。经营管理类应用开发258构建页面构建预算开销部分需要使用到雷达图控件，找到图表控件中的雷达图控件将其拖拽到画布中加以编辑静态数据源。经营管理类应用开发259构建页面构建品种分类统计部分需要使用到图表控件中柱状图控件，拖拽组柱状图控件至画布中并编辑静态数据源经营管理类应用开发260构建页面构建人员出勤和热点分析部分需要使用到基础控件中的图表控件和文本控件，拖拽所述控件至画布中编辑属性和数据源。经营管理类应用开发261构建页面构建销量排行部分需要使用到图表控件中的Top5排名柱状图控件、基础控件中的文本控件和不规则图形，将所需控件拖拽至画布中编辑属性。经营管理类应用开发262构建页面构建库料管理部分需要使用图表控件中的基础饼图控件、网页控件中的下拉框和按钮控件、基础控件中的文本控件不规则图形，将所需控件拖拽至画布中编辑属性。经营管理类应用开发263数据模拟静态数据源模拟，这里给预算分配部分的雷达图绑定静态数据源，单击“数据源”选项修改静态数据如下。经营管理类应用开发

{

"value":

[

5000,

14000,

…

],

"name":

"实际开销"

}

]}{

"indicator":

[

{

"name":

"原料食材费用",

"max":

6500

},

{

"name":

"人工费用",

"max":

16000

},…"series":

[

{

"value":

[

4300,

10000,

…

],

"name":

"预算分配"

},264数据模拟数据库数据源模拟，人员出勤和热点分析部分的表格控件绑定数据库数据源。选中表格，单击“数据源”选项，在数据类型下拉列表中选中数据库类型，选择预先准备好的数据库，这里需要注意的是表格的属性需要和数据库中表属性一一对应。单击“编辑”按钮，弹出“编写SQL语句”对话框输入相应SQL语句即可经营管理类应用开发265多控件数据交互回顾需求分析，用户选择不同的耗材，通过耗材类型下拉列表、补材按钮数量、下拉列表可以实现对耗材按量补材功能，最终将数据更新在饼状图。为了实现这个功能需要拖拽所需控件至画布中。经营管理类应用开发266多控件数据交互接下来就是需要考虑如何实现两个下拉框中的数据通过按钮更新到饼状图中去，耗材类型下拉列表中的数据库可以通过两种方式实现，方式一是动态从API数据源获取，绑定的API数据源同柱状图控件的数据源一致但需要经过数据处理，方式二就是使用静态数据源需预先填写好柱状图控件的属性。这里使用静态数据源的方式。经营管理类应用开发[{"name":"吸管","value":"吸管"},{"name":"纸杯","value":"纸杯"},…]267多控件数据交互为了获得下拉框所选中的数据需要为组件添加修改事件，代码的含义就是将下拉框中选中的数据绑定到xg.dataValue的属性中去。方便别的组件后期通过方法获取。同样的道理和耗材类型下拉框一样暴露数据属性方便其它控件获取其选中的值经营管理类应用开发268多控件数据交互补材数量下拉框这里也是使用的静态数据源，数据源格式如下：经营管理类应用开发[{"name":"5","value":"5"},{"name":"15","value":"15"}…]269多控件数据交互最为核心的控件就是补材按钮控件，这个控件需要做的事情是获取先前两个下拉框中选中的数据也就是对外暴露的属性，然后对应的更新饼状图控件中的数据，从而实现多个控件数据交，第一步需要为补材按钮绑定事件代码如下：经营管理类应用开发//获取对应tag的控件varmyBar=view.dm().getDataByTag('mybar')varmySelect=view.dm().getDataByTag('mySelect')varmyInput=view.dm().getDataByTag('myInput')//获取饼状图中的数据对象varbarData=myBar.a('xg.dataValue')varselectData=mySelect.a('xg.dataValue')varinputData=myInput.a('xg.dataValue')varnewBarData={series:[{"name":"吸管","value":"20"},…]}newBarData.series.filter(item=>{if(===selectData){item.value=parse