1ospanovaroza/eppk-form
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v8 - budget dashboard with plan input by month

Browse Source
This commit is contained in:
Dauren777 2026-06-19 07:03:24 +00:00
parent df85618b03
commit 7e6f43db04
1 changed files with 185 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
budget-dashboard.html
View File

@ -68,6 +68,7 @@ th,td{padding:8px}
<button class="tab active" onclick="showTab('summary')">Сводная таблица</button>
<button class="tab" onclick="showTab('by-branch')">По филиалам</button>
<button class="tab" onclick="showTab('by-article')">По статьям</button>
<button class="tab" onclick="showTab('plan')">Ввод плана</button>
</div>
<!-- Сводная таблица -->
@ -200,6 +201,82 @@ th,td{padding:8px}
</table>
</div>
</div>
<!-- Ввод плана -->
<div id="tab-plan" class="hidden">
<div class="card">
<h2>Ввод плановых показателей по месяцам</h2>
<p style="color:var(--gray-500);margin-bottom:24px">Введите плановые показатели для каждой статьи по месяцам. Данные сохраняются автоматически.</p>
<div class="filter-bar">
<select id="plan-month" onchange="renderPlanTable()">
<option value="Январь">Январь</option>
<option value="Февраль">Февраль</option>
<option value="Март">Март</option>
<option value="Апрель">Апрель</option>
<option value="Май">Май</option>
<option value="Июнь" selected>Июнь</option>
<option value="Июль">Июль</option>
<option value="Август">Август</option>
<option value="Сентябрь">Сентябрь</option>
<option value="Октябрь">Октябрь</option>
<option value="Ноябрь">Ноябрь</option>
<option value="Декабрь">Декабрь</option>
</select>
<select id="plan-branch" onchange="renderPlanTable()">
<option value="all">Все филиалы (сводный)</option>
${branches.map(b => `<option value="${b}">${b}</option>`).join('')}
</select>
<button class="btn btn-success" onclick="savePlanData()">Сохранить</button>
<button class="btn btn-download" onclick="exportPlanToExcel()">Скачать план Excel</button>
</div>
<table id="plan-table">
<thead>
<tr>
<th>Статья бюджета</th>
<th class="text-right">План на месяц (тенге)</th>
<th class="text-right">План на год (тенге)</th>
</tr>
</thead>
<tbody id="plan-body"></tbody>
<tfoot>
<tr class="total-row">
<td><strong>ИТОГО</strong></td>
<td class="text-right" id="plan-total-month">0</td>
<td class="text-right" id="plan-total-year">0</td>
</tr>
</tfoot>
</table>
</div>
<div class="card">
<h2>Помесячный план (свод)</h2>
<div style="overflow-x:auto">
<table id="monthly-plan-table">
<thead>
<tr>
<th>Статья</th>
<th class="text-right">Янв</th>
<th class="text-right">Фев</th>
<th class="text-right">Мар</th>
<th class="text-right">Апр</th>
<th class="text-right">Май</th>
<th class="text-right">Июн</th>
<th class="text-right">Июл</th>
<th class="text-right">Авг</th>
<th class="text-right">Сен</th>
<th class="text-right">Окт</th>
<th class="text-right">Ноя</th>
<th class="text-right">Дек</th>
<th class="text-right">Итого</th>
</tr>
</thead>
<tbody id="monthly-plan-body"></tbody>
</table>
</div>
</div>
</div>
</div>
<script>
@ -399,6 +476,11 @@ function showTab(tab) {
document.getElementById('tab-summary').classList.toggle('hidden', tab !== 'summary');
document.getElementById('tab-by-branch').classList.toggle('hidden', tab !== 'by-branch');
document.getElementById('tab-by-article').classList.toggle('hidden', tab !== 'by-article');
document.getElementById('tab-plan').classList.toggle('hidden', tab !== 'plan');
if (tab === 'plan') {
renderPlanTable();
renderMonthlyPlanTable();
}
}
function exportToExcel() {
@ -482,6 +564,109 @@ function downloadCSV(csv, filename) {
link.click();
}
// Plan functions
let planData = JSON.parse(localStorage.getItem('plan-data')) || {};
function savePlanData() {
const month = document.getElementById('plan-month').value;
const branch = document.getElementById('plan-branch').value;
const key = `${branch}-${month}`;
const rows = document.querySelectorAll('#plan-body tr');
planData[key] = {};
rows.forEach(row => {
const articleCode = row.getAttribute('data-code');
const monthPlan = parseInt(row.querySelector('.month-plan').value) || 0;
const yearPlan = parseInt(row.querySelector('.year-plan').value) || 0;
planData[key][articleCode] = {monthPlan, yearPlan};
});
localStorage.setItem('plan-data', JSON.stringify(planData));
alert('План сохранён!');
renderMonthlyPlanTable();
}
function renderPlanTable() {
const month = document.getElementById('plan-month').value;
const branch = document.getElementById('plan-branch').value;
const key = `${branch}-${month}`;
const data = planData[key] || {};
const tbody = document.getElementById('plan-body');
tbody.innerHTML = '';
let totalMonth = 0, totalYear = 0;
articles.forEach(article => {
const item = data[article.code] || {monthPlan: 0, yearPlan: 0};
totalMonth += item.monthPlan;
totalYear += item.yearPlan;
const row = document.createElement('tr');
row.setAttribute('data-code', article.code);
row.innerHTML = `
<td>${article.name}</td>
<td class="text-right"><input type="number" class="month-plan" value="${item.monthPlan}" style="width:150px;text-align:right;padding:8px;border:2px solid var(--gray-100);border-radius:6px"></td>
<td class="text-right"><input type="number" class="year-plan" value="${item.yearPlan}" style="width:150px;text-align:right;padding:8px;border:2px solid var(--gray-100);border-radius:6px"></td>
`;
tbody.appendChild(row);
});
document.getElementById('plan-total-month').textContent = totalMonth.toLocaleString('ru-RU');
document.getElementById('plan-total-year').textContent = totalYear.toLocaleString('ru-RU');
}
function renderMonthlyPlanTable() {
const months = ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'];
const branch = document.getElementById('plan-branch').value;
const tbody = document.getElementById('monthly-plan-body');
tbody.innerHTML = '';
articles.forEach(article => {
const row = document.createElement('tr');
let total = 0;
let cells = `<td>${article.name}</td>`;
months.forEach(month => {
const key = `${branch}-${month}`;
const data = planData[key] || {};
const item = data[article.code] || {monthPlan: 0};
total += item.monthPlan;
cells += `<td class="text-right">${item.monthPlan.toLocaleString('ru-RU')}</td>`;
});
cells += `<td class="text-right"><strong>${total.toLocaleString('ru-RU')}</strong></td>`;
row.innerHTML = cells;
tbody.appendChild(row);
});
}
function exportPlanToExcel() {
const months = ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'];
const branch = document.getElementById('plan-branch').value;
let csv = '\uFEFF';
csv += 'Статья;' + months.join(';') + ';Итого\n';
articles.forEach(article => {
let row = article.name;
let total = 0;
months.forEach(month => {
const key = `${branch}-${month}`;
const data = planData[key] || {};
const item = data[article.code] || {monthPlan: 0};
total += item.monthPlan;
row += ';' + item.monthPlan;
});
row += ';' + total;
csv += row + '\n';
});
downloadCSV(csv, `budget_plan_${branch}_${new Date().toISOString().slice(0,10)}.csv`);
}
renderAll();
</script>