如何基于页面级的全局变量实现组件交互

AstroCanvas支持设置页面级的全局变量，通过页面组件间的交互，可给全局变量赋值。本章节将以开发一个告警监控页面为例，逐步介绍如何开发一个基于全局变量的交互页面。

场景说明

开发一个告警监控页面，如图1所示，在页面上方下拉框中选择告警状态，可查看各个地区相应状态下的告警数量分布。

实现原理：该场景中将告警状态定义为全局变量，在页面中使用系统预置的“下拉选择框”和“多区域折线图”组件。当用户在“下拉选择框”中选择某个告警状态时，通过配置的交互事件将告警状态赋值给全局变量，“多区域折线图”组件呈现的数据来源于封装了AstroZero某API接口的数据集，将该接口的入参与全局变量绑定，则“多区域折线图”组件呈现数据会随着全局变量值变化而变化。

图1 告警监控页面

步骤1 新建数据集

参考AstroZero数据源中操作，新建数据源。

图2 新建AstroZero数据源
参考登录AstroCanvas界面中操作，登录AstroCanvas界面。
新建转换器。
1. 在主菜单中，选择“数据中心”。
2. 在左侧导航栏中，选择“转换器 > 全部”。
3. 单击“新建转换器”，设置转换器的名称和目录，单击“确定”。
4. 在“function filter(dataset) ”中，输入转换器的数据处理代码，其它参数不做配置，单击“保存”
```
return dataset.result
```
  输入上述转换器的数据处理代码，表示获取“result”数据。
新建数据集。
1. 在左侧导航栏中，选择“数据集 > 全部”。
2. 在数据集管理页面，单击“新建数据集”。
3. 设置数据集名称、选择数据类型、数据源和目录，单击“保存”。
  图3 新建数据集
  - 数据集名称：数据集的名称，用于标识该数据集。本示例配置为getWarnDetailByStatus。
  - 数据源连接：选择1中创建的数据源。
  - 目录：设置数据集的存放目录。
  - 责任人：数据集的创建者。
  - 描述：数据集的描述信息，通常设置为数据集的功能。
4. 配置数据集，单击“保存”。
  图4 设置数据集
  - 应用：选择调用自定义接口所属的应用，本示例选择AstroZero中安装的“告警服务Mock应用”。
    此处的“告警服务Mock应用”仅为示例，在实际使用时，选择AstroZero中已安装的一个应用即可。
  - API接口：API接口的URL，本示例选择“getWarnDetailByStatus”接口。
  - 参数：接口入参，当有入参时，系统会自动展示，需要设置参数默认值等。
    单击“展开”，设置API的参数默认值为变量alarmstatus，并赋予变量的值为1，表示默认筛选告警状态为“已关闭”的告警数据。
```
{
     "statusCode": ${alarmstatus}
}
```
  - 测试API接口：用于测试该是否接口。单击“测试API接口”，“样例报文”中会显示输出结果。
  - 转换器：用于对数据进行转换处理，选择3中创建的转换器。
  - 数据预览：单击“数据预览”，可直观展示经过转换器处理后的样例报文。

步骤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_CST”（地区），Y轴数据拖入“WarnAmount_CST”（告警数量），单击“保存”。
设置完成后，单击页面上方的，保存页面。
保存成功后，单击，预览效果是否符合预期。

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