@@ -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,16 +286,16 @@ 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 : '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 : '项目利润' } ,
,
] ;
const renderView = ( rows , sumRev , sumPay , sumCost , sumPaid , sumGross , signTotal , signCnt , emptyText ) => {
@@ -323,17 +327,11 @@ function renderFinance() {
const grossR = rev && gross ? Math . round ( gross / rev * 100 ) + '%' : '<span class="text-slate-300">—</span>' ;
const cf = cashflow ? money ( cashflow ) : '<span class="text-slate-300">—</span>' ;
const cfCls = cashflow >= 0 ? 'text-green-600' : 'text-red-600' ;
const profit = gross ;
const pfCls = profit >= 0 ? 'text-green-600' : 'text-red-600' ;
const pfVal = profit ? money ( profit ) : '<span class="text-slate-300">—</span>' ;
return ` <tr class="border-b border-slate-100 hover:bg-slate-50 cursor-pointer" onclick="openPfEditModal( ${ pf . id } )"><td class="p-2 text-center align-middle text-sm"> ${ esc ( pf . client _name || "" ) } </td><td class="p-2 text-sm font-medium text-center align-middle truncate" style="min-width:300px;max-width:300px;width:300px" title=" ${ esc ( pf . customer _name ) } "> ${ esc ( pf . customer _name ) } </td><td class="p-2 text-center align-middle text-sm font-medium"> ${ money ( pf . sign _amount ) } </td><td class="p-2 text-center text-blue-700 align-middle"> ${ fmtNoUnit ( rev ) } </td><td class="p-2 text-center align-middle text-sm font-medium"> ${ fmtNoUnit ( gross ) } </td><td class="p-2 text-center text-rose-700 align-middle"> ${ fmtNoUnit ( cost ) } </td><td class="p-2 text-center font-semibold align-middle ${ pfCls } "> ${ pfVal } </td><td class="p-2 text-center text-amber-700 align-middle"> ${ fmtNoUnit ( payment ) } </td><td class="p-2 text-center text-purple-700 align-middle"> ${ fmtNoUnit ( paid ) } </td><td class="p-2 text-center font-semibold align-middle ${ cfCls } "> ${ cf } </td><td class="p-2 text-center align-middle text-sm"> ${ exe } </td><td class="p-2 text-center align-middle text-sm"> ${ grossR } </td><td class="p-2 text-center align-middle text-sm"> ${ payR } </td><td class="p-2 text-center align-middle text-sm"> ${ paidR } </td></tr> ` ;
return ` <tr class="border-b border-slate-100 hover:bg-slate-50 cursor-pointer" onclick="openPfEditModal( ${ pf . id } )"><td class="p-2 text-center align-middle text-sm"> ${ esc ( pf . client _name || "" ) } </td><td class="p-2 text-sm font-medium text-center align-middle truncate" style="min-width:300px;max-width:300px;width:300px" title=" ${ esc ( pf . customer _name ) } "> ${ esc ( pf . customer _name ) } </td><td class="p-2 text-center align-middle text-sm font-medium"> ${ money ( pf . sign _amount ) } </td><td class="p-2 text-center text-blue-700 align-middle"> ${ fmtNoUnit ( rev ) } </td><td class="p-2 text-center align-middle text-sm font-medium"> ${ fmtNoUnit ( gross ) } </td><td class="p-2 text-center text-rose-700 align-middle"> ${ fmtNoUnit ( cost ) } </td><td class="p-2 text-center text-amber-700 align-middle"> ${ fmtNoUnit ( payment ) } </td><td class="p-2 text-center text-purple-700 align-middle"> ${ fmtNoUnit ( paid ) } </td><td class="p-2 text-center font-semibold align-middle ${ cfCls } "> ${ cf } </td><td class="p-2 text-center align-middle text-sm"> ${ exe } </td><td class="p-2 text-center align-middle text-sm"> ${ grossR } </td><td class="p-2 text-center align-middle text-sm"> ${ payR } </td><td class="p-2 text-center align-middle text-sm"> ${ paidR } </td></tr> ` ;
} ;
// 待签约简版行
const tdRowUnsigned = ( pf , cost , gross ) => {
const profit = gross ;
const pfCls = profit >= 0 ? 'text-green-600' : 'text-red-600' ;
const pfVal = profit ? money ( profit ) : '<span class="text-slate-300">—</span>' ;
return ` <tr class="border-b border-slate-100 hover:bg-slate-50 cursor-pointer" onclick="openPfEditModal( ${ pf . id } )"><td class="p-2 text-sm font-medium text-center align-middle truncate" style="min-width:300px;max-width:300px;width:300px" title=" ${ esc ( pf . customer _name ) } "> ${ esc ( pf . customer _name ) } </td><td class="p-2 text-center align-middle text-sm font-medium"> ${ money ( pf . sign _amount ) } </td><td class="p-2 text-center align-middle text-sm"> ${ pf . sign _month || '—' } </td><td class="p-2 text-center align-middle text-sm font-medium"> ${ fmtNoUnit ( gross ) } </td><td class="p-2 text-center text-rose-700 align-middle"> ${ fmtNoUnit ( cost ) } </td><td class="p-2 text-center font-semibold align-middle ${ pfCls } "> ${ pfVal } </td></tr> ` ;
return ` <tr class="border-b border-slate-100 hover:bg-slate-50 cursor-pointer" onclick="openPfEditModal( ${ pf . id } )"><td class="p-2 text-sm font-medium text-center align-middle truncate" style="min-width:300px;max-width:300px;width:300px" title=" ${ esc ( pf . customer _name ) } "> ${ esc ( pf . customer _name ) } </td><td class="p-2 text-center align-middle text-sm font-medium"> ${ money ( pf . sign _amount ) } </td><td class="p-2 text-center align-middle text-sm"> ${ pf . sign _month || '—' } </td><td class="p-2 text-center align-middle text-sm font-medium"> ${ fmtNoUnit ( gross ) } </td><td class="p-2 text-center text-rose-700 align-middle"> ${ fmtNoUnit ( cost ) } </td></tr> ` ;
} ;
if ( state . finView === 'monthly' ) {
@@ -356,7 +354,7 @@ function renderFinance() {
if ( ! rev && ! payment && ! cost && ! paid && ! gross ) return ;
dataItems . push ( {
pf : pf , customer _name : pf . customer _name || '' , sign _amount : pf . sign _amount || 0 , sign _month : pf . sign _month || '' ,
rev : rev , gross : gross , cost : cost , profit : gross , payment : payment , paid : paid ,
rev : rev , gross : gross , cost : cost , payment : payment , paid : paid ,
cashflow : payment - paid ,
exe _rate : rev && pf . sign _amount ? Math . round ( rev / pf . sign _amount * 100 ) : 0 ,
gross _rate : rev && gross ? Math . round ( gross / rev * 100 ) : 0 ,
@@ -407,7 +405,7 @@ function renderFinance() {
if ( ! rev && ! payment && ! cost && ! paid && ! gross ) return ;
dataItems . push ( {
pf : pf , customer _name : pf . customer _name || '' , sign _amount : pf . sign _amount || 0 , sign _month : pf . sign _month || '' ,
rev : rev , gross : gross , cost : cost , profit : gross , payment : payment , paid : paid ,
rev : rev , gross : gross , cost : cost , payment : payment , paid : paid ,
cashflow : payment - paid ,
exe _rate : rev && pf . sign _amount ? Math . round ( rev / pf . sign _amount * 100 ) : 0 ,
gross _rate : rev && gross ? Math . round ( gross / rev * 100 ) : 0 ,
@@ -443,7 +441,7 @@ function renderFinance() {
var t = calcTotals ( pf ) ;
return {
pf : pf , customer _name : pf . customer _name || '' , sign _amount : pf . sign _amount || 0 , sign _month : pf . sign _month || '' ,
rev : t . rev , gross : t . gross , cost : t . cost , profit : t . gross ,
rev : t . rev , gross : t . gross , cost : t . cost ,
payment : t . payment , paid : t . paid , cashflow : t . payment - t . paid ,
exe _rate : t . rev && pf . sign _amount ? Math . round ( t . rev / pf . sign _amount * 100 ) : 0 ,
gross _rate : t . rev && t . gross ? Math . round ( t . gross / t . rev * 100 ) : 0 ,
@@ -929,55 +927,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 = ROW S[ ri ] ;
tbody += '<tr class="border-b border-slate-100 last:border-0">< td class="py-2 text-lef t font-semibold text-slate-7 00">' + 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 [ r i] , M _PREV [ r i] ) + '</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">' + LABEL S[ ri ] + '</td>' ;
rowHtml += '<td class="py-2 text-righ t font-semibold text-slate-8 00 whitespace-nowrap">' + moneyIntL ( annualVals [ ri ] ) + '</td>' ;
for ( var mi = 0 ; mi < 12 ; mi ++ ) {
var val = 0 ;
if ( fm [ mi ] ) {
if ( ri === 4 ) { val = ( fm [ m i] . gross || 0 ) - ( fm [ m i] . 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 +972,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 ) ;