diff --git a/src/style/element/index.scss b/src/style/element/index.scss
index 0c2de8d..d2bde07 100644
--- a/src/style/element/index.scss
+++ b/src/style/element/index.scss
@@ -3,22 +3,22 @@
     'white': #ffffff,
     'black': #000000,
     'primary': (
-      'base': #4d70ff
+      'base': #22d3ee
     ),
     'success': (
-      'base': #67c23a
+      'base': #10b981
     ),
     'warning': (
-      'base': #e6a23c
+      'base': #facc15
     ),
     'danger': (
-      'base': #f56c6c
+      'base': #ef4444
     ),
     'error': (
-      'base': #f56c6c
+      'base': #ef4444
     ),
     'info': (
-      'base': #909399
+      'base': #64748b
     )
   )
 );
diff --git a/src/style/main.scss b/src/style/main.scss
index 5698789..b9d0119 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -29,7 +29,8 @@
 }
 
 #nprogress .bar {
-  background: #29d !important;
+  background: linear-gradient(90deg, #00e5ff, #facc15) !important;
+  box-shadow: 0 0 16px rgba(0, 229, 255, 0.65);
 }
 .gva-customer-icon {
   @apply w-4 h-4;
@@ -58,3 +59,1010 @@
     outline: none;
   }
 }
+
+:root {
+  --sp-bg-deep: #050812;
+  --sp-bg-panel: rgba(9, 18, 35, 0.88);
+  --sp-bg-panel-soft: rgba(15, 27, 48, 0.78);
+  --sp-border: rgba(74, 222, 255, 0.18);
+  --sp-border-strong: rgba(74, 222, 255, 0.42);
+  --sp-cyan: #22d3ee;
+  --sp-blue: #2563eb;
+  --sp-amber: #facc15;
+  --sp-danger: #ef4444;
+  --sp-text: #d8e7f8;
+  --sp-text-muted: #8ba4bd;
+  --sp-shadow: 0 12px 36px rgba(0, 0, 0, 0.32);
+}
+
+html,
+body,
+#app {
+  background:
+    radial-gradient(circle at 14% 10%, rgba(37, 99, 235, 0.2), transparent 30%),
+    radial-gradient(circle at 86% 82%, rgba(34, 211, 238, 0.14), transparent 28%),
+    linear-gradient(135deg, #050812 0%, #0b1322 48%, #05070d 100%) !important;
+  color: var(--sp-text);
+}
+
+body {
+  color-scheme: dark;
+}
+
+#app {
+  position: relative;
+  isolation: isolate;
+  background-color: var(--sp-bg-deep) !important;
+
+  &::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    background-image:
+      linear-gradient(rgba(34, 211, 238, 0.045) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(34, 211, 238, 0.045) 1px, transparent 1px),
+      linear-gradient(135deg, transparent 0 46%, rgba(250, 204, 21, 0.035) 47%, transparent 49% 100%);
+    background-size: 42px 42px, 42px 42px, 220px 220px;
+    mask-image: radial-gradient(ellipse at center, #000 22%, rgba(0, 0, 0, 0.78) 62%, transparent 100%);
+    animation: spGridDrift 26s linear infinite;
+  }
+
+  &::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    background:
+      repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, 0.018) 18px 19px),
+      radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.46) 100%);
+  }
+}
+
+#app .bg-gray-50,
+#app .dark\:bg-slate-800,
+#app .dark\:bg-slate-900,
+#app .bg-white {
+  background-color: transparent !important;
+}
+
+#app .text-slate-700,
+#app .text-gray-800,
+#app .dark\:text-slate-300,
+#app .dark\:text-gray-400 {
+  color: var(--sp-text) !important;
+}
+
+#gva-base-load-dom {
+  position: relative;
+  min-height: 100%;
+  padding: 2px 0 12px;
+  background:
+    linear-gradient(180deg, rgba(7, 14, 26, 0.72), rgba(5, 8, 18, 0.58)),
+    radial-gradient(circle at 50% 0, rgba(34, 211, 238, 0.08), transparent 42%) !important;
+}
+
+.gva-industrial-layout {
+  position: relative;
+  color: var(--sp-text) !important;
+  background:
+    radial-gradient(circle at 20% 12%, rgba(34, 211, 238, 0.1), transparent 24%),
+    linear-gradient(135deg, #050812, #0b1322 54%, #05070d) !important;
+}
+
+.gva-industrial-header {
+  color: var(--sp-text) !important;
+  background:
+    linear-gradient(90deg, rgba(34, 211, 238, 0.08), transparent 22% 78%, rgba(250, 204, 21, 0.06)),
+    linear-gradient(180deg, rgba(13, 25, 47, 0.96), rgba(6, 12, 24, 0.94)) !important;
+  border-bottom: 1px solid rgba(34, 211, 238, 0.22);
+  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.34), inset 0 -1px 0 rgba(34, 211, 238, 0.1) !important;
+  backdrop-filter: blur(14px) saturate(1.2);
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 18px;
+    right: 18px;
+    bottom: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.72), rgba(250, 204, 21, 0.46), transparent);
+  }
+
+  .font-bold {
+    color: #ecfeff;
+    letter-spacing: 0.04em;
+    text-shadow: 0 0 18px rgba(34, 211, 238, 0.3);
+  }
+
+  .el-breadcrumb__inner,
+  .el-breadcrumb__separator {
+    color: var(--sp-text-muted) !important;
+  }
+
+  .rounded-full {
+    color: #dffaff;
+    background: linear-gradient(145deg, rgba(34, 211, 238, 0.12), rgba(7, 14, 26, 0.7)) !important;
+    border-color: rgba(34, 211, 238, 0.24) !important;
+    box-shadow: inset 0 0 12px rgba(34, 211, 238, 0.08), 0 0 14px rgba(0, 0, 0, 0.18) !important;
+
+    &:hover {
+      border-color: rgba(34, 211, 238, 0.62) !important;
+      box-shadow: 0 0 18px rgba(34, 211, 238, 0.2), inset 0 0 12px rgba(34, 211, 238, 0.1) !important;
+    }
+  }
+}
+
+.gva-industrial-main {
+  background:
+    linear-gradient(180deg, rgba(5, 8, 18, 0.2), rgba(5, 8, 18, 0.58)),
+    repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, 0.012) 18px 19px);
+}
+
+.gva-industrial-aside {
+  overflow: hidden;
+  color: var(--sp-text) !important;
+  background:
+    linear-gradient(180deg, rgba(13, 25, 47, 0.95), rgba(6, 12, 24, 0.9)),
+    radial-gradient(circle at 50% 0, rgba(34, 211, 238, 0.12), transparent 48%) !important;
+  border-right: 1px solid rgba(34, 211, 238, 0.2) !important;
+  box-shadow: 10px 0 32px rgba(0, 0, 0, 0.25), inset -1px 0 0 rgba(34, 211, 238, 0.06) !important;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background:
+      linear-gradient(180deg, transparent, rgba(34, 211, 238, 0.04), transparent),
+      repeating-linear-gradient(0deg, transparent 0 34px, rgba(34, 211, 238, 0.035) 34px 35px);
+  }
+
+  .el-scrollbar,
+  .el-menu {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+.gva-industrial-collapse {
+  z-index: 2;
+  color: #67e8f9 !important;
+  background: rgba(5, 12, 24, 0.86) !important;
+  border: 1px solid rgba(34, 211, 238, 0.32);
+  box-shadow: 0 0 16px rgba(34, 211, 238, 0.12), inset 0 0 10px rgba(34, 211, 238, 0.08);
+}
+
+.gva-industrial-card {
+  position: relative;
+  overflow: hidden;
+  color: var(--sp-text) !important;
+  background:
+    radial-gradient(circle at 0 0, rgba(34, 211, 238, 0.1), transparent 34%),
+    linear-gradient(145deg, rgba(15, 27, 48, 0.92), rgba(7, 13, 26, 0.86)) !important;
+  border: 1px solid rgba(34, 211, 238, 0.18);
+  border-radius: 12px !important;
+  box-shadow: var(--sp-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  animation: spPanelGlow 6s ease-in-out infinite;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    z-index: 3;
+    pointer-events: none;
+    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0) 14%, #67e8f9 50%, rgba(34, 211, 238, 0) 86%, transparent);
+    background-size: 200% 100%;
+    animation: spLineFlow 3.4s linear infinite;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 7px;
+    z-index: 3;
+    pointer-events: none;
+    background-image: linear-gradient(#67e8f9, #67e8f9), linear-gradient(#67e8f9, #67e8f9),
+      linear-gradient(#67e8f9, #67e8f9), linear-gradient(#67e8f9, #67e8f9),
+      linear-gradient(#67e8f9, #67e8f9), linear-gradient(#67e8f9, #67e8f9),
+      linear-gradient(#67e8f9, #67e8f9), linear-gradient(#67e8f9, #67e8f9);
+    background-repeat: no-repeat;
+    background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px;
+    background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom,
+      right bottom;
+    animation: spCornerPulse 2.6s ease-in-out infinite;
+  }
+
+  .text-base {
+    color: #eaf8ff;
+    letter-spacing: 0.03em;
+    text-shadow: 0 0 14px rgba(34, 211, 238, 0.22);
+  }
+}
+
+.gva-container,
+.gva-container2 {
+  background: transparent !important;
+}
+
+.gva-table-box,
+.gva-search-box,
+.gva-form-box {
+  position: relative;
+  overflow: hidden;
+  color: var(--sp-text) !important;
+  background:
+    linear-gradient(145deg, rgba(34, 211, 238, 0.07), transparent 30%),
+    linear-gradient(135deg, rgba(15, 27, 48, 0.92), rgba(7, 13, 26, 0.86)) !important;
+  border: 1px solid var(--sp-border);
+  border-radius: 10px !important;
+  box-shadow: var(--sp-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  animation: spPanelGlow 6s ease-in-out infinite;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    z-index: 3;
+    pointer-events: none;
+    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0) 14%, #67e8f9 50%, rgba(34, 211, 238, 0) 86%, transparent);
+    background-size: 200% 100%;
+    animation: spLineFlow 3.4s linear infinite;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 7px;
+    z-index: 3;
+    pointer-events: none;
+    background-image: linear-gradient(#67e8f9, #67e8f9), linear-gradient(#67e8f9, #67e8f9),
+      linear-gradient(#67e8f9, #67e8f9), linear-gradient(#67e8f9, #67e8f9),
+      linear-gradient(#67e8f9, #67e8f9), linear-gradient(#67e8f9, #67e8f9),
+      linear-gradient(#67e8f9, #67e8f9), linear-gradient(#67e8f9, #67e8f9);
+    background-repeat: no-repeat;
+    background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px;
+    background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom,
+      right bottom;
+    animation: spCornerPulse 2.6s ease-in-out infinite;
+  }
+}
+
+.gva-btn-list {
+  position: relative;
+  z-index: 1;
+}
+
+.el-card,
+.el-dialog,
+.el-popover,
+.el-dropdown__popper .el-dropdown-menu,
+.el-message-box,
+.el-drawer {
+  color: var(--sp-text) !important;
+  background:
+    linear-gradient(145deg, rgba(18, 32, 55, 0.96), rgba(8, 13, 25, 0.95)) !important;
+  border: 1px solid var(--sp-border) !important;
+  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
+}
+
+.el-card {
+  border-radius: 10px !important;
+}
+
+.el-card__header,
+.el-dialog__header,
+.el-drawer__header {
+  color: #eaf8ff !important;
+  border-bottom: 1px solid rgba(34, 211, 238, 0.18) !important;
+  background: linear-gradient(90deg, rgba(34, 211, 238, 0.12), transparent) !important;
+}
+
+.el-input__wrapper,
+.el-textarea__inner,
+.el-select__wrapper,
+.el-date-editor.el-input__wrapper,
+.el-cascader .el-input__wrapper {
+  color: var(--sp-text) !important;
+  background: rgba(5, 12, 24, 0.72) !important;
+  border: 1px solid rgba(34, 211, 238, 0.18) !important;
+  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.04), inset 0 0 18px rgba(34, 211, 238, 0.035) !important;
+
+  &:hover {
+    border-color: rgba(34, 211, 238, 0.4) !important;
+  }
+
+  &.is-focus,
+  &.is-focused {
+    border-color: rgba(34, 211, 238, 0.7) !important;
+    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.34), 0 0 18px rgba(34, 211, 238, 0.14) !important;
+  }
+}
+
+.el-input__inner,
+.el-textarea__inner,
+.el-select__placeholder,
+.el-select__selected-item {
+  color: var(--sp-text) !important;
+}
+
+.el-input__inner::placeholder,
+.el-textarea__inner::placeholder {
+  color: rgba(139, 164, 189, 0.72) !important;
+}
+
+.el-button {
+  border-radius: 6px !important;
+  letter-spacing: 0.02em;
+  color: #dffaff;
+  background:
+    linear-gradient(180deg, rgba(34, 211, 238, 0.16), rgba(37, 99, 235, 0.18)),
+    rgba(6, 12, 24, 0.78) !important;
+  border-color: rgba(34, 211, 238, 0.3) !important;
+  box-shadow: inset 0 0 14px rgba(34, 211, 238, 0.08);
+
+  &:hover,
+  &:focus {
+    color: #ffffff !important;
+    border-color: rgba(34, 211, 238, 0.66) !important;
+    box-shadow: 0 0 18px rgba(34, 211, 238, 0.18), inset 0 0 14px rgba(34, 211, 238, 0.12);
+  }
+
+  &.el-button--primary {
+    color: #031018 !important;
+    background: linear-gradient(135deg, #67e8f9, #22d3ee 48%, #60a5fa) !important;
+    border-color: rgba(103, 232, 249, 0.78) !important;
+    box-shadow: 0 0 22px rgba(34, 211, 238, 0.28);
+  }
+
+  &.el-button--warning {
+    color: #140f02 !important;
+    background: linear-gradient(135deg, #fde68a, #facc15) !important;
+    border-color: rgba(250, 204, 21, 0.76) !important;
+  }
+
+  &.el-button--danger {
+    color: #fff !important;
+    background: linear-gradient(135deg, #fb7185, #ef4444) !important;
+    border-color: rgba(248, 113, 113, 0.7) !important;
+  }
+}
+
+.el-table {
+  --el-table-header-bg-color: rgba(12, 25, 45, 0.96);
+  --el-table-tr-bg-color: rgba(8, 15, 30, 0.72);
+  --el-table-row-hover-bg-color: rgba(34, 211, 238, 0.09);
+  --el-table-border-color: rgba(34, 211, 238, 0.12);
+  color: var(--sp-text) !important;
+  background: rgba(5, 10, 20, 0.48) !important;
+  border-radius: 8px;
+  overflow: hidden;
+
+  th.el-table__cell {
+    color: #a5f3fc !important;
+    background:
+      linear-gradient(90deg, rgba(34, 211, 238, 0.14), rgba(250, 204, 21, 0.04)),
+      rgba(12, 25, 45, 0.96) !important;
+    border-bottom: 1px solid rgba(34, 211, 238, 0.2) !important;
+    text-shadow: 0 0 12px rgba(34, 211, 238, 0.24);
+  }
+
+  tr,
+  td.el-table__cell {
+    background: transparent !important;
+    border-color: rgba(34, 211, 238, 0.08) !important;
+  }
+
+  .el-table__row:nth-child(even) {
+    background: rgba(34, 211, 238, 0.025) !important;
+  }
+
+  .el-table__row:hover > td.el-table__cell {
+    color: #f8fcff !important;
+    background: linear-gradient(90deg, rgba(34, 211, 238, 0.13), rgba(37, 99, 235, 0.08)) !important;
+  }
+}
+
+.el-pagination {
+  color: var(--sp-text-muted) !important;
+
+  button,
+  .el-pager li {
+    color: var(--sp-text-muted) !important;
+    background: rgba(7, 14, 26, 0.82) !important;
+    border-color: rgba(34, 211, 238, 0.18) !important;
+  }
+
+  .el-pager li.is-active {
+    color: #031018 !important;
+    background: linear-gradient(135deg, #67e8f9, #22d3ee) !important;
+    box-shadow: 0 0 14px rgba(34, 211, 238, 0.26);
+  }
+}
+
+.el-menu {
+  background: transparent !important;
+  border: none !important;
+
+  .el-menu-item,
+  .el-sub-menu__title {
+    margin: 4px 0;
+    color: var(--sp-text-muted) !important;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    transition: all 0.2s ease;
+
+    &:hover {
+      color: #eaf8ff !important;
+      background: rgba(34, 211, 238, 0.08) !important;
+      border-color: rgba(34, 211, 238, 0.18);
+    }
+  }
+
+  .el-menu-item.is-active,
+  .el-sub-menu.is-active > .el-sub-menu__title {
+    color: #ffffff !important;
+    background:
+      linear-gradient(90deg, rgba(34, 211, 238, 0.2), rgba(37, 99, 235, 0.14)) !important;
+    border-color: rgba(34, 211, 238, 0.35);
+    box-shadow: inset 3px 0 0 var(--sp-cyan), 0 0 18px rgba(34, 211, 238, 0.1);
+  }
+}
+
+.el-tabs {
+  --el-tabs-header-height: 36px;
+}
+
+.el-tabs__nav-wrap::after {
+  background-color: rgba(34, 211, 238, 0.12) !important;
+}
+
+.el-tabs__item {
+  color: var(--sp-text-muted) !important;
+
+  &.is-active {
+    color: #67e8f9 !important;
+  }
+}
+
+.el-tag {
+  color: #a5f3fc !important;
+  background: rgba(34, 211, 238, 0.1) !important;
+  border-color: rgba(34, 211, 238, 0.3) !important;
+}
+
+.el-popper,
+.el-picker-panel,
+.el-select-dropdown,
+.el-cascader__dropdown {
+  color: var(--sp-text) !important;
+  background: rgba(7, 14, 26, 0.98) !important;
+  border: 1px solid rgba(34, 211, 238, 0.22) !important;
+  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.46) !important;
+}
+
+/* stronger hud/industrial layer */
+.gva-industrial-layout {
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    background:
+      radial-gradient(circle at 10% 14%, rgba(34, 211, 238, 0.12), transparent 30%),
+      radial-gradient(circle at 90% 84%, rgba(37, 99, 235, 0.15), transparent 28%);
+  }
+}
+
+#gva-base-load-dom::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    linear-gradient(
+      180deg,
+      transparent 0%,
+      rgba(34, 211, 238, 0.055) 42%,
+      rgba(34, 211, 238, 0.02) 55%,
+      transparent 100%
+    );
+  mix-blend-mode: screen;
+  animation: spScanSweep 8s ease-in-out infinite;
+}
+
+.gva-industrial-card,
+.gva-table-box,
+.gva-search-box,
+.gva-form-box {
+  position: relative;
+
+  .el-table,
+  .el-form {
+    position: relative;
+    z-index: 1;
+  }
+}
+
+/* masterStation unified sci-tech/industrial skin */
+.master-station-theme {
+  color: var(--sp-text);
+
+  .project-overview,
+  .device-detail-page,
+  .detail-content,
+  .line-content,
+  .config-content,
+  .trend-content {
+    color: var(--sp-text) !important;
+  }
+
+  .project-overview {
+    background:
+      linear-gradient(180deg, rgba(7, 14, 26, 0.64), rgba(5, 8, 18, 0.52)),
+      repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, 0.01) 18px 19px) !important;
+  }
+
+  .overview-card,
+  .alarm-list,
+  .alarm-trend,
+  .alarm-card,
+  .tabs-box,
+  .detail-card,
+  .info-box,
+  .alarms-box,
+  .trend-content > .left,
+  .trend-content > .right .top,
+  .trend-content > .right .bottom,
+  .config-content > .left,
+  .config-content > .right,
+  .chart-card {
+    background:
+      linear-gradient(145deg, rgba(34, 211, 238, 0.08), transparent 26%),
+      linear-gradient(140deg, rgba(15, 27, 48, 0.94), rgba(7, 13, 26, 0.9)) !important;
+    border: 1px solid rgba(34, 211, 238, 0.2) !important;
+    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
+    border-radius: 10px !important;
+    color: var(--sp-text) !important;
+  }
+
+  .alarm-title,
+  .list-title,
+  .title,
+  .project-name,
+  .project-option-name,
+  .chart-title {
+    color: #e8f8ff !important;
+    text-shadow: 0 0 12px rgba(34, 211, 238, 0.22);
+  }
+
+  .project-address,
+  .project-option-address,
+  .alarm-stat-label,
+  .alarm-labels,
+  .chart-unit,
+  .fullscreen-icon,
+  .device-location,
+  .device-channels {
+    color: var(--sp-text-muted) !important;
+  }
+
+  .tab {
+    color: #8ba4bd !important;
+
+    &:hover {
+      color: #9eeeff !important;
+    }
+
+    &.active {
+      color: #67e8f9 !important;
+
+      &::after {
+        background: linear-gradient(90deg, #67e8f9, #60a5fa) !important;
+        box-shadow: 0 0 12px rgba(34, 211, 238, 0.4);
+      }
+    }
+  }
+
+  .dot {
+    background: linear-gradient(180deg, #67e8f9, #2563eb) !important;
+    box-shadow: 0 0 10px rgba(34, 211, 238, 0.46);
+  }
+
+  .map-container {
+    border-color: rgba(34, 211, 238, 0.25) !important;
+    background: radial-gradient(circle at 50% 45%, rgba(34, 211, 238, 0.12), rgba(3, 9, 18, 0.86)) !important;
+  }
+
+  .project-radio-item {
+    border-color: rgba(34, 211, 238, 0.24) !important;
+    background: rgba(8, 15, 28, 0.74) !important;
+
+    &.is-checked {
+      border-color: rgba(34, 211, 238, 0.62) !important;
+      background: linear-gradient(90deg, rgba(34, 211, 238, 0.14), rgba(37, 99, 235, 0.1)) !important;
+    }
+  }
+
+  .alarm-stat-value,
+  .alarm-values .value-item {
+    color: #eaf8ff !important;
+  }
+
+  .alarm-stat-value.danger,
+  .alarm-values .value-item.danger,
+  .alarm-values .value-item.offline {
+    color: #fb7185 !important;
+    text-shadow: 0 0 14px rgba(239, 68, 68, 0.26);
+  }
+
+  .alarm-values .value-item.online {
+    color: #34d399 !important;
+    text-shadow: 0 0 14px rgba(52, 211, 153, 0.24);
+  }
+
+  .project-icon,
+  .alarm-icon.device-icon {
+    background: linear-gradient(135deg, #67e8f9, #2563eb) !important;
+    box-shadow: 0 0 16px rgba(34, 211, 238, 0.3);
+  }
+
+  .alarm-icon.line-icon {
+    background: linear-gradient(135deg, #6ee7b7, #10b981) !important;
+  }
+
+  .alarm-icon.warn-icon {
+    background: linear-gradient(135deg, #fb7185, #ef4444) !important;
+  }
+
+  .device-grid {
+    background: transparent !important;
+  }
+
+  .device-card {
+    background:
+      linear-gradient(145deg, rgba(34, 211, 238, 0.07), transparent 24%),
+      linear-gradient(140deg, rgba(15, 27, 48, 0.92), rgba(7, 13, 26, 0.9)) !important;
+    border: 1px solid rgba(34, 211, 238, 0.2) !important;
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
+
+    &:hover {
+      border-color: rgba(34, 211, 238, 0.56) !important;
+      box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34), 0 0 18px rgba(34, 211, 238, 0.12) !important;
+      transform: translateY(-2px);
+    }
+  }
+
+  .device-name,
+  .device-id {
+    color: #e6f9ff !important;
+  }
+
+  .card-menu,
+  .menu-icon {
+    color: #9ed0eb !important;
+  }
+
+  .device-alarm span {
+    color: #fb7185 !important;
+  }
+
+  .ouliy {
+    border-radius: 8px !important;
+    border: 1px solid transparent;
+
+    &.active {
+      border-color: rgba(34, 211, 238, 0.34) !important;
+      background: linear-gradient(90deg, rgba(34, 211, 238, 0.14), rgba(37, 99, 235, 0.08)) !important;
+    }
+
+    &:hover {
+      border-color: rgba(34, 211, 238, 0.2) !important;
+      background: rgba(34, 211, 238, 0.09) !important;
+    }
+  }
+
+  .line-item > span:nth-child(1),
+  .line-item > span:nth-child(2),
+  .item > div > span:nth-child(1),
+  .item > div > span:nth-child(2),
+  .info-box .details > div > p > span:nth-child(1),
+  .info-box .details > div > p > span:nth-child(2) {
+    color: var(--sp-text) !important;
+  }
+
+  .line-item > span:nth-child(1),
+  .item > div > span:nth-child(1),
+  .info-box .details > div > p > span:nth-child(1) {
+    color: var(--sp-text-muted) !important;
+  }
+
+  .right {
+    scrollbar-color: rgba(34, 211, 238, 0.4) rgba(7, 14, 26, 0.65);
+  }
+
+  .alarm-table .value-blue {
+    color: #67e8f9 !important;
+  }
+
+  .alarm-table .value-red {
+    color: #fb7185 !important;
+  }
+
+  .alarm-table .el-table__row:hover > td.el-table__cell {
+    background: linear-gradient(90deg, rgba(34, 211, 238, 0.16), rgba(59, 130, 246, 0.1)) !important;
+  }
+
+  .el-radio-button__inner {
+    color: var(--sp-text-muted) !important;
+    background: rgba(7, 14, 26, 0.78) !important;
+    border-color: rgba(34, 211, 238, 0.2) !important;
+  }
+
+  .el-radio-button__original-radio:checked + .el-radio-button__inner {
+    color: #04121a !important;
+    background: linear-gradient(135deg, #67e8f9, #22d3ee 55%, #60a5fa) !important;
+    border-color: rgba(103, 232, 249, 0.86) !important;
+    box-shadow: 0 0 14px rgba(34, 211, 238, 0.24) !important;
+  }
+}
+
+body .map-cluster-pulse {
+  background: rgba(34, 211, 238, 0.22) !important;
+  border-color: #22d3ee !important;
+  box-shadow: 0 0 18px rgba(34, 211, 238, 0.26);
+}
+
+body .map-cluster-core {
+  background: linear-gradient(135deg, #67e8f9, #22d3ee 45%, #2563eb) !important;
+  color: #04121a !important;
+  box-shadow: 0 0 14px rgba(34, 211, 238, 0.42) !important;
+}
+
+body .map-device-marker {
+  background: rgba(6, 12, 24, 0.9) !important;
+  border-color: rgba(34, 211, 238, 0.5) !important;
+  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.36), 0 0 16px rgba(34, 211, 238, 0.18) !important;
+}
+
+body .map-device-name {
+  color: #e6f9ff !important;
+}
+
+body .map-device-sub {
+  color: #8ba4bd !important;
+}
+
+@keyframes spScanSweep {
+  0%,
+  100% {
+    transform: translateY(-12%);
+    opacity: 0.2;
+  }
+  50% {
+    transform: translateY(12%);
+    opacity: 0.6;
+  }
+}
+
+/* ============================================================
+   FLASHY HUD LAYER —  流光 / 角标 / 辉光 / 数据流
+   ============================================================ */
+
+@keyframes spGridDrift {
+  0% {
+    background-position: 0 0, 0 0, 0 0;
+  }
+  100% {
+    background-position: 42px 84px, 84px 42px, 220px 0;
+  }
+}
+
+@keyframes spLineFlow {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes spCornerPulse {
+  0%,
+  100% {
+    opacity: 0.45;
+    filter: drop-shadow(0 0 2px rgba(34, 211, 238, 0.5));
+  }
+  50% {
+    opacity: 1;
+    filter: drop-shadow(0 0 7px rgba(34, 211, 238, 0.95));
+  }
+}
+
+@keyframes spPanelGlow {
+  0%,
+  100% {
+    box-shadow: var(--sp-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 rgba(34, 211, 238, 0);
+  }
+  50% {
+    box-shadow: var(--sp-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 26px rgba(34, 211, 238, 0.14);
+  }
+}
+
+@keyframes spBtnFlow {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 200% 50%;
+  }
+}
+
+@keyframes spTitleFlicker {
+  0%,
+  100% {
+    text-shadow: 0 0 10px rgba(34, 211, 238, 0.32);
+  }
+  45% {
+    text-shadow: 0 0 18px rgba(34, 211, 238, 0.7), 0 0 30px rgba(34, 211, 238, 0.28);
+  }
+  50% {
+    text-shadow: 0 0 6px rgba(34, 211, 238, 0.5);
+  }
+  55% {
+    text-shadow: 0 0 18px rgba(34, 211, 238, 0.7), 0 0 30px rgba(34, 211, 238, 0.28);
+  }
+}
+
+@keyframes spFocusPulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.34), 0 0 14px rgba(34, 211, 238, 0.16);
+  }
+  50% {
+    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.6), 0 0 22px rgba(34, 211, 238, 0.3);
+  }
+}
+
+/* flowing accent on the header bottom line */
+.gva-industrial-header::before {
+  background-size: 200% 100% !important;
+  animation: spLineFlow 4s linear infinite;
+}
+
+/* primary buttons get a flowing energy gradient */
+.el-button--primary {
+  background: linear-gradient(110deg, #67e8f9, #22d3ee 35%, #60a5fa 65%, #67e8f9) !important;
+  background-size: 220% 100% !important;
+  animation: spBtnFlow 4.5s linear infinite;
+}
+
+/* inputs pulse while focused (intelligent feedback) */
+.el-input__wrapper.is-focus,
+.el-textarea__inner:focus,
+.el-select__wrapper.is-focused {
+  animation: spFocusPulse 1.8s ease-in-out infinite;
+}
+
+/* glowing section titles */
+.gva-industrial-card .text-base,
+.gva-industrial-header .font-bold,
+.master-station-theme .alarm-title,
+.master-station-theme .list-title,
+.master-station-theme .tabs-box > .title,
+.master-station-theme .chart-title {
+  animation: spTitleFlicker 5s ease-in-out infinite;
+}
+
+/* ---- masterStation panels: flowing line + pulsing HUD corners ---- */
+.master-station-theme .overview-card,
+.master-station-theme .alarm-list,
+.master-station-theme .alarm-trend,
+.master-station-theme .alarm-card,
+.master-station-theme .tabs-box,
+.master-station-theme .detail-card,
+.master-station-theme .info-box,
+.master-station-theme .alarms-box,
+.master-station-theme .chart-card,
+.master-station-theme .config-content > .left,
+.master-station-theme .config-content > .right,
+.master-station-theme .trend-content > .left,
+.master-station-theme .trend-content > .right .top,
+.master-station-theme .trend-content > .right .bottom,
+.master-station-theme .device-card {
+  position: relative !important;
+}
+
+.master-station-theme .overview-card::before,
+.master-station-theme .alarm-list::before,
+.master-station-theme .alarm-trend::before,
+.master-station-theme .alarm-card::before,
+.master-station-theme .tabs-box::before,
+.master-station-theme .detail-card::before,
+.master-station-theme .info-box::before,
+.master-station-theme .alarms-box::before,
+.master-station-theme .chart-card::before,
+.master-station-theme .config-content > .left::before,
+.master-station-theme .config-content > .right::before,
+.master-station-theme .trend-content > .left::before,
+.master-station-theme .trend-content > .right .top::before,
+.master-station-theme .trend-content > .right .bottom::before,
+.master-station-theme .device-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  z-index: 4;
+  pointer-events: none;
+  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0) 14%, #67e8f9 50%, rgba(34, 211, 238, 0) 86%, transparent);
+  background-size: 200% 100%;
+  animation: spLineFlow 3.6s linear infinite;
+}
+
+.master-station-theme .overview-card::after,
+.master-station-theme .alarm-list::after,
+.master-station-theme .alarm-trend::after,
+.master-station-theme .alarm-card::after,
+.master-station-theme .tabs-box::after,
+.master-station-theme .detail-card::after,
+.master-station-theme .info-box::after,
+.master-station-theme .alarms-box::after,
+.master-station-theme .chart-card::after,
+.master-station-theme .config-content > .left::after,
+.master-station-theme .config-content > .right::after,
+.master-station-theme .trend-content > .left::after,
+.master-station-theme .trend-content > .right .top::after,
+.master-station-theme .trend-content > .right .bottom::after,
+.master-station-theme .device-card::after {
+  content: '';
+  position: absolute;
+  inset: 7px;
+  z-index: 4;
+  pointer-events: none;
+  background-image: linear-gradient(#67e8f9, #67e8f9), linear-gradient(#67e8f9, #67e8f9),
+    linear-gradient(#67e8f9, #67e8f9), linear-gradient(#67e8f9, #67e8f9),
+    linear-gradient(#67e8f9, #67e8f9), linear-gradient(#67e8f9, #67e8f9),
+    linear-gradient(#67e8f9, #67e8f9), linear-gradient(#67e8f9, #67e8f9);
+  background-repeat: no-repeat;
+  background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px;
+  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom,
+    right bottom;
+  animation: spCornerPulse 2.8s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #app::before,
+  #gva-base-load-dom::before,
+  .gva-industrial-header::before,
+  .el-button--primary,
+  .el-input__wrapper.is-focus,
+  .gva-table-box,
+  .gva-search-box,
+  .gva-form-box,
+  .gva-industrial-card,
+  .gva-table-box::before,
+  .gva-search-box::before,
+  .gva-form-box::before,
+  .gva-industrial-card::before,
+  .gva-table-box::after,
+  .gva-search-box::after,
+  .gva-form-box::after,
+  .gva-industrial-card::after,
+  [class*='master-station-theme'] *::before,
+  [class*='master-station-theme'] *::after {
+    animation: none !important;
+  }
+}
diff --git a/src/view/dashboard/components/card.vue b/src/view/dashboard/components/card.vue
index 2a50b28..89c919d 100644
--- a/src/view/dashboard/components/card.vue
+++ b/src/view/dashboard/components/card.vue
@@ -5,7 +5,7 @@
 
 <template>
   <div
-    class="bg-white dark:bg-slate-900 text-gray-800 dark:text-gray-400 rounded shadow"
+    class="gva-industrial-card bg-white dark:bg-slate-900 text-gray-800 dark:text-gray-400 rounded shadow"
     :class="[customClass || '', withoutPadding ? 'p-0' : 'p-4']"
   >
     <div v-if="title" class="flex justify-between items-center">
diff --git a/src/view/largeScreen/charts.js b/src/view/largeScreen/charts.js
new file mode 100644
index 0000000..a1b56ac
--- /dev/null
+++ b/src/view/largeScreen/charts.js
@@ -0,0 +1,240 @@
+import * as echarts from 'echarts'
+
+const darkTooltip = {
+  trigger: 'axis',
+  backgroundColor: 'rgba(6, 20, 48, 0.92)',
+  borderColor: 'rgba(0, 150, 255, 0.4)',
+  textStyle: { color: '#e2e8f0' }
+}
+
+const axisStyle = {
+  axisLine: { lineStyle: { color: 'rgba(0, 150, 255, 0.25)' } },
+  axisLabel: { color: '#64748b', fontSize: 10 },
+  splitLine: { lineStyle: { color: 'rgba(0, 150, 255, 0.12)', type: 'dashed' } }
+}
+
+export const getEnergyTrendOption = () => ({
+  tooltip: darkTooltip,
+  legend: {
+    data: ['本月', '上月'],
+    right: 10,
+    top: 0,
+    textStyle: { color: '#94a3b8', fontSize: 10 },
+    itemWidth: 10,
+    itemHeight: 10
+  },
+  grid: { top: '18%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
+  xAxis: {
+    type: 'category',
+    data: ['01', '05', '10', '15', '20', '25', '30'],
+    ...axisStyle
+  },
+  yAxis: {
+    type: 'value',
+    name: '量(kWh)',
+    nameTextStyle: { color: '#64748b', fontSize: 10 },
+    ...axisStyle
+  },
+  series: [
+    {
+      name: '本月',
+      data: [0, 35, 10, 20, 5, 15, 25],
+      type: 'line',
+      smooth: true,
+      lineStyle: { color: '#00d4ff', width: 2, shadowColor: 'rgba(0, 212, 255, 0.45)', shadowBlur: 8 },
+      itemStyle: { color: '#00d4ff' },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: 'rgba(0, 212, 255, 0.35)' },
+          { offset: 1, color: 'rgba(0, 212, 255, 0)' }
+        ])
+      },
+      markPoint: {
+        data: [{ type: 'max', name: 'Max' }, { type: 'min', name: 'Min' }],
+        symbol: 'rect',
+        symbolSize: [36, 28],
+        symbolOffset: [0, -20]
+      }
+    }
+  ]
+})
+
+export const getDeviceCategoryOption = (categories, total = 30) => ({
+  series: [
+    {
+      type: 'pie',
+      radius: ['48%', '72%'],
+      center: ['38%', '50%'],
+      avoidLabelOverlap: false,
+      itemStyle: { borderRadius: 6, borderColor: '#010812', borderWidth: 2 },
+      label: {
+        show: true,
+        position: 'center',
+        formatter: `{total|${total}}\n{name|总数}`,
+        rich: {
+          total: { fontSize: 22, fontWeight: 'bold', color: '#e2e8f0', lineHeight: 28 },
+          name: { fontSize: 12, color: '#94a3b8' }
+        }
+      },
+      labelLine: { show: false },
+      data: categories.map((item) => ({
+        value: item.value,
+        name: item.name,
+        itemStyle: { color: item.color }
+      }))
+    }
+  ]
+})
+
+export const getPowerCurveOption = () => ({
+  tooltip: darkTooltip,
+  legend: {
+    data: ['功率'],
+    right: 10,
+    top: 0,
+    textStyle: { color: '#94a3b8', fontSize: 10 },
+    itemWidth: 10,
+    itemHeight: 10
+  },
+  grid: { top: '18%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
+  xAxis: {
+    type: 'category',
+    data: ['13:45', '18:00', '22:15', '02:30', '06:45', '11:00', '13:45'],
+    ...axisStyle
+  },
+  yAxis: {
+    type: 'value',
+    name: '功率(kW)',
+    nameTextStyle: { color: '#64748b', fontSize: 10 },
+    ...axisStyle
+  },
+  series: [
+    {
+      name: '功率',
+      data: [0, 1.944, 0, 0, 0, 1.8, 0],
+      type: 'line',
+      smooth: true,
+      lineStyle: { color: '#00d4ff', width: 2, shadowColor: 'rgba(0, 212, 255, 0.45)', shadowBlur: 8 },
+      itemStyle: { color: '#00d4ff' },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: 'rgba(0, 212, 255, 0.35)' },
+          { offset: 1, color: 'rgba(0, 212, 255, 0)' }
+        ])
+      },
+      markPoint: { data: [{ type: 'max', name: 'Max' }, { type: 'min', name: 'Min' }] }
+    }
+  ]
+})
+
+export const getAlarmPendingOption = () => ({
+  tooltip: darkTooltip,
+  grid: { top: '15%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
+  xAxis: {
+    type: 'category',
+    data: ['02-17', '02-22', '02-27', '03-04', '03-09', '03-14'],
+    ...axisStyle
+  },
+  yAxis: {
+    type: 'value',
+    name: '次数',
+    nameTextStyle: { color: '#64748b', fontSize: 10 },
+    ...axisStyle
+  },
+  series: [
+    {
+      name: '待处理报警',
+      data: [4805, 4850, 4900, 4958, 5000, 5304],
+      type: 'line',
+      smooth: true,
+      lineStyle: { color: '#00d4ff', width: 2, shadowColor: 'rgba(0, 212, 255, 0.45)', shadowBlur: 8 },
+      itemStyle: { color: '#00d4ff' },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: 'rgba(0, 212, 255, 0.35)' },
+          { offset: 1, color: 'rgba(0, 212, 255, 0)' }
+        ])
+      },
+      markPoint: { data: [{ type: 'max', name: 'Max' }, { type: 'min', name: 'Min' }] }
+    }
+  ]
+})
+
+export const getAlertDistributionOption = (alertTypes) => ({
+  series: [
+    {
+      type: 'pie',
+      radius: ['42%', '68%'],
+      center: ['40%', '50%'],
+      avoidLabelOverlap: false,
+      itemStyle: { borderRadius: 6, borderColor: '#010812', borderWidth: 2 },
+      label: {
+        show: true,
+        position: 'center',
+        formatter: '{d|95.54%}',
+        rich: {
+          d: { fontSize: 18, fontWeight: 'bold', color: '#e2e8f0' }
+        }
+      },
+      labelLine: { show: false },
+      data: alertTypes.map((item) => ({
+        value: item.count,
+        name: item.name,
+        itemStyle: { color: item.color }
+      }))
+    }
+  ]
+})
+
+export const getAlertTrendOption = () => ({
+  tooltip: darkTooltip,
+  legend: {
+    data: ['二级报警', '报警', '预警'],
+    right: 10,
+    top: 0,
+    textStyle: { color: '#94a3b8', fontSize: 10 },
+    itemWidth: 10,
+    itemHeight: 10
+  },
+  grid: { top: '20%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
+  xAxis: {
+    type: 'category',
+    data: ['01', '05', '10', '15', '20', '25', '30'],
+    ...axisStyle
+  },
+  yAxis: {
+    type: 'value',
+    name: '数量',
+    nameTextStyle: { color: '#64748b', fontSize: 10 },
+    ...axisStyle
+  },
+  series: [
+    {
+      name: '二级报警',
+      data: [0, 100, 50, 0, 0, 0, 0],
+      type: 'line',
+      smooth: true,
+      lineStyle: { color: '#a855f7', width: 2 },
+      itemStyle: { color: '#a855f7' },
+      markPoint: { data: [{ type: 'max' }, { type: 'min' }] }
+    },
+    {
+      name: '报警',
+      data: [0, 80, 30, 119, 0, 0, 0],
+      type: 'line',
+      smooth: true,
+      lineStyle: { color: '#ef4444', width: 2 },
+      itemStyle: { color: '#ef4444' },
+      markPoint: { data: [{ type: 'max' }, { type: 'min' }] }
+    },
+    {
+      name: '预警',
+      data: [0, 20, 18, 0, 0, 0, 0],
+      type: 'line',
+      smooth: true,
+      lineStyle: { color: '#f59e0b', width: 2 },
+      itemStyle: { color: '#f59e0b' },
+      markPoint: { data: [{ type: 'max' }, { type: 'min' }] }
+    }
+  ]
+})
diff --git a/src/view/largeScreen/index.vue b/src/view/largeScreen/index.vue
index c75cb3f..5f02432 100644
--- a/src/view/largeScreen/index.vue
+++ b/src/view/largeScreen/index.vue
@@ -1,2432 +1,1854 @@
 <template>
-  <div class="large-screen-container">
-    <!-- 顶部标题栏 -->
-    <div class="header">
-      <div class="logo">
-        <img src="/src/assets/logo.png" alt="logo" />
-        <span>星卡科技</span>
+  <div class="large-screen">
+    <div class="bg-grid" aria-hidden="true"></div>
+    <div class="bg-glow bg-glow--tl" aria-hidden="true"></div>
+    <div class="bg-glow bg-glow--br" aria-hidden="true"></div>
+    <div class="bg-orbit bg-orbit--left" aria-hidden="true"></div>
+    <div class="bg-orbit bg-orbit--right" aria-hidden="true"></div>
+    <div class="bg-scanline" aria-hidden="true"></div>
+
+    <!-- 顶部栏 -->
+    <header class="screen-header">
+      <div class="header-left">
+        <span class="live-dot"></span>
+        <span class="live-text">系统运行中</span>
+        <span class="meta-divider">|</span>
+        <span class="meta-date">{{ currentDate }}</span>
+        <span class="meta-divider">|</span>
+        <span class="meta-time">{{ currentClock }}</span>
+        <span class="meta-divider">|</span>
+        <span class="meta-weather">
+          <el-icon><Cloudy /></el-icon>
+          多云
+        </span>
+        <span class="meta-divider">|</span>
+        <span class="meta-location">演示厅 <el-icon><ArrowDown /></el-icon></span>
       </div>
-      <div class="title">安全用电预警平台</div>
-      <div class="time">{{ currentTime }}</div>
-
-    </div>
-
-    <!-- 主内容区域 -->
-    <div class="main-content">
-      <!-- 左侧区域 -->
-      <div class="left-section">
-        <!-- 用能趋势 -->
-        <div class="module-card energy-module">
-          <div class="module-header">
-            <div class="module-title">
-              <span class="title-icon"></span>
-              <span>用能趋势</span>
-            </div>
-            <div class="module-more">远程遥控 ></div>
-          </div>
-          
-          <!-- 用电量统计 -->
-          <div class="energy-stats">
-            <div class="energy-item">
-              <div class="energy-icon">
-                <div class="icon-bg">
-                  <svg viewBox="0 0 24 24" fill="none" width="24" height="24">
-                    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="#00d4ff" stroke-width="2" fill="none"/>
-                  </svg>
-                </div>
-                <div class="energy-label">用电量<br/><span class="unit">kW·h</span></div>
-              </div>
-              <div class="energy-values">
-                <div class="value-item">
-                  <span class="value-label">本年</span>
-                  <span class="value-num blue">833</span>
-                </div>
-                <div class="value-item">
-                  <span class="value-label">本月</span>
-                  <span class="value-num blue">224</span>
-                </div>
-                <div class="value-item">
-                  <span class="value-label">昨日</span>
-                  <span class="value-num blue">14</span>
-                </div>
-              </div>
-            </div>
-            
-            <!-- 碳排放统计 -->
-            <div class="energy-item">
-              <div class="energy-icon">
-                <div class="icon-bg green">
-                  <svg viewBox="0 0 24 24" fill="none" width="24" height="24">
-                    <circle cx="12" cy="12" r="10" stroke="#10b981" stroke-width="2" fill="none"/>
-                    <path d="M12 6v6l4 2" stroke="#10b981" stroke-width="2" fill="none"/>
-                  </svg>
-                </div>
-                <div class="energy-label">碳排放<span class="help-icon">?</span><br/><span class="unit">kgCO₂</span></div>
-              </div>
-              <div class="energy-values">
-                <div class="value-item">
-                  <span class="value-label">本年</span>
-                  <span class="value-num cyan">502.655</span>
-                </div>
-                <div class="value-item">
-                  <span class="value-label">本月</span>
-                  <span class="value-num cyan">134.777</span>
-                </div>
-                <div class="value-item">
-                  <span class="value-label">昨日</span>
-                  <span class="value-num cyan">8.183</span>
-                </div>
-              </div>
-            </div>
-          </div>
-          
-          <!-- 用能趋势折线图 -->
-          <div class="energy-chart">
-            <e-charts ref="energyChartRef" :option="energyTrendOption" autoresize />
-          </div>
+      <div class="header-center">
+        <span class="header-line"></span>
+        <div class="header-title-wrap">
+          <h1 class="header-title">Dunsys | 顿雾系统</h1>
+          <p class="header-subtitle">智慧用电安全监控平台</p>
         </div>
+        <span class="header-line"></span>
+      </div>
+      <div class="header-right">
+        <div class="header-tools">
+          <span class="tool-btn"><el-icon><Microphone /></el-icon></span>
+          <span class="tool-btn"><el-icon><Bell /></el-icon></span>
+          <span class="tool-btn"><el-icon><Setting /></el-icon></span>
+          <span class="tool-btn"><el-icon><FullScreen /></el-icon></span>
+        </div>
+        <span class="header-user">admin <el-icon><ArrowDown /></el-icon></span>
+      </div>
+      <div class="header-bottom-glow" aria-hidden="true"></div>
+    </header>
 
-        <!-- 设备分类 -->
-        <div class="module-card device-category-module">
-          <div class="module-header">
-            <div class="module-title">
-              <span class="title-icon"></span>
-              <span>设备分类</span>
+    <div class="screen-body">
+      <!-- 左侧 -->
+      <aside class="side-column">
+        <section class="screen-panel energy-panel">
+          <div class="panel-head">
+            <span class="panel-title">用能趋势</span>
+            <span class="panel-link">远程控制 &gt;</span>
+          </div>
+          <div class="panel-body">
+            <div class="energy-stats">
+              <div class="energy-row">
+                <div class="energy-label-wrap">
+                  <div class="energy-icon energy-icon--blue">
+                    <svg viewBox="0 0 24 24" fill="none"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="#00d4ff" stroke-width="2" /></svg>
+                  </div>
+                  <div class="energy-text">用电量<br /><span>kW·h</span></div>
+                </div>
+                <div class="energy-values">
+                  <div class="ev-item"><span>本年</span><b class="c-blue">833</b></div>
+                  <div class="ev-item"><span>本月</span><b class="c-blue">224</b></div>
+                  <div class="ev-item"><span>昨日</span><b class="c-blue">14</b></div>
+                </div>
+              </div>
+              <div class="energy-row">
+                <div class="energy-label-wrap">
+                  <div class="energy-icon energy-icon--green">
+                    <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="#10b981" stroke-width="2" /><path d="M12 6v6l4 2" stroke="#10b981" stroke-width="2" /></svg>
+                  </div>
+                  <div class="energy-text">碳排放<span class="help">?</span><br /><span>kgCO₂</span></div>
+                </div>
+                <div class="energy-values">
+                  <div class="ev-item"><span>本年</span><b class="c-cyan">502.655</b></div>
+                  <div class="ev-item"><span>本月</span><b class="c-cyan">134.777</b></div>
+                  <div class="ev-item"><span>昨日</span><b class="c-cyan">8.183</b></div>
+                </div>
+              </div>
+            </div>
+            <div class="chart-box">
+              <e-charts ref="energyChartRef" :option="energyTrendOption" autoresize />
             </div>
           </div>
-          
-          <div class="device-category-content">
-            <div class="ring-chart">
+        </section>
+
+        <section class="screen-panel category-panel">
+          <div class="panel-head">
+            <span class="panel-title">设备分类</span>
+          </div>
+          <div class="panel-body category-body">
+            <div class="chart-box chart-box--ring">
               <e-charts :option="deviceCategoryOption" autoresize />
             </div>
-            <div class="category-list">
-              <div class="category-item" v-for="(item, index) in deviceCategories" :key="index">
-                <span class="category-dot" :style="{ backgroundColor: item.color }"></span>
-                <span class="category-name">{{ item.name }}</span>
-                <span class="category-value">{{ item.value }}</span>
+            <div class="legend-list">
+              <div v-for="(item, i) in deviceCategories" :key="i" class="legend-row">
+                <i class="dot" :style="{ background: item.color }"></i>
+                <span class="name">{{ item.name }}</span>
+                <span class="val">{{ item.value }}</span>
               </div>
             </div>
           </div>
-        </div>
+        </section>
 
-        <!-- 24小时设备功率曲线 -->
-        <div class="module-card power-curve-module">
-          <div class="module-header">
-            <div class="module-title">
-              <span class="title-icon"></span>
-              <span>24小时设备功率曲线</span>
-            </div>
-            <div class="module-more">查看详情 ></div>
+        <section class="screen-panel power-panel">
+          <div class="panel-head">
+            <span class="panel-title">24小时设备功率曲线</span>
+            <span class="panel-link">查看详情 &gt;</span>
           </div>
-          
-          <div class="power-chart">
+          <div class="panel-body">
+            <div class="chart-box">
               <e-charts ref="powerChartRef" :option="powerCurveOption" autoresize />
             </div>
-        </div>
-      </div>
+          </div>
+        </section>
+      </aside>
 
-      <!-- 中间区域 -->
-      <div class="center-section">
-        <!-- 地图 -->
-      <div class="card map-card">
-        <!-- 隐藏标题 -->
-        <div class="card-title" style="display: none;">设备分布</div>
-        <!-- 直接使用map-container-full作为地图载体元素 -->
-        <div class="map-container-full" id="chinaMap" ref="chinaMap">
-          <!-- 地图左上角控件 -->
-          <div class="map-control">
-            <!-- 上部分：设备总数量 -->
-            <div class="control-top">
-              <div class="control-title">设备总数量</div>
-              <div class="control-value">{{ totalDevices }}</div>
+      <!-- 中间 -->
+      <main class="center-column">
+        <div class="stat-cards">
+          <div v-for="item in summaryStats" :key="item.label" class="stat-card" :class="item.cardClass">
+            <div class="stat-card-shine" aria-hidden="true"></div>
+            <div class="stat-icon" :class="item.iconClass">
+              <component :is="item.icon" />
             </div>
-            <!-- 下部分：地图标识点样式对应的状态 -->
-            <div class="control-bottom">
-              <div class="control-title">设备状态</div>
-              <div class="status-list">
-                <div class="status-item">
-                  <div class="status-dot online"></div>
-                  <span>在线</span>
+            <div class="stat-info">
+              <div class="stat-num" :class="item.numClass">{{ item.value }}</div>
+              <div class="stat-label">{{ item.label }}</div>
+            </div>
+          </div>
+        </div>
+
+        <section class="screen-panel map-panel">
+          <div class="panel-head panel-head--map">
+            <span class="panel-title">设备分布地图</span>
+            <span class="panel-badge">实时同步</span>
+          </div>
+          <div class="panel-body map-body">
+            <div class="map-frame">
+              <div class="map-hud map-hud--top" aria-hidden="true"></div>
+              <div class="map-hud map-hud--bottom" aria-hidden="true"></div>
+              <div class="map-toolbar">
+                <div v-for="(icon, n) in mapTools" :key="n" class="map-tool-btn" :title="icon">
+                  <span class="map-tool-inner"></span>
                 </div>
-                <div class="status-item">
-                  <div class="status-dot alarm"></div>
-                  <span>告警</span>
+              </div>
+              <div id="chinaMap" ref="chinaMap" class="map-view"></div>
+              <div class="map-control glass-card">
+                <div class="control-block">
+                  <div class="control-label">设备总数量</div>
+                  <div class="control-num">{{ totalDevices }}</div>
                 </div>
-                <div class="status-item">
-                  <div class="status-dot offline"></div>
-                  <span>离线</span>
+                <div class="control-block control-block--status">
+                  <div class="control-label">设备状态</div>
+                  <div class="status-row"><i class="sd online"></i>在线 <b>{{ onlineDevices }}</b></div>
+                  <div class="status-row"><i class="sd alarm"></i>告警 <b>{{ alarmDevices }}</b></div>
+                  <div class="status-row"><i class="sd offline"></i>离线 <b>{{ offlineDevices }}</b></div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-      </div>
+        </section>
 
-      <!-- 实时报警列表 -->
-      <div class="card alarm-list-card">
-        <div class="alarm-list-header">
-          <div class="alarm-list-title">
-            <span class="title-decoration"></span>
-            <span>实时报警列表</span>
+        <section class="screen-panel alarm-panel">
+          <div class="panel-head alarm-head">
+            <span class="panel-title">实时报警列表</span>
+            <div class="alarm-filters">
+              <label><input v-model="showPreAlarm" type="checkbox" />包含隐患</label>
+              <label><input v-model="onlyOffline" type="checkbox" />只显示预警报警</label>
+              <span class="panel-link">展开</span>
+            </div>
           </div>
-          <div class="alarm-list-controls">
-            <label class="control-item">
-              <input type="checkbox" v-model="showPreAlarm" />
-              <span>包含预警</span>
-            </label>
-            <label class="control-item">
-              <input type="checkbox" v-model="onlyOffline" />
-              <span>只显示离线报警</span>
-            </label>
-            <div class="expand-btn">展开</div>
+          <div class="panel-body alarm-body">
+            <table class="alarm-table">
+              <thead>
+                <tr>
+                  <th>序号</th>
+                  <th>项目</th>
+                  <th>地点</th>
+                  <th>设备号</th>
+                  <th>线路</th>
+                  <th>报警类型</th>
+                  <th>报警时间</th>
+                  <th>状态</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(item, index) in alarmList" :key="index">
+                  <td>{{ index + 1 }}</td>
+                  <td>{{ item.project }}</td>
+                  <td>{{ item.location }}</td>
+                  <td>{{ item.deviceNo }}</td>
+                  <td>{{ item.line }}</td>
+                  <td>{{ item.alarmType }}</td>
+                  <td>{{ item.alarmTime }}</td>
+                  <td><span class="tag-pending">{{ item.status }}</span></td>
+                </tr>
+              </tbody>
+            </table>
           </div>
-        </div>
-        <div class="alarm-table-container">
-          <table class="alarm-table">
-            <thead>
-              <tr>
-                <th>序号</th>
-                <th>项目</th>
-                <th>地点</th>
-                <th>设备号</th>
-                <th>线路</th>
-                <th>报警类型</th>
-                <th>报警时间</th>
-                <th>状态</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(item, index) in alarmList" :key="index">
-                <td>{{ index + 1 }}</td>
-                <td>{{ item.project }}</td>
-                <td>{{ item.location }}</td>
-                <td>{{ item.deviceNo }}</td>
-                <td>{{ item.line }}</td>
-                <td>{{ item.alarmType }}</td>
-                <td>{{ item.alarmTime }}</td>
-                <td><span class="status-tag pending">{{ item.status }}</span></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
+        </section>
+      </main>
 
-      <!-- 右侧区域 -->
-      <div class="right-section">
-        <!-- 待处理报警 -->
-        <div class="module-card alarm-pending-module">
-          <div class="module-header">
-            <div class="module-title">
-              <span class="title-icon"></span>
-              <span>待处理报警</span>
+      <!-- 右侧 -->
+      <aside class="side-column">
+        <section class="screen-panel">
+          <div class="panel-head"><span class="panel-title">待处理报警</span></div>
+          <div class="panel-body">
+            <div class="chart-box chart-box--sm">
+              <e-charts ref="alarmPendingChartRef" :option="alarmPendingOption" autoresize />
             </div>
           </div>
-          <div class="alarm-pending-chart">
-            <e-charts ref="alarmPendingChartRef" :option="alarmPendingOption" autoresize />
-          </div>
-        </div>
+        </section>
 
-        <!-- 警情分布 -->
-        <div class="module-card alert-distribution-module">
-          <div class="module-header">
-            <div class="module-title">
-              <span class="title-icon"></span>
-              <span>警情分布</span>
+        <section class="screen-panel distribution-panel">
+          <div class="panel-head"><span class="panel-title">警情分布</span></div>
+          <div class="panel-body">
+            <div class="alert-tabs">
+              <span v-for="tab in alertTabs" :key="tab" class="alert-tab" :class="{ active: activeAlertTab === tab }" @click="activeAlertTab = tab">{{ tab }}</span>
             </div>
-          </div>
-          <div class="alert-tabs">
-            <div class="alert-tab active">二级报警</div>
-            <div class="alert-tab">报警</div>
-            <div class="alert-tab">预警</div>
-          </div>
-          <div class="alert-distribution-content">
-            <div class="alert-ring-chart">
-              <e-charts ref="alertDistributionChartRef" :option="alertDistributionOption" autoresize />
-            </div>
-            <div class="alert-list">
-              <div class="alert-item" v-for="(item, index) in alertTypes" :key="index">
-                <span class="alert-dot" :style="{ backgroundColor: item.color }"></span>
-                <span class="alert-name">{{ item.name }}</span>
-                <span class="alert-count">{{ item.count }}</span>
-                <span class="alert-percent">{{ item.percent }}%</span>
+            <div class="distribution-body">
+              <div class="chart-box chart-box--ring">
+                <e-charts ref="alertDistributionChartRef" :option="alertDistributionOption" autoresize />
+              </div>
+              <div class="legend-list legend-list--compact">
+                <div v-for="(item, i) in alertTypes" :key="i" class="legend-row">
+                  <i class="dot" :style="{ background: item.color }"></i>
+                  <span class="name">{{ item.name }}</span>
+                  <span class="pct">{{ item.percent }}%</span>
+                </div>
               </div>
             </div>
           </div>
-        </div>
+        </section>
 
-        <!-- 警情趋势 -->
-        <div class="module-card alert-trend-module">
-          <div class="module-header">
-            <div class="module-title">
-              <span class="title-icon"></span>
-              <span>警情趋势</span>
+        <section class="screen-panel">
+          <div class="panel-head"><span class="panel-title">警情趋势</span></div>
+          <div class="panel-body">
+            <div class="chart-box chart-box--sm">
+              <e-charts ref="alertTrendChartRef" :option="alertTrendOption" autoresize />
             </div>
           </div>
-          <div class="alert-trend-chart">
-            <e-charts ref="alertTrendChartRef" :option="alertTrendOption" autoresize />
-          </div>
-        </div>
+        </section>
 
-        <!-- 工单管理 -->
-        <div class="module-card work-order-module">
-          <div class="module-header">
-            <div class="module-title">
-              <span class="title-icon"></span>
-              <span>工单管理</span>
-            </div>
-            <div class="module-more">统计报告 ↓</div>
+        <section class="screen-panel work-panel">
+          <div class="panel-head">
+            <span class="panel-title">工单管理</span>
+            <span class="panel-link">统计报告 ↓</span>
           </div>
-          <div class="work-order-content">
-            <div class="work-order-item">
-              <div class="order-icon">
-                <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
-                  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-              </div>
-              <div class="order-info">
-                <div class="order-label">隐患查询</div>
-                <div class="order-count white">110</div>
-              </div>
-            </div>
-            <div class="work-order-item">
-              <div class="order-icon">
-                <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
-                  <path d="M12 6v6l4 2" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  <circle cx="12" cy="12" r="10" stroke="#3b82f6" stroke-width="2"/>
-                </svg>
-              </div>
-              <div class="order-info">
-                <div class="order-label">处理中</div>
-                <div class="order-count cyan">0</div>
-              </div>
-            </div>
-            <div class="work-order-item">
-              <div class="order-icon">
-                <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
-                  <path d="M9 11l3 3L22 4" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-              </div>
-              <div class="order-info">
-                <div class="order-label">完成工单</div>
-                <div class="order-count green">14</div>
-              </div>
+          <div class="panel-body work-body">
+            <div v-for="item in workOrders" :key="item.label" class="work-item">
+              <div class="work-icon"><component :is="item.icon" /></div>
+              <div class="work-label">{{ item.label }}</div>
+              <div class="work-num" :class="item.colorClass">{{ item.count }}</div>
             </div>
           </div>
-        </div>
-      </div>
+        </section>
+      </aside>
     </div>
   </div>
 </template>
 
-<script setup lang="js">
-import { ref, onMounted, computed } from 'vue'
-import * as echarts from 'echarts'
-import ECharts from 'vue-echarts'
+<script setup>
+  import { ref, computed, onMounted, onBeforeUnmount, markRaw } from 'vue'
+  import ECharts from 'vue-echarts'
+  import {
+    ArrowDown,
+    Bell,
+    Cloudy,
+    FullScreen,
+    Microphone,
+    Setting,
+    Monitor,
+    Warning,
+    Connection,
+    CircleCheck
+  } from '@element-plus/icons-vue'
+  import {
+    getEnergyTrendOption,
+    getDeviceCategoryOption,
+    getPowerCurveOption,
+    getAlarmPendingOption,
+    getAlertDistributionOption,
+    getAlertTrendOption
+  } from './charts.js'
 
+  const currentDate = ref('')
+  const currentClock = ref('')
+  let clockTimer = null
 
-
-
-// 当前时间
-const currentTime = ref('')
-
-// 更新时间
-const updateTime = () => {
-  const now = new Date()
-  const year = now.getFullYear()
-  const month = String(now.getMonth() + 1).padStart(2, '0')
-  const day = String(now.getDate()).padStart(2, '0')
-  const hours = String(now.getHours()).padStart(2, '0')
-  const minutes = String(now.getMinutes()).padStart(2, '0')
-  const seconds = String(now.getSeconds()).padStart(2, '0')
-  currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
-}
-
-// 计算属性：设备统计数据
-const totalDevices = computed(() => devices.value.length)
-const onlineDevices = computed(() => devices.value.filter(device => device.status === 'online').length)
-const offlineDevices = computed(() => devices.value.filter(device => device.status === 'offline').length)
-const alarmDevices = computed(() => devices.value.filter(device => device.status === 'alarm').length)
-
-// 计算属性：不同类型的报警设备数量（模拟数据）
-const overTemperatureAlarms = computed(() => Math.floor(alarmDevices.value * 0.5)) // 过温报警占50%
-const overloadAlarms = computed(() => Math.floor(alarmDevices.value * 0.3)) // 过载报警占30%
-const leakageAlarms = computed(() => alarmDevices.value - overTemperatureAlarms.value - overloadAlarms.value) // 漏电报警占剩余部分
-
-// 通知公告数据
-const notices = ref([
-  { title: '关于系统升级维护的通知', time: '2026-01-10' },
-  { title: '设备巡检计划安排', time: '2026-01-08' },
-  { title: '新功能上线公告', time: '2026-01-05' },
-  { title: '春节放假安排通知', time: '2026-01-02' }
-])
-
-// 报警记录数据（30条假数据）
-const alarms = ref([
-  { title: '设备1过温报警', time: '2026-01-15 14:32:18' },
-  { title: '设备2电流异常', time: '2026-01-15 14:28:45' },
-  { title: '设备3电压过高', time: '2026-01-15 14:25:30' },
-  { title: '设备4通信中断', time: '2026-01-15 14:20:12' },
-  { title: '设备5功率过载', time: '2026-01-15 14:15:47' },
-  { title: '设备6温度异常', time: '2026-01-15 14:10:22' },
-  { title: '设备7电流波动', time: '2026-01-15 14:05:58' },
-  { title: '设备8电压过低', time: '2026-01-15 14:00:33' },
-  { title: '设备9通信超时', time: '2026-01-15 13:55:17' },
-  { title: '设备10功率异常', time: '2026-01-15 13:50:02' },
-  { title: '设备11过温报警', time: '2026-01-15 13:45:38' },
-  { title: '设备12电流过高', time: '2026-01-15 13:40:23' },
-  { title: '设备13电压波动', time: '2026-01-15 13:35:09' },
-  { title: '设备14通信异常', time: '2026-01-15 13:30:44' },
-  { title: '设备15功率过载', time: '2026-01-15 13:25:29' },
-  { title: '设备16温度过高', time: '2026-01-15 13:20:14' },
-  { title: '设备17电流异常', time: '2026-01-15 13:15:50' },
-  { title: '设备18电压异常', time: '2026-01-15 13:10:35' },
-  { title: '设备19通信中断', time: '2026-01-15 13:05:20' },
-  { title: '设备20功率异常', time: '2026-01-15 13:00:05' },
-  { title: '设备21过温报警', time: '2026-01-15 12:55:41' },
-  { title: '设备22电流过高', time: '2026-01-15 12:50:26' },
-  { title: '设备23电压过低', time: '2026-01-15 12:45:11' },
-  { title: '设备24通信超时', time: '2026-01-15 12:40:56' },
-  { title: '设备25功率过载', time: '2026-01-15 12:35:42' },
-  { title: '设备26温度异常', time: '2026-01-15 12:30:27' },
-  { title: '设备27电流波动', time: '2026-01-15 12:25:12' },
-  { title: '设备28电压波动', time: '2026-01-15 12:20:58' },
-  { title: '设备29通信异常', time: '2026-01-15 12:15:43' },
-  { title: '设备30功率异常', time: '2026-01-15 12:10:28' }
-])
-
-// 设备数据（添加经纬度信息）
-const devices = ref([
-  { name: '设备1', status: 'online', longitude: 116.4074, latitude: 39.9042, city: '北京' },
-  { name: '设备2', status: 'alarm', longitude: 121.4737, latitude: 31.2304, city: '上海' },
-  { name: '设备3', status: 'online', longitude: 113.2644, latitude: 23.1291, city: '广州' },
-  { name: '设备4', status: 'offline', longitude: 120.1551, latitude: 30.2741, city: '杭州' },
-  { name: '设备5', status: 'online', longitude: 104.0668, latitude: 30.5728, city: '成都' },
-  { name: '设备6', status: 'online', longitude: 118.7969, latitude: 32.0603, city: '南京' },
-  { name: '设备7', status: 'alarm', longitude: 123.4328, latitude: 41.8045, city: '沈阳' },
-  { name: '设备8', status: 'online', longitude: 114.0579, latitude: 22.5431, city: '深圳' },
-  { name: '设备9', status: 'offline', longitude: 119.3062, latitude: 26.0745, city: '福州' },
-  { name: '设备10', status: 'online', longitude: 117.2008, latitude: 39.0842, city: '天津' },
-  { name: '设备11', status: 'online', longitude: 108.9398, latitude: 34.3416, city: '西安' },
-  { name: '设备12', status: 'alarm', longitude: 106.5516, latitude: 29.5630, city: '重庆' },
-  { name: '设备13', status: 'online', longitude: 113.6254, latitude: 34.7466, city: '郑州' },
-  { name: '设备14', status: 'offline', longitude: 125.3245, latitude: 43.8171, city: '长春' },
-  { name: '设备15', status: 'online', longitude: 112.5489, latitude: 37.8570, city: '太原' },
-  { name: '设备16', status: 'online', longitude: 103.8235, latitude: 36.0580, city: '兰州' },
-  { name: '设备17', status: 'alarm', longitude: 91.1175, latitude: 29.6469, city: '拉萨' },
-  { name: '设备18', status: 'online', longitude: 111.6708, latitude: 40.8183, city: '呼和浩特' },
-  { name: '设备19', status: 'offline', longitude: 102.7126, latitude: 25.0406, city: '昆明' },
-  { name: '设备20', status: 'online', longitude: 108.3200, latitude: 22.8241, city: '南宁' },
-  // 潍坊地区设备（10台）
-  { name: '潍坊设备1', status: 'online', longitude: 119.03, latitude: 36.42, city: '潍坊' },
-  { name: '潍坊设备2', status: 'alarm', longitude: 118.80, latitude: 36.50, city: '潍坊' },
-  { name: '潍坊设备3', status: 'online', longitude: 119.20, latitude: 36.35, city: '潍坊' },
-  { name: '潍坊设备4', status: 'offline', longitude: 118.50, latitude: 36.60, city: '潍坊' },
-  { name: '潍坊设备5', status: 'online', longitude: 119.50, latitude: 36.25, city: '潍坊' },
-  { name: '潍坊设备6', status: 'alarm', longitude: 118.90, latitude: 36.70, city: '潍坊' },
-  { name: '潍坊设备7', status: 'online', longitude: 119.30, latitude: 36.45, city: '潍坊' },
-  { name: '潍坊设备8', status: 'offline', longitude: 118.60, latitude: 36.55, city: '潍坊' },
-  { name: '潍坊设备9', status: 'online', longitude: 119.10, latitude: 36.30, city: '潍坊' },
-  { name: '潍坊设备10', status: 'alarm', longitude: 118.70, latitude: 36.40, city: '潍坊' }
-])
-
-// 地图实例
-const mapInstance = ref(null)
-
-// 地图容器
-const chinaMap = ref(null)
-
-// 地图标记点
-const markers = ref([])
-
-// ECharts地图实例
-// const mapChartInstance = ref(null)
-
-// 用能趋势图表实例
-const energyChartRef = ref(null)
-
-// 功率曲线图表实例
-const powerChartRef = ref(null)
-
-// 右侧图表实例
-const alarmPendingChartRef = ref(null)
-const alertDistributionChartRef = ref(null)
-const alertTrendChartRef = ref(null)
-
-// 警情类型数据
-const alertTypes = ref([
-  { name: '其他设备报警', count: 403, percent: 41.16, color: '#10b981' },
-  { name: '分合闸报警', count: 384, percent: 39.22, color: '#3b82f6' },
-  { name: '电压报警', count: 53, percent: 5.41, color: '#06b6d4' },
-  { name: '其他', count: 139, percent: 14.21, color: '#f59e0b' }
-])
-
-// 报警列表数据
-const showPreAlarm = ref(false)
-const onlyOffline = ref(false)
-
-const alarmList = ref([
-  {
-    project: 'DM100展板 (K1系列)',
-    location: '070529  300号院,1单元',
-    deviceNo: '21070529',
-    line: '节点1',
-    alarmType: '湿度上限报警',
-    alarmTime: '04:53  2026-03-18',
-    status: '未处理'
-  },
-  {
-    project: '曼顿石岩展厅',
-    location: '2号楼,12层,展厅配电',
-    deviceNo: '98CC4D12D72E',
-    line: '线路04',
-    alarmType: '异常分闸',
-    alarmTime: '05:02  2026-03-18',
-    status: '未处理'
-  },
-  {
-    project: 'DM100展板 (K1系列)',
-    location: '070529  300号院,1单元',
-    deviceNo: '21070529',
-    line: '节点1',
-    alarmType: '湿度上限报警',
-    alarmTime: '23:31  2026-03-18',
-    status: '未处理'
-  },
-  {
-    project: 'DM100展板 (K1系列)',
-    location: '070529  300号院,1单元',
-    deviceNo: '21070529',
-    line: '节点1',
-    alarmType: '湿度上限报警',
-    alarmTime: '14:37  2026-03-18',
-    status: '未处理'
-  },
-  {
-    project: '曼顿石岩展厅',
-    location: '厅L10S  2号楼,12层,2号',
-    deviceNo: 'B813322F82A8',
-    line: '总路',
-    alarmType: '异常分闸',
-    alarmTime: '01:41  2026-03-18',
-    status: '未处理'
-  }
-])
-
-// 用能趋势折线图配置
-const energyTrendOption = ref({
-  tooltip: {
-    trigger: 'axis',
-    backgroundColor: 'rgba(15, 23, 42, 0.9)',
-    borderColor: '#1e3a8a',
-    textStyle: {
-      color: '#e2e8f0'
-    }
-  },
-  legend: {
-    data: ['本月', '上月'],
-    right: 10,
-    top: 0,
-    textStyle: {
-      color: '#94a3b8',
-      fontSize: 10
-    },
-    itemWidth: 10,
-    itemHeight: 10
-  },
-  grid: {
-    top: '15%',
-    left: '3%',
-    right: '4%',
-    bottom: '3%',
-    containLabel: true
-  },
-  xAxis: {
-    type: 'category',
-    data: ['01', '05', '10', '15', '20', '25', '30'],
-    axisLine: {
-      lineStyle: {
-        color: '#1e3a8a'
-      }
-    },
-    axisLabel: {
-      color: '#64748b',
-      fontSize: 10
-    }
-  },
-  yAxis: {
-    type: 'value',
-    name: '量(kWh)',
-    nameTextStyle: {
-      color: '#64748b',
-      fontSize: 10
-    },
-    splitLine: {
-      lineStyle: {
-        color: '#1e3a8a',
-        type: 'dashed'
-      }
-    },
-    axisLine: {
-      lineStyle: {
-        color: '#1e3a8a'
-      }
-    },
-    axisLabel: {
-      color: '#64748b',
-      fontSize: 10
-    }
-  },
-  series: [
-    {
-      name: '本月',
-      data: [0, 35, 10, 20, 5, 15, 25],
-      type: 'line',
-      smooth: true,
-      lineStyle: {
-        color: '#00d4ff',
-        width: 2
-      },
-      itemStyle: {
-        color: '#00d4ff'
-      },
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: 'rgba(0, 212, 255, 0.3)' },
-          { offset: 1, color: 'rgba(0, 212, 255, 0)' }
-        ])
-      },
-      markPoint: {
-        data: [
-          { 
-            type: 'max', 
-            name: 'Max', 
-            // label: { 
-            //   formatter: function(params) {
-            //     return '{value|' + params.value + '}\n{label|Max}';
-            //   },
-            //   rich: {
-            //     value: {
-            //       color: '#ef4444',
-            //       fontSize: 11,
-            //       fontWeight: 'bold',
-            //       align: 'center'
-            //     },
-            //     label: {
-            //       color: '#fff',
-            //       fontSize: 9,
-            //       fontWeight: 'bold',
-            //       align: 'center',
-            //       width: 35,
-            //       height:15,
-            //       backgroundColor: 'rgba(239, 68, 68, 0.5)'
-            //     }
-            //   }
-            // },
-            itemStyle: { 
-              // color: 'transparent',
-              // borderColor: '#ef4444',
-              // borderWidth: 1,
-              // borderRadius: 2
-            }
-          },
-          { 
-            type: 'min', 
-            name: 'Min', 
-            // label: { 
-            //   formatter: function(params) {
-            //     return '{value|' + params.value + '}\n{label|MIN}';
-            //   },
-            //   rich: {
-            //     value: {
-            //       color: '#10b981',
-            //       fontSize: 11,
-            //       fontWeight: 'bold',
-            //       align: 'center'
-            //     },
-            //     label: {
-            //       color: '#fff',
-            //       fontSize: 9,
-            //       fontWeight: 'bold',
-            //       width: 35,
-            //       height:15,
-            //       backgroundColor: 'rgba(16, 185, 129, 0.5)'
-            //     }
-            //   }
-            // },
-            itemStyle: { 
-              // color: 'transparent',
-              // borderColor: '#10b981',
-              // borderWidth: 1,
-              // borderRadius: 2
-            }
-          }
-        ],
-        symbol: 'rect',
-        symbolSize: [36, 28],
-        symbolOffset: [0, -20]
-      }
-    },
-    // {
-    //   name: '上月',
-    //   data: [0, 25, 15, 10, 20, 10, 20],
-    //   type: 'line',
-    //   smooth: true,
-    //   lineStyle: {
-    //     color: '#10b981',
-    //     width: 2
-    //   },
-    //   itemStyle: {
-    //     color: '#10b981'
-    //   },
-    //   areaStyle: {
-    //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-    //       { offset: 0, color: 'rgba(16, 185, 129, 0.3)' },
-    //       { offset: 1, color: 'rgba(16, 185, 129, 0)' }
-    //     ])
-    //   },
-    //   markPoint: {
-    //     data: [
-    //       { 
-    //         type: 'max', 
-    //         name: 'Max', 
-    //         label: { 
-    //           formatter: function(params) {
-    //             return '{value|' + params.value + '}\n{label|MAX}';
-    //           },
-    //           rich: {
-    //             value: {
-    //               color: '#ef4444',
-    //               fontSize: 11,
-    //               fontWeight: 'bold',
-    //               align: 'center'
-    //             },
-    //             label: {
-    //               color: '#fff',
-    //               fontSize: 9,
-    //               fontWeight: 'bold',
-    //               align: 'center',
-    //               backgroundColor: 'rgba(239, 68, 68, 0.9)'
-    //             }
-    //           }
-    //         },
-    //         itemStyle: { 
-    //           color: 'transparent',
-    //           borderColor: '#ef4444',
-    //           borderWidth: 1,
-    //           borderRadius: 2
-    //         }
-    //       },
-    //       { 
-    //         type: 'min', 
-    //         name: 'Min', 
-    //         label: { 
-    //           formatter: function(params) {
-    //             return '{value|' + params.value + '}\n{label|MIN}';
-    //           },
-    //           rich: {
-    //             value: {
-    //               color: '#10b981',
-    //               fontSize: 11,
-    //               fontWeight: 'bold',
-    //               align: 'center'
-    //             },
-    //             label: {
-    //               color: '#fff',
-    //               fontSize: 9,
-    //               fontWeight: 'bold',
-    //               align: 'center',
-    //               backgroundColor: 'rgba(16, 185, 129, 0.9)'
-    //             }
-    //           }
-    //         },
-    //         itemStyle: { 
-    //           color: 'transparent',
-    //           borderColor: '#10b981',
-    //           borderWidth: 1,
-    //           borderRadius: 2
-    //         }
-    //       }
-    //     ],
-    //     symbol: 'rect',
-    //     symbolSize: [36, 28],
-    //     symbolOffset: [0, -20]
-    //   }
-    // }
-  ]
-})
-
-// 设备分类数据
-const deviceCategories = ref([
-  { name: '智能空开', value: 22, color: '#3b82f6' },
-  { name: '温湿度传感器', value: 2, color: '#06b6d4' },
-  { name: '烟雾报警器', value: 2, color: '#8b5cf6' },
-  { name: '水位水压', value: 2, color: '#10b981' },
-  { name: '其他', value: 1, color: '#f59e0b' }
-])
-
-// 设备分类圆角环形图配置
-const deviceCategoryOption = computed(() => ({
-  series: [
-    {
-      type: 'pie',
-      radius: ['45%', '70%'],
-      center: ['40%', '50%'],
-      avoidLabelOverlap: false,
-      itemStyle: {
-        borderRadius: 8,
-        borderColor: '#0f172a',
-        borderWidth: 2
-      },
-      label: {
-        show: false
-      },
-      data: deviceCategories.value.map(item => ({
-        value: item.value,
-        name: item.name,
-        itemStyle: {
-          color: item.color
-        }
-      }))
-    }
-  ]
-}))
-
-// 24小时功率曲线配置
-const powerCurveOption = ref({
-  tooltip: {
-    trigger: 'axis',
-    backgroundColor: 'rgba(15, 23, 42, 0.9)',
-    borderColor: '#1e3a8a',
-    textStyle: {
-      color: '#e2e8f0'
-    }
-  },
-  legend: {
-    data: ['功率'],
-    right: 10,
-    top: 0,
-    textStyle: {
-      color: '#94a3b8',
-      fontSize: 10
-    },
-    itemWidth: 10,
-    itemHeight: 10
-  },
-  grid: {
-    top: '15%',
-    left: '3%',
-    right: '4%',
-    bottom: '3%',
-    containLabel: true
-  },
-  xAxis: {
-    type: 'category',
-    data: ['13:45', '18:00', '22:15', '02:30', '06:45', '11:00', '13:45'],
-    axisLine: {
-      lineStyle: {
-        color: '#1e3a8a'
-      }
-    },
-    axisLabel: {
-      color: '#64748b',
-      fontSize: 10
-    }
-  },
-  yAxis: {
-    type: 'value',
-    name: '功率(kW)',
-    nameTextStyle: {
-      color: '#64748b',
-      fontSize: 10
-    },
-    splitLine: {
-      lineStyle: {
-        color: '#1e3a8a',
-        type: 'dashed'
-      }
-    },
-    axisLine: {
-      lineStyle: {
-        color: '#1e3a8a'
-      }
-    },
-    axisLabel: {
-      color: '#64748b',
-      fontSize: 10
-    }
-  },
-  series: [
-    {
-      name: '功率',
-      data: [0, 1.944, 0, 0, 0, 1.8, 0],
-      type: 'line',
-      smooth: true,
-      lineStyle: {
-        color: '#00d4ff',
-        width: 2
-      },
-      itemStyle: {
-        color: '#00d4ff'
-      },
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: 'rgba(0, 212, 255, 0.3)' },
-          { offset: 1, color: 'rgba(0, 212, 255, 0)' }
-        ])
-      },
-      markPoint: {
-        data: [
-          { 
-            type: 'max', 
-            name: 'Max' 
-          },
-          { 
-            type: 'min', 
-            name: 'Min' 
-          }
-        ]
-      }
-    }
-  ]
-})
-
-// 折线图配置
-const lineChartOption = ref({
-  grid: {
-    top: '10%',
-    left: '3%',
-    right: '4%',
-    bottom: '3%',
-    containLabel: true
-  },
-  xAxis: {
-    type: 'category',
-    data: ['2026-01-03', '2026-01-04', '2026-01-05', '2026-01-06', '2026-01-07', '2026-01-08', '2026-01-09', '2026-01-10', '2026-01-11', '2026-01-12'],
-    axisLine: {
-      lineStyle: {
-        color: '#1e3a8a'
-      }
-    },
-    axisLabel: {
-      color: '#94a3b8',
-      fontSize: 10
-    }
-  },
-  yAxis: {
-    type: 'value',
-    min: 0,
-    max: 30,
-    interval: 5,
-    splitLine: {
-      lineStyle: {
-        color: '#1e3a8a',
-        type: 'dashed'
-      }
-    },
-    axisLine: {
-      lineStyle: {
-        color: '#1e3a8a'
-      }
-    },
-    axisLabel: {
-      color: '#94a3b8',
-      fontSize: 10
-    }
-  },
-  series: [
-    {
-      data: [10, 12, 15, 20, 25, 28, 25, 20, 15, 10],
-      type: 'line',
-      smooth: true,
-      lineStyle: {
-        color: '#3b82f6',
-        width: 2
-      },
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: 'rgba(59, 130, 246, 0.3)'
-          },
-          {
-            offset: 1,
-            color: 'rgba(59, 130, 246, 0)'
-          }
-        ])
-      },
-      symbol: 'circle',
-      symbolSize: 6,
-      itemStyle: {
-        color: '#3b82f6'
-      }
-    }
-  ]
-})
-
-// 环形图配置
-const ringChartOption = computed(() => ({
-  series: [
-    {
-      name: '预警类型',
-      type: 'pie',
-      radius: ['40%', '70%'],
-      avoidLabelOverlap: false,
-      itemStyle: {
-        borderRadius: 10,
-        borderColor: '#0f172a',
-        borderWidth: 2
-      },
-      label: {
-        show: false,
-        position: 'center'
-      },
-      emphasis: {
-        label: {
-          show: true,
-          fontSize: 16,
-          fontWeight: 'bold',
-          color: '#e2e8f0'
-        }
-      },
-      labelLine: {
-        show: false
-      },
-      data: [
-        { value: overTemperatureAlarms.value, name: '过温报警', itemStyle: { color: '#3b82f6' } },
-        { value: overloadAlarms.value, name: '过载报警', itemStyle: { color: '#10b981' } },
-        { value: leakageAlarms.value, name: '漏电报警', itemStyle: { color: '#ef4444' } },
-        { value: 0, name: '智能断路器', itemStyle: { color: '#f59e0b' } },
-        { value: 0, name: '温湿度传感器', itemStyle: { color: '#8b5cf6' } },
-        { value: 0, name: '烟雾报警器', itemStyle: { color: '#ec4899' } }
-      ]
-    }
-  ]
-}))
-
-// 设备类型饼图配置
-const deviceTypeOption = computed(() => ({
-  series: [
-    {
-      name: '设备类型',
-      type: 'pie',
-      radius: ['40%', '70%'],
-      avoidLabelOverlap: false,
-      itemStyle: {
-        borderRadius: 10,
-        borderColor: '#0f172a',
-        borderWidth: 2
-      },
-      label: {
-        show: false,
-        position: 'center'
-      },
-      emphasis: {
-        label: {
-          show: true,
-          fontSize: 16,
-          fontWeight: 'bold',
-          color: '#e2e8f0'
-        }
-      },
-      labelLine: {
-        show: false
-      },
-      data: [
-        { value: 22, name: '智能空开', itemStyle: { color: '#3b82f6' } },
-        { value: 2, name: '温湿度传感器', itemStyle: { color: '#10b981' } },
-        { value: 2, name: '烟雾报警器', itemStyle: { color: '#f59e0b' } },
-        { value: 2, name: '水位水压', itemStyle: { color: '#8b5cf6' } },
-        { value: 1, name: '其他', itemStyle: { color: '#ec4899' } }
-      ]
-    }
-  ]
-}))
-
-// 待处理报警折线图配置
-const alarmPendingOption = ref({
-  tooltip: {
-    trigger: 'axis',
-    backgroundColor: 'rgba(15, 23, 42, 0.9)',
-    borderColor: '#1e3a8a',
-    textStyle: {
-      color: '#e2e8f0'
-    }
-  },
-  grid: {
-    top: '15%',
-    left: '3%',
-    right: '4%',
-    bottom: '3%',
-    containLabel: true
-  },
-  xAxis: {
-    type: 'category',
-    data: ['02-17', '02-22', '02-27', '03-04', '03-09', '03-14'],
-    axisLine: {
-      lineStyle: {
-        color: '#1e3a8a'
-      }
-    },
-    axisLabel: {
-      color: '#64748b',
-      fontSize: 10
-    }
-  },
-  yAxis: {
-    type: 'value',
-    name: '次数',
-    nameTextStyle: {
-      color: '#64748b',
-      fontSize: 10
-    },
-    splitLine: {
-      lineStyle: {
-        color: '#1e3a8a',
-        type: 'dashed'
-      }
-    },
-    axisLine: {
-      lineStyle: {
-        color: '#1e3a8a'
-      }
-    },
-    axisLabel: {
-      color: '#64748b',
-      fontSize: 10
-    }
-  },
-  series: [
-    {
-      name: '待处理报警',
-      data: [4805, 4850, 4900, 4958, 5000, 5304],
-      type: 'line',
-      smooth: true,
-      lineStyle: {
-        color: '#00d4ff',
-        width: 2
-      },
-      itemStyle: {
-        color: '#00d4ff'
-      },
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: 'rgba(0, 212, 255, 0.3)' },
-          { offset: 1, color: 'rgba(0, 212, 255, 0)' }
-        ])
-      },
-      markPoint: {
-        data: [
-          { 
-            type: 'max', 
-            name: 'Max' 
-          },
-          { 
-            type: 'min', 
-            name: 'Min' 
-          }
-        ]
-      }
-    }
-  ]
-})
-
-// 警情分布环形图配置
-const alertDistributionOption = computed(() => ({
-  series: [
-    {
-      type: 'pie',
-      radius: ['30%', '60%'],
-      center: ['40%', '50%'],
-      avoidLabelOverlap: false,
-      itemStyle: {
-        borderRadius: 8,
-        borderColor: '#0f172a',
-        borderWidth: 2
-      },
-      label: {
-        show: true,
-        position: 'center',
-        formatter: '{total|979}\n{name|报警总数}',
-        rich: {
-          total: {
-            fontSize: 28,
-            fontWeight: 'bold',
-            color: '#e2e8f0',
-            lineHeight: 35
-          },
-          name: {
-            fontSize: 14,
-            color: '#94a3b8'
-          }
-        }
-      },
-      labelLine: {
-        show: false
-      },
-      data: alertTypes.value.map(item => ({
-        value: item.count,
-        name: item.name,
-        itemStyle: {
-          color: item.color
-        }
-      }))
-    }
-  ]
-}))
-
-// 警情趋势多系列折线图配置
-const alertTrendOption = ref({
-  tooltip: {
-    trigger: 'axis',
-    backgroundColor: 'rgba(15, 23, 42, 0.9)',
-    borderColor: '#1e3a8a',
-    textStyle: {
-      color: '#e2e8f0'
-    }
-  },
-  legend: {
-    data: ['二级报警', '报警', '预警'],
-    right: 10,
-    top: 0,
-    textStyle: {
-      color: '#94a3b8',
-      fontSize: 10
-    },
-    itemWidth: 10,
-    itemHeight: 10
-  },
-  grid: {
-    top: '15%',
-    left: '3%',
-    right: '4%',
-    bottom: '3%',
-    containLabel: true
-  },
-  xAxis: {
-    type: 'category',
-    data: ['01', '05', '10', '15', '20', '25', '30'],
-    axisLine: {
-      lineStyle: {
-        color: '#1e3a8a'
-      }
-    },
-    axisLabel: {
-      color: '#64748b',
-      fontSize: 10
-    }
-  },
-  yAxis: {
-    type: 'value',
-    name: '数量',
-    nameTextStyle: {
-      color: '#64748b',
-      fontSize: 10
-    },
-    splitLine: {
-      lineStyle: {
-        color: '#1e3a8a',
-        type: 'dashed'
-      }
-    },
-    axisLine: {
-      lineStyle: {
-        color: '#1e3a8a'
-      }
-    },
-    axisLabel: {
-      color: '#64748b',
-      fontSize: 10
-    }
-  },
-  series: [
-    {
-      name: '二级报警',
-      data: [0, 100, 50, 0, 0, 0, 0],
-      type: 'line',
-      smooth: true,
-      lineStyle: {
-        color: '#a855f7',
-        width: 2
-      },
-      itemStyle: {
-        color: '#a855f7'
-      },
-      markPoint: {
-        data: [
-          { 
-            type: 'max', 
-            name: 'Max' 
-          },
-          { 
-            type: 'min', 
-            name: 'Min' 
-          }
-        ]
-      }
-    },
-    {
-      name: '报警',
-      data: [0, 80, 30, 119, 0, 0, 0],
-      type: 'line',
-      smooth: true,
-      lineStyle: {
-        color: '#ef4444',
-        width: 2
-      },
-      itemStyle: {
-        color: '#ef4444'
-      },
-      markPoint: {
-        data: [
-          { 
-            type: 'max', 
-            name: 'Max' 
-          },
-          { 
-            type: 'min', 
-            name: 'Min' 
-          }
-        ]
-      }
-    },
-    {
-      name: '预警',
-      data: [0, 20, 18, 0, 0, 0, 0],
-      type: 'line',
-      smooth: true,
-      lineStyle: {
-        color: '#f59e0b',
-        width: 2
-      },
-      itemStyle: {
-        color: '#f59e0b'
-      },
-      markPoint: {
-        data: [
-          { 
-            type: 'max', 
-            name: 'Max' 
-          },
-          { 
-            type: 'min', 
-            name: 'Min' 
-          }
-        ]
-      }
-    }
-  ]
-})
-
-// 初始化地图
-const initMap = () => {
-  if (typeof AMap === 'undefined') {
-    console.error('高德地图API未加载')
-    return
+  const updateClock = () => {
+    const now = new Date()
+    currentDate.value = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
+    currentClock.value = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
   }
 
-  // 创建地图实例
-  mapInstance.value = new AMap.Map('chinaMap', {
-    zoom: 5,
-    center: [116.4074, 39.9042],
-    mapStyle: 'amap://styles/darkblue',
-    viewMode: '2D',
-    features: ['bg', 'road', 'building', 'point']
-  })
+  const summaryStats = [
+    { label: '项目总数', value: 9, icon: markRaw(Monitor), iconClass: 'ic-blue', numClass: 'n-blue', cardClass: 'stat-card--blue' },
+    { label: '今日报警', value: 26, icon: markRaw(Warning), iconClass: 'ic-red', numClass: 'n-red', cardClass: 'stat-card--red' },
+    { label: '本月报警', value: '20,209', icon: markRaw(Warning), iconClass: 'ic-orange', numClass: 'n-orange', cardClass: 'stat-card--orange' },
+    { label: '设备总数', value: 30, icon: markRaw(Connection), iconClass: 'ic-cyan', numClass: 'n-cyan', cardClass: 'stat-card--cyan' },
+    { label: '在线设备', value: 20, icon: markRaw(Connection), iconClass: 'ic-green', numClass: 'n-green', cardClass: 'stat-card--green' },
+    { label: '离线设备', value: 10, icon: markRaw(Connection), iconClass: 'ic-gray', numClass: 'n-gray', cardClass: 'stat-card--gray' }
+  ]
 
-  // 添加标记点
-  devices.value.forEach(device => {
-    const marker = new AMap.Marker({
-      position: [device.longitude, device.latitude],
-      title: device.name,
-      content: createMarkerContent(device.status)
+  const mapTools = ['图层', '缩放', '定位', '测距', '标注', '刷新']
+
+  const deviceCategories = ref([
+    { name: '智能空开', value: 22, color: '#3b82f6' },
+    { name: '三相9741F1C1AFB', value: 2, color: '#06b6d4' },
+    { name: '红外A811D53F82A8', value: 2, color: '#8b5cf6' },
+    { name: '可燃9741F0C1AFB', value: 2, color: '#10b981' },
+    { name: '单相98CC411D7729', value: 1, color: '#f59e0b' },
+    { name: '其他', value: 5, color: '#ec4899' }
+  ])
+
+  const alertTabs = ['二级报警', '报警', '预警']
+  const activeAlertTab = ref('二级报警')
+
+  const alertTypes = ref([
+    { name: '平台报警', count: 937, percent: 95.54, color: '#3b82f6' },
+    { name: '其他', count: 42, percent: 4.46, color: '#10b981' }
+  ])
+
+  const workOrders = [
+    { label: '隐患查询', count: 149, icon: markRaw(Monitor), colorClass: 'c-white' },
+    { label: '处理中', count: 1, icon: markRaw(Warning), colorClass: 'c-cyan' },
+    { label: '完成工单', count: 6, icon: markRaw(CircleCheck), colorClass: 'c-green' }
+  ]
+
+  const showPreAlarm = ref(false)
+  const onlyOffline = ref(false)
+
+  const alarmList = ref([
+    { project: 'DM100展板 (K1系列)', location: '070529  300号院,1单元', deviceNo: '21070529', line: '节点1', alarmType: '湿度上限报警', alarmTime: '04:53  2026-03-18', status: '未处理' },
+    { project: '曼顿石岩展厅', location: '2号楼,12层,展厅配电', deviceNo: '98CC4D12D72E', line: '线路04', alarmType: '异常分闸', alarmTime: '05:02  2026-03-18', status: '未处理' },
+    { project: 'DM100展板 (K1系列)', location: '070529  300号院,1单元', deviceNo: '21070529', line: '节点1', alarmType: '湿度上限报警', alarmTime: '23:31  2026-03-18', status: '未处理' },
+    { project: 'DM100展板 (K1系列)', location: '070529  300号院,1单元', deviceNo: '21070529', line: '节点1', alarmType: '湿度上限报警', alarmTime: '14:37  2026-03-18', status: '未处理' },
+    { project: '曼顿石岩展厅', location: '厅L10S  2号楼,12层,2号', deviceNo: 'B813322F82A8', line: '总路', alarmType: '异常分闸', alarmTime: '01:41  2026-03-18', status: '未处理' }
+  ])
+
+  const devices = ref([
+    { name: '深圳设备1', status: 'online', longitude: 114.0579, latitude: 22.5431, city: '深圳' },
+    { name: '广州设备1', status: 'online', longitude: 113.2644, latitude: 23.1291, city: '广州' },
+    { name: '东莞设备1', status: 'alarm', longitude: 113.75, latitude: 23.02, city: '东莞' },
+    { name: '佛山设备1', status: 'online', longitude: 113.12, latitude: 23.02, city: '佛山' },
+    { name: '惠州设备1', status: 'offline', longitude: 114.41, latitude: 23.09, city: '惠州' },
+    { name: '中山设备1', status: 'online', longitude: 113.38, latitude: 22.52, city: '中山' },
+    { name: '珠海设备1', status: 'online', longitude: 113.57, latitude: 22.27, city: '珠海' },
+    { name: '江门设备1', status: 'alarm', longitude: 113.08, latitude: 22.58, city: '江门' }
+  ])
+
+  const totalDevices = computed(() => devices.value.length)
+  const onlineDevices = computed(() => devices.value.filter((d) => d.status === 'online').length)
+  const offlineDevices = computed(() => devices.value.filter((d) => d.status === 'offline').length)
+  const alarmDevices = computed(() => devices.value.filter((d) => d.status === 'alarm').length)
+
+  const energyTrendOption = computed(() => getEnergyTrendOption())
+  const deviceCategoryOption = computed(() => getDeviceCategoryOption(deviceCategories.value, 30))
+  const powerCurveOption = computed(() => getPowerCurveOption())
+  const alarmPendingOption = computed(() => getAlarmPendingOption())
+  const alertDistributionOption = computed(() => getAlertDistributionOption(alertTypes.value))
+  const alertTrendOption = computed(() => getAlertTrendOption())
+
+  const energyChartRef = ref(null)
+  const powerChartRef = ref(null)
+  const alarmPendingChartRef = ref(null)
+  const alertDistributionChartRef = ref(null)
+  const alertTrendChartRef = ref(null)
+  const chinaMap = ref(null)
+  const mapInstance = ref(null)
+  const markers = ref([])
+
+  const createMarkerContent = (status) => {
+    const color = status === 'online' ? '#10b981' : status === 'alarm' ? '#ef4444' : '#64748b'
+    return `<div style="position:relative;width:14px;height:14px;">
+      <span style="position:absolute;inset:-4px;border-radius:50%;background:${color};opacity:.35;animation:markerPulse 2s ease-out infinite;"></span>
+      <span style="position:absolute;inset:0;border-radius:50%;background:${color};border:2px solid #fff;box-shadow:0 0 12px ${color};"></span>
+    </div>`
+  }
+
+  const createInfoWindowContent = (device) => {
+    const statusText = device.status === 'online' ? '在线' : device.status === 'alarm' ? '告警' : '离线'
+    const statusColor = device.status === 'online' ? '#10b981' : device.status === 'alarm' ? '#ef4444' : '#64748b'
+    return `<div style="padding:8px;background:rgba(6,20,48,.95);border:1px solid rgba(0,150,255,.4);border-radius:4px;color:#e2e8f0;min-width:120px;font-size:12px;">
+      <div style="font-weight:bold;color:#3b82f6;margin-bottom:4px;">${device.name}</div>
+      <div>状态: <span style="color:${statusColor}">${statusText}</span></div>
+      <div>城市: ${device.city}</div>
+    </div>`
+  }
+
+  const initMap = () => {
+    if (typeof AMap === 'undefined') return
+    mapInstance.value = new AMap.Map('chinaMap', {
+      zoom: 8,
+      center: [113.85, 22.85],
+      mapStyle: 'amap://styles/darkblue',
+      viewMode: '2D',
+      features: ['bg', 'road', 'building', 'point']
     })
-
-    // 创建信息窗体
-    const infoWindow = new AMap.InfoWindow({
-      content: createInfoWindowContent(device),
-      offset: new AMap.Pixel(0, -30)
-    })
-
-    // 点击标记点显示信息窗体
-    marker.on('click', () => {
-      infoWindow.open(mapInstance.value, marker.getPosition())
-    })
-
-    mapInstance.value.add(marker)
-    markers.value.push(marker)
-  })
-}
-
-// 创建标记点内容
-const createMarkerContent = (status) => {
-  const color = status === 'online' ? '#10b981' : status === 'alarm' ? '#ef4444' : '#64748b'
-  return `
-    <div style="
-      width: 12px;
-      height: 12px;
-      background-color: ${color};
-      border-radius: 50%;
-      border: 2px solid #fff;
-      box-shadow: 0 0 10px ${color};
-    "></div>
-  `
-}
-
-// 创建信息窗体内容
-const createInfoWindowContent = (device) => {
-  const statusText = device.status === 'online' ? '在线' : device.status === 'alarm' ? '告警' : '离线'
-  const statusColor = device.status === 'online' ? '#10b981' : device.status === 'alarm' ? '#ef4444' : '#64748b'
-
-  return `
-    <div style="
-      padding: 10px;
-      background-color: rgba(15, 23, 42, 0.9);
-      border: 1px solid #1e3a8a;
-      border-radius: 4px;
-      color: #e2e8f0;
-      min-width: 150px;
-    ">
-      <div style="font-weight: bold; font-size: 14px; margin-bottom: 5px; color: #3b82f6;">${device.name}</div>
-      <div style="font-size: 12px; margin-bottom: 3px;">状态: <span style="color: ${statusColor};">${statusText}</span></div>
-      <div style="font-size: 12px;">城市: ${device.city}</div>
-    </div>
-  `
-}
-
-// 组件挂载时初始化
-onMounted(() => {
-  updateTime()
-  setInterval(updateTime, 1000)
-
-  // 延迟初始化地图，确保高德地图API已加载
-  setTimeout(() => {
-    initMap()
-  }, 1000)
-
-  // 启动用能趋势图表轮播
-  setTimeout(() => {
-    startEnergyChartCarousel()
-  }, 1500)
-
-  // 启动功率曲线图表轮播
-  setTimeout(() => {
-    startPowerChartCarousel()
-  }, 2000)
-
-  // 启动待处理报警图表轮播
-  setTimeout(() => {
-    startAlarmPendingChartCarousel()
-  }, 2200)
-
-  // 启动警情趋势图表轮播
-  setTimeout(() => {
-    startAlertTrendChartCarousel()
-  }, 2400)
-})
-
-// 用能趋势图表轮播
-let energyCarouselInterval = null
-const startEnergyChartCarousel = () => {
-  if (!energyChartRef.value) return
-  
-  const chart = energyChartRef.value
-  let dataIndex = 0
-  const dataLength = energyTrendOption.value.xAxis.data.length
-  
-  // 每秒轮播
-  energyCarouselInterval = setInterval(() => {
-    chart.dispatchAction({
-      type: 'showTip',
-      seriesIndex: 0,
-      dataIndex: dataIndex
-    })
-    
-    dataIndex = (dataIndex + 1) % dataLength
-  }, 2000)
-}
-
-// 功率曲线图表轮播
-let powerCarouselInterval = null
-const startPowerChartCarousel = () => {
-  if (!powerChartRef.value) return
-  
-  const chart = powerChartRef.value
-  let dataIndex = 0
-  const dataLength = powerCurveOption.value.xAxis.data.length
-  
-  // 每秒轮播
-  powerCarouselInterval = setInterval(() => {
-    chart.dispatchAction({
-      type: 'showTip',
-      seriesIndex: 0,
-      dataIndex: dataIndex
-    })
-    
-    dataIndex = (dataIndex + 1) % dataLength
-  }, 2000)
-}
-
-// 待处理报警图表轮播
-let alarmPendingCarouselInterval = null
-const startAlarmPendingChartCarousel = () => {
-  if (!alarmPendingChartRef.value) return
-  
-  const chart = alarmPendingChartRef.value
-  let dataIndex = 0
-  const dataLength = alarmPendingOption.value.xAxis.data.length
-  
-  // 每秒轮播
-  alarmPendingCarouselInterval = setInterval(() => {
-    chart.dispatchAction({
-      type: 'showTip',
-      seriesIndex: 0,
-      dataIndex: dataIndex
-    })
-    
-    dataIndex = (dataIndex + 1) % dataLength
-  }, 2000)
-}
-
-// 警情趋势图表轮播
-let alertTrendCarouselInterval = null
-const startAlertTrendChartCarousel = () => {
-  if (!alertTrendChartRef.value) return
-  
-  const chart = alertTrendChartRef.value
-  let dataIndex = 0
-  const dataLength = alertTrendOption.value.xAxis.data.length
-  
-  // 每秒轮播
-  alertTrendCarouselInterval = setInterval(() => {
-    for (let i = 0; i < 3; i++) {
-      chart.dispatchAction({
-        type: 'showTip',
-        seriesIndex: i,
-        dataIndex: dataIndex
+    devices.value.forEach((device) => {
+      const marker = new AMap.Marker({
+        position: [device.longitude, device.latitude],
+        content: createMarkerContent(device.status),
+        zIndex: 5
       })
-    }
-    
-    dataIndex = (dataIndex + 1) % dataLength
-  }, 2000)
-}
+      const infoWindow = new AMap.InfoWindow({
+        content: createInfoWindowContent(device),
+        offset: new AMap.Pixel(0, -28)
+      })
+      marker.on('click', () => infoWindow.open(mapInstance.value, marker.getPosition()))
+      mapInstance.value.add(marker)
+      markers.value.push(marker)
+    })
+  }
+
+  const startChartCarousel = (chartRef, optionRef, seriesIndexes = [0]) => {
+    if (!chartRef.value) return null
+    const chart = chartRef.value
+    let dataIndex = 0
+    const len = optionRef.value?.xAxis?.data?.length || 0
+    if (!len) return null
+    return setInterval(() => {
+      seriesIndexes.forEach((si) => {
+        chart.dispatchAction({ type: 'showTip', seriesIndex: si, dataIndex })
+      })
+      dataIndex = (dataIndex + 1) % len
+    }, 2000)
+  }
+
+  let timers = []
+
+  onMounted(() => {
+    updateClock()
+    clockTimer = setInterval(updateClock, 1000)
+    setTimeout(() => initMap(), 800)
+    setTimeout(() => {
+      timers = [
+        startChartCarousel(energyChartRef, energyTrendOption),
+        startChartCarousel(powerChartRef, powerCurveOption),
+        startChartCarousel(alarmPendingChartRef, alarmPendingOption),
+        startChartCarousel(alertTrendChartRef, alertTrendOption, [0, 1, 2])
+      ].filter(Boolean)
+    }, 1500)
+  })
+
+  onBeforeUnmount(() => {
+    if (clockTimer) clearInterval(clockTimer)
+    timers.forEach((t) => clearInterval(t))
+  })
 </script>
 
-<style scoped>
-.large-screen-container {
-  width: 100vw;
-  height: 100vh;
-  background-color: #0f172a;
-  background-image: radial-gradient(circle at 50% 50%, #1e293b 0%, #0f172a 100%);
-  color: #e2e8f0;
-  padding: 0 20px;
-  margin: 0;
-  box-sizing: border-box;
-  overflow: hidden;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9999;
-}
+<style lang="scss" scoped>
+  $dw: 1920;
+  $dh: 1080;
 
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 20px;
-  height: 70px;
-  background-color: rgba(15, 23, 42, 0.8);
-  border-radius: 0;
-  margin: 0 -20px 10px -20px;
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.logo img {
-  width: 40px;
-  height: 40px;
-}
-
-.logo span {
-  font-size: 16px;
-  font-weight: bold;
-  color: #3b82f6;
-}
-
-.title {
-  font-size: 28px;
-  font-weight: bold;
-  color: #3b82f6;
-}
-
-.time {
-  font-size: 16px;
-  font-weight: bold;
-  color: #94a3b8;
-}
-
-.right-info {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 14px;
-}
-
-.warning {
-  color: #ef4444;
-}
-
-.dot {
-  color: #10b981;
-}
-
-.main-content {
-  display: flex;
-  gap: 10px;
-  height: calc(100vh - 80px);
-}
-
-
-
-.left-section,
-.right-section {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.center-section {
-  flex: 2.5;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-/* 更新注释，反映当前的宽度比例 */
-.main-content {
-  display: flex;
-  gap: 10px;
-  /* 在底部留出20px的空隙 */
-  height: calc(100vh - 100px);
-  /* 使用flex布局实现宽度分配 */
-  /* 左右两侧各占1份，中间区域占2.5份，比例为1:2.5:1 */
-}
-
-/* 确保中间区域卡片能正确分配高度 */
-.center-section .card {
-  /* 移除flex: 1，避免覆盖map-card和chart-card的flex属性 */
-  /* 确保卡片内部也使用flex布局 */
-  display: flex;
-  flex-direction: column;
-}
-
-/* 确保地图容器能自适应卡片高度 */
-.map-container-full {
-  /* 让地图容器填满卡片高度 */
-  flex: 1;
-  /* 确保地图容器内部也使用flex布局 */
-  display: flex;
-  flex-direction: column;
-  /* 移除地图容器的padding和margin，确保完全填满卡片 */
-  padding: 0;
-  margin: 0;
-}
-
-.card {
-  background-color: rgba(15, 23, 42, 0.8);
-  border: 1px solid #1e3a8a;
-  border-radius: 8px;
-  padding: 15px;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-
-.card-title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #94a3b8;
-  margin-bottom: 15px;
-  text-align: center;
-}
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 15px;
-}
-
-.stat-item {
-  text-align: center;
-}
-
-.stat-label {
-  font-size: 14px;
-  font-weight: bold;
-  color: #64748b;
-  margin-bottom: 5px;
-}
-
-.stat-value {
-  font-size: 22px;
-  font-weight: bold;
-  color: #e2e8f0;
-}
-
-.stat-value.green {
-  color: #10b981;
-}
-
-.stat-value.red {
-  color: #ef4444;
-}
-
-.alarm-content,
-.notice-content {
-  flex: 1;
-  overflow: hidden;
-  position: relative;
-}
-
-.no-alarm,
-.no-notice {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: #64748b;
-}
-
-.alarm-icon,
-.notice-icon {
-  margin-bottom: 10px;
-}
-
-.alarm-scroll,
-.notice-scroll {
-  height: 100%;
-  overflow-y: auto;
-}
-
-.alarm-item,
-.notice-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 0;
-  border-bottom: 1px solid #1e3a8a;
-}
-
-.alarm-text,
-.notice-text {
-  flex: 1;
-  font-size: 12px;
-  color: #e2e8f0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.alarm-time,
-.notice-time {
-  font-size: 11px;
-  color: #64748b;
-}
-
-/* 中间区域样式 */
-.map-card {
-  flex: 3;
-  padding: 0;
-  overflow: hidden;
-}
-
-.chart-card {
-  flex: 1;
-}
-
-.chart-container {
-  flex: 1;
-  min-height: 0;
-  height: 100%;
-}
-
-/* 右侧区域样式 */
-.warning-type-card,
-.device-type-card {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.ring-chart-container,
-.pie-chart-container {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.chart-legend {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 10px;
-  margin-top: 10px;
-  font-size: 14px;
-  font-weight: bold;
-  color: #94a3b8;
-}
-
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.legend-color {
-  width: 10px;
-  height: 10px;
-  border-radius: 2px;
-}
-
-.legend-color.blue {
-  background-color: #3b82f6;
-}
-
-.legend-color.green {
-  background-color: #10b981;
-}
-
-.legend-color.red {
-  background-color: #ef4444;
-}
-
-.legend-color.orange {
-  background-color: #f59e0b;
-}
-
-.legend-color.purple {
-  background-color: #8b5cf6;
-}
-
-.legend-color.pink {
-  background-color: #ec4899;
-}
-
-/* 地图控件样式 */
-.map-control {
-  position: absolute;
-  top: 15px;
-  left: 15px;
-  background-color: rgba(15, 23, 42, 0.9);
-  border: 1px solid #1e3a8a;
-  border-radius: 8px;
-  padding: 15px;
-  z-index: 1000;
-  min-width: 120px;
-}
-
-.control-top {
-  margin-bottom: 15px;
-  padding-bottom: 15px;
-  border-bottom: 1px solid #1e3a8a;
-}
-
-.control-title {
-  font-size: 14px;
-  font-weight: bold;
-  color: #64748b;
-  margin-bottom: 5px;
-}
-
-.control-value {
-  font-size: 26px;
-  font-weight: bold;
-  color: #3b82f6;
-}
-
-.status-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.status-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  font-weight: bold;
-  color: #e2e8f0;
-}
-
-.status-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-}
-
-.status-dot.online {
-  background-color: #10b981;
-}
-
-.status-dot.alarm {
-  background-color: #ef4444;
-}
-
-.status-dot.offline {
-  background-color: #64748b;
-}
-
-/* 自定义滚动条样式 */
-.alarm-scroll::-webkit-scrollbar,
-.notice-scroll::-webkit-scrollbar {
-  width: 4px;
-}
-
-.alarm-scroll::-webkit-scrollbar-track,
-.notice-scroll::-webkit-scrollbar-track {
-  background: #1e3a8a;
-  border-radius: 2px;
-}
-
-.alarm-scroll::-webkit-scrollbar-thumb,
-.notice-scroll::-webkit-scrollbar-thumb {
-  background: #3b82f6;
-  border-radius: 2px;
-}
-
-/* 左侧模块样式 */
-.module-card {
-  background: linear-gradient(135deg, rgba(30, 58, 138, 0.3) 0%, rgba(15, 23, 42, 0.8) 100%);
-  border: 1px solid rgba(59, 130, 246, 0.3);
-  border-radius: 8px;
-  padding: 15px;
-  display: flex;
-  flex-direction: column;
-}
-
-.module-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 15px;
-}
-
-.module-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 18px;
-  font-weight: bold;
-  color: #e2e8f0;
-}
-
-.title-icon {
-  width: 4px;
-  height: 18px;
-  background: linear-gradient(180deg, #00d4ff 0%, #3b82f6 100%);
-  border-radius: 2px;
-}
-
-.module-more {
-  font-size: 14px;
-  font-weight: bold;
-  color: #e2e8f0;
-  cursor: pointer;
-}
-
-.module-more:hover {
-  color: #00d4ff;
-}
-
-/* 用能趋势模块 */
-.energy-module {
-  flex: 1.7;
-}
-
-.energy-stats {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-  margin-bottom: 15px;
-}
-
-.energy-item {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  background: rgba(30, 58, 138, 0.2);
-  border-radius: 8px;
-  padding: 12px;
-}
-
-.energy-icon {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.icon-bg {
-  width: 40px;
-  height: 40px;
-  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 212, 255, 0.05) 100%);
-  border: 1px solid rgba(0, 212, 255, 0.3);
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.icon-bg.green {
-  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.05) 100%);
-  border-color: rgba(16, 185, 129, 0.3);
-}
-
-.energy-label {
-  font-size: 15px;
-  font-weight: bold;
-  color: #e2e8f0;
-  line-height: 1.4;
-}
-
-.unit {
-  font-size: 13px;
-  font-weight: bold;
-  color: #e2e8f0;
-}
-
-.help-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-  height: 14px;
-  background: #94a3b8;
-  border-radius: 50%;
-  font-size: 10px;
-  margin-left: 4px;
-  cursor: help;
-}
-
-.energy-values {
-  display: flex;
-  flex: 1;
-  justify-content: space-around;
-}
-
-.value-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-}
-
-.value-label {
-  font-size: 14px;
-  font-weight: bold;
-  color: #e2e8f0;
-}
-
-.value-num {
-  font-size: 20px;
-  font-weight: bold;
-}
-
-.value-num.blue {
-  color: #00d4ff;
-}
-
-.value-num.cyan {
-  color: #06b6d4;
-}
-
-.energy-chart {
-  flex: 1;
-  min-height: 150px;
-}
-
-/* 设备分类模块 */
-.device-category-module {
-  flex: 1;
-}
-
-.device-category-content {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  flex: 1;
-}
-
-.ring-chart {
-  flex: 1;
-  height: 100%;
-  min-height: 150px;
-}
-
-.category-list {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.category-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 15px;
-  font-weight: bold;
-}
-
-.category-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 2px;
-}
-
-.category-name {
-  color: #e2e8f0;
-  flex: 1;
-  font-weight: bold;
-}
-
-.category-value {
-  color: #e2e8f0;
-  font-weight: bold;
-  font-size: 16px;
-}
-
-/* 功率曲线模块 */
-.power-curve-module {
-  flex: 1;
-}
-
-.power-chart {
-  flex: 1;
-  min-height: 150px;
-}
-
-/* 左侧区域布局 */
-.left-section {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-/* 响应式调整 */
-@media (max-width: 1400px) {
-  .energy-values {
-    gap: 10px;
+  @function vw($px) {
+    @return calc(#{$px} / #{$dw} * 100vw);
   }
-  
-  .value-num {
-    font-size: 14px;
+
+  @function vh($px) {
+    @return calc(#{$px} / #{$dh} * 100vh);
   }
-  
-  .device-category-content {
+
+  $panel-line: rgba(35, 216, 255, 0.26);
+  $panel-line-strong: rgba(79, 229, 255, 0.58);
+  $panel-bg: rgba(5, 17, 40, 0.78);
+  $cyan: #22d3ee;
+  $blue: #38bdf8;
+
+  .large-screen {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    color: #e2e8f0;
+    font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    background:
+      radial-gradient(circle at 50% 38%, rgba(14, 116, 144, 0.18) 0, rgba(14, 116, 144, 0) 34%),
+      radial-gradient(circle at 8% 12%, rgba(37, 99, 235, 0.24) 0, rgba(37, 99, 235, 0) 30%),
+      radial-gradient(circle at 88% 78%, rgba(6, 182, 212, 0.18) 0, rgba(6, 182, 212, 0) 28%),
+      linear-gradient(145deg, #020617 0%, #03142d 46%, #01040d 100%);
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background:
+        linear-gradient(115deg, transparent 0 37%, rgba(34, 211, 238, 0.05) 39%, transparent 42% 100%),
+        linear-gradient(245deg, transparent 0 54%, rgba(59, 130, 246, 0.05) 56%, transparent 60% 100%);
+      opacity: 0.9;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background: radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, 0.5) 100%);
+    }
+  }
+
+  .bg-grid {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-image:
+      linear-gradient(rgba(34, 211, 238, 0.055) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(34, 211, 238, 0.055) 1px, transparent 1px),
+      linear-gradient(rgba(59, 130, 246, 0.035) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(59, 130, 246, 0.035) 1px, transparent 1px);
+    background-size: vw(48) vw(48), vw(48) vw(48), vw(12) vw(12), vw(12) vw(12);
+    mask-image: radial-gradient(ellipse 82% 72% at 50% 45%, #000 18%, transparent 100%);
+    animation: gridFloat 18s linear infinite;
+  }
+
+  .bg-glow {
+    position: absolute;
+    pointer-events: none;
+    border-radius: 50%;
+    filter: blur(vw(80));
+
+    &--tl {
+      top: vh(-120);
+      left: vw(-80);
+      width: vw(460);
+      height: vw(460);
+      background: rgba(0, 120, 255, 0.26);
+    }
+
+    &--br {
+      bottom: vh(-100);
+      right: vw(-60);
+      width: vw(430);
+      height: vw(430);
+      background: rgba(6, 182, 212, 0.2);
+    }
+  }
+
+  .bg-orbit {
+    position: absolute;
+    pointer-events: none;
+    border: 1px solid rgba(34, 211, 238, 0.12);
+    border-radius: 50%;
+    box-shadow: inset 0 0 vw(28) rgba(34, 211, 238, 0.08), 0 0 vw(40) rgba(37, 99, 235, 0.08);
+    opacity: 0.75;
+    animation: orbitSpin 28s linear infinite;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      border-radius: 50%;
+      background: $cyan;
+      box-shadow: 0 0 vw(16) rgba(34, 211, 238, 0.9);
+    }
+
+    &::before {
+      top: 12%;
+      left: 50%;
+      width: vw(5);
+      height: vw(5);
+    }
+
+    &::after {
+      right: 16%;
+      bottom: 22%;
+      width: vw(3);
+      height: vw(3);
+      opacity: 0.75;
+    }
+
+    &--left {
+      left: vw(-170);
+      top: vh(220);
+      width: vw(360);
+      height: vw(360);
+    }
+
+    &--right {
+      right: vw(-120);
+      top: vh(130);
+      width: vw(260);
+      height: vw(260);
+      animation-direction: reverse;
+    }
+  }
+
+  .bg-scanline {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background:
+      linear-gradient(180deg, transparent, rgba(34, 211, 238, 0.06), transparent),
+      repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.08) 2px, rgba(0, 0, 0, 0.08) 4px);
+    opacity: 0.5;
+    animation: scanMove 7s ease-in-out infinite;
+  }
+
+  .screen-header {
+    position: relative;
+    flex: 0 0 vh(72);
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    padding: 0 vw(24);
+    background:
+      linear-gradient(90deg, rgba(34, 211, 238, 0.06), transparent 18% 82%, rgba(59, 130, 246, 0.07)),
+      linear-gradient(180deg, rgba(7, 32, 74, 0.8) 0%, rgba(2, 10, 28, 0.9) 100%);
+    border-bottom: 1px solid $panel-line;
+    backdrop-filter: blur(18px) saturate(1.3);
+    box-shadow: 0 vh(10) vw(44) rgba(0, 0, 0, 0.28), inset 0 -1px 0 rgba(125, 211, 252, 0.08);
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: vh(8);
+      width: vw(260);
+      height: 1px;
+      background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.55));
+      opacity: 0.9;
+    }
+
+    &::before {
+      left: vw(26);
+    }
+
+    &::after {
+      right: vw(26);
+      transform: scaleX(-1);
+    }
+  }
+
+  .header-bottom-glow {
+    position: absolute;
+    bottom: 0;
+    left: 10%;
+    right: 10%;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(0, 220, 255, 0.9), transparent);
+    box-shadow: 0 0 vw(20) rgba(0, 200, 255, 0.6);
+  }
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: vw(10);
+    font-size: vw(13);
+    color: #94a3b8;
+  }
+
+  .live-dot {
+    width: vw(8);
+    height: vw(8);
+    border-radius: 50%;
+    background: #34d399;
+    box-shadow: 0 0 vw(10) rgba(16, 185, 129, 0.8), 0 0 0 vw(5) rgba(16, 185, 129, 0.12);
+    animation: livePulse 2s ease-in-out infinite;
+  }
+
+  .live-text {
+    color: #6ee7b7;
+    font-size: vw(12);
+    font-weight: 600;
+    letter-spacing: vw(1);
+  }
+
+  .meta-divider {
+    opacity: 0.25;
+    color: #3b82f6;
+  }
+
+  .meta-time {
+    color: #7dd3fc;
+    font-variant-numeric: tabular-nums;
+    font-weight: 600;
+  }
+
+  .meta-weather,
+  .meta-location {
+    display: inline-flex;
+    align-items: center;
+    gap: vw(4);
+    transition: color 0.2s;
+
+    &:hover {
+      color: #e2e8f0;
+    }
+  }
+
+  .header-center {
+    display: flex;
+    align-items: center;
+    gap: vw(20);
+  }
+
+  .header-line {
+    width: vw(100);
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.7), transparent);
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      width: vw(6);
+      height: vw(6);
+      border-radius: 50%;
+      background: #00d4ff;
+      box-shadow: 0 0 vw(8) #00d4ff;
+      transform: translateY(-50%);
+    }
+
+    &:first-child::after {
+      right: 0;
+    }
+
+    &:last-child::after {
+      left: 0;
+    }
+  }
+
+  .header-title-wrap {
+    position: relative;
+    text-align: center;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      width: vw(16);
+      height: vw(16);
+      border: 1px solid rgba(34, 211, 238, 0.5);
+      transform: translateY(-50%) rotate(45deg);
+      box-shadow: 0 0 vw(12) rgba(34, 211, 238, 0.25);
+    }
+
+    &::before {
+      left: vw(-28);
+    }
+
+    &::after {
+      right: vw(-28);
+    }
+  }
+
+  .header-title {
+    margin: 0;
+    font-size: vw(28);
+    font-weight: 800;
+    letter-spacing: vw(3);
+    background: linear-gradient(180deg, #ffffff 0%, #dffaff 34%, #67e8f9 68%, #38bdf8 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    filter: drop-shadow(0 0 vw(18) rgba(34, 211, 238, 0.38));
+    text-shadow: 0 0 vw(40) rgba(56, 189, 248, 0.32);
+    animation: titleShimmer 4s ease-in-out infinite;
+  }
+
+  .header-subtitle {
+    margin: vh(2) 0 0;
+    font-size: vw(11);
+    letter-spacing: vw(4);
+    color: rgba(125, 211, 252, 0.55);
+    text-transform: uppercase;
+  }
+
+  .header-right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: vw(20);
+    font-size: vw(13);
+    color: #94a3b8;
+  }
+
+  .header-tools {
+    display: flex;
+    align-items: center;
+    gap: vw(8);
+  }
+
+  .tool-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: vw(32);
+    height: vw(32);
+    border-radius: vw(6);
+    font-size: vw(16);
+    color: #7dd3fc;
+    background: linear-gradient(145deg, rgba(14, 116, 144, 0.2), rgba(15, 23, 42, 0.42));
+    border: 1px solid rgba(34, 211, 238, 0.24);
+    box-shadow: inset 0 0 vw(12) rgba(34, 211, 238, 0.06);
+    cursor: pointer;
+    transition: all 0.25s;
+
+    &:hover {
+      color: #fff;
+      background: rgba(0, 150, 255, 0.25);
+      border-color: rgba(34, 211, 238, 0.65);
+      box-shadow: 0 0 vw(18) rgba(34, 211, 238, 0.32), inset 0 0 vw(12) rgba(34, 211, 238, 0.1);
+      transform: translateY(-1px);
+    }
+  }
+
+  .header-user {
+    display: inline-flex;
+    align-items: center;
+    gap: vw(4);
+    padding: vh(4) vw(10);
+    border-radius: vw(20);
+    background: rgba(15, 23, 42, 0.5);
+    border: 1px solid rgba(34, 211, 238, 0.24);
+    box-shadow: inset 0 0 vw(12) rgba(34, 211, 238, 0.05);
+    cursor: pointer;
+    transition: border-color 0.2s;
+
+    &:hover {
+      border-color: rgba(0, 200, 255, 0.45);
+    }
+  }
+
+  .screen-body {
+    position: relative;
+    z-index: 1;
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    gap: vw(12);
+    padding: vh(12) vw(16) vh(14);
+  }
+
+  .side-column {
+    flex: 0 0 vw(360);
+    width: vw(360);
+    display: flex;
+    flex-direction: column;
+    gap: vh(8);
+    min-height: 0;
+
+    > .screen-panel:nth-child(1) {
+      flex: 1;
+    }
+
+    > .screen-panel:nth-child(2) {
+      flex: 1.15;
+    }
+
+    > .screen-panel:nth-child(3) {
+      flex: 1;
+    }
+
+    > .screen-panel:nth-child(4) {
+      flex: 0.85;
+    }
+  }
+
+  .center-column {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: vh(8);
+    min-height: 0;
+  }
+
+  .screen-panel {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+    background:
+      linear-gradient(150deg, rgba(34, 211, 238, 0.07), transparent 24% 72%, rgba(59, 130, 246, 0.08)),
+      linear-gradient(145deg, rgba(6, 22, 52, 0.88) 0%, rgba(3, 12, 32, 0.78) 100%);
+    border: 1px solid $panel-line;
+    backdrop-filter: blur(14px) saturate(1.25);
+    box-shadow:
+      inset 0 1px 0 rgba(125, 211, 252, 0.12),
+      inset 0 0 vw(28) rgba(14, 165, 233, 0.05),
+      0 vw(10) vw(34) rgba(0, 0, 0, 0.36);
+    transition: border-color 0.3s, box-shadow 0.3s;
+
+    &:hover {
+      border-color: $panel-line-strong;
+      box-shadow:
+        inset 0 1px 0 rgba(125, 211, 252, 0.16),
+        inset 0 0 vw(34) rgba(14, 165, 233, 0.07),
+        0 0 vw(32) rgba(14, 165, 233, 0.16);
+    }
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      width: vw(12);
+      height: vw(12);
+      border: 2px solid $cyan;
+      pointer-events: none;
+      z-index: 2;
+      opacity: 0.85;
+    }
+
+    &::before {
+      top: -1px;
+      left: -1px;
+      border-right: none;
+      border-bottom: none;
+      box-shadow: vw(-2) vw(-2) vw(10) rgba(34, 211, 238, 0.38);
+    }
+
+    &::after {
+      bottom: -1px;
+      right: -1px;
+      border-left: none;
+      border-top: none;
+      box-shadow: vw(2) vw(2) vw(10) rgba(34, 211, 238, 0.38);
+    }
+  }
+
+  .energy-panel {
+    flex: 1.55;
+  }
+
+  .category-panel {
+    flex: 1;
+  }
+
+  .power-panel {
+    flex: 0.95;
+  }
+
+  .distribution-panel {
+    flex: 1.15;
+  }
+
+  .work-panel {
+    flex: 0.85;
+  }
+
+  .panel-head {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: vh(10) vw(14);
+    background:
+      linear-gradient(90deg, rgba(34, 211, 238, 0.18) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 100%),
+      linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent);
+    border-bottom: 1px solid rgba(34, 211, 238, 0.14);
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: vh(6);
+      bottom: vh(6);
+      width: vw(3);
+      background: linear-gradient(180deg, $cyan, #6366f1);
+      border-radius: 0 vw(2) vw(2) 0;
+      box-shadow: 0 0 vw(10) rgba(0, 212, 255, 0.5);
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: vw(14);
+      right: vw(14);
+      height: 1px;
+      background: linear-gradient(90deg, rgba(34, 211, 238, 0.52), transparent);
+    }
+  }
+
+  .panel-head--map {
+    padding: vh(8) vw(14);
+  }
+
+  .panel-badge {
+    padding: vh(2) vw(10);
+    font-size: vw(10);
+    font-weight: 600;
+    letter-spacing: vw(1);
+    color: #6ee7b7;
+    background: rgba(16, 185, 129, 0.12);
+    border: 1px solid rgba(16, 185, 129, 0.35);
+    border-radius: vw(20);
+    animation: badgePulse 3s ease-in-out infinite;
+  }
+
+  .panel-title {
+    padding-left: vw(12);
+    font-size: vw(15);
+    font-weight: 700;
+    color: #f1f5f9;
+    letter-spacing: vw(1);
+    text-shadow: 0 0 vw(20) rgba(34, 211, 238, 0.36);
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: vw(5);
+      height: vw(5);
+      margin-right: vw(8);
+      border-radius: 50%;
+      background: $cyan;
+      box-shadow: 0 0 vw(10) rgba(34, 211, 238, 0.85);
+      vertical-align: middle;
+    }
+  }
+
+  .panel-link {
+    font-size: vw(11);
+    color: #7dd3fc;
+    cursor: pointer;
+    white-space: nowrap;
+    opacity: 0.85;
+    transition: opacity 0.2s, text-shadow 0.2s;
+
+    &:hover {
+      opacity: 1;
+      text-shadow: 0 0 vw(10) rgba(0, 200, 255, 0.6);
+    }
+  }
+
+  .panel-body {
+    flex: 1;
+    min-height: 0;
+    padding: vh(8) vw(10);
+    display: flex;
     flex-direction: column;
   }
-  
-  .category-list {
-    flex-direction: row;
-    flex-wrap: wrap;
+
+  .energy-stats {
+    display: flex;
+    flex-direction: column;
+    gap: vh(6);
+    margin-bottom: vh(6);
   }
-  
-  .category-item {
+
+  .energy-row {
+    display: flex;
+    align-items: center;
+    gap: vw(10);
+    padding: vh(8) vw(8);
+    background:
+      linear-gradient(90deg, rgba(34, 211, 238, 0.12) 0%, rgba(15, 23, 42, 0.16) 100%),
+      rgba(2, 8, 23, 0.22);
+    border: 1px solid rgba(34, 211, 238, 0.14);
+    border-radius: vw(8);
+    box-shadow: inset 0 0 vw(16) rgba(34, 211, 238, 0.04);
+    transition: border-color 0.25s, background 0.25s, transform 0.25s;
+
+    &:hover {
+      transform: translateX(vw(2));
+      border-color: rgba(34, 211, 238, 0.34);
+      background: linear-gradient(90deg, rgba(34, 211, 238, 0.16) 0%, rgba(59, 130, 246, 0.09) 100%);
+    }
+  }
+
+  .energy-label-wrap {
+    display: flex;
+    align-items: center;
+    gap: vw(8);
+    flex-shrink: 0;
+  }
+
+  .energy-icon {
+    width: vw(34);
+    height: vw(34);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: vw(6);
+    border: 1px solid rgba(34, 211, 238, 0.45);
+    background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.18), transparent 35%), rgba(34, 211, 238, 0.1);
+    box-shadow: 0 0 vw(14) rgba(34, 211, 238, 0.18), inset 0 0 vw(10) rgba(34, 211, 238, 0.1);
+
+    svg {
+      width: vw(18);
+      height: vw(18);
+    }
+
+    &--green {
+      border-color: rgba(16, 185, 129, 0.35);
+      background: rgba(16, 185, 129, 0.08);
+      box-shadow: 0 0 vw(12) rgba(16, 185, 129, 0.15);
+    }
+  }
+
+  .energy-text {
+    font-size: vw(13);
+    font-weight: 600;
+    line-height: 1.3;
+
+    span {
+      font-size: vw(11);
+      color: #94a3b8;
+    }
+
+    .help {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: vw(12);
+      height: vw(12);
+      margin-left: vw(2);
+      border-radius: 50%;
+      background: #64748b;
+      font-size: vw(9);
+      color: #fff;
+    }
+  }
+
+  .energy-values {
     flex: 1;
-    min-width: 120px;
+    display: flex;
+    justify-content: space-around;
   }
-}
 
-/* 右侧新模块样式 */
-.alarm-pending-module {
-  flex: 1;
-}
+  .ev-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: vh(2);
+    font-size: vw(11);
+    color: #94a3b8;
 
-.alarm-pending-chart {
-  flex: 1;
-  min-height: 180px;
-}
+    b {
+      font-size: vw(16);
+      font-weight: 700;
+    }
+  }
 
-.alert-distribution-module {
-  flex: 1.2;
-}
+  .c-blue {
+    color: #00d4ff;
+  }
 
-.alert-tabs {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 15px;
-}
+  .c-cyan {
+    color: #06b6d4;
+  }
 
-.alert-tab {
-  padding: 6px 16px;
-  background: rgba(30, 58, 138, 0.3);
-  border: 1px solid rgba(59, 130, 246, 0.3);
-  border-radius: 4px;
-  color: #94a3b8;
-  font-size: 13px;
-  font-weight: bold;
-  cursor: pointer;
-  transition: all 0.3s;
-}
+  .chart-box {
+    position: relative;
+    flex: 1;
+    min-height: vh(100);
 
-.alert-tab.active {
-  background: rgba(59, 130, 246, 0.3);
-  border-color: #3b82f6;
-  color: #00d4ff;
-}
+    &::after {
+      content: '';
+      position: absolute;
+      left: vw(8);
+      right: vw(8);
+      bottom: vh(2);
+      height: 1px;
+      pointer-events: none;
+      background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.22), transparent);
+    }
 
-.alert-distribution-content {
-  display: flex;
-  gap: 20px;
-  flex: 1;
-}
+    &--ring {
+      min-height: vh(120);
+    }
 
-.alert-ring-chart {
-  flex: 1;
-  min-height: 200px;
-}
+    &--sm {
+      min-height: vh(130);
+    }
+  }
 
-.alert-list {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
+  .category-body,
+  .distribution-body {
+    flex-direction: row;
+    gap: vw(8);
+  }
 
-.alert-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 15px;
-  font-weight: bold;
-}
+  .legend-list {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: vh(8);
+    overflow: hidden;
 
-.alert-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 2px;
-}
+    &--compact {
+      gap: vh(12);
+    }
+  }
 
-.alert-name {
-  color: #e2e8f0;
-  flex: 1;
-  font-weight: bold;
-}
+  .legend-row {
+    display: flex;
+    align-items: center;
+    gap: vw(6);
+    font-size: vw(12);
+    white-space: nowrap;
+    padding: vh(3) vw(6);
+    border: 1px solid transparent;
+    border-radius: vw(6);
+    transition: background 0.2s, border-color 0.2s, transform 0.2s;
 
-.alert-count {
-  color: #e2e8f0;
-  font-weight: bold;
-  font-size: 16px;
-  margin-right: 5px;
-}
+    &:hover {
+      transform: translateX(vw(2));
+      background: rgba(34, 211, 238, 0.08);
+      border-color: rgba(34, 211, 238, 0.16);
+    }
 
-.alert-percent {
-  color: #10b981;
-  font-weight: bold;
-}
+    .dot {
+      width: vw(8);
+      height: vw(8);
+      border-radius: vw(2);
+      flex-shrink: 0;
+      box-shadow: 0 0 vw(8) currentColor;
+    }
 
-.alert-trend-module {
-  flex: 1.2;
-}
+    .name {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: #cbd5e1;
+    }
 
-.alert-trend-chart {
-  flex: 1;
-  min-height: 180px;
-}
+    .val,
+    .pct {
+      font-weight: 700;
+      color: #e2e8f0;
+    }
+  }
 
-.work-order-module {
-  flex: 0.8;
-}
+  .stat-cards {
+    flex: 0 0 vh(78);
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: vw(8);
+  }
 
-.work-order-content {
-  display: flex;
-  gap: 15px;
-  flex: 1;
-}
+  .stat-card {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: vw(8);
+    padding: vh(10) vw(10);
+    overflow: hidden;
+    background:
+      radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--accent, #3b82f6) 16%, transparent), transparent 36%),
+      linear-gradient(135deg, rgba(8, 27, 61, 0.92) 0%, rgba(3, 14, 36, 0.88) 100%);
+    border: 1px solid rgba(34, 211, 238, 0.18);
+    border-radius: vw(10);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 vh(6) vw(22) rgba(0, 0, 0, 0.22);
+    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
 
-.work-order-item {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-  padding: 15px;
-  background: rgba(30, 58, 138, 0.2);
-  border-radius: 8px;
-  border: 1px solid rgba(59, 130, 246, 0.3);
-}
+    &:hover {
+      transform: translateY(vh(-2));
+      border-color: color-mix(in srgb, var(--accent, #38bdf8) 58%, rgba(255, 255, 255, 0.2));
+      box-shadow: 0 vh(10) vw(28) color-mix(in srgb, var(--accent, #38bdf8) 22%, transparent);
+    }
 
-.order-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+    &--blue { --accent: #3b82f6; }
+    &--red { --accent: #ef4444; }
+    &--orange { --accent: #f59e0b; }
+    &--cyan { --accent: #06b6d4; }
+    &--green { --accent: #10b981; }
+    &--gray { --accent: #94a3b8; }
 
-.order-info {
-  text-align: center;
-}
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: linear-gradient(90deg, transparent, var(--accent, #3b82f6), transparent);
+      opacity: 0.8;
+    }
 
-.order-label {
-  font-size: 14px;
-  color: #e2e8f0;
-  margin-bottom: 5px;
-}
+    &::after {
+      content: '';
+      position: absolute;
+      right: vw(-18);
+      bottom: vh(-24);
+      width: vw(74);
+      height: vw(74);
+      border: 1px solid color-mix(in srgb, var(--accent, #38bdf8) 26%, transparent);
+      border-radius: 50%;
+      opacity: 0.8;
+    }
+  }
 
-.order-count {
-  font-size: 24px;
-  font-weight: bold;
-}
+  .stat-card-shine {
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 60%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+    animation: cardShine 6s ease-in-out infinite;
+    pointer-events: none;
+  }
 
-.order-count.white {
-  color: #e2e8f0;
-}
+  .stat-icon {
+    position: relative;
+    z-index: 1;
+    width: vw(38);
+    height: vw(38);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: vw(8);
+    font-size: vw(18);
+    background: rgba(0, 100, 200, 0.2);
+    color: #3b82f6;
+    border: 1px solid rgba(59, 130, 246, 0.25);
+    box-shadow: inset 0 0 vw(12) rgba(59, 130, 246, 0.15), 0 0 vw(16) rgba(59, 130, 246, 0.12);
 
-.order-count.cyan {
-  color: #06b6d4;
-}
+    &.ic-red {
+      color: #ef4444;
+      background: rgba(239, 68, 68, 0.15);
+    }
+    &.ic-orange {
+      color: #f59e0b;
+      background: rgba(245, 158, 11, 0.15);
+    }
+    &.ic-green {
+      color: #10b981;
+      background: rgba(16, 185, 129, 0.15);
+    }
+    &.ic-cyan {
+      color: #06b6d4;
+      background: rgba(6, 182, 212, 0.15);
+    }
+    &.ic-gray {
+      color: #94a3b8;
+      background: rgba(148, 163, 184, 0.15);
+    }
+  }
 
-.order-count.green {
-  color: #10b981;
-}
+  .stat-num {
+    position: relative;
+    z-index: 1;
+    font-size: vw(22);
+    font-weight: 800;
+    line-height: 1.1;
+    font-variant-numeric: tabular-nums;
 
-/* 报警列表模块 */
-.alarm-list-card {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 15px;
-}
+    &.n-blue {
+      color: #3b82f6;
+    }
+    &.n-red {
+      color: #ef4444;
+    }
+    &.n-orange {
+      color: #f59e0b;
+    }
+    &.n-green {
+      color: #10b981;
+    }
+    &.n-cyan {
+      color: #06b6d4;
+    }
+    &.n-gray {
+      color: #94a3b8;
+    }
+  }
 
-.alarm-list-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 15px;
-}
+  .stat-info {
+    position: relative;
+    z-index: 1;
+  }
 
-.alarm-list-title {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 20px;
-  font-weight: bold;
-  color: #e2e8f0;
-}
+  .stat-label {
+    font-size: vw(11);
+    color: #94a3b8;
+    margin-top: vh(2);
+  }
 
-.title-decoration {
-  width: 6px;
-  height: 24px;
-  background: linear-gradient(180deg, #00d4ff 0%, #3b82f6 100%);
-  border-radius: 2px;
-}
+  .map-panel {
+    flex: 1;
+    min-height: 0;
 
-.alarm-list-controls {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
+    .panel-body {
+      padding: vh(6) vw(8) vh(8);
+    }
+  }
 
-.control-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  color: #e2e8f0;
-  cursor: pointer;
-}
+  .map-body {
+    position: relative;
+    padding: vh(8) vw(8) vw(8);
+  }
 
-.control-item input[type="checkbox"] {
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-}
+  .map-frame {
+    position: relative;
+    flex: 1;
+    min-height: vh(300);
+    height: 100%;
+    border: 1px solid rgba(34, 211, 238, 0.26);
+    border-radius: vw(10);
+    overflow: hidden;
+    background: radial-gradient(circle at 50% 48%, rgba(34, 211, 238, 0.08), transparent 45%);
+    box-shadow: inset 0 0 vw(54) rgba(14, 165, 233, 0.18), 0 0 vw(30) rgba(14, 165, 233, 0.08);
 
-.expand-btn {
-  font-size: 14px;
-  color: #00d4ff;
-  cursor: pointer;
-  font-weight: bold;
-}
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      z-index: 5;
+      border: 1px solid rgba(0, 200, 255, 0.08);
+      border-radius: inherit;
+    }
 
-.expand-btn:hover {
-  color: #3b82f6;
-}
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 12%;
+      z-index: 6;
+      pointer-events: none;
+      border: 1px solid rgba(34, 211, 238, 0.1);
+      border-radius: 50%;
+      box-shadow: 0 0 0 vw(42) rgba(34, 211, 238, 0.025), 0 0 0 vw(88) rgba(59, 130, 246, 0.018);
+      animation: mapRadar 4.5s ease-out infinite;
+    }
+  }
 
-.alarm-table-container {
-  flex: 1;
-  overflow: auto;
-}
+  .map-hud {
+    position: absolute;
+    left: 50%;
+    z-index: 8;
+    width: 58%;
+    height: vh(18);
+    pointer-events: none;
+    transform: translateX(-50%);
+    border-color: rgba(34, 211, 238, 0.2);
+    border-style: solid;
+    opacity: 0.9;
 
-.alarm-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 14px;
-}
+    &--top {
+      top: vh(12);
+      border-width: 1px 1px 0;
+      border-radius: vw(10) vw(10) 0 0;
+      background: linear-gradient(180deg, rgba(34, 211, 238, 0.07), transparent);
+    }
 
-.alarm-table thead {
-  background: rgba(30, 58, 138, 0.5);
-}
+    &--bottom {
+      bottom: vh(12);
+      border-width: 0 1px 1px;
+      border-radius: 0 0 vw(10) vw(10);
+      background: linear-gradient(0deg, rgba(34, 211, 238, 0.06), transparent);
+    }
+  }
 
-.alarm-table th {
-  padding: 12px 10px;
-  text-align: left;
-  font-weight: bold;
-  color: #e2e8f0;
-  border-bottom: 2px solid #1e3a8a;
-  font-size: 15px;
-}
+  .map-toolbar {
+    position: absolute;
+    left: vw(12);
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    gap: vh(6);
+  }
 
-.alarm-table tbody tr {
-  border-bottom: 1px solid rgba(30, 58, 138, 0.3);
-  transition: background-color 0.3s;
-}
+  .map-tool-btn {
+    width: vw(30);
+    height: vw(30);
+    padding: vw(2);
+    background: rgba(4, 18, 42, 0.85);
+    border: 1px solid rgba(34, 211, 238, 0.34);
+    border-radius: vw(8);
+    cursor: pointer;
+    backdrop-filter: blur(8px);
+    transition: all 0.2s;
 
-.alarm-table tbody tr:hover {
-  background: rgba(30, 58, 138, 0.2);
-}
+    &:hover {
+      border-color: rgba(34, 211, 238, 0.68);
+      box-shadow: 0 0 vw(14) rgba(34, 211, 238, 0.34);
 
-.alarm-table td {
-  padding: 12px 10px;
-  color: #e2e8f0;
-  font-size: 14px;
-}
+      .map-tool-inner {
+        background: rgba(0, 200, 255, 0.5);
+      }
+    }
+  }
 
-.status-tag {
-  display: inline-block;
-  padding: 4px 12px;
-  border-radius: 4px;
-  font-weight: bold;
-  font-size: 13px;
-}
+  .map-tool-inner {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: vw(2);
+    background: rgba(0, 150, 255, 0.25);
+    transition: background 0.2s;
+  }
 
-.status-tag.pending {
-  background: rgba(239, 68, 68, 0.2);
-  border: 1px solid #ef4444;
-  color: #ef4444;
-}
+  .map-view {
+    width: 100%;
+    height: 100%;
+    min-height: vh(280);
+  }
 
-/* 自定义滚动条 */
-.alarm-table-container::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
+  .glass-card {
+    backdrop-filter: blur(16px) saturate(1.2);
+  }
 
-.alarm-table-container::-webkit-scrollbar-track {
-  background: rgba(30, 58, 138, 0.2);
-}
+  .map-control {
+    position: absolute;
+    top: vh(12);
+    left: vw(52);
+    z-index: 10;
+    padding: vh(12) vw(14);
+    background:
+      linear-gradient(145deg, rgba(8, 28, 64, 0.84) 0%, rgba(3, 12, 32, 0.82) 100%);
+    border: 1px solid rgba(34, 211, 238, 0.42);
+    border-radius: vw(12);
+    min-width: vw(120);
+    box-shadow: 0 vw(10) vw(34) rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(125, 211, 252, 0.14), 0 0 vw(20) rgba(34, 211, 238, 0.12);
+  }
 
-.alarm-table-container::-webkit-scrollbar-thumb {
-  background: #3b82f6;
-  border-radius: 3px;
-}
+  .control-label {
+    font-size: vw(11);
+    color: #64748b;
+    margin-bottom: vh(4);
+    letter-spacing: vw(1);
+    text-transform: uppercase;
+  }
+
+  .control-num {
+    font-size: vw(28);
+    font-weight: 800;
+    background: linear-gradient(180deg, #dffaff 0%, #67e8f9 48%, #3b82f6 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .control-block--status {
+    margin-top: vh(10);
+    padding-top: vh(10);
+    border-top: 1px solid rgba(0, 130, 255, 0.2);
+  }
+
+  .status-row {
+    display: flex;
+    align-items: center;
+    gap: vw(6);
+    font-size: vw(12);
+    margin-top: vh(5);
+
+    b {
+      margin-left: auto;
+      font-weight: 700;
+      color: #e2e8f0;
+      font-variant-numeric: tabular-nums;
+    }
+  }
+
+  .sd {
+    width: vw(8);
+    height: vw(8);
+    border-radius: 50%;
+    box-shadow: 0 0 vw(6) currentColor;
+
+    &.online {
+      background: #10b981;
+      box-shadow: 0 0 vw(8) rgba(16, 185, 129, 0.7);
+    }
+    &.alarm {
+      background: #ef4444;
+      box-shadow: 0 0 vw(8) rgba(239, 68, 68, 0.7);
+    }
+    &.offline {
+      background: #64748b;
+    }
+  }
+
+  .alarm-panel {
+    flex: 0 0 vh(210);
+  }
+
+  .alarm-head {
+    flex-wrap: wrap;
+    gap: vh(6);
+  }
+
+  .alarm-filters {
+    display: flex;
+    align-items: center;
+    gap: vw(14);
+    font-size: vw(12);
+    color: #cbd5e1;
+
+    label {
+      display: inline-flex;
+      align-items: center;
+      gap: vw(4);
+      cursor: pointer;
+    }
+
+    input {
+      width: vw(14);
+      height: vw(14);
+      accent-color: #22d3ee;
+      filter: drop-shadow(0 0 vw(4) rgba(34, 211, 238, 0.35));
+    }
+  }
+
+  .alarm-body {
+    padding: 0;
+    overflow: auto;
+  }
+
+  .alarm-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: vw(12);
+
+    thead {
+      background:
+        linear-gradient(90deg, rgba(34, 211, 238, 0.16), rgba(59, 130, 246, 0.09), rgba(34, 211, 238, 0.04)),
+        linear-gradient(180deg, rgba(0, 90, 180, 0.45) 0%, rgba(0, 60, 120, 0.3) 100%);
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+
+    th,
+    td {
+      padding: vh(9) vw(10);
+      text-align: left;
+      white-space: nowrap;
+      border-bottom: 1px solid rgba(34, 211, 238, 0.06);
+    }
+
+    th {
+      color: #a5f3fc;
+      font-weight: 600;
+      font-size: vw(11);
+      letter-spacing: vw(0.5);
+      border-bottom: 1px solid rgba(34, 211, 238, 0.26);
+      text-shadow: 0 0 vw(10) rgba(34, 211, 238, 0.28);
+    }
+
+    tbody tr {
+      position: relative;
+      transition: background 0.2s, box-shadow 0.2s, color 0.2s;
+
+      &:nth-child(even) {
+        background: rgba(34, 211, 238, 0.035);
+      }
+
+      &:hover {
+        color: #f8fafc;
+        background: linear-gradient(90deg, rgba(34, 211, 238, 0.18), rgba(59, 130, 246, 0.08));
+        box-shadow: inset vw(3) 0 0 rgba(34, 211, 238, 0.78), 0 0 vw(18) rgba(34, 211, 238, 0.06);
+      }
+    }
+  }
+
+  .tag-pending {
+    display: inline-block;
+    padding: vh(3) vw(10);
+    border-radius: vw(20);
+    font-size: vw(10);
+    font-weight: 600;
+    letter-spacing: vw(0.5);
+    color: #fca5a5;
+    background: linear-gradient(90deg, rgba(239, 68, 68, 0.2), rgba(245, 158, 11, 0.1));
+    border: 1px solid rgba(239, 68, 68, 0.45);
+    box-shadow: 0 0 vw(10) rgba(239, 68, 68, 0.2);
+  }
+
+  .alert-tab {
+    padding: vh(5) vw(14);
+    font-size: vw(11);
+    color: #8fb4d9;
+    background: rgba(0, 60, 120, 0.25);
+    border: 1px solid rgba(34, 211, 238, 0.14);
+    border-radius: vw(16);
+    cursor: pointer;
+    transition: all 0.25s;
+
+    &.active {
+      color: #fff;
+      border-color: rgba(34, 211, 238, 0.58);
+      background: linear-gradient(180deg, rgba(34, 211, 238, 0.28) 0%, rgba(37, 99, 235, 0.22) 100%);
+      box-shadow: 0 0 vw(16) rgba(34, 211, 238, 0.26), inset 0 0 vw(10) rgba(34, 211, 238, 0.08);
+    }
+
+    &:hover:not(.active) {
+      color: #94a3b8;
+      border-color: rgba(34, 211, 238, 0.26);
+    }
+  }
+
+  .work-body {
+    flex-direction: row;
+    gap: vw(8);
+  }
+
+  .work-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: vh(6);
+    padding: vh(12) vw(6);
+    background:
+      radial-gradient(circle at 50% 0, rgba(34, 211, 238, 0.14), transparent 48%),
+      linear-gradient(180deg, rgba(0, 80, 160, 0.16) 0%, rgba(0, 40, 80, 0.08) 100%);
+    border: 1px solid rgba(34, 211, 238, 0.16);
+    border-radius: vw(10);
+    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
+
+    &:hover {
+      transform: translateY(vh(-3));
+      border-color: rgba(34, 211, 238, 0.38);
+      box-shadow: 0 vh(7) vw(22) rgba(14, 165, 233, 0.18);
+    }
+  }
+
+  .work-icon {
+    font-size: vw(30);
+    color: #3b82f6;
+    filter: drop-shadow(0 0 vw(8) rgba(59, 130, 246, 0.5));
+  }
+
+  .work-label {
+    font-size: vw(12);
+    color: #94a3b8;
+  }
+
+  .work-num {
+    font-size: vw(24);
+    font-weight: 800;
+    font-variant-numeric: tabular-nums;
+    text-shadow: 0 0 vw(20) currentColor;
+
+    &.c-white {
+      color: #e2e8f0;
+    }
+    &.c-cyan {
+      color: #06b6d4;
+    }
+    &.c-green {
+      color: #10b981;
+    }
+  }
+
+  .alert-tabs {
+    display: flex;
+    gap: vw(6);
+    margin-bottom: vh(6);
+  }
+
+  @keyframes gridFloat {
+    0% {
+      background-position: 0 0, 0 0, 0 0, 0 0;
+    }
+    100% {
+      background-position: vw(48) vh(48), vw(48) vh(48), vw(12) vh(12), vw(12) vh(12);
+    }
+  }
+
+  @keyframes scanMove {
+    0%,
+    100% {
+      background-position: 0 vh(-120), 0 0;
+    }
+    50% {
+      background-position: 0 vh(160), 0 0;
+    }
+  }
+
+  @keyframes orbitSpin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes mapRadar {
+    0% {
+      opacity: 0.75;
+      transform: scale(0.88);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(1.12);
+    }
+  }
+
+  @keyframes livePulse {
+    0%,
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.6;
+      transform: scale(0.85);
+    }
+  }
+
+  @keyframes titleShimmer {
+    0%,
+    100% {
+      filter: brightness(1);
+    }
+    50% {
+      filter: brightness(1.15);
+    }
+  }
+
+  @keyframes badgePulse {
+    0%,
+    100% {
+      box-shadow: 0 0 0 rgba(16, 185, 129, 0);
+    }
+    50% {
+      box-shadow: 0 0 vw(12) rgba(16, 185, 129, 0.35);
+    }
+  }
+
+  @keyframes cardShine {
+    0% {
+      left: -100%;
+    }
+    40%,
+    100% {
+      left: 150%;
+    }
+  }
+</style>
+
+<style lang="scss">
+  @keyframes markerPulse {
+    0% {
+      transform: scale(0.8);
+      opacity: 0.6;
+    }
+    100% {
+      transform: scale(2);
+      opacity: 0;
+    }
+  }
 </style>
diff --git a/src/view/largeScreen2/index.vue b/src/view/largeScreen2/index.vue
index d480578..60668b7 100644
--- a/src/view/largeScreen2/index.vue
+++ b/src/view/largeScreen2/index.vue
@@ -39,8 +39,8 @@
               :header-cell-style="{ background: 'transparent', color: '#fff', border: 'none' }"
               :cell-style="{ color: '#fff', border: 'none' }"
             >
-              <el-table-column prop="cbTypeName" label="设备名称" align="center" width="100" />
-              <el-table-column prop="type" label="设备状态" align="center" width="70">
+              <el-table-column prop="cbTypeName" label="设备名称" align="center" min-width="42%" />
+              <el-table-column prop="type" label="设备状态" align="center" min-width="22%">
                 <template #default="{ row }">
                   <span :style="{ color: row.type === 'device_online' ? 'green' : 'red' }">{{
                     row.type === 'device_online' ? '上线' : '下线'
@@ -131,7 +131,7 @@
                   <div class="scroll-container">
                     <div class="scroll-text">
                       <span>{{ row.gatewayAddress }}</span
-                      ><span style="margin-left: 0.1rem">{{ row.gatewayAddress }}</span>
+                      ><span class="scroll-gap">{{ row.gatewayAddress }}</span>
                     </div>
                   </div>
                 </template>
@@ -260,21 +260,6 @@
   const projectBarOption = computed(() => getProjectBarOption(projectData.value))
   const alertTrendOption = computed(() => getAlertTrendOption())
 
-  const setRem = () => {
-    const designWidth = 1920
-    const designHeight = 1080
-    const baseFontSize = 100
-    const clientWidth = document.documentElement.clientWidth || document.body.clientWidth
-    const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
-
-    const scaleWidth = clientWidth / designWidth
-    const scaleHeight = clientHeight / designHeight
-    const scale = Math.min(scaleWidth, scaleHeight)
-
-    const fontSize = scale * baseFontSize
-    document.documentElement.style.fontSize = fontSize + 'px'
-  }
-
   const calculateTableHeight = () => {
     nextTick(() => {
       console.log('bottomRef.value', bottomRef.value.offsetHeight)
@@ -285,9 +270,6 @@
   }
 
   onMounted(() => {
-    setRem()
-    window.addEventListener('resize', setRem)
-
     // if (bottomRef.value) {
     //   resizeObserver = new ResizeObserver((entries) => {
     //     for (const entry of entries) {
@@ -473,43 +455,52 @@
   }
 
   onBeforeUnmount(() => {
-    window.removeEventListener('resize', setRem)
     if (resizeObserver) {
       resizeObserver.disconnect()
     }
-    document.documentElement.style.fontSize = ''
   })
 </script>
 <style lang="scss">
+  $design-w: 1920;
+  $design-h: 1080;
+
+  @function px2vw($px) {
+    @return calc(#{$px} / #{$design-w} * 100vw);
+  }
+
+  @function px2vh($px) {
+    @return calc(#{$px} / #{$design-h} * 100vh);
+  }
+
   .background-box {
     max-width: 100vw;
     height: 100vh;
     background: url('@/assets/img/largeScreen2/background.png') #000 no-repeat center center / 100% 100%;
   }
   .container {
-    position: relative;
-    display: flex;
-    max-width: 100vw;
-    height: 100vh;
-    // background: url('@/assets/img/largeScreen2/center-4.png') no-repeat center 1.5rem / 11.6rem 5.6rem;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 9999;
+    display: flex;
+    max-width: 100vw;
+    width: 100vw;
+    height: 100vh;
 
     .left {
       display: flex;
       flex-direction: column;
-      padding: 0.9rem 0;
-      width: 5.63rem;
+      flex: 0 0 px2vw(430);
+      width: px2vw(430);
+      padding: px2vh(40) 0;
       height: 100%;
       background: url('@/assets/img/largeScreen2/background-left.png') no-repeat;
       background-size: 100% 100%;
-      gap: 0.12rem;
+      gap: px2vh(12);
 
       .module-card {
         border-radius: 8px;
-        padding: 0.2rem 0.2rem 0.2rem 0.4rem;
+        padding: px2vh(20) px2vw(20) px2vh(20) px2vw(30);
         display: flex;
         flex-direction: column;
         flex: 1;
@@ -519,21 +510,21 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-bottom: 0.08rem;
+        // margin-bottom: px2vh(8);
       }
 
       .module-title {
         display: flex;
         align-items: center;
-        gap: 0.1rem;
-        font-size: 0.2rem;
+        gap: px2vw(10);
+        font-size: px2vw(20);
         font-weight: bold;
         color: #e2e8f0;
       }
 
       .title-icon {
-        width: 0.06rem;
-        height: 0.24rem;
+        width: px2vw(6);
+        height: px2vh(24);
         background: linear-gradient(180deg, #00d4ff 0%, #3b82f6 100%);
         border-radius: 2px;
       }
@@ -544,13 +535,12 @@
 
       .device-stat-content {
         display: flex;
-        // gap: 0.2rem;
         flex: 1;
       }
 
       .device-ring-chart {
         flex: 1;
-        min-height: 1.5rem;
+        min-height: px2vh(150);
         height: 100%;
         width: 100%;
       }
@@ -559,21 +549,20 @@
         flex: 0.8;
         display: flex;
         flex-direction: column;
-        // gap: 0.12rem;
       }
 
       .device-item {
         display: flex;
         align-items: center;
-        gap: 0.12rem;
-        font-size: 0.18rem;
+        gap: px2vw(12);
+        font-size: px2vw(18);
         font-weight: bold;
         white-space: nowrap;
       }
 
       .device-dot {
-        width: 0.1rem;
-        height: 0.1rem;
+        width: px2vw(10);
+        height: px2vw(10);
         border-radius: 2px;
       }
 
@@ -589,8 +578,8 @@
       .device-count {
         color: #e2e8f0;
         font-weight: bold;
-        font-size: 0.14rem;
-        margin-right: 0.06rem;
+        font-size: px2vw(14);
+        margin-right: px2vw(6);
         white-space: nowrap;
       }
 
@@ -609,14 +598,7 @@
         overflow: hidden;
 
         .el-table {
-          // --el-table-bg-color: transparent !important;
-          // --el-table-stripe-bg-color: rgba(100, 100, 100, 0.1) !important;
-          // --el-table-header-bg-color: transparent !important;
-          // --el-table-row-hover-bg-color: rgba(100, 100, 100, 0.15) !important;
           --el-table-border-color: transparent !important;
-          // --el-table-header-text-color: #fff !important;
-          // --el-table-text-color: #fff !important;
-          // --el-table-tr-bg-color: transparent !important;
 
           background-color: transparent !important;
           background: transparent !important;
@@ -636,15 +618,15 @@
           }
 
           .cell {
-            font-size: 0.14rem !important;
+            font-size: px2vw(14) !important;
             color: #e2e8f0 !important;
           }
         }
       }
 
       .status-dot {
-        width: 0.16rem;
-        height: 0.16rem;
+        width: px2vw(16);
+        height: px2vw(16);
         border-radius: 50%;
         display: inline-block;
 
@@ -667,93 +649,94 @@
 
       .project-bar-chart {
         flex: 1;
-        min-height: 1.5rem;
+        min-height: px2vh(150);
         height: 100%;
         width: 100%;
       }
     }
     .center {
       flex: 1;
+      min-width: 0;
       display: flex;
       flex-direction: column;
-      padding-bottom: 0.3rem;
-      // padding-top: 1rem;
+      padding-bottom: px2vh(10);
       .title {
-        height: 1rem;
-        line-height: 1rem;
+        height: px2vh(70);
+        line-height: px2vh(70);
         text-align: center;
         color: #fff;
-        font-size: 0.4rem;
+        font-size: px2vw(30);
         font-weight: bold;
       }
       .top {
         flex: 1;
-        padding-top: 0.69rem;
+        padding-top: px2vh(69);
         text-align: center;
         position: relative;
         .image {
           margin: 0 auto;
           &.first {
-            width: 5.85rem;
-            height: 1.55rem;
+            width: px2vw(585);
+            height: px2vh(155);
           }
           &.second {
             position: relative;
-            top: -0.2rem;
-            width: 5.64rem;
-            height: 1.14rem;
+            top: px2vh(-20);
+            width: px2vw(564);
+            height: px2vh(114);
           }
           &.third {
             position: relative;
-            top: -0.5rem;
-            width: 2.5rem;
-            height: 2.5rem;
+            top: px2vh(-50);
+            width: px2vw(250);
+            height: px2vh(250);
           }
           &.fifth {
             position: relative;
-            top: -0.8rem;
-            width: 5.98rem;
-            height: 1.21rem;
+            top: px2vh(-80);
+            width: px2vw(598);
+            height: px2vh(121);
           }
         }
         > div {
           position: absolute;
           > p {
-            font-size: 0.16rem;
+            font-size: px2vw(16);
             font-weight: bold;
             color: #fff;
           }
           > img {
-            width: 1.32rem;
-            height: 0.85rem;
+            width: px2vw(132);
+            height: px2vh(85);
           }
           &.first {
-            top: 5.22rem;
+            top: px2vh(522);
             left: 50%;
-            transform: translateX(-3.9rem);
+            transform: translateX(px2vw(-390));
           }
           &.second {
-            top: 5.54rem;
+            top: px2vh(554);
             left: 50%;
-            transform: translateX(-1.9rem);
+            transform: translateX(px2vw(-190));
           }
           &.third {
-            top: 5.54rem;
+            top: px2vh(554);
             left: 50%;
-            transform: translateX(0.73rem);
+            transform: translateX(px2vw(73));
           }
           &.fourth {
-            top: 5.22rem;
+            top: px2vh(522);
             left: 50%;
-            transform: translateX(2.65rem);
+            transform: translateX(px2vw(265));
           }
         }
       }
       .bottom {
-        height: 3.57rem;
+        flex: 0 0 px2vh(280);
+        height: px2vh(280);
         background: url('@/assets/img/largeScreen2/center-10.png') no-repeat;
         background-size: 100% 100%;
-        padding: 0.5rem 0.3rem 0.3rem;
+        padding: px2vh(36) px2vw(30) px2vh(24);
         box-sizing: border-box;
 
         .scroll-container {
@@ -768,6 +751,10 @@
           animation: scroll 10s linear infinite;
         }
 
+        .scroll-gap {
+          margin-left: px2vw(10);
+        }
+
         @keyframes scroll {
           0% {
             transform: translateX(0);
@@ -778,14 +765,7 @@
         }
 
         .el-table {
-          // --el-table-bg-color: transparent !important;
-          // --el-table-stripe-bg-color: rgba(100, 100, 100, 0.1) !important;
-          // --el-table-header-bg-color: transparent !important;
-          // --el-table-row-hover-bg-color: rgba(100, 100, 100, 0.15) !important;
           --el-table-border-color: transparent !important;
-          // --el-table-header-text-color: #fff !important;
-          // --el-table-text-color: #fff !important;
-          // --el-table-tr-bg-color: transparent !important;
 
           background-color: transparent !important;
           background: transparent !important;
@@ -805,27 +785,26 @@
           }
 
           .cell {
-            font-size: 0.14rem !important;
+            font-size: px2vw(14) !important;
             color: #e2e8f0 !important;
           }
         }
       }
     }
     .right {
-      width: 5.63rem;
+      flex: 0 0 px2vw(430);
+      width: px2vw(430);
       height: 100%;
       background: url('@/assets/img/largeScreen2/background-right.png') no-repeat;
       background-size: 100% 100%;
-      padding: 0.9rem 0;
+      padding: px2vh(90) 0;
       display: flex;
       flex-direction: column;
-      gap: 0.12rem;
+      gap: px2vh(12);
 
       .module-card {
-        // background: linear-gradient(135deg, rgba(30, 58, 138, 0.3) 0%, rgba(15, 23, 42, 0.8) 100%);
-        // border: 1px solid rgba(59, 130, 246, 0.3);
         border-radius: 8px;
-        padding: 0.2rem 0.2rem 0.2rem 0.4rem;
+        padding: px2vh(20) px2vw(20) px2vh(20) px2vw(40);
         display: flex;
         flex-direction: column;
       }
@@ -834,27 +813,27 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-bottom: 0.08rem;
+        // margin-bottom: px2vh(8);
       }
 
       .module-title {
         display: flex;
         align-items: center;
-        gap: 0.1rem;
-        font-size: 0.2rem;
+        gap: px2vw(10);
+        font-size: px2vw(20);
         font-weight: bold;
         color: #e2e8f0;
       }
 
       .title-icon {
-        width: 0.06rem;
-        height: 0.24rem;
+        width: px2vw(6);
+        height: px2vh(24);
         background: linear-gradient(180deg, #00d4ff 0%, #3b82f6 100%);
         border-radius: 2px;
       }
 
       .module-more {
-        font-size: 0.18rem;
+        font-size: px2vw(18);
         font-weight: bold;
         color: #e2e8f0;
         cursor: pointer;
@@ -870,7 +849,7 @@
 
       .alarm-pending-chart {
         flex: 1;
-        min-height: 1.2rem;
+        min-height: px2vh(120);
       }
 
       .alert-distribution-module {
@@ -878,12 +857,12 @@
       }
 
       .alert-tab {
-        padding: 0.06rem 0.15rem;
+        padding: px2vh(6) px2vw(15);
         background: rgba(30, 58, 138, 0.3);
         border: 1px solid rgba(59, 130, 246, 0.3);
         border-radius: 4px;
         color: #94a3b8;
-        font-size: 0.16rem;
+        font-size: px2vw(16);
         font-weight: bold;
         cursor: pointer;
         transition: all 0.3s;
@@ -898,34 +877,34 @@
 
       .alert-distribution-content {
         display: flex;
-        gap: 0.4rem;
+        gap: px2vw(40);
         flex: 1;
       }
 
       .alert-ring-chart {
         flex: 1;
-        min-height: 2rem;
+        min-height: px2vh(200);
       }
 
       .alert-list {
         flex: 1;
         display: flex;
         flex-direction: column;
-        gap: 0.12rem;
+        gap: px2vh(12);
       }
 
       .alert-item {
         display: flex;
         align-items: center;
-        gap: 0.12rem;
-        font-size: 0.18rem;
+        gap: px2vw(12);
+        font-size: px2vw(18);
         font-weight: bold;
         white-space: nowrap;
       }
 
       .alert-dot {
-        width: 0.16rem;
-        height: 0.16rem;
+        width: px2vw(16);
+        height: px2vw(16);
         border-radius: 2px;
       }
 
@@ -941,8 +920,8 @@
       .alert-count {
         color: #e2e8f0;
         font-weight: bold;
-        font-size: 0.2rem;
-        margin-right: 0.06rem;
+        font-size: px2vw(20);
+        margin-right: px2vw(6);
         white-space: nowrap;
       }
 
@@ -958,7 +937,7 @@
 
       .alert-trend-chart {
         flex: 1;
-        min-height: 1.2rem;
+        min-height: px2vh(120);
       }
 
       .work-order-module {
@@ -967,7 +946,7 @@
 
       .work-order-content {
         display: flex;
-        gap: 0.3rem;
+        gap: px2vw(30);
         flex: 1;
       }
 
@@ -976,8 +955,8 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 0.12rem;
-        padding: 0.1rem;
+        gap: px2vh(12);
+        padding: px2vh(10);
         background: rgba(30, 58, 138, 0.2);
         border-radius: 8px;
         border: 1px solid rgba(59, 130, 246, 0.3);
@@ -994,13 +973,13 @@
       }
 
       .order-label {
-        font-size: 0.22rem;
+        font-size: px2vw(22);
         color: #e2e8f0;
-        margin-bottom: 0.08rem;
+        margin-bottom: px2vh(8);
       }
 
       .order-count {
-        font-size: 0.36rem;
+        font-size: px2vw(36);
         font-weight: bold;
       }
 
@@ -1026,19 +1005,16 @@
 
   .card {
     background-color: rgba(15, 23, 42, 0.8);
-    // border: 1px solid #1e3a8a;
-    // border-radius: 8px;
-    // padding: 15px;
     display: flex;
     flex-direction: column;
     position: relative;
   }
 
   .card-title {
-    font-size: 16px;
+    font-size: px2vw(16);
     font-weight: bold;
     color: #94a3b8;
-    margin-bottom: 15px;
+    margin-bottom: px2vh(15);
     text-align: center;
   }
 
@@ -1052,31 +1028,31 @@
 
   .map-control {
     position: absolute;
-    top: 15px;
-    left: 15px;
+    top: px2vh(15);
+    left: px2vw(15);
     background-color: rgba(15, 23, 42, 0.9);
     border: 1px solid #1e3a8a;
     border-radius: 8px;
-    padding: 15px;
+    padding: px2vh(15) px2vw(15);
     z-index: 1000;
-    min-width: 120px;
+    min-width: px2vw(120);
   }
 
   .control-top {
-    margin-bottom: 15px;
-    padding-bottom: 15px;
+    margin-bottom: px2vh(15);
+    padding-bottom: px2vh(15);
     border-bottom: 1px solid #1e3a8a;
   }
 
   .control-title {
-    font-size: 14px;
+    font-size: px2vw(14);
     font-weight: bold;
     color: #64748b;
-    margin-bottom: 5px;
+    margin-bottom: px2vh(5);
   }
 
   .control-value {
-    font-size: 26px;
+    font-size: px2vw(26);
     font-weight: bold;
     color: #3b82f6;
   }
@@ -1084,21 +1060,21 @@
   .status-list {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: px2vh(8);
   }
 
   .status-item {
     display: flex;
     align-items: center;
-    gap: 8px;
-    font-size: 14px;
+    gap: px2vw(8);
+    font-size: px2vw(14);
     font-weight: bold;
     color: #e2e8f0;
   }
 
   .status-dot {
-    width: 10px;
-    height: 10px;
+    width: px2vw(10);
+    height: px2vw(10);
     border-radius: 50%;
   }
 
@@ -1116,6 +1092,7 @@
 
   .top2 {
     flex: 1;
+    min-height: 0;
     display: flex;
     flex-direction: column;
   }
diff --git a/src/view/layout/aside/normalMode.vue b/src/view/layout/aside/normalMode.vue
index 89d73d9..dc952ee 100644
--- a/src/view/layout/aside/normalMode.vue
+++ b/src/view/layout/aside/normalMode.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative h-full bg-white text-slate-700 dark:text-slate-300 dark:bg-slate-900 border-r shadow dark:shadow-gray-700"
+    class="gva-industrial-aside relative h-full bg-white text-slate-700 dark:text-slate-300 dark:bg-slate-900 border-r shadow dark:shadow-gray-700"
     :class="isCollapse ? '' : '  px-2'"
     :style="{
       width: layoutSideWidth + 'px'
@@ -25,7 +25,7 @@
       </el-menu>
     </el-scrollbar>
     <div
-      class="absolute bottom-8 right-2 w-8 h-8 bg-gray-50 dark:bg-slate-800 flex items-center justify-center rounded cursor-pointer"
+      class="gva-industrial-collapse absolute bottom-8 right-2 w-8 h-8 bg-gray-50 dark:bg-slate-800 flex items-center justify-center rounded cursor-pointer"
       :class="isCollapse ? 'right-0 left-0 mx-auto' : 'right-2'"
       @click="toggleCollapse"
     >
diff --git a/src/view/layout/header/index.vue b/src/view/layout/header/index.vue
index f37bc5d..f3dd4be 100644
--- a/src/view/layout/header/index.vue
+++ b/src/view/layout/header/index.vue
@@ -5,7 +5,7 @@
 
 <template>
   <div
-    class="flex justify-between fixed top-0 left-0 right-0 z-10 h-16 bg-white text-slate-700 dark:text-slate-300 dark:bg-slate-900 shadow dark:shadow-gray-700 items-center px-2"
+    class="gva-industrial-header flex justify-between fixed top-0 left-0 right-0 z-10 h-16 bg-white text-slate-700 dark:text-slate-300 dark:bg-slate-900 shadow dark:shadow-gray-700 items-center px-2"
   >
     <div class="flex items-center cursor-pointer flex-1">
       <div
diff --git a/src/view/layout/index.vue b/src/view/layout/index.vue
index 6b0624a..f18200b 100644
--- a/src/view/layout/index.vue
+++ b/src/view/layout/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-gray-50 text-slate-700 dark:text-slate-500 dark:bg-slate-800 w-screen h-screen">
+  <div class="gva-industrial-layout bg-gray-50 text-slate-700 dark:text-slate-500 dark:bg-slate-800 w-screen h-screen">
     <el-watermark
       v-if="config.show_watermark"
       :font="font"
@@ -21,7 +21,7 @@
       <gva-aside v-if="config.side_mode === 'combination' && device !== 'mobile'" mode="normal" />
       <div class="flex-1 w-0 h-full">
         <gva-tabs v-if="config.showTabs" />
-        <div class="overflow-auto px-2" :class="config.showTabs ? 'gva-container2' : 'gva-container pt-1'">
+        <div class="gva-industrial-main overflow-auto px-2" :class="config.showTabs ? 'gva-container2' : 'gva-container pt-1'">
           <router-view v-if="reloadFlag" v-slot="{ Component, route }">
             <div id="gva-base-load-dom" class="gva-body-h bg-gray-50 dark:bg-slate-800">
               <transition mode="out-in" :name="route.meta.transitionType || config.transition_type">
diff --git a/src/view/masterStation/equipment/components/detail/index.vue b/src/view/masterStation/equipment/components/detail/index.vue
index c025fbb..ca4349e 100644
--- a/src/view/masterStation/equipment/components/detail/index.vue
+++ b/src/view/masterStation/equipment/components/detail/index.vue
@@ -47,7 +47,7 @@
   }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
   .device-detail-page {
     // padding: 20px;
     .tabs-box {
diff --git a/src/view/masterStation/equipment/components/list/index.vue b/src/view/masterStation/equipment/components/list/index.vue
index 25c0d1a..8b0f153 100644
--- a/src/view/masterStation/equipment/components/list/index.vue
+++ b/src/view/masterStation/equipment/components/list/index.vue
@@ -234,7 +234,7 @@
   }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
   // 设备卡片容器
   .container-device {
     padding: 24px;
diff --git a/src/view/masterStation/index.vue b/src/view/masterStation/index.vue
index 00ee663..a234e22 100644
--- a/src/view/masterStation/index.vue
+++ b/src/view/masterStation/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="master-station-theme">
     <router-view v-slot="{ Component }">
       <transition mode="out-in" name="el-fade-in-linear">
         <keep-alive :include="routerStore.keepAliveRouters">