qiukai/opc-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 首页表格优化 — 列重排+项目费用回血+正负着色+命名统一

Browse Source 
- 列顺序:年度累计→上季度累计→上月累计→本季度累计→季环比→本月累计→月环比
- 业务财务概览加回项目费用行(橙色,现金流之前)
- 本月新增→本月累计,季度累计→本季度累计
- 现金流/项目利润/部门净利:正值绿负值红
- 部门利润→部门毛利
This commit is contained in:
mac
2026-07-06 19:34:24 +08:00
parent 1b88366ba0
commit ac312741df
1 changed files with 64 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
static/modules/home.js
View File

@@ -6,58 +6,65 @@ function renderHome() {
const moneyInt = (v) => `${Math.round(Number(v || 0)).toLocaleString("zh-CN")} 元`;
const rows1 = [
["年度累计", moneyInt(m.signed_annual || m.signed_amount)],
["季度累计", moneyInt(m.signed_q2 || 0)],
["本月新增", moneyInt(m.signed_month || 0)],
["上季度累计", moneyInt(m.signed_prev_q || 0)],
["本季度累计", moneyInt(m.signed_q2 || 0)],
["本月累计", moneyInt(m.signed_month || 0)],
["上本季度累计", moneyInt(m.signed_prev_q || 0)],
["上月累计", moneyInt(m.signed_prev_month || 0)],
];
const rows2 = [
["年度累计", moneyInt(m.revenue_annual)],
["季度累计", moneyInt(m.revenue_q2)],
["本月新增", moneyInt(m.monthly_revenue)],
["上季度累计", moneyInt(m.revenue_prev_q || 0)],
["本季度累计", moneyInt(m.revenue_q2)],
["本月累计", moneyInt(m.monthly_revenue)],
["上本季度累计", moneyInt(m.revenue_prev_q || 0)],
["上月累计", moneyInt(m.revenue_prev_month || 0)],
];
const rows3 = [
["年度累计", moneyInt(m.gross_annual)],
["季度累计", moneyInt(m.gross_q2)],
["本月新增", moneyInt(m.monthly_net_profit)],
["上季度累计", moneyInt(m.gross_prev_q || 0)],
["本季度累计", moneyInt(m.gross_q2)],
["本月累计", moneyInt(m.monthly_net_profit)],
["上本季度累计", moneyInt(m.gross_prev_q || 0)],
["上月累计", moneyInt(m.gross_prev_month || 0)],
];
const rows4 = [
["年度累计", moneyInt(m.payment_annual || 0)],
["季度累计", moneyInt(m.payment_q2 || 0)],
["本月新增", moneyInt(m.payment_month || 0)],
["上季度累计", moneyInt(m.payment_prev_q || 0)],
["本季度累计", moneyInt(m.payment_q2 || 0)],
["本月累计", moneyInt(m.payment_month || 0)],
["上本季度累计", moneyInt(m.payment_prev_q || 0)],
["上月累计", moneyInt(m.payment_prev_month || 0)],
];
const rows5 = [
["年度累计", moneyInt(m.cost_annual || 0)],
["季度累计", moneyInt(m.cost_q2 || 0)],
["本月新增", moneyInt(m.cost_month || 0)],
["上季度累计", moneyInt(m.cost_prev_q || 0)],
["本季度累计", moneyInt(m.cost_q2 || 0)],
["本月累计", moneyInt(m.cost_month || 0)],
["上本季度累计", moneyInt(m.cost_prev_q || 0)],
["上月累计", moneyInt(m.cost_prev_month || 0)],
];
const rows7 = [
["年度累计", moneyInt(m.paid_annual || 0)],
["季度累计", moneyInt(m.paid_q2 || 0)],
["本月新增", moneyInt(m.paid_month || 0)],
["上季度累计", moneyInt(m.paid_prev_q || 0)],
["本季度累计", moneyInt(m.paid_q2 || 0)],
["本月累计", moneyInt(m.paid_month || 0)],
["上本季度累计", moneyInt(m.paid_prev_q || 0)],
["上月累计", moneyInt(m.paid_prev_month || 0)],
];
const rowsProjExpense = [
["年度累计", moneyInt(m.proj_expense_annual || 0)],
["本季度累计", moneyInt(m.proj_expense_q2 || 0)],
["本月累计", moneyInt(m.proj_expense_month || 0)],
["上本季度累计", moneyInt(m.proj_expense_prev_q || 0)],
["上月累计", moneyInt(m.proj_expense_prev_month || 0)],
];
const rows8 = [
["年度累计", moneyInt(m.cashflow_annual || 0)],
["季度累计", moneyInt(m.cashflow_q2 || 0)],
["本月新增", moneyInt(m.cashflow_month || 0)],
["上季度累计", moneyInt(m.cashflow_prev_q || 0)],
["本季度累计", moneyInt(m.cashflow_q2 || 0)],
["本月累计", moneyInt(m.cashflow_month || 0)],
["上本季度累计", moneyInt(m.cashflow_prev_q || 0)],
["上月累计", moneyInt(m.cashflow_prev_month || 0)],
];
const rows9 = [
["年度累计", moneyInt(m.profit_annual || 0)],
["季度累计", moneyInt(m.profit_q2 || 0)],
["本月新增", moneyInt(m.profit_month || 0)],
["上季度累计", moneyInt(m.profit_prev_q || 0)],
["本季度累计", moneyInt(m.profit_q2 || 0)],
["本月累计", moneyInt(m.profit_month || 0)],
["上本季度累计", moneyInt(m.profit_prev_q || 0)],
["上月累计", moneyInt(m.profit_prev_month || 0)],
];
const qoq = (cur, prev) => {
@@ -67,25 +74,34 @@ function renderHome() {
const sign = pct >= 0 ? '+' : '';
return '<span class="' + cls + '">' + sign + pct + '%</span>';
};
const COLORS = ['text-slate-700','text-blue-600','text-green-600','text-amber-600','text-rose-600','text-purple-600','text-cyan-600','text-indigo-600'];
const LABELS = ['合同金额','确收金额','确收毛利','回款金额','应付金额','已付','现金流','项目利润'];
const Q_FIELDS = [m.signed_q2||0, m.revenue_q2, m.gross_q2, m.payment_q2||0, m.cost_q2||0, m.paid_q2||0, m.cashflow_q2||0, m.profit_q2||0];
const Q_PREV = [m.signed_prev_q||0, m.revenue_prev_q||0, m.gross_prev_q||0, m.payment_prev_q||0, m.cost_prev_q||0, m.paid_prev_q||0, m.cashflow_prev_q||0, m.profit_prev_q||0];
const M_FIELDS = [m.signed_month||0, m.monthly_revenue, m.monthly_net_profit, m.payment_month||0, m.cost_month||0, m.paid_month||0, m.cashflow_month||0, m.profit_month||0];
const M_PREV = [m.signed_prev_month||0, m.revenue_prev_month||0, m.gross_prev_month||0, m.payment_prev_month||0, m.cost_prev_month||0, m.paid_prev_month||0, m.cashflow_prev_month||0, m.profit_prev_month||0];
const ROWS = [rows1, rows2, rows3, rows4, rows5, rows7, rows8, rows9];
var thead = '<tr class="border-b border-slate-200"><th class="py-2 text-left text-slate-500">指标</th><th class="py-2 text-right font-semibold text-slate-700">年度累计</th><th class="py-2 text-right font-semibold text-slate-700">季度累计</th><th class="py-2 text-right font-semibold text-slate-400">季环比</th><th class="py-2 text-right font-semibold text-slate-700">本月新增</th><th class="py-2 text-right font-semibold text-slate-400">月环比</th><th class="py-2 text-right font-semibold text-slate-700">上季度累计</th><th class="py-2 text-right font-semibold text-slate-700">上月累计</th></tr>';
const COLORS = ['text-slate-700','text-blue-600','text-green-600','text-amber-600','text-rose-600','text-purple-600','text-orange-600','text-cyan-600','text-indigo-600'];
const LABELS = ['合同金额','确收金额','确收毛利','回款金额','应付金额','已付','项目费用','现金流','项目利润'];
const Q_FIELDS = [m.signed_q2||0, m.revenue_q2, m.gross_q2, m.payment_q2||0, m.cost_q2||0, m.paid_q2||0, m.proj_expense_q2||0, m.cashflow_q2||0, m.profit_q2||0];
const Q_PREV = [m.signed_prev_q||0, m.revenue_prev_q||0, m.gross_prev_q||0, m.payment_prev_q||0, m.cost_prev_q||0, m.paid_prev_q||0, m.proj_expense_prev_q||0, m.cashflow_prev_q||0, m.profit_prev_q||0];
const M_FIELDS = [m.signed_month||0, m.monthly_revenue, m.monthly_net_profit, m.payment_month||0, m.cost_month||0, m.paid_month||0, m.proj_expense_month||0, m.cashflow_month||0, m.profit_month||0];
const M_PREV = [m.signed_prev_month||0, m.revenue_prev_month||0, m.gross_prev_month||0, m.payment_prev_month||0, m.cost_prev_month||0, m.paid_prev_month||0, m.proj_expense_prev_month||0, m.cashflow_prev_month||0, m.profit_prev_month||0];
const ROWS = [rows1, rows2, rows3, rows4, rows5, rows7, rowsProjExpense, rows8, rows9];
// 现金流和项目利润的原始值数组，用于正负着色
const CF_RAW = [m.cashflow_annual||0, m.cashflow_q2||0, m.cashflow_month||0, m.cashflow_prev_q||0, m.cashflow_prev_month||0];
const PF_RAW = [m.profit_annual||0, m.profit_q2||0, m.profit_month||0, m.profit_prev_q||0, m.profit_prev_month||0];
var valCls = function(ri) { return (ri === 7 || ri === 8) ? '' : 'text-slate-800'; };
var tdVal = function(ri, col, val) {
if (ri === 7) return '<td class="py-2 text-right font-semibold ' + (CF_RAW[col] >= 0 ? 'text-green-600' : 'text-red-600') + '">' + val + '</td>';
if (ri === 8) return '<td class="py-2 text-right font-semibold ' + (PF_RAW[col] >= 0 ? 'text-green-600' : 'text-red-600') + '">' + val + '</td>';
return '<td class="py-2 text-right font-semibold text-slate-800">' + val + '</td>';
};
var thead = '<tr class="border-b border-slate-200"><th class="py-2 text-left text-slate-500">指标</th><th class="py-2 text-right font-semibold text-slate-700">年度累计</th><th class="py-2 text-right font-semibold text-slate-700">上本季度累计</th><th class="py-2 text-right font-semibold text-slate-700">上月累计</th><th class="py-2 text-right font-semibold text-slate-700">本季度累计</th><th class="py-2 text-right font-semibold text-slate-400">季环比</th><th class="py-2 text-right font-semibold text-slate-700">本月累计</th><th class="py-2 text-right font-semibold text-slate-400">月环比</th></tr>';
var tbody = '';
for (var ri = 0; ri < 8; ri++) {
for (var ri = 0; ri < 9; ri++) {
var vals = ROWS[ri];
tbody += '<tr class="border-b border-slate-100 last:border-0"><td class="py-2 text-left font-semibold text-slate-700">' + LABELS[ri] + '</td>' +
'<td class="py-2 text-right font-semibold text-slate-800">' + vals[0][1] + '</td>' +
'<td class="py-2 text-right font-semibold text-slate-800">' + vals[1][1] + '</td>' +
tdVal(ri, 0, vals[0][1]) +
tdVal(ri, 3, vals[3][1]) +
tdVal(ri, 4, vals[4][1]) +
tdVal(ri, 1, vals[1][1]) +
'<td class="py-2 text-right">' + qoq(Q_FIELDS[ri], Q_PREV[ri]) + '</td>' +
'<td class="py-2 text-right font-semibold text-slate-800">' + vals[2][1] + '</td>' +
'<td class="py-2 text-right">' + qoq(M_FIELDS[ri], M_PREV[ri]) + '</td>' +
'<td class="py-2 text-right font-semibold text-slate-800">' + vals[3][1] + '</td>' +
'<td class="py-2 text-right font-semibold text-slate-800">' + vals[4][1] + '</td></tr>';
tdVal(ri, 2, vals[2][1]) +
'<td class="py-2 text-right">' + qoq(M_FIELDS[ri], M_PREV[ri]) + '</td></tr>';
}
document.querySelector("#home").innerHTML = `
<div class="grid gap-5">
@@ -97,10 +113,10 @@ function renderHome() {
["产品迭代", m.upcoming_products, "products"],
].map(([label, value, tab]) => `<button class="metric-card" onclick="switchTab('${tab}')"><span class="flex items-center gap-2 text-xs text-slate-500"><i data-lucide="gauge"></i>${label}</span><strong class="mt-2 block text-2xl">${value}</strong></button>`).join("")}
</div>`}
${card(`<h3 class="text-sm font-bold text-slate-700 mb-3">部门经营情况</h3><div class="overflow-x-auto"><table class="w-full text-sm"><thead><tr class="border-b border-slate-200"><th class="py-2 text-left text-slate-500">指标</th><th class="py-2 text-right font-semibold text-slate-700">年度累计</th><th class="py-2 text-right font-semibold text-slate-700">季度累计</th><th class="py-2 text-right font-semibold text-slate-400">季环比</th><th class="py-2 text-right font-semibold text-slate-700">本月新增</th><th class="py-2 text-right font-semibold text-slate-400">月环比</th><th class="py-2 text-right font-semibold text-slate-700">上季度累计</th><th class="py-2 text-right font-semibold text-slate-700">上月累计</th></tr></thead><tbody>
${card(`<h3 class="text-sm font-bold text-slate-700 mb-3">部门经营情况</h3><div class="overflow-x-auto"><table class="w-full text-sm"><thead><tr class="border-b border-slate-200"><th class="py-2 text-left text-slate-500">指标</th><th class="py-2 text-right font-semibold text-slate-700">年度累计</th><th class="py-2 text-right font-semibold text-slate-700">上本季度累计</th><th class="py-2 text-right font-semibold text-slate-700">上月累计</th><th class="py-2 text-right font-semibold text-slate-700">本季度累计</th><th class="py-2 text-right font-semibold text-slate-400">季环比</th><th class="py-2 text-right font-semibold text-slate-700">本月累计</th><th class="py-2 text-right font-semibold text-slate-400">月环比</th></tr></thead><tbody>
${(() => {
var d = [
['部门利润', [m.profit_annual||0, m.profit_q2||0, m.profit_month||0, m.profit_prev_q||0, m.profit_prev_month||0],
['部门毛利', [m.profit_annual||0, m.profit_q2||0, m.profit_month||0, m.profit_prev_q||0, m.profit_prev_month||0],
[m.profit_q2||0,m.profit_prev_q||0], [m.profit_month||0,m.profit_prev_month||0]],
['部门费用', [m.expense_annual||0, m.expense_q2||0, (m.expense_month||0), m.expense_prev_q||0, m.expense_prev_month||0],
[m.expense_q2||0,m.expense_prev_q||0], [(m.expense_month||0),m.expense_prev_month||0]],
@@ -114,16 +130,17 @@ function renderHome() {
]]
];
var h = '';
var netCls = function(di, raw) { return di === 2 ? (raw >= 0 ? 'text-green-600' : 'text-red-600') : 'text-slate-800'; };
for (var di = 0; di < 3; di++) {
var r = d[di];
h += '<tr class="border-b border-slate-100 last:border-0"><td class="py-2 text-left font-semibold text-slate-700">' + r[0] + '</td>' +
'<td class="py-2 text-right font-semibold text-slate-800">' + moneyInt(r[1][0]) + '</td>' +
'<td class="py-2 text-right font-semibold text-slate-800">' + moneyInt(r[1][1]) + '</td>' +
'<td class="py-2 text-right font-semibold ' + netCls(di, r[1][0]) + '">' + moneyInt(r[1][0]) + '</td>' +
'<td class="py-2 text-right font-semibold ' + netCls(di, r[1][3]) + '">' + moneyInt(r[1][3]) + '</td>' +
'<td class="py-2 text-right font-semibold ' + netCls(di, r[1][4]) + '">' + moneyInt(r[1][4]) + '</td>' +
'<td class="py-2 text-right font-semibold ' + netCls(di, r[1][1]) + '">' + moneyInt(r[1][1]) + '</td>' +
'<td class="py-2 text-right">' + qoq(r[2][0], r[2][1]) + '</td>' +
'<td class="py-2 text-right font-semibold text-slate-800">' + moneyInt(r[1][2]) + '</td>' +
'<td class="py-2 text-right">' + qoq(r[3][0], r[3][1]) + '</td>' +
'<td class="py-2 text-right font-semibold text-slate-800">' + moneyInt(r[1][3]) + '</td>' +
'<td class="py-2 text-right font-semibold text-slate-800">' + moneyInt(r[1][4]) + '</td></tr>';
'<td class="py-2 text-right font-semibold ' + netCls(di, r[1][2]) + '">' + moneyInt(r[1][2]) + '</td>' +
'<td class="py-2 text-right">' + qoq(r[3][0], r[3][1]) + '</td></tr>';
}
return h;
})()}