From 69cd7bf47676027e3a2e39142004889a5d05602b Mon Sep 17 00:00:00 2001
From: zhangzq <zhangzhiqiang@yoycol.com>
Date: Tue, 24 Feb 2026 15:27:56 +0800
Subject: [PATCH] =?UTF-8?q?add:=E8=AE=BE=E5=A4=87=E5=9F=BA=E7=A1=80?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../device/controller/DeviceController.java   |  59 ----
 .../device/service/dto/DeviceInfo.java        |  43 ---
 .../controller/BaseDataDeviceController.java  | 102 ++++++
 .../module/device/entity/BaseDataDevice.java  |  65 ++++
 .../device/mapper/BaseDataDeviceMapper.java   |  13 +
 .../device/service/BaseDataDeviceService.java |  11 +
 .../impl/BaseDataDeviceServiceImpl.java       |  15 +
 .../point/PointStatusController.java          |   4 +-
 .../point/dto/PointStatus.java                |   2 +-
 .../main/java/org/nl/common/util/MapOf.java   |  20 --
 .../modular/file/util/DevFileLocalUtil.java   |   4 +-
 nl-vue/src/api/baseData/deviceApi.js          |  25 ++
 nl-vue/src/views/nl_base_data/device/form.vue | 315 ++++++++++++++++++
 .../src/views/nl_base_data/device/index.vue   | 223 +++++++++++++
 nl-web-app/src/main/resources/application.yml |   6 +-
 15 files changed, 778 insertions(+), 129 deletions(-)
 delete mode 100644 nl-base-data/src/main/java/org/nl/modular/device/controller/DeviceController.java
 delete mode 100644 nl-base-data/src/main/java/org/nl/modular/device/service/dto/DeviceInfo.java
 create mode 100644 nl-base-data/src/main/java/org/nl/module/device/controller/BaseDataDeviceController.java
 create mode 100644 nl-base-data/src/main/java/org/nl/module/device/entity/BaseDataDevice.java
 create mode 100644 nl-base-data/src/main/java/org/nl/module/device/mapper/BaseDataDeviceMapper.java
 create mode 100644 nl-base-data/src/main/java/org/nl/module/device/service/BaseDataDeviceService.java
 create mode 100644 nl-base-data/src/main/java/org/nl/module/device/service/impl/BaseDataDeviceServiceImpl.java
 rename nl-base-data/src/main/java/org/nl/{modular => module}/point/PointStatusController.java (96%)
 rename nl-base-data/src/main/java/org/nl/{modular => module}/point/dto/PointStatus.java (93%)
 create mode 100644 nl-vue/src/api/baseData/deviceApi.js
 create mode 100644 nl-vue/src/views/nl_base_data/device/form.vue
 create mode 100644 nl-vue/src/views/nl_base_data/device/index.vue

diff --git a/nl-base-data/src/main/java/org/nl/modular/device/controller/DeviceController.java b/nl-base-data/src/main/java/org/nl/modular/device/controller/DeviceController.java
deleted file mode 100644
index 3b8e861..0000000
--- a/nl-base-data/src/main/java/org/nl/modular/device/controller/DeviceController.java
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * Copyright [2022] [https://www.xiaonuo.vip]
- *
- * Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
- *
- * 1.请不要删除和修改根目录下的LICENSE文件。
- * 2.请不要删除和修改Snowy源码头部的版权声明。
- * 3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
- * 4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
- * 5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
- * 6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
- */
-package org.nl.modular.device.controller;
-
-
-import cn.dev33.satoken.annotation.SaIgnore;
-import com.alibaba.fastjson.JSONObject;
-import io.swagger.v3.oas.annotations.tags.Tag;
-import org.nl.common.pojo.CommonResult;
-import org.nl.modular.device.service.dto.DeviceInfo;
-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 java.util.ArrayList;
-import java.util.List;
-
-@Tag(name = "设备模块")
-@RestController()
-@RequestMapping("/api/device")
-@Validated
-@SaIgnore
-public class DeviceController {
-    static {
-        System.out.println("初始化AGV模块------------");
-    }
-    @GetMapping("list")
-    public CommonResult<List> status() {
-        List<DeviceInfo> list = new ArrayList<>();
-        JSONObject object = new JSONObject();
-        object.put("action","action");
-        object.put("signal","signal");
-        object.put("power","power");
-        for (int i = 0; i < 20; i++) {
-            DeviceInfo build = DeviceInfo.builder()
-                    .name("设备1"+i)
-                    .code(i + "sdfsdf")
-                    .id(String.valueOf(i))
-                    .icon("/Users/mima0000/Desktop/car.png")
-                    .description("设备介绍")
-                    .editParam(object)
-                    .type(i%2==1?"货架":"专机")
-                    .build();
-            list.add(build);
-        }
-        return CommonResult.data(list);
-    }
-}
diff --git a/nl-base-data/src/main/java/org/nl/modular/device/service/dto/DeviceInfo.java b/nl-base-data/src/main/java/org/nl/modular/device/service/dto/DeviceInfo.java
deleted file mode 100644
index a5a969b..0000000
--- a/nl-base-data/src/main/java/org/nl/modular/device/service/dto/DeviceInfo.java
+++ /dev/null
@@ -1,43 +0,0 @@
-package org.nl.modular.device.service.dto;
-
-import com.alibaba.fastjson.JSONObject;
-import lombok.AllArgsConstructor;
-import lombok.Builder;
-import lombok.Data;
-import lombok.NoArgsConstructor;
-
-@Data
-@Builder
-@AllArgsConstructor
-@NoArgsConstructor
-public class DeviceInfo {
-    /**
-     * 设备Id
-     */
-    private String id;
-    /**
-     * 设备Id
-     */
-    private String code;
-    /**
-     * 车辆类型
-     */
-    private String name;
-    /**
-     * 设备描述
-     */
-    private String description;
-    /**
-     * 设备类型
-     */
-    private String type;
-    /**
-     * 设备编辑时存储信息
-     */
-    private JSONObject editParam;
-    /**
-     * 设备图标
-     */
-    private String icon="/Users/mima0000/Desktop/car.png";
-
-}
diff --git a/nl-base-data/src/main/java/org/nl/module/device/controller/BaseDataDeviceController.java b/nl-base-data/src/main/java/org/nl/module/device/controller/BaseDataDeviceController.java
new file mode 100644
index 0000000..9ca98ec
--- /dev/null
+++ b/nl-base-data/src/main/java/org/nl/module/device/controller/BaseDataDeviceController.java
@@ -0,0 +1,102 @@
+/*
+ * Copyright [2022] [https://www.xiaonuo.vip]
+ *
+ * Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *
+ * 1.请不要删除和修改根目录下的LICENSE文件。
+ * 2.请不要删除和修改Snowy源码头部的版权声明。
+ * 3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ * 4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ * 5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ * 6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+package org.nl.module.device.controller;
+
+import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import org.apache.commons.lang3.StringUtils;
+import org.nl.common.pojo.CommonResult;
+import org.nl.module.device.entity.BaseDataDevice;
+import org.nl.module.device.service.BaseDataDeviceService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.validation.annotation.Validated;
+import org.springframework.web.bind.annotation.*;
+
+/**
+ * 设备信息表Controller
+ */
+@Tag(name = "设备信息管理")
+@RestController
+@RequestMapping("/api/baseData/device")
+@Validated
+public class BaseDataDeviceController {
+
+    @Autowired
+    private BaseDataDeviceService baseDataDeviceService;
+
+    /**
+     * 获取设备列表
+     */
+    @Operation(summary = "获取设备列表")
+    @GetMapping("/list")
+    public CommonResult list(@RequestParam(required = false) String searchKey,
+                             @RequestParam(required = false) String region,
+                             @RequestParam(defaultValue = "1") Integer current,
+                             @RequestParam(defaultValue = "10") Integer size) {
+        LambdaQueryWrapper<BaseDataDevice> queryWrapper = new LambdaQueryWrapper<>();
+        
+        // 关键词搜索（设备名称或编码）
+        if (StringUtils.isNotBlank(searchKey)) {
+            queryWrapper.and(wrapper -> wrapper
+                .like(BaseDataDevice::getName, searchKey)
+                .or()
+                .like(BaseDataDevice::getCode, searchKey)
+            );
+        }
+        
+        // 区域搜索
+        if (StringUtils.isNotBlank(region)) {
+            queryWrapper.like(BaseDataDevice::getRegion, region);
+        }
+        
+        // 按创建时间倒序
+        queryWrapper.orderByDesc(BaseDataDevice::getCreateTime);
+        
+        Page<BaseDataDevice> page = new Page<>(current, size);
+        Page<BaseDataDevice> result = baseDataDeviceService.page(page, queryWrapper);
+        
+        return CommonResult.data(result);
+    }
+
+    /**
+     * 新增设备信息
+     */
+    @Operation(summary = "新增设备信息")
+    @PostMapping("/add")
+    public CommonResult add(@RequestBody BaseDataDevice device) {
+        baseDataDeviceService.save(device);
+        return CommonResult.ok();
+    }
+
+    /**
+     * 修改设备信息
+     */
+    @Operation(summary = "修改设备信息")
+    @PostMapping("/edit")
+    public CommonResult edit(@RequestBody BaseDataDevice device) {
+        baseDataDeviceService.updateById(device);
+        return CommonResult.ok();
+    }
+
+    /**
+     * 删除设备信息
+     */
+    @Operation(summary = "删除设备信息")
+    @PostMapping("/delete")
+    public CommonResult delete(@RequestParam Integer id) {
+        baseDataDeviceService.removeById(id);
+        return CommonResult.ok();
+    }
+}
diff --git a/nl-base-data/src/main/java/org/nl/module/device/entity/BaseDataDevice.java b/nl-base-data/src/main/java/org/nl/module/device/entity/BaseDataDevice.java
new file mode 100644
index 0000000..f63e025
--- /dev/null
+++ b/nl-base-data/src/main/java/org/nl/module/device/entity/BaseDataDevice.java
@@ -0,0 +1,65 @@
+package org.nl.module.device.entity;
+
+import com.baomidou.mybatisplus.annotation.IdType;
+import com.baomidou.mybatisplus.annotation.TableId;
+import com.baomidou.mybatisplus.annotation.TableName;
+import io.swagger.v3.oas.annotations.media.Schema;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.io.Serializable;
+import java.util.Date;
+
+/**
+ * 设备信息表实体类
+ */
+@Data
+@TableName("base_data_device")
+@Builder
+@AllArgsConstructor
+@NoArgsConstructor
+@Schema(description = "设备信息表")
+public class BaseDataDevice implements Serializable {
+
+    @TableId(type = IdType.AUTO)
+    @Schema(description = "主键ID")
+    private Integer id;
+
+    @Schema(description = "编码")
+    private String code;
+
+    @Schema(description = "设备名称")
+    private String name;
+
+    @Schema(description = "所属区域")
+    private String region;
+
+    @Schema(description = "x坐标")
+    private Integer x;
+
+    @Schema(description = "y坐标")
+    private Integer y;
+
+    @Schema(description = "角度")
+    private Integer angle;
+
+    @Schema(description = "放大比例")
+    private Integer size;
+
+    @Schema(description = "图标地址")
+    private String icon;
+
+    @Schema(description = "创建时间")
+    private Date createTime;
+
+    @Schema(description = "创建用户")
+    private String createName;
+
+    @Schema(description = "修改时间")
+    private Date updateTime;
+
+    @Schema(description = "修改用户")
+    private String updateName;
+}
diff --git a/nl-base-data/src/main/java/org/nl/module/device/mapper/BaseDataDeviceMapper.java b/nl-base-data/src/main/java/org/nl/module/device/mapper/BaseDataDeviceMapper.java
new file mode 100644
index 0000000..13e96ca
--- /dev/null
+++ b/nl-base-data/src/main/java/org/nl/module/device/mapper/BaseDataDeviceMapper.java
@@ -0,0 +1,13 @@
+package org.nl.module.device.mapper;
+
+import com.baomidou.mybatisplus.core.mapper.BaseMapper;
+import org.apache.ibatis.annotations.Mapper;
+import org.nl.module.device.entity.BaseDataDevice;
+
+/**
+ * 设备信息表Mapper
+ */
+@Mapper
+public interface BaseDataDeviceMapper extends BaseMapper<BaseDataDevice> {
+
+}
diff --git a/nl-base-data/src/main/java/org/nl/module/device/service/BaseDataDeviceService.java b/nl-base-data/src/main/java/org/nl/module/device/service/BaseDataDeviceService.java
new file mode 100644
index 0000000..1565d8b
--- /dev/null
+++ b/nl-base-data/src/main/java/org/nl/module/device/service/BaseDataDeviceService.java
@@ -0,0 +1,11 @@
+package org.nl.module.device.service;
+
+import com.baomidou.mybatisplus.extension.service.IService;
+import org.nl.module.device.entity.BaseDataDevice;
+
+/**
+ * 设备信息表Service接口
+ */
+public interface BaseDataDeviceService extends IService<BaseDataDevice> {
+
+}
diff --git a/nl-base-data/src/main/java/org/nl/module/device/service/impl/BaseDataDeviceServiceImpl.java b/nl-base-data/src/main/java/org/nl/module/device/service/impl/BaseDataDeviceServiceImpl.java
new file mode 100644
index 0000000..79e4286
--- /dev/null
+++ b/nl-base-data/src/main/java/org/nl/module/device/service/impl/BaseDataDeviceServiceImpl.java
@@ -0,0 +1,15 @@
+package org.nl.module.device.service.impl;
+
+import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
+import org.nl.module.device.entity.BaseDataDevice;
+import org.nl.module.device.mapper.BaseDataDeviceMapper;
+import org.nl.module.device.service.BaseDataDeviceService;
+import org.springframework.stereotype.Service;
+
+/**
+ * 设备信息表Service实现类
+ */
+@Service
+public class BaseDataDeviceServiceImpl extends ServiceImpl<BaseDataDeviceMapper, BaseDataDevice> implements BaseDataDeviceService {
+
+}
diff --git a/nl-base-data/src/main/java/org/nl/modular/point/PointStatusController.java b/nl-base-data/src/main/java/org/nl/module/point/PointStatusController.java
similarity index 96%
rename from nl-base-data/src/main/java/org/nl/modular/point/PointStatusController.java
rename to nl-base-data/src/main/java/org/nl/module/point/PointStatusController.java
index 5420673..bdfcb89 100644
--- a/nl-base-data/src/main/java/org/nl/modular/point/PointStatusController.java
+++ b/nl-base-data/src/main/java/org/nl/module/point/PointStatusController.java
@@ -10,13 +10,13 @@
  * 5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
  * 6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
  */
-package org.nl.modular.point;
+package org.nl.module.point;
 
 
 import cn.dev33.satoken.annotation.SaIgnore;
 import io.swagger.v3.oas.annotations.tags.Tag;
 import org.nl.common.pojo.CommonResult;
-import org.nl.modular.point.dto.PointStatus;
+import org.nl.module.point.dto.PointStatus;
 import org.springframework.validation.annotation.Validated;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
diff --git a/nl-base-data/src/main/java/org/nl/modular/point/dto/PointStatus.java b/nl-base-data/src/main/java/org/nl/module/point/dto/PointStatus.java
similarity index 93%
rename from nl-base-data/src/main/java/org/nl/modular/point/dto/PointStatus.java
rename to nl-base-data/src/main/java/org/nl/module/point/dto/PointStatus.java
index 6a72d6f..9fbfddc 100644
--- a/nl-base-data/src/main/java/org/nl/modular/point/dto/PointStatus.java
+++ b/nl-base-data/src/main/java/org/nl/module/point/dto/PointStatus.java
@@ -1,4 +1,4 @@
-package org.nl.modular.point.dto;
+package org.nl.module.point.dto;
 
 import lombok.AllArgsConstructor;
 import lombok.Builder;
diff --git a/nl-common/src/main/java/org/nl/common/util/MapOf.java b/nl-common/src/main/java/org/nl/common/util/MapOf.java
index 06b86b1..e69de29 100644
--- a/nl-common/src/main/java/org/nl/common/util/MapOf.java
+++ b/nl-common/src/main/java/org/nl/common/util/MapOf.java
@@ -1,20 +0,0 @@
-package org.nl.common.util;
-
-
-import java.io.Serializable;
-import java.util.HashMap;
-
-/*
- * @author ZZQ
- * @Date 2022/11/29 2:55 下午
- */
-public class MapOf implements Serializable {
-
-    public static <K> HashMap of(K... key) {
-        HashMap map = new HashMap<>();
-        for (int i = 0; i < (key.length & ~1); i = i + 2) {
-            map.put(key[i], key[i + 1]);
-        }
-        return map;
-    }
-}
diff --git a/nl-plugin/nl-plugin-dev/src/main/java/org/nl/dev/modular/file/util/DevFileLocalUtil.java b/nl-plugin/nl-plugin-dev/src/main/java/org/nl/dev/modular/file/util/DevFileLocalUtil.java
index abf5b1f..294a62a 100644
--- a/nl-plugin/nl-plugin-dev/src/main/java/org/nl/dev/modular/file/util/DevFileLocalUtil.java
+++ b/nl-plugin/nl-plugin-dev/src/main/java/org/nl/dev/modular/file/util/DevFileLocalUtil.java
@@ -214,7 +214,9 @@ public class DevFileLocalUtil {
      */
     public static void storageFile(String bucketName, String key, InputStream inputStream) {
         initClient();
-        FileUtil.writeFromStream(inputStream, getUploadFileFolder() + FileUtil.FILE_SEPARATOR + bucketName + FileUtil.FILE_SEPARATOR + key);
+        String path = getUploadFileFolder() + FileUtil.FILE_SEPARATOR + bucketName + FileUtil.FILE_SEPARATOR + key;
+        System.out.println("=--filepath--="+path);
+        FileUtil.writeFromStream(inputStream, path);
     }
 
     /**
diff --git a/nl-vue/src/api/baseData/deviceApi.js b/nl-vue/src/api/baseData/deviceApi.js
new file mode 100644
index 0000000..628f7a7
--- /dev/null
+++ b/nl-vue/src/api/baseData/deviceApi.js
@@ -0,0 +1,25 @@
+/**
+ * 设备管理API
+ */
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/api/baseData/device/` + url, ...arg)
+
+export default {
+	// 获取设备列表
+	list(data) {
+		return request('list', data, 'get')
+	},
+	// 新增设备信息
+	add(data) {
+		return request('add', data)
+	},
+	// 修改设备信息
+	edit(data) {
+		return request('edit', data)
+	},
+	// 删除设备信息
+	delete(data) {
+		return request('delete', data, 'post')
+	}
+}
diff --git a/nl-vue/src/views/nl_base_data/device/form.vue b/nl-vue/src/views/nl_base_data/device/form.vue
new file mode 100644
index 0000000..724677c
--- /dev/null
+++ b/nl-vue/src/views/nl_base_data/device/form.vue
@@ -0,0 +1,315 @@
+<template>
+	<xn-form-container
+		:title="formData.id ? '编辑设备信息' : '新增设备信息'"
+		:width="900"
+		:visible="visible"
+		:destroy-on-close="true"
+		@close="onClose"
+	>
+		<div class="form-content">
+			<!-- 左侧：图片预览区域 -->
+			<div class="image-preview-section" v-if="formData.id && 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="device-image" />
+					</a-spin>
+				</div>
+			</div>
+
+			<!-- 右侧：表单区域 -->
+			<div class="form-section" :class="{ 'full-width': !formData.id || !imagePreviewUrl }">
+				<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
+					<a-form-item label="设备编码：" name="code">
+						<a-input v-model:value="formData.code" placeholder="请输入设备编码" allow-clear />
+					</a-form-item>
+					<a-form-item label="设备名称：" name="name">
+						<a-input v-model:value="formData.name" placeholder="请输入设备名称" allow-clear />
+					</a-form-item>
+					<a-form-item label="所属区域：" name="region">
+						<a-input v-model:value="formData.region" placeholder="请输入所属区域" allow-clear />
+					</a-form-item>
+					<a-form-item label="设备图片：" name="icon">
+						<a-upload
+							v-model:file-list="fileList"
+							name="file"
+							list-type="picture-card"
+							class="device-uploader"
+							:show-upload-list="true"
+							:before-upload="beforeUpload"
+							:custom-request="handleUpload"
+							@remove="handleRemove"
+							@preview="handlePreview"
+							:max-count="1"
+						>
+							<div v-if="fileList.length < 1">
+								<plus-outlined />
+								<div style="margin-top: 8px">上传图片</div>
+							</div>
+						</a-upload>
+						<div class="upload-tip">支持jpg、png格式，建议尺寸200x200像素</div>
+					</a-form-item>
+				</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>
+		</template>
+	</xn-form-container>
+</template>
+
+<script setup name="nlBaseDataDeviceForm">
+	import { required } from '@/utils/formRules'
+	import deviceApi from '@/api/baseData/deviceApi'
+	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) => {
+				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: 'device-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) {
+			formData.value = Object.assign({}, record)
+			// 如果有图片ID，加载图片并设置文件列表
+			if (record.icon) {
+				loadImageById(record.icon, true)
+			}
+		}
+	}
+
+	// 关闭抽屉
+	const onClose = () => {
+		formRef.value.resetFields()
+		fileList.value = []
+		// 释放blob URL
+		if (imagePreviewUrl.value) {
+			URL.revokeObjectURL(imagePreviewUrl.value)
+			imagePreviewUrl.value = ''
+		}
+		visible.value = false
+	}
+
+	// 默认要校验的
+	const formRules = {
+		name: [required('请输入设备名称')],
+		region: [required('请输入所属区域')],
+		x: [required('请输入X坐标')],
+		y: [required('请输入Y坐标')],
+		angle: [required('请输入角度')],
+		size: [required('请输入放大比例')],
+		icon: [required('请上传设备图片')]
+	}
+
+	// 上传前校验
+	const beforeUpload = (file) => {
+		const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
+		if (!isJpgOrPng) {
+			message.error('只能上传 JPG/PNG 格式的图片!')
+			return false
+		}
+		const isLt5M = file.size / 1024 / 1024 < 5
+		if (!isLt5M) {
+			message.error('图片大小不能超过 5MB!')
+			return false
+		}
+		return true
+	}
+
+	// 自定义上传
+	const handleUpload = ({ file, onSuccess, onError }) => {
+		const uploadFormData = new FormData()
+		uploadFormData.append('file', file)
+
+		fileApi
+			.fileUploadDynamicReturnId(uploadFormData)
+			.then((res) => {
+				if (res) {
+					// 保存文件ID到表单数据
+					const fileId = res.id || res
+					formData.value.icon = fileId
+					message.success('上传成功')
+
+					// 加载新上传的图片预览
+					loadImageById(fileId)
+
+					onSuccess(res)
+				} else {
+					message.error('上传失败')
+					onError(new Error('上传失败'))
+				}
+			})
+			.catch((error) => {
+				message.error('上传失败: ' + error.message)
+				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
+			.validate()
+			.then(() => {
+				submitLoading.value = true
+				const apiMethod = formData.value.id ? deviceApi.edit : deviceApi.add
+				apiMethod(formData.value)
+					.then(() => {
+						message.success('保存成功')
+						onClose()
+						emit('successful')
+					})
+					.finally(() => {
+						submitLoading.value = false
+					})
+			})
+			.catch(() => {})
+	}
+
+	// 调用这个函数将子组件的一些数据和方法暴露出去
+	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;
+
+			.device-image {
+				max-width: 100%;
+				max-height: 400px;
+				object-fit: contain;
+			}
+		}
+	}
+
+	.form-section {
+		flex: 1;
+		min-width: 0;
+
+		&.full-width {
+			flex: 1 1 100%;
+		}
+	}
+
+	.device-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;
+		margin-top: 8px;
+	}
+</style>
diff --git a/nl-vue/src/views/nl_base_data/device/index.vue b/nl-vue/src/views/nl_base_data/device/index.vue
new file mode 100644
index 0000000..a6f3332
--- /dev/null
+++ b/nl-vue/src/views/nl_base_data/device/index.vue
@@ -0,0 +1,223 @@
+<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="请输入设备名称或编码" />
+					</a-form-item>
+				</a-col>
+				<a-col :span="6">
+					<a-form-item label="所属区域" name="region">
+						<a-input v-model:value="searchFormState.region" 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"
+			:row-key="(record) => record.id"
+			: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="deleteBatchDevice"
+					/>
+				</a-space>
+			</template>
+			<template #bodyCell="{ column, record }">
+				<template v-if="column.dataIndex === 'code'">
+					<span>{{ record.code }}</span>
+				</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="formRef.onOpen(record)">编辑</a>
+						<a-divider type="vertical" />
+						<a-popconfirm title="确定要删除此设备吗？" @confirm="deleteDevice(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)" />
+</template>
+
+<script setup name="nlBaseDataDevice">
+	import Form from './form.vue'
+	import deviceApi from '@/api/baseData/deviceApi'
+	import fileApi from '@/api/dev/fileApi'
+
+	const searchFormState = ref({})
+	const searchFormRef = ref()
+	const tableRef = ref()
+	const formRef = ref()
+	const toolConfig = { refresh: true, height: true, columnSetting: false, striped: false }
+
+	// 存储图片blob URL的映射
+	const imageUrlMap = ref(new Map())
+
+	const columns = [
+		{
+			title: '设备编码',
+			dataIndex: 'code'
+		},
+		{
+			title: '设备名称',
+			dataIndex: 'name'
+		},
+		{
+			title: '所属区域',
+			dataIndex: 'region'
+		},
+		{
+			title: '设备图片',
+			dataIndex: 'icon'
+		},
+		{
+			title: 'X坐标',
+			dataIndex: 'x'
+		},
+		{
+			title: 'Y坐标',
+			dataIndex: 'y'
+		},
+		{
+			title: '角度',
+			dataIndex: 'angle'
+		},
+		{
+			title: '放大比例',
+			dataIndex: 'size'
+		},
+		{
+			title: '操作',
+			dataIndex: 'action',
+			align: 'center',
+			width: '150px'
+		}
+	]
+
+	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) => {
+				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 deviceApi.list(Object.assign(parameter, searchFormState.value)).then((res) => {
+			console.log('API返回的原始数据:', res)
+			// 加载所有图片
+			if (res.records && res.records.length > 0) {
+				res.records.forEach((item) => {
+					if (item.icon) {
+						loadImageById(item.icon)
+					}
+				})
+			}
+			// 转换为表格需要的格式（s-table 需要 rows 字段）
+			const result = {
+				rows: res.records || [],
+				total: res.total || 0,
+				size: res.size || 10,
+				current: res.current || 1
+			}
+			console.log('转换后的数据:', result)
+			return result
+		})
+	}
+
+	// 重置
+	const reset = () => {
+		searchFormRef.value.resetFields()
+		tableRef.value.refresh(true)
+	}
+
+	// 删除
+	const deleteDevice = (record) => {
+		deviceApi.delete({ id: record.id }).then(() => {
+			tableRef.value.refresh(true)
+		})
+	}
+
+	// 批量删除
+	const deleteBatchDevice = (params) => {
+		const ids = params.map((item) => item.id)
+		Promise.all(ids.map((id) => deviceApi.delete({ id }))).then(() => {
+			tableRef.value.clearRefreshSelected()
+		})
+	}
+
+	// 组件卸载时清理blob URL
+	onUnmounted(() => {
+		imageUrlMap.value.forEach((url) => {
+			URL.revokeObjectURL(url)
+		})
+		imageUrlMap.value.clear()
+	})
+</script>
diff --git a/nl-web-app/src/main/resources/application.yml b/nl-web-app/src/main/resources/application.yml
index 775e295..bb82c0d 100644
--- a/nl-web-app/src/main/resources/application.yml
+++ b/nl-web-app/src/main/resources/application.yml
@@ -1,5 +1,5 @@
 server:
-  port: 82
+  port: 8081
 spring:
   main:
     allow-circular-references: true
@@ -12,9 +12,9 @@ spring:
       datasource:
         master:
           driver-class-name: com.mysql.cj.jdbc.Driver
-          url: jdbc:mysql://localhost:3306/acs3.0?useUnicode=true&characterEncoding=utf-8&useSSL=false&allowPublicKeyRetrieval=true&nullCatalogMeansCurrent=true&useInformationSchema=true&rewriteBatchedStatements=true
+          url: jdbc:mysql://192.168.81.251:3306/acs3.0?useUnicode=true&characterEncoding=utf-8&useSSL=false&allowPublicKeyRetrieval=true&nullCatalogMeansCurrent=true&useInformationSchema=true&rewriteBatchedStatements=true
           username: root
-          password: "123456"
+          password: "P@ssw0rd."
       strict: true
       public-key: MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAMWiTVtdXFVrgFHDDKELZM0SywkWY3KjugN90eY5Sogon1j8Y0ClPF7nx3FuE7pAeBKiv7ChIS0vvx/59WUpKmUCAwEAAQ==
       druid: