# 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-07-06 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # AGV SLAM 前端管理页面 基于 Vue 3 + Vite 的 AGV 清洁机器人 SLAM 建图与定位管理前端。 --- ## 一、环境安装（首次部署在 robot 上执行） ### 1.1 安装 nvm（Node 版本管理） ```bash curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash # 重新加载 shell 配置 source ~/.bashrc # 验证 nvm --version ``` 如果下载慢，可使用国内镜像： ```bash export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node curl -o- https://gitee.com/mirrors/nvm/raw/v0.39.7/install.sh | bash source ~/.bashrc ``` ### 1.2 安装 Node.js ```bash # 安装 Node.js 21.7.1 nvm install 21.7.1 nvm use 21.7.1 nvm alias default 21.7.1 # 验证 node -v # 应输出 v21.7.1 npm -v ``` ### 1.3 安装 pnpm ```bash npm i pnpm -g pnpm --version ``` ### 1.4 安装 nginx ```bash sudo apt update sudo apt install -y nginx sudo systemctl enable nginx sudo systemctl start nginx # 验证 nginx -v ``` ### 1.5 nginx 反向代理配置 创建代理配置文件： ```bash sudo tee /etc/nginx/sites-available/agv-slam << 'EOF' server { listen 9000; server_name _; # 前端静态文件 root /var/www/yanfeng-admin/dist; index index.html; # gzip 压缩 gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript image/svg+xml; # API 反向代理到 visualweb（端口 28256） location /prod-api/ { proxy_pass http://127.0.0.1:28256/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_read_timeout 60s; } # WebSocket 代理 location /slam_result { proxy_pass http://127.0.0.1:28256; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } location /trajectory_list { proxy_pass http://127.0.0.1:28256; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } location /submap_query { proxy_pass http://127.0.0.1:28256; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } location /figure { proxy_pass http://127.0.0.1:28256; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } # SPA 路由：所有非文件请求返回 index.html location / { try_files $uri $uri/ /index.html; } } EOF # 启用站点 sudo ln -sf /etc/nginx/sites-available/agv-slam /etc/nginx/sites-enabled/ sudo rm -f /etc/nginx/sites-enabled/default sudo nginx -t sudo systemctl reload nginx ``` --- ## 二、前端开发 ### 2.1 安装依赖 ```bash cd /home/linaro/project/lslam_cleaning_robot_web pnpm install ``` ### 2.2 启动开发服务器 ```bash pnpm run dev ``` 默认端口 **2026**，浏览器访问 `http://localhost:2026`。 开发模式下 API 请求通过 Vite 代理转发到后端（需修改 `vite.config.js` 中的 `target` 为 robot IP）。 --- ## 三、构建与部署 ### 3.1 生产构建 ```bash cd /home/linaro/project/lslam_cleaning_robot_web pnpm run build ``` 构建产物输出到 `dist/` 目录。 ### 3.2 部署到 nginx ```bash # 创建部署目录 sudo mkdir -p /var/www/yanfeng-admin # 复制构建产物 sudo cp -r dist/* /var/www/yanfeng-admin/dist/ # 如果使用 visualweb 内置静态文件服务（端口 28256） export SLAM_ROOT="/home/linaro/project/agv_slam_a" cp -r dist/* $SLAM_ROOT/html/ ``` ### 3.3 访问 - **通过 nginx（推荐）**: `http://:9000` - **直连 visualweb**: `http://:28256` --- ## 四、系统架构 ``` ┌──────────────┐ 端口 9000 ┌──────────────┐ │ 浏览器 │ ───────────────► │ nginx │ │ (前端 SPA) │ │ 反向代理 │ └──────────────┘ └──────┬───────┘ │ ┌───────────────────┼───────────────────┐ │ /prod-api/* │ WS 代理 │ ▼ ▼ │ ┌──────────────┐ ┌──────────────┐ │ │ visualweb │ │ rosbridge │ │ │ (28256) │ │ (9090) │ │ └──────┬───────┘ └──────┬───────┘ │ │ │ │ ▼ ▼ │ ┌─────────────────────────────────┐ │ │ Cartographer SLAM 引擎 │ │ └─────────────────────────────────┘ │ ``` --- ## 五、后端服务 后端是 `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 | 服务端推送绘图指令 | 详细接口说明见：`/home/linaro/project/agv_slam/docs/frontend_api.md` --- ## 六、代理配置 ### Vite 开发代理（vite.config.js） ```js proxy: { '/api': { target: 'http://:28256', changeOrigin: true, rewrite: (p) => p.replace(/^\/api/, ''), } } ``` ### nginx 生产代理 nginx 配置 `/prod-api/*` → `http://127.0.0.1:28256/`（见上方完整配置）。 --- ## 七、技术栈 - **框架**: Vue 3 (Composition API + `