leefer/caiwuzongzhang
1
0
Fork 0
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

HEL-155: 按第三轮效果图改造管理端首页

Browse Source 
替换借贷轧差为待审核统计卡；公司往来合计/明细合成主从模块（折叠明细）；
新增柱状图与折线图位；接入 /api/admin/dashboard 真实归集与审核队列数据。

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
施工员
2026-08-26 03:32:47 +00:00
co-authored by Cursor multica-agent
parent ece3e53472
commit 77fc625ded
6 changed files with 992 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/admin.html
+98 -172
View File
@@ -56,9 +56,6 @@
<h1>管理总览</h1>
<p class="page-sub">2026-01-01 至 2026-08-20，集团 6 家成员公司相互往来累计发生 8.11 亿元、392 笔明细。页面上任意数字与公司均可逐级穿透，直至银行原始流水。</p>
</div>
<div class="page-actions">
<button class="btn" data-view-link="pair">往来查询</button>
</div>
</div>
<div class="grid grid-4">
@@ -72,10 +69,10 @@
<div class="stat-value">39,040.30<span class="unit">万元</span></div>
<div class="stat-foot">6 家公司合计 · 与借方同源互证</div>
</div>
<div class="card stat-card warn">
<div class="stat-label">借贷轧差 · 未匹配</div>
<div class="stat-value">3,000.00<span class="unit">万元</span></div>
<div class="stat-foot">由单边流水与待确认往来形成，可在往来查询核对</div>
<div class="card stat-card warn" data-view-link="audit" style="cursor: pointer;">
<div class="stat-label">待审核事项 · 审核中心</div>
<div class="stat-value" id="dashAuditTotal">0<span class="unit">项</span></div>
<div class="stat-foot" id="dashAuditFoot">高 0 项 · 中 0 项 · 其余 0 项低风险</div>
</div>
<div class="card stat-card">
<div class="stat-label">7 月账期确认进度</div>
@@ -85,176 +82,118 @@
</div>
</div>
<div class="grid grid-3-2" style="margin-top: 14px;">
<div class="stack">
<div class="card" id="companyTotals">
<div class="card-head">
<span class="card-title">各公司往来合计<span class="sub">2026-01-01 至 2026-08-20 · 单位：万元 · 点击任意行查看该公司往来明细</span></span>
<input class="input" id="company-search" aria-label="搜索公司" placeholder="搜索公司…" style="width: 170px;" />
<div class="grid grid-2" style="margin-top: 14px;">
<div class="card">
<div class="card-head" style="margin-bottom: 10px;">
<span class="card-title">各公司往来分布<span class="sub">期末净值 · 单位：万元</span></span>
</div>
<div id="dashBarChart" style="height: 220px; min-width: 0;" aria-label="各公司往来分布柱状图"></div>
</div>
<div class="card">
<div class="card-head" style="margin-bottom: 10px;">
<span class="card-title">本周资金流入流出<span class="sub">集团内往来 · 单位：万元</span></span>
</div>
<div id="dashLineChart" style="height: 220px; min-width: 0;" aria-label="本周资金流入流出折线图"></div>
</div>
</div>
<div class="card" id="companyMasterDetail" style="margin-top: 14px; padding: 0; overflow: hidden;">
<div class="grid grid-1-2" style="gap: 0; align-items: stretch; height: 492px;">
<div style="border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; min-height: 0;">
<div class="card-head" style="padding: 10px 14px 8px; margin-bottom: 0; gap: 8px;">
<span class="card-title" style="min-width: 0;">公司往来合计<span class="sub" id="dashListSub" style="display: inline; margin-left: 6px;">单位：万元</span></span>
<input class="input" id="company-search" aria-label="搜索公司" placeholder="搜索…" style="width: 120px; min-height: 28px; padding: 4px 8px; flex: none;" />
</div>
<div class="table-wrap" style="border: 0;">
<table class="ds-table">
<div class="table-wrap" style="border: 0; border-radius: 0; flex: 1; min-height: 0; overflow: auto;">
<table class="ds-table" id="dashCompanyTable" style="min-width: 0;">
<thead>
<tr><th>公司</th><th class="num-col">借方合计</th><th class="num-col">贷方合计</th><th class="num-col">明细笔数</th><th class="num-col">期末净往来</th><th>7 月状态</th></tr>
</thead>
<tbody>
<tr class="clickable" data-view-link="pair">
<td class="cell-main">金牛煤业<span class="cell-sub">河南金牛煤业有限公司</span></td>
<td class="num-col">18,420.50</td>
<td class="num-col">12,386.00</td>
<td class="num-col">128</td>
<td class="num-col amt-in">+6,034.50</td>
<td><span class="pill pill-success">已完成</span></td>
</tr>
<tr class="clickable" data-view-link="pair">
<td class="cell-main">金牛物流<span class="cell-sub">河南金牛物流有限公司</span></td>
<td class="num-col">6,208.75</td>
<td class="num-col">7,914.30</td>
<td class="num-col">74</td>
<td class="num-col amt-out">-1,705.55</td>
<td><span class="pill pill-success">已完成</span></td>
</tr>
<tr class="clickable" data-view-link="pair">
<td class="cell-main">金牛贸易<span class="cell-sub">河南金牛贸易有限公司</span></td>
<td class="num-col">9,850.00</td>
<td class="num-col">9,102.40</td>
<td class="num-col">86</td>
<td class="num-col amt-in">+747.60</td>
<td><span class="pill pill-success">已完成</span></td>
</tr>
<tr class="clickable" data-view-link="pair">
<td class="cell-main">金牛置业<span class="cell-sub">河南金牛置业有限公司</span></td>
<td class="num-col">3,960.20</td>
<td class="num-col">5,730.00</td>
<td class="num-col">52</td>
<td class="num-col amt-out">-1,769.80</td>
<td><span class="pill pill-warn">流水待补</span></td>
</tr>
<tr class="clickable" data-view-link="pair">
<td class="cell-main">金牛新能源<span class="cell-sub">河南金牛新能源有限公司</span></td>
<td class="num-col">2,130.00</td>
<td class="num-col">2,886.00</td>
<td class="num-col">31</td>
<td class="num-col amt-out">-756.00</td>
<td><span class="pill pill-warn">确认中</span></td>
</tr>
<tr class="clickable" data-view-link="pair">
<td class="cell-main">金牛农业<span class="cell-sub">河南金牛农业科技发展有限公司</span></td>
<td class="num-col">1,470.85</td>
<td class="num-col">1,021.60</td>
<td class="num-col">21</td>
<td class="num-col amt-in">+449.25</td>
<td><span class="pill pill-danger">未提交</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合计 · 6 家</td>
<td class="num-col">42,040.30</td>
<td class="num-col">39,040.30</td>
<td class="num-col">392</td>
<td class="num-col">+3,000.00</td>
<td>—</td>
<th style="padding: 6px 12px;">公司</th>
<th class="num-col" style="padding: 6px 12px;">明细笔数</th>
<th class="num-col" style="padding: 6px 12px;">期末净值</th>
<th id="dashStatusHead" style="padding: 6px 12px;">状态</th>
</tr>
</tfoot>
</thead>
<tbody id="dashCompanyRows">
<tr class="loading-row"><td colspan="4">加载中…</td></tr>
</tbody>
</table>
</div>
</div>
<div class="card">
<div class="card-head">
<span class="card-title">公司对查<span class="sub">选择两家公司，直达它们之间的往来明细</span></span>
<div style="display: flex; flex-direction: column; min-width: 0; min-height: 0;">
<div class="card-head" style="padding: 10px 14px 8px; margin-bottom: 0;">
<span class="card-title" id="dashDetailTitle">公司往来明细<span class="sub" id="dashDetailSub">选择左侧公司查看会计式分级明细</span></span>
</div>
<div class="row" style="align-items: flex-end; flex-wrap: wrap;">
<div class="field" style="flex: 1 1 190px; margin-bottom: 0;">
<label for="ql-self">本方公司</label>
<select class="select" id="ql-self">
<option>河南金牛煤业有限公司</option>
<option>河南金牛物流有限公司</option>
<option>河南金牛贸易有限公司</option>
<option>河南金牛置业有限公司</option>
<option>河南金牛新能源有限公司</option>
<option selected>河南金牛农业科技发展有限公司</option>
</select>
</div>
<span class="meta" style="padding: 0 4px 9px; flex: none;">↔</span>
<div class="field" style="flex: 1 1 190px; margin-bottom: 0;">
<label for="ql-peer">对方公司</label>
<select class="select" id="ql-peer">
<option selected>河南金牛煤业有限公司</option>
<option>河南金牛物流有限公司</option>
<option>河南金牛贸易有限公司</option>
<option>河南金牛置业有限公司</option>
<option>河南金牛新能源有限公司</option>
</select>
</div>
</div>
<div class="detail-box row-between" style="margin-top: 12px;">
<div>
<div style="font-weight: 650;">金牛农业 → 应收 386.24 万元</div>
<div class="meta" style="margin-top: 2px;">14 笔（借 9 / 贷 5）· 最早未结 2026-03-12</div>
</div>
<button class="btn btn-sm" data-view-link="pair">查看逐笔往来</button>
<div class="table-wrap" id="dashDetailWrap" style="border: 0; border-radius: 0; flex: 1; min-height: 0; overflow: auto;">
<table class="ds-table" id="dashDetailTable" style="min-width: 0;">
<thead>
<tr>
<th style="padding: 6px 12px;">对方 / 摘要</th>
<th class="num-col" style="padding: 6px 12px;">笔数</th>
<th class="num-col" style="padding: 6px 12px;">期初</th>
<th class="num-col" style="padding: 6px 12px;">本期借方</th>
<th class="num-col" style="padding: 6px 12px;">本期贷方</th>
<th class="num-col" style="padding: 6px 12px;">期末</th>
</tr>
</thead>
<tbody id="dashDetailRows">
<tr><td colspan="6" class="muted">请选择左侧公司</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="stack">
<div class="card">
<div class="card-head">
<span class="card-title">待办队列<span class="sub">12 项待处理 · 下方为影响结账的前 4 项，从第 1 项开始</span></span>
<button class="btn btn-sm btn-ghost" data-view-link="audit">审核中心 →</button>
<div class="grid grid-2" style="margin-top: 14px;">
<div class="card">
<div class="card-head">
<span class="card-title">公司对查<span class="sub">选择两家公司，直达它们之间的往来明细</span></span>
</div>
<div class="row" style="align-items: flex-end; flex-wrap: wrap;">
<div class="field" style="flex: 1 1 190px; margin-bottom: 0;">
<label for="ql-self">本方公司</label>
<select class="select" id="ql-self">
<option>河南金牛煤业有限公司</option>
<option>河南金牛物流有限公司</option>
<option>河南金牛贸易有限公司</option>
<option>河南金牛置业有限公司</option>
<option>河南金牛新能源有限公司</option>
<option selected>河南金牛农业科技发展有限公司</option>
</select>
</div>
<div class="list-row" data-detail="admin-gap">
<span class="pill pill-danger">高</span>
<div class="lr-main">
<div class="lr-title">金牛置业 · 中行尾号 8821 账户 7 月流水断档 11 天</div>
<div class="lr-sub">07-06 至 07-16 无流水，影响与金牛煤业 320 万元往来的归集</div>
</div>
<button class="btn btn-sm" data-view-link="audit">去审核</button>
</div>
<div class="list-row" data-detail="admin-unsubmitted">
<span class="pill pill-danger">高</span>
<div class="lr-main">
<div class="lr-title">金牛农业 7 月全部账户未提交流水</div>
<div class="lr-sub">已发 2 次系统提醒，最近一次 08-18，仍未响应</div>
</div>
<button class="btn btn-sm" data-view-link="reminders">再提醒</button>
</div>
<div class="list-row" data-detail="admin-unilateral">
<span class="pill pill-warn">中</span>
<div class="lr-main">
<div class="lr-title">金牛新能源 ↔ 金牛贸易 3 笔单边流水待对方证据</div>
<div class="lr-sub">合计 486 万元，需新能源侧选择对方银行流水佐证</div>
</div>
<button class="btn btn-sm" data-view-link="audit">去审核</button>
</div>
<div class="list-row" data-detail="admin-subject">
<span class="pill pill-warn">中</span>
<div class="lr-main">
<div class="lr-title">5 笔手工记录待确认往来科目</div>
<div class="lr-sub">应收 / 其他应收待判定，涉及煤业、物流、贸易</div>
</div>
<button class="btn btn-sm" data-view-link="audit">去审核</button>
</div>
<div class="table-foot">
<span>其余 8 项为低风险与已挂起事项</span>
<button class="btn btn-sm btn-ghost" data-view-link="audit" style="color: var(--fg); font-weight: 550;">进入审核中心 →</button>
<span class="meta" style="padding: 0 4px 9px; flex: none;">↔</span>
<div class="field" style="flex: 1 1 190px; margin-bottom: 0;">
<label for="ql-peer">对方公司</label>
<select class="select" id="ql-peer">
<option selected>河南金牛煤业有限公司</option>
<option>河南金牛物流有限公司</option>
<option>河南金牛贸易有限公司</option>
<option>河南金牛置业有限公司</option>
<option>河南金牛新能源有限公司</option>
</select>
</div>
</div>
<div class="card">
<div class="card-head">
<span class="card-title">账期与结账<span class="sub" id="dashboardPeriodSub">每月 5 日结账 · 全局起算日 2026-01-01</span></span>
<div class="detail-box row-between" style="margin-top: 12px;">
<div>
<div style="font-weight: 650;">金牛农业 → 应收 386.24 万元</div>
<div class="meta" style="margin-top: 2px;">14 笔（借 9 / 贷 5）· 最早未结 2026-03-12</div>
</div>
<dl class="kv">
<dt>当前账期</dt><dd>2026-07 · 进行中</dd>
<dt>结账日</dt><dd style="color: color-mix(in oklch, var(--warn) 78%, black); font-weight: 650;">2026-08-29（顺延）· 距今 9 天</dd>
<dt>上一账期</dt><dd>2026-06 · 已于 07-03 结账</dd>
</dl>
<button class="btn" data-view-link="settings" style="width: 100%; margin-top: 14px;">进入结账检查</button>
<button class="btn btn-sm" data-view-link="pair">查看逐笔往来</button>
</div>
</div>
<div class="card">
<div class="card-head">
<span class="card-title">账期与结账<span class="sub" id="dashboardPeriodSub">每月 5 日结账 · 全局起算日 2026-01-01</span></span>
</div>
<dl class="kv">
<dt>当前账期</dt><dd>2026-07 · 进行中</dd>
<dt>结账日</dt><dd style="color: color-mix(in oklch, var(--warn) 78%, black); font-weight: 650;">2026-08-29（顺延）· 距今 9 天</dd>
<dt>上一账期</dt><dd>2026-06 · 已于 07-03 结账</dd>
</dl>
<button class="btn" data-view-link="settings" style="width: 100%; margin-top: 14px;">进入结账检查</button>
</div>
</div>
</section>
@@ -1039,18 +978,5 @@
</div>
<div class="toast-region" id="toastRegion" aria-live="polite"></div>
<script src="app.js?v=5"></script>
<script>
(function () {
var input = document.getElementById("company-search");
if (!input) return;
input.addEventListener("input", function () {
var q = this.value.trim();
var rows = document.querySelectorAll("#companyTotals tbody tr");
rows.forEach(function (tr) {
tr.style.display = (!q || tr.textContent.indexOf(q) > -1) ? "" : "none";
});
});
})();
</script>
</body>
</html>