构建可视化页面的基本流程¶

本指南旨在帮助应用开发人员快速掌握在 DTV 中构建单页应用的核心流程，涵盖准备、搭建、发布到维护的页面生命周期。

准备阶段：基于设计稿进行需求分析，完成搭建方案设计和资源准备。
搭建阶段：在 DTV 创建页面，为页面添加和配置导航器、画布、组件，以及三者之间的联动关系。
发布阶段：对搭建完成的页面进行测试，测试无误后发布并提供给终端用户。
维护阶段（可选）：在发布后根据业务需要，对页面内容进行调整，包括回滚历史版本和在线编辑。

开始之前，确保已阅读单页应用概述，以便更好地理解后续的流程和操作。

准备阶段¶

作为应用开发人员，在实际创建页面前，你已获得页面的设计稿。你需要对目标页面进行系统化的需求分析、准备数据和资源，为后续搭建工作扫清障碍。

步骤 1：需求分析与方案设计¶

在动手创建之前，请基于设计稿或需求文档，系统性地分析页面构成，明确以下关键点：

页面结构规划：
- 识别页面需要展示的导航器数量，以及导航器需要展示的名称和选项。
- 识别页面需要拆分的画布数量。例如，为“总览”、“详细分析”、“地理分布”等不同视角分别创建画布，终端用户可通过导航器切换画布。
- 识别每一画布内的图层数量。通常底层用于放置背景地图或静态图片，上层用于展示动态数据组件。
内容与数据规划：
- 列出所有需要的组件及其对应的数据源。
- 设计联动关系：设计组件间、组件和页面导航器之间的关联关系，例如时间筛选器可同步影响所有指标。

步骤 2：数据准备¶

数据是可视化的核心，请确保数据源就绪且可用。

创建与检查数据源：
- 对于静态数据：将静态数据整理成 CSV 格式文件，在 DTV 中心 > 数据源 中新建 Static Data 类型数据源，上传 CSV 文件。
- 对于外部动态数据：在 DTV 中心 > 数据源 中新建 Rest API 类型数据源，将第三方系统或应用中的数据通过 Rest API 集成至 EnOS。
- 对于 EnOS 内置数据：确保所需资产模型、测点、指标等已就绪。更多信息，参见使用 TSDB 数据源、使用 CDS 数据源和使用指标管理数据源。
定义数据集（可选）：如果默认数据结构不符合组件要求，可在数据集中定义请求参数和返回结构，通过 JavaScript 脚本对数据进行转换、聚合或计算。
数据验证（可选）：在数据集配置界面，预览和调试数据返回结果，确保字段和值符合预期。

步骤 3：素材准备¶

整理页面所需的所有静态素材，确保设计与开发无缝衔接。

根据设计稿，识别出所需的背景图片、图标、装饰元素等。
建议设计师针对需要展示的屏幕类型优化素材尺寸，例如适用于大屏背景图片分辨率通常为 1920*1080。
考虑页面在不同分辨率及异形屏上的展示效果，单页应用图层的自适应效果可协助实现整体适配。

完成以上准备，即可进入核心的搭建阶段。

搭建阶段 ¶

搭建一个单页应用的流程如下：

新建单页应用：在一个文件夹内创建页面，配置页面的基础信息，如页面所属的标签、响应模式、主题等。
配置导航器：为页面添加导航器，为用户配置筛选数据和切换页面的功能入口。
配置画布、图层和面板：在页面添加画布和图层，配置画布背景、图层
配置组件：在每一图层的面板上添加组件，并配置每个组件的数据、样式、交互等。
配置关联：配置导航器和画布之间的关联关系，以及导航器选项与组件数据之间的关联关系。

步骤 1：新建单页应用¶

新建页面：你可以选择从头新建一个空白页面，或基于模板新建页面。
配置基础信息：配置页面的基本信息，包括页面名称、分组、文件夹、响应模式，主题等。
选择数据集（可选）：为页面选择数据源和数据集，在本页面的导航器和组件中可快速选用这些数据集。
选择组件模板（可选）：为有权限编辑该页面的终端用户指定组件模板文件夹。当终端用户在线编辑页面时，仅可查看和使用指定文件夹里的组件模板。

步骤 2：配置导航器¶

添加导航器：在 导航配置 步骤中为页面添加导航器，用于切换画布和筛选数据。
配置导航器：依次配置每个导航器的数据来源、展示选项和选择方式等。

步骤 3：配置画布、图层和面板¶

添加画布：在创建页面时默认创建一个单图层画布，你可以根据需要，在 画布配置 步骤的左侧 大纲树 中添加画布。
配置画布：依次配置每个画布的名称、背景等。
添加图层：创建画布时，已默认创建 1 个或 2 个图层。如有需要，可以为画布添加其它图层。
配置图层和面板：依次配置每个图层的名称和布局，以及图层上每个面板的背景、嵌入内容等。

步骤 4：配置组件¶

添加组件：在 画布配置 步骤的左侧 组件库 中添加组件到图层的面板中。
配置组件：为已添加的组件配置数据、样式、过滤器和其它交互。

步骤 5：配置联动¶

如需在页面中展示数据联动效果，你可以在 关联配置 步骤中，为导航器添加以下联动关系：

关联导航器和画布：当终端用户在导航器中指定了选项，且任一画布的属性值与选项中的值一致时，展示对应的画布。
关联导航器和组件：当终端用户在导航器中指定了选项，组件将展示与选项中的值一致的资产数据。

发布阶段¶

页面搭建完成后，需进行最终验证并交付使用。

步骤 1：预览测试¶

选择右上角的预览按钮，模拟终端用户的视角，全面测试页面的功能、交互和显示效果。

步骤 2：发布页面¶

若开发与使用在同一环境，可直接选择右上角的发布，发布后将生成一个可供终端用户访问的 URL。
若在测试环境开发，可将页面从测试环境导出，并导入至正式环境重新发布，生成正式的页面 URL。

步骤 3：使用页面¶

你可以通过以下方式将 DTV 单页应用投入使用：

将页面 URL 直接提供给终端用户进行访问。
将页面 URL 作为菜单嵌入到 EnOS 应用。如何嵌入 EnOS 应用，参见创建应用 - 添加菜单。
将页面 URL 嵌入第三方应用中，不依赖 EnOS 平台独立发布。如有需要，可联系系统管理员。

步骤 4：分配权限¶

联系 OU 管理员为终端用户分配资产所属的资源权限。分配后，终端用户有权在页面查看资产数据。
（可选）若页面作为菜单嵌入 EnOS 应用，还需联系 OU 管理员为终端用户分配应用的菜单组权限，终端用户将有权访问菜单。

通过以上三个阶段，你可以系统地完成一个单页应用从设计到上线的全过程。

维护阶段（可选）¶

在页面上线并投入使用后，随着业务发展，可能需要调整或优化页面内容，你可以通过以下方式更新页面。

调整页面¶

发布后如有需要调整，可前往正式环境的 DTV 中心 修改页面，修改后需重新发布。重新发布不会影响页面 URL，终端用户从原有入口访问页面时，将查看最新页面。

版本回滚¶

如需撤销修改，可在 DTV 中心 进入页面配置页面，将页面回滚至任一历史版本，回滚后需重新发布。

在线编辑¶

如需在运行态在线编辑页面，可联系 OU 管理员为当前账号的角色分配 DTV 在线编辑相关的权限点。授权后，你可以在运行态编辑页面，编辑后直接生效，无需重新发布。
如需授权终端用户在线编辑页面，除了为终端用户的账号分配上述权限点外，还需联系 OU 管理员将页面所在文件夹作为资源分配给终端用户。终端用户将根据权限点，有权在线编辑页面或组件。

最佳实践¶

环境隔离：
- 优先在测试环境搭建和验证，减少正式环境风险。
- 使用导出/导入功能实现跨环境部署，确保一致性。
组件复用：
- 将常用组件保存为模板，存储至组件模板文件夹，提高构建效率。
- 通过在图层中引用仪表盘页面，复用已有页面内容。
性能优化：使用 Javascript 脚本自定义数据集时，避免复杂脚本导致浏览器性能问题。