开发车辆详情页面

wuxw
1 parent 5f798b88
Showing 58 changed files with 2785 additions and 21 deletions
src/api/car/addCarModalApi.js
src/api/car/carDetailApi.js
src/api/car/carDetailApplyParkingSpaceApi.js
src/api/car/carDetailCarInoutApi.js
src/api/car/carDetailCouponApi.js
src/api/car/carDetailCouponOrderApi.js
src/api/car/carDetailFeeApi.js
src/api/car/carDetailTransactionCarApi.js
src/api/property/deleteParkingSpaceApplyApi.js
src/api/property/editMachineTranslateApi.js
src/api/property/editParkingSpaceApplyApi.js
src/components/car/addCarModal.vue
src/components/car/carDetailApplyParkingSpace.vue
src/components/car/carDetailApplyParkingSpaceDemo.vue
src/components/car/carDetailCarInout.vue
src/components/car/carDetailCarInoutDemo.vue
src/components/car/carDetailCoupon.vue
src/components/car/carDetailCouponDemo.vue
src/components/car/carDetailCouponOrder.vue
src/components/car/carDetailCouponOrderDemo.vue
+import request from '@/utils/request'
+export function saveOwnerCarMember(data) {
+  return request({
+    url: '/owner.saveOwnerCarMember',
+    method: 'post',
+    data
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+// Get owner car detail
+export function getOwnerCarDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryOwnerCars',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to get owner car detail'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// Update car information
+export function updateCarInfo(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/car.updateCarInfo',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || 'Failed to update car information'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// Get car fee list
+export function getCarFeeList(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.queryCarFee',
+      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)
+    })
+  })
+}
+
+// Get car payment history
+export function getCarPaymentHistory(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.queryCarPaymentHistory',
+      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)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function listParkingSpaceApply(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/parkingSpaceApply.listParkingSpaceApply',
+      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 getCarInoutDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/iot.getOpenApi',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取车辆进出记录失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function listParkingCouponCar(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/iot.getOpenApi',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取车辆优惠券列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function listParkingCouponCarOrder(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/iot.getOpenApi',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取优惠券核销订单失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function listFee(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.listFee',
+      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 getMachineTranslates(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/machineTranslate.listMachineTranslates',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取同步记录失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
 \ No newline at end of file
+import request from '@/utils/request'
+
+export function deleteParkingSpaceApply(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/parkingSpaceApply.deleteParkingSpaceApply',
+      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 resyncMachineTranslate(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/machineTranslate.resyncMachineTranslate',
+      method: 'post',
+      data
+    }).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 updateParkingSpaceApply(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/parkingSpaceApply.updateParkingSpaceApply',
+      method: 'post',
+      data
+    }).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>
+  <el-dialog :title="$t('addCarModal.addCar')" :visible.sync="visible" width="50%">
+    <el-form :model="addCarModelInfo" :rules="rules" ref="addCarForm">
+      <el-form-item :label="$t('addCarModal.licensePlate')" prop="carNum">
+        <el-input v-model="addCarModelInfo.carNum" :placeholder="$t('addCarModal.licensePlateRequired')"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('addCarModal.carBrand')" prop="carBrand">
+        <el-input v-model="addCarModelInfo.carBrand" :placeholder="$t('addCarModal.carBrandRequired')"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('addCarModal.carType')" prop="carType">
+        <el-select v-model="addCarModelInfo.carType" :placeholder="$t('addCarModal.carTypeRequired')"
+          style="width:100%">
+          <el-option v-for="carType in carTypes" :key="carType.statusCd" :label="carType.name"
+            :value="carType.statusCd"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('addCarModal.color')" prop="carColor">
+        <el-input v-model="addCarModelInfo.carColor" :placeholder="$t('addCarModal.colorRequired')"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('addCarModal.remark')">
+        <el-input type="textarea" v-model="addCarModelInfo.remark" :placeholder="$t('addCarModal.remarkPlaceholder')"
+          rows="3"></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="saveAddCarInfo">{{ $t('common.save') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { saveOwnerCarMember } from '@/api/car/addCarModalApi'
+import { getDict } from '@/api/community/communityApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AddCarModal',
+  data() {
+    return {
+      visible: false,
+      addCarModelInfo: {
+        flowComponent: 'addCar',
+        carNum: '',
+        carBrand: '',
+        carType: '',
+        carColor: '',
+        remark: "",
+        carId: ''
+      },
+      carTypes: [],
+      rules: {
+        carNum: [
+          { required: true, message: this.$t('addCarModal.licensePlateRequired'), trigger: 'blur' },
+          { min: 2, max: 12, message: this.$t('addCarModal.licensePlateInvalid'), trigger: 'blur' }
+        ],
+        carBrand: [
+          { required: true, message: this.$t('addCarModal.carBrandRequired'), trigger: 'blur' },
+          { max: 50, message: this.$t('addCarModal.carBrandTooLong'), trigger: 'blur' }
+        ],
+        carType: [
+          { required: true, message: this.$t('addCarModal.carTypeRequired'), trigger: 'change' }
+        ],
+        carColor: [
+          { required: true, message: this.$t('addCarModal.colorRequired'), trigger: 'blur' },
+          { max: 12, message: this.$t('addCarModal.colorTooLong'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.loadCarTypes()
+  },
+  methods: {
+    async loadCarTypes() {
+      try {
+        const data = await getDict('owner_car', 'car_type')
+        this.carTypes = data
+      } catch (error) {
+        console.error('获取字典数据失败:', error)
+      }
+    },
+    open(data) {
+      this.addCarModelInfo.carId = data.carId
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.addCarForm.resetFields()
+      })
+    },
+    saveAddCarInfo() {
+      this.$refs.addCarForm.validate(valid => {
+        if (valid) {
+          this.addCarModelInfo.communityId = this.communityId
+          saveOwnerCarMember(this.addCarModelInfo).then(response => {
+            if (response.code === 0) {
+              this.visible = false
+              this.clearAddCarModalInfo()
+              this.$emit('notify')
+              this.$message.success(this.$t('common.addSuccess'))
+            } else {
+              this.$message.error(response.msg)
+            }
+          }).catch(error => {
+            console.error('请求失败处理', error)
+            this.$message.error(error)
+          })
+        }
+      })
+    },
+    clearAddCarModalInfo() {
+      this.addCarModelInfo = {
+        flowComponent: 'addCar',
+        carNum: '',
+        carBrand: '',
+        carType: '',
+        carColor: '',
+        remark: "",
+        carNumType: '',
+        carId: ''
+      }
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-row>
+      <el-col :span="24" class="text-right">
+        <el-button type="primary" size="small" @click="_openAddParkingSpaceApplyModal">
+          {{$t('carDetailApplyParkingSpace.applyParkingSpace')}}
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <div class="margin-top">
+      <el-table :data="carDetailApplyParkingSpaceInfo.parkingSpaceApplys" border style="width: 100%">
+        <el-table-column prop="applyId" :label="$t('carDetailApplyParkingSpace.applyId')" align="center"></el-table-column>
+        <el-table-column prop="carNum" :label="$t('carDetailApplyParkingSpace.carNum')" align="center"></el-table-column>
+        <el-table-column :label="$t('carDetailApplyParkingSpace.parkingSpace')" align="center">
+          <template slot-scope="scope">
+            {{scope.row.psId ? `${scope.row.areaNum}停车场 - ${scope.row.num}停车位` : $t('carDetailApplyParkingSpace.none')}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="carBrand" :label="$t('carDetailApplyParkingSpace.carBrand')" align="center"></el-table-column>
+        <el-table-column :label="$t('carDetailApplyParkingSpace.carType')" align="center">
+          <template slot-scope="scope">
+            {{_getParkingSpaceApplyCatType(scope.row.carType)}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="carColor" :label="$t('carDetailApplyParkingSpace.color')" align="center"></el-table-column>
+        <el-table-column prop="startTime" :label="$t('carDetailApplyParkingSpace.startTime')" align="center"></el-table-column>
+        <el-table-column prop="endTime" :label="$t('carDetailApplyParkingSpace.endTime')" align="center"></el-table-column>
+        <el-table-column prop="applyPersonName" :label="$t('carDetailApplyParkingSpace.applicant')" align="center"></el-table-column>
+        <el-table-column prop="applyPersonLink" :label="$t('carDetailApplyParkingSpace.phone')" align="center"></el-table-column>
+        <el-table-column :label="$t('carDetailApplyParkingSpace.auditResult')" align="center">
+          <template slot-scope="scope">
+            <el-tag :type="getStateTagType(scope.row.state)">
+              {{_getParkingSpaceApplyState(scope.row.state)}}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('carDetailApplyParkingSpace.operation')" align="center">
+          <template slot-scope="scope">
+            <el-button-group>
+              <el-button v-if="scope.row.state == '1001'" size="mini" @click="_openAuditParkingSpaceApplyModal(scope.row)">
+                {{$t('carDetailApplyParkingSpace.audit')}}
+              </el-button>
+              <el-button v-if="scope.row.state == '1001'" size="mini" @click="_openEditParkingSpaceApplyModel(scope.row)">
+                {{$t('carDetailApplyParkingSpace.edit')}}
+              </el-button>
+              <el-button size="mini" @click="_openDeleteParkingSpaceApplyModel(scope.row)">
+                {{$t('carDetailApplyParkingSpace.delete')}}
+              </el-button>
+            </el-button-group>
+          </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, jumper"
+            :total="total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+    
+    <edit-parking-space-apply ref="editParkingSpaceApply"></edit-parking-space-apply>
+    <delete-parking-space-apply ref="deleteParkingSpaceApply"></delete-parking-space-apply>
+  </div>
+</template>
+
+<script>
+import { listParkingSpaceApply } from '@/api/car/carDetailApplyParkingSpaceApi'
+import EditParkingSpaceApply from '@/components/property/editParkingSpaceApply'
+import DeleteParkingSpaceApply from '@/components/property/deleteParkingSpaceApply'
+
+export default {
+  name: 'CarDetailApplyParkingSpace',
+  components: {
+    EditParkingSpaceApply,
+    DeleteParkingSpaceApply
+  },
+  data() {
+    return {
+      carDetailApplyParkingSpaceInfo: {
+        parkingSpaceApplys: [],
+        carId: '',
+        carNum: '',
+        memberId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  methods: {
+    switch(data) {
+      this.carDetailApplyParkingSpaceInfo.carId = data.carId
+      this.carDetailApplyParkingSpaceInfo.carNum = data.carNum
+      this.carDetailApplyParkingSpaceInfo.memberId = data.memberId
+      this._loadCarDetailApplyParkingSpaceData(this.currentPage, this.pageSize)
+    },
+    _loadCarDetailApplyParkingSpaceData(page, row) {
+      const params = {
+        communityId: this.$store.state.community.communityId,
+        carNum: this.carDetailApplyParkingSpaceInfo.carNum,
+        page,
+        row
+      }
+
+      listParkingSpaceApply(params).then(response => {
+        this.carDetailApplyParkingSpaceInfo.parkingSpaceApplys = response.data.data
+        this.total = response.data.total
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadCarDetailApplyParkingSpaceData(val, this.pageSize)
+    },
+    _openAddParkingSpaceApplyModal() {
+      this.$router.push('/property/addParkingSpaceApply')
+    },
+    _openAuditParkingSpaceApplyModal(apply) {
+      this.$router.push(`/property/auditParkingSpaceApply?applyId=${apply.applyId}`)
+    },
+    _openEditParkingSpaceApplyModel(parkingSpaceApply) {
+      this.$refs.editParkingSpaceApply.open(parkingSpaceApply)
+    },
+    _openDeleteParkingSpaceApplyModel(parkingSpaceApply) {
+      this.$refs.deleteParkingSpaceApply.open(parkingSpaceApply)
+    },
+    _getParkingSpaceApplyState(state) {
+      const states = {
+        '1001': this.$t('carDetailApplyParkingSpace.pendingReview'),
+        '2002': this.$t('carDetailApplyParkingSpace.pendingPayment'),
+        '3003': this.$t('carDetailApplyParkingSpace.completed'),
+        '4004': this.$t('carDetailApplyParkingSpace.auditFailed')
+      }
+      return states[state] || this.$t('carDetailApplyParkingSpace.abnormalStatus')
+    },
+    _getParkingSpaceApplyCatType(type) {
+      const types = {
+        '9901': this.$t('carDetailApplyParkingSpace.familyCar'),
+        '9902': this.$t('carDetailApplyParkingSpace.bus'),
+        '9903': this.$t('carDetailApplyParkingSpace.truck')
+      }
+      return types[type] || this.$t('carDetailApplyParkingSpace.abnormalVehicle')
+    },
+    getStateTagType(state) {
+      const types = {
+        '1001': 'info',
+        '2002': 'warning',
+        '3003': 'success',
+        '4004': 'danger'
+      }
+      return types[state] || 'info'
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <car-detail-apply-parking-space ref="carDetailApplyParkingSpace"></car-detail-apply-parking-space>
+</template>
+
+<script>
+import CarDetailApplyParkingSpace from '@/components/car/carDetailApplyParkingSpace'
+
+export default {
+  components: {
+    CarDetailApplyParkingSpace
+  },
+  methods: {
+    open(data) {
+      this.$refs.carDetailApplyParkingSpace.switch(data)
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <div class="margin-top">
+      <el-table :data="carDetailCarInoutInfo.carIns" border style="width: 100%">
+        <el-table-column :label="$t('carDetailCarInout.entryImage')" align="center">
+          <template slot-scope="scope">
+            <el-image style="width: 60px; height: 60px;" :src="scope.row.photoJpg || '/img/noPhoto.jpg'"
+              :preview-src-list="[scope.row.photoJpg]" fit="cover" class="border-radius">
+            </el-image>
+          </template>
+        </el-table-column>
+        <el-table-column prop="inoutId" :label="$t('carDetailCarInout.inoutId')" align="center"></el-table-column>
+        <el-table-column :label="$t('carDetailCarInout.carStatus')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.carInout === '3306' ? $t('carDetailCarInout.entry') :
+              $t('carDetailCarInout.exit')}}({{ scope.row.stateName }})
+          </template>
+        </el-table-column>
+        <el-table-column prop="carNum" :label="$t('carDetailCarInout.carNum')" align="center"></el-table-column>
+        <el-table-column prop="paNum" :label="$t('carDetailCarInout.parkingLot')" align="center"></el-table-column>
+        <el-table-column :label="$t('carDetailCarInout.billingRule')" align="center">
+          <template slot-scope="scope">
+            <el-link type="primary" @click="_viewTempFeeConfigInOutCar(scope.row.configId)">
+              {{ scope.row.feeName }} <i class="el-icon-info"></i>
+            </el-link>
+          </template>
+        </el-table-column>
+        <el-table-column prop="carTypeName" :label="$t('carDetailCarInout.carType')" align="center"></el-table-column>
+        <el-table-column prop="inTime" :label="$t('carDetailCarInout.entryTime')" align="center"></el-table-column>
+        <el-table-column :label="$t('carDetailCarInout.exitTime')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.carInout !== '3307' ? '-' : scope.row.outTime }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('carDetailCarInout.parkingTime')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.hours }}{{ $t('carDetailCarInout.hour') }}{{ scope.row.min }}{{ $t('carDetailCarInout.minute') }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('carDetailCarInout.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('carDetailCarInout.remark')" 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, jumper" :total="total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCarInoutDetail } from '@/api/car/carDetailCarInoutApi'
+
+export default {
+  name: 'CarDetailCarInout',
+  data() {
+    return {
+      carDetailCarInoutInfo: {
+        carIns: [],
+        carId: '',
+        memberId: '',
+        carNum: '',
+        areaNum: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  methods: {
+    switch(data) {
+      this.carDetailCarInoutInfo.carId = data.carId
+      this.carDetailCarInoutInfo.carNum = data.carNum
+      this.carDetailCarInoutInfo.areaNum = data.areaNum
+      this.carDetailCarInoutInfo.memberId = data.memberId
+      this._loadCarDetailCarInoutData(this.currentPage, this.pageSize)
+    },
+    _loadCarDetailCarInoutData(page, row) {
+      const params = {
+        communityId: this.$store.state.community.communityId,
+        carNum: this.carDetailCarInoutInfo.carNum,
+        paNum: this.carDetailCarInoutInfo.areaNum,
+        iotApiCode: 'listCarInoutDetailBmoImpl',
+        page,
+        row
+      }
+
+      getCarInoutDetail(params).then(response => {
+        this.carDetailCarInoutInfo.carIns = response.data.data
+        this.total = response.data.total
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadCarDetailCarInoutData(val, this.pageSize)
+    },
+    _viewTempFeeConfigInOutCar(configId) {
+      // 查看计费规则详情
+      console.log(configId)
+    },
+    _carInoutOpenFile(fileUrl) {
+      // 打开文件预览
+      window.open(fileUrl)
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <car-detail-car-inout ref="carDetailCarInout"></car-detail-car-inout>
+</template>
+
+<script>
+import CarDetailCarInout from '@/components/car/carDetailCarInout'
+
+export default {
+  components: {
+    CarDetailCarInout
+  },
+  methods: {
+    open(data) {
+      this.$refs.carDetailCarInout.switch(data)
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <div class="margin-top">
+      <el-table :data="carDetailCouponInfo.carDetailCoupons" border style="width: 100%">
+        <el-table-column prop="carNum" :label="$t('carDetailCoupon.car')" align="center"></el-table-column>
+        <el-table-column prop="couponName" :label="$t('carDetailCoupon.coupon')" align="center"></el-table-column>
+        <el-table-column prop="shopName" :label="$t('carDetailCoupon.shop')" align="center"></el-table-column>
+        <el-table-column prop="paName" :label="$t('carDetailCoupon.parkingLot')" align="center"></el-table-column>
+        <el-table-column prop="giveWayName" :label="$t('carDetailCoupon.giveWay')" align="center"></el-table-column>
+        <el-table-column prop="typeCdName" :label="$t('carDetailCoupon.couponType')" align="center"></el-table-column>
+        <el-table-column prop="value" :label="$t('carDetailCoupon.value')" align="center"></el-table-column>
+        <el-table-column prop="startTime" :label="$t('carDetailCoupon.startTime')" align="center"></el-table-column>
+        <el-table-column prop="endTime" :label="$t('carDetailCoupon.endTime')" align="center"></el-table-column>
+        <el-table-column prop="createTime" :label="$t('carDetailCoupon.giveTime')" align="center"></el-table-column>
+        <el-table-column prop="stateName" :label="$t('carDetailCoupon.status')" align="center"></el-table-column>
+        <el-table-column prop="remark" :label="$t('carDetailCoupon.remark')" 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, jumper"
+            :total="total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listParkingCouponCar } from '@/api/car/carDetailCouponApi'
+
+export default {
+  name: 'CarDetailCoupon',
+  data() {
+    return {
+      carDetailCouponInfo: {
+        carDetailCoupons: [],
+        carId: '',
+        memberId: '',
+        carNum: '',
+        paId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  methods: {
+    switch(data) {
+      this.carDetailCouponInfo.carId = data.carId
+      this.carDetailCouponInfo.carNum = data.carNum
+      this.carDetailCouponInfo.paId = data.paId
+      this.carDetailCouponInfo.memberId = data.memberId
+      this._loadCarDetailCouponData(this.currentPage, this.pageSize)
+    },
+    _loadCarDetailCouponData(page, row) {
+      const params = {
+        communityId: this.$store.state.community.communityId,
+        carNum: this.carDetailCouponInfo.carNum,
+        iotApiCode: 'listParkingCouponCarBmoImpl',
+        page,
+        row
+      }
+
+      listParkingCouponCar(params).then(response => {
+        this.carDetailCouponInfo.carDetailCoupons = response.data.data
+        this.total = response.data.total
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadCarDetailCouponData(val, this.pageSize)
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <car-detail-coupon ref="carDetailCoupon"></car-detail-coupon>
+</template>
+
+<script>
+import CarDetailCoupon from '@/components/car/carDetailCoupon'
+
+export default {
+  components: {
+    CarDetailCoupon
+  },
+  methods: {
+    open(data) {
+      this.$refs.carDetailCoupon.switch(data)
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <div class="margin-top">
+      <el-table :data="carDetailCouponOrderInfo.orders" border style="width: 100%">
+        <el-table-column prop="orderId" :label="$t('carDetailCouponOrder.orderId')" align="center"></el-table-column>
+        <el-table-column prop="carNum" :label="$t('carDetailCouponOrder.carNum')" align="center"></el-table-column>
+        <el-table-column prop="couponName" :label="$t('carDetailCouponOrder.coupon')" align="center"></el-table-column>
+        <el-table-column prop="shopName" :label="$t('carDetailCouponOrder.shop')" align="center"></el-table-column>
+        <el-table-column prop="paName" :label="$t('carDetailCouponOrder.parkingLot')" align="center"></el-table-column>
+        <el-table-column prop="machineName" :label="$t('carDetailCouponOrder.machine')" align="center"></el-table-column>
+        <el-table-column prop="createTime" :label="$t('carDetailCouponOrder.verifyTime')" align="center"></el-table-column>
+        <el-table-column prop="remark" :label="$t('carDetailCouponOrder.remark')" 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, jumper"
+            :total="total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listParkingCouponCarOrder } from '@/api/car/carDetailCouponOrderApi'
+
+export default {
+  name: 'CarDetailCouponOrder',
+  data() {
+    return {
+      carDetailCouponOrderInfo: {
+        orders: [],
+        carId: '',
+        memberId: '',
+        carNum: '',
+        paId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  methods: {
+    switch(data) {
+      this.carDetailCouponOrderInfo.carId = data.carId
+      this.carDetailCouponOrderInfo.carNum = data.carNum
+      this.carDetailCouponOrderInfo.paId = data.paId
+      this.carDetailCouponOrderInfo.memberId = data.memberId
+      this._loadCarDetailCouponOrderData(this.currentPage, this.pageSize)
+    },
+    _loadCarDetailCouponOrderData(page, row) {
+      const params = {
+        communityId: this.$store.state.community.communityId,
+        carNum: this.carDetailCouponOrderInfo.carNum,
+        iotApiCode: 'listParkingCouponCarOrderBmoImpl',
+        page,
+        row
+      }
+
+      listParkingCouponCarOrder(params).then(response => {
+        this.carDetailCouponOrderInfo.orders = response.data.data
+        this.total = response.data.total
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadCarDetailCouponOrderData(val, this.pageSize)
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <car-detail-coupon-order ref="carDetailCouponOrder"></car-detail-coupon-order>
+</template>
+
+<script>
+import CarDetailCouponOrder from '@/components/car/carDetailCouponOrder'
+
+export default {
+  components: {
+    CarDetailCouponOrder
+  },
+  methods: {
+    open(data) {
+      this.$refs.carDetailCouponOrder.switch(data)
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-row>
+      <el-col :span="24" class="text-right">
+        <el-button type="primary" size="small" style="margin-left:10px" @click="_openCarCreateFeeAddModal()">
+          {{ $t('carDetailFee.createFee') }}
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <div class="margin-top">
+      <el-table :data="carDetailFeeInfo.fees" style="width: 100%">
+        <el-table-column prop="feeName" :label="$t('carDetailFee.feeItem')" align="center">
+          <template #default="{ row }">
+            <span class="hand" @click="_viewCarFeeConfig(row)">{{ 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.amountReceivable')"
+          align="center"></el-table-column>
+        <el-table-column prop="startTime" :label="$t('carDetailFee.accountingTime')" align="center"></el-table-column>
+        <el-table-column :label="$t('carDetailFee.receivablePeriod')" align="center">
+          <template #default="{ row }">
+            {{ _getEndTime(row) }}~<br />{{ _getDeadlineTime(row) }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('carDetailFee.remark')" align="center">
+          <template #default="{ row }">
+            <div v-if="row.feeTypeCd == '888800010015' || row.feeTypeCd == '888800010016'">
+              <div>
+                <span>{{ $t('carDetailFee.previousReading') }}</span>：{{ row.preDegrees }}
+              </div>
+              <div>
+                <span>{{ $t('carDetailFee.currentReading') }}</span>：{{ row.curDegrees }}
+              </div>
+              <div>
+                <span>{{ $t('carDetailFee.unitPrice') }}</span>：{{ row.mwPrice ? row.mwPrice : row.squarePrice }}
+              </div>
+              <div>
+                <span>{{ $t('carDetailFee.additionalFee') }}</span>：{{ row.additionalAmount }}
+              </div>
+            </div>
+            <div v-else>
+              <div>
+                <span>{{ $t('carDetailFee.unitPrice') }}</span>：{{ row.squarePrice }}
+              </div>
+              <div>
+                <span>{{ $t('carDetailFee.fixedFee') }}</span>：{{ 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">
+          <template #default="{ row }">
+            <el-button type="text" v-if="row.state != '2009001' && hasPrivilege('502020082314267912')"
+              @click="_payFee(row)">
+              {{ $t('carDetailFee.payment') }}
+            </el-button>
+            <el-button type="text" @click="_payFeeHis(row)">
+              {{ $t('carDetailFee.history') }}
+            </el-button>
+            <el-button type="text" v-if="hasPrivilege('502020090604200029')" @click="_deleteFee(row)">
+              {{ $t('carDetailFee.cancel') }}
+            </el-button>
+            <el-button type="text" v-if="row.state != '2009001' && hasPrivilege('502020090427190001')"
+              @click="_editFee(row)">
+              {{ $t('carDetailFee.change') }}
+            </el-button>
+            <el-button type="text" @click="_viewCarFee(row)">
+              {{ $t('carDetailFee.detail') }}
+            </el-button>
+          </template>
+        </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="handleCurrentChange" :current-page="pagination.currentPage"
+            :page-size="pagination.pageSize" :total="pagination.total" layout="prev, pager, next, jumper">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+
+    <add-meter-water ref="addMeterWater"></add-meter-water>
+    <car-create-fee-add ref="carCreateFeeAdd"></car-create-fee-add>
+    <delete-fee ref="deleteFee"></delete-fee>
+    <edit-fee ref="editFee"></edit-fee>
+  </div>
+</template>
+
+<script>
+import { listFee } from '@/api/car/carDetailFeeApi'
+import AddMeterWater from '@/components/fee/addMeterWater'
+import CarCreateFeeAdd from '@/components/fee/carCreateFeeAdd'
+import DeleteFee from '@/components/fee/deleteFee'
+import EditFee from '@/components/fee/editFee'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'CarDetailFee',
+  components: {
+    AddMeterWater,
+    CarCreateFeeAdd,
+    DeleteFee,
+    EditFee
+  },
+  data() {
+    return {
+      carDetailFeeInfo: {
+        fees: [],
+        carId: '',
+        memberId: '',
+        carNum: ''
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(data) {
+      this.carDetailFeeInfo.carId = data.carId
+      this.carDetailFeeInfo.carNum = data.carNum
+      this.carDetailFeeInfo.memberId = data.memberId
+      this._loadCarDetailFeeData(1, this.pagination.pageSize)
+    },
+    switch(data) {
+      this.carDetailFeeInfo.carId = data.carId
+      this.carDetailFeeInfo.carNum = data.carNum
+      this.carDetailFeeInfo.memberId = data.memberId
+      this._loadCarDetailFeeData(1, this.pagination.pageSize)
+    },
+    notify() {
+      this._loadCarDetailFeeData(this.pagination.currentPage, this.pagination.pageSize)
+    },
+    handleCurrentChange(val) {
+      this.pagination.currentPage = val
+      this._loadCarDetailFeeData(val, this.pagination.pageSize)
+    },
+    _loadCarDetailFeeData(page, row) {
+      const params = {
+        communityId: this.communityId,
+        payerObjId: this.carDetailFeeInfo.memberId,
+        page: page,
+        row: row
+      }
+
+      listFee(params).then(response => {
+        this.carDetailFeeInfo.fees = response.fees
+        this.pagination.total = response.records
+      }).catch(error => {
+        console.error('请求失败处理', error)
+      })
+    },
+    _payFee(fee) {
+      fee.roomName = this.carDetailFeeInfo.carNum
+      this.$router.push(`/views/fee/payFeeOrder?feeId=${fee.feeId}`)
+    },
+    _payFeeHis(fee) {
+      this.$router.push(`/views/fee/propertyFee?${this.objToQueryString(fee)}`)
+    },
+    _editFee(fee) {
+      this.$refs.editFee.open(fee)
+    },
+    _deleteFee(fee) {
+      this.$refs.deleteFee.open({
+        communityId: this.communityId,
+        feeId: fee.feeId
+      })
+    },
+    _openCarCreateFeeAddModal() {
+      this.$refs.carCreateFeeAdd.open({
+        isMore: false,
+        car: this.carDetailFeeInfo
+      })
+    },
+    _openAddMeterWaterModal() {
+      this.$refs.addMeterWater.open({
+        roomId: this.carDetailFeeInfo.carId,
+        roomName: this.carDetailFeeInfo.carNum,
+        ownerName: this.carDetailFeeInfo.parkingName,
+        objType: '6666'
+      })
+    },
+    _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) {
+      // 实现查看费用配置逻辑
+      //window.open(`/#/views/fee/feeDetailConfig?configId=${fee.configId}`)
+      console.log(fee)
+    },
+    _viewCarFee(fee) {
+      // 实现查看费用详情逻辑
+      window.open(`/#/views/fee/feeDetail?feeId=${fee.feeId}`)
+    },
+    objToQueryString(obj) {
+      return Object.keys(obj).map(key => `${key}=${obj[key]}`).join('&')
+    },
+  }
+}
+</script>
+
+<style scoped>
+.hand {
+  cursor: pointer;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.margin-top {
+  margin-top: 20px;
+}
+</style>
 \ No newline at end of file
+<template>
+  <car-detail-fee ref="carDetailFee"></car-detail-fee>
+</template>
+
+<script>
+import CarDetailFee from '@/components/car/carDetailFee'
+
+export default {
+  components: {
+    CarDetailFee
+  },
+  methods: {
+    open(data) {
+      this.$refs.carDetailFee.switch(data)
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div>
+    <el-row>
+      <el-col :span="24" class="text-right">
+        <el-button type="primary" size="small" @click="_addOwnerCarMember">
+          {{ $t('common.add') }}
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <div class="margin-top">
+      <el-table :data="carDetailMemberInfo.ownerCars" style="width: 100%">
+        <el-table-column prop="carNum" :label="$t('carDetailMember.licensePlate')" align="center"></el-table-column>
+        <el-table-column prop="roomName" :label="$t('carDetailMember.roomNumber')" 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 #default="{ row }">
+            {{ row.ownerName }}({{ row.link }})
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('carDetailMember.parkingSpace')" align="center">
+          <template #default="{ row }">
+            <span v-if="row.areaNum">
+              {{ row.areaNum }}{{ $t('carDetailMember.parkingLot') }}{{ row.num }}{{ $t('carDetailMember.parkingSpace') }}
+            </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 #default="{ row }">
+            {{ row.stateName }}
+            <span v-if="row.iotStateName">
+              ({{ row.iotStateName }})
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('carDetailMember.operation')" align="center">
+          <template #default="{ row }">
+            <el-button type="text" @click="_openEditOwnerCar(row)">
+              {{ $t('common.edit') }}
+            </el-button>
+            <el-button type="text" @click="_openDelOwnerCarModel(row)">
+              {{ $t('common.delete') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="24" class="text-right">
+          <el-pagination @current-change="handleCurrentChange" :current-page="pagination.currentPage"
+            :page-size="pagination.pageSize" :total="pagination.total" layout="prev, pager, next, jumper">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+
+    <add-car-modal ref="addCarModal" @notify="notify"></add-car-modal>
+    <edit-member-car ref="editMemberCar" @notify="notify"></edit-member-car>
+    <delete-owner-car ref="deleteOwnerCar" @notify="notify"></delete-owner-car>
+  </div>
+</template>
+
+<script>
+import { getOwnerCarDetail } from '@/api/car/carDetailApi'
+import AddCarModal from '@/components/car/addCarModal'
+import EditMemberCar from '@/components/car/editMemberCar'
+import DeleteOwnerCar from '@/components/car/deleteOwnerCar'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'CarDetailMember',
+  components: {
+    AddCarModal,
+    EditMemberCar,
+    DeleteOwnerCar
+  },
+  data() {
+    return {
+      carDetailMemberInfo: {
+        ownerCars: [],
+        carId: '',
+        carNum: '',
+        memberId: ''
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    switch(data) {
+      this.carDetailMemberInfo.carId = data.carId
+      this.carDetailMemberInfo.carNum = data.carNum
+      this.carDetailMemberInfo.memberId = data.memberId
+      this._loadCarDetailMemberData(1, this.pagination.pageSize)
+    },
+    notify() {
+      this._loadCarDetailMemberData(this.pagination.currentPage, this.pagination.pageSize)
+    },
+    handleCurrentChange(val) {
+      this.pagination.currentPage = val
+      this._loadCarDetailMemberData(val, this.pagination.pageSize)
+    },
+    _loadCarDetailMemberData(page, row) {
+      const params = {
+        communityId: this.communityId,
+        carId: this.carDetailMemberInfo.carId,
+        carTypeCd: '1002',
+        page: page,
+        row: row
+      }
+
+      getOwnerCarDetail(params).then(response => {
+        this.carDetailMemberInfo.ownerCars = response.data
+        this.pagination.total = response.records
+      }).catch(error => {
+        console.error('请求失败处理', error)
+      })
+    },
+    _addOwnerCarMember() {
+      this.$refs.addCarModal.open({
+        carId: this.carDetailMemberInfo.carId
+      })
+    },
+    _openEditOwnerCar(car) {
+      this.$refs.editMemberCar.open(car)
+    },
+    _openDelOwnerCarModel(car) {
+      this.$refs.deleteOwnerCar.open(car)
+    },
+    _viewIotStateRemark(car) {
+      const data = {
+        "同步说明": car.iotRemark
+      }
+      this.$emit('viewData', {
+        title: `${car.carNum} 同步物联网详情`,
+        data: data
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.text-right {
+  text-align: right;
+}
+</style>
 \ No newline at end of file
+<template>
+  <div class="margin-top">
+    <div class="margin-top-lg"></div>
+    <div class="margin-top">
+      <el-table :data="carDetailTransactionCarInfo.machineTranslates" border style="width: 100%">
+        <el-table-column prop="machineTranslateId" :label="$t('carDetailTransactionCar.syncId')" align="center"></el-table-column>
+        <el-table-column prop="machineCode" :label="$t('carDetailTransactionCar.deviceCode')" align="center"></el-table-column>
+        <el-table-column prop="typeCdName" :label="$t('carDetailTransactionCar.objectType')" align="center"></el-table-column>
+        <el-table-column prop="objName" :label="$t('carDetailTransactionCar.objectName')" align="center"></el-table-column>
+        <el-table-column prop="machineCmdName" :label="$t('carDetailTransactionCar.command')" align="center"></el-table-column>
+        <el-table-column prop="stateName" :label="$t('carDetailTransactionCar.status')" align="center"></el-table-column>
+        <el-table-column prop="remark" :label="$t('carDetailTransactionCar.remark')" align="center" width="80px"></el-table-column>
+        <el-table-column prop="updateTime" :label="$t('carDetailTransactionCar.syncTime')" align="center"></el-table-column>
+        <el-table-column :label="$t('carDetailTransactionCar.operation')" align="center">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="_openEditMachineTranslateModel(scope.row)">
+              {{$t('carDetailTransactionCar.resync')}}
+            </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, jumper"
+            :total="total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+    
+    <edit-machine-translate ref="editMachineTranslate"></edit-machine-translate>
+  </div>
+</template>
+
+<script>
+import { getMachineTranslates } from '@/api/car/carDetailTransactionCarApi'
+import EditMachineTranslate from '@/components/property/editMachineTranslate'
+
+export default {
+  name: 'CarDetailTransactionCar',
+  components: {
+    EditMachineTranslate
+  },
+  data() {
+    return {
+      carDetailTransactionCarInfo: {
+        machineTranslates: [],
+        ownerId: '',
+        carId: '',
+        memberId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  methods: {
+    switch(data) {
+      this.carDetailTransactionCarInfo.carId = data.carId
+      this.carDetailTransactionCarInfo.memberId = data.memberId
+      this._loadCarDetailTransactionCarData(this.currentPage, this.pageSize)
+    },
+    _loadCarDetailTransactionCarData(page, row) {
+      const params = {
+        page,
+        row,
+        communityId: this.$store.state.community.communityId,
+        objId: this.carDetailTransactionCarInfo.memberId,
+        typeCd: '4455'
+      }
+
+      getMachineTranslates(params).then(response => {
+        this.carDetailTransactionCarInfo.machineTranslates = response.data.machineTranslates
+        this.total = response.data.total
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadCarDetailTransactionCarData(val, this.pageSize)
+    },
+    _openEditMachineTranslateModel(machineTranslate) {
+      this.$refs.editMachineTranslate.open(machineTranslate)
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <car-detail-transaction-car ref="carDetailTransactionCar"></car-detail-transaction-car>
+</template>
+
+<script>
+import CarDetailTransactionCar from '@/components/car/carDetailTransactionCar'
+
+export default {
+  components: {
+    CarDetailTransactionCar
+  },
+  methods: {
+    open(data) {
+      this.$refs.carDetailTransactionCar.switch(data)
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog :title="$t('editMemberCar.edit')" :visible.sync="visible" width="50%">
+    <el-form :model="editMemberCarInfo" :rules="rules" ref="editMemberCarForm">
+      <el-form-item :label="$t('editMemberCar.licensePlate')" prop="carNum">
+        <el-input v-model="editMemberCarInfo.carNum" :placeholder="$t('editMemberCar.licensePlateRequired')"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('editMemberCar.carBrand')">
+        <el-input v-model="editMemberCarInfo.carBrand" :placeholder="$t('editMemberCar.carBrandOptional')"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('editMemberCar.carType')" prop="carType">
+        <el-select v-model="editMemberCarInfo.carType" :placeholder="$t('editMemberCar.carTypeRequired')" style="width:100%">
+          <el-option v-for="carType in carTypes" :key="carType.statusCd" 
+                     :label="carType.name" :value="carType.statusCd"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('editMemberCar.color')">
+        <el-input v-model="editMemberCarInfo.carColor" :placeholder="$t('editMemberCar.colorOptional')"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('editMemberCar.remark')">
+        <el-input type="textarea" v-model="editMemberCarInfo.remark" :placeholder="$t('editMemberCar.remarkPlaceholder')" rows="3"></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="_submitEditMemberCarInfo">{{ $t('common.save') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { editOwnerCar } from '@/api/car/listOwnerCarApi'
+import { getDict } from '@/api/community/communityApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditMemberCar',
+  data() {
+    return {
+      visible: false,
+      editMemberCarInfo: {
+        carId: '',
+        memberId: '',
+        carNum: '',
+        carBrand: '',
+        carType: '',
+        carColor: '',
+        remark: "",
+        startTime: '',
+        endTime: '',
+        carNumType: '',
+        leaseType: '',
+      },
+      carTypes: [],
+      rules: {
+        carNum: [
+          { required: true, message: this.$t('editMemberCar.licensePlateRequired'), trigger: 'blur' },
+          { min: 2, max: 12, message: this.$t('editMemberCar.licensePlateInvalid'), trigger: 'blur' }
+        ],
+        carType: [
+          { required: true, message: this.$t('editMemberCar.carTypeRequired'), trigger: 'change' }
+        ],
+        memberId: [
+          { required: true, message: this.$t('editMemberCar.carDataError'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.loadCarTypes()
+  },
+  methods: {
+    async loadCarTypes() {
+      try {
+        const data = await getDict('owner_car', 'car_type')
+        this.carTypes = data
+      } catch (error) {
+        console.error('获取字典数据失败:', error)
+      }
+    },
+    open(carInfo) {
+      this.editMemberCarInfo = Object.assign({}, carInfo)
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.editMemberCarForm.clearValidate()
+      })
+    },
+    _submitEditMemberCarInfo() {
+      this.$refs.editMemberCarForm.validate(valid => {
+        if (valid) {
+          this.editMemberCarInfo.communityId = this.communityId
+          editOwnerCar(this.editMemberCarInfo).then(response => {
+            if (response.code === 0) {
+              this.visible = false
+              this.$emit('notify')
+              this.$message.success(this.$t('common.editSuccess'))
+            } else {
+              this.$message.error(response.msg)
+            }
+          }).catch(error => {
+            console.error('请求失败处理', error)
+            this.$message.error(error)
+          })
+        }
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <div class="margin-top">
+    <el-row class="margin-top-lg">
+      <el-col :span="24" class="text-right">
+        <el-button type="primary" size="small" style="margin-left:10px" v-if="hasPrivilege('502020082314267912')"
+          @click="_openBatchPayRoomFeeModal()">
+          {{ $t('ownerDetailOweFee.batchPayment') }}
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <div class="margin-top">
+      <el-table :data="ownerDetailOweFeeInfo.fees" style="width: 100%">
+        <el-table-column prop="payerObjName" :label="$t('ownerDetailOweFee.paymentObject')"
+          align="center"></el-table-column>
+        <el-table-column prop="ownerName" :label="$t('ownerDetailOweFee.ownerName')" align="center"></el-table-column>
+        <el-table-column prop="ownerTel" :label="$t('ownerDetailOweFee.phone')" align="center"></el-table-column>
+        <el-table-column prop="endTime" :label="$t('ownerDetailOweFee.startTime')" align="center"></el-table-column>
+        <el-table-column prop="deadlineTime" :label="$t('ownerDetailOweFee.endTime')" align="center"></el-table-column>
+        <el-table-column prop="amountOwed" :label="$t('ownerDetailOweFee.totalAmount')"
+          align="center"></el-table-column>
+        <el-table-column prop="updateTime" :label="$t('ownerDetailOweFee.updateTime')" align="center"></el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="12">
+          <span>{{ $t('ownerDetailOweFee.paymentNotice') }}</span>
+        </el-col>
+        <el-col :span="12" class="text-right">
+          <el-pagination @current-change="handleCurrentChange" :current-page="pagination.currentPage"
+            :page-size="pagination.pageSize" :total="pagination.total" layout="prev, pager, next, jumper">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryReportOweFee } from '@/api/fee/listOweFeeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'OwnerDetailOweFee',
+  data() {
+    return {
+      ownerDetailOweFeeInfo: {
+        fees: [],
+        ownerId: ''
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    switch(data) {
+      this.ownerDetailOweFeeInfo.ownerId = data.ownerId
+      this._loadOwnerDetailOweFeeData(1, this.pagination.pageSize)
+    },
+    handleCurrentChange(val) {
+      this.pagination.currentPage = val
+      this._loadOwnerDetailOweFeeData(val, this.pagination.pageSize)
+    },
+    _loadOwnerDetailOweFeeData(page, row) {
+      const params = {
+        communityId: this.communityId,
+        ownerId: this.ownerDetailOweFeeInfo.ownerId,
+        page: page,
+        row: row
+      }
+
+      queryReportOweFee(params).then(response => {
+        this.ownerDetailOweFeeInfo.fees = response.data
+        this.pagination.total = response.records
+      }).catch(error => {
+        console.error('请求失败处理', error)
+      })
+    },
+    _openBatchPayRoomFeeModal() {
+      this.$router.push(`/views/fee/batchPayFeeOrder?ownerId=${this.ownerDetailOweFeeInfo.ownerId}&payerObjType=3333`)
+    },
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.margin-top-lg {
+  margin-top: 30px;
+}
+
+.text-right {
+  text-align: right;
+}
+</style>
 \ No newline at end of file
 <template>
-  <el-dialog :title="$t('carCreateFeeAdd.createFee')" :visible.sync="visible" width="50%" @close="handleClose">
+  <el-dialog :title="$t('carCreateFeeAdd.createFee')" :visible.sync="visible" width="40%" @close="handleClose">
     <el-form :model="form" label-width="150px" ref="form">
       <el-form-item v-if="isMore" :label="$t('carCreateFeeAdd.chargeScope')" prop="locationTypeCd"
         :rules="[{ required: true, message: $t('carCreateFeeAdd.requiredChargeScope') }]">
@@ -13,7 +13,8 @@
         <el-input v-model="form.locationTypeCdName" disabled :placeholder="$t('carCreateFeeAdd.requiredChargeScope')" />
       </el-form-item>
-      <el-form-item v-if="form.locationTypeCd === '3000' && isMore" :label="$t('carCreateFeeAdd.parkingLot')" prop="paId">
+      <el-form-item v-if="form.locationTypeCd === '3000' && isMore" :label="$t('carCreateFeeAdd.parkingLot')"
+        prop="paId">
         <parking-area-select2 @change="handleParkingAreaChange" />
       </el-form-item>
@@ -194,4 +195,9 @@ export default {
     }
   }
 }
-</script>
 \ No newline at end of file
+</script>
+<style scoped>
+.el-form-item {
+  width: 90%;
+}
+</style>
 \ No newline at end of file
@@ -101,7 +101,7 @@ export default {
       this._loadFeeDetailHisFeeData()
     },
     _toRefundFee(detail) {
-      this.$router.push(`/pages/property/propertyFee?feeId=${detail.feeId}`)
+      this.$router.push(`/views/fee/propertyFee?feeId=${detail.feeId}`)
     },
     dateFormat(date) {
       return this.$moment(date).format('YYYY-MM-DD')
@@ -105,7 +105,7 @@ export default {
       this.$router.push(`/pages/fee/refundDepositFee?roomId=${roomId}`)
     },
     _toSimplifyFeeDepositFeeDetail(fee) {
-      this.$router.push(`/pages/property/propertyFee?feeId=${fee.feeId}`)
+      this.$router.push(`/views/fee/propertyFee?feeId=${fee.feeId}`)
     },
     switchData(param) {
       if (!param.roomId) return
@@ -109,7 +109,7 @@ export default {
       }
     },
     _toRefundFee(detail) {
-      this.$router.push(`/pages/property/propertyFee?feeId=${detail.feeId}`)
+      this.$router.push(`/views/fee/propertyFee?feeId=${detail.feeId}`)
     },
     handleCurrentChange(val) {
       this.currentPage = val
@@ -227,7 +227,7 @@ export default {
       this.$emit('editFee', fee)
     },
     _payRoomFeeHis(fee) {
-      this.$router.push(`/property/propertyFee?${this.objToGetParam(fee)}`)
+      this.$router.push(`/views/fee/propertyFee?${this.objToGetParam(fee)}`)
     },
     _deleteRoomFee(fee) {
       this.$emit('deleteFee', {
@@ -247,7 +247,7 @@ export default {
         this.$message.warning(this.$t('ownerDetailRoomFee.selectRoom'))
         return
       }
-      this.$router.push(`/property/owePayFeeOrder?payObjId=${_ids.join(',')}&payObjType=3333&roomName=`)
+      this.$router.push(`/views/fee/owePayFeeOrder?payObjId=${_ids.join(',')}&payObjType=3333&roomName=`)
     },
     _printOwnOrder() {
       const _ids = this.ownerDetailRoomFeeInfo.payerObjIds
+<template>
+  <el-dialog :title="$t('deleteParkingSpaceApply.title')" :visible.sync="visible" width="30%">
+    <span>{{ $t('deleteParkingSpaceApply.confirmDelete') }}</span>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleConfirm">{{ $t('common.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteParkingSpaceApply } from '@/api/property/deleteParkingSpaceApplyApi'
+
+export default {
+  name: 'DeleteParkingSpaceApply',
+  data() {
+    return {
+      visible: false,
+      applyId: ''
+    }
+  },
+  methods: {
+    open(data) {
+      this.applyId = data.applyId
+      this.visible = true
+    },
+    handleConfirm() {
+      deleteParkingSpaceApply({ applyId: this.applyId }).then(response => {
+        console.log(response)
+        this.$message.success(this.$t('deleteParkingSpaceApply.deleteSuccess'))
+        this.visible = false
+        this.$emit('refresh')
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog :title="$t('editMachineTranslate.title')" :visible.sync="visible" width="50%">
+    <el-form :model="form" label-width="120px">
+      <el-form-item :label="$t('editMachineTranslate.machineCode')">
+        <el-input v-model="form.machineCode" disabled></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('editMachineTranslate.objectType')">
+        <el-input v-model="form.typeCdName" disabled></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('editMachineTranslate.objectName')">
+        <el-input v-model="form.objName" disabled></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('editMachineTranslate.remark')">
+        <el-input type="textarea" v-model="form.remark"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{$t('common.cancel')}}</el-button>
+      <el-button type="primary" @click="handleSubmit">{{$t('common.confirm')}}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { resyncMachineTranslate } from '@/api/property/editMachineTranslateApi'
+
+export default {
+  name: 'EditMachineTranslate',
+  data() {
+    return {
+      visible: false,
+      form: {
+        machineTranslateId: '',
+        machineCode: '',
+        typeCdName: '',
+        objName: '',
+        remark: ''
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.form = {
+        machineTranslateId: data.machineTranslateId,
+        machineCode: data.machineCode,
+        typeCdName: data.typeCdName,
+        objName: data.objName,
+        remark: data.remark || ''
+      }
+      this.visible = true
+    },
+    handleSubmit() {
+      resyncMachineTranslate(this.form).then(response => {
+        console.log(response)
+        this.$message.success(this.$t('editMachineTranslate.resyncSuccess'))
+        this.visible = false
+        this.$emit('refresh')
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
+<template>
+  <el-dialog :title="$t('editParkingSpaceApply.title')" :visible.sync="visible" width="50%">
+    <el-form :model="form" label-width="120px">
+      <el-form-item :label="$t('editParkingSpaceApply.carNum')">
+        <el-input v-model="form.carNum" disabled></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('editParkingSpaceApply.carBrand')">
+        <el-input v-model="form.carBrand"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('editParkingSpaceApply.carType')">
+        <el-select v-model="form.carType" style="width:100%">
+          <el-option v-for="item in carTypes" :key="item.value" :label="item.label" :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('editParkingSpaceApply.carColor')">
+        <el-input v-model="form.carColor"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('editParkingSpaceApply.startTime')">
+        <el-date-picker v-model="form.startTime" type="datetime" style="width:100%" value-format="yyyy-MM-dd HH:mm:ss">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item :label="$t('editParkingSpaceApply.endTime')">
+        <el-date-picker v-model="form.endTime" type="datetime" style="width:100%" value-format="yyyy-MM-dd HH:mm:ss">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item :label="$t('editParkingSpaceApply.remark')">
+        <el-input type="textarea" v-model="form.remark"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { updateParkingSpaceApply } from '@/api/property/editParkingSpaceApplyApi'
+import { getDict } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditParkingSpaceApply',
+  data() {
+    return {
+      visible: false,
+      carTypes: [],
+      form: {
+        applyId: '',
+        carNum: '',
+        carBrand: '',
+        carType: '',
+        carColor: '',
+        startTime: '',
+        endTime: '',
+        remark: ''
+      }
+    }
+  },
+  created() {
+    this.getCarTypes()
+  },
+  methods: {
+    getCarTypes() {
+      getDict('car_type').then(response => {
+        this.carTypes = response.data.map(item => ({
+          value: item.code,
+          label: item.name
+        }))
+      })
+    },
+    open(data) {
+      this.form = {
+        applyId: data.applyId,
+        carNum: data.carNum,
+        carBrand: data.carBrand,
+        carType: data.carType,
+        carColor: data.carColor,
+        startTime: data.startTime,
+        endTime: data.endTime,
+        remark: data.remark || ''
+      }
+      this.visible = true
+    },
+    handleSubmit() {
+      updateParkingSpaceApply(this.form).then(response => {
+        console.log(response)
+        this.$message.success(this.$t('editParkingSpaceApply.updateSuccess'))
+        this.visible = false
+        this.$emit('refresh')
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    }
+  }
+}
+</script>
 \ No newline at end of file
@@ -265,7 +265,7 @@ export default {
       this.$router.push(`/views/fee/payFeeOrderfeeId=${fee.feeId}`)
     },
     _simplifyCarPayFeeHis(fee) {
-      this.$router.push(`/pages/property/propertyFee?${this.objToGetParam(fee)}`)
+      this.$router.push(`/views/fee/propertyFee?${this.objToGetParam(fee)}`)
     },
     _simplifyCarEditFee(fee) {
       this.$emit('editFee', fee)
@@ -15,7 +15,7 @@
       border>
       <el-table-column :label="$t('simplifyOwnerCar.plateNumber')" align="center">
         <template #default="{row}">
-          <router-link :to="`/pages/car/carDetail?memberId=${row.memberId}`" target="_blank">
+          <router-link :to="`/views/car/carDetail?memberId=${row.memberId}`" target="_blank">
             {{row.carNum}}
           </router-link>
         </template>
@@ -14,6 +14,7 @@ import { messages as tempCarPaymentMessages } from &#39;../views/car/tempCarPaymentL
 import { messages as parkingSpaceApplyManageMessages } from '../views/car/parkingSpaceApplyManageLang'
 import { messages as addParkingSpaceApplyMessages } from '../views/car/addParkingSpaceApplyLang'
 import { messages as auditParkingSpaceApplyMessages } from '../views/car/auditParkingSpaceApplyLang'
+import { messages as carDetailMessages } from '../views/car/carDetailLang.js'
 export const messages = {
     en: {
@@ -33,6 +34,7 @@ export const messages = {
         ...parkingSpaceApplyManageMessages.en,
         ...addParkingSpaceApplyMessages.en,
         ...auditParkingSpaceApplyMessages.en,
+        ...carDetailMessages.en,
     },
     zh: {
         ...adminCarMessages.zh,
@@ -51,5 +53,6 @@ export const messages = {
         ...parkingSpaceApplyManageMessages.zh,
         ...addParkingSpaceApplyMessages.zh,
         ...auditParkingSpaceApplyMessages.zh,
+        ...carDetailMessages.zh,
     }
 }
 \ No newline at end of file
@@ -79,5 +79,10 @@ export default [
         name: '/views/car/auditParkingSpaceApply',
         component: () => import('@/views/car/auditParkingSpaceApply.vue')
       },
+      {
+        path:'/views/car/carDetail',
+        name:'/views/car/carDetail',
+        component: () => import('@/views/car/carDetail.vue')
+        },
 ]
 \ No newline at end of file
+<template>
+  <div class="car-detail-container">
+    <div class="white-bg padding-left padding-right padding-top border-radius-top">
+      <el-row type="flex" justify="space-between">
+        <div class="text-title">
+          {{ $t('carDetail.vehicleInfo') }}
+        </div>
+        <div>
+          <el-button type="primary" size="small" style="margin-left:10px" v-if="hasPrivilege('502023032804261679')"
+            @click="_openEditDetailOwnerCar()">
+            {{ $t('common.edit') }}
+          </el-button>
+        </div>
+      </el-row>
+
+      <!-- Vehicle Information -->
+      <div class="margin-top">
+        <el-form class="text-left">
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item :label="$t('carDetail.licensePlate')">
+              <label>{{ carDetailInfo.carNum || '-' }}</label>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('carDetail.carBrand')">
+              <label>{{ carDetailInfo.carBrand || '-' }}</label>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('carDetail.carType')">
+              <label>{{ carDetailInfo.leaseTypeName || '-' }}</label>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('carDetail.color')">
+              <label>{{ carDetailInfo.carColor || '-' }}</label>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item :label="$t('carDetail.licenseType')">
+              <label>{{ carDetailInfo.carTypeName || '-' }}</label>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('carDetail.leaseStart')">
+              <label>{{ carDetailInfo.startTime || '-' }}</label>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('carDetail.leaseEnd')">
+              <label>{{ carDetailInfo.endTime || '-' }}</label>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('carDetail.remark')">
+              <label>{{ carDetailInfo.remark || '-' }}</label>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item :label="$t('carDetail.parkingLot')">
+              <label>{{ carDetailInfo.areaNum || '-' }}</label>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('carDetail.parkingSpace')">
+              <label>{{ carDetailInfo.num || '-' }}</label>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('carDetail.status')">
+              <label>{{ carDetailInfo.stateName || '-' }}</label>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('carDetail.relatedHouse')">
+              <label>{{ carDetailInfo.roomName || '-' }}</label>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      </div>
+
+      <divider/>
+
+      <div class="margin-top-sm">
+        <el-tabs v-model="carDetailInfo._currentTab" @tab-click="changeTab(carDetailInfo._currentTab)">
+          <el-tab-pane :label="$t('carDetail.vehicleFee')" name="carDetailFee"></el-tab-pane>
+          <el-tab-pane :label="$t('carDetail.paymentRecord')" name="ownerDetailHisFee"></el-tab-pane>
+          <el-tab-pane :label="$t('carDetail.modificationRecord')" name="carDetailHis"></el-tab-pane>
+          <el-tab-pane :label="$t('carDetail.memberVehicle')" name="carDetailMember"></el-tab-pane>
+          <el-tab-pane :label="$t('carDetail.ownerInfo')" name="carDetailOwner"></el-tab-pane>
+          <el-tab-pane :label="$t('carDetail.ownerHouse')" name="ownerDetailRoom"></el-tab-pane>
+          <el-tab-pane :label="$t('carDetail.ownerVehicle')" name="ownerDetailCar"></el-tab-pane>
+          <el-tab-pane :label="$t('carDetail.ownerArrears')" name="ownerDetailOweFee"></el-tab-pane>
+          <el-tab-pane :label="$t('carDetail.licenseSync')" name="carDetailTransactionCar"></el-tab-pane>
+          <el-tab-pane :label="$t('carDetail.parkingApplication')" name="carDetailApplyParkingSpace"></el-tab-pane>
+          <el-tab-pane :label="$t('carDetail.accessRecord')" name="carDetailCarInout"></el-tab-pane>
+          <el-tab-pane :label="$t('carDetail.coupon')" name="carDetailCoupon"></el-tab-pane>
+          <el-tab-pane :label="$t('carDetail.couponVerification')" name="carDetailCouponOrder"></el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+
+    <div class="white-bg padding-left padding-right padding-top border-radius-bottom">
+      <car-detail-fee v-if="carDetailInfo._currentTab === 'carDetailFee'" ref="carDetailFee"></car-detail-fee>
+      <owner-detail-room v-if="carDetailInfo._currentTab === 'ownerDetailRoom'"
+        ref="ownerDetailRoom"></owner-detail-room>
+      <owner-detail-car v-if="carDetailInfo._currentTab === 'ownerDetailCar'" ref="ownerDetailCar"></owner-detail-car>
+      <owner-detail-owe-fee v-if="carDetailInfo._currentTab === 'ownerDetailOweFee'"
+        ref="ownerDetailOweFee"></owner-detail-owe-fee>
+      <owner-detail-his-fee v-if="carDetailInfo._currentTab === 'ownerDetailHisFee'"
+        ref="ownerDetailHisFee"></owner-detail-his-fee>
+      <car-detail-his v-if="carDetailInfo._currentTab === 'carDetailHis'" ref="carDetailHis"></car-detail-his>
+      <car-detail-member v-if="carDetailInfo._currentTab === 'carDetailMember'"
+        ref="carDetailMember"></car-detail-member>
+      <car-detail-owner v-if="carDetailInfo._currentTab === 'carDetailOwner'" ref="carDetailOwner"></car-detail-owner>
+      <car-detail-transaction-car v-if="carDetailInfo._currentTab === 'carDetailTransactionCar'"
+        ref="carDetailTransactionCar"></car-detail-transaction-car>
+      <car-detail-apply-parking-space v-if="carDetailInfo._currentTab === 'carDetailApplyParkingSpace'"
+        ref="carDetailApplyParkingSpace"></car-detail-apply-parking-space>
+      <car-detail-car-inout v-if="carDetailInfo._currentTab === 'carDetailCarInout'"
+        ref="carDetailCarInout"></car-detail-car-inout>
+      <car-detail-coupon v-if="carDetailInfo._currentTab === 'carDetailCoupon'"
+        ref="carDetailCoupon"></car-detail-coupon>
+      <car-detail-coupon-order v-if="carDetailInfo._currentTab === 'carDetailCouponOrder'"
+        ref="carDetailCouponOrder"></car-detail-coupon-order>
+    </div>
+
+    <edit-car ref="editCar"></edit-car>
+  </div>
+</template>
+
+<script>
+import CarDetailFee from '@/components/car/carDetailFee'
+import OwnerDetailRoom from '@/components/owner/ownerDetailRoom'
+import OwnerDetailCar from '@/components/owner/ownerDetailCar'
+import OwnerDetailOweFee from '@/components/car/ownerDetailOweFee'
+import OwnerDetailHisFee from '@/components/owner/ownerDetailHisFee'
+import CarDetailHis from '@/components/system/carDetailHis'
+import CarDetailMember from '@/components/car/carDetailMember'
+import CarDetailOwner from '@/components/fee/carDetailOwner'
+import CarDetailTransactionCar from '@/components/car/carDetailTransactionCar'
+import CarDetailApplyParkingSpace from '@/components/car/carDetailApplyParkingSpace'
+import CarDetailCarInout from '@/components/car/carDetailCarInout'
+import CarDetailCoupon from '@/components/car/carDetailCoupon'
+import CarDetailCouponOrder from '@/components/car/carDetailCouponOrder'
+import EditCar from '@/components/car/editCar'
+import { getCommunityId } from '@/api/community/communityApi'
+import { getOwnerCarDetail } from '@/api/car/carDetailApi'
+import Divider from '@/components/system/divider'
+
+export default {
+  name: 'CarDetail',
+  components: {
+    CarDetailFee,
+    OwnerDetailRoom,
+    OwnerDetailCar,
+    OwnerDetailOweFee,
+    OwnerDetailHisFee,
+    CarDetailHis,
+    CarDetailMember,
+    CarDetailOwner,
+    CarDetailTransactionCar,
+    CarDetailApplyParkingSpace,
+    CarDetailCarInout,
+    CarDetailCoupon,
+    CarDetailCouponOrder,
+    EditCar,
+    Divider
+  },
+  data() {
+    return {
+      carDetailInfo: {
+        memberId: '',
+        carId: '',
+        carNum: '',
+        carTypeCd: '',
+        carTypeCdName: '',
+        carType: '',
+        carTypeName: '',
+        startTime: '',
+        endTime: '',
+        leaseType: '',
+        leaseTypeName: '',
+        areaNum: '',
+        num: '',
+        remark: '',
+        stateName: '',
+        carColor: '',
+        carBrand: '',
+        ownerId: '',
+        roomName: '',
+        carNumType: '',
+        paId: '',
+        _currentTab: 'carDetailFee',
+        needBack: false
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.carDetailInfo.memberId = this.$route.query.memberId
+    if (this.carDetailInfo.memberId) {
+      this._loadCarDetailInfo()
+    }
+  },
+  methods: {
+    _loadCarDetailInfo() {
+      const params = {
+        page: 1,
+        row: 1,
+        memberId: this.carDetailInfo.memberId,
+        communityId: this.communityId
+      }
+
+      getOwnerCarDetail(params)
+        .then(response => {
+          const carInfo = response.data[0]
+          Object.assign(this.carDetailInfo, carInfo)
+          this.changeTab(this.carDetailInfo._currentTab)
+        })
+        .catch(error => {
+          console.error('Failed to load car detail:', error)
+        })
+    },
+    changeTab(tab) {
+      this.carDetailInfo._currentTab = tab
+      const tabData = {
+        memberId: this.carDetailInfo.memberId,
+        carId: this.carDetailInfo.carId,
+        ownerId: this.carDetailInfo.ownerId,
+        carNum: this.carDetailInfo.carNum,
+        paId: this.carDetailInfo.paId,
+        areaNum: this.carDetailInfo.areaNum
+      }
+      setTimeout(() => {
+        if (this.$refs[tab]) {
+          if(tab === 'ownerDetailHisFee'){
+            this.$refs[tab].open(this.carDetailInfo.ownerId)
+          }else{
+            this.$refs[tab].open(tabData)
+          }
+        }
+      }, 100)
+      
+    },
+    _openEditDetailOwnerCar() {
+      this.$refs.editCar.open(this.carDetailInfo)
+    },
+  }
+}
+</script>
+
+<style scoped>
+.white-bg {
+  background: #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;
+}
+</style>
 \ No newline at end of file
+export const messages = {
+  en: {
+    carDetailApplyParkingSpace: {
+      applyParkingSpace: 'Apply Parking Space',
+      applyId: 'Apply ID',
+      carNum: 'Car Number',
+      parkingSpace: 'Parking Space',
+      none: 'None',
+      carBrand: 'Car Brand',
+      carType: 'Car Type',
+      color: 'Color',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      applicant: 'Applicant',
+      phone: 'Phone',
+      auditResult: 'Audit Result',
+      operation: 'Operation',
+      audit: 'Audit',
+      edit: 'Edit',
+      delete: 'Delete',
+      pendingReview: 'Pending Review',
+      pendingPayment: 'Pending Payment',
+      completed: 'Completed',
+      auditFailed: 'Audit Failed',
+      abnormalStatus: 'Abnormal Status',
+      familyCar: 'Family Car',
+      bus: 'Bus',
+      truck: 'Truck',
+      abnormalVehicle: 'Abnormal Vehicle'
+    }
+  },
+  zh: {
+    carDetailApplyParkingSpace: {
+      applyParkingSpace: '申请车位',
+      applyId: '申请ID',
+      carNum: '车牌号',
+      parkingSpace: '停车位',
+      none: '无',
+      carBrand: '汽车品牌',
+      carType: '车辆类型',
+      color: '颜色',
+      startTime: '起租时间',
+      endTime: '结租时间',
+      applicant: '申请人',
+      phone: '手机号',
+      auditResult: '审核结果',
+      operation: '操作',
+      audit: '审核',
+      edit: '修改',
+      delete: '删除',
+      pendingReview: '待审核',
+      pendingPayment: '待缴费',
+      completed: '完成',
+      auditFailed: '审核失败',
+      abnormalStatus: '状态异常',
+      familyCar: '家用小汽车',
+      bus: '客车',
+      truck: '货车',
+      abnormalVehicle: '异常车辆'
+    }
+  }
+}
 \ No newline at end of file
+export const messages = {
+  en: {
+    carDetailCarInout: {
+      entryImage: 'Entry Image',
+      inoutId: 'Inout ID',
+      carStatus: 'Car Status',
+      entry: 'Entry',
+      exit: 'Exit',
+      carNum: 'Car Number',
+      parkingLot: 'Parking Lot',
+      billingRule: 'Billing Rule',
+      carType: 'Car Type',
+      entryTime: 'Entry Time',
+      exitTime: 'Exit Time',
+      parkingTime: 'Parking Time',
+      hour: 'hour',
+      minute: 'minute',
+      chargeAmount: 'Charge Amount',
+      remark: 'Remark'
+    }
+  },
+  zh: {
+    carDetailCarInout: {
+      entryImage: '进场图',
+      inoutId: '进出场编号',
+      carStatus: '车辆状态',
+      entry: '进场',
+      exit: '出场',
+      carNum: '车牌号',
+      parkingLot: '停车场',
+      billingRule: '计费规则',
+      carType: '车牌类型',
+      entryTime: '进场时间',
+      exitTime: '出场时间',
+      parkingTime: '停车时间',
+      hour: '小时',
+      minute: '分',
+      chargeAmount: '收费金额',
+      remark: '说明'
+    }
+  }
+}
 \ No newline at end of file
+export const messages = {
+  en: {
+    carDetailCoupon: {
+      car: 'Car',
+      coupon: 'Coupon',
+      shop: 'Shop',
+      parkingLot: 'Parking Lot',
+      giveWay: 'Give Way',
+      couponType: 'Coupon Type',
+      value: 'Value',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      giveTime: 'Give Time',
+      status: 'Status',
+      remark: 'Remark'
+    }
+  },
+  zh: {
+    carDetailCoupon: {
+      car: '车辆',
+      coupon: '优惠券',
+      shop: '商家店铺',
+      parkingLot: '停车场',
+      giveWay: '赠送方式',
+      couponType: '优惠方式',
+      value: '面值',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      giveTime: '赠送时间',
+      status: '状态',
+      remark: '说明'
+    }
+  }
+}
 \ No newline at end of file
+export const messages = {
+  en: {
+    carDetailCouponOrder: {
+      orderId: 'Order ID',
+      carNum: 'Car Number',
+      coupon: 'Coupon',
+      shop: 'Shop',
+      parkingLot: 'Parking Lot',
+      machine: 'Machine',
+      verifyTime: 'Verify Time',
+      remark: 'Remark'
+    }
+  },
+  zh: {
+    carDetailCouponOrder: {
+      orderId: '核销订单',
+      carNum: '核销车辆',
+      coupon: '优惠券',
+      shop: '商家店铺',
+      parkingLot: '停车场',
+      machine: '道闸',
+      verifyTime: '核销时间',
+      remark: '说明'
+    }
+  }
+}
 \ No newline at end of file
+export const messages = {
+  en: {
+    carDetailFee: {
+      createFee: 'Create Fee',
+      feeItem: 'Fee Item',
+      feeFlag: 'Fee Flag',
+      feeType: 'Fee Type',
+      amountReceivable: 'Amount Receivable',
+      accountingTime: 'Accounting Time',
+      receivablePeriod: 'Receivable Period',
+      remark: 'Remark',
+      status: 'Status',
+      operation: 'Operation',
+      previousReading: 'Previous Reading',
+      currentReading: 'Current Reading',
+      unitPrice: 'Unit Price',
+      additionalFee: 'Additional Fee',
+      fixedFee: 'Fixed Fee',
+      payment: 'Payment',
+      history: 'History',
+      cancel: 'Cancel',
+      change: 'Change',
+      detail: 'Detail',
+      paymentNotice: 'Please go to the business acceptance page for payment'
+    }
+  },
+  zh: {
+    carDetailFee: {
+      createFee: '创建费用',
+      feeItem: '费用项目',
+      feeFlag: '费用标识',
+      feeType: '费用类型',
+      amountReceivable: '应收金额',
+      accountingTime: '建账时间',
+      receivablePeriod: '应收时间段',
+      remark: '说明',
+      status: '状态',
+      operation: '操作',
+      previousReading: '上期度数',
+      currentReading: '本期度数',
+      unitPrice: '单价',
+      additionalFee: '附加费',
+      fixedFee: '固定费',
+      payment: '缴费',
+      history: '历史',
+      cancel: '取消',
+      change: '变更',
+      detail: '详情',
+      paymentNotice: '缴费请到业务受理页面缴费'
+    }
+  }
+}
 \ No newline at end of file
+
+export const messages = {
+  en: {
+    carDetail: {
+      vehicleInfo: 'Vehicle Information',
+      licensePlate: 'License Plate:',
+      carBrand: 'Car Brand:',
+      carType: 'Car Type:',
+      color: 'Color:',
+      licenseType: 'License Type:',
+      leaseStart: 'Lease Start:',
+      leaseEnd: 'Lease End:',
+      remark: 'Remark:',
+      parkingLot: 'Parking Lot:',
+      parkingSpace: 'Parking Space:',
+      status: 'Status:',
+      relatedHouse: 'Related House:',
+      vehicleFee: 'Vehicle Fee',
+      paymentRecord: 'Payment Record',
+      modificationRecord: 'Modification Record',
+      memberVehicle: 'Member Vehicle',
+      ownerInfo: 'Owner Info',
+      ownerHouse: 'Owner House',
+      ownerVehicle: 'Owner Vehicle',
+      ownerArrears: 'Owner Arrears',
+      licenseSync: 'License Sync',
+      parkingApplication: 'Parking Application',
+      accessRecord: 'Access Record',
+      coupon: 'Coupon',
+      couponVerification: 'Coupon Verification'
+    },
+    carDetailFee: {
+      createFee: 'Create Fee',
+      feeItem: 'Fee Item',
+      feeFlag: 'Fee Flag',
+      feeType: 'Fee Type',
+      amountReceivable: 'Amount Receivable',
+      accountingTime: 'Accounting Time',
+      receivablePeriod: 'Receivable Period',
+      remark: 'Remark',
+      status: 'Status',
+      operation: 'Operation',
+      previousReading: 'Previous Reading',
+      currentReading: 'Current Reading',
+      unitPrice: 'Unit Price',
+      additionalFee: 'Additional Fee',
+      fixedFee: 'Fixed Fee',
+      payment: 'Payment',
+      history: 'History',
+      cancel: 'Cancel',
+      change: 'Change',
+      detail: 'Detail',
+      paymentNotice: 'Please go to the business acceptance page for payment'
+    },
+    carDetailTransactionCar: {
+      syncId: 'Sync ID',
+      deviceCode: 'Device Code',
+      objectType: 'Object Type',
+      objectName: 'Object Name',
+      command: 'Command',
+      status: 'Status',
+      remark: 'Remark',
+      syncTime: 'Sync Time',
+      operation: 'Operation',
+      resync: 'Resync'
+    },
+    carDetailApplyParkingSpace: {
+      applyParkingSpace: 'Apply Parking Space',
+      applyId: 'Apply ID',
+      carNum: 'Car Number',
+      parkingSpace: 'Parking Space',
+      none: 'None',
+      carBrand: 'Car Brand',
+      carType: 'Car Type',
+      color: 'Color',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      applicant: 'Applicant',
+      phone: 'Phone',
+      auditResult: 'Audit Result',
+      operation: 'Operation',
+      audit: 'Audit',
+      edit: 'Edit',
+      delete: 'Delete',
+      pendingReview: 'Pending Review',
+      pendingPayment: 'Pending Payment',
+      completed: 'Completed',
+      auditFailed: 'Audit Failed',
+      abnormalStatus: 'Abnormal Status',
+      familyCar: 'Family Car',
+      bus: 'Bus',
+      truck: 'Truck',
+      abnormalVehicle: 'Abnormal Vehicle'
+    },
+    carDetailCarInout: {
+      entryImage: 'Entry Image',
+      inoutId: 'Inout ID',
+      carStatus: 'Car Status',
+      entry: 'Entry',
+      exit: 'Exit',
+      carNum: 'Car Number',
+      parkingLot: 'Parking Lot',
+      billingRule: 'Billing Rule',
+      carType: 'Car Type',
+      entryTime: 'Entry Time',
+      exitTime: 'Exit Time',
+      parkingTime: 'Parking Time',
+      hour: 'hour',
+      minute: 'minute',
+      chargeAmount: 'Charge Amount',
+      remark: 'Remark'
+    },
+    carDetailCoupon: {
+      car: 'Car',
+      coupon: 'Coupon',
+      shop: 'Shop',
+      parkingLot: 'Parking Lot',
+      giveWay: 'Give Way',
+      couponType: 'Coupon Type',
+      value: 'Value',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      giveTime: 'Give Time',
+      status: 'Status',
+      remark: 'Remark'
+    },
+    carDetailCouponOrder: {
+      orderId: 'Order ID',
+      carNum: 'Car Number',
+      coupon: 'Coupon',
+      shop: 'Shop',
+      parkingLot: 'Parking Lot',
+      machine: 'Machine',
+      verifyTime: 'Verify Time',
+      remark: 'Remark'
+    }
+  },
+  zh: {
+    carDetail: {
+      vehicleInfo: '车辆信息',
+      licensePlate: '车牌号：',
+      carBrand: '车品牌：',
+      carType: '车类型：',
+      color: '颜色：',
+      licenseType: '车牌类型：',
+      leaseStart: '起租时间：',
+      leaseEnd: '结租时间：',
+      remark: '备注：',
+      parkingLot: '停车场：',
+      parkingSpace: '车位：',
+      status: '状态：',
+      relatedHouse: '关联房屋：',
+      vehicleFee: '车辆费用',
+      paymentRecord: '缴费记录',
+      modificationRecord: '修改记录',
+      memberVehicle: '成员车辆',
+      ownerInfo: '业主信息',
+      ownerHouse: '业主房屋',
+      ownerVehicle: '业主车辆',
+      ownerArrears: '业主欠费',
+      licenseSync: '车牌同步',
+      parkingApplication: '车位申请',
+      accessRecord: '出入场记录',
+      coupon: '优惠券',
+      couponVerification: '优惠券核销'
+    },
+    carDetailFee: {
+      createFee: '创建费用',
+      feeItem: '费用项目',
+      feeFlag: '费用标识',
+      feeType: '费用类型',
+      amountReceivable: '应收金额',
+      accountingTime: '建账时间',
+      receivablePeriod: '应收时间段',
+      remark: '说明',
+      status: '状态',
+      operation: '操作',
+      previousReading: '上期度数',
+      currentReading: '本期度数',
+      unitPrice: '单价',
+      additionalFee: '附加费',
+      fixedFee: '固定费',
+      payment: '缴费',
+      history: '历史',
+      cancel: '取消',
+      change: '变更',
+      detail: '详情',
+      paymentNotice: '缴费请到业务受理页面缴费'
+    },
+    carDetailTransactionCar: {
+      syncId: '同步ID',
+      deviceCode: '设备编码',
+      objectType: '对象类型',
+      objectName: '对象名称',
+      command: '指令',
+      status: '状态',
+      remark: '说明',
+      syncTime: '同步时间',
+      operation: '操作',
+      resync: '重新同步'
+    },
+    carDetailApplyParkingSpace: {
+      applyParkingSpace: '申请车位',
+      applyId: '申请ID',
+      carNum: '车牌号',
+      parkingSpace: '停车位',
+      none: '无',
+      carBrand: '汽车品牌',
+      carType: '车辆类型',
+      color: '颜色',
+      startTime: '起租时间',
+      endTime: '结租时间',
+      applicant: '申请人',
+      phone: '手机号',
+      auditResult: '审核结果',
+      operation: '操作',
+      audit: '审核',
+      edit: '修改',
+      delete: '删除',
+      pendingReview: '待审核',
+      pendingPayment: '待缴费',
+      completed: '完成',
+      auditFailed: '审核失败',
+      abnormalStatus: '状态异常',
+      familyCar: '家用小汽车',
+      bus: '客车',
+      truck: '货车',
+      abnormalVehicle: '异常车辆'
+    },
+    carDetailCarInout: {
+      entryImage: '进场图',
+      inoutId: '进出场编号',
+      carStatus: '车辆状态',
+      entry: '进场',
+      exit: '出场',
+      carNum: '车牌号',
+      parkingLot: '停车场',
+      billingRule: '计费规则',
+      carType: '车牌类型',
+      entryTime: '进场时间',
+      exitTime: '出场时间',
+      parkingTime: '停车时间',
+      hour: '小时',
+      minute: '分',
+      chargeAmount: '收费金额',
+      remark: '说明'
+    },
+    carDetailCoupon: {
+      car: '车辆',
+      coupon: '优惠券',
+      shop: '商家店铺',
+      parkingLot: '停车场',
+      giveWay: '赠送方式',
+      couponType: '优惠方式',
+      value: '面值',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      giveTime: '赠送时间',
+      status: '状态',
+      remark: '说明'
+    },
+    carDetailCouponOrder: {
+      orderId: '核销订单',
+      carNum: '核销车辆',
+      coupon: '优惠券',
+      shop: '商家店铺',
+      parkingLot: '停车场',
+      machine: '道闸',
+      verifyTime: '核销时间',
+      remark: '说明'
+    }
+  }
+}
+export const messages = {
+  en: {
+    carDetailTransactionCar: {
+      syncId: 'Sync ID',
+      deviceCode: 'Device Code',
+      objectType: 'Object Type',
+      objectName: 'Object Name',
+      command: 'Command',
+      status: 'Status',
+      remark: 'Remark',
+      syncTime: 'Sync Time',
+      operation: 'Operation',
+      resync: 'Resync'
+    }
+  },
+  zh: {
+    carDetailTransactionCar: {
+      syncId: '同步ID',
+      deviceCode: '设备编码',
+      objectType: '对象类型',
+      objectName: '对象名称',
+      command: '指令',
+      status: '状态',
+      remark: '说明',
+      syncTime: '同步时间',
+      operation: '操作',
+      resync: '重新同步'
+    }
+  }
+}
 \ No newline at end of file
@@ -72,7 +72,7 @@
           <el-table :data="ownerCars" border v-loading="loading">
             <el-table-column prop="carNum" :label="$t('listOwnerCar.carNum')" align="center">
               <template slot-scope="scope">
-                <router-link :to="`/pages/car/carDetail?memberId=${scope.row.memberId}`" target="_blank">
+                <router-link :to="`/views/car/carDetail?memberId=${scope.row.memberId}`" target="_blank">
                   {{ scope.row.carNum }}
                 </router-link>
               </template>
+export const messages = {
+  en: {
+    common: {
+      cancel: 'Cancel',
+      confirm: 'Confirm'
+    }
+  },
+  zh: {
+    common: {
+      cancel: '取消',
+      confirm: '确定'
+    }
+  }
+}
 \ No newline at end of file
 <template>
   <el-card class="buy-car-month-card-container">
-    <div slot="header">
-      <h5>{{ $t('buyCarMonthCard.title') }}</h5>
+    <div slot="header" class="flex justify-between">
+      <div>{{ $t('buyCarMonthCard.title') }}</div>
     </div>
-    <el-form ref="form" :model="buyCarMonthCardInfo" label-width="120px">
+    <el-form ref="form" :model="buyCarMonthCardInfo" label-width="120px" class="text-left">
       <el-form-item :label="$t('buyCarMonthCard.carNum')" prop="carNum"
         :rules="[{ required: true, message: $t('buyCarMonthCard.rules.carNumRequired'), trigger: 'blur' }]">
         <el-input v-model="buyCarMonthCardInfo.carNum" :placeholder="$t('buyCarMonthCard.placeholders.carNum')"
@@ -51,7 +51,7 @@
         </el-input>
       </el-form-item>
-      <el-form-item>
+      <el-form-item class="text-right">
         <el-button type="primary" @click="saveCarMonthOrderInfo">
           <i class="el-icon-check"></i>{{ $t('common.submit') }}
         </el-button>
@@ -216,7 +216,7 @@ export default {
     },
     handlePayFee(row) {
       this.$router.push({
-        path: '/property/owePayFeeOrder',
+        path: '/views/fee/owePayFeeOrder',
         query: {
           payObjId: row.contractId,
           payObjType: '7777',
@@ -191,7 +191,7 @@ export default {
       this.$router.push({ path: '/views/fee/payFeeOrder', query: { feeId: fee.feeId } })
     },
     _payFeeHis(fee) {
-      this.$router.push({ path: '/property/propertyFee', query: fee })
+      this.$router.push({ path: '/views/fee/propertyFee', query: fee })
     },
     _editFee(fee) {
       this.$refs.editFee.open(fee)
@@ -240,7 +240,7 @@ export default {
     },
     _viewCarFee(fee) {
       // 查看费用详情逻辑
-      console.log(fee)
+      window.open(`/#/views/fee/feeDetail?feeId=${fee.feeId}`)
     },
     _splitPayFee(fee) {
@@ -121,7 +121,7 @@ export default {
       this.listFeeDeposit()
     },
     toFeeDetail(fee) {
-      this.$router.push(`/pages/property/propertyFee?feeId=${fee.feeId}`)
+      this.$router.push(`/views/fee/propertyFee?feeId=${fee.feeId}`)
     },
     printRefundFeeReceipt() {
       window.open(`/#/views/owner/ownerDetail?ownerId=${this.refundDepositFeeInfo.ownerId}&currentTab=ownerDetailReceipt`)
@@ -289,7 +289,7 @@ export default {
       }
     },
     _toReturnFeeDetail(payFee) {
-      this.$router.push(`/pages/property/propertyFee?feeId=${payFee.feeId}`)
+      this.$router.push(`/views/fee/propertyFee?feeId=${payFee.feeId}`)
     },
     notifyAuditInfo(auditInfo) {
       this._auditReturnPayFeeState(auditInfo)
+export const messages = {
+  en: {
+    deleteParkingSpaceApply: {
+      title: 'Delete Application',
+      confirmDelete: 'Are you sure to delete this application?',
+      deleteSuccess: 'Delete successfully'
+    }
+  },
+  zh: {
+    deleteParkingSpaceApply: {
+      title: '删除申请',
+      confirmDelete: '确定要删除此申请吗？',
+      deleteSuccess: '删除成功'
+    }
+  }
+}
 \ No newline at end of file
+export const messages = {
+  en: {
+    editMachineTranslate: {
+      title: 'Resync Device',
+      machineCode: 'Device Code',
+      objectType: 'Object Type',
+      objectName: 'Object Name',
+      remark: 'Remark',
+      resyncSuccess: 'Resync successfully'
+    }
+  },
+  zh: {
+    editMachineTranslate: {
+      title: '重新同步设备',
+      machineCode: '设备编码',
+      objectType: '对象类型',
+      objectName: '对象名称',
+      remark: '说明',
+      resyncSuccess: '重新同步成功'
+    }
+  }
+}
 \ No newline at end of file
+export const messages = {
+  en: {
+    editParkingSpaceApply: {
+      title: 'Edit Parking Space Application',
+      carNum: 'Car Number',
+      carBrand: 'Car Brand',
+      carType: 'Car Type',
+      carColor: 'Color',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      remark: 'Remark',
+      updateSuccess: 'Update successfully'
+    }
+  },
+  zh: {
+    editParkingSpaceApply: {
+      title: '修改车位申请',
+      carNum: '车牌号',
+      carBrand: '汽车品牌',
+      carType: '车辆类型',
+      carColor: '颜色',
+      startTime: '起租时间',
+      endTime: '结租时间',
+      remark: '说明',
+      updateSuccess: '修改成功'
+    }
+  }
+}
 \ No newline at end of file
@@ -397,7 +397,7 @@ export default {
       }
     },
     openPayFeeDetail(fee) {
-      this.$router.push(`/pages/property/propertyFee?feeId=${fee.feeId}`)
+      this.$router.push(`/views/fee/propertyFee?feeId=${fee.feeId}`)
     }
   }
 }