opc-manager/static/modules/overview_finance.js

// overview_finance.js — 发生总览模块（5 个工作台数据聚合）

function renderOverviewFinance() {
  const view = state.overviewView || "monthly";
  const api = view === "quarterly" ? "/api/overview/finance-quarterly" : "/api/overview/finance-monthly";
  const container = document.querySelector("#overview_finance");
  if (!container) return;
  container.innerHTML = '<div class="p-4 text-center text-slate-400">加载中...</div>';

  fetch(api).then(r => r.json()).then(data => {
    renderOverviewFinanceData(data, view);
  }).catch(() => {
    container.innerHTML = '<div class="p-4 text-center text-slate-400">加载失败</div>';
  });
}

function renderOverviewFinanceData(data, view) {
  const container = document.querySelector("#overview_finance");
  if (!container) return;

  const moneyIntL = (v) => Math.round(Number(v || 0)).toLocaleString("zh-CN");
  const card = (body, cls) => '<div class="card ' + (cls || 'p-4') + '">' + body + '</div>';

  const isQuarterly = view === "quarterly";
  const headers = isQuarterly ? ['Q1','Q2','Q3','Q4'] : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
  const cols = isQuarterly ? 4 : 12;

  const d = data.dept;
  const cf = data.dept_cf;
  const p = data.project;

  // 视图切换按钮
  var viewBtns = '<div class="flex items-center gap-2 mb-2"><button onclick="setOverviewFinanceView(\'monthly\')" class="px-3 py-0.5 rounded text-sm font-medium ' + (view === 'monthly' ? 'bg-blue-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200') + '">月报总览</button><button onclick="setOverviewFinanceView(\'quarterly\')" class="px-3 py-0.5 rounded text-sm font-medium ' + (view === 'quarterly' ? 'bg-blue-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200') + '">季报总览</button></div>';

  // ====== 部门损益情况 ======
  var deptThead = '<tr class="border-b border-slate-200"><th class="py-1.5 text-left text-slate-500 whitespace-nowrap">指标</th><th class="py-1.5 text-right font-semibold text-slate-700 whitespace-nowrap">年度累计</th>';
  for (var hi = 0; hi < cols; hi++) { deptThead += '<th class="py-1.5 text-right font-semibold text-slate-600 whitespace-nowrap">' + headers[hi] + '</th>'; }
  deptThead += '</tr>';

  var deptRows = [
    { label: '项目毛利', vals: d.project_gross, annual: d.annual[0] },
    { label: '部门费用', vals: d.dept_expense, annual: d.annual[1] },
    { label: '利润', vals: d.profit, annual: d.annual[2] }
  ];
  var deptTbody = '';
  for (var dri = 0; dri < 3; dri++) {
    var dr = deptRows[dri];
    var rowCls = dri === 2 ? 'font-semibold' : '';
    var rowHtml = '<tr class="border-b border-slate-100 last:border-0"><td class="py-1.5 text-left ' + rowCls + ' text-slate-700 whitespace-nowrap">' + dr.label + '</td>';
    var annualCls = dri === 2 ? (dr.annual >= 0 ? 'text-green-600' : 'text-red-600') : 'text-slate-700';
    rowHtml += '<td class="py-1.5 text-right ' + rowCls + ' ' + annualCls + ' whitespace-nowrap">' + moneyIntL(dr.annual) + '</td>';
    for (var i = 0; i < cols; i++) {
      var cellCls = dri === 2 ? (dr.vals[i] >= 0 ? 'text-green-600' : 'text-red-600') : 'text-slate-700';
      rowHtml += '<td class="py-1.5 text-right text-sm whitespace-nowrap ' + cellCls + '">' + moneyIntL(dr.vals[i]) + '</td>';
    }
    deptTbody += rowHtml + '</tr>';
  }
  var deptCard = card('<h3 class="text-base font-bold text-slate-700 mb-3">部门损益情况 <span class="text-sm text-slate-500 font-normal ml-3">部门利润 = 所有项目产生的毛利 - 部门 1 级产生的人力成本，研发成本，差旅和其他支出</span></h3><div class="overflow-x-auto"><table class="w-full text-sm"><thead>' + deptThead + '</thead><tbody>' + deptTbody + '</tbody></table></div>', 'p-4');

  // ====== 部门现金流 ======
  var cfRows = [
    { label: '项目现金流', vals: cf.project_cf, annual: cf.annual[0] },
    { label: '部门现金流', vals: cf.dept_cf_item, annual: cf.annual[1] },
    { label: '经营现金流', vals: cf.bl_cf, annual: cf.annual[2] }
  ];
  var cfTbody = '';
  for (var cfri = 0; cfri < 3; cfri++) {
    var cfr = cfRows[cfri];
    var cfRowCls = cfri === 2 ? 'font-semibold' : '';
    var rowHtml = '<tr class="border-b border-slate-100 last:border-0"><td class="py-1.5 text-left ' + cfRowCls + ' text-slate-700 whitespace-nowrap">' + cfr.label + '</td>';
    var cAnnualCls = cfri === 2 ? (cfr.annual >= 0 ? 'text-green-600' : 'text-red-600') : 'text-slate-700';
    rowHtml += '<td class="py-1.5 text-right ' + cfRowCls + ' ' + cAnnualCls + ' whitespace-nowrap">' + moneyIntL(cfr.annual) + '</td>';
    for (var i = 0; i < cols; i++) {
      var cCellCls = cfri === 2 ? (cfr.vals[i] >= 0 ? 'text-green-600' : 'text-red-600') : 'text-slate-700';
      rowHtml += '<td class="py-1.5 text-right text-sm whitespace-nowrap ' + cCellCls + '">' + moneyIntL(cfr.vals[i]) + '</td>';
    }
    cfTbody += rowHtml + '</tr>';
  }
  var cfCard = card('<h3 class="text-base font-bold text-slate-700 mb-3">部门现金流 <span class="text-sm text-slate-500 font-normal ml-3">部门现金流=所有项目产生的现金流 - 部门一级因费用产生的现金流出或流入</span></h3><div class="overflow-x-auto"><table class="w-full text-sm"><thead>' + deptThead + '</thead><tbody>' + cfTbody + '</tbody></table></div>', 'p-4');

  // ====== 项目经营详情 ======
  var LABELS = ['合同金额','确收金额','确收毛利','成本','支出','回款','项目现金流'];
  var projVals = [p.revenue, p.gross, p.cost, p.paid, p.payment, p.cashflow];
  var projAnnual = p.annual;

  var projThead = '<tr class="border-b border-slate-200"><th class="py-1.5 text-left text-slate-500 whitespace-nowrap">指标</th><th class="py-1.5 text-right font-semibold text-slate-700 whitespace-nowrap">年度累计</th>';
  for (var phi = 0; phi < cols; phi++) { projThead += '<th class="py-1.5 text-right font-semibold text-slate-600 whitespace-nowrap">' + headers[phi] + '</th>'; }
  projThead += '</tr>';

  var projTbody = '';
  for (var ri = 0; ri < 7; ri++) {
    var rowHtml = '<tr class="border-b border-slate-100 last:border-0"><td class="py-1.5 text-left font-semibold text-slate-700 whitespace-nowrap">' + LABELS[ri] + '</td>';
    rowHtml += '<td class="py-1.5 text-right font-semibold text-slate-800 whitespace-nowrap">' + (ri === 0 ? moneyIntL(p.sign) : moneyIntL(projAnnual[ri])) + '</td>';
    for (var i = 0; i < cols; i++) {
      var val = ri === 0 ? 0 : (projVals[ri - 1] ? projVals[ri - 1][i] : 0);
      var cls = 'text-slate-700';
      if (ri === 2) cls = 'text-green-600';
      if (ri === 6) cls = val >= 0 ? 'text-green-600' : 'text-red-600';
      rowHtml += '<td class="py-1.5 text-right text-sm whitespace-nowrap ' + cls + '">' + moneyIntL(val) + '</td>';
    }
    projTbody += rowHtml + '</tr>';
  }
  var projCard = card('<h3 class="text-base font-bold text-slate-700 mb-3">项目经营详情 <span class="text-sm text-slate-500 font-normal ml-3">所有项目产生的签单，确收，毛利，回款，当期成本，当期流出，现金流</span></h3><div class="overflow-x-auto"><table class="w-full text-sm"><thead>' + projThead + '</thead><tbody>' + projTbody + '</tbody></table></div>', 'p-4');

  container.innerHTML = '<div class="grid gap-2.5">' + viewBtns + deptCard + cfCard + projCard + '</div>';
  if (window.lucide) window.lucide.createIcons();
}

window.setOverviewFinanceView = (v) => {
  state.overviewView = v;
  renderOverviewFinance();
};