feat: 调整界面数字展示

Author: ulleo

framework/sdk/frontend/commons/business/base-layout/home-page/items/bill/BillTrend.vue

@@ -9,6 +9,7 @@ import BillViewAPI from "@commons/api/bil_view/index";
 import { useUserStore } from "@commons/stores/modules/user";
 import type { ECharts } from "echarts";
 import type { Result } from "@commons/request/Result";
+import DecimalFormat from "@commons/utils/decimalFormat";
 
 import * as echarts from "echarts";
 
@@ -152,17 +153,16 @@ const historyTrend = async (historyNum: number, active: string) => {
           color: "black",
           fontSize: 12,
           formatter: function (param: any) {
-            return _.round(param.value, 2).toFixed(2);
+            return DecimalFormat.format(param.value, 2);
           },
         },
       };
       option["tooltip"] = {
         trigger: "item",
         formatter: (p: any) => {
-          return `<div>月份:${p.name}</div><div>金额:${_.round(
-            p.value,
-            2
-          ).toFixed(2)}</div>`;
+          return `<div>月份:${p.name}</div><div>金额:${CurrencyFormat.format(
+            p.value
+          )}</div>`;
         },
       };
       historyTrendChart?.setOption(option);

framework/sdk/frontend/commons/components/ce-form/items/vsphere/VsphereComputeConfigForm.vue

@@ -63,7 +63,12 @@
                 <div class="usage-bar-top-text">
                   <span>
                     可用:
-                    {{ (scope.row.totalCpu - scope.row.usedCpu).toFixed(2) }}GHz
+                    {{
+                      DecimalFormat.format(
+                        scope.row.totalCpu - scope.row.usedCpu,
+                        2
+                      )
+                    }}GHz
                   </span>
                 </div>
                 <el-progress
@@ -89,7 +94,10 @@
                 <div class="usage-bar-top-text">
                   <span
                     >可用:{{
-                      (scope.row.totalMemory - scope.row.usedMemory).toFixed(2)
+                      DecimalFormat.format(
+                        scope.row.totalMemory - scope.row.usedMemory,
+                        2
+                      )
                     }}GB</span
                   >
                 </div>
@@ -155,6 +163,7 @@ import formApi from "@commons/api/form_resource_api";
 import { computed, onMounted, ref, watch } from "vue";
 import _ from "lodash";
 import { ElTable, type FormInstance } from "element-plus";
+import DecimalFormat from "@commons/utils/decimalFormat";
 
 interface ComputeConfig {
   location: string;

framework/sdk/frontend/commons/components/ce-form/items/vsphere/VsphereDatastoreForm.vue

@@ -39,7 +39,12 @@
             <div class="usage-bar-bottom-text">
               <span>
                 已用:
-                {{ (scope.row.totalDisk - scope.row.freeDisk).toFixed(2) }}GB
+                {{
+                  DecimalFormat.format(
+                    scope.row.totalDisk - scope.row.freeDisk,
+                    2
+                  )
+                }}GB
               </span>
               <span>总量: {{ scope.row.totalDisk }}GB</span>
             </div>
@@ -60,9 +65,10 @@
 </template>
 <script setup lang="ts">
 import type { FormView } from "@commons/components/ce-form/type";
-import { computed, onMounted, ref } from "vue";
+import { computed, ref } from "vue";
 import _ from "lodash";
 import type { ElTable } from "element-plus";
+import DecimalFormat from "@commons/utils/decimalFormat";
 
 interface DataStore {
   mor: string;

framework/sdk/frontend/commons/components/echart/Charts.vue

@@ -2,6 +2,7 @@
 import { onMounted, ref, watch } from "vue";
 import * as echarts from "echarts";
 import _ from "lodash";
+import DecimalFormat from "@commons/utils/decimalFormat";
 
 const props = defineProps({
   data: {
@@ -246,13 +247,13 @@ const timestampToTime = (timestamp: any) => {
 const changeByte = (byte: number) => {
   let size: string;
   if (byte < 1024) {
-    size = `${byte.toFixed(2)}Byte`;
+    size = `${DecimalFormat.format(byte, 2)}Byte`;
   } else if (byte < 1024 * 1024) {
-    size = `${(byte / 1024).toFixed(2)}KB`;
+    size = `${DecimalFormat.format(byte / 1024, 2)}KB`;
   } else if (byte < 1024 * 1024 * 1024) {
-    size = `${(byte / (1024 * 1024)).toFixed(2)}MB`;
+    size = `${DecimalFormat.format(byte / (1024 * 1024), 2)}MB`;
   } else {
-    size = `${(byte / (1024 * 1024 * 1024)).toFixed(2)}GB`;
+    size = `${DecimalFormat.format(byte / (1024 * 1024 * 1024), 2)}GB`;
   }
   // 转成字符串
   const sizeStr = `${size}`;

framework/sdk/frontend/commons/utils/decimalFormat.ts

@@ -0,0 +1,16 @@
+function format(decimal?: number, digits?: number): string | undefined {
+  if (digits == undefined) {
+    digits = 0;
+  }
+  return decimal?.toLocaleString("zh-CN", {
+    style: "decimal",
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits,
+  });
+}
+
+const util = {
+  format,
+};
+
+export default util;

framework/sdk/frontend/commons/utils/percentFormat.ts

@@ -0,0 +1,13 @@
+function format(decimal?: number): string | undefined {
+  return decimal?.toLocaleString("zh-CN", {
+    style: "percent",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+}
+
+const util = {
+  format,
+};
+
+export default util;

services/finance-management/frontend/src/views/bill_detailed/index.vue

@@ -78,7 +78,7 @@
       >
         <template #default="scope">
           <div style="display: flex; align-items: center">
-            <platform_icon :platform="scope.row.provider"> </platform_icon>
+            <PlatformIcon :platform="scope.row.provider"> </PlatformIcon>
             <div class="table_overflow">{{ scope.row.cloudAccountName }}</div>
           </div>
         </template>
@@ -163,7 +163,7 @@
       >
         <template #default="scope">
           <span :title="scope.row.totalCost + '元'">
-            {{ _.round(scope.row.totalCost, 2).toFixed(2) }}元
+            {{ DecimalFormat.format(scope.row.totalCost, 2) }}元
           </span>
         </template>
       </el-table-column>
@@ -175,7 +175,7 @@
       >
         <template #default="scope">
           <span :title="scope.row.realTotalCost + '元'">
-            {{ _.round(scope.row.realTotalCost, 2).toFixed(2) }}元
+            {{ DecimalFormat.format(scope.row.realTotalCost, 2) }}元
           </span>
         </template>
       </el-table-column>
@@ -193,10 +193,11 @@ import {
   TableSearch,
 } from "@commons/components/ce-table/type";
 import billDetailApi from "@/api/bill_detailed";
-import platform_icon from "@commons/components/platform-icon/index.vue";
+import PlatformIcon from "@commons/components/platform-icon/index.vue";
 import cloudAccountApi from "@commons/api/cloud_account/index";
 import type { CloudAccount } from "@commons/api/cloud_account/type";
 import _ from "lodash";
+import DecimalFormat from "@commons/utils/decimalFormat";
 /**
  *当前月份
  */

services/finance-management/frontend/src/views/bill_view/components/ViewExpensesAggsCard.vue

@@ -14,9 +14,9 @@
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import _ from "lodash";
 import { computed } from "vue";
 import CurrencyFormat from "@commons/utils/currencyFormat";
+import DecimalFormat from "@commons/utils/decimalFormat";
 const loading = ref<boolean>(false);
 const expenses = ref<{ current: number; up: number }>({ current: 0, up: 0 });
 const props = defineProps<{
@@ -33,10 +33,10 @@ const scale = computed(() => {
   const s =
     expenses.value.up == 0
       ? CurrencyFormat.format(expenses.value.current)
-      : (
-          ((expenses.value.current - expenses.value.up) / expenses.value.up) *
-          100
-        ).toFixed(2) + "%";
+      : DecimalFormat.format(
+          (expenses.value.current - expenses.value.up) / expenses.value.up,
+          2
+        );
   return expenses.value.current > expenses.value.up ? "+" + s : s;
 });
 onMounted(() => {

services/finance-management/frontend/src/views/bill_view/components/ViewTable.vue

@@ -24,18 +24,14 @@
       sortable
     >
       <template #default="scope">
-        {{ _.round(scope.row.value, 2).toFixed(2) }}
+        {{ DecimalFormat.format(scope.row.value, 2) }}
       </template>
     </el-table-column>
     <el-table-column fixed="right" min-width="80" label="占比">
       <template #default="scope">{{
-        Math.floor(
-          (scope.row.value /
-            viewData.map((b) => b.value).reduce((p, n) => p + n)) *
-            10000
-        ) /
-          100 +
-        "%"
+        PercentFormat.format(
+          scope.row.value / viewData.map((b) => b.value).reduce((p, n) => p + n)
+        )
       }}</template></el-table-column
     >
     <el-table-column width="200" fixed="right" label="趋势">
@@ -58,10 +54,11 @@
 </template>
 <script setup lang="ts">
 import { ref, computed } from "vue";
-import _ from "lodash";
 import type { BillSummary } from "@/echarts/bill_view/type";
 import type { BillRule } from "@/api/bill_rule/type";
 import ViewTrend from "@/views/bill_view/components/ViewTrendChart.vue";
+import PercentFormat from "@commons/utils/percentFormat";
+import DecimalFormat from "@commons/utils/decimalFormat";
 
 const props = withDefaults(
   defineProps<{

services/finance-management/frontend/src/views/bill_view/components/ViewTrendChart.vue

@@ -8,24 +8,24 @@
     <template #default>
       <div class="content">
         <div class="title">
-          {{ props.billSummary.group1
-          }}<span class="child_title">的费用趋势</span>
+          {{ props.billSummary.group1 }}
+          <span class="child_title">的费用趋势</span>
         </div>
         <div ref="tree" class="tree"></div>
       </div>
     </template>
     <template #reference>
-      <TableTrend :trend="props.billSummary.treed"></TableTrend
-    ></template>
+      <TableTrend :trend="props.billSummary.treed" />
+    </template>
   </el-popover>
 </template>
 <script setup lang="ts">
 import type { BillSummary, TrendData } from "@/echarts/bill_view/type";
 import type { ECharts } from "echarts";
 import { ref, inject, nextTick } from "vue";
-import { getTrendViewOption } from "@/echarts/bill_view/index";
-import _ from "lodash";
+import { getTrendViewOption } from "@/echarts/bill_view";
 import TableTrend from "@/views/bill_view/components/TableTrend.vue";
+import CurrencyFormat from "@commons/utils/currencyFormat";
 
 const echarts: any = inject("echarts");
 const title = ref<string>();
@@ -52,8 +52,8 @@ const open = (treed: Array<TrendData>, row: BillSummary) => {
   option["tooltip"] = {
     trigger: "item",
     formatter: (p: any) => {
-      return `<div>月份:${p.name}</div><div>金额:${_.round(p.value, 2).toFixed(
-        2
+      return `<div>月份:${p.name}</div><div>金额:${CurrencyFormat.format(
+        p.value
       )}</div>`;
     },
   };