sagacloud-tenantslink-ipad/src/views/envmonitor/taiguv1/components/Curtain/CurtainMore.vue

<template>
    <div class="more-box">
        <div class="light-more-top">
            <div class="left">
                <div class="light-box">
                    <img
                        :src="curtainIcon"
                        alt=""
                    />
                </div>
            </div>
            <div class="right">
                <div
                    class="control_all"
                    :class="topActive ? 'active' : ''"
                    @click="handle('all',1,'开启中','EquipOnSet')"
                >{{ $t(`common.全开`) }}</div>
                <div
                    class="control_all"
                    :class="downActive ? 'active' : ''"
                    @click="handle('all',0,'关闭中','EquipOffSet')"
                >{{ $t(`common.全关`) }}</div>
            </div>
        </div>
        <div class="control_status">{{ controlStatus ? $t(`curtains.${controlStatus}`) : '' }}</div>
        <div class="light-bottom">
            <div
                class="item-box"
                v-for="(item, index) in childCurtains"
                :key="item.id"
            >
                <div class="name">{{ item.localName }}</div>
                <div class="control-box">
                    <div
                        class="control"
                        @click="handle('child',1,'开启中','EquipOnSet',item.id)"
                    >
                        <img :src="item.isActive && item.activeButton === 1 ? UpActiveIcon : UpUnActiveIcon" alt="">
                    </div>
                    <div
                        class="control"
                        @click="handle('child',2,'暂停中','StopSet',item.id)"
                    >
                        <img :src="item.isActive && item.activeButton === 2 ? StopActiveIcon : StopUnActiveIcon" alt="">
                    </div>
                    <div
                        class="control"
                        @click="handle('child',0,'关闭中','EquipOffSet',item.id)"
                    >
                        <img :src="item.isActive && item.activeButton === 0 ? DownActiveIcon : DownUnActiveIcon" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { httpSetEnv } from '@/apis/taiguv1';
import curtainIcon from '@/assets/taiguv1/svg/Curtain_card_active_icon.svg';
import DownActiveIcon from '@/assets/taiguv1/svg/down_active_icon.svg';
import DownUnActiveIcon from '@/assets/taiguv1/svg/down_icon.svg';
import StopActiveIcon from '@/assets/taiguv1/svg/stop_active_icon.svg';
import StopUnActiveIcon from '@/assets/taiguv1/svg/stop_icon.svg';
import UpActiveIcon from '@/assets/taiguv1/svg/up_active_icon.svg';
import UpUnActiveIcon from '@/assets/taiguv1/svg/up_icon.svg';
import { ref, watch } from "vue";
const props = defineProps({
    currentCurtains: {
        type: Array,
        default: () => []
    }
})
const childCurtains = ref([])
const controlStatus = ref('')
const topActive = ref(false)
const downActive = ref(false)
let timer = null // 添加timer变量
let btnTimer = null;
const setEnnv = (type,value,code,curentID )=>{
    const paramsData = []
    if (type === 'all') {
        childCurtains.value.forEach((item) => {
            paramsData.push({
                id:item.id,
                value,
                code
            })
        })
    }else{
        let paramsObj = {
            id:curentID,
            value,
            code
        }
        paramsData.push(paramsObj)
    }
    httpSetEnv(paramsData)
}
const handle = (type, status, name,code, curentID) => {
    controlStatus.value = name;
    // 清除之前的定时器
    if (timer) {
        clearTimeout(timer);
    }
    if (btnTimer) {
        clearTimeout(btnTimer);
    }
    // 设置新的定时器并保存引用
    timer = setTimeout(() => {
        controlStatus.value = '';
    }, 3000);
    if (type === 'all') {
        if (status === 1) {
            topActive.value = true;
        } else {
            downActive.value = true;
        }
        btnTimer = setTimeout(() => {
            topActive.value = false;
            downActive.value = false;
        }, 100);
        setEnnv(type,status,code )
    } else {
        setEnnv(type,status,code,curentID)
        childCurtains.value.forEach((item) => {

            if (item.id === curentID) {
                item.activeButton = status;
                item.isActive = true;
            } else {
                item.isActive = false;
                item.activeButton = null;
            }
        })
        btnTimer = setTimeout(() => {
            childCurtains.value.forEach(item => {
                item.isActive = false;
                item.activeButton = null;
            });
        }, 1000);
    }
};
watch(
   ()=>props.currentCurtains,
   (newVal) => {
    childCurtains.value = JSON.parse(JSON.stringify(newVal));
    childCurtains.value.forEach(item=>{
        item.isActive = false
        item.activeButton = null
    })  
    },
   { immediate: true } 
)

</script>
<style lang="scss" scoped>
.more-box {
    .light-more-top {
        display: flex;
        align-items: center;
        .left {
            margin-right: 36px;
            .light-box {
                width: 110px;
                height: 110px;
                background: rgba(255, 255, 255, 0.4);
                border-radius: 50%;
                text-align: center;
                margin-right: 27px;
                img {
                    width: 36px;
                    height: 36px;
                    margin: 0 auto;
                    margin-top: 37px;
                }
            }
        }
        .right {
            height: 92px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .control_all {
                display: flex;
                width: 100px;
                height: 40px;
                padding: 8px 12px;
                justify-content: center;
                align-items: center;
                gap: 12px;
                border-radius: 50px;
                background: #e1e1df;
                box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
                color: #001428;
                text-align: center;
                font-family: "PingFang SC";
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px; /* 128.571% */
                letter-spacing: 0.56px;
            }
            .control_all.active {
                background: rgba(255, 255, 255, 1);
                box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
            }
        }
    }
    .control_status {
        margin-top: 12px;
        width: 110px;
        height: 22px;
        color: var(--Blue, #001428);
        text-align: center;
        /* Chi/Body Large */
        font-family: "PingFang SC";
        font-size: 16px;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
        letter-spacing: 0.32px;
    }
    .light-bottom {
        margin-top: 36px;
        .item-box {
            display: flex;
            width: 300px;
            height: 84px;
            padding: 20px 23px 24px 24px;
            justify-content: space-between;
            align-items: center;
            /* card shadow */
            box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.05);
            border-radius: 24px 24px 44px 24px;
            background: rgba(255, 255, 255, 0.2);
            margin-bottom: 12px;
            .name {
                //styleName: Chi/Body Regular;
                color: var(--Blue, #001428);
                font-family: "PingFang SC";
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                letter-spacing: 0.28px;
            }
            .control-box {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .control {
                    display: flex;
                    width: 36px;
                    height: 36px;
                    justify-content: center;
                    align-items: center;
                    margin-left: 10px;
                    // img{
                    //     width: 17px;
                    //     height: 17px; 
                    // }
                   
                }
            }
        }
        .light-box-active {
            background: rgba(255, 255, 255, 0.6);
        }
    }
}
</style>
<