perf: 优化接口调用历史折线图显示

-<script setup lang="ts">
-  import { Descriptions, Progress, Skeleton, Tooltip, DescriptionsItem } from 'ant-design-vue';
-
-  defineProps({
-    seriesData: {
-      type: Array as PropType<Recordable[]>,
-      default: () => [],
-    },
-  });
-</script>
-<template>
-  <div class="m-16">
-    <Skeleton active :paragraph="{ rows: 10 }" :loading="!seriesData">
-      <Descriptions :column="1">
-        <template v-for="(item, index) in seriesData" :key="item.label">
-          <DescriptionsItem>
-            <span
-              class="mr-2 item-span"
-              :style="{
-                color:
-                  index === 0
-                    ? '#f0a16e'
-                    : index === 1
-                    ? '#868585'
-                    : index === 2
-                    ? '#e78739'
-                    : '#4e84f5',
-                backgroundColor:
-                  index === 0 ? '#FAD672' : index === 1 ? '#CBCAC9' : index === 2 ? '#F1B889' : '',
-                borderColor:
-                  index === 0
-                    ? '#fdee7d'
-                    : index === 1
-                    ? '#e6e6e5'
-                    : index === 2
-                    ? '#f8c296'
-                    : '#0b55f1',
-              }"
-              >{{ index + 1 }}</span
-            >
-            <div class="flex justify-between" style="width: 100%">
-              <div class="label-span">
-                <Tooltip :title="item.label">
-                  {{ item.label }}
-                </Tooltip>
-              </div>
-              <div class="flex w-7/10">
-                <Progress
-                  :showInfo="false"
-                  size="small"
-                  style="width: 70%"
-                  :percent="(item.value / seriesData[0].value) * 100"
-                  :strokeWidth="12"
-                  :strokeColor="
-                    index === 0
-                      ? '#ea5b42'
-                      : index === 1
-                      ? '#666'
-                      : index === 2
-                      ? '#e4751a'
-                      : '#b5b6b6'
-                  "
-                />
-                <span
-                  class="ml-2"
-                  :style="{ color: index === 0 ? '#EA5B42' : index === 2 ? '#E4751A' : '#666' }"
-                >
-                  {{ item.value }}
-                </span>
-              </div>
-            </div>
-          </DescriptionsItem>
-        </template>
-      </Descriptions>
-    </Skeleton>
-  </div>
-</template>
-
-<style scoped lang="less">
-  .item-span {
-    width: 1.4rem;
-    height: 1.25rem;
-    border: 1px solid;
-    color: #0b55f1;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .label-span {
-    width: 10rem;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    word-break: break-all;
-  }
-</style>

@@ -37,7 +37,7 @@
       },
       legend: {
         top: 'bottom',
-        padding: 5,
+        type: 'scroll',
       },
       title: [
         {

@@ -3,6 +3,7 @@
   import { useECharts } from '/@/hooks/web/useECharts';
   import { useAppStore } from '/@/store/modules/app';
   import { useI18n } from '/@/hooks/web/useI18n';
+  import { Empty } from 'ant-design-vue';
 
   const { t } = useI18n();
 
@@ -21,10 +22,11 @@
 
   const timeRangeList = ref([
     { label: `1${t('home.index.timeUnit.hour')}`, value: 'hour', interval: 1000 * 60 * 5 },
+    { label: `1${t('home.index.timeUnit.day')}`, value: 'day', interval: 1000 * 60 * 60 * 1 },
     {
       label: `7${t('home.index.timeUnit.day')}`,
       value: 'week',
-      interval: 1000 * 60 * 60 * 2,
+      interval: 1000 * 60 * 60 * 1,
     },
     {
       label: `30${t('home.index.timeUnit.day')}`,
@@ -95,13 +97,17 @@
     },
     {
       deep: true,
+      immediate: true,
     }
   );
 
   onMounted(() => {
     setOptions(getOptions());
     //自适应
-    window.addEventListener('resize', () => resize());
+    window.addEventListener('resize', () => {
+      resize();
+      setOptions(getOptions());
+    });
   });
 
   const handleTimeRangeChange = (e: any) => {
@@ -122,7 +128,10 @@
         </template>
       </a-radio-group>
     </template>
-    <div ref="chartRef" class="w-full h-80"></div>
+    <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"
+      ><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE"
+    /></div>
   </a-card>
 </template>
 

@@ -76,15 +76,89 @@
         ?.map((topItem) => topItem.value)
         ?.reduce((sum, curr) => sum + curr);
       // 相加总共
-      chartData.pieChartData.push({
-        name: '其他应用',
-        value: res.tops.length <= 5 ? 0 : otherApplicationCount,
-      });
+      if (res.tops && res.tops.length > 5) {
+        chartData.pieChartData.push({
+          name: '其他应用',
+          value: otherApplicationCount,
+        });
+      }
     }
   };
 
+  //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 getClassify = async (type?: string) => {
+    const findValue = configTime.find((configItem) => configItem.name === type)?.value;
+    timeFormat(type, findValue);
     const res = (await getApplicationRecordClassify(type)) as any as ClassifyItemType[];
     chartData.timeLineChartData = res?.map((classifyItem: ClassifyItemType) => ({
       type: 'line',
@@ -125,15 +199,9 @@
     </div>
     <div>
       <TimeLineChart
-        v-if="chartData.timeLineChartData.length"
         @emitTimeRange="handleReceiveTimeRange"
         :seriesData="chartData.timeLineChartData"
       />
-      <a-card v-else :title="t('application.record.text.timeLineTitle')" class="w-full h-120">
-        <div class="w-full h-72 flex justify-center items-center"
-          ><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE"
-        /></div>
-      </a-card>
     </div>
     <div>
       <a-card class="w-full h-140">