baise-pc-vue/src/views/warningHome/components/timeLine.vue

<template>
    <div class="time-line" v-show="isShow">
        <div class="play" @click="handleChange">
            <img
                class="icon"
                :src="require(`@/assets/images/warningHome/${isCounting ? 'transparent-pause-icon.png' : 'transparent-play-icon.png'}`)"
                alt=""
            />
        </div>
        <div class="line">
            <div class="active-line" :style="{ width: numList[active] + '%' }"></div>
            <div :class="['dot-item', { mr: index === 6 }]" v-for="(item, index) in list" :key="index">
                <div :class="['dot', { active: active === index }]"></div>
                <span :class="{ text: active === index }">{{ item }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onDeactivated,computed ,watch, onActivated} from "vue";
import { useStore } from "vuex";
import eventBus from "@/api/eventBus";
const store = useStore();

const isShow = ref(true)
// const explainParams = computed(() => store.state.home.explainData);
// // 监听 periodId 的变化
// watch(() => explainParams.value, (newValue, oldValue) => {
//     isShow.value = false
//     if (newValue.id) {
//         isShow.value = true
//     }
// });
onActivated(()=>{
    restActive()
})
// 果园切换监听事件
eventBus.on("select:changeGarden", (e) => {
    restActive()
});

//监听测报面板高度变化
eventBus.on('report:shrink',(e)=>{
    if(e>=Math.round(0.7 * window.innerHeight)){
        clearTime();
        active.value = 0;
        isCounting.value = false;
        eventBus.emit("weatherTime:resetTime")
    }else{
        restActive()
    }
})

const active = ref(0);
const isCounting = ref(false);

const numList = [7, 21, 37, 52, 68, 84, 99];

function formatDateToMMDD(date) {
    const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1，并确保是两位数
    const day = String(date.getDate()).padStart(2, "0"); // 确保日期是两位数
    return `${month}/${day}`;
}

function getCurrentDateAndNextSixDaysMMDD() {
    const currentDate = new Date();
    const dates = [];

    for (let i = 0; i <= 6; i++) {
        const newDate = new Date(currentDate);
        newDate.setDate(currentDate.getDate() + i);
        const formattedDate = formatDateToMMDD(newDate);
        dates.push(formattedDate);
    }

    return dates;
}

const list = getCurrentDateAndNextSixDaysMMDD();

const incrementInterval = 3000; // 默认间隔3秒
const specialIncrementInterval = 3000; // 特殊间隔5秒

const timer = ref(null);
const incrementCount = (type) => {
    if (active.value === 6) {
        active.value = 0;
        eventBus.emit("weatherTime:changeTime",active.value)
    } else {
        if(type!=='original'){
            active.value += 1;
            eventBus.emit("weatherTime:changeTime",active.value)
        }
    }

    let time = incrementInterval;
    if (active.value === 0 || active.value === 6) {
        time = specialIncrementInterval;
    }
    timer.value = setTimeout(() => {
        if (isCounting.value) incrementCount();
    }, time);
};

const timerId = ref(null);
const handleChange = () => {
    clearTime()
    if (active.value === 0 || active.value === 6) {
        timerId.value = setTimeout(() => {
            if (isCounting.value) incrementCount();
        }, specialIncrementInterval);
    } else {
        incrementCount('original');
    }
    isCounting.value = !isCounting.value;
    if (isCounting.value) {
        eventBus.emit("weatherTime:changeTime", 0)
    }
};

onDeactivated(() => {
    clearTime();
});


//清除定时器
const clearTime = () => {
    if (timerId.value) {
        clearTimeout(timerId.value);
    }
    if (timer.value) {
        clearTimeout(timer.value);
    }
};

const restActive = () => {
    clearTime();
    active.value = 0;
    isCounting.value = false;
    handleChange();
};

eventBus.on("map_click_alarm", ({warningTypeId,factorId})=>{
  restActive()
})

defineExpose({ restActive });
</script>

<style lang="scss" scoped>
.time-line {
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 20px 20px;
    background: rgba(35, 35, 35, 0.6);
    border: 1px solid rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 20px;
    .play {
        display: flex;
        align-items: center;
        margin-right: 17px;
        .icon {
            width: 46px;
        }
    }
    .line {
        background: linear-gradient(30deg, #fff 0% , rgba(44, 44, 44,0.6) 100%);
        border-radius: 2px;
        width: 80%;
        height: 2px;
        display: flex;
        justify-content: space-between;
        position: relative;
        z-index: 2;
        position: relative;
        top: -4px;
        .active-line {
            background: linear-gradient(30deg, #eccd9b 0% ,#F3C11D 100%,);
            position: absolute;
            top: 0;
            left: 0;
            height: 2px;
            z-index: 1;
        }
        .dot-item {
            color: #fff;
            font-size: 16px;
            position: relative;
            z-index: 2;
            .dot {
                width: 8px;
                height: 8px;
                background: #E6E6E6;
                border-radius: 50%;
                margin: -2.2px 0 6px 14px;
                position: relative;
                &::after{
                    content: '';
                    position: absolute;
                    top: -2px;
                    left: -2px;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    border: 2px solid rgba(255,255,255,0.2);
                }
            }
            span {
                margin-left: 3px;
                letter-spacing: 0.5px;
            }
            .active {
                width: 6px;
                height: 6px;
                margin: -2px 0 5px 14px;
                position: relative;
                background: #F3C11D;
                
                &::after{
                    content: '';
                    position: absolute;
                    top: -2px;
                    left: -2px;
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    border: 2px solid rgba(243,193,29,0.2);
                }
            }
            .text {
                // color: #F3C11D;
                background: #ED9E1E;
                padding: 1px 10px;
                border-radius: 36px;
            }
        }
        .mr {
            margin-right: -12px;
        }
    }
}
</style>