编辑地图

2025-05-30 16:05:21 +08:00 · 2025-05-30 16:05:21 +08:00 · 64213fedce
commit 64213fedce
parent 75974a15bd
3 changed files with 75 additions and 233 deletions
--- a/src/views/mapPage/realTimeMap/components/indexPage.vue
+++ b/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,40 +52,46 @@
                </div>
              </div>
              <!-- 小车 -->
+
              <div
                v-for="(item, index) in testCarList"
                :key="index"
                @dblclick="carDbClick(item, index)"
              >
-                <div
-                  class="indexpage-car-item"
-                  v-if="legendObj.carShow"
-                  :style="{
-                    left: item.realX * radio + 'px',
-                    top: item.realY * radio + 'px',
-                    width: (carWidth / imgBgObj.resolution / 100) * radio + 'px',
-                    height: (carHeight / imgBgObj.resolution / 100) * radio + 'px',
-                    transform: 'rotate(' + radianToDegree(item.data.pose2d.yaw) + 'deg)',
-                    zIndex: 9999
-                  }"
-                >
-                  <div
-                    style="
-                      font-size: 0.6rem;
-                      position: absolute;
-                      top: 50%;
-                      left: 40%;
-                      transform: translateX(-50%) translateY(-50%);
-                      color: greenyellow;
-                    "
-                  >
-                    {{ item.robotNo || '' }}
-                  </div>
-                  <img
-                    src="@/assets/imgs/indexPage/chache-4备份 7@2x.png"
-                    style="width: 100%; height: 100%"
-                  />
-                </div>
+                <el-popover placement="bottom">
+                  <template #reference>
+                    <div
+                      class="indexpage-car-item"
+                      v-if="legendObj.carShow"
+                      :style="{
+                        left: item.realX * radio + 'px',
+                        top: item.realY * radio + 'px',
+                        width: (carWidth / imgBgObj.resolution / 100) * radio + 'px',
+                        height: (carHeight / imgBgObj.resolution / 100) * radio + 'px',
+                        transform: 'rotate(' + radianToDegree(item.data.pose2d.yaw) + 'deg)',
+                        zIndex: 9999
+                      }"
+                    >
+                      <div
+                        style="
+                          font-size: 15px;
+                          position: absolute;
+                          top: 50%;
+                          left: 40%;
+                          transform: translateX(-50%) translateY(-50%);
+                          color: greenyellow;
+                        "
+                      >
+                        {{ item.robotNo || '' }}
+                      </div>
+                      <img
+                        src="@/assets/imgs/indexPage/chache-4备份 7@2x.png"
+                        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 carHeight = ref(100)
+const carWidth = ref(226)
+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) {
-          lineList.value = setIsSelect(lineList.value, dataList)
+        if (state.mapRouteList.length > 0) {
+          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>
--- a/src/views/mapPage/realTimeMap/index.vue
+++ b/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 = []
-  for (let key in data) {
-    mapList.push({
-      floor: key,
-      label: key + '层',
-      value: key,
-      children: data[key]
-    })
-  }
-  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
+  list.value = Object.entries(data).map(([floor, areas]) => ({
+    label: `${floor}层`,
+    floor: `${floor}`,
+    value: `${floor}`,
+    children: areas.map((area) => ({
+      ...area,
+      value: String(area.id),
+      label: area.area
+    }))
+  }))

  if (query.mapId) {
-    let item = findDataById(data, Number(query.mapId))
-    mapValue.value = [String(item.floor), Number(item.id)]
+    let item = findItemById(query.mapId)
+    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) => {
-  // 遍历 obj 的每一层
-  for (const floor in obj) {
-    // 遍历当前楼层的每个区域
-    for (const item of obj[floor]) {
-      // 如果找到匹配的 id，返回该数据
-      if (item.id === id) {
-        return item
+//按id寻找
+function findItemById(targetId) {
+  for (const floorItem of list.value) {
+    if (floorItem.children && Array.isArray(floorItem.children)) {
+      const foundItem = floorItem.children.find((item) => item.id == targetId)
+
+      if (foundItem) {
+        return foundItem
      }
    }
  }
-  // 如果没有找到，返回 null
+
+  // 遍历完所有项未找到则返回null
  return null
 }

--- a/src/views/mapPage/realTimeMap/格式.md
+++ b/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 不传数据
-
-
-```