diff --git a/src/api/owner/addOwnerMemberApi.js b/src/api/owner/addOwnerMemberApi.js
new file mode 100644
index 0000000..a9f32ed
--- /dev/null
+++ b/src/api/owner/addOwnerMemberApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function saveOwnerMember(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.saveOwnerMember',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to save owner member'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/owner/ownerDetailAccessControlApi.js b/src/api/owner/ownerDetailAccessControlApi.js
new file mode 100644
index 0000000..6f6a6f6
--- /dev/null
+++ b/src/api/owner/ownerDetailAccessControlApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function listMachineTranslates(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/machineTranslate.listMachineTranslates',
+      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/owner/ownerDetailAccessControlRecordApi.js b/src/api/owner/ownerDetailAccessControlRecordApi.js
new file mode 100644
index 0000000..8152a4c
--- /dev/null
+++ b/src/api/owner/ownerDetailAccessControlRecordApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function getOpenApi(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/iot.getOpenApi',
+      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/owner/ownerDetailAccountApi.js b/src/api/owner/ownerDetailAccountApi.js
new file mode 100644
index 0000000..9f538c1
--- /dev/null
+++ b/src/api/owner/ownerDetailAccountApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function queryCommunityOwnerAccount(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/account.queryCommunityOwnerAccount',
+      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/owner/ownerDetailAccountReceiptApi.js b/src/api/owner/ownerDetailAccountReceiptApi.js
new file mode 100644
index 0000000..226e97f
--- /dev/null
+++ b/src/api/owner/ownerDetailAccountReceiptApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function listAccountReceipt(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/receipt.listAccountReceipt',
+      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/owner/ownerDetailApi.js b/src/api/owner/ownerDetailApi.js
new file mode 100644
index 0000000..c5963a1
--- /dev/null
+++ b/src/api/owner/ownerDetailApi.js
@@ -0,0 +1,21 @@
+import request from '@/utils/request'
+
+// Query owner information
+export function queryOwners(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryOwners',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to query owners'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/owner/ownerDetailAppUserApi.js b/src/api/owner/ownerDetailAppUserApi.js
new file mode 100644
index 0000000..461faa1
--- /dev/null
+++ b/src/api/owner/ownerDetailAppUserApi.js
@@ -0,0 +1,39 @@
+import request from '@/utils/request'
+
+export function listAuditAppUserBindingOwners(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.listAuditAppUserBindingOwners',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code == 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取业主APP用户列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+export function updateAppUserBindingOwner(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.updateAppUserBindingOwner',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code == 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '审核业主APP用户失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/owner/ownerDetailCarApi.js b/src/api/owner/ownerDetailCarApi.js
new file mode 100644
index 0000000..73fbadd
--- /dev/null
+++ b/src/api/owner/ownerDetailCarApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function queryOwnerCars(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryOwnerCars',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to query owner cars'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/owner/ownerDetailChargeMachineOrderApi.js b/src/api/owner/ownerDetailChargeMachineOrderApi.js
new file mode 100644
index 0000000..65d81fd
--- /dev/null
+++ b/src/api/owner/ownerDetailChargeMachineOrderApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function getOpenApi(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/iot.getOpenApi',
+      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/owner/ownerDetailComplaintApi.js b/src/api/owner/ownerDetailComplaintApi.js
new file mode 100644
index 0000000..d3a955a
--- /dev/null
+++ b/src/api/owner/ownerDetailComplaintApi.js
@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export function listComplaints(params) {
+  return request({
+    url: '/complaint.listComplaints',
+    method: 'get',
+    params
+  })
+}
+
+export function listRunWorkflowImage(params) {
+  return request({
+    url: '/complaint/listRunWorkflowImage',
+    method: 'get',
+    params
+  })
+}
\ No newline at end of file
diff --git a/src/api/owner/ownerDetailContractApi.js b/src/api/owner/ownerDetailContractApi.js
new file mode 100644
index 0000000..9bd0a6c
--- /dev/null
+++ b/src/api/owner/ownerDetailContractApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function queryContract(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContract',
+      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/owner/ownerDetailCouponApi.js b/src/api/owner/ownerDetailCouponApi.js
new file mode 100644
index 0000000..3bff953
--- /dev/null
+++ b/src/api/owner/ownerDetailCouponApi.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function listComplaints(params) {
+    return request({
+      url: '/complaint/listComplaints',
+      method: 'get',
+      params
+    })
+  }
\ No newline at end of file
diff --git a/src/api/owner/ownerDetailHisApi.js b/src/api/owner/ownerDetailHisApi.js
new file mode 100644
index 0000000..6989300
--- /dev/null
+++ b/src/api/owner/ownerDetailHisApi.js
@@ -0,0 +1,22 @@
+import request from '@/utils/request'
+
+export function queryHisOwner(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryHisOwner',
+      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/owner/ownerDetailHisFeeApi.js b/src/api/owner/ownerDetailHisFeeApi.js
new file mode 100644
index 0000000..92b50f9
--- /dev/null
+++ b/src/api/owner/ownerDetailHisFeeApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function queryFeeDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.queryFeeDetail',
+      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/owner/ownerDetailMemberApi.js b/src/api/owner/ownerDetailMemberApi.js
new file mode 100644
index 0000000..eb0745e
--- /dev/null
+++ b/src/api/owner/ownerDetailMemberApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function queryOwnerMembers(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryOwnerMembers',
+      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/owner/ownerDetailReceiptApi.js b/src/api/owner/ownerDetailReceiptApi.js
new file mode 100644
index 0000000..3eae5ea
--- /dev/null
+++ b/src/api/owner/ownerDetailReceiptApi.js
@@ -0,0 +1,39 @@
+import request from '@/utils/request'
+
+export function queryFeeReceipt(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeReceipt/queryFeeReceipt',
+      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 listFeePrintPage(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feePrintPage.listFeePrintPage',
+      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/owner/ownerDetailRepairApi.js b/src/api/owner/ownerDetailRepairApi.js
new file mode 100644
index 0000000..7d6830a
--- /dev/null
+++ b/src/api/owner/ownerDetailRepairApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function listOwnerRepairs(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/ownerRepair.listOwnerRepairs',
+      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/owner/ownerDetailRoomApi.js b/src/api/owner/ownerDetailRoomApi.js
new file mode 100644
index 0000000..4d3ca3a
--- /dev/null
+++ b/src/api/owner/ownerDetailRoomApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function queryRoomsByOwner(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/room.queryRoomsByOwner',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to query rooms by owner'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/owner/ownerDetailRoomFeeApi.js b/src/api/owner/ownerDetailRoomFeeApi.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/api/owner/ownerDetailRoomFeeApi.js
diff --git a/src/api/owner/ownerDetailVisitApi.js b/src/api/owner/ownerDetailVisitApi.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/api/owner/ownerDetailVisitApi.js
diff --git a/src/components/owner/addOwnerMember.vue b/src/components/owner/addOwnerMember.vue
new file mode 100644
index 0000000..a888295
--- /dev/null
+++ b/src/components/owner/addOwnerMember.vue
@@ -0,0 +1,390 @@
+<template>
+  <el-dialog
+    :title="$t('addOwnerMember.title')"
+    :visible.sync="dialogVisible"
+    width="80%"
+    @close="_closeSaveOwnerModal"
+  >
+    <el-form :model="addOwnerMemberInfo" :rules="rules" ref="form" label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('addOwnerMember.personRole')" prop="personRole">
+            <el-select
+              v-model="addOwnerMemberInfo.personRole"
+              :placeholder="$t('addOwnerMember.placeholder.personRole')"
+              class="w100"
+            >
+              <el-option
+                v-for="item in roleOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          
+          <el-form-item :label="$t('addOwnerMember.name')" prop="name">
+            <el-input
+              v-model.trim="addOwnerMemberInfo.name"
+              :placeholder="$t('addOwnerMember.placeholder.name')"
+              clearable
+            />
+          </el-form-item>
+          
+          <el-form-item :label="$t('addOwnerMember.link')" prop="link">
+            <el-input
+              v-model.trim="addOwnerMemberInfo.link"
+              :placeholder="$t('addOwnerMember.placeholder.link')"
+              clearable
+            />
+          </el-form-item>
+          
+          <el-form-item :label="$t('addOwnerMember.sex')" prop="sex">
+            <el-select
+              v-model="addOwnerMemberInfo.sex"
+              :placeholder="$t('addOwnerMember.placeholder.sex')"
+              class="w100"
+            >
+              <el-option
+                v-for="item in sexOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        
+        <el-col :span="12" class="text-center">
+          <div class="avatar-uploader">
+            <img
+              v-if="addOwnerMemberInfo.ownerPhotoUrl"
+              :src="addOwnerMemberInfo.ownerPhotoUrl"
+              class="avatar"
+              :alt="$t('addOwnerMember.photo')"
+            >
+            <img
+              v-else
+              src="/img/noPhoto.jpg"
+              class="avatar"
+              :alt="$t('addOwnerMember.photo')"
+            >
+          </div>
+          <el-button
+            type="primary"
+            class="mt10"
+            @click="_uploadPhoto"
+          >
+            {{ $t('addOwnerMember.uploadPhoto') }}
+          </el-button>
+          <input
+            type="file"
+            ref="fileInput"
+            accept=".jpg,.jpeg,.png"
+            @change="_choosePhoto"
+            style="display: none"
+          >
+        </el-col>
+      </el-row>
+      
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('addOwnerMember.concactLink')">
+            <el-input
+              v-model.trim="addOwnerMemberInfo.concactLink"
+              :placeholder="$t('addOwnerMember.placeholder.concactLink')"
+              clearable
+            />
+          </el-form-item>
+          
+          <el-form-item :label="$t('addOwnerMember.address')">
+            <el-input
+              v-model.trim="addOwnerMemberInfo.address"
+              :placeholder="$t('addOwnerMember.placeholder.address')"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        
+        <el-col :span="12">
+          <el-form-item :label="$t('addOwnerMember.idCard')">
+            <el-input
+              v-model.trim="addOwnerMemberInfo.idCard"
+              :placeholder="$t('addOwnerMember.placeholder.idCard')"
+              clearable
+            />
+          </el-form-item>
+          
+          <el-form-item :label="$t('addOwnerMember.remark')">
+            <el-input
+              v-model.trim="addOwnerMemberInfo.remark"
+              :placeholder="$t('addOwnerMember.placeholder.remark')"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      
+      <template v-for="(item,index) in addOwnerMemberInfo.attrs">
+        <el-row :gutter="20" v-if="index % 2 === 0" :key="index">
+          <el-col :span="12">
+            <el-form-item :label="item.specName" v-if="item.specType === '2233'">
+              <el-input
+                v-model="item.value"
+                :placeholder="item.specHoldplace"
+                clearable
+              />
+            </el-form-item>
+            
+            <el-form-item :label="item.specName" v-if="item.specType === '3344'">
+              <el-select
+                v-model="item.value"
+                :placeholder="item.specHoldplace"
+                class="w100"
+              >
+                <el-option
+                  v-for="value in item.values"
+                  :key="value.value"
+                  :label="value.valueName"
+                  :value="value.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          
+          <el-col :span="12" v-if="index < addOwnerMemberInfo.attrs.length-1">
+            <el-form-item 
+              :label="addOwnerMemberInfo.attrs[index+1].specName" 
+              v-if="addOwnerMemberInfo.attrs[index+1].specType === '2233'"
+            >
+              <el-input
+                v-model="addOwnerMemberInfo.attrs[index+1].value"
+                :placeholder="addOwnerMemberInfo.attrs[index+1].specHoldplace"
+                clearable
+              />
+            </el-form-item>
+            
+            <el-form-item 
+              :label="addOwnerMemberInfo.attrs[index+1].specName" 
+              v-if="addOwnerMemberInfo.attrs[index+1].specType === '3344'"
+            >
+              <el-select
+                v-model="addOwnerMemberInfo.attrs[index+1].value"
+                :placeholder="addOwnerMemberInfo.attrs[index+1].specHoldplace"
+                class="w100"
+              >
+                <el-option
+                  v-for="value in addOwnerMemberInfo.attrs[index+1].values"
+                  :key="value.value"
+                  :label="value.valueName"
+                  :value="value.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </template>
+    </el-form>
+    
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="_closeSaveOwnerModal">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="saveOwnerMemberInfo">{{ $t('common.save') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { getAttrSpec, getAttrValue } from '@/api/community/communityApi'
+import { uploadFile } from '@/api/staff/addStaffApi'
+
+export default {
+  name: 'AddOwnerMember',
+  data() {
+    return {
+      dialogVisible: false,
+      addOwnerMemberInfo: {
+        name: '',
+        link: '',
+        address: '',
+        sex: '',
+        remark: '',
+        ownerId: '',
+        ownerPhoto: '',
+        ownerPhotoUrl: '',
+        idCard: '',
+        personType: 'P',
+        personRole: '3',
+        concactLink: '',
+        attrs: []
+      },
+      roleOptions: [
+        { value: '2', label: this.$t('addOwnerMember.role.tenant') },
+        { value: '3', label: this.$t('addOwnerMember.role.family') },
+        { value: '4', label: this.$t('addOwnerMember.role.staff') },
+        { value: '99', label: this.$t('addOwnerMember.role.other') }
+      ],
+      sexOptions: [
+        { value: '0', label: this.$t('common.male') },
+        { value: '1', label: this.$t('common.female') }
+      ],
+      rules: {
+        personRole: [
+          { required: true, message: this.$t('addOwnerMember.placeholder.personRole'), trigger: 'change' }
+        ],
+        name: [
+          { required: true, message: this.$t('addOwnerMember.placeholder.name'), trigger: 'blur' },
+          { min: 2, max: 64, message: this.$t('addOwnerMember.validate.nameLength'), trigger: 'blur' }
+        ],
+        link: [
+          { required: true, message: this.$t('addOwnerMember.placeholder.link'), trigger: 'blur' },
+          { pattern: /^1[3-9]\d{9}$/, message: this.$t('addOwnerMember.validate.phoneFormat'), trigger: 'blur' }
+        ],
+        sex: [
+          { required: true, message: this.$t('addOwnerMember.placeholder.sex'), trigger: 'change' }
+        ],
+        idCard: [
+          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: this.$t('addOwnerMember.validate.idCardFormat'), trigger: 'blur' }
+        ],
+        remark: [
+          { max: 200, message: this.$t('addOwnerMember.validate.remarkLength'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(ownerId) {
+      this.addOwnerMemberInfo.ownerId = ownerId
+      this._loadOwnerAttrSpec()
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate()
+      })
+    },
+    
+    saveOwnerMemberInfo() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          const params = {
+            ...this.addOwnerMemberInfo,
+            communityId: getCommunityId()
+          }
+          
+          this.$http.post('/owner.saveOwnerMember', params)
+            .then(res => {
+              if (res.data.code === 0) {
+                this.$message.success(this.$t('common.saveSuccess'))
+                this.dialogVisible = false
+                this.$emit('save-success')
+              } else {
+                this.$message.error(res.data.msg || this.$t('common.saveFailed'))
+              }
+            })
+            .catch(err => {
+              console.error('请求失败:', err)
+              this.$message.error(this.$t('common.saveFailed'))
+            })
+        }
+      })
+    },
+    
+    _loadOwnerAttrSpec() {
+      this.addOwnerMemberInfo.attrs = []
+      getAttrSpec('building_owner_attr').then(data => {
+        data.forEach(item => {
+          if (item.specShow === 'Y') {
+            item.value = ''
+            item.values = []
+            this._loadAttrValue(item.specCd, item.values)
+            this.addOwnerMemberInfo.attrs.push(item)
+          }
+        })
+      })
+    },
+    
+    _loadAttrValue(specCd, values) {
+      getAttrValue(specCd).then(data => {
+        data.forEach(item => {
+          if (item.valueShow === 'Y') {
+            values.push(item)
+          }
+        })
+      })
+    },
+    
+    _uploadPhoto() {
+      this.$refs.fileInput.click()
+    },
+    
+    _choosePhoto(event) {
+      const files = event.target.files
+      if (files && files.length > 0) {
+        const file = files[0]
+        if (file.size > 1024 * 1024 * 2) {
+          this.$message.error(this.$t('addOwnerMember.validate.photoSize'))
+          return
+        }
+        
+        this._doUploadImage(file)
+      }
+    },
+    
+    _doUploadImage(file) {
+      const formData = new FormData()
+      formData.append('uploadFile', file)
+      formData.append('communityId', getCommunityId())
+      
+      uploadFile(formData).then(res => {
+        this.addOwnerMemberInfo.ownerPhoto = res.fileId
+        this.addOwnerMemberInfo.ownerPhotoUrl = res.url
+      }).catch(err => {
+        console.error('上传失败:', err)
+        this.$message.error(this.$t('addOwnerMember.uploadFailed'))
+      })
+    },
+    
+    _closeSaveOwnerModal() {
+      this.dialogVisible = false
+      this.$refs.form.resetFields()
+      this.addOwnerMemberInfo = {
+        name: '',
+        link: '',
+        address: '',
+        sex: '',
+        remark: '',
+        ownerId: '',
+        ownerPhoto: '',
+        ownerPhotoUrl: '',
+        idCard: '',
+        personType: 'P',
+        personRole: '3',
+        concactLink: '',
+        attrs: []
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.w100 {
+  width: 100%;
+}
+.mt10 {
+  margin-top: 10px;
+}
+.text-center {
+  text-align: center;
+}
+.avatar-uploader {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+.avatar {
+  width: 150px;
+  height: 150px;
+  object-fit: cover;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/owner/addOwnerMemberLang.js b/src/components/owner/addOwnerMemberLang.js
new file mode 100644
index 0000000..93d3bbd
--- /dev/null
+++ b/src/components/owner/addOwnerMemberLang.js
@@ -0,0 +1,80 @@
+export default {
+  en: {
+    addOwnerMember: {
+      title: 'Add Member',
+      personRole: 'Person Role',
+      name: 'Name',
+      link: 'Phone',
+      sex: 'Gender',
+      concactLink: 'Alternate Phone',
+      address: 'Address',
+      idCard: 'ID Card',
+      remark: 'Remark',
+      photo: 'Photo',
+      uploadPhoto: 'Upload Photo',
+      placeholder: {
+        personRole: 'Required, please select person role',
+        name: 'Required, please enter name',
+        link: 'Required, please enter phone number',
+        sex: 'Required, please select gender',
+        concactLink: 'Optional, please enter alternate phone',
+        address: 'Optional, please enter address',
+        idCard: 'Optional, please enter ID card',
+        remark: 'Optional, please enter remark'
+      },
+      role: {
+        tenant: 'Tenant',
+        family: 'Family Member',
+        staff: 'Company Staff',
+        other: 'Other'
+      },
+      validate: {
+        nameLength: 'Name length must be between 2 and 64 characters',
+        phoneFormat: 'Invalid phone number format',
+        idCardFormat: 'Invalid ID card format',
+        remarkLength: 'Remark length cannot exceed 200 characters',
+        photoSize: 'Photo size cannot exceed 2MB'
+      },
+      uploadFailed: 'Photo upload failed'
+    }
+  },
+  zh: {
+    addOwnerMember: {
+      title: '添加成员',
+      personRole: '人员角色',
+      name: '客户名称',
+      link: '联系手机',
+      sex: '性别',
+      concactLink: '备用手机',
+      address: '地址',
+      idCard: '身份证',
+      remark: '备注',
+      photo: '照片',
+      uploadPhoto: '上传照片',
+      placeholder: {
+        personRole: '必填，请选择人员角色',
+        name: '必填，请填写客户名称',
+        link: '必填，请填写联系方式',
+        sex: '必填，请选择性别',
+        concactLink: '可选，请填写备用手机',
+        address: '可填，请填写地址',
+        idCard: '可选，请填写身份证',
+        remark: '可填，请填写备注'
+      },
+      role: {
+        tenant: '租客',
+        family: '家庭成员',
+        staff: '公司员工',
+        other: '其他'
+      },
+      validate: {
+        nameLength: '姓名长度必须在2位至64位',
+        phoneFormat: '手机号格式错误',
+        idCardFormat: '身份证格式不对',
+        remarkLength: '备注长度不能超过200位',
+        photoSize: '图片大小不能超过2MB'
+      },
+      uploadFailed: '照片上传失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/owner/editOwnerMember.vue b/src/components/owner/editOwnerMember.vue
new file mode 100644
index 0000000..1a4eb6f
--- /dev/null
+++ b/src/components/owner/editOwnerMember.vue
@@ -0,0 +1,408 @@
+<template>
+  <el-dialog
+    :title="$t('editOwnerMember.title')"
+    :visible.sync="dialogVisible"
+    width="80%"
+    @close="_closeEditOwnerMemberModal"
+  >
+    <el-form :model="editOwnerMemberInfo" :rules="rules" ref="form" label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('editOwnerMember.personRole')" prop="personRole">
+            <el-select
+              v-model="editOwnerMemberInfo.personRole"
+              :placeholder="$t('editOwnerMember.placeholder.personRole')"
+              class="w100"
+            >
+              <el-option
+                v-for="item in roleOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          
+          <el-form-item :label="$t('editOwnerMember.name')" prop="name">
+            <el-input
+              v-model.trim="editOwnerMemberInfo.name"
+              :placeholder="$t('editOwnerMember.placeholder.name')"
+              clearable
+            />
+          </el-form-item>
+          
+          <el-form-item :label="$t('editOwnerMember.link')" prop="link">
+            <el-input
+              v-model.trim="editOwnerMemberInfo.link"
+              :placeholder="$t('editOwnerMember.placeholder.link')"
+              clearable
+              maxlength="11"
+            />
+          </el-form-item>
+          
+          <el-form-item 
+            :label="$t('editOwnerMember.sex')" 
+            prop="sex"
+            v-if="editOwnerMemberInfo.personType === 'P'"
+          >
+            <el-select
+              v-model="editOwnerMemberInfo.sex"
+              :placeholder="$t('editOwnerMember.placeholder.sex')"
+              class="w100"
+            >
+              <el-option
+                v-for="item in sexOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          
+          <el-form-item :label="$t('editOwnerMember.address')">
+            <el-input
+              v-model.trim="editOwnerMemberInfo.address"
+              :placeholder="$t('editOwnerMember.placeholder.address')"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        
+        <el-col :span="12" class="text-center">
+          <div class="avatar-uploader">
+            <img
+              v-if="editOwnerMemberInfo.ownerPhotoUrl"
+              :src="editOwnerMemberInfo.ownerPhotoUrl"
+              class="avatar"
+              :alt="$t('editOwnerMember.photo')"
+              @error="handleImageError"
+            >
+            <img
+              v-else
+              src="/img/noPhoto.jpg"
+              class="avatar"
+              :alt="$t('editOwnerMember.photo')"
+            >
+          </div>
+          <el-button
+            type="primary"
+            class="mt10"
+            @click="_uploadEditMemberPhoto"
+          >
+            {{ $t('editOwnerMember.uploadPhoto') }}
+          </el-button>
+          <input
+            type="file"
+            ref="fileInput"
+            accept=".jpg,.jpeg,.png"
+            @change="_chooseEditMemberPhoto"
+            style="display: none"
+          >
+        </el-col>
+      </el-row>
+      
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('editOwnerMember.concactLink')">
+            <el-input
+              v-model.trim="editOwnerMemberInfo.concactLink"
+              :placeholder="$t('editOwnerMember.placeholder.concactLink')"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        
+        <el-col :span="12">
+          <el-form-item :label="$t('editOwnerMember.idCard')">
+            <el-input
+              v-model.trim="editOwnerMemberInfo.idCard"
+              :placeholder="$t('editOwnerMember.placeholder.idCard')"
+              clearable
+            />
+          </el-form-item>
+          
+          <el-form-item :label="$t('editOwnerMember.remark')">
+            <el-input
+              v-model.trim="editOwnerMemberInfo.remark"
+              :placeholder="$t('editOwnerMember.placeholder.remark')"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      
+      <template v-for="(item,index) in editOwnerMemberInfo.attrs">
+        <el-row :gutter="20" v-if="index % 2 === 0" :key="index">
+          <el-col :span="12">
+            <el-form-item :label="item.specName" v-if="item.specType === '2233'">
+              <el-input
+                v-model="item.value"
+                :placeholder="item.specHoldplace"
+                clearable
+              />
+            </el-form-item>
+            
+            <el-form-item :label="item.specName" v-if="item.specType === '3344'">
+              <el-select
+                v-model="item.value"
+                :placeholder="item.specHoldplace"
+                class="w100"
+              >
+                <el-option
+                  v-for="value in item.values"
+                  :key="value.value"
+                  :label="value.valueName"
+                  :value="value.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          
+          <el-col :span="12" v-if="index < editOwnerMemberInfo.attrs.length-1">
+            <el-form-item 
+              :label="editOwnerMemberInfo.attrs[index+1].specName" 
+              v-if="editOwnerMemberInfo.attrs[index+1].specType === '2233'"
+            >
+              <el-input
+                v-model="editOwnerMemberInfo.attrs[index+1].value"
+                :placeholder="editOwnerMemberInfo.attrs[index+1].specHoldplace"
+                clearable
+              />
+            </el-form-item>
+            
+            <el-form-item 
+              :label="editOwnerMemberInfo.attrs[index+1].specName" 
+              v-if="editOwnerMemberInfo.attrs[index+1].specType === '3344'"
+            >
+              <el-select
+                v-model="editOwnerMemberInfo.attrs[index+1].value"
+                :placeholder="editOwnerMemberInfo.attrs[index+1].specHoldplace"
+                class="w100"
+              >
+                <el-option
+                  v-for="value in editOwnerMemberInfo.attrs[index+1].values"
+                  :key="value.value"
+                  :label="value.valueName"
+                  :value="value.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </template>
+    </el-form>
+    
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="_closeEditOwnerMemberModal">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="editOwnerMemberMethod">{{ $t('common.save') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { getAttrSpec, getAttrValue } from '@/api/community/communityApi'
+import { uploadFile } from '@/api/staff/addStaffApi'
+
+export default {
+  name: 'EditOwnerMember',
+  data() {
+    return {
+      dialogVisible: false,
+      editOwnerMemberInfo: {
+        ownerId: '',
+        memberId: '',
+        ownerTypeCd: '',
+        name: '',
+        link: '',
+        address: '',
+        sex: '',
+        remark: '',
+        ownerPhoto: '',
+        ownerPhotoUrl: '',
+        idCard: '',
+        personType: 'P',
+        personRole: '1',
+        concactLink: '',
+        attrs: []
+      },
+      roleOptions: [
+        { value: '2', label: this.$t('editOwnerMember.role.tenant') },
+        { value: '3', label: this.$t('editOwnerMember.role.family') },
+        { value: '4', label: this.$t('editOwnerMember.role.staff') },
+        { value: '99', label: this.$t('editOwnerMember.role.other') }
+      ],
+      sexOptions: [
+        { value: '0', label: this.$t('common.male') },
+        { value: '1', label: this.$t('common.female') }
+      ],
+      rules: {
+        personRole: [
+          { required: true, message: this.$t('editOwnerMember.placeholder.personRole'), trigger: 'change' }
+        ],
+        name: [
+          { required: true, message: this.$t('editOwnerMember.placeholder.name'), trigger: 'blur' }
+        ],
+        link: [
+          { required: true, message: this.$t('editOwnerMember.placeholder.link'), trigger: 'blur' },
+          { pattern: /^1[3-9]\d{9}$/, message: this.$t('editOwnerMember.validate.phoneFormat'), trigger: 'blur' }
+        ],
+        sex: [
+          { required: true, message: this.$t('editOwnerMember.placeholder.sex'), trigger: 'change' }
+        ],
+        idCard: [
+          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: this.$t('editOwnerMember.validate.idCardFormat'), trigger: 'blur' }
+        ],
+        remark: [
+          { max: 200, message: this.$t('editOwnerMember.validate.remarkLength'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(member) {
+      this.editOwnerMemberInfo = {
+        ...member,
+        ownerPhoto: member.faceUrl,
+        ownerPhotoUrl: member.faceUrl,
+        attrs: []
+      }
+      
+      this._loadEditOwnerMemberAttrSpec().then(() => {
+        if (Object.prototype.hasOwnProperty.call(member,'ownerAttrDtos')) {
+          const ownerAttrDtos = member.ownerAttrDtos
+          this.editOwnerMemberInfo.attrs.forEach(attrItem => {
+            ownerAttrDtos.forEach(item => {
+              if (item.specCd === attrItem.specCd) {
+                attrItem.attrId = item.attrId
+                attrItem.value = item.value
+              }
+            })
+          })
+        }
+        
+        this.dialogVisible = true
+        this.$nextTick(() => {
+          this.$refs.form.clearValidate()
+        })
+      })
+    },
+    
+    editOwnerMemberMethod() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          const params = {
+            ...this.editOwnerMemberInfo,
+            communityId: getCommunityId()
+          }
+          
+          this.$http.post('/owner.editOwnerMember', params)
+            .then(res => {
+              if (res.data.code === 0) {
+                this.$message.success(this.$t('common.saveSuccess'))
+                this.dialogVisible = false
+                this.$emit('save-success')
+              } else {
+                this.$message.error(res.data.msg || this.$t('common.saveFailed'))
+              }
+            })
+            .catch(err => {
+              console.error('请求失败:', err)
+              this.$message.error(this.$t('common.saveFailed'))
+            })
+        }
+      })
+    },
+    
+    _loadEditOwnerMemberAttrSpec() {
+      return new Promise(resolve => {
+        this.editOwnerMemberInfo.attrs = []
+        getAttrSpec('building_owner_attr').then(data => {
+          data.forEach(item => {
+            if (item.specShow === 'Y') {
+              item.value = ''
+              item.values = []
+              this._loadEditMemberAttrValue(item.specCd, item.values)
+              this.editOwnerMemberInfo.attrs.push(item)
+            }
+          })
+          resolve()
+        })
+      })
+    },
+    
+    _loadEditMemberAttrValue(specCd, values) {
+      getAttrValue(specCd).then(data => {
+        data.forEach(item => {
+          if (item.valueShow === 'Y') {
+            values.push(item)
+          }
+        })
+      })
+    },
+    
+    _uploadEditMemberPhoto() {
+      this.$refs.fileInput.click()
+    },
+    
+    _chooseEditMemberPhoto(event) {
+      const files = event.target.files
+      if (files && files.length > 0) {
+        const file = files[0]
+        if (file.size > 1024 * 1024 * 2) {
+          this.$message.error(this.$t('editOwnerMember.validate.photoSize'))
+          return
+        }
+        
+        this._doUploadImageEditOwnerMember(file)
+      }
+    },
+    
+    _doUploadImageEditOwnerMember(file) {
+      const formData = new FormData()
+      formData.append('uploadFile', file)
+      formData.append('communityId', getCommunityId())
+      
+      uploadFile(formData).then(res => {
+        this.editOwnerMemberInfo.ownerPhoto = res.fileId
+        this.editOwnerMemberInfo.ownerPhotoUrl = res.url
+      }).catch(err => {
+        console.error('上传失败:', err)
+        this.$message.error(this.$t('editOwnerMember.uploadFailed'))
+      })
+    },
+    
+    _closeEditOwnerMemberModal() {
+      this.dialogVisible = false
+      this.$refs.form.resetFields()
+    },
+    
+    handleImageError(e) {
+      e.target.src = '/img/noPhoto.jpg'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.w100 {
+  width: 100%;
+}
+.mt10 {
+  margin-top: 10px;
+}
+.text-center {
+  text-align: center;
+}
+.avatar-uploader {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+.avatar {
+  width: 150px;
+  height: 150px;
+  object-fit: cover;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailAccessControl.vue b/src/components/owner/ownerDetailAccessControl.vue
new file mode 100644
index 0000000..3f71fa2
--- /dev/null
+++ b/src/components/owner/ownerDetailAccessControl.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="margin-top">
+    <el-table
+      :data="ownerDetailAccessControlInfo.machineTranslates"
+      style="width: 100%"
+      border
+      stripe
+    >
+      <el-table-column prop="typeCdName" :label="$t('ownerDetailAccessControl.objectType')" align="center"></el-table-column>
+      <el-table-column prop="objName" :label="$t('ownerDetailAccessControl.objectName')" align="center"></el-table-column>
+      <el-table-column prop="machineCmdName" :label="$t('ownerDetailAccessControl.command')" align="center"></el-table-column>
+      <el-table-column prop="stateName" :label="$t('ownerDetailAccessControl.status')" align="center"></el-table-column>
+      <el-table-column :label="$t('ownerDetailAccessControl.description')" align="center">
+        <template slot-scope="scope">
+          <div class="hc-td">{{scope.row.remark}}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="updateTime" :label="$t('ownerDetailAccessControl.syncTime')" align="center"></el-table-column>
+      <el-table-column :label="$t('ownerDetailAccessControl.operation')" align="center">
+        <template slot-scope="scope">
+          <el-button
+            v-if="scope.row.state != '20000'"
+            type="text"
+            size="small"
+            @click="_openEditMachineTranslateModel(scope.row)"
+          >
+            {{$t('ownerDetailAccessControl.resync')}}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-row>
+      <el-col :span="4"></el-col>
+      <el-col :span="20">
+        <el-pagination
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-size="pageSize"
+          layout="total, prev, pager, next, jumper"
+          :total="total">
+        </el-pagination>
+      </el-col>
+    </el-row>
+    <edit-machine-translate ref="editMachineTranslate"></edit-machine-translate>
+  </div>
+</template>
+
+<script>
+import { listMachineTranslates } from '@/api/owner/ownerDetailAccessControlApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import EditMachineTranslate from '@/components/machine/editMachineTranslate'
+
+export default {
+  name: 'OwnerDetailAccessControl',
+  components: {
+    EditMachineTranslate
+  },
+  data() {
+    return {
+      ownerDetailAccessControlInfo: {
+        machineTranslates: [],
+        ownerId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(ownerId) {
+      this.ownerDetailAccessControlInfo.ownerId = ownerId
+      this._loadOwnerDetailAccessControlData(this.currentPage, this.pageSize)
+    },
+    _loadOwnerDetailAccessControlData(page, row) {
+      const param = {
+        page: page,
+        row: row,
+        communityId: this.communityId,
+        objId: this.ownerDetailAccessControlInfo.ownerId,
+        typeCd: '8899'
+      }
+
+      listMachineTranslates(param).then(response => {
+        this.ownerDetailAccessControlInfo.machineTranslates = response.data.machineTranslates
+        this.total = response.data.total
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    _openEditMachineTranslateModel(machineTranslate) {
+      this.$refs.editMachineTranslate.open(machineTranslate)
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadOwnerDetailAccessControlData(val, this.pageSize)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailAccessControlDemo.vue b/src/components/owner/ownerDetailAccessControlDemo.vue
new file mode 100644
index 0000000..ab04743
--- /dev/null
+++ b/src/components/owner/ownerDetailAccessControlDemo.vue
@@ -0,0 +1,18 @@
+<template>
+  <owner-detail-access-control ref="ownerDetailAccessControl" />
+</template>
+
+<script>
+import OwnerDetailAccessControl from '@/components/owner/ownerDetailAccessControl'
+
+export default {
+  components: {
+    OwnerDetailAccessControl
+  },
+  methods: {
+    open(ownerId) {
+      this.$refs.ownerDetailAccessControl.open(ownerId)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailAccessControlRecord.vue b/src/components/owner/ownerDetailAccessControlRecord.vue
new file mode 100644
index 0000000..afdcc27
--- /dev/null
+++ b/src/components/owner/ownerDetailAccessControlRecord.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="margin-top">
+    <el-table
+      :data="ownerDetailAccessControlRecordInfo.inouts"
+      style="width: 100%"
+      border
+      stripe
+    >
+      <el-table-column :label="$t('ownerDetailAccessControlRecord.face')" align="center" width="120">
+        <template slot-scope="scope">
+          <img 
+            style="width: 60px; height: 60px;" 
+            class="border-radius" 
+            :src="scope.row.facePath || '/img/noPhoto.jpg'" 
+            @click="_viewOwnerFace(scope.row.facePath)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="inoutId" :label="$t('ownerDetailAccessControlRecord.id')" align="center"></el-table-column>
+      <el-table-column prop="machineName" :label="$t('ownerDetailAccessControlRecord.deviceName')" align="center"></el-table-column>
+      <el-table-column prop="machineCode" :label="$t('ownerDetailAccessControlRecord.deviceCode')" align="center"></el-table-column>
+      <el-table-column prop="name" :label="$t('ownerDetailAccessControlRecord.userName')" align="center"></el-table-column>
+      <el-table-column :label="$t('ownerDetailAccessControlRecord.openType')" align="center">
+        <template slot-scope="scope">
+          {{scope.row.openTypeCd === '1000' ? $t('ownerDetailAccessControlRecord.face') : $t('ownerDetailAccessControlRecord.other')}}
+        </template>
+      </el-table-column>
+      <el-table-column prop="tel" :label="$t('ownerDetailAccessControlRecord.phone')" align="center">
+        <template slot-scope="scope">
+          {{scope.row.tel || '-'}}
+        </template>
+      </el-table-column>
+      <el-table-column prop="idCard" :label="$t('ownerDetailAccessControlRecord.idCard')" align="center">
+        <template slot-scope="scope">
+          {{scope.row.idCard || '-'}}
+        </template>
+      </el-table-column>
+      <el-table-column prop="similar" :label="$t('ownerDetailAccessControlRecord.similarity')" align="center"></el-table-column>
+      <el-table-column :label="$t('ownerDetailAccessControlRecord.openStatus')" align="center">
+        <template slot-scope="scope">
+          {{scope.row.state === 'C' ? $t('ownerDetailAccessControlRecord.success') : $t('ownerDetailAccessControlRecord.failed')}}
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" :label="$t('ownerDetailAccessControlRecord.openTime')" align="center"></el-table-column>
+    </el-table>
+    <el-row>
+      <el-col :span="4"></el-col>
+      <el-col :span="20">
+        <el-pagination
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-size="pageSize"
+          layout="total, prev, pager, next, jumper"
+          :total="total">
+        </el-pagination>
+      </el-col>
+    </el-row>
+    <view-image ref="viewImage"></view-image>
+  </div>
+</template>
+
+<script>
+import { getOpenApi } from '@/api/owner/ownerDetailAccessControlRecordApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import ViewImage from '@/components/system/viewImage'
+
+export default {
+  name: 'OwnerDetailAccessControlRecord',
+  components: {
+    ViewImage
+  },
+  data() {
+    return {
+      ownerDetailAccessControlRecordInfo: {
+        inouts: [],
+        ownerId: '',
+        link: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(ownerId, link) {
+      this.ownerDetailAccessControlRecordInfo.ownerId = ownerId
+      this.ownerDetailAccessControlRecordInfo.link = link
+      this._loadOwnerDetailAccessControlRecordData(this.currentPage, this.pageSize)
+    },
+    _loadOwnerDetailAccessControlRecordData(page, row) {
+      const param = {
+        page: page,
+        row: row,
+        communityId: this.communityId,
+        tel: this.ownerDetailAccessControlRecordInfo.link,
+        iotApiCode: 'listAccessControlInoutBmoImpl'
+      }
+
+      getOpenApi(param).then(response => {
+        this.ownerDetailAccessControlRecordInfo.inouts = response.data.data
+        this.total = response.data.total
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    _viewOwnerFace(url) {
+      if (url) {
+        this.$refs.viewImage.show(url)
+      }
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadOwnerDetailAccessControlRecordData(val, this.pageSize)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailAccessControlRecordDemo.vue b/src/components/owner/ownerDetailAccessControlRecordDemo.vue
new file mode 100644
index 0000000..e4a1781
--- /dev/null
+++ b/src/components/owner/ownerDetailAccessControlRecordDemo.vue
@@ -0,0 +1,18 @@
+<template>
+  <owner-detail-access-control-record ref="ownerDetailAccessControlRecord" />
+</template>
+
+<script>
+import OwnerDetailAccessControlRecord from '@/components/owner/ownerDetailAccessControlRecord'
+
+export default {
+  components: {
+    OwnerDetailAccessControlRecord
+  },
+  methods: {
+    open(ownerId, link) {
+      this.$refs.ownerDetailAccessControlRecord.open(ownerId, link)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailAccount.vue b/src/components/owner/ownerDetailAccount.vue
new file mode 100644
index 0000000..d35241e
--- /dev/null
+++ b/src/components/owner/ownerDetailAccount.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="margin-top">
+    <el-row>
+      <el-col :span="24" class="text-right">
+        <el-button type="primary" size="small" style="margin-left:10px"
+          v-if="ownerDetailAccountInfo.accounts.length <1 && hasPrivilege('502023032809461736')"
+          @click="_prestoreAccount1()">
+          {{ $t('ownerDetailAccount.prestore') }}
+        </el-button>
+      </el-col>
+    </el-row>
+    <div class="margin-top">
+      <el-table :data="ownerDetailAccountInfo.accounts" style="width: 100%">
+        <el-table-column prop="acctId" :label="$t('ownerDetailAccount.acctId')" align="center"></el-table-column>
+        <el-table-column prop="acctName" :label="$t('ownerDetailAccount.acctName')" align="center"></el-table-column>
+        <el-table-column prop="link" :label="$t('ownerDetailAccount.phone')" align="center"></el-table-column>
+        <el-table-column prop="acctTypeName" :label="$t('ownerDetailAccount.acctType')" align="center"></el-table-column>
+        <el-table-column prop="amount" :label="$t('ownerDetailAccount.amount')" align="center"></el-table-column>
+        <el-table-column prop="createTime" :label="$t('ownerDetailAccount.createTime')" align="center"></el-table-column>
+        <el-table-column :label="$t('common.operation')" align="center" width="200">
+          <template slot-scope="scope">
+            <el-button-group>
+              <el-button size="mini" @click="_prestoreAccount(scope.row)"
+                v-if="hasPrivilege('502023032809461736')">
+                {{ $t('ownerDetailAccount.prestore') }}
+              </el-button>
+              <el-button size="mini" @click="_accountDetail(scope.row)">
+                {{ $t('ownerDetailAccount.detail') }}
+              </el-button>
+            </el-button-group>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @current-change="handleCurrentChange"
+        :current-page="pagination.currentPage"
+        :page-size="pagination.pageSize"
+        :total="pagination.total"
+        layout="total, prev, pager, next, jumper">
+      </el-pagination>
+    </div>
+
+    <prestore-account ref="prestoreAccount" @refresh="_loadOwnerDetailAccountData"></prestore-account>
+  </div>
+</template>
+
+<script>
+import PrestoreAccount from '@/components/account/prestoreAccount'
+import { queryCommunityOwnerAccount } from '@/api/owner/ownerDetailAccountApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'OwnerDetailAccount',
+  components: {
+    PrestoreAccount
+  },
+  data() {
+    return {
+      ownerDetailAccountInfo: {
+        accounts: [],
+        ownerId: '',
+        name: '',
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(ownerId, ownerName, link) {
+      this.ownerDetailAccountInfo.ownerId = ownerId
+      this.ownerDetailAccountInfo.ownerName = ownerName
+      this.ownerDetailAccountInfo.link = link
+      this._loadOwnerDetailAccountData(1, this.pagination.pageSize)
+    },
+    _loadOwnerDetailAccountData(page, row) {
+      const params = {
+        communityId: getCommunityId(),
+        ownerId: this.ownerDetailAccountInfo.ownerId,
+        page: page,
+        row: row
+      }
+
+      queryCommunityOwnerAccount(params).then(response => {
+        this.ownerDetailAccountInfo.accounts = response.data
+        this.pagination.total = response.records
+      }).catch(error => {
+        console.error('请求失败处理', error)
+      })
+    },
+    _accountDetail(account) {
+      this.$router.push(`/property/accountDetailManage?acctId=${account.acctId}`)
+    },
+    _prestoreAccount(account) {
+      this.$refs.prestoreAccount.open({
+        ownerId: this.ownerDetailAccountInfo.ownerId,
+        acctType: account.acctType,
+        tel: account.link,
+        roomId: account.roomId
+      })
+    },
+    _prestoreAccount1() {
+      this.$refs.prestoreAccount.open({})
+    },
+    handleCurrentChange(val) {
+      this._loadOwnerDetailAccountData(val, this.pagination.pageSize)
+    },
+  },
+  created() {
+    this.$on('switch', (data) => {
+      this.ownerDetailAccountInfo.ownerId = data.ownerId
+      this._loadOwnerDetailAccountData(1, this.pagination.pageSize)
+    })
+  }
+}
+</script>
+
+<style scoped>
+/* 样式同上一个组件 */
+</style>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailAccountDemo.vue b/src/components/owner/ownerDetailAccountDemo.vue
new file mode 100644
index 0000000..14e89c5
--- /dev/null
+++ b/src/components/owner/ownerDetailAccountDemo.vue
@@ -0,0 +1,19 @@
+<template>
+  <owner-detail-account ref="ownerDetailAccount" />
+</template>
+
+<script>
+import OwnerDetailAccount from './ownerDetailAccount'
+
+export default {
+  components: {
+    OwnerDetailAccount
+  },
+  methods: {
+    open(ownerId) {
+      this.$refs.ownerDetailAccount.ownerDetailAccountInfo.ownerId = ownerId
+      this.$refs.ownerDetailAccount._loadOwnerDetailAccountData(1, 10)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailAccountReceipt.vue b/src/components/owner/ownerDetailAccountReceipt.vue
new file mode 100644
index 0000000..e78864a
--- /dev/null
+++ b/src/components/owner/ownerDetailAccountReceipt.vue
@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <el-row class="margin-top-lg">
+      <el-col :span="12"></el-col>
+      <el-col :span="12" class="text-right">
+        <el-button type="primary" size="small" @click="_printFeeAccountReceipt" style="margin-left:10px">
+          {{$t('ownerDetailAccountReceipt.print')}}
+        </el-button>
+        <el-button type="primary" size="small" @click="_printFeeSmallAccountReceipt" style="margin-left:10px">
+          {{$t('ownerDetailAccountReceipt.printSmall')}}
+        </el-button>
+      </el-col>
+    </el-row>
+    <div class="margin-top">
+      <el-table
+        :data="ownerDetailAccountReceiptInfo.feeReceipts"
+        style="width: 100%; margin-top: 10px"
+        border
+        stripe
+      >
+        <el-table-column width="50" align="center">
+          <template slot-scope="scope">
+            <el-checkbox 
+              v-model="scope.row.checked"
+              @change="handleCheckChange(scope.row)"
+            ></el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column prop="acctName" :label="$t('ownerDetailAccountReceipt.accountName')" align="center"></el-table-column>
+        <el-table-column prop="acctTypeName" :label="$t('ownerDetailAccountReceipt.accountType')" align="center"></el-table-column>
+        <el-table-column prop="ownerName" :label="$t('ownerDetailAccountReceipt.owner')" align="center"></el-table-column>
+        <el-table-column prop="receivedAmount" :label="$t('ownerDetailAccountReceipt.prestoreAmount')" align="center"></el-table-column>
+        <el-table-column prop="primeRateName" :label="$t('ownerDetailAccountReceipt.prestoreMethod')" align="center"></el-table-column>
+        <el-table-column prop="amount" :label="$t('ownerDetailAccountReceipt.totalAmount')" align="center"></el-table-column>
+        <el-table-column prop="createTime" :label="$t('ownerDetailAccountReceipt.prestoreTime')" align="center"></el-table-column>
+        <el-table-column prop="arId" :label="$t('ownerDetailAccountReceipt.receiptId')" align="center"></el-table-column>
+      </el-table>
+      <el-pagination
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        layout="total, prev, pager, next, jumper"
+        :total="total">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listAccountReceipt } from '@/api/owner/ownerDetailAccountReceiptApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'OwnerDetailAccountReceipt',
+  data() {
+    return {
+      ownerDetailAccountReceiptInfo: {
+        feeReceipts: [],
+        ownerId: '',
+        total: 0,
+        records: 0,
+        selectReceipts: []
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(ownerId) {
+      this.ownerDetailAccountReceiptInfo.ownerId = ownerId
+      this._listOwnerDetailAccountReceipt(this.currentPage, this.pageSize)
+    },
+    _listOwnerDetailAccountReceipt(page, rows) {
+      this.ownerDetailAccountReceiptInfo.selectReceipts = []
+      const param = {
+        page: page,
+        row: rows,
+        ownerId: this.ownerDetailAccountReceiptInfo.ownerId,
+        communityId: this.communityId
+      }
+
+      listAccountReceipt(param).then(response => {
+        this.ownerDetailAccountReceiptInfo.feeReceipts = response.data.data.map(item => {
+          return { ...item, checked: false }
+        })
+        this.total = response.data.total
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    _printFeeAccountReceipt() {
+      const selected = this.ownerDetailAccountReceiptInfo.feeReceipts.filter(item => item.checked)
+      if (selected.length < 1) {
+        this.$message.warning(this.$t('ownerDetailAccountReceipt.selectPrint'))
+        return
+      }
+      const arIds = selected.map(item => item.arId).join(',')
+      window.open(`/print.html#/pages/property/printAccountReceipt?arIds=${arIds}&apply=N`)
+    },
+    _printFeeSmallAccountReceipt() {
+      const selected = this.ownerDetailAccountReceiptInfo.feeReceipts.filter(item => item.checked)
+      if (selected.length < 1) {
+        this.$message.warning(this.$t('ownerDetailAccountReceipt.selectPrint'))
+        return
+      }
+      const arIds = selected.map(item => item.arId).join(',')
+      window.open(`/smallPrint.html#/pages/property/printSmallAccountReceipt?arIds=${arIds}`)
+    },
+    handleCheckChange(row) {
+      if (row.checked) {
+        this.ownerDetailAccountReceiptInfo.selectReceipts.push(row.arId)
+      } else {
+        const index = this.ownerDetailAccountReceiptInfo.selectReceipts.indexOf(row.arId)
+        if (index > -1) {
+          this.ownerDetailAccountReceiptInfo.selectReceipts.splice(index, 1)
+        }
+      }
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._listOwnerDetailAccountReceipt(val, this.pageSize)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailAccountReceiptDemo.vue b/src/components/owner/ownerDetailAccountReceiptDemo.vue
new file mode 100644
index 0000000..c974d98
--- /dev/null
+++ b/src/components/owner/ownerDetailAccountReceiptDemo.vue
@@ -0,0 +1,18 @@
+<template>
+  <owner-detail-account-receipt ref="ownerDetailAccountReceipt" />
+</template>
+
+<script>
+import OwnerDetailAccountReceipt from '@/components/owner/ownerDetailAccountReceipt'
+
+export default {
+  components: {
+    OwnerDetailAccountReceipt
+  },
+  methods: {
+    open(ownerId) {
+      this.$refs.ownerDetailAccountReceipt.open(ownerId)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailAppUser.vue b/src/components/owner/ownerDetailAppUser.vue
new file mode 100644
index 0000000..35f463d
--- /dev/null
+++ b/src/components/owner/ownerDetailAppUser.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="margin-top">
+    <el-table :data="ownerDetailAppUserInfo.appUsers" style="width: 100%">
+      <el-table-column prop="communityName" :label="$t('ownerDetailAppUser.communityName')" align="center"></el-table-column>
+      <el-table-column prop="appUserName" :label="$t('ownerDetailAppUser.relatedOwner')" align="center"></el-table-column>
+      <el-table-column prop="idCard" :label="$t('ownerDetailAppUser.idCard')" align="center"></el-table-column>
+      <el-table-column prop="link" :label="$t('ownerDetailAppUser.phone')" align="center"></el-table-column>
+      <el-table-column prop="stateName" :label="$t('ownerDetailAppUser.status')" align="center"></el-table-column>
+      <el-table-column prop="createTime" :label="$t('ownerDetailAppUser.applyTime')" align="center"></el-table-column>
+      <el-table-column prop="appTypeName" :label="$t('ownerDetailAppUser.appType')" align="center"></el-table-column>
+      <el-table-column :label="$t('common.operation')" align="center" width="300">
+        <template slot-scope="scope">
+          <el-button-group>
+            <el-button size="mini" v-if="scope.row.state == '10000'" 
+              @click="_openAuditAppUserBindingOwnerModel(scope.row)">
+              {{ $t('common.audit') }}
+            </el-button>
+            <el-button size="mini" @click="_deleteAppUserBindingOwnerModel(scope.row)">
+              {{ $t('ownerDetailAppUser.unbind') }}
+            </el-button>
+            <el-button size="mini" @click="_resetUserPwdModel(scope.row)">
+              {{ $t('ownerDetailAppUser.resetPwd') }}
+            </el-button>
+          </el-button-group>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @current-change="handleCurrentChange"
+      :current-page="pagination.currentPage"
+      :page-size="pagination.pageSize"
+      :total="pagination.total"
+      layout="total, prev, pager, next, jumper">
+    </el-pagination>
+
+    <audit ref="audit" @auditMessage="auditMessage"></audit>
+    <delete-app-user-binding-owner ref="deleteAppUserBindingOwner" @refresh="_loadOwnerDetailAppUserData"></delete-app-user-binding-owner>
+    <reset-staff-pwd ref="resetStaffPwd"></reset-staff-pwd>
+  </div>
+</template>
+
+<script>
+import Audit from '@/components/staff/Audit'
+import DeleteAppUserBindingOwner from './DeleteAppUserBindingOwner'
+import ResetStaffPwd from '@/components/staff/resetStaffPwd'
+import { listAuditAppUserBindingOwners, updateAppUserBindingOwner } from '@/api/owner/ownerDetailAppUserApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'OwnerDetailAppUser',
+  components: {
+    Audit,
+    DeleteAppUserBindingOwner,
+    ResetStaffPwd
+  },
+  data() {
+    return {
+      ownerDetailAppUserInfo: {
+        appUsers: [],
+        ownerId: '',
+        name: '',
+        currentAppUserId: ''
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(ownerId, ownerName, link) {
+      this.ownerDetailAppUserInfo.ownerId = ownerId
+      this.ownerDetailAppUserInfo.ownerName = ownerName
+      this.ownerDetailAppUserInfo.link = link
+      this._loadOwnerDetailAppUserData(1, this.pagination.pageSize)
+    },
+    _loadOwnerDetailAppUserData(page, row) {
+      const params = {
+        communityId: getCommunityId(),
+        memberId: this.ownerDetailAppUserInfo.ownerId,
+        name: this.ownerDetailAppUserInfo.name,
+        page: page,
+        row: row
+      }
+
+      listAuditAppUserBindingOwners(params).then(response => {
+        this.ownerDetailAppUserInfo.appUsers = response.data
+        this.pagination.total = response.records
+      }).catch(error => {
+        console.error('请求失败处理', error)
+      })
+    },
+    _openAuditAppUserBindingOwnerModel(auditAppUserBindingOwner) {
+      this.ownerDetailAppUserInfo.currentAppUserId = auditAppUserBindingOwner.appUserId
+      this.$refs.audit.open({})
+    },
+    _auditAppUserBindingOwner(auditInfo) {
+      auditInfo.communityId = getCommunityId()
+      auditInfo.appUserId = this.ownerDetailAppUserInfo.currentAppUserId
+      
+      updateAppUserBindingOwner(auditInfo).then(() => {
+        this.$message.success(this.$t('common.processSuccess'))
+        this._loadOwnerDetailAppUserData(1, this.pagination.pageSize)
+      }).catch(error => {
+        this.$message.error(this.$t('common.processFailed') + error)
+      })
+    },
+    _deleteAppUserBindingOwnerModel(auditAppUserBindingOwner) {
+      this.$refs.deleteAppUserBindingOwner.open(auditAppUserBindingOwner)
+    },
+    _resetUserPwdModel(staff) {
+      this.$refs.resetStaffPwd.open(staff)
+    },
+    handleCurrentChange(val) {
+      this._loadOwnerDetailAppUserData(val, this.pagination.pageSize)
+    },
+  },
+  created() {
+    this.$on('switch', (data) => {
+      this.ownerDetailAppUserInfo.ownerId = data.ownerId
+      this._loadOwnerDetailAppUserData(1, this.pagination.pageSize)
+    })
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailAppUserDemo.vue b/src/components/owner/ownerDetailAppUserDemo.vue
new file mode 100644
index 0000000..88f43c4
--- /dev/null
+++ b/src/components/owner/ownerDetailAppUserDemo.vue
@@ -0,0 +1,19 @@
+<template>
+  <owner-detail-app-user ref="ownerDetailAppUser" />
+</template>
+
+<script>
+import OwnerDetailAppUser from './ownerDetailAppUser'
+
+export default {
+  components: {
+    OwnerDetailAppUser
+  },
+  methods: {
+    open(ownerId) {
+      this.$refs.ownerDetailAppUser.ownerDetailAppUserInfo.ownerId = ownerId
+      this.$refs.ownerDetailAppUser._loadOwnerDetailAppUserData(1, 10)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailCar.vue b/src/components/owner/ownerDetailCar.vue
new file mode 100644
index 0000000..b4a0951
--- /dev/null
+++ b/src/components/owner/ownerDetailCar.vue
@@ -0,0 +1,196 @@
+<template>
+  <div class="margin-top">
+    <el-row class="margin-top-lg">
+      <el-col :span="4" class="padding-right-xs padding-left-xl">
+        <el-input
+          v-model="ownerDetailCarInfo.carNum"
+          :placeholder="$t('ownerDetailCar.pleaseEnterCarNumber')"
+        />
+      </el-col>
+      <el-col :span="4" class="padding-right-xs padding-right-xl">
+        <el-button
+          type="primary"
+          size="small"
+          style="margin-left:10px"
+          @click="_qureyOwnerDetailCar"
+        >
+          <i class="el-icon-search"></i>{{ $t('common.query') }}
+        </el-button>
+      </el-col>
+      <el-col :span="16" class="text-right">
+        <el-button
+          type="primary"
+          size="small"
+          style="margin-left:10px"
+          v-if="hasPrivilege('502023032813991677')"
+          @click="_addOwnerCar"
+        >
+          {{ $t('ownerDetailCar.addCar') }}
+        </el-button>
+      </el-col>
+    </el-row>
+    <div class="margin-top">
+      <el-table
+        :data="ownerDetailCarInfo.cars"
+        style="width: 100%"
+        border
+        stripe
+      >
+        <el-table-column
+          prop="carNum"
+          :label="$t('ownerDetailCar.carNumber')"
+          align="center"
+        />
+        <el-table-column
+          :label="$t('ownerDetailCar.licenseType')"
+          align="center"
+        >
+          <template slot-scope="scope">
+            {{ scope.row.leaseType === 'T' ? $t('ownerDetailCar.temporaryCar') : scope.row.leaseTypeName }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="carTypeName"
+          :label="$t('ownerDetailCar.carType')"
+          align="center"
+        />
+        <el-table-column
+          prop="carColor"
+          :label="$t('ownerDetailCar.color')"
+          align="center"
+        />
+        <el-table-column
+          :label="$t('ownerDetailCar.owner')"
+          align="center"
+        >
+          <template slot-scope="scope">
+            {{ scope.row.ownerName }}({{ scope.row.link }})
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="$t('ownerDetailCar.parkingSpace')"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <span v-if="scope.row.areaNum && scope.row.state === '1001'">
+              {{ scope.row.areaNum }}-{{ scope.row.num }}
+            </span>
+            <span v-else>
+              {{ $t('ownerDetailCar.parkingSpaceReleased') }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="$t('ownerDetailCar.validityPeriod')"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <div v-if="scope.row.leaseType === 'H'">
+              {{ scope.row.startTime }}<br>~{{ scope.row.endTime }}
+            </div>
+            <div v-else>-</div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-row>
+        <el-col :span="12" :offset="12">
+          <el-pagination
+            @current-change="handlePageChange"
+            :current-page="pagination.currentPage"
+            :page-size="pagination.pageSize"
+            :total="pagination.total"
+            layout="total, prev, pager, next, jumper"
+            class="text-right"
+          />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryOwnerCars } from '@/api/owner/ownerDetailCarApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'OwnerDetailCar',
+  data() {
+    return {
+      ownerDetailCarInfo: {
+        cars: [],
+        ownerId: '',
+        ownerName: '',
+        carNum: ''
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(ownerId, ownerName) {
+      this.ownerDetailCarInfo.ownerId = ownerId
+      this.ownerDetailCarInfo.ownerName = ownerName
+      this._loadOwnerDetailCarData(1, 10)
+    },
+    _loadOwnerDetailCarData(page, row) {
+      const params = {
+        communityId: getCommunityId(),
+        ownerId: this.ownerDetailCarInfo.ownerId,
+        carNum: this.ownerDetailCarInfo.carNum,
+        page,
+        row
+      }
+
+      queryOwnerCars(params).then(res => {
+        this.ownerDetailCarInfo.cars = res.data
+        this.pagination = {
+          currentPage: page,
+          pageSize: row,
+          total: res.records
+        }
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    _qureyOwnerDetailCar() {
+      this._loadOwnerDetailCarData(1, 10)
+    },
+    _addOwnerCar() {
+      this.$router.push({
+        path: '/pages/property/hireParkingSpace',
+        query: {
+          ownerId: this.ownerDetailCarInfo.ownerId,
+          ownerName: this.ownerDetailCarInfo.ownerName
+        }
+      })
+    },
+    handlePageChange(currentPage) {
+      this._loadOwnerDetailCarData(currentPage, this.pagination.pageSize)
+    },
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+.margin-top-lg {
+  margin-top: 30px;
+}
+.padding-right-xs {
+  padding-right: 5px;
+}
+.padding-left-xl {
+  padding-left: 20px;
+}
+.padding-right-xl {
+  padding-right: 20px;
+}
+.text-right {
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailCarDemo.vue b/src/components/owner/ownerDetailCarDemo.vue
new file mode 100644
index 0000000..740638f
--- /dev/null
+++ b/src/components/owner/ownerDetailCarDemo.vue
@@ -0,0 +1,20 @@
+<template>
+  <owner-detail-car ref="ownerDetailCar" />
+</template>
+
+<script>
+import OwnerDetailCar from '@/components/owner/ownerDetailCar'
+
+export default {
+  components: {
+    OwnerDetailCar
+  },
+  methods: {
+    open(ownerId, ownerName) {
+      this.$refs.ownerDetailCar.ownerDetailCarInfo.ownerId = ownerId
+      this.$refs.ownerDetailCar.ownerDetailCarInfo.ownerName = ownerName
+      this.$refs.ownerDetailCar._loadOwnerDetailCarData(1, 10)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailCarLang.js b/src/components/owner/ownerDetailCarLang.js
new file mode 100644
index 0000000..78252f5
--- /dev/null
+++ b/src/components/owner/ownerDetailCarLang.js
@@ -0,0 +1,40 @@
+export default {
+  en: {
+    ownerDetailCar: {
+      placeholder: {
+        carNum: 'Please enter license plate number'
+      },
+      table: {
+        carNum: 'License Plate',
+        licenseType: 'License Type',
+        tempCar: 'Temporary Car',
+        carType: 'Car Type',
+        color: 'Color',
+        owner: 'Owner',
+        parkingSpace: 'Parking Space',
+        spaceReleased: 'Space released',
+        validity: 'Validity'
+      },
+      addCar: 'Add Vehicle'
+    }
+  },
+  zh: {
+    ownerDetailCar: {
+      placeholder: {
+        carNum: '请填写车牌号'
+      },
+      table: {
+        carNum: '车牌号',
+        licenseType: '车牌类型',
+        tempCar: '临时车',
+        carType: '车辆类型',
+        color: '颜色',
+        owner: '业主',
+        parkingSpace: '车位',
+        spaceReleased: '车位已释放',
+        validity: '有效期'
+      },
+      addCar: '添加车辆'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailChargeMachineOrder.vue b/src/components/owner/ownerDetailChargeMachineOrder.vue
new file mode 100644
index 0000000..d6be601
--- /dev/null
+++ b/src/components/owner/ownerDetailChargeMachineOrder.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="margin-top">
+    <el-table :data="ownerDetailChargeMachineOrderInfo.chargeMachineOrders" style="width: 100%" border stripe>
+      <el-table-column prop="orderId" :label="$t('ownerDetailChargeMachineOrder.id')" align="center"></el-table-column>
+      <el-table-column prop="personName" :label="$t('ownerDetailChargeMachineOrder.name')"
+        align="center"></el-table-column>
+      <el-table-column prop="personTel" :label="$t('ownerDetailChargeMachineOrder.phone')"
+        align="center"></el-table-column>
+      <el-table-column prop="machineName" :label="$t('ownerDetailChargeMachineOrder.charger')"
+        align="center"></el-table-column>
+      <el-table-column prop="portName" :label="$t('ownerDetailChargeMachineOrder.slot')"
+        align="center"></el-table-column>
+      <el-table-column :label="$t('ownerDetailChargeMachineOrder.chargeHours')" align="center">
+        <template slot-scope="scope">
+          <span v-if="scope.row.chargeHours === 999">{{ $t('ownerDetailChargeMachineOrder.byAmount') }}</span>
+          <span v-else>{{ scope.row.chargeHours }}{{ $t('ownerDetailChargeMachineOrder.hours') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="energy" :label="$t('ownerDetailChargeMachineOrder.chargeAmount')"
+        align="center"></el-table-column>
+      <el-table-column prop="startTime" :label="$t('ownerDetailChargeMachineOrder.startTime')"
+        align="center"></el-table-column>
+      <el-table-column prop="endTime" :label="$t('ownerDetailChargeMachineOrder.endTime')"
+        align="center"></el-table-column>
+      <el-table-column prop="acctDetailId" :label="$t('ownerDetailChargeMachineOrder.deductionAccount')" align="center"
+        class-name="hand"></el-table-column>
+      <el-table-column prop="durationPrice" :label="$t('ownerDetailChargeMachineOrder.hourPrice')"
+        align="center"></el-table-column>
+      <el-table-column :label="$t('ownerDetailChargeMachineOrder.deductionAmount')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.amount }}(<a href="javascript:void(0)"
+            @click="_viewOrderAccts(scope.row)">{{ $t('ownerDetailChargeMachineOrder.detail') }}</a>)
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('ownerDetailChargeMachineOrder.socketStatus')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.stateName }}
+          <span v-if="scope.row.state === '1001'">
+            (<a href="javascript:void(0)"
+              @click="_showStopCharge(scope.row)">{{ $t('ownerDetailChargeMachineOrder.stopCharge') }}</a>)
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="remark" :label="$t('ownerDetailChargeMachineOrder.description')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.remark || '-' }}
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-row>
+      <el-col :span="4"></el-col>
+      <el-col :span="20">
+        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
+          layout="total, prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </el-col>
+    </el-row>
+    <!-- <stop-charge-machine ref="stopChargeMachine"></stop-charge-machine> -->
+  </div>
+</template>
+
+<script>
+import { getOpenApi } from '@/api/owner/ownerDetailChargeMachineOrderApi'
+import { getCommunityId } from '@/api/community/communityApi'
+// import StopChargeMachine from '@/components/machine/stopChargeMachine'
+
+export default {
+  name: 'OwnerDetailChargeMachineOrder',
+  components: {
+    //StopChargeMachine
+  },
+  data() {
+    return {
+      ownerDetailChargeMachineOrderInfo: {
+        chargeMachineOrders: [],
+        ownerId: '',
+        link: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(ownerId, link) {
+      this.ownerDetailChargeMachineOrderInfo.ownerId = ownerId
+      this.ownerDetailChargeMachineOrderInfo.link = link
+      this._loadOwnerDetailChargeMachineOrderData(this.currentPage, this.pageSize)
+    },
+    _loadOwnerDetailChargeMachineOrderData(page, row) {
+      const param = {
+        page: page,
+        row: row,
+        communityId: this.communityId,
+        personTel: this.ownerDetailChargeMachineOrderInfo.link,
+        iotApiCode: 'listChargeMachineOrderBmoImpl'
+      }
+
+      getOpenApi(param).then(response => {
+        this.ownerDetailChargeMachineOrderInfo.chargeMachineOrders = response.data.data
+        this.total = response.data.total
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    _viewOrderAccts(order) {
+      this.$router.push(`/pages/machine/chargeMachineOrderAccts?orderId=${order.orderId}`)
+    },
+    _showStopCharge(order) {
+      this.$refs.stopChargeMachine.open(order)
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadOwnerDetailChargeMachineOrderData(val, this.pageSize)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hand {
+  cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailChargeMachineOrderDemo.vue b/src/components/owner/ownerDetailChargeMachineOrderDemo.vue
new file mode 100644
index 0000000..2796016
--- /dev/null
+++ b/src/components/owner/ownerDetailChargeMachineOrderDemo.vue
@@ -0,0 +1,18 @@
+<template>
+  <owner-detail-charge-machine-order ref="ownerDetailChargeMachineOrder" />
+</template>
+
+<script>
+import OwnerDetailChargeMachineOrder from '@/components/owner/ownerDetailChargeMachineOrder'
+
+export default {
+  components: {
+    OwnerDetailChargeMachineOrder
+  },
+  methods: {
+    open(ownerId, link) {
+      this.$refs.ownerDetailChargeMachineOrder.open(ownerId, link)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailComplaint.vue b/src/components/owner/ownerDetailComplaint.vue
new file mode 100644
index 0000000..2e07fa1
--- /dev/null
+++ b/src/components/owner/ownerDetailComplaint.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="margin-top">
+    <el-table :data="ownerDetailComplaintInfo.complaints" style="width: 100%">
+      <el-table-column prop="typeCdName" :label="$t('complaint.table.type')" align="center"></el-table-column>
+      <el-table-column :label="$t('complaint.table.room')" align="center">
+        <template slot-scope="scope">
+          {{scope.row.floorNum}}-{{scope.row.unitNum}}-{{scope.row.roomNum}}
+        </template>
+      </el-table-column>
+      <el-table-column prop="complaintName" :label="$t('complaint.table.contact')" align="center"></el-table-column>
+      <el-table-column prop="tel" :label="$t('complaint.table.phone')" align="center"></el-table-column>
+      <el-table-column prop="stateName" :label="$t('complaint.table.status')" align="center"></el-table-column>
+      <el-table-column prop="currentUserName" :label="$t('complaint.table.handler')" align="center">
+        <template slot-scope="scope">
+          {{scope.row.currentUserName == '' ? $t('common.none'):scope.row.currentUserName}}
+        </template>
+      </el-table-column>
+      <el-table-column prop="currentUserTel" :label="$t('complaint.table.handlerPhone')" align="center">
+        <template slot-scope="scope">
+          {{scope.row.currentUserTel == '' ? $t('common.none'):scope.row.currentUserTel}}
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" :label="$t('complaint.table.createTime')" align="center"></el-table-column>
+      <el-table-column :label="$t('common.operation')" align="center" width="200">
+        <template slot-scope="scope">
+          <el-button-group>
+            <el-button size="mini" @click="_openComplaintDetailModel(scope.row)">
+              {{ $t('common.detail') }}
+            </el-button>
+            <el-button size="mini" @click="_openRunWorkflowImage(scope.row)">
+              {{ $t('ownerDetailComplaint.flowChart') }}
+            </el-button>
+          </el-button-group>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @current-change="handleCurrentChange"
+      :current-page="pagination.currentPage"
+      :page-size="pagination.pageSize"
+      :total="pagination.total"
+      layout="total, prev, pager, next, jumper">
+    </el-pagination>
+
+    <complaint-detail ref="complaintDetail"></complaint-detail>
+    <view-image ref="viewImage"></view-image>
+  </div>
+</template>
+
+<script>
+import ComplaintDetail from '@/components/oa/complaintDetail'
+import ViewImage from '@/components/system/viewImage'
+import { listComplaints, listRunWorkflowImage } from '@/api/owner/ownerDetailComplaintApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'OwnerDetailComplaint',
+  components: {
+    ComplaintDetail,
+    ViewImage
+  },
+  data() {
+    return {
+      ownerDetailComplaintInfo: {
+        complaints: [],
+        ownerId: '',
+        ownerName: '',
+        link: ''
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(ownerId, ownerName, link) {
+      this.ownerDetailComplaintInfo.ownerId = ownerId
+      this.ownerDetailComplaintInfo.ownerName = ownerName
+      this.ownerDetailComplaintInfo.link = link
+      this._loadOwnerDetailComplaintData(1, this.pagination.pageSize)
+    },
+    _loadOwnerDetailComplaintData(page, row) {
+      const params = {
+        communityId: getCommunityId(),
+        memberId: this.ownerDetailComplaintInfo.ownerId,
+        page: page,
+        row: row
+      }
+
+      listComplaints(params).then(response => {
+        this.ownerDetailComplaintInfo.complaints = response.complaints
+        this.pagination.total = response.records
+      }).catch(error => {
+        console.error('请求失败处理', error)
+      })
+    },
+    _openComplaintDetailModel(complaint) {
+      this.$refs.complaintDetail.open(complaint)
+    },
+    _openRunWorkflowImage(complaint) {
+      const params = {
+        communityId: getCommunityId(),
+        businessKey: complaint.complaintId
+      }
+
+      listRunWorkflowImage(params).then(response => {
+        if (response.code != '0') {
+          this.$message.error(response.msg)
+          return
+        }
+        this.$refs.viewImage.open('data:image/png;base64,' + response.data)
+      }).catch(error => {
+        console.error('请求失败处理', error)
+      })
+    },
+    handleCurrentChange(val) {
+      this._loadOwnerDetailComplaintData(val, this.pagination.pageSize)
+    }
+  },
+  created() {
+    this.$on('switch', (data) => {
+      this.ownerDetailComplaintInfo.ownerId = data.ownerId
+      this._loadOwnerDetailComplaintData(1, this.pagination.pageSize)
+    })
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailContract.vue b/src/components/owner/ownerDetailContract.vue
new file mode 100644
index 0000000..764187b
--- /dev/null
+++ b/src/components/owner/ownerDetailContract.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="margin-top">
+    <el-table :data="ownerDetailContractInfo.contracts" style="width: 100%">
+      <el-table-column prop="contractName" :label="$t('ownerDetailContract.contractName')" align="center"></el-table-column>
+      <el-table-column prop="contractCode" :label="$t('ownerDetailContract.contractCode')" align="center"></el-table-column>
+      <el-table-column :label="$t('ownerDetailContract.parentContractCode')" align="center">
+        <template slot-scope="scope">
+          {{scope.row.parentContractCode?scope.row.parentContractCode:'-'}}
+        </template>
+      </el-table-column>
+      <el-table-column prop="contractTypeName" :label="$t('ownerDetailContract.contractType')" align="center"></el-table-column>
+      <el-table-column prop="operator" :label="$t('ownerDetailContract.operator')" align="center"></el-table-column>
+      <el-table-column prop="amount" :label="$t('ownerDetailContract.amount')" align="center"></el-table-column>
+      <el-table-column prop="startTime" :label="$t('ownerDetailContract.startTime')" align="center"></el-table-column>
+      <el-table-column prop="endTime" :label="$t('ownerDetailContract.endTime')" align="center"></el-table-column>
+      <el-table-column prop="createTime" :label="$t('ownerDetailContract.createTime')" align="center"></el-table-column>
+      <el-table-column prop="stateName" :label="$t('ownerDetailContract.status')" align="center"></el-table-column>
+    </el-table>
+    <el-pagination
+      @current-change="handleCurrentChange"
+      :current-page="pagination.currentPage"
+      :page-size="pagination.pageSize"
+      :total="pagination.total"
+      layout="total, prev, pager, next, jumper">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { queryContract } from '@/api/owner/ownerDetailContractApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'OwnerDetailContract',
+  data() {
+    return {
+      ownerDetailContractInfo: {
+        contracts: [],
+        ownerId: '',
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    _loadOwnerDetailContractData(page, row) {
+      const params = {
+        communityId: getCommunityId(),
+        objId: this.ownerDetailContractInfo.ownerId,
+        page: page,
+        row: row
+      }
+
+      queryContract(params).then(response => {
+        this.ownerDetailContractInfo.contracts = response.data
+        this.pagination.total = response.records
+      }).catch(error => {
+        console.error('请求失败处理', error)
+      })
+    },
+    handleCurrentChange(val) {
+      this._loadOwnerDetailContractData(val, this.pagination.pageSize)
+    }
+  },
+  created() {
+    this.$on('switch', (data) => {
+      this.ownerDetailContractInfo.ownerId = data.ownerId
+      this._loadOwnerDetailContractData(1, this.pagination.pageSize)
+    })
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailContractDemo.vue b/src/components/owner/ownerDetailContractDemo.vue
new file mode 100644
index 0000000..c9aa436
--- /dev/null
+++ b/src/components/owner/ownerDetailContractDemo.vue
@@ -0,0 +1,19 @@
+<template>
+  <owner-detail-contract ref="ownerDetailContract" />
+</template>
+
+<script>
+import OwnerDetailContract from './ownerDetailContract'
+
+export default {
+  components: {
+    OwnerDetailContract
+  },
+  methods: {
+    open(ownerId) {
+      this.$refs.ownerDetailContract.ownerDetailContractInfo.ownerId = ownerId
+      this.$refs.ownerDetailContract._loadOwnerDetailContractData(1, 10)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailCoupon.vue b/src/components/owner/ownerDetailCoupon.vue
new file mode 100644
index 0000000..dd54654
--- /dev/null
+++ b/src/components/owner/ownerDetailCoupon.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="margin-top">
+    <el-table :data="ownerDetailCouponInfo.coupons" style="width: 100%">
+      <el-table-column prop="couponId" :label="$t('ownerDetailCoupon.id')" align="center"></el-table-column>
+      <el-table-column prop="couponName" :label="$t('ownerDetailCoupon.couponName')" align="center"></el-table-column>
+      <el-table-column prop="value" :label="$t('ownerDetailCoupon.value')" align="center"></el-table-column>
+      <el-table-column prop="validityDay" :label="$t('ownerDetailCoupon.validity')" align="center"></el-table-column>
+      <el-table-column prop="userName" :label="$t('ownerDetailCoupon.userName')" align="center"></el-table-column>
+      <el-table-column prop="tel" :label="$t('ownerDetailCoupon.phone')" align="center"></el-table-column>
+      <el-table-column prop="toTypeName" :label="$t('ownerDetailCoupon.purpose')" align="center"></el-table-column>
+      <el-table-column prop="stock" :label="$t('ownerDetailCoupon.quantity')" align="center">
+        <template slot-scope="scope">{{scope.row.stock}}张</template>
+      </el-table-column>
+      <el-table-column prop="state" :label="$t('ownerDetailCoupon.status')" align="center">
+        <template slot-scope="scope">{{scope.row.state == '1001'?$t('ownerDetailCoupon.unused'):$t('ownerDetailCoupon.used')}}</template>
+      </el-table-column>
+      <el-table-column prop="startTime" :label="$t('ownerDetailCoupon.effectiveTime')" align="center"></el-table-column>
+    </el-table>
+    <el-pagination
+      @current-change="handleCurrentChange"
+      :current-page="pagination.currentPage"
+      :page-size="pagination.pageSize"
+      :total="pagination.total"
+      layout="total, prev, pager, next, jumper">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { listCouponPropertyUser } from '@/api/owner/ownerDetailCouponApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'OwnerDetailCoupon',
+  data() {
+    return {
+      ownerDetailCouponInfo: {
+        coupons: [],
+        ownerId: '',
+        link: '',
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(ownerId, ownerName, link) {
+      this.ownerDetailCouponInfo.ownerId = ownerId
+      this.ownerDetailCouponInfo.ownerName = ownerName
+      this.ownerDetailCouponInfo.link = link
+      this._loadOwnerDetailCouponData(1, this.pagination.pageSize)
+    },
+    _loadOwnerDetailCouponData(page, row) {
+      const params = {
+        page: page,
+        row: row,
+        communityId: getCommunityId(),
+        tel: this.ownerDetailCouponInfo.link
+      }
+
+      listCouponPropertyUser(params).then(response => {
+        this.ownerDetailCouponInfo.coupons = response.data
+        this.pagination.total = response.records
+      }).catch(error => {
+        console.error('请求失败处理', error)
+      })
+    },
+    handleCurrentChange(val) {
+      this._loadOwnerDetailCouponData(val, this.pagination.pageSize)
+    }
+  },
+  created() {
+    this.$on('switch', (data) => {
+      this.ownerDetailCouponInfo.ownerId = data.ownerId
+      this.ownerDetailCouponInfo.link = data.link
+      this._loadOwnerDetailCouponData(1, this.pagination.pageSize)
+    })
+  }
+}
+</script>
+
+<style scoped>
+/* 样式同上一个组件 */
+</style>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailHis.vue b/src/components/owner/ownerDetailHis.vue
new file mode 100644
index 0000000..6cf6b33
--- /dev/null
+++ b/src/components/owner/ownerDetailHis.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="owner-detail-his">
+    <el-row class="margin-top">
+      <el-table :data="ownerDetailHisInfo.owners" border style="width: 100%" class="footable">
+        <el-table-column prop="operate" :label="$t('ownerDetailHis.action')" align="center" >
+          <template slot-scope="scope">
+            {{ _getHisOwnerOperate(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="userName" :label="$t('ownerDetailHis.operator')" align="center" >
+          <template slot-scope="scope">
+            {{ scope.row.userName || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" :label="$t('ownerDetailHis.operateTime')" align="center"
+          width="180"></el-table-column>
+        <el-table-column prop="name" :label="$t('ownerDetailHis.name')" align="center" >
+          <template slot-scope="scope">
+            {{ scope.row.name }}({{ scope.row.link }})
+          </template>
+        </el-table-column>
+        <el-table-column prop="sex" :label="$t('ownerDetailHis.gender')" align="center" >
+          <template slot-scope="scope">
+            {{ scope.row.sex == 0 ? $t('ownerDetailHis.male') : $t('ownerDetailHis.female') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="idCard" :label="$t('ownerDetailHis.idCard')" align="center" >
+          <template slot-scope="scope">
+            {{ scope.row.idCard || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" :label="$t('ownerDetailHis.address')" align="center" >
+          <template slot-scope="scope">
+            {{ scope.row.address || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column v-for="(item, index) in ownerDetailHisInfo.listColumns" :key="index" :label="item"
+          align="center" width="150">
+          <template slot-scope="scope">
+            {{ scope.row.listValues[index] || '-' }}
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="24" class="text-right">
+          <el-pagination @current-change="handleCurrentChange" :current-page="pagination.currentPage"
+            :page-size="pagination.pageSize" layout="total, prev, pager, next, jumper"
+            :total="pagination.total"></el-pagination>
+        </el-col>
+      </el-row>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { queryHisOwner } from '@/api/owner/ownerDetailHisApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import { getDict } from '@/api/community/communityApi'
+
+export default {
+  name: 'OwnerDetailHis',
+  data() {
+    return {
+      ownerDetailHisInfo: {
+        owners: [],
+        ownerId: '',
+        ownerName: '',
+        carNum: '',
+        listColumns: [],
+        logStartTime: '',
+        logEndTime: '',
+        ownerNameLike: '',
+        staffNameLike: ''
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(ownerId, ownerName, ownerNameLike, logStartTime, logEndTime, staffNameLike) {
+      this.ownerDetailHisInfo.ownerId = ownerId
+      this.ownerDetailHisInfo.ownerName = ownerName
+      this.ownerDetailHisInfo.ownerNameLike = ownerNameLike
+      this.ownerDetailHisInfo.logStartTime = logStartTime
+      this.ownerDetailHisInfo.logEndTime = logEndTime
+      this.ownerDetailHisInfo.staffNameLike = staffNameLike
+      this._getColumns(() => {
+        this._loadOwnerDetailHisData(1, this.pagination.pageSize)
+      })
+    },
+    _loadOwnerDetailHisData(page, row) {
+      const params = {
+        communityId: getCommunityId(),
+        memberId: this.ownerDetailHisInfo.ownerId,
+        ownerNameLike: this.ownerDetailHisInfo.ownerNameLike,
+        logStartTime: this.ownerDetailHisInfo.logStartTime,
+        logEndTime: this.ownerDetailHisInfo.logEndTime,
+        staffNameLike: this.ownerDetailHisInfo.staffNameLike,
+        page: page,
+        row: row
+      }
+
+      queryHisOwner(params)
+        .then(response => {
+          const data = response.data
+          this.ownerDetailHisInfo.owners = data.data
+          this.dealOwnerAttr(data.data)
+          this.pagination.total = data.records
+          this.pagination.currentPage = page
+        })
+        .catch(error => {
+          console.error('请求失败:', error)
+        })
+    },
+    handleCurrentChange(currentPage) {
+      this._loadOwnerDetailHisData(currentPage, this.pagination.pageSize)
+    },
+    dealOwnerAttr(owners) {
+      if (!owners) {
+        return
+      }
+      owners.forEach(item => {
+        this._getColumnsValue(item)
+      })
+    },
+    _getColumnsValue(owner) {
+      owner.listValues = []
+      if (!Object.prototype.hasOwnProperty.call(owner, 'ownerAttrDtos') || owner.ownerAttrDtos.length < 1) {
+        this.ownerDetailHisInfo.listColumns.forEach(() => {
+          owner.listValues.push('')
+        })
+        return
+      }
+      const ownerAttrDtos = owner.ownerAttrDtos
+      this.ownerDetailHisInfo.listColumns.forEach(value => {
+        let tmpValue = ''
+        ownerAttrDtos.forEach(attrItem => {
+          if (value === attrItem.specName) {
+            tmpValue = attrItem.valueName
+          }
+        })
+        owner.listValues.push(tmpValue)
+      })
+    },
+    _getColumns(callback) {
+      this.ownerDetailHisInfo.listColumns = []
+      getDict('building_owner_attr').then(data => {
+        this.ownerDetailHisInfo.listColumns = []
+        data.forEach(item => {
+          if (item.listShow === 'Y') {
+            this.ownerDetailHisInfo.listColumns.push(item.specName)
+          }
+        })
+        callback()
+      })
+    },
+    _getHisOwnerOperate(owner) {
+      let ownerCount = 0
+      this.ownerDetailHisInfo.owners.forEach(item => {
+        if (owner.bId === item.bId) {
+          ownerCount += 1
+        }
+      })
+      if (ownerCount <= 1) {
+        if (owner.operate === 'ADD') {
+          return this.$t('ownerDetailHis.add')
+        }
+        if (owner.operate === 'DEL') {
+          return this.$t('ownerDetailHis.delete')
+        }
+        return '-'
+      }
+      if (owner.operate === 'ADD') {
+        return this.$t('ownerDetailHis.modifyNew')
+      }
+      if (owner.operate === 'DEL') {
+        return this.$t('ownerDetailHis.modifyOld')
+      }
+      return '-'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.text-right {
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailHisFee.vue b/src/components/owner/ownerDetailHisFee.vue
new file mode 100644
index 0000000..d8b1d4a
--- /dev/null
+++ b/src/components/owner/ownerDetailHisFee.vue
@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <div class="margin-top">
+      <el-table
+        :data="ownerDetailHisFeeInfo.feeDetails"
+        style="width: 100%; margin-top: 10px"
+        border
+        stripe
+      >
+        <el-table-column prop="feeName" :label="$t('ownerDetailHisFee.feeItem')" align="center"></el-table-column>
+        <el-table-column prop="payerObjName" :label="$t('ownerDetailHisFee.chargeObject')" align="center"></el-table-column>
+        <el-table-column prop="cycles" :label="$t('ownerDetailHisFee.cycle')" align="center"></el-table-column>
+        <el-table-column :label="$t('ownerDetailHisFee.receivableAmount')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.receivableAmount}}/{{scope.row.receivedAmount}}<br>
+            <div v-if="scope.row.acctAmount>0">
+              {{$t('ownerDetailHisFee.accountDeduction')}}: {{scope.row.acctAmount}}<br>
+            </div>
+            <div v-for="(item,index) in scope.row.payFeeDetailDiscountDtoList" :key="index">
+              {{item.discountName}}: {{Math.abs(item.discountPrice)}}<br>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="primeRateName" :label="$t('ownerDetailHisFee.paymentMethod')" align="center"></el-table-column>
+        <el-table-column :label="$t('ownerDetailHisFee.paymentPeriod')" align="center">
+          <template slot-scope="scope">
+            {{dateFormat(scope.row.startTime)}}~<br>
+            {{dateFormat(scope.row.endTime)}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" :label="$t('ownerDetailHisFee.paymentTime')" align="center"></el-table-column>
+        <el-table-column prop="cashierName" :label="$t('ownerDetailHisFee.cashier')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.cashierName || '-'}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="stateName" :label="$t('ownerDetailHisFee.status')" align="center"></el-table-column>
+        <el-table-column prop="remark" :label="$t('ownerDetailHisFee.remark')" align="center"></el-table-column>
+        <el-table-column :label="$t('ownerDetailHisFee.operation')" align="center">
+          <template slot-scope="scope">
+            <el-button
+              v-if="scope.row.state=='1400' || scope.row.state== '1200' || scope.row.state== ''"
+              type="text"
+              size="small"
+              @click="_toRefundFee(scope.row)"
+            >
+              {{$t('ownerDetailHisFee.detail')}}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        layout="total, prev, pager, next, jumper"
+        :total="total">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryFeeDetail } from '@/api/owner/ownerDetailHisFeeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'OwnerDetailHisFee',
+  data() {
+    return {
+      ownerDetailHisFeeInfo: {
+        feeDetails: [],
+        ownerId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(ownerId) {
+      this.clearOwnerDetailHisFeeInfo()
+      this.ownerDetailHisFeeInfo.ownerId = ownerId
+      this._listOwnerDetailFeeDetails(this.currentPage, this.pageSize)
+    },
+    _listOwnerDetailFeeDetails(page, row) {
+      const param = {
+        page: page,
+        row: row,
+        communityId: this.communityId,
+        ownerId: this.ownerDetailHisFeeInfo.ownerId
+      }
+
+      queryFeeDetail(param).then(response => {
+        this.ownerDetailHisFeeInfo.feeDetails = response.data.feeDetails
+        this.total = response.data.total
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    clearOwnerDetailHisFeeInfo() {
+      this.ownerDetailHisFeeInfo = {
+        feeDetails: [],
+        ownerId: ''
+      }
+    },
+    _toRefundFee(detail) {
+      this.$router.push(`/pages/property/propertyFee?feeId=${detail.feeId}`)
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._listOwnerDetailFeeDetails(val, this.pageSize)
+    },
+    dateFormat(date) {
+      // Implement your date formatting logic here
+      return date
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailHisFeeDemo.vue b/src/components/owner/ownerDetailHisFeeDemo.vue
new file mode 100644
index 0000000..040be15
--- /dev/null
+++ b/src/components/owner/ownerDetailHisFeeDemo.vue
@@ -0,0 +1,18 @@
+<template>
+  <owner-detail-his-fee ref="ownerDetailHisFee" />
+</template>
+
+<script>
+import OwnerDetailHisFee from '@/components/owner/ownerDetailHisFee'
+
+export default {
+  components: {
+    OwnerDetailHisFee
+  },
+  methods: {
+    open(ownerId) {
+      this.$refs.ownerDetailHisFee.open(ownerId)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailMember.vue b/src/components/owner/ownerDetailMember.vue
new file mode 100644
index 0000000..cfe47af
--- /dev/null
+++ b/src/components/owner/ownerDetailMember.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="margin-top">
+    <el-row class="margin-top-lg">
+      <el-col :span="4" class="padding-right-xs padding-left-xl">
+        <el-input v-model="ownerDetailMemberInfo.name" type="text"
+          :placeholder="$t('ownerDetailMember.placeholder.name')" class="form-control"></el-input>
+      </el-col>
+      <el-col :span="4" class="padding-right-xs padding-right-xl">
+        <el-button type="primary" size="small" style="margin-left:10px"
+          @click="_qureyOwnerDetailMember()">
+          <i class="el-icon-search"></i>{{ $t('common.query') }}
+        </el-button>
+      </el-col>
+      <el-col :span="16" class="text-right">
+        <el-button type="primary" size="small" style="margin-left:10px"
+          v-if="hasPrivilege('502023032885101706')" @click="openAddMemberModel()">
+          <i class="el-icon-plus"></i>{{ $t('common.add') }}
+        </el-button>
+      </el-col>
+    </el-row>
+    <div class="margin-top">
+      <el-table :data="ownerDetailMemberInfo.members" style="width: 100%">
+        <el-table-column prop="faceUrl" :label="$t('ownerDetailMember.face')" align="center">
+          <template slot-scope="scope">
+            <img style="width: 60px; height: 60px;" class="border-radius" v-if="scope.row.faceUrl"
+              :src="scope.row.faceUrl" @click="_viewOwnerFace(scope.row.faceUrl)" />
+            <img style="width: 60px; height: 60px;" class="border-radius" v-else
+              src="/img/noPhoto.jpg" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" :label="$t('ownerDetailMember.name')" align="center"></el-table-column>
+        <el-table-column prop="sex" :label="$t('ownerDetailMember.gender')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.sex == 0 ? $t('common.male') : $t('common.female')}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="personRoleName" :label="$t('ownerDetailMember.role')" align="center"></el-table-column>
+        <el-table-column prop="idCard" :label="$t('ownerDetailMember.idCard')" align="center"></el-table-column>
+        <el-table-column prop="link" :label="$t('ownerDetailMember.contact')" align="center"></el-table-column>
+        <el-table-column prop="address" :label="$t('ownerDetailMember.address')" align="center"></el-table-column>
+        <el-table-column :label="$t('common.operation')" align="center" width="180">
+          <template slot-scope="scope">
+            <el-button-group>
+              <el-button size="mini" @click="_openEditOwnerModel(scope.row)"
+                v-if="hasPrivilege('502023032899781711')">
+                {{ $t('common.edit') }}
+              </el-button>
+              <el-button size="mini" @click="_openDeleteOwnerModel(scope.row)"
+                v-if="hasPrivilege('502023032818941714')">
+                {{ $t('common.delete') }}
+              </el-button>
+            </el-button-group>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @current-change="handleCurrentChange"
+        :current-page="pagination.currentPage"
+        :page-size="pagination.pageSize"
+        :total="pagination.total"
+        layout="total, prev, pager, next, jumper">
+      </el-pagination>
+    </div>
+
+    <add-owner-member ref="addOwnerMember" @refresh="_loadOwnerDetailMemberData"></add-owner-member>
+    <edit-owner-member ref="editOwnerMember" @refresh="_loadOwnerDetailMemberData"></edit-owner-member>
+    <delete-owner ref="deleteOwner" @refresh="_loadOwnerDetailMemberData"></delete-owner>
+  </div>
+</template>
+
+<script>
+import AddOwnerMember from './addOwnerMember'
+import EditOwnerMember from './editOwnerMember'
+import DeleteOwner from './deleteOwner'
+import { queryOwnerMembers } from '@/api/owner/ownerDetailMemberApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'OwnerDetailMember',
+  components: {
+    AddOwnerMember,
+    EditOwnerMember,
+    DeleteOwner
+  },
+  data() {
+    return {
+      ownerDetailMemberInfo: {
+        members: [],
+        ownerId: '',
+        name: '',
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(ownerId, ownerName, link) {
+      this.ownerDetailMemberInfo.ownerId = ownerId
+      this.ownerDetailMemberInfo.ownerName = ownerName
+      this.ownerDetailMemberInfo.link = link
+      this._loadOwnerDetailMemberData(1, this.pagination.pageSize)
+    },
+    _loadOwnerDetailMemberData(page, row) {
+      const params = {
+        communityId: getCommunityId(),
+        ownerId: this.ownerDetailMemberInfo.ownerId,
+        name: this.ownerDetailMemberInfo.name,
+        page: page,
+        row: row
+      }
+
+      queryOwnerMembers(params).then(response => {
+        this.ownerDetailMemberInfo.members = response.data
+        this.pagination.total = response.records
+      }).catch(error => {
+        console.error('请求失败处理', error)
+      })
+    },
+    _qureyOwnerDetailMember() {
+      this._loadOwnerDetailMemberData(1, this.pagination.pageSize)
+    },
+    openAddMemberModel() {
+      this.$refs.addOwnerMember.open({ ownerId: this.ownerDetailMemberInfo.ownerId })
+    },
+    _openDeleteOwnerModel(member) {
+      member.ownerId = this.ownerDetailMemberInfo.ownerId
+      this.$refs.deleteOwner.open(member)
+    },
+    _openEditOwnerModel(member) {
+      member.ownerId = this.ownerDetailMemberInfo.ownerId
+      this.$refs.editOwnerMember.open(member)
+    },
+    _viewOwnerFace(url) {
+      this.$emit('viewImage', url)
+    },
+    handleCurrentChange(val) {
+      this._loadOwnerDetailMemberData(val, this.pagination.pageSize)
+    },
+  },
+  created() {
+    this.$on('switch', (data) => {
+      this.ownerDetailMemberInfo.ownerId = data.ownerId
+      this._loadOwnerDetailMemberData(1, this.pagination.pageSize)
+    })
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+.margin-top-lg {
+  margin-top: 30px;
+}
+.padding-right-xs {
+  padding-right: 5px;
+}
+.padding-left-xl {
+  padding-left: 20px;
+}
+.border-radius {
+  border-radius: 4px;
+}
+.text-right {
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailMemberDemo.vue b/src/components/owner/ownerDetailMemberDemo.vue
new file mode 100644
index 0000000..e919807
--- /dev/null
+++ b/src/components/owner/ownerDetailMemberDemo.vue
@@ -0,0 +1,19 @@
+<template>
+  <owner-detail-member ref="ownerDetailMember" />
+</template>
+
+<script>
+import OwnerDetailMember from './ownerDetailMember'
+
+export default {
+  components: {
+    OwnerDetailMember
+  },
+  methods: {
+    open(ownerId) {
+      this.$refs.ownerDetailMember.ownerDetailMemberInfo.ownerId = ownerId
+      this.$refs.ownerDetailMember._loadOwnerDetailMemberData(1, 10)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailReceipt.vue b/src/components/owner/ownerDetailReceipt.vue
new file mode 100644
index 0000000..2b9aef5
--- /dev/null
+++ b/src/components/owner/ownerDetailReceipt.vue
@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <el-row class="margin-top-lg">
+      <el-col :span="12"></el-col>
+      <el-col :span="12" class="text-right">
+        <el-button type="primary" size="small" @click="_printFeeReceipt" style="margin-left:10px">
+          {{$t('ownerDetailReceipt.print')}}
+        </el-button>
+        <el-button type="primary" size="small" @click="_printFeeSmallReceipt" style="margin-left:10px">
+          {{$t('ownerDetailReceipt.printSmall')}}
+        </el-button>
+        <el-button type="primary" size="small" @click="_printApplyFeeReceipt" style="margin-left:10px">
+          {{$t('ownerDetailReceipt.printApply')}}
+        </el-button>
+      </el-col>
+    </el-row>
+    <div class="margin-top">
+      <el-table
+        :data="ownerDetailReceiptInfo.feeReceipts"
+        style="width: 100%; margin-top: 10px"
+        border
+        stripe
+      >
+        <el-table-column width="50" align="center">
+          <template slot-scope="scope">
+            <el-checkbox 
+              v-model="scope.row.checked"
+              @change="handleCheckChange(scope.row)"
+            ></el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column prop="objName" :label="$t('ownerDetailReceipt.feeType')" align="center"></el-table-column>
+        <el-table-column prop="payObjName" :label="$t('ownerDetailReceipt.owner')" align="center"></el-table-column>
+        <el-table-column prop="feeName" :label="$t('ownerDetailReceipt.feeItem')" align="center"></el-table-column>
+        <el-table-column :label="$t('ownerDetailReceipt.chargePeriod')" align="center">
+          <template slot-scope="scope">
+            {{dateFormat(scope.row.startTime)}}~<br>
+            {{dateFormat(scope.row.endTime)}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="amount" :label="$t('ownerDetailReceipt.totalAmount')" align="center"></el-table-column>
+        <el-table-column prop="createTime" :label="$t('ownerDetailReceipt.paymentTime')" align="center"></el-table-column>
+        <el-table-column prop="receiptId" :label="$t('ownerDetailReceipt.receiptId')" align="center"></el-table-column>
+      </el-table>
+      <el-pagination
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        layout="total, prev, pager, next, jumper"
+        :total="total">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryFeeReceipt, listFeePrintPage } from '@/api/owner/ownerDetailReceiptApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'OwnerDetailReceipt',
+  data() {
+    return {
+      ownerDetailReceiptInfo: {
+        feeReceipts: [],
+        payObjId: '',
+        total: 0,
+        records: 0,
+        selectReceipts: [],
+        printUrl: '/print.html#/pages/property/printPayFee'
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(ownerId) {
+      this.ownerDetailReceiptInfo.payObjId = ownerId
+      this._listFeePrintPages()
+      this._listOwnerDetailReceipt(this.currentPage, this.pageSize)
+    },
+    _listOwnerDetailReceipt(page, rows) {
+      this.ownerDetailReceiptInfo.selectReceipts = []
+      const param = {
+        page: page,
+        row: rows,
+        payObjId: this.ownerDetailReceiptInfo.payObjId,
+        communityId: this.communityId
+      }
+
+      queryFeeReceipt(param).then(response => {
+        this.ownerDetailReceiptInfo.feeReceipts = response.data.data.map(item => {
+          return { ...item, checked: false }
+        })
+        this.total = response.data.total
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    _listFeePrintPages() {
+      const param = {
+        page: 1,
+        row: 1,
+        state: 'T',
+        communityId: this.communityId
+      }
+
+      listFeePrintPage(param).then(response => {
+        const feePrintPages = response.data.data
+        if (feePrintPages && feePrintPages.length > 0) {
+          this.ownerDetailReceiptInfo.printUrl = feePrintPages[0].url
+        }
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    _printFeeReceipt() {
+      const selected = this.ownerDetailReceiptInfo.feeReceipts.filter(item => item.checked)
+      if (selected.length < 1) {
+        this.$message.warning(this.$t('ownerDetailReceipt.selectPrint'))
+        return
+      }
+      const receiptIds = selected.map(item => item.receiptId).join(',')
+      window.open(`${this.ownerDetailReceiptInfo.printUrl}?receiptIds=${receiptIds}&apply=N`)
+    },
+    _printApplyFeeReceipt() {
+      const selected = this.ownerDetailReceiptInfo.feeReceipts.filter(item => item.checked)
+      if (selected.length < 1) {
+        this.$message.warning(this.$t('ownerDetailReceipt.selectPrint'))
+        return
+      }
+      const receiptIds = selected.map(item => item.receiptId).join(',')
+      window.open(`/print.html#/pages/property/printPayFee?receiptIds=${receiptIds}&apply=Y`)
+    },
+    _printFeeSmallReceipt() {
+      const selected = this.ownerDetailReceiptInfo.feeReceipts.filter(item => item.checked)
+      if (selected.length < 1) {
+        this.$message.warning(this.$t('ownerDetailReceipt.selectPrint'))
+        return
+      }
+      const receiptIds = selected.map(item => item.receiptId).join(',')
+      window.open(`/smallPrint.html#/pages/property/printSmallPayFee?receiptIds=${receiptIds}`)
+    },
+    handleCheckChange(row) {
+      if (row.checked) {
+        this.ownerDetailReceiptInfo.selectReceipts.push(row.receiptId)
+      } else {
+        const index = this.ownerDetailReceiptInfo.selectReceipts.indexOf(row.receiptId)
+        if (index > -1) {
+          this.ownerDetailReceiptInfo.selectReceipts.splice(index, 1)
+        }
+      }
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._listOwnerDetailReceipt(val, this.pageSize)
+    },
+    dateFormat(date) {
+      // Implement your date formatting logic here
+      return date
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailReceiptDemo.vue b/src/components/owner/ownerDetailReceiptDemo.vue
new file mode 100644
index 0000000..a6bebac
--- /dev/null
+++ b/src/components/owner/ownerDetailReceiptDemo.vue
@@ -0,0 +1,18 @@
+<template>
+  <owner-detail-receipt ref="ownerDetailReceipt" />
+</template>
+
+<script>
+import OwnerDetailReceipt from '@/components/owner/ownerDetailReceipt'
+
+export default {
+  components: {
+    OwnerDetailReceipt
+  },
+  methods: {
+    open(ownerId) {
+      this.$refs.ownerDetailReceipt.open(ownerId)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailRepair.vue b/src/components/owner/ownerDetailRepair.vue
new file mode 100644
index 0000000..5851562
--- /dev/null
+++ b/src/components/owner/ownerDetailRepair.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="margin-top">
+    <el-table :data="ownerDetailRepairInfo.repairs" style="width: 100%">
+      <el-table-column prop="repairId" :label="$t('ownerDetailRepair.repairId')" align="center"></el-table-column>
+      <el-table-column prop="repairObjName" :label="$t('ownerDetailRepair.location')" align="center"></el-table-column>
+      <el-table-column prop="repairTypeName" :label="$t('ownerDetailRepair.repairType')" align="center"></el-table-column>
+      <el-table-column prop="repairName" :label="$t('ownerDetailRepair.reporter')" align="center"></el-table-column>
+      <el-table-column prop="tel" :label="$t('ownerDetailRepair.contact')" align="center"></el-table-column>
+      <el-table-column prop="appointmentTime" :label="$t('ownerDetailRepair.appointmentTime')" align="center"></el-table-column>
+      <el-table-column prop="stateName" :label="$t('ownerDetailRepair.status')" align="center">
+        <template slot-scope="scope">
+          <span v-if="scope.row.state == '1800' && (scope.row.returnVisitFlag == '001' || scope.row.returnVisitFlag == '002')">
+            {{scope.row.stateName}}({{$t('ownerDetailRepair.taskProcess')}})
+          </span>
+          <span v-else>
+            {{scope.row.stateName}}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('common.operation')" align="center" width="120">
+        <template slot-scope="scope">
+          <el-button size="mini" @click="_openRepairDetail(scope.row)">
+            {{ $t('common.detail') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @current-change="handleCurrentChange"
+      :current-page="pagination.currentPage"
+      :page-size="pagination.pageSize"
+      :total="pagination.total"
+      layout="total, prev, pager, next, jumper">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { listOwnerRepairs } from '@/api/owner/ownerDetailRepairApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'OwnerDetailRepair',
+  data() {
+    return {
+      ownerDetailRepairInfo: {
+        repairs: [],
+        ownerId: '',
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    _loadOwnerDetailRepairData(page, row) {
+      const params = {
+        communityId: getCommunityId(),
+        ownerId: this.ownerDetailRepairInfo.ownerId,
+        page: page,
+        row: row
+      }
+
+      listOwnerRepairs(params).then(response => {
+        this.ownerDetailRepairInfo.repairs = response.data
+        this.pagination.total = response.records
+      }).catch(error => {
+        console.error('请求失败处理', error)
+      })
+    },
+    _openRepairDetail(repairPool) {
+      this.$router.push(`/property/ownerRepairDetail?repairId=${repairPool.repairId}`)
+    },
+    handleCurrentChange(val) {
+      this._loadOwnerDetailRepairData(val, this.pagination.pageSize)
+    }
+  },
+  created() {
+    this.$on('switch', (data) => {
+      this.ownerDetailRepairInfo.ownerId = data.ownerId
+      this._loadOwnerDetailRepairData(1, this.pagination.pageSize)
+    })
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailRepairDemo.vue b/src/components/owner/ownerDetailRepairDemo.vue
new file mode 100644
index 0000000..eab77f9
--- /dev/null
+++ b/src/components/owner/ownerDetailRepairDemo.vue
@@ -0,0 +1,19 @@
+<template>
+  <owner-detail-repair ref="ownerDetailRepair" />
+</template>
+
+<script>
+import OwnerDetailRepair from './ownerDetailRepair'
+
+export default {
+  components: {
+    OwnerDetailRepair
+  },
+  methods: {
+    open(ownerId) {
+      this.$refs.ownerDetailRepair.ownerDetailRepairInfo.ownerId = ownerId
+      this.$refs.ownerDetailRepair._loadOwnerDetailRepairData(1, 10)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailRoom.vue b/src/components/owner/ownerDetailRoom.vue
new file mode 100644
index 0000000..ae52ba3
--- /dev/null
+++ b/src/components/owner/ownerDetailRoom.vue
@@ -0,0 +1,219 @@
+<template>
+  <div class="margin-top">
+    <el-row class="margin-top-lg">
+      <el-col :span="4" class="padding-right-xs padding-left-xl">
+        <el-input v-model="ownerDetailRoomInfo.roomNum" :placeholder="$t('ownerDetailRoom.pleaseEnterRoomNumber')" />
+      </el-col>
+      <el-col :span="4" class="padding-right-xs padding-right-xl">
+        <el-button type="primary" size="small" @click="_qureyOwnerDetailRoom">
+          <i class="el-icon-search"></i>{{ $t('common.query') }}
+        </el-button>
+        <el-button type="primary" size="small" @click="_resetOwnerDetailRoom">
+          <i class="el-icon-refresh"></i>{{ $t('common.reset') }}
+        </el-button>
+      </el-col>
+      <el-col :span="16" class="text-right">
+        <el-button v-if="hasPrivilege('502023021978930012')" type="primary" size="small" @click="_openAddOwnerRoom">
+          <i class="el-icon-plus"></i>
+          {{ $t('ownerDetailRoom.deliverRoom') }}
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <div class="margin-top">
+      <el-table :data="ownerDetailRoomInfo.rooms" border style="width: 100%">
+        <el-table-column prop="roomNum" :label="$t('ownerDetailRoom.roomNumber')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.floorNum }}-{{ scope.row.unitNum }}-{{ scope.row.roomNum }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="layer" :label="$t('ownerDetailRoom.floor')" align="center" />
+        <el-table-column prop="roomSubTypeName" :label="$t('ownerDetailRoom.type')" align="center" />
+        <el-table-column :label="$t('ownerDetailRoom.area')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.builtUpArea }}/{{ scope.row.roomArea }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="roomRent" :label="$t('ownerDetailRoom.rent')" align="center" />
+        <el-table-column :label="$t('ownerDetailRoom.validity')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.startTime }}<br />~{{ scope.row.endTime }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="stateName" :label="$t('ownerDetailRoom.roomStatus')" align="center" />
+        <el-table-column :label="$t('ownerDetailRoom.roomArrears')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.roomOweFee || '0.00' }}({{ $t('ownerDetailRoom.updateDaily') }})
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('common.operation')" align="center" width="250">
+          <template slot-scope="scope">
+            <el-button v-if="hasPrivilege('502020082493857941')" size="mini" @click="_openEditRoomModel(scope.row)">
+              {{ $t('common.edit') }}
+            </el-button>
+            <el-button v-if="hasPrivilege('502023021973760015')" size="mini" @click="ownerExitRoomModel(scope.row)">
+              {{ $t('ownerDetailRoom.checkOut') }}
+            </el-button>
+            <el-button v-if="scope.row.state != '2002'" size="mini" @click="_toSimplifyAcceptance(scope.row)">
+              {{ $t('ownerDetailRoom.businessAcceptance') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="8">
+          <span>
+            {{ $t('ownerDetailRoom.arrearsSubtotal') }}:
+            {{ ownerDetailRoomInfo.allOweFeeAmount }}
+          </span>
+        </el-col>
+        <el-col :span="16" class="text-right">
+          <el-pagination @current-change="handleCurrentChange" :current-page="pagination.currentPage"
+            :page-size="pagination.pageSize" :total="pagination.total" layout="total, prev, pager, next, jumper" />
+        </el-col>
+      </el-row>
+    </div>
+
+    <edit-room ref="editRoom" @refresh="_loadOwnerDetailRoomData" />
+    <owner-exit-room ref="ownerExitRoom" @refresh="_loadOwnerDetailRoomData" />
+  </div>
+</template>
+
+<script>
+import EditRoom from '@/components/room/editRoom'
+import { queryRoomsByOwner } from '@/api/owner/ownerDetailRoomApi'
+
+import OwnerExitRoom from '@/components/owner/ownerExitRoom'
+import { getCommunityId } from '@/api/community/communityApi'
+
+
+export default {
+  name: 'OwnerDetailRoom',
+  components: {
+    EditRoom,
+    OwnerExitRoom
+  },
+  data() {
+    return {
+      ownerDetailRoomInfo: {
+        rooms: [],
+        ownerId: '',
+        roomNum: '',
+        allOweFeeAmount: '0'
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(ownerId, ownerName, ownerLink) {
+      this.ownerDetailRoomInfo.ownerId = ownerId
+      this.ownerDetailRoomInfo.ownerName = ownerName
+      this.ownerDetailRoomInfo.ownerLink = ownerLink
+      this._loadOwnerDetailRoomData()
+    },
+    async _loadOwnerDetailRoomData() {
+      try {
+        const params = {
+          communityId: getCommunityId(),
+          ownerId: this.ownerDetailRoomInfo.ownerId,
+          roomNum: this.ownerDetailRoomInfo.roomNum,
+          page: this.pagination.currentPage,
+          row: this.pagination.pageSize
+        }
+
+        const response = await queryRoomsByOwner(params)
+        this.ownerDetailRoomInfo.rooms = response.data.rooms
+        this.pagination.total = response.data.total
+        this._computeOwnerRoomOweFeeAmount()
+      } catch (error) {
+        console.error('Failed to load owner room data:', error)
+      }
+    },
+    _qureyOwnerDetailRoom() {
+      this.pagination.currentPage = 1
+      this._loadOwnerDetailRoomData()
+    },
+    _resetOwnerDetailRoom() {
+      this.ownerDetailRoomInfo.roomNum = ''
+      this._qureyOwnerDetailRoom()
+    },
+    _computeOwnerRoomOweFeeAmount() {
+      const rooms = this.ownerDetailRoomInfo.rooms
+      let totalOweFeeAmount = 0
+      this.ownerDetailRoomInfo.allOweFeeAmount = 0
+
+      if (!rooms || rooms.length < 1) return
+
+      rooms.forEach(room => {
+        if (room.roomOweFee) {
+          totalOweFeeAmount += parseFloat(room.roomOweFee)
+        }
+      })
+
+      this.ownerDetailRoomInfo.allOweFeeAmount = totalOweFeeAmount.toFixed(2)
+    },
+    _openAddOwnerRoom() {
+      this.$router.push({
+        path: '/property/addOwnerRoomBinding',
+        query: { ownerId: this.ownerDetailRoomInfo.ownerId }
+      })
+    },
+    ownerExitRoomModel(room) {
+      this.$refs.ownerExitRoom.open({
+        ownerId: this.ownerDetailRoomInfo.ownerId,
+        roomId: room.roomId
+      })
+    },
+    _toSimplifyAcceptance(room) {
+      const date = new Date()
+      this.$store.dispatch('app/saveData', {
+        key: 'JAVA110_IS_BACK',
+        value: date.getTime()
+      })
+      this.$store.dispatch('app/saveData', {
+        key: 'simplifyAcceptanceSearch',
+        value: {
+          searchType: '1',
+          searchValue: `${room.floorNum}-${room.unitNum}-${room.roomNum}`,
+          searchPlaceholder: this.$t('ownerDetailRoom.roomNumberPlaceholder')
+        }
+      })
+      this.$router.push('/property/simplifyAcceptance?tab=businessAcceptance')
+    },
+    _openEditRoomModel(room) {
+      this.$refs.editRoom.open(room)
+    },
+    handleCurrentChange(currentPage) {
+      this.pagination.currentPage = currentPage
+      this._loadOwnerDetailRoomData()
+    },
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.margin-top-lg {
+  margin-top: 30px;
+}
+
+.padding-right-xs {
+  padding-right: 5px;
+}
+
+.padding-left-xl {
+  padding-left: 20px;
+}
+
+.text-right {
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailRoomDemo.vue b/src/components/owner/ownerDetailRoomDemo.vue
new file mode 100644
index 0000000..9349cdf
--- /dev/null
+++ b/src/components/owner/ownerDetailRoomDemo.vue
@@ -0,0 +1,19 @@
+<template>
+  <owner-detail-room ref="ownerDetailRoom" />
+</template>
+
+<script>
+import OwnerDetailRoom from '@/components/owner/ownerDetailRoom'
+
+export default {
+  components: {
+    OwnerDetailRoom
+  },
+  methods: {
+    open(ownerId) {
+      this.$refs.ownerDetailRoom.ownerDetailRoomInfo.ownerId = ownerId
+      this.$refs.ownerDetailRoom._loadOwnerDetailRoomData(1, 10)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailRoomFee.vue b/src/components/owner/ownerDetailRoomFee.vue
new file mode 100644
index 0000000..5ed90e2
--- /dev/null
+++ b/src/components/owner/ownerDetailRoomFee.vue
@@ -0,0 +1,321 @@
+<template>
+  <div class="margin-top">
+    <el-row class="margin-top-lg">
+      <el-col :span="12" class="padding-right-xs padding-left-xl">
+        <span class="margin-right" v-for="(item, index) in ownerDetailRoomFeeInfo.payObjs" :key="index">
+          <el-checkbox class="checkRoomItem" v-model="ownerDetailRoomFeeInfo.payerObjIds" :label="item.roomId"
+            @change="_chanagePayerObjId()">
+            {{ item.floorNum }}-{{ item.unitNum }}-{{ item.roomNum }}
+          </el-checkbox>
+        </span>
+      </el-col>
+      <el-col :span="3" class="padding-lr-xs">
+        <el-select v-model="ownerDetailRoomFeeInfo.state" @change="_changeContractConfigId()" size="small"
+          :placeholder="$t('ownerDetailRoomFee.selectStatus')">
+          <el-option :label="$t('ownerDetailRoomFee.valid')" value="2008001"></el-option>
+          <el-option :label="$t('ownerDetailRoomFee.feeEnd')" value="2009001"></el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="9" class="text-right">
+        <el-button type="primary" size="small" style="margin-left:10px" v-if="hasPrivilege('502020082314267912')"
+          @click="_openBatchPayRoomFeeModal()">
+          {{ $t('ownerDetailRoomFee.batchPay') }}
+        </el-button>
+        <el-button type="primary" size="small" style="margin-left:10px" v-if="hasPrivilege('502022073007100003')"
+          @click="_openTempImportRoomFeeModal()">
+          {{ $t('ownerDetailRoomFee.tempFee') }}
+        </el-button>
+        <el-button type="primary" size="small" style="margin-left:10px" v-if="hasPrivilege('502022073049300004')"
+          @click="_openProxyFeeModal()">
+          {{ $t('ownerDetailRoomFee.quantityPay') }}
+        </el-button>
+        <el-button type="primary" size="small" style="margin-left:10px" v-if="hasPrivilege('502022073096990007')"
+          @click="_openRoomsCreateFeeModal()">
+          {{ $t('ownerDetailRoomFee.createFee') }}
+        </el-button>
+        <el-button type="primary" size="small" style="margin-left:10px" v-if="hasPrivilege('502020080570210194')"
+          @click="_toRoomOwePayFee()">
+          {{ $t('ownerDetailRoomFee.owePay') }}
+        </el-button>
+        <el-button type="default" size="small" style="margin-left:10px" @click="_printOwnOrder()">
+          {{ $t('ownerDetailRoomFee.reminder') }}
+        </el-button>
+      </el-col>
+    </el-row>
+    <div class="margin-top">
+      <el-table :data="ownerDetailRoomFeeInfo.fees" style="width: 100%">
+        <el-table-column prop="payerObjName" :label="$t('ownerDetailRoomFee.room')" align="center"></el-table-column>
+        <el-table-column prop="feeName" :label="$t('ownerDetailRoomFee.feeItem')" align="center"></el-table-column>
+        <el-table-column prop="feeFlagName" :label="$t('ownerDetailRoomFee.feeFlag')" align="center"></el-table-column>
+        <el-table-column prop="feeTypeCdName" :label="$t('ownerDetailRoomFee.feeType')"
+          align="center"></el-table-column>
+        <el-table-column prop="amountOwed" :label="$t('ownerDetailRoomFee.amount')" align="center"></el-table-column>
+        <el-table-column prop="startTime" :label="$t('ownerDetailRoomFee.createTime')" align="center"></el-table-column>
+        <el-table-column :label="$t('ownerDetailRoomFee.timeRange')" align="center">
+          <template slot-scope="scope">
+            {{ _getRoomEndTime(scope.row) }}~<br>{{ _getRoomDeadlineTime(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('ownerDetailRoomFee.remark')" align="center" width="150">
+          <template slot-scope="scope">
+            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
+              <div><span>{{ $t('ownerDetailRoomFee.lastDegree') }}</span>{{ scope.row.preDegrees }}</div>
+              <div><span>{{ $t('ownerDetailRoomFee.currentDegree') }}</span>{{ scope.row.curDegrees }}</div>
+              <div><span>{{ $t('ownerDetailRoomFee.unitPrice')
+                  }}</span>{{ scope.row.mwPrice ? scope.row.mwPrice : scope.row.squarePrice }}</div>
+              <div><span>{{ $t('ownerDetailRoomFee.additionalFee') }}</span>{{ scope.row.additionalAmount }}</div>
+            </div>
+            <div v-else-if="scope.row.computingFormula == '6006'">
+              <div><span>{{ $t('ownerDetailRoomFee.usage') }}</span>{{ _getRoomAttrValue(scope.row.feeAttrs, '390006') }}
+              </div>
+              <div><span>{{ $t('ownerDetailRoomFee.unitPrice') }}</span>{{ scope.row.squarePrice }}</div>
+              <div><span>{{ $t('ownerDetailRoomFee.additionalFee') }}</span>{{ scope.row.additionalAmount }}</div>
+            </div>
+            <div v-else-if="scope.row.feeTypeCd == '888800010017'" width="150">
+              <div><span>{{ $t('ownerDetailRoomFee.algorithm')
+                  }}</span>{{ _getRoomAttrValue(scope.row.feeAttrs, '390005') }}</div>
+              <div><span>{{ $t('ownerDetailRoomFee.usage') }}</span>{{ _getRoomAttrValue(scope.row.feeAttrs, '390003') }}
+              </div>
+            </div>
+            <div v-else-if="scope.row.computingFormula == '4004'">
+              <div>{{ $t('ownerDetailRoomFee.feeByActual') }}</div>
+            </div>
+            <div v-else>
+              <div><span>{{ $t('ownerDetailRoomFee.unitPrice') }}</span>{{ scope.row.squarePrice }}</div>
+              <div v-if="scope.row.feeFlag == '1003006'"><span>{{ $t('ownerDetailRoomFee.additionalFee')
+                  }}</span>{{ scope.row.additionalAmount }}</div>
+              <div v-else><span>{{ $t('ownerDetailRoomFee.fixedFee') }}</span>{{ scope.row.additionalAmount }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="stateName" :label="$t('ownerDetailRoomFee.status')" align="center"></el-table-column>
+        <el-table-column :label="$t('common.operation')" align="center" width="300">
+          <template slot-scope="scope">
+            <el-button-group>
+              <el-button type="text" size="mini"
+                v-if="scope.row.state != '2009001' && hasPrivilege('502020082314267912')"
+                @click="_payRoomFee(scope.row)">
+                {{ $t('ownerDetailRoomFee.pay') }}
+              </el-button>
+              <el-button type="text" size="mini" @click="_payRoomFeeHis(scope.row)">
+                {{ $t('ownerDetailRoomFee.payHistory') }}
+              </el-button>
+              <el-button type="text" size="mini" v-if="hasPrivilege('502020090604200029')"
+                @click="_deleteRoomFee(scope.row)">
+                {{ $t('ownerDetailRoomFee.cancel') }}
+              </el-button>
+              <el-button type="text" size="mini"
+                v-if="scope.row.state != '2009001' && hasPrivilege('502021070488970005')"
+                @click="_finishRoomFee(scope.row)">
+                {{ $t('ownerDetailRoomFee.end') }}
+              </el-button>
+              <el-button type="text" size="mini"
+                v-if="scope.row.state != '2009001' && hasPrivilege('502020090427190001')"
+                @click="_editRoomFee(scope.row)">
+                {{ $t('ownerDetailRoomFee.change') }}
+              </el-button>
+            </el-button-group>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-row>
+        <el-col :span="12">
+          <div>{{ $t('ownerDetailRoomFee.note1') }}</div>
+          <div>{{ $t('ownerDetailRoomFee.note2') }}</div>
+        </el-col>
+        <el-col :span="4">
+          <span>{{ $t('ownerDetailRoomFee.oweSubtotal') }}</span>
+          {{ ownerDetailRoomFeeInfo.totalAmount }}
+        </el-col>
+        <el-col :span="8">
+          <el-pagination @current-change="handleCurrentChange" :current-page="pagination.currentPage"
+            :page-size="pagination.pageSize" :total="pagination.total" layout="total, prev, pager, next, jumper">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+
+    <rooms-import-temp-fee ref="roomsImportTempFee"></rooms-import-temp-fee>
+    <rooms-create-fee ref="roomsCreateFee"></rooms-create-fee>
+    <rooms-proxy-fee ref="roomsProxyFee"></rooms-proxy-fee>
+  </div>
+</template>
+
+<script>
+import RoomsImportTempFee from '@/components/fee/roomsImportTempFee'
+import RoomsCreateFee from '@/components/fee/roomsCreateFee'
+import RoomsProxyFee from '@/components/fee/roomsProxyFee'
+import { listFee, listRoomsByOwner } from '@/api/owner/ownerDetailRoomFeeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'OwnerDetailRoomFee',
+  components: {
+    RoomsImportTempFee,
+    RoomsCreateFee,
+    RoomsProxyFee
+  },
+  data() {
+    return {
+      ownerDetailRoomFeeInfo: {
+        fees: [],
+        payObjs: [],
+        payerObjIds: [],
+        ownerId: '',
+        state: '2008001',
+        totalAmount: 0,
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    _loadOwnerDetailRoomFeeData(page, row) {
+      const _payerObjIds = this.ownerDetailRoomFeeInfo.payerObjIds.join(',')
+      const params = {
+        page: page,
+        row: row,
+        communityId: getCommunityId(),
+        payerObjIds: _payerObjIds,
+        state: this.ownerDetailRoomFeeInfo.state
+      }
+
+      listFee(params).then(response => {
+        this.ownerDetailRoomFeeInfo.fees = response.fees
+        this.pagination.total = response.records
+        let _totalAmount = 0.0
+        response.fees.forEach(item => {
+          _totalAmount += parseFloat(item.amountOwed)
+        })
+        this.ownerDetailRoomFeeInfo.totalAmount = _totalAmount.toFixed(2)
+      }).catch(error => {
+        console.error('请求失败处理', error)
+      })
+    },
+    _loadDetailRoomsData() {
+      const params = {
+        communityId: getCommunityId(),
+        ownerId: this.ownerDetailRoomFeeInfo.ownerId,
+        page: 1,
+        row: 100
+      }
+
+      this.ownerDetailRoomFeeInfo.payerObjIds = []
+      listRoomsByOwner(params).then(response => {
+        this.ownerDetailRoomFeeInfo.payObjs = response.rooms
+        response.rooms.forEach(room => {
+          this.ownerDetailRoomFeeInfo.payerObjIds.push(room.roomId)
+        })
+        this._loadOwnerDetailRoomFeeData(1, this.pagination.pageSize)
+      }).catch(error => {
+        console.error('请求失败处理', error)
+      })
+    },
+    _openTempImportRoomFeeModal() {
+      this.$refs.roomsImportTempFee.open({
+        ownerId: this.ownerDetailRoomFeeInfo.ownerId,
+        ownerName: this.ownerDetailRoomFeeInfo.ownerName
+      })
+    },
+    _payRoomFee(fee) {
+      this.$router.push(`/property/payFeeOrder?feeId=${fee.feeId}`)
+    },
+    _editRoomFee(fee) {
+      this.$emit('editFee', fee)
+    },
+    _payRoomFeeHis(fee) {
+      this.$router.push(`/property/propertyFee?${this.objToGetParam(fee)}`)
+    },
+    _deleteRoomFee(fee) {
+      this.$emit('deleteFee', {
+        communityId: getCommunityId(),
+        feeId: fee.feeId
+      })
+    },
+    _finishRoomFee(fee) {
+      this.$emit('finishFee', {
+        communityId: getCommunityId(),
+        feeId: fee.feeId
+      })
+    },
+    _toRoomOwePayFee() {
+      const _ids = this.ownerDetailRoomFeeInfo.payerObjIds
+      if (!_ids || _ids.length < 1) {
+        this.$message.warning(this.$t('ownerDetailRoomFee.selectRoom'))
+        return
+      }
+      this.$router.push(`/property/owePayFeeOrder?payObjId=${_ids.join(',')}&payObjType=3333&roomName=`)
+    },
+    _printOwnOrder() {
+      const _ids = this.ownerDetailRoomFeeInfo.payerObjIds
+      if (!_ids || _ids.length < 1) {
+        this.$message.warning(this.$t('ownerDetailRoomFee.selectRoom'))
+        return
+      }
+      window.open(`/print.html#/pages/property/printOweFee?payObjId=${_ids.join(',')}&payObjType=3333&payObjName=`)
+    },
+    _openRoomsCreateFeeModal() {
+      this.$refs.roomsCreateFee.open({
+        ownerId: this.ownerDetailRoomFeeInfo.ownerId,
+        ownerName: this.ownerDetailRoomFeeInfo.ownerName
+      })
+    },
+    _getRoomAttrValue(attrs, specCd) {
+      let _value = ""
+      attrs.forEach(item => {
+        if (item.specCd == specCd) {
+          _value = item.value
+          return
+        }
+      })
+      return _value
+    },
+    _getRoomDeadlineTime(fee) {
+      if (fee.amountOwed == 0 && fee.endTime == fee.deadlineTime) {
+        return "-"
+      }
+      if (fee.state == '2009001') {
+        return "-"
+      }
+      return this.$options.filters.dateFormat(fee.deadlineTime)
+    },
+    _getRoomEndTime(fee) {
+      if (fee.state == '2009001') {
+        return "-"
+      }
+      return this.$options.filters.dateFormat(fee.endTime)
+    },
+    _chanagePayerObjId() {
+      this._loadOwnerDetailRoomFeeData(1, this.pagination.pageSize)
+    },
+    _changeContractConfigId() {
+      this._loadOwnerDetailRoomFeeData(1, this.pagination.pageSize)
+    },
+    _openBatchPayRoomFeeModal() {
+      this.$router.push(`/property/batchPayFeeOrder?ownerId=${this.ownerDetailRoomFeeInfo.ownerId}&payerObjType=3333`)
+    },
+    _openProxyFeeModal() {
+      this.$refs.roomsProxyFee.open({
+        ownerId: this.ownerDetailRoomFeeInfo.ownerId,
+        ownerName: this.ownerDetailRoomFeeInfo.ownerName
+      })
+    },
+    handleCurrentChange(val) {
+      this._loadOwnerDetailRoomFeeData(val, this.pagination.pageSize)
+    },
+
+    objToGetParam(obj) {
+      return Object.keys(obj).map(key => `${key}=${obj[key]}`).join('&')
+    }
+  },
+  created() {
+    this.$on('switch', (data) => {
+      this.ownerDetailRoomFeeInfo.ownerId = data.ownerId
+      this._loadDetailRoomsData()
+    })
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailRoomLang.js b/src/components/owner/ownerDetailRoomLang.js
new file mode 100644
index 0000000..1b623b4
--- /dev/null
+++ b/src/components/owner/ownerDetailRoomLang.js
@@ -0,0 +1,46 @@
+export default {
+  en: {
+    ownerDetailRoom: {
+      placeholder: {
+        roomNum: 'Please enter room number',
+        searchRoom: 'Please enter room number like 1-1-1'
+      },
+      table: {
+        roomNum: 'Room Number',
+        floor: 'Floor',
+        type: 'Type',
+        area: 'Built/Indoor Area',
+        rent: 'Rent',
+        validity: 'Validity',
+        state: 'Room Status',
+        oweFee: 'Room Arrears',
+        updateDaily: 'Update daily',
+        exitRoom: 'Check Out',
+        businessAcceptance: 'Business Acceptance',
+        oweSubtotal: 'Arrears Subtotal'
+      }
+    }
+  },
+  zh: {
+    ownerDetailRoom: {
+      placeholder: {
+        roomNum: '请填写房屋编号',
+        searchRoom: '请输入房屋编号 楼栋-单元-房屋 如1-1-1'
+      },
+      table: {
+        roomNum: '房屋编号',
+        floor: '楼层',
+        type: '类型',
+        area: '建筑/室内面积',
+        rent: '租金',
+        validity: '有效期',
+        state: '房屋状态',
+        oweFee: '房屋欠费',
+        updateDaily: '按天更新',
+        exitRoom: '退房',
+        businessAcceptance: '业务受理',
+        oweSubtotal: '欠费小计'
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailVisit.vue b/src/components/owner/ownerDetailVisit.vue
new file mode 100644
index 0000000..aa0211e
--- /dev/null
+++ b/src/components/owner/ownerDetailVisit.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="margin-top">
+    <el-table :data="ownerDetailVisitInfo.visits" style="width: 100%">
+      <el-table-column prop="vId" :label="$t('visitManage.table.visitId')" align="center"></el-table-column>
+      <el-table-column :label="$t('visitManage.table.photo')" align="center">
+        <template slot-scope="scope">
+          <div style="position: relative; display: inline-block;" 
+               @click="showVisitImg(scope.row.url?scope.row.url:'/img/noPhoto.jpg')">
+            <img width="50" height="50" :src="scope.row.url?scope.row.url:'/img/noPhoto.jpg'"
+                 onerror="this.src='/img/noPhoto.jpg';">
+            <img src="/img/icon-bigimg.png" style="position: absolute;right: 0;bottom: 0;" width="50"
+                 height="50" alt="">
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('visitManage.table.name')" align="center">
+        <template slot-scope="scope">
+          {{scope.row.vName}}({{scope.row.phoneNumber}})/{{scope.row.visitGender=='0'?$t('common.male'):$t('common.female')}}
+        </template>
+      </el-table-column>
+      <el-table-column prop="ownerName" :label="$t('visitManage.table.ownerName')" align="center"></el-table-column>
+      <el-table-column :label="$t('visitManage.table.visitCase')" align="center">
+        <template slot-scope="scope">
+          {{scope.row.visitCase}}({{scope.row.reasonTypeName}})
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('visitManage.table.carNum')" align="center">
+        <template slot-scope="scope">
+          <span v-if="scope.row.carState == '1' && scope.row.psId != null && scope.row.psId != '' && scope.row.psId != undefined">
+            {{scope.row.carNum}}<br />({{scope.row.parkAreaNum}}{{$t('visitManage.table.parkingLot')}}-{{scope.row.parkingSpaceNum}}{{$t('visitManage.table.parkingSpace')}})
+          </span>
+          <span v-else>{{scope.row.carNum}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="entourage" :label="$t('visitManage.table.entourage')" align="center"></el-table-column>
+      <el-table-column prop="createTime" :label="$t('visitManage.table.createTime')" align="center"></el-table-column>
+      <el-table-column :label="$t('visitManage.table.visitTime')" align="center">
+        <template slot-scope="scope">
+          {{scope.row.visitTime}}<br />{{scope.row.departureTime}}
+        </template>
+      </el-table-column>
+      <el-table-column prop="stateName" :label="$t('visitManage.table.state')" align="center"></el-table-column>
+      <el-table-column prop="carStateName" :label="$t('visitManage.table.carStatus')" align="center"></el-table-column>
+      <el-table-column :label="$t('common.operation')" align="center" width="300">
+        <template slot-scope="scope">
+          <el-button-group>
+            <el-button size="mini" @click="_openVisitDetail(scope.row)">
+              {{ $t('common.detail') }}
+            </el-button>
+            <el-button size="mini" v-if="scope.row.state != '1' && scope.row.state != '2'" 
+                       @click="_openEditVisitModel(scope.row)">
+              {{ $t('common.edit') }}
+            </el-button>
+            <el-button size="mini" v-if="scope.row.carNum != '' && scope.row.carState == '0'" 
+                       @click="_openExamineVisitCarModel(scope.row)">
+              {{ $t('common.audit') }}
+            </el-button>
+            <el-button size="mini" @click="_openDeleteVisitModel(scope.row)">
+              {{ $t('common.delete') }}
+            </el-button>
+          </el-button-group>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @current-change="handleCurrentChange"
+      :current-page="pagination.currentPage"
+      :page-size="pagination.pageSize"
+      :total="pagination.total"
+      layout="total, prev, pager, next, jumper">
+    </el-pagination>
+
+    <edit-visit ref="editVisit" @refresh="_loadOwnerDetailVisitData"></edit-visit>
+    <examine-visit-car ref="examineVisitCar" @refresh="_loadOwnerDetailVisitData"></examine-visit-car>
+    <delete-visit ref="deleteVisit" @refresh="_loadOwnerDetailVisitData"></delete-visit>
+    <view-image ref="viewImage"></view-image>
+  </div>
+</template>
+
+<script>
+//import EditVisit from '@/components/oa/editVisit'
+//import ExamineVisitCar from '@/components/oa/examineVisitCar'
+//import DeleteVisit from '@/components/oa/deleteVisit'
+import ViewImage from '@/components/system/viewImage'
+import { listVisits } from '@/api/owner/ownerDetailVisitApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'OwnerDetailVisit',
+  components: {
+    //EditVisit,
+    //ExamineVisitCar,
+    //DeleteVisit,
+    ViewImage
+  },
+  data() {
+    return {
+      ownerDetailVisitInfo: {
+        visits: [],
+        ownerId: '',
+        link: '',
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    _loadOwnerDetailVisitData(page, row) {
+      const params = {
+        page: page,
+        row: row,
+        communityId: getCommunityId(),
+        ownerTel: this.ownerDetailVisitInfo.link,
+        channel: 'PC'
+      }
+
+      listVisits(params).then(response => {
+        this.ownerDetailVisitInfo.visits = response.visits
+        this.pagination.total = response.records
+      }).catch(error => {
+        console.error('请求失败处理', error)
+      })
+    },
+    showVisitImg(url) {
+      this.$refs.viewImage.open(url || '/img/noPhoto.jpg')
+    },
+    _openVisitDetail(item) {
+      const flowId = item.flowId || ''
+      this.$router.push(`/property/visitDetail?vId=${item.vId}&flowId=${flowId}`)
+    },
+    _openEditVisitModel(visit) {
+      this.$refs.editVisit.open(visit)
+    },
+    _openExamineVisitCarModel(visit) {
+      this.$refs.examineVisitCar.open(visit)
+    },
+    _openDeleteVisitModel(visit) {
+      this.$refs.deleteVisit.open(visit)
+    },
+    handleCurrentChange(val) {
+      this._loadOwnerDetailVisitData(val, this.pagination.pageSize)
+    }
+  },
+  created() {
+    this.$on('switch', (data) => {
+      this.ownerDetailVisitInfo.ownerId = data.ownerId
+      this.ownerDetailVisitInfo.link = data.link
+      this._loadOwnerDetailVisitData(1, this.pagination.pageSize)
+    })
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/system/ownerDetailHis.vue b/src/components/system/ownerDetailHis.vue
deleted file mode 100644
index c0cb078..0000000
--- a/src/components/system/ownerDetailHis.vue
+++ /dev/null
@@ -1,208 +0,0 @@
-<template>
-  <div class="owner-detail-his">
-    <el-table
-      :data="ownerDetailHisInfo.owners"
-      border
-      style="width: 100%"
-      v-loading="loading">
-      <el-table-column
-        :label="$t('ownerDetailHis.operate')"
-        align="center">
-        <template slot-scope="scope">
-          {{ _getHisOwnerOperate(scope.row) }}
-        </template>
-      </el-table-column>
-      <el-table-column
-        :label="$t('ownerDetailHis.userName')"
-        align="center">
-        <template slot-scope="scope">
-          {{ scope.row.userName || '-' }}
-        </template>
-      </el-table-column>
-      <el-table-column
-        :label="$t('ownerDetailHis.createTime')"
-        align="center">
-        <template slot-scope="scope">
-          {{ scope.row.createTime }}
-        </template>
-      </el-table-column>
-      <el-table-column
-        :label="$t('ownerDetailHis.name')"
-        align="center">
-        <template slot-scope="scope">
-          {{ scope.row.name }}({{ scope.row.link }})
-        </template>
-      </el-table-column>
-      <el-table-column
-        :label="$t('ownerDetailHis.sex')"
-        align="center">
-        <template slot-scope="scope">
-          {{ scope.row.sex === 0 ? $t('ownerDetailHis.male') : $t('ownerDetailHis.female') }}
-        </template>
-      </el-table-column>
-      <el-table-column
-        :label="$t('ownerDetailHis.idCard')"
-        align="center">
-        <template slot-scope="scope">
-          {{ scope.row.idCard || '-' }}
-        </template>
-      </el-table-column>
-      <el-table-column
-        :label="$t('ownerDetailHis.address')"
-        align="center">
-        <template slot-scope="scope">
-          {{ scope.row.address || '-' }}
-        </template>
-      </el-table-column>
-      <el-table-column
-        v-for="(item,index) in ownerDetailHisInfo.listColumns"
-        :key="index"
-        :label="item"
-        align="center">
-        <template slot-scope="scope">
-          {{ scope.row.listValues[index] || '-' }}
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <el-pagination
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-      :current-page="page.current"
-      :page-sizes="[10, 20, 30, 50]"
-      :page-size="page.size"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="page.total">
-    </el-pagination>
-  </div>
-</template>
-
-<script>
-import { queryHisOwner, getAttrSpec } from '@/api/system/operateDataLogApi'
-
-export default {
-  name: 'OwnerDetailHis',
-  data() {
-    return {
-      loading: false,
-      ownerDetailHisInfo: {
-        owners: [],
-        ownerId: '',
-        ownerName: '',
-        carNum: '',
-        listColumns: [],
-        logStartTime: '',
-        logEndTime: '',
-        ownerNameLike: '',
-        staffNameLike: ''
-      },
-      page: {
-        current: 1,
-        size: 10,
-        total: 0
-      }
-    }
-  },
-  methods: {
-    async open(conditions) {
-      this.ownerDetailHisInfo = {
-        ...this.ownerDetailHisInfo,
-        ...conditions
-      }
-      await this._getColumns()
-      this._loadOwnerDetailHisData()
-    },
-    async _loadOwnerDetailHisData() {
-      try {
-        this.loading = true
-        const params = {
-          page: this.page.current,
-          row: this.page.size,
-          memberId: this.ownerDetailHisInfo.ownerId,
-          ownerNameLike: this.ownerDetailHisInfo.ownerNameLike,
-          logStartTime: this.ownerDetailHisInfo.logStartTime,
-          logEndTime: this.ownerDetailHisInfo.logEndTime,
-          staffNameLike: this.ownerDetailHisInfo.staffNameLike
-        }
-        
-        const { data, total } = await queryHisOwner(params)
-        this.ownerDetailHisInfo.owners = data
-        this._dealOwnerAttr(data)
-        this.page.total = total
-      } catch (error) {
-        console.error('Failed to load owner history:', error)
-      } finally {
-        this.loading = false
-      }
-    },
-    _getHisOwnerOperate(owner) {
-      const ownerCount = this.ownerDetailHisInfo.owners.filter(item => item.bId === owner.bId).length
-      
-      if (ownerCount <= 1) {
-        if (owner.operate === 'ADD') return this.$t('ownerDetailHis.add')
-        if (owner.operate === 'DEL') return this.$t('ownerDetailHis.delete')
-        return '-'
-      }
-      
-      if (owner.operate === 'ADD') return this.$t('ownerDetailHis.modifyNew')
-      if (owner.operate === 'DEL') return this.$t('ownerDetailHis.modifyOld')
-      return '-'
-    },
-    async _getColumns() {
-      try {
-        const data = await getAttrSpec('building_owner_attr')
-        this.ownerDetailHisInfo.listColumns = data
-          .filter(item => item.listShow === 'Y')
-          .map(item => item.specName)
-      } catch (error) {
-        console.error('Failed to get columns:', error)
-      }
-    },
-    _dealOwnerAttr(owners) {
-      if (!owners) return
-      
-      owners.forEach(item => {
-        this._getColumnsValue(item)
-      })
-    },
-    _getColumnsValue(owner) {
-      owner.listValues = []
-      if (!owner['ownerAttrDtos'] || owner.ownerAttrDtos.length < 1) {
-        this.ownerDetailHisInfo.listColumns.forEach(() => {
-          owner.listValues.push('')
-        })
-        return
-      }
-      
-      this.ownerDetailHisInfo.listColumns.forEach(value => {
-        let tmpValue = ''
-        owner.ownerAttrDtos.forEach(attrItem => {
-          if (value === attrItem.specName) {
-            tmpValue = attrItem.valueName
-          }
-        })
-        owner.listValues.push(tmpValue)
-      })
-    },
-    handleSizeChange(size) {
-      this.page.size = size
-      this._loadOwnerDetailHisData()
-    },
-    handleCurrentChange(current) {
-      this.page.current = current
-      this._loadOwnerDetailHisData()
-    }
-  }
-}
-</script>
-
-<style scoped>
-.owner-detail-his {
-  padding: 20px;
-}
-
-.el-pagination {
-  margin-top: 20px;
-  text-align: right;
-}
-</style>
\ No newline at end of file
diff --git a/src/i18n/userI18n.js b/src/i18n/userI18n.js
index 3bb7085..75fdf9a 100644
--- a/src/i18n/userI18n.js
+++ b/src/i18n/userI18n.js
@@ -8,6 +8,7 @@ import { messages as editScheduleClassesMessages } from '../views/org/editSchedu
 import { messages as scheduleClassesPageMessages } from '../views/org/scheduleClassesPageLang'
 import { messages as workflowManageMessages } from '../views/system/workflowManageLang'
 import { messages as workflowSettingManageMessages } from '../views/system/workflowSettingManageLang'
+import { messages as ownerDetailMessages } from '../views/owner/ownerDetailLang'
 
 export const messages = {
     en: {
@@ -21,6 +22,7 @@ export const messages = {
         ...scheduleClassesPageMessages.en,
         ...workflowManageMessages.en,
         ...workflowSettingManageMessages.en,
+        ...ownerDetailMessages.en,
     },
     zh: {
         ...staffCommunityMessages.zh,
@@ -33,5 +35,6 @@ export const messages = {
         ...scheduleClassesPageMessages.zh,
         ...workflowManageMessages.zh,
         ...workflowSettingManageMessages.zh,
+        ...ownerDetailMessages.zh,
     }
 }
\ No newline at end of file
diff --git a/src/router/userRouter.js b/src/router/userRouter.js
index 92ce3ba..5f0937d 100644
--- a/src/router/userRouter.js
+++ b/src/router/userRouter.js
@@ -35,8 +35,13 @@ export default [
         component: () => import('@/views/org/editScheduleClassesList.vue')
     },
     {
-        path:'/pages/property/scheduleClassesPage',
-        name:'/pages/property/scheduleClassesPage',
+        path: '/pages/property/scheduleClassesPage',
+        name: '/pages/property/scheduleClassesPage',
         component: () => import('@/views/org/scheduleClassesPageList.vue')
-        },
+    },
+    {
+        path: '/views/owner/ownerDetail',
+        name: '/views/owner/ownerDetail',
+        component: () => import('@/views/owner/ownerDetail.vue')
+    },
 ]
\ No newline at end of file
diff --git a/src/views/oa/complaintLang.js b/src/views/oa/complaintLang.js
index e806bfd..aa7943d 100644
--- a/src/views/oa/complaintLang.js
+++ b/src/views/oa/complaintLang.js
@@ -28,6 +28,7 @@ export const messages = {
         phone: 'Phone',
         status: 'Status',
         handler: 'Handler',
+        handlerPhone: 'Handler Phone',
         createTime: 'Create Time'
       },
       edit: {
@@ -106,6 +107,7 @@ export const messages = {
         phone: '联系电话',
         status: '状态',
         handler: '处理人',
+        handlerPhone: '处理人电话',
         createTime: '创建时间'
       },
       edit: {
diff --git a/src/views/oa/visitManageLang.js b/src/views/oa/visitManageLang.js
index 90303f3..3d9bdc4 100644
--- a/src/views/oa/visitManageLang.js
+++ b/src/views/oa/visitManageLang.js
@@ -18,6 +18,8 @@ export const messages = {
       table: {
         visitId: 'Visit ID',
         name: 'Name',
+        photo: 'Photo',
+
         gender: 'Gender',
         phoneNumber: 'Phone Number',
         roomName: 'Visit Room',
@@ -29,6 +31,9 @@ export const messages = {
         departureTime: 'Departure Time',
         state: 'Audit Status',
         msg: 'Audit Remark',
+        entourage: 'Entourage',
+        carStatus: 'Car Status',
+
         createTime: 'Create Time'
       },
       gender: {
@@ -58,6 +63,8 @@ export const messages = {
       table: {
         visitId: '拜访ID',
         name: '姓名',
+        photo: '照片',
+
         gender: '性别',
         phoneNumber: '电话号码',
         roomName: '拜访房屋',
@@ -65,9 +72,12 @@ export const messages = {
         carNum: '访客车辆',
         visitType: '访客类型',
         visitCase: '拜访事由',
+        entourage: '随行人数',
         visitTime: '拜访时间',
         departureTime: '离开时间',
         state: '审核状态',
+        carStatus: '车辆状态',
+
         msg: '审核备注',
         createTime: '创建时间'
       },
diff --git a/src/views/owner/listOwner.vue b/src/views/owner/listOwner.vue
index 39e2b0a..ab09dc3 100644
--- a/src/views/owner/listOwner.vue
+++ b/src/views/owner/listOwner.vue
@@ -21,8 +21,10 @@
             <el-row :gutter="20">
               <el-col :span="4">
                 <el-form-item>
-                  <el-select v-model="conditions.personType" :placeholder="$t('listOwner.personTypeName')" style="width:100%">
-                    <el-option v-for="(type,index) in personTypes" :key="index" :label="type.label" :value="type.value" />
+                  <el-select v-model="conditions.personType" :placeholder="$t('listOwner.personTypeName')"
+                    style="width:100%">
+                    <el-option v-for="(type, index) in personTypes" :key="index" :label="type.label"
+                      :value="type.value" />
                   </el-select>
                 </el-form-item>
               </el-col>
@@ -275,7 +277,8 @@ export default {
         const data = await getAttrSpecList({
           page: 1,
           row: 100,
-          tableName:'building_owner_attr'})
+          tableName: 'building_owner_attr'
+        })
         this.listColumns = data
           .filter(item => item.specShow === 'Y')
           .map(item => item.specName)
@@ -409,11 +412,14 @@ export default {
     openOwnerDetail(owner) {
       console.log('Owner detail:', owner)
       // 实际项目中跳转到详情页面
+      this.$router.push(`/views/owner/ownerDetail?ownerId=${owner.ownerId}`)
+
     },
 
     openOwnerDetailMember(owner) {
       console.log('Owner detail member:', owner)
       // 实际项目中跳转到成员详情页面
+      this.$router.push(`/views/owner/ownerDetail?ownerId=${owner.ownerId}`)
 
     }
   }
diff --git a/src/views/owner/ownerDetail.vue b/src/views/owner/ownerDetail.vue
new file mode 100644
index 0000000..472ea75
--- /dev/null
+++ b/src/views/owner/ownerDetail.vue
@@ -0,0 +1,328 @@
+<template>
+  <div class="white-bg padding-lg padding-top border-radius">
+    <el-row type="flex" justify="space-between">
+      <div class="text-title">{{ $t('ownerDetail.ownerInfo') }}</div>
+      <div>
+        <el-button v-if="ownerDetailInfo.needBack" type="primary" size="small" style="margin-left:10px"
+          @click="$router.go(-1)">
+          <i class="el-icon-close"></i>{{ $t('common.back') }}
+        </el-button>
+        <el-button type="primary" size="small" style="margin-left:10px" @click="_openEditOwnerDetailModel">
+          <i class="el-icon-edit"></i>{{ $t('common.edit') }}
+        </el-button>
+      </div>
+    </el-row>
+
+    <!-- Owner Information -->
+    <div class="margin-top ">
+      <el-row style="min-height: 160px;">
+        <el-col :span="4">
+          <div class="text-center vc-float-left" style="width: 150px;" v-if="ownerDetailInfo.faceUrl">
+            <img width="120px" height="140px" class="border-radius" :src="ownerDetailInfo.faceUrl"
+              @error="errorLoadImg" />
+          </div>
+          <div class="text-center vc-float-left" style="width: 150px;" v-else>
+            <img width="120px" height="140px" class="border-radius" src="/img/noPhoto.jpg" />
+          </div>
+        </el-col>
+        <el-col :span="20" class="text-left">
+          <el-form>
+            <el-row>
+              <el-col :span="6">
+                <el-form-item :label="$t('ownerDetail.ownerId')">
+                  <div>{{ ownerDetailInfo.ownerId }}</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('ownerDetail.name')">
+                  <div>{{ ownerDetailInfo.name }}</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6" v-if="ownerDetailInfo.personType == 'P'">
+                <el-form-item :label="$t('ownerDetail.gender')">
+                  <div>
+                    {{ ownerDetailInfo.sex == '0' ? $t('common.male') : (ownerDetailInfo.sex == '1' ?
+                      $t('common.female')
+                      : '') }}
+                  </div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('ownerDetail.personType')">
+                  <div>{{ ownerDetailInfo.personTypeName }}</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('ownerDetail.personRole')">
+                  <div>{{ ownerDetailInfo.personRoleName }}</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('ownerDetail.idCard')">
+                  <div>{{ ownerDetailInfo.idCard }}</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('ownerDetail.contact')">
+                  <div>{{ ownerDetailInfo.link }}</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('ownerDetail.backupPhone')">
+                  <div>{{ ownerDetailInfo.concactLink }}</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6" v-if="ownerDetailInfo.personType == 'C'">
+                <el-form-item :label="$t('ownerDetail.contactPerson')">
+                  <div>{{ ownerDetailInfo.concactPerson }}</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('ownerDetail.creator')">
+                  <div>{{ ownerDetailInfo.userName }}</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item :label="$t('ownerDetail.remark')">
+                  <div>{{ ownerDetailInfo.remark }}</div>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <div v-for="(item, index) in ownerDetailInfo.ownerAttrDtos" :key="index">
+              <el-row v-if="index % 4 == 0">
+                <el-col :span="6">
+                  <el-form-item :label="item.specName + ':'">
+                    <div>{{ item.valueName }}</div>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6" v-if="index < ownerDetailInfo.ownerAttrDtos.length - 1">
+                  <el-form-item :label="ownerDetailInfo.ownerAttrDtos[index + 1].specName + ':'">
+                    <div>{{ ownerDetailInfo.ownerAttrDtos[index + 1].valueName }}</div>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6" v-if="index < ownerDetailInfo.ownerAttrDtos.length - 2">
+                  <el-form-item :label="ownerDetailInfo.ownerAttrDtos[index + 2].specName + ':'">
+                    <div>{{ ownerDetailInfo.ownerAttrDtos[index + 2].valueName }}</div>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6" v-if="index < ownerDetailInfo.ownerAttrDtos.length - 3">
+                  <el-form-item :label="ownerDetailInfo.ownerAttrDtos[index + 3].specName + ':'">
+                    <div>{{ ownerDetailInfo.ownerAttrDtos[index + 3].valueName }}</div>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </el-col>
+      </el-row>
+    </div>
+
+    <divider/>
+
+    <div class="margin-top-sm">
+      <el-tabs v-model="ownerDetailInfo._currentTab" @tab-click="changeTab(ownerDetailInfo._currentTab)">
+        <el-tab-pane :label="$t('ownerDetail.room')" name="ownerDetailRoom"></el-tab-pane>
+        <el-tab-pane :label="$t('ownerDetail.car')" name="ownerDetailCar"></el-tab-pane>
+        <el-tab-pane :label="$t('ownerDetail.member')" name="ownerDetailMember"></el-tab-pane>
+        <el-tab-pane :label="$t('ownerDetail.history')" name="ownerDetailHis"></el-tab-pane>
+        <el-tab-pane :label="$t('ownerDetail.roomFee')" name="ownerDetailRoomFee"></el-tab-pane>
+        <el-tab-pane :label="$t('ownerDetail.paymentHistory')" name="ownerDetailHisFee"></el-tab-pane>
+        <el-tab-pane :label="$t('ownerDetail.account')" name="ownerDetailAccount"></el-tab-pane>
+        <el-tab-pane :label="$t('ownerDetail.coupon')" name="ownerDetailCoupon"></el-tab-pane>
+        <el-tab-pane :label="$t('ownerDetail.ownerBinding')" name="ownerDetailAppUser"></el-tab-pane>
+        <el-tab-pane :label="$t('ownerDetail.complaint')" name="ownerDetailComplaint"></el-tab-pane>
+        <el-tab-pane :label="$t('ownerDetail.repair')" name="ownerDetailRepair"></el-tab-pane>
+        <el-tab-pane :label="$t('ownerDetail.visitor')" name="ownerDetailVisit"></el-tab-pane>
+        <el-tab-pane :label="$t('ownerDetail.contract')" name="ownerDetailContract"></el-tab-pane>
+        <el-tab-pane :label="$t('ownerDetail.receipt')" name="ownerDetailReceipt"></el-tab-pane>
+        <el-tab-pane :label="$t('ownerDetail.depositReceipt')" name="ownerDetailAccountReceipt"></el-tab-pane>
+        <el-tab-pane :label="$t('ownerDetail.faceSync')" name="ownerDetailAccessControl"></el-tab-pane>
+        <el-tab-pane :label="$t('ownerDetail.accessRecord')" name="ownerDetailAccessControlRecord"></el-tab-pane>
+        <el-tab-pane :label="$t('ownerDetail.chargeOrder')" name="ownerDetailChargeMachineOrder"></el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <component :is="ownerDetailInfo._currentTab" ref="currentTabComponent"></component>
+
+    <edit-owner ref="editOwner" @refresh="loadOwnerInfo"></edit-owner>
+    <delete-fee ref="deleteFee"></delete-fee>
+    <edit-fee ref="editFee"></edit-fee>
+    <finish-fee ref="finishFee"></finish-fee>
+  </div>
+</template>
+
+<script>
+import OwnerDetailRoom from '@/components/owner/ownerDetailRoom'
+import OwnerDetailCar from '@/components/owner/ownerDetailCar'
+import OwnerDetailMember from '@/components/owner/ownerDetailMember'
+import OwnerDetailHis from '@/components/owner/ownerDetailHis'
+import OwnerDetailAccount from '@/components/owner/ownerDetailAccount'
+import OwnerDetailCoupon from '@/components/owner/ownerDetailCoupon'
+import OwnerDetailAppUser from '@/components/owner/ownerDetailAppUser'
+import OwnerDetailComplaint from '@/components/owner/ownerDetailComplaint'
+import OwnerDetailRepair from '@/components/owner/ownerDetailRepair'
+import OwnerDetailVisit from '@/components/owner/ownerDetailVisit'
+import OwnerDetailContract from '@/components/owner/ownerDetailContract'
+//import OwnerDetailRoomFee from '@/components/owner/ownerDetailRoomFee'
+import OwnerDetailHisFee from '@/components/owner/ownerDetailHisFee'
+import OwnerDetailReceipt from '@/components/owner/ownerDetailReceipt'
+import OwnerDetailAccountReceipt from '@/components/owner/ownerDetailAccountReceipt'
+import OwnerDetailAccessControl from '@/components/owner/ownerDetailAccessControl'
+import OwnerDetailAccessControlRecord from '@/components/owner/ownerDetailAccessControlRecord'
+import OwnerDetailChargeMachineOrder from '@/components/owner/ownerDetailChargeMachineOrder'
+import EditOwner from '@/components/owner/editOwner'
+import DeleteFee from '@/components/fee/deleteFee'
+import EditFee from '@/components/fee/editFee'
+//import FinishFee from '@/components/fee/finishFee'
+import { getCommunityId } from '@/api/community/communityApi'
+import { queryOwners } from '@/api/owner/ownerDetailApi'
+import divider from '@/components/system/divider'
+
+export default {
+  name: 'OwnerDetail',
+  components: {
+    OwnerDetailRoom,
+    OwnerDetailCar,
+    OwnerDetailMember,
+    OwnerDetailHis,
+    OwnerDetailAccount,
+    OwnerDetailCoupon,
+    OwnerDetailAppUser,
+    OwnerDetailComplaint,
+    OwnerDetailRepair,
+    OwnerDetailVisit,
+    OwnerDetailContract,
+    //OwnerDetailRoomFee,
+    OwnerDetailHisFee,
+    OwnerDetailReceipt,
+    OwnerDetailAccountReceipt,
+    OwnerDetailAccessControl,
+    OwnerDetailAccessControlRecord,
+    OwnerDetailChargeMachineOrder,
+    EditOwner,
+    DeleteFee,
+    EditFee,
+    //FinishFee,
+    divider
+  },
+  data() {
+    return {
+      ownerDetailInfo: {
+        viewOwnerFlag: '',
+        ownerId: "",
+        memberId: '',
+        name: "",
+        age: "",
+        sex: "",
+        userName: "",
+        remark: "",
+        idCard: "",
+        link: "",
+        ownerPhoto: "/img/noPhoto.jpg",
+        ownerAttrDtos: [],
+        faceUrl: '',
+        _currentTab: 'ownerDetailRoom',
+        personType: '',
+        personTypeName: '',
+        personRole: '',
+        personRoleName: '',
+        concactLink: '',
+        concactPerson: '',
+        needBack: false
+      }
+    }
+  },
+  created() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      this.ownerDetailInfo.ownerId = this.$route.query.ownerId
+      this.ownerDetailInfo.needBack = this.$route.query.needBack
+      if (!this.ownerDetailInfo.ownerId) {
+        return
+      }
+      const currentTab = this.$route.query.currentTab
+      if (currentTab) {
+        this.ownerDetailInfo._currentTab = currentTab
+      }
+      this.loadOwnerInfo()
+    },
+    loadOwnerInfo() {
+      const params = {
+        ownerId: this.ownerDetailInfo.ownerId,
+        page: 1,
+        row: 1,
+        communityId: getCommunityId(),
+        ownerTypeCd: '1001'
+      }
+
+      queryOwners(params).then(response => {
+        const data = response.data[0]
+        Object.assign(this.ownerDetailInfo, data)
+        this.ownerDetailInfo.ownerAttrDtos = response.owners[0].ownerAttrDtos
+      }).catch(error => {
+        console.error('Failed to load owner info:', error)
+      })
+    },
+    changeTab(tab) {
+      this.ownerDetailInfo._currentTab = tab || tab
+      setTimeout(() => {
+        if (this.$refs.currentTabComponent) {
+          this.$refs.currentTabComponent.open(
+            this.ownerDetailInfo.ownerId,
+            this.ownerDetailInfo.name,
+            this.ownerDetailInfo.link
+          )
+        }
+      }, 1000);
+
+    },
+    errorLoadImg() {
+      this.ownerDetailInfo.ownerPhoto = "/img/noPhoto.jpg"
+    },
+    _openEditOwnerDetailModel() {
+      this.$refs.editOwner.open(this.ownerDetailInfo)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.white-bg {
+  background-color: #fff;
+}
+
+.padding-lg {
+  padding: 20px;
+}
+
+.padding-top {
+  padding-top: 15px;
+}
+
+.border-radius {
+  border-radius: 4px;
+}
+
+.margin-top {
+  margin-top: 15px;
+}
+
+.margin-top-sm {
+  margin-top: 10px;
+}
+
+.text-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.vc-float-left {
+  float: left;
+}
+
+.vc-line-primary {
+  border-top: 1px solid #409EFF;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/owner/ownerDetailLang.js b/src/views/owner/ownerDetailLang.js
new file mode 100644
index 0000000..b7f7452
--- /dev/null
+++ b/src/views/owner/ownerDetailLang.js
@@ -0,0 +1,474 @@
+export const messages = {
+  en: {
+    ownerDetail: {
+      ownerInfo: 'Owner Information',
+      ownerId: 'Owner ID',
+      name: 'Name',
+      gender: 'Gender',
+      personType: 'Person Type',
+      personRole: 'Person Role',
+      idCard: 'ID Card',
+      contact: 'Contact',
+      backupPhone: 'Backup Phone',
+      contactPerson: 'Contact Person',
+      creator: 'Creator',
+      remark: 'Remark',
+      room: 'Room',
+      car: 'Car',
+      member: 'Member',
+      history: 'History',
+      roomFee: 'Room Fee',
+      paymentHistory: 'Payment History',
+      account: 'Account',
+      coupon: 'Coupon',
+      ownerBinding: 'Owner Binding',
+      complaint: 'Complaint',
+      repair: 'Repair',
+      visitor: 'Visitor',
+      contract: 'Contract',
+      receipt: 'Receipt',
+      depositReceipt: 'Deposit Receipt',
+      faceSync: 'Face Sync',
+      accessRecord: 'Access Record',
+      chargeOrder: 'Charge Order'
+    },
+    ownerDetailMember: {
+      placeholder: {
+        name: 'Please enter member name'
+      },
+      face: 'Face',
+      name: 'Name',
+      gender: 'Gender',
+      role: 'Role',
+      idCard: 'ID Card',
+      contact: 'Contact',
+      address: 'Address'
+    },
+    ownerDetailAccount: {
+      acctId: 'Account ID',
+      acctName: 'Account Name',
+      phone: 'Phone',
+      acctType: 'Account Type',
+      amount: 'Amount',
+      createTime: 'Create Time',
+      prestore: 'Prestore',
+      detail: 'Account Detail'
+    },
+    ownerDetailAppUser: {
+      communityName: 'Community Name',
+      relatedOwner: 'Related Owner',
+      idCard: 'ID Card',
+      phone: 'Phone',
+      status: 'Status',
+      applyTime: 'Apply Time',
+      appType: 'App Type',
+      unbind: 'Unbind',
+      resetPwd: 'Reset Password'
+    },
+    ownerDetailRepair: {
+      repairId: 'Work Order ID',
+      location: 'Location',
+      repairType: 'Repair Type',
+      reporter: 'Reporter',
+      contact: 'Contact',
+      appointmentTime: 'Appointment Time',
+      status: 'Status',
+      taskProcess: 'Task Process'
+    },
+    ownerDetailContract: {
+      contractName: 'Contract Name',
+      contractCode: 'Contract Code',
+      parentContractCode: 'Parent Contract Code',
+      contractType: 'Contract Type',
+      operator: 'Operator',
+      amount: 'Amount',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      createTime: 'Create Time',
+      status: 'Status'
+    },
+    ownerDetailHisFee: {
+      feeItem: 'Fee Item',
+      chargeObject: 'Charge Object',
+      cycle: 'Cycle (months)',
+      receivableAmount: 'Receivable/Received (yuan)',
+      paymentMethod: 'Payment Method',
+      paymentPeriod: 'Payment Period',
+      paymentTime: 'Payment Time',
+      cashier: 'Cashier',
+      status: 'Status',
+      remark: 'Remark',
+      operation: 'Operation',
+      detail: 'Detail',
+      accountDeduction: 'Account Deduction'
+    },
+    ownerDetailReceipt: {
+      print: 'Print',
+      printSmall: 'Print Small',
+      printApply: 'Print Application',
+      feeType: 'Fee Type',
+      owner: 'Owner',
+      feeItem: 'Fee Item',
+      chargePeriod: 'Charge Period',
+      totalAmount: 'Total Amount',
+      paymentTime: 'Payment Time',
+      receiptId: 'Receipt ID',
+      selectPrint: 'Please select receipts to print'
+    },
+    ownerDetailAccountReceipt: {
+      print: 'Print',
+      printSmall: 'Print Small',
+      accountName: 'Account Name',
+      accountType: 'Account Type',
+      owner: 'Owner',
+      prestoreAmount: 'Prestore Amount',
+      prestoreMethod: 'Prestore Method',
+      totalAmount: 'Total Amount',
+      prestoreTime: 'Prestore Time',
+      receiptId: 'Receipt ID',
+      selectPrint: 'Please select receipts to print'
+    },
+    ownerDetailAccessControl: {
+      objectType: 'Object Type',
+      objectName: 'Object Name',
+      command: 'Command',
+      status: 'Status',
+      description: 'Description',
+      syncTime: 'Sync Time',
+      operation: 'Operation',
+      resync: 'Resync'
+    },
+    ownerDetailAccessControlRecord: {
+      face: 'Face',
+      id: 'ID',
+      deviceName: 'Device Name',
+      deviceCode: 'Device Code',
+      userName: 'User Name',
+      openType: 'Open Type',
+      phone: 'Phone',
+      idCard: 'ID Card',
+      similarity: 'Similarity',
+      openStatus: 'Open Status',
+      openTime: 'Open Time',
+      other: 'Other',
+      success: 'Success',
+      failed: 'Failed'
+    },
+    ownerDetailChargeMachineOrder: {
+      id: 'ID',
+      name: 'Name',
+      phone: 'Phone',
+      charger: 'Charger',
+      slot: 'Slot',
+      chargeHours: 'Charge Hours',
+      byAmount: 'By Amount',
+      hours: 'hours',
+      chargeAmount: 'Charge Amount',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      deductionAccount: 'Deduction Account',
+      hourPrice: 'Hour Price',
+      deductionAmount: 'Deduction Amount',
+      detail: 'Detail',
+      socketStatus: 'Socket Status',
+      stopCharge: 'Stop Charge',
+      description: 'Description'
+    },
+    ownerDetailRoom: {
+      pleaseEnterRoomNumber: 'Please enter room number',
+      roomNumber: 'Room Number',
+      floor: 'Floor',
+      type: 'Type',
+      area: 'Area',
+      rent: 'Rent',
+      validity: 'Validity',
+      roomStatus: 'Room Status',
+      roomArrears: 'Room Arrears',
+      updateDaily: 'Update daily',
+      checkOut: 'Check Out',
+      businessAcceptance: 'Business Acceptance',
+      arrearsSubtotal: 'Arrears Subtotal',
+      roomNumberPlaceholder: 'Please enter room number like 1-1-1',
+      deliverRoom: 'Deliver Room'
+    },
+    ownerDetailCar: {
+      pleaseEnterCarNumber: 'Please enter license plate number',
+      addCar: 'Add Vehicle',
+      carNumber: 'License Plate',
+      licenseType: 'License Type',
+      temporaryCar: 'Temporary Vehicle',
+      carType: 'Vehicle Type',
+      color: 'Color',
+      owner: 'Owner',
+      parkingSpace: 'Parking Space',
+      parkingSpaceReleased: 'Parking Space Released',
+      validityPeriod: 'Validity Period'
+    },
+    ownerDetailHis: {
+      action: 'Action',
+      operator: 'Operator',
+      operateTime: 'Operate Time',
+      name: 'Name',
+      gender: 'Gender',
+      male: 'Male',
+      female: 'Female',
+      idCard: 'ID Card',
+      address: 'Address',
+      add: 'Add',
+      delete: 'Delete',
+      modifyNew: 'Modify(New)',
+      modifyOld: 'Modify(Old)'
+    },
+    ownerDetailCoupon: {
+      id: 'ID',
+      couponName: 'Coupon Name',
+      value: 'Value',
+      validity: 'Validity',
+      userName: 'User Name',
+      phone: 'Phone',
+      purpose: 'Purpose',
+      quantity: 'Quantity',
+      unit: 'pcs',
+      status: 'Status',
+      unused: 'Unused',
+      used: 'Used',
+      effectiveTime: 'Effective Time'
+    }
+  },
+  zh: {
+    ownerDetail: {
+      ownerInfo: '业主信息',
+      ownerId: '业主ID',
+      name: '名称',
+      gender: '性别',
+      personType: '人员类型',
+      personRole: '人员角色',
+      idCard: '证件号',
+      contact: '联系方式',
+      backupPhone: '备用手机',
+      contactPerson: '联系人',
+      creator: '创建员工',
+      remark: '备注',
+      room: '房屋',
+      car: '车辆',
+      member: '成员',
+      history: '修改记录',
+      roomFee: '房屋费用',
+      paymentHistory: '缴费历史',
+      account: '账户',
+      coupon: '优惠券',
+      ownerBinding: '业主绑定',
+      complaint: '投诉',
+      repair: '报修',
+      visitor: '访客',
+      contract: '合同',
+      receipt: '补打收据',
+      depositReceipt: '预存收据',
+      faceSync: '人脸同步',
+      accessRecord: '开门记录',
+      chargeOrder: '充电订单'
+    },
+    ownerDetailMember: {
+      placeholder: {
+        name: '请填写成员名称'
+      },
+      face: '人脸',
+      name: '名称',
+      gender: '性别',
+      role: '人员角色',
+      idCard: '身份证',
+      contact: '联系方式',
+      address: '地址'
+    },
+    ownerDetailAccount: {
+      acctId: '账户编号',
+      acctName: '账户名称',
+      phone: '手机号',
+      acctType: '账户类型',
+      amount: '账户金额',
+      createTime: '创建时间',
+      prestore: '预存',
+      detail: '账户明细'
+    },
+    ownerDetailAppUser: {
+      communityName: '小区名称',
+      relatedOwner: '关联业主',
+      idCard: '身份证',
+      phone: '手机号',
+      status: '状态',
+      applyTime: '申请时间',
+      appType: '手机端类型',
+      unbind: '解绑',
+      resetPwd: '重置密码'
+    },
+    ownerDetailRepair: {
+      repairId: '工单编码',
+      location: '位置',
+      repairType: '报修类型',
+      reporter: '报修人',
+      contact: '联系方式',
+      appointmentTime: '预约时间',
+      status: '状态',
+      taskProcess: '定时任务处理'
+    },
+    ownerDetailContract: {
+      contractName: '合同名称',
+      contractCode: '合同编号',
+      parentContractCode: '父合同编号',
+      contractType: '合同类型',
+      operator: '经办人',
+      amount: '合同金额',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      createTime: '起草时间',
+      status: '状态'
+    },
+    ownerDetailHisFee: {
+      feeItem: '费用项',
+      chargeObject: '收费对象',
+      cycle: '周期(单位:月)',
+      receivableAmount: '应收/实收(单位:元)',
+      paymentMethod: '缴费方式',
+      paymentPeriod: '缴费起始段',
+      paymentTime: '缴费时间',
+      cashier: '收银员',
+      status: '状态',
+      remark: '备注',
+      operation: '操作',
+      detail: '详情',
+      accountDeduction: '账户扣款'
+    },
+    ownerDetailReceipt: {
+      print: '打印',
+      printSmall: '打印小票',
+      printApply: '申请单',
+      feeType: '费用类型',
+      owner: '业主',
+      feeItem: '费用项目',
+      chargePeriod: '收费时间段',
+      totalAmount: '总金额',
+      paymentTime: '缴费时间',
+      receiptId: '收据ID',
+      selectPrint: '请选择打印收据'
+    },
+    ownerDetailAccountReceipt: {
+      print: '打印',
+      printSmall: '打印小票',
+      accountName: '账户名称',
+      accountType: '账户类型',
+      owner: '业主',
+      prestoreAmount: '预存金额',
+      prestoreMethod: '预存方式',
+      totalAmount: '总金额',
+      prestoreTime: '预存时间',
+      receiptId: '收据ID',
+      selectPrint: '请选择打印收据'
+    },
+    ownerDetailAccessControl: {
+      objectType: '对象类型',
+      objectName: '对象名称',
+      command: '指令',
+      status: '状态',
+      description: '说明',
+      syncTime: '同步时间',
+      operation: '操作',
+      resync: '重新同步'
+    },
+    ownerDetailAccessControlRecord: {
+      face: '人脸',
+      id: '编号',
+      deviceName: '设备名称',
+      deviceCode: '设备编码',
+      userName: '用户名称',
+      openType: '开门方式',
+      phone: '手机号',
+      idCard: '用户身份证',
+      similarity: '相似度',
+      openStatus: '开门状态',
+      openTime: '开门时间',
+      other: '其他',
+      success: '开门成功',
+      failed: '开门失败'
+    },
+    ownerDetailChargeMachineOrder: {
+      id: '编号',
+      name: '名称',
+      phone: '手机号',
+      charger: '充电桩',
+      slot: '插槽',
+      chargeHours: '充电小时',
+      byAmount: '按量充电',
+      hours: '小时',
+      chargeAmount: '充电量',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      deductionAccount: '扣款账户',
+      hourPrice: '小时电价',
+      deductionAmount: '扣款金额',
+      detail: '明细',
+      socketStatus: '插座状态',
+      stopCharge: '停止充电',
+      description: '说明'
+    },
+    ownerDetailRoom: {
+      pleaseEnterRoomNumber: '请填写房屋编号',
+      roomNumber: '房屋编号',
+      floor: '楼层',
+      type: '类型',
+      area: '建筑/室内面积',
+      rent: '租金',
+      validity: '有效期',
+      roomStatus: '房屋状态',
+      roomArrears: '房屋欠费',
+      updateDaily: '按天更新',
+      checkOut: '退房',
+      businessAcceptance: '业务受理',
+      arrearsSubtotal: '欠费小计',
+      roomNumberPlaceholder: '请输入房屋编号 楼栋-单元-房屋 如1-1-1',
+      deliverRoom: '交房'
+    },
+    ownerDetailCar: {
+      pleaseEnterCarNumber: '请填写车牌号',
+      addCar: '添加车辆',
+      carNumber: '车牌号',
+      licenseType: '车牌类型',
+      temporaryCar: '临时车',
+      carType: '车辆类型',
+      color: '颜色',
+      owner: '业主',
+      parkingSpace: '车位',
+      parkingSpaceReleased: '车位已释放',
+      validityPeriod: '有效期'
+    },
+    ownerDetailHis: {
+      action: '动作',
+      operator: '操作人',
+      operateTime: '操作时间',
+      name: '姓名',
+      gender: '性别',
+      male: '男',
+      female: '女',
+      idCard: '身份证',
+      address: '家庭住址',
+      add: '添加',
+      delete: '删除',
+      modifyNew: '修改(新)',
+      modifyOld: '修改(旧)'
+    },
+    ownerDetailCoupon: {
+      id: '编号',
+      couponName: '优惠券名称',
+      value: '面值',
+      validity: '有效期',
+      userName: '用户名称',
+      phone: '手机号',
+      purpose: '用途',
+      quantity: '数量',
+      unit: '张',
+      status: '状态',
+      unused: '未使用',
+      used: '已使用',
+      effectiveTime: '生效时间'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/system/operateDataLogLang.js b/src/views/system/operateDataLogLang.js
index 416e74b..c61d196 100644
--- a/src/views/system/operateDataLogLang.js
+++ b/src/views/system/operateDataLogLang.js
@@ -53,21 +53,6 @@ export const messages = {
       modifyNew: 'modify(new)',
       modifyOld: 'modify(old)'
     },
-    ownerDetailHis: {
-      operate: 'action',
-      userName: 'operator',
-      createTime: 'create time',
-      name: 'name',
-      sex: 'sex',
-      male: 'male',
-      female: 'female',
-      idCard: 'id card',
-      address: 'address',
-      add: 'add',
-      delete: 'delete',
-      modifyNew: 'modify(new)',
-      modifyOld: 'modify(old)'
-    },
     roomDetailHis: {
       operate: 'action',
       userName: 'operator',
@@ -170,21 +155,6 @@ export const messages = {
       modifyNew: '修改(新)',
       modifyOld: '修改(旧)'
     },
-    ownerDetailHis: {
-      operate: '动作',
-      userName: '操作人',
-      createTime: '操作时间',
-      name: '姓名',
-      sex: '性别',
-      male: '男',
-      female: '女',
-      idCard: '身份证',
-      address: '家庭住址',
-      add: '添加',
-      delete: '删除',
-      modifyNew: '修改(新)',
-      modifyOld: '修改(旧)'
-    },
     roomDetailHis: {
       operate: '动作',
       userName: '操作人',
diff --git a/src/views/system/operateDataLogList.vue b/src/views/system/operateDataLogList.vue
index f3f8af4..5b52b7e 100644
--- a/src/views/system/operateDataLogList.vue
+++ b/src/views/system/operateDataLogList.vue
@@ -3,43 +3,32 @@
     <el-card class="search-card">
       <div slot="header" class="clearfix">
         <span>{{ $t('operateDataLog.search.title') }}</span>
-        <el-button 
-          type="text" 
-          style="float: right; padding: 3px 0" 
-          @click="_moreCondition">
+        <el-button type="text" style="float: right; padding: 3px 0" @click="_moreCondition">
           {{ operateDataLogInfo.moreCondition ? $t('common.hide') : $t('common.more') }}
         </el-button>
       </div>
-      
+
       <el-row :gutter="20">
         <el-col :span="6">
-          <el-date-picker
-            v-model="operateDataLogInfo.conditions.logStartTime"
-            type="datetime"
-            :placeholder="$t('operateDataLog.search.logStartTime')"
-            style="width: 100%"
+          <el-date-picker v-model="operateDataLogInfo.conditions.logStartTime" type="datetime"
+            :placeholder="$t('operateDataLog.search.logStartTime')" style="width: 100%"
             value-format="yyyy-MM-dd HH:mm:ss">
           </el-date-picker>
         </el-col>
-        
+
         <el-col :span="6">
-          <el-date-picker
-            v-model="operateDataLogInfo.conditions.logEndTime"
-            type="datetime"
-            :placeholder="$t('operateDataLog.search.logEndTime')"
-            style="width: 100%"
-            value-format="yyyy-MM-dd HH:mm:ss"
+          <el-date-picker v-model="operateDataLogInfo.conditions.logEndTime" type="datetime"
+            :placeholder="$t('operateDataLog.search.logEndTime')" style="width: 100%" value-format="yyyy-MM-dd HH:mm:ss"
             :picker-options="endDateOptions">
           </el-date-picker>
         </el-col>
-        
+
         <el-col :span="6">
-          <el-input
-            v-model="operateDataLogInfo.conditions.staffNameLike"
+          <el-input v-model="operateDataLogInfo.conditions.staffNameLike"
             :placeholder="$t('operateDataLog.search.staffNameLike')">
           </el-input>
         </el-col>
-        
+
         <el-col :span="6">
           <el-button type="primary" @click="_queryDataMethod">
             <i class="el-icon-search"></i>
@@ -53,44 +42,39 @@
       </el-row>
 
       <el-row :gutter="20" v-show="operateDataLogInfo.moreCondition">
-        <el-col :span="6" v-if="operateDataLogInfo._currentTab === 'feeConfigDetailHis' || operateDataLogInfo._currentTab === 'feeDetailHis'">
-          <el-input
-            v-model="operateDataLogInfo.conditions.feeNameLike"
+        <el-col :span="6"
+          v-if="operateDataLogInfo._currentTab === 'feeConfigDetailHis' || operateDataLogInfo._currentTab === 'feeDetailHis'">
+          <el-input v-model="operateDataLogInfo.conditions.feeNameLike"
             :placeholder="$t('operateDataLog.search.feeNameLike')">
           </el-input>
         </el-col>
-        
+
         <el-col :span="6" v-if="operateDataLogInfo._currentTab === 'feeDetailHis'">
-          <el-input
-            v-model="operateDataLogInfo.conditions.payerObjName"
+          <el-input v-model="operateDataLogInfo.conditions.payerObjName"
             :placeholder="$t('operateDataLog.search.payerObjName')">
           </el-input>
         </el-col>
-        
+
         <el-col :span="6" v-if="operateDataLogInfo._currentTab === 'ownerDetailHis'">
-          <el-input
-            v-model="operateDataLogInfo.conditions.ownerNameLike"
+          <el-input v-model="operateDataLogInfo.conditions.ownerNameLike"
             :placeholder="$t('operateDataLog.search.ownerNameLike')">
           </el-input>
         </el-col>
-        
+
         <el-col :span="6" v-if="operateDataLogInfo._currentTab === 'roomDetailHis'">
-          <el-input
-            v-model="operateDataLogInfo.conditions.roomName"
+          <el-input v-model="operateDataLogInfo.conditions.roomName"
             :placeholder="$t('operateDataLog.search.roomName')">
           </el-input>
         </el-col>
-        
+
         <el-col :span="6" v-if="operateDataLogInfo._currentTab === 'carDetailHis'">
-          <el-input
-            v-model="operateDataLogInfo.conditions.carNumLike"
+          <el-input v-model="operateDataLogInfo.conditions.carNumLike"
             :placeholder="$t('operateDataLog.search.carNumLike')">
           </el-input>
         </el-col>
-        
+
         <el-col :span="6" v-if="operateDataLogInfo._currentTab === 'contractDetailChange'">
-          <el-input
-            v-model="operateDataLogInfo.conditions.contractCode"
+          <el-input v-model="operateDataLogInfo.conditions.contractCode"
             :placeholder="$t('operateDataLog.search.contractCode')">
           </el-input>
         </el-col>
@@ -116,7 +100,7 @@
 import { getCommunityId } from '@/api/community/communityApi'
 import FeeConfigDetailHis from '@/components/system/feeConfigDetailHis'
 import FeeDetailHis from '@/components/system/feeDetailHis'
-import OwnerDetailHis from '@/components/system/ownerDetailHis'
+import OwnerDetailHis from '@/components/owner/ownerDetailHis'
 import RoomDetailHis from '@/components/system/roomDetailHis'
 import CarDetailHis from '@/components/system/carDetailHis'
 import ContractDetailChange from '@/components/system/contractDetailChange'