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" :logs="item.log" :index="item.index"></MessageItemPart>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useRemoteStore } from '@/stores/remote-info-store'
import type { RemoteItem } from '@/utils/public-interface'
import RemoteItemPart from './part/remote-item-part.vue'
import MessageItemPart from './part/message-item-part.vue'

const route = useRoute()
const router = useRouter()

const messageItemPartRef = ref()
const remoteTask = ref([] as Array<RemoteItem>)

remoteTask.value = useRemoteStore().getRemoteTasks()

// 路由初始化后执行
router.isReady().then(() => {
  console.log(route)
})

const openRemote = (params: RemoteItem) => {
  useRemoteStore().setCurrentRemote(params)
  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>