From 519df168c6bcdb00b7e11f014e3106bca702cdd0 Mon Sep 17 00:00:00 2001
From: Zy <1448159279@qq.com>
Date: Tue, 11 Aug 2026 09:03:27 +0800
Subject: [PATCH] =?UTF-8?q?8/11=EF=BC=8C=E5=BA=94=E6=94=B6=E7=89=A9?=
 =?UTF-8?q?=E4=B8=9A=EF=BC=8C=E5=AE=9E=E6=94=B6=E7=89=A9=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/house/index.ts                 |   4 +-
 src/api/system/report/aging/index.ts          |  18 +
 src/api/system/report/arrearsTrend/index.ts   |   9 +
 src/api/system/report/arrearsTrend/type.ts    |   0
 .../report/businessDailyReport/index.ts       |  54 ++
 .../system/report/businessDailyReport/type.ts |  77 +++
 src/api/system/report/chargeTrend/index.ts    |   9 +
 src/api/system/report/chargeTrend/type.ts     |   0
 src/api/system/report/paidInExpenses/index.ts |  10 +
 src/api/system/report/paidInExpenses/type.ts  |  29 ++
 .../report/paidInExpensesReceivable/index.ts  |  10 +
 .../report/paidInExpensesReceivable/type.ts   |  29 ++
 src/components/Pagination/index.vue           |   2 +-
 src/utils/request.ts                          |   4 +-
 src/views/system/Sdb/SdbCashier/index.vue     |  13 +-
 src/views/system/houseRental/index.vue        |   2 +-
 .../system/report/LeaseManagementDetails.vue  | 488 ++++++++++++++++++
 src/views/system/report/aging.vue             |  18 +-
 src/views/system/report/agingDetailed.vue     |  93 ++--
 src/views/system/report/arrearsTrend.vue      | 259 ++++++++++
 .../system/report/businessDailyReport.vue     | 192 +++++++
 src/views/system/report/chargeTrend.vue       | 260 ++++++++++
 src/views/system/report/paidInExpenses.vue    | 238 +++++++++
 .../report/paidInExpensesReceivable.vue       | 236 +++++++++
 24 files changed, 2010 insertions(+), 44 deletions(-)
 create mode 100644 src/api/system/report/arrearsTrend/index.ts
 create mode 100644 src/api/system/report/arrearsTrend/type.ts
 create mode 100644 src/api/system/report/businessDailyReport/index.ts
 create mode 100644 src/api/system/report/businessDailyReport/type.ts
 create mode 100644 src/api/system/report/chargeTrend/index.ts
 create mode 100644 src/api/system/report/chargeTrend/type.ts
 create mode 100644 src/api/system/report/paidInExpenses/index.ts
 create mode 100644 src/api/system/report/paidInExpenses/type.ts
 create mode 100644 src/api/system/report/paidInExpensesReceivable/index.ts
 create mode 100644 src/api/system/report/paidInExpensesReceivable/type.ts
 create mode 100644 src/views/system/report/LeaseManagementDetails.vue
 create mode 100644 src/views/system/report/arrearsTrend.vue
 create mode 100644 src/views/system/report/businessDailyReport.vue
 create mode 100644 src/views/system/report/chargeTrend.vue
 create mode 100644 src/views/system/report/paidInExpenses.vue
 create mode 100644 src/views/system/report/paidInExpensesReceivable.vue

diff --git a/src/api/system/house/index.ts b/src/api/system/house/index.ts
index c72dc80..a8c59c8 100644
--- a/src/api/system/house/index.ts
+++ b/src/api/system/house/index.ts
@@ -5,11 +5,11 @@ import { addBuildingType, addHouseType, BuildingUnit, BuildingVo } from './type'
 // 楼栋---------------------------------------------------------------------------------------
 
 /** 根据 小区id 和 类型   查询楼栋信息 */
-export function getBuildinglistAPI(): AxiosPromise<BuildingVo[]> {
+export function getBuildinglistAPI(query = {}): AxiosPromise<BuildingVo[]> {
   return request({
     url: '/building/byVillage',
     method: 'get',
-    params: {}
+    params: query
   });
 }
 /** 获取所有楼栋 */
diff --git a/src/api/system/report/aging/index.ts b/src/api/system/report/aging/index.ts
index 0515c2b..1757b1e 100644
--- a/src/api/system/report/aging/index.ts
+++ b/src/api/system/report/aging/index.ts
@@ -10,3 +10,21 @@ export const getAgingList = (query): Promise<AgingListResponse> => {
   });
 };
 
+
+export const getDetailList = (query): Promise<AgingListResponse> => {
+  return request({
+    url: '/agingAnalysis/detail',
+    method: 'get',
+    params: query
+  });
+};
+
+
+export const getDetailList = (query): Promise<AgingListResponse> => {
+  return request({
+    url: '/agingAnalysis/detail',
+    method: 'get',
+    params: query
+  });
+};
+
diff --git a/src/api/system/report/arrearsTrend/index.ts b/src/api/system/report/arrearsTrend/index.ts
new file mode 100644
index 0000000..599b2b7
--- /dev/null
+++ b/src/api/system/report/arrearsTrend/index.ts
@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+
+export const getArrearsTend = (query) => {
+  return request({
+    url: '/propertyFeeTrend/arrearsTrend',
+    method: 'get',
+    params: query
+  });
+};
diff --git a/src/api/system/report/arrearsTrend/type.ts b/src/api/system/report/arrearsTrend/type.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/api/system/report/businessDailyReport/index.ts b/src/api/system/report/businessDailyReport/index.ts
new file mode 100644
index 0000000..19fe940
--- /dev/null
+++ b/src/api/system/report/businessDailyReport/index.ts
@@ -0,0 +1,54 @@
+import request from '@/utils/request';
+import { Response } from '@/api/system/report/businessDailyReport/type';
+
+/**
+ * 按小区统计
+ * @param query
+ * @returns
+ * */
+export const getBusinessDailyReport = (query): Promise<Response> => {
+  return request({
+    url: '/businessDailyReport/village',
+    method: 'get',
+    params: query
+  });
+};
+/**
+ * 按小区统计导出
+ * @param query
+ * @returns
+ * */
+export const getBusinessDailyReportExport = (query): Promise<Response> => {
+  return request({
+    url: '/businessDailyReport/village/export',
+    method: 'get',
+    params: query
+  });
+};
+
+
+
+/**
+ * 按收费项目统计
+ * @param query
+ * @returns
+ * */
+export const getBusinessDailyReportChargeItem = (query): Promise<Response> => {
+  return request({
+    url: '/businessDailyReport/chargeItem',
+    method: 'get',
+    params: query
+  });
+};
+/**
+ * 按收费项目统计导出
+ * @param query
+ * @returns
+ * */
+export const getBusinessDailyReportChargeItemExport = (query): Promise<Response> => {
+  return request({
+    url: '/businessDailyReport/chargeItem/export',
+    method: 'get',
+    params: query
+  });
+};
diff --git a/src/api/system/report/businessDailyReport/type.ts b/src/api/system/report/businessDailyReport/type.ts
new file mode 100644
index 0000000..f9fd7f4
--- /dev/null
+++ b/src/api/system/report/businessDailyReport/type.ts
@@ -0,0 +1,77 @@
+export type Response = {
+  code: number;
+  msg: string;
+  /**
+   * 支付方式
+   */
+  payTypes: PayType[];
+  /**
+   * 数据列表
+   */
+  rows: RowsType[];
+  /**
+   * 合计行
+   */
+  summary: Summary;
+  total: number;
+};
+
+export type RowsType = Row | RowVillage;
+
+export type Row = {
+  /**
+   * 收费项目ID
+   */
+  chargeItemId: string;
+  /**
+   * 收费项目名称
+   */
+  chargeItemName: string;
+  /**
+   * 各支付方式金额
+   */
+  payAmounts: { [key: string]: string };
+  /**
+   * 合计金额
+   */
+  totalAmount: string;
+};
+
+export type RowVillage = {
+  /**
+   * 各支付方式金额
+   */
+  payAmounts?: { [key: string]: string };
+  /**
+   * 合计金额
+   */
+  totalAmount?: number;
+  /**
+   * 小区ID
+   */
+  villageId?: number;
+  /**
+   * 小区名称
+   */
+  villageName?: string;
+};
+
+export type PayType = {
+  /**
+   * 支付方式编码
+   */
+  payType: string;
+  /**
+   * 支付方式名称
+   */
+  payTypeName: string;
+};
+/**
+ * 合计行
+ */
+export type Summary = {
+  chargeItemId: null;
+  chargeItemName: string;
+  payAmounts: { [key: string]: string };
+  totalAmount: string;
+};
diff --git a/src/api/system/report/chargeTrend/index.ts b/src/api/system/report/chargeTrend/index.ts
new file mode 100644
index 0000000..66c9be7
--- /dev/null
+++ b/src/api/system/report/chargeTrend/index.ts
@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+
+export const getChargeTend = (query)=> {
+  return request({
+    url: '/propertyFeeTrend/chargeTrend',
+    method: 'get',
+    params: query
+  });
+};
diff --git a/src/api/system/report/chargeTrend/type.ts b/src/api/system/report/chargeTrend/type.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/api/system/report/paidInExpenses/index.ts b/src/api/system/report/paidInExpenses/index.ts
new file mode 100644
index 0000000..b47800b
--- /dev/null
+++ b/src/api/system/report/paidInExpenses/index.ts
@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+import { Response } from '@/api/system/report/paidInExpensesReceivable/type';
+
+export const getPaidInExpensesList = (data): Promise<Response> => {
+  return request({
+    url: '/paidInExpenses/list',
+    method: 'POST',
+    data: data
+  });
+};
diff --git a/src/api/system/report/paidInExpenses/type.ts b/src/api/system/report/paidInExpenses/type.ts
new file mode 100644
index 0000000..b06b404
--- /dev/null
+++ b/src/api/system/report/paidInExpenses/type.ts
@@ -0,0 +1,29 @@
+export type Response = {
+  code: number;
+  data: Data;
+  msg: string;
+};
+
+export type Data = {
+  chargeTypes: string[];
+  details: Detail[];
+  total: Total;
+};
+
+export type Detail = {
+  amounts: DetailAmounts;
+  name: string;
+  sequence: string;
+  total: string;
+};
+
+export type DetailAmounts = {
+  [property: string]: string;
+};
+
+export type Total = {
+  amounts: DetailAmounts;
+  name: string;
+  sequence: string;
+  total: string;
+};
diff --git a/src/api/system/report/paidInExpensesReceivable/index.ts b/src/api/system/report/paidInExpensesReceivable/index.ts
new file mode 100644
index 0000000..7b16fc2
--- /dev/null
+++ b/src/api/system/report/paidInExpensesReceivable/index.ts
@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+import { Response } from '@/api/system/report/paidInExpensesReceivable/type';
+
+export const getPaidInExpensesReceivableList = (data): Promise<Response> => {
+  return request({
+    url: '/paidInExpenses/receivable/list',
+    method: 'POST',
+    data: data
+  });
+};
diff --git a/src/api/system/report/paidInExpensesReceivable/type.ts b/src/api/system/report/paidInExpensesReceivable/type.ts
new file mode 100644
index 0000000..b06b404
--- /dev/null
+++ b/src/api/system/report/paidInExpensesReceivable/type.ts
@@ -0,0 +1,29 @@
+export type Response = {
+  code: number;
+  data: Data;
+  msg: string;
+};
+
+export type Data = {
+  chargeTypes: string[];
+  details: Detail[];
+  total: Total;
+};
+
+export type Detail = {
+  amounts: DetailAmounts;
+  name: string;
+  sequence: string;
+  total: string;
+};
+
+export type DetailAmounts = {
+  [property: string]: string;
+};
+
+export type Total = {
+  amounts: DetailAmounts;
+  name: string;
+  sequence: string;
+  total: string;
+};
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index 51e808e..d151880 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -25,7 +25,7 @@ const props = defineProps({
   pageSizes: { type: Array<number>, default: () => [10, 20, 30, 50, 100] },
   // 移动端页码按钮的数量端默认值5
   pagerCount: propTypes.number.def(document.body.clientWidth < 992 ? 5 : 7),
-  layout: propTypes.string.def('sizes, prev, pager, next, jumper,total'),
+  layout: propTypes.string.def('sizes, prev, pager, next, jumper'),
   background: propTypes.bool.def(true),
   autoScroll: propTypes.bool.def(true),
   hidden: propTypes.bool.def(false),
diff --git a/src/utils/request.ts b/src/utils/request.ts
index c1aac2d..b654ca2 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -47,7 +47,9 @@ const whiteVillageId = [
   '/houseRental/changeStatus', // 房屋租赁 - 上架/下架
   '/points/pointsProducts/list', // 积分商品列表
   '/points/*',
-  '/outstandingFeeSummary/*'
+  '/outstandingFeeSummary/*',
+
+  '/paidInExpenses/*'
   // '/building/list'
 ];
 
diff --git a/src/views/system/Sdb/SdbCashier/index.vue b/src/views/system/Sdb/SdbCashier/index.vue
index ca5a499..11ca1fa 100644
--- a/src/views/system/Sdb/SdbCashier/index.vue
+++ b/src/views/system/Sdb/SdbCashier/index.vue
@@ -104,12 +104,7 @@
       </div>
     </div>
     <el-card class="flex-1" shadow="never">
-      <el-table
-        v-loading="loading"
-        border
-        :data="tableData"
-        @selection-change="handleSelectionChange"
-      >
+      <el-table v-loading="loading" border :data="tableData" @selection-change="handleSelectionChange">
         <el-table-column type="selection" fixed="left" width="55" align="center" />
         <el-table-column label="房屋/车位/车辆" fixed="left" align="center" prop="unitNo" width="120">
           <template #default="scope">
@@ -156,7 +151,7 @@
         <el-table-column label="优惠金额" width="100" align="center" prop="singleDiscountAmount" />
         <el-table-column label="实缴金额" width="100" align="center" prop="actualAccount" />
         <el-table-column label="缴费人" width="120" align="center" prop="residentName" />
-        <el-table-column label="缴费时间" width="200"  align="center" prop="payTime" />
+        <el-table-column label="缴费时间" width="200" align="center" prop="payTime" />
         <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
         <el-table-column label="操作" width="110" align="center" fixed="right" class-name="small-padding fixed-width">
           <template #default="scope">
@@ -537,7 +532,9 @@ function handleChangeVillage(val: string) {
   buildingList.value = [];
   unitList.value = [];
   if (val) {
-    getBuildinglistAPI().then((res) => {
+    getBuildinglistAPI({
+      villageId: val
+    }).then((res) => {
       buildingList.value = res.data;
       handleChargeItem(val);
     });
diff --git a/src/views/system/houseRental/index.vue b/src/views/system/houseRental/index.vue
index cf15ec6..9500e5a 100644
--- a/src/views/system/houseRental/index.vue
+++ b/src/views/system/houseRental/index.vue
@@ -397,7 +397,7 @@ function sign(row: HouseRentalVO) {
     showImgList.value = row.signingList[0].contractUrl.split(',').map((item, index) => {
       return {
         uid: index,
-        name: item.split('.com/')[1].split('/')[3],
+        name: row.contractName.split(',')[index],
         url: item,
         isLink: true
       };
diff --git a/src/views/system/report/LeaseManagementDetails.vue b/src/views/system/report/LeaseManagementDetails.vue
new file mode 100644
index 0000000..40ba7ec
--- /dev/null
+++ b/src/views/system/report/LeaseManagementDetails.vue
@@ -0,0 +1,488 @@
+<template>
+  <div class="p-2 h-full flex flex-col">
+    <pageHeader></pageHeader>
+    <el-card shadow="hover">
+      <el-form ref="queryFormRef" label-width="140" :model="queryParams" @submit.prevent="handleQuery" :inline="true">
+        <div>
+          <el-form-item label="区域(多选)" prop="villageId">
+            <el-date-picker
+              v-model="queryTime"
+              type="daterange"
+              @update:model-value="handleQueryTime"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+            />
+          </el-form-item>
+          <el-form-item label="承租方" prop="chargeItemId">
+            <el-select @change="handleVillageChange" v-model="queryParams.villageId" placeholder="请选择">
+              <el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="电话" prop="houseNo">
+            <el-input v-model.trim="queryParams.houseNo" placeholder="请输入房号" />
+          </el-form-item>
+          <el-form-item label="房号" prop="month">
+            <el-select v-model="queryParams.month" placeholder="请选择">
+              <el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
+          </el-form-item>
+        </div>
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+          <div v-show="showSearch" class="mb-[10px]">
+            <div>
+              <div>
+                <el-form-item label="面积" prop="month">
+                  <el-select v-model="queryParams.month" placeholder="请选择">
+                    <el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="收费模式（多选）" prop="month">
+                  <el-select v-model="queryParams.month" placeholder="请选择">
+                    <el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="收费标准（多选）" prop="month">
+                  <el-select v-model="queryParams.month" placeholder="请选择">
+                    <el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+              </div>
+              <div>
+                <el-form-item label="租金（应收）" prop="month">
+                  <el-select v-model="queryParams.month" placeholder="请选择">
+                    <el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="押金（应收）" prop="month">
+                  <el-select v-model="queryParams.month" placeholder="请选择">
+                    <el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="物业管理费（应收）" prop="month">
+                  <el-select v-model="queryParams.month" placeholder="请选择">
+                    <el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="**（应收）" prop="month">
+                  <el-select v-model="queryParams.month" placeholder="请选择">
+                    <el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+              </div>
+              <div>
+                <el-form-item label="租金（已收）" prop="month">
+                  <el-select v-model="queryParams.month" placeholder="请选择">
+                    <el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="押金（已收）" prop="month">
+                  <el-select v-model="queryParams.month" placeholder="请选择">
+                    <el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="物业管理费（已收）" prop="month">
+                  <el-select v-model="queryParams.month" placeholder="请选择">
+                    <el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="**（已收）" prop="month">
+                  <el-select v-model="queryParams.month" placeholder="请选择">
+                    <el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+              </div>
+              <div>
+                <el-form-item label="租金（未收）" prop="month">
+                  <el-select v-model="queryParams.month" placeholder="请选择">
+                    <el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="押金（未收）" prop="month">
+                  <el-select v-model="queryParams.month" placeholder="请选择">
+                    <el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="物业管理费（未收）" prop="month">
+                  <el-select v-model="queryParams.month" placeholder="请选择">
+                    <el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="**（未收）" prop="month">
+                  <el-select v-model="queryParams.month" placeholder="请选择">
+                    <el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+              </div>
+              <div class="flex justify-between">
+                <div>
+                  <el-form-item label="租赁起始日期" prop="month">
+                    <el-select v-model="queryParams.month" placeholder="请选择">
+                      <el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="租赁终止日期" prop="month">
+                    <el-select v-model="queryParams.month" placeholder="请选择">
+                      <el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select>
+                  </el-form-item>
+                </div>
+                <div v-if="showSearch">
+                  <el-form-item label="">
+                    <el-button type="primary">查询</el-button>
+                    <el-button>重置</el-button>
+                    <div class="arrowBox" style="margin-left: 10px" v-if="showSearch" @click="ChangeShowSearch(false)">
+                      <span>收起</span>
+                      <el-icon style="margin-left: 5px"><ArrowUpBold /></el-icon>
+                    </div>
+                    <div class="arrowBox" style="margin-left: 10px" v-else @click="ChangeShowSearch(true)">
+                      <span>展开</span>
+                      <el-icon style="margin-left: 5px"><ArrowDownBold /></el-icon>
+                    </div>
+                  </el-form-item>
+                </div>
+              </div>
+            </div>
+          </div>
+        </transition>
+        <div v-if="!showSearch">
+          <el-form-item label="">
+            <el-button type="primary">查询</el-button>
+            <el-button>重置</el-button>
+            <div class="arrowBox" style="margin-left: 10px" v-if="showSearch" @click="ChangeShowSearch(false)">
+              <span>收起</span>
+              <el-icon style="margin-left: 5px"><ArrowUpBold /></el-icon>
+            </div>
+            <div class="arrowBox" style="margin-left: 10px" v-else @click="ChangeShowSearch(true)">
+              <span>展开</span>
+              <el-icon style="margin-left: 5px"><ArrowDownBold /></el-icon>
+            </div>
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-card>
+    <el-card shadow="never" class="flex-1" style="margin-top: 5px">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="5">
+            <span>租赁管理明细</span>
+          </el-col>
+          <el-col :span="18"></el-col>
+          <el-col :span="1">
+            <el-button type="primary" @click="handleExport">导出</el-button>
+          </el-col>
+        </el-row>
+      </template>
+      <el-table :span-method="mergeSpanMethod" v-loading="loading" border :data="ArrearsDetailList">
+        <el-table-column label="序号" width="80" align="center" prop="serialNumber" />
+        <el-table-column label="区域" align="center" prop="area" />
+        <el-table-column label="房号" align="center" prop="houseNo" />
+        <el-table-column label="客户" align="center" prop="customerName" />
+        <el-table-column label="联系电话" align="center" prop="phone" />
+        <el-table-column label="欠费月数" width="80" align="center" prop="arrearsMonths" />
+        <el-table-column label="应收账期" align="center" prop="billPeriod" />
+        <el-table-column label="欠费项目" align="center">
+          <template #default>
+            <template v-for="(item, index) in dynamicColumns" :key="index">
+              <el-table-column :label="item" align="center">
+                <template #default="scope">
+                  {{ scope.row.chargeItemAmounts?.[item] || 0 }}
+                </template>
+              </el-table-column>
+            </template>
+            <el-table-column label="金额合计" align="center" prop="totalAmount">
+              <template #default="scope">
+                <span style="color: red">{{ scope.row.totalAmount }}</span>
+              </template>
+            </el-table-column>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+  </div>
+</template>
+账龄
+<script setup name="Arrears" lang="ts">
+import pagination from '@/components/Pagination/index.vue';
+import pageHeader from '@/components/Pageheader/index.vue';
+import { getArrearsDetails } from '@/api/system/report/arrears/arrears';
+import { listChargeItem } from '@/api/system/SdbChargeItem';
+import { getCommunitylistAPI } from '@/api/system/community';
+import { OwnerArrearsDetailVo } from '@/api/system/report/arrears/type';
+import { getVillageTree } from '@/api/system/house';
+import { validator } from '@/utils/Reg';
+import { ColumnConfig, exportToExcel } from '@/utils/xlsx';
+import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+// ╬╬▐╬╬&╬╬╬╬
+const ArrearsDetailList = ref<OwnerArrearsDetailVo[]>([]);
+const loading = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+function ChangeShowSearch(bol: boolean) {
+  showSearch.value = bol;
+}
+const queryFormRef = ref<ElFormInstance>();
+const queryTime = ref([]);
+function handleQueryTime(val: string[]) {
+  queryParams.value.startTime = val[0];
+  queryParams.value.endTime = val[1];
+}
+const data = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    villageId: '-1',
+    startTime: '',
+    endTime: '',
+    houseNo: '',
+    month: '-1'
+  },
+  rule: [
+    {
+      validator: (_: any, value: string, callback: (arg0?: Error) => any) => {
+        if (value === '' || value === undefined || value === null) {
+          return callback();
+        }
+        if (!validator(value, 'fullFilterReg')) {
+          return callback(new Error('请输入正确的房号'));
+        }
+      }
+    }
+  ]
+});
+
+const { queryParams } = toRefs(data);
+
+// 查询小区
+const villageList = ref([]);
+function getAllVillage() {
+  getCommunitylistAPI().then((res) => {
+    villageList.value = [
+      {
+        villageId: '-1',
+        villageName: '全部区域'
+      },
+      ...res.rows
+    ];
+  });
+}
+// 区域改变时，查询收费项目
+function handleVillageChange(val: string) {
+  queryParams.value.villageId = val;
+  queryParams.value.houseNo = '-1';
+}
+// 月份
+const MonthList = ref([]);
+function getMonthList() {
+  const arr = Array.from({ length: 12 }).fill((i) => {
+    return {
+      id: `${i + 1}`,
+      name: `${i + 1}月`
+    };
+  });
+  MonthList.value = [];
+  MonthList.value = [
+    {
+      id: '-1',
+      name: '全部月数'
+    },
+    ...arr
+  ];
+}
+// 动态列名列表▐╬ .3╬
+const dynamicColumns = ref<string[]>([]);
+
+// 在获取数据后更新动态列
+const updateDynamicColumns = (list: any[]) => {
+  const columns = new Set<string>();
+  list.forEach((row) => {
+    if (row.chargeItemAmounts) {
+      Object.keys(row.chargeItemAmounts).forEach((key) => columns.add(key));
+    }
+  });
+  return Array.from(columns);
+};
+
+/** 查询电抄记录列表 */
+const getList = async () => {
+  loading.value = true;
+  const search = { ...queryParams.value };
+  // 移除空字符串字段
+  Object.keys(search).forEach((key) => {
+    if (search[key] === '-1') {
+      search[key] = undefined;
+    }
+  });
+  getArrearsDetails(search)
+    .then((res) => {
+      ArrearsDetailList.value = res.rows;
+      total.value = res.total;
+      dynamicColumns.value = updateDynamicColumns(res.rows);
+
+      ArrearsDetailList.value[ArrearsDetailList.value.length - 1].serialNumber = '合计';
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+/** 导出Excel */
+const handleExport = () => {
+  if (ArrearsDetailList.value.length === 0) {
+    proxy?.$modal.msgWarning('没有可导出的数据');
+    return;
+  }
+  // 显示加载提示
+  loading.value = true;
+  // 使用 setTimeout 让出主线程，避免阻塞UI
+  setTimeout(() => {
+    try {
+      const columns: ColumnConfig[] = [
+        { label: '序号', prop: 'serialNumber' },
+        { label: '区域', prop: 'area' },
+        { label: '房号', prop: 'houseNo' },
+        { label: '客户', prop: 'customerName' },
+        { label: '联系方式', prop: 'phone' },
+        { label: '欠费月数', prop: 'arrearsMonths' },
+        { label: '应收账期', prop: 'billPeriod' },
+        {
+          label: '欠费项目',
+          children: [
+            ...dynamicColumns.value.map((item) => {
+              return { label: item, prop: `chargeItemAmounts.${item}` };
+            })
+          ]
+        }
+      ];
+      exportToExcel(ArrearsDetailList.value, columns, `应收欠费明细表_${new Date().getTime()}`, mergeSpanMethod);
+    } catch (error) {
+      proxy?.$modal.msgError('导出失败，请重试');
+      console.error('导出错误:', error);
+    } finally {
+      loading.value = false;
+    }
+  }, 100);
+};
+
+const handleExportAll = () => {
+  loading.value = true;
+  let reportAllList: OwnerArrearsDetailVo[] = [];
+  // 移除空字符串字段
+  getArrearsDetails()
+    .then((res) => {
+      reportAllList = res.rows;
+      total.value = res.total;
+      reportAllList[reportAllList.length - 1].serialNumber = '合计';
+      if (reportAllList.length === 0) {
+        proxy?.$modal.msgWarning('没有可导出的数据');
+        return;
+      }
+      // 显示加载提示
+      const list = updateDynamicColumns(res.rows);
+      loading.value = true;
+      // 使用 setTimeout 让出主线程，避免阻塞UI
+      setTimeout(() => {
+        try {
+          const columns: ColumnConfig[] = [
+            { label: '序号', prop: 'serialNumber' },
+            { label: '区域', prop: 'area' },
+            { label: '房号', prop: 'houseNo' },
+            { label: '客户', prop: 'customerName' },
+            { label: '联系方式', prop: 'phone' },
+            { label: '欠费月数', prop: 'arrearsMonths' },
+            { label: '应收账期', prop: 'billPeriod' },
+            {
+              label: '欠费项目',
+              children: [
+                ...list.map((item) => {
+                  return { label: item, prop: `chargeItemAmounts.${item}` };
+                })
+              ]
+            }
+          ];
+          const mergeSpanMethod2 = ({ columnIndex, rowIndex }) => {
+            if (rowIndex === reportAllList.length - 1) {
+              const rowspan = 6;
+              if (columnIndex === 0) {
+                return { rowspan: 1, colspan: 1 };
+              }
+              if (columnIndex === 1) {
+                return { rowspan: 1, colspan: rowspan };
+              }
+              if (columnIndex < rowspan + 1) {
+                return { rowspan: 0, colspan: 0 };
+              }
+            }
+            // 普通行不合并
+            return { rowspan: 1, colspan: 1 };
+          };
+          exportToExcel(reportAllList, columns, `应收欠费明细表_${new Date().getTime()}`, mergeSpanMethod2);
+        } catch (error) {
+          proxy?.$modal.msgError('导出失败，请重试');
+          console.error('导出错误:', error);
+        } finally {
+          loading.value = false;
+        }
+      }, 100);
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+
+const mergeSpanMethod = ({ columnIndex, rowIndex }) => {
+  if (rowIndex === ArrearsDetailList.value.length - 1) {
+    const rowspan = 6;
+    if (columnIndex === 0) {
+      return { rowspan: 1, colspan: 1 };
+    }
+    if (columnIndex === 1) {
+      return { rowspan: 1, colspan: rowspan };
+    }
+    if (columnIndex < rowspan + 1) {
+      return { rowspan: 0, colspan: 0 };
+    }
+  }
+  // 普通行不合并
+  return { rowspan: 1, colspan: 1 };
+};
+
+onMounted(() => {
+  getList();
+  getMonthList();
+  getAllVillage();
+});
+</script>
+
+<style lang="scss" scoped>
+.el-table {
+  height: calc(100% - 80px);
+}
+.arrow {
+  padding-right: 15px;
+}
+
+.arrowBox {
+  cursor: pointer;
+
+  &:hover {
+    color: #409eff;
+  }
+}
+</style>
diff --git a/src/views/system/report/aging.vue b/src/views/system/report/aging.vue
index bf465e5..8c4f00a 100644
--- a/src/views/system/report/aging.vue
+++ b/src/views/system/report/aging.vue
@@ -216,8 +216,22 @@ const handleExport = () => {
         { label: '5年以上', prop: 'amountOver5' },
         { label: '合计', prop: 'totalAmount' }
       ];
-      const mergeColumns = [0, 1, 2];
-      exportToExcel(AgingList.value, columns, `账龄分析汇总_${new Date().getTime()}`, mergeColumns);
+      const arraySpanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
+        if (rowIndex === AgingList.value.length - 1) {
+          if (columnIndex === 0) {
+            return { rowspan: 1, colspan: 3 };
+          }
+          if (columnIndex === 1) {
+            return { rowspan: 0, colspan: 0 };
+          }
+          if (columnIndex === 2) {
+            return { rowspan: 0, colspan: 0 };
+          }
+        }
+        // 普通行不合并
+        return { rowspan: 1, colspan: 1 };
+      };
+      exportToExcel(AgingList.value, columns, `账龄分析汇总_${new Date().getTime()}`, arraySpanMethod);
     } catch (error) {
       proxy?.$modal.msgError('导出失败，请重试');
       console.error('导出错误:', error);
diff --git a/src/views/system/report/agingDetailed.vue b/src/views/system/report/agingDetailed.vue
index 0cb0c4c..f1511c1 100644
--- a/src/views/system/report/agingDetailed.vue
+++ b/src/views/system/report/agingDetailed.vue
@@ -8,23 +8,21 @@
             <div class="flex justify-between">
               <div>
                 <el-form-item label="小区" prop="villageId">
-                  <el-select v-model="queryParams.villageId" placeholder="请选择">
+                  <el-select @change="handleChangeVillage" v-model="queryParams.villageId" placeholder="请选择">
                     <el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
                   </el-select>
                 </el-form-item>
-                <el-form-item label="楼栋" prop="villageId">
-                  <el-select v-model="queryParams.villageId" placeholder="请选择">
-                    <el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
+                <el-form-item label="楼栋" prop="buildingId">
+                  <el-select v-model="queryParams.buildingId" placeholder="请选择">
+                    <el-option v-for="item in buildingList" :key="item.id" :label="item.buildingName" :value="item.id" />
                   </el-select>
                 </el-form-item>
-                <el-form-item label="房号" prop="villageId">
-                  <el-select v-model="queryParams.villageId" placeholder="请选择">
-                    <el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
-                  </el-select>
+                <el-form-item label="房号" prop="roomNo">
+                  <el-input v-model.trim="queryParams.roomNo" placeholder="请输入房号编号" />
                 </el-form-item>
-                <el-form-item label="欠费月数" prop="villageId">
-                  <el-select v-model="queryParams.villageId" placeholder="请选择">
-                    <el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
+                <el-form-item label="欠费月数" prop="arrearsMonths">
+                  <el-select v-model="queryParams.arrearsMonths" placeholder="请选择">
+                    <el-option v-for="item in arrearsMonthsList" :key="item.value" :label="item.label" :value="item.value" />
                   </el-select>
                 </el-form-item>
                 <el-form-item label="账龄区间" prop="agingRange">
@@ -47,7 +45,7 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="5">
-            <span>账龄分析汇总表</span>
+            <span>账龄分析明细表</span>
           </el-col>
           <el-col :span="18"></el-col>
           <el-col :span="1">
@@ -58,10 +56,10 @@
       <el-table :span-method="arraySpanMethod" v-loading="loading" border :data="AgingList">
         <el-table-column label="截至应收账期" align="center" prop="cutoffPeriod" />
         <el-table-column label="小区项目" align="center" prop="villageName" />
-        <el-table-column label="楼栋" align="center" prop="villageName" />
-        <el-table-column label="客户名称" align="center" prop="villageName" />
-        <el-table-column label="房号编号" align="center" prop="villageName" />
-        <el-table-column label="欠费月数" align="center" prop="houseTypeName" />
+        <el-table-column label="楼栋" align="center" prop="buildingName" />
+        <el-table-column label="客户名称" align="center" prop="customerName" />
+        <el-table-column label="房号编号" align="center" prop="roomNo" />
+        <el-table-column label="欠费月数" align="center" prop="arrearsMonthsLabel" />
         <el-table-column label="≤6个月" align="center" prop="amountLe6" />
         <el-table-column label="6个月-12个月" align="center" prop="amountM6To12" />
         <el-table-column label="1年-2年" align="center" prop="amountY1To2" />
@@ -79,15 +77,16 @@
 <script setup name="Arrears" lang="ts">
 import pagination from '@/components/Pagination/index.vue';
 import pageHeader from '@/components/Pageheader/index.vue';
-import { listHouseUseType } from '@/api/system/houseUse';
 import { getCommunitylistAPI } from '@/api/system/community';
-import { getAgingDetail, getAgingList } from '@/api/system/report/aging';
+import { getDetailList } from '@/api/system/report/aging';
 import { AgingSummary } from '@/api/system/report/aging/type';
 import type { TableColumnCtx } from 'element-plus';
 import { exportToExcel } from '@/utils/xlsx';
+import { getBuildinglistAPI, getVillageTree } from '@/api/system/house';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { com_report_age_list } = toRefs<any>(proxy?.useDict('com_report_age_list'));
+
 const AgingList = ref<AgingSummary[]>([]);
 const loading = ref(true);
 const showSearch = ref(true);
@@ -99,11 +98,11 @@ const data = reactive({
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-    periodBegin: '',
-    periodEnd: '',
-    villageId: '-1',
-    houseUseTypeId: '-1',
-    agingRange: []
+    villageId: '-1', // 小区
+    buildingId: '-1', // 楼栋id
+    roomNo: '', // 房号编号
+    arrearsMonths: '', // 欠费月数
+    agingRange: [] // 账龄区间
   }
 });
 interface SpanMethodProps {
@@ -113,13 +112,23 @@ interface SpanMethodProps {
   columnIndex: number;
 }
 
+const arrearsMonthsList = ref([]);
+function getAllArrearsMonths() {
+  arrearsMonthsList.value = Array.from({ length: 12 }, (_, i) => {
+    return {
+      value: i + 1,
+      label: `${i + 1}个月`
+    };
+  });
+}
+
 const arraySpanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
   if (rowIndex === AgingList.value.length - 1) {
     const rowspan = 6;
     if (columnIndex === 0) {
       return { rowspan: 1, colspan: rowspan };
     }
-    if (columnIndex <= rowspan) {
+    if (columnIndex < rowspan) {
       return { rowspan: 0, colspan: 0 };
     }
   }
@@ -143,6 +152,30 @@ function getAllVillage() {
   });
 }
 
+function handleChangeVillage(val: string) {
+  getAllBuilding(val);
+}
+
+const buildingList = ref([
+  {
+    id: '-1',
+    buildingName: '全部楼栋'
+  }
+]);
+function getAllBuilding(val: string) {
+  getBuildinglistAPI({
+    villageId: val
+  }).then((res) => {
+    buildingList.value = [
+      {
+        id: '-1',
+        buildingName: '全部楼栋'
+      },
+      ...res.data
+    ];
+  });
+}
+
 const getList = async () => {
   loading.value = true;
   const search = { ...queryParams.value };
@@ -152,7 +185,7 @@ const getList = async () => {
       search[key] = undefined;
     }
   });
-  getAgingList(search)
+  getDetailList(search)
     .then((res) => {
       AgingList.value = [...res.rows, res.summary];
       total.value = res.total;
@@ -188,7 +221,10 @@ const handleExport = () => {
       const columns: { label: string; prop: string }[] = [
         { label: '截至应收账期', prop: 'cutoffPeriod' },
         { label: '小区项目', prop: 'villageName' },
-        { label: '房屋类型', prop: 'houseTypeName' },
+        { label: '楼栋', prop: 'buildingName' },
+        { label: '客户名称', prop: 'buildingName' },
+        { label: '房号编号', prop: 'roomNo' },
+        { label: '欠费月数', prop: 'arrearsMonthsLabel' },
         { label: '≤6个月', prop: 'amountLe6' },
         { label: '6个月-12个月', prop: 'amountM6To12' },
         { label: '1年-2年', prop: 'amountY1To2' },
@@ -198,8 +234,7 @@ const handleExport = () => {
         { label: '5年以上', prop: 'amountOver5' },
         { label: '合计', prop: 'totalAmount' }
       ];
-      const mergeColumns = [0, 1, 2];
-      exportToExcel(AgingList.value, columns, `账龄分析汇总_${new Date().getTime()}`, mergeColumns);
+      exportToExcel(AgingList.value, columns, `账龄分析明细_${new Date().getTime()}`, arraySpanMethod);
     } catch (error) {
       proxy?.$modal.msgError('导出失败，请重试');
       console.error('导出错误:', error);
@@ -211,7 +246,7 @@ const handleExport = () => {
 
 onMounted(() => {
   getList();
-  handleQueryHouseUse();
+  getAllArrearsMonths();
   getAllVillage();
 });
 </script>
diff --git a/src/views/system/report/arrearsTrend.vue b/src/views/system/report/arrearsTrend.vue
new file mode 100644
index 0000000..5a6f334
--- /dev/null
+++ b/src/views/system/report/arrearsTrend.vue
@@ -0,0 +1,259 @@
+<template>
+  <div class="p-2 h-full flex flex-col">
+    <pageHeader></pageHeader>
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" @submit.prevent="handleQuery" :inline="true">
+            <div class="flex justify-between">
+              <div>
+                <el-form-item label="区域" prop="villageId">
+                  <el-select v-model="queryParams.villageId" placeholder="请选择">
+                    <el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="收费类型" prop="chargeTypeId">
+                  <el-select v-model="queryParams.chargeTypeId" placeholder="请选择">
+                    <el-option v-for="item in chargeTypeList" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="查询日期">
+                  <el-date-picker
+                    v-model="queryTime"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    @update:model-value="handleQueryTime"
+                    format="YYYY-MM"
+                    type="monthrange"
+                    value-format="YYYY-MM"
+                  />
+                </el-form-item>
+              </div>
+              <div>
+                <el-button type="primary" @click="handleQuery">查询</el-button>
+                <el-button @click="resetQuery">重置</el-button>
+              </div>
+            </div>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <el-card shadow="never" class="flex-1">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="5">
+            <span>应收欠费明细表</span>
+          </el-col>
+          <el-col :span="15"></el-col>
+          <el-col :span="3"> </el-col>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :data="chargeTrendList">
+        <el-table-column v-for="(item, index) in rows" :key="index" :label="item" align="center">
+          <template #default="scope">
+            <span>{{ scope.row[item] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="echartsBox" style="flex: 1">
+        <Echarts :options="chartConfig" />
+      </div>
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+  </div>
+</template>
+账龄
+<script setup name="Arrears" lang="ts">
+import pagination from '@/components/Pagination/index.vue';
+import pageHeader from '@/components/Pageheader/index.vue';
+import { getArrearsDetails } from '@/api/system/report/arrears/arrears';
+import { getCommunitylistAPI } from '@/api/system/community';
+import { OwnerArrearsDetailVo } from '@/api/system/report/arrears/type';
+import { getChargeTend } from '@/api/system/report/chargeTrend';
+import Echarts from '@/components/Echarts/index.vue';
+import type { EChartsOption } from 'echarts';
+import { listChargeType } from '@/api/system/ChargeType';
+import { getArrearsTend } from '@/api/system/report/arrearsTrend';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const loading = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const queryTime = ref([]);
+function handleQueryTime(val: string[]) {
+  queryParams.value.startTime = val[0];
+  queryParams.value.endTime = val[1];
+}
+const data = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    villageId: '-1',
+    startTime: '',
+    endTime: '',
+    chargeTypeId: '-1'
+  },
+  rule: []
+});
+
+const { queryParams } = toRefs(data);
+
+// 查询小区
+const villageList = ref([]);
+function getAllVillage() {
+  getCommunitylistAPI().then((res) => {
+    villageList.value = [
+      {
+        villageId: '-1',
+        villageName: '全部区域'
+      },
+      ...res.rows
+    ];
+  });
+}
+
+const chargeTrendList = ref([]);
+const rows = ref([]);
+
+const chargeTypeList = ref([]);
+function getChartTypeList() {
+  listChargeType().then((res) => {
+    chargeTypeList.value = [
+      {
+        id: '-1',
+        name: '全部收费类型'
+      },
+      ...res.rows
+    ];
+  });
+}
+
+/** 查询电抄记录列表 ╬╬╬╬*/
+const getList = async () => {
+  loading.value = true;
+  const search = { ...queryParams.value };
+  // 移除空字符串字段
+  Object.keys(search).forEach((key) => {
+    if (search[key] === '-1') {
+      search[key] = undefined;
+    }
+  });
+  rows.value = [];
+  getArrearsTend(search)
+    .then((res) => {
+      const obj = {};
+      res.data.forEach((item: { month: string; amount: string }) => {
+        const label = item.month.split('-')[1];
+        const key = `${label}月`;
+        rows.value.push(key);
+        obj[key] = item.amount;
+      });
+      chargeTrendList.value = [obj];
+      total.value = res.total;
+      handleChartsData();
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  queryParams.value = {
+    pageNum: 1,
+    pageSize: 10,
+    villageId: '-1',
+    startTime: '',
+    endTime: '',
+    chargeTypeId: '-1'
+  };
+
+  queryTime.value = [];
+  handleQuery();
+};
+
+const chartConfig = shallowRef<EChartsOption>({
+  grid: {
+    left: '1%',
+    right: '1%',
+    top: '10%',
+    bottom: '1%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category', // 建议明确指定类型
+    data: []
+  },
+  yAxis: {
+    type: 'value'
+  },
+  tooltip: {
+    trigger: 'axis'
+  },
+  series: [
+    {
+      data: [],
+      type: 'bar',
+      barWidth: '10%',
+      itemStyle: {
+        color: '#1a75ff'
+      },
+      label: {
+        show: true,
+        color: '#3f8afc',
+        position: 'top'
+      }
+    }
+  ]
+});
+
+function handleChartsData() {
+  const data = Object.entries(chargeTrendList.value[0]);
+  const x = data.map((item) => item[0]);
+  const y = data.map((item) => item[1]);
+  // 如果使用的是 ref，直接修改属性即可触发响应式
+  chartConfig.value = {
+    grid: chartConfig.value.grid,
+    yAxis: chartConfig.value.yAxis,
+    tooltip: chartConfig.value.tooltip,
+    xAxis: {
+      type: 'category',
+      data: x
+    },
+    series: [
+      {
+        ...chartConfig.value.series?.[0],
+        type: 'bar',
+        data: y
+      }
+    ]
+  } as EChartsOption;
+}
+
+onMounted(() => {
+  getList();
+  getAllVillage();
+  getChartTypeList();
+});
+</script>
+
+<style lang="scss" scoped>
+.echartsBox {
+  flex: 1;
+  margin-top: 30px;
+  height: 500px;
+}
+</style>
diff --git a/src/views/system/report/businessDailyReport.vue b/src/views/system/report/businessDailyReport.vue
new file mode 100644
index 0000000..0206065
--- /dev/null
+++ b/src/views/system/report/businessDailyReport.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="p-2 h-full flex flex-col">
+    <pageHeader></pageHeader>
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" @submit.prevent="handleQuery" :inline="true">
+            <el-form-item label="营业日期" prop="dateScope">
+              <el-select v-model="queryParams.dateScope" placeholder="请选择">
+                <el-option v-for="item in [...com_business_date]" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="小区" prop="villageId">
+              <el-select v-model="queryParams.villageId" placeholder="请选择">
+                <el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="小区" prop="villageId">
+              <el-button type="primary" @click="handleQuery">搜索</el-button>
+              <el-button @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+    <el-card shadow="never" class="flex-1">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="4">
+            <el-tabs @tab-change="handleTabClick" v-model="activeName" class="demo-tabs">
+              <el-tab-pane label="按小区统计" name="first"> </el-tab-pane>
+              <el-tab-pane label="按收费项目统计" name="fourth"></el-tab-pane>
+            </el-tabs>
+          </el-col>
+          <el-col :span="19"></el-col>
+          <el-col :span="1">
+            <el-button type="primary" @click="exportData">导出</el-button>
+          </el-col>
+        </el-row>
+      </template>
+      <el-table v-loading="loading" border :data="AgingList">
+        <el-table-column v-if="activeName === 'first'" label="小区名称" align="center" prop="villageName" />
+        <el-table-column v-else label="收费项目" align="center" prop="chargeItemName" />
+        <el-table-column v-for="(item, index) in rows" :key="index" :label="item.payTypeName" align="center">
+          <template #default="scope">
+            {{ scope.row.payAmounts[item.payType] }}
+          </template>
+        </el-table-column>
+        <el-table-column label="合计" align="center" prop="totalAmount" />
+      </el-table>
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+  </div>
+</template>
+
+<script setup name="Arrears" lang="ts">
+import pagination from '@/components/Pagination/index.vue';
+import pageHeader from '@/components/Pageheader/index.vue';
+import { getCommunitylistAPI } from '@/api/system/community';
+import type { TabPaneName } from 'element-plus';
+import { getBusinessDailyReport, getBusinessDailyReportChargeItem } from '@/api/system/report/businessDailyReport';
+import { RowsType } from '@/api/system/report/businessDailyReport/type';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { com_business_date } = toRefs<any>(proxy?.useDict('com_business_date'));
+const AgingList = ref<RowsType[]>([]);
+const loading = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+const activeName = ref<TabPaneName>('first');
+const queryFormRef = ref<ElFormInstance>();
+const data = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    dateScope: 'day',
+    villageId: '-1'
+  }
+});
+
+const { queryParams } = toRefs(data);
+
+const villageList = ref([]);
+function getAllVillage() {
+  getCommunitylistAPI().then((res) => {
+    villageList.value = [
+      {
+        villageId: '-1',
+        villageName: '全部小区'
+      },
+      ...res.rows
+    ];
+  });
+}
+
+const rows = ref([]);
+
+const getList = async () => {
+  loading.value = true;
+  const search = { ...queryParams.value };
+  // 移除空字符串字段
+  Object.keys(search).forEach((key) => {
+    if (search[key] === '-1') {
+      search[key] = undefined;
+    }
+  });
+
+  if (activeName.value === 'first') {
+    getBusinessDailyReport(search)
+      .then((res) => {
+        rows.value = res.payTypes;
+        if (res.rows.length > 0) {
+          AgingList.value = [...res.rows, res.summary];
+        }
+        total.value = res.total;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  } else {
+    getBusinessDailyReportChargeItem(search)
+      .then((res) => {
+        rows.value = res.payTypes;
+        if (res.rows.length > 0) {
+          AgingList.value = [...res.rows, res.summary];
+        }
+        total.value = res.total;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+};
+
+function handleTabClick(name: TabPaneName) {
+  activeName.value = name;
+  getList();
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 h*/
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+const exportData = () => {
+  const search = { ...queryParams.value };
+  // 移除空字符串字段
+  Object.keys(search).forEach((key) => {
+    if (search[key] === '-1') {
+      search[key] = undefined;
+    }
+  });
+  if (activeName.value === 'first') {
+    proxy?.download(
+      '/businessDailyReport/village/export',
+      {
+        ...search
+      },
+      `营业日报_按小区统计.xlsx`
+    );
+  } else {
+    proxy?.download(
+      '/businessDailyReport/chargeItem/export',
+      {
+        ...search
+      },
+      `营业日报_按收费项目统计.xlsx`
+    );
+  }
+};
+
+onMounted(() => {
+  getList();
+  getAllVillage();
+});
+</script>
+
+<style lang="scss" scoped>
+.el-table {
+  height: calc(100% - 80px);
+}
+.demo-tabs {
+  width: 230px;
+}
+</style>
diff --git a/src/views/system/report/chargeTrend.vue b/src/views/system/report/chargeTrend.vue
new file mode 100644
index 0000000..cea7007
--- /dev/null
+++ b/src/views/system/report/chargeTrend.vue
@@ -0,0 +1,260 @@
+<template>
+  <div class="p-2 h-full flex flex-col">
+    <pageHeader></pageHeader>
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" @submit.prevent="handleQuery" :inline="true">
+            <div class="flex justify-between">
+              <div>
+                <el-form-item label="区域" prop="villageId">
+                  <el-select v-model="queryParams.villageId" placeholder="请选择">
+                    <el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="收费类型" prop="chargeTypeId">
+                  <el-select v-model="queryParams.chargeTypeId" placeholder="请选择">
+                    <el-option v-for="item in chargeTypeList" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="查询日期">
+                  <el-date-picker
+                    v-model="queryTime"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    @update:model-value="handleQueryTime"
+                    format="YYYY-MM"
+                    type="monthrange"
+                    value-format="YYYY-MM"
+                    placeholder="请选择日期"
+                  />
+                </el-form-item>
+              </div>
+              <div>
+                <el-button type="primary" @click="handleQuery">查询</el-button>
+                <el-button @click="resetQuery">重置</el-button>
+              </div>
+            </div>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <el-card shadow="never" class="flex-1">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="5">
+            <span>应收欠费明细表</span>
+          </el-col>
+          <el-col :span="15"></el-col>
+          <el-col :span="3"> </el-col>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :data="chargeTrendList">
+        <el-table-column v-for="(item, index) in rows" :key="index" :label="item" align="center">
+          <template #default="scope">
+            <span>{{ scope.row[item] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="echartsBox" style="flex: 1">
+        <Echarts :options="chartConfig" />
+      </div>
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+  </div>
+</template>
+账龄
+<script setup name="Arrears" lang="ts">
+import pagination from '@/components/Pagination/index.vue';
+import pageHeader from '@/components/Pageheader/index.vue';
+import { getArrearsDetails } from '@/api/system/report/arrears/arrears';
+import { getCommunitylistAPI } from '@/api/system/community';
+import { OwnerArrearsDetailVo } from '@/api/system/report/arrears/type';
+import { getChargeTend } from '@/api/system/report/chargeTrend';
+import Echarts from '@/components/Echarts/index.vue';
+import type { EChartsOption } from 'echarts';
+import { listChargeType } from '@/api/system/ChargeType';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const loading = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const queryTime = ref([]);
+function handleQueryTime(val: string[]) {
+  queryParams.value.startTime = val[0];
+  queryParams.value.endTime = val[1];
+}
+const data = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    villageId: '-1',
+    startTime: '',
+    endTime: '',
+    chargeTypeId: '-1'
+  },
+  rule: []
+});
+
+const { queryParams } = toRefs(data);
+
+// 查询小区
+const villageList = ref([]);
+function getAllVillage() {
+  getCommunitylistAPI().then((res) => {
+    villageList.value = [
+      {
+        villageId: '-1',
+        villageName: '全部区域'
+      },
+      ...res.rows
+    ];
+  });
+}
+
+const chargeTrendList = ref([]);
+const rows = ref([]);
+
+const chargeTypeList = ref([]);
+function getChartTypeList() {
+  listChargeType().then((res) => {
+    chargeTypeList.value = [
+      {
+        id: '-1',
+        name: '全部收费类型'
+      },
+      ...res.rows
+    ];
+  });
+}
+
+/** 查询电抄记录列表 */
+const getList = async () => {
+  loading.value = true;
+  const search = { ...queryParams.value };
+  // 移除空字符串字段
+  Object.keys(search).forEach((key) => {
+    if (search[key] === '-1') {
+      search[key] = undefined;
+    }
+  });
+  rows.value = [];
+  getChargeTend(search)
+    .then((res) => {
+      const obj = {};
+      res.data.forEach((item) => {
+        const label = item.month.split('-')[1];
+        const key = `${label}月`;
+        rows.value.push(key);
+        obj[key] = item.amount;
+      });
+      chargeTrendList.value = [obj];
+      console.log(chargeTrendList);
+      total.value = res.total;
+      handleChartsData();
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  queryParams.value = {
+    pageNum: 1,
+    pageSize: 10,
+    villageId: '-1',
+    startTime: '',
+    endTime: '',
+    chargeTypeId: '-1'
+  };
+
+  queryTime.value = [];
+  handleQuery();
+};
+
+const chartConfig = shallowRef<EChartsOption>({
+  grid: {
+    left: '1%',
+    right: '1%',
+    top: '10%',
+    bottom: '1%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category', // 建议明确指定类型
+    data: []
+  },
+  yAxis: {
+    type: 'value'
+  },
+  tooltip: {
+    trigger: 'axis'
+  },
+  series: [
+    {
+      data: [],
+      type: 'bar',
+      barWidth: '10%',
+      itemStyle: {
+        color: '#1a75ff'
+      },
+      label: {
+        show: true,
+        color: '#3f8afc',
+        position: 'top'
+      }
+    }
+  ]
+});
+
+function handleChartsData() {
+  const data = Object.entries(chargeTrendList.value[0]);
+  const x = data.map((item) => item[0]);
+  const y = data.map((item) => item[1]);
+  // 如果使用的是 ref，直接修改属性即可触发响应式
+  chartConfig.value = {
+    grid: chartConfig.value.grid,
+    yAxis: chartConfig.value.yAxis,
+    tooltip: chartConfig.value.tooltip,
+    xAxis: {
+      type: 'category',
+      data: x
+    },
+    series: [
+      {
+        ...chartConfig.value.series?.[0],
+        type: 'bar',
+        data: y
+      }
+    ]
+  } as EChartsOption;
+}
+
+onMounted(() => {
+  getList();
+  getAllVillage();
+  getChartTypeList();
+});
+</script>
+
+<style lang="scss" scoped>
+.echartsBox {
+  flex: 1;
+  margin-top: 30px;
+  height: 500px;
+}
+</style>
diff --git a/src/views/system/report/paidInExpenses.vue b/src/views/system/report/paidInExpenses.vue
new file mode 100644
index 0000000..7d465bb
--- /dev/null
+++ b/src/views/system/report/paidInExpenses.vue
@@ -0,0 +1,238 @@
+<template>
+  <div class="p-2 h-full flex flex-col">
+    <pageHeader></pageHeader>
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" @submit.prevent="handleQuery" :inline="true">
+            <div class="flex justify-between">
+              <div>
+                <el-form-item label="项目" prop="chargeItemId">
+                  <el-select v-model="queryParams.villageId" placeholder="请选择">
+                    <el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="收费类型" prop="chargeTypeId">
+                  <el-select v-model="queryParams.chargeTypeId" placeholder="请选择">
+                    <el-option v-for="item in chargeTypesList" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="查询日期" prop="villageId">
+                  <el-date-picker
+                    v-model="queryTime"
+                    type="daterange"
+                    @update:model-value="handleQueryTime"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    format="YYYY-MM-DD"
+                    value-format="YYYY-MM-DD"
+                  />
+                </el-form-item>
+              </div>
+              <div>
+                <el-button type="primary" @click="handleQuery">查询</el-button>
+                <el-button @click="resetQuery">重置</el-button>
+              </div>
+            </div>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <el-card shadow="never" class="flex-1">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="5">
+            <span>应收物业费详情 </span>
+          </el-col>
+          <el-col :span="18"></el-col>
+          <el-col :span="1">
+            <el-button type="primary" @click="handleExport">导出</el-button>
+          </el-col>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :data="ArrearsDetailList">
+        <el-table-column label="收费所属期" align="center" prop="name" />
+        <el-table-column label="序号" align="center" prop="sequence" />
+        <template v-for="item in rowChargeTypesList" :key="item">
+          {{ item }}
+          <el-table-column :label="item" align="center">
+            <template #default="scope">
+              {{ scope.row.amounts[item] }}
+            </template>
+          </el-table-column>
+        </template>
+        <el-table-column label="合计" align="center" prop="total" />
+      </el-table>
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+  </div>
+</template>
+账龄
+<script setup lang="ts">
+import pagination from '@/components/Pagination/index.vue';
+import pageHeader from '@/components/Pageheader/index.vue';
+import { getCommunitylistAPI } from '@/api/system/community';
+import { validator } from '@/utils/Reg';
+import { getPaidInExpensesReceivableList } from '@/api/system/report/paidInExpensesReceivable';
+import { Detail } from '@/api/system/report/paidInExpensesReceivable/type';
+import { listChargeType } from '@/api/system/ChargeType';
+import { getPaidInExpensesList } from '@/api/system/report/paidInExpenses';
+import { ColumnConfig, exportToExcel } from '@/utils/xlsx';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const ArrearsDetailList = ref<Detail[]>([]);
+const loading = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const queryTime = ref([]);
+function handleQueryTime(val: string[]) {
+  queryParams.value.startTime = val[0];
+  queryParams.value.endTime = val[1];
+}
+const data = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    villageId: '-1',
+    startTime: '',
+    endTime: '',
+    chargeTypeId: '-1'
+  },
+  rule: [
+    {
+      validator: (_: any, value: string, callback: (arg0?: Error) => any) => {
+        if (value === '' || value === undefined || value === null) {
+          return callback();
+        }
+        if (!validator(value, 'fullFilterReg')) {
+          return callback(new Error('请输入正确的房号'));
+        }
+      }
+    }
+  ]
+});
+
+const { queryParams } = toRefs(data);
+
+// 查询小区
+const villageList = ref([]);
+function getAllVillage() {
+  getCommunitylistAPI().then((res) => {
+    villageList.value = [
+      {
+        villageId: '-1',
+        villageName: '全部区域'
+      },
+      ...res.rows
+    ];
+  });
+}
+
+// 收费类型
+const chargeTypesList = ref([]);
+function getChargeTypeList() {
+  listChargeType().then((res) => {
+    chargeTypesList.value = [
+      {
+        name: '全部类型',
+        id: '-1'
+      },
+      ...res.rows
+    ];
+  });
+}
+
+const rowChargeTypesList = ref([]);
+
+/** 查询电抄记录列表 */
+const getList = async () => {
+  loading.value = true;
+  const search = { ...queryParams.value };
+  // 移除空字符串字段
+  Object.keys(search).forEach((key) => {
+    if (search[key] === '-1') {
+      search[key] = undefined;
+    }
+  });
+  getPaidInExpensesList(search)
+    .then((res) => {
+      console.log(res);
+      ArrearsDetailList.value = [res.data.total, ...res.data.details];
+      rowChargeTypesList.value = res.data.chargeTypes;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+/** 导出Excel */
+const handleExport = () => {
+  if (ArrearsDetailList.value.length === 0) {
+    proxy?.$modal.msgWarning('没有可导出的数据');
+    return;
+  }
+
+  // 显示加载提示
+  loading.value = true;
+  // 使用 setTimeout 让出主线程，避免阻塞UI
+  setTimeout(() => {
+    try {
+      const columns: ColumnConfig[] = [
+        {
+          label: '收费所属期',
+          prop: 'name'
+        },
+        {
+          label: '序号',
+          prop: 'sequence'
+        },
+        ...rowChargeTypesList.value.map((item) => {
+          return {
+            label: item,
+            prop: `amounts.${item}`
+          };
+        }),
+        {
+          label: '合计',
+          prop: 'total'
+        }
+      ];
+      exportToExcel(ArrearsDetailList.value, columns, `实收物业费详情_${new Date().getTime()}`);
+    } catch (error) {
+      proxy?.$modal.msgError('导出失败，请重试');
+      console.error('导出错误:', error);
+    } finally {
+      loading.value = false;
+    }
+  }, 100);
+};
+
+onMounted(() => {
+  getList();
+  getChargeTypeList();
+  getAllVillage();
+});
+</script>
+
+<style lang="scss" scoped>
+.el-table {
+  height: calc(100% - 80px);
+}
+</style>
diff --git a/src/views/system/report/paidInExpensesReceivable.vue b/src/views/system/report/paidInExpensesReceivable.vue
new file mode 100644
index 0000000..2002fe6
--- /dev/null
+++ b/src/views/system/report/paidInExpensesReceivable.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="p-2 h-full flex flex-col">
+    <pageHeader></pageHeader>
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" @submit.prevent="handleQuery" :inline="true">
+            <div class="flex justify-between">
+              <div>
+                <el-form-item label="项目" prop="chargeItemId">
+                  <el-select v-model="queryParams.villageId" placeholder="请选择">
+                    <el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="收费类型" prop="chargeTypeId">
+                  <el-select v-model="queryParams.chargeTypeId" placeholder="请选择">
+                    <el-option v-for="item in chargeTypesList" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="查询日期" prop="villageId">
+                  <el-date-picker
+                    v-model="queryTime"
+                    type="daterange"
+                    @update:model-value="handleQueryTime"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    format="YYYY-MM-DD"
+                    value-format="YYYY-MM-DD"
+                  />
+                </el-form-item>
+              </div>
+              <div>
+                <el-button type="primary" @click="handleQuery">查询</el-button>
+                <el-button @click="resetQuery">重置</el-button>
+              </div>
+            </div>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <el-card shadow="never" class="flex-1">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="5">
+            <span>应收物业费详情 </span>
+          </el-col>
+          <el-col :span="18"></el-col>
+          <el-col :span="1">
+            <el-button type="primary" @click="handleExport">导出</el-button>
+          </el-col>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :data="ArrearsDetailList">
+        <el-table-column label="收费所属期" align="center" prop="name" />
+        <el-table-column label="序号" align="center" prop="sequence" />
+        <template v-for="item in rowChargeTypesList" :key="item">
+          {{ item }}
+          <el-table-column :label="item" align="center">
+            <template #default="scope">
+              {{ scope.row.amounts[item] }}
+            </template>
+          </el-table-column>
+        </template>
+        <el-table-column label="合计" align="center" prop="total" />
+      </el-table>
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+  </div>
+</template>
+账龄
+<script setup lang="ts">
+import pagination from '@/components/Pagination/index.vue';
+import pageHeader from '@/components/Pageheader/index.vue';
+import { getCommunitylistAPI } from '@/api/system/community';
+import { validator } from '@/utils/Reg';
+import { getPaidInExpensesReceivableList } from '@/api/system/report/paidInExpensesReceivable';
+import { Detail } from '@/api/system/report/paidInExpensesReceivable/type';
+import { listChargeType } from '@/api/system/ChargeType';
+import { ColumnConfig, exportToExcel } from '@/utils/xlsx';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const ArrearsDetailList = ref<Detail[]>([]);
+const loading = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const queryTime = ref([]);
+function handleQueryTime(val: string[]) {
+  queryParams.value.startTime = val[0];
+  queryParams.value.endTime = val[1];
+}
+const data = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    villageId: '-1',
+    startTime: '',
+    endTime: '',
+    chargeTypeId: '-1'
+  },
+  rule: [
+    {
+      validator: (_: any, value: string, callback: (arg0?: Error) => any) => {
+        if (value === '' || value === undefined || value === null) {
+          return callback();
+        }
+        if (!validator(value, 'fullFilterReg')) {
+          return callback(new Error('请输入正确的房号'));
+        }
+      }
+    }
+  ]
+});
+
+const { queryParams } = toRefs(data);
+
+// 查询小区
+const villageList = ref([]);
+function getAllVillage() {
+  getCommunitylistAPI().then((res) => {
+    villageList.value = [
+      {
+        villageId: '-1',
+        villageName: '全部区域'
+      },
+      ...res.rows
+    ];
+  });
+}
+
+// 收费类型
+const chargeTypesList = ref([]);
+function getChargeTypeList() {
+  listChargeType().then((res) => {
+    chargeTypesList.value = [
+      {
+        name: '全部类型',
+        id: '-1'
+      },
+      ...res.rows
+    ];
+  });
+}
+
+const rowChargeTypesList = ref([]);
+
+/** 查询电抄记录列表 */
+const getList = async () => {
+  loading.value = true;
+  const search = { ...queryParams.value };
+  // 移除空字符串字段
+  Object.keys(search).forEach((key) => {
+    if (search[key] === '-1') {
+      search[key] = undefined;
+    }
+  });
+  getPaidInExpensesReceivableList(search)
+    .then((res) => {
+      console.log(res);
+      ArrearsDetailList.value = [res.data.total, ...res.data.details];
+      rowChargeTypesList.value = res.data.chargeTypes;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+/** 导出Excel */
+const handleExport = () => {
+  if (ArrearsDetailList.value.length === 0) {
+    proxy?.$modal.msgWarning('没有可导出的数据');
+    return;
+  }
+
+  // 显示加载提示
+  loading.value = true;
+  // 使用 setTimeout 让出主线程，避免阻塞UI
+  setTimeout(() => {
+    try {
+      const columns: ColumnConfig[] = [
+        {
+          label: '收费所属期',
+          prop: 'name'
+        },
+        {
+          label: '序号',
+          prop: 'sequence'
+        },
+        ...rowChargeTypesList.value.map((item) => {
+          return {
+            label: item,
+            prop: `amounts.${item}`
+          };
+        }),
+        {
+          label: '合计',
+          prop: 'total'
+        }
+      ];
+      exportToExcel(ArrearsDetailList.value, columns, `应收物业费详情_${new Date().getTime()}`);
+    } catch (error) {
+      proxy?.$modal.msgError('导出失败，请重试');
+      console.error('导出错误:', error);
+    } finally {
+      loading.value = false;
+    }
+  }, 100);
+};
+onMounted(() => {
+  getList();
+  getChargeTypeList();
+  getAllVillage();
+});
+</script>
+
+<style lang="scss" scoped>
+.el-table {
+  height: calc(100% - 80px);
+}
+</style>