diff --git a/src/api/room/addFloorApi.js b/src/api/room/addFloorApi.js
new file mode 100644
index 0000000..aece448
--- /dev/null
+++ b/src/api/room/addFloorApi.js
@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+
+export function addFloor(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/floor/saveFloor',
+      method: 'post',
+      data
+    }).then(response => {
+      resolve(response)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/room/addUnitApi.js b/src/api/room/addUnitApi.js
new file mode 100644
index 0000000..3c51382
--- /dev/null
+++ b/src/api/room/addUnitApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function saveUnit(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/unit.saveUnit',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '添加单元失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/room/deleteFloorApi.js b/src/api/room/deleteFloorApi.js
new file mode 100644
index 0000000..c75a73b
--- /dev/null
+++ b/src/api/room/deleteFloorApi.js
@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+
+export function deleteFloor(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/floor/deleteFloor',
+      method: 'post',
+      data
+    }).then(response => {
+      resolve(response)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/room/deleteRoomApi.js b/src/api/room/deleteRoomApi.js
new file mode 100644
index 0000000..6705e47
--- /dev/null
+++ b/src/api/room/deleteRoomApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function deleteRoom(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/room.deleteRoom',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res.data)
+      } else {
+        reject(new Error(res.msg || '删除房屋失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/room/deleteUnitApi.js b/src/api/room/deleteUnitApi.js
new file mode 100644
index 0000000..60e055d
--- /dev/null
+++ b/src/api/room/deleteUnitApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function deleteUnit(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/unit.deleteUnit',
+      method: 'post',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '删除单元失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/room/editFloorApi.js b/src/api/room/editFloorApi.js
new file mode 100644
index 0000000..2386c6f
--- /dev/null
+++ b/src/api/room/editFloorApi.js
@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+
+export function editFloor(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/floor/editFloor',
+      method: 'post',
+      data
+    }).then(response => {
+      resolve(response)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/room/editRoomApi.js b/src/api/room/editRoomApi.js
new file mode 100644
index 0000000..2688c2b
--- /dev/null
+++ b/src/api/room/editRoomApi.js
@@ -0,0 +1,39 @@
+import request from '@/utils/request'
+
+export function updateRoom(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/room.updateRoom',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res.data)
+      } else {
+        reject(new Error(res.msg || '更新房屋失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+export function getUnits(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/unit.queryUnits',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res.data)
+      } else {
+        reject(new Error(res.msg || '获取单元列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/room/editUnitApi.js b/src/api/room/editUnitApi.js
new file mode 100644
index 0000000..15ef813
--- /dev/null
+++ b/src/api/room/editUnitApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function updateUnit(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/unit.updateUnit',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '更新单元失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/room/floorUnitTreeApi.js b/src/api/room/floorUnitTreeApi.js
new file mode 100644
index 0000000..1d6b92b
--- /dev/null
+++ b/src/api/room/floorUnitTreeApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function getFloorAndUnits(communityId) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/floor.queryFloorAndUnits',
+      method: 'get',
+      params: { communityId }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res.data)
+      } else {
+        reject(new Error(res.msg || '获取楼栋单元失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/room/importOwnerRoomApi.js b/src/api/room/importOwnerRoomApi.js
new file mode 100644
index 0000000..80ea7d7
--- /dev/null
+++ b/src/api/room/importOwnerRoomApi.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+
+export function importOwnerRoom(formData) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/assetImport/importData',
+      method: 'post',
+      data: formData,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    }).then(response => {
+      resolve(response)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/room/ownerCarsApi.js b/src/api/room/ownerCarsApi.js
new file mode 100644
index 0000000..b4c87b6
--- /dev/null
+++ b/src/api/room/ownerCarsApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function queryOwnerCars(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryOwnerCars',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取业主车辆失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/room/ownerComplaintsApi.js b/src/api/room/ownerComplaintsApi.js
new file mode 100644
index 0000000..a07182b
--- /dev/null
+++ b/src/api/room/ownerComplaintsApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function listComplaints(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaint.listComplaints',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取业主投诉失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/room/ownerMembersApi.js b/src/api/room/ownerMembersApi.js
new file mode 100644
index 0000000..dd6884c
--- /dev/null
+++ b/src/api/room/ownerMembersApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function queryOwnerMembers(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryOwnerMembers',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取业主成员失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/room/ownerOweFeesApi.js b/src/api/room/ownerOweFeesApi.js
new file mode 100644
index 0000000..63eed49
--- /dev/null
+++ b/src/api/room/ownerOweFeesApi.js
@@ -0,0 +1,21 @@
+import request from '@/utils/request'
+
+// 查询业主欠费信息
+export function getOwnerOweFees(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportOweFee/queryReportOweFee',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取业主欠费信息失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/room/ownerRepairsApi.js b/src/api/room/ownerRepairsApi.js
new file mode 100644
index 0000000..efa364d
--- /dev/null
+++ b/src/api/room/ownerRepairsApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function listOwnerRepairs(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/ownerRepair.listOwnerRepairs',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取业主报修失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/room/ownerRoomsApi.js b/src/api/room/ownerRoomsApi.js
new file mode 100644
index 0000000..6736f5a
--- /dev/null
+++ b/src/api/room/ownerRoomsApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function queryRoomsByOwner(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/room.queryRoomsByOwner',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res.data)
+      } else {
+        reject(new Error(res.msg || '获取业主房屋失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/room/roomApi.js b/src/api/room/roomApi.js
new file mode 100644
index 0000000..1b9f823
--- /dev/null
+++ b/src/api/room/roomApi.js
@@ -0,0 +1,61 @@
+import request from '@/utils/request'
+
+// 查询房屋列表
+export function queryRooms(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/room.queryRooms',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取房屋列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询楼栋列表
+export function getFloors(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/floor.queryFloors',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取楼栋列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询单元列表
+export function getUnits(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/unit.queryUnits',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取单元列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/room/roomContractsApi.js b/src/api/room/roomContractsApi.js
new file mode 100644
index 0000000..02bdbb1
--- /dev/null
+++ b/src/api/room/roomContractsApi.js
@@ -0,0 +1,23 @@
+import request from '@/utils/request'
+
+// 查询房屋合同信息
+export function getRoomContracts(params, roomId) {
+  return new Promise((resolve, reject) => {
+    const url = roomId ? '/contract.queryContractByRoomId' : '/contract/queryContract'
+    
+    request({
+      url,
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取房屋合同信息失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/room/roomOweFeesApi.js b/src/api/room/roomOweFeesApi.js
new file mode 100644
index 0000000..095c7f1
--- /dev/null
+++ b/src/api/room/roomOweFeesApi.js
@@ -0,0 +1,21 @@
+import request from '@/utils/request'
+
+// 查询房屋欠费信息
+export function getRoomOweFees(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportOweFee/queryReportOweFee',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取房屋欠费信息失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/room/searchFloorApi.js b/src/api/room/searchFloorApi.js
new file mode 100644
index 0000000..40be013
--- /dev/null
+++ b/src/api/room/searchFloorApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function searchFloors(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/floor.queryFloors',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res.data)
+      } else {
+        reject(new Error(res.msg || '查询楼栋失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/components/owner/ownerCars.vue b/src/components/owner/ownerCars.vue
new file mode 100644
index 0000000..982fd27
--- /dev/null
+++ b/src/components/owner/ownerCars.vue
@@ -0,0 +1,118 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :title="$t('ownerCars.title')"
+    width="80%"
+    top="5vh"
+    @close="handleClose"
+  >
+    <el-row>
+      <el-col :span="24">
+        <div class="table-container">
+          <el-table :data="ownerCarsInfo.cars" border stripe>
+            <el-table-column prop="carNum" :label="$t('ownerCars.licensePlate')" align="center" />
+            <el-table-column :label="$t('ownerCars.licenseType')" align="center">
+              <template #default="{ row }">
+                <span v-if="row.leaseType === 'T'">{{ $t('ownerCars.temporary') }}</span>
+                <span v-else>{{ row.leaseTypeName }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="carTypeName" :label="$t('ownerCars.carType')" align="center" />
+            <el-table-column prop="carColor" :label="$t('ownerCars.color')" align="center" />
+            <el-table-column :label="$t('ownerCars.owner')" align="center">
+              <template #default="{ row }">
+                {{ row.ownerName }}<br>({{ row.link }})
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('ownerCars.parkingSpace')" align="center">
+              <template #default="{ row }">
+                <div v-if="row.areaNum && row.state === '1001'">
+                  {{ row.areaNum }}{{ $t('ownerCars.park') }}{{ row.num }}{{ $t('ownerCars.space') }}
+                </div>
+                <div v-else>{{ $t('ownerCars.released') }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('ownerCars.validity')" align="center">
+              <template #default="{ row }">
+                <div v-if="row.leaseType === 'H'">
+                  {{ row.startTime }}<br>~{{ row.endTime }}
+                </div>
+                <div v-else>-</div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <el-pagination
+          background
+          layout="prev, pager, next, sizes, total"
+          :total="totalCount"
+          :page-size="pageSize"
+          :current-page="currentPage"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </el-col>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+import { queryOwnerCars } from '@/api/room/ownerCarsApi'
+
+export default {
+  name: 'OwnerCars',
+  data() {
+    return {
+      dialogVisible: false,
+      ownerCarsInfo: {
+        cars: [],
+        ownerId: ''
+      },
+      totalCount: 0,
+      pageSize: 10,
+      currentPage: 1
+    }
+  },
+  methods: {
+    open(ownerId) {
+      this.ownerCarsInfo.ownerId = ownerId
+      this.dialogVisible = true
+      this._loadOwnerCarInfo(1, this.pageSize)
+    },
+    handleClose() {
+      this.dialogVisible = false
+    },
+    handleSizeChange(size) {
+      this.pageSize = size
+      this._loadOwnerCarInfo(this.currentPage, size)
+    },
+    handleCurrentChange(page) {
+      this.currentPage = page
+      this._loadOwnerCarInfo(page, this.pageSize)
+    },
+    async _loadOwnerCarInfo(page, size) {
+      try {
+        const params = {
+          page: page,
+          row: size,
+          communityId: this.$store.getters.communityId,
+          ownerId: this.ownerCarsInfo.ownerId
+        }
+        
+        const response = await queryOwnerCars(params)
+        this.ownerCarsInfo.cars = response.data
+        this.totalCount = response.total
+        this.currentPage = page
+      } catch (error) {
+        console.error('加载业主车辆信息失败:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.table-container {
+  margin-top: 15px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/owner/ownerCarsDemo.vue b/src/components/owner/ownerCarsDemo.vue
new file mode 100644
index 0000000..585ef88
--- /dev/null
+++ b/src/components/owner/ownerCarsDemo.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <el-button @click="openOwnerCars">查看业主车辆</el-button>
+    <owner-cars ref="ownerCarsRef" />
+  </div>
+</template>
+
+<script>
+import OwnerCars from './ownerCars'
+
+export default {
+  components: {
+    OwnerCars
+  },
+  methods: {
+    openOwnerCars() {
+      this.$refs.ownerCarsRef.open('456') // 传递业主ID
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerComplaints.vue b/src/components/owner/ownerComplaints.vue
new file mode 100644
index 0000000..b656199
--- /dev/null
+++ b/src/components/owner/ownerComplaints.vue
@@ -0,0 +1,108 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :title="$t('ownerComplaints.title')"
+    width="80%"
+    top="5vh"
+    @close="handleClose"
+  >
+    <el-row>
+      <el-col :span="24">
+        <div class="table-container">
+          <el-table :data="ownerComplaintsInfo.complaints" border stripe>
+            <el-table-column prop="typeCdName" :label="$t('ownerComplaints.type')" align="center" />
+            <el-table-column :label="$t('ownerComplaints.room')" align="center">
+              <template #default="{ row }">
+                {{ row.floorNum }}-{{ row.unitNum }}-{{ row.roomNum }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="complaintName" :label="$t('ownerComplaints.contact')" align="center" />
+            <el-table-column prop="tel" :label="$t('ownerComplaints.phone')" align="center" />
+            <el-table-column prop="stateName" :label="$t('ownerComplaints.status')" align="center" />
+            <el-table-column :label="$t('ownerComplaints.handler')" align="center">
+              <template #default="{ row }">
+                {{ row.currentUserName || $t('ownerComplaints.none') }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('ownerComplaints.handlerPhone')" align="center">
+              <template #default="{ row }">
+                {{ row.currentUserTel || $t('ownerComplaints.none') }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="createTime" :label="$t('ownerComplaints.createTime')" align="center" />
+          </el-table>
+        </div>
+        <el-pagination
+          background
+          layout="prev, pager, next, sizes, total"
+          :total="totalCount"
+          :page-size="pageSize"
+          :current-page="currentPage"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </el-col>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+import { listComplaints } from '@/api/room/ownerComplaintsApi'
+
+export default {
+  name: 'OwnerComplaints',
+  data() {
+    return {
+      dialogVisible: false,
+      ownerComplaintsInfo: {
+        complaints: [],
+        ownerId: ''
+      },
+      totalCount: 0,
+      pageSize: 10,
+      currentPage: 1
+    }
+  },
+  methods: {
+    open(ownerId) {
+      this.ownerComplaintsInfo.ownerId = ownerId
+      this.dialogVisible = true
+      this._loadOwnerComplaintInfo(1, this.pageSize)
+    },
+    handleClose() {
+      this.dialogVisible = false
+    },
+    handleSizeChange(size) {
+      this.pageSize = size
+      this._loadOwnerComplaintInfo(this.currentPage, size)
+    },
+    handleCurrentChange(page) {
+      this.currentPage = page
+      this._loadOwnerComplaintInfo(page, this.pageSize)
+    },
+    async _loadOwnerComplaintInfo(page, size) {
+      try {
+        const params = {
+          page: page,
+          row: size,
+          communityId: this.$store.getters.communityId,
+          ownerId: this.ownerComplaintsInfo.ownerId
+        }
+        
+        const response = await listComplaints(params)
+        this.ownerComplaintsInfo.complaints = response.data
+        this.totalCount = response.total
+        this.currentPage = page
+      } catch (error) {
+        console.error('加载业主投诉信息失败:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.table-container {
+  margin-top: 15px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/owner/ownerComplaintsDemo.vue b/src/components/owner/ownerComplaintsDemo.vue
new file mode 100644
index 0000000..0f2cc35
--- /dev/null
+++ b/src/components/owner/ownerComplaintsDemo.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <el-button @click="openOwnerComplaints">查看业主投诉</el-button>
+    <owner-complaints ref="ownerComplaintsRef" />
+  </div>
+</template>
+
+<script>
+import OwnerComplaints from './ownerComplaints'
+
+export default {
+  components: {
+    OwnerComplaints
+  },
+  methods: {
+    openOwnerComplaints() {
+      this.$refs.ownerComplaintsRef.open('789') // 传递业主ID
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerMembers.vue b/src/components/owner/ownerMembers.vue
new file mode 100644
index 0000000..8628b6b
--- /dev/null
+++ b/src/components/owner/ownerMembers.vue
@@ -0,0 +1,99 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :title="$t('ownerMembers.title')"
+    width="80%"
+    top="5vh"
+    @close="handleClose"
+  >
+    <el-row>
+      <el-col :span="24">
+        <div class="table-container">
+          <el-table :data="ownerMembersInfo.members" border stripe>
+            <el-table-column prop="name" :label="$t('ownerMembers.name')" align="center" />
+            <el-table-column prop="sex" :label="$t('ownerMembers.sex')" align="center">
+              <template #default="{ row }">
+                {{ row.sex == 0 ? $t('ownerMembers.male') : $t('ownerMembers.female') }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="age" :label="$t('ownerMembers.age')" align="center" />
+            <el-table-column prop="ownerTypeName" :label="$t('ownerMembers.type')" align="center" />
+            <el-table-column prop="idCard" :label="$t('ownerMembers.idCard')" align="center" />
+            <el-table-column prop="link" :label="$t('ownerMembers.contact')" align="center" />
+            <el-table-column prop="address" :label="$t('ownerMembers.address')" align="center" />
+          </el-table>
+        </div>
+        <el-pagination
+          background
+          layout="prev, pager, next, sizes, total"
+          :total="totalCount"
+          :page-size="pageSize"
+          :current-page="currentPage"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </el-col>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+import { queryOwnerMembers } from '@/api/room/ownerMembersApi'
+
+export default {
+  name: 'OwnerMembers',
+  data() {
+    return {
+      dialogVisible: false,
+      ownerMembersInfo: {
+        members: [],
+        ownerId: ''
+      },
+      totalCount: 0,
+      pageSize: 10,
+      currentPage: 1
+    }
+  },
+  methods: {
+    open(ownerId) {
+      this.ownerMembersInfo.ownerId = ownerId
+      this.dialogVisible = true
+      this._loadOwnerMemberInfo(1, this.pageSize)
+    },
+    handleClose() {
+      this.dialogVisible = false
+    },
+    handleSizeChange(size) {
+      this.pageSize = size
+      this._loadOwnerMemberInfo(this.currentPage, size)
+    },
+    handleCurrentChange(page) {
+      this.currentPage = page
+      this._loadOwnerMemberInfo(page, this.pageSize)
+    },
+    async _loadOwnerMemberInfo(page, size) {
+      try {
+        const params = {
+          page: page,
+          row: size,
+          communityId: this.$store.getters.communityId,
+          ownerId: this.ownerMembersInfo.ownerId
+        }
+        
+        const response = await queryOwnerMembers(params)
+        this.ownerMembersInfo.members = response.data
+        this.totalCount = response.total
+        this.currentPage = page
+      } catch (error) {
+        console.error('加载业主成员信息失败:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.table-container {
+  margin-top: 15px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/owner/ownerMembersDemo.vue b/src/components/owner/ownerMembersDemo.vue
new file mode 100644
index 0000000..c33d77f
--- /dev/null
+++ b/src/components/owner/ownerMembersDemo.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <el-button @click="openOwnerMembers">查看业主成员</el-button>
+    <owner-members ref="ownerMembersRef" />
+  </div>
+</template>
+
+<script>
+import OwnerMembers from './ownerMembers'
+
+export default {
+  components: {
+    OwnerMembers
+  },
+  methods: {
+    openOwnerMembers() {
+      this.$refs.ownerMembersRef.open('123') // 传递业主ID
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerOweFees.vue b/src/components/owner/ownerOweFees.vue
new file mode 100644
index 0000000..cc89243
--- /dev/null
+++ b/src/components/owner/ownerOweFees.vue
@@ -0,0 +1,127 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    :title="$t('ownerOweFees.title')"
+    width="80%"
+    top="5vh"
+    custom-class="custom-modal"
+    @close="handleClose"
+  >
+    <el-table
+      :data="ownerOweFeesInfo.fees"
+      stripe
+      border
+      style="width: 100%; margin-top: 15px"
+    >
+      <el-table-column
+        prop="payerObjName"
+        :label="$t('ownerOweFees.payerObj')"
+        align="center"
+      />
+      <el-table-column
+        prop="ownerName"
+        :label="$t('ownerOweFees.ownerName')"
+        align="center"
+      />
+      <el-table-column
+        prop="ownerTel"
+        :label="$t('ownerOweFees.phone')"
+        align="center"
+      />
+      <el-table-column
+        prop="endTime"
+        :label="$t('ownerOweFees.startTime')"
+        align="center"
+      />
+      <el-table-column
+        prop="deadlineTime"
+        :label="$t('ownerOweFees.endTime')"
+        align="center"
+      />
+      <el-table-column
+        prop="amountOwed"
+        :label="`${$t('ownerOweFees.total')} (${$t('ownerOweFees.unit')})`"
+        align="center"
+      />
+      <el-table-column
+        prop="updateTime"
+        :label="$t('ownerOweFees.updateTime')"
+        align="center"
+      />
+    </el-table>
+    
+    <el-pagination
+      v-if="pagination.total > 0"
+      background
+      layout="prev, pager, next"
+      :total="pagination.total"
+      :page-size="pagination.pageSize"
+      :current-page="pagination.currentPage"
+      @current-change="handlePageChange"
+      style="margin-top: 20px; text-align: right"
+    />
+  </el-dialog>
+</template>
+
+<script>
+import { getOwnerOweFees } from '@/api/room/ownerOweFeesApi'
+
+export default {
+  name: 'OwnerOweFees',
+  data() {
+    return {
+      visible: false,
+      ownerOweFeesInfo: {
+        fees: [],
+        ownerId: ''
+      },
+      pagination: {
+        total: 0,
+        pageSize: 10,
+        currentPage: 1
+      }
+    }
+  },
+  methods: {
+    open(ownerId) {
+      this.ownerOweFeesInfo.ownerId = ownerId
+      this.pagination.currentPage = 1
+      this.visible = true
+      this.loadData()
+    },
+    handleClose() {
+      this.visible = false
+    },
+    handlePageChange(currentPage) {
+      this.pagination.currentPage = currentPage
+      this.loadData()
+    },
+    async loadData() {
+      try {
+        const params = {
+          page: this.pagination.currentPage,
+          row: this.pagination.pageSize,
+          communityId: this.getCommunityId(),
+          ownerId: this.ownerOweFeesInfo.ownerId
+        }
+        
+        const response = await getOwnerOweFees(params)
+        this.ownerOweFeesInfo.fees = response.data
+        this.pagination.total = response.records
+      } catch (error) {
+        console.error('加载欠费信息失败:', error)
+        this.$message.error(this.$t('common.loadFailed'))
+      }
+    },
+    getCommunityId() {
+      return this.$store.state.user.currentCommunity.communityId
+    }
+  }
+}
+</script>
+
+<style scoped>
+.custom-modal >>> .el-dialog__body {
+  padding: 15px 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/owner/ownerOweFeesDemo.vue b/src/components/owner/ownerOweFeesDemo.vue
new file mode 100644
index 0000000..bd4a0dc
--- /dev/null
+++ b/src/components/owner/ownerOweFeesDemo.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <el-button type="primary" @click="openModal">
+      {{ $t('ownerOweFeesDemo.openBtn') }}
+    </el-button>
+    <owner-owe-fees ref="oweFeesRef" />
+  </div>
+</template>
+
+<script>
+import OwnerOweFees from './ownerOweFees'
+
+export default {
+  components: {
+    OwnerOweFees
+  },
+  methods: {
+    openModal() {
+      // 模拟业主ID
+      const ownerId = '12345'
+      this.$refs.oweFeesRef.open(ownerId)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerRepairs.vue b/src/components/owner/ownerRepairs.vue
new file mode 100644
index 0000000..74aa408
--- /dev/null
+++ b/src/components/owner/ownerRepairs.vue
@@ -0,0 +1,104 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :title="$t('ownerRepairs.title')"
+    width="80%"
+    top="5vh"
+    @close="handleClose"
+  >
+    <el-row>
+      <el-col :span="24">
+        <div class="table-container">
+          <el-table :data="ownerRepairsInfo.repairs" border stripe>
+            <el-table-column prop="repairId" :label="$t('ownerRepairs.workOrder')" align="center" />
+            <el-table-column prop="repairObjName" :label="$t('ownerRepairs.location')" align="center" />
+            <el-table-column prop="repairTypeName" :label="$t('ownerRepairs.repairType')" align="center" />
+            <el-table-column prop="repairName" :label="$t('ownerRepairs.reporter')" align="center" />
+            <el-table-column prop="tel" :label="$t('ownerRepairs.contact')" align="center" />
+            <el-table-column prop="appointmentTime" :label="$t('ownerRepairs.appointmentTime')" align="center" />
+            <el-table-column :label="$t('ownerRepairs.status')" align="center">
+              <template #default="{ row }">
+                <span v-if="row.state === '1800' && (row.returnVisitFlag === '001' || row.returnVisitFlag === '002')">
+                  {{ row.stateName }}{{ $t('ownerRepairs.taskProcessed') }}
+                </span>
+                <span v-else>
+                  {{ row.stateName }}
+                </span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <el-pagination
+          background
+          layout="prev, pager, next, sizes, total"
+          :total="totalCount"
+          :page-size="pageSize"
+          :current-page="currentPage"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </el-col>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+import { listOwnerRepairs } from '@/api/room/ownerRepairsApi'
+
+export default {
+  name: 'OwnerRepairs',
+  data() {
+    return {
+      dialogVisible: false,
+      ownerRepairsInfo: {
+        repairs: [],
+        ownerId: ''
+      },
+      totalCount: 0,
+      pageSize: 10,
+      currentPage: 1
+    }
+  },
+  methods: {
+    open(ownerId) {
+      this.ownerRepairsInfo.ownerId = ownerId
+      this.dialogVisible = true
+      this._loadOwnerRepairInfo(1, this.pageSize)
+    },
+    handleClose() {
+      this.dialogVisible = false
+    },
+    handleSizeChange(size) {
+      this.pageSize = size
+      this._loadOwnerRepairInfo(this.currentPage, size)
+    },
+    handleCurrentChange(page) {
+      this.currentPage = page
+      this._loadOwnerRepairInfo(page, this.pageSize)
+    },
+    async _loadOwnerRepairInfo(page, size) {
+      try {
+        const params = {
+          page: page,
+          row: size,
+          communityId: this.$store.getters.communityId,
+          ownerId: this.ownerRepairsInfo.ownerId
+        }
+        
+        const response = await listOwnerRepairs(params)
+        this.ownerRepairsInfo.repairs = response.data
+        this.totalCount = response.total
+        this.currentPage = page
+      } catch (error) {
+        console.error('加载业主报修信息失败:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.table-container {
+  margin-top: 15px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/owner/ownerRepairsDemo.vue b/src/components/owner/ownerRepairsDemo.vue
new file mode 100644
index 0000000..09fa77b
--- /dev/null
+++ b/src/components/owner/ownerRepairsDemo.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <el-button @click="openOwnerRepairs">查看业主报修</el-button>
+    <owner-repairs ref="ownerRepairsRef" />
+  </div>
+</template>
+
+<script>
+import OwnerRepairs from './ownerRepairs'
+
+export default {
+  components: {
+    OwnerRepairs
+  },
+  methods: {
+    openOwnerRepairs() {
+      this.$refs.ownerRepairsRef.open('101') // 传递业主ID
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerRooms.vue b/src/components/owner/ownerRooms.vue
new file mode 100644
index 0000000..769a2fe
--- /dev/null
+++ b/src/components/owner/ownerRooms.vue
@@ -0,0 +1,104 @@
+<template>
+  <el-dialog
+    :title="$t('ownerRooms.title')"
+    :visible.sync="visible"
+    width="70%"
+    :before-close="handleClose"
+  >
+    <el-table :data="ownerRoomsInfo.rooms" style="width: 100%">
+      <el-table-column prop="roomId" :label="$t('ownerRooms.roomId')" align="center" />
+      <el-table-column prop="layer" :label="$t('ownerRooms.layer')" align="center" />
+      <el-table-column prop="roomSubTypeName" :label="$t('ownerRooms.type')" align="center" />
+      <el-table-column :label="$t('ownerRooms.area')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.builtUpArea }}/{{ scope.row.roomArea }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="roomRent" :label="$t('ownerRooms.rent')" align="center" />
+      <el-table-column prop="stateName" :label="$t('ownerRooms.status')" align="center" />
+      <el-table-column :label="$t('ownerRooms.oweFee')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.roomOweFee || '0.00' }} ({{ $t('ownerRooms.updateDaily') }})
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <el-row class="mt-3">
+      <el-col :span="8">
+        <span>{{ $t('ownerRooms.subtotal') }}: {{ ownerRoomsInfo.allOweFeeAmount }}</span>
+      </el-col>
+      <el-col :span="16" class="text-right">
+        <el-pagination
+          :current-page="pagination.currentPage"
+          :page-size="pagination.pageSize"
+          :total="pagination.total"
+          layout="prev, pager, next"
+          @current-change="handlePageChange"
+        />
+      </el-col>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+import { queryRoomsByOwner } from '@/api/room/ownerRoomsApi'
+
+export default {
+  name: 'OwnerRooms',
+  data() {
+    return {
+      visible: false,
+      ownerRoomsInfo: {
+        rooms: [],
+        ownerId: '',
+        allOweFeeAmount: 0
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(params) {
+      this.ownerRoomsInfo.ownerId = params.ownerId
+      this.visible = true
+      this.loadOwnerRoomInfo()
+    },
+    handleClose() {
+      this.visible = false
+    },
+    handlePageChange(page) {
+      this.pagination.currentPage = page
+      this.loadOwnerRoomInfo()
+    },
+    async loadOwnerRoomInfo() {
+      try {
+        const params = {
+          page: this.pagination.currentPage,
+          row: this.pagination.pageSize,
+          communityId: this.getCommunityId(),
+          ownerId: this.ownerRoomsInfo.ownerId
+        }
+        
+        const response = await queryRoomsByOwner(params)
+        this.ownerRoomsInfo.rooms = response.rooms
+        this.pagination.total = response.total || 0
+        this.computeOwnerRoomOweFeeAmount()
+      } catch (error) {
+        console.error('加载业主房屋信息失败:', error)
+      }
+    },
+    computeOwnerRoomOweFeeAmount() {
+      let totalOweFeeAmount = 0
+      this.ownerRoomsInfo.rooms.forEach(room => {
+        if (room.roomOweFee) {
+          totalOweFeeAmount += parseFloat(room.roomOweFee)
+        }
+      })
+      this.ownerRoomsInfo.allOweFeeAmount = totalOweFeeAmount.toFixed(2)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/addFloor.vue b/src/components/room/addFloor.vue
new file mode 100644
index 0000000..f189b48
--- /dev/null
+++ b/src/components/room/addFloor.vue
@@ -0,0 +1,149 @@
+<template>
+  <el-dialog
+    :title="$t('room.addFloor.title')"
+    :visible.sync="visible"
+    width="50%"
+    :before-close="handleClose"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-form-item :label="$t('room.addFloor.floorNum')" prop="floorNum">
+        <el-input v-model="form.floorNum" :placeholder="$t('room.addFloor.floorNumPlaceholder')" />
+      </el-form-item>
+      
+      <el-form-item :label="$t('room.addFloor.name')" prop="name">
+        <el-input v-model="form.name" :placeholder="$t('room.addFloor.namePlaceholder')" />
+      </el-form-item>
+      
+      <el-form-item :label="$t('room.addFloor.floorArea')" prop="floorArea">
+        <el-input v-model="form.floorArea" :placeholder="$t('room.addFloor.floorAreaPlaceholder')">
+          <template slot="append">m²</template>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item :label="$t('room.addFloor.seq')" prop="seq">
+        <el-input-number v-model="form.seq" :min="1" />
+      </el-form-item>
+      
+      <el-form-item :label="$t('room.addFloor.remark')" prop="remark">
+        <el-input v-model="form.remark" type="textarea" :placeholder="$t('room.addFloor.remarkPlaceholder')" />
+      </el-form-item>
+      
+      <el-alert v-if="errorInfo" :title="errorInfo" type="error" show-icon />
+    </el-form>
+    
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleSave">{{ $t('common.save') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { addFloor } from '@/api/room/addFloorApi'
+
+export default {
+  name: 'AddFloor',
+  props: {
+    callBackListener: String,
+    callBackFunction: String
+  },
+  data() {
+    return {
+      visible: false,
+      form: {
+        communityId: this.getCommunityId(),
+        floorNum: '',
+        name: '',
+        floorArea: '',
+        seq: 1,
+        remark: ''
+      },
+      errorInfo: '',
+      rules: {
+        floorNum: [
+          { required: true, message: this.$t('room.addFloor.floorNumRequired'), trigger: 'blur' },
+          { min: 1, max: 64, message: this.$t('room.addFloor.floorNumLength'), trigger: 'blur' }
+        ],
+        name: [
+          { required: true, message: this.$t('room.addFloor.nameRequired'), trigger: 'blur' },
+          { min: 2, max: 64, message: this.$t('room.addFloor.nameLength'), trigger: 'blur' }
+        ],
+        floorArea: [
+          { required: true, message: this.$t('room.addFloor.floorAreaRequired'), trigger: 'blur' },
+          { pattern: /^\d+(\.\d{1,2})?$/, message: this.$t('room.addFloor.floorAreaFormat'), trigger: 'blur' }
+        ],
+        seq: [
+          { required: true, message: this.$t('room.addFloor.seqRequired'), trigger: 'blur' },
+          { type: 'number', message: this.$t('room.addFloor.seqNumber'), trigger: 'blur' }
+        ],
+        remark: [
+          { max: 200, message: this.$t('room.addFloor.remarkMaxLength'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    'form.floorNum': function(newVal) {
+      if (newVal) {
+        this.form.name = `${newVal}${this.$t('room.addFloor.buildingSuffix')}`
+      } else {
+        this.form.name = ''
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.visible = true
+      this.resetForm()
+    },
+    handleClose() {
+      this.visible = false
+      this.resetForm()
+    },
+    resetForm() {
+      this.form = {
+        communityId: this.getCommunityId(),
+        floorNum: '',
+        name: '',
+        floorArea: '',
+        seq: 1,
+        remark: ''
+      }
+      this.errorInfo = ''
+      this.$refs.form.resetFields()
+    },
+    async handleSave() {
+      this.$refs.form.validate(async (valid) => {
+        if (!valid) return
+        
+        try {
+          if (this.callBackListener && this.callBackFunction) {
+            const floorInfo = { ...this.form }
+            floorInfo.floorName = this.form.name
+            this.$emit(this.callBackFunction, floorInfo)
+            this.handleClose()
+            return
+          }
+          
+          const response = await addFloor(this.form)
+          
+          if (response.code === 0) {
+            this.$message.success(this.$t('room.addFloor.saveSuccess'))
+            this.handleClose()
+            this.$emit('refresh-data')
+            this.$emit('refresh-tree')
+          } else {
+            this.errorInfo = response.msg || this.$t('room.addFloor.saveFailed')
+          }
+        } catch (error) {
+          this.errorInfo = this.$t('room.addFloor.saveError')
+        }
+      })
+    },
+    getCommunityId() {
+      // 实际项目中替换为获取社区ID的逻辑
+      return 'your-community-id'
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/addFloorDemo.vue b/src/components/room/addFloorDemo.vue
new file mode 100644
index 0000000..319d932
--- /dev/null
+++ b/src/components/room/addFloorDemo.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <el-button @click="openAddFloorModal">Add Building</el-button>
+    <add-floor ref="addFloorModal" @refresh-data="refreshData" @refresh-tree="refreshTree" />
+  </div>
+</template>
+
+<script>
+import AddFloor from '../addFloor'
+
+export default {
+  components: {
+    AddFloor
+  },
+  methods: {
+    openAddFloorModal() {
+      this.$refs.addFloorModal.open()
+    },
+    refreshData() {
+      console.log('Refresh building list')
+    },
+    refreshTree() {
+      console.log('Refresh building tree')
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/addUnit.vue b/src/components/room/addUnit.vue
new file mode 100644
index 0000000..97720d3
--- /dev/null
+++ b/src/components/room/addUnit.vue
@@ -0,0 +1,141 @@
+<template>
+  <el-dialog
+    :title="$t('addUnit.title')"
+    :visible.sync="visible"
+    width="50%"
+    :before-close="handleClose"
+  >
+    <el-form ref="form" :model="addUnitInfo" label-width="120px">
+      <el-form-item :label="$t('addUnit.unitNum')" prop="unitNum" required>
+        <el-input
+          v-model="addUnitInfo.unitNum"
+          :placeholder="$t('addUnit.unitNumPlaceholder')"
+        ></el-input>
+      </el-form-item>
+      
+      <el-form-item :label="$t('addUnit.layerCount')" prop="layerCount" required>
+        <el-input
+          v-model.number="addUnitInfo.layerCount"
+          type="number"
+          :placeholder="$t('addUnit.layerCountPlaceholder')"
+        ></el-input>
+      </el-form-item>
+      
+      <el-form-item :label="$t('addUnit.unitArea')" prop="unitArea" required>
+        <el-input
+          v-model="addUnitInfo.unitArea"
+          :placeholder="$t('addUnit.unitAreaPlaceholder')"
+        ></el-input>
+      </el-form-item>
+      
+      <el-form-item :label="$t('addUnit.lift')" prop="lift" required>
+        <el-select 
+          v-model="addUnitInfo.lift" 
+          :placeholder="$t('addUnit.liftPlaceholder')"
+          style="width: 100%"
+        >
+          <el-option 
+            :label="$t('addUnit.liftOption1')" 
+            value="1010"
+          ></el-option>
+          <el-option 
+            :label="$t('addUnit.liftOption2')" 
+            value="2020"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item :label="$t('addUnit.remark')">
+        <el-input
+          v-model="addUnitInfo.remark"
+          type="textarea"
+          :rows="3"
+          :placeholder="$t('addUnit.remarkPlaceholder')"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('addUnit.cancel') }}</el-button>
+      <el-button type="primary" @click="addUnit">{{ $t('addUnit.save') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { saveUnit } from '@/api/room/addUnitApi'
+
+export default {
+  name: 'AddUnit',
+  data() {
+    return {
+      visible: false,
+      addUnitInfo: {
+        floorId: '',
+        unitNum: '',
+        layerCount: '',
+        lift: '',
+        remark: '',
+        communityId: '',
+        unitArea: ''
+      }
+    }
+  },
+  methods: {
+    open(params) {
+      this.refreshAddUnitInfo()
+      if (params && params.floorId) {
+        this.addUnitInfo.floorId = params.floorId
+      }
+      this.addUnitInfo.communityId = this.getCommunityId()
+      this.visible = true
+    },
+    handleClose() {
+      this.visible = false
+    },
+    refreshAddUnitInfo() {
+      this.addUnitInfo = {
+        floorId: '',
+        unitNum: '',
+        layerCount: '',
+        lift: '',
+        remark: '',
+        communityId: '',
+        unitArea: ''
+      }
+      this.$nextTick(() => {
+        if (this.$refs.form) {
+          this.$refs.form.clearValidate()
+        }
+      })
+    },
+    validateForm() {
+      return new Promise((resolve) => {
+        this.$refs.form.validate((valid) => {
+          resolve(valid)
+        })
+      })
+    },
+    async addUnit() {
+      const isValid = await this.validateForm()
+      if (!isValid) return
+      
+      if (this.addUnitInfo.unitNum === '0') {
+        this.$message.warning(this.$t('addUnit.zeroUnitWarning'))
+        return
+      }
+      
+      try {
+        await saveUnit(this.addUnitInfo)
+        this.$message.success(this.$t('addUnit.successMessage'))
+        this.$emit('refresh-tree', { floorId: this.addUnitInfo.floorId })
+        this.$emit('refresh-data', { floorId: this.addUnitInfo.floorId })
+        this.handleClose()
+      } catch (error) {
+        console.error('添加单元失败:', error)
+        this.$message.error(error.message || this.$t('addUnit.errorMessage'))
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/addUnitDemo.vue b/src/components/room/addUnitDemo.vue
new file mode 100644
index 0000000..4c321c1
--- /dev/null
+++ b/src/components/room/addUnitDemo.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <el-button type="primary" @click="openAddUnit">添加单元</el-button>
+    <add-unit ref="addUnit" @refresh-tree="refreshTree" @refresh-data="refreshData" />
+  </div>
+</template>
+
+<script>
+import AddUnit from './addUnit'
+
+export default {
+  components: {
+    AddUnit
+  },
+  methods: {
+    openAddUnit() {
+      this.$refs.addUnit.open({ floorId: '123' })
+    },
+    refreshTree(data) {
+      console.log('刷新树结构', data)
+    },
+    refreshData(data) {
+      console.log('刷新数据', data)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/deleteFloor.vue b/src/components/room/deleteFloor.vue
new file mode 100644
index 0000000..465d3d5
--- /dev/null
+++ b/src/components/room/deleteFloor.vue
@@ -0,0 +1,63 @@
+<template>
+  <el-dialog
+    :title="$t('room.deleteFloor.title')"
+    :visible.sync="visible"
+    width="30%"
+    :before-close="handleClose"
+  >
+    <p>{{ $t('room.deleteFloor.confirmMessage') }}</p>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('room.deleteFloor.cancelText') }}</el-button>
+      <el-button type="danger" @click="handleDelete">{{ $t('room.deleteFloor.confirmDelete') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteFloor } from '@/api/room/deleteFloorApi'
+
+export default {
+  name: 'DeleteFloor',
+  data() {
+    return {
+      visible: false,
+      floorInfo: {
+        floorId: '',
+        communityId: this.getCommunityId()
+      }
+    }
+  },
+  methods: {
+    open(floorInfo) {
+      this.floorInfo = {
+        ...floorInfo,
+        communityId: this.getCommunityId()
+      }
+      this.visible = true
+    },
+    handleClose() {
+      this.visible = false
+    },
+    async handleDelete() {
+      try {
+        const response = await deleteFloor(this.floorInfo)
+        
+        if (response.code === 0) {
+          this.$message.success(this.$t('room.deleteFloor.deleteSuccess'))
+          this.handleClose()
+          this.$emit('refresh-data')
+          this.$emit('refresh-tree')
+        } else {
+          this.$message.error(response.msg || this.$t('room.deleteFloor.deleteFailed'))
+        }
+      } catch (error) {
+        this.$message.error(this.$t('room.deleteFloor.deleteError'))
+      }
+    },
+    getCommunityId() {
+      // 实际项目中替换为获取社区ID的逻辑
+      return 'your-community-id'
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/deleteFloorDemo.vue b/src/components/room/deleteFloorDemo.vue
new file mode 100644
index 0000000..07dc593
--- /dev/null
+++ b/src/components/room/deleteFloorDemo.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <el-button @click="openDeleteModal">Delete Building</el-button>
+    <delete-floor ref="deleteModal" @refresh-data="refreshData" @refresh-tree="refreshTree" />
+  </div>
+</template>
+
+<script>
+import DeleteFloor from '../deleteFloor'
+
+export default {
+  components: {
+    DeleteFloor
+  },
+  methods: {
+    openDeleteModal() {
+      // 模拟楼栋数据
+      const buildingData = {
+        floorId: '123',
+        floorNum: 'A1'
+      }
+      this.$refs.deleteModal.open(buildingData)
+    },
+    refreshData() {
+      console.log('Refresh building list')
+    },
+    refreshTree() {
+      console.log('Refresh building tree')
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/deleteRoom.vue b/src/components/room/deleteRoom.vue
new file mode 100644
index 0000000..61bebb1
--- /dev/null
+++ b/src/components/room/deleteRoom.vue
@@ -0,0 +1,59 @@
+<template>
+  <el-dialog
+    :title="$t('room.deleteRoom.title')"
+    :visible.sync="dialogVisible"
+    width="30%"
+  >
+    <div style="text-align: center">
+      <p>{{ $t('room.deleteRoom.confirmMessage') }}</p>
+    </div>
+    <div slot="footer">
+      <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="danger" @click="deleteRoom">{{ $t('common.confirmDelete') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteRoom } from '@/api/room/deleteRoomApi'
+
+export default {
+  name: 'DeleteRoom',
+  data() {
+    return {
+      dialogVisible: false,
+      roomInfo: {}
+    }
+  },
+  created() {
+    this.$eventBus.$on('deleteRoom', this.open)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('deleteRoom', this.open)
+  },
+  methods: {
+    open(roomInfo) {
+      this.roomInfo = roomInfo
+      this.dialogVisible = true
+    },
+    async deleteRoom() {
+      try {
+        this.roomInfo.communityId = this.getCommunityId()
+        
+        await deleteRoom(this.roomInfo)
+        
+        this.dialogVisible = false
+        this.$emit('room-deleted')
+        this.$eventBus.$emit('room', 'loadData', { floorId: this.roomInfo.floorId })
+        this.$message.success(this.$t('common.deleteSuccess'))
+      } catch (error) {
+        console.error('删除房屋失败', error)
+        this.$message.error(error.message || this.$t('common.deleteFailed'))
+      }
+    },
+    getCommunityId() {
+      return this.$store.state.community.currentCommunity.communityId
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/deleteRoomDemo.vue b/src/components/room/deleteRoomDemo.vue
new file mode 100644
index 0000000..3212208
--- /dev/null
+++ b/src/components/room/deleteRoomDemo.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <el-button @click="openDeleteRoom">删除房屋</el-button>
+    <delete-room ref="deleteRoom" @room-deleted="handleRoomDeleted" />
+  </div>
+</template>
+
+<script>
+import DeleteRoom from '@/components/room/deleteRoom'
+
+export default {
+  components: {
+    DeleteRoom
+  },
+  methods: {
+    openDeleteRoom() {
+      // 模拟房屋数据
+      const roomData = {
+        roomId: '123',
+        floorId: '456'
+      }
+      this.$refs.deleteRoom.open(roomData)
+    },
+    handleRoomDeleted() {
+      console.log('房屋删除成功')
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/deleteUnit.vue b/src/components/room/deleteUnit.vue
new file mode 100644
index 0000000..397f3cc
--- /dev/null
+++ b/src/components/room/deleteUnit.vue
@@ -0,0 +1,61 @@
+<template>
+  <el-dialog
+    :title="$t('deleteUnit.title')"
+    :visible.sync="visible"
+    width="30%"
+    :before-close="handleClose"
+  >
+    <div class="text-center">
+      <p>{{ $t('deleteUnit.confirmMessage') }}</p>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('deleteUnit.cancel') }}</el-button>
+      <el-button type="danger" @click="deleteUnit">{{ $t('deleteUnit.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteUnit } from '@/api/room/deleteUnitApi'
+
+export default {
+  name: 'DeleteUnit',
+  data() {
+    return {
+      visible: false,
+      deleteUnitInfo: {
+        _currentFloorId: '',
+        _currentUnitId: ''
+      }
+    }
+  },
+  methods: {
+    open(params) {
+      this.deleteUnitInfo._currentFloorId = params.floorId
+      this.deleteUnitInfo._currentUnitId = params.unitId
+      this.visible = true
+    },
+    handleClose() {
+      this.visible = false
+    },
+    async deleteUnit() {
+      const param = {
+        floorId: this.deleteUnitInfo._currentFloorId,
+        unitId: this.deleteUnitInfo._currentUnitId,
+        communityId: this.getCommunityId()
+      }
+      
+      try {
+        await deleteUnit(param)
+        this.$message.success(this.$t('deleteUnit.successMessage'))
+        this.$emit('refresh-tree', { floorId: this.deleteUnitInfo._currentFloorId })
+        this.$emit('refresh-data', { floorId: this.deleteUnitInfo._currentFloorId })
+        this.handleClose()
+      } catch (error) {
+        console.error('删除单元失败:', error)
+        this.$message.error(error.message || this.$t('deleteUnit.errorMessage'))
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/deleteUnitDemo.vue b/src/components/room/deleteUnitDemo.vue
new file mode 100644
index 0000000..70773b6
--- /dev/null
+++ b/src/components/room/deleteUnitDemo.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <el-button type="danger" @click="openDeleteUnit">删除单元</el-button>
+    <delete-unit ref="deleteUnit" @refresh-tree="refreshTree" @refresh-data="refreshData" />
+  </div>
+</template>
+
+<script>
+import DeleteUnit from './deleteUnit'
+
+export default {
+  components: {
+    DeleteUnit
+  },
+  methods: {
+    openDeleteUnit() {
+      const unitData = {
+        floorId: '123',
+        unitId: '456'
+      }
+      this.$refs.deleteUnit.open(unitData)
+    },
+    refreshTree(data) {
+      console.log('刷新树结构', data)
+    },
+    refreshData(data) {
+      console.log('刷新数据', data)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/editFloor.vue b/src/components/room/editFloor.vue
new file mode 100644
index 0000000..ef88d26
--- /dev/null
+++ b/src/components/room/editFloor.vue
@@ -0,0 +1,138 @@
+<template>
+  <el-dialog
+    :title="$t('room.editFloor.title')"
+    :visible.sync="visible"
+    width="50%"
+    :before-close="handleClose"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-form-item :label="$t('room.editFloor.floorNum')" prop="floorNum">
+        <el-input v-model="form.floorNum" :placeholder="$t('room.editFloor.floorNumPlaceholder')" />
+      </el-form-item>
+      
+      <el-form-item :label="$t('room.editFloor.floorName')" prop="floorName">
+        <el-input v-model="form.floorName" :placeholder="$t('room.editFloor.floorNamePlaceholder')" />
+      </el-form-item>
+      
+      <el-form-item :label="$t('room.editFloor.floorArea')" prop="floorArea">
+        <el-input v-model="form.floorArea" :placeholder="$t('room.editFloor.floorAreaPlaceholder')">
+          <template slot="append">m²</template>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item :label="$t('room.editFloor.seq')" prop="seq">
+        <el-input-number v-model="form.seq" :min="1" />
+      </el-form-item>
+      
+      <el-form-item :label="$t('room.editFloor.remark')" prop="remark">
+        <el-input v-model="form.remark" type="textarea" :placeholder="$t('room.editFloor.remarkPlaceholder')" />
+      </el-form-item>
+      
+      <el-alert v-if="errorInfo" :title="errorInfo" type="error" show-icon />
+    </el-form>
+    
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleUpdate">{{ $t('common.update') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { editFloor } from '@/api/room/editFloorApi'
+
+export default {
+  name: 'EditFloor',
+  data() {
+    return {
+      visible: false,
+      form: {
+        floorId: '',
+        floorNum: '',
+        floorName: '',
+        floorArea: '',
+        seq: 1,
+        remark: '',
+        communityId: this.getCommunityId()
+      },
+      errorInfo: '',
+      rules: {
+        floorNum: [
+          { required: true, message: this.$t('room.editFloor.floorNumRequired'), trigger: 'blur' },
+          { min: 1, max: 64, message: this.$t('room.editFloor.floorNumLength'), trigger: 'blur' }
+        ],
+        floorName: [
+          { required: true, message: this.$t('room.editFloor.floorNameRequired'), trigger: 'blur' },
+          { min: 2, max: 64, message: this.$t('room.editFloor.floorNameLength'), trigger: 'blur' }
+        ],
+        floorArea: [
+          { required: true, message: this.$t('room.editFloor.floorAreaRequired'), trigger: 'blur' },
+          { pattern: /^\d+(\.\d{1,2})?$/, message: this.$t('room.editFloor.floorAreaFormat'), trigger: 'blur' }
+        ],
+        seq: [
+          { required: true, message: this.$t('room.editFloor.seqRequired'), trigger: 'blur' },
+          { type: 'number', message: this.$t('room.editFloor.seqNumber'), trigger: 'blur' }
+        ],
+        remark: [
+          { max: 200, message: this.$t('room.editFloor.remarkMaxLength'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(floorInfo) {
+      this.form = {
+        ...floorInfo,
+        communityId: this.getCommunityId()
+      }
+      this.visible = true
+      this.errorInfo = ''
+    },
+    handleClose() {
+      this.visible = false
+      this.resetForm()
+    },
+    resetForm() {
+      this.form = {
+        floorId: '',
+        floorNum: '',
+        floorName: '',
+        floorArea: '',
+        seq: 1,
+        remark: '',
+        communityId: this.getCommunityId()
+      }
+      this.errorInfo = ''
+    },
+    async handleUpdate() {
+      this.$refs.form.validate(async (valid) => {
+        if (!valid) return
+        
+        try {
+          const payload = {
+            ...this.form,
+            name: this.form.floorName
+          }
+          
+          const response = await editFloor(payload)
+          
+          if (response.code === 0) {
+            this.$message.success(this.$t('room.editFloor.updateSuccess'))
+            this.handleClose()
+            this.$emit('refresh-data')
+            this.$emit('refresh-tree', { floorId: this.form.floorId })
+          } else {
+            this.errorInfo = response.msg || this.$t('room.editFloor.updateFailed')
+          }
+        } catch (error) {
+          this.errorInfo = this.$t('room.editFloor.updateError')
+        }
+      })
+    },
+    getCommunityId() {
+      // 实际项目中替换为获取社区ID的逻辑
+      return 'your-community-id'
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/editFloorDemo.vue b/src/components/room/editFloorDemo.vue
new file mode 100644
index 0000000..d035f3d
--- /dev/null
+++ b/src/components/room/editFloorDemo.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <el-button @click="openEditModal">Edit Building</el-button>
+    <edit-floor ref="editModal" @refresh-data="refreshData" @refresh-tree="refreshTree" />
+  </div>
+</template>
+
+<script>
+import EditFloor from '../editFloor'
+
+export default {
+  components: {
+    EditFloor
+  },
+  methods: {
+    openEditModal() {
+      // 模拟楼栋数据
+      const buildingData = {
+        floorId: '123',
+        floorNum: 'A1',
+        floorName: 'A1 Building',
+        floorArea: '3000',
+        seq: 1,
+        remark: 'Main building'
+      }
+      this.$refs.editModal.open(buildingData)
+    },
+    refreshData() {
+      console.log('Refresh building list')
+    },
+    refreshTree(data) {
+      console.log('Refresh building tree with floorId:', data.floorId)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/editRoom.vue b/src/components/room/editRoom.vue
new file mode 100644
index 0000000..93e9f98
--- /dev/null
+++ b/src/components/room/editRoom.vue
@@ -0,0 +1,311 @@
+<template>
+  <el-dialog
+    :title="$t('room.editRoom.title')"
+    :visible.sync="dialogVisible"
+    width="50%"
+  >
+    <el-form :model="form" label-width="120px" label-position="right">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label="$t('room.editRoom.roomNum')" required>
+            <el-input v-model="form.roomNum" :placeholder="$t('room.editRoom.placeholder.roomNum')" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('room.editRoom.layer')" required>
+            <el-input v-model="form.layer" :placeholder="$t('room.editRoom.placeholder.layer')" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label="$t('room.editRoom.unit')" required>
+            <el-select v-model="form.unitId" :placeholder="$t('room.editRoom.placeholder.unit')">
+              <el-option
+                v-for="unit in units"
+                :key="unit.unitId"
+                :label="`${unit.unitNum}${$t('room.editRoom.unit')}`"
+                :value="unit.unitId"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('room.editRoom.roomType')" required>
+            <el-select v-model="form.roomSubType" :placeholder="$t('room.editRoom.placeholder.roomType')">
+              <el-option
+                v-for="item in roomSubTypes"
+                :key="item.statusCd"
+                :label="item.name"
+                :value="item.statusCd"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label="$t('room.editRoom.apartment1')" required>
+            <el-select v-model="form.apartment1" :placeholder="$t('room.editRoom.placeholder.apartment')">
+              <el-option
+                v-for="item in apartment1Options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('room.editRoom.apartment2')" required>
+            <el-select v-model="form.apartment2" :placeholder="$t('room.editRoom.placeholder.apartment')">
+              <el-option
+                v-for="item in apartment2Options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label="$t('room.editRoom.builtUpArea')" required>
+            <el-input v-model="form.builtUpArea" type="number" :placeholder="$t('room.editRoom.placeholder.builtUpArea')" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('room.editRoom.roomArea')" required>
+            <el-input v-model="form.roomArea" :placeholder="$t('room.editRoom.placeholder.roomArea')" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label="$t('room.editRoom.feeCoefficient')">
+            <el-input v-model="form.feeCoefficient" :placeholder="$t('room.editRoom.placeholder.feeCoefficient')" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('room.editRoom.roomRent')" required>
+            <el-input v-model="form.roomRent" :placeholder="$t('room.editRoom.placeholder.roomRent')" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      
+      <el-row v-if="form.state !== '2002'">
+        <el-col :span="12">
+          <el-form-item :label="$t('room.editRoom.roomState')" required>
+            <el-select v-model="form.state" :placeholder="$t('room.editRoom.placeholder.roomState')">
+              <el-option
+                v-for="item in roomStateOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('room.editRoom.endTime')" required>
+            <el-date-picker
+              v-model="form.endTime"
+              type="date"
+              :placeholder="$t('room.editRoom.placeholder.endTime')"
+              value-format="yyyy-MM-dd"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      
+      <div v-for="(item, index) in form.attrs" :key="index">
+        <el-form-item :label="item.specName">
+          <el-input
+            v-if="item.specType === '2233'"
+            v-model="item.value"
+            :placeholder="item.specHoldplace"
+          />
+          <el-select
+            v-else-if="item.specType === '3344'"
+            v-model="item.value"
+            :placeholder="item.specHoldplace"
+          >
+            <el-option
+              v-for="value in item.values"
+              :key="value.value"
+              :label="value.valueName"
+              :value="value.value"
+            />
+          </el-select>
+        </el-form-item>
+      </div>
+      
+      <el-form-item :label="$t('room.editRoom.remark')">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          :placeholder="$t('room.editRoom.placeholder.remark')"
+          :rows="3"
+        />
+      </el-form-item>
+    </el-form>
+    
+    <div slot="footer">
+      <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="editRoom">{{ $t('common.save') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { updateRoom, getUnits } from '@/api/room/editRoomApi'
+import { getDict } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditRoom',
+  data() {
+    return {
+      dialogVisible: false,
+      form: {
+        roomId: '',
+        unitId: '',
+        roomNum: '',
+        layer: '',
+        apartment: '',
+        apartment1: '',
+        apartment2: '',
+        builtUpArea: '',
+        feeCoefficient: '1.00',
+        state: '',
+        remark: '',
+        communityId: '',
+        attrs: [],
+        roomSubType: '110',
+        roomArea: '',
+        roomRent: '0',
+        endTime: ''
+      },
+      units: [],
+      roomSubTypes: [],
+      apartment1Options: [
+        { value: '10', label: this.$t('room.editRoom.apartment1Options.oneRoom') },
+        { value: '20', label: this.$t('room.editRoom.apartment1Options.twoRooms') },
+        { value: '30', label: this.$t('room.editRoom.apartment1Options.threeRooms') },
+        { value: '40', label: this.$t('room.editRoom.apartment1Options.fourRooms') },
+        { value: '50', label: this.$t('room.editRoom.apartment1Options.fiveRooms') },
+        { value: '60', label: this.$t('room.editRoom.apartment1Options.sixRooms') },
+        { value: '70', label: this.$t('room.editRoom.apartment1Options.sevenRooms') },
+        { value: '80', label: this.$t('room.editRoom.apartment1Options.eightRooms') }
+      ],
+      apartment2Options: [
+        { value: '101', label: this.$t('room.editRoom.apartment2Options.oneHall') },
+        { value: '102', label: this.$t('room.editRoom.apartment2Options.twoHalls') },
+        { value: '103', label: this.$t('room.editRoom.apartment2Options.threeHalls') },
+        { value: '104', label: this.$t('room.editRoom.apartment2Options.fourHalls') },
+        { value: '105', label: this.$t('room.editRoom.apartment2Options.fiveHalls') },
+        { value: '106', label: this.$t('room.editRoom.apartment2Options.sixHalls') },
+        { value: '107', label: this.$t('room.editRoom.apartment2Options.sevenHalls') },
+        { value: '108', label: this.$t('room.editRoom.apartment2Options.eightHalls') }
+      ],
+      roomStateOptions: [
+        { value: '2001', label: this.$t('room.editRoom.roomStateOptions.occupied') },
+        { value: '2003', label: this.$t('room.editRoom.roomStateOptions.delivered') },
+        { value: '2005', label: this.$t('room.editRoom.roomStateOptions.decorated') },
+        { value: '2004', label: this.$t('room.editRoom.roomStateOptions.vacant') },
+        { value: '2009', label: this.$t('room.editRoom.roomStateOptions.decorating') }
+      ]
+    }
+  },
+  created() {
+    this.loadRoomAttrSpec()
+    this.$eventBus.$on('editRoom', this.open)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('editRoom', this.open)
+  },
+  methods: {
+    async open(room) {
+      this.resetForm()
+      this.form = { ...this.form, ...room }
+      
+      try {
+        // 加载房屋类型字典
+        const data = await getDict('building_room', 'room_sub_type')
+        this.roomSubTypes = data
+        
+        // 加载单元列表
+        await this.loadUnits(room.floorId)
+        
+        this.dialogVisible = true
+      } catch (error) {
+        console.error('打开编辑房屋失败', error)
+      }
+    },
+    async loadUnits(floorId) {
+      try {
+        const response = await getUnits({
+          floorId: floorId,
+          communityId: this.getCommunityId()
+        })
+        this.units = response
+      } catch (error) {
+        console.error('加载单元列表失败', error)
+      }
+    },
+    async loadRoomAttrSpec() {
+      try {
+        // 这里需要实现获取属性规格的逻辑
+        // 简化处理，实际项目中需要调用API
+        this.form.attrs = []
+      } catch (error) {
+        console.error('加载房屋属性失败', error)
+      }
+    },
+    async editRoom() {
+      try {
+        this.form.apartment = this.form.apartment1 + this.form.apartment2
+        this.form.communityId = this.getCommunityId()
+        
+        await updateRoom(this.form)
+        
+        this.dialogVisible = false
+        this.$emit('room-updated')
+        this.$eventBus.$emit('room', 'loadData', { floorId: this.form.floorId })
+        this.$message.success(this.$t('common.updateSuccess'))
+      } catch (error) {
+        console.error('更新房屋失败', error)
+        this.$message.error(error.message || this.$t('common.updateFailed'))
+      }
+    },
+    resetForm() {
+      this.form = {
+        roomId: '',
+        unitId: '',
+        roomNum: '',
+        layer: '',
+        apartment: '',
+        apartment1: '',
+        apartment2: '',
+        builtUpArea: '',
+        feeCoefficient: '1.00',
+        state: '',
+        remark: '',
+        communityId: '',
+        attrs: [],
+        roomSubType: '110',
+        roomArea: '',
+        roomRent: '0',
+        endTime: ''
+      }
+    },
+    getCommunityId() {
+      return this.$store.state.community.currentCommunity.communityId
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/editRoomDemo.vue b/src/components/room/editRoomDemo.vue
new file mode 100644
index 0000000..6a9f92d
--- /dev/null
+++ b/src/components/room/editRoomDemo.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <el-button @click="openEditRoom">编辑房屋</el-button>
+    <edit-room ref="editRoom" @room-updated="handleRoomUpdated" />
+  </div>
+</template>
+
+<script>
+import EditRoom from '@/components/room/editRoom'
+
+export default {
+  components: {
+    EditRoom
+  },
+  methods: {
+    openEditRoom() {
+      // 模拟房屋数据
+      const roomData = {
+        roomId: '123',
+        floorId: '456',
+        roomNum: '101',
+        unitId: '789',
+        layer: '1',
+        apartment: '1020',
+        builtUpArea: '100',
+        feeCoefficient: '1.0',
+        state: '2001',
+        remark: '备注信息',
+        roomArea: '80',
+        roomRent: '3000',
+        endTime: '2023-12-31'
+      }
+      this.$refs.editRoom.open(roomData)
+    },
+    handleRoomUpdated() {
+      console.log('房屋更新成功')
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/editUnit.vue b/src/components/room/editUnit.vue
new file mode 100644
index 0000000..351c344
--- /dev/null
+++ b/src/components/room/editUnit.vue
@@ -0,0 +1,123 @@
+<template>
+  <el-dialog
+    :title="$t('editUnit.title')"
+    :visible.sync="visible"
+    width="50%"
+    :before-close="handleClose"
+  >
+    <el-form ref="form" :model="editUnitInfo" label-width="120px">
+      <el-form-item :label="$t('editUnit.unitNum')" prop="unitNum" required>
+        <el-input
+          v-model="editUnitInfo.unitNum"
+          :placeholder="$t('editUnit.unitNumPlaceholder')"
+        ></el-input>
+      </el-form-item>
+      
+      <el-form-item :label="$t('editUnit.layerCount')" prop="layerCount" required>
+        <el-input
+          v-model.number="editUnitInfo.layerCount"
+          type="number"
+          :placeholder="$t('editUnit.layerCountPlaceholder')"
+        ></el-input>
+      </el-form-item>
+      
+      <el-form-item :label="$t('editUnit.unitArea')" prop="unitArea" required>
+        <el-input
+          v-model="editUnitInfo.unitArea"
+          :placeholder="$t('editUnit.unitAreaPlaceholder')"
+        ></el-input>
+      </el-form-item>
+      
+      <el-form-item :label="$t('editUnit.lift')" prop="lift" required>
+        <el-select 
+          v-model="editUnitInfo.lift" 
+          :placeholder="$t('editUnit.liftPlaceholder')"
+          style="width: 100%"
+        >
+          <el-option 
+            :label="$t('editUnit.liftOption1')" 
+            value="1010"
+          ></el-option>
+          <el-option 
+            :label="$t('editUnit.liftOption2')" 
+            value="2020"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item :label="$t('editUnit.remark')">
+        <el-input
+          v-model="editUnitInfo.remark"
+          type="textarea"
+          :rows="3"
+          :placeholder="$t('editUnit.remarkPlaceholder')"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('editUnit.cancel') }}</el-button>
+      <el-button type="primary" @click="editUnit">{{ $t('editUnit.save') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { updateUnit } from '@/api/room/editUnitApi'
+
+export default {
+  name: 'EditUnit',
+  data() {
+    return {
+      visible: false,
+      editUnitInfo: {
+        floorId: '',
+        unitId: '',
+        unitNum: '',
+        layerCount: '',
+        lift: '',
+        remark: '',
+        communityId: '',
+        unitArea: ''
+      }
+    }
+  },
+  methods: {
+    open(params) {
+      Object.assign(this.editUnitInfo, params)
+      this.editUnitInfo.communityId = this.getCommunityId()
+      this.visible = true
+    },
+    handleClose() {
+      this.visible = false
+    },
+    validateForm() {
+      return new Promise((resolve) => {
+        this.$refs.form.validate((valid) => {
+          resolve(valid)
+        })
+      })
+    },
+    async editUnit() {
+      const isValid = await this.validateForm()
+      if (!isValid) return
+      
+      if (this.editUnitInfo.unitNum === '0') {
+        this.$message.warning(this.$t('editUnit.zeroUnitWarning'))
+        return
+      }
+      
+      try {
+        await updateUnit(this.editUnitInfo)
+        this.$message.success(this.$t('editUnit.successMessage'))
+        this.$emit('refresh-tree', { floorId: this.editUnitInfo.floorId })
+        this.$emit('refresh-data', { floorId: this.editUnitInfo.floorId })
+        this.handleClose()
+      } catch (error) {
+        console.error('修改单元失败:', error)
+        this.$message.error(error.message || this.$t('editUnit.errorMessage'))
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/editUnitDemo.vue b/src/components/room/editUnitDemo.vue
new file mode 100644
index 0000000..1bfab3d
--- /dev/null
+++ b/src/components/room/editUnitDemo.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <el-button type="primary" @click="openEditUnit">编辑单元</el-button>
+    <edit-unit ref="editUnit" @refresh-tree="refreshTree" @refresh-data="refreshData" />
+  </div>
+</template>
+
+<script>
+import EditUnit from './editUnit'
+
+export default {
+  components: {
+    EditUnit
+  },
+  methods: {
+    openEditUnit() {
+      const unitData = {
+        floorId: '123',
+        unitId: '456',
+        unitNum: 'A1',
+        layerCount: 20,
+        lift: '1010',
+        unitArea: '3000',
+        remark: '备注信息'
+      }
+      this.$refs.editUnit.open(unitData)
+    },
+    refreshTree(data) {
+      console.log('刷新树结构', data)
+    },
+    refreshData(data) {
+      console.log('刷新数据', data)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/floorUnitTree.vue b/src/components/room/floorUnitTree.vue
new file mode 100644
index 0000000..e04c0ef
--- /dev/null
+++ b/src/components/room/floorUnitTree.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="bg-white margin-top-xs padding border-radius tree-div">
+    <el-tree
+      v-if="treeData.length > 0"
+      :data="treeData"
+      :props="defaultProps"
+      node-key="id"
+      default-expand-all
+      :expand-on-click-node="false"
+      @node-click="handleNodeClick"
+    >
+      <template #default="{ node, data }">
+        <span class="custom-tree-node">
+          <i :class="data.icon" style="margin-right:5px"></i>
+          <span>{{ node.label }}</span>
+        </span>
+      </template>
+    </el-tree>
+    <div v-else class="no-data">
+      {{ $t('room.floorUnitTree.noData') }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { getFloorAndUnits } from '@/api/room/floorUnitTreeApi'
+
+export default {
+  name: 'FloorUnitTree',
+  props: {
+    callBackListener: String
+  },
+  data() {
+    return {
+      treeData: [],
+      defaultProps: {
+        children: 'children',
+        label: 'text'
+      },
+      currentFloorId: ''
+    }
+  },
+  mounted() {
+    this.loadData()
+    this.$eventBus.$on('floorUnitTree', this.handleRefreshTree)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('floorUnitTree', this.handleRefreshTree)
+  },
+  methods: {
+    handleRefreshTree(param) {
+      if (param) {
+        this.currentFloorId = param.floorId
+      }
+      this.loadData()
+    },
+    async loadData() {
+      try {
+        const communityId = this.getCommunityId()
+        const response = await getFloorAndUnits(communityId)
+        this.treeData = this.transformData(response)
+      } catch (error) {
+        console.error('加载楼栋单元树失败', error)
+      }
+    },
+    transformData(units) {
+      const treeData = []
+      const floorMap = {}
+      
+      units.forEach(item => {
+        if (!floorMap[item.floorId]) {
+          floorMap[item.floorId] = {
+            id: `f_${item.floorId}`,
+            floorId: item.floorId,
+            floorNum: item.floorNum,
+            icon: 'el-icon-office-building',
+            text: `${item.floorNum}${this.$t('room.floorUnitTree.building')}(${item.floorName})`,
+            children: []
+          }
+          treeData.push(floorMap[item.floorId])
+        }
+        
+        if (item.unitId && item.unitNum !== '0') {
+          floorMap[item.floorId].children.push({
+            id: `u_${item.unitId}`,
+            unitId: item.unitId,
+            text: `${item.unitNum}${this.$t('room.floorUnitTree.unit')}`,
+            icon: 'el-icon-house'
+          })
+        }
+      })
+      
+      return treeData
+    },
+    handleNodeClick(data) {
+      if (data.id.startsWith('f_')) {
+        this.$emit('switchFloor', { floorId: data.floorId })
+        this.$eventBus.$emit(this.callBackListener, 'switchFloor', { floorId: data.floorId })
+      } else {
+        this.$emit('switchUnit', { unitId: data.unitId })
+        this.$eventBus.$emit(this.callBackListener, 'switchUnit', { unitId: data.unitId })
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+.tree-div {
+  min-height: 300px;
+}
+.custom-tree-node {
+  display: flex;
+  align-items: center;
+}
+.no-data {
+  text-align: center;
+  padding: 20px;
+  color: #909399;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/room/floorUnitTreeDemo.vue b/src/components/room/floorUnitTreeDemo.vue
new file mode 100644
index 0000000..d138cd7
--- /dev/null
+++ b/src/components/room/floorUnitTreeDemo.vue
@@ -0,0 +1,30 @@
+<template>
+  <floor-unit-tree
+    :call-back-listener="callbackListener"
+    @switchFloor="handleSwitchFloor"
+    @switchUnit="handleSwitchUnit"
+  />
+</template>
+
+<script>
+import FloorUnitTree from '@/components/room/floorUnitTree'
+
+export default {
+  components: {
+    FloorUnitTree
+  },
+  data() {
+    return {
+      callbackListener: 'demoFloorUnitTree'
+    }
+  },
+  methods: {
+    handleSwitchFloor(data) {
+      console.log('切换楼栋', data.floorId)
+    },
+    handleSwitchUnit(data) {
+      console.log('切换单元', data.unitId)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/importOwnerRoom.vue b/src/components/room/importOwnerRoom.vue
new file mode 100644
index 0000000..14151f0
--- /dev/null
+++ b/src/components/room/importOwnerRoom.vue
@@ -0,0 +1,129 @@
+<template>
+  <el-dialog
+    :title="$t('room.importOwnerRoom.title')"
+    :visible.sync="visible"
+    width="50%"
+    :before-close="handleClose"
+  >
+    <el-form ref="form" :model="form" label-width="120px">
+      <el-form-item :label="$t('room.importOwnerRoom.selectFile')">
+        <el-upload
+          ref="upload"
+          action=""
+          :auto-upload="false"
+          :on-change="handleFileChange"
+          accept=".xls,.xlsx"
+        >
+          <el-button size="small" type="primary">{{ $t('room.importOwnerRoom.clickUpload') }}</el-button>
+          <div slot="tip" class="el-upload__tip">
+            {{ fileName || $t('room.importOwnerRoom.requiredFile') }}
+          </div>
+        </el-upload>
+      </el-form-item>
+      
+      <el-form-item :label="$t('room.importOwnerRoom.downloadTemplate')">
+        <span>{{ $t('room.importOwnerRoom.downloadFirst') }}</span>
+        <el-link type="primary" :href="templateUrl" target="_blank">
+          {{ $t('room.importOwnerRoom.propertyTemplate') }}
+        </el-link>
+        <span>{{ $t('room.importOwnerRoom.prepareData') }}</span>
+      </el-form-item>
+    </el-form>
+    
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleImport">{{ $t('common.import') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { importOwnerRoom } from '@/api/room/importOwnerRoomApi'
+
+export default {
+  name: 'ImportOwnerRoom',
+  data() {
+    return {
+      visible: false,
+      form: {
+        communityId: this.getCommunityId(),
+        file: null
+      },
+      fileName: '',
+      templateUrl: '/import/importRoom.xlsx'
+    }
+  },
+  methods: {
+    open() {
+      this.visible = true
+      this.resetForm()
+    },
+    handleClose() {
+      this.visible = false
+      this.resetForm()
+    },
+    resetForm() {
+      this.form.file = null
+      this.fileName = ''
+      if (this.$refs.upload) {
+        this.$refs.upload.clearFiles()
+      }
+    },
+    handleFileChange(file) {
+      this.form.file = file.raw
+      this.fileName = file.name
+    },
+    validate() {
+      if (!this.form.file) {
+        this.$message.error(this.$t('room.importOwnerRoom.fileRequired'))
+        return false
+      }
+      
+      const fileType = this.fileName.split('.').pop().toLowerCase()
+      if (!['xls', 'xlsx'].includes(fileType)) {
+        this.$message.error(this.$t('room.importOwnerRoom.invalidFormat'))
+        return false
+      }
+      
+      if (this.form.file.size > 2 * 1024 * 1024) {
+        this.$message.error(this.$t('room.importOwnerRoom.fileSizeExceeded'))
+        return false
+      }
+      
+      return true
+    },
+    async handleImport() {
+      if (!this.validate()) return
+      
+      try {
+        const formData = new FormData()
+        formData.append('uploadFile', this.form.file)
+        formData.append('communityId', this.form.communityId)
+        formData.append('importAdapt', 'importRoomOwner')
+        
+        const response = await importOwnerRoom(formData)
+        
+        if (response.code === 0) {
+          this.$message.success(this.$t('room.importOwnerRoom.importSuccess'))
+          this.handleClose()
+          this.$router.push({
+            path: '/property/assetImportLogDetail',
+            query: {
+              logId: response.data.logId,
+              logType: 'importRoomOwner'
+            }
+          })
+        } else {
+          this.$message.error(response.msg || this.$t('room.importOwnerRoom.importFailed'))
+        }
+      } catch (error) {
+        this.$message.error(this.$t('room.importOwnerRoom.importError'))
+      }
+    },
+    getCommunityId() {
+      // 实际项目中替换为获取社区ID的逻辑
+      return 'your-community-id'
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/importOwnerRoomDemo.vue b/src/components/room/importOwnerRoomDemo.vue
new file mode 100644
index 0000000..a97c622
--- /dev/null
+++ b/src/components/room/importOwnerRoomDemo.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <el-button @click="openImportModal">Open Import</el-button>
+    <import-owner-room ref="importModal" @import-success="handleImportSuccess" />
+  </div>
+</template>
+
+<script>
+import ImportOwnerRoom from '../importOwnerRoom'
+
+export default {
+  components: {
+    ImportOwnerRoom
+  },
+  methods: {
+    openImportModal() {
+      this.$refs.importModal.open()
+    },
+    handleImportSuccess() {
+      console.log('Import successful, handle refresh logic here')
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/ownerRoomsDemo.vue b/src/components/room/ownerRoomsDemo.vue
new file mode 100644
index 0000000..99173fd
--- /dev/null
+++ b/src/components/room/ownerRoomsDemo.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <el-button type="primary" @click="openOwnerRooms">查看业主房屋</el-button>
+    <owner-rooms ref="ownerRooms" />
+  </div>
+</template>
+
+<script>
+import OwnerRooms from './ownerRooms'
+
+export default {
+  components: {
+    OwnerRooms
+  },
+  methods: {
+    openOwnerRooms() {
+      this.$refs.ownerRooms.open({ ownerId: '123' })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/roomContracts.vue b/src/components/room/roomContracts.vue
new file mode 100644
index 0000000..c16d190
--- /dev/null
+++ b/src/components/room/roomContracts.vue
@@ -0,0 +1,152 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    :title="$t('roomContracts.title')"
+    width="90%"
+    top="5vh"
+    custom-class="custom-modal"
+    @close="handleClose"
+  >
+    <el-table
+      :data="roomContractsInfo.contracts"
+      stripe
+      border
+      style="width: 100%; margin-top: 15px"
+    >
+      <el-table-column
+        prop="contractName"
+        :label="$t('roomContracts.contractName')"
+        align="center"
+      />
+      <el-table-column
+        prop="contractCode"
+        :label="$t('roomContracts.contractCode')"
+        align="center"
+      />
+      <el-table-column
+        prop="parentContractCode"
+        :label="$t('roomContracts.parentContractCode')"
+        align="center"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.parentContractCode || '-' }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="contractTypeName"
+        :label="$t('roomContracts.contractType')"
+        align="center"
+      />
+      <el-table-column
+        prop="operator"
+        :label="$t('roomContracts.operator')"
+        align="center"
+      />
+      <el-table-column
+        prop="amount"
+        :label="$t('roomContracts.amount')"
+        align="center"
+      />
+      <el-table-column
+        prop="startTime"
+        :label="$t('roomContracts.startTime')"
+        align="center"
+      />
+      <el-table-column
+        prop="endTime"
+        :label="$t('roomContracts.endTime')"
+        align="center"
+      />
+      <el-table-column
+        prop="createTime"
+        :label="$t('roomContracts.createTime')"
+        align="center"
+      />
+      <el-table-column
+        prop="stateName"
+        :label="$t('roomContracts.state')"
+        align="center"
+      />
+    </el-table>
+    
+    <el-pagination
+      v-if="pagination.total > 0"
+      background
+      layout="prev, pager, next"
+      :total="pagination.total"
+      :page-size="pagination.pageSize"
+      :current-page="pagination.currentPage"
+      @current-change="handlePageChange"
+      style="margin-top: 20px; text-align: right"
+    />
+  </el-dialog>
+</template>
+
+<script>
+import { getRoomContracts } from '@/api/room/roomContractsApi'
+
+export default {
+  name: 'RoomContracts',
+  data() {
+    return {
+      visible: false,
+      roomContractsInfo: {
+        contracts: [],
+        ownerId: '',
+        roomId: ''
+      },
+      pagination: {
+        total: 0,
+        pageSize: 10,
+        currentPage: 1
+      }
+    }
+  },
+  methods: {
+    open(params) {
+      this.roomContractsInfo.ownerId = params.ownerId || ''
+      this.roomContractsInfo.roomId = params.roomId || ''
+      this.pagination.currentPage = 1
+      this.visible = true
+      this.loadData()
+    },
+    handleClose() {
+      this.visible = false
+    },
+    handlePageChange(currentPage) {
+      this.pagination.currentPage = currentPage
+      this.loadData()
+    },
+    async loadData() {
+      try {
+        const params = {
+          page: this.pagination.currentPage,
+          row: this.pagination.pageSize,
+          communityId: this.getCommunityId(),
+          objId: this.roomContractsInfo.ownerId
+        }
+        
+        if (this.roomContractsInfo.roomId) {
+          params.roomId = this.roomContractsInfo.roomId
+        }
+        
+        const response = await getRoomContracts(params, this.roomContractsInfo.roomId)
+        this.roomContractsInfo.contracts = response.data
+        this.pagination.total = response.records
+      } catch (error) {
+        console.error('加载合同信息失败:', error)
+        this.$message.error(this.$t('common.loadFailed'))
+      }
+    },
+    getCommunityId() {
+      return this.$store.state.user.currentCommunity.communityId
+    }
+  }
+}
+</script>
+
+<style scoped>
+.custom-modal >>> .el-dialog__body {
+  padding: 15px 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/room/roomContractsDemo.vue b/src/components/room/roomContractsDemo.vue
new file mode 100644
index 0000000..faad8a7
--- /dev/null
+++ b/src/components/room/roomContractsDemo.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <el-button type="primary" @click="openByOwner">
+      {{ $t('roomContractsDemo.openByOwner') }}
+    </el-button>
+    <el-button type="primary" @click="openByRoom">
+      {{ $t('roomContractsDemo.openByRoom') }}
+    </el-button>
+    <room-contracts ref="contractsRef" />
+  </div>
+</template>
+
+<script>
+import RoomContracts from './roomContracts'
+
+export default {
+  components: {
+    RoomContracts
+  },
+  methods: {
+    openByOwner() {
+      // 模拟业主ID
+      this.$refs.contractsRef.open({ ownerId: '12345' })
+    },
+    openByRoom() {
+      // 模拟房屋ID
+      this.$refs.contractsRef.open({ roomId: '67890' })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/roomOweFees.vue b/src/components/room/roomOweFees.vue
new file mode 100644
index 0000000..f1cf472
--- /dev/null
+++ b/src/components/room/roomOweFees.vue
@@ -0,0 +1,128 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    :title="$t('roomOweFees.title')"
+    width="80%"
+    top="5vh"
+    custom-class="custom-modal"
+    @close="handleClose"
+  >
+    <el-table
+      :data="roomOweFeesInfo.fees"
+      stripe
+      border
+      style="width: 100%; margin-top: 15px"
+    >
+      <el-table-column
+        prop="payerObjName"
+        :label="$t('roomOweFees.payerObj')"
+        align="center"
+      />
+      <el-table-column
+        prop="ownerName"
+        :label="$t('roomOweFees.ownerName')"
+        align="center"
+      />
+      <el-table-column
+        prop="ownerTel"
+        :label="$t('roomOweFees.phone')"
+        align="center"
+      />
+      <el-table-column
+        prop="endTime"
+        :label="$t('roomOweFees.startTime')"
+        align="center"
+      />
+      <el-table-column
+        prop="deadlineTime"
+        :label="$t('roomOweFees.endTime')"
+        align="center"
+      />
+      <el-table-column
+        prop="amountOwed"
+        :label="`${$t('roomOweFees.total')} (${$t('roomOweFees.unit')})`"
+        align="center"
+      />
+      <el-table-column
+        prop="updateTime"
+        :label="$t('roomOweFees.updateTime')"
+        align="center"
+      />
+    </el-table>
+    
+    <el-pagination
+      v-if="pagination.total > 0"
+      background
+      layout="prev, pager, next"
+      :total="pagination.total"
+      :page-size="pagination.pageSize"
+      :current-page="pagination.currentPage"
+      @current-change="handlePageChange"
+      style="margin-top: 20px; text-align: right"
+    />
+  </el-dialog>
+</template>
+
+<script>
+import { getRoomOweFees } from '@/api/room/roomOweFeesApi'
+
+export default {
+  name: 'RoomOweFees',
+  data() {
+    return {
+      visible: false,
+      roomOweFeesInfo: {
+        fees: [],
+        roomId: ''
+      },
+      pagination: {
+        total: 0,
+        pageSize: 10,
+        currentPage: 1
+      }
+    }
+  },
+  methods: {
+    open(roomId) {
+      this.roomOweFeesInfo.roomId = roomId
+      this.pagination.currentPage = 1
+      this.visible = true
+      this.loadData()
+    },
+    handleClose() {
+      this.visible = false
+    },
+    handlePageChange(currentPage) {
+      this.pagination.currentPage = currentPage
+      this.loadData()
+    },
+    async loadData() {
+      try {
+        const params = {
+          page: this.pagination.currentPage,
+          row: this.pagination.pageSize,
+          communityId: this.getCommunityId(),
+          payerObjId: this.roomOweFeesInfo.roomId,
+          payerObjType: '3333'
+        }
+        
+        const response = await getRoomOweFees(params)
+        this.roomOweFeesInfo.fees = response.data
+        this.pagination.total = response.records
+      } catch (error) {
+        console.error('加载房屋欠费信息失败:', error)
+        this.$message.error(this.$t('common.loadFailed'))
+      }
+    },
+    getCommunityId() {
+      return this.$store.state.user.currentCommunity.communityId
+    }
+  }
+}
+</script>
+
+<style scoped>
+.custom-modal >>> .el-dialog__body {
+  padding: 15px 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/room/roomOweFeesDemo.vue b/src/components/room/roomOweFeesDemo.vue
new file mode 100644
index 0000000..f5ab56a
--- /dev/null
+++ b/src/components/room/roomOweFeesDemo.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <el-button type="primary" @click="openModal">
+      {{ $t('roomOweFeesDemo.openBtn') }}
+    </el-button>
+    <room-owe-fees ref="roomOweFeesRef" />
+  </div>
+</template>
+
+<script>
+import RoomOweFees from './roomOweFees'
+
+export default {
+  components: {
+    RoomOweFees
+  },
+  methods: {
+    openModal() {
+      // 模拟房屋ID
+      const roomId = '67890'
+      this.$refs.roomOweFeesRef.open(roomId)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/searchFloor.vue b/src/components/room/searchFloor.vue
new file mode 100644
index 0000000..366739f
--- /dev/null
+++ b/src/components/room/searchFloor.vue
@@ -0,0 +1,140 @@
+<template>
+  <el-dialog
+    :title="$t('room.searchFloor.title')"
+    :visible.sync="dialogVisible"
+    width="80%"
+  >
+    <el-row>
+      <el-col :span="24">
+        <el-row :gutter="10">
+          <el-col :sm="8" :md="6">
+            <el-input
+              v-model="searchParams.floorId"
+              :placeholder="$t('room.searchFloor.placeholder.floorId')"
+            />
+          </el-col>
+          <el-col :sm="8" :md="6">
+            <el-input
+              v-model="searchParams.floorName"
+              :placeholder="$t('room.searchFloor.placeholder.floorName')"
+            />
+          </el-col>
+          <el-col :sm="8" :md="6">
+            <el-input
+              v-model="searchParams.floorNum"
+              :placeholder="$t('room.searchFloor.placeholder.floorNum')"
+            />
+          </el-col>
+          <el-col :sm="24" :md="6">
+            <el-button type="primary" @click="searchFloors">
+              <i class="el-icon-search"></i>
+              {{ $t('common.search') }}
+            </el-button>
+            <el-button @click="resetFloors">
+              <i class="el-icon-refresh"></i>
+              {{ $t('common.reset') }}
+            </el-button>
+          </el-col>
+        </el-row>
+        
+        <el-table :data="floorList" style="width: 100%; margin-top: 15px">
+          <el-table-column prop="floorId" :label="$t('room.searchFloor.table.floorId')" align="center" />
+          <el-table-column prop="floorName" :label="$t('room.searchFloor.table.floorName')" align="center" />
+          <el-table-column prop="floorNum" :label="$t('room.searchFloor.table.floorNum')" align="center" />
+          <el-table-column prop="userName" :label="$t('room.searchFloor.table.creator')" align="center" />
+          <el-table-column :label="$t('room.searchFloor.table.actions')" align="center">
+            <template #default="{ row }">
+              <el-button size="mini" type="primary" @click="chooseFloor(row)">
+                {{ $t('common.select') }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="total"
+          :page-size="pageSize"
+          :current-page="currentPage"
+          @current-change="handlePageChange"
+        />
+      </el-col>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+import { searchFloors } from '@/api/room/searchFloorApi'
+
+export default {
+  name: 'SearchFloor',
+  props: {
+    emitChooseFloor: String,
+    emitLoadData: String
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      searchParams: {
+        floorId: '',
+        floorName: '',
+        floorNum: ''
+      },
+      floorList: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  methods: {
+    open() {
+      this.dialogVisible = true
+      this.resetFloors()
+      this.loadFloors()
+    },
+    async loadFloors() {
+      try {
+        const params = {
+          ...this.searchParams,
+          page: this.currentPage,
+          row: this.pageSize,
+          communityId: this.getCommunityId()
+        }
+        
+        const response = await searchFloors(params)
+        this.floorList = response.apiFloorDataVoList
+        this.total = response.records
+      } catch (error) {
+        console.error('加载楼栋列表失败', error)
+      }
+    },
+    searchFloors() {
+      this.currentPage = 1
+      this.loadFloors()
+    },
+    resetFloors() {
+      this.searchParams = {
+        floorId: '',
+        floorName: '',
+        floorNum: ''
+      }
+      this.currentPage = 1
+      this.loadFloors()
+    },
+    handlePageChange(page) {
+      this.currentPage = page
+      this.loadFloors()
+    },
+    chooseFloor(floor) {
+      this.$emit('chooseFloor', floor)
+      this.$eventBus.$emit(this.emitChooseFloor, 'chooseFloor', floor)
+      this.$eventBus.$emit(this.emitLoadData, 'loadData', { floorId: floor.floorId })
+      this.dialogVisible = false
+    },
+    getCommunityId() {
+      return this.$store.state.community.currentCommunity.communityId
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/room/searchFloorDemo.vue b/src/components/room/searchFloorDemo.vue
new file mode 100644
index 0000000..413cf6a
--- /dev/null
+++ b/src/components/room/searchFloorDemo.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <el-button @click="openSearchFloor">打开搜索楼栋</el-button>
+    <search-floor
+      ref="searchFloor"
+      emit-choose-floor="handleChooseFloor"
+      emit-load-data="handleLoadData"
+      @choose-floor="handleChooseFloor"
+    />
+  </div>
+</template>
+
+<script>
+import SearchFloor from '@/components/room/searchFloor'
+
+export default {
+  components: {
+    SearchFloor
+  },
+  methods: {
+    openSearchFloor() {
+      this.$refs.searchFloor.open()
+    },
+    handleChooseFloor(floor) {
+      console.log('选择了楼栋', floor)
+    },
+    handleLoadData(data) {
+      console.log('加载数据', data)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/i18n/index.js b/src/i18n/index.js
index 2e6830c..8f81903 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -122,6 +122,7 @@ import { messages as enterCommunityMessages } from '../views/community/enterComm
 import { messages as roomRenovationManageMessages } from '../views/community/roomRenovationManageLang'
 import { messages as feeConfigManageMessages } from '../views/fee/feeConfigManageLang'
 import { messages as payFeeConfigDiscountManageMessages } from '../views/fee/payFeeConfigDiscountManageLang'
+import { messages as roomMessages } from '../views/room/roomLang.js'
 
 
 Vue.use(VueI18n)
@@ -249,6 +250,7 @@ const messages = {
     ...roomRenovationManageMessages.en,
     ...feeConfigManageMessages.en,
     ...payFeeConfigDiscountManageMessages.en,
+    ...roomMessages.en,
   },
   zh: {
     ...loginMessages.zh,
@@ -371,6 +373,7 @@ const messages = {
     ...roomRenovationManageMessages.zh,
     ...feeConfigManageMessages.zh,
     ...payFeeConfigDiscountManageMessages.zh,
+    ...roomMessages.en,
   }
 }
 
diff --git a/src/router/index.js b/src/router/index.js
index faeab81..f85884c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -587,15 +587,20 @@ const routes = [
         component: () => import('@/views/community/roomRenovationManageList.vue')
       },
       {
-        path:'/pages/property/feeConfigManage',
-        name:'/pages/property/feeConfigManage',
+        path: '/pages/property/feeConfigManage',
+        name: '/pages/property/feeConfigManage',
         component: () => import('@/views/fee/feeConfigManageList.vue')
-        },
-        {
-          path:'/views/fee/payFeeConfigDiscountManage',
-          name:'/views/fee/payFeeConfigDiscountManage',
-          component: () => import('@/views/fee/payFeeConfigDiscountManageList.vue')
-          },
+      },
+      {
+        path: '/views/fee/payFeeConfigDiscountManage',
+        name: '/views/fee/payFeeConfigDiscountManage',
+        component: () => import('@/views/fee/payFeeConfigDiscountManageList.vue')
+      },
+      {
+        path: '/pages/property/room',
+        name: '/pages/property/room',
+        component: () => import('@/views/room/roomList.vue')
+      },
       // 其他子路由可以在这里添加
     ]
   },
diff --git a/src/src/locale/lang/community/enterCommunityLang.js b/src/src/locale/lang/community/enterCommunityLang.js
deleted file mode 100644
index 45c4054..0000000
--- a/src/src/locale/lang/community/enterCommunityLang.js
+++ /dev/null
@@ -1,68 +0,0 @@
-export default {
-  en: {
-    enterCommunity: {
-      myCommunity: 'My Community',
-      commercialProcess: 'Commercial Process',
-      province: 'Province',
-      city: 'City',
-      district: 'District',
-      communityName: 'Community Name',
-      communityCode: 'Community Code',
-      servicePhone: 'Service Phone',
-      area: 'Area',
-      startTime: 'Start Time',
-      endTime: 'End Time',
-      status: 'Status',
-      operation: 'Operation',
-      modify: 'Modify',
-      back: 'Back',
-      communityAddress: 'Community Address',
-      communityLandmark: 'Community Landmark',
-      cityCode: 'City Code',
-      xCoordinate: 'X Coordinate',
-      yCoordinate: 'Y Coordinate',
-      serviceQR: 'Service QR Code',
-      communityArea: 'Community Area',
-      save: 'Save',
-      cancel: 'Cancel',
-      statusOptions: {
-        '1000': 'Under Review',
-        '1100': 'Approved',
-        '1200': 'Rejected'
-      }
-    }
-  },
-  zh: {
-    enterCommunity: {
-      myCommunity: '我的小区',
-      commercialProcess: '商用流程',
-      province: '省份',
-      city: '市/州',
-      district: '区/县',
-      communityName: '小区名称',
-      communityCode: '小区编码',
-      servicePhone: '客服电话',
-      area: '面积',
-      startTime: '开始时间',
-      endTime: '结束时间',
-      status: '状态',
-      operation: '操作',
-      modify: '修改',
-      back: '返回',
-      communityAddress: '小区地址',
-      communityLandmark: '小区地标',
-      cityCode: '城市编码',
-      xCoordinate: 'X坐标',
-      yCoordinate: 'Y坐标',
-      serviceQR: '客服二维码',
-      communityArea: '小区面积',
-      save: '保存',
-      cancel: '取消',
-      statusOptions: {
-        '1000': '入驻审核',
-        '1100': '入驻成功',
-        '1200': '入驻失败'
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/views/room/addFloorLang.js b/src/views/room/addFloorLang.js
new file mode 100644
index 0000000..abee29a
--- /dev/null
+++ b/src/views/room/addFloorLang.js
@@ -0,0 +1,60 @@
+export default {
+  en: {
+    room: {
+      addFloor: {
+        title: 'Add Building',
+        floorNum: 'Building Number',
+        name: 'Building Name',
+        floorArea: 'Floor Area',
+        seq: 'Sequence',
+        remark: 'Remark',
+        buildingSuffix: ' Building',
+        floorNumPlaceholder: 'Required, please enter number',
+        namePlaceholder: 'Required, please enter name',
+        floorAreaPlaceholder: 'Required, please enter floor area',
+        remarkPlaceholder: 'Optional, please enter remark',
+        floorNumRequired: 'Building number is required',
+        floorNumLength: 'Building number must be 1-64 characters',
+        nameRequired: 'Building name is required',
+        nameLength: 'Building name must be 2-64 characters',
+        floorAreaRequired: 'Floor area is required',
+        floorAreaFormat: 'Invalid floor area format, e.g. 300.00',
+        seqRequired: 'Sequence is required',
+        seqNumber: 'Sequence must be a number',
+        remarkMaxLength: 'Remark cannot exceed 200 characters',
+        saveSuccess: 'Add successful',
+        saveFailed: 'Add failed',
+        saveError: 'Error adding building'
+      }
+    }
+  },
+  zh: {
+    room: {
+      addFloor: {
+        title: '添加楼栋',
+        floorNum: '楼栋编号',
+        name: '楼栋名称',
+        floorArea: '建筑面积',
+        seq: '排序',
+        remark: '备注',
+        buildingSuffix: '号楼',
+        floorNumPlaceholder: '必填，请填写编号',
+        namePlaceholder: '必填，请填写名称',
+        floorAreaPlaceholder: '必填，请填写建筑面积',
+        remarkPlaceholder: '可填，请填写备注',
+        floorNumRequired: '楼栋编号不能为空',
+        floorNumLength: '楼栋编号长度必须在1位至64位',
+        nameRequired: '楼栋名称不能为空',
+        nameLength: '楼栋名称长度必须在2位至64位',
+        floorAreaRequired: '建筑面积不能为空',
+        floorAreaFormat: '建筑面积错误，如300.00',
+        seqRequired: '排序不能为空',
+        seqNumber: '排序必须是数字',
+        remarkMaxLength: '备注长度不能超过200位',
+        saveSuccess: '添加成功',
+        saveFailed: '添加失败',
+        saveError: '添加楼栋出错'
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/addUnitLang.js b/src/views/room/addUnitLang.js
new file mode 100644
index 0000000..ae7de59
--- /dev/null
+++ b/src/views/room/addUnitLang.js
@@ -0,0 +1,46 @@
+export const messages = {
+  en: {
+    addUnit: {
+      title: 'Add Unit',
+      unitNum: 'Unit Number',
+      unitNumPlaceholder: 'Required, please enter unit number',
+      layerCount: 'Total Floors',
+      layerCountPlaceholder: 'Required, please enter total floors',
+      unitArea: 'Building Area',
+      unitAreaPlaceholder: 'Required, please enter building area',
+      lift: 'Elevator',
+      liftPlaceholder: 'Required, please select elevator availability',
+      liftOption1: 'Yes',
+      liftOption2: 'No',
+      remark: 'Remark',
+      remarkPlaceholder: 'Please enter remarks',
+      save: 'Save',
+      cancel: 'Cancel',
+      zeroUnitWarning: 'Unit 0 is specific to shops and cannot be added',
+      successMessage: 'Unit added successfully',
+      errorMessage: 'Failed to add unit'
+    }
+  },
+  zh: {
+    addUnit: {
+      title: '添加单元',
+      unitNum: '单元编号',
+      unitNumPlaceholder: '必填，请填写单元编号',
+      layerCount: '总层数',
+      layerCountPlaceholder: '必填，请填写单元总层数',
+      unitArea: '建筑面积',
+      unitAreaPlaceholder: '必填，请填写建筑面积',
+      lift: '电梯',
+      liftPlaceholder: '必填，请选择是否有电梯',
+      liftOption1: '有',
+      liftOption2: '无',
+      remark: '备注',
+      remarkPlaceholder: '请填写备注信息',
+      save: '保存',
+      cancel: '取消',
+      zeroUnitWarning: '0单元为商铺特有，不允许添加',
+      successMessage: '单元添加成功',
+      errorMessage: '添加单元失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/deleteFloorLang.js b/src/views/room/deleteFloorLang.js
new file mode 100644
index 0000000..8be11d6
--- /dev/null
+++ b/src/views/room/deleteFloorLang.js
@@ -0,0 +1,28 @@
+export default {
+  en: {
+    room: {
+      deleteFloor: {
+        title: 'Confirm Operation',
+        confirmMessage: 'Are you sure you want to delete?',
+        cancelText: 'Cancel',
+        confirmDelete: 'Confirm Delete',
+        deleteSuccess: 'Delete successful',
+        deleteFailed: 'Delete failed',
+        deleteError: 'Error deleting building'
+      }
+    }
+  },
+  zh: {
+    room: {
+      deleteFloor: {
+        title: '请确认您的操作',
+        confirmMessage: '确认是否删除？',
+        cancelText: '点错了',
+        confirmDelete: '确认删除',
+        deleteSuccess: '删除成功',
+        deleteFailed: '删除失败',
+        deleteError: '删除楼栋出错'
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/deleteRoomLang.js b/src/views/room/deleteRoomLang.js
new file mode 100644
index 0000000..19f251f
--- /dev/null
+++ b/src/views/room/deleteRoomLang.js
@@ -0,0 +1,18 @@
+export const messages = {
+  en: {
+    room: {
+      deleteRoom: {
+        title: 'Confirm Operation',
+        confirmMessage: 'Confirm deletion! Deleting a room will delete associated fees and payment records, and automatically unbind owners!'
+      }
+    }
+  },
+  zh: {
+    room: {
+      deleteRoom: {
+        title: '请确认您的操作',
+        confirmMessage: '确认是否删除! 删除房屋会关联删除房屋下的费用以及缴费记录，并且自动解绑业主！'
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/deleteUnitLang.js b/src/views/room/deleteUnitLang.js
new file mode 100644
index 0000000..640fe12
--- /dev/null
+++ b/src/views/room/deleteUnitLang.js
@@ -0,0 +1,22 @@
+export const messages = {
+  en: {
+    deleteUnit: {
+      title: 'Confirm Operation',
+      confirmMessage: 'Are you sure you want to delete this unit?',
+      cancel: 'Cancel',
+      confirm: 'Confirm Delete',
+      successMessage: 'Unit deleted successfully',
+      errorMessage: 'Failed to delete unit'
+    }
+  },
+  zh: {
+    deleteUnit: {
+      title: '请确认您的操作',
+      confirmMessage: '确定删除小区单元?',
+      cancel: '点错了',
+      confirm: '确认删除',
+      successMessage: '单元删除成功',
+      errorMessage: '删除单元失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/editFloorLang.js b/src/views/room/editFloorLang.js
new file mode 100644
index 0000000..daa41a6
--- /dev/null
+++ b/src/views/room/editFloorLang.js
@@ -0,0 +1,58 @@
+export default {
+  en: {
+    room: {
+      editFloor: {
+        title: 'Edit Building',
+        floorNum: 'Building Number',
+        floorName: 'Building Name',
+        floorArea: 'Floor Area',
+        seq: 'Sequence',
+        remark: 'Remark',
+        floorNumPlaceholder: 'Required, please enter number',
+        floorNamePlaceholder: 'Required, please enter name',
+        floorAreaPlaceholder: 'Required, please enter floor area',
+        remarkPlaceholder: 'Optional, please enter remark',
+        floorNumRequired: 'Building number is required',
+        floorNumLength: 'Building number must be 1-64 characters',
+        floorNameRequired: 'Building name is required',
+        floorNameLength: 'Building name must be 2-64 characters',
+        floorAreaRequired: 'Floor area is required',
+        floorAreaFormat: 'Invalid floor area format, e.g. 300.00',
+        seqRequired: 'Sequence is required',
+        seqNumber: 'Sequence must be a number',
+        remarkMaxLength: 'Remark cannot exceed 200 characters',
+        updateSuccess: 'Update successful',
+        updateFailed: 'Update failed',
+        updateError: 'Error updating building'
+      }
+    }
+  },
+  zh: {
+    room: {
+      editFloor: {
+        title: '修改楼栋',
+        floorNum: '楼栋编号',
+        floorName: '楼栋名称',
+        floorArea: '建筑面积',
+        seq: '排序',
+        remark: '备注',
+        floorNumPlaceholder: '必填，请填写编号',
+        floorNamePlaceholder: '必填，请填写名称',
+        floorAreaPlaceholder: '必填，请填写建筑面积',
+        remarkPlaceholder: '可填，请填写备注',
+        floorNumRequired: '楼栋编号不能为空',
+        floorNumLength: '楼栋编号长度必须在1位至64位',
+        floorNameRequired: '楼栋名称不能为空',
+        floorNameLength: '楼栋名称长度必须在2位至64位',
+        floorAreaRequired: '建筑面积不能为空',
+        floorAreaFormat: '建筑面积错误，如300.00',
+        seqRequired: '排序不能为空',
+        seqNumber: '排序必须是数字',
+        remarkMaxLength: '备注长度不能超过200位',
+        updateSuccess: '修改成功',
+        updateFailed: '修改失败',
+        updateError: '修改楼栋出错'
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/editRoomLang.js b/src/views/room/editRoomLang.js
new file mode 100644
index 0000000..e2e75dc
--- /dev/null
+++ b/src/views/room/editRoomLang.js
@@ -0,0 +1,124 @@
+export const messages = {
+  en: {
+    room: {
+      editRoom: {
+        title: 'Edit Room',
+        roomNum: 'Room Number',
+        layer: 'Floor',
+        unit: 'Unit',
+        roomType: 'Room Type',
+        apartment1: 'Bedrooms',
+        apartment2: 'Living Rooms',
+        builtUpArea: 'Built-up Area (m²)',
+        roomArea: 'Indoor Area (m²)',
+        feeCoefficient: 'Fee Coefficient',
+        roomRent: 'Rent',
+        roomState: 'Room State',
+        endTime: 'End Time',
+        remark: 'Remark',
+        placeholder: {
+          roomNum: 'Required, please enter room number',
+          layer: 'Required, please enter floor',
+          unit: 'Required, please select unit',
+          roomType: 'Required, please select room type',
+          apartment: 'Required, please select apartment layout',
+          builtUpArea: 'Required, please enter built-up area! m²',
+          roomArea: 'Required, please enter indoor area! m²',
+          feeCoefficient: 'Please enter fee coefficient',
+          roomRent: 'Required, please enter rent',
+          roomState: 'Required, please select room state',
+          endTime: 'Required, please select end time',
+          remark: 'Please enter remark information'
+        },
+        apartment1Options: {
+          oneRoom: 'One Bedroom',
+          twoRooms: 'Two Bedrooms',
+          threeRooms: 'Three Bedrooms',
+          fourRooms: 'Four Bedrooms',
+          fiveRooms: 'Five Bedrooms',
+          sixRooms: 'Six Bedrooms',
+          sevenRooms: 'Seven Bedrooms',
+          eightRooms: 'Eight Bedrooms'
+        },
+        apartment2Options: {
+          oneHall: 'One Living Room',
+          twoHalls: 'Two Living Rooms',
+          threeHalls: 'Three Living Rooms',
+          fourHalls: 'Four Living Rooms',
+          fiveHalls: 'Five Living Rooms',
+          sixHalls: 'Six Living Rooms',
+          sevenHalls: 'Seven Living Rooms',
+          eightHalls: 'Eight Living Rooms'
+        },
+        roomStateOptions: {
+          occupied: 'Occupied',
+          delivered: 'Delivered',
+          decorated: 'Decorated',
+          vacant: 'Vacant',
+          decorating: 'Decorating'
+        }
+      }
+    }
+  },
+  zh: {
+    room: {
+      editRoom: {
+        title: '修改房屋',
+        roomNum: '房屋编号',
+        layer: '房屋楼层',
+        unit: '房屋单元',
+        roomType: '房屋类型',
+        apartment1: '户型室',
+        apartment2: '户型厅',
+        builtUpArea: '建筑面积(平方)',
+        roomArea: '室内面积(平方)',
+        feeCoefficient: '算费系数',
+        roomRent: '租金',
+        roomState: '房屋状态',
+        endTime: '结束时间',
+        remark: '备注',
+        placeholder: {
+          roomNum: '必填，请填写房屋编号',
+          layer: '必填，请填写房屋楼层',
+          unit: '必填，请选择单元',
+          roomType: '必填，请选择房屋类型',
+          apartment: '必填，请选择房屋户型',
+          builtUpArea: '必填，请填写房屋建筑面积! 平方',
+          roomArea: '必填，请填写室内面积! 平方',
+          feeCoefficient: '请填写算费系数',
+          roomRent: '必填，请填写租金',
+          roomState: '必填，请选择房屋状态',
+          endTime: '必填，请选择结束时间',
+          remark: '请填写备注信息'
+        },
+        apartment1Options: {
+          oneRoom: '一室',
+          twoRooms: '两室',
+          threeRooms: '三室',
+          fourRooms: '四室',
+          fiveRooms: '五室',
+          sixRooms: '六室',
+          sevenRooms: '七室',
+          eightRooms: '八室'
+        },
+        apartment2Options: {
+          oneHall: '一厅',
+          twoHalls: '两厅',
+          threeHalls: '三厅',
+          fourHalls: '四厅',
+          fiveHalls: '五厅',
+          sixHalls: '六厅',
+          sevenHalls: '七厅',
+          eightHalls: '八厅'
+        },
+        roomStateOptions: {
+          occupied: '已入住',
+          delivered: '已交房',
+          decorated: '已装修',
+          vacant: '未入住',
+          decorating: '装修中'
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/editUnitLang.js b/src/views/room/editUnitLang.js
new file mode 100644
index 0000000..bbf9b26
--- /dev/null
+++ b/src/views/room/editUnitLang.js
@@ -0,0 +1,46 @@
+export const messages = {
+  en: {
+    editUnit: {
+      title: 'Edit Unit',
+      unitNum: 'Unit Number',
+      unitNumPlaceholder: 'Required, please enter unit number',
+      layerCount: 'Total Floors',
+      layerCountPlaceholder: 'Required, please enter total floors',
+      unitArea: 'Building Area',
+      unitAreaPlaceholder: 'Required, please enter building area',
+      lift: 'Elevator',
+      liftPlaceholder: 'Required, please select elevator availability',
+      liftOption1: 'Yes',
+      liftOption2: 'No',
+      remark: 'Remark',
+      remarkPlaceholder: 'Please enter remarks',
+      save: 'Save',
+      cancel: 'Cancel',
+      zeroUnitWarning: 'Unit 0 is specific to shops and cannot be edited',
+      successMessage: 'Unit updated successfully',
+      errorMessage: 'Failed to update unit'
+    }
+  },
+  zh: {
+    editUnit: {
+      title: '修改单元',
+      unitNum: '单元编号',
+      unitNumPlaceholder: '必填，请填写单元编号',
+      layerCount: '总层数',
+      layerCountPlaceholder: '必填，请填写单元总层数',
+      unitArea: '建筑面积',
+      unitAreaPlaceholder: '必填，请填写建筑面积',
+      lift: '电梯',
+      liftPlaceholder: '必填，请选择是否有电梯',
+      liftOption1: '有',
+      liftOption2: '无',
+      remark: '备注',
+      remarkPlaceholder: '请填写备注信息',
+      save: '保存',
+      cancel: '取消',
+      zeroUnitWarning: '0单元为商铺特有，不允许修改',
+      successMessage: '单元修改成功',
+      errorMessage: '修改单元失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/floorUnitTreeLang.js b/src/views/room/floorUnitTreeLang.js
new file mode 100644
index 0000000..4f5004c
--- /dev/null
+++ b/src/views/room/floorUnitTreeLang.js
@@ -0,0 +1,20 @@
+export const messages = {
+  en: {
+    room: {
+      floorUnitTree: {
+        building: 'Building',
+        unit: 'Unit',
+        noData: 'No buildings currently'
+      }
+    }
+  },
+  zh: {
+    room: {
+      floorUnitTree: {
+        building: '栋',
+        unit: '单元',
+        noData: '当前没有楼栋'
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/importOwnerRoomLang.js b/src/views/room/importOwnerRoomLang.js
new file mode 100644
index 0000000..4d0b694
--- /dev/null
+++ b/src/views/room/importOwnerRoomLang.js
@@ -0,0 +1,42 @@
+export default {
+  en: {
+    room: {
+      importOwnerRoom: {
+        title: 'Property Import',
+        selectFile: 'Select File',
+        clickUpload: 'Click to upload',
+        requiredFile: 'Required, please select data file',
+        downloadTemplate: 'Download Template',
+        downloadFirst: 'Please download first',
+        propertyTemplate: 'Property Template',
+        prepareData: 'to prepare data, then upload for import',
+        fileRequired: 'File cannot be empty',
+        invalidFormat: 'Invalid Excel format',
+        fileSizeExceeded: 'Excel file size cannot exceed 2MB',
+        importSuccess: 'Import successful',
+        importFailed: 'Import failed',
+        importError: 'Import error occurred'
+      }
+    }
+  },
+  zh: {
+    room: {
+      importOwnerRoom: {
+        title: '房产导入',
+        selectFile: '选择文件',
+        clickUpload: '点击上传',
+        requiredFile: '必填，请选择数据文件',
+        downloadTemplate: '下载模板',
+        downloadFirst: '请先下载',
+        propertyTemplate: '房产模板',
+        prepareData: '准备数据后，上传导入',
+        fileRequired: '文件不能为空',
+        invalidFormat: '不是有效的Excel格式',
+        fileSizeExceeded: 'Excel文件大小不能超过2M',
+        importSuccess: '导入成功',
+        importFailed: '导入失败',
+        importError: '导入出错'
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/ownerCarsLang.js b/src/views/room/ownerCarsLang.js
new file mode 100644
index 0000000..9f9f090
--- /dev/null
+++ b/src/views/room/ownerCarsLang.js
@@ -0,0 +1,34 @@
+export const messages = {
+  en: {
+    ownerCars: {
+      title: 'Owner Cars',
+      licensePlate: 'License Plate',
+      licenseType: 'License Type',
+      temporary: 'Temporary Car',
+      carType: 'Car Type',
+      color: 'Color',
+      owner: 'Owner',
+      parkingSpace: 'Parking Space',
+      park: ' Park',
+      space: ' Space',
+      released: 'Space Released',
+      validity: 'Validity Period'
+    }
+  },
+  zh: {
+    ownerCars: {
+      title: '业主车辆',
+      licensePlate: '车牌号',
+      licenseType: '车牌类型',
+      temporary: '临时车',
+      carType: '车辆类型',
+      color: '颜色',
+      owner: '业主',
+      parkingSpace: '车位',
+      park: '车场',
+      space: '车位',
+      released: '车位已释放',
+      validity: '有效期'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/ownerComplaintsLang.js b/src/views/room/ownerComplaintsLang.js
new file mode 100644
index 0000000..8c47a19
--- /dev/null
+++ b/src/views/room/ownerComplaintsLang.js
@@ -0,0 +1,30 @@
+export const messages = {
+  en: {
+    ownerComplaints: {
+      title: 'Owner Complaints',
+      type: 'Type',
+      room: 'Room',
+      contact: 'Contact',
+      phone: 'Phone',
+      status: 'Status',
+      handler: 'Handler',
+      handlerPhone: 'Handler Phone',
+      createTime: 'Create Time',
+      none: 'None'
+    }
+  },
+  zh: {
+    ownerComplaints: {
+      title: '业主投诉',
+      type: '类型',
+      room: '房屋',
+      contact: '联系人',
+      phone: '联系电话',
+      status: '状态',
+      handler: '处理人',
+      handlerPhone: '处理人电话',
+      createTime: '创建时间',
+      none: '无'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/ownerMembersLang.js b/src/views/room/ownerMembersLang.js
new file mode 100644
index 0000000..bad563b
--- /dev/null
+++ b/src/views/room/ownerMembersLang.js
@@ -0,0 +1,30 @@
+export const messages = {
+  en: {
+    ownerMembers: {
+      title: 'Owner Members',
+      name: 'Name',
+      sex: 'Gender',
+      male: 'Male',
+      female: 'Female',
+      age: 'Age',
+      type: 'Type',
+      idCard: 'ID Card',
+      contact: 'Contact',
+      address: 'Address'
+    }
+  },
+  zh: {
+    ownerMembers: {
+      title: '业主成员',
+      name: '名称',
+      sex: '性别',
+      male: '男',
+      female: '女',
+      age: '年龄',
+      type: '类型',
+      idCard: '身份证',
+      contact: '联系方式',
+      address: '家庭住址'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/ownerOweFeesLang.js b/src/views/room/ownerOweFeesLang.js
new file mode 100644
index 0000000..1c3a9c6
--- /dev/null
+++ b/src/views/room/ownerOweFeesLang.js
@@ -0,0 +1,34 @@
+export const messages = {
+  en: {
+    ownerOweFees: {
+      title: 'Owner Arrears',
+      payerObj: 'Charge Object',
+      ownerName: 'Owner Name',
+      phone: 'Phone',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      total: 'Total',
+      unit: 'Unit: Yuan',
+      updateTime: 'Update Time'
+    },
+    ownerOweFeesDemo: {
+      openBtn: 'View Owner Arrears'
+    }
+  },
+  zh: {
+    ownerOweFees: {
+      title: '业主欠费',
+      payerObj: '收费对象',
+      ownerName: '业主名称',
+      phone: '手机号',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      total: '合计',
+      unit: '单位:元',
+      updateTime: '更新时间'
+    },
+    ownerOweFeesDemo: {
+      openBtn: '查看业主欠费'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/ownerRepairsLang.js b/src/views/room/ownerRepairsLang.js
new file mode 100644
index 0000000..ab789f5
--- /dev/null
+++ b/src/views/room/ownerRepairsLang.js
@@ -0,0 +1,28 @@
+export const messages = {
+  en: {
+    ownerRepairs: {
+      title: 'Owner Repairs',
+      workOrder: 'Work Order ID',
+      location: 'Location',
+      repairType: 'Repair Type',
+      reporter: 'Reporter',
+      contact: 'Contact',
+      appointmentTime: 'Appointment Time',
+      status: 'Status',
+      taskProcessed: '(Task Processed)'
+    }
+  },
+  zh: {
+    ownerRepairs: {
+      title: '业主报修',
+      workOrder: '工单编码',
+      location: '位置',
+      repairType: '报修类型',
+      reporter: '报修人',
+      contact: '联系方式',
+      appointmentTime: '预约时间',
+      status: '状态',
+      taskProcessed: '(定时任务处理)'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/ownerRoomsLang.js b/src/views/room/ownerRoomsLang.js
new file mode 100644
index 0000000..f48befd
--- /dev/null
+++ b/src/views/room/ownerRoomsLang.js
@@ -0,0 +1,34 @@
+export const messages = {
+  en: {
+    ownerRooms: {
+      title: 'Owner Rooms',
+      roomId: 'Room ID',
+      layer: 'Floor',
+      type: 'Type',
+      area: 'Built/Indoor Area',
+      rent: 'Rent',
+      status: 'Room Status',
+      oweFee: 'Owed Fee',
+      updateDaily: 'Updated daily',
+      subtotal: 'Subtotal of owed fees',
+      successMessage: 'Data loaded successfully',
+      errorMessage: 'Failed to load data'
+    }
+  },
+  zh: {
+    ownerRooms: {
+      title: '业主房屋',
+      roomId: '房屋ID',
+      layer: '楼层',
+      type: '类型',
+      area: '建筑/室内面积',
+      rent: '租金',
+      status: '房屋状态',
+      oweFee: '房屋欠费',
+      updateDaily: '按天更新',
+      subtotal: '欠费小计',
+      successMessage: '数据加载成功',
+      errorMessage: '加载数据失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/roomContractsLang.js b/src/views/room/roomContractsLang.js
new file mode 100644
index 0000000..da87c4b
--- /dev/null
+++ b/src/views/room/roomContractsLang.js
@@ -0,0 +1,40 @@
+export const messages = {
+  en: {
+    roomContracts: {
+      title: 'Room Contracts',
+      contractName: 'Contract Name',
+      contractCode: 'Contract Code',
+      parentContractCode: 'Parent Contract Code',
+      contractType: 'Contract Type',
+      operator: 'Operator',
+      amount: 'Contract Amount',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      createTime: 'Draft Time',
+      state: 'Status'
+    },
+    roomContractsDemo: {
+      openByOwner: 'Open by Owner',
+      openByRoom: 'Open by Room'
+    }
+  },
+  zh: {
+    roomContracts: {
+      title: '房屋合同',
+      contractName: '合同名称',
+      contractCode: '合同编号',
+      parentContractCode: '父合同编号',
+      contractType: '合同类型',
+      operator: '经办人',
+      amount: '合同金额',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      createTime: '起草时间',
+      state: '状态'
+    },
+    roomContractsDemo: {
+      openByOwner: '按业主打开',
+      openByRoom: '按房屋打开'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/roomLang.js b/src/views/room/roomLang.js
new file mode 100644
index 0000000..5f3db03
--- /dev/null
+++ b/src/views/room/roomLang.js
@@ -0,0 +1,96 @@
+export const messages = {
+  en: {
+    roomList: {
+      addBuilding: 'Add Building',
+      editBuilding: 'Edit Building',
+      deleteBuilding: 'Delete Building',
+      addUnit: 'Add Unit',
+      editUnit: 'Edit Unit',
+      deleteUnit: 'Delete Unit',
+      addRoom: 'Add Room',
+      importRoom: 'Import Property',
+      document: 'Document',
+      queryCondition: 'Query Condition',
+      roomIdPlaceholder: 'Please fill in room number format: Building-Unit-Room',
+      selectState: 'Select Status',
+      selectRoomType: 'Required, select room type',
+      query: 'Query',
+      reset: 'Reset',
+      room: 'Room',
+      floor: 'Floor',
+      owner: 'Owner',
+      type: 'Type',
+      area: 'Building/Indoor Area',
+      rent: 'Rent',
+      roomStatus: 'Room Status',
+      validity: 'Validity Period',
+      ownerMembers: 'Owner Members',
+      ownerCars: 'Owner Vehicles',
+      ownerRooms: 'Owner Rooms',
+      complaints: 'Complaints',
+      repairs: 'Repairs',
+      roomOweFee: 'Room Arrears',
+      ownerOweFee: 'Owner Arrears',
+      roomContracts: 'Room Contracts',
+      operation: 'Operation',
+      edit: 'Edit',
+      delete: 'Delete',
+      handOver: 'Hand Over',
+      checkOut: 'Check Out',
+      businessAcceptance: 'Business Acceptance',
+      layer: 'Layer',
+      squareMeter: 'm²',
+      roomStatusDesc1: 'Room status is divided into: unsold, unoccupied, handed over, decorated, occupied, etc.',
+      roomStatusDesc2: '1. Unsold means there is no relationship between the room and the owner, so the status cannot be manually modified. It needs to be changed to occupied by the owner moving in.',
+      roomStatusDesc3: '2. Unoccupied, handed over, decorated, and occupied status indicate that there is a relationship between the owner and the room. They can be modified mutually, mainly used to create different fees based on different status when creating room fees.',
+      rentDesc: 'Rent: Mainly used for park-type properties or properties with many rented rooms, residential properties can ignore this.'
+    }
+  },
+  zh: {
+    roomList: {
+      addBuilding: '添加楼栋',
+      editBuilding: '修改楼栋',
+      deleteBuilding: '删除楼栋',
+      addUnit: '添加单元',
+      editUnit: '修改单元',
+      deleteUnit: '删除单元',
+      addRoom: '添加房屋',
+      importRoom: '房产导入',
+      document: '文档',
+      queryCondition: '查询条件',
+      roomIdPlaceholder: '请填写房屋编号 格式 楼栋-单元-房屋',
+      selectState: '请选择状态',
+      selectRoomType: '必填，请选择房屋类型',
+      query: '查询',
+      reset: '重置',
+      room: '房屋',
+      floor: '楼层',
+      owner: '业主',
+      type: '类型',
+      area: '建筑/室内面积',
+      rent: '租金',
+      roomStatus: '房屋状态',
+      validity: '有效期',
+      ownerMembers: '业主成员',
+      ownerCars: '业主车辆',
+      ownerRooms: '业主房屋',
+      complaints: '投诉',
+      repairs: '报修',
+      roomOweFee: '房屋欠费',
+      ownerOweFee: '业主欠费',
+      roomContracts: '房屋合同',
+      operation: '操作',
+      edit: '修改',
+      delete: '删除',
+      handOver: '交房',
+      checkOut: '退房',
+      businessAcceptance: '业务受理',
+      layer: '层',
+      squareMeter: '平方米',
+      roomStatusDesc1: '房屋状态 分为：未销售，未入住，已交房，已装修，已入住 等状态',
+      roomStatusDesc2: '1、未销售表示 房屋和业主之间还没有任何关系，所以修改时状态不能手工修改 需要业主入住房屋的方式 将未销售改为已入住',
+      roomStatusDesc3: '2、未入住 已交房 已装修 已入住 状态表示业主和房屋之间已经有关系 可以相互修改，主要作用为在房屋创建费用时根据不同的状态去创建不同的费用',
+      rentDesc: '租金：主要用于园区类或者房屋出租比较多的物业使用，小区物业忽略'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/roomList.vue b/src/views/room/roomList.vue
new file mode 100644
index 0000000..04cd9a6
--- /dev/null
+++ b/src/views/room/roomList.vue
@@ -0,0 +1,761 @@
+<template>
+  <div class="room-container">
+    <div class="bg-white padding-sm text-left">
+      <el-button type="primary" size="small" @click="openAddRoomFloorModal">
+        <i class="el-icon-plus"></i>{{ $t('roomList.addBuilding') }}
+      </el-button>
+      <el-button type="primary" size="small" @click="openUpdateRoomFloorModal">
+        <i class="el-icon-edit"></i>{{ $t('roomList.editBuilding') }}
+      </el-button>
+      <el-button type="primary" size="small" @click="openDeleteRoomFloorModal">
+        <i class="el-icon-close"></i>{{ $t('roomList.deleteBuilding') }}
+      </el-button>
+      <el-button type="primary" size="small" class="margin-left-sm" @click="openAddRoomUnitModal">
+        <i class="el-icon-plus"></i>{{ $t('roomList.addUnit') }}
+      </el-button>
+      <el-button type="primary" size="small" class="margin-left-sm" @click="openUpdateRoomUnitModal">
+        <i class="el-icon-edit"></i>{{ $t('roomList.editUnit') }}
+      </el-button>
+      <el-button type="primary" size="small" class="margin-left-sm" @click="openDeleteRoomUnitModal">
+        <i class="el-icon-close"></i>{{ $t('roomList.deleteUnit') }}
+      </el-button>
+      <el-button type="primary" size="small" class="margin-left-sm" @click="openAddRoom"
+        v-if="hasPrivilege('502020082453087940')">
+        <i class="el-icon-plus"></i>
+        <span>{{ $t('roomList.addRoom') }}</span>
+      </el-button>
+      <el-button type="primary" size="small" class="margin-left-sm" @click="openImportRoomInfo">
+        <i class="el-icon-plus"></i>
+        <span>{{ $t('roomList.importRoom') }}</span>
+      </el-button>
+      <el-button type="primary" size="small" @click="showMarkdown">
+        <i class="el-icon-document"></i>
+        <span>{{ $t('roomList.document') }}</span>
+      </el-button>
+    </div>
+
+    <el-row class="flex justify-start">
+      <el-col :span="4" class="room-floor-unit-tree">
+        <floor-unit-tree :call-back-listener="callbackListener" @switchFloor="handleSwitchFloor"
+          @switchUnit="handleSwitchUnit" />
+      </el-col>
+      <el-col :span="20" class="margin-top-xs margin-left-sm">
+        <el-card class="ibox">
+          <div slot="header" class="clearfix flex justify-between">
+            <span>{{ $t('roomList.queryCondition') }}</span>
+          </div>
+          <el-form :inline="true" class="text-left">
+            <el-form-item>
+              <el-input :placeholder="$t('roomList.roomIdPlaceholder')" size="small" v-model="roomInfo.conditions.roomId"
+                class="form-control form-control-sm"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-select v-model="roomInfo.conditions.state" size="small" :placeholder="$t('roomList.selectState')">
+                <el-option v-for="(item, index) in roomInfo.states" :key="index" :label="item.name"
+                  :value="item.statusCd"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-select v-model="roomInfo.conditions.roomSubType" size="small"
+                :placeholder="$t('roomList.selectRoomType')">
+                <el-option v-for="(item, index) in roomInfo.roomSubTypes" :key="index" :label="item.name"
+                  :value="item.statusCd"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-select v-model="roomInfo.isAll" size="small" @change="changeIsAll">
+                <el-option label="当前楼栋单元" value="N"></el-option>
+                <el-option label="全部楼栋单元" value="Y"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" size="small" @click="queryRoomMethod">
+                <i class="el-icon-search"></i>{{ $t('roomList.query') }}
+              </el-button>
+              <el-button type="info" size="small" @click="resetRoomInfo">
+                <i class="el-icon-refresh"></i>{{ $t('roomList.reset') }}
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+
+        <el-card class="">
+          <div class=" border-radius">
+            <div>
+              <el-table :data="roomInfo.rooms" style="width: 100%" border stripe>
+                <el-table-column prop="roomId" :label="$t('roomList.room')" width="120" fixed="left"
+                  class-name="text-center hc-table-fix-left-td">
+                  <template slot-scope="scope">
+                    <div class="hc-td">
+                      {{ scope.row.floorNum }}-{{ scope.row.unitNum }}-{{ scope.row.roomNum }}
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="layer" :label="$t('roomList.floor')" width="100" align="center">
+                  <template slot-scope="scope">
+                    <div class="hc-td">
+                      {{ scope.row.layer }}{{ $t('roomList.layer') }}
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="ownerName" :label="$t('roomList.owner')" width="150" align="center">
+                  <template slot-scope="scope">
+                    <div v-if="scope.row.ownerName" class="hc-td hand">
+                      <a target="_blank" :href="'/#/pages/owner/ownerDetail?ownerId=' + scope.row.ownerId">
+                        {{ scope.row.ownerName }}({{ scope.row.link }})
+                      </a>
+                    </div>
+                    <div v-else class="hc-td textAuto">-</div>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="roomSubTypeName" :label="$t('roomList.type')" width="120" align="center">
+                  <template slot-scope="scope">
+                    <div class="hc-td">{{ scope.row.roomSubTypeName }}</div>
+                  </template>
+                </el-table-column>
+                <el-table-column :label="$t('roomList.area')" width="150" align="center">
+                  <template slot-scope="scope">
+                    <div class="hc-td">
+                      {{ scope.row.builtUpArea }}/{{ scope.row.roomArea }}
+                      {{ $t('roomList.squareMeter') }}
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="roomRent" :label="$t('roomList.rent')" width="100" align="center">
+                  <template slot-scope="scope">
+                    <div class="hc-td">{{ scope.row.roomRent }}</div>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="stateName" :label="$t('roomList.roomStatus')" width="120" align="center">
+                  <template slot-scope="scope">
+                    <div class="hc-td">{{ scope.row.stateName }}</div>
+                  </template>
+                </el-table-column>
+                <el-table-column :label="$t('roomList.validity')" width="150" align="center">
+                  <template slot-scope="scope">
+                    <div class="hc-td">
+                      {{ scope.row.startTime }}<br>
+                      ~{{ scope.row.endTime }}
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column :label="$t('roomList.ownerMembers')" width="120" align="center">
+                  <template slot-scope="scope">
+                    <div class="hc-td">
+                      <a href="javascript:void(0)" @click="viewOwnerMembers(scope.row)">
+                        {{ scope.row.memberCount || 0 }}
+                      </a>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column :label="$t('roomList.ownerCars')" width="120" align="center">
+                  <template slot-scope="scope">
+                    <div class="hc-td">
+                      <a href="javascript:void(0)" @click="viewOwnerCars(scope.row)">
+                        {{ scope.row.carCount || 0 }}
+                      </a>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column :label="$t('roomList.ownerRooms')" width="120" align="center">
+                  <template slot-scope="scope">
+                    <div class="hc-td">
+                      <a href="javascript:void(0)" @click="viewOwnerRooms(scope.row)">
+                        {{ scope.row.roomCount || 0 }}
+                      </a>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column :label="$t('roomList.complaints')" width="100" align="center">
+                  <template slot-scope="scope">
+                    <div class="hc-td">
+                      <a href="javascript:void(0)" @click="viewComplaints(scope.row)">
+                        {{ scope.row.complaintCount || 0 }}
+                      </a>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column :label="$t('roomList.repairs')" width="100" align="center">
+                  <template slot-scope="scope">
+                    <div class="hc-td">
+                      <a href="javascript:void(0)" @click="viewRepairs(scope.row)">
+                        {{ scope.row.repairCount || 0 }}
+                      </a>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column :label="$t('roomList.roomOweFee')" width="120" align="center">
+                  <template slot-scope="scope">
+                    <div class="hc-td">
+                      <a href="javascript:void(0)" @click="viewRoomOweFees(scope.row)">
+                        {{ scope.row.roomOweFee || '0.00' }}
+                      </a>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column :label="$t('roomList.ownerOweFee')" width="120" align="center">
+                  <template slot-scope="scope">
+                    <div class="hc-td">
+                      <a href="javascript:void(0)" @click="viewOweFees(scope.row)">
+                        {{ scope.row.oweFee || '0.00' }}
+                      </a>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column :label="$t('roomList.roomContracts')" width="120" align="center">
+                  <template slot-scope="scope">
+                    <div class="hc-td">
+                      <a href="javascript:void(0)" @click="viewRoomContracts(scope.row)">
+                        {{ scope.row.contractCount || 0 }}
+                      </a>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column v-for="(item, index) in roomInfo.listColumns" :key="index" :label="item" width="120"
+                  align="center">
+                  <template slot-scope="scope">
+                    <div class="hc-td">{{ scope.row.listValues[index] || '' }}</div>
+                  </template>
+                </el-table-column>
+                <el-table-column :label="$t('roomList.operation')" fixed="right" width="300" align="center"
+                  class-name="text-center hc-table-fix-right-td">
+                  <template slot-scope="scope">
+                    <el-button-group>
+                      <el-button v-if="hasPrivilege('502020082493857941')" size="mini"
+                        @click="openEditRoomModel(scope.row)">
+                        {{ $t('roomList.edit') }}
+                      </el-button>
+                      <el-button v-if="hasPrivilege('502020082417457942')" size="mini"
+                        @click="openDelRoomModel(scope.row)">
+                        {{ $t('roomList.delete') }}
+                      </el-button>
+                      <el-button v-if="scope.row.state == '2002' && hasPrivilege('502023021978930012')" size="mini"
+                        @click="toRoomBindOwner(scope.row)">
+                        {{ $t('roomList.handOver') }}
+                      </el-button>
+                      <el-button
+                        v-if="scope.row.state != '2002' && scope.row.ownerId && hasPrivilege('502023021973760015')"
+                        size="mini" @click="toRoomUnBindOwner(scope.row)">
+                        {{ $t('roomList.checkOut') }}
+                      </el-button>
+                      <el-button v-if="scope.row.state != '2002'" size="mini" @click="toSimplifyAcceptance(scope.row)">
+                        {{ $t('roomList.businessAcceptance') }}
+                      </el-button>
+                    </el-button-group>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+
+            <el-row class="margin-top">
+              <el-col :span="14" class="text-left">
+                <div>{{ $t('roomList.roomStatusDesc1') }}</div>
+                <div>{{ $t('roomList.roomStatusDesc2') }}</div>
+                <div>{{ $t('roomList.roomStatusDesc3') }}</div>
+                <div>{{ $t('roomList.rentDesc') }}</div>
+              </el-col>
+              <el-col :span="10" class="float-right">
+                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                  :current-page="roomInfo.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="DEFAULT_ROW"
+                  layout="total, sizes, prev, pager, next, jumper" :total="roomInfo.total"></el-pagination>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 子组件 -->
+    <search-floor ref="searchFloor" emit-choose-floor="room" emit-load-data="room" />
+    <edit-room ref="editRoom" />
+    <delete-room ref="deleteRoom" />
+    <import-owner-room ref="importOwnerRoom" />
+    <add-floor ref="addFloor" />
+    <edit-floor ref="editFloor" />
+    <delete-floor ref="deleteFloor" />
+    <add-unit ref="addUnit" />
+    <edit-unit ref="editUnit" />
+    <delete-unit ref="deleteUnit" />
+    <owner-rooms ref="ownerRooms" />
+    <owner-members ref="ownerMembers" />
+    <owner-cars ref="ownerCars" />
+    <owner-complaints ref="ownerComplaints" />
+    <owner-repairs ref="ownerRepairs" />
+    <owner-owe-fees ref="ownerOweFees" />
+    <room-owe-fees ref="roomOweFees" />
+    <room-contracts ref="roomContracts" />
+  </div>
+</template>
+
+<script>
+import { getDict } from '@/api/community/communityApi'
+import { queryRooms,getFloors,getUnits } from '@/api/room/roomApi'
+import FloorUnitTree from '@/components/room/floorUnitTree'
+import SearchFloor from '@/components/room/searchFloor'
+import EditRoom from '@/components/room/editRoom'
+import DeleteRoom from '@/components/room/deleteRoom'
+import ImportOwnerRoom from '@/components/room/importOwnerRoom'
+import AddFloor from '@/components/room/addFloor'
+import EditFloor from '@/components/room/editFloor'
+import DeleteFloor from '@/components/room/deleteFloor'
+import AddUnit from '@/components/room/addUnit'
+import EditUnit from '@/components/room/editUnit'
+import DeleteUnit from '@/components/room/deleteUnit'
+import OwnerRooms from '@/components/owner/ownerRooms'
+import OwnerMembers from '@/components/owner/ownerMembers'
+import OwnerCars from '@/components/owner/ownerCars'
+import OwnerComplaints from '@/components/owner/ownerComplaints'
+import OwnerRepairs from '@/components/owner/ownerRepairs'
+import OwnerOweFees from '@/components/owner/ownerOweFees'
+import RoomOweFees from '@/components/room/roomOweFees'
+import RoomContracts from '@/components/room/roomContracts'
+
+const DEFAULT_PAGE = 1
+const DEFAULT_ROW = 10
+
+export default {
+  name: 'RoomList',
+  components: {
+    FloorUnitTree,
+    SearchFloor,
+    EditRoom,
+    DeleteRoom,
+    ImportOwnerRoom,
+    AddFloor,
+    EditFloor,
+    DeleteFloor,
+    AddUnit,
+    EditUnit,
+    DeleteUnit,
+    OwnerRooms,
+    OwnerMembers,
+    OwnerCars,
+    OwnerComplaints,
+    OwnerRepairs,
+    OwnerOweFees,
+    RoomOweFees,
+    RoomContracts
+  },
+  data() {
+    return {
+      DEFAULT_PAGE,
+      DEFAULT_ROW,
+      callbackListener: 'room',
+      roomInfo: {
+        rooms: [],
+        total: 0,
+        records: 1,
+        floorId: '',
+        unitId: '',
+        states: [],
+        roomNum: '',
+        isAll: 'N',
+        moreCondition: false,
+        conditions: {
+          floorId: '',
+          floorName: '',
+          unitId: '',
+          roomNum: '',
+          roomId: '',
+          state: '',
+          section: '',
+          roomType: '1010301',
+          roomSubType: '',
+          flag: ''
+        },
+        currentPage: DEFAULT_PAGE,
+        listColumns: [],
+        roomSubTypes: []
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+   // window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+   // window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    async initData() {
+      this.roomInfo.conditions.floorId = this.$route.query.floorId || ''
+      this.roomInfo.conditions.floorName = this.$route.query.floorName || ''
+
+      try {
+        // 获取房屋状态字典
+        const stateData = await getDict('building_room', 'state')
+        this.roomInfo.states = stateData
+
+        // 获取房屋类型字典
+        const roomTypeData = await getDict('building_room', 'room_sub_type')
+        this.roomInfo.roomSubTypes = roomTypeData
+
+        this.listRoom(DEFAULT_PAGE, DEFAULT_ROW)
+      } catch (error) {
+        console.error('初始化数据失败:', error)
+      }
+    },
+
+    async listRoom(page, row) {
+      this.roomInfo.conditions.page = page
+      this.roomInfo.conditions.row = row
+      this.roomInfo.conditions.communityId = this.getCommunityId()
+
+      const params = { ...this.roomInfo.conditions }
+
+      // 处理房间号格式
+      const allNum = params.roomId || ''
+      const allNums = allNum.split('-')
+      if (allNums.length >= 3) {
+        params.floorNum = allNums[0].trim()
+        params.unitNum = allNums[1].trim()
+        params.roomNum = allNums.slice(2).join('-').trim()
+        params.roomId = ''
+        params.unitId = ''
+        params.floorId = ''
+      }
+
+      try {
+        const res = await queryRooms(params)
+        this.roomInfo.total = res.total
+        this.roomInfo.records = res.records
+        this.roomInfo.rooms = res.rooms
+        this.dealRoomAttr(res.rooms)
+      } catch (error) {
+        console.error('获取房间列表失败:', error)
+        this.$message.error('获取房间列表失败')
+      }
+    },
+
+    dealRoomAttr(rooms) {
+      if (!rooms || !rooms.length) return
+
+      // 获取表格列配置
+      this.getColumns(rooms, () => {
+        rooms.forEach(item => {
+          this.getColumnsValue(item)
+        })
+      })
+    },
+
+    getColumnsValue(room) {
+      room.listValues = []
+      if (!room.roomAttrDto || !room.roomAttrDto.length) {
+        this.roomInfo.listColumns.forEach(() => {
+          room.listValues.push('')
+        })
+        return
+      }
+
+      this.roomInfo.listColumns.forEach(column => {
+        const attr = room.roomAttrDto.find(dto => dto.specName === column)
+        room.listValues.push(attr ? attr.valueName : '')
+      })
+    },
+
+    async getColumns(rooms, callback) {
+      try {
+        const attrSpecs = await getDict('building_room_attr')
+        this.roomInfo.listColumns = attrSpecs
+          .filter(item => item.listShow === 'Y')
+          .map(item => item.specName)
+        callback()
+      } catch (error) {
+        console.error('获取房屋属性失败:', error)
+      }
+    },
+
+    handleSwitchFloor(data) {
+      this.roomInfo.conditions.floorId = data.floorId
+      this.roomInfo.conditions.unitId = ''
+      this.roomInfo.conditions.flag = 1
+      this.roomInfo.isAll = 'N'
+      this.listRoom(DEFAULT_PAGE, DEFAULT_ROW)
+    },
+
+    handleSwitchUnit(data) {
+      this.roomInfo.conditions.floorId = ''
+      this.roomInfo.conditions.unitId = data.unitId
+      this.roomInfo.conditions.flag = 1
+      this.roomInfo.isAll = 'N'
+      this.listRoom(DEFAULT_PAGE, DEFAULT_ROW)
+    },
+
+    handleSizeChange(val) {
+      this.listRoom(this.roomInfo.currentPage, val)
+    },
+
+    handleCurrentChange(val) {
+      this.roomInfo.currentPage = val
+      this.listRoom(val, DEFAULT_ROW)
+    },
+
+    computeTableDivWidth() {
+      // const bodyWidth = document.body.clientWidth
+      // const menuWidth = document.getElementById('menu-nav').offsetWidth || 0
+      // const treeWidth = document.querySelector('.room-floor-unit-tree').offsetWidth || 0
+     // return `${bodyWidth - menuWidth - treeWidth - 80}px`
+     return '100%'
+    },
+
+    handleResize() {
+      this.$forceUpdate()
+    },
+
+    // 按钮操作相关方法
+    openAddRoom() {
+      this.$router.push('/pages/property/addRoomView')
+    },
+
+    openEditRoomModel(room) {
+      this.$refs.editRoom.open(room)
+    },
+
+    openDelRoomModel(room) {
+      this.$refs.deleteRoom.open(room)
+    },
+
+    queryRoomMethod() {
+      this.roomInfo.conditions.flag = 0
+      this.listRoom(DEFAULT_PAGE, DEFAULT_ROW)
+    },
+
+    resetRoomInfo() {
+      this.roomInfo.conditions = {
+        floorId: '',
+        floorName: '',
+        unitId: '',
+        roomNum: '',
+        roomId: '',
+        state: '',
+        section: '',
+        roomType: '1010301',
+        roomSubType: '',
+        flag: ''
+      }
+      this.listRoom(DEFAULT_PAGE, DEFAULT_ROW)
+    },
+
+    openImportRoomInfo() {
+      this.$refs.importOwnerRoom.open()
+    },
+
+    openAddRoomFloorModal() {
+      this.$refs.addFloor.open()
+    },
+
+    async openUpdateRoomFloorModal() {
+      if (!this.roomInfo.conditions.floorId) {
+        this.$message.warning('请先选择楼栋')
+        return
+      }
+
+      try {
+        const floorData = await this.loadFloor(this.roomInfo.conditions.floorId)
+        this.$refs.editFloor.open(floorData)
+      } catch (error) {
+        console.error('加载楼栋信息失败:', error)
+      }
+    },
+
+    async openDeleteRoomFloorModal() {
+      if (!this.roomInfo.conditions.floorId) {
+        this.$message.warning('请先选择楼栋')
+        return
+      }
+
+      try {
+        const floorData = await this.loadFloor(this.roomInfo.conditions.floorId)
+        this.$refs.deleteFloor.open(floorData)
+      } catch (error) {
+        console.error('加载楼栋信息失败:', error)
+      }
+    },
+
+    openAddRoomUnitModal() {
+      if (!this.roomInfo.conditions.floorId) {
+        this.$message.warning('请先选择楼栋')
+        return
+      }
+      this.$refs.addUnit.open({ floorId: this.roomInfo.conditions.floorId })
+    },
+
+    async openUpdateRoomUnitModal() {
+      if (!this.roomInfo.conditions.unitId) {
+        this.$message.warning('请先选择单元')
+        return
+      }
+
+      try {
+        const unitData = await this.loadUnits(this.roomInfo.conditions.unitId)
+        this.$refs.editUnit.open(unitData)
+      } catch (error) {
+        console.error('加载单元信息失败:', error)
+      }
+    },
+
+    async openDeleteRoomUnitModal() {
+      if (!this.roomInfo.conditions.unitId) {
+        this.$message.warning('请先选择单元')
+        return
+      }
+
+      try {
+        const unitData = await this.loadUnits(this.roomInfo.conditions.unitId)
+        this.$refs.deleteUnit.open(unitData)
+      } catch (error) {
+        console.error('加载单元信息失败:', error)
+      }
+    },
+
+    changeIsAll() {
+      if (this.roomInfo.isAll === 'Y') {
+        this.roomInfo.conditions.floorId = ''
+        this.roomInfo.conditions.unitId = ''
+      }
+      this.listRoom(this.roomInfo.currentPage, DEFAULT_ROW)
+    },
+
+    toSimplifyAcceptance(room) {
+      const date = new Date()
+      localStorage.setItem('JAVA110_IS_BACK', date.getTime())
+      localStorage.setItem('simplifyAcceptanceSearch', JSON.stringify({
+        searchType: '1',
+        searchValue: `${room.floorNum}-${room.unitNum}-${room.roomNum}`,
+        searchPlaceholder: '请输入房屋编号 楼栋-单元-房屋 如1-1-1',
+      }))
+      this.$router.push('/pages/property/simplifyAcceptance?tab=业务受理')
+    },
+
+    viewOwnerRooms(room) {
+      this.$refs.ownerRooms.open(room)
+    },
+
+    viewOwnerMembers(room) {
+      this.$refs.ownerMembers.open(room.ownerId)
+    },
+
+    viewOwnerCars(room) {
+      this.$refs.ownerCars.open(room.ownerId)
+    },
+
+    viewComplaints(room) {
+      this.$refs.ownerComplaints.open(room.ownerId)
+    },
+
+    viewRepairs(room) {
+      this.$refs.ownerRepairs.open(room.ownerId)
+    },
+
+    viewOweFees(room) {
+      this.$refs.ownerOweFees.open(room.ownerId)
+    },
+
+    viewRoomOweFees(room) {
+      this.$refs.roomOweFees.open(room.roomId)
+    },
+
+    viewRoomContracts(room) {
+      this.$refs.roomContracts.open({ roomId: room.roomId })
+    },
+
+    toRoomBindOwner(room) {
+      this.$router.push(`/pages/owner/roomBindOwner?roomId=${room.roomId}`)
+    },
+
+    toRoomUnBindOwner(room) {
+      this.$router.push(`/pages/property/deleteOwnerRoom?ownerId=${room.ownerId}`)
+    },
+
+    showMarkdown() {
+      this.$router.push('/pages/property/room')
+    },
+
+    async loadFloor(floorId) {
+      const params = {
+        page: 1,
+        row: 1,
+        communityId: this.getCommunityId(),
+        floorId: floorId
+      }
+      const res = await getFloors(params)
+      return res.apiFloorDataVoList[0]
+    },
+
+    async loadUnits(unitId) {
+      const params = {
+        unitId: unitId,
+        communityId: this.getCommunityId(),
+      }
+      const res = await getUnits(params)
+      return res[0]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.room-container {
+  padding: 15px;
+}
+
+.bg-white {
+  background-color: #fff;
+}
+
+.padding-sm {
+  padding: 10px;
+}
+
+.margin-left-sm {
+  margin-left: 10px;
+}
+
+.margin-top-xs {
+  margin-top: 5px;
+}
+
+.ibox {
+  margin-bottom: 15px;
+}
+
+.ibox-title {
+  border-color: #e7eaec;
+  background-color: #f9f9f9;
+  border-bottom: 1px solid #e7eaec;
+  padding: 10px 15px;
+}
+
+.ibox-content {
+  padding: 15px;
+}
+
+.hc-table-div {
+  overflow-x: auto;
+}
+
+.hc-td {
+  padding: 5px;
+  text-align: center;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.hand {
+  cursor: pointer;
+}
+
+.textAuto {
+  text-align: center;
+}
+
+.float-right {
+  float: right;
+}
+
+.border-radius {
+  border-radius: 4px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/room/roomOweFeesLang.js b/src/views/room/roomOweFeesLang.js
new file mode 100644
index 0000000..6ee292b
--- /dev/null
+++ b/src/views/room/roomOweFeesLang.js
@@ -0,0 +1,34 @@
+export const messages = {
+  en: {
+    roomOweFees: {
+      title: 'Room Arrears',
+      payerObj: 'Charge Object',
+      ownerName: 'Owner Name',
+      phone: 'Phone',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      total: 'Total',
+      unit: 'Unit: Yuan',
+      updateTime: 'Update Time'
+    },
+    roomOweFeesDemo: {
+      openBtn: 'View Room Arrears'
+    }
+  },
+  zh: {
+    roomOweFees: {
+      title: '房屋欠费',
+      payerObj: '收费对象',
+      ownerName: '业主名称',
+      phone: '手机号',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      total: '合计',
+      unit: '单位:元',
+      updateTime: '更新时间'
+    },
+    roomOweFeesDemo: {
+      openBtn: '查看房屋欠费'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/room/searchFloorLang.js b/src/views/room/searchFloorLang.js
new file mode 100644
index 0000000..6a797d3
--- /dev/null
+++ b/src/views/room/searchFloorLang.js
@@ -0,0 +1,40 @@
+export const messages = {
+  en: {
+    room: {
+      searchFloor: {
+        title: 'Building Search',
+        placeholder: {
+          floorId: 'Please enter building ID',
+          floorName: 'Please enter building name',
+          floorNum: 'Please enter building number'
+        },
+        table: {
+          floorId: 'Building ID',
+          floorName: 'Name',
+          floorNum: 'Number',
+          creator: 'Creator',
+          actions: 'Actions'
+        }
+      }
+    }
+  },
+  zh: {
+    room: {
+      searchFloor: {
+        title: '小区楼',
+        placeholder: {
+          floorId: '请输入楼栋ID',
+          floorName: '请输入楼栋名称',
+          floorNum: '请输入楼栋编号'
+        },
+        table: {
+          floorId: '楼ID',
+          floorName: '名称',
+          floorNum: '编号',
+          creator: '创建人',
+          actions: '操作'
+        }
+      }
+    }
+  }
+}
\ No newline at end of file