单页应用概述¶

单页应用（Single-Page Application）是 DTV 的一种复合型应用页面。它通过导航器将多个可视化页面有机地整合在同一个页面内，实现了多页面、多数据视角的统一管理与动态联动。

单页应用的核心在其强大的导航与上下文切换能力。终端用户通过顶部的导航器进行筛选或切换页签时，不仅能过滤数据，更能触发整个页面内容的更替，从而在一个应用内获得连贯、深入且高效的数据分析体验。

单页应用旨在解决复杂业务场景下的两个主要问题：

信息聚合：将原本分散在不同页面、不同系统的相关信息，通过导航框架聚合一体，避免终端用户在不同菜单或应用间频繁切换，降低认知负荷。
上下文连贯：确保终端用户在探索不同细分数据时，导航状态和数据筛选上下文得以保持和传递，分析流程不断层。

关键概念¶

开始构建单页应用前，应用开发人员需首先了解单页应用的关键概念，对单页应用的术语和功能建立统一的认识。

常用场景 ¶

单页应用常用于以下场景：

资产管理平台

通过组合筛选器和多张画布，应用开发人员可构建一个全局性、可视化的资产运营管控平台，供运维人员监控和分析场站内资源的生产消耗情况和资产的运行数据。

在资源标签页中，运维人员可查看所选区域的资源数据，例如用电量、发电量、用能趋势图等数据，帮助掌握场站的资源利用情况。
在资产标签页中，运维人员可查看所选区域内的资产实时数据，包括资产在线率、资产的活跃告警数、场站状态排行等，及时发现资产可能存在的问题，提高运维效率。

能源监控面板

在单页应用中，可添加“场站筛选器 + 页签”和多张画布，将数据概览与各项能源看板相集成，有助于企业全面掌握能源系统的资产使用情况。页面一共包含 10 个页签，切换到任一页签，运维人员即可查看所选场站的对应看板，及时追踪各类设备的能源消耗情况和运行数据，据此优化调度策略，提高整体的能源效率和可持续性。

界面介绍¶

DTV 为应用开发人员和终端用户提供了配置与运行一体化的单页应用构建体验，涵盖从开发配置到最终运行的完整生命周期。

配置态界面¶

配置态专为应用开发人员设计，支持高效完成单页应用的创建、配置与发布。以下为界面示意图及功能说明：

序号	功能区域	描述
1	步骤导航栏	切换配置步骤，按顺序完成单页应用的基础信息、导航栏、画布和数据关联的设置。
2	页面配置窗口	展示当前步骤的配置内容，应用开发人员可在此完成各项配置。
3	文档入口	提供新手引导和详细配置项说明，方便开发者快速上手和参考。
4	其它配置入口	其它页面配置项入口，包括：检查配置：自动检测页面配置问题，列出潜在错误，便于发布前排查。更新自模板：使用模板覆盖当前页面内容，同步模板更新。历史版本：查看页面历史版本详情，支持在沙箱中编辑或回滚至指定版本。发布信息：查看页面发布历史、可见范围及页面 URL。
5	PDF 视图配置入口	调整 PDF 页面中各画布组件的大小和布局，确保导出效果符合需求。
6	页面预览入口	模拟终端用户视角，预览发布后的页面效果。
7	页面保存按钮	保存当前页面，支持另存为页面模板或另存为新页面。
8	页面发布按钮	发布页面，可设置页面的可见范围为内部或公开。公开后，所有 OU 可见，内部则仅当前 OU 可见。

运行态界面¶

运行态面向终端用户，支持在网页端或大屏设备上访问已发布的单页应用。终端用户可根据业务需求灵活调整页面配置与布局，无需开发人员介入。以下为界面示意图及功能说明：

序号	功能区域	描述
1	导航栏	设置数据筛选条件和切换页签，设置后页面将更新对应数据和画布内容。
2	画布	页面的核心展示区域，通过可视化组件展示数据。终端用户可在组件内进行切换、数据筛选等基础交互动作。
3	页面配置入口	授权的终端用户可新增组件、修改组件配置、调整页面和 PDF 布局，保存后可覆盖当前页面模板或生成新模板，无需应用开发人员重新发布。
4	PDF 导出按钮	将当前画布内容导出为 PDF 文件，便于离线查看或分享。

开始构建¶

应用开发人员可参考构建可视化页面的基本流程，了解构建单页应用的核心流程。