From eb2eb764d79761cd109c01e951812175bddcfa4d Mon Sep 17 00:00:00 2001
From: zhangzq <zhangzhiqiang@yoycol.com>
Date: Wed, 21 Jan 2026 17:52:35 +0800
Subject: [PATCH] =?UTF-8?q?add:=E5=A2=9E=E5=8A=A0AGV=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nl/agv/controller/AgvCarController.java   |   53 +-
 .../org/nl/agv/service/dto/AgvStatus.java     |   15 +-
 .../org/nl/agv/service/entity/AgvCar.java     |    2 +-
 .../org/nl/agv/service/query/AgvCarQuery.java |    4 +
 .../controller/AgvLayoutController.java       |   16 -
 .../service/mapper/AgvLayoutMapMapper.java    |    2 +-
 .../mapper/mapping/AgvLayoutMapMapper.xml     |    4 +-
 .../layout/service/query/MapLayoutQuery.java  |    4 +
 .../java/org/nl/common/page/BaseQuery.java    |  139 +-
 .../org/nl/common/util/CustomColumnUtils.java |  174 ++
 nl-vue/src/api/agv/carApi.js                  |    4 +
 nl-vue/src/api/agv/mapApi.js                  |   33 +
 nl-vue/src/api/dev/fileApi.js                 |    6 +-
 nl-vue/src/views/nl_agv/car/car.vue           |  214 +++
 nl-vue/src/views/nl_agv/car/detail.vue        |  265 +++
 nl-vue/src/views/nl_agv/car/form.vue          |  161 +-
 nl-vue/src/views/nl_agv/car/index.vue         |  222 ++-
 .../views/nl_agv/layout/agv-map-editor.html   |  207 +++
 .../nl_agv/layout/components/DeviceMarker.vue |    0
 .../layout/components/PropertyModal.vue       |  124 ++
 .../src/views/nl_agv/layout/device-config.js  |  277 +++
 .../src/views/nl_agv/layout/device-loader.js  |  142 ++
 nl-vue/src/views/nl_agv/layout/index.vue      |    0
 .../views/nl_agv/layout/map-editor-main.js    |  777 +++++++++
 .../nl_agv/layout/map-editor-main.js.bak      |  718 ++++++++
 .../views/nl_agv/layout/map-editor-styles.css |  675 ++++++++
 .../nl_agv/layout/styles/map-editor.less      |  358 ++++
 .../views/nl_agv/layout/toast-notification.js |  390 +++++
 nl-vue/src/views/nl_agv/layout/toast-patch.js |  112 ++
 .../views/nl_agv/screen/agv-dashboardV2.html  | 1486 +++++++++++++++++
 .../views/nl_agv/screen/dashboard-styles.less |  642 +++++++
 nl-vue/src/views/nl_agv/screen/index.vue      |  644 +++++++
 32 files changed, 7661 insertions(+), 209 deletions(-)
 create mode 100644 nl-common/src/main/java/org/nl/common/util/CustomColumnUtils.java
 create mode 100644 nl-vue/src/api/agv/mapApi.js
 create mode 100644 nl-vue/src/views/nl_agv/car/car.vue
 create mode 100644 nl-vue/src/views/nl_agv/car/detail.vue
 create mode 100644 nl-vue/src/views/nl_agv/layout/agv-map-editor.html
 create mode 100644 nl-vue/src/views/nl_agv/layout/components/DeviceMarker.vue
 create mode 100644 nl-vue/src/views/nl_agv/layout/components/PropertyModal.vue
 create mode 100644 nl-vue/src/views/nl_agv/layout/device-config.js
 create mode 100644 nl-vue/src/views/nl_agv/layout/device-loader.js
 create mode 100644 nl-vue/src/views/nl_agv/layout/index.vue
 create mode 100644 nl-vue/src/views/nl_agv/layout/map-editor-main.js
 create mode 100644 nl-vue/src/views/nl_agv/layout/map-editor-main.js.bak
 create mode 100644 nl-vue/src/views/nl_agv/layout/map-editor-styles.css
 create mode 100644 nl-vue/src/views/nl_agv/layout/styles/map-editor.less
 create mode 100644 nl-vue/src/views/nl_agv/layout/toast-notification.js
 create mode 100644 nl-vue/src/views/nl_agv/layout/toast-patch.js
 create mode 100644 nl-vue/src/views/nl_agv/screen/agv-dashboardV2.html
 create mode 100644 nl-vue/src/views/nl_agv/screen/dashboard-styles.less
 create mode 100644 nl-vue/src/views/nl_agv/screen/index.vue

diff --git a/nl-agv/src/main/java/org/nl/agv/controller/AgvCarController.java b/nl-agv/src/main/java/org/nl/agv/controller/AgvCarController.java
index c061a24..9bb3057 100644
--- a/nl-agv/src/main/java/org/nl/agv/controller/AgvCarController.java
+++ b/nl-agv/src/main/java/org/nl/agv/controller/AgvCarController.java
@@ -13,8 +13,10 @@
 package org.nl.agv.controller;
 
 
+import com.alibaba.fastjson.JSONObject;
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import io.swagger.v3.oas.annotations.tags.Tag;
+import org.apache.commons.lang3.StringUtils;
 import org.nl.agv.service.AgvCarService;
 import org.nl.agv.service.entity.AgvCar;
 import org.nl.agv.service.query.AgvCarQuery;
@@ -23,9 +25,7 @@ import org.nl.common.pojo.CommonResult;
 import org.nl.agv.service.dto.AgvStatus;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.validation.annotation.Validated;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.*;
 
 import java.util.ArrayList;
 import java.util.List;
@@ -43,19 +43,42 @@ public class AgvCarController {
     private AgvCarService agvCarService;
 
     @GetMapping("status")
-    public CommonResult<List> status() {
+    public CommonResult<List> status(String carId) {
         List<AgvStatus> list = new ArrayList<>();
-        for (int i = 0; i < 4; i++) {
+        if (StringUtils.isNotEmpty(carId)){
+            AgvCar car = agvCarService.getOne(new LambdaQueryWrapper<AgvCar>().eq(AgvCar::getCarId, carId));
             AgvStatus build = AgvStatus.builder().status(2)
-                    .carId(String.valueOf(i + 1))
-                    .statusInfo("运行中").type("1")
+                    .carId(car.getCarId())
+                    .icon(car.getIcon())
+                    .type(car.getType())
+                    .statusInfo("运行中")
                     .action("请求取货")
-                    .icon("/Users/mima0000/Desktop/car.png")
-                    .actionInfo("申请取货")
-                    .x(String.valueOf(new Random().nextInt(1189) + 100))
-                    .y(String.valueOf(new Random().nextInt(889) + 100)).power("67")
-                    .angle("180").build();
+                    .actionInfo("申请取货中")
+                    .status(2)
+                    .statusInfo("运行中")
+                    .taskCode("33876")
+                    .x(new Random().nextInt(1189) + 100)
+                    .y(new Random().nextInt(1189) + 100)
+                    .power(66)
+                    .angle(new Random().nextInt(160) + 10).build();
             list.add(build);
+        }else {
+            for (int i = 0; i < 4; i++) {
+                AgvStatus build = AgvStatus.builder().status(2)
+                        .carId(String.valueOf(i + 1))
+                        .statusInfo("运行中").type("1")
+                        .action("请求取货")
+                        .actionInfo("申请取货中")
+                        .status(2)
+                        .statusInfo("运行中")
+                        .taskCode("33876")
+                        .icon("/Users/mima0000/Desktop/car.png")
+                        .x(new Random().nextInt(1189) + 100)
+                        .y(new Random().nextInt(1189) + 100)
+                        .power(66)
+                        .angle(new Random().nextInt(160) + 10).build();
+                list.add(build);
+            }
         }
         return CommonResult.data(list);
     }
@@ -73,8 +96,8 @@ public class AgvCarController {
      * agv列表
      * @return
      */
-    @GetMapping("save")
-    public CommonResult save(AgvCar car) {
+    @PostMapping("save")
+    public CommonResult save(@RequestBody AgvCar car) {
         agvCarService.save(car);
         return CommonResult.ok();
     }
@@ -83,7 +106,7 @@ public class AgvCarController {
      * 车俩基础信息
      * @return
      */
-    @GetMapping("agvCar")
+    @GetMapping("detail")
     public CommonResult<AgvCar> agvCar(String carId) {
         AgvCar car = agvCarService.getOne(new LambdaQueryWrapper<AgvCar>().eq(AgvCar::getCarId, carId));
         return CommonResult.data(car);
diff --git a/nl-agv/src/main/java/org/nl/agv/service/dto/AgvStatus.java b/nl-agv/src/main/java/org/nl/agv/service/dto/AgvStatus.java
index f704ecd..bf48759 100644
--- a/nl-agv/src/main/java/org/nl/agv/service/dto/AgvStatus.java
+++ b/nl-agv/src/main/java/org/nl/agv/service/dto/AgvStatus.java
@@ -22,10 +22,7 @@ public class AgvStatus {
      * 图标地址
      */
     private String icon="/Users/mima0000/Desktop/car.png";
-    /**
-     * 电量
-     */
-    private String power;
+
     /**
      * AGV状态未知
      * 待机中
@@ -57,13 +54,17 @@ public class AgvStatus {
     /**
      * 坐标X
      */
-    private String x;
+    private Integer x;
     /**
      * 坐标Y
      */
-    private String y;
+    private Integer y;
     /**
      * 航向角
      */
-    private String angle;
+    private Integer angle;
+    /**
+     * 电量
+     */
+    private Integer power;
 }
diff --git a/nl-agv/src/main/java/org/nl/agv/service/entity/AgvCar.java b/nl-agv/src/main/java/org/nl/agv/service/entity/AgvCar.java
index 0e1c995..74fa1e3 100644
--- a/nl-agv/src/main/java/org/nl/agv/service/entity/AgvCar.java
+++ b/nl-agv/src/main/java/org/nl/agv/service/entity/AgvCar.java
@@ -29,7 +29,7 @@ public class AgvCar implements Serializable {
      */
     private String type;
     /**
-     * 车辆图片
+     * 车辆图片ID
      */
     private String icon;
 }
diff --git a/nl-agv/src/main/java/org/nl/agv/service/query/AgvCarQuery.java b/nl-agv/src/main/java/org/nl/agv/service/query/AgvCarQuery.java
index 2014b2f..6bc0745 100644
--- a/nl-agv/src/main/java/org/nl/agv/service/query/AgvCarQuery.java
+++ b/nl-agv/src/main/java/org/nl/agv/service/query/AgvCarQuery.java
@@ -5,4 +5,8 @@ import org.nl.common.page.BaseQuery;
 import org.nl.layout.service.entity.AgvLayoutMap;
 
 public class AgvCarQuery extends BaseQuery<AgvCar> {
+    @Override
+    protected Class<AgvCar> getEntityClass() {
+        return AgvCar.class;
+    }
 }
diff --git a/nl-agv/src/main/java/org/nl/layout/controller/AgvLayoutController.java b/nl-agv/src/main/java/org/nl/layout/controller/AgvLayoutController.java
index 325e89a..6a305ab 100644
--- a/nl-agv/src/main/java/org/nl/layout/controller/AgvLayoutController.java
+++ b/nl-agv/src/main/java/org/nl/layout/controller/AgvLayoutController.java
@@ -47,22 +47,6 @@ public class AgvLayoutController {
     @Autowired
     private AgvLayoutService agvLayoutService;
 
-    @GetMapping("status")
-    public CommonResult<List> status() {
-        List<AgvStatus> list = new ArrayList<>();
-        for (int i = 0; i < 4; i++) {
-            AgvStatus build = AgvStatus.builder().status(2)
-                    .carId(String.valueOf(i + 1))
-                    .statusInfo("运行中").type("1")
-                    .action("请求取货")
-                    .actionInfo("申请取货")
-                    .x(String.valueOf(new Random().nextInt(1189) + 100))
-                    .y(String.valueOf(new Random().nextInt(889) + 100)).power("67")
-                    .angle("180").build();
-            list.add(build);
-        }
-        return CommonResult.data(list);
-    }
 
     /**
      * 地图列表
diff --git a/nl-agv/src/main/java/org/nl/layout/service/mapper/AgvLayoutMapMapper.java b/nl-agv/src/main/java/org/nl/layout/service/mapper/AgvLayoutMapMapper.java
index 9f67a49..d9e753b 100644
--- a/nl-agv/src/main/java/org/nl/layout/service/mapper/AgvLayoutMapMapper.java
+++ b/nl-agv/src/main/java/org/nl/layout/service/mapper/AgvLayoutMapMapper.java
@@ -11,7 +11,7 @@ import org.nl.layout.service.entity.AgvLayoutMap;
 @Mapper
 public interface AgvLayoutMapMapper extends BaseMapper<AgvLayoutMap> {
 
-    @Insert("INSERT INTO agv_layout_map (mapId, url, height, width, x, y) VALUES (#{mapId}, #{url}, #{height}, #{width}, #{x}, #{y})")
+    @Insert("INSERT INTO agv_layout_map (map_id,map_name, url, height, width, x, y) VALUES (#{mapId},#{mapName}, #{url}, #{height}, #{width}, #{x}, #{y})")
     @Options(useGeneratedKeys = true, keyProperty = "id")
     void insertUseGeneratedKeys(AgvLayoutMap map);
 
diff --git a/nl-agv/src/main/java/org/nl/layout/service/mapper/mapping/AgvLayoutMapMapper.xml b/nl-agv/src/main/java/org/nl/layout/service/mapper/mapping/AgvLayoutMapMapper.xml
index 10b07e3..a99de2f 100644
--- a/nl-agv/src/main/java/org/nl/layout/service/mapper/mapping/AgvLayoutMapMapper.xml
+++ b/nl-agv/src/main/java/org/nl/layout/service/mapper/mapping/AgvLayoutMapMapper.xml
@@ -4,7 +4,7 @@
 
 
         <resultMap id="mapLayoutResultMap" type="org.nl.layout.service.dto.MapLayout">
-            <result property="mapId" column="mapId"/>
+            <result property="mapId" column="map_id"/>
             <result property="width" column="width"/>
             <result property="height" column="height"/>
             <result property="url" column="url"/>
@@ -28,7 +28,7 @@
         </resultMap>
         <select id="initLayoutMap" resultMap="mapLayoutResultMap">
             SELECT
-                m.map_id as mapId,
+                m.map_id ,
                 m.width,
                 m.height,
                 m.url,
diff --git a/nl-agv/src/main/java/org/nl/layout/service/query/MapLayoutQuery.java b/nl-agv/src/main/java/org/nl/layout/service/query/MapLayoutQuery.java
index c699ed1..5a132ef 100644
--- a/nl-agv/src/main/java/org/nl/layout/service/query/MapLayoutQuery.java
+++ b/nl-agv/src/main/java/org/nl/layout/service/query/MapLayoutQuery.java
@@ -4,4 +4,8 @@ import org.nl.common.page.BaseQuery;
 import org.nl.layout.service.entity.AgvLayoutMap;
 
 public class MapLayoutQuery extends BaseQuery<AgvLayoutMap> {
+    @Override
+    protected Class<AgvLayoutMap> getEntityClass() {
+        return AgvLayoutMap.class;
+    }
 }
diff --git a/nl-common/src/main/java/org/nl/common/page/BaseQuery.java b/nl-common/src/main/java/org/nl/common/page/BaseQuery.java
index d63a32f..f59e356 100644
--- a/nl-common/src/main/java/org/nl/common/page/BaseQuery.java
+++ b/nl-common/src/main/java/org/nl/common/page/BaseQuery.java
@@ -1,73 +1,130 @@
 package org.nl.common.page;
 
-import cn.hutool.core.lang.ParameterizedTypeImpl;
-import com.alibaba.fastjson.JSONObject;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.toolkit.LambdaUtils;
 import com.baomidou.mybatisplus.core.toolkit.support.ColumnCache;
+import com.fasterxml.jackson.annotation.JsonIgnore;
 import lombok.Data;
+import org.nl.common.util.CustomColumnUtils;
 
-import java.lang.reflect.Type;
+import java.lang.reflect.Field;
+import java.util.HashMap;
 import java.util.Map;
-import org.nl.common.util.MapOf;
+import java.util.concurrent.ConcurrentHashMap;
 
 /**
  * 泛型必须为数据tb对应do:由mybatis管理
- * @author ZZQ
- * @Date 2022/12/14 6:33 下午
  */
 @Data
-public class BaseQuery<T> {
-    /**
-     * 模糊查询
-     */
+public abstract class BaseQuery<T> {
     private String blurry;
-    /**
-     * 是否启用
-     */
     private String is_used;
-    /**
-     * 创建时间范围查询
-     */
     private String start_time;
     private String end_time;
 
+    /**
+     * 字段映射配置
+     */
+    @JsonIgnore
+    protected Map<String, QParam> fieldMappings = new HashMap<String, QParam>() {{
+        put("blurry", QParam.builder().k(new String[]{"name"}).type(QueryTEnum.LK).build());
+        put("start_time", QParam.builder().k(new String[]{"create_time"}).type(QueryTEnum.LT).build());
+        put("end_time", QParam.builder().k(new String[]{"create_time"}).type(QueryTEnum.LE).build());
+        put("sort", QParam.builder().k(new String[]{"sort"}).type(QueryTEnum.BY).build());
+    }};
 
     /**
-     * 字段映射Map:指定字段对应QueryWrapper的查询类型
-     *  字段与数据库字段对应，不支持驼峰
-     *  @see  org.nl.common.page.QueryTEnum
-     * 通过buid构建
+     * 实体类信息（由子类提供）
      */
-    public Map<String, QParam> doP = MapOf.of("blurry", QParam.builder().k(new String[]{"name"}).type(QueryTEnum.LK).build()
-            ,"startTime", QParam.builder().k(new String[]{"create_time"}).type(QueryTEnum.LT).build()
-            ,"endTime", QParam.builder().k(new String[]{"create_time"}).type(QueryTEnum.LE).build()
-            ,"sort", QParam.builder().k(new String[]{"sort"}).type(QueryTEnum.BY).build()
-    );
+    @JsonIgnore
+    protected abstract Class<T> getEntityClass();
 
-    public QueryWrapper<T> build(){
+    /**
+     * 列名映射（子类可以重写此方法提供自定义映射）
+     */
+    @JsonIgnore
+    protected Map<String, String> getColumnMappings() {
+        return new HashMap<>();
+    }
+
+    public QueryWrapper<T> build() {
         this.paramMapping();
         QueryWrapper<T> wrapper = new QueryWrapper<>();
-        JSONObject json = (JSONObject)JSONObject.toJSON(this);
-        Type[] types = ((ParameterizedTypeImpl) this.getClass().getGenericSuperclass()).getActualTypeArguments();
-        Map<String, ColumnCache> columnMap = LambdaUtils.getColumnMap((Class<?>) types[0]);
 
-        String dopStr = "doP";
-        json.forEach((key, vel) -> {
-            if (vel != null && !key.equals(dopStr)){
-                QParam qParam = doP.get(key);
-                if (qParam != null){
-                    QueryTEnum.build(qParam.type,wrapper,qParam.k,vel);
-                }else {
-                    ColumnCache columnCache = columnMap.get(LambdaUtils.formatKey(key));
-                    if (columnCache!=null){
-                        wrapper.eq(columnCache.getColumn(),vel);
+        Class<T> entityClass = getEntityClass();
+        Map<String, String> columnMappings = getColumnMappings();
+
+        // 获取MyBatis-Plus的列缓存
+        Map<String, ColumnCache> columnCacheMap = CustomColumnUtils.getColumnMap(entityClass);
+
+        // 获取所有字段
+        Field[] fields = this.getClass().getDeclaredFields();
+
+        for (Field field : fields) {
+            field.setAccessible(true);
+
+            try {
+                Object value = field.get(this);
+                String fieldName = field.getName();
+
+                if (value == null || fieldName.equals("fieldMappings")) {
+                    continue;
+                }
+
+                // 检查是否有自定义映射
+                QParam qParam = fieldMappings.get(fieldName);
+                if (qParam != null) {
+                    QueryTEnum.build(qParam.type, wrapper, qParam.k, value);
+                } else {
+                    // 查找对应的数据库列名
+                    String columnName = findColumnName(fieldName, columnMappings, columnCacheMap);
+                    if (columnName != null) {
+                        wrapper.eq(columnName, value);
                     }
                 }
+            } catch (IllegalAccessException e) {
+                // 忽略无法访问的字段
             }
-        });
+        }
+
         return wrapper;
     }
 
-    public void paramMapping(){};
+    /**
+     * 查找字段对应的数据库列名
+     */
+    private String findColumnName(String fieldName,
+                                  Map<String, String> customMappings,
+                                  Map<String, ColumnCache> columnCache) {
+        // 1. 首先检查自定义映射
+        if (customMappings.containsKey(fieldName)) {
+            return customMappings.get(fieldName);
+        }
+
+        // 2. 检查列缓存（支持驼峰转下划线）
+        ColumnCache cache = columnCache.get(fieldName);
+        if (cache == null) {
+            // 尝试蛇形命名
+            StringBuilder result = new StringBuilder();
+            for (int i = 0; i < fieldName.length(); i++) {
+                char c = fieldName.charAt(i);
+                if (Character.isUpperCase(c)) {
+                    result.append('_').append(Character.toLowerCase(c));
+                } else {
+                    result.append(c);
+                }
+            }
+            cache = columnCache.get(result.toString());
+        }
+        return cache != null ? cache.getColumn() : null;
+    }
+
+    /**
+        @Override
+     public void paramMapping() {
+        super.doP.put("pid_is_null", QParam.builder().k(new String[]{"pid"}).type(QueryTEnum.NO).build());
+     super.doP.put("deptIds", QParam.builder().k(new String[]{"dept_id"}).type(QueryTEnum.IN).build());
+    }
+     */
+    public void paramMapping() {}
 }
diff --git a/nl-common/src/main/java/org/nl/common/util/CustomColumnUtils.java b/nl-common/src/main/java/org/nl/common/util/CustomColumnUtils.java
new file mode 100644
index 0000000..7808622
--- /dev/null
+++ b/nl-common/src/main/java/org/nl/common/util/CustomColumnUtils.java
@@ -0,0 +1,174 @@
+package org.nl.common.util;
+
+import com.baomidou.mybatisplus.annotation.TableField;
+import com.baomidou.mybatisplus.annotation.TableId;
+import com.baomidou.mybatisplus.annotation.TableName;
+import com.baomidou.mybatisplus.core.toolkit.support.ColumnCache;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import java.lang.reflect.Field;
+import java.util.HashMap;
+import java.util.Map;
+import java.util.concurrent.ConcurrentHashMap;
+
+/**
+ * 自定义列映射工具类，避免使用 MyBatis-Plus 的内部 API
+ */
+public class CustomColumnUtils {
+
+    private static final Logger logger = LoggerFactory.getLogger(CustomColumnUtils.class);
+
+    // 缓存实体类的列映射
+    private static final Map<Class<?>, Map<String, ColumnCache>> COLUMN_CACHE = new ConcurrentHashMap<>();
+
+    /**
+     * 获取实体类的列映射（替代 LambdaUtils.getColumnMap）
+     */
+    public static Map<String, ColumnCache> getColumnMap(Class<?> clazz) {
+        return COLUMN_CACHE.computeIfAbsent(clazz, CustomColumnUtils::buildColumnMap);
+    }
+
+    /**
+     * 构建实体类的列映射
+     */
+    private static Map<String, ColumnCache> buildColumnMap(Class<?> clazz) {
+        Map<String, ColumnCache> columnMap = new HashMap<>();
+
+        try {
+            // 获取所有字段（包括父类）
+            Field[] fields = getAllFields(clazz);
+
+            for (Field field : fields) {
+                String fieldName = field.getName();
+                String columnName = getColumnName(field);
+
+                if (columnName != null) {
+                    // 创建 ColumnCache 对象
+                    ColumnCache columnCache = new ColumnCache(columnName, fieldName);
+
+                    // 添加多种格式的键
+                    // 1. 原始字段名
+                    columnMap.put(fieldName, columnCache);
+
+                    // 2. 驼峰格式（如果需要）
+                    String camelCase = toCamelCase(columnName);
+                    if (!columnMap.containsKey(camelCase)) {
+                        columnMap.put(camelCase, columnCache);
+                    }
+
+                    // 3. 首字母小写的字段名
+                    String firstLower = Character.toLowerCase(fieldName.charAt(0)) + fieldName.substring(1);
+                    if (!firstLower.equals(fieldName) && !columnMap.containsKey(firstLower)) {
+                        columnMap.put(firstLower, columnCache);
+                    }
+                }
+            }
+
+            logger.debug("Built column map for class: {}, size: {}", clazz.getName(), columnMap.size());
+        } catch (Exception e) {
+            logger.error("Failed to build column map for class: {}", clazz.getName(), e);
+            throw new RuntimeException("Failed to build column map", e);
+        }
+
+        return columnMap;
+    }
+
+    /**
+     * 获取所有字段（包括父类）
+     */
+    private static Field[] getAllFields(Class<?> clazz) {
+        Map<String, Field> fieldMap = new HashMap<>();
+        Class<?> currentClass = clazz;
+
+        while (currentClass != null && currentClass != Object.class) {
+            Field[] declaredFields = currentClass.getDeclaredFields();
+            for (Field field : declaredFields) {
+                // 避免覆盖子类字段
+                if (!fieldMap.containsKey(field.getName())) {
+                    fieldMap.put(field.getName(), field);
+                }
+            }
+            currentClass = currentClass.getSuperclass();
+        }
+
+        return fieldMap.values().toArray(new Field[0]);
+    }
+
+    /**
+     * 获取字段对应的数据库列名
+     */
+    private static String getColumnName(Field field) {
+        // 1. 检查 @TableField 注解
+        TableField tableField = field.getAnnotation(TableField.class);
+        if (tableField != null) {
+            // 如果字段不存在于数据库，跳过
+            if (!tableField.exist()) {
+                return null;
+            }
+            // 如果有指定的列名，使用它
+            if (!tableField.value().isEmpty()) {
+                return tableField.value();
+            }
+        }
+
+        // 2. 检查 @TableId 注解
+        TableId tableId = field.getAnnotation(TableId.class);
+        if (tableId != null && !tableId.value().isEmpty()) {
+            return tableId.value();
+        }
+        // 3. 默认：驼峰转下划线
+        return camelToUnderscore(field.getName());
+    }
+
+    /**
+     * 驼峰转下划线
+     */
+    private static String camelToUnderscore(String camelCase) {
+        if (camelCase == null || camelCase.isEmpty()) {
+            return camelCase;
+        }
+
+        StringBuilder result = new StringBuilder();
+        result.append(Character.toLowerCase(camelCase.charAt(0)));
+
+        for (int i = 1; i < camelCase.length(); i++) {
+            char c = camelCase.charAt(i);
+            if (Character.isUpperCase(c)) {
+                result.append('_').append(Character.toLowerCase(c));
+            } else {
+                result.append(c);
+            }
+        }
+
+        return result.toString();
+    }
+
+    /**
+     * 下划线转驼峰
+     */
+    private static String toCamelCase(String underscore) {
+        if (underscore == null || underscore.isEmpty()) {
+            return underscore;
+        }
+
+        StringBuilder result = new StringBuilder();
+        boolean nextUpper = false;
+
+        for (int i = 0; i < underscore.length(); i++) {
+            char c = underscore.charAt(i);
+            if (c == '_') {
+                nextUpper = true;
+            } else {
+                if (nextUpper) {
+                    result.append(Character.toUpperCase(c));
+                    nextUpper = false;
+                } else {
+                    result.append(c);
+                }
+            }
+        }
+
+        return result.toString();
+    }
+}
diff --git a/nl-vue/src/api/agv/carApi.js b/nl-vue/src/api/agv/carApi.js
index 7f9974c..d0ffd57 100644
--- a/nl-vue/src/api/agv/carApi.js
+++ b/nl-vue/src/api/agv/carApi.js
@@ -25,5 +25,9 @@ export default {
 	// 获取车辆详情
 	detail(data) {
 		return request('detail', data, 'get')
+	},
+	// 获取车辆状态
+	status(data) {
+		return request('status', data, 'get')
 	}
 }
diff --git a/nl-vue/src/api/agv/mapApi.js b/nl-vue/src/api/agv/mapApi.js
new file mode 100644
index 0000000..c472072
--- /dev/null
+++ b/nl-vue/src/api/agv/mapApi.js
@@ -0,0 +1,33 @@
+/**
+ * AGV地图管理API
+ */
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/api/agv/map/` + url, ...arg)
+
+export default {
+	// 获取地图列表
+	list(data) {
+		return request('list', data, 'get')
+	},
+	// 初始化地图布局数据
+	initLayout(data) {
+		return request('initLayout', data, 'get')
+	},
+	// 保存地图配置
+	save(data) {
+		return request('save', data)
+	},
+	// 删除地图
+	delete(data) {
+		return request('delete', data)
+	},
+	// 获取地图详情
+	detail(data) {
+		return request('detail', data, 'get')
+	},
+	// 启用/禁用地图
+	enable(data) {
+		return request('enable', data)
+	}
+}
diff --git a/nl-vue/src/api/dev/fileApi.js b/nl-vue/src/api/dev/fileApi.js
index 5c6d8f4..9ef03f4 100644
--- a/nl-vue/src/api/dev/fileApi.js
+++ b/nl-vue/src/api/dev/fileApi.js
@@ -10,7 +10,7 @@
  */
 import { baseRequest } from '@/utils/request'
 
-const request = (url, ...arg) => baseRequest(`/dev/file/` + url, ...arg)
+const request = (url, ...arg) => baseRequest(`/api/localStorage/` + url, ...arg)
 /**
  * 文件
  *
@@ -20,11 +20,11 @@ const request = (url, ...arg) => baseRequest(`/dev/file/` + url, ...arg)
 export default {
 	// 动态上传文件返回id
 	fileUploadDynamicReturnId(data) {
-		return request('uploadDynamicReturnId', data)
+		return request('upload', data)
 	},
 	// 动态上传文件返回url
 	fileUploadDynamicReturnUrl(data) {
-		return request('uploadDynamicReturnUrl', data)
+		return request('upload', data)
 	},
 	// 本地文件上传，返回文件id
 	fileUploadReturnId(data) {
diff --git a/nl-vue/src/views/nl_agv/car/car.vue b/nl-vue/src/views/nl_agv/car/car.vue
new file mode 100644
index 0000000..7c2e201
--- /dev/null
+++ b/nl-vue/src/views/nl_agv/car/car.vue
@@ -0,0 +1,214 @@
+<template>
+	<a-card :bordered="false" :body-style="{ 'padding-bottom': '0px' }" class="mb-2">
+		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
+			<a-row :gutter="24">
+				<a-col :span="6">
+					<a-form-item label="关键词" name="searchKey">
+						<a-input v-model:value="searchFormState.searchKey" placeholder="请输入车辆ID或类型" />
+					</a-form-item>
+				</a-col>
+				<a-col :span="6">
+					<a-form-item label="车辆类型" name="type">
+						<a-input v-model:value="searchFormState.type" placeholder="请输入车辆类型" />
+					</a-form-item>
+				</a-col>
+				<a-col :span="6">
+					<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
+					<a-button class="xn-mg08" @click="reset">重置</a-button>
+				</a-col>
+			</a-row>
+		</a-form>
+	</a-card>
+	<a-card :bordered="false">
+		<s-table
+			ref="tableRef"
+			:columns="columns"
+			:data="loadData"
+			:alert="options.alert.show"
+			bordered
+			:row-key="(record) => record.carId"
+			:tool-config="toolConfig"
+			:row-selection="options.rowSelection"
+		>
+			<template #operator class="table-operator">
+				<a-space>
+					<a-button type="primary" @click="formRef.onOpen()">
+						<template #icon><plus-outlined /></template>
+						新增车辆
+					</a-button>
+					<xn-batch-button
+						buttonName="批量删除"
+						icon="DeleteOutlined"
+						buttonDanger
+						:selectedRowKeys="selectedRowKeys"
+						@batchCallBack="deleteBatchCar"
+					/>
+				</a-space>
+			</template>
+			<template #bodyCell="{ column, record }">
+				<template v-if="column.dataIndex === 'carId'">
+					<a @click="showDetail(record)" style="cursor: pointer;">{{ record.carId }}</a>
+				</template>
+				<template v-if="column.dataIndex === 'icon'">
+					<a-image v-if="record.icon && getImageUrl(record.icon)" :width="50" :src="getImageUrl(record.icon)" />
+					<a-spin v-else-if="record.icon" size="small" />
+					<span v-else>-</span>
+				</template>
+				<template v-if="column.dataIndex === 'action'">
+					<a-space>
+						<a @click="showDetail(record)">预览</a>
+						<a-divider type="vertical" />
+						<a @click="formRef.onOpen(record)">编辑</a>
+						<a-divider type="vertical" />
+						<a-popconfirm title="确定要删除此车辆吗？" @confirm="deleteCar(record)">
+							<a-button type="link" danger size="small">删除</a-button>
+						</a-popconfirm>
+					</a-space>
+				</template>
+			</template>
+		</s-table>
+	</a-card>
+	<Form ref="formRef" @successful="tableRef.refresh(true)" />
+	<Detail ref="detailRef" />
+</template>
+
+<script setup name="nlAgvCar">
+	import Form from './form.vue'
+	import Detail from './detail.vue'
+	import carApi from '@/api/agv/carApi'
+	import fileApi from '@/api/dev/fileApi'
+	const searchFormState = ref({})
+	const searchFormRef = ref()
+	const tableRef = ref()
+	const formRef = ref()
+	const detailRef = ref()
+	const toolConfig = { refresh: true, height: true, columnSetting: false, striped: false }
+
+	// 存储图片blob URL的映射
+	const imageUrlMap = ref(new Map())
+
+	const columns = [
+		{
+			title: '车辆ID',
+			dataIndex: 'carId',
+			width: '150px'
+		},
+		{
+			title: '车辆类型',
+			dataIndex: 'type',
+			width: '150px'
+		},
+		{
+			title: '车辆图片',
+			dataIndex: 'icon',
+			width: '120px'
+		},
+		{
+			title: '操作',
+			dataIndex: 'action',
+			align: 'center',
+			width: '220px'
+		}
+	]
+
+	let selectedRowKeys = ref([])
+
+	// 列表选择配置
+	const options = {
+		alert: {
+			show: false,
+			clear: () => {
+				selectedRowKeys = ref([])
+			}
+		},
+		rowSelection: {
+			onChange: (selectedRowKey, selectedRows) => {
+				selectedRowKeys.value = selectedRowKey
+			}
+		}
+	}
+
+	// 根据文件ID加载图片
+	const loadImageById = (fileId) => {
+		if (!fileId || imageUrlMap.value.has(fileId)) {
+			return
+		}
+
+		const param = {
+			storageId: fileId
+		}
+
+		fileApi
+			.fileDownload(param)
+			.then((response) => {
+				// response 是整个响应对象，需要取 response.data 才是 blob
+				const blob = response.data
+				if (blob && blob instanceof Blob) {
+					const url = URL.createObjectURL(blob)
+					imageUrlMap.value.set(fileId, url)
+				}
+			})
+			.catch((error) => {
+				console.error('图片加载失败:', error)
+			})
+	}
+
+	// 获取图片URL
+	const getImageUrl = (fileId) => {
+		return imageUrlMap.value.get(fileId) || ''
+	}
+
+	const loadData = (parameter) => {
+		return carApi.list(Object.assign(parameter, searchFormState.value)).then((res) => {
+			// 加载所有图片
+			if (res.rows && res.rows.length > 0) {
+				res.rows.forEach((item) => {
+					if (item.icon) {
+						loadImageById(item.icon)
+					}
+				})
+			}
+			return res
+		})
+	}
+
+	// 重置
+	const reset = () => {
+		searchFormRef.value.resetFields()
+		tableRef.value.refresh(true)
+	}
+
+	// 删除
+	const deleteCar = (record) => {
+		let params = [
+			{
+				carId: record.carId
+			}
+		]
+		carApi.delete(params).then(() => {
+			tableRef.value.refresh(true)
+		})
+	}
+
+	// 批量删除
+	const deleteBatchCar = (params) => {
+		carApi.delete(params).then(() => {
+			tableRef.value.clearRefreshSelected()
+		})
+	}
+
+	// 显示详情
+	const showDetail = (record) => {
+		if (detailRef.value) {
+			detailRef.value.onOpen(record)
+		}
+	}
+
+	// 组件卸载时清理blob URL
+	onUnmounted(() => {
+		imageUrlMap.value.forEach((url) => {
+			URL.revokeObjectURL(url)
+		})
+		imageUrlMap.value.clear()
+	})
+</script>
diff --git a/nl-vue/src/views/nl_agv/car/detail.vue b/nl-vue/src/views/nl_agv/car/detail.vue
new file mode 100644
index 0000000..a799028
--- /dev/null
+++ b/nl-vue/src/views/nl_agv/car/detail.vue
@@ -0,0 +1,265 @@
+<template>
+	<xn-form-container
+		title="车辆详情"
+		:width="900"
+		:visible="visible"
+		:destroy-on-close="true"
+		@close="onClose"
+	>
+		<div class="form-content">
+			<!-- 左侧：图片预览区域 -->
+			<div class="image-preview-section" v-if="imagePreviewUrl">
+				<div class="preview-title">车辆图片</div>
+				<div class="preview-container">
+					<a-spin :spinning="imageLoading" tip="加载中...">
+						<a-image v-if="imagePreviewUrl" :src="imagePreviewUrl" :preview="true" class="car-image" />
+					</a-spin>
+				</div>
+			</div>
+
+			<!-- 右侧：详情信息区域 -->
+			<div class="detail-section" :class="{ 'full-width': !imagePreviewUrl }">
+				<a-spin :spinning="detailLoading" tip="加载中...">
+					<a-descriptions bordered :column="1" size="middle">
+						<a-descriptions-item label="车辆ID">
+							{{ detailData.carId || '-' }}
+						</a-descriptions-item>
+						<a-descriptions-item label="车辆类型">
+							{{ detailData.type || '-' }}
+						</a-descriptions-item>
+						<a-descriptions-item label="车辆状态">
+							<a-badge 
+								:status="getStatusBadge(detailData.status)" 
+								:text="detailData.statusInfo || '-'" 
+							/>
+						</a-descriptions-item>
+						<a-descriptions-item label="状态类型">
+							<a-tag :color="getStatusColor(detailData.status)">
+								{{ getStatusText(detailData.status) }}
+							</a-tag>
+						</a-descriptions-item>
+						<a-descriptions-item label="动作状态">
+							{{ detailData.action || '-' }}
+						</a-descriptions-item>
+						<a-descriptions-item label="动作交互信息">
+							{{ detailData.actionInfo || '-' }}
+						</a-descriptions-item>
+						<a-descriptions-item label="任务号">
+							{{ detailData.taskCode || '-' }}
+						</a-descriptions-item>
+						<a-descriptions-item label="坐标位置">
+							X: {{ detailData.x || 0 }}, Y: {{ detailData.y || 0 }}
+						</a-descriptions-item>
+						<a-descriptions-item label="航向角">
+							{{ detailData.angle || 0 }}°
+						</a-descriptions-item>
+						<a-descriptions-item label="电量">
+							<a-progress 
+								:percent="detailData.power || 0" 
+								:status="getPowerStatus(detailData.power)"
+								:stroke-color="getPowerColor(detailData.power)"
+							/>
+						</a-descriptions-item>
+					</a-descriptions>
+				</a-spin>
+			</div>
+		</div>
+
+		<template #footer>
+			<a-button @click="onClose">关闭</a-button>
+		</template>
+	</xn-form-container>
+</template>
+
+<script setup name="nlAgvCarDetail">
+	import carApi from '@/api/agv/carApi'
+	import fileApi from '@/api/dev/fileApi'
+	import { message } from 'ant-design-vue'
+
+	// 默认是关闭状态
+	const visible = ref(false)
+	
+	// 详情数据
+	const detailData = ref({})
+	const imagePreviewUrl = ref('') // 图片预览URL（blob格式）
+	const imageLoading = ref(false) // 图片加载状态
+	const detailLoading = ref(false) // 详情加载状态
+
+	// 根据文件ID获取图片blob并转换为URL
+	const loadImageById = (fileId) => {
+		if (!fileId) return
+
+		imageLoading.value = true
+		const param = {
+			storageId: fileId
+		}
+		fileApi
+			.fileDownload(param)
+			.then((response) => {
+				// response 是整个响应对象，需要取 response.data 才是 blob
+				const blob = response.data
+				if (blob && blob instanceof Blob) {
+					// 将blob转换为URL用于预览
+					imagePreviewUrl.value = URL.createObjectURL(blob)
+				} else {
+					message.error('图片格式错误')
+				}
+			})
+			.catch((error) => {
+				console.error('图片加载失败:', error)
+			})
+			.finally(() => {
+				imageLoading.value = false
+			})
+	}
+
+	// 获取状态徽章类型
+	const getStatusBadge = (status) => {
+		const statusMap = {
+			1: 'default',  // 休息
+			2: 'processing', // 正常运行
+			3: 'error'     // 异常
+		}
+		return statusMap[status] || 'default'
+	}
+
+	// 获取状态颜色
+	const getStatusColor = (status) => {
+		const colorMap = {
+			1: 'default',  // 休息
+			2: 'success',  // 正常运行
+			3: 'error'     // 异常
+		}
+		return colorMap[status] || 'default'
+	}
+
+	// 获取状态文本
+	const getStatusText = (status) => {
+		const textMap = {
+			1: '休息',
+			2: '正常运行',
+			3: '异常'
+		}
+		return textMap[status] || '-'
+	}
+
+	// 获取电量状态
+	const getPowerStatus = (power) => {
+		if (power <= 20) return 'exception'
+		if (power <= 50) return 'normal'
+		return 'success'
+	}
+
+	// 获取电量颜色
+	const getPowerColor = (power) => {
+		if (power <= 20) return '#ff4d4f'
+		if (power <= 50) return '#faad14'
+		return '#52c41a'
+	}
+
+	// 打开抽屉
+	const onOpen = (record) => {
+		visible.value = true
+		detailData.value = {}
+		imagePreviewUrl.value = ''
+		detailLoading.value = true
+
+		if (record) {
+			const param = {
+				carId: record.carId
+			}
+			carApi
+				.status(param)
+				.then((data) => {
+					// 后端返回的是列表，取第一个
+					if (data && data.length > 0) {
+						detailData.value = Object.assign({}, data[0])
+						// 如果有图片ID，加载图片
+						if (data[0].icon) {
+							loadImageById(data[0].icon)
+						}
+					} else {
+						message.warning('未获取到车辆状态信息')
+					}
+				})
+				.catch((error) => {
+					message.error('获取详情失败: ' + (error.message || error))
+				})
+				.finally(() => {
+					detailLoading.value = false
+				})
+		}
+	}
+
+	// 关闭抽屉
+	const onClose = () => {
+		detailData.value = {}
+		// 释放blob URL
+		if (imagePreviewUrl.value) {
+			URL.revokeObjectURL(imagePreviewUrl.value)
+			imagePreviewUrl.value = ''
+		}
+		visible.value = false
+	}
+
+	// 调用这个函数将子组件的一些数据和方法暴露出去
+	defineExpose({
+		onOpen
+	})
+</script>
+
+<style scoped lang="less">
+	.form-content {
+		display: flex;
+		gap: 24px;
+		min-height: 400px;
+	}
+
+	.image-preview-section {
+		flex: 0 0 350px;
+		display: flex;
+		flex-direction: column;
+
+		.preview-title {
+			font-size: 16px;
+			font-weight: 500;
+			margin-bottom: 16px;
+			color: #333;
+		}
+
+		.preview-container {
+			flex: 1;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: #f5f5f5;
+			border-radius: 8px;
+			padding: 20px;
+
+			.car-image {
+				max-width: 100%;
+				max-height: 400px;
+				object-fit: contain;
+			}
+		}
+	}
+
+	.detail-section {
+		flex: 1;
+		min-width: 0;
+
+		&.full-width {
+			flex: 1 1 100%;
+		}
+	}
+
+	:deep(.ant-descriptions-item-label) {
+		width: 120px;
+		font-weight: 500;
+		background-color: #fafafa;
+	}
+
+	:deep(.ant-descriptions-item-content) {
+		background-color: #fff;
+	}
+</style>
diff --git a/nl-vue/src/views/nl_agv/car/form.vue b/nl-vue/src/views/nl_agv/car/form.vue
index aff8d26..e2a67c1 100644
--- a/nl-vue/src/views/nl_agv/car/form.vue
+++ b/nl-vue/src/views/nl_agv/car/form.vue
@@ -8,29 +8,31 @@
 	>
 		<div class="form-content">
 			<!-- 左侧：图片预览区域 -->
-			<div class="image-preview-section" v-if="formData.carId && formData.icon">
+			<div class="image-preview-section" v-if="formData.carId && imagePreviewUrl">
 				<div class="preview-title">车辆图片预览</div>
 				<div class="preview-container">
-					<a-image :src="formData.icon" :preview="true" class="car-image" />
+					<a-spin :spinning="imageLoading" tip="加载中...">
+						<a-image v-if="imagePreviewUrl" :src="imagePreviewUrl" :preview="true" class="car-image" />
+					</a-spin>
 				</div>
 			</div>
-			
+
 			<!-- 右侧：表单区域 -->
-			<div class="form-section" :class="{ 'full-width': !formData.carId || !formData.icon }">
+			<div class="form-section" :class="{ 'full-width': !formData.carId || !imagePreviewUrl }">
 				<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
 					<a-form-item label="车辆ID：" name="carId">
-						<a-input 
-							v-model:value="formData.carId" 
-							placeholder="请输入车辆ID" 
+						<a-input
+							v-model:value="formData.carId"
+							placeholder="请输入车辆ID"
 							:disabled="!!formData.carId"
-							allow-clear 
+							allow-clear
 						/>
 					</a-form-item>
 					<a-form-item label="车辆类型：" name="type">
-						<a-input 
-							v-model:value="formData.type" 
-							placeholder="请输入车辆类型（如：PS车、NT车等）" 
-							allow-clear 
+						<a-input
+							v-model:value="formData.type"
+							placeholder="请输入车辆类型（如：PS车、NT车等）"
+							allow-clear
 						/>
 					</a-form-item>
 					<a-form-item label="车辆图片：" name="icon">
@@ -43,6 +45,7 @@
 							:before-upload="beforeUpload"
 							:custom-request="handleUpload"
 							@remove="handleRemove"
+							@preview="handlePreview"
 							:max-count="1"
 						>
 							<div v-if="fileList.length < 1">
@@ -55,7 +58,7 @@
 				</a-form>
 			</div>
 		</div>
-		
+
 		<template #footer>
 			<a-button class="xn-mr8" @click="onClose">关闭</a-button>
 			<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
@@ -68,23 +71,68 @@
 	import carApi from '@/api/agv/carApi'
 	import fileApi from '@/api/dev/fileApi'
 	import { message } from 'ant-design-vue'
-	
+
 	// 默认是关闭状态
 	const visible = ref(false)
 	const emit = defineEmits({ successful: null })
 	const formRef = ref()
-	
+
 	// 表单数据
 	const formData = ref({})
 	const submitLoading = ref(false)
 	const fileList = ref([])
-	
+	const imagePreviewUrl = ref('') // 图片预览URL（blob格式）
+	const imageLoading = ref(false) // 图片加载状态
+
+	// 根据文件ID获取图片blob并转换为URL
+	const loadImageById = (fileId, updateFileList = false) => {
+		if (!fileId) return
+
+		imageLoading.value = true
+		const param = {
+			storageId: fileId
+		}
+		fileApi
+			.fileDownload(param)
+			.then((response) => {
+				// response 是整个响应对象，需要取 response.data 才是 blob
+				const blob = response.data
+				if (blob && blob instanceof Blob) {
+					// 将blob转换为URL用于预览
+					const blobUrl = URL.createObjectURL(blob)
+					imagePreviewUrl.value = blobUrl
+					
+					// 如果需要更新文件列表（编辑时）
+					if (updateFileList) {
+						fileList.value = [
+							{
+								uid: fileId,
+								name: 'car-image.png',
+								status: 'done',
+								url: blobUrl,
+								thumbUrl: blobUrl
+							}
+						]
+					}
+				} else {
+					message.error('图片格式错误')
+				}
+			})
+			.catch((error) => {
+				message.error('图片加载失败: ' + (error.message || error))
+			})
+			.finally(() => {
+				imageLoading.value = false
+			})
+	}
+
 	// 打开抽屉
 	const onOpen = (record) => {
 		visible.value = true
 		formData.value = {}
 		fileList.value = []
-		
+		imagePreviewUrl.value = ''
+
 		if (record) {
 			submitLoading.value = true
 			const param = {
@@ -94,16 +142,10 @@
 				.detail(param)
 				.then((data) => {
 					formData.value = Object.assign({}, data)
-					// 如果有图片，设置文件列表
+					// 如果有图片ID，加载图片并设置文件列表
 					if (data.icon) {
-						fileList.value = [
-							{
-								uid: '-1',
-								name: 'car-image.png',
-								status: 'done',
-								url: data.icon
-							}
-						]
+						// 加载图片预览，并更新文件列表
+						loadImageById(data.icon, true)
 					}
 				})
 				.finally(() => {
@@ -111,20 +153,25 @@
 				})
 		}
 	}
-	
+
 	// 关闭抽屉
 	const onClose = () => {
 		formRef.value.resetFields()
 		fileList.value = []
+		// 释放blob URL
+		if (imagePreviewUrl.value) {
+			URL.revokeObjectURL(imagePreviewUrl.value)
+			imagePreviewUrl.value = ''
+		}
 		visible.value = false
 	}
-	
+
 	// 默认要校验的
 	const formRules = {
 		carId: [required('请输入车辆ID')],
 		type: [required('请输入车辆类型')]
 	}
-	
+
 	// 上传前校验
 	const beforeUpload = (file) => {
 		const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
@@ -139,19 +186,24 @@
 		}
 		return true
 	}
-	
+
 	// 自定义上传
 	const handleUpload = ({ file, onSuccess, onError }) => {
 		const uploadFormData = new FormData()
 		uploadFormData.append('file', file)
-		
+
 		fileApi
-			.fileUploadDynamicReturnUrl(uploadFormData)
+			.fileUploadDynamicReturnId(uploadFormData)
 			.then((res) => {
 				if (res) {
-					// 保存文件URL到表单数据
-					formData.value.icon = res
+					// 保存文件ID到表单数据（后端返回的可能是 res.id 或直接是 res）
+					const fileId = res.id || res
+					formData.value.icon = fileId
 					message.success('上传成功')
+
+					// 加载新上传的图片预览
+					loadImageById(fileId)
+
 					onSuccess(res)
 				} else {
 					message.error('上传失败')
@@ -163,12 +215,29 @@
 				onError(error)
 			})
 	}
-	
+
 	// 删除图片
 	const handleRemove = () => {
 		formData.value.icon = ''
+		// 释放blob URL
+		if (imagePreviewUrl.value) {
+			URL.revokeObjectURL(imagePreviewUrl.value)
+			imagePreviewUrl.value = ''
+		}
 	}
-	
+
+	// 预览图片
+	const handlePreview = async (file) => {
+		// 如果已经有预览URL，直接使用
+		if (imagePreviewUrl.value) {
+			return
+		}
+		// 如果是新上传的文件，使用file对象创建预览
+		if (file.originFileObj) {
+			imagePreviewUrl.value = URL.createObjectURL(file.originFileObj)
+		}
+	}
+
 	// 验证并提交数据
 	const onSubmit = () => {
 		formRef.value
@@ -188,7 +257,7 @@
 			})
 			.catch(() => {})
 	}
-	
+
 	// 调用这个函数将子组件的一些数据和方法暴露出去
 	defineExpose({
 		onOpen
@@ -201,19 +270,19 @@
 		gap: 24px;
 		min-height: 400px;
 	}
-	
+
 	.image-preview-section {
 		flex: 0 0 350px;
 		display: flex;
 		flex-direction: column;
-		
+
 		.preview-title {
 			font-size: 16px;
 			font-weight: 500;
 			margin-bottom: 16px;
 			color: #333;
 		}
-		
+
 		.preview-container {
 			flex: 1;
 			display: flex;
@@ -222,7 +291,7 @@
 			background: #f5f5f5;
 			border-radius: 8px;
 			padding: 20px;
-			
+
 			.car-image {
 				max-width: 100%;
 				max-height: 400px;
@@ -230,28 +299,28 @@
 			}
 		}
 	}
-	
+
 	.form-section {
 		flex: 1;
 		min-width: 0;
-		
+
 		&.full-width {
 			flex: 1 1 100%;
 		}
 	}
-	
+
 	.car-uploader {
 		:deep(.ant-upload-select-picture-card) {
 			width: 120px;
 			height: 120px;
 		}
-		
+
 		:deep(.ant-upload-list-picture-card-container) {
 			width: 120px;
 			height: 120px;
 		}
 	}
-	
+
 	.upload-tip {
 		color: #999;
 		font-size: 12px;
diff --git a/nl-vue/src/views/nl_agv/car/index.vue b/nl-vue/src/views/nl_agv/car/index.vue
index 11b1859..02603d6 100644
--- a/nl-vue/src/views/nl_agv/car/index.vue
+++ b/nl-vue/src/views/nl_agv/car/index.vue
@@ -46,12 +46,16 @@
 				</a-space>
 			</template>
 			<template #bodyCell="{ column, record }">
+				<template v-if="column.dataIndex === 'carId'">
+					<span>{{ record.carId }}</span>
+				</template>
 				<template v-if="column.dataIndex === 'icon'">
-					<a-image v-if="record.icon" :width="50" :src="record.icon" />
-					<span v-else>-</span>
+					<span>{{ record.icon || '-' }}</span>
 				</template>
 				<template v-if="column.dataIndex === 'action'">
 					<a-space>
+						<a @click="showDetail(record)">预览</a>
+						<a-divider type="vertical" />
 						<a @click="formRef.onOpen(record)">编辑</a>
 						<a-divider type="vertical" />
 						<a-popconfirm title="确定要删除此车辆吗？" @confirm="deleteCar(record)">
@@ -63,87 +67,151 @@
 		</s-table>
 	</a-card>
 	<Form ref="formRef" @successful="tableRef.refresh(true)" />
+	<Detail ref="detailRef" />
 </template>
 
 <script setup name="nlAgvCar">
-	import Form from './form.vue'
-	import carApi from '@/api/agv/carApi'
-	
-	const searchFormState = ref({})
-	const searchFormRef = ref()
-	const tableRef = ref()
-	const formRef = ref()
-	const toolConfig = { refresh: true, height: true, columnSetting: false, striped: false }
-	
-	const columns = [
+import Form from './form.vue'
+import Detail from './detail.vue'
+import carApi from '@/api/agv/carApi'
+import fileApi from '@/api/dev/fileApi'
+
+const searchFormState = ref({})
+const searchFormRef = ref()
+const tableRef = ref()
+const formRef = ref()
+const detailRef = ref()
+const toolConfig = { refresh: true, height: true, columnSetting: false, striped: false }
+
+// 存储图片blob URL的映射
+const imageUrlMap = ref(new Map())
+
+const columns = [
+	{
+		title: '车辆ID',
+		dataIndex: 'carId',
+		width: '150px'
+	},
+	{
+		title: '车辆类型',
+		dataIndex: 'type',
+		width: '150px'
+	},
+	{
+		title: '车辆图片ID',
+		dataIndex: 'icon',
+		width: '150px'
+	},
+	{
+		title: '操作',
+		dataIndex: 'action',
+		align: 'center',
+		width: '220px'
+	}
+]
+
+let selectedRowKeys = ref([])
+
+// 列表选择配置
+const options = {
+	alert: {
+		show: false,
+		clear: () => {
+			selectedRowKeys = ref([])
+		}
+	},
+	rowSelection: {
+		onChange: (selectedRowKey, selectedRows) => {
+			selectedRowKeys.value = selectedRowKey
+		}
+	}
+}
+
+// 根据文件ID加载图片
+const loadImageById = (fileId) => {
+	if (!fileId || imageUrlMap.value.has(fileId)) {
+		return
+	}
+
+	const param = {
+		storageId: fileId
+	}
+
+	fileApi
+		.fileDownload(param)
+		.then((response) => {
+			// response 是整个响应对象，需要取 response.data 才是 blob
+			const blob = response.data
+			if (blob && blob instanceof Blob) {
+				const url = URL.createObjectURL(blob)
+				imageUrlMap.value.set(fileId, url)
+				// 强制更新视图
+				imageUrlMap.value = new Map(imageUrlMap.value)
+			} else {
+				console.error('返回的不是Blob对象:', blob)
+			}
+		})
+		.catch((error) => {
+			console.error('图片加载失败:', error)
+		})
+}
+
+// 获取图片URL
+const getImageUrl = (fileId) => {
+	return imageUrlMap.value.get(fileId) || ''
+}
+
+const loadData = (parameter) => {
+	return carApi.list(Object.assign(parameter, searchFormState.value)).then((res) => {
+		// 加载所有图片
+		if (res.rows && res.rows.length > 0) {
+			res.rows.forEach((item) => {
+				if (item.icon) {
+					loadImageById(item.icon)
+				}
+			})
+		}
+		return res
+	})
+}
+
+// 重置
+const reset = () => {
+	searchFormRef.value.resetFields()
+	tableRef.value.refresh(true)
+}
+
+// 删除
+const deleteCar = (record) => {
+	let params = [
 		{
-			title: '车辆ID',
-			dataIndex: 'carId',
-			width: '150px'
-		},
-		{
-			title: '车辆类型',
-			dataIndex: 'type',
-			width: '150px'
-		},
-		{
-			title: '车辆图片',
-			dataIndex: 'icon',
-			width: '120px'
-		},
-		{
-			title: '操作',
-			dataIndex: 'action',
-			align: 'center',
-			width: '180px'
+			carId: record.carId
 		}
 	]
-	
-	let selectedRowKeys = ref([])
-	
-	// 列表选择配置
-	const options = {
-		alert: {
-			show: false,
-			clear: () => {
-				selectedRowKeys = ref([])
-			}
-		},
-		rowSelection: {
-			onChange: (selectedRowKey, selectedRows) => {
-				selectedRowKeys.value = selectedRowKey
-			}
-		}
-	}
-	
-	const loadData = (parameter) => {
-		return carApi.list(Object.assign(parameter, searchFormState.value)).then((res) => {
-			return res
-		})
-	}
-	
-	// 重置
-	const reset = () => {
-		searchFormRef.value.resetFields()
+	carApi.delete(params).then(() => {
 		tableRef.value.refresh(true)
+	})
+}
+
+// 批量删除
+const deleteBatchCar = (params) => {
+	carApi.delete(params).then(() => {
+		tableRef.value.clearRefreshSelected()
+	})
+}
+
+// 显示详情
+const showDetail = (record) => {
+	if (detailRef.value) {
+		detailRef.value.onOpen(record)
 	}
-	
-	// 删除
-	const deleteCar = (record) => {
-		let params = [
-			{
-				carId: record.carId
-			}
-		]
-		carApi.delete(params).then(() => {
-			tableRef.value.refresh(true)
-		})
-	}
-	
-	// 批量删除
-	const deleteBatchCar = (params) => {
-		carApi.delete(params).then(() => {
-			tableRef.value.clearRefreshSelected()
-		})
-	}
+}
+
+// 组件卸载时清理blob URL
+onUnmounted(() => {
+	imageUrlMap.value.forEach((url) => {
+		URL.revokeObjectURL(url)
+	})
+	imageUrlMap.value.clear()
+})
 </script>
diff --git a/nl-vue/src/views/nl_agv/layout/agv-map-editor.html b/nl-vue/src/views/nl_agv/layout/agv-map-editor.html
new file mode 100644
index 0000000..69300d2
--- /dev/null
+++ b/nl-vue/src/views/nl_agv/layout/agv-map-editor.html
@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AGV地图编辑器</title>
+    <link rel="stylesheet" href="map-editor-styles.css">
+    <style>
+        /* 设备选择浮窗样式 */
+        .device-selection-modal {
+            display: flex;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(5px);
+            z-index: 2000;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .device-selection-content {
+            width: 600px;
+            max-width: 90%;
+            max-height: 80vh;
+            background: rgba(20, 25, 45, 0.98);
+            backdrop-filter: blur(20px);
+            border: 2px solid rgba(0, 255, 200, 0.4);
+            border-radius: 15px;
+            overflow: hidden;
+        }
+
+        .device-selection-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px 25px;
+            background: rgba(0, 255, 200, 0.1);
+            border-bottom: 1px solid rgba(0, 255, 200, 0.3);
+        }
+
+        .device-selection-header h3 {
+            font-size: 20px;
+            color: #00ffc8;
+        }
+
+        .device-selection-close {
+            width: 35px;
+            height: 35px;
+            background: rgba(255, 107, 107, 0.2);
+            border: 1px solid rgba(255, 107, 107, 0.4);
+            border-radius: 8px;
+            color: #ff6b6b;
+            font-size: 24px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .device-selection-body {
+            padding: 20px;
+            max-height: calc(80vh - 80px);
+            overflow-y: auto;
+        }
+
+        .device-selection-category {
+            margin-bottom: 20px;
+        }
+
+        .device-selection-category-title {
+            font-size: 16px;
+            font-weight: 600;
+            color: #00d4ff;
+            margin-bottom: 15px;
+        }
+
+        .device-selection-items {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+            gap: 15px;
+        }
+
+        .device-selection-item {
+            padding: 15px;
+            background: rgba(0, 255, 200, 0.05);
+            border: 1px solid rgba(0, 255, 200, 0.2);
+            border-radius: 10px;
+            cursor: pointer;
+            text-align: center;
+            transition: all 0.3s;
+        }
+
+        .device-selection-item:hover {
+            background: rgba(0, 255, 200, 0.15);
+            border-color: rgba(0, 255, 200, 0.4);
+            transform: translateY(-2px);
+        }
+
+        .device-selection-icon {
+            font-size: 40px;
+            margin-bottom: 10px;
+        }
+
+        .device-selection-name {
+            font-size: 14px;
+            color: #e0e6ed;
+        }
+
+        .form-hint {
+            font-size: 12px;
+            color: #8b95a5;
+            margin-top: 5px;
+        }
+    </style>
+</head>
+<body>
+<!-- 顶部工具栏 -->
+<div class="toolbar">
+    <div class="toolbar-left">
+        <h1 class="toolbar-title">AGV地图编辑器</h1>
+    </div>
+    <div class="toolbar-right">
+        <button class="btn btn-secondary" id="backBtn">返回看板</button>
+        <button class="btn btn-primary" id="saveBtn">保存配置</button>
+    </div>
+</div>
+
+<!-- 主内容区 -->
+<div class="main-content">
+    <!-- 左侧设备面板 -->
+    <div class="device-panel">
+        <div class="panel-header">
+            <h3>设备组件</h3>
+        </div>
+        <div class="device-list">
+            <!-- 动态加载设备列表 -->
+            <div style="text-align: center; padding: 40px 20px; color: #8b95a5;">
+                <div style="font-size: 40px; margin-bottom: 15px;">⏳</div>
+                <div>正在加载设备列表...</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 地图编辑区 -->
+    <div class="map-editor">
+        <input type="file" id="mapFileInput" accept="image/*" style="display: none;">
+
+        <div class="map-canvas-wrapper" id="mapCanvasWrapper">
+            <div class="map-canvas" id="mapCanvas">
+                <div class="placeholder" id="mapPlaceholder">
+                    <div class="placeholder-icon">🗺️</div>
+                    <div class="placeholder-text">点击右下角"上传地图"开始编辑</div>
+                </div>
+                <img id="mapImage" class="map-image" style="display: none;">
+                <canvas id="originCanvas" class="origin-canvas"></canvas>
+                <div id="devicesLayer" class="devices-layer"></div>
+            </div>
+
+            <!-- 右下角控制面板 -->
+            <div class="floating-controls">
+                <div class="origin-info" id="originInfo">
+                    原点: (0, 0)
+                </div>
+                <div class="control-buttons">
+                    <button class="control-btn" id="uploadMapBtn" title="上传地图">
+                        📁
+                    </button>
+                    <button class="control-btn" id="setOriginBtn" title="设置原点">
+                        📍
+                    </button>
+                    <button class="control-btn" id="zoomInBtn" title="放大">
+                        🔍+
+                    </button>
+                    <button class="control-btn" id="zoomOutBtn" title="缩小">
+                        🔍-
+                    </button>
+                    <button class="control-btn" id="resetViewBtn" title="重置视图">
+                        ⌂
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 属性设置浮窗 -->
+<div class="property-modal" id="propertyModal">
+    <div class="property-modal-content">
+        <div class="property-modal-header">
+            <h3 id="propertyModalTitle">设备属性</h3>
+            <button class="property-modal-close" id="propertyModalClose">×</button>
+        </div>
+        <div class="property-modal-body" id="propertyModalBody">
+            <!-- 动态内容 -->
+        </div>
+    </div>
+</div>
+
+<script src="toast-notification.js"></script>
+<script src="device-loader.js"></script>
+<script src="device-config.js"></script>
+<script src="map-editor-main.js"></script>
+</body>
+</html>
diff --git a/nl-vue/src/views/nl_agv/layout/components/DeviceMarker.vue b/nl-vue/src/views/nl_agv/layout/components/DeviceMarker.vue
new file mode 100644
index 0000000..e69de29
diff --git a/nl-vue/src/views/nl_agv/layout/components/PropertyModal.vue b/nl-vue/src/views/nl_agv/layout/components/PropertyModal.vue
new file mode 100644
index 0000000..9db7022
--- /dev/null
+++ b/nl-vue/src/views/nl_agv/layout/components/PropertyModal.vue
@@ -0,0 +1,124 @@
+<template>
+	<a-modal
+		v-model:visible="visible"
+		title="设备属性设置"
+		:width="500"
+		:footer="null"
+		@cancel="handleClose"
+	>
+		<a-form layout="vertical">
+			<a-form-item label="设备ID">
+				<a-input :value="device.id" disabled />
+			</a-form-item>
+
+			<a-form-item label="设备名称">
+				<a-input :value="device.name" @change="handleUpdate('name', $event.target.value)" />
+			</a-form-item>
+
+			<a-form-item label="设备类型">
+				<a-input :value="device.type" disabled />
+			</a-form-item>
+
+			<a-form-item label="X坐标">
+				<a-input-number
+					:value="device.x"
+					:min="0"
+					style="width: 100%"
+					@change="handleUpdate('x', $event)"
+				/>
+			</a-form-item>
+
+			<a-form-item label="Y坐标">
+				<a-input-number
+					:value="device.y"
+					:min="0"
+					style="width: 100%"
+					@change="handleUpdate('y', $event)"
+				/>
+			</a-form-item>
+
+			<a-form-item label="旋转角度 (度)">
+				<a-input-number
+					:value="device.angle || 0"
+					:min="0"
+					:max="360"
+					:step="1"
+					style="width: 100%"
+					@change="handleUpdate('angle', $event)"
+				/>
+				<div class="form-hint">0-360度，0度为正东方向，顺时针旋转</div>
+			</a-form-item>
+
+			<a-form-item label="设备大小 (像素)">
+				<a-input-number
+					:value="device.size || 50"
+					:min="10"
+					:step="1"
+					style="width: 100%"
+					@change="handleUpdate('size', $event)"
+				/>
+				<div class="form-hint">最小10px，无上限</div>
+			</a-form-item>
+
+			<a-form-item>
+				<a-button type="primary" danger block @click="handleDelete">
+					删除设备
+				</a-button>
+			</a-form-item>
+		</a-form>
+	</a-modal>
+</template>
+
+<script setup>
+	import { ref, watch } from 'vue'
+	import { Modal } from 'ant-design-vue'
+
+	const props = defineProps({
+		device: {
+			type: Object,
+			required: true
+		}
+	})
+
+	const emit = defineEmits(['close', 'update', 'delete'])
+
+	const visible = ref(true)
+
+	watch(
+		() => props.device,
+		() => {
+			visible.value = true
+		}
+	)
+
+	const handleClose = () => {
+		visible.value = false
+		emit('close')
+	}
+
+	const handleUpdate = (property, value) => {
+		emit('update', props.device.id, property, value)
+	}
+
+	const handleDelete = () => {
+		Modal.confirm({
+			title: '确定要删除这个设备吗？',
+			content: `设备名称: ${props.device.name}`,
+			okText: '确定',
+			okType: 'danger',
+			cancelText: '取消',
+			onOk() {
+				emit('delete', props.device.id)
+				handleClose()
+			}
+		})
+	}
+</script>
+
+<style scoped lang="less">
+	.form-hint {
+		font-size: 12px;
+		color: #8b95a5;
+		margin-top: 5px;
+	}
+</style>
diff --git a/nl-vue/src/views/nl_agv/layout/device-config.js b/nl-vue/src/views/nl_agv/layout/device-config.js
new file mode 100644
index 0000000..856926a
--- /dev/null
+++ b/nl-vue/src/views/nl_agv/layout/device-config.js
@@ -0,0 +1,277 @@
+// 设备选择和配置相关功能
+//
+// // 显示设备选择浮窗
+// function showDeviceSelectionModal(x, y, callback) {
+//     const modal = document.createElement('div');
+//     modal.className = 'device-selection-modal';
+//     modal.innerHTML = `
+//         <div class="device-selection-content">
+//             <div class="device-selection-header">
+//                 <h3>选择设备</h3>
+//                 <button class="device-selection-close">×</button>
+//             </div>
+//             <div class="device-selection-body">
+//                 ${renderDeviceSelectionList()}
+//             </div>
+//         </div>
+//     `;
+//
+//     document.body.appendChild(modal);
+//
+//     // 关闭按钮
+//     modal.querySelector('.device-selection-close').addEventListener('click', () => {
+//         modal.remove();
+//     });
+//
+//     // 点击外部关闭
+//     modal.addEventListener('click', (e) => {
+//         if (e.target === modal) {
+//             modal.remove();
+//         }
+//     });
+//
+//     // 设备选择
+//     modal.querySelectorAll('.device-selection-item').forEach(item => {
+//         item.addEventListener('click', () => {
+//             const deviceId = item.dataset.deviceId;
+//             const template = getDeviceTemplate(deviceId);
+//             if (template) {
+//                 callback(template, x, y);
+//                 modal.remove();
+//             }
+//         });
+//     });
+// }
+
+// 渲染设备选择列表
+function renderDeviceSelectionList() {
+    const groupedDevices = {};
+    deviceTemplates.forEach(device => {
+        if (!groupedDevices[device.type]) {
+            groupedDevices[device.type] = [];
+        }
+        groupedDevices[device.type].push(device);
+    });
+
+    const typeNames = {
+        'agv': 'AGV车辆',
+        'storage': '货位',
+        'charger': '充电桩',
+        'other': '其他设备'
+    };
+
+    let html = '';
+    for (const [type, devices] of Object.entries(groupedDevices)) {
+        html += `
+            <div class="device-selection-category">
+                <div class="device-selection-category-title">${typeNames[type] || type}</div>
+                <div class="device-selection-items">
+                    ${devices.map(device => {
+            // 判断icon是图片URL还是emoji
+            const iconHtml = isImageUrl(device.icon)
+                ? `<img src="${device.icon}" alt="${device.name}" style="width: 100%; height: 100%; object-fit: contain;">`
+                : (device.icon || '📍');
+
+            return `
+                            <div class="device-selection-item" data-device-id="${device.id}">
+                                <div class="device-selection-icon">${iconHtml}</div>
+                                <div class="device-selection-name">${device.name}</div>
+                            </div>
+                        `;
+        }).join('')}
+                </div>
+            </div>
+        `;
+    }
+
+    return html;
+}
+
+// 渲染设备属性表单（包含角度、大小和扩展属性）
+function renderDevicePropertyForm(device) {
+    const template = getDeviceTemplate(device.templateId);
+    if (!template) return '';
+
+    let html = `
+        <div class="form-group">
+            <label class="form-label">设备ID</label>
+            <input type="text" class="form-input" value="${device.id}" disabled>
+        </div>
+        
+        <div class="form-group">
+            <label class="form-label">设备名称</label>
+            <input type="text" class="form-input" id="deviceName" value="${device.name}">
+        </div>
+        
+        <div class="form-group">
+            <label class="form-label">设备类型</label>
+            <input type="text" class="form-input" value="${template.name}" disabled>
+        </div>
+        
+        <div class="form-group">
+            <label class="form-label">X坐标</label>
+            <input type="number" class="form-input" id="deviceX" value="${device.x}">
+        </div>
+        
+        <div class="form-group">
+            <label class="form-label">Y坐标</label>
+            <input type="number" class="form-input" id="deviceY" value="${device.y}">
+        </div>
+        
+        <div class="form-group">
+            <label class="form-label">旋转角度 (度)</label>
+            <input type="number" class="form-input" id="deviceAngle" value="${device.angle || 0}" min="0" max="360" step="1">
+            <div class="form-hint">0-360度，0度为正东方向，顺时针旋转</div>
+        </div>
+        
+        <div class="form-group">
+            <label class="form-label">设备大小 (像素)</label>
+            <input type="number" class="form-input" id="deviceSize" value="${device.size || 50}" min="10" step="1">
+            <div class="form-hint">最小10px，无上限</div>
+        </div>
+    `;
+
+    // // 添加扩展属性
+    // if (template.editParam && Array.isArray(template.editParam)) {
+    //     template.editParam.forEach(param => {
+    //         const value = device.extendedProps?.[param.value] || param.default || '';
+    //         const inputType = param.type === 'number' ? 'number' : 'text';
+    //         const unit = param.unit ? ` (${param.unit})` : '';
+    //
+    //         html += `
+    //             <div class="form-group">
+    //                 <label class="form-label">${param.key}${unit}</label>
+    //                 <input type="${inputType}"
+    //                        class="form-input device-extended-prop"
+    //                        data-prop-key="${param.value}"
+    //                        value="${value}">
+    //             </div>
+    //         `;
+    //     });
+    // }
+
+    html += `
+        <button class="btn btn-delete" id="deleteDeviceBtn">删除设备</button>
+    `;
+
+    return html;
+}
+
+// 绑定设备属性表单事件
+function bindDevicePropertyEvents(device) {
+    // 设备名称
+    const nameInput = document.getElementById('deviceName');
+    if (nameInput) {
+        nameInput.addEventListener('input', (e) => {
+            device.name = e.target.value;
+            updateDeviceLabel(device.id, device.name);
+            elements.propertyModalTitle.textContent = `${device.name} - 属性设置`;
+        });
+    }
+
+    // X坐标
+    const xInput = document.getElementById('deviceX');
+    if (xInput) {
+        xInput.addEventListener('input', (e) => {
+            device.x = parseInt(e.target.value) || 0;
+            updateDevicePosition(device.id);
+        });
+    }
+
+    // Y坐标
+    const yInput = document.getElementById('deviceY');
+    if (yInput) {
+        yInput.addEventListener('input', (e) => {
+            device.y = parseInt(e.target.value) || 0;
+            updateDevicePosition(device.id);
+        });
+    }
+
+    // 角度 - 实时更新旋转
+    const angleInput = document.getElementById('deviceAngle');
+    if (angleInput) {
+        angleInput.addEventListener('input', (e) => {
+            let angle = parseInt(e.target.value) || 0;
+            angle = Math.max(0, Math.min(360, angle));
+            e.target.value = angle;
+            device.angle = angle;
+            updateDeviceRotation(device.id, angle);
+            console.log(`🔄 设备 ${device.name} 角度更新为: ${angle}度`);
+        });
+    }
+
+    // 大小 - 实时更新
+    const sizeInput = document.getElementById('deviceSize');
+    if (sizeInput) {
+        sizeInput.addEventListener('input', (e) => {
+            let size = parseInt(e.target.value) || 50;
+            size = Math.max(10, size); // 最小10px
+            e.target.value = size;
+            device.size = size;
+            updateDeviceSize(device.id, size);
+            console.log(`📏 设备 ${device.name} 大小更新为: ${size}px`);
+        });
+    }
+
+    // // 扩展属性
+    // document.querySelectorAll('.device-extended-prop').forEach(input => {
+    //     input.addEventListener('input', (e) => {
+    //         const propKey = e.target.dataset.propKey;
+    //         const value = e.target.type === 'number' ? parseFloat(e.target.value) : e.target.value;
+    //
+    //         if (!device.extendedProps) {
+    //             device.extendedProps = {};
+    //         }
+    //         device.extendedProps[propKey] = value;
+    //         console.log(`📝 设备 ${device.name} 扩展属性更新:`, propKey, '=', value);
+    //     });
+    // });
+
+    // 删除按钮
+    const deleteBtn = document.getElementById('deleteDeviceBtn');
+    if (deleteBtn) {
+        deleteBtn.addEventListener('click', () => {
+            deleteDevice(device.id);
+        });
+    }
+}
+
+// 更新设备大小
+function updateDeviceSize(deviceId, size) {
+    const deviceEl = document.querySelector(`[data-device-id="${deviceId}"]`);
+    if (deviceEl) {
+        deviceEl.style.width = size + 'px';
+        deviceEl.style.height = size + 'px';
+    }
+}
+
+// 准备保存数据（转换为后端需要的格式）
+function prepareDeviceDataForSave(device) {
+    const template = getDeviceTemplate(device.templateId);
+    if (!template) return null;
+
+    const saveData = {
+        id:device.templateId,
+        name: device.name,
+        type: template.type,
+        icon: template.icon,
+        x: device.x,
+        y: device.y,
+        angle: device.angle || 0,
+        size: Math.floor(device.size) || 50,  // 添加设备大小
+        param:{}
+    };
+    //
+    // // 添加扩展属性（使用editParam中的value作为key）
+    // if (device.extendedProps && template.editParam) {
+    //     debugger
+    //     template.editParam.forEach(param => {
+    //         const value = device.extendedProps[param.value];
+    //         if (value !== undefined && value !== null) {
+    //             saveData[param.value] = value;
+    //         }
+    //     });
+    // }
+
+    return saveData;
+}
diff --git a/nl-vue/src/views/nl_agv/layout/device-loader.js b/nl-vue/src/views/nl_agv/layout/device-loader.js
new file mode 100644
index 0000000..a54b035
--- /dev/null
+++ b/nl-vue/src/views/nl_agv/layout/device-loader.js
@@ -0,0 +1,142 @@
+// 设备模板数据（从接口获取）
+let deviceTemplates = [];
+
+// 从接口获取设备列表
+async function loadDeviceList() {
+    console.log('🔄 开始加载设备列表...');
+    console.log('📡 接口地址: http://localhost:8081/api/device/list');
+    try {
+        const response = await fetch('http://localhost:8081/api/device/list', {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+        console.log('📊 接口响应状态:', response.status);
+
+        if (!response.ok) {
+            throw new Error(`HTTP错误! 状态: ${response.status}`);
+        }
+
+        const data = await response.json();
+        console.log('📦 接口返回数据:', data);
+
+        if (data && Array.isArray(data.data)) {
+            deviceTemplates = data.data;
+            renderDeviceList();
+            console.log('✅ 设备列表加载成功，共', deviceTemplates.length, '个设备');
+        } else {
+            console.error('❌ 设备列表格式错误，返回数据不是数组');
+        }
+    } catch (error) {
+        console.error('❌ 加载设备列表失败:', error);
+        console.log('💡 使用模拟数据作为备用方案');
+    }
+}
+
+// 加载模拟设备列表（用于测试）
+function loadMockDeviceList() {
+    deviceTemplates = [
+        {
+            id: 1,
+            name: 'AGV-NT100',
+            type: 'agv',
+            icon: '🚗',
+            editParam: [
+                { key: '速度', value: 'speed', type: 'number', unit: 'm/s', default: 1.5 },
+                { key: '载重', value: 'capacity', type: 'number', unit: 'kg', default: 500 },
+                { key: '电量', value: 'battery', type: 'number', unit: '%', default: 100 }
+            ]
+        }
+    ];
+    renderDeviceList();
+}
+
+// 判断是否为图片URL
+function isImageUrl(str) {
+    if (!str) return false;
+    // 检查是否为URL路径
+    return str.startsWith('http://') ||
+           str.startsWith('https://') ||
+           str.startsWith('/') ||
+           str.startsWith('./') ||
+           str.startsWith('../') ||
+           // 检查是否包含图片扩展名
+           /\.(jpg|jpeg|png|gif|svg|webp|bmp)$/i.test(str);
+}
+
+// 渲染设备图标
+function renderDeviceIcon(device) {
+    if (isImageUrl(device.icon)) {
+        // 如果是图片URL，使用img标签
+        return `<img src="${device.icon}" alt="${device.name}" style="width: 100%; height: 100%; object-fit: contain;" onerror="this.style.display='none'; this.parentElement.innerHTML='📍';">`;
+    } else {
+        // 如果是emoji或其他文本，直接显示
+        return device.icon || '📍';
+    }
+}
+
+// 渲染设备列表
+function renderDeviceList() {
+    console.log('🎨 开始渲染设备列表...');
+    const deviceListContainer = document.querySelector('.device-list');
+    if (!deviceListContainer) {
+        console.error('❌ 找不到设备列表容器 (.device-list)');
+        return;
+    }
+
+    // 按类型分组
+    const groupedDevices = {};
+    deviceTemplates.forEach(device => {
+        if (!groupedDevices[device.type]) {
+            groupedDevices[device.type] = [];
+        }
+        groupedDevices[device.type].push(device);
+    });
+    // 生成HTML
+    let html = '';
+    for (const [type, devices] of Object.entries(groupedDevices)) {
+        html += `
+            <div class="device-category">
+                <div class="category-title">${ type}</div>
+                ${devices.map(device => `
+                    <div class="device-item" draggable="true" 
+                         data-device-id="${device.id}"
+                         data-device-name="${device.name}"
+                         data-device-type="${device.type}">
+                        <div class="device-icon">${renderDeviceIcon(device)}</div>
+                        <div class="device-info">
+                            <div class="device-name">${device.name}</div>
+                            <div class="device-desc">${device.type}</div>
+                        </div>
+                    </div>
+                `).join('')}
+            </div>
+        `;
+    }
+    deviceListContainer.innerHTML = html;
+    console.log('✅ 设备列表渲染完成');
+    // 重新绑定拖拽事件
+    const deviceItems = document.querySelectorAll('.device-item');
+    deviceItems.forEach(item => {
+        item.addEventListener('dragstart', handleDragStart);
+    });
+    elements.mapCanvasWrapper.addEventListener('dragover', handleDragOver);
+    elements.mapCanvasWrapper.addEventListener('drop', handleDrop);
+}
+
+// 根据设备模板ID获取设备信息
+function getDeviceTemplate(deviceId) {
+    return deviceTemplates.find(d => d.id == deviceId);
+}
+
+// 创建设备实例的扩展属性
+function createDeviceExtendedProps(template) {
+    const extendedProps = {};
+    if (template.editParam && Array.isArray(template.editParam)) {
+        template.editParam.forEach(param => {
+            extendedProps[param.value] = param.default || '';
+        });
+    }
+    return extendedProps;
+}
diff --git a/nl-vue/src/views/nl_agv/layout/index.vue b/nl-vue/src/views/nl_agv/layout/index.vue
new file mode 100644
index 0000000..e69de29
diff --git a/nl-vue/src/views/nl_agv/layout/map-editor-main.js b/nl-vue/src/views/nl_agv/layout/map-editor-main.js
new file mode 100644
index 0000000..dedc8d7
--- /dev/null
+++ b/nl-vue/src/views/nl_agv/layout/map-editor-main.js
@@ -0,0 +1,777 @@
+// AGV地图编辑器 - 主脚本（完整版）
+// 设备可以直接拖拽，单击显示控制手柄，双击打开属性面板
+
+// 地图编辑器状态
+const editorState = {
+    mapImage: null,
+    mapId: null, // 地图ID（从后端返回）
+    origin: { x: 0, y: 0 },
+    scale: 1,
+    offsetX: 0,
+    offsetY: 0,
+    isDragging: false,
+    isSettingOrigin: false,
+    devices: [],
+    selectedDevice: null,
+    deviceIdCounter: 1,
+    // 当前操作状态（优化性能）
+    currentDragDevice: null,
+    currentResizeDevice: null,
+    currentRotateDevice: null
+};
+
+// DOM元素
+const elements = {
+    mapFileInput: document.getElementById('mapFileInput'),
+    uploadMapBtn: document.getElementById('uploadMapBtn'),
+    setOriginBtn: document.getElementById('setOriginBtn'),
+    originInfo: document.getElementById('originInfo'),
+    zoomInBtn: document.getElementById('zoomInBtn'),
+    zoomOutBtn: document.getElementById('zoomOutBtn'),
+    resetViewBtn: document.getElementById('resetViewBtn'),
+    saveBtn: document.getElementById('saveBtn'),
+    backBtn: document.getElementById('backBtn'),
+    mapCanvas: document.getElementById('mapCanvas'),
+    mapCanvasWrapper: document.getElementById('mapCanvasWrapper'),
+    mapImage: document.getElementById('mapImage'),
+    mapPlaceholder: document.getElementById('mapPlaceholder'),
+    originCanvas: document.getElementById('originCanvas'),
+    devicesLayer: document.getElementById('devicesLayer'),
+    propertyModal: document.getElementById('propertyModal'),
+    propertyModalTitle: document.getElementById('propertyModalTitle'),
+    propertyModalBody: document.getElementById('propertyModalBody'),
+    propertyModalClose: document.getElementById('propertyModalClose')
+};
+
+// 判断是否为图片URL
+function isImageUrl(str) {
+    if (!str) return false;
+    return str.startsWith('http://') ||
+        str.startsWith('https://') ||
+        str.startsWith('/') ||
+        str.startsWith('./') ||
+        str.startsWith('../') ||
+        /\.(jpg|jpeg|png|gif|svg|webp|bmp)$/i.test(str);
+}
+
+// 初始化
+function init() {
+    initEventListeners();
+    loadDeviceList();
+}
+
+// 初始化事件监听
+function initEventListeners() {
+    elements.uploadMapBtn.addEventListener('click', () => {
+        elements.mapFileInput.click();
+    });
+    elements.mapFileInput.addEventListener('change', handleMapUpload);
+    elements.setOriginBtn.addEventListener('click', toggleOriginMode);
+    elements.zoomInBtn.addEventListener('click', () => zoomMap(1.2));
+    elements.zoomOutBtn.addEventListener('click', () => zoomMap(0.8));
+    elements.resetViewBtn.addEventListener('click', resetView);
+    elements.saveBtn.addEventListener('click', saveConfiguration);
+    elements.backBtn.addEventListener('click', () => {
+        window.location.href = 'agv-dashboardV2.html';
+    });
+    elements.mapCanvasWrapper.addEventListener('click', handleMapClick);
+    elements.propertyModalClose.addEventListener('click', closePropertyModal);
+    elements.propertyModal.addEventListener('click', (e) => {
+        if (e.target === elements.propertyModal) {
+            closePropertyModal();
+        }
+    });
+    // 全局鼠标事件监听器（优化性能，避免重复添加）
+    document.addEventListener('mousemove', handleGlobalMouseMove);
+    document.addEventListener('mouseup', handleGlobalMouseUp);
+}
+// 处理地图上传
+async function handleMapUpload(e) {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    if (!file.type.startsWith('image/')) {
+        Toast.error('请上传图片文件！');
+        return;
+    }
+
+    // 显示加载提示
+    Toast.info('正在上传地图...', 0);
+
+    try {
+        // 调用后端上传接口
+        const mapId = await uploadMapToServer(file);
+
+        if (mapId) {
+            // 上传成功，保存地图ID
+            editorState.mapId = mapId;
+            Toast.clear();
+            Toast.success(`地图上传成功！地图ID: ${mapId}`);
+
+            // 读取并显示地图
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                editorState.mapImage = event.target.result;
+                elements.mapImage.src = event.target.result;
+                elements.mapImage.style.display = 'block';
+                elements.mapPlaceholder.style.display = 'none';
+
+                elements.mapImage.onload = () => {
+                    initOriginCanvas();
+                    resetView();
+                };
+            };
+            reader.readAsDataURL(file);
+        } else {
+            throw new Error('上传失败，未返回地图ID');
+        }
+    } catch (error) {
+        Toast.clear();
+        Toast.error('地图上传失败: ' + error.message);
+        console.error('地图上传失败:', error);
+    }
+}
+
+// 上传地图到服务器
+async function uploadMapToServer(file) {
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+        const response = await fetch('http://localhost:8081/api/localStorage/upload', {
+            method: 'POST',
+            body: formData
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP错误! 状态: ${response.status}`);
+        }
+
+        const result = await response.json();
+        console.log('地图上传响应:', result);
+
+        if (result.code === 200 && result.data && result.data.id) {
+            return result.data.id;
+        } else {
+            throw new Error(result.msg || '上传失败');
+        }
+    } catch (error) {
+        console.error('上传地图到服务器失败:', error);
+        throw error;
+    }
+}
+
+// 初始化原点画布
+function initOriginCanvas() {
+    const img = elements.mapImage;
+    elements.originCanvas.width = img.naturalWidth;
+    elements.originCanvas.height = img.naturalHeight;
+    elements.originCanvas.style.width = img.clientWidth + 'px';
+    elements.originCanvas.style.height = img.clientHeight + 'px';
+    drawOrigin();
+}
+
+// 绘制原点
+function drawOrigin() {
+    const canvas = elements.originCanvas;
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    const { x, y } = editorState.origin;
+
+    ctx.strokeStyle = '#ff6b6b';
+    ctx.lineWidth = 2;
+    ctx.setLineDash([5, 5]);
+
+    ctx.beginPath();
+    ctx.moveTo(x, 0);
+    ctx.lineTo(x, canvas.height);
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.moveTo(0, y);
+    ctx.lineTo(canvas.width, y);
+    ctx.stroke();
+
+    ctx.setLineDash([]);
+    ctx.fillStyle = '#ff6b6b';
+    ctx.beginPath();
+    ctx.arc(x, y, 8, 0, Math.PI * 2);
+    ctx.fill();
+
+    ctx.strokeStyle = '#fff';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.arc(x, y, 8, 0, Math.PI * 2);
+    ctx.stroke();
+
+    elements.originInfo.textContent = `原点: (${x}, ${y})`;
+}
+
+// 切换原点设置模式
+function toggleOriginMode() {
+    if (!editorState.mapImage) {
+        Toast.warning('请先上传地图！');
+        return;
+    }
+
+    editorState.isSettingOrigin = !editorState.isSettingOrigin;
+
+    if (editorState.isSettingOrigin) {
+        elements.setOriginBtn.classList.add('active');
+        elements.mapCanvasWrapper.style.cursor = 'crosshair';
+    } else {
+        elements.setOriginBtn.classList.remove('active');
+        elements.mapCanvasWrapper.style.cursor = 'default';
+    }
+}
+
+// 处理地图点击
+function handleMapClick(e) {
+    if (e.target.closest('.floating-controls')) {
+        return;
+    }
+
+    if (editorState.isSettingOrigin && editorState.mapImage) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        const rect = elements.mapImage.getBoundingClientRect();
+        const x = Math.round((e.clientX - rect.left) / rect.width * elements.mapImage.naturalWidth);
+        const y = Math.round((e.clientY - rect.top) / rect.height * elements.mapImage.naturalHeight);
+
+        editorState.origin = { x, y };
+        drawOrigin();
+        toggleOriginMode();
+
+        Toast.success(`原点已设置为: (${x}, ${y})`);
+        return;
+    }
+
+    // 点击空白处取消选中
+    if (!e.target.closest('.placed-device')) {
+        deselectAllDevices();
+    }
+}
+
+// 缩放地图
+function zoomMap(factor) {
+    editorState.scale = Math.max(0.5, Math.min(3, editorState.scale * factor));
+    updateMapTransform();
+}
+
+// 重置视图
+function resetView() {
+    editorState.scale = 1;
+    editorState.offsetX = 0;
+    editorState.offsetY = 0;
+    updateMapTransform();
+}
+
+// 更新地图变换
+function updateMapTransform() {
+    elements.mapCanvas.style.transform =
+        `translate(${editorState.offsetX}px, ${editorState.offsetY}px) scale(${editorState.scale})`;
+}
+
+// 初始化拖放功能
+function initDragAndDrop() {
+
+}
+
+function handleDragStart(e) {
+    const deviceId = e.currentTarget.dataset.deviceId;
+    e.dataTransfer.setData('deviceId', deviceId);
+    e.currentTarget.classList.add('dragging');
+}
+
+function handleDragOver(e) {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'copy';
+}
+
+function handleDrop(e) {
+    e.preventDefault();
+
+    if (!editorState.mapImage) {
+        Toast.warning('请先上传地图！');
+        return;
+    }
+
+    const deviceId = e.dataTransfer.getData('deviceId');
+    const template = getDeviceTemplate(deviceId);
+
+    if (!template) {
+        Toast.error('设备模板不存在！');
+        return;
+    }
+
+    const rect = elements.mapImage.getBoundingClientRect();
+    const x = Math.round((e.clientX - rect.left) / rect.width * elements.mapImage.naturalWidth);
+    const y = Math.round((e.clientY - rect.top) / rect.height * elements.mapImage.naturalHeight);
+
+    addDeviceFromTemplate(template, x, y);
+
+    document.querySelectorAll('.device-item').forEach(item => {
+        item.classList.remove('dragging');
+    });
+}
+
+// 从模板添加设备
+function addDeviceFromTemplate(template, x, y) {
+    const device = {
+        id: `device_${editorState.deviceIdCounter++}`,
+        templateId: template.id,
+        name: `${template.name}`,
+        type: template.type,
+        icon: template.icon,
+        x: x,
+        y: y,
+        angle: 0,
+        size: 50,
+        extendedProps: createDeviceExtendedProps(template)
+    };
+
+    editorState.devices.push(device);
+    renderDevice(device);
+}
+
+// 渲染设备到地图上
+function renderDevice(device) {
+    const template = getDeviceTemplate(device.templateId);
+    if (!template) {
+        console.error('❌ 找不到设备模板:', device.templateId);
+        return;
+    }
+
+    const deviceEl = document.createElement('div');
+    deviceEl.className = 'placed-device';
+    deviceEl.dataset.deviceId = device.id;
+
+    const img = elements.mapImage;
+    const leftPercent = (device.x / img.naturalWidth) * 100;
+    const topPercent = (device.y / img.naturalHeight) * 100;
+
+    deviceEl.style.left = leftPercent + '%';
+    deviceEl.style.top = topPercent + '%';
+
+    const deviceSize = device.size || 50;
+    deviceEl.style.width = deviceSize + 'px';
+    deviceEl.style.height = deviceSize + 'px';
+
+    // 根据设备大小动态计算图标字体大小（约为设备大小的64%）
+    const iconFontSize = Math.round(deviceSize * 0.64);
+
+    let iconHtml;
+    if (isImageUrl(template.icon)) {
+        iconHtml = `<img src="${template.icon}" 
+                         alt="${device.name}" 
+                         class="device-icon-img"
+                         style="width: 100%; height: 100%; object-fit: contain; transform: rotate(${device.angle || 0}deg);" 
+                         onerror="this.style.display='none'; this.parentElement.innerHTML='📍';">`;
+    } else {
+        iconHtml = `<span style="font-size: ${iconFontSize}px; transform: rotate(${device.angle || 0}deg); display: inline-block;">${template.icon || '📍'}</span>`;
+    }
+
+    deviceEl.innerHTML = `
+        <div class="device-marker">
+            <div class="device-marker-icon">${iconHtml}</div>
+            <div class="device-marker-label">${device.name}</div>
+        </div>
+        <div class="device-delete-btn">×</div>
+        <div class="device-controls">
+            <div class="resize-handle resize-nw" data-direction="nw"></div>
+            <div class="resize-handle resize-ne" data-direction="ne"></div>
+            <div class="resize-handle resize-sw" data-direction="sw"></div>
+            <div class="resize-handle resize-se" data-direction="se"></div>
+            <div class="rotate-handle" title="拖拽旋转">🔄</div>
+        </div>
+    `;
+
+    // 单击选中设备，显示控制手柄
+    deviceEl.addEventListener('click', (e) => {
+        e.stopPropagation();
+        selectDeviceForEdit(device.id);
+    });
+
+    // 双击打开属性面板
+    deviceEl.addEventListener('dblclick', (e) => {
+        e.stopPropagation();
+        showPropertyModal(device);
+    });
+
+    // 删除按钮
+    deviceEl.querySelector('.device-delete-btn').addEventListener('click', (e) => {
+        e.stopPropagation();
+        deleteDevice(device.id);
+    });
+
+    // 绑定拖动设备功能（可以直接拖拽）
+    initDeviceDrag(deviceEl, device);
+
+    // 绑定缩放功能
+    initDeviceResize(deviceEl, device);
+
+    // 绑定旋转功能
+    initDeviceRotate(deviceEl, device);
+
+    elements.devicesLayer.appendChild(deviceEl);
+}
+
+// 全局鼠标移动处理（优化性能）
+function handleGlobalMouseMove(e) {
+    // 处理设备拖动
+    if (editorState.currentDragDevice) {
+        const { device, deviceEl, dragStartPos } = editorState.currentDragDevice;
+
+        const moveDistance = Math.sqrt(
+            Math.pow(e.clientX - dragStartPos.x, 2) +
+            Math.pow(e.clientY - dragStartPos.y, 2)
+        );
+
+        if (moveDistance > 5) {
+            editorState.currentDragDevice.hasMoved = true;
+        }
+
+        const img = elements.mapImage;
+        const rect = img.getBoundingClientRect();
+        const deltaX = e.clientX - dragStartPos.x;
+        const deltaY = e.clientY - dragStartPos.y;
+
+        const newX = device.x + Math.round(deltaX / rect.width * img.naturalWidth);
+        const newY = device.y + Math.round(deltaY / rect.height * img.naturalHeight);
+
+        device.x = Math.max(0, Math.min(img.naturalWidth, newX));
+        device.y = Math.max(0, Math.min(img.naturalHeight, newY));
+
+        const newLeftPercent = (device.x / img.naturalWidth) * 100;
+        const newTopPercent = (device.y / img.naturalHeight) * 100;
+
+        deviceEl.style.left = newLeftPercent + '%';
+        deviceEl.style.top = newTopPercent + '%';
+
+        editorState.currentDragDevice.dragStartPos = { x: e.clientX, y: e.clientY };
+    }
+
+    // 处理设备缩放
+    if (editorState.currentResizeDevice) {
+        const { device, deviceEl, startSize, startPos } = editorState.currentResizeDevice;
+
+        const deltaX = e.clientX - startPos.x;
+        const deltaY = e.clientY - startPos.y;
+        const delta = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        const direction = (deltaX + deltaY) > 0 ? 1 : -1;
+
+        const newSize = Math.max(10, startSize + delta * direction * 0.5);
+        device.size = newSize;
+
+        deviceEl.style.width = newSize + 'px';
+        deviceEl.style.height = newSize + 'px';
+
+        // 更新图标大小
+        const iconFontSize = Math.round(newSize * 0.64);
+        const template = getDeviceTemplate(device.templateId);
+        if (template && !isImageUrl(template.icon)) {
+            const iconSpan = deviceEl.querySelector('.device-marker-icon span');
+            if (iconSpan) {
+                iconSpan.style.fontSize = iconFontSize + 'px';
+            }
+        }
+    }
+
+    // 处理设备旋转
+    if (editorState.currentRotateDevice) {
+        const { device, deviceEl } = editorState.currentRotateDevice;
+
+        const rect = deviceEl.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+
+        const angle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * 180 / Math.PI;
+        device.angle = Math.round((angle + 360) % 360);
+
+        const template = getDeviceTemplate(device.templateId);
+        if (template) {
+            if (isImageUrl(template.icon)) {
+                const iconImg = deviceEl.querySelector('.device-icon-img');
+                if (iconImg) {
+                    iconImg.style.transform = `rotate(${device.angle}deg)`;
+                }
+            } else {
+                const iconSpan = deviceEl.querySelector('.device-marker-icon span');
+                if (iconSpan) {
+                    iconSpan.style.transform = `rotate(${device.angle}deg)`;
+                }
+            }
+        }
+    }
+}
+
+// 全局鼠标释放处理（优化性能）
+function handleGlobalMouseUp() {
+    // 结束拖动
+    if (editorState.currentDragDevice) {
+        const { deviceEl } = editorState.currentDragDevice;
+        deviceEl.style.cursor = 'move';
+        editorState.currentDragDevice = null;
+    }
+
+    // 结束缩放
+    if (editorState.currentResizeDevice) {
+        editorState.currentResizeDevice = null;
+    }
+
+    // 结束旋转
+    if (editorState.currentRotateDevice) {
+        editorState.currentRotateDevice = null;
+    }
+}
+
+// 初始化设备拖动（优化版）
+function initDeviceDrag(deviceEl, device) {
+    const marker = deviceEl.querySelector('.device-marker');
+
+    marker.addEventListener('mousedown', (e) => {
+        if (e.target.classList.contains('device-delete-btn')) return;
+        if (e.target.closest('.resize-handle') || e.target.closest('.rotate-handle')) return;
+
+        editorState.currentDragDevice = {
+            device,
+            deviceEl,
+            dragStartPos: { x: e.clientX, y: e.clientY },
+            clickStartTime: Date.now(),
+            hasMoved: false
+        };
+
+        deviceEl.style.cursor = 'grabbing';
+        e.stopPropagation();
+    });
+}
+
+// 初始化设备缩放（优化版）
+function initDeviceResize(deviceEl, device) {
+    const resizeHandles = deviceEl.querySelectorAll('.resize-handle');
+
+    resizeHandles.forEach(handle => {
+        handle.addEventListener('mousedown', (e) => {
+            e.stopPropagation();
+
+            editorState.currentResizeDevice = {
+                device,
+                deviceEl,
+                startSize: device.size || 50,
+                startPos: { x: e.clientX, y: e.clientY }
+            };
+        });
+    });
+}
+
+// 初始化设备旋转（优化版）
+function initDeviceRotate(deviceEl, device) {
+    const rotateHandle = deviceEl.querySelector('.rotate-handle');
+
+    rotateHandle.addEventListener('mousedown', (e) => {
+        e.stopPropagation();
+
+        editorState.currentRotateDevice = {
+            device,
+            deviceEl
+        };
+    });
+}
+
+// 选中设备进行编辑（显示控制手柄）
+function selectDeviceForEdit(deviceId) {
+    document.querySelectorAll('.placed-device').forEach(el => {
+        el.classList.remove('selected');
+        const controls = el.querySelector('.device-controls');
+        if (controls) controls.style.display = 'none';
+    });
+
+    const deviceEl = document.querySelector(`[data-device-id="${deviceId}"]`);
+    if (deviceEl) {
+        deviceEl.classList.add('selected');
+        const controls = deviceEl.querySelector('.device-controls');
+        if (controls) controls.style.display = 'block';
+    }
+
+    editorState.selectedDevice = deviceId;
+}
+
+// 取消所有设备选中
+function deselectAllDevices() {
+    document.querySelectorAll('.placed-device').forEach(el => {
+        el.classList.remove('selected');
+        const controls = el.querySelector('.device-controls');
+        if (controls) controls.style.display = 'none';
+    });
+    editorState.selectedDevice = null;
+}
+
+// 显示属性浮窗（双击触发）
+function showPropertyModal(device) {
+    elements.propertyModalTitle.textContent = `${device.name} - 属性设置`;
+    elements.propertyModalBody.innerHTML = `
+        <div class="property-form">
+            ${renderDevicePropertyForm(device)}
+        </div>
+    `;
+    bindDevicePropertyEvents(device);
+    elements.propertyModal.classList.add('show');
+}
+
+// 关闭属性浮窗
+function closePropertyModal() {
+    elements.propertyModal.classList.remove('show');
+}
+
+// 更新设备标签
+function updateDeviceLabel(deviceId, newName) {
+    const deviceEl = document.querySelector(`[data-device-id="${deviceId}"]`);
+    if (deviceEl) {
+        const label = deviceEl.querySelector('.device-marker-label');
+        if (label) {
+            label.textContent = newName;
+        }
+    }
+}
+
+// 更新设备位置
+function updateDevicePosition(deviceId) {
+    const device = editorState.devices.find(d => d.id === deviceId);
+    if (!device) return;
+
+    const deviceEl = document.querySelector(`[data-device-id="${deviceId}"]`);
+    if (deviceEl) {
+        const img = elements.mapImage;
+        const leftPercent = (device.x / img.naturalWidth) * 100;
+        const topPercent = (device.y / img.naturalHeight) * 100;
+
+        deviceEl.style.left = leftPercent + '%';
+        deviceEl.style.top = topPercent + '%';
+    }
+}
+
+// 更新设备旋转角度（简化版）
+function updateDeviceRotation(deviceId, angle) {
+    const device = editorState.devices.find(d => d.id === deviceId);
+    if (!device) return;
+
+    const template = getDeviceTemplate(device.templateId);
+    if (!template) return;
+
+    const deviceEl = document.querySelector(`[data-device-id="${deviceId}"]`);
+    if (!deviceEl) return;
+
+    if (isImageUrl(template.icon)) {
+        const iconImg = deviceEl.querySelector('.device-icon-img');
+        if (iconImg) iconImg.style.transform = `rotate(${angle}deg)`;
+    } else {
+        const iconSpan = deviceEl.querySelector('.device-marker-icon span');
+        if (iconSpan) iconSpan.style.transform = `rotate(${angle}deg)`;
+    }
+}
+
+// 更新设备图标大小（简化版，已集成到全局mousemove中）
+function updateDeviceIconSize(deviceId, size) {
+    const device = editorState.devices.find(d => d.id === deviceId);
+    if (!device) return;
+
+    const template = getDeviceTemplate(device.templateId);
+    if (!template || isImageUrl(template.icon)) return;
+
+    const deviceEl = document.querySelector(`[data-device-id="${deviceId}"]`);
+    if (!deviceEl) return;
+
+    const iconFontSize = Math.round(size * 0.64);
+    const iconSpan = deviceEl.querySelector('.device-marker-icon span');
+    if (iconSpan) iconSpan.style.fontSize = iconFontSize + 'px';
+}
+
+// 删除设备
+function deleteDevice(deviceId) {
+    Toast.confirm('确定要删除这个设备吗？', () => {
+        editorState.devices = editorState.devices.filter(d => d.id !== deviceId);
+
+        const deviceEl = document.querySelector(`[data-device-id="${deviceId}"]`);
+        if (deviceEl) {
+            deviceEl.remove();
+        }
+
+        if (editorState.selectedDevice === deviceId) {
+            editorState.selectedDevice = null;
+        }
+
+        Toast.success('设备已删除');
+    });
+}
+
+// 保存配置
+async function saveConfiguration() {
+    if (!editorState.mapImage) {
+        Toast.warning('请先上传地图！');
+        return;
+    }
+
+    if (editorState.devices.length === 0) {
+        Toast.warning('请至少添加一个设备！');
+        return;
+    }
+
+    if (!editorState.mapId) {
+        Toast.error('地图ID不存在，请重新上传地图！');
+        return;
+    }
+
+    const fullConfiguration = {
+        mapId: editorState.mapId, // 添加地图ID
+        map: {
+            image: editorState.mapImage,
+            origin: editorState.origin,
+            width: elements.mapImage.naturalWidth,
+            height: elements.mapImage.naturalHeight
+        },
+        devices: editorState.devices.map(prepareDeviceDataForSave),
+        timestamp: new Date().toISOString()
+    };
+
+    const lightConfiguration = {
+        mapId: editorState.mapId, // 添加地图ID
+        origin: editorState.origin,
+        width: elements.mapImage.naturalWidth,
+        height: elements.mapImage.naturalHeight,
+        devices: editorState.devices.map(prepareDeviceDataForSave),
+        timestamp: new Date().toISOString()
+    };
+    console.log('💾 准备保存配置:', lightConfiguration);
+    try {
+        const response = await fetch('http://localhost:8081/api/agv/map/save',{
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(lightConfiguration)
+        });
+
+        if (response.ok) {
+            Toast.success('配置保存成功！');
+            console.log('✅ 配置已保存到服务器');
+        } else {
+            throw new Error('保存失败');
+        }
+    } catch (error) {
+        console.error('❌ 保存配置失败:', error);
+
+        try {
+            localStorage.setItem('agv-map-configuration', JSON.stringify(lightConfiguration));
+            Toast.info('配置已保存到本地存储（后端API未连接）\n\n配置信息已输出到控制台', 5000);
+            console.log('💾 配置已保存到本地存储:', lightConfiguration);
+        } catch (storageError) {
+            console.error('❌ 本地存储失败:', storageError);
+            Toast.warning('配置无法保存到本地存储（数据过大）\n\n配置信息已输出到控制台，请复制保存', 5000);
+            console.log('📋 配置数据（请手动保存）:', lightConfiguration);
+        }
+    }
+}
+// 页面加载完成后初始化
+window.addEventListener('load', init);
diff --git a/nl-vue/src/views/nl_agv/layout/map-editor-main.js.bak b/nl-vue/src/views/nl_agv/layout/map-editor-main.js.bak
new file mode 100644
index 0000000..4e1cb49
--- /dev/null
+++ b/nl-vue/src/views/nl_agv/layout/map-editor-main.js.bak
@@ -0,0 +1,718 @@
+// AGV地图编辑器 - 主脚本（完整版）
+// 设备可以直接拖拽，单击显示控制手柄，双击打开属性面板
+
+// 地图编辑器状态
+const editorState = {
+    mapImage: null,
+    origin: { x: 0, y: 0 },
+    scale: 1,
+    offsetX: 0,
+    offsetY: 0,
+    isDragging: false,
+    isSettingOrigin: false,
+    devices: [],
+    selectedDevice: null,
+    deviceIdCounter: 1,
+    // 当前操作状态（优化性能）
+    currentDragDevice: null,
+    currentResizeDevice: null,
+    currentRotateDevice: null
+};
+
+// DOM元素
+const elements = {
+    mapFileInput: document.getElementById('mapFileInput'),
+    uploadMapBtn: document.getElementById('uploadMapBtn'),
+    setOriginBtn: document.getElementById('setOriginBtn'),
+    originInfo: document.getElementById('originInfo'),
+    zoomInBtn: document.getElementById('zoomInBtn'),
+    zoomOutBtn: document.getElementById('zoomOutBtn'),
+    resetViewBtn: document.getElementById('resetViewBtn'),
+    saveBtn: document.getElementById('saveBtn'),
+    backBtn: document.getElementById('backBtn'),
+    mapCanvas: document.getElementById('mapCanvas'),
+    mapCanvasWrapper: document.getElementById('mapCanvasWrapper'),
+    mapImage: document.getElementById('mapImage'),
+    mapPlaceholder: document.getElementById('mapPlaceholder'),
+    originCanvas: document.getElementById('originCanvas'),
+    devicesLayer: document.getElementById('devicesLayer'),
+    propertyModal: document.getElementById('propertyModal'),
+    propertyModalTitle: document.getElementById('propertyModalTitle'),
+    propertyModalBody: document.getElementById('propertyModalBody'),
+    propertyModalClose: document.getElementById('propertyModalClose')
+};
+
+// 判断是否为图片URL
+function isImageUrl(str) {
+    if (!str) return false;
+    return str.startsWith('http://') ||
+        str.startsWith('https://') ||
+        str.startsWith('/') ||
+        str.startsWith('./') ||
+        str.startsWith('../') ||
+        /\.(jpg|jpeg|png|gif|svg|webp|bmp)$/i.test(str);
+}
+
+// 初始化
+function init() {
+    initEventListeners();
+    loadDeviceList();
+}
+
+// 初始化事件监听
+function initEventListeners() {
+    elements.uploadMapBtn.addEventListener('click', () => {
+        elements.mapFileInput.click();
+    });
+    elements.mapFileInput.addEventListener('change', handleMapUpload);
+    elements.setOriginBtn.addEventListener('click', toggleOriginMode);
+    elements.zoomInBtn.addEventListener('click', () => zoomMap(1.2));
+    elements.zoomOutBtn.addEventListener('click', () => zoomMap(0.8));
+    elements.resetViewBtn.addEventListener('click', resetView);
+    elements.saveBtn.addEventListener('click', saveConfiguration);
+    elements.backBtn.addEventListener('click', () => {
+        window.location.href = 'agv-dashboardV2.html';
+    });
+    elements.mapCanvasWrapper.addEventListener('click', handleMapClick);
+    elements.propertyModalClose.addEventListener('click', closePropertyModal);
+    elements.propertyModal.addEventListener('click', (e) => {
+        if (e.target === elements.propertyModal) {
+            closePropertyModal();
+        }
+    });
+    // 全局鼠标事件监听器（优化性能，避免重复添加）
+    document.addEventListener('mousemove', handleGlobalMouseMove);
+    document.addEventListener('mouseup', handleGlobalMouseUp);
+}
+// 处理地图上传
+function handleMapUpload(e) {
+    const file = e.target.files[0];
+    if (!file) return;
+    if (!file.type.startsWith('image/')) {
+        alert('请上传图片文件！');
+        return;
+    }
+    const reader = new FileReader();
+    reader.onload = (event) => {
+        editorState.mapImage = event.target.result;
+        elements.mapImage.src = event.target.result;
+        elements.mapImage.style.display = 'block';
+        elements.mapPlaceholder.style.display = 'none';
+
+        elements.mapImage.onload = () => {
+            initOriginCanvas();
+            resetView();
+        };
+    };
+    reader.readAsDataURL(file);
+}
+
+// 初始化原点画布
+function initOriginCanvas() {
+    const img = elements.mapImage;
+    elements.originCanvas.width = img.naturalWidth;
+    elements.originCanvas.height = img.naturalHeight;
+    elements.originCanvas.style.width = img.clientWidth + 'px';
+    elements.originCanvas.style.height = img.clientHeight + 'px';
+    drawOrigin();
+}
+
+// 绘制原点
+function drawOrigin() {
+    const canvas = elements.originCanvas;
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    const { x, y } = editorState.origin;
+
+    ctx.strokeStyle = '#ff6b6b';
+    ctx.lineWidth = 2;
+    ctx.setLineDash([5, 5]);
+
+    ctx.beginPath();
+    ctx.moveTo(x, 0);
+    ctx.lineTo(x, canvas.height);
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.moveTo(0, y);
+    ctx.lineTo(canvas.width, y);
+    ctx.stroke();
+
+    ctx.setLineDash([]);
+    ctx.fillStyle = '#ff6b6b';
+    ctx.beginPath();
+    ctx.arc(x, y, 8, 0, Math.PI * 2);
+    ctx.fill();
+
+    ctx.strokeStyle = '#fff';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.arc(x, y, 8, 0, Math.PI * 2);
+    ctx.stroke();
+
+    elements.originInfo.textContent = `原点: (${x}, ${y})`;
+}
+
+// 切换原点设置模式
+function toggleOriginMode() {
+    if (!editorState.mapImage) {
+        Toast.warning('请先上传地图！');
+        return;
+    }
+
+    editorState.isSettingOrigin = !editorState.isSettingOrigin;
+
+    if (editorState.isSettingOrigin) {
+        elements.setOriginBtn.classList.add('active');
+        elements.mapCanvasWrapper.style.cursor = 'crosshair';
+    } else {
+        elements.setOriginBtn.classList.remove('active');
+        elements.mapCanvasWrapper.style.cursor = 'default';
+    }
+}
+
+// 处理地图点击
+function handleMapClick(e) {
+    if (e.target.closest('.floating-controls')) {
+        return;
+    }
+
+    if (editorState.isSettingOrigin && editorState.mapImage) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        const rect = elements.mapImage.getBoundingClientRect();
+        const x = Math.round((e.clientX - rect.left) / rect.width * elements.mapImage.naturalWidth);
+        const y = Math.round((e.clientY - rect.top) / rect.height * elements.mapImage.naturalHeight);
+
+        editorState.origin = { x, y };
+        drawOrigin();
+        toggleOriginMode();
+
+        alert(`原点已设置为: (${x}, ${y})`);
+        return;
+    }
+
+    // 点击空白处取消选中
+    if (!e.target.closest('.placed-device')) {
+        deselectAllDevices();
+    }
+}
+
+// 缩放地图
+function zoomMap(factor) {
+    editorState.scale = Math.max(0.5, Math.min(3, editorState.scale * factor));
+    updateMapTransform();
+}
+
+// 重置视图
+function resetView() {
+    editorState.scale = 1;
+    editorState.offsetX = 0;
+    editorState.offsetY = 0;
+    updateMapTransform();
+}
+
+// 更新地图变换
+function updateMapTransform() {
+    elements.mapCanvas.style.transform =
+        `translate(${editorState.offsetX}px, ${editorState.offsetY}px) scale(${editorState.scale})`;
+}
+
+// 初始化拖放功能
+function initDragAndDrop() {
+
+}
+
+function handleDragStart(e) {
+    const deviceId = e.currentTarget.dataset.deviceId;
+    e.dataTransfer.setData('deviceId', deviceId);
+    e.currentTarget.classList.add('dragging');
+}
+
+function handleDragOver(e) {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'copy';
+}
+
+function handleDrop(e) {
+    e.preventDefault();
+
+    if (!editorState.mapImage) {
+        alert('请先上传地图！');
+        return;
+    }
+
+    const deviceId = e.dataTransfer.getData('deviceId');
+    const template = getDeviceTemplate(deviceId);
+
+    if (!template) {
+        alert('设备模板不存在！');
+        return;
+    }
+
+    const rect = elements.mapImage.getBoundingClientRect();
+    const x = Math.round((e.clientX - rect.left) / rect.width * elements.mapImage.naturalWidth);
+    const y = Math.round((e.clientY - rect.top) / rect.height * elements.mapImage.naturalHeight);
+
+    addDeviceFromTemplate(template, x, y);
+
+    document.querySelectorAll('.device-item').forEach(item => {
+        item.classList.remove('dragging');
+    });
+}
+
+// 从模板添加设备
+function addDeviceFromTemplate(template, x, y) {
+    const device = {
+        id: `device_${editorState.deviceIdCounter++}`,
+        templateId: template.id,
+        name: `${template.name}_${editorState.deviceIdCounter - 1}`,
+        type: template.type,
+        x: x,
+        y: y,
+        angle: 0,
+        size: 50,
+        extendedProps: createDeviceExtendedProps(template)
+    };
+
+    editorState.devices.push(device);
+    renderDevice(device);
+}
+
+// 渲染设备到地图上
+function renderDevice(device) {
+    const template = getDeviceTemplate(device.templateId);
+    if (!template) {
+        console.error('❌ 找不到设备模板:', device.templateId);
+        return;
+    }
+
+    const deviceEl = document.createElement('div');
+    deviceEl.className = 'placed-device';
+    deviceEl.dataset.deviceId = device.id;
+
+    const img = elements.mapImage;
+    const leftPercent = (device.x / img.naturalWidth) * 100;
+    const topPercent = (device.y / img.naturalHeight) * 100;
+
+    deviceEl.style.left = leftPercent + '%';
+    deviceEl.style.top = topPercent + '%';
+
+    const deviceSize = device.size || 50;
+    deviceEl.style.width = deviceSize + 'px';
+    deviceEl.style.height = deviceSize + 'px';
+
+    // 根据设备大小动态计算图标字体大小（约为设备大小的64%）
+    const iconFontSize = Math.round(deviceSize * 0.64);
+
+    let iconHtml;
+    if (isImageUrl(template.icon)) {
+        iconHtml = `<img src="${template.icon}" 
+                         alt="${device.name}" 
+                         class="device-icon-img"
+                         style="width: 100%; height: 100%; object-fit: contain; transform: rotate(${device.angle || 0}deg);" 
+                         onerror="this.style.display='none'; this.parentElement.innerHTML='📍';">`;
+    } else {
+        iconHtml = `<span style="font-size: ${iconFontSize}px; transform: rotate(${device.angle || 0}deg); display: inline-block;">${template.icon || '📍'}</span>`;
+    }
+
+    deviceEl.innerHTML = `
+        <div class="device-marker">
+            <div class="device-marker-icon">${iconHtml}</div>
+            <div class="device-marker-label">${device.name}</div>
+        </div>
+        <div class="device-delete-btn">×</div>
+        <div class="device-controls">
+            <div class="resize-handle resize-nw" data-direction="nw"></div>
+            <div class="resize-handle resize-ne" data-direction="ne"></div>
+            <div class="resize-handle resize-sw" data-direction="sw"></div>
+            <div class="resize-handle resize-se" data-direction="se"></div>
+            <div class="rotate-handle" title="拖拽旋转">🔄</div>
+        </div>
+    `;
+
+    // 单击选中设备，显示控制手柄
+    deviceEl.addEventListener('click', (e) => {
+        e.stopPropagation();
+        selectDeviceForEdit(device.id);
+    });
+
+    // 双击打开属性面板
+    deviceEl.addEventListener('dblclick', (e) => {
+        e.stopPropagation();
+        showPropertyModal(device);
+    });
+
+    // 删除按钮
+    deviceEl.querySelector('.device-delete-btn').addEventListener('click', (e) => {
+        e.stopPropagation();
+        deleteDevice(device.id);
+    });
+
+    // 绑定拖动设备功能（可以直接拖拽）
+    initDeviceDrag(deviceEl, device);
+
+    // 绑定缩放功能
+    initDeviceResize(deviceEl, device);
+
+    // 绑定旋转功能
+    initDeviceRotate(deviceEl, device);
+
+    elements.devicesLayer.appendChild(deviceEl);
+}
+
+// 全局鼠标移动处理（优化性能）
+function handleGlobalMouseMove(e) {
+    // 处理设备拖动
+    if (editorState.currentDragDevice) {
+        const { device, deviceEl, dragStartPos } = editorState.currentDragDevice;
+
+        const moveDistance = Math.sqrt(
+            Math.pow(e.clientX - dragStartPos.x, 2) +
+            Math.pow(e.clientY - dragStartPos.y, 2)
+        );
+
+        if (moveDistance > 5) {
+            editorState.currentDragDevice.hasMoved = true;
+        }
+
+        const img = elements.mapImage;
+        const rect = img.getBoundingClientRect();
+        const deltaX = e.clientX - dragStartPos.x;
+        const deltaY = e.clientY - dragStartPos.y;
+
+        const newX = device.x + Math.round(deltaX / rect.width * img.naturalWidth);
+        const newY = device.y + Math.round(deltaY / rect.height * img.naturalHeight);
+
+        device.x = Math.max(0, Math.min(img.naturalWidth, newX));
+        device.y = Math.max(0, Math.min(img.naturalHeight, newY));
+
+        const newLeftPercent = (device.x / img.naturalWidth) * 100;
+        const newTopPercent = (device.y / img.naturalHeight) * 100;
+
+        deviceEl.style.left = newLeftPercent + '%';
+        deviceEl.style.top = newTopPercent + '%';
+
+        editorState.currentDragDevice.dragStartPos = { x: e.clientX, y: e.clientY };
+    }
+
+    // 处理设备缩放
+    if (editorState.currentResizeDevice) {
+        const { device, deviceEl, startSize, startPos } = editorState.currentResizeDevice;
+
+        const deltaX = e.clientX - startPos.x;
+        const deltaY = e.clientY - startPos.y;
+        const delta = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        const direction = (deltaX + deltaY) > 0 ? 1 : -1;
+
+        const newSize = Math.max(10, startSize + delta * direction * 0.5);
+        device.size = newSize;
+
+        deviceEl.style.width = newSize + 'px';
+        deviceEl.style.height = newSize + 'px';
+
+        // 更新图标大小
+        const iconFontSize = Math.round(newSize * 0.64);
+        const template = getDeviceTemplate(device.templateId);
+        if (template && !isImageUrl(template.icon)) {
+            const iconSpan = deviceEl.querySelector('.device-marker-icon span');
+            if (iconSpan) {
+                iconSpan.style.fontSize = iconFontSize + 'px';
+            }
+        }
+    }
+
+    // 处理设备旋转
+    if (editorState.currentRotateDevice) {
+        const { device, deviceEl } = editorState.currentRotateDevice;
+
+        const rect = deviceEl.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+
+        const angle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * 180 / Math.PI;
+        device.angle = Math.round((angle + 360) % 360);
+
+        const template = getDeviceTemplate(device.templateId);
+        if (template) {
+            if (isImageUrl(template.icon)) {
+                const iconImg = deviceEl.querySelector('.device-icon-img');
+                if (iconImg) {
+                    iconImg.style.transform = `rotate(${device.angle}deg)`;
+                }
+            } else {
+                const iconSpan = deviceEl.querySelector('.device-marker-icon span');
+                if (iconSpan) {
+                    iconSpan.style.transform = `rotate(${device.angle}deg)`;
+                }
+            }
+        }
+    }
+}
+
+// 全局鼠标释放处理（优化性能）
+function handleGlobalMouseUp() {
+    // 结束拖动
+    if (editorState.currentDragDevice) {
+        const { deviceEl } = editorState.currentDragDevice;
+        deviceEl.style.cursor = 'move';
+        editorState.currentDragDevice = null;
+    }
+
+    // 结束缩放
+    if (editorState.currentResizeDevice) {
+        editorState.currentResizeDevice = null;
+    }
+
+    // 结束旋转
+    if (editorState.currentRotateDevice) {
+        editorState.currentRotateDevice = null;
+    }
+}
+
+// 初始化设备拖动（优化版）
+function initDeviceDrag(deviceEl, device) {
+    const marker = deviceEl.querySelector('.device-marker');
+
+    marker.addEventListener('mousedown', (e) => {
+        if (e.target.classList.contains('device-delete-btn')) return;
+        if (e.target.closest('.resize-handle') || e.target.closest('.rotate-handle')) return;
+
+        editorState.currentDragDevice = {
+            device,
+            deviceEl,
+            dragStartPos: { x: e.clientX, y: e.clientY },
+            clickStartTime: Date.now(),
+            hasMoved: false
+        };
+
+        deviceEl.style.cursor = 'grabbing';
+        e.stopPropagation();
+    });
+}
+
+// 初始化设备缩放（优化版）
+function initDeviceResize(deviceEl, device) {
+    const resizeHandles = deviceEl.querySelectorAll('.resize-handle');
+
+    resizeHandles.forEach(handle => {
+        handle.addEventListener('mousedown', (e) => {
+            e.stopPropagation();
+
+            editorState.currentResizeDevice = {
+                device,
+                deviceEl,
+                startSize: device.size || 50,
+                startPos: { x: e.clientX, y: e.clientY }
+            };
+        });
+    });
+}
+
+// 初始化设备旋转（优化版）
+function initDeviceRotate(deviceEl, device) {
+    const rotateHandle = deviceEl.querySelector('.rotate-handle');
+
+    rotateHandle.addEventListener('mousedown', (e) => {
+        e.stopPropagation();
+
+        editorState.currentRotateDevice = {
+            device,
+            deviceEl
+        };
+    });
+}
+
+// 选中设备进行编辑（显示控制手柄）
+function selectDeviceForEdit(deviceId) {
+    document.querySelectorAll('.placed-device').forEach(el => {
+        el.classList.remove('selected');
+        const controls = el.querySelector('.device-controls');
+        if (controls) controls.style.display = 'none';
+    });
+
+    const deviceEl = document.querySelector(`[data-device-id="${deviceId}"]`);
+    if (deviceEl) {
+        deviceEl.classList.add('selected');
+        const controls = deviceEl.querySelector('.device-controls');
+        if (controls) controls.style.display = 'block';
+    }
+
+    editorState.selectedDevice = deviceId;
+}
+
+// 取消所有设备选中
+function deselectAllDevices() {
+    document.querySelectorAll('.placed-device').forEach(el => {
+        el.classList.remove('selected');
+        const controls = el.querySelector('.device-controls');
+        if (controls) controls.style.display = 'none';
+    });
+    editorState.selectedDevice = null;
+}
+
+// 显示属性浮窗（双击触发）
+function showPropertyModal(device) {
+    elements.propertyModalTitle.textContent = `${device.name} - 属性设置`;
+    elements.propertyModalBody.innerHTML = `
+        <div class="property-form">
+            ${renderDevicePropertyForm(device)}
+        </div>
+    `;
+    bindDevicePropertyEvents(device);
+    elements.propertyModal.classList.add('show');
+}
+
+// 关闭属性浮窗
+function closePropertyModal() {
+    elements.propertyModal.classList.remove('show');
+}
+
+// 更新设备标签
+function updateDeviceLabel(deviceId, newName) {
+    const deviceEl = document.querySelector(`[data-device-id="${deviceId}"]`);
+    if (deviceEl) {
+        const label = deviceEl.querySelector('.device-marker-label');
+        if (label) {
+            label.textContent = newName;
+        }
+    }
+}
+
+// 更新设备位置
+function updateDevicePosition(deviceId) {
+    const device = editorState.devices.find(d => d.id === deviceId);
+    if (!device) return;
+
+    const deviceEl = document.querySelector(`[data-device-id="${deviceId}"]`);
+    if (deviceEl) {
+        const img = elements.mapImage;
+        const leftPercent = (device.x / img.naturalWidth) * 100;
+        const topPercent = (device.y / img.naturalHeight) * 100;
+
+        deviceEl.style.left = leftPercent + '%';
+        deviceEl.style.top = topPercent + '%';
+    }
+}
+
+// 更新设备旋转角度（简化版）
+function updateDeviceRotation(deviceId, angle) {
+    const device = editorState.devices.find(d => d.id === deviceId);
+    if (!device) return;
+
+    const template = getDeviceTemplate(device.templateId);
+    if (!template) return;
+
+    const deviceEl = document.querySelector(`[data-device-id="${deviceId}"]`);
+    if (!deviceEl) return;
+
+    if (isImageUrl(template.icon)) {
+        const iconImg = deviceEl.querySelector('.device-icon-img');
+        if (iconImg) iconImg.style.transform = `rotate(${angle}deg)`;
+    } else {
+        const iconSpan = deviceEl.querySelector('.device-marker-icon span');
+        if (iconSpan) iconSpan.style.transform = `rotate(${angle}deg)`;
+    }
+}
+
+// 更新设备图标大小（简化版，已集成到全局mousemove中）
+function updateDeviceIconSize(deviceId, size) {
+    const device = editorState.devices.find(d => d.id === deviceId);
+    if (!device) return;
+
+    const template = getDeviceTemplate(device.templateId);
+    if (!template || isImageUrl(template.icon)) return;
+
+    const deviceEl = document.querySelector(`[data-device-id="${deviceId}"]`);
+    if (!deviceEl) return;
+
+    const iconFontSize = Math.round(size * 0.64);
+    const iconSpan = deviceEl.querySelector('.device-marker-icon span');
+    if (iconSpan) iconSpan.style.fontSize = iconFontSize + 'px';
+}
+
+// 删除设备
+function deleteDevice(deviceId) {
+    if (confirm('确定要删除这个设备吗？')) {
+        editorState.devices = editorState.devices.filter(d => d.id !== deviceId);
+
+        const deviceEl = document.querySelector(`[data-device-id="${deviceId}"]`);
+        if (deviceEl) {
+            deviceEl.remove();
+        }
+
+        if (editorState.selectedDevice === deviceId) {
+            editorState.selectedDevice = null;
+        }
+    }
+}
+
+// 保存配置
+async function saveConfiguration() {
+    if (!editorState.mapImage) {
+        alert('请先上传地图！');
+        return;
+    }
+
+    if (editorState.devices.length === 0) {
+        alert('请至少添加一个设备！');
+        return;
+    }
+
+    const fullConfiguration = {
+        map: {
+            image: editorState.mapImage,
+            origin: editorState.origin,
+            width: elements.mapImage.naturalWidth,
+            height: elements.mapImage.naturalHeight
+        },
+        devices: editorState.devices.map(prepareDeviceDataForSave),
+        timestamp: new Date().toISOString()
+    };
+
+    const lightConfiguration = {
+        map: {
+            origin: editorState.origin,
+            width: elements.mapImage.naturalWidth,
+            height: elements.mapImage.naturalHeight
+        },
+        devices: editorState.devices.map(prepareDeviceDataForSave),
+        timestamp: new Date().toISOString()
+    };
+
+    console.log('💾 准备保存配置:', lightConfiguration);
+    console.log('📊 设备详情:', lightConfiguration.devices);
+
+    try {
+        const response = await fetch('/api/map-configuration', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(fullConfiguration)
+        });
+
+        if (response.ok) {
+            alert('配置保存成功！');
+            console.log('✅ 配置已保存到服务器');
+        } else {
+            throw new Error('保存失败');
+        }
+    } catch (error) {
+        console.error('❌ 保存配置失败:', error);
+
+        try {
+            localStorage.setItem('agv-map-configuration', JSON.stringify(lightConfiguration));
+            alert('配置已保存到本地存储（后端API未连接）\n\n配置信息已输出到控制台');
+            console.log('💾 配置已保存到本地存储:', lightConfiguration);
+        } catch (storageError) {
+            console.error('❌ 本地存储失败:', storageError);
+            alert('配置无法保存到本地存储（数据过大）\n\n配置信息已输出到控制台，请复制保存');
+            console.log('📋 配置数据（请手动保存）:', lightConfiguration);
+        }
+    }
+}
+// 页面加载完成后初始化
+window.addEventListener('load', init);
diff --git a/nl-vue/src/views/nl_agv/layout/map-editor-styles.css b/nl-vue/src/views/nl_agv/layout/map-editor-styles.css
new file mode 100644
index 0000000..7447d93
--- /dev/null
+++ b/nl-vue/src/views/nl_agv/layout/map-editor-styles.css
@@ -0,0 +1,675 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1419 100%);
+    color: #e0e6ed;
+    overflow: hidden;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* 顶部工具栏 */
+.toolbar {
+    height: 70px;
+    background: rgba(15, 20, 35, 0.95);
+    backdrop-filter: blur(20px);
+    border-bottom: 2px solid rgba(0, 255, 200, 0.3);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 30px;
+    box-shadow: 0 4px 30px rgba(0, 255, 200, 0.1);
+    z-index: 1000;
+    flex-shrink: 0;
+}
+
+.toolbar-title {
+    font-size: 26px;
+    font-weight: 700;
+    background: linear-gradient(135deg, #00ffc8 0%, #00d4ff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    letter-spacing: 1px;
+    text-shadow: 0 0 30px rgba(0, 255, 200, 0.5);
+}
+
+.toolbar-right {
+    display: flex;
+    gap: 15px;
+}
+
+.btn {
+    padding: 12px 28px;
+    border: none;
+    border-radius: 8px;
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #00ffc8 0%, #00d4ff 100%);
+    color: #0a0e27;
+    box-shadow: 0 4px 20px rgba(0, 255, 200, 0.4);
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 30px rgba(0, 255, 200, 0.6);
+}
+
+.btn-secondary {
+    background: rgba(255, 255, 255, 0.1);
+    color: #00ffc8;
+    border: 1px solid rgba(0, 255, 200, 0.3);
+}
+
+.btn-secondary:hover {
+    background: rgba(0, 255, 200, 0.2);
+    border-color: rgba(0, 255, 200, 0.5);
+}
+
+/* 主内容区 - 确保设备面板和地图并排显示 */
+.main-content {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+}
+
+/* 左侧设备面板 - 固定宽度，不被覆盖 */
+.device-panel {
+    width: 320px;
+    flex-shrink: 0;
+    background: rgba(20, 25, 45, 0.8);
+    backdrop-filter: blur(15px);
+    border-right: 1px solid rgba(0, 255, 200, 0.2);
+    overflow-y: auto;
+    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
+    z-index: 100;
+}
+
+.panel-header {
+    padding: 25px 20px;
+    border-bottom: 1px solid rgba(0, 255, 200, 0.2);
+    background: rgba(0, 255, 200, 0.05);
+}
+
+.panel-header h3 {
+    font-size: 18px;
+    font-weight: 600;
+    color: #00ffc8;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.device-list {
+    padding: 20px;
+}
+
+.device-category {
+    margin-bottom: 30px;
+}
+
+.category-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #00d4ff;
+    margin-bottom: 15px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.device-item {
+    display: flex;
+    align-items: center;
+    padding: 15px;
+    margin-bottom: 12px;
+    background: rgba(0, 255, 200, 0.05);
+    border: 1px solid rgba(0, 255, 200, 0.2);
+    border-radius: 10px;
+    cursor: grab;
+    transition: all 0.3s;
+}
+
+.device-item:hover {
+    background: rgba(0, 255, 200, 0.1);
+    border-color: rgba(0, 255, 200, 0.4);
+    transform: translateX(5px);
+    box-shadow: 0 4px 15px rgba(0, 255, 200, 0.2);
+}
+
+.device-item:active {
+    cursor: grabbing;
+}
+
+.device-icon {
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
+    margin-right: 15px;
+    border-radius: 8px;
+    background: rgba(0, 255, 200, 0.1);
+}
+
+.device-info {
+    flex: 1;
+}
+
+.device-name {
+    font-size: 15px;
+    font-weight: 600;
+    color: #e0e6ed;
+    margin-bottom: 4px;
+}
+
+.device-desc {
+    font-size: 12px;
+    color: #8b95a5;
+}
+
+/* 地图编辑区 - 占据剩余空间，不覆盖设备面板 */
+.map-editor {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow: hidden;
+}
+
+/* 地图画布容器 - 支持滚动条 */
+.map-canvas-wrapper {
+    flex: 1;
+    overflow: auto;
+    position: relative;
+    background: 
+        repeating-linear-gradient(0deg, rgba(0, 255, 200, 0.03) 0px, transparent 1px, transparent 20px, rgba(0, 255, 200, 0.03) 21px),
+        repeating-linear-gradient(90deg, rgba(0, 255, 200, 0.03) 0px, transparent 1px, transparent 20px, rgba(0, 255, 200, 0.03) 21px);
+}
+
+.map-canvas {
+    min-width: 100%;
+    min-height: 100%;
+    position: relative;
+    display: inline-block;
+}
+
+.placeholder {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    z-index: 1;
+}
+
+.placeholder-icon {
+    font-size: 80px;
+    margin-bottom: 20px;
+    opacity: 0.3;
+}
+
+.placeholder-text {
+    font-size: 18px;
+    color: #8b95a5;
+}
+
+.map-image {
+    display: block;
+    user-select: none;
+    pointer-events: none;
+}
+
+.origin-canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    z-index: 10;
+}
+
+.devices-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 20;
+    pointer-events: none;
+}
+
+.placed-device {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    cursor: move;
+    pointer-events: auto;
+    will-change: transform;
+}
+
+.placed-device:hover {
+    z-index: 100;
+}
+
+.placed-device.selected {
+    z-index: 101;
+}
+
+.device-marker {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}
+
+.device-marker-icon {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+    background: transparent;
+    border: none;
+    border-radius: 10px;
+}
+
+.placed-device:hover .device-marker-icon {
+    transform: scale(1.05);
+}
+
+.placed-device.selected .device-marker-icon {
+    /* 选中状态样式 */
+}
+
+.device-marker-label {
+    position: absolute;
+    bottom: -25px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 4px 10px;
+    background: rgba(0, 0, 0, 0.8);
+    border: 1px solid #00ffc8;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #00ffc8;
+    white-space: nowrap;
+    pointer-events: none;
+    z-index: 10;
+}
+
+.device-delete-btn {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    width: 24px;
+    height: 24px;
+    background: #ff6b6b;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    color: #fff;
+    font-size: 14px;
+    cursor: pointer;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s;
+}
+
+.placed-device.selected .device-delete-btn {
+    display: flex;
+}
+
+.device-delete-btn:hover {
+    background: #ff5252;
+    transform: scale(1.1);
+}
+
+/* 右下角浮动控制面板 */
+.floating-controls {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    z-index: 200;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    align-items: flex-end;
+    pointer-events: none;
+}
+
+.floating-controls > * {
+    pointer-events: auto;
+}
+
+.origin-info {
+    padding: 12px 20px;
+    background: rgba(20, 25, 45, 0.95);
+    backdrop-filter: blur(15px);
+    border: 1px solid rgba(0, 255, 200, 0.3);
+    border-radius: 8px;
+    color: #00ffc8;
+    font-size: 14px;
+    font-weight: 600;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+}
+
+.control-buttons {
+    display: flex;
+    gap: 10px;
+}
+
+.control-btn {
+    width: 50px;
+    height: 50px;
+    background: rgba(20, 25, 45, 0.95);
+    backdrop-filter: blur(15px);
+    border: 1px solid rgba(0, 255, 200, 0.3);
+    border-radius: 8px;
+    color: #00ffc8;
+    font-size: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+}
+
+.control-btn:hover {
+    background: rgba(0, 255, 200, 0.2);
+    border-color: rgba(0, 255, 200, 0.5);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 25px rgba(0, 255, 200, 0.3);
+}
+
+.control-btn:active {
+    transform: translateY(0);
+}
+
+.control-btn.active {
+    background: rgba(0, 255, 200, 0.3);
+    border-color: #00ffc8;
+    box-shadow: 0 0 25px rgba(0, 255, 200, 0.6);
+}
+
+/* 属性设置浮窗 */
+.property-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(5px);
+    z-index: 2000;
+    align-items: center;
+    justify-content: center;
+}
+
+.property-modal.show {
+    display: flex;
+}
+
+.property-modal-content {
+    width: 500px;
+    max-width: 90%;
+    max-height: 80vh;
+    background: rgba(20, 25, 45, 0.98);
+    backdrop-filter: blur(20px);
+    border: 2px solid rgba(0, 255, 200, 0.4);
+    border-radius: 15px;
+    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8), 0 0 100px rgba(0, 255, 200, 0.2);
+    overflow: hidden;
+}
+
+.property-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 25px;
+    background: rgba(0, 255, 200, 0.1);
+    border-bottom: 1px solid rgba(0, 255, 200, 0.3);
+}
+
+.property-modal-header h3 {
+    font-size: 20px;
+    font-weight: 600;
+    color: #00ffc8;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.property-modal-close {
+    width: 35px;
+    height: 35px;
+    background: rgba(255, 107, 107, 0.2);
+    border: 1px solid rgba(255, 107, 107, 0.4);
+    border-radius: 8px;
+    color: #ff6b6b;
+    font-size: 24px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s;
+}
+
+.property-modal-close:hover {
+    background: rgba(255, 107, 107, 0.3);
+    border-color: #ff6b6b;
+    transform: rotate(90deg);
+}
+
+.property-modal-body {
+    padding: 25px;
+    max-height: calc(80vh - 80px);
+    overflow-y: auto;
+}
+
+.property-form {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.form-label {
+    font-size: 13px;
+    font-weight: 600;
+    color: #00d4ff;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.form-input {
+    padding: 12px;
+    background: rgba(0, 255, 200, 0.05);
+    border: 1px solid rgba(0, 255, 200, 0.2);
+    border-radius: 6px;
+    color: #e0e6ed;
+    font-size: 14px;
+    transition: all 0.3s;
+}
+
+.form-input:focus {
+    outline: none;
+    border-color: #00ffc8;
+    background: rgba(0, 255, 200, 0.1);
+    box-shadow: 0 0 15px rgba(0, 255, 200, 0.2);
+}
+
+.form-input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.btn-delete {
+    background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
+    color: #fff;
+    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.4);
+}
+
+.btn-delete:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 30px rgba(255, 107, 107, 0.6);
+}
+
+/* 滚动条样式 */
+.device-panel::-webkit-scrollbar,
+.property-modal-body::-webkit-scrollbar,
+.map-canvas-wrapper::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+.device-panel::-webkit-scrollbar-track,
+.property-modal-body::-webkit-scrollbar-track,
+.map-canvas-wrapper::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.device-panel::-webkit-scrollbar-thumb,
+.property-modal-body::-webkit-scrollbar-thumb,
+.map-canvas-wrapper::-webkit-scrollbar-thumb {
+    background: rgba(0, 255, 200, 0.3);
+    border-radius: 5px;
+}
+
+.device-panel::-webkit-scrollbar-thumb:hover,
+.property-modal-body::-webkit-scrollbar-thumb:hover,
+.map-canvas-wrapper::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 255, 200, 0.5);
+}
+/* 滚动条交叉点 */
+.map-canvas-wrapper::-webkit-scrollbar-corner {
+    background: rgba(0, 0, 0, 0.2);
+}
+
+/* 拖拽时的样式 */
+.dragging {
+    opacity: 0.5;
+}
+
+.drag-over {
+    background: rgba(0, 255, 200, 0.1);
+}
+
+/* 设备控制手柄样式 */
+.device-controls {
+    display: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: calc(100% + 40px);
+    height: calc(100% + 40px);
+    pointer-events: none;
+}
+
+.placed-device.selected .device-controls {
+    display: block;
+}
+
+/* 四个角的缩放手柄 */
+.resize-handle {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background: #00ffc8;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    cursor: pointer;
+    pointer-events: auto;
+    transition: all 0.2s;
+    box-shadow: 0 0 10px rgba(0, 255, 200, 0.6);
+}
+
+.resize-handle:hover {
+    transform: scale(1.3);
+    background: #00d4ff;
+    box-shadow: 0 0 20px rgba(0, 255, 200, 1);
+}
+
+.resize-nw {
+    top: -6px;
+    left: -6px;
+    cursor: nw-resize;
+}
+
+.resize-ne {
+    top: -6px;
+    right: -6px;
+    cursor: ne-resize;
+}
+
+.resize-sw {
+    bottom: -6px;
+    left: -6px;
+    cursor: sw-resize;
+}
+
+.resize-se {
+    bottom: -6px;
+    right: -6px;
+    cursor: se-resize;
+}
+
+/* 旋转手柄 */
+.rotate-handle {
+    position: absolute;
+    top: -35px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 28px;
+    height: 28px;
+    background: rgba(255, 107, 107, 0.9);
+    border: 2px solid #fff;
+    border-radius: 50%;
+    cursor: grab;
+    pointer-events: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    transition: all 0.2s;
+    box-shadow: 0 0 15px rgba(255, 107, 107, 0.6);
+}
+
+.rotate-handle:hover {
+    transform: translateX(-50%) scale(1.2);
+    background: rgba(255, 107, 107, 1);
+    box-shadow: 0 0 25px rgba(255, 107, 107, 1);
+}
+
+.rotate-handle:active {
+    cursor: grabbing;
+}
+
+/* 设备图标图片样式 */
+.device-icon-img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    pointer-events: none;
+    user-select: none;
+}
diff --git a/nl-vue/src/views/nl_agv/layout/styles/map-editor.less b/nl-vue/src/views/nl_agv/layout/styles/map-editor.less
new file mode 100644
index 0000000..d22fcd0
--- /dev/null
+++ b/nl-vue/src/views/nl_agv/layout/styles/map-editor.less
@@ -0,0 +1,358 @@
+// AGV地图编辑器样式
+.agv-map-editor {
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+	background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1419 100%);
+	color: #e0e6ed;
+	overflow: hidden;
+}
+
+/* 顶部工具栏 */
+.toolbar {
+	height: 70px;
+	background: rgba(15, 20, 35, 0.95);
+	backdrop-filter: blur(20px);
+	border-bottom: 2px solid rgba(0, 255, 200, 0.3);
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0 30px;
+	box-shadow: 0 4px 30px rgba(0, 255, 200, 0.1);
+	z-index: 1000;
+	flex-shrink: 0;
+}
+
+.toolbar-title {
+	font-size: 26px;
+	font-weight: 700;
+	background: linear-gradient(135deg, #00ffc8 0%, #00d4ff 100%);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	letter-spacing: 1px;
+	text-shadow: 0 0 30px rgba(0, 255, 200, 0.5);
+}
+
+.toolbar-right {
+	display: flex;
+	gap: 15px;
+}
+
+.btn {
+	padding: 12px 28px;
+	border: none;
+	border-radius: 8px;
+	font-size: 15px;
+	font-weight: 600;
+	cursor: pointer;
+	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+.btn-primary {
+	background: linear-gradient(135deg, #00ffc8 0%, #00d4ff 100%);
+	color: #0a0e27;
+	box-shadow: 0 4px 20px rgba(0, 255, 200, 0.4);
+
+	&:hover {
+		transform: translateY(-2px);
+		box-shadow: 0 6px 30px rgba(0, 255, 200, 0.6);
+	}
+}
+
+.btn-secondary {
+	background: rgba(255, 255, 255, 0.1);
+	color: #00ffc8;
+	border: 1px solid rgba(0, 255, 200, 0.3);
+
+	&:hover {
+		background: rgba(0, 255, 200, 0.2);
+		border-color: rgba(0, 255, 200, 0.5);
+	}
+}
+
+/* 主内容区 */
+.main-content {
+	display: flex;
+	flex: 1;
+	overflow: hidden;
+	position: relative;
+}
+
+/* 左侧设备面板 */
+.device-panel {
+	width: 320px;
+	flex-shrink: 0;
+	background: rgba(20, 25, 45, 0.8);
+	backdrop-filter: blur(15px);
+	border-right: 1px solid rgba(0, 255, 200, 0.2);
+	overflow-y: auto;
+	box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
+	z-index: 100;
+}
+
+.panel-header {
+	padding: 25px 20px;
+	border-bottom: 1px solid rgba(0, 255, 200, 0.2);
+	background: rgba(0, 255, 200, 0.05);
+
+	h3 {
+		font-size: 18px;
+		font-weight: 600;
+		color: #00ffc8;
+		text-transform: uppercase;
+		letter-spacing: 1px;
+		margin: 0;
+	}
+}
+
+.device-list {
+	padding: 20px;
+}
+
+.device-category {
+	margin-bottom: 30px;
+}
+
+.category-title {
+	font-size: 14px;
+	font-weight: 600;
+	color: #00d4ff;
+	margin-bottom: 15px;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+}
+
+.device-item {
+	display: flex;
+	align-items: center;
+	padding: 15px;
+	margin-bottom: 12px;
+	background: rgba(0, 255, 200, 0.05);
+	border: 1px solid rgba(0, 255, 200, 0.2);
+	border-radius: 10px;
+	cursor: grab;
+	transition: all 0.3s;
+
+	&:hover {
+		background: rgba(0, 255, 200, 0.1);
+		border-color: rgba(0, 255, 200, 0.4);
+		transform: translateX(5px);
+		box-shadow: 0 4px 15px rgba(0, 255, 200, 0.2);
+	}
+
+	&:active {
+		cursor: grabbing;
+	}
+
+	&.dragging {
+		opacity: 0.5;
+	}
+}
+
+.device-icon {
+	width: 50px;
+	height: 50px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 28px;
+	margin-right: 15px;
+	border-radius: 8px;
+	background: rgba(0, 255, 200, 0.1);
+}
+
+.device-info {
+	flex: 1;
+}
+
+.device-name {
+	font-size: 15px;
+	font-weight: 600;
+	color: #e0e6ed;
+	margin-bottom: 4px;
+}
+
+.device-desc {
+	font-size: 12px;
+	color: #8b95a5;
+}
+
+/* 地图编辑区 */
+.map-editor {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	overflow: hidden;
+}
+
+/* 地图画布容器 */
+.map-canvas-wrapper {
+	flex: 1;
+	overflow: auto;
+	position: relative;
+	background: repeating-linear-gradient(
+			0deg,
+			rgba(0, 255, 200, 0.03) 0px,
+			transparent 1px,
+			transparent 20px,
+			rgba(0, 255, 200, 0.03) 21px
+		),
+		repeating-linear-gradient(
+			90deg,
+			rgba(0, 255, 200, 0.03) 0px,
+			transparent 1px,
+			transparent 20px,
+			rgba(0, 255, 200, 0.03) 21px
+		);
+}
+
+.map-canvas {
+	min-width: 100%;
+	min-height: 100%;
+	position: relative;
+	display: inline-block;
+	transition: transform 0.3s;
+}
+
+.placeholder {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	text-align: center;
+	z-index: 1;
+}
+
+.placeholder-icon {
+	font-size: 80px;
+	margin-bottom: 20px;
+	opacity: 0.3;
+}
+
+.placeholder-text {
+	font-size: 18px;
+	color: #8b95a5;
+}
+
+.map-image {
+	display: block;
+	user-select: none;
+	pointer-events: none;
+	max-width: 100%;
+	height: auto;
+}
+
+.origin-canvas {
+	position: absolute;
+	top: 0;
+	left: 0;
+	pointer-events: none;
+	z-index: 10;
+}
+
+.devices-layer {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 20;
+	pointer-events: none;
+}
+
+/* 右下角浮动控制面板 */
+.floating-controls {
+	position: fixed;
+	bottom: 30px;
+	right: 30px;
+	z-index: 200;
+	display: flex;
+	flex-direction: column;
+	gap: 15px;
+	align-items: flex-end;
+	pointer-events: none;
+
+	> * {
+		pointer-events: auto;
+	}
+}
+
+.origin-info {
+	padding: 12px 20px;
+	background: rgba(20, 25, 45, 0.95);
+	backdrop-filter: blur(15px);
+	border: 1px solid rgba(0, 255, 200, 0.3);
+	border-radius: 8px;
+	color: #00ffc8;
+	font-size: 14px;
+	font-weight: 600;
+	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+}
+
+.control-buttons {
+	display: flex;
+	gap: 10px;
+}
+
+.control-btn {
+	width: 50px;
+	height: 50px;
+	background: rgba(20, 25, 45, 0.95);
+	backdrop-filter: blur(15px);
+	border: 1px solid rgba(0, 255, 200, 0.3);
+	border-radius: 8px;
+	color: #00ffc8;
+	font-size: 20px;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all 0.3s;
+	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+
+	&:hover {
+		background: rgba(0, 255, 200, 0.2);
+		border-color: rgba(0, 255, 200, 0.5);
+		transform: translateY(-2px);
+		box-shadow: 0 6px 25px rgba(0, 255, 200, 0.3);
+	}
+
+	&:active {
+		transform: translateY(0);
+	}
+
+	&.active {
+		background: rgba(0, 255, 200, 0.3);
+		border-color: #00ffc8;
+		box-shadow: 0 0 25px rgba(0, 255, 200, 0.6);
+	}
+}
+
+/* 滚动条样式 */
+.device-panel::-webkit-scrollbar,
+.map-canvas-wrapper::-webkit-scrollbar {
+	width: 10px;
+	height: 10px;
+}
+
+.device-panel::-webkit-scrollbar-track,
+.map-canvas-wrapper::-webkit-scrollbar-track {
+	background: rgba(0, 0, 0, 0.2);
+}
+
+.device-panel::-webkit-scrollbar-thumb,
+.map-canvas-wrapper::-webkit-scrollbar-thumb {
+	background: rgba(0, 255, 200, 0.3);
+	border-radius: 5px;
+
+	&:hover {
+		background: rgba(0, 255, 200, 0.5);
+	}
+}
+
+.map-canvas-wrapper::-webkit-scrollbar-corner {
+	background: rgba(0, 0, 0, 0.2);
+}
diff --git a/nl-vue/src/views/nl_agv/layout/toast-notification.js b/nl-vue/src/views/nl_agv/layout/toast-notification.js
new file mode 100644
index 0000000..e8205cf
--- /dev/null
+++ b/nl-vue/src/views/nl_agv/layout/toast-notification.js
@@ -0,0 +1,390 @@
+/**
+ * Toast 浮窗提醒组件
+ * 用于替代 alert、confirm 等原生弹窗
+ */
+
+// Toast 配置
+const ToastConfig = {
+    duration: 3000, // 默认显示时长（毫秒）
+    position: 'top-center', // 默认位置
+    maxToasts: 5 // 最多同时显示的toast数量
+};
+
+// Toast 类型
+const ToastType = {
+    SUCCESS: 'success',
+    ERROR: 'error',
+    WARNING: 'warning',
+    INFO: 'info',
+    CONFIRM: 'confirm'
+};
+
+// Toast 管理器
+class ToastManager {
+    constructor() {
+        this.toasts = [];
+        this.container = null;
+        this.init();
+    }
+
+    init() {
+        // 创建容器
+        this.container = document.createElement('div');
+        this.container.className = 'toast-container';
+        document.body.appendChild(this.container);
+
+        // 添加样式
+        this.injectStyles();
+    }
+
+    injectStyles() {
+        if (document.getElementById('toast-styles')) return;
+
+        const style = document.createElement('style');
+        style.id = 'toast-styles';
+        style.textContent = `
+            .toast-container {
+                position: fixed;
+                top: 100px;
+                left: 50%;
+                transform: translateX(-50%);
+                z-index: 10000;
+                pointer-events: none;
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+                max-width: 90%;
+                width: auto;
+            }
+
+            .toast {
+                pointer-events: auto;
+                min-width: 300px;
+                max-width: 500px;
+                padding: 16px 20px;
+                background: rgba(20, 25, 45, 0.98);
+                backdrop-filter: blur(20px);
+                border-radius: 12px;
+                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                animation: toastSlideIn 0.3s ease-out;
+                transition: all 0.3s ease;
+            }
+
+            .toast.removing {
+                animation: toastSlideOut 0.3s ease-out;
+                opacity: 0;
+                transform: translateY(-20px);
+            }
+
+            @keyframes toastSlideIn {
+                from {
+                    opacity: 0;
+                    transform: translateY(-20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+
+            @keyframes toastSlideOut {
+                from {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+                to {
+                    opacity: 0;
+                    transform: translateY(-20px);
+                }
+            }
+
+            .toast-icon {
+                font-size: 24px;
+                flex-shrink: 0;
+                width: 32px;
+                height: 32px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 50%;
+            }
+
+            .toast.success {
+                border-left: 4px solid #4caf50;
+            }
+
+            .toast.success .toast-icon {
+                background: rgba(76, 175, 80, 0.2);
+                color: #4caf50;
+            }
+
+            .toast.error {
+                border-left: 4px solid #f44336;
+            }
+
+            .toast.error .toast-icon {
+                background: rgba(244, 67, 54, 0.2);
+                color: #f44336;
+            }
+
+            .toast.warning {
+                border-left: 4px solid #ff9800;
+            }
+
+            .toast.warning .toast-icon {
+                background: rgba(255, 152, 0, 0.2);
+                color: #ff9800;
+            }
+
+            .toast.info {
+                border-left: 4px solid #00d4ff;
+            }
+
+            .toast.info .toast-icon {
+                background: rgba(0, 212, 255, 0.2);
+                color: #00d4ff;
+            }
+
+            .toast.confirm {
+                border-left: 4px solid #00ffc8;
+            }
+
+            .toast.confirm .toast-icon {
+                background: rgba(0, 255, 200, 0.2);
+                color: #00ffc8;
+            }
+
+            .toast-content {
+                flex: 1;
+                color: #e0e6ed;
+                font-size: 14px;
+                line-height: 1.5;
+                word-break: break-word;
+            }
+
+            .toast-close {
+                width: 24px;
+                height: 24px;
+                border-radius: 50%;
+                background: rgba(255, 255, 255, 0.1);
+                border: none;
+                color: #b0bec5;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 18px;
+                transition: all 0.2s;
+                flex-shrink: 0;
+            }
+
+            .toast-close:hover {
+                background: rgba(255, 255, 255, 0.2);
+                color: #fff;
+            }
+
+            .toast-buttons {
+                display: flex;
+                gap: 10px;
+                margin-top: 12px;
+            }
+
+            .toast-btn {
+                padding: 8px 16px;
+                border: none;
+                border-radius: 6px;
+                font-size: 13px;
+                font-weight: 600;
+                cursor: pointer;
+                transition: all 0.2s;
+                flex: 1;
+            }
+
+            .toast-btn-primary {
+                background: linear-gradient(135deg, #00ffc8 0%, #00d4ff 100%);
+                color: #0a0e27;
+            }
+
+            .toast-btn-primary:hover {
+                transform: translateY(-1px);
+                box-shadow: 0 4px 12px rgba(0, 255, 200, 0.4);
+            }
+
+            .toast-btn-secondary {
+                background: rgba(255, 255, 255, 0.1);
+                color: #e0e6ed;
+                border: 1px solid rgba(255, 255, 255, 0.2);
+            }
+
+            .toast-btn-secondary:hover {
+                background: rgba(255, 255, 255, 0.2);
+            }
+
+            .toast-progress {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                height: 3px;
+                background: linear-gradient(90deg, #00ffc8, #00d4ff);
+                border-radius: 0 0 0 12px;
+                transition: width linear;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
+    show(message, type = ToastType.INFO, duration = ToastConfig.duration) {
+        // 限制最大数量
+        if (this.toasts.length >= ToastConfig.maxToasts) {
+            this.remove(this.toasts[0]);
+        }
+
+        const toast = this.createToast(message, type, duration);
+        this.container.appendChild(toast.element);
+        this.toasts.push(toast);
+
+        // 自动关闭
+        if (duration > 0) {
+            toast.timer = setTimeout(() => {
+                this.remove(toast);
+            }, duration);
+        }
+
+        return toast;
+    }
+
+    createToast(message, type, duration) {
+        const element = document.createElement('div');
+        element.className = `toast ${type}`;
+
+        const icon = this.getIcon(type);
+        
+        element.innerHTML = `
+            <div class="toast-icon">${icon}</div>
+            <div class="toast-content">${message}</div>
+            <button class="toast-close">×</button>
+            ${duration > 0 ? `<div class="toast-progress" style="width: 100%; transition-duration: ${duration}ms;"></div>` : ''}
+        `;
+
+        const toast = {
+            element,
+            type,
+            timer: null
+        };
+
+        // 关闭按钮
+        element.querySelector('.toast-close').addEventListener('click', () => {
+            this.remove(toast);
+        });
+
+        // 进度条动画
+        if (duration > 0) {
+            setTimeout(() => {
+                const progress = element.querySelector('.toast-progress');
+                if (progress) {
+                    progress.style.width = '0%';
+                }
+            }, 10);
+        }
+
+        return toast;
+    }
+
+    getIcon(type) {
+        const icons = {
+            [ToastType.SUCCESS]: '✓',
+            [ToastType.ERROR]: '✕',
+            [ToastType.WARNING]: '⚠',
+            [ToastType.INFO]: 'ℹ',
+            [ToastType.CONFIRM]: '?'
+        };
+        return icons[type] || icons[ToastType.INFO];
+    }
+
+    remove(toast) {
+        if (!toast || !toast.element) return;
+
+        // 清除定时器
+        if (toast.timer) {
+            clearTimeout(toast.timer);
+        }
+
+        // 添加移除动画
+        toast.element.classList.add('removing');
+
+        // 动画结束后移除元素
+        setTimeout(() => {
+            if (toast.element && toast.element.parentNode) {
+                toast.element.parentNode.removeChild(toast.element);
+            }
+            this.toasts = this.toasts.filter(t => t !== toast);
+        }, 300);
+    }
+
+    confirm(message, onConfirm, onCancel) {
+        const toast = this.createToast(message, ToastType.CONFIRM, 0);
+        
+        // 添加按钮
+        const buttonsHtml = `
+            <div class="toast-buttons">
+                <button class="toast-btn toast-btn-secondary" data-action="cancel">取消</button>
+                <button class="toast-btn toast-btn-primary" data-action="confirm">确定</button>
+            </div>
+        `;
+        
+        const content = toast.element.querySelector('.toast-content');
+        content.insertAdjacentHTML('afterend', buttonsHtml);
+
+        // 绑定按钮事件
+        toast.element.querySelector('[data-action="confirm"]').addEventListener('click', () => {
+            this.remove(toast);
+            if (onConfirm) onConfirm();
+        });
+
+        toast.element.querySelector('[data-action="cancel"]').addEventListener('click', () => {
+            this.remove(toast);
+            if (onCancel) onCancel();
+        });
+
+        // 隐藏关闭按钮
+        toast.element.querySelector('.toast-close').style.display = 'none';
+
+        this.container.appendChild(toast.element);
+        this.toasts.push(toast);
+
+        return toast;
+    }
+
+    clear() {
+        this.toasts.forEach(toast => this.remove(toast));
+    }
+}
+
+// 创建全局实例
+const toastManager = new ToastManager();
+
+// 导出便捷方法
+window.Toast = {
+    success: (message, duration) => toastManager.show(message, ToastType.SUCCESS, duration),
+    error: (message, duration) => toastManager.show(message, ToastType.ERROR, duration),
+    warning: (message, duration) => toastManager.show(message, ToastType.WARNING, duration),
+    info: (message, duration) => toastManager.show(message, ToastType.INFO, duration),
+    confirm: (message, onConfirm, onCancel) => toastManager.confirm(message, onConfirm, onCancel),
+    clear: () => toastManager.clear()
+};
+
+// 兼容旧的 alert 方法（可选）
+window.showToast = (message, type = 'info') => {
+    const typeMap = {
+        'success': ToastType.SUCCESS,
+        'error': ToastType.ERROR,
+        'warning': ToastType.WARNING,
+        'info': ToastType.INFO
+    };
+    toastManager.show(message, typeMap[type] || ToastType.INFO);
+};
+
+console.log('✅ Toast 浮窗提醒组件已加载');
diff --git a/nl-vue/src/views/nl_agv/layout/toast-patch.js b/nl-vue/src/views/nl_agv/layout/toast-patch.js
new file mode 100644
index 0000000..6798dca
--- /dev/null
+++ b/nl-vue/src/views/nl_agv/layout/toast-patch.js
@@ -0,0 +1,112 @@
+// Toast 替换补丁 - 在 map-editor-main.js 中查找并替换以下内容
+
+// ============================================
+// 1. 处理地图上传 - 第88行附近
+// ============================================
+// 查找：
+alert('请上传图片文件！');
+
+// 替换为：
+Toast.error('请上传图片文件！');
+
+
+// ============================================
+// 2. 切换原点设置模式 - 第155行附近
+// ============================================
+// 已完成 ✅
+
+
+// ============================================
+// 3. 处理地图点击 - 第185行附近
+// ============================================
+// 查找：
+alert(`原点已设置为: (${x}, ${y})`);
+
+// 替换为：
+Toast.success(`原点已设置为: (${x}, ${y})`);
+
+
+// ============================================
+// 4. 处理拖放 - 第260行附近
+// ============================================
+// 查找：
+alert('请先上传地图！');
+
+// 替换为：
+Toast.warning('请先上传地图！');
+
+// 查找：
+alert('设备模板不存在！');
+
+// 替换为：
+Toast.error('设备模板不存在！');
+
+
+// ============================================
+// 5. 删除设备 - 第540行附近
+// ============================================
+// 查找：
+function deleteDevice(deviceId) {
+    if (confirm('确定要删除这个设备吗？')) {
+        editorState.devices = editorState.devices.filter(d => d.id !== deviceId);
+
+        const deviceEl = document.querySelector(`[data-device-id="${deviceId}"]`);
+        if (deviceEl) {
+            deviceEl.remove();
+        }
+
+        if (editorState.selectedDevice === deviceId) {
+            editorState.selectedDevice = null;
+        }
+    }
+}
+
+// 替换为：
+function deleteDevice(deviceId) {
+    Toast.confirm('确定要删除这个设备吗？', () => {
+        editorState.devices = editorState.devices.filter(d => d.id !== deviceId);
+
+        const deviceEl = document.querySelector(`[data-device-id="${deviceId}"]`);
+        if (deviceEl) {
+            deviceEl.remove();
+        }
+
+        if (editorState.selectedDevice === deviceId) {
+            editorState.selectedDevice = null;
+        }
+    });
+}
+
+
+// ============================================
+// 6. 保存配置 - 第550行附近
+// ============================================
+// 查找：
+alert('请先上传地图！');
+
+// 替换为：
+Toast.warning('请先上传地图！');
+
+// 查找：
+alert('请至少添加一个设备！');
+
+// 替换为：
+Toast.warning('请至少添加一个设备！');
+
+// 查找：
+alert('配置保存成功！');
+
+// 替换为：
+Toast.success('配置保存成功！');
+
+// 查找：
+alert('配置已保存到本地存储（后端API未连接）\n\n配置信息已输出到控制台');
+
+// 替换为：
+Toast.info('配置已保存到本地存储（后端API未连接）\n\n配置信息已输出到控制台', 5000);
+
+// 查找：
+alert('配置无法保存到本地存储（数据过大）\n\n配置信息已输出到控制台，请复制保存');
+
+// 替换为：
+Toast.warning('配置无法保存到本地存储（数据过大）\n\n配置信息已输出到控制台，请复制保存', 5000);
diff --git a/nl-vue/src/views/nl_agv/screen/agv-dashboardV2.html b/nl-vue/src/views/nl_agv/screen/agv-dashboardV2.html
new file mode 100644
index 0000000..c22aec2
--- /dev/null
+++ b/nl-vue/src/views/nl_agv/screen/agv-dashboardV2.html
@@ -0,0 +1,1486 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title class="title-bar">AGV实时监控看板</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Microsoft YaHei', Arial, sans-serif;
+            background: #0a1929;
+            color: #fff;
+            overflow: hidden;
+            height: 100vh;
+        }
+
+        /* 顶部标题浮窗 */
+        .title-bar {
+            position: fixed;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 30%;
+            min-width: 450px;
+            height: 85px;
+
+            backdrop-filter: blur(3px);
+            border: 1.5px solid rgba(120, 210, 255, 0.5);
+            border-top: none;
+            border-radius: 0 0 60px 60px;
+            padding: 22px 45px;
+            text-align: center;
+            z-index: 1000;
+            box-shadow:
+                    0 10px 40px rgba(0, 0, 0, 0.5),
+                    0 0 60px rgba(100, 200, 255, 0.25),
+                    inset 0 3px 25px rgba(120, 210, 255, 0.15),
+                    inset 0 -12px 35px rgba(8, 20, 45, 0.4);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .title-bar::before {
+            content: '';
+            position: absolute;
+            top: -20px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 70%;
+            height: 60px;
+            background: radial-gradient(ellipse 80% 40% at 50% 0%,
+            rgba(120, 210, 255, 0.4) 0%,
+            rgba(100, 200, 255, 0.2) 30%,
+            transparent 70%);
+            pointer-events: none;
+            z-index: 1;
+            filter: blur(8px);
+        }
+
+        .title-bar::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:
+                    linear-gradient(to bottom,
+                    rgba(120, 210, 255, 0.1) 0%,
+                    transparent 20%,
+                    transparent 80%,
+                    rgba(8, 20, 45, 0.2) 100%);
+            pointer-events: none;
+            z-index: 1;
+            border-radius: 0 0 60px 60px;
+        }
+
+        .title-bar h1 {
+            position: relative;
+            z-index: 2;
+            font-size: 30px;
+            font-weight: 600;
+            color: #b8e0ff;
+            text-shadow:
+                    0 0 12px rgba(184, 224, 255, 0.9),
+                    0 0 24px rgba(120, 210, 255, 0.7),
+                    0 0 36px rgba(100, 200, 255, 0.5),
+                    0 2px 6px rgba(0, 0, 0, 0.4);
+            letter-spacing: 5px;
+            margin: 0;
+            line-height: 1.2;
+        }
+
+        /* 左侧统计面板 */
+        .stats-panel {
+            position: absolute;
+            left: 20px;
+            top: 100px;
+            width: 380px;
+            background: rgba(13, 27, 62, 0.3);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(64, 224, 208, 0.3);
+            border-radius: 8px;
+            padding: 20px;
+            z-index: 100;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5),
+            0 0 20px rgba(13, 27, 62, 0.5);
+            max-height: calc(100vh - 120px);
+            overflow-y: auto;
+            transition: transform 0.3s ease-in-out;
+        }
+
+        .stats-panel.hidden {
+            transform: translateX(-100%);
+        }
+
+        /* 右侧状态看板 */
+        .detail-panel {
+            position: absolute;
+            right: 20px;
+            top: 100px;
+            width: 380px;
+            background: rgba(13, 27, 62, 0.3);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(64, 224, 208, 0.3);
+            border-radius: 8px;
+            padding: 20px;
+            z-index: 100;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5),
+            0 0 20px rgba(13, 27, 62, 0.5);
+            max-height: calc(100vh - 120px);
+            overflow-y: auto;
+            transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+            transform: translateX(100%);
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        .detail-panel.show {
+            transform: translateX(0);
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        .detail-panel-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid rgba(64, 224, 208, 0.3);
+        }
+
+        .detail-panel-title {
+            font-size: 18px;
+            font-weight: bold;
+            color: #40e0d0;
+        }
+
+        .detail-panel-close {
+            width: 30px;
+            height: 30px;
+            background: rgba(64, 224, 208, 0.1);
+            border: 1px solid rgba(64, 224, 208, 0.3);
+            border-radius: 4px;
+            color: #40e0d0;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s;
+        }
+
+        .detail-panel-close:hover {
+            background: rgba(64, 224, 208, 0.2);
+        }
+
+        .detail-item {
+            margin-bottom: 20px;
+            padding: 15px;
+            background: rgba(64, 224, 208, 0.1);
+            border-radius: 6px;
+        }
+
+        .detail-item-label {
+            font-size: 14px;
+            color: #b0bec5;
+            margin-bottom: 8px;
+        }
+
+        .detail-item-value {
+            font-size: 18px;
+            font-weight: bold;
+            color: #40e0d0;
+        }
+
+        .detail-item-row {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 15px;
+        }
+
+        .detail-item-row:last-child {
+            margin-bottom: 0;
+        }
+
+        .status-badge {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 12px;
+            font-size: 12px;
+            font-weight: bold;
+        }
+
+        .status-badge.running {
+            background: rgba(76, 175, 80, 0.3);
+            color: #4caf50;
+            border: 1px solid #4caf50;
+        }
+
+        .status-badge.idle {
+            background: rgba(255, 152, 0, 0.3);
+            color: #ff9800;
+            border: 1px solid #ff9800;
+        }
+
+        .status-badge.error {
+            background: rgba(244, 67, 54, 0.3);
+            color: #f44336;
+            border: 1px solid #f44336;
+        }
+
+        .status-badge.has-goods {
+            background: rgba(76, 175, 80, 0.3);
+            color: #4caf50;
+            border: 1px solid #4caf50;
+        }
+
+        .status-badge.no-goods {
+            background: rgba(244, 67, 54, 0.3);
+            color: #f44336;
+            border: 1px solid #f44336;
+        }
+
+        .panel-toggle {
+            position: fixed;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 40px;
+            height: 60px;
+            background: rgba(26, 35, 126, 0.3);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(64, 224, 208, 0.3);
+            border-left: none;
+            border-radius: 0 8px 8px 0;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #40e0d0;
+            font-size: 20px;
+            transition: all 0.3s;
+            z-index: 101;
+        }
+
+        .panel-toggle:hover {
+            background: rgba(64, 224, 208, 0.2);
+        }
+
+        .stats-panel.hidden ~ .panel-toggle {
+            left: 0;
+        }
+
+        .stats-panel:not(.hidden) ~ .panel-toggle {
+            left: 400px;
+        }
+
+        .stats-panel::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .stats-panel::-webkit-scrollbar-thumb {
+            background: rgba(64, 224, 208, 0.5);
+            border-radius: 3px;
+        }
+
+        .task-stats {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 30px;
+        }
+
+        .stat-item {
+            flex: 1;
+            text-align: center;
+            padding: 15px;
+            background: rgba(64, 224, 208, 0.1);
+            border-radius: 6px;
+            margin: 0 5px;
+        }
+
+        .stat-icon {
+            font-size: 32px;
+            margin-bottom: 10px;
+        }
+
+        .stat-number {
+            font-size: 24px;
+            font-weight: bold;
+            color: #40e0d0;
+            margin-bottom: 5px;
+        }
+
+        .stat-label {
+            font-size: 14px;
+            color: #b0bec5;
+        }
+
+        .progress-section {
+            display: flex;
+            align-items: center;
+            margin-bottom: 30px;
+            padding: 15px;
+            background: rgba(64, 224, 208, 0.1);
+            border-radius: 6px;
+        }
+
+        .progress-chart {
+            width: 120px;
+            height: 120px;
+            position: relative;
+            margin-right: 20px;
+        }
+
+        .progress-circle {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            background: conic-gradient(
+                    #40e0d0 0deg 237.6deg,
+                    rgba(64, 224, 208, 0.3) 237.6deg 360deg
+            );
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+        }
+
+        .progress-circle::before {
+            content: '';
+            position: absolute;
+            width: 80%;
+            height: 80%;
+            background: #0a1929;
+            border-radius: 50%;
+        }
+
+        .progress-text {
+            position: relative;
+            z-index: 1;
+            text-align: center;
+        }
+
+        .progress-percent {
+            font-size: 24px;
+            font-weight: bold;
+            color: #40e0d0;
+        }
+
+        .progress-label {
+            font-size: 12px;
+            color: #b0bec5;
+        }
+
+        .progress-legend {
+            flex: 1;
+        }
+
+        .legend-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+            font-size: 14px;
+        }
+
+        .legend-color {
+            width: 16px;
+            height: 16px;
+            margin-right: 10px;
+            border-radius: 3px;
+        }
+
+        .legend-color.blue {
+            background: #40e0d0;
+        }
+
+        .legend-color.dark-blue {
+            background: rgba(64, 224, 208, 0.3);
+        }
+
+        .agv-list {
+            margin-top: 20px;
+        }
+
+        .agv-list-title {
+            font-size: 16px;
+            font-weight: bold;
+            margin-bottom: 15px;
+            color: #40e0d0;
+            padding-bottom: 10px;
+            border-bottom: 1px solid rgba(64, 224, 208, 0.3);
+        }
+
+        .agv-table {
+            width: 100%;
+            font-size: 12px;
+        }
+
+        .agv-table th {
+            text-align: left;
+            padding: 8px;
+            color: #b0bec5;
+            font-weight: normal;
+            border-bottom: 1px solid rgba(64, 224, 208, 0.2);
+        }
+
+        .agv-table td {
+            padding: 8px;
+            border-bottom: 1px solid rgba(64, 224, 208, 0.1);
+        }
+
+        .agv-table tr:hover {
+            background: rgba(64, 224, 208, 0.1);
+        }
+
+        /* 地图容器 */
+        .map-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            background: #0a1929;
+        }
+
+        .map-wrapper {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            cursor: grab;
+        }
+
+        .map-wrapper.dragging {
+            cursor: grabbing;
+        }
+
+        .map-background {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            user-select: none;
+            pointer-events: none;
+        }
+
+        .map-content {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            transform-origin: 0 0;
+            transition: transform 0.1s ease-out;
+        }
+
+        /* AGV标记 */
+        .agv-marker {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            transform: translate(-50%, -50%);
+            cursor: pointer;
+            z-index: 10;
+        }
+
+        .agv-icon {
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border: 2px solid #40e0d0;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 12px;
+            box-shadow: 0 0 15px rgba(64, 224, 208, 0.6);
+            transition: all 0.3s;
+        }
+
+        .agv-icon:hover {
+            transform: scale(1.2);
+            box-shadow: 0 0 25px rgba(64, 224, 208, 0.9);
+        }
+
+        .agv-icon.running {
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% {
+                box-shadow: 0 0 15px rgba(64, 224, 208, 0.6);
+            }
+            50% {
+                box-shadow: 0 0 25px rgba(64, 224, 208, 1);
+            }
+        }
+
+        /* 货位标记 */
+        .storage-marker {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            transform: translate(-50%, -50%);
+            cursor: pointer;
+            z-index: 5;
+        }
+
+        .storage-icon {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            border: 2px solid;
+            box-shadow: 0 0 10px currentColor;
+        }
+
+        .storage-icon.has-goods {
+            background: #4caf50;
+            border-color: #81c784;
+        }
+
+        .storage-icon.no-goods {
+            background: #f44336;
+            border-color: #e57373;
+        }
+
+        /* 缩放控制按钮 */
+        .zoom-controls {
+            position: absolute;
+            bottom: 30px;
+            right: 30px;
+            z-index: 200;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .zoom-btn {
+            width: 50px;
+            height: 50px;
+            background: rgba(26, 35, 126, 0.3);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(64, 224, 208, 0.3);
+            border-radius: 8px;
+            color: #40e0d0;
+            font-size: 24px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+        }
+
+        .zoom-btn:hover {
+            background: rgba(64, 224, 208, 0.2);
+            transform: scale(1.1);
+        }
+
+        .zoom-btn:active {
+            transform: scale(0.95);
+        }
+
+        .zoom-btn.reset {
+            font-size: 18px;
+        }
+
+        .zoom-btn.upload {
+            font-size: 18px;
+            cursor: pointer;
+        }
+
+        /* 加载提示 */
+        .loading {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 1000;
+            color: #40e0d0;
+            font-size: 18px;
+        }
+
+        /* 错误提示 */
+        .error-message {
+            position: fixed;
+            top: 100px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(244, 67, 54, 0.9);
+            color: white;
+            padding: 15px 30px;
+            border-radius: 8px;
+            z-index: 2000;
+            display: none;
+        }
+
+        .error-message.show {
+            display: block;
+        }
+    </style>
+</head>
+<body>
+<!-- 顶部标题 -->
+<div class="title-bar">
+    <h1>AGV实时监控看板</h1>
+</div>
+
+<!-- 错误提示 -->
+<div class="error-message" id="errorMessage"></div>
+
+<!-- 左侧统计面板 -->
+<div class="stats-panel" id="statsPanel">
+    <div class="task-stats">
+        <div class="stat-item">
+            <div class="stat-icon">🕐</div>
+            <div class="stat-number" id="totalTasks">0</div>
+            <div class="stat-label">累计执行任务数</div>
+        </div>
+        <div class="stat-item">
+            <div class="stat-icon">📊</div>
+            <div class="stat-number" id="dailyTasks">0</div>
+            <div class="stat-label">日执行任务</div>
+        </div>
+    </div>
+
+    <div class="progress-section">
+        <div class="progress-chart">
+            <div class="progress-circle">
+                <div class="progress-text">
+                    <div class="progress-percent" id="progressPercent">0%</div>
+                    <div class="progress-label">已完成</div>
+                </div>
+            </div>
+        </div>
+        <div class="progress-legend">
+            <div class="legend-item">
+                <div class="legend-color blue"></div>
+                <span id="legendCompleted">已完成 0%</span>
+            </div>
+            <div class="legend-item">
+                <div class="legend-color dark-blue"></div>
+                <span id="legendRunning">执行中 0%</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="agv-list">
+        <div class="agv-list-title">AGV列表</div>
+        <table class="agv-table">
+            <thead>
+            <tr>
+                <th>车号</th>
+                <th>类型</th>
+                <th>任务号</th>
+                <th>任务状态</th>
+                <th>电量</th>
+                <th>AGV状态</th>
+            </tr>
+            </thead>
+            <tbody id="agvTableBody">
+            <!-- 动态生成 -->
+            </tbody>
+        </table>
+    </div>
+</div>
+<div class="panel-toggle" id="panelToggle">‹</div>
+
+<!-- 右侧状态看板 -->
+<div class="detail-panel" id="detailPanel">
+    <div class="detail-panel-header">
+        <div class="detail-panel-title" id="detailPanelTitle">详情</div>
+        <div class="detail-panel-close" id="detailPanelClose">×</div>
+    </div>
+    <div id="detailPanelContent">
+        <!-- 动态内容 -->
+    </div>
+</div>
+
+<!-- 地图容器 -->
+<div class="map-container">
+    <div class="map-wrapper" id="mapWrapper">
+        <div class="map-content" id="mapContent">
+            <!-- 背景图片 -->
+            <img src="https://images.unsplash.com/photo-1581092160562-40aa08e78837?w=1920&h=1080&fit=crop"
+                 alt="厂区背景"
+                 class="map-background"
+                 id="mapBackground">
+
+            <!-- AGV和货位标记将动态添加到这里 -->
+        </div>
+    </div>
+
+    <!-- 缩放控制 -->
+    <div class="zoom-controls">
+        <button class="zoom-btn" id="zoomIn">+</button>
+        <button class="zoom-btn" id="zoomOut">−</button>
+        <button class="zoom-btn reset" id="resetView" title="初始化地图视角">⌂</button>
+        <label class="zoom-btn upload" for="mapUpload" title="上传地图">
+            📁
+        </label>
+        <input type="file" id="mapUpload" accept="image/*" style="display: none;">
+    </div>
+</div>
+
+<div class="loading" id="loading">加载中...</div>
+
+<script>
+    // ==================== 配置部分 ====================
+    const API_CONFIG = {
+        MAP_INIT: 'http://localhost:8081/api/agv/map/initLayout', // 地图初始化接口
+        AGV_STATUS: 'http://localhost:8081/api/agv/status',
+        POINT_STATUS: 'http://localhost:8081/api/baseData/point/status',
+        REFRESH_INTERVAL: 5000 // 5秒刷新一次
+    };
+
+    // ==================== 地图状态 ====================
+    const mapState = {
+        mapId: null,
+        origin: { x: 0, y: 0 },
+        width: 0,
+        height: 0,
+        scale: 1,
+        offsetX: 0,
+        offsetY: 0,
+        isDragging: false,
+        dragStartX: 0,
+        dragStartY: 0,
+        dragStartOffsetX: 0,
+        dragStartOffsetY: 0,
+        staticDevices: [] // 静态设备（从地图配置加载）
+    };
+
+    // ==================== DOM元素 ====================
+    const mapWrapper = document.getElementById('mapWrapper');
+    const mapContent = document.getElementById('mapContent');
+    const mapBackground = document.getElementById('mapBackground');
+    const zoomInBtn = document.getElementById('zoomIn');
+    const zoomOutBtn = document.getElementById('zoomOut');
+    const resetViewBtn = document.getElementById('resetView');
+    const mapUpload = document.getElementById('mapUpload');
+    const loading = document.getElementById('loading');
+    const statsPanel = document.getElementById('statsPanel');
+    const panelToggle = document.getElementById('panelToggle');
+    const detailPanel = document.getElementById('detailPanel');
+    const detailPanelTitle = document.getElementById('detailPanelTitle');
+    const detailPanelContent = document.getElementById('detailPanelContent');
+    const detailPanelClose = document.getElementById('detailPanelClose');
+    const errorMessage = document.getElementById('errorMessage');
+
+    // ==================== 数据获取函数 ====================
+
+    // 从后端获取地图初始化数据
+    async function fetchMapInitData() {
+        try {
+            const response = await fetch(API_CONFIG.MAP_INIT);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const result = await response.json();
+            console.log('地图初始化数据:', result);
+
+            if (result.code === 200 && result.data) {
+                return result.data;
+            } else {
+                throw new Error(result.msg || '获取地图数据失败');
+            }
+        } catch (error) {
+            console.error('获取地图初始化数据失败:', error);
+            showError('获取地图数据失败: ' + error.message);
+            return null;
+        }
+    }
+
+    // 从后端获取AGV数据
+    async function fetchAGVData() {
+        try {
+            const response = await fetch(API_CONFIG.AGV_STATUS);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            console.log('AGV数据:', data);
+            return data;
+        } catch (error) {
+            console.error('获取AGV数据失败:', error);
+            showError('获取AGV数据失败: ' + error.message);
+            return [];
+        }
+    }
+
+    // 从后端获取货位数据
+    async function fetchStorageData() {
+        try {
+            const response = await fetch(API_CONFIG.POINT_STATUS);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            console.log('货位数据:', data);
+            return data;
+        } catch (error) {
+            console.error('获取货位数据失败:', error);
+            showError('获取货位数据失败: ' + error.message);
+            return [];
+        }
+    }
+
+    // 从后端获取所有数据
+    async function fetchData() {
+        try {
+            // 并行获取AGV和货位数据
+            const [agvData, storageData] = await Promise.all([
+                fetchAGVData(),
+                fetchStorageData()
+            ]);
+
+            // 转换数据格式以适配现有渲染逻辑
+            const agvs = transformAGVData(agvData);
+            const storages = transformStorageData(storageData);
+
+            // 计算统计数据
+            const stats = calculateStats(agvs);
+
+            return {
+                agvs,
+                storages,
+                stats
+            };
+        } catch (error) {
+            console.error('获取数据失败:', error);
+            showError('获取数据失败: ' + error.message);
+            return {
+                agvs: [],
+                storages: [],
+                stats: {
+                    totalTasks: 0,
+                    dailyTasks: 0,
+                    completedPercent: 0
+                }
+            };
+        }
+    }
+
+    // ==================== 数据转换函数 ====================
+
+    // 转换AGV数据格式
+    function transformAGVData(data) {
+        if (!Array.isArray(data)) {
+            console.warn('AGV数据格式不正确，期望数组，收到:', typeof data);
+            // 如果是对象包含data字段
+            if (data && data.data && Array.isArray(data.data)) {
+                data = data.data;
+            } else {
+                return [];
+            }
+        }else {
+             return [];
+        }
+
+        return data.map(agv => ({
+            id: agv.agvId || agv.id || agv.agvCode || 'N/A',
+            x: parseFloat(agv.x || agv.positionX || agv.coordinateX || 0),
+            y: parseFloat(agv.y || agv.positionY || agv.coordinateY || 0),
+            status: agv.status || agv.workStatus || agv.agvStatus || 'idle',
+            taskId: agv.taskId || agv.currentTask || agv.taskCode || '',
+            battery: parseFloat(agv.battery || agv.batteryLevel || agv.power || 0),
+            icon: agv.icon || agv.iconUrl || agv.image || '' // 添加icon字段
+        }));
+    }
+
+    // 转换货位数据格式
+    function transformStorageData(data) {
+        if (!Array.isArray(data)) {
+            console.warn('货位数据格式不正确，期望数组，收到:', typeof data);
+            // 如果是对象包含data字段
+            if (data && data.data && Array.isArray(data.data)) {
+                data = data.data;
+            } else {
+                return [];
+            }
+        }
+
+        return data.map(storage => ({
+            id: storage.pointId || storage.id || storage.pointCode || 'N/A',
+            x: parseFloat(storage.x || storage.positionX || storage.coordinateX || 0),
+            y: parseFloat(storage.y || storage.positionY || storage.coordinateY || 0),
+            hasGoods: storage.hasGoods || storage.occupied || storage.status === 1 || false
+        }));
+    }
+
+    // 计算统计数据
+    function calculateStats(agvs) {
+        const runningCount = agvs.filter(agv =>
+            agv.status === 'running' || agv.status === '运行中' || agv.status === 1
+        ).length;
+        const totalCount = agvs.length;
+        const completedPercent = totalCount > 0 ? Math.round((runningCount / totalCount) * 100) : 0;
+
+        return {
+            totalTasks: 345320, // 可以从后端获取或累计计算
+            dailyTasks: 345320, // 可以从后端获取
+            completedPercent: completedPercent
+        };
+    }
+
+    // ==================== 渲染函数 ====================
+
+    // 渲染静态设备（从地图配置加载）
+    function renderStaticDevices(devices) {
+        // 清除现有静态设备标记
+        document.querySelectorAll('.static-device-marker').forEach(marker => marker.remove());
+
+        if (!devices || devices.length === 0) {
+            console.log('没有静态设备需要渲染');
+            return;
+        }
+
+        devices.forEach(device => {
+            const marker = document.createElement('div');
+            marker.className = 'static-device-marker';
+            
+            // 根据原点计算实际位置
+            const actualX = mapState.origin.x + device.x;
+            const actualY = mapState.origin.y + device.y;
+            
+            marker.style.position = 'absolute';
+            marker.style.left = actualX + 'px';
+            marker.style.top = actualY + 'px';
+            marker.style.width = (device.size || 50) + 'px';
+            marker.style.height = (device.size || 50) + 'px';
+            marker.style.transform = `translate(-50%, -50%) rotate(${device.angle || 0}deg)`;
+            marker.style.cursor = 'pointer';
+            marker.style.zIndex = '8';
+            marker.dataset.deviceId = device.id;
+
+            // 创建设备图标
+            const icon = document.createElement('div');
+            icon.style.width = '100%';
+            icon.style.height = '100%';
+            icon.style.display = 'flex';
+            icon.style.alignItems = 'center';
+            icon.style.justifyContent = 'center';
+
+            // 判断是否为图片URL
+            if (device.icon && (device.icon.startsWith('http') || device.icon.startsWith('/') || device.icon.includes('.'))) {
+                // 使用图片
+                const img = document.createElement('img');
+                img.src = device.icon;
+                img.alt = device.name;
+                img.style.width = '100%';
+                img.style.height = '100%';
+                img.style.objectFit = 'contain';
+                img.onerror = () => {
+                    // 图片加载失败，显示文字
+                    icon.innerHTML = `<span style="font-size: ${Math.round((device.size || 50) * 0.4)}px; color: #40e0d0;">${device.name || '📍'}</span>`;
+                };
+                icon.appendChild(img);
+            } else {
+                // 使用文字或emoji
+                icon.innerHTML = `<span style="font-size: ${Math.round((device.size || 50) * 0.4)}px; color: #40e0d0;">${device.icon || device.name || '📍'}</span>`;
+            }
+
+            icon.title = `${device.name}\n类型: ${device.type}\n位置: (${device.x}, ${device.y})`;
+
+            // 添加点击事件
+            marker.addEventListener('click', (e) => {
+                e.stopPropagation();
+                showStaticDeviceDetail(device);
+            });
+
+            marker.appendChild(icon);
+            mapContent.appendChild(marker);
+        });
+
+        console.log(`✅ 已渲染 ${devices.length} 个静态设备`);
+    }
+
+    // 渲染AGV
+    function renderAGVs(agvs) {
+        // 清除现有AGV标记
+        document.querySelectorAll('.agv-marker').forEach(marker => marker.remove());
+
+        agvs.forEach(agv => {
+            const marker = document.createElement('div');
+            marker.className = 'agv-marker';
+            
+            // 根据原点计算实际位置
+            const actualX = mapState.origin.x + agv.x;
+            const actualY = mapState.origin.y + agv.y;
+            
+            marker.style.left = actualX + 'px';
+            marker.style.top = actualY + 'px';
+            marker.dataset.agvId = agv.id;
+
+            const icon = document.createElement('div');
+            const isRunning = agv.status === 'running' || agv.status === '运行中' || agv.status === 1;
+            icon.className = `agv-icon ${isRunning ? 'running' : ''}`;
+
+            // 如果有icon字段，使用图片，否则使用文字
+            if (agv.icon) {
+                icon.style.backgroundImage = `url(${agv.icon})`;
+                icon.style.backgroundSize = 'cover';
+                icon.style.backgroundPosition = 'center';
+                icon.style.backgroundRepeat = 'no-repeat';
+                // 可选：添加一个小的文字标签
+                const label = document.createElement('span');
+                label.textContent = agv.id;
+                label.style.position = 'absolute';
+                label.style.bottom = '-20px';
+                label.style.left = '50%';
+                label.style.transform = 'translateX(-50%)';
+                label.style.fontSize = '10px';
+                label.style.whiteSpace = 'nowrap';
+                label.style.background = 'rgba(0,0,0,0.7)';
+                label.style.padding = '2px 6px';
+                label.style.borderRadius = '3px';
+                marker.appendChild(label);
+            } else {
+                // 没有图片时显示文字
+                icon.textContent = agv.id;
+            }
+
+            icon.title = `AGV ${agv.id}
+状态: ${agv.status}
+电量: ${agv.battery}%`;
+
+            // 添加点击事件
+            marker.addEventListener('click', (e) => {
+                e.stopPropagation();
+                showAGVDetail(agv);
+            });
+
+            marker.appendChild(icon);
+            mapContent.appendChild(marker);
+        });
+    };
+
+
+
+    // 渲染货位
+    function renderStorages(storages) {
+        // 清除现有货位标记
+        document.querySelectorAll('.storage-marker').forEach(marker => marker.remove());
+
+        storages.forEach(storage => {
+            const marker = document.createElement('div');
+            marker.className = 'storage-marker';
+            
+            // 根据原点计算实际位置
+            const actualX = mapState.origin.x + storage.x;
+            const actualY = mapState.origin.y + storage.y;
+            
+            marker.style.left = actualX + 'px';
+            marker.style.top = actualY + 'px';
+            marker.dataset.storageId = storage.id;
+
+            const icon = document.createElement('div');
+            icon.className = `storage-icon ${storage.hasGoods ? 'has-goods' : 'no-goods'}`;
+            icon.title = `货位 ${storage.id}\n状态: ${storage.hasGoods ? '有货' : '无货'}`;
+
+            // 添加点击事件
+            marker.addEventListener('click', (e) => {
+                e.stopPropagation();
+                showStorageDetail(storage);
+            });
+
+            marker.appendChild(icon);
+            mapContent.appendChild(marker);
+        });
+    }
+
+    // 更新统计数据
+    function updateStats(stats) {
+        document.getElementById('totalTasks').textContent = stats.totalTasks.toLocaleString();
+        document.getElementById('dailyTasks').textContent = stats.dailyTasks.toLocaleString();
+        document.getElementById('progressPercent').textContent = stats.completedPercent + '%';
+
+        // 更新进度圆环
+        const progressCircle = document.querySelector('.progress-circle');
+        const percent = stats.completedPercent;
+        const angle = (percent / 100) * 360;
+        progressCircle.style.background = `conic-gradient(
+            #40e0d0 0deg ${angle}deg,
+            rgba(64, 224, 208, 0.3) ${angle}deg 360deg
+        )`;
+
+        // 更新图例
+        document.getElementById('legendCompleted').textContent = `已完成 ${percent}%`;
+        document.getElementById('legendRunning').textContent = `执行中 ${100 - percent}%`;
+    }
+
+    // 更新AGV列表
+    function updateAGVList(agvs) {
+        const tbody = document.getElementById('agvTableBody');
+        tbody.innerHTML = agvs.map(agv => {
+            const statusText = getStatusText(agv.status);
+            return `
+                <tr>
+                    <td>${agv.id}#</td>
+                    <td>NT100</td>
+                    <td>${agv.taskId || '无'}</td>
+                    <td>${statusText}</td>
+                    <td>${agv.battery}%</td>
+                    <td>正常</td>
+                </tr>
+            `;
+        }).join('');
+    }
+
+    // 获取状态文本
+    function getStatusText(status) {
+        const statusMap = {
+            'running': '运行中',
+            'idle': '空闲',
+            'error': '故障',
+            '运行中': '运行中',
+            '空闲': '空闲',
+            '故障': '故障',
+            '1': '运行中',
+            '0': '空闲',
+            '-1': '故障'
+        };
+        return statusMap[status] || '未知';
+    }
+
+    // 获取状态样式类
+    function getStatusClass(status) {
+        if (status === 'running' || status === '运行中' || status === 1 || status === '1') {
+            return 'running';
+        } else if (status === 'error' || status === '故障' || status === -1 || status === '-1') {
+            return 'error';
+        } else {
+            return 'idle';
+        }
+    }
+
+    // ==================== 详情面板函数 ====================
+
+    // 显示AGV详情
+    function showAGVDetail(agv) {
+        detailPanelTitle.textContent = `AGV ${agv.id} 状态`;
+
+        const statusText = getStatusText(agv.status);
+        const statusClass = getStatusClass(agv.status);
+
+        detailPanelContent.innerHTML = `
+            <div class="detail-item">
+                <div class="detail-item-label">车号</div>
+                <div class="detail-item-value">${agv.id}</div>
+            </div>
+            <div class="detail-item">
+                <div class="detail-item-label">类型</div>
+                <div class="detail-item-value">NT100</div>
+            </div>
+            <div class="detail-item">
+                <div class="detail-item-label">任务号</div>
+                <div class="detail-item-value">${agv.taskId || '无'}</div>
+            </div>
+            <div class="detail-item">
+                <div class="detail-item-label">运行状态</div>
+                <div class="detail-item-value">
+                    <span class="status-badge ${statusClass}">
+                        ${statusText}
+                    </span>
+                </div>
+            </div>
+            <div class="detail-item">
+                <div class="detail-item-label">电量</div>
+                <div class="detail-item-value">${agv.battery}%</div>
+            </div>
+            <div class="detail-item">
+                <div class="detail-item-label">位置坐标</div>
+                <div class="detail-item-value">X: ${agv.x}, Y: ${agv.y}</div>
+            </div>
+            <div class="detail-item">
+                <div class="detail-item-label">AGV状态</div>
+                <div class="detail-item-value">正常</div>
+            </div>
+        `;
+
+        detailPanel.classList.add('show');
+    }
+
+    // 显示货位详情
+    function showStorageDetail(storage) {
+        detailPanelTitle.textContent = `货位 ${storage.id} 状态`;
+
+        detailPanelContent.innerHTML = `
+            <div class="detail-item">
+                <div class="detail-item-label">货位编号</div>
+                <div class="detail-item-value">${storage.id}</div>
+            </div>
+            <div class="detail-item">
+                <div class="detail-item-label">货位状态</div>
+                <div class="detail-item-value">
+                    <span class="status-badge ${storage.hasGoods ? 'has-goods' : 'no-goods'}">
+                        ${storage.hasGoods ? '有货' : '无货'}
+                    </span>
+                </div>
+            </div>
+            <div class="detail-item">
+                <div class="detail-item-label">位置坐标</div>
+                <div class="detail-item-value">X: ${storage.x}, Y: ${storage.y}</div>
+            </div>
+        `;
+
+        detailPanel.classList.add('show');
+    }
+
+    // 显示静态设备详情
+    function showStaticDeviceDetail(device) {
+        detailPanelTitle.textContent = `${device.name} 详情`;
+
+        detailPanelContent.innerHTML = `
+            <div class="detail-item">
+                <div class="detail-item-label">设备编号</div>
+                <div class="detail-item-value">${device.code || device.id}</div>
+            </div>
+            <div class="detail-item">
+                <div class="detail-item-label">设备名称</div>
+                <div class="detail-item-value">${device.name}</div>
+            </div>
+            <div class="detail-item">
+                <div class="detail-item-label">设备类型</div>
+                <div class="detail-item-value">${device.type}</div>
+            </div>
+            <div class="detail-item">
+                <div class="detail-item-label">位置坐标</div>
+                <div class="detail-item-value">X: ${device.x}, Y: ${device.y}</div>
+            </div>
+            <div class="detail-item">
+                <div class="detail-item-label">旋转角度</div>
+                <div class="detail-item-value">${device.angle || 0}°</div>
+            </div>
+            <div class="detail-item">
+                <div class="detail-item-label">设备大小</div>
+                <div class="detail-item-value">${device.size || 50}px</div>
+            </div>
+        `;
+
+        detailPanel.classList.add('show');
+    }
+
+    // 关闭详情面板
+    function closeDetailPanel() {
+        detailPanel.classList.remove('show');
+    }
+
+    // ==================== 错误提示函数 ====================
+
+    function showError(message) {
+        errorMessage.textContent = message;
+        errorMessage.classList.add('show');
+        setTimeout(() => {
+            errorMessage.classList.remove('show');
+        }, 5000);
+    }
+
+    // ==================== 地图交互函数 ====================
+
+    // 初始化地图交互
+    function initMapInteraction() {
+        // 拖动功能
+        mapContent.addEventListener('mousedown', (e) => {
+            if (e.target.closest('.agv-marker') || e.target.closest('.storage-marker')) {
+                return;
+            }
+            mapState.isDragging = true;
+            mapWrapper.classList.add('dragging');
+            mapState.dragStartX = e.clientX;
+            mapState.dragStartY = e.clientY;
+            mapState.dragStartOffsetX = mapState.offsetX;
+            mapState.dragStartOffsetY = mapState.offsetY;
+            e.preventDefault();
+        });
+
+        mapWrapper.addEventListener('mousedown', (e) => {
+            if (e.target.closest('.agv-marker') || e.target.closest('.storage-marker')) {
+                return;
+            }
+            if (e.target === mapWrapper || e.target.classList.contains('map-background')) {
+                mapState.isDragging = true;
+                mapWrapper.classList.add('dragging');
+                mapState.dragStartX = e.clientX;
+                mapState.dragStartY = e.clientY;
+                mapState.dragStartOffsetX = mapState.offsetX;
+                mapState.dragStartOffsetY = mapState.offsetY;
+            }
+        });
+
+        document.addEventListener('mousemove', (e) => {
+            if (mapState.isDragging) {
+                const deltaX = e.clientX - mapState.dragStartX;
+                const deltaY = e.clientY - mapState.dragStartY;
+                mapState.offsetX = mapState.dragStartOffsetX + deltaX;
+                mapState.offsetY = mapState.dragStartOffsetY + deltaY;
+                updateMapTransform();
+            }
+        });
+
+        document.addEventListener('mouseup', () => {
+            mapState.isDragging = false;
+            mapWrapper.classList.remove('dragging');
+        });
+
+        // 缩放功能
+        zoomInBtn.addEventListener('click', () => {
+            mapState.scale = Math.min(mapState.scale * 1.2, 3);
+            updateMapTransform();
+        });
+
+        zoomOutBtn.addEventListener('click', () => {
+            mapState.scale = Math.max(mapState.scale / 1.2, 0.5);
+            updateMapTransform();
+        });
+
+        // 鼠标滚轮缩放
+        mapWrapper.addEventListener('wheel', (e) => {
+            e.preventDefault();
+            const delta = e.deltaY > 0 ? 0.9 : 1.1;
+            mapState.scale = Math.max(0.5, Math.min(3, mapState.scale * delta));
+            updateMapTransform();
+        });
+
+        // 初始化地图视角
+        resetViewBtn.addEventListener('click', () => {
+            mapState.scale = 1;
+            mapState.offsetX = 0;
+            mapState.offsetY = 0;
+            updateMapTransform();
+        });
+
+        // 地图上传功能
+        mapUpload.addEventListener('change', (e) => {
+            const file = e.target.files[0];
+            if (file) {
+                if (file.type.startsWith('image/')) {
+                    const reader = new FileReader();
+                    reader.onload = (event) => {
+                        mapBackground.src = event.target.result;
+                        mapState.scale = 1;
+                        mapState.offsetX = 0;
+                        mapState.offsetY = 0;
+                        updateMapTransform();
+                    };
+                    reader.readAsDataURL(file);
+                } else {
+                    alert('请上传图片文件！');
+                }
+            }
+        });
+    }
+
+    // 更新地图变换
+    function updateMapTransform() {
+        mapContent.style.transform = `translate(${mapState.offsetX}px, ${mapState.offsetY}px) scale(${mapState.scale})`;
+    }
+
+    // ==================== 面板交互函数 ====================
+
+    // 初始化详情面板
+    function initDetailPanel() {
+        detailPanelClose.addEventListener('click', closeDetailPanel);
+        detailPanel.addEventListener('click', (e) => {
+            if (e.target === detailPanel) {
+                closeDetailPanel();
+            }
+        });
+    }
+
+    // 面板切换功能
+    function initPanelToggle() {
+        panelToggle.addEventListener('click', () => {
+            statsPanel.classList.toggle('hidden');
+            panelToggle.textContent = statsPanel.classList.contains('hidden') ? '›' : '‹';
+        });
+    }
+
+    // ==================== 初始化和数据刷新 ====================
+
+    // 初始化
+    async function init() {
+        console.log('初始化AGV监控看板...');
+        console.log('API配置:', API_CONFIG);
+
+        initMapInteraction();
+        initPanelToggle();
+        initDetailPanel();
+
+        // 加载地图初始化数据
+        const mapData = await fetchMapInitData();
+        if (mapData) {
+            // 保存地图信息
+            mapState.mapId = mapData.mapId;
+            mapState.origin = mapData.origin || { x: 0, y: 0 };
+            mapState.width = mapData.width;
+            mapState.height = mapData.height;
+            mapState.staticDevices = mapData.devices || [];
+
+            console.log('地图信息:', {
+                mapId: mapState.mapId,
+                origin: mapState.origin,
+                width: mapState.width,
+                height: mapState.height,
+                deviceCount: mapState.staticDevices.length
+            });
+
+            // 设置地图背景
+            if (mapData.url) {
+                mapBackground.src = mapData.url;
+                mapBackground.onload = () => {
+                    console.log('✅ 地图背景加载成功');
+                };
+                mapBackground.onerror = () => {
+                    console.error('❌ 地图背景加载失败');
+                    showError('地图背景加载失败');
+                };
+            }
+
+            // 渲染静态设备
+            renderStaticDevices(mapState.staticDevices);
+        }
+
+        // 加载动态数据
+        await refreshData();
+
+        // 隐藏加载提示
+        loading.style.display = 'none';
+
+        // 定时刷新动态数据
+        setInterval(refreshData, API_CONFIG.REFRESH_INTERVAL);
+    }
+
+    // 刷新数据
+    async function refreshData() {
+        try {
+            const data = await fetchData();
+
+            // 渲染数据
+            renderAGVs(data.agvs);
+            renderStorages(data.storages);
+            updateStats(data.stats);
+            updateAGVList(data.agvs);
+
+            console.log('数据刷新成功:', {
+                agvCount: data.agvs.length,
+                storageCount: data.storages.length
+            });
+        } catch (error) {
+            console.error('刷新数据失败:', error);
+        }
+    }
+
+    // 页面加载完成后初始化
+    window.addEventListener('load', init);
+</script>
+</body>
+</html>
diff --git a/nl-vue/src/views/nl_agv/screen/dashboard-styles.less b/nl-vue/src/views/nl_agv/screen/dashboard-styles.less
new file mode 100644
index 0000000..825bd93
--- /dev/null
+++ b/nl-vue/src/views/nl_agv/screen/dashboard-styles.less
@@ -0,0 +1,642 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+.agv-dashboard {
+	font-family: 'Microsoft YaHei', Arial, sans-serif;
+	background: #0a1929;
+	color: #fff;
+	overflow: hidden;
+	height: 100%;
+	min-height: 100vh;
+	position: relative;
+	width: 100%;
+}
+
+/* 顶部标题浮窗 */
+.title-bar {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 30%;
+	min-width: 450px;
+	max-width: 600px;
+	height: 85px;
+	backdrop-filter: blur(3px);
+	border: 1.5px solid rgba(120, 210, 255, 0.5);
+	border-top: none;
+	border-radius: 0 0 60px 60px;
+	padding: 22px 45px;
+	text-align: center;
+	z-index: 1000;
+	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5),
+		0 0 60px rgba(100, 200, 255, 0.25),
+		inset 0 3px 25px rgba(120, 210, 255, 0.15),
+		inset 0 -12px 35px rgba(8, 20, 45, 0.4);
+	overflow: hidden;
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: -20px;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 70%;
+		height: 60px;
+		background: radial-gradient(ellipse 80% 40% at 50% 0%,
+			rgba(120, 210, 255, 0.4) 0%,
+			rgba(100, 200, 255, 0.2) 30%,
+			transparent 70%);
+		pointer-events: none;
+		z-index: 1;
+		filter: blur(8px);
+	}
+
+	&::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: linear-gradient(to bottom,
+			rgba(120, 210, 255, 0.1) 0%,
+			transparent 20%,
+			transparent 80%,
+			rgba(8, 20, 45, 0.2) 100%);
+		pointer-events: none;
+		z-index: 1;
+		border-radius: 0 0 60px 60px;
+	}
+
+	h1 {
+		position: relative;
+		z-index: 2;
+		font-size: 30px;
+		font-weight: 600;
+		color: #b8e0ff;
+		text-shadow: 0 0 12px rgba(184, 224, 255, 0.9),
+			0 0 24px rgba(120, 210, 255, 0.7),
+			0 0 36px rgba(100, 200, 255, 0.5),
+			0 2px 6px rgba(0, 0, 0, 0.4);
+		letter-spacing: 5px;
+		margin: 0;
+		line-height: 1.2;
+	}
+}
+
+/* 左侧统计面板 */
+.stats-panel {
+	position: absolute;
+	left: 20px;
+	top: 100px;
+	width: 350px;
+	max-width: calc(100% - 40px);
+	background: rgba(13, 27, 62, 0.3);
+	backdrop-filter: blur(10px);
+	border: 1px solid rgba(64, 224, 208, 0.3);
+	border-radius: 8px;
+	padding: 20px;
+	z-index: 100;
+	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(13, 27, 62, 0.5);
+	max-height: calc(100% - 120px);
+	overflow-y: auto;
+	transition: transform 0.3s ease-in-out;
+
+	&.hidden {
+		transform: translateX(-100%);
+	}
+
+	&::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: rgba(64, 224, 208, 0.5);
+		border-radius: 3px;
+	}
+}
+
+/* 右侧状态看板 */
+.detail-panel {
+	position: absolute;
+	right: 20px;
+	top: 100px;
+	width: 400px;
+	max-width: calc(100% - 40px);
+	background: rgba(13, 27, 62, 0.3);
+	backdrop-filter: blur(10px);
+	border: 1px solid rgba(64, 224, 208, 0.3);
+	border-radius: 8px;
+	padding: 20px;
+	z-index: 100;
+	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(13, 27, 62, 0.5);
+	max-height: calc(100% - 120px);
+	overflow-y: auto;
+	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+	transform: translateX(100%);
+	opacity: 0;
+	pointer-events: none;
+
+	&.show {
+		transform: translateX(0);
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	&::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: rgba(64, 224, 208, 0.5);
+		border-radius: 3px;
+	}
+}
+
+.detail-panel-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20px;
+	padding-bottom: 15px;
+	border-bottom: 1px solid rgba(64, 224, 208, 0.3);
+}
+
+.detail-panel-title {
+	font-size: 18px;
+	font-weight: bold;
+	color: #40e0d0;
+}
+
+.detail-panel-close {
+	width: 30px;
+	height: 30px;
+	background: rgba(64, 224, 208, 0.1);
+	border: 1px solid rgba(64, 224, 208, 0.3);
+	border-radius: 4px;
+	color: #40e0d0;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 18px;
+	transition: all 0.3s;
+
+	&:hover {
+		background: rgba(64, 224, 208, 0.2);
+	}
+}
+
+.detail-card {
+	margin-bottom: 15px;
+	padding: 20px;
+	background: rgba(64, 224, 208, 0.1);
+	border-radius: 6px;
+	transition: all 0.3s ease;
+
+	&:hover {
+		background: rgba(64, 224, 208, 0.15);
+		transform: translateX(-2px);
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+.detail-card-label {
+	font-size: 14px;
+	color: #b0bec5;
+	margin-bottom: 10px;
+	font-weight: normal;
+}
+
+.detail-card-value {
+	font-size: 24px;
+	font-weight: bold;
+	color: #40e0d0;
+	line-height: 1.2;
+}
+
+.status-badge {
+	display: inline-block;
+	padding: 6px 16px;
+	border-radius: 20px;
+	font-size: 14px;
+	font-weight: 600;
+	transition: all 0.3s ease;
+
+	&.running {
+		background: rgba(76, 175, 80, 0.3);
+		color: #4caf50;
+		border: 1px solid #4caf50;
+	}
+
+	&.idle {
+		background: rgba(255, 152, 0, 0.3);
+		color: #ff9800;
+		border: 1px solid #ff9800;
+	}
+
+	&.error {
+		background: rgba(244, 67, 54, 0.3);
+		color: #f44336;
+		border: 1px solid #f44336;
+	}
+
+	&.has-goods {
+		background: rgba(76, 175, 80, 0.3);
+		color: #4caf50;
+		border: 1px solid #4caf50;
+	}
+
+	&.no-goods {
+		background: rgba(244, 67, 54, 0.3);
+		color: #f44336;
+		border: 1px solid #f44336;
+	}
+}
+
+.panel-toggle {
+	position: absolute;
+	left: 0;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 40px;
+	height: 60px;
+	background: rgba(26, 35, 126, 0.3);
+	backdrop-filter: blur(10px);
+	border: 1px solid rgba(64, 224, 208, 0.3);
+	border-left: none;
+	border-radius: 0 8px 8px 0;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #40e0d0;
+	font-size: 20px;
+	transition: all 0.3s;
+	z-index: 101;
+
+	&:hover {
+		background: rgba(64, 224, 208, 0.2);
+	}
+}
+
+.stats-panel.hidden ~ .panel-toggle {
+	left: 0;
+}
+
+.stats-panel:not(.hidden) ~ .panel-toggle {
+	left: 370px;
+}
+
+.task-stats {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 30px;
+}
+
+.stat-item {
+	flex: 1;
+	text-align: center;
+	padding: 15px;
+	background: rgba(64, 224, 208, 0.1);
+	border-radius: 6px;
+	margin: 0 5px;
+}
+
+.stat-icon {
+	font-size: 32px;
+	margin-bottom: 10px;
+}
+
+.stat-number {
+	font-size: 24px;
+	font-weight: bold;
+	color: #40e0d0;
+	margin-bottom: 5px;
+}
+
+.stat-label {
+	font-size: 14px;
+	color: #b0bec5;
+}
+
+.progress-section {
+	display: flex;
+	align-items: center;
+	margin-bottom: 30px;
+	padding: 15px;
+	background: rgba(64, 224, 208, 0.1);
+	border-radius: 6px;
+}
+
+.progress-chart {
+	width: 120px;
+	height: 120px;
+	position: relative;
+	margin-right: 20px;
+}
+
+.progress-circle {
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+
+	&::before {
+		content: '';
+		position: absolute;
+		width: 80%;
+		height: 80%;
+		background: #0a1929;
+		border-radius: 50%;
+	}
+}
+
+.progress-text {
+	position: relative;
+	z-index: 1;
+	text-align: center;
+}
+
+.progress-percent {
+	font-size: 24px;
+	font-weight: bold;
+	color: #40e0d0;
+}
+
+.progress-label {
+	font-size: 12px;
+	color: #b0bec5;
+}
+
+.progress-legend {
+	flex: 1;
+}
+
+.legend-item {
+	display: flex;
+	align-items: center;
+	margin-bottom: 10px;
+	font-size: 14px;
+}
+
+.legend-color {
+	width: 16px;
+	height: 16px;
+	margin-right: 10px;
+	border-radius: 3px;
+
+	&.blue {
+		background: #40e0d0;
+	}
+
+	&.dark-blue {
+		background: rgba(64, 224, 208, 0.3);
+	}
+}
+
+.agv-list {
+	margin-top: 20px;
+}
+
+.agv-list-title {
+	font-size: 16px;
+	font-weight: bold;
+	margin-bottom: 15px;
+	color: #40e0d0;
+	padding-bottom: 10px;
+	border-bottom: 1px solid rgba(64, 224, 208, 0.3);
+}
+
+.agv-table {
+	width: 100%;
+	font-size: 12px;
+
+	th {
+		text-align: left;
+		padding: 8px;
+		color: #b0bec5;
+		font-weight: normal;
+		border-bottom: 1px solid rgba(64, 224, 208, 0.2);
+	}
+
+	td {
+		padding: 8px;
+		border-bottom: 1px solid rgba(64, 224, 208, 0.1);
+	}
+
+	tr:hover {
+		background: rgba(64, 224, 208, 0.1);
+	}
+}
+
+/* 地图容器 */
+.map-container {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	background: #0a1929;
+}
+
+.map-wrapper {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	cursor: grab;
+
+	&.dragging {
+		cursor: grabbing;
+	}
+}
+
+.map-background {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	user-select: none;
+	pointer-events: none;
+}
+
+.map-content {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	transform-origin: 0 0;
+	transition: transform 0.1s ease-out;
+}
+
+/* AGV标记 */
+.agv-marker {
+	position: absolute;
+	width: 40px;
+	height: 40px;
+	transform: translate(-50%, -50%);
+	cursor: pointer;
+	z-index: 10;
+}
+
+.agv-icon {
+	width: 100%;
+	height: 100%;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	border: 2px solid #40e0d0;
+	border-radius: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: bold;
+	font-size: 12px;
+	box-shadow: 0 0 15px rgba(64, 224, 208, 0.6);
+	transition: all 0.3s;
+
+	&:hover {
+		transform: scale(1.2);
+		box-shadow: 0 0 25px rgba(64, 224, 208, 0.9);
+	}
+
+	&.running {
+		animation: pulse 2s infinite;
+	}
+}
+
+.agv-label {
+	position: absolute;
+	bottom: -20px;
+	left: 50%;
+	transform: translateX(-50%);
+	font-size: 10px;
+	white-space: nowrap;
+	background: rgba(0, 0, 0, 0.7);
+	padding: 2px 6px;
+	border-radius: 3px;
+}
+
+@keyframes pulse {
+	0%, 100% {
+		box-shadow: 0 0 15px rgba(64, 224, 208, 0.6);
+	}
+	50% {
+		box-shadow: 0 0 25px rgba(64, 224, 208, 1);
+	}
+}
+
+/* 货位标记 */
+.storage-marker {
+	position: absolute;
+	width: 20px;
+	height: 20px;
+	transform: translate(-50%, -50%);
+	cursor: pointer;
+	z-index: 5;
+}
+
+.storage-icon {
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	border: 2px solid;
+	box-shadow: 0 0 10px currentColor;
+
+	&.has-goods {
+		background: #4caf50;
+		border-color: #81c784;
+	}
+
+	&.no-goods {
+		background: #f44336;
+		border-color: #e57373;
+	}
+}
+
+/* 静态设备标记 */
+.static-device-marker {
+	position: absolute;
+	cursor: pointer;
+	z-index: 8;
+	transition: all 0.3s;
+
+	&:hover {
+		transform: translate(-50%, -50%) scale(1.1) !important;
+	}
+}
+
+/* 缩放控制按钮 */
+.zoom-controls {
+	position: absolute;
+	bottom: 30px;
+	right: 30px;
+	z-index: 200;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.zoom-btn {
+	width: 50px;
+	height: 50px;
+	background: rgba(26, 35, 126, 0.3);
+	backdrop-filter: blur(10px);
+	border: 1px solid rgba(64, 224, 208, 0.3);
+	border-radius: 8px;
+	color: #40e0d0;
+	font-size: 24px;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all 0.3s;
+	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+
+	&:hover {
+		background: rgba(64, 224, 208, 0.2);
+		transform: scale(1.1);
+	}
+
+	&:active {
+		transform: scale(0.95);
+	}
+
+	&.reset {
+		font-size: 18px;
+	}
+
+	&.upload {
+		font-size: 18px;
+		cursor: pointer;
+	}
+}
+
+/* 加载提示 */
+.loading {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 1000;
+}
+
+/* 错误提示 */
+.error-message {
+	position: absolute;
+	top: 100px;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 2000;
+	max-width: 500px;
+	width: 90%;
+}
diff --git a/nl-vue/src/views/nl_agv/screen/index.vue b/nl-vue/src/views/nl_agv/screen/index.vue
new file mode 100644
index 0000000..3f991a1
--- /dev/null
+++ b/nl-vue/src/views/nl_agv/screen/index.vue
@@ -0,0 +1,644 @@
+<template>
+	<div class="agv-dashboard">
+		<!-- 顶部标题 -->
+		<div class="title-bar">
+			<h1>AGV实时监控看板</h1>
+		</div>
+
+		<!-- 错误提示 -->
+		<a-alert
+			v-if="errorMessage"
+			:message="errorMessage"
+			type="error"
+			closable
+			@close="errorMessage = ''"
+			class="error-message"
+		/>
+
+		<!-- 左侧统计面板 -->
+		<div class="stats-panel" :class="{ hidden: panelHidden }">
+			<div class="task-stats">
+				<div class="stat-item">
+					<div class="stat-icon">🕐</div>
+					<div class="stat-number">{{ stats.totalTasks.toLocaleString() }}</div>
+					<div class="stat-label">累计执行任务数</div>
+				</div>
+				<div class="stat-item">
+					<div class="stat-icon">📊</div>
+					<div class="stat-number">{{ stats.dailyTasks.toLocaleString() }}</div>
+					<div class="stat-label">日执行任务</div>
+				</div>
+			</div>
+
+			<div class="progress-section">
+				<div class="progress-chart">
+					<div class="progress-circle" :style="progressStyle">
+						<div class="progress-text">
+							<div class="progress-percent">{{ stats.completedPercent }}%</div>
+							<div class="progress-label">已完成</div>
+						</div>
+					</div>
+				</div>
+				<div class="progress-legend">
+					<div class="legend-item">
+						<div class="legend-color blue"></div>
+						<span>已完成 {{ stats.completedPercent }}%</span>
+					</div>
+					<div class="legend-item">
+						<div class="legend-color dark-blue"></div>
+						<span>执行中 {{ 100 - stats.completedPercent }}%</span>
+					</div>
+				</div>
+			</div>
+
+			<div class="agv-list">
+				<div class="agv-list-title">AGV列表</div>
+				<table class="agv-table">
+					<thead>
+						<tr>
+							<th>车号</th>
+							<th>类型</th>
+							<th>任务号</th>
+							<th>任务状态</th>
+							<th>电量</th>
+							<th>AGV状态</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr v-for="agv in agvList" :key="agv.id">
+							<td>{{ agv.id }}#</td>
+							<td>NT100</td>
+							<td>{{ agv.taskId || '无' }}</td>
+							<td>{{ getStatusText(agv.status) }}</td>
+							<td>{{ agv.battery }}%</td>
+							<td>正常</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+		</div>
+		<div class="panel-toggle" @click="togglePanel">{{ panelHidden ? '›' : '‹' }}</div>
+
+		<!-- 右侧状态看板 -->
+		<div class="detail-panel" :class="{ show: detailPanelVisible }">
+			<div class="detail-panel-header">
+				<div class="detail-panel-title">{{ detailPanelTitle }}</div>
+				<div class="detail-panel-close" @click="closeDetailPanel">×</div>
+			</div>
+			<div v-html="detailPanelContent"></div>
+		</div>
+
+		<!-- 地图容器 -->
+		<div class="map-container">
+			<div
+				ref="mapWrapper"
+				class="map-wrapper"
+				:class="{ dragging: isDragging }"
+				@mousedown="handleMapMouseDown"
+				@wheel.prevent="handleWheel"
+			>
+				<div
+					ref="mapContent"
+					class="map-content"
+					:style="mapTransformStyle"
+				>
+					<!-- 背景图片 -->
+					<img
+						ref="mapBackground"
+						:src="mapImageUrl"
+						alt="厂区背景"
+						class="map-background"
+						@load="onMapImageLoad"
+						@error="onMapImageError"
+					/>
+
+					<!-- 静态设备标记 -->
+					<div
+						v-for="device in staticDevices"
+						:key="'device-' + device.id"
+						class="static-device-marker"
+						:style="getDeviceStyle(device)"
+						@click.stop="showStaticDeviceDetail(device)"
+					>
+						<img
+							v-if="isImageIcon(device.icon)"
+							:src="getDeviceIconUrl(device.icon)"
+							:alt="device.name"
+							:style="{ width: '100%', height: '100%', objectFit: 'contain' }"
+							@error="handleIconError"
+						/>
+						<span v-else :style="{ fontSize: Math.round((device.size || 50) * 0.4) + 'px', color: '#40e0d0' }">
+							{{ device.icon || device.name || '📍' }}
+						</span>
+					</div>
+
+					<!-- AGV标记 -->
+					<div
+						v-for="agv in agvList"
+						:key="'agv-' + agv.id"
+						class="agv-marker"
+						:style="getAGVStyle(agv)"
+						@click.stop="showAGVDetail(agv)"
+					>
+						<div class="agv-icon" :class="{ running: isRunning(agv.status) }">
+							<img
+								v-if="agv.icon"
+								:src="getDeviceIconUrl(agv.icon)"
+								:alt="agv.id"
+								style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px;"
+							/>
+							<template v-else>{{ agv.id }}</template>
+						</div>
+						<span v-if="agv.icon" class="agv-label">{{ agv.id }}</span>
+					</div>
+
+					<!-- 货位标记 -->
+					<div
+						v-for="storage in storageList"
+						:key="'storage-' + storage.id"
+						class="storage-marker"
+						:style="getStorageStyle(storage)"
+						@click.stop="showStorageDetail(storage)"
+					>
+						<div class="storage-icon" :class="storage.hasGoods ? 'has-goods' : 'no-goods'"></div>
+					</div>
+				</div>
+			</div>
+
+			<!-- 缩放控制 -->
+			<div class="zoom-controls">
+				<button class="zoom-btn" @click="zoomIn">+</button>
+				<button class="zoom-btn" @click="zoomOut">−</button>
+				<button class="zoom-btn reset" @click="resetView" title="初始化地图视角">⌂</button>
+				<label class="zoom-btn upload" for="mapUpload" title="上传地图">📁</label>
+				<input
+					id="mapUpload"
+					ref="mapUpload"
+					type="file"
+					accept="image/*"
+					style="display: none"
+					@change="handleMapUpload"
+				/>
+			</div>
+		</div>
+
+		<!-- 加载提示 -->
+		<a-spin v-if="loading" size="large" class="loading" tip="加载中..." />
+	</div>
+</template>
+
+<script setup name="agvDashboard">
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
+import { message } from 'ant-design-vue'
+import mapApi from '@/api/agv/mapApi'
+
+// ==================== 配置 ====================
+const API_CONFIG = {
+	MAP_INIT: '/api/agv/map/initLayout',
+	AGV_STATUS: 'http://localhost:8081/api/agv/status',
+	POINT_STATUS: 'http://localhost:8081/api/baseData/point/status',
+	REFRESH_INTERVAL: 5000
+}
+
+// ==================== 状态管理 ====================
+const loading = ref(true)
+const errorMessage = ref('')
+const panelHidden = ref(false)
+const detailPanelVisible = ref(false)
+const detailPanelTitle = ref('详情')
+const detailPanelContent = ref('')
+
+// 地图状态
+const mapState = reactive({
+	mapId: null,
+	origin: { x: 0, y: 0 },
+	width: 0,
+	height: 0,
+	scale: 1,
+	offsetX: 0,
+	offsetY: 0,
+	isDragging: false,
+	dragStartX: 0,
+	dragStartY: 0,
+	dragStartOffsetX: 0,
+	dragStartOffsetY: 0
+})
+
+const isDragging = computed(() => mapState.isDragging)
+const mapImageUrl = ref('https://images.unsplash.com/photo-1581092160562-40aa08e78837?w=1920&h=1080&fit=crop')
+
+// 数据
+const staticDevices = ref([])
+const agvList = ref([])
+const storageList = ref([])
+const stats = reactive({
+	totalTasks: 0,
+	dailyTasks: 0,
+	completedPercent: 0
+})
+
+// DOM引用
+const mapWrapper = ref(null)
+const mapContent = ref(null)
+const mapBackground = ref(null)
+const mapUpload = ref(null)
+
+// ==================== 计算属性 ====================
+const mapTransformStyle = computed(() => ({
+	transform: `translate(${mapState.offsetX}px, ${mapState.offsetY}px) scale(${mapState.scale})`
+}))
+
+const progressStyle = computed(() => {
+	const angle = (stats.completedPercent / 100) * 360
+	return {
+		background: `conic-gradient(#40e0d0 0deg ${angle}deg, rgba(64, 224, 208, 0.3) ${angle}deg 360deg)`
+	}
+})
+
+// ==================== 工具函数 ====================
+const getDeviceIconUrl = (icon) => {
+	if (!icon) return ''
+	if (icon.startsWith('http')) return icon
+	return `http://localhost:8082/${icon}`
+}
+
+const isImageIcon = (icon) => {
+	if (!icon) return false
+	return icon.startsWith('http') || icon.startsWith('/') || icon.includes('.')
+}
+
+const handleIconError = (e) => {
+	e.target.style.display = 'none'
+}
+
+const getDeviceStyle = (device) => {
+	const actualX = mapState.origin.x + device.x
+	const actualY = mapState.origin.y + device.y
+	return {
+		position: 'absolute',
+		left: actualX + 'px',
+		top: actualY + 'px',
+		width: (device.size || 50) + 'px',
+		height: (device.size || 50) + 'px',
+		transform: `translate(-50%, -50%) rotate(${device.angle || 0}deg)`,
+		cursor: 'pointer',
+		zIndex: 8,
+		display: 'flex',
+		alignItems: 'center',
+		justifyContent: 'center'
+	}
+}
+
+const getAGVStyle = (agv) => {
+	const actualX = mapState.origin.x + agv.x
+	const actualY = mapState.origin.y + agv.y
+	return {
+		left: actualX + 'px',
+		top: actualY + 'px'
+	}
+}
+
+const getStorageStyle = (storage) => {
+	const actualX = mapState.origin.x + storage.x
+	const actualY = mapState.origin.y + storage.y
+	return {
+		left: actualX + 'px',
+		top: actualY + 'px'
+	}
+}
+
+const getStatusText = (status) => {
+	const statusMap = {
+		'running': '运行中',
+		'idle': '空闲',
+		'error': '故障',
+		'1': '运行中',
+		'0': '空闲',
+		'-1': '故障'
+	}
+	return statusMap[status] || '未知'
+}
+
+const getStatusClass = (status) => {
+	if (status === 'running' || status === '运行中' || status === 1 || status === '1') {
+		return 'running'
+	} else if (status === 'error' || status === '故障' || status === -1 || status === '-1') {
+		return 'error'
+	}
+	return 'idle'
+}
+
+const isRunning = (status) => {
+	return status === 'running' || status === '运行中' || status === 1 || status === '1'
+}
+
+// ==================== API调用 ====================
+const fetchMapInitData = async () => {
+	try {
+		console.log('开始获取地图初始化数据...')
+		const response = await mapApi.initLayout({})
+		console.log('API响应:', response)
+		
+		// 检查响应结构
+		if (response) {
+			// 如果响应直接包含 data 字段
+			if (response.data) {
+				console.log('成功获取地图数据:', response.data)
+				return response.data
+			}
+			// 如果响应本身就是数据
+			if (response.mapId || response.width || response.height) {
+				console.log('成功获取地图数据(直接返回):', response)
+				return response
+			}
+		}
+		
+		console.error('响应数据格式不正确:', response)
+		throw new Error('获取地图数据失败：响应格式不正确')
+	} catch (error) {
+		console.error('获取地图初始化数据失败:', error)
+		errorMessage.value = '获取地图数据失败: ' + error.message
+		return null
+	}
+}
+
+const fetchAGVData = async () => {
+	try {
+		const response = await fetch(API_CONFIG.AGV_STATUS)
+		if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
+		const data = await response.json()
+		return transformAGVData(data)
+	} catch (error) {
+		console.error('获取AGV数据失败:', error)
+		return []
+	}
+}
+
+const fetchStorageData = async () => {
+	try {
+		const response = await fetch(API_CONFIG.POINT_STATUS)
+		if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
+		const data = await response.json()
+		return transformStorageData(data)
+	} catch (error) {
+		console.error('获取货位数据失败:', error)
+		return []
+	}
+}
+
+const transformAGVData = (data) => {
+	if (!Array.isArray(data)) {
+		if (data && data.data && Array.isArray(data.data)) {
+			data = data.data
+		} else {
+			return []
+		}
+	}
+	return data.map(agv => ({
+		id: agv.agvId || agv.id || agv.agvCode || 'N/A',
+		x: parseFloat(agv.x || agv.positionX || agv.coordinateX || 0),
+		y: parseFloat(agv.y || agv.positionY || agv.coordinateY || 0),
+		status: agv.status || agv.workStatus || agv.agvStatus || 'idle',
+		taskId: agv.taskId || agv.currentTask || agv.taskCode || '',
+		battery: parseFloat(agv.battery || agv.batteryLevel || agv.power || 0),
+		icon: agv.icon || agv.iconUrl || agv.image || ''
+	}))
+}
+
+const transformStorageData = (data) => {
+	if (!Array.isArray(data)) {
+		if (data && data.data && Array.isArray(data.data)) {
+			data = data.data
+		} else {
+			return []
+		}
+	}
+	return data.map(storage => ({
+		id: storage.pointId || storage.id || storage.pointCode || 'N/A',
+		x: parseFloat(storage.x || storage.positionX || storage.coordinateX || 0),
+		y: parseFloat(storage.y || storage.positionY || storage.coordinateY || 0),
+		hasGoods: storage.hasGoods || storage.occupied || storage.status === 1 || false
+	}))
+}
+
+const refreshData = async () => {
+	try {
+		const [agvs, storages] = await Promise.all([fetchAGVData(), fetchStorageData()])
+		
+		agvList.value = agvs
+		storageList.value = storages
+		
+		// 计算统计数据
+		const runningCount = agvs.filter(agv => isRunning(agv.status)).length
+		const totalCount = agvs.length
+		stats.completedPercent = totalCount > 0 ? Math.round((runningCount / totalCount) * 100) : 0
+		stats.totalTasks = 345320
+		stats.dailyTasks = 345320
+	} catch (error) {
+		console.error('刷新数据失败:', error)
+	}
+}
+
+// ==================== 详情面板 ====================
+const showAGVDetail = (agv) => {
+	detailPanelTitle.value = `AGV ${agv.id} 状态`
+	const statusClass = getStatusClass(agv.status)
+	const statusText = getStatusText(agv.status)
+	
+	detailPanelContent.value = `
+		<div class="detail-card">
+			<div class="detail-card-label">车号</div>
+			<div class="detail-card-value">${agv.id}</div>
+		</div>
+		<div class="detail-card">
+			<div class="detail-card-label">类型</div>
+			<div class="detail-card-value">NT100</div>
+		</div>
+		<div class="detail-card">
+			<div class="detail-card-label">任务号</div>
+			<div class="detail-card-value">${agv.taskId || '无'}</div>
+		</div>
+		<div class="detail-card">
+			<div class="detail-card-label">运行状态</div>
+			<div class="detail-card-value">
+				<span class="status-badge ${statusClass}">${statusText}</span>
+			</div>
+		</div>
+		<div class="detail-card">
+			<div class="detail-card-label">电量</div>
+			<div class="detail-card-value">${agv.battery}%</div>
+		</div>
+		<div class="detail-card">
+			<div class="detail-card-label">位置坐标</div>
+			<div class="detail-card-value">X: ${agv.x}, Y: ${agv.y}</div>
+		</div>
+	`
+	detailPanelVisible.value = true
+}
+
+const showStorageDetail = (storage) => {
+	detailPanelTitle.value = `货位 ${storage.id} 状态`
+	detailPanelContent.value = `
+		<div class="detail-card">
+			<div class="detail-card-label">货位编号</div>
+			<div class="detail-card-value">${storage.id}</div>
+		</div>
+		<div class="detail-card">
+			<div class="detail-card-label">货位状态</div>
+			<div class="detail-card-value">
+				<span class="status-badge ${storage.hasGoods ? 'has-goods' : 'no-goods'}">
+					${storage.hasGoods ? '有货' : '无货'}
+				</span>
+			</div>
+		</div>
+		<div class="detail-card">
+			<div class="detail-card-label">位置坐标</div>
+			<div class="detail-card-value">X: ${storage.x}, Y: ${storage.y}</div>
+		</div>
+	`
+	detailPanelVisible.value = true
+}
+
+const showStaticDeviceDetail = (device) => {
+	detailPanelTitle.value = `${device.name} 详情`
+	detailPanelContent.value = `
+		<div class="detail-card">
+			<div class="detail-card-label">设备编号</div>
+			<div class="detail-card-value">${device.code || device.id}</div>
+		</div>
+		<div class="detail-card">
+			<div class="detail-card-label">设备名称</div>
+			<div class="detail-card-value">${device.name}</div>
+		</div>
+		<div class="detail-card">
+			<div class="detail-card-label">设备类型</div>
+			<div class="detail-card-value">${device.type}</div>
+		</div>
+		<div class="detail-card">
+			<div class="detail-card-label">位置坐标</div>
+			<div class="detail-card-value">X: ${device.x}, Y: ${device.y}</div>
+		</div>
+	`
+	detailPanelVisible.value = true
+}
+
+const closeDetailPanel = () => {
+	detailPanelVisible.value = false
+}
+
+// ==================== 地图交互 ====================
+const handleMapMouseDown = (e) => {
+	if (e.target.closest('.agv-marker') || e.target.closest('.storage-marker') || e.target.closest('.static-device-marker')) {
+		return
+	}
+	mapState.isDragging = true
+	mapState.dragStartX = e.clientX
+	mapState.dragStartY = e.clientY
+	mapState.dragStartOffsetX = mapState.offsetX
+	mapState.dragStartOffsetY = mapState.offsetY
+	
+	document.addEventListener('mousemove', handleMouseMove)
+	document.addEventListener('mouseup', handleMouseUp)
+}
+
+const handleMouseMove = (e) => {
+	if (mapState.isDragging) {
+		const deltaX = e.clientX - mapState.dragStartX
+		const deltaY = e.clientY - mapState.dragStartY
+		mapState.offsetX = mapState.dragStartOffsetX + deltaX
+		mapState.offsetY = mapState.dragStartOffsetY + deltaY
+	}
+}
+
+const handleMouseUp = () => {
+	mapState.isDragging = false
+	document.removeEventListener('mousemove', handleMouseMove)
+	document.removeEventListener('mouseup', handleMouseUp)
+}
+
+const handleWheel = (e) => {
+	const delta = e.deltaY > 0 ? 0.9 : 1.1
+	mapState.scale = Math.max(0.5, Math.min(3, mapState.scale * delta))
+}
+
+const zoomIn = () => {
+	mapState.scale = Math.min(mapState.scale * 1.2, 3)
+}
+
+const zoomOut = () => {
+	mapState.scale = Math.max(mapState.scale / 1.2, 0.5)
+}
+
+const resetView = () => {
+	mapState.scale = 1
+	mapState.offsetX = 0
+	mapState.offsetY = 0
+}
+
+const handleMapUpload = (e) => {
+	const file = e.target.files[0]
+	if (file && file.type.startsWith('image/')) {
+		const reader = new FileReader()
+		reader.onload = (event) => {
+			mapImageUrl.value = event.target.result
+			resetView()
+		}
+		reader.readAsDataURL(file)
+	} else {
+		message.error('请上传图片文件！')
+	}
+}
+
+const onMapImageLoad = () => {
+	console.log('地图背景加载成功')
+}
+
+const onMapImageError = () => {
+	console.error('地图背景加载失败')
+	errorMessage.value = '地图背景加载失败'
+}
+
+const togglePanel = () => {
+	panelHidden.value = !panelHidden.value
+}
+
+// ==================== 生命周期 ====================
+let refreshTimer = null
+
+onMounted(async () => {
+	// 加载地图初始化数据
+	const mapData = await fetchMapInitData()
+	if (mapData) {
+		mapState.mapId = mapData.mapId
+		mapState.origin = mapData.origin || { x: 0, y: 0 }
+		mapState.width = mapData.width
+		mapState.height = mapData.height
+		staticDevices.value = mapData.devices || []
+		
+		if (mapData.url) {
+			mapImageUrl.value = mapData.url.startsWith('http') 
+				? mapData.url 
+				: `http://localhost:8082/${mapData.url}`
+		}
+	}
+	
+	// 加载动态数据
+	await refreshData()
+	loading.value = false
+	
+	// 定时刷新
+	refreshTimer = setInterval(refreshData, API_CONFIG.REFRESH_INTERVAL)
+})
+
+onUnmounted(() => {
+	if (refreshTimer) {
+		clearInterval(refreshTimer)
+	}
+	document.removeEventListener('mousemove', handleMouseMove)
+	document.removeEventListener('mouseup', handleMouseUp)
+})
+</script>
+
+<style scoped lang="less">
+@import './dashboard-styles.less';
+</style>