diff --git a/src/api/report/dataReportApi.js b/src/api/report/dataReportApi.js
new file mode 100644
index 0000000..cdfb49d
--- /dev/null
+++ b/src/api/report/dataReportApi.js
@@ -0,0 +1,241 @@
+import request from '@/utils/request'
+
+// 查询费用统计数据
+export function queryFeeDataReport(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataReport.queryFeeDataReport',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询工单统计数据
+export function queryOrderDataReport(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataReport.queryOrderDataReport',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询出入统计数据
+export function queryInoutDataReport(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataReport.queryInoutDataReport',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询其他统计数据
+export function queryOthersDataReport(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataReport.queryOthersDataReport',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询实收统计数据
+export function queryReceivedStatistics(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataReport.queryReceivedStatistics',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询实收明细统计数据
+export function queryReceivedDetailStatistics(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataReport.queryReceivedDetailStatistics',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询收款方式统计数据
+export function queryReceivedWayStatistics(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataReport.queryReceivedWayStatistics',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询欠费统计数据
+export function queryOweStatistics(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataReport.queryOweStatistics',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询欠费明细统计数据
+export function queryOweDetailStatistics(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataReport.queryOweDetailStatistics',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询收缴情况统计数据
+export function queryDataReportFeeStatistics(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataReport.queryDataReportFeeStatistics',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询月实收明细数据
+export function queryMonthReceivedDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataReport.queryMonthReceivedDetail',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询月欠费明细数据
+export function queryMonthOweDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/dataReport.queryMonthOweDetail',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询楼栋列表
+export function queryFloors(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/floor.queryFloors',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询我入驻的小区列表
+export function listMyEnteredCommunitys(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/community.listMyEnteredCommunitys',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 导出数据
+export function exportData(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/export.exportData',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/report/feeRemindApi.js b/src/api/report/feeRemindApi.js
new file mode 100644
index 0000000..c956bad
--- /dev/null
+++ b/src/api/report/feeRemindApi.js
@@ -0,0 +1,81 @@
+import request from '@/utils/request'
+
+// 查询预缴费提醒列表
+export function queryPrePayment(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportFeeMonthStatistics.queryPrePayment',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询到期提醒列表
+export function queryDeadlineFee(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportFeeMonthStatistics.queryDeadlineFee',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 导出数据
+export function exportData(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/export.exportData',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询费用项列表
+export function listFeeConfigs(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeConfig.listFeeConfigs',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询已入驻小区列表
+export function listMyEnteredCommunitys(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/community.listMyEnteredCommunitys',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/report/reportFeeDetailApi.js b/src/api/report/reportFeeDetailApi.js
new file mode 100644
index 0000000..9ca7901
--- /dev/null
+++ b/src/api/report/reportFeeDetailApi.js
@@ -0,0 +1,156 @@
+import request from '@/utils/request'
+
+// 查询房屋费用明细
+export function queryReportFeeDetailRoom(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportFeeMonthStatistics.queryReportFeeDetailRoom',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve({
+        data: res.data,
+        total: res.total
+      })
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询业主费用明细
+export function queryReportFeeDetailOwner(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportFeeMonthStatistics.queryReportFeeDetailOwner',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve({
+        data: res.data,
+        total: res.total
+      })
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询合同费用明细
+export function queryReportFeeDetailContract(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportFeeMonthStatistics.queryReportFeeDetailContract',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve({
+        data: res.data,
+        total: res.total
+      })
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询车辆费用明细
+export function queryReportFeeDetailCar(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportFeeMonthStatistics.queryReportFeeDetailCar',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve({
+        data: res.data,
+        total: res.total
+      })
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 导出房屋费用明细
+export function exportReportFeeDetailRoom(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/export.exportData',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 导出业主费用明细
+export function exportReportFeeDetailOwner(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/export.exportData',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 导出合同费用明细
+export function exportReportFeeDetailContract(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/export.exportData',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 导出车辆费用明细
+export function exportReportFeeDetailCar(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/export.exportData',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+export function loadStaffCommunitys(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/community.listMyEnteredCommunitys',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/report/reportFeeSummaryApi.js b/src/api/report/reportFeeSummaryApi.js
new file mode 100644
index 0000000..7c3622c
--- /dev/null
+++ b/src/api/report/reportFeeSummaryApi.js
@@ -0,0 +1,137 @@
+import request from '@/utils/request'
+
+/**
+ * 查询费用汇总数据
+ * @param {Object} params 查询参数
+ */
+export function queryReportFeeSummary(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportFeeMonthStatistics.queryReportFeeSummary',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 查询楼栋费用汇总数据
+ * @param {Object} params 查询参数
+ */
+export function queryReportFloorFeeSummary(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportFeeMonthStatistics.queryReportFloorFeeSummary',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 查询费用项汇总数据
+ * @param {Object} params 查询参数
+ */
+export function queryReportConfigFeeSummary(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportFeeMonthStatistics.queryReportConfigFeeSummary',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 导出数据
+ * @param {Object} params 导出参数
+ */
+export function exportData(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/export.exportData',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 查询楼栋列表
+ * @param {Object} params 查询参数
+ */
+export function queryFloors(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/floor.queryFloors',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 查询费用配置列表
+ * @param {Object} params 查询参数
+ */
+export function queryFeeConfigs(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeConfig.listFeeConfigs',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 查询用户关联的小区列表
+ */
+export function queryCommunitys() {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/community.listMyEnteredCommunitys',
+      method: 'get',
+      params: {
+        _uid: '123mlkdinkldldijdhuudjdjkkd',
+        page: 1,
+        row: 100
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/components/report/DataMonthOweStatistics.vue b/src/components/report/DataMonthOweStatistics.vue
new file mode 100644
index 0000000..3e7e842
--- /dev/null
+++ b/src/components/report/DataMonthOweStatistics.vue
@@ -0,0 +1,245 @@
+<template>
+  <div class="margin-top">
+    <el-row>
+      <el-col :span="3" class="padding-r-0">
+        <el-card class="border-radius">
+          <div class="treeview attendance-staff" style="height: 650px;">
+            <ul class="list-group text-center border-radius">
+              <li v-for="(item, index) in dataMonthOweStatisticsInfo.feeTypeCds" :key="index"
+                class="list-group-item node-orgTree"
+                :class="{ 'vc-node-selected': dataMonthOweStatisticsInfo.feeTypeCd === item.statusCd }"
+                @click="_switchMonthOweStatisticsFeeTypeCd(item.statusCd)">
+                {{ item.name }}
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="21">
+        <el-row>
+          <el-col :span="4">
+            <el-select v-model="dataMonthOweStatisticsInfo.floorId" :placeholder="$t('dataReport.selectBuilding')"
+              clearable style="width: 100%">
+              <el-option v-for="(item, index) in dataMonthOweStatisticsInfo.floors" :key="index" :label="item.floorNum"
+                :value="item.floorId" />
+            </el-select>
+          </el-col>
+          <el-col :span="4">
+            <el-date-picker v-model="dataMonthOweStatisticsInfo.feeStartDate" type="date"
+              :placeholder="$t('dataReport.feeStartDate')" style="width: 100%" />
+          </el-col>
+          <el-col :span="4">
+            <el-date-picker v-model="dataMonthOweStatisticsInfo.feeEndDate" type="date"
+              :placeholder="$t('dataReport.feeEndDate')" style="width: 100%" />
+          </el-col>
+          <el-col :span="4">
+            <el-button type="primary" size="small" @click="_qureyDataMonthOweStatistics">
+              <i class="el-icon-search"></i>
+              {{ $t('dataReport.search') }}
+            </el-button>
+          </el-col>
+          <el-col :span="8" class="text-right">
+            <el-button type="primary" size="small" @click="_exportReportMonthOweFeeExcel">
+              <i class="el-icon-download"></i>
+              <span>{{ $t('dataReport.export') }}</span>
+            </el-button>
+          </el-col>
+        </el-row>
+
+        <div class="margin-top">
+          <el-table :data="dataMonthOweStatisticsInfo.fees" border style="width: 100%">
+            <el-table-column prop="objName" :label="$t('dataReport.room')" align="center" />
+            <el-table-column :label="$t('dataReport.owner')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.ownerName }}({{ scope.row.link }})
+              </template>
+            </el-table-column>
+            <el-table-column prop="feeName" :label="$t('dataReport.feeName')" align="center" />
+            <el-table-column prop="curYearMonth" :label="$t('dataReport.owePeriod')" align="center" />
+            <el-table-column prop="receivableAmount" :label="$t('dataReport.oweAmount')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.receivableAmount || 0 }}
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <el-row class="margin-top">
+            <el-col :span="8">
+              <span>{{ $t('dataReport.totalOwe') }}：</span>
+              <span>{{ dataMonthOweStatisticsInfo.feeAmount }}</span>
+            </el-col>
+            <el-col :span="16" class="text-right">
+              <el-pagination :current-page.sync="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+                :total="page.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+                @current-change="handleCurrentChange" />
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getDict } from '@/api/community/communityApi'
+import { queryMonthOweDetail, exportData, queryFloors } from '@/api/report/dataReportApi'
+
+export default {
+  name: 'DataMonthOweStatistics',
+
+  data() {
+    return {
+      dataMonthOweStatisticsInfo: {
+        fees: [],
+        feeTypeCds: [],
+        floors: [],
+        floorId: '',
+        feeStartDate: '',
+        feeEndDate: '',
+        feeTypeCd: '',
+        feeAmount: '0'
+      },
+      startDate: '',
+      endDate: '',
+      communityId: '',
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this._initMethod()
+  },
+  methods: {
+    open(param){
+      this.startDate = param.startDate
+      this.endDate = param.endDate
+      this.communityId = param.communityId
+      this._loadMonthOweFloors()
+    },
+    async _initMethod() {
+      try {
+        const data = await getDict('pay_fee_config', 'fee_type_cd_show')
+        this.dataMonthOweStatisticsInfo.feeTypeCds = data
+        this.dataMonthOweStatisticsInfo.feeTypeCd = data[0].statusCd
+        this.dataMonthOweStatisticsInfo.feeStartDate = this.startDate
+        this.dataMonthOweStatisticsInfo.feeEndDate = this.endDate
+      } catch (error) {
+        console.error('Failed to load dictionary:', error)
+      }
+    },
+    async _loadMonthOweFloors() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.communityId
+        }
+        const { apiFloorDataVoList } = await queryFloors(params)
+        this.dataMonthOweStatisticsInfo.floors = apiFloorDataVoList
+      } catch (error) {
+        console.error('Failed to load floors:', error)
+      }
+    },
+    async _loadDataMonthOweStatisticsData() {
+      try {
+        const params = {
+          page: this.page.current,
+          row: this.page.size,
+          communityId: this.communityId,
+          feeStartDate: this.dataMonthOweStatisticsInfo.feeStartDate,
+          feeEndDate: this.dataMonthOweStatisticsInfo.feeEndDate,
+          feeTypeCd: this.dataMonthOweStatisticsInfo.feeTypeCd,
+          floorId: this.dataMonthOweStatisticsInfo.floorId
+        }
+        const { data, records, sumTotal } = await queryMonthOweDetail(params)
+        this.dataMonthOweStatisticsInfo.fees = data
+        this.page.total = records
+        this.dataMonthOweStatisticsInfo.feeAmount = sumTotal
+      } catch (error) {
+        console.error('Failed to load data:', error)
+      }
+    },
+    async _exportReportMonthOweFeeExcel() {
+      try {
+        const params = {
+          communityId: this.communityId,
+          feeStartDate: this.dataMonthOweStatisticsInfo.feeStartDate,
+          feeEndDate: this.dataMonthOweStatisticsInfo.feeEndDate,
+          feeTypeCd: this.dataMonthOweStatisticsInfo.feeTypeCd,
+          floorId: this.dataMonthOweStatisticsInfo.floorId,
+          pagePath: 'dataMonthOweStatistics'
+        }
+        const res = await exportData(params)
+        this.$message.success(res.msg)
+        if (res.code === 0) {
+          this.$router.push('/pages/property/downloadTempFile?tab=下载中心')
+        }
+      } catch (error) {
+        console.error('Export failed:', error)
+      }
+    },
+    _qureyDataMonthOweStatistics() {
+      this.page.current = 1
+      this._loadDataMonthOweStatisticsData()
+    },
+    _switchMonthOweStatisticsFeeTypeCd(_feeTypeCd) {
+      this.dataMonthOweStatisticsInfo.feeTypeCd = _feeTypeCd
+      this._loadDataMonthOweStatisticsData()
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._loadDataMonthOweStatisticsData()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this._loadDataMonthOweStatisticsData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.padding-r-0 {
+  padding-right: 0;
+}
+
+.border-radius {
+  border-radius: 4px;
+}
+
+.list-group {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.list-group-item {
+  padding: 10px;
+  cursor: pointer;
+  border-bottom: 1px solid #eee;
+}
+
+.list-group-item:hover {
+  background-color: #f5f5f5;
+}
+
+.vc-node-selected {
+  background-color: #409EFF;
+  color: white;
+}
+
+.treeview {
+  overflow-y: auto;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/DataMonthReceivedStatistics.vue b/src/components/report/DataMonthReceivedStatistics.vue
new file mode 100644
index 0000000..f70afc1
--- /dev/null
+++ b/src/components/report/DataMonthReceivedStatistics.vue
@@ -0,0 +1,247 @@
+<template>
+  <div class="margin-top">
+    <el-row>
+      <el-col :span="3" class="padding-r-0">
+        <el-card class="border-radius">
+          <div class="treeview attendance-staff" style="height: 650px;">
+            <ul class="list-group text-center border-radius">
+              <li v-for="(item, index) in dataMonthReceivedStatisticsInfo.feeTypeCds" :key="index"
+                class="list-group-item node-orgTree"
+                :class="{ 'vc-node-selected': dataMonthReceivedStatisticsInfo.feeTypeCd === item.statusCd }"
+                @click="switchMonthReceivedStatisticsFeeTypeCd(item.statusCd)">
+                {{ item.name }}
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="21">
+        <el-row>
+          <el-col :span="4">
+            <el-select v-model="dataMonthReceivedStatisticsInfo.floorId" :placeholder="$t('dataReport.selectBuilding')"
+              clearable style="width: 100%">
+              <el-option v-for="(item, index) in dataMonthReceivedStatisticsInfo.floors" :key="index"
+                :label="item.floorNum" :value="item.floorId" />
+            </el-select>
+          </el-col>
+          <el-col :span="4">
+            <el-date-picker v-model="dataMonthReceivedStatisticsInfo.feeStartDate" type="date"
+              :placeholder="$t('dataReport.feeStartDate')" style="width: 100%" />
+          </el-col>
+          <el-col :span="4">
+            <el-date-picker v-model="dataMonthReceivedStatisticsInfo.feeEndDate" type="date"
+              :placeholder="$t('dataReport.feeEndDate')" style="width: 100%" />
+          </el-col>
+          <el-col :span="4">
+            <el-button type="primary" size="small" @click="_qureyDataMonthReceivedStatistics">
+              <i class="el-icon-search"></i>
+              {{ $t('dataReport.search') }}
+            </el-button>
+          </el-col>
+          <el-col :span="8" class="text-right">
+            <el-button type="primary" size="small" @click="_exportReportMonthReceivedFeeExcel">
+              <i class="el-icon-download"></i>
+              <span>{{ $t('dataReport.export') }}</span>
+            </el-button>
+          </el-col>
+        </el-row>
+
+        <div class="margin-top">
+          <el-table :data="dataMonthReceivedStatisticsInfo.fees" border style="width: 100%">
+            <el-table-column prop="objName" :label="$t('dataReport.room')" align="center" />
+            <el-table-column :label="$t('dataReport.owner')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.ownerName }}({{ scope.row.link }})
+              </template>
+            </el-table-column>
+            <el-table-column prop="receivedAmount" :label="$t('dataReport.receivedAmount')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.receivedAmount || 0 }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="feeName" :label="$t('dataReport.feeName')" align="center" />
+            <el-table-column prop="curYearMonth" :label="$t('dataReport.receivedPeriod')" align="center" />
+            <el-table-column prop="cashierName" :label="$t('dataReport.cashier')" align="center" />
+            <el-table-column prop="createTime" :label="$t('dataReport.paymentTime')" align="center" />
+          </el-table>
+
+          <el-row class="margin-top">
+            <el-col :span="8">
+              <span>{{ $t('dataReport.totalReceived') }}：</span>
+              <span>{{ dataMonthReceivedStatisticsInfo.feeAmount }}</span>
+            </el-col>
+            <el-col :span="16" class="text-right">
+              <el-pagination :current-page.sync="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+                :total="page.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+                @current-change="handleCurrentChange" />
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getDict } from '@/api/community/communityApi'
+import { queryMonthReceivedDetail, exportData, queryFloors } from '@/api/report/dataReportApi'
+
+export default {
+  name: 'DataMonthReceivedStatistics',
+
+  data() {
+    return {
+      dataMonthReceivedStatisticsInfo: {
+        fees: [],
+        feeTypeCds: [],
+        floors: [],
+        floorId: '',
+        feeStartDate: '',
+        feeEndDate: '',
+        feeTypeCd: '',
+        feeAmount: '0'
+      },
+      startDate: '',
+      endDate: '',
+      communityId: '',
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this._initMethod()
+  },
+  methods: {
+    open(param){
+      this.startDate = param.startDate
+      this.endDate = param.endDate
+      this.communityId = param.communityId
+      this._loadMonthReceivedFloors()
+    },
+    async _initMethod() {
+      try {
+        const data = await getDict('pay_fee_config', 'fee_type_cd_show')
+        this.dataMonthReceivedStatisticsInfo.feeTypeCds = data
+        this.dataMonthReceivedStatisticsInfo.feeTypeCd = data[0].statusCd
+        this.dataMonthReceivedStatisticsInfo.feeStartDate = this.startDate
+        this.dataMonthReceivedStatisticsInfo.feeEndDate = this.endDate
+      } catch (error) {
+        console.error('Failed to load dictionary:', error)
+      }
+    },
+    async _loadMonthReceivedFloors() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.communityId
+        }
+        const { apiFloorDataVoList } = await queryFloors(params)
+        this.dataMonthReceivedStatisticsInfo.floors = apiFloorDataVoList
+      } catch (error) {
+        console.error('Failed to load floors:', error)
+      }
+    },
+    async _loadDataMonthReceivedStatisticsData() {
+      try {
+        const params = {
+          page: this.page.current,
+          row: this.page.size,
+          communityId: this.communityId,
+          feeStartDate: this.dataMonthReceivedStatisticsInfo.feeStartDate,
+          feeEndDate: this.dataMonthReceivedStatisticsInfo.feeEndDate,
+          feeTypeCd: this.dataMonthReceivedStatisticsInfo.feeTypeCd,
+          floorId: this.dataMonthReceivedStatisticsInfo.floorId
+        }
+        const { data, records, sumTotal } = await queryMonthReceivedDetail(params)
+        this.dataMonthReceivedStatisticsInfo.fees = data
+        this.page.total = records
+        this.dataMonthReceivedStatisticsInfo.feeAmount = sumTotal
+      } catch (error) {
+        console.error('Failed to load data:', error)
+      }
+    },
+    async _exportReportMonthReceivedFeeExcel() {
+      try {
+        const params = {
+          communityId: this.communityId,
+          feeStartDate: this.dataMonthReceivedStatisticsInfo.feeStartDate,
+          feeEndDate: this.dataMonthReceivedStatisticsInfo.feeEndDate,
+          feeTypeCd: this.dataMonthReceivedStatisticsInfo.feeTypeCd,
+          floorId: this.dataMonthReceivedStatisticsInfo.floorId,
+          pagePath: 'dataMonthReceivedStatistics'
+        }
+        const res = await exportData(params)
+        this.$message.success(res.msg)
+        if (res.code === 0) {
+          this.$router.push('/pages/property/downloadTempFile?tab=下载中心')
+        }
+      } catch (error) {
+        console.error('Export failed:', error)
+      }
+    },
+    _qureyDataMonthReceivedStatistics() {
+      this.page.current = 1
+      this._loadDataMonthReceivedStatisticsData()
+    },
+    switchMonthReceivedStatisticsFeeTypeCd(_feeTypeCd) {
+      this.dataMonthReceivedStatisticsInfo.feeTypeCd = _feeTypeCd
+      this._loadDataMonthReceivedStatisticsData()
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._loadDataMonthReceivedStatisticsData()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this._loadDataMonthReceivedStatisticsData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.padding-r-0 {
+  padding-right: 0;
+}
+
+.border-radius {
+  border-radius: 4px;
+}
+
+.list-group {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.list-group-item {
+  padding: 10px;
+  cursor: pointer;
+  border-bottom: 1px solid #eee;
+}
+
+.list-group-item:hover {
+  background-color: #f5f5f5;
+}
+
+.vc-node-selected {
+  background-color: #409EFF;
+  color: white;
+}
+
+.treeview {
+  overflow-y: auto;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/DataReportEarnedDetailStatistics.vue b/src/components/report/DataReportEarnedDetailStatistics.vue
new file mode 100644
index 0000000..779ad89
--- /dev/null
+++ b/src/components/report/DataReportEarnedDetailStatistics.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="margin-top">
+    <el-row class="margin-top-lg">
+      <el-col :span="4">
+        <el-input v-model="dataReportEarnedDetailStatisticsInfo.objName" :placeholder="$t('dataReport.roomNumber')"
+          clearable />
+      </el-col>
+      <el-col :span="4">
+        <el-input v-model="dataReportEarnedDetailStatisticsInfo.ownerName" :placeholder="$t('dataReport.ownerName')"
+          clearable />
+      </el-col>
+      <el-col :span="4">
+        <el-input v-model="dataReportEarnedDetailStatisticsInfo.link" :placeholder="$t('dataReport.phoneNumber')"
+          clearable />
+      </el-col>
+      <el-col :span="4">
+        <el-button type="primary" size="small" @click="_qureyDataReportEarnedDetailStatistics">
+          <i class="el-icon-search"></i>
+          {{ $t('dataReport.search') }}
+        </el-button>
+      </el-col>
+      <el-col :span="8" class="text-right">
+        <el-button type="primary" size="small" @click="_exportReportEarnedDetailExcel">
+          <i class="el-icon-download"></i>
+          <span>{{ $t('dataReport.export') }}</span>
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <div class="margin-top">
+      <el-table :data="dataReportEarnedDetailStatisticsInfo.fees" border style="width: 100%">
+        <el-table-column prop="roomName" :label="$t('dataReport.room')" align="center" />
+        <el-table-column :label="$t('dataReport.owner')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.ownerName }}({{ scope.row.link }})
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('dataReport.receivedFee')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.receivedFee || 0 }}
+          </template>
+        </el-table-column>
+        <el-table-column v-for="(item, index) in dataReportEarnedDetailStatisticsInfo.feeTypeCds" :key="index"
+          :label="item.name" align="center">
+          <template slot-scope="scope">
+            <div v-if="scope.row['receivedFee' + item.statusCd]">
+              <div v-for="(feeItem, fIndex) in scope.row['receivedFee' + item.statusCd]" :key="fIndex">
+                {{ feeItem.feeName }}({{ feeItem.startTime }}~{{ feeItem.endTime }})={{ feeItem.receivedAmount }}
+              </div>
+            </div>
+            <div v-else>
+              0
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="24" class="text-right">
+          <el-pagination :current-page.sync="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+            layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange" />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDict } from '@/api/community/communityApi'
+import { queryReceivedDetailStatistics, exportData } from '@/api/report/dataReportApi'
+
+export default {
+  name: 'DataReportEarnedDetailStatistics',
+
+  data() {
+    return {
+      dataReportEarnedDetailStatisticsInfo: {
+        fees: [],
+        feeTypeCds: [],
+        objName: '',
+        ownerName: '',
+        link: '',
+        feeAmount: '0'
+      },
+      startDate: '',
+      endDate: '',
+      communityId: '',
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this._initMethod()
+  },
+  methods: {
+    open(_param) {
+      this.startDate = _param.startDate
+      this.endDate = _param.endDate
+      this.communityId = _param.communityId
+      this._loadDataReportEarnedDetailStatisticsData(this.page.current, this.page.size)
+    },
+    async _initMethod() {
+      try {
+        const data = await getDict('pay_fee_config', 'fee_type_cd_show')
+        this.dataReportEarnedDetailStatisticsInfo.feeTypeCds = data
+      } catch (error) {
+        console.error('Failed to load dictionary:', error)
+      }
+    },
+    async _loadDataReportEarnedDetailStatisticsData(_page, _row) {
+      try {
+        const params = {
+          communityId: this.communityId,
+          startDate: this.startDate,
+          endDate: this.endDate,
+          objName: this.dataReportEarnedDetailStatisticsInfo.objName,
+          ownerName: this.dataReportEarnedDetailStatisticsInfo.ownerName,
+          link: this.dataReportEarnedDetailStatisticsInfo.link,
+          page: _page,
+          row: _row
+        }
+        const { data, records } = await queryReceivedDetailStatistics(params)
+        this.dataReportEarnedDetailStatisticsInfo.fees = data
+        this.page.total = records
+      } catch (error) {
+        console.error('Failed to load data:', error)
+      }
+    },
+    async _exportReportEarnedDetailExcel() {
+      try {
+        const params = {
+          communityId: this.communityId,
+          startDate: this.startDate,
+          endDate: this.endDate,
+          objName: this.dataReportEarnedDetailStatisticsInfo.objName,
+          ownerName: this.dataReportEarnedDetailStatisticsInfo.ownerName,
+          link: this.dataReportEarnedDetailStatisticsInfo.link,
+          pagePath: 'dataReportEarnedDetailStatistics'
+        }
+        const res = await exportData(params)
+        this.$message.success(res.msg)
+        if (res.code === 0) {
+          this.$router.push('/pages/property/downloadTempFile?tab=下载中心')
+        }
+      } catch (error) {
+        console.error('Export failed:', error)
+      }
+    },
+    _qureyDataReportEarnedDetailStatistics() {
+      this.page.current = 1
+      this._loadDataReportEarnedDetailStatisticsData(this.page.current, this.page.size)
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._loadDataReportEarnedDetailStatisticsData(this.page.current, val)
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this._loadDataReportEarnedDetailStatisticsData(val, this.page.size)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.margin-top-lg {
+  margin-top: 30px;
+}
+
+.text-right {
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/DataReportEarnedStatistics.vue b/src/components/report/DataReportEarnedStatistics.vue
new file mode 100644
index 0000000..f361011
--- /dev/null
+++ b/src/components/report/DataReportEarnedStatistics.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="margin-top">
+    <div class="text-right">
+      <el-button type="primary" size="small" @click="_exportReportEarnedExcel">
+        <i class="el-icon-download"></i>
+        <span>{{ $t('dataReport.export') }}</span>
+      </el-button>
+    </div>
+    <div class="margin-top">
+      <el-table :data="dataReportEarnedStatisticsInfo.fees" border style="width: 100%">
+        <el-table-column prop="floorNum" :label="$t('dataReport.building')" align="center" />
+        <el-table-column prop="roomCount" :label="$t('dataReport.roomCount')" align="center" />
+        <el-table-column prop="feeRoomCount" :label="$t('dataReport.feeRoomCount')" align="center" />
+        <el-table-column prop="receivedFee" :label="$t('dataReport.receivedFee')" align="center" />
+        <el-table-column v-for="(item, index) in dataReportEarnedStatisticsInfo.feeTypeCds" :key="index"
+          :label="item.name" align="center">
+          <template slot-scope="scope">
+            {{ scope.row['receivedFee' + item.statusCd] || 0 }}
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="8">
+          <span>{{ $t('dataReport.totalReceived') }}：</span>
+          <span>{{ dataReportEarnedStatisticsInfo.feeAmount }}</span>
+        </el-col>
+        <el-col :span="16" class="text-right">
+          <el-pagination :current-page.sync="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+            layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange" />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDict } from '@/api/community/communityApi'
+import { queryReceivedStatistics, exportData } from '@/api/report/dataReportApi'
+
+export default {
+  name: 'DataReportEarnedStatistics',
+  data() {
+    return {
+      dataReportEarnedStatisticsInfo: {
+        fees: [],
+        feeTypeCds: [],
+        feeAmount: '0'
+      },
+      startDate: '',
+      endDate: '',
+      communityId: '',
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this._initMethod()
+  },
+  methods: {
+    open(_param) {
+      this.startDate = _param.startDate
+      this.endDate = _param.endDate
+      this.communityId = _param.communityId
+      this._loadDataReportEarnedStatisticsData(this.page.current, this.page.size)
+    },
+    async _initMethod() {
+      try {
+        const data = await getDict('pay_fee_config', 'fee_type_cd_show')
+        this.dataReportEarnedStatisticsInfo.feeTypeCds = data
+      } catch (error) {
+        console.error('Failed to load dictionary:', error)
+      }
+    },
+    async _loadDataReportEarnedStatisticsData(_page, _row) {
+      try {
+        const params = {
+          communityId: this.communityId,
+          startDate: this.startDate,
+          endDate: this.endDate,
+          page: _page,
+          row: _row
+        }
+        const { data, records } = await queryReceivedStatistics(params)
+        this.dataReportEarnedStatisticsInfo.fees = data
+        this.page.total = records
+
+        let _feeAmount = 0.0
+        if (data && data.length > 0) {
+          data.forEach(item => {
+            _feeAmount += parseFloat(item.receivedFee)
+          })
+        }
+        this.dataReportEarnedStatisticsInfo.feeAmount = _feeAmount.toFixed(2)
+      } catch (error) {
+        console.error('Failed to load data:', error)
+      }
+    },
+    async _exportReportEarnedExcel() {
+      try {
+        const params = {
+          communityId: this.communityId,
+          startDate: this.startDate,
+          endDate: this.endDate,
+          pagePath: 'dataReportEarnedStatistics'
+        }
+        const res = await exportData(params)
+        this.$message.success(res.msg)
+        if (res.code === 0) {
+          this.$router.push('/pages/property/downloadTempFile?tab=下载中心')
+        }
+      } catch (error) {
+        console.error('Export failed:', error)
+      }
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._loadDataReportEarnedStatisticsData(this.page.current, val)
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this._loadDataReportEarnedStatisticsData(val, this.page.size)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.text-right {
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/DataReportEarnedWayStatistics.vue b/src/components/report/DataReportEarnedWayStatistics.vue
new file mode 100644
index 0000000..75c8cb0
--- /dev/null
+++ b/src/components/report/DataReportEarnedWayStatistics.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="margin-top">
+    <div class="text-right">
+      <el-button type="primary" size="small" @click="_exportReportEarnedWayExcel">
+        <i class="el-icon-download"></i>
+        <span>{{ $t('dataReport.export') }}</span>
+      </el-button>
+    </div>
+    <div class="margin-top">
+      <el-table :data="[dataReportEarnedWayStatisticsInfo.fees]" border style="width: 100%">
+        <el-table-column v-for="(item, index) in dataReportEarnedWayStatisticsInfo.fees" :key="index" :label="item.name"
+          align="center">
+          <template>
+            {{ item.receivedAmount || 0 }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryReceivedWayStatistics, exportData } from '@/api/report/dataReportApi'
+
+export default {
+  name: 'DataReportEarnedWayStatistics',
+
+  data() {
+    return {
+      dataReportEarnedWayStatisticsInfo: {
+        fees: []
+      },
+      startDate: '',
+      endDate: '',
+      communityId: ''
+    }
+  },
+  created() {
+  },
+  methods: {
+    open(_param) {
+      this.startDate = _param.startDate
+      this.endDate = _param.endDate
+      this.communityId = _param.communityId
+      this._loadDataReportEarnedWayStatisticsData()
+    },
+    async _loadDataReportEarnedWayStatisticsData() {
+      try {
+        const params = {
+          communityId: this.communityId,
+          startDate: this.startDate,
+          endDate: this.endDate
+        }
+        const { data } = await queryReceivedWayStatistics(params)
+        this.dataReportEarnedWayStatisticsInfo.fees = data
+      } catch (error) {
+        console.error('Failed to load data:', error)
+      }
+    },
+    async _exportReportEarnedWayExcel() {
+      try {
+        const params = {
+          communityId: this.communityId,
+          startDate: this.startDate,
+          endDate: this.endDate,
+          pagePath: 'dataReportEarnedWayStatistics'
+        }
+        const res = await exportData(params)
+        this.$message.success(res.msg)
+        if (res.code === 0) {
+          this.$router.push('/pages/property/downloadTempFile?tab=下载中心')
+        }
+      } catch (error) {
+        console.error('Export failed:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.text-right {
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/DataReportFeeStatistics.vue b/src/components/report/DataReportFeeStatistics.vue
new file mode 100644
index 0000000..91e36f1
--- /dev/null
+++ b/src/components/report/DataReportFeeStatistics.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="margin-top">
+    <el-row>
+      <el-col :span="3" class="padding-r-0">
+        <el-card class="border-radius">
+          <div class="treeview attendance-staff" style="height: 650px;">
+            <ul class="list-group text-center border-radius">
+              <li v-for="(item, index) in dataReportFeeStatisticsInfo.feeTypeCds" :key="index"
+                class="list-group-item node-orgTree"
+                :class="{ 'vc-node-selected': dataReportFeeStatisticsInfo.feeTypeCd === item.statusCd }"
+                @click="swatchFeeStatisticsFeeTypeCd(item.statusCd)">
+                {{ item.name }}
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="21">
+        <el-row>
+          <el-col :span="24" class="text-right">
+            <el-button type="primary" size="small" @click="_exportReportFeeExcel">
+              <i class="el-icon-download"></i>
+              <span>{{ $t('dataReport.export') }}</span>
+            </el-button>
+          </el-col>
+        </el-row>
+        <div class="margin-top">
+          <el-table :data="dataReportFeeStatisticsInfo.fees" border style="width: 100%">
+            <el-table-column prop="floorNum" :label="$t('dataReport.building')" align="center" />
+            <el-table-column prop="roomCount" :label="$t('dataReport.roomCount')" align="center" />
+            <el-table-column prop="feeRoomCount" :label="$t('dataReport.feeRoomCount')" align="center" />
+            <el-table-column prop="hisMonthOweFee" :label="$t('dataReport.historyOwe')" align="center" />
+            <el-table-column prop="oweFee" :label="$t('dataReport.totalOwe')" align="center" />
+            <el-table-column prop="todayReceivedRoomCount" :label="$t('dataReport.todayPaidCount')" align="center" />
+            <el-table-column prop="todayReceivedRoomAmount" :label="$t('dataReport.todayPaidAmount')" align="center" />
+            <el-table-column prop="hisOweReceivedRoomCount" :label="$t('dataReport.historyPaidCount')" align="center" />
+            <el-table-column prop="hisOweReceivedRoomAmount" :label="$t('dataReport.historyPaidAmount')" align="center" />
+            <el-table-column prop="monthReceivedRoomCount" :label="$t('dataReport.monthPaidCount')" align="center" />
+            <el-table-column :label="$t('dataReport.remainingCount')" align="center">
+              <template slot-scope="scope">
+                {{ (scope.row.feeRoomCount - scope.row.monthReceivedRoomCount).toFixed(0) }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('dataReport.paidRatio')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.feeRoomCount > 0 ?
+                  ((scope.row.monthReceivedRoomCount) / (scope.row.feeRoomCount) * 100).toFixed(2) + '%' : '0%' }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="monthReceivedRoomAmount" :label="$t('dataReport.monthPaidAmount')" align="center" />
+            <el-table-column prop="curMonthOweFee" :label="$t('dataReport.monthRemaining')" align="center" />
+            <el-table-column :label="$t('dataReport.collectionRate')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.curReceivableFee > 0 ?
+                  ((scope.row.monthReceivedRoomAmount) / (scope.row.curReceivableFee) * 100).toFixed(2) + '%' : '0%' }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getDict } from '@/api/community/communityApi'
+import { queryDataReportFeeStatistics, exportData, queryFloors } from '@/api/report/dataReportApi'
+
+export default {
+  name: 'DataReportFeeStatistics',
+
+  data() {
+    return {
+      dataReportFeeStatisticsInfo: {
+        fees: [],
+        feeTypeCds: [],
+        floors: [],
+        feeTypeCd: ''
+      },
+      startDate: '',
+      endDate: '',
+      communityId: '',
+    }
+  },
+  created() {
+  },
+  methods: {
+    open(param){
+      this.startDate = param.startDate
+      this.endDate = param.endDate
+      this.communityId = param.communityId
+      this._initMethod()
+    },
+    async _initMethod() {
+      try {
+        const data = await getDict('pay_fee_config', 'fee_type_cd_show')
+        this.dataReportFeeStatisticsInfo.feeTypeCds = data
+        this.dataReportFeeStatisticsInfo.feeTypeCd = data[0].statusCd
+        this._loadFloors()
+      } catch (error) {
+        console.error('Failed to load dictionary:', error)
+      }
+    },
+    async _loadFloors() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.communityId
+        }
+        const { apiFloorDataVoList } = await queryFloors(params)
+        this.dataReportFeeStatisticsInfo.floors = apiFloorDataVoList
+        this.dataReportFeeStatisticsInfo.fees = []
+
+        const _floorIds = []
+        for (let i = 0; i < apiFloorDataVoList.length; i++) {
+          _floorIds.push(apiFloorDataVoList[i].floorId)
+          if (_floorIds.length >= 5) {
+            await this._loadDataReportFeeStatisticsData(_floorIds.join(','))
+            _floorIds.length = 0
+          }
+        }
+
+        if (_floorIds.length > 0) {
+          await this._loadDataReportFeeStatisticsData(_floorIds.join(','))
+        }
+      } catch (error) {
+        console.error('Failed to load floors:', error)
+      }
+    },
+    async _loadDataReportFeeStatisticsData(_floorIds) {
+      try {
+        const params = {
+          communityId: this.communityId,
+          startDate: this.startDate,
+          endDate: this.endDate,
+          feeTypeCd: this.dataReportFeeStatisticsInfo.feeTypeCd,
+          floorIds: _floorIds
+        }
+        const { data } = await queryDataReportFeeStatistics(params)
+        data.forEach(item => {
+          this.dataReportFeeStatisticsInfo.fees.push(item)
+        })
+      } catch (error) {
+        console.error('Failed to load data:', error)
+      }
+    },
+    async _exportReportFeeExcel() {
+      try {
+        const _floorIds = this.dataReportFeeStatisticsInfo.floors.map(item => item.floorId)
+        if (!_floorIds || _floorIds.length < 1) {
+          this.$message.warning(this.$t('dataReport.noExportData'))
+          return
+        }
+
+        const params = {
+          communityId: this.communityId,
+          startDate: this.startDate,
+          endDate: this.endDate,
+          feeTypeCd: this.dataReportFeeStatisticsInfo.feeTypeCd,
+          floorIds: _floorIds.join(','),
+          pagePath: 'dataReportFeeStatistics'
+        }
+        const res = await exportData(params)
+        this.$message.success(res.msg)
+        if (res.code === 0) {
+          this.$router.push('/pages/property/downloadTempFile?tab=下载中心')
+        }
+      } catch (error) {
+        console.error('Export failed:', error)
+      }
+    },
+    swatchFeeStatisticsFeeTypeCd(_feeTypeCd) {
+      this.dataReportFeeStatisticsInfo.feeTypeCd = _feeTypeCd
+      this._loadFloors()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.padding-r-0 {
+  padding-right: 0;
+}
+
+.border-radius {
+  border-radius: 4px;
+}
+
+.list-group {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.list-group-item {
+  padding: 10px;
+  cursor: pointer;
+  border-bottom: 1px solid #eee;
+}
+
+.list-group-item:hover {
+  background-color: #f5f5f5;
+}
+
+.vc-node-selected {
+  background-color: #409EFF;
+  color: white;
+}
+
+.treeview {
+  overflow-y: auto;
+}</style>
\ No newline at end of file
diff --git a/src/components/report/DataReportOweDetailStatistics.vue b/src/components/report/DataReportOweDetailStatistics.vue
new file mode 100644
index 0000000..2352072
--- /dev/null
+++ b/src/components/report/DataReportOweDetailStatistics.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="margin-top">
+    <el-row class="margin-top-lg">
+      <el-col :span="4">
+        <el-input v-model="dataReportOweDetailStatisticsInfo.objName" :placeholder="$t('dataReport.roomNumber')"
+          clearable />
+      </el-col>
+      <el-col :span="4">
+        <el-input v-model="dataReportOweDetailStatisticsInfo.ownerName" :placeholder="$t('dataReport.ownerName')"
+          clearable />
+      </el-col>
+      <el-col :span="4">
+        <el-input v-model="dataReportOweDetailStatisticsInfo.link" :placeholder="$t('dataReport.phoneNumber')"
+          clearable />
+      </el-col>
+      <el-col :span="4">
+        <el-button type="primary" size="small" @click="_qureyDataReportOweDetailStatistics">
+          <i class="el-icon-search"></i>
+          {{ $t('dataReport.search') }}
+        </el-button>
+        <el-button type="default" size="small" @click="_resetDataReportOweDetailStatistics">
+          <i class="el-icon-refresh"></i>
+          {{ $t('dataReport.reset') }}
+        </el-button>
+      </el-col>
+      <el-col :span="8" class="text-right">
+        <el-button type="primary" size="small" @click="_exportReportOweDetailExcel">
+          <i class="el-icon-download"></i>
+          <span>{{ $t('dataReport.export') }}</span>
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <div class="margin-top">
+      <el-table :data="dataReportOweDetailStatisticsInfo.fees" border style="width: 100%">
+        <el-table-column prop="roomName" :label="$t('dataReport.room')" align="center" />
+        <el-table-column prop="ownerName" :label="$t('dataReport.owner')" align="center" />
+        <el-table-column prop="oweFee" :label="$t('dataReport.oweFee')" align="center" />
+        <el-table-column v-for="(item, index) in dataReportOweDetailStatisticsInfo.feeTypeCds" :key="index"
+          :label="item.name" align="center">
+          <template slot-scope="scope">
+            <div v-if="scope.row['oweFee' + item.statusCd]">
+              <div v-for="(feeItem, fIndex) in scope.row['oweFee' + item.statusCd]" :key="fIndex">
+                {{ feeItem.feeName }}({{ feeItem.endTime }}~{{ feeItem.deadlineTime }})={{ feeItem.amountOwed }}
+              </div>
+            </div>
+            <div v-else>
+              0
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="24" class="text-right">
+          <el-pagination :current-page.sync="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+            layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange" />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDict } from '@/api/community/communityApi'
+import { queryOweDetailStatistics, exportData } from '@/api/report/dataReportApi'
+
+export default {
+  name: 'DataReportOweDetailStatistics',
+
+  data() {
+    return {
+      dataReportOweDetailStatisticsInfo: {
+        fees: [],
+        feeTypeCds: [],
+        objName: '',
+        ownerName: '',
+        link: '',
+        feeAmount: '0'
+      },
+      startDate: '',
+      endDate: '',
+      communityId: '',
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this._initMethod()
+  },
+  methods: {
+    open(param){
+      this.startDate = param.startDate
+      this.endDate = param.endDate
+      this.communityId = param.communityId
+      this._loadDataReportOweDetailStatisticsData(this.page.current, this.page.size)
+    },
+    async _initMethod() {
+      try {
+        const data = await getDict('pay_fee_config', 'fee_type_cd_show')
+        this.dataReportOweDetailStatisticsInfo.feeTypeCds = data
+      } catch (error) {
+        console.error('Failed to load dictionary:', error)
+      }
+    },
+    async _loadDataReportOweDetailStatisticsData(_page, _row) {
+      try {
+        const params = {
+          communityId: this.communityId,
+          startDate: this.startDate,
+          endDate: this.endDate,
+          objName: this.dataReportOweDetailStatisticsInfo.objName,
+          ownerName: this.dataReportOweDetailStatisticsInfo.ownerName,
+          link: this.dataReportOweDetailStatisticsInfo.link,
+          page: _page,
+          row: _row
+        }
+        const { data, records } = await queryOweDetailStatistics(params)
+        this.dataReportOweDetailStatisticsInfo.fees = data
+        this.page.total = records
+
+        let _feeAmount = 0.0
+        if (data && data.length > 0) {
+          data.forEach(item => {
+            _feeAmount += parseFloat(item.oweFee)
+          })
+        }
+        this.dataReportOweDetailStatisticsInfo.feeAmount = _feeAmount.toFixed(2)
+      } catch (error) {
+        console.error('Failed to load data:', error)
+      }
+    },
+    async _exportReportOweDetailExcel() {
+      try {
+        const params = {
+          communityId: this.communityId,
+          startDate: this.startDate,
+          endDate: this.endDate,
+          objName: this.dataReportOweDetailStatisticsInfo.objName,
+          ownerName: this.dataReportOweDetailStatisticsInfo.ownerName,
+          link: this.dataReportOweDetailStatisticsInfo.link,
+          pagePath: 'dataReportOweDetailStatistics'
+        }
+        const res = await exportData(params)
+        this.$message.success(res.msg)
+        if (res.code === 0) {
+          this.$router.push('/pages/property/downloadTempFile?tab=下载中心')
+        }
+      } catch (error) {
+        console.error('Export failed:', error)
+      }
+    },
+    _qureyDataReportOweDetailStatistics() {
+      this.page.current = 1
+      this._loadDataReportOweDetailStatisticsData(this.page.current, this.page.size)
+    },
+    _resetDataReportOweDetailStatistics() {
+      this.dataReportOweDetailStatisticsInfo.objName = ''
+      this.dataReportOweDetailStatisticsInfo.ownerName = ''
+      this.dataReportOweDetailStatisticsInfo.link = ''
+      this._qureyDataReportOweDetailStatistics()
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._loadDataReportOweDetailStatisticsData(this.page.current, val)
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this._loadDataReportOweDetailStatisticsData(val, this.page.size)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.margin-top-lg {
+  margin-top: 30px;
+}
+
+.text-right {
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/DataReportOweStatistics.vue b/src/components/report/DataReportOweStatistics.vue
new file mode 100644
index 0000000..743559d
--- /dev/null
+++ b/src/components/report/DataReportOweStatistics.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="margin-top">
+    <div class="text-right">
+      <el-button type="primary" size="small" @click="_exportReportOweExcel">
+        <i class="el-icon-download"></i>
+        <span>{{ $t('dataReport.export') }}</span>
+      </el-button>
+    </div>
+    <div class="margin-top">
+      <el-table :data="dataReportOweStatisticsInfo.fees" border style="width: 100%">
+        <el-table-column prop="floorNum" :label="$t('dataReport.building')" align="center" />
+        <el-table-column prop="oweFee" :label="$t('dataReport.oweFee')" align="center" />
+        <el-table-column v-for="(item, index) in dataReportOweStatisticsInfo.feeTypeCds" :key="index" :label="item.name"
+          align="center">
+          <template slot-scope="scope">
+            {{ scope.row['oweFee' + item.statusCd] || 0 }}
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="8">
+          <span>{{ $t('dataReport.totalOwe') }}：</span>
+          <span>{{ dataReportOweStatisticsInfo.feeAmount }}</span>
+        </el-col>
+        <el-col :span="16" class="text-right">
+          <el-pagination :current-page.sync="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+            layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange" />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDict } from '@/api/community/communityApi'
+import { queryOweStatistics, exportData } from '@/api/report/dataReportApi'
+
+export default {
+  name: 'DataReportOweStatistics',
+
+  data() {
+    return {
+      dataReportOweStatisticsInfo: {
+        fees: [],
+        feeTypeCds: [],
+        feeAmount: '0'
+      },
+      startDate: '',
+      endDate: '',
+      communityId: '',
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this._initMethod()
+  },
+  methods: {
+    open(param){
+      this.startDate = param.startDate
+      this.endDate = param.endDate
+      this.communityId = param.communityId
+      this._loadDataReportOweStatisticsData(this.page.current, this.page.size)
+    },
+    async _initMethod() {
+      try {
+        const data = await getDict('pay_fee_config', 'fee_type_cd_show')
+        this.dataReportOweStatisticsInfo.feeTypeCds = data
+      } catch (error) {
+        console.error('Failed to load dictionary:', error)
+      }
+    },
+    async _loadDataReportOweStatisticsData(_page, _row) {
+      try {
+        const params = {
+          communityId: this.communityId,
+          startDate: this.startDate,
+          endDate: this.endDate,
+          page: _page,
+          row: _row
+        }
+        const { data, records } = await queryOweStatistics(params)
+        this.dataReportOweStatisticsInfo.fees = data
+        this.page.total = records
+
+        let _feeAmount = 0.0
+        if (data && data.length > 0) {
+          data.forEach(item => {
+            _feeAmount += parseFloat(item.oweFee)
+          })
+        }
+        this.dataReportOweStatisticsInfo.feeAmount = _feeAmount.toFixed(2)
+      } catch (error) {
+        console.error('Failed to load data:', error)
+      }
+    },
+    async _exportReportOweExcel() {
+      try {
+        const params = {
+          communityId: this.communityId,
+          startDate: this.startDate,
+          endDate: this.endDate,
+          pagePath: 'dataReportOweStatistics'
+        }
+        const res = await exportData(params)
+        this.$message.success(res.msg)
+        if (res.code === 0) {
+          this.$router.push('/pages/property/downloadTempFile?tab=下载中心')
+        }
+      } catch (error) {
+        console.error('Export failed:', error)
+      }
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._loadDataReportOweStatisticsData(this.page.current, val)
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this._loadDataReportOweStatisticsData(val, this.page.size)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.text-right {
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/configFeeSummary.vue b/src/components/report/configFeeSummary.vue
new file mode 100644
index 0000000..bb82723
--- /dev/null
+++ b/src/components/report/configFeeSummary.vue
@@ -0,0 +1,108 @@
+<template>
+  <el-card class="config-fee-summary-container">
+    <div slot="header">
+      <span>{{ $t('reportFeeSummary.configFeeSummary') }}</span>
+    </div>
+    <div id="configFeeSummary" style="height:300px;width:100%;"></div>
+  </el-card>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { queryReportConfigFeeSummary } from '@/api/report/reportFeeSummaryApi'
+
+export default {
+  name: 'ConfigFeeSummary',
+  data() {
+    return {
+      chart: null,
+      conditions: {}
+    }
+  },
+  mounted() {
+    this.initChart()
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+    if (this.chart) {
+      this.chart.dispose()
+    }
+  },
+  methods: {
+    notify(params) {
+      this.conditions = params
+      this.loadConfigFeeSummaryRate()
+    },
+    initChart() {
+      this.chart = echarts.init(document.getElementById('configFeeSummary'))
+      this.setDefaultOption()
+    },
+    setDefaultOption() {
+      const option = {
+        legend: {},
+        tooltip: {},
+        title: {
+          show: true,
+          text: this.$t('reportFeeSummary.configFeeRateStatistics')
+        },
+        color: ['#FFDAB9', '#66CDAA'],
+        dataset: {
+          source: [
+            ['product', this.$t('reportFeeSummary.roomChargeRate'), this.$t('reportFeeSummary.chargeRate')]
+          ]
+        },
+        xAxis: { type: 'category' },
+        yAxis: {},
+        series: [
+          { type: 'bar' },
+          { type: 'bar' }
+        ]
+      }
+      this.chart.setOption(option)
+    },
+    async loadConfigFeeSummaryRate() {
+      try {
+        const { data } = await queryReportConfigFeeSummary(this.conditions )
+        this.initConfigFeeSummaryChart(data)
+      } catch (error) {
+        console.error('Failed to load config fee summary:', error)
+      }
+    },
+    initConfigFeeSummaryChart(data) {
+      if (!this.chart) {
+        this.initChart()
+      }
+
+      const source = [
+        ['product', this.$t('reportFeeSummary.roomChargeRate'), this.$t('reportFeeSummary.chargeRate')]
+      ]
+
+      data.forEach(item => {
+        source.push([
+          item.name,
+          item.feeRoomRate,
+          item.feeRate
+        ])
+      })
+
+      this.chart.setOption({
+        dataset: {
+          source
+        }
+      })
+    },
+    handleResize() {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.config-fee-summary-container {
+  margin-bottom: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/floorFeeSummary.vue b/src/components/report/floorFeeSummary.vue
new file mode 100644
index 0000000..12ea39e
--- /dev/null
+++ b/src/components/report/floorFeeSummary.vue
@@ -0,0 +1,108 @@
+<template>
+  <el-card class="floor-fee-summary-container">
+    <div slot="header">
+      <span>{{ $t('reportFeeSummary.floorFeeSummary') }}</span>
+    </div>
+    <div id="floorFeeSummary" style="height:300px;width:100%;"></div>
+  </el-card>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { queryReportFloorFeeSummary } from '@/api/report/reportFeeSummaryApi'
+
+export default {
+  name: 'FloorFeeSummary',
+  data() {
+    return {
+      chart: null,
+      conditions: {}
+    }
+  },
+  mounted() {
+    this.initChart()
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+    if (this.chart) {
+      this.chart.dispose()
+    }
+  },
+  methods: {
+    notify(params) {
+      this.conditions = params
+      this.loadFloorFeeSummaryRate()
+    },
+    initChart() {
+      this.chart = echarts.init(document.getElementById('floorFeeSummary'))
+      this.setDefaultOption()
+    },
+    setDefaultOption() {
+      const option = {
+        legend: {},
+        tooltip: {},
+        title: {
+          show: true,
+          text: this.$t('reportFeeSummary.floorFeeRateStatistics')
+        },
+        color: ['#FFDAB9', '#66CDAA'],
+        dataset: {
+          source: [
+            ['product', this.$t('reportFeeSummary.roomChargeRate'), this.$t('reportFeeSummary.chargeRate')]
+          ]
+        },
+        xAxis: { type: 'category' },
+        yAxis: {},
+        series: [
+          { type: 'bar' },
+          { type: 'bar' }
+        ]
+      }
+      this.chart.setOption(option)
+    },
+    async loadFloorFeeSummaryRate() {
+      try {
+        const { data } = await queryReportFloorFeeSummary( this.conditions )
+        this.initFloorFeeSummaryChart(data)
+      } catch (error) {
+        console.error('Failed to load floor fee summary:', error)
+      }
+    },
+    initFloorFeeSummaryChart(data) {
+      if (!this.chart) {
+        this.initChart()
+      }
+
+      const source = [
+        ['product', this.$t('reportFeeSummary.roomChargeRate'), this.$t('reportFeeSummary.chargeRate')]
+      ]
+
+      data.forEach(item => {
+        source.push([
+          item.floorName,
+          item.feeRoomRate,
+          item.feeRate
+        ])
+      })
+
+      this.chart.setOption({
+        dataset: {
+          source
+        }
+      })
+    },
+    handleResize() {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.floor-fee-summary-container {
+  margin-bottom: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/reportDeadlineFee.vue b/src/components/report/reportDeadlineFee.vue
new file mode 100644
index 0000000..f1ec68f
--- /dev/null
+++ b/src/components/report/reportDeadlineFee.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="report-deadline-fee">
+    <div class="text-right">
+      <el-button 
+        type="primary" 
+        size="small" 
+        @click="_exportExcel"
+      >
+        <i class="el-icon-download"></i>
+        {{ $t('reportDeadlineFee.export') }}
+      </el-button>
+    </div>
+
+    <el-table
+      :data="reportDeadlineFeeInfo.fees"
+      border
+      style="width: 100%"
+      class="margin-top"
+    >
+      <el-table-column
+        prop="index"
+        :label="$t('reportDeadlineFee.feeId')"
+        align="center"
+      >
+        <template slot-scope="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="objName"
+        :label="$t('reportDeadlineFee.objName')"
+        align="center"
+      />
+      <el-table-column
+        prop="feeName"
+        :label="$t('reportDeadlineFee.feeName')"
+        align="center"
+      />
+      <el-table-column
+        prop="deadlineTime"
+        :label="$t('reportDeadlineFee.deadlineTime')"
+        align="center"
+      />
+      <el-table-column
+        prop="oweDay"
+        :label="$t('reportDeadlineFee.oweDay')"
+        align="center"
+      />
+    </el-table>
+
+    <el-row class="margin-top">
+      <el-col :span="18">
+        <div class="tip-text">
+          {{ $t('reportDeadlineFee.tip') }}
+        </div>
+      </el-col>
+      <el-col :span="6" class="text-right">
+        <el-pagination
+          :current-page.sync="pagination.current"
+          :page-sizes="[10, 20, 30, 50]"
+          :page-size="pagination.size"
+          :total="pagination.total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { queryDeadlineFee, exportData } from '@/api/report/feeRemindApi'
+
+export default {
+  name: 'ReportDeadlineFee',
+  data() {
+    return {
+      reportDeadlineFeeInfo: {
+        fees: [],
+        conditions: {}
+      },
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    async loadData(conditions) {
+      this.reportDeadlineFeeInfo.conditions = { ...conditions }
+      await this._listDeadlineFees(this.pagination.current, this.pagination.size)
+    },
+    async _listDeadlineFees(page, size) {
+      try {
+        const params = {
+          ...this.reportDeadlineFeeInfo.conditions,
+          page,
+          row: size
+        }
+        const { data, total } = await queryDeadlineFee(params)
+        this.reportDeadlineFeeInfo.fees = data
+        this.pagination.total = total
+      } catch (error) {
+        console.error('Failed to load deadline fees:', error)
+      }
+    },
+    async _exportExcel() {
+      try {
+        const params = {
+          ...this.reportDeadlineFeeInfo.conditions,
+          communityId: getCommunityId(),
+          pagePath: 'reportDeadlineFee'
+        }
+        const { code, msg } = await exportData(params)
+        this.$message.success(msg)
+        if (code === 0) {
+          this.$router.push('/pages/property/downloadTempFile?tab=downloadCenter')
+        }
+      } catch (error) {
+        console.error('Failed to export:', error)
+      }
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this._listDeadlineFees(this.pagination.current, val)
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this._listDeadlineFees(val, this.pagination.size)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.report-deadline-fee {
+  .margin-top {
+    margin-top: 15px;
+  }
+  
+  .text-right {
+    text-align: right;
+  }
+  
+  .tip-text {
+    color: #999;
+    font-size: 12px;
+    padding: 5px 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/reportFeeDetailCar.vue b/src/components/report/reportFeeDetailCar.vue
new file mode 100644
index 0000000..ade37fb
--- /dev/null
+++ b/src/components/report/reportFeeDetailCar.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="report-fee-detail-car">
+    <div class="operation-bar">
+      <el-button 
+        type="primary" 
+        size="small"
+        @click="exportReportFeeDetailCarExcel">
+        <i class="el-icon-download"></i>
+        {{ $t('common.export') }}
+      </el-button>
+    </div>
+
+    <el-table
+      :data="reportFeeDetailCarInfo.fees"
+      border
+      style="width: 100%"
+      v-loading="loading">
+      <el-table-column 
+        prop="carNum" 
+        :label="$t('reportFeeDetailCar.car')"
+        align="center">
+      </el-table-column>
+      <el-table-column 
+        prop="ownerName" 
+        :label="$t('reportFeeDetailCar.owner')"
+        align="center">
+        <template slot-scope="scope">
+          {{ scope.row.ownerName }}({{ scope.row.link }})
+        </template>
+      </el-table-column>
+      <el-table-column 
+        prop="oweFee" 
+        :label="$t('reportFeeDetailCar.oweFee')"
+        align="center">
+        <template slot-scope="scope">
+          {{ scope.row.oweFee || '0' }}
+        </template>
+      </el-table-column>
+      <el-table-column 
+        prop="receivedFee" 
+        :label="$t('reportFeeDetailCar.receivedFee')"
+        align="center">
+        <template slot-scope="scope">
+          {{ scope.row.receivedFee || '0' }}
+        </template>
+      </el-table-column>
+      <template v-for="(item,index) in reportFeeDetailCarInfo.feeTypeCds">
+        <el-table-column 
+          :key="index+'owe'"
+          :label="item.name + $t('reportFeeDetailCar.owe')"
+          align="center">
+          <template slot-scope="scope">
+            {{ scope.row['oweFee'+item.statusCd] || '0' }}
+          </template>
+        </el-table-column>
+        <el-table-column 
+          :key="index+'received'"
+          :label="item.name + $t('reportFeeDetailCar.received')"
+          align="center">
+          <template slot-scope="scope">
+            {{ scope.row['receivedFee'+item.statusCd] || '0' }}
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pagination.current"
+      :page-sizes="[10, 20, 30, 50]"
+      :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="pagination.total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { getDict } from '@/api/community/communityApi'
+import { queryReportFeeDetailCar, exportReportFeeDetailCar } from '@/api/report/reportFeeDetailApi'
+
+export default {
+  name: 'ReportFeeDetailCar',
+  data() {
+    return {
+      reportFeeDetailCarInfo: {
+        fees: [],
+        feeTypeCds: [],
+        conditions: {}
+      },
+      loading: false,
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.getDictData()
+  },
+  methods: {
+    async getDictData() {
+      try {
+        const data = await getDict('pay_fee_config', 'fee_type_cd_show')
+        this.reportFeeDetailCarInfo.feeTypeCds = data
+      } catch (error) {
+        console.error('获取字典数据失败:', error)
+      }
+    },
+    async open(conditions) {
+      this.reportFeeDetailCarInfo.conditions = conditions
+      this.listReportFeeDetailCars()
+    },
+    async listReportFeeDetailCars() {
+      try {
+        this.loading = true
+        const params = {
+          ...this.reportFeeDetailCarInfo.conditions,
+          page: this.pagination.current,
+          row: this.pagination.size
+        }
+        const { data, total } = await queryReportFeeDetailCar(params)
+        this.reportFeeDetailCarInfo.fees = data
+        this.pagination.total = total
+      } catch (error) {
+        console.error('获取车辆费用明细失败:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    async exportReportFeeDetailCarExcel() {
+      try {
+        const params = {
+          ...this.reportFeeDetailCarInfo.conditions,
+          pagePath: 'reportFeeDetailCar'
+        }
+        await exportReportFeeDetailCar(params)
+        this.$message.success(this.$t('common.exportSuccess'))
+      } catch (error) {
+        console.error('导出失败:', error)
+        this.$message.error(this.$t('common.exportFailed'))
+      }
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.listReportFeeDetailCars()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.listReportFeeDetailCars()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.report-fee-detail-car {
+  .operation-bar {
+    margin-bottom: 20px;
+    text-align: right;
+  }
+  
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/reportFeeDetailContract.vue b/src/components/report/reportFeeDetailContract.vue
new file mode 100644
index 0000000..981d6fe
--- /dev/null
+++ b/src/components/report/reportFeeDetailContract.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="report-fee-detail-contract">
+    <div class="operation-bar">
+      <el-button 
+        type="primary" 
+        size="small"
+        @click="exportReportFeeDetailContractExcel">
+        <i class="el-icon-download"></i>
+        {{ $t('common.export') }}
+      </el-button>
+    </div>
+
+    <el-table
+      :data="reportFeeDetailContractInfo.fees"
+      border
+      style="width: 100%"
+      v-loading="loading">
+      <el-table-column 
+        prop="contractName" 
+        :label="$t('reportFeeDetailContract.contract')"
+        align="center">
+      </el-table-column>
+      <el-table-column 
+        prop="ownerName" 
+        :label="$t('reportFeeDetailContract.owner')"
+        align="center">
+        <template slot-scope="scope">
+          {{ scope.row.ownerName }}({{ scope.row.link }})
+        </template>
+      </el-table-column>
+      <el-table-column 
+        prop="oweFee" 
+        :label="$t('reportFeeDetailContract.oweFee')"
+        align="center">
+        <template slot-scope="scope">
+          {{ scope.row.oweFee || '0' }}
+        </template>
+      </el-table-column>
+      <el-table-column 
+        prop="receivedFee" 
+        :label="$t('reportFeeDetailContract.receivedFee')"
+        align="center">
+        <template slot-scope="scope">
+          {{ scope.row.receivedFee || '0' }}
+        </template>
+      </el-table-column>
+      <template v-for="(item,index) in reportFeeDetailContractInfo.feeTypeCds">
+        <el-table-column 
+          :key="index+'owe'"
+          :label="item.name + $t('reportFeeDetailContract.owe')"
+          align="center">
+          <template slot-scope="scope">
+            {{ scope.row['oweFee'+item.statusCd] || '0' }}
+          </template>
+        </el-table-column>
+        <el-table-column 
+          :key="index+'received'"
+          :label="item.name + $t('reportFeeDetailContract.received')"
+          align="center">
+          <template slot-scope="scope">
+            {{ scope.row['receivedFee'+item.statusCd] || '0' }}
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pagination.current"
+      :page-sizes="[10, 20, 30, 50]"
+      :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="pagination.total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { getDict } from '@/api/community/communityApi'
+import { queryReportFeeDetailContract, exportReportFeeDetailContract } from '@/api/report/reportFeeDetailApi'
+
+export default {
+  name: 'ReportFeeDetailContract',
+  data() {
+    return {
+      reportFeeDetailContractInfo: {
+        fees: [],
+        feeTypeCds: [],
+        conditions: {}
+      },
+      loading: false,
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.getDictData()
+  },
+  methods: {
+    async getDictData() {
+      try {
+        const data = await getDict('pay_fee_config', 'fee_type_cd_show')
+        this.reportFeeDetailContractInfo.feeTypeCds = data
+      } catch (error) {
+        console.error('获取字典数据失败:', error)
+      }
+    },
+    async open(conditions) {
+      this.reportFeeDetailContractInfo.conditions = conditions
+      this.listReportFeeDetailContracts()
+    },
+    async listReportFeeDetailContracts() {
+      try {
+        this.loading = true
+        const params = {
+          ...this.reportFeeDetailContractInfo.conditions,
+          page: this.pagination.current,
+          row: this.pagination.size
+        }
+        const { data, total } = await queryReportFeeDetailContract(params)
+        this.reportFeeDetailContractInfo.fees = data
+        this.pagination.total = total
+      } catch (error) {
+        console.error('获取合同费用明细失败:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    async exportReportFeeDetailContractExcel() {
+      try {
+        const params = {
+          ...this.reportFeeDetailContractInfo.conditions,
+          pagePath: 'reportFeeDetailContract'
+        }
+        await exportReportFeeDetailContract(params)
+        this.$message.success(this.$t('common.exportSuccess'))
+      } catch (error) {
+        console.error('导出失败:', error)
+        this.$message.error(this.$t('common.exportFailed'))
+      }
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.listReportFeeDetailContracts()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.listReportFeeDetailContracts()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.report-fee-detail-contract {
+  .operation-bar {
+    margin-bottom: 20px;
+    text-align: right;
+  }
+  
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/reportFeeDetailOwner.vue b/src/components/report/reportFeeDetailOwner.vue
new file mode 100644
index 0000000..6f3dfd4
--- /dev/null
+++ b/src/components/report/reportFeeDetailOwner.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="report-fee-detail-owner">
+    <div class="operation-bar">
+      <el-button 
+        type="primary" 
+        size="small"
+        @click="exportReportFeeDetailOwnerExcel">
+        <i class="el-icon-download"></i>
+        {{ $t('common.export') }}
+      </el-button>
+    </div>
+
+    <el-table
+      :data="reportFeeDetailOwnerInfo.fees"
+      border
+      style="width: 100%"
+      v-loading="loading">
+      <el-table-column 
+        prop="ownerName" 
+        :label="$t('reportFeeDetailOwner.owner')"
+        align="center">
+        <template slot-scope="scope">
+          {{ scope.row.ownerName }}({{ scope.row.link }})
+        </template>
+      </el-table-column>
+      <el-table-column 
+        prop="objName" 
+        :label="$t('reportFeeDetailOwner.room')"
+        align="center">
+        <template slot-scope="scope">
+          <div style="max-width: 200px;">{{ scope.row.objName }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column 
+        prop="oweFee" 
+        :label="$t('reportFeeDetailOwner.oweFee')"
+        align="center">
+        <template slot-scope="scope">
+          {{ scope.row.oweFee || '0' }}
+        </template>
+      </el-table-column>
+      <el-table-column 
+        prop="receivedFee" 
+        :label="$t('reportFeeDetailOwner.receivedFee')"
+        align="center">
+        <template slot-scope="scope">
+          {{ scope.row.receivedFee || '0' }}
+        </template>
+      </el-table-column>
+      <template v-for="(item,index) in reportFeeDetailOwnerInfo.feeTypeCds">
+        <el-table-column 
+          :key="index+'owe'"
+          :label="item.name + $t('reportFeeDetailOwner.owe')"
+          align="center">
+          <template slot-scope="scope">
+            {{ scope.row['oweFee'+item.statusCd] || '0' }}
+          </template>
+        </el-table-column>
+        <el-table-column 
+          :key="index+'received'"
+          :label="item.name + $t('reportFeeDetailOwner.received')"
+          align="center">
+          <template slot-scope="scope">
+            {{ scope.row['receivedFee'+item.statusCd] || '0' }}
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pagination.current"
+      :page-sizes="[10, 20, 30, 50]"
+      :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="pagination.total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { getDict } from '@/api/community/communityApi'
+import { queryReportFeeDetailOwner, exportReportFeeDetailOwner } from '@/api/report/reportFeeDetailApi'
+
+export default {
+  name: 'ReportFeeDetailOwner',
+  data() {
+    return {
+      reportFeeDetailOwnerInfo: {
+        fees: [],
+        feeTypeCds: [],
+        conditions: {}
+      },
+      loading: false,
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.getDictData()
+  },
+  methods: {
+    async getDictData() {
+      try {
+        const data = await getDict('pay_fee_config', 'fee_type_cd_show')
+        this.reportFeeDetailOwnerInfo.feeTypeCds = data
+      } catch (error) {
+        console.error('获取字典数据失败:', error)
+      }
+    },
+    async open(conditions) {
+      this.reportFeeDetailOwnerInfo.conditions = conditions
+      this.listReportFeeDetailOwners()
+    },
+    async listReportFeeDetailOwners() {
+      try {
+        this.loading = true
+        const params = {
+          ...this.reportFeeDetailOwnerInfo.conditions,
+          page: this.pagination.current,
+          row: this.pagination.size
+        }
+        const { data, total } = await queryReportFeeDetailOwner(params)
+        this.reportFeeDetailOwnerInfo.fees = data
+        this.pagination.total = total
+      } catch (error) {
+        console.error('获取业主费用明细失败:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    async exportReportFeeDetailOwnerExcel() {
+      try {
+        const params = {
+          ...this.reportFeeDetailOwnerInfo.conditions,
+          pagePath: 'reportFeeDetailOwner'
+        }
+        await exportReportFeeDetailOwner(params)
+        this.$message.success(this.$t('common.exportSuccess'))
+      } catch (error) {
+        console.error('导出失败:', error)
+        this.$message.error(this.$t('common.exportFailed'))
+      }
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.listReportFeeDetailOwners()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.listReportFeeDetailOwners()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.report-fee-detail-owner {
+  .operation-bar {
+    margin-bottom: 20px;
+    text-align: right;
+  }
+  
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/reportFeeDetailRoom.vue b/src/components/report/reportFeeDetailRoom.vue
new file mode 100644
index 0000000..0881bae
--- /dev/null
+++ b/src/components/report/reportFeeDetailRoom.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="report-fee-detail-room">
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <el-card class="floor-tree">
+          <el-scrollbar style="height: 650px;">
+            <el-menu>
+              <el-menu-item @click="swatchFloor('')" :class="{ 'is-active': reportFeeDetailRoomInfo.floorId === '' }">
+                {{ $t('reportFeeDetailRoom.all') }}
+              </el-menu-item>
+              <el-menu-item v-for="(item, index) in reportFeeDetailRoomInfo.floors" :key="index"
+                @click="swatchFloor(item.floorId)"
+                :class="{ 'is-active': reportFeeDetailRoomInfo.floorId === item.floorId }">
+                {{ item.floorName }}
+              </el-menu-item>
+            </el-menu>
+          </el-scrollbar>
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+        <div class="operation-bar">
+          <el-button type="primary" size="small" @click="exportReportFeeDetailRoomExcel">
+            <i class="el-icon-download"></i>
+            {{ $t('common.export') }}
+          </el-button>
+        </div>
+
+        <el-table :data="reportFeeDetailRoomInfo.fees" border style="width: 100%" v-loading="loading">
+          <el-table-column prop="roomName" :label="$t('reportFeeDetailRoom.room')" align="center">
+          </el-table-column>
+          <el-table-column prop="ownerName" :label="$t('reportFeeDetailRoom.owner')" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.ownerName }}({{ scope.row.link }})
+            </template>
+          </el-table-column>
+          <el-table-column prop="oweFee" :label="$t('reportFeeDetailRoom.oweFee')" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.oweFee || '0' }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="receivedFee" :label="$t('reportFeeDetailRoom.receivedFee')" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.receivedFee || '0' }}
+            </template>
+          </el-table-column>
+          <template v-for="(item, index) in reportFeeDetailRoomInfo.feeTypeCds" >
+            <el-table-column :key="index" :label="item.name + $t('reportFeeDetailRoom.owe')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row['oweFee' + item.statusCd] || '0' }}
+              </template>
+            </el-table-column>
+            <el-table-column :key="index+'received'" :label="item.name + $t('reportFeeDetailRoom.received')"
+              align="center">
+              <template slot-scope="scope">
+                {{ scope.row['receivedFee' + item.statusCd] || '0' }}
+              </template>
+            </el-table-column>
+          </template>
+        </el-table>
+
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+          layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
+        </el-pagination>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getDict } from '@/api/community/communityApi'
+import { queryReportFeeDetailRoom, exportReportFeeDetailRoom } from '@/api/report/reportFeeDetailApi'
+import {queryFloors} from '@/api/report/reportFeeSummaryApi'
+
+export default {
+  name: 'ReportFeeDetailRoom',
+  data() {
+    return {
+      reportFeeDetailRoomInfo: {
+        fees: [],
+        floors: [],
+        floorId: '',
+        feeTypeCds: [],
+        conditions: {}
+      },
+      loading: false,
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.getDictData()
+  },
+  methods: {
+    async getDictData() {
+      try {
+        const data = await getDict('pay_fee_config', 'fee_type_cd_show')
+        this.reportFeeDetailRoomInfo.feeTypeCds = data
+      } catch (error) {
+        console.error('获取字典数据失败:', error)
+      }
+    },
+    async open(conditions) {
+      this.reportFeeDetailRoomInfo.conditions = conditions
+      await this.listReportFeeDetailRoomFloors()
+      this.listReportFeeDetailRooms()
+    },
+    async listReportFeeDetailRoomFloors() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.reportFeeDetailRoomInfo.conditions.communityId
+        }
+
+        const data  = await queryFloors(params)
+        this.reportFeeDetailRoomInfo.floors = data.apiFloorDataVoList
+      } catch (error) {
+        console.error('获取楼层列表失败:', error)
+      }
+    },
+    swatchFloor(floorId) {
+      this.reportFeeDetailRoomInfo.floorId = floorId
+      this.listReportFeeDetailRooms()
+    },
+    async listReportFeeDetailRooms() {
+      try {
+        this.loading = true
+        const params = {
+          ...this.reportFeeDetailRoomInfo.conditions,
+          page: this.pagination.current,
+          row: this.pagination.size,
+          floorId: this.reportFeeDetailRoomInfo.floorId
+        }
+        const { data, total } = await queryReportFeeDetailRoom(params)
+        this.reportFeeDetailRoomInfo.fees = data
+        this.pagination.total = total
+      } catch (error) {
+        console.error('获取房屋费用明细失败:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    async exportReportFeeDetailRoomExcel() {
+      try {
+        const params = {
+          ...this.reportFeeDetailRoomInfo.conditions,
+          pagePath: 'reportFeeDetailRoom'
+        }
+        await exportReportFeeDetailRoom(params)
+        this.$message.success(this.$t('common.exportSuccess'))
+      } catch (error) {
+        console.error('导出失败:', error)
+        this.$message.error(this.$t('common.exportFailed'))
+      }
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.listReportFeeDetailRooms()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.listReportFeeDetailRooms()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.report-fee-detail-room {
+  .floor-tree {
+    height: 700px;
+
+    .el-menu {
+      border-right: none;
+    }
+
+    .is-active {
+      color: #409EFF;
+      background-color: #ecf5ff;
+    }
+  }
+
+  .operation-bar {
+    margin-bottom: 20px;
+    text-align: right;
+  }
+
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/reportPrePaymentFee.vue b/src/components/report/reportPrePaymentFee.vue
new file mode 100644
index 0000000..53e1b9d
--- /dev/null
+++ b/src/components/report/reportPrePaymentFee.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="report-pre-payment-fee">
+    <div class="text-right">
+      <el-button type="primary" size="small" @click="_exportExcel">
+        <i class="el-icon-download"></i>
+        {{ $t('reportPrePaymentFee.export') }}
+      </el-button>
+    </div>
+
+    <el-table :data="reportPrePaymentFeeInfo.fees" border style="width: 100%" class="margin-top">
+      <el-table-column prop="index" :label="$t('reportPrePaymentFee.feeId')" align="center">
+        <template slot-scope="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="objName" :label="$t('reportPrePaymentFee.objName')" align="center" />
+      <el-table-column prop="feeName" :label="$t('reportPrePaymentFee.feeName')" align="center" />
+      <el-table-column prop="endTime" :label="$t('reportPrePaymentFee.startTime')" align="center" />
+      <el-table-column prop="oweDay" :label="$t('reportPrePaymentFee.oweDay')" align="center" />
+    </el-table>
+
+    <el-row class="margin-top">
+      <el-col :span="18">
+        <div class="tip-text">
+          {{ $t('reportPrePaymentFee.tip') }}
+        </div>
+      </el-col>
+      <el-col :span="6" class="text-right">
+        <el-pagination :current-page.sync="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+          :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+          @current-change="handleCurrentChange" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { queryPrePayment, exportData } from '@/api/report/feeRemindApi'
+
+export default {
+  name: 'ReportPrePaymentFee',
+  data() {
+    return {
+      reportPrePaymentFeeInfo: {
+        fees: [],
+        conditions: {}
+      },
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    async loadData(conditions) {
+      this.reportPrePaymentFeeInfo.conditions = { ...conditions }
+      await this._listPreFees(this.pagination.current, this.pagination.size)
+    },
+    async _listPreFees(page, size) {
+      try {
+        const params = {
+          ...this.reportPrePaymentFeeInfo.conditions,
+          page,
+          row: size
+        }
+        const { data, total } = await queryPrePayment(params)
+        this.reportPrePaymentFeeInfo.fees = data
+        this.pagination.total = total
+      } catch (error) {
+        console.error('Failed to load pre payment fees:', error)
+      }
+    },
+    async _exportExcel() {
+      try {
+        const params = {
+          ...this.reportPrePaymentFeeInfo.conditions,
+          communityId: getCommunityId(),
+          pagePath: 'reportPrePaymentFee'
+        }
+        const { code, msg } = await exportData(params)
+        this.$message.success(msg)
+        if (code === 0) {
+          this.$router.push('/pages/property/downloadTempFile?tab=downloadCenter')
+        }
+      } catch (error) {
+        console.error('Failed to export:', error)
+      }
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this._listPreFees(this.pagination.current, val)
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this._listPreFees(val, this.pagination.size)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.report-pre-payment-fee {
+  .margin-top {
+    margin-top: 15px;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+
+  .tip-text {
+    color: #999;
+    font-size: 12px;
+    padding: 5px 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/selectCommunityFloor.vue b/src/components/report/selectCommunityFloor.vue
new file mode 100644
index 0000000..6753bcc
--- /dev/null
+++ b/src/components/report/selectCommunityFloor.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="select-community-floor-container">
+    <div class="border-radius">
+      <div class="margin-xs-r treeview attendance-staff" style="height: 650px;">
+        <ul class="list-group text-center border-radius">
+          <li v-for="(item, index) in floors" :key="index" class="list-group-item node-orgTree"
+            :class="{ 'vc-node-selected': selectedFloorId === item.floorId }" @click="handleSelectFloor(item)">
+            {{ item.floorNum }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { queryFloors } from '@/api/report/reportFeeSummaryApi'
+
+export default {
+  name: 'SelectCommunityFloor',
+  data() {
+    return {
+      floors: [],
+      selectedFloorId: '',
+      callBack: null
+    }
+  },
+  methods: {
+    open(params) {
+      this.callBack = params.callBack
+      this.loadCommunityFloors()
+    },
+    async loadCommunityFloors() {
+      try {
+        const communityId = await getCommunityId()
+        const params = {
+          _uid: '123mlkdinkldldijdhuudjdjkkd',
+          page: 1,
+          row: 100,
+          communityId
+        }
+
+        const defaultFloor = {
+          floorNum: this.$t('common.all'),
+          floorId: ''
+        }
+
+        const  data  = await queryFloors(params)
+        this.floors = [defaultFloor, ...data.apiFloorDataVoList]
+        this.handleSelectFloor(defaultFloor)
+      } catch (error) {
+        console.error('Failed to load floors:', error)
+      }
+    },
+    handleSelectFloor(floor) {
+      this.selectedFloorId = floor.floorId
+      if (this.callBack) {
+        this.callBack(floor)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.select-community-floor-container {
+  .border-radius {
+    border-radius: 4px;
+  }
+
+  .margin-xs-r {
+    margin-right: 5px;
+  }
+
+  .treeview {
+    overflow-y: auto;
+  }
+
+  .attendance-staff {
+    background-color: #fff;
+    border: 1px solid #ebeef5;
+  }
+
+  .list-group {
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;
+  }
+
+  .list-group-item {
+    position: relative;
+    display: block;
+    padding: 10px 15px;
+    margin-bottom: -1px;
+    background-color: #fff;
+    border: 1px solid #ebeef5;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #f5f7fa;
+    }
+  }
+
+  .vc-node-selected {
+    background-color: #ecf5ff;
+    color: #409eff;
+  }
+
+  .text-center {
+    text-align: center;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/i18n/reportI18n.js b/src/i18n/reportI18n.js
index 39fb5e1..9d61011 100644
--- a/src/i18n/reportI18n.js
+++ b/src/i18n/reportI18n.js
@@ -5,6 +5,12 @@ import { messages as reportCustomComponentManageMessages } from '../views/report
 import { messages as reportCustomComponentRelManageMessages } from '../views/report/reportCustomComponentRelManageLang'
 import { messages as componentConditionManageMessages } from '../views/report/componentConditionManageLang'
 import { messages as reportCustomComponentFooterManageMessages } from '../views/report/reportCustomComponentFooterManageLang'
+
+import { messages as reportFeeSummaryMessages } from '../views/report/reportFeeSummaryLang'
+import { messages as reportFeeDetailMessages } from '../views/report/reportFeeDetailLang'
+import { messages as feeRemindMessages } from '../views/report/feeRemindLang'
+import { messages as dataReportMessages } from '../views/report/dataReportLang'
+
 export const messages = {
     en: {
 
@@ -14,6 +20,10 @@ export const messages = {
         ...reportCustomManageMessages.en,
         ...reportCustomComponentManageMessages.en,
         ...reportProficientMessages.en,
+        ...reportFeeSummaryMessages.en,
+        ...reportFeeDetailMessages.en,
+        ...feeRemindMessages.en,
+        ...dataReportMessages.en,
     },
     zh: {
         ...reportCustomComponentRelManageMessages.zh,
@@ -22,5 +32,9 @@ export const messages = {
         ...reportCustomManageMessages.zh,
         ...reportCustomComponentManageMessages.zh,
         ...reportProficientMessages.zh,
+        ...reportFeeSummaryMessages.zh,
+        ...reportFeeDetailMessages.zh,
+        ...feeRemindMessages.zh,
+        ...dataReportMessages.zh,
     }
 }
\ No newline at end of file
diff --git a/src/router/reportRouter.js b/src/router/reportRouter.js
index fffe3d3..9cd4a63 100644
--- a/src/router/reportRouter.js
+++ b/src/router/reportRouter.js
@@ -4,5 +4,25 @@ export default [
         name: '/pages/property/reportProficient',
         component: () => import('@/views/report/reportProficientList.vue')
     },
+    {
+        path: '/pages/property/reportFeeSummary',
+        name: '/pages/property/reportFeeSummary',
+        component: () => import('@/views/report/reportFeeSummaryList.vue')
+    },
+    {
+        path: '/pages/property/reportFeeDetail',
+        name: '/pages/property/reportFeeDetail',
+        component: () => import('@/views/report/reportFeeDetailList.vue')
+    },
+    {
+        path: '/pages/report/feeRemind',
+        name: '/pages/report/feeRemind',
+        component: () => import('@/views/report/feeRemindList.vue')
+    },
+    {
+        path:'/pages/report/dataReport',
+        name:'/pages/report/dataReport',
+        component: () => import('@/views/report/dataReportList.vue')
+        },
 
 ]
\ No newline at end of file
diff --git a/src/views/report/dataReportLang.js b/src/views/report/dataReportLang.js
new file mode 100644
index 0000000..f70251f
--- /dev/null
+++ b/src/views/report/dataReportLang.js
@@ -0,0 +1,110 @@
+export const messages = {
+  en: {
+    dataReport: {
+      timeRange: 'Time Range',
+      startDate: 'Start Date',
+      endDate: 'End Date',
+      to: 'to',
+      selectCommunity: 'Select Community',
+      today: 'Today',
+      yesterday: 'Yesterday',
+      last7Days: 'Last 7 Days',
+      last30Days: 'Last 30 Days',
+      feeStatistics: 'Fee Statistics',
+      orderStatistics: 'Order Statistics',
+      inoutStatistics: 'In/Out Statistics',
+      otherStatistics: 'Other Statistics',
+      building: 'Building',
+      roomCount: 'Room Count',
+      feeRoomCount: 'Fee Room Count',
+      receivedFee: 'Received Fee',
+      totalReceived: 'Total Received',
+      export: 'Export',
+      roomNumber: 'Room Number',
+      ownerName: 'Owner Name',
+      phoneNumber: 'Phone Number',
+      search: 'Search',
+      reset: 'Reset',
+      room: 'Room',
+      owner: 'Owner',
+      oweFee: 'Owe Fee',
+      totalOwe: 'Total Owe',
+      historyOwe: 'History Owe',
+      todayPaidCount: 'Today Paid Count',
+      todayPaidAmount: 'Today Paid Amount',
+      historyPaidCount: 'History Paid Count',
+      historyPaidAmount: 'History Paid Amount',
+      monthPaidCount: 'Month Paid Count',
+      remainingCount: 'Remaining Count',
+      paidRatio: 'Paid Ratio',
+      monthPaidAmount: 'Month Paid Amount',
+      monthRemaining: 'Month Remaining',
+      collectionRate: 'Collection Rate',
+      feeName: 'Fee Name',
+      receivedPeriod: 'Received Period',
+      cashier: 'Cashier',
+      paymentTime: 'Payment Time',
+      owePeriod: 'Owe Period',
+      oweAmount: 'Owe Amount',
+      receivedAmount: 'Received Amount',
+      selectBuilding: 'Select Building',
+      feeStartDate: 'Fee Start Date',
+      feeEndDate: 'Fee End Date',
+      noExportData: 'No data to export'
+    }
+  },
+  zh: {
+    dataReport: {
+      timeRange: '统计时间',
+      startDate: '开始日期',
+      endDate: '结束日期',
+      to: '至',
+      selectCommunity: '请选择小区',
+      today: '今日',
+      yesterday: '昨日',
+      last7Days: '近7日',
+      last30Days: '近30日',
+      feeStatistics: '费用类统计',
+      orderStatistics: '工单类统计',
+      inoutStatistics: '出入统计',
+      otherStatistics: '其他统计',
+      building: '楼栋',
+      roomCount: '户数',
+      feeRoomCount: '收费户数',
+      receivedFee: '实收',
+      totalReceived: '总实收',
+      export: '导出',
+      roomNumber: '房屋编号',
+      ownerName: '业主名称',
+      phoneNumber: '手机号',
+      search: '查询',
+      reset: '重置',
+      room: '房屋',
+      owner: '业主',
+      oweFee: '欠费',
+      totalOwe: '总欠费',
+      historyOwe: '历史欠费',
+      todayPaidCount: '本日已交户数',
+      todayPaidAmount: '本日已交金额',
+      historyPaidCount: '历史欠费清缴户',
+      historyPaidAmount: '历史欠费清缴金额',
+      monthPaidCount: '本月已收户数',
+      remainingCount: '剩余户数',
+      paidRatio: '已收户占比',
+      monthPaidAmount: '当月已收金额',
+      monthRemaining: '当月剩余未收',
+      collectionRate: '收费率',
+      feeName: '费用名称',
+      receivedPeriod: '实收时间段',
+      cashier: '收银员',
+      paymentTime: '交费时间',
+      owePeriod: '欠费时间段',
+      oweAmount: '欠费金额',
+      receivedAmount: '实收',
+      selectBuilding: '请选择楼栋',
+      feeStartDate: '费用开始时间',
+      feeEndDate: '费用结束时间',
+      noExportData: '没有可以导出的数据'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/report/dataReportList.vue b/src/views/report/dataReportList.vue
new file mode 100644
index 0000000..fcbc22d
--- /dev/null
+++ b/src/views/report/dataReportList.vue
@@ -0,0 +1,315 @@
+<template>
+  <div class="data-report-container">
+    <div class="box-card">
+      <div class="flex justify-between padding">
+        <div class="flex justify-start">
+          <div>
+            <span>{{ $t('dataReport.timeRange') }}：</span>
+            <el-date-picker v-model="dataReportInfo.conditions.startDate" type="date"
+              :placeholder="$t('dataReport.startDate')" style="width: 150px" @change="_changeDate" />
+            <span>{{ $t('dataReport.to') }}：</span>
+            <el-date-picker v-model="dataReportInfo.conditions.endDate" type="date"
+              :placeholder="$t('dataReport.endDate')" style="width: 150px" @change="_changeDate" />
+          </div>
+          <div v-if="dataReportInfo.communitys.length > 1" style="margin-left: 20px">
+            <el-select v-model="dataReportInfo.conditions.communityId" :placeholder="$t('dataReport.selectCommunity')"
+              style="width: 200px" @change="_changCommunity">
+              <el-option v-for="(item, index) in dataReportInfo.communitys" :key="index" :label="item.name"
+                :value="item.communityId" />
+            </el-select>
+          </div>
+        </div>
+        <div>
+          <el-button :type="dataReportInfo.curDay === 'today' ? 'primary' : ''" @click="_changeDate('today')">{{
+            $t('dataReport.today') }}</el-button>
+          <el-button :type="dataReportInfo.curDay === 'yesterday' ? 'primary' : ''" @click="_changeDate('yesterday')">{{
+            $t('dataReport.yesterday') }}</el-button>
+          <el-button :type="dataReportInfo.curDay === 'seven' ? 'primary' : ''" @click="_changeDate('seven')">{{
+            $t('dataReport.last7Days') }}</el-button>
+          <el-button :type="dataReportInfo.curDay === 'thirty' ? 'primary' : ''" @click="_changeDate('thirty')">{{
+            $t('dataReport.last30Days') }}</el-button>
+        </div>
+      </div>
+
+      <div class="flex justify-between ">
+        <el-card class="data-report-item">
+          <div class="data-report-title">{{ $t('dataReport.feeStatistics') }}</div>
+          <div class="flex flex-wrap">
+            <div v-for="(item, index) in dataReportInfo.fees" :key="index" class="data-report-card">
+              <div class="data-report-card-title">{{ item.name }}</div>
+              <div class="data-report-card-value">{{ item.value }}</div>
+            </div>
+          </div>
+        </el-card>
+
+        <el-card class="data-report-item">
+          <div class="data-report-title">{{ $t('dataReport.orderStatistics') }}</div>
+          <div class="flex flex-wrap">
+            <div v-for="(item, index) in dataReportInfo.orders" :key="index" class="data-report-card">
+              <div class="data-report-card-title">{{ item.name }}</div>
+              <div class="data-report-card-value">{{ item.value }}</div>
+            </div>
+          </div>
+        </el-card>
+
+        <el-card class="data-report-item">
+          <div class="data-report-title">{{ $t('dataReport.inoutStatistics') }}</div>
+          <div class="flex flex-wrap">
+            <div v-for="(item, index) in dataReportInfo.inouts" :key="index" class="data-report-card">
+              <div class="data-report-card-title">{{ item.name }}</div>
+              <div class="data-report-card-value">{{ item.value }}</div>
+            </div>
+          </div>
+        </el-card>
+
+        <el-card class="data-report-item">
+          <div class="data-report-title">{{ $t('dataReport.otherStatistics') }}</div>
+          <div class="flex flex-wrap">
+            <div v-for="(item, index) in dataReportInfo.others" :key="index" class="data-report-card">
+              <div class="data-report-card-title">{{ item.name }}</div>
+              <div class="data-report-card-value">{{ item.value }}</div>
+            </div>
+          </div>
+        </el-card>
+      </div>
+
+      <el-card>
+        <el-tabs v-model="dataReportInfo._currentTab" @tab-click="changeTab(dataReportInfo._currentTab)">
+          <el-tab-pane label="实收统计" name="dataReportEarnedStatistics" />
+          <el-tab-pane label="实收明细" name="dataReportEarnedDetailStatistics" />
+          <el-tab-pane label="收款方式统计" name="dataReportEarnedWayStatistics" />
+          <el-tab-pane label="欠费统计" name="dataReportOweStatistics" />
+          <el-tab-pane label="欠费明细" name="dataReportOweDetailStatistics" />
+          <el-tab-pane label="收缴情况" name="dataReportFeeStatistics" />
+          <el-tab-pane label="月实收明细" name="dataMonthReceivedStatistics" />
+          <el-tab-pane label="月欠费明细" name="dataMonthOweStatistics" />
+        </el-tabs>
+
+        <component :is="dataReportInfo._currentTab" :ref="dataReportInfo._currentTab"/>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import {
+  queryFeeDataReport,
+  queryOrderDataReport,
+  queryInoutDataReport,
+  queryOthersDataReport,
+  listMyEnteredCommunitys
+} from '@/api/report/dataReportApi'
+import DataReportEarnedStatistics from '@/components/report/DataReportEarnedStatistics'
+import DataReportEarnedDetailStatistics from '@/components/report/DataReportEarnedDetailStatistics'
+import DataReportEarnedWayStatistics from '@/components/report/DataReportEarnedWayStatistics'
+import DataReportOweStatistics from '@/components/report/DataReportOweStatistics'
+import DataReportOweDetailStatistics from '@/components/report/DataReportOweDetailStatistics'
+import DataReportFeeStatistics from '@/components/report/DataReportFeeStatistics'
+import DataMonthReceivedStatistics from '@/components/report/DataMonthReceivedStatistics'
+import DataMonthOweStatistics from '@/components/report/DataMonthOweStatistics'
+
+export default {
+  name: 'DataReportList',
+  components: {
+    DataReportEarnedStatistics,
+    DataReportEarnedDetailStatistics,
+    DataReportEarnedWayStatistics,
+    DataReportOweStatistics,
+    DataReportOweDetailStatistics,
+    DataReportFeeStatistics,
+    DataMonthReceivedStatistics,
+    DataMonthOweStatistics
+  },
+  data() {
+    return {
+      dataReportInfo: {
+        curDay: 'thirty',
+        _currentTab: 'dataReportEarnedStatistics',
+        fees: [],
+        orders: [],
+        inouts: [],
+        others: [],
+        communitys: [],
+        conditions: {
+          startDate: '',
+          endDate: '',
+          communityId: ''
+        }
+      }
+    }
+  },
+  created() {
+    this._initDate()
+    this.dataReportInfo.conditions.communityId = getCommunityId()
+    this._loadStaffCommunitys()
+    this._loadDataReportFee()
+    this._loadDataReportOrder()
+    this._loadDataReportInout()
+    this._loadDataReportOthers()
+  },
+  methods: {
+    _initDate() {
+      const _data = new Date()
+      let _month = _data.getMonth() + 1
+      let _newDate = ''
+      if (_month < 10) {
+        _newDate = _data.getFullYear() + '-0' + _month + '-01'
+      } else {
+        _newDate = _data.getFullYear() + '-' + _month + '-01'
+      }
+      this.dataReportInfo.conditions.startDate = _newDate
+      _data.setMonth(_data.getMonth() + 1)
+      _month = _data.getMonth() + 1
+      if (_month < 10) {
+        _newDate = _data.getFullYear() + '-0' + _month + '-01'
+      } else {
+        _newDate = _data.getFullYear() + '-' + _month + '-01'
+      }
+      this.dataReportInfo.conditions.endDate = _newDate
+    },
+    _changeDate(_day) {
+      this.dataReportInfo.curDay = _day
+      const _endDate = new Date()
+      if (_day === 'today') {
+        this.dataReportInfo.conditions.endDate = _endDate.getFullYear() + '-' + (_endDate.getMonth() + 1) + '-' + _endDate.getDate()
+        this.dataReportInfo.conditions.startDate = _endDate.getFullYear() + '-' + (_endDate.getMonth() + 1) + '-' + _endDate.getDate()
+      } else if (_day === 'yesterday') {
+        _endDate.setDate(_endDate.getDate() - 1)
+        this.dataReportInfo.conditions.endDate = _endDate.getFullYear() + '-' + (_endDate.getMonth() + 1) + '-' + _endDate.getDate()
+        this.dataReportInfo.conditions.startDate = _endDate.getFullYear() + '-' + (_endDate.getMonth() + 1) + '-' + _endDate.getDate()
+      } else if (_day === 'seven') {
+        this.dataReportInfo.conditions.endDate = _endDate.getFullYear() + '-' + (_endDate.getMonth() + 1) + '-' + _endDate.getDate()
+        _endDate.setDate(_endDate.getDate() - 7)
+        this.dataReportInfo.conditions.startDate = _endDate.getFullYear() + '-' + (_endDate.getMonth() + 1) + '-' + _endDate.getDate()
+      } else if (_day === 'thirty') {
+        this.dataReportInfo.conditions.endDate = _endDate.getFullYear() + '-' + (_endDate.getMonth() + 1) + '-' + _endDate.getDate()
+        _endDate.setDate(_endDate.getDate() - 30)
+        this.dataReportInfo.conditions.startDate = _endDate.getFullYear() + '-' + (_endDate.getMonth() + 1) + '-' + _endDate.getDate()
+      }
+      this._loadDataReportFee()
+      this._loadDataReportOrder()
+      this._loadDataReportInout()
+      this._loadDataReportOthers()
+      this.changeTab(this.dataReportInfo._currentTab)
+    },
+    async _loadDataReportFee() {
+      try {
+        const { data } = await queryFeeDataReport(this.dataReportInfo.conditions)
+        this.dataReportInfo.fees = data
+      } catch (error) {
+        console.error('Failed to load fee data:', error)
+      }
+    },
+    async _loadDataReportOrder() {
+      try {
+        const { data } = await queryOrderDataReport(this.dataReportInfo.conditions)
+        this.dataReportInfo.orders = data
+      } catch (error) {
+        console.error('Failed to load order data:', error)
+      }
+    },
+    async _loadDataReportInout() {
+      try {
+        const { data } = await queryInoutDataReport(this.dataReportInfo.conditions)
+        this.dataReportInfo.inouts = data
+      } catch (error) {
+        console.error('Failed to load inout data:', error)
+      }
+    },
+    async _loadDataReportOthers() {
+      try {
+        const { data } = await queryOthersDataReport(this.dataReportInfo.conditions)
+        this.dataReportInfo.others = data
+      } catch (error) {
+        console.error('Failed to load other data:', error)
+      }
+    },
+    changeTab(_tab) {
+      this.dataReportInfo._currentTab = _tab
+      setTimeout(() => {
+        this.$refs[_tab].open(this.dataReportInfo.conditions)
+      },500)
+    },
+    async _loadStaffCommunitys() {
+      try {
+        const { communitys } = await listMyEnteredCommunitys({
+          _uid: '123mlkdinkldldijdhuudjdjkkd',
+          page: 1,
+          row: 100
+        })
+        this.dataReportInfo.communitys = communitys
+      } catch (error) {
+        console.error('Failed to load communities:', error)
+      }
+    },
+    _changCommunity() {
+      this.changeTab(this.dataReportInfo._currentTab)
+      this._loadDataReportFee()
+      this._loadDataReportOrder()
+      this._loadDataReportInout()
+      this._loadDataReportOthers()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.data-report-container {
+  padding: 20px;
+
+  .data-report-item {
+    width: 24%;
+    margin-bottom: 20px;
+
+    .data-report-title {
+      font-weight: bold;
+      margin-bottom: 15px;
+      font-size: 16px;
+    }
+
+    .data-report-card {
+      width: 25%;
+      margin: 5px;
+      padding: 10px;
+      border: 1px solid #4297E5;
+      border-radius: 4px;
+
+      .data-report-card-title {
+        font-size: 12px;
+        color: #666;
+      }
+
+      .data-report-card-value {
+        font-size: 18px;
+        font-weight: bold;
+        margin-top: 5px;
+      }
+    }
+  }
+
+  .margin-bottom {
+    margin-bottom: 20px;
+  }
+
+  .padding {
+    padding: 10px 0;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .justify-between {
+    justify-content: space-between;
+  }
+
+  .justify-start {
+    justify-content: flex-start;
+  }
+
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/report/feeRemindLang.js b/src/views/report/feeRemindLang.js
new file mode 100644
index 0000000..5bb87d1
--- /dev/null
+++ b/src/views/report/feeRemindLang.js
@@ -0,0 +1,70 @@
+export const messages = {
+  en: {
+    feeRemind: {
+      queryCondition: 'Query Conditions',
+      hide: 'Hide',
+      more: 'More',
+      objNamePlaceholder: 'Please enter room number/contract name/license plate',
+      ownerNamePlaceholder: 'Please enter owner name',
+      linkPlaceholder: 'Please enter owner phone',
+      feeConfigPlaceholder: 'Please select fee item',
+      communityPlaceholder: 'Please select community',
+      query: 'Query',
+      reset: 'Reset',
+      prePaymentRemind: 'Pre-payment Reminder',
+      deadlineRemind: 'Expiration Reminder'
+    },
+    reportPrePaymentFee: {
+      export: 'Export',
+      feeId: 'Fee ID',
+      objName: 'Room/Vehicle/Contract',
+      feeName: 'Fee Item',
+      startTime: 'Fee Start Time',
+      oweDay: 'Days Until Start',
+      tip: 'Note: This table shows fees starting within 7 days'
+    },
+    reportDeadlineFee: {
+      export: 'Export',
+      feeId: 'Fee ID',
+      objName: 'Room/Vehicle/Contract',
+      feeName: 'Fee Item',
+      deadlineTime: 'Fee End Time',
+      oweDay: 'Days Until End',
+      tip: 'Note: This table shows fees ending within 7 days'
+    }
+  },
+  zh: {
+    feeRemind: {
+      queryCondition: '查询条件',
+      hide: '隐藏',
+      more: '更多',
+      objNamePlaceholder: '请填写房屋编号/合同名称/车牌号',
+      ownerNamePlaceholder: '请填写业主名称',
+      linkPlaceholder: '请填写业主手机号',
+      feeConfigPlaceholder: '请选择费用项',
+      communityPlaceholder: '请选择小区',
+      query: '查询',
+      reset: '重置',
+      prePaymentRemind: '预缴费提醒',
+      deadlineRemind: '到期提醒'
+    },
+    reportPrePaymentFee: {
+      export: '导出',
+      feeId: '费用编号',
+      objName: '房号/车辆/合同',
+      feeName: '费用项',
+      startTime: '费用开始时间',
+      oweDay: '距离开始时间(天)',
+      tip: '温馨提示：此表反馈7天内开始缴费的费用'
+    },
+    reportDeadlineFee: {
+      export: '导出',
+      feeId: '费用编号',
+      objName: '房号/车辆/合同',
+      feeName: '费用项',
+      deadlineTime: '费用结束时间',
+      oweDay: '距离结束时间(天)',
+      tip: '温馨提示：此表反馈7天内缴费结束的费用'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/report/feeRemindList.vue b/src/views/report/feeRemindList.vue
new file mode 100644
index 0000000..6a8e1e4
--- /dev/null
+++ b/src/views/report/feeRemindList.vue
@@ -0,0 +1,183 @@
+<template>
+  <div class="fee-remind-container">
+    <el-card class="box-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('feeRemind.queryCondition') }}</span>
+        <el-button type="text" style="float: right; padding: 3px 0" @click="_moreCondition()">
+          {{ feeRemindInfo.moreCondition ? $t('feeRemind.hide') : $t('feeRemind.more') }}
+        </el-button>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="4">
+          <el-input v-model.trim="feeRemindInfo.conditions.objName" :placeholder="$t('feeRemind.objNamePlaceholder')"
+            clearable />
+        </el-col>
+        <el-col :span="4">
+          <el-input v-model.trim="feeRemindInfo.conditions.ownerName" :placeholder="$t('feeRemind.ownerNamePlaceholder')"
+            clearable />
+        </el-col>
+        <el-col :span="4">
+          <el-input v-model.trim="feeRemindInfo.conditions.link" :placeholder="$t('feeRemind.linkPlaceholder')"
+            clearable />
+        </el-col>
+        <el-col :span="4">
+          <el-select v-model="feeRemindInfo.conditions.configId" :placeholder="$t('feeRemind.feeConfigPlaceholder')"
+            style="width:100%" clearable>
+            <el-option v-for="item in feeRemindInfo.feeConfigs" :key="item.configId" :label="item.feeName"
+              :value="item.configId" />
+          </el-select>
+        </el-col>
+        <el-col v-if="feeRemindInfo.communitys.length > 1" :span="4">
+          <el-select v-model="feeRemindInfo.conditions.communityId" :placeholder="$t('feeRemind.communityPlaceholder')"
+            style="width:100%" @change="_changCommunity" clearable>
+            <el-option v-for="item in feeRemindInfo.communitys" :key="item.communityId" :label="item.name"
+              :value="item.communityId" />
+          </el-select>
+        </el-col>
+        <el-col :span="4">
+          <el-button type="primary" @click="_queryMethod">
+            <i class="el-icon-search"></i>
+            {{ $t('feeRemind.query') }}
+          </el-button>
+          <el-button @click="_resetMethod">
+            <i class="el-icon-refresh"></i>
+            {{ $t('feeRemind.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <el-card class="box-card margin-top">
+      <el-tabs v-model="feeRemindInfo._currentTab" @tab-click="changeTab">
+        <el-tab-pane :label="$t('feeRemind.prePaymentRemind')" name="reportPrePaymentFee">
+          <report-pre-payment-fee v-if="feeRemindInfo._currentTab === 'reportPrePaymentFee'" ref="prePaymentFee" />
+        </el-tab-pane>
+        <el-tab-pane :label="$t('feeRemind.deadlineRemind')" name="reportDeadlineFee">
+          <report-deadline-fee v-if="feeRemindInfo._currentTab === 'reportDeadlineFee'" ref="deadlineFee" />
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import ReportPrePaymentFee from '@/components/report/reportPrePaymentFee'
+import ReportDeadlineFee from '@/components/report/reportDeadlineFee'
+import {
+  listFeeConfigs,
+  listMyEnteredCommunitys
+} from '@/api/report/feeRemindApi'
+
+export default {
+  name: 'FeeRemindList',
+  components: {
+    ReportPrePaymentFee,
+    ReportDeadlineFee
+  },
+  data() {
+    return {
+      feeRemindInfo: {
+        _currentTab: 'reportPrePaymentFee',
+        feeConfigs: [],
+        moreCondition: false,
+        communitys: [],
+        conditions: {
+          objName: '',
+          configId: '',
+          ownerName: '',
+          link: '',
+          communityId: ''
+        }
+      }
+    }
+  },
+  created() {
+    this.feeRemindInfo.conditions.communityId = getCommunityId()
+    this._loadStaffCommunitys()
+    this._listFeeConfigs()
+  },
+  methods: {
+    changeTab(tab) {
+      this.feeRemindInfo._currentTab = tab.name || tab
+      setTimeout(() => {
+        if (tab.name === 'reportPrePaymentFee') {
+          this.$refs.prePaymentFee && this.$refs.prePaymentFee.loadData(this.feeRemindInfo.conditions)
+        } else {
+          this.$refs.deadlineFee && this.$refs.deadlineFee.loadData(this.feeRemindInfo.conditions)
+        }
+      }, 500)
+
+    },
+    _queryMethod() {
+      this.changeTab(this.feeRemindInfo._currentTab)
+    },
+    _resetMethod() {
+      this.feeRemindInfo.conditions = {
+        objName: '',
+        configId: '',
+        ownerName: '',
+        link: '',
+        communityId: getCommunityId()
+      }
+      this.changeTab(this.feeRemindInfo._currentTab)
+    },
+    async _listFeeConfigs() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.feeRemindInfo.conditions.communityId,
+          isDefault: 'F'
+        }
+        const data = await listFeeConfigs(params)
+        this.feeRemindInfo.feeConfigs = data.feeConfigs
+      } catch (error) {
+        console.error('Failed to load fee configs:', error)
+      }
+    },
+    _moreCondition() {
+      this.feeRemindInfo.moreCondition = !this.feeRemindInfo.moreCondition
+    },
+    async _loadStaffCommunitys() {
+      try {
+        const params = {
+          _uid: '123mlkdinkldldijdhuudjdjkkd',
+          page: 1,
+          row: 100
+        }
+        const data = await listMyEnteredCommunitys(params)
+        this.feeRemindInfo.communitys = data.communitys
+      } catch (error) {
+        console.error('Failed to load communities:', error)
+      }
+    },
+    _changCommunity() {
+      this._listFeeConfigs()
+      this.changeTab(this.feeRemindInfo._currentTab)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fee-remind-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+  }
+
+  .margin-top {
+    margin-top: 20px;
+  }
+
+  .el-col {
+    margin-bottom: 10px;
+  }
+
+  .el-button+.el-button {
+    margin-left: 10px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/report/reportFeeDetailLang.js b/src/views/report/reportFeeDetailLang.js
new file mode 100644
index 0000000..ca8f1cf
--- /dev/null
+++ b/src/views/report/reportFeeDetailLang.js
@@ -0,0 +1,126 @@
+export const messages = {
+  en: {
+    reportFeeDetail: {
+      search: {
+        title: 'Search Conditions',
+        startDate: 'Start Date',
+        endDate: 'End Date',
+        objName: 'Room No/Contract/Car No',
+        ownerName: 'Owner Name',
+        link: 'Owner Phone',
+        community: 'Community'
+      },
+      placeholder: {
+        startDate: 'Please select start date',
+        endDate: 'Please select end date',
+        objName: 'Please enter room no/contract name/car no',
+        ownerName: 'Please enter owner name',
+        link: 'Please enter owner phone',
+        community: 'Please select community'
+      },
+      hide: 'Hide',
+      more: 'More',
+      tabs: {
+        room: 'Room Fee Details',
+        owner: 'Owner Fee Details',
+        contract: 'Contract Fee Details',
+        car: 'Car Fee Details'
+      }
+    },
+    reportFeeDetailRoom: {
+      all: 'All',
+      room: 'Room',
+      owner: 'Owner',
+      oweFee: 'Owe Fee',
+      receivedFee: 'Received Fee',
+      owe: ' (Owe)',
+      received: ' (Received)'
+    },
+    reportFeeDetailOwner: {
+      owner: 'Owner',
+      room: 'Room',
+      oweFee: 'Owe Fee',
+      receivedFee: 'Received Fee',
+      owe: ' (Owe)',
+      received: ' (Received)'
+    },
+    reportFeeDetailContract: {
+      contract: 'Contract',
+      owner: 'Owner',
+      oweFee: 'Owe Fee',
+      receivedFee: 'Received Fee',
+      owe: ' (Owe)',
+      received: ' (Received)'
+    },
+    reportFeeDetailCar: {
+      car: 'Car',
+      owner: 'Owner',
+      oweFee: 'Owe Fee',
+      receivedFee: 'Received Fee',
+      owe: ' (Owe)',
+      received: ' (Received)'
+    }
+  },
+  zh: {
+    reportFeeDetail: {
+      search: {
+        title: '查询条件',
+        startDate: '开始日期',
+        endDate: '结束日期',
+        objName: '房屋编号/合同/车牌号',
+        ownerName: '业主名称',
+        link: '业主手机号',
+        community: '小区'
+      },
+      placeholder: {
+        startDate: '请选择开始日期',
+        endDate: '请选择结束日期',
+        objName: '请输入房屋编号/合同名称/车牌号',
+        ownerName: '请输入业主名称',
+        link: '请输入业主手机号',
+        community: '请选择小区'
+      },
+      hide: '隐藏',
+      more: '更多',
+      tabs: {
+        room: '房屋费用明细',
+        owner: '业主费用明细',
+        contract: '合同费用明细',
+        car: '车辆费用明细'
+      }
+    },
+    reportFeeDetailRoom: {
+      all: '全部',
+      room: '房屋',
+      owner: '业主',
+      oweFee: '欠费',
+      receivedFee: '实收',
+      owe: ' (欠费)',
+      received: ' (实收)'
+    },
+    reportFeeDetailOwner: {
+      owner: '业主',
+      room: '房屋',
+      oweFee: '欠费',
+      receivedFee: '实收',
+      owe: ' (欠费)',
+      received: ' (实收)'
+    },
+    reportFeeDetailContract: {
+      contract: '合同',
+      owner: '业主',
+      oweFee: '欠费',
+      receivedFee: '实收',
+      owe: ' (欠费)',
+      received: ' (实收)'
+    },
+    reportFeeDetailCar: {
+      car: '车辆',
+      owner: '业主',
+      oweFee: '欠费',
+      receivedFee: '实收',
+      owe: ' (欠费)',
+      received: ' (实收)'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/report/reportFeeDetailList.vue b/src/views/report/reportFeeDetailList.vue
new file mode 100644
index 0000000..9f08024
--- /dev/null
+++ b/src/views/report/reportFeeDetailList.vue
@@ -0,0 +1,213 @@
+<template>
+  <div class="report-fee-detail-container">
+    <!-- 查询条件 -->
+    <el-card class="search-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('reportFeeDetail.search.title') }}</span>
+        <div class="header-tools">
+          <el-button type="text" @click="toggleMoreCondition" style="margin-right:10px;">
+            {{ reportFeeDetailInfo.moreCondition ? $t('reportFeeDetail.hide') : $t('reportFeeDetail.more') }}
+          </el-button>
+        </div>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-date-picker v-model="reportFeeDetailInfo.conditions.startDate" type="date"
+            :placeholder="$t('reportFeeDetail.placeholder.startDate')" style="width:100%">
+          </el-date-picker>
+        </el-col>
+        <el-col :span="6">
+          <el-date-picker v-model="reportFeeDetailInfo.conditions.endDate" type="date"
+            :placeholder="$t('reportFeeDetail.placeholder.endDate')" style="width:100%">
+          </el-date-picker>
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model.trim="reportFeeDetailInfo.conditions.objName"
+            :placeholder="$t('reportFeeDetail.placeholder.objName')">
+          </el-input>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary" @click="queryMethod">
+            <i class="el-icon-search"></i>
+            {{ $t('common.search') }}
+          </el-button>
+          <el-button @click="resetMethod">
+            <i class="el-icon-refresh"></i>
+            {{ $t('common.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" v-show="reportFeeDetailInfo.moreCondition">
+        <el-col :span="6">
+          <el-input v-model.trim="reportFeeDetailInfo.conditions.ownerName"
+            :placeholder="$t('reportFeeDetail.placeholder.ownerName')">
+          </el-input>
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model.trim="reportFeeDetailInfo.conditions.link"
+            :placeholder="$t('reportFeeDetail.placeholder.link')">
+          </el-input>
+        </el-col>
+        <el-col :span="6" v-if="reportFeeDetailInfo.communitys.length > 1">
+          <el-select v-model="reportFeeDetailInfo.conditions.communityId" @change="changCommunity" style="width:100%">
+            <el-option disabled :value="''" :label="$t('reportFeeDetail.placeholder.community')">
+            </el-option>
+            <el-option v-for="(item, index) in reportFeeDetailInfo.communitys" :key="index" :label="item.name"
+              :value="item.communityId">
+            </el-option>
+          </el-select>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 内容区域 -->
+    <el-card class="content-card">
+      <el-tabs v-model="reportFeeDetailInfo._currentTab" @tab-click="changeTab">
+        <el-tab-pane label="房屋费用明细" name="reportFeeDetailRoom">
+          <report-fee-detail-room v-if="reportFeeDetailInfo._currentTab === 'reportFeeDetailRoom'"
+            ref="reportFeeDetailRoom">
+          </report-fee-detail-room>
+        </el-tab-pane>
+        <el-tab-pane label="业主费用明细" name="reportFeeDetailOwner">
+          <report-fee-detail-owner v-if="reportFeeDetailInfo._currentTab === 'reportFeeDetailOwner'"
+            ref="reportFeeDetailOwner">
+          </report-fee-detail-owner>
+        </el-tab-pane>
+        <el-tab-pane label="合同费用明细" name="reportFeeDetailContract">
+          <report-fee-detail-contract v-if="reportFeeDetailInfo._currentTab === 'reportFeeDetailContract'"
+            ref="reportFeeDetailContract">
+          </report-fee-detail-contract>
+        </el-tab-pane>
+        <el-tab-pane label="车辆费用明细" name="reportFeeDetailCar">
+          <report-fee-detail-car v-if="reportFeeDetailInfo._currentTab === 'reportFeeDetailCar'" ref="reportFeeDetailCar">
+          </report-fee-detail-car>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import ReportFeeDetailRoom from '@/components/report/reportFeeDetailRoom'
+import ReportFeeDetailOwner from '@/components/report/reportFeeDetailOwner'
+import ReportFeeDetailContract from '@/components/report/reportFeeDetailContract'
+import ReportFeeDetailCar from '@/components/report/reportFeeDetailCar'
+import { loadStaffCommunitys } from '@/api/report/reportFeeDetailApi'
+
+export default {
+  name: 'ReportFeeDetailList',
+  components: {
+    ReportFeeDetailRoom,
+    ReportFeeDetailOwner,
+    ReportFeeDetailContract,
+    ReportFeeDetailCar
+  },
+  data() {
+    return {
+      reportFeeDetailInfo: {
+        _currentTab: 'reportFeeDetailRoom',
+        floors: [],
+        moreCondition: false,
+        communitys: [],
+        conditions: {
+          floorId: '',
+          objName: '',
+          startDate: '',
+          endDate: '',
+          configId: '',
+          feeTypeCd: '',
+          ownerName: '',
+          link: '',
+          communityId: ''
+        }
+      }
+    }
+  },
+  created() {
+    this.initDate()
+    this.loadStaffCommunitys()
+    this.reportFeeDetailInfo.conditions.communityId = getCommunityId()
+    this.changeTab(this.reportFeeDetailInfo._currentTab)
+  },
+  methods: {
+    initDate() {
+      const now = new Date()
+      const year = now.getFullYear()
+      let month = now.getMonth() + 1
+      month = month < 10 ? `0${month}` : month
+
+      this.reportFeeDetailInfo.conditions.startDate = `${year}-${month}-01`
+
+      const nextMonth = new Date(year, month, 1)
+      const nextYear = nextMonth.getFullYear()
+      let nextMonthNum = nextMonth.getMonth() + 1
+      nextMonthNum = nextMonthNum < 10 ? `0${nextMonthNum}` : nextMonthNum
+
+      this.reportFeeDetailInfo.conditions.endDate = `${nextYear}-${nextMonthNum}-01`
+    },
+    async loadStaffCommunitys() {
+      try {
+        const params = {
+          _uid: '123mlkdinkldldijdhuudjdjkkd',
+          page: 1,
+          row: 100
+        }
+        const data = await loadStaffCommunitys(params)
+        this.reportFeeDetailInfo.communitys = data.communitys
+      } catch (error) {
+        console.error('加载小区列表失败:', error)
+      }
+    },
+    changeTab(tab) {
+      this.reportFeeDetailInfo._currentTab = tab.name || tab
+      setTimeout(() => {
+        this.$refs[tab.name || tab].open(this.reportFeeDetailInfo.conditions)
+      },500)
+      
+    },
+    queryMethod() {
+      this.changeTab(this.reportFeeDetailInfo._currentTab)
+    },
+    resetMethod() {
+      this.reportFeeDetailInfo.conditions = {
+        floorId: '',
+        objName: '',
+        startDate: '',
+        endDate: '',
+        configId: '',
+        feeTypeCd: '',
+        ownerName: '',
+        link: '',
+        communityId: getCommunityId()
+      }
+      this.initDate()
+      this.changeTab(this.reportFeeDetailInfo._currentTab)
+    },
+    changCommunity() {
+      this.changeTab(this.reportFeeDetailInfo._currentTab)
+    },
+    toggleMoreCondition() {
+      this.reportFeeDetailInfo.moreCondition = !this.reportFeeDetailInfo.moreCondition
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.report-fee-detail-container {
+  padding: 20px;
+
+  .search-card {
+    margin-bottom: 20px;
+
+    .header-tools {
+      float: right;
+    }
+  }
+
+  .content-card {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/report/reportFeeSummaryLang.js b/src/views/report/reportFeeSummaryLang.js
new file mode 100644
index 0000000..af9bdaa
--- /dev/null
+++ b/src/views/report/reportFeeSummaryLang.js
@@ -0,0 +1,78 @@
+export const messages = {
+  en: {
+    reportFeeSummary: {
+      queryCondition: 'Query Conditions',
+      selectStartDate: 'Select start date',
+      selectEndDate: 'Select end date',
+      inputRoomNumber: 'Input room number',
+      inputOwnerName: 'Input owner name',
+      inputOwnerPhone: 'Input owner phone',
+      selectFeeType: 'Select fee type',
+      selectCommunity: 'Select community',
+      feeSummaryTable: 'Fee Summary Table',
+      updateDaily: 'Updated daily',
+      totalRooms: 'Total Rooms',
+      chargeRooms: 'Charge Rooms',
+      arrearsRooms: 'Arrears Rooms',
+      arrearsFormula: 'History Arrears + Current Arrears = Total Arrears',
+      historyArrears: 'History Arrears',
+      currentArrears: 'Current Arrears',
+      totalArrears: 'Total Arrears',
+      actualPaymentFormula: 'Arrears Recovery + Current Partial + Advance = Actual Payment',
+      arrearsRecovery: 'Arrears Recovery',
+      currentPartial: 'Current Partial',
+      advancePayment: 'Advance Payment',
+      actualPayment: 'Actual Payment',
+      currentReceivable: 'Current Receivable',
+      currentActual: 'Current Actual',
+      roomChargeRate: 'Room Charge Rate',
+      chargeRate: 'Charge Rate',
+      clearanceRate: 'Clearance Rate',
+      floorFeeSummary: 'Floor Fee Summary',
+      configFeeSummary: 'Config Fee Summary',
+      floorFeeRateStatistics: 'Floor Charge Rate Statistics',
+      configFeeRateStatistics: 'Config Charge Rate Statistics',
+      dateError: 'Start date must be earlier than end date',
+      exportSuccess: 'Export success',
+      exportFailed: 'Export failed'
+    }
+  },
+  zh: {
+    reportFeeSummary: {
+      queryCondition: '查询条件',
+      selectStartDate: '请选择开始日期',
+      selectEndDate: '请选择结束日期',
+      inputRoomNumber: '请填写房屋编号',
+      inputOwnerName: '请填写业主名称',
+      inputOwnerPhone: '请填写业主手机号',
+      selectFeeType: '请选择费用大类',
+      selectCommunity: '请选择小区',
+      feeSummaryTable: '费用汇总表',
+      updateDaily: '按天更新',
+      totalRooms: '总户数',
+      chargeRooms: '收费户',
+      arrearsRooms: '欠费户',
+      arrearsFormula: '历史欠费+当期欠费=欠费',
+      historyArrears: '历史欠费',
+      currentArrears: '当期欠费',
+      totalArrears: '总欠费',
+      actualPaymentFormula: '欠费追回+当期部分+预交=实缴',
+      arrearsRecovery: '欠费追回',
+      currentPartial: '当期部分',
+      advancePayment: '预交',
+      actualPayment: '实缴',
+      currentReceivable: '当期应收',
+      currentActual: '当期实收',
+      roomChargeRate: '户收费率',
+      chargeRate: '收费率',
+      clearanceRate: '清缴率',
+      floorFeeSummary: '楼栋费用汇总',
+      configFeeSummary: '费用项汇总',
+      floorFeeRateStatistics: '楼栋收费率统计',
+      configFeeRateStatistics: '费用项收费率统计',
+      dateError: '开始日期必须早于结束日期',
+      exportSuccess: '导出成功',
+      exportFailed: '导出失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/report/reportFeeSummaryList.vue b/src/views/report/reportFeeSummaryList.vue
new file mode 100644
index 0000000..8e4286c
--- /dev/null
+++ b/src/views/report/reportFeeSummaryList.vue
@@ -0,0 +1,340 @@
+<template>
+  <div class="report-fee-summary-container animated fadeInRight">
+    <el-row class="flex justify-start">
+      <el-col :span="2" class="padding-r-0">
+        <select-community-floor ref="selectCommunityFloor" />
+      </el-col>
+      <el-col :span="22">
+        <el-card class="box-card">
+          <div slot="header" class="flex justify-between">
+            <span>{{ $t('reportFeeSummary.queryCondition') }}</span>
+          </div>
+          <div class="text item">
+            <el-row :gutter="20">
+              <el-col :span="4">
+                <el-date-picker v-model="reportFeeSummaryInfo.conditions.startDate" type="date"
+                  :placeholder="$t('reportFeeSummary.selectStartDate')" style="width: 100%" @change="handleDateChange" />
+              </el-col>
+              <el-col :span="4">
+                <el-date-picker v-model="reportFeeSummaryInfo.conditions.endDate" type="date"
+                  :placeholder="$t('reportFeeSummary.selectEndDate')" style="width: 100%" @change="handleDateChange" />
+              </el-col>
+              <el-col :span="4">
+                <el-input v-model.trim="reportFeeSummaryInfo.conditions.objName"
+                  :placeholder="$t('reportFeeSummary.inputRoomNumber')" clearable />
+              </el-col>
+              <el-col :span="4">
+                <el-input v-model.trim="reportFeeSummaryInfo.conditions.ownerName"
+                  :placeholder="$t('reportFeeSummary.inputOwnerName')" clearable />
+              </el-col>
+              <el-col :span="4">
+                <el-input v-model.trim="reportFeeSummaryInfo.conditions.link"
+                  :placeholder="$t('reportFeeSummary.inputOwnerPhone')" clearable />
+              </el-col>
+              <el-col :span="4">
+                <el-button type="primary" @click="_queryMethod">
+                  <i class="el-icon-search"></i>
+                  {{ $t('common.search') }}
+                </el-button>
+                <el-button @click="_resetMethod">
+                  <i class="el-icon-refresh"></i>
+                  {{ $t('common.reset') }}
+                </el-button>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20" class="margin-top">
+              <el-col :span="4">
+                <el-select v-model="reportFeeSummaryInfo.conditions.feeTypeCd"
+                  :placeholder="$t('reportFeeSummary.selectFeeType')" style="width: 100%" clearable>
+                  <el-option v-for="(item, index) in reportFeeSummaryInfo.feeTypeCds" :key="index" :label="item.name"
+                    :value="item.statusCd" />
+                </el-select>
+              </el-col>
+              <el-col v-if="reportFeeSummaryInfo.communitys.length > 1" :span="4">
+                <el-select v-model="reportFeeSummaryInfo.conditions.communityId"
+                  :placeholder="$t('reportFeeSummary.selectCommunity')" style="width: 100%" @change="_changCommunity">
+                  <el-option v-for="(item, index) in reportFeeSummaryInfo.communitys" :key="index" :label="item.name"
+                    :value="item.communityId" />
+                </el-select>
+              </el-col>
+            </el-row>
+
+            <el-row v-show="reportFeeSummaryInfo.moreCondition" class="margin-top">
+              <el-col :span="24">
+                <el-checkbox-group v-model="reportFeeSummaryInfo.configIds">
+                  <el-checkbox v-for="(item, index) in reportFeeSummaryInfo.feeConfigs" :key="index"
+                    :label="item.configId">
+                    {{ item.feeName }}
+                  </el-checkbox>
+                </el-checkbox-group>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+
+        <el-card class="box-card margin-top">
+          <div slot="header" class="flex justify-between">
+            <div>
+              <span>{{ $t('reportFeeSummary.feeSummaryTable') }}</span>
+              <span class="el-icon-info popover-show" style="cursor: pointer;"></span>
+              <span>({{ $t('reportFeeSummary.updateDaily') }})</span>
+            </div>
+            <div style="float: right;">
+              <el-button type="primary" size="small" @click="_exportExcel">
+                <i class="el-icon-download"></i>
+                {{ $t('common.export') }}
+              </el-button>
+            </div>
+          </div>
+          <div class="text item">
+            <el-table :data="reportFeeSummaryInfo.fees" border style="width: 100%">
+              <el-table-column prop="roomCount" :label="$t('reportFeeSummary.totalRooms')" align="center" />
+              <el-table-column prop="feeRoomCount" :label="$t('reportFeeSummary.chargeRooms')" align="center" />
+              <el-table-column prop="oweRoomCount" :label="$t('reportFeeSummary.arrearsRooms')" align="center" />
+              <el-table-column :label="$t('reportFeeSummary.arrearsFormula')" align="center" colspan="3">
+                <el-table-column prop="hisOweFee" :label="$t('reportFeeSummary.historyArrears')" align="center" />
+                <el-table-column prop="curOweFee" :label="$t('reportFeeSummary.currentArrears')" align="center" />
+                <el-table-column :label="$t('reportFeeSummary.totalArrears')" align="center">
+                  <template slot-scope="scope">
+                    {{ (scope.row.curOweFee + scope.row.hisOweFee).toFixed(2) }}
+                  </template>
+                </el-table-column>
+              </el-table-column>
+              <el-table-column :label="$t('reportFeeSummary.actualPaymentFormula')" align="center" colspan="4">
+                <el-table-column prop="hisReceivedFee" :label="$t('reportFeeSummary.arrearsRecovery')" align="center" />
+                <el-table-column :label="$t('reportFeeSummary.currentPartial')" align="center">
+                  <template slot-scope="scope">
+                    {{ (scope.row.receivedFee - scope.row.hisReceivedFee - scope.row.preReceivedFee).toFixed(2) }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="preReceivedFee" :label="$t('reportFeeSummary.advancePayment')" align="center" />
+                <el-table-column prop="receivedFee" :label="$t('reportFeeSummary.actualPayment')" align="center" />
+              </el-table-column>
+              <el-table-column prop="curReceivableFee" :label="$t('reportFeeSummary.currentReceivable')" align="center" />
+              <el-table-column :label="$t('reportFeeSummary.currentActual')" align="center">
+                <template slot-scope="scope">
+                  {{ (scope.row.curReceivableFee - scope.row.curOweFee).toFixed(2) }}
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('reportFeeSummary.roomChargeRate')" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.feeRoomCount > 0 ? (((scope.row.feeRoomCount - scope.row.oweRoomCount) /
+                    scope.row.feeRoomCount * 100).toFixed(2) + '%') : '0%' }}
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('reportFeeSummary.chargeRate')" align="center">
+                <template slot-scope="scope">
+                  {{ scope.row.curReceivableFee > 0 ? (((scope.row.curReceivableFee - scope.row.curOweFee) /
+                    scope.row.curReceivableFee * 100).toFixed(2) + '%') : '0%' }}
+                </template>
+              </el-table-column>
+              <el-table-column :label="$t('reportFeeSummary.clearanceRate')" align="center">
+                <template slot-scope="scope">
+                  {{ (scope.row.hisReceivedFee + scope.row.hisOweFee) > 0 ? ((scope.row.hisReceivedFee /
+                    (scope.row.hisReceivedFee + scope.row.hisOweFee) * 100).toFixed(2) + '%') : '0%' }}
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-card>
+
+        <div class="margin-top">
+          <floor-fee-summary ref="floorFeeSummary" />
+        </div>
+        <div class="margin-top">
+          <config-fee-summary ref="configFeeSummary" />
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getDict, getCommunityId } from '@/api/community/communityApi'
+import { queryReportFeeSummary, exportData, queryCommunitys, queryFeeConfigs } from '@/api/report/reportFeeSummaryApi'
+import SelectCommunityFloor from '@/components/report/selectCommunityFloor'
+import FloorFeeSummary from '@/components/report/floorFeeSummary'
+import ConfigFeeSummary from '@/components/report/configFeeSummary'
+
+export default {
+  name: 'ReportFeeSummaryList',
+  components: {
+    SelectCommunityFloor,
+    FloorFeeSummary,
+    ConfigFeeSummary
+  },
+  data() {
+    return {
+      reportFeeSummaryInfo: {
+        fees: [],
+        feeConfigs: [],
+        floors: [],
+        configIds: [],
+        feeTypeCds: [],
+        communitys: [],
+        moreCondition: false,
+        conditions: {
+          floorId: '',
+          objName: '',
+          startDate: '',
+          endDate: '',
+          configId: '',
+          feeTypeCd: '',
+          ownerName: '',
+          link: '',
+          communityId: ''
+        }
+      }
+    }
+  },
+  created() {
+    this.initData()
+  },
+  methods: {
+    async initData() {
+      this.reportFeeSummaryInfo.conditions.communityId = await getCommunityId()
+      this._initDate()
+      this._loadStaffCommunitys()
+      this._listFeeConfigs()
+      this.getFeeTypeDict()
+      this.$refs.selectCommunityFloor.open({
+        callBack: (floor) => {
+          this.reportFeeSummaryInfo.conditions.floorId = floor.floorId
+          this._listFees()
+        }
+      })
+      this._listFees()
+    },
+    _initDate() {
+      const now = new Date()
+      const year = now.getFullYear()
+      const month = now.getMonth() + 1
+      const lastDay = new Date(year, month, 0).getDate()
+
+      this.reportFeeSummaryInfo.conditions.startDate = `${year}-${month.toString().padStart(2, '0')}-01`
+      this.reportFeeSummaryInfo.conditions.endDate = `${year}-${month.toString().padStart(2, '0')}-${lastDay}`
+    },
+    handleDateChange() {
+      if (this.reportFeeSummaryInfo.conditions.startDate && this.reportFeeSummaryInfo.conditions.endDate) {
+        const start = new Date(this.reportFeeSummaryInfo.conditions.startDate)
+        const end = new Date(this.reportFeeSummaryInfo.conditions.endDate)
+
+        if (start > end) {
+          this.$message.error(this.$t('reportFeeSummary.dateError'))
+          this.reportFeeSummaryInfo.conditions.endDate = ''
+        }
+      }
+    },
+    async getFeeTypeDict() {
+      try {
+        this.reportFeeSummaryInfo.feeTypeCds = await getDict('pay_fee_config', 'fee_type_cd')
+      } catch (error) {
+        console.error('Failed to get fee type dict:', error)
+      }
+    },
+    async _listFees() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          ...this.reportFeeSummaryInfo.conditions,
+          configIds: this.reportFeeSummaryInfo.configIds.join(',')
+        }
+
+        const { data } = await queryReportFeeSummary(params)
+        this.reportFeeSummaryInfo.fees = data
+
+        // Notify child components
+        this.$refs.floorFeeSummary.notify(params)
+        this.$refs.configFeeSummary.notify(params)
+      } catch (error) {
+        console.error('Failed to query fee summary:', error)
+      }
+    },
+    async _loadStaffCommunitys() {
+      try {
+        const { data } = await queryCommunitys()
+        this.reportFeeSummaryInfo.communitys = data.communitys
+      } catch (error) {
+        console.error('Failed to load communities:', error)
+      }
+    },
+    async _listFeeConfigs() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.reportFeeSummaryInfo.conditions.communityId,
+          isDefault: 'F'
+        }
+
+        const { data } = await queryFeeConfigs(params)
+        this.reportFeeSummaryInfo.feeConfigs = data.feeConfigs
+      } catch (error) {
+        console.error('Failed to list fee configs:', error)
+      }
+    },
+    _queryMethod() {
+      this._listFees()
+    },
+    _resetMethod() {
+      this.reportFeeSummaryInfo.conditions = {
+        ...this.reportFeeSummaryInfo.conditions,
+        roomNum: '',
+        ownerName: '',
+        link: '',
+        feeTypeCd: '',
+        floorName: '',
+        floorId: '',
+        unitId: '',
+        configId: ''
+      }
+      this.reportFeeSummaryInfo.configIds = []
+      this._listFees()
+    },
+    async _exportExcel() {
+      try {
+        const params = {
+          ...this.reportFeeSummaryInfo.conditions,
+          pagePath: 'reportFeeSummary'
+        }
+
+        await exportData(params)
+        this.$message.success(this.$t('reportFeeSummary.exportSuccess'))
+        this.$router.push('/pages/property/downloadTempFile?tab=下载中心')
+      } catch (error) {
+        console.error('Failed to export:', error)
+        this.$message.error(this.$t('reportFeeSummary.exportFailed'))
+      }
+    },
+    _changCommunity() {
+      this._listFeeConfigs()
+      this._listFees()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.report-fee-summary-container {
+  padding: 20px;
+
+  .margin-top {
+    margin-top: 20px;
+  }
+
+  .padding-r-0 {
+    padding-right: 0;
+  }
+
+  .popover-show {
+    margin-left: 10px;
+    color: #409EFF;
+  }
+
+  .el-checkbox {
+    margin-right: 15px;
+  }
+}
+</style>
\ No newline at end of file