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 currentRemote.log || []" :key="index"
          :timestamp="dateFormater('yyyy-MM-dd HH:mm:ss', item.time)"
          :class="{ 'alarm': item.state === '连接失败' || 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 type { RemoteLogItem, RemoteItem } from '@/utils/public-interface'
import { useRemoteStore } from '@/stores/remote-info-store'
import { dateFormater } from '@/utils/date-util'


defineExpose({
  setData,
})

const remoteStore = useRemoteStore()
const currentRemote = ref({} as RemoteItem)
currentRemote.value = useRemoteStore().currentRemote

function setData(e: RemoteLogItem, index: number) {
  remoteStore.setRemoteLog(e, index)
  remoteStore.setCurrentRemoteLog(e)
  remoteStore.$patch({currentRemote: remoteStore.remoteTasks[index]})
}
</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>