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 5486127839 4a14221648
commit a1bf5cedf6
1 changed files with 64 additions and 52 deletions
Show Stats Download Patch File Download Diff File

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

@ -82,8 +82,8 @@
<div class="fault-title"> <div class="fault-title">
当前故障 当前故障
<span v-if="currentFaults.length" class="fault-count">{{ currentFaults.length }}个</span> <span v-if="currentFaults.length" class="fault-count">{{ currentFaults.length }}个</span>
<span class="fault-subtitle">当前扫描设备数：{{ scanDeviceCount }} · {{ faultStatusText }}</span>
</div> </div>
<div class="fault-subtitle">当前扫描设备数：{{ scanDeviceCount }} · {{ faultStatusText }}</div>
</div> </div>
<div class="fault-actions"> <div class="fault-actions">
<el-button v-if="currentFaults.length" class="fault-toggle-button" @click.stop="toggleFaultList"> <el-button v-if="currentFaults.length" class="fault-toggle-button" @click.stop="toggleFaultList">
@ -658,15 +658,18 @@ onUnmounted(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
padding: 10px 20px; padding: 8px 20px 52px;
box-sizing: border-box; box-sizing: border-box;
display: flex;
flex-direction: column;
} }
.header-status { .header-status {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 15px; flex-shrink: 0;
margin-bottom: 8px;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
} }
@ -677,7 +680,7 @@ onUnmounted(() => {
} }
.page-title h1 { .page-title h1 {
font-size: 30px; font-size: 26px;
font-weight: bold; font-weight: bold;
margin: 0; margin: 0;
color: #ffffff; color: #ffffff;
@ -694,9 +697,10 @@ onUnmounted(() => {
.control-content { .control-content {
display: flex; display: flex;
width: 100%; width: 100%;
gap: 30px; gap: 20px;
box-sizing: border-box; box-sizing: border-box;
height: calc(100% - 110px); flex: 1;
min-height: 0;
} }
.power-section { .power-section {
@ -705,15 +709,17 @@ onUnmounted(() => {
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
/* width: 500px; */ /* width: 500px; */
gap: 8px; gap: 6px;
height: 100%; height: 100%;
min-height: 0;
overflow: hidden; overflow: hidden;
} }
.power-params { .power-params {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 10px; gap: 8px;
flex-shrink: 0;
} }
.phase-card, .phase-card,
@ -746,16 +752,16 @@ onUnmounted(() => {
.param-list { .param-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 5px 10px; padding: 4px 8px;
flex: 1; flex: 1;
gap: 5px; gap: 3px;
justify-content: space-between; justify-content: space-between;
} }
.param-item { .param-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 12px; font-size: 11px;
} }
.param-label { .param-label {
@ -773,7 +779,7 @@ onUnmounted(() => {
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px; border-radius: 8px;
padding: 6px 12px; padding: 5px 10px;
color: #fff; color: #fff;
flex-shrink: 0; flex-shrink: 0;
} }
@ -786,28 +792,27 @@ onUnmounted(() => {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 16px; gap: 10px;
cursor: pointer; cursor: pointer;
} }
.fault-title { .fault-title {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 6px;
font-size: 15px; font-size: 14px;
font-weight: 600; font-weight: 600;
} }
.fault-count { .fault-count {
padding: 1px 6px; padding: 1px 5px;
border-radius: 10px; border-radius: 10px;
font-size: 12px; font-size: 11px;
color: #ffd4d4; color: #ffd4d4;
background: rgba(220, 53, 69, 0.18); background: rgba(220, 53, 69, 0.18);
} }
.fault-subtitle { .fault-subtitle {
margin-top: 4px;
font-size: 12px; font-size: 12px;
color: rgba(255, 255, 255, 0.68); color: rgba(255, 255, 255, 0.68);
} }
@ -815,13 +820,14 @@ onUnmounted(() => {
.fault-actions { .fault-actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 6px;
flex-shrink: 0; flex-shrink: 0;
} }
.fault-toggle-button { .fault-toggle-button {
flex-shrink: 0; flex-shrink: 0;
height: 30px; height: 26px;
padding: 0 8px;
border-radius: 6px; border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff; color: #fff;
@ -830,7 +836,8 @@ onUnmounted(() => {
.fault-refresh-button { .fault-refresh-button {
flex-shrink: 0; flex-shrink: 0;
height: 30px; height: 26px;
padding: 0 8px;
border-radius: 6px; border-radius: 6px;
border: none; border: none;
color: #fff; color: #fff;
@ -839,16 +846,16 @@ onUnmounted(() => {
.fault-list { .fault-list {
position: absolute; position: absolute;
top: calc(100% + 6px); top: auto;
bottom: calc(100% + 5px);
left: 0; left: 0;
right: 0; right: 0;
z-index: 30; z-index: 30;
display: grid; display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-columns: repeat(5, minmax(0, 1fr));
grid-template-rows: repeat(2, 24px); grid-template-rows: repeat(2, 21px);
gap: 6px; gap: 4px;
max-height: 66px; padding: 5px 10px;
padding: 6px 12px;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
border-radius: 8px; border-radius: 8px;
@ -860,10 +867,10 @@ onUnmounted(() => {
.fault-item { .fault-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 5px; gap: 4px;
min-height: 24px; min-height: 21px;
min-width: 0; min-width: 0;
padding: 3px 6px; padding: 2px 5px;
border-radius: 6px; border-radius: 6px;
background: rgba(220, 53, 69, 0.16); background: rgba(220, 53, 69, 0.16);
border: 1px solid rgba(255, 120, 120, 0.35); border: 1px solid rgba(255, 120, 120, 0.35);
@ -871,7 +878,7 @@ onUnmounted(() => {
.fault-loop { .fault-loop {
flex-shrink: 0; flex-shrink: 0;
font-size: 11px; font-size: 10px;
color: #ffd4d4; color: #ffd4d4;
} }
@ -880,14 +887,14 @@ onUnmounted(() => {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: 12px; font-size: 11px;
font-weight: 600; font-weight: 600;
color: #fff; color: #fff;
} }
.fault-more { .fault-more {
justify-content: center; justify-content: center;
font-size: 12px; font-size: 11px;
font-weight: 600; font-weight: 600;
color: #ffd4d4; color: #ffd4d4;
} }
@ -895,15 +902,19 @@ onUnmounted(() => {
.circuit-section { .circuit-section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 6px;
flex-shrink: 0; flex: 1 1 auto;
min-height: 0;
} }
.circuit-grid { .circuit-grid {
display: grid; display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px; grid-template-rows: repeat(2, minmax(0, 1fr));
font-size: 11px; gap: 6px;
height: 100%;
min-height: 0;
font-size: 10px;
.circuitStatus { .circuitStatus {
color: #fff; color: #fff;
@ -912,7 +923,7 @@ onUnmounted(() => {
.line { .line {
width: 100%; width: 100%;
display: flex; display: flex;
margin-top: 5px; margin-top: 3px;
justify-content: space-between; justify-content: space-between;
.line_item { .line_item {
@ -934,9 +945,10 @@ onUnmounted(() => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
// gap: 10px; justify-content: center;
min-width: 0; min-width: 0;
padding: 6px; min-height: 0;
padding: 4px 5px;
border-radius: 8px; border-radius: 8px;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.12);
@ -946,7 +958,7 @@ onUnmounted(() => {
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px; border-radius: 8px;
padding: 5px 6px; padding: 3px 5px;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
text-align: center; text-align: center;
width: 100%; width: 100%;
@ -988,22 +1000,22 @@ onUnmounted(() => {
.dimming-section { .dimming-section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 5px;
font-size: 12px; font-size: 11px;
flex-shrink: 0; flex-shrink: 0;
} }
.dimming-grid { .dimming-grid {
display: grid; display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px; gap: 5px 8px;
} }
.dimming-item { .dimming-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 8px; gap: 4px;
min-width: 0; min-width: 0;
} }
@ -1016,7 +1028,7 @@ onUnmounted(() => {
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px; border-radius: 8px;
padding: 6px; padding: 4px 6px;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
@ -1038,8 +1050,8 @@ onUnmounted(() => {
align-items: center; align-items: center;
border-top: 1px solid #eee; border-top: 1px solid #eee;
width: 100vw; width: 100vw;
padding: 0 30px; padding: 0 24px;
height: 50px; height: 44px;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -1060,9 +1072,9 @@ onUnmounted(() => {
.back-button, .back-button,
.restart-button { .restart-button {
width: 100%; width: 100%;
height: 38px; height: 34px;
border-radius: 19px; border-radius: 17px;
font-size: 16px; font-size: 15px;
font-weight: 500; font-weight: 500;
transition: all 0.3s ease; transition: all 0.3s ease;
} }

Write Preview
Loading…
Cancel
Save