检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
目录文件详解 i18n.json packageinfo.json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题: 代码结构介绍
静态数据数据集 静态数据录入,支持手工输入和导入Excel/CSV两种方式。 创建数据集 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在主菜单中,选择“数据中心”。 在左侧导航栏中,选择“数据集 > 全部”。 在数据集管理页面,单击“新建数据集”。
删除数据集 数据集删除后,不可恢复,请谨慎操作。 删除数据集 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在主菜单中,选择“数据中心”。 在左侧导航栏中,选择“数据集 > 全部”。 在数据集管理页面,单击待删除数据集中的,选择“删除”。 数据集
前提条件 连接的数据源已创建,如何创建请参见Prometheus数据源。 创建Prometheus数据集 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在主菜单中,选择“数据中心”。 在左侧导航栏中,选择“数据集 > 全部”。 在数据集管理页面,单击“新建数据集”。
上传自定义组件 将自定义组件上传到AstroCanvas中,并在页面中使用。 上传自定义组件 参考登录华为云Astro大屏应用界面中操作,登录AstroCanvas界面。 在主菜单中,选择“我的资产”,进入我的资产页面。 在左侧导航栏中,选择“我的组件”,单击“添加组件”,进入添加组件页面。
checkbox 配置项说明 表1 checkbox配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "checkbox" 配置项类型。 value Boolean 否 value: true 默认值。 name String 是 name: "commProps
select 配置项说明 表1 select配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "select" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name String 是 name:
input 配置项说明 表1 input配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "input" 配置项类型。 subType String 否 subType: "password" 子类型,支持的类型有number、password。
通用配置示例如下,以global_SelectWidget组件为例,设置后效果如图1所示。本示例中的global_SelectWidget为华为云Astro大屏应用系统预置的下拉框组件,可在“我的资产 > 我的组件”中获取。 { type: 'tab', name:
radio 配置项说明 表1 radio配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "radio" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name String 是 name: "commProps
组件自定义事件实现 组件之间的交互,主要包括组件自定义事件和组件响应动作,本章节将为您介绍组件自定义事件的实现方式。自定义事件是指组件作为触发器,当用户操作组件(比如下拉框选中选项)时发出的事件。 注册自定义事件 自定义事件在{widget}.editor.js文件中的event
景是:用户在“下拉选择框”中选择某个告警状态时,通过配置的交互事件将告警状态赋值给全局变量,“多区域折线图”组件呈现的数据来源于封装了华为云Astro轻应用某API接口的数据集,将该接口的入参与全局变量绑定,则“多区域折线图”组件呈现的告警数据会随着全局变量值变化而变化。 如图1
tab 配置项说明 表1 tab配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "tab" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name String 是 name: "commProps
time 配置项说明 表1 time配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "time" 配置项类型。 subType String 否 subType: "date" 子类型,支持的类型有time、date和datetime。 value
list 配置项说明 表1 list配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "list" 配置项类型。 name String 是 name:"intervalColors" 双向绑定list名称。 label Object 否 label:
switch 配置项说明 表1 switch配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "switch" 配置项类型。 value String 否 value: false 默认值。 name String 是 name: "commProps
当系统预置的组件无法满足用户需求时,用户可自定义组件并上传到华为云Astro大屏应用中使用。华为云Astro大屏应用为您预置了一些组件模板(Widget包),您可以基于组件模板开发自定义组件。 获取组件模板包 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 在主菜单中,选择“管理”,进入管理页面。
数据来源于封装了华为云Astro轻应用某API接口的数据集,将该接口的入参与全局变量绑定,则“多区域折线图”组件呈现数据会随着全局变量值变化而变化。 图1 告警监控页面 步骤1 新建数据集 参考华为云Astro轻应用数据源中操作,新建数据源。 图2 新建华为云Astro轻应用数据源
colorpicker 配置项说明 表1 colorpicker配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "colorpicker" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name
arts,请提前了解。 图1 最终呈现效果 开发自定义组件 下载图表模板。 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。 单击页面右上角的“管理”,进入华为云Astro大屏应用管理页面。 在左侧导航栏中,选择“页面资产管理 > 组件模板”。 表1