画布
目录
- 概述
- 界面构成 — 3个界面
- 列表界面 (
/canvas/index) - 编辑界面 (
/canvas/edit) - 11种小部件详解
- 显示(view) / 全屏(screen)模式
- 应用场景
- 常见问题
- 相关界面
概述
画布菜单是在 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 | 说明 |
|---|---|---|
| 画布 ID | canvas_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 | 🚦 | kpi | KPI |
| 8 | 📌 | memo | 备忘录 |
| 9 | 🎖 | iso | ISO (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 | 形式 |
|---|---|---|
| 标签 ID | new_tag_input | 自动补全 |
序列 (timeseries)
| 输入 | id | 形式 |
|---|---|---|
| 标签 ID | ts_tag_input | 自动补全 |
| 期间 | ts_period | 最近 1小时/6小时/12小时/1日(默认) |
在图纸上显示小型时序图表，可直观查看变化趋势。
状态 (asset_health)
通过颜色亮灯显示资产的健康状态。
| 输入 | id | 形式 |
|---|---|---|
| 资产 ID | ah_asset_input | 自动补全 (资产树) |
颜色分为 状态码 的 4 个阶段 (NORMAL/WARN/ERROR/UNKNOWN)。
文档 (document)
在图纸上显示注册在资产中的图纸、手册、QR 码等文档。
| 输入 | id | 形式 |
|---|---|---|
| 资产 ID | doc_asset_input | 自动补全 |
时间线 (asset_timeline)
在图纸上以小型形式显示资产的运行/停止·事件时间线。
| 输入 | id | 形式 |
|---|---|---|
| 资产 ID | tl_asset_input | 自动补全 |
| 显示范围 | tl_range | 最近 1·3·6·12·24小时(默认) |
仪表盘 (gauge)
将标签值的当前位置通过仪表盘可视化。
| 输入 | id | 形式 | 默认值 |
|---|---|---|---|
| 标签 ID | gauge_tag_input | 自动补全 | — |
| 最小值 | gauge_min | 数字 | 0 |
| 最大值 | gauge_max | 数字 | 100 |
| 警告阈值 | gauge_warn | 数字 | 70 |
| 危险阈值 | gauge_error | 数字 | 90 |
KPI
通过颜色等级（绿/黄/红）显示核心指标。
| 输入 | id | 形式 | 默认值 |
|---|---|---|---|
| 标签 ID | kpi_tag_input | 自动补全 | — |
| 标签 | kpi_label | 文本 | — |
| 正常最大值 | kpi_normal_max | 数字 | 50 |
| 警告最大值 | kpi_warn_max | 数字 | 80 |
数值在正常最大值以下为绿色，至警告最大值为黄色，超出则为红色。
备忘录 (memo)
在图纸上直接编写操作员引导文、标签、注释。
| 输入 | id | 形式 | 默认值 |
|---|---|---|---|
| 文本 | memo_text | textarea (3行) | — |
| 字体大小 | memo_font_size | 数字 (8~48) | 14 |
| 颜色 | memo_color | 颜色选择器 | #333333 |
ISO (OEE/RAM/EMS)
将 ISO 数据及分析图表嵌入图纸。
| 输入 | id | 形式 |
|---|---|---|
| 子页签 | iso-sub-tabs | OEE / RAM / EMS 切换 |
| 资产 ID | iso_asset_input | 自动补全 |
根据选定的子页签(oee_chart/ram_chart/ems_chart)，在图纸上显示该资产的相应分析图表。详细指标定义请参考 ISO 数据及分析。
数据表格 (data_table)
在图纸上以表格形式布置资产的多个核心标签。
| 输入 | id | 形式 |
|---|---|---|
| 资产 ID | tbl_asset_input | 自动补全 |
| 标签 | tbl_label | 文本 (可选) |
图像 (image)
在图纸上显示外部 URL 的图像（例如：CCTV 快照·Webcam）。
| 输入 | id | 形式 | 默认值 |
|---|---|---|---|
| 图像 URL | img_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 小部件 |
| 团队共享仪表板 | 编辑画布 → 开启共享使用 + 选择安全组 → 自动共享给该组用户 |
常见问题
Q. 没有 SVG 也能创建画布吗？ A. 虽然可以创建，但由于没有布置小部件的坐标，没有实际意义。建议先上传平面图、管道图或工艺图的 SVG。
Q. 从哪里获取 SVG 文件？ A. 可向各站点的图纸负责人申请，或使用外部工具将普通图纸 (PDF·图像) 转换为 SVG 使用。
Q. 小部件布置错了怎么办？ A. 点击画布上的标记即可打开选项菜单，进行移动、删除或编辑。
Q. 同一个标签可以在多个位置显示吗？ A. 可以，同一个标签可以在多个小部件中显示。例如，将一个资产的温度同时通过仪表盘、序列、KPI 三种小部件显示。
Q. 如何将画布共享给其他用户？ A. 在编辑界面的 共享设置 面板中，勾选 将此画布与安全组的用户共享 并选择安全组。该组用户可在其画布列表的“接收共享”区域中确认。
Q. 在显示模式下，小部件显示为灰色。 A. 这是因为该小部件指向的标签或资产数据尚未进入。请在 仪表板 界面或 连接管理 中确认数据采集情况。
Q. 开启全屏模式后，一段时间后屏幕会锁定。 A. 这是由于浏览器或操作系统的屏幕保护程序/会话超时引起的。若是现场显示屏，请关闭浏览器的自动屏幕保护，并在系统设置中禁用 OS 屏幕保护。
Q. 我想自动更新仪表盘的阈值。
A. 可以使用 流 中的 flow_update_tag_alarm_band_numeric 节点来实现自动化。
Q. 数据表格小部件显示哪些列？ A. 自动显示注册在该资产中的核心标签。各资产的核心标签映射可在 工厂管理 的资产树中设置。
Q. 如果图像小部件的刷新间隔设置得太短会怎样？ A. 可能会给外部图像服务器带来负担，并增加网络流量。建议设置为 5 秒或更长。
Q. 我想备份画布或将其迁移到其他环境。 A. 界面不提供直接的 export 功能。请单独备份 SVG 文件，如需迁移画布定义（小部件映射），请咨询系统管理员。