# 如何基于页面级的全局变量实现组件交互
华为云Astro大屏应用支持设置页面级的全局变量，通过页面组件间的交互，可给全局变量赋值。本章节将以开发一个告警监控页面为例，逐步介绍如何开发一个基于全局变量的交互页面。
#### 场景说明
开发一个告警监控页面，如[图1]所示，在页面上方下拉框中选择告警状态，可查看各个地区相应状态下的告警数量分布。
实现原理：该场景中将告警状态定义为全局变量，在页面中使用系统预置的"下拉选择框"和"多区域折线图"组件。当用户在"下拉选择框"中选择某个告警状态时，通过配置的交互事件将告警状态赋值给全局变量，"多区域折线图"组件呈现的数据来源于封装了华为云Astro轻应用某API接口的数据集，将该接口的入参与全局变量绑定，则"多区域折线图"组件呈现数据会随着全局变量值变化而变化。
图1告警监控页面   
![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158424457.png)
#### 步骤1 新建数据集
1. 参考[华为云Astro轻应用数据源](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6161.html)中操作，新建数据源。
   
   图2新建华为云Astro轻应用数据源   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158306101.png "点击放大")
   
   
2. 参考[登录华为云Astro大屏应用界面](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6008.html)中操作，登录华为云Astro大屏应用界面。
3. 新建转换器。
   
   1. 在主菜单中，选择"数据中心"。
   
   2. 在左侧导航栏中，选择"转换器 \> 全部"。
   
   3. 单击"新建转换器"，设置转换器的名称和目录，单击"确定"。
   
   4. 输入转换器的数据处理代码，其它参数不做配置，单击"保存"
      ```
      return dataset.result
      ```
      输入上述转换器的数据处理代码，表示获取"result"数据。
      
   
   
   
   
4. 新建数据集。
   
   1. 在左侧导航栏中，选择"数据集 \> 全部"。
   
   2. 在数据集管理页面，单击"新建数据集"。
   
   3. 设置数据集名称、选择数据类型、数据源和目录，单击"保存"。
      图3新建getWarnDetailByStatus数据集   
      ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158424453.png)
      - 数据集名称：数据集的名称，用于标识该数据集。本示例配置为getWarnDetailByStatus。
      
      - 数据源连接：选择[1]中创建的数据源。
      
      - 目录：设置数据集的存放目录。
      
      - 责任人：数据集的创建者。
      
      - 描述：数据集的描述信息，通常设置为数据集的功能。
       
   
   4. 配置数据集，单击"保存"。
      图4设置getWarnDetailByStatus数据集   
      ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158424473.png "点击放大")
      - 应用：选择调用自定义接口所属的应用，本示例选择华为云Astro轻应用中安装的"告警服务Mock应用"。 此处的"告警服务Mock应用"仅为示例，在实际使用时，选择华为云Astro轻应用中已安装的一个应用即可。
        
      
      - API接口：API接口的URL，本示例选择"getWarnDetailByStatus"接口。
      
      - 参数：接口入参，当有入参时，系统会自动展示，需要设置参数默认值等。 单击"展开"，设置API的参数默认值为变量alarmstatus，并赋予变量的值为1，表示默认筛选告警状态为"已关闭"的告警数据。
        ```
        {
             "statusCode": ${alarmstatus}
        }
        ```
        
      
      - 测试API接口：用于测试该是否接口。单击"测试API接口"，"样例报文"中会显示输出结果。
      
      - 转换器：用于对数据进行转换处理，选择[3]中创建的转换器。
      
      - 数据预览：单击"数据预览"，可直观展示经过转换器处理后的样例报文。
       
   
   
   
   
 
#### 步骤2 开发告警监控大屏页面
1. 新建一个空白的大屏页面。 
   1. 在华为云Astro大屏应用界面上方，单击"项目列表"。
   
   2. 在项目列表页面，单击"新建项目"。
   
   3. 输入项目名称，单击"新建"，新建一个大屏\&PC端项目。
   
   4. 在新建的大屏\&PC端项目中，单击"新建页面"。
   
   5. 单击"新建空白页面"，输入页面标题"全局变量示例页面"，单击"新建"。
   
   
   
   
2. 在页面上方单击![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158760609.png)，新建并设置页面级全局变量。
   
   新增全局变量"status"，设置默认值为"1"，设置变量说明为"告警服务状态码，1为待派单，2是已派单，3是处理中，4是已关闭"。
   图5设置页面变量   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123026296.png "点击放大")
   
   
3. 在页面中拖入并设置下拉选择框组件。 
   1. 从左侧全部组件中，搜索并拖拽"下拉选择框"组件到页面画布中。
      图6拖入下拉选择框   
      ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158306033.png "点击放大") 
   
   2. 设置占位符为"请选择要筛选的告警状态"。
      图7设置占位符   
      ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158306041.png) 
   
   3. 在组件上方单击![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002112534904.png)，配置组件数据源为静态数据，单击"保存"。
      在输入数据中，输入如下静态数据示例：
      ```
      [{
                  "value": "1",
                  "label": "待派单"
              },
              {
                  "value": "2",
                  "label": "已派单"
              },
              {
                  "value": "3",
                  "label": "处理中"
              },
              {
                  "value": "4",
                  "label": "已关闭"
              }
          ]
      ```
      
   
   4. 在组件上方单击![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002148213325.png)，配置组件交互事件。
   
   5. 在作为触发器中，单击"交互事件"，选择"当选中选项时"事件。单击"响应动作"，选择"赋值全局变量"，"赋值到变量"设置为"status"，单击"确定"。单击"完成"，设置后用户在下拉框选择相应告警状态时，全局变量"status"的值会随着进行相应变化。
      图8配置组件交互事件   
      ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158306081.png "点击放大") 
   
   
   
   
4. 在页面中拖入并设置多区域折线图组件。 
   1. 从左侧全部组件中，搜索并拖拽"多区域折线图"，到下拉选择框组件下方。
   
   2. 设置组件标题为"告警分布情况"。
      图9设置组件标题   
      ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158306097.png "点击放大") 
   
   3. 在组件上方单击![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002112534904.png)，l配置组件数据。
   
   4. 数据配置中选择"数据集"，选择[4]配置的"getWarnDetailByStatus"数据集。
   
   5. 全局变量中选择[2]配置的"status"，给接口入参"statusCode"告警状态绑定页面全局变量"status"。
      图10选择全局变量   
      ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158424513.png "点击放大") 
   
   6. 设置多区域折线图数据集展示，X轴数据拖入"hab_RegionName_CST"（地区），Y轴数据拖入"WarnAmount_CST"（告警数量），单击"保存"。
   
   
   
   
5. 单击图层，右键设置下拉选择框向上移动一层为多区域折线图的上一层。 
   图11设置图层   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002184041858.png)
   
   
6. 设置完成后，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123286424.png)，保存页面。
7. 保存成功后，单击![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158647057.png)，预览效果是否符合预期。
   
   选择下拉框数据为"已派单"、"处理中"或者"已关闭"，发现多区域折线图数据进行实时更新变化，符合预期。
   
   
 
#### 扩展知识
- [如何设置页面间参数传递](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6174.html)
- [如何在页面URL参数中给全局变量赋值](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6176.html)