LiLongLong
/
disinfector_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix:调整调试页面传感器数值显示样式

master
白凤吉 2 weeks ago
parent
f34360fb22
commit
29f63cd961
1 changed files with 101 additions and 30 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 131
      src/views/debug/index.vue

131
src/views/debug/index.vue
View File

@ -164,25 +164,64 @@ const printerDoTest = () => {
<main class="main-content">
<!-- 上下布局 -->
<section class="debug-env">
<div v-for="(item, index) in h2O2SensorData" :key="index" class="debug-left-lh env-lh">
<div class="debug-env-content">
<div class="debug-label env-content-p" style="text-align: center;width: 8rem">
{{ index === 0 ? '仓内环境' : item.title || `探头${index}` }}
</div>
<div class="env-content-p">
<span>温度</span>
<span class="debug-text">{{ roundNumber(item.temp, 2) }}</span>°C
</div>
<div class="env-content-p">
<span>湿度</span>
<span class="debug-text">{{ roundNumber(item.rh, 2) }}</span>%RH
</div>
<div class="env-content-p">
<span>H202浓度</span>
<span class="debug-text">{{ roundNumber(item.h2o2, 2) }}</span>ppm
<!-- 左侧：H₂O₂ 传感器数据 -->
<div class="debug-env-left">
<div
v-for="(item, index) in h2O2SensorData"
:key="index"
class="debug-left-lh env-lh"
>
<div class="debug-env-content">
<div class="debug-label env-content-p" style="text-align: right; width: 8rem">
{{ index === 0 ? '仓内环境' : item.title || `探头${index}` }}
</div>
<div class="env-content-p">
<span>温度</span>
<span class="debug-text">{{ roundNumber(item.temp, 2) }}</span>°C
</div>
<div class="env-content-p">
<span>湿度</span>
<span class="debug-text">{{ roundNumber(item.rh, 2) }}</span>%RH
</div>
<div class="env-content-p">
<span>H₂O₂浓度</span>
<span class="debug-text">{{ roundNumber(item.h2o2, 2) }}</span>ppm
</div>
</div>
</div>
</div>
<!-- 右侧：电机电流 & 加热温度 -->
<div class="debug-env-right">
<div class="env-content-p">
<span class="label">空压机电流</span>
<span class="value">
<span class="debug-text">{{ debugStore.debugPageState?.airCompressorCurrent ?? 0 }}</span>
<span class="unit">A</span>
</span>
</div>
<div class="env-content-p">
<span class="label">风机电流</span>
<span class="value">
<span class="debug-text">{{ debugStore.debugPageState?.blowerCurrent ?? 0 }}</span>
<span class="unit">A</span>
</span>
</div>
<div class="env-content-p">
<span class="label">加热片电流</span>
<span class="value">
<span class="debug-text">{{ debugStore.debugPageState?.heaterCurrent ?? 0 }}</span>
<span class="unit">A</span>
</span>
</div>
<div class="env-content-p">
<span class="label">加热片温度</span>
<span class="value">
<span class="debug-text">{{ debugStore.debugPageState?.heaterTemperature ?? 0 }}</span>
<span class="unit">℃</span>
</span>
</div>
</div>
</section>
<hr class="divider">
<div class="debug-lower">
@ -217,9 +256,6 @@ const printerDoTest = () => {
<div class="debug-label">
空压机控制：
</div>
<div class="debug-bw">
<span class="debug-text">{{ debugStore.debugPageState?.airCompressorCurrent }} A</span>
</div>
<div>
<bt-button
type="primary"
@ -238,10 +274,6 @@ const printerDoTest = () => {
<div class="debug-label">
加热片控制：
</div>
<div class="debug-bw">
<span class="debug-text">{{ debugStore.debugPageState?.heaterCurrent }} A</span>
<span class="debug-text">{{ debugStore.debugPageState?.heaterTemperature }} ℃</span>
</div>
<div>
<bt-button
type="primary"
@ -261,7 +293,7 @@ const printerDoTest = () => {
气密性阀门模式：
</div>
<div class="debug-bw">
<el-select v-model="airLeakDetectTestMode" placeholder="请选择模式" style="width: 100%;" >
<el-select v-model="airLeakDetectTestMode" placeholder="请选择模式" style="width: 100%;">
<el-option label="消毒模式" value="disinfection" />
<el-option label="加压模式" value="inflation" />
<el-option label="泄露测试模式" value="leakTest" />
@ -313,9 +345,6 @@ const printerDoTest = () => {
<div class="debug-label">
风机控制：
</div>
<div class="debug-bw">
<span class="debug-text">{{ debugStore.debugPageState?.blowerCurrent }} A</span>
</div>
<div>
<bt-button
type="primary"
@ -378,8 +407,8 @@ const printerDoTest = () => {
margin-bottom: 4vh;
}
.debug-env {
display: grid;
grid-template-columns: repeat(2, 1fr);
display: flex;
align-items: flex-start;
}
.debug-left-lh{
display: flex;
@ -392,8 +421,50 @@ const printerDoTest = () => {
}
}
}
.debug-env-right {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-left: 20rem;
align-items: flex-start;
}
.env-content-p {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
}
.debug-env-right .env-content-p {
display: flex;
align-items: center;
}
.debug-env-right .env-content-p .label {
display: inline-block;
width: 6.5rem; /* 根据最长文字“加热片电流”微调 */
text-align: right;
margin-right: 0.75rem;
}
.debug-env-right .env-content-p .value {
display: flex;
align-items: baseline;
gap: 0.2rem;
}
.debug-env-right .env-content-p .debug-text {
font-weight: bold;
color: #2892F3;
}
.debug-env-right .env-content-p .unit {
font-size: 0.9em;
}
.env-lh{
height: 10vh;
height: 5vh;
}
.debug-bw{
width: 10vw;

Write Preview
Loading…
Cancel
Save