Pages

控件:自定义输出(Custom Output)

Custom Output(自定义输出) 控件提供了最大程度的可视化灵活性,允许用户上传并使用自定义 SVG 图形,用于显示系统信息和状态。
该控件专为标准组件无法满足需求、需要定制展示的场景而设计。通过将控件绑定到变量,SVG 图像可以根据系统状态实时变化,动态反映当前情况。

主要功能:

  • 自定义 SVG 集成:
    用户可上传自己的 SVG 文件,创建完全自定义的图形表示,例如动画组件、复杂图标或符合具体应用需求的状态指示器。

  • 动态状态显示:
    可与 PLC 或运行时变量绑定。根据变量的值,可动态显示或隐藏 SVG 中的不同图层或元素,提供高度可视化的反馈。

  • 高级可视化能力:
    特别适合标准控件(如仪表或文本)无法满足的高级应用,例如机器示意图、工艺流程图或多状态图标。

  • 界面风格一致性:
    因为用户自定义 SVG 图形,可确保其与整个界面视觉风格统一,增强整体专业感和一致性。

应用场景:

  • 状态可视化:
    使用自定义图标或插图展示机器的不同状态(如“运行”、“停止”、“故障”),图形随系统数据实时变化。

  • 流程图与结构图:
    嵌入机器结构图或工艺流程图,根据实时数据突出显示不同部分或流程节点。

  • 自定义指示器:
    为特定系统或行业需求设计专属图形,用于标准控件无法实现的可视化需求。

SVG ID 参考表:

# 元素说明 SVG ID
1 当前数值显示 value_tspan
2 单位 label_unit_tspan
3 控件根容器(Root) custom_control_root

数据 JSON 接口

{
  "value": "55555.123456789",
  "label1": "",
  "label2": "",
  "unit": "rpm",
  "general": {
    "rootClass": ""
  }
}
{ "value": "55555.123456789", "label1": "", "label2": "", "unit": "rpm", "general": { "rootClass": "" } }
custom_control_root
label_unit_tspan
value_tspan