曲线查询更改

wujingjing

2024-10-14 3c8ba56f8ea1950067fac67f378e0e87bec3a23e

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

@@ -38,12 +38,12 @@
import { useDrawChatChart } from '../../../hooks/useDrawChatChart';
import { ChartTypeEnum } from '../../../types';
import YRange from './components/YRange.vue';
import type { RecordSet, RecordSetParamsItem } from './types';
import type { RecordSetParamsItem } from './types';
import { RecordSetParamsType, recordSetMapCom, scoreMap } from './types';
import { filterQuery } from '/@/api/ai/chat';
import { curveQuery } from '/@/api/ai/chat';
import { axisLabelFormatter } from '/@/utils/chart';
import { deepClone } from '/@/utils/other';
import { debounce } from '/@/utils/util';
import { axisLabelFormatter } from '/@/utils/chart';

const chartRef = ref<HTMLDivElement>(null);
const yRange = ref({
@@ -71,37 +71,52 @@
      default: '20rem',
   },
}) as {
   data: RecordSet;
   data: any;
};
const chartLoading = ref(false);

const stepOptions = [
   { title: '5分钟', value: '5 minutes' },
   { title: '10分钟', value: '10 minutes' },
   { title: '半小时', value: '30 minutes' },
   { title: '1小时', value: '1 hours' },
   { title: '1天', value: '1 days' },
];

const visibleParams = computed(() => {
   const visibleList = props.data?.params?.filter((item) => !item?.hide) ?? [];

   // const visibleList = props.data?.params?.filter((item) => !item?.hide) ?? [];
   // index 作为 id
   const visibleList = (props.data?.filter ?? []).map((item, index) => ({
      id: index + '',
      ...item,
   }));
   const newList: RecordSetParamsItem[] = [];
   let nextMatchIndex = null;
   for (let index = 0; index < visibleList.length; index++) {
      if (nextMatchIndex === index) continue;
      const current = visibleList[index];
      const currentAny = current as any;
      if (index !== visibleList.length - 1 && currentAny.type === RecordSetParamsType.StartTime) {
         const next = visibleList[index + 1];
         const nextAny = next as any;

         if (nextAny.group === currentAny.group && nextAny.type === RecordSetParamsType.EndTime) {
      switch (current.type) {
         case RecordSetParamsType.TimeRange:
            newList.push({
               id: current.id,
               type: RecordSetParamsType.TimeRange,
               value: [currentAny.value, nextAny.value],
               group: currentAny.group,
               range: [currentAny, nextAny],
            } as any);
            nextMatchIndex = index + 1;
         } else {
            newList.push(current);
         }
      } else {
         newList.push(current);
               origin: current,
               value: [current.start_value, current.end_value],
               title: current.title,
            });
            break;
         case RecordSetParamsType.Step:
            newList.push({
               id: current.id,
               type: RecordSetParamsType.Step,
               origin: current,
               value: current.value,
               list: stepOptions,
               title: current.title,
            });
            break;
         default:
            break;
      }
      Reflect.deleteProperty(current,'id')
   }

   return newList;
@@ -118,6 +133,8 @@
let preData = null;

let activeChartType: ChartTypeEnum = props.data?.chart_type ?? ChartTypeEnum.Line;
const originChartType = activeChartType;

const getChartTypeSeriesOption = (type: ChartTypeEnum) => {
   let result = {};
   switch (type) {
@@ -173,14 +190,14 @@
      });
   }
   const yAxisFormatter =
      activeChartType === ChartTypeEnum.Score
      originChartType === ChartTypeEnum.Score
         ? (value) => {
               return scoreMap[value];
           }
         : axisLabelFormatter;

   const tooltipValueFormatter =
      activeChartType === ChartTypeEnum.Score
      originChartType === ChartTypeEnum.Score
         ? (value) => {
               return scoreMap[value];
           }
@@ -212,7 +229,7 @@
            feature: {
               myBar: {
                  onclick: () => {
                     activeChartType = props.data.chart_type === ChartTypeEnum.Score ? ChartTypeEnum.Score : ChartTypeEnum.Bar;
                     activeChartType = originChartType === ChartTypeEnum.Score ? ChartTypeEnum.Score : ChartTypeEnum.Bar;
                     chartInstance.value.setOption({
                        series: series.map((item) => ({
                           ...item,
@@ -258,7 +275,7 @@
            name: valueCol?.title,
            /** @description 不强制保留 */
            scale: true,
            ...(activeChartType === ChartTypeEnum.Score ? scoreYAxisOption : {}),
            ...(originChartType === ChartTypeEnum.Score ? scoreYAxisOption : {}),
         },
         series: series,
      } as echarts.EChartsOption,
@@ -324,31 +341,30 @@
const { chartContainerResize, chartInstance } = useDrawChatChart({ chartRef, drawChart });

// 更换列表
const changeMap = new Map<string, string>(null);

const changeMap = new Map<string, any>(null);
const handleQueryChange = async (val: any, item: RecordSetParamsItem) => {
   if (!val) return;

   const historyId = (props as any).originData.historyId;
   const summaryIndex = (props as any).summaryIndex;
   let res = null;

   try {
      if (item.type === RecordSetParamsType.TimeRange) {
         changeMap.set(item.range[0].id, val[0]), changeMap.set(item.range[1].id, val[1]);
         item.origin.start_value = val[0];
         item.origin.end_value = val[1];
         changeMap.set(item.id, item.origin);
      } else {
         changeMap.set(item.id, val);
         item.origin.value = val;
         changeMap.set(item.id, item.origin);
      }
      const paramsObj = {};
      for (const [key, value] of changeMap) {
         paramsObj[key] = value;
      }


      const filterObj = Array.from(changeMap.values());
      const params = {
         history_id: historyId,
         query_index: summaryIndex,
         param_json: JSON.stringify(paramsObj),
         agent_key: props.data.agent_key,
         filter_json: JSON.stringify(filterObj),
      };
      res = await filterQuery(params);
      res = await curveQuery(params);
      chartLoading.value = true;
   } finally {
      chartLoading.value = false;
@@ -389,7 +405,7 @@
               ${item.marker}<span style="font-size: 14px; color: #666; font-weight: 400; margin-left: 2px"
                  >${item.seriesName}</span
               ><span style="float: right; margin-left: 20px; font-size: 14px; color: #666; font-weight: 900">${
                  activeChartType === ChartTypeEnum.Score ? scoreMap[item.data[1]] : item.data[1]
                  originChartType === ChartTypeEnum.Score ? scoreMap[item.data[1]] : item.data[1]
               }</span>
               <div style="clear: both"></div>
            </div>