rax-medical/src/views/remote-manage/part/message-part.vue

<template>
    <div class="message-part">
        <div class="title">
            <span>消息通知</span>
        </div>
        <div class="content">
            <el-timeline>
                <el-timeline-item v-for="(item, index) in activities" :key="index" :timestamp="dateFormater('yyyy-MM-dd HH:mm:ss', item.time)"
                    :class="{ 'alarm': item.state === '连接失败' }">
                    {{ item.title + ' ' + item.state }}
                </el-timeline-item>
            </el-timeline>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { dateFormater } from '@/utils/date-util'

interface ActivitiesItem {
    time: Date
    title: string
    state: string
}

const activities: any = ref([] as Array<ActivitiesItem>)

defineExpose({
    setData,
})

function setData(e: ActivitiesItem) {
    activities.value.push(e)
}
</script>

<style lang='scss' scoped>
.message-part {
    width: 100%;
    height: 100%;
    border: 1px solid $border-color;

    .title {
        width: 100%;
        height: 40px;
        font-size: 20px;
        text-align: center;
        line-height: 40px;
        font-weight: 600;
        color: white;
        background: $main-color;
    }

    .content {
        width: 100%;
        height: calc(100% - 100px);
        margin-top: 40px;
        padding: 0 20px;
        overflow-x: hidden;
        overflow-y: auto;

        :deep(.el-timeline-item) {
            color: $main-color;

            .el-timeline-item__content,
            .el-timeline-item__timestamp {
                color: inherit;
            }

            &.alarm {
                color: red;
                .el-timeline-item__node {
                    background: red;
                }
            }
        }
    }
}</style>