组件参考

IronFlock Board 由组件构建而成。每种组件类型都有特定用途——从显示实时数据到捕获用户输入。通过从组件面板将组件拖放到 Board 画布上来添加任何组件，然后通过设置面板进行配置。

组件分为四组：数据可视化用于图表和状态显示，内容与媒体用于静态和富文本内容，输入与控制用于捕获输入和发送命令，导航用于在 Board 页面之间跳转。

数据可视化

将实时数据和历史数据转化为图表、仪表盘和状态显示的组件。

笛卡尔图表

以折线图、柱状图或组合形式显示时间序列或分类数据。支持在同一图表中显示多个数据系列。

适用场景： 跟踪传感器值随时间的变化趋势、并排比较多个信号、以柱状图显示每日总量。

您可以配置的内容：

• 一个或多个数据系列，每个指向应用中的一个数据列
• 每个系列的图表类型：折线、柱状或气泡
• X 轴类型：基于时间或分类
• Y 轴标签和时间窗口（例如最近 5 分钟按分钟聚合）
• 每个系列的颜色

仪表盘

显示单个实时数值的径向仪表盘，带有彩色阈值区域。

适用场景： 温度、压力、液位或任何需要通过绿色/黄色/红色区域一目了然查看状态的数值。

您可以配置的内容：

• 要读取的数据列（始终显示最新值）
• 单位和小数精度
• 颜色区域边界（例如安全：0–60，警告：60–80，危险：80–120）
• 可选：对最近 N 个读数取平均值以平滑噪声

数值显示

显示一个或多个带标签和单位的单个数值。简洁精炼——非常适合 KPI 卡片。

适用场景： 以数字形式显示当前温度、运行时间、最近事件或任何关键指标。

您可以配置的内容：

• 一个或多个数据列，每个带有标签和单位
• 小数精度
• 每个数值的文字颜色

信号灯

紧凑型状态指示器——圆形或方形——根据当前值变换颜色，提供一目了然的状态看板。

适用场景： 设备在线/离线看板、多资产的正常/警告/错误状态、基于阈值的状态指示灯。

您可以配置的内容：

• 一个或多个信号，每个读取一个数据列
• 每个信号的颜色映射规则：精确匹配（例如 ONLINE）或数值比较（例如 >=70）
• 布局（水平或垂直）和形状（圆形或方形）
• 可选标题和副标题

环形图

显示比例段的环形图。

适用场景： 显示分布——例如设备在线与离线、按产品类型的产量占比。

您可以配置的内容：

• 段，每个带有标签、颜色和数据列（或固定值）
• 镂空大小（控制内圈直径）

表格

以表格格式显示数据行，列可配置。

适用场景： 显示设备列表、近期事件、检查记录或任何结构化数据集。

您可以配置的内容：

• 列，每列包含表头、数据列和显示类型
• 行高和表头字体大小
• 显示行数

列显示类型： 纯文本、数字、状态（将值映射到颜色）、布尔值、图片或按钮（可点击链接）。

热力图

基于网格的热力图，用于在两个维度上可视化数据强度。

适用场景： 按小时和星期几显示能耗、按班次显示设备利用率、跨时间的异常模式。

您可以配置的内容：

• X 轴（例如一天中的小时）和 Y 轴（例如星期几）列
• 热力值的数据列
• 最小/最大刻度以及使用连续还是分段颜色渐变

状态历史

水平时间线，显示状态随时间的变化，每个资产一行。

适用场景： 设备状态历史（运行 / 停止 / 维护）、班次日志、事件时间线。

您可以配置的内容：

• 状态名称及其颜色（例如运行 = 绿色，故障 = 红色）
• 时间戳、状态值和资产名称的数据列

地图

在交互式地图上显示地理数据。支持圆形标记和轨迹线。

适用场景： 显示设备位置、车辆跟踪、现场资产定位。

您可以配置的内容：

• 地图样式（亮色或暗色）
• 一个或多个系列：圆形（最新位置标记）或线条（移动轨迹）
• 纬度和经度的数据列
• 按设备或资产拆分数据的透视列

SCADA

渲染来自 ThingsBoard SCADA 库的交互式工业 SVG 符号——泵、阀门、储罐、电机、管道、仪表——具有实时数据绑定和基于状态的着色。

适用场景： 工艺流程图和工厂模拟画面——在原理图上显示泵、阀门、储罐和流量的实时状态。

您可以配置的内容：

• 要显示的符号类型
• 驱动符号状态的数据绑定（运行/停止、开启/关闭、液位）
• 状态颜色（运行、停止、警告、危险）及其他各符号样式

如需构建完整工艺画面，请参阅 SCADA。

内容与媒体

用于静态和富文本内容的组件——图片、格式化文本和嵌入式网页。

图像

从 URL 显示静态图片。适用于 Logo、示意图或操作指引图形。

图像叠加

在背景图片上方放置实时数据值——非常适合平面图、示意图或原理图。

适用场景： 在工厂平面图上叠加温度显示，在储罐示意图上显示液位。

您可以配置的内容：

• 背景图片 URL
• 覆盖物标注：进度条或文字标签，定位在图片上的相对坐标处
• 每个标注的数据列（实时值或固定值）

Markdown

渲染 Markdown（CommonMark 和 GitHub Flavored Markdown），支持语法高亮代码块和实时变量插值。

适用场景： 文档面板、操作说明，或将格式化文本与实时数据值混合的动态备注。

您可以配置的内容：

• Markdown 源文本
• 通过 {{variableName}} 在文本中引用的变量，每个绑定到数据列或固定值

标签

显示单个可配置文本标签，完全控制字体排版和对齐方式。

适用场景： 分区标题、说明文字、静态注释，或以文本形式渲染的单个动态值。

您可以配置的内容：

• 要显示的文本（保留换行符）
• 字体大小、颜色、粗细和样式
• 水平和垂直对齐方式，以及背景颜色

嵌入

在隔离的 iframe 中嵌入外部网页内容——单个页面，或以响应式网格排列的多个页面。

适用场景： 在 Board 内集成第三方仪表板、文档、外部工具或任何可通过网页访问的页面。

您可以配置的内容：

• 要嵌入的 URL（目标网站必须允许 iframe 嵌入）
• 显示在内容上方的可选标题
• 多嵌入模式：多个 URL 以网格方式排列，间距可配置

输入与控制

捕获用户输入或将命令和过滤条件发送回平台的组件。

表单

可配置的数据录入表单，将用户输入写回应用的数据后端。

适用场景： 手动数据采集——检查记录、维护日志、操作员输入、参数设定值。

您可以配置的内容：

• 各类型表单字段：文本、数字、复选框、多行文本、下拉菜单、日期/时间
• 每个字段的选项：标签、必填、默认值、验证、最小/最大值以及目标数据列
• 可选标题、副标题，以及是否以对话框形式打开表单

开关

一个或多个 Material Design 拨动开关，反映实时值并在拨动时触发设备操作。

适用场景： 设备开关、切换二进制设备设置、从仪表板发送控制命令。

您可以配置的内容：

• 一个或多个开关，每个读取一个数据列
• 开/关的状态映射：精确值或数值比较（例如 >50）
• 拨动时调用的目标应用、设备和操作主题
• 每个开关的标签和值颜色

筛选下拉菜单

预定义选项的下拉菜单，将所选值作为过滤参数发布供其他组件使用。

适用场景： 让用户按设备类型、产线、位置或任意类别筛选整个 Board。

您可以配置的内容：

• 下拉菜单上方显示的标签
• 其他组件在数据查询中引用的参数键
• 选项列表，每个选项包含标签和值

筛选日历

日期/时间范围选择器——单日期或范围——将所选时间戳存储为其他组件的过滤参数。

适用场景： 时间序列仪表板、历史分析，以及带有用户可选时间窗口的报表。

您可以配置的内容：

• 开始和结束参数键（单日期模式使用一个，范围模式同时使用两个）
• 同时显示的月份数（1–3）
• 输入标签

导航

用于在多页 Board 的页面和分区之间跳转的组件。

导航栏

带有可点击标题或品牌名称及多个路由项目的水平顶部导航栏。

适用场景： 多页 Board 各页面之间的顶级导航。

您可以配置的内容：

• 标题/品牌文字及其目标路由
• 导航项目，每个包含标签、Material 图标和路由
• 字体大小、粗细和颜色
• 通过 {{variable}} 替换实现动态路由段

导航按钮

单个可点击按钮，路由到另一页面或执行浏览器后退导航。

适用场景： 返回按钮、行动号召链接，或跳转到特定 Board 视图。

您可以配置的内容：

• 按钮标签和可选的 Material 图标
• 目标路由（留空则自动后退导航）
• 字体大小和颜色
• 通过 {{variable}} 替换实现动态路由段

侧边导航

带有 Material 图标和基于路由高亮当前项目的垂直侧边菜单。

适用场景： 包含多个分区或视图的仪表板的持久侧边导航。

您可以配置的内容：

• 带有可选路由的标题
• 导航项目，每个包含标签、Material 图标和路由
• 基于当前路由的当前项目高亮
• 字体大小、粗细和颜色