Browse Source

蒸汽锅炉界面优化

meizhou
25604 4 weeks ago
parent
commit
e91b527cf9
  1. 82
      src/views/boilerSys/boilerMonitor/boilerMonitorDetails.vue

82
src/views/boilerSys/boilerMonitor/boilerMonitorDetails.vue

@ -66,6 +66,12 @@
{{ getStatusValue('DB611724') }} {{ getStatusValue('DB611724') }}
</div> </div>
</div> </div>
<div class="runtime-div">
<div>设备运行时长</div>
<div class="fire-text">
{{ formatToOneDecimal(getStatusValue('DB8296')/60) }}小时
</div>
</div>
<div class="other-div"> <div class="other-div">
<div class="other-li"> <div class="other-li">
<div>当前压力</div> <div>当前压力</div>
@ -84,6 +90,24 @@
<div class="mpa">{{ getStatusValue('DBW611602') }} Mpa</div> <div class="mpa">{{ getStatusValue('DBW611602') }} Mpa</div>
</div> </div>
</div> </div>
<div class="flow-other-div">
<div class="other-li">
<div>温度瞬值</div>
<div class="mpa">{{ getStatusValue('PLC1500_DB8300') }} </div>
</div>
<div class="other-li">
<div>压力瞬值</div>
<div class="mpa">{{ getStatusValue('PLC1500_DB8304') }} Mpa</div>
</div>
<div class="other-li">
<div>流量瞬值</div>
<div class="mpa">{{ getStatusValue('PLC1500_DB8308') }} t/h</div>
</div>
<div class="other-li">
<div>流量累计</div>
<div class="mpa">{{ getStatusValue('PLC1500_DB8320') }} t</div>
</div>
</div>
<div></div> <div></div>
<div class="air">空气</div> <div class="air">空气</div>
<div class="gas">燃气</div> <div class="gas">燃气</div>
@ -97,7 +121,7 @@
<img <img
src="../../../assets/images/boilerWork.gif" src="../../../assets/images/boilerWork.gif"
class="boilerWork" class="boilerWork"
:style="{ display: getStatusValue('DB611724') > 0 ? 'block' : 'none' }" :style="{ display: getStatusValue('DB611724') > 100 ? 'block' : 'none' }"
alt="" alt=""
/> />
<!-- 锅炉侧边水位 --> <!-- 锅炉侧边水位 -->
@ -108,13 +132,13 @@
<div class="mainValve">主阀</div> <div class="mainValve">主阀</div>
<img <img
class="mainValve-img" class="mainValve-img"
src="../../../assets/images/workValve.png" :src="getStatusValue('DBB611639') > 1 ? require('../../../assets/images/workValve.png') : require('../../../assets/images/stopValve.png')"
alt="" alt=""
/> />
<div class="auxiliaryValve">副阀</div> <div class="auxiliaryValve">副阀</div>
<img <img
class="auxiliaryValve-img" class="auxiliaryValve-img"
src="../../../assets/images/workValve.png" :src="getStatusValue('DBB611640') > 1 ? require('../../../assets/images/workValve.png') : require('../../../assets/images/stopValve.png')"
alt="" alt=""
/> />
<div class="fan-div"> <div class="fan-div">
@ -303,6 +327,19 @@ export default {
} }
}, },
methods: { methods: {
// Format number to one decimal place
formatToOneDecimal(value) {
if (value === null || value === undefined) {
return null;
}
const num = parseFloat(value);
if (isNaN(num)) {
return value;
}
return num.toFixed(1);
},
// Get status value from runDatas where mtNum = DB611658 // Get status value from runDatas where mtNum = DB611658
getStatusValue(mtNum) { getStatusValue(mtNum) {
if (!this.steamBoilerData.runDatas || !Array.isArray(this.steamBoilerData.runDatas)) { if (!this.steamBoilerData.runDatas || !Array.isArray(this.steamBoilerData.runDatas)) {
@ -630,7 +667,27 @@ export default {
align-items: center; align-items: center;
position: absolute; position: absolute;
top: 0.1rem; top: 0.1rem;
left: 8.6rem; left: 7.4rem;
.other-li {
display: flex;
flex-direction: row;
align-items: flex-end;
margin-bottom: 0.1rem;
.mpa {
color: #eb6912;
font-weight: bold;
margin-left: 0.2rem;
text-align: center;
}
}
}
.flow-other-div {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 0.1rem;
left: 9.2rem;
.other-li { .other-li {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -774,7 +831,20 @@ export default {
left: 2.3rem; left: 2.3rem;
.fire-text { .fire-text {
margin-top: 0.06rem; margin-top: 0.06rem;
color: #fff; color: #fa7217;
font-weight: bold;
}
}
.runtime-div {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 0.2rem;
left: 3.5rem;
.fire-text {
margin-top: 0.06rem;
color: #fa7217;
font-weight: bold; font-weight: bold;
} }
} }
@ -943,7 +1013,7 @@ export default {
} }
.port-open::before { .port-open::before {
background-color: blue; background-color: rgb(16, 184, 24);
} }
.port-close::before { .port-close::before {

Loading…
Cancel
Save