支持故障展开隐藏显示

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-section" :class="{ 'fault-section-expanded': faultListExpanded }">
-                        <div class="fault-header">
+                        <div class="fault-header" @click="toggleFaultList">
                             <div>
-                                <div class="fault-title">当前故障</div>
+                                <div class="fault-title">
-                                <div class="fault-subtitle">当前扫描设备数：{{ scanDeviceCount }}</div>
+                                    当前故障
+                                    <span v-if="currentFaults.length" class="fault-count">{{ currentFaults.length }}个</span>
                                 </div>
-                            <el-button class="fault-refresh-button" :loading="faultRefreshing" @click="refreshCurrentFaults">
+                                <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>
-                        <div v-if="currentFaults.length" class="fault-list">
+                        </div>
+                        <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: 66px;
-    max-height: 54px;
+    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;