列表


列表以紧凑的形式展示多条文本记录。每条记录由标题、副标题、内容和标签组成,可分别绑定数据项,并通过条件颜色突出需要关注的记录,常用于告警摘要、事件记录和设备状态等场景。


../_images/list1.png


DTV 中另有两个名称相近的组件:

  • 业务组件 分组下的 告警列表,配置项与列表几乎相同,但额外提供每页行数与轮播间隔。

  • 控件 分组下的 资产列表,以卡片或表格展示资产的实时数据,与列表无关。


本文介绍列表的特殊配置。有关各图表通用的配置项,如 基本 标签页、过滤器 标签页的内容,参见 图表通用配置。

列表的数据


列表使用 维度 和 指标 数据项组织每条记录。已添加的维度和指标都可作为标题、副标题、内容或标签的数据项;在样式中为各区域选择具体数据项。

有关数据源、数据项的通用配置信息,参见 图表通用配置 > 配置数据。

维度


列表支持添加 0 - 2 个 维度字段。维度字段可用于标题、副标题、内容和标签,也可作为 条件格式 > 条件颜色 的匹配数据项。

指标


列表支持添加不限数量的指标字段。指标字段可用于标题、副标题、内容和标签,但不能作为条件颜色的匹配数据项。

列表的样式


列表使用两类样式配置控制展示:列表样式 管理标题、副标题、内容和标签;条件格式 根据维度字段的值为指定区域应用颜色。

有关标题、组件的通用配置信息,参见 图表通用配置 > 配置样式。

列表样式


列表中的标题、副标题、内容和标签均可单独控制显示、数据项和字体。

标题


标题用于展示记录的主信息,例如告警名称或事件标识。

  • 显示:点击 eye 控制是否显示标题文本。

  • 数据项:从已添加的维度或指标字段中选择一个作为标题。

  • 字体:设置标题文本的字体、字号、颜色和加粗、斜体等样式。

  • 图标:选择标题左侧的图标。可选 无 或 告警;告警图标为固定的告警三角图标。

  • 图标颜色:设置告警图标的颜色。选择 无 图标时该项不生效。

副标题


副标题用于展示标题的补充信息,例如告警发生时间、设备名称或事件来源。

  • 显示:点击 eye 控制是否显示副标题文本。

  • 数据项:从已添加的维度或指标字段中选择一个作为副标题。

  • 字体:设置副标题文本的字体、字号、颜色和样式。

内容


内容用于展示记录的详细描述或消息正文。

  • 显示:点击 eye 控制是否显示内容文本。

  • 数据项:从已添加的维度或指标字段中选择一个作为内容。

  • 字体:设置内容文本的字体、字号、颜色和样式。

  • 跳转方式:为内容区域配置点击交互,配置后终端用户点击内容可跳转到指定目标;具体配置方式参见 图表通用配置 - 交互设置。

标签


标签以气泡形式展示记录的分类或状态信息,例如告警等级和告警类型。

  • 显示:点击 eye 控制是否显示标签。

  • 数据项:从已添加的维度或指标字段中选择一个或多个字段。每个已选字段的值生成一个标签。

  • 字体:设置标签文字的字体、字号、颜色和样式。

每条记录最多展示前 5 个 已选标签字段;超出部分不在组件中显示。

条件格式


条件格式中的 条件颜色 根据所选维度字段的值,为标题、副标题、内容、标签或告警图标应用颜色。它使用文本匹配,不使用通用颜色规则中的数值范围。

数据项


从已添加的 维度 字段中选择一个,作为条件颜色的匹配依据。指标字段不能用于条件匹配。

使用颜色规则


启用后,组件按配置的颜色规则匹配每条记录。关闭后,所有记录均使用各区域原有的字体或图标颜色。

颜色规则


点击 添加 可增加颜色规则。每条规则包含以下配置项:

配置项

说明

匹配文本

输入要匹配的文本。当所选维度字段的值包含该文本时,命中此规则。留空时可匹配所有记录,适合作为兜底规则。

颜色

设置匹配后使用的颜色。

规则按从上到下的顺序依次匹配,第一条命中的规则生效。未命中任何规则时,记录保留各区域原有的颜色。

颜色规则联动区域


选择颜色规则作用的区域:

  • 联动标题:将匹配颜色应用到标题文字。

  • 联动副标题:将匹配颜色应用到副标题文字。

  • 联动内容:将匹配颜色应用到内容文字。

  • 联动标签:将匹配颜色应用到标签文字。

  • 联动图标:将匹配颜色应用到告警图标。

条件颜色不会改变整条记录或标签气泡的背景颜色。未勾选的区域继续使用自身配置的颜色。

运行时交互


以下是列表在运行时的交互行为:

  • 记录布局:每条记录分三行显示。第一行是告警图标、标题(占 60% 宽度)和右对齐的副标题(占 40% 宽度),第二行是内容,第三行是标签。相邻记录之间有一条分隔线,颜色随主题变化。

  • 滚动查看:列表不分页,记录按数据返回的顺序自上而下排列,超出组件高度时可在组件内垂直滚动。

  • 完整文本:标题、副标题、内容和每个标签都可鼠标悬浮查看该字段的完整值。其中内容和标签超出宽度时以省略号截断,标题过长时自动换行,副标题超出部分被隐藏。

  • 内容点击跳转:配置 内容 > 跳转方式 后,内容文字的鼠标指针变为手型,点击执行跳转。该行为仅在发布后的页面中生效,编辑器画布内点击没有反应。

  • 无数据:数据源没有返回记录时,组件显示空状态占位图,不展示任何记录。


备注

未配置 跳转方式 时,内容区域依然可点击:在发布后的页面中点击会在新标签页打开告警控制台,并传递该记录的告警 ID。这是列表的默认行为,若数据中不含告警 ID 字段,打开的页面无法定位到具体告警。在 跳转方式 中指定目标或选择不跳转,即可覆盖该默认行为。