From e455bb5a6003e7da88cd6e77a99c7a9131f9903f Mon Sep 17 00:00:00 2001
From: wangqiyang <wqy00163@163.com>
Date: Thu, 30 Jul 2026 12:47:12 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E7=B2=BE=E7=AE=80=E5=AE=9E=E6=97=B6?=
 =?UTF-8?q?=E7=9B=91=E6=8E=A7=E6=95=85=E9=9A=9C=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Monitoring/index.vue | 94 ++++++++++++++++++++++++++++++----
 1 file changed, 83 insertions(+), 11 deletions(-)

diff --git a/src/views/Monitoring/index.vue b/src/views/Monitoring/index.vue
index 1241a79..c0787ba 100644
--- a/src/views/Monitoring/index.vue
+++ b/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 v-if="fault.code" class="fault-code">{{ fault.code }}</span>
+                                <span class="fault-message" :title="fault.code ? `${fault.message}(${fault.code})` : fault.message">{{ fault.message }}</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">调光: <span>{{ circuit.pwm || 0 }}%</span></div>
+                                        <div class="line_item line_item_full">功率: <span>{{ circuit.Kw ? circuit.Kw?.toFixed(3) : 0 }}kW</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 {
-    flex-shrink: 0;
-    padding: 1px 4px;
-    border-radius: 4px;
-    font-size: 11px;
+.fault-more {
+    justify-content: center;
+    font-size: 12px;
+    font-weight: 600;
     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;

From 4e0405808c2c9fe0f72c076ade4dd9986ad13659 Mon Sep 17 00:00:00 2001
From: wangqiyang <wqy00163@163.com>
Date: Thu, 30 Jul 2026 13:16:31 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=95=85=E9=9A=9C?=
 =?UTF-8?q?=E5=B1=95=E5=BC=80=E9=9A=90=E8=97=8F=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Monitoring/index.vue | 104 ++++++++++++++++++++++++++-------
 1 file changed, 83 insertions(+), 21 deletions(-)

diff --git a/src/views/Monitoring/index.vue b/src/views/Monitoring/index.vue
index c0787ba..37ba37b 100644
--- a/src/views/Monitoring/index.vue
+++ b/src/views/Monitoring/index.vue
@@ -76,27 +76,34 @@
                             <el-button style="margin-bottom: 0;" class="mode-button active">{{ info.Mode ? '手动' : '自动' }}</el-button>
                         </div>
                     </div>
-                    <div class="fault-section">
-                        <div class="fault-header">
+                    <div class="fault-section" :class="{ 'fault-section-expanded': faultListExpanded }">
+                        <div class="fault-header" @click="toggleFaultList">
                             <div>
-                                <div class="fault-title">当前故障</div>
-                                <div class="fault-subtitle">当前扫描设备数：{{ scanDeviceCount }}</div>
+                                <div class="fault-title">
+                                    当前故障
+                                    <span v-if="currentFaults.length" class="fault-count">{{ currentFaults.length }}个</span>
+                                </div>
+                                <div class="fault-subtitle">当前扫描设备数：{{ scanDeviceCount }} · {{ faultStatusText }}</div>
+                            </div>
+                            <div class="fault-actions">
+                                <el-button v-if="currentFaults.length" class="fault-toggle-button" @click.stop="toggleFaultList">
+                                    {{ faultListExpanded ? '隐藏' : '展开' }}
+                                </el-button>
+                                <el-button class="fault-refresh-button" :loading="faultRefreshing" @click.stop="refreshCurrentFaults">
+                                    <el-icon>
+                                        <RefreshRight />
+                                    </el-icon>
+                                    刷新
+                                </el-button>
                             </div>
-                            <el-button class="fault-refresh-button" :loading="faultRefreshing" @click="refreshCurrentFaults">
-                                <el-icon>
-                                    <RefreshRight />
-                                </el-icon>
-                                刷新当前故障
-                            </el-button>
                         </div>
-                        <div v-if="currentFaults.length" class="fault-list">
+                        <div v-if="currentFaults.length && faultListExpanded" class="fault-list" @click.stop>
                             <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" :title="fault.code ? `${fault.message}(${fault.code})` : fault.message">{{ fault.message }}</span>
                             </div>
                             <div v-if="hiddenFaultCount" class="fault-item fault-more">+{{ hiddenFaultCount }}</div>
                         </div>
-                        <div v-else class="fault-empty">当前无故障</div>
                     </div>
                     <div class="circuit-section">
                         <div class="circuit-grid">
@@ -200,6 +207,7 @@ const brightnessDialogVisible = ref(false)
 const currentBrightness = ref(50)
 const selectedChannelName = ref(null)
 const faultRefreshing = ref(false)
+const faultListExpanded = ref(false)
 
 const week = ref('')
 const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
@@ -410,6 +418,22 @@ const visibleCurrentFaults = computed(() => {
 
 const hiddenFaultCount = computed(() => currentFaults.value.length - visibleCurrentFaults.value.length)
 
+const faultStatusText = computed(() => {
+    if (!currentFaults.value.length) return '当前无故障'
+    return faultListExpanded.value ? '已展开' : '已隐藏'
+})
+
+const toggleFaultList = () => {
+    if (!currentFaults.value.length) return
+    faultListExpanded.value = !faultListExpanded.value
+}
+
+watch(currentFaults, (faults) => {
+    if (!faults.length) {
+        faultListExpanded.value = false
+    }
+})
+
 const loadDeviceStatus = () => {
     return RPC.post('/m9z/getDeviceStatus2', { comm_uid: commit_uid }).then((res) => {
         info.value = res
@@ -744,32 +768,66 @@ onUnmounted(() => {
 }
 
 .fault-section {
+    position: relative;
+    z-index: 5;
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 8px;
-    padding: 8px 12px;
+    padding: 6px 12px;
     color: #fff;
     flex-shrink: 0;
 }
 
+.fault-section-expanded {
+    z-index: 20;
+}
+
 .fault-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 16px;
+    cursor: pointer;
 }
 
 .fault-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
     font-size: 15px;
     font-weight: 600;
 }
 
+.fault-count {
+    padding: 1px 6px;
+    border-radius: 10px;
+    font-size: 12px;
+    color: #ffd4d4;
+    background: rgba(220, 53, 69, 0.18);
+}
+
 .fault-subtitle {
     margin-top: 4px;
     font-size: 12px;
     color: rgba(255, 255, 255, 0.68);
 }
 
+.fault-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+}
+
+.fault-toggle-button {
+    flex-shrink: 0;
+    height: 30px;
+    border-radius: 6px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: #fff;
+    background: rgba(255, 255, 255, 0.1);
+}
+
 .fault-refresh-button {
     flex-shrink: 0;
     height: 30px;
@@ -780,13 +838,23 @@ onUnmounted(() => {
 }
 
 .fault-list {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    right: 0;
+    z-index: 30;
     display: grid;
     grid-template-columns: repeat(5, minmax(0, 1fr));
     grid-template-rows: repeat(2, 24px);
     gap: 6px;
-    margin-top: 8px;
-    max-height: 54px;
+    max-height: 66px;
+    padding: 6px 12px;
     overflow: hidden;
+    box-sizing: border-box;
+    border-radius: 8px;
+    background: rgba(42, 69, 66, 0.96);
+    border: 1px solid rgba(255, 120, 120, 0.35);
+    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
 }
 
 .fault-item {
@@ -824,12 +892,6 @@ onUnmounted(() => {
     color: #ffd4d4;
 }
 
-.fault-empty {
-    margin-top: 10px;
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.75);
-}
-
 .circuit-section {
     display: flex;
     flex-direction: column;