From fcf97c48bd17fc6c682827947c56fb54555002c8 Mon Sep 17 00:00:00 2001
From: wangxiaoxian <1094175543@qq.com>
Date: Fri, 6 Mar 2026 00:07:13 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=9F=E6=88=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                        |  10 +
 src/router/index.js                |  10 +
 src/views/rental/RentalArchive.vue | 374 +++++++++++++++++++++++++++++
 src/views/rental/WaterArchive.vue  | 346 ++++++++++++++++++++++++++
 src/views/statistics/House.vue     |  12 +-
 5 files changed, 749 insertions(+), 3 deletions(-)
 create mode 100644 src/views/rental/RentalArchive.vue
 create mode 100644 src/views/rental/WaterArchive.vue

diff --git a/src/App.vue b/src/App.vue
index a37892f..f8bc532 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -35,6 +35,14 @@
               <i class="el-icon-key"></i>
               <span>租房管理</span>
             </el-menu-item>
+            <el-menu-item index="rental-archive">
+              <i class="el-icon-document"></i>
+              <span>租赁档案</span>
+            </el-menu-item>
+            <el-menu-item index="water-archive">
+              <i class="el-icon-document"></i>
+              <span>水费档案</span>
+            </el-menu-item>
             <el-menu-item index="rent-statistics">
               <i class="el-icon-data-analysis"></i>
               <span>租金统计</span>
@@ -75,6 +83,8 @@ export default {
         'room-add': '/room/add',
         'rental-list': '/rental/list',
         'rental-add': '/rental/add',
+        'rental-archive': '/rental/archive',
+        'water-archive': '/water/archive',
         'rent-statistics': '/statistics/rent',
         'room-statistics': '/statistics/room'
       }
diff --git a/src/router/index.js b/src/router/index.js
index c73018a..c31d335 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -78,6 +78,16 @@ const routes = [
     name: 'RentalDetail',
     component: () => import('../views/rental/Detail.vue')
   },
+  {
+    path: '/rental/archive',
+    name: 'RentalArchive',
+    component: () => import('../views/rental/RentalArchive.vue')
+  },
+  {
+    path: '/water/archive',
+    name: 'WaterArchive',
+    component: () => import('../views/rental/WaterArchive.vue')
+  },
   // 统计分析
   {
     path: '/statistics/rent',
diff --git a/src/views/rental/RentalArchive.vue b/src/views/rental/RentalArchive.vue
new file mode 100644
index 0000000..1f9d8b0
--- /dev/null
+++ b/src/views/rental/RentalArchive.vue
@@ -0,0 +1,374 @@
+<template>
+  <div class="rental-archive">
+    <el-card>
+      <template slot="header">
+        <div class="card-header">
+          <span>租赁档案</span>
+        </div>
+      </template>
+      <el-form :inline="true" :model="searchForm" class="search-form">
+        <el-form-item label="公寓">
+          <el-select v-model="searchForm.apartmentId" placeholder="请选择公寓" @change="handleApartmentChange">
+            <el-option label="全部" value=""></el-option>
+            <el-option v-for="apartment in apartments" :key="apartment.id" :label="apartment.name" :value="apartment.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="房间">
+          <el-select v-model="searchForm.roomId" placeholder="请选择房间" :disabled="!searchForm.apartmentId">
+            <el-option label="全部" value=""></el-option>
+            <el-option v-for="room in rooms" :key="room.id" :label="room.roomNumber" :value="room.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="开始日期">
+          <el-date-picker
+            v-model="searchForm.startDate"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="结束日期">
+          <el-date-picker
+            v-model="searchForm.endDate"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="searchForm.status" placeholder="请选择状态">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="在租" value="active"></el-option>
+            <el-option label="已到期" value="expired"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+          <el-button @click="resetSearch">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table :data="rentalList" style="width: 100%" v-loading="isLoading">
+        <el-table-column prop="tenantName" label="租客" width="120"></el-table-column>
+        <el-table-column label="房间" width="150">
+          <template slot-scope="scope">
+            {{ getApartmentName(scope.row.roomId) }} - {{ getRoomNumber(scope.row.roomId) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="startDate" label="开始日期" width="120"></el-table-column>
+        <el-table-column prop="endDate" label="结束日期" width="120"></el-table-column>
+        <el-table-column prop="rent" label="租金(元/月)" width="120"></el-table-column>
+        <el-table-column prop="deposit" label="押金(元)" width="120"></el-table-column>
+        <el-table-column prop="remark" label="备注" min-width="150"></el-table-column>
+        <el-table-column prop="status" label="状态" width="100">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
+              {{ scope.row.status === 'active' ? '在租' : '已到期' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
+        <el-table-column label="操作" width="220">
+          <template slot-scope="scope">
+            <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
+            <el-button type="success" size="small" @click="handleRenew(scope.row)">续租</el-button>
+            <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total">
+        </el-pagination>
+      </div>
+    </el-card>
+
+    <el-dialog :title="rentalForm.id ? '编辑租赁记录' : '新增租赁记录'" :visible.sync="rentalDialogVisible" width="500px">
+      <el-form :model="rentalForm" :rules="rentalRules" ref="rentalForm">
+        <el-form-item label="租客姓名" prop="tenantName">
+          <el-input v-model="rentalForm.tenantName" placeholder="请输入租客姓名"></el-input>
+        </el-form-item>
+        <el-form-item label="房间" prop="roomId">
+          <el-select v-model="rentalForm.roomId" placeholder="请选择房间" style="width: 100%">
+            <el-option v-for="room in allRooms" :key="room.id" :label="`${getApartmentName(room.id)} - ${room.roomNumber}`" :value="room.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="开始日期" prop="startDate">
+          <el-date-picker v-model="rentalForm.startDate" type="date" placeholder="选择开始日期" style="width: 100%"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="结束日期" prop="endDate">
+          <el-date-picker v-model="rentalForm.endDate" type="date" placeholder="选择结束日期" style="width: 100%"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="租金(元)" prop="rent">
+          <el-input v-model.number="rentalForm.rent" placeholder="请输入租金"></el-input>
+        </el-form-item>
+        <el-form-item label="押金(元)" prop="deposit">
+          <el-input v-model.number="rentalForm.deposit" placeholder="请输入押金"></el-input>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="rentalForm.status" placeholder="请选择状态" style="width: 100%">
+            <el-option label="有效" value="active"></el-option>
+            <el-option label="到期" value="expired"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="rentalForm.remark" type="textarea" rows="3" placeholder="请输入备注信息"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="rentalDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSave">保存</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { rentalApi, apartmentApi, roomApi } from '../../api/api'
+
+export default {
+  name: 'RentalArchive',
+  data() {
+    return {
+      rentalList: [],
+      apartments: [],
+      rooms: [],
+      allRooms: [],
+      isLoading: false,
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      searchForm: {
+        apartmentId: '',
+        roomId: '',
+        startDate: '',
+        endDate: '',
+        status: ''
+      },
+      rentalDialogVisible: false,
+      rentalForm: {
+        id: '',
+        roomId: '',
+        tenantName: '',
+        startDate: '',
+        endDate: '',
+        rent: '',
+        deposit: '',
+        status: 'active',
+        remark: ''
+      },
+      rentalRules: {
+        tenantName: [{ required: true, message: '请输入租客姓名', trigger: 'blur' }],
+        roomId: [{ required: true, message: '请选择房间', trigger: 'change' }],
+        startDate: [{ required: true, message: '请选择开始日期', trigger: 'blur' }],
+        endDate: [{ required: true, message: '请选择结束日期', trigger: 'blur' }],
+        rent: [{ required: true, message: '请输入租金', trigger: 'blur' }],
+        status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
+      }
+    }
+  },
+  mounted() {
+    this.loadApartments()
+    this.loadAllRooms()
+    this.loadData()
+  },
+  methods: {
+    async loadApartments() {
+      try {
+        const response = await apartmentApi.getAll()
+        this.apartments = response.data || response
+      } catch (error) {
+        this.$message.error('加载公寓数据失败')
+      }
+    },
+    async loadAllRooms() {
+      try {
+        const response = await roomApi.getAll()
+        this.allRooms = response.data || response
+      } catch (error) {
+        this.$message.error('加载房间数据失败')
+      }
+    },
+    async loadRooms() {
+      if (!this.searchForm.apartmentId) {
+        this.rooms = []
+        return
+      }
+      try {
+        const response = await roomApi.getAll({ apartmentId: this.searchForm.apartmentId })
+        this.rooms = response.data || response
+      } catch (error) {
+        this.$message.error('加载房间数据失败')
+      }
+    },
+    handleApartmentChange() {
+      this.searchForm.roomId = ''
+      this.loadRooms()
+    },
+    async loadData() {
+      this.isLoading = true
+      try {
+        const params = {
+          page: this.currentPage,
+          pageSize: this.pageSize
+        }
+
+        if (this.searchForm.apartmentId) {
+          params.apartmentId = this.searchForm.apartmentId
+        }
+        if (this.searchForm.roomId) {
+          params.roomId = this.searchForm.roomId
+        }
+        if (this.searchForm.status) {
+          params.status = this.searchForm.status
+        }
+        if (this.searchForm.startDate && Array.isArray(this.searchForm.startDate) && this.searchForm.startDate.length === 2) {
+          params.startDateFrom = this.searchForm.startDate[0]
+          params.startDateTo = this.searchForm.startDate[1]
+        }
+        if (this.searchForm.endDate && Array.isArray(this.searchForm.endDate) && this.searchForm.endDate.length === 2) {
+          params.endDateFrom = this.searchForm.endDate[0]
+          params.endDateTo = this.searchForm.endDate[1]
+        }
+
+        const response = await rentalApi.getAll(params)
+        this.rentalList = response.data || response
+        this.total = response.total || 0
+      } catch (error) {
+        this.$message.error('加载数据失败')
+      } finally {
+        this.isLoading = false
+      }
+    },
+    handleSearch() {
+      this.currentPage = 1
+      this.loadData()
+    },
+    resetSearch() {
+      this.searchForm = {
+        apartmentId: '',
+        roomId: '',
+        startDate: '',
+        endDate: '',
+        status: ''
+      }
+      this.rooms = []
+      this.currentPage = 1
+      this.loadData()
+    },
+    handleSizeChange(size) {
+      this.pageSize = size
+      this.currentPage = 1
+      this.loadData()
+    },
+    handleCurrentChange(current) {
+      this.currentPage = current
+      this.loadData()
+    },
+    getApartmentName(roomId) {
+      const room = this.allRooms.find(r => r.id == roomId)
+      if (room) {
+        const apartment = this.apartments.find(a => a.id == room.apartmentId)
+        return apartment ? apartment.name : ''
+      }
+      return ''
+    },
+    getRoomNumber(roomId) {
+      const room = this.allRooms.find(r => r.id == roomId)
+      return room ? room.roomNumber : ''
+    },
+    handleEdit(rental) {
+      this.rentalForm = {
+        ...rental,
+        startDate: rental.startDate ? new Date(rental.startDate) : '',
+        endDate: rental.endDate ? new Date(rental.endDate) : ''
+      }
+      this.rentalDialogVisible = true
+    },
+    handleRenew(rental) {
+      const oldEndDate = new Date(rental.endDate)
+      const newStartDate = new Date(oldEndDate)
+
+      const oldStartDate = new Date(rental.startDate)
+      const monthsDiff = (oldEndDate.getFullYear() - oldStartDate.getFullYear()) * 12 + (oldEndDate.getMonth() - oldStartDate.getMonth())
+
+      const newEndDate = new Date(newStartDate)
+      newEndDate.setMonth(newEndDate.getMonth() + monthsDiff)
+
+      this.rentalForm = {
+        id: '',
+        roomId: rental.roomId,
+        tenantName: rental.tenantName,
+        startDate: newStartDate,
+        endDate: newEndDate,
+        rent: rental.rent,
+        deposit: rental.deposit,
+        status: 'active',
+        remark: '续租'
+      }
+      this.rentalDialogVisible = true
+    },
+    async handleSave() {
+      try {
+        if (this.rentalForm.id) {
+          await rentalApi.update(this.rentalForm.id, this.rentalForm)
+          this.$message.success('租赁记录更新成功')
+        } else {
+          await rentalApi.create(this.rentalForm)
+          this.$message.success('租赁记录添加成功')
+        }
+        this.rentalDialogVisible = false
+        this.loadData()
+      } catch (error) {
+        this.$message.error('操作失败')
+      }
+    },
+    async handleDelete(id) {
+      this.$confirm('确定要删除这条租赁记录吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'danger'
+      }).then(async () => {
+        try {
+          await rentalApi.delete(id)
+          this.$message.success('租赁记录删除成功')
+          this.loadData()
+        } catch (error) {
+          this.$message.error('删除失败')
+        }
+      }).catch(() => {})
+    }
+  }
+}
+</script>
+
+<style scoped>
+.rental-archive {
+  padding: 20px 0;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.search-form {
+  margin-bottom: 20px;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/views/rental/WaterArchive.vue b/src/views/rental/WaterArchive.vue
new file mode 100644
index 0000000..0c5787b
--- /dev/null
+++ b/src/views/rental/WaterArchive.vue
@@ -0,0 +1,346 @@
+<template>
+  <div class="water-archive">
+    <el-card>
+      <template slot="header">
+        <div class="card-header">
+          <span>水费档案</span>
+          <el-button type="primary" size="small" @click="handleAdd">添加水费</el-button>
+        </div>
+      </template>
+      <el-form :inline="true" :model="searchForm" class="search-form">
+        <el-form-item label="公寓">
+          <el-select v-model="searchForm.apartmentId" placeholder="请选择公寓" @change="handleApartmentChange">
+            <el-option label="全部" value=""></el-option>
+            <el-option v-for="apartment in apartments" :key="apartment.id" :label="apartment.name" :value="apartment.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="房间">
+          <el-select v-model="searchForm.roomId" placeholder="请选择房间" :disabled="!searchForm.apartmentId">
+            <el-option label="全部" value=""></el-option>
+            <el-option v-for="room in rooms" :key="room.id" :label="room.roomNumber" :value="room.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="计费周期">
+          <el-date-picker
+            v-model="searchForm.billingPeriod"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="searchForm.status" placeholder="请选择状态">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="未支付" value="unpaid"></el-option>
+            <el-option label="已支付" value="paid"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+          <el-button @click="resetSearch">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table :data="waterBillList" style="width: 100%" v-loading="isLoading">
+        <el-table-column label="房间" width="150">
+          <template slot-scope="scope">
+            {{ getApartmentName(scope.row.roomId) }} - {{ getRoomNumber(scope.row.roomId) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="startDate" label="开始日期" width="120"></el-table-column>
+        <el-table-column prop="endDate" label="结束日期" width="120"></el-table-column>
+        <el-table-column prop="startReading" label="起始度数" width="120"></el-table-column>
+        <el-table-column prop="endReading" label="结束度数" width="120"></el-table-column>
+        <el-table-column prop="usage" label="用水量(吨)" width="120"></el-table-column>
+        <el-table-column prop="unitPrice" label="单价(元/吨)" width="120"></el-table-column>
+        <el-table-column prop="amount" label="费用(元)" width="100"></el-table-column>
+        <el-table-column prop="status" label="状态" width="100">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.status === 'paid' ? 'success' : 'warning'">
+              {{ scope.row.status === 'paid' ? '已支付' : '未支付' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
+        <el-table-column label="操作" width="150">
+          <template slot-scope="scope">
+            <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
+            <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total">
+        </el-pagination>
+      </div>
+    </el-card>
+
+    <el-dialog :title="waterBillForm.id ? '编辑水费' : '添加水费'" :visible.sync="waterBillDialogVisible" width="500px">
+      <el-form :model="waterBillForm" :rules="waterBillRules" ref="waterBillForm">
+        <el-form-item label="房间" prop="roomId">
+          <el-select v-model="waterBillForm.roomId" placeholder="请选择房间" style="width: 100%">
+            <el-option v-for="room in allRooms" :key="room.id" :label="`${getApartmentName(room.id)} - ${room.roomNumber}`" :value="room.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="开始日期" prop="startDate">
+          <el-date-picker v-model="waterBillForm.startDate" type="date" placeholder="选择开始日期" style="width: 100%"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="结束日期" prop="endDate">
+          <el-date-picker v-model="waterBillForm.endDate" type="date" placeholder="选择结束日期" style="width: 100%"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="起始度数" prop="startReading">
+          <el-input v-model.number="waterBillForm.startReading" placeholder="请输入起始度数"></el-input>
+        </el-form-item>
+        <el-form-item label="结束度数" prop="endReading">
+          <el-input v-model.number="waterBillForm.endReading" placeholder="请输入结束度数"></el-input>
+        </el-form-item>
+        <el-form-item label="单价(元/吨)" prop="unitPrice">
+          <el-input v-model.number="waterBillForm.unitPrice" placeholder="请输入单价"></el-input>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="waterBillForm.status" placeholder="请选择状态" style="width: 100%">
+            <el-option label="未支付" value="unpaid"></el-option>
+            <el-option label="已支付" value="paid"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="waterBillDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSave">保存</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { waterBillApi, apartmentApi, roomApi } from '../../api/api'
+
+export default {
+  name: 'WaterArchive',
+  data() {
+    return {
+      waterBillList: [],
+      apartments: [],
+      rooms: [],
+      allRooms: [],
+      isLoading: false,
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      searchForm: {
+        apartmentId: '',
+        roomId: '',
+        billingPeriod: '',
+        status: ''
+      },
+      waterBillDialogVisible: false,
+      waterBillForm: {
+        id: '',
+        roomId: '',
+        startDate: '',
+        endDate: '',
+        startReading: '',
+        endReading: '',
+        unitPrice: '',
+        status: 'unpaid'
+      },
+      waterBillRules: {
+        roomId: [{ required: true, message: '请选择房间', trigger: 'change' }],
+        startDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
+        endDate: [{ required: true, message: '请选择结束日期', trigger: 'change' }],
+        startReading: [{ required: true, message: '请输入起始度数', trigger: 'blur' }],
+        endReading: [{ required: true, message: '请输入结束度数', trigger: 'blur' }],
+        unitPrice: [{ required: true, message: '请输入单价', trigger: 'blur' }],
+        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
+      }
+    }
+  },
+  mounted() {
+    this.loadApartments()
+    this.loadAllRooms()
+    this.loadData()
+  },
+  methods: {
+    async loadApartments() {
+      try {
+        const response = await apartmentApi.getAll()
+        this.apartments = response.data || response
+      } catch (error) {
+        this.$message.error('加载公寓数据失败')
+      }
+    },
+    async loadAllRooms() {
+      try {
+        const response = await roomApi.getAll()
+        this.allRooms = response.data || response
+      } catch (error) {
+        this.$message.error('加载房间数据失败')
+      }
+    },
+    async loadRooms() {
+      if (!this.searchForm.apartmentId) {
+        this.rooms = []
+        return
+      }
+      try {
+        const response = await roomApi.getAll({ apartmentId: this.searchForm.apartmentId })
+        this.rooms = response.data || response
+      } catch (error) {
+        this.$message.error('加载房间数据失败')
+      }
+    },
+    handleApartmentChange() {
+      this.searchForm.roomId = ''
+      this.loadRooms()
+    },
+    async loadData() {
+      this.isLoading = true
+      try {
+        const params = {
+          page: this.currentPage,
+          pageSize: this.pageSize
+        }
+
+        if (this.searchForm.apartmentId) {
+          params.apartmentId = this.searchForm.apartmentId
+        }
+        if (this.searchForm.roomId) {
+          params.roomId = this.searchForm.roomId
+        }
+        if (this.searchForm.status) {
+          params.status = this.searchForm.status
+        }
+        if (this.searchForm.billingPeriod && Array.isArray(this.searchForm.billingPeriod) && this.searchForm.billingPeriod.length === 2) {
+          params.startDateFrom = this.searchForm.billingPeriod[0]
+          params.endDateTo = this.searchForm.billingPeriod[1]
+        }
+
+        const response = await waterBillApi.getAll(params)
+        this.waterBillList = response.data || response
+        this.total = response.total || 0
+      } catch (error) {
+        this.$message.error('加载数据失败')
+      } finally {
+        this.isLoading = false
+      }
+    },
+    handleSearch() {
+      this.currentPage = 1
+      this.loadData()
+    },
+    resetSearch() {
+      this.searchForm = {
+        apartmentId: '',
+        roomId: '',
+        billingPeriod: '',
+        status: ''
+      }
+      this.rooms = []
+      this.currentPage = 1
+      this.loadData()
+    },
+    handleSizeChange(size) {
+      this.pageSize = size
+      this.currentPage = 1
+      this.loadData()
+    },
+    handleCurrentChange(current) {
+      this.currentPage = current
+      this.loadData()
+    },
+    getApartmentName(roomId) {
+      const room = this.allRooms.find(r => r.id == roomId)
+      if (room) {
+        const apartment = this.apartments.find(a => a.id == room.apartmentId)
+        return apartment ? apartment.name : ''
+      }
+      return ''
+    },
+    getRoomNumber(roomId) {
+      const room = this.allRooms.find(r => r.id == roomId)
+      return room ? room.roomNumber : ''
+    },
+    handleAdd() {
+      this.waterBillForm = {
+        id: '',
+        roomId: '',
+        startDate: '',
+        endDate: '',
+        startReading: '',
+        endReading: '',
+        unitPrice: '',
+        status: 'unpaid'
+      }
+      this.waterBillDialogVisible = true
+    },
+    handleEdit(waterBill) {
+      this.waterBillForm = {
+        ...waterBill,
+        startDate: waterBill.startDate ? new Date(waterBill.startDate) : '',
+        endDate: waterBill.endDate ? new Date(waterBill.endDate) : ''
+      }
+      this.waterBillDialogVisible = true
+    },
+    async handleSave() {
+      try {
+        if (this.waterBillForm.id) {
+          await waterBillApi.update(this.waterBillForm.id, this.waterBillForm)
+          this.$message.success('水费记录更新成功')
+        } else {
+          await waterBillApi.create(this.waterBillForm)
+          this.$message.success('水费记录添加成功')
+        }
+        this.waterBillDialogVisible = false
+        this.loadData()
+      } catch (error) {
+        this.$message.error('操作失败')
+      }
+    },
+    async handleDelete(id) {
+      this.$confirm('确定要删除这条水费记录吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'danger'
+      }).then(async () => {
+        try {
+          await waterBillApi.delete(id)
+          this.$message.success('水费记录删除成功')
+          this.loadData()
+        } catch (error) {
+          this.$message.error('删除失败')
+        }
+      }).catch(() => {})
+    }
+  }
+}
+</script>
+
+<style scoped>
+.water-archive {
+  padding: 20px 0;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.search-form {
+  margin-bottom: 20px;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/views/statistics/House.vue b/src/views/statistics/House.vue
index 32852dd..3115d75 100644
--- a/src/views/statistics/House.vue
+++ b/src/views/statistics/House.vue
@@ -33,7 +33,10 @@ export default {
   },
   computed: {
     totalCount() {
-      return this.roomStatusData.reduce((sum, item) => sum + item.count, 0)
+      // 只计算在租和空房的数量
+      return this.roomStatusData
+        .filter(item => item.status === '在租' || item.status === '空房')
+        .reduce((sum, item) => sum + item.count, 0)
     }
   },
   mounted() {
@@ -44,10 +47,13 @@ export default {
       try {
         const response = await statisticsApi.getRoomStatus()
         const data = response
-        const total = data.reduce((sum, item) => sum + item.count, 0)
+        // 只计算在租和空房的数量作为总数
+        const total = data
+          .filter(item => item.status === '在租' || item.status === '空房')
+          .reduce((sum, item) => sum + item.count, 0)
         this.roomStatusData = data.map(item => ({
           ...item,
-          percentage: `${((item.count / total) * 100).toFixed(2)}%`
+          percentage: total > 0 ? `${((item.count / total) * 100).toFixed(2)}%` : '0.00%'
         }))
       } catch (error) {
         this.$message.error('加载房间状态统计数据失败')