华为云首页用户手册

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

时间：2024-11-06 10:52:56

ASTRO大屏应用 ASTROCANVAS AstroCanvas学堂

步骤2 开发告警监控大屏页面

新建一个空白的大屏页面。
1. 在AstroCanvas界面上方，单击“项目列表”。
2. 在项目列表页面，单击“新建项目”。
3. 输入项目名称，单击“新建”，新建一个大屏&PC端项目。
4. 在新建的大屏&PC端项目中，单击“新建页面”。
5. 单击“新建空白页面”，输入页面标题“全局变量示例页面”，单击“新建”。
在页面上方单击，新建并设置页面级全局变量。

新增全局变量“status”，设置默认值为“1”，设置变量说明为“告警服务状态码，1为待派单，2是已派单，3是处理中，4是已关闭”。

图5 设置页面变量
在页面中拖入并设置下拉选择框组件。
1. 从左侧全部组件中，搜索并拖拽“下拉选择框”组件到页面画布中。
  图6 拖入下拉选择框
2. 设置占位符为“请选择要筛选的告警状态”。
  图7 设置占位符
3. 在组件上方单击，配置组件数据源为静态数据，单击“保存”。
  在输入数据中，输入如下静态数据示例：
```
[{
            "value": "1",
            "label": "待派单"
        },
        {
            "value": "2",
            "label": "已派单"
        },
        {
            "value": "3",
            "label": "处理中"
        },
        {
            "value": "4",
            "label": "已关闭"
        }
    ]
```
4. 在组件上方单击，配置组件交互事件。
5. 在作为触发器中，单击“交互事件”，选择“当选中选项时”事件。单击“响应动作”，选择“赋值全局变量”，“赋值到变量”设置为“status”，单击“确定”。单击“完成”，设置后用户在下拉框选择相应告警状态时，全局变量“status”的值会随着进行相应变化。
  图8 配置组件交互事件
在页面中拖入并设置多区域折线图组件。
1. 从左侧全部组件中，搜索并拖拽“多区域折线图”，到下拉选择框组件下方。
2. 设置组件标题为“告警分布情况”。
  图9 设置组件标题
3. 在组件上方单击，配置组件数据。
4. 数据配置中选择“数据集”，选择4配置的“getWarnDetailByStatus”数据集。
5. 全局变量中选择2配置的“status”，给接口入参“statusCode”告警状态绑定页面全局变量“status”。
  图10 选择全局变量
6. 设置多区域折线图数据集展示，X轴数据拖入“hab_RegionName_ CS T”（地区），Y轴数据拖入“WarnAmount_CST”（告警数量），单击“保存”。
设置完成后，单击页面上方的，保存页面。
保存成功后，单击，预览效果是否符合预期。

选择下拉框数据为“已派单”、“处理中”或者“已关闭”，发现多区域折线图数据进行实时更新变化，符合预期。