tab

wujingjing

2024-11-28 59cf25e40c6ab33d7a7c6e73594cd1e358906250

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

@@ -1,10 +1,11 @@
<!-- 查询最新警告信息 -->
<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"
               class="flex-0 m-2 first-of-type:ml-0"
               :class="{ invisible: showMode2 === DisplayModeType2.Map }"
               v-model="visibleParams[index].value"
               v-for="(item, index) in visibleParams as any"
               :key="item.id"
@@ -13,21 +14,49 @@
               :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" />
         <DisplayMode
            v-if="isTotalTable"
            class="ml-auto"
            :order="modeChangeOrder"
            v-model="showMode"
            :modeTypeMap="displayModeTypeMap"
            @change="displayModeChange"
         />
         <div class="ml-auto space-x-2 flex-items-center" v-if="isMap || !isTotalTable">
            <ColFilter
               v-if="(!isMap && !isTotalTable) || (isMap && showMode2 === DisplayModeType2.List && !isTotalTable)"
               :columnList="colList"
               @change="colFilterChange"
            />

            <DisplayMode
               v-if="isMap"
               :order="modeChangeOrder2"
               :modeTypeMap="displayModeTypeMap2"
               v-model="showMode2"
               @change="displayModeChange2"
            />
         </div>
      </div>
      <div class="flex-auto flex-col" style="display: flex" v-show="showMode === DisplayModeType.List">
      <div
         class="flex-auto flex-col"
         style="display: flex"
         v-show="(!isMap && showMode === DisplayModeType.List) || (isMap && showMode2 === DisplayModeType2.List)"
      >
         <div class="flex-auto" ref="containerRef" v-resize="resizeHandler" v-loading="queryLoading">
            <el-table
               ref="tableRef"
               :maxHeight="tableHeight"
               :cell-style="tableCellStyle"
               :header-cell-style="tableHeaderCellStyle"
               :data="chunkTableData[pager.index - 1]"
               @row-click="recordSelectChange"
               :data="tableData"
               @row-dblclick="tableDblClick"
               @row-click="tableRowClick"
               @sort-change="sortChange"
               :spanMethod="objectSpanMethod"
               class="w-full h-full"
               highlightCurrentRow
@@ -42,9 +71,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,7 +87,7 @@
                           :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
@@ -85,8 +115,24 @@
         />
      </div>

      <div class="flex-auto" v-if="isMap && showMode2 === DisplayModeType2.Map">
         <MapView :data="data" @equipClick="showCurve" @closeInfoWindow="closeInfoWindow" />
      </div>

      <div class="flex-auto" v-resize="debounceResizeChart" v-show="showMode === DisplayModeType.Chart">
         <div ref="chartRef" style="height: 25rem"></div>
      </div>
      <div class="mt-5 relative" v-if="chartDlgIsShow && metricsList.length > 0">
         <span
            class="absolute right-[10px] top-[5px] ywifont ywicon-guanbi text-[#528abe] font-bold cursor-pointer"
            style="z-index: 2"
            @click="closeChartDlg"
         ></span>
         <el-tabs v-model="activeTab" type="border-card">
            <el-tab-pane lazy v-for="(item, index) in metricsList" :key="`${chartDlgKey}_${index}`" :label="item.title" :name="index"
               ><RecordSetDialog :modelValue="true" :isDialog="false" height="20rem" :metrics="item"
            /></el-tab-pane>
         </el-tabs>
      </div>

      <InfoDetail class="text-base" v-model="infoDetailIsShow" :item="detailMapRow" :colList="colList" />
@@ -95,24 +141,26 @@

<script setup lang="ts">
import { createReusableTemplate } from '@vueuse/core';
import type { TableInstance } from 'element-plus';
import _ from 'lodash';
import type { CSSProperties } from 'vue';
import { computed, nextTick, onMounted, reactive, ref, type PropType, watchEffect, shallowRef } 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, toPercent } from '/@/utils/util';
import InfoDetail from './infoDetail/InfoDetail.vue';
import StringInput from './components/StringInput.vue';
import { curveQuery } from '/@/api/ai/chat';
import { RecordSetParamsType, recordSetMapCom } from '../recordSet/types';
import { DisplayModeType } from '../recordSet/components/types';
import DisplayMode from '../recordSet/components/DisplayMode.vue';
import * as echarts from 'echarts';
import type { TableInstance } from 'element-plus';
import { chunk, sortBy } from 'lodash-es';
import type { CSSProperties } from 'vue';
import { computed, nextTick, onMounted, reactive, ref, shallowRef, watchEffect, type PropType } from 'vue';
import { PATH_ICON } from '../../../common';
import { ChartTypeEnum } from '../../../types';
import { BORDER_COLOR, COL_HEADER_CELL_BG_COLOR, THICK_BORDER_WIDTH } from '../deviceLastValue/constants';
import DisplayMode from '../recordSet/components/DisplayMode.vue';
import { DisplayModeType, DisplayModeType2, displayModeTypeMap, displayModeTypeMap2 } from '../recordSet/components/types';
import { RecordSetParamsType, recordSetMapCom } from '../recordSet/types';
import InfoDetail from './infoDetail/InfoDetail.vue';
import MapView from './map/Map.vue';
import { curveQuery } from '/@/api/ai/chat';
import ColFilter from '/@/components/table/colFilter/ColFilter.vue';
import { TableCol } from '/@/components/table/colFilter/types';
import { axisLabelFormatter } from '/@/utils/chart';
import { LocalPlus } from '/@/utils/storage';
import { debounce, getTextWidth, toPercent } from '/@/utils/util';
import RecordSetDialog from '../recordSet/RecordSetDialog.vue';

const props = defineProps({
   data: {
@@ -132,6 +180,10 @@
      type: Boolean,
      default: true,
   },
   disabled: {
      type: Boolean,
      default: false,
   },
});

const [DefineColumns, ReuseColumns] = createReusableTemplate<{
@@ -145,9 +197,15 @@
   return propsData?.hasOwnProperty('agg_count_col') ?? false;
};

const isMap = computed(() => {
   return props.data?.hasOwnProperty('map') ?? false;
});

const isTotalTable = computed(() => checkIsTotalTable(props.data));

const getTableCols = (propsData) => {
   const current = propsData?.cols ?? [];

   if (checkIsTotalTable(propsData)) {
      current.push({
         title: '比例',
@@ -192,7 +250,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 +275,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 +305,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
@@ -271,7 +352,27 @@
      };
   }
};
const getItemMap = (arr: any[], 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());

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

@@ -288,14 +389,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}`;
@@ -316,6 +414,7 @@
 * 3）计算完的宽度放在 colList.value 的 width 属性上
 * @param width
 */

const calcColWidth = (width) => {
   // 返回所有标题字符串
   const maxStrList = tableCols.value.map((item, index) => {
@@ -336,7 +435,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;
@@ -371,7 +471,7 @@
      // 当前已满足宽度
      let curWidth = 0;
      // 排好序的宽度列表
      const sortedWidthList = _.sortBy(maxWidthList, 'maxWidth');
      const sortedWidthList = sortBy(maxWidthList, 'maxWidth');
      // 剩余宽度
      let restWidth = width;
      let notFitStartIndex = 1;
@@ -416,7 +516,7 @@
   }
   if (tableCols.value.length > 0) {
      cellRowSpanMap.clear();
      tableValues.value = buildGroupData(tableValues.value);
      // tableValues.value = buildGroupData(tableValues.value);
      calcColWidth(width);
      nextTick(() => {
         calcPagerHeight();
@@ -500,19 +600,23 @@
   tableRef.value.doLayout();

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

//#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);
@@ -522,7 +626,7 @@

// 是否已经显示所有列了
const haveShowAll = computed(() => visibleColProp.value.length === colList.value.length);
const recordSelectChange = (row) => {
const showInfoDetail = (row) => {
   if (haveShowAll.value) return;
   detailMapRow.value = row;
   infoDetailIsShow.value = true;
@@ -536,69 +640,79 @@
});

//#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;

   // 相同 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 === RecordSetParamsType.StringInput) {
            subPreVal.push({
               update: subCurVal.update,
               value: subCurVal.value,
               path: subCurVal.path,
            });
         } else if (subCurVal.type === RecordSetParamsType.TimeRange) {
            subPreVal.push(
               ...[
                  {
                     update: subCurVal.update,
                     value: subCurVal.start_value,
                     path: subCurVal.start_path,
                  },
                  {
                     update: subCurVal.update,
                     value: subCurVal.end_value,
                     path: subCurVal.end_path,
                  },
               ]
            );
         } else if (subCurVal.type === RecordSetParamsType.Step) {
            subPreVal.push({
               update: subCurVal.update,
               value: subCurVal.step_value,
               path: subCurVal.step_path,
            });
         }

         return subPreVal;
      }, []);

      preVal = preVal.concat(filter);

      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.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;
   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 {
      // 相同 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 === RecordSetParamsType.StringInput) {
               subPreVal.push({
                  update: subCurVal.update,
                  value: subCurVal.value,
                  path: subCurVal.path,
               });
            } else if (subCurVal.type === RecordSetParamsType.TimeRange) {
               subPreVal.push(
                  ...[
                     {
                        update: subCurVal.update,
                        value: subCurVal.start_value,
                        path: subCurVal.start_path,
                     },
                     {
                        update: subCurVal.update,
                        value: subCurVal.end_value,
                        path: subCurVal.end_path,
                     },
                  ]
               );
            } else if (subCurVal.type === RecordSetParamsType.Step) {
               subPreVal.push({
                  update: subCurVal.update,
                  value: subCurVal.step_value,
                  path: subCurVal.step_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),
         order_dim_name: orderDimName,
      };
      res = await curveQuery(params);
      queryLoading.value = true;
@@ -787,7 +901,6 @@

   return data;
};


const getCommonOption = () => {
   return {
@@ -1003,14 +1116,88 @@
};
//#endregion

const orderMap = new Map();
const sortChange = ({ column, prop, order }) => {
   // 恢复原状，更新后再显示排序状态
   const curOrder = orderMap.get(prop) ?? null;
   column.order = curOrder;

   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().then(() => {
      orderMap.set(prop, order);
      column.order = order;
   });
};

// 地图模式展示
const showMode2 = ref(DisplayModeType2.Map);
const modeChangeOrder2 = [DisplayModeType2.Map, DisplayModeType2.List];

const displayModeChange2 = (val: DisplayModeType2) => {
   if (val === DisplayModeType2.Map) {
      //if (!chartInstance.value || needUpdateChart) {
      //updateChart();
      //needUpdateChart = false;
      //}
   }
};

const chartDlgIsShow = ref(false);
const chartDlgKey = ref('');
const activeTab = ref(0);
const metricsList = ref([]);
const resetTab = () => {
   activeTab.value = 0;
};
const showCurve = (row) => {
   resetTab();
   chartDlgIsShow.value = true;
   const quotaChartCol = props.data?.quota_chart?.col;
   if (!quotaChartCol) {
      chartDlgKey.value = '';
      metricsList.value = [];
   } else {
      const str = row[quotaChartCol] ?? '[]';
      chartDlgKey.value = str;
      metricsList.value = JSON.parse(str);
   }
};
const closeInfoWindow = () => {
   closeChartDlg();
};
const closeChartDlg = () => {
   chartDlgIsShow.value = false;
};

const tableRowClick = (row) => {
   if (isMap.value) {
      showCurve(row);
   } else {
      showInfoDetail(row);
   }
   chartDlgIsShow.value = true;
};

const tableDblClick = (row) => {
   if (!isMap.value) return;
   showInfoDetail(row);
};

defineExpose({
   updateAll,
   updateCurrent,
   updateIndexSummary,
});
</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);
// }
</style>
<style scoped lang="scss"></style>