From d695c3e8d401ae70bf6ade6a17203af9032e06df Mon Sep 17 00:00:00 2001
From: huang <1724659546@qq.com>
Date: Sat, 20 Sep 2025 16:55:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=98=E5=8F=A0=E6=99=AE=E9=80=9A=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DeviceList.vue | 47 +++++++++++++++++++++--------------
 1 file changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/components/DeviceList.vue b/src/components/DeviceList.vue
index 4f22f7a6..26fd5b1a 100644
--- a/src/components/DeviceList.vue
+++ b/src/components/DeviceList.vue
@@ -29,10 +29,13 @@
       <!-- 设备列表 -->
       <el-table 
         v-else 
-        :data="devices" 
+        :data="tableData" 
         style="width: 100%"
         :fit="true"
-        table-layout="auto">
+        table-layout="auto"
+        row-key="id"
+        default-expand-all
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
         <el-table-column prop="id" label="设备ID" min-width="80" />
         <el-table-column prop="name" label="设备名称" min-width="120" />
         <el-table-column prop="type" label="设备类型" min-width="100">
@@ -46,7 +49,6 @@
           </template>
         </el-table-column>
         <el-table-column prop="location" label="设备地址描述" min-width="150" />
-        <el-table-column prop="parentName" label="上级设备名" min-width="120" />
         <el-table-column label="操作" min-width="120" align="center">
           <template #default="scope">
             <el-button size="small" @click="editDevice(scope.row)">编辑</el-button>
@@ -78,8 +80,8 @@ export default {
   },
   data() {
     return {
-      devices: [],
-      allDevices: [], // 存储所有设备用于查找上级设备
+      tableData: [], // 树形表格数据
+      allDevices: [], // 存储所有设备用于构建树形结构
       loading: false,
       error: null,
       saving: false,
@@ -101,20 +103,8 @@ export default {
         const data = await deviceService.getDevices();
         // 保存所有设备数据
         this.allDevices = data;
-        // 处理设备数据，添加上级设备名称
-        this.devices = data.map(device => {
-          // 查找上级设备名称
-          let parentName = '-';
-          if (device.parent_id) {
-            const parentDevice = data.find(d => d.id === device.parent_id);
-            parentName = parentDevice ? parentDevice.name : '-';
-          }
-          
-          return {
-            ...device,
-            parentName
-          };
-        });
+        // 构建树形结构数据
+        this.tableData = this.buildTreeData(data);
       } catch (err) {
         this.error = err.message || '未知错误';
         console.error('加载设备列表失败:', err);
@@ -123,6 +113,25 @@ export default {
       }
     },
     
+    // 构建树形结构数据
+    buildTreeData(devices) {
+      // 先找出所有区域主控设备
+      const areaControllers = devices.filter(device => device.type === 'area_controller');
+      
+      // 为每个区域主控设备添加子设备列表
+      return areaControllers.map(controller => {
+        // 找到属于当前区域主控的所有普通设备
+        const children = devices.filter(device => 
+          device.type === 'device' && device.parent_id === controller.id
+        );
+        
+        return {
+          ...controller,
+          children: children.length > 0 ? children : undefined
+        };
+      });
+    },
+    
     // 格式化设备类型显示
     formatDeviceType(type) {
       const typeMap = {