Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
8952829fe5 | ||
|
|
41f4ac1b1b |
@@ -113,11 +113,11 @@ function renderFinance() {
|
||||
const finHeaderBase = `<div class="flex items-center gap-2"><button onclick="setFinView('overview')" class="px-3 py-1 rounded text-sm font-medium ${state.finView==='overview'?'bg-blue-600 text-white':'bg-slate-100 text-slate-600 hover:bg-slate-200'}">总视图</button><span class="text-slate-300 mx-2">|</span><span class="text-sm text-slate-500">按季度：</span>${qLabels.map((q,i) => `<button onclick="setFinQuarter(${i})" class="px-3 py-1 rounded text-sm font-medium ${state.finView==='quarterly'&&activeQ===i?'bg-blue-600 text-white':'bg-slate-100 text-slate-600 hover:bg-slate-200'}">${q}</button>`).join('')}<span class="text-slate-300 mx-2">|</span><span class="text-sm text-slate-500">按月度：</span>${activeMonths.map(m => { const ms = `2026-${String(m).padStart(2,'0')}`; return `<button onclick="setFinMonth('${ms}')" class="px-3 py-1 rounded text-sm font-medium ${state.finView==='monthly'&&state.finMonth===ms?'bg-blue-600 text-white':'bg-slate-100 text-slate-600 hover:bg-slate-200'}">${m}月</button>`; }).join('')}</div>`;
|
||||
const finAddBtn = `<button class="btn btn-primary btn-sm" onclick="openFinanceModal()">新增财务项目</button>`;
|
||||
|
||||
const finFilterTabs = `<div class="finance-tabs" style="padding:0;border-bottom:1px solid #e2e8f0;margin-bottom:0"><button onclick="switchFinFilter('overview')" class="finance-tab${state.finFilter==='overview'?' active':''}" style="font-size:14px;font-weight:600">总览</button><button onclick="switchFinFilter('projects')" class="finance-tab${state.finFilter==='projects'?' active':''}" style="font-size:14px;font-weight:600">项目 (${pfs.length})</button><button onclick="switchFinFilter('expense')" class="finance-tab${state.finFilter==='expense'?' active':''}" style="font-size:14px;font-weight:600">平台费用</button></div>`;
|
||||
const finFilterTabs = `<div class="finance-tabs" style="padding:0;border-bottom:1px solid #e2e8f0;margin-bottom:0"><button onclick="switchFinFilter('overview')" class="finance-tab${state.finFilter==='overview'?' active':''}" style="font-size:14px;font-weight:600">月度总览</button><button onclick="switchFinFilter('quarterlyOverview')" class="finance-tab${state.finFilter==='quarterlyOverview'?' active':''}" style="font-size:14px;font-weight:600">季度总览</button><button onclick="switchFinFilter('projects')" class="finance-tab${state.finFilter==='projects'?' active':''}" style="font-size:14px;font-weight:600">项目 (${pfs.length})</button><button onclick="switchFinFilter('expense')" class="finance-tab${state.finFilter==='expense'?' active':''}" style="font-size:14px;font-weight:600">平台费用</button></div>`;
|
||||
|
||||
document.querySelector("#finance").innerHTML = `<div class="grid gap-4">
|
||||
${finFilterTabs}
|
||||
${state.finFilter !== 'expense' && state.finFilter !== 'overview' ? card(`<div class="flex justify-between items-center"><div class="flex items-center gap-2">${finHeaderBase}</div>${finAddBtn}</div>`, "p-4") : ''}
|
||||
${state.finFilter !== 'expense' && state.finFilter !== 'overview' && state.finFilter !== 'quarterlyOverview' ? card(`<div class="flex justify-between items-center"><div class="flex items-center gap-2">${finHeaderBase}</div>${finAddBtn}</div>`, "p-4") : ''}
|
||||
<div id="financeModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40" onclick="closeFinanceModal()"><div class="bg-white rounded-2xl shadow-2xl w-full max-w-6xl mx-4 max-h-[92vh] overflow-y-auto" onclick="event.stopPropagation()"><div class="sticky top-0 z-10 bg-white/95 backdrop-blur border-b border-slate-100 px-8 py-5 flex items-center justify-between"><div><h3 class="text-xl font-bold text-slate-800" id="financeModalTitle">新增项目财务</h3><p class="text-xs text-slate-400 mt-0.5">填写项目财务信息与月度预算</p></div><div class="flex items-center gap-2"><button class="btn btn-ghost btn-sm text-red-600 hidden" id="financeDeleteBtn" onclick="deleteFinanceItem()"><i data-lucide="trash-2"></i>删除</button><button class="btn btn-ghost btn-sm rounded-full w-8 h-8 p-0" onclick="closeFinanceModal()"><i data-lucide="x"></i></button></div></div>
|
||||
<div class="finance-tabs">
|
||||
<button class="finance-tab active" data-tab="info" onclick="switchFinanceTab('info')"><i data-lucide="info" style="width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px"></i>基本信息</button>
|
||||
@@ -238,6 +238,10 @@ function renderFinance() {
|
||||
setTimeout(() => renderFinanceOverview(), 10);
|
||||
return `<div id="financeOverview"></div>`;
|
||||
}
|
||||
if (state.finFilter === 'quarterlyOverview') {
|
||||
setTimeout(() => renderFinanceQuarterlyOverview(), 10);
|
||||
return `<div id="financeQuarterlyOverview"></div>`;
|
||||
}
|
||||
if (state.finFilter === 'expense') {
|
||||
setTimeout(() => renderExpense(), 10);
|
||||
return `<div id="financeExpense"></div>`;
|
||||
@@ -282,14 +286,14 @@ function renderFinance() {
|
||||
return h;
|
||||
};
|
||||
const SIGNED_COLS = [
|
||||
{ key: 'customer_name', label: '项目名称' }, { key: 'sign_amount', label: '签约金额' },
|
||||
{ key: 'client_name', label: '客户' }, { key: 'customer_name', label: '项目名称' }, { key: 'sign_amount', label: '签约金额' },
|
||||
{ key: 'rev', label: '已确收' }, { key: 'gross', label: '毛利' }, { key: 'cost', label: '成本' },
|
||||
{ key: 'profit', label: '项目利润' }, { key: 'payment', label: '已回款' }, { key: 'paid', label: '已付' },
|
||||
{ key: 'cashflow', label: '现金流' }, { key: 'exe_rate', label: '执行率' }, { key: 'gross_rate', label: '毛利率' },
|
||||
{ key: 'pay_rate', label: '回款率' }, { key: 'paid_rate', label: '付款率' },
|
||||
];
|
||||
const UNSIGNED_COLS = [
|
||||
{ key: 'customer_name', label: '项目名称' }, { key: 'sign_amount', label: '签约金额' },
|
||||
{ key: 'client_name', label: '客户' }, { key: 'customer_name', label: '项目名称' }, { key: 'sign_amount', label: '签约金额' },
|
||||
{ key: 'sign_month', label: '签约月份' }, { key: 'gross', label: '毛利' }, { key: 'cost', label: '成本' },
|
||||
{ key: 'profit', label: '项目利润' },
|
||||
];
|
||||
@@ -301,7 +305,7 @@ function renderFinance() {
|
||||
return typeof v === 'object' ? [c.label, v.val, v.cls] : [c.label, v, c.color];
|
||||
});
|
||||
const thead = isUnsigned ? buildThead(UNSIGNED_COLS, 'uns') : buildThead(SIGNED_COLS, 'sig');
|
||||
const theadCols = isUnsigned ? 6 : 13;
|
||||
const theadCols = isUnsigned ? 7 : 14;
|
||||
const tbody = rows.length ? `<tbody>${rows.join("")}</tbody>` : `<tr><td colspan="${theadCols}" class="p-6 text-center text-slate-400">${emptyText}</td></tr>`;
|
||||
|
||||
const cardGrid = isUnsigned ? 'grid-cols-4' : 'grid-cols-6';
|
||||
@@ -929,55 +933,43 @@ window.deleteFinanceItem = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 总览渲染
|
||||
// 月度总览渲染
|
||||
function renderFinanceOverview() {
|
||||
const { summary, financeMonthly } = state.data;
|
||||
if (!summary) return;
|
||||
const m = summary.metrics;
|
||||
const moneyIntL = (v) => `${Math.round(Number(v || 0)).toLocaleString("zh-CN")} 元`;
|
||||
const moneyWan = (v) => {
|
||||
const n = Number(v || 0);
|
||||
return n >= 10000 ? (n / 10000).toFixed(0) + "万" : n.toLocaleString("zh-CN");
|
||||
};
|
||||
const moneyIntL = (v) => Math.round(Number(v || 0)).toLocaleString("zh-CN");
|
||||
const moneyWan = (v) => { const n = Number(v || 0); return n >= 10000 ? (n / 10000).toFixed(0) + "万" : n.toLocaleString("zh-CN"); };
|
||||
const card = (body, cls) => '<div class="card ' + (cls || 'p-4') + '">' + body + '</div>';
|
||||
|
||||
const rows1 = [["年度累计", moneyIntL(m.signed_annual || m.signed_amount)], ["本季度累计", moneyIntL(m.signed_q2 || 0)], ["本月累计", moneyIntL(m.signed_month || 0)], ["上本季度累计", moneyIntL(m.signed_prev_q || 0)], ["上月累计", moneyIntL(m.signed_prev_month || 0)]];
|
||||
const rows2 = [["年度累计", moneyIntL(m.revenue_annual || 0)], ["本季度累计", moneyIntL(m.revenue_q2 || 0)], ["本月累计", moneyIntL(m.monthly_revenue || 0)], ["上本季度累计", moneyIntL(m.revenue_prev_q || 0)], ["上月累计", moneyIntL(m.revenue_prev_month || 0)]];
|
||||
const rows3 = [["年度累计", moneyIntL(m.gross_annual || 0)], ["本季度累计", moneyIntL(m.gross_q2 || 0)], ["本月累计", moneyIntL(m.monthly_net_profit || 0)], ["上本季度累计", moneyIntL(m.gross_prev_q || 0)], ["上月累计", moneyIntL(m.gross_prev_month || 0)]];
|
||||
const rows4 = [["年度累计", moneyIntL(m.cost_annual || 0)], ["本季度累计", moneyIntL(m.cost_q2 || 0)], ["本月累计", moneyIntL(m.cost_month || 0)], ["上本季度累计", moneyIntL(m.cost_prev_q || 0)], ["上月累计", moneyIntL(m.cost_prev_month || 0)]];
|
||||
const rows5 = [["年度累计", moneyIntL(m.profit_annual || 0)], ["本季度累计", moneyIntL(m.profit_q2 || 0)], ["本月累计", moneyIntL(m.profit_month || 0)], ["上本季度累计", moneyIntL(m.profit_prev_q || 0)], ["上月累计", moneyIntL(m.profit_prev_month || 0)]];
|
||||
const rows7 = [["年度累计", moneyIntL(m.payment_annual || 0)], ["本季度累计", moneyIntL(m.payment_q2 || 0)], ["本月累计", moneyIntL(m.payment_month || 0)], ["上本季度累计", moneyIntL(m.payment_prev_q || 0)], ["上月累计", moneyIntL(m.payment_prev_month || 0)]];
|
||||
const rows8 = [["年度累计", moneyIntL(m.paid_annual || 0)], ["本季度累计", moneyIntL(m.paid_q2 || 0)], ["本月累计", moneyIntL(m.paid_month || 0)], ["上本季度累计", moneyIntL(m.paid_prev_q || 0)], ["上月累计", moneyIntL(m.paid_prev_month || 0)]];
|
||||
const rows9 = [["年度累计", moneyIntL(m.cashflow_annual || 0)], ["本季度累计", moneyIntL(m.cashflow_q2 || 0)], ["本月累计", moneyIntL(m.cashflow_month || 0)], ["上本季度累计", moneyIntL(m.cashflow_prev_q || 0)], ["上月累计", moneyIntL(m.cashflow_prev_month || 0)]];
|
||||
|
||||
const qoq = (cur, prev) => { if (!prev) return '<span class="text-slate-300">—</span>'; const pct = Math.round((cur - prev) / prev * 100); const cls = pct >= 0 ? 'text-green-600' : 'text-red-600'; const sign = pct >= 0 ? '+' : ''; return '<span class="' + cls + '">' + sign + pct + '%</span>'; };
|
||||
const fm = financeMonthly || [];
|
||||
const mLbl = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
|
||||
const LABELS = ['合同金额','确收金额','确收毛利','成本','项目利润','回款金额','已付','现金流'];
|
||||
const Q_FIELDS = [m.signed_q2||0, m.revenue_q2, m.gross_q2, m.cost_q2||0, m.profit_q2||0, m.payment_q2||0, m.paid_q2||0, m.cashflow_q2||0];
|
||||
const Q_PREV = [m.signed_prev_q||0, m.revenue_prev_q||0, m.gross_prev_q||0, m.cost_prev_q||0, m.profit_prev_q||0, m.payment_prev_q||0, m.paid_prev_q||0, m.cashflow_prev_q||0];
|
||||
const M_FIELDS = [m.signed_month||0, m.monthly_revenue, m.monthly_net_profit, m.cost_month||0, m.profit_month||0, m.payment_month||0, m.paid_month||0, m.cashflow_month||0];
|
||||
const M_PREV = [m.signed_prev_month||0, m.revenue_prev_month||0, m.gross_prev_month||0, m.cost_prev_month||0, m.profit_prev_month||0, m.payment_prev_month||0, m.paid_prev_month||0, m.cashflow_prev_month||0];
|
||||
const ROWS = [rows1, rows2, rows3, rows4, rows5, rows7, 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 tdVal = function(ri, col, val) {
|
||||
if (ri === 4) return '<td class="py-2 text-right font-semibold ' + (PF_RAW[col] >= 0 ? 'text-green-600' : 'text-red-600') + '">' + val + '</td>';
|
||||
if (ri === 7) return '<td class="py-2 text-right font-semibold ' + (CF_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>';
|
||||
const annualVals = [m.signed_annual||m.signed_amount||0, m.revenue_annual||0, m.gross_annual||0, m.cost_annual||0, m.profit_annual||0, m.payment_annual||0, m.paid_annual||0, m.cashflow_annual||0];
|
||||
const fmFields = ['sign','revenue','gross','cost',null,'payment','paid',null];
|
||||
var thead = '<tr class="border-b border-slate-200"><th class="py-2 text-left text-slate-500 whitespace-nowrap">指标</th><th class="py-2 text-right font-semibold text-slate-700 whitespace-nowrap">年度累计</th>';
|
||||
for (var mi = 0; mi < 12; mi++) { thead += '<th class="py-2 text-right font-semibold text-slate-600 whitespace-nowrap">' + mLbl[mi] + '</th>'; }
|
||||
thead += '</tr>';
|
||||
var tbody = '';
|
||||
for (var ri = 0; ri < 8; 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>' +
|
||||
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>' +
|
||||
tdVal(ri, 2, vals[2][1]) +
|
||||
'<td class="py-2 text-right">' + qoq(M_FIELDS[ri], M_PREV[ri]) + '</td></tr>';
|
||||
var rowHtml = '<tr class="border-b border-slate-100 last:border-0"><td class="py-2 text-left font-semibold text-slate-700 whitespace-nowrap">' + LABELS[ri] + '</td>';
|
||||
rowHtml += '<td class="py-2 text-right font-semibold text-slate-800 whitespace-nowrap">' + moneyIntL(annualVals[ri]) + '</td>';
|
||||
for (var mi = 0; mi < 12; mi++) {
|
||||
var val = 0;
|
||||
if (fm[mi]) {
|
||||
if (ri === 4) { val = (fm[mi].gross || 0) - (fm[mi].cost || 0); }
|
||||
else if (ri === 7) { val = (fm[mi].payment || 0) - (fm[mi].paid || 0); }
|
||||
else { var fk = fmFields[ri]; if (fk) val = fm[mi][fk] || 0; }
|
||||
}
|
||||
var cls = 'text-slate-700';
|
||||
if (ri === 4) cls = val >= 0 ? 'text-green-600' : 'text-red-600';
|
||||
if (ri === 7) cls = val >= 0 ? 'text-green-600' : 'text-red-600';
|
||||
rowHtml += '<td class="py-2 text-right text-sm whitespace-nowrap ' + cls + '">' + moneyIntL(val) + '</td>';
|
||||
}
|
||||
tbody += rowHtml + '</tr>';
|
||||
}
|
||||
|
||||
document.querySelector("#financeOverview").innerHTML = '<div class="grid gap-5">' +
|
||||
card('<h3 class="text-sm font-bold text-slate-700">业务（项目）财务概览</h3><p class="text-xs text-slate-400 mb-3">合同 → 确收 → 毛利 → 成本 → 项目利润 → 回款 → 已付 → 现金流</p><div class="overflow-x-auto"><table class="w-full text-sm"><thead>' + thead + '</thead><tbody>' + tbody + '</tbody></table></div>', 'p-4') +
|
||||
card('<h3 class="text-sm font-bold text-slate-700">业务（项目）财务月度概览</h3><p class="text-xs text-slate-400 mb-3">合同 → 确收 → 毛利 → 成本 → 项目利润 → 回款 → 已付 → 现金流</p><div class="overflow-x-auto"><table class="w-full text-sm"><thead>' + thead + '</thead><tbody>' + tbody + '</tbody></table></div>', 'p-4') +
|
||||
'<div class="grid grid-cols-4 gap-5">' +
|
||||
card('<div class="mb-3 flex items-center justify-between"><h2 class="text-sm font-bold text-slate-600">月度签约趋势</h2><span class="text-xs text-slate-400">2026</span></div><div style="position:relative;height:200px"><canvas id="finChartSign"></canvas></div>', 'p-4') +
|
||||
card('<div class="mb-3 flex items-center justify-between"><h2 class="text-sm font-bold text-slate-600">月度确收与毛利</h2><span class="text-xs text-slate-400">2026</span></div><div style="position:relative;height:200px"><canvas id="finChartRev"></canvas></div>', 'p-4') +
|
||||
@@ -986,12 +978,66 @@ function renderFinanceOverview() {
|
||||
'</div></div>';
|
||||
|
||||
if (window.lucide) window.lucide.createIcons();
|
||||
// 渲染图表（复用 home.js 的 moneyTick / chartOptions / monthLabels）
|
||||
if (financeMonthly && window.Chart) {
|
||||
renderOverviewCharts(financeMonthly);
|
||||
}
|
||||
}
|
||||
|
||||
// 季度总览渲染
|
||||
function renderFinanceQuarterlyOverview() {
|
||||
const { summary, financeMonthly } = state.data;
|
||||
if (!summary) return;
|
||||
const m = summary.metrics;
|
||||
const moneyIntL = (v) => Math.round(Number(v || 0)).toLocaleString("zh-CN");
|
||||
const card = (body, cls) => '<div class="card ' + (cls || 'p-4') + '">' + body + '</div>';
|
||||
const fm = financeMonthly || [];
|
||||
const LABELS = ['合同金额','确收金额','确收毛利','成本','项目利润','回款金额','已付','现金流'];
|
||||
const qLbl = ['Q1','Q2','Q3','Q4'];
|
||||
const qRanges = [[0,1,2],[3,4,5],[6,7,8],[9,10,11]];
|
||||
const annualVals = [m.signed_annual||m.signed_amount||0, m.revenue_annual||0, m.gross_annual||0, m.cost_annual||0, m.profit_annual||0, m.payment_annual||0, m.paid_annual||0, m.cashflow_annual||0];
|
||||
const fmFields = ['sign','revenue','gross','cost',null,'payment','paid',null];
|
||||
var qData = [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
|
||||
for (var qi = 0; qi < 4; qi++) {
|
||||
for (var ri = 0; ri < 8; ri++) {
|
||||
var sum = 0;
|
||||
for (var mi = 0; mi < 3; mi++) {
|
||||
var idx = qRanges[qi][mi];
|
||||
if (fm[idx]) {
|
||||
if (ri === 4) { sum += (fm[idx].gross||0) - (fm[idx].cost||0); }
|
||||
else if (ri === 7) { sum += (fm[idx].payment||0) - (fm[idx].paid||0); }
|
||||
else { var fk = fmFields[ri]; if (fk) sum += fm[idx][fk] || 0; }
|
||||
}
|
||||
}
|
||||
qData[ri][qi] = sum;
|
||||
}
|
||||
}
|
||||
var thead = '<tr class="border-b border-slate-200"><th class="py-2 text-left text-slate-500 whitespace-nowrap">指标</th><th class="py-2 text-right font-semibold text-slate-700 whitespace-nowrap">年度累计</th>';
|
||||
thead += '<th class="py-2 text-right font-semibold text-slate-600 whitespace-nowrap">Q1</th>';
|
||||
thead += '<th class="py-2 text-right font-semibold text-slate-600 whitespace-nowrap">Q2</th><th class="py-2 text-right font-semibold text-slate-400 whitespace-nowrap">环比</th>';
|
||||
thead += '<th class="py-2 text-right font-semibold text-slate-600 whitespace-nowrap">Q3</th><th class="py-2 text-right font-semibold text-slate-400 whitespace-nowrap">环比</th>';
|
||||
thead += '<th class="py-2 text-right font-semibold text-slate-600 whitespace-nowrap">Q4</th><th class="py-2 text-right font-semibold text-slate-400 whitespace-nowrap">环比</th>';
|
||||
thead += '</tr>';
|
||||
var qoq = function(cur, prev) { if (!prev) return '<span class="text-slate-300">—</span>'; var pct = Math.round((cur - prev) / prev * 100); var cls = pct >= 0 ? 'text-green-600' : 'text-red-600'; var sign = pct >= 0 ? '+' : ''; return '<span class="' + cls + '">' + sign + pct + '%</span>'; };
|
||||
var tbody = '';
|
||||
for (var ri = 0; ri < 8; ri++) {
|
||||
var rowHtml = '<tr class="border-b border-slate-100 last:border-0"><td class="py-2 text-left font-semibold text-slate-700 whitespace-nowrap">' + LABELS[ri] + '</td>';
|
||||
rowHtml += '<td class="py-2 text-right font-semibold text-slate-800 whitespace-nowrap">' + moneyIntL(annualVals[ri]) + '</td>';
|
||||
for (var qi = 0; qi < 4; qi++) {
|
||||
var val = qData[ri][qi];
|
||||
var cls = 'text-slate-700';
|
||||
if (ri === 4) cls = val >= 0 ? 'text-green-600' : 'text-red-600';
|
||||
if (ri === 7) cls = val >= 0 ? 'text-green-600' : 'text-red-600';
|
||||
rowHtml += '<td class="py-2 text-right text-sm whitespace-nowrap ' + cls + '">' + moneyIntL(val) + '</td>';
|
||||
if (qi > 0) { rowHtml += '<td class="py-2 text-right text-sm whitespace-nowrap">' + qoq(val, qData[ri][qi - 1]) + '</td>'; }
|
||||
}
|
||||
tbody += rowHtml + '</tr>';
|
||||
}
|
||||
document.querySelector("#financeQuarterlyOverview").innerHTML = '<div class="grid gap-5">' +
|
||||
card('<h3 class="text-sm font-bold text-slate-700">业务（项目）财务季度概览</h3><p class="text-xs text-slate-400 mb-3">合同 → 确收 → 毛利 → 成本 → 项目利润 → 回款 → 已付 → 现金流</p><div class="overflow-x-auto"><table class="w-full text-sm"><thead>' + thead + '</thead><tbody>' + tbody + '</tbody></table></div>', 'p-4') +
|
||||
'</div>';
|
||||
if (window.lucide) window.lucide.createIcons();
|
||||
}
|
||||
|
||||
function renderOverviewCharts(data) {
|
||||
if (typeof monthLabels !== 'function') return;
|
||||
const labels = monthLabels(data);
|
||||
|
||||
@@ -111,7 +111,7 @@ function renderPlan() {
|
||||
const finHeaderBase = `<div class="flex items-center gap-2"><button onclick="setPlanView('overview')" class="px-3 py-1 rounded text-sm font-medium ${state.planView==='overview'?'bg-blue-600 text-white':'bg-slate-100 text-slate-600 hover:bg-slate-200'}">总视图</button><span class="text-slate-300 mx-2">|</span><span class="text-sm text-slate-500">按季度：</span>${qLabels.map((q,i) => `<button onclick="setPlanQuarter(${i})" class="px-3 py-1 rounded text-sm font-medium ${state.planView==='quarterly'&&activeQ===i?'bg-blue-600 text-white':'bg-slate-100 text-slate-600 hover:bg-slate-200'}">${q}</button>`).join('')}<span class="text-slate-300 mx-2">|</span><span class="text-sm text-slate-500">按月度：</span>${activeMonths.map(m => { const ms = `2026-${String(m).padStart(2,'0')}`; return `<button onclick="setPlanMonth('${ms}')" class="px-3 py-1 rounded text-sm font-medium ${state.planView==='monthly'&&state.planMonth===ms?'bg-blue-600 text-white':'bg-slate-100 text-slate-600 hover:bg-slate-200'}">${m}月</button>`; }).join('')}</div>`;
|
||||
const finAddBtn = `<button class="btn btn-primary btn-sm" onclick="openPlanModal()">新增财务项目</button>`;
|
||||
|
||||
const planFilterTabs = `<div class="finance-tabs" style="padding:0 0 0 0;border-bottom:1px solid #e2e8f0;margin-bottom:0;display:flex;gap:4px"><button onclick="switchPlanFilter('overview')" class="finance-tab${state.planFilter==='overview'?' active':''}" style="font-size:14px;font-weight:600;padding:8px 16px;margin-right:0">总览</button><button onclick="switchPlanFilter('projects')" class="finance-tab${state.planFilter==='projects'?' active':''}" style="font-size:14px;font-weight:600">项目计划 (${pfs.length})</button><button onclick="switchPlanFilter('expense')" class="finance-tab${state.planFilter==='expense'?' active':''}" style="font-size:14px;font-weight:600">平台费用计划</button></div>`;
|
||||
const planFilterTabs = `<div class="finance-tabs" style="padding:0 0 0 0;border-bottom:1px solid #e2e8f0;margin-bottom:0;display:flex;gap:4px"><button onclick="switchPlanFilter('overview')" class="finance-tab${state.planFilter==='overview'?' active':''}" style="font-size:14px;font-weight:600;padding:8px 16px;margin-right:0">月度总览</button><button onclick="switchPlanFilter('quarterlyOverview')" class="finance-tab${state.planFilter==='quarterlyOverview'?' active':''}" style="font-size:14px;font-weight:600">季度总览</button><button onclick="switchPlanFilter('projects')" class="finance-tab${state.planFilter==='projects'?' active':''}" style="font-size:14px;font-weight:600">项目计划 (${pfs.length})</button><button onclick="switchPlanFilter('expense')" class="finance-tab${state.planFilter==='expense'?' active':''}" style="font-size:14px;font-weight:600">平台费用计划</button></div>`;
|
||||
|
||||
document.querySelector("#plan").innerHTML = `<div class="grid gap-4">
|
||||
${planFilterTabs}
|
||||
@@ -119,7 +119,7 @@ function renderPlan() {
|
||||
<i data-lucide="lightbulb" class="text-blue-600 flex-shrink-0" style="width:18px;height:18px"></i>
|
||||
<span class="text-sm text-blue-900"><strong>计划提醒：</strong>计划也是预算，只有真正能够列出计划的预算，才有靠谱的落地可能性</span>
|
||||
</div>
|
||||
${state.planFilter !== 'expense' && state.planFilter !== 'overview' ? card(`<div class="flex justify-between items-center"><div class="flex items-center gap-2">${finHeaderBase}</div>${finAddBtn}</div>`, "p-4") : ''}
|
||||
${state.planFilter !== 'expense' && state.planFilter !== 'overview' && state.planFilter !== 'quarterlyOverview' ? card(`<div class="flex justify-between items-center"><div class="flex items-center gap-2">${finHeaderBase}</div>${finAddBtn}</div>`, "p-4") : ''}
|
||||
<div id="planModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40" onclick="closePlanModal()"><div class="bg-white rounded-2xl shadow-2xl w-full max-w-6xl mx-4 max-h-[92vh] overflow-y-auto" onclick="event.stopPropagation()"><div class="sticky top-0 z-10 bg-white/95 backdrop-blur border-b border-slate-100 px-8 py-5 flex items-center justify-between"><div><h3 class="text-xl font-bold text-slate-800" id="planModalTitle">新增项目财务</h3><p class="text-xs text-slate-400 mt-0.5">填写项目财务信息与月度预算</p></div><div class="flex items-center gap-2"><button class="btn btn-ghost btn-sm text-red-600 hidden" id="planDeleteBtn" onclick="deletePlanItem()"><i data-lucide="trash-2"></i>删除</button><button class="btn btn-ghost btn-sm rounded-full w-8 h-8 p-0" onclick="closePlanModal()"><i data-lucide="x"></i></button></div></div>
|
||||
<div class="finance-tabs">
|
||||
<button class="finance-tab active" data-tab="info" onclick="switchPlanTab('info')"><i data-lucide="info" style="width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px"></i>基本信息</button>
|
||||
@@ -240,6 +240,10 @@ function renderPlan() {
|
||||
setTimeout(() => renderPlanOverview(), 10);
|
||||
return `<div id="planOverview"></div>`;
|
||||
}
|
||||
if (state.planFilter === 'quarterlyOverview') {
|
||||
setTimeout(() => renderPlanQuarterlyOverview(), 10);
|
||||
return `<div id="planQuarterlyOverview"></div>`;
|
||||
}
|
||||
if (state.planFilter === 'expense') {
|
||||
setTimeout(() => renderPlanExpense(), 10);
|
||||
return `<div id="planExpenseModule"></div>`;
|
||||
@@ -961,11 +965,35 @@ window.deletePlanItem = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 从 planFinances 计算月度数据
|
||||
function computePlanMonthly(planFinances) {
|
||||
var pfs = planFinances || [];
|
||||
var months = [];
|
||||
var year = new Date().getFullYear();
|
||||
for (var mi = 1; mi <= 12; mi++) { months.push(year + '-' + String(mi).padStart(2, '0')); }
|
||||
var data = [];
|
||||
for (var i = 0; i < 12; i++) {
|
||||
var month = months[i];
|
||||
var sign = 0, revenue = 0, gross = 0, payment = 0, cost = 0, paid = 0;
|
||||
for (var j = 0; j < pfs.length; j++) {
|
||||
var pf = pfs[j];
|
||||
if ((pf.sign_month || '') === month) sign += parseFloat(pf.sign_amount || 0);
|
||||
var bd = []; try { bd = JSON.parse(pf.budget_data || '[]'); } catch(e) {}
|
||||
var b = bd.find(function(x) { return (x.month || '') === month; });
|
||||
if (b) { revenue += parseFloat(b.rev || 0); gross += parseFloat(b.gross || 0); payment += parseFloat(b.payment || 0); }
|
||||
var ed = []; try { ed = JSON.parse(pf.expense_data || '[]'); } catch(e) {}
|
||||
var e = ed.find(function(x) { return (x.month || '') === month; });
|
||||
if (e) { cost += parseFloat(e.cost || 0); paid += parseFloat(e.paid || 0); }
|
||||
}
|
||||
data.push({ month: month, sign: Math.round(sign), revenue: Math.round(revenue), gross: Math.round(gross), payment: Math.round(payment), cost: Math.round(cost), paid: Math.round(paid) });
|
||||
}
|
||||
return data;
|
||||
}
|
||||
// 总览渲染
|
||||
function renderPlanOverview() {
|
||||
const { summary, financeMonthly } = state.data;
|
||||
if (!summary) return;
|
||||
const m = summary.metrics;
|
||||
const planFinances = state.data.planFinances || [];
|
||||
const fm = computePlanMonthly(planFinances);
|
||||
const moneyIntL = (v) => Math.round(Number(v || 0)).toLocaleString("zh-CN");
|
||||
const moneyWan = (v) => {
|
||||
const n = Number(v || 0);
|
||||
@@ -973,20 +1001,20 @@ function renderPlanOverview() {
|
||||
};
|
||||
const card = (body, cls) => '<div class="card ' + (cls || 'p-4') + '">' + body + '</div>';
|
||||
|
||||
// 月度数据 (financeMonthly 有12个月)
|
||||
const fm = financeMonthly || [];
|
||||
// 从 planFinances 计算年度累计
|
||||
var annualSums = { sign: 0, revenue: 0, gross: 0, cost: 0, payment: 0, paid: 0 };
|
||||
for (var i = 0; i < fm.length; i++) {
|
||||
annualSums.sign += fm[i].sign; annualSums.revenue += fm[i].revenue;
|
||||
annualSums.gross += fm[i].gross; annualSums.cost += fm[i].cost;
|
||||
annualSums.payment += fm[i].payment; annualSums.paid += fm[i].paid;
|
||||
}
|
||||
const mLbl = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
|
||||
const LABELS = ['合同金额','确收金额','确收毛利','成本','项目利润','回款金额','已付','现金流'];
|
||||
// 每行的年度累计 + 12个月值
|
||||
const annualVals = [
|
||||
m.signed_annual || m.signed_amount || 0,
|
||||
m.revenue_annual || 0,
|
||||
m.gross_annual || 0,
|
||||
m.cost_annual || 0,
|
||||
m.profit_annual || 0,
|
||||
m.payment_annual || 0,
|
||||
m.paid_annual || 0,
|
||||
m.cashflow_annual || 0,
|
||||
annualSums.sign, annualSums.revenue, annualSums.gross, annualSums.cost,
|
||||
annualSums.gross - annualSums.cost, annualSums.payment, annualSums.paid,
|
||||
annualSums.payment - annualSums.paid,
|
||||
];
|
||||
// 字段映射: sign, revenue, gross, cost, profit(=gross-cost), payment, paid, cashflow(=payment-paid)
|
||||
const fmFields = ['sign','revenue','gross','cost',null,'payment','paid',null];
|
||||
@@ -1023,11 +1051,78 @@ function renderPlanOverview() {
|
||||
|
||||
if (window.lucide) window.lucide.createIcons();
|
||||
// 渲染图表（复用 home.js 的 moneyTick / chartOptions / monthLabels）
|
||||
if (financeMonthly && window.Chart) {
|
||||
renderPlanCharts(financeMonthly);
|
||||
if (fm && window.Chart) {
|
||||
renderPlanCharts(fm);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function renderPlanQuarterlyOverview() {
|
||||
const planFinances = state.data.planFinances || [];
|
||||
const fm = computePlanMonthly(planFinances);
|
||||
const moneyIntL = (v) => Math.round(Number(v || 0)).toLocaleString("zh-CN");
|
||||
const card = (body, cls) => '<div class="card ' + (cls || 'p-4') + '">' + body + '</div>';
|
||||
const LABELS = ['合同金额','确收金额','确收毛利','成本','项目利润','回款金额','已付','现金流'];
|
||||
const qLbl = ['Q1','Q2','Q3','Q4'];
|
||||
const qRanges = [[0,1,2],[3,4,5],[6,7,8],[9,10,11]];
|
||||
var annualSums2 = { sign: 0, revenue: 0, gross: 0, cost: 0, payment: 0, paid: 0 };
|
||||
for (var i2 = 0; i2 < fm.length; i2++) {
|
||||
annualSums2.sign += fm[i2].sign; annualSums2.revenue += fm[i2].revenue;
|
||||
annualSums2.gross += fm[i2].gross; annualSums2.cost += fm[i2].cost;
|
||||
annualSums2.payment += fm[i2].payment; annualSums2.paid += fm[i2].paid;
|
||||
}
|
||||
const annualVals = [annualSums2.sign, annualSums2.revenue, annualSums2.gross, annualSums2.cost, annualSums2.gross - annualSums2.cost, annualSums2.payment, annualSums2.paid, annualSums2.payment - annualSums2.paid];
|
||||
const fmFields = ['sign','revenue','gross','cost',null,'payment','paid',null];
|
||||
|
||||
// Calculate quarterly sums
|
||||
var qData = [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
|
||||
for (var qi = 0; qi < 4; qi++) {
|
||||
for (var ri = 0; ri < 8; ri++) {
|
||||
var sum = 0;
|
||||
for (var mi = 0; mi < 3; mi++) {
|
||||
var idx = qRanges[qi][mi];
|
||||
if (fm[idx]) {
|
||||
if (ri === 4) { sum += (fm[idx].gross||0) - (fm[idx].cost||0); }
|
||||
else if (ri === 7) { sum += (fm[idx].payment||0) - (fm[idx].paid||0); }
|
||||
else { var fk = fmFields[ri]; if (fk) sum += fm[idx][fk] || 0; }
|
||||
}
|
||||
}
|
||||
qData[ri][qi] = sum;
|
||||
}
|
||||
}
|
||||
|
||||
var thead = '<tr class="border-b border-slate-200"><th class="py-2 text-left text-slate-500 whitespace-nowrap">指标</th><th class="py-2 text-right font-semibold text-slate-700 whitespace-nowrap">年度累计</th>';
|
||||
thead += '<th class="py-2 text-right font-semibold text-slate-600 whitespace-nowrap">Q1</th>';
|
||||
thead += '<th class="py-2 text-right font-semibold text-slate-600 whitespace-nowrap">Q2</th><th class="py-2 text-right font-semibold text-slate-400 whitespace-nowrap">环比</th>';
|
||||
thead += '<th class="py-2 text-right font-semibold text-slate-600 whitespace-nowrap">Q3</th><th class="py-2 text-right font-semibold text-slate-400 whitespace-nowrap">环比</th>';
|
||||
thead += '<th class="py-2 text-right font-semibold text-slate-600 whitespace-nowrap">Q4</th><th class="py-2 text-right font-semibold text-slate-400 whitespace-nowrap">环比</th>';
|
||||
thead += '</tr>';
|
||||
|
||||
var qoq = function(cur, prev) { if (!prev) return '<span class="text-slate-300">—</span>'; var pct = Math.round((cur - prev) / prev * 100); var cls = pct >= 0 ? 'text-green-600' : 'text-red-600'; var sign = pct >= 0 ? '+' : ''; return '<span class="' + cls + '">' + sign + pct + '%</span>'; };
|
||||
|
||||
var tbody = '';
|
||||
for (var ri = 0; ri < 8; ri++) {
|
||||
var rowHtml = '<tr class="border-b border-slate-100 last:border-0"><td class="py-2 text-left font-semibold text-slate-700 whitespace-nowrap">' + LABELS[ri] + '</td>';
|
||||
rowHtml += '<td class="py-2 text-right font-semibold text-slate-800 whitespace-nowrap">' + moneyIntL(annualVals[ri]) + '</td>';
|
||||
for (var qi = 0; qi < 4; qi++) {
|
||||
var val = qData[ri][qi];
|
||||
var cls = 'text-slate-700';
|
||||
if (ri === 4) cls = val >= 0 ? 'text-green-600' : 'text-red-600';
|
||||
if (ri === 7) cls = val >= 0 ? 'text-green-600' : 'text-red-600';
|
||||
rowHtml += '<td class="py-2 text-right text-sm whitespace-nowrap ' + cls + '">' + moneyIntL(val) + '</td>';
|
||||
if (qi > 0) {
|
||||
rowHtml += '<td class="py-2 text-right text-sm whitespace-nowrap">' + qoq(val, qData[ri][qi - 1]) + '</td>';
|
||||
}
|
||||
}
|
||||
tbody += rowHtml + '</tr>';
|
||||
}
|
||||
|
||||
document.querySelector("#planQuarterlyOverview").innerHTML = '<div class="grid gap-5">' +
|
||||
card('<h3 class="text-sm font-bold text-slate-700">业务（项目）财务季度概览</h3><p class="text-xs text-slate-400 mb-3">合同 → 确收 → 毛利 → 成本 → 项目利润 → 回款 → 已付 → 现金流</p><div class="overflow-x-auto"><table class="w-full text-sm"><thead>' + thead + '</thead><tbody>' + tbody + '</tbody></table></div>', 'p-4') +
|
||||
'</div>';
|
||||
if (window.lucide) window.lucide.createIcons();
|
||||
}
|
||||
|
||||
function renderPlanCharts(data) {
|
||||
if (typeof monthLabels !== 'function') return;
|
||||
const labels = monthLabels(data);
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<header class="topbar border-b border-slate-200 bg-white px-8 py-5">
|
||||
<div class="flex items-center gap-3 w-full">
|
||||
<div class="flex-1">
|
||||
<p class="eyebrow text-xs font-semibold uppercase tracking-[0.18em] text-blue-700">OPC Manager <span class="ml-2 text-xs font-normal text-slate-400 tracking-normal">v1.0.0.26</span></p>
|
||||
<p class="eyebrow text-xs font-semibold uppercase tracking-[0.18em] text-blue-700">OPC Manager <span class="ml-2 text-xs font-normal text-slate-400 tracking-normal">v1.0.0.28</span></p>
|
||||
<div class="flex items-center gap-4 mt-1">
|
||||
<h1 class="text-2xl font-semibold" id="workspaceTitle">科普 OPC 工作台</h1>
|
||||
<div class="hidden sm:flex items-center gap-1.5 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-100 rounded-full px-4 py-1.5">
|
||||
|
||||
Reference in New Issue
Block a user