qiukai/opc-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2.0.4 — 曲线图默认折叠可展开，明细列表默认展示

Browse Source
This commit is contained in:
mac
2026-06-16 15:51:09 +08:00
parent 194c91cf25
commit d6ec7b24ec
1 changed files with 30 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
static/app.js
View File

@@ -421,16 +421,43 @@ function renderProducts() {
function renderFinance() {
const rows = state.data.finance.map((x) => [x.month, x.category, money(x.amount), text(x.notes)]);
document.querySelector("#finance").innerHTML = `<div class="grid gap-4">
${card(`<h2 class="mb-4 text-lg font-bold">收入、毛利、成本/费用、净利月度曲线</h2><div style="position:relative;height:300px"><canvas id="financeChart2"></canvas></div>`, "p-5")}
${card(`<div class="flex items-center justify-between cursor-pointer" onclick="toggleFinanceChart()"><h2 class="text-lg font-bold text-slate-700">收入、毛利、成本/费用、净利月度曲线</h2><i data-lucide="chevron-down" class="transition-transform rotate-90" id="financeChartIcon"></i></div><div id="financeChartWrap" class="hidden mt-4"><div style="position:relative;height:300px"><canvas id="financeChart2"></canvas></div></div>`, "p-5")}
${card(formHtml([
{ label: "日期", input: `<input name="month" type="date" required>` },
{ label: "类型", input: `<select name="category"><option>签单</option><option>确认收入</option><option>人力成本</option><option>费用</option><option>外部采购</option></select>` },
{ label: "金额/万", input: `<input name="amount" type="number" step="0.01" required>` },
{ label: "费用说明", input: `<input name="notes" placeholder="摘要说明">` },
], { handler: "createFinance", text: "新增明细" }), "p-4")}
${card(`<div class="flex items-center justify-between cursor-pointer" onclick="document.querySelector('#finance-table').classList.toggle('hidden'); this.querySelector('i').classList.toggle('rotate-90')"><h3 class="font-bold text-slate-700">明细列表 <span class="text-slate-400 font-normal">(${state.data.finance.length})</span></h3><i data-lucide="chevron-down" class="transition-transform rotate-90"></i></div><div id="finance-table" class="hidden mt-3">${renderTable(["日期", "类型", "金额", "备注"], rows)}</div>`, "p-4")}
${card(`<h3 class="font-bold text-slate-700 mb-3">明细列表 <span class="text-slate-400 font-normal">(${state.data.finance.length})</span></h3>${renderTable(["日期", "类型", "金额", "备注"], rows)}`, "p-4")}
</div>`;
renderChartOn("financeChart2", state.data.financeMonthly);
if (window.lucide) window.lucide.createIcons();
}
window.toggleFinanceChart = () => {
const wrap = document.querySelector("#financeChartWrap");
const icon = document.querySelector("#financeChartIcon");
if (!wrap) return;
wrap.classList.toggle("hidden");
icon.classList.toggle("rotate-90");
if (!wrap.classList.contains("hidden") && !state.chart2) renderFinanceChart();
};
function renderFinanceChart() {
const { financeMonthly } = state.data;
const canvas = document.querySelector("#financeChart2");
if (!canvas || !window.Chart) return;
if (state.chart2) state.chart2.destroy();
state.chart2 = new Chart(canvas, {
type: "line",
data: {
labels: financeMonthly.map((x) => x.month),
datasets: [
{ label: "收入", data: financeMonthly.map((x) => x.revenue), borderColor: "#2563eb", tension: 0.3 },
{ label: "毛利", data: financeMonthly.map((x) => x.gross_profit), borderColor: "#059669", tension: 0.3 },
{ label: "成本/费用", data: financeMonthly.map((x) => x.cost_expense), borderColor: "#d97706", tension: 0.3 },
{ label: "净利", data: financeMonthly.map((x) => x.net_profit), borderColor: "#7c3aed", tension: 0.3 },
],
},
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: "bottom", labels: { boxWidth: 12, font: { size: 11 } } } }, scales: { x: { ticks: { font: { size: 11 } }, grid: { display: false } }, y: { ticks: { font: { size: 11 } } } } },
});
}
function renderChartOn(id, data) {