rev:流量格式化MB、GB

src/utils/traffic-utils.ts

@@ -1,114 +0,0 @@
-/**
- * 流量数据转换工具类
- * 提供字节(byte)到MB/GB的转换功能
- */
-
-/**
- * 流量转换结果类型
- */
-export interface TrafficConversionResult {
-  /** 转换后的数值 */
-  value: number;
-  /** 单位 */
-  unit: 'MB' | 'GB';
-  /** 格式化后的字符串 */
-  formatted: string;
-}
-
-/**
- * 将字节转换为MB或GB
- * @param bytes 字节数
- * @param precision 小数点精度，默认为2位
- * @returns 转换结果对象
- */
-export function convertBytesToTraffic(bytes: number | string, precision: number = 2): TrafficConversionResult {
-  // 处理输入参数
-  const numBytes = typeof bytes === 'string' ? parseFloat(bytes) : bytes;
-
-  // 处理无效输入
-  if (isNaN(numBytes) || numBytes < 0) {
-    return {
-      value: 0,
-      unit: 'MB',
-      formatted: '0 MB'
-    };
-  }
-
-  // 转换常量
-  const MB = 1024 * 1024; // 1MB = 1024 * 1024 bytes
-  const GB = 1024 * 1024 * 1024; // 1GB = 1024 * 1024 * 1024 bytes
-
-  // 如果大于等于1GB，转换为GB
-  if (numBytes >= GB) {
-    const value = parseFloat((numBytes / GB).toFixed(precision));
-    return {
-      value,
-      unit: 'GB',
-      formatted: `${value} GB`
-    };
-  }
-
-  // 否则转换为MB（包括KB也转换为MB）
-  const value = parseFloat((numBytes / MB).toFixed(precision));
-  return {
-    value,
-    unit: 'MB',
-    formatted: `${value} MB`
-  };
-}
-
-/**
- * 批量转换流量数据
- * @param dataList 包含流量字段的数据数组
- * @param fields 需要转换的字段名数组
- * @param precision 小数点精度，默认为2位
- * @returns 转换后的数据数组
- */
-export function convertTrafficFields(
-  dataList: Record<string, any>[],
-  fields: string[],
-  precision: number = 2
-): Record<string, any>[] {
-  return dataList.map(item => {
-    const convertedItem = { ...item };
-
-    fields.forEach(field => {
-      if (item[field] !== undefined && item[field] !== null) {
-        const conversion = convertBytesToTraffic(item[field], precision);
-        convertedItem[`${field}_converted`] = conversion;
-      }
-    });
-
-    return convertedItem;
-  });
-}
-
-/**
- * 格式化流量显示（简化版本，直接返回格式化字符串）
- * @param bytes 字节数
- * @param precision 小数点精度，默认为2位
- * @returns 格式化后的流量字符串
- */
-export function formatTraffic(bytes: number | string, precision: number = 2): string {
-  return convertBytesToTraffic(bytes, precision).formatted;
-}
-
-/**
- * 计算总流量（上行+下行）
- * @param uplink 上行流量（字节）
- * @param downlink 下行流量（字节）
- * @param precision 小数点精度，默认为2位
- * @returns 总流量的转换结果
- */
-export function calculateTotalTraffic(
-  uplink: number | string,
-  downlink: number | string,
-  precision: number = 2
-): TrafficConversionResult {
-  const uplinkBytes = typeof uplink === 'string' ? parseFloat(uplink) : uplink;
-  const downlinkBytes = typeof downlink === 'string' ? parseFloat(downlink) : downlink;
-
-  const totalBytes = (isNaN(uplinkBytes) ? 0 : uplinkBytes) + (isNaN(downlinkBytes) ? 0 : downlinkBytes);
-
-  return convertBytesToTraffic(totalBytes, precision);
-}

src/views/dashboard/smfCDR/index.vue

@@ -20,8 +20,8 @@ import { OptionsType, WS } from '@/plugins/ws-websocket';
 import PQueue from 'p-queue';
 import saveAs from 'file-saver';
 import dayjs, { type Dayjs } from 'dayjs';
+import { parseSizeFromByte } from '@/utils/parse-utils';
 import { useClipboard } from '@vueuse/core';
-import { formatTraffic } from '@/utils/traffic-utils';
 const { copy } = useClipboard({ legacy: true });
 const { t } = useI18n();
 const neListStore = useNeListStore();
@@ -156,7 +156,7 @@ let tableColumns = ref<ColumnsType>([
         !Array.isArray(listOfMultipleUnitUsage) ||
         listOfMultipleUnitUsage.length < 1
       ) {
-        return formatTraffic(0);
+        return 0;
       }
       let dataVolumeUplink = 0;
       for (const v of listOfMultipleUnitUsage) {
@@ -166,7 +166,7 @@ let tableColumns = ref<ColumnsType>([
           }
         }
       }
-      return formatTraffic(dataVolumeUplink);
+      return parseSizeFromByte(dataVolumeUplink);
     },
   },
   {
@@ -181,7 +181,7 @@ let tableColumns = ref<ColumnsType>([
         !Array.isArray(listOfMultipleUnitUsage) ||
         listOfMultipleUnitUsage.length < 1
       ) {
-        return formatTraffic(0);
+        return 0;
       }
       let dataVolumeDownlink = 0;
       for (const v of listOfMultipleUnitUsage) {
@@ -191,7 +191,7 @@ let tableColumns = ref<ColumnsType>([
           }
         }
       }
-      return formatTraffic(dataVolumeDownlink);
+      return parseSizeFromByte(dataVolumeDownlink);
     },
   },
   {
@@ -206,7 +206,7 @@ let tableColumns = ref<ColumnsType>([
         !Array.isArray(listOfMultipleUnitUsage) ||
         listOfMultipleUnitUsage.length < 1
       ) {
-        return formatTraffic(0);
+        return 0;
       }
       let dataTotalVolume = 0;
       for (const v of listOfMultipleUnitUsage) {
@@ -216,7 +216,7 @@ let tableColumns = ref<ColumnsType>([
           }
         }
       }
-      return formatTraffic(dataTotalVolume);
+      return parseSizeFromByte(dataTotalVolume);
     },
   },
   {
@@ -813,15 +813,21 @@ onBeforeUnmount(() => {
                   <div>
                     <div>
                       <span>Data Total Volume: </span>
-                      <span>{{ formatTraffic(udata.dataTotalVolume || 0) }}</span>
+                      <span>
+                        {{ parseSizeFromByte(udata.dataTotalVolume || 0) }}
+                      </span>
                     </div>
                     <div>
                       <span>Data Volume Downlink: </span>
-                      <span>{{ formatTraffic(udata.dataVolumeDownlink || 0) }}</span>
+                      <span>
+                        {{ parseSizeFromByte(udata.dataVolumeDownlink || 0) }}
+                      </span>
                     </div>
                     <div>
                       <span>Data Volume Uplink: </span>
-                      <span>{{ formatTraffic(udata.dataVolumeUplink || 0) }}</span>
+                      <span>
+                        {{ parseSizeFromByte(udata.dataVolumeUplink || 0) }}
+                      </span>
                     </div>
                     <!-- <div>
                       <span>Time: </span>
@@ -836,19 +842,19 @@ onBeforeUnmount(() => {
               <div>
                 <span>User Identifier: </span>
                 <span>{{
-                    record.cdrJSON.pDUSessionChargingInformation?.userIdentifier
+                  record.cdrJSON.pDUSessionChargingInformation?.userIdentifier
-                  }}</span>
+                }}</span>
               </div>
               <div>
                 <span>SSC Mode: </span>
                 <span>{{
-                    record.cdrJSON.pDUSessionChargingInformation?.sSCMode
+                  record.cdrJSON.pDUSessionChargingInformation?.sSCMode
-                  }}</span>
+                }}</span>
                 &nbsp;&nbsp;
                 <span>RAT Type: </span>
                 <span>{{
-                    record.cdrJSON.pDUSessionChargingInformation?.rATType
+                  record.cdrJSON.pDUSessionChargingInformation?.rATType
-                  }}</span>
+                }}</span>
                 &nbsp;&nbsp;
                 <span>DNN ID: </span>
                 <span>