单页应用概述¶

单页应用可在一个页面中配置和展示多张可视化页面，包括 DTV 仪表盘页面和第三方页面。单页应用通过导航器将不同页面的数据关联起来，提供更加统一、高效和灵活的数据洞察体验。你可以在单页应用中配置页面、数据与筛选器的联动，用户切换筛选器时，将展示不同的页面和数据。

常用场景 ¶

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

资产管理平台

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

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

能源监控面板

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

关键概念¶

单页应用构建的页面由以下部分组成：

它们在页面中的位置如下：

导航器¶

导航器为用户提供了在不同可视化页面之间切换的功能。在仪表盘页面中，全局过滤器只能筛选组件中展示的数据。而在单页应用中，用户通过在导航器中切换，可以同时切换页面和筛选数据。

导航器由以下两部分组成：

筛选器：允许用户指定数据的筛选条件，决定页面展示的数据范围。你可以指定用户在筛选器中的行为，例如筛选器中的可选项、单选还是多选等。根据筛选对象的不同，又分为：
- 资产筛选器：用于筛选展示的资产类型和资产，又分为场站筛选器和设备筛选器。
- 时间筛选器：用于指定展示数据的时间范围。
页签：允许用户通过页签快速切换页面。你可以指定页签的展示名称，还可以为页签关联属性，根据用户所选的资产属性值来展示不同的页签。

当页面未添加页签时，用户只能通过切换筛选器来切换画布和数据。当页面添加页签后，用户需要通过切换页签来切换画布，同时可通过切换筛选器来切换数据。

画布¶

画布是单页应用的基础层级，像一张铺在画面最底部的空白图纸，你可以在画布上放置多个图层，图层内添加多个组件或元素。当用户切换筛选条件和页签时，即可切换画布，获得更加立体、全面的信息洞察。

现支持以下 2 种画布类型：

单图层画布：和仪表盘页面类似，所有组件都位于同一图层。
多图层画布：画布中的组件分层展示和管理，可用于搭建地图监视类型的页面。例如图层 1 作为地图层，图层 2 作为数据可视化层，当用户在地图中点击某一区域时，按这一区域筛选数据，并展示在图层 2 中。

图层¶

图层是组件、元素等内容的分层管理单元，对于使用应用的用户来说无法感知。图层将页面内容分成不同的层级，每个层级可以独立展示和管理不同的组件。比如：

第一层是地理位置信息，如设备分布地图
第二层是设备运行状态的数据可视化

图层必须放置在画布上，一张画布最多可以放置 2 个图层。图层上内容摆放的位置范围由 图层布局 决定。现支持以下图层布局：

铺满全屏的面板：可设计为常见的仪表盘页面，或放置地图组件，作为页面底层的设备分布地图。
居左或居右的面板：适合多图层叠加而成的页面，放置在页面上层，根据用户的筛选条件展示数据。

你可以按照以下方法定义图层上每个面板的内容：

当面板嵌入编辑器时，可添加组件，构建自定义页面。
在面板中插入外部链接，在面板上展示已有页面。

组件¶

组件是数据可视化的核心，以各种图表和样式展示数据。组件来源分为：

基础：与仪表盘页面相同的标准组件库。
自定义：OU 内用户自定义的仪表盘组件。
模板：OU 内当前账号有权使用的组件模板。

组件需要放置在图层上，摆放的位置范围由图层布局决定。支持以下方式添加组件：

从左侧组件库中拖拽到图层的面板上。
引入已有仪表盘页面的组件及其配置。仅支持铺满全屏的面板。

关联配置¶

在单页应用中，你可以为上述对象配置关联关系，让用户在不同页面和数据之间灵活切换。关联配置分为 关联画布 和 配置参数 两类。

关联画布¶

关联画布指的是关联导航器和画布，可以达到如下效果：当用户在导航器中指定某个条件时，展示 A 画布。当用户指定另一个条件时，展示 B 画布。具体操作参见配置单页应用。

关联画布的方式根据导航器的类型，有不同配置方式：

导航器类型	关联画布所需配置	效果
场站筛选器	指定一个或多个属性，作为切换画布的条件。2. 指定属性的值，并为属性值关联画布。	当用户在筛选器中指定了资产，且任一资产的属性值与条件中列出的值一致时，展示对应的页签，可通过页签切换画布。当资产的属性值为空或不符合条件时，仅展示默认画布。
场站筛选器 + 页签	为页签关联属性的值。2. 为页签关联画布。	当用户在筛选器中指定了资产，且任一资产的属性值与页签关联的值一致时，展示对应的页签，可通过页签切换画布。当资产的属性值为空或不符合条件时，仅展示默认画布。
场站和设备筛选器	指定一个或多个属性，作为切换画布的条件。2. 指定属性的值，并为属性值关联画布。	当用户在筛选器中指定了资产，且任一资产的属性值与条件中列出的值一致时，展示对应的页签，可通过页签切换画布。当资产的属性值为空或不符合条件时，仅展示默认画布。
场站和设备筛选器 + 页签	为页签关联属性的值。2. 为页签关联画布。	当用户在筛选器中指定了资产，且任一资产的属性值与页签关联的值一致时，展示对应的页签，可通过页签切换画布。当资产的属性值为空或不符合条件时，仅展示默认画布。
时间筛选器	为时间间隔的值关联画布。	按筛选器中指定的时间间隔展示画布。