fix:修改大屏数据，布局

web

10 天以前 53dea912dd48c7435720cd9e83e3da53f0a45109

 src/views/screen/pumpInfo/index.vue

@@ -1,169 +1,175 @@
<script setup>
import {computed, onMounted, ref} from 'vue'
import {getPumpData} from '@/api/screen/index.js'

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,
        }
const list = ref([])

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 => {
            item['facilityName'] = res.data[0].facilityName
        })
        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()
})
</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-t">{{item.facilityName}}</div>
            <div class="item-c">
                <div class="list">
                    <div class="lc">
                        <span class="name">运行时长</span>
                        <span class="val">{{item.data.longtime}}</span>
                <div class="allTime">
                    <div>{{index+1}}号泵总运行时长</div>
                    <div class="val">{{ item[`cB00${index+1}Time`] }}</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="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 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">正常</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">备用空开</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="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>
@@ -178,6 +184,10 @@
    align-items: center;
    justify-content: space-between;
    padding: 0 5rem;
    overflow-x: scroll;
    &::-webkit-scrollbar{
        display: none;
    }
    .item{
        width: 48%;
        height: 98%;
@@ -192,31 +202,53 @@
        &-c{
            height: calc(100% - 2rem);
            padding: 1rem;
            .list{
                height: 100%;
            .allTime{
                height: 10%;
                padding: 0 8rem;
                color: #fff;
                font-size: 1.5rem;
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                .lc{
                justify-content: space-between;
                align-items: center;
            }
            .pumbVal{
                height: 90%;
                padding-top: 5%;
                color: #fff;
                display: flex;
                .environment,
                .run{
                    height: 100%;
                    width: 50%;
                    padding: 0.75rem 0;
                    color: #fff;
                    font-size: 1.3rem;
                    .name{
                        display: inline-block;
                        width: 12rem;
                    font-size: 1.5rem;
                }
                .env-item{
                    height: 10%;
                    display: flex;
                    align-items: center;
                    div{
                        width: 50%;
                    }
                    .status{
                        display: inline-block;
                        width: 6rem;
                        color: #1ab394;
                    }
                    .val{
                        color: #1ab394;
                }
                .run{
                    padding-left: 1rem;
                    &-item{
                        height: 7.7%;
                        display: flex;
                        align-items: center;
                        div{
                            width: 50%;
                        }
                    }
                }
            }
        }
        .val{
            color: #22E195;
        }
        .error{
            color: red;
        }
    }
}
</style>