Разработка калькулятора материалов (строительство, ремонт) на сайте

Разработка калькулятора материалов (строительство, ремонт) на сайте

Калькулятор строительных материалов — это прикладная геометрия плюс база нормативов расхода. Пользователь вводит размеры помещения или конструкции, калькулятор считает количество материала с запасом, стоимость и список к покупке.

Типичные расчётные задачи

• Обои — площадь стен за вычетом дверей и окон, количество полос по высоте и ширине рулона, подгонка рисунка
• Кафель — площадь покрытия, количество плиток с учётом подрезки и боя, расход клея и затирки
• Штукатурка / шпаклёвка — площадь поверхности × толщина слоя × плотность
• Кирпич / блоки — объём кладки ÷ объём единицы + раствор
• Ламинат / паркет — площадь пола + запас 10–15% на подрезку, направление укладки влияет на расход
• Краска — площадь × количество слоёв ÷ расход на м² (из характеристик конкретной краски)

Расчёт обоев

function calcWallpaper(params) {
  const {
    roomLength,    // м
    roomWidth,     // м
    ceilingHeight, // м
    rollWidth,     // м, обычно 0.53 или 1.06
    rollLength,    // м, обычно 10 или 15
    patternRepeat, // м, 0 если без рисунка
    doors,         // массив { width, height }
    windows,       // массив { width, height }
  } = params;

  // Периметр стен
  const perimeter = 2 * (roomLength + roomWidth);

  // Вычитаем проёмы (только если > 0.5 м²)
  const openingsArea = [
    ...doors.map(d => d.width * d.height),
    ...windows.map(w => w.width * w.height),
  ]
    .filter(a => a > 0.5)
    .reduce((s, a) => s + a, 0);

  // Полосы с учётом рисунка
  const effectiveHeight = patternRepeat > 0
    ? Math.ceil(ceilingHeight / patternRepeat) * patternRepeat
    : ceilingHeight;

  const stripsPerRoll = Math.floor(rollLength / effectiveHeight);
  const totalStrips = Math.ceil(perimeter / rollWidth);

  // Корректируем на проёмы: убираем полосы, полностью попадающие в проём
  const savedStrips = Math.floor(openingsArea / (rollWidth * ceilingHeight));

  const netStrips = Math.max(0, totalStrips - savedStrips);
  const rolls = Math.ceil(netStrips / stripsPerRoll);

  return {
    rolls,
    totalStrips: netStrips,
    wallArea: perimeter * ceilingHeight - openingsArea,
  };
}

Расчёт плитки

function calcTiles(params) {
  const {
    areaM2,        // площадь в м²
    tileWidth,     // мм
    tileHeight,    // мм
    groutWidth,    // мм, ширина шва
    wastePercent,  // % запаса (5–15%)
  } = params;

  const tileW = (tileWidth + groutWidth) / 1000; // в метры
  const tileH = (tileHeight + groutWidth) / 1000;
  const tileArea = tileW * tileH;

  const tilesNet = areaM2 / tileArea;
  const tilesWithWaste = Math.ceil(tilesNet * (1 + wastePercent / 100));

  // Расход клея: ~4–6 кг/м² при толщине нанесения 6 мм
  const adhesiveKg = Math.ceil(areaM2 * 5); // средний расход

  // Расход затирки: зависит от размера плитки и ширины шва
  const groutKg = Math.ceil(areaM2 * (groutWidth / tileWidth) * 0.7 * 2);

  return {
    tiles: tilesWithWaste,
    tilesNet: Math.ceil(tilesNet),
    adhesiveKg,
    groutKg,
  };
}

Многокомнатный калькулятор

Для ремонта целой квартиры нужен список помещений с отдельными параметрами:

function MultiRoomCalculator() {
  const [rooms, setRooms] = useState([
    { id: 1, name: 'Гостиная', length: 5, width: 4, height: 2.7 },
  ]);

  const addRoom = () => setRooms(prev => [
    ...prev,
    { id: Date.now(), name: `Комната ${prev.length + 1}`, length: 3, width: 3, height: 2.7 },
  ]);

  const totalArea = rooms.reduce((s, r) => s + r.length * r.width, 0);

  return (
    <div>
      {rooms.map(room => (
        <RoomForm
          key={room.id}
          room={room}
          onChange={(updated) =>
            setRooms(prev => prev.map(r => r.id === room.id ? updated : r))
          }
          onRemove={() =>
            setRooms(prev => prev.filter(r => r.id !== room.id))
          }
        />
      ))}
      <button onClick={addRoom}>+ Добавить помещение</button>
      <div className="total">Общая площадь: {totalArea.toFixed(1)} м²</div>
      <MaterialsSummary rooms={rooms} />
    </div>
  );
}

Список материалов к покупке

function MaterialsSummary({ rooms, selectedMaterial }) {
  const totals = rooms.reduce((acc, room) => {
    const result = calcMaterial(selectedMaterial, room);
    for (const [key, val] of Object.entries(result)) {
      acc[key] = (acc[key] || 0) + val;
    }
    return acc;
  }, {});

  return (
    <table className="materials-list">
      <thead>
        <tr><th>Материал</th><th>Количество</th><th>Единица</th></tr>
      </thead>
      <tbody>
        {Object.entries(totals).map(([key, val]) => (
          <tr key={key}>
            <td>{materialLabels[key]}</td>
            <td>{val}</td>
            <td>{materialUnits[key]}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Интеграция с каталогом товаров

Мощный вариант — калькулятор связан с каталогом магазина. Рассчитал количество → видишь конкретные SKU с ценами → добавляешь в корзину:

async function fetchProducts(materialType, quantity) {
  const res = await fetch(`/api/products?category=${materialType}&min_pack_size=${quantity}`);
  return res.json();
}

Экспорт сметы

Пользователь хочет распечатать список покупок или отправить прорабу:

function exportToPDF(materials, rooms) {
  // Используем jsPDF + autoTable
  import('jspdf').then(({ jsPDF }) => {
    import('jspdf-autotable').then(() => {
      const doc = new jsPDF();
      doc.setFont('helvetica'); // или подключить кириллический шрифт
      doc.text('Смета на материалы', 14, 20);
      doc.autoTable({
        head: [['Материал', 'Кол-во', 'Ед.']],
        body: materials.map(m => [m.name, m.qty, m.unit]),
        startY: 30,
      });
      doc.save('smeta.pdf');
    });
  });
}

Для кириллицы в jsPDF нужно подключать TTF-шрифт через doc.addFileToVFS + doc.addFont.

Сроки

Калькулятор одного типа материала (обои или плитка) с основными параметрами — 2–3 рабочих дня. Многокомнатный калькулятор с несколькими типами материалов, списком к покупке, интеграцией каталога и экспортом PDF — 7–10 дней.