运营加入房屋详情页面

wuxw
1 parent 8c078200
Showing 34 changed files with 1964 additions and 7 deletions
src/api/aCommunity/aRoomDetailCarApi.js
src/api/aCommunity/aRoomDetailCarFeeApi.js
src/api/aCommunity/aRoomDetailComplaintApi.js
src/api/aCommunity/aRoomDetailContractApi.js
src/api/aCommunity/aRoomDetailHisOwnerApi.js
src/api/aCommunity/aRoomDetailMemberApi.js
src/api/aCommunity/aRoomDetailRepairApi.js
src/api/aCommunity/adminRoomDetailApi.js
src/components/aCommunity/aRoomDetailCar.vue
src/components/aCommunity/aRoomDetailCarDemo.vue
src/components/aCommunity/aRoomDetailCarFee.vue
src/components/aCommunity/aRoomDetailCarFeeDemo.vue
src/components/aCommunity/aRoomDetailComplaint.vue
src/components/aCommunity/aRoomDetailComplaintDemo.vue
src/components/aCommunity/aRoomDetailContract.vue
src/components/aCommunity/aRoomDetailContractDemo.vue
src/components/aCommunity/aRoomDetailHisOwner.vue
src/components/aCommunity/aRoomDetailHisOwnerDemo.vue
src/components/aCommunity/aRoomDetailMember.vue
src/components/aCommunity/aRoomDetailMemberDemo.vue
+import request from '@/utils/request'
+
+export function queryAdminOwnerCars(params) {
+  return request({
+    url: '/owner.queryAdminOwnerCars',
+    method: 'get',
+    params
+  }).then(res => {
+    return res.data
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function listAdminFee(params) {
+  return request({
+    url: '/fee.listAdminFee',
+    method: 'get',
+    params
+  }).then(res => {
+    return res.data
+  })
+}
+
+export function queryAdminOwnerCars(params) {
+  return request({
+    url: '/owner.queryAdminOwnerCars',
+    method: 'get',
+    params
+  }).then(res => {
+    return res.data
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function listAdminComplaints(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/complaint.listAdminComplaints',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to get complaint list'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function queryAdminOwnerContract(params) {
+  return request({
+    url: '/contract.queryAdminOwnerContract',
+    method: 'get',
+    params
+  }).then(res => {
+    return res.data
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function queryAdminRoomHisOwner(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryAdminRoomHisOwner',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to get owner history'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function queryAdminOwnerMembers(params) {
+  return request({
+    url: '/owner.queryAdminOwnerMembers',
+    method: 'get',
+    params
+  }).then(res => {
+    return res.data
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function listAdminOwnerRepairs(params) {
+  return request({
+    url: '/ownerRepair.listAdminOwnerRepairs',
+    method: 'get',
+    params
+  }).then(res => {
+    return res.data
+  })
+} 
 \ No newline at end of file
+import request from '@/utils/request'
+
+// 获取房屋详情
+export function getRoomDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/room.queryAdminRoom',
+      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 getOwnerInfo(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryOwner',
+      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 getMemberList(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/member.queryMember',
+      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 getCarList(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/car.queryCar',
+      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
+<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="aRoomDetailCarInfo.carNum" type="text"
+          :placeholder="$t('aRoomDetailCar.placeholderCarNum')"></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="_qureyARoomDetailCar()">
+          <i class="el-icon-search"></i>{{ $t('common.search') }}
+        </el-button>
+      </el-col>
+      <el-col :span="16" class="text-right"></el-col>
+    </el-row>
+    <div class="margin-top">
+      <el-table :data="aRoomDetailCarInfo.cars" style="width: 100%">
+        <el-table-column prop="carNum" :label="$t('aRoomDetailCar.carNum')" align="center"></el-table-column>
+        <el-table-column prop="leaseType" :label="$t('aRoomDetailCar.leaseType')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.leaseType == 'T' ? $t('aRoomDetailCar.tempCar') : scope.row.leaseTypeName }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="carTypeName" :label="$t('aRoomDetailCar.carType')" align="center"></el-table-column>
+        <el-table-column prop="carColor" :label="$t('aRoomDetailCar.color')" align="center"></el-table-column>
+        <el-table-column prop="ownerName" :label="$t('aRoomDetailCar.owner')" align="center">
+          <template slot-scope="scope">{{ scope.row.ownerName }}({{ scope.row.link }})</template>
+        </el-table-column>
+        <el-table-column prop="areaNum" :label="$t('aRoomDetailCar.parkingSpace')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.areaNum && scope.row.state == '1001' ? `${scope.row.areaNum}-${scope.row.num}` :
+              $t('aRoomDetailCar.released')}}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('aRoomDetailCar.validity')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.startTime }}<br />~{{ scope.row.endTime }}
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-row>
+        <el-col :span="16" :offset="8">
+          <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
+            layout="total, prev, pager, next" :total="total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryAdminOwnerCars } from '@/api/aCommunity/aRoomDetailCarApi'
+
+export default {
+  name: 'ARoomDetailCar',
+  data() {
+    return {
+      aRoomDetailCarInfo: {
+        cars: [],
+        ownerId: '',
+        ownerName: '',
+        carNum: '',
+        memberId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  created() {
+  },
+  methods: {
+    open(data) {
+      this.aRoomDetailCarInfo.ownerId = data.ownerId
+      this.aRoomDetailCarInfo.memberId = data.carId
+      this.aRoomDetailCarInfo.ownerName = data.ownerName
+      this._loadARoomDetailCarData(this.currentPage, this.pageSize)
+    },
+    handleSwitch(data) {
+      this.aRoomDetailCarInfo.ownerId = data.ownerId
+      this.aRoomDetailCarInfo.memberId = data.carId
+      this.aRoomDetailCarInfo.ownerName = data.ownerName
+      this._loadARoomDetailCarData(this.currentPage, this.pageSize)
+    },
+    handleNotify() {
+      this._loadARoomDetailCarData(this.currentPage, this.pageSize)
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadARoomDetailCarData(val, this.pageSize)
+    },
+    async _loadARoomDetailCarData(page, row) {
+      try {
+        const res = await queryAdminOwnerCars({
+          ownerId: this.aRoomDetailCarInfo.ownerId,
+          carNum: this.aRoomDetailCarInfo.carNum,
+          memberId: this.aRoomDetailCarInfo.memberId,
+          page,
+          row
+        })
+        this.aRoomDetailCarInfo.cars = res.data
+        this.total = res.records
+      } catch (error) {
+        console.error('请求失败:', error)
+      }
+    },
+    _qureyARoomDetailCar() {
+      this.currentPage = 1
+      this._loadARoomDetailCarData(1, this.pageSize)
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* Same styles as aRoomDetailMember */
+</style>
 \ No newline at end of file
+<template>
+  <a-room-detail-car ref="carComponent" />
+</template>
+
+<script>
+import ARoomDetailCar from './aRoomDetailCar'
+
+export default {
+  components: {
+    ARoomDetailCar
+  },
+  methods: {
+    open(data) {
+      this.$refs.carComponent.handleSwitch(data)
+    },
+    refresh() {
+      this.$refs.carComponent.handleNotify()
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-row class="margin-top">
+      <el-col :span="4" class="text-left">
+        <el-select v-model="aRoomDetailCarFeeInfo.carId" @change="changeARoomDetailCar"
+          :placeholder="$t('aRoomDetailCarFee.selectCar')">
+          <el-option v-for="item in aRoomDetailCarFeeInfo.ownerCars" :key="item.carId" :label="item.carNum"
+            :value="item.carId">
+          </el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="16" class="text-right"></el-col>
+    </el-row>
+    <div>
+      <el-table :data="aRoomDetailCarFeeInfo.fees" style="margin-top:10px">
+        <el-table-column prop="feeName" :label="$t('aRoomDetailCarFee.feeItem')" align="center">
+          <template slot-scope="scope">
+            <span class="hand">{{ scope.row.feeName }}</span>
+            <i class="el-icon-info"></i>
+          </template>
+        </el-table-column>
+        <el-table-column prop="feeFlagName" :label="$t('aRoomDetailCarFee.feeFlag')" align="center"></el-table-column>
+        <el-table-column prop="feeTypeCdName" :label="$t('aRoomDetailCarFee.feeType')" align="center"></el-table-column>
+        <el-table-column prop="amountOwed" :label="$t('aRoomDetailCarFee.amount')" align="center"></el-table-column>
+        <el-table-column prop="startTime" :label="$t('aRoomDetailCarFee.createTime')" align="center"></el-table-column>
+        <el-table-column :label="$t('aRoomDetailCarFee.timeRange')" align="center">
+          <template slot-scope="scope">
+            {{ _getEndTime(scope.row) }}~<br />{{ _getDeadlineTime(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('aRoomDetailCarFee.description')" align="center" width="150">
+          <template slot-scope="scope">
+            <div v-if="scope.row.feeTypeCd == '888800010015' || scope.row.feeTypeCd == '888800010016'">
+              <div>{{ $t('aRoomDetailCarFee.preDegrees') }}:{{ scope.row.preDegrees }}</div>
+              <div>{{ $t('aRoomDetailCarFee.curDegrees') }}:{{ scope.row.curDegrees }}</div>
+              <div>{{ $t('aRoomDetailCarFee.unitPrice') }}:{{ scope.row.squarePrice }}</div>
+              <div>{{ $t('aRoomDetailCarFee.additionalFee') }}:{{ scope.row.additionalAmount }}</div>
+            </div>
+            <div v-else-if="scope.row.feeTypeCd == '888800010017'">
+              <div>{{ $t('aRoomDetailCarFee.algorithm') }}:{{ _getAttrValue(scope.row.feeAttrs, '390005') }}</div>
+              <div>{{ $t('aRoomDetailCarFee.usage') }}:{{ _getAttrValue(scope.row.feeAttrs, '390003') }}</div>
+            </div>
+            <div v-else>
+              <div>{{ $t('aRoomDetailCarFee.unitPrice') }}:{{ scope.row.squarePrice }}</div>
+              <div>{{ $t('aRoomDetailCarFee.fixedFee') }}:{{ scope.row.additionalAmount }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="stateName" :label="$t('aRoomDetailCarFee.state')" align="center"></el-table-column>
+        <el-table-column :label="$t('common.operation')" align="center"></el-table-column>
+      </el-table>
+      <el-row>
+        <el-col :span="12">
+          <div>
+            {{ $t('aRoomDetailCarFee.note1') }}
+          </div>
+          <div>
+            {{ $t('aRoomDetailCarFee.note2') }}
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <span> {{ $t('aRoomDetailCarFee.totalArrears') }}: {{ aRoomDetailCarFeeInfo.totalAmount }}</span>
+        </el-col>
+        <el-col :span="8">
+          <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
+            layout="total, prev, pager, next" :total="total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listAdminFee, queryAdminOwnerCars } from '@/api/aCommunity/aRoomDetailCarFeeApi'
+
+export default {
+  name: 'ARoomDetailCarFee',
+  data() {
+    return {
+      aRoomDetailCarFeeInfo: {
+        fees: [],
+        ownerCars: [],
+        ownerId: '',
+        name: '',
+        carNum: '',
+        carId: '',
+        total: 0,
+        records: 1,
+        areaNum: '',
+        num: '',
+        parkingName: '',
+        totalAmount: 0.0
+      },
+      currentPage: 1,
+      pageSize: 100,
+      total: 0
+    }
+  },
+  created() {
+  },
+  methods: {
+    open(data) {
+      if (!data.ownerId) return
+      this.clearARoomDetailCarFeeInfo()
+      Object.assign(this.aRoomDetailCarFeeInfo, data)
+      this._listOwnerCar()
+        .then(() => {
+          this._listARoomDetailCarFee(this.currentPage, this.pageSize)
+        })
+        .catch(err => {
+          this.$message.error(err)
+        })
+    },
+    handleNotify() {
+      this._listARoomDetailCarFee(this.currentPage, this.pageSize)
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._listARoomDetailCarFee(val, this.pageSize)
+    },
+    async _listARoomDetailCarFee(page, row) {
+      if (!this.aRoomDetailCarFeeInfo.carId) return
+
+      try {
+        const res = await listAdminFee({
+          page,
+          row,
+          payerObjId: this.aRoomDetailCarFeeInfo.carId
+        })
+        this.aRoomDetailCarFeeInfo.fees = res.fees
+        this.total = res.records
+        let totalAmount = 0.0
+        res.fees.forEach(item => {
+          totalAmount += parseFloat(item.amountOwed)
+        })
+        this.aRoomDetailCarFeeInfo.totalAmount = totalAmount
+      } catch (error) {
+        console.error('请求失败:', error)
+      }
+    },
+    _getDeadlineTime(fee) {
+      if (fee.amountOwed == 0 && fee.endTime == fee.deadlineTime) {
+        return "-"
+      }
+      if (fee.state == '2009001') {
+        return "-"
+      }
+      return fee.deadlineTime
+    },
+    _getEndTime(fee) {
+      if (fee.state == '2009001') {
+        return "-"
+      }
+      return fee.endTime
+    },
+    async _listOwnerCar() {
+      return new Promise((resolve, reject) => {
+        queryAdminOwnerCars({
+          page: 1,
+          row: 50,
+          ownerId: this.aRoomDetailCarFeeInfo.ownerId,
+          carTypeCd: '1001',
+        })
+          .then(res => {
+            this.aRoomDetailCarFeeInfo.ownerCars = res.data
+            if (res.data.length > 0) {
+              this.aRoomDetailCarFeeInfo.carId = res.data[0].carId
+              this.aRoomDetailCarFeeInfo.carNum = res.data[0].carNum
+              this.aRoomDetailCarFeeInfo.num = res.data[0].num
+              this.aRoomDetailCarFeeInfo.parkingName = `${res.data[0].areaNum}${this.$t('aRoomDetailCarFee.parkingLot')}${res.data[0].num}${this.$t('aRoomDetailCarFee.parkingSpace')}`
+              resolve(res.data)
+              return
+            }
+            reject(this.$t('aRoomDetailCarFee.noParkingSpace'))
+          })
+          .catch(err => {
+            reject(err)
+          })
+      })
+    },
+    changeARoomDetailCar() {
+      const car = this.aRoomDetailCarFeeInfo.ownerCars.find(item => item.carId == this.aRoomDetailCarFeeInfo.carId)
+      if (!car) return
+
+      this.aRoomDetailCarFeeInfo.carNum = car.carNum
+      this.aRoomDetailCarFeeInfo.num = car.num
+      this.aRoomDetailCarFeeInfo.parkingName = `${car.areaNum}${this.$t('aRoomDetailCarFee.parkingLot')}${car.num}${this.$t('aRoomDetailCarFee.parkingSpace')}`
+      this._listARoomDetailCarFee(this.currentPage, this.pageSize)
+    },
+    clearARoomDetailCarFeeInfo() {
+      this.aRoomDetailCarFeeInfo = {
+        fees: [],
+        ownerCars: [],
+        ownerId: '',
+        name: '',
+        carNum: '',
+        carId: '',
+        total: 0,
+        records: 1,
+        areaNum: '',
+        num: '',
+        parkingName: '',
+        totalAmount: 0.0
+      }
+    },
+    _simplifyCarGetFeeOwnerInfo(attrs) {
+      const ownerName = this._getAttrValue(attrs, '390008')
+      const ownerLink = this._getAttrValue(attrs, '390009')
+      return `${this.$t('aRoomDetailCarFee.owner')}:${ownerName},${this.$t('aRoomDetailCarFee.phone')}:${ownerLink}`
+    },
+    _getAttrValue(attrs, attrId) {
+      if (!attrs) return ''
+      const attr = attrs.find(item => item.attrId == attrId)
+      return attr ? attr.value : ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hand {
+  cursor: pointer;
+}
+
+/* Other styles same as previous components */
+</style>
 \ No newline at end of file
+<template>
+  <a-room-detail-car-fee ref="carFeeComponent" />
+</template>
+
+<script>
+import ARoomDetailCarFee from './aRoomDetailCarFee'
+
+export default {
+  components: {
+    ARoomDetailCarFee
+  },
+  methods: {
+    open(data) {
+      this.$refs.carFeeComponent.handleSwitch(data)
+    },
+    refresh() {
+      this.$refs.carFeeComponent.handleNotify()
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div class="margin-top">
+    <el-table :data="aRoomDetailComplaintInfo.complaints" border style="width: 100%" class="margin-top">
+      <el-table-column prop="typeCdName" :label="$t('aRoomDetailComplaint.type')" align="center" />
+      <el-table-column :label="$t('aRoomDetailComplaint.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('aRoomDetailComplaint.contact')" align="center" />
+      <el-table-column prop="tel" :label="$t('aRoomDetailComplaint.phone')" align="center" />
+      <el-table-column prop="stateName" :label="$t('aRoomDetailComplaint.status')" align="center" />
+      <el-table-column :label="$t('aRoomDetailComplaint.handler')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.currentUserName || $t('aRoomDetailComplaint.none') }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('aRoomDetailComplaint.handlerPhone')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.currentUserTel || $t('aRoomDetailComplaint.none') }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" :label="$t('aRoomDetailComplaint.createTime')" align="center" />
+      <el-table-column :label="$t('aRoomDetailComplaint.actions')" align="center" width="180">
+        <template slot-scope="scope">
+          <el-button size="mini" @click="handleOpenComplaintDetail(scope.row)">
+            {{ $t('aRoomDetailComplaint.detail') }}
+          </el-button>
+          <el-button size="mini" @click="handleOpenWorkflowImage(scope.row)">
+            {{ $t('aRoomDetailComplaint.flowChart') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-row class="margin-top">
+      <el-col :span="24" class="text-right">
+        <el-pagination @current-change="handlePageChange" :current-page="pagination.currentPage"
+          :page-size="pagination.pageSize" layout="total, prev, pager, next" :total="pagination.total" />
+      </el-col>
+    </el-row>
+
+    <complaint-detail ref="complaintDetail" />
+    <view-image ref="viewImage" />
+  </div>
+</template>
+
+<script>
+import { listAdminComplaints } from '@/api/aCommunity/aRoomDetailComplaintApi'
+import ComplaintDetail from '@/components/oa/complaintDetail'
+import ViewImage from '@/components/system/viewImage'
+
+export default {
+  name: 'ARoomDetailComplaint',
+  components: {
+    ComplaintDetail,
+    ViewImage
+  },
+  data() {
+    return {
+      aRoomDetailComplaintInfo: {
+        complaints: [],
+        ownerId: '',
+        name: '',
+        currentAppUserId: ''
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.aRoomDetailComplaintInfo.ownerId = data.ownerId
+      this.loadComplaintData()
+    },
+    loadComplaintData() {
+      const params = {
+        memberId: this.aRoomDetailComplaintInfo.ownerId,
+        page: this.pagination.currentPage,
+        row: this.pagination.pageSize
+      }
+
+      listAdminComplaints(params).then(response => {
+        this.aRoomDetailComplaintInfo.complaints = response.data
+        this.pagination.total = response.records
+      }).catch(error => {
+        console.error('Failed to load complaints:', error)
+      })
+    },
+    handlePageChange(currentPage) {
+      this.pagination.currentPage = currentPage
+      this.loadComplaintData()
+    },
+    handleOpenComplaintDetail(complaint) {
+      this.$refs.complaintDetail.open(complaint)
+    },
+    handleOpenWorkflowImage(complaint) {
+      this.$refs.viewImage.open(complaint.workflowImageUrl)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.text-right {
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+<template>
+  <a-room-detail-complaint ref="complaintComponent" />
+</template>
+
+<script>
+import ARoomDetailComplaint from './aRoomDetailComplaint'
+
+export default {
+  components: {
+    ARoomDetailComplaint
+  },
+  methods: {
+    open(ownerId) {
+      this.$refs.complaintComponent.handleSwitch({ ownerId })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div class="margin-top">
+    <div class="margin-top">
+      <el-table :data="aRoomDetailContractInfo.contracts" style="width: 100%">
+        <el-table-column prop="contractName" :label="$t('aRoomDetailContract.contractName')" align="center"></el-table-column>
+        <el-table-column prop="contractCode" :label="$t('aRoomDetailContract.contractCode')" align="center"></el-table-column>
+        <el-table-column prop="parentContractCode" :label="$t('aRoomDetailContract.parentContractCode')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.parentContractCode || '-'}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="contractTypeName" :label="$t('aRoomDetailContract.contractType')" align="center"></el-table-column>
+        <el-table-column prop="operator" :label="$t('aRoomDetailContract.operator')" align="center"></el-table-column>
+        <el-table-column prop="amount" :label="$t('aRoomDetailContract.amount')" align="center"></el-table-column>
+        <el-table-column prop="startTime" :label="$t('aRoomDetailContract.startTime')" align="center"></el-table-column>
+        <el-table-column prop="endTime" :label="$t('aRoomDetailContract.endTime')" align="center"></el-table-column>
+        <el-table-column prop="createTime" :label="$t('aRoomDetailContract.createTime')" align="center"></el-table-column>
+        <el-table-column prop="stateName" :label="$t('aRoomDetailContract.state')" align="center"></el-table-column>
+      </el-table>
+      <el-row>
+        <el-col :span="16" :offset="8">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            layout="total, prev, pager, next"
+            :total="total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryAdminOwnerContract } from '@/api/aCommunity/aRoomDetailContractApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ARoomDetailContract',
+  data() {
+    return {
+      aRoomDetailContractInfo: {
+        contracts: [],
+        ownerId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(data) {
+      this.aRoomDetailContractInfo.ownerId = data.ownerId
+      this._loadARoomDetailContractData(this.currentPage, this.pageSize)
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadARoomDetailContractData(val, this.pageSize)
+    },
+    async _loadARoomDetailContractData(page, row) {
+      try {
+        const res = await queryAdminOwnerContract({
+          communityId: this.communityId,
+          ownerId: this.aRoomDetailContractInfo.ownerId,
+          page,
+          row
+        })
+        this.aRoomDetailContractInfo.contracts = res.data
+        this.total = res.records
+      } catch (error) {
+        console.error('请求失败:', error)
+      }
+    },
+    _qureyARoomDetailContract() {
+      this.currentPage = 1
+      this._loadARoomDetailContractData(1, this.pageSize)
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* Same styles as aRoomDetailMember */
+</style>
 \ No newline at end of file
+<template>
+  <a-room-detail-contract ref="contractComponent" />
+</template>
+
+<script>
+import ARoomDetailContract from './aRoomDetailContract'
+
+export default {
+  components: {
+    ARoomDetailContract
+  },
+  methods: {
+    open(ownerId) {
+      this.$refs.contractComponent.handleSwitch({ ownerId })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-table
+      :data="aRoomDetailHisOwnerInfo.owners"
+      border
+      style="width: 100%; margin-top: 10px"
+    >
+      <el-table-column prop="name" :label="$t('aRoomDetailHisOwner.ownerName')" align="center" />
+      <el-table-column prop="link" :label="$t('aRoomDetailHisOwner.ownerPhone')" align="center" />
+      <el-table-column prop="startTime" :label="$t('aRoomDetailHisOwner.startTime')" align="center" />
+      <el-table-column prop="endTime" :label="$t('aRoomDetailHisOwner.endTime')" align="center" />
+      <el-table-column prop="createTime" :label="$t('aRoomDetailHisOwner.createTime')" align="center" />
+      <el-table-column :label="$t('aRoomDetailHisOwner.status')" align="center">
+        <template slot-scope="scope">
+          {{scope.row.statusCd === '0' ? $t('aRoomDetailHisOwner.active') : $t('aRoomDetailHisOwner.inactive')}}
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-row class="margin-top">
+      <el-col :span="24" class="text-right">
+        <el-pagination
+          @current-change="handlePageChange"
+          :current-page="pagination.currentPage"
+          :page-size="pagination.pageSize"
+          layout="total, prev, pager, next"
+          :total="pagination.total"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { queryAdminRoomHisOwner } from '@/api/aCommunity/aRoomDetailHisOwnerApi'
+
+export default {
+  name: 'ARoomDetailHisOwner',
+  data() {
+    return {
+      aRoomDetailHisOwnerInfo: {
+        owners: [],
+        ownerId: '',
+        roomId: ''
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      if (!data.roomId) return
+      this.clearData()
+      this.aRoomDetailHisOwnerInfo.roomId = data.roomId
+      this.loadOwnerData()
+    },
+    loadOwnerData() {
+      const params = {
+        page: this.pagination.currentPage,
+        row: this.pagination.pageSize,
+        roomId: this.aRoomDetailHisOwnerInfo.roomId
+      }
+
+      queryAdminRoomHisOwner(params).then(response => {
+        this.aRoomDetailHisOwnerInfo.owners = response.data
+        this.pagination.total = response.records
+      }).catch(error => {
+        console.error('Failed to load owner history:', error)
+      })
+    },
+    handlePageChange(currentPage) {
+      this.pagination.currentPage = currentPage
+      this.loadOwnerData()
+    },
+    clearData() {
+      this.aRoomDetailHisOwnerInfo = {
+        owners: [],
+        ownerId: '',
+        roomId: ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+.text-right {
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+<template>
+  <a-room-detail-his-owner ref="hisOwnerComponent" />
+</template>
+
+<script>
+import ARoomDetailHisOwner from './aRoomDetailHisOwner'
+
+export default {
+  components: {
+    ARoomDetailHisOwner
+  },
+  methods: {
+    open(data) {
+      this.$refs.hisOwnerComponent.handleSwitch(data)
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<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="aRoomDetailMemberInfo.name" type="text"
+          :placeholder="$t('aRoomDetailMember.placeholderName')"></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="_qureyARoomDetailMember()">
+          <i class="el-icon-search"></i>{{ $t('common.search') }}
+        </el-button>
+      </el-col>
+      <el-col :span="16" class="text-right"></el-col>
+    </el-row>
+    <div class="margin-top">
+      <el-table :data="aRoomDetailMemberInfo.members" style="width: 100%">
+        <el-table-column prop="faceUrl" :label="$t('aRoomDetailMember.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('aRoomDetailMember.name')" align="center"></el-table-column>
+        <el-table-column prop="sex" :label="$t('aRoomDetailMember.sex')" 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('aRoomDetailMember.personRole')"
+          align="center"></el-table-column>
+        <el-table-column prop="idCard" :label="$t('aRoomDetailMember.idCard')" align="center"></el-table-column>
+        <el-table-column prop="link" :label="$t('aRoomDetailMember.contact')" align="center"></el-table-column>
+        <el-table-column prop="address" :label="$t('aRoomDetailMember.address')" align="center"></el-table-column>
+      </el-table>
+      <el-row>
+        <el-col :span="16" :offset="8">
+          <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
+            layout="total, prev, pager, next" :total="total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryAdminOwnerMembers } from '@/api/aCommunity/aRoomDetailMemberApi'
+
+export default {
+  name: 'ARoomDetailMember',
+  data() {
+    return {
+      aRoomDetailMemberInfo: {
+        members: [],
+        ownerId: '',
+        name: '',
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  created() {
+  },
+  methods: {
+    open(data) {
+      this.aRoomDetailMemberInfo.ownerId = data.ownerId
+      this._loadARoomDetailMemberData(this.currentPage, this.pageSize)
+    },
+    handleSwitch(data) {
+      this.aRoomDetailMemberInfo.ownerId = data.ownerId
+      this._loadARoomDetailMemberData(this.currentPage, this.pageSize)
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadARoomDetailMemberData(val, this.pageSize)
+    },
+    async _loadARoomDetailMemberData(page, row) {
+      if (!this.aRoomDetailMemberInfo.ownerId) return
+
+      try {
+        const res = await queryAdminOwnerMembers({
+          ownerId: this.aRoomDetailMemberInfo.ownerId,
+          name: this.aRoomDetailMemberInfo.name,
+          page,
+          row
+        })
+        this.aRoomDetailMemberInfo.members = res.data
+        this.total = res.records
+      } catch (error) {
+        console.error('请求失败:', error)
+      }
+    },
+    _qureyARoomDetailMember() {
+      this.currentPage = 1
+      this._loadARoomDetailMemberData(1, this.pageSize)
+    },
+    _viewOwnerFace(url) {
+      this.$emit('viewImage', url)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.margin-top-lg {
+  margin-top: 30px;
+}
+
+.padding-right-xs {
+  padding-right: 10px;
+}
+
+.padding-left-xl {
+  padding-left: 20px;
+}
+
+.border-radius {
+  border-radius: 4px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <a-room-detail-member ref="memberComponent" @viewImage="handleViewImage" />
+</template>
+
+<script>
+import ARoomDetailMember from './aRoomDetailMember'
+
+export default {
+  components: {
+    ARoomDetailMember
+  },
+  methods: {
+    open(ownerId) {
+      this.$refs.memberComponent.handleSwitch({ ownerId })
+    },
+    handleViewImage(url) {
+      // Handle image view
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div class="margin-top">
+    <div class="margin-top">
+      <el-table :data="aRoomDetailRepairInfo.repairs" style="width: 100%">
+        <el-table-column prop="repairId" :label="$t('aRoomDetailRepair.repairId')" align="center"></el-table-column>
+        <el-table-column prop="repairObjName" :label="$t('aRoomDetailRepair.location')" align="center"></el-table-column>
+        <el-table-column prop="repairTypeName" :label="$t('aRoomDetailRepair.repairType')" align="center"></el-table-column>
+        <el-table-column prop="repairName" :label="$t('aRoomDetailRepair.repairPerson')" align="center"></el-table-column>
+        <el-table-column prop="tel" :label="$t('aRoomDetailRepair.contact')" align="center"></el-table-column>
+        <el-table-column prop="appointmentTime" :label="$t('aRoomDetailRepair.appointmentTime')" align="center"></el-table-column>
+        <el-table-column prop="stateName" :label="$t('aRoomDetailRepair.state')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.state == '1800' && (scope.row.returnVisitFlag == '001' || scope.row.returnVisitFlag == '002') ? 
+              `${scope.row.stateName}(${$t('aRoomDetailRepair.taskProcessing')})` : scope.row.stateName}}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('common.operation')" align="center">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="_openRepairDetail(scope.row)">
+              {{$t('common.detail')}}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-row>
+        <el-col :span="16" :offset="8">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            layout="total, prev, pager, next"
+            :total="total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listAdminOwnerRepairs } from '@/api/aCommunity/aRoomDetailRepairApi'
+
+export default {
+  name: 'ARoomDetailRepair',
+  data() {
+    return {
+      aRoomDetailRepairInfo: {
+        repairs: [],
+        ownerId: '',
+        link: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  created() {
+    },
+  methods: {
+    open(data) {
+      this.aRoomDetailRepairInfo.ownerId = data.ownerId
+      this.aRoomDetailRepairInfo.link = data.link
+      this._loadARoomDetailRepairData(this.currentPage, this.pageSize)
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadARoomDetailRepairData(val, this.pageSize)
+    },
+    async _loadARoomDetailRepairData(page, row) {
+      try {
+        const res = await listAdminOwnerRepairs({
+          tel: this.aRoomDetailRepairInfo.link,
+          page,
+          row
+        })
+        this.aRoomDetailRepairInfo.repairs = res.data
+        this.total = res.records
+      } catch (error) {
+        console.error('请求失败:', error)
+      }
+    },
+    _qureyARoomDetailRepair() {
+      this.currentPage = 1
+      this._loadARoomDetailRepairData(1, this.pageSize)
+    },
+    _openRepairDetail(repairPool) {
+      this.$router.push(`/pages/property/ownerRepairDetail?repairId=${repairPool.repairId}`)
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* Same styles as previous components */
+</style>
 \ No newline at end of file
+<template>
+  <a-room-detail-repair ref="repairComponent" />
+</template>
+
+<script>
+import ARoomDetailRepair from './aRoomDetailRepair'
+
+export default {
+  components: {
+    ARoomDetailRepair
+  },
+  methods: {
+    open(data) {
+      this.$refs.repairComponent.handleSwitch(data)
+    }
+  }
+}
+</script>
 \ No newline at end of file
@@ -7,6 +7,7 @@ import { messages as addCommunityPublicityMessages } from &#39;../views/community/ad
 import { messages as editCommunityPublicityMessages } from '../views/community/editCommunityPublicityLang'
 import { messages as handoverMessages } from '../views/room/handoverLang'
 import { messages as ownerExitRoomMessages } from '../views/room/ownerExitRoomLang'
+import { messages as adminRoomDetailMessages } from '../views/aCommunity/adminRoomDetailLang.js'
 export const messages = {
     en: {
         ...roomStructureMessages.en,
@@ -18,6 +19,7 @@ export const messages = {
         ...editCommunityPublicityMessages.en,
         ...handoverMessages.en,
         ...ownerExitRoomMessages.en,
+        ...adminRoomDetailMessages.en,
     },
     zh: {
         ...roomStructureMessages.zh,
@@ -29,5 +31,6 @@ export const messages = {
         ...editCommunityPublicityMessages.zh,
         ...handoverMessages.zh,
         ...ownerExitRoomMessages.zh,
+        ...adminRoomDetailMessages.zh,
     }
 }
 \ No newline at end of file
@@ -44,4 +44,9 @@ export default [
         name: '/views/room/ownerExitRoom',
         component: () => import('@/views/room/ownerExitRoomList.vue')
     },
+    {
+        path: '/pages/community/adminRoomDetail',
+        name: '/pages/community/adminRoomDetail',
+        component: () => import('@/views/aCommunity/adminRoomDetail.vue')
+    },
 ]
 \ No newline at end of file
+export const messages = {
+  en: {
+    aRoomDetailCarFee: {
+      selectCar: 'Select Car',
+      feeItem: 'Fee Item',
+      feeFlag: 'Fee Flag',
+      feeType: 'Fee Type',
+      amount: 'Amount',
+      createTime: 'Create Time',
+      timeRange: 'Time Range',
+      description: 'Description',
+      state: 'Status',
+      operation: 'Operation',
+      preDegrees: 'Previous Degrees',
+      curDegrees: 'Current Degrees',
+      unitPrice: 'Unit Price',
+      additionalFee: 'Additional Fee',
+      algorithm: 'Algorithm',
+      usage: 'Usage',
+      fixedFee: 'Fixed Fee',
+      note1: 'Note: The end time "-" means the charging time has not arrived or the charging has ended',
+      note2: 'Note: The amount -1 generally means an error in the fee formula setting, please check',
+      totalArrears: 'Total Arrears',
+      parkingLot: ' Parking Lot ',
+      parkingSpace: ' Parking Space',
+      owner: 'Owner',
+      phone: 'Phone',
+      noParkingSpace: 'No parking space'
+    }
+  },
+  zh: {
+    aRoomDetailCarFee: {
+      selectCar: '选择车辆',
+      feeItem: '费用项目',
+      feeFlag: '费用标识',
+      feeType: '费用类型',
+      amount: '应收金额',
+      createTime: '建账时间',
+      timeRange: '应收时间段',
+      description: '说明',
+      state: '状态',
+      operation: '操作',
+      preDegrees: '上期度数',
+      curDegrees: '本期度数',
+      unitPrice: '单价',
+      additionalFee: '附加费',
+      algorithm: '算法',
+      usage: '用量',
+      fixedFee: '固定费',
+      note1: '注意： 应收结束时间 "-" 表示未到应收时间 或 收费已结束',
+      note2: '注意： 应收金额 为-1 一般为费用项公式设置出错请检查',
+      totalArrears: '欠费小计',
+      parkingLot: '停车场',
+      parkingSpace: '停车位',
+      owner: '业主',
+      phone: '电话',
+      noParkingSpace: '没有车位'
+    }
+  }
+}
 \ No newline at end of file
+export const messages = {
+  en: {
+    aRoomDetailCar: {
+      placeholderCarNum: 'Please enter license plate number',
+      carNum: 'License Plate',
+      leaseType: 'Plate Type',
+      tempCar: 'Temporary Car',
+      carType: 'Vehicle Type',
+      color: 'Color',
+      owner: 'Owner',
+      parkingSpace: 'Parking Space',
+      released: 'Released',
+      validity: 'Validity'
+    }
+  },
+  zh: {
+    aRoomDetailCar: {
+      placeholderCarNum: '请填写车牌号',
+      carNum: '车牌号',
+      leaseType: '车牌类型',
+      tempCar: '临时车',
+      carType: '车辆类型',
+      color: '颜色',
+      owner: '业主',
+      parkingSpace: '车位',
+      released: '车位已释放',
+      validity: '有效期'
+    }
+  }
+}
 \ No newline at end of file
+export const messages = {
+  en: {
+    aRoomDetailComplaint: {
+      type: 'Type',
+      room: 'Room',
+      contact: 'Contact',
+      phone: 'Phone',
+      status: 'Status',
+      handler: 'Handler',
+      handlerPhone: 'Handler Phone',
+      createTime: 'Create Time',
+      actions: 'Actions',
+      detail: 'Detail',
+      flowChart: 'Flow Chart',
+      none: 'None'
+    }
+  },
+  zh: {
+    aRoomDetailComplaint: {
+      type: '类型',
+      room: '房屋',
+      contact: '联系人',
+      phone: '联系电话',
+      status: '状态',
+      handler: '处理人',
+      handlerPhone: '处理人电话',
+      createTime: '创建时间',
+      actions: '操作',
+      detail: '详情',
+      flowChart: '流程图',
+      none: '无'
+    }
+  }
+}
 \ No newline at end of file
+export const messages = {
+  en: {
+    aRoomDetailContract: {
+      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',
+      state: 'Status'
+    }
+  },
+  zh: {
+    aRoomDetailContract: {
+      contractName: '合同名称',
+      contractCode: '合同编号',
+      parentContractCode: '父合同编号',
+      contractType: '合同类型',
+      operator: '经办人',
+      amount: '合同金额',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      createTime: '起草时间',
+      state: '状态'
+    }
+  }
+}
 \ No newline at end of file
+export const messages = {
+  en: {
+    aRoomDetailHisOwner: {
+      ownerName: 'Owner Name',
+      ownerPhone: 'Owner Phone',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      createTime: 'Create Time',
+      status: 'Status',
+      active: 'Active',
+      inactive: 'Inactive'
+    }
+  },
+  zh: {
+    aRoomDetailHisOwner: {
+      ownerName: '业主名称',
+      ownerPhone: '业主电话',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      createTime: '创建时间',
+      status: '状态',
+      active: '在用',
+      inactive: '失效'
+    }
+  }
+}
 \ No newline at end of file
+export const messages = {
+  en: {
+    aRoomDetailMember: {
+      placeholderName: 'Please enter member name',
+      face: 'Face',
+      name: 'Name',
+      sex: 'Gender',
+      personRole: 'Person Role',
+      idCard: 'ID Card',
+      contact: 'Contact',
+      address: 'Address'
+    }
+  },
+  zh: {
+    aRoomDetailMember: {
+      placeholderName: '请填写成员名称',
+      face: '人脸',
+      name: '名称',
+      sex: '性别',
+      personRole: '人员角色',
+      idCard: '身份证',
+      contact: '联系方式',
+      address: '地址'
+    }
+  }
+}
 \ No newline at end of file
+export const messages = {
+  en: {
+    aRoomDetailRepair: {
+      repairId: 'Work Order Code',
+      location: 'Location',
+      repairType: 'Repair Type',
+      repairPerson: 'Repair Person',
+      contact: 'Contact',
+      appointmentTime: 'Appointment Time',
+      state: 'Status',
+      taskProcessing: 'Task Processing',
+      detail: 'Detail'
+    }
+  },
+  zh: {
+    aRoomDetailRepair: {
+      repairId: '工单编码',
+      location: '位置',
+      repairType: '报修类型',
+      repairPerson: '报修人',
+      contact: '联系方式',
+      appointmentTime: '预约时间',
+      state: '状态',
+      taskProcessing: '定时任务处理',
+      detail: '详情'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="white-bg padding-lg padding-top border-radius">
+    <div class="flex justify-between">
+      <div class="text-title">{{ $t('adminRoomDetail.title') }}</div>
+      <div>
+        <el-button type="primary" size="small" style="margin-left:10px" @click="goBack">
+          <i class="el-icon-close"></i>{{ $t('adminRoomDetail.back') }}
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 房屋信息 -->
+    <div class="margin-top">
+      <el-row style="min-height: 160px;">
+        <el-col :span="24">
+          <el-form class="text-left">
+            <el-row>
+              <el-col :span="6">
+                <el-form-item :label="$t('adminRoomDetailInfo.roomCode')">
+                  <label>{{ adminRoomDetailInfo.floorNum }}-{{ adminRoomDetailInfo.unitNum }}-{{
+                    adminRoomDetailInfo.roomNum }}</label>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('adminRoomDetailInfo.floor')">
+                  <label>{{ adminRoomDetailInfo.layer }}</label>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('adminRoomDetailInfo.roomArea')">
+                  <label>{{ adminRoomDetailInfo.builtUpArea }}</label>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('adminRoomDetailInfo.roomType')">
+                  <label>{{ adminRoomDetailInfo.roomSubTypeName }}</label>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('adminRoomDetailInfo.roomStatus')">
+                  <label>{{ adminRoomDetailInfo.stateName }}</label>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('adminRoomDetailInfo.indoorArea')">
+                  <label>{{ adminRoomDetailInfo.roomArea }}</label>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('adminRoomDetailInfo.rent')">
+                  <label>{{ adminRoomDetailInfo.roomRent }}</label>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('adminRoomDetailInfo.validity')">
+                  <label>{{ adminRoomDetailInfo.startTime }}~{{ adminRoomDetailInfo.endTime }}</label>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('adminRoomDetailInfo.ownerName')">
+                  <label>{{ adminRoomDetailInfo.ownerName }}</label>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('adminRoomDetailInfo.contact')">
+                  <label>{{ adminRoomDetailInfo.link }}</label>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item :label="$t('adminRoomDetailInfo.remark')">
+                  <label>{{ adminRoomDetailInfo.remark }}</label>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item :label="$t('adminRoomDetailInfo.communityName')">
+                  <label>{{ adminRoomDetailInfo.communityName }}</label>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </el-col>
+      </el-row>
+    </div>
+
+    <divider></divider>
+
+    <div class="margin-top-sm">
+      <el-tabs v-model="adminRoomDetailInfo._currentTab" @tab-click="handleTabClick(adminRoomDetailInfo._currentTab)">
+        <el-tab-pane :label="$t('adminRoomDetail.owner')" name="aRoomDetailOwner"></el-tab-pane>
+        <el-tab-pane v-if="adminRoomDetailInfo.ownerId" :label="$t('adminRoomDetail.member')" name="aRoomDetailMember">
+        </el-tab-pane>
+        <el-tab-pane v-if="adminRoomDetailInfo.ownerId" :label="$t('adminRoomDetail.ownerRoom')" name="aRoomDetailRoom">
+        </el-tab-pane>
+        <el-tab-pane v-if="adminRoomDetailInfo.ownerId" :label="$t('adminRoomDetail.ownerCar')" name="aRoomDetailCar">
+        </el-tab-pane>
+        <el-tab-pane v-if="adminRoomDetailInfo.ownerId" :label="$t('adminRoomDetail.contract')"
+          name="aRoomDetailContract">
+        </el-tab-pane>
+        <el-tab-pane :label="$t('adminRoomDetail.roomFee')" name="aRoomDetailRoomFee">
+        </el-tab-pane>
+        <el-tab-pane v-if="adminRoomDetailInfo.ownerId" :label="$t('adminRoomDetail.carFee')" name="aRoomDetailCarFee">
+        </el-tab-pane>
+        <el-tab-pane v-if="adminRoomDetailInfo.ownerId" :label="$t('adminRoomDetail.paymentHistory')"
+          name="aRoomDetailHisFee">
+        </el-tab-pane>
+        <el-tab-pane v-if="adminRoomDetailInfo.ownerId" :label="$t('adminRoomDetail.receipt')"
+          name="aRoomDetailReceipt">
+        </el-tab-pane>
+        <el-tab-pane v-if="adminRoomDetailInfo.ownerId" :label="$t('adminRoomDetail.repair')" name="aRoomDetailRepair">
+        </el-tab-pane>
+        <el-tab-pane v-if="adminRoomDetailInfo.ownerId" :label="$t('adminRoomDetail.complaint')"
+          name="aRoomDetailComplaint">
+        </el-tab-pane>
+        <el-tab-pane :label="$t('adminRoomDetail.meterReading')" name="aRoomDetailMeterWaterLog">
+        </el-tab-pane>
+        <el-tab-pane :label="$t('adminRoomDetail.historyOwner')" name="aRoomDetailHisOwner">
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <component :is="adminRoomDetailInfo._currentTab" :ref="adminRoomDetailInfo._currentTab"
+      :roomId="adminRoomDetailInfo.roomId" :ownerId="adminRoomDetailInfo.ownerId"
+      :ownerName="adminRoomDetailInfo.ownerName" :link="adminRoomDetailInfo.link"></component>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { getRoomDetail } from '@/api/aCommunity/adminRoomDetailApi'
+import ARoomDetailOwner from '@/components/fee/aRoomDetailOwner'
+import ARoomDetailMember from '@/components/aCommunity/aRoomDetailMember'
+import ARoomDetailRoom from '@/components/fee/aRoomDetailRoom'
+import ARoomDetailCar from '@/components/aCommunity/aRoomDetailCar'
+import ARoomDetailContract from '@/components/aCommunity/aRoomDetailContract'
+import ARoomDetailRoomFee from '@/components/fee/aRoomDetailRoomFee'
+import ARoomDetailCarFee from '@/components/aCommunity/aRoomDetailCarFee'
+import ARoomDetailHisFee from '@/components/fee/aRoomDetailHisFee'
+import ARoomDetailReceipt from '@/components/fee/aRoomDetailReceipt'
+import ARoomDetailRepair from '@/components/aCommunity/aRoomDetailRepair'
+import ARoomDetailComplaint from '@/components/aCommunity/aRoomDetailComplaint'
+import ARoomDetailMeterWaterLog from '@/components/fee/aRoomDetailMeterWaterLog'
+import ARoomDetailHisOwner from '@/components/aCommunity/aRoomDetailHisOwner'
+import Divider from '@/components/system/divider'
+
+export default {
+  components: {
+    ARoomDetailOwner,
+    ARoomDetailMember,
+    ARoomDetailRoom,
+    ARoomDetailCar,
+    ARoomDetailContract,
+    ARoomDetailRoomFee,
+    ARoomDetailCarFee,
+    ARoomDetailHisFee,
+    ARoomDetailReceipt,
+    ARoomDetailRepair,
+    ARoomDetailComplaint,
+    ARoomDetailMeterWaterLog,
+    ARoomDetailHisOwner,
+    Divider
+  },
+  data() {
+    return {
+      adminRoomDetailInfo: {
+        viewOwnerFlag: '',
+        roomId: "",
+        floorNum: '',
+        unitNum: '',
+        roomNum: '',
+        layer: "",
+        builtUpArea: "",
+        roomSubTypeName: "",
+        stateName: "",
+        roomArea: "",
+        roomRent: "",
+        startTime: "",
+        endTime: "",
+        _currentTab: 'aRoomDetailOwner',
+        remark: '',
+        ownerId: '',
+        ownerName: '',
+        link: '',
+        communityId: '',
+        communityName: ''
+      }
+    }
+  },
+  created() {
+    this.adminRoomDetailInfo.roomId = this.$route.query.roomId
+    if (!this.adminRoomDetailInfo.roomId) {
+      return
+    }
+    const currentTab = this.$route.query.currentTab
+    if (currentTab) {
+      this.adminRoomDetailInfo._currentTab = currentTab
+    }
+    this.loadAdminRoomInfo()
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    loadAdminRoomInfo() {
+      getRoomDetail({
+        roomId: this.adminRoomDetailInfo.roomId,
+        page: 1,
+        row: 1
+      }).then(res => {
+        Object.assign(this.adminRoomDetailInfo, res.data[0])
+        
+        this.handleTabClick(this.adminRoomDetailInfo._currentTab)
+      }).catch(err => {
+        console.error('请求失败:', err)
+      })
+    },
+    handleTabClick(tab) {
+      this.adminRoomDetailInfo._currentTab = tab
+      setTimeout(() => {
+        if (this.$refs[tab] && this.$refs[tab].open) {
+          this.$refs[tab].open({
+            roomId: this.adminRoomDetailInfo.roomId,
+            ownerId: this.adminRoomDetailInfo.ownerId,
+            ownerName: this.adminRoomDetailInfo.ownerName,
+            link: this.adminRoomDetailInfo.link
+          })
+        }
+      }, 500)
+    },
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.white-bg {
+  background: #fff;
+}
+
+.padding-lg {
+  padding: 20px;
+}
+
+.padding-top {
+  padding-top: 20px;
+}
+
+.border-radius {
+  border-radius: 4px;
+}
+
+.margin-top {
+  margin-top: 20px;
+}
+
+.margin-top-sm {
+  margin-top: 10px;
+}
+
+.flex {
+  display: flex;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.text-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    adminRoomDetail: {
+      title: 'Room Details',
+      back: 'Back',
+      owner: 'Owner',
+      member: 'Family Member',
+      ownerRoom: 'Owner Room',
+      ownerCar: 'Owner Car',
+      contract: 'Contract',
+      roomFee: 'Room Fee',
+      carFee: 'Car Fee',
+      paymentHistory: 'Payment History',
+      receipt: 'Receipt',
+      repair: 'Repair',
+      complaint: 'Complaint',
+      meterReading: 'Meter Reading',
+      historyOwner: 'History Owner'
+    },
+    adminRoomDetailInfo: {
+      roomCode: 'Room Code:',
+      floor: 'Floor:',
+      roomArea: 'Room Area:',
+      roomType: 'Room Type:',
+      roomStatus: 'Room Status:',
+      indoorArea: 'Indoor Area:',
+      rent: 'Rent:',
+      validity: 'Validity:',
+      ownerName: 'Owner Name:',
+      contact: 'Contact:',
+      remark: 'Remark:',
+      communityName: 'Community Name:'
+    },
+    aRoomDetailMember: {
+      placeholderName: 'Please enter member name',
+      face: 'Face',
+      name: 'Name',
+      sex: 'Gender',
+      personRole: 'Person Role',
+      idCard: 'ID Card',
+      contact: 'Contact',
+      address: 'Address'
+    },
+    aRoomDetailCar: {
+      placeholderCarNum: 'Please enter license plate number',
+      carNum: 'License Plate',
+      leaseType: 'Plate Type',
+      tempCar: 'Temporary Car',
+      carType: 'Vehicle Type',
+      color: 'Color',
+      owner: 'Owner',
+      parkingSpace: 'Parking Space',
+      released: 'Released',
+      validity: 'Validity'
+    },
+    aRoomDetailContract: {
+      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',
+      state: 'Status'
+    },
+    aRoomDetailCarFee: {
+      selectCar: 'Select Car',
+      feeItem: 'Fee Item',
+      feeFlag: 'Fee Flag',
+      feeType: 'Fee Type',
+      amount: 'Amount',
+      createTime: 'Create Time',
+      timeRange: 'Time Range',
+      description: 'Description',
+      state: 'Status',
+      operation: 'Operation',
+      preDegrees: 'Previous Degrees',
+      curDegrees: 'Current Degrees',
+      unitPrice: 'Unit Price',
+      additionalFee: 'Additional Fee',
+      algorithm: 'Algorithm',
+      usage: 'Usage',
+      fixedFee: 'Fixed Fee',
+      note1: 'Note: The end time "-" means the charging time has not arrived or the charging has ended',
+      note2: 'Note: The amount -1 generally means an error in the fee formula setting, please check',
+      totalArrears: 'Total Arrears',
+      parkingLot: ' Parking Lot ',
+      parkingSpace: ' Parking Space',
+      owner: 'Owner',
+      phone: 'Phone',
+      noParkingSpace: 'No parking space'
+    },
+    aRoomDetailRepair: {
+      repairId: 'Work Order Code',
+      location: 'Location',
+      repairType: 'Repair Type',
+      repairPerson: 'Repair Person',
+      contact: 'Contact',
+      appointmentTime: 'Appointment Time',
+      state: 'Status',
+      taskProcessing: 'Task Processing',
+      detail: 'Detail'
+    },
+    aRoomDetailComplaint: {
+      type: 'Type',
+      room: 'Room',
+      contact: 'Contact',
+      phone: 'Phone',
+      status: 'Status',
+      handler: 'Handler',
+      handlerPhone: 'Handler Phone',
+      createTime: 'Create Time',
+      actions: 'Actions',
+      detail: 'Detail',
+      flowChart: 'Flow Chart',
+      none: 'None'
+    },
+    aRoomDetailHisOwner: {
+      ownerName: 'Owner Name',
+      ownerPhone: 'Owner Phone',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      createTime: 'Create Time',
+      status: 'Status',
+      active: 'Active',
+      inactive: 'Inactive'
+    }
+  },
+  zh: {
+    adminRoomDetail: {
+      title: '房屋详情',
+      back: '返回',
+      owner: '业主',
+      member: '家庭成员',
+      ownerRoom: '业主房屋',
+      ownerCar: '业主车辆',
+      contract: '合同',
+      roomFee: '房屋费用',
+      carFee: '车辆费用',
+      paymentHistory: '缴费历史',
+      receipt: '收据',
+      repair: '报修',
+      complaint: '投诉',
+      meterReading: '抄表记录',
+      historyOwner: '历史业主'
+    },
+    adminRoomDetailInfo: {
+      roomCode: '房屋编号：',
+      floor: '楼层：',
+      roomArea: '房屋面积：',
+      roomType: '房屋类型：',
+      roomStatus: '房屋状态：',
+      indoorArea: '室内面积：',
+      rent: '租金：',
+      validity: '有效期：',
+      ownerName: '业主名称：',
+      contact: '联系电话：',
+      remark: '备注：',
+      communityName: '小区名称：'
+    },
+    aRoomDetailMember: {
+      placeholderName: '请填写成员名称',
+      face: '人脸',
+      name: '名称',
+      sex: '性别',
+      personRole: '人员角色',
+      idCard: '身份证',
+      contact: '联系方式',
+      address: '地址'
+    },
+    aRoomDetailCar: {
+      placeholderCarNum: '请填写车牌号',
+      carNum: '车牌号',
+      leaseType: '车牌类型',
+      tempCar: '临时车',
+      carType: '车辆类型',
+      color: '颜色',
+      owner: '业主',
+      parkingSpace: '车位',
+      released: '车位已释放',
+      validity: '有效期'
+    },
+    aRoomDetailContract: {
+      contractName: '合同名称',
+      contractCode: '合同编号',
+      parentContractCode: '父合同编号',
+      contractType: '合同类型',
+      operator: '经办人',
+      amount: '合同金额',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      createTime: '起草时间',
+      state: '状态'
+    },
+    aRoomDetailCarFee: {
+      selectCar: '选择车辆',
+      feeItem: '费用项目',
+      feeFlag: '费用标识',
+      feeType: '费用类型',
+      amount: '应收金额',
+      createTime: '建账时间',
+      timeRange: '应收时间段',
+      description: '说明',
+      state: '状态',
+      operation: '操作',
+      preDegrees: '上期度数',
+      curDegrees: '本期度数',
+      unitPrice: '单价',
+      additionalFee: '附加费',
+      algorithm: '算法',
+      usage: '用量',
+      fixedFee: '固定费',
+      note1: '注意： 应收结束时间 "-" 表示未到应收时间 或 收费已结束',
+      note2: '注意： 应收金额 为-1 一般为费用项公式设置出错请检查',
+      totalArrears: '欠费小计',
+      parkingLot: '停车场',
+      parkingSpace: '停车位',
+      owner: '业主',
+      phone: '电话',
+      noParkingSpace: '没有车位'
+    },
+    aRoomDetailRepair: {
+      repairId: '工单编码',
+      location: '位置',
+      repairType: '报修类型',
+      repairPerson: '报修人',
+      contact: '联系方式',
+      appointmentTime: '预约时间',
+      state: '状态',
+      taskProcessing: '定时任务处理',
+      detail: '详情'
+    },
+    aRoomDetailComplaint: {
+      type: '类型',
+      room: '房屋',
+      contact: '联系人',
+      phone: '联系电话',
+      status: '状态',
+      handler: '处理人',
+      handlerPhone: '处理人电话',
+      createTime: '创建时间',
+      actions: '操作',
+      detail: '详情',
+      flowChart: '流程图',
+      none: '无'
+    },
+    aRoomDetailHisOwner: {
+      ownerName: '业主名称',
+      ownerPhone: '业主电话',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      createTime: '创建时间',
+      status: '状态',
+      active: '在用',
+      inactive: '失效'
+    }
+  }
+}
 <template>
-  <div class="route-container">
+  <div class="route-container padding">
     <!-- 左侧菜单组列表 -->
     <div class="menu-group-wrapper">
       <div class="group-content">
@@ -40,7 +40,8 @@
           <el-table-column prop="orderTypeCd" :label="$t('route.table.orderTypeCd')" />
           <el-table-column :label="$t('common.operation')" width="200" fixed="right">
             <template slot-scope="scope">
-              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">{{ $t('common.delete') }}</el-button>
+              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">{{ $t('common.delete')
+                }}</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -89,7 +90,7 @@ export default {
   },
   created() {
     this.getApps()
-    
+
   },
   methods: {
     async getApps() {
@@ -101,7 +102,7 @@ export default {
         }
         const { apps } = await getAppList(params)
         this.apps = apps
-        if(apps && apps.length>0){
+        if (apps && apps.length > 0) {
           this.searchForm.appId = apps[0].appId
           this.getList()
         }
@@ -136,7 +137,7 @@ export default {
       this.getList()
     },
     handleAdd() {
-      this.$router.push('/views/dev/addRoute?appId='+this.searchForm.appId)
+      this.$router.push('/views/dev/addRoute?appId=' + this.searchForm.appId)
     },
     handleEdit(row) {
       this.currentRow = { ...row }
@@ -167,8 +168,7 @@ export default {
  
 <style lang="scss" scoped>
 .route-container {
-  padding: 0;
-  margin: 0;
+
   display: flex;
   background-color: #f0f2f5;