diff --git a/src/api/iot/adminCarInoutApi.js b/src/api/iot/adminCarInoutApi.js
new file mode 100644
index 0000000..bb50a11
--- /dev/null
+++ b/src/api/iot/adminCarInoutApi.js
@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+
+// 获取车辆进出记录列表
+export function listAdminCarInoutDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/iot.listAdminCarInoutDetail',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve({
+          data: res.data,
+          total: res.total,
+          records: res.records
+        })
+      } 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
+        })
+      } else {
+        reject(new Error(res.msg || '获取管理小区列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/iot/adminChargeOrderApi.js b/src/api/iot/adminChargeOrderApi.js
new file mode 100644
index 0000000..0fddcbb
--- /dev/null
+++ b/src/api/iot/adminChargeOrderApi.js
@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+
+// 获取充电订单列表
+export function listAdminChargeMachineOrder(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/iot.listAdminChargeMachineOrder',
+      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 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/iot/adminMeterRechargeApi.js b/src/api/iot/adminMeterRechargeApi.js
new file mode 100644
index 0000000..d38f876
--- /dev/null
+++ b/src/api/iot/adminMeterRechargeApi.js
@@ -0,0 +1,41 @@
+import request from '@/utils/request'
+
+// 获取充值明细列表
+export function listAdminMeterCharge(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/iot.listAdminMeterCharge',
+      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/iot/selectAdminCommunity.vue b/src/components/iot/selectAdminCommunity.vue
index 8abc374..4e0289c 100644
--- a/src/components/iot/selectAdminCommunity.vue
+++ b/src/components/iot/selectAdminCommunity.vue
@@ -1,64 +1,99 @@
 <template>
-  <div class="border-radius">
+  <el-card class="border-radius">
     <div class="margin-xs-r treeview attendance-staff" style="height: 650px;">
       <ul class="list-group text-center border-radius">
         <li 
           class="list-group-item node-orgTree" 
-          v-for="(item,index) in communitys" 
+          v-for="(item,index) in selectAdminCommunityInfo.communitys" 
           :key="index" 
-          @click="handleSwatchCommunity(item)"
-          :class="{'vc-node-selected': communityId === item.communityId}"
+          @click="_swatchAdminCommunity(item)"
+          :class="{'vc-node-selected': selectAdminCommunityInfo.communityId == item.communityId}"
         >
           {{item.name}}
         </li>
       </ul>
     </div>
-  </div>
+  </el-card>
 </template>
 
 <script>
-import { listAdminCommunitys } from '@/api/iot/adminInoutApi'
-
 export default {
   name: 'SelectAdminCommunity',
   data() {
     return {
-      communitys: [],
-      communityId: ''
+      selectAdminCommunityInfo: {
+        communitys: [],
+        communityId: ''
+      }
     }
   },
   created() {
-    this.loadAdminCommunitys()
+    this._loadAdminCommunitys()
   },
   methods: {
-    async loadAdminCommunitys() {
-      try {
-        const params = {
+    async _loadAdminCommunitys() {
+      const param = {
+        params: {
           _uid: '123mlkdinkldldijdhuudjdjkkd',
           page: 1,
           row: 100
         }
-        const res = await listAdminCommunitys(params)
-        this.communitys = [
-          { name: this.$t('adminInout.allCommunities'), communityId: '' },
-          ...res.data
-        ]
-        this.handleSwatchCommunity(this.communitys[0])
+      }
+      
+      const _communistys = [{
+        name: this.$t('adminMeterRecharge.allCommunities'),
+        communityId: ''
+      }]
+      
+      this.selectAdminCommunityInfo.communitys = _communistys
+      
+      try {
+        const res = await this.$api.listAdminCommunitys(param)
+        res.data.forEach(c => {
+          _communistys.push(c)
+        })
+        this.selectAdminCommunityInfo.communitys = _communistys
+        this._swatchAdminCommunity(_communistys[0])
       } catch (error) {
-        console.error('Failed to load communities:', error)
+        console.error('请求失败处理', error)
       }
     },
-    handleSwatchCommunity(community) {
-      this.communityId = community.communityId
-      this.$emit('change-community', community)
+    _swatchAdminCommunity(_community) {
+      this.selectAdminCommunityInfo.communityId = _community.communityId
+      this.$emit('changeCommunity', _community)
     }
   }
 }
 </script>
 
 <style scoped>
+.border-radius {
+  border-radius: 4px;
+}
+.margin-xs-r {
+  margin-right: 5px;
+}
+.treeview {
+  overflow-y: auto;
+}
+.list-group {
+  padding-left: 0;
+  margin-bottom: 0;
+}
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  margin-bottom: -1px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  cursor: pointer;
+}
+.list-group-item:hover {
+  background-color: #f5f5f5;
+}
 .vc-node-selected {
-  background-color: #f5f7fa;
-  color: #409eff;
+  background-color: #409EFF;
+  color: white;
 }
 </style>
\ No newline at end of file
diff --git a/src/i18n/commonLang.js b/src/i18n/commonLang.js
index ea19027..cd5dc6b 100644
--- a/src/i18n/commonLang.js
+++ b/src/i18n/commonLang.js
@@ -30,7 +30,8 @@ export const messages = {
         resetPwdSuccess: 'Reset password successfully, new password is {pwd}, please change it in time',
         female: 'Female',
         male: 'Male',
-        all: 'All'
+        all: 'All',
+        refresh: 'Refresh'
       }
     },
     zh: {
@@ -64,7 +65,8 @@ export const messages = {
         resetPwdSuccess: '修改密码成功，密码为{pwd}请及时修改密码',
         female: '女',
         male: '男',
-        all: '全部'
+        all: '全部',
+        refresh: '刷新'
       }
     }
   } 
\ No newline at end of file
diff --git a/src/i18n/index.js b/src/i18n/index.js
index d98f9d8..2ed6ac6 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -81,6 +81,9 @@ import { messages as adminBarrierMessages } from '../views/iot/adminBarrierLang'
 import { messages as adminChargeMachineMessages } from '../views/iot/adminChargeMachineLang'
 import { messages as adminMeterMessages } from '../views/iot/adminMeterLang'
 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'
 
 Vue.use(VueI18n)
 
@@ -166,6 +169,9 @@ const messages = {
     ...adminChargeMachineMessages.en,
     ...adminMeterMessages.en,
     ...adminInoutMessages.en,
+    ...adminCarInoutMessages.en,
+    ...adminChargeOrderMessages.en,
+    ...adminMeterRechargeMessages.en,
   },
   zh: {
     ...loginMessages.zh,
@@ -247,6 +253,9 @@ const messages = {
     ...adminChargeMachineMessages.zh,
     ...adminMeterMessages.zh,
     ...adminInoutMessages.zh,
+    ...adminCarInoutMessages.zh,
+    ...adminChargeOrderMessages.zh,
+    ...adminMeterRechargeMessages.zh,
   }
 }
 
diff --git a/src/router/index.js b/src/router/index.js
index 8337bd6..a6ba365 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -387,10 +387,25 @@ const routes = [
         component: () => import('@/views/iot/adminMeterList.vue')
       },
       {
-        path:'/pages/iot/adminInout',
-        name:'/pages/iot/adminInout',
+        path: '/pages/iot/adminInout',
+        name: '/pages/iot/adminInout',
         component: () => import('@/views/iot/adminInoutList.vue')
+      },
+      {
+        path: '/pages/iot/adminCarInout',
+        name: '/pages/iot/adminCarInout',
+        component: () => import('@/views/iot/adminCarInoutList.vue')
+      },
+      {
+        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')
+          },
       // 其他子路由可以在这里添加
     ]
   },
diff --git a/src/views/iot/adminCarInoutLang.js b/src/views/iot/adminCarInoutLang.js
new file mode 100644
index 0000000..53078da
--- /dev/null
+++ b/src/views/iot/adminCarInoutLang.js
@@ -0,0 +1,122 @@
+export const messages = {
+  en: {
+    adminCarInout: {
+      search: {
+        title: 'Search Conditions',
+        carNum: 'Please enter license plate number',
+        state: 'Please select vehicle status',
+        startTime: 'Please select start time',
+        endTime: 'Please select end time',
+        carType: 'Please select license plate type'
+      },
+      list: {
+        title: 'In/Out Records'
+      },
+      table: {
+        photo: 'In Photo',
+        communityName: 'Community Name',
+        ciId: 'In/Out ID',
+        state: 'Vehicle Status',
+        carNum: 'License Plate',
+        paNum: 'Parking Lot',
+        feeName: 'Billing Rule',
+        carTypeName: 'Plate Type',
+        inTime: 'In Time',
+        outTime: 'Out Time',
+        parkingTime: 'Parking Time',
+        charge: 'Charge Amount',
+        remark: 'Remark'
+      },
+      state: {
+        select: 'Please select vehicle status',
+        inStatus: 'In Status',
+        paid: 'Payment Completed',
+        outStatus: 'Out Status',
+        repay: 'Payment Timeout Repay',
+        in: 'In',
+        out: 'Out'
+      },
+      carType: {
+        select: 'Please select license plate type',
+        temp: 'Temporary',
+        sale: 'Sale',
+        monthly: 'Monthly',
+        white: 'White List',
+        black: 'Black List',
+        internal: 'Internal',
+        free: 'Free'
+      },
+      community: {
+        all: 'All Communities'
+      },
+      time: {
+        hour: 'hour',
+        min: 'min'
+      },
+      action: {
+        out: 'Out'
+      },
+      fetchError: 'Failed to fetch in/out records'
+    }
+  },
+  zh: {
+    adminCarInout: {
+      search: {
+        title: '查询条件',
+        carNum: '请输入车牌号',
+        state: '请选择车辆状态',
+        startTime: '请选择开始时间',
+        endTime: '请选择结束时间',
+        carType: '请选择车牌类型'
+      },
+      list: {
+        title: '进出记录'
+      },
+      table: {
+        photo: '进场图',
+        communityName: '小区名称',
+        ciId: '进出场编号',
+        state: '车辆状态',
+        carNum: '车牌号',
+        paNum: '停车场',
+        feeName: '计费规则',
+        carTypeName: '车牌类型',
+        inTime: '进场时间',
+        outTime: '出场时间',
+        parkingTime: '停车时间',
+        charge: '收费金额',
+        remark: '说明'
+      },
+      state: {
+        select: '请选择车辆状态',
+        inStatus: '进场状态',
+        paid: '支付完成',
+        outStatus: '离场状态',
+        repay: '支付超时重新支付',
+        in: '进场',
+        out: '出场'
+      },
+      carType: {
+        select: '请选择车牌类型',
+        temp: '临时车',
+        sale: '出售车辆',
+        monthly: '月租车',
+        white: '白名单',
+        black: '黑名单',
+        internal: '内部车',
+        free: '免费车'
+      },
+      community: {
+        all: '全部小区'
+      },
+      time: {
+        hour: '小时',
+        min: '分'
+      },
+      action: {
+        out: '出场'
+      },
+      fetchError: '获取进出记录失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/iot/adminCarInoutList.vue b/src/views/iot/adminCarInoutList.vue
new file mode 100644
index 0000000..7e0a801
--- /dev/null
+++ b/src/views/iot/adminCarInoutList.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="admin-car-inout-container">
+    <el-row :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('adminCarInout.search.title') }}</span>
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="4">
+              <el-input v-model="searchForm.carNum" :placeholder="$t('adminCarInout.search.carNum')" clearable />
+            </el-col>
+            <el-col :span="4">
+              <el-select v-model="searchForm.state" :placeholder="$t('adminCarInout.search.state')" clearable>
+                <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select v-model="searchForm.carType" :placeholder="$t('adminCarInout.search.carType')" clearable>
+                <el-option v-for="item in carTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-date-picker v-model="searchForm.startTime" type="datetime"
+                :placeholder="$t('adminCarInout.search.startTime')" value-format="yyyy-MM-dd HH:mm:ss" />
+            </el-col>
+            <el-col :span="4">
+              <el-date-picker v-model="searchForm.endTime" type="datetime"
+                :placeholder="$t('adminCarInout.search.endTime')" value-format="yyyy-MM-dd HH:mm:ss" />
+            </el-col>
+            <el-col :span="4" class="text-right">
+              <el-button type="primary" @click="handleSearch">
+                <i class="el-icon-search"></i>
+                {{ $t('common.search') }}
+              </el-button>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <el-card class="box-card">
+          <div slot="header" class="clearfix flex justify-between">
+            <span>{{ $t('adminCarInout.list.title') }}</span>
+          </div>
+          <el-table v-loading="loading" :data="tableData" border style="width: 100%">
+            <el-table-column :label="$t('adminCarInout.table.photo')" align="center" width="100">
+              <template slot-scope="scope">
+                <el-image style="width: 60px; height: 60px; cursor: pointer;"
+                  :src="scope.row.photoJpg || '/img/noPhoto.jpg'" :preview-src-list="[scope.row.photoJpg]" fit="cover" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="communityName" :label="$t('adminCarInout.table.communityName')" align="center" />
+            <el-table-column prop="ciId" :label="$t('adminCarInout.table.ciId')" align="center" />
+            <el-table-column :label="$t('adminCarInout.table.state')" align="center">
+              <template slot-scope="scope">
+                <div>{{ scope.row.carInout === '3306' ? $t('adminCarInout.state.in') : $t('adminCarInout.state.out') }}({{
+                  scope.row.stateName }})</div>
+                <div>{{ scope.row.machineName }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="carNum" :label="$t('adminCarInout.table.carNum')" align="center" />
+            <el-table-column prop="paNum" :label="$t('adminCarInout.table.paNum')" align="center" />
+            <el-table-column prop="feeName" :label="$t('adminCarInout.table.feeName')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.feeName }}
+                <i class="el-icon-info"></i>
+              </template>
+            </el-table-column>
+            <el-table-column prop="carTypeName" :label="$t('adminCarInout.table.carTypeName')" align="center" />
+            <el-table-column prop="inTime" :label="$t('adminCarInout.table.inTime')" align="center" />
+            <el-table-column :label="$t('adminCarInout.table.outTime')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.carInout !== '3307' ? '-' : scope.row.openTime }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('adminCarInout.table.parkingTime')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.hours }}{{ $t('adminCarInout.time.hour') }}{{ scope.row.min }}{{ $t('adminCarInout.time.min')
+                }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('adminCarInout.table.charge')" align="center">
+              <template slot-scope="scope">
+                <span v-if="scope.row.carType === '1001'">-</span>
+                <span v-else>
+                  {{ scope.row.payCharge }}
+                  <span v-if="['100300', '100400', '100600'].includes(scope.row.inState)">
+                    (<a href="javascript:void(0)" @click="handleCarOut(scope.row)">{{ $t('adminCarInout.action.out')
+                    }}</a>)
+                  </span>
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="remark" :label="$t('adminCarInout.table.remark')" align="center" />
+          </el-table>
+          <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-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { listAdminCarInoutDetail } from '@/api/iot/adminCarInoutApi'
+import SelectAdminCommunity from '@/components/community/selectAdminCommunity'
+
+export default {
+  name: 'AdminCarInoutList',
+  components: {
+    SelectAdminCommunity
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        communityId: '',
+        carNum: '',
+        state: '',
+        startTime: '',
+        endTime: '',
+        carType: '',
+        paId: '',
+        boxId: ''
+      },
+      tableData: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      stateOptions: [
+        { value: '', label: this.$t('adminCarInout.state.select') },
+        { value: '100300', label: this.$t('adminCarInout.state.inStatus') },
+        { value: '100400', label: this.$t('adminCarInout.state.paid') },
+        { value: '100500', label: this.$t('adminCarInout.state.outStatus') },
+        { value: '100600', label: this.$t('adminCarInout.state.repay') }
+      ],
+      carTypeOptions: [
+        { value: '', label: this.$t('adminCarInout.carType.select') },
+        { value: 'T', label: this.$t('adminCarInout.carType.temp') },
+        { value: 'S', label: this.$t('adminCarInout.carType.sale') },
+        { value: 'H', label: this.$t('adminCarInout.carType.monthly') },
+        { value: 'W', label: this.$t('adminCarInout.carType.white') },
+        { value: 'B', label: this.$t('adminCarInout.carType.black') },
+        { value: 'I', label: this.$t('adminCarInout.carType.internal') },
+        { value: 'NM', label: this.$t('adminCarInout.carType.free') }
+      ]
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          page: this.pagination.current,
+          row: this.pagination.size,
+          ...this.searchForm
+        }
+        const { data, records } = await listAdminCarInoutDetail(params)
+        this.tableData = data
+        this.pagination.total = records
+      } catch (error) {
+        this.$message.error(this.$t('adminCarInout.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleCommunityChange(community) {
+      this.searchForm.communityId = community.communityId
+      this.handleSearch()
+    },
+    handleSearch() {
+      this.pagination.current = 1
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getList()
+    },
+    handleCarOut(row) {
+      // TODO: Implement car out logic
+      console.log('Car out:', row)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.admin-car-inout-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/iot/adminChargeOrderLang.js b/src/views/iot/adminChargeOrderLang.js
new file mode 100644
index 0000000..924cf86
--- /dev/null
+++ b/src/views/iot/adminChargeOrderLang.js
@@ -0,0 +1,112 @@
+export const messages = {
+  en: {
+    adminChargeOrder: {
+      search: {
+        title: 'Search Conditions',
+        orderId: 'Order ID',
+        orderIdPlaceholder: 'Please enter order ID',
+        personName: 'Name',
+        personNamePlaceholder: 'Please enter name',
+        personTel: 'Phone',
+        personTelPlaceholder: 'Please enter phone number',
+        machineName: 'Charger Name',
+        machineNamePlaceholder: 'Please enter charger name',
+        portName: 'Port',
+        portNamePlaceholder: 'Please enter port name',
+        state: 'Status',
+        statePlaceholder: 'Please select status',
+        startTime: 'Start Time',
+        startTimePlaceholder: 'Please select start time',
+        endTime: 'End Time',
+        endTimePlaceholder: 'Please select end time'
+      },
+      table: {
+        title: 'Charging Orders',
+        orderId: 'Order ID',
+        personName: 'Name',
+        personTel: 'Phone',
+        machineName: 'Charger',
+        portName: 'Port',
+        chargeHours: 'Charging Hours',
+        byQuantity: 'By Quantity',
+        hours: 'hours',
+        energy: 'Energy',
+        startTime: 'Start Time',
+        endTime: 'End Time',
+        acctDetailId: 'Account',
+        durationPrice: 'Electricity Fee',
+        servicePrice: 'Service Fee',
+        amount: 'Amount',
+        stateName: 'Status',
+        remark: 'Remark',
+        createTime: 'Create Time'
+      },
+      state: {
+        all: 'All Status',
+        charging: 'Charging',
+        completed: 'Completed',
+        failed: 'Failed'
+      },
+      community: {
+        all: 'All Communities',
+        fetchError: 'Failed to load communities'
+      },
+      fetchError: 'Failed to load charging orders'
+    }
+  },
+  zh: {
+    adminChargeOrder: {
+      search: {
+        title: '查询条件',
+        orderId: '订单编号',
+        orderIdPlaceholder: '请输入订单编号',
+        personName: '名称',
+        personNamePlaceholder: '请输入名称',
+        personTel: '手机号',
+        personTelPlaceholder: '请输入手机号',
+        machineName: '充电桩名称',
+        machineNamePlaceholder: '请输入充电桩名称',
+        portName: '插槽',
+        portNamePlaceholder: '请输入插槽',
+        state: '状态',
+        statePlaceholder: '请选择状态',
+        startTime: '开始时间',
+        startTimePlaceholder: '请选择开始时间',
+        endTime: '结束时间',
+        endTimePlaceholder: '请选择结束时间'
+      },
+      table: {
+        title: '充电订单',
+        orderId: '编号',
+        personName: '名称',
+        personTel: '手机号',
+        machineName: '充电桩',
+        portName: '插槽',
+        chargeHours: '充电小时',
+        byQuantity: '按量充电',
+        hours: '小时',
+        energy: '充电量',
+        startTime: '开始时间',
+        endTime: '结束时间',
+        acctDetailId: '扣款账户',
+        durationPrice: '电费',
+        servicePrice: '服务费',
+        amount: '扣款金额',
+        stateName: '插座状态',
+        remark: '说明',
+        createTime: '创建时间'
+      },
+      state: {
+        all: '全部状态',
+        charging: '充电中',
+        completed: '充电完成',
+        failed: '充电失败'
+      },
+      community: {
+        all: '全部小区',
+        fetchError: '获取小区列表失败'
+      },
+      fetchError: '获取充电订单失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/iot/adminChargeOrderList.vue b/src/views/iot/adminChargeOrderList.vue
new file mode 100644
index 0000000..1a75a11
--- /dev/null
+++ b/src/views/iot/adminChargeOrderList.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="admin-charge-order-container">
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <select-admin-community @changeCommunity="handleCommunityChange" />
+      </el-col>
+      <el-col :span="20">
+        <el-card class="search-card">
+          <div slot="header" class="clearfix flex justify-between">
+            <span>{{ $t('adminChargeOrder.search.title') }}</span>
+          </div>
+          <el-form :inline="true" :model="searchForm" class="search-form">
+            <el-form-item :label="$t('adminChargeOrder.search.orderId')">
+              <el-input v-model="searchForm.orderId" :placeholder="$t('adminChargeOrder.search.orderIdPlaceholder')"
+                clearable />
+            </el-form-item>
+            <el-form-item :label="$t('adminChargeOrder.search.personName')">
+              <el-input v-model="searchForm.personName" :placeholder="$t('adminChargeOrder.search.personNamePlaceholder')"
+                clearable />
+            </el-form-item>
+            <el-form-item :label="$t('adminChargeOrder.search.personTel')">
+              <el-input v-model="searchForm.personTel" :placeholder="$t('adminChargeOrder.search.personTelPlaceholder')"
+                clearable />
+            </el-form-item>
+            <el-form-item :label="$t('adminChargeOrder.search.machineName')">
+              <el-input v-model="searchForm.machineName"
+                :placeholder="$t('adminChargeOrder.search.machineNamePlaceholder')" clearable />
+            </el-form-item>
+            <el-form-item :label="$t('adminChargeOrder.search.portName')">
+              <el-input v-model="searchForm.portName" :placeholder="$t('adminChargeOrder.search.portNamePlaceholder')"
+                clearable />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleSearch">{{ $t('common.search') }}</el-button>
+            </el-form-item>
+          </el-form>
+          <el-form :inline="true" :model="searchForm" class="search-form">
+            <el-form-item :label="$t('adminChargeOrder.search.state')">
+              <el-select v-model="searchForm.state" :placeholder="$t('adminChargeOrder.search.statePlaceholder')"
+                clearable>
+                <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('adminChargeOrder.search.startTime')">
+              <el-date-picker v-model="searchForm.queryStartTime" type="datetime"
+                :placeholder="$t('adminChargeOrder.search.startTimePlaceholder')" value-format="yyyy-MM-dd HH:mm:ss" />
+            </el-form-item>
+            <el-form-item :label="$t('adminChargeOrder.search.endTime')">
+              <el-date-picker v-model="searchForm.queryEndTime" type="datetime"
+                :placeholder="$t('adminChargeOrder.search.endTimePlaceholder')" value-format="yyyy-MM-dd HH:mm:ss" />
+            </el-form-item>
+          </el-form>
+        </el-card>
+
+        <el-card class="table-card">
+          <div slot="header" class="clearfix flex justify-between">
+            <span>{{ $t('adminChargeOrder.table.title') }}</span>
+          </div>
+          <el-table v-loading="loading" :data="tableData" border style="width: 100%">
+            <el-table-column prop="orderId" :label="$t('adminChargeOrder.table.orderId')" align="center" />
+            <el-table-column prop="personName" :label="$t('adminChargeOrder.table.personName')" align="center" />
+            <el-table-column prop="personTel" :label="$t('adminChargeOrder.table.personTel')" align="center" />
+            <el-table-column prop="machineName" :label="$t('adminChargeOrder.table.machineName')" align="center" />
+            <el-table-column prop="portName" :label="$t('adminChargeOrder.table.portName')" align="center" />
+            <el-table-column :label="$t('adminChargeOrder.table.chargeHours')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.chargeHours === 999 ? $t('adminChargeOrder.table.byQuantity') :
+                  `${scope.row.chargeHours}${$t('adminChargeOrder.table.hours')}` }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="energy" :label="$t('adminChargeOrder.table.energy')" align="center" />
+            <el-table-column prop="startTime" :label="$t('adminChargeOrder.table.startTime')" align="center" />
+            <el-table-column prop="endTime" :label="$t('adminChargeOrder.table.endTime')" align="center" />
+            <el-table-column prop="acctDetailId" :label="$t('adminChargeOrder.table.acctDetailId')" align="center"
+              class-name="pointer" />
+            <el-table-column prop="durationPrice" :label="$t('adminChargeOrder.table.durationPrice')" align="center" />
+            <el-table-column prop="servicePrice" :label="$t('adminChargeOrder.table.servicePrice')" align="center" />
+            <el-table-column prop="amount" :label="$t('adminChargeOrder.table.amount')" align="center" />
+            <el-table-column prop="stateName" :label="$t('adminChargeOrder.table.stateName')" align="center" />
+            <el-table-column :label="$t('adminChargeOrder.table.remark')" align="center">
+              <template slot-scope="scope">
+                <div style="width: 100px;">{{ scope.row.remark || '-' }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="createTime" :label="$t('adminChargeOrder.table.createTime')" align="center" />
+          </el-table>
+          <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-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { listAdminChargeMachineOrder } from '@/api/iot/adminChargeOrderApi'
+import SelectAdminCommunity from '@/components/community/selectAdminCommunity'
+
+export default {
+  name: 'AdminChargeOrderList',
+  components: {
+    SelectAdminCommunity
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        orderId: '',
+        personName: '',
+        personTel: '',
+        machineName: '',
+        portName: '',
+        communityId: '',
+        state: '',
+        queryStartTime: '',
+        queryEndTime: '',
+        chargeType: ''
+      },
+      tableData: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      stateOptions: [
+        { value: '', label: this.$t('adminChargeOrder.state.all') },
+        { value: '1001', label: this.$t('adminChargeOrder.state.charging') },
+        { value: '2002', label: this.$t('adminChargeOrder.state.completed') },
+        { value: '3003', label: this.$t('adminChargeOrder.state.failed') }
+      ]
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          ...this.searchForm,
+          page: this.pagination.current,
+          row: this.pagination.size
+        }
+        const { data, total } = await listAdminChargeMachineOrder(params)
+        this.tableData = data
+        this.pagination.total = total
+      } catch (error) {
+        this.$message.error(this.$t('adminChargeOrder.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.pagination.current = 1
+      this.getList()
+    },
+    handleCommunityChange(community) {
+      this.searchForm.communityId = community.communityId
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.admin-charge-order-container {
+  padding: 20px;
+
+  .search-card {
+    margin-bottom: 20px;
+
+    .search-form {
+      margin-bottom: -18px;
+    }
+  }
+
+  .table-card {
+    margin-bottom: 20px;
+  }
+
+  .pointer {
+    cursor: pointer;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/iot/adminMeterRechargeLang.js b/src/views/iot/adminMeterRechargeLang.js
new file mode 100644
index 0000000..a77d722
--- /dev/null
+++ b/src/views/iot/adminMeterRechargeLang.js
@@ -0,0 +1,80 @@
+export const messages = {
+  en: {
+    adminMeterRecharge: {
+      search: {
+        title: 'Search Conditions'
+      },
+      list: {
+        title: 'Recharge Details'
+      },
+      allCommunities: 'All Communities',
+      machineName: 'Machine Name',
+      machineNamePlaceholder: 'Please enter machine name',
+      address: 'Address',
+      addressPlaceholder: 'Please enter address',
+      state: 'State',
+      statePlaceholder: 'Please select recharge state',
+      stateWaiting: 'Waiting',
+      stateFailed: 'Failed',
+      stateCompleted: 'Completed',
+      roomName: 'Room',
+      roomNamePlaceholder: 'Please enter room number (Building-Unit-Room)',
+      startTime: 'Start Time',
+      startTimePlaceholder: 'Please enter start time',
+      endTime: 'End Time',
+      endTimePlaceholder: 'Please enter end time',
+      table: {
+        communityName: 'Community Name',
+        roomName: 'Room',
+        typeName: 'Meter Type',
+        machineName: 'Meter Name',
+        address: 'Meter Number',
+        chargeMoney: 'Charge Amount',
+        chargeDegrees: 'Charge Degrees',
+        createTime: 'Charge Time',
+        state: 'Charge State',
+        remark: 'Remark'
+      },
+      fetchError: 'Failed to fetch recharge details'
+    }
+  },
+  zh: {
+    adminMeterRecharge: {
+      search: {
+        title: '查询条件'
+      },
+      list: {
+        title: '充值明细'
+      },
+      allCommunities: '全部小区',
+      machineName: '表名称',
+      machineNamePlaceholder: '请填写名称',
+      address: '表号',
+      addressPlaceholder: '请填写表号',
+      state: '充值状态',
+      statePlaceholder: '请选择充值状态',
+      stateWaiting: '等待',
+      stateFailed: '失败',
+      stateCompleted: '完成',
+      roomName: '房屋',
+      roomNamePlaceholder: '请填写房屋编号 楼栋-单元-房屋',
+      startTime: '开始时间',
+      startTimePlaceholder: '请输入开始时间',
+      endTime: '结束时间',
+      endTimePlaceholder: '请输入结束时间',
+      table: {
+        communityName: '小区名称',
+        roomName: '房屋',
+        typeName: '表类型',
+        machineName: '表名称',
+        address: '表号',
+        chargeMoney: '充值金额',
+        chargeDegrees: '充值度数',
+        createTime: '充值时间',
+        state: '充值状态',
+        remark: '说明'
+      },
+      fetchError: '获取充值明细失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/iot/adminMeterRechargeList.vue b/src/views/iot/adminMeterRechargeList.vue
new file mode 100644
index 0000000..0cd28c6
--- /dev/null
+++ b/src/views/iot/adminMeterRechargeList.vue
@@ -0,0 +1,215 @@
+<template>
+  <div class="admin-meter-recharge-container">
+    <el-row :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('adminMeterRecharge.search.title') }}</span>
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="4">
+              <el-input v-model="searchForm.machineNameLike"
+                :placeholder="$t('adminMeterRecharge.machineNamePlaceholder')" clearable />
+            </el-col>
+            <el-col :span="4">
+              <el-input v-model="searchForm.addressLike" :placeholder="$t('adminMeterRecharge.addressPlaceholder')"
+                clearable />
+            </el-col>
+            <el-col :span="4">
+              <el-select v-model="searchForm.state" :placeholder="$t('adminMeterRecharge.statePlaceholder')" clearable>
+                <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-input v-model="searchForm.roomNameLike" :placeholder="$t('adminMeterRecharge.roomNamePlaceholder')"
+                clearable />
+            </el-col>
+            <el-col :span="4" class="text-right">
+              <el-button type="primary" @click="handleSearch">
+                <i class="el-icon-search"></i>
+                {{ $t('common.search') }}
+              </el-button>
+              <el-button @click="handleReset">
+                {{ $t('common.reset') }}
+              </el-button>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20" style="margin-top: 15px;">
+            <el-col :span="4">
+              <el-date-picker v-model="searchForm.queryStartTime" type="datetime"
+                :placeholder="$t('adminMeterRecharge.startTimePlaceholder')" value-format="yyyy-MM-dd HH:mm:ss"
+                style="width: 100%;" />
+            </el-col>
+            <el-col :span="4">
+              <el-date-picker v-model="searchForm.queryEndTime" type="datetime"
+                :placeholder="$t('adminMeterRecharge.endTimePlaceholder')" value-format="yyyy-MM-dd HH:mm:ss"
+                style="width: 100%;" />
+            </el-col>
+           
+          </el-row>
+        </el-card>
+
+        <el-card class="box-card" style="margin-top: 20px;">
+          <div slot="header" class="flex justify-between">
+            <span>{{ $t('adminMeterRecharge.list.title') }}</span>
+            <el-button type="primary" size="mini" @click="handleSearch">
+              {{ $t('common.refresh') }}
+            </el-button>
+          </div>
+
+          <el-table v-loading="loading" :data="tableData" border style="width: 100%">
+            <el-table-column prop="communityName" :label="$t('adminMeterRecharge.table.communityName')" align="center" />
+            <el-table-column prop="roomName" :label="$t('adminMeterRecharge.table.roomName')" align="center" />
+            <el-table-column prop="typeName" :label="$t('adminMeterRecharge.table.typeName')" align="center" />
+            <el-table-column prop="machineName" :label="$t('adminMeterRecharge.table.machineName')" align="center" />
+            <el-table-column prop="address" :label="$t('adminMeterRecharge.table.address')" align="center" />
+            <el-table-column prop="chargeMoney" :label="$t('adminMeterRecharge.table.chargeMoney')" align="center" />
+            <el-table-column prop="chargeDegrees" :label="$t('adminMeterRecharge.table.chargeDegrees')" align="center" />
+            <el-table-column prop="createTime" :label="$t('adminMeterRecharge.table.createTime')" align="center" />
+            <el-table-column prop="state" :label="$t('adminMeterRecharge.table.state')" align="center">
+              <template slot-scope="scope">
+                <el-tag :type="getStateTagType(scope.row.state)" size="small">
+                  {{ getStateText(scope.row.state) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="remark" :label="$t('adminMeterRecharge.table.remark')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.remark || '-' }}
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <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" style="margin-top: 20px;" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import SelectAdminCommunity from '@/components/community/selectAdminCommunity'
+import { listAdminMeterCharge } from '@/api/iot/adminMeterRechargeApi'
+
+export default {
+  name: 'AdminMeterRechargeList',
+  components: {
+    SelectAdminCommunity
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        machineNameLike: '',
+        addressLike: '',
+        state: '',
+        roomNameLike: '',
+        communityId: '',
+        detailType: '1001',
+        queryStartTime: '',
+        queryEndTime: '',
+        page: 1,
+        row: 10
+      },
+      tableData: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      stateOptions: [
+        { value: '', label: this.$t('adminMeterRecharge.statePlaceholder') },
+        { value: 'W', label: this.$t('adminMeterRecharge.stateWaiting') },
+        { value: 'F', label: this.$t('adminMeterRecharge.stateFailed') },
+        { value: 'C', label: this.$t('adminMeterRecharge.stateCompleted') }
+      ]
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          ...this.searchForm,
+          page: this.pagination.current,
+          row: this.pagination.size
+        }
+
+        const res = await listAdminMeterCharge(params)
+        this.tableData = res.data
+        this.pagination.total = res.total
+      } catch (error) {
+        this.$message.error(this.$t('adminMeterRecharge.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleCommunityChange(community) {
+      this.searchForm.communityId = community.communityId
+      this.handleSearch()
+    },
+    handleSearch() {
+      this.pagination.current = 1
+      this.getList()
+    },
+    handleReset() {
+      this.searchForm = {
+        machineNameLike: '',
+        addressLike: '',
+        state: '',
+        roomNameLike: '',
+        communityId: this.searchForm.communityId,
+        detailType: '1001',
+        queryStartTime: '',
+        queryEndTime: '',
+        page: 1,
+        row: 10
+      }
+      this.handleSearch()
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getList()
+    },
+    getStateTagType(state) {
+      switch (state) {
+        case 'W': return 'warning'
+        case 'F': return 'danger'
+        case 'C': return 'success'
+        default: return 'info'
+      }
+    },
+    getStateText(state) {
+      switch (state) {
+        case 'W': return this.$t('adminMeterRecharge.stateWaiting')
+        case 'F': return this.$t('adminMeterRecharge.stateFailed')
+        case 'C': return this.$t('adminMeterRecharge.stateCompleted')
+        default: return '-'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.admin-meter-recharge-container {
+  padding: 20px;
+}
+
+.search-form {
+  margin-bottom: 0;
+}
+</style>
\ No newline at end of file