style:优化 大数额显示不全

src/components/workspace/CashManagement.vue

@@ -3,9 +3,9 @@
     <div class="cash-title">
       <div class="text1">
         现金管理
-<!--        <span class="text1-update-time">-->
-<!--          最后更新时间：{{ workDataUpdateTime || '该地区暂无数据' }}-->
-<!--        </span>-->
+        <!--        <span class="text1-update-time">-->
+        <!--          最后更新时间：{{ workDataUpdateTime || '该地区暂无数据' }}-->
+        <!--        </span>-->
         <el-popover
             placement="top-start"
             title="数据说明"
@@ -23,7 +23,7 @@
           transition: all 0.3s ease;
         "
             >
-              <Service />
+              <Service/>
             </el-icon>
           </template>
         </el-popover>
@@ -32,7 +32,7 @@
     </div>
 
     <div class="text2">
-      <span class="text2-income">总营收：{{ totalIncome}} 新币</span>
+      <span class="text2-income">总营收：{{ totalIncome }} 新币</span>
     </div>
 
     <div class="chart-container">
@@ -72,7 +72,23 @@ const cashData = ref({
   markets: []
 })
 
-const markets =ref()
+const markets = ref()
+
+// 定义默认市场
+const defaultMarkets = [
+  {name: '新加坡', value: 0},
+  {name: '马来西亚', value: 0},
+  {name: '香港', value: 0},
+  {name: '加拿大', value: 0},
+  {name: '泰国', value: 0},
+  {name: '越南HCM', value: 0},
+  {name: '韩国', value: 0},
+  {name: '未知', value: 0},
+  // { name: '其他', value: 0 },
+  {name: '市场部', value: 0},
+  // { name: '深圳运营', value: 0 },
+  // { name: '研发部', value: 0 },
+]
 
 const workDataUpdateTime = ref('')
 const totalIncome = ref(0)
@@ -103,14 +119,19 @@ const fetchCashData = async () => {
     console.log("jjjjjjj", res)
     // 总新币
     console.log("totalIncome", res)
-    totalIncome.value= res.reduce((sum, item) => {
+    totalIncome.value = res.reduce((sum, item) => {
       return sum + (item.totalSGD || 0);
     }, 0);
     // 格式化数据
     if (marksFlag.value) {
-      markets.value = res.map(item => ({
-        name: item.market,
-        value: item.totalSGD ? Number(item.totalSGD) : 0
+      // 生成接口数据映射表
+      const resMap = new Map(
+          res.map(item => [item.market, Number(item.totalSGD) || 0])
+      )
+      // 合并：优先用接口数据，否则默认 0
+      markets.value = defaultMarkets.map(m => ({
+        name: m.name,
+        value: resMap.get(m.name) ?? 0
       }))
     } else {
       // 1. 定义币种中英文对照表
@@ -141,7 +162,6 @@ const fetchCashData = async () => {
     }
 
 
-
     // 更新数据
     cashData.value.markets = markets.value
     console.log("cashData", cashData.value.markets)
@@ -273,7 +293,7 @@ onMounted(() => {
 
 .market-data {
   display: flex;
-  width: 180px;
+  width: 230px;
   flex-direction: column;
   align-items: flex-start;
   gap: 20px;
@@ -282,29 +302,32 @@ onMounted(() => {
 }
 
 .market-item {
-  margin: 10px 0;
   display: flex;
   justify-content: space-between;
   width: 100%;
   font-family: "PingFang SC";
   font-size: 16px;
   color: #040a2d;
-  line-height: 1.5;
+  white-space: nowrap; /* 禁止换行 */
+  overflow: hidden; /* 隐藏溢出内容 */
+  text-overflow: ellipsis; /* 溢出显示省略号 */
+  margin-bottom: 8px; /* 增加项间距，提升可读性 */
 }
 
 .market-name {
-  text-align: left; /* 左边文本左对齐 */
-
+  flex: 0 0 auto; /* 名称部分自适应宽度 */
+  margin-right: 16px; /* 与金额保持距离 */
 }
 
 .market-value {
-  text-align: right; /* 右边数字右对齐 */
-
+  flex: 1; /* 金额部分占剩余宽度 */
+  text-align: right;
 }
 
 .chart {
   flex: 1;
   height: 300px;
+  width: auto;
   margin-top: 10px;
 }