Размещение номенклатуры на схеме (HTML+JS)


Размещение номенклатуры на рисунке в поле HTML с использованием JS.

Стояла задача на плане этажей графически показать размещение сетевого оборудования. «И срочно!» Так как средствами 1С «рисовать» проблематично, было принято решение использовать поле HTML документа и JS скрипты. Возможно боян. До универсальности далековато. Где-то будут нелепости. Но результат достигнут! За критику буду благодарен, ибо, одна голова хорошо, а..)))

  1. Загружаем в графическом формате в базу план или схему кабинета, этажа, территории, красивую девушку и .т.д.
  2. Запускаем обработку «Номенклатура на схеме» и выбираем нужную нам схему, нажимаем «Сформировать».
  3. Добавляем номенклатуру в список (при этом в левом верхнем углу в поле HTML она же появится в виде жёлтого квадратика).
  4. Растаскиваем мышкой «Квадратики» по схеме в соответствии с размещением в реальности.
  5. Сохраняем результат (координаты «Квадратиков» хранятся в Регистре сведений «HTML»).

Небольшие удобства:

  • — При нажатии на «Квадратик» в списке номенклатуры активизируется элемент, соответствующий «Квадратику».
    — При нажатии на кнопку «Показать на схеме» в списке номенклатуры, нужный элемент на схеме на некоторое время окрашивается в красный цвет.
  • — При наведении на «Квадратик» отображается всплывающая подсказка с наименованием и кодом номенклатуры.

В обработке была использована информация с ресурса http://javascript.ru/ui/draganddrop, за что огромное спасибо автору!

15 Comments

  1. serega3333

    а на толстом клиенте с обычным интерфейсом покатит джава скрипт?

    Reply ↓
  2. MCitrus

    Скрипты должны и там работать. Единственно нужно будет переделать управляемую форму на обычную.

    Reply ↓
  3. Virikus

    А смена цвета возможна от реквизита в реальном времени?

    например кабинет — переговорная, занят (истина-красный, ложь-зеленый) и когда занят меняется другим пользователем, чтобы на форме цвет менялся у текущего пользователя?

    Reply ↓
  4. MCitrus

    (3) Virikus, Как вариант ПодключитьОбработчикОжидания с необходимым интервалом. Подключаемая процедура будет заново формировать поле HTML. А в нём, в зависимости от реквизита, можно присваивать BACKGROUND-COLOR элементу нужный цвет.

    Reply ↓
  5. vandalsvq

    А не искал пути как таки на само поле HTML перетаскивать? Понимаю события у 1С нет такого, и когда они сделают неизвестно. Но может каким другим способом. Хотя кажется наверное его нет.

    Reply ↓
  6. vandalsvq

    — повтор… удалил

    Reply ↓
  7. MCitrus

    (5) vandalsvq, была у меня и такая идея)) Но:

    Операции перетаскивания поддерживают следующие элементы управления:

    * табличное поле;

    * поле табличного документа;

    * поле календаря;

    * поле картинки.

    Поля HTML документа в этом списке нет.

    Возможно кто-то и реализовал подобное, но я не встречал.

    Reply ↓
  8. Yashazz

    Да, да, да. ))) Когда я баловался с html-полем, думалось даже о чём-то вроде PageMaker’a или ишшо какого хтмл-мастера… Полезная штука, уже хотя бы в плане изучения примеров работы.

    Reply ↓
  9. KroVladS

    (0)

    очень интересное решение надо будет по экспериментировать.

    Reply ↓
  10. ssn1978

    Хорошо, очень хорошо!!! Понравилась реализация, автор молодец!

    Reply ↓
  11. Artemuch2

    Добрый день коллеги! А наоборот если когда с браузера данные в 1С попадут. то есть хотелось бы что бы схема была полностью интерактивной.

    Reply ↓
  12. MCitrus

    (11) Artemuch2, не совсем понятно, что Вы хотите сказать.

    Reply ↓
  13. pavel_pss

    Интересное решение. Спасибо.

    Reply ↓
  14. bas_nsk

    Хорошая вещица. Вот бы еще реализовать в ней прорисовку многоугольников по заданным координатам вершин.

    Reply ↓
  15. webresurs

    (14) В продолжении еще:

    -(14)- добавить возможность рисовать объекты на карте, а не только кружечек в квадрате (Простой редактор плана помещения JavaScript)

    — добавить вывод остатков этих номенклатур по складу

    и получится палинограмма

    ждем, ждем 😉

    Reply ↓

Leave a Comment

Ваш адрес email не будет опубликован. Обязательные поля помечены *