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

<template>
    <el-progress
        type="dashboard"
        :percentage="percentage"
        :stroke-width="16"
        :width="236"
        :color="colors"
        class="timer"
        v-if="time >= 0"
    >
        <div class="text-center">
            <div class="time-val">
                <template v-if="state.day !== 0">
                    <span class="number">{{ state.day }}</span>
                    <span>天</span>
                </template>
                <template v-if="state.hour !== 0">
                    <span class="number">{{ state.hour }}</span>
                    <span>时</span>
                </template>
                <template v-if="state.minute !== 0">
                    <span class="number">{{ state.minute }}</span>
                    <span>分</span>
                </template>
                <template v-if="state.second !== 0">
                    <span class="number">{{ state.second }}</span>
                    <span>秒</span>
                </template>
            </div>
            <div class="tips">剩余处理时间</div>
            <div class="tips mt-8" style="font-size: 12px" v-if="extensionDays > 0">延期{{ extensionDays }}天</div>
        </div>
    </el-progress>
    <div v-else class="countdown-container_danger flex center v-center column">
        <div class="time-val">
            <template v-if="state.day !== 0">
                <span class="number">{{ state.day }}</span>
                <span>天</span>
            </template>
            <template v-if="state.hour !== 0">
                <span class="number">{{ state.hour }}</span>
                <span>时</span>
            </template>
            <template v-if="state.minute !== 0">
                <span class="number">{{ state.minute }}</span>
                <span>分</span>
            </template>
            <template v-if="state.second !== 0">
                <span class="number">{{ state.second }}</span>
                <span>秒</span>
            </template>
        </div>
        <div>已超时</div>
        <div class="mt-8 text-small" v-if="extensionDays > 0">延期{{ extensionDays }}天</div>
    </div>
</template>
<script setup>
const colors = [
    { color: "#F30000", percentage: 30 },
    { color: "#E56D2B", percentage: 60 },
    { color: "#2B45E5", percentage: 100 },
];

const props = defineProps({
    time: {
        type: Number,
        default: 0,
    },
    maxTime: {
        type: Number,
        default: 100,
    },
    extensionDays: {
        type: Number,
        default: 0
    }
});
const emit = defineEmits(["update:time"]);

const state = reactive({
    day: 0,
    hour: 0,
    minute: 0,
    second: 0,
});
const percentage = computed(() => {
    if (props.maxTime === 0) {
        return 0;
    }
    const val = parseInt(props.time / props.maxTime * 100);
    return val === 0 ? 1 : val;
});

watch(
    () => props.time,
    (val) => {
        updateState(val > 0 ? val : -val);
    }
);

function updateState(val) {
    state.day = Math.floor(val / (60 * 60 * 24));
    state.hour = Math.floor(val / (60 * 60)) % 24;
    if (state.day === 0) {
        state.minute = Math.floor(val / 60) % 60;
    } else {
        state.minute = 0;
    }
    if (state.day === 0 && state.hour === 0) {
        state.second = Math.floor(val) % 60;
    } else {
        state.second = 0;
    }
}

let timer;
onMounted(() => {
    console.log("onMounted");
    updateState(props.time);
    if (props.time < 3600 && props.time > -3600) {
        clearInterval(timer);
        timer = setInterval(() => {
            emit("update:time", props.time - 1);
        }, 1000);
    }
});

onUnmounted(() => {
    console.log("onUnmounted");
});
</script>
<style lang="scss" scoped>
.time-val {
    color: #999;
    margin-top: 20px;
    vertical-align: bottom;
    margin-bottom: 18px;
    span {
        font-size: 18px;
        line-height: 1;
    }
    .tips {
        font-size: 14px;
        color: #333;
    }
    .number {
        font-size: 60px;
        font-weight: 700;
        color: var(--primary-color);
    }
}
.tips {
    font-size: 14px;
    color: #333;
}
.countdown-container_danger {
    background: linear-gradient(180deg, #ff7158 0%, #f40000 100%);
    border: 4px solid #ffcdcd;
    color: #fff;
    border-radius: 11px;
    box-sizing: border-box;
    margin-bottom: 20px;
    height: 190px;
    width: 100%;
    .time-val {
        color: #fff;
        .number {
            color: #fff;
        }
    }
}
</style>