表格自适应

wujingjing

2024-07-25 3a64511eaac77a4677d0ecf41c65af6b56ea7978

 src/components/chat/chatComponents/summaryCom/components/deviceLastValue/DeviceLastValueCom.vue

@@ -27,7 +27,7 @@
                     class="flex"
                     :class="`space-x-[${THICK_BORDER_WIDTH}px]`"
                     :style="{
                        backgroundColor: COL_HEADER_CELL_BG_COLOR,
                        backgroundColor: BORDER_COLOR,
                     }"
                  >
                     <div
@@ -35,7 +35,7 @@
                        :key="item"
                        :class="COL_HEADER_CELL_CLASS"
                        :style="{
                           width: `${CELL_WIDTH}px`,
                           width: `${index === 0 ? firstColWidth : restColWidth}px`,
                           height: `${CELL_HEIGHT}px`,
                           backgroundColor: COL_HEADER_CELL_BG_COLOR,
                        }"
@@ -43,13 +43,29 @@
                        {{ index === 0 ? '' : rowChunk[index - 1]?.OTITLE }}
                     </div>
                  </div>
                  <MonitorContent v-if="firstRow" :title="firstRow.title" :type="firstRow.id" :values="rowChunk" />
                  <MonitorContent
                     v-if="firstRow"
                     :firstColWidth="firstColWidth"
                     :restColWidth="restColWidth"
                     :title="firstRow.title"
                     :type="firstRow.id"
                     :values="rowChunk"
                  />
               </div>
               <!-- 剩余行 -->
               <MonitorContent v-for="(row, index) in restRows" :key="index" :title="row.title" :type="row.id" :values="rowChunk" />
               <MonitorContent
                  v-for="(row, index) in restRows"
                  :key="index"
                  :firstColWidth="firstColWidth"
                  :restColWidth="restColWidth"
                  :title="row.title"
                  :type="row.id"
                  :values="rowChunk"
               />
            </div>
         </div>
         <el-pagination
            style="margin-bottom: 0 !important"
            small
            hide-on-single-page
            v-model:current-page="pageIndex"
@@ -66,16 +82,17 @@
import _ from 'lodash';
import { computed, onMounted, ref } from 'vue';
import MonitorContent from './MonitorContent.vue';
import { debounce } from '/@/utils/util';
import { debounce, getTextWidth } from '/@/utils/util';

import { chatComProps } from '../../../common';
import {
   BORDER_COLOR,
   CELL_HEIGHT,
   CELL_WIDTH,
   CELL_MAX_WIDTH,
   COL_HEADER_CELL_BG_COLOR,
   COL_HEADER_CELL_CLASS,
   PAGE_HEIGHT,
   ROW_HEADER_CELL_MAX_WIDTH,
   THICK_BORDER_WIDTH,
   THIN_BORDER_WIDTH,
} from './constants';
@@ -89,27 +106,105 @@
const pageSize = ref(null);

const containerRef = ref<HTMLDivElement>(null);
const measureWidthOffset = 2;
/** @description 测量首列内容宽度 */
const rowHeaderCellContentWidth = computed(() => {
   if (!props.data.rows || props.data.rows.length === 0) return 0;
   let maxLen = 0;
   let maxTitle = '';
   for (const item of props.data.rows) {
      const { title } = item;
      const len = title.gblen();
      if (len > maxLen) {
         maxLen = len;
         maxTitle = title;
      }
   }
   let maxWidth = getTextWidth(maxTitle, {
      size: '0.875rem',
   });

   maxWidth += measureWidthOffset;

   if (maxWidth > ROW_HEADER_CELL_MAX_WIDTH) {
      maxWidth = ROW_HEADER_CELL_MAX_WIDTH;
   }

   return maxWidth;
});
/** @description 测量其他列内容宽度 */
const colHeaderCellContentWidth = computed(() => {
   if (!props.data.values || props.data.values.length === 0) return 0;
   let maxLen = 0;
   let maxTitle = '';
   for (const item of props.data.values) {
      const { OTITLE } = item;
      const len = OTITLE.gblen();
      if (len > maxLen) {
         maxLen = len;
         maxTitle = OTITLE;
      }
   }

   let maxWidth = getTextWidth(maxTitle, {
      size: '0.875rem',
   });
   maxWidth += measureWidthOffset;

   if (maxWidth > CELL_MAX_WIDTH) {
      maxWidth = CELL_MAX_WIDTH;
   }

   return maxWidth;
});

const firstColWidth = ref(rowHeaderCellContentWidth.value);
const restColWidth = ref(colHeaderCellContentWidth.value);
const calcMaxRowsNum = (groupCount: number, height, extraHeight = 0) => {
   return Math.floor(
      (height - THICK_BORDER_WIDTH - extraHeight) /
         (CELL_HEIGHT * groupCount + 2 * THICK_BORDER_WIDTH + THIN_BORDER_WIDTH * (groupCount - 2))
   );
};
let maxColsNum = ref<number>(null);
const resizeEvent = ({ width, height }) => {
   // 按最大宽度算最大列数
   maxColsNum.value = Math.floor((width - THICK_BORDER_WIDTH) / (CELL_WIDTH + THICK_BORDER_WIDTH));
   maxColsNum.value = Math.floor(
      (width - THICK_BORDER_WIDTH + colHeaderCellContentWidth.value - rowHeaderCellContentWidth.value) /
         (colHeaderCellContentWidth.value + THICK_BORDER_WIDTH)
   );

   const currentWidth =
      (maxColsNum.value - 1) * colHeaderCellContentWidth.value +
      rowHeaderCellContentWidth.value +
      THICK_BORDER_WIDTH * (maxColsNum.value - 1) +
      THICK_BORDER_WIDTH * 2;
   let restWidth = width - currentWidth;

   // 尽可能分给第一列
   if (rowHeaderCellContentWidth.value + restWidth > ROW_HEADER_CELL_MAX_WIDTH) {
      restWidth = rowHeaderCellContentWidth.value - ROW_HEADER_CELL_MAX_WIDTH;
      firstColWidth.value = ROW_HEADER_CELL_MAX_WIDTH;
   } else {
      firstColWidth.value = rowHeaderCellContentWidth.value + restWidth;
      restWidth = 0;
   }

   // 其余分给其他列
   if (restWidth !== 0) {
      const currentWidth = colHeaderCellContentWidth.value + restWidth;
      restColWidth.value = currentWidth > CELL_MAX_WIDTH ? CELL_MAX_WIDTH : currentWidth;
   }

   const groupCount = (props.data?.rows?.length ?? 0) + 1;

   const calcMaxRowsNum = (height, extraHeight = 0) => {
      return Math.floor(
         (height - THICK_BORDER_WIDTH - extraHeight) /
            (CELL_HEIGHT * groupCount + 2 * THICK_BORDER_WIDTH + THIN_BORDER_WIDTH * (groupCount - 2))
      );
   };
   // 按最大高度算最大行数
   let rowsNum = calcMaxRowsNum(height);
   let rowsNum = calcMaxRowsNum(groupCount, height);

   // 按最大列数铺
   const maxColsRowsNum = Math.ceil(total / maxColsNum.value);
   const isNeedPage = maxColsRowsNum > rowsNum;
   rowsNum = isNeedPage ? calcMaxRowsNum(height, PAGE_HEIGHT) : maxColsRowsNum;
   rowsNum = isNeedPage ? calcMaxRowsNum(groupCount, height, PAGE_HEIGHT) : maxColsRowsNum;
   // rowsNum 行，maxColsNum列，第一列不算
   pageSize.value = isNeedPage ? rowsNum * (maxColsNum.value - 1) : total;
   pageIndex.value = 1;
@@ -153,10 +248,10 @@
});

// 计算最大列数
// x* cellWidth+thickBorderWidth*(x-1)+thickBorderWidth*2 <= width;
// (x-1)* cellWidth + rowHeaderCellContentWidth.value+thickBorderWidth*(x-1)+thickBorderWidth*2 <= width;

// x*(cellWidth+thickBorderWidth)+thickBorderWidth<=width;
// x<= (width-thickBorderWidth)/(cellWidth+thickBorderWidth);
// x*(cellWidth+thickBorderWidth)+thickBorderWidth - cellWidth + rowHeaderCellContentWidth.value<=width;
// x<= (width-thickBorderWidth + cellWidth-rowHeaderCellContentWidth.value)/(cellWidth+thickBorderWidth);

// const groupCount = (TEST_DATA?.rows?.length ?? 0) + 1;
// 计算最大行数
@@ -167,9 +262,9 @@
//    y * (groupCount - 2) * thinBorderWidth <=
//    height;

// (cellHeight * groupCount + 2 * thickBorderWidth + thinBorderWidth(groupCount - 2) * groupCount) * y + thickBorderWidth <=height;
// (cellHeight * groupCount + 2 * thickBorderWidth + thinBorderWidth(groupCount - 2)  * y + thickBorderWidth <=height;

// y<= (height-thickBorderWidth)/(cellHeight * groupCount + 2 * thickBorderWidth + thinBorderWidth(groupCount - 2) * groupCount)
// y<= (height-thickBorderWidth)/(cellHeight * groupCount + 2 * thickBorderWidth + thinBorderWidth(groupCount - 2) )

onMounted(() => {
   resizeEvent({