diff --git a/src/api/erp/stock/warehouse/index.ts b/src/api/erp/stock/warehouse/index.ts
index 114cfa00..b953eeb2 100644
--- a/src/api/erp/stock/warehouse/index.ts
+++ b/src/api/erp/stock/warehouse/index.ts
@@ -13,6 +13,32 @@ export interface WarehouseVO {
   status: number // 开启状态
   defaultStatus: boolean // 是否默认
   warehouseId:number
+  areaList?: Array<{
+    id: number
+    warehouseId: number
+    areaCode: string
+    areaName: string
+    areaSize: number
+    description: string
+    status: number
+    createTime: number
+  }>
+  locationList?: Array<{
+    id: number
+    warehouseId: number
+    areaId: number
+    code: string
+    name: string
+    areaSize: number
+    maxLoadWeight: number
+    positionX: number
+    positionY: number
+    positionZ: number
+    allowProductMix: boolean
+    allowBatchMix: boolean
+    status: number
+    createTime: number
+  }>
 }
 
 // ERP 仓库 API
diff --git a/src/api/erp/stock/warehousearea/index.ts b/src/api/erp/stock/warehousearea/index.ts
new file mode 100644
index 00000000..5d0b9296
--- /dev/null
+++ b/src/api/erp/stock/warehousearea/index.ts
@@ -0,0 +1,34 @@
+import request from '@/config/axios'
+
+export interface WarehouseAreaVO {
+  id: number
+  warehouseId: number
+  areaCode: string
+  areaName: string
+  areaSize: number
+  description: string
+  status: number
+  createTime: string
+}
+
+export const WarehouseAreaApi = {
+  getWarehouseAreaPage: async (params: any) => {
+    return await request.get({ url: `/erp/warehouse-area/page`, params })
+  },
+
+  getWarehouseArea: async (id: number) => {
+    return await request.get({ url: `/erp/warehouse-area/get?id=` + id })
+  },
+
+  createWarehouseArea: async (data: WarehouseAreaVO) => {
+    return await request.post({ url: `/erp/warehouse-area/create`, data })
+  },
+
+  updateWarehouseArea: async (data: WarehouseAreaVO) => {
+    return await request.put({ url: `/erp/warehouse-area/update`, data })
+  },
+
+  deleteWarehouseArea: async (id: number) => {
+    return await request.delete({ url: `/erp/warehouse-area/delete?id=` + id })
+  }
+}
diff --git a/src/api/erp/stock/warehouselocation/index.ts b/src/api/erp/stock/warehouselocation/index.ts
new file mode 100644
index 00000000..5bb7a0a1
--- /dev/null
+++ b/src/api/erp/stock/warehouselocation/index.ts
@@ -0,0 +1,40 @@
+import request from '@/config/axios'
+
+export interface WarehouseLocationVO {
+  id: number
+  warehouseId: number
+  areaId: number
+  code: string
+  name: string
+  areaSize: number
+  maxLoadWeight: number
+  positionX: number
+  positionY: number
+  positionZ: number
+  allowProductMix: boolean
+  allowBatchMix: boolean
+  status: number
+  createTime: string
+}
+
+export const WarehouseLocationApi = {
+  getWarehouseLocationPage: async (params: any) => {
+    return await request.get({ url: `/erp/warehouse-location/page`, params })
+  },
+
+  getWarehouseLocation: async (id: number) => {
+    return await request.get({ url: `/erp/warehouse-location/get?id=` + id })
+  },
+
+  createWarehouseLocation: async (data: WarehouseLocationVO) => {
+    return await request.post({ url: `/erp/warehouse-location/create`, data })
+  },
+
+  updateWarehouseLocation: async (data: WarehouseLocationVO) => {
+    return await request.put({ url: `/erp/warehouse-location/update`, data })
+  },
+
+  deleteWarehouseLocation: async (id: number) => {
+    return await request.delete({ url: `/erp/warehouse-location/delete?id=` + id })
+  }
+}
diff --git a/src/locales/en.ts b/src/locales/en.ts
index bd588c96..0b884c8b 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -59,6 +59,9 @@ export default {
     copy: 'Copy',
     copySuccess: 'Copy Success',
     copyError: 'Copy Error',
+    yes: 'Yes',
+    no: 'No',
+    code:'Auto-generate on Save'
     code: 'Auto-generate on Save'
   },
   ReportDashboard: {
@@ -287,6 +290,58 @@ export default {
       cancel: 'cancel',
       exportName: 'Warehouse.xls'
     },
+    WarehouseArea: {
+      warehouseId: 'Warehouse',
+      areaCode: 'Area Code',
+      areaName: 'Area Name',
+      areaSize: 'Area Size (㎡)',
+      description: 'Description',
+      status: 'Status',
+      createTime: 'Create Time',
+      placeholderWarehouseId: 'Please select warehouse',
+      placeholderAreaCode: 'Please enter area code',
+      placeholderAreaName: 'Please enter area name',
+      placeholderAreaSize: 'Please enter area size',
+      placeholderDescription: 'Please enter description',
+      placeholderStatus: 'Please select status',
+      validatorWarehouseIdRequired: 'Warehouse is required',
+      validatorAreaCodeRequired: 'Area code is required',
+      validatorAreaNameRequired: 'Area name is required',
+      validatorStatusRequired: 'Status is required'
+    },
+    WarehouseLocation: {
+      warehouseId: 'Warehouse',
+      areaId: 'Area',
+      code: 'Location Code',
+      name: 'Location Name',
+      areaSize: 'Area Size (㎡)',
+      maxLoadWeight: 'Max Load Weight',
+      position: 'Position (X,Y,Z)',
+      positionX: 'Position X',
+      positionY: 'Position Y',
+      positionZ: 'Position Z',
+      allowProductMix: 'Allow Product Mix',
+      allowBatchMix: 'Allow Batch Mix',
+      status: 'Status',
+      createTime: 'Create Time',
+      placeholderWarehouseId: 'Please select warehouse',
+      placeholderAreaId: 'Please select area',
+      placeholderCode: 'Please enter location code',
+      placeholderName: 'Please enter location name',
+      placeholderAreaSize: 'Please enter area size',
+      placeholderMaxLoadWeight: 'Please enter max load weight',
+      placeholderPositionX: 'Please enter position X',
+      placeholderPositionY: 'Please enter position Y',
+      placeholderPositionZ: 'Please enter position Z',
+      placeholderStatus: 'Please select status',
+      validatorWarehouseIdRequired: 'Warehouse is required',
+      validatorAreaIdRequired: 'Area is required',
+      validatorCodeRequired: 'Location code is required',
+      validatorNameRequired: 'Location name is required',
+      validatorAllowProductMixRequired: 'Allow product mix is required',
+      validatorAllowBatchMixRequired: 'Allow batch mix is required',
+      validatorStatusRequired: 'Status is required'
+    },
     Stock: {
       product: 'Product',
       warehouse: 'Warehouse',
@@ -1280,7 +1335,10 @@ export default {
       qrcodeEmpty: 'No QR code',
       validatorDeviceCodeRequired: 'Code can not be empty',
       gjTitle: 'Select key components',
-      bjTitle: 'Select spare parts'
+      bjTitle: 'Select spare parts',
+      Detail: {
+        invalidId: 'Invalid device ID'
+      }
     },
     // Critical Component
     EquipmentKeyItems: {
@@ -4367,7 +4425,12 @@ export default {
       detailTabRelatedPlan: 'Related Plans',
       detailTabQualityInfo: 'Quality Info',
       detailTabBaogongInfo: 'Work Report',
-      exportFilename: 'ProductionReport'
+      exportFilename: 'ProductionReport',
+      tableOperate: 'Operate',
+      detail: 'Detail'
+    },
+    Detail: {
+      invalidId: 'Invalid parameter, task ID cannot be empty'
     },
     BasicInfo: {
       buttonRefresh: 'Refresh',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 16e4c65b..bcbdaec4 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -59,6 +59,8 @@ export default {
     copy: '复制',
     copySuccess: '复制成功',
     copyError: '复制失败',
+    yes: '是',
+    no: '否',
     code: '编码保存后自动生成'
   },
   ReportDashboard: {
@@ -287,6 +289,58 @@ export default {
       cancel: '取消',
       exportName: '仓库.xls'
     },
+    WarehouseArea: {
+      warehouseId: '所属仓库',
+      areaCode: '库区编码',
+      areaName: '库区名称',
+      areaSize: '面积(㎡)',
+      description: '库区描述',
+      status: '开启状态',
+      createTime: '创建时间',
+      placeholderWarehouseId: '请选择所属仓库',
+      placeholderAreaCode: '请输入库区编码',
+      placeholderAreaName: '请输入库区名称',
+      placeholderAreaSize: '请输入面积',
+      placeholderDescription: '请输入库区描述',
+      placeholderStatus: '请选择开启状态',
+      validatorWarehouseIdRequired: '所属仓库不能为空',
+      validatorAreaCodeRequired: '库区编码不能为空',
+      validatorAreaNameRequired: '库区名称不能为空',
+      validatorStatusRequired: '开启状态不能为空'
+    },
+    WarehouseLocation: {
+      warehouseId: '所属仓库',
+      areaId: '所属库区',
+      code: '库位编码',
+      name: '库位名称',
+      areaSize: '面积(㎡)',
+      maxLoadWeight: '最大载重量',
+      position: '库位位置(X,Y,Z)',
+      positionX: '位置X',
+      positionY: '位置Y',
+      positionZ: '位置Z',
+      allowProductMix: '允许产品混放',
+      allowBatchMix: '允许批次混放',
+      status: '开启状态',
+      createTime: '创建时间',
+      placeholderWarehouseId: '请选择所属仓库',
+      placeholderAreaId: '请选择所属库区',
+      placeholderCode: '请输入库位编码',
+      placeholderName: '请输入库位名称',
+      placeholderAreaSize: '请输入面积',
+      placeholderMaxLoadWeight: '请输入最大载重量',
+      placeholderPositionX: '请输入位置X',
+      placeholderPositionY: '请输入位置Y',
+      placeholderPositionZ: '请输入位置Z',
+      placeholderStatus: '请选择开启状态',
+      validatorWarehouseIdRequired: '所属仓库不能为空',
+      validatorAreaIdRequired: '所属库区不能为空',
+      validatorCodeRequired: '库位编码不能为空',
+      validatorNameRequired: '库位名称不能为空',
+      validatorAllowProductMixRequired: '是否允许产品混放不能为空',
+      validatorAllowBatchMixRequired: '是否允许批次混放不能为空',
+      validatorStatusRequired: '开启状态不能为空'
+    },
     Stock: {
       product: '产品',
       warehouse: '仓库',
@@ -1195,7 +1249,7 @@ export default {
       statusDisabled: '不启用',
       deviceType: '类型',
       deviceSpec: '规格型号',
-      /* deviceModel: '型号',*/
+      deviceModel: '型号',
       isSchedueld: '是否排产',
       ratedCapacity: '额定产能',
       yes: '是',
@@ -1270,7 +1324,10 @@ export default {
       qrcodeEmpty: '暂无二维码',
       validatorDeviceCodeRequired: '编码不能为空',
       gjTitle: '选择关键件',
-      bjTitle: '选择备件'
+      bjTitle: '选择备件',
+      Detail: {
+        invalidId: '无效的设备ID'
+      }
     },
     // 设备关键件
     EquipmentKeyItems: {
@@ -4578,7 +4635,12 @@ export default {
       detailTabRelatedPlan: '关联计划',
       detailTabQualityInfo: '质检信息',
       detailTabBaogongInfo: '报工信息',
-      exportFilename: '生产报表'
+      exportFilename: '生产报表',
+      tableOperate: '操作',
+      detail: '详情'
+    },
+    Detail: {
+      invalidId: '参数错误，任务单ID不能为空'
     },
     BasicInfo: {
       buttonRefresh: '刷新',
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 2a28f0b1..d1e56667 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -694,6 +694,28 @@ const remainingRouter: AppRouteRecordRaw[] = [
           activeMenu: '/mes/plan'
         },
         component: () => import('@/views/mes/plan/index.vue')
+      },
+      {
+        path: 'production-report/detail/:id',
+        name: 'MesProductionReportDetail',
+        meta: {
+          title: '生产报工详情',
+          noCache: true,
+          hidden: true,
+          activeMenu: '/mes/productionReport'
+        },
+        component: () => import('@/views/mes/productionReport/detail/index.vue')
+      },
+      {
+        path: 'device-ledger/detail/:id',
+        name: 'MesDeviceLedgerDetail',
+        meta: {
+          title: '设备台账详情',
+          noCache: true,
+          hidden: true,
+          activeMenu: '/mes/deviceledger'
+        },
+        component: () => import('@/views/mes/deviceledger/detail/index.vue')
       }
     ]
   }
diff --git a/src/views/erp/product/product/ProductForm.vue b/src/views/erp/product/product/ProductForm.vue
index e5e1f420..784f2609 100644
--- a/src/views/erp/product/product/ProductForm.vue
+++ b/src/views/erp/product/product/ProductForm.vue
@@ -12,7 +12,7 @@
         <el-col :span="12">
           <el-form-item :label="t('FactoryModeling.ProductInformation.dialogBarCodeLabel')" prop="barCode">
             <el-row :gutter="10" style="width: 100%">
-              <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
+              <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="20">
                 <el-input
                   v-model="formData.barCode"
                   :placeholder="t('FactoryModeling.ProductInformation.dialogBarCodePlaceholder')"
diff --git a/src/views/erp/stock/warehouse/index.vue b/src/views/erp/stock/warehouse/index.vue
index c3ad9b7d..2d740bb7 100644
--- a/src/views/erp/stock/warehouse/index.vue
+++ b/src/views/erp/stock/warehouse/index.vue
@@ -117,6 +117,13 @@
           >
             {{ t('action.edit') }}
           </el-button>
+          <el-button
+            link
+            type="info"
+            @click="openDetail(scope.row.id)"
+          >
+            {{ t('action.detail') }}
+          </el-button>
           <el-button
             link
             type="danger"
@@ -139,6 +146,77 @@
 
   <!-- 表单弹窗：添加/修改 -->
   <WarehouseForm ref="formRef" @success="getList" />
+
+  <!-- 详情弹窗 -->
+  <Dialog :title="t('action.detail')" v-model="detailDialogVisible" width="1200px">
+    <div v-if="detailData">
+      <el-descriptions :column="2" border>
+        <el-descriptions-item :label="t('ErpStock.Warehouse.name')">{{ detailData.name }}</el-descriptions-item>
+        <el-descriptions-item :label="t('ErpStock.Warehouse.address')">{{ detailData.address }}</el-descriptions-item>
+        <el-descriptions-item :label="t('ErpStock.Warehouse.principal')">{{ detailData.principal }}</el-descriptions-item>
+        <el-descriptions-item :label="t('ErpStock.Warehouse.remark')">{{ detailData.remark || '-' }}</el-descriptions-item>
+        <el-descriptions-item :label="t('ErpStock.Warehouse.sort')">{{ detailData.sort }}</el-descriptions-item>
+        <el-descriptions-item :label="t('ErpStock.Warehouse.status')">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="detailData.status" />
+        </el-descriptions-item>
+      </el-descriptions>
+
+      <el-tabs v-model="activeTab" class="mt-4">
+        <el-tab-pane :label="t('ErpStock.WarehouseArea.areaName')" name="area">
+          <el-table :data="detailData.areaList || []" style="width: 100%">
+            <el-table-column :label="t('ErpStock.WarehouseArea.areaCode')" prop="areaCode" />
+            <el-table-column :label="t('ErpStock.WarehouseArea.areaName')" prop="areaName" />
+            <el-table-column :label="t('ErpStock.WarehouseArea.areaSize')" prop="areaSize" />
+            <el-table-column :label="t('ErpStock.WarehouseArea.description')" prop="description" />
+            <el-table-column :label="t('ErpStock.WarehouseArea.status')" prop="status">
+              <template #default="scope">
+                <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+              </template>
+            </el-table-column>
+            <el-table-column :label="t('ErpStock.WarehouseArea.createTime')" prop="createTime" :formatter="(row) => new Date(row.createTime).toLocaleString()" />
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane :label="t('ErpStock.WarehouseLocation.name')" name="location">
+          <el-table :data="detailData.locationList || []" style="width: 100%">
+            <el-table-column :label="t('ErpStock.WarehouseArea.areaName')">
+              <template #default="scope">
+                {{ getAreaName(scope.row.areaId) }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="t('ErpStock.WarehouseLocation.code')" prop="code" />
+            <el-table-column :label="t('ErpStock.WarehouseLocation.name')" prop="name" />
+            <el-table-column :label="t('ErpStock.WarehouseLocation.areaSize')" prop="areaSize" />
+            <el-table-column :label="t('ErpStock.WarehouseLocation.maxLoadWeight')" prop="maxLoadWeight" />
+            <el-table-column :label="t('ErpStock.WarehouseLocation.position')">
+              <template #default="scope">
+                {{ scope.row.positionX }}, {{ scope.row.positionY }}, {{ scope.row.positionZ }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="t('ErpStock.WarehouseLocation.allowProductMix')">
+              <template #default="scope">
+                <el-tag :type="scope.row.allowProductMix ? 'success' : 'danger'" size="small">
+                  {{ scope.row.allowProductMix ? t('common.yes') : t('common.no') }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column :label="t('ErpStock.WarehouseLocation.allowBatchMix')">
+              <template #default="scope">
+                <el-tag :type="scope.row.allowBatchMix ? 'success' : 'danger'" size="small">
+                  {{ scope.row.allowBatchMix ? t('common.yes') : t('common.no') }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column :label="t('ErpStock.WarehouseLocation.status')" prop="status">
+              <template #default="scope">
+                <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+              </template>
+            </el-table-column>
+            <el-table-column :label="t('ErpStock.WarehouseLocation.createTime')" prop="createTime" :formatter="(row) => new Date(row.createTime).toLocaleString()" />
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </Dialog>
 </template>
 
 <script setup lang="ts">
@@ -148,6 +226,7 @@ import download from '@/utils/download'
 import { WarehouseApi, WarehouseVO } from '@/api/erp/stock/warehouse'
 import WarehouseForm from './WarehouseForm.vue'
 import { erpPriceTableColumnFormatter } from '@/utils'
+import { Dialog } from '@/components/Dialog'
 
 /** ERP 仓库列表 */
 defineOptions({ name: 'ErpWarehouse' })
@@ -166,6 +245,9 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
+const detailDialogVisible = ref(false) // 详情弹窗的是否展示
+const detailData = ref<WarehouseVO | null>(null) // 详情的数据
+const activeTab = ref('area') // 当前激活的tab
 
 /** 查询列表 */
 const getList = async () => {
@@ -247,6 +329,22 @@ const handleExport = async () => {
   }
 }
 
+/** 打开详情弹窗 */
+const openDetail = async (id: number) => {
+  try {
+    detailData.value = await WarehouseApi.getWarehouse(id)
+    detailDialogVisible.value = true
+  } catch (error) {
+    message.error(t('common.requestError'))
+  }
+}
+
+/** 根据库区ID获取库区名称 */
+const getAreaName = (areaId: number) => {
+  if (!detailData.value?.areaList) return '-'
+  return detailData.value.areaList.find((area) => area.id === areaId)?.areaName || '-'
+}
+
 /** 选中操作 */
 const selectionList = ref<WarehouseVO[]>([])
 const handleSelectionChange = (rows: WarehouseVO[]) => {
diff --git a/src/views/erp/warehousearea/WarehouseAreaForm.vue b/src/views/erp/warehousearea/WarehouseAreaForm.vue
new file mode 100644
index 00000000..83e87a00
--- /dev/null
+++ b/src/views/erp/warehousearea/WarehouseAreaForm.vue
@@ -0,0 +1,148 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item :label="t('ErpStock.WarehouseArea.warehouseId')" prop="warehouseId">
+        <el-select
+          v-model="formData.warehouseId"
+          :placeholder="t('ErpStock.WarehouseArea.placeholderWarehouseId')"
+          class="!w-1/1"
+        >
+          <el-option
+            v-for="item in warehouseList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseArea.areaCode')" prop="areaCode">
+        <el-row :gutter="10" class="!w-full">
+          <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
+            <el-input v-model="formData.areaCode" :placeholder="t('ErpStock.WarehouseArea.placeholderAreaCode')" :disabled="formData.isCode == true || formType === 'update'" />
+          </el-col>
+          <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
+            <div>
+              <el-switch v-model="formData.isCode" :disabled="formType === 'update'" />
+            </div>
+          </el-col>
+        </el-row>
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseArea.areaName')" prop="areaName">
+        <el-input v-model="formData.areaName" :placeholder="t('ErpStock.WarehouseArea.placeholderAreaName')" />
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseArea.areaSize')" prop="areaSize">
+        <el-input-number
+          v-model="formData.areaSize"
+          :placeholder="t('ErpStock.WarehouseArea.placeholderAreaSize')"
+          :min="0"
+          :precision="2"
+          class="!w-1/1"
+        />
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseArea.description')" prop="description">
+        <el-input type="textarea" v-model="formData.description" :placeholder="t('ErpStock.WarehouseArea.placeholderDescription')" />
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseArea.status')" prop="status">
+        <el-switch v-model="formData.status" :active-value="CommonStatusEnum.ENABLE" :inactive-value="CommonStatusEnum.DISABLE" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
+      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { WarehouseAreaApi, WarehouseAreaVO } from '@/api/erp/stock/warehousearea'
+import { WarehouseApi } from '@/api/erp/stock/warehouse'
+import { CommonStatusEnum } from '@/utils/constants'
+
+defineOptions({ name: 'WarehouseAreaForm' })
+
+const { t } = useI18n()
+const message = useMessage()
+
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const formLoading = ref(false)
+const formType = ref('')
+const formData = ref({
+  id: undefined,
+  warehouseId: undefined,
+  areaCode: undefined,
+  areaName: undefined,
+  areaSize: undefined,
+  description: undefined,
+  status: undefined,
+  isCode: true
+})
+const formRules = reactive({
+  warehouseId: [{ required: true, message: t('ErpStock.WarehouseArea.validatorWarehouseIdRequired'), trigger: 'blur' }],
+  areaName: [{ required: true, message: t('ErpStock.WarehouseArea.validatorAreaNameRequired'), trigger: 'blur' }],
+  status: [{ required: true, message: t('ErpStock.WarehouseArea.validatorStatusRequired'), trigger: 'blur' }]
+})
+const formRef = ref()
+const warehouseList = ref<any[]>([])
+
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await WarehouseAreaApi.getWarehouseArea(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open })
+
+const emit = defineEmits(['success'])
+const submitForm = async () => {
+  await formRef.value.validate()
+  formLoading.value = true
+  try {
+    const data = { ...formData.value } as unknown as WarehouseAreaVO
+    if (data.isCode) {
+      data.areaCode = undefined
+    }
+    if (formType.value === 'create') {
+      await WarehouseAreaApi.createWarehouseArea(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await WarehouseAreaApi.updateWarehouseArea(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    warehouseId: undefined,
+    areaCode: undefined,
+    areaName: undefined,
+    areaSize: undefined,
+    description: undefined,
+    status: CommonStatusEnum.ENABLE,
+    isCode: true
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/erp/warehousearea/index.vue b/src/views/erp/warehousearea/index.vue
new file mode 100644
index 00000000..1feed687
--- /dev/null
+++ b/src/views/erp/warehousearea/index.vue
@@ -0,0 +1,201 @@
+<template>
+  <ContentWrap>
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="auto"
+    >
+      <el-form-item :label="t('ErpStock.WarehouseArea.warehouseId')" prop="warehouseId">
+        <el-select
+          v-model="queryParams.warehouseId"
+          :placeholder="t('ErpStock.WarehouseArea.placeholderWarehouseId')"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="item in warehouseList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseArea.areaCode')" prop="areaCode">
+        <el-input
+          v-model="queryParams.areaCode"
+          :placeholder="t('ErpStock.WarehouseArea.placeholderAreaCode')"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseArea.areaName')" prop="areaName">
+        <el-input
+          v-model="queryParams.areaName"
+          :placeholder="t('ErpStock.WarehouseArea.placeholderAreaName')"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseArea.status')" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          :placeholder="t('ErpStock.WarehouseArea.placeholderStatus')"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{ t('common.query') }}</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('common.reset') }}</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['erp:warehouse-area:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> {{ t('action.add') }}
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <ContentWrap>
+    <el-table
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      row-key="id"
+    >
+      <el-table-column :label="t('ErpStock.WarehouseArea.warehouseId')" align="center" prop="warehouseId" sortable>
+        <template #default="scope">
+          {{ getWarehouseName(scope.row.warehouseId) }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="t('ErpStock.WarehouseArea.areaCode')" align="center" prop="areaCode" sortable />
+      <el-table-column :label="t('ErpStock.WarehouseArea.areaName')" align="center" prop="areaName" sortable />
+      <el-table-column :label="t('ErpStock.WarehouseArea.areaSize')" align="center" prop="areaSize" />
+      <el-table-column :label="t('ErpStock.WarehouseArea.description')" align="center" prop="description" />
+      <el-table-column :label="t('ErpStock.WarehouseArea.status')" align="center" prop="status" sortable>
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column :label="t('ErpStock.WarehouseArea.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px" sortable />
+      <el-table-column :label="t('common.operate')" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['erp:warehouse-area:update']"
+          >
+            {{ t('action.edit') }}
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['erp:warehouse-area:delete']"
+          >
+            {{ t('action.del') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <WarehouseAreaForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import { WarehouseAreaApi, WarehouseAreaVO } from '@/api/erp/stock/warehousearea'
+import { WarehouseApi } from '@/api/erp/stock/warehouse'
+import WarehouseAreaForm from './WarehouseAreaForm.vue'
+
+defineOptions({ name: 'ErpWarehouseArea' })
+
+const message = useMessage()
+const { t } = useI18n()
+
+const loading = ref(true)
+const list = ref<WarehouseAreaVO[]>([])
+const total = ref(0)
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  warehouseId: undefined,
+  areaCode: undefined,
+  areaName: undefined,
+  status: undefined
+})
+const queryFormRef = ref()
+const warehouseList = ref<any[]>([])
+
+const getWarehouseName = (warehouseId: number) => {
+  return warehouseList.value.find((w) => w.id === warehouseId)?.name ?? '-'
+}
+
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await WarehouseAreaApi.getWarehouseAreaPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+const getWarehouseList = async () => {
+  warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
+}
+
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+const handleDelete = async (id: number) => {
+  try {
+    await message.delConfirm()
+    await WarehouseAreaApi.deleteWarehouseArea(id)
+    message.success(t('common.delSuccess'))
+    await getList()
+  } catch {}
+}
+
+onMounted(() => {
+  getWarehouseList()
+  getList()
+})
+</script>
diff --git a/src/views/erp/warehouselocation/WarehouseLocationForm.vue b/src/views/erp/warehouselocation/WarehouseLocationForm.vue
new file mode 100644
index 00000000..f2fe9a1d
--- /dev/null
+++ b/src/views/erp/warehouselocation/WarehouseLocationForm.vue
@@ -0,0 +1,227 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="120px"
+      v-loading="formLoading"
+    >
+      <el-form-item :label="t('ErpStock.WarehouseLocation.warehouseId')" prop="warehouseId">
+        <el-select
+          v-model="formData.warehouseId"
+          :placeholder="t('ErpStock.WarehouseLocation.placeholderWarehouseId')"
+          class="!w-1/1"
+          @change="handleWarehouseChange"
+        >
+          <el-option
+            v-for="item in warehouseList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseLocation.areaId')" prop="areaId">
+        <el-select
+          v-model="formData.areaId"
+          :placeholder="t('ErpStock.WarehouseLocation.placeholderAreaId')"
+          class="!w-1/1"
+        >
+          <el-option
+            v-for="item in filteredAreaList"
+            :key="item.id"
+            :label="item.areaName"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseLocation.code')" prop="code">
+        <el-row :gutter="10" class="!w-full">
+          <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
+            <el-input v-model="formData.code" :placeholder="t('ErpStock.WarehouseLocation.placeholderCode')" :disabled="formData.isCode == true || formType === 'update'" />
+          </el-col>
+          <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
+            <div>
+              <el-switch v-model="formData.isCode" :disabled="formType === 'update'" />
+            </div>
+          </el-col>
+        </el-row>
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseLocation.name')" prop="name">
+        <el-input v-model="formData.name" :placeholder="t('ErpStock.WarehouseLocation.placeholderName')" />
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseLocation.areaSize')" prop="areaSize">
+        <el-input-number
+          v-model="formData.areaSize"
+          :placeholder="t('ErpStock.WarehouseLocation.placeholderAreaSize')"
+          :min="0"
+          :precision="2"
+          class="!w-1/1"
+        />
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseLocation.maxLoadWeight')" prop="maxLoadWeight">
+        <el-input-number
+          v-model="formData.maxLoadWeight"
+          :placeholder="t('ErpStock.WarehouseLocation.placeholderMaxLoadWeight')"
+          :min="0"
+          :precision="2"
+          class="!w-1/1"
+        />
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseLocation.positionX')" prop="positionX">
+        <el-input-number
+          v-model="formData.positionX"
+          :placeholder="t('ErpStock.WarehouseLocation.placeholderPositionX')"
+          :precision="0"
+          class="!w-1/1"
+        />
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseLocation.positionY')" prop="positionY">
+        <el-input-number
+          v-model="formData.positionY"
+          :placeholder="t('ErpStock.WarehouseLocation.placeholderPositionY')"
+          :precision="0"
+          class="!w-1/1"
+        />
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseLocation.positionZ')" prop="positionZ">
+        <el-input-number
+          v-model="formData.positionZ"
+          :placeholder="t('ErpStock.WarehouseLocation.placeholderPositionZ')"
+          :precision="0"
+          class="!w-1/1"
+        />
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseLocation.allowProductMix')" prop="allowProductMix">
+        <el-switch v-model="formData.allowProductMix" />
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseLocation.allowBatchMix')" prop="allowBatchMix">
+        <el-switch v-model="formData.allowBatchMix" />
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseLocation.status')" prop="status">
+        <el-switch v-model="formData.status" :active-value="CommonStatusEnum.ENABLE" :inactive-value="CommonStatusEnum.DISABLE" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
+      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { WarehouseLocationApi, WarehouseLocationVO } from '@/api/erp/stock/warehouselocation'
+import { WarehouseApi } from '@/api/erp/stock/warehouse'
+import { WarehouseAreaApi } from '@/api/erp/stock/warehousearea'
+import { CommonStatusEnum } from '@/utils/constants'
+
+defineOptions({ name: 'WarehouseLocationForm' })
+
+const { t } = useI18n()
+const message = useMessage()
+
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const formLoading = ref(false)
+const formType = ref('')
+const formData = ref({
+  id: undefined,
+  warehouseId: undefined,
+  areaId: undefined,
+  code: undefined,
+  name: undefined,
+  areaSize: undefined,
+  maxLoadWeight: undefined,
+  positionX: undefined,
+  positionY: undefined,
+  positionZ: undefined,
+  allowProductMix: false,
+  allowBatchMix: false,
+  status: undefined,
+  isCode: true
+})
+const formRules = reactive({
+  warehouseId: [{ required: true, message: t('ErpStock.WarehouseLocation.validatorWarehouseIdRequired'), trigger: 'blur' }],
+  areaId: [{ required: true, message: t('ErpStock.WarehouseLocation.validatorAreaIdRequired'), trigger: 'blur' }],
+  name: [{ required: true, message: t('ErpStock.WarehouseLocation.validatorNameRequired'), trigger: 'blur' }],
+  allowProductMix: [{ required: true, message: t('ErpStock.WarehouseLocation.validatorAllowProductMixRequired'), trigger: 'blur' }],
+  allowBatchMix: [{ required: true, message: t('ErpStock.WarehouseLocation.validatorAllowBatchMixRequired'), trigger: 'blur' }],
+  status: [{ required: true, message: t('ErpStock.WarehouseLocation.validatorStatusRequired'), trigger: 'blur' }]
+})
+const formRef = ref()
+const warehouseList = ref<any[]>([])
+const areaList = ref<any[]>([])
+
+const filteredAreaList = computed(() => {
+  if (!formData.value.warehouseId) return areaList.value
+  return areaList.value.filter((item) => item.warehouseId === formData.value.warehouseId)
+})
+
+const handleWarehouseChange = () => {
+  formData.value.areaId = undefined
+}
+
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
+  const areaData = await WarehouseAreaApi.getWarehouseAreaPage({ pageNo: 1, pageSize: 100 })
+  areaList.value = areaData.list ?? []
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await WarehouseLocationApi.getWarehouseLocation(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open })
+
+const emit = defineEmits(['success'])
+const submitForm = async () => {
+  await formRef.value.validate()
+  formLoading.value = true
+  try {
+    const data = { ...formData.value } as unknown as WarehouseLocationVO
+    if (data.isCode) {
+      data.code = undefined
+    }
+    if (formType.value === 'create') {
+      await WarehouseLocationApi.createWarehouseLocation(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await WarehouseLocationApi.updateWarehouseLocation(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    warehouseId: undefined,
+    areaId: undefined,
+    code: undefined,
+    name: undefined,
+    areaSize: undefined,
+    maxLoadWeight: undefined,
+    positionX: undefined,
+    positionY: undefined,
+    positionZ: undefined,
+    allowProductMix: false,
+    allowBatchMix: false,
+    status: CommonStatusEnum.ENABLE,
+    isCode: true
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/erp/warehouselocation/index.vue b/src/views/erp/warehouselocation/index.vue
new file mode 100644
index 00000000..9d92f67c
--- /dev/null
+++ b/src/views/erp/warehouselocation/index.vue
@@ -0,0 +1,263 @@
+<template>
+  <ContentWrap>
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="auto"
+    >
+      <el-form-item :label="t('ErpStock.WarehouseLocation.warehouseId')" prop="warehouseId">
+        <el-select
+          v-model="queryParams.warehouseId"
+          :placeholder="t('ErpStock.WarehouseLocation.placeholderWarehouseId')"
+          clearable
+          class="!w-240px"
+          @change="handleWarehouseChange"
+        >
+          <el-option
+            v-for="item in warehouseList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseLocation.areaId')" prop="areaId">
+        <el-select
+          v-model="queryParams.areaId"
+          :placeholder="t('ErpStock.WarehouseLocation.placeholderAreaId')"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="item in filteredAreaList"
+            :key="item.id"
+            :label="item.areaName"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseLocation.code')" prop="code">
+        <el-input
+          v-model="queryParams.code"
+          :placeholder="t('ErpStock.WarehouseLocation.placeholderCode')"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseLocation.name')" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          :placeholder="t('ErpStock.WarehouseLocation.placeholderName')"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item :label="t('ErpStock.WarehouseLocation.status')" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          :placeholder="t('ErpStock.WarehouseLocation.placeholderStatus')"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{ t('common.query') }}</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('common.reset') }}</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['erp:warehouse-location:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> {{ t('action.add') }}
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <ContentWrap>
+    <el-table
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      row-key="id"
+    >
+      <el-table-column :label="t('ErpStock.WarehouseLocation.warehouseId')" align="center" prop="warehouseId" sortable>
+        <template #default="scope">
+          {{ getWarehouseName(scope.row.warehouseId) }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="t('ErpStock.WarehouseLocation.areaId')" align="center" prop="areaId" sortable>
+        <template #default="scope">
+          {{ getAreaName(scope.row.areaId) }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="t('ErpStock.WarehouseLocation.code')" align="center" prop="code" sortable />
+      <el-table-column :label="t('ErpStock.WarehouseLocation.name')" align="center" prop="name" sortable />
+      <el-table-column :label="t('ErpStock.WarehouseLocation.areaSize')" align="center" prop="areaSize" />
+      <el-table-column :label="t('ErpStock.WarehouseLocation.maxLoadWeight')" align="center" prop="maxLoadWeight" />
+      <el-table-column :label="t('ErpStock.WarehouseLocation.position')" align="center">
+        <template #default="scope">
+          {{ scope.row.positionX ?? '-' }}, {{ scope.row.positionY ?? '-' }}, {{ scope.row.positionZ ?? '-' }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="t('ErpStock.WarehouseLocation.allowProductMix')" align="center" prop="allowProductMix">
+        <template #default="scope">
+          <el-tag :type="scope.row.allowProductMix ? 'success' : 'danger'" size="small">
+            {{ scope.row.allowProductMix ? t('common.yes') : t('common.no') }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column :label="t('ErpStock.WarehouseLocation.allowBatchMix')" align="center" prop="allowBatchMix">
+        <template #default="scope">
+          <el-tag :type="scope.row.allowBatchMix ? 'success' : 'danger'" size="small">
+            {{ scope.row.allowBatchMix ? t('common.yes') : t('common.no') }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column :label="t('ErpStock.WarehouseLocation.status')" align="center" prop="status" sortable>
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column :label="t('ErpStock.WarehouseLocation.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px" sortable />
+      <el-table-column :label="t('common.operate')" align="center" width="150px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['erp:warehouse-location:update']"
+          >
+            {{ t('action.edit') }}
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['erp:warehouse-location:delete']"
+          >
+            {{ t('action.del') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <WarehouseLocationForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import { WarehouseLocationApi, WarehouseLocationVO } from '@/api/erp/stock/warehouselocation'
+import { WarehouseApi } from '@/api/erp/stock/warehouse'
+import { WarehouseAreaApi } from '@/api/erp/stock/warehousearea'
+import WarehouseLocationForm from './WarehouseLocationForm.vue'
+
+defineOptions({ name: 'ErpWarehouseLocation' })
+
+const message = useMessage()
+const { t } = useI18n()
+
+const loading = ref(true)
+const list = ref<WarehouseLocationVO[]>([])
+const total = ref(0)
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  warehouseId: undefined,
+  areaId: undefined,
+  code: undefined,
+  name: undefined,
+  status: undefined
+})
+const queryFormRef = ref()
+const warehouseList = ref<any[]>([])
+const areaList = ref<any[]>([])
+
+const filteredAreaList = computed(() => {
+  if (!queryParams.warehouseId) return areaList.value
+  return areaList.value.filter((item) => item.warehouseId === queryParams.warehouseId)
+})
+
+const getWarehouseName = (warehouseId: number) => {
+  return warehouseList.value.find((w) => w.id === warehouseId)?.name ?? '-'
+}
+
+const getAreaName = (areaId: number) => {
+  return areaList.value.find((a) => a.id === areaId)?.areaName ?? '-'
+}
+
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await WarehouseLocationApi.getWarehouseLocationPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+const getWarehouseList = async () => {
+  warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
+}
+
+const getAreaList = async () => {
+  const data = await WarehouseAreaApi.getWarehouseAreaPage({ pageNo: 1, pageSize: 100 })
+  areaList.value = data.list ?? []
+}
+
+const handleWarehouseChange = () => {
+  queryParams.areaId = undefined
+}
+
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+const handleDelete = async (id: number) => {
+  try {
+    await message.delConfirm()
+    await WarehouseLocationApi.deleteWarehouseLocation(id)
+    message.success(t('common.delSuccess'))
+    await getList()
+  } catch {}
+}
+
+onMounted(() => {
+  getWarehouseList()
+  getAreaList()
+  getList()
+})
+</script>
diff --git a/src/views/mes/deviceledger/detail/index.vue b/src/views/mes/deviceledger/detail/index.vue
new file mode 100644
index 00000000..360de443
--- /dev/null
+++ b/src/views/mes/deviceledger/detail/index.vue
@@ -0,0 +1,938 @@
+<template>
+  <ContentWrap>
+    <div v-loading="detailLoading" class="device-ledger-detail-body">
+      <el-descriptions :column="3" class="device-ledger-detail-desc">
+        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceNo')">
+          {{ detailData?.deviceCode ?? '' }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceName')">
+          {{ detailData?.deviceName ?? '' }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceStatus')">
+          <dict-tag type="mes_tz_status" :value="detailData?.deviceStatus" />
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceModel')">
+          {{ detailData?.deviceModel ?? '' }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceSpec')">
+          {{ detailData?.deviceSpec ?? '' }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceType')">
+          <el-tag effect="light">{{ getDeviceTypeName(detailData?.deviceTypeName ?? detailData?.deviceType) }}</el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceLocation')">
+          {{ detailData?.deviceLocation ?? '' }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceManagerName')">
+          {{ detailData?.deviceManagerName ?? '' }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.productionDate')">
+          {{ formatDetailDate(detailData?.productionDate) }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')">
+          {{ formatDetailDate(detailData?.factoryEntryDate) }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.remark')">
+          {{ detailData?.remark ?? detailData?.deviceRemark ?? '' }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.creatorName')">
+          {{ detailData?.creatorName ?? '' }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.createTime')">
+          {{ formatDetailDate(detailData?.createTime) }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.updateTime')">
+          {{ formatDetailDate(detailData?.updateTime) }}
+        </el-descriptions-item>
+      </el-descriptions>
+
+      <div v-if="detailData?.qrcodeUrl" class="device-ledger-detail-qrcode">
+        <QrcodeActionCard
+          :image-url="detailData.qrcodeUrl"
+          :print-id="detailData.id || detailData.deviceCode"
+          :print-title="`${detailData.deviceName || '设备'}码打印预览`"
+          :print-paper-width="80"
+          :print-paper-height="80"
+          :print-max-width="220"
+          :empty-text="t('EquipmentManagement.EquipmentLedger.qrcodeLoadError')"
+          :error-text="t('EquipmentManagement.EquipmentLedger.qrcodeLoadError')"
+          :show-refresh="false"
+        />
+      </div>
+
+      <div class="device-ledger-detail-tabs">
+        <el-tabs v-model="detailActiveTab" class="mt-12px">
+          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.checkHistory')" name="check">
+            <div class="device-ledger-tab-toolbar">
+              <el-date-picker
+                v-model="inspectionDateRange"
+                type="daterange"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                :start-placeholder="t('common.startTimeText')"
+                :end-placeholder="t('common.endTimeText')"
+                range-separator="-"
+                :unlink-panels="true"
+                class="mr-10px"
+              />
+              <el-button type="primary" plain @click="handleQueryInspection">{{ t('common.query') }}</el-button>
+              <el-button @click="handleResetInspection">{{ t('common.reset') }}</el-button>
+              <el-button
+                type="success"
+                plain
+                :loading="inspectionExportLoading"
+                @click="handleExportInspection"
+                v-hasPermi="['mes:device-ledger:export']"
+              >
+                <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
+              </el-button>
+            </div>
+            <el-empty v-if="!inspectionStepGroups.length" />
+            <el-steps
+              v-else
+              direction="vertical"
+              :active="inspectionStepGroups.length"
+              class="device-ledger-history-steps"
+            >
+              <el-step v-for="group in inspectionStepGroups" :key="group.key" style="margin-top:8px">
+                <template #title>
+                  <div class="device-ledger-history-title">
+                    <span class="device-ledger-history-time">[{{ group.time }}]</span>
+                    <span class="device-ledger-history-operator">{{ t('EquipmentManagement.EquipmentLedger.operator') }}: {{ group.operator }}</span>
+                  </div>
+                </template>
+                <template #description>
+                  <div class="device-ledger-history-items">
+                    <div v-for="item in group.items" :key="item.key" class="device-ledger-history-item">
+                      <div class="device-ledger-history-item-head">
+                        <el-tag :type="getResultTagType(item.result)">{{ getResultLabel(item.result) }}</el-tag>
+                        <span class="device-ledger-history-item-text">{{ item.name }}</span>
+                      </div>
+                      <div class="device-ledger-history-item-body">
+                        <div class="device-ledger-history-item-row">
+                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.checkMethod') }}</span>
+                          <span class="device-ledger-history-item-value">
+                            <dict-tag type="Inspection_method" :value="item.method" />
+                          </span>
+                        </div>
+                        <div class="device-ledger-history-item-row">
+                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.criteria') }}</span>
+                          <span class="device-ledger-history-item-value">{{ item.criteria ?? '-' }}</span>
+                        </div>
+                        <div class="device-ledger-history-item-row">
+                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.checkTime') }}</span>
+                          <span class="device-ledger-history-item-value">{{ formatHistoryTime(item.taskTime) }}</span>
+                        </div>
+                        <div class="device-ledger-history-item-row">
+                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.createTime') }}</span>
+                          <span class="device-ledger-history-item-value">{{ formatHistoryTime(item.createTime) }}</span>
+                        </div>
+                        <div class="device-ledger-history-item-row">
+                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.remark') }}</span>
+                          <span class="device-ledger-history-item-value">{{ item.remark ?? '-' }}</span>
+                        </div>
+                        <div v-if="item.images?.length" class="device-ledger-history-item-images">
+                          <el-image
+                            v-for="img in item.images"
+                            :key="img"
+                            :src="img"
+                            :preview-src-list="item.images"
+                            preview-teleported
+                            fit="cover"
+                            class="device-ledger-history-item-image"
+                          >
+                            <template #error>
+                              <div class="device-ledger-history-image-error">图片加载失败</div>
+                            </template>
+                          </el-image>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </el-step>
+            </el-steps>
+          </el-tab-pane>
+
+          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.maintainHistory')" name="maintain">
+            <div class="device-ledger-tab-toolbar">
+              <el-date-picker
+                v-model="maintainDateRange"
+                type="daterange"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                :start-placeholder="t('common.startTimeText')"
+                :end-placeholder="t('common.endTimeText')"
+                range-separator="-"
+                :unlink-panels="true"
+                class="mr-10px"
+              />
+              <el-button type="primary" plain @click="handleQueryMaintain">{{ t('common.query') }}</el-button>
+              <el-button @click="handleResetMaintain">{{ t('common.reset') }}</el-button>
+              <el-button
+                type="success"
+                plain
+                :loading="maintainExportLoading"
+                @click="handleExportMaintain"
+                v-hasPermi="['mes:device-ledger:export']"
+              >
+                <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
+              </el-button>
+            </div>
+            <el-empty v-if="!maintainStepGroups.length" />
+            <el-steps
+              v-else
+              direction="vertical"
+              class="device-ledger-history-steps"
+              :active="maintainStepGroups.length"
+            >
+              <el-step v-for="group in maintainStepGroups" :key="group.key" style="margin-top:8px">
+                <template #title>
+                  <div class="device-ledger-history-title">
+                    <span class="device-ledger-history-time">[{{ group.time }}]</span>
+                    <span class="device-ledger-history-operator">{{ t('EquipmentManagement.EquipmentLedger.operator') }}: {{ group.operator }}</span>
+                  </div>
+                </template>
+                <template #description>
+                  <div class="device-ledger-history-items">
+                    <div v-for="item in group.items" :key="item.key" class="device-ledger-history-item">
+                      <div class="device-ledger-history-item-head">
+                        <el-tag :type="getResultTagType(item.result)">{{ getResultLabel(item.result) }}</el-tag>
+                        <span class="device-ledger-history-item-text">{{ item.name }}</span>
+                      </div>
+                      <div class="device-ledger-history-item-body">
+                        <div class="device-ledger-history-item-row">
+                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.maintainMethod') }}</span>
+                          <span class="device-ledger-history-item-value">
+                            <dict-tag type="Inspection_method" :value="item.method" />
+                          </span>
+                        </div>
+                        <div class="device-ledger-history-item-row">
+                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.criteria') }}</span>
+                          <span class="device-ledger-history-item-value">{{ item.criteria ?? '-' }}</span>
+                        </div>
+                        <div class="device-ledger-history-item-row">
+                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.maintainTime') }}</span>
+                          <span class="device-ledger-history-item-value">{{ String(formatHistoryTime(item.taskTime)) }}</span>
+                        </div>
+                        <div class="device-ledger-history-item-row">
+                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.createTime') }}</span>
+                          <span class="device-ledger-history-item-value">{{ formatHistoryTime(item.createTime) }}</span>
+                        </div>
+                        <div class="device-ledger-history-item-row">
+                          <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.remark') }}</span>
+                          <span class="device-ledger-history-item-value">{{ item.remark ?? '-' }}</span>
+                        </div>
+                        <div v-if="item.images?.length" class="device-ledger-history-item-images">
+                          <el-image
+                            v-for="img in item.images"
+                            :key="img"
+                            :src="img"
+                            :preview-src-list="item.images"
+                            preview-teleported
+                            fit="cover"
+                            class="device-ledger-history-item-image"
+                          >
+                            <template #error>
+                              <div class="device-ledger-history-image-error">图片加载失败</div>
+                            </template>
+                          </el-image>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </el-step>
+            </el-steps>
+          </el-tab-pane>
+
+          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.repairHistory')" name="repair">
+            <div class="device-ledger-tab-toolbar">
+              <el-date-picker
+                v-model="repairDateRange"
+                type="daterange"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                :start-placeholder="t('common.startTimeText')"
+                :end-placeholder="t('common.endTimeText')"
+                range-separator="-"
+                :unlink-panels="true"
+                class="mr-10px"
+              />
+              <el-button type="primary" plain @click="handleQueryRepair">{{ t('common.query') }}</el-button>
+              <el-button @click="handleResetRepair">{{ t('common.reset') }}</el-button>
+              <el-button
+                type="success"
+                plain
+                :loading="repairExportLoading"
+                @click="handleExportRepair"
+                v-hasPermi="['mes:device-ledger:export']"
+              >
+                <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
+              </el-button>
+            </div>
+            <el-empty v-if="!repairGroups.length" />
+            <el-collapse v-else v-model="repairActiveNames" class="device-ledger-repair-collapse">
+              <el-collapse-item v-for="group in repairGroups" :key="group.key" :name="group.key">
+                <template #title>
+                  <div class="device-ledger-repair-title">
+                    <span class="device-ledger-repair-name">{{ group.name }}</span>
+                    <span class="device-ledger-repair-meta">共{{ group.items.length }}条</span>
+                  </div>
+                </template>
+                <div class="device-ledger-history-items">
+                  <div
+                    v-for="row in group.items"
+                    :key="String(row.id ?? row.subjectId ?? row.subjectCode)"
+                    class="device-ledger-history-item"
+                  >
+                    <div class="device-ledger-history-item-head">
+                      <el-tag type="info" effect="light">{{ row.subjectCode ?? '-' }}</el-tag>
+                      <span class="device-ledger-history-item-text">{{ row.subjectName ?? '-' }}</span>
+                    </div>
+                    <div class="device-ledger-history-item-body">
+                      <div class="device-ledger-history-item-row">
+                        <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.projectName') }}</span>
+                        <span class="device-ledger-history-item-value">{{ row.subjectContent ?? '-' }}</span>
+                      </div>
+                      <div class="device-ledger-history-item-row">
+                        <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.repairResult') }}</span>
+                        <span class="device-ledger-history-item-value">
+                          <el-tag :type="getResultTagType(row.result ?? row.repairResult)">
+                            {{ getResultLabel(row.repairResult ?? row.result) }}
+                          </el-tag>
+                        </span>
+                      </div>
+                      <div class="device-ledger-history-item-row">
+                        <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.remark') }}</span>
+                        <span class="device-ledger-history-item-value">{{ row.remark ?? '-' }}</span>
+                      </div>
+                      <div class="device-ledger-history-item-row">
+                        <span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.finishDate') }}</span>
+                        <span class="device-ledger-history-item-value">{{ String(formatHistoryTime(row.finishDate)).split(' ')[0] }}</span>
+                      </div>
+                      <div v-if="row.malfunctionImages?.length" class="device-ledger-history-item-images">
+                        <el-image
+                          v-for="img in row.malfunctionImages"
+                          :key="img"
+                          :src="img"
+                          :preview-src-list="row.malfunctionImages"
+                          preview-teleported
+                          fit="cover"
+                          class="device-ledger-history-item-image"
+                        >
+                          <template #error>
+                            <div class="device-ledger-history-image-error">图片加载失败</div>
+                          </template>
+                        </el-image>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+          </el-tab-pane>
+
+          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.criticalComponent')" name="criticalComponent">
+            <div class="device-ledger-tab-toolbar">
+              <el-button
+                type="success"
+                plain
+                :loading="criticalExportLoading"
+                @click="handleExportCriticalComponent"
+                v-hasPermi="['mes:device-ledger:export']"
+              >
+                <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
+              </el-button>
+            </div>
+            <el-table v-loading="tableLoading" :data="detailData?.componentList" :stripe="true" :show-overflow-tooltip="true">
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.componentCode')" align="center" prop="code" min-width="140" sortable />
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.componentName')" align="center" prop="name" min-width="140" sortable />
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.componentDesc')" align="center" prop="description" min-width="180" />
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.remark')" align="center" prop="remark" min-width="180" />
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180" sortable />
+            </el-table>
+          </el-tab-pane>
+
+          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.sparePart')" name="component">
+            <div class="device-ledger-tab-toolbar">
+              <el-button
+                type="success"
+                plain
+                :loading="spareExportLoading"
+                @click="handleExportSpareBased"
+                v-hasPermi="['mes:device-ledger:export']"
+              >
+                <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
+              </el-button>
+            </div>
+            <el-table v-loading="tableLoading" :data="detailData?.beijianList" :stripe="true" :show-overflow-tooltip="true">
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.spareCode')" align="center" prop="barCode" sortable />
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.spareName')" align="left" prop="name" width="220px" sortable />
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.category')" align="center" prop="categoryName" sortable />
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.unit')" align="center" prop="unitName" sortable />
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px" sortable />
+            </el-table>
+          </el-tab-pane>
+
+          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.mold')" name="mold">
+            <el-table v-loading="tableLoading" :data="detailData?.moldList" :stripe="true" :show-overflow-tooltip="true">
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.moldCode')" align="center" prop="code" min-width="140" sortable />
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.moldName')" align="center" prop="name" min-width="140" sortable />
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.moldRemark')" align="center" prop="remark" min-width="180" />
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180" sortable />
+            </el-table>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import { dateFormatter, formatDate } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { DeviceLedgerApi, DeviceLedgerVO } from '@/api/mes/deviceledger'
+import { DeviceTypeApi, DeviceTypeTreeVO } from '@/api/mes/devicetype'
+import { CriticalComponentApi } from '@/api/mes/criticalComponent'
+import { TicketManagementApi } from '@/api/mes/ticketManagement'
+import { DvRepairApi } from '@/api/mes/dvrepair'
+import QrcodeActionCard from '@/components/QrcodeActionCard/index.vue'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+
+defineOptions({ name: 'MesDeviceLedgerDetail' })
+
+const { t } = useI18n()
+const message = useMessage()
+const route = useRoute()
+const { delView } = useTagsViewStore()
+const { currentRoute } = useRouter()
+
+const deviceId = computed(() => Number(route.params.id))
+const detailLoading = ref(false)
+const tableLoading = ref(false)
+const detailData = ref<DeviceLedgerVO | undefined>()
+const detailActiveTab = ref('check')
+
+const deviceTypeNameMap = ref<Record<number, string>>({})
+
+const buildDeviceTypeNameMap = (nodes: DeviceTypeTreeVO[]) => {
+  const map: Record<number, string> = {}
+  const stack = [...nodes]
+  while (stack.length) {
+    const node = stack.pop()!
+    if (typeof node.id === 'number') map[node.id] = node.name
+    if (Array.isArray(node.children) && node.children.length) stack.push(...node.children)
+  }
+  deviceTypeNameMap.value = map
+}
+
+const getDeviceTypeName = (value: any) => {
+  const id = typeof value === 'number' ? value : Number(value)
+  if (!Number.isNaN(id) && deviceTypeNameMap.value[id]) return deviceTypeNameMap.value[id]
+  return value ?? ''
+}
+
+const formatDetailDate = (value: any) => {
+  if (!value) return ''
+  return formatDate(new Date(value), 'YYYY-MM-DD')
+}
+
+const formatHistoryTime = (value: any) => {
+  const raw = value ?? '-'
+  if (Array.isArray(raw) && raw.length >= 3) {
+    const [y, m, d, hh, mm, ss] = raw
+    const pad = (n: any) => String(n).padStart(2, '0')
+    if (hh !== undefined) return `${y}-${pad(m)}-${pad(d)} ${pad(hh)}:${pad(mm)}:${pad(ss)}`
+    return `${y}-${pad(m)}-${pad(d)}`
+  }
+  const tryDateFromNumber = (v: any) => {
+    const num = Number(v)
+    if (!Number.isFinite(num)) return undefined
+    const s = String(v).trim()
+    const ms = s.length === 10 ? num * 1000 : num
+    const d = new Date(ms)
+    if (Number.isNaN(d.getTime())) return undefined
+    return d
+  }
+  const tryDateFromString = (v: any) => {
+    const s = String(v).trim()
+    if (!s) return undefined
+    const d = new Date(s)
+    if (Number.isNaN(d.getTime())) return undefined
+    return d
+  }
+  const d = typeof raw === 'number' ? tryDateFromNumber(raw) : tryDateFromNumber(raw) ?? tryDateFromString(raw)
+  if (d) return formatDate(d, 'YYYY-MM-DD HH:mm:ss')
+  return String(raw)
+}
+
+const getResultLabel = (value: any) => {
+  const v = value === '' || value === null || value === undefined ? undefined : String(value)
+  if (!v) return '-'
+  const upper = v.toUpperCase()
+  if (v === '0') return '待检测'
+  if (v === '1' || upper === 'OK') return '通过'
+  if (v === '2' || upper === 'NG') return '不通过'
+  return v
+}
+
+const getResultTagType = (value: any) => {
+  const v = value === '' || value === null || value === undefined ? undefined : String(value)
+  if (!v) return 'info'
+  const upper = v.toUpperCase()
+  if (v === '1' || upper === 'OK') return 'success'
+  if (v === '2' || upper === 'NG') return 'danger'
+  if (v === '0') return 'info'
+  return 'info'
+}
+
+const parseImages = (value: any): string[] => {
+  if (!value) return []
+  if (Array.isArray(value)) return value.map(String).filter(Boolean)
+  const cleaned = String(value).replace(/[`'"]/g, '').trim()
+  return cleaned
+    .split(',')
+    .map((v) => v.trim())
+    .filter(Boolean)
+}
+
+type HistoryStepItem = {
+  key: string
+  name: string
+  result: any
+  method?: any
+  criteria?: any
+  images?: string[]
+  remark?: any
+  taskTime?: any
+  createTime?: any
+}
+type HistoryStepGroup = { key: string; time: string; operator: string; items: HistoryStepItem[] }
+
+const buildStepGroups = (
+  rows: any[],
+  options: { timeField: string; nameFieldCandidates: string[]; resultFieldCandidates: string[] }
+) => {
+  const groups = new Map<string, HistoryStepGroup>()
+  for (const row of rows ?? []) {
+    const time = formatHistoryTime(row?.taskTime ?? row?.[options.timeField] ?? row?.createTime)
+    const operator = String(row?.operator ?? row?.creatorName ?? row?.creator ?? '-')
+    const groupKey = `${row?.managementId ?? ''}__${time}__${operator}`
+    const name =
+      options.nameFieldCandidates
+        .map((k) => row?.[k])
+        .find((v) => v !== undefined && v !== null && String(v).trim() !== '') ?? '-'
+    const result =
+      options.resultFieldCandidates
+        .map((k) => row?.[k])
+        .find((v) => v !== undefined && v !== null) ?? undefined
+    const item: HistoryStepItem = {
+      key: String(row?.id ?? `${groupKey}__${String(name)}`),
+      name: String(name),
+      result,
+      method: row?.inspectionMethod,
+      criteria: row?.judgmentCriteria,
+      images: parseImages(row?.images),
+      remark: row?.remark,
+      taskTime: row?.taskTime,
+      createTime: row?.createTime
+    }
+    if (!groups.has(groupKey)) {
+      groups.set(groupKey, { key: groupKey, time, operator, items: [item] })
+    } else {
+      groups.get(groupKey)!.items.push(item)
+    }
+  }
+  return Array.from(groups.values()).sort((a, b) => String(b.time).localeCompare(String(a.time)))
+}
+
+const inspectionHistory = ref<any[]>([])
+const maintainHistory = ref<any[]>([])
+
+const inspectionStepGroups = computed<HistoryStepGroup[]>(() => {
+  return buildStepGroups(inspectionHistory.value, {
+    timeField: 'inspectionTime',
+    nameFieldCandidates: ['inspectionItemName', 'name'],
+    resultFieldCandidates: ['inspectionResult']
+  })
+})
+
+const maintainStepGroups = computed<HistoryStepGroup[]>(() => {
+  return buildStepGroups(maintainHistory.value, {
+    timeField: 'inspectionTime',
+    nameFieldCandidates: ['maintainItemName', 'inspectionItemName', 'name'],
+    resultFieldCandidates: ['maintainResult', 'inspectionResult']
+  })
+})
+
+type RepairHistoryRow = {
+  id?: any
+  repairId?: any
+  repairCode?: any
+  repairName?: any
+  subjectId?: any
+  subjectCode?: any
+  subjectName?: any
+  subjectContent?: any
+  subjectStandard?: any
+  malfunction?: any
+  malfunctionUrl?: any
+  repairDes?: any
+  remark?: any
+  createTime?: any
+  finishDate?: any
+  result?: any
+  repairResult?: any
+  malfunctionImages?: string[]
+}
+type RepairHistoryGroup = { key: string; name: string; items: RepairHistoryRow[] }
+
+const repairActiveNames = ref<string[]>([])
+const repairList = ref<RepairHistoryRow[]>([])
+
+const repairGroups = computed<RepairHistoryGroup[]>(() => {
+  const groupsMap = new Map<string, RepairHistoryGroup>()
+  for (const row of repairList.value ?? []) {
+    const key = String(row.repairCode ?? row.repairId ?? row.subjectName ?? '-')
+    if (!groupsMap.has(key)) {
+      groupsMap.set(key, {
+        key,
+        name: String(row.repairName ?? row.repairCode ?? key),
+        items: []
+      })
+    }
+    const group = groupsMap.get(key)!
+    group.items.push({
+      ...row,
+      malfunctionImages: parseImages(row?.malfunctionUrl)
+    })
+  }
+  const groups = Array.from(groupsMap.values()).filter((g) => g.items.length)
+  return groups.sort((a, b) => {
+    const at = formatHistoryTime(a.items?.[0]?.finishDate ?? a.items?.[0]?.createTime)
+    const bt = formatHistoryTime(b.items?.[0]?.finishDate ?? b.items?.[0]?.createTime)
+    return String(bt).localeCompare(String(at))
+  })
+})
+
+const inspectionExportLoading = ref(false)
+const inspectionDateRange = ref<string[] | undefined>(undefined)
+const maintainExportLoading = ref(false)
+const maintainDateRange = ref<string[] | undefined>(undefined)
+const repairExportLoading = ref(false)
+const repairDateRange = ref<string[] | undefined>(undefined)
+const criticalExportLoading = ref(false)
+const spareExportLoading = ref(false)
+
+const fetchInspectionHistory = async () => {
+  if (!deviceId.value) return
+  const params: any = { deviceId: deviceId.value }
+  if (inspectionDateRange.value && inspectionDateRange.value.length === 2) {
+    params.startTime = inspectionDateRange.value[0]
+    params.endTime = inspectionDateRange.value[1]
+  }
+  const data = await TicketManagementApi.getInspectionByDeviceId(params)
+  inspectionHistory.value = Array.isArray(data) ? data : []
+}
+
+const handleQueryInspection = async () => {
+  await fetchInspectionHistory()
+}
+
+const handleResetInspection = async () => {
+  inspectionDateRange.value = undefined
+  await fetchInspectionHistory()
+}
+
+const fetchMaintainHistory = async () => {
+  if (!deviceId.value) return
+  const params: any = { deviceId: deviceId.value }
+  if (maintainDateRange.value && maintainDateRange.value.length === 2) {
+    params.startTime = maintainDateRange.value[0]
+    params.endTime = maintainDateRange.value[1]
+  }
+  const data = await TicketManagementApi.getMaintenanceByDeviceId(params)
+  maintainHistory.value = Array.isArray(data) ? data : []
+}
+
+const handleQueryMaintain = async () => {
+  await fetchMaintainHistory()
+}
+
+const handleResetMaintain = async () => {
+  maintainDateRange.value = undefined
+  await fetchMaintainHistory()
+}
+
+const fetchRepairHistory = async () => {
+  if (!deviceId.value) return
+  const params: any = { deviceId: deviceId.value }
+  if (repairDateRange.value && repairDateRange.value.length === 2) {
+    params.startTime = repairDateRange.value[0]
+    params.endTime = repairDateRange.value[1]
+  }
+  const data = await DvRepairApi.getRepairListByDeviceId(params)
+  repairList.value = Array.isArray(data) ? data : []
+}
+
+const handleQueryRepair = async () => {
+  await fetchRepairHistory()
+}
+
+const handleResetRepair = async () => {
+  repairDateRange.value = undefined
+  await fetchRepairHistory()
+}
+
+const handleExportInspection = async () => {
+  if (!deviceId.value) return
+  try {
+    await message.exportConfirm()
+    inspectionExportLoading.value = true
+    const params: any = { deviceId: deviceId.value }
+    if (inspectionDateRange.value && inspectionDateRange.value.length === 2) {
+      params.startTime = inspectionDateRange.value[0]
+      params.endTime = inspectionDateRange.value[1]
+    }
+    const data = await TicketManagementApi.exportInspection(params)
+    download.excel(data, '点检履历.xls')
+  } catch {
+  } finally {
+    inspectionExportLoading.value = false
+  }
+}
+
+const handleExportMaintain = async () => {
+  if (!deviceId.value) return
+  try {
+    await message.exportConfirm()
+    maintainExportLoading.value = true
+    const params: any = { deviceId: deviceId.value }
+    if (maintainDateRange.value && maintainDateRange.value.length === 2) {
+      params.startTime = maintainDateRange.value[0]
+      params.endTime = maintainDateRange.value[1]
+    }
+    const data = await TicketManagementApi.exportMaintenance(params)
+    download.excel(data, '保养履历.xls')
+  } catch {
+  } finally {
+    maintainExportLoading.value = false
+  }
+}
+
+const handleExportRepair = async () => {
+  if (!deviceId.value) return
+  try {
+    await message.exportConfirm()
+    repairExportLoading.value = true
+    const params: any = { deviceId: deviceId.value }
+    if (repairDateRange.value && repairDateRange.value.length === 2) {
+      params.startTime = repairDateRange.value[0]
+      params.endTime = repairDateRange.value[1]
+    }
+    const data = await DvRepairApi.exportRepairExcel(params)
+    download.excel(data, '维修履历.xls')
+  } catch {
+  } finally {
+    repairExportLoading.value = false
+  }
+}
+
+const handleExportCriticalComponent = async () => {
+  if (!deviceId.value) return
+  try {
+    await message.exportConfirm()
+    criticalExportLoading.value = true
+    const data = await CriticalComponentApi.exportDeviceComponent({ id: deviceId.value })
+    download.excel(data, '关键件.xls')
+  } catch {
+  } finally {
+    criticalExportLoading.value = false
+  }
+}
+
+const handleExportSpareBased = async () => {
+  if (!deviceId.value) return
+  try {
+    await message.exportConfirm()
+    spareExportLoading.value = true
+    const data = await DeviceLedgerApi.exportSpareBased({ id: deviceId.value })
+    download.excel(data, '备件.xls')
+  } catch {
+  } finally {
+    spareExportLoading.value = false
+  }
+}
+
+const getTypeTreeForNameMap = async () => {
+  const data = await DeviceTypeApi.getDeviceTypeTree({ pageNo: 1, pageSize: 10 })
+  const treeChildren = JSON.parse(JSON.stringify(data ?? []))
+  buildDeviceTypeNameMap(treeChildren)
+}
+
+const getDetail = async () => {
+  if (!deviceId.value) {
+    message.warning(t('EquipmentManagement.EquipmentLedger.Detail.invalidId'))
+    delView(unref(currentRoute))
+    return
+  }
+  detailLoading.value = true
+  try {
+    detailData.value = await DeviceLedgerApi.getDeviceLedger(deviceId.value)
+    await fetchInspectionHistory()
+    await fetchMaintainHistory()
+    await fetchRepairHistory()
+    const keys = repairGroups.value.map((g) => g.key)
+    repairActiveNames.value = keys.length ? [keys[0]] : []
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+onMounted(async () => {
+  await getTypeTreeForNameMap()
+  await getDetail()
+})
+</script>
+
+<style lang="scss" scoped>
+.device-ledger-detail-body {
+  max-height: 85vh;
+}
+
+.device-ledger-detail-desc {
+  margin-bottom: 16px;
+}
+
+.device-ledger-detail-tabs {
+  padding-right: 4px;
+}
+
+:deep(.el-tabs__content) {
+  max-height: 65vh;
+  overflow-y: auto;
+}
+
+.device-ledger-detail-qrcode {
+  margin-top: 10px;
+}
+
+.device-ledger-history-steps {
+  padding: 8px 8px 0;
+}
+
+.device-ledger-history-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+}
+
+.device-ledger-history-time {
+  font-weight: 600;
+}
+
+.device-ledger-history-operator {
+  color: var(--el-text-color-secondary);
+}
+
+.device-ledger-tab-toolbar {
+  margin-bottom: 8px;
+  text-align: right;
+}
+
+.device-ledger-history-items {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.device-ledger-history-item {
+  display: flex;
+  padding: 10px;
+  background: var(--el-fill-color-blank);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.device-ledger-history-item-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.device-ledger-history-item-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+}
+
+.device-ledger-history-item-row {
+  display: flex;
+  gap: 10px;
+}
+
+.device-ledger-history-item-label {
+  width: 70px;
+  flex: 0 0 70px;
+  color: var(--el-text-color-secondary);
+}
+
+.device-ledger-history-item-value {
+  flex: 1;
+  color: var(--el-text-color-regular);
+  word-break: break-word;
+}
+
+.device-ledger-history-item-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.device-ledger-history-item-image {
+  width: 76px;
+  height: 76px;
+  overflow: hidden;
+  border-radius: 6px;
+}
+
+.device-ledger-history-image-error {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  background: var(--el-fill-color);
+  align-items: center;
+  justify-content: center;
+}
+
+.device-ledger-repair-collapse {
+  padding: 8px 8px 0;
+}
+
+.device-ledger-repair-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.device-ledger-repair-name {
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.device-ledger-repair-meta {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.device-ledger-history-item-text {
+  color: var(--el-text-color-regular);
+}
+</style>
diff --git a/src/views/mes/deviceledger/index.vue b/src/views/mes/deviceledger/index.vue
index a49541c8..76c94b6c 100644
--- a/src/views/mes/deviceledger/index.vue
+++ b/src/views/mes/deviceledger/index.vue
@@ -245,459 +245,6 @@
         </div>
 
       </ContentWrap>
-
-      <ContentWrap v-if="detailVisible" v-loading="detailLoading">
-        <div class="device-ledger-detail-header">
-          <div class="device-ledger-detail-title">{{
-              t('EquipmentManagement.EquipmentLedger.detail')
-            }}
-          </div>
-          <el-button link @click="closeDetail">
-            <Icon icon="ep:close"/>
-          </el-button>
-        </div>
-        <el-descriptions :column="3" class="device-ledger-detail-desc">
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceNo')">
-            {{ detailData?.deviceCode ?? '' }}
-          </el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceName')">
-            {{ detailData?.deviceName ?? '' }}
-          </el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceStatus')">
-             <dict-tag type="mes_tz_status" :value="detailData?.deviceStatus"/>
-          </el-descriptions-item>
-          <!-- <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceBrand')">{{ detailData?.deviceBrand ?? '' }}</el-descriptions-item> -->
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceModel')">
-            {{ detailData?.deviceModel ?? '' }}
-          </el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceSpec')">
-            {{ detailData?.deviceSpec ?? '' }}
-          </el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceType')">
-            <el-tag effect="light">{{
-                getDeviceTypeName(detailData?.deviceTypeName ?? detailData?.deviceType)
-              }}
-            </el-tag>
-          </el-descriptions-item>
-          <!-- <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.supplier')">{{ detailData?.supplier ?? '' }}</el-descriptions-item> -->
-          <!-- <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.workshop')">{{ detailData?.workshop ?? '' }}</el-descriptions-item> -->
-          <!-- <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.systemOrg')">{{ detailData?.systemOrg ?? '' }}</el-descriptions-item> -->
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceLocation')">
-            {{ detailData?.deviceLocation ?? '' }}
-          </el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceManagerName')">
-            {{ detailData?.deviceManagerName ?? '' }}
-          </el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.productionDate')">
-            {{ formatDetailDate(detailData?.productionDate) }}
-          </el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')">
-            {{
-              formatDetailDate(detailData?.factoryEntryDate)
-            }}
-          </el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.remark')">{{
-              detailData?.remark ?? detailData?.deviceRemark ?? ''
-            }}
-          </el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.creatorName')">
-            {{ detailData?.creatorName ?? '' }}
-          </el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.createTime')">
-            {{ formatDetailDate(detailData?.createTime) }}
-          </el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.updateTime')">
-            {{ formatDetailDate(detailData?.updateTime) }}
-          </el-descriptions-item>
-
-
-          <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.creatorName')" align="center" prop="creatorName" width="150px"  sortable />
-                   <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px"  sortable /> -->
-          <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.updateTime')" align="center" prop="updateTime" :formatter="dateFormatter" width="180px"  sortable /> -->
-
-
-        </el-descriptions>
-            <div v-if="detailData?.qrcodeUrl" class="device-ledger-detail-qrcode">
-              <QrcodeActionCard
-                :image-url="detailData.qrcodeUrl"
-                :print-id="detailData.id || detailData.deviceCode"
-                :print-title="`${detailData.deviceName || '设备'}码打印预览`"
-                :print-paper-width="80"
-                :print-paper-height="80"
-                :print-max-width="220"
-                :empty-text="t('EquipmentManagement.EquipmentLedger.qrcodeLoadError')"
-                :error-text="t('EquipmentManagement.EquipmentLedger.qrcodeLoadError')"
-                :show-refresh="false"
-              />
-            </div>
-        <el-tabs v-model="detailActiveTab" class="mt-12px">
-          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.checkHistory')" name="check">
-            <div style="margin-bottom: 16px;">
-              <el-date-picker
-                v-model="inspectionDateRange" type="daterange" value-format="YYYY-MM-DD HH:mm:ss"
-                :start-placeholder="t('common.startTimeText')"
-                :end-placeholder="t('common.endTimeText')" range-separator="-" :unlink-panels="true"
-                class="mr-10px"/>
-              <el-button type="primary" plain @click="handleQueryInspection">{{
-                  t('common.query')
-                }}
-              </el-button>
-              <el-button @click="handleResetInspection">{{ t('common.reset') }}</el-button>
-              <el-button
-                type="success" plain :loading="inspectionExportLoading"
-                @click="handleExportInspection"
-                v-hasPermi="['mes:device-ledger:export']">
-                <Icon icon="ep:download" class="mr-5px"/>
-                {{ t('action.export') }}
-              </el-button>
-            </div>
-            <el-empty v-if="!inspectionStepGroups.length"/>
-            <el-steps
-              v-else direction="vertical" :active="inspectionStepGroups.length"
-              class="device-ledger-history-steps">
-              <el-step v-for="group in inspectionStepGroups" :key="group.key"
-                       style="margin-top:8px">
-                <template #title>
-                  <div class="device-ledger-history-title">
-                    <span class="device-ledger-history-time">[{{ group.time }}]</span>
-                    <span class="device-ledger-history-operator">{{
-                        t('EquipmentManagement.EquipmentLedger.operator')
-                      }}: {{ group.operator }}</span>
-                  </div>
-                </template>
-                <template #description>
-                  <div class="device-ledger-history-items">
-                    <div v-for="item in group.items" :key="item.key"
-                         class="device-ledger-history-item">
-                      <div class="device-ledger-history-item-head">
-                        <el-tag :type="getResultTagType(item.result)">{{
-                            getResultLabel(item.result)
-                          }}
-                        </el-tag>
-                        <span class="device-ledger-history-item-text">{{ item.name }}</span>
-                      </div>
-                      <div class="device-ledger-history-item-body">
-                        <div class="device-ledger-history-item-row">
-                          <span class="device-ledger-history-item-label">{{
-                              t('EquipmentManagement.EquipmentLedger.checkMethod')
-                            }}</span>
-                          <span class="device-ledger-history-item-value">
-                            <dict-tag type="Inspection_method" :value="item.method"/>
-                          </span>
-                        </div>
-                        <div class="device-ledger-history-item-row">
-                          <span class="device-ledger-history-item-label">{{
-                              t('EquipmentManagement.EquipmentLedger.criteria')
-                            }}</span>
-                          <span class="device-ledger-history-item-value">{{
-                              item.criteria ?? '-'
-                            }}</span>
-                        </div>
-                        <div class="device-ledger-history-item-row">
-                          <span class="device-ledger-history-item-label">{{
-                              t('EquipmentManagement.EquipmentLedger.checkTime')
-                            }}</span>
-                          <span class="device-ledger-history-item-value">{{
-                              formatHistoryTime(item.taskTime)
-                            }}</span>
-                        </div>
-                        <div class="device-ledger-history-item-row">
-                          <span class="device-ledger-history-item-label">{{
-                              t('EquipmentManagement.EquipmentLedger.createTime')
-                            }}</span>
-                          <span class="device-ledger-history-item-value">{{
-                              formatHistoryTime(item.createTime)
-                            }}</span>
-                        </div>
-                        <div class="device-ledger-history-item-row">
-                          <span class="device-ledger-history-item-label">{{
-                              t('EquipmentManagement.EquipmentLedger.remark')
-                            }}</span>
-                          <span class="device-ledger-history-item-value">{{
-                              item.remark ?? '-'
-                            }}</span>
-                        </div>
-                        <div v-if="item.images?.length" class="device-ledger-history-item-images">
-                          <el-image
-                            v-for="img in item.images" :key="img" :src="img"
-                            :preview-src-list="item.images"
-                            preview-teleported fit="cover" class="device-ledger-history-item-image">
-                            <template #error>
-                              <div class="device-ledger-history-image-error">图片加载失败</div>
-                            </template>
-                          </el-image>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </template>
-              </el-step>
-            </el-steps>
-          </el-tab-pane>
-          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.maintainHistory')"
-                       name="maintain">
-            <div style="margin-bottom: 16px;">
-              <el-date-picker
-                v-model="maintainDateRange" type="daterange" value-format="YYYY-MM-DD HH:mm:ss"
-                :start-placeholder="t('common.startTimeText')"
-                :end-placeholder="t('common.endTimeText')" range-separator="-" :unlink-panels="true"
-                class="mr-10px"/>
-              <el-button type="primary" plain @click="handleQueryMaintain">{{
-                  t('common.query')
-                }}
-              </el-button>
-              <el-button @click="handleResetMaintain">{{ t('common.reset') }}</el-button>
-              <el-button
-                type="success" plain :loading="maintainExportLoading" @click="handleExportMaintain"
-                v-hasPermi="['mes:device-ledger:export']">
-                <Icon icon="ep:download" class="mr-5px"/>
-                {{ t('action.export') }}
-              </el-button>
-            </div>
-            <el-empty v-if="!maintainStepGroups.length"/>
-            <el-steps
-              v-else direction="vertical" class="device-ledger-history-steps"
-              :active="maintainStepGroups.length">
-              <el-step v-for="group in maintainStepGroups" :key="group.key" style="margin-top:8px">
-                <template #title>
-                  <div class="device-ledger-history-title">
-                    <span class="device-ledger-history-time">[{{ group.time }}]</span>
-                    <span class="device-ledger-history-operator">{{
-                        t('EquipmentManagement.EquipmentLedger.operator')
-                      }}: {{ group.operator }}</span>
-                  </div>
-                </template>
-                <template #description>
-                  <div class="device-ledger-history-items">
-                    <div v-for="item in group.items" :key="item.key"
-                         class="device-ledger-history-item">
-                      <div class="device-ledger-history-item-head">
-                        <el-tag :type="getResultTagType(item.result)">{{
-                            getResultLabel(item.result)
-                          }}
-                        </el-tag>
-                        <span class="device-ledger-history-item-text">{{ item.name }}</span>
-                      </div>
-                      <div class="device-ledger-history-item-body">
-                        <div class="device-ledger-history-item-row">
-                          <span class="device-ledger-history-item-label">{{
-                              t('EquipmentManagement.EquipmentLedger.maintainMethod')
-                            }}</span>
-                          <span class="device-ledger-history-item-value">
-                            <dict-tag type="Inspection_method" :value="item.method"/>
-                          </span>
-                        </div>
-                        <div class="device-ledger-history-item-row">
-                          <span class="device-ledger-history-item-label">{{
-                              t('EquipmentManagement.EquipmentLedger.criteria')
-                            }}</span>
-                          <span class="device-ledger-history-item-value">{{
-                              item.criteria ?? '-'
-                            }}</span>
-                        </div>
-                        <div class="device-ledger-history-item-row">
-                          <span class="device-ledger-history-item-label">{{
-                              t('EquipmentManagement.EquipmentLedger.maintainTime')
-                            }}</span>
-                          <span class="device-ledger-history-item-value">
-                            {{ String(formatHistoryTime(item.taskTime)) }}
-                          </span>
-                        </div>
-                        <div class="device-ledger-history-item-row">
-                          <span class="device-ledger-history-item-label">{{
-                              t('EquipmentManagement.EquipmentLedger.createTime')
-                            }}</span>
-                          <span class="device-ledger-history-item-value">{{
-                              formatHistoryTime(item.createTime)
-                            }}</span>
-                        </div>
-                        <div class="device-ledger-history-item-row">
-                          <span class="device-ledger-history-item-label">{{
-                              t('EquipmentManagement.EquipmentLedger.remark')
-                            }}</span>
-                          <span class="device-ledger-history-item-value">{{
-                              item.remark ?? '-'
-                            }}</span>
-                        </div>
-                        <div v-if="item.images?.length" class="device-ledger-history-item-images">
-                          <el-image
-                            v-for="img in item.images" :key="img" :src="img"
-                            :preview-src-list="item.images"
-                            preview-teleported fit="cover" class="device-ledger-history-item-image">
-                            <template #error>
-                              <div class="device-ledger-history-image-error">图片加载失败</div>
-                            </template>
-                          </el-image>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </template>
-              </el-step>
-            </el-steps>
-          </el-tab-pane>
-          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.repairHistory')"
-                       name="repair">
-            <div style="margin-bottom: 16px;">
-              <el-date-picker
-                v-model="repairDateRange" type="daterange" value-format="YYYY-MM-DD HH:mm:ss"
-                :start-placeholder="t('common.startTimeText')"
-                :end-placeholder="t('common.endTimeText')" range-separator="-" :unlink-panels="true"
-                class="mr-10px"/>
-              <el-button type="primary" plain @click="handleQueryRepair">{{
-                  t('common.query')
-                }}
-              </el-button>
-              <el-button @click="handleResetRepair">{{ t('common.reset') }}</el-button>
-              <el-button
-                type="success" plain :loading="repairExportLoading" @click="handleExportRepair"
-                v-hasPermi="['mes:device-ledger:export']">
-                <Icon icon="ep:download" class="mr-5px"/>
-                {{ t('action.export') }}
-              </el-button>
-            </div>
-            <el-empty v-if="!repairGroups.length"/>
-            <el-collapse v-else v-model="repairActiveNames" class="device-ledger-repair-collapse">
-              <el-collapse-item v-for="group in repairGroups" :key="group.key" :name="group.key">
-                <template #title>
-                  <div class="device-ledger-repair-title">
-                    <span class="device-ledger-repair-name">{{ group.name }}</span>
-                    <span class="device-ledger-repair-meta">共{{ group.items.length }}条</span>
-                  </div>
-                </template>
-                <div class="device-ledger-history-items">
-                  <div
-                    v-for="row in group.items"
-                    :key="String(row.id ?? row.subjectId ?? row.subjectCode)"
-                    class="device-ledger-history-item">
-                    <div class="device-ledger-history-item-head">
-                      <el-tag type="info" effect="light">{{ row.subjectCode ?? '-' }}</el-tag>
-                      <span class="device-ledger-history-item-text">{{
-                          row.subjectName ?? '-'
-                        }}</span>
-                    </div>
-                    <div class="device-ledger-history-item-body">
-                      <div class="device-ledger-history-item-row">
-                        <span class="device-ledger-history-item-label">{{
-                            t('EquipmentManagement.EquipmentLedger.projectName')
-                          }}</span>
-                        <span class="device-ledger-history-item-value">{{
-                            row.subjectContent ?? '-'
-                          }}</span>
-                      </div>
-                      <div class="device-ledger-history-item-row">
-                        <span class="device-ledger-history-item-label">{{
-                            t('EquipmentManagement.EquipmentLedger.repairResult')
-                          }}</span>
-                        <span class="device-ledger-history-item-value">
-                          <el-tag :type="getResultTagType(row.result ?? row.repairResult)">
-                            {{ getResultLabel(row.repairResult ?? row.result) }}
-                          </el-tag>
-                        </span>
-                      </div>
-                      <div class="device-ledger-history-item-row">
-                        <span class="device-ledger-history-item-label">{{
-                            t('EquipmentManagement.EquipmentLedger.remark')
-                          }}</span>
-                        <span class="device-ledger-history-item-value">{{
-                            row.remark ?? '-'
-                          }}</span>
-                      </div>
-                      <div class="device-ledger-history-item-row">
-                        <span class="device-ledger-history-item-label">{{
-                            t('EquipmentManagement.EquipmentLedger.finishDate')
-                          }}</span>
-                        <span class="device-ledger-history-item-value">{{
-                            String(formatHistoryTime(row.finishDate)).split(' ')[0]
-                          }}</span>
-                      </div>
-                      <div v-if="row.malfunctionImages?.length"
-                           class="device-ledger-history-item-images">
-                        <el-image
-                          v-for="img in row.malfunctionImages" :key="img" :src="img"
-                          :preview-src-list="row.malfunctionImages" preview-teleported fit="cover"
-                          class="device-ledger-history-item-image">
-                          <template #error>
-                            <div class="device-ledger-history-image-error">图片加载失败</div>
-                          </template>
-                        </el-image>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </el-collapse-item>
-            </el-collapse>
-          </el-tab-pane>
-          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.criticalComponent')"
-                       name="criticalComponent">
-            <div class="device-ledger-tab-toolbar">
-              <el-button
-                type="success" plain :loading="criticalExportLoading"
-                @click="handleExportCriticalComponent"
-                v-hasPermi="['mes:device-ledger:export']">
-                <Icon icon="ep:download" class="mr-5px"/>
-                {{ t('action.export') }}
-              </el-button>
-            </div>
-            <el-table
-              v-loading="loading" :data="detailData?.componentList" :stripe="true"
-              :show-overflow-tooltip="true">
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.componentCode')"
-                               align="center" prop="code" min-width="140" sortable/>
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.componentName')"
-                               align="center" prop="name" min-width="140" sortable/>
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.componentDesc')"
-                               align="center" prop="description" min-width="180"/>
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.remark')"
-                               align="center" prop="remark" min-width="180"/>
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')"
-                               align="center" prop="createTime" :formatter="dateFormatter"
-                               width="180" sortable/>
-            </el-table>
-          </el-tab-pane>
-          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.sparePart')" name="component">
-            <div class="device-ledger-tab-toolbar">
-              <el-button
-                type="success" plain :loading="spareExportLoading" @click="handleExportSpareBased"
-                v-hasPermi="['mes:device-ledger:export']">
-                <Icon icon="ep:download" class="mr-5px"/>
-                {{ t('action.export') }}
-              </el-button>
-            </div>
-            <el-table v-loading="loading" :data="detailData?.beijianList" :stripe="true"
-                      :show-overflow-tooltip="true">
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.spareCode')"
-                               align="center" prop="barCode" sortable/>
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.spareName')"
-                               align="left" prop="name" width="220px" sortable/>
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.category')"
-                               align="center" prop="categoryName" sortable/>
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.unit')" align="center"
-                               prop="unitName" sortable/>
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')"
-                               align="center" prop="createTime" :formatter="dateFormatter"
-                               width="180px" sortable/>
-            </el-table>
-          </el-tab-pane>
-          <el-tab-pane label="模具" name="mold">
-            <el-table v-loading="loading" :data="detailData?.moldList" :stripe="true"
-                      :show-overflow-tooltip="true">
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.moldCode')"
-                               align="center" prop="code" min-width="140" sortable/>
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.moldName')"
-                               align="center" prop="name" min-width="140" sortable/>
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.moldRemark')"
-                               align="center" prop="remark" min-width="180"/>
-              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')"
-                               align="center" prop="createTime" :formatter="dateFormatter"
-                               width="180" sortable/>
-            </el-table>
-            <Pagination
-              :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
-              @pagination="getList"/>
-          </el-tab-pane>
-        </el-tabs>
-      </ContentWrap>
     </div>
   </div>
 
@@ -706,18 +253,13 @@
 </template>
 
 <script setup lang="ts">
-import {dateFormatter, dateFormatter2, formatDate} from '@/utils/formatTime'
+import {dateFormatter, dateFormatter2} from '@/utils/formatTime'
 import download from '@/utils/download'
 import {DeviceLedgerApi, DeviceLedgerVO} from '@/api/mes/deviceledger'
 import {DeviceTypeApi, DeviceTypeTreeVO} from '@/api/mes/devicetype'
-import {CriticalComponentApi} from '@/api/mes/criticalComponent'
-import {TicketManagementApi} from '@/api/mes/ticketManagement'
-import {DvRepairApi} from '@/api/mes/dvrepair'
 import DeviceLedgerForm from './DeviceLedgerForm.vue'
 import { getIntDictOptions } from '@/utils/dict'
-import { isHexColor } from '@/utils/color'
 import { useDictStoreWithOut } from '@/store/modules/dict'
-import QrcodeActionCard from '@/components/QrcodeActionCard/index.vue'
 import {ref} from "vue";
 import {
   Refresh,
@@ -819,15 +361,7 @@ const queryParams = reactive({
   deviceType: undefined,
 })
 const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
-const criticalExportLoading = ref(false)
-const spareExportLoading = ref(false)
-const inspectionExportLoading = ref(false)
-const inspectionDateRange = ref<string[] | undefined>(undefined)
-const maintainExportLoading = ref(false)
-const maintainDateRange = ref<string[] | undefined>(undefined)
-const repairExportLoading = ref(false)
-const repairDateRange = ref<string[] | undefined>(undefined)
+const exportLoading = ref(false)
 
 const tableRef = ref()
 const selectedIds = ref<number[]>([])
@@ -846,272 +380,13 @@ const toggleView = () => {
 const dictStore = useDictStoreWithOut()
 const dictReady = ref(false)
 
-const inspectionHistory = ref<any[]>([])
-const maintainHistory = ref<any[]>([])
-
-const formatHistoryTime = (value: any) => {
-  const raw = value ?? '-'
-  if (Array.isArray(raw) && raw.length >= 3) {
-    const [y, m, d, hh, mm, ss] = raw
-    const pad = (n: any) => String(n).padStart(2, '0')
-    if (hh !== undefined) return `${y}-${pad(m)}-${pad(d)} ${pad(hh)}:${pad(mm)}:${pad(ss)}`
-    return `${y}-${pad(m)}-${pad(d)}`
-  }
-  const tryDateFromNumber = (v: any) => {
-    const num = Number(v)
-    if (!Number.isFinite(num)) return undefined
-    const s = String(v).trim()
-    const ms = s.length === 10 ? num * 1000 : num
-    const d = new Date(ms)
-    if (Number.isNaN(d.getTime())) return undefined
-    return d
-  }
-  const tryDateFromString = (v: any) => {
-    const s = String(v).trim()
-    if (!s) return undefined
-    const d = new Date(s)
-    if (Number.isNaN(d.getTime())) return undefined
-    return d
-  }
-  const d = typeof raw === 'number' ? tryDateFromNumber(raw) : tryDateFromNumber(raw) ?? tryDateFromString(raw)
-  if (d) return formatDate(d, 'YYYY-MM-DD HH:mm:ss')
-  return String(raw)
-}
-
-const getResultLabel = (value: any) => {
-  const v = value === '' || value === null || value === undefined ? undefined : String(value)
-  if (!v) return '-'
-  const upper = v.toUpperCase()
-  if (v === '0') return '待检测'
-  if (v === '1' || upper === 'OK') return '通过'
-  if (v === '2' || upper === 'NG') return '不通过'
-  return v
-}
-
-const getResultTagType = (value: any) => {
-  const v = value === '' || value === null || value === undefined ? undefined : String(value)
-  if (!v) return 'info'
-  const upper = v.toUpperCase()
-  if (v === '1' || upper === 'OK') return 'success'
-  if (v === '2' || upper === 'NG') return 'danger'
-  if (v === '0') return 'info'
-  return 'info'
-}
-
-type HistoryStepItem = {
-  key: string
-  name: string
-  result: any
-  method?: any
-  criteria?: any
-  images?: string[]
-  remark?: any
-  taskTime?: any
-  createTime?: any
-}
-type HistoryStepGroup = { key: string; time: string; operator: string; items: HistoryStepItem[] }
-
-const buildStepGroups = (rows: any[], options: { timeField: string; nameFieldCandidates: string[]; resultFieldCandidates: string[] }) => {
-  const groups = new Map<string, HistoryStepGroup>()
-
-  for (const row of rows ?? []) {
-    const time = formatHistoryTime(row?.taskTime ?? row?.[options.timeField] ?? row?.createTime)
-    const operator = String(row?.operator ?? row?.creatorName ?? row?.creator ?? '-')
-    const groupKey = `${row?.managementId ?? ''}__${time}__${operator}`
-
-    const name =
-      options.nameFieldCandidates.map((k) => row?.[k]).find((v) => v !== undefined && v !== null && String(v).trim() !== '') ??
-      '-'
-    const result = options.resultFieldCandidates.map((k) => row?.[k]).find((v) => v !== undefined && v !== null) ?? undefined
-
-    const item: HistoryStepItem = {
-      key: String(row?.id ?? `${groupKey}__${String(name)}`),
-      name: String(name),
-      result,
-      method: row?.inspectionMethod,
-      criteria: row?.judgmentCriteria,
-      images: parseImages(row?.images),
-      remark: row?.remark,
-      taskTime: row?.taskTime,
-      createTime: row?.createTime
-    }
-
-    if (!groups.has(groupKey)) {
-      groups.set(groupKey, {key: groupKey, time, operator, items: [item]})
-    } else {
-      groups.get(groupKey)!.items.push(item)
-    }
-  }
-
-  return Array.from(groups.values()).sort((a, b) => String(b.time).localeCompare(String(a.time)))
-}
-
-const inspectionStepGroups = computed<HistoryStepGroup[]>(() => {
-  return buildStepGroups(inspectionHistory.value, {
-    timeField: 'inspectionTime',
-    nameFieldCandidates: ['inspectionItemName', 'name'],
-    resultFieldCandidates: ['inspectionResult']
-  })
-})
-
-const maintainStepGroups = computed<HistoryStepGroup[]>(() => {
-  return buildStepGroups(maintainHistory.value, {
-    timeField: 'inspectionTime',
-    nameFieldCandidates: ['maintainItemName', 'inspectionItemName', 'name'],
-    resultFieldCandidates: ['maintainResult', 'inspectionResult']
-  })
-})
-
-type RepairHistoryRow = {
-  id?: any
-  repairId?: any
-  repairCode?: any
-  repairName?: any
-  subjectId?: any
-  subjectCode?: any
-  subjectName?: any
-  subjectContent?: any
-  subjectStandard?: any
-  malfunction?: any
-  malfunctionUrl?: any
-  repairDes?: any
-  remark?: any
-  createTime?: any
-  finishDate?: any
-  result?: any
-  repairResult?: any
-  malfunctionImages?: string[]
-}
-
-type RepairHistoryGroup = { key: string; name: string; items: RepairHistoryRow[] }
-
-const repairActiveNames = ref<string[]>([])
-const repairList = ref<RepairHistoryRow[]>([])
-
-const repairGroups = computed<RepairHistoryGroup[]>(() => {
-  const groupsMap = new Map<string, RepairHistoryGroup>()
-  for (const row of repairList.value ?? []) {
-    const key = String(row.repairCode ?? row.repairId ?? row.subjectName ?? '-')
-    if (!groupsMap.has(key)) {
-      groupsMap.set(key, {
-        key,
-        name: String(row.repairName ?? row.repairCode ?? key),
-        items: []
-      })
-    }
-    const group = groupsMap.get(key)!
-    group.items.push({
-      ...row,
-      malfunctionImages: parseImages(row?.malfunctionUrl)
-    })
-  }
-
-  const groups = Array.from(groupsMap.values()).filter((g) => g.items.length)
-
-  return groups.sort((a, b) => {
-    const at = formatHistoryTime(a.items?.[0]?.finishDate ?? a.items?.[0]?.createTime)
-    const bt = formatHistoryTime(b.items?.[0]?.finishDate ?? b.items?.[0]?.createTime)
-    return String(bt).localeCompare(String(at))
-  })
-})
-
-const fetchInspectionHistory = async () => {
-  if (!selectedDetailId.value) return
-  const params: any = {deviceId: selectedDetailId.value}
-  if (inspectionDateRange.value && inspectionDateRange.value.length === 2) {
-    params.startTime = inspectionDateRange.value[0]
-    params.endTime = inspectionDateRange.value[1]
-  }
-  const data = await TicketManagementApi.getInspectionByDeviceId(params)
-  inspectionHistory.value = Array.isArray(data) ? data : []
-}
-
-const handleQueryInspection = async () => {
-  if (!selectedDetailId.value) {
-    message.error('请先选择设备')
-    return
-  }
-  await fetchInspectionHistory()
-}
-
-const handleResetInspection = async () => {
-  if (!selectedDetailId.value) {
-    message.error('请先选择设备')
-    return
-  }
-  inspectionDateRange.value = undefined
-  await fetchInspectionHistory()
-}
-
-const fetchMaintainHistory = async () => {
-  if (!selectedDetailId.value) return
-  const params: any = {deviceId: selectedDetailId.value}
-  if (maintainDateRange.value && maintainDateRange.value.length === 2) {
-    params.startTime = maintainDateRange.value[0]
-    params.endTime = maintainDateRange.value[1]
-  }
-  const data = await TicketManagementApi.getMaintenanceByDeviceId(params)
-  maintainHistory.value = Array.isArray(data) ? data : []
-}
-
-const handleQueryMaintain = async () => {
-  if (!selectedDetailId.value) {
-    message.error('请先选择设备')
-    return
-  }
-  await fetchMaintainHistory()
-}
-
-const handleResetMaintain = async () => {
-  if (!selectedDetailId.value) {
-    message.error('请先选择设备')
-    return
-  }
-  maintainDateRange.value = undefined
-  await fetchMaintainHistory()
-}
-
-const fetchRepairHistory = async () => {
-  if (!selectedDetailId.value) return
-  const params: any = {deviceId: selectedDetailId.value}
-  if (repairDateRange.value && repairDateRange.value.length === 2) {
-    params.startTime = repairDateRange.value[0]
-    params.endTime = repairDateRange.value[1]
-  }
-  const data = await DvRepairApi.getRepairListByDeviceId(params)
-  repairList.value = Array.isArray(data) ? data : []
-}
-
-const handleQueryRepair = async () => {
-  if (!selectedDetailId.value) {
-    message.error('请先选择设备')
-    return
-  }
-  await fetchRepairHistory()
-}
-
-const handleResetRepair = async () => {
-  if (!selectedDetailId.value) {
-    message.error('请先选择设备')
-    return
-  }
-  repairDateRange.value = undefined
-  await fetchRepairHistory()
-}
-
 const tzStatusOptions = computed(() => {
   if (!dictReady.value) return []
   const options = getIntDictOptions('mes_tz_status')
   return options.filter((o) => o.value !== null && o.value !== undefined && !Number.isNaN(o.value))
 })
 
-const detailVisible = ref(false)
-const detailLoading = ref(false)
-const detailData = ref<DeviceLedgerVO | undefined>()
-const detailStatusLoading = ref(false)
 const deviceStatusUpdatingMap = ref<Record<number, boolean>>({})
-const detailActiveTab = ref('check')
-const selectedDetailId = ref<number | undefined>()
 
 const typeTreeLoading = ref(false)
 const typeTreeData = ref<DeviceTypeTreeVO[]>([])
@@ -1163,33 +438,6 @@ const getDeviceTypeName = (value: any) => {
   return value ?? ''
 }
 
-const getTzStatusLabel = (value: any) => {
-  const v = value === '' || value === null || value === undefined ? undefined : Number(value)
-  const found = tzStatusOptions.value.find((d) => d.value === v)
-  return found?.label ?? ''
-}
-
-const getTzStatusTagType = (value: any) => {
-  const v = value === '' || value === null || value === undefined ? undefined : Number(value)
-  const found = tzStatusOptions.value.find((d) => d.value === v)
-  const type = found?.colorType
-  if (type + '' === 'primary' || type + '' === 'default') return '' as any
-  return (type ?? '') as any
-}
-
-const getTzStatusTagColor = (value: any) => {
-  const v = value === '' || value === null || value === undefined ? undefined : Number(value)
-  const found = tzStatusOptions.value.find((d) => d.value === v)
-  if (found?.cssClass && isHexColor(found.cssClass)) return found.cssClass
-  return ''
-}
-
-const getTzStatusTagStyle = (value: any) => {
-  const color = getTzStatusTagColor(value)
-  if (!color) return ''
-  return 'color: #fff'
-}
-
 const formatScheduleLabel = (value: any) => {
   return Number(value) === 1
     ? t('EquipmentManagement.EquipmentLedger.yes')
@@ -1211,87 +459,17 @@ const handleDeviceStatusChange = async (row: DeviceLedgerVO, value: boolean) =>
       id: row.id,
       deviceStatus: nextValue
     } as DeviceLedgerVO)
-    if (detailData.value?.id === row.id) {
-      detailData.value.deviceStatus = nextValue
-    }
     message.success(t('common.updateSuccess'))
   } catch {
     ;(row as any).deviceStatus = oldValue
-    if (detailData.value?.id === row.id) {
-      detailData.value.deviceStatus = oldValue
-    }
     message.error(t('common.updateFail'))
   } finally {
     deviceStatusUpdatingMap.value[row.id] = false
   }
 }
 
-const formatDetailDate = (value: any) => {
-  if (!value) return ''
-  return formatDate(new Date(value), 'YYYY-MM-DD')
-}
-
-const parseImages = (value: any): string[] => {
-  if (!value) return []
-  if (Array.isArray(value)) return value.map(String).filter(Boolean)
-  const cleaned = String(value).replace(/[`'\"]/g, '').trim()
-  return cleaned
-    .split(',')
-    .map((v) => v.trim())
-    .filter(Boolean)
-}
-
-const parseFirstImage = (value: any): string => {
-  return parseImages(value)[0] || ''
-}
-
-const handleDetail = async (id: number) => {
-  if (detailVisible.value && selectedDetailId.value === id) {
-    closeDetail()
-    return
-  }
-  selectedDetailId.value = id
-  detailVisible.value = true
-  detailActiveTab.value = 'check'
-  detailLoading.value = true
-  try {
-    detailData.value = await DeviceLedgerApi.getDeviceLedger(id)
-    await fetchInspectionHistory()
-    await fetchMaintainHistory()
-    await fetchRepairHistory()
-    const keys = repairGroups.value.map((g) => g.key)
-    repairActiveNames.value = keys.length ? [keys[0]] : []
-  } finally {
-    detailLoading.value = false
-  }
-}
-
-const handleDetailStatusChange = async (value: number) => {
-  if (!detailData.value?.id) return
-  const oldValue = value === 0 ? 1 : 0
-  detailStatusLoading.value = true
-  try {
-    await DeviceLedgerApi.updateDeviceLedger({
-      id: detailData.value.id,
-      deviceStatus: value
-    } as DeviceLedgerVO)
-    const current = list.value.find((item) => item.id === detailData.value?.id)
-    if (current) {
-      current.deviceStatus = value
-    }
-    message.success(t('common.updateSuccess'))
-  } catch {
-    detailData.value.deviceStatus = oldValue
-    message.error(t('common.updateFail'))
-  } finally {
-    detailStatusLoading.value = false
-  }
-}
-
-const closeDetail = () => {
-  detailVisible.value = false
-  selectedDetailId.value = undefined
-  detailData.value = undefined
+const handleDetail = (id: number) => {
+  router.push({ name: 'MesDeviceLedgerDetail', params: { id } })
 }
 
 /** 查询列表 */
@@ -1379,101 +557,6 @@ const handleExport = async () => {
   }
 }
 
-const handleExportCriticalComponent = async () => {
-  if (!selectedDetailId.value) {
-    message.error('请先选择设备')
-    return
-  }
-  try {
-    await message.exportConfirm()
-    criticalExportLoading.value = true
-    const data = await CriticalComponentApi.exportDeviceComponent({id: selectedDetailId.value})
-    download.excel(data, '关键件.xls')
-  } catch {
-  } finally {
-    criticalExportLoading.value = false
-  }
-}
-
-const handleExportSpareBased = async () => {
-  if (!selectedDetailId.value) {
-    message.error('请先选择设备')
-    return
-  }
-  try {
-    await message.exportConfirm()
-    spareExportLoading.value = true
-    const data = await DeviceLedgerApi.exportSpareBased({id: selectedDetailId.value})
-    download.excel(data, '备件.xls')
-  } catch {
-  } finally {
-    spareExportLoading.value = false
-  }
-}
-
-const handleExportInspection = async () => {
-  if (!selectedDetailId.value) {
-    message.error('请先选择设备')
-    return
-  }
-  try {
-    await message.exportConfirm()
-    inspectionExportLoading.value = true
-    const params: any = {deviceId: selectedDetailId.value}
-    if (inspectionDateRange.value && inspectionDateRange.value.length === 2) {
-      params.startTime = inspectionDateRange.value[0]
-      params.endTime = inspectionDateRange.value[1]
-    }
-    const data = await TicketManagementApi.exportInspection(params)
-    download.excel(data, '点检履历.xls')
-  } catch {
-  } finally {
-    inspectionExportLoading.value = false
-  }
-}
-
-const handleExportMaintain = async () => {
-  if (!selectedDetailId.value) {
-    message.error('请先选择设备')
-    return
-  }
-  try {
-    await message.exportConfirm()
-    maintainExportLoading.value = true
-    const params: any = {deviceId: selectedDetailId.value}
-    if (maintainDateRange.value && maintainDateRange.value.length === 2) {
-      params.startTime = maintainDateRange.value[0]
-      params.endTime = maintainDateRange.value[1]
-    }
-    const data = await TicketManagementApi.exportMaintenance(params)
-    download.excel(data, '保养履历.xls')
-  } catch {
-  } finally {
-    maintainExportLoading.value = false
-  }
-}
-
-const handleExportRepair = async () => {
-  if (!selectedDetailId.value) {
-    message.error('请先选择设备')
-    return
-  }
-  try {
-    await message.exportConfirm()
-    repairExportLoading.value = true
-    const params: any = {deviceId: selectedDetailId.value}
-    if (repairDateRange.value && repairDateRange.value.length === 2) {
-      params.startTime = repairDateRange.value[0]
-      params.endTime = repairDateRange.value[1]
-    }
-    const data = await DvRepairApi.exportRepairExcel(params)
-    download.excel(data, '维修履历.xls')
-  } catch {
-  } finally {
-    repairExportLoading.value = false
-  }
-}
-
 /** 初始化 **/
 onMounted(async () => {
   await dictStore.setDictMap()
@@ -1499,143 +582,6 @@ onMounted(async () => {
   min-width: 0;
 }
 
-.device-ledger-detail-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
-
-.device-ledger-detail-title {
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.device-ledger-history-steps {
-  padding: 8px 8px 0;
-}
-
-.device-ledger-history-title {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 13px;
-}
-
-.device-ledger-history-time {
-  font-weight: 600;
-}
-
-.device-ledger-history-operator {
-  color: var(--el-text-color-secondary);
-}
-
-.device-ledger-tab-toolbar {
-  margin-bottom: 8px;
-  text-align: right;
-}
-
-.device-ledger-history-items {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-top: 8px;
-}
-
-.device-ledger-history-item {
-  display: flex;
-  padding: 10px;
-  background: var(--el-fill-color-blank);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.device-ledger-history-item-head {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.device-ledger-history-item-body {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  width: 100%;
-}
-
-.device-ledger-history-item-row {
-  display: flex;
-  gap: 10px;
-}
-
-.device-ledger-history-item-label {
-  width: 70px;
-  flex: 0 0 70px;
-  color: var(--el-text-color-secondary);
-}
-
-.device-ledger-history-item-value {
-  flex: 1;
-  color: var(--el-text-color-regular);
-  word-break: break-word;
-}
-
-.device-ledger-history-item-images {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 4px;
-}
-
-.device-ledger-history-item-image {
-  width: 76px;
-  height: 76px;
-  overflow: hidden;
-  border-radius: 6px;
-}
-
-.device-ledger-history-image-error {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  background: var(--el-fill-color);
-  align-items: center;
-  justify-content: center;
-}
-
-.device-ledger-repair-collapse {
-  padding: 8px 8px 0;
-}
-
-.device-ledger-repair-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.device-ledger-repair-name {
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-}
-
-.device-ledger-repair-meta {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.device-ledger-history-item-text {
-  color: var(--el-text-color-regular);
-}
-
-.device-ledger-detail-qrcode {
-  margin-top: 10px;
-}
-
 .simple-grid-view {
   background-color: #fff;
   border-radius: 4px;
diff --git a/src/views/mes/energyOverview/index.vue b/src/views/mes/energyOverview/index.vue
new file mode 100644
index 00000000..ea7d7c2f
--- /dev/null
+++ b/src/views/mes/energyOverview/index.vue
@@ -0,0 +1,770 @@
+<template>
+  <div class="energy-overview-page">
+    <ContentWrap>
+      <el-form
+        ref="queryFormRef"
+        class="-mb-15px energy-overview-filter"
+        :model="queryParams"
+        :inline="true"
+        label-width="auto"
+      >
+        <el-form-item label="所属区域" prop="orgId">
+          <el-select v-model="queryParams.orgId" clearable filterable placeholder="请选择所属区域" class="!w-220px">
+            <el-option v-for="item in orgOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="能源类型" prop="energyTypeId">
+          <el-select
+            v-model="queryParams.energyTypeId"
+            :disabled="!hasEnergyTypes"
+            placeholder="请选择能源类型"
+            class="!w-220px"
+          >
+            <el-option v-for="item in energyTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间范围" prop="timeRange">
+          <el-date-picker
+            v-model="queryParams.timeRange"
+            type="datetimerange"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            format="YYYY-MM-DD HH:mm:ss"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            range-separator="~"
+            :default-time="[new Date('2000-01-01 00:00:00'), new Date('2000-01-01 23:59:59')]"
+            class="!w-420px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery">
+            <Icon icon="ep:search" class="mr-5px" />
+            查询
+          </el-button>
+          <el-button @click="resetQuery">
+            <Icon icon="ep:refresh" class="mr-5px" />
+            重置
+          </el-button>
+          <el-button type="success" plain @click="handleExport">
+            <Icon icon="ep:download" class="mr-5px" />
+            导出
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </ContentWrap>
+
+    <template v-if="hasEnergyTypes">
+      <div class="metric-grid">
+        <div v-for="item in metricCards" :key="item.key" class="metric-card">
+          <div class="metric-icon" :class="item.theme">
+            <Icon :icon="item.icon" />
+          </div>
+          <div class="metric-content">
+            <div class="metric-label">{{ item.label }}</div>
+            <div class="metric-value">
+              {{ item.value }}
+              <span class="metric-unit">{{ item.unit }}</span>
+            </div>
+            <div class="metric-sub">
+              <span>{{ item.subLabel }}</span>
+              <span v-if="item.change" class="metric-change" :class="{ down: item.down }">
+                <Icon :icon="item.down ? 'ep:bottom' : 'ep:top'" />
+                {{ item.change }}
+              </span>
+              <span v-else>{{ item.subValue }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <el-row :gutter="12" class="chart-row">
+        <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
+          <ContentWrap class="overview-panel">
+            <div class="panel-header">
+              <div class="panel-title">
+                能源用量趋势
+                <Icon icon="ep:info-filled" class="panel-info" />
+              </div>
+              <div class="panel-actions">
+                <el-button text type="primary">
+                  <Icon icon="ep:trend-charts" />
+                </el-button>
+                <el-button text type="primary">
+                  <Icon icon="ep:download" />
+                </el-button>
+              </div>
+            </div>
+            <Echart :height="300" :options="trendChartOptions" />
+          </ContentWrap>
+        </el-col>
+        <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
+          <ContentWrap class="overview-panel">
+            <div class="panel-header">
+              <div class="panel-title">
+                区域能耗占比
+                <Icon icon="ep:info-filled" class="panel-info" />
+              </div>
+              <div class="panel-actions">
+                <el-button text type="primary">
+                  <Icon icon="ep:pie-chart" />
+                </el-button>
+                <el-button text type="primary">
+                  <Icon icon="ep:download" />
+                </el-button>
+              </div>
+            </div>
+            <Echart :height="300" :options="regionPieOptions" />
+          </ContentWrap>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="12" class="detail-row">
+        <el-col :xl="7" :lg="8" :md="24" :sm="24" :xs="24">
+          <ContentWrap class="overview-panel">
+            <div class="panel-header">
+              <div class="panel-title">
+                能耗排行 TOP5
+                <Icon icon="ep:info-filled" class="panel-info" />
+              </div>
+            </div>
+            <el-table :data="rankList" :stripe="true" :show-overflow-tooltip="true">
+              <el-table-column label="排名" align="center" width="70">
+                <template #default="scope">
+                  <span class="rank-index" :class="`rank-${scope.$index + 1}`">{{ scope.$index + 1 }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="名称" prop="name" min-width="150" />
+              <el-table-column label="所属区域" prop="region" width="110" />
+              <el-table-column :label="`用量 (${selectedEnergyUnit})`" prop="value" align="right" width="120" />
+            </el-table>
+          </ContentWrap>
+        </el-col>
+        <el-col :xl="17" :lg="16" :md="24" :sm="24" :xs="24">
+          <ContentWrap class="overview-panel">
+            <div class="panel-header">
+              <div class="panel-title">
+                能源明细表
+                <Icon icon="ep:info-filled" class="panel-info" />
+              </div>
+            </div>
+            <el-table v-loading="loading" :data="pageDetailList" :stripe="true" :show-overflow-tooltip="true">
+              <el-table-column label="表名称" prop="name" min-width="170" />
+              <el-table-column label="能源类型" prop="energyType" align="center" width="100" />
+              <el-table-column label="所属区域" prop="region" align="center" width="120" />
+              <el-table-column :label="`能源用量 (${selectedEnergyUnit})`" prop="value" align="right" width="150" />
+              <el-table-column label="开始时间" prop="startTime" align="center" width="180" />
+              <el-table-column label="结束时间" prop="endTime" align="center" width="180" />
+            </el-table>
+            <Pagination
+              :total="total"
+              v-model:page="queryParams.pageNo"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getList"
+            />
+          </ContentWrap>
+        </el-col>
+      </el-row>
+    </template>
+
+    <ContentWrap v-else class="empty-panel">
+      <el-empty description="请先配置能源类型" :image-size="120" />
+    </ContentWrap>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { EChartsOption } from 'echarts'
+import { Echart } from '@/components/Echart'
+import { EnergyTypeApi, EnergyTypeVO } from '@/api/mes/energytype'
+
+defineOptions({ name: 'EnergyOverview' })
+
+interface MetricCard {
+  key: string
+  label: string
+  value: string
+  unit: string
+  icon: string
+  theme: string
+  subLabel: string
+  change?: string
+  down?: boolean
+  subValue?: string
+}
+
+interface DetailRow {
+  id: number
+  name: string
+  energyType: string
+  region: string
+  value: string
+  startTime: string
+  endTime: string
+}
+
+const message = useMessage()
+
+const defaultTimeRange = ['2026-05-04 00:00:00', '2026-05-05 23:59:59']
+const orgOptions = [
+  { label: '成型系统', value: 1 },
+  { label: '蛋托线01', value: 2 },
+  { label: '烘干系统', value: 3 }
+]
+
+const loading = ref(false)
+const queryFormRef = ref()
+const energyTypeOptions = ref<EnergyTypeVO[]>([])
+const defaultEnergyTypeId = ref<number>()
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  orgId: undefined as number | undefined,
+  energyTypeId: undefined as number | undefined,
+  timeRange: [...defaultTimeRange]
+})
+
+const metricCards = ref<MetricCard[]>([])
+const rankList = ref([
+  { name: '蛋托成型柜用电量', region: '成型系统', value: '2,139.09' },
+  { name: '蛋托线真空柜用电量', region: '蛋托线01', value: '0' },
+  { name: '蛋托干燥柜用电量', region: '烘干系统', value: '0' },
+  { name: '蛋托线其它用电量', region: '蛋托线01', value: '0' },
+  { name: '烘干系统其它用电量', region: '烘干系统', value: '0' }
+])
+const detailList = ref<DetailRow[]>([])
+const pageDetailList = ref<DetailRow[]>([])
+const total = ref(0)
+const hasEnergyTypes = computed(() => energyTypeOptions.value.length > 0)
+const selectedEnergyType = computed(() =>
+  energyTypeOptions.value.find((item) => item.id === queryParams.energyTypeId)
+)
+const selectedEnergyName = computed(() => selectedEnergyType.value?.name || '电')
+const selectedEnergyUnit = computed(() => selectedEnergyType.value?.unit || 'kWh')
+const selectedUnitConsumptionUnit = computed(() => `${selectedEnergyUnit.value}/件`)
+
+const hours = [
+  '00:00',
+  '01:00',
+  '02:00',
+  '03:00',
+  '04:00',
+  '05:00',
+  '06:00',
+  '07:00',
+  '08:00',
+  '09:00',
+  '10:00',
+  '11:00',
+  '12:00',
+  '13:00',
+  '14:00',
+  '15:00',
+  '16:00',
+  '17:00',
+  '18:00',
+  '19:00',
+  '20:00',
+  '21:00',
+  '22:00'
+]
+const trendData = [90, 80, 72, 75, 74, 85, 105, 116, 120, 112, 123, 127, 122, 146, 156.8, 147, 116, 94, 88, 102, 103, 116, 106]
+const regionData = [
+  { name: '成型系统', value: 2139.09 },
+  { name: '蛋托线01', value: 0 },
+  { name: '烘干系统', value: 0 }
+]
+
+const trendChartOptions = reactive<EChartsOption>({
+  color: ['#2f7df6'],
+  tooltip: {
+    trigger: 'axis',
+    formatter: (params: any) => {
+      const item = params?.[0]
+      return `${item.axisValue}<br />用电量：${item.data} kWh`
+    }
+  },
+  legend: {
+    top: 4,
+    data: ['用电量 (kWh)']
+  },
+  grid: {
+    left: 24,
+    right: 24,
+    top: 46,
+    bottom: 32,
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    name: '时间（小时）',
+    nameLocation: 'middle',
+    nameGap: 28,
+    data: hours,
+    axisLine: { lineStyle: { color: '#dcdfe6' } },
+    axisLabel: { color: '#606266' }
+  },
+  yAxis: {
+    type: 'value',
+    name: 'kWh',
+    min: 0,
+    max: 180,
+    interval: 30,
+    axisLabel: { color: '#606266' },
+    splitLine: { lineStyle: { color: '#e8edf5' } }
+  },
+  series: [
+    {
+      name: '用电量 (kWh)',
+      type: 'line',
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: 7,
+      lineStyle: { width: 3 },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: 'rgba(47, 125, 246, 0.28)' },
+            { offset: 1, color: 'rgba(47, 125, 246, 0.04)' }
+          ]
+        }
+      },
+      data: trendData,
+      markPoint: {
+        symbolSize: 48,
+        label: { color: '#2f7df6', formatter: '{c}' },
+        data: [{ type: 'max', name: '峰值' }]
+      }
+    }
+  ]
+}) as EChartsOption
+
+const regionPieOptions = reactive<EChartsOption>({
+  color: ['#2f7df6', '#52c41a', '#faad14'],
+  tooltip: {
+    trigger: 'item',
+    formatter: '{b}<br />{c} kWh ({d}%)'
+  },
+  legend: {
+    orient: 'vertical',
+    right: 24,
+    top: 'center',
+    itemWidth: 12,
+    itemHeight: 12,
+    formatter: (name: string) => {
+      const item = regionData.find((row) => row.name === name)
+      const value = item?.value ?? 0
+      const percent = value > 0 ? '100.00' : '0.00'
+      return `${name}    ${value.toLocaleString()} kWh (${percent}%)`
+    }
+  },
+  series: [
+    {
+      name: '区域能耗',
+      type: 'pie',
+      radius: ['58%', '76%'],
+      center: ['34%', '50%'],
+      avoidLabelOverlap: true,
+      label: {
+        show: true,
+        position: 'center',
+        formatter: '总用电量\n{total|2,139.09 kWh}',
+        color: '#303133',
+        rich: {
+          total: {
+            fontSize: 20,
+            lineHeight: 34,
+            fontWeight: 700,
+            color: '#17233d'
+          }
+        }
+      },
+      labelLine: { show: false },
+      data: regionData
+    }
+  ]
+}) as EChartsOption
+
+const buildMetrics = () => {
+  metricCards.value = [
+    {
+      key: 'total',
+      label: '总用电量',
+      value: '2,139.09',
+      unit: selectedEnergyUnit.value,
+      icon: 'ep:lightning',
+      theme: 'blue',
+      subLabel: '较昨日',
+      change: '12.53%'
+    },
+    {
+      key: 'today',
+      label: '今日用电量',
+      value: '860.32',
+      unit: selectedEnergyUnit.value,
+      icon: 'ep:calendar',
+      theme: 'green',
+      subLabel: '较昨日',
+      change: '12.15%'
+    },
+    {
+      key: 'peak',
+      label: '峰值用电',
+      value: '156.8',
+      unit: selectedEnergyUnit.value,
+      icon: 'ep:histogram',
+      theme: 'purple',
+      subLabel: '时间：',
+      subValue: '2026-05-04 14:00 ~ 15:00'
+    },
+    {
+      key: 'unit',
+      label: '单位产量能耗',
+      value: '0.38',
+      unit: selectedUnitConsumptionUnit.value,
+      icon: 'ep:orange',
+      theme: 'orange',
+      subLabel: '较昨日',
+      change: '5.21%',
+      down: true
+    },
+    {
+      key: 'region',
+      label: '最大耗能区域',
+      value: '成型系统',
+      unit: '',
+      icon: 'ep:pie-chart',
+      theme: 'cyan',
+      subLabel: '占比：',
+      subValue: '100.00%'
+    }
+  ]
+}
+
+const buildDetails = () => {
+  const timeRange = queryParams.timeRange?.length === 2 ? queryParams.timeRange : defaultTimeRange
+  detailList.value = [
+    {
+      id: 1,
+      name: '蛋托线真空柜用电量',
+      energyType: selectedEnergyName.value,
+      region: '蛋托线01',
+      value: '0',
+      startTime: timeRange[0],
+      endTime: timeRange[1]
+    },
+    {
+      id: 2,
+      name: '蛋托成型柜用电量',
+      energyType: selectedEnergyName.value,
+      region: '成型系统',
+      value: '2,139.09',
+      startTime: timeRange[0],
+      endTime: timeRange[1]
+    },
+    {
+      id: 3,
+      name: '蛋托干燥柜用电量',
+      energyType: selectedEnergyName.value,
+      region: '烘干系统',
+      value: '0',
+      startTime: timeRange[0],
+      endTime: timeRange[1]
+    }
+  ]
+  total.value = detailList.value.length
+}
+
+const getList = () => {
+  if (!hasEnergyTypes.value) {
+    metricCards.value = []
+    detailList.value = []
+    pageDetailList.value = []
+    total.value = 0
+    return
+  }
+
+  loading.value = true
+  buildMetrics()
+  buildDetails()
+  const start = (queryParams.pageNo - 1) * queryParams.pageSize
+  pageDetailList.value = detailList.value.slice(start, start + queryParams.pageSize)
+  loading.value = false
+}
+
+const normalizeEnergyTypeList = (data: unknown): EnergyTypeVO[] => {
+  const maybeData = data as { data?: EnergyTypeVO[] }
+  if (Array.isArray(data)) {
+    return data as EnergyTypeVO[]
+  }
+  if (Array.isArray(maybeData?.data)) {
+    return maybeData.data
+  }
+  return []
+}
+
+const getDefaultEnergyType = (list: EnergyTypeVO[]) => {
+  return (
+    list.find((item) => item.name === '电') ||
+    list.find((item) => item.name === '水') ||
+    list.find((item) => item.name === '气') ||
+    list[0]
+  )
+}
+
+const getEnergyTypes = async () => {
+  try {
+    const data = await EnergyTypeApi.getEnergyTypeList()
+    energyTypeOptions.value = normalizeEnergyTypeList(data)
+  } catch (error) {
+    energyTypeOptions.value = []
+  }
+
+  const defaultEnergyType = getDefaultEnergyType(energyTypeOptions.value)
+  defaultEnergyTypeId.value = defaultEnergyType?.id
+  queryParams.energyTypeId = defaultEnergyType?.id
+}
+
+const handleQuery = () => {
+  if (!hasEnergyTypes.value) {
+    getList()
+    return
+  }
+  queryParams.pageNo = 1
+  getList()
+}
+
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  queryParams.orgId = undefined
+  queryParams.energyTypeId = defaultEnergyTypeId.value
+  queryParams.timeRange = [...defaultTimeRange]
+  handleQuery()
+}
+
+const handleExport = () => {
+  message.info('示例页暂未接入导出接口')
+}
+
+onMounted(async () => {
+  await getEnergyTypes()
+  if (hasEnergyTypes.value) {
+    getList()
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.energy-overview-page {
+  .energy-overview-filter {
+    :deep(.el-form-item) {
+      margin-bottom: 15px;
+    }
+  }
+}
+
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(180px, 1fr));
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.metric-card {
+  display: flex;
+  min-height: 118px;
+  padding: 24px 22px;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 3%);
+  align-items: center;
+  gap: 18px;
+}
+
+.metric-icon {
+  display: flex;
+  width: 52px;
+  height: 52px;
+  font-size: 28px;
+  color: #fff;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+
+  &.blue {
+    background: linear-gradient(135deg, #60a5fa, #2563eb);
+  }
+
+  &.green {
+    background: linear-gradient(135deg, #7ad957, #30b83f);
+  }
+
+  &.purple {
+    background: linear-gradient(135deg, #a78bfa, #7c3aed);
+  }
+
+  &.orange {
+    background: linear-gradient(135deg, #fbbf24, #f59e0b);
+  }
+
+  &.cyan {
+    background: linear-gradient(135deg, #2dd4bf, #14b8a6);
+  }
+}
+
+.metric-content {
+  min-width: 0;
+}
+
+.metric-label {
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: var(--el-text-color-regular);
+}
+
+.metric-value {
+  overflow: hidden;
+  font-size: 26px;
+  font-weight: 700;
+  line-height: 1.25;
+  color: var(--el-text-color-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metric-unit {
+  margin-left: 4px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.metric-sub {
+  display: flex;
+  min-height: 22px;
+  margin-top: 8px;
+  font-size: 13px;
+  color: var(--el-text-color-regular);
+  align-items: center;
+  gap: 5px;
+}
+
+.metric-change {
+  display: inline-flex;
+  color: var(--el-color-danger);
+  align-items: center;
+  gap: 2px;
+
+  &.down {
+    color: var(--el-color-success);
+  }
+}
+
+.chart-row,
+.detail-row {
+  margin-bottom: 12px;
+}
+
+.overview-panel {
+  margin-bottom: 0;
+}
+
+.empty-panel {
+  display: flex;
+  min-height: 520px;
+  margin-bottom: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+.panel-header {
+  display: flex;
+  height: 32px;
+  margin-bottom: 8px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.panel-title {
+  display: inline-flex;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--el-text-color-primary);
+  align-items: center;
+  gap: 6px;
+}
+
+.panel-info {
+  font-size: 15px;
+  color: var(--el-color-primary-light-3);
+}
+
+.panel-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+
+  .el-button {
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid var(--el-border-color-light);
+  }
+}
+
+.rank-index {
+  display: inline-flex;
+  width: 22px;
+  height: 22px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #606266;
+  background: #eef1f6;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+
+  &.rank-1 {
+    color: #fff;
+    background: #f5a400;
+  }
+
+  &.rank-2 {
+    color: #fff;
+    background: #aab2bf;
+  }
+
+  &.rank-3 {
+    color: #fff;
+    background: #d99458;
+  }
+}
+
+@media (max-width: 1400px) {
+  .metric-grid {
+    grid-template-columns: repeat(3, minmax(180px, 1fr));
+  }
+}
+
+@media (max-width: 900px) {
+  .metric-grid {
+    grid-template-columns: repeat(2, minmax(160px, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .metric-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .metric-card {
+    padding: 18px;
+  }
+}
+</style>
diff --git a/src/views/mes/productionReport/detail/index.vue b/src/views/mes/productionReport/detail/index.vue
new file mode 100644
index 00000000..d3fe5bbc
--- /dev/null
+++ b/src/views/mes/productionReport/detail/index.vue
@@ -0,0 +1,152 @@
+<template>
+  <ContentWrap>
+    <div v-loading="detailLoading" class="production-report-detail-body">
+      <el-descriptions :column="3" class="production-report-detail-desc">
+        <el-descriptions-item :label="t('ProductionReport.Index.tableCode')">
+          {{ detailData?.code ?? '' }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('ProductionReport.Index.tableOrderDate')">
+          {{ formatDetailDate(detailData?.orderDate) }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('ProductionReport.Index.tableDeliveryDate')">
+          {{ formatDetailDate(detailData?.deliveryDate ?? detailData?.finishDate) }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('ProductionReport.Index.tableStatus')">
+          <dict-tag :type="DICT_TYPE.MES_TASK_STATUS" :value="detailData?.status" />
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('ProductionReport.Index.tableIsScheduled')">
+          <el-tag :type="detailData?.isScheduled ? 'success' : 'info'">
+            {{ detailData?.isScheduled ? t('ProductionReport.Index.yes') : t('ProductionReport.Index.no') }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('ProductionReport.Index.tableProductionProgress')">
+          <div class="production-progress-cell">
+            <el-progress
+              type="circle"
+              :percentage="productionProgress"
+              :width="40"
+              :stroke-width="4"
+              :show-text="false"
+              :color="productionProgress === 100 ? '#67c23a' : undefined"
+            />
+            <span class="production-progress-text">{{ productionProgress }}%</span>
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('ProductionReport.Index.tableRemark')" :span="3">
+          {{ detailData?.remark ?? '' }}
+        </el-descriptions-item>
+      </el-descriptions>
+
+      <div class="production-report-detail-tabs">
+        <el-tabs v-model="activeTabName" class="mt-12px">
+          <el-tab-pane :label="t('ProductionReport.Index.detailTabBasicInfo')" name="basicInfo">
+            <ProductionReportBasicInfo :task-id="taskId" :task-delivery-date="detailData?.deliveryDate" />
+          </el-tab-pane>
+          <el-tab-pane :label="t('ProductionReport.Index.detailTabRelatedPlan')" name="relatedPlan">
+            <ProductionReportRelatedPlan :task-id="taskId" />
+          </el-tab-pane>
+          <el-tab-pane :label="t('ProductionReport.Index.detailTabQualityInfo')" name="qualityInfo">
+            <ProductionReportQualityInfo :task-id="taskId" />
+          </el-tab-pane>
+          <el-tab-pane :label="t('ProductionReport.Index.detailTabBaogongInfo')" name="baogongInfo">
+            <ProductionReportBaogongInfo :task-id="taskId" />
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import { TaskApi, TaskVO } from '@/api/mes/task'
+import ProductionReportBasicInfo from '../components/ProductionReportBasicInfo.vue'
+import ProductionReportRelatedPlan from '../components/ProductionReportRelatedPlan.vue'
+import ProductionReportQualityInfo from '../components/ProductionReportQualityInfo.vue'
+import ProductionReportBaogongInfo from '../components/ProductionReportBaogongInfo.vue'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+
+defineOptions({ name: 'MesProductionReportDetail' })
+
+const { t } = useI18n()
+const message = useMessage()
+const route = useRoute()
+const { delView } = useTagsViewStore()
+const { currentRoute } = useRouter()
+
+const taskId = computed(() => Number(route.params.id))
+const detailLoading = ref(false)
+const detailData = ref<TaskVO | null>(null)
+const activeTabName = ref('basicInfo')
+
+const formatDetailDate = (value: any) => {
+  if (!value) return ''
+  return formatDate(new Date(value), 'YYYY-MM-DD')
+}
+
+const productionProgress = computed(() => {
+  const storedPlanNumber = Number(detailData.value?.storedPlanNumber ?? 0)
+  const totalNumber = Number(detailData.value?.totalNumber ?? detailData.value?.number ?? 0)
+  if (!Number.isFinite(storedPlanNumber) || !Number.isFinite(totalNumber) || totalNumber <= 0) return 0
+  const rawPercent = (storedPlanNumber / totalNumber) * 100
+  return Math.max(0, Math.min(100, Number(rawPercent.toFixed(2))))
+})
+
+const getDetail = async () => {
+  if (!taskId.value) {
+    message.warning(t('ProductionReport.Detail.invalidId'))
+    delView(unref(currentRoute))
+    return
+  }
+  detailLoading.value = true
+  try {
+    detailData.value = await TaskApi.getTask(taskId.value)
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+onMounted(async () => {
+  await getDetail()
+})
+</script>
+
+<style scoped>
+.production-report-detail-body {
+  max-height: 85vh;
+}
+
+.production-report-detail-desc {
+  margin-bottom: 16px;
+}
+
+.production-report-detail-tabs {
+  padding-right: 4px;
+}
+
+:deep(.el-tabs__content) {
+  max-height: 65vh;
+  overflow-y: auto;
+}
+
+.production-progress-cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  flex-wrap: nowrap;
+  height: 100%;
+}
+
+.production-progress-cell :deep(.el-progress-circle) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.production-progress-text {
+  font-size: 12px;
+  white-space: nowrap;
+}
+</style>
diff --git a/src/views/mes/productionReport/index.vue b/src/views/mes/productionReport/index.vue
index ed786dd7..04815c51 100644
--- a/src/views/mes/productionReport/index.vue
+++ b/src/views/mes/productionReport/index.vue
@@ -90,8 +90,6 @@
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
-      highlight-current-row
-      @current-change="handleCurrentChange"
     >
       <el-table-column :label="t('ProductionReport.Index.tableCode')" align="center" prop="code" width="200px" sortable />
       <el-table-column :label="t('ProductionReport.Index.tableOrderDate')" align="center" prop="orderDate" :formatter="dateFormatter2" sortable />
@@ -128,6 +126,13 @@
         </template>
       </el-table-column>
       <el-table-column :label="t('ProductionReport.Index.tableRemark')" align="center" prop="remark" />
+      <el-table-column :label="t('ProductionReport.Index.tableOperate')" align="center" fixed="right" width="100px">
+        <template #default="scope">
+          <el-button link @click="openDetail(scope.row.id)">
+            {{ t('ProductionReport.Index.detail') }}
+          </el-button>
+        </template>
+      </el-table-column>
     </el-table>
     <Pagination
       :total="total"
@@ -136,23 +141,6 @@
       @pagination="getList"
     />
   </ContentWrap>
-
-  <ContentWrap v-if="currentRow && currentRow.id">
-    <el-tabs v-model="activeTabName">
-      <el-tab-pane :label="t('ProductionReport.Index.detailTabBasicInfo')" name="basicInfo">
-        <ProductionReportBasicInfo :task-id="currentRow.id" :task-delivery-date="currentRow.deliveryDate" />
-      </el-tab-pane>
-      <el-tab-pane :label="t('ProductionReport.Index.detailTabRelatedPlan')" name="relatedPlan">
-        <ProductionReportRelatedPlan :task-id="currentRow.id" />
-      </el-tab-pane>
-      <el-tab-pane :label="t('ProductionReport.Index.detailTabQualityInfo')" name="qualityInfo">
-        <ProductionReportQualityInfo :task-id="currentRow.id" />
-      </el-tab-pane>
-      <el-tab-pane :label="t('ProductionReport.Index.detailTabBaogongInfo')" name="baogongInfo">
-        <ProductionReportBaogongInfo :task-id="currentRow.id" />
-      </el-tab-pane>
-    </el-tabs>
-  </ContentWrap>
 </template>
 
 <script setup lang="ts">
@@ -160,10 +148,6 @@ import { DICT_TYPE } from '@/utils/dict'
 import { dateFormatter2 } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { TaskApi, TaskVO } from '@/api/mes/task'
-import ProductionReportBasicInfo from './components/ProductionReportBasicInfo.vue'
-import ProductionReportRelatedPlan from './components/ProductionReportRelatedPlan.vue'
-import ProductionReportQualityInfo from './components/ProductionReportQualityInfo.vue'
-import ProductionReportBaogongInfo from './components/ProductionReportBaogongInfo.vue'
 import { useI18n } from '@/hooks/web/useI18n'
 
 defineOptions({ name: 'ProductionReport' })
@@ -187,7 +171,6 @@ const queryParams = reactive({
 const queryFormRef = ref()
 const exportLoading = ref(false)
 
-const activeTabName = ref('basicInfo')
 const activeStatusTab = ref('')
 
 const deliveryDateFormatter = (_row: any, _column: any, value: any) => {
@@ -236,17 +219,13 @@ const handleExport = async () => {
   }
 }
 
-const currentRow = ref<TaskVO>({} as TaskVO)
-const handleCurrentChange = (row: TaskVO | null) => {
-  if (row) {
-    currentRow.value = row
-    activeTabName.value = 'basicInfo'
-  }
+const { push } = useRouter()
+const openDetail = (id: number) => {
+  push({ name: 'MesProductionReportDetail', params: { id } })
 }
 
 const handleTabClick = (tab: any) => {
   queryParams.status = tab.paneName === '' ? undefined : tab.paneName
-  currentRow.value = {} as TaskVO
   queryParams.pageNo = 1
   getList()
 }