修复了只显示部分房间的bug，将自动保存改为手动保存

README.md

@@ -1,34 +1,4 @@
-# relay-control
-
-## Project setup
-```
-npm install
-```
-
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-```
-npm run build
-```
-
-### Lints and fixes files
-```
-npm run lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
-
-
-66666
-
-777
-
-
-99999
-
-444
+需要组件
+node npm mqtt coser mysql 
+待修复。
+设备管理界面实时保存的问题，输入或删除一个保存一次。修复频繁保存

src/components/DeviceManagement.vue

@@ -2,9 +2,8 @@
   <div class="device-management">
     <h1>IOT设备管理界面</h1>
     <!-- 提示信息 -->
-    <div v-if="message" :class="['message', messageType]" @click="closeMessage">
+    <div v-if="message" :class="['message', messageType]">
       {{ message }}
-      <span class="close-icon">×</span>
     </div>
     <!-- 已绑定设备列表 -->
     <h2>已绑定设备</h2>
@@ -174,19 +173,6 @@ export default {
       return Math.ceil(this.filteredUnboundDevices.length / this.itemsPerPage);
     },
   },
-  watch: {
-    // 监听设备名称的变化
-    devices: {
-      handler(newDevices) {
-        newDevices.forEach(device => {
-          if (device.tempName !== device.name || device.tempRoom !== device.previousRoom) {
-            this.saveChanges(device);
-          }
-        });
-      },
-      deep: true, // 深度监听
-    },
-  },
   async created() {
     await this.fetchRooms();
     await this.fetchDevices();
@@ -252,6 +238,7 @@ export default {
       if (!device.device_id) {
         this.message = '设备唯一标识符不能为空';
         this.messageType = 'error';
+        this.autoHideMessage();
         return;
       }
 
@@ -265,6 +252,7 @@ export default {
         if (this.roomsWithRelay.includes(targetRoom)) {
           this.message = '该房间已绑定继电器，无法再绑定';
           this.messageType = 'error';
+          this.autoHideMessage();
           return;
         }
       }
@@ -318,10 +306,12 @@ export default {
           this.messageType = 'error';
           console.error('绑定设备失败:', result.message);
         }
+        this.autoHideMessage();
       } catch (error) {
         this.message = '绑定设备时出错';
         this.messageType = 'error';
         console.error('绑定设备时出错:', error);
+        this.autoHideMessage();
       }
     },
     async unbindDevice(deviceId) {
@@ -363,6 +353,11 @@ export default {
         console.error('删除设备时出错:', error);
       }
     },
+    autoHideMessage() {
+      setTimeout(() => {
+        this.message = '';
+      }, 2000);
+    },
   },
 };
 </script>
@@ -666,11 +661,11 @@ h2 {
 /* 提示信息的样式 */
 .message {
   position: fixed;
-  top: 50%;
+  top: 0;
   left: 50%;
-  transform: translate(-50%, -50%);
-  padding: 20px 30px;
-  border-radius: 8px;
+  transform: translateX(-50%);
+  padding: 10px 20px;
+  border-radius: 0 0 8px 8px;
   font-size: 16px;
   font-weight: bold;
   color: white;
@@ -679,8 +674,7 @@ h2 {
   z-index: 1000;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
+  justify-content: center;
   animation: fadeIn 0.3s ease-in-out;
 }
 
@@ -694,24 +688,16 @@ h2 {
   background: linear-gradient(135deg, #f44336, #e57373);
 }
 
-/* 关闭图标的样式 */
-.close-icon {
-  margin-left: 15px;
-  font-size: 20px;
-  font-weight: bold;
-  cursor: pointer;
-}
-
 /* 淡入动画 */
 @keyframes fadeIn {
   from {
     opacity: 0;
-    transform: translate(-50%, -60%);
+    transform: translateX(-50%) translateY(-100%);
   }
 
   to {
     opacity: 1;
-    transform: translate(-50%, -50%);
+    transform: translateX(-50%) translateY(0);
   }
 }
 </style>

src/components/SecondPage.vue

@@ -81,6 +81,13 @@
       <option value="北">北</option>
     </select>
     <button class="modal-button" @click="saveEditedRoom">保存</button>
+    <button
+      v-if="editRoom.device_count === 0"
+      class="delete-button"
+      @click="deleteRoom(editRoom.id)"
+    >
+      删除房间
+    </button>
   </div>
 </div>
 
@@ -166,6 +173,7 @@ export default {
         description: '',
         floor: null,
         orientation: '',
+        device_count: 0,
       },
       hasHumanSensor: false, // 是否有人体传感器
       hasRelayInRoom: false, // 是否有继电器
@@ -253,14 +261,17 @@ export default {
       // 重新获取设备列表以更新界面
       await this.toggleDevices(this.roomId);
     } else {
-      this.message = '绑定继电器时出错';
+      const result = await response.json();
+      this.message = result.message || '绑定继电器时出错';
       this.messageType = 'error';
       console.error('绑定继电器时出错');
     }
+    this.autoHideMessage();
   } catch (error) {
     this.message = '绑定设备时出错';
     this.messageType = 'error';
     console.error('绑定设备时出错:', error);
+    this.autoHideMessage();
   }
 },
 
@@ -287,6 +298,102 @@ async toggleDevices(roomId) {
       console.error('Error fetching devices:', error);
     }
   },
+  async addNewRoom() {
+      try {
+        const response = await fetch('/api/rooms', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            room_name: this.newRoomName,
+            description: this.newRoomDescription,
+            floor: this.newRoomFloor,
+            orientation: this.newRoomOrientation,
+          }),
+        });
+        if (response.ok) {
+          const result = await response.json();
+          this.message = result.message || '房间新增成功';
+          this.messageType = 'success';
+          await this.fetchRooms();
+          this.showModal = false;
+          this.newRoomName = '';
+          this.newRoomDescription = '';
+          this.newRoomFloor = null;
+          this.newRoomOrientation = '';
+        } else {
+          const result = await response.json();
+          this.message = result.message || '新增房间时出错';
+          this.messageType = 'error';
+          console.error('新增房间时出错');
+        }
+        this.autoHideMessage();
+      } catch (error) {
+        this.message = '新增房间时出错';
+        this.messageType = 'error';
+        console.error('新增房间时出错:', error);
+        this.autoHideMessage();
+      }
+    },
+    async saveEditedRoom() {
+      try {
+        const response = await fetch(`/api/rooms/${this.editRoom.id}`, {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(this.editRoom),
+        });
+        if (response.ok) {
+          const result = await response.json();
+          this.message = result.message || '房间信息更新成功';
+          this.messageType = 'success';
+          await this.fetchRooms();
+          this.showEditModal = false;
+        } else {
+          const result = await response.json();
+          this.message = result.message || '更新房间信息时出错';
+          this.messageType = 'error';
+          console.error('更新房间信息时出错');
+        }
+        this.autoHideMessage();
+      } catch (error) {
+        this.message = '更新房间信息时出错';
+        this.messageType = 'error';
+        console.error('更新房间信息时出错:', error);
+        this.autoHideMessage();
+      }
+    },
+    async deleteRoom(roomId) {
+      try {
+        const response = await fetch(`/api/rooms/${roomId}`, {
+          method: 'DELETE',
+        });
+        if (response.ok) {
+          this.message = '房间删除成功';
+          this.messageType = 'success';
+          await this.fetchRooms();
+          this.showEditModal = false;
+        } else {
+          const result = await response.json();
+          this.message = result.message || '删除房间时出错';
+          this.messageType = 'error';
+          console.error('删除房间时出错');
+        }
+        this.autoHideMessage();
+      } catch (error) {
+        this.message = '删除房间时出错';
+        this.messageType = 'error';
+        console.error('删除房间时出错:', error);
+        this.autoHideMessage();
+      }
+    },
+    autoHideMessage() {
+      setTimeout(() => {
+        this.message = '';
+      }, 2000);
+    },
   },
 };
 </script>
@@ -699,4 +806,24 @@ async toggleDevices(roomId) {
   background: linear-gradient(135deg, #1e88e5, #42a5f5); /* 渐变背景 */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
 }
+
+/* 删除按钮样式 */
+.delete-button {
+  background: linear-gradient(135deg, #f44336, #e57373);
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-top: 10px;
+}
+
+.delete-button:hover {
+  background: linear-gradient(135deg, #e53935, #d32f2f);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
 </style>