vent-forewarn-micro/src/views/vent/dust/dustHome/components/dustFallDevice.vue

<template>
    <div class="dustFallDevice">
        <div class="fall-left-box">
            <div class="box-left-t">
                <img src="../../../../../assets/images/dust/dusthome/sbzs.png" class="item-icon"  alt="">
                <div class="item-label">设备总数</div>
                <div class="item-val">{{ deviceTotal }}</div>
            </div>
            <div class="box-left-b">
                <img src="../../../../../assets/images/dust/dusthome/pwkqs.png" class="item-icon"  alt="">
                <div class="item-label">喷雾开启数</div>
                <div class="item-val">{{ pwTotal }}</div>
            </div>
            <div class="box-right-t">
                <img src="../../../../../assets/images/dust/dusthome/lwsl.png" class="item-icon"  alt="">
                <div class="item-label">联网数量</div>
                <div class="item-val">{{ interTotal }}</div>
            </div>
            <div class="box-right-b">
                <img src="../../../../../assets/images/dust/dusthome/dwsl.png" class="item-icon"  alt="">
                <div class="item-label">断网数量</div>
                <div class="item-val">{{ unInterTotal }}</div>
            </div>
        </div>
       
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps, watch } from 'vue'

let props = defineProps({
    deviceTotal: {
        type: Number,
        default: 0
    },
    pwTotal: {
        type: Number,
        default: 0
    },
    interTotal: {
        type: Number,
        default: 0
    },
    unInterTotal: {
        type: Number,
        default: 0
    },
    pwData: {
        type: Array,
        default: () => {
            return []
        }
    }
})



</script>

<style lang="less" scoped>
.dustFallDevice {
    position: relative;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    background: url('../../../../../assets/images/dust/dusthome/img-8.png') no-repeat center;
    background-size: auto 100%;

    .fall-left-box {
        position: relative;
        width: 100%;
        height: 100%;

        .box-left-t {
            display: flex;
            position: absolute;
            top: 10px;
            left: 30px;
            flex-direction: column;
            align-items: center;
            justify-content:flex-start;
            width: 100px;
            height: 105px;
            background: url('../../../../../assets/images/dust/dusthome/img-9.png') no-repeat center;
            background-size: 100% 100%;


        }

        .box-left-b {
            display: flex;
            position: absolute;
            top: 10px;
            right: 30px;
            flex-direction: column;
            align-items: center;
            justify-content:flex-start;
            width: 100px;
            height: 105px;
            background: url('../../../../../assets/images/dust/dusthome/img-9.png') no-repeat center;
            background-size: 100% 100%;
        }

        .box-right-t {
            display: flex;
            position: absolute;
            bottom: 10px;
            left: 30px;
            flex-direction: column;
            align-items: center;
            justify-content:flex-start;
            width: 100px;
            height: 105px;
            background: url('../../../../../assets/images/dust/dusthome/img-9.png') no-repeat center;
            background-size: 100% 100%;
        }

        .box-right-b {
            display: flex;
            position: absolute;
            right: 30px;
            bottom: 10px;
            flex-direction: column;
            align-items: center;
            justify-content:flex-start;
            width: 100px;
            height: 105px;
            background: url('../../../../../assets/images/dust/dusthome/img-9.png') no-repeat center;
            background-size: 100% 100%;
        }

        .item-icon{
            width: 30px;
            height: 30px;
            margin-bottom: 12px;
        }

        .item-label {
            width: 100%;
            margin-bottom: 20px;
            color: #fff;
            font-size: 12px;
            text-align: center;
        }

        .item-val {
            width: 100%;
            color: #009BFF;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
        }
    }
}
</style>