传递参数给实时地图

src/api/map/map.ts

@@ -29,8 +29,8 @@ export const downloadPositionMap = async (params) => {
   return await request.get({ url: `/system/position-map/download`, params })
 }
 //获得仓库点位地图
-export const getPositionMap = async (params) => {
-  return await request.get({ url: `/system/position-map/get`, params })
+export const getPositionMap = async (id) => {
+  return await request.get({ url: `/system/position-map/get?id=` + id })
 }
 // 文件上传
 export const uploadPositionMap = async (data) => {
@@ -135,4 +135,4 @@ export const mapLineGet = async (params) => {
 //通过地图id获取连线列表
 export const mapLineListGet = async (params) => {
   return await request.get({ url: `/system/position-map-line/list`, params })
-}
+}

src/views/mapPage/realTimeMap/editMap.vue

@@ -1993,20 +1993,25 @@ const imgBgObj = reactive({
   height: '',
   floor: '',
   area: '',
-  resolution: 0.05,
-  origin: [-54.4, -34.2]
+  resolution: 0,
+  origin: null
 })
 //接收参数
 const { query } = useRoute() // 查询参数
 //获取地图点位
 const getMapList = async () => {
-  if (query.mapId) {
-    imgBgObj.positionMapId = query.mapId
-    imgBgObj.floor = query.floor
-    imgBgObj.area = query.area
-    //调转换成png的接口
-    getMapData(imgBgObj)
-  }
+  if (!query.mapId) return
+  let res = await MapApi.getPositionMap(query.mapId)
+  let yamlJson = JSON.parse(res.yamlJson)
+  imgBgObj.positionMapId = res.id
+  imgBgObj.floor = res.floor
+  imgBgObj.area = res.area
+  imgBgObj.width = yamlJson.width
+  imgBgObj.height = yamlJson.height
+  imgBgObj.origin = yamlJson.origin
+  imgBgObj.resolution = yamlJson.resolution
+  // //调转换成png的接口
+  getMapData(imgBgObj)
 }
 //调转换成png的接口
 const getMapData = async (mapInfo) => {
@@ -2016,20 +2021,9 @@ const getMapData = async (mapInfo) => {
   })
   imgBgObj.imgUrl = data
 
-  //获取一下图片的宽高
-  const img = new Image()
-  img.src = imgBgObj.imgUrl
-  //加载图片成功
-  img.onload = () => {
-    imgBgObj.width = img.naturalWidth
-    imgBgObj.height = img.naturalHeight
-    getAllNodeList()
-    getAllMapRoute()
-  }
-  //加载图片失败
-  img.onerror = () => {
-    console.error('图片加载失败')
-  }
+  //获取节点 路径等信息
+  getAllNodeList()
+  getAllMapRoute()
 }
 //获取所有的点位 处理七种类型的
 const getAllNodeList = async () => {
@@ -2306,6 +2300,20 @@ const removeEventListener = () => {
   window.removeEventListener('keydown', handleKeyDown)
 }
 
+const router = useRouter()
+onBeforeRouteLeave((to, from) => {
+  if (to.fullPath == '/mapPage/realTimeMap') {
+    router.replace({
+      name: 'MapPageRealTimeMap',
+      query: {
+        floor: imgBgObj.floor,
+        area: imgBgObj.area,
+        mapId: imgBgObj.positionMapId
+      }
+    })
+  }
+})
+
 onMounted(() => {
   getMapList()
   window.addEventListener('keydown', handleKeyDown)

src/views/mapPage/realTimeMap/index.vue

@@ -112,7 +112,6 @@ const getList = async () => {
   }
 
   list.value = mapList
-  console.log(list.value, data)
   if (mapValue.value.length) {
     handleChangeMap(mapValue.value)
   } else {
@@ -135,7 +134,6 @@ const handleChangeMap = async (e) => {
         floor: '',
         area: ''
       }
-  console.log(mapInfo.value)
   indexPageRef.value.getMapData(mapInfo.value)
 }
 //新建任务
@@ -163,9 +161,7 @@ const editMap = () => {
   router.push({
     name: 'editMapPageRealTimeMap',
     query: {
-      mapId: mapInfo.value.id,
-      floor: mapInfo.value.floor,
-      area: mapInfo.value.area
+      mapId: mapInfo.value.id
     }
   })
 }
@@ -176,14 +172,12 @@ const mapInfo = ref({
   floor: '',
   area: ''
 })
-// const transmitMapInfo = (map) => {
-//   mapInfo.value = map
-// }
 
 onMounted(() => {
-  if (route.query.floorArea) {
-    console.log(route.query.floorArea, route)
-    mapValue.value = JSON.parse(route.query.floorArea)
+  if (route.query.mapId) {
+    mapInfo.value.mapId = route.query.mapId
+    mapInfo.value.floor = route.query.floor
+    mapInfo.value.area = route.query.area
   }
   getList()
 })