左侧边栏 / 状态栏 —— 导航指南
网关 Web UI 的所有页面上,左侧边栏(纵向图标菜单)与左下角状态栏(横向快捷操作)始终可见。本文是一份导航索引,一眼看清每个图标通向何处。
1. 左侧边栏(纵向)—— 11 个图标 + Logo
┌──────┐
│ 🌱 │ PlantPulse 로고 → /ui/main (홈)
├──────┤
│ 🔌 │ 프로토콜 연결하기 → /ui/connect/connect
│ 📋 │ 연결된 목록 → /ui/connect/list
│ 🧊 │ 애플리케이션 → /ui/apps
│ 🌿 │ OPC-UA 노드 뷰어 → /ui/opcua
│ 🗄 │ 포인트 검색 (NEW) → /ui/point
│ 📑 │ 시스템 로그 → /system/log/list
│ 🔀 │ 노-코드 플로우 → /ui/flow
│ 📊 │ 고급 대시보드 ★ → http://게이트웨이:3000
│ ⚙ │ 환경 설정 → /ui/system/config
│ 📖 │ 매뉴얼 ★ (이 문서) → /public/docs/index.html
│ ↻ │ 페이지 새로고침 → window.location.reload()
│ 🚪 │ 로그아웃 → /login/logout
└──────┘
(★ 가 붙은 항목은 새 창으로 열립니다.)
1.1 各图标的用途与首个操作
| # | 图标 (fa) | 菜单 | 用来做什么? | 详情 |
|---|---|---|---|---|
| 1 | fa-plug | 连接协议 | 注册新的 PLC / OPC-UA / MQTT / 模拟器等连接 —— 从 44 个协议卡片中选择 | 协议选择(44 个卡片) → 添加新 PLC 连接 |
| 2 | fa-list | 已连接列表 | 在一个界面内对已注册的 OPC 及其标签进行启动/停止/编辑/写值 | 连接列表 / 标签列表界面 |
| 3 | fa-cubes | 应用程序 | 启动/停止基于 Docker 的附属应用(Grafana / Node-RED / HiveMQ / Cassandra ...)及查看日志 | 应用程序管理 |
| 4 | fa-sitemap | OPC-UA 节点查看器 | 网关内置 OPC-UA 服务器树 —— 与外部 SCADA 所见完全一致 + 实时曲线 | OPC-UA 节点查看器 |
| 5 | fa-database | 数据点检索 (NEW) | 查询时序数据(tm_tag_point)—— 时间段 + OPC + 标签筛选 → 结果表 + CSV 下载 | 数据点检索 |
| 6 | (custom) | 系统日志 | 检索 Cassandra pe.app_system_log —— 时间段 + 级别筛选 / 右上角 unread 徽标 | 查看系统日志 |
| 7 | fa-project-diagram | 无代码流程 | 内嵌 Node-RED —— 通过标签读/写节点实现自动化 / 外部系统对接 | 开始使用流程 |
| 8 | fa-tachometer-alt | 高级仪表板 ★ | 在新窗口中打开 :3000(通常为 Grafana)。各站点可能不同 | (外部工具) |
| 9 | fa-cog | 环境设置 | app.properties CodeMirror 编辑器 —— 所有设置集中管理 + 36 种系统标签索引 | 环境设置 |
| 10 | fa-book-open | 手册 ★ | 在新窗口打开本文档 (mkdocs) | — |
| 11 | fa-retweet | 页面刷新 | 强制 reload —— 绕过浏览器缓存(window.location.reload(true)) | — |
| 12 | fa-sign-out-alt | 注销 | 结束会话 → 跳转至 /login/form | 登录界面 |
1.2 首次使用时的推荐顺序
- 连接协议 (1) → 选择首次注册的 PLC 类型(例如:Modbus / OPC-UA / 模拟器)
- 已连接列表 (2) → 点击已注册 PLC 的开始采集按钮,确认数据是否进入
- OPC-UA 节点查看器 (4) → 确认外部 SCADA 的可见效果(可用 UaExpert 等测试)
- 无代码流程 (7) → 编写流程,决定如何加工采集到的标签 / 如何发送到外部
- 环境设置 (9) → 微调 MQTT / Sparkplug / TTL / 密钥等系统策略
2. 左下角状态栏(横向)—— 7 个快捷操作 + 页脚
┌─────────────────────────────────────────────────────────────────┐
│ KOPENS Edge | 🎬 🔁 🗑 ⏱ 📄 🔌 ☁ | V2026.05.10 │
└─────────────────────────────────────────────────────────────────┘
| # | 图标 | 动作 | 详情 |
|---|---|---|---|
| 1 | 🎬 fa-projector | 系统重启 | OS 本身 —— 3-5 分钟,PLC 采集中断 |
| 2 | 🔁 fa-repeat-1-alt | 应用程序重启 | 仅 Tomcat —— 30-60 秒 |
| 3 | 🗑 fa-trash | 清理临时文件 | 磁盘空间不足时 |
| 4 | ⏱ fa-stopwatch | 备份 | 配置 + DB |
| 5 | 📄 fa-file-alt | 日志下载 | 诊断用 zip |
| 6 | 🔌 fa-microchip | O/S 及固件升级 | 风险最高 |
| 7 | ☁ fa-cloud-download | S/W 升级 | 从下载服务器获取新构建 |
→ 各操作的具体行为 / 耗时 / 注意事项:状态栏快捷操作(所有页面通用)
页脚右侧同时显示当前 SW 版本 +(与下载服务器比对结果)红色 可升级! 或 灰色 未连接 徽标。
3. 左上角 —— Logo / 主机名
┌──────────────┐
│ 🌱 플랜트펄스 │
│ 엣지│ (HOSTNAME 뱃지 — 어느 게이트웨이인지 구분)
└──────────────┘
- 点击 → 跳转至
/ui/main(主界面 30 个卡片一览) - 头部区域的手册图标已更改为
fa-book-open(原fa-book→ 翻开的书本形状)
4. 各页面的附加导航
| 页面 | 附加跳转点 |
|---|---|
/ui/main | 点击卡片 → 对应菜单界面。点击计数器(已连接列表 N)→ list。点击*系统错误(今日)*红色数字 → 系统日志 |
/ui/connect/list | OPC 行操作 ▶ ⏹ 🔧 🗑 / 标签行 ✏ 内联写入 / 📈 tag-view 曲线 |
/ui/connect/tag-view | 头部 ← 返回 → 回到 list |
/ui/opcua | 点击树节点 → 右侧详情 + 曲线。NodeId 复制图标 |
/ui/apps | + 部署新应用 / 点击卡片端口 → 在新窗口打开该应用 |
/system/log/list | 左侧检索条件表单 / 右上角 🗑 全部删除(确认后) |
/ui/system/config | 头部 ← 返回 → main / 💾 保存(提示重启) |
5. 快捷操作模式
| 目的 | 捷径 |
|---|---|
| 快速查看今日 ERROR | 主界面 → 点击*系统错误(今日)*红色数字 |
| 现在 PLC 是否真的已连接? | 主界面点击已连接列表 (N) → 左侧 OPC 表连接状态列 |
| 昨天 13:00 某个标签的值 | 侧边栏 🗄 数据点检索 → 时间段 / OPC / 标签 → 检索 → CSV |
| 外部 SCADA 看到的节点树 | 侧边栏 🌿 OPC-UA 节点查看器 |
| 当前运行中的容器 | 主界面Docker卡片 或 侧边栏 🧊 应用程序 |
| 只改一行环境变量 | 侧边栏 ⚙ → 编辑器搜索 (Cmd+F) → 修改一行 → 保存 → 🔁 重启 |
| 网关 OS 当前卡死 | 状态栏 🎬 系统重启(3-5 分钟) |
| 应用新构建 | 状态栏 ☁ S/W 升级(仅当徽标为红色时) |
6. 了解更多
- 各卡片含义 / 刷新周期:主界面 —— 卡片 / 操作 / 刷新周期完全指南
- 7 个快捷操作详解:状态栏快捷操作
- 手册完整目录:首页