开始搭建单页应用¶
本教程面向应用开发人员，使用 DTV 从零到一搭建如下图所示的单页应用页面。
学习目标¶
理解 DTV 的工作流：准备阶段，搭建阶段和发布阶段。
学习配置静态数据源。
完成一个双图层页面的搭建。
学习配置容器、表格、指针仪表盘和多指标卡等组件。
前提条件¶
假设页面的开发和使用都在同一个环境进行，确保该环境已安装 DTV R2506 及以上版本。
已有 EnOS 应用门户 的账号，有权在 DTV 中创建页面。若无请联系 OU 管理员。
已了解 DTV 的 关键概念。
准备阶段¶
步骤 1：需求分析与方案设计¶
在开始搭建前，对目标页面进行分析，为后续构建扫清障碍。
页面结构分析¶
目标页面有 2 层，通过筛选器切换。每层布局相同，左侧是静态的图片，没有数值变化。右侧是动态的数据图表，可能随着页面切换而变化。可以把目标页面作如下分析：
画布结构：2 个画布，每个画布由背景图和 1 个图层构成。
图层结构：每个画布 1 个图层，共计 2 个图层。图层包含多个组件，支持数据变化。
数据类型：非实时的静态数据，并启用填报功能，允许终端用户修改数据，用于演示或宣传。
交互元素：顶部的下拉筛选器，用于切换画布 和 数据。
组件列表：2 个画布上的组件完全一致，仅当用户切换筛选器时，切换画布 和 数据。因此将在画布 1 上添加组件，在画布 2 上复用，减少配置步骤。
所需组件如下：
容器：5 个
多指标卡：9 个
表格：1 个
指针仪表盘：4 个
联动分析：筛选器变化时，需切换画布。
数据方案¶
数据来源：静态数据源（CSV 文件）。
数据集示例：
数据集 1：以年为单位的两种产品的碳排放数据总览，展示在多指标卡 1 - 4。
数据集 2：两种产品碳排放数据的进一步拆分和整理，便于直观比较，展示在表格。
数据集 3：展示每个阶段更细粒度的碳排放来源信息，展示在多指标卡 6 - 9 以及指针仪表盘 1 - 4。
数据集 4：两种产品的名称，展示在筛选器的下拉框中。
步骤 2：数据准备¶
准备静态数据源，确保数据完整。
创建静态数据源：
选择 DTV 中心 > 数据源。
在 外部数据源 标签页中，新建 Static Data 类型的数据源，名称为
Bentley Continental Gt3。
定义数据集：
在数据源中依次新建 4 个数据集，分别上传下列 CSV 文件：
数据集 1：名称为
data1，数据为data1.csv。数据集 2：名称为
data2，数据为data2.csv。数据集 3：名称为
data3，数据为data3.csv。数据集 4：名称为
car-type，数据为car-type.csv。
数据集的返回数据项使用默认配置即可。
步骤 3：资源准备¶
收集页面所需素材。
识别素材：
背景图：2 个底部背景图
图标：4 个，用于多指标卡 5 - 9
切分素材：建议设计师匹配大屏尺寸（1920 x 1080），预先切图。
你可以直接下载压缩包，获取目标页面所需素材：图片素材.zip。
搭建阶段¶
步骤 1：创建页面¶
进入 DTV 应用，开始实际搭建。
1. 在 DTV 中心 > 单页应用 标签页，选择 + 新建。
2. 在 基础配置 步骤填写以下内容：
页面名称：输入
Single-Page App。所属分组：选择你有权创建页面的分组，通过分组隔离页面权限。
文件夹：选择你有权创建页面的文件夹，通过文件夹对页面进行分类管理。如有需要可新建文件夹。
响应模式： 选择 网页。
数据更新动效：启用。启用后数据变化时页面将展示动效。
支持填报静态数据：启用，并选择 默认展示真实数据。启用后，页面发布后将生成数据填报 URL，终端用户可在填报 URL 中填报数据，在可视化页面查看填报数据图表。
支持导出 PDF 文件：启用。终端用户可将画布导出为 PDF 离线查看。
素材库：选择 管理素材库，在弹窗中分别上传 图片素材.zip 中的 4 个图标和 2 个背景。
主题：选择 白色主题。主题将决定导航器、画布和组件的基础颜色。
选择数据集：选择上文创建的静态数据源
Bentley Continental Gt3中的所有数据集。选择组件模板：选择 全部组件模板。
步骤 2：配置导航器¶
导航器中展示产品类型，终端用户可下拉选择导航器选项，选择方式为单选。按照以下步骤添加该导航器：
在 导航配置 步骤中，在左侧选择 基础列表，添加 1 个 下拉选择器。
在右侧面板中配置下拉选择器：
在运行态中不展示：勾选。将在画布标题栏中引用并展示该下拉选择器，因此在导航栏中不展示。
运行态读取数据：勾选。在运行态的导航栏中不展示，但会在画布标题栏中使用，因此仍然需要读取数据。
选择数据：选择数据源
Bentley Continental Gt3的car-type数据集。导航器展示的选项：选择 Name，将产品类型的名称作为下拉选择器的选项。
导航器输出参数：选择 Type 和 Name。当用户选择一个选项时，导航器将把对应的
Type和Name参数值输出给关联的画布或组件。键值：输入
type，将作为导航器输出参数的键，可用于标识参数的来源。导航器展示名称：选择 定义国际化展示名称。默认名称为 Product，中文名称为 产品。
选择方式：选择 单选。
步骤 3：配置画布¶
画布配置步骤中，你需要创建画布和图层，并按照设计稿进行配置。
由于画布 1 和 画布 2 承载的组件样式和数据完全一致，可通过复用图层功能，在画布 1 的图层上完成配置，在画布 2 上复用图层，减少重复配置。
配置画布 1¶
在 画布配置 页面，选择左侧大纲树的画布 1 对应的
添加图层 按钮。在 添加图层 弹窗中配置以下信息：
图层名称：
图层2图层布局：选择面板居右的图层布局
选择图层 2 对应的
配置图层 按钮，打开右侧配置图层弹窗。在弹窗中配置图层 2 的以下内容：
图层名称：
图层2复用图层：无
图层蒙层：无
图层布局：右侧面板
面板比例：
宽度 60 %
高度 100 %
外边距 - 上 30 px
外边距 - 右 20 px
外边距 - 下 20 px
面板嵌入内容：选择 编辑器
启用圆角面板：启用
面板背景色：无需配置，保留默认跟随主题色
背景效果：选择 纯色
内边距：上下 0 px，左右 0 px
网格高度：40 px，不勾选自适应
组件间隔：上下 12 px，左右 12 px
网格数量：12
引入仪表盘页面的组件：无需配置
容器轮播：不启用
启用圆角组件：启用
启用透明背景组件：不启用
组件标题栏高度：48 px
组件标题栏背景：无需配置
刷新频率：不刷新
请求合并：启用
加载优先级：无需配置
在左侧大纲树中，选择图层 1 对应的
删除图层 按钮，删除默认创建的全屏图层 1。删除图层 1 后，画布 1 下仅有 1 个图层，单图层将不展示在大纲树中。选择画布 1 对应的
配置画布 按钮，配置以下内容：画布名称：
Bentley Continental Gt3背景图片：上传 图片素材.zip 中的 车1.png
背景填充：选择 自适应
启用画布标题栏：启用
其它项保留默认配置，完成配置画布 1。
配置画布 2¶
选择左侧大纲树的
添加画布，添加第二张画布。在添加画布弹窗中配置以下信息：
画布名称：输入
Terra Trek Jeep Gladiator，用于承载第一类产品数据画布类型：选择 单图层画布
配置后，选择 确定，完成画布创建。
在画布 2 的右侧配置弹窗中，配置以下内容：
背景图片：上传 图片素材.zip 中的 车 2.png
背景填充：选择 自适应
启用画布标题栏：启用
复用图层：选择 Bentley Continental Gt3 – 图层 2
其它项保留默认配置，完成配置画布 2。
配置画布标题栏¶
目标页面中，下拉筛选框位于画布右上角，且背景图片和画布一致。可以通过在画布标题栏中引用导航器的方式，将下拉筛选框展示在画布内，而不是导航栏上。
在 画布配置 步骤，在 Bentley Continental Gt3 画布的左上角选择
画布标题栏，打开画布标题栏弹窗。在弹窗中进行以下配置：
标题：删除输入框中的
画布标题文字在画布标题栏展示导航器：选择
下拉选择器（产品）
其它项保留默认配置。
在 Terra Trek Jeep Gladiator 画布中重复上述步骤，完成配置画布标题栏。
步骤 4：添加组件¶
下面将按照页面设计，从上至下添加组件。
添加多指标卡 1 - 4¶
在 画布配置 步骤中，从右侧 组件库 > 基础 列表中查找 指标卡，在页面添加 4 个多指标卡。
添加后，选择多指标卡 1 上的 编辑 按钮，打开右侧的组件配置弹窗。
在多指标卡的 数据 标签页配置以下内容：
选择数据：
Bentley Continental Gt3 - data1指标：删除默认指标（如有）。选择 + 添加数据项，添加
number（ID：number）作为该组件展示的指标。扩展：添加
Name作为扩展。这里添加扩展数据项是为了在静态数据主键中选择该数据项作为主键，不作任何展示用途。静态数据主键：配置
Name作为静态数据主键。其它项保持默认配置，完成数据配置。
在多指标卡的 样式 标签页配置以下内容：
标题：静态值，输入
Record Number标题布局：选择 居左：标题文字
标题字体：Barlow-Regular，12 pt，颜色 Hex 为
#757685标题内边距：左 16 px
标题栏高度：跟随页面
标题栏背景：颜色，纯色，颜色 Hex 为
#FFFFFF
组件尺寸：宽度 3 个网格，高度 2 个网格
组件内边距：上 0 px，下 14 px，左 12 px，右 20 px
圆角：左上 16 px，右上 16 px，左下 16 px，右下 16 px
组件装饰：无
组件背景：颜色，纯色，Hex 为
#FFFFFF效果：无效果（配置多指标卡 2 - 4 时，选择阴影效果）
布局：行 1，列 1
间距：左右间距 0 pt，行高 2 pt
基础样式：指标样式
图标：无图标
状态圆点：无圆点
指标名称：无名称
数值边距：上 0 px，下 13 px，左 0 px，右 0 px
数值字体：Barlow-Regular，20 pt，颜色 Hex 为
#101015单位字体：Helvetica/Arial，14 pt，颜色 Hex 为
#A4A5B3
按照上述指引，完成多指标卡 2 - 4 的样式配置。
在 数据 标签页中，依次为多指标卡 2 - 4 配置数据：
点击 选择真实数据。在 选择数据 下拉框中选择
Bentley Continental Gt3 - data1数据源。添加下列数据项作为多指标卡 2 - 4 的指标：
多指标卡 2：
boundary多指标卡 3：
quantity多指标卡 4：
period
在 样式 标签页中，依次为多指标卡 2 - 4 定义标题：
多指标卡 2：
Calculation Boundary多指标卡 3：
Quantity (Declared Unit)多指标卡 4：
Reporting Period
在多指标卡 1 - 4 的 过滤器 标签页中，选择 点击配置联动，为以下导航器参数与组件数据项配置联动：
导航器参数：
Name联动的数据项：
Name联动条件：
=
配置后，当用户在导航器中选择某个
Name时，组件将展示Name参数值 与导航器参数值相等的指标数据。
关闭组件配置弹窗。在面板中将鼠标依次悬停在多指标卡上，通过拖拽排列多指标卡的位置，确保位置为：
多指标卡 1：第（0，0）个网格
多指标卡 2：第（3，0）个网格
多指标卡 3：第（6，0）个网格
多指标卡 4：第（9，0）个网格
可将鼠标悬停在组件左上角的
位置，查看当前组件的页面位置。
完成多指标卡 1-4 组件配置，配置后组件如下所示：
添加容器 1¶
容器是用于容纳和管理其它组件的布局型组件。可以分别添加容器和其它组件，再将组件移动到容器中。按照下列步骤添加容器 1：
在 画布配置 步骤中，从左侧组件库中添加一个 基础容器 - 默认。
选择容器左上角的
编辑 按钮，打开容器配置弹窗。在 基本选项 标签页，更新下列容器配置：
标题：静态值，
PCF标题栏高度：自定义，45 px
组件尺寸：宽度 12 个网格，高度 6 个网格
组件间隔：上下 0 px，左右 14 px
网格高度：40 px，不跟随页面
其它项保持默认配置，完成配置容器 1。
添加多指标卡 5¶
按照上述添加组件的方式添加 1 个多指标卡，作为多指标卡 5。
按照下列信息更新配置：
数据：
选择数据：
Bentley Continental Gt3 - data1指标：添加
Total（ID：total）作为指标，并展开其配置区域，为 数据单位 选择 自定义，输入gCO2e
扩展：添加
Name作为扩展（用于静态数据主键）静态数据主键：配置
Name作为静态数据主键
样式：
标题：
标题：静态值，
Total标题字体：Helvetica/Arial，18 pt，颜色 Hex 为
#101015标题内边距：左 20 px
组件：
组件尺寸：宽度 3 个网格，高度 1.8 个网格
组件内边距：各 0 px
圆角：各 8 px
效果：阴影效果
阴影样式：X 偏移 0 px，Y 偏移 0 px，模糊 20 px，扩展 0 px
布局：
布局：行 1，列 1
间距：左右间距 0 pt，行高 0 pt
指标：
基础样式：指标样式
图标：无图标
状态圆点：无圆点
指标名称：有名称
布局方式：左对齐，名称位置：上方
名称-数值间距：-5 px
名称边距：各 0 px
数值边距：上 0 px，下 0 px，左 0 px，右 9 px
名称字体：Barlow-Regular，14 pt，颜色 Hex 为
#5F5F6B数值字体：Barlow-Regular，36 pt，颜色 Hex 为
#101015单位字体：Barlow-Regular，12 pt，颜色 Hex 为
#5F5F6B小数位数：2，启用展示千分位
在 过滤器 标签页中，选择 点击配置联动，在弹窗中配置以下关联关系：
导航器参数：
Name联动的数据项：
Name联动条件：
=
其它项保留默认配置，关闭右侧组件配置窗口。
在画布中，将鼠标悬停在多指标卡 5 上，选择 添加到容器。
选择
PCF（容器 1），将多指标卡 5 添加到容器 1 中。拖拽移动多指标卡 5，放置在容器内位置（0，0），完成配置多指标卡5。
配置后的多指标卡 5 如下图所示：
添加表格¶
在页面中添加 1 个 表格（带进度条） 组件。
按照上述步骤将表格组件添加到容器 1 中，容器内位置为（0，1.8）。
在 表格配置 弹窗中，更新以下配置：
数据：
选择数据：
Bentley Continental Gt3 - data2维度：添加数据项
item指标：添加数据项
data、percent-value、和percent扩展：添加数据项
percent和Name静态数据主键：配置
Name作为静态数据主键
样式：
标题：点击
隐藏表格标题组件：
组件尺寸：宽度 12 个网格，高度 9 个网格
组件内边距：各 0 px
圆角：各 8 px
布局：
每页行数：50
行高：1
自定义列宽：
Data：100 px
Percent：200 px
Item：150 px
Percent-value：50 px
系列：
展示千分位：启用
展开
percent（指标），在内容颜色规则中设置 3 条分段匹配规则，使表格中的进度条根据数值展示不同颜色（渐变效果）：从 0 至 0.02，颜色 Hex 为
#E81C2C，R232，G28，B44，A40从 0.02 至 0.4，颜色 Hex 为
#E81C2C，R232，G28，B44，A70从 0.4 至 1，颜色 Hex 为
#E81C2C，R232，G28，B44，A100
表格：
表头字体：0 pt
内容字体：Barlow-Regular，14 pt，颜色 Hex
#848496
过滤器：为组件配置导航器联动规则：
导航器参数：
Name联动的数据项：
Name联动条件：
=
其它项保持默认配置，完成配置表格。
配置后的表格如下所示：
添加容器 2 - 5¶
参照添加容器 1 的方式，在页面添加 4 个基础容器，作为容器 2-5。按照下列内容，依次更新容器配置：
打开 容器配置 弹窗，在 基本选项 标签页，点击
隐藏容器标题。在 基本选项 的 标题 中，将 标题栏高度 设置为跟随页面。
在 基本选项 的 组件 中，配置以下内容：
组件尺寸：宽度 3 个网格，高度 4 个网格
组件内边距：0 px
圆角：16 px
组件间隔：0 px
网格高度：30 px，不跟随页面
其它内容保留默认配置，关闭容器配置弹窗。
通过拖拽，将容器 2 - 5 移动到以下页面位置：
容器 2：第（0，12）个网格
容器 3：第（3，12）个网格
容器 4：第（6，12）个网格
容器 5：第（9，12）个网格
完成容器 2 - 5 的配置。
添加多指标卡 6 - 9¶
在 画布配置 步骤中，从右侧 组件库 > 基础 列表中查找 指标卡，在页面添加 4 个多指标卡。
添加后，选择多指标卡 6 上的 编辑 按钮，打开右侧的组件配置弹窗。
在多指标卡 6 的 数据 标签页配置以下内容：
选择数据：
Bentley Continental Gt3 - data3指标：选择 + 添加数据项，添加
Material Acquisition（ID：Material Acquisition）作为该组件展示的指标扩展：添加
Name作为扩展。这里添加扩展数据项是为了在静态数据主键中选择该数据项作为主键，不作展示用途静态数据主键：配置
Name作为静态数据主键
在多指标卡 6 的 样式 标签页配置以下内容：
标题：点击
隐藏组件标题组件尺寸：宽度 12 个网格，高度 1.3 个网格
组件内边距：上 0 px，下 0 px，左 10 px，右 0 px
圆角：各 8 px
布局：行 1，列 1
间距：左右间距 0 pt，行高 2 pt
基础样式：指标样式
图标：有图标（自定义）
状态圆点：无圆点
指标名称：有名称
布局方式：左对齐，名称位置：上方
名称-数值间距：-4 px
名称字体：Barlow-Regular，14 pt，颜色 Hex 为
#3E3E47数值字体：Barlow-Regular，10 pt，颜色 Hex 为
#8A8B99单位字体：Helvetica/Arial，14 pt，颜色 Hex 为
#A4A5B3图标：自定义，选择 Material.png 作为图标
图标大小：12 pt
依照前文的指引，依次选择多指标卡 7-9 的编辑按钮，完成它们的样式配置。
在 数据 标签页中，按照以下内容，依次为多指标卡 7-9 配置数据。
点击 选择真实数据。在 选择数据 下拉框中选择
Bentley Continental Gt3-data3数据源添加下列数据项作为多指标卡 7-9 的指标：
多指标卡 7：production
多指标卡 8：Distribution
多指标卡 9：End-of-life
在 样式 标签页的指标页面，依次为多指标卡 7-9 配置下列图标：
多指标卡 7：Production.png
多指标卡 8：Distribution.png
多指标卡 9：End-of-life.png
依次在多指标卡 6-9 的过滤器标签页中，选择 点击配置联动，为以下导航器参数与组件数据项配置联动：
导航器参数：Name
联动的数据项：Name
联动条件：=
配置后，当用户在导航器中选择一种 Name 时，组件将展示 Name 参数值与导航器参数值相等的指标数据。
添加指针仪表盘 1 - 4¶
在 画布配置 步骤中，从右侧 组件库 > 基础 列表中查找 指针仪表盘，在页面添加 4 个基础指针仪表盘。
添加后，选择指针仪表盘 1 上的 编辑 按钮，打开右侧的组件配置弹窗。
在基本标签页配置以下内容：
标题：点击 隐藏组件标题
组件尺寸：宽度 12 个网格，高度 4.5 个网格
组件内边距：0 px。
在 数据 标签页配置以下内容：
选择数据：
Bentley Continental Gt3 - data3指标：选择 + 添加数据项，添加
Material Acquisition-d（ID：Material Acquisition-d）扩展：添加
Name（用于静态数据主键）静态数据主键：配置
Name
在 样式 标签页配置：
图表布局：环形样式
显示名称：启用
名称字体：Barlow-Regular，10 pt，颜色 Hex
#757685单位字体：Barlow-Regular，12 pt，颜色 Hex
#5F5F6B，加粗数值字体：Barlow-Regular，20 pt，颜色 Hex
#313138，加粗轴线范围：Min 0，Max 1
占比部分颜色规则：纯色，颜色 Hex
#E81C2C剩余部分颜色规则：纯色，颜色 Hex
#EFEFF3仪表盘粗细：5 pt
为指针仪表盘 2 - 4 配置数据：
指针仪表盘 2：
Production-d指针仪表盘 3：
Distribution-d指针仪表盘 4：
End-of-life-d
在指针仪表盘 1 - 4 的 过滤器 标签页中，配置导航器联动：
导航器参数：
Name联动的数据项：
Name联动条件：
=
将指针仪表盘 1 - 4 分别添加到容器 2 - 5 内，位置为第（0，1.3）个网格。
步骤 5：检查画布 2¶
画布 2 复用了画布 1 中的图层，可在大纲树中切换至画布 2，检查确保已正确展示所有组件。
步骤 6：配置关联关系¶
如需达到用户切换导航器即切换画布和筛选数据的效果，需为导航器、画布和组件配置关联关系。
关联导航器和画布¶
在 关联配置 步骤中，进入 关联画布 标签页。
在 选择导航器 中，选择下拉选择器（产品），指定参数
Name作为通过导航器切换画布的条件。当用户在导航器中选择 1 个选项时，表示将切换到Name值与选项一致的画布。在关联画布中，将
Name的值与画布关联起来。创建以下 2 个关联关系：关联关系 1：条件
Bentley Continental Gt3，关联画布Bentley Continental Gt3关联关系 2：条件
Terra Trek Jeep Gladiator，关联画布Terra Trek Jeep Gladiator
在选择默认画布中，指定一个画布作为默认画布。这里指定
Bentley Continental Gt3作为默认画布。
关联导航器和组件¶
在 关联配置 步骤中，进入 配置参数 标签页。
在 步骤 4：添加组件 流程中，你已为每个组件配置过组件与导航器的关联关系。关联关系展示在当前页面中，表示当导航器指定参数
Name的值时，组件内展示Name值相等的指标数据。在当前页面，你可以在右上角切换画布，查看、编辑或删除已配置的关联关系。
发布阶段¶
步骤 1：预览页面¶
点击右上角 预览，检查运行态的数据展示 和 联动 是否符合预期：
每个组件的数据正确展示。
不展示导航器，下拉选择器展示在画布右上角。
在下拉选择器中切换选项时，画布 和 组件 数据同时切换。
鼠标悬停在右上角的 … 上，可切换当前页面展示的数据类型为 接入 或 填报。
步骤 2：发布页面¶
预览无误后，选择左上角的 返回编辑页面。
选择右上角的 发布，在弹窗中选择可见范围为 公开。
确定后，页面将自动检查配置，并列出可能影响页面的配置问题，可根据需要修改配置。
若无需处理，选择问题已检查，继续发布。
发布成功后，弹窗内将展示 页面 URL 和 静态数据填报 URL，复制并保存 URL。
步骤 3：填报测试¶
在浏览器中打开静态数据填报页面 URL。
根据需要选择以下一种方式自行测试填报功能，编辑后的数据将作为填报数据：
选择 下载模板，填入静态数据后上传
选择每个组件对应的 在线填报数据
在浏览器中打开页面 URL，在右上角 … 中将数据来源切换至 填报，确认页面展示的数据已更新为静态数据。
更多信息，参见 填报静态数据。
步骤 4：使用页面¶
如需将页面投入使用，可参考使用页面，将页面 URL 提供给终端用户，并为用户分配权限。
总结¶
通过本教程，你已学会如何搭建一个简单的单页应用页面。后续可参考 DTV 文档 中的其它内容，探索更多高级功能。