diff --git a/src/views/ems/record/recordAlarmRule/index.vue b/src/views/ems/record/recordAlarmRule/index.vue
index a21c2f0..62790a2 100644
--- a/src/views/ems/record/recordAlarmRule/index.vue
+++ b/src/views/ems/record/recordAlarmRule/index.vue
@@ -4,7 +4,7 @@
       <div class="hero-copy">
         <span class="hero-eyebrow">ALARM RULE STUDIO</span>
         <h2 class="hero-title">异常告警规则与处置措施工作台</h2>
-        <p class="hero-desc">把上位机触发阈值和处置步骤聚合在一个界面中，帮助运维团队更快定位规则、编排措施并完成闭环维护。</p>
+<!--        <p class="hero-desc">把上位机触发阈值和处置步骤聚合在一个界面中，帮助运维团队更快定位规则、编排措施并完成闭环维护。</p>-->
       </div>
       <div class="hero-stats">
         <article v-for="item in overviewStats" :key="item.label" class="stat-card">
@@ -106,8 +106,9 @@
             <dict-tag :options="dict.type.monitor_field" :value="scope.row.monitorField" />
           </template>
         </el-table-column>
-        <el-table-column label="告警上限" align="center" prop="alarmUpper" v-if="columns[5].visible" />
-        <el-table-column label="告警下限" align="center" prop="alarmLower" v-if="columns[6].visible" />
+        <el-table-column label="触发值" align="center" prop="triggerValue" v-if="columns[5].visible" />
+<!--        <el-table-column label="告警上限" align="center" prop="alarmUpper" v-if="columns[5].visible" />-->
+<!--        <el-table-column label="告警下限" align="center" prop="alarmLower" v-if="columns[6].visible" />-->
         <!-- 上位机 WebSocket 已按 triggerRule + triggerValue 推送报警，规则页暂不展示恢复/防抖参数。 -->
         <!-- <el-table-column label="恢复上限" align="center" prop="recoverUpper" v-if="columns[7].visible" /> -->
         <!-- <el-table-column label="恢复下限" align="center" prop="recoverLower" v-if="columns[8].visible" /> -->
@@ -115,12 +116,12 @@
         <!-- <el-table-column label="持续秒数" align="center" prop="durationSec" v-if="columns[10].visible" /> -->
         <!-- 告警级别暂时停用：规则页不再暴露这个入口，避免和统一阈值配置形成双口径。 -->
         <!-- <el-table-column label="告警级别" align="center" prop="alarmLevel" v-if="columns[11].visible" /> -->
-        <el-table-column label="启用状态" align="center" prop="isEnable" v-if="columns[7].visible">
+        <el-table-column label="启用状态" align="center" prop="isEnable" v-if="columns[6].visible">
           <template #default="scope">
             <dict-tag :options="dict.type.is_flag" :value="scope.row.isEnable" />
           </template>
         </el-table-column>
-        <el-table-column label="备注" align="center" prop="cause" v-if="columns[8].visible" />
+        <el-table-column label="备注" align="center" prop="cause" v-if="columns[7].visible" />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
           <template #default="scope">
             <el-button
@@ -193,11 +194,15 @@
         <!--        <el-form-item label="时间范围(分)" prop="timeRange">-->
         <!--          <el-input v-model="form.timeRange" placeholder="请输入时间范围(分)"/>-->
         <!--        </el-form-item>-->
-        <el-form-item label="告警上限" prop="alarmUpper">
-          <el-input-number v-model="form.alarmUpper" placeholder="请输入告警上限" :precision="4" />
-        </el-form-item>
-        <el-form-item label="告警下限" prop="alarmLower">
-          <el-input-number v-model="form.alarmLower" placeholder="请输入告警下限" :precision="4" />
+<!--        <el-form-item label="告警上限" prop="alarmUpper">-->
+<!--          <el-input-number v-model="form.alarmUpper" placeholder="请输入告警上限" :precision="4" />-->
+<!--        </el-form-item>-->
+<!--        <el-form-item label="告警下限" prop="alarmLower">-->
+<!--          <el-input-number v-model="form.alarmLower" placeholder="请输入告警下限" :precision="4" />-->
+<!--        </el-form-item>-->
+
+        <el-form-item label="触发值" prop="triggerValue">
+          <el-input-number v-model="form.triggerValue" placeholder="请输入触发值" :precision="4" />
         </el-form-item>
         <!-- 上位机负责报警触发与推送，规则页暂不维护恢复上下限、回差、持续秒数。 -->
         <!--
@@ -248,7 +253,7 @@
       <div class="action-steps-container">
         <div class="dialog-tip soft">
           <span class="tip-dot"></span>
-          处置步骤支持顺序编排、图片补充和批量保存，适合沉淀标准化应急 SOP。
+          处置步骤支持顺序编排、批量保存，适合沉淀标准化应急 SOP。
         </div>
         <!-- 步骤列表 -->
         <div class="steps-section">
@@ -289,9 +294,9 @@
                     <el-input v-model="step.remark" placeholder="请输入备注信息"></el-input>
                   </el-form-item>
 
-                  <el-form-item label="参考图片">
+<!--                  <el-form-item label="参考图片">
                     <div class="image-upload-section">
-                      <!-- 图片上传 -->
+                      &lt;!&ndash; 图片上传 &ndash;&gt;
                       <el-upload
                         :action="uploadAction"
                         :headers="uploadHeaders"
@@ -309,7 +314,7 @@
                         </template>
                       </el-upload>
 
-                      <!-- 图片列表 -->
+                      &lt;!&ndash; 图片列表 &ndash;&gt;
                       <div v-if="step.stepImages && step.stepImages.length > 0" class="image-list">
                         <div v-for="(image, imgIndex) in step.stepImages" :key="image.tempId || image.objId" class="image-item">
                           <div class="image-preview" @click="previewImage(getFullImageUrl(image.imageUrl))">
@@ -322,7 +327,8 @@
                         </div>
                       </div>
                     </div>
-                  </el-form-item>
+                  </el-form-item>-->
+
                 </el-form>
               </div>
             </div>
@@ -339,11 +345,11 @@
     </el-dialog>
 
     <!-- 图片预览对话框 -->
-    <el-dialog title="图片预览" v-model="imagePreviewVisible" width="80%" append-to-body center class="themed-dialog preview-dialog">
+<!--    <el-dialog title="图片预览" v-model="imagePreviewVisible" width="80%" append-to-body center class="themed-dialog preview-dialog">
       <div class="image-preview-container">
         <img :src="previewImageUrl" style="max-width: 100%; max-height: 70vh" />
       </div>
-    </el-dialog>
+    </el-dialog>-->
   </div>
 </template>
 
diff --git a/src/views/ems/record/recordIotenvInstant/index.vue b/src/views/ems/record/recordIotenvInstant/index.vue
index 13411b2..5c9e9c3 100644
--- a/src/views/ems/record/recordIotenvInstant/index.vue
+++ b/src/views/ems/record/recordIotenvInstant/index.vue
@@ -13,6 +13,10 @@
           />
         </div>
         <div class="head-container">
+          <div style="margin-bottom: 8px; display: flex; gap: 8px">
+            <el-button size="small" text type="primary" @click="handleCheckAll">全选</el-button>
+            <el-button size="small" text type="primary" @click="handleUncheckAll">取消全选</el-button>
+          </div>
           <el-tree
             :data="monitorInfoOptions"
             :props="monitorProps"
@@ -21,8 +25,8 @@
             ref="treeRef"
             node-key="id"
             default-expand-all
-            highlight-current
-            @node-click="handleNodeClick"
+            show-checkbox
+            @check="handleCheck"
           />
         </div>
       </el-col>
@@ -128,12 +132,14 @@
             <el-date-picker
               v-model="daterangeRecordTime"
               style="width: 340px"
-              value-format="yyyy-MM-dd HH:mm:ss"
               type="datetimerange"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              format="YYYY-MM-DD HH:mm:ss"
               range-separator="-"
               start-placeholder="开始时间"
               end-placeholder="结束时间"
-            ></el-date-picker>
+              :default-time="defaultRecordTime"
+            />
           </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -182,25 +188,30 @@
               >导出</el-button
             >
           </el-col>
-          <right-toolbar v-model:show-search="showSearch" @query-table="getList" :columns="columns"></right-toolbar>
+          <right-toolbar v-model:show-search="showSearch" @query-table="handleQuery" :columns="displayColumns"></right-toolbar>
         </el-row>
 
-        <el-table v-loading="loading" :data="recordIotenvInstantList" @selection-change="handleSelectionChange">
+        <el-table
+          v-if="hasSearched"
+          v-loading="loading"
+          :data="recordIotenvInstantList"
+          @selection-change="handleSelectionChange"
+        >
           <el-table-column type="selection" width="55" align="center" />
           <!--                    <el-table-column label="主键标识" align="center" prop="objid" v-if="columns[0].visible"/>-->
-          <el-table-column label="序号" type="index" width="55" align="center" v-if="columns[0].visible" />
-          <el-table-column label="点位名称" align="center" prop="monitorName" v-if="columns[1].visible"> </el-table-column>
-          <el-table-column label="温度" align="center" prop="temperature" v-if="columns[2].visible"> </el-table-column>
-          <el-table-column label="湿度" align="center" prop="humidity" v-if="columns[3].visible"> </el-table-column>
-          <el-table-column label="照度" align="center" prop="illuminance" v-if="columns[4].visible"> </el-table-column>
-          <el-table-column label="噪声" align="center" prop="noise" v-if="columns[5].visible"> </el-table-column>
-          <el-table-column label="硫化氢浓度" align="center" prop="concentration" v-if="columns[6].visible"> </el-table-column>
-          <el-table-column label="振动-速度(mm/s)" align="center" prop="vibrationSpeed" v-if="columns[7].visible"> </el-table-column>
-          <el-table-column label="振动-位移(um)" align="center" prop="vibrationDisplacement" v-if="columns[8].visible"> </el-table-column>
-          <el-table-column label="振动-加速度(g)" align="center" prop="vibrationAcceleration" v-if="columns[9].visible"> </el-table-column>
-          <el-table-column label="振动-温度(℃)" align="center" prop="vibrationTemp" v-if="columns[10].visible"> </el-table-column>
-          <el-table-column label="采集时间" align="center" prop="collectTime" width="180" v-if="columns[11].visible"> </el-table-column>
-          <el-table-column label="记录时间" align="center" prop="recodeTime" width="180" v-if="columns[12].visible"> </el-table-column>
+          <el-table-column label="序号" type="index" width="55" align="center" v-if="isColumnVisible(0)" />
+          <el-table-column label="点位名称" align="center" prop="monitorName" v-if="isColumnVisible(1)"> </el-table-column>
+          <el-table-column label="温度" align="center" prop="temperature" v-if="isColumnVisible(2)"> </el-table-column>
+          <el-table-column label="湿度" align="center" prop="humidity" v-if="isColumnVisible(3)"> </el-table-column>
+          <el-table-column label="照度" align="center" prop="illuminance" v-if="isColumnVisible(4)"> </el-table-column>
+          <el-table-column label="噪声" align="center" prop="noise" v-if="isColumnVisible(5)"> </el-table-column>
+          <el-table-column label="硫化氢浓度" align="center" prop="concentration" v-if="isColumnVisible(6)"> </el-table-column>
+          <el-table-column label="振动-速度(mm/s)" align="center" prop="vibrationSpeed" v-if="isColumnVisible(7)"> </el-table-column>
+          <el-table-column label="振动-位移(um)" align="center" prop="vibrationDisplacement" v-if="isColumnVisible(8)"> </el-table-column>
+          <el-table-column label="振动-加速度(g)" align="center" prop="vibrationAcceleration" v-if="isColumnVisible(9)"> </el-table-column>
+          <el-table-column label="振动-温度(℃)" align="center" prop="vibrationTemp" v-if="isColumnVisible(10)"> </el-table-column>
+          <el-table-column label="采集时间" align="center" prop="collectTime" width="180" v-if="isColumnVisible(11)"> </el-table-column>
+          <el-table-column label="记录时间" align="center" prop="recodeTime" width="180" v-if="isColumnVisible(12)"> </el-table-column>
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
             <template #default="scope">
               <el-button
@@ -225,7 +236,13 @@
       </el-col>
     </el-row>
 
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    <pagination
+      v-show="hasSearched && total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
 
     <!-- 添加或修改物联网数据对话框 -->
     <el-dialog :title="title" v-model="open" width="500px" append-to-body>
@@ -269,10 +286,24 @@
           <el-input-number v-model="form.vibrationTemp" :precision="4" controls-position="right" style="width: 100%" />
         </el-form-item>
         <el-form-item label="采集时间" prop="collectTime">
-          <el-date-picker clearable v-model="form.collectTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择采集时间"> </el-date-picker>
+          <el-date-picker
+            clearable
+            v-model="form.collectTime"
+            type="date"
+            value-format="YYYY-MM-DD"
+            format="YYYY-MM-DD"
+            placeholder="请选择采集时间"
+          />
         </el-form-item>
         <el-form-item label="记录时间" prop="recodeTime">
-          <el-date-picker clearable v-model="form.recodeTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择记录时间"> </el-date-picker>
+          <el-date-picker
+            clearable
+            v-model="form.recodeTime"
+            type="date"
+            value-format="YYYY-MM-DD"
+            format="YYYY-MM-DD"
+            placeholder="请选择记录时间"
+          />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -294,9 +325,60 @@ import {
   addRecordIotenvInstant,
   updateRecordIotenvInstant
 } from '@/api/ems/record/recordIotenvInstant';
-import { parseTime } from '@/utils/ruoyi';
 import { getMonitorInfoTree, listBaseMonitorInfo } from '@/api/ems/base/baseMonitorInfo';
 
+// ---- monitor_type 到允许显示字段的业务规则 ----
+
+const MONITOR_TYPES = [5, 6, 10] as const;
+type MonitorType = (typeof MONITOR_TYPES)[number];
+
+type MonitorMetricProp =
+  | 'temperature'
+  | 'humidity'
+  | 'illuminance'
+  | 'noise'
+  | 'concentration'
+  | 'vibrationSpeed'
+  | 'vibrationDisplacement'
+  | 'vibrationAcceleration'
+  | 'vibrationTemp';
+
+interface TableColumnItem {
+  key: number;
+  label: string;
+  visible: boolean;
+  metricProp?: MonitorMetricProp;
+}
+
+const MONITOR_TYPE_METRIC_MAP: Record<MonitorType, MonitorMetricProp[]> = {
+  5: ['temperature'],
+  6: ['temperature', 'humidity'],
+  10: ['vibrationDisplacement']
+};
+
+const getAllowedMetricPropsByMonitorTypes = (monitorTypes: MonitorType[]): MonitorMetricProp[] => {
+  return [...new Set(monitorTypes.flatMap((mt) => MONITOR_TYPE_METRIC_MAP[mt] || []))];
+};
+
+const normalizeMonitorType = (monitorType: unknown): MonitorType | null => {
+  const type = Number(monitorType);
+  if (MONITOR_TYPES.includes(type as MonitorType)) {
+    return type as MonitorType;
+  }
+  return null;
+};
+
+const warnUnknownMonitorType = (monitorType: unknown, node?: any) => {
+  if (!import.meta.env.DEV) return;
+  if (monitorType === undefined || monitorType === null || monitorType === '') return;
+  console.warn('[IotenvInstant] Unknown monitorType ignored:', {
+    monitorType,
+    nodeId: node?.id,
+    nodeCode: node?.code,
+    nodeLabel: node?.label
+  });
+};
+
 defineOptions({
   name: 'RecordIotenvInstant'
 });
@@ -307,6 +389,39 @@ const formRef = ref<ElFormInstance>();
 const queryFormRef = ref<ElFormInstance>();
 const treeRef = ref<ElTreeInstance>();
 
+// 记录时间时间范围（独立 ref，避免 reactive Proxy 数组与 el-date-picker v-model 的兼容问题）
+const daterangeRecordTime = ref<string[]>([]);
+
+// 树上已勾选但尚未点击"搜索"的设备（勾选 ≠ 查询，只有点搜索才写入 queryParams）
+const pendingMonitorIds = ref<Array<string | number>>([]);
+const pendingMonitorTypes = ref<number[]>([]);
+
+// 日期范围选择器：选日期时默认补 08:00:00
+const defaultRecordTime: [Date, Date] = [new Date(2000, 0, 1, 8, 0, 0), new Date(2000, 0, 1, 8, 0, 0)];
+
+const pad2 = (num: number) => String(num).padStart(2, '0');
+
+const formatDateTime = (date: Date): string => {
+  const y = date.getFullYear();
+  const m = pad2(date.getMonth() + 1);
+  const d = pad2(date.getDate());
+  const h = pad2(date.getHours());
+  const min = pad2(date.getMinutes());
+  const s = pad2(date.getSeconds());
+  return `${y}-${m}-${d} ${h}:${min}:${s}`;
+};
+
+// 默认时间范围：前一天 08:00:00 ~ 当天 08:00:00
+const setDefaultRecordTimeRange = () => {
+  const end = new Date();
+  end.setHours(8, 0, 0, 0);
+
+  const start = new Date(end);
+  start.setDate(start.getDate() - 1);
+
+  daterangeRecordTime.value = [formatDateTime(start), formatDateTime(end)];
+};
+
 // 这里统一通过工厂函数重建表单，避免弹窗在新增/编辑切换时残留上一条业务数据。
 const createFormData = () => ({
   objid: null,
@@ -327,6 +442,8 @@ const createFormData = () => ({
 // 这里保留原页面字段结构，优先保证 EMS 业务行为与接口入参不发生漂移。
 const state = reactive({
   workUnitName: null,
+  // 当前选中设备的 monitorType 集合，用于决定列显隐
+  currentMonitorTypes: [] as number[],
   //下拉树List
   baseMonitorInfoOptions: [],
   //左侧树结构List
@@ -337,10 +454,10 @@ const state = reactive({
     children: 'children',
     label: 'label'
   },
-  // 记录时间时间范围
-  daterangeRecordTime: [],
-  // 遮罩层
-  loading: true,
+  // 遮罩层：初始化不显示 loading，只有真正请求接口时才显示
+  loading: false,
+  // 是否已经点击过搜索；初始化未搜索，不显示表格
+  hasSearched: false,
   // 选中数组
   ids: [],
   // 非单个禁用
@@ -394,47 +511,56 @@ const state = reactive({
     {
       key: 2,
       label: `温度`,
-      visible: true
+      visible: true,
+      metricProp: 'temperature'
     },
     {
       key: 3,
       label: `湿度`,
-      visible: true
+      visible: true,
+      metricProp: 'humidity'
     },
     {
       key: 4,
       label: `照度`,
-      visible: true
+      visible: true,
+      metricProp: 'illuminance'
     },
     {
       key: 5,
       label: `噪声`,
-      visible: true
+      visible: true,
+      metricProp: 'noise'
     },
     {
       key: 6,
       label: `硫化氢浓度`,
-      visible: true
+      visible: true,
+      metricProp: 'concentration'
     },
     {
       key: 7,
       label: `振动-速度(mm/s)`,
-      visible: true
+      visible: true,
+      metricProp: 'vibrationSpeed'
     },
     {
       key: 8,
       label: `振动-位移(um)`,
-      visible: true
+      visible: true,
+      metricProp: 'vibrationDisplacement'
     },
     {
       key: 9,
       label: `振动-加速度(g)`,
-      visible: true
+      visible: true,
+      metricProp: 'vibrationAcceleration'
     },
     {
       key: 10,
       label: `振动-温度(℃)`,
-      visible: true
+      visible: true,
+      metricProp: 'vibrationTemp'
     },
     {
       key: 11,
@@ -446,15 +572,16 @@ const state = reactive({
       label: `记录时间`,
       visible: true
     }
-  ]
+  ] as TableColumnItem[]
 } as any);
 
 const {
   baseMonitorInfoList,
   baseMonitorInfoOptions,
   columns,
-  daterangeRecordTime,
+  currentMonitorTypes,
   form,
+  hasSearched,
   ids,
   loading,
   monitorInfoOptions,
@@ -471,6 +598,8 @@ const {
   workUnitName
 } = toRefs(state);
 
+const tableColumns = columns as Ref<TableColumnItem[]>;
+
 const normalizer = (node) => {
   if (node.children && !node.children.length) {
     delete node.children;
@@ -478,13 +607,14 @@ const normalizer = (node) => {
   return {
     id: node.monitorId,
     label: node.monitorName,
+    monitorType: node.monitorType,
     children: node.children
   };
 };
 
 const getTreeMonitorInfo = () => {
   listBaseMonitorInfo({
-    monitorTypeList: [5, 6, 7, 8, 9]
+    monitorTypeList: [5, 6, 10]
   }).then((response) => {
     baseMonitorInfoOptions.value = [];
     const data = {
@@ -497,19 +627,54 @@ const getTreeMonitorInfo = () => {
   });
 };
 
-const getAllMonitorIds = (nodes) => {
-  let ids = [];
-  if (!nodes || nodes.length === 0) return ids;
+const isLeafDeviceNode = (node) => {
+  return node?.id && (!node.children || node.children.length === 0);
+};
+
+const getLeafDeviceNodes = (nodes: any[] = []) => {
+  let result: any[] = [];
   nodes.forEach((node) => {
-    if (node.id) {
-      ids.push(node.id);
-    }
-    if (node.children && node.children.length > 0) {
-      ids = ids.concat(getAllMonitorIds(node.children));
+    const children = node.children || [];
+    if (children.length > 0) {
+      result = result.concat(getLeafDeviceNodes(children));
+    } else if (node.id) {
+      result.push(node);
     }
   });
-  console.log(ids);
-  return ids;
+  return result;
+};
+
+const resolveNodeMonitorCode = (node: any) => {
+  return node?.code ?? node?.monitorCode;
+};
+
+const resolveNodeMonitorType = (node: any) => {
+  return node?.monitorType ?? node?.type;
+};
+
+const isValidMonitorCode = (code: unknown): code is string | number => {
+  return code !== undefined && code !== null && code !== '';
+};
+
+const syncPendingMonitorSelection = (nodes: any[] = []) => {
+  const leafNodes = nodes.filter(isLeafDeviceNode);
+
+  pendingMonitorIds.value = leafNodes
+    .map((node) => resolveNodeMonitorCode(node))
+    .filter(isValidMonitorCode);
+
+  const monitorTypes = leafNodes
+    .map((node) => {
+      const rawType = resolveNodeMonitorType(node);
+      const monitorType = normalizeMonitorType(rawType);
+      if (monitorType === null) {
+        warnUnknownMonitorType(rawType, node);
+      }
+      return monitorType;
+    })
+    .filter((monitorType): monitorType is MonitorType => monitorType !== null);
+
+  pendingMonitorTypes.value = [...new Set(monitorTypes)] as MonitorType[];
 };
 
 const filterNode = (value, data) => {
@@ -517,33 +682,99 @@ const filterNode = (value, data) => {
   return data.label.indexOf(value) !== -1;
 };
 
-const handleNodeClick = (data) => {
-  // 点击节点时清空monitorIds，只使用选中的monitorId
-  queryParams.value.monitorIds = [];
-  queryParams.value.monitorId = data.code;
-  handleQuery();
+const handleCheck = (_data: any, checkedState: any) => {
+  const leafNodes = (checkedState.checkedNodes || []).filter((node: any) => isLeafDeviceNode(node));
+  syncPendingMonitorSelection(leafNodes);
 };
 
+const handleCheckAll = () => {
+  const leafNodes = getLeafDeviceNodes(monitorInfoOptions.value);
+  const allLeafIds = leafNodes.map((node) => node.id);
+  treeRef.value?.setCheckedKeys(allLeafIds, true);
+  syncPendingMonitorSelection(leafNodes);
+};
+
+const handleUncheckAll = () => {
+  treeRef.value?.setCheckedKeys([], true);
+  syncPendingMonitorSelection([]);
+  queryParams.value.monitorId = null;
+  queryParams.value.monitorIds = [];
+  currentMonitorTypes.value = [] as MonitorType[];
+  hasSearched.value = false;
+  loading.value = false;
+  recordIotenvInstantList.value = [];
+  total.value = 0;
+};
+
+// 当前 UI 列过滤实际使用的 monitorType 集合：
+// - 未搜索时跟随勾选态 (pendingMonitorTypes)
+// - 已搜索后跟随查询态 (currentMonitorTypes)
+const effectiveMonitorTypes = computed<MonitorType[]>(() => {
+  if (!hasSearched.value) {
+    return pendingMonitorTypes.value as MonitorType[];
+  }
+  return currentMonitorTypes.value as MonitorType[];
+});
+
+const visibleMetricProps = computed<MonitorMetricProp[]>(() => {
+  return getAllowedMetricPropsByMonitorTypes(effectiveMonitorTypes.value);
+});
+
+const columnMap = computed(() => {
+  const map = new Map<number, TableColumnItem>();
+  tableColumns.value.forEach((column) => {
+    map.set(column.key, column);
+  });
+  return map;
+});
+
+const isMetricColumnAllowed = (column: TableColumnItem) => {
+  if (!column.metricProp) return true;
+
+  // 未搜索前没有类型上下文，保留原始列设置；
+  // 搜索后如果类型解析失败，不再放开所有指标列（暴露问题而非隐藏问题）。
+  if (effectiveMonitorTypes.value.length === 0) return !hasSearched.value;
+
+  return visibleMetricProps.value.includes(column.metricProp);
+};
+
+const isColumnVisible = (columnKey: number) => {
+  const column = columnMap.value.get(columnKey);
+  return !!column?.visible && isMetricColumnAllowed(column);
+};
+
+const displayColumns = computed(() => {
+  return tableColumns.value.filter((column) => isMetricColumnAllowed(column));
+});
+
 const getList = () => {
+  if (!hasSearched.value || !queryParams.value.monitorIds || queryParams.value.monitorIds.length === 0) {
+    loading.value = false;
+    recordIotenvInstantList.value = [];
+    total.value = 0;
+    return;
+  }
   loading.value = true;
-  if (null != daterangeRecordTime.value && '' != daterangeRecordTime.value) {
+  if (daterangeRecordTime.value && daterangeRecordTime.value.length === 2) {
     queryParams.value.params['beginCollectTime'] = daterangeRecordTime.value[0];
     queryParams.value.params['endCollectTime'] = daterangeRecordTime.value[1];
-  }
-  if (null != daterangeRecordTime.value && '' != daterangeRecordTime.value) {
     queryParams.value.params['beginRecordTime'] = daterangeRecordTime.value[0];
     queryParams.value.params['endRecordTime'] = daterangeRecordTime.value[1];
+  } else {
+    delete queryParams.value.params['beginCollectTime'];
+    delete queryParams.value.params['endCollectTime'];
+    delete queryParams.value.params['beginRecordTime'];
+    delete queryParams.value.params['endRecordTime'];
   }
 
-  // 如果没有选中节点，则获取所有设备ID
-  if (!queryParams.value.monitorId) {
-    queryParams.value.monitorIds = getAllMonitorIds(monitorInfoOptions.value);
-  }
-  listRecordIotenvInstant(queryParams.value).then((response) => {
-    recordIotenvInstantList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
+  listRecordIotenvInstant(queryParams.value)
+    .then((response) => {
+      recordIotenvInstantList.value = response.rows;
+      total.value = response.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
 };
 
 const cancel = () => {
@@ -571,15 +802,37 @@ const reset = () => {
 };
 
 const handleQuery = () => {
-  console.log('查询参数:', daterangeRecordTime.value);
+  if (!pendingMonitorIds.value || pendingMonitorIds.value.length === 0) {
+    proxy?.$modal.msgWarning('请先选择设备后再查询');
+    hasSearched.value = false;
+    loading.value = false;
+    recordIotenvInstantList.value = [];
+    total.value = 0;
+    return;
+  }
+
+  hasSearched.value = true;
   queryParams.value.pageNum = 1;
+  queryParams.value.monitorId = null;
+  queryParams.value.monitorIds = [...pendingMonitorIds.value];
+  currentMonitorTypes.value = [...pendingMonitorTypes.value] as MonitorType[];
   getList();
 };
 
 const resetQuery = () => {
   queryFormRef.value?.resetFields();
-  daterangeRecordTime.value = [];
-  handleQuery();
+  setDefaultRecordTimeRange();
+  treeRef.value?.setCheckedKeys([], true);
+  pendingMonitorIds.value = [];
+  pendingMonitorTypes.value = [];
+  queryParams.value.pageNum = 1;
+  queryParams.value.monitorId = null;
+  queryParams.value.monitorIds = [];
+  currentMonitorTypes.value = [];
+  hasSearched.value = false;
+  loading.value = false;
+  recordIotenvInstantList.value = [];
+  total.value = 0;
 };
 
 const handleSelectionChange = (selection) => {
@@ -648,11 +901,43 @@ const handleExport = () => {
   );
 };
 
+const MONITOR_TYPE_LABEL_MAP: Record<number, string> = {
+  5: '温度',
+  6: '温湿度',
+  10: '振动'
+};
+
+// 后端 TreeSelects 返回的字段是 type（不是 monitorType），code 是 monitorCode。
+// 这里统一转成前端使用的字段名，避免后续读取 node.monitorType 时为 undefined。
+const normalizeMonitorTreeNode = (node: any): any => {
+  const children = Array.isArray(node.children) ? node.children.map(normalizeMonitorTreeNode) : [];
+
+  const resolvedMonitorType = node.monitorType ?? node.type;
+  const typeLabel = resolvedMonitorType != null ? MONITOR_TYPE_LABEL_MAP[Number(resolvedMonitorType)] : undefined;
+  const label = typeLabel ? `${node.label ?? node.monitorName ?? node.name} (${typeLabel})` : (node.label ?? node.monitorName ?? node.name);
+
+  const normalized: any = {
+    ...node,
+    id: node.id ?? node.monitorId ?? node.objId,
+    label,
+    code: node.code ?? node.monitorCode,
+    monitorType: resolvedMonitorType
+  };
+
+  if (children.length > 0) {
+    normalized.children = children;
+  } else {
+    delete normalized.children;
+  }
+
+  return normalized;
+};
+
 const getTreeselect = () => {
   getMonitorInfoTree({
-    monitorTypeList: [5, 6, 7, 8, 9]
+    monitorTypeList: [5, 6, 10]
   }).then((response) => {
-    monitorInfoOptions.value = response.data;
+    monitorInfoOptions.value = (response.data || []).map(normalizeMonitorTreeNode);
   });
 };
 
@@ -661,15 +946,8 @@ watch(workUnitName, (val) => {
 });
 
 onMounted(() => {
-  const nowDate = new Date();
-  const today = parseTime(new Date(), '{y}-{m}-{d}');
-  const lastDate = new Date();
-  lastDate.setDate(nowDate.getDate() - 1);
-  const yesterday = parseTime(lastDate, '{y}-{m}-{d}');
-  daterangeRecordTime.value[0] = yesterday + ' 08:00:00';
-  daterangeRecordTime.value[1] = today + ' 08:00:00';
+  setDefaultRecordTimeRange();
   getTreeMonitorInfo();
   getTreeselect();
-  getList();
 });
 </script>
diff --git a/src/views/index.vue b/src/views/index.vue
index 231911f..60e21eb 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,705 +1,1029 @@
 <template>
-  <div v-loading="loading" class="app-container home-dashboard">
-    <section class="hero-panel">
-      <div class="hero-copy">
-        <p class="hero-eyebrow">Hawei Plus Overview</p>
-        <h1>海威PLUS 运营概览</h1>
-        <p class="hero-desc">
-          首页直接展示当前系统最新监测快照与报警概况。所有卡片和图表都基于实时接口返回的真实数据生成，方便值班人员进入系统后先看到整体状态，再进入明细页面处理。
-        </p>
-        <div class="hero-tags">
-          <el-tag effect="dark">实时快照</el-tag>
-          <el-tag effect="plain">报警概览</el-tag>
-          <el-tag effect="plain">分组分布</el-tag>
-          <el-tag effect="plain">重点设备</el-tag>
+  <div v-loading="loading" class="home-dashboard">
+    <!-- Header -->
+    <section class="db-header">
+      <div class="db-header-left">
+        <div class="db-badge-row">
+          <span class="db-badge">
+            <span class="pulse-dot"></span>
+            实时系统运行概览
+          </span>
         </div>
+        <h1>能源设备运行驾驶舱</h1>
+        <p class="subtitle">设备台账统计 · 实时状态监控 · 告警规则联动</p>
       </div>
-
-      <div class="hero-side">
-        <div class="hero-side-card">
-          <span>最近刷新</span>
-          <strong>{{ lastUpdateTime || '--' }}</strong>
-          <p>按首页初始化时接口返回的最新时间戳展示。</p>
-        </div>
-        <div class="hero-side-card">
-          <span>当前主看指标</span>
-          <strong>{{ primaryMetricLabel }}</strong>
-          <p>用于分组均值和设备快照排序的默认指标。</p>
+      <div class="db-header-right">
+        <div class="db-clock-pill">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="clock-icon"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+          <span class="clock-time">{{ currentTime }}</span>
         </div>
+        <el-button type="primary" class="refresh-btn" @click="loadAll(true)">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="refresh-icon"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"/></svg>
+          刷新面板
+        </el-button>
       </div>
     </section>
 
-    <div class="overview-grid">
-      <div v-for="item in overviewCards" :key="item.label" class="overview-card">
-        <span class="overview-label">{{ item.label }}</span>
-        <strong class="overview-value">{{ item.value }}</strong>
-        <p class="overview-desc">{{ item.desc }}</p>
+    <!-- KPI Cards -->
+    <div class="kpi-row">
+      <div
+        v-for="card in kpiCards"
+        :key="card.label"
+        class="kpi-item"
+        :style="{ '--accent': card.color, '--accent-grad': card.grad }"
+      >
+        <div class="kpi-icon" :style="{ background: card.grad }">
+          <span v-html="card.icon"></span>
+        </div>
+        <div class="kpi-body">
+          <span class="kpi-num">
+            {{ card.value }}<small v-if="card.unit">{{ card.unit }}</small>
+          </span>
+          <span class="kpi-title">{{ card.label }}</span>
+        </div>
       </div>
     </div>
 
-    <section class="glass-panel logic-panel">
-      <div class="section-head">
-        <div>
-          <p class="section-eyebrow">Logic Notes</p>
-          <h3>首页统计口径</h3>
+    <!-- Charts Row -->
+    <div class="chart-row">
+      <div class="chart-panel">
+        <div class="panel-header-simple">
+          <div class="panel-title-with-bar">设备类型分布</div>
+          <div class="chart-sub">按监测类型统计设备台数</div>
+        </div>
+        <div class="chart-container">
+          <Chart class="chart-box" :chart-option="typeBarOption" />
         </div>
       </div>
-      <div class="logic-grid">
-        <div v-for="item in logicNotes" :key="item.title" class="logic-card">
-          <div class="logic-title">{{ item.title }}</div>
-          <p class="logic-desc">{{ item.desc }}</p>
+      <div class="chart-panel">
+        <div class="panel-header-simple">
+          <div class="panel-title-with-bar2">告警处理状态</div>
+          <div class="chart-sub">已处理 / 待处理占比及处理率</div>
+        </div>
+        <div class="chart-container">
+          <Chart class="chart-box" :chart-option="alarmPieOption" />
         </div>
       </div>
-    </section>
-
-    <div class="chart-grid two-col">
-      <article class="chart-card">
-        <div class="chart-head">
-          <h3>指标快照对比</h3>
-          <p>以最新快照为样本，对比活跃指标的平均值与峰值。</p>
-        </div>
-        <Chart class="chart chart-lg" :chart-option="metricOverviewOption" />
-      </article>
-
-      <article class="chart-card">
-        <div class="chart-head">
-          <h3>报警处理概览</h3>
-          <p>直接展示当前未处理、已处理和其余统计情况。</p>
-        </div>
-        <Chart class="chart chart-lg" :chart-option="alarmOverviewOption" />
-      </article>
     </div>
 
-    <div class="chart-grid two-col">
-      <article class="chart-card">
-        <div class="chart-head">
-          <h3>分组设备概览</h3>
-          <p>按设备树顶层分组统计设备数量，并对主看指标求最新均值。</p>
+    <!-- Interactive Dashboard Bottom Row
+    <div class="bottom-row">
+      <div class="bottom-card alarm-card">
+        <div class="panel-header">
+          <div class="panel-title-group">
+            <span class="panel-icon bg-grad-alarm-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01"/></svg>
+            </span>
+            <div class="panel-titles">
+              <h3>最近异常告警日志</h3>
+              <p>实时推送最新的设备越界告警记录</p>
+            </div>
+          </div>
+          <el-button link type="primary" class="more-link" @click="goToPage('/ems/record/recordAlarmData')">
+            查看全部
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="arrow-icon"
+            >
+              <polyline points="9 18 15 12 9 6" />
+            </svg>
+          </el-button>
         </div>
-        <Chart class="chart chart-md" :chart-option="groupOverviewOption" />
-      </article>
+        <div class="alarm-table-wrapper">
+          <el-table
+            :data="alarmList"
+            stripe
+            style="width: 100%"
+            size="small"
+            :header-cell-style="{ background: '#f8fafc', color: '#475569', fontWeight: 600 }"
+          >
+            <el-table-column label="处理状态" width="90" align="center">
+              <template #default="{ row }">
+                <el-tag :type="row.alarmStatus === 1 ? 'success' : 'danger'" effect="light" size="small" class="status-tag">
+                  {{ row.alarmStatus === 1 ? '已处理' : '待处理' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="级别" width="80" align="center">
+              <template #default="{ row }">
+                <el-tag :type="getAlarmLevelType(row.alarmLevel)" effect="dark" size="small" class="level-tag">
+                  {{ getAlarmLevelLabel(row.alarmLevel) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="告警详情" min-width="180" show-overflow-tooltip>
+              <template #default="{ row }">
+                <div class="alarm-title-text">{{ row.alarmTitle || row.alarmContent }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="monitorName" label="监测点" width="120" show-overflow-tooltip />
+            <el-table-column label="实际值 / 阈值" width="130" align="center">
+              <template #default="{ row }">
+                <span class="actual-val">{{ row.actualValue }}</span>
+                <span class="val-sep">/</span>
+                <span class="threshold-val">{{ row.thresholdValue }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="发生时间" width="140" align="center">
+              <template #default="{ row }">
+                <span class="time-text">{{ formatTime(row.collectTime) }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
 
-      <article class="chart-card">
-        <div class="chart-head">
-          <h3>重点设备快照</h3>
-          <p>按主看指标的最新值降序展示重点设备。</p>
+      <div class="bottom-card shortcut-card-panel">
+        <div class="panel-header">
+          <div class="panel-title-group">
+            <span class="panel-icon bg-grad-shortcut-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>
+            </span>
+            <div class="panel-titles">
+              <h3>快捷功能通道</h3>
+              <p>高频业务功能一键直达</p>
+            </div>
+          </div>
         </div>
-        <Chart class="chart chart-md" :chart-option="deviceSnapshotOption" />
-      </article>
+        <div class="shortcut-grid">
+          <div v-for="sc in shortcuts" :key="sc.title" class="shortcut-item" @click="goToPage(sc.path)">
+            <div class="sc-icon-circle" :style="{ background: sc.color }">
+              <span class="sc-svg" v-html="sc.icon"></span>
+            </div>
+            <div class="sc-content">
+              <h4>{{ sc.title }}</h4>
+              <p>{{ sc.desc }}</p>
+            </div>
+            <div class="sc-arrow">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-
-    <section class="glass-panel table-panel">
-      <div class="section-head">
-        <div>
-          <p class="section-eyebrow">Latest Snapshot</p>
-          <h3>最新设备清单</h3>
-        </div>
-      </div>
-
-      <div v-if="!latestRecords.length" class="empty-panel">
-        <el-empty description="当前没有获取到最新快照数据" />
-      </div>
-
-      <el-table v-else :data="latestTableData" stripe class="snapshot-table">
-        <el-table-column prop="monitorName" label="设备名称" min-width="180" />
-        <el-table-column prop="groupLabel" label="所属分组" min-width="140" />
-        <el-table-column prop="metricLabel" label="主看指标" min-width="120" />
-        <el-table-column prop="metricValue" label="最新值" min-width="120" />
-        <el-table-column prop="recodeTime" label="记录时间" min-width="180" />
-      </el-table>
-    </section>
+    -->
   </div>
 </template>
 
 <script setup name="Index" lang="ts">
 import Chart from '@/components/Charts/Chart.vue';
 import type { EChartsOption } from 'echarts';
-import { getRecordAlarmDataSummary } from '@/api/ems/record/recordAlarmData';
-import { getLatestRecords } from '@/api/ems/record/recordIotenvInstant';
 import { getMonitorInfoTree } from '@/api/ems/base/baseMonitorInfo';
-import { formatValue } from './ems/report/iotReportShared';
-import { normalizeIotCurveRecord, readMetricValue, resolveIotCurveMetrics } from './ems/report/iotCurveShared';
+import { getRecordAlarmDataSummary, listRecordAlarmData } from '@/api/ems/record/recordAlarmData';
 
-interface GroupSnapshotItem {
-  label: string;
-  deviceCount: number;
-  avgValue: number;
-}
+// ---- type config ----
+const TYPE_MAP: Record<number, string> = { 5: '温度', 6: '温湿度', 7: '噪声', 8: '照度', 9: '气体浓度', 10: '振动' };
+const TYPE_COLOR: Record<number, string> = { 5: '#3b82f6', 6: '#10b981', 7: '#f59e0b', 8: '#8b5cf6', 9: '#ef4444', 10: '#6366f1' };
 
-const loading = ref(false);
-const latestRecords = ref<any[]>([]);
-const monitorTreeOptions = ref<any[]>([]);
-const alarmSummary = ref<Record<string, number>>({});
+// ---- module cache ----
+let cachedTypeCounts: Record<number, number> | null = null;
+let cachedAlarm: { total: number; handled: number; unhandled: number } | null = null;
 
-const lastUpdateTime = computed(() => {
-  return latestRecords.value.length ? latestRecords.value.map((item) => item.__timeKey).filter(Boolean).sort().at(-1) || '' : '';
-});
+// ---- data helpers ----
+const toNum = (v: unknown, fallback = 0) => { const n = Number(v); return Number.isFinite(n) ? n : fallback; };
 
-const getLeafNodes = (nodes, rootLabel = '') => {
-  let result = [];
-  (nodes || []).forEach((item) => {
-    const currentRootLabel = rootLabel || String(item.label || '未命名分组');
-    if (Array.isArray(item.children) && item.children.length > 0) {
-      result = result.concat(getLeafNodes(item.children, currentRootLabel));
-      return;
+const countLeavesByType = (nodes: any[]): Record<number, number> => {
+  const map: Record<number, number> = {};
+  const walk = (list: any[]) => {
+    for (const n of list || []) {
+      if (n.children?.length) { walk(n.children); continue; }
+      const t = Number(n.type ?? n.monitorType ?? 0);
+      if (t) map[t] = (map[t] || 0) + 1;
     }
-    if (item.code) {
-      result.push({
-        ...item,
-        __rootLabel: currentRootLabel
-      });
-    }
-  });
-  return result;
+  };
+  walk(nodes);
+  return map;
 };
 
-const leafNodeMap = computed(() => {
-  return getLeafNodes(monitorTreeOptions.value).reduce((accumulator, item) => {
-    accumulator[String(item.code)] = item;
-    return accumulator;
-  }, {});
-});
+// ---- state ----
+const loading = ref(false);
+const typeCounts = ref<Record<number, number>>({});
+const alarmHandled = ref(0);
+const alarmUnhandled = ref(0);
+const alarmList = ref<any[]>([]);
+const currentTime = ref('');
 
-const metricConfigs = computed(() => {
-  return resolveIotCurveMetrics(latestRecords.value, []);
-});
+// Router
+const router = useRouter();
 
-const primaryMetric = computed(() => metricConfigs.value[0] || null);
-const primaryMetricLabel = computed(() => (primaryMetric.value ? primaryMetric.value.label : '待识别'));
-
-const metricStats = computed(() => {
-  return metricConfigs.value.map((metric) => {
-    const values = latestRecords.value.map((item) => readMetricValue(item, metric)).filter((item): item is number => item !== null);
-    const latestValue = values.at(-1) ?? null;
-    const avgValue = values.length ? values.reduce((sum, item) => sum + item, 0) / values.length : 0;
-    const maxValue = values.length ? Math.max(...values) : 0;
-    return {
-      ...metric,
-      latestValue,
-      avgValue,
-      maxValue,
-      count: values.length
-    };
-  });
-});
-
-const groupSnapshot = computed<GroupSnapshotItem[]>(() => {
-  if (!primaryMetric.value) {
-    return [];
+// ---- shortcuts ----
+const shortcuts = [
+  {
+    title: '组态画面编辑器',
+    desc: '基于 Vue Flow 组态设计画面',
+    path: '/visualEditor',
+    color: 'rgba(59, 130, 246, 0.1)',
+    icon: `<svg viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>`
+  },
+  {
+    title: '设备监测点台账',
+    desc: '层级化设备台账及指标阈值',
+    path: '/ems/base/baseMonitorInfo',
+    color: 'rgba(99, 102, 241, 0.1)',
+    icon: `<svg viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>`
+  },
+  {
+    title: '异常告警中心',
+    desc: '越界异常处理与确认详情',
+    path: '/ems/record/recordAlarmData',
+    color: 'rgba(245, 158, 11, 0.1)',
+    icon: `<svg viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0"/></svg>`
+  },
+  {
+    title: '告警规则配置',
+    desc: '定制采集点高低越界规则',
+    path: '/ems/record/recordAlarmRule',
+    color: 'rgba(16, 185, 129, 0.1)',
+    icon: `<svg viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>`
   }
-  const bucket = {} as Record<string, number[]>;
-  latestRecords.value.forEach((item) => {
-    const monitorId = String(item.monitorId || item.monitorCode || '');
-    const rootLabel = leafNodeMap.value[monitorId]?.__rootLabel || '未归类';
-    const metricValue = readMetricValue(item, primaryMetric.value!);
-    if (!bucket[rootLabel]) {
-      bucket[rootLabel] = [];
+];
+
+// ---- KPI cards ----
+const kpiCards = computed(() => {
+  const temp = typeCounts.value[5] || 0;
+  const vib = typeCounts.value[10] || 0;
+  const env = Object.entries(typeCounts.value).filter(([k]) => k !== '10').reduce((s, [, v]) => s + v, 0);
+  const totalAlarms = alarmHandled.value + alarmUnhandled.value;
+  const unhandled = alarmUnhandled.value;
+
+  return [
+    {
+      label: '温度测点',
+      value: temp,
+      unit: '个',
+      color: '#3b82f6',
+      grad: 'linear-gradient(135deg, #3b82f6, #60a5fa)',
+      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"/></svg>`
+    },
+    {
+      label: '振动设备',
+      value: vib,
+      unit: '台',
+      color: '#6366f1',
+      grad: 'linear-gradient(135deg, #6366f1, #818cf8)',
+      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5v14M22 9v6M7 5v14M2 9v6"/></svg>`
+    },
+    {
+      label: '温湿度',
+      value: env,
+      unit: '个',
+      color: '#10b981',
+      grad: 'linear-gradient(135deg, #10b981, #34d399)',
+      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 22c1.25-6.84 5.37-12 11-14.7L22 2l-5.3 9C14 16.63 8.84 20.75 2 22z"/><path d="M12 22V12"/></svg>`
+    },
+    {
+      label: '告警总数',
+      value: totalAlarms,
+      unit: '条',
+      color: '#f59e0b',
+      grad: 'linear-gradient(135deg, #f59e0b, #fbbf24)',
+      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0"/></svg>`
+    },
+    {
+      label: '待处理',
+      value: unhandled,
+      unit: '条',
+      color: '#ef4444',
+      grad: 'linear-gradient(135deg, #ef4444, #f87171)',
+      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01"/></svg>`
     }
-    if (metricValue !== null) {
-      bucket[rootLabel].push(metricValue);
-    }
-  });
-
-  return Object.keys(bucket).map((label) => ({
-    label,
-    deviceCount: getLeafNodes(monitorTreeOptions.value).filter((item) => item.__rootLabel === label).length,
-    avgValue: bucket[label].length ? bucket[label].reduce((sum, item) => sum + item, 0) / bucket[label].length : 0
-  }));
+  ];
 });
 
-const latestTableData = computed(() => {
-  return latestRecords.value.slice(0, 12).map((item) => {
-    const monitorId = String(item.monitorId || item.monitorCode || '');
-    const metricValue = primaryMetric.value ? readMetricValue(item, primaryMetric.value) : null;
-    return {
-      monitorName: String(item.monitorName || leafNodeMap.value[monitorId]?.label || monitorId),
-      groupLabel: leafNodeMap.value[monitorId]?.__rootLabel || '未归类',
-      metricLabel: primaryMetric.value?.label || '--',
-      metricValue: primaryMetric.value?.unit ? `${formatValue(metricValue)} ${primaryMetric.value.unit}` : formatValue(metricValue),
-      recodeTime: item.__timeKey || '--'
-    };
-  });
-});
-
-const overviewCards = computed(() => [
-  {
-    label: '最新设备数',
-    value: latestRecords.value.length,
-    desc: '来自最新快照接口返回的设备条数。'
-  },
-  {
-    label: '活跃指标数',
-    value: metricConfigs.value.length,
-    desc: '根据最新快照里真实有值的字段自动识别。'
-  },
-  {
-    label: '报警总数',
-    value: Number(alarmSummary.value.totalCount || 0),
-    desc: '来自报警概览接口的累计统计。'
-  },
-  {
-    label: '未处理报警',
-    value: Number(alarmSummary.value.unhandledCount || 0),
-    desc: '优先关注待处理报警数量。'
-  }
-]);
-
-const logicNotes = computed(() => [
-  {
-    title: '设备数口径',
-    desc: '首页设备数直接使用最新快照接口返回条数，不做虚构补数。'
-  },
-  {
-    title: '指标口径',
-    desc: `活跃指标从最新快照里真实有值的字段识别得到，当前默认主看指标为 ${primaryMetricLabel.value}。`
-  },
-  {
-    title: '分组口径',
-    desc: '分组统计按设备树顶层节点聚合，分组均值使用主看指标在该分组最新快照中的平均值。'
-  }
-]);
-
-const metricOverviewOption = computed<EChartsOption | null>(() => {
-  if (!metricStats.value.length) {
-    return null;
-  }
+// ---- charts ----
+const typeBarOption = computed<EChartsOption | null>(() => {
+  const entries = Object.entries(typeCounts.value).filter(([, v]) => v > 0).sort((a, b) => b[1] - a[1]);
+  if (!entries.length) return null;
   return {
     tooltip: {
-      trigger: 'axis'
-    },
-    legend: {
-      top: 8,
-      data: ['平均值', '峰值']
-    },
-    grid: {
-      top: 54,
-      left: '10%',
-      right: '6%',
-      bottom: 36
-    },
-    xAxis: {
-      type: 'category',
-      data: metricStats.value.map((item) => item.label)
-    },
-    yAxis: {
-      type: 'value',
-      splitLine: {
-        lineStyle: {
-          type: 'dashed'
-        }
-      }
-    },
-    series: [
-      {
-        name: '平均值',
-        type: 'bar',
-        barWidth: 18,
-        data: metricStats.value.map((item) => Number(item.avgValue.toFixed(2))),
-        itemStyle: {
-          color: '#2563eb',
-          borderRadius: [6, 6, 0, 0]
-        }
-      },
-      {
-        name: '峰值',
-        type: 'bar',
-        barWidth: 18,
-        data: metricStats.value.map((item) => Number(item.maxValue.toFixed(2))),
-        itemStyle: {
-          color: '#14b8a6',
-          borderRadius: [6, 6, 0, 0]
-        }
-      }
-    ]
-  };
-});
-
-const alarmOverviewOption = computed<EChartsOption>(() => {
-  const totalCount = Number(alarmSummary.value.totalCount || 0);
-  const unhandledCount = Number(alarmSummary.value.unhandledCount || 0);
-  const handledCount = Number(alarmSummary.value.handledCount || 0);
-  return {
-    tooltip: {
-      trigger: 'item'
-    },
-    legend: {
-      bottom: 0
-    },
-    series: [
-      {
-        type: 'pie',
-        radius: ['48%', '72%'],
-        center: ['50%', '48%'],
-        label: {
-          formatter: '{b}\n{c}'
-        },
-        data: [
-          { name: '未处理', value: unhandledCount, itemStyle: { color: '#ef4444' } },
-          { name: '已处理', value: handledCount, itemStyle: { color: '#22c55e' } },
-          { name: '其余', value: Math.max(totalCount - unhandledCount - handledCount, 0), itemStyle: { color: '#94a3b8' } }
-        ]
-      }
-    ]
-  };
-});
-
-const groupOverviewOption = computed<EChartsOption | null>(() => {
-  if (!groupSnapshot.value.length) {
-    return null;
-  }
-  return {
-    tooltip: {
-      trigger: 'axis'
-    },
-    legend: {
-      top: 8,
-      data: ['设备数', `${primaryMetricLabel.value}均值`]
-    },
-    grid: {
-      top: 56,
-      left: '10%',
-      right: '8%',
-      bottom: 40
-    },
-    xAxis: {
-      type: 'category',
-      data: groupSnapshot.value.map((item) => item.label)
-    },
-    yAxis: [
-      { type: 'value', name: '设备数' },
-      { type: 'value', name: `${primaryMetricLabel.value}均值` }
-    ],
-    series: [
-      {
-        name: '设备数',
-        type: 'bar',
-        barWidth: 18,
-        data: groupSnapshot.value.map((item) => item.deviceCount),
-        itemStyle: {
-          color: '#0f766e',
-          borderRadius: [6, 6, 0, 0]
-        }
-      },
-      {
-        name: `${primaryMetricLabel.value}均值`,
-        type: 'line',
-        yAxisIndex: 1,
-        smooth: true,
-        data: groupSnapshot.value.map((item) => Number(item.avgValue.toFixed(2))),
-        lineStyle: {
-          color: '#2563eb',
-          width: 3
-        },
-        itemStyle: {
-          color: '#2563eb'
-        }
-      }
-    ]
-  };
-});
-
-const deviceSnapshotOption = computed<EChartsOption | null>(() => {
-  if (!primaryMetric.value) {
-    return null;
-  }
-  const topDevices = latestRecords.value
-    .map((item) => {
-      const monitorId = String(item.monitorId || item.monitorCode || '');
-      return {
-        monitorId,
-        monitorName: String(item.monitorName || leafNodeMap.value[monitorId]?.label || monitorId),
-        value: readMetricValue(item, primaryMetric.value!)
-      };
-    })
-    .filter((item) => item.value !== null)
-    .sort((left, right) => Number(right.value) - Number(left.value))
-    .slice(0, 10);
-
-  return {
-    tooltip: {
-      trigger: 'axis'
-    },
-    grid: {
-      top: 20,
-      left: '18%',
-      right: '6%',
-      bottom: 36
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
+      borderColor: '#e2e8f0',
+      borderWidth: 1,
+      textStyle: { color: '#1e293b', fontSize: 12 },
+      shadowColor: 'rgba(0, 0, 0, 0.05)',
+      shadowBlur: 10
     },
+    grid: { left: 80, right: 30, top: 15, bottom: 20 },
     xAxis: {
       type: 'value',
-      name: primaryMetric.value.unit ? `${primaryMetric.value.label}(${primaryMetric.value.unit})` : primaryMetric.value.label
+      minInterval: 1,
+      axisLabel: { fontSize: 11, color: '#64748b' },
+      splitLine: { lineStyle: { type: 'dashed', color: '#f1f5f9' } }
     },
     yAxis: {
       type: 'category',
-      data: topDevices.map((item) => item.monitorName.length > 12 ? `${item.monitorName.slice(0, 11)}...` : item.monitorName)
+      data: entries.map(([k]) => TYPE_MAP[Number(k)] || k),
+      axisLabel: { fontSize: 12, color: '#334155', fontWeight: 500 },
+      axisLine: { show: false },
+      axisTick: { show: false }
     },
-    series: [
-      {
-        type: 'bar',
-        data: topDevices.map((item) => item.value),
-        itemStyle: {
-          color: primaryMetric.value.color,
-          borderRadius: [0, 6, 6, 0]
-        }
-      }
-    ]
+    series: [{
+      type: 'bar',
+      barWidth: 14,
+      data: entries.map(([k, v]) => {
+        const baseColor = TYPE_COLOR[Number(k)] || '#64748b';
+        return {
+          value: v,
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 1,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: baseColor + '40' },
+                { offset: 1, color: baseColor }
+              ]
+            },
+            borderRadius: [0, 8, 8, 0]
+          }
+        };
+      })
+    }]
   };
 });
 
-const loadDashboard = async () => {
+const alarmPieOption = computed<EChartsOption | null>(() => {
+  const h = alarmHandled.value;
+  const u = alarmUnhandled.value;
+  if (!h && !u) return null;
+  const total = h + u;
+  const handledRate = total > 0 ? Math.round((h / total) * 100) : 0;
+
+  return {
+    color: ['#10b981', '#ef4444'],
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
+      borderColor: '#e2e8f0',
+      borderWidth: 1,
+      textStyle: { color: '#1e293b', fontSize: 12 }
+    },
+    legend: {
+      bottom: '2%',
+      left: 'center',
+      icon: 'circle',
+      itemWidth: 8,
+      itemHeight: 8,
+      textStyle: { color: '#64748b', fontSize: 11 }
+    },
+    title: {
+      text: `${handledRate}%`,
+      subtext: '处理率',
+      left: 'center',
+      top: '36%',
+      textStyle: {
+        fontSize: 22,
+        fontWeight: 'bold',
+        color: '#0f172a'
+      },
+      subtextStyle: {
+        fontSize: 12,
+        color: '#64748b'
+      }
+    },
+    series: [{
+      type: 'pie',
+      radius: ['58%', '78%'],
+      center: ['50%', '44%'],
+      avoidLabelOverlap: false,
+      label: { show: false },
+      emphasis: {
+        scale: true,
+        scaleSize: 5,
+        label: { show: false }
+      },
+      data: [
+        {
+          name: '已处理',
+          value: h,
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: '#10b981' },
+                { offset: 1, color: '#059669' }
+              ]
+            }
+          }
+        },
+        {
+          name: '待处理',
+          value: u,
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: '#ef4444' },
+                { offset: 1, color: '#dc2626' }
+              ]
+            }
+          }
+        }
+      ]
+    }]
+  };
+});
+
+// ---- helpers for alarm records ----
+const getAlarmLevelType = (level: string | number) => {
+  const lvl = String(level).toUpperCase();
+  if (lvl === '1' || lvl === 'CRITICAL' || lvl === 'H' || lvl === '3') return 'danger';
+  if (lvl === '2' || lvl === 'WARNING' || lvl === 'M' || lvl === '2') return 'warning';
+  return 'info';
+};
+
+const getAlarmLevelLabel = (level: string | number) => {
+  const lvl = String(level).toUpperCase();
+  if (lvl === '1' || lvl === 'CRITICAL' || lvl === 'H' || lvl === '3') return '紧急';
+  if (lvl === '2' || lvl === 'WARNING' || lvl === 'M' || lvl === '2') return '警告';
+  return '提醒';
+};
+
+const formatTime = (time: string | Date | undefined) => {
+  if (!time) return '--';
+  const date = new Date(time);
+  if (isNaN(date.getTime())) return String(time);
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+};
+
+const goToPage = (path: string) => {
+  router.push(path);
+};
+
+// ---- clock timer ----
+let timerId: number | null = null;
+const updateClock = () => {
+  const now = new Date();
+  const pad = (n: number) => String(n).padStart(2, '0');
+  currentTime.value = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
+};
+
+// ---- load ----
+const loadAll = async (force = false) => {
   loading.value = true;
   try {
-    const [latestRes, alarmRes, treeRes] = await Promise.all([getLatestRecords(), getRecordAlarmDataSummary(), getMonitorInfoTree({})]);
-    latestRecords.value = (latestRes.data || []).map((item) => normalizeIotCurveRecord(item));
-    alarmSummary.value = (alarmRes.data || {}) as Record<string, number>;
-    monitorTreeOptions.value = treeRes.data || [];
-  } finally {
-    loading.value = false;
-  }
+    if (force || !cachedTypeCounts) {
+      try {
+        const res = await getMonitorInfoTree({});
+        cachedTypeCounts = countLeavesByType(res.data || []);
+      } catch { cachedTypeCounts = {}; }
+    }
+    typeCounts.value = { ...cachedTypeCounts };
+
+    if (force || !cachedAlarm) {
+      try {
+        const r = await getRecordAlarmDataSummary();
+        const t = toNum(r.data?.totalCount);
+        const u = toNum(r.data?.unhandledCount);
+        cachedAlarm = { total: t, handled: t - u, unhandled: u };
+      } catch { cachedAlarm = { total: 0, handled: 0, unhandled: 0 }; }
+    }
+    alarmHandled.value = cachedAlarm.handled;
+    alarmUnhandled.value = cachedAlarm.unhandled;
+
+    // Load recent alarms
+    try {
+      const res = await listRecordAlarmData({ pageNum: 1, pageSize: 6 });
+      alarmList.value = res.rows || [];
+    } catch {
+      alarmList.value = [];
+    }
+  } finally { loading.value = false; }
 };
 
 onMounted(() => {
-  void loadDashboard();
+  void loadAll();
+  updateClock();
+  timerId = window.setInterval(updateClock, 1000);
+});
+
+onBeforeUnmount(() => {
+  if (timerId) {
+    clearInterval(timerId);
+  }
 });
 </script>
 
 <style lang="scss" scoped>
 .home-dashboard {
   min-height: calc(100vh - 84px);
-  background:
-    radial-gradient(circle at top right, rgba(37, 99, 235, 0.14), transparent 24%),
-    radial-gradient(circle at top left, rgba(20, 184, 166, 0.1), transparent 28%),
-    linear-gradient(180deg, #f4f8ff 0%, #f8fafc 100%);
+  padding: 24px;
+  background: #f1f5f9;
 }
 
-.hero-panel,
-.glass-panel,
-.chart-card,
-.overview-card {
-  border-radius: 24px;
-  border: 1px solid rgba(148, 163, 184, 0.18);
-  background: rgba(255, 255, 255, 0.92);
-  backdrop-filter: blur(12px);
-  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
-}
-
-.hero-panel {
-  display: grid;
-  grid-template-columns: minmax(0, 1.2fr) 320px;
-  gap: 20px;
-  padding: 28px;
-  margin-bottom: 18px;
-  background:
-    linear-gradient(135deg, rgba(15, 118, 110, 0.96), rgba(37, 99, 235, 0.92)),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
-  color: #ffffff;
-}
-
-.hero-eyebrow,
-.section-eyebrow {
-  margin: 0 0 8px;
-  font-size: 12px;
-  font-weight: 600;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-}
-
-.hero-eyebrow {
-  color: rgba(255, 255, 255, 0.72);
-}
-
-.hero-panel h1,
-.section-head h3,
-.chart-head h3 {
-  margin: 0;
-}
-
-.hero-panel h1 {
-  font-size: 34px;
-  line-height: 1.2;
-}
-
-.hero-desc {
-  margin: 16px 0 0;
-  max-width: 760px;
-  line-height: 1.8;
-  color: rgba(255, 255, 255, 0.84);
-}
-
-.hero-tags {
+// Header
+.db-header {
   display: flex;
-  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+  padding: 24px 30px;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(226, 232, 240, 0.8);
+}
+.db-header-left {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  h1 {
+    margin: 4px 0 2px;
+    font-size: 24px;
+    color: #0f172a;
+    font-weight: 800;
+    letter-spacing: -0.5px;
+  }
+  .subtitle {
+    margin: 0;
+    font-size: 14px;
+    color: #64748b;
+  }
+}
+.db-badge-row {
+  display: flex;
+  align-items: center;
+}
+.db-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #3b82f6;
+  background: rgba(59, 130, 246, 0.08);
+  border-radius: 99px;
+  letter-spacing: 0.5px;
+
+  .pulse-dot {
+    width: 6px;
+    height: 6px;
+    background-color: #10b981;
+    border-radius: 50%;
+    animation: pulse 2s infinite;
+  }
+}
+.db-header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.db-clock-pill {
+  display: flex;
+  align-items: center;
   gap: 8px;
-  margin-top: 18px;
-}
-
-.hero-side {
-  display: grid;
-  gap: 16px;
-}
-
-.hero-side-card {
-  padding: 18px;
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.14);
-  border: 1px solid rgba(255, 255, 255, 0.18);
-}
-
-.hero-side-card span {
-  display: block;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.72);
-}
-
-.hero-side-card strong {
-  display: block;
-  margin-top: 10px;
-  font-size: 22px;
-  font-weight: 700;
-}
-
-.hero-side-card p {
-  margin: 10px 0 0;
-  color: rgba(255, 255, 255, 0.78);
-  line-height: 1.6;
-  font-size: 12px;
-}
-
-.overview-grid,
-.logic-grid,
-.chart-grid {
-  display: grid;
-  gap: 16px;
-}
-
-.overview-grid {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  margin-bottom: 18px;
-}
-
-.overview-card {
-  padding: 18px;
-}
-
-.overview-label {
-  display: block;
-  color: #64748b;
-  font-size: 12px;
-}
-
-.overview-value {
-  display: block;
-  margin-top: 12px;
-  font-size: 28px;
-  font-weight: 700;
-  color: #0f172a;
-}
-
-.overview-desc {
-  margin: 10px 0 0;
-  color: #64748b;
-  line-height: 1.6;
+  padding: 8px 16px;
+  border-radius: 99px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
   font-size: 13px;
+  font-weight: 500;
+  color: #475569;
+
+  .clock-icon {
+    width: 15px;
+    height: 15px;
+    color: #64748b;
+  }
+}
+.refresh-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 99px;
+  padding: 8px 20px;
+  font-weight: 500;
+  height: auto;
+  border: none;
+  background: linear-gradient(135deg, #3b82f6, #2563eb);
+  color: #ffffff;
+  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
+  transition: all 0.3s ease;
+  cursor: pointer;
+
+  &:hover {
+    background: linear-gradient(135deg, #2563eb, #1d4ed8);
+    box-shadow: 0 6px 14px rgba(59, 130, 246, 0.4);
+    transform: translateY(-1px);
+    color: #ffffff;
+  }
+
+  .refresh-icon {
+    width: 14px;
+    height: 14px;
+  }
 }
 
-.glass-panel,
-.table-panel {
-  padding: 18px 20px;
-  margin-bottom: 18px;
+// KPI
+.kpi-row {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 16px;
+  margin-bottom: 24px;
 }
+.kpi-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 24px 20px;
+  background: #ffffff;
+  border-radius: 16px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
 
-.section-head,
-.chart-head {
-  margin-bottom: 14px;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background: var(--accent-grad);
+    opacity: 0.8;
+  }
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.05);
+    border-color: var(--accent);
+  }
 }
+.kpi-icon {
+  width: 46px;
+  height: 46px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  flex-shrink: 0;
 
-.section-eyebrow {
-  color: #2563eb;
+  span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+  }
 }
-
-.logic-grid {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+.kpi-body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
 }
-
-.logic-card {
-  padding: 16px;
-  border-radius: 18px;
-  border: 1px solid rgba(226, 232, 240, 0.92);
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
-    linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(20, 184, 166, 0.04));
-}
-
-.logic-title {
+.kpi-num {
+  font-size: 26px;
+  font-weight: 800;
   color: #0f172a;
-  font-size: 15px;
-  font-weight: 700;
-}
+  line-height: 1;
+  letter-spacing: -0.5px;
 
-.logic-desc {
-  margin: 10px 0 0;
-  color: #64748b;
-  line-height: 1.7;
+  small {
+    margin-left: 4px;
+    font-size: 13px;
+    font-weight: 600;
+    color: #94a3b8;
+  }
+}
+.kpi-title {
   font-size: 13px;
-}
-
-.two-col {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  margin-bottom: 18px;
-}
-
-.chart-card {
-  padding: 16px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
-    linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(20, 184, 166, 0.04));
-}
-
-.chart-head p {
-  margin: 6px 0 0;
+  font-weight: 500;
   color: #64748b;
-  line-height: 1.6;
-  font-size: 12px;
 }
 
-.chart {
+// Charts
+.chart-row {
+  display: grid;
+  grid-template-columns: 1.2fr 0.8fr;
+  gap: 24px;
+  margin-bottom: 24px;
+}
+.chart-panel {
+  padding: 24px;
+  background: #ffffff;
+  border-radius: 16px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+  display: flex;
+  flex-direction: column;
+  min-width: 0; // 防止子元素撑开容器导致布局挤压变形
+}
+.panel-header-simple {
+  margin-bottom: 16px;
+}
+.panel-title-with-bar, .panel-title-with-bar2 {
+  font-size: 16px;
+  font-weight: 700;
+  color: #1e293b;
+  position: relative;
+  padding-left: 12px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 3px;
+    width: 4px;
+    height: 14px;
+    border-radius: 2px;
+  }
+}
+.panel-title-with-bar::before {
+  background: #3b82f6;
+}
+.panel-title-with-bar2::before {
+  background: #10b981;
+}
+.chart-sub {
+  font-size: 12px;
+  color: #94a3b8;
+  margin-top: 4px;
+  font-weight: 400;
+}
+.chart-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 260px;
+}
+.chart-box {
   width: 100%;
+  height: 260px;
 }
 
-.chart-lg {
-  height: 42vh;
-  min-height: 320px;
+// Bottom layout
+.bottom-row {
+  display: grid;
+  grid-template-columns: 1.2fr 0.8fr;
+  gap: 24px;
+}
+.bottom-card {
+  background: #ffffff;
+  border-radius: 16px;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  min-width: 0; // 防止内部 el-table 撑开容器导致挤压右侧快捷通道
+}
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.panel-title-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.panel-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+}
+.bg-grad-alarm-icon {
+  background: linear-gradient(135deg, #ef4444, #f43f5e);
+}
+.bg-grad-shortcut-icon {
+  background: linear-gradient(135deg, #6366f1, #4f46e5);
+}
+.panel-titles {
+  h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 700;
+    color: #1e293b;
+  }
+  p {
+    margin: 2px 0 0;
+    font-size: 12px;
+    color: #94a3b8;
+  }
+}
+.more-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 600;
+
+  .arrow-icon {
+    width: 12px;
+    height: 12px;
+    transition: transform 0.2s ease;
+  }
+
+  &:hover .arrow-icon {
+    transform: translateX(2px);
+  }
 }
 
-.chart-md {
-  height: 38vh;
-  min-height: 280px;
+// Alarm Table Custom
+.alarm-table-wrapper {
+  flex: 1;
+
+  :deep(.el-table) {
+    --el-table-border-color: #f1f5f9;
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid #f1f5f9;
+  }
+
+  :deep(.el-table__header-wrapper) {
+    th {
+      font-size: 12px;
+    }
+  }
+
+  :deep(.el-table__row) {
+    font-size: 12px;
+    color: #334155;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: #f8fafc !important;
+    }
+  }
+}
+.alarm-title-text {
+  font-weight: 500;
+  color: #1e293b;
+}
+.status-tag, .level-tag {
+  font-weight: 600;
+  border-radius: 6px;
+}
+.actual-val {
+  color: #ef4444;
+  font-weight: 700;
+}
+.val-sep {
+  margin: 0 4px;
+  color: #cbd5e1;
+}
+.threshold-val {
+  color: #64748b;
+  font-weight: 500;
+}
+.time-text {
+  color: #64748b;
 }
 
-.empty-panel {
-  padding: 32px 0;
+// Shortcut Card Custom
+.shortcut-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+  flex: 1;
+}
+.shortcut-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 14px 18px;
+  border-radius: 12px;
+  background: #f8fafc;
+  border: 1px solid #f1f5f9;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    background: #ffffff;
+    border-color: #e2e8f0;
+    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.05);
+    transform: translateY(-2px);
+
+    .sc-arrow {
+      color: #3b82f6;
+      transform: translateX(2px);
+    }
+  }
+}
+.sc-icon-circle {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  .sc-svg {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+  }
+}
+.sc-content {
+  flex: 1;
+  min-width: 0;
+
+  h4 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 700;
+    color: #1e293b;
+  }
+  p {
+    margin: 4px 0 0;
+    font-size: 11px;
+    color: #94a3b8;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+.sc-arrow {
+  color: #cbd5e1;
+  display: flex;
+  align-items: center;
+  transition: all 0.2s ease;
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
 }
 
-@media (max-width: 1200px) {
-  .hero-panel,
-  .overview-grid,
-  .logic-grid,
-  .two-col {
+// Animations & Keyframes
+@keyframes pulse {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
+  }
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
+  }
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+  }
+}
+
+// Responsive
+@media (max-width: 1400px) {
+  .kpi-row {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (max-width: 1100px) {
+  .chart-row, .bottom-row {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+}
+@media (max-width: 768px) {
+  .kpi-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .db-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+}
+@media (max-width: 480px) {
+  .kpi-row {
     grid-template-columns: 1fr;
   }
 }
-
-@media (max-width: 768px) {
-  .hero-panel,
-  .glass-panel,
-  .chart-card,
-  .overview-card {
-    padding: 16px;
-    border-radius: 20px;
-  }
-
-  .hero-panel h1 {
-    font-size: 26px;
-  }
-}
 </style>