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

@@ -3,6 +3,7 @@ import { findDictItemByCode } from '/@/api/system/dict';
 import { FormSchema } from '/@/components/Form';
 import { DictEnum } from '/@/enums/dictEnum';
 import { useI18n } from '/@/hooks/web/useI18n';
+import HelpMessage from '../HelpMessage.vue';
 
 export enum FormFieldsEnum {
   NAME = 'name',
@@ -62,23 +63,9 @@ export const formSchema: FormSchema[] = [
   },
   {
     field: FormFieldsEnum.INTERFACE_ADDRESS,
-    label: t('application.api.text.interfaceAddress'),
+    label: h(HelpMessage) as unknown as string,
     component: 'Input',
     required: true,
-    helpMessage: [
-      h(
-        'span',
-        {
-          style: {
-            cursor: 'pointer',
-          },
-          onClick: () => {
-            window.open('https://yunteng.yuque.com/avshoi/open_api');
-          },
-        },
-        t('common.documentUrl')
-      ) as any as string,
-    ],
     componentProps: {
       maxLength: 255,
       placeholder: t('application.api.search.interfaceAddressPlaceholder'),

+<script lang="ts" setup>
+  import { BasicHelp } from '/@/components/Basic';
+  import { useI18n } from '/@/hooks/web/useI18n';
+
+  function handleLinkOpenApiDoc() {
+    window.open('https://yunteng.yuque.com/avshoi/open_api');
+  }
+
+  const { t } = useI18n();
+</script>
+
+<template>
+  <div>{{ t('application.api.text.interfaceAddress') }}</div>
+
+  <BasicHelp
+    placement="top"
+    @click="handleLinkOpenApiDoc"
+    class="mx-1"
+    :text="t('common.documentUrl')"
+  />
+</template>

-<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();
 
@@ -11,6 +12,14 @@
       type: Array,
       default: () => [],
     },
+    timeLineXAxisData: {
+      type: Array,
+      default: () => [],
+    },
+    timeType: {
+      type: String,
+      default: 'week',
+    },
   });
 
   const emits = defineEmits(['emitTimeRange']);
@@ -21,10 +30,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')}`,
@@ -63,7 +73,12 @@
           show: false,
         },
         axisLabel: {
-          formatter: '{yyyy}-{MM}-{dd}',
+          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轴的最后一条数据
         },
@@ -95,13 +110,17 @@
     },
     {
       deep: true,
+      immediate: true,
     }
   );
 
   onMounted(() => {
     setOptions(getOptions());
     //自适应
-    window.addEventListener('resize', () => resize());
+    window.addEventListener('resize', () => {
+      resize();
+      setOptions(getOptions());
+    });
   });
 
   const handleTimeRangeChange = (e: any) => {
@@ -122,7 +141,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>
 

 <script setup lang="ts">
+  import { ref } from 'vue';
   import LineChart from './components/LineChart.vue';
   import PieChart from './components/PieChart.vue';
   import Table from './components/Table.vue';
@@ -27,6 +28,7 @@
     pieChartData: Recordable[];
     timeLineChartData: Recordable[];
     totalData: Recordable[];
+    timeLineXAxisData?: string[];
   }
 
   const chartData = reactive<ChartData>({
@@ -34,6 +36,7 @@
     pieChartData: [],
     timeLineChartData: [],
     totalData: [],
+    timeLineXAxisData: [],
   });
 
   // API统计
@@ -76,15 +79,92 @@
         ?.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 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',
@@ -125,15 +205,11 @@
     </div>
     <div>
       <TimeLineChart
-        v-if="chartData.timeLineChartData.length"
         @emitTimeRange="handleReceiveTimeRange"
         :seriesData="chartData.timeLineChartData"
+        :timeLineXAxisData="chartData.timeLineXAxisData"
+        :timeType="timeType"
       />
-      <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">