diff --git a/src/api/erp/product/unit/index.ts b/src/api/erp/product/unit/index.ts
index 5354dbd1..d0991170 100644
--- a/src/api/erp/product/unit/index.ts
+++ b/src/api/erp/product/unit/index.ts
@@ -57,8 +57,8 @@ export const ProductUnitApi = {
       return await request.get({ url: `/erp/product-unit/flag-list`})
    },
 
-  // 下载用户导入模板
-  importUserTemplate: async () => {
+  // 下载产品主单位导入模板
+  importProductUnitTemplate: async () => {
     return await request.download({ url: '/erp/product-unit/get-import-template' })
   }
 }
diff --git a/src/api/iot/device/index.ts b/src/api/iot/device/index.ts
index 806a7129..d021b322 100644
--- a/src/api/iot/device/index.ts
+++ b/src/api/iot/device/index.ts
@@ -195,6 +195,10 @@ export const DeviceApi = {
   getDeviceAttributeList: async (deviceId: number | string) => {
     return await request.get({ url: `/iot/device/device-attribute/list?deviceId=` + deviceId })
   },
+  // 下载设备属性导入模板
+  importDeviceAttributeTemplate: async () => {
+    return await request.download({ url: '/iot/device/device-attribute/get-import-template' })
+  },
 
   getDeviceContactModelPage: async () => {
     return await request.get({ url: `/iot/device-contact-model/page` })
@@ -219,7 +223,7 @@ export const DeviceApi = {
     return await request.download({ url: `/iot/device-contact-model/export-excel`, params })
   },
 
-  // 获得设备属性
+  // 获得设备点位
   getDeviceAttribute: async (id: number) => {
     return await request.get({ url: `/iot/device-contact-model/get?id=` + id })
   }
diff --git a/src/assets/imgs/dashboard3.png b/src/assets/imgs/dashboard3.png
new file mode 100644
index 00000000..d2125dbd
Binary files /dev/null and b/src/assets/imgs/dashboard3.png differ
diff --git a/src/locales/en.ts b/src/locales/en.ts
index bf7cb218..ec59e64e 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -177,6 +177,60 @@ export default {
       }
     }
   },
+  Dashboard3: {
+    Header: {
+      title: 'Device Operation Overview',
+      subTitle: 'IOT Real-Time Monitoring Center',
+      currentTime: 'Current Time: ',
+      lastUpdate: 'Last Updated: ',
+      refreshRate: 'Refresh: ',
+      refreshRateValue: 'Every {seconds}s'
+    },
+    Metrics: {
+      total: 'Total Devices',
+      online: 'Online',
+      offline: 'Offline',
+      running: 'Running',
+      standby: 'Idle',
+      fault: 'Alarms'
+    },
+    Status: {
+      running: 'Running',
+      standby: 'Idle',
+      fault: 'Alarm',
+      offline: 'Offline'
+    },
+    AlarmBoard: {
+      currentDevice: 'Alarm Device',
+      todayAlarmDuration: 'Today Alarm Duration',
+      lastReportTime: 'Last Reported',
+      alarmPrefix: 'Alarm',
+      empty: 'No alarm devices'
+    },
+    Detail: {
+      title: 'Device Operation Details',
+      carouselText: '{page} · Auto Carousel',
+      columns: {
+        deviceName: 'Device Name',
+        currentStatus: 'Status',
+        runningTime: 'Running Time (Today)',
+        standbyTime: 'Idle Time (Today)',
+        alarmTime: 'Alarm Time (Today)',
+        efficiency: 'Efficiency (Today)'
+      },
+      empty: 'No device operation data'
+    },
+    Charts: {
+      last24Hours: 'Last 24 Hours Operation Rate',
+      last7Days: 'Last 7 Days Operation Rate',
+      averageRate: 'Average: {value}'
+    },
+    Time: {
+      minute: '{minute}m',
+      hour: '{hour}h',
+      hourMinute: '{hour}h {minute}m'
+    }
+  },
   Dashboard8: {
     Header: {
       title: 'Smart Manufacturing Line Task Overview',
@@ -1923,6 +1977,12 @@ export default {
       cancelSuccess: 'Cancel task successfully',
       cancelFail: 'Cancel task failed',
       selectAllDecisionError: 'Please select pass or fail for all pending records first',
+      placeholderInputValue: 'Please input',
+      imageLimitExceed: 'Maximum 3 images',
+      basicInfo: 'Basic Info',
+      cancelReason: 'Cancel Reason',
+      uploading: 'Uploading',
+      save: 'Save',
       selectDecisionError: 'Please select pass or fail for pending records first',
       updateSuccess: 'Update successfully',
       updateFail: 'Update failed',
@@ -4875,6 +4935,7 @@ export default {
       create: 'Create',
       batchDelete: 'Batch Delete',
       export: 'Export',
+      import: 'Import',
 
       placeholderCode: 'Please enter type code',
       placeholderName: 'Please enter type name',
@@ -4999,7 +5060,7 @@ export default {
       create: 'Create',
       batchDelete: 'Batch Delete',
       export: 'Export',
-
+      import: 'Import',
       placeholderDeviceCode: 'Please enter device code',
       placeholderDeviceName: 'Please enter device name',
       placeholderModel: 'Please select device model',
@@ -5029,7 +5090,7 @@ export default {
       dataUnit: 'Unit',
       ratio: 'Ratio',
       remark: 'Remark',
-      deviceAttributeTabLabel: 'Device Attributes',
+      deviceAttributeTabLabel: 'Device Point',
       deviceRuleTabLabel: 'Point Rules',
 
       currentDeviceLabel: 'Current Device: ',
@@ -5076,7 +5137,17 @@ export default {
       messageDeviceInfoMissingForRules: 'Device information is missing, unable to load point rules',
 
       gridView: 'gridView',
-      sudoku: 'sudoku'
+      sudoku: 'sudoku',
+      importDragText: 'Drag file here, or',
+      importClickText: 'click to upload',
+      importUpdateSupport: 'Update existing user data if present',
+      importFormatLimit: 'Only xls, xlsx format files are allowed.',
+      importDownloadTemplate: 'Download template',
+      importFileRequired: 'Please upload file',
+      importSuccessTip:
+        'Upload success: {createCount}; Update success: {updateCount}; Update failed: {failureCount};',
+      importFailed: 'Upload failed, please upload again!',
+      importFileLimit: 'Only one file can be uploaded!'
     },
     RunReport: {
       moduleName: 'Device Operation Report',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 7b7b51e0..57949785 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -177,6 +177,60 @@ export default {
       }
     }
   },
+  Dashboard3: {
+    Header: {
+      title: '设备运行总览大屏标题',
+      subTitle: 'IOT 实时监控中心副标题',
+      currentTime: '当前时间：',
+      lastUpdate: '最后更新：',
+      refreshRate: '刷新频率：',
+      refreshRateValue: '{seconds} 秒刷新'
+    },
+    Metrics: {
+      total: '设备总数',
+      online: '在线',
+      offline: '离线',
+      running: '运行',
+      standby: '空闲',
+      fault: '报警'
+    },
+    Status: {
+      running: '运行',
+      standby: '空闲',
+      fault: '报警',
+      offline: '离线'
+    },
+    AlarmBoard: {
+      currentDevice: '当前报警设备',
+      todayAlarmDuration: '今日累计报警时长',
+      lastReportTime: '最后上报时间',
+      alarmPrefix: '报警',
+      empty: '暂无报警设备'
+    },
+    Detail: {
+      title: '设备运行明细',
+      carouselText: '{page} · 自动轮播',
+      columns: {
+        deviceName: '设备名称',
+        currentStatus: '当前状态',
+        runningTime: '运行时间(今日)',
+        standbyTime: '空闲时间(今日)',
+        alarmTime: '报警时间(今日)',
+        efficiency: '运行效率(今日)'
+      },
+      empty: '暂无设备运行数据'
+    },
+    Charts: {
+      last24Hours: '近 24 小时运行率趋势',
+      last7Days: '近 7 天运行率趋势',
+      averageRate: '平均运行率：{value}'
+    },
+    Time: {
+      minute: '{minute}分',
+      hour: '{hour}小时',
+      hourMinute: '{hour}小时{minute}分'
+    }
+  },
   Dashboard8: {
     Header: {
       title: '智能制造产线任务总览',
@@ -1890,6 +1944,7 @@ export default {
 
     // 工单管理
     WorkOrderManagement: {
+      basicInfo: '基本信息',
       planNo: '单号',
       planType: '类型',
       planTypeInspect: '点检',
@@ -1916,6 +1971,7 @@ export default {
       remark: '备注',
       operate: '操作',
       dialogTitleDefault: '检验结果',
+      cancelReason: '取消原因',
       cancelConfirm: '确认取消选中的任务吗？',
       cancelSuccess: '取消任务成功',
       cancelFail: '取消任务失败',
@@ -1923,6 +1979,8 @@ export default {
       selectDecisionError: '请先为待检测记录选择通过或不通过',
       updateSuccess: '更新成功',
       updateFail: '更新失败',
+      placeholderInputValue: '请输入',
+      uploading: '上传中',
       placeholderPlanNo: '请输入单号',
       placeholderPlanType: '请选择类型',
       placeholderJobStatus: '请选择作业状态',
@@ -4854,7 +4912,7 @@ export default {
       create: '新增',
       batchDelete: '批量删除',
       export: '导出',
-
+      import: '导入',
       placeholderDeviceCode: '请输入设备编号',
       placeholderDeviceName: '请输入设备名称',
       placeholderModel: '请选择设备模型',
@@ -4884,7 +4942,7 @@ export default {
       dataUnit: '单位',
       ratio: '倍率',
       remark: '备注',
-      deviceAttributeTabLabel: '设备属性',
+      deviceAttributeTabLabel: '设备点位',
       deviceRuleTabLabel: '点位规则',
 
       currentDeviceLabel: '当前设备：',
@@ -4931,7 +4989,17 @@ export default {
       messageDeviceInfoMissingForRules: '设备信息缺失，无法加载点位规则',
 
       gridView: '表格视图',
-      sudoku: '九宫格'
+      sudoku: '九宫格',
+      importDragText: '将文件拖到此处，或',
+      importClickText: '点击上传',
+      importUpdateSupport: '是否更新已经存在的用户数据',
+      importFormatLimit: '仅允许导入 xls、xlsx 格式文件。',
+      importDownloadTemplate: '下载模板',
+      importFileRequired: '请上传文件',
+      importSuccessTip:
+        '上传成功数量：{createCount}；更新成功数量：{updateCount}；更新失败数量：{failureCount}；',
+      importFailed: '上传失败，请您重新上传！',
+      importFileLimit: '最多只能上传一个文件！'
     },
     RunReport: {
       moduleName: '设备运行报表',
diff --git a/src/permission.ts b/src/permission.ts
index 427ae0a1..ddfe4b8f 100644
--- a/src/permission.ts
+++ b/src/permission.ts
@@ -81,7 +81,8 @@ const whiteList = [
   '/register',
   '/oauthLogin/gitee',
   '/iot/report/dashboardPage/Dashboard8',
-  '/iot/report/dashboardPage/Dashboard1'
+  '/iot/report/dashboardPage/Dashboard1',
+  '/iot/report/dashboardPage/Dashboard3'
 ]
 
 // 路由加载前
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index f4697dd2..f781c3dc 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -653,6 +653,17 @@ const remainingRouter: AppRouteRecordRaw[] = [
       canTo: true
     }
   },
+  {
+    path: '/iot/report/dashboardPage/Dashboard3',
+    component: () => import('@/views/report/dashboardPage/dashboard1/dashboard3/index.vue'),
+    name: 'IotReportDashboard3',
+    meta: {
+      title: t('Dashboard3.Header.title'),
+      hidden: true,
+      noTagsView: true,
+      canTo: true
+    }
+  },
   {
     path: '/iot',
     component: Layout,
diff --git a/src/views/erp/product/unit/ProductUnitImportForm.vue b/src/views/erp/product/unit/ProductUnitImportForm.vue
index 55d3e426..f6c97a59 100644
--- a/src/views/erp/product/unit/ProductUnitImportForm.vue
+++ b/src/views/erp/product/unit/ProductUnitImportForm.vue
@@ -138,7 +138,7 @@ const handleExceed = (): void => {
 
 /** 下载模板操作 */
 const importTemplate = async () => {
-  const res = await ProductUnitApi.importUserTemplate()
+  const res = await ProductUnitApi.importProductUnitTemplate()
   download.excel(res, '单位导入模版.xls')
 }
 </script>
diff --git a/src/views/iot/device/components/DeviceAttributeImportForm.vue b/src/views/iot/device/components/DeviceAttributeImportForm.vue
new file mode 100644
index 00000000..7c7cd1d0
--- /dev/null
+++ b/src/views/iot/device/components/DeviceAttributeImportForm.vue
@@ -0,0 +1,151 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="t('DataCollection.Device.import')" width="400">
+    <el-upload
+      ref="uploadRef"
+      v-model:file-list="fileList"
+      :action="importUrl + '?updateSupport=' + updateSupport + '&deviceId=' + deviceId"
+      :auto-upload="false"
+      :disabled="formLoading"
+      :headers="uploadHeaders"
+      :limit="1"
+      :on-error="submitFormError"
+      :on-exceed="handleExceed"
+      :on-success="submitFormSuccess"
+
+      accept=".xlsx, .xls"
+      drag
+    >
+      <Icon icon="ep:upload" />
+      <div class="el-upload__text">
+        {{ t('DataCollection.Device.importDragText') }}<em>{{ t('DataCollection.Device.importClickText') }}</em>
+      </div>
+      <template #tip>
+        <div class="el-upload__tip text-center">
+<!--          <div class="el-upload__tip">
+            <el-checkbox v-model="updateSupport" />
+            {{ t('FactoryModeling.ProductUnit.importUpdateSupport') }}
+          </div>-->
+          <span>{{ t('DataCollection.Device.importFormatLimit') }}</span>
+          <el-link
+            :underline="false"
+            style="font-size: 12px; vertical-align: baseline"
+            type="primary"
+            @click="importTemplate"
+          >
+            {{ t('DataCollection.Device.importDownloadTemplate') }}
+          </el-link>
+        </div>
+      </template>
+    </el-upload>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">{{ t('common.ok') }}</el-button>
+      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import * as UserApi from '@/api/system/user'
+import { getAccessToken, getTenantId } from '@/utils/auth'
+import download from '@/utils/download'
+import { DeviceApi } from '@/api/iot/device'
+
+defineOptions({ name: 'DeviceAttributeImportForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const uploadRef = ref()
+const importUrl =
+  import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/iot/device/device-attribute/import'
+const deviceId = ref<number | string>()
+const uploadHeaders = ref() // 上传 Header 头
+const fileList = ref([]) // 文件列表
+const updateSupport = ref(0) // 是否更新已经存在的用户数据
+
+/** 打开弹窗 */
+const open = (id: number | string) => {
+  deviceId.value = id
+  dialogVisible.value = true
+  updateSupport.value = 0
+  fileList.value = []
+  resetForm()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+  if (!deviceId.value) {
+    message.error(t('DataCollection.Device.messageSelectDeviceRequired'))
+    return
+  }
+  if (fileList.value.length == 0) {
+    message.error(t('DataCollection.Device.importFileRequired'))
+    return
+  }
+  // 提交请求
+  uploadHeaders.value = {
+    Authorization: 'Bearer ' + getAccessToken(),
+    'tenantId': getTenantId()
+  }
+  formLoading.value = true
+  uploadRef.value!.submit()
+}
+
+/** 文件上传成功 */
+const emits = defineEmits(['success'])
+const submitFormSuccess = (response: any) => {
+  if (response.code !== 0) {
+    message.error(response.msg)
+    formLoading.value = false
+    return
+  }
+/*  // 拼接提示语
+  const data = response.data
+  let text = t('FactoryModeling.ProductUnit.importSuccessTip', {
+    createCount: data.createUsernames.length,
+    updateCount: data.updateUsernames.length,
+    failureCount: Object.keys(data.failureUsernames).length
+  })
+  for (let username of data.createUsernames) {
+    text += '< ' + username + ' >'
+  }
+  for (const username of data.updateUsernames) {
+    text += '< ' + username + ' >'
+  }
+  for (const username in data.failureUsernames) {
+    text += '< ' + username + ': ' + data.failureUsernames[username] + ' >'
+  }*/
+  message.alert(response.data)
+  formLoading.value = false
+  dialogVisible.value = false
+  // 发送操作成功的事件
+  emits('success')
+}
+
+/** 上传错误提示 */
+const submitFormError = (): void => {
+  message.error(t('DataCollection.Device.importFailed'))
+  formLoading.value = false
+}
+
+/** 重置表单 */
+const resetForm = async (): Promise<void> => {
+  // 重置上传状态和文件
+  formLoading.value = false
+  await nextTick()
+  uploadRef.value?.clearFiles()
+}
+
+/** 文件数超出提示 */
+const handleExceed = (): void => {
+  message.error(t('DataCollection.Device.importFileLimit'))
+}
+
+/** 下载模板操作 */
+const importTemplate = async () => {
+  const res = await DeviceApi.importDeviceAttributeTemplate()
+  download.excel(res, '设备点位导入模版.xls')
+}
+</script>
diff --git a/src/views/iot/device/components/DeviceAttributeList.vue b/src/views/iot/device/components/DeviceAttributeList.vue
index 54bbab93..91550390 100644
--- a/src/views/iot/device/components/DeviceAttributeList.vue
+++ b/src/views/iot/device/components/DeviceAttributeList.vue
@@ -51,6 +51,14 @@
         >
           <Icon icon="ep:plus" class="mr-5px" /> {{ t('DataCollection.Device.create') }}
         </el-button>
+        <el-button
+          type="warning"
+          plain
+          @click="handleImport"
+          v-hasPermi="['iot:device:export']"
+        >
+          <Icon icon="ep:upload" /> {{ t('DataCollection.Device.import') }}
+        </el-button>
         <el-button
           type="success"
           plain
@@ -182,6 +190,9 @@ ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-to
   </ContentWrap>
 
   <DeviceAttributeForm ref="formRef" @success="getList" />
+
+  <!-- 单位导入对话框 -->
+  <DeviceAttributeImportForm ref="importFormRef" @success="getList" />
 </template>
 <script setup lang="ts">
 import { DICT_TYPE } from '@/utils/dict'
@@ -326,6 +337,16 @@ const handleBatchDelete = async () => {
   await handleDelete(selectedIds.value)
 }
 
+/** 导入 */
+const importFormRef = ref()
+const handleImport = () => {
+  if (!props.deviceId) {
+    message.error(t('DataCollection.Device.messageSelectDeviceRequired'))
+    return
+  }
+  importFormRef.value.open(props.deviceId)
+}
+
 /** 导出按钮操作 */
 const handleExport = async () => {
   try {
diff --git a/src/views/mes/workOrderManagement/components/TicketResultDialog.vue b/src/views/mes/workOrderManagement/components/TicketResultDialog.vue
index 56882d3d..e4e1dc4d 100644
--- a/src/views/mes/workOrderManagement/components/TicketResultDialog.vue
+++ b/src/views/mes/workOrderManagement/components/TicketResultDialog.vue
@@ -1,182 +1,209 @@
 <template>
-  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1500px">
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :row-key="getRowKey">
-      <el-table-column
-        type="index"
-        :label="t('EquipmentManagement.WorkOrderManagement.index')"
-        align="center"
-        width="70"
-      />
-      <el-table-column
-        :label="t('EquipmentManagement.WorkOrderManagement.inspectionItemName')"
-        align="center"
-        prop="inspectionItemName"
-        min-width="180"
-       sortable />
-      <el-table-column
-        :label="t('EquipmentManagement.WorkOrderManagement.inspectionMethod')"
-        align="center"
-        prop="inspectionMethod"
-        min-width="140"
-      >
-        <template #default="scope">
-          <dict-tag type="Inspection_method" :value="scope.row.inspectionMethod" />
-        </template>
-      </el-table-column>
-      <el-table-column
-        :label="t('EquipmentManagement.WorkOrderManagement.judgmentCriteria')"
-        align="center"
-        prop="judgmentCriteria"
-        min-width="160"
-      />
-      <el-table-column
-        :label="t('EquipmentManagement.WorkOrderManagement.inspectionResult')"
-        align="center"
-        prop="inspectionResult"
-        width="120"
-      >
-        <template #default="scope">
-          <el-tag v-if="String(scope.row.inspectionResult) === '0'" type="info">
-            {{ t('EquipmentManagement.WorkOrderManagement.jobResultPending') }}
+  <div class="ticket-result-page">
+    <ContentWrap>
+      <div class="ticket-result-header">
+        <el-button @click="handleClose">{{ t('common.back') }}</el-button>
+        <span class="ticket-result-title">{{ pageTitle }}</span>
+      </div>
+
+      <el-descriptions :title="t('EquipmentManagement.WorkOrderManagement.basicInfo')" :column="4" border>
+        <el-descriptions-item :label="t('EquipmentManagement.WorkOrderManagement.planNo')">
+          {{ currentRow?.planNo || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.WorkOrderManagement.deviceName')">
+          {{ currentRow?.deviceName || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.WorkOrderManagement.planType')">
+          <el-tag v-if="String(currentRow?.planType) === '1'" type="primary">
+            {{ t('EquipmentManagement.WorkOrderManagement.planTypeInspect') }}
+          </el-tag>
+          <el-tag v-else-if="String(currentRow?.planType) === '2'" type="success">
+            {{ t('EquipmentManagement.WorkOrderManagement.planTypeMaintain') }}
           </el-tag>
-          <el-tag v-else-if="String(scope.row.inspectionResult) === '1'" type="success">
+          <span v-else>-</span>
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.WorkOrderManagement.jobStatus')">
+          <dict-tag :type="'job_status'" :value="jobStatus" />
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.WorkOrderManagement.configName')">
+          {{ currentRow?.configName || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.WorkOrderManagement.operatorName')">
+          {{ currentRow?.operatorName || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.WorkOrderManagement.taskTime')">
+          {{ formatDisplayTime(currentRow?.taskTime) }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.WorkOrderManagement.taskEndTime')">
+          {{ formatDisplayTime(currentRow?.taskEndTime) }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('EquipmentManagement.WorkOrderManagement.jobResult')">
+          <el-tag v-if="currentRow?.jobResult == '1' || currentRow?.jobResult == 'OK'" type="success">
             {{ t('EquipmentManagement.WorkOrderManagement.jobResultOk') }}
           </el-tag>
-          <el-tag v-else-if="String(scope.row.inspectionResult) === '2'" type="danger">
+          <el-tag v-else-if="currentRow?.jobResult == '2' || currentRow?.jobResult == 'NG'" type="danger">
             {{ t('EquipmentManagement.WorkOrderManagement.jobResultNg') }}
           </el-tag>
           <span v-else>-</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        :label="t('EquipmentManagement.WorkOrderManagement.images')"
-        align="center"
-        prop="images"
-        width="160"
-      >
-        <template #default="scope">
-          <UploadImg
-            v-if="String(scope.row.inspectionResult) === '0'"
-            v-model="imageMap[String(scope.row.id)]"
-            :drag="false" :show-btn-text="false" width="64px" height="64px" />
-          <el-image
-            v-else-if="scope.row.images"
-            :src="parseFirstImage(scope.row.images)"
-            :preview-src-list="parseImages(scope.row.images)" preview-teleported fit="cover"
-            style="width: 64px; height: 64px" />
-          <span v-else>-</span>
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('EquipmentManagement.DvSubject.valueType')" align="center" prop="valueType" width="120" sortable>
-        <template #default="scope">
-          <el-tag
-            v-if="scope.row.valueType !== undefined && scope.row.valueType !== null && String(scope.row.valueType) !== ''"
-            effect="light" :type="getTagType('value_types', scope.row.valueType)"
-            :color="getTagColor('value_types', scope.row.valueType)"
-            :style="getTagStyle('value_types', scope.row.valueType)" disable-transitions>
-            {{ getTagLabel('value_types', scope.row.valueType) }}
-          </el-tag>
-          <span v-else>-</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="输入值" align="center" min-width="200">
-        <template #default="scope">
-          <el-input
-            v-if="String(scope.row.valueType) === '0' || String(scope.row.valueType) === '2'"
-            v-model="scope.row.textInput"
-            :disabled="String(scope.row.inspectionResult) !== '0'"
-            clearable
-            :rows="2"
-            type="textarea"
-            style="resize: both;"
-            placeholder="请输入"
-          />
-          <span v-else>-</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        :label="t('EquipmentManagement.WorkOrderManagement.remark')"
-        align="center"
-        prop="remark"
-        min-width="160"
-      />
-      <el-table-column
-        :label="t('EquipmentManagement.WorkOrderManagement.operate')"
-        align="center"
-        width="200"
-        fixed="right"
-      >
-        <template #default="scope">
-          <el-radio-group v-if="String(scope.row.inspectionResult) === '0'" v-model="decisionMap[String(scope.row.id)]">
-            <el-radio :label="'1'">{{ t('EquipmentManagement.WorkOrderManagement.ok') }}</el-radio>
-            <el-radio :label="'2'">{{ t('EquipmentManagement.WorkOrderManagement.ng') }}</el-radio>
-          </el-radio-group>
-          <span v-else>-</span>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <el-pagination
-      v-show="total > 0"
-      v-model:current-page="queryParams.pageNo"
-      v-model:page-size="queryParams.pageSize"
-      :background="true"
-      :page-sizes="[10, 20, 30, 50, 100]"
-      :pager-count="7"
-      :total="total"
-      class="mt-15px mb-15px flex justify-end"
-      layout="total, sizes, prev, pager, next, jumper"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange" />
-
-    <div v-if="String(jobStatus) === '4'" class="mt-10px text-14px">
-      <span>{{ t('EquipmentManagement.WorkOrderManagement.jobStatus') }}：</span>
-      <dict-tag :type="'job_status'" :value="jobStatus" />
-      <span class="ml-20px">取消原因：</span>
-      <span>{{ cancelReason || '-' }}</span>
-    </div>
-
-    <template #footer>
-      <el-button @click="dialogVisible = false">{{ t('EquipmentManagement.WorkOrderManagement.dialogCancel') }}</el-button>
-      <el-button
-        type="primary"
-        @click="handleSave"
-        :loading="submitLoading"
-        :disabled="submitLoading || !isAllPendingSelected()"
-      >
-        {{ t('EquipmentManagement.WorkOrderManagement.dialogSave') }}
-      </el-button>
-    </template>
-  </Dialog>
+        </el-descriptions-item>
+        <el-descriptions-item v-if="String(jobStatus) === '4'"
+          :label="t('EquipmentManagement.WorkOrderManagement.cancelReason')" :span="3">
+          {{ cancelReason || '-' }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </ContentWrap>
+
+    <ContentWrap>
+      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :row-key="getRowKey">
+        <el-table-column type="index" :label="t('EquipmentManagement.WorkOrderManagement.index')" align="center" width="70" />
+        <el-table-column :label="t('EquipmentManagement.WorkOrderManagement.inspectionItemName')" align="center"
+          prop="inspectionItemName" min-width="200" sortable />
+        <el-table-column :label="t('EquipmentManagement.WorkOrderManagement.inspectionMethod')" align="center"
+          prop="inspectionMethod" min-width="160">
+          <template #default="scope">
+            <dict-tag type="Inspection_method" :value="scope.row.inspectionMethod" />
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('EquipmentManagement.WorkOrderManagement.judgmentCriteria')" align="center"
+          prop="judgmentCriteria" min-width="180" />
+        <el-table-column :label="t('EquipmentManagement.WorkOrderManagement.inspectionResult')" align="center"
+          prop="inspectionResult" min-width="140">
+          <template #default="scope">
+            <el-tag v-if="String(scope.row.inspectionResult) === '0'" type="info">{{
+              t('EquipmentManagement.WorkOrderManagement.jobResultPending') }}</el-tag>
+            <el-tag v-else-if="String(scope.row.inspectionResult) === '1'" type="success">{{
+              t('EquipmentManagement.WorkOrderManagement.jobResultOk') }}</el-tag>
+            <el-tag v-else-if="String(scope.row.inspectionResult) === '2'" type="danger">{{
+              t('EquipmentManagement.WorkOrderManagement.jobResultNg') }}</el-tag>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('EquipmentManagement.WorkOrderManagement.images')" align="center" prop="images" min-width="260">
+          <template #default="scope">
+            <div v-if="String(scope.row.inspectionResult) === '0'" v-loading="isImageUploading(String(scope.row.id))"
+              :element-loading-text="t('EquipmentManagement.WorkOrderManagement.uploading')" class="ticket-result-images"
+              :class="{ 'is-full': (imageMap[String(scope.row.id)] || []).length >= 3 }">
+              <UploadImgs v-model="imageMap[String(scope.row.id)]" :limit="3" width="64px" height="64px"
+                @uploading-change="setImageUploading(String(scope.row.id), $event)" />
+            </div>
+            <div v-else-if="parseImages(scope.row.images).length" class="ticket-result-images">
+              <el-image v-for="image in parseImages(scope.row.images)" :key="image" :src="image"
+                :preview-src-list="parseImages(scope.row.images)" preview-teleported fit="cover"
+                class="ticket-result-image" />
+            </div>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('EquipmentManagement.DvSubject.valueType')" align="center" prop="valueType" width="120" sortable>
+          <template #default="scope">
+            <el-tag
+              v-if="scope.row.valueType !== undefined && scope.row.valueType !== null && String(scope.row.valueType) !== ''"
+              effect="light" :type="getTagType('value_types', scope.row.valueType)"
+              :color="getTagColor('value_types', scope.row.valueType)"
+              :style="getTagStyle('value_types', scope.row.valueType)" disable-transitions>
+              {{ getTagLabel('value_types', scope.row.valueType) }}
+            </el-tag>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('EquipmentManagement.WorkOrderManagement.inputValue')" align="center" min-width="200">
+          <template #default="scope">
+            <el-input
+              v-if="String(scope.row.valueType) === '0' || String(scope.row.valueType) === '2'"
+              v-model="scope.row.textInput"
+              :disabled="String(scope.row.inspectionResult) !== '0'"
+              clearable
+              :rows="2"
+              type="textarea"
+              style="resize: both;"
+              :placeholder="t('EquipmentManagement.WorkOrderManagement.placeholderInputValue')"
+            />
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('EquipmentManagement.WorkOrderManagement.remark')" align="center" prop="remark" min-width="180" />
+        <el-table-column :label="t('EquipmentManagement.WorkOrderManagement.operate')" align="center" width="200" fixed="right">
+          <template #default="scope">
+            <el-radio-group v-if="String(scope.row.inspectionResult) === '0'" v-model="decisionMap[String(scope.row.id)]">
+              <el-radio :label="'1'">{{ t('EquipmentManagement.WorkOrderManagement.ok') }}</el-radio>
+              <el-radio :label="'2'">{{ t('EquipmentManagement.WorkOrderManagement.ng') }}</el-radio>
+            </el-radio-group>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        v-show="total > 0"
+        v-model:current-page="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="total" class="mt-15px mb-15px flex justify-end"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+
+      <div class="ticket-result-footer">
+        <el-button v-if="String(jobStatus) === '0'" type="primary" @click="handleSave" :loading="submitLoading"
+          :disabled="hasImageUploading">
+          {{ t('EquipmentManagement.WorkOrderManagement.dialogSave') }}
+        </el-button>
+      </div>
+    </ContentWrap>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { TicketManagementApi, TicketResultVO } from '@/api/mes/ticketManagement'
+import { formatDate } from '@/utils/formatTime'
 import { getStrDictOptions } from '@/utils/dict'
-import { isHexColor } from '@/utils/color'
 import { useDictStoreWithOut } from '@/store/modules/dict'
+import { TicketManagementApi, TicketResultVO } from '@/api/mes/ticketManagement'
+import { isHexColor } from '@/utils/color'
+import UploadImgs from '@/components/UploadFile/src/UploadImgs.vue'
 
-defineOptions({ name: 'TicketResultDialog' })
-
-const emit = defineEmits(['success'])
-const message = useMessage()
 const { t } = useI18n()
-
+const message = useMessage()
 const dictStore = useDictStoreWithOut()
+
+const props = defineProps<{
+  ticketRow?: any
+  title?: string
+}>()
+
+const emit = defineEmits<{
+  success: []
+  closed: []
+}>()
+
 const dictReady = ref(false)
+const pageTitle = computed(() => props.title || t('EquipmentManagement.WorkOrderManagement.dialogTitleDefault'))
+
+const currentRow = computed(() => props.ticketRow)
+const jobStatus = computed(() => props.ticketRow?.jobStatus)
+const cancelReason = computed(() => props.ticketRow?.cancelReason)
 
-const dialogVisible = ref(false)
-const dialogTitle = ref(t('EquipmentManagement.WorkOrderManagement.dialogTitleDefault'))
 const loading = ref(false)
 const submitLoading = ref(false)
-
 const list = ref<TicketResultVO[]>([])
 const total = ref(0)
 const managementId = ref<number | undefined>(undefined)
-const jobStatus = ref<string | number | undefined>(undefined)
-const cancelReason = ref<string | undefined>(undefined)
 const decisionMap = reactive<Record<string, '1' | '2' | undefined>>({})
-const imageMap = reactive<Record<string, string>>({})
+const imageMap = reactive<Record<string, string[]>>({})
+const imageUploadingMap = reactive<Record<string, boolean>>({})
+
+const hasImageUploading = computed(() => Object.values(imageUploadingMap).some(Boolean))
+
+const setImageUploading = (key: string, value: boolean) => {
+  if (!key) return
+  if (value) {
+    imageUploadingMap[key] = true
+  } else {
+    delete imageUploadingMap[key]
+  }
+}
+
+const isImageUploading = (key: string) => {
+  return !!imageUploadingMap[key]
+}
 
 const getTagDict = (dictType: string, value: any) => {
   if (!dictReady.value) return undefined
@@ -214,33 +241,30 @@ const queryParams = reactive({
   pageSize: 10
 })
 
-const open = async (options: { managementId: number; title?: string; jobStatus?: string | number; cancelReason?: string }) => {
-  dialogVisible.value = true
-  dialogTitle.value = options.title || t('EquipmentManagement.WorkOrderManagement.dialogTitleDefault')
-  managementId.value = options.managementId
-  jobStatus.value = options.jobStatus
-  cancelReason.value = options.cancelReason
+const resetResultState = () => {
   for (const key of Object.keys(decisionMap)) delete decisionMap[key]
   for (const key of Object.keys(imageMap)) delete imageMap[key]
+  for (const key of Object.keys(imageUploadingMap)) delete imageUploadingMap[key]
+  
+  list.value = []
+  total.value = 0
   queryParams.pageNo = 1
-  await getList()
 }
 
-defineExpose({ open })
-
 onMounted(async () => {
   await dictStore.setDictMap()
   dictReady.value = true
 })
 
 const getList = async () => {
-  if (!managementId.value) return
+  const id = managementId.value
+  if (!id) return
   loading.value = true
   try {
     const data = await TicketManagementApi.getTicketResultsPage({
       pageNo: queryParams.pageNo,
       pageSize: queryParams.pageSize,
-      managementId: managementId.value
+      managementId: id
     })
     list.value = data.list
     total.value = data.total
@@ -248,8 +272,8 @@ const getList = async () => {
     for (const row of list.value) {
       const id = row?.id
       if (!id) continue
-      if (row.images && !imageMap[String(id)]) {
-        imageMap[String(id)] = parseFirstImage(row.images)
+      if (!imageMap[String(id)]) {
+        imageMap[String(id)] = parseImages(row.images).slice(0, 3)
       }
     }
   } finally {
@@ -257,6 +281,16 @@ const getList = async () => {
   }
 }
 
+watch(
+  () => props.ticketRow?.id,
+  async (id) => {
+    resetResultState()
+    managementId.value = id
+    if (id) await getList()
+  },
+  { immediate: true }
+)
+
 const handleSizeChange = () => {
   queryParams.pageNo = 1
   getList()
@@ -266,25 +300,16 @@ const handleCurrentChange = () => {
   getList()
 }
 
+
 const handleSave = async () => {
-  const hasUnselected = list.value.some((row) => {
-    if (!row?.id) return false
-    if (String(row.inspectionResult) !== '0') return false
-    const decision = decisionMap[String(row.id)]
-    return !decision
-  })
-  if (hasUnselected) {
-    message.error(t('EquipmentManagement.WorkOrderManagement.selectAllDecisionError'))
-    return
-  }
   const payload: TicketResultVO[] = []
   for (const row of list.value) {
     if (!row?.id) continue
     if (String(row.inspectionResult) !== '0') continue
     const decision = decisionMap[String(row.id)]
     if (!decision) continue
-    const img = imageMap[String(row.id)]
-    payload.push({ ...(row as any), inspectionResult: decision, images: img || row.images })
+    const images = imageMap[String(row.id)]
+    payload.push({ ...(row as any), inspectionResult: decision, images: Array.isArray(images) ? images.join(',') : row.images })
   }
   if (!payload.length) {
     message.error(t('EquipmentManagement.WorkOrderManagement.selectDecisionError'))
@@ -295,7 +320,6 @@ const handleSave = async () => {
     await TicketManagementApi.batchUpdateTicketResults(payload)
     message.success(t('EquipmentManagement.WorkOrderManagement.updateSuccess'))
     emit('success')
-    dialogVisible.value = false
   } catch {
     message.error(t('EquipmentManagement.WorkOrderManagement.updateFail'))
   } finally {
@@ -303,14 +327,12 @@ const handleSave = async () => {
   }
 }
 
-const isAllPendingSelected = () => {
-  for (const row of list.value) {
-    if (!row?.id) continue
-    if (String(row.inspectionResult) !== '0') continue
-    const decision = decisionMap[String(row.id)]
-    if (!decision) return false
-  }
-  return true
+const handleClose = () => {
+  emit('closed')
+}
+
+const formatDisplayTime = (value: any) => {
+  return value ? formatDate(value) : '-'
 }
 
 const getRowKey = (row: TicketResultVO) => {
@@ -326,13 +348,54 @@ const parseImages = (value: any): string[] => {
     .filter(Boolean)
 }
 
-const parseFirstImage = (value: any): string => {
-  return parseImages(value)[0] || ''
-}
 </script>
 
 <style scoped lang="scss">
 :deep(.el-upload) {
   margin: 0 auto;
 }
+
+.ticket-result-images {
+  display: flex;
+  justify-content: center;
+  min-height: 64px;
+}
+
+.ticket-result-images :deep(.el-upload-list--picture-card) {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  gap: 8px;
+}
+
+.ticket-result-images.is-full :deep(.el-upload--picture-card) {
+  display: none;
+}
+
+.ticket-result-image {
+  width: 64px;
+  height: 64px;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 6px;
+  margin-right: 6px;
+}
+
+.ticket-result-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.ticket-result-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.ticket-result-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
 </style>
diff --git a/src/views/mes/workOrderManagement/index.vue b/src/views/mes/workOrderManagement/index.vue
index 8829c880..781dcafe 100644
--- a/src/views/mes/workOrderManagement/index.vue
+++ b/src/views/mes/workOrderManagement/index.vue
@@ -1,4 +1,5 @@
-<template>
+<template>
+  <template v-if="!resultVisible">
   <ContentWrap>
     <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" min-label-width="68px">
       <el-form-item :label="t('EquipmentManagement.WorkOrderManagement.planNo')" prop="planNo">
@@ -193,7 +194,16 @@
     />
   </ContentWrap>
 
-  <TicketResultDialog ref="resultDialogRef" @success="getList" />
+
+  </template>
+
+  <TicketResultDialog
+    v-else
+    :ticket-row="selectedResultRow"
+    :title="resultTitle"
+    @success="handleResultSuccess"
+    @closed="handleResultClosed"
+  />
 </template>
 
 <script setup lang="ts">
@@ -224,6 +234,16 @@ const total = ref(0)
 const selectedIds = ref<number[]>([])
 const cancelLoading = ref(false)
 const exportLoading = ref(false)
+const resultVisible = ref(false)
+const selectedResultRow = ref<TicketManagementVO>()
+const resultTitle = computed(() => {
+  const row = selectedResultRow.value
+  if (!row) return t('EquipmentManagement.WorkOrderManagement.dialogTitleDefault')
+  return row.planNo
+    ? `${t('EquipmentManagement.WorkOrderManagement.dialogTitleDefault')}-${row.planNo}`
+    : t('EquipmentManagement.WorkOrderManagement.dialogTitleDefault')
+})
+
 
 const queryParams = reactive({
   pageNo: 1,
@@ -310,19 +330,23 @@ const handleExport = async () => {
   }
 }
 
-const resultDialogRef = ref<InstanceType<typeof TicketResultDialog>>()
 
-const handleRowClick = async (row: TicketManagementVO, column: any) => {
+const handleRowClick = (row: TicketManagementVO, column: any) => {
   if (column?.type === 'selection') return
   if (!row?.id) return
-  await resultDialogRef.value?.open({
-    managementId: row.id,
-    jobStatus: row.jobStatus,
-    cancelReason: row.cancelReason,
-    title: row.planNo
-      ? `${t('EquipmentManagement.WorkOrderManagement.dialogTitleDefault')}-${row.planNo}`
-      : t('EquipmentManagement.WorkOrderManagement.dialogTitleDefault')
-  })
+  selectedResultRow.value = row
+  resultVisible.value = true
+}
+
+const handleResultClosed = () => {
+  resultVisible.value = false
+  selectedResultRow.value = undefined
+}
+
+const handleResultSuccess = async () => {
+  resultVisible.value = false
+  selectedResultRow.value = undefined
+  await getList()
 }
 
 onMounted(async () => {
diff --git a/src/views/report/dashboardList/index.vue b/src/views/report/dashboardList/index.vue
index 8185705a..61010def 100644
--- a/src/views/report/dashboardList/index.vue
+++ b/src/views/report/dashboardList/index.vue
@@ -153,6 +153,7 @@ import request from '@/config/axios'
 import defaultImage from '@/assets/imgs/logo.png'
 import dashboardImage1 from '@/assets/imgs/dashboard1.png'
 import dashboardImage2 from '@/assets/imgs/dashboard2.png'
+import dashboardImage3 from '@/assets/imgs/dashboard3.png'
 import { OrganizationApi } from '@/api/mes/organization'
 import { handleTree } from '@/utils/tree'
 import { DeviceApi } from '@/api/iot/device'
@@ -185,6 +186,7 @@ const total = ref(0)
 const getDashboardImage = (item: DashboardItem) => {
   if (item.type === '2') return dashboardImage1
   if (item.type === '1') return dashboardImage2
+  if (item.type === '3') return dashboardImage3
   return item.indexImage || defaultImage
 }
 
@@ -373,6 +375,7 @@ const openEditDialog = (item: DashboardItem) => {
 const getRouteByType = (type?: string) => {
   if (type === '1') return 'iot/report/dashboardPage/Dashboard1'
   if (type === '2') return 'iot/report/dashboardPage/Dashboard8'
+  if (type === '3') return 'iot/report/dashboardPage/Dashboard3'
   return ''
 }
 
diff --git a/src/views/report/dashboardPage/dashboard1/dashboard3/index.vue b/src/views/report/dashboardPage/dashboard1/dashboard3/index.vue
new file mode 100644
index 00000000..f5f90dc5
--- /dev/null
+++ b/src/views/report/dashboardPage/dashboard1/dashboard3/index.vue
@@ -0,0 +1,939 @@
+<template>
+  <div ref="dashboardRef" class="run-dashboard">
+    <div class="bg-grid"></div>
+
+    <header class="dashboard-header">
+      <div class="brand">
+        <div class="brand-icon">
+          <Icon icon="ep:cpu" />
+        </div>
+        <div class="brand-text">{{ t('Header.subTitle') }}</div>
+      </div>
+      <h1>{{ t('Header.title') }}</h1>
+      <div class="header-meta">
+        <div><span>{{ t('Header.currentTime') }}</span>{{ currentTime }}</div>
+        <div><span>{{ t('Header.lastUpdate') }}</span>{{ lastUpdateTime || '-' }}</div>
+        <div class="refresh-row">
+          <span>{{ t('Header.refreshRate') }}</span>{{ t('Header.refreshRateValue', { seconds: 15 }) }}
+          <button type="button" class="screen-btn" @click="toggleFullscreen">
+            <Icon :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'" />
+          </button>
+        </div>
+      </div>
+    </header>
+
+    <main class="dashboard-main">
+      <section class="top-row">
+        <div
+          v-for="card in statusCards"
+          :key="card.key"
+          class="metric-card"
+          :class="`metric-card--${card.tone}`"
+        >
+          <div class="metric-title">
+            <Icon :icon="card.icon" />
+            <span>{{ card.label }}</span>
+          </div>
+          <div class="metric-value">
+            <strong>{{ card.value }}</strong>
+            <span v-if="card.percent !== undefined">{{ formatPercent(card.percent) }}</span>
+          </div>
+        </div>
+
+        <div class="alarm-board panel">
+          <div class="alarm-head">
+            <span>{{ t('AlarmBoard.currentDevice') }}</span>
+            <span>{{ t('AlarmBoard.todayAlarmDuration') }}</span>
+            <span>{{ t('AlarmBoard.lastReportTime') }}</span>
+          </div>
+          <div v-if="alarmDevices.length" class="alarm-list">
+            <div v-for="item in alarmDevices" :key="item.id" class="alarm-item">
+              <strong :title="item.name">{{ item.name }}</strong>
+              <span>{{ t('AlarmBoard.alarmPrefix') }} {{ formatMinutes(item.alarmMinutes) }}</span>
+              <span>{{ item.lastReportTime }}</span>
+            </div>
+          </div>
+          <div v-else class="empty-line">{{ t('AlarmBoard.empty') }}</div>
+        </div>
+      </section>
+
+      <section class="panel detail-panel">
+        <div class="panel-title">
+          <h2>{{ t('Detail.title') }}</h2>
+          <span>{{ t('Detail.carouselText', { page: detailPageText }) }}</span>
+        </div>
+        <div class="detail-table">
+          <div class="table-header table-row">
+            <span>{{ t('Detail.columns.deviceName') }}</span>
+            <span>{{ t('Detail.columns.currentStatus') }}</span>
+            <span>{{ t('Detail.columns.runningTime') }}</span>
+            <span>{{ t('Detail.columns.standbyTime') }}</span>
+            <span>{{ t('Detail.columns.alarmTime') }}</span>
+            <span>{{ t('Detail.columns.efficiency') }}</span>
+          </div>
+          <div v-if="pagedRows.length" class="table-body">
+            <div
+              v-for="row in pagedRows"
+              :key="row.id"
+              class="table-row"
+              :class="`table-row--${row.status}`"
+            >
+              <strong :title="row.name">{{ row.name }}</strong>
+              <span>
+                <em class="status-pill" :class="`status-pill--${row.status}`">{{ statusText[row.status] }}</em>
+              </span>
+              <span>{{ formatMinutes(row.runningMinutes) }}</span>
+              <span>{{ formatMinutes(row.standbyMinutes) }}</span>
+              <span>{{ formatMinutes(row.alarmMinutes) }}</span>
+              <span class="rate">{{ formatPercent(row.utilizationRate) }}</span>
+            </div>
+          </div>
+          <div v-else class="empty-table">{{ t('Detail.empty') }}</div>
+        </div>
+      </section>
+
+      <section class="chart-row">
+        <div class="panel chart-panel">
+          <div class="panel-title">
+            <h2>{{ t('Charts.last24Hours') }}</h2>
+            <span>{{ t('Charts.averageRate', { value: formatPercent(todayAverageRate) }) }}</span>
+          </div>
+          <div ref="hourChartRef" class="chart"></div>
+        </div>
+        <div class="panel chart-panel">
+          <div class="panel-title">
+            <h2>{{ t('Charts.last7Days') }}</h2>
+            <span>{{ t('Charts.averageRate', { value: formatPercent(sevenDayAverageRate) }) }}</span>
+          </div>
+          <div ref="weekChartRef" class="chart"></div>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import { useFullscreen } from '@vueuse/core'
+import * as echarts from 'echarts'
+import type { EChartsOption } from 'echarts'
+import { DeviceOperationOverviewApi } from '@/api/iot/deviceOperationOverview'
+import type { DeviceOperationOverviewRespVO, DeviceOperationOverviewTimelineRowVO } from '@/api/iot/deviceOperationOverview'
+import { OrganizationApi } from '@/api/mes/organization'
+
+defineOptions({ name: 'IotReportDashboard3' })
+
+const { t } = useI18n('Dashboard3')
+
+type RunStatus = 'running' | 'standby' | 'fault' | 'offline'
+
+interface OrganizationFilterItem {
+  id: string
+  parentId?: string | null
+  dvId?: number | string | null
+  machineName?: string
+}
+
+interface DetailRow {
+  id: string
+  name: string
+  status: RunStatus
+  runningMinutes: number
+  standbyMinutes: number
+  alarmMinutes: number
+  utilizationRate: number
+  lastReportTime: string
+}
+
+const route = useRoute()
+const dashboardRef = ref<HTMLElement>()
+const { isFullscreen, toggle: toggleFullscreen } = useFullscreen(dashboardRef)
+const currentTime = ref('')
+const lastUpdateTime = ref('')
+const overviewData = ref<DeviceOperationOverviewRespVO>({
+  metrics: [],
+  hourlyStatus: [],
+  summary: [],
+  summaryTotalHours: 0,
+  timelineRows: [],
+  totalDevices: 0
+})
+const weekTrend = ref<{ date: string; rate: number }[]>([])
+const detailPage = ref(1)
+const detailPageSize = 8
+const organizationList = ref<OrganizationFilterItem[]>([])
+const hourChartRef = ref<HTMLElement | null>(null)
+const weekChartRef = ref<HTMLElement | null>(null)
+let hourChart: echarts.ECharts | null = null
+let weekChart: echarts.ECharts | null = null
+let clockTimer: number | undefined
+let refreshTimer: number | undefined
+let carouselTimer: number | undefined
+
+const statusText = computed<Record<RunStatus, string>>(() => ({
+  running: t('Status.running'),
+  standby: t('Status.standby'),
+  fault: t('Status.fault'),
+  offline: t('Status.offline')
+}))
+
+const metricValueMap = computed(() => {
+  return overviewData.value.metrics.reduce<Record<string, number>>((acc, item) => {
+    acc[item.key] = Number(item.value) || 0
+    return acc
+  }, {})
+})
+
+const getMetricValue = (keys: string[]) => {
+  const foundKey = keys.find((key) => metricValueMap.value[key] !== undefined)
+  return foundKey ? metricValueMap.value[foundKey] : undefined
+}
+
+const summaryMap = computed(() => {
+  return overviewData.value.summary.reduce<Record<string, number>>((acc, item) => {
+    acc[item.status] = Number(item.percent) || 0
+    return acc
+  }, {})
+})
+
+const statusCards = computed(() => [
+  {
+    key: 'total',
+    label: t('Metrics.total'),
+    icon: 'ep:connection',
+    value:
+      overviewData.value.totalDevices ||
+      getMetricValue(['total', 'deviceTotal', 'totalDevices']) ||
+      overviewData.value.timelineRows.length,
+    tone: 'total'
+  },
+  {
+    key: 'online',
+    label: t('Metrics.online'),
+    icon: 'ep:cpu',
+    value: Math.max(0, totalDeviceCount.value - offlineDeviceCount.value),
+    percent: 100 - (summaryMap.value.offline || 0),
+    tone: 'online'
+  },
+  {
+    key: 'offline',
+    label: t('Metrics.offline'),
+    icon: 'ep:link',
+    value: offlineDeviceCount.value,
+    percent: summaryMap.value.offline || 0,
+    tone: 'offline'
+  },
+  {
+    key: 'running',
+    label: t('Metrics.running'),
+    icon: 'ep:video-play',
+    value: getMetricValue(['running', 'run', 'runningDevices']) ?? getRowsByStatus('running').length,
+    percent: summaryMap.value.running || 0,
+    tone: 'running'
+  },
+  {
+    key: 'standby',
+    label: t('Metrics.standby'),
+    icon: 'ep:video-pause',
+    value: getMetricValue(['standby', 'idle', 'standbyDevices']) ?? getRowsByStatus('standby').length,
+    percent: summaryMap.value.standby || 0,
+    tone: 'standby'
+  },
+  {
+    key: 'fault',
+    label: t('Metrics.fault'),
+    icon: 'ep:bell',
+    value: getMetricValue(['fault', 'alarm', 'faultDevices']) ?? getRowsByStatus('fault').length,
+    percent: summaryMap.value.fault || 0,
+    tone: 'fault'
+  }
+])
+
+const detailRows = computed<DetailRow[]>(() => {
+  return overviewData.value.timelineRows.map((row) => {
+    const minutes = calcMinutes(row)
+    const status = getCurrentStatus(row)
+    return {
+      id: String(row.id),
+      name: row.name || '-',
+      status,
+      runningMinutes: minutes.running,
+      standbyMinutes: minutes.standby,
+      alarmMinutes: minutes.fault,
+      utilizationRate: Number(row.utilizationRate) || 0,
+      lastReportTime: status === 'fault' || minutes.fault > 0 ? lastUpdateTime.value || '-' : '-'
+    }
+  })
+})
+
+const totalDetailPages = computed(() => Math.max(1, Math.ceil(detailRows.value.length / detailPageSize)))
+const totalDeviceCount = computed(
+  () =>
+    overviewData.value.totalDevices ||
+    getMetricValue(['total', 'deviceTotal', 'totalDevices']) ||
+    detailRows.value.length
+)
+const offlineDeviceCount = computed(
+  () => getMetricValue(['offline', 'offlineDevices']) ?? getRowsByStatus('offline').length
+)
+const pagedRows = computed(() => {
+  const start = (detailPage.value - 1) * detailPageSize
+  return detailRows.value.slice(start, start + detailPageSize)
+})
+const detailPageText = computed(() => `${detailPage.value} / ${totalDetailPages.value}`)
+const alarmDevices = computed(() => {
+  return detailRows.value
+    .filter((item) => item.status === 'fault' || item.alarmMinutes > 0)
+    .sort((a, b) => b.alarmMinutes - a.alarmMinutes)
+    .slice(0, 2)
+})
+const hourlyRates = computed(() =>
+  overviewData.value.hourlyStatus.map((item) => {
+    const total = item.running + item.standby + item.fault + item.offline
+    return {
+      hour: item.hour,
+      rate: total > 0 ? Number(((item.running / total) * 100).toFixed(1)) : 0
+    }
+  })
+)
+const todayAverageRate = computed(() => average(hourlyRates.value.map((item) => item.rate)))
+const sevenDayAverageRate = computed(() => average(weekTrend.value.map((item) => item.rate)))
+
+const formatPercent = (value?: number) => `${Number(value || 0).toFixed(1)}%`
+
+const formatMinutes = (minutes: number) => {
+  const safeMinutes = Math.max(0, Math.round(minutes || 0))
+  const hours = Math.floor(safeMinutes / 60)
+  const rest = safeMinutes % 60
+  if (!hours) return t('Time.minute', { minute: rest })
+  if (!rest) return t('Time.hour', { hour: hours })
+  return t('Time.hourMinute', { hour: hours, minute: rest })
+}
+
+const average = (values: number[]) => {
+  const valid = values.filter((item) => Number.isFinite(item))
+  if (!valid.length) return 0
+  return Number((valid.reduce((sum, item) => sum + item, 0) / valid.length).toFixed(1))
+}
+
+const getRowsByStatus = (status: RunStatus) => detailRows.value.filter((row) => row.status === status)
+
+const getCurrentStatus = (row: DeviceOperationOverviewTimelineRowVO): RunStatus => {
+  const currentHour = dayjs().hour() + dayjs().minute() / 60
+  const currentSegment = row.segments?.find((item) => currentHour >= item.startHour && currentHour < item.endHour)
+  return currentSegment?.status || row.segments?.[row.segments.length - 1]?.status || 'offline'
+}
+
+const calcMinutes = (row: DeviceOperationOverviewTimelineRowVO) => {
+  return (row.segments || []).reduce<Record<RunStatus, number>>(
+    (acc, segment) => {
+      const minutes = Math.max(0, (Number(segment.endHour) - Number(segment.startHour)) * 60)
+      acc[segment.status] += minutes
+      return acc
+    },
+    { running: 0, standby: 0, fault: 0, offline: 0 }
+  )
+}
+
+const updateClock = () => {
+  currentTime.value = dayjs().format('YYYY/M/D HH:mm:ss')
+}
+
+const childrenByParentId = computed(() => {
+  return organizationList.value.reduce<Record<string, OrganizationFilterItem[]>>((acc, item) => {
+    const parentKey = String(item.parentId ?? 0)
+    if (!acc[parentKey]) acc[parentKey] = []
+    acc[parentKey].push(item)
+    return acc
+  }, {})
+})
+
+const collectDeviceIdsByOrg = (orgId?: string) => {
+  const deviceIds = new Set<string>()
+  const pushDevice = (node?: OrganizationFilterItem) => {
+    if (node?.dvId) deviceIds.add(String(node.dvId))
+  }
+  if (!orgId) {
+    organizationList.value.forEach(pushDevice)
+    return Array.from(deviceIds)
+  }
+  const queue = [orgId]
+  while (queue.length) {
+    const currentId = queue.shift() as string
+    const current = organizationList.value.find((item) => item.id === currentId)
+    pushDevice(current)
+    ;(childrenByParentId.value[currentId] || []).forEach((child) => queue.push(child.id))
+  }
+  return Array.from(deviceIds)
+}
+
+const getDeviceIds = () => {
+  const routeIds = String(route.query.ids || route.query.deviceIds || '')
+    .split(',')
+    .map((item) => item.trim())
+    .filter(Boolean)
+  if (routeIds.length) return routeIds
+  return collectDeviceIdsByOrg(route.query.orgId ? String(route.query.orgId) : undefined)
+}
+
+const buildParams = (startTime: string, endTime: string, pageSize = 1000) => ({
+  ids: getDeviceIds().join(','),
+  startTime,
+  endTime,
+  timelinePageNo: 1,
+  timelinePageSize: pageSize
+})
+
+const loadOrganizationList = async () => {
+  const data = await OrganizationApi.getOrganizationList()
+  organizationList.value = Array.isArray(data)
+    ? data.map((item: any) => ({
+        id: String(item.id),
+        parentId: item.parentId != null ? String(item.parentId) : item.parentId,
+        dvId: item.dvId,
+        machineName: item.machineName
+      }))
+    : []
+}
+
+const refreshTodayData = async () => {
+  const start = dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss')
+  const end = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')
+  const response = await DeviceOperationOverviewApi.getRunOverview(buildParams(start, end))
+  overviewData.value = {
+    metrics: response?.metrics || [],
+    hourlyStatus: response?.hourlyStatus || [],
+    summary: response?.summary || [],
+    summaryTotalHours: response?.summaryTotalHours || 0,
+    timelineRows: response?.timelineRows || [],
+    totalDevices: response?.totalDevices || 0
+  }
+  lastUpdateTime.value = dayjs().format('YYYY/M/D HH:mm:ss')
+}
+
+const refreshWeekTrend = async () => {
+  const requests = Array.from({ length: 7 }).map((_, index) => {
+    const date = dayjs().subtract(6 - index, 'day')
+    return DeviceOperationOverviewApi.getRunOverview(
+      buildParams(date.startOf('day').format('YYYY-MM-DD HH:mm:ss'), date.endOf('day').format('YYYY-MM-DD HH:mm:ss'), 1)
+    ).then((res) => {
+      const running = res?.summary?.find((item) => item.status === 'running')?.percent || 0
+      return {
+        date: date.format('MM-DD'),
+        rate: Number(Number(running).toFixed(1))
+      }
+    })
+  })
+  weekTrend.value = await Promise.all(requests)
+}
+
+const refreshData = async () => {
+  await refreshTodayData()
+  await refreshWeekTrend()
+  renderCharts()
+}
+
+const getLineChartOption = (labels: string[], values: number[]): EChartsOption => ({
+  backgroundColor: 'transparent',
+  tooltip: {
+    trigger: 'axis',
+    valueFormatter: (value) => `${value}%`
+  },
+  grid: { left: 42, right: 24, top: 26, bottom: 32 },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: labels,
+    axisLine: { lineStyle: { color: 'rgba(105, 165, 235, 0.55)' } },
+    axisTick: { show: false },
+    axisLabel: { color: '#a9c8ef', fontSize: 12 }
+  },
+  yAxis: {
+    type: 'value',
+    min: 0,
+    max: 100,
+    axisLabel: { color: '#a9c8ef', formatter: '{value}%' },
+    splitLine: { lineStyle: { color: 'rgba(76, 144, 219, 0.18)' } }
+  },
+  series: [
+    {
+      type: 'line',
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: 5,
+      data: values,
+      lineStyle: { width: 3, color: '#4692ff' },
+      itemStyle: { color: '#54a7ff' },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: 'rgba(70, 146, 255, 0.46)' },
+          { offset: 1, color: 'rgba(70, 146, 255, 0.04)' }
+        ])
+      }
+    }
+  ]
+})
+
+const renderCharts = () => {
+  if (hourChartRef.value && !hourChart) hourChart = echarts.init(hourChartRef.value, 'dark', { renderer: 'canvas' })
+  if (weekChartRef.value && !weekChart) weekChart = echarts.init(weekChartRef.value, 'dark', { renderer: 'canvas' })
+  hourChart?.setOption(
+    getLineChartOption(
+      hourlyRates.value.map((item) => item.hour),
+      hourlyRates.value.map((item) => item.rate)
+    )
+  )
+  weekChart?.setOption(
+    getLineChartOption(
+      weekTrend.value.map((item) => item.date),
+      weekTrend.value.map((item) => item.rate)
+    )
+  )
+}
+
+const resizeCharts = () => {
+  hourChart?.resize()
+  weekChart?.resize()
+}
+
+onMounted(async () => {
+  updateClock()
+  clockTimer = window.setInterval(updateClock, 1000)
+  await loadOrganizationList()
+  await refreshData()
+  refreshTimer = window.setInterval(() => {
+    void refreshData()
+  }, 15000)
+  carouselTimer = window.setInterval(() => {
+    detailPage.value = detailPage.value >= totalDetailPages.value ? 1 : detailPage.value + 1
+  }, 5000)
+  window.addEventListener('resize', resizeCharts)
+})
+
+onUnmounted(() => {
+  if (clockTimer) window.clearInterval(clockTimer)
+  if (refreshTimer) window.clearInterval(refreshTimer)
+  if (carouselTimer) window.clearInterval(carouselTimer)
+  window.removeEventListener('resize', resizeCharts)
+  hourChart?.dispose()
+  weekChart?.dispose()
+})
+</script>
+
+<style scoped>
+.run-dashboard {
+  --bg: #03142d;
+  --panel: rgb(10 44 88 / 82%);
+  --panel-deep: rgb(6 27 61 / 88%);
+  --line: rgb(47 129 222 / 62%);
+  --text: #eef6ff;
+  --muted: #91b7e5;
+  --blue: #49a0ff;
+  --green: #40f06d;
+  --red: #ff4d5b;
+  --gray: #aec0d7;
+
+  position: relative;
+  width: 100%;
+  min-width: 1366px;
+  min-height: 100vh;
+  overflow: hidden;
+  font-family: "Microsoft Yahei", "PingFang SC", Arial, sans-serif;
+  color: var(--text);
+  background:
+    radial-gradient(circle at 50% 0, rgb(21 88 157 / 38%), transparent 34%),
+    linear-gradient(180deg, #061a38 0%, #041329 48%, #031026 100%);
+}
+
+.bg-grid {
+  position: absolute;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgb(42 122 204 / 16%) 1px, transparent 1px),
+    linear-gradient(90deg, rgb(42 122 204 / 16%) 1px, transparent 1px);
+  background-size: 96px 40px;
+  inset: 0;
+}
+
+.dashboard-header {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  height: 86px;
+  padding: 12px 24px 8px;
+  grid-template-columns: 360px 1fr 360px;
+  align-items: start;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #c7dcf6;
+  font-size: 18px;
+}
+
+.brand-icon {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  color: #8cd3ff;
+  background: rgb(78 157 255 / 16%);
+  border: 1px solid rgb(93 177 255 / 40%);
+  border-radius: 6px;
+  place-items: center;
+}
+
+.dashboard-header h1 {
+  margin: 0;
+  color: #fff;
+  font-size: 42px;
+  font-weight: 800;
+  line-height: 1.15;
+  text-align: center;
+  text-shadow: 0 0 12px rgb(105 178 255 / 86%);
+  letter-spacing: 0;
+}
+
+.header-meta {
+  justify-self: end;
+  color: #b6d0ef;
+  font-size: 14px;
+  line-height: 1.75;
+}
+
+.header-meta span {
+  color: #fff;
+  font-weight: 700;
+}
+
+.refresh-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.screen-btn {
+  display: inline-grid;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  color: #8fc7ff;
+  cursor: pointer;
+  background: rgb(16 62 116 / 80%);
+  border: 1px solid rgb(77 151 232 / 70%);
+  border-radius: 4px;
+  place-items: center;
+}
+
+.dashboard-main {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  height: calc(100vh - 86px);
+  min-height: 820px;
+  padding: 8px 24px 16px;
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.top-row {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(150px, 1fr)) 2fr;
+  gap: 10px;
+}
+
+.panel,
+.metric-card {
+  background: linear-gradient(135deg, var(--panel), var(--panel-deep));
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  box-shadow: inset 0 0 24px rgb(34 113 203 / 18%);
+}
+
+.metric-card {
+  height: 120px;
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+.metric-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #d7e9ff;
+  font-size: 16px;
+}
+
+.metric-title .iconify {
+  font-size: 22px;
+}
+
+.metric-value {
+  display: flex;
+  margin-top: 16px;
+  align-items: baseline;
+  gap: 18px;
+}
+
+.metric-value strong {
+  font-size: 40px;
+  line-height: 1;
+}
+
+.metric-value span {
+  color: #a8bfdd;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.metric-card--online .metric-value strong,
+.metric-card--running .metric-value strong,
+.metric-card--online .metric-title,
+.metric-card--running .metric-title {
+  color: var(--green);
+}
+
+.metric-card--offline .metric-value strong,
+.metric-card--offline .metric-title {
+  color: var(--gray);
+}
+
+.metric-card--standby .metric-value strong,
+.metric-card--standby .metric-title {
+  color: var(--blue);
+}
+
+.metric-card--fault {
+  border-color: rgb(255 67 84 / 86%);
+}
+
+.metric-card--fault .metric-value strong,
+.metric-card--fault .metric-title {
+  color: var(--red);
+}
+
+.alarm-board {
+  height: 120px;
+  padding: 12px;
+  box-sizing: border-box;
+}
+
+.alarm-head,
+.alarm-item {
+  display: grid;
+  grid-template-columns: 1.1fr 1fr 1fr;
+  align-items: center;
+  gap: 8px;
+}
+
+.alarm-head {
+  color: #fff;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.alarm-list {
+  display: flex;
+  margin-top: 8px;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.alarm-item {
+  height: 30px;
+  padding: 0 8px;
+  overflow: hidden;
+  color: #e8f2ff;
+  background: linear-gradient(90deg, rgb(102 25 56 / 76%), rgb(33 31 69 / 52%));
+  border: 1px solid rgb(255 64 82 / 52%);
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.alarm-item strong {
+  overflow: hidden;
+  color: #fff;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.alarm-item span:nth-child(2) {
+  color: #ff5365;
+  font-weight: 700;
+  text-align: center;
+}
+
+.alarm-item span:nth-child(3) {
+  color: #d7aab4;
+  text-align: right;
+}
+
+.empty-line,
+.empty-table {
+  display: grid;
+  height: 100%;
+  color: var(--muted);
+  place-items: center;
+}
+
+.detail-panel {
+  min-height: 0;
+  padding: 14px 16px;
+  flex: 1.25;
+}
+
+.panel-title {
+  display: flex;
+  height: 30px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.panel-title h2 {
+  margin: 0;
+  color: #fff;
+  font-size: 22px;
+  font-weight: 800;
+}
+
+.panel-title span {
+  color: #89bdf5;
+  font-size: 14px;
+}
+
+.detail-table {
+  display: flex;
+  height: calc(100% - 34px);
+  min-height: 0;
+  flex-direction: column;
+}
+
+.table-row {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1.4fr 1.4fr 1.4fr 1.4fr;
+  min-height: 43px;
+  padding: 0 14px;
+  align-items: center;
+  gap: 12px;
+  border-bottom: 1px solid rgb(60 134 212 / 35%);
+}
+
+.table-header {
+  min-height: 44px;
+  color: #98bee8;
+  font-size: 14px;
+}
+
+.table-body {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.table-body .table-row {
+  color: #dcecff;
+  background: rgb(12 52 98 / 42%);
+  border: 1px solid rgb(60 134 212 / 48%);
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+.table-row strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.table-row--fault {
+  color: #ff5768;
+  background: linear-gradient(90deg, rgb(108 27 58 / 82%), rgb(11 39 83 / 46%)) !important;
+  border-color: rgb(255 64 82 / 80%) !important;
+}
+
+.table-row--running strong,
+.table-row--running .rate {
+  color: var(--green);
+}
+
+.table-row--offline strong {
+  color: #96adca;
+}
+
+.rate {
+  color: #54a7ff;
+  font-weight: 800;
+}
+
+.status-pill {
+  display: inline-flex;
+  min-width: 42px;
+  height: 24px;
+  padding: 0 10px;
+  font-style: normal;
+  border: 1px solid currentcolor;
+  border-radius: 13px;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-pill--running {
+  color: var(--green);
+  background: rgb(34 197 94 / 12%);
+}
+
+.status-pill--standby {
+  color: var(--blue);
+  background: rgb(59 130 246 / 12%);
+}
+
+.status-pill--fault {
+  color: var(--red);
+  background: rgb(239 68 68 / 14%);
+}
+
+.status-pill--offline {
+  color: #b5c4d9;
+  background: rgb(148 163 184 / 14%);
+}
+
+.chart-row {
+  display: grid;
+  min-height: 280px;
+  flex: 0.9;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.chart-panel {
+  min-height: 0;
+  padding: 14px 16px;
+}
+
+.chart {
+  width: 100%;
+  height: calc(100% - 34px);
+  min-height: 220px;
+}
+
+@media (width <= 1600px) {
+  .dashboard-header h1 {
+    font-size: 34px;
+  }
+
+  .dashboard-header {
+    grid-template-columns: 310px 1fr 320px;
+  }
+
+  .metric-card {
+    padding: 14px 12px;
+  }
+
+  .metric-value strong {
+    font-size: 34px;
+  }
+}
+</style>
diff --git a/src/views/report/dashboardPage/dashboard3/index.vue b/src/views/report/dashboardPage/dashboard3/index.vue
new file mode 100644
index 00000000..f5f90dc5
--- /dev/null
+++ b/src/views/report/dashboardPage/dashboard3/index.vue
@@ -0,0 +1,939 @@
+<template>
+  <div ref="dashboardRef" class="run-dashboard">
+    <div class="bg-grid"></div>
+
+    <header class="dashboard-header">
+      <div class="brand">
+        <div class="brand-icon">
+          <Icon icon="ep:cpu" />
+        </div>
+        <div class="brand-text">{{ t('Header.subTitle') }}</div>
+      </div>
+      <h1>{{ t('Header.title') }}</h1>
+      <div class="header-meta">
+        <div><span>{{ t('Header.currentTime') }}</span>{{ currentTime }}</div>
+        <div><span>{{ t('Header.lastUpdate') }}</span>{{ lastUpdateTime || '-' }}</div>
+        <div class="refresh-row">
+          <span>{{ t('Header.refreshRate') }}</span>{{ t('Header.refreshRateValue', { seconds: 15 }) }}
+          <button type="button" class="screen-btn" @click="toggleFullscreen">
+            <Icon :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'" />
+          </button>
+        </div>
+      </div>
+    </header>
+
+    <main class="dashboard-main">
+      <section class="top-row">
+        <div
+          v-for="card in statusCards"
+          :key="card.key"
+          class="metric-card"
+          :class="`metric-card--${card.tone}`"
+        >
+          <div class="metric-title">
+            <Icon :icon="card.icon" />
+            <span>{{ card.label }}</span>
+          </div>
+          <div class="metric-value">
+            <strong>{{ card.value }}</strong>
+            <span v-if="card.percent !== undefined">{{ formatPercent(card.percent) }}</span>
+          </div>
+        </div>
+
+        <div class="alarm-board panel">
+          <div class="alarm-head">
+            <span>{{ t('AlarmBoard.currentDevice') }}</span>
+            <span>{{ t('AlarmBoard.todayAlarmDuration') }}</span>
+            <span>{{ t('AlarmBoard.lastReportTime') }}</span>
+          </div>
+          <div v-if="alarmDevices.length" class="alarm-list">
+            <div v-for="item in alarmDevices" :key="item.id" class="alarm-item">
+              <strong :title="item.name">{{ item.name }}</strong>
+              <span>{{ t('AlarmBoard.alarmPrefix') }} {{ formatMinutes(item.alarmMinutes) }}</span>
+              <span>{{ item.lastReportTime }}</span>
+            </div>
+          </div>
+          <div v-else class="empty-line">{{ t('AlarmBoard.empty') }}</div>
+        </div>
+      </section>
+
+      <section class="panel detail-panel">
+        <div class="panel-title">
+          <h2>{{ t('Detail.title') }}</h2>
+          <span>{{ t('Detail.carouselText', { page: detailPageText }) }}</span>
+        </div>
+        <div class="detail-table">
+          <div class="table-header table-row">
+            <span>{{ t('Detail.columns.deviceName') }}</span>
+            <span>{{ t('Detail.columns.currentStatus') }}</span>
+            <span>{{ t('Detail.columns.runningTime') }}</span>
+            <span>{{ t('Detail.columns.standbyTime') }}</span>
+            <span>{{ t('Detail.columns.alarmTime') }}</span>
+            <span>{{ t('Detail.columns.efficiency') }}</span>
+          </div>
+          <div v-if="pagedRows.length" class="table-body">
+            <div
+              v-for="row in pagedRows"
+              :key="row.id"
+              class="table-row"
+              :class="`table-row--${row.status}`"
+            >
+              <strong :title="row.name">{{ row.name }}</strong>
+              <span>
+                <em class="status-pill" :class="`status-pill--${row.status}`">{{ statusText[row.status] }}</em>
+              </span>
+              <span>{{ formatMinutes(row.runningMinutes) }}</span>
+              <span>{{ formatMinutes(row.standbyMinutes) }}</span>
+              <span>{{ formatMinutes(row.alarmMinutes) }}</span>
+              <span class="rate">{{ formatPercent(row.utilizationRate) }}</span>
+            </div>
+          </div>
+          <div v-else class="empty-table">{{ t('Detail.empty') }}</div>
+        </div>
+      </section>
+
+      <section class="chart-row">
+        <div class="panel chart-panel">
+          <div class="panel-title">
+            <h2>{{ t('Charts.last24Hours') }}</h2>
+            <span>{{ t('Charts.averageRate', { value: formatPercent(todayAverageRate) }) }}</span>
+          </div>
+          <div ref="hourChartRef" class="chart"></div>
+        </div>
+        <div class="panel chart-panel">
+          <div class="panel-title">
+            <h2>{{ t('Charts.last7Days') }}</h2>
+            <span>{{ t('Charts.averageRate', { value: formatPercent(sevenDayAverageRate) }) }}</span>
+          </div>
+          <div ref="weekChartRef" class="chart"></div>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import { useFullscreen } from '@vueuse/core'
+import * as echarts from 'echarts'
+import type { EChartsOption } from 'echarts'
+import { DeviceOperationOverviewApi } from '@/api/iot/deviceOperationOverview'
+import type { DeviceOperationOverviewRespVO, DeviceOperationOverviewTimelineRowVO } from '@/api/iot/deviceOperationOverview'
+import { OrganizationApi } from '@/api/mes/organization'
+
+defineOptions({ name: 'IotReportDashboard3' })
+
+const { t } = useI18n('Dashboard3')
+
+type RunStatus = 'running' | 'standby' | 'fault' | 'offline'
+
+interface OrganizationFilterItem {
+  id: string
+  parentId?: string | null
+  dvId?: number | string | null
+  machineName?: string
+}
+
+interface DetailRow {
+  id: string
+  name: string
+  status: RunStatus
+  runningMinutes: number
+  standbyMinutes: number
+  alarmMinutes: number
+  utilizationRate: number
+  lastReportTime: string
+}
+
+const route = useRoute()
+const dashboardRef = ref<HTMLElement>()
+const { isFullscreen, toggle: toggleFullscreen } = useFullscreen(dashboardRef)
+const currentTime = ref('')
+const lastUpdateTime = ref('')
+const overviewData = ref<DeviceOperationOverviewRespVO>({
+  metrics: [],
+  hourlyStatus: [],
+  summary: [],
+  summaryTotalHours: 0,
+  timelineRows: [],
+  totalDevices: 0
+})
+const weekTrend = ref<{ date: string; rate: number }[]>([])
+const detailPage = ref(1)
+const detailPageSize = 8
+const organizationList = ref<OrganizationFilterItem[]>([])
+const hourChartRef = ref<HTMLElement | null>(null)
+const weekChartRef = ref<HTMLElement | null>(null)
+let hourChart: echarts.ECharts | null = null
+let weekChart: echarts.ECharts | null = null
+let clockTimer: number | undefined
+let refreshTimer: number | undefined
+let carouselTimer: number | undefined
+
+const statusText = computed<Record<RunStatus, string>>(() => ({
+  running: t('Status.running'),
+  standby: t('Status.standby'),
+  fault: t('Status.fault'),
+  offline: t('Status.offline')
+}))
+
+const metricValueMap = computed(() => {
+  return overviewData.value.metrics.reduce<Record<string, number>>((acc, item) => {
+    acc[item.key] = Number(item.value) || 0
+    return acc
+  }, {})
+})
+
+const getMetricValue = (keys: string[]) => {
+  const foundKey = keys.find((key) => metricValueMap.value[key] !== undefined)
+  return foundKey ? metricValueMap.value[foundKey] : undefined
+}
+
+const summaryMap = computed(() => {
+  return overviewData.value.summary.reduce<Record<string, number>>((acc, item) => {
+    acc[item.status] = Number(item.percent) || 0
+    return acc
+  }, {})
+})
+
+const statusCards = computed(() => [
+  {
+    key: 'total',
+    label: t('Metrics.total'),
+    icon: 'ep:connection',
+    value:
+      overviewData.value.totalDevices ||
+      getMetricValue(['total', 'deviceTotal', 'totalDevices']) ||
+      overviewData.value.timelineRows.length,
+    tone: 'total'
+  },
+  {
+    key: 'online',
+    label: t('Metrics.online'),
+    icon: 'ep:cpu',
+    value: Math.max(0, totalDeviceCount.value - offlineDeviceCount.value),
+    percent: 100 - (summaryMap.value.offline || 0),
+    tone: 'online'
+  },
+  {
+    key: 'offline',
+    label: t('Metrics.offline'),
+    icon: 'ep:link',
+    value: offlineDeviceCount.value,
+    percent: summaryMap.value.offline || 0,
+    tone: 'offline'
+  },
+  {
+    key: 'running',
+    label: t('Metrics.running'),
+    icon: 'ep:video-play',
+    value: getMetricValue(['running', 'run', 'runningDevices']) ?? getRowsByStatus('running').length,
+    percent: summaryMap.value.running || 0,
+    tone: 'running'
+  },
+  {
+    key: 'standby',
+    label: t('Metrics.standby'),
+    icon: 'ep:video-pause',
+    value: getMetricValue(['standby', 'idle', 'standbyDevices']) ?? getRowsByStatus('standby').length,
+    percent: summaryMap.value.standby || 0,
+    tone: 'standby'
+  },
+  {
+    key: 'fault',
+    label: t('Metrics.fault'),
+    icon: 'ep:bell',
+    value: getMetricValue(['fault', 'alarm', 'faultDevices']) ?? getRowsByStatus('fault').length,
+    percent: summaryMap.value.fault || 0,
+    tone: 'fault'
+  }
+])
+
+const detailRows = computed<DetailRow[]>(() => {
+  return overviewData.value.timelineRows.map((row) => {
+    const minutes = calcMinutes(row)
+    const status = getCurrentStatus(row)
+    return {
+      id: String(row.id),
+      name: row.name || '-',
+      status,
+      runningMinutes: minutes.running,
+      standbyMinutes: minutes.standby,
+      alarmMinutes: minutes.fault,
+      utilizationRate: Number(row.utilizationRate) || 0,
+      lastReportTime: status === 'fault' || minutes.fault > 0 ? lastUpdateTime.value || '-' : '-'
+    }
+  })
+})
+
+const totalDetailPages = computed(() => Math.max(1, Math.ceil(detailRows.value.length / detailPageSize)))
+const totalDeviceCount = computed(
+  () =>
+    overviewData.value.totalDevices ||
+    getMetricValue(['total', 'deviceTotal', 'totalDevices']) ||
+    detailRows.value.length
+)
+const offlineDeviceCount = computed(
+  () => getMetricValue(['offline', 'offlineDevices']) ?? getRowsByStatus('offline').length
+)
+const pagedRows = computed(() => {
+  const start = (detailPage.value - 1) * detailPageSize
+  return detailRows.value.slice(start, start + detailPageSize)
+})
+const detailPageText = computed(() => `${detailPage.value} / ${totalDetailPages.value}`)
+const alarmDevices = computed(() => {
+  return detailRows.value
+    .filter((item) => item.status === 'fault' || item.alarmMinutes > 0)
+    .sort((a, b) => b.alarmMinutes - a.alarmMinutes)
+    .slice(0, 2)
+})
+const hourlyRates = computed(() =>
+  overviewData.value.hourlyStatus.map((item) => {
+    const total = item.running + item.standby + item.fault + item.offline
+    return {
+      hour: item.hour,
+      rate: total > 0 ? Number(((item.running / total) * 100).toFixed(1)) : 0
+    }
+  })
+)
+const todayAverageRate = computed(() => average(hourlyRates.value.map((item) => item.rate)))
+const sevenDayAverageRate = computed(() => average(weekTrend.value.map((item) => item.rate)))
+
+const formatPercent = (value?: number) => `${Number(value || 0).toFixed(1)}%`
+
+const formatMinutes = (minutes: number) => {
+  const safeMinutes = Math.max(0, Math.round(minutes || 0))
+  const hours = Math.floor(safeMinutes / 60)
+  const rest = safeMinutes % 60
+  if (!hours) return t('Time.minute', { minute: rest })
+  if (!rest) return t('Time.hour', { hour: hours })
+  return t('Time.hourMinute', { hour: hours, minute: rest })
+}
+
+const average = (values: number[]) => {
+  const valid = values.filter((item) => Number.isFinite(item))
+  if (!valid.length) return 0
+  return Number((valid.reduce((sum, item) => sum + item, 0) / valid.length).toFixed(1))
+}
+
+const getRowsByStatus = (status: RunStatus) => detailRows.value.filter((row) => row.status === status)
+
+const getCurrentStatus = (row: DeviceOperationOverviewTimelineRowVO): RunStatus => {
+  const currentHour = dayjs().hour() + dayjs().minute() / 60
+  const currentSegment = row.segments?.find((item) => currentHour >= item.startHour && currentHour < item.endHour)
+  return currentSegment?.status || row.segments?.[row.segments.length - 1]?.status || 'offline'
+}
+
+const calcMinutes = (row: DeviceOperationOverviewTimelineRowVO) => {
+  return (row.segments || []).reduce<Record<RunStatus, number>>(
+    (acc, segment) => {
+      const minutes = Math.max(0, (Number(segment.endHour) - Number(segment.startHour)) * 60)
+      acc[segment.status] += minutes
+      return acc
+    },
+    { running: 0, standby: 0, fault: 0, offline: 0 }
+  )
+}
+
+const updateClock = () => {
+  currentTime.value = dayjs().format('YYYY/M/D HH:mm:ss')
+}
+
+const childrenByParentId = computed(() => {
+  return organizationList.value.reduce<Record<string, OrganizationFilterItem[]>>((acc, item) => {
+    const parentKey = String(item.parentId ?? 0)
+    if (!acc[parentKey]) acc[parentKey] = []
+    acc[parentKey].push(item)
+    return acc
+  }, {})
+})
+
+const collectDeviceIdsByOrg = (orgId?: string) => {
+  const deviceIds = new Set<string>()
+  const pushDevice = (node?: OrganizationFilterItem) => {
+    if (node?.dvId) deviceIds.add(String(node.dvId))
+  }
+  if (!orgId) {
+    organizationList.value.forEach(pushDevice)
+    return Array.from(deviceIds)
+  }
+  const queue = [orgId]
+  while (queue.length) {
+    const currentId = queue.shift() as string
+    const current = organizationList.value.find((item) => item.id === currentId)
+    pushDevice(current)
+    ;(childrenByParentId.value[currentId] || []).forEach((child) => queue.push(child.id))
+  }
+  return Array.from(deviceIds)
+}
+
+const getDeviceIds = () => {
+  const routeIds = String(route.query.ids || route.query.deviceIds || '')
+    .split(',')
+    .map((item) => item.trim())
+    .filter(Boolean)
+  if (routeIds.length) return routeIds
+  return collectDeviceIdsByOrg(route.query.orgId ? String(route.query.orgId) : undefined)
+}
+
+const buildParams = (startTime: string, endTime: string, pageSize = 1000) => ({
+  ids: getDeviceIds().join(','),
+  startTime,
+  endTime,
+  timelinePageNo: 1,
+  timelinePageSize: pageSize
+})
+
+const loadOrganizationList = async () => {
+  const data = await OrganizationApi.getOrganizationList()
+  organizationList.value = Array.isArray(data)
+    ? data.map((item: any) => ({
+        id: String(item.id),
+        parentId: item.parentId != null ? String(item.parentId) : item.parentId,
+        dvId: item.dvId,
+        machineName: item.machineName
+      }))
+    : []
+}
+
+const refreshTodayData = async () => {
+  const start = dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss')
+  const end = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')
+  const response = await DeviceOperationOverviewApi.getRunOverview(buildParams(start, end))
+  overviewData.value = {
+    metrics: response?.metrics || [],
+    hourlyStatus: response?.hourlyStatus || [],
+    summary: response?.summary || [],
+    summaryTotalHours: response?.summaryTotalHours || 0,
+    timelineRows: response?.timelineRows || [],
+    totalDevices: response?.totalDevices || 0
+  }
+  lastUpdateTime.value = dayjs().format('YYYY/M/D HH:mm:ss')
+}
+
+const refreshWeekTrend = async () => {
+  const requests = Array.from({ length: 7 }).map((_, index) => {
+    const date = dayjs().subtract(6 - index, 'day')
+    return DeviceOperationOverviewApi.getRunOverview(
+      buildParams(date.startOf('day').format('YYYY-MM-DD HH:mm:ss'), date.endOf('day').format('YYYY-MM-DD HH:mm:ss'), 1)
+    ).then((res) => {
+      const running = res?.summary?.find((item) => item.status === 'running')?.percent || 0
+      return {
+        date: date.format('MM-DD'),
+        rate: Number(Number(running).toFixed(1))
+      }
+    })
+  })
+  weekTrend.value = await Promise.all(requests)
+}
+
+const refreshData = async () => {
+  await refreshTodayData()
+  await refreshWeekTrend()
+  renderCharts()
+}
+
+const getLineChartOption = (labels: string[], values: number[]): EChartsOption => ({
+  backgroundColor: 'transparent',
+  tooltip: {
+    trigger: 'axis',
+    valueFormatter: (value) => `${value}%`
+  },
+  grid: { left: 42, right: 24, top: 26, bottom: 32 },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: labels,
+    axisLine: { lineStyle: { color: 'rgba(105, 165, 235, 0.55)' } },
+    axisTick: { show: false },
+    axisLabel: { color: '#a9c8ef', fontSize: 12 }
+  },
+  yAxis: {
+    type: 'value',
+    min: 0,
+    max: 100,
+    axisLabel: { color: '#a9c8ef', formatter: '{value}%' },
+    splitLine: { lineStyle: { color: 'rgba(76, 144, 219, 0.18)' } }
+  },
+  series: [
+    {
+      type: 'line',
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: 5,
+      data: values,
+      lineStyle: { width: 3, color: '#4692ff' },
+      itemStyle: { color: '#54a7ff' },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: 'rgba(70, 146, 255, 0.46)' },
+          { offset: 1, color: 'rgba(70, 146, 255, 0.04)' }
+        ])
+      }
+    }
+  ]
+})
+
+const renderCharts = () => {
+  if (hourChartRef.value && !hourChart) hourChart = echarts.init(hourChartRef.value, 'dark', { renderer: 'canvas' })
+  if (weekChartRef.value && !weekChart) weekChart = echarts.init(weekChartRef.value, 'dark', { renderer: 'canvas' })
+  hourChart?.setOption(
+    getLineChartOption(
+      hourlyRates.value.map((item) => item.hour),
+      hourlyRates.value.map((item) => item.rate)
+    )
+  )
+  weekChart?.setOption(
+    getLineChartOption(
+      weekTrend.value.map((item) => item.date),
+      weekTrend.value.map((item) => item.rate)
+    )
+  )
+}
+
+const resizeCharts = () => {
+  hourChart?.resize()
+  weekChart?.resize()
+}
+
+onMounted(async () => {
+  updateClock()
+  clockTimer = window.setInterval(updateClock, 1000)
+  await loadOrganizationList()
+  await refreshData()
+  refreshTimer = window.setInterval(() => {
+    void refreshData()
+  }, 15000)
+  carouselTimer = window.setInterval(() => {
+    detailPage.value = detailPage.value >= totalDetailPages.value ? 1 : detailPage.value + 1
+  }, 5000)
+  window.addEventListener('resize', resizeCharts)
+})
+
+onUnmounted(() => {
+  if (clockTimer) window.clearInterval(clockTimer)
+  if (refreshTimer) window.clearInterval(refreshTimer)
+  if (carouselTimer) window.clearInterval(carouselTimer)
+  window.removeEventListener('resize', resizeCharts)
+  hourChart?.dispose()
+  weekChart?.dispose()
+})
+</script>
+
+<style scoped>
+.run-dashboard {
+  --bg: #03142d;
+  --panel: rgb(10 44 88 / 82%);
+  --panel-deep: rgb(6 27 61 / 88%);
+  --line: rgb(47 129 222 / 62%);
+  --text: #eef6ff;
+  --muted: #91b7e5;
+  --blue: #49a0ff;
+  --green: #40f06d;
+  --red: #ff4d5b;
+  --gray: #aec0d7;
+
+  position: relative;
+  width: 100%;
+  min-width: 1366px;
+  min-height: 100vh;
+  overflow: hidden;
+  font-family: "Microsoft Yahei", "PingFang SC", Arial, sans-serif;
+  color: var(--text);
+  background:
+    radial-gradient(circle at 50% 0, rgb(21 88 157 / 38%), transparent 34%),
+    linear-gradient(180deg, #061a38 0%, #041329 48%, #031026 100%);
+}
+
+.bg-grid {
+  position: absolute;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgb(42 122 204 / 16%) 1px, transparent 1px),
+    linear-gradient(90deg, rgb(42 122 204 / 16%) 1px, transparent 1px);
+  background-size: 96px 40px;
+  inset: 0;
+}
+
+.dashboard-header {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  height: 86px;
+  padding: 12px 24px 8px;
+  grid-template-columns: 360px 1fr 360px;
+  align-items: start;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #c7dcf6;
+  font-size: 18px;
+}
+
+.brand-icon {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  color: #8cd3ff;
+  background: rgb(78 157 255 / 16%);
+  border: 1px solid rgb(93 177 255 / 40%);
+  border-radius: 6px;
+  place-items: center;
+}
+
+.dashboard-header h1 {
+  margin: 0;
+  color: #fff;
+  font-size: 42px;
+  font-weight: 800;
+  line-height: 1.15;
+  text-align: center;
+  text-shadow: 0 0 12px rgb(105 178 255 / 86%);
+  letter-spacing: 0;
+}
+
+.header-meta {
+  justify-self: end;
+  color: #b6d0ef;
+  font-size: 14px;
+  line-height: 1.75;
+}
+
+.header-meta span {
+  color: #fff;
+  font-weight: 700;
+}
+
+.refresh-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.screen-btn {
+  display: inline-grid;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  color: #8fc7ff;
+  cursor: pointer;
+  background: rgb(16 62 116 / 80%);
+  border: 1px solid rgb(77 151 232 / 70%);
+  border-radius: 4px;
+  place-items: center;
+}
+
+.dashboard-main {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  height: calc(100vh - 86px);
+  min-height: 820px;
+  padding: 8px 24px 16px;
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.top-row {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(150px, 1fr)) 2fr;
+  gap: 10px;
+}
+
+.panel,
+.metric-card {
+  background: linear-gradient(135deg, var(--panel), var(--panel-deep));
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  box-shadow: inset 0 0 24px rgb(34 113 203 / 18%);
+}
+
+.metric-card {
+  height: 120px;
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+.metric-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #d7e9ff;
+  font-size: 16px;
+}
+
+.metric-title .iconify {
+  font-size: 22px;
+}
+
+.metric-value {
+  display: flex;
+  margin-top: 16px;
+  align-items: baseline;
+  gap: 18px;
+}
+
+.metric-value strong {
+  font-size: 40px;
+  line-height: 1;
+}
+
+.metric-value span {
+  color: #a8bfdd;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.metric-card--online .metric-value strong,
+.metric-card--running .metric-value strong,
+.metric-card--online .metric-title,
+.metric-card--running .metric-title {
+  color: var(--green);
+}
+
+.metric-card--offline .metric-value strong,
+.metric-card--offline .metric-title {
+  color: var(--gray);
+}
+
+.metric-card--standby .metric-value strong,
+.metric-card--standby .metric-title {
+  color: var(--blue);
+}
+
+.metric-card--fault {
+  border-color: rgb(255 67 84 / 86%);
+}
+
+.metric-card--fault .metric-value strong,
+.metric-card--fault .metric-title {
+  color: var(--red);
+}
+
+.alarm-board {
+  height: 120px;
+  padding: 12px;
+  box-sizing: border-box;
+}
+
+.alarm-head,
+.alarm-item {
+  display: grid;
+  grid-template-columns: 1.1fr 1fr 1fr;
+  align-items: center;
+  gap: 8px;
+}
+
+.alarm-head {
+  color: #fff;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.alarm-list {
+  display: flex;
+  margin-top: 8px;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.alarm-item {
+  height: 30px;
+  padding: 0 8px;
+  overflow: hidden;
+  color: #e8f2ff;
+  background: linear-gradient(90deg, rgb(102 25 56 / 76%), rgb(33 31 69 / 52%));
+  border: 1px solid rgb(255 64 82 / 52%);
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.alarm-item strong {
+  overflow: hidden;
+  color: #fff;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.alarm-item span:nth-child(2) {
+  color: #ff5365;
+  font-weight: 700;
+  text-align: center;
+}
+
+.alarm-item span:nth-child(3) {
+  color: #d7aab4;
+  text-align: right;
+}
+
+.empty-line,
+.empty-table {
+  display: grid;
+  height: 100%;
+  color: var(--muted);
+  place-items: center;
+}
+
+.detail-panel {
+  min-height: 0;
+  padding: 14px 16px;
+  flex: 1.25;
+}
+
+.panel-title {
+  display: flex;
+  height: 30px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.panel-title h2 {
+  margin: 0;
+  color: #fff;
+  font-size: 22px;
+  font-weight: 800;
+}
+
+.panel-title span {
+  color: #89bdf5;
+  font-size: 14px;
+}
+
+.detail-table {
+  display: flex;
+  height: calc(100% - 34px);
+  min-height: 0;
+  flex-direction: column;
+}
+
+.table-row {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1.4fr 1.4fr 1.4fr 1.4fr;
+  min-height: 43px;
+  padding: 0 14px;
+  align-items: center;
+  gap: 12px;
+  border-bottom: 1px solid rgb(60 134 212 / 35%);
+}
+
+.table-header {
+  min-height: 44px;
+  color: #98bee8;
+  font-size: 14px;
+}
+
+.table-body {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.table-body .table-row {
+  color: #dcecff;
+  background: rgb(12 52 98 / 42%);
+  border: 1px solid rgb(60 134 212 / 48%);
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+.table-row strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.table-row--fault {
+  color: #ff5768;
+  background: linear-gradient(90deg, rgb(108 27 58 / 82%), rgb(11 39 83 / 46%)) !important;
+  border-color: rgb(255 64 82 / 80%) !important;
+}
+
+.table-row--running strong,
+.table-row--running .rate {
+  color: var(--green);
+}
+
+.table-row--offline strong {
+  color: #96adca;
+}
+
+.rate {
+  color: #54a7ff;
+  font-weight: 800;
+}
+
+.status-pill {
+  display: inline-flex;
+  min-width: 42px;
+  height: 24px;
+  padding: 0 10px;
+  font-style: normal;
+  border: 1px solid currentcolor;
+  border-radius: 13px;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-pill--running {
+  color: var(--green);
+  background: rgb(34 197 94 / 12%);
+}
+
+.status-pill--standby {
+  color: var(--blue);
+  background: rgb(59 130 246 / 12%);
+}
+
+.status-pill--fault {
+  color: var(--red);
+  background: rgb(239 68 68 / 14%);
+}
+
+.status-pill--offline {
+  color: #b5c4d9;
+  background: rgb(148 163 184 / 14%);
+}
+
+.chart-row {
+  display: grid;
+  min-height: 280px;
+  flex: 0.9;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.chart-panel {
+  min-height: 0;
+  padding: 14px 16px;
+}
+
+.chart {
+  width: 100%;
+  height: calc(100% - 34px);
+  min-height: 220px;
+}
+
+@media (width <= 1600px) {
+  .dashboard-header h1 {
+    font-size: 34px;
+  }
+
+  .dashboard-header {
+    grid-template-columns: 310px 1fr 320px;
+  }
+
+  .metric-card {
+    padding: 14px 12px;
+  }
+
+  .metric-value strong {
+    font-size: 34px;
+  }
+}
+</style>