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

<template>
    <div
        class="volumn-box"
        :class="isOpen ? 'active' : ''"
        @click="searchMore"
    >
        <div class="top">
            <img
                :src="
          parseImgUrl('taiguv1/envmonitor/', isOpen ? 'active/curtain.svg' : 'curtain.svg')
        "
                alt=""
            />
        </div>
        <div class="bottom">
            <div class="text">窗帘</div>
            <div class="status">{{ controlStatus }}</div>
            <div class="control-box">
                <div
                    v-for="item in controlName"
                    :key="item.value"
                >
                    <div
                        class="control-item"
                        :class="item.isActive ? 'active' : ''"
                        @click.stop="handle(item.value, item.status)"
                    >{{ item.name }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { parseImgUrl } from "@/utils";
import { onBeforeUnmount, onMounted, ref } from "vue";
const controlStatus = ref('')
const controlName = ref([
    { isActive: false, name: '上', value: 1, status: '开启中' },
    { isActive: false, name: '停', value: 2, status: '暂停中' },
    { isActive: false, name: '下', value: 0, status: '关闭中' },
])
const isOpen = ref(true)
const isActive = ref(false)
const emit = defineEmits(['showMore'])
const searchMore = () => {
    emit("showMore", 'curtain', true);
}
let timer = null // 添加timer变量
let btnTimer = null;
const handle = (value, status) => {
    controlStatus.value = status;
    if (btnTimer) {
        clearTimeout(btnTimer);
    }
    controlName.value.forEach(item => {
        if (item.value === value) {
            item.isActive = true;
            btnTimer = setTimeout(() => {
                item.isActive = false;
            }, 100);
        } else {
            item.isActive = false;
        }


    });

    if (timer) {
        clearTimeout(timer);
    }
    // 设置新的定时器并保存引用
    timer = setTimeout(() => {
        controlStatus.value = '';
    }, 3000);

}
onBeforeUnmount(() => { });
onMounted(() => { });

</script>
<style lang="scss" scoped>
.volumn-box {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    width: 100%;
    height: 100%;
    border-radius: 24px 24px 44px 24px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(40px);
    box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
    .top {
        display: flex;
        justify-content: space-between;
        img {
            width: 30px;
        }
    }
    .bottom {
        // margin-top: 18vh;
        // margin-top: 109px;
        .text {
            //styleName: Chi/Body Large;
            font-family: PingFang SC;
            font-size: 16px;
            font-weight: 300;
            line-height: 22px;
            letter-spacing: 0.02em;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            color: rgba(255, 255, 255, 1);
            padding-bottom: 2px;
        }
        .status {
            //styleName: Chi/Body XS;
            height: 15px;
            margin-bottom: 10px;
            color: var(--Grey, #74808d);
            font-family: "PingFang SC";
            font-size: 11px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            letter-spacing: 0.22px;
        }
        .control-box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            .control-item {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 36px;
                height: 36px;
                border-radius: 60px;
                opacity: 0.6;
                background: var(--White-White-40, rgba(255, 255, 255, 0.4));
                backdrop-filter: blur(30px);
                font-family: Jost;
                font-size: 16px;
                color: var(--Blue, #001428);
                font-style: normal;
                font-weight: 300;
                line-height: normal;
            }
            .control-item.active {
                border-radius: 60px;
                opacity: 1;
                box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
                color: #000;
            }
        }
    }
    .switch-btn {
        width: 50px !important;
        height: 28px !important;
        border: none;
    }
}
.active {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(40px);
    box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);

    .bottom {
        .text {
            color: rgba(0, 20, 40, 1);
        }
        .status {
            color: rgba(116, 128, 141, 1);
        }
    }
}
</style>
<style lang="scss">
.volumn-box {
    .van-switch__node {
        background: rgba(255, 255, 255, 0.6);
        width: 24px;
        height: 24px;
        top: 0.33vh;
    }
    .van-switch--on.switch-btn {
        .van-switch__node {
            transform: translate(calc(50px - 28px)) !important;
        }
    }
    .van-switch--on {
        background: linear-gradient(
            95.5deg,
            #99282b 21.44%,
            #a95459 84.95%
        ) !important;
        .van-switch__node {
            background: #fff !important;
        }
    }
    .van-loading__spinner {
        color: $elActiveColor !important;
    }

    .van-switch__loading {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        line-height: 1;
    }

    .van-switch--disabled {
        opacity: 0.5;
    }
}
</style>