使用静态数据构建仪表盘¶

概述¶

EnOS 数字孪生可视化（Digital Twin Visualization, DTV）支持基于静态数据构建页面，用于可视化展示关键指标和测点数据，并支持将页面集成到自定义的应用中。本文介绍如何在 DTV 中使用静态数据构建可视化页面。

场景¶

本文将教你搭建一个可视化页面，用于演示楼宇碳排放场景。假设你已收到碳排放场景演示页面的设计草图，如下所示。

我们将以排放热力图（Emission Heat Map）组件为例，说明如何在 DTV 中使用静态数据配置组件并构建可视化页面。更多信息，参见热力图。

端到端工作流程¶

前提条件¶

开始之前，请确保以下事项：

当前账号有权限访问 EnOS 管理控制台的 应用注册 菜单，或 EnOS 应用门户的管理后台。拥有其中一种权限即可。
当前账号已被分配 DTV 应用的使用权限。

如需获取上述权限，联系目标 OU 的 OU 管理员。

设计态¶

本章节介绍如何在 DTV 中配置页面，可视化展示静态数据。

步骤 1：准备静态数据源¶

基于设计草图构建页面，需要首先了解页面组件将使用哪些数据源。你可以咨询开发人员或项目经理以确认可用数据源。本文假设使用静态数据来配置排放热力图。

数据源类型	描述
静态数据	通过 CSV 文件上传本地静态数据，用于快速构建演示页面。

通过以下步骤检查所需数据源和数据集是否已存在并启用：

登录应用门户，选择 数字孪生可视化 > 数据源。
在 外部数据源 标签页上，检查目标静态数据源是否存在。
选择 数据集 检查目标数据集是否存在。

如果找不到目标数据集或需要创建新的静态数据源，按照以下步骤操作：

选择 数据源。
在 外部数据源 标签页上，选择 新建数据源。

3. 在弹窗中配置数据源的详细信息，参考以下配置。

配置	必需/可选	示例	描述
类型	必需	静态数据	除了静态数据，DTV 还支持其他类型的外部数据源。
名称	必需	DT 演示	配置组件数据时将选择数据源的名称。
缓存元数据	可选	/	指定数据源的缓存元数据。
缓存值数据	可选	/	指定数据源的缓存值数据。

4. 在数据源列表中找到上一步中创建的数据源，并选择 数据集 。

5. 选择 新建数据集，输入数据集名称“DT 排放热力图”并上传 CSV 数据文件。可上传热力图静态数据文件作为示例文件。

步骤 2：创建仪表盘页面¶

DTV 通过仪表盘页面组织布局可视化组件。因此，你需要先创建一个仪表盘页面来容纳要展示的组件和数据。按照以下步骤创建可视化页面：

选择 仪表盘。
选择新建并配置页面的名称和项目。
选择 页面设置 并配置以下信息。

配置	必需/可选	示例	描述
主题	可选	暗色（dark）	仪表盘页面的颜色主题。DTV 目前支持白色（light）、绿色（green）、暗色（dark）三种主题色。
组件标题高度	可选	48	组件标题区域的高度。如需使页面更紧凑，可以降低高度。

步骤 3：在仪表盘页面中添加组件¶

创建完仪表盘页面后，按以下步骤在页面中添加组件：

选择 添加 > 添加组件/容器 > 组件，并在弹窗中选择目标组件类型。以排放热力图组件为例，在弹窗中选择 坐标图 > 热力图。
将鼠标悬停在添加的组件上，选择编辑。
配置以下组件信息。

分类	配置	示例	描述
基本	标题	输入“Emission Heat Map”	输入组件的标题。
基本	隐藏标题	禁用此功能	启用/禁用此功能可隐藏/显示页面上组件的标题。
数据	数据源	选择“DT演示”	选择数据源后，你需要配置以下数据源参数：1.类别：选择需要在组件中显示的数据，可选的选项来自上传到静态数据源的数据集。例如，在本文场景中选择“DT 排放热力图”。2. 维度聚合：选择“是/否”指定从数据集查询数据时是否聚合数据。例如，在本文中场景中选择“否”。
	维度	选择“Hour”	维度是在热力图组件中显示为 X 轴的数据字段。可选择“添加数据项”并在弹窗中选择“Hour”，将 X 轴设置为一天中的小时。
	对比	选择“Date”	对比是在热力图组件中显示为 Y 轴的数据字段。可选择“添加数据项”并在弹窗中选择“Date”，将 Y 轴设置为一周中的天。
	度量	选择“Total Emission”	度量是在热力图组件中每个色块中显示的数据字段。可选择“添加数据项”并在弹窗中选择“Total Emission”，将碳排放数据显示为热图组件中的色块。
图表样式	轴样式	-	轴样式定义组件中 X 轴和 Y 轴的显示方式。在本文场景中，可以在标签设置中为 X 轴和 Y 轴都选择“category” - “none” - “0”，系统会按照原始数据集中指定的格式显示 X 轴和 Y 轴的值。
	热力图样式	-	热图样式定义组件中色块的显示样式。配置以下信息：1. 着色方式：选择“渐变”，以渐变颜色显示数据色块。支持在渐变配置中自定义渐变效果。2. 标记最小值：启用此功能，在最小值色块上显示“Min”标签。3. 标记最大值：启用此功能，在最大值色块上显示“Max”标签。
	其他设置	-	其他设置定义组件的图例显示样式。在位置字段中，选择“bottom-middle”，图例将在图表下方的中间位置显示。

有关热图配置的更多信息，参见热力图。

步骤 4：将仪表盘页面配置到应用菜单中¶

在配置页面及页面上的组件之后，你需要发布页面并将页面设置为应用或应用快捷方式的菜单，以便在演示应用中访问页面。按照以下步骤进行配置：

在 仪表盘 中选择目标页面的编辑图标。
选择 保存 > 保存并发布，发布页面并复制页面 URL。
选择以下 1 种方式将仪表盘页面设置为应用菜单：
- 将页面设置为应用的菜单：
  1. 登录管理控制台，从左侧导航栏中选择 应用注册。
  2. 选择要将仪表盘页面添加到的目标应用。
  3. 在 菜单管理 标签页中，选择 新建菜单。
  4. 在弹窗的 URL 字段中输入上一步中复制的 URL，并为菜单配置其他信息。
- 将页面设置为应用快捷方式的菜单：
  1. 选择应用门户中的 管理后台，并选择 应用管理。
  2. 选择要将仪表盘页面添加到的应用快捷方式对应的管理按钮。
  3. 选择 添加菜单 > 新建一级菜单。
  4. 在弹窗的 URL 字段中输入上一步中复制的 URL，并为菜单配置其他信息。
参考管理菜单组，将新增菜单加入对应的菜单组下。
参考为用户分配角色，配置用户的角色。
参考管理角色权限，为用户所属角色分配菜单组的访问权限。

运行态¶

查看静态数据可视化页面¶

以上配置完成后，在应用门户中访问添加了该页面的应用，并在左侧菜单栏中选择上一步中创建的对应菜单，即可查看静态数据可视化页面。

常见问题¶

问：为什么我在配置组件时无法选择静态数据源？

答：可能因为未在 DTV 中启用静态数据源。在应用门户中选择 数字孪生可视化 > DTV 中心 > 数据源 > 外部数据源，打开静态数据源的开关即可。

问：为什么我无法在应用门户中看到已配置的页面菜单？

答：可能因为当前账号未获取相关菜单组的访问权限。如需获取菜单组访问权限，联系当前 OU 的管理员。