华为云用户手册

数据调试 AstroZero管理中心提供了前端调试功能，可以执行部分SQL命令收集信息，便于定位问题。该功能类似MySQL命令行，可对数据进行操作。目前只支持查询数据，获取在查询过程中的执行计划、重建索引、查看索引、清理缓存、统计表记录数量、查看表中元数据、创建、删除、重建、搜索引擎索引，以及查看搜索引擎的索引信息等。 参考登录管理中心中操作，登录AstroZero管理中心。 单击页面右下方的，进入数据调试控制台页面。 控制台页面如图5所示，界面分为多个区域，展示不同的内容。 区域1：数据调试控制台支持的所有操作。 对象管理：关于对象表的操作。 缓存管理：对AstroZero系统的缓存进行管理，主要是清理所有缓存或清理某个特定缓存的命令。 任务查询：对AstroZero的一些历史任务或表数据统计的可用命令展示。 搜索管理：展示Elasticsearch中的可搜索表或字段。 区域2：根据区域1的操作从而展示对应的内容。 单击区域1的“对象管理”，则会在区域2中展示该用户有权限看到的所有表。 单击区域1“缓存管理”，则会在区域2中展示管理缓存相关的命令。 单击区域1“任务查询”，则会在区域2中展示任务管理相关的命令。 单击区域1“搜索管理”，则会在区域2中展示搜索管理相关的命令，支持根据应用进行过滤，默认显示“全部”，即搜索所有应用数据。 区域3：展示命令的说明或提示文字。 双击区域2展示的命令时，会在该区域展示该命令的简单说明或展示一些提示文字。 区域4：操作按钮区域。 单击“执行”（快捷键为Ctrl + Enter），可执行用户在区域5输入的命令。或者选中区域5输入的某个命令，单击“执行选择项”进行执行。命令执行完成后，单击“清除”，可清除执行结果的展示。 区域5：命令输入区，用户可以在该区域进行表数据查询，支持多种表操作的SQL语句。 例如：在单击区域1的“对象管理”时，会在区域2展示所有对象表，单击某个表，便可复制该表名。用户在区域5输入命令时，可快速复制粘贴要查询的表名。且对于区域2展示的所有命令，可通过双击鼠标左键，可直接将命令展示在该区域，然后单击区域4“执行”，执行该命令，减少了用户手动输入命令的动作。 区域6：展示相关命令的执行结果。 区域7：展示系统的发行版本和发行时间。 区域8：记录用户在区域5成功执行的所有命令。 单击该区域的命令，可将选中的命令填充到区域5，单击区域4的“执行”按钮，便可执行该历史命令。 图5 控制台 根据 “支持SQL语句列表”提示，输入SQL查询语句，执行查询。 对象管理中除了系统预置的标准对象、用户定制的自定义对象、视图对象和聚合对象，还有一种系统对象，即AstroZero各项系统功能模块所使用到的对象，如服务编排、脚本。此类对象一般无需关注，若需要定位问题可在数据调试控制台使用SQL语句进行查询。 图6 执行SQL语句查询

开启日志监控 AstroZero提供日志跟踪功能，用户在AstroZero中进行操作时，可开启日志跟踪来下载和后台交互产生的日志。 参考登录管理中心中操作，登录AstroZero管理中心。 单击页面右下方的，进入开启日志跟踪页面。 单击，可以开启十分钟内的AstroZero的后台日志追踪。 如果需要停止跟踪，可单击，将停止追踪且不会获取日志文件。 图3 开启日志跟踪 表2 日志跟踪参数说明 参数 说明 日志级别 日志级别，取值说明如下： 会话级：只打印当前会话的日志。 租户级：打印租户所有会话的日志。 日志类型 日志类型，取值说明如下： 业务日志：输出业务相关的跟踪日志。 完整日志：输出业务日志，以及数据库、中间件等的详细日志，主要用于AstroZero问题定位。 下载日志文件。 单击下载，可下载日志文件。下载后会自动停止跟踪，日志格式为“时间|操作ID|业务部件|动作描述”。 单击，可从新窗口打开日志跟踪页面。 单击，可最小化显示日志跟踪页面。 单击最小化图标后，日志跟踪页面将会被隐藏。在AstroZero管理中心页面的右下角，可以看到日志跟踪剩余时间。单击该时间，将重新弹出日志跟踪页面。 图4 日志跟踪时间

租户看板 告警统计 统计当前环境下，所有的告警信息。 页面访问统计 统计当前环境下，所有页面的访问信息。 API统计 查看API的调用信息，详情请参见表1。 图1 看板API调用统计 表1 API调用统计页面参数说明 区域 参数 参数说明 API性能统计 统计周期 统计的周期。 访问量 统计周期内的所有访问量。 平均时长 统计周期内所有访问的平均响应时长。 异常访问量 统计周期内所有响应状态码为4XX和5XX的访问量。 异常访问平均时长 统计周期内所有响应状态码为4XX和5XX的平均响应时长。 超时(3s)-访问量 统计周期内所有响应时长超过3秒的访问量。 超时(3s)-平均时长 统计周期内所有响应时长超过3秒的平均响应时长。 Apdex性能指数 Apdex（Application Performance Index）表示用户对应用性能满意度的量化值。其计算公式如下： 设定接口响应时延0~1秒为用户满意区间，1~3秒为容忍区间，大于3秒为不可接受区间，此外所有失败的请求均为不可接受的请求，则Apdex=（满意请求数+0.5*可容忍请求数）/总请求数。 响应状态码分布 以饼图的样式统计响应状态码情况，统计数据包括请求成功数、客户端失败数和服务端失败数。 访问性能分布 以饼图的样式统计访问性能情况，统计数据为0~1秒、1~3秒和大于3秒。 访问趋势 请求总数&平均响应时长 请求总数：该账号下应用和BO中，发布的API接口请求总数。 平均响应时长：各时间段的接口平均响应时长。 请求状态分布 各时间段的请求状态分布，如请求成功数、客户端失败数和服务端失败数。 请求时长分布 各时间段的请求时长分布，统计的请求时长为0~1秒、1~3秒和大于3秒。 Top20应用/Top20接口 应用名称（Top20应用的统计维度） 请求的具体应用。 请求接口（Top20接口的统计维度） 请求的具体接口。 调用次数 统计周期内，调用接口的总次数。 客户端失败数 统计周期内，调用接口的客户端失败数。 服务端失败数 统计周期内，调用接口的服务端失败数。 成功率 统计周期内，API接口请求成功率，取值为API接口请求成功数/API接口请求总数。 API接口请求成功数：该账号的应用和BO中，发布的API接口请求成功次数。 API接口请求总数：该账号的应用和BO中，发布的API接口请求总数。 请求TPM TPM（Transaction Per Minute），表示每秒处理的请求数。 平均时延（ms） 统计API的平均时延。 单位：毫秒（ms） P90时延（ms） 响应时延从小到大排列，顺序处于90%位置的值即为P99值。 单位：毫秒（ms） P99时延（ms） 响应时延从小到大排列，顺序处于99%位置的值即为P99值。 单位：毫秒（ms） 若在P99或P90时间内，调用接口还没返回结果，大概率可认为这次请求属于慢请求。 部署统计 查看租户所有的部署统计信息。 图2 租户看板部署统计

开发一个业务场景脚本实例 本小节创建的业务场景脚本相对于开发一个简单脚本实例，具有更为复杂的业务逻辑。 本脚本实例实现的业务场景：根据对象的数据生成资源列表数据，用于前台数据呈现，启用本脚本后，可实现数据导入模板使用。 创建脚本之前，需要先创建脚本中操作的对象ApprovedResource，其字段如表1所示。 表1 对象说明 字段标签 字段名称 字段类型 取值 读写权限 含义 ownerId ownerId 文本 长度：255 全选 资源拥有者ID ResourceName ResourceName 文本 长度：255 全选 资源名称 Type Type 选项列表 枚举值如下： File Folder 全选 资源类型 SubmitDate SubmitDate 日期/时间 不涉及 全选 资源提交时间 ApproveDate ApproveDate 日期/时间 不涉及 全选 资源审批时间 Status Status 选项列表 枚举值如下： Waiting Submitted Approved 全选 审批状态

如何定制已有脚本 您可以全新创建一个脚本，也可以根据业务需要修改已有脚本，如使用如何通过模板进行数据导入的BulkInsert脚本为例。 在以下两种场景下，您需要修改已有脚本： 场景1：在已有脚本基础上新建版本。业务需要，脚本要实现的能力变化，此时您可以基于原有脚本修改，并保存为脚本的新版本。在此场景下，原有脚本作为老版本自动失效。 场景2：在已有脚本基础上新建脚本。您需要开发的新脚本与已有的某个脚本类似，此时您可以基于原有脚本修改，再保存为新的脚本名称。在此场景下，原有脚本仍然有效。新脚本和老脚本也没有关联关系，各自独立。 场景1：在已有脚本基础上新建版本： 根据已有的“BulkInsert”版本1.0.1的脚本 ，开发“BulkInsert”版本1.0.2的脚本。 在应用开发工作台Logic目录下，单击“BulkInsert”脚本。 单击编辑器上方的另存为图标，选择“新建版本”，单击“保存”。 图5 另存为“BulkInsert”脚本 图6 保存新建版本 编辑新脚本版本的内容，修改后单击页面上方，保存修改。 图7 修改版本后保存与启用 测试脚本，确保其运行结果符合预期后，再单击启用脚本。 场景2：在已有脚本基础上新建脚本： 根据已有的“BulkInsert”脚本 ，开发“BulkInsertOther”。 在应用开发工作台Logic目录下，单击“BulkInsert”脚本。 单击编辑器上方的另存为图标，选择“新建脚本”，输入新脚本名“BulkInsertOther”，单击“保存”。 图8 新建脚本 编辑新脚本的内容，修改后单击上方图标，进行保存。 测试脚本，确保其运行结果符合预期后，再单击启用脚本。

测试场景下创建证书和私钥的操作方法 该方法创建的证书通常只适用于测试场景。 执行如下命令生成密钥文件tls.key。 openssl genrsa -out tls.key 2048 命令执行后将在当前目录生成一个tls.key的私钥文件。 生成的密钥格式必须为： ----BEGIN RSA PRIVATE KEY----- …………………………………………….. -----END RSA PRIVATE KEY----- 用此私钥去签发生成自己的证书文件tls.crt。 openssl req -new -x509 -key tls.key -out tls.crt -days 3650 根据提示输入国家、省、市、公司、部门、申请人和邮箱，按回车键确认。 生成的证书格式必须为： -----BEGIN CERTIFICATE----- …………………………………………………………… -----END CERTIFICATE-----

如何通过脚本控制接口访问权限 AstroZero提供了示例自定义接口前置脚本，可以仿造示例代码进行脚本的编写。 图7 创建示例自定义接口前置脚本 您可以在自定义接口前置脚本中进行自定义的权限校验，并根据校验结果返回相应的result值。 export class Output { @action.param({ type: "Number"}) result: decimal.Decimal; } const PASS = decimal.newWithExponent(1, 0); const BANNED = decimal.newWithExponent(0, 0); const FALLBACK = decimal.newWithExponent(-1, 0); 自定义接口前置脚本输出参数result含义如下： PASS--{"result":1}：校验通过，直接放行。 BANNED--{"result":0}：校验不通过，无法调用。 FALLBACK--{"result":-1}：校验通过，但还需要进行后续权限校验。 开发自定义接口前置脚本时，出参可按照示例自定义接口前置脚本代码中的表达式也可自行定义，但必须确保出参为“-1”、“0”和“1”中的某一值，否则作为校验不通过处理。 单击左下角的“服务”，在服务管理页面，单击“编辑”，将校验方式改为“与脚本绑定”，在“前置处理”中选择相应的自定义接口前置脚本。 前置处理：一般是授权处理脚本，在访问自定义接口前，需要进行授权处理。 后置处理：一般是敏感错误信息或者统计日志处理脚本，后置脚本没有返回参数，无论执行成功或失败都不影响自定义接口的请求处理流程。 图8 自定义访问控制 图9 绑定自定义接口前置脚本

支持自动审批 AstroZero支持用户任务自动审批功能，例如设置“主管审核”任务自动审批。在用户任务配置界面，指定该任务具体某一接收人，可使用表达式的形式将任务指派某一用户，在自动审批中进行设置。 流程触发人自动通过：若勾选该选项，任务接收人是流程触发人时，该用户任务会被自动审批。 已审批过该流程的审批人自动通过：若勾选该选项，任务接收人在当前BPM实例中已审批过其他用户任务，则该用户任务会被自动审批。 图1 自动审批设置 当任务接收人设置为“当前泳道”对应的工作队列或用户组时，将无法使用自动审批功能。只有任务接收人设置为某一用户时，才可进行自动审批。 父主题： 深入了解用户任务

高级设置 在高级设置中，选择设置的文本内容，在出现的配置弹窗中，可进行是否加粗、是否倾斜、字号、字体、文本颜色、背景颜色、对齐方式等配置。 图3 编辑器中文本配置 另外，若需要在文本中设置变量，变量值来自文本组件数据桥接器中的配置。若配置为静态数据，变量值取自“outDatas”中配置的数据。 可变参数下标请从0开始，变量样式为“{0}”，预览页面后效果为“变量值”。带转义符“\”的变参不会被替换，例如文本组件内容为“\{1}{1\}{\1}”，预览页面后效果为“{1}{1}{1}”。连续两个转义符时，则第二个转义符失效，变参会被替换，例如文本组件内容为“\\{2}”，预览页面后效果为“\变量值”。 图4 文本中变量配置 图5 预览页面效果

什么是沙箱 沙箱环境（Sandbox）是与开发环境隔离的环境，用户可以在沙箱环境中进行软件测试，也可在开发环境直接进行测试。沙箱是一种特殊的执行环境，能够在不破坏生产环境的情况下测试更改或更新应用程序。AstroZero提供了创建沙箱环境功能，您可根据需要决定是否使用沙箱环境。 在沙箱环境只能进行测试，不具备开发能力。沙箱环境只拥有开发环境的元数据副本，没有数据记录。登录沙箱环境后，可以增加新的沙箱用户，并设置用户密码。新增用户只在沙箱有效，并且只能访问沙箱环境。

属性绑定 除了值绑定外，不同组件还拥有不同的属性，例如禁用、只读、隐藏和必填等。这些属性也可以绑定到数据模型或模型中的某个字段上，类似vue中的v-bind语法。 “模态框”组件默认弹出是不可拖动的，在上例的基础上增加一个按钮，当单击该按钮让模态框变为可拖动的，以此来演示“属性绑定”，如图9所示。 图9 新增一个按钮用来控制模态框“可拖动”属性 新增一个自定义模型“modalDrag”并将该模型与“模态框”组件的“可拖动”属性绑定，如下图所示。 图10 模态框组件属性绑定 与上一个例子类似，在新增的“模态框拖动”按钮的点击事件中，将“modalDrag”设置为true。 图11 设置事件 图12 编辑代码 单击，保存页面后，单击，进入预览页面。在预览界面即可看到模态框第一次弹出时默认不可拖动，关闭模态框单击“模态框拖动”按钮后，模态框再次弹出即为可拖动效果。 图13 属性绑定演示效果

值绑定 值绑定类似vue中的v-model语法，组件上创建双向数据绑定。值绑定会根据组件类型，自动选取正确的方法来更新元素。同时，负责监视各类引起绑定数据变化的事件以更新数据。 为了方便演示说明，新建一个标准页面，向页面中拖动一个“按钮”组件和一个“模态框”组件。将模态框绑定在一个数据模型上，当按钮被单击时模态框弹出，实现组件间通过数据模型交互的效果，如图2。 图2 “值绑定”示例页面 选中“模态框”组件，在右侧属性配置面板配置值绑定，选择一个数据模型进行绑定，此处新建一个自定义模型“modalShow”，如图3，单击“下一步”，再次单击“下一步”，单击“确定”，选中该模型。 图3 新建模型 图4 选择模型 图5 完成值绑定后页面展示效果 支持选择任意类型的模型，进行值绑定，更多标准页面模型内容请参见如何获取后台数据。 选中“按钮”组件，在按钮组件的事件配置面板，为按钮组件添加“点击”事件。 图6 为“按钮”组件添加“点击”事件 在弹出的编辑面板，单击左侧“设置模型实例数据”，将代码粘贴到编辑面板。将模型名称替换为待修改的模型“modalShow”，值设置为“true”。 图7 编辑单击事件 单击，保存页面后，单击，进入预览页面。在预览界面，单击“弹出模态框”按钮，“模态框”组件弹出。 图8 “值绑定”演示效果 以上示例简单说明了，如何通过“值绑定”实现组件间的交互。将组件的值（value）绑定在一个模型上，通过其他组件触发事件，改变绑定数据模型的值。例如，此例中“模态框”组件的值，绑定在“modalShow”模型上，“按钮”组件的点击事件将“modalShow”改变为true，模态框即显示，单击“模态框”关闭按钮“modalShow”模型的值变为false。

数据绑定方式 在标准页面开发界面，选中任意组件，在右侧“属性”页签进行数据绑定。 数据绑定分为值绑定和属性绑定，如图2所示，绑定会在指定组件上，创建双向数据绑定。 值绑定：表单、表格、列表视图对应的数据绑定，以及输入框、下拉框等基础组件对应的value绑定，类似Vue的v-model。 属性绑定：将组件的某个属性，如只读、禁用、必填等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。 图1 数据绑定配置面板

自定义组件结构 自定义组件包，目录结构如下。 // 组件目录结构 my-package.zip ├── components | └── my-component // my-component 组件 | ├── custom-property-editor // 自定义属性编辑控件（可选） | │ └── index.js // | ├── custom-panel // 自定义属性面板（可选） | │ └── index.js // | ├── design-time // 组件设计态代码（可选） | │ └── index.js // | ├── resources // 组件图片资源（可选） | │ └── default.png // | ├── index.js // 组件运行态代码 | ├── my-component.json // 组件定义文件 ├── manifest.json // 组件清单文件 └── README.md // 组件包说明文件 组件zip包的目录及文件的名称不能是中文，且编译后的组件包大小应在1M以内。 组件名遵循Vue组件命名，并且要在当前应用中唯一。您可参考Vue框架指南定义Vue组件代码，并参考Vue组件打包指南对Vue组件进行打包，打包后才能使用。 表1 组件包文件说明 目录/文件 是否可选 描述 custom-property-editor/index.js 可选 自定义属性的编辑控件。 custom-panel/index.js 可选 自定义属性的面板。 design-time/index.js 可选 组件设计态。 resources目录 可选 组件相关静态资源，如组件图片。 index.js - 组件运行态。 my-component.json - 组件定义文件。 组件包样例。 单击链接，可下载样例包。 图1 目录格式 组件描述文件。 组件描述文件test-project.json是自定义组件配置面板的规格文件，用于校验和辅助编写自定义组件配置面板json文件。该文件编写需遵循JSON Schema规范，以便于与主流的编辑器（vscode、atom、sublime text和webstorm）集成。 组件描述文件在插件包位置如下： 图2 组件描述文件 组件描述文件，既可以在插件包开发时修改，也可以在插件包编译以后修改。编译之后，组件描述文件的位置如下所示。 图3 编译后的组件描述文件位置 图4 组件描述 样例代码： { // 下面的属性会用于页面组件右侧属性中 "name": "my-component", "title": "%component.title%", "description": "%component.description%", "category": "add-on", "icon": { "default": "./resources/default.png", "hover": "./resources/hover.png" }, // ... 此处省略了组件的其他属性 } 表2 组件约束 参数名 功能 限制 描述 name 组件名 需要以英文字母开头，支持数字与特殊字符“_”、“-”，不支持中文，长度在64字符以内。 建议由厂商名_组件名_版本号组成，例如aaa_img-button_1.1.1。 组件名会存放在界面元数据的type中，如type: "my-component1"。 配置文件中的名称，用于后台元数据存储、解析等。 zip包名应该与name值保持一致，例如此处name为img-button，zip包名必须为img-button.zip。 title 组件别名 建议简短并能展示组件特性，长度在100字符以内。 组件别名，会显示在标准页面开发界面左侧“组件”页签下的扩展组件中，建议简短并能展示组件特性。 description 组件描述 长度在200字符以内。 当鼠标悬停时，展示的组件描述信息。 category 组件分类 使用平台提供的组件分类。 为了保持界面构建器组件分类一致性，请使用平台提供的组件分类，具体请参考表3。 icon 组件图标 png格式，包括2个（未选中时和选中时），每个png的大小在16K以内。 在页面中展示的图标，自动压缩到40*40。 其他 包大小 编译后的组件包大小，需要在1M以内。 - 表3 组件分类 平台分类 说明 navigation 导航组件，例如菜单、工具栏或侧栏。 data 数据组件，可以查看和/或编辑应用程序中的数据，例如Form、Table或List。 common 通用组件，例如标签、图片、标题或段落。 container 容器组件，可以包含其他组件的容器。例如，栅格布局组件Row/Col、流式布局组件、Panel、Tabs、Collapse或WidgetContainer。 input 显示和编辑实体属性，例如文本框、日期选择器。 file 文件处理组件。例如，文件上传/下载组件、图片浏览组件或PDF预览组件。 button 触发动作的按钮，例如保存按钮、页面跳转按钮。 report 聚合数据并以表格或图表的形式显示，例如图表、透视表。 widget 业务卡片。 add-on 扩展组件。

前提条件 已下载之前设计的Chart包。 在AstroZero开发环境的Native Service配置页面，选择“导航”。 在“Chart设计”页签版本列表区域，单击需要导出的Chart后的导出按钮。 图1 导出Chart包 操作列按钮分别提供编辑Chart包、修改Chart包状态（单击后，Chart包状态是“Published”，无法再编辑该Chart包。单击后，Chart包状态是“Draft”，可编辑该Chart包。该界面不提供发布功能，实际发布要去CCE部署和发布）、预览Chart配置、导出Chart包、克隆已有Chart包配置和删除功能。

响应式组件开发基本原则 组件的响应式设计，是高级页面适配多终端的重要前提。为确保自定义组件能够自适应不同分辨率设备，在组件开发中用户需要遵从响应式设计的基本原则。 根据内容设计。 不专注于特定屏幕宽度，而是专注于内容设计，当屏幕越小或浏览器窗口越窄时，内容所占的垂直高度越来越多，内容就要向下方自然延伸。建议从小屏幕开始，逐步设置断点（例如设备宽度320px、768px、1024px），针对不同设备进行设计，形成流动布局。 针对复杂情况，可以使用 CSS 3的@media查询。针对不同的终端类型和不同屏幕分辨率的设备，定义不同样式，选择应用不同的 CS S规则。只有当该设定媒体查询与正在使用的设备匹配时，其对应的CSS规则才起作用。 CSS语法如下： @media mediatype and|not|only (media feature) { CSS-Code; } 其中，参数说明如表1所示。 表1 @media语法参数说明 参数 值 说明 mediatype all 用于所有设备。 screen 用于电脑屏幕、平板电脑、智能手机等。 print 用于打印机和打印预览。 media feature aspect-ratio 定义输出设备中，页面可见区域宽度与高度的比率。 max-width 定义输出设备中，页面最大可见区域的宽度。 max-height 定义输出设备中，页面最大可见区域的高度。 min-width 定义输出设备中，页面最小可见区域的宽度。 min-height 定义输出设备中，页面最小可见区域的高度。 设置示例：对页面宽度不同的设备，设定不同背景颜色。 /*媒体查询*/ /*页面宽度大于1200px 时，背景颜色为蓝色，主要用于大屏设备*/ @media screen and (min-width: 1200px) { body { background-color:blue; } } /*页面宽度在992px和1200px之间，背景颜色为红色，用于中等屏幕PC端*/ @media screen and (min-width: 992px){ body { background-color:red; } } 避免固定尺寸。 使用像px这样的绝对单位，来指定元素的宽高、边框和字体大小等，固定宽度容易破坏响应式布局。为了布局更加灵活，推荐使用百分比、em或rem等相对单位，这样可以保证浏览器字体大小调整和缩放时，能正常显示。常用相对单位，如表2所示。 表2 常用相对单位 单位 说明 em 在font-size中，使用相对于父元素的字体大小，在其他属性中使用相对于自身的字体大小，如width。 rem 相对根元素的字体大小。 ch 相对于数字“0”的宽度。 ex 相对于字符“x”的高度。 lh 相对于元素line-height计算值。 最大和最小值。 对于大屏页面和移动端，内容扩充占满整个屏幕宽度并不总是适用的。展示同样的内容，手机端可能更适宜充满屏幕宽度，而大屏则需要在宽度上留出一定边界，使得布局上更加美观。所以，设定最大值或最小值，可以帮助您设计更为合理的布局。例如，组件宽度设定100%，最大宽度设定1024px，那么内容扩充的最大宽度即为1024px，当屏幕宽度超出1024时，内容在宽度上不会再继续扩展。 嵌套对象。 对于关系紧密的多个元素，采用相对位置会使得元素难以控制。此时，可以考虑放置于同一容器中集中管理。在容器内部，可以考虑采用绝对单位固定其关系，这对于不需要扩展的按钮等元素来说非常有效。 图片的自适应。 自适应组件设计还需要满足图片的自适应，可以使用max-width，对图片宽度进行限制，确保图片宽度不会超过浏览器窗口或容器可视部分的宽度。 移动优先。 通常来说，移动端屏幕较小、视图简单，而大屏空间大、呈现更为复杂和多样。那么，从移动端小屏幕设计入手过渡到大屏幕设计，在开发中逐步增加CSS的复杂度，通过补充设计的方式逐步丰富布局。这样，通过移动优先，可以更轻松地开发响应式布局。

使用说明 连接器图元中有一种特殊的图元，用于对接开天 集成工作台 ，调用开天集成工作台上已有的API。在服务编排中，如何使用连接器图元的更多介绍，请参见连接器图元。 开天集成工作台是面向应用开发者和API开发者，提供基于元数据的可扩展的集成框架，打造开放、共生、智能、协同的技术标准体系，从而降低应用间的集成工作量，并沉淀多种集成资产，如连接器、领域信息模型资产等的平台。更多相关介绍，请参考开天集成工作台产品文档。 该能力为白名单特性，需要联系后台管理人员开通后方可使用。

调试事件 打开一个标准页面。 图1 标准页面实例 选择一个组件，例如“上传”组件，在右侧区域切换到“事件”页签，单击“文件上传”事件后的“+”，进入“上传”事件的编排页面。 图2 单击文件上传后的加号 在代码编辑区域，使用“debugger” 语句设置断点，单击“创建”。 图3 使用“debugger”设置断点 返回标准页面开发界面，单击，保存标准页面后，单击，预览标准页面。 在弹出的预览页面，按“F12”或者“Ctrl + Shift + I”，开启浏览器调试工具。 在“Console”页签，查看日志相关信息。在“Network”页签，查看网络请求信息。 图4 “Console”页签查看日志相关信息 图5 在“Network”页签查看网络请求信息 单击上传按钮上传文件，由于之前在上传事件的自定义JS代码中使用“debugger” 语句设置断点，因此事件代码在执行到debugger语句时会停止执行。 按“F8”可跳转下一个断点，按“F10”可跳转下一行，根据相关数据判断页面逻辑是否正确执行。 图6 调试js代码

属性 在属性中，设置基本折线图组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

场景说明 根据对象的数据生成资源列表数据，用于前台数据呈现，启用本脚本后，可实现数据导入模板使用。 创建脚本前，需要先创建脚本中操作的对象ApprovedResource，其字段如表1所示。 表1 对象说明 字段标签 字段名称 字段类型 取值 读写权限 含义 ownerId ownerId 文本 长度：255 全选 资源拥有者ID ResourceName ResourceName 文本 长度：255 全选 资源名称 Type Type 选项列表 枚举值如下： File Folder 全选 资源类型 SubmitDate SubmitDate 日期/时间 不涉及 全选 资源提交时间 ApproveDate ApproveDate 日期/时间 不涉及 全选 资源审批时间 Status Status 选项列表 枚举值如下： Waiting Submitted Approved 全选 审批状态

绝对布局高级页面 创建绝对布局类型的高级页面。 参考登录经典应用设计器中操作，登录经典版应用设计器。 在模块树中，将鼠标放在某个文件夹上，单击加号，选择“高级页面”。 设置高级页面标签和名称，布局类型选择“绝对布局”，单击“添加”。 图1 新建绝对布局类型高级页面 开发绝对布局类型的高级页面。 以开发如下所示高级页面为例，向您介绍绝对布局类型高级页面中组件的布局方法。 图2 绝对布局类型高级页面组件布局示例 如上图所示，示例页面中包含文本编辑、基本柱图和多区域折线图三个组件。 在高级页面右上方，单击，设置背景图片。 图3 设置页面背景色示例 查找并拖入该页面中包含的组件，通过拖拽进行初步位置、大小调整。 图4 拖拽所需的组件到画布中 设置文本编辑组件内容为“绝对布局类型高级页面”，字号为“大号”。 图5 设置文本编辑组件内容 通过组件属性，精确设置组件大小。 本例中，设置组件宽度为600px、高度为350px。 图6 精确设置组件大小 复制组件。 将上图左侧组件逐个复制，并将其拖拽到右侧，通过对齐提示线将其与左侧组件对齐。 图7 复制组件 单击页面上方的，保存页面。 单击，预览高级页面，查看当前页面在运行态的效果。 图8 预览高级页面

流式布局高级页面 在流式布局中，拖拽到页面中的组件，将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。 创建流式布局类型高级页面。 参考登录经典应用设计器中操作，登录经典版应用设计器。 在模块树中，将鼠标放在某个文件夹上，单击加号，选择“高级页面”。 设置高级页面标签和名称，布局类型选择“流式布局”，单击“添加”。 图9 新建流式布局类型高级页面示例 绝对布局类型高级页面与流式布局类型高级页面不同之处。 在流式布局类型高级页面中，不可拖拽组件位置和大小，同样在“组件属性设置”栏中，也没有位置相关的设置选项。因为流式布局下组件将按照从上到下、从左到右的顺序依次排列。 流式布局类型高级页面的画布划分为12列，新拖入的组件默认宽度为100%，即占据12列。 也可以通过拖拽组件最右侧边框，调节其所占列数。 图10 流式布局中调整组件宽度示例 当原上下排布的多个组件所占列数之和小于12时，会自动调整到同一行。如下图所示，三个组件的所占列数分别调整为4，则本例中三个组件将会按照从左到右的顺序依次排布。 通过拖拽的方式，调整组件上下、左右的排布次序。 图11 调整组件上下、左右的排布次序示例 流式布局类型高级页面，在高级页面工具栏中新增悬浮模式，开启此模式后拖入的组件不再按照从上到下、从左到右的顺序依次排列，可以设置其相对位置。 图12 悬浮模式示例 上图中标注说明如下： 标注1：在高级页面工具栏中开启悬浮模式。 标注2：拖入新组件。 标注3：悬浮模式下，组件相对位置设置选项。 相对定位 Screen：该组件基于当前视图的相对位置。 Layout：该组件基于当前布局的相对位置。 Widget：该组件基于其他组件的相对位置。 组件位置：设置相对定位的具体方位，共9个设置项。 显示顺序：当组件出现堆叠时，可以设置组件的显示顺序，设置值越大，显示越靠前。 最大高度：设置该组件的最大高度，单位为px或%。 宽度：设置该组件的宽度，单位为px或%。

高级设置 在高级设置中，可设置图片填充类型。 图3 高级设置 图4 图片设置页面 图5 上传图片/视频 单击“选择图片”，在页面单击目录后的和，可管理图片目录。单击“上传图片/视频”，可进行上传操作。 选择“填充”表示图片不保证保持原有比例，图片拉伸填满整个容器。 选择“包含”表示图片保持原有尺寸比例，可能会在容器内留有空白。 选择“覆盖”表示图片表示原有尺寸比例，宽高至少有一个和容器一致，可能会让图片部分区域不可见。 选择“无”表示图片保持原有尺寸比例，同时保持图片原始尺寸大小。

属性 在属性中，设置图片组件的位置、边框、连接器等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。 自定义属性列表：显示组件的自定义属性。 图片地址：直接输入图片地址，来展示图片。 连接器设置 使用连接器：是否使用连接器。 选择连接器类型：选择有存储功能的，支持OBS、MINIO和对象存储代理。 选择连接器：选择具体的连接器实例。 选择桶：连接器的存储桶。 使用相对地址：使用图片的相对路径。

常见错误 变量赋值错误？ 请检查输入参数的类型与定义是否匹配，必要时进行类型转换。 变量结构错误？ 请检查输入参数的结构（属性名、取值类型）与目标结构是否一致。当出现大段JSON报错信息时，可借助JSON Viewer或在线JSON格式化工具进行对比。 没有走指定分支？流程意外终止？ 由于流程的结束是隐含的，当没有下一步的内容时流程即结束。因此，在排他网关里如果没有设置默认分支，当所有分支的条件都不满足时，流程即进入结束状态。

操作步骤 参考登录经典应用设计器中操作，登录经典版应用设计器。 打开某个BPM，单击编辑器上方的“运行”按钮，运行BPM，模拟与BPM的交互。 交互完成后，需要确认步骤操作的结果是否符合预期。 单击BPM编辑器页面右上方的“跟踪”，打开“日志跟踪器”页面。 在“日志跟踪器”页面，查看BPM执行的每一步的详细信息，例如查看变量传递是否符合预期。 图1 日志跟踪器 日志跟踪器界面分为两部分，即搜索框和流程日志跟踪记录表格。 搜索框 图2 搜索框 流程切换：用户可以根据时间筛选曾启动过的流程，每个流程的跟踪信息只保存半个小时。 搜索框：根据流程跟踪信息进行搜索。 下载：将当前完整的流程日志，以文件形式下载到本地，便于保存或查看。 表格：日志跟踪器表格记录了BPM流程流转的日志。其中包含时间戳、所属模块的类型、所属模块的名字、具体操作的图元类型、图元名称以及该操作的描述。模块在执行子流程时，会切换为子流程的类型和名称。 若不符合预期，则重新返回BPM修改，重复 2 。

如何设置数据系列 选中水位图组件，单击鼠标右键选择“高级设置”。 展开数据系列配置，单击旁边的“+”，添加数据系列。 在右侧“数据”页签，配置该数据系列的数据。 例如，在使用系统预置的静态数据基础上，添加如下加粗代码，配置新增数据系列的数据。也可以使用“动态数据”调用后台接口URL返回如下结构模型数据。 图4 新增数据系列 { "resCode": "0", "resMsg": "成功", "result": [{ "dataValue": [{ "name": "报警处理率", "value": [{ "value": 0.65, "name": "" }] }, { "name": "命中率", "value": [{ "value": 0.15, "name": "" }] } ] }] } 配置添加的数据系列图表位置、图表形状等。 设置完成后，单击“确定”。

属性 在属性中，设置基本饼图组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

异常处理 当数据源类型选择的是ROMA时，配置完数据接入后，MQS平台收不到消息，业务设置的EventTrigger没有拉起服务编排。现象、原因分析以及解决方法如下： 问题现象：ROMA消息轨迹是灰色的，可能是MQS服务地址配置错误或者没有配置。 解决方法：检查iotgateway容器的“roma-server”参数是否配置。若没有配置，请配置该参数或联系运维添加正确的“roma-server”地址（端口为“9776”），确认网络正常以及MQS服务器正常，兼容客户端版本。 问题现象：ROMA消息轨迹是红色的，则可能是MQS的source定义错误。 解决方法：在ROMA Connect平台查看应用ID和对应的密钥是否一致，查看该应用是否订阅了主题。配置错误时会导致鉴权失败。 问题现象：ROMA消息轨迹是绿色的， 表示MQS接收成功，并成功发送到Kafka，AstroZero也收到了对应的消息，但是可能没成功拉起服务编排。 解决方法：查看iotgateway的“flume.log”日志，确认MQS是否接收成功，通过“kafka-console-cumer”确认消息是否转换成功，通过AstroZero的日志跟踪功能或者AstroZero后台日志确认（日志关键字为“OnEvent”）平台是否收到事件。如果没有对应的服务编排或者脚本日志，可以确定服务编排未拉起，联系华为工程师解决。

排他网关 排他网关用来在流程中，实现一组分支的唯一决策。系统将按照“条件顺序”评估流出网关的分支，流程会执行第一个连线条件被评估为true（当多个条件为true时，将执行第一个决策）的分支，并且不再继续评估下面的分支。如果所有分支条件决策都为false且该网关定义了一个默认的连线，那么该默认分支将被执行。如果没有可到达的分支，抛出异常，流程被中断，在工作流设计上应避免这种情况发生。 图1 排他网关配置页面 图2 分支连线配置