Merge branch 'perf/dashboard-statistics' into 'main_dev'

fix: 优化首页数据点过大

See merge request yunteng/thingskit-front!680

@@ -120,6 +120,7 @@
     totals: RecordType[];
     totals: RecordType[];
     tooltips: RecordType[];
     tooltips: RecordType[];
     todayTotals: RecordType[];
     todayTotals: RecordType[];
+    withUnit?: boolean;
   }
   }
 
 
   defineProps<{
   defineProps<{
@@ -190,6 +191,7 @@
 
 
     const messageTotal: StatisticalItemType = {
     const messageTotal: StatisticalItemType = {
       images: msgPicture,
       images: msgPicture,
+      withUnit: true,
       totals: [
       totals: [
         { label: '消息数', value: messageInfo?.messageCount },
         { label: '消息数', value: messageInfo?.messageCount },
         { label: '消息点数', value: messageInfo?.dataPointsCount },
         { label: '消息点数', value: messageInfo?.dataPointsCount },

@@ -8,13 +8,14 @@
     label: string;
     label: string;
   }
   }
 
 
-  withDefaults(
+  const props = withDefaults(
     defineProps<{
     defineProps<{
       value?: {
       value?: {
         images: string;
         images: string;
         totals: RecordType[];
         totals: RecordType[];
         tooltips: RecordType[];
         tooltips: RecordType[];
         todayTotals: RecordType[];
         todayTotals: RecordType[];
+        withUnit?: boolean;
       };
       };
     }>(),
     }>(),
     {
     {
@@ -26,6 +27,17 @@
       }),
       }),
     }
     }
   );
   );
+
+  const getThresholdValue = (value: number) => {
+    const record = { value, unit: null };
+
+    if (!props.value?.withUnit) return record;
+
+    if (value > 10 ** 6) return { unit: 'M', value: value / 10 ** 6 };
+    if (value > 10 ** 3) return { unit: 'K', value: value / 10 ** 4 };
+
+    return record;
+  };
 </script>
 </script>
 
 
 <template>
 <template>
@@ -41,7 +53,8 @@
             :style="{ width: `${100 / value.totals.length}%` }"
             :style="{ width: `${100 / value.totals.length}%` }"
           >
           >
             <div class="font-bold text-2xl">
             <div class="font-bold text-2xl">
-              <CountTo :end-val="item.value ?? 0" class="break-all" />
+              <CountTo :end-val="getThresholdValue(item.value).value ?? 0" class="break-all" />
+              <span>{{ getThresholdValue(item.value).unit || '' }}</span>
             </div>
             </div>
             <div class="text-gray-600">{{ item.label }}</div>
             <div class="text-gray-600">{{ item.label }}</div>
           </div>
           </div>