HEL-155: 按第三轮效果图改造管理端首页
替换借贷轧差为待审核统计卡；公司往来合计/明细合成主从模块（折叠明细）； 新增柱状图与折线图位；接入 /api/admin/dashboard 真实归集与审核队列数据。 Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
施工员
co-authored by
Cursor
multica-agent
Cursor
multica-agent
parent
ece3e53472
commit
77fc625ded
+98
-172
@@ -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>
|
||||
|
||||
+295
@@ -908,6 +908,15 @@ function updateAuditCounts() {
|
||||
if (pending) pending.textContent = unresolved.length;
|
||||
const foot = $("#auditFoot");
|
||||
if (foot) foot.textContent = `共 ${rows.length} 项 · 待审核 ${unresolved.length} 项`;
|
||||
// Keep dashboard audit card in sync with the live audit table when possible.
|
||||
// Prefer the authoritative /api/admin/dashboard payload; this is a best-effort
|
||||
// DOM fallback only when the card already exists and dashboard reload has not run.
|
||||
if ($("#dashAuditTotal") && !state.dashAuditFromApi) {
|
||||
const high = unresolved.filter((row) => row.querySelector(".pill-danger")).length;
|
||||
const medium = unresolved.filter((row) => row.querySelector(".pill-warn")).length;
|
||||
const low = Math.max(0, unresolved.length - high - medium);
|
||||
updateDashAuditCard({ total: unresolved.length, high, medium, low });
|
||||
}
|
||||
}
|
||||
|
||||
function companyStatusBadge(status) {
|
||||
@@ -983,6 +992,291 @@ function fillCompanySelects(names) {
|
||||
}
|
||||
setSelectOptions($('#openingDialog [name="from"]'), names);
|
||||
setSelectOptions($('#openingDialog [name="to"]'), names);
|
||||
setSelectOptions($("#ql-self"), names);
|
||||
setSelectOptions($("#ql-peer"), names);
|
||||
if ($("#ql-peer") && names.length > 1) $("#ql-peer").value = names[0];
|
||||
if ($("#ql-self") && names.length > 1) $("#ql-self").value = names[names.length - 1];
|
||||
}
|
||||
|
||||
function formatWan(value) {
|
||||
const num = Number(value);
|
||||
if (!Number.isFinite(num)) return "0.00";
|
||||
const abs = Math.abs(num).toLocaleString("zh-CN", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||
if (num > 0) return `+${abs}`;
|
||||
if (num < 0) return `-${abs}`;
|
||||
return abs;
|
||||
}
|
||||
|
||||
function netClass(value) {
|
||||
const num = Number(value);
|
||||
if (num > 0) return "amt-in";
|
||||
if (num < 0) return "amt-out";
|
||||
return "";
|
||||
}
|
||||
|
||||
function statusPill(label) {
|
||||
if (!label || label === "—") return '<span class="meta">—</span>';
|
||||
const map = {
|
||||
"已完成": "pill-success",
|
||||
"流水待补": "pill-warn",
|
||||
"确认中": "pill-warn",
|
||||
"未提交": "pill-danger",
|
||||
};
|
||||
return `<span class="pill ${map[label] || "pill-muted"}">${label}</span>`;
|
||||
}
|
||||
|
||||
function updateDashAuditCard(audit) {
|
||||
const totalEl = $("#dashAuditTotal");
|
||||
const footEl = $("#dashAuditFoot");
|
||||
if (!totalEl || !footEl || !audit) return;
|
||||
totalEl.innerHTML = `${audit.total ?? 0}<span class="unit">项</span>`;
|
||||
footEl.textContent = `高 ${audit.high ?? 0} 项 · 中 ${audit.medium ?? 0} 项 · 其余 ${audit.low ?? 0} 项低风险`;
|
||||
}
|
||||
|
||||
function renderBarChart(companies) {
|
||||
const host = $("#dashBarChart");
|
||||
if (!host) return;
|
||||
if (!companies.length) {
|
||||
host.innerHTML = '<div class="empty" style="padding: 36px 12px;"><div class="e-title">暂无往来分布</div><div>归集后将显示各公司期末净值</div></div>';
|
||||
return;
|
||||
}
|
||||
const values = companies.map((c) => Number(c.net_wan) || 0);
|
||||
const maxAbs = Math.max(1, ...values.map((v) => Math.abs(v)));
|
||||
const w = 560;
|
||||
const h = 220;
|
||||
const padL = 44;
|
||||
const padR = 12;
|
||||
const padT = 24;
|
||||
const padB = 36;
|
||||
const plotW = w - padL - padR;
|
||||
const plotH = h - padT - padB;
|
||||
const zeroY = padT + plotH / 2;
|
||||
const gap = 10;
|
||||
const barW = Math.max(12, (plotW - gap * companies.length) / companies.length);
|
||||
const ticks = [maxAbs, maxAbs / 2, 0, -maxAbs / 2, -maxAbs];
|
||||
const tickLines = ticks.map((t) => {
|
||||
const y = zeroY - (t / maxAbs) * (plotH / 2);
|
||||
const label = t === 0 ? "0" : (t > 0 ? `+${Math.round(t)}` : `${Math.round(t)}`);
|
||||
return `<line x1="${padL}" y1="${y}" x2="${w - padR}" y2="${y}" stroke="var(--border)" stroke-width="1"/>
|
||||
<text x="${padL - 6}" y="${y + 3}" text-anchor="end" fill="var(--muted)" font-size="10" font-family="var(--font-mono)">${label}</text>`;
|
||||
}).join("");
|
||||
const bars = companies.map((c, i) => {
|
||||
const v = Number(c.net_wan) || 0;
|
||||
const x = padL + gap / 2 + i * (barW + gap);
|
||||
const bh = (Math.abs(v) / maxAbs) * (plotH / 2);
|
||||
const y = v >= 0 ? zeroY - bh : zeroY;
|
||||
const color = v >= 0 ? "var(--success)" : "var(--danger)";
|
||||
const label = (c.name || "").replace(/河南|有限公司|科技发展/g, "").slice(0, 4) || c.name;
|
||||
const valY = v >= 0 ? y - 4 : y + bh + 11;
|
||||
return `<rect x="${x}" y="${y}" width="${barW}" height="${Math.max(bh, v === 0 ? 0 : 2)}" fill="${color}" rx="2"/>
|
||||
<text x="${x + barW / 2}" y="${valY}" text-anchor="middle" fill="${color}" font-size="10" font-family="var(--font-mono)">${formatWan(v).replace(".00", "")}</text>
|
||||
<text x="${x + barW / 2}" y="${h - 10}" text-anchor="middle" fill="var(--muted)" font-size="10">${label}</text>`;
|
||||
}).join("");
|
||||
host.innerHTML = `<svg viewBox="0 0 ${w} ${h}" width="100%" height="100%" role="img">${tickLines}<line x1="${padL}" y1="${zeroY}" x2="${w - padR}" y2="${zeroY}" stroke="var(--fg)" stroke-width="1" opacity="0.35"/>${bars}</svg>`;
|
||||
}
|
||||
|
||||
function renderLineChart(flow) {
|
||||
const host = $("#dashLineChart");
|
||||
if (!host) return;
|
||||
const labels = flow?.labels || [];
|
||||
const inflow = (flow?.inflow_wan || []).map(Number);
|
||||
const outflow = (flow?.outflow_wan || []).map(Number);
|
||||
if (!labels.length) {
|
||||
host.innerHTML = '<div class="empty" style="padding: 36px 12px;"><div class="e-title">暂无周度流水</div><div>有归集数据后显示近 7 日流入流出</div></div>';
|
||||
return;
|
||||
}
|
||||
const w = 560;
|
||||
const h = 220;
|
||||
const padL = 40;
|
||||
const padR = 12;
|
||||
const padT = 20;
|
||||
const padB = 32;
|
||||
const plotW = w - padL - padR;
|
||||
const plotH = h - padT - padB;
|
||||
const maxV = Math.max(1, ...inflow, ...outflow);
|
||||
const xAt = (i) => padL + (labels.length === 1 ? plotW / 2 : (i / (labels.length - 1)) * plotW);
|
||||
const yAt = (v) => padT + plotH - (v / maxV) * plotH;
|
||||
const pathOf = (series) => series.map((v, i) => `${i ? "L" : "M"}${xAt(i)},${yAt(v)}`).join(" ");
|
||||
const grid = [0, 0.5, 1].map((t) => {
|
||||
const y = yAt(maxV * t);
|
||||
return `<line x1="${padL}" y1="${y}" x2="${w - padR}" y2="${y}" stroke="var(--border)"/><text x="${padL - 6}" y="${y + 3}" text-anchor="end" fill="var(--muted)" font-size="10" font-family="var(--font-mono)">${Math.round(maxV * t)}</text>`;
|
||||
}).join("");
|
||||
const xLabels = labels.map((lab, i) => `<text x="${xAt(i)}" y="${h - 8}" text-anchor="middle" fill="var(--muted)" font-size="10" font-family="var(--font-mono)">${lab}</text>`).join("");
|
||||
host.innerHTML = `<svg viewBox="0 0 ${w} ${h}" width="100%" height="100%" role="img">${grid}
|
||||
<path d="${pathOf(inflow)}" fill="none" stroke="var(--success)" stroke-width="2"/>
|
||||
<path d="${pathOf(outflow)}" fill="none" stroke="var(--danger)" stroke-width="2"/>
|
||||
${inflow.map((v, i) => `<circle cx="${xAt(i)}" cy="${yAt(v)}" r="2.5" fill="var(--success)"/>`).join("")}
|
||||
${outflow.map((v, i) => `<circle cx="${xAt(i)}" cy="${yAt(v)}" r="2.5" fill="var(--danger)"/>`).join("")}
|
||||
${xLabels}
|
||||
<text x="${w - padR}" y="14" text-anchor="end" fill="var(--success)" font-size="11">流入</text>
|
||||
<text x="${w - padR - 40}" y="14" text-anchor="end" fill="var(--danger)" font-size="11">流出</text>
|
||||
</svg>`;
|
||||
}
|
||||
|
||||
function renderDashCompanyRows(companies, selectedId) {
|
||||
const tbody = $("#dashCompanyRows");
|
||||
if (!tbody) return;
|
||||
if (!companies.length) {
|
||||
tbody.innerHTML = '<tr><td colspan="4" class="muted">暂无公司或尚无归集往来</td></tr>';
|
||||
return;
|
||||
}
|
||||
tbody.replaceChildren(...companies.map((company) => {
|
||||
const tr = document.createElement("tr");
|
||||
tr.className = "clickable";
|
||||
tr.dataset.companyId = company.id;
|
||||
if (String(company.id) === String(selectedId)) {
|
||||
tr.style.background = "var(--accent-soft)";
|
||||
}
|
||||
const nameTd = document.createElement("td");
|
||||
nameTd.style.cssText = "white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;";
|
||||
nameTd.title = company.name;
|
||||
nameTd.textContent = company.name;
|
||||
const countTd = document.createElement("td");
|
||||
countTd.className = "num-col";
|
||||
countTd.textContent = String(company.detail_count ?? 0);
|
||||
const netTd = document.createElement("td");
|
||||
netTd.className = `num-col ${netClass(company.net_wan)}`;
|
||||
netTd.textContent = formatWan(company.net_wan);
|
||||
const statusTd = document.createElement("td");
|
||||
statusTd.innerHTML = statusPill(company.period_status_label);
|
||||
tr.append(nameTd, countTd, netTd, statusTd);
|
||||
return tr;
|
||||
}));
|
||||
}
|
||||
|
||||
function chevronSvg(expanded) {
|
||||
// Same inline chevron style used elsewhere in the deployed admin shell.
|
||||
if (expanded) {
|
||||
return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" style="width:12px;height:12px;display:inline-block;vertical-align:-1px;margin-right:6px;"><path d="m6 9 6 6 6-6"/></svg>';
|
||||
}
|
||||
return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" style="width:12px;height:12px;display:inline-block;vertical-align:-1px;margin-right:6px;"><path d="m9 18 6-6-6-6"/></svg>';
|
||||
}
|
||||
|
||||
function renderDashDetail(payload, { expandFirst = true } = {}) {
|
||||
const tbody = $("#dashDetailRows");
|
||||
const title = $("#dashDetailTitle");
|
||||
if (!tbody) return;
|
||||
if (!payload) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="muted">请选择左侧公司</td></tr>';
|
||||
return;
|
||||
}
|
||||
if (title) {
|
||||
title.innerHTML = `公司往来明细 · ${payload.company_name}<span class="sub" id="dashDetailSub">按对方公司分组 · 二级默认收起 · 期初待 B-45</span>`;
|
||||
}
|
||||
const groups = payload.groups || [];
|
||||
if (!groups.length) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="muted">该公司区间内暂无已归集往来</td></tr>';
|
||||
return;
|
||||
}
|
||||
const rows = [];
|
||||
groups.forEach((group, index) => {
|
||||
const expanded = expandFirst && index === 0;
|
||||
const groupTr = document.createElement("tr");
|
||||
groupTr.className = "clickable";
|
||||
groupTr.dataset.peerGroup = String(group.peer_id);
|
||||
groupTr.dataset.peerName = group.peer_name;
|
||||
groupTr.dataset.expanded = expanded ? "true" : "false";
|
||||
groupTr.innerHTML = `
|
||||
<td style="font-weight:550;">${chevronSvg(expanded)}<span data-peer-label>${group.peer_name}</span></td>
|
||||
<td class="num-col">${group.count}</td>
|
||||
<td class="num-col meta">—</td>
|
||||
<td class="num-col">${Number(group.debit_wan).toLocaleString("zh-CN", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</td>
|
||||
<td class="num-col">${Number(group.credit_wan).toLocaleString("zh-CN", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</td>
|
||||
<td class="num-col ${netClass(group.ending_wan)}">${formatWan(group.ending_wan)}</td>`;
|
||||
rows.push(groupTr);
|
||||
(group.lines || []).forEach((line) => {
|
||||
const lineTr = document.createElement("tr");
|
||||
lineTr.dataset.peerChild = String(group.peer_id);
|
||||
lineTr.style.display = expanded ? "" : "none";
|
||||
const dirTag = line.direction === "debit"
|
||||
? '<span class="tag">借</span>'
|
||||
: '<span class="tag">贷</span>';
|
||||
lineTr.innerHTML = `
|
||||
<td style="padding-left: 28px;">${dirTag} <span class="meta">${line.date}</span> ${line.summary}</td>
|
||||
<td class="num-col">1</td>
|
||||
<td class="num-col meta">—</td>
|
||||
<td class="num-col">${line.direction === "debit" ? Number(line.amount_wan).toLocaleString("zh-CN", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : "—"}</td>
|
||||
<td class="num-col">${line.direction === "credit" ? Number(line.amount_wan).toLocaleString("zh-CN", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : "—"}</td>
|
||||
<td class="num-col meta">—</td>`;
|
||||
rows.push(lineTr);
|
||||
});
|
||||
});
|
||||
tbody.replaceChildren(...rows);
|
||||
}
|
||||
|
||||
async function loadDashCompanyDetail(companyId) {
|
||||
if (!companyId) return;
|
||||
state.dashSelectedId = companyId;
|
||||
renderDashCompanyRows(state.dashCompanies || [], companyId);
|
||||
const tbody = $("#dashDetailRows");
|
||||
if (tbody) tbody.innerHTML = '<tr class="loading-row"><td colspan="6">加载中…</td></tr>';
|
||||
const from = state.dashFrom || "2026-01-01";
|
||||
const cutoff = state.dashCutoff || "2026-08-20";
|
||||
const response = await fetch(`/api/admin/dashboard/companies/${companyId}?from=${encodeURIComponent(from)}&cutoff=${encodeURIComponent(cutoff)}`).catch(() => null);
|
||||
if (!response?.ok) {
|
||||
if (tbody) tbody.innerHTML = '<tr><td colspan="6" class="muted">明细加载失败</td></tr>';
|
||||
return;
|
||||
}
|
||||
const result = await response.json().catch(() => null);
|
||||
renderDashDetail(result);
|
||||
}
|
||||
|
||||
async function loadAdminDashboard() {
|
||||
if (!$("#dashCompanyRows")) return;
|
||||
const response = await fetch("/api/admin/dashboard?from=2026-01-01&cutoff=2026-08-20").catch(() => null);
|
||||
if (!response?.ok) {
|
||||
$("#dashCompanyRows").innerHTML = '<tr><td colspan="4" class="muted">总览加载失败</td></tr>';
|
||||
return;
|
||||
}
|
||||
const data = await response.json().catch(() => null);
|
||||
if (!data || data.status !== "ok") {
|
||||
$("#dashCompanyRows").innerHTML = '<tr><td colspan="4" class="muted">总览加载失败</td></tr>';
|
||||
return;
|
||||
}
|
||||
state.dashCompanies = data.companies || [];
|
||||
state.dashFrom = data.from_date;
|
||||
state.dashCutoff = data.cutoff;
|
||||
updateDashAuditCard(data.audit);
|
||||
state.dashAuditFromApi = true;
|
||||
const statusHead = $("#dashStatusHead");
|
||||
if (statusHead && data.period_month) statusHead.textContent = `${data.period_month}月状态`;
|
||||
const listSub = $("#dashListSub");
|
||||
if (listSub) listSub.textContent = `${data.from_date} 至 ${data.cutoff} · 单位：万元`;
|
||||
renderBarChart(state.dashCompanies);
|
||||
renderLineChart(data.weekly_flow);
|
||||
const selected = state.dashSelectedId || state.dashCompanies[0]?.id;
|
||||
renderDashCompanyRows(state.dashCompanies, selected);
|
||||
if (selected) await loadDashCompanyDetail(selected);
|
||||
}
|
||||
|
||||
function initDashboard() {
|
||||
if (!$("#companyMasterDetail")) return;
|
||||
$("#dashCompanyRows")?.addEventListener("click", (event) => {
|
||||
const tr = event.target.closest("tr[data-company-id]");
|
||||
if (!tr) return;
|
||||
loadDashCompanyDetail(tr.dataset.companyId);
|
||||
});
|
||||
$("#dashDetailRows")?.addEventListener("click", (event) => {
|
||||
const tr = event.target.closest("tr[data-peer-group]");
|
||||
if (!tr) return;
|
||||
const peerId = tr.dataset.peerGroup;
|
||||
const open = tr.dataset.expanded !== "true";
|
||||
tr.dataset.expanded = open ? "true" : "false";
|
||||
const nameCell = tr.children[0];
|
||||
if (nameCell) {
|
||||
nameCell.innerHTML = `${chevronSvg(open)}<span data-peer-label>${tr.dataset.peerName || ""}</span>`;
|
||||
}
|
||||
$$('#dashDetailRows tr[data-peer-child]').forEach((child) => {
|
||||
if (child.dataset.peerChild === peerId) child.style.display = open ? "" : "none";
|
||||
});
|
||||
});
|
||||
$("#company-search")?.addEventListener("input", function () {
|
||||
const q = this.value.trim();
|
||||
$$("#dashCompanyRows tr[data-company-id]").forEach((tr) => {
|
||||
tr.style.display = (!q || tr.textContent.includes(q)) ? "" : "none";
|
||||
});
|
||||
});
|
||||
loadAdminDashboard();
|
||||
}
|
||||
|
||||
async function loadAdminCompanies() {
|
||||
@@ -1004,6 +1298,7 @@ function initAdmin() {
|
||||
renderStoredAdminReviews();
|
||||
updateAuditCounts();
|
||||
loadAdminCompanies();
|
||||
initDashboard();
|
||||
|
||||
let activeAuditType = "all";
|
||||
function filterAuditRows() {
|
||||
|
||||
Reference in New Issue
Block a user