华为云首页用户手册

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

时间：2023-11-01 16:18:38

Astro轻应用 AstroZero

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

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

新增全局变量“status”，设置默认值为“1”，设置变量说明为“告警服务状态码，1为待派单，2是已派单，3是处理中，4是已关闭”。
图5 设置页面变量
在页面中拖入并设置下拉选择框组件。
1. 从左侧全部组件中，搜索并拖拽“下拉选择框”组件到页面画布中。
  图6 拖入下拉选择框
2. 参考图7，设置占位符为“请选择要筛选的告警状态”。
  图7 设置占位符
3. 在组件上方单击，配置组件数据源为静态数据，单击“保存”。
  在输入数据中，输入如下静态数据示例：
```
{"dataValue": [{"value": "1","label": "待派单"},{"value": "2","label": "已派单"},{"value": "3","label": "处理中"},{"value": "4","label": "已关闭"}]}
```
  图8 配置组件数据源
4. 在组件上方单击，配置组件交互事件。
5. 在作为触发器中，单击“交互事件”，选择“当选中选项时”事件。单击“响应动作”，选择“赋值全局变量”，“赋值到变量”设置为“status”，单击“确定”。单击“完成”，设置后用户在下拉框选择相应告警状态时，全局变量“status”的值会随着进行相应变化。
  图9 配置组件交互事件
在页面中拖入并设置多区域折线图组件。
1. 从左侧全部组件中，搜索并拖拽“多区域折线图”到页面画布中。
  图10 拖入多区域折线图
2. 参考图11，设置组件标题为“告警分布情况”。
  图11 设置组件标题
3. 参考图12，将x轴、y轴的轴标题设置为空。
  图12 设置轴标题为空
4. 在组件上方单击，配置组件数据源。
5. 数据配置中选择“数据集”，选择8配置的“getWarnDetailByStatus”数据集。
  图13 选择数据集
6. 全局变量中选择2配置的“status”，给接口入参“statusCode”告警状态绑定页面全局变量“status”。
  图14 选择全局变量
7. 步骤1 新建数据源中已设置过转换器，这里直接单击“下一步”，不用再添加转换器。
8. 设置多区域折线图数据集展示，x轴数据拖入“hab_RegionName_CST”（地区），y轴数据拖入“WarnAmount_CST”（告警数量），单击“保存”。
  图15 设置数据集展示
设置完成后，单击页面上方的，保存页面。
单击页面上方的，进行页面发布设置。
- 发布链接：单击发布链接后的图标，将显示页面地址，单击该地址进入发布页。
  图16 获取发布链接
  
  单击，可生成新的链接，原链接将不可访问。单击，可复制该链接。
- 版本管理：通过管理页面版本，设置发布具体哪个版本的页面或者回退到具体哪个版本的页面进行开发。更多介绍，请参见管理页面版本。
  图17 版本管理
- 分享码设置：设置页面分享码和分享码有效期，设置后，只能通过分享码来访问页面，提高安全性。更多介绍，请参见如何设置分享码。
  图18 分享码设置
  - ：单击该图标，可查看设置的分享码。
  - 有效期设置：设置分享码的有效期。若不设置有效期，分享码将永久有效。
- 设置Token认证：通过设置Token认证，可对大屏交互时传递的参数进行签名鉴权，保证大屏的URL访问链接的参数不能被篡改，从而提高大屏数据及用户信息的安全性。如何设置Token认证，请参见如何设置Token认证。
  图19 设置Token认证信息
  - ：打开Token认证开关后，Astro Canvas会生成一个Token。单击该图标，可复制Token。
  - 签名地址只允许打开一次：开启后，签名地址仅允许打开一次，再次访问时需要重新获取签名地址。若不开启，不限制访问次数，但支持设置有效期。
  - 有效期设置：设置Token认证有效期。若不设置有效期，Token认证将永久有效。
- 设置内容安全策略：大屏页面以iframe形式嵌入第三方系统时，如果涉及跨域访问，请开启内容安全策略。设置内容安全策略的主要目的是减少和报告XSS攻击，缓解跨站脚本攻击。除限制可以加载内容的域，还可指明哪种协议允许使用，缓解数据包嗅探攻击。如何设置内容安全策略，请参见如何设置内容安全策略。
  图20 设置内容安全策略
  
  开启“内容安全策略”时，若在浏览器无痕模式下预览页面，请确保“阻止第三方Cookie”已关闭，否则无法正常预览页面。
  
  图21 关闭阻止第三方Cookie
打开页面成功发布网址，选择下拉框数据为“已派单”、“处理中”或者“已关闭”，发现多区域折线图数据进行实时更新变化，符合预期。

图22 告警监控页面