表格和图表自适应高度

wujingjing

2024-10-21 44367fcf62c12e6625d2d231086dfdb83d66b79c

 src/components/chat/chatComponents/summaryCom/SummaryCom.vue

@@ -1,22 +1,49 @@
<template>
   <div class="w-full space-y-3">
      <template v-if="data && data.length > 0">
      <template v-if="parsedData && parsedData.length > 0">
         <component
            v-for="(item, index) in data"
            v-for="(item, index) in parsedData"
            ref="componentRef"
            :key="item.id"
            :id="item.id"
            :is="summaryAnswerTypeMapCom[item.type]"
            :data="item"
            :originData="originData"
            :summaryIndex="index"
            chartHeight="20rem"
            :tableLimitHeight = "tableLimitHeight"
            @updateQuery ="(res)=> updateRecordSet(index,res)"
         ></component>
      </template>
      <!-- <AmisPageTest /> -->
   </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { chatComProps } from '../common';
import { summaryAnswerTypeMapCom } from './components/types';
import { SummaryAnswerType, summaryAnswerTypeMapCom } from './components/types';
// import AmisPageTest from './components/amisPage/AmisPageTest.vue';
const props = defineProps(chatComProps);
const tableLimitHeight = document.body.clientHeight * 0.7

const parsedData = computed(() => {
   const newData = (props.data ?? []).map((item) => {
      if (item.type === SummaryAnswerType.RecordSet && item.chart === 'table') {
         item.type = SummaryAnswerType.RecordSetTable;
      }
      return item;
   });
   return newData;
});


const componentRef = ref<any[]>(null);

const updateRecordSet = (triggerIndex,res) => {
   for (const item of componentRef.value) {
      item?.updateAll(triggerIndex,res)
   }
};
</script>
<style scoped lang="scss"></style>