From 10d3499d1187318a4b2a02d42ab69d95107f31a8 Mon Sep 17 00:00:00 2001
From: wuxw <928255095@qq.com>
Date: Tue, 3 Jun 2025 10:20:32 +0800
Subject: [PATCH] 开发完成 admin 台账功能

---
 src/api/fee/adminOweFeeDetailApi.js            |  44 ++++++++++++++++++++++++++++++++++++++++++++
 src/api/fee/adminPayFeeDetailApi.js            |  65 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/api/report/communityFeeSummaryApi.js       |  64 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/api/report/operationalAnalysisApi.js       |  41 +++++++++++++++++++++++++++++++++++++++++
 src/components/fee/SelectAdminCommunity.vue    |  83 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/fee/communityFloorTree.vue      |  66 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/report/SelectAdminCommunity.vue | 106 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/i18n/commonLang.js                         |   6 ++++--
 src/i18n/index.js                              |  12 ++++++++++++
 src/router/index.js                            |  36 ++++++++++++++++++++++++++++--------
 src/views/fee/adminOweFeeDetailLang.js         |  92 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/adminOweFeeDetailList.vue        | 254 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/adminPayFeeDetailLang.js         | 134 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/adminPayFeeDetailList.vue        | 431 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/report/communityFeeSummaryLang.js    |  72 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/report/communityFeeSummaryList.vue   | 202 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/report/operationalAnalysisLang.js    |  38 ++++++++++++++++++++++++++++++++++++++
 src/views/report/operationalAnalysisList.vue   | 144 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 18 files changed, 1880 insertions(+), 10 deletions(-)
 create mode 100644 src/api/fee/adminOweFeeDetailApi.js
 create mode 100644 src/api/fee/adminPayFeeDetailApi.js
 create mode 100644 src/api/report/communityFeeSummaryApi.js
 create mode 100644 src/api/report/operationalAnalysisApi.js
 create mode 100644 src/components/fee/SelectAdminCommunity.vue
 create mode 100644 src/components/fee/communityFloorTree.vue
 create mode 100644 src/components/report/SelectAdminCommunity.vue
 create mode 100644 src/views/fee/adminOweFeeDetailLang.js
 create mode 100644 src/views/fee/adminOweFeeDetailList.vue
 create mode 100644 src/views/fee/adminPayFeeDetailLang.js
 create mode 100644 src/views/fee/adminPayFeeDetailList.vue
 create mode 100644 src/views/report/communityFeeSummaryLang.js
 create mode 100644 src/views/report/communityFeeSummaryList.vue
 create mode 100644 src/views/report/operationalAnalysisLang.js
 create mode 100644 src/views/report/operationalAnalysisList.vue

diff --git a/src/api/fee/adminOweFeeDetailApi.js b/src/api/fee/adminOweFeeDetailApi.js
new file mode 100644
index 0000000..8915e89
--- /dev/null
+++ b/src/api/fee/adminOweFeeDetailApi.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询欠费明细
+export function queryAdminOweFeeDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.queryAdminOweFeeDetail',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve({
+          data: res.data,
+          total: res.total
+        })
+      } else {
+        reject(new Error(res.msg || '查询欠费明细失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询小区楼层树
+export function queryCommunityFloorTree(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/community.queryCommunityFloorTree',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '查询小区楼层树失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/adminPayFeeDetailApi.js b/src/api/fee/adminPayFeeDetailApi.js
new file mode 100644
index 0000000..76320db
--- /dev/null
+++ b/src/api/fee/adminPayFeeDetailApi.js
@@ -0,0 +1,65 @@
+import request from '@/utils/request'
+
+// 查询缴费明细列表
+export function queryAdminPayFeeDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.queryAdminPayFeeDetail',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      console.log(res)
+      if (res.code == 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '查询缴费明细失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 导出缴费明细
+export function exportFeeData(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/export.exportData',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '导出缴费明细失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取管理员小区列表
+export function listAdminCommunitys(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/community.listAdminCommunitys',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve({
+          data: res.data,
+          total: res.total
+        })
+      } else {
+        reject(new Error(res.msg || '获取小区列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/report/communityFeeSummaryApi.js b/src/api/report/communityFeeSummaryApi.js
new file mode 100644
index 0000000..3b9db17
--- /dev/null
+++ b/src/api/report/communityFeeSummaryApi.js
@@ -0,0 +1,64 @@
+import request from '@/utils/request'
+
+// 获取费用汇总数据
+export function getCommunityFeeSummary(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/admin.getCommunityFeeSummary',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取费用汇总数据失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取管理员社区列表
+export function listAdminCommunitys(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/community.listAdminCommunitys',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取管理员社区列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 导出数据
+export function exportCommunityFeeSummary(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/export.exportData',
+      method: 'get',
+      params: {
+        ...params,
+        pagePath: 'communityFeeSummary'
+      }
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '导出费用汇总数据失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/report/operationalAnalysisApi.js b/src/api/report/operationalAnalysisApi.js
new file mode 100644
index 0000000..a1069a7
--- /dev/null
+++ b/src/api/report/operationalAnalysisApi.js
@@ -0,0 +1,41 @@
+import request from '@/utils/request'
+
+// 获取运营分析数据
+export function getCommunityOperationalAnalysis(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/admin.getCommunityOperationalAnalysis',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取运营分析数据失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取管理员小区列表
+export function listAdminCommunitys(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/community.listAdminCommunitys',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取小区列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/components/fee/SelectAdminCommunity.vue b/src/components/fee/SelectAdminCommunity.vue
new file mode 100644
index 0000000..b47c41c
--- /dev/null
+++ b/src/components/fee/SelectAdminCommunity.vue
@@ -0,0 +1,83 @@
+<template>
+  <el-card>
+    <div class="community-selector">
+      <el-scrollbar style="height: 650px">
+        <ul class="community-list">
+          <li
+            v-for="(item, index) in communitys"
+            :key="index"
+            class="community-item"
+            :class="{ 'selected': communityId === item.communityId }"
+            @click="handleSelectCommunity(item)"
+          >
+            {{ item.name }}
+          </li>
+        </ul>
+      </el-scrollbar>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { listAdminCommunitys } from '@/api/fee/adminPayFeeDetailApi'
+
+export default {
+  name: 'SelectAdminCommunity',
+  data() {
+    return {
+      communitys: [
+        { name: this.$t('adminPayFeeDetail.allCommunities'), communityId: '' }
+      ],
+      communityId: ''
+    }
+  },
+  created() {
+    this.loadCommunities()
+  },
+  methods: {
+    async loadCommunities() {
+      try {
+        const params = {
+          page: 1,
+          row: 100
+        }
+        const { data } = await listAdminCommunitys(params)
+        this.communitys = [...this.communitys, ...data]
+      } catch (error) {
+        this.$message.error(this.$t('adminPayFeeDetail.fetchCommunityError'))
+      }
+    },
+    handleSelectCommunity(community) {
+      this.communityId = community.communityId
+      this.$emit('changeCommunity', community)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.community-selector {
+  .community-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    
+    .community-item {
+      padding: 12px 15px;
+      cursor: pointer;
+      text-align: center;
+      border-bottom: 1px solid #ebeef5;
+      transition: all 0.3s;
+      
+      &:hover {
+        background-color: #f5f7fa;
+      }
+      
+      &.selected {
+        background-color: #409eff;
+        color: white;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/fee/communityFloorTree.vue b/src/components/fee/communityFloorTree.vue
new file mode 100644
index 0000000..f3dd11b
--- /dev/null
+++ b/src/components/fee/communityFloorTree.vue
@@ -0,0 +1,66 @@
+<template>
+  <el-card class="tree-card">
+    <el-tree ref="tree" :data="treeData" node-key="id" :props="defaultProps" :highlight-current="true"
+      :expand-on-click-node="false" @node-click="handleNodeClick" />
+  </el-card>
+</template>
+
+<script>
+import { queryCommunityFloorTree } from '@/api/fee/adminOweFeeDetailApi'
+
+export default {
+  name: 'CommunityFloorTree',
+  data() {
+    return {
+      treeData: [],
+      defaultProps: {
+        children: 'children',
+        label: 'text'
+      },
+      callName: ''
+    }
+  },
+  mounted() {
+    this.initCommunityFloorTree()
+  },
+  methods: {
+    async initCommunityFloorTree() {
+      await this.loadCommunityFloorTree()
+    },
+    async loadCommunityFloorTree() {
+      try {
+        // 这里应该是从API获取树形数据
+       const {data} = await queryCommunityFloorTree()
+       console.log(data)
+        // 模拟数据
+        this.treeData = data
+      } catch (error) {
+        console.error(error)
+      }
+    },
+    handleNodeClick(data) {
+      if (data.id.startsWith('c_')) {
+        this.$emit('chooseFloor', {
+          communityName: data.communityName,
+          communityId: data.communityId,
+          floorNum: '',
+          floorId: ''
+        })
+      } else if (data.id.startsWith('f_')) {
+        this.$emit('chooseFloor', {
+          communityName:'',
+          communityId: '',
+          floorNum: data.floorNum,
+          floorId: data.floorId
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tree-card {
+  height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/SelectAdminCommunity.vue b/src/components/report/SelectAdminCommunity.vue
new file mode 100644
index 0000000..92b44af
--- /dev/null
+++ b/src/components/report/SelectAdminCommunity.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="select-admin-community">
+    <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 communityList"
+            :key="index"
+            class="list-group-item node-orgTree"
+            :class="{ 'vc-node-selected': selectedCommunityId === item.communityId }"
+            @click="handleCommunityClick(item)"
+          >
+            {{ item.name }}
+          </li>
+        </ul>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { listAdminCommunitys } from '@/api/report/communityFeeSummaryApi'
+
+export default {
+  name: 'SelectAdminCommunity',
+  data() {
+    return {
+      communityList: [
+        { name: this.$t('communityFeeSummary.allCommunities'), communityId: '' }
+      ],
+      selectedCommunityId: ''
+    }
+  },
+  created() {
+    this.loadAdminCommunities()
+  },
+  methods: {
+    async loadAdminCommunities() {
+      try {
+        const params = {
+          _uid: '123mlkdinkldldijdhuudjdjkkd',
+          page: 1,
+          row: 100
+        }
+        
+        const { data } = await listAdminCommunitys(params)
+        this.communityList = [...this.communityList, ...data]
+      } catch (error) {
+        console.error('Failed to load communities:', error)
+      }
+    },
+    handleCommunityClick(community) {
+      this.selectedCommunityId = community.communityId
+      this.$emit('changeCommunity', community)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.select-admin-community {
+  .border-radius {
+    border-radius: 4px;
+  }
+  
+  .treeview {
+    overflow-y: auto;
+  }
+  
+  .list-group {
+    padding-left: 0;
+    margin-bottom: 0;
+    
+    &-item {
+      position: relative;
+      display: block;
+      padding: 10px 15px;
+      margin-bottom: -1px;
+      background-color: #fff;
+      border: 1px solid #ddd;
+      cursor: pointer;
+      
+      &:first-child {
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+      }
+      
+      &:last-child {
+        margin-bottom: 0;
+        border-bottom-right-radius: 4px;
+        border-bottom-left-radius: 4px;
+      }
+      
+      &.vc-node-selected {
+        background-color: #409EFF;
+        color: #fff;
+        border-color: #409EFF;
+      }
+      
+      &:hover:not(.vc-node-selected) {
+        background-color: #f5f5f5;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/i18n/commonLang.js b/src/i18n/commonLang.js
index cd5dc6b..50ea879 100644
--- a/src/i18n/commonLang.js
+++ b/src/i18n/commonLang.js
@@ -31,7 +31,8 @@ export const messages = {
         female: 'Female',
         male: 'Male',
         all: 'All',
-        refresh: 'Refresh'
+        refresh: 'Refresh',
+        export: 'Export'
       }
     },
     zh: {
@@ -66,7 +67,8 @@ export const messages = {
         female: '女',
         male: '男',
         all: '全部',
-        refresh: '刷新'
+        refresh: '刷新',
+        export: '导出'
       }
     }
   } 
\ No newline at end of file
diff --git a/src/i18n/index.js b/src/i18n/index.js
index 2ed6ac6..522bcf9 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -84,6 +84,10 @@ import { messages as adminInoutMessages } from '../views/iot/adminInoutLang'
 import { messages as adminCarInoutMessages } from '../views/iot/adminCarInoutLang'
 import { messages as adminChargeOrderMessages } from '../views/iot/adminChargeOrderLang'
 import { messages as adminMeterRechargeMessages } from '../views/iot/adminMeterRechargeLang'
+import { messages as operationalAnalysisMessages } from '../views/report/operationalAnalysisLang'
+import { messages as communityFeeSummaryMessages } from '../views/report/communityFeeSummaryLang'
+import { messages as adminPayFeeDetailMessages } from '../views/fee/adminPayFeeDetailLang'
+import { messages as adminOweFeeDetailMessages } from '../views/fee/adminOweFeeDetailLang'
 
 Vue.use(VueI18n)
 
@@ -172,6 +176,10 @@ const messages = {
     ...adminCarInoutMessages.en,
     ...adminChargeOrderMessages.en,
     ...adminMeterRechargeMessages.en,
+    ...operationalAnalysisMessages.en,
+    ...communityFeeSummaryMessages.en,
+    ...adminPayFeeDetailMessages.en,
+    ...adminOweFeeDetailMessages.en,
   },
   zh: {
     ...loginMessages.zh,
@@ -256,6 +264,10 @@ const messages = {
     ...adminCarInoutMessages.zh,
     ...adminChargeOrderMessages.zh,
     ...adminMeterRechargeMessages.zh,
+    ...operationalAnalysisMessages.zh,
+    ...communityFeeSummaryMessages.zh,
+    ...adminPayFeeDetailMessages.zh,
+    ...adminOweFeeDetailMessages.zh,
   }
 }
 
diff --git a/src/router/index.js b/src/router/index.js
index a6ba365..845b309 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -397,15 +397,35 @@ const routes = [
         component: () => import('@/views/iot/adminCarInoutList.vue')
       },
       {
-        path:'/pages/iot/adminChargeOrder',
-        name:'/pages/iot/adminChargeOrder',
+        path: '/pages/iot/adminChargeOrder',
+        name: '/pages/iot/adminChargeOrder',
         component: () => import('@/views/iot/adminChargeOrderList.vue')
-        },
-        {
-          path:'/pages/iot/adminMeterRecharge',
-          name:'/pages/iot/adminMeterRecharge',
-          component: () => import('@/views/iot/adminMeterRechargeList.vue')
-          },
+      },
+      {
+        path: '/pages/iot/adminMeterRecharge',
+        name: '/pages/iot/adminMeterRecharge',
+        component: () => import('@/views/iot/adminMeterRechargeList.vue')
+      },
+      {
+        path: '/pages/report/operationalAnalysis',
+        name: '/pages/report/operationalAnalysis',
+        component: () => import('@/views/report/operationalAnalysisList.vue')
+      },
+      {
+        path: '/pages/report/communityFeeSummary',
+        name: '/pages/report/communityFeeSummary',
+        component: () => import('@/views/report/communityFeeSummaryList.vue')
+      },
+      {
+        path: '/pages/fee/adminPayFeeDetail',
+        name: '/pages/fee/adminPayFeeDetail',
+        component: () => import('@/views/fee/adminPayFeeDetailList.vue')
+      },
+      {
+        path: '/pages/fee/adminOweFeeDetail',
+        name: '/pages/fee/adminOweFeeDetail',
+        component: () => import('@/views/fee/adminOweFeeDetailList.vue')
+      },
       // 其他子路由可以在这里添加
     ]
   },
diff --git a/src/views/fee/adminOweFeeDetailLang.js b/src/views/fee/adminOweFeeDetailLang.js
new file mode 100644
index 0000000..63b6ec8
--- /dev/null
+++ b/src/views/fee/adminOweFeeDetailLang.js
@@ -0,0 +1,92 @@
+export const messages = {
+  en: {
+    adminOweFeeDetail: {
+      search: {
+        title: 'Search Conditions',
+        feeTypeCd: 'Please select fee type',
+        objNameLike: 'Please enter room number',
+        startTime: 'Please select start time',
+        endTime: 'Please select end time',
+        ownerNameLike: 'Please enter owner name'
+      },
+      list: {
+        title: 'Arrears Details'
+      },
+      table: {
+        index: 'No.',
+        communityName: 'Community Name',
+        objName: 'Room Number',
+        ownerName: 'Owner',
+        ownerTel: 'Owner Tel',
+        builtUpArea: 'Area',
+        feeName: 'Fee Item',
+        startTime: 'Start Time',
+        endTime: 'End Time',
+        oweDay: 'Arrears Days',
+        oweAmount: 'Arrears Amount'
+      },
+      summary: {
+        subtotal: 'Subtotal',
+        total: 'Total',
+        owe: 'Arrears',
+        yuan: 'Yuan'
+      },
+      tips: {
+        startTime: 'Start time: the billing start time of the created fee',
+        oweDayDeposit: 'Arrears days (days): The arrears days of the deposit fee item is the number of days from the start time of the fee to the current day',
+        oweDayOther: 'For fee items other than deposits, the arrears days are the number of days from the start time to the end time of the fee',
+        oweAmount: 'Arrears amount: the fee payable during the arrears period'
+      },
+      feeType: {
+        property: 'Property Fee',
+        parking: 'Parking Fee'
+      },
+      fetchError: 'Failed to fetch arrears details'
+    }
+  },
+  zh: {
+    adminOweFeeDetail: {
+      search: {
+        title: '查询条件',
+        feeTypeCd: '请选择费用大类',
+        objNameLike: '请填写房屋编号',
+        startTime: '请选择开始时间',
+        endTime: '请选择结束时间',
+        ownerNameLike: '请填写业主名称'
+      },
+      list: {
+        title: '欠费明细表'
+      },
+      table: {
+        index: '费用编号',
+        communityName: '小区名称',
+        objName: '房号',
+        ownerName: '业主',
+        ownerTel: '业主电话',
+        builtUpArea: '面积',
+        feeName: '费用项',
+        startTime: '开始时间',
+        endTime: '结束时间',
+        oweDay: '欠费时长(天)',
+        oweAmount: '欠费金额'
+      },
+      summary: {
+        subtotal: '小计',
+        total: '大计',
+        owe: '欠费',
+        yuan: '元'
+      },
+      tips: {
+        startTime: '费用开始时间：所创建费用的计费起始时间',
+        oweDayDeposit: '欠费时长（天）：押金费用项欠费时长是费用开始时间到当天的天数',
+        oweDayOther: '除押金外的费用项欠费时长是费用的开始时间到费用的结束时间的天数',
+        oweAmount: '欠费金额：欠费周期内应缴费用'
+      },
+      feeType: {
+        property: '物业费',
+        parking: '停车费'
+      },
+      fetchError: '获取欠费明细失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/adminOweFeeDetailList.vue b/src/views/fee/adminOweFeeDetailList.vue
new file mode 100644
index 0000000..b3785b9
--- /dev/null
+++ b/src/views/fee/adminOweFeeDetailList.vue
@@ -0,0 +1,254 @@
+<template>
+  <div class="admin-owe-fee-detail-container animated fadeInRight">
+    <el-row :gutter="20" class="flex justify-start">
+      <el-col :span="4" class="room-floor-unit-tree">
+        <community-floor-tree ref="communityFloorTree" @chooseFloor="handleChooseFloor" />
+      </el-col>
+      <el-col :span="20" class="margin-top-xs">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix text-left">
+            <span>{{ $t('adminOweFeeDetail.search.title') }}</span>
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="4">
+              <el-select v-model="searchForm.feeTypeCd" :placeholder="$t('adminOweFeeDetail.search.feeTypeCd')" clearable
+                class="w-full">
+                <el-option v-for="item in feeTypeCds" :key="item.statusCd" :label="item.name" :value="item.statusCd" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-input v-model="searchForm.objNameLike" :placeholder="$t('adminOweFeeDetail.search.objNameLike')"
+                clearable />
+            </el-col>
+            <el-col :span="4">
+              <el-date-picker v-model="searchForm.startTime" type="date"
+                :placeholder="$t('adminOweFeeDetail.search.startTime')" class="w-full" />
+            </el-col>
+            <el-col :span="4">
+              <el-date-picker v-model="searchForm.endTime" type="date"
+                :placeholder="$t('adminOweFeeDetail.search.endTime')" class="w-full" />
+            </el-col>
+            <el-col :span="4">
+              <el-input v-model="searchForm.ownerNameLike" :placeholder="$t('adminOweFeeDetail.search.ownerNameLike')"
+                clearable />
+            </el-col>
+            <el-col :span="4">
+              <el-button type="primary" @click="handleSearch">
+                {{ $t('common.search') }}
+              </el-button>
+              <el-button @click="handleReset" style="margin-left: 10px;">
+                {{ $t('common.reset') }}
+              </el-button>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <el-card class="box-card margin-top">
+          <div slot="header" class="clearfix  text-left" >
+            <span>{{ $t('adminOweFeeDetail.list.title') }}</span>
+          </div>
+          <el-table :data="tableData" border style="width: 100%" v-loading="loading">
+            <el-table-column prop="index" :label="$t('adminOweFeeDetail.table.index')" width="80" align="center" />
+            <el-table-column prop="communityName" :label="$t('adminOweFeeDetail.table.communityName')" align="center" />
+            <el-table-column prop="objName" :label="$t('adminOweFeeDetail.table.objName')" align="center" />
+            <el-table-column prop="ownerName" :label="$t('adminOweFeeDetail.table.ownerName')" align="center" />
+            <el-table-column prop="ownerTel" :label="$t('adminOweFeeDetail.table.ownerTel')" align="center" />
+            <el-table-column prop="builtUpArea" :label="$t('adminOweFeeDetail.table.builtUpArea')" align="center" />
+            <el-table-column prop="feeName" :label="$t('adminOweFeeDetail.table.feeName')" align="center" />
+            <el-table-column prop="startTime" :label="$t('adminOweFeeDetail.table.startTime')" align="center" />
+            <el-table-column prop="endTime" :label="$t('adminOweFeeDetail.table.endTime')" align="center" />
+            <el-table-column prop="oweDay" :label="$t('adminOweFeeDetail.table.oweDay')" align="center" />
+            <el-table-column prop="oweAmount" :label="$t('adminOweFeeDetail.table.oweAmount')" align="center" />
+          </el-table>
+
+          <el-row class="margin-top  text-left">
+            <el-col :span="24">
+              <div>
+                <span class="font-bold">{{ $t('adminOweFeeDetail.summary.subtotal') }}</span>
+                <span class="margin-left">
+                  {{ $t('adminOweFeeDetail.summary.owe') }}: {{ totalPreferentialAmount }}
+                  {{ $t('adminOweFeeDetail.summary.yuan') }}
+                </span>
+              </div>
+              <div>
+                <span class="font-bold">{{ $t('adminOweFeeDetail.summary.total') }}</span>
+                <span class="margin-left">
+                  {{ $t('adminOweFeeDetail.summary.owe') }}: {{ allOweAmount }}
+                  {{ $t('adminOweFeeDetail.summary.yuan') }}
+                </span>
+              </div>
+            </el-col>
+          </el-row>
+
+          <el-row class="margin-top  text-left">
+            <el-col :span="12">
+              <div>{{ $t('adminOweFeeDetail.tips.startTime') }}</div>
+              <div>{{ $t('adminOweFeeDetail.tips.oweDayDeposit') }}</div>
+              <div>{{ $t('adminOweFeeDetail.tips.oweDayOther') }}</div>
+              <div>{{ $t('adminOweFeeDetail.tips.oweAmount') }}</div>
+            </el-col>
+            <el-col :span="12" class="text-right">
+              <el-pagination :current-page="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>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { queryAdminOweFeeDetail } from '@/api/fee/adminOweFeeDetailApi'
+import CommunityFloorTree from '@/components/fee/communityFloorTree'
+
+export default {
+  name: 'AdminOweFeeDetailList',
+  components: {
+    CommunityFloorTree
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        floorId: '',
+        floorName: '',
+        roomNum: '',
+        objNameLike: '',
+        feeTypeCd: '',
+        startTime: '',
+        endTime: '',
+        communityId: '',
+        ownerNameLike: ''
+      },
+      feeTypeCds: [],
+      tableData: [],
+      totalPreferentialAmount: 0,
+      allOweAmount: 0,
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.initData()
+  },
+  methods: {
+    async initData() {
+      try {
+        this.loading = true
+        await this.getFeeTypeCds()
+        await this.getList()
+      } catch (error) {
+        console.error(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    async getFeeTypeCds() {
+      // 这里应该是获取费用类型的字典数据
+      // 假设从字典接口获取数据
+      this.feeTypeCds = [
+        { statusCd: '1', name: this.$t('adminOweFeeDetail.feeType.property') },
+        { statusCd: '2', name: this.$t('adminOweFeeDetail.feeType.parking') }
+      ]
+    },
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          ...this.searchForm,
+          page: this.pagination.current,
+          row: this.pagination.size
+        }
+        const { data, total } = await queryAdminOweFeeDetail(params)
+        this.tableData = data.map((item, index) => ({
+          ...item,
+          index: index + 1
+        }))
+        this.pagination.total = total
+
+        // 计算小计
+        let _totalPreferentialAmount = 0.0
+        data.forEach(item => {
+          _totalPreferentialAmount += parseFloat(item.oweAmount)
+        })
+        this.totalPreferentialAmount = _totalPreferentialAmount.toFixed(2)
+
+        if (data.length > 0) {
+          this.allOweAmount = data[0].allOweAmount || 0.0.toFixed(2)
+        } else {
+          this.allOweAmount = 0.0.toFixed(2)
+        }
+      } catch (error) {
+        console.error(error)
+        this.$message.error(this.$t('adminOweFeeDetail.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.pagination.current = 1
+      this.getList()
+    },
+    handleReset() {
+      this.searchForm = {
+        floorId: '',
+        floorName: '',
+        roomNum: '',
+        objNameLike: '',
+        feeTypeCd: '',
+        startTime: '',
+        endTime: '',
+        communityId: '',
+        ownerNameLike: ''
+      }
+      this.handleSearch()
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getList()
+    },
+    handleChooseFloor(floor) {
+      this.searchForm.floorId = floor.floorId
+      this.searchForm.floorName = floor.floorNum
+      this.searchForm.communityId = floor.communityId
+      this.searchForm.communityName = floor.communityName
+      this.handleSearch()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.admin-owe-fee-detail-container {
+  padding: 20px;
+
+  .margin-top {
+    margin-top: 20px;
+  }
+
+  .margin-left {
+    margin-left: 10px;
+  }
+
+  .font-bold {
+    font-weight: bold;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+
+  .room-floor-unit-tree {
+    padding-right: 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/fee/adminPayFeeDetailLang.js b/src/views/fee/adminPayFeeDetailLang.js
new file mode 100644
index 0000000..07f453a
--- /dev/null
+++ b/src/views/fee/adminPayFeeDetailLang.js
@@ -0,0 +1,134 @@
+export const messages = {
+  en: {
+    adminPayFeeDetail: {
+      search: {
+        title: 'Search Conditions',
+        startTime: 'Payment Start Time',
+        startTimePlaceholder: 'Please select payment start time',
+        endTime: 'Payment End Time',
+        endTimePlaceholder: 'Please select payment end time',
+        paymentMethod: 'Payment Method',
+        paymentMethodPlaceholder: 'Please select payment method',
+        feeStatus: 'Fee Status',
+        feeStatusPlaceholder: 'Please select fee status',
+        feeType: 'Fee Type',
+        feeTypePlaceholder: 'Please select fee type',
+        feeStartTime: 'Fee Start Time',
+        feeStartTimePlaceholder: 'Please select fee start time',
+        feeEndTime: 'Fee End Time',
+        feeEndTimePlaceholder: 'Please select fee end time',
+        payerObjName: 'Room/Car Number',
+        payerObjNamePlaceholder: 'Room number or license plate number'
+      },
+      list: {
+        title: 'Payment Records',
+        tooltip: 'All room payment record details'
+      },
+      table: {
+        orderId: 'Order No',
+        payerInfo: 'Room/Owner',
+        feeInfo: 'Fee Type>Fee Item',
+        feeStatus: 'Fee Status',
+        paymentMethod: 'Payment Method',
+        feePeriod: 'Payment Period',
+        paymentTime: 'Payment Time',
+        cashier: 'Cashier',
+        payableAmount: 'Payable/Receivable Amount(Yuan)',
+        receivedAmount: 'Received Amount(Yuan)',
+        withholdAmount: 'Account Deduction(Yuan)',
+        discountAmount: 'Discount/Deduction Amount(Yuan)',
+        giftAmount: 'Gift Amount(Yuan)',
+        lateFee: 'Late Fee(Yuan)',
+        area: 'Area(sqm)',
+        parkingSpace: 'Parking Space',
+        remark: 'Remark'
+      },
+      summary: {
+        subtotal: 'Subtotal',
+        total: 'Total',
+        receivable: 'Receivable',
+        received: 'Received',
+        discount: 'Discount',
+        deduction: 'Deduction',
+        gift: 'Gift',
+        lateFee: 'Late Fee',
+        yuan: 'Yuan',
+        discountDesc: 'Discount amount: discount amount generated under discount rules and no arrears discount rules',
+        deductionDesc: 'Deduction amount: deduction amount generated under deduction rules',
+        giftDesc: 'Gift amount: payable amount of gift months under gift rules',
+        lateFeeDesc: 'Late fee: default late fee generated under default late fee rules, additional late fee to be paid'
+      },
+      allCommunities: 'All Communities',
+      fetchError: 'Failed to fetch payment details',
+      fetchCommunityError: 'Failed to fetch community list',
+      exportSuccess: 'Export started successfully',
+      exportError: 'Failed to export data'
+    }
+  },
+  zh: {
+    adminPayFeeDetail: {
+      search: {
+        title: '查询条件',
+        startTime: '缴费开始时间',
+        startTimePlaceholder: '请选择缴费开始时间',
+        endTime: '缴费结束时间',
+        endTimePlaceholder: '请选择缴费结束时间',
+        paymentMethod: '支付方式',
+        paymentMethodPlaceholder: '请选择支付方式',
+        feeStatus: '费用状态',
+        feeStatusPlaceholder: '请选择费用状态',
+        feeType: '费用类型',
+        feeTypePlaceholder: '请选择费用类型',
+        feeStartTime: '收费开始时间',
+        feeStartTimePlaceholder: '请选择收费开始时间',
+        feeEndTime: '收费结束时间',
+        feeEndTimePlaceholder: '请选择收费结束时间',
+        payerObjName: '房屋/车牌号',
+        payerObjNamePlaceholder: '房屋编号或者车牌号'
+      },
+      list: {
+        title: '缴费记录',
+        tooltip: '所有房屋缴费记录明细'
+      },
+      table: {
+        orderId: '订单号',
+        payerInfo: '房号/业主',
+        feeInfo: '费用类型>费用项',
+        feeStatus: '费用状态',
+        paymentMethod: '支付方式',
+        feePeriod: '缴费时间段',
+        paymentTime: '缴费时间',
+        cashier: '收银员',
+        payableAmount: '应缴/应收金额(元)',
+        receivedAmount: '实收金额(元)',
+        withholdAmount: '账户抵扣(元)',
+        discountAmount: '优惠/减免金额(元)',
+        giftAmount: '赠送金额(元)',
+        lateFee: '滞纳金(元)',
+        area: '面积(平方米)',
+        parkingSpace: '车位',
+        remark: '说明'
+      },
+      summary: {
+        subtotal: '小计',
+        total: '大计',
+        receivable: '应收',
+        received: '实收',
+        discount: '优惠',
+        deduction: '减免',
+        gift: '赠送',
+        lateFee: '滞纳金',
+        yuan: '元',
+        discountDesc: '优惠金额：打折规则和打折无欠费规则下产生的优惠金额',
+        deductionDesc: '减免金额：减免规则下产生的减免金额',
+        giftDesc: '赠送金额：赠送规则下赠送月份应缴的金额',
+        lateFeeDesc: '滞纳金：违约滞纳金规则下产生的违约金额，需额外缴纳的滞纳金'
+      },
+      allCommunities: '全部小区',
+      fetchError: '获取缴费明细失败',
+      fetchCommunityError: '获取小区列表失败',
+      exportSuccess: '导出成功',
+      exportError: '导出失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/adminPayFeeDetailList.vue b/src/views/fee/adminPayFeeDetailList.vue
new file mode 100644
index 0000000..3df98bc
--- /dev/null
+++ b/src/views/fee/adminPayFeeDetailList.vue
@@ -0,0 +1,431 @@
+<template>
+  <div class="admin-pay-fee-detail-container animated fadeInRight">
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <select-admin-community ref="selectCommunity" @changeCommunity="handleCommunityChange" />
+      </el-col>
+      <el-col :span="20">
+        <el-card>
+          <div slot="header" class="clearfix flex justify-between">
+            <span>{{ $t('adminPayFeeDetail.search.title') }}</span>
+          </div>
+          <el-form :model="searchForm" label-width="auto">
+            <el-row :gutter="20">
+              <el-col :span="6">
+                <el-form-item :label="$t('adminPayFeeDetail.search.startTime')">
+                  <el-date-picker v-model="searchForm.startTime" type="datetime"
+                    :placeholder="$t('adminPayFeeDetail.search.startTimePlaceholder')" style="width: 100%" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('adminPayFeeDetail.search.endTime')">
+                  <el-date-picker v-model="searchForm.endTime" type="datetime"
+                    :placeholder="$t('adminPayFeeDetail.search.endTimePlaceholder')" style="width: 100%" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('adminPayFeeDetail.search.paymentMethod')">
+                  <el-select v-model="searchForm.primeRate"
+                    :placeholder="$t('adminPayFeeDetail.search.paymentMethodPlaceholder')" style="width: 100%">
+                    <el-option v-for="item in paymentMethods" :key="item.statusCd" :label="item.name"
+                      :value="item.statusCd" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('adminPayFeeDetail.search.feeStatus')">
+                  <el-select v-model="searchForm.state" :placeholder="$t('adminPayFeeDetail.search.feeStatusPlaceholder')"
+                    style="width: 100%">
+                    <el-option v-for="item in feeStatuses" :key="item.statusCd" :label="item.name"
+                      :value="item.statusCd" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="6">
+                <el-form-item :label="$t('adminPayFeeDetail.search.feeType')">
+                  <el-select v-model="searchForm.feeTypeCd"
+                    :placeholder="$t('adminPayFeeDetail.search.feeTypePlaceholder')" style="width: 100%">
+                    <el-option v-for="item in feeTypes" :key="item.statusCd" :label="item.name" :value="item.statusCd" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('adminPayFeeDetail.search.feeStartTime')">
+                  <el-date-picker v-model="searchForm.feeStartTime" type="datetime"
+                    :placeholder="$t('adminPayFeeDetail.search.feeStartTimePlaceholder')" style="width: 100%" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('adminPayFeeDetail.search.feeEndTime')">
+                  <el-date-picker v-model="searchForm.feeEndTime" type="datetime"
+                    :placeholder="$t('adminPayFeeDetail.search.feeEndTimePlaceholder')" style="width: 100%" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('adminPayFeeDetail.search.payerObjName')">
+                  <el-input v-model="searchForm.payerObjName"
+                    :placeholder="$t('adminPayFeeDetail.search.payerObjNamePlaceholder')" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24" style="text-align: right">
+                <el-button type="primary" @click="handleSearch">{{ $t('common.search') }}</el-button>
+                <el-button @click="handleReset">{{ $t('common.reset') }}</el-button>
+              </el-col>
+            </el-row>
+          </el-form>
+        </el-card>
+
+        <el-card style="margin-top: 20px">
+          <div slot="header" class="text-left">
+            <span>{{ $t('adminPayFeeDetail.list.title') }}</span>
+            <el-tooltip :content="$t('adminPayFeeDetail.list.tooltip')" placement="top">
+              <i class="el-icon-info" style="margin-left: 10px; cursor: pointer" />
+            </el-tooltip>
+            <div style="float: right">
+              <el-button type="primary" size="small" @click="handleExport">
+                {{ $t('common.export') }}
+              </el-button>
+            </div>
+          </div>
+          <el-table :data="tableData" border style="width: 100%">
+            <el-table-column prop="oId" :label="$t('adminPayFeeDetail.table.orderId')" align="center" />
+            <el-table-column :label="$t('adminPayFeeDetail.table.payerInfo')" align="center" width="150">
+              <template slot-scope="scope">
+                <div>{{ scope.row.payerObjName }}/{{ scope.row.ownerName }}</div>
+                <div>{{ scope.row.communityName }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('adminPayFeeDetail.table.feeInfo')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.feeTypeCdName }}>{{ scope.row.feeName }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="stateName" :label="$t('adminPayFeeDetail.table.feeStatus')" align="center" />
+            <el-table-column prop="primeRate" :label="$t('adminPayFeeDetail.table.paymentMethod')" align="center" />
+            <el-table-column :label="$t('adminPayFeeDetail.table.feePeriod')" align="center" width="150">
+              <template slot-scope="scope">
+                <div>{{ formatDate(scope.row.startTime) }}</div>
+                <div>~</div>
+                <div>{{ formatDate(scope.row.endTime) }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="createTime" :label="$t('adminPayFeeDetail.table.paymentTime')" align="center" />
+            <el-table-column prop="cashierName" :label="$t('adminPayFeeDetail.table.cashier')" align="center" />
+            <el-table-column :label="$t('adminPayFeeDetail.table.payableAmount')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.payableAmount }}/{{ scope.row.receivableAmount }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="receivedAmount" :label="$t('adminPayFeeDetail.table.receivedAmount')" align="center" />
+            <el-table-column prop="withholdAmount" :label="$t('adminPayFeeDetail.table.withholdAmount')" align="center" />
+            <el-table-column :label="$t('adminPayFeeDetail.table.discountAmount')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.preferentialAmount }}/{{ scope.row.deductionAmount }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="giftAmount" :label="$t('adminPayFeeDetail.table.giftAmount')" align="center" />
+            <el-table-column prop="lateFee" :label="$t('adminPayFeeDetail.table.lateFee')" align="center" />
+            <el-table-column prop="builtUpArea" :label="$t('adminPayFeeDetail.table.area')" align="center" />
+            <el-table-column prop="psName" :label="$t('adminPayFeeDetail.table.parkingSpace')" align="center" />
+            <el-table-column prop="remark" :label="$t('adminPayFeeDetail.table.remark')" align="center" width="200" />
+          </el-table>
+
+          <div style="margin-top: 20px">
+            <el-row>
+              <el-col :span="2">
+                <div>{{ $t('adminPayFeeDetail.summary.subtotal') }}</div>
+                <div>{{ $t('adminPayFeeDetail.summary.total') }}</div>
+              </el-col>
+              <el-col :span="2">
+                <div>
+                  {{ $t('adminPayFeeDetail.summary.receivable') }}: {{ summary.totalReceivableAmount }}
+                  {{ $t('adminPayFeeDetail.summary.yuan') }}
+                </div>
+                <div>
+                  {{ $t('adminPayFeeDetail.summary.receivable') }}: {{ summary.allReceivableAmount }}
+                  {{ $t('adminPayFeeDetail.summary.yuan') }}
+                </div>
+              </el-col>
+              <el-col :span="2">
+                <div>
+                  {{ $t('adminPayFeeDetail.summary.received') }}: {{ summary.totalReceivedAmount }}
+                  {{ $t('adminPayFeeDetail.summary.yuan') }}
+                </div>
+                <div>
+                  {{ $t('adminPayFeeDetail.summary.received') }}: {{ summary.allReceivedAmount }}
+                  {{ $t('adminPayFeeDetail.summary.yuan') }}
+                </div>
+              </el-col>
+              <el-col :span="2">
+                <div>
+                  {{ $t('adminPayFeeDetail.summary.discount') }}: {{ summary.totalPreferentialAmount }}
+                  {{ $t('adminPayFeeDetail.summary.yuan') }}
+                </div>
+                <div>
+                  {{ $t('adminPayFeeDetail.summary.discount') }}: {{ summary.allPreferentialAmount }}
+                  {{ $t('adminPayFeeDetail.summary.yuan') }}
+                </div>
+              </el-col>
+              <el-col :span="2">
+                <div>
+                  {{ $t('adminPayFeeDetail.summary.deduction') }}: {{ summary.totalDeductionAmount }}
+                  {{ $t('adminPayFeeDetail.summary.yuan') }}
+                </div>
+                <div>
+                  {{ $t('adminPayFeeDetail.summary.deduction') }}: {{ summary.allDeductionAmount }}
+                  {{ $t('adminPayFeeDetail.summary.yuan') }}
+                </div>
+              </el-col>
+              <el-col :span="2">
+                <div>
+                  {{ $t('adminPayFeeDetail.summary.gift') }}: {{ summary.totalGiftAmount }}
+                  {{ $t('adminPayFeeDetail.summary.yuan') }}
+                </div>
+                <div>
+                  {{ $t('adminPayFeeDetail.summary.gift') }}: {{ summary.allGiftAmount }}
+                  {{ $t('adminPayFeeDetail.summary.yuan') }}
+                </div>
+              </el-col>
+              <el-col :span="2">
+                <div>
+                  {{ $t('adminPayFeeDetail.summary.lateFee') }}: {{ summary.totalLateFee }}
+                  {{ $t('adminPayFeeDetail.summary.yuan') }}
+                </div>
+                <div>
+                  {{ $t('adminPayFeeDetail.summary.lateFee') }}: {{ summary.allLateFee }}
+                  {{ $t('adminPayFeeDetail.summary.yuan') }}
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+
+          <div style="margin-top: 20px" class="text-left">
+            <el-row>
+              <el-col :span="18">
+                <div>{{ $t('adminPayFeeDetail.summary.discountDesc') }}</div>
+                <div>{{ $t('adminPayFeeDetail.summary.deductionDesc') }}</div>
+                <div>{{ $t('adminPayFeeDetail.summary.giftDesc') }}</div>
+                <div>{{ $t('adminPayFeeDetail.summary.lateFeeDesc') }}</div>
+              </el-col>
+              <el-col :span="6">
+                <el-pagination :current-page="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>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { queryAdminPayFeeDetail, exportFeeData } from '@/api/fee/adminPayFeeDetailApi'
+import SelectAdminCommunity from '@/components/community/selectAdminCommunity'
+import { getDict } from '@/api/community/communityApi'
+import {dateFormat} from '@/utils/dateUtil'
+
+export default {
+  name: 'AdminPayFeeDetailList',
+  components: {
+    SelectAdminCommunity
+  },
+  data() {
+    return {
+      searchForm: {
+        communityId: '',
+        floorId: '',
+        roomNum: '',
+        payerObjName: '',
+        configId: '',
+        primeRate: '',
+        state: '',
+        feeTypeCd: '',
+        startTime: '',
+        endTime: '',
+        feeStartTime: '',
+        feeEndTime: '',
+        page: 1,
+        row: 10
+      },
+      tableData: [],
+      paymentMethods: [],
+      feeStatuses: [],
+      feeTypes: [],
+      summary: {
+        totalReceivableAmount: '0.00',
+        totalReceivedAmount: '0.00',
+        allReceivableAmount: '0.00',
+        allReceivedAmount: '0.00',
+        totalPreferentialAmount: '0.00',
+        totalDeductionAmount: '0.00',
+        totalLateFee: '0.00',
+        totalVacantHousingDiscount: '0.00',
+        totalVacantHousingReduction: '0.00',
+        totalNoDeduction: '0.00',
+        totalCashDeduction: '0.00',
+        totalPointDeduction: '0.00',
+        totalDiscountCouponDeduction: '0.00',
+        allPreferentialAmount: '0.00',
+        allDeductionAmount: '0.00',
+        allLateFee: '0.00',
+        allVacantHousingDiscount: '0.00',
+        allVacantHousingReduction: '0.00',
+        allGiftAmount: '0.00',
+        allNoDeduction: '0.00',
+        allCashDeduction: '0.00',
+        allPointDeduction: '0.00',
+        allDiscountCouponDeduction: '0.00',
+        totalGiftAmount: '0.00'
+      },
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.loadDictData()
+    this.fetchData()
+  },
+  methods: {
+    async loadDictData() {
+      this.paymentMethods = await getDict('pay_fee_detail', 'prime_rate')
+      this.feeStatuses = await getDict('pay_fee_detail', 'state')
+      this.feeTypes = await getDict('pay_fee_config', 'fee_type_cd')
+    },
+    async fetchData() {
+      try {
+        const params = { ...this.searchForm }
+        const { data, total, sumTotal } = await queryAdminPayFeeDetail(params)
+
+        this.tableData = data.map(item => ({
+          ...item,
+          lateFee: (item.lateFee * -1).toFixed(2)
+        }))
+
+        this.pagination.total = total
+        this.updateSummary(sumTotal)
+      } catch (error) {
+        //this.$message.error(this.$t('adminPayFeeDetail.fetchError'))
+      }
+    },
+    updateSummary(sumTotal) {
+      const defaultZero = '0.00'
+
+      this.summary = {
+        totalReceivableAmount: sumTotal.totalReceivableAmount || defaultZero,
+        totalReceivedAmount: sumTotal.totalReceivedAmount || defaultZero,
+        allReceivableAmount: sumTotal.allReceivableAmount || defaultZero,
+        allReceivedAmount: sumTotal.allReceivedAmount || defaultZero,
+        totalPreferentialAmount: sumTotal.totalPreferentialAmount || defaultZero,
+        totalDeductionAmount: sumTotal.totalDeductionAmount || defaultZero,
+        totalLateFee: sumTotal.totalLateFee ? (sumTotal.totalLateFee * -1).toFixed(2) : defaultZero,
+        allPreferentialAmount: sumTotal.allPreferentialAmount || defaultZero,
+        allDeductionAmount: sumTotal.allDeductionAmount || defaultZero,
+        allLateFee: sumTotal.allLateFee  ? (sumTotal.allLateFee * -1).toFixed(2) : defaultZero,
+        allGiftAmount: sumTotal.allGiftAmount || defaultZero,
+        totalGiftAmount: sumTotal.totalGiftAmount || defaultZero
+      }
+    },
+    handleSearch() {
+      this.searchForm.page = 1
+      this.fetchData()
+    },
+    handleReset() {
+      this.searchForm = {
+        communityId: this.searchForm.communityId,
+        floorId: '',
+        roomNum: '',
+        payerObjName: '',
+        configId: '',
+        primeRate: '',
+        state: '',
+        feeTypeCd: '',
+        startTime: '',
+        endTime: '',
+        feeStartTime: '',
+        feeEndTime: '',
+        page: 1,
+        row: this.searchForm.row
+      }
+      this.fetchData()
+    },
+    handleCommunityChange(community) {
+      this.searchForm.communityId = community.communityId
+      this.fetchData()
+    },
+    handleSizeChange(size) {
+      this.searchForm.row = size
+      this.fetchData()
+    },
+    handleCurrentChange(page) {
+      this.searchForm.page = page
+      this.fetchData()
+    },
+    async handleExport() {
+      try {
+        const params = {
+          ...this.searchForm,
+          pagePath: 'adminPayFeeDetail'
+        }
+        await exportFeeData(params)
+        this.$message.success(this.$t('adminPayFeeDetail.exportSuccess'))
+        // 这里可以添加跳转到下载页面的逻辑
+        // this.$router.push('/pages/property/downloadTempFile?tab=下载中心')
+      } catch (error) {
+        this.$message.error(this.$t('adminPayFeeDetail.exportError'))
+      }
+    },
+    formatDate(date) {
+      if (!date) return '-'
+      return dateFormat(date)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.admin-pay-fee-detail-container {
+  padding: 20px;
+
+  .el-card {
+    margin-bottom: 20px;
+
+    .el-card__header {
+      font-weight: bold;
+      background-color: #f5f7fa;
+    }
+  }
+
+  .el-table {
+    margin-top: 20px;
+
+    .cell {
+      white-space: pre-line;
+    }
+  }
+
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+
+  .summary-row {
+    margin-top: 20px;
+    padding: 10px;
+    background-color: #f5f7fa;
+    border-radius: 4px;
+
+    .summary-item {
+      margin-right: 20px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/report/communityFeeSummaryLang.js b/src/views/report/communityFeeSummaryLang.js
new file mode 100644
index 0000000..7ebf060
--- /dev/null
+++ b/src/views/report/communityFeeSummaryLang.js
@@ -0,0 +1,72 @@
+export const messages = {
+  en: {
+    communityFeeSummary: {
+      search: {
+        title: 'Search Conditions',
+        startDate: 'Start Date',
+        endDate: 'End Date',
+        feeType: 'Fee Type',
+        selectFeeType: 'Please select fee type',
+        allCommunities: 'All Communities'
+      },
+      table: {
+        title: 'Fee Summary Report',
+        tooltip: 'Summarize fee information by month',
+        updateDaily: 'Updated daily',
+        totalRooms: 'Total Rooms',
+        feeRooms: 'Fee Rooms',
+        oweRooms: 'Owe Rooms',
+        oweFeeFormula: 'History Owe + Current Owe = Total Owe',
+        hisOweFee: 'History Owe',
+        curOweFee: 'Current Owe',
+        totalOweFee: 'Total Owe',
+        receivedFeeFormula: 'Owe Recovery + Current Partial + Prepayment = Actual Payment',
+        hisReceivedFee: 'Owe Recovery',
+        curPartialFee: 'Current Partial',
+        preReceivedFee: 'Prepayment',
+        totalReceivedFee: 'Actual Payment',
+        curReceivableFee: 'Current Receivable',
+        curReceivedFee: 'Current Received',
+        roomFeeRate: 'Paid Rooms/Fee Rooms = Room Fee Rate',
+        feeRate: 'Current Received/Current Receivable = Fee Rate',
+        clearRate: 'Owe Recovery/(Owe Recovery + History Owe) = Clear Rate'
+      },
+      fetchError: 'Failed to fetch fee summary data'
+    }
+  },
+  zh: {
+    communityFeeSummary: {
+      search: {
+        title: '查询条件',
+        startDate: '开始时间',
+        endDate: '结束时间',
+        feeType: '费用大类',
+        selectFeeType: '请选择费用大类',
+        allCommunities: '全部小区'
+      },
+      table: {
+        title: '费用汇总表',
+        tooltip: '以月份为维度，进行费用情况汇总',
+        updateDaily: '按天更新',
+        totalRooms: '总户数',
+        feeRooms: '收费户',
+        oweRooms: '欠费户',
+        oweFeeFormula: '历史欠费+当期欠费=欠费',
+        hisOweFee: '历史欠费',
+        curOweFee: '当期欠费',
+        totalOweFee: '总欠费',
+        receivedFeeFormula: '欠费追回+当期部分+预交=实缴',
+        hisReceivedFee: '欠费追回',
+        curPartialFee: '当期部分',
+        preReceivedFee: '预交',
+        totalReceivedFee: '实缴',
+        curReceivableFee: '当期应收',
+        curReceivedFee: '当期实收',
+        roomFeeRate: '已交户/收费户=户收费率',
+        feeRate: '当期实收/当期应收=收费率',
+        clearRate: '欠费追回/(欠费追回+历史欠费)=清缴率'
+      },
+      fetchError: '获取费用汇总数据失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/report/communityFeeSummaryList.vue b/src/views/report/communityFeeSummaryList.vue
new file mode 100644
index 0000000..b78f9b7
--- /dev/null
+++ b/src/views/report/communityFeeSummaryList.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="community-fee-summary-container">
+    <el-row class="animated fadeInRight" :gutter="20">
+      <el-col :span="4">
+        <select-admin-community @changeCommunity="handleCommunityChange" />
+      </el-col>
+      <el-col :span="20">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix flex justify-between">
+            <span>{{ $t('communityFeeSummary.search.title') }}</span>
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-date-picker v-model="searchForm.startDate" type="date"
+                :placeholder="$t('communityFeeSummary.search.startDate')" class="w-100" />
+            </el-col>
+            <el-col :span="6">
+              <el-date-picker v-model="searchForm.endDate" type="date"
+                :placeholder="$t('communityFeeSummary.search.endDate')" class="w-100" />
+            </el-col>
+            <el-col :span="6">
+              <el-select v-model="searchForm.feeTypeCd" :placeholder="$t('communityFeeSummary.search.feeType')"
+                class="w-100">
+                <el-option :label="$t('communityFeeSummary.search.selectFeeType')" value="" />
+                <el-option v-for="item in feeTypeOptions" :key="item.statusCd" :label="item.name"
+                  :value="item.statusCd" />
+              </el-select>
+            </el-col>
+            <el-col :span="6">
+              <el-button type="primary" @click="handleSearch">
+                {{ $t('common.search') }}
+              </el-button>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <el-card class="box-card mt-20">
+          <div slot="header" class="clearfix text-left">
+            <span>{{ $t('communityFeeSummary.table.title') }}</span>
+            <el-tooltip effect="dark" :content="$t('communityFeeSummary.table.tooltip')" placement="top">
+              <i class="el-icon-info" style="cursor: pointer;"></i>
+            </el-tooltip>
+            <span style="font-size: 10px;">({{ $t('communityFeeSummary.table.updateDaily') }})</span>
+          </div>
+          <el-table :data="tableData" border style="width: 100%">
+            <el-table-column prop="roomCount" :label="$t('communityFeeSummary.table.totalRooms')" align="center" />
+            <el-table-column prop="feeRoomCount" :label="$t('communityFeeSummary.table.feeRooms')" align="center" />
+            <el-table-column prop="oweRoomCount" :label="$t('communityFeeSummary.table.oweRooms')" align="center" />
+            <el-table-column :label="$t('communityFeeSummary.table.oweFeeFormula')" align="center">
+              <el-table-column prop="hisOweFee" :label="$t('communityFeeSummary.table.hisOweFee')" align="center" />
+              <el-table-column prop="curOweFee" :label="$t('communityFeeSummary.table.curOweFee')" align="center" />
+              <el-table-column :label="$t('communityFeeSummary.table.totalOweFee')" 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('communityFeeSummary.table.receivedFeeFormula')" align="center">
+              <el-table-column prop="hisReceivedFee" :label="$t('communityFeeSummary.table.hisReceivedFee')"
+                align="center" />
+              <el-table-column :label="$t('communityFeeSummary.table.curPartialFee')" 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('communityFeeSummary.table.preReceivedFee')"
+                align="center" />
+              <el-table-column prop="receivedFee" :label="$t('communityFeeSummary.table.totalReceivedFee')"
+                align="center" />
+            </el-table-column>
+            <el-table-column prop="curReceivableFee" :label="$t('communityFeeSummary.table.curReceivableFee')"
+              align="center" />
+            <el-table-column :label="$t('communityFeeSummary.table.curReceivedFee')" align="center">
+              <template slot-scope="scope">
+                {{ (scope.row.curReceivableFee - scope.row.curOweFee).toFixed(2) }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('communityFeeSummary.table.roomFeeRate')" 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('communityFeeSummary.table.feeRate')" 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('communityFeeSummary.table.clearRate')" 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>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getCommunityFeeSummary } from '@/api/report/communityFeeSummaryApi'
+import SelectAdminCommunity from '@/components/community/selectAdminCommunity'
+
+export default {
+  name: 'CommunityFeeSummaryList',
+  components: {
+    SelectAdminCommunity
+  },
+  data() {
+    return {
+      searchForm: {
+        startDate: '',
+        endDate: '',
+        feeTypeCd: '',
+        communityId: ''
+      },
+      feeTypeOptions: [],
+      tableData: [],
+      loading: false
+    }
+  },
+  created() {
+    this.initDate()
+    this.loadFeeTypes()
+  },
+  methods: {
+    initDate() {
+      const today = new Date()
+      const firstDay = new Date(today.getFullYear(), today.getMonth(), 1)
+      const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0)
+
+      this.searchForm.startDate = firstDay
+      this.searchForm.endDate = lastDay
+    },
+    loadFeeTypes() {
+      this.$store.dispatch('dict/getDict', {
+        dictType: 'pay_fee_config',
+        dictName: 'fee_type_cd'
+      }).then(data => {
+        this.feeTypeOptions = data
+      })
+    },
+    handleCommunityChange(community) {
+      this.searchForm.communityId = community.communityId
+      this.handleSearch()
+    },
+    async handleSearch() {
+      try {
+        this.loading = true
+        const params = {
+          startDate: this.formatDate(this.searchForm.startDate),
+          endDate: this.formatDate(this.searchForm.endDate),
+          feeTypeCd: this.searchForm.feeTypeCd,
+          communityId: this.searchForm.communityId
+        }
+
+        const { data } = await getCommunityFeeSummary(params)
+        this.tableData = data
+      } catch (error) {
+        this.$message.error(this.$t('communityFeeSummary.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    formatDate(date) {
+      if (!date) return ''
+      const d = new Date(date)
+      let month = '' + (d.getMonth() + 1)
+      let day = '' + d.getDate()
+      const year = d.getFullYear()
+
+      if (month.length < 2) month = '0' + month
+      if (day.length < 2) day = '0' + day
+
+      return [year, month, day].join('-')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.community-fee-summary-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+  }
+
+  .mt-20 {
+    margin-top: 20px;
+  }
+
+  .w-100 {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/report/operationalAnalysisLang.js b/src/views/report/operationalAnalysisLang.js
new file mode 100644
index 0000000..69bc20b
--- /dev/null
+++ b/src/views/report/operationalAnalysisLang.js
@@ -0,0 +1,38 @@
+export const messages = {
+  en: {
+    operationalAnalysis: {
+      allCommunities: 'All Communities',
+      fetchError: 'Failed to fetch operational analysis data',
+      fetchCommunityError: 'Failed to fetch community list',
+      chart: {
+        payFee: 'Payment Orders',
+        repair: 'Repair Orders',
+        inspection: 'Inspections',
+        maintainance: 'Maintenance',
+        itemIn: 'Purchase Orders',
+        itemOut: 'Withdrawal Orders',
+        carIn: 'Vehicle Entries',
+        personIn: 'Door Openings',
+        contract: 'Contracts'
+      }
+    }
+  },
+  zh: {
+    operationalAnalysis: {
+      allCommunities: '全部小区',
+      fetchError: '获取运营分析数据失败',
+      fetchCommunityError: '获取小区列表失败',
+      chart: {
+        payFee: '缴费订单数',
+        repair: '报修订单数',
+        inspection: '巡检数',
+        maintainance: '保养数',
+        itemIn: '采购订单数',
+        itemOut: '领用订单数',
+        carIn: '车辆进场数',
+        personIn: '开门记录',
+        contract: '签订合同数'
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/report/operationalAnalysisList.vue b/src/views/report/operationalAnalysisList.vue
new file mode 100644
index 0000000..7b84729
--- /dev/null
+++ b/src/views/report/operationalAnalysisList.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="operational-analysis-container">
+    <el-row class="animated fadeInRight ecommerce">
+      <el-col :span="4">
+        <select-admin-community @changeCommunity="handleCommunityChange" />
+      </el-col>
+      <el-col :span="20">
+        <el-row>
+          <el-col v-for="(chart, index) in charts" :key="index" :span="8" class="margin-bottom">
+            <el-card class="box-card">
+              <div :id="chart.id" style="width: 100%; height: 300px;"></div>
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import SelectAdminCommunity from '@/components/community/selectAdminCommunity'
+import { getCommunityOperationalAnalysis } from '@/api/report/operationalAnalysisApi'
+import * as echarts from 'echarts'
+
+export default {
+  name: 'OperationalAnalysisList',
+  components: {
+    SelectAdminCommunity
+  },
+  data() {
+    return {
+      charts: [
+        { id: 'communityPayFeeDetail', title: this.$t('operationalAnalysis.chart.payFee') },
+        { id: 'communityRepair', title: this.$t('operationalAnalysis.chart.repair') },
+        { id: 'communityInspection', title: this.$t('operationalAnalysis.chart.inspection') },
+        { id: 'communityMaintainance', title: this.$t('operationalAnalysis.chart.maintainance') },
+        { id: 'communityItemIn', title: this.$t('operationalAnalysis.chart.itemIn') },
+        { id: 'communityItemOut', title: this.$t('operationalAnalysis.chart.itemOut') },
+        { id: 'communityCarIn', title: this.$t('operationalAnalysis.chart.carIn') },
+        { id: 'communityPersonIn', title: this.$t('operationalAnalysis.chart.personIn') },
+        { id: 'communityContract', title: this.$t('operationalAnalysis.chart.contract') }
+      ],
+      communityId: ''
+    }
+  },
+  methods: {
+    handleCommunityChange(community) {
+      this.communityId = community.communityId
+      this.loadOperationalAnalysisData()
+    },
+    async loadOperationalAnalysisData() {
+      try {
+        const params = {
+          communityId: this.communityId
+        }
+        const res = await getCommunityOperationalAnalysis(params)
+        this.initCharts(res.data)
+      } catch (error) {
+        this.$message.error(this.$t('operationalAnalysis.fetchError'))
+      }
+    },
+    initCharts(data) {
+      this.initAnalysisChart(data.feeDetailData, 'communityPayFeeDetail', this.$t('operationalAnalysis.chart.payFee'), this.$t('operationalAnalysis.chart.payFee'))
+      this.initAnalysisChart(data.repairData, 'communityRepair', this.$t('operationalAnalysis.chart.repair'), this.$t('operationalAnalysis.chart.repair'))
+      this.initAnalysisChart(data.inspectionData, 'communityInspection', this.$t('operationalAnalysis.chart.inspection'), this.$t('operationalAnalysis.chart.inspection'))
+      this.initAnalysisChart(data.maintainanceData, 'communityMaintainance', this.$t('operationalAnalysis.chart.maintainance'), this.$t('operationalAnalysis.chart.maintainance'))
+      this.initAnalysisChart(data.itemInData, 'communityItemIn', this.$t('operationalAnalysis.chart.itemIn'), this.$t('operationalAnalysis.chart.itemIn'))
+      this.initAnalysisChart(data.itemOutData, 'communityItemOut', this.$t('operationalAnalysis.chart.itemOut'), this.$t('operationalAnalysis.chart.itemOut'))
+      this.initAnalysisChart(data.carInData, 'communityCarIn', this.$t('operationalAnalysis.chart.carIn'), this.$t('operationalAnalysis.chart.carIn'))
+      this.initAnalysisChart(data.personInData, 'communityPersonIn', this.$t('operationalAnalysis.chart.personIn'), this.$t('operationalAnalysis.chart.personIn'))
+      this.initAnalysisChart(data.contractData, 'communityContract', this.$t('operationalAnalysis.chart.contract'), this.$t('operationalAnalysis.chart.contract'))
+    },
+    initAnalysisChart(data, elementId, title, lineName) {
+      const dom = document.getElementById(elementId)
+      if (!dom) return
+      
+      const myChart = echarts.init(dom)
+      const createTime = []
+      const countValues = []
+      
+      data.forEach(item => {
+        createTime.push(item.createTime)
+        countValues.push(item.countValue)
+      })
+
+      const option = {
+        title: {
+          text: title
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: createTime
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: createTime
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [{
+          name: lineName,
+          type: 'line',
+          stack: 'Total',
+          data: countValues
+        }]
+      }
+
+      myChart.setOption(option)
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.operational-analysis-container {
+  padding: 20px;
+  
+  .margin-bottom {
+    margin-bottom: 20px;
+  }
+  
+  .box-card {
+    margin: 0 10px;
+  }
+}
+</style>
\ No newline at end of file
--
libgit2 0.21.4