Какие есть JS библиотеки для отображения рассадки сотрудников в офисе и расположения оборудования (схема, план итд)?

Ссылка скопирована
1 ответ

Есть красивые и интересные библиотеки для отображения оргструктуры. (Какие есть хорошие JS библиотеки для отображения оргструктуры? )
Хочу найти такие же наработки но чтобы визуализировать расположение сотрудников в офисе, и какое оборудование стоит в каких кабинетах/офисах

Ps: Цель как облегчить жизнь администратора, который будет по номеру телефона что есть на рабочем местье, железо, по, ip итд. Так и рядовые сотрудники? смогут видеть где сидит нужный, человек его номер, должность итд

(картинка условная, достаточно цветных блоков как в оргструктуре)

Какие есть JS библиотеки для отображения рассадки сотрудников в офисе и расположения оборудования (схема, план итд)?

Дополнительно:

Хочу такую же, только с высовывающимися в окна веслами!.. ;)

  • Adamos, в чём шутка?
  • zu_zu_zu, галера)
  • А если выгрузить план в svg, рабочие места обозначить через id. Тогда программно сможете получить доступ к ним, а также узнать позицию.
  • Александр,
    Склоняюсь к:
    https://x6.antv.vision/en/examples/node/group#coll...

    но придётся всё делать самому, хотелось бы чего-то как базис иметь

    Какие есть JS библиотеки для отображения рассадки сотрудников в офисе и расположения оборудования (схема, план итд)?

    Описанный вами вариант, частное решение, как система работать не очень, нужно будет рисовать не в инструменте

  • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Максим Павлов Ответ

    Для отображения рассадки сотрудников в офисе и расположения оборудования существует несколько 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);

    // Пример использования 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;

    // Пример использования 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");

    // Пример использования 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");

    ```

    Каждая из указанных библиотек имеет свои особенности и возможности, поэтому выбор конкретной зависит от требований вашего проекта. Надеюсь, что эти примеры помогут вам в создании схемы офиса и распределения оборудования.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

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

    Вам также может быть интересно