Что, если мы создадим такой интерфейс в 1С, чтобы он был удобнее, чем в Excel? Да не просто удобнее — а чтобы сотрудники сказали: «Ого, это же как игра!» С вами снова Ведущий специалист модуля разработки 1С Михеев Антон. Давайте вместе сделаем эту игру идею реальностью
Представьте, что Excel — это склад, вид сверху. Синие ячейки — стеллажи, в них лежат товары. Да, на множестве складов топология нарисована именно в Excel. Сотрудникам так понятнее и удобнее: закрашивать ячейки в таблице куда проще, чем разбираться, как заполнять справочники с кучей непонятных цифр в 1С.
Задачка: на стеллаже три полки. На первой — конфеты, на второй — печеньки, на третьей — сиропы. Как пользователю понять, что нужно взять печеньку со второй полки?
Ответ: рисовать всю эту красоту в изометрии! Изометрия — это старая добрая технология, которая:
· не нагружает процессор (в отличие от 3D, где ваш ПК может начать мечтать о пенсии);
· позволяет рассмотреть предмет под углом в 30∘;
даёт возможность переключать углы обзора (ну, или хотя бы сделать четыре фиксированных вида — этого хватит).
Как это сделать в 1С?
Здесь нам поможет встроенный редактор HTML внутри 1С. Если вы не знали, то 1С использует платформу WebKit, позаимствованную у айфонов (лучшие мировые практики, да).
Шаг 1. Создаём внешнюю обработку и добавляем в неё ПолеHTML документа.
Шаг 2. Создаём три макета: HTML, JS и CSS.
· Макет HTML — это каркас страницы. Вставляем код:
html
<!DOCTYPE html>
<HTML>
<HEAD>@CSS</HEAD>
<BODY>
<h1>Изометрическая сетка 10 × 10 с перетаскиваемыми объектами</h1>
<div id='grid-container'></div>
@JS
</BODY>
</HTML>
· Макет JS — это логика. Здесь мы:
o создаём сетку из ячеек;
o расставляем объекты (конфеты, печеньки, сиропы);
o добавляем возможность перетаскивать их мышкой (drag & drop);
o подсвечиваем ячейки при наведении;
o проверяем, занята ли ячейка, прежде чем положить туда новый объект.
Добавим кода в макет:
window.onload = function() {const gridContainer = document.getElementById('grid-container');
const occupiedCells = new Set(); // Хранит занятые ячейки
// Массив контейнеров с параметрами
const containers = [@Containers];
// Создаём ячейки сетки
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.style.left =
${j * 90}px;cell.style.top =
${i * 50}px;cell.dataset.row = i;
cell.dataset.col = j;
// Добавляем параметры x и y в качестве атрибутов ячейки
cell.setAttribute('data-x', i);
cell.setAttribute('data-y', j);
gridContainer.appendChild(cell);
}
}
// Расставляем объекты из массива контейнеров
containers.forEach(container => {
const item = document.createElement('div');
item.className = 'draggable-item';
item.textContent = container.text;
item.draggable = true;
item.style.backgroundColor = container.color;
item.style.zIndex = parseInt(container.x / container.y * 100,10);
const Top = document.createElement('div');
Top.className = 'top';
Top.textContent = container.text;
Top.style.backgroundColor = container.color;
const Front = document.createElement('div');
Front.className = 'front';
Front.style.backgroundColor = container.color;
const Right = document.createElement('div');
Right.className = 'right';
Right.textContent = container.text;
Right.style.backgroundColor = container.color;
item.appendChild(Top);
item.appendChild(Front);
item.appendChild(Right);
// Добавляем все параметры в качестве атрибутов draggable-item
item.setAttribute('data-color', container.color);
item.setAttribute('data-text', container.text);
item.setAttribute('data-x', container.x);
item.setAttribute('data-y', container.y);
item.setAttribute('data-z', container.z);
// Помещаем объект в ячейку согласно координатам x и y
const targetCell = document.querySelector(
.cell[data-row="${container.x}"][data-col="${container.y}"]);if (targetCell) {
targetCell.appendChild(item);
// Помечаем ячейку как занятую
occupiedCells.add(
${container.x},${container.y});}
});
let draggedItem = null;
let originalCell = null;
// Обработчик начала перетаскивания
function handleDragStart(e) {
draggedItem = this;
originalCell = this.parentElement;
e.dataTransfer.setData('text/plain', null);
// Невидимость Ghost при перетаскивании
var img = document.createElement("img");
img.src = "";
e.dataTransfer.setDragImage(img, 0, 0);
}
// Обработчик окончания перетаскивания
document.addEventListener('dragend', () => {
if (draggedItem) {
draggedItem = null;
originalCell = null;
}
});
// Обработчики для всех ячеек сетки
document.querySelectorAll('.cell').forEach(cell => {
// Обработчик наведения — выделение фона и границы
cell.addEventListener('mouseenter', () => {
cell.style.backgroundColor = 'rgba(135, 206, 235, 0.3)'; // Полупрозрачный голубой
cell.style.borderColor = 'blue';
cell.style.zIndex = '10'; // Выводим поверх других элементов
cell.style.boxShadow = '0 0 8px rgba(0, 123, 255, 0.5)'; // Дополнительная подсветка
});
cell.addEventListener('mouseleave', () => {
// Восстанавливаем исходный вид
cell.style.backgroundColor = '';
cell.style.borderColor = '#999';
cell.style.zIndex = '';
cell.style.boxShadow = '';
});
cell.addEventListener('dragover', (e) => e.preventDefault());
cell.addEventListener('drop', (e) => {
e.preventDefault();
if (!draggedItem) return;
const row = cell.dataset.row;
const col = cell.dataset.col;
const cellKey =
${row},${col};// Проверяем, занята ли ячейка
if (occupiedCells.has(cellKey)) {
alert('Ячейка уже занята! Выберите другую.');
return;
}
// Освобождаем предыдущую ячейку
if (originalCell) {
const origRow = originalCell.dataset.row;
const origCol = originalCell.dataset.col;
occupiedCells.delete(
${origRow},${origCol});}
// Обновляем атрибуты draggable-item с новыми координатами
draggedItem.setAttribute('data-x', row);
draggedItem.setAttribute('data-y', col);
// Помещаем объект в новую ячейку — он автоматически занимает всю площадь ячейки
cell.appendChild(draggedItem);
occupiedCells.add(cellKey);
});
});
// Инициализируем обработчики перетаскивания для всех объектов на поле
document.querySelectorAll('.draggable-item').forEach(item => {
item.addEventListener('dragstart', handleDragStart);
});
document.querySelectorAll('.draggable-item').forEach(item => {
item.addEventListener('mouseenter', () => {
document.querySelectorAll('.draggable-item').forEach(otherItem => {
if (otherItem !== item) {
otherItem.classList.add('dimmed');
}
});
});
item.addEventListener('mouseleave', () => {
document.querySelectorAll('.draggable-item').forEach(otherItem => {
otherItem.classList.remove('dimmed');
});
});
});
// Запрещаем контекстное меню по правой кнопке мыши
document.addEventListener('contextmenu', e => e.preventDefault());
}
·
Макет CSS — это стиль. Здесь мы задаём цвета, размеры, тени, углы поворота и прочие красоты. Изометрия достигается через transform: rotate(-30deg) skewX(30deg) — магия, а не код!
Код на сервере: магия данных
В обработчике ПриСозданииНаСервере пишем код, который:
1. Берёт макеты HTML, JS и CSS.
2. Подставляет CSS и JS в HTML (через @CSS и @JS).
3. Делает запрос к регистру накопления, чтобы получить координаты ячеек и информацию о контейнерах.
4. Формирует массив контейнеров с параметрами (цвет, текст, координаты).
5. Подставляет этот массив в HTML (вместо @Containers).
Добавим код ПриСозданииНаСервере:
bsl
ОбъектВнешнейОбработки = РеквизитФормыВЗначение("Объект");
HTML = ОбъектВнешнейОбработки.ПолучитьМакет("МакетHTML").ПолучитьТекст();
JS = "<script>" + ОбъектВнешнейОбработки.ПолучитьМакет("МакетJS").ПолучитьТекст() + "</script>";
CSS = "<style>" + ОбъектВнешнейОбработки.ПолучитьМакет("МакетCSS").ПолучитьТекст() + "</style>";
HTML = СтрЗаменить(HTML,"@CSS",CSS);
HTML = СтрЗаменить(HTML,"@JS",JS);
//Тут пишем запрос который получит Координаты ячейки и Контейнер в ней
Запрос = Новый Запрос;
Запрос.Текст =
"ВЫБРАТЬ РАЗЛИЧНЫЕ
| укЗаполненностьЯчеекОстатки.Ячейка.Ряд КАК X,
| укЗаполненностьЯчеекОстатки.Ячейка.Ярус КАК Z,
| укЗаполненностьЯчеекОстатки.Ячейка.Позиция КАК Y
|ИЗ
| РегистрНакопления.укЗаполненностьЯчеек.Остатки КАК укЗаполненностьЯчеекОстатки
|ГДЕ
| укЗаполненностьЯчеекОстатки.Ячейка.Ряд < 10
| И укЗаполненностьЯчеекОстатки.Ячейка.Ярус = 1
| И укЗаполненностьЯчеекОстатки.Ячейка.Позиция < 10
|
|УПОРЯДОЧИТЬ ПО
| X Возр,
| Y ВОЗР";
РезультатЗапроса = Запрос.Выполнить();
Выборка = РезультатЗапроса.Выбрать();
Результат = "";
Пока Выборка.Следующий() Цикл
ТекСтрока = СтрШаблон("{ color: '#00008b', text: '%1', x: %2, y: %3, z: %4 },", "К-"+ Выборка.X + "-" + Выборка.Y , Выборка.X, Выборка.Y, Выборка.Z);
Результат = Результат + ТекСтрока;
КонецЦикла;
Результат = Лев(Результат, СтрДлина(Результат) - 1);
HTML = СтрЗаменить(HTML,"@Containers", Результат);
«Запрос в 1С — это как заклинание: если произнести правильно, получишь желаемое. Если нет — получишь ошибку и желание всё бросить».
Что в итоге?
На выходе получается склад с изометрией! Ого, скажете вы, и будете правы. Это реально работает внутри 1С и не тормозит (в отличие от 3D, которое может заставить ваш компьютер задуматься о смысле жизни).
Что можно добавить:
· Подсветку ячеек: красным — «Возьми отсюда», зелёным — «Поставь сюда».
· Динамическую подгрузку задач на перемещение.
· Отображение остатков прямо на контейнерах.
· Уведомления: «Внимание! На полке с печеньками осталось 2 штуки!».
Получается уже не просто 1С, а почти игра!
Почему не 3D?
Вы спросите: «А почему не использовать 3D?» Ответ прост:
· 1С не сможет быстро выполнять качественный рендеринг моделей — всё будет тормозить.
· Оптимизация 3D‑движка в 1С не даёт качественной детализации.
· Возможность крутить камеру только сбивает пользователя.
«3D в 1С — это как попытка запустить Cyberpunk 2077 на калькуляторе: идея крутая, но результат печальный».
Финальный аккорд
Зафиксируем угол для изометрии и прорисуем все объекты лишь под одним углом (максимум 4 картинки на объект). И вот он — весь склад перед вами, с хорошей детализацией, без тормозов и без необходимости изучать квантовую физику.
Как вам идейка? Удобно ли будет пользоваться детализированной интерактиивной топологией склада? 😉