提升加载速度修复已知BUG

src/components/DeviceManagement.vue

@@ -123,13 +123,17 @@ export default {
     },
     // 获取已绑定继电器的房间 ID
     roomsWithRelay() {
-      return this.relayDevices.map(device => device.room_id).filter(Boolean);
+      const rooms = this.relayDevices
+        .map(device => device.room_id)
+        .filter(roomId => roomId !== null && roomId !== undefined);
+      console.log('已绑定继电器的房间 ID:', rooms); // 调试日志
+      return rooms;
     },
     // 获取未绑定继电器的房间列表
     roomsWithoutRelay() {
       return this.rooms.filter(room => !this.roomsWithRelay.includes(room.id));
     },
-
+    // 过滤已绑定设备
     boundDevices() {
       return this.devices.filter(device => device.tempRoom !== '');
     },
@@ -147,14 +151,19 @@ export default {
     totalBoundPages() {
       return Math.ceil(this.filteredBoundDevices.length / this.itemsPerPage);
     },
+    // 过滤未绑定设备
     unboundDevices() {
       return this.devices.filter(device => device.tempRoom === '');
     },
+    // 过滤未绑定设备时，排除已有继电器的房间
     filteredUnboundDevices() {
-      return this.unboundDevices.filter(device =>
-        device.device_id.includes(this.unboundFilter) ||
-        device.tempName.includes(this.unboundFilter)
-      );
+      return this.unboundDevices.filter(device => {
+        if (device.device_id.includes('ESP32')) {
+          // 如果是继电器设备，只显示未绑定继电器的房间
+          return this.roomsWithoutRelay.length > 0;
+        }
+        return true;
+      });
     },
     paginatedUnboundDevices() {
       const start = (this.currentUnboundPage - 1) * this.itemsPerPage;
@@ -250,6 +259,16 @@ export default {
         device.tempName = device.device_id;
       }
 
+      // 如果是继电器设备，检查目标房间是否已有继电器
+      if (device.device_id.includes('ESP32')) {
+        const targetRoom = device.tempRoom;
+        if (this.roomsWithRelay.includes(targetRoom)) {
+          this.message = '该房间已绑定继电器，无法再绑定';
+          this.messageType = 'error';
+          return;
+        }
+      }
+
       // 检查数据是否发生变化
       if (device.tempName === device.name && device.tempRoom === device.room_id) {
         return; // 如果没有变化，直接返回

src/components/RoomManagement.vue

@@ -132,68 +132,59 @@ export default {
   methods: {
     async fetchRooms() {
       try {
-        // 获取所有房间
-        const response = await axios.get('/api/rooms');
-        console.log('API 返回的房间数据:', response.data);
+        const response = await axios.get('/api/all-rooms-with-devices');
+        console.log('API 返回的房间和设备数据:', response.data);
 
-        // 遍历每个房间，获取绑定的设备信息
-        for (const room of response.data) {
-          const deviceResponse = await axios.get(
-            `/api/devices-by-room?roomId=${room.id}`
-          );
-          console.log(`房间 ${room.id} 的设备数据:`, deviceResponse.data);
+        // 处理房间数据
+        this.rooms = response.data.map(room => {
+          const roomData = {
+            id: room.id,
+            room_name: room.room_name,
+            orientation: room.orientation,
+            hasBoundDevices: room.devices.length > 0,
+            deviceCount: room.devices.length,
+            onlineDeviceCount: room.devices.filter(d => d.status === 'online').length,
+            temperature: null,
+            switchStatus: null,
+            occupancy: '未绑定人体传感器',
+            temperatureDeviceStatus: 'offline',
+            humanSensorStatus: 'offline',
+            hasTemperatureDevice: false,
+            hasHumanSensor: false
+          };
 
-          // 初始化设备状态
-          room.hasBoundDevices = deviceResponse.data.length > 0;
-          room.deviceCount = deviceResponse.data.length; // 绑定设备数量
-          room.onlineDeviceCount = deviceResponse.data.filter(
-            (device) => device.status === 'online'
-          ).length; // 在线设备数量
-
-          room.temperature = null;
-          room.switchStatus = null;
-          room.occupancy = '未绑定人体传感器';
-          room.temperatureDeviceStatus = 'offline'; // 温度传感器状态
-          room.humanSensorStatus = 'offline'; // 人体传感器状态
-          room.hasTemperatureDevice = false; // 是否绑定温度传感器
-          room.hasHumanSensor = false; // 是否绑定人体传感器
-
-          // 遍历设备，判断设备类型和状态
-          for (const device of deviceResponse.data) {
+          // 处理设备信息
+          room.devices.forEach(device => {
             if (device.device_id.includes('ESP32-')) {
-              // 继电器温度传感器
-              room.hasTemperatureDevice = true;
-              room.temperature = device.temperature || null;
-              room.switchStatus = device.switch_status || null;
-              room.temperatureDeviceStatus = device.status; // 设备状态
+              roomData.hasTemperatureDevice = true;
+              roomData.temperature = device.temperature || null;
+              roomData.switchStatus = device.switch_status || null;
+              roomData.temperatureDeviceStatus = device.status;
             } else if (device.device_id.includes('24G-')) {
-              // 人体传感器
-              room.hasHumanSensor = true;
-              room.humanSensorStatus = device.status; // 设备状态
-              if (device.status === 'online') {
-                room.occupancy = device.level_status === 'high' ? '有人' : '无人';
-              } else {
-                room.occupancy = '人体存在掉线';
-              }
+              roomData.hasHumanSensor = true;
+              roomData.humanSensorStatus = device.status;
+              roomData.occupancy = device.status === 'online' 
+                ? (device.level_status === 'high' ? '有人' : '无人')
+                : '人体存在掉线';
             }
-          }
-
-          // 如果没有绑定温度传感器，则显示"未绑定设备"
-          if (!room.hasTemperatureDevice) {
-            room.temperature = null;
-            room.switchStatus = null;
-            room.temperatureDeviceStatus = 'offline';
-          }
-
-          // 如果没有绑定人体传感器，则显示"未绑定人体传感器"
-          if (!room.hasHumanSensor) {
-            room.occupancy = '未绑定人体传感器';
-          }
-        }
+          });
 
-        this.rooms = response.data;
+          return roomData;
+        });
       } catch (error) {
         console.error('获取房间数据失败:', error);
+        if (error.response) {
+          // 服务器返回了非2xx的响应
+          console.error('响应数据:', error.response.data);
+          console.error('状态码:', error.response.status);
+          console.error('响应头:', error.response.headers);
+        } else if (error.request) {
+          // 请求已发出但没有收到响应
+          console.error('请求:', error.request);
+        } else {
+          // 其他错误
+          console.error('错误信息:', error.message);
+        }
       }
     },
     // 根据房间号解析楼层
@@ -269,22 +260,34 @@ body {
 .floor-content {
   display: flex;
   gap: 10px;
-  /* 缩小东西边房间的间距 */
+  flex-wrap: nowrap; /* 确保不换行 */
+  overflow-x: auto; /* 添加水平滚动条 */
+  padding-bottom: 10px; /* 为滚动条留出空间 */
 }
 .room-list {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  gap: 10px;
+  flex-wrap: nowrap; /* 确保不换行 */
 }
 
 .room-card {
-  flex: 0 0 calc(50% - 10px); /* 每行显示两个房间卡片，减去间距 */
+  flex: 0 0 200px; /* 固定卡片宽度 */
   margin-bottom: 10px;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background-color: white;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
+/* 响应式设计 */
 @media (max-width: 768px) {
+  .floor-content {
+    flex-wrap: wrap; /* 在小屏幕上换行 */
+  }
+  
   .room-card {
-    flex: 0 0 100%; /* 在手机上每行显示一个房间卡片 */
+    flex: 1 1 100%; /* 在小屏幕上占满宽度 */
   }
 }
 @media (max-width: 768px) {

src/components/SecondPage.vue

@@ -136,6 +136,8 @@
     </table>
   </div>
 </div>
+
+
   </div>
 </template>