|
39 | 39 | font-size: 14px;
|
40 | 40 | }
|
41 | 41 | .item {
|
| 42 | + display: flex; |
| 43 | + justify-content: space-between; |
42 | 44 | margin-top: 10px;
|
43 | 45 | }
|
44 | 46 | .el-input {
|
|
75 | 77 | .unitPriceInput {
|
76 | 78 | width: 100px;
|
77 | 79 | }
|
| 80 | + .sharesInput { |
| 81 | + width: 100px; |
| 82 | + } |
| 83 | + .input-row { |
| 84 | + display: flex; |
| 85 | + justify-content: flex-end; |
| 86 | + gap: 8px; |
| 87 | + } |
| 88 | + .input-group { |
| 89 | + display: flex; |
| 90 | + align-items: center; |
| 91 | + gap: 5px; |
| 92 | + } |
78 | 93 | .red {
|
79 | 94 | color: #f56c6c;
|
80 | 95 | }
|
@@ -152,7 +167,7 @@ <h2 style="text-align: center; color: #409eff">
|
152 | 167 | </h2>
|
153 | 168 |
|
154 | 169 | <p style="font-size: 12px; color: #696666; text-align: center">
|
155 |
| - 现在填写金额按昨日净值计算,所以今日加仓的建议明日更新持仓金额 |
| 170 | + 填写持仓份额和成本价,系统将自动计算持仓金额。持仓金额 = 份额 × 基金净值,份额保留两位小数 |
156 | 171 | </p>
|
157 | 172 | <div class="list"></div>
|
158 | 173 | <div class="footer">
|
@@ -248,28 +263,24 @@ <h2 style="text-align: center; color: #409eff">
|
248 | 263 | if (!priceDate) {
|
249 | 264 | priceDate = item.priceDate;
|
250 | 265 | }
|
251 |
| - const str = |
252 |
| - '<div class="item"><div class="name">' + |
253 |
| - item.name + |
254 |
| - '(<i class="' + |
255 |
| - (earningPercent > 0 ? 'red' : 'green') + |
256 |
| - '">' + |
257 |
| - earningPercent + |
258 |
| - '%</i>)' + |
259 |
| - '</div>' + |
260 |
| - '<div class="amount el-input">' + |
261 |
| - '持仓金额:<input type="number" class="amountInput el-input__inner" id="' + |
262 |
| - item.code + |
263 |
| - '" value="' + |
264 |
| - amount + |
265 |
| - '" /> <span class="unit">元</span> </div>' + |
266 |
| - '<div class="unitDiv el-input">' + |
267 |
| - '持仓成本价:<input type="number" class="unitPriceInput el-input__inner" id="' + |
268 |
| - item.code + |
269 |
| - '_unit" value="' + |
270 |
| - unitPrice + |
271 |
| - '" /> <span class="unit">元、</span> </div>' + |
272 |
| - '</div>'; |
| 266 | + // 持仓金额 = 基金净值 * 持有份额 |
| 267 | + const calculatedAmount = (item.shares && item.price) ? (item.shares * item.price).toFixed(2) : amount.toFixed(2); |
| 268 | + const str = ` |
| 269 | + <div class="item"> |
| 270 | + <div class="name" data-code="${item.code}"> |
| 271 | + ${item.name} |
| 272 | + (<span class="calculated-amount-text">${calculatedAmount}元</span> | <i class="${earningPercent > 0 ? 'red' : 'green'}">${earningPercent}%</i>) |
| 273 | + </div> |
| 274 | + <div class="input-row"> |
| 275 | + <div class="input-group"> |
| 276 | + 持仓成本价:<input type="number" class="unitPriceInput el-input__inner" id="${item.code}_unit" value="${unitPrice}" /> <span class="unit">元</span> |
| 277 | + </div> |
| 278 | + <div class="input-group"> |
| 279 | + 持仓份额:<input type="number" step="0.01" class="sharesInput el-input__inner" id="${item.code}_shares" value="${parseFloat(item.shares.toFixed(2)) || ''}" /> <span class="unit">份</span> |
| 280 | + </div> |
| 281 | + </div> |
| 282 | + </div> |
| 283 | + `; |
273 | 284 |
|
274 | 285 | listStr += str;
|
275 | 286 | const earnings = item.earnings || 0;
|
@@ -455,22 +466,80 @@ <h2 style="text-align: center; color: #409eff">
|
455 | 466 | }
|
456 | 467 |
|
457 | 468 | $(function () {
|
458 |
| - $('.amountInput,.unitPriceInput').on('input', function (e) { |
| 469 | + $('.unitPriceInput,.sharesInput').on('input', function (e) { |
459 | 470 | const value = e.target.value;
|
460 | 471 | if (value.length > 12) {
|
461 | 472 | e.target.value = value.slice(0, 12);
|
462 | 473 | }
|
| 474 | + |
| 475 | + // 实时计算持仓金额 |
| 476 | + const codeMatch = e.target.id.match(/^(.+)_(unit|shares)$/); |
| 477 | + if (codeMatch) { |
| 478 | + const code = codeMatch[1]; |
| 479 | + updateCalculatedAmount(code); |
| 480 | + } |
463 | 481 | });
|
| 482 | + |
| 483 | + // 份额输入框失焦时格式化为两位小数 |
| 484 | + $('.sharesInput').on('blur', function (e) { |
| 485 | + const value = parseFloat(e.target.value); |
| 486 | + if (!isNaN(value)) { |
| 487 | + e.target.value = value.toFixed(2); |
| 488 | + // 重新触发计算 |
| 489 | + const codeMatch = e.target.id.match(/^(.+)_shares$/); |
| 490 | + if (codeMatch) { |
| 491 | + const code = codeMatch[1]; |
| 492 | + updateCalculatedAmount(code); |
| 493 | + } |
| 494 | + } |
| 495 | + }); |
| 496 | + |
| 497 | + // 实时计算持仓金额的函数 |
| 498 | + function updateCalculatedAmount(code) { |
| 499 | + const sharesInput = $('#' + code + '_shares'); |
| 500 | + const nameDisplay = $('[data-code="' + code + '"] .calculated-amount-text'); |
| 501 | + |
| 502 | + // 从fundList中找到对应的基金净值 |
| 503 | + const fundItem = fundList.find(item => item.code === code); |
| 504 | + const shares = parseFloat(parseFloat(sharesInput.val()).toFixed(2)) || 0; // 份额保留两位小数 |
| 505 | + const netValue = fundItem ? fundItem.price : 0; // 使用基金净值 |
| 506 | + |
| 507 | + // 持仓金额 = 基金净值 * 持有份额 |
| 508 | + const calculatedAmount = shares && netValue ? (shares * netValue).toFixed(2) : '0.00'; |
| 509 | + |
| 510 | + // 更新名称中的金额显示 |
| 511 | + nameDisplay.text(calculatedAmount + '元'); |
| 512 | + |
| 513 | + // 重新计算总金额 |
| 514 | + updateTotalMoney(); |
| 515 | + } |
| 516 | + |
| 517 | + // 更新总金额 |
| 518 | + function updateTotalMoney() { |
| 519 | + let totalMoney = 0; |
| 520 | + $('.calculated-amount-text').each(function() { |
| 521 | + const text = $(this).text().replace('元', ''); |
| 522 | + const amount = parseFloat(text) || 0; |
| 523 | + totalMoney += amount; |
| 524 | + }); |
| 525 | + $('#totalMoney').html(totalMoney.toFixed(2)); |
| 526 | + } |
464 | 527 | $('#save').click(() => {
|
465 | 528 | // const ammountObj = {};
|
466 | 529 | let totalMoney = 0;
|
467 | 530 | fundList.forEach((item) => {
|
468 |
| - let amount = $('#' + item.code).val(); |
469 | 531 | let unitPrice = $('#' + item.code + '_unit').val();
|
470 |
| - amount = isNaN(Number(amount)) ? 0 : Number(amount); |
| 532 | + let shares = $('#' + item.code + '_shares').val(); |
| 533 | + |
471 | 534 | unitPrice = isNaN(Number(unitPrice)) ? 0 : Number(unitPrice);
|
472 |
| - item.amount = amount; // 持仓金额 |
| 535 | + shares = isNaN(Number(shares)) || shares === '' ? null : parseFloat(Number(shares).toFixed(2)); |
| 536 | + |
| 537 | + // 使用份额和基金净值计算持仓金额 |
| 538 | + const amount = shares && item.price ? shares * item.price : 0; |
| 539 | + |
| 540 | + item.amount = amount; // 持仓金额(计算得出) |
473 | 541 | item.unitPrice = unitPrice; // 成本价
|
| 542 | + item.shares = shares; // 持仓份额 |
474 | 543 | totalMoney += amount; // 持仓金额
|
475 | 544 | // 收益率
|
476 | 545 | if (unitPrice !== 0) {
|
|
0 commit comments