Какие есть JS библиотеки для отображения рассадки сотрудников в офисе и расположения оборудования (схема, план итд)?
Есть красивые и интересные библиотеки для отображения оргструктуры. (Какие есть хорошие JS библиотеки для отображения оргструктуры? )
Хочу найти такие же наработки но чтобы визуализировать расположение сотрудников в офисе, и какое оборудование стоит в каких кабинетах/офисах
Ps: Цель как облегчить жизнь администратора, который будет по номеру телефона что есть на рабочем местье, железо, по, ip итд. Так и рядовые сотрудники? смогут видеть где сидит нужный, человек его номер, должность итд
(картинка условная, достаточно цветных блоков как в оргструктуре)
Дополнительно:
Хочу такую же, только с высовывающимися в окна веслами!.. ;)
Склоняюсь к:
https://x6.antv.vision/en/examples/node/group#coll...
но придётся всё делать самому, хотелось бы чего-то как базис иметь
Описанный вами вариант, частное решение, как система работать не очень, нужно будет рисовать не в инструменте
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос


Для отображения рассадки сотрудников в офисе и расположения оборудования существует несколько JS библиотек, которые могут быть полезными в данной задаче. Ниже приведены некоторые из них:
1. **JointJS**: Это библиотека для создания интерактивных диаграмм и схем. Она имеет мощные возможности для создания различных видов планов офисов и распределения оборудования.
```php
// Пример использования JointJS для создания схемы офиса var graph = new joint.dia.Graph; var paper = new joint.dia.Paper({ el: $('#myPaper'), width: 800, height: 600, model: graph, gridSize: 10 }); var rect = new joint.shapes.basic.Rect({ position: { x: 100, y: 30 }, size: { width: 100, height: 30 }, attrs: { rect: { fill: 'blue' }, text: { text: 'Сотрудник 1' } } }); graph.addCell(rect);
```
2. **GoJS**: Это библиотека для создания сложных диаграмм и схем. Она предоставляет широкий набор инструментов для создания интерактивных планов офисов и распределения оборудования.
```php
// Пример использования GoJS для создания плана офиса var $ = go.GraphObject.make; var myDiagram = $(go.Diagram, "myDiagramDiv", { initialContentAlignment: go.Spot.Center, "undoManager.isEnabled": true }); var nodeTemplate = $(go.Node, "Auto", new go.Binding("location", "loc", go.Point.parse), $(go.Shape, "RoundedRectangle", { fill: "blue" }, new go.Binding("fill", "color")), $(go.TextBlock, { margin: 5 }, new go.Binding("text", "name")) ); myDiagram.nodeTemplate = nodeTemplate;
```
3. **D3.js**: Хотя D3.js в первую очередь используется для создания интерактивных визуализаций данных, его также можно использовать для создания схем и планов офисов с помощью SVG.
```php
// Пример использования D3.js для создания плана офиса var svg = d3.select("body").append("svg") .attr("width", 800) .attr("height", 600); var rect = svg.append("rect") .attr("x", 100) .attr("y", 30) .attr("width", 100) .attr("height", 30) .style("fill", "blue"); svg.append("text") .attr("x", 110) .attr("y", 50) .text("Сотрудник 1");
```
Каждая из указанных библиотек имеет свои особенности и возможности, поэтому выбор конкретной зависит от требований вашего проекта. Надеюсь, что эти примеры помогут вам в создании схемы офиса и распределения оборудования.