代码提交，远程管理消息通知待处理

src/assets/css/variable.scss

@@ -4,6 +4,7 @@
     --el-font-size-base: 16px;
 }
 $main-color: #006080;
+$red: #ea3323;
 $border-color: #EBEEF5;
 $border1-color: #E4E7ED;
 $border2-color: #DCDFE6;

src/stores/remote-info-store.ts

@@ -1,13 +1,11 @@
 import { defineStore } from 'pinia'
-import type { RemoteItem } from '@/utils/public-interface'
+import type { RemoteItem, RemoteLogItem } from '@/utils/public-interface'
 
 export const useRemoteStore = defineStore('remote', {
   state: () => {
     return {
       remoteTasks: [] as Array<RemoteItem>,
-      currentRemote: {
+      currentRemote: {} as RemoteItem
-        
-      } as any
     }
   },
   // 也可以这样定义
@@ -19,11 +17,27 @@ export const useRemoteStore = defineStore('remote', {
     setRemoteTasks(e: Array<RemoteItem>) {
       this.remoteTasks = e
     },
+    setRemoteLog(obj: RemoteLogItem, index: number) {
+      if(this.remoteTasks[index]) {
+        const len = this.remoteTasks[index].log.length
+        const maxLen = 20
+        if(len > maxLen) this.remoteTasks[index].log.splice(0, len - maxLen)
+        this.remoteTasks[index].log.push(obj)
+      }
+    },
     getCurrentRemote() {
       return this.currentRemote
     },
-    setCurrentRemote(e: object) {
+    setCurrentRemote(e: RemoteItem) {
       this.currentRemote = e
+    },
+    setCurrentRemoteLog(obj: RemoteLogItem) {
+      if(this.currentRemote.log) {
+        const len = this.currentRemote.log.length
+        const maxLen = 20
+        if(len > maxLen) this.currentRemote.log.splice(0, len - maxLen)
+        this.currentRemote.log.push(obj)
+      }
     }
   },
 })

src/utils/public-interface.ts

@@ -3,16 +3,6 @@ export interface MenuItem {
     path: string
 }
 
-export interface RemoteItem {
-    isRemote: boolean
-    dataAlarm: boolean
-    title: string
-    serverUser: string
-    patientName: string
-    patientCode: string
-    index: number
-}
-
 export interface MenuListItem {
     id: string | number
     menuName: string
@@ -22,3 +12,31 @@ export interface MenuListItem {
     type: '菜单' | '按钮'
     children?: Array<MenuListItem>
 }
+
+export interface RemoteLogItem {
+  time: Date
+  title: string
+  state: string
+}
+export interface RemoteItem {
+  isRemote: boolean // 服务器连接状态
+  dataAlarm: boolean // 是否异常
+  title: string // 连接名称
+  serverUser: string // 服务器用户名
+  patientName: string // 病人姓名
+  patientCode: string // 病人身份证号
+  index: number
+  log: Array<RemoteLogItem>
+}
+export interface PatientInfoItem {
+  name: string // 病人名称
+  code: string // 住院号
+  time: Date // 手术时间
+  state: boolean // 手术状态 false 正常 true 异常
+  BIS: number
+  SBP: number
+  SPO2: number
+  DBP: number
+  HR: number
+  TEMP: number
+}

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

@@ -0,0 +1,90 @@
+<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() {
+  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.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>

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

@@ -1,80 +0,0 @@
-<template>
-    <div class="message-item">
-      
-      <ul>
-        <li v-for="(item, index) in activities" :key="num + '-' + index">
-          <span>{{ 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 { dateFormater } from '@/utils/date-util'
-
-interface ActivitiesItem {
-    time: Date
-    title: string
-    state: string
-}
-
-const props = defineProps({
-    num: String
-})
-
-const activities: any = ref([] as Array<ActivitiesItem>)
-
-defineExpose({
-    setData,
-})
-
-function setData(e: ActivitiesItem) {
-    activities.value.push(e)
-}
-</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>

src/views/remote-manage/part/message-part.vue

@@ -5,8 +5,9 @@
     </div>
     <div class="content">
       <el-timeline>
-                <el-timeline-item v-for="(item, index) in activities" :key="index" :timestamp="dateFormater('yyyy-MM-dd HH:mm:ss', item.time)"
+        <el-timeline-item v-for="(item, index) in currentRemote.log || []" :key="index"
-                    :class="{ 'alarm': item.state === '连接失败' }">
+          :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>
@@ -16,22 +17,23 @@
 
 <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 ActivitiesItem {
-    time: Date
-    title: string
-    state: string
-}
-
-const activities: any = ref([] as Array<ActivitiesItem>)
 
 defineExpose({
   setData,
 })
 
-function setData(e: ActivitiesItem) {
+const remoteStore = useRemoteStore()
-    activities.value.push(e)
+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>
 
@@ -70,6 +72,7 @@ function setData(e: ActivitiesItem) {
 
       &.alarm {
         color: red;
+
         .el-timeline-item__node {
           background: red;
         }

src/views/remote-manage/part/remote-item-part.vue

@@ -0,0 +1,371 @@
+<template>
+  <div class="remote-item-part">
+    <div class="title">
+      <span>{{ remoteTask.title || '远程控制' }}</span>
+    </div>
+    <div class="content mini" :class="{ 'is-total': remoteTask.isRemote }">
+      <div class="left-box">
+        <div class="info-box">
+          <div class="row-item">
+            <span class="label">病人名称</span>
+            <span class="input-value">{{ patientInfo.name }}</span>
+          </div>
+          <div class="row-item">
+            <span class="label">住院号</span>
+            <span class="input-value">{{ patientInfo.code }}</span>
+          </div>
+          <div class="row-item">
+            <span class="label">手术时间</span>
+            <span class="input-value">{{ patientInfo.time && dateFormater('yyyy-MM-dd HH:mm:ss', patientInfo.time)
+            }}</span>
+          </div>
+          <div class="row-item">
+            <span class="label">手术状态</span>
+            <span class="tag-value" :class="{ 'normal': !patientInfo.state }">正常</span>
+            <span class="tag-value" :class="{ 'alarm': patientInfo.state }">异常</span>
+          </div>
+        </div>
+        <div class="row-item" :class="{ 'alarm': patientInfo.BIS < 40 || patientInfo.BIS > 60 }">
+          <span class="label">BIS</span>
+          <span class="value">{{ patientInfo.BIS }}</span>
+        </div>
+        <div class="row-item" :class="{ 'alarm': patientInfo.SBP < 90 || patientInfo.SBP > 120 }">
+          <span class="label">SBP</span>
+          <span class="value">{{ patientInfo.SBP }}<span class="unit">mmHg</span></span>
+        </div>
+        <div class="row-item">
+          <span class="label">SPO2</span>
+          <span class="value">{{ patientInfo.SPO2 }}</span>
+        </div>
+        <div class="row-item yellow" :class="{ 'alarm': patientInfo.DBP < 60 || patientInfo.DBP > 90 }">
+          <span class="label">DBP</span>
+          <span class="value">{{ patientInfo.DBP }}<span class="unit">mmHg</span></span>
+        </div>
+        <div class="row-item yellow" :class="{ 'alarm': patientInfo.HR < 50 || patientInfo.HR > 80 }">
+          <span class="label">HR</span>
+          <span class="value">{{ patientInfo.HR }}<span class="unit">次/分</span></span>
+        </div>
+        <div class="row-item yellow">
+          <span class="label">TEMP</span>
+          <span class="value">{{ patientInfo.TEMP }}</span>
+        </div>
+      </div>
+      <div class="center-box">
+        <img src="@/assets/imgs/main_body_intact.png">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, onBeforeUnmount, reactive, ref, toRefs, watch } from 'vue'
+import type { RemoteItem, PatientInfoItem, RemoteLogItem } from '@/utils/public-interface'
+import { useRemoteStore } from '@/stores/remote-info-store'
+import { dateFormater } from '@/utils/date-util'
+import { getDataAlarmState } from '@/static-data/core'
+
+interface Props {
+  remoteTask: RemoteItem
+}
+const props = withDefaults(defineProps<Props>(), {
+  remoteTask: () => ({} as RemoteItem)
+})
+
+const emit = defineEmits(['addLogAfter'])
+
+let timer = 0
+const patientInfo = ref({} as PatientInfoItem)
+
+onMounted(() => {
+  clearInterval(timer)
+  // 连接成功执行查询
+  if (props.remoteTask.isRemote) {
+    timer = setInterval(() => {
+      initData()
+    }, 2000)
+  }
+})
+onBeforeUnmount(() => {
+  // 页面卸载后清楚定时器
+  console.log('~~~~~~~~~~~~~~~')
+  clearInterval(timer)
+})
+
+function initData() {
+  const obj = {
+    name: props.remoteTask.patientName,
+    code: '',
+    time: new Date(),
+    state: false,
+    BIS: Number((Math.random() * 100).toFixed(2)),
+    SBP: Number((Math.random() * 100).toFixed(2)),
+    SPO2: Number((Math.random() * 100).toFixed(2)),
+    DBP: Number((Math.random() * 100).toFixed(2)),
+    HR: Number((Math.random() * 100).toFixed(2)),
+    TEMP: Number((Math.random() * 100).toFixed(2))
+  }
+  const alarms = {
+    BIS: getDataAlarmState(obj.BIS, 'BIS'),
+    SBP: getDataAlarmState(obj.SBP, 'SBP'),
+    SPO2: getDataAlarmState(obj.SPO2, 'SPO2'),
+    DBP: getDataAlarmState(obj.DBP, 'DBP'),
+    HR: getDataAlarmState(obj.HR, 'HR'),
+    TEMP: getDataAlarmState(obj.TEMP, 'TEMP')
+  }
+
+  if (alarms.BIS) addLog('脑电双频指数')
+  if (alarms.SBP) addLog('收缩率')
+  if (alarms.SPO2) addLog('氧饱和度')
+  if (alarms.DBP) addLog('舒张压')
+  if (alarms.HR) addLog('心率')
+  if (alarms.TEMP) addLog('体温')
+
+  patientInfo.value = obj
+
+  function addLog(title: string) {
+    obj.state = true
+    useRemoteStore().setRemoteLog({
+      time: new Date(),
+      title,
+      state: '异常'
+    }, props.remoteTask.index)
+    emit('addLogAfter', props.remoteTask.index)
+  }
+}
+
+</script>
+
+<style lang='scss' scoped>
+$size: 20px;
+
+.remote-item-part {
+  cursor: pointer;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border: 1px solid $border-color;
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: transparent;
+    transition: all .6s;
+    z-index: 1;
+  }
+  &:hover {
+    &::after {
+      background-color: rgba(black, .1);
+      transition: all .6s;
+    }
+  }
+
+  .title {
+    position: relative;
+    width: 100%;
+    height: $size;
+    font-size: $size*0.7;
+    text-align: center;
+    line-height: $size;
+    font-weight: 600;
+    color: white;
+    background: $main-color;
+  }
+
+  .content {
+    width: 100%;
+    height: calc(100% - #{$size});
+    padding: $size*0.5;
+    display: flex;
+    justify-content: space-between;
+
+    .common-box {
+      width: 30%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      align-items: center;
+    }
+
+    .left-box {
+      @extend .common-box;
+
+      .label {
+        background: $main-color;
+      }
+    }
+
+    .center-box {
+      @extend .common-box;
+
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+
+    .right-box {
+      @extend .common-box;
+
+      .label {
+        background: #f8b300;
+      }
+    }
+
+    .row-item {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+
+      .label {
+        flex-shrink: 0;
+        width: 100%;
+        height: $size;
+        color: white;
+        font-size: $size*0.6;
+        line-height: $size;
+        text-align: center;
+        border-radius: 5px;
+      }
+    }
+
+    .info-box,
+    .row-item .value {
+      display: none;
+    }
+
+    &.is-total {
+
+      .info-box,
+      .row-item .value {
+        display: block;
+      }
+
+      .label {
+        width: calc(50% - $size*0.5);
+      }
+
+      .value {
+        width: 50%;
+        height: $size;
+        border-width: 1px;
+        border-style: solid;
+        text-align: center;
+        border-radius: 5px;
+        color: $main-color;
+        border-color: $main-color;
+        font-size: $size*0.7;
+        line-height: $size;
+        font-weight: 600;
+
+        .unit {
+          font-size: $size*0.6;
+          font-family: 400;
+        }
+      }
+
+      .right-box .value {
+        color: #f8b300;
+        border-color: #f8b300;
+      }
+
+      .row-item.alarm {
+        .label {
+          background: red;
+        }
+
+        .value {
+          color: red;
+          border-color: red;
+        }
+      }
+
+      .info-box {
+        width: 100%;
+
+        .row-item {
+          padding: $size*0.5 0;
+          height: $size;
+          justify-content: flex-start;
+          align-items: center;
+
+          .label {
+            width: $size*3;
+            height: $size;
+            background: transparent;
+            color: $main-color;
+            font-size: $size*0.6;
+            line-height: $size;
+            font-weight: 600;
+            text-align: left;
+          }
+
+          .input-value {
+            width: 100%;
+            height: $size;
+            line-height: $size;
+            font-size: $size*0.6;
+            color: $main-color;
+            border-bottom: 1px solid $border2-color;
+          }
+
+          .tag-value {
+            margin-left: $size*0.5;
+            padding: 0 $size*0.5;
+            height: $size;
+            line-height: $size;
+            font-size: $size*0.7;
+            color: white;
+            font-weight: 600;
+            background: $border2-color;
+            border-radius: 8px;
+
+            &.normal {
+              background: $main-color;
+            }
+
+            &.alarm {
+              background: red;
+            }
+          }
+        }
+      }
+    }
+
+    &.mini {
+      padding: $size;
+
+      .left-box {
+        width: 50%;
+      }
+
+      .center-box {
+        width: 50%;
+      }
+
+      &.is-total {
+        .left-box {
+          .info-box {
+            display: block;
+            flex-shrink: 0;
+          }
+
+          .row-item.yellow {
+            .label {
+              background: #f8b300;
+            }
+
+            .value {
+              color: #f8b300;
+              border-color: #f8b300;
+            }
+          }
+        }
+      }
+
+    }
+  }
+}</style>

src/views/remote-manage/part/remote-item.vue

@@ -1,14 +0,0 @@
-<template>
-  <div>
-
-  </div>
-</template>
-
-<script lang='ts' setup>
-import { onMounted, reactive, ref, toRefs, watch } from 'vue'
-
-</script>
-
-<style lang='scss' scoped>
-
-</style>

src/views/remote-manage/part/remote-part.vue

@@ -113,26 +113,14 @@
 </template>
 
 <script lang='ts' setup>
-import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { onMounted, onBeforeUnmount, reactive, ref, toRefs, watch } from 'vue'
 import { dateFormater } from '@/utils/date-util'
 import { useRemoteStore } from '@/stores/remote-info-store';
-import type { RemoteItem } from '@/utils/public-interface'
+import type { RemoteItem, PatientInfoItem } from '@/utils/public-interface'
-
-interface PatientInfoItem {
-    name: string // 病人名称
-    code: string // 住院号
-    time: Date // 手术时间
-    state: boolean // 手术状态 false 正常 true 异常
-    BIS: number
-    SBP: number
-    SPO2: number
-    DBP: number
-    HR: number
-    TEMP: number
-}
 
 const emit = defineEmits(['breakRemote'])
 
+let timer = 0
 const mediaMini800 = ref(false)
 const remoteItem = ref<RemoteItem>({} as RemoteItem)
 const patientInfo = ref({} as PatientInfoItem)
@@ -143,6 +131,12 @@ defineExpose({
     initData
 })
 
+onBeforeUnmount(() => {
+  // 页面卸载后清楚定时器
+  console.log('~~~~~~~~~~~~~~~')
+  clearInterval(timer)
+})
+
 window.addEventListener('resize', () => {
     mediaMini800.value = Boolean(window.innerWidth < 801)
 });
@@ -150,9 +144,16 @@ window.addEventListener('resize', () => {
 function initData(e?: any) {
     if(e) remoteItem.value = e
     const obj = e || {}
-    patientInfo.value.state = e.dataAlarm
+    patientInfo.value.state = obj.dataAlarm
     patientInfo.value.name = obj.patientName || ''
     patientInfo.value.code = 'XXXXXX'
+    clearInterval(timer)
+    timer = setInterval(() => {
+      getData()
+    }, 2000)
+}
+
+function getData() {
   patientInfo.value.time = new Date()
   patientInfo.value.BIS = Math.ceil(Math.random() * 100)
   patientInfo.value.SBP = Math.ceil(Math.random() * 100)

src/views/remote-manage/remote-manage.vue

@@ -25,7 +25,7 @@
 
 <script lang='ts' setup>
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
-import { setRemoteTasks, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { useRemoteStore } from '@/stores/remote-info-store'
 import type { RemoteItem } from '@/utils/public-interface'
 import RemoteDialog from './part/remote-dialog.vue'
@@ -49,11 +49,13 @@ function resetRemoteTaskItem(e: RemoteItem) {
         serverUser: '',
         patientName: '',
         patientCode: '',
-        index: e.index
+        index: e.index,
+        log: []
     }
 }
 function initRemoteTask() {
-    remoteTask.value = []
+    remoteTask.value = useRemoteStore().remoteTasks
+    if(remoteTask.value.length < 1) {
       while (remoteTask.value.length < 10) {
           const obj = {
               isRemote: false, // 连接状态
@@ -62,7 +64,8 @@ function initRemoteTask() {
               serverUser: '', // 服务器用户名
               patientName: '', // 病人名称
               patientCode: '', // 病人身份证
-            index: remoteTask.value.length
+              index: remoteTask.value.length,
+              log: []
           }
           if (remoteTask.value.length < 3) {
               obj.isRemote = true
@@ -73,6 +76,12 @@ function initRemoteTask() {
           if (remoteTask.value.length == 1) obj.dataAlarm = true
           remoteTask.value.push(obj)
       }
+      useRemoteStore().setRemoteTasks(remoteTask.value)
+      const remoteStore = useRemoteStore().currentRemote
+      if (!remoteStore.index) {
+        useRemoteStore().$patch({currentRemote: remoteTask.value[0]})
+      }
+    }
 }
 
 const viewThumbnail = () => {
@@ -105,10 +114,9 @@ const confirmRemote = (e: RemoteItem) => {
         time: new Date(),
         title: e.title,
         state: '连接成功'
-    })
+    }, e.index)
     remoteTask.value[e.index] = e // 状态设置为可连接
     remotePartRef.value.initData(e)
-    useRemoteStore().setCurrentRemote(e)
 }
 // 连接失败
 const errorRemote = (e: RemoteItem) => {
@@ -116,7 +124,7 @@ const errorRemote = (e: RemoteItem) => {
         time: new Date(),
         title: e.title,
         state: '连接失败'
-    })
+    }, e.index)
 }
 // 断开连接
 const breakRemote = (e: RemoteItem) => {
@@ -126,7 +134,7 @@ const breakRemote = (e: RemoteItem) => {
         time: new Date(),
         title: e.title,
         state: '断开连接'
-    })
+    }, e.index)
 }
 </script>
 
@@ -148,18 +156,18 @@ const breakRemote = (e: RemoteItem) => {
         .thumbnail {
           cursor: pointer;
           position: absolute;
-          width: 50px;
+          width: 70px;
-          height: 50px;
+          height: 70px;
           top: 0;
           right: 0;
           display: flex;
           justify-content: center;
           align-items: center;
           background: #f8b300;
-          border-top-left-radius: 25px;
+          border-top-left-radius: 35px;
-          border-bottom-left-radius: 25px;
+          border-bottom-left-radius: 35px;
           box-shadow: -3px 3px 5px 0 rgba(black, .2);
-          font-size: 16px;
+          font-size: 20px;
           color: white;
           transition: all .1s;
           .el-icon {
@@ -172,7 +180,7 @@ const breakRemote = (e: RemoteItem) => {
             white-space: nowrap;
           }
           &:hover {
-            width: 100px;
+            width: 160px;
             transition: all .3s;
             &>span {
               display: block;

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

@@ -1,77 +1,114 @@
 <template>
+  <el-scrollbar style="width: 100%;height: 100%;">
     <div class="remote-thumbnail-page">
       <div class="remote-box row1">
-      <div class="remote-item">
+        <div class="remote-item" v-for="item in remoteTask.slice(0, 4)" :key="item.title" @click="openRemote(item)">
-        <RemoteItem ref="remoteItemRef1" @click="openRemote(1)"></RemoteItem>
+          <RemoteItemPart :ref="'remoteItemPartRef' + item.index" :remoteTask="item" @addLogAfter="addLogAfter"></RemoteItemPart>
-      </div>
-      <div class="remote-item">
-        <RemoteItem ref="remoteItemRef2" @click="openRemote(2)"></RemoteItem>
-      </div>
-      <div class="remote-item">
-        <RemoteItem ref="remoteItemRef3" @click="openRemote(3)"></RemoteItem>
-      </div>
-      <div class="remote-item">
-        <RemoteItem ref="remoteItemRef4" @click="openRemote(4)"></RemoteItem>
         </div>
       </div>
       <div class="remote-box row2">
         <div class="left-box">
-        <div class="remote-item">
+          <div class="remote-item" v-for="item in remoteTask.slice(4)" :key="item.title" @click="openRemote(item)">
-          <RemoteItem ref="remoteItemRef5" @click="openRemote(5)"></RemoteItem>
+            <RemoteItemPart :ref="'remoteItemPartRef' + item.index" :remoteTask="item" @addLogAfter="addLogAfter"></RemoteItemPart>
-        </div>
-        <div class="remote-item">
-          <RemoteItem ref="remoteItemRef6" @click="openRemote(6)"></RemoteItem>
-        </div>
-        <div class="remote-item">
-          <RemoteItem ref="remoteItemRef7" @click="openRemote(7)"></RemoteItem>
-        </div>
-        <div class="remote-item">
-          <RemoteItem ref="remoteItemRef8" @click="openRemote(8)"></RemoteItem>
-        </div>
-        <div class="remote-item">
-          <RemoteItem ref="remoteItemRef9" @click="openRemote(9)"></RemoteItem>
-        </div>
-        <div class="remote-item">
-          <RemoteItem ref="remoteItemRef10" @click="openRemote(10)"></RemoteItem>
           </div>
         </div>
         <div class="right-box">
-        <div class="message-item" v-for="item in 10" :key="'message-item' + item">
+          <div class="message-title">异常信息</div>
-          {{ item }}
+          <div class="message-item" v-for="item in remoteTask" :key="'message-item' + item">
-          <MessageItem></MessageItem>
+            <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 RemoteItem from './part/remote-item.vue'
+import type { RemoteItem } from '@/utils/public-interface'
-import MessageItem from './part/message-item.vue'
+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) => {
-const openRemote = (num: number) => {
+  useRemoteStore().setCurrentRemote(params)
-  console.log(num)
+  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: 1080px;
+  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>