# slam_web

**Repository Path**: theyn/slam_web

## Basic Information

- **Project Name**: slam_web
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-06
- **Last Updated**: 2026-09-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AGV SLAM 前端管理页面

基于 Vue 3 + Vite 的 AGV 清洁机器人 SLAM 建图与定位管理前端。

---

> ## 环境安装、构建部署、开机自启
>
> **所有部署相关内容统一以 [docs/开发部署指南.md](docs/开发部署指南.md) 为准**，
> 包括：环境安装（nvm/Node/pnpm/nginx）、开发服务器、生产构建、
> 前端/后端 systemd 开机自启服务、nginx 反向代理与常见问题排查。
> **多台设备批量部署（离线包 + ssh 分发 + 一键回滚）见 [docs/批量部署/批量部署.md](docs/批量部署/批量部署.md)。**
> 本 README 仅作快速入口与架构速览。

---

## 一、快速开始

```bash
# 1. 安装运行环境 + 项目依赖（首次）
cd /home/adw/Project/slam_web
bash scripts/install.sh
pnpm install

# 2. 开发调试
pnpm run dev              # 访问 http://<本机IP>:2026

# 3. 生产构建 + nginx 部署
pnpm run build && sudo bash deploy/deploy_nginx.sh   # 访问 http://<本机IP>:9000
```

详细步骤、systemd 开机自启（`slam-web-backend` / `slam-web-frontend`）、nginx 配置与卸载方式，见 **[开发部署指南](docs/开发部署指南.md)**。

---

## 二、系统架构

```
┌──────────────┐    端口 9000     ┌──────────────┐
│   浏览器     │ ───────────────► │    nginx     │
│ (前端 SPA)   │                  │  反向代理    │
└──────────────┘                  └──────┬───────┘
                                        │
                    ┌───────────────────┼───────────────────┐
                    │  /prod-api/*      │ WS 代理           │
                    ▼                   ▼                   │
            ┌──────────────┐   ┌──────────────┐             │
            │ visualweb    │   │ rosbridge    │             │
            │ (28256)      │   │ (9090)       │             │
            └──────┬───────┘   └──────┬───────┘             │
                   │                  │                     │
                   ▼                  ▼                     │
            ┌─────────────────────────────────┐             │
            │      Cartographer SLAM 引擎      │             │
            └─────────────────────────────────┘             │
```

本机另运行本仓库自带的服务（见下）：

| 服务 | 端口 | 作用 | 说明 |
|------|------|------|------|
| `slam-web-backend` | 18183 | MQTT 桥接 / 指令后端 | systemd 自启 |
| `slam-web-frontend` | 2026 | Vite dev server | systemd 自启 |
| `nginx` | 9000 | 生产静态托管 + 反代 | 指向 `/var/www/slam_web` |
| robot 侧 `visualweb` | 28256 | SLAM HTTP/WS 后端 | robot 侧启动，代理目标 |

---

## 三、robot 侧后端接口（visualweb 28256）

后端是 `cartographer_node` 中内嵌的 **visualweb** HTTP/WebSocket 服务器（端口 **28256**），提供以下接口：

### HTTP API

| 方法 | 路径 | 说明 |
|------|------|------|
| POST | `/load_config` | 加载 SLAM 配置 |
| POST | `/add_trajectory` | 启动新轨迹 |
| POST | `/load_state` | 加载已有 .pbstream 地图 |
| POST | `/save_state` | 保存地图（自动导出 .png/.yaml） |
| POST | `/map_png` | 获取地图 PNG（Base64） |
| POST | `/map_yaml` | 获取地图 YAML 内容 |
| GET | `/trajectory_state` | 查询所有轨迹状态 |
| POST | `/finish` | 结束全部轨迹 |
| POST | `/finish_trajectory` | 结束指定轨迹 |
| POST | `/optimize` | 手动触发全局优化 |
| POST | `/try_global_relocate` | 触发全局重定位 |
| POST | `/dirlist` | 列出地图目录文件 |
| POST | `/set_pose_rotation_deg` | 设置串口旋转角 |
| POST | `/reboot` | 退出进程 |

### WebSocket

| 端点 | 格式 | 说明 |
|------|------|------|
| `/slam_result` | JSON | 实时 SLAM 位姿结果 |
| `/trajectory_list` | JSON | Submap 列表 |
| `/submap_query` | JSON | Submap 纹理查询 |
| `/figure` | JSON | 服务端推送绘图指令 |

---

## 四、代理配置

### Vite 开发代理（vite.config.js）

```js
proxy: {
  '/api': {
    target: 'http://<robot-ip>:28256',  // ← 改为实际 robot IP
    changeOrigin: true,
    rewrite: (p) => p.replace(/^\/api/, ''),
  }
}
```

### nginx 生产代理

以 `deploy/nginx-slam.conf` 为准（`/prod-api/*`、WebSocket 路径均反代到 robot 后端），
配置变更后执行 `sudo nginx -t && sudo systemctl reload nginx`。

---

## 五、技术栈

- **框架**: Vue 3 (Composition API + `<script setup>`)
- **构建**: Vite 5
- **UI**: Element Plus, Vant 4
- **可视化**: ECharts 5, Leafer, Three.js, Konva
- **通信**: Axios (HTTP), ROSLib (ROS WebSocket), vue-native-websocket
- **状态管理**: Pinia (持久化插件)
- **路由**: Vue Router 4
- **工具**: Dayjs, JSEncrypt, NProgress, lodash-es

---

## 六、常用命令速查

```bash
# 前端
pnpm install                                   # 安装依赖
pnpm run dev                                   # 开发模式（端口 2026）
pnpm run build                                 # 生产构建
pnpm run build && sudo bash deploy/sync_dist.sh  # 同步 dist 到 nginx

# systemd 服务（详见 docs/开发部署指南.md）
sudo bash deploy/install_backend_service.sh     # 安装后端自启服务
sudo bash deploy/install_frontend_service.sh    # 安装前端自启服务
systemctl status slam-web-backend slam-web-frontend
journalctl -u slam-web-frontend -f
sudo systemctl status slam-web-backend
sudo systemctl stop slam-web-backend.service
sudo systemctl status slam-web-frontend

# nginx
sudo nginx -t                                   # 检查配置
sudo systemctl reload nginx                     # 重载配置

# node/nvm
nvm ls                                          # 查看已安装的 Node 版本
nvm use <ver>                                   # 切换版本

# 磁盘
df -h                                           # 查看空间占用
```

---

## 七、文档导航

| 文档 | 内容 |
|------|------|
| [开发部署指南](docs/开发部署指南.md) | 环境安装 / 开发 / 生产部署 / 开机自启 / 运维（单台） |
| [批量部署](docs/批量部署/批量部署.md) | 多台设备批量部署：离线包构建 / ssh 分发 / 幂等安装 / 回滚 |
| [后端API接口文档](docs/后端API接口文档.md) | 本仓库后端接口说明 |
| [系统架构](docs/系统架构.md) | 整体架构说明 |
| [前后端交互](docs/前后端交互/前后端交互.md) | 前端与后端数据流、WebSocket/MQTT 消息 |
| [地图编辑功能说明](docs/地图编辑功能说明.md) | 地图编辑器使用说明 |
| [建图使用指南](docs/建图使用指南.md) | 建图流程 |