From 7b0221e130c388b4deaf08344a61a2318e17a11e Mon Sep 17 00:00:00 2001
From: zch <zangch@mesnac.com>
Date: Tue, 9 Jun 2026 14:48:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(index):=E4=BF=AE=E6=94=B9=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/index.vue | 1544 ++++++++++++++++++++++++++-----------------
 1 file changed, 934 insertions(+), 610 deletions(-)

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>