supervision-plugin-vue/src/components/countdown.vue

<template>
    <div v-if="timeVal > 0" class="success">
        <span class="mr-4">剩余</span>
        <span class="text">{{
            formatTimeText(timeVal)
        }}</span>
    </div>
    <div v-if="timeVal < 0" class="error">
        <span class="mr-4">超时</span>
        <span class="text">{{
            formatTimeText(-timeVal)
        }}</span>
    </div>
</template>
<script setup>
import { formatTimeText } from "@/utils/util";

const props = defineProps({
    time: {
        type: Number,
        default: 0
    }
})

const timeVal = ref(props.time)

watch(() => props.time, (val) => {
    timeVal.value = val;
    startTimeInterval()
})

let timer = 0;
startTimeInterval()
function startTimeInterval() {
    if (timeVal.value < 3600 && timeVal.value > -3600) {
        clearInterval(timer)
        timer = setInterval(() => {
            timeVal.value -= 1;
        }, 1000);
    } else {
        clearInterval(timer)
    }
}
</script>
<style lang="scss" scoped>
.success {
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
    text-align: center;

    .text {
        color: #128009;
    }
}

.error {
    background-color: #ff0000;
    color: #fff;
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
    border-radius: 20px;
    text-align: center;
}
</style>