Merge branch 'xhf' of http://git.znkjfw.com/ak/zn-admin-vue3-wcs into xhf

# Conflicts: # src/views/mapPage/realTimeMap/editMap.vue 修改问题
2025-03-06 10:42:40 +08:00 · 2025-03-06 10:42:40 +08:00 · d5df1639ab
commit d5df1639ab
parent 446b359632 85aa1503c1
4 changed files with 2750 additions and 66 deletions
--- a/src/api/map/map.ts
+++ b/src/api/map/map.ts
@ -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
+  })
+}
--- a/src/views/mapPage/example/editMap.vue
+++ b/src/views/mapPage/example/editMap.vue
--- a/src/views/mapPage/realTimeMap/editMap.vue
+++ b/src/views/mapPage/realTimeMap/editMap.vue
@ -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"
@ -269,7 +325,7 @@
            style="border: none; z-index: 999"
          >
            <!-- 节点合集 -->
-            <div @mousedown="startFromPoint(index, $event)">
+            <div @mousedown="startFromPoint(index, $event)" :style="nodeStyle(item, index)">
              <!-- 1 路径点 -->
              <el-tooltip
                class="box-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',
@ -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
+      }
+    })
  }
 })

--- a/src/views/mapPage/realTimeMap/index.vue
+++ b/src/views/mapPage/realTimeMap/index.vue
@ -23,7 +23,7 @@
  </div>

  <!-- 新建任务的弹窗 -->
-  <createTaskDialog v-if="mapValue.length" ref="createTaskDialogRef" @backMapInfo="backMapInfo" :positionMapId="mapValue[1]" />
+  <createTaskDialog v-if="mapValue.length" ref="createTaskDialogRef" :positionMapId="mapValue[1]" />
 </template>

 <script setup>
@ -33,7 +33,7 @@ import { ref, defineComponent, reactive, nextTick, onMounted } from 'vue'
 import * as MapApi from '@/api/map/map'
 import download from '@/utils/download'
 import { ElMessage, ElMessageBox } from 'element-plus'
-const mapId = ref(null)
+
 const message = useMessage() // 消息弹窗
 const route = useRoute()
 const { push } = useRouter()
@ -87,9 +87,7 @@ const findChildrenByValues = (tree, values) => {
  }
  return null
 }
-const backMapInfo = (id) => {
-  mapId.value = id
-}
+
 //获取地图区域
 const getList = async () => {
  let data = await MapApi.getPositionMapGetMap()
@ -115,14 +113,11 @@ const getList = async () => {

  list.value = mapList

-  // if (query.mapId) {
-  //   let item = findDataById(data, Number(query.mapId))
-  //   mapValue.value = [String(item.floor), Number(item.id)]
-  // }
-  if (mapId.value) {
-    let item = findDataById(data, Number(mapId.value))
+  if (query.mapId) {
+    let item = findDataById(data, Number(query.mapId))
    mapValue.value = [String(item.floor), Number(item.id)]
  }
+
  if (mapValue.value.length) {
    handleChangeMap(mapValue.value)
  } else {
@ -133,6 +128,13 @@ const getList = async () => {
 const handleChangeMap = async (e) => {
  let item = findChildrenByValues(list.value, e)
  indexPageRef.value.getMapData(item)
+  console.log(item)
+  router.replace({
+      name: 'MapPageRealTimeMap',
+      query: {
+        mapId: item.id
+      }
+    })
 }
 //新建任务
 const createTaskDialogRef = ref()