+
@@ -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',
@@ -673,7 +704,16 @@ const mapBackgroundRef = ref()
const inputBoxRef = ref() //文字输入框
const message = useMessage() // 消息弹窗
-const emit = defineEmits(['backMapInfo'])
+
+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,112 @@ 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)
+ if (res) {
+ 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 {
+ message.warning('未采集到该AGV点位信息')
+ }
+ } 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) => {
@@ -2044,6 +2196,7 @@ const getAllNodeList = async () => {
let list = await MapApi.getPositionMapItemList({
positionMapId: imgBgObj.positionMapId
})
+ console.log(imgBgObj.width)
state.allMapPointInfo = []
state.currentIndex = 0
list.forEach((item) => {
@@ -2220,14 +2373,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) => {
@@ -2327,13 +2481,12 @@ const removeEventListener = () => {
const router = useRouter()
onBeforeRouteLeave((to, from) => {
if (to.path == '/mapPage/realTimeMap' && to.query.mapId != imgBgObj.positionMapId) {
- // router.replace({
- // name: 'MapPageRealTimeMap',
- // query: {
- // mapId: imgBgObj.positionMapId
- // }
- // })
- emit('backMapInfo', imgBgObj.positionMapId)
+ router.replace({
+ name: 'MapPageRealTimeMap',
+ query: {
+ mapId: imgBgObj.positionMapId
+ }
+ })
}
})
diff --git a/src/views/mapPage/realTimeMap/index.vue b/src/views/mapPage/realTimeMap/index.vue
index e98aa5ea..130461b7 100644
--- a/src/views/mapPage/realTimeMap/index.vue
+++ b/src/views/mapPage/realTimeMap/index.vue
@@ -23,7 +23,7 @@
+
+ 
+
+ 
+
+ 
+