Spaces:
Sleeping
Sleeping
<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; | |
} | |
fieldset { | |
border: 2px solid #2e8b57; | |
background-color: #eaffea; | |
padding: 1em; | |
margin-bottom: 20px; | |
border-radius: 8px; | |
} | |
h1 { | |
background-color: #2e8b57; | |
color: white; | |
text-align: center; | |
padding: 1em; | |
border-radius: 10px; | |
margin-bottom: 20px; | |
} | |
legend { | |
font-weight: bold; | |
color: #2e8b57; | |
padding: 0 10px; | |
} | |
input[type=number] { | |
width: 80px; | |
padding: 3px; | |
border: 1px solid #ccc; | |
border-radius: 4px; | |
} | |
/* Общие стили для обоих блоков */ | |
.main-container { | |
display: grid; | |
grid-template-columns: 120px repeat(8, 90px); | |
gap: 10px; | |
padding: 10px; | |
} | |
/* Верхний блок - макропрофиль */ | |
.profile-container { | |
display: contents; | |
} | |
.profile-element { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
} | |
.profile-label { | |
font-weight: bold; | |
margin-bottom: 5px; | |
} | |
/* Азотные элементы */ | |
.nitrogen-container { | |
grid-column: 1 / -1; | |
display: flex; | |
gap: 20px; | |
padding-left: 120px; | |
margin-top: 10px; | |
} | |
.nitrogen-group { | |
display: flex; | |
align-items: center; | |
gap: 5px; | |
} | |
/* Нижний блок - составы солей (переделан в горизонтальный) */ | |
.fertilisers-container { | |
display: flex; | |
flex-direction: column; | |
} | |
.fert-row { | |
display: flex; | |
align-items: center; | |
margin-bottom: 10px; | |
} | |
.fert-header { | |
font-weight: bold; | |
text-align: center; | |
min-width: 90px; | |
padding: 5px; | |
} | |
.fert-name { | |
font-weight: bold; | |
min-width: 120px; | |
text-align: left; | |
padding-right: 10px; | |
} | |
.fert-cell { | |
text-align: center; | |
min-width: 90px; | |
padding: 5px; | |
} | |
.fert-input { | |
width: 80px; | |
margin: 0 5px; | |
} | |
/* Стиль для новой рамки с кнопкой */ | |
/* Стиль для блока расчёта */ | |
.calculation-box { | |
border: 2px solid #2e8b57; | |
background-color: #eaffea; | |
padding: 1em; | |
margin-bottom: 20px; | |
border-radius: 8px; | |
} | |
.calculation-box legend { | |
font-weight: bold; | |
color: #2e8b57; | |
padding: 0 10px; | |
} | |
.calculation-container { | |
display: flex; | |
align-items: center; | |
gap: 10px; | |
} | |
.calculation-label { | |
font-weight: bold; | |
margin-right: 5px; | |
} | |
#liters-input { | |
width: 80px; | |
padding: 3px; | |
border: 1px solid #ccc; | |
border-radius: 4px; | |
} | |
#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; | |
} | |
#calculate-btn:hover { | |
background-color: #3cb371; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Калькулятор удобрений</h1> | |
<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_p" 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_k" 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_ca" 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_mg" 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_s" 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_cl" 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; border: 1px solid #ccc; color: #666;"> | |
</div> | |
<div class="nitrogen-group"> | |
<label for="profile_no3">NO3:</label> | |
<input id="profile_no3" type="number" value="10.0" step="0.01" min="5" max="10.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> | |
</div> | |
</fieldset> | |
<fieldset class="calculation-box"> | |
<legend>Расчёт удобрений</legend> | |
<div class="calculation-container"> | |
<div class="calculation-label">Литры:</div> | |
<input type="number" id="liters-input" value="100" min="1" step="1"> | |
<button id="calculate-btn">Рассчитать</button> | |
</div> | |
</fieldset> | |
<script> | |
@app.route('/calculation', methods=['POST']) | |
def handle_calculation(): | |
try: | |
global NO3_RATIO, NH4_RATIO, TOTAL_NITROGEN, VOLUME_LITERS | |
# 1. Получаем данные | |
data = request.get_json() | |
if not data: | |
return jsonify({"error": "No JSON data"}), 400 | |
# 2. Обновляем глобальные переменные из запроса | |
if 'ratios' in data: | |
NO3_RATIO = float(data['ratios'].get('NO3_RATIO', 8.25)) | |
NH4_RATIO = float(data['ratios'].get('NH4_RATIO', 1.00)) | |
if 'total_nitrogen' in data: | |
TOTAL_NITROGEN = float(data['total_nitrogen']) | |
if 'volume' in data: | |
VOLUME_LITERS = float(data['volume']) | |
# 3. Создаем калькулятор с текущими значениями | |
calculator = NutrientCalculator(volume_liters=VOLUME_LITERS) | |
# 4. Расчет | |
calculator.calculate() | |
# 5. Возвращаем результаты | |
return jsonify({ | |
"fertilizers": calculator._format_fertilizers(), | |
"profile": calculator._format_profile(), | |
"ec": calculator.calculate_ec(), | |
"deficits": calculator.calculate_deficits(), | |
"used_ratios": { | |
"NO3_RATIO": NO3_RATIO, | |
"NH4_RATIO": NH4_RATIO | |
} | |
}) | |
except Exception as e: | |
return jsonify({ | |
"error": "Internal server error", | |
"details": str(e) | |
}), 500 | |
</script> | |
</body> | |
</html> |