优化驾驶舱页面

src/views/pqs/cockpit/realTimeData/index.vue

@@ -21,21 +21,30 @@
                     @load="onIframeLoad"
                 ></iframe>
             </div>
-
-            <el-card class="bottom-container" style="min-height: 230px">
-                <!-- <div class="buttonBox">
+        </div>
+        <div class="bottom-container">
+            <el-button
+                type="primary"
+                :icon="show ? 'el-icon-ArrowDownBold' : 'el-icon-ArrowUpBold'"
+                @click="show = !show"
+                style="width: 100%"
+            >
+                事件列表
+            </el-button>
+            <!-- <div class="buttonBox">
                     <el-button type="primary" icon="el-icon-Aim" @click="reset">复位</el-button>
                 </div> -->
-                <div class="tableBox">
-                    <!-- <Table ref="tableRef"  height="100%"></Table> -->
-                    <vxe-table border auto-resize height="100%" :data="tableData" ref="tableRef">
+           
+            <transition name="table-fade">
+                <div class="tableBox" v-if="show">
+                    <vxe-table border auto-resize height="230px" :data="tableData" ref="tableRef">
                         <vxe-column type="seq" title="序号" align="center" width="80px"></vxe-column>
                         <vxe-column field="date" align="center" title="时间" width="200px"></vxe-column>
                         <vxe-column field="name" align="center" title="监测点名" width="200px"></vxe-column>
                         <vxe-column field="address" align="center" title="事件描述"></vxe-column>
                     </vxe-table>
                 </div>
-            </el-card>
+            </transition>
         </div>
     </div>
 </template>
@@ -49,7 +58,7 @@ import { mainHeight } from '@/utils/layout'
 // const props = defineProps<{
 //     project: { id: string; name: string } | null
 // }>()
-
+const show = ref(false)
 const prop = defineProps({
     width: { type: [String, Number] },
     height: { type: [String, Number] },
@@ -57,7 +66,9 @@ const prop = defineProps({
     timeValue: { type: Object }
 })
 
-const tableData = ref()
+const tableData = ref([
+   
+])
 
 // 在父页面中添加事件监听器
 window.addEventListener('message', function (event) {
@@ -195,10 +206,10 @@ const sendKeysToIframe = (keyList: string[]) => {
     flex: 3.5;
 }
 
-:deep(.el-card__body) {
-    display: flex;
-    padding: 10px;
-    height: 100%;
+.bottom-container {
+    position: absolute;
+    width: 100%;
+    bottom: 0px;
 
     .buttonBox {
         display: flex;
@@ -212,4 +223,39 @@ const sendKeysToIframe = (keyList: string[]) => {
         width: 100%;
     }
 }
+.tableBox {
+    /* 必须：初始高度/overflow 配合动画 */
+    overflow: hidden;
+    /* 与表格高度一致，保证展开后高度正确 */
+    height: 230px;
+    // margin-top: 10px;
+}
+
+/* 过渡动画核心样式 */
+.table-fade-enter-from,
+.table-fade-leave-to {
+    /* 关闭时：高度收为0 + 透明度0 */
+    height: 0;
+    opacity: 0;
+}
+
+.table-fade-enter-to,
+.table-fade-leave-from {
+    /* 展开时：高度恢复 + 透明度1 */
+    height: 230px;
+    opacity: 1;
+}
+
+/* 动画过渡时长 + 曲线（可自定义） */
+.table-fade-enter-active,
+.table-fade-leave-active {
+    transition: all 0.3s ease;
+    /* 防止动画过程中出现滚动条 */
+    overflow: hidden;
+}
+
+/* 解决动画结束后瞬间闪回的问题 */
+.table-fade-enter-active {
+    transition-delay: 0.05s;
+}
 </style>