wqy
/
central-control
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

支持故障展开隐藏显示

Browse Source
触摸屏-直流
wangqiyang 2 weeks ago
parent e455bb5a60
commit 4e0405808c
1 changed files with 83 additions and 21 deletions
Show Stats Download Patch File Download Diff File

104
src/views/Monitoring/index.vue
Unescape View File

@ -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;

Write Preview
Loading…
Cancel
Save