设备组件（共{{ otherDevices.length }}台）
环境组件
大屏标题：
保存
vue中使用html5的drag实现任意位置拖动
最近做的一个项目，需要拖动配置，网上找了一圈 没找到合适的轮子，没办法自己写吧，代码中有能优化的地方，没时间优化了（其实就是懒得），希望能帮到需要的人。
效果图如下：
- 可以充设备组件拖动到右侧容器中，设备组件栏中对应删除拖出去的数据，右侧容器则添加对应数据，反之亦然（从右侧拖动设备组件放回左侧设备组件栏时也是删除右侧拖出数据，设备栏添加相关数据）
- 环境组件栏：拖动组件到右侧容器，组件栏数据保持原样，右侧容器添加对应拖动数据。从右侧容器拖动环境组件放回组件栏，容器删除对应数据，环境组件栏保持原样
- 右侧容器中的任何组件都可以随意拖动位置
数据结构
"data": {
"orgOuterId": "13",
"orgName": "星座设备健康管理有限公司",
"bigScreenTitle": "工业设备监测云平台",
"workshop": [{
"workshopId": "1000047",
"name": "上海一区",
"position": "东方一角",
"manager": "张阳阳",
"bgPic": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/199e4f0fcd76710c487f8e8e5c5a11b4.jpg",
"envLayout": [{
"envComponentId": "3",
"name": "墙类",
"iconId": "10005",
"iconSubId": "10006",
"subIcons": [{
"iconId": "10005",
"name": "墙",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1628841770502_3fz6umsn53.png",
"width": "252",
"height": "188",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "0"
},
{
"iconId": "10006",
"name": "左墙",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771432169_m8kxa0lwu2.png",
"width": "126",
"height": "94",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "10005"
},
{
"iconId": "10007",
"name": "右墙",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771442722_j7g6ko6xg3.png",
"width": "126",
"height": "94",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "10005"
}
],
"icon": {
"iconId": "10006",
"name": "左墙",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771432169_m8kxa0lwu2.png",
"width": "126",
"height": "94",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "10005"
},
"randomId": "162978737079900",
"type": "env",
"position": {
"l": 161,
"left": 0,
"z": 54,
"t": 121
}
},
{
"envComponentId": "4",
"name": "测试2",
"iconId": "10022",
"iconSubId": "10022",
"subIcons": [{
"iconId": "10022",
"name": "父图",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686574303_uq3ehbd2q.png",
"width": "126",
"height": "94",
"type": "1",
"extra": {
"x": 0,
"y": 0
},
"pid": "0"
},
{
"iconId": "10024",
"name": "子",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686634420_6eqq6rpitk.png",
"width": "126",
"height": "94",
"type": "1",
"extra": {
"x": 0,
"y": 0
},
"pid": "10022"
}
],
"icon": {
"iconId": "10022",
"name": "父图",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686574303_uq3ehbd2q.png",
"width": "126",
"height": "94",
"type": "1",
"extra": {
"x": 0,
"y": 0
},
"pid": "0"
},
"randomId": "162978737079901",
"type": "env",
"position": {
"l": 380,
"left": 0,
"z": 54,
"t": 233
}
},
{
"envComponentId": "4",
"name": "测试2",
"iconId": "10022",
"iconSubId": "10024",
"subIcons": [{
"iconId": "10022",
"name": "父图",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686574303_uq3ehbd2q.png",
"width": "126",
"height": "94",
"type": "1",
"extra": {
"x": 0,
"y": 0
},
"pid": "0"
},
{
"iconId": "10024",
"name": "子",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686634420_6eqq6rpitk.png",
"width": "126",
"height": "94",
"type": "1",
"extra": {
"x": 0,
"y": 0
},
"pid": "10022"
}
],
"icon": {
"iconId": "10024",
"name": "子",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686634420_6eqq6rpitk.png",
"width": "126",
"height": "94",
"type": "1",
"extra": {
"x": 0,
"y": 0
},
"pid": "10022"
},
"randomId": "162978737079902",
"type": "env",
"position": {
"l": 548,
"left": 0,
"z": 54,
"t": 93
}
},
{
"envComponentId": "4",
"name": "测试2",
"iconId": "10022",
"iconSubId": "10022",
"subIcons": [{
"iconId": "10022",
"name": "父图",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686574303_uq3ehbd2q.png",
"width": "126",
"height": "94",
"type": "1",
"extra": {
"x": 0,
"y": 0
},
"pid": "0"
},
{
"iconId": "10024",
"name": "子",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686634420_6eqq6rpitk.png",
"width": "126",
"height": "94",
"type": "1",
"extra": {
"x": 0,
"y": 0
},
"pid": "10022"
}
],
"icon": {
"iconId": "10022",
"name": "父图",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686574303_uq3ehbd2q.png",
"width": "126",
"height": "94",
"type": "1",
"extra": {
"x": 0,
"y": 0
},
"pid": "0"
},
"randomId": "162978737079903",
"type": "env",
"position": {
"l": 70,
"left": 0,
"z": 55,
"t": 237
}
}
],
"devices": [{
"deviceUUID": "581248563706978304",
"deviceName": "四轴机器人",
"workshopId": "1000047",
"position": {
"iconSubId": "10",
"l": 347,
"t": 135,
"z": 54
},
"iconId": "10",
"iconSubId": "10",
"icon": {
"iconId": "10",
"name": "机床",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629252429605_g7650z9j6o.png",
"width": "135",
"height": "131",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "0"
}
}]
},
{
"workshopId": "1000121",
"name": "海淀",
"position": "万柳",
"manager": "李丰台",
"bgPic": "",
"envLayout": [],
"devices": []
},
{
"workshopId": "1000135",
"name": "上海2区",
"position": "东方2角",
"manager": "张2阳",
"bgPic": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/199e4f0fcd76710c487f8e8e5c5a11b4.jpg",
"envLayout": [{
"envComponentId": 3,
"iconId": 10005,
"iconSubId": "10007",
"position": {
"w": 0,
"t": 17,
"z": 32,
"l": 499
},
"icon": {
"iconId": "10007",
"name": "右墙",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771442722_j7g6ko6xg3.png",
"width": "126",
"height": "94",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "10005"
},
"subIcons": [{
"iconId": "10005",
"name": "墙",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1628841770502_3fz6umsn53.png",
"width": "252",
"height": "188",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "0"
},
{
"iconId": "10006",
"name": "左墙",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771432169_m8kxa0lwu2.png",
"width": "126",
"height": "94",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "10005"
},
{
"iconId": "10007",
"name": "右墙",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771442722_j7g6ko6xg3.png",
"width": "126",
"height": "94",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "10005"
}
],
"randomId": 1629775200460,
"type": "env"
},
{
"envComponentId": 3,
"iconId": 10005,
"iconSubId": "10007",
"position": {
"w": 0,
"t": 22,
"z": 33,
"l": 257
},
"icon": {
"iconId": "10007",
"name": "右墙",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771442722_j7g6ko6xg3.png",
"width": "126",
"height": "94",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "10005"
},
"subIcons": [{
"iconId": "10005",
"name": "墙",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1628841770502_3fz6umsn53.png",
"width": "252",
"height": "188",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "0"
},
{
"iconId": "10006",
"name": "左墙",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771432169_m8kxa0lwu2.png",
"width": "126",
"height": "94",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "10005"
},
{
"iconId": "10007",
"name": "右墙",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771442722_j7g6ko6xg3.png",
"width": "126",
"height": "94",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "10005"
}
],
"randomId": 1629775200461,
"type": "env"
}
],
"devices": [{
"deviceUUID": "577988705557798912",
"deviceName": "六轴机器人",
"workshopId": "1000135",
"position": {
"iconSubId": "10",
"l": 86.10189573459715,
"t": 74.08767772511848,
"z": 25
},
"iconId": "10",
"iconSubId": "10",
"icon": {
"iconId": "10",
"name": "机床",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629252429605_g7650z9j6o.png",
"width": "135",
"height": "131",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "0"
}
}]
},
{
"workshopId": "1000136",
"name": "阿萨的",
"position": "啊",
"manager": "啊",
"bgPic": "",
"envLayout": [{
"envComponentId": "4",
"name": "测试2",
"iconId": "10022",
"iconSubId": "10022",
"subIcons": [{
"iconId": "10022",
"name": "父图",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686574303_uq3ehbd2q.png",
"width": "126",
"height": "94",
"type": "1",
"extra": {
"x": 0,
"y": 0
},
"pid": "0"
},
{
"iconId": "10024",
"name": "子",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686634420_6eqq6rpitk.png",
"width": "126",
"height": "94",
"type": "1",
"extra": {
"x": 0,
"y": 0
},
"pid": "10022"
}
],
"icon": {
"iconId": "10022",
"name": "父图",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686574303_uq3ehbd2q.png",
"width": "126",
"height": "94",
"type": "1",
"extra": {
"x": 0,
"y": 0
},
"pid": "0"
},
"randomId": "162977737390130",
"type": "env",
"position": {
"l": 149,
"left": 0,
"z": 55,
"t": 141
}
},
{
"envComponentId": "3",
"name": "墙类",
"iconId": "10005",
"iconSubId": "10005",
"subIcons": [{
"iconId": "10005",
"name": "墙",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1628841770502_3fz6umsn53.png",
"width": "252",
"height": "188",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "0"
},
{
"iconId": "10006",
"name": "左墙",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771432169_m8kxa0lwu2.png",
"width": "126",
"height": "94",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "10005"
},
{
"iconId": "10007",
"name": "右墙",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771442722_j7g6ko6xg3.png",
"width": "126",
"height": "94",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "10005"
}
],
"icon": {
"iconId": "10005",
"name": "墙",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1628841770502_3fz6umsn53.png",
"width": "252",
"height": "188",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "0"
},
"randomId": 1629777377747,
"type": "env",
"position": {
"l": 393,
"left": 0,
"z": 54,
"t": 264
}
}
],
"devices": []
}
],
"otherDevices": [],
"envComponents": [{
"envComponentId": "3",
"name": "墙类",
"iconId": "10005",
"iconSubId": "10005"
},
{
"envComponentId": "4",
"name": "测试2",
"iconId": "10022",
"iconSubId": "10022"
},
{
"envComponentId": "5",
"name": "轨道",
"iconId": "11",
"iconSubId": "11"
}
],
"iconsGroup": {
"10": {
"10": {
"iconId": "10",
"name": "机床",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629252429605_g7650z9j6o.png",
"width": "135",
"height": "131",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "0"
}
},
"11": {
"11": {
"iconId": "11",
"name": "传感器",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629252414513_fe4coz4kf.png",
"width": "135",
"height": "131",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "0"
}
},
"10000": {
"10000": {
"iconId": "10000",
"name": "设备默认图标",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1628841770502_3fz6umsn53.png",
"width": "252",
"height": "188",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "0"
},
"10001": {
"iconId": "10001",
"name": "左设备默认图标",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1628841770502_3fz6umsn53.png",
"width": "252",
"height": "188",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "10000"
},
"10002": {
"iconId": "10002",
"name": "右设备默认图标",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1628841770502_3fz6umsn53.png",
"width": "252",
"height": "188",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "10000"
}
},
"10005": {
"10005": {
"iconId": "10005",
"name": "墙",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1628841770502_3fz6umsn53.png",
"width": "252",
"height": "188",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "0"
},
"10006": {
"iconId": "10006",
"name": "左墙",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771432169_m8kxa0lwu2.png",
"width": "126",
"height": "94",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "10005"
},
"10007": {
"iconId": "10007",
"name": "右墙",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629771442722_j7g6ko6xg3.png",
"width": "126",
"height": "94",
"type": "2",
"extra": {
"x": 0,
"y": 0
},
"pid": "10005"
}
},
"10022": {
"10022": {
"iconId": "10022",
"name": "父图",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686574303_uq3ehbd2q.png",
"width": "126",
"height": "94",
"type": "1",
"extra": {
"x": 0,
"y": 0
},
"pid": "0"
},
"10024": {
"iconId": "10024",
"name": "子",
"img": "https://tsd-test.oss-cn-shenzhen.aliyuncs.com/iot/device-model/1629686634420_6eqq6rpitk.png",
"width": "126",
"height": "94",
"type": "1",
"extra": {
"x": 0,
"y": 0
},
"pid": "10022"
}
}
}
},
"code": 200,
"message": "OK",
"requestId": "b0fe622fa9ac21f7e3339ef2ef77a56e",
"takeTime": "47.622 ms",
"serverTime": "2021-08-24 14:46:35"
页面代码
{{ orgName }}
预览
{{ loading ? '发布中...' : '发布' }}
![]()
{{ item.deviceName }}
![]()
{{ item.icon.name }}
{{ item.name }}
{{ item.name }}
![]()
![]()
{{ orgName }}