调整设备列表展示内容

src/components/DeviceList.vue

@@ -27,19 +27,27 @@
       </div>
       
       <!-- 设备列表 -->
-      <el-table v-else :data="devices" style="width: 100%">
+      <el-table 
-        <el-table-column prop="id" label="设备ID" width="180" />
+        v-else 
-        <el-table-column prop="name" label="设备名称" width="180" />
+        :data="devices" 
-        <el-table-column prop="type" label="设备类型" />
+        style="width: 100%"
-        <el-table-column prop="status" label="状态">
+        :fit="true"
+        table-layout="auto">
+        <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">
           <template #default="scope">
-            <el-tag :type="scope.row.status === 'online' ? 'success' : 'danger'">
+            {{ formatDeviceType(scope.row.type) }}
-              {{ scope.row.status === 'online' ? '在线' : '离线' }}
-            </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="lastUpdate" label="最后更新" />
+        <el-table-column prop="sub_type" label="设备子类型" min-width="100">
-        <el-table-column label="操作">
+          <template #default="scope">
+            {{ formatDeviceSubType(scope.row.sub_type) }}
+          </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>
             <el-button size="small" type="danger" @click="deleteDevice(scope.row)">删除</el-button>
@@ -71,6 +79,7 @@ export default {
   data() {
     return {
       devices: [],
+      allDevices: [], // 存储所有设备用于查找上级设备
       loading: false,
       error: null,
       saving: false,
@@ -90,12 +99,22 @@ export default {
       
       try {
         const data = await deviceService.getDevices();
-        this.devices = data.map(device => ({
+        // 保存所有设备数据
-          ...device,
+        this.allDevices = data;
-          // 格式化数据显示
+        // 处理设备数据，添加上级设备名称
-          type: this.formatDeviceType(device.type),
+        this.devices = data.map(device => {
-          lastUpdate: device.updated_at || '-'
+          // 查找上级设备名称
-        }));
+          let parentName = '-';
+          if (device.parent_id) {
+            const parentDevice = data.find(d => d.id === device.parent_id);
+            parentName = parentDevice ? parentDevice.name : '-';
+          }
+          
+          return {
+            ...device,
+            parentName
+          };
+        });
       } catch (err) {
         this.error = err.message || '未知错误';
         console.error('加载设备列表失败:', err);
@@ -107,11 +126,24 @@ export default {
     // 格式化设备类型显示
     formatDeviceType(type) {
       const typeMap = {
-        'sensor': '传感器',
+        'area_controller': '区域主控',
-        'controller': '控制器',
+        'device': '普通设备'
-        'camera': '摄像头'
       };
-      return typeMap[type] || type;
+      return typeMap[type] || type || '-';
+    },
+    
+    // 格式化设备子类型显示
+    formatDeviceSubType(subType) {
+      const subTypeMap = {
+        '': '-',
+        'temperature': '温度传感器',
+        'humidity': '湿度传感器',
+        'ammonia': '氨气传感器',
+        'feed_valve': '饲料阀门',
+        'fan': '风扇',
+        'water_curtain': '水帘'
+      };
+      return subTypeMap[subType] || subType || '-';
     },
     
     addDevice() {
@@ -121,17 +153,7 @@ export default {
     },
     
     editDevice(device) {
-      // 注意：这里需要将显示值转换回API值
+      this.currentDevice = { ...device };
-      const typeMap = {
-        '传感器': 'sensor',
-        '控制器': 'controller',
-        '摄像头': 'camera'
-      };
-      
-      this.currentDevice = { 
-        ...device,
-        type: typeMap[device.type] || device.type
-      };
       this.isEdit = true;
       this.dialogVisible = true;
     },