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, i) in remoteWsStore.remoteTasks[index]?.log || []" :key="i">-->
			<li v-for="(item, i) in remoteWsStore.getRemoteLog(index) || []" :key="i">
				<span>{{ dateFormater('yyyy-MM-dd HH:mm:ss', item.time) }}</span>
				<span>{{ item.taskName }}</span>
				<span>{{ item.state }}</span>
			</li>
		</ul>
	</div>
</template>

<script lang='ts' setup>
import {ref} from 'vue';
import {useRemoteWsStore} from "@/stores/remote-ws-store";
import {dateFormater} from "@/utils/date-util";

const remoteWsStore = useRemoteWsStore();
const props = withDefaults(defineProps<{
		index: number
	}>(),
	{
		index: () => 0
	})
const listRef = ref()

defineExpose({
	scrollToBottom
})

function scrollToBottom() {
	// setTimeout(() => {
	// 	listRef.value.scrollTo({
	// 		top: listRef.value.scrollHeight,
	// 		behavior: 'smooth'
	// 	})
	// }, 0)
    setTimeout(() => {
        listRef.value.scrollTo({
            top: listRef.value.scrollHeight,
            behavior: 'smooth'
        });
    });
}
</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;
    height: $size*1;
    top: $size*0.3;
    //right: $size*0.5;
    //font-size: $size*0.7;
    margin-left: $size*0.3;
    line-height: $size*1;
    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>