完成小区相关的接口对接

src/views/system/house/components/components/table.vue

@@ -1,14 +1,21 @@
 <template>
   <div class="TableBox p-5 h-full">
-    <el-table border :data="Array.from({ length: building.totalFloors }, (_, i) => i + 1)">
+    <el-table border :data="floorsSortList">
       <el-table-column align="center" fixed label="楼层\单元" width="85">
-        <template #default="{ $index }">
-          <span>{{ $index + 1 }}楼</span>
+        <template #default="{ $index, row }">
+          <span>{{ row }}楼</span>
         </template>
       </el-table-column>
-      <el-table-column min-width="160" class="column" align="center" :label="units.unitNo" v-for="(units, index) in building.units" :key="index">
-        <template #default="{ $index }">
-          <houseItem :unit="units.houses[$index]" :f-idx="$index"></houseItem>
+      <el-table-column
+        min-width="160"
+        class="column"
+        align="center"
+        :label="units.buildingName"
+        v-for="(units, index) in currentHouseInfoList"
+        :key="index"
+      >
+        <template #default="{ $index, row }">
+          <houseItem :unit="units.floors_Json" :f-idx="row"></houseItem>
         </template>
       </el-table-column>
     </el-table>
@@ -18,72 +25,38 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import houseItem from './houseItem.vue';
-import { build } from 'vite';
-// 房屋信息
-interface House {
-  id: string; // 唯一标识，如 B-1-101
-  roomNo: string; // 房号，如 101
-  checked: boolean; // 是否选中
-  // 可扩展：面积、户型、收费标准、状态等
+import { useHouseStore } from '@/store/modules/house';
+const houseStore = useHouseStore();
+const { currentHouseInfoList } = storeToRefs(houseStore); // 数据
+console.log(currentHouseInfoList);
+const maxFloors = ref(0);
+const maxUnits = ref(currentHouseInfoList.value.length);
+const floorslist = ref(new Set());
+const floorsSortList = computed(() => {
+  const list = Array.from(floorslist.value) as string[];
+  return list.sort(sortNumberStr);
+});
+function sortNumberStr(a, b) {
+  const numA = parseFloat(a);
+  const numB = parseFloat(b);
+
+  // 如果都是有效数字 → 按数字大小排（支持负数、小数）
+  if (!isNaN(numA) && !isNaN(numB)) {
+    return numA - numB;
+  }
+
+  // 否则按自然语言排
+  return a.localeCompare(b, 'zh-CN', { numeric: true });
 }
 
-// 单元信息
-interface Unit {
-  id: string; // 唯一标识，如 1
-  unitNo: string; // 单元号，如 1单元
-  houses: House[][]; // 按楼层分组的房屋，houses[0] 对应1楼，houses[1]对应2楼...
-}
-
-// 楼栋信息
-interface Building {
-  buildingNo: string; // 楼栋号，如 B栋
-  totalFloors: number; // 总楼层
-  units: Unit[]; // 单元列表
-}
-// 初始化B栋数据
-const building: Building = {
-  buildingNo: 'B栋',
-  totalFloors: 5, // 总楼层
-  // 栋-> 单元 -> 楼 -> 房间
-  units: []
-};
-
-function init(length) {
-  const arr = Array.from({ length: length }).map((_, index) => {
-    return {
-      id: index,
-      unitNo: index + 1 + '单元',
-      // 1单元
-      houses: [
-        // 1楼
-        [
-          // 一楼房屋
-          { id: 'B-3-301', roomNo: '101', checked: true },
-          { id: 'B-3-302', roomNo: '102', checked: false },
-          { id: 'B-3-303', roomNo: '103', checked: false },
-          { id: 'B-3-304', roomNo: '104', checked: false },
-          { id: 'B-3-305', roomNo: '105', checked: false },
-          { id: 'B-3-306', roomNo: '106', checked: false },
-          { id: 'B-3-307', roomNo: '107', checked: false },
-          { id: 'B-3-308', roomNo: '108', checked: false }
-        ],
-        [
-          { id: 'B-1-201', roomNo: '201', checked: true },
-          { id: 'B-1-202', roomNo: '202', checked: false },
-          { id: 'B-1-203', roomNo: '203', checked: false },
-          { id: 'B-1-204', roomNo: '204', checked: false },
-          { id: 'B-1-205', roomNo: '205', checked: false },
-          { id: 'B-1-206', roomNo: '206', checked: false },
-          { id: 'B-1-207', roomNo: '207', checked: false },
-          { id: 'B-1-208', roomNo: '208', checked: false }
-        ]
-      ]
-    };
-  }) as any;
-  console.log(arr);
-  building.units = arr;
-}
-init(20);
+currentHouseInfoList.value.forEach((item) => {
+  maxFloors.value = Math.max(maxFloors.value, item.actualFloorCount);
+  item.floors_Json = JSON.parse(`[${item.floors.replaceAll('\\', '')}]`);
+  console.log(item.floors_Json);
+  item.floors_Json.forEach((floor) => {
+    floorslist.value.add(floor.floorNo);
+  });
+});
 </script>
 
 <style scoped lang="scss">