yangyin
2024-11-12 815e9320bf805423dc8504a109a865c2c7578cad
src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
@@ -1,7 +1,7 @@
<!-- 查询最新警告信息 -->
<template>
   <div class="w-full flex-column">
      <div class="flex-0 flex-items-center mb-1 h-[38px]">
      <div class="flex-0 flex-items-center mb-1 flex-wrap">
         <template v-if="visibleParams && visibleParams.length > 0 && showFilter">
            <component
               class="flex-0 m-2"
@@ -13,9 +13,9 @@
               :data="item"
               @change="(val) => handleQueryChange(val, item)"
               :originData="originData"
               :disabled="disabled"
            ></component>
         </template>
         <ColFilter v-if="!isTotalTable" class="ml-auto" :columnList="colList" @change="colFilterChange" />
         <DisplayMode v-if="isTotalTable" class="ml-auto" :order="modeChangeOrder" v-model="showMode" @change="displayModeChange" />
      </div>
@@ -26,8 +26,9 @@
               :maxHeight="tableHeight"
               :cell-style="tableCellStyle"
               :header-cell-style="tableHeaderCellStyle"
               :data="chunkTableData[pager.index - 1]"
               :data="tableData"
               @row-click="recordSelectChange"
               @sort-change="sortChange"
               :spanMethod="objectSpanMethod"
               class="w-full h-full"
               highlightCurrentRow
@@ -42,9 +43,10 @@
                        :type="item.type"
                        :label="item.label"
                        :width="item.width"
                        :sortable="item.sortable"
                        :sortable="item.sortable?'custom':false"
                        :key="item.prop"
                        :prop="item.prop"
                        @sortChange="sortChange"
                        show-overflow-tooltip
                     />
                  </template>
@@ -57,9 +59,10 @@
                           :type="item.type"
                           :label="item.label"
                           :width="item.width"
                           :sortable="item.sortable"
                           :sortable="item.sortable?'custom':false"
                           :key="item.prop"
                           :prop="item.prop"
                           show-overflow-tooltip
                        />
                     </template>
@@ -113,6 +116,8 @@
import { PATH_ICON } from '../../../common';
import { ChartTypeEnum } from '../../../types';
import { axisLabelFormatter } from '/@/utils/chart';
import { LocalPlus } from '/@/utils/storage';
import { af } from 'element-plus/es/locale';
const props = defineProps({
   data: {
@@ -132,6 +137,10 @@
      type: Boolean,
      default: true,
   },
   disabled: {
      type: Boolean,
      default: false,
   },
});
const [DefineColumns, ReuseColumns] = createReusableTemplate<{
@@ -146,8 +155,10 @@
};
const isTotalTable = computed(() => checkIsTotalTable(props.data));
const getTableCols = (propsData) => {
   const current = propsData?.cols ?? [];
   if (checkIsTotalTable(propsData)) {
      current.push({
         title: '比例',
@@ -192,7 +203,10 @@
      // 添加合计行
      if (last?.length > 0) {
         const totalRow = new Array(last.length);
         totalRow[0] = '合计';
         let lastGroupIndex = tableCols.value.findLastIndex((item, index) => index !== rateColIndex && index !== valueColIndex);
         lastGroupIndex = lastGroupIndex === -1 ? 0 : lastGroupIndex;
         totalRow[lastGroupIndex] = '合计';
         // 比例列
         totalRow[rateColIndex] = '100%';
         // 合计总数
@@ -214,10 +228,27 @@
};
// 统计表格,需要增加累计值行,以及比例列
const tableValues = ref(getTableValues(props.data));
const storeCols = (colList: any[]) => {
   const key = colList.map((item) => item.label).join(',');
   if (!key) return;
   LocalPlus.set(key, colList, 7);
};
const colList = ref([]);
const getStoreCols = (colList: any[]) => {
   if (colList.length === 0) return colList;
   const key = colList.map((item) => item.label).join(',');
   if (!key) return colList;
   const storeValue = LocalPlus.get(key);
   if (!storeValue) {
      return colList;
   } else {
      return storeValue;
   }
};
watchEffect(() => {
   colList.value =
   const originData =
      tableCols.value?.map((item, index) => {
         let isShow = true;
         if (props.data.max_cols != null) {
@@ -227,11 +258,14 @@
            ...item,
            width: 0,
            label: item.title,
            // sortable: item.type === 'time',
            sortable: !!item.name,
            prop: index + '',
            isShow: isShow,
         } as TableCol;
      }) ?? [];
   const storeCols = getStoreCols(originData);
   colList.value = storeCols;
});
// 所有显示的 prop
@@ -288,14 +322,11 @@
      return values;
   }
   const groupData = _.groupBy(values, (item, index) => {
      const groupValue = item[curGroupIndex];
      return groupValue;
   });
   const groupData = getItemMap(values, curGroupIndex, true);
   // 顺延下一个分组
   i++;
   // 重新排布一下位置,保证 group 相邻,同时打上 rowspan
   const result = Object.values(groupData).reduce((preVal, curVal) => {
   const result = Object.values(Array.from(groupData.values())).reduce((preVal, curVal) => {
      curVal.map((item, index) => {
         // 行列作为 key
         const key = `${j + index},${curGroupIndex}`;
@@ -306,6 +337,28 @@
      j += curVal.length;
      return preVal;
   }, []);
   return result;
};
const getItemMap = <T>(arr: T[], defaultProps = 'ID', isMultiple = false) => {
   if (!arr || arr.length === 0) return {};
   const result = arr.reduce((acc, curr) => {
      if (isMultiple) {
         if (!acc.get(curr[defaultProps])) {
            acc.set(curr[defaultProps], [curr]);
         } else {
            {
               /* acc[curr[defaultProps]].push(curr); */
            }
            acc.get(curr[defaultProps]).push(curr);
         }
      } else {
         acc.set(curr[defaultProps], curr);
      }
      return acc;
   }, new Map()) as Map<string, T | T[]>;
   return result;
};
@@ -336,7 +389,8 @@
   // 计算每一列最长的标题字符串和标题字符串长度
   for (const item of tableValues.value) {
      item.map((subItem, index) => {
         const subItemLen = subItem?.gblen();
         // subItem 可能是 数字
         const subItemLen = (subItem + '')?.gblen();
         if (maxLenList[index] < subItemLen) {
            maxLenList[index] = subItemLen;
            maxStrList[index] = subItem;
@@ -416,7 +470,7 @@
   }
   if (tableCols.value.length > 0) {
      cellRowSpanMap.clear();
      tableValues.value = buildGroupData(tableValues.value);
      // tableValues.value = buildGroupData(tableValues.value);
      calcColWidth(width);
      nextTick(() => {
         calcPagerHeight();
@@ -505,14 +559,18 @@
//#endregion
const tableData = computed(() => buildGroupData(chunkTableData.value[pager.index - 1]));
const reloadTable = () => {
   // 重新计算宽度
   resizeEvent({ width: containerRef.value.clientWidth, height: containerRef.value.clientHeight });
};
const colFilterChange = () => {
   // 重新计算宽度
   reloadTable();
   storeCols(colList.value);
};
const tableHeight = ref(0.7 * document.body.clientHeight);
@@ -536,25 +594,11 @@
});
//#region ====================== 表格过滤参数 ======================
const queryLoading = ref(false);
const queryUpdate = async (val: any, item: any) => {
   const historyId = (props as any).originData.historyId;
const getFilterList = () =>{
   const curAgentKey = props.data.agent_key;
   let res = null;
   // 改变原始值
   if (item.type === RecordSetParamsType.StringInput) {
      item.origin.value = val;
   } else if (item.type === RecordSetParamsType.TimeRange) {
      item.origin.start_value = val[0];
      item.origin.end_value = val[1];
   } else if (item.type === RecordSetParamsType.Step) {
      item.origin.step_value = val;
   }
   try {
      // 相同 agent_key 下所有 filter 请求参数
      const filterList = ((props as any).originData?.content?.origin?.summary ?? []).reduce((preVal, curVal) => {
   // 相同 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) => {
@@ -594,11 +638,37 @@
         return preVal;
      }, []);
      return filterList;
}
const queryLoading = ref(false);
let orderDimName = '';
const queryUpdate = async (val?: any, item?: any) => {
   const historyId = (props as any).originData.historyId;
   let res = null;
   if(item){
   // 改变原始值
      if (item.type === RecordSetParamsType.StringInput) {
         item.origin.value = val;
      } else if (item.type === RecordSetParamsType.TimeRange) {
         item.origin.start_value = val[0];
         item.origin.end_value = val[1];
      } else if (item.type === RecordSetParamsType.Step) {
         item.origin.step_value = val;
      }
   }
   const filterList = getFilterList();
   try {
      const params = {
         history_id: historyId,
         // 查询前后 agent_key 不会变
         agent_key: props.data.agent_key,
         filter_json: JSON.stringify(filterList),
         order_dim_name:orderDimName
      };
      res = await curveQuery(params);
      queryLoading.value = true;
@@ -787,7 +857,6 @@
   return data;
};
const getCommonOption = () => {
   return {
@@ -1003,6 +1072,21 @@
};
//#endregion
const sortChange = ({column,prop,order}) =>{
   let sendOrder ;
   if(order==='descending'){
      sendOrder = 'desc'
   }else if(order==='ascending'){
      sendOrder = 'asc'
   }else{
      sendOrder = '';
   }
   const colName = colList.value[prop].name;
   const sendOrderName = sendOrder ?`${colName},${sendOrder}`:'';
   orderDimName = sendOrderName;
   queryUpdate()
}
defineExpose({
   updateAll,
   updateCurrent,