精简实时监控故障显示

src/views/Monitoring/index.vue

@@ -90,11 +90,11 @@
                             </el-button>
                         </div>
                         <div v-if="currentFaults.length" class="fault-list">
-                            <div v-for="fault in currentFaults" :key="`${fault.loop_idx}-${fault.code}-${fault.message}`" class="fault-item">
+                            <div v-for="(fault, index) in visibleCurrentFaults" :key="`${fault.loop_idx}-${fault.code}-${fault.message}-${index}`" class="fault-item">
                                 <span class="fault-loop">回路{{ fault.loop_idx }}</span>
-                                <span class="fault-message">{{ fault.message }}</span>
+                                <span class="fault-message" :title="fault.code ? `${fault.message}(${fault.code})` : fault.message">{{ fault.message }}</span>
-                                <span v-if="fault.code" class="fault-code">{{ fault.code }}</span>
                             </div>
+                            <div v-if="hiddenFaultCount" class="fault-item fault-more">+{{ hiddenFaultCount }}</div>
                         </div>
                         <div v-else class="fault-empty">当前无故障</div>
                     </div>
@@ -110,13 +110,22 @@
                                         <div class="line_item">电流: <span>{{ circuit.A ? circuit.A?.toFixed(2) : 0 }}A</span></div>
                                     </div>
                                     <div class="line">
-                                        <div class="line_item">功率: <span>{{ circuit.Kw ? circuit.Kw?.toFixed(3) : 0 }}kW</span></div>
+                                        <div class="line_item line_item_full">功率: <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 || 0 }}%
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                     <!-- <div class="chartBox">
                         <div class="search">
                             <el-date-picker value-format="YYYY-MM-DD" v-model="recdDate" type="date" placeholder="请选择时间" />
@@ -366,6 +375,8 @@ const loopNo = (loop, index) => {
     return Number.isInteger(loopIndex) ? loopIndex + 1 : index + 1
 }
 
+const maxVisibleFaultCount = 10
+
 const currentFaults = computed(() => {
     const loops = info.value?.Loops || []
     return loops.flatMap((loop, index) => {
@@ -390,6 +401,15 @@ const currentFaults = computed(() => {
     })
 })
 
+const visibleCurrentFaults = computed(() => {
+    if (currentFaults.value.length > maxVisibleFaultCount) {
+        return currentFaults.value.slice(0, maxVisibleFaultCount - 1)
+    }
+    return currentFaults.value
+})
+
+const hiddenFaultCount = computed(() => currentFaults.value.length - visibleCurrentFaults.value.length)
+
 const loadDeviceStatus = () => {
     return RPC.post('/m9z/getDeviceStatus2', { comm_uid: commit_uid }).then((res) => {
         info.value = res
@@ -762,8 +782,11 @@ onUnmounted(() => {
 .fault-list {
     display: grid;
     grid-template-columns: repeat(5, minmax(0, 1fr));
+    grid-template-rows: repeat(2, 24px);
     gap: 6px;
     margin-top: 8px;
+    max-height: 54px;
+    overflow: hidden;
 }
 
 .fault-item {
@@ -794,13 +817,11 @@ onUnmounted(() => {
     color: #fff;
 }
 
-.fault-code {
+.fault-more {
-    flex-shrink: 0;
+    justify-content: center;
-    padding: 1px 4px;
+    font-size: 12px;
-    border-radius: 4px;
+    font-weight: 600;
-    font-size: 11px;
     color: #ffd4d4;
-    background: rgba(255, 255, 255, 0.1);
 }
 
 .fault-empty {
@@ -838,6 +859,10 @@ onUnmounted(() => {
                 flex-shrink: 0;
                 display: flex;
                 justify-content: space-between;
+
+                &.line_item_full {
+                    width: 100%;
+                }
             }
         }
     }
@@ -898,6 +923,53 @@ onUnmounted(() => {
     box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
 }
 
+.dimming-section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    font-size: 12px;
+    flex-shrink: 0;
+}
+
+.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;
+    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);
+}
+
 .bottom-info {
     display: flex;
     justify-content: space-between;