qiukai/opc-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
384c80e34d5b1bf36927cad5ec359a3129f49f0b
opc-manager/static/modules/my.js
mac 384c80e34d feat: 新增「我的」模块 — 绩效+预算月报+已发生月报+重点项目 
- 侧边栏新增「我的」tab，排序第一，默认首页
- 模块内容：绩效 → 预算月报 → 已发生月报 → 重点项目
- 绩效：自动统计目标/完成/完成率/评分，年/季/月筛选
- 预算月报/已发生月报：12 月汇总表（7 项核心指标）
- 重点项目：展示 Focus 项目清单，点击跳转定位
- 创建 my.js 模块文件，替换原 performance.js 入口
- 总览工作台不显示「我的」入口
2026-07-30 17:27:38 +08:00

222 lines
15 KiB
JavaScript
Raw Blame History

// my.js — 我的模块（绩效 + 预算月报 + 已发生月报）
window.renderMy = () => {
const data = state.data;
if (!data) return;
// 确保数据已加载
if (!data._myDataLoaded) {
loadMyData().then(() => { data._myDataLoaded = true; renderMy(); });
return;
}
// ── 状态初始化 ──
if (state.planYear == null) state.planYear = new Date().getFullYear();
const planYear = state.planYear;
if (!['annual','quarterly','monthly'].includes(state.perfView)) state.perfView = 'quarterly';
if (state.perfQuarter === undefined) state.perfQuarter = Math.floor(new Date().getMonth() / 3);
const nowD = new Date();
const activeQ = state.perfQuarter;
const qRanges = [[1,2,3],[4,5,6],[7,8,9],[10,11,12]];
const activeMonths = qRanges[activeQ];
const qLabels = ['Q1','Q2','Q3','Q4'];
let aggMonths = [];
if (state.perfView === 'annual') { for (var mi = 1; mi <= 12; mi++) aggMonths.push(mi); }
else if (state.perfView === 'quarterly') { aggMonths = qRanges[activeQ]; }
else if (state.perfView === 'monthly') { const m = state.perfMonth; aggMonths = m ? [parseInt(m.substring(5))] : []; }
if (state.perfView === 'monthly' && !state.perfMonth) {
state.perfMonth = planYear + '-' + String(nowD.getMonth() + 1).padStart(2, '0');
}
const pfs = (data.projectFinances || []);
const planPfs = (data.planFinances || []);
// ── 1. 绩效 ──
function sumByMonths(items, field, useSign, months) {
let total = 0;
items.forEach(p => {
if (useSign) {
const sm = p.sign_month || '';
const smY = parseInt(sm.substring(0, 4)) || 0;
const smM = parseInt(sm.substring(5)) || 0;
if (!months.includes(smM)) return;
if (planYear !== 0 && smY && smY !== planYear) return;
total += parseFloat(p.sign_amount || 0);
} else {
let bd = [];
try { bd = JSON.parse(p.budget_data || '[]'); } catch (e) {}
bd.forEach(b => {
const m = parseInt((b.month || '').substring(5)) || 0;
const y = parseInt((b.month || '').substring(0, 4)) || 0;
if (!months.includes(m)) return;
if (planYear !== 0 && y && y !== planYear) return;
total += parseFloat(b[field] || 0);
});
}
});
return Math.round(total);
}
const perfRows = [
{ key: 'sign', label: '签约', complete: sumByMonths(pfs, '', true, aggMonths), plan: sumByMonths(planPfs, '', true, aggMonths), icon: 'file-text', defWeight: 10 },
{ key: 'rev', label: '收入', complete: sumByMonths(pfs, 'rev', false, aggMonths), plan: sumByMonths(planPfs, 'rev', false, aggMonths), icon: 'dollar-sign', defWeight: 20 },
{ key: 'gross', label: '毛利', complete: sumByMonths(pfs, 'gross', false, aggMonths), plan: sumByMonths(planPfs, 'gross', false, aggMonths), icon: 'trending-up', defWeight: 50 },
{ key: 'payment', label: '回款', complete: sumByMonths(pfs, 'payment', false, aggMonths), plan: sumByMonths(planPfs, 'payment', false, aggMonths), icon: 'coins', defWeight: 20 },
];
let storageKey = 'opc-perf-t';
if (state.perfView === 'quarterly') storageKey = 'opc-perf-Q' + (activeQ + 1);
else if (state.perfView === 'monthly') storageKey = 'opc-perf-M' + (state.perfMonth || '');
const saved = JSON.parse(localStorage.getItem(storageKey) || '{}');
function val(key, field, def) { const r = saved[key] || {}; return r[field] !== undefined && r[field] !== '' ? Number(r[field]) : def; }
function moneyWan(v) { if (Math.abs(v) >= 10000) return (v / 10000).toFixed(1) + '万'; return v.toLocaleString(); }
function moneyIntL(v) { return Math.round(Number(v || 0)).toLocaleString('zh-CN'); }
let totalScore = 0;
const perfHTML = perfRows.map(r => {
const target = r.plan; const weight = val(r.key, 'weight', r.defWeight);
const score = target > 0 ? Math.round((r.complete / target) * weight * 10) / 10 : 0;
const rate = target > 0 ? Math.round((r.complete / target) * 100) : 0;
totalScore += score;
return `<tr class="border-b border-slate-100">
<td class="p-3 align-middle text-left font-medium text-slate-700"><i data-lucide="${r.icon}" style="width:16px;height:16px;display:inline-block;vertical-align:-3px;margin-right:6px" class="text-brand-500"></i>${r.label}</td>
<td class="p-3 align-middle text-center text-slate-700 font-mono text-sm">${moneyWan(target)}</td>
<td class="p-3 align-middle text-center text-slate-700 font-mono text-sm">${moneyWan(r.complete)}</td>
<td class="p-3 align-middle text-center font-semibold text-sm ${rate >= 100 ? 'text-green-600' : rate >= 50 ? 'text-amber-600' : 'text-red-500'}">${rate}%</td>
<td class="p-3 align-middle text-center"><div class="inline-flex justify-center"><input type="number" step="0.1" min="0" max="100" value="${weight}" class="perf-weight form-ctrl form-ctrl-sm w-16 text-center" style="appearance:none;-webkit-appearance:none" data-key="${r.key}" onchange="updateMyScore('${r.key}','weight',this.value)"></div></td>
<td class="p-3 align-middle text-center font-semibold text-brand-700 text-sm">${score.toFixed(1)}</td></tr>`;
}).join('');
// ── 绩效 Header ──
const yearOpts = [2020,2021,2022,2023,2024,2025,2026,2027];
const yearSelect = `<span class="text-sm text-slate-500">年份：</span><select onchange="setMyYear(this.value)" class="px-2 py-0.5 pr-6 rounded text-sm font-medium border border-slate-200 bg-white"><option value="0"${planYear===0?' selected':''}>所有年份</option>${yearOpts.map(y => `<option value="${y}" ${planYear===y?'selected':''}>${y}年</option>`).join('')}</select>`;
const viewBtns = `<button onclick="setMyView('annual')" class="px-3 py-0.5 rounded text-sm font-medium ${state.perfView==='annual'?'bg-brand-600 text-white':'bg-slate-100 text-slate-600 hover:bg-slate-200'}">全年</button>`;
const quarterBtns = qLabels.map((ql,i) => `<button onclick="setMyQuarter(${i})" class="px-3 py-0.5 rounded text-sm font-medium ${state.perfView==='quarterly'&&activeQ===i?'bg-brand-600 text-white':'bg-slate-100 text-slate-600 hover:bg-slate-200'}">${ql}</button>`).join('');
const monthBtns = activeMonths.map(m => { const ms = planYear+'-'+String(m).padStart(2,'0'); return `<button onclick="setMyMonth('${ms}')" class="px-3 py-0.5 rounded text-sm font-medium ${state.perfView==='monthly'&&state.perfMonth===ms?'bg-brand-600 text-white':'bg-slate-100 text-slate-600 hover:bg-slate-200'}">${m}月</button>`; }).join('');
const perfHeader = `<div class="card py-2 px-4"><div class="flex items-center gap-2 flex-wrap">${yearSelect}<span class="text-slate-300 mx-1">|</span>${viewBtns}<span class="text-slate-300 mx-1">|</span><span class="text-sm text-slate-500">季度：</span>${quarterBtns}<span class="text-slate-300 mx-1">|</span><span class="text-sm text-slate-500">月度：</span>${monthBtns}</div></div>`;
// ── 2. 预算月报 ──
const planFm = computePlanMonthly(planPfs, planYear);
const mLbl = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
const pLabels = ['合同金额','确收金额','确收毛利','成本','支出','回款','项目现金流'];
const pFields = ['sign','revenue','gross','cost','paid','payment',null];
var pAnnual = { sign:0, revenue:0, gross:0, cost:0, paid:0, payment:0 };
for (var i = 0; i < planFm.length; i++) { pAnnual.sign += planFm[i].sign; pAnnual.revenue += planFm[i].revenue; pAnnual.gross += planFm[i].gross; pAnnual.cost += planFm[i].cost; pAnnual.paid += planFm[i].paid; pAnnual.payment += planFm[i].payment; }
var planThead = '<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 mi2 = 0; mi2 < 12; mi2++) { planThead += '<th class="py-1.5 text-right font-semibold text-slate-600 whitespace-nowrap">' + mLbl[mi2] + '</th>'; }
planThead += '</tr>';
var planTbody = '';
for (var ri = 0; ri < pLabels.length; ri++) {
var label = pLabels[ri];
var fKey = pFields[ri];
var annualVal = fKey ? pAnnual[fKey] : pAnnual.payment - pAnnual.paid;
planTbody += '<tr class="border-b border-slate-100"><td class="py-1.5 text-slate-700 whitespace-nowrap">' + label + '</td><td class="py-1.5 text-right font-semibold text-slate-800 whitespace-nowrap">' + moneyIntL(annualVal) + '</td>';
for (var mi3 = 0; mi3 < 12; mi3++) {
if (fKey) { planTbody += '<td class="py-1.5 text-right text-slate-600 whitespace-nowrap">' + moneyIntL(planFm[mi3][fKey]) + '</td>'; }
else { planTbody += '<td class="py-1.5 text-right text-slate-600 whitespace-nowrap">' + moneyIntL(planFm[mi3].payment - planFm[mi3].paid) + '</td>'; }
}
planTbody += '</tr>';
}
var planOverviewHTML = `<section class="card p-4"><div class="overflow-x-auto"><table class="w-full text-xs plan-monthly-table"><thead>${planThead}</thead><tbody>${planTbody}</tbody></table></div></section>`;
// ── 3. 已发生月报 ──
const finPfs = (data.projectFinances || []);
const finFm = computePlanMonthly(finPfs, planYear);
var fAnnual = { sign:0, revenue:0, gross:0, cost:0, paid:0, payment:0 };
for (var fi = 0; fi < finFm.length; fi++) { fAnnual.sign += finFm[fi].sign; fAnnual.revenue += finFm[fi].revenue; fAnnual.gross += finFm[fi].gross; fAnnual.cost += finFm[fi].cost; fAnnual.paid += finFm[fi].paid; fAnnual.payment += finFm[fi].payment; }
var finThead = '<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 mi4 = 0; mi4 < 12; mi4++) { finThead += '<th class="py-1.5 text-right font-semibold text-slate-600 whitespace-nowrap">' + mLbl[mi4] + '</th>'; }
finThead += '</tr>';
var finTbody = '';
var fLabels2 = ['合同金额','确收金额','确收毛利','成本','支出','回款','项目现金流'];
for (var ri2 = 0; ri2 < fLabels2.length; ri2++) {
var fKey2 = pFields[ri2];
var aVal = fKey2 ? fAnnual[fKey2] : fAnnual.payment - fAnnual.paid;
finTbody += '<tr class="border-b border-slate-100"><td class="py-1.5 text-slate-700 whitespace-nowrap">' + fLabels2[ri2] + '</td><td class="py-1.5 text-right font-semibold text-slate-800 whitespace-nowrap">' + moneyIntL(aVal) + '</td>';
for (var mi5 = 0; mi5 < 12; mi5++) {
if (fKey2) { finTbody += '<td class="py-1.5 text-right text-slate-600 whitespace-nowrap">' + moneyIntL(finFm[mi5][fKey2]) + '</td>'; }
else { finTbody += '<td class="py-1.5 text-right text-slate-600 whitespace-nowrap">' + moneyIntL(finFm[mi5].payment - finFm[mi5].paid) + '</td>'; }
}
finTbody += '</tr>';
}
var finOverviewHTML = `<section class="card p-4"><div class="overflow-x-auto"><table class="w-full text-xs plan-monthly-table"><thead>${finThead}</thead><tbody>${finTbody}</tbody></table></div></section>`;
// ── 组装页面 ──
document.querySelector("#my").innerHTML = `
<style>
.perf-weight::-webkit-outer-spin-button,
.perf-weight::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.perf-weight { -moz-appearance: textfield; }
.plan-monthly-table td, .plan-monthly-table th { min-width: 70px; }
.plan-monthly-table td:first-child, .plan-monthly-table th:first-child { min-width: 80px; }
</style>
<div class="grid gap-4">
<h2 class="text-base font-bold text-slate-700 flex items-center gap-2"><i data-lucide="target" style="width:18px;height:18px" class="text-brand-500"></i>绩效</h2>
${perfHeader}
<section class="card p-4">
<table class="w-full text-sm">
<thead><tr class="bg-slate-50 border-b border-slate-200">
<th class="p-3 text-left font-semibold text-slate-500">指标</th>
<th class="p-3 text-center font-semibold text-slate-500">目标（万）</th>
<th class="p-3 text-center font-semibold text-slate-500">完成情况</th>
<th class="p-3 text-center font-semibold text-slate-500">完成率</th>
<th class="p-3 text-center font-semibold text-slate-500">权重</th>
<th class="p-3 text-center font-semibold text-slate-500">评分</th>
</tr></thead>
<tbody>${perfHTML}</tbody>
<tfoot><tr class="border-t-2 border-slate-200 bg-slate-50 font-semibold">
<td class="p-3 text-left text-slate-700">合计</td><td class="p-3 text-center text-slate-500">—</td><td class="p-3 text-center text-slate-500">—</td><td class="p-3 text-center text-slate-500">—</td><td class="p-3 text-center text-slate-700">100</td><td class="p-3 text-center text-brand-700 text-base">${totalScore.toFixed(1)}</td>
</tr></tfoot>
</table>
</section>
<h2 class="text-base font-bold text-slate-700 flex items-center gap-2 mt-4"><i data-lucide="calendar-range" style="width:18px;height:18px" class="text-brand-500"></i>预算月报</h2>
${planOverviewHTML}
<h2 class="text-base font-bold text-slate-700 flex items-center gap-2 mt-4"><i data-lucide="folder-open-dot" style="width:18px;height:18px" class="text-brand-500"></i>已发生月报</h2>
${finOverviewHTML}
<h2 class="text-base font-bold text-slate-700 flex items-center gap-2 mt-4"><i data-lucide="file-text" style="width:18px;height:18px" class="text-brand-500"></i>重点项目</h2>
<section class="card p-4">
${renderMyProjects()}
</section>
</div>`;
// ── 重点项目列表 ──
function renderMyProjects() {
const ops = state.data.operations || [];
if (!ops.length) return '<p class="text-slate-400 text-sm py-4 text-center">暂无项目</p>';
return '<div class="grid gap-2">' + ops.map(o => {
return `<a href="javascript:void(0)" onclick="state.selectedProject=${o.id};switchTab('projects')" class="block p-2.5 rounded-lg hover:bg-slate-50 border border-slate-100 transition-colors">
<span class="text-sm font-medium text-slate-700 truncate">${esc(o.project_name || '')}</span>
</a>`;
}).join('') + '</div>';
}
if (window.lucide) window.lucide.createIcons();
};
// ── 筛选切换 ──
window.setMyYear = (y) => { state.planYear = parseInt(y); renderMy(); };
window.setMyView = (v) => { state.perfView = v; renderMy(); };
window.setMyQuarter = (q) => { state.perfView = 'quarterly'; state.perfQuarter = q; renderMy(); };
window.setMyMonth = (m) => { state.perfView = 'monthly'; state.perfMonth = m; renderMy(); };
window.updateMyScore = (key, field, value) => {
let storageKey = 'opc-perf-t';
if (state.perfView === 'quarterly') storageKey = 'opc-perf-Q' + ((state.perfQuarter || 0) + 1);
else if (state.perfView === 'monthly') storageKey = 'opc-perf-M' + (state.perfMonth || '');
const saved = JSON.parse(localStorage.getItem(storageKey) || '{}');
saved[key] = saved[key] || {};
saved[key][field] = value;
localStorage.setItem(storageKey, JSON.stringify(saved));
renderMy();
};
// ── 数据加载 ──
async function loadMyData() {
for (var i = 0; i < 3; i++) {
var r = i === 0 ? 'planFinances' : i === 1 ? 'projectFinances' : 'operations';
try { state.data[r] = await api("/api/" + r + "/list?tenant=" + encodeURIComponent(state.tenant)); }
catch(e) { console.error('loadMyData failed:', r, e.message); }
}
}
Reference in New Issue View Git Blame Copy Permalink