点检修改bug

# Conflicts:
#	src/locales/en.ts

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

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 })
+  }
+}

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 })
+  }
+}

src/locales/en.ts

@@ -59,6 +59,8 @@ export default {
     copy: 'Copy',
     copySuccess: 'Copy Success',
     copyError: 'Copy Error',
+    yes: 'Yes',
+    no: 'No',
     code: 'Auto-generate on Save'
   },
   ReportDashboard: {
@@ -287,6 +289,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 +1334,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: {
@@ -4174,6 +4231,61 @@ export default {
 
       exportFilename: 'DeviceOperationReport.xls'
     },
+    RunOverview: {
+      moduleName: 'Device Operation Overview',
+      pageIntro:
+        'View device status distribution, KPI summary, and operation timelines in the menu page, with fullscreen support.',
+
+      groupLabel: 'Device Group',
+      groupPlaceholder: 'Please select a group',
+      deviceLabel: 'Device Name',
+      devicePlaceholder: 'Please select a device',
+      timeRangeLabel: 'Time Range',
+      timeRangeStartPlaceholder: 'Start Time',
+      timeRangeEndPlaceholder: 'End Time',
+
+      searchButtonText: 'Search',
+      resetButtonText: 'Reset',
+      exportButtonText: 'Export',
+      exportPlaceholderMessage: 'This is a static overview page for now. Export is reserved.',
+
+      statusDistributionTitle: 'Time Distribution (Status Ratio)',
+      summaryTitle: 'Status Ratio (Summary)',
+      timelineTitle: 'Device Operation Timeline (Gantt)',
+      granularityHour: 'By Hour',
+      totalTimeLabel: 'Total Time',
+      compareLabel: 'vs Yesterday',
+      deviceFilterAll: 'All Devices',
+      expandAllText: 'Expand All',
+      enterFullscreen: 'Enter Fullscreen',
+      exitFullscreen: 'Exit Fullscreen',
+      statisticsTimeText: 'Statistics: {start} ~ {end}',
+      totalDevicesText: '{total} devices total',
+      pageUnit: '/page',
+
+      tableDeviceNameColumn: 'Device Name',
+      tableUtilizationRateColumn: 'Utilization Rate',
+
+      quickRange: {
+        today: 'Today',
+        yesterday: 'Yesterday',
+        last7Days: 'Last 7 Days',
+        last30Days: 'Last 30 Days',
+        custom: 'Custom'
+      },
+      metrics: {
+        utilizationRate: 'Average Utilization',
+        powerOnRate: 'Average Power-on Rate',
+        faultRate: 'Average Fault Rate',
+        standbyRate: 'Average Standby Rate'
+      },
+      legend: {
+        running: 'Running',
+        standby: 'Standby',
+        fault: 'Fault',
+        offline: 'Offline'
+      }
+    },
     RealTimeMonitoring: {
       moduleName: 'Real-time Data Monitoring',
 
@@ -4312,7 +4424,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',

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: {
@@ -4011,6 +4068,60 @@ export default {
 
       exportFilename: '设备运行报表.xls'
     },
+    RunOverview: {
+      moduleName: '设备运行总览',
+      pageIntro: '在菜单页中查看设备状态分布、指标概况与设备运行轨迹，并支持全屏查看。',
+
+      groupLabel: '设备分组',
+      groupPlaceholder: '请选择分组',
+      deviceLabel: '设备名称',
+      devicePlaceholder: '请选择设备',
+      timeRangeLabel: '时间范围',
+      timeRangeStartPlaceholder: '开始时间',
+      timeRangeEndPlaceholder: '结束时间',
+
+      searchButtonText: '查询',
+      resetButtonText: '重置',
+      exportButtonText: '导出',
+      exportPlaceholderMessage: '当前为静态总览页面，导出功能预留中',
+
+      statusDistributionTitle: '时间分布图（状态占比）',
+      summaryTitle: '状态占比（汇总）',
+      timelineTitle: '设备运行轨迹（甘特图）',
+      granularityHour: '按小时',
+      totalTimeLabel: '总时间',
+      compareLabel: '较昨日',
+      deviceFilterAll: '全部设备',
+      expandAllText: '展开全部',
+      enterFullscreen: '全屏查看',
+      exitFullscreen: '退出全屏',
+      statisticsTimeText: '统计时间：{start} ~ {end}',
+      totalDevicesText: '共 {total} 台设备',
+      pageUnit: '条/页',
+
+      tableDeviceNameColumn: '设备名称',
+      tableUtilizationRateColumn: '稼动率',
+
+      quickRange: {
+        today: '今天',
+        yesterday: '昨天',
+        last7Days: '近7天',
+        last30Days: '近30天',
+        custom: '自定义'
+      },
+      metrics: {
+        utilizationRate: '平均稼动率',
+        powerOnRate: '平均开机率',
+        faultRate: '平均故障率',
+        standbyRate: '平均待机率'
+      },
+      legend: {
+        running: '运行',
+        standby: '待机',
+        fault: '故障',
+        offline: '离线'
+      }
+    },
     RealTimeMonitoring: {
       moduleName: '数据实时监控',
 
@@ -4524,7 +4635,12 @@ export default {
       detailTabRelatedPlan: '关联计划',
       detailTabQualityInfo: '质检信息',
       detailTabBaogongInfo: '报工信息',
-      exportFilename: '生产报表'
+      exportFilename: '生产报表',
+      tableOperate: '操作',
+      detail: '详情'
+    },
+    Detail: {
+      invalidId: '参数错误，任务单ID不能为空'
     },
     BasicInfo: {
       buttonRefresh: '刷新',

src/router/modules/remaining.ts

@@ -642,6 +642,28 @@ const remainingRouter: AppRouteRecordRaw[] = [
       canTo: true
     }
   },
+  {
+    path: '/iot',
+    component: Layout,
+    name: 'IotHiddenPages',
+    meta: {
+      hidden: true
+    },
+    children: [
+      {
+        path: 'runoverview',
+        component: () => import('@/views/iot/runoverview/index.vue'),
+        name: 'IotRunOverview',
+        meta: {
+          title: t('DataCollection.RunOverview.moduleName'),
+          hidden: true,
+          noTagsView: false,
+          canTo: true,
+          activeMenu: '/iot/runoverview'
+        }
+      }
+    ]
+  },
 
   {
     path: '/:pathMatch(.*)*',
@@ -672,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')
       }
     ]
   }

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')"

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[]) => {

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>

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>

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>

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>

src/views/iot/device/DevicePoint.vue

@@ -1206,6 +1206,9 @@ const handleRuleDelete = async (id: number) => {
     await getRuleList()
   } catch { }
 }
+onMounted(() =>{
+  getRuleList()
+})
 
 </script>
 

src/views/iot/runoverview/components/OperationTimelineChart.vue

@@ -0,0 +1,270 @@
+<template>
+  <ContentWrap class="timeline-panel">
+    <div class="timeline-panel__header">
+      <div class="timeline-panel__title">{{ t('DataCollection.RunOverview.timelineTitle') }}</div>
+      <div class="timeline-panel__actions">
+        <el-select model-value="" class="!w-140px">
+          <el-option value="" :label="t('DataCollection.RunOverview.deviceFilterAll')" />
+        </el-select>
+        <el-select model-value="expand" class="!w-120px">
+          <el-option value="expand" :label="t('DataCollection.RunOverview.expandAllText')" />
+        </el-select>
+        <el-button class="timeline-panel__icon-btn">
+          <Icon icon="ep:data-analysis" />
+        </el-button>
+        <el-button class="timeline-panel__icon-btn">
+          <Icon icon="ep:download" />
+        </el-button>
+      </div>
+    </div>
+
+    <div class="timeline-legend">
+      <div v-for="item in legendItems" :key="item.status" class="timeline-legend__item">
+        <span class="timeline-legend__dot" :style="{ background: item.color }"></span>
+        <span>{{ item.label }}</span>
+      </div>
+    </div>
+
+    <div class="timeline-table">
+      <div class="timeline-table__head">
+        <div class="timeline-table__meta">
+          <div class="timeline-table__device">{{ t('DataCollection.RunOverview.tableDeviceNameColumn') }}</div>
+          <div class="timeline-table__rate">{{ t('DataCollection.RunOverview.tableUtilizationRateColumn') }}</div>
+        </div>
+        <div class="timeline-scale">
+          <div v-for="hour in hourTicks" :key="hour" class="timeline-scale__tick">
+            {{ hour }}
+          </div>
+        </div>
+      </div>
+
+      <div v-for="row in pagedRows" :key="row.id" class="timeline-table__row">
+        <div class="timeline-table__meta">
+          <div class="timeline-table__device">{{ row.name }}</div>
+          <div class="timeline-table__rate">{{ row.utilizationRate.toFixed(2) }}%</div>
+        </div>
+        <div class="timeline-track">
+          <div v-for="hour in 24" :key="hour" class="timeline-track__hour"></div>
+          <div
+            v-for="(segment, index) in row.segments"
+            :key="`${row.id}-${index}`"
+            class="timeline-segment"
+            :style="{
+              left: `${(segment.startHour / 24) * 100}%`,
+              width: `${((segment.endHour - segment.startHour) / 24) * 100}%`,
+              background: statusColors[segment.status]
+            }"
+          ></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="timeline-panel__footer">
+      <div class="timeline-panel__summary">
+        {{ t('DataCollection.RunOverview.statisticsTimeText', { start: statisticsStart, end: statisticsEnd }) }}
+      </div>
+      <div class="timeline-panel__pager">
+        <span>{{ t('DataCollection.RunOverview.totalDevicesText', { total }) }}</span>
+        <el-select :model-value="pageSize" class="!w-100px" @update:model-value="emit('update:pageSize', Number($event))">
+          <el-option :value="10" :label="`10${t('DataCollection.RunOverview.pageUnit')}`" />
+          <el-option :value="20" :label="`20${t('DataCollection.RunOverview.pageUnit')}`" />
+        </el-select>
+        <el-pagination
+          layout="prev, pager, next"
+          :page-size="pageSize"
+          :current-page="pageNo"
+          :total="total"
+          small
+          @current-change="emit('update:pageNo', $event)"
+        />
+      </div>
+    </div>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { DeviceTimelineRow, RunStatus } from './types'
+
+const props = defineProps<{
+  rows: DeviceTimelineRow[]
+  total: number
+  pageNo: number
+  pageSize: number
+  statisticsStart: string
+  statisticsEnd: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:pageNo', value: number): void
+  (e: 'update:pageSize', value: number): void
+}>()
+
+const { t } = useI18n()
+
+const statusColors: Record<RunStatus, string> = {
+  running: '#67c35b',
+  standby: '#f5c243',
+  fault: '#ff6b6b',
+  offline: '#d5dae3'
+}
+
+const legendItems = computed(() => [
+  { status: 'running' as const, color: statusColors.running, label: t('DataCollection.RunOverview.legend.running') },
+  { status: 'standby' as const, color: statusColors.standby, label: t('DataCollection.RunOverview.legend.standby') },
+  { status: 'fault' as const, color: statusColors.fault, label: t('DataCollection.RunOverview.legend.fault') },
+  { status: 'offline' as const, color: statusColors.offline, label: t('DataCollection.RunOverview.legend.offline') }
+])
+
+const hourTicks = Array.from({ length: 13 }, (_, index) => `${String(index * 2).padStart(2, '0')}:00`)
+
+const pagedRows = computed(() => {
+  const start = (props.pageNo - 1) * props.pageSize
+  return props.rows.slice(start, start + props.pageSize)
+})
+</script>
+
+<style scoped lang="scss">
+.timeline-panel__header,
+.timeline-panel__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.timeline-panel__title {
+  color: #101828;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.timeline-panel__actions,
+.timeline-panel__pager {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.timeline-panel__icon-btn {
+  width: 36px;
+  padding: 0;
+}
+
+.timeline-legend {
+  display: flex;
+  justify-content: center;
+  gap: 32px;
+  margin: 10px 0 18px;
+}
+
+.timeline-legend__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #475467;
+  font-size: 13px;
+}
+
+.timeline-legend__dot {
+  width: 18px;
+  height: 10px;
+  border-radius: 999px;
+}
+
+.timeline-table {
+  overflow-x: auto;
+}
+
+.timeline-table__head,
+.timeline-table__row {
+  display: grid;
+  grid-template-columns: 210px minmax(720px, 1fr);
+  gap: 16px;
+}
+
+.timeline-table__head {
+  margin-bottom: 12px;
+}
+
+.timeline-table__row {
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.timeline-table__meta {
+  display: grid;
+  grid-template-columns: 1fr 70px;
+  gap: 12px;
+  align-items: center;
+}
+
+.timeline-table__device,
+.timeline-table__rate {
+  color: #344054;
+  font-size: 13px;
+}
+
+.timeline-table__head .timeline-table__device,
+.timeline-table__head .timeline-table__rate {
+  color: #475467;
+  font-weight: 600;
+}
+
+.timeline-scale,
+.timeline-track {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(24, 1fr);
+}
+
+.timeline-scale {
+  color: #667085;
+  font-size: 12px;
+}
+
+.timeline-scale__tick {
+  position: relative;
+}
+
+.timeline-scale__tick::after {
+  position: absolute;
+  top: 18px;
+  right: 0;
+  width: 1px;
+  height: 12px;
+  background: #e4e7ec;
+  content: '';
+}
+
+.timeline-track {
+  height: 20px;
+  background: #f5f7fb;
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.timeline-track__hour {
+  border-right: 1px solid #edf1f7;
+}
+
+.timeline-segment {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border-radius: 999px;
+}
+
+.timeline-panel__summary {
+  color: #667085;
+  font-size: 13px;
+}
+
+@media (max-width: 1100px) {
+  .timeline-panel__header,
+  .timeline-panel__footer {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+</style>

src/views/iot/runoverview/components/OverviewFilterBar.vue

@@ -0,0 +1,114 @@
+<template>
+  <ContentWrap class="run-overview-filter">
+    <el-form :model="modelValue" inline label-width="auto">
+      <el-form-item :label="t('DataCollection.RunOverview.groupLabel')">
+        <el-select
+          :model-value="modelValue.groupId"
+          :placeholder="t('DataCollection.RunOverview.groupPlaceholder')"
+          class="!w-220px"
+          @update:model-value="updateField('groupId', $event)"
+        >
+          <el-option v-for="item in groupOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="t('DataCollection.RunOverview.deviceLabel')">
+        <el-select
+          :model-value="modelValue.deviceId"
+          clearable
+          :placeholder="t('DataCollection.RunOverview.devicePlaceholder')"
+          class="!w-240px"
+          @update:model-value="updateField('deviceId', $event || '')"
+        >
+          <el-option v-for="item in deviceOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="t('DataCollection.RunOverview.timeRangeLabel')">
+        <el-date-picker
+          :model-value="modelValue.timeRange"
+          type="datetimerange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          :start-placeholder="t('DataCollection.RunOverview.timeRangeStartPlaceholder')"
+          :end-placeholder="t('DataCollection.RunOverview.timeRangeEndPlaceholder')"
+          class="!w-360px"
+          @update:model-value="updateField('timeRange', $event)"
+        />
+      </el-form-item>
+      <el-form-item class="run-overview-filter__actions">
+        <el-button
+          v-for="item in quickRanges"
+          :key="item.value"
+          :type="modelValue.quickRange === item.value ? 'primary' : 'default'"
+          @click="emit('quick-range-change', item.value)"
+        >
+          {{ item.label }}
+        </el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="emit('query')">
+          <Icon icon="ep:search" class="mr-5px" />
+          {{ t('DataCollection.RunOverview.searchButtonText') }}
+        </el-button>
+        <el-button @click="emit('reset')">
+          <Icon icon="ep:refresh" class="mr-5px" />
+          {{ t('DataCollection.RunOverview.resetButtonText') }}
+        </el-button>
+        <el-button type="success" plain @click="emit('export')">
+          <Icon icon="ep:download" class="mr-5px" />
+          {{ t('DataCollection.RunOverview.exportButtonText') }}
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import type { OverviewOption, QuickRangeKey, RunOverviewQueryParams } from './types'
+
+const props = defineProps<{
+  modelValue: RunOverviewQueryParams
+  groupOptions: OverviewOption[]
+  deviceOptions: OverviewOption[]
+  quickRanges: Array<{ label: string; value: QuickRangeKey }>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: RunOverviewQueryParams): void
+  (e: 'query'): void
+  (e: 'reset'): void
+  (e: 'export'): void
+  (e: 'quick-range-change', value: QuickRangeKey): void
+}>()
+
+const { t } = useI18n()
+
+const updateField = <K extends keyof RunOverviewQueryParams>(key: K, value: RunOverviewQueryParams[K]) => {
+  emit('update:modelValue', {
+    ...props.modelValue,
+    [key]: value
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.run-overview-filter {
+  :deep(.el-form) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px 0;
+  }
+
+  :deep(.el-form-item) {
+    margin-bottom: 10px;
+  }
+
+  :deep(.el-form-item__label) {
+    min-width: 84px;
+    color: #475467;
+  }
+}
+
+.run-overview-filter__actions :deep(.el-button + .el-button) {
+  margin-left: 8px;
+}
+</style>

src/views/iot/runoverview/components/OverviewMetricCards.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="metric-grid">
+    <div v-for="item in metrics" :key="item.key" class="metric-card">
+      <div class="metric-card__icon" :style="{ background: itemColors[item.key]?.bg, color: itemColors[item.key]?.fg }">
+        <Icon :icon="item.icon" />
+      </div>
+      <div class="metric-card__content">
+        <div class="metric-card__title">{{ t(`DataCollection.RunOverview.metrics.${item.key}`) }}</div>
+        <div class="metric-card__value">
+          {{ item.value.toFixed(2) }}<span>{{ item.unit }}</span>
+        </div>
+        <div class="metric-card__compare">
+          <span>{{ t('DataCollection.RunOverview.compareLabel') }}</span>
+          <span :class="item.change >= 0 ? 'is-up' : 'is-down'">
+            {{ item.change >= 0 ? '↑' : '↓' }} {{ Math.abs(item.change).toFixed(2) }}%
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { RunOverviewMetric } from './types'
+
+defineProps<{
+  metrics: RunOverviewMetric[]
+}>()
+
+const { t } = useI18n()
+
+const itemColors: Record<string, { bg: string; fg: string }> = {
+  utilizationRate: { bg: 'rgba(61, 132, 255, 0.12)', fg: '#3d84ff' },
+  powerOnRate: { bg: 'rgba(86, 196, 94, 0.12)', fg: '#56c45e' },
+  faultRate: { bg: 'rgba(255, 164, 54, 0.12)', fg: '#ffa436' },
+  standbyRate: { bg: 'rgba(156, 108, 255, 0.12)', fg: '#9c6cff' }
+}
+</script>
+
+<style scoped lang="scss">
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.metric-card {
+  display: flex;
+  align-items: center;
+  min-height: 104px;
+  padding: 22px 24px;
+  background: #fff;
+  border: 1px solid #edf1f7;
+  border-radius: 14px;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
+}
+
+.metric-card__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  margin-right: 18px;
+  font-size: 28px;
+  border-radius: 50%;
+}
+
+.metric-card__content {
+  min-width: 0;
+}
+
+.metric-card__title {
+  margin-bottom: 6px;
+  color: #475467;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.metric-card__value {
+  color: #101828;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.2;
+
+  span {
+    margin-left: 2px;
+    font-size: 18px;
+  }
+}
+
+.metric-card__compare {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+  color: #667085;
+  font-size: 13px;
+}
+
+.is-up {
+  color: #f04438;
+}
+
+.is-down {
+  color: #12b76a;
+}
+
+@media (max-width: 1200px) {
+  .metric-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .metric-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

src/views/iot/runoverview/components/StatusDistributionChart.vue

@@ -0,0 +1,240 @@
+<template>
+  <ContentWrap class="chart-panel">
+    <div class="chart-panel__header">
+      <div class="chart-panel__title">
+        {{ t('DataCollection.RunOverview.statusDistributionTitle') }}
+      </div>
+      <div class="chart-panel__actions">
+        <el-select model-value="hour" class="!w-120px">
+          <el-option value="hour" :label="t('DataCollection.RunOverview.granularityHour')" />
+        </el-select>
+        <el-button class="chart-panel__icon-btn">
+          <Icon icon="ep:data-analysis" />
+        </el-button>
+        <el-button class="chart-panel__icon-btn">
+          <Icon icon="ep:download" />
+        </el-button>
+      </div>
+    </div>
+
+    <div class="chart-panel__body">
+      <div class="chart-panel__main">
+        <Echart :options="barOption" height="320px" />
+      </div>
+      <div class="chart-panel__side">
+        <div class="chart-panel__side-title">{{ t('DataCollection.RunOverview.summaryTitle') }}</div>
+        <Echart :options="pieOption" height="320px" />
+        <div class="chart-panel__legend">
+          <div v-for="item in summary" :key="item.status" class="chart-panel__legend-item">
+            <span class="dot" :style="{ background: statusColors[item.status] }"></span>
+            <span class="label">{{ statusLabelMap[item.status] }}</span>
+            <span class="value">{{ item.percent.toFixed(2) }}% ({{ item.hours.toFixed(2) }}h)</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { EChartsOption } from 'echarts'
+import { Echart as EchartChart } from '@/components/Echart'
+import type { HourlyStatusItem, RunStatus, StatusSummaryItem } from './types'
+
+const Echart = EchartChart
+
+const props = defineProps<{
+  hourlyStatus: HourlyStatusItem[]
+  summary: StatusSummaryItem[]
+}>()
+
+const { t } = useI18n()
+
+const statusColors: Record<RunStatus, string> = {
+  running: '#67c35b',
+  standby: '#f5c243',
+  fault: '#ff6b6b',
+  offline: '#cfd4df'
+}
+
+const statusLabelMap = computed<Record<RunStatus, string>>(() => ({
+  running: t('DataCollection.RunOverview.legend.running'),
+  standby: t('DataCollection.RunOverview.legend.standby'),
+  fault: t('DataCollection.RunOverview.legend.fault'),
+  offline: t('DataCollection.RunOverview.legend.offline')
+}))
+
+const barOption = computed<EChartsOption>(() => ({
+  color: [
+    statusColors.running,
+    statusColors.standby,
+    statusColors.fault,
+    statusColors.offline
+  ],
+  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+  legend: {
+    top: 8,
+    itemWidth: 14,
+    itemHeight: 8,
+    textStyle: { color: '#667085', fontSize: 12 }
+  },
+  grid: { left: 48, right: 18, top: 46, bottom: 36 },
+  xAxis: {
+    type: 'category',
+    data: props.hourlyStatus.map((item) => item.hour),
+    axisTick: { show: false },
+    axisLine: { lineStyle: { color: '#d0d5dd' } },
+    axisLabel: { color: '#667085', fontSize: 11 }
+  },
+  yAxis: {
+    type: 'value',
+    min: 0,
+    max: 100,
+    interval: 20,
+    axisLabel: { color: '#667085', formatter: '{value}%' },
+    splitLine: { lineStyle: { color: '#eef2f6' } }
+  },
+  series: [
+    {
+      name: statusLabelMap.value.running,
+      type: 'bar',
+      stack: 'status',
+      barWidth: 18,
+      data: props.hourlyStatus.map((item) => item.running)
+    },
+    {
+      name: statusLabelMap.value.standby,
+      type: 'bar',
+      stack: 'status',
+      barWidth: 18,
+      data: props.hourlyStatus.map((item) => item.standby)
+    },
+    {
+      name: statusLabelMap.value.fault,
+      type: 'bar',
+      stack: 'status',
+      barWidth: 18,
+      data: props.hourlyStatus.map((item) => item.fault)
+    },
+    {
+      name: statusLabelMap.value.offline,
+      type: 'bar',
+      stack: 'status',
+      barWidth: 18,
+      data: props.hourlyStatus.map((item) => item.offline)
+    }
+  ]
+}))
+
+const pieOption = computed<EChartsOption>(() => ({
+  color: props.summary.map((item) => statusColors[item.status]),
+  tooltip: { trigger: 'item', formatter: '{b}: {c}%' },
+  graphic: [
+    {
+      type: 'text',
+      left: 'center',
+      top: '42%',
+      style: {
+        text: `${t('DataCollection.RunOverview.totalTimeLabel')}\n24.00 h`,
+        textAlign: 'center',
+        fill: '#101828',
+        fontSize: 14,
+        fontWeight: 600,
+        lineHeight: 24
+      }
+    }
+  ],
+  series: [
+    {
+      name: t('DataCollection.RunOverview.summaryTitle'),
+      type: 'pie',
+      radius: ['55%', '76%'],
+      center: ['50%', '50%'],
+      label: { show: false },
+      data: props.summary.map((item) => ({
+        name: statusLabelMap.value[item.status],
+        value: item.percent
+      }))
+    }
+  ]
+}))
+</script>
+
+<style scoped lang="scss">
+.chart-panel {
+  margin-bottom: 16px;
+}
+
+.chart-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.chart-panel__title,
+.chart-panel__side-title {
+  color: #101828;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.chart-panel__actions {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.chart-panel__icon-btn {
+  width: 36px;
+  padding: 0;
+}
+
+.chart-panel__body {
+  display: grid;
+  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr);
+  gap: 12px;
+}
+
+.chart-panel__side {
+  padding: 8px 8px 0;
+}
+
+.chart-panel__legend {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: -8px;
+}
+
+.chart-panel__legend-item {
+  display: grid;
+  grid-template-columns: 12px 1fr auto;
+  gap: 8px;
+  align-items: center;
+  color: #344054;
+  font-size: 13px;
+}
+
+.dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.label {
+  color: #667085;
+}
+
+.value {
+  color: #101828;
+  font-weight: 600;
+}
+
+@media (max-width: 1100px) {
+  .chart-panel__body {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

src/views/iot/runoverview/components/types.ts

@@ -0,0 +1,58 @@
+export type RunStatus = 'running' | 'standby' | 'fault' | 'offline'
+
+export type QuickRangeKey = 'today' | 'yesterday' | 'last7Days' | 'last30Days' | 'custom'
+
+export interface OverviewOption {
+  label: string
+  value: string
+}
+
+export interface RunOverviewQueryParams {
+  groupId: string
+  deviceId: string
+  quickRange: QuickRangeKey
+  timeRange: [string, string]
+}
+
+export interface RunOverviewMetric {
+  key: string
+  icon: string
+  value: number
+  unit: string
+  change: number
+}
+
+export interface HourlyStatusItem {
+  hour: string
+  running: number
+  standby: number
+  fault: number
+  offline: number
+}
+
+export interface StatusSummaryItem {
+  status: RunStatus
+  percent: number
+  hours: number
+}
+
+export interface TimelineSegment {
+  status: RunStatus
+  startHour: number
+  endHour: number
+}
+
+export interface DeviceTimelineRow {
+  id: string
+  name: string
+  utilizationRate: number
+  segments: TimelineSegment[]
+}
+
+export interface RunOverviewData {
+  metrics: RunOverviewMetric[]
+  hourlyStatus: HourlyStatusItem[]
+  summary: StatusSummaryItem[]
+  timelineRows: DeviceTimelineRow[]
+  totalDevices: number
+}

src/views/iot/runoverview/index.vue

@@ -0,0 +1,176 @@
+<template>
+  <div ref="fullscreenTargetRef" class="run-overview-page" :class="{ 'is-fullscreen': isFullscreen }">
+    <div class="run-overview-page__floating-tools">
+      <el-tooltip
+        :content="
+          isFullscreen
+            ? t('DataCollection.RunOverview.exitFullscreen')
+            : t('DataCollection.RunOverview.enterFullscreen')
+        "
+      >
+        <button class="run-overview-page__screenfull" type="button" @click="toggleFullscreen">
+          <Icon :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'" color="#344054" />
+        </button>
+      </el-tooltip>
+    </div>
+
+    <OverviewFilterBar
+      v-model="queryParams"
+      :group-options="groupOptions"
+      :device-options="deviceOptions"
+      :quick-ranges="quickRanges"
+      @quick-range-change="handleQuickRangeChange"
+      @query="handleQuery"
+      @reset="resetQuery"
+      @export="handleExport"
+    />
+
+    <OverviewMetricCards :metrics="overviewData.metrics" />
+
+    <StatusDistributionChart :hourly-status="overviewData.hourlyStatus" :summary="overviewData.summary" />
+
+    <OperationTimelineChart
+      :rows="overviewData.timelineRows"
+      :total="overviewData.totalDevices"
+      :page-no="pageNo"
+      :page-size="pageSize"
+      :statistics-start="queryParams.timeRange[0]"
+      :statistics-end="queryParams.timeRange[1]"
+      @update:page-no="pageNo = $event"
+      @update:page-size="handlePageSizeChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import { useFullscreen } from '@vueuse/core'
+import OverviewFilterBar from './components/OverviewFilterBar.vue'
+import OverviewMetricCards from './components/OverviewMetricCards.vue'
+import OperationTimelineChart from './components/OperationTimelineChart.vue'
+import StatusDistributionChart from './components/StatusDistributionChart.vue'
+import { buildDefaultQueryParams, buildRunOverviewData, DEVICE_OPTIONS, GROUP_OPTIONS } from './mock'
+import type { QuickRangeKey, RunOverviewData, RunOverviewQueryParams } from './components/types'
+
+defineOptions({ name: 'IotRunOverview' })
+
+const { t } = useI18n()
+const message = useMessage()
+const fullscreenTargetRef = ref()
+const { isFullscreen, toggle: toggleFullscreen } = useFullscreen(fullscreenTargetRef)
+
+const groupOptions = GROUP_OPTIONS
+const deviceOptions = DEVICE_OPTIONS
+
+const createDateRangeByQuickKey = (key: QuickRangeKey): [string, string] => {
+  const format = 'YYYY-MM-DD HH:mm:ss'
+  if (key === 'today') return [dayjs().startOf('day').format(format), dayjs().endOf('day').format(format)]
+  if (key === 'yesterday') {
+    return [
+      dayjs().subtract(1, 'day').startOf('day').format(format),
+      dayjs().subtract(1, 'day').endOf('day').format(format)
+    ]
+  }
+  if (key === 'last7Days') return [dayjs().subtract(6, 'day').startOf('day').format(format), dayjs().endOf('day').format(format)]
+  if (key === 'last30Days') {
+    return [dayjs().subtract(29, 'day').startOf('day').format(format), dayjs().endOf('day').format(format)]
+  }
+  return [dayjs().startOf('day').format(format), dayjs().endOf('day').format(format)]
+}
+
+const quickRanges = computed(() => [
+  { label: t('DataCollection.RunOverview.quickRange.today'), value: 'today' as const },
+  { label: t('DataCollection.RunOverview.quickRange.yesterday'), value: 'yesterday' as const },
+  { label: t('DataCollection.RunOverview.quickRange.last7Days'), value: 'last7Days' as const },
+  { label: t('DataCollection.RunOverview.quickRange.last30Days'), value: 'last30Days' as const },
+  { label: t('DataCollection.RunOverview.quickRange.custom'), value: 'custom' as const }
+])
+
+const queryParams = ref<RunOverviewQueryParams>(buildDefaultQueryParams())
+const overviewData = ref<RunOverviewData>(buildRunOverviewData(queryParams.value))
+const pageNo = ref(1)
+const pageSize = ref(10)
+
+const refreshData = () => {
+  overviewData.value = buildRunOverviewData(queryParams.value)
+  const maxPage = Math.max(1, Math.ceil(overviewData.value.totalDevices / pageSize.value))
+  if (pageNo.value > maxPage) pageNo.value = maxPage
+}
+
+const handleQuickRangeChange = (key: QuickRangeKey) => {
+  queryParams.value = {
+    ...queryParams.value,
+    quickRange: key,
+    timeRange: key === 'custom' ? queryParams.value.timeRange : createDateRangeByQuickKey(key)
+  }
+  pageNo.value = 1
+  refreshData()
+}
+
+const handleQuery = () => {
+  pageNo.value = 1
+  refreshData()
+}
+
+const resetQuery = () => {
+  queryParams.value = buildDefaultQueryParams()
+  pageNo.value = 1
+  pageSize.value = 10
+  refreshData()
+}
+
+const handleExport = () => {
+  message.success(t('DataCollection.RunOverview.exportPlaceholderMessage'))
+}
+
+const handlePageSizeChange = (size: number) => {
+  pageSize.value = size
+  pageNo.value = 1
+}
+</script>
+
+<style scoped lang="scss">
+.run-overview-page {
+  position: relative;
+  min-width: 0;
+  //padding-top: 8px;
+}
+
+.run-overview-page.is-fullscreen {
+  height: 100%;
+  padding: 16px;
+  overflow: auto;
+  background: #f5f7fa;
+}
+
+.run-overview-page__floating-tools {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.run-overview-page__screenfull {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  background: #fff;
+  border: 1px solid #e4e7ec;
+  border-radius: 8px;
+  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.run-overview-page__screenfull:hover {
+  background: #f8fbff;
+  border-color: #bfd3ff;
+  box-shadow: 0 8px 18px rgba(61, 132, 255, 0.12);
+}
+</style>

src/views/iot/runoverview/mock.ts

@@ -0,0 +1,178 @@
+import dayjs from 'dayjs'
+import type {
+  DeviceTimelineRow,
+  HourlyStatusItem,
+  OverviewOption,
+  RunOverviewData,
+  RunOverviewQueryParams,
+  RunOverviewMetric,
+  RunStatus
+} from './components/types'
+
+const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
+
+export const GROUP_OPTIONS: OverviewOption[] = [
+  { label: 'SMT一组', value: 'group-1' },
+  { label: '成型二组', value: 'group-2' },
+  { label: '总装三组', value: 'group-3' }
+]
+
+export const DEVICE_OPTIONS: OverviewOption[] = [
+  { label: '模拟干燥设备04', value: 'device-01' },
+  { label: '模拟干燥设备03', value: 'device-02' },
+  { label: '模拟干燥设备02', value: 'device-03' },
+  { label: '成型模拟设备05', value: 'device-04' },
+  { label: '成型模拟设备04', value: 'device-05' },
+  { label: '模拟干燥设备', value: 'device-06' },
+  { label: '成型模拟设备02', value: 'device-07' },
+  { label: '成型模拟设备01', value: 'device-08' },
+  { label: '物流输送设备01', value: 'device-09' },
+  { label: '包装工作站02', value: 'device-10' },
+  { label: '包装工作站03', value: 'device-11' },
+  { label: '拧紧设备01', value: 'device-12' },
+  { label: '视觉检测设备01', value: 'device-13' }
+]
+
+const shiftTimeline = (segments: Array<{ status: RunStatus; startHour: number; endHour: number }>, offset: number) =>
+  segments.map((segment, index) => {
+    let nextStart = segment.startHour + offset
+    let nextEnd = segment.endHour + offset
+    if (index === 0 && nextStart < 0) nextStart = 0
+    if (index === segments.length - 1 && nextEnd > 24) nextEnd = 24
+    return {
+      ...segment,
+      startHour: Math.max(0, Math.min(24, Number(nextStart.toFixed(2)))),
+      endHour: Math.max(0, Math.min(24, Number(nextEnd.toFixed(2))))
+    }
+  })
+
+const BASE_SEGMENTS = [
+  { status: 'running' as const, startHour: 0, endHour: 2.7 },
+  { status: 'standby' as const, startHour: 2.7, endHour: 3.1 },
+  { status: 'running' as const, startHour: 3.1, endHour: 6.6 },
+  { status: 'standby' as const, startHour: 6.6, endHour: 7.15 },
+  { status: 'running' as const, startHour: 7.15, endHour: 13.9 },
+  { status: 'standby' as const, startHour: 13.9, endHour: 14.25 },
+  { status: 'offline' as const, startHour: 14.25, endHour: 14.95 },
+  { status: 'running' as const, startHour: 14.95, endHour: 17.45 },
+  { status: 'fault' as const, startHour: 17.45, endHour: 18.15 },
+  { status: 'standby' as const, startHour: 18.15, endHour: 18.8 },
+  { status: 'running' as const, startHour: 18.8, endHour: 20.55 },
+  { status: 'standby' as const, startHour: 20.55, endHour: 20.95 },
+  { status: 'running' as const, startHour: 20.95, endHour: 22.25 },
+  { status: 'offline' as const, startHour: 22.25, endHour: 23.05 },
+  { status: 'running' as const, startHour: 23.05, endHour: 23.7 },
+  { status: 'offline' as const, startHour: 23.7, endHour: 24 }
+]
+
+const TIMELINE_OFFSETS = [0, -0.3, 0.8, -0.5, 0.45, 1.05, -1.1, 0.25, -0.75, 0.6, -0.2, 1.2, -0.45]
+
+export const buildDefaultQueryParams = (): RunOverviewQueryParams => {
+  const start = dayjs().startOf('day')
+  const end = dayjs().endOf('day')
+  return {
+    groupId: GROUP_OPTIONS[0].value,
+    deviceId: '',
+    quickRange: 'today',
+    timeRange: [start.format(DATE_TIME_FORMAT), end.format(DATE_TIME_FORMAT)]
+  }
+}
+
+const toTimelineRows = (): DeviceTimelineRow[] =>
+  DEVICE_OPTIONS.map((device, index) => ({
+    id: device.value,
+    name: device.label,
+    utilizationRate: [82.35, 76.12, 68.54, 75.63, 72.18, 91.24, 65.32, 78.44, 71.05, 83.67, 69.18, 87.42, 74.56][index],
+    segments: shiftTimeline(BASE_SEGMENTS, TIMELINE_OFFSETS[index] || 0)
+  }))
+
+const toHourlyStatus = (summaryFactor: number): HourlyStatusItem[] => {
+  return Array.from({ length: 24 }, (_, hour) => {
+    const runningBase = 74 + Math.sin((hour / 24) * Math.PI * 3) * 14 + summaryFactor * 2
+    const standbyBase = 10 + Math.cos((hour / 24) * Math.PI * 4) * 7
+    const faultBase = 2 + Math.max(0, Math.sin((hour - 5) / 2.2)) * 5
+    const offlineBase = 100 - runningBase - standbyBase - faultBase
+
+    const running = Math.max(48, Math.min(88, Number(runningBase.toFixed(2))))
+    const standby = Math.max(4, Math.min(26, Number(standbyBase.toFixed(2))))
+    const fault = Math.max(1, Math.min(8, Number(faultBase.toFixed(2))))
+    const offline = Number(Math.max(4, 100 - running - standby - fault).toFixed(2))
+
+    return {
+      hour: `${String(hour).padStart(2, '0')}:00`,
+      running,
+      standby,
+      fault,
+      offline
+    }
+  })
+}
+
+const createMetrics = (summaryFactor: number): RunOverviewMetric[] => [
+  {
+    key: 'utilizationRate',
+    icon: 'ep:pie-chart',
+    value: Number((75.42 + summaryFactor * 1.2).toFixed(2)),
+    unit: '%',
+    change: 4.32
+  },
+  {
+    key: 'powerOnRate',
+    icon: 'ep:video-play',
+    value: Number((90.12 + summaryFactor * 0.7).toFixed(2)),
+    unit: '%',
+    change: 2.15
+  },
+  {
+    key: 'faultRate',
+    icon: 'ep:warning',
+    value: Number(Math.max(1.5, 3.21 - summaryFactor * 0.35).toFixed(2)),
+    unit: '%',
+    change: -1.03
+  },
+  {
+    key: 'standbyRate',
+    icon: 'ep:timer',
+    value: Number(Math.max(4, 6.67 - summaryFactor * 0.25).toFixed(2)),
+    unit: '%',
+    change: -1.14
+  }
+]
+
+const createSummary = (summaryFactor: number) => {
+  const running = Number((75.42 + summaryFactor * 1.2).toFixed(2))
+  const standby = Number(Math.max(4, 6.67 - summaryFactor * 0.25).toFixed(2))
+  const fault = Number(Math.max(1.5, 3.21 - summaryFactor * 0.35).toFixed(2))
+  const offline = Number((100 - running - standby - fault).toFixed(2))
+
+  return [
+    { status: 'running' as const, percent: running, hours: Number(((24 * running) / 100).toFixed(2)) },
+    { status: 'standby' as const, percent: standby, hours: Number(((24 * standby) / 100).toFixed(2)) },
+    { status: 'fault' as const, percent: fault, hours: Number(((24 * fault) / 100).toFixed(2)) },
+    { status: 'offline' as const, percent: offline, hours: Number(((24 * offline) / 100).toFixed(2)) }
+  ]
+}
+
+export const buildRunOverviewData = (query: RunOverviewQueryParams): RunOverviewData => {
+  const summaryFactor =
+    query.quickRange === 'today'
+      ? 0
+      : query.quickRange === 'yesterday'
+        ? -0.8
+        : query.quickRange === 'last7Days'
+          ? 1.1
+          : query.quickRange === 'last30Days'
+            ? 0.45
+            : 0.15
+
+  const rows = toTimelineRows()
+  const filteredRows = query.deviceId ? rows.filter((row) => row.id === query.deviceId) : rows
+
+  return {
+    metrics: createMetrics(summaryFactor),
+    hourlyStatus: toHourlyStatus(summaryFactor),
+    summary: createSummary(summaryFactor),
+    timelineRows: filteredRows,
+    totalDevices: filteredRows.length
+  }
+}

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>

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>

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()
 }