Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <!-- Основные стили --> | |
| <meta charset="UTF-8"> | |
| <title>Калькулятор удобрений</title> | |
| <style> | |
| /* Общие стили */ | |
| body { | |
| margin: 0 auto; | |
| width: 1000px; | |
| padding: 1em; | |
| background-color: #f0f0f0; | |
| font-family: Arial, sans-serif; | |
| } | |
| /* Стили для заголовка */ | |
| .header-box { | |
| border: 2px solid #2e8b57; | |
| background-color: #2e8b57; | |
| color: white; | |
| text-align: center; | |
| padding: 1em; | |
| border-radius: 10px; | |
| margin-bottom: 20px; | |
| width: 1000px; | |
| box-sizing: border-box; | |
| } | |
| /* Общие стили для всех рамок */ | |
| fieldset, .calculation-box { | |
| border: 2px solid #2e8b57; | |
| background-color: #eaffea; | |
| padding: 1em; | |
| margin-bottom: 20px; | |
| border-radius: 8px; | |
| width: 1000px; | |
| box-sizing: border-box; | |
| } | |
| legend { | |
| font-weight: bold; | |
| color: #2e8b57; | |
| padding: 0 10px; | |
| } | |
| /* Стили для блока профиля */ | |
| .main-container { | |
| display: grid; | |
| grid-template-columns: 40px repeat(7, 110px); | |
| gap: 10px; | |
| padding: 10px; | |
| } | |
| .profile-container { | |
| display: contents; | |
| } | |
| .profile-element { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .profile-label { | |
| font-weight: bold; | |
| font-size: 0.9em; | |
| } | |
| .profile-element input { | |
| width: 80px; | |
| padding: 5px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| text-align: center; | |
| } | |
| .nitrogen-container { | |
| grid-column: 1 / -1; | |
| display: flex; | |
| gap: 20px; | |
| padding-left: 40px; | |
| margin-top: 10px; | |
| } | |
| .nitrogen-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .nitrogen-group label { | |
| font-weight: bold; | |
| font-size: 0.9em; | |
| } | |
| .nitrogen-group input { | |
| width: 60px; | |
| padding: 5px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| } | |
| /* Стили для таблицы удобрений */ | |
| .fertilisers-container { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .fert-row { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 8px; | |
| } | |
| .fert-header { | |
| font-weight: bold; | |
| text-align: center; | |
| width: 80px; | |
| padding: 5px; | |
| font-size: 0.9em; | |
| } | |
| .fert-name { | |
| font-weight: bold; | |
| width: 120px; | |
| text-align: left; | |
| font-size: 0.9em; | |
| } | |
| .fert-cell { | |
| text-align: center; | |
| width: 80px; | |
| padding: 5px; | |
| font-size: 0.9em; | |
| } | |
| .fert-input { | |
| width: 70px; | |
| padding: 5px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| text-align: center; | |
| margin: 0 5px; | |
| font-size: 0.9em; | |
| } | |
| /* Стили для блока расчета */ | |
| .calculation-container { | |
| display: flex; | |
| gap: 40px; | |
| align-items: flex-start; | |
| } | |
| .compensation-section { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .enhancement-title { | |
| font-weight: bold; | |
| color: #2e8b57; | |
| margin-bottom: 5px; | |
| } | |
| .compensation-weights { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .weight-input-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .weight-input-group label { | |
| width: 80px; | |
| text-align: right; | |
| font-weight: bold; | |
| font-size: 0.9em; | |
| } | |
| .weight-input-group input { | |
| width: 70px; | |
| padding: 5px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| } | |
| .input-column { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| #calculate-btn { | |
| background-color: #2e8b57; | |
| color: white; | |
| border: none; | |
| padding: 8px 16px; | |
| font-size: 16px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| margin-bottom: 5px; | |
| font-weight: bold; | |
| } | |
| #calculate-btn:hover { | |
| background-color: #3cb371; | |
| } | |
| .input-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .input-group label { | |
| width: 80px; | |
| text-align: right; | |
| font-weight: bold; | |
| font-size: 0.9em; | |
| } | |
| .input-group input { | |
| width: 70px; | |
| padding: 5px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| } | |
| .micro-container { | |
| padding: 10px; | |
| } | |
| .micro-row { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .micro-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .micro-group label { | |
| min-width: 120px; | |
| } | |
| .micro-group input { | |
| width: 80px; | |
| text-align: right; | |
| } | |
| </style> | |
| <body> | |
| <div class="header-box"> | |
| <h1>Калькулятор удобрений</h1> | |
| </div> | |
| <fieldset> | |
| <legend>Макропрофиль в мг/л (ppm)</legend> | |
| <div class="main-container"> | |
| <!-- Основные элементы --> | |
| <div class="profile-container"> | |
| <div class="profile-element" style="grid-column: 2"> | |
| <span class="profile-label">N</span> | |
| <input id="profile_n" type="number" value="125.000" step="0.001"/> | |
| </div> | |
| <div class="profile-element" style="grid-column: 3"> | |
| <span class="profile-label">P</span> | |
| <input id="profile_p" type="number" value="31.000" step="0.001"/> | |
| </div> | |
| <div class="profile-element" style="grid-column: 4"> | |
| <span class="profile-label">K</span> | |
| <input id="profile_k" type="number" value="210.000" step="0.001"/> | |
| </div> | |
| <div class="profile-element" style="grid-column: 5"> | |
| <span class="profile-label">Ca</span> | |
| <input id="profile_ca" type="number" value="84.000" step="0.001"/> | |
| </div> | |
| <div class="profile-element" style="grid-column: 6"> | |
| <span class="profile-label">Mg</span> | |
| <input id="profile_mg" type="number" value="24.000" step="0.001"/> | |
| </div> | |
| <div class="profile-element" style="grid-column: 7"> | |
| <span class="profile-label">S</span> | |
| <input id="profile_s" type="number" value="56.439" step="0.001"/> | |
| </div> | |
| <div class="profile-element" style="grid-column: 8"> | |
| <span class="profile-label">EC</span> | |
| <input id="profile_ec" type="number" value="0.0" step="0.001"/> | |
| </div> | |
| </div> | |
| <!-- Азотные элементы --> | |
| <div class="nitrogen-container"> | |
| <div class="nitrogen-group"> | |
| <label for="profile_nh4">NH4:</label> | |
| <input id="profile_nh4" type="number" value="1.0" step="1.0" readonly style="background-color: #f0f0f0; color: #666;"> | |
| </div> | |
| <div class="nitrogen-group"> | |
| <label for="profile_no3">NO3:</label> | |
| <input id="profile_no3" type="number" value="8.25" step="0.01" min="5" max="100.001"/> | |
| </div> | |
| </div> | |
| </div> | |
| </fieldset> | |
| <fieldset> | |
| <legend>Составы солей</legend> | |
| <div class="fertilisers-container"> | |
| <!-- Заголовки --> | |
| <div class="fert-row"> | |
| <span class="fert-name">Удобрение</span> | |
| <span class="fert-header">NH4</span> | |
| <span class="fert-header">NO3</span> | |
| <span class="fert-header">P</span> | |
| <span class="fert-header">K</span> | |
| <span class="fert-header">Ca</span> | |
| <span class="fert-header">Mg</span> | |
| <span class="fert-header">S</span> | |
| <span class="fert-header">Грамм</span> | |
| </div> | |
| <!-- Строки с удобрениями --> | |
| <div class="fert-row"> | |
| <span class="fert-name">CaN2O6</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" value="11.863" step="0.001" id="fert_ca_no3"/> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" value="16.972" step="0.001" id="fert_ca_ca"/> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" step="0.001" id="calcium_nitrate"/> | |
| </div> | |
| <div class="fert-row"> | |
| <span class="fert-name">KNO3</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" value="13.854" step="0.001" id="fert_kno3_no3"/> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" value="36.672" step="0.001" id="fert_kno3_k"/> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" step="0.001" id="potassium_nitrate"/> | |
| </div> | |
| <div class="fert-row"> | |
| <span class="fert-name">NH4NO3</span> | |
| <input class="fert-input" type="number" value="17.499" step="0.001" id="fert_nh4no3_nh4"/> | |
| <input class="fert-input" type="number" value="17.499" step="0.001" id="fert_nh4no3_no3"/> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" step="0.001" id="ammonium_nitrate"/> | |
| </div> | |
| <div class="fert-row"> | |
| <span class="fert-name">MgSO4</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" value="10.22" step="0.001" id="fert_mgso4_mg"/> | |
| <input class="fert-input" type="number" value="13.483" step="0.001" id="fert_mgso4_s"/> | |
| <input class="fert-input" type="number" step="0.001" id="magnesium_sulfate"/> | |
| </div> | |
| <div class="fert-row"> | |
| <span class="fert-name">KH2PO4</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" value="22.761" step="0.001" id="fert_kh2po4_p"/> | |
| <input class="fert-input" type="number" value="28.731" step="0.001" id="fert_kh2po4_k"/> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" step="0.001" id="monopotassium_phosphate"/> | |
| </div> | |
| <div class="fert-row"> | |
| <span class="fert-name">K2SO4</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" value="44.874" step="0.001" id="fert_k2so4_k"/> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" value="18.401" step="0.001" id="fert_k2so4_s"/> | |
| <input class="fert-input" type="number" step="0.001" id="potassium_sulfate"/> | |
| </div> | |
| <!-- Добавленные строки для Fe и Micro --> | |
| <div class="fert-row"> | |
| <span class="fert-name">Fe</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" step="0.001" id="iron_amount"> | |
| </div> | |
| <div class="fert-row"> | |
| <span class="fert-name">Micro</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" step="0.001" id="micro_amount"> | |
| </div> | |
| </div> | |
| </fieldset> | |
| <fieldset class="calculation-box"> | |
| <legend>Расчёт удобрений</legend> | |
| <div class="calculation-container"> | |
| <div class="compensation-section"> | |
| <div class="enhancement-title">Усиление:</div> | |
| <div class="input-column"> | |
| <button id="calculate-btn">Рассчитать</button> | |
| <div class="input-group"> | |
| <label for="liters-input">Литры:</label> | |
| <input type="number" id="liters-input" value="100" min="1" step="1"> | |
| </div> | |
| <div class="input-group"> | |
| <label for="rounding-precision">Точность:</label> | |
| <input type="number" id="rounding-precision" value="3" min="0" max="3" step="1"> | |
| </div> | |
| </div> | |
| </div> | |
| </fieldset> | |
| <!-- Кастомные стили --> | |
| <style> | |
| .pnotify-success { | |
| background: linear-gradient(135deg, #4CAF50, #2E7D32) ; | |
| border-left: 5px solid #1B5E20 ; | |
| } | |
| .pnotify-error { | |
| background: linear-gradient(135deg, #F44336, #C62828) ; | |
| border-left: 5px solid #B71C1C ; | |
| } | |
| .deficit-item { | |
| margin: 8px 0; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .deficit-item i { | |
| margin-right: 10px; | |
| font-size: 1.2em; | |
| } | |
| </style> | |
| <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script> | |
| <script> | |
| let call_data; | |
| document.getElementById('calculate-btn').addEventListener('click', function() { | |
| console.log("=== НАЧАЛО ОБРАБОТКИ ==="); | |
| // 1. Получаем значение точности округления с подробным логированием | |
| const roundingInput = document.getElementById('rounding-precision'); | |
| console.log("Значение поля rounding-precision (raw):", roundingInput.value); | |
| const initialRounding = parseInt(roundingInput.value); | |
| console.log("Парсинг значения rounding (после parseInt):", initialRounding); | |
| const roundingPrecision = Math.min(Math.max(initialRounding || 3, 0), 6); | |
| console.log("Финальное значение точности (0-6):", roundingPrecision); | |
| // 2. Улучшенная функция для безопасного получения числового значения с логированием | |
| const getValue = (id) => { | |
| const element = document.getElementById(id); | |
| if (!element) { | |
| console.error(`Элемент с ID ${id} не найден!`); | |
| return 0; | |
| } | |
| console.log(`Значение поля ${id}:`, element.value); | |
| const value = parseFloat(element.value); | |
| const result = isNaN(value) ? 0 : value; | |
| console.log(`Парсинг значения ${id}:`, result); | |
| return result; | |
| }; | |
| // 3. Формируем данные для сервера с пошаговым логированием | |
| console.log("=== ФОРМИРОВАНИЕ ДАННЫХ ДЛЯ СЕРВЕРА ==="); | |
| const fertilizerConstants = { | |
| "Кальциевая селитра": { | |
| "N (NO3-)": getValue('fert_ca_no3') / 100, | |
| "Ca": getValue('fert_ca_ca') / 100 | |
| }, | |
| "Калий азотнокислый": { | |
| "N (NO3-)": getValue('fert_kno3_no3') / 100, | |
| "K": getValue('fert_kno3_k') / 100 | |
| }, | |
| "Аммоний азотнокислый": { | |
| "N (NO3-)": getValue('fert_nh4no3_no3') / 100, | |
| "N (NH4+)": getValue('fert_nh4no3_nh4') / 100 | |
| }, | |
| "Сульфат магния": { | |
| "Mg": getValue('fert_mgso4_mg') / 100, | |
| "S": getValue('fert_mgso4_s') / 100 | |
| }, | |
| "Монофосфат калия": { | |
| "P": getValue('fert_kh2po4_p') / 100, | |
| "K": getValue('fert_kh2po4_k') / 100 | |
| }, | |
| "Калий сернокислый": { | |
| "K": getValue('fert_k2so4_k') / 100, | |
| "S": getValue('fert_k2so4_s') / 100 | |
| } | |
| }; | |
| const profileSettings = { | |
| 'P': getValue('profile_p'), | |
| 'K': getValue('profile_k'), | |
| 'Mg': getValue('profile_mg'), | |
| 'Ca': getValue('profile_ca'), | |
| 'S': getValue('profile_s'), | |
| 'NO3_RAT': getValue('profile_no3'), | |
| 'TOTAL_NITROG': getValue('profile_n'), | |
| 'liters': parseInt(document.getElementById('liters-input').value) || 1, | |
| 'rounding_precision': roundingPrecision | |
| }; | |
| const requestData = { | |
| fertilizerConstants: fertilizerConstants, | |
| profileSettings: profileSettings | |
| }; | |
| console.log("=== ПОЛНЫЙ ОБЪЕКТ ДЛЯ ОТПРАВКИ ===", JSON.stringify(requestData, null, 2)); | |
| // 4. Проверка данных с подробным выводом | |
| console.log("=== ПРОВЕРКА ДАННЫХ ==="); | |
| const requiredFertilizers = ["Кальциевая селитра", "Калий азотнокислый", "Аммоний азотнокислый", | |
| "Сульфат магния", "Монофосфат калия", "Калий сернокислый"]; | |
| let hasErrors = false; | |
| for (const fert of requiredFertilizers) { | |
| if (!requestData.fertilizerConstants[fert]) { | |
| console.error(`ОШИБКА: Отсутствует удобрение: ${fert}`); | |
| hasErrors = true; | |
| } else { | |
| console.log(`Удобрение ${fert} присутствует`); | |
| } | |
| } | |
| const requiredProfileFields = ['P', 'K', 'Mg', 'Ca', 'S', 'NO3_RAT', 'TOTAL_NITROG']; | |
| for (const field of requiredProfileFields) { | |
| if (isNaN(requestData.profileSettings[field])) { | |
| console.error(`ОШИБКА: Некорректное значение для параметра ${field}`); | |
| hasErrors = true; | |
| } else { | |
| console.log(`Параметр ${field} в порядке:`, requestData.profileSettings[field]); | |
| } | |
| } | |
| console.log("Параметр rounding_precision:", requestData.profileSettings.rounding_precision); | |
| if (hasErrors) { | |
| const errorMsg = "Пожалуйста, проверьте введенные данные. Обнаружены ошибки в форме. Смотрите консоль для деталей."; | |
| console.error(errorMsg); | |
| alert(errorMsg); | |
| return; | |
| } | |
| // 5. Отправка данных на сервер с полным логированием | |
| console.log("=== ОТПРАВКА ДАННЫХ НА СЕРВЕР ==="); | |
| fetch('/calculation', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify(requestData) | |
| }) | |
| .then(response => { | |
| console.log("Получен ответ от сервера. Статус:", response.status); | |
| if (!response.ok) { | |
| console.error("ОШИБКА СЕРВЕРА. Полный ответ:", response); | |
| throw new Error(`HTTP error! status: ${response.status}`); | |
| } | |
| return response.json(); | |
| }) | |
| .then(data => { | |
| call_data = data; | |
| console.log("=== УСПЕШНЫЙ ОТВЕТ ОТ СЕРВЕРА ===", call_data); | |
| // Выводим данные в форму | |
| data_out(call_data); | |
| // Показываем статус расчёта | |
| showCalculationStatus(call_data); // <-- Вот эта строка запуска | |
| // Проверяем, применилась ли точность округления | |
| console.log("Проверка округления в ответе:"); | |
| if (data.fertilizers) { | |
| Object.entries(data.fertilizers).forEach(([name, values]) => { | |
| console.log(`Удобрение ${name}:`, values); | |
| }); | |
| } | |
| // Здесь можно добавить обработку ответа | |
| }) | |
| .catch(error => { | |
| console.error("=== ОШИБКА ПРИ ОБРАБОТКЕ ===", error); | |
| alert("Ошибка при расчете: " + error.message); | |
| }) | |
| .finally(() => { | |
| console.log("=== ЗАВЕРШЕНИЕ ОБРАБОТКИ ==="); | |
| }); | |
| }); | |
| function data_out(response) { | |
| console.log("Обработка ответа сервера:", response); | |
| // Соответствие названий удобрений и ID полей | |
| const fertilizerMap = { | |
| "Кальциевая селитра": "calcium_nitrate", | |
| "Калий азотнокислый": "potassium_nitrate", | |
| "Аммоний азотнокислый": "ammonium_nitrate", | |
| "Сульфат магния": "magnesium_sulfate", | |
| "Монофосфат калия": "monopotassium_phosphate", | |
| "Калий сернокислый": "potassium_sulfate" | |
| }; | |
| // Заполняем граммы для каждого удобрения | |
| for (const [fertName, fieldId] of Object.entries(fertilizerMap)) { | |
| const value = response.fertilizers[fertName]; | |
| if (value !== undefined) { | |
| const input = document.getElementById(fieldId); | |
| if (input) { | |
| input.value = typeof value === 'number' | |
| ? value.toFixed(3) | |
| : value.граммы?.toFixed(3) || '0.000'; | |
| console.log(`Установлено ${fertName}: ${input.value}`); | |
| } else { | |
| console.error(`Не найден элемент: ${fieldId}`); | |
| } | |
| } | |
| } | |
| // Обновляем EC если есть | |
| const ecInput = document.getElementById('profile_ec'); | |
| if (ecInput && response.total_ppm) { | |
| ecInput.value = (response.total_ppm / 700).toFixed(2); // Пример конвертации ppm в EC | |
| } | |
| console.log("Данные успешно обновлены"); | |
| } | |
| <!-- Вместо PNotify --> | |
| <link href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script> | |
| <script> | |
| // Инициализация | |
| const notyf = new Notyf({ | |
| duration: 5000, | |
| position: {x: 'right', y: 'top'}, | |
| types: [ | |
| {type: 'success', background: '#4CAF50'}, | |
| {type: 'error', background: '#F44336'} | |
| ] | |
| }); | |
| // Модифицированная функция | |
| function showCalculationStatus(response) { | |
| if (Object.keys(response.deficits || {}).length === 0) { | |
| notyf.success('Расчёт успешен! Все элементы сбалансированы'); | |
| } else { | |
| notyf.error('Дефициты: ' + | |
| Object.entries(response.deficits) | |
| .map(([el, val]) => `${el}: ${val.toFixed(2)} ppm`) | |
| .join(', ')); | |
| } | |
| } | |
| </script> | |
| </script> | |
| </body> | |
| </html> |