From 08156379e5019b00f9656670a230c4908b148fc1 Mon Sep 17 00:00:00 2001
From: xiaozhiyong <xiaozhiyong@sdxkhlw.cn>
Date: Fri, 12 Jun 2026 14:26:20 +0800
Subject: [PATCH] gengxin

---
 src/pathInfo.json               |   1 -
 src/view/largeScreen2/index.vue | 508 +++++++++++++++++---------------
 2 files changed, 274 insertions(+), 235 deletions(-)

diff --git a/src/pathInfo.json b/src/pathInfo.json
index da7147e..afc697c 100644
--- a/src/pathInfo.json
+++ b/src/pathInfo.json
@@ -48,7 +48,6 @@
   "/src/view/layout/setting/modules/layout/index.vue": "LayoutSettings",
   "/src/view/layout/tabs/index.vue": "HistoryComponent",
   "/src/view/login/index.vue": "Login",
-  "/src/view/masterStation/equipment/components/detail/components/alarm/index.vue": "Index",
   "/src/view/masterStation/equipment/components/detail/components/config/index.vue": "Index",
   "/src/view/masterStation/equipment/components/detail/components/info/index.vue": "Index",
   "/src/view/masterStation/equipment/components/detail/components/line/index.vue": "Index",
diff --git a/src/view/largeScreen2/index.vue b/src/view/largeScreen2/index.vue
index 5159d2a..aac9235 100644
--- a/src/view/largeScreen2/index.vue
+++ b/src/view/largeScreen2/index.vue
@@ -145,7 +145,7 @@
                   <div class="scroll-container">
                     <div class="scroll-text">
                       <span>{{ row.gatewayAddress }}</span
-                      ><span style="margin-left: 0.1rem">{{ row.gatewayAddress }}</span>
+                      ><span style="margin-left: 0.5208vw">{{ row.gatewayAddress }}</span>
                     </div>
                   </div>
                 </template>
@@ -290,21 +290,6 @@
     return type === 'device_online' ? 'status-online' : 'status-offline'
   }
 
-  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)
@@ -315,9 +300,6 @@
   }
 
   onMounted(() => {
-    setRem()
-    window.addEventListener('resize', setRem)
-
     // if (bottomRef.value) {
     //   resizeObserver = new ResizeObserver((entries) => {
     //     for (const entry of entries) {
@@ -513,11 +495,9 @@
   }
 
   onBeforeUnmount(() => {
-    window.removeEventListener('resize', setRem)
     if (resizeObserver) {
       resizeObserver.disconnect()
     }
-    document.documentElement.style.fontSize = ''
   })
 </script>
 <style lang="scss">
@@ -540,16 +520,16 @@
     .left {
       display: flex;
       flex-direction: column;
-      padding: 0.9rem 0;
-      width: 5.63rem;
+      padding: 8.3333vh 0;
+      width: 29.3229vw;
       height: 100%;
       background: url('@/assets/img/largeScreen2/background-left.png') no-repeat;
       background-size: 100% 100%;
-      gap: 0.12rem;
+      gap: 1.1111vh;
 
       .module-card {
         border-radius: 8px;
-        padding: 0.2rem 0.2rem 0.2rem 0.4rem;
+        padding: 1.8519vh 1.0417vw 1.8519vh 2.0833vw;
         display: flex;
         flex-direction: column;
         flex: 1;
@@ -559,21 +539,21 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-bottom: 0.08rem;
+        margin-bottom: 0.7407vh;
       }
 
       .module-title {
         display: flex;
         align-items: center;
-        gap: 0.1rem;
-        font-size: 0.2rem;
+        gap: 0.5208vw;
+        font-size: 1.0417vw;
         font-weight: bold;
         color: var(--tech-text);
       }
 
       .title-icon {
-        width: 0.06rem;
-        height: 0.24rem;
+        width: 0.3125vw;
+        height: 2.2222vh;
         background: linear-gradient(180deg, #00d4ff 0%, #3b82f6 100%);
         border-radius: 2px;
       }
@@ -590,7 +570,7 @@
 
       .device-ring-chart {
         flex: 1;
-        min-height: 1.5rem;
+        min-height: 13.8889vh;
         height: 100%;
         width: 100%;
       }
@@ -605,15 +585,15 @@
       .device-item {
         display: flex;
         align-items: center;
-        gap: 0.12rem;
-        font-size: 0.18rem;
+        gap: 0.625vw;
+        font-size: 0.9375vw;
         font-weight: bold;
         white-space: nowrap;
       }
 
       .device-dot {
-        width: 0.1rem;
-        height: 0.1rem;
+        width: 0.5208vw;
+        height: 0.9259vh;
         border-radius: 2px;
       }
 
@@ -629,8 +609,8 @@
       .device-count {
         color: var(--tech-text);
         font-weight: bold;
-        font-size: 0.14rem;
-        margin-right: 0.06rem;
+        font-size: 0.7292vw;
+        margin-right: 0.3125vw;
         white-space: nowrap;
       }
 
@@ -676,7 +656,7 @@
           }
 
           .cell {
-            font-size: 0.14rem !important;
+            font-size: 0.7292vw !important;
             color: var(--tech-text) !important;
           }
         }
@@ -691,8 +671,8 @@
       }
 
       .status-dot {
-        width: 0.16rem;
-        height: 0.16rem;
+        width: 0.8333vw;
+        height: 1.4815vh;
         border-radius: 50%;
         display: inline-block;
 
@@ -715,7 +695,7 @@
 
       .project-bar-chart {
         flex: 1;
-        min-height: 1.5rem;
+        min-height: 13.8889vh;
         height: 100%;
         width: 100%;
       }
@@ -724,84 +704,84 @@
       flex: 1;
       display: flex;
       flex-direction: column;
-      padding-bottom: 0.3rem;
+      padding-bottom: 2.7778vh;
       // padding-top: 1rem;
       .title {
-        height: 1rem;
-        line-height: 1rem;
+        height: 9.2593vh;
+        line-height: 9.2593vh;
         text-align: center;
         color: var(--tech-text-strong);
-        font-size: 0.4rem;
+        font-size: 2.0833vw;
         font-weight: bold;
       }
       .top {
         flex: 1;
-        padding-top: 0.69rem;
+        padding-top: 6.3889vh;
         text-align: center;
         position: relative;
         .image {
           margin: 0 auto;
           &.first {
-            width: 5.85rem;
-            height: 1.55rem;
+            width: 30.4688vw;
+            height: 14.3519vh;
           }
           &.second {
             position: relative;
-            top: -0.2rem;
-            width: 5.64rem;
-            height: 1.14rem;
+            top: -1.8519vh;
+            width: 29.375vw;
+            height: 10.5556vh;
           }
           &.third {
             position: relative;
-            top: -0.5rem;
-            width: 2.5rem;
-            height: 2.5rem;
+            top: -4.6296vh;
+            width: 13.0208vw;
+            height: 23.1481vh;
           }
           &.fifth {
             position: relative;
-            top: -0.8rem;
-            width: 5.98rem;
-            height: 1.21rem;
+            top: -7.4074vh;
+            width: 31.1458vw;
+            height: 11.2037vh;
           }
         }
         > div {
           position: absolute;
           > p {
-            font-size: 0.16rem;
+            font-size: 0.8333vw;
             font-weight: bold;
             color: var(--tech-text-strong);
           }
           > img {
-            width: 1.32rem;
-            height: 0.85rem;
+            width: 6.875vw;
+            height: 7.8704vh;
           }
           &.first {
-            top: 5.22rem;
+            top: 48.3333vh;
             left: 50%;
-            transform: translateX(-3.9rem);
+            transform: translateX(-20.3125vw);
           }
           &.second {
-            top: 5.54rem;
+            top: 51.2963vh;
             left: 50%;
-            transform: translateX(-1.9rem);
+            transform: translateX(-9.8958vw);
           }
           &.third {
-            top: 5.54rem;
+            top: 51.2963vh;
             left: 50%;
-            transform: translateX(0.73rem);
+            transform: translateX(3.8021vw);
           }
           &.fourth {
-            top: 5.22rem;
+            top: 48.3333vh;
             left: 50%;
-            transform: translateX(2.65rem);
+            transform: translateX(13.8021vw);
           }
         }
       }
       .bottom {
-        height: 3.57rem;
+        height: 33.0556vh;
         background: url('@/assets/img/largeScreen2/center-10.png') no-repeat;
         background-size: 100% 100%;
-        padding: 0.5rem 0.3rem 0.3rem;
+        padding: 4.6296vh 1.5625vw 2.7778vh;
         box-sizing: border-box;
 
         .scroll-container {
@@ -853,27 +833,27 @@
           }
 
           .cell {
-            font-size: 0.14rem !important;
+            font-size: 0.7292vw !important;
             color: var(--tech-text) !important;
           }
         }
       }
     }
     .right {
-      width: 5.63rem;
+      width: 29.3229vw;
       height: 100%;
       background: url('@/assets/img/largeScreen2/background-right.png') no-repeat;
       background-size: 100% 100%;
-      padding: 0.9rem 0;
+      padding: 8.3333vh 0;
       display: flex;
       flex-direction: column;
-      gap: 0.12rem;
+      gap: 1.1111vh;
 
       .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: 1.8519vh 1.0417vw 1.8519vh 2.0833vw;
         display: flex;
         flex-direction: column;
       }
@@ -882,27 +862,27 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-bottom: 0.08rem;
+        margin-bottom: 0.7407vh;
       }
 
       .module-title {
         display: flex;
         align-items: center;
-        gap: 0.1rem;
-        font-size: 0.2rem;
+        gap: 0.5208vw;
+        font-size: 1.0417vw;
         font-weight: bold;
         color: var(--tech-text);
       }
 
       .title-icon {
-        width: 0.06rem;
-        height: 0.24rem;
+        width: 0.3125vw;
+        height: 2.2222vh;
         background: linear-gradient(180deg, #00d4ff 0%, #3b82f6 100%);
         border-radius: 2px;
       }
 
       .module-more {
-        font-size: 0.18rem;
+        font-size: 0.9375vw;
         font-weight: bold;
         color: var(--tech-text);
         cursor: pointer;
@@ -918,7 +898,7 @@
 
       .alarm-pending-chart {
         flex: 1;
-        min-height: 1.2rem;
+        min-height: 11.1111vh;
       }
 
       .alert-distribution-module {
@@ -926,12 +906,12 @@
       }
 
       .alert-tab {
-        padding: 0.06rem 0.15rem;
+        padding: 0.5556vh 0.7813vw;
         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: 0.8333vw;
         font-weight: bold;
         cursor: pointer;
         transition: all 0.3s;
@@ -946,34 +926,34 @@
 
       .alert-distribution-content {
         display: flex;
-        gap: 0.4rem;
+        gap: 2.0833vw;
         flex: 1;
       }
 
       .alert-ring-chart {
         flex: 1;
-        min-height: 2rem;
+        min-height: 18.5185vh;
       }
 
       .alert-list {
         flex: 1;
         display: flex;
         flex-direction: column;
-        gap: 0.12rem;
+        gap: 1.1111vh;
       }
 
       .alert-item {
         display: flex;
         align-items: center;
-        gap: 0.12rem;
-        font-size: 0.18rem;
+        gap: 0.625vw;
+        font-size: 0.9375vw;
         font-weight: bold;
         white-space: nowrap;
       }
 
       .alert-dot {
-        width: 0.16rem;
-        height: 0.16rem;
+        width: 0.8333vw;
+        height: 1.4815vh;
         border-radius: 2px;
       }
 
@@ -989,8 +969,8 @@
       .alert-count {
         color: var(--tech-text);
         font-weight: bold;
-        font-size: 0.2rem;
-        margin-right: 0.06rem;
+        font-size: 1.0417vw;
+        margin-right: 0.3125vw;
         white-space: nowrap;
       }
 
@@ -1006,7 +986,7 @@
 
       .alert-trend-chart {
         flex: 1;
-        min-height: 1.2rem;
+        min-height: 11.1111vh;
       }
 
       .work-order-module {
@@ -1015,7 +995,7 @@
 
       .work-order-content {
         display: flex;
-        gap: 0.3rem;
+        gap: 1.5625vw;
         flex: 1;
       }
 
@@ -1024,8 +1004,8 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 0.12rem;
-        padding: 0.1rem;
+        gap: 1.1111vh;
+        padding: 0.9259vh;
         background: rgba(30, 58, 138, 0.2);
         border-radius: 8px;
         border: 1px solid rgba(59, 130, 246, 0.3);
@@ -1042,13 +1022,13 @@
       }
 
       .order-label {
-        font-size: 0.22rem;
+        font-size: 1.1458vw;
         color: var(--tech-text);
-        margin-bottom: 0.08rem;
+        margin-bottom: 0.7407vh;
       }
 
       .order-count {
-        font-size: 0.36rem;
+        font-size: 1.875vw;
         font-weight: bold;
       }
 
@@ -1169,36 +1149,43 @@
 
   .map-title-bar {
     position: absolute;
-    top: 0.2rem;
+    top: 1.8519vh;
     left: 50%;
     z-index: 1000;
     display: flex;
     align-items: center;
     flex-direction: column;
-    gap: 0.04rem;
-    min-width: 2.8rem;
-    padding: 0.1rem 0.32rem 0.12rem;
+    gap: 0.3704vh;
+    min-width: 14.5833vw;
+    padding: 0.9259vh 1.6667vw 1.1111vh;
     color: #e9fbff;
     background:
-      linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.2) 16%, rgba(15, 23, 42, 0.72) 50%, rgba(6, 182, 212, 0.2) 84%, transparent),
+      linear-gradient(
+        90deg,
+        transparent,
+        rgba(6, 182, 212, 0.2) 16%,
+        rgba(15, 23, 42, 0.72) 50%,
+        rgba(6, 182, 212, 0.2) 84%,
+        transparent
+      ),
       linear-gradient(180deg, rgba(15, 23, 42, 0.24), rgba(2, 6, 23, 0.12));
     border-top: 1px solid rgba(0, 212, 255, 0.52);
     border-bottom: 1px solid rgba(245, 158, 11, 0.28);
     transform: translateX(-50%);
     pointer-events: none;
-    text-shadow: 0 0 0.14rem rgba(0, 212, 255, 0.65);
+    text-shadow: 0 0 0.7292vw rgba(0, 212, 255, 0.65);
   }
 
   .map-title-main {
-    font-size: 0.2rem;
+    font-size: 1.0417vw;
     font-weight: 700;
-    letter-spacing: 0.06rem;
+    letter-spacing: 0.3125vw;
   }
 
   .map-title-sub {
-    font-size: 0.1rem;
+    font-size: 0.5208vw;
     color: rgba(137, 221, 255, 0.78);
-    letter-spacing: 0.04rem;
+    letter-spacing: 0.2083vw;
   }
 
   .map-radar-glow {
@@ -1206,14 +1193,16 @@
     left: 50%;
     top: 52%;
     z-index: 1000;
-    width: 5.2rem;
-    height: 5.2rem;
+    width: 27.0833vw;
+    height: 48.1481vh;
     border: 1px solid rgba(0, 212, 255, 0.22);
     border-radius: 50%;
     background:
-      repeating-radial-gradient(circle, transparent 0 0.62rem, rgba(0, 212, 255, 0.08) 0.63rem 0.64rem),
+      repeating-radial-gradient(circle, transparent 0 3.2292vw, rgba(0, 212, 255, 0.08) 3.2813vw 3.3333vw),
       conic-gradient(from 0deg, transparent 0deg, rgba(0, 212, 255, 0.2) 46deg, transparent 88deg, transparent 360deg);
-    box-shadow: inset 0 0 0.42rem rgba(0, 212, 255, 0.08), 0 0 0.36rem rgba(0, 212, 255, 0.08);
+    box-shadow:
+      inset 0 0 2.1875vw rgba(0, 212, 255, 0.08),
+      0 0 1.875vw rgba(0, 212, 255, 0.08);
     transform: translate(-50%, -50%);
     animation: radarRotate 12s linear infinite;
     mix-blend-mode: screen;
@@ -1223,8 +1212,8 @@
   .map-corner {
     position: absolute;
     z-index: 1000;
-    width: 0.42rem;
-    height: 0.42rem;
+    width: 2.1875vw;
+    height: 3.8889vh;
     pointer-events: none;
   }
 
@@ -1233,7 +1222,7 @@
     content: '';
     position: absolute;
     background: rgba(0, 212, 255, 0.9);
-    box-shadow: 0 0 0.12rem rgba(0, 212, 255, 0.85);
+    box-shadow: 0 0 0.625vw rgba(0, 212, 255, 0.85);
   }
 
   .map-corner::before {
@@ -1247,8 +1236,8 @@
   }
 
   .map-corner.top-left {
-    top: 0.14rem;
-    left: 0.14rem;
+    top: 1.2963vh;
+    left: 0.7292vw;
   }
 
   .map-corner.top-left::before,
@@ -1258,8 +1247,8 @@
   }
 
   .map-corner.top-right {
-    top: 0.14rem;
-    right: 0.14rem;
+    top: 1.2963vh;
+    right: 0.7292vw;
   }
 
   .map-corner.top-right::before,
@@ -1269,8 +1258,8 @@
   }
 
   .map-corner.bottom-left {
-    bottom: 0.14rem;
-    left: 0.14rem;
+    bottom: 1.2963vh;
+    left: 0.7292vw;
   }
 
   .map-corner.bottom-left::before,
@@ -1280,8 +1269,8 @@
   }
 
   .map-corner.bottom-right {
-    right: 0.14rem;
-    bottom: 0.14rem;
+    right: 0.7292vw;
+    bottom: 1.2963vh;
   }
 
   .map-corner.bottom-right::before,
@@ -1325,7 +1314,7 @@
       background-image:
         linear-gradient(rgba(0, 212, 255, 0.05) 1px, transparent 1px),
         linear-gradient(90deg, rgba(0, 212, 255, 0.05) 1px, transparent 1px);
-      background-size: 0.42rem 0.42rem;
+      background-size: 2.1875vw 3.8889vh;
       mask-image: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 0.85), transparent 68%);
       animation: gridDrift 16s linear infinite;
       pointer-events: none;
@@ -1344,7 +1333,7 @@
     background:
       linear-gradient(90deg, transparent 0 9%, rgba(0, 212, 255, 0.08) 10%, transparent 11% 100%),
       linear-gradient(0deg, transparent 0 9%, rgba(0, 212, 255, 0.06) 10%, transparent 11% 100%);
-    background-size: 1.2rem 1.2rem;
+    background-size: 6.25vw 11.1111vh;
     opacity: 0.45;
     animation: gridPulse 5s ease-in-out infinite;
   }
@@ -1359,33 +1348,40 @@
 
   .container {
     z-index: 10;
-    background:
-      linear-gradient(90deg, rgba(2, 8, 23, 0.92) 0%, rgba(2, 8, 23, 0.32) 22%, transparent 42%, transparent 58%, rgba(2, 8, 23, 0.32) 78%, rgba(2, 8, 23, 0.92) 100%);
+    background: linear-gradient(
+      90deg,
+      rgba(2, 8, 23, 0.92) 0%,
+      rgba(2, 8, 23, 0.32) 22%,
+      transparent 42%,
+      transparent 58%,
+      rgba(2, 8, 23, 0.32) 78%,
+      rgba(2, 8, 23, 0.92) 100%
+    );
   }
 
   .container .left,
   .container .right {
     position: relative;
-    filter: drop-shadow(0 0 0.28rem rgba(0, 212, 255, 0.16));
+    filter: drop-shadow(0 0 1.4583vw rgba(0, 212, 255, 0.16));
 
     &::before {
       content: '';
       position: absolute;
-      top: 0.72rem;
-      bottom: 0.2rem;
+      top: 6.6667vh;
+      bottom: 1.8519vh;
       width: 1px;
       background: linear-gradient(180deg, transparent, rgba(0, 212, 255, 0.65), rgba(245, 158, 11, 0.35), transparent);
-      box-shadow: 0 0 0.18rem rgba(0, 212, 255, 0.8);
+      box-shadow: 0 0 0.9375vw rgba(0, 212, 255, 0.8);
       animation: sideEnergy 3.8s ease-in-out infinite;
     }
   }
 
   .container .left::before {
-    right: 0.18rem;
+    right: 0.9375vw;
   }
 
   .container .right::before {
-    left: 0.18rem;
+    left: 0.9375vw;
   }
 
   .container .left .module-card,
@@ -1393,15 +1389,18 @@
     position: relative;
     overflow: hidden;
     border: 1px solid rgba(0, 212, 255, 0.16);
-    border-radius: 0.08rem;
+    border-radius: 0.4167vw;
     background:
       linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(15, 23, 42, 0.28) 44%, rgba(245, 158, 11, 0.07)),
       linear-gradient(180deg, rgba(15, 23, 42, 0.5), rgba(2, 6, 23, 0.18));
     box-shadow:
-      inset 0 0 0.22rem rgba(0, 212, 255, 0.08),
-      0 0.08rem 0.28rem rgba(0, 0, 0, 0.28);
+      inset 0 0 1.1458vw rgba(0, 212, 255, 0.08),
+      0 0.7407vh 1.4583vw rgba(0, 0, 0, 0.28);
     backdrop-filter: blur(4px);
-    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
+    transition:
+      transform 0.35s ease,
+      border-color 0.35s ease,
+      box-shadow 0.35s ease;
 
     &::before {
       content: '';
@@ -1409,8 +1408,16 @@
       inset: 0;
       border-radius: inherit;
       padding: 1px;
-      background: linear-gradient(135deg, rgba(0, 212, 255, 0.78), transparent 32%, transparent 62%, rgba(245, 158, 11, 0.55));
-      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+      background: linear-gradient(
+        135deg,
+        rgba(0, 212, 255, 0.78),
+        transparent 32%,
+        transparent 62%,
+        rgba(245, 158, 11, 0.55)
+      );
+      mask:
+        linear-gradient(#000 0 0) content-box,
+        linear-gradient(#000 0 0);
       mask-composite: exclude;
       pointer-events: none;
       opacity: 0.75;
@@ -1430,51 +1437,51 @@
     }
 
     &:hover {
-      transform: translateY(-0.02rem);
+      transform: translateY(-0.1852vh);
       border-color: rgba(0, 212, 255, 0.42);
       box-shadow:
-        inset 0 0 0.28rem rgba(0, 212, 255, 0.13),
-        0 0.12rem 0.32rem rgba(0, 0, 0, 0.34),
-        0 0 0.22rem rgba(0, 212, 255, 0.18);
+        inset 0 0 1.4583vw rgba(0, 212, 255, 0.13),
+        0 1.1111vh 1.6667vw rgba(0, 0, 0, 0.34),
+        0 0 1.1458vw rgba(0, 212, 255, 0.18);
     }
   }
 
   .container .module-header {
     position: relative;
-    min-height: 0.32rem;
+    min-height: 2.963vh;
 
     &::after {
       content: '';
       position: absolute;
       left: 0;
       right: 0;
-      bottom: -0.06rem;
+      bottom: -0.5556vh;
       height: 1px;
       background: linear-gradient(90deg, rgba(0, 212, 255, 0.8), rgba(59, 130, 246, 0.2), transparent);
-      box-shadow: 0 0 0.12rem rgba(0, 212, 255, 0.55);
+      box-shadow: 0 0 0.625vw rgba(0, 212, 255, 0.55);
     }
   }
 
   .container .module-title {
     color: #eefaff;
-    letter-spacing: 0.02rem;
-    text-shadow: 0 0 0.12rem rgba(0, 212, 255, 0.55);
+    letter-spacing: 0.1042vw;
+    text-shadow: 0 0 0.625vw rgba(0, 212, 255, 0.55);
   }
 
   .container .title-icon {
     position: relative;
-    width: 0.08rem;
-    height: 0.26rem;
+    width: 0.4167vw;
+    height: 2.4074vh;
     background: linear-gradient(180deg, #f59e0b 0%, #00e5ff 45%, #2563eb 100%);
-    box-shadow: 0 0 0.12rem rgba(0, 212, 255, 0.9);
+    box-shadow: 0 0 0.625vw rgba(0, 212, 255, 0.9);
     animation: iconPulse 1.8s ease-in-out infinite;
 
     &::after {
       content: '';
       position: absolute;
-      left: 0.13rem;
+      left: 0.6771vw;
       top: 50%;
-      width: 0.42rem;
+      width: 2.1875vw;
       height: 1px;
       background: linear-gradient(90deg, rgba(0, 212, 255, 0.9), transparent);
       transform: translateY(-50%);
@@ -1484,11 +1491,11 @@
   .container .center .title {
     position: relative;
     color: #f7fdff;
-    letter-spacing: 0.08rem;
+    letter-spacing: 0.4167vw;
     text-shadow:
-      0 0 0.1rem rgba(0, 212, 255, 0.8),
-      0 0 0.28rem rgba(37, 99, 235, 0.65),
-      0 0 0.44rem rgba(245, 158, 11, 0.2);
+      0 0 0.5208vw rgba(0, 212, 255, 0.8),
+      0 0 1.4583vw rgba(37, 99, 235, 0.65),
+      0 0 2.2917vw rgba(245, 158, 11, 0.2);
     animation: titleGlow 3s ease-in-out infinite;
 
     &::before,
@@ -1496,38 +1503,38 @@
       content: '';
       position: absolute;
       top: 50%;
-      width: 1.72rem;
-      height: 0.14rem;
+      width: 8.9583vw;
+      height: 1.2963vh;
       border-top: 1px solid rgba(0, 212, 255, 0.75);
       border-bottom: 1px solid rgba(245, 158, 11, 0.35);
       transform: translateY(-50%);
-      box-shadow: 0 0 0.12rem rgba(0, 212, 255, 0.45);
+      box-shadow: 0 0 0.625vw rgba(0, 212, 255, 0.45);
     }
 
     &::before {
-      left: 0.34rem;
+      left: 1.7708vw;
       clip-path: polygon(0 50%, 12% 0, 100% 0, 88% 100%, 12% 100%);
     }
 
     &::after {
-      right: 0.34rem;
+      right: 1.7708vw;
       clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 12% 50%);
     }
   }
 
   .container .center .top2 {
     position: relative;
-    margin: 0 0.16rem;
+    margin: 0 0.8333vw;
     border: 1px solid rgba(0, 212, 255, 0.18);
-    border-radius: 0.16rem;
+    border-radius: 0.8333vw;
     overflow: hidden;
     background:
       linear-gradient(135deg, rgba(0, 212, 255, 0.1), transparent 25% 75%, rgba(245, 158, 11, 0.08)),
       rgba(2, 8, 23, 0.24);
     box-shadow:
-      inset 0 0 0.4rem rgba(0, 212, 255, 0.08),
-      0 0 0.36rem rgba(0, 0, 0, 0.26),
-      0 0 0.26rem rgba(0, 212, 255, 0.08);
+      inset 0 0 2.0833vw rgba(0, 212, 255, 0.08),
+      0 0 1.875vw rgba(0, 0, 0, 0.26),
+      0 0 1.3542vw rgba(0, 212, 255, 0.08);
 
     &::before,
     &::after {
@@ -1557,48 +1564,46 @@
 
   .container .center .bottom {
     position: relative;
-    margin: 0.14rem 0.16rem 0;
+    margin: 1.2963vh 0.8333vw 0;
     border: 1px solid rgba(0, 212, 255, 0.18);
-    border-radius: 0.12rem;
+    border-radius: 0.625vw;
     background:
       linear-gradient(180deg, rgba(15, 23, 42, 0.44), rgba(2, 6, 23, 0.18)),
       url('@/assets/img/largeScreen2/center-10.png') no-repeat center / 100% 100%;
-    box-shadow: inset 0 0 0.3rem rgba(0, 212, 255, 0.08);
+    box-shadow: inset 0 0 1.5625vw rgba(0, 212, 255, 0.08);
     overflow: hidden;
 
     &::before {
       content: 'ALARM MONITOR';
       position: absolute;
-      top: 0.13rem;
-      left: 0.32rem;
+      top: 1.2037vh;
+      left: 1.6667vw;
       color: rgba(0, 212, 255, 0.58);
-      font-size: 0.12rem;
-      letter-spacing: 0.06rem;
-      text-shadow: 0 0 0.08rem rgba(0, 212, 255, 0.7);
+      font-size: 0.625vw;
+      letter-spacing: 0.3125vw;
+      text-shadow: 0 0 0.4167vw rgba(0, 212, 255, 0.7);
     }
   }
 
   .container .card {
-    background:
-      radial-gradient(circle at 50% 46%, rgba(0, 212, 255, 0.08), transparent 40%),
-      rgba(2, 8, 23, 0.18);
+    background: radial-gradient(circle at 50% 46%, rgba(0, 212, 255, 0.08), transparent 40%), rgba(2, 8, 23, 0.18);
   }
 
   .container .map-control {
-    top: 0.24rem;
-    left: 0.22rem;
-    min-width: 1.74rem;
-    padding: 0.16rem;
+    top: 2.2222vh;
+    left: 1.1458vw;
+    min-width: 9.0625vw;
+    padding: 1.4815vh;
     overflow: hidden;
     border: 1px solid rgba(0, 212, 255, 0.38);
-    border-radius: 0.14rem;
+    border-radius: 0.7292vw;
     background:
       linear-gradient(135deg, rgba(8, 47, 73, 0.9), rgba(15, 23, 42, 0.76)),
-      repeating-linear-gradient(90deg, transparent 0 0.16rem, rgba(0, 212, 255, 0.05) 0.17rem 0.18rem);
+      repeating-linear-gradient(90deg, transparent 0 0.8333vw, rgba(0, 212, 255, 0.05) 0.8854vw 0.9375vw);
     box-shadow:
-      inset 0 0 0.2rem rgba(0, 212, 255, 0.14),
-      0 0 0.28rem rgba(0, 212, 255, 0.2),
-      0 0.1rem 0.24rem rgba(0, 0, 0, 0.28);
+      inset 0 0 1.0417vw rgba(0, 212, 255, 0.14),
+      0 0 1.4583vw rgba(0, 212, 255, 0.2),
+      0 0.9259vh 1.25vw rgba(0, 0, 0, 0.28);
     backdrop-filter: blur(8px);
   }
 
@@ -1617,33 +1622,37 @@
 
   .container .control-title {
     color: #89ddff;
-    font-size: 0.13rem;
-    letter-spacing: 0.02rem;
+    font-size: 0.6771vw;
+    letter-spacing: 0.1042vw;
   }
 
   .container .control-value {
     color: #f7fbff;
-    font-family: DIN Alternate, Bahnschrift, Arial, sans-serif;
-    font-size: 0.34rem;
-    text-shadow: 0 0 0.16rem rgba(0, 212, 255, 0.9);
+    font-family:
+      DIN Alternate,
+      Bahnschrift,
+      Arial,
+      sans-serif;
+    font-size: 1.7708vw;
+    text-shadow: 0 0 0.8333vw rgba(0, 212, 255, 0.9);
     animation: numberPulse 2.4s ease-in-out infinite;
   }
 
   .container .control-top {
-    margin-bottom: 0.14rem;
-    padding-bottom: 0.14rem;
+    margin-bottom: 1.2963vh;
+    padding-bottom: 1.2963vh;
     border-bottom-color: rgba(0, 212, 255, 0.28);
   }
 
   .container .status-list {
-    gap: 0.08rem;
+    gap: 0.7407vh;
   }
 
   .container .status-item {
     justify-content: space-between;
-    gap: 0.08rem;
-    padding: 0.04rem 0.06rem;
-    border-radius: 0.06rem;
+    gap: 0.4167vw;
+    padding: 0.3704vh 0.3125vw;
+    border-radius: 0.3125vw;
     background: rgba(2, 8, 23, 0.28);
   }
 
@@ -1653,22 +1662,28 @@
 
   .container .status-item strong {
     color: #f7fbff;
-    font-family: DIN Alternate, Bahnschrift, Arial, sans-serif;
-    font-size: 0.16rem;
-    text-shadow: 0 0 0.1rem rgba(0, 212, 255, 0.55);
+    font-family:
+      DIN Alternate,
+      Bahnschrift,
+      Arial,
+      sans-serif;
+    font-size: 0.8333vw;
+    text-shadow: 0 0 0.5208vw rgba(0, 212, 255, 0.55);
   }
 
   .container .device-item,
   .container .alert-item {
     position: relative;
-    padding: 0.05rem 0.08rem;
-    border-radius: 0.04rem;
+    padding: 0.463vh 0.4167vw;
+    border-radius: 0.2083vw;
     background: linear-gradient(90deg, rgba(0, 212, 255, 0.08), transparent);
     border-left: 1px solid rgba(0, 212, 255, 0.22);
-    transition: transform 0.25s ease, background 0.25s ease;
+    transition:
+      transform 0.25s ease,
+      background 0.25s ease;
 
     &:hover {
-      transform: translateX(0.04rem);
+      transform: translateX(0.2083vw);
       background: linear-gradient(90deg, rgba(0, 212, 255, 0.16), rgba(245, 158, 11, 0.06), transparent);
     }
   }
@@ -1676,7 +1691,7 @@
   .container .device-dot,
   .container .alert-dot,
   .container .status-dot {
-    box-shadow: 0 0 0.1rem currentColor;
+    box-shadow: 0 0 0.5208vw currentColor;
     animation: dotBreath 2s ease-in-out infinite;
   }
 
@@ -1684,15 +1699,19 @@
   .container .alert-name,
   .container .status-item,
   .container .cell {
-    text-shadow: 0 0 0.08rem rgba(0, 212, 255, 0.18);
+    text-shadow: 0 0 0.4167vw rgba(0, 212, 255, 0.18);
   }
 
   .container .device-count,
   .container .alert-count,
   .container .device-percent,
   .container .alert-percent {
-    font-family: DIN Alternate, Bahnschrift, Arial, sans-serif;
-    text-shadow: 0 0 0.1rem rgba(0, 212, 255, 0.45);
+    font-family:
+      DIN Alternate,
+      Bahnschrift,
+      Arial,
+      sans-serif;
+    text-shadow: 0 0 0.5208vw rgba(0, 212, 255, 0.45);
   }
 
   .container .el-table {
@@ -1706,16 +1725,18 @@
       background: linear-gradient(180deg, rgba(0, 212, 255, 0.14), rgba(15, 23, 42, 0.08)) !important;
       color: #9beafe !important;
       font-weight: bold;
-      letter-spacing: 0.02rem;
-      text-shadow: 0 0 0.08rem rgba(0, 212, 255, 0.5);
+      letter-spacing: 0.1042vw;
+      text-shadow: 0 0 0.4167vw rgba(0, 212, 255, 0.5);
     }
 
     .el-table__row {
-      transition: background 0.25s ease, transform 0.25s ease;
+      transition:
+        background 0.25s ease,
+        transform 0.25s ease;
     }
 
     .el-table__row:hover {
-      transform: translateX(0.02rem);
+      transform: translateX(0.1042vw);
     }
 
     .el-table__body-wrapper::-webkit-scrollbar {
@@ -1726,7 +1747,7 @@
     .el-table__body-wrapper::-webkit-scrollbar-thumb {
       border-radius: 4px;
       background: linear-gradient(180deg, #00d4ff, #2563eb);
-      box-shadow: 0 0 0.08rem rgba(0, 212, 255, 0.8);
+      box-shadow: 0 0 0.4167vw rgba(0, 212, 255, 0.8);
     }
   }
 
@@ -1786,7 +1807,9 @@
   }
 
   .power-map-marker.alarm {
-    animation: markerFloat 2.4s ease-in-out infinite, alarmBlink 1s ease-in-out infinite;
+    animation:
+      markerFloat 2.4s ease-in-out infinite,
+      alarmBlink 1s ease-in-out infinite;
   }
 
   .power-map-info {
@@ -1845,7 +1868,8 @@
   }
 
   @keyframes energySweep {
-    0%, 100% {
+    0%,
+    100% {
       opacity: 0.45;
       transform: translateX(-3%);
     }
@@ -1857,15 +1881,20 @@
 
   @keyframes gridDrift {
     from {
-      background-position: 0 0, 0 0;
+      background-position:
+        0 0,
+        0 0;
     }
     to {
-      background-position: 0.42rem 0.42rem, 0.42rem 0.42rem;
+      background-position:
+        2.1875vw 3.8889vh,
+        2.1875vw 2.1875vw;
     }
   }
 
   @keyframes gridPulse {
-    0%, 100% {
+    0%,
+    100% {
       opacity: 0.24;
     }
     50% {
@@ -1878,7 +1907,8 @@
       transform: translateY(-110%);
       opacity: 0;
     }
-    12%, 72% {
+    12%,
+    72% {
       opacity: 1;
     }
     100% {
@@ -1888,7 +1918,8 @@
   }
 
   @keyframes sideEnergy {
-    0%, 100% {
+    0%,
+    100% {
       opacity: 0.45;
       filter: hue-rotate(0deg);
     }
@@ -1899,7 +1930,8 @@
   }
 
   @keyframes cardGlint {
-    0%, 62% {
+    0%,
+    62% {
       left: -65%;
       opacity: 0;
     }
@@ -1913,16 +1945,18 @@
   }
 
   @keyframes iconPulse {
-    0%, 100% {
-      box-shadow: 0 0 0.08rem rgba(0, 212, 255, 0.65);
+    0%,
+    100% {
+      box-shadow: 0 0 0.4167vw rgba(0, 212, 255, 0.65);
     }
     50% {
-      box-shadow: 0 0 0.2rem rgba(0, 212, 255, 1);
+      box-shadow: 0 0 1.0417vw rgba(0, 212, 255, 1);
     }
   }
 
   @keyframes titleGlow {
-    0%, 100% {
+    0%,
+    100% {
       filter: brightness(1);
     }
     50% {
@@ -1931,7 +1965,8 @@
   }
 
   @keyframes radarBreath {
-    0%, 100% {
+    0%,
+    100% {
       opacity: 0.38;
       transform: scale(1);
     }
@@ -1942,7 +1977,8 @@
   }
 
   @keyframes numberPulse {
-    0%, 100% {
+    0%,
+    100% {
       transform: translateZ(0) scale(1);
     }
     50% {
@@ -1951,7 +1987,8 @@
   }
 
   @keyframes dotBreath {
-    0%, 100% {
+    0%,
+    100% {
       filter: brightness(1);
     }
     50% {
@@ -1960,7 +1997,8 @@
   }
 
   @keyframes markerFloat {
-    0%, 100% {
+    0%,
+    100% {
       transform: translateY(0);
     }
     50% {
@@ -1989,7 +2027,8 @@
   }
 
   @keyframes controlGlint {
-    0%, 58% {
+    0%,
+    58% {
       left: -70%;
       opacity: 0;
     }
@@ -2003,7 +2042,8 @@
   }
 
   @keyframes alarmBlink {
-    0%, 100% {
+    0%,
+    100% {
       filter: drop-shadow(0 0 8px var(--tech-danger));
     }
     50% {