https://www.pandoraburo.ru/zavodskoy-kalkulyator-dlya-rascheta-tceny-metalloproduktcii
Заводской калькулятор для расчета цены металлопродукции
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>СРМ Пандорра — Калькулятор ценообразования</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
}
.logo-text h1 {
font-size: 24px;
font-weight: 700;
margin-bottom: 4px;
}
.logo-text p {
font-size: 13px;
opacity: 0.9;
}
.header-actions {
display: flex;
gap: 12px;
}
.btn-icon {
width: 42px;
height: 42px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: all 0.2s;
}
.btn-icon:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.content {
display: grid;
grid-template-columns: 1fr 420px;
gap: 0;
min-height: 700px;
}
@media (max-width: 1100px) {
.content {
grid-template-columns: 1fr;
}
}
.inputs-section {
padding: 30px 40px;
overflow-y: auto;
max-height: calc(100vh - 120px);
}
.section-title {
font-size: 18px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.section-title::before {
content: '';
width: 4px;
height: 20px;
background: #667eea;
border-radius: 2px;
}
.preset-buttons {
display: flex;
gap: 10px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.preset-btn {
padding: 8px 16px;
background: #f8f9fa;
border: 2px solid #e9ecef;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
color: #495057;
cursor: pointer;
transition: all 0.2s;
}
.preset-btn:hover {
border-color: #667eea;
background: #f0f4ff;
transform: translateY(-2px);
}
.preset-btn.active {
background: #667eea;
color: white;
border-color: #667eea;
}
.panel {
background: #f8f9fa;
border-radius: 16px;
padding: 24px;
margin-bottom: 20px;
border: 1px solid #e9ecef;
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
.panel-title {
font-size: 16px;
font-weight: 700;
color: #2c3e50;
}
.panel-badge {
font-size: 11px;
padding: 4px 10px;
background: #e8f5e9;
color: #2e7d32;
border-radius: 12px;
font-weight: 600;
}
.input-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.input-group {
display: flex;
flex-direction: column;
}
.input-group label {
font-size: 12px;
font-weight: 600;
color: #6c757d;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.input-group input,
.input-group select {
padding: 10px 14px;
border: 2px solid #dee2e6;
border-radius: 10px;
font-size: 14px;
transition: all 0.2s;
background: white;
}
.input-group input:focus,
.input-group select:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.input-hint {
font-size: 11px;
color: #adb5bd;
margin-top: 4px;
}
.vim-bar {
margin-top: 16px;
background: #e9ecef;
height: 8px;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.vim-fill {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
transition: width 0.4s;
border-radius: 4px;
}
.vim-label {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #6c757d;
margin-top: 6px;
}
.dynamic-rows {
display: flex;
flex-direction: column;
gap: 12px;
}
.dynamic-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 40px;
gap: 10px;
align-items: center;
padding: 12px;
background: white;
border-radius: 10px;
border: 1px solid #e9ecef;
}
.dynamic-row input,
.dynamic-row select {
padding: 8px 12px;
border: 1px solid #dee2e6;
border-radius: 8px;
font-size: 13px;
}
.btn-remove {
width: 36px;
height: 36px;
border-radius: 8px;
background: #ffebee;
border: none;
color: #c62828;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: all 0.2s;
}
.btn-remove:hover {
background: #c62828;
color: white;
}
.btn-add {
width: 100%;
padding: 12px;
background: #f8f9fa;
border: 2px dashed #dee2e6;
border-radius: 10px;
color: #6c757d;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
margin-top: 12px;
}
.btn-add:hover {
border-color: #667eea;
color: #667eea;
background: #f0f4ff;
}
/* Правая колонка — результаты */
.results-section {
background: #f8f9fa;
padding: 30px;
border-left: 1px solid #e9ecef;
overflow-y: auto;
max-height: calc(100vh - 120px);
}
.result-card {
background: white;
border-radius: 16px;
padding: 24px;
margin-bottom: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.price-main {
text-align: center;
padding: 20px 0;
}
.price-label {
font-size: 13px;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.price-value {
font-size: 48px;
font-weight: 800;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
}
.price-currency {
font-size: 18px;
color: #6c757d;
font-weight: 600;
}
.margin-badge {
display: inline-block;
padding: 8px 20px;
border-radius: 20px;
font-weight: 700;
font-size: 14px;
margin-top: 12px;
}
.margin-badge.high {
background: #e8f5e9;
color: #2e7d32;
}
.margin-badge.good {
background: #fff3e0;
color: #e65100;
}
.margin-badge.low {
background: #fff8e1;
color: #f57f17;
}
.margin-badge.danger {
background: #ffebee;
color: #c62828;
}
.breakdown-item {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #f1f3f5;
font-size: 14px;
}
.breakdown-item:last-child {
border-bottom: none;
}
.breakdown-item .name {
color: #495057;
}
.breakdown-item .cost {
font-weight: 700;
color: #2c3e50;
}
.breakdown-item.highlight .cost {
color: #e67e22;
}
.total-row {
display: flex;
justify-content: space-between;
padding: 16px 0 8px 0;
border-top: 2px solid #dee2e6;
margin-top: 8px;
font-weight: 700;
font-size: 18px;
}
.gauge-container {
text-align: center;
padding: 20px 0;
}
.gauge-svg {
width: 180px;
height: 100px;
}
.gauge-value {
font-size: 32px;
font-weight: 800;
color: #667eea;
margin-top: 8px;
}
.gauge-label {
font-size: 12px;
color: #6c757d;
margin-top: 4px;
}
.batch-stats {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
margin-top: 16px;
}
.stat-box {
background: #f8f9fa;
padding: 16px;
border-radius: 12px;
text-align: center;
}
.stat-label {
font-size: 11px;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.stat-value {
font-size: 18px;
font-weight: 700;
color: #2c3e50;
}
.stat-value.profit {
color: #2e7d32;
}
.actions {
display: flex;
gap: 12px;
margin-top: 20px;
}
.btn-action {
flex: 1;
padding: 14px;
border-radius: 12px;
font-weight: 700;
font-size: 14px;
cursor: pointer;
border: none;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}
.btn-secondary {
background: white;
color: #6c757d;
border: 2px solid #dee2e6;
}
.btn-secondary:hover {
border-color: #667eea;
color: #667eea;
}
/* Модальное окно истории */
.history-modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
align-items: center;
justify-content: center;
}
.history-modal.active {
display: flex;
}
.history-content {
background: white;
border-radius: 20px;
max-width: 800px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
padding: 30px;
}
.history-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.history-item {
padding: 16px;
background: #f8f9fa;
border-radius: 12px;
margin-bottom: 12px;
cursor: pointer;
transition: all 0.2s;
}
.history-item:hover {
background: #f0f4ff;
transform: translateX(4px);
}
.history-date {
font-size: 12px;
color: #6c757d;
margin-bottom: 6px;
}
.history-info {
display: flex;
justify-content: space-between;
align-items: center;
}
.history-name {
font-weight: 700;
color: #2c3e50;
}
.history-price {
font-size: 18px;
font-weight: 700;
color: #667eea;
}
@media print {
body {
background: white;
padding: 0;
}
.header, .inputs-section, .actions, .preset-buttons {
display: none !important;
}
.container {
box-shadow: none;
border-radius: 0;
}
.content {
grid-template-columns: 1fr;
}
.results-section {
border-left: none;
max-height: none;
}
}
@media (max-width: 768px) {
.header {
padding: 20px;
flex-direction: column;
gap: 16px;
}
.inputs-section, .results-section {
padding: 20px;
max-height: none;
}
.batch-stats {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<div class="logo-icon">?</div>
<div class="logo-text">
<h1>СРМ Пандорра</h1>
<p>Калькулятор ценообразования машиностроительного завода</p>
</div>
</div>
<div class="header-actions">
<button class="btn-icon" onclick="showHistory()" title="История расчётов">?</button>
<button class="btn-icon" onclick="window.print()" title="Печать/PDF">?️</button>
<button class="btn-icon" onclick="resetCalculator()" title="Сброс">?</button>
</div>
</div>
<div class="content">
<div class="inputs-section">
<h2 class="section-title">Быстрый старт</h2>
<div class="preset-buttons">
<button class="preset-btn" data-preset="flange">Фланец Ду100</button>
<button class="preset-btn" data-preset="shaft">Вал-шестерня</button>
<button class="preset-btn" data-preset="housing">Корпус редуктора</button>
<button class="preset-btn" data-preset="bracket">Кронштейн</button>
</div>
<div class="panel">
<div class="panel-header">
<div class="panel-title">? Параметры изделия</div>
<span class="panel-badge">Обязательно</span>
</div>
<div class="input-grid">
<div class="input-group" style="grid-column: span 2;">
<label>Наименование</label>
<input type="text" id="pName" value="Фланец стальной Ду100" />
</div>
<div class="input-group">
<label>№ чертежа / ТУ</label>
<input type="text" id="pDraw" value="ПРГ.301124.017" />
</div>
<div class="input-group">
<label>Объём партии (шт)</label>
<input type="number" id="qtyNum" min="1" value="120" step="10" />
<div class="input-hint">Скидки: 50+ шт = -2%, 200+ = -4%, 500+ = -7%</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-header">
<div class="panel-title">? Материал</div>
<span class="panel-badge">ВИМ: <span id="vimPct">0</span>%</span>
</div>
<div class="input-grid">
<div class="input-group" style="grid-column: span 2;">
<label>Марка материала</label>
<select id="matSel"></select>
</div>
<div class="input-group">
<label>Цена (₽/кг)</label>
<input type="number" id="matPrice" min="0" step="1" value="92" />
</div>
<div class="input-group">
<label>Масса заготовки (кг)</label>
<input type="number" id="matGross" min="0" step="0.1" value="4.2" />
</div>
<div class="input-group">
<label>Масса чистая (кг)</label>
<input type="number" id="matNet" min="0" step="0.1" value="2.9" />
</div>
<div class="input-group">
<label>ТЗР (%)</label>
<input type="number" id="tzr" min="0" step="0.5" value="4" />
</div>
</div>
<div class="vim-bar">
<div class="vim-fill" id="vimBar" style="width: 0%"></div>
</div>
<div class="vim-label">
<span>Отходы: <strong id="scrapKg">0</strong> кг</span>
<span id="vimGrade"></span>
</div>
</div>
<div class="panel">
<div class="panel-header">
<div class="panel-title">? Покупные комплектующие</div>
</div>
<div class="dynamic-rows" id="compRows"></div>
<button class="btn-add" onclick="addComponent()">+ Добавить комплектующее</button>
</div>
<div class="panel">
<div class="panel-header">
<div class="panel-title">⚙️ Трудозатраты по операциям</div>
<span class="panel-badge">Σ: <span id="sumHours">0</span> н-ч</span>
</div>
<div class="dynamic-rows" id="opRows"></div>
<button class="btn-add" onclick="addOperation()">+ Добавить операцию</button>
</div>
<div class="panel">
<div class="panel-header">
<div class="panel-title">⚡ Производственные расходы</div>
</div>
<div class="input-grid">
<div class="input-group">
<label>Электроэнергия (кВт·ч/шт)</label>
<input type="number" id="kwh" min="0" step="0.1" value="3.6" />
</div>
<div class="input-group">
<label>Тариф (₽/кВт·ч)</label>
<input type="number" id="kwhRate" min="0" step="0.1" value="8.9" />
</div>
<div class="input-group">
<label>Амортизация (₽/шт)</label>
<input type="number" id="depr" min="0" step="1" value="85" />
</div>
<div class="input-group">
<label>Инструмент (₽/шт)</label>
<input type="number" id="tool" min="0" step="1" value="40" />
</div>
<div class="input-group">
<label>Логистика (₽/шт)</label>
<input type="number" id="logist" min="0" step="1" value="26" />
</div>
</div>
</div>
<div class="panel">
<div class="panel-header">
<div class="panel-title">? Ценообразование</div>
</div>
<div class="input-grid">
<div class="input-group">
<label>Страховые взносы (%)</label>
<input type="number" id="socRate" min="0" max="60" step="0.1" value="30.2" />
</div>
<div class="input-group">
<label>Накладные (% к ЗП)</label>
<input type="number" id="overhead" min="0" step="5" value="110" />
</div>
<div class="input-group">
<label>Рентабельность (%)</label>
<input type="number" id="margin" min="0" max="60" step="1" value="18" />
</div>
<div class="input-group">
<label>Срочность (%)</label>
<input type="number" id="urgent" min="0" max="50" step="1" value="0" />
</div>
</div>
</div>
</div>
<div class="results-section">
<div class="result-card">
<div class="price-main">
<div class="price-label">Отпускная цена за единицу</div>
<div class="price-value" id="rPrice">0</div>
<div class="price-currency">рублей с НДС</div>
<div class="margin-badge" id="marginBadge">Оптимально</div>
</div>
</div>
<div class="result-card">
<h3 style="margin-bottom: 16px; color: #2c3e50;">Структура себестоимости</h3>
<div id="breakdownContainer"></div>
<div class="total-row">
<span class="name">Полная себестоимость</span>
<span class="cost" id="rFull">0 ₽</span>
</div>
</div>
<div class="result-card">
<div class="gauge-container">
<svg class="gauge-svg" viewbox="0 0 180 100">
<path d="M20 90 A70 70 0 0 1 160 90" fill="none" stroke="#e9ecef" stroke-width="12"></path>
<path id="gaugeArc" d="M20 90 A70 70 0 0 1 160 90" fill="none" stroke="url(#gaugeGradient)" stroke-width="12" stroke-dasharray="219.9" stroke-dashoffset="219.9" style="transition:stroke-dashoffset 0.6s"></path>
<defs>
<lineargradient id="gaugeGradient">
<stop offset="0%" style="stop-color:#667eea"></stop>
<stop offset="100%" style="stop-color:#764ba2"></stop>
</lineargradient>
</defs>
</svg>
<div class="gauge-value" id="gaugeVal">0%</div>
<div class="gauge-label">Рентабельность изделия</div>
</div>
</div>
<div class="result-card">
<h3 style="margin-bottom: 16px; color: #2c3e50;">Показатели партии</h3>
<div class="batch-stats">
<div class="stat-box">
<div class="stat-label">Себестоимость</div>
<div class="stat-value" id="bCost">0 ₽</div>
</div>
<div class="stat-box">
<div class="stat-label">Выручка</div>
<div class="stat-value" id="bRev">0 ₽</div>
</div>
<div class="stat-box">
<div class="stat-label">Прибыль</div>
<div class="stat-value profit" id="bProfit">0 ₽</div>
</div>
</div>
</div>
<div class="actions">
<button class="btn-action btn-primary" onclick="saveCalculation()">? Сохранить</button>
<button class="btn-action btn-secondary" onclick="window.print()">?️ Печать</button>
</div>
</div>
</div>
</div>
<div class="history-modal" id="historyModal">
<div class="history-content">
<div class="history-header">
<h2>История расчётов</h2>
<button class="btn-icon" onclick="closeHistory()">✕</button>
</div>
<div id="historyList"></div>
</div>
</div>
<script>
// Данные материалов
const MATERIALS = {
"Сталь Ст45 (круг)": 92,
"Сталь 40Х": 105,
"Сталь 09Г2С": 88,
"Сталь 12Х18Н10Т (нерж.)": 385,
"Чугун СЧ20": 74,
"Латунь ЛС59-1": 520,
"Алюминий Д16Т": 340,
"Титан ВТ6": 2400
};
// Данные операций
const OPS = {
"Токарная": 950,
"Токарная с ЧПУ": 1150,
"Фрезерная": 1050,
"Расточная": 1100,
"Сверлильная": 800,
"Шлифовальная": 1100,
"Зубонарезная": 1250,
"Сварочная": 1150,
"Слесарно-сборочная": 850,
"Термическая": 950
};
// Пресеты
const PRESETS = {
flange: {
name: "Фланец стальной Ду100",
draw: "ПРГ.301124.017",
qty: 250,
mat: "Сталь Ст45 (круг)",
price: 92,
gross: 3.1,
net: 2.2,
comps: [["Шпилька М16", 8, 24]],
ops: [["Токарная с ЧПУ", 0.35], ["Сверлильная", 0.20]]
},
shaft: {
name: "Вал-шестерня привода",
draw: "ПРГ.753111.042",
qty: 60,
mat: "Сталь 40Х",
price: 105,
gross: 8.4,
net: 5.6,
comps: [["Шпонка 10×8×45", 1, 35]],
ops: [["Токарная с ЧПУ", 0.60], ["Зубонарезная", 0.85], ["Шлифовальная", 0.30]]
},
housing: {
name: "Корпус редуктора Ц2-100",
draw: "ПРГ.321456.008",
qty: 25,
mat: "Чугун СЧ20",
price: 74,
gross: 46,
net: 31.5,
comps: [["Подшипник 206", 2, 210]],
ops: [["Фрезерная", 2.4], ["Расточная", 1.8], ["Сверлильная", 1.1]]
},
bracket: {
name: "Кронштейн сварной",
draw: "ПРГ.782213.114",
qty: 400,
mat: "Сталь 09Г2С",
price: 88,
gross: 6.8,
net: 5.9,
comps: [],
ops: [["Сварочная", 1.2], ["Слесарно-сборочная", 0.4]]
}
};
const DEFAULT = {
name: "Фланец стальной Ду100",
draw: "ПРГ.301124.017",
qty: 120,
mat: "Сталь Ст45 (круг)",
price: 92,
gross: 4.2,
net: 2.9,
comps: [["Подшипник 206", 2, 210]],
ops: [["Токарная с ЧПУ", 0.42], ["Фрезерная", 0.30], ["Шлифовальная", 0.12]]
};
// Инициализация
const $ = id => document.getElementById(id);
const nf = new Intl.NumberFormat('ru-RU', {minimumFractionDigits: 0, maximumFractionDigits: 0});
const nf2 = new Intl.NumberFormat('ru-RU', {minimumFractionDigits: 2, maximumFractionDigits: 2});
// Заполнение списка материалов
Object.keys(MATERIALS).forEach(k => {
const opt = document.createElement('option');
opt.value = k;
opt.textContent = k;
$('matSel').appendChild(opt);
});
$('matSel').value = DEFAULT.mat;
// Функция скидки по объёму
function tierDiscount(q) {
return q >= 500 ? 7 : q >= 200 ? 4 : q >= 50 ? 2 : 0;
}
// Создание строки операции
function createOperationRow(name, hours) {
const div = document.createElement('div');
div.className = 'dynamic-row';
div.innerHTML = `
<select class="opSel">
${Object.keys(OPS).map(k => `<option value="${k}" ${k === name ? 'selected' : ''}>${k}</option>`).join('')}
</select>
<input type="number" class="opH" placeholder="Н-ч" min="0" step="0.01" value="${hours}">
<input type="number" class="opR" placeholder="Ставка" min="0" step="10" value="${OPS[name] || 950}">
<button class="btn-remove" onclick="this.parentElement.remove(); recalc();">✕</button>
`;
div.querySelector('.opSel').addEventListener('change', e => {
div.querySelector('.opR').value = OPS[e.target.value];
recalc();
});
return div;
}
// Создание строки комплектующего
function createComponentRow(name, qty, price) {
const div = document.createElement('div');
div.className = 'dynamic-row';
div.innerHTML = `
<input type="text" class="cpN" placeholder="Наименование" value="${name}">
<input type="number" class="cpQ" placeholder="Кол-во" min="0" step="1" value="${qty}">
<input type="number" class="cpP" placeholder="Цена ₽" min="0" step="1" value="${price}">
<button class="btn-remove" onclick="this.parentElement.remove(); recalc();">✕</button>
`;
return div;
}
// Добавление операции
function addOperation() {
$('opRows').appendChild(createOperationRow('Токарная', 0.20));
recalc();
}
// Добавление комплектующего
function addComponent() {
$('compRows').appendChild(createComponentRow('Позиция', 1, 100));
recalc();
}
// Основной расчёт
function recalc() {
const qty = Math.max(1, Math.round(parseFloat($('qtyNum').value) || 1));
const gross = parseFloat($('matGross').value) || 0;
const net = parseFloat($('matNet').value) || 0;
const mprice = parseFloat($('matPrice').value) || 0;
const tzr = parseFloat($('tzr').value) || 0;
const kwh = parseFloat($('kwh').value) || 0;
const kwhRate = parseFloat($('kwhRate').value) || 0;
const depr = parseFloat($('depr').value) || 0;
const tool = parseFloat($('tool').value) || 0;
const logist = parseFloat($('logist').value) || 0;
const socRate = parseFloat($('socRate').value) || 0;
const overhead = parseFloat($('overhead').value) || 0;
const margin = parseFloat($('margin').value) || 0;
const urgent = parseFloat($('urgent').value) || 0;
// Расчёт материалов
const matCost = gross * mprice * (1 + tzr / 100);
const vim = gross > 0 ? (net / gross) * 100 : 0;
// Комплектующие
let compCost = 0;
document.querySelectorAll('#compRows .dynamic-row').forEach(row => {
const q = parseFloat(row.querySelector('.cpQ').value) || 0;
const p = parseFloat(row.querySelector('.cpP').value) || 0;
compCost += q * p;
});
// Операции
let wage = 0, hours = 0;
document.querySelectorAll('#opRows .dynamic-row').forEach(row => {
const h = parseFloat(row.querySelector('.opH').value) || 0;
const r = parseFloat(row.querySelector('.opR').value) || 0;
wage += h * r;
hours += h;
});
// Социальные взносы
const soc = wage * socRate / 100;
// Энергия
const energy = kwh * kwhRate;
// Амортизация и инструмент
const deprTotal = depr + tool;
// Накладные
const overheadCost = wage * overhead / 100;
// Полная себестоимость
const fullCost = matCost + compCost + wage + soc + energy + deprTotal + logist + overheadCost;
// Прибыль
const profit = fullCost * margin / 100;
// Надбавка за срочность
const urgSum = (fullCost + profit) * urgent / 100;
// Скидка
const disc = tierDiscount(qty);
const discSum = (fullCost + profit + urgSum) * disc / 100;
// Цена без НДС
const priceExcl = fullCost + profit + urgSum - discSum;
// НДС
const vat = priceExcl * 0.2;
// Итоговая цена
const price = priceExcl + vat;
// Рентабельность
const rent = fullCost > 0 ? (profit / fullCost) * 100 : 0;
const margPct = priceExcl > 0 ? ((priceExcl - fullCost) / priceExcl) * 100 : 0;
// Обновление UI
$('rPrice').textContent = nf.format(price);
$('rFull').textContent = nf.format(fullCost) + ' ₽';
$('gaugeVal').textContent = nf2.format(rent).replace('.', ',') + '%';
// Бейдж маржи
const badge = $('marginBadge');
if (margPct > 40) {
badge.textContent = '? Высокая маржа';
badge.className = 'margin-badge high';
} else if (margPct > 20) {
badge.textContent = '✅ Оптимально';
badge.className = 'margin-badge good';
} else if (margPct > 5) {
badge.textContent = '⚠️ Низкая маржа';
badge.className = 'margin-badge low';
} else {
badge.textContent = '? Убыточно';
badge.className = 'margin-badge danger';
}
// ВИМ
$('vimPct').textContent = nf.format(vim);
$('vimBar').style.width = Math.min(100, vim) + '%';
$('scrapKg').textContent = nf2.format(Math.max(0, gross - net)).replace('.', ',');
// Часы
$('sumHours').textContent = nf2.format(hours).replace('.', ',');
// Gauge
const rc = Math.min(rent, 50) / 50;
$('gaugeArc').style.strokeDashoffset = 219.9 * (1 - rc);
// Разбивка
const breakdownItems = [
{ name: '? Материалы', cost: matCost },
{ name: '? Комплектующие', cost: compCost },
{ name: '⚙️ Зарплата', cost: wage },
{ name: '? Страховые взносы', cost: soc },
{ name: '⚡ Электроэнергия', cost: energy },
{ name: '? Амортизация и инструмент', cost: deprTotal },
{ name: '? Логистика', cost: logist },
{ name: '? Накладные расходы', cost: overheadCost }
];
let html = '';
breakdownItems.forEach(item => {
html += `
<div class="breakdown-item">
<span class="name">${item.name}</span>
<span class="cost">${nf.format(item.cost)} ₽</span>
</div>
`;
});
$('breakdownContainer').innerHTML = html;
// Партия
$('bCost').textContent = nf.format(fullCost * qty) + ' ₽';
$('bRev').textContent = nf.format(price * qty) + ' ₽';
$('bProfit').textContent = nf.format((priceExcl - fullCost) * qty) + ' ₽';
// Сохранение в localStorage
saveToLocalStorage();
}
// Сохранение в localStorage
function saveToLocalStorage() {
const data = {
pName: $('pName').value,
pDraw: $('pDraw').value,
qtyNum: $('qtyNum').value,
matSel: $('matSel').value,
matPrice: $('matPrice').value,
matGross: $('matGross').value,
matNet: $('matNet').value,
tzr: $('tzr').value,
kwh: $('kwh').value,
kwhRate: $('kwhRate').value,
depr: $('depr').value,
tool: $('tool').value,
logist: $('logist').value,
socRate: $('socRate').value,
overhead: $('overhead').value,
margin: $('margin').value,
urgent: $('urgent').value,
price: $('rPrice').textContent,
timestamp: new Date().toISOString()
};
localStorage.setItem('currentCalc', JSON.stringify(data));
}
// Загрузка из localStorage
function loadFromLocalStorage() {
const data = JSON.parse(localStorage.getItem('currentCalc'));
if (data) {
$('pName').value = data.pName || DEFAULT.name;
$('pDraw').value = data.pDraw || DEFAULT.draw;
$('qtyNum').value = data.qtyNum || DEFAULT.qty;
$('matSel').value = data.matSel || DEFAULT.mat;
$('matPrice').value = data.matPrice || DEFAULT.price;
$('matGross').value = data.matGross || DEFAULT.gross;
$('matNet').value = data.matNet || DEFAULT.net;
$('tzr').value = data.tzr || 4;
$('kwh').value = data.kwh || 3.6;
$('kwhRate').value = data.kwhRate || 8.9;
$('depr').value = data.depr || 85;
$('tool').value = data.tool || 40;
$('logist').value = data.logist || 26;
$('socRate').value = data.socRate || 30.2;
$('overhead').value = data.overhead || 110;
$('margin').value = data.margin || 18;
$('urgent').value = data.urgent || 0;
}
}
// Применение пресета
function applyPreset(presetKey) {
const p = PRESETS[presetKey];
$('pName').value = p.name;
$('pDraw').value = p.draw;
$('qtyNum').value = p.qty;
$('matSel').value = p.mat;
$('matPrice').value = p.price;
$('matGross').value = p.gross;
$('matNet').value = p.net;
$('opRows').innerHTML = '';
p.ops.forEach(op => $('opRows').appendChild(createOperationRow(op[0], op[1])));
$('compRows').innerHTML = '';
p.comps.forEach(c => $('compRows').appendChild(createComponentRow(c[0], c[1], c[2])));
// Подсветка активной кнопки
document.querySelectorAll('.preset-btn').forEach(btn => btn.classList.remove('active'));
document.querySelector(`[data-preset="${presetKey}"]`).classList.add('active');
recalc();
}
// Сброс калькулятора
function resetCalculator() {
if (confirm('Сбросить все данные?')) {
applyPreset('flange');
document.querySelectorAll('.preset-btn').forEach(btn => btn.classList.remove('active'));
}
}
// Сохранение расчёта в историю
function saveCalculation() {
const history = JSON.parse(localStorage.getItem('calcHistory') || '[]');
const entry = {
id: Date.now(),
name: $('pName').value,
price: $('rPrice').textContent,
timestamp: new Date().toISOString(),
data: JSON.parse(localStorage.getItem('currentCalc'))
};
history.unshift(entry);
if (history.length > 20) history = history.slice(0, 20);
localStorage.setItem('calcHistory', JSON.stringify(history));
alert('Расчёт сохранён в историю!');
}
// Показ истории
function showHistory() {
const history = JSON.parse(localStorage.getItem('calcHistory') || '[]');
const list = $('historyList');
if (history.length === 0) {
list.innerHTML = '<p style="text-align:center; color:#6c757d; padding:40px;">История пуста</p>';
} else {
list.innerHTML = history.map(entry => `
<div class="history-item" onclick="loadFromHistory(${entry.id})">
<div class="history-date">${new Date(entry.timestamp).toLocaleString('ru-RU')}</div>
<div class="history-info">
<span class="history-name">${entry.name}</span>
<span class="history-price">${entry.price} ₽</span>
</div>
</div>
`).join('');
}
$('historyModal').classList.add('active');
}
// Загрузка из истории
function loadFromHistory(id) {
const history = JSON.parse(localStorage.getItem('calcHistory') || '[]');
const entry = history.find(h => h.id === id);
if (entry) {
localStorage.setItem('currentCalc', JSON.stringify(entry.data));
loadFromLocalStorage();
recalc();
closeHistory();
}
}
// Закрытие истории
function closeHistory() {
$('historyModal').classList.remove('active');
}
// Автоматический расчёт при изменении
document.addEventListener('DOMContentLoaded', function() {
loadFromLocalStorage();
// Инициализация операций и комплектующих по умолчанию
DEFAULT.ops.forEach(op => $('opRows').appendChild(createOperationRow(op[0], op[1])));
DEFAULT.comps.forEach(c => $('compRows').appendChild(createComponentRow(c[0], c[1], c[2])));
// Пресеты
document.querySelectorAll('.preset-btn').forEach(btn => {
btn.addEventListener('click', () => applyPreset(btn.dataset.preset));
});
// Материал
$('matSel').addEventListener('change', e => {
$('matPrice').value = MATERIALS[e.target.value];
recalc();
});
// Все инпуты
document.querySelectorAll('input, select').forEach(el => {
el.addEventListener('input', recalc);
el.addEventListener('change', recalc);
});
// Закрытие модалки по клику вне
$('historyModal').addEventListener('click', e => {
if (e.target === $('historyModal')) closeHistory();
});
recalc();
});
</script>
</body>
</html>
2026-08-17T08:49:32Z
https://pandoraburo.ru/ssl/u/pic/e2/6850fe98a211f18279a3cef0e847cc/-/logo.png
1592962
https://www.pandoraburo.ru/