<script setup>
|
import {onMounted, ref, onUnmounted} from 'vue'
|
import {getPumpData} from '@/api/screen/index.js'
|
|
const list = ref([])
|
let timer = null
|
|
const gongdainStatus = (n1, n2, n3) => {
|
if ((n1 > 350 && n1 < 400) && (n2 > 350 && n2 < 400) && (n3 > 350 && n3 < 400)) {
|
return true
|
} else {
|
return false
|
}
|
}
|
|
const getData = () => {
|
let newArr = [{}, {}, {}, {}]
|
let hasPump = 0; // 最多四个泵，有几个泵就累加数字
|
getPumpData().then(res => {
|
newArr.forEach((item, index) => {
|
item['facilityName'] = res.data[0].facilityName + (index+1) +'号泵'
|
})
|
res.data[0].parameterVOList.forEach(el => {
|
if(el.parameterType === 0) { //公共数据
|
newArr.forEach(item => {
|
item['c'+el.columnsCode] = el.columnValue
|
})
|
} else if(el.parameterType === 1) {
|
if(hasPump < 1) {
|
hasPump = 1
|
}
|
newArr[0]['c'+el.columnsCode] = el.columnValue
|
} else if (el.parameterType === 2) {
|
if(hasPump < 2) {
|
hasPump = 2
|
}
|
newArr[1]['c'+el.columnsCode] = el.columnValue
|
} else if(el.parameterType === 3) {
|
if(hasPump < 3) {
|
hasPump = 3
|
}
|
newArr[2]['c'+el.columnsCode] = el.columnValue
|
} else if(el.parameterType === 4) {
|
hasPump = 4
|
newArr[3]['c'+el.columnsCode] = el.columnValue
|
}
|
})
|
list.value = newArr.splice(0,hasPump)
|
})
|
}
|
|
onMounted(() => {
|
getData()
|
// 定时3秒回调一次，更新数据
|
timer = setInterval(() => {
|
getData()
|
}, 5000)
|
})
|
|
onUnmounted(() => {
|
if(timer) {
|
clearInterval(timer)
|
}
|
})
|
</script>
|
|
<template>
|
<div class="info">
|
<div class="item" v-for="(item, index) in list" :key="index">
|
<div class="item-t">{{item.facilityName}}</div>
|
<div class="item-c">
|
<div class="allTime">
|
<div>{{index+1}}号泵累计运行时长</div>
|
<div class="val">{{ item[`cB00${index+1}TimeSum`] }}</div>
|
</div>
|
<div class="pumbVal">
|
<div class="environment">
|
<div class="env-item">
|
<div class="name">水浸状态</div>
|
<div :class="Number(item.cSQ) === 0 ? 'val' : 'error'">{{Number(item.cSQ) === 0 ? '正常' : '异常'}}</div>
|
</div>
|
<div class="env-item">
|
<div class="name">水池液位</div>
|
<div class="val">{{item.c1001}}cm</div>
|
</div>
|
<div class="env-item">
|
<div class="name">供电状态</div>
|
<div :class="gongdainStatus(Number(item.c2001A), Number(item.c2001B), Number(item.c2001C)) ? 'val' : 'error'">{{gongdainStatus(Number(item.c2001A), Number(item.c2001B), Number(item.c2001C)) ? '正常' : '异常'}}</div>
|
</div>
|
<div class="env-item">
|
<div class="name">A相电压</div>
|
<div class="val">{{ item.c2001A }}V</div>
|
</div>
|
<div class="env-item">
|
<div class="name">A相电流</div>
|
<div class="val">{{item.c2002A}}A</div>
|
</div>
|
<div class="env-item">
|
<div class="name">B相电压</div>
|
<div class="val">{{ item.c2001B }}V</div>
|
</div>
|
<div class="env-item">
|
<div class="name">B相电流</div>
|
<div class="val">{{ item.c2002B }}A</div>
|
</div>
|
<div class="env-item">
|
<div class="name">C相电压</div>
|
<div class="val">{{ item.c2001C }}V</div>
|
</div>
|
<div class="env-item">
|
<div class="name">C相电流</div>
|
<div class="val">{{ item.c2002C }}A</div>
|
</div>
|
<div class="env-item">
|
<div class="name">总 电 能</div>
|
<div class="val">{{ item.c2007 }}Kw·h</div>
|
</div>
|
</div>
|
<div class="run">
|
<div class="run-item">
|
<div class="name">工作状态</div>
|
<div :class="(item[`cB00${index+1}Start`] === '开' || item[`cB00${index+1}Run`] === '开') ? 'val' : 'error'">{{(item[`cB00${index+1}Start`] === '开' || item[`cB00${index+1}Run`] === '开') ? '启动' : '关闭'}}</div>
|
</div>
|
<div class="run-item">
|
<div class="name">运行状态</div>
|
<div :class="Number(item.c1012) < 0 ? 'error' : 'val'">{{Number(item.c1012) < 0 ? '吸水' : '排水'}}</div>
|
</div>
|
<div class="run-item">
|
<div class="name">瞬时流量</div>
|
<div class="val">{{Number(item.c1012)}}m³/h</div>
|
</div>
|
<div class="run-item">
|
<div class="name">控制状态</div>
|
<div class="val">{{item.cAuto === '关' ? '远程' : '自动'}}</div>
|
</div>
|
<div class="run-item">
|
<div class="name">流 速</div>
|
<div class="val">{{ Number(item.c1011) }}m/s</div>
|
</div>
|
<div class="run-item">
|
<div class="name">启泵次数</div>
|
<div class="val">{{Number(item[`cB00${index+1}StartNumber`]) + '次'}}</div>
|
</div>
|
<div class="run-item">
|
<div class="name">1号空开</div>
|
<div class="val">
|
<span style="margin-right: 2rem" :class="item.cQF1 === '开' ? 'val' : 'error'">{{item.cQF1 === '开' ? '开' : '关'}}</span>
|
<span>{{Number(item.cQF1Number) + '次'}}</span>
|
</div>
|
</div>
|
<div class="run-item">
|
<div class="name">2号空开</div>
|
<div class="val">
|
<span style="margin-right: 2rem" :class="item.cQF2 === '开' ? 'val' : 'error'">{{item.cQF2 === '开' ? '开' : '关'}}</span>
|
<span>{{Number(item.cQF2Number) + '次'}}</span>
|
</div>
|
</div>
|
<div class="run-item">
|
<div class="name">3号空开</div>
|
<div class="val">
|
<span style="margin-right: 2rem" :class="item.cQF3 === '开' ? 'val' : 'error'">{{item.cQF3 === '开' ? '开' : '关'}}</span>
|
<span>{{Number(item.cQF3Number) + '次'}}</span>
|
</div>
|
</div>
|
<div class="run-item">
|
<div class="name">备用空开</div>
|
<div class="val">
|
<span style="margin-right: 2rem" :class="item.cQF4 === '开' ? 'val' : 'error'">{{item.cQF4 === '开' ? '开' : '关'}}</span>
|
<span>{{Number(item.cQF4Number) + '次'}}</span>
|
</div>
|
</div>
|
<div class="run-item">
|
<div class="name">单次运行时长</div>
|
<div :class="item[`cB00${index+1}Time`].includes('时') ? 'error' : 'val'">{{ item[`cB00${index+1}Time`] }}</div>
|
</div>
|
<div class="run-item">
|
<div class="name">正向累计流量</div>
|
<div class="val">{{item.c1013}}m³</div>
|
</div>
|
<div class="run-item">
|
<div class="name">负向累计流量</div>
|
<div class="val">{{ item.c10130 }}m³</div>
|
</div>
|
</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;
|
overflow-x: scroll;
|
&::-webkit-scrollbar{
|
display: none;
|
}
|
.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;
|
.allTime{
|
height: 10%;
|
padding: 0 8rem;
|
color: #fff;
|
font-size: 1.5rem;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.pumbVal{
|
height: 90%;
|
padding-top: 5%;
|
color: #fff;
|
display: flex;
|
.environment,
|
.run{
|
height: 100%;
|
width: 50%;
|
font-size: 1.5rem;
|
}
|
.env-item{
|
height: 10%;
|
display: flex;
|
align-items: center;
|
div{
|
width: 50%;
|
}
|
}
|
.run{
|
padding-left: 1rem;
|
&-item{
|
height: 7.7%;
|
display: flex;
|
align-items: center;
|
div{
|
width: 50%;
|
}
|
}
|
}
|
}
|
}
|
.val{
|
color: #22E195;
|
}
|
.error{
|
color: red;
|
}
|
}
|
}
|
</style>
|
