优化实时监控故障布局

src/views/Monitoring/index.vue

@@ -111,21 +111,12 @@
                                     </div>
                                     <div class="line">
                                         <div class="line_item">功率: <span>{{ circuit.Kw ? circuit.Kw?.toFixed(3) : 0 }}kW</span></div>
+                                        <div class="line_item">调光: <span>{{ circuit.pwm || 0 }}%</span></div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div class="dimming-section">
-                        <div class="dimming-grid">
-                            <div v-for="(channel, index) in monitorLoops" :key="`${channel.name}-${index}`" class="dimming-item">
-                                <div class="channel-label">调光通道{{ loopNo(channel, index) }}</div>
-                                <div class="brightness-display" :class="{ active: channel.pwm > 0 }">
-                                    {{ channel.pwm }}%
-                                </div>
-                            </div>
-                        </div>
-                    </div>
                     <!-- <div class="chartBox">
                         <div class="search">
                             <el-date-picker value-format="YYYY-MM-DD" v-model="recdDate" type="date" placeholder="请选择时间" />
@@ -668,11 +659,11 @@ onUnmounted(() => {
     flex: 1;
     display: flex;
     flex-direction: column;
-    // justify-content: space-between;
+    justify-content: space-between;
     /* width: 500px; */
-    gap: 12px;
+    gap: 8px;
     height: 100%;
-    overflow-y: auto;
+    overflow: hidden;
 }
 
 .power-params {
@@ -736,8 +727,9 @@ onUnmounted(() => {
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 8px;
-    padding: 10px 14px;
+    padding: 8px 12px;
     color: #fff;
+    flex-shrink: 0;
 }
 
 .fault-header {
@@ -748,7 +740,7 @@ onUnmounted(() => {
 }
 
 .fault-title {
-    font-size: 16px;
+    font-size: 15px;
     font-weight: 600;
 }
 
@@ -760,7 +752,7 @@ onUnmounted(() => {
 
 .fault-refresh-button {
     flex-shrink: 0;
-    height: 34px;
+    height: 30px;
     border-radius: 6px;
     border: none;
     color: #fff;
@@ -768,38 +760,45 @@ onUnmounted(() => {
 }
 
 .fault-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin-top: 10px;
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    gap: 6px;
+    margin-top: 8px;
 }
 
 .fault-item {
     display: flex;
     align-items: center;
-    gap: 8px;
-    min-height: 28px;
-    padding: 4px 8px;
+    gap: 5px;
+    min-height: 24px;
+    min-width: 0;
+    padding: 3px 6px;
     border-radius: 6px;
     background: rgba(220, 53, 69, 0.16);
     border: 1px solid rgba(255, 120, 120, 0.35);
 }
 
 .fault-loop {
-    font-size: 12px;
+    flex-shrink: 0;
+    font-size: 11px;
     color: #ffd4d4;
 }
 
 .fault-message {
-    font-size: 13px;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 12px;
     font-weight: 600;
     color: #fff;
 }
 
 .fault-code {
-    padding: 2px 6px;
+    flex-shrink: 0;
+    padding: 1px 4px;
     border-radius: 4px;
-    font-size: 12px;
+    font-size: 11px;
     color: #ffd4d4;
     background: rgba(255, 255, 255, 0.1);
 }
@@ -814,13 +813,14 @@ onUnmounted(() => {
     display: flex;
     flex-direction: column;
     gap: 8px;
+    flex-shrink: 0;
 }
 
 .circuit-grid {
     display: grid;
     grid-template-columns: repeat(5, minmax(0, 1fr));
     gap: 8px;
-    font-size: 12px;
+    font-size: 11px;
 
     .circuitStatus {
         color: #fff;
@@ -829,7 +829,7 @@ onUnmounted(() => {
         .line {
             width: 100%;
             display: flex;
-            margin-top: 6px;
+            margin-top: 5px;
             justify-content: space-between;
 
             .line_item {
@@ -849,13 +849,17 @@ onUnmounted(() => {
     align-items: center;
     // gap: 10px;
     min-width: 0;
+    padding: 6px;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.12);
 }
 
 .circuit-status {
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 8px;
-    padding: 6px 8px;
+    padding: 5px 6px;
     color: rgba(255, 255, 255, 0.7);
     text-align: center;
     width: 100%;
@@ -894,58 +898,6 @@ onUnmounted(() => {
     box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
 }
 
-.dimming-section {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    font-size: 12px;
-}
-
-.dimming-grid {
-    display: grid;
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-    gap: 8px;
-}
-
-.dimming-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    min-width: 0;
-}
-
-.channel-label {
-    color: rgba(255, 255, 255, 0.8);
-    text-align: center;
-}
-
-.brightness-display {
-    background: rgba(255, 255, 255, 0.08);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 8px;
-    padding: 6px;
-    color: rgba(255, 255, 255, 0.7);
-    font-weight: bold;
-    text-align: center;
-    width: 100%;
-    box-sizing: border-box;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-.brightness-display.active {
-    background: rgba(33, 150, 243, 0.3);
-    border-color: rgba(33, 150, 243, 0.6);
-    color: #64b5f6;
-    box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
-}
-
-.brightness-display:hover {
-    background: rgba(255, 255, 255, 0.12);
-    transform: translateY(-2px);
-}
-
 .bottom-info {
     display: flex;
     justify-content: space-between;