perf: 完善抽卡分析数据

TomyJan · Jun 4, 2024 · ab8ec8b · ab8ec8b
1 parent 70ee1c7
commit ab8ec8b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 10 deletions.
diff --git a/model/mcGachaCard.js b/model/mcGachaCard.js
@@ -95,7 +95,8 @@ export default class mcGachaCard {
       }
     }
 
-    // 遍历所有五星, 判断是否为 up 物品
+    // 遍历所有五星, 判断是否为 up 物品, 并计算 up 花费的星声数量
+    let upItemTotalCost = 0
     for (let i = 0; i < goldCardRecord.length; i++) {
       if (goldCardRecord[i].itemId === '-1') continue
       for (let j = 0; j < mcGachaUpPools.length; j++) {
@@ -108,10 +109,12 @@ export default class mcGachaCard {
             mcGachaUpPools[j].endTime * 1000
         ) {
           goldCardRecord[i].isUpItem = true
+          upItemTotalCost += goldCardRecord[i].thisCardCost
           break
         }
       }
     }
+    upItemTotalCost *= 160
 
     // 再次倒序, 把新的记录放在最前面
     goldCardRecord.reverse()
@@ -138,6 +141,8 @@ export default class mcGachaCard {
           (everyGoldCost / (goldCardRecord.length - (hasNoGold ? 1 : 0))) * 100
         ) / 100
     }
+    // goldCount - up 数量=非 up 数量
+    let notUpGoldCount = goldCount - goldCardRecord.filter((item) => item.isUpItem).length
     // 通过 API 获取用户昵称和头像
     let gameName = '未获取'
     let gameHeadUrl =
@@ -169,6 +174,8 @@ export default class mcGachaCard {
         goldCount,
         everyGoldCost,
         fourStarItemCount,
+        notUpGoldCount,
+        upItemTotalCost,
       },
     }
 

diff --git a/resources/html/mcGachaRecord/index.css b/resources/html/mcGachaRecord/index.css
@@ -139,6 +139,13 @@ body {
     margin-right: 10px;
 }
 
+.avatar-count {
+    font-size: 18px;
+    width: 30px;
+    margin-left: 6px;
+    z-index: 1;
+}
+
 .card-avatar {
     width: 40px;
     height: 40px;
@@ -151,7 +158,7 @@ body {
     flex-grow: 1;
     display: flex;
     align-items: center;
-    margin-left: -3px;
+    margin-left: -50px;
 }
 
 .bar {
@@ -160,9 +167,13 @@ body {
     min-width: 80px; /* 设置最小宽度防止文字放不下 */
 }
 
-.bar-label {
-    margin-left: 10px;
+.avatar-isup {
     font-size: 18px;
+    color: #FFD381;
+    width: 30px;
+    align-items: right;
+    margin-left: -30px;
+    z-index: 1;
 }
 
 .copyright {

diff --git a/resources/html/mcGachaRecord/index.html b/resources/html/mcGachaRecord/index.html
@@ -12,7 +12,7 @@
   <div class="container" id="container">
     <div class="head-box">
       <div class="title" style="color: white;">鸣潮{{cardPoolName}}记录</div>
-      <div class="label" style="color: white;">Handmade With ❤️ by TomyJan. | 当前页面正在绝赞监修中</div>
+      <div class="label" style="color: white;">Handmade With ❤️ by TomyJan.</div>
       <div class="card">
         <div class="avatar">
             <img src="{{userInfo.gameHeadUrl}}" alt="Avatar">
@@ -32,7 +32,7 @@
                 <div class="label">金卡数</div>
             </div>
             <div class="stat">
-                <div class="number">// TODO</div>
+                <div class="number">{{userInfo.gacha.notUpGoldCount}}</div>
                 <div class="label">歪 T.T</div>
             </div>
             <div class="stat">
@@ -44,7 +44,7 @@
                 <div class="label">平均出金</div>
             </div>
             <div class="stat">
-                <div class="number">// TODO</div>
+                <div class="number">{{userInfo.gacha.upItemTotalCost > 99999 ? (userInfo.gacha.upItemTotalCost / 10000).toFixed(2) + 'w': userInfo.gacha.upItemTotalCost}}</div>
                 <div class="label">UP 星声</div>
             </div>
         </div>
@@ -56,11 +56,12 @@
     <div class="cont-box">
       <div class="help-group">
         <div class="date">{{card.time.split(' ')[0].split('-')[1]}}-{{card.time.split(' ')[0].split('-')[2]}}</div>
-        <div class="avatar-name">{{ card.itemId == -1 ? '未出金' : card.itemName }}</div>
+        <div class="avatar-name" style="color: {{card.isUpItem ? "#FFD381" : "white"}};">{{ card.itemId == -1 ? '未出金' : card.itemName }}{{card.itemCount > 1 ? `x${card.itemCount}` : ""}}</div>
         <img src="{{pluResPath}}/img/common/item/mc/{{card.itemId}}.png" alt="{{card.itemName}}" class="card-avatar">
+        <div class="avatar-count">{{card.thisCardCost}}</div>
         <div class="bar-container">
-          <div class="bar" style="width: calc({{card.thisCardCost * 5}}px); background-color: {{card.thisCardCost >= 60 ? '#9D3333' : card.thisCardCost >= 30 ? '#6A39B7' : '#158B2B'}};"></div>
-          <div class="bar-label">{{card.itemCount > 1 ? `x${card.itemCount}` : ""}} 抽数: {{card.thisCardCost}} {{card.isUpItem ? "UP" : ""}}</div>
+          <div class="bar" style="width: calc({{card.thisCardCost * 5 + 20}}px); background-color: {{card.thisCardCost >= 60 ? '#9D3333' : card.thisCardCost >= 30 ? '#6A39B7' : '#158B2B'}};"></div>
+          <div class="avatar-isup">{{card.isUpItem ? "UP" : ""}}</div>
         </div>
       </div>
     </div>