完成admin下的房屋详情页面，业主详情页面车辆详情页面

wuxw
1 parent f6a81350
Showing 34 changed files with 2287 additions and 109 deletions
src/api/aCommunity/aCarDetailApplySpaceApi.js
src/api/aCommunity/aCarDetailCarInoutApi.js
src/api/aCommunity/aCarDetailFeeApi.js
src/api/aCommunity/aCarDetailHisApi.js
src/api/aCommunity/aCarDetailMemberApi.js
src/api/aCommunity/aCarDetailOwnerApi.js
src/api/aCommunity/aCarDetailTransactionCarApi.js
src/api/aCommunity/adminCarDetailApi.js
src/components/aCommunity/aCarDetailApplySpace.vue
src/components/aCommunity/aCarDetailApplySpaceDemo.vue
src/components/aCommunity/aCarDetailCarInout.vue
src/components/aCommunity/aCarDetailCarInoutDemo.vue
src/components/aCommunity/aCarDetailFee.vue
src/components/aCommunity/aCarDetailFeeDemo.vue
src/components/aCommunity/aCarDetailHis.vue
src/components/aCommunity/aCarDetailHisDemo.vue
src/components/aCommunity/aCarDetailMember.vue
src/components/aCommunity/aCarDetailMemberDemo.vue
src/components/aCommunity/aCarDetailOwner.vue
src/components/aCommunity/aCarDetailOwnerDemo.vue
+import request from '@/utils/request'
+
+export function listAdminParkingSpaceApply(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/parkingSpaceApply.listAdminParkingSpaceApply',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code == 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to get parking space apply'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function getCarInoutDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/iot.getAdminOpenApi',
+      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
+import request from '@/utils/request'
+
+export function listAdminFee(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.listAdminFee',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+        resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function queryAdminHisOwnerCar(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/car.queryAdminHisOwnerCar',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code == 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to get car history'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function queryAdminOwnerCars(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryAdminOwnerCars',
+      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 cars'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function queryAdminOwners(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryAdminOwners',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code == 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to get owners'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function listAdminMachineTranslates(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/machineTranslate.listAdminMachineTranslates',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+        resolve(res)
+
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+// 获取车主车辆信息
+export function getOwnerCarInfo(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryAdminOwnerCars',
+      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 car info'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取车辆费用列表
+export function getCarFeeList(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/carFee.listCarFee',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to get car fee list'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取车辆缴费记录
+export function getCarPaymentHistory(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/payment.listCarPayment',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to get car payment history'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取车辆修改记录
+export function getCarModificationHistory(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/car.listCarModification',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to get car modification history'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 同步车牌信息
+export function syncLicensePlate(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/car.syncLicensePlate',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to sync license plate'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+<template>
+  <div>
+    <el-row>
+      <el-col :span="24" class="text-right"></el-col>
+    </el-row>
+
+    <div class="margin-top">
+      <el-table :data="aCarDetailApplySpaceInfo.applys" style="width: 100%">
+        <el-table-column prop="applyId" :label="$t('carDetailApply.applyId')" align="center"></el-table-column>
+        <el-table-column prop="carNum" :label="$t('carDetailApply.carNum')" align="center"></el-table-column>
+        <el-table-column :label="$t('carDetailApply.parkingSpace')" align="center">
+          <template slot-scope="scope">
+            <span v-if="scope.row.psId != null && scope.row.psId != ''">
+              {{scope.row.areaNum}}{{$t('carDetailApply.parkingLot')}} - {{scope.row.num}}{{$t('carDetailApply.space')}}
+            </span>
+            <span v-else>{{$t('carDetailApply.none')}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="carBrand" :label="$t('carDetailApply.carBrand')" align="center"></el-table-column>
+        <el-table-column :label="$t('carDetailApply.carType')" align="center">
+          <template slot-scope="scope">
+            {{_getParkingSpaceApplyCatType(scope.row.carType)}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="carColor" :label="$t('carDetailApply.color')" align="center"></el-table-column>
+        <el-table-column prop="startTime" :label="$t('carDetailApply.startTime')" align="center"></el-table-column>
+        <el-table-column prop="endTime" :label="$t('carDetailApply.endTime')" align="center"></el-table-column>
+        <el-table-column prop="applyPersonName" :label="$t('carDetailApply.applicant')" align="center"></el-table-column>
+        <el-table-column prop="applyPersonLink" :label="$t('carDetailApply.phone')" align="center"></el-table-column>
+        <el-table-column :label="$t('carDetailApply.result')" align="center">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.state == '1001'" type="success">
+              {{_getParkingSpaceApplyState(scope.row.state)}}
+            </el-tag>
+            <el-tag v-else-if="scope.row.state == '4004'" type="danger">
+              {{_getParkingSpaceApplyState(scope.row.state)}}
+            </el-tag>
+            <el-tag v-else-if="scope.row.state == '2002'" type="info">
+              {{_getParkingSpaceApplyState(scope.row.state)}}
+            </el-tag>
+            <el-tag v-else type="info">
+              {{_getParkingSpaceApplyState(scope.row.state)}}
+            </el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="12"></el-col>
+        <el-col :span="12" class="text-right">
+          <el-pagination
+            @current-change="handlePageChange"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            layout="total, prev, pager, next"
+            :total="total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listAdminParkingSpaceApply } from '@/api/aCommunity/aCarDetailApplySpaceApi'
+
+export default {
+  name: 'ACarDetailApplySpace',
+  data() {
+    return {
+      aCarDetailApplySpaceInfo: {
+        applys: [],
+        carId: '',
+        carNum: '',
+        memberId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  methods: {
+    open(data) {
+      this.handleSwitch(data)
+    },
+    handleSwitch(data) {
+      this.aCarDetailApplySpaceInfo.carId = data.carId
+      this.aCarDetailApplySpaceInfo.carNum = data.carNum
+      this.aCarDetailApplySpaceInfo.memberId = data.memberId
+      this._loadACarDetailApplySpaceData(1, this.pageSize)
+    },
+    handlePageChange(page) {
+      this.currentPage = page
+      this._loadACarDetailApplySpaceData(page, this.pageSize)
+    },
+    async _loadACarDetailApplySpaceData(page, row) {
+      try {
+        const param = {
+          carNum: this.aCarDetailApplySpaceInfo.carNum,
+          page,
+          row
+        }
+        const response = await listAdminParkingSpaceApply(param)
+        this.aCarDetailApplySpaceInfo.applys = response.data
+        this.total = response.records
+      } catch (error) {
+        console.error('Failed to load apply space data:', error)
+      }
+    },
+    _getParkingSpaceApplyState(state) {
+      if (state == '1001') {
+        return this.$t('carDetailApply.pendingReview')
+      } else if (state == '2002') {
+        return this.$t('carDetailApply.pendingPayment')
+      } else if (state == '3003') {
+        return this.$t('carDetailApply.completed')
+      } else if (state == '4004') {
+        return this.$t('carDetailApply.reviewFailed')
+      }
+      return this.$t('carDetailApply.abnormalStatus')
+    },
+    _getParkingSpaceApplyCatType(type) {
+      if (type == '9901') {
+        return this.$t('carDetailApply.familyCar')
+      } else if (type == '9902') {
+        return this.$t('carDetailApply.bus')
+      } else if (type == '9903') {
+        return this.$t('carDetailApply.truck')
+      }
+      return this.$t('carDetailApply.abnormalCar')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+.text-right {
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+<template>
+  <a-car-detail-apply-space ref="carDetailApply" />
+</template>
+
+<script>
+import ACarDetailApplySpace from './aCarDetailApplySpace'
+
+export default {
+  components: {
+    ACarDetailApplySpace
+  },
+  methods: {
+    open(data) {
+      this.$refs.carDetailApply.handleSwitch(data)
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div class="car-inout-container">
+    <el-row>
+      <el-col :span="24" class="text-right">
+        <!-- 可以在这里添加操作按钮 -->
+      </el-col>
+    </el-row>
+
+    <div class="margin-top">
+      <el-table
+        :data="aCarDetailCarInoutInfo.carIns"
+        border
+        style="width: 100%"
+        class="footable"
+      >
+        <el-table-column prop="photoJpg" :label="$t('aCarDetailCarInout.entryImage')" align="center">
+          <template slot-scope="scope">
+            <img
+              style="width: 60px; height: 60px;"
+              class="border-radius"
+              :src="scope.row.photoJpg || '/img/noPhoto.jpg'"
+              @click="_carInoutOpenFile(scope.row.photoJpg)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="inoutId" :label="$t('aCarDetailCarInout.inoutNumber')" align="center" />
+        <el-table-column :label="$t('aCarDetailCarInout.vehicleStatus')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.carInout == '3306' ? $t('aCarDetailCarInout.entry') : $t('aCarDetailCarInout.exit') }}({{ scope.row.stateName }})
+          </template>
+        </el-table-column>
+        <el-table-column prop="carNum" :label="$t('aCarDetailCarInout.plateNumber')" align="center" />
+        <el-table-column prop="paNum" :label="$t('aCarDetailCarInout.parkingLot')" align="center" />
+        <el-table-column :label="$t('aCarDetailCarInout.billingRule')" align="center">
+          <template slot-scope="scope">
+            <span @click="_viewTempFeeConfigInOutCar(scope.row.configId)" style="cursor: pointer;">
+              {{ scope.row.feeName }}
+              <i class="el-icon-info"></i>
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="carTypeName" :label="$t('aCarDetailCarInout.plateType')" align="center" />
+        <el-table-column prop="inTime" :label="$t('aCarDetailCarInout.entryTime')" align="center" />
+        <el-table-column :label="$t('aCarDetailCarInout.exitTime')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.carInout != '3307' ? '-' : scope.row.outTime }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('aCarDetailCarInout.parkingTime')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.hours }}{{ $t('aCarDetailCarInout.hour') }}{{ scope.row.min }}{{ $t('aCarDetailCarInout.minute') }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('aCarDetailCarInout.chargeAmount')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.carType != 'T' ? '-' : scope.row.payCharge }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="remark" :label="$t('aCarDetailCarInout.remark')" align="center" />
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="8" :offset="16">
+          <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>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCarInoutDetail } from '@/api/aCommunity/aCarDetailCarInoutApi'
+
+export default {
+  name: 'ACarDetailCarInout',
+  data() {
+    return {
+      aCarDetailCarInoutInfo: {
+        carIns: [],
+        carId: '',
+        memberId: '',
+        carNum: '',
+        areaNum: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  methods: {
+    open(data) {
+      this.handleSwitch(data)
+    },
+    handleSwitch(data) {
+      this.aCarDetailCarInoutInfo.carId = data.carId
+      this.aCarDetailCarInoutInfo.carNum = data.carNum
+      this.aCarDetailCarInoutInfo.areaNum = data.areaNum
+      this.aCarDetailCarInoutInfo.memberId = data.memberId
+      this._loadACarDetailCarInoutData(this.currentPage, this.pageSize)
+    },
+    handleNotify() {
+      this._loadACarDetailCarInoutData(this.currentPage, this.pageSize)
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadACarDetailCarInoutData(val, this.pageSize)
+    },
+    _loadACarDetailCarInoutData(page, row) {
+      const params = {
+        carNum: this.aCarDetailCarInoutInfo.carNum,
+        paNum: this.aCarDetailCarInoutInfo.areaNum,
+        iotApiCode: 'listCarInoutDetailBmoImpl',
+        page: page,
+        row: row
+      }
+
+      getCarInoutDetail(params)
+        .then(response => {
+          const res = response.data
+          this.aCarDetailCarInoutInfo.carIns = res.data
+          this.total = res.records
+        })
+        .catch(error => {
+          console.error('请求失败:', error)
+        })
+    },
+    _carInoutOpenFile(photoJpg) {
+      if (photoJpg) {
+        // 这里实现打开图片的逻辑
+        console.log('打开图片:', photoJpg)
+      }
+    },
+    _viewTempFeeConfigInOutCar(configId) {
+      // 这里实现查看计费规则的逻辑
+      console.log('查看计费规则:', configId)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.car-inout-container {
+  padding: 20px;
+}
+.margin-top {
+  margin-top: 20px;
+}
+.border-radius {
+  border-radius: 4px;
+}
+.text-right {
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+<template>
+  <a-car-detail-car-inout ref="carDetailCarInout" />
+</template>
+
+<script>
+import ACarDetailCarInout from './aCarDetailCarInout'
+
+export default {
+  components: {
+    ACarDetailCarInout
+  },
+  methods: {
+    open(data) {
+      this.$refs.carDetailCarInout.handleSwitch(data)
+    },
+    refresh() {
+      this.$refs.carDetailCarInout.handleNotify()
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-row>
+      <el-col :span="24" class="text-right"></el-col>
+    </el-row>
+
+    <div class="margin-top">
+      <el-table :data="aCarDetailFeeInfo.fees" style="width: 100%">
+        <el-table-column prop="feeName" :label="$t('carDetailFee.feeItem')" align="center">
+          <template slot-scope="scope">
+            <span class="hand" @click="_viewCarFeeConfig(scope.row)">
+              {{ scope.row.feeName }}
+              <i class="el-icon-info"></i>
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="feeFlagName" :label="$t('carDetailFee.feeFlag')" align="center"></el-table-column>
+        <el-table-column prop="feeTypeCdName" :label="$t('carDetailFee.feeType')" align="center"></el-table-column>
+        <el-table-column prop="amountOwed" :label="$t('carDetailFee.amountOwed')" align="center"></el-table-column>
+        <el-table-column prop="startTime" :label="$t('carDetailFee.createTime')" align="center"></el-table-column>
+        <el-table-column :label="$t('carDetailFee.duePeriod')" align="center">
+          <template slot-scope="scope">
+            {{ _getEndTime(scope.row) }}~<br />{{ _getDeadlineTime(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('carDetailFee.remark')" align="center">
+          <template slot-scope="scope">
+            <div v-if="scope.row.feeTypeCd == '888800010015' || scope.row.feeTypeCd == '888800010016'">
+              <div>{{ $t('carDetailFee.preDegrees') }}：{{ scope.row.preDegrees }}</div>
+              <div>{{ $t('carDetailFee.curDegrees') }}：{{ scope.row.curDegrees }}</div>
+              <div>{{ $t('carDetailFee.unitPrice') }}：{{ scope.row.mwPrice ? scope.row.mwPrice : scope.row.squarePrice
+              }}</div>
+              <div>{{ $t('carDetailFee.additionalFee') }}：{{ scope.row.additionalAmount }}</div>
+            </div>
+            <div v-else>
+              <div>{{ $t('carDetailFee.unitPrice') }}：{{ scope.row.squarePrice }}</div>
+              <div>{{ $t('carDetailFee.fixedFee') }}：{{ scope.row.additionalAmount }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="stateName" :label="$t('carDetailFee.status')" align="center"></el-table-column>
+        <el-table-column :label="$t('carDetailFee.operation')" align="center"></el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="12">
+          <span>{{ $t('carDetailFee.paymentNotice') }}</span>
+        </el-col>
+        <el-col :span="12" class="text-right">
+          <el-pagination @current-change="handlePageChange" :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 } from '@/api/aCommunity/aCarDetailFeeApi'
+
+export default {
+  name: 'ACarDetailFee',
+  data() {
+    return {
+      aCarDetailFeeInfo: {
+        fees: [],
+        carId: '',
+        memberId: '',
+        carNum: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  methods: {
+    open(data) {
+      this.aCarDetailFeeInfo.carId = data.carId
+      this.aCarDetailFeeInfo.carNum = data.carNum
+      this.aCarDetailFeeInfo.memberId = data.memberId
+      this._loadACarDetailFeeData(1, this.pageSize)
+    },
+    handleNotify() {
+      this._loadACarDetailFeeData(this.currentPage, this.pageSize)
+    },
+    handlePageChange(page) {
+      this.currentPage = page
+      this._loadACarDetailFeeData(page, this.pageSize)
+    },
+    async _loadACarDetailFeeData(page, row) {
+      try {
+        const param = {
+          payerObjId: this.aCarDetailFeeInfo.memberId,
+          page,
+          row
+        }
+        const response = await listAdminFee(param)
+        this.aCarDetailFeeInfo.fees = response.fees
+        this.total = response.records
+      } catch (error) {
+        console.error('Failed to load fee data:', 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
+    },
+    _viewCarFeeConfig(fee) {
+      // Implement view fee config logic
+      console.log(fee)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hand {
+  cursor: pointer;
+}
+
+.margin-top {
+  margin-top: 20px;
+}
+
+.text-right {
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+<template>
+  <a-car-detail-fee ref="carDetailFee" />
+</template>
+
+<script>
+import ACarDetailFee from './aCarDetailFee'
+
+export default {
+  components: {
+    ACarDetailFee
+  },
+  methods: {
+    open(data) {
+      this.$refs.carDetailFee.handleSwitch(data)
+    },
+    refresh() {
+      this.$refs.carDetailFee.handleNotify()
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-row>
+      <el-col :span="24" class="text-right"></el-col>
+    </el-row>
+
+    <div class="margin-top">
+      <el-table :data="aCarDetailHisInfo.cars" style="width: 100%">
+        <el-table-column prop="carNum" :label="$t('carDetailHis.carNum')" align="center"></el-table-column>
+        <el-table-column :label="$t('carDetailHis.leaseType')" align="center">
+          <template slot-scope="scope">
+            <span v-if="scope.row.leaseType == 'T'">{{$t('carDetailHis.tempCar')}}</span>
+            <span v-else>{{scope.row.leaseTypeName}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="carTypeName" :label="$t('carDetailHis.carType')" align="center"></el-table-column>
+        <el-table-column prop="carColor" :label="$t('carDetailHis.color')" align="center"></el-table-column>
+        <el-table-column :label="$t('carDetailHis.owner')" align="center">
+          <template slot-scope="scope">
+            <div class="hand">{{scope.row.ownerName}}({{scope.row.link}})</div>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('carDetailHis.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('carDetailHis.spaceReleased')}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('carDetailHis.validPeriod')" align="center">
+          <template slot-scope="scope">
+            <span v-if="scope.row.leaseType == 'H'">
+              {{scope.row.startTime}}<br>~{{scope.row.endTime}}
+            </span>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('carDetailHis.action')" align="center">
+          <template slot-scope="scope">
+            {{_getHisOperate(scope.row)}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="userName" :label="$t('carDetailHis.operator')" align="center"></el-table-column>
+        <el-table-column prop="createTime" :label="$t('carDetailHis.operateTime')" align="center"></el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="12"></el-col>
+        <el-col :span="12" class="text-right">
+          <el-pagination
+            @current-change="handlePageChange"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            layout="total, prev, pager, next"
+            :total="total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryAdminHisOwnerCar } from '@/api/aCommunity/aCarDetailHisApi'
+
+export default {
+  name: 'ACarDetailHis',
+  data() {
+    return {
+      aCarDetailHisInfo: {
+        cars: [],
+        carId: '',
+        memberId: '',
+        carNum: '',
+        carNumLike: '',
+        logStartTime: '',
+        logEndTime: '',
+        paId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  methods: {
+    open(data) {
+      this.handleSwitch(data)
+    },
+    handleSwitch(data) {
+      this.aCarDetailHisInfo.carId = data.carId
+      this.aCarDetailHisInfo.carNum = data.carNum
+      this.aCarDetailHisInfo.paId = data.paId
+      this.aCarDetailHisInfo.memberId = data.memberId
+      this.aCarDetailHisInfo.carNumLike = data.carNumLike
+      this.aCarDetailHisInfo.logStartTime = data.logStartTime
+      this.aCarDetailHisInfo.logEndTime = data.logEndTime
+      this.aCarDetailHisInfo.staffNameLike = data.staffNameLike
+      this._loadACarDetailHisData(1, this.pageSize)
+    },
+    handlePageChange(page) {
+      this.currentPage = page
+      this._loadACarDetailHisData(page, this.pageSize)
+    },
+    async _loadACarDetailHisData(page, row) {
+      try {
+        const param = {
+          carNum: this.aCarDetailHisInfo.carNum,
+          carNumLike: this.aCarDetailHisInfo.carNumLike,
+          logStartTime: this.aCarDetailHisInfo.logStartTime,
+          logEndTime: this.aCarDetailHisInfo.logEndTime,
+          staffNameLike: this.aCarDetailHisInfo.staffNameLike,
+          page,
+          row
+        }
+        const response = await queryAdminHisOwnerCar(param)
+        this.aCarDetailHisInfo.cars = response.data
+        this.total = response.records
+      } catch (error) {
+        console.error('Failed to load history data:', error)
+      }
+    },
+    _getHisOperate(car) {
+      let carCount = 0
+      this.aCarDetailHisInfo.cars.forEach(item => {
+        if (car.bId == item.bId) {
+          carCount += 1
+        }
+      })
+      if (carCount <= 1) {
+        if (car.operate == 'ADD') {
+          return this.$t('carDetailHis.add')
+        }
+        if (car.operate == 'DEL') {
+          return this.$t('carDetailHis.delete')
+        }
+        return "-"
+      }
+      if (car.operate == 'ADD') {
+        return this.$t('carDetailHis.modifyNew')
+      }
+      if (car.operate == 'DEL') {
+        return this.$t('carDetailHis.modifyOld')
+      }
+      return "-"
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hand {
+  cursor: pointer;
+}
+.margin-top {
+  margin-top: 20px;
+}
+.text-right {
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+<template>
+  <a-car-detail-his ref="carDetailHis" />
+</template>
+
+<script>
+import ACarDetailHis from './aCarDetailHis'
+
+export default {
+  components: {
+    ACarDetailHis
+  },
+  methods: {
+    open(data) {
+      this.$refs.carDetailHis.handleSwitch(data)
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-row>
+      <el-col :span="24" class="text-right"></el-col>
+    </el-row>
+
+    <div class="margin-top">
+      <el-table :data="aCarDetailMemberInfo.ownerCars" style="width: 100%">
+        <el-table-column prop="carNum" :label="$t('carDetailMember.carNum')" align="center"></el-table-column>
+        <el-table-column prop="roomName" :label="$t('carDetailMember.roomNum')" align="center"></el-table-column>
+        <el-table-column prop="carBrand" :label="$t('carDetailMember.carBrand')" align="center"></el-table-column>
+        <el-table-column prop="carTypeName" :label="$t('carDetailMember.carType')" align="center"></el-table-column>
+        <el-table-column prop="carColor" :label="$t('carDetailMember.color')" align="center"></el-table-column>
+        <el-table-column :label="$t('carDetailMember.owner')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.ownerName}}({{scope.row.link}})
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('carDetailMember.parkingSpace')" align="center">
+          <template slot-scope="scope">
+            <span v-if="scope.row.areaNum">
+              {{scope.row.areaNum}}{{$t('carDetailMember.parkingLot')}}{{scope.row.num}}{{$t('carDetailMember.space')}}
+            </span>
+            <span v-else>{{$t('carDetailMember.none')}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="startTime" :label="$t('carDetailMember.startTime')" align="center"></el-table-column>
+        <el-table-column prop="endTime" :label="$t('carDetailMember.endTime')" align="center"></el-table-column>
+        <el-table-column :label="$t('carDetailMember.status')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.stateName}}
+            <span v-if="scope.row.iotStateName">
+              ({{scope.row.iotStateName}})
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="12"></el-col>
+        <el-col :span="12" class="text-right">
+          <el-pagination
+            @current-change="handlePageChange"
+            :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/aCarDetailMemberApi'
+
+export default {
+  name: 'ACarDetailMember',
+  data() {
+    return {
+      aCarDetailMemberInfo: {
+        ownerCars: [],
+        carId: '',
+        carNum: '',
+        memberId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  methods: {
+    open(data) {
+      this.aCarDetailMemberInfo.carId = data.carId
+      this.aCarDetailMemberInfo.carNum = data.carNum
+      this.aCarDetailMemberInfo.memberId = data.memberId
+      this._loadACarDetailMemberData(1, this.pageSize)
+    },
+    handlePageChange(page) {
+      this.currentPage = page
+      this._loadACarDetailMemberData(page, this.pageSize)
+    },
+    async _loadACarDetailMemberData(page, row) {
+      try {
+        const param = {
+          carId: this.aCarDetailMemberInfo.carId,
+          carTypeCd: '1002',
+          page,
+          row
+        }
+        const response = await queryAdminOwnerCars(param)
+        this.aCarDetailMemberInfo.ownerCars = response.data
+        this.total = response.records
+      } catch (error) {
+        console.error('Failed to load member data:', error)
+      }
+    },
+    _viewIotStateRemark(car) {
+      // Implement view IoT remark logic
+      console.log(car)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+.text-right {
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+<template>
+  <a-car-detail-member ref="carDetailMember" />
+</template>
+
+<script>
+import ACarDetailMember from './aCarDetailMember'
+
+export default {
+  components: {
+    ACarDetailMember
+  },
+  methods: {
+    open(data) {
+      this.$refs.carDetailMember.handleSwitch(data)
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-row>
+      <el-col :span="24" class="text-right"></el-col>
+    </el-row>
+
+    <div class="margin-top">
+      <el-table :data="aCarDetailOwnerInfo.owners" style="width: 100%">
+        <el-table-column :label="$t('carDetailOwner.ownerFace')" align="center" width="100">
+          <template slot-scope="scope">
+            <el-image style="width: 60px; height: 60px;" :src="scope.row.url || '/img/noPhoto.jpg'" fit="cover"
+              @click="_viewOwnerFace(scope.row.url)" class="border-radius">
+            </el-image>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('carDetailOwner.name')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.name }}({{ scope.row.link }})
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('carDetailOwner.gender')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.sex == 0 ? $t('carDetailOwner.male') : $t('carDetailOwner.female') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="idCard" :label="$t('carDetailOwner.idCard')" align="center"></el-table-column>
+        <el-table-column prop="address" :label="$t('carDetailOwner.address')" align="center"></el-table-column>
+        <el-table-column prop="roomCount" :label="$t('carDetailOwner.roomCount')" align="center"></el-table-column>
+        <el-table-column prop="memberCount" :label="$t('carDetailOwner.memberCount')" align="center"></el-table-column>
+        <el-table-column prop="carCount" :label="$t('carDetailOwner.carCount')" align="center"></el-table-column>
+        <el-table-column prop="complaintCount" :label="$t('carDetailOwner.complaintCount')"
+          align="center"></el-table-column>
+        <el-table-column prop="repairCount" :label="$t('carDetailOwner.repairCount')" align="center"></el-table-column>
+        <el-table-column prop="oweFee" :label="$t('carDetailOwner.oweFee')" align="center"></el-table-column>
+        <el-table-column prop="contractCount" :label="$t('carDetailOwner.contractCount')"
+          align="center"></el-table-column>
+        <el-table-column :label="$t('common.operation')" align="center" width="120">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="_toACarDetailOwnerDetail(scope.row)">
+              {{ $t('carDetailOwner.detail') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="12"></el-col>
+        <el-col :span="12" class="text-right">
+          <el-pagination @current-change="handlePageChange" :current-page="currentPage" :page-size="pageSize"
+            layout="total, prev, pager, next" :total="total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+
+    <view-image ref="viewImage"></view-image>
+  </div>
+</template>
+
+<script>
+import { queryAdminOwners } from '@/api/aCommunity/aCarDetailOwnerApi'
+import ViewImage from '@/components/system/viewImage'
+
+export default {
+  name: 'ACarDetailOwner',
+  components: {
+    ViewImage
+  },
+  data() {
+    return {
+      aCarDetailOwnerInfo: {
+        owners: [],
+        ownerId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  methods: {
+    open(data) {
+      this.handleSwitch(data)
+    },
+    handleSwitch(data) {
+      this.aCarDetailOwnerInfo.ownerId = data.ownerId
+      this._loadACarDetailOwnerData(1, this.pageSize)
+    },
+    handlePageChange(page) {
+      this.currentPage = page
+      this._loadACarDetailOwnerData(page, this.pageSize)
+    },
+    async _loadACarDetailOwnerData(page, row) {
+      try {
+        const param = {
+          ownerId: this.aCarDetailOwnerInfo.ownerId,
+          ownerTypeCd: '1001',
+          page,
+          row
+        }
+        const response = await queryAdminOwners(param)
+        this.aCarDetailOwnerInfo.owners = response.data
+        this.total = response.records
+      } catch (error) {
+        console.error('Failed to load owner data:', error)
+      }
+    },
+    _viewOwnerFace(url) {
+      if (url) {
+        this.$refs.viewImage.showImage({ url })
+      }
+    },
+    _toACarDetailOwnerDetail(owner) {
+      window.open('/#/views/aCommunity/adminOwnerDetail?ownerId=' + owner.ownerId)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.border-radius {
+  border-radius: 4px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <a-car-detail-owner ref="carDetailOwner" />
+</template>
+
+<script>
+import ACarDetailOwner from './aCarDetailOwner'
+
+export default {
+  components: {
+    ACarDetailOwner
+  },
+  methods: {
+    open(data) {
+      this.$refs.carDetailOwner.handleSwitch(data)
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div class="margin-top">
+    <el-row class="margin-top-lg"></el-row>
+    
+    <div class="margin-top">
+      <el-table :data="aCarDetailTransactionCarInfo.translates" style="width: 100%">
+        <el-table-column prop="machineTranslateId" :label="$t('carDetailTransaction.syncId')" align="center"></el-table-column>
+        <el-table-column prop="machineCode" :label="$t('carDetailTransaction.deviceCode')" align="center"></el-table-column>
+        <el-table-column prop="typeCdName" :label="$t('carDetailTransaction.objectType')" align="center"></el-table-column>
+        <el-table-column prop="objName" :label="$t('carDetailTransaction.objectName')" align="center"></el-table-column>
+        <el-table-column prop="machineCmdName" :label="$t('carDetailTransaction.command')" align="center"></el-table-column>
+        <el-table-column prop="stateName" :label="$t('carDetailTransaction.status')" align="center"></el-table-column>
+        <el-table-column prop="remark" :label="$t('carDetailTransaction.remark')" align="center" width="80"></el-table-column>
+        <el-table-column prop="updateTime" :label="$t('carDetailTransaction.syncTime')" align="center"></el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="12"></el-col>
+        <el-col :span="12" class="text-right">
+          <el-pagination
+            @current-change="handlePageChange"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            layout="total, prev, pager, next"
+            :total="total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listAdminMachineTranslates } from '@/api/aCommunity/aCarDetailTransactionCarApi'
+
+export default {
+  name: 'ACarDetailTransactionCar',
+  data() {
+    return {
+      aCarDetailTransactionCarInfo: {
+        translates: [],
+        ownerId: '',
+        carId: '',
+        memberId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  methods: {
+    open(data) {
+      this.handleSwitch(data)
+    },
+    handleSwitch(data) {
+      this.aCarDetailTransactionCarInfo.carId = data.carId
+      this.aCarDetailTransactionCarInfo.memberId = data.memberId
+      this._loadACarDetailTransactionCarData(1, this.pageSize)
+    },
+    handlePageChange(page) {
+      this.currentPage = page
+      this._loadACarDetailTransactionCarData(page, this.pageSize)
+    },
+    async _loadACarDetailTransactionCarData(page, row) {
+      try {
+        const param = {
+          page,
+          row,
+          objId: this.aCarDetailTransactionCarInfo.memberId,
+          typeCd: '4455'
+        }
+        const response = await listAdminMachineTranslates(param)
+        this.aCarDetailTransactionCarInfo.translates = response.machineTranslates
+        this.total = response.records
+      } catch (error) {
+        console.error('Failed to load transaction data:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+.margin-top-lg {
+  margin-top: 40px;
+}
+.text-right {
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+<template>
+  <a-car-detail-transaction-car ref="carDetailTransaction" />
+</template>
+
+<script>
+import ACarDetailTransactionCar from './aCarDetailTransactionCar'
+
+export default {
+  components: {
+    ACarDetailTransactionCar
+  },
+  methods: {
+    open(data) {
+      this.$refs.carDetailTransaction.handleSwitch(data)
+    }
+  }
+}
+</script>
 \ No newline at end of file
@@ -9,6 +9,7 @@ import { messages as handoverMessages } from &#39;../views/room/handoverLang&#39;
 import { messages as ownerExitRoomMessages } from '../views/room/ownerExitRoomLang'
 import { messages as adminRoomDetailMessages } from '../views/aCommunity/adminRoomDetailLang.js'
 import { messages as adminOwnerDetailMessages } from '../views/aCommunity/adminOwnerDetailLang.js'
+import { messages as adminCarDetailMessages } from '../views/aCommunity/adminCarDetailLang.js'
 export const messages = {
     en: {
         ...roomStructureMessages.en,
@@ -22,6 +23,7 @@ export const messages = {
         ...ownerExitRoomMessages.en,
         ...adminRoomDetailMessages.en,
         ...adminOwnerDetailMessages.en,
+        ...adminCarDetailMessages.en,
     },
     zh: {
         ...roomStructureMessages.zh,
@@ -35,5 +37,6 @@ export const messages = {
         ...ownerExitRoomMessages.zh,
         ...adminRoomDetailMessages.zh,
         ...adminOwnerDetailMessages.zh,
+        ...adminCarDetailMessages.zh,
     }
 }
 \ No newline at end of file
@@ -50,8 +50,13 @@ export default [
         component: () => import('@/views/aCommunity/adminRoomDetail.vue')
     },
     {
-        path:'/views/aCommunity/adminOwnerDetail',
-        name:'/views/aCommunity/adminOwnerDetail',
+        path: '/views/aCommunity/adminOwnerDetail',
+        name: '/views/aCommunity/adminOwnerDetail',
         component: () => import('@/views/aCommunity/adminOwnerDetail.vue')
-        },
+    },
+    {
+        path: '/pages/car/adminCarDetail',
+        name: '/pages/car/adminCarDetail',
+        component: () => import('@/views/aCommunity/adminCarDetailList.vue')
+    },
 ]
 \ No newline at end of file
+export const messages = {
+  en: {
+    carDetailApply: {
+      applyId: 'Apply ID',
+      carNum: 'License Plate',
+      parkingSpace: 'Parking Space',
+      parkingLot: 'Parking Lot',
+      space: 'Space',
+      none: 'None',
+      carBrand: 'Car Brand',
+      carType: 'Car Type',
+      color: 'Color',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      applicant: 'Applicant',
+      phone: 'Phone',
+      result: 'Result',
+      pendingReview: 'Pending Review',
+      pendingPayment: 'Pending Payment',
+      completed: 'Completed',
+      reviewFailed: 'Review Failed',
+      abnormalStatus: 'Abnormal Status',
+      familyCar: 'Family Car',
+      bus: 'Bus',
+      truck: 'Truck',
+      abnormalCar: 'Abnormal Car'
+    }
+  },
+  zh: {
+    carDetailApply: {
+      applyId: '申请ID',
+      carNum: '车牌号',
+      parkingSpace: '停车位',
+      parkingLot: '停车场',
+      space: '停车位',
+      none: '无',
+      carBrand: '汽车品牌',
+      carType: '车辆类型',
+      color: '颜色',
+      startTime: '起租时间',
+      endTime: '结租时间',
+      applicant: '申请人',
+      phone: '手机号',
+      result: '审核结果',
+      pendingReview: '待审核',
+      pendingPayment: '待缴费',
+      completed: '完成',
+      reviewFailed: '审核失败',
+      abnormalStatus: '状态异常',
+      familyCar: '家用小汽车',
+      bus: '客车',
+      truck: '货车',
+      abnormalCar: '异常车辆'
+    }
+  }
+}
 \ No newline at end of file
+export const messages = {
+  en: {
+    aCarDetailCarInout: {
+      entryImage: 'Entry Image',
+      inoutNumber: 'In/Out Number',
+      vehicleStatus: 'Vehicle Status',
+      plateNumber: 'Plate Number',
+      parkingLot: 'Parking Lot',
+      billingRule: 'Billing Rule',
+      plateType: 'Plate Type',
+      entryTime: 'Entry Time',
+      exitTime: 'Exit Time',
+      parkingTime: 'Parking Time',
+      chargeAmount: 'Charge Amount',
+      remark: 'Remark',
+      entry: 'Entry',
+      exit: 'Exit',
+      hour: 'hour',
+      minute: 'min'
+    }
+  },
+  zh: {
+    aCarDetailCarInout: {
+      entryImage: '进场图',
+      inoutNumber: '进出场编号',
+      vehicleStatus: '车辆状态',
+      plateNumber: '车牌号',
+      parkingLot: '停车场',
+      billingRule: '计费规则',
+      plateType: '车牌类型',
+      entryTime: '进场时间',
+      exitTime: '出场时间',
+      parkingTime: '停车时间',
+      chargeAmount: '收费金额',
+      remark: '说明',
+      entry: '进场',
+      exit: '出场',
+      hour: '小时',
+      minute: '分'
+    }
+  }
+}
 \ No newline at end of file
+export const messages = {
+  en: {
+    carDetailFee: {
+      feeItem: 'Fee Item',
+      feeFlag: 'Fee Flag',
+      feeType: 'Fee Type',
+      amountOwed: 'Amount Owed',
+      createTime: 'Create Time',
+      duePeriod: 'Due Period',
+      remark: 'Remark',
+      preDegrees: 'Previous Degrees',
+      curDegrees: 'Current Degrees',
+      unitPrice: 'Unit Price',
+      additionalFee: 'Additional Fee',
+      fixedFee: 'Fixed Fee',
+      status: 'Status',
+      operation: 'Operation',
+      paymentNotice: 'Please go to the business acceptance page for payment'
+    }
+  },
+  zh: {
+    carDetailFee: {
+      feeItem: '费用项目',
+      feeFlag: '费用标识',
+      feeType: '费用类型',
+      amountOwed: '应收金额',
+      createTime: '建账时间',
+      duePeriod: '应收时间段',
+      remark: '说明',
+      preDegrees: '上期度数',
+      curDegrees: '本期度数',
+      unitPrice: '单价',
+      additionalFee: '附加费',
+      fixedFee: '固定费',
+      status: '状态',
+      operation: '操作',
+      paymentNotice: '缴费请到业务受理页面缴费'
+    }
+  }
+}
 \ No newline at end of file
+export const messages = {
+  en: {
+    carDetailHis: {
+      carNum: 'License Plate',
+      leaseType: 'Plate Type',
+      tempCar: 'Temporary Car',
+      carType: 'Car Type',
+      color: 'Color',
+      owner: 'Owner',
+      parkingSpace: 'Parking Space',
+      spaceReleased: 'Space Released',
+      validPeriod: 'Valid Period',
+      action: 'Action',
+      operator: 'Operator',
+      operateTime: 'Operate Time',
+      add: 'Add',
+      delete: 'Delete',
+      modifyNew: 'Modify(New)',
+      modifyOld: 'Modify(Old)'
+    }
+  },
+  zh: {
+    carDetailHis: {
+      carNum: '车牌号',
+      leaseType: '车牌类型',
+      tempCar: '临时车',
+      carType: '车辆类型',
+      color: '颜色',
+      owner: '业主',
+      parkingSpace: '车位',
+      spaceReleased: '车位已释放',
+      validPeriod: '有效期',
+      action: '动作',
+      operator: '操作人',
+      operateTime: '操作时间',
+      add: '添加',
+      delete: '删除',
+      modifyNew: '修改(新)',
+      modifyOld: '修改(旧)'
+    }
+  }
+}
 \ No newline at end of file
+export const messages = {
+  en: {
+    carDetailMember: {
+      carNum: 'License Plate',
+      roomNum: 'Room Number',
+      carBrand: 'Car Brand',
+      carType: 'Car Type',
+      color: 'Color',
+      owner: 'Owner',
+      parkingSpace: 'Parking Space',
+      parkingLot: 'Parking Lot',
+      space: 'Space',
+      none: 'None',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      status: 'Status'
+    }
+  },
+  zh: {
+    carDetailMember: {
+      carNum: '车牌号',
+      roomNum: '房屋号',
+      carBrand: '车辆品牌',
+      carType: '车辆类型',
+      color: '颜色',
+      owner: '业主',
+      parkingSpace: '车位',
+      parkingLot: '车场',
+      space: '车位',
+      none: '无',
+      startTime: '起租时间',
+      endTime: '截止时间',
+      status: '状态'
+    }
+  }
+}
 \ No newline at end of file
+export const messages = {
+  en: {
+    carDetailOwner: {
+      ownerFace: 'Owner Face',
+      name: 'Name',
+      gender: 'Gender',
+      male: 'Male',
+      female: 'Female',
+      idCard: 'ID Card',
+      address: 'Address',
+      roomCount: 'Room Count',
+      memberCount: 'Member Count',
+      carCount: 'Car Count',
+      complaintCount: 'Complaint',
+      repairCount: 'Repair',
+      oweFee: 'Owe Fee',
+      contractCount: 'Contract',
+      operation: 'Operation',
+      detail: 'Detail'
+    }
+  },
+  zh: {
+    carDetailOwner: {
+      ownerFace: '业主人脸',
+      name: '姓名',
+      gender: '性别',
+      male: '男',
+      female: '女',
+      idCard: '身份证',
+      address: '家庭住址',
+      roomCount: '房屋数',
+      memberCount: '业主成员',
+      carCount: '车辆数',
+      complaintCount: '投诉',
+      repairCount: '报修',
+      oweFee: '欠费',
+      contractCount: '业主合同',
+      operation: '操作',
+      detail: '详情'
+    }
+  }
+}
 \ No newline at end of file
+export const messages = {
+  en: {
+    carDetailTransaction: {
+      syncId: 'Sync ID',
+      deviceCode: 'Device Code',
+      objectType: 'Object Type',
+      objectName: 'Object Name',
+      command: 'Command',
+      status: 'Status',
+      remark: 'Remark',
+      syncTime: 'Sync Time'
+    }
+  },
+  zh: {
+    carDetailTransaction: {
+      syncId: '同步ID',
+      deviceCode: '设备编码',
+      objectType: '对象类型',
+      objectName: '对象名称',
+      command: '指令',
+      status: '状态',
+      remark: '说明',
+      syncTime: '同步时间'
+    }
+  }
+}
 \ No newline at end of file
+export const messages = {
+  en: {
+    adminCarDetail: {
+      vehicleInfo: 'Vehicle Information',
+      vehicleFee: 'Vehicle Fee',
+      paymentRecord: 'Payment Record',
+      modificationRecord: 'Modification Record',
+      memberVehicle: 'Member Vehicle',
+      ownerInfo: 'Owner Information',
+      ownerHouse: 'Owner House',
+      ownerVehicle: 'Owner Vehicle',
+      licensePlateSync: 'License Plate Sync',
+      parkingSpaceApplication: 'Parking Space Application',
+      accessRecord: 'Access Record'
+    },
+    adminCarDetailInfo: {
+      licensePlate: 'License Plate:',
+      carBrand: 'Car Brand:',
+      carType: 'Car Type:',
+      color: 'Color:',
+      plateType: 'Plate Type:',
+      leaseStartTime: 'Lease Start Time:',
+      leaseEndTime: 'Lease End Time:',
+      remark: 'Remark:',
+      parkingLot: 'Parking Lot:',
+      parkingSpace: 'Parking Space:',
+      status: 'Status:',
+      relatedHouse: 'Related House:'
+    },
+    carDetailFee: {
+      feeItem: 'Fee Item',
+      feeFlag: 'Fee Flag',
+      feeType: 'Fee Type',
+      amountOwed: 'Amount Owed',
+      createTime: 'Create Time',
+      duePeriod: 'Due Period',
+      remark: 'Remark',
+      preDegrees: 'Previous Degrees',
+      curDegrees: 'Current Degrees',
+      unitPrice: 'Unit Price',
+      additionalFee: 'Additional Fee',
+      fixedFee: 'Fixed Fee',
+      status: 'Status',
+      operation: 'Operation',
+      paymentNotice: 'Please go to the business acceptance page for payment'
+    },
+    carDetailHis: {
+      carNum: 'License Plate',
+      leaseType: 'Plate Type',
+      tempCar: 'Temporary Car',
+      carType: 'Car Type',
+      color: 'Color',
+      owner: 'Owner',
+      parkingSpace: 'Parking Space',
+      spaceReleased: 'Space Released',
+      validPeriod: 'Valid Period',
+      action: 'Action',
+      operator: 'Operator',
+      operateTime: 'Operate Time',
+      add: 'Add',
+      delete: 'Delete',
+      modifyNew: 'Modify(New)',
+      modifyOld: 'Modify(Old)'
+    },
+    carDetailMember: {
+      carNum: 'License Plate',
+      roomNum: 'Room Number',
+      carBrand: 'Car Brand',
+      carType: 'Car Type',
+      color: 'Color',
+      owner: 'Owner',
+      parkingSpace: 'Parking Space',
+      parkingLot: 'Parking Lot',
+      space: 'Space',
+      none: 'None',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      status: 'Status'
+    },
+    carDetailOwner: {
+      ownerFace: 'Owner Face',
+      name: 'Name',
+      gender: 'Gender',
+      male: 'Male',
+      female: 'Female',
+      idCard: 'ID Card',
+      address: 'Address',
+      roomCount: 'Room Count',
+      memberCount: 'Member Count',
+      carCount: 'Car Count',
+      complaintCount: 'Complaint',
+      repairCount: 'Repair',
+      oweFee: 'Owe Fee',
+      contractCount: 'Contract',
+      operation: 'Operation',
+      detail: 'Detail'
+    },
+    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'
+    },
+    carDetailTransaction: {
+      syncId: 'Sync ID',
+      deviceCode: 'Device Code',
+      objectType: 'Object Type',
+      objectName: 'Object Name',
+      command: 'Command',
+      status: 'Status',
+      remark: 'Remark',
+      syncTime: 'Sync Time'
+    },
+    carDetailApply: {
+      applyId: 'Apply ID',
+      carNum: 'License Plate',
+      parkingSpace: 'Parking Space',
+      parkingLot: 'Parking Lot',
+      space: 'Space',
+      none: 'None',
+      carBrand: 'Car Brand',
+      carType: 'Car Type',
+      color: 'Color',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      applicant: 'Applicant',
+      phone: 'Phone',
+      result: 'Result',
+      pendingReview: 'Pending Review',
+      pendingPayment: 'Pending Payment',
+      completed: 'Completed',
+      reviewFailed: 'Review Failed',
+      abnormalStatus: 'Abnormal Status',
+      familyCar: 'Family Car',
+      bus: 'Bus',
+      truck: 'Truck',
+      abnormalCar: 'Abnormal Car'
+    },
+    aCarDetailCarInout: {
+      entryImage: 'Entry Image',
+      inoutNumber: 'In/Out Number',
+      vehicleStatus: 'Vehicle Status',
+      plateNumber: 'Plate Number',
+      parkingLot: 'Parking Lot',
+      billingRule: 'Billing Rule',
+      plateType: 'Plate Type',
+      entryTime: 'Entry Time',
+      exitTime: 'Exit Time',
+      parkingTime: 'Parking Time',
+      chargeAmount: 'Charge Amount',
+      remark: 'Remark',
+      entry: 'Entry',
+      exit: 'Exit',
+      hour: 'hour',
+      minute: 'min'
+    }
+  },
+  zh: {
+    adminCarDetail: {
+      vehicleInfo: '车辆信息',
+      vehicleFee: '车辆费用',
+      paymentRecord: '缴费记录',
+      modificationRecord: '修改记录',
+      memberVehicle: '成员车辆',
+      ownerInfo: '业主信息',
+      ownerHouse: '业主房屋',
+      ownerVehicle: '业主车辆',
+      licensePlateSync: '车牌同步',
+      parkingSpaceApplication: '车位申请',
+      accessRecord: '出入场记录'
+    },
+    adminCarDetailInfo: {
+      licensePlate: '车牌号：',
+      carBrand: '车品牌：',
+      carType: '车类型：',
+      color: '颜色：',
+      plateType: '车牌类型：',
+      leaseStartTime: '起租时间：',
+      leaseEndTime: '结租时间：',
+      remark: '备注：',
+      parkingLot: '停车场：',
+      parkingSpace: '车位：',
+      status: '状态：',
+      relatedHouse: '关联房屋：'
+    },
+    carDetailFee: {
+      feeItem: '费用项目',
+      feeFlag: '费用标识',
+      feeType: '费用类型',
+      amountOwed: '应收金额',
+      createTime: '建账时间',
+      duePeriod: '应收时间段',
+      remark: '说明',
+      preDegrees: '上期度数',
+      curDegrees: '本期度数',
+      unitPrice: '单价',
+      additionalFee: '附加费',
+      fixedFee: '固定费',
+      status: '状态',
+      operation: '操作',
+      paymentNotice: '缴费请到业务受理页面缴费'
+    },
+    carDetailHis: {
+      carNum: '车牌号',
+      leaseType: '车牌类型',
+      tempCar: '临时车',
+      carType: '车辆类型',
+      color: '颜色',
+      owner: '业主',
+      parkingSpace: '车位',
+      spaceReleased: '车位已释放',
+      validPeriod: '有效期',
+      action: '动作',
+      operator: '操作人',
+      operateTime: '操作时间',
+      add: '添加',
+      delete: '删除',
+      modifyNew: '修改(新)',
+      modifyOld: '修改(旧)'
+    },
+    carDetailMember: {
+      carNum: '车牌号',
+      roomNum: '房屋号',
+      carBrand: '车辆品牌',
+      carType: '车辆类型',
+      color: '颜色',
+      owner: '业主',
+      parkingSpace: '车位',
+      parkingLot: '车场',
+      space: '车位',
+      none: '无',
+      startTime: '起租时间',
+      endTime: '截止时间',
+      status: '状态'
+    },
+    carDetailOwner: {
+      ownerFace: '业主人脸',
+      name: '姓名',
+      gender: '性别',
+      male: '男',
+      female: '女',
+      idCard: '身份证',
+      address: '家庭住址',
+      roomCount: '房屋数',
+      memberCount: '业主成员',
+      carCount: '车辆数',
+      complaintCount: '投诉',
+      repairCount: '报修',
+      oweFee: '欠费',
+      contractCount: '业主合同',
+      operation: '操作',
+      detail: '详情'
+    },
+    aRoomDetailCar: {
+      placeholderCarNum: '请填写车牌号',
+      carNum: '车牌号',
+      leaseType: '车牌类型',
+      tempCar: '临时车',
+      carType: '车辆类型',
+      color: '颜色',
+      owner: '业主',
+      parkingSpace: '车位',
+      released: '车位已释放',
+      validity: '有效期'
+    },
+    carDetailTransaction: {
+      syncId: '同步ID',
+      deviceCode: '设备编码',
+      objectType: '对象类型',
+      objectName: '对象名称',
+      command: '指令',
+      status: '状态',
+      remark: '说明',
+      syncTime: '同步时间'
+    },
+    carDetailApply: {
+      applyId: '申请ID',
+      carNum: '车牌号',
+      parkingSpace: '停车位',
+      parkingLot: '停车场',
+      space: '停车位',
+      none: '无',
+      carBrand: '汽车品牌',
+      carType: '车辆类型',
+      color: '颜色',
+      startTime: '起租时间',
+      endTime: '结租时间',
+      applicant: '申请人',
+      phone: '手机号',
+      result: '审核结果',
+      pendingReview: '待审核',
+      pendingPayment: '待缴费',
+      completed: '完成',
+      reviewFailed: '审核失败',
+      abnormalStatus: '状态异常',
+      familyCar: '家用小汽车',
+      bus: '客车',
+      truck: '货车',
+      abnormalCar: '异常车辆'
+    },
+    aCarDetailCarInout: {
+      entryImage: '进场图',
+      inoutNumber: '进出场编号',
+      vehicleStatus: '车辆状态',
+      plateNumber: '车牌号',
+      parkingLot: '停车场',
+      billingRule: '计费规则',
+      plateType: '车牌类型',
+      entryTime: '进场时间',
+      exitTime: '出场时间',
+      parkingTime: '停车时间',
+      chargeAmount: '收费金额',
+      remark: '说明',
+      entry: '进场',
+      exit: '出场',
+      hour: '小时',
+      minute: '分'
+    }
+  }
+}
 \ No newline at end of file
+<template>
+  <div class="admin-car-detail">
+    <div class="white-bg padding-left padding-right padding-top border-radius-top">
+      <div class="flex justify-between">
+        <div class="text-title">
+          {{ $t('adminCarDetail.vehicleInfo') }}
+        </div>
+      </div>
+
+      <!-- 车辆信息 -->
+      <div class="margin-top text-left">
+        <el-row>
+          <el-col :span="24">
+            <el-row>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('adminCarDetailInfo.licensePlate') }}
+                  </label>
+                  <label>{{ adminCarDetailInfo.carNum }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('adminCarDetailInfo.carBrand') }}
+                  </label>
+                  <label>{{ adminCarDetailInfo.carBrand || '-' }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('adminCarDetailInfo.carType') }}
+                  </label>
+                  <label>{{ adminCarDetailInfo.leaseTypeName }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('adminCarDetailInfo.color') }}
+                  </label>
+                  <label>{{ adminCarDetailInfo.carColor || '-' }}</label>
+                </div>
+              </el-col>
+            </el-row>
+
+            <el-row>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('adminCarDetailInfo.plateType') }}
+                  </label>
+                  <label>{{ adminCarDetailInfo.carTypeName }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('adminCarDetailInfo.leaseStartTime') }}
+                  </label>
+                  <label>{{ adminCarDetailInfo.startTime }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('adminCarDetailInfo.leaseEndTime') }}
+                  </label>
+                  <label>{{ adminCarDetailInfo.endTime }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('adminCarDetailInfo.remark') }}
+                  </label>
+                  <label>{{ adminCarDetailInfo.remark }}</label>
+                </div>
+              </el-col>
+            </el-row>
+
+            <el-row>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('adminCarDetailInfo.parkingLot') }}
+                  </label>
+                  <label>{{ adminCarDetailInfo.areaNum }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('adminCarDetailInfo.parkingSpace') }}
+                  </label>
+                  <label>{{ adminCarDetailInfo.num }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('adminCarDetailInfo.status') }}
+                  </label>
+                  <label>{{ adminCarDetailInfo.stateName }}</label>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="form-group">
+                  <label class="col-form-label">
+                    {{ $t('adminCarDetailInfo.relatedHouse') }}
+                  </label>
+                  <label>{{ adminCarDetailInfo.roomName }}</label>
+                </div>
+              </el-col>
+            </el-row>
+          </el-col>
+        </el-row>
+      </div>
+
+      <divider></divider>
+
+
+      <div class="margin-top-sm">
+        <el-tabs v-model="adminCarDetailInfo._currentTab" @tab-click="handleTabClick(adminCarDetailInfo._currentTab)">
+          <el-tab-pane :label="$t('adminCarDetail.vehicleFee')" name="aCarDetailFee"></el-tab-pane>
+          <el-tab-pane :label="$t('adminCarDetail.paymentRecord')" name="aRoomDetailHisFee"></el-tab-pane>
+          <el-tab-pane :label="$t('adminCarDetail.modificationRecord')" name="aCarDetailHis"></el-tab-pane>
+          <el-tab-pane :label="$t('adminCarDetail.memberVehicle')" name="aCarDetailMember"></el-tab-pane>
+          <el-tab-pane :label="$t('adminCarDetail.ownerInfo')" name="aCarDetailOwner"></el-tab-pane>
+          <el-tab-pane :label="$t('adminCarDetail.ownerHouse')" name="aRoomDetailRoom"></el-tab-pane>
+          <el-tab-pane :label="$t('adminCarDetail.ownerVehicle')" name="aRoomDetailCar"></el-tab-pane>
+          <el-tab-pane :label="$t('adminCarDetail.licensePlateSync')" name="aCarDetailTransactionCar"></el-tab-pane>
+          <el-tab-pane :label="$t('adminCarDetail.parkingSpaceApplication')" name="aCarDetailApplySpace"></el-tab-pane>
+          <el-tab-pane :label="$t('adminCarDetail.accessRecord')" name="aCarDetailCarInout"></el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+
+    <div class="white-bg padding-left padding-right padding-top border-radius-bottom">
+      <a-car-detail-fee v-if="adminCarDetailInfo._currentTab === 'aCarDetailFee'" ref="aCarDetailFee"></a-car-detail-fee>
+      <a-room-detail-his-fee v-if="adminCarDetailInfo._currentTab === 'aRoomDetailHisFee'"
+        ref="aRoomDetailHisFee"></a-room-detail-his-fee>
+      <a-car-detail-his v-if="adminCarDetailInfo._currentTab === 'aCarDetailHis'" ref="aCarDetailHis"></a-car-detail-his>
+      <a-car-detail-member v-if="adminCarDetailInfo._currentTab === 'aCarDetailMember'"
+        ref="aCarDetailMember"></a-car-detail-member>
+      <a-car-detail-owner v-if="adminCarDetailInfo._currentTab === 'aCarDetailOwner'"
+        ref="aCarDetailOwner"></a-car-detail-owner>
+      <a-room-detail-room v-if="adminCarDetailInfo._currentTab === 'aRoomDetailRoom'"
+        ref="aRoomDetailRoom"></a-room-detail-room>
+      <a-room-detail-car v-if="adminCarDetailInfo._currentTab === 'aRoomDetailCar'"
+        ref="aRoomDetailCar"></a-room-detail-car>
+      <a-car-detail-transaction-car v-if="adminCarDetailInfo._currentTab === 'aCarDetailTransactionCar'"
+        ref="aCarDetailTransactionCar"></a-car-detail-transaction-car>
+      <a-car-detail-car-inout v-if="adminCarDetailInfo._currentTab === 'aCarDetailCarInout'"
+        ref="aCarDetailCarInout"></a-car-detail-car-inout>
+      <a-car-detail-apply-space v-if="adminCarDetailInfo._currentTab === 'aCarDetailApplySpace'"
+        ref="aCarDetailApplySpace"></a-car-detail-apply-space>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { getOwnerCarInfo } from '@/api/aCommunity/adminCarDetailApi'
+import ACarDetailFee from '@/components/aCommunity/aCarDetailFee'
+import ARoomDetailHisFee from '@/components/fee/aRoomDetailHisFee'
+import ACarDetailHis from '@/components/aCommunity/aCarDetailHis'
+import ACarDetailMember from '@/components/aCommunity/aCarDetailMember'
+import ACarDetailOwner from '@/components/aCommunity/aCarDetailOwner'
+import ARoomDetailRoom from '@/components/fee/aRoomDetailRoom'
+import ARoomDetailCar from '@/components/aCommunity/aRoomDetailCar'
+import ACarDetailTransactionCar from '@/components/aCommunity/aCarDetailTransactionCar'
+import ACarDetailApplySpace from '@/components/aCommunity/aCarDetailApplySpace'
+import ACarDetailCarInout from '@/components/aCommunity/aCarDetailCarInout'
+import divider from '@/components/system/divider'
+
+export default {
+  name: 'AdminCarDetailList',
+  components: {
+    ACarDetailFee,
+    ARoomDetailHisFee,
+    ACarDetailHis,
+    ACarDetailMember,
+    ACarDetailOwner,
+    ARoomDetailRoom,
+    ARoomDetailCar,
+    ACarDetailTransactionCar,
+    ACarDetailApplySpace,
+    ACarDetailCarInout,
+    divider
+  },
+  data() {
+    return {
+      adminCarDetailInfo: {
+        memberId: '',
+        carId: '',
+        carNum: '',
+        carTypeCd: '',
+        carTypeCdName: '',
+        carType: '',
+        carTypeName: '',
+        startTime: '',
+        endTime: '',
+        leaseType: '',
+        leaseTypeName: '',
+        areaNum: '',
+        num: '',
+        remark: '',
+        stateName: '',
+        carColor: '',
+        carBrand: '',
+        ownerId: '',
+        roomName: '',
+        carNumType: '',
+        paId: '',
+        _currentTab: 'aCarDetailFee',
+        needBack: false
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.adminCarDetailInfo.memberId = this.$route.query.memberId
+    if (this.adminCarDetailInfo.memberId) {
+      this.loadCarDetailInfo()
+    }
+  },
+  methods: {
+    async loadCarDetailInfo() {
+      const params = {
+        page: 1,
+        row: 1,
+        memberId: this.adminCarDetailInfo.memberId
+      }
+
+      const response = await getOwnerCarInfo(params)
+      const carInfo = response.data[0]
+      Object.assign(this.adminCarDetailInfo, carInfo)
+      this.handleTabClick(this.adminCarDetailInfo._currentTab)
+    },
+    handleTabClick(tab) {
+      this.adminCarDetailInfo._currentTab = tab
+      const tabData = {
+        memberId: this.adminCarDetailInfo.memberId,
+        carId: this.adminCarDetailInfo.carId,
+        ownerId: this.adminCarDetailInfo.ownerId,
+        carNum: this.adminCarDetailInfo.carNum,
+        paId: this.adminCarDetailInfo.paId,
+        areaNum: this.adminCarDetailInfo.areaNum
+      }
+
+      setTimeout(() => {
+        this.$refs[this.adminCarDetailInfo._currentTab].open(tabData)
+      }, 1000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.white-bg {
+  background-color: #fff;
+}
+
+.padding-left {
+  padding-left: 20px;
+}
+
+.padding-right {
+  padding-right: 20px;
+}
+
+.padding-top {
+  padding-top: 20px;
+}
+
+.border-radius-top {
+  border-radius: 4px 4px 0 0;
+}
+
+.border-radius-bottom {
+  border-radius: 0 0 4px 4px;
+}
+
+.margin-top {
+  margin-top: 20px;
+}
+
+.margin-top-sm {
+  margin-top: 10px;
+}
+
+.text-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.flex {
+  display: flex;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.vc-line-primary {
+  height: 1px;
+  background-color: #ebeef5;
+}
+
+.form-group {
+  margin-bottom: 15px;
+
+}
+
+.col-form-label {
+  margin-bottom: 5px;
+  color: #606266;
+}
+</style>
 \ No newline at end of file
@@ -6,52 +6,31 @@
       </el-col>
       <el-col :span="21">
         <el-card class="box-card">
-          <div slot="header" class="clearfix">
+          <div slot="header" class="flex justify-between">
             <span>{{ $t('adminAuthOwner.search.title') }}</span>
           </div>
           <el-row :gutter="20">
-            <el-col :span="6">
-              <el-select
-                v-model="searchForm.state"
-                :placeholder="$t('adminAuthOwner.search.state')"
-                clearable
-                class="filter-item"
-              >
-                <el-option
-                  v-for="item in statusOptions"
-                  :key="item.statusCd"
-                  :label="item.name"
-                  :value="item.statusCd"
-                />
+            <el-col :span="4">
+              <el-select v-model="searchForm.state" :placeholder="$t('adminAuthOwner.search.state')" clearable
+                class="filter-item">
+                <el-option v-for="item in statusOptions" :key="item.statusCd" :label="item.name"
+                  :value="item.statusCd" />
               </el-select>
             </el-col>
-            <el-col :span="6">
-              <el-input
-                v-model="searchForm.appUserName"
-                :placeholder="$t('adminAuthOwner.search.appUserName')"
-                clearable
-                class="filter-item"
-              />
+            <el-col :span="4">
+              <el-input v-model="searchForm.appUserName" :placeholder="$t('adminAuthOwner.search.appUserName')"
+                clearable class="filter-item" />
             </el-col>
-            <el-col :span="6">
-              <el-input
-                v-model="searchForm.idCard"
-                :placeholder="$t('adminAuthOwner.search.idCard')"
-                clearable
-                class="filter-item"
-              />
+            <el-col :span="4">
+              <el-input v-model="searchForm.idCard" :placeholder="$t('adminAuthOwner.search.idCard')" clearable
+                class="filter-item" />
             </el-col>
-            <el-col :span="6">
-              <el-input
-                v-model="searchForm.link"
-                :placeholder="$t('adminAuthOwner.search.link')"
-                clearable
-                class="filter-item"
-              />
+            <el-col :span="4">
+              <el-input v-model="searchForm.link" :placeholder="$t('adminAuthOwner.search.link')" clearable
+                class="filter-item" />
             </el-col>
-          </el-row>
-          <el-row :gutter="20" style="margin-top: 15px;">
-            <el-col :span="24" style="text-align: right;">
+
+            <el-col :span="4" >
               <el-button type="primary" @click="handleSearch">
                 {{ $t('common.search') }}
               </el-button>
@@ -63,96 +42,45 @@
         </el-card>
         <el-card class="box-card" style="margin-top: 20px;">
-          <div slot="header" class="clearfix">
+          <div slot="header" class="flex justify-between">
             <span>{{ $t('adminAuthOwner.list.title') }}</span>
           </div>
-          <el-table
-            v-loading="loading"
-            :data="tableData"
-            border
-            style="width: 100%"
-          >
-            <el-table-column
-              prop="communityName"
-              :label="$t('adminAuthOwner.table.communityName')"
-              align="center"
-            />
-            <el-table-column
-              :label="$t('adminAuthOwner.table.appUserName')"
-              align="center"
-            >
+          <el-table v-loading="loading" :data="tableData" border style="width: 100%">
+            <el-table-column prop="communityName" :label="$t('adminAuthOwner.table.communityName')" align="center" />
+            <el-table-column :label="$t('adminAuthOwner.table.appUserName')" align="center">
               <template slot-scope="scope">
                 <div>{{ scope.row.appUserName }}</div>
                 <div v-if="scope.row.ownerId">({{ scope.row.ownerId }})</div>
               </template>
             </el-table-column>
-            <el-table-column
-              prop="link"
-              :label="$t('adminAuthOwner.table.link')"
-              align="center"
-            />
-            <el-table-column
-              prop="roomName"
-              :label="$t('adminAuthOwner.table.roomName')"
-              align="center"
-            >
+            <el-table-column prop="link" :label="$t('adminAuthOwner.table.link')" align="center" />
+            <el-table-column prop="roomName" :label="$t('adminAuthOwner.table.roomName')" align="center">
               <template slot-scope="scope">
                 {{ scope.row.roomName || '-' }}
               </template>
             </el-table-column>
-            <el-table-column
-              prop="ownerTypeCdName"
-              :label="$t('adminAuthOwner.table.ownerTypeCdName')"
-              align="center"
-            >
+            <el-table-column prop="ownerTypeCdName" :label="$t('adminAuthOwner.table.ownerTypeCdName')" align="center">
               <template slot-scope="scope">
                 {{ scope.row.ownerTypeCdName || '-' }}
               </template>
             </el-table-column>
-            <el-table-column
-              prop="idCard"
-              :label="$t('adminAuthOwner.table.idCard')"
-              align="center"
-            >
+            <el-table-column prop="idCard" :label="$t('adminAuthOwner.table.idCard')" align="center">
               <template slot-scope="scope">
                 {{ scope.row.idCard || '-' }}
               </template>
             </el-table-column>
-            <el-table-column
-              prop="stateName"
-              :label="$t('adminAuthOwner.table.stateName')"
-              align="center"
-            />
-            <el-table-column
-              prop="remark"
-              :label="$t('adminAuthOwner.table.remark')"
-              align="center"
-            >
+            <el-table-column prop="stateName" :label="$t('adminAuthOwner.table.stateName')" align="center" />
+            <el-table-column prop="remark" :label="$t('adminAuthOwner.table.remark')" align="center">
               <template slot-scope="scope">
                 {{ scope.row.remark || '-' }}
               </template>
             </el-table-column>
-            <el-table-column
-              prop="createTime"
-              :label="$t('adminAuthOwner.table.createTime')"
-              align="center"
-            />
-            <el-table-column
-              prop="appTypeName"
-              :label="$t('adminAuthOwner.table.appTypeName')"
-              align="center"
-            />
+            <el-table-column prop="createTime" :label="$t('adminAuthOwner.table.createTime')" align="center" />
+            <el-table-column prop="appTypeName" :label="$t('adminAuthOwner.table.appTypeName')" align="center" />
           </el-table>
-          <el-pagination
-            :current-page="pagination.current"
-            :page-sizes="[10, 20, 30, 50]"
-            :page-size="pagination.size"
-            :total="pagination.total"
-            layout="total, sizes, prev, pager, next, jumper"
-            style="margin-top: 15px;"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          />
+          <el-pagination :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+            :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 15px;"
+            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
         </el-card>
       </el-col>
     </el-row>
@@ -246,11 +174,11 @@ export default {
 <style lang="scss" scoped>
 .admin-auth-owner-container {
   padding: 20px;
-  
+
   .box-card {
     margin-bottom: 20px;
   }
-  
+
   .filter-item {
     width: 100%;
   }