What is the best way to implement the display of the workplace layout in the office in the vue.js 1C bundle?

Question

1C

Colleagues, such a task: to implement the display of the layout of workplaces in the office in a bundle of vue.js and 1C. It is necessary that it is clear which of the employees is in which place (the interactive must be present) and it is desirable that the room layouts and seating arrangements can be uploaded and edited in 1C and, accordingly, all this can be received from the back to the front.
My idea of ​​implementation: the layout of the premises in svg (hard-coded on the front for each room), from the back you can get a maximum list of employees with their binding to places.
Does anyone have any ideas how to implement all this in full, with getting all the data from 1C? And is it even possible?

Answer 1

1. Make a picture of the office on top
2. On the right, create a cash register of symbols (computer, table, etc.)
3. Handler for move, handler for click, and right click, there is a menu
4. Save the elements in the following list
5. This list save in 1s in attributes, next to inventory number
6. Optionally, you can add filters
Added.
https://www.html5rocks.com/en/tutorials/dnd/basics/
Take it as a base, add dragndrop support, load and save.
https://jsfiddle.net/vkorotenko/902cdmLv/
items: [
{id: '1', name: 'test', roomid: 2, x: 200, y: 200, angle: 90, zindex: 400, itemtype: 3},
{id: '2', name: 'test', roomid: 2, x: 210, y: 200, angle: 90, zindex: 400, itemtype: 3},
{id: '3', name: 'test' , roomid: 2, x: 220, y: 200, angle: 90, zindex: 400, itemtype: 3},
]

Answer 2

https://infostart.ru/public/186183/ - Placing items on the scheme (HTML + JS)
https://infostart.ru/public/563198/ - Simple JavaScript room plan editor