表格和图表展示 ；同步 colFilter

wujingjing

2024-10-21 9e9d666bbe57503bb0902bda0d23bf34ae75e832

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue

@@ -1,178 +1,349 @@
<!-- 查询最新警告信息 -->
<template>
   <div>
      <span v-if="data?.title" class="text-base font-bold flex-center mb-5">{{ data?.title }}</span>
      <div class="w-full" style="height: 70vh" ref="containerRef" v-resize="resizeHandler">
   <div class="w-full flex-column">
      <div class="flex-0 flex-items-center mb-1 h-[38px]">
         <template v-if="visibleParams && visibleParams.length > 0">
            <component
               class="flex-0 m-2"
               v-model="visibleParams[index].value"
               v-for="(item, index) in visibleParams as any"
               :key="item.id"
               :id="item.id"
               :is="recordSetTableMap[item.type]"
               :data="item"
               @change="(val) => handleQueryChange(val, item)"
               :originData="originData"
            ></component>
         </template>

         <ColFilter class="ml-auto" :columnList="colList" @change="colFilterChange" />
      </div>
      <div class="flex-auto" ref="containerRef" v-resize="resizeHandler" v-loading="queryLoading">
         <el-table
            ref="tableRef"
            border
            :maxHeight="tableHeight"
            :cell-style="tableCellStyle"
            :header-cell-style="tableHeaderCellStyle"
            :data="data?.values"
            :data="chunkTableData[pager.index - 1]"
            @row-click="recordSelectChange"
            rowClassName="cursor-pointer"
            :spanMethod="objectSpanMethod"

            class="w-full h-full"
            highlightCurrentRow
            cellClassName="text-sm"
            headerCellClassName="text-sm"
         >
            <template v-if="data?.cols?.length > 0">
               <el-table-column
                  v-for="(item, index) in colList"
                  :label="item.title"
                  :width="item.width"
                  :sortable="item.type === 'time'"
                  :key="index"
                  :prop="index + ''"
                  show-overflow-tooltip
               />
            <DefineColumns v-slot="{ cols }">
               <template v-for="item in colList" :key="item.prop">
                  <el-table-column
                     v-if="item.isShow ?? true"
                     :type="item.type"
                     :label="item.label"
                     :width="item.width"
                     :sortable="item.sortable"
                     :key="item.prop"
                     :prop="item.prop"
                     show-overflow-tooltip
                  />
               </template>
            </DefineColumns>
            <el-table-column v-if="data?.title" :label="data?.title" show-overflow-tooltip>
               <template v-if="data?.cols?.length > 0">
                  <template v-for="item in colList" :key="item.prop">
                     <el-table-column
                        v-if="item.isShow ?? true"
                        :type="item.type"
                        :label="item.label"
                        :width="item.width"
                        :sortable="item.sortable"
                        :key="item.prop"
                        :prop="item.prop"
                        show-overflow-tooltip
                     />
                  </template>
               </template>
            </el-table-column>
            <template v-else>
               <template v-if="data?.cols?.length > 0">
                  <ReuseColumns :cols="colList" />
               </template>
            </template>
         </el-table>
      </div>

      <el-pagination
         class="flex-0"
         style="margin-bottom: 0 !important; margin-left: auto !important; float: none !important"
         small
         hide-on-single-page
         v-model:current-page="pager.index"
         v-model:page-size="pager.size"
         layout="total,prev,pager,next,jumper"
         :total="pager.total"
      />

      <InfoDetail class="text-base" v-model="infoDetailIsShow" :item="detailMapRow" :colList="colList" />
   </div>
</template>

<script setup lang="ts">
import { createReusableTemplate } from '@vueuse/core';
import type { TableInstance } from 'element-plus';
import _ from 'lodash';
import { CSSProperties, onMounted, ref, type PropType } from 'vue';
import type { CSSProperties } from 'vue';
import { computed, nextTick, onMounted, reactive, ref, type PropType, watchEffect } from 'vue';
import { BORDER_COLOR, COL_HEADER_CELL_BG_COLOR, THICK_BORDER_WIDTH } from '../deviceLastValue/constants';
import ColFilter from '/@/components/table/colFilter/ColFilter.vue';
import { TableCol } from '/@/components/table/colFilter/types';
import { debounce, getTextWidth } from '/@/utils/util';
import InfoDetail from './infoDetail/InfoDetail.vue';
import { RecordSetTableType, recordSetTableMap } from './types';
import StringInput from './components/StringInput.vue';
import { curveQuery } from '/@/api/ai/chat';

const props = defineProps({
   data: {
      type: Object as PropType<any>,
   },
   originData: {
      type: Object as PropType<any>,
   },
   summaryIndex: {
      type: Number,
   },
   tableLimitHeight:{
      type:Number,
      required:false
   }
});

const [DefineColumns, ReuseColumns] = createReusableTemplate<{
   cols: any[];
}>();
const emits = defineEmits<{
   (event: 'updateQuery', res: any): void;
}>();

const colList = ref([]);
watchEffect(() => {
   colList.value =
      props.data.cols?.map((item, index) => {
         let isShow = true;
         if (props.data.max_cols != null) {
            isShow = index < props.data.max_cols;
         }
         return {
            ...item,
            width: 0,
            label: item.title,
            // sortable: item.type === 'time',
            prop: index + '',
            isShow: isShow,
         } as TableCol;
      }) ?? [];
});

// 所有显示的 prop
const visibleColProp = computed(() => colList.value.filter((item) => item.isShow == null || item.isShow).map((item) => item.prop));

const containerRef = ref<HTMLDivElement>(null);
const tableRef = ref<TableInstance>(null);
const measureWidthOffset = 28;

const groupColIndex = [];
(props.data?.cols ?? []).map((item, index) => {
   if (item.group) {
      groupColIndex.push(index);
   }
const filterGroupIndexList = computed(() => {
   const groupIndexList = [];

   (props.data?.cols ?? []).map((item, index) => {
      // 是分组，且当前可见
      if (item.group && visibleColProp.value.includes(index + '')) {
         groupIndexList.push(index);
      }
   });

   return groupIndexList;
});

const chunkTableData = ref([props.data?.values]);
// FIXME:  如果全部 group 都为 true，恰好最后多条记录也可以归为一组，很可能显示不对，少了几条重复的数据
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
   if (groupColIndex.includes(columnIndex)) {
   const key = `${rowIndex},${columnIndex}`;
   const rowspan = cellRowSpanMap.get(key);
   if (rowspan !== undefined) {
      return {
         rowspan: row.rowspan,
         rowspan,
         colspan: 1,
      };
   } else {
      return {
         rowspan: 1,
         colspan: 1,
      };
   }
};

// 单元格行合并情况
const cellRowSpanMap = new Map<string, number | undefined>();

/**
 * 构建分组结构，一组一组按层次构建
 * @param i 当前分组的索引位置
 * @param j 当前记录所在行位置
 */
const buildGroupData = (values, i = 0, j = 0) => {
   if (!values || values.length === 0) return [];
   const curGroupIndex = filterGroupIndexList.value[i];
   // 不可以分组，直接 return;
   if (curGroupIndex == undefined || values.length === 1) {
      return values;
   }

   const groupData = _.groupBy(values, (item, index) => {
      const groupValue = item[curGroupIndex];
      return groupValue;
   });
   // 顺延下一个分组
   i++;
   // 重新排布一下位置，保证 group 相邻，同时打上 rowspan
   const result = Object.values(groupData).reduce((preVal, curVal) => {
      curVal.map((item, index) => {
         // 行列作为 key
         const key = `${j + index},${curGroupIndex}`;
         cellRowSpanMap.set(key, index === 0 ? curVal.length : 0);
      });

      preVal = preVal.concat(buildGroupData(curVal, i, j));
      j += curVal.length;
      return preVal;
   }, []);
   return result;
};

/**
 * 计算每一列的宽度
 * 1）总宽小于容器宽：直接按比例分
 * 2）总宽大于容器宽：先完全满足最小的宽度，直到到不满足宽度的地方，然后剩余宽度，按宽度比例分配
 * 3）计算完的宽度放在 colList.value 的 width 属性上
 * @param width
 */
const calcColWidth = (width) => {
   // 返回所有标题字符串
   const maxStrList = props.data.cols.map((item, index) => {
      if (visibleColProp.value.includes(index + '')) {
         return item.title;
      } else {
         return '';
      }
   });
   // 返回所有标题字符串长度
   const maxLenList = props.data.cols.map((item, index) => {
      if (visibleColProp.value.includes(index + '')) {
         return item.title.gblen();
      } else {
         return 0;
      }
   });
   // 计算每一列最长的标题字符串和标题字符串长度
   for (const item of props.data.values) {
      item.map((subItem, index) => {
         const subItemLen = subItem?.gblen();
         if (maxLenList[index] < subItemLen) {
            maxLenList[index] = subItemLen;
            maxStrList[index] = subItem;
         }
      });
   }
   // 总宽
   let sumWidth = 0;
   // 计算所有列实际列宽
   let maxWidthList = maxStrList.map((item, index) => {
      // 不可见列宽度为 0
      const width = !visibleColProp.value.includes(index + '')
         ? 0
         : getTextWidth(item, {
               size: '0.875rem',
           }) + measureWidthOffset;
      sumWidth += width;
      return {
         index,
         maxWidth: width,
      };
   });
   // 总宽小于容器宽度
   if (sumWidth <= width) {
      // 按比例分配宽度
      maxWidthList = maxWidthList.map((item) => ({
         ...item,
         width: (item.maxWidth / sumWidth) * width,
      }));
      // 先满足小的，剩余空间按比例均分
   } else {
      // 当前已满足宽度
      let curWidth = 0;
      // 排好序的宽度列表
      const sortedWidthList = _.sortBy(maxWidthList, 'maxWidth');
      // 剩余宽度
      let restWidth = width;
      let notFitStartIndex = 1;
      for (let index = 0; index < sortedWidthList.length; index++) {
         const item = sortedWidthList[index];
         // 加上当前宽度
         curWidth += item.maxWidth;
         // 没占满容器，或是最小的那个，直接取它的最大宽度
         if (curWidth <= width || index === 0) {
            maxWidthList[item.index].width = item.maxWidth;
            continue;
         }
         // 加上当前宽度超出当前容器，就不加，计算不加时的剩余宽度
         restWidth = width - (curWidth - item.maxWidth);
         // 当加上 index 索引处的宽度时，正好宽度超出容器
         notFitStartIndex = index;
         break;
      }
      // 剩余宽度
      let sumRestMaxWidth = 0;
      // 剩余加上会超出容器宽度的索引
      const notFitIndexList = sortedWidthList.slice(notFitStartIndex).map((item) => {
         sumRestMaxWidth += item.maxWidth;
         return item.index;
      });

      // 按 maxWidth 比例分配剩余空间
      for (const item of notFitIndexList) {
         maxWidthList[item].width = restWidth * (maxWidthList[item].maxWidth / sumRestMaxWidth);
         // if (maxWidthList[item].maxWidth <= restWidth) {
         //    maxWidthList[item].width = restWidth;
         // }
      }
   }
   colList.value.map((item, index) => {
      item.width = maxWidthList[index].width;
   });
};
const resizeEvent = ({ width, height }) => {
   if (width === 0 || height === 0) {
      return;
   }

   if (props.data?.cols?.length > 0 && props.data?.values?.length > 0) {
      const groupData = _.groupBy(props.data.values, (item, index) => {
         // 找出所有需要 group 的值，加起来
         const groupKey = item.reduce((preVal, curVal, index) => {
            const isGroup = props.data.cols[index].group;
            if (isGroup) {
               preVal += curVal;
            }
            return preVal;
         }, '');
         return groupKey;
   if (props.data?.cols?.length > 0) {
      cellRowSpanMap.clear();
      props.data.values = buildGroupData(props.data.values);
      calcColWidth(width);
      nextTick(() => {
         calcPagerHeight();
      });

      // 重新排布一下位置，保证 group 相邻，同时打上 rowspan
      props.data.values = Object.values(groupData).reduce((preVal, curVal) => {
         curVal.map((item, index, array) => {
            item.rowspan = index === 0 ? array.length : undefined;
         });
         preVal = preVal.concat(curVal);
         return preVal;
      }, []);

      const maxStrList = props.data.cols.map((item) => item.title);
      const maxLenList = props.data.cols.map((item) => item.title.gblen());
      for (const item of props.data.values) {
         item.map((subItem, index) => {
            const subItemLen = subItem?.gblen();
            if (maxLenList[index] < subItemLen) {
               maxLenList[index] = subItemLen;
               maxStrList[index] = subItem;
            }
         });
      }
      // 总宽
      let sumWidth = 0;
      let maxWidthList = maxStrList.map((item, index) => {
         const width =
            getTextWidth(item, {
               size: '0.875rem',
            }) + measureWidthOffset;
         sumWidth += width;
         return {
            index,
            maxWidth: width,
         };
      });
      if (sumWidth <= width) {
         maxWidthList = maxWidthList.map((item) => ({
            ...item,
            width: (item.maxWidth / sumWidth) * width,
         }));
         // 先满足小的，剩余空间按比例均分
      } else {
         let curWidth = 0;
         const sortedWidthList = _.sortBy(maxWidthList, 'maxWidth');
         let restWidth = width;
         let notFitStartIndex = 1;
         for (let index = 0; index < sortedWidthList.length; index++) {
            const item = sortedWidthList[index];
            curWidth += item.maxWidth;
            if (curWidth < width || index === 0) {
               maxWidthList[item.index].width = item.maxWidth;
               continue;
            }
            restWidth = width - (curWidth - item.maxWidth);
            notFitStartIndex = index;
            break;
         }
         let sumRestMaxWidth = 0;
         const notFitIndexList = sortedWidthList.slice(notFitStartIndex).map((item) => {
            sumRestMaxWidth += item.maxWidth;
            return item.index;
         });

         // 平均分配剩余空间
         for (const item of notFitIndexList) {
            maxWidthList[item].width = restWidth * (maxWidthList[item].maxWidth / sumRestMaxWidth);
            if (maxWidthList[item].maxWidth <= restWidth) {
               maxWidthList[item].width = restWidth;
            }

            // maxWidthList[item].width = undefined;
         }
      }
      colList.value = props.data.cols.map((item, index) => ({
         ...item,
         width: maxWidthList[index].width,
      }));
   } else {
      colList.value = [];
   }
   tableRef.value.doLayout();

   setTimeout(() => {
      tableRef.value?.doLayout();
   }, 300);
};

const resizeHandler = debounce(resizeEvent);
//#region ====================== 样式 ======================
const tableCellStyle = ({ row, rowIndex, column, columnIndex }): CSSProperties => {
   const extraStyle =
      columnIndex === 0
         ? {
               borderLeft: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}`,
           }
         : {};
   if (columnIndex === 0) {
   }
   const extraStyle = {
      ...(columnIndex === 0 ? { borderLeft: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}` } : {}),
   };

   return {
      textAlign: 'center',
      borderColor: BORDER_COLOR,
@@ -184,12 +355,12 @@
};

const tableHeaderCellStyle = ({ row, rowIndex, column, columnIndex }): CSSProperties => {
   const extraStyle =
      columnIndex === 0
         ? {
               borderLeft: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}`,
           }
         : {};
   const extraStyle = {
      ...(columnIndex === 0 ? { borderLeft: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}` } : {}),
      ...(rowIndex === 0
         ? { borderTop: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}`, backgroundColor: '#8db4e2', fontSize: '1rem' }
         : {}),
   };

   return {
      textAlign: 'center',
@@ -203,15 +374,237 @@
   };
}; //#endregion

//#region ====================== 分页 ======================
const pager = reactive({
   index: 1,
   size: 10,
   total: props.data?.values?.length ?? 0,
});

const calcCellHeight = (count, cellHeight) => {
   return count * cellHeight + count * THICK_BORDER_WIDTH;
};

/**
 * 计算分页表格宽度
 */
const calcPagerHeight = () => {
   // 表格内容单元格高度
   const cellHeight = tableRef.value.$el.querySelector('.el-table__body .el-table__cell[rowspan="1"]')?.clientHeight ?? 39;
   const headerHeight = tableRef.value.$el.querySelector('.el-table__header-wrapper').clientHeight;

   // 限制高度
   const limitHeight =props.tableLimitHeight ??containerRef.value.clientHeight;

   // 求 size
   // size*cellHeight + size*THICK_BORDER_WIDTH + headerHeight <= limitHeight;
   // size <= (limitHeight - headerHeight)/(cellHeight+THICK_BORDER_WIDTH);

   // 一页有  pager.size，条记录
   pager.size = Math.floor((limitHeight - headerHeight) / (cellHeight + THICK_BORDER_WIDTH));
   const currentHeight = calcCellHeight(pager.size, cellHeight) + headerHeight;

   tableHeight.value = currentHeight;

   tableRef.value.doLayout();

   // pager.index = 1;
   chunkTableData.value = _.chunk(props.data.values ?? [], pager.size);
};

//#endregion

const reloadTable = () => {
   // 重新计算宽度

   resizeEvent({ width: containerRef.value.clientWidth, height: containerRef.value.clientHeight });
};
const colFilterChange = () => {
   // 重新计算宽度
   reloadTable();
};

const tableHeight = ref(0.7 * document.body.clientHeight);
//#region ======================  ======================
const infoDetailIsShow = ref(false);
const detailMapRow = ref(null);

// 是否已经显示所有列了
const haveShowAll = computed(() => visibleColProp.value.length === colList.value.length);
const recordSelectChange = (row) => {
   if (haveShowAll.value) return;
   detailMapRow.value = row;
   infoDetailIsShow.value = true;
};
//#endregion
onMounted(() => {
   resizeEvent({
      width: containerRef.value.clientWidth,
      height: 0.7 * document.body.clientHeight,
   });
});

//#region ====================== 表格过滤参数 ======================

const queryLoading = ref(false);
const queryUpdate = async (val: any, item: any) => {
   const historyId = (props as any).originData.historyId;
   const curAgentKey = props.data.agent_key;
   let res = null;

   // 改变原始值
   if (item.type === RecordSetTableType.StringInput) {
      item.origin.value = val;
   }
   try {
      // 相同 agent_key 下所有 filter 请求参数
      const filterList = ((props as any).originData?.content?.origin?.summary ?? []).reduce((preVal, curVal) => {
         if (curVal.agent_key !== curAgentKey) return preVal;

         const filter = (curVal.filter ?? []).reduce((subPreVal, subCurVal) => {
            if (subCurVal.type === RecordSetTableType.StringInput) {
               subPreVal.push({
                  update: subCurVal.update,
                  value: subCurVal.value,
                  path: subCurVal.path,
               });
            }

            return subPreVal;
         }, []);

         preVal = preVal.concat(filter);

         return preVal;
      }, []);
      const params = {
         history_id: historyId,
         // 查询前后 agent_key 不会变
         agent_key: props.data.agent_key,
         filter_json: JSON.stringify(filterList),
      };
      res = await curveQuery(params);
      queryLoading.value = true;
   } finally {
      queryLoading.value = false;
   }

   emits('updateQuery', res);
};

const debounceQueryUpdate = debounce(queryUpdate, 600);

const handleQueryChange = async (val: any, item: any) => {
   if (item.type === RecordSetTableType.StringInput) {
      debounceQueryUpdate(val, item);
   }

   // queryUpdate(val,item)

   return;
};

//#endregion

const getVisibleParams = (data) => {
   // const visibleList = props.data?.params?.filter((item) => !item?.hide) ?? [];
   // index 作为 id
   const visibleList = (data?.filter ?? []).map((item, index) => {
      // 不修改原始地址
      item.id = index + '';

      return item;
   });
   const newList: any[] = [];
   for (let index = 0; index < visibleList.length; index++) {
      const current = visibleList[index];
      switch (current.type) {
         case RecordSetTableType.StringInput:
            newList.push({
               id: current.id,
               type: RecordSetTableType.StringInput,
               origin: current,
               value: current?.value ?? '',
               title: current.title,
            });
            break;

         default:
            break;
      }
      Reflect.deleteProperty(current, 'id');
   }

   return newList;
};
const visibleParams = ref(getVisibleParams(props.data));

const updateFilterValue = (data) => {
   const filter = data?.filter ?? [];

   filter.map((newItem, index) => {
      const currentItem = visibleParams.value.find((item) => item.id === index + '');

      if (currentItem) {
         if (newItem.type === RecordSetTableType.StringInput) {
            currentItem.value = newItem.value;
         }
      }
   });
};

const resetPager = (data) => {
   pager.index = 1;
   pager.total = data?.values?.length ?? 0;
};
const updateCurrent = (res) => {
   const title = res?.title;
   const values = res?.values ?? [];
   props.data.title = title;
   props.data.values = values;
   // 不更新，后端压根没返回
   // updateFilterValue(res);
   resetPager(res);

   reloadTable();
};
// 查询
const updateAll = (triggerIndex, res) => {
   // 当前 agent_key
   const curAgentKey = props.data.agent_key;
   const triggerAgentKey = (props as any).originData?.content?.origin?.summary?.[triggerIndex]?.agent_key;
   if (curAgentKey !== triggerAgentKey) {
      return;
   }
   if (!curAgentKey) {
      return;
   }

   // 当前项所在索引
   let currentIndex = -1;
   for (let index = 0; index < (props as any).originData.content.origin.summary.length; index++) {
      const item = (props as any).originData.content.origin.summary[index];
      if (item.agent_key === curAgentKey) {
         currentIndex++;
         if (index === props.summaryIndex) {
            break;
         }
      }
   }
   // 表格 summary 可能整个返回为空，为空时，values 设置为空
   const newSummary = res?.summary?.[currentIndex] ?? {
      title: props.data.title,
      values: [],
   };

   updateCurrent(newSummary);
};

defineExpose({
   updateAll,
});
</script>
<style scoped lang="scss">

// :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell){
//    background-color: v-bind(stripedBgColor);
// }