Merge branch 'perf/application/24-10-08' into 'main_dev'

fix: 修复Api调用统计数值显示

See merge request yunteng/thingskit-front!1496

@@ -17,6 +17,7 @@ export default {
     numberOfFailedAttempts: 'Number of failed attempts',
     numberOfFailedAttempts: 'Number of failed attempts',
     lineTitle: 'Top Five API calls',
     lineTitle: 'Top Five API calls',
     pieTitle: 'Proportion of API calls',
     pieTitle: 'Proportion of API calls',
+    pieShowTitle: 'Proportion App',
     timeLineTitle: 'Interface call history',
     timeLineTitle: 'Interface call history',
     timeSelect: {
     timeSelect: {
       oneHour: 'One Hour',
       oneHour: 'One Hour',

@@ -15,7 +15,8 @@ export default {
     numberOfSuccessfulAttempts: '成功次数',
     numberOfSuccessfulAttempts: '成功次数',
     numberOfFailedAttempts: '失败次数',
     numberOfFailedAttempts: '失败次数',
     lineTitle: 'API调用Top5',
     lineTitle: 'API调用Top5',
-    pieTitle: 'API调用占比',
+    pieTitle: 'API调用总占比',
+    pieShowTitle: '应用占比',
     timeLineTitle: '接口调用历史',
     timeLineTitle: '接口调用历史',
     timeSelect: {
     timeSelect: {
       oneHour: '1小时',
       oneHour: '1小时',

@@ -4,14 +4,15 @@
   import { useAppStore } from '/@/store/modules/app';
   import { useAppStore } from '/@/store/modules/app';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useI18n } from '/@/hooks/web/useI18n';
 
 
-  const { t } = useI18n();
-
   const props = defineProps({
   const props = defineProps({
     seriesData: {
     seriesData: {
       type: Array,
       type: Array,
       default: () => [],
       default: () => [],
     },
     },
   });
   });
+
+  const { t } = useI18n();
+
   const appStore = useAppStore();
   const appStore = useAppStore();
 
 
   const skinName = computed(() => {
   const skinName = computed(() => {
@@ -40,7 +41,7 @@
       },
       },
       title: [
       title: [
         {
         {
-          text: t('application.record.text.totalNumberOfCalls'),
+          text: t('application.record.text.pieShowTitle'),
           textStyle: {
           textStyle: {
             color: '#333',
             color: '#333',
             fontWeight: 'bold',
             fontWeight: 'bold',
@@ -69,7 +70,9 @@
               textStyle: {
               textStyle: {
                 fontSize: 13,
                 fontSize: 13,
               },
               },
-              formatter: '{d}%',
+              formatter: (params) => {
+                return params.value + '%';
+              },
             },
             },
           },
           },
         },
         },

@@ -70,7 +70,7 @@
       },
       },
       yAxis: {
       yAxis: {
         type: 'value',
         type: 'value',
-        axisLabel: { formatter: '{value} %' },
+        axisLabel: { formatter: '{value}' },
       },
       },
       series: props.seriesData,
       series: props.seriesData,
     };
     };

@@ -61,17 +61,24 @@
         label: topItem.name,
         label: topItem.name,
         value: topItem.recordNum,
         value: topItem.recordNum,
       }));
       }));
-      chartData.pieChartData = res.tops?.slice(0, 4)?.map((topItem: TopItemType) => ({
+      // 取服务端前5个数据
+      chartData.pieChartData = res.tops?.slice(0, 5)?.map((topItem: TopItemType) => ({
         name: topItem.name,
         name: topItem.name,
         value: topItem.recordProportion,
         value: topItem.recordProportion,
       }));
       }));
-      // 总共Top5,取服务端前4个数据，加上其他应用
-      const otherApplicationCount = chartData.pieChartData
+      // 其他应用等于取服务端数组长度为5后面所有数值相加
+      const otherApplicationCount = res?.tops
+        ?.slice(5)
+        ?.map((topItem: TopItemType) => ({
+          name: topItem.name,
+          value: topItem.recordProportion,
+        }))
         ?.map((topItem) => topItem.value)
         ?.map((topItem) => topItem.value)
         ?.reduce((sum, curr) => sum + curr);
         ?.reduce((sum, curr) => sum + curr);
+      // 相加总共
       chartData.pieChartData.push({
       chartData.pieChartData.push({
         name: '其他应用',
         name: '其他应用',
-        value: 100 - otherApplicationCount,
+        value: res.tops.length <= 5 ? 0 : otherApplicationCount,
       });
       });
     }
     }
   };
   };