跳到主要内容

画布

目录​

概述​

画布菜单用于在 SVG 图纸上布置实时控件（标签值、图表、仪表盘、KPI、备注等），构建运行监视用仪表板（SCADA 形式）的界面。操作人员无需图形编辑技能，只需点击即可在平面图/管道图/工艺流程图上放置数据显示控件。

界面内部 URL用途
列表/canvas/index我创建的画布 + 共享给我的画布卡片网格
编辑/canvas/edit/{canvas_id}SVG 上传 + 11 种控件布置 + 共享设置
显示/canvas/view/{canvas_id}以普通模式查看画布（含页头与菜单）
全屏/canvas/screen/{canvas_id}仅全屏显示画布（用于现场监视器、显示屏）

路径：左侧菜单 > Visualization > 画布（内部 URL /canvas/index）

界面构成 — 3 个界面​

[목록]  →  [편집]  →  [표시 / 전체화면]
界面主要使用者
列表所有用户
编辑画布所有者 / 共享安全组内的用户
显示·全屏所有已认证用户（已共享时）

列表界面 (/canvas/index)​

🎨 캔버스  [총 N 개]                            [➕ 새 캔버스] [↻]

顶部工具​

控件动作
新建画布红色 + ➕ — addCanvas() — 打开新建画布表单
刷新红色 + ↻
共 N 个我的画布 + 共享给我的画布合计 (canvas_total_count)

左侧边栏 (col-lg-2) — 筛选​

控件宽度说明
站点选择器 (filter_site)100%全部站点 + 已注册站点
画布名称 (search_name)100%placeholder："画布名称"
说明 (search_desc)100%placeholder："说明"
搜索 (filterList())100px按上述条件刷新卡片列表

右侧 (col-lg-10) — 卡片网格​

┌─ 캔버스 목록 [N] · 검색된 캔버스 ───────────────────┐
│                                                  │
│  ┌─카드─┐ ┌─카드─┐ ┌─카드─┐ …                   │ ← canvas_list_view
│  │ 260px│ │ 260px│ │ 260px│                       │   (eq-card 260px 그리드)
│  └─────┘ └─────┘ └─────┘                          │
└──────────────────────────────────────────────────┘

每张卡片以 260px 宽的统一尺寸自动排列到网格中，整张卡片区域均可点击（无需设置中单独的"显示"按钮，点击卡片即可进入画布显示界面）。

项目说明
标题画布名称
说明画布说明
站点所属站点
所有者注册用户 ID
修改日期最后修改时间
类型my（我创建的）/ shared（共享给我的）— 以彩色徽标区分
点击卡片跳转至显示界面 (/canvas/view)
编辑 / 删除卡片右侧操作按钮 — 独立于卡片点击（阻止事件冒泡）

画布卡片将两组内容（我的画布 _myList + 共享给我的画布 _shareList）合并显示。可通过站点、名称、说明筛选缩小范围；若搜索结果为 0 条，则显示空状态提示界面（SVG 插图 + 提示信息）。

编辑界面 (/canvas/edit)​

界面由左侧 col-lg-3 属性面板 + 右侧 col-lg-9 画布预览组成。左侧包含两个上级标签页（基本信息 / 编辑）。

左侧 — 基本信息标签页​

基本信息面板​

输入项path说明
画布 IDcanvas_id仅在修改模式 (mode='U') 下显示（只读）
选择站点site_id站点名称 [说明] 选项
画布名称 ⭐canvas_title必填
说明canvas_desc自由文本

共享设置面板​

输入项path说明
启用共享share（复选框）"将此画布共享给安全组的用户。"
共享安全组share_security_id从安全策略中已注册的组中选择

左侧 — 编辑标签页​

上传要在画布中显示的 SVG 图纸 + 11 种控件面板。

SVG 图纸面板​

控件动作
选择文件 (svg_file_name)点击或文件夹图标 — 选择 .svg 文件
SVG 上传upload_btn — 将所选 SVG 应用到画布

SVG 即操作人员希望查看的平面图、管道图、工艺流程图等图纸。若无 SVG，画布区域将显示"请上传 SVG 图纸。"提示。

11 种控件面板​

在顶部标签页头选择控件种类，填写各标签页的输入项后点击布置按钮，即可通过点击在画布上指定位置（画布顶部会以黄色背景显示点击模式提示）。

标签页图标data-tab控件
1🏷tag_value标签值
2📈timeseries序列
3❤️asset_health状态
4📄document文档
5📊asset_timeline时间轴
6🌡️gauge仪表盘
7🚦kpiKPI
8📌memo备注
9🎖isoISO (OEE/RAM/EMS)
10📋data_table数据表格
11🖼image图片

已布置控件列表​

控件面板下方显示已布置的控件列表 (placed_widgets_list，最大 330px 滚动区域)。表头同时显示控件数量 (widget_count)。

空状态（控件为 0 个时）：

       ▦ (그리드 아이콘)
   배치된 위젯이 없습니다
상단 팔레트에서 위젯을 끌어서 캔버스에 배치하세요.

表单提交（左下角）​

按钮动作
列表 (☰)goIndex() — 返回画布列表
保存（蓝色）save() — 保存画布 + 控件 + tag_mapping_json 全部内容

右侧 — 画布预览​

区域说明
页头🖥 "画布预览"
布置模式提示 (placing_mode_indicator)正在通过点击指定控件位置时，以黄色背景显示提示 — "请点击以布置标签"及取消链接
主体（750px 高，overflow: auto）在 SVG 图纸上显示控件标记的区域

SVG 容器 (svg_container)​

  • 已上传 SVG 时，以 <svg> 渲染
  • 为空时显示空状态提示：
       🖼 (칠판 아이콘)
    SVG 도면이 없습니다
좌측 [설정] 탭에서 SVG 도면을 업로드하세요.

标记图层 (marker_layer)​

在布置的控件位置会浮现标记，点击标记可编辑控件（移动、删除、修改选项）。控件之间的连接线通过独立库 (leader-line) 进行可视化。

11 种控件详解​

以下整理各控件的输入字段与行为。所有控件均以标记形式布置在右侧画布上，并在显示模式 (/canvas/view) 下以实时数据刷新。

标签值 (tag_value)​

最简单的控件。将某个标签的当前值以大号数字显示在图纸上。

输入项id形式
标签 IDnew_tag_input自动补全

序列 (timeseries)​

输入项id形式
标签 IDts_tag_input自动补全
时间范围ts_period最近 1 小时/6 小时/12 小时/1 天（默认）

在图纸上显示小型时序图表，可一目了然地查看变化趋势。

状态 (asset_health)​

以颜色指示灯显示资产的健康状态。

输入项id形式
资产 IDah_asset_input自动补全（资产树）

颜色对应状态代码的 4 个等级（NORMAL/WARN/ERROR/UNKNOWN）。

文档 (document)​

在图纸上显示注册到资产的图纸、手册、二维码等文档。

输入项id形式
资产 IDdoc_asset_input自动补全

时间轴 (asset_timeline)​

在图纸上以小尺寸显示资产的运行/停机及事件时间轴。

输入项id形式
资产 IDtl_asset_input自动补全
显示范围tl_range最近 1·3·6·12·24 小时（默认）

仪表盘 (gauge)​

以仪表盘形式可视化标签值的当前位置。

输入项id形式默认值
标签 IDgauge_tag_input自动补全—
最小值gauge_min数值0
最大值gauge_max数值100
警告阈值gauge_warn数值70
危险阈值gauge_error数值90

KPI​

以颜色等级（绿色/黄色/红色）显示核心指标。

输入项id形式默认值
标签 IDkpi_tag_input自动补全—
标注kpi_label文本—
正常上限kpi_normal_max数值50
警告上限kpi_warn_max数值80

值小于等于正常上限为绿色，至警告上限为黄色，超出则为红色。

备注 (memo)​

在图纸上直接编写操作提示、标注、注释。

输入项id形式默认值
文本memo_texttextarea（3 行）—
字号memo_font_size数值 (8~48)14
颜色memo_color颜色选择器#333333

ISO (OEE/RAM/EMS)​

将 ISO 数据及分析图表嵌入图纸。

输入项id形式
子标签页iso-sub-tabsOEE / RAM / EMS 切换
资产 IDiso_asset_input自动补全

根据所选子标签页 (oee_chart/ram_chart/ems_chart)，在图纸上显示该资产对应的分析图表。详细指标定义请参阅 ISO 数据及分析。

数据表格 (data_table)​

以表格形式将资产的多个核心标签布置在图纸上。

输入项id形式
资产 IDtbl_asset_input自动补全
标注tbl_label文本（可选）

图片 (image)​

在图纸上显示外部 URL 的图片（例如 CCTV 快照、网络摄像头）。

输入项id形式默认值
图片 URLimg_url文本placeholder: https://...
标注img_label文本（可选）—
刷新间隔（秒）img_refresh数值0（无）

为 0 时仅加载一次；若有值，则按该秒数间隔自动刷新。

显示(view) / 全屏(screen) 模式​

模式内部 URL显示内容
显示/canvas/view/{canvas_id}画布 + 左侧菜单 + 顶部页头（普通视图）
全屏/canvas/screen/{canvas_id}仅画布铺满屏幕（无菜单、页头）

显示模式 (view.jsp)​

通过画布卡片的 ▶ 显示按钮进入。SVG 图纸上的所有控件均以实时数据刷新显示，可通过右上角的 ⛶ 全屏按钮切换至全屏模式。

全屏模式 (screen.jsp)​

用于在现场监视器、大型显示屏、派工看板等设备上展示。由于没有菜单和页头，画布本身将铺满整个屏幕。

显示模式下控件会自动以实时数据刷新。若无数据接入，控件将显示为空白或灰色。

应用场景​

场景步骤
在工艺流程图上显示实时温度/压力上传 SVG 工艺流程图 → 布置 N 个标签值控件（标签 ID 自动补全）
一览产线运行状态产线平面图 SVG → 按设备布置资产状态 (asset_health) 控件
现场显示屏用仪表板创建画布 → 布满屏幕布置控件 → 在现场 PC 上以全屏模式展示
CCTV + 运行数据整合界面一并布置图片控件（CCTV URL，5 秒刷新）与核心 KPI 控件
OEE 监视看板产线 SVG → ISO 控件 (OEE) + 资产状态控件 + 仪表盘控件组合
质量检查现状检查线 SVG → 数据表格控件 + 备注控件 + KPI 控件
团队共享仪表板编辑画布 → 启用共享 ON + 选择安全组 → 自动共享给该组用户

常见问题​

Q. 没有 SVG 也能创建画布吗？ A. 可以创建，但没有布置控件的坐标依据，意义不大。建议先上传平面图、管道图、工艺流程图的 SVG。

Q. SVG 文件从哪里获取？ A. 可向各站点的图纸负责人索取，或使用外部工具将普通图纸（PDF、图片）转换为 SVG 后使用。

Q. 控件布置错了怎么办？ A. 点击画布上的标记会打开选项菜单，可进行移动、删除、编辑。

Q. 同一标签可以显示在多个位置吗？ A. 可以，同一标签能在多个控件中显示。例如可将某资产的温度同时用仪表盘、序列、KPI 三种控件显示。

Q. 如何将画布共享给其他用户？ A. 在编辑界面的共享设置面板中勾选将此画布共享给安全组的用户，并选择安全组。该组用户可在自己的画布列表的"共享给我的"区域中查看。

Q. 显示模式下控件显示为灰色。 A. 这表示该控件所指向的标签、资产数据尚未接入。请在仪表板界面或连接管理中确认数据接入情况。

Q. 以全屏模式展示后，一段时间后屏幕锁定了。 A. 这是由浏览器或操作系统的屏幕保护/会话过期导致的。如果是现场显示屏，请关闭浏览器的自动屏幕保护，并在系统设置中同时禁用操作系统的屏幕保护。

Q. 想自动更新仪表盘的阈值。 A. 可使用流程中的 flow_update_tag_alarm_band_numeric 节点实现自动化。

Q. 数据表格控件会显示哪些列？ A. 自动显示该资产上注册的核心标签。各资产的核心标签映射可在工厂管理的资产树中设置。

Q. 图片控件的刷新间隔设得太短会怎样？ A. 可能给外部图片服务器带来负载，并增加网络使用量。建议设置为 5 秒以上。

Q. 想备份画布或迁移到其他环境。 A. 界面上未提供直接导出功能。请单独保管 SVG 文件；若需迁移画布定义（控件映射），请联系系统管理员。

相关界面​