lijianfu
/
eemcs_ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

添加热水锅炉静态页面

meizhou
selia-zx 2 months ago
parent
97f715ea6b
commit
ab72f8510c
2 changed files with 206 additions and 0 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. BIN
      src/assets/images/hotWater.png
  2. 206
      src/views/boilerSys/hotWaterBoiler/hotWaterBoilerDetails.vue

BIN
src/assets/images/hotWater.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

206
src/views/boilerSys/hotWaterBoiler/hotWaterBoilerDetails.vue
Unescape View File

@ -44,6 +44,104 @@
alt=""
/>
</div>
<div class="hotWater-div">
<div class="hotWater-li">
<div class="special-div one">
<div class="special-top">
<div class="special-title">
<div class="title-left">
<div>热水锅炉1</div>
</div>
</div>
</div>
<div class="hotWater">
<img
class="hotWater-img"
src="../../../assets/images/hotWater.png"
alt=""
/>
</div>
<div class="info">
<div class="hotWater-tem">
<div class="pump-data-li">
<div>出水温度:</div>
<div class="pump-data-text">29.7℃</div>
</div>
<div class="pump-data-li">
<div>回水温度:</div>
<div class="pump-data-text">29.7℃</div>
</div>
<div class="pump-data-li">
<div>炉水温度:</div>
<div class="pump-data-text">29.7℃</div>
</div>
<div class="pump-data-li">
<div>烟道温度:</div>
<div class="pump-data-text">29.7℃</div>
</div>
</div>
<div class="port-right">
<div class="port">
<div class="port-li port-open">大火控制信号发出</div>
<div class="port-li port-close">小伙控制信号发出</div>
<div class="port-li port-close">燃烧机电源</div>
</div>
<div class="bad-div">
故障信息:<span class="bad-text">炉水温度传感器故障</span>
</div>
</div>
</div>
</div>
</div>
<div class="hotWater-li">
<div class="special-div one">
<div class="special-top">
<div class="special-title">
<div class="title-left">
<div>热水锅炉1</div>
</div>
</div>
</div>
<div class="hotWater">
<img
class="hotWater-img"
src="../../../assets/images/hotWater.png"
alt=""
/>
</div>
<div class="info">
<div class="hotWater-tem">
<div class="pump-data-li">
<div>出水温度:</div>
<div class="pump-data-text">29.7℃</div>
</div>
<div class="pump-data-li">
<div>回水温度:</div>
<div class="pump-data-text">29.7℃</div>
</div>
<div class="pump-data-li">
<div>炉水温度:</div>
<div class="pump-data-text">29.7℃</div>
</div>
<div class="pump-data-li">
<div>烟道温度:</div>
<div class="pump-data-text">29.7℃</div>
</div>
</div>
<div class="port-right">
<div class="port">
<div class="port-li port-open">大火控制信号发出</div>
<div class="port-li port-close">小伙控制信号发出</div>
<div class="port-li port-close">燃烧机电源</div>
</div>
<div class="bad-div">
故障信息:<span class="bad-text">炉水温度传感器故障</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
@ -252,6 +350,114 @@ export default {
cursor: pointer;
}
}
.hotWater-div {
width: 100%;
padding: 0.2rem;
display: flex;
flex-direction: row;
align-content: stretch;
justify-content: space-between;
.hotWater-li {
width: 49%;
.hotWater {
width: 100%;
padding: 0.35rem 0.2rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.hotWater-img {
width: 6.4rem;
height: 3.5rem;
}
}
.info {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
padding: 0.3rem 0 0.4rem 0;
.hotWater-tem {
width: 27%;
background: #262f58;
border-radius: 0.1rem;
font-size: 0.16rem;
display: flex;
flex-direction: column;
.pump-data-li {
width: 100%;
padding: 0 0.3rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 0.2rem 0;
.pump-data-text {
color: #05d120;
font-weight: bold;
}
}
}
.port-right {
display: flex;
flex-direction: column;
padding: 0.25rem 0.5rem;
.port {
width: 3rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
// justify-content: space-between;
.port-li {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 100%;
font-size: 0.16rem;
margin-bottom: 0.2rem;
color: #c9c6c6;
position: relative;
padding-left: 0.25rem; /* 为伪元素留出空间 */
}
.port-open::before,
.port-close::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0.15rem;
height: 0.15rem;
border-radius: 50%;
border: 0.02rem solid white;
}
.port-open::before {
background-color: blue;
}
.port-close::before {
background-color: gray;
}
}
.bad-div {
margin-top: 0.2rem;
font-size: 0.16rem;
color: #db4d4d;
.bad-text {
margin-left: 0.1rem;
background: #5581c4;
border-radius: 0.1rem;
padding: 0.1rem;
color: #fff;
}
}
}
}
}
}
}
</style>
<style scoped>

Write Preview
Loading…
Cancel
Save