From 9d36ae6b00c25c5144ea17543902876ee2b5f91f Mon Sep 17 00:00:00 2001
From: huang <1724659546@qq.com>
Date: Mon, 8 Sep 2025 19:56:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8E=BB=E6=8E=89=E8=AE=BE=E5=A4=87=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E4=B8=AD=E7=9A=84status=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TODO-List                            |   6 +
 frontend/device.html                 |  28 --
 frontend/src/pages/Device.vue        | 450 ++++++++++-----------------
 internal/controller/device/device.go |   5 +-
 internal/model/device.go             |   3 -
 5 files changed, 168 insertions(+), 324 deletions(-)
 create mode 100644 TODO-List

diff --git a/TODO-List b/TODO-List
new file mode 100644
index 0000000..07243fc
--- /dev/null
+++ b/TODO-List
@@ -0,0 +1,6 @@
+// TODO 列表
+
+1. websocket不是安全的wss
+2. 添加设备时应该激活一下设备状态采集
+3. 设备Model缺少硬件地址
+
diff --git a/frontend/device.html b/frontend/device.html
index 4d6b379..bc66784 100644
--- a/frontend/device.html
+++ b/frontend/device.html
@@ -292,15 +292,6 @@
             color: white;
         }
 
-        .status-active {
-            color: #28a745;
-            font-weight: bold;
-        }
-
-        .status-inactive {
-            color: #dc3545;
-            font-weight: bold;
-        }
 
         @media (max-width: 768px) {
             .dashboard-grid {
@@ -378,13 +369,6 @@
                             <option value="">请选择上级设备</option>
                         </select>
                     </div>
-                    <div class="form-group">
-                        <label for="deviceStatus">设备状态</label>
-                        <select id="deviceStatus" required>
-                            <option value="active">启用</option>
-                            <option value="inactive">停用</option>
-                        </select>
-                    </div>
                 </form>
             </div>
             <div class="modal-footer">
@@ -450,7 +434,6 @@
                     name: "一号中继器",
                     type: "relay",
                     parent_id: null,
-                    status: "active",
                     created_at: "2023-01-01T00:00:00Z"
                 },
                 {
@@ -458,7 +441,6 @@
                     name: "A区主控",
                     type: "pig_pen_controller",
                     parent_id: 1,
-                    status: "active",
                     created_at: "2023-01-02T00:00:00Z"
                 },
                 {
@@ -466,7 +448,6 @@
                     name: "A区1号风机",
                     type: "fan",
                     parent_id: 2,
-                    status: "active",
                     created_at: "2023-01-03T00:00:00Z"
                 },
                 {
@@ -474,7 +455,6 @@
                     name: "A区2号风机",
                     type: "fan",
                     parent_id: 2,
-                    status: "inactive",
                     created_at: "2023-01-03T00:00:00Z"
                 },
                 {
@@ -482,7 +462,6 @@
                     name: "B区主控",
                     type: "pig_pen_controller",
                     parent_id: 1,
-                    status: "active",
                     created_at: "2023-01-02T00:00:00Z"
                 },
                 {
@@ -490,7 +469,6 @@
                     name: "B区水帘",
                     type: "water_curtain",
                     parent_id: 5,
-                    status: "active",
                     created_at: "2023-01-04T00:00:00Z"
                 }
             ];
@@ -522,7 +500,6 @@
                         <div class="node-title">
                             <span>${relay.name}</span>
                             <span class="node-type relay-type">中继</span>
-                            <span class="status-${relay.status}">${relay.status === 'active' ? '启用' : '停用'}</span>
                         </div>
                         <div class="node-actions">
                             <button class="action-btn edit-btn" onclick="editDevice(${relay.id})">编辑</button>
@@ -565,7 +542,6 @@
                         <div class="node-title">
                             <span>${controller.name}</span>
                             <span class="node-type controller-type">${typeText}</span>
-                            <span class="status-${controller.status}">${controller.status === 'active' ? '启用' : '停用'}</span>
                         </div>
                         <div class="node-actions">
                             <button class="action-btn edit-btn" onclick="editDevice(${controller.id})">编辑</button>
@@ -606,7 +582,6 @@
                         <div class="node-title">
                             <span>${device.name}</span>
                             <span class="node-type device-type">${typeText}</span>
-                            <span class="status-${device.status}">${device.status === 'active' ? '启用' : '停用'}</span>
                         </div>
                         <div class="node-actions">
                             <button class="action-btn edit-btn" onclick="editDevice(${device.id})">编辑</button>
@@ -697,8 +672,6 @@
             const name = document.getElementById('deviceName').value;
             const type = document.getElementById('deviceType').value;
             const parentId = document.getElementById('parentId').value;
-            const status = document.getElementById('deviceStatus').value;
-            
             if (!name || !type) {
                 alert('请填写必填字段');
                 return;
@@ -707,7 +680,6 @@
             const deviceData = {
                 name: name,
                 type: type,
-                status: status,
                 parent_id: parentId ? parseInt(parentId) : null
             };
             
diff --git a/frontend/src/pages/Device.vue b/frontend/src/pages/Device.vue
index 79dbedb..d5292ec 100644
--- a/frontend/src/pages/Device.vue
+++ b/frontend/src/pages/Device.vue
@@ -1,89 +1,22 @@
 <template>
-  <div>
-    <div class="header">
-      <h1>🐷 猪场管理系统</h1>
+  <div class="device-management">
+    <header class="header">
+      <h1>设备管理</h1>
       <div class="user-info">
-        <span>{{ username }}</span>
-        <button class="logout-btn" @click="logout">退出登录</button>
+        <span>欢迎, {{ username }}</span>
+        <button class="logout-btn" @click="logout">退出</button>
       </div>
-    </div>
+    </header>
 
-    <div class="nav">
-      <ul>
-        <li><router-link to="/dashboard">控制台</router-link></li>
-        <li><router-link to="/device" class="active">设备管理</router-link></li>
-      </ul>
-    </div>
-
-    <div class="container">
-      <div class="page-header">
-        <h2>设备管理</h2>
+    <main class="main-content">
+      <div class="toolbar">
         <button class="btn btn-primary" @click="openAddDeviceModal">添加设备</button>
       </div>
 
       <div class="device-tree" id="deviceTree">
         <!-- 设备树将通过JavaScript动态生成 -->
-        <div v-if="devices.length === 0">
-          暂无设备数据
-        </div>
-        
-        <div v-for="relay in relayDevices" :key="relay.id" class="tree-node relay-node">
-          <div class="node-header">
-            <div class="node-title">
-              <span>{{ relay.name }}</span>
-              <span class="node-type relay-type">中继</span>
-              <span :class="'status-' + relay.status">{{ relay.status === 'active' ? '启用' : '停用' }}</span>
-            </div>
-            <div class="node-actions">
-              <button class="action-btn edit-btn" @click="editDevice(relay)">编辑</button>
-              <button class="action-btn delete-btn" @click="deleteDevice(relay.id)">删除</button>
-            </div>
-          </div>
-          
-          <div class="children" v-if="getControllerDevices(relay.id).length > 0">
-            <div 
-              v-for="controller in getControllerDevices(relay.id)" 
-              :key="controller.id" 
-              class="tree-node controller-node"
-            >
-              <div class="node-header">
-                <div class="node-title">
-                  <span>{{ controller.name }}</span>
-                  <span class="node-type controller-type">
-                    {{ getDeviceTypeText(controller.type) }}
-                  </span>
-                  <span :class="'status-' + controller.status">{{ controller.status === 'active' ? '启用' : '停用' }}</span>
-                </div>
-                <div class="node-actions">
-                  <button class="action-btn edit-btn" @click="editDevice(controller)">编辑</button>
-                  <button class="action-btn delete-btn" @click="deleteDevice(controller.id)">删除</button>
-                </div>
-              </div>
-              
-              <div class="children" v-if="getLeafDevices(controller.id).length > 0">
-                <div 
-                  v-for="device in getLeafDevices(controller.id)" 
-                  :key="device.id" 
-                  class="tree-node device-node"
-                >
-                  <div class="node-header">
-                    <div class="node-title">
-                      <span>{{ device.name }}</span>
-                      <span class="node-type device-type">{{ getDeviceTypeText(device.type) }}</span>
-                      <span :class="'status-' + device.status">{{ device.status === 'active' ? '启用' : '停用' }}</span>
-                    </div>
-                    <div class="node-actions">
-                      <button class="action-btn edit-btn" @click="editDevice(device)">编辑</button>
-                      <button class="action-btn delete-btn" @click="deleteDevice(device.id)">删除</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
-    </div>
+    </main>
 
     <!-- 添加/编辑设备模态框 -->
     <div class="modal" v-if="showModal">
@@ -119,7 +52,7 @@
                   :key="parent.id" 
                   :value="parent.id"
                 >
-                  {{ parent.display_name }}
+                  {{ parent.name }}
                 </option>
               </select>
             </div>
@@ -204,26 +137,12 @@ export default {
       if (currentType === 'pig_pen_controller' || currentType === 'feed_mill_controller') {
         // 控制器的上级是中继设备
         return this.devices.filter(device => device.type === 'relay')
-          .map(relay => ({
-            ...relay,
-            display_name: relay.name
-          }));
       } else if (currentType === 'fan' || currentType === 'water_curtain') {
         // 设备的上级是控制器
-        // 找到所有控制器设备，并添加其上级中继设备的名称作为前缀
-        const controllers = this.devices.filter(device => 
-          device.type === 'pig_pen_controller' || device.type === 'feed_mill_controller');
-        
-        return controllers.map(controller => {
-          // 查找控制器的上级中继设备
-          const relay = this.devices.find(device => device.id === controller.parent_id);
-          return {
-            ...controller,
-            display_name: relay ? `${relay.name} - ${controller.name}` : controller.name
-          };
-        });
+        return this.devices.filter(device => 
+          device.type === 'pig_pen_controller' || device.type === 'feed_mill_controller')
       }
-      return [];
+      return []
     },
     
     // 加载设备列表
@@ -263,7 +182,6 @@ export default {
     editDevice(device) {
       this.editingDevice = device
       this.deviceForm = { ...device }
-      delete this.deviceForm.status
       this.showModal = true
     },
     
@@ -285,49 +203,45 @@ export default {
       }
       
       try {
-        let response
+        let url, method
+        const deviceData = {
+          name: this.deviceForm.name,
+          type: this.deviceForm.type,
+          parent_id: this.deviceForm.parent_id
+        }
+        
         if (this.editingDevice) {
           // 更新设备
-          response = await fetch('/api/v1/device/update', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-              'Authorization': 'Bearer ' + localStorage.getItem('authToken')
-            },
-            body: JSON.stringify({
-              id: this.deviceForm.id,
-              name: this.deviceForm.name,
-              type: this.deviceForm.type,
-              parent_id: this.deviceForm.parent_id
-            })
-          })
+          url = '/api/v1/device/update'
+          method = 'POST'
+          deviceData.id = this.deviceForm.id
         } else {
           // 创建设备
-          response = await fetch('/api/v1/device/create', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-              'Authorization': 'Bearer ' + localStorage.getItem('authToken')
-            },
-            body: JSON.stringify({
-              name: this.deviceForm.name,
-              type: this.deviceForm.type,
-              parent_id: this.deviceForm.parent_id
-            })
-          })
+          url = '/api/v1/device/create'
+          method = 'POST'
         }
         
+        const response = await fetch(url, {
+          method: method,
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': 'Bearer ' + localStorage.getItem('authToken')
+          },
+          body: JSON.stringify(deviceData)
+        })
+        
         const data = await response.json()
         
         if (response.ok && data.code === 0) {
+          // 保存成功，重新加载设备列表
+          await this.loadDevices()
           this.closeDeviceModal()
-          this.loadDevices() // 重新加载设备列表
         } else {
-          alert('操作失败: ' + data.message)
+          alert('保存失败: ' + data.message)
         }
       } catch (error) {
-        console.error('操作失败:', error)
-        alert('操作失败，请查看控制台了解详情')
+        console.error('保存设备失败:', error)
+        alert('保存设备失败: ' + error.message)
       }
     },
     
@@ -350,13 +264,21 @@ export default {
         const data = await response.json()
         
         if (response.ok && data.code === 0) {
-          this.loadDevices() // 重新加载设备列表
+          // 删除成功，重新加载设备列表
+          await this.loadDevices()
         } else {
           alert('删除失败: ' + data.message)
         }
       } catch (error) {
-        console.error('删除失败:', error)
-        alert('删除失败，请查看控制台了解详情')
+        console.error('删除设备失败:', error)
+        alert('删除设备失败: ' + error.message)
+      }
+    },
+    
+    // 根据设备类型切换上级设备字段显示
+    toggleParentField() {
+      if (this.deviceForm.type === 'relay') {
+        this.deviceForm.parent_id = null
       }
     }
   }
@@ -364,202 +286,173 @@ export default {
 </script>
 
 <style scoped>
+.device-management {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
 .header {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: #2c3e50;
   color: white;
-  padding: 20px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  padding: 1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
 .header h1 {
-  font-size: 24px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
+  margin: 0;
+  font-size: 1.5rem;
 }
 
 .user-info {
   display: flex;
   align-items: center;
-  gap: 15px;
+  gap: 1rem;
 }
 
 .logout-btn {
-  background: rgba(255, 255, 255, 0.2);
-  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: #e74c3c;
   color: white;
-  padding: 8px 15px;
-  border-radius: 5px;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
   cursor: pointer;
-  transition: all 0.3s ease;
 }
 
 .logout-btn:hover {
-  background: rgba(255, 255, 255, 0.3);
+  background: #c0392b;
 }
 
-.nav {
-  background: white;
-  padding: 15px 20px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+.main-content {
+  flex: 1;
+  padding: 1rem;
+  overflow-y: auto;
 }
 
-.nav ul {
-  display: flex;
-  list-style: none;
-  gap: 20px;
-}
-
-.nav a {
-  text-decoration: none;
-  color: #666;
-  padding: 8px 15px;
-  border-radius: 5px;
-  transition: all 0.3s ease;
-}
-
-.nav a:hover, .nav a.active {
-  background: #667eea;
-  color: white;
-}
-
-.container {
-  max-width: 1200px;
-  margin: 30px auto;
-  padding: 0 20px;
-}
-
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.page-header h2 {
-  color: #333;
+.toolbar {
+  margin-bottom: 1rem;
 }
 
 .btn {
-  padding: 10px 20px;
+  padding: 0.5rem 1rem;
   border: none;
-  border-radius: 5px;
+  border-radius: 4px;
   cursor: pointer;
-  font-size: 14px;
-  transition: all 0.3s ease;
+  font-size: 1rem;
 }
 
 .btn-primary {
-  background: #667eea;
+  background: #3498db;
   color: white;
 }
 
 .btn-primary:hover {
-  background: #5a6fd8;
+  background: #2980b9;
+}
+
+.btn-secondary {
+  background: #95a5a6;
+  color: white;
+}
+
+.btn-secondary:hover {
+  background: #7f8c8d;
 }
 
 .device-tree {
   background: white;
-  border-radius: 15px;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
-  padding: 25px;
-  margin-bottom: 30px;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  padding: 1rem;
 }
 
 .tree-node {
-  margin-bottom: 15px;
-  border-left: 2px solid #e1e1e1;
-  padding-left: 20px;
+  margin-bottom: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 4px;
+  border-left: 3px solid #3498db;
 }
 
-.relay-node {
-  border-left-color: #667eea;
+.tree-node.relay-node {
+  background: #ecf0f1;
+  border-left-color: #e74c3c;
 }
 
-.controller-node {
-  border-left-color: #764ba2;
+.tree-node.controller-node {
+  background: #f8f9fa;
+  border-left-color: #f39c12;
+  margin-left: 1rem;
 }
 
-.device-node {
-  border-left-color: #ffa500;
+.tree-node.device-node {
+  background: #fff;
+  border-left-color: #2ecc71;
+  margin-left: 2rem;
 }
 
 .node-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px;
-  background: #f8f9fa;
-  border-radius: 5px;
-  margin-bottom: 10px;
-}
-
-.relay-node > .node-header {
-  background: rgba(102, 126, 234, 0.1);
-}
-
-.controller-node > .node-header {
-  background: rgba(118, 75, 162, 0.1);
-}
-
-.device-node > .node-header {
-  background: rgba(255, 165, 0, 0.1);
 }
 
 .node-title {
   font-weight: bold;
-  display: flex;
-  align-items: center;
-  gap: 10px;
 }
 
 .node-type {
-  font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 10px;
-  color: white;
+  font-size: 0.8rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  margin: 0 0.5rem;
 }
 
 .relay-type {
-  background: #667eea;
+  background: #e74c3c;
+  color: white;
 }
 
 .controller-type {
-  background: #764ba2;
+  background: #f39c12;
+  color: white;
 }
 
 .device-type {
-  background: #ffa500;
+  background: #2ecc71;
+  color: white;
 }
 
 .node-actions {
   display: flex;
-  gap: 10px;
+  gap: 0.5rem;
 }
 
 .action-btn {
-  padding: 5px 10px;
+  padding: 0.2rem 0.5rem;
   border: none;
-  border-radius: 3px;
+  border-radius: 4px;
   cursor: pointer;
-  font-size: 12px;
+  font-size: 0.9rem;
 }
 
 .edit-btn {
-  background: #ffc107;
-  color: #333;
-}
-
-.delete-btn {
-  background: #dc3545;
+  background: #3498db;
   color: white;
 }
 
-.children {
-  margin-left: 20px;
+.edit-btn:hover {
+  background: #2980b9;
+}
+
+.delete-btn {
+  background: #e74c3c;
+  color: white;
+}
+
+.delete-btn:hover {
+  background: #c0392b;
 }
 
 .modal {
@@ -568,27 +461,27 @@ export default {
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 1000;
+  background: rgba(0,0,0,0.5);
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 1000;
 }
 
 .modal-content {
   background: white;
-  border-radius: 15px;
-  width: 100%;
+  border-radius: 4px;
+  width: 90%;
   max-width: 500px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
 }
 
 .modal-header {
-  padding: 20px;
-  border-bottom: 1px solid #eee;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid #eee;
 }
 
 .modal-header h3 {
@@ -598,71 +491,50 @@ export default {
 .close-btn {
   background: none;
   border: none;
-  font-size: 24px;
+  font-size: 1.5rem;
   cursor: pointer;
-  color: #999;
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-btn:hover {
+  background: #f5f5f5;
+  border-radius: 50%;
 }
 
 .modal-body {
-  padding: 20px;
+  padding: 1rem;
 }
 
 .form-group {
-  margin-bottom: 20px;
+  margin-bottom: 1rem;
 }
 
 .form-group label {
   display: block;
-  margin-bottom: 5px;
-  font-weight: 500;
-  color: #333;
+  margin-bottom: 0.5rem;
+  font-weight: bold;
 }
 
-.form-group input, .form-group select {
+.form-group input,
+.form-group select {
   width: 100%;
-  padding: 10px;
+  padding: 0.5rem;
   border: 1px solid #ddd;
-  border-radius: 5px;
-  font-size: 14px;
+  border-radius: 4px;
+  font-size: 1rem;
+  box-sizing: border-box;
 }
 
 .modal-footer {
-  padding: 20px;
+  padding: 1rem;
   border-top: 1px solid #eee;
   display: flex;
   justify-content: flex-end;
-  gap: 10px;
-}
-
-.btn-secondary {
-  background: #6c757d;
-  color: white;
-}
-
-.status-active {
-  color: #28a745;
-  font-weight: bold;
-}
-
-.status-inactive {
-  color: #dc3545;
-  font-weight: bold;
-}
-
-@media (max-width: 768px) {
-  .dashboard-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .header {
-    flex-direction: column;
-    gap: 15px;
-  }
-  
-  .page-header {
-    flex-direction: column;
-    gap: 15px;
-    align-items: flex-start;
-  }
+  gap: 0.5rem;
 }
 </style>
\ No newline at end of file
diff --git a/internal/controller/device/device.go b/internal/controller/device/device.go
index 7e18ba4..3db4bc7 100644
--- a/internal/controller/device/device.go
+++ b/internal/controller/device/device.go
@@ -119,7 +119,6 @@ func (c *Controller) Create(ctx *gin.Context) {
 		Name:     req.Name,
 		Type:     req.Type,
 		ParentID: req.ParentID,
-		Status:   "active", // 默认设置为active状态
 	}
 
 	if err := c.deviceRepo.Create(device); err != nil {
@@ -176,9 +175,7 @@ func (c *Controller) Update(ctx *gin.Context) {
 	device.Name = req.Name
 	device.Type = req.Type
 	device.ParentID = req.ParentID
-	// TODO: 设备状态应该由系统自动获取，而不是由用户指定
-	// 这里保持设备原有状态，后续需要实现自动状态检测
-	// device.Status = req.Status
+	// 设备状态现在只在内存中维护，不持久化到数据库
 
 	if err := c.deviceRepo.Update(device); err != nil {
 		c.logger.Error("更新设备失败: " + err.Error())
diff --git a/internal/model/device.go b/internal/model/device.go
index 5780e61..eba32e7 100644
--- a/internal/model/device.go
+++ b/internal/model/device.go
@@ -42,9 +42,6 @@ type Device struct {
 	// ParentID 上级设备ID(用于设备层级关系，指向区域主控设备)
 	ParentID *uint `gorm:"column:parent_id;index" json:"parent_id"`
 
-	// Status 设备状态
-	Status string `gorm:"not null;column:status" json:"status"`
-
 	// CreatedAt 创建时间
 	CreatedAt time.Time `gorm:"column:created_at" json:"created_at"`