CMVR-BID/src/views/inspection/runTask/task-log.vue

<template>
    <div class="log-container" :style="{ 'height': height + 'px' }" ref="messageContainer">
        <div class="log" v-for="log, index in list">
            <div class="time">{{ formatDate(log.logTime) }}</div>
            <div class="context">{{ log.logContent }}</div>
        </div>
    </div>
</template>
<script setup>
import { formatDate } from "@/utils/index";
import { watch } from "vue";
const props = defineProps({
    list: {
        type: Array,
        default: () => []
    },
    height: {
        type: Number,
        default: 150
    }
})

const messageContainer = ref(null)

const SCROLL_DELAY = 100
const scrollToBottom = () => {
    console.log(123, messageContainer.value)
    nextTick(() => {
        setTimeout(() => {
            if (messageContainer.value) {
                console.log('messageContainer.value.scrollHeight', messageContainer.value.scrollHeight)
                messageContainer.value.scrollTop = messageContainer.value.scrollHeight
            }
        }, SCROLL_DELAY)
    })
}

watch(() => props.list, () => {
    scrollToBottom()
}, { deep: true })

onMounted(() => {
    scrollToBottom()
})

</script>
<style lang="scss" scoped>
.log-container {
    margin-top: 12px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 12px;

    .log {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;

        .time {
            color: #999;
            font-size: 14px;
        }

        .context {
            color: #333;
            font-size: 14px;
        }
    }
}
</style>