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

<template>
  <div class="message-item-part">
    <div class="tag-index">{{ index + 1 }}</div>
    <ul ref="listRef">
      <li v-for="(item, index) in logs" :key="index">
        <span>{{ dateFormater('HH:mm:ss', item.time) }}</span>
        <span>{{ item.title }}</span>
        <span>{{ item.state }}</span>
      </li>
    </ul>
  </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'

interface Props {
  index: number
  logs: Array<RemoteLogItem>
}
const props = withDefaults(defineProps<Props>(), {
  index: () => 0,
  logs: () => [] as Array<RemoteLogItem>
})

const listRef = ref()
const remoteTasks: any = ref([] as Array<RemoteItem>)

defineExpose({
  scrollToBottom,
})

remoteTasks.value = useRemoteStore().remoteTasks
// 监听 useRemoteStore() 值变化
// useRemoteStore().$subscribe((mutation: any, state: any) => {
//   console.log(mutation, state)
// })

function scrollToBottom() {
  setTimeout(() => {
    listRef.value.scrollTo({
      top: listRef.value.scrollHeight,
      behavior: 'smooth'
    })
  }, 0)
}
</script>

<style lang='scss' scoped>
$size: 20px;

.message-item-part {
  position: relative;
  width: 100%;
  height: 100%;
  box-shadow: 2px 2px $size*0.2 0 rgba(black, .2);
  .tag-index {
    position: absolute;
    width: $size*1.5;
    height: $size*1.5;
    top: $size*0.2;
    right: $size*0.5;
    font-size: $size*0.7;
    line-height: $size*1.5;
    text-align: center;
    color: white;
    background-color: $red;
    border-radius: 50%;
  }
  ul {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;

    li {
      width: 100%;
      padding: $size*0.2;
      line-height: 1;
      font-size: $size*0.6;
      color: red;

      span~span {
        margin-left: $size*0.2;
      }
    }
  }
}
</style>