标记
This commit is contained in:
yyy
parent
377eee0940
commit
e162b8189a
@ -4,7 +4,7 @@ NODE_ENV=development
|
||||
VITE_DEV=true
|
||||
|
||||
# 请求路径
|
||||
VITE_BASE_URL='http://192.168.0.74:48080'
|
||||
VITE_BASE_URL='http://192.168.0.172:48080'
|
||||
# VITE_BASE_URL='http://192.168.0.189:48080'
|
||||
|
||||
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
|
||||
|
||||
@ -136,3 +136,15 @@ export const mapLineGet = async (params) => {
|
||||
export const mapLineListGet = async (params) => {
|
||||
return await request.get({ url: `/system/position-map-line/list`, params })
|
||||
}
|
||||
|
||||
// 获得车辆信息分页
|
||||
export const getRobotInformationPage = async (params) => {
|
||||
return await request.get({ url: `/system/robot/information/page`, params })
|
||||
}
|
||||
|
||||
//获取AGV点位信息
|
||||
export const getAGVPointInformation = async (macAddress) => {
|
||||
return await request.get({
|
||||
url: `/system/position-map-item/getAGVPointInformation?macAddress=` + macAddress
|
||||
})
|
||||
}
|
||||
|
||||
2517
src/views/mapPage/example/editMap.vue
Normal file
2517
src/views/mapPage/example/editMap.vue
Normal file
File diff suppressed because it is too large
Load Diff
@ -155,6 +155,62 @@
|
||||
>
|
||||
</div>
|
||||
</el-popover>
|
||||
<!-- 标记 -->
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
v-else-if="item.switchType === 'marker'"
|
||||
width="220"
|
||||
>
|
||||
<template #reference>
|
||||
<div
|
||||
class="tool-item"
|
||||
:class="
|
||||
toolbarSwitchType === item.switchType
|
||||
? 'tool-active'
|
||||
: item.isActive
|
||||
? 'right-tool-active'
|
||||
: ''
|
||||
"
|
||||
@click="toolbarClick(item)"
|
||||
>
|
||||
<Icon :icon="item.icon" :size="24" />
|
||||
<div class="name"> {{ item.name }} </div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 位置 -->
|
||||
<el-form :model="state.markForm" class="mt-2" label-width="68">
|
||||
<el-form-item label="标记车辆">
|
||||
<el-select
|
||||
v-model="state.markForm.macAddress"
|
||||
placeholder="请选择"
|
||||
@change="macAddressChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in state.mapMarkCarList"
|
||||
:key="item.id"
|
||||
:label="item.robotNo"
|
||||
:value="item.macAddress"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标记属性" v-if="state.markForm.markProperty">
|
||||
<el-input v-model="state.markForm.markProperty" style="width: 240px" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="原节点" v-if="state.markForm.originalNode">
|
||||
<el-input v-model="state.markForm.originalNode" style="width: 240px" disabled />
|
||||
</el-form-item>
|
||||
<div style="text-align: right">
|
||||
<el-button
|
||||
size="small"
|
||||
style="width: 64px; height: 30px; background: #00329f"
|
||||
color="#00329F"
|
||||
@click="markFormSubmit()"
|
||||
>确认</el-button
|
||||
>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-popover>
|
||||
<div
|
||||
v-else
|
||||
class="tool-item"
|
||||
@ -294,12 +350,7 @@
|
||||
v-if="item.type === 2 && item.layerSelectionShow"
|
||||
src="https://api.znkjfw.com/admin-api/infra/file/4/get/库位库存_png_179_1739326653035.png"
|
||||
alt=""
|
||||
:style="{
|
||||
verticalAlign: 'top',
|
||||
width: item.locationWidePx + 'px',
|
||||
height: item.locationDeepPx + 'px',
|
||||
border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
|
||||
}"
|
||||
:style="nodeStyle(item, index)"
|
||||
/>
|
||||
<!-- 3 设备点 -->
|
||||
<img
|
||||
@ -309,48 +360,28 @@
|
||||
'https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png'
|
||||
"
|
||||
alt=""
|
||||
:style="{
|
||||
verticalAlign: 'top',
|
||||
width: item.locationWidePx + 'px',
|
||||
height: item.locationDeepPx + 'px',
|
||||
border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
|
||||
}"
|
||||
:style="nodeStyle(item, index)"
|
||||
/>
|
||||
<!-- 4 停车点 -->
|
||||
<img
|
||||
v-if="item.type === 4 && item.layerSelectionShow"
|
||||
src="https://api.znkjfw.com/admin-api/infra/file/4/get/停车场-01_png_179_1739326933020.png"
|
||||
alt=""
|
||||
:style="{
|
||||
verticalAlign: 'top',
|
||||
width: item.locationWidePx + 'px',
|
||||
height: item.locationDeepPx + 'px',
|
||||
border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
|
||||
}"
|
||||
:style="nodeStyle(item, index)"
|
||||
/>
|
||||
<!-- 5 区域变更点 -->
|
||||
<img
|
||||
v-if="item.type === 5 && item.layerSelectionShow"
|
||||
src="https://api.znkjfw.com/admin-api/infra/file/4/get/区域_png_179_1739327151876.png"
|
||||
alt=""
|
||||
:style="{
|
||||
verticalAlign: 'top',
|
||||
width: item.locationWidePx + 'px',
|
||||
height: item.locationDeepPx + 'px',
|
||||
border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
|
||||
}"
|
||||
:style="nodeStyle(item, index)"
|
||||
/>
|
||||
<!-- 6 等待点 -->
|
||||
<img
|
||||
v-if="item.type === 6 && item.layerSelectionShow"
|
||||
src="https://api.znkjfw.com/admin-api/infra/file/4/get/等待点_png_179_1739326991439.png"
|
||||
alt=""
|
||||
:style="{
|
||||
verticalAlign: 'top',
|
||||
width: item.locationWidePx + 'px',
|
||||
height: item.locationDeepPx + 'px',
|
||||
border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
|
||||
}"
|
||||
:style="nodeStyle(item, index)"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
@ -535,10 +566,10 @@
|
||||
:key="index"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
left: `${point.x}px`,
|
||||
top: `${point.y}px`,
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
left: `${point.x - 3}px`,
|
||||
top: `${point.y - 3}px`,
|
||||
width: '6px',
|
||||
height: '6px',
|
||||
backgroundColor: '#00329F',
|
||||
borderRadius: '50%'
|
||||
}"
|
||||
@ -547,8 +578,8 @@
|
||||
v-if="state.measureDistancesPoints.length === 2"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
left: `${state.measureDistancesPoints[0].x + 5}px`,
|
||||
top: `${state.measureDistancesPoints[0].y + 5}px`,
|
||||
left: `${state.measureDistancesPoints[0].x}px`,
|
||||
top: `${state.measureDistancesPoints[0].y}px`,
|
||||
width: `${computedLineWidth}px`,
|
||||
height: '2px',
|
||||
backgroundColor: '#00329F',
|
||||
@ -674,6 +705,15 @@ const inputBoxRef = ref() //文字输入框
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const nodeStyle = (item, index) => {
|
||||
return {
|
||||
verticalAlign: 'top',
|
||||
width: item.locationWidePx + 'px',
|
||||
height: item.locationDeepPx + 'px',
|
||||
border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
|
||||
}
|
||||
}
|
||||
|
||||
// 缩放停止
|
||||
const interfaceRefreshed = ref(true)
|
||||
const resizeEnd = (locationX, locationY, w, h, item, index) => {
|
||||
@ -717,8 +757,6 @@ const dragEnd = (locationX, locationY, item, index) => {
|
||||
let x = Number(locationX) + Number(item.locationWidePx) / 2
|
||||
let y = Number(locationY) + Number(item.locationDeepPx) / 2
|
||||
|
||||
console.log(x, y)
|
||||
|
||||
if (x === item.locationX && y === item.locationY) return
|
||||
let actualPoint = disposeEventPoint(x, y)
|
||||
state.allMapPointInfo[index].locationX = x
|
||||
@ -1156,7 +1194,14 @@ const state = reactive({
|
||||
allMapPointInfo: [], //当前页面上的所有节点的列表
|
||||
mapRouteList: [], //当前页面上所有路线的列表
|
||||
currentIndex: 0, //当前处在哪条历史记录
|
||||
currentItemIndex: -1 //当前处在哪个工具
|
||||
currentItemIndex: -1, //当前处在哪个工具
|
||||
markForm: {
|
||||
macAddress: '', // mac地址
|
||||
markProperty: '', //标记属性
|
||||
originalNode: '', //原节点
|
||||
robotNo: '' //AGV编号
|
||||
}, //标记的表单
|
||||
mapMarkCarList: [] //标记的车辆列表
|
||||
})
|
||||
|
||||
const toolbarClick = async (item) => {
|
||||
@ -1347,6 +1392,7 @@ const toolbarClick = async (item) => {
|
||||
break
|
||||
case 'marker':
|
||||
// 标记
|
||||
mapMark()
|
||||
break
|
||||
case 'grid':
|
||||
//网格
|
||||
@ -1475,6 +1521,108 @@ const rotationFormSubmit = () => {
|
||||
addEditHistory()
|
||||
}
|
||||
|
||||
//标记
|
||||
const mapMark = async () => {
|
||||
let res = await MapApi.getRobotInformationPage({
|
||||
pageNo: 1,
|
||||
pageSize: 20
|
||||
})
|
||||
state.mapMarkCarList = res.list
|
||||
|
||||
if (state.currentItemIndex != -1) {
|
||||
let item = state.allMapPointInfo[state.currentItemIndex]
|
||||
state.markForm.originalNode = `[${item.locationX},${item.locationY}]`
|
||||
if (item.type == 1) {
|
||||
state.markForm.markProperty = '路径点'
|
||||
} else if (item.type == 2) {
|
||||
state.markForm.markProperty = '库位点'
|
||||
} else if (item.type == 3) {
|
||||
state.markForm.markProperty = '设备点'
|
||||
} else if (item.type == 4) {
|
||||
state.markForm.markProperty = '停车点'
|
||||
} else if (item.type == 5) {
|
||||
state.markForm.markProperty = '区域变更点'
|
||||
} else if (item.type == 6) {
|
||||
state.markForm.markProperty = '等待点'
|
||||
}
|
||||
} else {
|
||||
state.markForm.markProperty = ''
|
||||
state.markForm.originalNode = ''
|
||||
}
|
||||
}
|
||||
//标记提交
|
||||
const macAddressChange = (e) => {
|
||||
const targetItem = state.mapMarkCarList.find((item) => item.macAddress === e)
|
||||
if (targetItem) {
|
||||
state.markForm.robotNo = targetItem.robotNo
|
||||
}
|
||||
}
|
||||
const markFormSubmit = async () => {
|
||||
if (!state.markForm.macAddress) {
|
||||
message.warning('请选择车辆')
|
||||
return
|
||||
}
|
||||
let res = await MapApi.getAGVPointInformation(state.markForm.macAddress)
|
||||
let content = JSON.parse(res.content)
|
||||
let point = JSON.parse(content[state.markForm.robotNo]) //标记传过来的数据
|
||||
let pointPx = convertActualToBrowser(point.x, point.y)
|
||||
let actualPoint = disposeEventPoint(pointPx.x, pointPx.y)
|
||||
|
||||
if (state.currentItemIndex !== -1) {
|
||||
state.allMapPointInfo[state.currentItemIndex].locationX = pointPx.x
|
||||
state.allMapPointInfo[state.currentItemIndex].locationY = pointPx.y
|
||||
state.allMapPointInfo[state.currentItemIndex].actualLocationX = actualPoint.actualLocationX
|
||||
state.allMapPointInfo[state.currentItemIndex].actualLocationY = actualPoint.actualLocationY
|
||||
|
||||
//更改路线里的
|
||||
let item = state.allMapPointInfo[state.currentItemIndex]
|
||||
state.mapRouteList.forEach((route) => {
|
||||
if (item.id === route.startingPointId) {
|
||||
route.startPointX = pointPx.x
|
||||
route.startPointY = pointPx.y
|
||||
route.beginHigh = Number(item.locationDeepPx)
|
||||
route.beginWidth = Number(item.locationWidePx)
|
||||
route.actualStartPointX = actualPoint.actualLocationX
|
||||
route.actualStartPointY = actualPoint.actualLocationY
|
||||
}
|
||||
if (item.id === route.endPointId) {
|
||||
route.endPointX = pointPx.x
|
||||
route.endPointY = pointPx.y
|
||||
route.endHigh = Number(item.locationDeepPx)
|
||||
route.endWidth = Number(item.locationWidePx)
|
||||
route.actualEndPointX = actualPoint.actualLocationX
|
||||
route.actualEndPointY = actualPoint.actualLocationY
|
||||
}
|
||||
})
|
||||
|
||||
addEditHistory()
|
||||
} else {
|
||||
//新增一个节点
|
||||
state.allMapPointInfo.push({
|
||||
positionMapId: imgBgObj.positionMapId, //地图的id
|
||||
layerSelectionShow: true,
|
||||
locationX: pointPx.x,
|
||||
locationY: pointPx.y,
|
||||
actualLocationX: actualPoint.actualLocationX,
|
||||
actualLocationY: actualPoint.actualLocationY,
|
||||
locationDeep: 50,
|
||||
locationWide: 50,
|
||||
locationDeepPx: 10,
|
||||
locationWidePx: 10,
|
||||
angle: 0,
|
||||
draggable: true,
|
||||
resizable: true,
|
||||
rotatable: false,
|
||||
lockAspectRatio: false, //横纵比
|
||||
mapImageUrl: '',
|
||||
type: 1, //默认类型1 路径节点
|
||||
dataList: [], //存库位的
|
||||
dataObj: {} //存 设备点 停车点 文字
|
||||
})
|
||||
addEditHistory()
|
||||
}
|
||||
}
|
||||
|
||||
//鼠标拖动绘制节点
|
||||
// 从点开始绘制
|
||||
const startFromPoint = (index, event) => {
|
||||
@ -2020,8 +2168,10 @@ const getMapList = async () => {
|
||||
imgBgObj.positionMapId = res.id
|
||||
imgBgObj.floor = res.floor
|
||||
imgBgObj.area = res.area
|
||||
imgBgObj.width = yamlJson.width
|
||||
imgBgObj.height = yamlJson.height
|
||||
// imgBgObj.width = yamlJson.width
|
||||
// imgBgObj.height = yamlJson.height
|
||||
imgBgObj.width = 1423
|
||||
imgBgObj.height = 1406
|
||||
imgBgObj.origin = yamlJson.origin
|
||||
imgBgObj.resolution = yamlJson.resolution
|
||||
// 调转换成png的接口
|
||||
@ -2220,14 +2370,15 @@ const disposeEventPoint = (x, y) => {
|
||||
}
|
||||
}
|
||||
// 传入实际现场的数据，转换成浏览器坐标的数据
|
||||
const convertActualToBrowser = (x, y) => {
|
||||
let browserX = Math.max(Number(x) - imgBgObj.origin[0], 0)
|
||||
let browserY = Math.max(
|
||||
imgBgObj.origin[1] + Number(imgBgObj.height) * imgBgObj.resolution - Number(y),
|
||||
0
|
||||
)
|
||||
const convertActualToBrowser = (pointX, pointY) => {
|
||||
const y1 = Number(imgBgObj.origin[1]) + Number(imgBgObj.height) * Number(imgBgObj.resolution)
|
||||
let x = Math.max(Number(pointX) - Number(imgBgObj.origin[0]), 0)
|
||||
let y = Math.max(y1 - Number(pointY), 0)
|
||||
|
||||
console.log(browserX, browserY)
|
||||
return {
|
||||
x,
|
||||
y
|
||||
}
|
||||
}
|
||||
//将节点实际宽高cm转换成px
|
||||
const cmConversionPx = (cWidth, cHeight) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user