@@ -96,32 +96,29 @@ function renderPlan() {
} ) ( ) ;
const sm = pf . sign _month || "" ;
const signMonthCell = ` <td class="p-2 text-center align-middle text-sm"><span class="pf-sm-text cursor-pointer hover:text-blue-600" id="pf-sm- ${ pf . id } " onclick="event.stopPropagation(); planEditSignMonth(event, ${ pf . id } )"> ${ sm || '—' } </span></td> ` ;
return ` <tr class="border-b border-slate-100 hover:bg-slate-50 cursor-pointer" onclick="planOpenPfEditModal( ${ pf . id } )"><td class="p-2 text-sm font-medium text-center align-middle"> ${ esc ( pf . customer _name ) } </td> ${ signMonthCell } <td class="p-2 text-center align-middle text-sm"> ${ money ( pf . sign _amount ) } </td> ${ mCols } ${ totalCol } </tr> ` ;
return ` <tr class="border-b border-slate-100 hover:bg-slate-50 cursor-pointer" onclick="planOpenPfEditModal( ${ 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"> ${ esc ( pf . customer _name ) } </td><td class="p-2 text-center align-middle text-sm"> ${ esc ( pf . weight || "20%" ) } </td><td class="p-2 text-center align-middle text-sm"> ${ esc ( pf . project _type || "待签约" ) } </td> ${ signMonthCell } <td class="p-2 text-center align-middle text-sm"> ${ money ( pf . sign _amount ) } </td> ${ mCols } ${ totalCol } </tr> ` ;
} ;
const now2 = new Date ( ) ;
const defaultMonth2 = now2 . getFullYear ( ) + "-" + String ( now2 . getMonth ( ) + 1 ) . padStart ( 2 , "0" ) ;
if ( ! state . planMonth ) state . planMonth = defaultMonth2 ;
if ( state . planQuarter === undefined ) state . planQuarter = Math . floor ( now2 . getMonth ( ) / 3 ) ;
const monthSet2 = new Set ( [ defaultMonth2 ] ) ;
pfs . forEach ( pf => { let bd = [ ] ; try { bd = JSON . parse ( pf . budget _data || "[]" ) ; } catch ( e ) { } bd . forEach ( b => { if ( b . month ) monthSet2 . add ( b . month ) ; } ) ; } ) ;
const allMonths = [ ... monthSet2 ] . sort ( ) . revers e( ) ;
const qLabels2 = [ "Q1 (1-3月)" , "Q2 (4-6月)" , "Q3 (7-9月)" , "Q4 (10-12月)" ] ;
const toolMonthSelect = all Months. map ( m => '<option value="' + m + '" ' + ( m === state . planMonth ? 'selected' : '' ) + '>' + m + '</option>' ) . join ( "" ) ;
const toolQuarterSelect = qLabels2 . map ( ( l , i ) => '<option value="' + i + '" ' + ( i === state . planQuarter ? 'selec ted ': '' ) + '>' + l + '</option>' ) . join ( "" ) ;
const toolDateSelect = state . planView === 'monthly' ? '<span class="text-sm text-slate-500 ml-2">月份：</span><select onchange="state.planMonth=this.value;renderPlan()" class="text-sm font-medium py-1 px-2.5 cursor-pointer" style="appearance:none;-webkit-appearance:none;background-color:transparent;border:0;outline:none;background:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%236b7280%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolyline points=%226 9 12 15 18 9%22%3E%3C/polyline%3E%3C/svg%3E') no-repeat right 4px center;padding-right:22px;min-height:30px">' + toolMonthSelect + '</select>' : state . planView === 'quarterly' ? '<span class="text-sm text-slate-500 ml-2">季度：</span><select onchange="state.planQuarter=parseInt(this.value);localStorage.setItem(\'opc-fin-quarter\',this.value);renderPlan()" class="text-sm font-medium py-1 px-2.5 cursor-pointer" style="appearance:none;-webkit-appearance:none;background-color:transparent;border:0;outline:none;background:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%236b7280%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolyline points=%226 9 12 15 18 9%22%3E%3C/polyline%3E%3C/svg%3E') no-repeat right 4px center;padding-right:22px;min-height:30px">' + toolQuarterSelect + '</select>' : '' ;
const finHeaderBase = ` <span class="text-sm text-slate-500">视图：</span><select onchange="setPlanView(this.value)" class="text-sm font-medium py-1 px-2.5 cursor-pointer" style="appearance:none;-webkit-appearance:none;background-color:transparent;border:0;outline:none;background:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%236b7280%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolyline points=%226 9 12 15 18 9%22%3E%3C/polyline%3E%3C/svg%3E') no-repeat right 4px center;padding-right:22px;min-height:30px"><option value="overview" ${ state . planView === 'overview' ? 'selected' : '' } >总视图</option><option value="quarterly" ${ state . planView === 'quarterly' ? 'selected' : '' } >季度视图</option><option value="monthly" ${ state . planView === 'monthly' ? 'selected' : '' } >月度视图</option></select> ${ toolDateSelect } ` ;
const qLabels = [ 'Q1' , 'Q2' , 'Q3' , 'Q4' ] ;
const qMonths = [ [ 1 , 2 , 3 ] , [ 4 , 5 , 6 ] , [ 7 , 8 , 9 ] , [ 10 , 11 , 12 ] ] ;
const nowD = new Dat e( ) ;
const activeQ = state . planQuarter !== undefined ? state . planQuarter : Math . floor ( nowD . getMonth ( ) / 3 ) ;
const activeMonths = q Months[ activeQ ] ;
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-whi te': '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> ` ;
document . querySelector ( "#plan" ) . innerHTML = ` <div class="grid gap-4">
${ planFilterTabs }
<div class="flex items-center gap-3 px-4 py-3 rounded-lg border" style="background:linear-gradient(135deg,#dbeafe,#bfdbfe);border-color:#3b82f6">
<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>
${ planFilterTabs }
${ 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" ) : '' }
<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">
@@ -153,7 +150,7 @@ function renderPlan() {
</div>
<div class="grid grid-cols-3 gap-3">
<label class="block"><span class="fin-label">联系电话</span><input name="contact_phone" class="form-ctrl" placeholder="请输入联系电话"></label>
<label class="block"><span class="fin-label">其他</span><input name="other_info" class="form-ctrl" placeholder="备注信息"></label>
<label class="block"><span class="fin-label">其他</span><input name="other_info" class="form-ctrl" placeholder="备注信息"></label></div><div class="grid grid-cols-3 gap-3"><label class="block"><span class="fin-label">客户名称</span><input name="client_name" class="form-ctrl" placeholder="客户名称"></label><label class="block"><span class="fin-label">项目类型</span><select name="project_type" class="form-ctrl bg-white"><option>待签约</option><option>已签约</option></select></label><label class="block"><span class="fin-label">加权</span><select name="weight" class="form-ctrl bg-white"><option>20%</option><option>40%</option><option>60%</option><option>80%</option><option>100%</option></select></label>
</div>
<div class="block"><span class="fin-label">业务类型</span><div class="flex flex-wrap gap-2 mt-1" id="plan_businessTypeChecks"> ${ fmTypes . map ( t => ` <label class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full border border-slate-200 cursor-pointer hover:border-blue-300 text-sm bt-chip" onclick="planToggleBtChip(this)"><input type="checkbox" name="business_type[]" value=" ${ t } " class="hidden"><span> ${ t } </span></label> ` ) . join ( "" ) } </div></div>
</div>
@@ -288,8 +285,10 @@ function renderPlan() {
return h ;
} ;
const SIGNED _COLS = [
{ key : 'client_name' , label : '客户' } ,
{ key : 'customer_name' , label : '项目名称' } ,
,
{ key : 'weight' , label : '加权' } ,
{ key : 'project_type' , label : '项目类型' } ,
{ key : 'sign_amount' , label : '签约金额' } ,
{ key : 'rev' , label : '已确收' } ,
{ key : 'gross' , label : '毛利' } ,
@@ -299,13 +298,13 @@ function renderPlan() {
{ 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 : 'client_name' , label : '客户' } ,
{ key : 'customer_name' , label : '项目名称' } ,
,
{ key : 'weight' , label : '加权' } ,
{ key : 'project_type' , label : '项目类型' } ,
{ key : 'sign_amount' , label : '签约金额' } ,
{ key : 'sign_month' , label : '签约月份' } ,
{ key : 'gross' , label : '毛利' } ,
@@ -320,13 +319,13 @@ function renderPlan() {
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 ? 9 : 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' ;
const subtitle = isUnsigned
? '合同 → 毛利 → 成本 → 项目利润'
: '合同 → 确收 → 毛利 → 成本 → 项目利润 → 回款 → 已付 → 现金流 → 执行率 → 毛利率 → 回款率 → 付款率 ' ;
: '合同 → 确收 → 毛利 → 成本 → 项目利润 → 回款 → 已付 → 现金流' ;
return card ( ` <div class="grid ${ cardGrid } gap-3 mb-3"> ${ cards . map ( ( [ l , v , c ] ) => '<div class="metric-card p-3"><span class="flex items-center gap-2 text-sm text-slate-500">' + l + '</span><strong class="mt-2 block text-xl ' + c + '">' + v + '</strong></div>' ) . join ( "" ) } </div> ` , "p-4" ) +
card ( ` <h3 class="text-sm font-bold text-slate-700">项目财务明细</h3><p class="text-xs text-slate-400 mb-3"> ${ subtitle } </p><div class="overflow-x-auto"><table class="w-full text-sm"> ${ thead } ${ tbody } </table></div> ` , "p-4" ) ;
} ;
@@ -345,14 +344,14 @@ function renderPlan() {
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="planOpenPfEditModal( ${ 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 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"> ${ paid R} </td></tr> ` ;
return ` <tr class="border-b border-slate-100 hover:bg-slate-50 cursor-pointer" onclick="planOpenPfEditModal( ${ 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" onclick="event.stopPropagation()"> ${ planInlineSelect ( 'weight' , pf . id , 'weight' , pf . weight || '20%' , [ '20%' , '40%' , '60%' , '80%' , '100%' ] ) } </td><td class="p-2 text-center align-middle text-sm" onclick="event.stopPropagation()"> ${ planInlineSelect ( 'ptype' , pf . id , 'project_type' , pf . project _type || '待签约' , [ '待签约' , '已签约' ] ) } </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"> ${ pay R} </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="planOpenPfEditModal( ${ 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="planOpenPfEditModal( ${ 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" onclick="event.stopPropagation()"> ${ planInlineSelect ( 'weight' , pf . id , 'weight' , pf . weight || '20%' , [ '20%' , '40%' , '60%' , '80%' , '100%' ] ) } </td><td class="p-2 text-center align-middle text-sm" onclick="event.stopPropagation()"> ${ planInlineSelect ( 'ptype' , pf . id , 'project_type' , pf . project _type || '待签约' , [ '待签约' , '已签约' ] ) } </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> ` ;
} ;
if ( state . planView === 'monthly' ) {
@@ -787,7 +786,7 @@ window.planOpenPfEditModal = (pfId) => {
document . querySelector ( "#plan_pf-id-input" ) . value = pf . id ;
document . querySelector ( "#planModalTitle" ) . textContent = "编辑项目财务" ;
document . querySelector ( "#planDeleteBtn" ) . classList . remove ( "hidden" ) ;
const form = document . querySelector ( "#finance Modal form" ) ;
const form = document . querySelector ( "#plan Modal form" ) ;
form . querySelector ( '[name="project_id"]' ) . value = pf . project _id || "" ;
const deptDisplay = form . querySelector ( '.bg-slate-50 [disabled]' ) ;
if ( deptDisplay ) deptDisplay . value = pf . project _id || "" ;
@@ -823,6 +822,9 @@ window.planOpenPfEditModal = (pfId) => {
setVal ( "contact_name" , pf . contact _name ) ;
setVal ( "contact_phone" , pf . contact _phone ) ;
setVal ( "other_info" , pf . other _info ) ;
setVal ( "client_name" , pf . client _name ) ;
form . querySelector ( '[name="project_type"]' ) . value = pf . project _type || "待签约" ;
form . querySelector ( '[name="weight"]' ) . value = pf . weight || "20%" ;
let budgetData = [ ] ;
try { budgetData = JSON . parse ( pf . budget _data || "[]" ) ; } catch ( e ) { budgetData = [ ] ; }
planInitRevpayTable ( budgetData . length ? budgetData : null ) ;
@@ -964,46 +966,50 @@ function renderPlanOverview() {
const { summary , financeMonthly } = state . data ;
if ( ! summary ) return ;
const m = summary . metrics ;
const moneyIntL = ( v ) => ` ${ Math . round ( Number ( v || 0 ) ) . 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>' ; } ;
// 月度数据 (financeMonthly 有12个月)
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 >' ;
// 每行的年度累计 + 12个月值
const annualVals = [
m . signed _annual || m . signed _a mou nt || 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 ,
] ;
// 字段映射: sign, revenue, gross, cost, profit(=gross-cost), payment, paid, cashflow(=payment-paid)
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 ( "#planOverview" ) . innerHTML = '<div class="grid gap-5">' +
@@ -1018,7 +1024,7 @@ function renderPlanOverview() {
if ( window . lucide ) window . lucide . createIcons ( ) ;
// 渲染图表（复用 home.js 的 moneyTick / chartOptions / monthLabels）
if ( financeMonthly && window . Chart ) {
renderOverview Charts ( financeMonthly ) ;
renderPlan Charts ( financeMonthly ) ;
}
}
@@ -1028,24 +1034,42 @@ function renderPlanCharts(data) {
const baseOpts = typeof chartOptions === 'function' ? chartOptions ( moneyTick ) : { responsive : true , maintainAspectRatio : false } ;
var iconf = { type : "line" , options : baseOpts , data : { labels : labels } } ;
var c1 = document . querySelector ( "#fi nChartSign" ) ;
var c1 = document . querySelector ( "#pla nChartSign" ) ;
if ( c1 && window . Chart ) {
if ( state . planChart1 ) state . planChart1 . destroy ( ) ;
state . planChart1 = new Chart ( c1 , Object . assign ( { } , iconf , { data : { labels : labels , datasets : [ { label : "签约金额" , data : data . map ( function ( x ) { return x . sign || 0 ; } ) , borderColor : "#6366f1" , backgroundColor : "rgba(99,102,241,0.06)" , fill : true , tension : 0.3 } ] } } ) ) ;
}
var c2 = document . querySelector ( "#fi nChartRev" ) ;
var c2 = document . querySelector ( "#pla nChartRev" ) ;
if ( c2 && window . Chart ) {
if ( state . planChart2 ) state . planChart2 . destroy ( ) ;
state . planChart2 = new Chart ( c2 , Object . assign ( { } , iconf , { data : { labels : labels , datasets : [ { label : "确收" , data : data . map ( function ( x ) { return x . revenue || 0 ; } ) , borderColor : "#2563eb" , backgroundColor : "rgba(37,99,235,0.06)" , fill : true , tension : 0.3 } , { label : "毛利" , data : data . map ( function ( x ) { return x . gross || 0 ; } ) , borderColor : "#059669" , backgroundColor : "rgba(5,150,105,0.06)" , fill : true , tension : 0.3 } ] } } ) ) ;
}
var c3 = document . querySelector ( "#fi nChartCash" ) ;
var c3 = document . querySelector ( "#pla nChartCash" ) ;
if ( c3 && window . Chart ) {
if ( state . planChart3 ) state . planChart3 . destroy ( ) ;
state . planChart3 = new Chart ( c3 , Object . assign ( { } , iconf , { data : { labels : labels , datasets : [ { label : "回款" , data : data . map ( function ( x ) { return x . payment || 0 ; } ) , borderColor : "#d97706" , backgroundColor : "rgba(217,119,6,0.06)" , fill : true , tension : 0.3 } , { label : "已付" , data : data . map ( function ( x ) { return x . cost || 0 ; } ) , borderColor : "#7c3aed" , backgroundColor : "rgba(124,58,237,0.06)" , fill : true , tension : 0.3 } ] } } ) ) ;
}
var c4 = document . querySelector ( "#fi nChartProfit" ) ;
var c4 = document . querySelector ( "#pla nChartProfit" ) ;
if ( c4 && window . Chart ) {
if ( state . planChart4 ) state . planChart4 . destroy ( ) ;
state . planChart4 = new Chart ( c4 , Object . assign ( { } , iconf , { data : { labels : labels , datasets : [ { label : "利润" , data : data . map ( function ( x ) { return x . gross || 0 ; } ) , borderColor : "#6366f1" , backgroundColor : "rgba(99,102,241,0.06)" , fill : true , tension : 0.3 } ] } } ) ) ;
}
} ;
function planInlineSelect ( name , pfId , field , currentVal , options ) {
var opts = '' ;
for ( var i = 0 ; i < options . length ; i ++ ) {
opts += '<option value="' + options [ i ] + '"' + ( options [ i ] === currentVal ? ' selected' : '' ) + '>' + options [ i ] + '</option>' ;
}
return '<select onchange="planInlineUpdate(' + pfId + ', \'' + field + '\'' + ', this.value)" class="text-sm bg-transparent border-0 cursor-pointer text-center" style="appearance:auto;-webkit-appearance:auto;vertical-align:middle">' + opts + '</select>' ;
}
window . planInlineUpdate = async ( pfId , field , value ) => {
try {
await api ( "/api/planFinances/" + pfId , { method : "PUT" , body : JSON . stringify ( { data : { [ field ] : value } } ) } ) ;
await load ( ) ;
toast ( "已更新" , "success" ) ;
} catch ( error ) {
toast ( "更新失败：" + error . message , "error" ) ;
}
} ;
