AstroCanvas学堂-华为云

ASTRO大屏应用 ASTROCANVAS-如何进行版本回退:操作步骤

操作步骤参考登录AstroCanvas界面中操作，登录AstroCanvas界面。在项目列表的所有项目中，单击页面所在的项目，进入项目。在所有页面中，单击对应的页面，单击“编辑页面”，进入大屏开发页面。在工具栏中，单击，进入页面发布设置。在“版本管理”区域，单击需要回退版本后的，单击“继续编辑”，进行回退。如果回退前希望保存当前页面，请单击“发布新版本”，将当前页面发布为新版本，再单击需要回退版本后的，单击“继续编辑”，进行回退。图1 回退到历史版本图2 提示

ASTRO大屏应用 ASTROCANVAS AstroCanvas学堂

ASTRO大屏应用 ASTROCANVAS-如何在页面URL参数中给全局变量赋值

如何在页面URL参数中给全局变量赋值如何基于页面级的全局变量实现组件交互中实现的场景是：用户在“下拉选择框”中选择某个告警状态时，通过配置的交互事件将告警状态赋值给全局变量，“多区域折线图”组件呈现的数据来源于封装了AstroZero某API接口的数据集，将该接口的入参与全局变量绑定，则“多区域折线图”组件呈现的告警数据会随着全局变量值变化而变化。如图1所示，也可以不使用“下拉选择框”组件，直接在发布的页面URL末尾加上“?全局变量名=值”，给页面全局变量赋值，查看组件的数据变化。图1 在URL参数中给全局变量赋值父主题： AstroCanvas学堂

ASTRO大屏应用 ASTROCANVAS AstroCanvas学堂

ASTRO大屏应用 ASTROCANVAS-如何基于页面级的全局变量实现组件交互:步骤2 开发告警监控大屏页面

步骤2 开发告警监控大屏页面新建一个空白的大屏页面。在AstroCanvas界面上方，单击“项目列表”。在项目列表页面，单击“新建项目”。输入项目名称，单击“新建”，新建一个大屏&PC端项目。在新建的大屏&PC端项目中，单击“新建页面”。单击“新建空白页面”，输入页面标题“全局变量示例页面”，单击“新建”。在页面上方单击，新建并设置页面级全局变量。新增全局变量“status”，设置默认值为“1”，设置变量说明为“告警服务状态码，1为待派单，2是已派单，3是处理中，4是已关闭”。图5 设置页面变量在页面中拖入并设置下拉选择框组件。从左侧全部组件中，搜索并拖拽“下拉选择框”组件到页面画布中。图6 拖入下拉选择框设置占位符为“请选择要筛选的告警状态”。图7 设置占位符在组件上方单击，配置组件数据源为静态数据，单击“保存”。在输入数据中，输入如下静态数据示例： [{ "value": "1", "label": "待派单" }, { "value": "2", "label": "已派单" }, { "value": "3", "label": "处理中" }, { "value": "4", "label": "已关闭" } ] 在组件上方单击，配置组件交互事件。在作为触发器中，单击“交互事件”，选择“当选中选项时”事件。单击“响应动作”，选择“赋值全局变量”，“赋值到变量”设置为“status”，单击“确定”。单击“完成”，设置后用户在下拉框选择相应告警状态时，全局变量“status”的值会随着进行相应变化。图8 配置组件交互事件在页面中拖入并设置多区域折线图组件。从左侧全部组件中，搜索并拖拽“多区域折线图”，到下拉选择框组件下方。设置组件标题为“告警分布情况”。图9 设置组件标题在组件上方单击，配置组件数据。数据配置中选择“数据集”，选择4配置的“getWarnDetailByStatus”数据集。全局变量中选择2配置的“status”，给接口入参“statusCode”告警状态绑定页面全局变量“status”。图10 选择全局变量设置多区域折线图数据集展示，X轴数据拖入“hab_RegionName_ CS T”（地区），Y轴数据拖入“WarnAmount_CST”（告警数量），单击“保存”。设置完成后，单击页面上方的，保存页面。保存成功后，单击，预览效果是否符合预期。选择下拉框数据为“已派单”、“处理中”或者“已关闭”，发现多区域折线图数据进行实时更新变化，符合预期。

ASTRO大屏应用 ASTROCANVAS AstroCanvas学堂

ASTRO大屏应用 ASTROCANVAS-如何基于页面级的全局变量实现组件交互:场景说明

场景说明开发一个告警监控页面，如图1所示，在页面上方下拉框中选择告警状态，可查看各个地区相应状态下的告警数量分布。实现原理：该场景中将告警状态定义为全局变量，在页面中使用系统预置的“下拉选择框”和“多区域折线图”组件。当用户在“下拉选择框”中选择某个告警状态时，通过配置的交互事件将告警状态赋值给全局变量，“多区域折线图”组件呈现的数据来源于封装了AstroZero某API接口的数据集，将该接口的入参与全局变量绑定，则“多区域折线图”组件呈现数据会随着全局变量值变化而变化。

ASTRO大屏应用 ASTROCANVAS AstroCanvas学堂

ASTRO轻应用 ASTROZERO-如何将AstroZero中的大屏项目迁移到AstroCanvas:数据迁移

数据迁移登录AstroZero中的业务大屏界面，导出项目数据。使用华为账号，登录华为云网站，在顶部导航栏右侧单击“控制台”，进入华为云控制台。在左侧导航栏上方，单击，选择服务实例所在的区域项目。单击，在查找框中搜索“Astro轻应用”，单击查找到的结果，进入AstroZero服务控制台。在主页中，单击“进入首页”，进入AstroZero应用开发页面。单击主页中的“业务大屏”，或者左侧导航栏中的“业务大屏”，进入业务大屏界面。图1 单击业务大屏单击待导出项目上的，进入项目发布页面。将鼠标放在对应的版本上，单击。图2 单击下载图标在前端运行包下载页面，运行容器选择“Astro Canvas”，单击“下载”，将项目下载到本地。图3 导出项目在已购买的AstroCanvas中，导入项目。在AstroZero服务控制台的左侧导航栏中，单击“Astro大屏应用”。在已购买的AstroCanvas实例中，单击“进入首页”，进入AstroCanvas界面。在项目列表页面，单击“导入项目包”。图4 导入项目包选择1.h中导出的项目包，单击“打开”。导入成功后，在项目列表中，可查看到已导入的项目。

ASTRO轻应用 ASTROZERO AstroCanvas学堂

ASTRO轻应用 ASTROZERO-如何基于页面级的全局变量实现组件交互:场景说明

场景说明开发一个告警监控页面，如图1所示，在页面上方下拉框中选择告警状态，可查看各个地区相应状态下的告警数量分布。实现原理：该场景中将告警状态定义为全局变量，在页面中使用系统预置的“下拉选择框”和“多区域折线图”组件。当用户在“下拉选择框”中选择某个告警状态时，通过配置的交互事件将告警状态赋值给全局变量，“多区域折线图”组件呈现的数据来源于封装了AstroZero某API接口的数据集，将该接口的入参与全局变量绑定，则“多区域折线图”组件呈现数据会随着全局变量值变化而变化。

ASTRO轻应用 ASTROZERO AstroCanvas学堂

ASTRO轻应用 ASTROZERO-如何基于页面级的全局变量实现组件交互:步骤2 开发告警监控大屏页面

步骤2 开发告警监控大屏页面新建一个空白的大屏页面。在AstroCanvas界面上方，单击“项目列表”。在项目列表页面，单击“新建项目”。输入项目名称，单击“新建”，新建一个大屏&PC端项目。在新建的大屏&PC端项目中，单击“新建页面”。单击“新建空白页面”，输入页面标题“全局变量示例页面”，单击“新建”。在页面上方单击，新建并设置页面级全局变量。新增全局变量“status”，设置默认值为“1”，设置变量说明为“告警服务状态码，1为待派单，2是已派单，3是处理中，4是已关闭”。图5 设置页面变量在页面中拖入并设置下拉选择框组件。从左侧全部组件中，搜索并拖拽“下拉选择框”组件到页面画布中。图6 拖入下拉选择框设置占位符为“请选择要筛选的告警状态”。图7 设置占位符在组件上方单击，配置组件数据源为静态数据，单击“保存”。在输入数据中，输入如下静态数据示例： [{ "value": "1", "label": "待派单" }, { "value": "2", "label": "已派单" }, { "value": "3", "label": "处理中" }, { "value": "4", "label": "已关闭" } ] 在组件上方单击，配置组件交互事件。在作为触发器中，单击“交互事件”，选择“当选中选项时”事件。单击“响应动作”，选择“赋值全局变量”，“赋值到变量”设置为“status”，单击“确定”。单击“完成”，设置后用户在下拉框选择相应告警状态时，全局变量“status”的值会随着进行相应变化。图8 配置组件交互事件在页面中拖入并设置多区域折线图组件。从左侧全部组件中，搜索并拖拽“多区域折线图”，到下拉选择框组件下方。设置组件标题为“告警分布情况”。图9 设置组件标题在组件上方单击，配置组件数据。数据配置中选择“数据集”，选择4配置的“getWarnDetailByStatus”数据集。全局变量中选择2配置的“status”，给接口入参“statusCode”告警状态绑定页面全局变量“status”。图10 选择全局变量设置多区域折线图数据集展示，X轴数据拖入“hab_RegionName_CST”（地区），Y轴数据拖入“WarnAmount_CST”（告警数量），单击“保存”。设置完成后，单击页面上方的，保存页面。保存成功后，单击，预览效果是否符合预期。选择下拉框数据为“已派单”、“处理中”或者“已关闭”，发现多区域折线图数据进行实时更新变化，符合预期。

ASTRO轻应用 ASTROZERO AstroCanvas学堂

云服务器内容精选

AstroCanvas学堂

7*24

备案

专业服务

退订

建议反馈

售前咨询热线