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

<template>
    <div class="dustFallDevice">
        <div class="fall-left-box">
            <div class="box-c"></div>
            <div class="box-left-t">
                <div class="item-label">设备总数</div>
                <div class="item-val">{{ deviceTotal }}</div>
            </div>
            <div class="box-left-b">
                <div class="item-label">喷雾开启数</div>
                <div class="item-val">{{ pwTotal }}</div>
            </div>
            <div class="box-right-t">
                <div class="item-label">联网数量</div>
                <div class="item-val">{{ interTotal }}</div>
            </div>
            <div class="box-right-b">
                <div class="item-label">断网数量</div>
                <div class="item-val">{{ unInterTotal }}</div>
            </div>
        </div>
        <div class="fall-right-box">
            <div class="fall-table-head">
                <div class="fall-head-item" v-for="(item, index) in tabHeadList" :key="index">{{ item.title }}</div>
            </div>
            <div class="fall-table-content">
                <vue3-seamless-scroll hover-stop="true" :list="tabContentList" :hover="true" :step="0.15"
                    class="seamless-warp">
                    <div class="fall-content-item" v-for="(item, ind) in tabContentList" :key="ind">
                        <span class="content-item-val">{{ `${ind + 1}` }}</span>
                        <span class="content-item-val">{{ item.deviceName }}</span>
                        <span class="content-item-val">{{ item.stateConn }}</span>
                        <span class="content-item-val">{{ item.stateSpray }}</span>
                    </div>
                </vue3-seamless-scroll>



            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps, watch } from 'vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'

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 []
        }
    }
})

//table头
let tabHeadList = reactive([
    { title: '编号' },
    { title: '名称' },
    { title: '连接状态' },
    { title: '喷雾状态' },
])
//table content
let tabContentList = ref<any[]>([])

watch(() => props.pwData, (newP, oldP) => {
    console.log(newP, 'newP------')
    if (newP.length != 0) {
        tabContentList.value = newP
    }
}, {
    immediate: true,
    deep: true
})


</script>

<style lang="less" scoped>
.dustFallDevice {
    display: flex;
    position: relative;
    justify-content: space-between;
    width: 100%;
    height: 100%;

    .fall-left-box {
        position: relative;
        width: calc(50% - 15px);
        height: 100%;
        margin-right: 15px;

        .box-c {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 224px;
            height: 203px;
            transform: translate(-50%, -45%);
            background: url('../../../../../assets/images/dust/dusthome/left-box1.png') no-repeat center;
            background-size: 100% 100%;
        }

        .box-left-t {
            position: absolute;
            top: 0;
            left: 0;
            align-items: center;
            width: 80px;
            height: 81px;
            background: url('../../../../../assets/images/dust/dusthome/left-box2.png') no-repeat center;
            background-size: 100% 100%;


        }

        .box-left-b {
            position: absolute;
            top: 0;
            right: 0;
            width: 80px;
            height: 81px;
            background: url('../../../../../assets/images/dust/dusthome/left-box3.png') no-repeat center;
            background-size: 100% 100%;
        }

        .box-right-t {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 80px;
            height: 81px;
            background: url('../../../../../assets/images/dust/dusthome/left-box4.png') no-repeat center;
            background-size: 100% 100%;
        }

        .box-right-b {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 80px;
            height: 81px;
            background: url('../../../../../assets/images/dust/dusthome/left-box5.png') no-repeat center;
            background-size: 100% 100%;
        }

        .item-label {
            position: absolute;
            top: 2px;
            width: 100%;
            color: #9da5aa;
            font-size: 12px;
            text-align: center;
        }

        .item-val {
            position: absolute;
            top: 21px;
            width: 100%;
            color: #1fb3f7;
            font-family: douyuFont;
            font-size: 12px;
            text-align: center;
        }


    }

    .fall-right-box {
        width: 50%;
        height: 100%;

        .fall-table-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 32px;
            border-bottom: 2px solid #1f8bb2;
            background: linear-gradient(to bottom, rgb(12 40 55 / 30%), rgb(19 90 124 / 90%));

            .fall-head-item {
                display: flex;
                justify-content: center;
                color: #1fb3f7;

                &:nth-child(1) {
                    flex: 1;
                }

                &:nth-child(2) {
                    flex: 3;
                }

                &:nth-child(3) {
                    flex: 2;
                }

                &:nth-child(4) {
                    flex: 2;
                }
            }
        }

        .fall-table-content {
            position: relative;
            width: 100%;
            height: calc(100% - 32px);
            overflow: hidden;

            .seamless-warp {
                width: 100%;

                .fall-content-item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    height: 34px;

                    &:nth-child(odd) {
                        background-color: #0b202e;
                    }

                    &:nth-child(even) {
                        background-color: #0d3144;
                    }

                    .content-item-val {
                        display: flex;
                        justify-content: center;
                        color: #fff;

                        &:nth-child(1) {
                            flex: 1;
                        }

                        &:nth-child(2) {
                            flex: 3;

                        }

                        &:nth-child(3) {
                            flex: 2;
                            color: #00ff91;
                        }

                        &:nth-child(4) {
                            flex: 2;
                        }

                    }

                }
            }



        }
    }
}
</style>