From 1dff9e79f4dc6f2427f8c923bb0e48e203e7ad55 Mon Sep 17 00:00:00 2001
From: Lxq <19852720163@163.com>
Date: Tue, 30 Dec 2025 10:51:47 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=B2=9B=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86+=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 rc_autoplc_front/src/api/system/user-role.ts  |    8 +-
 rc_autoplc_front/src/api/tb/devinfo.ts        |   47 +
 .../src/api/{business => tb}/islandinfo.ts    |    0
 rc_autoplc_front/src/router/index.ts          |   10 +
 rc_autoplc_front/src/views/Layout.vue         |   16 +-
 rc_autoplc_front/src/views/devinfo/index.vue  |  686 +++++++++++
 .../src/views/islandInfo/index.vue            | 1091 +++++++++++++++++
 7 files changed, 1853 insertions(+), 5 deletions(-)
 create mode 100644 rc_autoplc_front/src/api/tb/devinfo.ts
 rename rc_autoplc_front/src/api/{business => tb}/islandinfo.ts (100%)
 create mode 100644 rc_autoplc_front/src/views/devinfo/index.vue
 create mode 100644 rc_autoplc_front/src/views/islandInfo/index.vue

diff --git a/rc_autoplc_front/src/api/system/user-role.ts b/rc_autoplc_front/src/api/system/user-role.ts
index 9d65c25..f202c31 100644
--- a/rc_autoplc_front/src/api/system/user-role.ts
+++ b/rc_autoplc_front/src/api/system/user-role.ts
@@ -37,7 +37,7 @@ export function userRoleById(id: string | number) {
 // 根据角色ID查询关联用户（先封装不调用）
 export function userRoleByRoleId(roleId: string | number) {
   return request({
-    url: `/user-role/getByRoleId/${roleId}`,
+    url: `/user-role/role/${roleId}`,
     method: 'get',
   })
 }
@@ -45,7 +45,7 @@ export function userRoleByRoleId(roleId: string | number) {
 // 根据角色ID删除所有关联（先封装不调用）
 export function userRoleDelByRoleId(roleId: string | number) {
   return request({
-    url: `/user-role/delByRoleId/${roleId}`,
+    url: `/user-role/role/${roleId}`,
     method: 'delete',
   })
 }
@@ -53,7 +53,7 @@ export function userRoleDelByRoleId(roleId: string | number) {
 // 根据用户ID查询关联角色（先封装不调用）
 export function userRoleByUserId(userId: string | number) {
   return request({
-    url: `/user-role/getByUserId/${userId}`,
+    url: `/user-role/user/${userId}`,
     method: 'get',
   })
 }
@@ -61,7 +61,7 @@ export function userRoleByUserId(userId: string | number) {
 // 根据用户ID删除所有关联（先封装不调用）
 export function userRoleDelByUserId(userId: string | number) {
   return request({
-    url: `/user-role/delByUserId/${userId}`,
+    url: `/user-role/user/${userId}`,
     method: 'delete',
   })
 }
diff --git a/rc_autoplc_front/src/api/tb/devinfo.ts b/rc_autoplc_front/src/api/tb/devinfo.ts
new file mode 100644
index 0000000..dd56c4b
--- /dev/null
+++ b/rc_autoplc_front/src/api/tb/devinfo.ts
@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+
+export function devInfoadd(data: any) {
+  return request({
+    url: '/devInfo/add',
+    method: 'post',
+    data,
+  })
+}
+
+export function devInfodel(id: string | number) {
+  return request({
+    url: `/devInfo/del/${id}`,
+    method: 'delete',
+  })
+}
+
+export function devInfoupd(data: any) {
+  return request({
+    url: '/devInfo/update',
+    method: 'put',
+    data,
+  })
+}
+
+export function devInfolist(data: any) {
+  return request({
+    url: '/devInfo/listPage',
+    method: 'get',
+    params: data,
+  })
+}
+
+export function devInfobyid(id: string | number) {
+  return request({
+    url: `/devInfo/getById/${id}`,
+    method: 'get',
+  })
+}
+
+export function devselect(data: any) {
+  return request({
+    url: '/devInfo/all',
+    method: 'get',
+    params: data,
+  })
+}
\ No newline at end of file
diff --git a/rc_autoplc_front/src/api/business/islandinfo.ts b/rc_autoplc_front/src/api/tb/islandinfo.ts
similarity index 100%
rename from rc_autoplc_front/src/api/business/islandinfo.ts
rename to rc_autoplc_front/src/api/tb/islandinfo.ts
diff --git a/rc_autoplc_front/src/router/index.ts b/rc_autoplc_front/src/router/index.ts
index b6c6386..982af39 100644
--- a/rc_autoplc_front/src/router/index.ts
+++ b/rc_autoplc_front/src/router/index.ts
@@ -37,6 +37,16 @@ const router = createRouter({
           name: 'user-role',
           component: () => import('../views/user-role/index.vue'),
         },
+        {
+          path: '/island-info',
+          name: 'island-info',
+          component: () => import('../views/islandInfo/index.vue'),
+        },
+        {
+          path: '/devinfo',
+          name: 'devinfo',
+          component: () => import('../views/devinfo/index.vue'),
+        },
       ],
     },
   ],
diff --git a/rc_autoplc_front/src/views/Layout.vue b/rc_autoplc_front/src/views/Layout.vue
index 2a35ff0..07c079c 100644
--- a/rc_autoplc_front/src/views/Layout.vue
+++ b/rc_autoplc_front/src/views/Layout.vue
@@ -61,6 +61,20 @@
               <span>用户角色管理</span>
             </el-menu-item>
           </el-sub-menu>
+          <el-sub-menu index="island">
+            <template #title>
+              <el-icon><Grid /></el-icon>
+              <span>业务管理</span>
+            </template>
+            <el-menu-item index="/island-info">
+              <el-icon><Setting /></el-icon>
+              <span>功能岛管理</span>
+            </el-menu-item>
+            <el-menu-item index="/devinfo">
+              <el-icon><Monitor /></el-icon>
+              <span>设备管理</span>
+            </el-menu-item>
+          </el-sub-menu>
         </el-menu>
       </el-aside>
 
@@ -76,7 +90,7 @@
 import { ref, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { User, Setting, Avatar, OfficeBuilding, Briefcase, Document, CaretBottom, UserFilled } from '@element-plus/icons-vue'
+import { User, Setting, Avatar, OfficeBuilding, Briefcase, Document, CaretBottom, UserFilled, Grid, Monitor } from '@element-plus/icons-vue'
 import { useAuthStore } from '@/stores/auth'
 
 const router = useRouter()
diff --git a/rc_autoplc_front/src/views/devinfo/index.vue b/rc_autoplc_front/src/views/devinfo/index.vue
new file mode 100644
index 0000000..0520dee
--- /dev/null
+++ b/rc_autoplc_front/src/views/devinfo/index.vue
@@ -0,0 +1,686 @@
+<template>
+  <div class="devinfo-page">
+    <!-- 搜索栏 -->
+    <el-card class="search-card" shadow="never">
+      <div class="search-bar">
+        <el-form :inline="true" :model="queryForm" label-width="100px">
+          <el-form-item label="设备名称">
+            <el-input
+              v-model="queryForm.devName"
+              placeholder="输入设备名称"
+              clearable
+              style="width: 200px"
+            />
+          </el-form-item>
+          <el-form-item label="设备状态">
+            <el-select
+              v-model="queryForm.status"
+              placeholder="请选择设备状态"
+              clearable
+              style="width: 200px"
+            >
+              <el-option label="空闲" :value="0" />
+              <el-option label="运行" :value="1" />
+              <el-option label="故障" :value="4" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="所属功能岛">
+            <el-select
+              v-model="queryForm.islandId"
+              placeholder="请选择功能岛"
+              clearable
+              style="width: 200px"
+            >
+              <el-option
+                v-for="island in islandList"
+                :key="island.id"
+                :label="island.islandName || island.name"
+                :value="island.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleSearch">查询</el-button>
+            <el-button @click="resetSearch">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <div class="toolbar">
+          <el-button type="primary" @click="handleAdd">
+            <el-icon><Plus /></el-icon>
+            新增设备
+          </el-button>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- 设备列表 -->
+    <el-card shadow="never">
+      <el-table
+        v-loading="loading"
+        :data="deviceList"
+        border
+        stripe
+        style="width: 100%"
+      >
+        <el-table-column type="index" label="序号" width="60" :index="getIndex" />
+        <el-table-column prop="devName" label="设备名称" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.devName || '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="devModel" label="设备型号" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.devModel || '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="ipAddr" label="IP地址" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.ipAddr || '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="port" label="端口" width="80">
+          <template #default="{ row }">
+            {{ row.port !== null && row.port !== undefined ? row.port : '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="protocolType" label="协议" min-width="100" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.protocolType || '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="company" label="公司名" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.company || '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="getStatusType(row.status)" size="small">
+              {{ getStatusText(row.status) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="islandId" label="所属功能岛" width="150">
+          <template #default="{ row }">
+            {{ getIslandName(row.islandId) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="devDesc" label="描述" min-width="150" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.devDesc || '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.remark || '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="150" fixed="right">
+          <template #default="{ row }">
+            <el-button
+              type="primary"
+              size="small"
+              link
+              @click="handleEdit(row)"
+            >
+              <el-icon><Edit /></el-icon>
+              编辑
+            </el-button>
+            <el-button
+              type="danger"
+              size="small"
+              link
+              @click="handleDelete(row)"
+            >
+              <el-icon><Delete /></el-icon>
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.pageNum"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          background
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 新增/编辑抽屉 -->
+    <el-drawer
+      v-model="drawerVisible"
+      :title="drawerTitle"
+      direction="rtl"
+      size="500px"
+      :before-close="handleDrawerClose"
+    >
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="100px"
+        label-position="left"
+      >
+        <el-form-item label="设备名称" prop="devName">
+          <el-input
+            v-model="formData.devName"
+            placeholder="请输入设备名称"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="设备型号" prop="devModel">
+          <el-input
+            v-model="formData.devModel"
+            placeholder="请输入设备型号"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="IP地址" prop="ipAddr">
+          <el-input
+            v-model="formData.ipAddr"
+            placeholder="请输入IP地址"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="端口" prop="port">
+          <el-input-number
+            v-model="formData.port"
+            placeholder="请输入端口"
+            :min="0"
+            :max="65535"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="协议" prop="protocolType">
+          <el-input
+            v-model="formData.protocolType"
+            placeholder="请输入协议类型"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="公司名" prop="company">
+          <el-input
+            v-model="formData.company"
+            placeholder="请输入公司名"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="描述" prop="devDesc">
+          <el-input
+            v-model="formData.devDesc"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入描述"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            v-model="formData.remark"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入备注"
+            clearable
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="drawer-footer">
+          <el-button @click="handleDrawerClose">取消</el-button>
+          <el-button type="primary" @click="handleSubmit" :loading="submitting">
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Edit, Delete } from '@element-plus/icons-vue'
+import {
+  devInfoadd,
+  devInfodel,
+  devInfoupd,
+  devInfolist,
+  devInfobyid,
+} from '@/api/tb/devinfo'
+import { islandInfobyid, islandInfolist } from '@/api/tb/islandinfo'
+
+// 加载状态
+const loading = ref(false)
+const submitting = ref(false)
+
+// 设备列表
+const deviceList = ref<any[]>([])
+const total = ref(0)
+
+// 功能岛列表和映射
+const islandList = ref<any[]>([])
+const islandMap = ref<Record<number, string>>({})
+
+// 查询表单
+const queryForm = reactive({
+  devName: '',
+  status: undefined as number | undefined,
+  islandId: undefined as number | undefined,
+})
+
+// 分页
+const pagination = reactive({
+  pageNum: 1,
+  pageSize: 10,
+})
+
+// 抽屉相关
+const drawerVisible = ref(false)
+const drawerTitle = ref('新增设备')
+const isEdit = ref(false)
+const formRef = ref()
+
+// 表单数据
+const formData = reactive({
+  id: undefined,
+  devName: '',
+  devModel: '',
+  ipAddr: '',
+  port: undefined,
+  protocolType: '',
+  company: '',
+  devDesc: '',
+  remark: '',
+  status: 0, // 状态自动设置为0
+})
+
+// 表单验证规则
+const formRules = {
+  devName: [
+    { required: true, message: '请输入设备名称', trigger: 'blur' },
+  ],
+}
+
+// 获取序号
+const getIndex = (index: number) => {
+  return (pagination.pageNum - 1) * pagination.pageSize + index + 1
+}
+
+// 获取状态类型
+const getStatusType = (status: number | null | undefined) => {
+  if (status === 0) return 'success' // 空闲 - 绿色
+  if (status === 1) return 'warning' // 运行 - 黄色
+  if (status === 4) return 'danger' // 故障 - 红色
+  return 'info'
+}
+
+// 获取状态文本
+const getStatusText = (status: number | null | undefined) => {
+  if (status === 0) return '空闲'
+  if (status === 1) return '运行'
+  if (status === 4) return '故障'
+  return '未知'
+}
+
+// 获取功能岛列表
+const getIslandList = async () => {
+  try {
+    const res: any = await islandInfolist({
+      pageNum: 1,
+      pageSize: 1000, // 获取所有功能岛
+    })
+    
+    const data = res?.data ?? res ?? {}
+    const recordsFromData =
+      data.records ||
+      data.list ||
+      data.rows ||
+      data.items ||
+      (Array.isArray(data.data) ? data.data : undefined)
+
+    const records = Array.isArray(recordsFromData)
+      ? recordsFromData
+      : Array.isArray(data)
+        ? data
+        : []
+
+    islandList.value = records
+    
+    // 建立ID到名称的映射
+    const map: Record<number, string> = {}
+    records.forEach((island: any) => {
+      if (island.id !== null && island.id !== undefined) {
+        map[island.id] = island.islandName || island.name || '未命名功能岛'
+      }
+    })
+    islandMap.value = map
+  } catch (error) {
+    console.error('获取功能岛列表失败:', error)
+  }
+}
+
+// 获取功能岛名称
+const getIslandName = (islandId: number | null | undefined) => {
+  if (islandId === null || islandId === undefined || islandId === 0) {
+    return '暂未绑定功能岛'
+  }
+  return islandMap.value[islandId] || `功能岛${islandId}`
+}
+
+// 获取设备列表
+const getDeviceList = async () => {
+  try {
+    loading.value = true
+    const params: any = {
+      pageNum: pagination.pageNum,
+      pageSize: pagination.pageSize,
+    }
+    
+    // 设备名称模糊查询
+    if (queryForm.devName) {
+      params.devName = queryForm.devName
+    }
+    // 设备状态精确查询
+    if (queryForm.status !== undefined && queryForm.status !== null) {
+      params.status = queryForm.status
+    }
+    // 所属功能岛精确查询
+    if (queryForm.islandId !== undefined && queryForm.islandId !== null) {
+      params.islandId = queryForm.islandId
+    }
+    
+    const res: any = await devInfolist(params)
+    
+    const data = res?.data ?? res ?? {}
+    
+    // 兼容多种返回格式
+    const recordsFromData =
+      data.records ||
+      data.list ||
+      data.rows ||
+      data.items ||
+      (Array.isArray(data.data) ? data.data : undefined)
+
+    const records = Array.isArray(recordsFromData)
+      ? recordsFromData
+      : Array.isArray(data)
+        ? data
+        : []
+
+    const totalValue =
+      data.total ?? data.count ?? data.totalCount ?? records.length ?? 0
+
+    deviceList.value = records
+    total.value = Number(totalValue) || 0
+  } catch (error) {
+    console.error('获取设备列表失败:', error)
+    ElMessage.error('获取设备列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 查询
+const handleSearch = () => {
+  pagination.pageNum = 1
+  getDeviceList()
+}
+
+// 重置查询
+const resetSearch = () => {
+  queryForm.devName = ''
+  queryForm.status = undefined
+  queryForm.islandId = undefined
+  handleSearch()
+}
+
+// 分页大小改变
+const handleSizeChange = (size: number) => {
+  pagination.pageSize = size
+  getDeviceList()
+}
+
+// 当前页改变
+const handleCurrentChange = (page: number) => {
+  pagination.pageNum = page
+  getDeviceList()
+}
+
+// 打开新增抽屉
+const handleAdd = () => {
+  isEdit.value = false
+  drawerTitle.value = '新增设备'
+  resetForm()
+  drawerVisible.value = true
+}
+
+// 重置表单
+const resetForm = () => {
+  formData.id = undefined
+  formData.devName = ''
+  formData.devModel = ''
+  formData.ipAddr = ''
+  formData.port = undefined
+  formData.protocolType = ''
+  formData.company = ''
+  formData.devDesc = ''
+  formData.remark = ''
+  formData.status = 0
+  formRef.value?.clearValidate()
+}
+
+// 编辑设备
+const handleEdit = async (item: any) => {
+  try {
+    loading.value = true
+    const res: any = await devInfobyid(item.id)
+    
+    const data = res?.data ?? res ?? {}
+    
+    formData.id = data.id ?? item.id
+    formData.devName = data.devName ?? ''
+    formData.devModel = data.devModel ?? ''
+    formData.ipAddr = data.ipAddr ?? ''
+    formData.port = data.port ?? undefined
+    formData.protocolType = data.protocolType ?? ''
+    formData.company = data.company ?? ''
+    formData.devDesc = data.devDesc ?? ''
+    formData.remark = data.remark ?? ''
+    formData.status = data.status ?? 0
+    
+    isEdit.value = true
+    drawerTitle.value = '编辑设备'
+    drawerVisible.value = true
+  } catch (error) {
+    console.error('获取设备信息失败:', error)
+    ElMessage.error('获取设备信息失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 删除设备
+const handleDelete = async (item: any) => {
+  try {
+    // 检查设备是否绑定了功能岛
+    if (item.islandId && item.islandId !== 0 && item.islandId !== '0') {
+      // 查询功能岛名称
+      let islandName = '功能岛'
+      try {
+        const islandRes: any = await islandInfobyid(item.islandId)
+        if (islandRes?.code === '0' || islandRes?.code === 0) {
+          const islandData = islandRes.data || islandRes || {}
+          islandName = islandData.islandName || islandData.name || '功能岛'
+        }
+      } catch (error) {
+        console.error('获取功能岛信息失败:', error)
+      }
+      
+      await ElMessageBox.alert(
+        `该设备已绑定${islandName}，请先完成解绑`,
+        '提示',
+        {
+          confirmButtonText: '确定',
+          type: 'warning',
+        }
+      )
+      return
+    }
+    
+    await ElMessageBox.confirm(
+      `确定要删除设备"${item.devName || '未命名'}"吗？`,
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+    )
+    
+    loading.value = true
+    const res: any = await devInfodel(item.id)
+    
+    if (res?.code === '0' || res?.code === 0 || res?.success) {
+      ElMessage.success('删除成功')
+      getDeviceList()
+    } else {
+      ElMessage.error(res?.message || res?.msg || '删除失败')
+    }
+  } catch (error: any) {
+    if (error !== 'cancel') {
+      console.error('删除设备失败:', error)
+      ElMessage.error('删除设备失败')
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  if (!formRef.value) return
+  
+  try {
+    await formRef.value.validate()
+    submitting.value = true
+    
+    // 构建提交数据，只包含非空字段（根据后端要求：非空则入库/更新）
+    const submitData: any = {
+      devName: formData.devName,
+    }
+    
+    // 添加其他字段（如果非空）
+    if (formData.devModel) {
+      submitData.devModel = formData.devModel
+    }
+    if (formData.ipAddr) {
+      submitData.ipAddr = formData.ipAddr
+    }
+    if (formData.port !== undefined && formData.port !== null) {
+      submitData.port = formData.port
+    }
+    if (formData.protocolType) {
+      submitData.protocolType = formData.protocolType
+    }
+    if (formData.company) {
+      submitData.company = formData.company
+    }
+    if (formData.devDesc) {
+      submitData.devDesc = formData.devDesc
+    }
+    if (formData.remark) {
+      submitData.remark = formData.remark
+    }
+    
+    let res: any
+    if (isEdit.value && formData.id) {
+      // 编辑 - 需要传入ID，其他字段可选(非空则更新)
+      res = await devInfoupd({
+        id: formData.id,
+        ...submitData,
+      })
+    } else {
+      // 新增 - 状态自动设置为0
+      res = await devInfoadd({
+        ...submitData,
+        status: 0,
+      })
+    }
+    
+    if (res?.code === '0' || res?.code === 0 || res?.success) {
+      ElMessage.success(isEdit.value ? '编辑成功' : '新增成功')
+      drawerVisible.value = false
+      getDeviceList()
+    } else {
+      ElMessage.error(res?.message || res?.msg || (isEdit.value ? '编辑失败' : '新增失败'))
+    }
+  } catch (error: any) {
+    if (error !== false) {
+      console.error('提交失败:', error)
+      ElMessage.error('提交失败，请检查表单')
+    }
+  } finally {
+    submitting.value = false
+  }
+}
+
+// 关闭抽屉
+const handleDrawerClose = () => {
+  drawerVisible.value = false
+  resetForm()
+}
+
+// 初始化
+onMounted(() => {
+  getIslandList().then(() => {
+    getDeviceList()
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.devinfo-page {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.search-card {
+  padding-bottom: 4px;
+}
+
+.search-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pagination {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>
+
diff --git a/rc_autoplc_front/src/views/islandInfo/index.vue b/rc_autoplc_front/src/views/islandInfo/index.vue
new file mode 100644
index 0000000..3d55250
--- /dev/null
+++ b/rc_autoplc_front/src/views/islandInfo/index.vue
@@ -0,0 +1,1091 @@
+<template>
+  <div class="island-info-page">
+    <!-- 搜索栏 -->
+    <el-card class="search-card" shadow="never">
+      <div class="search-bar">
+        <el-form :inline="true" :model="queryForm" label-width="80px">
+          <el-form-item label="岛屿名称">
+            <el-input
+              v-model="queryForm.islandName"
+              placeholder="输入岛屿名称"
+              clearable
+              style="width: 200px"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleSearch">查询</el-button>
+            <el-button @click="resetSearch">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <div class="toolbar">
+          <el-button type="primary" @click="handleAdd">
+            <el-icon><Plus /></el-icon>
+            新增功能岛
+          </el-button>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- 功能岛列表 -->
+    <el-card shadow="never">
+      <div class="island-list" v-loading="loading">
+      <div v-if="islandList.length === 0 && !loading" class="empty-state">
+        <el-empty description="暂无功能岛数据" :image-size="100" />
+      </div>
+      <div v-else class="island-grid">
+        <div
+          v-for="(item, index) in islandList"
+          :key="item.id"
+          class="island-card"
+        >
+          <!-- 左侧步骤编号和过滤器图标 -->
+          <div class="card-left">
+            <div class="step-badge">{{ (pagination.pageNum - 1) * pagination.pageSize + index + 1 }}</div>
+            <el-icon class="filter-icon">
+              <Operation />
+            </el-icon>
+          </div>
+
+           <!-- 中间内容区域 -->
+           <div class="card-content">
+             <!-- Logo和名称水平对齐 -->
+             <div class="island-header">
+               <el-icon class="logo-icon" :size="32">
+                 <component :is="getIslandIcon(item.islandName || item.name)" />
+               </el-icon>
+               <div class="island-name">{{ item.islandName || item.name || '未命名功能岛' }}</div>
+             </div>
+             <!-- 功能岛描述 -->
+             <div class="island-desc">{{ item.desc || item.islandDesc || item.description || '暂无描述' }}</div>
+           </div>
+
+          <!-- 右上角操作菜单 -->
+          <div class="card-actions">
+            <el-dropdown trigger="click" @command="(command: string) => handleCommand(command, item)">
+              <el-icon class="more-icon">
+                <MoreFilled />
+              </el-icon>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="edit">
+                    <el-icon><Edit /></el-icon>
+                    编辑
+                  </el-dropdown-item>
+                  <el-dropdown-item command="delete" divided>
+                    <el-icon><Delete /></el-icon>
+                    删除
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+        </div>
+      </div>
+      </div>
+      <!-- 分页 -->
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.pageNum"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          background
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 新增/编辑抽屉 -->
+    <el-drawer
+      v-model="drawerVisible"
+      :title="drawerTitle"
+      direction="rtl"
+      size="500px"
+      :before-close="handleDrawerClose"
+    >
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="100px"
+        label-position="left"
+      >
+        <el-form-item label="功能岛名称" prop="islandName">
+          <el-input
+            v-model="formData.islandName"
+            placeholder="请输入功能岛名称"
+            clearable
+            @input="handleNameInput"
+          />
+        </el-form-item>
+        <el-form-item label="功能岛编码" prop="islandCode">
+          <el-input
+            v-model="formData.islandCode"
+            placeholder="请输入功能岛编码"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="功能岛Logo">
+          <div class="logo-preview">
+            <el-icon class="preview-icon" :size="60">
+              <component :is="getIslandIcon(formData.islandName)" />
+            </el-icon>
+            <div class="preview-tip">根据功能岛名称自动生成</div>
+          </div>
+        </el-form-item>
+        <el-form-item label="功能岛描述" prop="islandDesc">
+          <el-input
+            v-model="formData.islandDesc"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入功能岛描述"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="绑定设备">
+          <div class="bind-device-wrapper">
+            <el-button type="primary" @click="handleBindDevice">
+              <el-icon><Plus /></el-icon>
+              绑定设备
+            </el-button>
+            <div v-if="boundDevices.length > 0" class="bound-devices-table-wrapper">
+              <el-table
+                :data="boundDevices"
+                border
+                stripe
+                size="small"
+                style="width: 100%; margin-top: 12px"
+              >
+                <el-table-column type="index" label="序号" width="60" :index="getBoundDeviceIndex" />
+                <el-table-column prop="devName" label="设备名称" min-width="120" show-overflow-tooltip>
+                  <template #default="{ row }">
+                    {{ row.devName || '暂无' }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="status" label="状态" width="100" align="center">
+                  <template #default="{ row }">
+                    <el-tag :type="getStatusType(row.status)" size="small">
+                      {{ getStatusText(row.status) }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="devDesc" label="描述" min-width="150" show-overflow-tooltip>
+                  <template #default="{ row }">
+                    {{ row.devDesc || '暂无' }}
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+            <div v-else class="no-bound-devices">暂无绑定设备</div>
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="drawer-footer">
+          <el-button @click="handleDrawerClose">取消</el-button>
+          <el-button type="primary" @click="handleSubmit" :loading="submitting">
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-drawer>
+
+    <!-- 绑定设备对话框 -->
+    <el-dialog
+      v-model="bindDeviceDialogVisible"
+      :title="isEdit ? '绑定/解绑设备' : '绑定设备'"
+      width="800px"
+      :before-close="handleBindDialogClose"
+    >
+      <el-table
+        ref="deviceTableRef"
+        v-loading="deviceLoading"
+        :data="deviceListForBind"
+        border
+        stripe
+        style="width: 100%"
+        @selection-change="handleDeviceSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column type="index" label="序号" width="60" :index="getDeviceIndex" />
+        <el-table-column prop="devName" label="设备名称" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.devName || '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="devModel" label="设备型号" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.devModel || '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="ipAddr" label="IP地址" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.ipAddr || '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="port" label="端口" width="80">
+          <template #default="{ row }">
+            {{ row.port !== null && row.port !== undefined ? row.port : '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="protocolType" label="协议" min-width="100" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.protocolType || '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="getStatusType(row.status)" size="small">
+              {{ getStatusText(row.status) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleBindDialogClose">取消</el-button>
+          <el-button type="primary" @click="handleSaveDeviceBind" :loading="savingDeviceBind">
+            保存
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+  Plus,
+  MoreFilled,
+  Edit,
+  Delete,
+  Operation,
+  Watermelon,
+  Sunny,
+  Connection,
+  Histogram,
+  RefreshRight,
+  Aim,
+  Goblet,
+  WindPower,
+  Filter,
+  User,
+  Setting,
+  Tools,
+  Box,
+  Grid,
+  Monitor,
+  Cpu,
+  DataAnalysis,
+} from '@element-plus/icons-vue'
+import {
+  islandInfoadd,
+  islandInfodel,
+  islandInfoupd,
+  islandInfolist,
+  islandInfobyid,
+} from '@/api/tb/islandinfo'
+import { devselect, devInfoupd } from '@/api/tb/devinfo'
+
+// 加载状态
+const loading = ref(false)
+const submitting = ref(false)
+const deviceLoading = ref(false)
+const savingDeviceBind = ref(false)
+
+// 功能岛列表
+const islandList = ref<any[]>([])
+const total = ref(0)
+
+// 查询表单
+const queryForm = reactive({
+  islandName: '',
+})
+
+// 分页
+const pagination = reactive({
+  pageNum: 1,
+  pageSize: 10,
+})
+
+// 抽屉相关
+const drawerVisible = ref(false)
+const drawerTitle = ref('新增功能岛')
+const isEdit = ref(false)
+const formRef = ref()
+
+// 表单数据
+const formData = reactive({
+  id: undefined,
+  islandName: '',
+  islandCode: '',
+  islandDesc: '',
+})
+
+// 绑定设备相关
+const bindDeviceDialogVisible = ref(false)
+const deviceListForBind = ref<any[]>([])
+const deviceTableRef = ref()
+const selectedDevices = ref<any[]>([])
+const boundDevices = ref<any[]>([])
+
+// 表单验证规则
+const formRules = {
+  islandName: [
+    { required: true, message: '请输入功能岛名称', trigger: 'blur' },
+  ],
+  islandCode: [
+    { required: true, message: '请输入功能岛编码', trigger: 'blur' },
+  ],
+}
+
+// 获取功能岛图标（根据名称自动生成）
+const getIslandIcon = (name: string) => {
+  if (!name) return Box
+  
+  // 根据名称关键词匹配图标
+  const nameLower = name.toLowerCase()
+  if (nameLower.includes('加液') || nameLower.includes('ph') || nameLower.includes('涡旋')) {
+    return Watermelon
+  } else if (nameLower.includes('水浴') || nameLower.includes('恒温')) {
+    return Sunny
+  } else if (nameLower.includes('震荡')) {
+    return Connection
+  } else if (nameLower.includes('超声')) {
+    return Histogram
+  } else if (nameLower.includes('离心')) {
+    return RefreshRight
+  } else if (nameLower.includes('移液')) {
+    return Aim
+  } else if (nameLower.includes('萃取')) {
+    return Goblet
+  } else if (nameLower.includes('氮吹')) {
+    return WindPower
+  } else if (nameLower.includes('过膜') || nameLower.includes('过滤')) {
+    return Filter
+  } else if (nameLower.includes('人工')) {
+    return User
+  } else if (nameLower.includes('系统') || nameLower.includes('管理')) {
+    return Setting
+  } else if (nameLower.includes('工具')) {
+    return Tools
+  } else if (nameLower.includes('数据') || nameLower.includes('分析')) {
+    return DataAnalysis
+  } else if (nameLower.includes('监控') || nameLower.includes('显示')) {
+    return Monitor
+  } else if (nameLower.includes('处理') || nameLower.includes('计算')) {
+    return Cpu
+  } else if (nameLower.includes('网格') || nameLower.includes('布局')) {
+    return Grid
+  }
+  
+  // 默认图标
+  return Box
+}
+
+// 处理名称输入
+const handleNameInput = () => {
+  // 名称输入时，Logo会自动更新（通过getIslandIcon函数）
+}
+
+// 获取状态类型
+const getStatusType = (status: number | null | undefined) => {
+  if (status === 0) return 'success' // 空闲 - 绿色
+  if (status === 1) return 'warning' // 运行 - 黄色
+  if (status === 4) return 'danger' // 故障 - 红色
+  return 'info'
+}
+
+// 获取状态文本
+const getStatusText = (status: number | null | undefined) => {
+  if (status === 0) return '空闲'
+  if (status === 1) return '运行'
+  if (status === 4) return '故障'
+  return '未知'
+}
+
+// 获取设备序号
+const getDeviceIndex = (index: number) => {
+  return index + 1
+}
+
+// 获取已绑定设备序号
+const getBoundDeviceIndex = (index: number) => {
+  return index + 1
+}
+
+// 获取功能岛列表
+const getIslandList = async () => {
+  try {
+    loading.value = true
+    const res: any = await islandInfolist({
+      pageNum: pagination.pageNum,
+      pageSize: pagination.pageSize,
+      ...queryForm,
+    })
+    
+    const data = res?.data ?? res ?? {}
+    
+    // 兼容多种返回格式：{data:{records,total}} | {records,total} | {data:[]} | []
+    const recordsFromData =
+      data.records ||
+      data.list ||
+      data.rows ||
+      data.items ||
+      (Array.isArray(data.data) ? data.data : undefined)
+
+    const records = Array.isArray(recordsFromData)
+      ? recordsFromData
+      : Array.isArray(data)
+        ? data
+        : []
+
+    const totalValue =
+      data.total ?? data.count ?? data.totalCount ?? records.length ?? 0
+
+    islandList.value = records
+    total.value = Number(totalValue) || 0
+  } catch (error) {
+    console.error('获取功能岛列表失败:', error)
+    ElMessage.error('获取功能岛列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 查询
+const handleSearch = () => {
+  pagination.pageNum = 1
+  getIslandList()
+}
+
+// 重置查询
+const resetSearch = () => {
+  queryForm.islandName = ''
+  handleSearch()
+}
+
+// 分页大小改变
+const handleSizeChange = (size: number) => {
+  pagination.pageSize = size
+  getIslandList()
+}
+
+// 当前页改变
+const handleCurrentChange = (page: number) => {
+  pagination.pageNum = page
+  getIslandList()
+}
+
+// 打开新增抽屉
+const handleAdd = () => {
+  isEdit.value = false
+  drawerTitle.value = '新增功能岛'
+  resetForm()
+  drawerVisible.value = true
+}
+
+// 重置表单
+const resetForm = () => {
+  formData.id = undefined
+  formData.islandName = ''
+  formData.islandCode = ''
+  formData.islandDesc = ''
+  boundDevices.value = []
+  selectedDevices.value = []
+  formRef.value?.clearValidate()
+}
+
+// 处理操作命令
+const handleCommand = async (command: string, item: any) => {
+  if (command === 'edit') {
+    await handleEdit(item)
+  } else if (command === 'delete') {
+    await handleDelete(item)
+  }
+}
+
+// 编辑功能岛
+const handleEdit = async (item: any) => {
+  try {
+    loading.value = true
+    const res: any = await islandInfobyid(item.id)
+    if (res.code === '0' || res.code === 0) {
+      const data = res.data || res || item
+      formData.id = data.id ?? item.id
+      formData.islandName = data.islandName ?? data.name ?? ''
+      formData.islandCode = data.islandCode ?? data.code ?? ''
+      // 优先使用后端的 desc 字段，兼容其他可能的字段名
+      formData.islandDesc = data.desc ?? data.islandDesc ?? data.description ?? ''
+      
+      // 加载已绑定的设备
+      if (formData.id) {
+        await loadBoundDevices(formData.id)
+      }
+      
+      isEdit.value = true
+      drawerTitle.value = '编辑功能岛'
+      drawerVisible.value = true
+    } else {
+      ElMessage.error(res.message || res.msg || '获取功能岛信息失败')
+    }
+  } catch (error) {
+    console.error('获取功能岛信息失败:', error)
+    ElMessage.error('获取功能岛信息失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 加载已绑定的设备
+const loadBoundDevices = async (islandId: number | string) => {
+  try {
+    const res: any = await devselect({})
+    const allDevices = res?.data ?? res ?? []
+    if (Array.isArray(allDevices)) {
+      boundDevices.value = allDevices.filter((device: any) => 
+        device.islandId && (device.islandId === islandId || device.islandId === String(islandId))
+      )
+    }
+  } catch (error) {
+    console.error('加载已绑定设备失败:', error)
+    boundDevices.value = []
+  }
+}
+
+// 删除功能岛
+const handleDelete = async (item: any) => {
+  try {
+    // 检查是否绑定了设备
+    const res: any = await devselect({})
+    const allDevices = res?.data ?? res ?? []
+    const boundDevicesList = Array.isArray(allDevices) 
+      ? allDevices.filter((device: any) => 
+          device.islandId && (device.islandId === item.id || device.islandId === String(item.id))
+        )
+      : []
+    
+    if (boundDevicesList.length > 0) {
+      const deviceNames = boundDevicesList.map((d: any) => d.devName || '未命名设备').join('、')
+      const islandName = item.islandName || item.name || '未命名'
+      await ElMessageBox.alert(
+        `${islandName}已绑定${deviceNames}，请先完成设备解绑`,
+        '提示',
+        {
+          confirmButtonText: '确定',
+          type: 'warning',
+        }
+      )
+      return
+    }
+    
+    await ElMessageBox.confirm(
+      `确定要删除功能岛"${item.islandName || item.name || '未命名'}"吗？`,
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+    )
+    
+    loading.value = true
+    const deleteRes: any = await islandInfodel(item.id)
+    if (deleteRes?.code === '0' || deleteRes?.code === 0) {
+      ElMessage.success('删除成功')
+      getIslandList()
+    } else {
+      ElMessage.error(deleteRes?.message || deleteRes?.msg || '删除失败')
+    }
+  } catch (error: any) {
+    if (error !== 'cancel') {
+      console.error('删除功能岛失败:', error)
+      ElMessage.error('删除功能岛失败')
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  if (!formRef.value) return
+  
+  try {
+    await formRef.value.validate()
+    submitting.value = true
+    
+    // 根据后端API要求，将字段映射为正确的名称
+    const submitData: any = {
+      islandName: formData.islandName,
+      islandCode: formData.islandCode,
+      desc: formData.islandDesc || '', // 描述字段映射为 desc
+    }
+    
+    let res: any
+    let newIslandId: any = null
+    
+    if (isEdit.value && formData.id) {
+      // 编辑 - 需要传入ID，其他字段可选(非空则更新)
+      res = await islandInfoupd({
+        id: formData.id,
+        ...submitData,
+      })
+      newIslandId = formData.id
+    } else {
+      // 新增
+      res = await islandInfoadd(submitData)
+      // 获取新增后的ID
+      if (res.code === '0' || res.code === 0) {
+        newIslandId = res.data?.id || res.id
+      }
+    }
+    
+    if (res.code === '0' || res.code === 0) {
+      // 如果是新增模式且有绑定的设备，需要更新设备的islandId
+      if (!isEdit.value && newIslandId && boundDevices.value.length > 0) {
+        try {
+          const bindPromises = boundDevices.value.map((device: any) => {
+            return devInfoupd({
+              id: device.id,
+              devName: device.devName, // 必填字段
+              islandId: newIslandId,
+            })
+          })
+          const bindResults = await Promise.all(bindPromises)
+          // 检查是否有失败的请求
+          const failedResults = bindResults.filter((res: any) => {
+            return res && (res.code !== '0' && res.code !== 0 && !res.success)
+          })
+          if (failedResults.length > 0) {
+            console.warn('部分设备绑定失败:', failedResults)
+            // 不阻止功能岛创建成功，只提示警告
+          }
+        } catch (error) {
+          console.error('绑定设备失败:', error)
+          // 不阻止功能岛创建成功，只记录错误
+        }
+      }
+      
+      ElMessage.success(isEdit.value ? '编辑成功' : '新增成功')
+      drawerVisible.value = false
+      getIslandList()
+    } else {
+      ElMessage.error(res.message || res.msg || (isEdit.value ? '编辑失败' : '新增失败'))
+    }
+  } catch (error: any) {
+    if (error !== false) {
+      console.error('提交失败:', error)
+      ElMessage.error('提交失败，请检查表单')
+    }
+  } finally {
+    submitting.value = false
+  }
+}
+
+// 打开绑定设备对话框
+const handleBindDevice = async () => {
+  try {
+    deviceLoading.value = true
+    const res: any = await devselect({})
+    const allDevices = res?.data ?? res ?? []
+    
+    if (Array.isArray(allDevices)) {
+      if (isEdit.value && formData.id) {
+        // 编辑模式：显示未绑定的设备 + 已绑定该功能岛的设备
+        deviceListForBind.value = allDevices.filter((device: any) => 
+          !device.islandId || 
+          device.islandId === formData.id || 
+          device.islandId === String(formData.id) ||
+          device.islandId === 0 ||
+          device.islandId === '0'
+        )
+      } else {
+        // 新增模式：只显示未绑定的设备
+        deviceListForBind.value = allDevices.filter((device: any) => 
+          !device.islandId || 
+          device.islandId === 0 ||
+          device.islandId === '0'
+        )
+      }
+    } else {
+      deviceListForBind.value = []
+    }
+    
+    bindDeviceDialogVisible.value = true
+    
+    // 等待DOM更新后设置已选中的设备
+    await new Promise(resolve => setTimeout(resolve, 100))
+    if (deviceTableRef.value && isEdit.value && formData.id) {
+      // 编辑模式：默认选中已绑定的设备
+      const boundDeviceIds = boundDevices.value.map((d: any) => d.id)
+      deviceListForBind.value.forEach((device: any) => {
+        if (boundDeviceIds.includes(device.id)) {
+          deviceTableRef.value.toggleRowSelection(device, true)
+        }
+      })
+    }
+  } catch (error) {
+    console.error('获取设备列表失败:', error)
+    ElMessage.error('获取设备列表失败')
+  } finally {
+    deviceLoading.value = false
+  }
+}
+
+// 设备选择变化
+const handleDeviceSelectionChange = (selection: any[]) => {
+  selectedDevices.value = selection
+}
+
+// 保存设备绑定
+const handleSaveDeviceBind = async () => {
+  try {
+    savingDeviceBind.value = true
+    
+    // 获取当前选中的设备ID列表
+    const selectedDeviceIds = selectedDevices.value.map((d: any) => d.id)
+    
+    if (isEdit.value && formData.id) {
+      // 编辑模式：立即保存绑定关系
+      // 获取之前已绑定的设备ID列表
+      const previousBoundDeviceIds = boundDevices.value.map((d: any) => d.id)
+      
+      // 需要绑定的设备（新增的）
+      const devicesToBind = selectedDeviceIds.filter((id: any) => !previousBoundDeviceIds.includes(id))
+      
+      // 需要解绑的设备（取消选中的）
+      const devicesToUnbind = previousBoundDeviceIds.filter((id: any) => !selectedDeviceIds.includes(id))
+      
+      // 执行绑定操作
+      const bindPromises = devicesToBind.map((deviceId: any) => {
+        const device = deviceListForBind.value.find((d: any) => d.id === deviceId)
+        if (device) {
+          // 包含设备名称等必填字段
+          return devInfoupd({
+            id: deviceId,
+            devName: device.devName, // 必填字段
+            islandId: formData.id,
+          })
+        }
+        return Promise.resolve()
+      })
+      
+      // 执行解绑操作
+      const unbindPromises = devicesToUnbind.map((deviceId: any) => {
+        const device = deviceListForBind.value.find((d: any) => d.id === deviceId) || 
+                       boundDevices.value.find((d: any) => d.id === deviceId)
+        if (device) {
+          // 包含设备名称等必填字段
+          return devInfoupd({
+            id: deviceId,
+            devName: device.devName, // 必填字段
+            islandId: 0, // 解绑时设置为0
+          })
+        }
+        return Promise.resolve()
+      })
+      
+      // 执行所有操作
+      const allPromises = [...bindPromises, ...unbindPromises]
+      if (allPromises.length > 0) {
+        const results = await Promise.all(allPromises)
+        // 检查是否有失败的请求
+        const failedResults = results.filter((res: any) => {
+          if (!res) return false
+          // 检查响应数据（可能是直接返回的数据对象）
+          const data = res.data || res
+          return data && (data.code !== '0' && data.code !== 0 && data.code !== undefined && !data.success)
+        })
+        if (failedResults.length > 0) {
+          const firstFailed = failedResults[0]
+          const errorData = firstFailed?.data || firstFailed
+          throw new Error(errorData?.message || errorData?.msg || '部分设备绑定/解绑失败')
+        }
+      }
+      
+      // 更新已绑定设备列表
+      await loadBoundDevices(formData.id)
+      
+      ElMessage.success('保存成功')
+    } else {
+      // 新增模式：只更新本地列表，不调用接口（等创建功能岛后再绑定）
+      boundDevices.value = deviceListForBind.value.filter((device: any) => 
+        selectedDeviceIds.includes(device.id)
+      )
+      ElMessage.success('已选择设备，将在创建功能岛后自动绑定')
+    }
+    
+    bindDeviceDialogVisible.value = false
+  } catch (error: any) {
+    console.error('保存设备绑定失败:', error)
+    // 处理不同类型的错误
+    let errorMessage = '保存设备绑定失败'
+    if (error?.message) {
+      errorMessage = error.message
+    } else if (error?.response?.data?.message) {
+      errorMessage = error.response.data.message
+    } else if (error?.response?.data?.msg) {
+      errorMessage = error.response.data.msg
+    } else if (typeof error === 'string') {
+      errorMessage = error
+    }
+    ElMessage.error(errorMessage)
+  } finally {
+    savingDeviceBind.value = false
+  }
+}
+
+// 关闭绑定设备对话框
+const handleBindDialogClose = () => {
+  bindDeviceDialogVisible.value = false
+  selectedDevices.value = []
+  if (deviceTableRef.value) {
+    deviceTableRef.value.clearSelection()
+  }
+}
+
+// 关闭抽屉
+const handleDrawerClose = () => {
+  drawerVisible.value = false
+  resetForm()
+}
+
+// 初始化
+onMounted(() => {
+  getIslandList()
+})
+</script>
+
+<style lang="scss" scoped>
+.island-info-page {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.search-card {
+  padding-bottom: 4px;
+}
+
+.search-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.island-list {
+  min-height: 400px;
+}
+
+.pagination {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+  background-color: #fff;
+  border-radius: 4px;
+}
+
+.island-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+  gap: 20px;
+  padding: 20px;
+  background: linear-gradient(135deg, #e3f2fd 0%, #f0f2f5 100%);
+  border-radius: 4px;
+  min-height: 400px;
+  background-image: 
+    linear-gradient(rgba(64, 158, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(64, 158, 255, 0.03) 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+
+.island-card {
+  position: relative;
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 16px 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+  display: flex;
+  align-items: flex-start;
+  min-height: 95px;
+  height: 95px;
+  border: 1px solid rgba(64, 158, 255, 0.1);
+
+  &:hover {
+    box-shadow: 0 4px 16px rgba(64, 158, 255, 0.2);
+    transform: translateY(-4px);
+    border-color: rgba(64, 158, 255, 0.3);
+  }
+}
+
+.card-left {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 15px;
+
+  .step-badge {
+    width: 32px;
+    height: 32px;
+    background-color: #409eff;
+    color: #fff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
+
+  .filter-icon {
+    font-size: 32px;
+    width: 32px;
+    height: 32px;
+    color: #909399;
+    cursor: pointer;
+    transition: color 0.3s;
+
+    &:hover {
+      color: #409eff;
+    }
+  }
+}
+
+.card-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding-left: 8px;
+  padding-top: 8px; // 向下平移，使Logo和岛名位置在序号与序号下图标中间
+
+  .island-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 0;
+
+    .logo-icon {
+      color: #409eff;
+      flex-shrink: 0;
+    }
+
+    .island-name {
+      font-size: 22px;
+      font-weight: 700;
+      color: #303133;
+      line-height: 1.5;
+      word-break: break-all;
+      flex: 1;
+    }
+  }
+
+  .island-desc {
+    font-size: 16px;
+    color: #606266;
+    line-height: 1.5;
+    word-break: break-all;
+    margin-top: calc(22px * 1); // 岛名字体22px * 1倍行距 = 22px
+    padding-left: 0; // 第一个字与Logo图垂直对齐（Logo在island-header中，描述独立，所以padding-left为0即可对齐）
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.card-actions {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+
+  .more-icon {
+    font-size: 18px;
+    color: #909399;
+    cursor: pointer;
+    transition: color 0.3s;
+    padding: 4px;
+
+    &:hover {
+      color: #409eff;
+    }
+  }
+}
+
+.logo-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  border: 1px dashed #dcdfe6;
+
+  .preview-icon {
+    color: #409eff;
+    margin-bottom: 10px;
+  }
+
+  .preview-tip {
+    font-size: 12px;
+    color: #909399;
+  }
+}
+
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.bind-device-wrapper {
+  width: 100%;
+}
+
+.bound-devices-table-wrapper {
+  width: 100%;
+}
+
+.no-bound-devices {
+  margin-top: 12px;
+  padding: 12px;
+  text-align: center;
+  color: #909399;
+  font-size: 14px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  border: 1px dashed #dcdfe6;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>
+
+

From 06af1fec4ef51663c47de2d628ecc9c423887d93 Mon Sep 17 00:00:00 2001
From: Lxq <19852720163@163.com>
Date: Wed, 31 Dec 2025 14:48:27 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=AE=8C=E5=96=84=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86+PLC=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 rc_autoplc_front/src/api/tb/devparam.ts      |  47 ++
 rc_autoplc_front/src/assets/image/right.png  | Bin 0 -> 4216 bytes
 rc_autoplc_front/src/router/index.ts         |   5 +
 rc_autoplc_front/src/views/Layout.vue        |   6 +-
 rc_autoplc_front/src/views/devinfo/index.vue | 533 ++++++++++++++---
 rc_autoplc_front/src/views/devinfo/plc.vue   | 583 +++++++++++++++++++
 rc_autoplc_front/tsconfig.app.json           |   1 +
 7 files changed, 1095 insertions(+), 80 deletions(-)
 create mode 100644 rc_autoplc_front/src/api/tb/devparam.ts
 create mode 100644 rc_autoplc_front/src/assets/image/right.png
 create mode 100644 rc_autoplc_front/src/views/devinfo/plc.vue

diff --git a/rc_autoplc_front/src/api/tb/devparam.ts b/rc_autoplc_front/src/api/tb/devparam.ts
new file mode 100644
index 0000000..75d0e18
--- /dev/null
+++ b/rc_autoplc_front/src/api/tb/devparam.ts
@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+
+export function devparamadd(data: any) {
+  return request({
+    url: '/devParam/add',
+    method: 'post',
+    data,
+  })
+}
+
+export function devparamdel(id: string | number) {
+  return request({
+    url: `/devParam/del/${id}`,
+    method: 'delete',
+  })
+}
+
+export function devparamupd(data: any) {
+  return request({
+    url: '/devParam/update',
+    method: 'put',
+    data,
+  })
+}
+
+export function devparamlist(data: any) {
+  return request({
+    url: '/devParam/listPage',
+    method: 'get',
+    params: data,
+  })
+}
+
+export function devparambyid(id: string | number) {
+  return request({
+    url: `/devParam/getById/${id}`,
+    method: 'get',
+  })
+}
+
+export function devparamselect(data: any) {
+  return request({
+    url: '/devParam/list',
+    method: 'get',
+    params: data,
+  })
+}
\ No newline at end of file
diff --git a/rc_autoplc_front/src/assets/image/right.png b/rc_autoplc_front/src/assets/image/right.png
new file mode 100644
index 0000000000000000000000000000000000000000..0237eb9c7979ae2a32afa0381e79fee2d950da79
GIT binary patch
literal 4216
zcmds*`#+QK<HxtzYR2R+F_Ps_ww!XN!lJf0A4@q*gcMREXKhm$%36|R&V-y}iOo4@
zshmPcBD@_-4vFu2KR!Qv|Ao)zhx@*Mx$ehx->=7gy<X4PMYAx&!C_)B0000d;0>)f
zW5?eMdVq5;u`7Mf8Gs}!+&MsL-;sF$fM11Rh_wlHT1pRzbMO~#Z}6x=(6;ac&e_h>
z;ubC_(KyddK3l1+nDe2pK0D6#CB}%}U+13`Hl$XgG+_Rx14fHbscNk+JQK=EOtnb<
zpjPnOdFZh<0ot*8!|`<2<$o@YesFUS-yGiz*jrjjo7B!A={dNsq=!Iu=>Tqdf__IN
z81L)}Lfpq4<gSMTVa+WOU^!?!P|#PpQ8ijz^MdVt0Hm-Z^HaV!5H|hxp{4LKeJn=h
zdd>U=GWGRsSDW)t3wjK1iuW6VOq9>KsI349kt-G9p6UaZ`=59my_(5N^r1Q<$jk<~
zrPmTD#67jLpt0mzz8{Q{YRT)=QKWC4#HGRGJH)W0#<oO;2CTkx2-4!n;M{&*roG--
zEJo<}Q^iJg2_k#omc)J-N9|l^T$IT7&j2%tS6%{MOKLOC*kRJ=Ca@fy@+dmk{!+2a
zX1^@Y-TQD)UWs;q1sx;-&QbU*MSW-{d-ATHcGOykMu)1|nlL;Y1rgi5o>>R6lgODN
zKJ0OwezdV3FRG0ZHp0Txe3bh8DEB`2qa7)eaRbV_q|!4pg2ZZ3m{lgt9x7OUk~)c2
z7SNd4165}b3K23w|M;X{;r=k@xT^d{^iXQ$yONX}hL&_t?<X7ji(753u(%&ZzdsxV
zLJBKUJS@F2Ta$mhyZk5?xfd}I0^EQ1Vb43%!2}tqd%-d6E~fh_g^IZToB*rbV$Eci
zAJarY3DbF2^j3i}Z~AK#PhPm}&u=&Ciel4goO$7BZo#mi1`V$+VaT~BcAU34_39VR
zT1aMx>)G_dD%09VcC3qAE((%zDTOM(D=b>)9+oV}FZII;9j*OgMlfHY!{r21ff!jq
zjPL%~>7O{+gOF*c3c|V}xdk2l8^W&fx!TruKBijGvE1Vi6yG)zw!1TdZgx11P;EVZ
zsCTNtnPY7u6NK6_{SlX^Mp&0G#+q6OsfKVpt3{VkcdK9dV__O~mUOSzr<WEm(I8Ep
z^0%HJTfpemGCZR%clQIv!|8_wz20nA*}oP>4I0RcRL9ue8Z3oAw{8pk-d%E0`$tj~
zb>=q4cmRQ;`?BtD=$BbfxqM9=j$(Uh_9dtKA!Iajz7z2d*ldY<{j!*4=0d~R)JepM
z)?)WY1P<XL3qkk2%#Ija(wzVC0_Q>hQxdGe0#R?u+lx#sN)St5^(03*AY=|%i<Tca
zi9P&ICWEWozp>=tmE+Xj^hgKY{%NW_=a)eaOk=(89QZW3emxTo^a1<kA`i5gUbXJi
z?0$Az3dUFiM1GoB=Uu-?7!5Wv7i=qzEX;d1DjCI&L(X=~3qv}2|E!9iIEJ@5&nofo
z7uJONj<4D(AlItCb(hzC*VMM+Z;_Uow;^zUcp}qpX*&*WTDuq~rz}mazG|@N^Hg=|
z3_`|x`qVFDEBcF<AGyxf@{FtXeEj;mTAErnNAV94U!M!V`D1GZAro(XIXgcWLaTB7
zG{hW0=*9hx{%CL|P?<4fMqF0lUv?@)<mw9<8_=QcMd-8c;o$d!Ylo22K{n)yM@m(Z
z+Ct_}U!a`q%?(6^Fj@ri6Tp%5K-~D$12A8$g%&h>(`3;Sr~5#IY|d91-l!gL3}4il
zJ3M#1o#UgRbg;5IN=wn0L5@KE?nc62$&zo`O`HKQHb?FbD0{dR3JSE|TvV_K#Z(j}
z2Wo*%foU3I@Sg{OCd9A#)F1BRjNkj@6dtQv^RHod`82VmW(oQx*zC~-O1Lpa>B<l~
z##qO+woj$NUy+2ZuUU?mW(_@1A@YI_Pz~!sDB;LPO;?-sW{bA`a`dEfuV+$^6J0+8
zu&UA`mW)vZN@If=uQq;I*freyb2>}uS(~>iEzlafpb(Y{+oKz1^&lh2S*X}af|#J=
zNdfs-%fYOyv2#RS*Q9qcPYY2K3BjURzjm~qwv;j`Eig){fhk|eHh4GWvvQ^LWXbx4
zhV+aLw-Q_3*fWS$stcQRMtFzOvA<sGHIG!s{xo|$jFj5a-g~J21+t!S)ojiN(Ta3D
z1<GNL_U$l6Bu%qpn?~Er1nLLrc&&Zn%UV*zZm)8IH3l|)zeEeG?mQT$q)ND0kLeeh
zB};PqR({cKNKb7U4V&xC;3e^;$5446zSIK3LPLh0Ddk$Ob?L{K0QG?7&AttKLu7ST
z<irdf%Uh6KY(xEg)j;>TyXneUep%9K5EG#F@dgpHCq`flnm$6b-e7EZk|Ysz&G~l3
zV$qidwriu&6G=CZ7XZxV$~As|6NwPM%EahVdvbh+FK(!G3Iwjx_NSWu8f?&a_QX(P
z(Y)y+F@nmXv0tRo(i3s)Iikr;!b6ni6$V-4y5Hg7^|Dex4Zl!Yc>mL`_Me$?q%1l$
zS7l{Dvyi!AWE(o@=h~Kc)w(8W)<FshAw=A1+gt^)5RLBEyj0Vx(%Y#=(9!b)NnU7>
zQ>J+Nsy?*)U1I+;JiAr*uLGKd%2D3y>nZRI8}&Ro4GGs;G?pPsNmiZ9S=f@0d5nCD
z@eGR!x2R*?ly%>X;`TLe7pW2fOF+}82@9(yFQ}emE_PjkzmE-Yx@osIn5C3o<{y0{
z2NfygQq;s9=p82VDge8t5P{op+`hUPOGD%;kreSUjYWy<+w4eBIkSopY1-*$=;*d<
zNiE5ZG5SPR>O^uY$!t9|bNd!iF1pDkN$My?wV?o~OH#{+Y~kxo$QxxR(D-qhvaSY&
zl<&W-m$8t3URO*L385L&*J`E8Zxpa^_^<<hX?@OA-cw2h8s>L!Q$8{m#b<HK3NZop
z39U-=hY`urBH;R^9X@Ej0&#?kd~de5&F`|IJcw1Wr{ut;t#L6sA|fcOpZ~bEo1wFx
z(WH_z%igrdNvzA>R7LDKvszYp^g}#t${nCo(bbbGT!L3I&j()^(>WgF`1btj-2m52
zlV?Cmu)SV!%u1?HucS%x^tH-3=l~bXfpXK7IcM%;dRyi41u(~lLC(QE!ETbH0Nr0F
zhOVYD+xG&!Sw~}HUDW-3eXAvZyFx1$3M<2W$D57s))>5hB?gu};&Gl4^!x<9DF>I+
z%hJzb4yUkmQsR$(!={T;)Fhq4-YSO8lSnKcvZRJr^r141`<*sX$LL*)hw^_W)e4Mz
z`QeuL6t{M`j=t{{!cX%Ja~1!pSxmKTi3g;)kHCqUuFxliPHE)rTQa|HF}J23d|%i)
z4UcNPRE})ERs@9F?RP1T-g#AW((wI()qJ3l=yk$8ak_I@|B&C2+=h-F^?rr3)`y)Y
zJhvT+*BcH5ue}R3x6@Tu`jb<5|FjsavNA72RKNtiddI+Ok~^%nM>*p%=3|t`Pq62r
zuAE><ana>DTcc|-cvcA;lN~^cOZsB%1xxMJ%llmIMB;dm#HA*)VXEje0FVp2KyiA}
z2u~cOO*71_ORIW3)4Lt$ZB-o{=j?i8H%pS?x8^U)yQJ^?@au9E+`1{K3Z7iqlWbUO
z2)?|lsKSlf1Te@cb!n%-gsDg4LC~QGaGDRH^UsM>e-o}CE0$Y0O{S3mc+_|HvC84^
zavj%=nbFQU#~AH-k^bqVZ_hX}V9JRB+C`_P8K+E%0*?_L=rlx(1@BsKQ;UZwCl3DZ
zb37yhn>JF6c&!H3_PByO8Y1W|9EYsgnmSXy%!wNHo@65oi~(~`HDw&02^;$<ynhx%
z0Tg><4jB3d$h1#H?ta2}qy)*~Q(n0)Kh5RXEBmOr33io|<hG~hKtT$;gp02S6sLL4
zWuZKU;wy+&RL=H0eOM7t8f`g|m8ECT=Dm6EtfIO2tjSqn2tlIucO(I7HJMd#U1SW9
z$~>cRck^q%NcW2Ja=*(3D|!;(BQNvt%+IAamG+CQy4}DkU4-TXQ|(E4;#-;={w<fN
zdx$Y7Rl@a!$G}=XNn%c3B~Xn3u{*W4>@zc2sGy`~vbr5NC!9WESgP&C2gl#6r~ug$
zYu~!qJUlgI4v{$@rpoI|Ywq;jPOx2sd8KW93oZ@~>N3Ett3A}MZWV65Iq!jb{r>g0
zjVz_Hhosr#5|GYbxg8Nf9RKCWC$<%N`-%}I{7s}H(L-Ui{^ijwr5yA~Ni9YdZKXha
z*phOqWmiPLrgu({`+e7O|5tsjOV~K$Fd2p`hqlD#dfjwjjP8mf>=#F%>-x;t3f7Z5
zL`r!Z<|(zc`I(RJTk3x}&iIX^N1ZsNGjZRd&f|FW)UU_dai1%k_D<O}$=aE4_^ve$
zT<g895-0p8-(dKZHUFhM$ksfCXwYAV?8qD(_ab2LsK)F)$VEqE!j;Docy=z?E(>$e
z;)kgze_Qoc>ry%XlvblW6fLXTJdJ@Oa`wb1d&kB7FOS+!Q=y75ahIK+t)MSwz5XQ<
z6DxiJwbO9g^O3%Hz`t0}7j+*TR8yQZGL|q8%EFh}z!+i+TjI$)*?}gMwNLr~(1?!O
zsvOeq9kk(ZYWePR#;c1BI)-O)ChFYTgqMH?npO}=Q1LqrA?kzCf7h*gfO>C#3wJ{_
zL;KQEjKyLyhgnq&^mgCoP?jHU+x7pg1KBZ}5`5+%$EeiTjBb?T&>|F3myy=8byj>P
znb%0^pG3|#<`gsit1)*EIaWI3M(A(*Z}UzebFa6P|5H$W{(nIUJb)e%sQ4S&kdGE=
zBV~TT()q3Ryzs@X6=R`H6y%JK6k(R!3refLw*7AzVv?7>6<vcdif{8?iW~l5${%-h
z>x#y|Ju1*YR4dWABp;=5BsnjaBNE|Yca0a+f?xbmkChdtB;`i9*=ulWBpm0CMgw71
zADSu^#6gJGNa?DC1ONm*@BAqd4urY1JicsXM5ZSAm3wtZ0w5J%I^<<#^|3}eb~SDW
zWa^0TwM2$sCQ4R9eyozyUcIzbj0xNpbOv9d_b2|$|E}ftxyrLPAwBYV2<IpPKsaw^
JSbENx`hOzZdT0Ou

literal 0
HcmV?d00001

diff --git a/rc_autoplc_front/src/router/index.ts b/rc_autoplc_front/src/router/index.ts
index 982af39..3604ca3 100644
--- a/rc_autoplc_front/src/router/index.ts
+++ b/rc_autoplc_front/src/router/index.ts
@@ -47,6 +47,11 @@ const router = createRouter({
           name: 'devinfo',
           component: () => import('../views/devinfo/index.vue'),
         },
+        {
+          path: '/plc-devinfo',
+          name: 'plc-devinfo',
+          component: () => import('../views/devinfo/plc.vue'),
+        },
       ],
     },
   ],
diff --git a/rc_autoplc_front/src/views/Layout.vue b/rc_autoplc_front/src/views/Layout.vue
index 07c079c..44daf7b 100644
--- a/rc_autoplc_front/src/views/Layout.vue
+++ b/rc_autoplc_front/src/views/Layout.vue
@@ -74,6 +74,10 @@
               <el-icon><Monitor /></el-icon>
               <span>设备管理</span>
             </el-menu-item>
+            <el-menu-item index="/plc-devinfo">
+              <el-icon><Connection /></el-icon>
+              <span>PLC设备管理</span>
+            </el-menu-item>
           </el-sub-menu>
         </el-menu>
       </el-aside>
@@ -90,7 +94,7 @@
 import { ref, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { User, Setting, Avatar, OfficeBuilding, Briefcase, Document, CaretBottom, UserFilled, Grid, Monitor } from '@element-plus/icons-vue'
+import { User, Setting, Avatar, OfficeBuilding, Briefcase, Document, CaretBottom, UserFilled, Grid, Monitor, Connection, Plus } from '@element-plus/icons-vue'
 import { useAuthStore } from '@/stores/auth'
 
 const router = useRouter()
diff --git a/rc_autoplc_front/src/views/devinfo/index.vue b/rc_autoplc_front/src/views/devinfo/index.vue
index 0520dee..d68f9d6 100644
--- a/rc_autoplc_front/src/views/devinfo/index.vue
+++ b/rc_autoplc_front/src/views/devinfo/index.vue
@@ -73,26 +73,6 @@
             {{ row.devModel || '暂无' }}
           </template>
         </el-table-column>
-        <el-table-column prop="ipAddr" label="IP地址" min-width="120" show-overflow-tooltip>
-          <template #default="{ row }">
-            {{ row.ipAddr || '暂无' }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="port" label="端口" width="80">
-          <template #default="{ row }">
-            {{ row.port !== null && row.port !== undefined ? row.port : '暂无' }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="protocolType" label="协议" min-width="100" show-overflow-tooltip>
-          <template #default="{ row }">
-            {{ row.protocolType || '暂无' }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="company" label="公司名" min-width="120" show-overflow-tooltip>
-          <template #default="{ row }">
-            {{ row.company || '暂无' }}
-          </template>
-        </el-table-column>
         <el-table-column prop="status" label="状态" width="100" align="center">
           <template #default="{ row }">
             <el-tag :type="getStatusType(row.status)" size="small">
@@ -115,8 +95,17 @@
             {{ row.remark || '暂无' }}
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="150" fixed="right">
+        <el-table-column label="操作" width="220" fixed="right">
           <template #default="{ row }">
+            <el-button
+              type="success"
+              size="small"
+              link
+              @click="handleConfigParams(row)"
+            >
+              <el-icon><Setting /></el-icon>
+              配置参数
+            </el-button>
             <el-button
               type="primary"
               size="small"
@@ -183,36 +172,6 @@
             clearable
           />
         </el-form-item>
-        <el-form-item label="IP地址" prop="ipAddr">
-          <el-input
-            v-model="formData.ipAddr"
-            placeholder="请输入IP地址"
-            clearable
-          />
-        </el-form-item>
-        <el-form-item label="端口" prop="port">
-          <el-input-number
-            v-model="formData.port"
-            placeholder="请输入端口"
-            :min="0"
-            :max="65535"
-            style="width: 100%"
-          />
-        </el-form-item>
-        <el-form-item label="协议" prop="protocolType">
-          <el-input
-            v-model="formData.protocolType"
-            placeholder="请输入协议类型"
-            clearable
-          />
-        </el-form-item>
-        <el-form-item label="公司名" prop="company">
-          <el-input
-            v-model="formData.company"
-            placeholder="请输入公司名"
-            clearable
-          />
-        </el-form-item>
         <el-form-item label="描述" prop="devDesc">
           <el-input
             v-model="formData.devDesc"
@@ -241,13 +200,160 @@
         </div>
       </template>
     </el-drawer>
+
+    <!-- 参数配置对话框 -->
+    <el-dialog
+      v-model="paramDialogVisible"
+      :title="`设备参数配置 - ${currentDevice?.devName || ''}`"
+      width="1200px"
+      :before-close="handleParamDialogClose"
+    >
+      <div class="param-config-container">
+        <!-- 工具栏 -->
+        <div class="param-toolbar">
+          <el-button type="primary" @click="handleAddParamRow">
+            <el-icon><Plus /></el-icon>
+            添加一行
+          </el-button>
+        </div>
+
+        <!-- 参数列表 -->
+        <el-table
+          v-loading="paramLoading"
+          :data="paramList"
+          border
+          stripe
+          style="width: 100%"
+          :empty-text="paramEmptyText"
+        >
+          <el-table-column type="index" label="序号" width="60" :index="getParamIndex" />
+          
+          <!-- 参数名称 -->
+          <el-table-column label="参数名称" min-width="120">
+            <template #default="{ row }">
+              <el-input
+                v-if="row.isEditing"
+                v-model="row.paramName"
+                placeholder="请输入参数名称"
+                size="small"
+              />
+              <span v-else>{{ row.paramName || '暂无' }}</span>
+            </template>
+          </el-table-column>
+
+          <!-- 参数类型 -->
+          <el-table-column label="参数类型" min-width="120">
+            <template #default="{ row }">
+              <el-select
+                v-if="row.isEditing"
+                v-model="row.paramType"
+                placeholder="请选择参数类型"
+                size="small"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="type in paramTypeOptions"
+                  :key="type.value"
+                  :label="type.label"
+                  :value="type.value"
+                />
+              </el-select>
+              <span v-else>{{ row.paramType || '暂无' }}</span>
+            </template>
+          </el-table-column>
+
+          <!-- 参数单位 -->
+          <el-table-column label="参数单位" min-width="100">
+            <template #default="{ row }">
+              <el-input
+                v-if="row.isEditing"
+                v-model="row.paramUnit"
+                placeholder="请输入参数单位"
+                size="small"
+              />
+              <span v-else>{{ row.paramUnit || '暂无' }}</span>
+            </template>
+          </el-table-column>
+
+          <!-- 表单控件 -->
+          <el-table-column label="表单控件" min-width="120">
+            <template #default="{ row }">
+              <el-select
+                v-if="row.isEditing"
+                v-model="row.formType"
+                placeholder="请选择表单控件"
+                size="small"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="form in formTypeOptions"
+                  :key="form.value"
+                  :label="form.label"
+                  :value="form.value"
+                />
+              </el-select>
+              <span v-else>{{ row.formType || '暂无' }}</span>
+            </template>
+          </el-table-column>
+
+          <!-- 操作列 -->
+          <el-table-column label="操作" width="180" fixed="right">
+            <template #default="{ row }">
+              <el-button
+                v-if="row.isEditing"
+                type="primary"
+                size="small"
+                link
+                @click="handleSaveParam(row)"
+              >
+                <el-icon><Check /></el-icon>
+                保存
+              </el-button>
+              <el-button
+                v-else
+                type="primary"
+                size="small"
+                link
+                @click="handleEditParam(row)"
+              >
+                <el-icon><Edit /></el-icon>
+                编辑
+              </el-button>
+              <el-button
+                type="danger"
+                size="small"
+                link
+                @click="handleDeleteParam(row)"
+              >
+                <el-icon><Delete /></el-icon>
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <!-- 分页 -->
+        <div class="param-pagination">
+          <el-pagination
+            v-model:current-page="paramPagination.pageNum"
+            v-model:page-size="paramPagination.pageSize"
+            :page-sizes="[10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="paramTotal"
+            background
+            @current-change="handleParamCurrentChange"
+            @size-change="handleParamSizeChange"
+          />
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Edit, Delete } from '@element-plus/icons-vue'
+import { Plus, Edit, Delete, Setting, Check } from '@element-plus/icons-vue'
 import {
   devInfoadd,
   devInfodel,
@@ -256,6 +362,13 @@ import {
   devInfobyid,
 } from '@/api/tb/devinfo'
 import { islandInfobyid, islandInfolist } from '@/api/tb/islandinfo'
+import {
+  devparamadd,
+  devparamdel,
+  devparamupd,
+  devparamlist,
+  devparambyid,
+} from '@/api/tb/devparam'
 
 // 加载状态
 const loading = ref(false)
@@ -293,10 +406,6 @@ const formData = reactive({
   id: undefined,
   devName: '',
   devModel: '',
-  ipAddr: '',
-  port: undefined,
-  protocolType: '',
-  company: '',
   devDesc: '',
   remark: '',
   status: 0, // 状态自动设置为0
@@ -396,6 +505,8 @@ const getDeviceList = async () => {
     if (queryForm.islandId !== undefined && queryForm.islandId !== null) {
       params.islandId = queryForm.islandId
     }
+    // 排除 devModel 为 PLC 的设备
+    params.devModelNot = 'PLC'
     
     const res: any = await devInfolist(params)
     
@@ -415,10 +526,16 @@ const getDeviceList = async () => {
         ? data
         : []
 
-    const totalValue =
-      data.total ?? data.count ?? data.totalCount ?? records.length ?? 0
+    // 过滤掉 devModel 为 PLC 的设备（前端过滤作为备用）
+    const filteredRecords = records.filter((item: any) => {
+      const devModel = item.devModel || ''
+      return devModel.toUpperCase() !== 'PLC'
+    })
 
-    deviceList.value = records
+    const totalValue =
+      data.total ?? data.count ?? data.totalCount ?? filteredRecords.length ?? 0
+
+    deviceList.value = filteredRecords
     total.value = Number(totalValue) || 0
   } catch (error) {
     console.error('获取设备列表失败:', error)
@@ -467,10 +584,6 @@ const resetForm = () => {
   formData.id = undefined
   formData.devName = ''
   formData.devModel = ''
-  formData.ipAddr = ''
-  formData.port = undefined
-  formData.protocolType = ''
-  formData.company = ''
   formData.devDesc = ''
   formData.remark = ''
   formData.status = 0
@@ -488,10 +601,6 @@ const handleEdit = async (item: any) => {
     formData.id = data.id ?? item.id
     formData.devName = data.devName ?? ''
     formData.devModel = data.devModel ?? ''
-    formData.ipAddr = data.ipAddr ?? ''
-    formData.port = data.port ?? undefined
-    formData.protocolType = data.protocolType ?? ''
-    formData.company = data.company ?? ''
     formData.devDesc = data.devDesc ?? ''
     formData.remark = data.remark ?? ''
     formData.status = data.status ?? 0
@@ -581,18 +690,6 @@ const handleSubmit = async () => {
     if (formData.devModel) {
       submitData.devModel = formData.devModel
     }
-    if (formData.ipAddr) {
-      submitData.ipAddr = formData.ipAddr
-    }
-    if (formData.port !== undefined && formData.port !== null) {
-      submitData.port = formData.port
-    }
-    if (formData.protocolType) {
-      submitData.protocolType = formData.protocolType
-    }
-    if (formData.company) {
-      submitData.company = formData.company
-    }
     if (formData.devDesc) {
       submitData.devDesc = formData.devDesc
     }
@@ -638,6 +735,266 @@ const handleDrawerClose = () => {
   resetForm()
 }
 
+// 参数配置相关
+const paramDialogVisible = ref(false)
+const paramLoading = ref(false)
+const paramList = ref<any[]>([])
+const paramTotal = ref(0)
+const currentDevice = ref<any>(null)
+const paramEmptyText = ref('该设备暂无参数，请完成配置')
+
+const paramPagination = reactive({
+  pageNum: 1,
+  pageSize: 10,
+})
+
+// 参数类型选项（固定数据类型）
+const paramTypeOptions = [
+  { label: '字符串', value: 'string' },
+  { label: '整数', value: 'integer' },
+  { label: '浮点数', value: 'float' },
+  { label: '布尔值', value: 'boolean' },
+  { label: '日期', value: 'date' },
+  { label: '时间', value: 'datetime' },
+  { label: 'JSON', value: 'json' },
+]
+
+// 表单控件选项（常用表单控件）
+const formTypeOptions = [
+  { label: '输入框', value: 'input' },
+  { label: '文本域', value: 'textarea' },
+  { label: '数字输入框', value: 'number' },
+  { label: '下拉选择', value: 'select' },
+  { label: '单选按钮', value: 'radio' },
+  { label: '复选框', value: 'checkbox' },
+  { label: '日期选择器', value: 'datepicker' },
+  { label: '时间选择器', value: 'timepicker' },
+  { label: '开关', value: 'switch' },
+]
+
+// 获取参数序号
+const getParamIndex = (index: number) => {
+  return (paramPagination.pageNum - 1) * paramPagination.pageSize + index + 1
+}
+
+// 打开参数配置对话框
+const handleConfigParams = async (row: any) => {
+  currentDevice.value = row
+  paramPagination.pageNum = 1
+  paramPagination.pageSize = 10
+  paramDialogVisible.value = true
+  await getParamList()
+}
+
+// 获取参数列表
+const getParamList = async () => {
+  if (!currentDevice.value?.id) return
+
+  try {
+    paramLoading.value = true
+    const params: any = {
+      pageNum: paramPagination.pageNum,
+      pageSize: paramPagination.pageSize,
+      devId: currentDevice.value.id, // 只查询该设备的参数
+    }
+
+    const res: any = await devparamlist(params)
+
+    const data = res?.data ?? res ?? {}
+
+    // 兼容多种返回格式
+    const recordsFromData =
+      data.records ||
+      data.list ||
+      data.rows ||
+      data.items ||
+      (Array.isArray(data.data) ? data.data : undefined)
+
+    const records = Array.isArray(recordsFromData)
+      ? recordsFromData
+      : Array.isArray(data)
+        ? data
+        : []
+
+    const totalValue =
+      data.total ?? data.count ?? data.totalCount ?? records.length ?? 0
+
+    // 为每条记录添加编辑状态标识
+    paramList.value = records.map((item: any) => ({
+      ...item,
+      isEditing: false,
+    }))
+    paramTotal.value = Number(totalValue) || 0
+
+    if (paramList.value.length === 0) {
+      paramEmptyText.value = '该设备暂无参数，请完成配置'
+    }
+  } catch (error) {
+    console.error('获取参数列表失败:', error)
+    ElMessage.error('获取参数列表失败')
+    paramList.value = []
+    paramTotal.value = 0
+  } finally {
+    paramLoading.value = false
+  }
+}
+
+// 参数分页大小改变
+const handleParamSizeChange = (size: number) => {
+  paramPagination.pageSize = size
+  getParamList()
+}
+
+// 参数当前页改变
+const handleParamCurrentChange = (page: number) => {
+  paramPagination.pageNum = page
+  getParamList()
+}
+
+// 添加一行参数
+const handleAddParamRow = () => {
+  const newRow = {
+    id: undefined,
+    devId: currentDevice.value?.id,
+    paramName: '',
+    paramType: '',
+    paramUnit: '',
+    formType: '',
+    paramValue: '',
+    isEditing: true,
+    isNew: true, // 标记为新添加的行
+  }
+  paramList.value.unshift(newRow)
+  paramTotal.value += 1
+}
+
+// 编辑参数
+const handleEditParam = (row: any) => {
+  row.isEditing = true
+}
+
+// 保存参数
+const handleSaveParam = async (row: any) => {
+  // 验证必填项
+  if (!row.paramName || row.paramName.trim() === '') {
+    ElMessage.warning('参数名称不能为空')
+    return
+  }
+
+  if (!currentDevice.value?.id) {
+    ElMessage.error('设备ID不存在')
+    return
+  }
+
+  try {
+    paramLoading.value = true
+
+    const submitData: any = {
+      devId: currentDevice.value.id,
+      paramName: row.paramName.trim(),
+    }
+
+    // 添加其他字段（如果非空）
+    if (row.paramType) {
+      submitData.paramType = row.paramType
+    }
+    if (row.paramUnit) {
+      submitData.paramUnit = row.paramUnit
+    }
+    if (row.formType) {
+      submitData.formType = row.formType
+    }
+    if (row.paramValue !== undefined && row.paramValue !== null) {
+      submitData.paramValue = row.paramValue
+    }
+
+    let res: any
+    if (row.isNew && !row.id) {
+      // 新增
+      res = await devparamadd(submitData)
+    } else {
+      // 更新 - 需要传入ID，其他字段可选(非空则更新)
+      res = await devparamupd({
+        id: row.id,
+        ...submitData,
+      })
+    }
+
+    if (res?.code === '0' || res?.code === 0 || res?.success) {
+      const wasNew = row.isNew
+      ElMessage.success(wasNew ? '新增成功' : '更新成功')
+      row.isEditing = false
+      row.isNew = false
+      // 如果是新增，刷新列表以获取ID
+      if (wasNew) {
+        await getParamList()
+      }
+    } else {
+      ElMessage.error(res?.message || res?.msg || (row.isNew ? '新增失败' : '更新失败'))
+    }
+  } catch (error) {
+    console.error('保存参数失败:', error)
+    ElMessage.error('保存参数失败')
+  } finally {
+    paramLoading.value = false
+  }
+}
+
+// 删除参数
+const handleDeleteParam = async (row: any) => {
+  try {
+    // 如果是新添加的行（还未保存），直接从列表中移除
+    if (row.isNew && !row.id) {
+      const index = paramList.value.findIndex((item) => item === row)
+      if (index > -1) {
+        paramList.value.splice(index, 1)
+        paramTotal.value -= 1
+      }
+      return
+    }
+
+    if (!row.id) {
+      ElMessage.warning('无法删除：参数ID不存在')
+      return
+    }
+
+    await ElMessageBox.confirm(
+      `确定要删除参数"${row.paramName || '未命名'}"吗？`,
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+    )
+
+    paramLoading.value = true
+    const res: any = await devparamdel(row.id)
+
+    if (res?.code === '0' || res?.code === 0 || res?.success) {
+      ElMessage.success('删除成功')
+      await getParamList()
+    } else {
+      ElMessage.error(res?.message || res?.msg || '删除失败')
+    }
+  } catch (error: any) {
+    if (error !== 'cancel') {
+      console.error('删除参数失败:', error)
+      ElMessage.error('删除参数失败')
+    }
+  } finally {
+    paramLoading.value = false
+  }
+}
+
+// 关闭参数配置对话框
+const handleParamDialogClose = () => {
+  paramDialogVisible.value = false
+  paramList.value = []
+  paramTotal.value = 0
+  currentDevice.value = null
+}
+
 // 初始化
 onMounted(() => {
   getIslandList().then(() => {
@@ -682,5 +1039,23 @@ onMounted(() => {
   justify-content: flex-end;
   gap: 10px;
 }
+
+.param-config-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.param-toolbar {
+  display: flex;
+  justify-content: flex-start;
+  gap: 8px;
+}
+
+.param-pagination {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
 </style>
 
diff --git a/rc_autoplc_front/src/views/devinfo/plc.vue b/rc_autoplc_front/src/views/devinfo/plc.vue
new file mode 100644
index 0000000..e954c0d
--- /dev/null
+++ b/rc_autoplc_front/src/views/devinfo/plc.vue
@@ -0,0 +1,583 @@
+<template>
+  <div class="plc-devinfo-page">
+    <!-- 搜索栏 -->
+    <el-card class="search-card" shadow="never">
+      <div class="search-bar">
+        <el-form :inline="true" :model="queryForm" label-width="100px">
+          <el-form-item label="设备名称">
+            <el-input
+              v-model="queryForm.devName"
+              placeholder="输入设备名称"
+              clearable
+              style="width: 200px"
+            />
+          </el-form-item>
+          <el-form-item label="设备状态">
+            <el-select
+              v-model="queryForm.status"
+              placeholder="请选择设备状态"
+              clearable
+              style="width: 200px"
+            >
+              <el-option label="空闲" :value="0" />
+              <el-option label="运行" :value="1" />
+              <el-option label="故障" :value="4" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleSearch">查询</el-button>
+            <el-button @click="resetSearch">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <div class="toolbar">
+          <el-button type="primary" @click="handleAdd">
+            <el-icon><Plus /></el-icon>
+            新增PLC设备
+          </el-button>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- PLC设备列表 -->
+    <el-card shadow="never">
+      <el-table
+        v-loading="loading"
+        :data="deviceList"
+        border
+        stripe
+        style="width: 100%"
+      >
+        <el-table-column type="index" label="序号" width="60" :index="getIndex" />
+        <el-table-column prop="devName" label="设备名称" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.devName || '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="devModel" label="设备型号" min-width="100" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.devModel || '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="ipAddr" label="IP地址" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.ipAddr || '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="port" label="端口" width="100" align="center">
+          <template #default="{ row }">
+            {{ row.port || '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="protocolType" label="协议" min-width="100" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.protocolType || '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="company" label="公司名" min-width="120" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.company || '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="getStatusType(row.status)" size="small">
+              {{ getStatusText(row.status) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="devDesc" label="描述" min-width="150" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.devDesc || '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row.remark || '暂无' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="180" fixed="right">
+          <template #default="{ row }">
+            <el-button
+              type="primary"
+              size="small"
+              link
+              @click="handleEdit(row)"
+            >
+              <el-icon><Edit /></el-icon>
+              编辑
+            </el-button>
+            <el-button
+              type="danger"
+              size="small"
+              link
+              @click="handleDelete(row)"
+            >
+              <el-icon><Delete /></el-icon>
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.pageNum"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          background
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 新增/编辑抽屉 -->
+    <el-drawer
+      v-model="drawerVisible"
+      :title="drawerTitle"
+      direction="rtl"
+      size="500px"
+      :before-close="handleDrawerClose"
+    >
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="100px"
+        label-position="left"
+      >
+        <el-form-item label="设备名称" prop="devName">
+          <el-input
+            v-model="formData.devName"
+            placeholder="请输入设备名称"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="设备型号">
+          <el-input
+            v-model="formData.devModel"
+            disabled
+            placeholder="PLC"
+          />
+        </el-form-item>
+        <el-form-item label="IP地址" prop="ipAddr">
+          <el-input
+            v-model="formData.ipAddr"
+            placeholder="请输入IP地址"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="端口" prop="port">
+          <el-input-number
+            v-model="formData.port"
+            :min="1"
+            :max="65535"
+            placeholder="请输入端口"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="协议" prop="protocolType">
+          <el-input
+            v-model="formData.protocolType"
+            placeholder="请输入协议类型"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="公司名" prop="company">
+          <el-input
+            v-model="formData.company"
+            placeholder="请输入公司名"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="描述" prop="devDesc">
+          <el-input
+            v-model="formData.devDesc"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入描述"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            v-model="formData.remark"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入备注"
+            clearable
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="drawer-footer">
+          <el-button @click="handleDrawerClose">取消</el-button>
+          <el-button type="primary" @click="handleSubmit" :loading="submitting">
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Edit, Delete } from '@element-plus/icons-vue'
+import {
+  devInfoadd,
+  devInfodel,
+  devInfoupd,
+  devInfolist,
+  devInfobyid,
+} from '@/api/tb/devinfo'
+
+// 加载状态
+const loading = ref(false)
+const submitting = ref(false)
+
+// 设备列表
+const deviceList = ref<any[]>([])
+const total = ref(0)
+
+// 查询表单
+const queryForm = reactive({
+  devName: '',
+  status: undefined as number | undefined,
+})
+
+// 分页
+const pagination = reactive({
+  pageNum: 1,
+  pageSize: 10,
+})
+
+// 抽屉相关
+const drawerVisible = ref(false)
+const drawerTitle = ref('新增PLC设备')
+const isEdit = ref(false)
+const formRef = ref()
+
+// 表单数据
+const formData = reactive({
+  id: undefined,
+  devName: '',
+  devModel: 'PLC',
+  ipAddr: '',
+  port: undefined as number | undefined,
+  protocolType: '',
+  company: '',
+  devDesc: '',
+  remark: '',
+  status: 0, // 状态自动设置为0
+})
+
+// 表单验证规则
+const formRules = {
+  devName: [
+    { required: true, message: '请输入设备名称', trigger: 'blur' },
+  ],
+}
+
+// 获取序号
+const getIndex = (index: number) => {
+  return (pagination.pageNum - 1) * pagination.pageSize + index + 1
+}
+
+// 获取状态类型
+const getStatusType = (status: number | null | undefined) => {
+  if (status === 0) return 'success' // 空闲 - 绿色
+  if (status === 1) return 'warning' // 运行 - 黄色
+  if (status === 4) return 'danger' // 故障 - 红色
+  return 'info'
+}
+
+// 获取状态文本
+const getStatusText = (status: number | null | undefined) => {
+  if (status === 0) return '空闲'
+  if (status === 1) return '运行'
+  if (status === 4) return '故障'
+  return '未知'
+}
+
+// 获取设备列表（只查询devModel为PLC的设备）
+const getDeviceList = async () => {
+  try {
+    loading.value = true
+    const params: any = {
+      pageNum: pagination.pageNum,
+      pageSize: pagination.pageSize,
+      devModel: 'PLC', // 只查询PLC设备
+    }
+    
+    // 设备名称模糊查询
+    if (queryForm.devName) {
+      params.devName = queryForm.devName
+    }
+    // 设备状态精确查询
+    if (queryForm.status !== undefined && queryForm.status !== null) {
+      params.status = queryForm.status
+    }
+    
+    const res: any = await devInfolist(params)
+    
+    const data = res?.data ?? res ?? {}
+    
+    // 兼容多种返回格式
+    const recordsFromData =
+      data.records ||
+      data.list ||
+      data.rows ||
+      data.items ||
+      (Array.isArray(data.data) ? data.data : undefined)
+
+    const records = Array.isArray(recordsFromData)
+      ? recordsFromData
+      : Array.isArray(data)
+        ? data
+        : []
+
+    // 再次过滤，确保只显示PLC设备
+    const plcRecords = records.filter((item: any) => item.devModel === 'PLC')
+
+    const totalValue =
+      data.total ?? data.count ?? data.totalCount ?? plcRecords.length ?? 0
+
+    deviceList.value = plcRecords
+    total.value = Number(totalValue) || 0
+  } catch (error) {
+    console.error('获取PLC设备列表失败:', error)
+    ElMessage.error('获取PLC设备列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 查询
+const handleSearch = () => {
+  pagination.pageNum = 1
+  getDeviceList()
+}
+
+// 重置查询
+const resetSearch = () => {
+  queryForm.devName = ''
+  queryForm.status = undefined
+  handleSearch()
+}
+
+// 分页大小改变
+const handleSizeChange = (size: number) => {
+  pagination.pageSize = size
+  getDeviceList()
+}
+
+// 当前页改变
+const handleCurrentChange = (page: number) => {
+  pagination.pageNum = page
+  getDeviceList()
+}
+
+// 打开新增抽屉
+const handleAdd = () => {
+  isEdit.value = false
+  drawerTitle.value = '新增PLC设备'
+  resetForm()
+  drawerVisible.value = true
+}
+
+// 重置表单
+const resetForm = () => {
+  formData.id = undefined
+  formData.devName = ''
+  formData.devModel = 'PLC'
+  formData.ipAddr = ''
+  formData.port = undefined
+  formData.protocolType = ''
+  formData.company = ''
+  formData.devDesc = ''
+  formData.remark = ''
+  formData.status = 0
+  formRef.value?.clearValidate()
+}
+
+// 编辑设备
+const handleEdit = async (item: any) => {
+  try {
+    loading.value = true
+    const res: any = await devInfobyid(item.id)
+    
+    const data = res?.data ?? res ?? {}
+    
+    formData.id = data.id ?? item.id
+    formData.devName = data.devName ?? ''
+    formData.devModel = data.devModel ?? 'PLC'
+    formData.ipAddr = data.ipAddr ?? ''
+    formData.port = data.port ?? undefined
+    formData.protocolType = data.protocolType ?? ''
+    formData.company = data.company ?? ''
+    formData.devDesc = data.devDesc ?? ''
+    formData.remark = data.remark ?? ''
+    formData.status = data.status ?? 0
+    
+    isEdit.value = true
+    drawerTitle.value = '编辑PLC设备'
+    drawerVisible.value = true
+  } catch (error) {
+    console.error('获取PLC设备信息失败:', error)
+    ElMessage.error('获取PLC设备信息失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 删除设备
+const handleDelete = async (item: any) => {
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除PLC设备"${item.devName || '未命名'}"吗？`,
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+    )
+    
+    loading.value = true
+    const res: any = await devInfodel(item.id)
+    
+    if (res?.code === '0' || res?.code === 0 || res?.success) {
+      ElMessage.success('删除成功')
+      getDeviceList()
+    } else {
+      ElMessage.error(res?.message || res?.msg || '删除失败')
+    }
+  } catch (error: any) {
+    if (error !== 'cancel') {
+      console.error('删除PLC设备失败:', error)
+      ElMessage.error('删除PLC设备失败')
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  if (!formRef.value) return
+  
+  try {
+    await formRef.value.validate()
+    submitting.value = true
+    
+    // 构建提交数据，只包含非空字段（根据后端要求：非空则入库/更新）
+    const submitData: any = {
+      devName: formData.devName,
+      devModel: 'PLC', // 设备型号固定为PLC
+      status: 0, // 状态自动设置为0
+    }
+    
+    // 添加其他字段（如果非空）
+    if (formData.ipAddr) {
+      submitData.ipAddr = formData.ipAddr
+    }
+    if (formData.port !== undefined && formData.port !== null) {
+      submitData.port = formData.port
+    }
+    if (formData.protocolType) {
+      submitData.protocolType = formData.protocolType
+    }
+    if (formData.company) {
+      submitData.company = formData.company
+    }
+    if (formData.devDesc) {
+      submitData.devDesc = formData.devDesc
+    }
+    if (formData.remark) {
+      submitData.remark = formData.remark
+    }
+    
+    let res: any
+    if (isEdit.value && formData.id) {
+      // 编辑 - 需要传入ID，其他字段可选(非空则更新)
+      res = await devInfoupd({
+        id: formData.id,
+        ...submitData,
+      })
+    } else {
+      // 新增
+      res = await devInfoadd(submitData)
+    }
+    
+    if (res?.code === '0' || res?.code === 0 || res?.success) {
+      ElMessage.success(isEdit.value ? '编辑成功' : '新增成功')
+      drawerVisible.value = false
+      getDeviceList()
+    } else {
+      ElMessage.error(res?.message || res?.msg || (isEdit.value ? '编辑失败' : '新增失败'))
+    }
+  } catch (error: any) {
+    if (error !== false) {
+      console.error('提交失败:', error)
+      ElMessage.error('提交失败，请检查表单')
+    }
+  } finally {
+    submitting.value = false
+  }
+}
+
+// 关闭抽屉
+const handleDrawerClose = () => {
+  drawerVisible.value = false
+  resetForm()
+}
+
+// 初始化
+onMounted(() => {
+  getDeviceList()
+})
+</script>
+
+<style lang="scss" scoped>
+.plc-devinfo-page {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.search-card {
+  padding-bottom: 4px;
+}
+
+.search-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pagination {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>
+
diff --git a/rc_autoplc_front/tsconfig.app.json b/rc_autoplc_front/tsconfig.app.json
index 913b8f2..ba6658c 100644
--- a/rc_autoplc_front/tsconfig.app.json
+++ b/rc_autoplc_front/tsconfig.app.json
@@ -1,4 +1,5 @@
 {
+  
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/*"],