perf: 优化接口调用图表绘制

-import { ApplicationRecordPageParams, CallStatisticsItemType } from './model/record';
+import {
+  ApplicationRecordPageParams,
+  CallStatisticsItemType,
+  ClassifyItemType,
+} from './model/record';
 import { PaginationResult } from '/#/axios';
 import { PaginationResult } from '/#/axios';
 import { defHttp } from '/@/utils/http/axios';
 import { defHttp } from '/@/utils/http/axios';
 
 
@@ -40,7 +44,7 @@ export const getApplicationRecordTop = () => {
 
 
 export const getApplicationRecordClassify = (type?: string) => {
 export const getApplicationRecordClassify = (type?: string) => {
   const joinUrlParams = type ? `?type=${type}` : '';
   const joinUrlParams = type ? `?type=${type}` : '';
-  return defHttp.get({
+  return defHttp.get<ClassifyItemType[]>({
     url: `${ApplicationRecordManageApi.OPEN_API_RECORD}/getClassify${joinUrlParams}`,
     url: `${ApplicationRecordManageApi.OPEN_API_RECORD}/getClassify${joinUrlParams}`,
   });
   });
 };
 };

@@ -4,23 +4,20 @@
   import { useAppStore } from '/@/store/modules/app';
   import { useAppStore } from '/@/store/modules/app';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { Empty } from 'ant-design-vue';
   import { Empty } from 'ant-design-vue';
+  import { EChartsOption } from 'echarts';
 
 
   const { t } = useI18n();
   const { t } = useI18n();
 
 
-  const props = defineProps({
-    seriesData: {
-      type: Array,
-      default: () => [],
-    },
-    timeLineXAxisData: {
-      type: Array,
-      default: () => [],
-    },
-    timeType: {
-      type: String,
-      default: 'week',
-    },
-  });
+  const props = withDefaults(
+    defineProps<{
+      timeType: string;
+      chartsData?: Partial<EChartsOption>;
+    }>(),
+    {
+      timeType: 'week',
+      chartsData: () => ({}),
+    }
+  );
 
 
   const emits = defineEmits(['emitTimeRange']);
   const emits = defineEmits(['emitTimeRange']);
 
 
@@ -51,7 +48,8 @@
 
 
   const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
   const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
 
 
-  const getOptions: any = () => {
+  const getOptions = (): EChartsOption => {
+    const { xAxis, series } = props.chartsData || {};
     return {
     return {
       backgroundColor: skinName.value,
       backgroundColor: skinName.value,
       tooltip: {
       tooltip: {
@@ -63,31 +61,12 @@
         bottom: '1%',
         bottom: '1%',
         containLabel: true,
         containLabel: true,
       },
       },
-      xAxis: {
-        type: 'time',
-        splitLine: { show: false },
-        lineStyle: {
-          width: 2,
-        },
-        axisTick: {
-          show: false,
-        },
-        axisLabel: {
-          formatter:
-            props.timeType === 'hour'
-              ? '{yyyy}-{MM}-{dd} {HH}:{mm}:{ss}'
-              : props.timeType === 'day'
-              ? '{yyyy}-{MM}-{dd} {HH}:{mm}:{ss}'
-              : '{yyyy}-{MM}-{dd}',
-          showMinLabel: true,
-          showMaxLabel: true, // 固定显示X轴的最后一条数据
-        },
-      },
+      xAxis,
       yAxis: {
       yAxis: {
         type: 'value',
         type: 'value',
         axisLabel: { formatter: '{value}' },
         axisLabel: { formatter: '{value}' },
       },
       },
-      series: props.seriesData,
+      series,
     };
     };
   };
   };
 
 
@@ -104,13 +83,12 @@
   );
   );
 
 
   watch(
   watch(
-    () => props.seriesData,
+    () => props.chartsData,
     () => {
     () => {
       setOptions(getOptions());
       setOptions(getOptions());
     },
     },
     {
     {
       deep: true,
       deep: true,
-      immediate: true,
     }
     }
   );
   );
 
 
@@ -141,8 +119,8 @@
         </template>
         </template>
       </a-radio-group>
       </a-radio-group>
     </template>
     </template>
-    <div v-show="seriesData.length" ref="chartRef" class="w-full h-80"></div>
-    <div v-show="!seriesData.length" class="w-full h-72 flex justify-center items-center"
+    <div v-show="chartsData?.series?.length" ref="chartRef" class="w-full h-80"></div>
+    <div v-show="!chartsData?.series?.length" class="w-full h-72 flex justify-center items-center"
       ><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE"
       ><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE"
     /></div>
     /></div>
   </a-card>
   </a-card>

+import { EChartsOption } from 'echarts';
+import { formatClassifyText } from '../../api/config';
+import { ClassifyDtsItemType, ClassifyItemType } from '/@/api/application/model/record';
 import { DescItem } from '/@/components/Description';
 import { DescItem } from '/@/components/Description';
 import { BasicColumn } from '/@/components/Table';
 import { BasicColumn } from '/@/components/Table';
 import { useI18n } from '/@/hooks/web/useI18n';
 import { useI18n } from '/@/hooks/web/useI18n';
+import { dateUtil } from '/@/utils/dateUtil';
+
+export type DateInterval = 'hour' | 'day' | 'week' | 'month';
 
 
 const { t } = useI18n();
 const { t } = useI18n();
 
 
@@ -45,3 +51,85 @@ export const formSchema: DescItem[] = [
     label: t('application.record.text.numberOfFailedAttempts'),
     label: t('application.record.text.numberOfFailedAttempts'),
   },
   },
 ];
 ];
+
+function generateFullXAxis(type: DateInterval) {
+  if (type === 'hour') {
+    return Array.from({ length: 60 / 5 }, (_, index) =>
+      dateUtil()
+        .subtract(index * 5, 'minute')
+        .startOf('minute')
+        .valueOf()
+    );
+  } else if (type === 'day') {
+    return Array.from({ length: 24 / 2 }, (_, index) =>
+      dateUtil()
+        .subtract(index * 2, 'hour')
+        .startOf('hour')
+        .valueOf()
+    );
+  } else if (type === 'week') {
+    return Array.from({ length: 7 }, (_, index) =>
+      dateUtil().subtract(index, 'day').startOf('day').valueOf()
+    );
+  } else {
+    return Array.from({ length: 30 }, (_, index) =>
+      dateUtil().subtract(index, 'day').startOf('day').valueOf()
+    );
+  }
+}
+
+export function formatDateFromType(date: number, type: DateInterval) {
+  if (type === 'hour') {
+    return dateUtil(date).format('YYYY-MM-DD HH:mm');
+  } else if (type === 'day') {
+    return dateUtil(date).format('YYYY-MM-DD HH:mm');
+  } else {
+    return dateUtil(date).format('YYYY-MM-DD');
+  }
+}
+
+export function transformClassifyItem(data: ClassifyItemType[], type: DateInterval) {
+  const res: ClassifyItemType[] = [];
+  const fullXAxis = generateFullXAxis(type);
+
+  for (const { dts, classify } of data) {
+    const valueMap = dts.reduce((prev, next) => {
+      const key = dateUtil(next.time).valueOf();
+
+      return { ...prev, [key]: next };
+    }, {} as Record<number, ClassifyDtsItemType>);
+
+    const transformDts: ClassifyDtsItemType[] = fullXAxis.map((timeSpan) => {
+      const exist = valueMap[timeSpan];
+
+      return exist || { time: formatDateFromType(timeSpan, type), count: 0, classify };
+    });
+
+    res.push({ classify, dts: transformDts });
+  }
+
+  return res;
+}
+
+export function transformChartsOptionsByClassifyRecord(
+  data: ClassifyItemType[],
+  type: DateInterval
+): Partial<EChartsOption> {
+  const series: EChartsOption['series'] = data.map(({ classify, dts }) => {
+    return {
+      type: 'line',
+      name: formatClassifyText[classify],
+      data: dts.map(({ count }) => count),
+    };
+  });
+
+  const xAxisData = generateFullXAxis(type).map((timeSpan) => formatDateFromType(timeSpan, type));
+
+  return {
+    series: series.reverse(),
+    xAxis: {
+      type: 'category',
+      data: xAxisData.reverse(),
+    },
+  };
+}

@@ -8,35 +8,32 @@
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { onMounted, reactive } from 'vue';
   import { onMounted, reactive } from 'vue';
   import { getApplicationRecordClassify, getApplicationRecordTop } from '/@/api/application/record';
   import { getApplicationRecordClassify, getApplicationRecordTop } from '/@/api/application/record';
-  import {
-    ApplicationRecordTopItemType,
-    ClassifyDtsItemType,
-    ClassifyItemType,
-    TopItemType,
-  } from '/@/api/application/model/record';
+  import { ApplicationRecordTopItemType, TopItemType } from '/@/api/application/model/record';
   import { Empty } from 'ant-design-vue';
   import { Empty } from 'ant-design-vue';
-  import moment from 'moment';
-  import { formatClassifyText } from '../api/config';
   import total1 from '/@/assets/images/total1.png';
   import total1 from '/@/assets/images/total1.png';
   import total2 from '/@/assets/images/total2.png';
   import total2 from '/@/assets/images/total2.png';
   import total3 from '/@/assets/images/total3.png';
   import total3 from '/@/assets/images/total3.png';
+  import {
+    DateInterval,
+    transformClassifyItem,
+    transformChartsOptionsByClassifyRecord,
+  } from './config';
+  import { EChartsOption } from 'echarts';
 
 
   const { t } = useI18n();
   const { t } = useI18n();
 
 
   interface ChartData {
   interface ChartData {
     lineChartData: Recordable[];
     lineChartData: Recordable[];
     pieChartData: Recordable[];
     pieChartData: Recordable[];
-    timeLineChartData: Recordable[];
     totalData: Recordable[];
     totalData: Recordable[];
-    timeLineXAxisData?: string[];
+    timeLineChartOptions?: Partial<EChartsOption>;
   }
   }
 
 
   const chartData = reactive<ChartData>({
   const chartData = reactive<ChartData>({
     lineChartData: [],
     lineChartData: [],
     pieChartData: [],
     pieChartData: [],
-    timeLineChartData: [],
     totalData: [],
     totalData: [],
-    timeLineXAxisData: [],
+    timeLineChartOptions: {},
   });
   });
 
 
   // API统计
   // API统计
@@ -88,96 +85,20 @@
     }
     }
   };
   };
 
 
-  //1小时->5分钟间隔  1天->2小时间隔  7天->1天间隔 30天->1天间隔
-  const timeFormat = (type, config) => {
-    let startT: any = null;
-    let endT: any = null;
-    let interval: any = null; //分割间隔
-    if (type == 'hour') {
-      interval = 5;
-      startT = moment().subtract(1, config.text);
-      endT = moment().format('HH:mm');
-    } else if (type == 'day') {
-      interval = 2;
-      startT = moment().subtract(1, config.text);
-      endT = moment().format('HH:mm');
-    } else if (type == 'week') {
-      interval = 1;
-      startT = moment().subtract(1, config.text);
-      endT = moment().format('HH:mm');
-    } else if (type == 'month') {
-      interval = 1;
-      startT = moment().subtract(1, config.text);
-      endT = moment().format('HH:mm');
-    }
-    let starTime = moment(startT, 'HH:mm');
-    let endTime = moment(endT, 'HH:mm');
-    let diff = endTime.diff(starTime, config.diffText);
-    let num = Math.ceil(diff / interval);
-    let times: any = [];
-    for (let i = 1; i <= num; i++) {
-      let timeFrom = starTime.clone().add((i - 1) * interval, config.timeText) as any;
-      times.push(timeFrom.format('YYYY-MM-DD HH:mm'));
-    }
-    return times;
-  };
-
-  const configTime = [
-    {
-      name: 'hour',
-      value: {
-        text: 'hours',
-        diffText: 'minutes',
-        timeText: 'minutes',
-      },
-    },
-    {
-      name: 'day',
-      value: {
-        text: 'days',
-        diffText: 'hours',
-        timeText: 'hours',
-      },
-    },
-    {
-      name: 'week',
-      value: {
-        text: 'weeks',
-        diffText: 'days',
-        timeText: 'days',
-      },
-    },
-    {
-      name: 'month',
-      value: {
-        text: 'months',
-        diffText: 'days',
-        timeText: 'days',
-      },
-    },
-  ];
-  //代码保留
-
   const timeType = ref('');
   const timeType = ref('');
 
 
   // 接口调用历史
   // 接口调用历史
-  const getClassify = async (type?: string) => {
-    timeType.value = type as string;
-    const findValue = configTime.find((configItem) => configItem.name === type)?.value;
-    chartData.timeLineXAxisData = timeFormat(type, findValue);
-    const res = (await getApplicationRecordClassify(type)) as any as ClassifyItemType[];
-    chartData.timeLineChartData = res?.map((classifyItem: ClassifyItemType) => ({
-      type: 'line',
-      name: formatClassifyText[classifyItem.classify],
-      data: classifyItem?.dts?.map((dtsItem: ClassifyDtsItemType) => [
-        moment(dtsItem.time).format('YYYY-MM-DD HH:mm:ss'),
-        dtsItem.count,
-      ]),
-      connectNulls: true,
-    }));
+  const getClassify = async (type: DateInterval) => {
+    timeType.value = type;
+    // const findValue = configTime.find((configItem) => configItem.name === type)?.value;
+    // chartData.timeLineXAxisData = timeFormat(type, findValue);
+    const res = await getApplicationRecordClassify(type);
+
+    const transformData = transformClassifyItem(res, type);
+    chartData.timeLineChartOptions = transformChartsOptionsByClassifyRecord(transformData, type);
   };
   };
 
 
-  const handleReceiveTimeRange = (value: string) => {
+  const handleReceiveTimeRange = (value: DateInterval) => {
     getClassify(value);
     getClassify(value);
   };
   };
 
 
@@ -206,8 +127,7 @@
     <div>
     <div>
       <TimeLineChart
       <TimeLineChart
         @emitTimeRange="handleReceiveTimeRange"
         @emitTimeRange="handleReceiveTimeRange"
-        :seriesData="chartData.timeLineChartData"
-        :timeLineXAxisData="chartData.timeLineXAxisData"
+        :charts-data="chartData.timeLineChartOptions"
         :timeType="timeType"
         :timeType="timeType"
       />
       />
     </div>
     </div>