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 @@ {{ info.Mode ? '手动' : '自动' }} -
-
+
+
-
当前故障
-
当前扫描设备数:{{ scanDeviceCount }}
+
+ 当前故障 + {{ currentFaults.length }}个 +
+
当前扫描设备数:{{ scanDeviceCount }} · {{ faultStatusText }}
+
+
+ + {{ faultListExpanded ? '隐藏' : '展开' }} + + + + + + 刷新 +
- - - - - 刷新当前故障 -
-
+
回路{{ fault.loop_idx }} {{ fault.message }}
+{{ hiddenFaultCount }}
-
当前无故障
@@ -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;