rax-medical/src/views/remote-manage/remote-thumbnail.vue

<template>
	<el-scrollbar style="width: 100%;height: 100%;">
		<div class="remote-thumbnail-page">
			<div class="remote-box row1">
				<div class="remote-item" v-for="item in remoteTask.slice(0, 4)" :key="item.title" @click="openRemote(item)">
					<RemoteItemPart :ref="'remoteItemPartRef' + item.index" :index="item.index"
													@addLogAfter="addLogAfter"></RemoteItemPart>
				</div>
			</div>
			<div class="remote-box row2">
				<div class="left-box">
					<div class="remote-item" v-for="item in remoteTask.slice(4)" :key="item.title" @click="openRemote(item)">
						<RemoteItemPart :ref="'remoteItemPartRef' + item.index" :index="item.index"
														@addLogAfter="addLogAfter"></RemoteItemPart>
					</div>
				</div>
				<div class="right-box">
					<div class="message-title">异常信息</div>
					<div class="message-item" v-for="item in remoteTask" :key="'message-item' + item">
						<MessageItemPart ref="messageItemPartRef" :index="item.index"></MessageItemPart>
					</div>
				</div>
			</div>
		</div>
	</el-scrollbar>
</template>

<script lang='ts' setup>
import {onMounted, ref} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import RemoteItemPart from './part/remote-item-part.vue';
import MessageItemPart from './part/message-item-part.vue';
import {useRemoteWsStore} from "@/stores/remote-ws-store";

const route = useRoute();
const router = useRouter();
const messageItemPartRef = ref();
const remoteTask = ref([] as any);
const remoteWsStore = useRemoteWsStore();

onMounted(() => {
	remoteTask.value = remoteWsStore.remoteTasks;
})

const openRemote = (params: any) => {
	router.push('/remote-manage/remote-manage');
}
const addLogAfter = (index: number) => {
	messageItemPartRef.value[index].scrollToBottom()
}

</script>

<style lang='scss' scoped>
$size: 20px;
.remote-thumbnail-page {
  width: 1920px;
  height: 1010px;
  overflow: auto;
  .remote-box {
    width: 100%;
    height: 33.33%;
    display: flex;
    .remote-item {
      width: 25%;
      height: 100%;
      padding: $size*0.2;
    }
    &.row2 {
      height: 66.67%;
      .left-box {
        width: 75%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        .remote-item {
          width: 33.33%;
          height: 50%;
        }
      }
      .right-box {
        position: relative;
        width: 25%;
        height: 100%;
        padding: $size*0.2;
        padding-top: $size*0.2 + $size;
        display: flex;
        flex-wrap: wrap;
        .message-title {
          position: absolute;
          height: $size;
          top: $size*0.2;
          left: $size*0.2;
          right: $size*0.2;
          background-color: $red;
          text-align: center;
          font-size: $size*0.7;
          line-height: $size;
          color: white;
          font-weight: 600;
        }
        .message-item {
          width: 50%;
          height: 20%;
          padding: $size*0.2;
        }
      }
    }
  }
}
</style>