From a790be44744e23e93cf0a44402f028a1e2f65b10 Mon Sep 17 00:00:00 2001
From: Bunny <1319900154@qq.com>
Date: Mon, 10 Mar 2025 22:44:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=92=8C=E6=8A=BD?=
 =?UTF-8?q?=E5=8F=96=E6=95=B0=E5=AD=97=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommonItem/DigitalNumber.tsx   | 20 +++++++++++++++++++
 .../components/sidebar-left-top.vue           | 19 +++---------------
 2 files changed, 23 insertions(+), 16 deletions(-)
 create mode 100644 src/components/CommonItem/DigitalNumber.tsx

diff --git a/src/components/CommonItem/DigitalNumber.tsx b/src/components/CommonItem/DigitalNumber.tsx
new file mode 100644
index 0000000..7fd753f
--- /dev/null
+++ b/src/components/CommonItem/DigitalNumber.tsx
@@ -0,0 +1,20 @@
+import formatter from '@/utils/digte-formatter';
+
+/** 显示金额 */
+export const displayContent = (money) => {
+  const moneyString: string = formatter(money);
+  const moneyStringList = moneyString
+    .split(/(\d,)/g)
+    .filter((item) => item !== '')
+    .map((item) => (!item.includes(',') ? item.split('') : item))
+    .flat();
+
+  return (
+    <>
+      <span>¥</span>
+      {moneyStringList.map((item, index) => (
+        <span key={index}>{item}</span>
+      ))}
+    </>
+  );
+};
diff --git a/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue b/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue
index e1e1bc5..d83f7a6 100644
--- a/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue
+++ b/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue
@@ -1,13 +1,13 @@
 <script lang="tsx" setup>
 import { onMounted, ref } from 'vue';
 
+import { displayContent } from '@/components/CommonItem/DigitalNumber';
 import TimeSelect from '@/components/TimeSelect/index.vue';
 import { TimeSelectType } from '@/components/TimeSelect/type';
-import formatter from '@/utils/digte-formatter';
 import { renderEcharts } from '@/views/business-supervision/components/business-supervision-left/charts/sidebarTop';
 
 const chartProgress = ref<HTMLDivElement>();
-const money = ref('1386114');
+const money = '1386114';
 
 const timeList = ref<TimeSelectType[]>([
   { label: '2020.09', value: '2021' },
@@ -15,19 +15,6 @@ const timeList = ref<TimeSelectType[]>([
   { label: '2020.09', value: '2021' },
 ]);
 
-/** 显示金额 */
-const displayContent = () => {
-  formatter(money);
-  return (
-    <>
-      <span>¥</span>
-      {money.value.split('').map((item, index) => (
-        <span key={index}>{item}</span>
-      ))}
-    </>
-  );
-};
-
 onMounted(() => {
   renderEcharts(chartProgress);
 });
@@ -46,7 +33,7 @@ onMounted(() => {
     </div>
 
     <div class="business-supervision__sidebar-money-digit">
-      <component :is="displayContent()" />
+      <component :is="displayContent(money)" />
     </div>
 
     <div>