<script setup>
|
|
const list = [
|
{
|
name: '康妮一号泵房',
|
data: {
|
longtime: '1280天13小时59分',
|
shuijin: '正常',
|
ssll: '+10m³/h',
|
ljll: '1021m³',
|
ls: '10m/s',
|
qdnumber: '10次',
|
dianya: '15v',
|
dianliu: '15A',
|
power: '100w',
|
dianneng: '500kw·h',
|
onewater: '226m',
|
twowater: '426m',
|
adianya: '380v',
|
adianliu: '0.15A',
|
bdianya: '380v',
|
bdianliu: '0.15A',
|
cdianya: '380v',
|
cdianliu: '0.15A',
|
onepumpNumber: 10,
|
onepumpStatus: 1,
|
twopumpNumber: 10,
|
twopumpStatus: 0,
|
threepumpNumber: 10,
|
threepumpStatus: 0,
|
fourpumpNumber: 10,
|
fourpumpStatus: 0,
|
}
|
},
|
{
|
name: '康妮一号泵房',
|
data: {
|
longtime: '1280天13小时59分',
|
shuijin: '正常',
|
ssll: '+10m³/h',
|
ljll: '1021m³',
|
ls: '10m/s',
|
qdnumber: '10次',
|
dianya: '15v',
|
dianliu: '15A',
|
power: '100w',
|
dianneng: '500kw·h',
|
onewater: '226m',
|
twowater: '426m',
|
adianya: '380v',
|
adianliu: '0.15A',
|
bdianya: '380v',
|
bdianliu: '0.15A',
|
cdianya: '380v',
|
cdianliu: '0.15A',
|
onepumpNumber: 10,
|
onepumpStatus: 1,
|
twopumpNumber: 10,
|
twopumpStatus: 0,
|
threepumpNumber: 10,
|
threepumpStatus: 0,
|
fourpumpNumber: 10,
|
fourpumpStatus: 0,
|
}
|
}
|
]
|
|
</script>
|
|
<template>
|
<div class="info">
|
<div class="item" v-for="(item, index) in list" :key="index">
|
<div class="item-t">{{ item.name }}</div>
|
<div class="item-c">
|
<div class="list">
|
<div class="lc">
|
<span class="name">运行时长</span>
|
<span class="val">{{item.data.longtime}}</span>
|
</div>
|
<div class="lc">
|
<span class="name">水浸</span>
|
<span class="val">{{item.data.shuijin}}</span>
|
</div>
|
<div class="lc">
|
<span class="name">瞬时流量</span>
|
<span class="val">{{item.data.ssll}}</span>
|
</div>
|
<div class="lc">
|
<span class="name">累计流量</span>
|
<span class="val">{{item.data.ljll}}</span>
|
</div>
|
<div class="lc">
|
<span class="name">流 速</span>
|
<span class="val">{{item.data.ls}}</span>
|
</div>
|
<div class="lc">
|
<span class="name">启泵次数</span>
|
<span class="val">{{item.data.qdnumber}}</span>
|
</div>
|
<div class="lc">
|
<span class="name">水泵电压</span>
|
<span class="val">{{item.data.dianya}}</span>
|
</div>
|
<div class="lc">
|
<span class="name">水泵电流</span>
|
<span class="val">{{item.data.dianliu}}</span>
|
</div>
|
<div class="lc">
|
<span class="name">水泵功率</span>
|
<span class="val">{{item.data.power}}</span>
|
</div>
|
<div class="lc">
|
<span class="name">总 电 能</span>
|
<span class="val">{{item.data.dianneng}}</span>
|
</div>
|
<div class="lc">
|
<span class="name">1号泵组</span>
|
<span class="status">{{ !!item.data.onepumpStatus ? '开' : '关' }}</span>
|
<span class="val">{{item.data.onepumpNumber}}次</span>
|
</div>
|
<div class="lc">
|
<span class="name">1号泵组</span>
|
<span class="status">{{ !!item.data.twopumpStatus ? '开' : '关' }}</span>
|
<span class="val">{{item.data.twopumpNumber}}次</span>
|
</div>
|
<div class="lc">
|
<span class="name">1号泵组</span>
|
<span class="status">{{ !!item.data.threepumpStatus ? '开' : '关' }}</span>
|
<span class="val">{{item.data.threepumpNumber}}次</span>
|
</div>
|
<div class="lc">
|
<span class="name">1号泵组</span>
|
<span class="status">{{ !!item.data.fourpumpStatus ? '开' : '关' }}</span>
|
<span class="val">{{item.data.fourpumpNumber}}次</span>
|
</div>
|
<div class="lc">
|
<span class="name">1号水池液位</span>
|
<span class="val">{{item.data.onewater}}</span>
|
</div>
|
<div class="lc">
|
<span class="name">2号水池液位</span>
|
<span class="val">{{item.data.twowater}}</span>
|
</div>
|
<div class="lc">
|
<span class="name">市电供电A相电压</span>
|
<span class="val">{{item.data.adianya}}</span>
|
</div>
|
<div class="lc">
|
<span class="name">市电供电A相电流</span>
|
<span class="val">{{item.data.adianliu}}</span>
|
</div>
|
<div class="lc">
|
<span class="name">市电供电B相电压</span>
|
<span class="val">{{item.data.bdianya}}</span>
|
</div>
|
<div class="lc">
|
<span class="name">市电供电B相电流</span>
|
<span class="val">{{item.data.bdianliu}}</span>
|
</div>
|
<div class="lc">
|
<span class="name">市电供电C相电压</span>
|
<span class="val">{{item.data.cdianya}}</span>
|
</div>
|
<div class="lc">
|
<span class="name">市电供电C相电流</span>
|
<span class="val">{{item.data.cdianliu}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.info{
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 5rem;
|
.item{
|
width: 48%;
|
height: 98%;
|
background: url("@/assets/images_lc/info-bg.png") no-repeat;
|
background-size: 100% 100%;
|
&-t{
|
color: #fff;
|
background: url('@/assets/images_lc/title_font.png') no-repeat;
|
padding-left: 8%;
|
font-size: 1.2rem;
|
}
|
&-c{
|
height: calc(100% - 2rem);
|
padding: 1rem;
|
.list{
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
flex-wrap: wrap;
|
.lc{
|
width: 50%;
|
padding: 0.75rem 0;
|
color: #fff;
|
font-size: 1.3rem;
|
.name{
|
display: inline-block;
|
width: 12rem;
|
}
|
.status{
|
display: inline-block;
|
width: 6rem;
|
color: #1ab394;
|
}
|
.val{
|
color: #1ab394;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
