表格和图表自适应高度

wujingjing

2024-10-21 44367fcf62c12e6625d2d231086dfdb83d66b79c

 src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue

@@ -1,7 +1,7 @@
<!-- 昨日供水管网概况 -->
<template>
   <div class="w-full">
      <div class="flex mb-4 flex-wrap">
   <div class="w-full flex-column">
      <div class="flex mb-4 flex-wrap flex-0">
         <!-- TimeRange v-model 跟 @change 中的值会不一样，以@change 中为准 -->
         <template v-if="visibleParams && visibleParams.length > 0">
            <component
@@ -34,8 +34,14 @@
         <DisplayMode class="ml-auto" v-model="showMode" @change="displayModeChange" />
      </div>

      <RecordSetTable :data="tableData" v-if="tableIsShow" :key="tableKey" />
      <div v-show="!tableIsShow" :style="{ height: chartHeight }" v-resize="chartContainerResize" v-loading="chartLoading">
      <RecordSetTable :data="tableData" v-if="tableIsShow" :key="tableKey" :tableLimitHeight="tableLimitHeight" />
      <div
         v-show="!tableIsShow"
         :style="{ height: chartHeight }"
         :class="{ 'flex-auto': chartHeight == undefined }"
         v-resize="chartContainerResize"
         v-loading="chartLoading"
      >
         <div ref="chartRef"></div>
      </div>
   </div>
@@ -68,7 +74,6 @@
//       type: Object as PropType<RecordSet>,
//    },
// });

const emits = defineEmits<{
   (event: 'updateQuery', res: any): void;
}>();
@@ -85,12 +90,14 @@
   },
   chartHeight: {
      type: String,
      default: '20rem',
      required: false,
   },
}) as {
   data: any;
   summaryIndex: number;
};
const tableLimitHeight = props.chartHeight == undefined ? undefined : document.body.clientHeight * 0.7;

const chartLoading = ref(false);

const stepOptions = [