【web】 首页UI调整

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;
 }

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

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;
+            overflow: auto;
-            padding: 1.5vh 1.5vw;
+            padding: 16px;
+            min-height: 100%;
+            position: relative;
+            box-sizing: border-box;
         }
         
         .dashboard {
-            width: 100vw;
+            width: 100%;
-            height: 100vh;
+            min-height: 100%;
-            padding: 1.5vh 1.5vw;
+            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 {
+        .left-panel, .right-panel, .center-panel {
-            width: 35%;
-            min-width: 280px;
             display: flex;
             flex-direction: column;
-            gap: 1.5vh;
+            gap: 16px;
-            min-height: 0;
+            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>