编辑地图

src/views/mapPage/realTimeMap/components/indexPage.vue

@@ -34,19 +34,17 @@
                           :y1="Number(item.startPointY) * radio"
                           :x2="Number(item.endPointX) * radio"
                           :y2="Number(item.endPointY) * radio"
-                          stroke="#2d72d9"
+                          :stroke="item.isSelect ? '#f48924' : '#2d72d9'"
                           :stroke-width="4 * radio"
-                          @click="handleChooseRoute(item, index)"
                         />
                       </template>
                       <!-- 曲线 -->
                       <template v-else>
                         <path
                           :d="getCurvePath(item)"
-                          stroke="#2d72d9"
+                          :stroke="item.isSelect ? '#f48924' : '#2d72d9'"
                           :stroke-width="4 * radio"
                           fill="none"
-                          @click="handleChooseRoute(item, index)"
                         />
                       </template>
                     </template>
@@ -54,11 +52,14 @@
                 </div>
               </div>
               <!-- 小车 -->
+
               <div
                 v-for="(item, index) in testCarList"
                 :key="index"
                 @dblclick="carDbClick(item, index)"
               >
+                <el-popover placement="bottom">
+                  <template #reference>
                     <div
                       class="indexpage-car-item"
                       v-if="legendObj.carShow"
@@ -73,7 +74,7 @@
                     >
                       <div
                         style="
-                      font-size: 0.6rem;
+                          font-size: 15px;
                           position: absolute;
                           top: 50%;
                           left: 40%;
@@ -88,6 +89,9 @@
                         style="width: 100%; height: 100%"
                       />
                     </div>
+                  </template>
+                  <div class="popover-robot-no">{{ item.robotNo }}</div>
+                </el-popover>
               </div>
               <div
                 class="indexpage-container-box-point-item"
@@ -386,8 +390,8 @@ const emit = defineEmits(['transmitMapId'])
 const storeDialogRef = ref(null) // 仓库信息弹窗
 const list = ref([])
 const testCarList = ref([]) //小车数组
-const carWidth = ref(200)
+const carWidth = ref(226)
-const carHeight = ref(100)
+const carHeight = ref(124)
 
 // 定义属性
 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) => {
   let startPointX = Number(curve.startPointX) * radio.value
@@ -677,8 +658,6 @@ const storeClick = async (item) => {
   })
   storeDialogRef.value.open(JSON.parse(JSON.stringify(storeData)))
 }
-const lineList = ref([])
-const pointList = ref([])
 
 //将节点实际宽高cm转换成px
 const cmConversionPx = (cWidth, cHeight) => {
@@ -810,8 +789,8 @@ const linkWebSocket = (url) => {
       if (jsonMsg.type == 'planning_move_pose') {
         let data = JSON.parse(jsonMsg.content)
         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;
   font-weight: 600;
 }
+
+.popover-robot-no {
+  font-size: 15px;
+  text-align: center;
+  color: #000;
+  font-weight: 600;
+}
 </style>

src/views/mapPage/realTimeMap/index.vue

@@ -19,8 +19,6 @@
     </div>
 
     <div class="main-content">
-      <!-- <div @click="downAgv">导出zip</div> -->
-      <!-- 首页 -->
       <indexPage ref="indexPageRef" :isFullScreen="false" />
     </div>
 
@@ -52,79 +50,25 @@ const list = ref([])
 const indexPageRef = ref(null)
 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 () => {
   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) {
-    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) {
@@ -136,8 +80,9 @@ const getList = async () => {
 
   await getStopOrRestore()
 }
+
 const handleChangeMap = async (e) => {
-  let item = findChildrenByValues(list.value, e)
+  let item = findItemById(e[1])
   indexPageRef.value.getMapData(item)
   router.replace({
     name: 'MapPageRealTimeMap',
@@ -146,6 +91,7 @@ const handleChangeMap = async (e) => {
     }
   })
 }
+
 //新建任务
 const createTaskDialogRef = ref()
 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
 }
 

src/views/mapPage/realTimeMap/格式.md

@@ -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 不传数据
-
-
-```