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

Merge branch 'origin/绿色触摸屏' into 触摸屏-直流

Browse Source
触摸屏-直流
Rice 2 weeks ago
parent d57c077a1c 4e0405808c
commit 5486127839
1 changed files with 165 additions and 31 deletions
Show Stats Download Patch File Download Diff File

196
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-for="fault in currentFaults" :key="`${fault.loop_idx}-${fault.code}-${fault.message}`" class="fault-item">
<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">{{ 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>
<div class="circuit-section">
<div class="circuit-grid">
@ -110,13 +117,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="请选择时间" />
@ -191,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 = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
@ -366,6 +383,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 +409,31 @@ 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 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
@ -724,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;
@ -760,10 +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;
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 {
@ -794,19 +885,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 {
margin-top: 10px;
font-size: 13px;
color: rgba(255, 255, 255, 0.75);
}
.circuit-section {
@ -838,6 +921,10 @@ onUnmounted(() => {
flex-shrink: 0;
display: flex;
justify-content: space-between;
&.line_item_full {
width: 100%;
}
}
}
}
@ -898,6 +985,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;

Write Preview
Loading…
Cancel
Save