设备监控-实时数据顶部按钮组改为便携式设备所有tab显示

src/views/govern/device/control/analysisList/index.vue

@@ -1,9 +1,6 @@
 <!-- 解析列表 -->
 <template>
     <el-dialog v-model="dialogVisible" title="解析列表" width="70%" draggable @closed="close">
-        <!-- <div class="header_btn">
-            <el-button type="primary" size="small" @click="handleBack" :icon="ArrowLeft">返回</el-button>
-        </div> -->
         <TableHeader date-picker></TableHeader>
         <Table ref="tableRef" />
         <template #footer>
@@ -15,16 +12,19 @@
     </el-dialog>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, provide } from 'vue'
+import { ref, onMounted, provide, watch, onBeforeUnmount } from 'vue'
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import { ArrowLeft } from '@element-plus/icons-vue'
 const emit = defineEmits(['back'])
 const dialogVisible = ref(false)
+const height = ref(0)
+height.value = window.innerHeight < 1080 ? 180 : 400
+
 const tableStore: any = new TableStore({
     url: '/cs-device-boot/portableOfflLog/queryPage',
-    publicHeight: 210,
+    publicHeight: height.value,
     method: 'POST',
     column: [
         // { width: '60', type: 'checkbox', fixed: 'left' },
@@ -76,8 +76,28 @@ const open = () => {
 const close = () => {
     dialogVisible.value = false
 }
-const initTable = () => {}
-onMounted(() => {})
+const updateViewportHeight = async () => {
+    // height.value = window.innerHeight;
+    height.value = window.innerHeight < 1080 ? 180 : 400
+    tableStore.table.publicHeight = height.value
+    await tableStore.index()
+}
+
+onMounted(() => {
+    updateViewportHeight() // 初始化视口高度
+    window.addEventListener('resize', updateViewportHeight) // 监听窗口大小变化
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', updateViewportHeight) // 移除监听
+})
 defineExpose({ open })
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+::v-deep .el-dialog_body {
+    overflow-y: hidden !important;
+    .analysisTable {
+        height: 400px !important;
+    }
+}
+</style>