组件-华为云

华为云ASTRO轻应用-在线开发华为云Astro轻应用高级页面自定义组件:操作场景

操作场景当华为云Astro轻应用低代码平台提供的预置高级组件无法满足您的开发需求时，开发者可以自定义组件包，并上传到华为云Astro轻应用中。自定义组件包上传到华为云Astro轻应用中后，可在高级页面中使用。自定义组件的开发流程如下：下载组件模板将华为云Astro轻应用系统预置的模板到本地。开发自定义组件基于下载的模板，在本地根据自身业务需求开发组件。上传组件到组件库并使用组件将开发完的自定义组件上传到组件库，并在高级页面中使用。

华为云ASTRO轻应用为华为云Astro轻应用高级页面添加自定义组件

华为云ASTRO大屏应用-ECharts图表:数据

数据在数据中，配置ECharts组件的数据来源，更多介绍请参见数据接入。与其他组件不同的是，ECharts组件在数据配置流程中没有字段映射，而是直接改变实例化代码块的内容。图11 设置ECharts图表组件数据源将左侧表格字段拖拽到右侧配置中的代码块高亮处，如图12。如果简单的拖拽列方法无法满足需求，可以在代码中用“$data”获取数据配置结果，以javascript代码处理逻辑，如图13。图12 拖拽字段图13 通过“$data”实现

华为云ASTRO大屏应用组件介绍

华为云ASTRO大屏应用-ECharts图表:ECharts组件设置

ECharts组件设置在ECharts组件设置中，可以设置ECharts组件的初始化代码块、实例化代码块、自定义事件和自定义动作。图4 代码设置初始化代码块：初始化代码块输入框是一个javascript的执行环境，该执行环境的目的是调用echarts的init方法创建实例，此处可配置初始化相关的操作，包括echarts的主题等。图5 初始化代码块单击“参数说明”，可查看初始化代码块的参数说明。单击，可复制初始化代码。单击，可最大化初始化代码块页面。实例化代码块：和初始化代码块类似，实例化代码块的目的是构造echarts setOption所需要的option对象（setOption对象平台会自动执行）。华为云Astro大屏应用提供了上百种echarts组件，本质上是不同的实例化代码，这些实例化代码来自echarts官网的demo代码，例如https://echarts.apache.org/examples/zh/editor.html?c=line-simple。如果这些demo不满足您的需求，还可以在echarts开源社区选择合适的demo。在实例化代码块中，还可以实现异步加载和引入第三方库，详情请参见异步加载和引入第三方库。图6 实例化代码块单击“参数说明”，可查看实例化代码块的参数说明。单击，可复制实例化代码。单击，可最大化实例化代码块页面。自定义事件：echarts组件支持自定义扩展事件和交互，来扩展组件在系统中的交互能力。单击“新增自定义事件”，可新增事件。在事件实现中，编辑事件实现的代码，为echarts实例或组件实例的某个动作回调绑定发送事件的方法triggerCurrentEvent。单击“新增字段”，可定义发送事件时携带的参数字段。如何为自定义事件添加交互，请参见echarts组件自定义事件交互设置。图7 自定义事件自定义动作：echarts组件支持自定义动作，来响应事件。单击“新增自定义动作”，可新增动作。在动作实现中，编写触发动作的执行逻辑。入参的echartsInst可以使用echarts的API，widgetInst可以使用华为云Astro大屏应用组件通用的API。单击“新增参数”，可以定义触发动作时入参字段。如何为自定义动作添加交互，请参见echarts组件自定义动作交互设置。

华为云ASTRO大屏应用组件介绍

华为云ASTRO大屏应用-内置API一览表:getMessages

getMessages 一般用于在初始化阶段，获取该组件国际化配置文件中定义的国际化文件内容，推荐配置vue和vueI18n使用，无入参，使用方式参考如下： const i18n = HttpUtils.getI18n({ locale: HttpUtils.getLocale(), messages: thisObj.getMessages() }); getMessages()返回messages-en.json和messages-zh.json两个国际化文件中定义的国际化内容。

华为云ASTRO大屏应用组件内置API

华为云ASTRO大屏应用-内置API一览表:callFlowConn

callFlowConn 监听必要的dom尺寸变化事件，使用方式参考如下： /** * 根据组件配置的数据类型（数据集、桥接器、数据源、静态数据）获取数据，未配置默认调用getMockData * @param {*} connector Connector实例 * @param {*} param 参数, 没有特殊需求可以直接传入 {} ，如果传入 { test: 1 }, 发起请求时请求体会带上 test 的值 * @param {*} callbackFunc 将数据传入回调函数 */ this.callFlowConn(this.connectorIns, param, this.dealRespData.bind(this));

华为云ASTRO大屏应用组件内置API

华为云ASTRO大屏应用-内置API一览表:init

init 组件初始化入口API，以SelectWidgetTemplate组件为例，初始化组件通用能力，负责注册组件事件和组件动作。主逻辑建议如下： init() { this._super.apply(this, arguments); // 组件通用能力构建，调用父类constructor,必须要写 this.render(); // 渲染组件 this.registerWidgetActionAndEvent(); // 注册组件事件和动作 },

华为云ASTRO大屏应用组件内置API

华为云ASTRO大屏应用-内置API一览表:getConnectorInstanceByName

getConnectorInstanceByName 通过Connector名称获取Connector实例，再通过process方法调用接口获得数据。使用方式参考如下： const connectorInst = thisObj.getConnectorInstanceByName('selectDataConnector'); /** * @param renderCbk 成功回调 * @param errCbk 失败回调 */ connectorInst.process(renderCbk, errCbk) 其中，“connectorInst”用来调用数据源数据接口。

华为云ASTRO大屏应用组件内置API

华为云ASTRO大屏应用-内置API一览表:render

render 组件核心渲染API，负责组件的实例化、数据调用及事件、动作的实际实现。主逻辑建议如下： render() { var thisObj = this; var widgetProperties = thisObj.getProperties(); // 获取组件属性 var elem = thisObj.getContainer(); // 获取组件dom，对后续操作dom的逻辑备用 var items = thisObj.getItems(); var connectorProperties = thisObj.getConnectorProperties(); // 获取组件Connector数据 // 监听resize事件, 画布resize时需要重新绘制，如果有其他需要，参数可以传入函数，resize时会调用 this.registerResizeEvent(); },

华为云ASTRO大屏应用组件内置API

华为云ASTRO大屏应用-内置API一览表:getContainer

getContainer 一般用于在初始化阶段，获取组件dom，无入参，使用方式参考如下： var elem = thisObj.getContainer(); var readerVm = new Vue({ el:$("#select", elem)[0], }), getContainer是页面上组件的父容器，具有唯一标识。组件内操作dom的场景必须都加上这个父容器，如上面的代码。

华为云ASTRO大屏应用组件内置API

华为云ASTRO大屏应用-将组件保存为卡片:将组件保存为卡片

将组件保存为卡片参考登录华为云Astro大屏应用界面中操作，登录华为云Astro大屏应用界面。在编辑页面状态下，选中组件，单击右键，选择“保存为卡片”。图1 选择保存为卡片您也可以在“图层”中，将鼠标悬浮在组件上，单击右键选择“保存为卡片”。图2 在图层中将组件保存为卡片在卡片设置中，输入卡片的名称，单击“保存”。图3 设置卡片的名称查看保存的卡片。方式一：在编辑页面“我的卡片”中，查看已保存的卡片。图4 在编辑页面查看保存的卡片方式二：在“我的资产”中，查看已保存的卡片。图5 在我的资产中查看

华为云ASTRO大屏应用组件管理

应用管理与运维平台 SERVICESTAGE-Jenkins自动构建并滚动升级部署到ServiceStage的组件:脚本参数说明

脚本参数说明参数是否必须参数类型描述 region 是 String Region名称。获取方法，请参考参数值获取。 project_id 是 String 项目ID。获取方法，请参考参数值获取。 application_id 是 String 应用ID。获取方法，请参考参数值获取。 component_id 是 String 组件ID。获取方法，请参考参数值获取。 rolling_release_batches 是 int 分批部署批次。 deploy_type 是 String 部署类型。 package表示软件包部署。 image表示镜像部署。 obsutil 否 String 当使用软件包部署如jar包部署时为必选参数，上传jar包到obs的工具安装的绝对路径。例如：/root/tools/obsutil/obsutil_linux_amd64_5.4.6/obsutil。 bucket 否 String 当使用软件包部署时为必选参数，上传到obs的桶路径，格式为obs://{桶名称}，例如：obs://obs-mzc。 obs_jar_url 否 String 当使用软件包部署时为必选参数。软件包上传obs后的链接，格式为obs://{桶名}/{软件包名}。例如，obs://obs-mzc/spring-demo-0.0.1-SNAPSHOT.jar。 machine_image_name 否 String 当使用镜像部署时为必选参数，Jenkins打包构建后生成的镜像，格式为：{镜像名称}:{版本}，例如：java-test:v1。 swr_image_url 否 String 当使用镜像部署时为必选参数，上传到SWR镜像仓库的镜像包路径，格式为：{镜像仓库地址}/{组织名称}/{镜像包名称}:{版本}，其中SWR镜像仓库地址格式为：swr.{区域所属项目名称}.myhuaweicloud.com。 AK 否 String 当使用镜像部署时为必选参数。访问密钥ID，即AK，用于登录SWR镜像仓库。获取方法，请参考访问密钥。 SK 否 String 当使用镜像部署时为必选参数。与访问密钥ID（AK）结合使用的密钥，即SK，用于登录SWR镜像仓库。获取方法，请参考访问密钥。 login_secret 否 String 当使用镜像部署时为必选参数。SWR镜像仓库的登录密钥，用于登录SWR镜像仓库。执行如下命令，返回的结果就是登录密钥： printf "{AK}" | openssl dgst -binary -sha256 -hmac "{SK}" | od -An -vtx1 | sed 's/[ \n]//g' | sed 'N;s/\n//' {AK}、{SK}请替换为已获取到的AK、SK的值。 swr_url 否 String 当使用镜像部署时为必选参数。SWR镜像仓库地址，格式为：swr.{区域所属项目名称}.myhuaweicloud.com

应用管理与运维平台 SERVICESTAGE 使用GitLab对接Jenkins自动构建并滚动升级部署到ServiceStage的组件

应用管理与运维平台 SERVICESTAGE-Jenkins自动构建并滚动升级部署到ServiceStage的组件:配置构建触发器

配置构建触发器配置Jenkins构建触发器。勾选“Build when a change is pushed to GitLab”，保存GitLab webhook URL（配置Gitlab webhook时需使用），然后单击右下角“高级”。选择“Filter branches by regex ”，配置指定分支变更后触发构建任务，示例中的分支名称为main，单击右下角“Generate”生成Secret token并保存，在配置GitLab webhook时需使用。配置GitLab webhook。登录GitLab，进入代码仓库，示例中的仓库名称是“test”，选择settings中的“Webhooks”，URL和Secret token填写1获取到的GitLab webhook URL和Secret token。取消勾选SSL verification的“Enable SSL verification”，单击“Add webhook”。

应用管理与运维平台 SERVICESTAGE 使用GitLab对接Jenkins自动构建并滚动升级部署到ServiceStage的组件

应用管理与运维平台 SERVICESTAGE-Jenkins自动构建并滚动升级部署到ServiceStage的组件:配置流水线脚本

配置流水线脚本流水线脚本是构建时运行的构建命令。选择“流水线”页签，在下拉框选择“Pipeline script”。配置如下所示流水线脚本，示例中使用的是构建jar包场景。请使用您环境下的实际参数替换脚本中的参数变量。脚本参数说明，请参考表1。流水线脚本运行时会调用upgrade.sh。脚本详细说明，请参考upgrade.sh脚本。需要设置脚本文件upgrade.sh为可执行文件。 node { // 定义代码仓库地址，例如：http://10.95.156.58:8090/zmg/test.git def git_url = '{代码仓库地址}' // GitLab凭据id def credentials_id = '{GitLab凭据id}' // git代码仓库分支名称，例如：main def branch_name = '{git代码仓库分支名称}' // maven安装的可执行文件路径，例如 :/root/app/maven/apache-maven-3.8.6/bin/mvn def maven = '{maven安装的可执行文件路径}' // upgrade.sh脚本存放路径，例如：/root/jar/upgrade.sh def upgrade_shell = '{upgrade.sh脚本存放路径}' stage('Clone sources') { git branch: branch_name, credentialsId: credentials_id, url: git_url } stage('Build') { // 构建jar包 sh "'$maven' clean package -Dmaven.test.failure.ignore=true -Dmaven.wagon.http.ssl.insecure=true -Dmaven.wagon.http.ssl.allowall=true" } stage('upgrade') { // 执行脚本，使用构建上传到obs的jar包升级ServiceStage组件，超时时间5分钟 sh "timeout 300s '$upgrade_shell'" } } 表1 流水线脚本参数说明参数是否必须参数类型描述 git_url 是 String GitLab代码仓库地址。 credentials_id 是 String 使用账号密码配置的GitLab凭据id，请参考创建GitLab凭证。 branch_name 是 String GitLab代码仓库分支名称。 maven 是 String maven安装的可执行文件路径，例如：/root/app/maven/apache-maven-3.8.6/bin/mvn。 upgrade_shell 是 String upgrade.sh脚本在Jenkins所在虚拟机上存放的路径，例如：/root/jar/upgrade.sh。脚本内容，请参考upgrade.sh脚本。执行构建并验证构建结果，请参考构建验证。

应用管理与运维平台 SERVICESTAGE 使用GitLab对接Jenkins自动构建并滚动升级部署到ServiceStage的组件

应用管理与运维平台 SERVICESTAGE-使用前准备:资源准备

资源准备创建一个虚拟私有云VPC ，请参考创建虚拟私有云和子网。创建两个处于不同可用区（例如：az1、az2）的CCE集群（例如：cce-az1、cce-az2）。如果只是试用场景，“集群规模”选择“50节点”，“集群master实例数”选择“单实例”即可。请参考购买集群。每个集群中至少包含1个规格为8vCPUs、16GB内存或者2个规格为4vCPUs、8GB内存的E CS 节点。为CCE集群添加节点，请参考创建节点。集群所在VPC为1创建的VPC。创建集群时，需在“集群master实例数”下选择“指定集群master实例分布策略”，选择“自定义分配”将两个集群的master节点分配到不同的可用区。集群中的ECS节点的可用区需要和其所在CCE集群master节点的可用区保持一致。创建用于存储软件包的桶，请参考创建桶。

应用管理与运维平台 SERVICESTAGE 使用ServiceStage基于发布管理实现组件跨可用区搬迁和顺序升级

华为云ASTRO轻应用-设置华为云Astro轻应用高级页面雷达图组件属性:边框

边框设置组件的边框样式，支持全边框和角边框两种。全边框样式：设置组件边框的样式，如实线、点线、虚线和双实线。宽度：设置边框的宽度，单位px。颜色：设置组件边框的颜色。弧度：设置组件边框四个角的弧度，单位px。角边框宽度：设置组件边框的宽度，单位px。长度：设置组件边框的长度，单位px。颜色：设置组件边框的颜色。弧度：设置组件边框四个角的弧度，单位px。边距：设置组件边框和图表之间的间距，单位px。

华为云ASTRO轻应用设置华为云Astro轻应用高级页面预置组件属性

云服务器内容精选

组件

7*24

备案

专业服务

退订

建议反馈

售前咨询热线