wujingjing
2024-12-18 e3f61a2057463cbf793c91837783289de7a84965
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;
@@ -260,7 +260,11 @@
         const values = groupedValues[item];
         return {
            name: item === 'default' ? '' : item,
            data: values.map((item) => [item[timeIndex], item[valueIndex]]),
            data: values
               .map((item) => [item[timeIndex], item[valueIndex]])
               .toSorted((b, a) => {
                  return b[timeIndex].localeCompare(a[timeIndex]);
               }),
            ...getChartTypeSeriesOption(activeChartType),
         };
      });
@@ -288,7 +292,7 @@
         formatter: yAxisFormatter,
      },
   };
   const combineOption = _.defaultsDeep(
   const combineOption = defaultsDeep(
      {
         grid: {
            bottom: 20,
@@ -390,7 +394,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 +406,7 @@
         nameIndex = 1;
      }
      nameCol = data.cols[nameIndex];
      groupedValues = _.groupBy(data.values, (item) => item[nameIndex]);
      groupedValues = groupBy(data.values, (item) => item[nameIndex]);
   }
};
@@ -410,6 +414,7 @@
   if (!data || !data.cols || !data.values) {
      return;
   }
   handleData();
   setNewOption();
};
@@ -422,7 +427,7 @@
   // 只更新 value,不直接覆盖,防止丢失响应性
   // updateVisibleParams(res);
   //#endregion
   groupedValues = _.groupBy(values, (item) => item[nameIndex]);
   groupedValues = groupBy(values, (item) => item[nameIndex]);
   if (isMultiCompare.value) {
      handleMultiCompare();
   } else {
@@ -435,7 +440,11 @@
               const values = groupedValues[item];
               return {
                  name: item === 'default' ? '' : item,
                  data: values.map((item) => [item[timeIndex], item[valueIndex]]),
                  data: values
                     .map((item) => [item[timeIndex], item[valueIndex]])
                     .toSorted((b, a) => {
                        return b[timeIndex].localeCompare(a[timeIndex]);
                     }),
               };
            })),
            chartInstance.value?.setOption({
@@ -448,10 +457,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,47 +509,15 @@
   } 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 不会变
         agent_key: props.data.agent_key,
         filter_json: JSON.stringify(filterList),
         result_group_index: 0,
      };
      res = await curveQuery(params);
      chartLoading.value = true;
@@ -593,7 +609,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];
@@ -612,7 +628,11 @@
   }, []);
   const series = seriesData.map<echarts.SeriesOption>((item) => ({
      name: item[0]?.[nameIndex],
      data: item.map((item) => [item[timeIndex], item[valueIndex]]),
      data: item
         .map((item) => [item[timeIndex], item[valueIndex]])
         .toSorted((b, a) => {
            return b[timeIndex].localeCompare(a[timeIndex]);
         }),
      ...getChartTypeSeriesOption(activeChartType),
   }));
   setNewOption(series, getSingleDayOption());
@@ -665,11 +685,17 @@
      return preVal;
   }, {});
   const data = Object.keys(timeDataMap).map((item) => [item, ...timeDataMap[item]]);
   // 时间最早到最晚排序
   const data = Object.keys(timeDataMap)
      .map((item) => [item, ...timeDataMap[item]])
      .toSorted((b, a) => {
         return b[0].localeCompare(a[0]);
      });
   const cols = currentSeries.value.map((item, index) => ({
      title: item.name ?? `值${index + 1}`,
      type: 'text',
   }));
   cols.unshift({
      title: '时间',
      type: 'time',
@@ -682,7 +708,6 @@
      cols: cols,
      values: data,
   };
   return result;
});
//#endregion
@@ -691,7 +716,7 @@
watch(
   () => currentSeries.value,
   (val) => {
      tableKey.value = _.random(0, 100000) + '';
      tableKey.value = random(0, 100000) + '';
   }
);