[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68f0fb878cfc8191adc308f2140bbdb5","versionInt","title","Односкатная Крыша — Интерактивный Расчёт (веб‑страница)","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid, Legend } from \"recharts\";\nimport { motion } from \"framer-motion\";\n\nexport default function RoofInteractive() {\n // === Default inputs (Belarus baseline) ===\n const [L, setL] = useState(4.0); // span (m)\n const [spacing, setSpacing] = useState(0.6);// m\n const [b, setB] = useState(0.1); // beam width (m)\n const [h, setH] = useState(0.2); // beam height (m)\n const [deckDead, setDeckDead] = useState(0.30); // kN/m^2 (boards 32mm + OSB)\n const [rho, setRho] = useState(500); // kg/m^3 (timber density)\n const [Sk, setSk] = useState(1.6); // kPa (ground snow)\n const [mu, setMu] = useState(1.0); // shape coeff for ~5°\n const [E, setE] = useState(10); // GPa (modulus of elasticity)\n const [slope, setSlope] = useState(5); // degrees\n const [houseA, setHouseA] = useState(8); // m short side (slope direction)\n const [houseB, setHouseB] = useState(10); // m long side\n const g = 9.81; // m/s^2\n\n // === Derived values ===\n const A = b * h; // m^2\n const I = (b * Math.pow(h, 3)) / 12; // m^4\n const W = (b * Math.pow(h, 2)) / 6; // m^3\n\n const wBeam = (rho * g * A) / 1000; // kN/m\n const qArea = deckDead + Sk * mu; // kN/m^2\n const wArea = qArea * spacing; // kN/m\n const w = wBeam + wArea; // kN/m (total)\n\n const M = (w * Math.pow(L, 2)) / 8; // kN*m\n const V = (w * L) / 2; // kN\n\n // stresses (MPa)\n const sigma = (M / W) * 0.001; // MPa (see unit note in code)\n const tau = (V / A) * 0.0015; // MPa (rect. section, Tmax ~ 1.5*V/A)\n\n // deflection (mm): δ = 5 w L^4 /(384 E I)\n const delta_m = (5 * (w * 1000) * Math.pow(L, 4)) / (384 * (E * 1e9) * I); // meters\n const delta_mm = delta_m * 1000;\n const L300 = (L * 1000) / 300; // mm\n\n // === Charts data ===\n const chartData = useMemo(() => {\n const rows = [];\n for (let span = 2.0; span <= 6.0; span += 0.2) {\n const Mx = (w * Math.pow(span, 2)) / 8;\n const sigx = (Mx / W) * 0.001;\n const deltam = (5 * (w * 1000) * Math.pow(span, 4)) / (384 * (E * 1e9) * I);\n rows.push({\n span: +span.toFixed(2),\n sigma: +sigx.toFixed(2),\n defl: +(deltam * 1000).toFixed(1),\n });\n }\n return rows;\n }, [w, W, E, I]);\n\n const resetDefaults = () => {\n setL(4.0); setSpacing(0.6); setB(0.1); setH(0.2); setDeckDead(0.30);\n setRho(500); setSk(1.6); setMu(1.0); setE(10); setSlope(5); setHouseA(8); setHouseB(10);\n };\n\n return (\n

Односкатная крыша — интерактивный расчёт

\n \n \n

\n\n

\n {/* Inputs */}\n

Исходные данные

\n \n \n \n \n \n

\n \n \n \n \n

\n \n \n \n

\n\n {/* Summary cards */}\n

\n \n \n \n \n

\n\n {/* Charts */}\n

Прогиб vs Пролёт

\n \n \n \n \n \n \n \n \n \n \n

Напряжение vs Пролёт

\n \n \n \n \n \n \n \n \n \n \n

\n\n {/* Schematic */}\n

Схема с размерами

Наглядная схема пролёта и сечения (масштаб условный).

\n \n

\n\n {/* Notes */}\n

Примечания

Формулы: M = wL²/8, V = wL/2, δ = 5wL⁴/(384EI) для равномерной нагрузки и шарнирных опор.
Снег: линейная нагрузка на балку = (Sₖ·μ + g_{настила}) · шаг.
Напряжение: σ ≈ M/W; сдвиг для прямоугольника τ_max ≈ 1.5V/A.
Проверка прогиба по предельному L/300 ориентировочна; требования могут отличаться по нормам/назначению.

\n );\n}\n\n// === UI subcomponents ===\nfunction Card({ title, value, hint, ok = true }) {\n return (\n \n

{title}

{value}

{hint}

\n {ok ? 'OK' : 'Проверьте параметры'}\n

\n \n );\n}\n\nfunction Field({ label, value, onChange, min, max, step }) {\n return (\n

\n {label}\n onChange(parseFloat(e.target.value))}\n className=\"w-28 rounded-lg border px-2 py-1 text-right text-sm\"\n step={step}\n min={min}\n max={max}\n />\n

\n onChange(parseFloat(e.target.value))}\n className=\"mt-2 w-full\"\n />\n

\n );\n}\n\nfunction Small({ label, value, onChange, min, max, step }) {\n return (\n

\n {label}\n onChange(parseFloat(e.target.value))}\n className=\"mt-1 w-full rounded-lg border px-2 py-1 text-right text-sm\"\n step={step}\n min={min}\n max={max}\n />\n

\n );\n}\n\n// === SVG schematics ===\nfunction BeamSpanSVG({ L, spacing }) {\n const w = 520, h = 140; // canvas size\n const left = 40, right = w - 40, midY = 60;\n const scale = (right - left) / Math.max(2, Math.min(6, L)); // scale 2..6 m into canvas\n const spanPx = (L * scale);\n\n return (\n \n );\n}\n\nfunction BeamSectionSVG({ b, h }) {\n const W = 260, H = 140;\n const scale = 220 / Math.max(h, b*2);\n const bw = b * scale * 2; // exaggerate width to be readable\n const bh = h * scale;\n const x0 = (W - bw)/2, y0 = (H - bh)/2;\n\n return (\n \n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","4174024984119296012","traceTime",1780006122609]