打包优化： 1）使用 lodash-es 2）element-plus按需导入

wujingjing

2024-11-18 8703f7ddda1cbdbee1cefc4c8f9a31ea97272494

 src/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue

@@ -14,7 +14,7 @@
               :data="item"
               :originData="originData"
               @change="(val) => handleQueryChange(val, item)"
               :disabled="chartLoading ||disabled"
               :disabled="chartLoading || disabled"
            ></component>
         </template>
         <slot> </slot>
@@ -55,7 +55,6 @@

<script setup lang="ts">
import type * as echarts from 'echarts';
import _ from 'lodash';
import moment from 'moment';
import type { PropType } from 'vue';
import { computed, ref, shallowRef, watch } from 'vue';
@@ -65,6 +64,7 @@
import RecordSetTable from '../recordSetTable/RecordSetTable.vue';
import DisplayMode from './components/DisplayMode.vue';
import YRange from './components/YRange.vue';
import { IS_DAY_LIST } from './components/constants';
import { DisplayModeType } from './components/types';
import type { RecordSetParamsItem } from './types';
import { RecordSetParamsType, recordSetMapCom, scoreMap } from './types';
@@ -72,7 +72,7 @@
import { axisLabelFormatter } from '/@/utils/chart';
import { deepClone } from '/@/utils/other';
import { debounce } from '/@/utils/util';
import { IS_DAY_LIST } from './components/constants';
import { defaultsDeep, groupBy, random } from 'lodash-es';
const chartRef = ref<HTMLDivElement>(null);

const showMode = ref(DisplayModeType.Chart);
@@ -104,10 +104,10 @@
      type: Boolean,
      default: true,
   },
   disabled:{
      type:Boolean,
      default:false,
   }
   disabled: {
      type: Boolean,
      default: false,
   },
}) as {
   data: any;
   summaryIndex: number;
@@ -288,7 +288,7 @@
         formatter: yAxisFormatter,
      },
   };
   const combineOption = _.defaultsDeep(
   const combineOption = defaultsDeep(
      {
         grid: {
            bottom: 20,
@@ -390,7 +390,7 @@
         nameIndex = 1;
      }
      nameCol = data.cols[nameIndex];
      groupedValues = _.groupBy(data.values, (item) => item[nameIndex]);
      groupedValues = groupBy(data.values, (item) => item[nameIndex]);
   } else if (data.chart === 'single_line') {
      groupedValues = {
         default: data.values,
@@ -402,7 +402,7 @@
         nameIndex = 1;
      }
      nameCol = data.cols[nameIndex];
      groupedValues = _.groupBy(data.values, (item) => item[nameIndex]);
      groupedValues = groupBy(data.values, (item) => item[nameIndex]);
   }
};

@@ -422,7 +422,7 @@
   // 只更新 value，不直接覆盖，防止丢失响应性
   // updateVisibleParams(res);
   //#endregion
   groupedValues = _.groupBy(values, (item) => item[nameIndex]);
   groupedValues = groupBy(values, (item) => item[nameIndex]);
   if (isMultiCompare.value) {
      handleMultiCompare();
   } else {
@@ -448,10 +448,49 @@
   }
};

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.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 {
            subPreVal.push({
               update: subCurVal.update,
               value: subCurVal.step_value,
               path: subCurVal.step_path,
            });
         }

         return subPreVal;
      }, []);

      preVal = preVal.concat(filter);

      return preVal;
   }, []);
   return filterList;
};
const handleQueryChange = async (val: any, item: RecordSetParamsItem) => {
   if (!val) return;
   const historyId = (props as any).originData.historyId;
   const curAgentKey = props.data.agent_key;
   let res = null;

   // 改变原始值
@@ -461,42 +500,9 @@
   } else {
      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.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 {
               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 不会变
@@ -593,7 +599,7 @@
   const seriesData = Object.keys(cloneData).reduce((preVal, curVal, curIndex, arr) => {
      const values = cloneData[curVal];
      const isMulti = arr.length > 1;
      const groupByDateValues = _.groupBy(values, (item) => moment(item[timeIndex]).format('YYYY-MM-DD'));
      const groupByDateValues = groupBy(values, (item) => moment(item[timeIndex]).format('YYYY-MM-DD'));
      for (const key in groupByDateValues) {
         if (Object.prototype.hasOwnProperty.call(groupByDateValues, key)) {
            const val = groupByDateValues[key];
@@ -691,7 +697,7 @@
watch(
   () => currentSeries.value,
   (val) => {
      tableKey.value = _.random(0, 100000) + '';
      tableKey.value = random(0, 100000) + '';
   }
);