1. 将地图页面中的设备监测tab添加显示隐藏操作

src/utils/event/index.ts

@@ -42,7 +42,7 @@ export function triggerWindowResize() {
 }
 
 export function setDivHeight(e: MouseEvent, minHeight, scroll, scrollClientMaxHeight = 175, scrollClientHeight = 100) {
-  if (e && e.target && e.target['className'] && e.target['className'].includes('input')) {
+  if (e && e.target && e.target['className'] && (e.target['className'].includes('input') || e.target['className'].includes('table-hide-icon'))) {
     return;
   }
   e.preventDefault();

src/views/vent/monitorManager/deviceMonitor/components/device/index.vue

@@ -46,10 +46,12 @@
         </div>
       </div>
     </div>
-    <div  class="tabs-box bottom-tabs-box" :class="{'table-hide': tableShow, 'table-show': !tableShow }" @mousedown="setDivHeight($event, 230, scroll, 0)" id="monitorBox">
+    <div  class="tabs-box bottom-tabs-box" :class="{'table-hide': !tableShow, 'table-show': tableShow }" style="height:290px;" @mousedown="setDivHeight($event, 230, scroll, 0)" id="monitorBox">
       <div :style="`padding: 5px; height: ${scroll.y + 100}px`">
-        <div class="to-small" @click="toHome"></div>
-        
+        <div class="to-small">
+          <div class="to-home" @click="toHome"></div>
+          <FullscreenOutlined v-if="!tableShow" class="table-show-icon" @click="toHide"/>
+        </div>
         <div class="device-button-group" v-if="deviceList.length > 0">
           <!-- 关联设备 -->
           <div class="device-button" :class="{ 'device-active': deviceActive == device.deviceType }"
@@ -72,8 +74,7 @@
           </div>
         </div>
         <div class="table-hide-icon" @click="toHide">
-          <FullscreenExitOutlined />  
-          隐藏
+          <FullscreenExitOutlined style="font-size: 18px;"/>  
         </div>
         <!-- 是人员定位表单代码，由于放在tab中，表格对已知刷新，导致表单数据也在刷寻，造成输入一半的中文时会清空输入框的内容，导致的输入不上数据 -->
         <div v-if="deviceType.startsWith('location')" class="location-form" style="position: absolute; z-index: 9999; top: 50px;">
@@ -90,7 +91,6 @@
             <Input style="width: 200px;" v-model:value="locationForm.stationname" />
           </div>
         </div>
-        <div style="color: #fff;">{{ deviceType }}</div>
         <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange" id="tabsBox">
           <a-tab-pane key="1" tab="实时监测">
             <template
@@ -332,7 +332,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, ComponentOptions, shallowRef, reactive, defineProps, watch } from 'vue'
-import { SendOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue';
+import { SendOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
 import { list, getDeviceList, getDeviceTypeList, devPosition, getDepartmentInfo,getExportUrl } from './device.api'
 import AlarmHistoryTable from '../../../comment/AlarmHistoryTable.vue';
 import HistoryTable from '../../../comment/HistoryTable.vue';
@@ -782,9 +782,14 @@ function toHome() {
 
 function toHide() {
   tableShow.value = !tableShow.value;
-  if(!tableShow.value){
-    document.getElementById('monitorBox').style.display = 'none';
-  }
+  document.getElementById("monitorBox").addEventListener("animationend", ()=>{
+    if(!tableShow.value){
+      document.getElementById('monitorBox').style.height = '0px';
+    }else{
+      document.getElementById('monitorBox').style.height = '290px';
+    }
+  });
+  
 }
 
 async function findTreeDataValue(obj) {
@@ -1268,31 +1273,41 @@ onUnmounted(() => {
   transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
 }
 .tabs-box{
-  // height: 290px;
+  height: 290px;
 }
+
 .bottom-tabs-box {
   position: relative;
   .tabs-box {
     width: calc(100% - 12px) !important;
     bottom: 3px !important;
   }
-
+  
   .to-small {
-    width: 60px;
-    height: 60px;
-    background: url('/@/assets/images/vent/home/tohome.png') no-repeat center;
-    background-size: auto;
     position: absolute;
     top: -65px;
     right: 36px;
-    border-radius: 10px;
-    padding: 8px;
-    backdrop-filter: blur(10px);
-    background-color: rgba(45, 86, 137, 0.418);
-
-    &:hover {
-      background-color: rgba(79, 104, 134, 0.418);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .to-home{
+      width: 60px;
+      height: 60px;
+      background: url('/@/assets/images/vent/home/tohome.png') no-repeat center;
+      background-size: auto;
+      padding: 8px;
+      &:hover {
+        background-color: rgba(79, 104, 134, 0.418);
+      }
     }
+    .table-show-icon{
+      width: 30px;
+      height: 30px;
+      font-size: 30px;
+      color: #fff;
+      margin-left: 10px;
+    }
+    
   }
 
   .device-button-group {
@@ -1465,16 +1480,18 @@ onUnmounted(() => {
   }
 }
 .table-hide{
+  height: 0px;
   animation-name: tableHide;
   /* 持续时间 */
   animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
+  transition: all 1s ;
 }
 .table-show{
+  height: 290px;
   animation-name: tableShow;
   /* 持续时间 */
   animation-duration: 1s;
-  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
+  transition: all 1s ;
 }
 .location-form{
   display: flex;