编辑地图
This commit is contained in:
yyy
parent
75974a15bd
commit
64213fedce
@ -34,19 +34,17 @@
|
|||||||
:y1="Number(item.startPointY) * radio"
|
:y1="Number(item.startPointY) * radio"
|
||||||
:x2="Number(item.endPointX) * radio"
|
:x2="Number(item.endPointX) * radio"
|
||||||
:y2="Number(item.endPointY) * radio"
|
:y2="Number(item.endPointY) * radio"
|
||||||
stroke="#2d72d9"
|
:stroke="item.isSelect ? '#f48924' : '#2d72d9'"
|
||||||
:stroke-width="4 * radio"
|
:stroke-width="4 * radio"
|
||||||
@click="handleChooseRoute(item, index)"
|
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<!-- 曲线 -->
|
<!-- 曲线 -->
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<path
|
<path
|
||||||
:d="getCurvePath(item)"
|
:d="getCurvePath(item)"
|
||||||
stroke="#2d72d9"
|
:stroke="item.isSelect ? '#f48924' : '#2d72d9'"
|
||||||
:stroke-width="4 * radio"
|
:stroke-width="4 * radio"
|
||||||
fill="none"
|
fill="none"
|
||||||
@click="handleChooseRoute(item, index)"
|
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
@ -54,40 +52,46 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 小车 -->
|
<!-- 小车 -->
|
||||||
|
|
||||||
<div
|
<div
|
||||||
v-for="(item, index) in testCarList"
|
v-for="(item, index) in testCarList"
|
||||||
:key="index"
|
:key="index"
|
||||||
@dblclick="carDbClick(item, index)"
|
@dblclick="carDbClick(item, index)"
|
||||||
>
|
>
|
||||||
<div
|
<el-popover placement="bottom">
|
||||||
class="indexpage-car-item"
|
<template #reference>
|
||||||
v-if="legendObj.carShow"
|
<div
|
||||||
:style="{
|
class="indexpage-car-item"
|
||||||
left: item.realX * radio + 'px',
|
v-if="legendObj.carShow"
|
||||||
top: item.realY * radio + 'px',
|
:style="{
|
||||||
width: (carWidth / imgBgObj.resolution / 100) * radio + 'px',
|
left: item.realX * radio + 'px',
|
||||||
height: (carHeight / imgBgObj.resolution / 100) * radio + 'px',
|
top: item.realY * radio + 'px',
|
||||||
transform: 'rotate(' + radianToDegree(item.data.pose2d.yaw) + 'deg)',
|
width: (carWidth / imgBgObj.resolution / 100) * radio + 'px',
|
||||||
zIndex: 9999
|
height: (carHeight / imgBgObj.resolution / 100) * radio + 'px',
|
||||||
}"
|
transform: 'rotate(' + radianToDegree(item.data.pose2d.yaw) + 'deg)',
|
||||||
>
|
zIndex: 9999
|
||||||
<div
|
}"
|
||||||
style="
|
>
|
||||||
font-size: 0.6rem;
|
<div
|
||||||
position: absolute;
|
style="
|
||||||
top: 50%;
|
font-size: 15px;
|
||||||
left: 40%;
|
position: absolute;
|
||||||
transform: translateX(-50%) translateY(-50%);
|
top: 50%;
|
||||||
color: greenyellow;
|
left: 40%;
|
||||||
"
|
transform: translateX(-50%) translateY(-50%);
|
||||||
>
|
color: greenyellow;
|
||||||
{{ item.robotNo || '' }}
|
"
|
||||||
</div>
|
>
|
||||||
<img
|
{{ item.robotNo || '' }}
|
||||||
src="@/assets/imgs/indexPage/chache-4备份 7@2x.png"
|
</div>
|
||||||
style="width: 100%; height: 100%"
|
<img
|
||||||
/>
|
src="@/assets/imgs/indexPage/chache-4备份 7@2x.png"
|
||||||
</div>
|
style="width: 100%; height: 100%"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="popover-robot-no">{{ item.robotNo }}</div>
|
||||||
|
</el-popover>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="indexpage-container-box-point-item"
|
class="indexpage-container-box-point-item"
|
||||||
@ -386,8 +390,8 @@ const emit = defineEmits(['transmitMapId'])
|
|||||||
const storeDialogRef = ref(null) // 仓库信息弹窗
|
const storeDialogRef = ref(null) // 仓库信息弹窗
|
||||||
const list = ref([])
|
const list = ref([])
|
||||||
const testCarList = ref([]) //小车数组
|
const testCarList = ref([]) //小车数组
|
||||||
const carWidth = ref(200)
|
const carWidth = ref(226)
|
||||||
const carHeight = ref(100)
|
const carHeight = ref(124)
|
||||||
|
|
||||||
// 定义属性
|
// 定义属性
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -505,29 +509,6 @@ const changeIsDrag = () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//点击选中线 如果选中就变成非选中 否则相反
|
|
||||||
const handleChooseRoute = (val, i) => {
|
|
||||||
if (lineList.value.length) {
|
|
||||||
if (val.isSelect) {
|
|
||||||
lineList.value.forEach((item, index) => {
|
|
||||||
if (index == i) {
|
|
||||||
item.isSelect = false
|
|
||||||
} else {
|
|
||||||
item.isSelect = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
lineList.value.forEach((item, index) => {
|
|
||||||
if (index == i) {
|
|
||||||
item.isSelect = true
|
|
||||||
} else {
|
|
||||||
item.isSelect = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取曲线的路径
|
// 获取曲线的路径
|
||||||
const getCurvePath = (curve) => {
|
const getCurvePath = (curve) => {
|
||||||
let startPointX = Number(curve.startPointX) * radio.value
|
let startPointX = Number(curve.startPointX) * radio.value
|
||||||
@ -677,8 +658,6 @@ const storeClick = async (item) => {
|
|||||||
})
|
})
|
||||||
storeDialogRef.value.open(JSON.parse(JSON.stringify(storeData)))
|
storeDialogRef.value.open(JSON.parse(JSON.stringify(storeData)))
|
||||||
}
|
}
|
||||||
const lineList = ref([])
|
|
||||||
const pointList = ref([])
|
|
||||||
|
|
||||||
//将节点实际宽高cm转换成px
|
//将节点实际宽高cm转换成px
|
||||||
const cmConversionPx = (cWidth, cHeight) => {
|
const cmConversionPx = (cWidth, cHeight) => {
|
||||||
@ -810,8 +789,8 @@ const linkWebSocket = (url) => {
|
|||||||
if (jsonMsg.type == 'planning_move_pose') {
|
if (jsonMsg.type == 'planning_move_pose') {
|
||||||
let data = JSON.parse(jsonMsg.content)
|
let data = JSON.parse(jsonMsg.content)
|
||||||
let dataList = JSON.parse(data).data
|
let dataList = JSON.parse(data).data
|
||||||
if (lineList.value.length > 0) {
|
if (state.mapRouteList.length > 0) {
|
||||||
lineList.value = setIsSelect(lineList.value, dataList)
|
state.mapRouteList = setIsSelect(state.mapRouteList, dataList)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -1322,4 +1301,11 @@ onBeforeUnmount(() => {
|
|||||||
color: #000;
|
color: #000;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.popover-robot-no {
|
||||||
|
font-size: 15px;
|
||||||
|
text-align: center;
|
||||||
|
color: #000;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -19,8 +19,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="main-content">
|
<div class="main-content">
|
||||||
<!-- <div @click="downAgv">导出zip</div> -->
|
|
||||||
<!-- 首页 -->
|
|
||||||
<indexPage ref="indexPageRef" :isFullScreen="false" />
|
<indexPage ref="indexPageRef" :isFullScreen="false" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -52,79 +50,25 @@ const list = ref([])
|
|||||||
const indexPageRef = ref(null)
|
const indexPageRef = ref(null)
|
||||||
const stopOrRestore = ref(0) // 地图暂停/恢复 (0:未暂停, 1:暂停)
|
const stopOrRestore = ref(0) // 地图暂停/恢复 (0:未暂停, 1:暂停)
|
||||||
|
|
||||||
const downAgv = async () => {
|
|
||||||
const data = await MapApi.agvDownload()
|
|
||||||
download.zip(data, `agv-${new Date().getTime()}.zip`)
|
|
||||||
}
|
|
||||||
// 筛选出对应的区域对象
|
|
||||||
const findChildrenByValues = (tree, values) => {
|
|
||||||
if (!tree || tree.length === 0) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
function traverse(node) {
|
|
||||||
if (node.children) {
|
|
||||||
for (let child of node.children) {
|
|
||||||
if (values.includes(child.value)) {
|
|
||||||
return child
|
|
||||||
}
|
|
||||||
let result = traverse(child)
|
|
||||||
if (result) {
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let root of tree) {
|
|
||||||
if (values.includes(root.value)) {
|
|
||||||
if (root.children) {
|
|
||||||
for (let child of root.children) {
|
|
||||||
if (values.includes(child.value)) {
|
|
||||||
return child
|
|
||||||
}
|
|
||||||
let result = traverse(child)
|
|
||||||
if (result) {
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let result = traverse(root)
|
|
||||||
if (result) {
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
//获取地图区域
|
//获取地图区域
|
||||||
const getList = async () => {
|
const getList = async () => {
|
||||||
let data = await MapApi.getPositionMapGetMap()
|
let data = await MapApi.getPositionMapGetMap()
|
||||||
let mapList = []
|
list.value = Object.entries(data).map(([floor, areas]) => ({
|
||||||
for (let key in data) {
|
label: `${floor}层`,
|
||||||
mapList.push({
|
floor: `${floor}`,
|
||||||
floor: key,
|
value: `${floor}`,
|
||||||
label: key + '层',
|
children: areas.map((area) => ({
|
||||||
value: key,
|
...area,
|
||||||
children: data[key]
|
value: String(area.id),
|
||||||
})
|
label: area.area
|
||||||
}
|
}))
|
||||||
if (mapList.length) {
|
}))
|
||||||
mapList.forEach((item) => {
|
|
||||||
if (item.children.length) {
|
|
||||||
item.children.forEach((child) => {
|
|
||||||
child.label = child.area
|
|
||||||
child.value = child.id
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
list.value = mapList
|
|
||||||
|
|
||||||
if (query.mapId) {
|
if (query.mapId) {
|
||||||
let item = findDataById(data, Number(query.mapId))
|
let item = findItemById(query.mapId)
|
||||||
mapValue.value = [String(item.floor), Number(item.id)]
|
if (item) {
|
||||||
|
mapValue.value = [String(item.floor), String(item.id)]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (mapValue.value.length) {
|
if (mapValue.value.length) {
|
||||||
@ -136,8 +80,9 @@ const getList = async () => {
|
|||||||
|
|
||||||
await getStopOrRestore()
|
await getStopOrRestore()
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleChangeMap = async (e) => {
|
const handleChangeMap = async (e) => {
|
||||||
let item = findChildrenByValues(list.value, e)
|
let item = findItemById(e[1])
|
||||||
indexPageRef.value.getMapData(item)
|
indexPageRef.value.getMapData(item)
|
||||||
router.replace({
|
router.replace({
|
||||||
name: 'MapPageRealTimeMap',
|
name: 'MapPageRealTimeMap',
|
||||||
@ -146,6 +91,7 @@ const handleChangeMap = async (e) => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//新建任务
|
//新建任务
|
||||||
const createTaskDialogRef = ref()
|
const createTaskDialogRef = ref()
|
||||||
const createTask = async () => {
|
const createTask = async () => {
|
||||||
@ -205,18 +151,19 @@ const editMap = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const findDataById = (obj, id) => {
|
//按id寻找
|
||||||
// 遍历 obj 的每一层
|
function findItemById(targetId) {
|
||||||
for (const floor in obj) {
|
for (const floorItem of list.value) {
|
||||||
// 遍历当前楼层的每个区域
|
if (floorItem.children && Array.isArray(floorItem.children)) {
|
||||||
for (const item of obj[floor]) {
|
const foundItem = floorItem.children.find((item) => item.id == targetId)
|
||||||
// 如果找到匹配的 id，返回该数据
|
|
||||||
if (item.id === id) {
|
if (foundItem) {
|
||||||
return item
|
return foundItem
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 如果没有找到，返回 null
|
|
||||||
|
// 遍历完所有项未找到则返回null
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,91 +0,0 @@
|
|||||||
```
|
|
||||||
{
|
|
||||||
labelType: 'wayPoint', //类型 路径点wayPoint 库位点locationPoint 设备点devicePoint 停车点parkingPoint 区域变更点areaPoint 等待点waitPoint 文字text
|
|
||||||
mapId: '', //地图id
|
|
||||||
x: 100, //left
|
|
||||||
y: 100, //top
|
|
||||||
h: 100, //高
|
|
||||||
w: 100, //宽
|
|
||||||
angle: 13, //旋转角度
|
|
||||||
draggable: true, //是否可以拖动
|
|
||||||
resizable: true, //是否可以调整大小
|
|
||||||
rotatable: true, //是否可以旋转
|
|
||||||
lockAspectRatio: true, //是否保持横纵比
|
|
||||||
img: 'https://sys.znkjfw.com/imgs/process/%E8%AF%B7%E5%81%87.png',
|
|
||||||
text: '', //文字
|
|
||||||
fontColor: '', //文字颜色
|
|
||||||
fontType: '', //文字类型
|
|
||||||
fontFamily: '' //字体类型
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
1.普通节点 dataJson 不传数据
|
|
||||||
|
|
||||||
|
|
||||||
2.库位点 dataJson 数据格式:
|
|
||||||
[
|
|
||||||
{
|
|
||||||
"id": 1881176241622024200, //库位id - 编辑的时候会有需要传过来 新增的时候没有则不传
|
|
||||||
"laneId": 1881177420829642800, //线库id - 编辑的时候有就传过来 新增的时候没有就不传
|
|
||||||
"laneName": "测试33", //线库名称 - 编辑的时候有就传过来 新增的时候没有就不传
|
|
||||||
"locationX": "2", //库位坐标x轴 - 编辑的时候有就传过来 新增的时候不用传
|
|
||||||
"locationY": "7", //库位坐标y轴 - 编辑的时候有就传过来 新增的时候不用传
|
|
||||||
"locationWide": 10, //宽度 - 编辑的时候有就传过来 新增的时候需要传
|
|
||||||
"locationDeep": 10, //高度 - 编辑的时候有就传过来 新增的时候需要传
|
|
||||||
"direction": 1, //库位方向（1：单向、2：双向、3：三向、4：四向） 编辑的时候有就传过来 新增的时候需要传
|
|
||||||
"inDirection": 1, //进入方向（0：尾入、1：头入） 编辑的时候有就传过来 新增的时候需要传
|
|
||||||
"outDirection": 1, //离开方向（0：尾出、1：头出） 编辑的时候有就传过来 新增的时候需要传
|
|
||||||
"locationStorey": 3, //层数 编辑的时候有就传过来 新增的时候需要传
|
|
||||||
"mapId": 1, //地图id 编辑的时候有就传过来 新增的时候不需要传
|
|
||||||
"mapItemId": 1881176241622024200 //地图子表id 编辑的时候有就传过来 新增的时候不需要传
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 1881176241622024200,
|
|
||||||
"laneId": 1881177420829642800,
|
|
||||||
"laneName": "测试33",
|
|
||||||
"locationX": "2",
|
|
||||||
"locationY": "7",
|
|
||||||
"locationWide": 10,
|
|
||||||
"locationDeep": 10,
|
|
||||||
"direction": 1,
|
|
||||||
"inDirection": 1,
|
|
||||||
"outDirection": 1,
|
|
||||||
"locationStorey": 3,
|
|
||||||
"mapId": 1,
|
|
||||||
"mapItemId": 1881176241622024200
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
3.设备点 dataJson 数据格式:
|
|
||||||
{
|
|
||||||
"id": 1881176241622024200, //设备id - 新增编辑都需要传 - 根据选择的设备获取到
|
|
||||||
"locationX": "2", //库位坐标x轴 - 编辑的时候有就传过来 新增的时候不用传
|
|
||||||
"locationY": "7", //库位坐标y轴 - 编辑的时候有就传过来 新增的时候不用传
|
|
||||||
"locationWide": 10, //宽度 - 编辑的时候有就传过来 新增的时候需要传
|
|
||||||
"locationDeep": 10, //高度 - 编辑的时候有就传过来 新增的时候需要传
|
|
||||||
"mapId": 1, //地图id 编辑的时候有就传过来 新增的时候不需要传
|
|
||||||
"mapItemId": 1881176241622024200 //地图子表id 编辑的时候有就传过来 新增的时候不需要传
|
|
||||||
}
|
|
||||||
4.停车点 dataJson 数据格式:
|
|
||||||
|
|
||||||
{
|
|
||||||
"id": 1881176241622024200, //停车点id - 编辑的时候会有需要传过来 新增的时候没有则不传
|
|
||||||
"locationX": "2", //库位坐标x轴 - 编辑的时候有就传过来 新增的时候不用传
|
|
||||||
"locationY": "7", //库位坐标y轴 - 编辑的时候有就传过来 新增的时候不用传
|
|
||||||
"locationWide": 10, //宽度 - 编辑的时候有就传过来 新增的时候需要传
|
|
||||||
"locationDeep": 10, //高度 - 编辑的时候有就传过来 新增的时候需要传
|
|
||||||
"direction": 1, //库位方向（1：单向、2：双向、3：三向、4：四向） 编辑的时候有就传过来 新增的时候需要传
|
|
||||||
"inDirection": 1, //进入方向（0：尾入、1：头入） 编辑的时候有就传过来 新增的时候需要传
|
|
||||||
"outDirection": 1, //离开方向（0：尾出、1：头出） 编辑的时候有就传过来 新增的时候需要传
|
|
||||||
"mapId": 1, //地图id 编辑的时候有就传过来 新增的时候不需要传
|
|
||||||
"mapItemId": 1881176241622024200 //地图子表id 编辑的时候有就传过来 新增的时候不需要传
|
|
||||||
},
|
|
||||||
|
|
||||||
5.路径点 dataJson 不传数据
|
|
||||||
|
|
||||||
6.等待点 dataJson 不传数据
|
|
||||||
|
|
||||||
|
|
||||||
```
|
|
||||||
Loading…
Reference in New Issue
Block a user