云服务器内容精选

华为云首页用户手册

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学堂