From 68ca7e555c03750853d62bb321ac02b1a2a836f8 Mon Sep 17 00:00:00 2001
From: Wangxin <wangxin@icanag.com>
Date: Sat, 1 Nov 2025 20:24:00 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90web=E3=80=91=20=E9=A6=96=E9=A1=B5UI?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ALOps_sys_fe/alops-ui/src/App.vue             |   8 +
 .../src/components/Screenfull/index.vue       |  14 +-
 ALOps_sys_fe/alops-ui/src/views/index.vue     | 164 ++++++------------
 3 files changed, 70 insertions(+), 116 deletions(-)

diff --git a/ALOps_sys_fe/alops-ui/src/App.vue b/ALOps_sys_fe/alops-ui/src/App.vue
index 12df51dc..c2b7d681 100644
--- a/ALOps_sys_fe/alops-ui/src/App.vue
+++ b/ALOps_sys_fe/alops-ui/src/App.vue
@@ -14,6 +14,14 @@ export default {
 }
 </script>
 <style scoped>
+#app {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+}
+
 #app .theme-picker {
   display: none;
 }
diff --git a/ALOps_sys_fe/alops-ui/src/components/Screenfull/index.vue b/ALOps_sys_fe/alops-ui/src/components/Screenfull/index.vue
index d4e539c2..c6c97fec 100644
--- a/ALOps_sys_fe/alops-ui/src/components/Screenfull/index.vue
+++ b/ALOps_sys_fe/alops-ui/src/components/Screenfull/index.vue
@@ -26,7 +26,19 @@ export default {
         this.$message({ message: '你的浏览器不支持全屏', type: 'warning' })
         return false
       }
-      screenfull.toggle()
+      // 明确获取main-content元素，这样只对主要内容区域进行全屏切换
+      // 保留顶部header和底部footer
+      const contentElement = document.querySelector('.index-box');
+      if (contentElement) {
+        if (screenfull.isFullscreen) {
+          screenfull.exit();
+        } else {
+          screenfull.request(contentElement);
+        }
+      } else {
+        // 如果没有找到main-content元素，则回退到body
+        screenfull.toggle();
+      }
     },
     change() {
       this.isFullscreen = screenfull.isFullscreen
diff --git a/ALOps_sys_fe/alops-ui/src/views/index.vue b/ALOps_sys_fe/alops-ui/src/views/index.vue
index 1d66dfa7..d87fe63d 100644
--- a/ALOps_sys_fe/alops-ui/src/views/index.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/index.vue
@@ -3,7 +3,7 @@
         <div id="app" class="dashboard" style="overflow-x: hidden;">
             
             <div class="header">
-                <h1>唐山市设备监控中心大屏 - 智能管理版</h1>
+                <h1>设备监控中心大屏 - 智能管理版</h1>
                 <div class="time-display">{{ currentTime }}</div>
             </div>
             
@@ -13,11 +13,8 @@
                     <div class="panel">
                         <div class="panel-title">
                             设备状态监控
-                            <div class="panel-actions">
-                                <div class="panel-btn" @click="refreshDeviceStatus">刷新</div>
-                            </div>
                         </div>
-                        <div class="device-list" style="height: calc(100% - 50px); overflow-y: auto;">
+                        <div class="device-list" style="height: calc(100% - 50px); overflow-y: auto; overflow-x: hidden;">
                             <div v-for="device in deviceStatus || []" 
                                 :key="device.id || Math.random()" 
                                 class="device-item"
@@ -46,7 +43,7 @@
                     
                 </div>
                 <!-- 右侧面板 -->
-                <div class="right-panel">                
+                <div class="center-panel">                
                     
                     <div class="panel">
                         <div class="panel-title">设备信息统计</div>
@@ -97,7 +94,7 @@
                 </div>
                 
                 <!-- 中间面板 - 楼层房间布局展示 -->
-                <div class="center-panel">
+                <div class="right-panel">
                     <div class="panel">
                         <div class="panel-title">
                             近期预警信息
@@ -121,7 +118,7 @@
             </div>
             
             <div class="footer">
-                <div>唐山市监控系统 v4.0 - 智能管理版</div>
+                <div>监控系统 v4.0 - 智能管理版</div>
                 <div>最后更新: <span class="update-time">{{ updateTime }}</span></div>
                 <div>监控设备总数: {{ totalDevices }} 台 | 在线: {{ onlineDevices }} 台</div>
             </div>
@@ -1061,30 +1058,38 @@ export default {
             font-family: "Microsoft YaHei", sans-serif;
         }
         
+        html, body {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            overflow: auto;
+        }
+        
         .index-box {
             background-color: #0a1633;
             color: #e6e6e6;
-            overflow: hidden;
-            padding: 1.5vh 1.5vw;
+            overflow: auto;
+            padding: 16px;
+            min-height: 100%;
+            position: relative;
+            box-sizing: border-box;
         }
         
         .dashboard {
-            width: 100vw;
-            height: 100vh;
-            padding: 1.5vh 1.5vw;
+            width: 100%;
+            min-height: 100%;
+            padding: 16px;
             display: flex;
             flex-direction: column;
             position: relative;
-            overflow: hidden;
             min-width: 1200px;
             min-height: 700px;
             background-color: #0a1633;
             color: #e6e6e6;
-            overflow: hidden;
         }
         
         .header {
-            height: 10vh;
+            height: 10%;
             min-height: 70px;
             max-height: 100px;
             background: linear-gradient(90deg, rgba(10, 26, 58, 0.8), rgba(13, 36, 82, 0.8), rgba(10, 26, 58, 0.8));
@@ -1135,34 +1140,37 @@ export default {
         .main-content {
             flex: 1;
             display: flex;
-            gap: 1.5vh;
+            gap: 16px;
             min-height: 0;
+            height: 100%;
+            align-items: stretch;
         }
         
-        .left-panel, .right-panel {
-            width: 35%;
-            min-width: 280px;
+        .left-panel, .right-panel, .center-panel {
             display: flex;
             flex-direction: column;
-            gap: 1.5vh;
-            min-height: 0;
+            gap: 16px;
+            min-height: 100%;
+            max-height: 100vh;
+            box-sizing: border-box;
+            flex-shrink: 0;
+        }
+        
+        .left-panel, .right-panel {
+            width: 30%;
         }
         
         .center-panel {
             flex: 1;
-            display: flex;
-            flex-direction: column;
-            gap: 1.5vh;
-            min-height: 0;
-            min-width: 500px;
+
         }
         
         .panel {
             background: rgba(16, 31, 63, 0.7);
-            border-radius: 1vh;
+            border-radius: 8px;
             border: 1px solid #1a3a7a;
             box-shadow: 0 0 10px rgba(26, 58, 122, 0.3);
-            padding: 1.5vh;
+            padding: 16px;
             position: relative;
             overflow: hidden;
             display: flex;
@@ -1188,7 +1196,7 @@ export default {
             margin-bottom: 1.5vh;
             display: flex;
             align-items: center;
-            justify-content: space-between;
+            justify-content: left;
             flex-shrink: 0;
         }
         
@@ -1228,11 +1236,13 @@ export default {
             display: flex;
             flex-direction: column;
             gap: 15px;
+            height: 100%;
         }
         
         .warning-row {
             display: flex;
             gap: 15px;
+            height: 100%;
         }
         
         .time-item {
@@ -1327,6 +1337,7 @@ export default {
             align-items: center;
             transition: all 0.3s;
             cursor: pointer;
+            justify-content: center;
         }
         
         .stat-item:hover {
@@ -1367,7 +1378,7 @@ export default {
         }
         
         .device-list {
-            height: 30vh;
+            height: 30%;
             min-height: 200px;
             overflow-y: auto;
             flex-shrink: 0;
@@ -1406,7 +1417,9 @@ export default {
         .warning-scrollbar {
             height: 100%;
             min-height: 100px;
-            flex-shrink: 0;
+            max-height: 100vh;
+            /* flex-shrink: 0; */
+            /* height: cale(100vh - 200px); */
         }
         
         .warning-scrollbar .el-scrollbar__wrap {
@@ -1506,7 +1519,7 @@ export default {
             flex: 1;
             position: relative;
             display: flex;
-            min-height: 40vh;
+            min-height: 40%;
         }
 
         .floor-plans-container {
@@ -1764,13 +1777,13 @@ export default {
         }
         
         .chart-container {
-            height: 30vh;
+            height: 30%;
             min-height: 200px;
             flex-shrink: 0;
         }
         
         .footer {
-            height: 5vh;
+            height: 5%;
             min-height: 30px;
             max-height: 50px;
             display: flex;
@@ -1778,7 +1791,7 @@ export default {
             align-items: center;
             color: #a0aec0;
             font-size: clamp(0.7rem, 0.9vw, 0.9rem);
-            margin-top: 1vh;
+            margin-top: 8px;
             flex-shrink: 0;
         }
         
@@ -1975,83 +1988,4 @@ export default {
             color: #e6e6e6;
         }
         
-        /* 响应式设计 - 中等屏幕 */
-        @media screen and (max-width: 1400px) {
-            .left-panel, .right-panel {
-                width: 28%;
-            }
-            
-            .center-panel {
-                width: 44%;
-            }
-        }
-        
-        /* 响应式设计 - 小屏幕 */
-        @media screen and (max-width: 1200px) {
-            .dashboard {
-                min-width: 1000px;
-            }
-            
-            .left-panel, .right-panel {
-                min-width: 250px;
-            }
-            
-            .center-panel {
-                min-width: 450px;
-            }
-        }
-        
-        /* 响应式设计 - 超小屏幕 */
-        @media screen and (max-width: 1000px) {
-            .dashboard {
-                min-width: 800px;
-                padding: 1vh 1vw;
-            }
-            
-            .main-content {
-                flex-direction: column;
-                gap: 1vh;
-            }
-            
-            .left-panel, .right-panel, .center-panel {
-                width: 100%;
-                min-width: auto;
-            }
-            
-            .left-panel, .right-panel {
-                flex-direction: row;
-            }
-            
-            .panel {
-                flex: 1;
-            }
-        }
-        
-        /* 响应式设计 - 移动端 */
-        @media screen and (max-width: 768px) {
-            .dashboard {
-                min-width: auto;
-                min-height: auto;
-                padding: 0.5vh 0.5vw;
-            }
-            
-            .header {
-                height: 8vh;
-                padding: 0 1vw;
-                margin-bottom: 1vh;
-            }
-            
-            .main-content {
-                gap: 1vh;
-            }
-            
-            .left-panel, .right-panel {
-                flex-direction: column;
-            }
-            
-            .footer {
-                height: 4vh;
-                font-size: 0.7rem;
-            }
-        }
     </style>
\ No newline at end of file