🚧

src/stores/remote-info-store.ts

@@ -1,8 +1,10 @@
 import { defineStore } from 'pinia'
+import type { RemoteItem } from '@/utils/public-interface'
 
 export const useRemoteStore = defineStore('remote', {
   state: () => {
     return {
+      remoteTasks: [] as Array<RemoteItem>,
       currentRemote: {
         
       } as any
@@ -11,6 +13,12 @@ export const useRemoteStore = defineStore('remote', {
   // 也可以这样定义
   // state: () => ({ count: 0 })
   actions: {
+    getRemoteTasks() {
+      return this.remoteTasks
+    },
+    setRemoteTasks(e: Array<RemoteItem>) {
+      this.remoteTasks = e
+    },
     getCurrentRemote() {
       return this.currentRemote
     },

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

@@ -0,0 +1,14 @@
+<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/remote-manage.vue

@@ -1,6 +1,10 @@
 <template>
     <div class="remote-manage-page">
         <div class="header-box">
+            <div class="thumbnail" @click="viewThumbnail">
+              <el-icon><Menu /></el-icon>
+              <span>缩略图</span>
+            </div>
             <div class="task-btn-item" v-for="(item, index) in remoteTask" :key="'task-' + index"
                 :class="{ 'connecting': item.patientName || item.patientCode, 'alarm': item.dataAlarm }"
                 @click="editTask(item, index)" @dblclick="toRemoteControl(item, index)">
@@ -21,7 +25,7 @@
 
 <script lang='ts' setup>
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { setRemoteTasks, 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'
@@ -71,6 +75,11 @@ function initRemoteTask() {
     }
 }
 
+const viewThumbnail = () => {
+  router.push({
+    path: '/remote-manage/remote-thumbnail'
+  })
+}
 // 打开任务连接弹窗
 const editTask = (item: RemoteItem, index: number) => {
     item.index = index
@@ -129,13 +138,47 @@ const breakRemote = (e: RemoteItem) => {
     overflow-y: auto;
     overflow-x: hidden;
     .header-box {
+      position: relative;
         width: 100%;
         min-height: 180px;
         background: white;
         padding: 0 30px;
         display: flex;
         flex-wrap: wrap;
-
+        .thumbnail {
+          cursor: pointer;
+          position: absolute;
+          width: 50px;
+          height: 50px;
+          top: 0;
+          right: 0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background: #f8b300;
+          border-top-left-radius: 25px;
+          border-bottom-left-radius: 25px;
+          box-shadow: -3px 3px 5px 0 rgba(black, .2);
+          font-size: 16px;
+          color: white;
+          transition: all .1s;
+          .el-icon {
+            font-size: 1.4em;
+          }
+          &>span {
+            display: none;
+            margin-left: 5px;
+            line-height: 1;
+            white-space: nowrap;
+          }
+          &:hover {
+            width: 100px;
+            transition: all .3s;
+            &>span {
+              display: block;
+            }
+          }
+        }
         .task-btn-item {
             cursor: pointer;
             flex-grow: 1;

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

@@ -49,13 +49,20 @@
 
 <script lang='ts' setup>
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { useRemoteStore } from '@/stores/remote-info-store'
 import RemoteItem from './part/remote-item.vue'
 import MessageItem from './part/message-item.vue'
 
+const route = useRoute()
 const router = useRouter()
 
+// 路由初始化后执行
+router.isReady().then(() => {
+    console.log(route)
+})
+
+
 const openRemote = (num: number) => {
   console.log(num)
 }