图表查询

wujingjing

2025-03-05 4e394d1f4ed0928d5498083621966aba390a7642

 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);
@@ -100,21 +100,28 @@
      type: String,
      required: false,
   },
   tableHeight: {
      type: Number,
      default: document.body.clientHeight * 0.7,
   },
   showFilter: {
      type: Boolean,
      default: true,
   },
   disabled:{
      type:Boolean,
      default:false,
   }
}) as {
   data: any;
   summaryIndex: number;
   showFilter: Boolean;
};
   disabled: {
      type: Boolean,
      default: false,
   },
   reportIndex: {
      type: Number,
      default: 0,
   },
   historyId: {
      type: String,
   },
});

const tableLimitHeight = props.chartHeight == undefined ? undefined : document.body.clientHeight * 0.7;
const tableLimitHeight = props.chartHeight == undefined ? undefined : props.tableHeight;

const chartLoading = ref(false);

@@ -129,6 +136,7 @@
const getVisibleParams = (data) => {
   // const visibleList = props.data?.params?.filter((item) => !item?.hide) ?? [];
   // index 作为 id
   const dataFilter = data?.filter ?? [];
   const visibleList = (data?.filter ?? []).map((item, index) => {
      // 不修改原始地址
      item.id = index + '';
@@ -183,7 +191,6 @@
      }
   });
};

const visibleParams = ref(getVisibleParams(props.data));

const checkIsDayTime = () => {
@@ -260,7 +267,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),
         };
      });
@@ -273,12 +284,10 @@
           }
         : axisLabelFormatter;

   const tooltipValueFormatter =
      originChartType === ChartTypeEnum.Score
         ? (value) => {
               return scoreMap[value];
           }
         : undefined;
   const tooltipValueFormatter = (value) => {
      const realValue = originChartType === ChartTypeEnum.Score ? scoreMap[value] : value;
      return realValue + (props.data.unit ? ` ${props.data.unit}` : '');
   };

   const scoreYAxisOption: echarts.YAXisComponentOption = {
      min: 0,
@@ -288,7 +297,7 @@
         formatter: yAxisFormatter,
      },
   };
   const combineOption = _.defaultsDeep(
   const combineOption = defaultsDeep(
      {
         grid: {
            bottom: 20,
@@ -349,7 +358,8 @@
            name: timeCol?.title,
         },
         yAxis: {
            name: valueCol?.title,
            name: props.data.unit ? `${props.data.unit}` : valueCol?.title,

            /** @description 不强制保留 */
            scale: true,
            ...(originChartType === ChartTypeEnum.Score ? scoreYAxisOption : {}),
@@ -390,7 +400,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 +412,7 @@
         nameIndex = 1;
      }
      nameCol = data.cols[nameIndex];
      groupedValues = _.groupBy(data.values, (item) => item[nameIndex]);
      groupedValues = groupBy(data.values, (item) => item[nameIndex]);
   }
};

@@ -410,6 +420,7 @@
   if (!data || !data.cols || !data.values) {
      return;
   }

   handleData();
   setNewOption();
};
@@ -422,7 +433,7 @@
   // 只更新 value，不直接覆盖，防止丢失响应性
   // updateVisibleParams(res);
   //#endregion
   groupedValues = _.groupBy(values, (item) => item[nameIndex]);
   groupedValues = groupBy(values, (item) => item[nameIndex]);
   if (isMultiCompare.value) {
      handleMultiCompare();
   } else {
@@ -435,7 +446,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 +463,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;
   const historyId = props.historyId;
   let res = null;

   // 改变原始值
@@ -461,47 +515,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: props.reportIndex,
      };
      res = await curveQuery(params);
      chartLoading.value = true;
@@ -593,7 +615,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 +634,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 +691,23 @@
      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 getColName = (name) => {
      if (props.data.unit) {
         return `${name}（${props.data.unit}）`;
      }
      return name;
   };
   const cols = currentSeries.value.map((item, index) => ({
      title: item.name ?? `值${index + 1}`,
      title: getColName(item.name ?? `值${index + 1}`),
      type: 'text',
   }));

   cols.unshift({
      title: '时间',
      type: 'time',
@@ -682,7 +720,6 @@
      cols: cols,
      values: data,
   };

   return result;
});
//#endregion
@@ -691,7 +728,7 @@
watch(
   () => currentSeries.value,
   (val) => {
      tableKey.value = _.random(0, 100000) + '';
      tableKey.value = random(0, 100000) + '';
   }
);

@@ -728,13 +765,25 @@
   updateCurrent(summary?.[props.summaryIndex], true);
};

const clearChart = () => {
   chartInstance.value.setOption(
      {
         title: {
            text: '',
         },
         series: [],
      },
      true
   );
};

defineExpose({
   drawChart,
   isMultiCompare,
   handleMultiCompare,
   handleData,
   updateAll,

   clearChart,
   updateIndexSummary,
});
</script>