地图

src/api/map/map.ts

@@ -53,8 +53,11 @@ export const getPositionMapLineList = async (params) => {
   return await request.get({ url: `/system/position-map-line/list`, params })
 }
 //批量新增编辑删除节点
-export const batchSaveOrEditOrDelMapItem = async (data) => {
+export const batchSaveOrEditOrDelMapItem = async (positionMapId, data) => {
-  return await request.post({ url: `/system/position-map-item/batchSaveOrEditOrDel`, data })
+  return await request.post({
+    url: `/system/position-map-item/batchSaveOrEditOrDel?positionMapId=${positionMapId}`,
+    data
+  })
 }
 //导出仓库点位地图子表 Excel
 export const exportPositionMapItemExcel = async (params) => {
@@ -68,3 +71,7 @@ export const getPositionMapItem = async (params) => {
 export const getPositionMapItemList = async (params) => {
   return await request.get({ url: `/system/position-map-item/list`, params })
 }
+//获得设备信息列表
+export const getDeviceInformationList = async (params) => {
+  return await request.get({ url: `/system/device/information/list`, params })
+}

src/utils/dict.ts

@@ -243,5 +243,6 @@ export enum DICT_TYPE {
 
   // ========== wcs 地图  ==========
   ROBOT_TASK_STATUS = 'robot_task_status', //机器人的任务状态
-  ROBOT_QUEST_PHASES = 'robot_quest_phases' //机器人的任务阶段
+  ROBOT_QUEST_PHASES = 'robot_quest_phases', //机器人的任务阶段
+  DEVICE_TYPE = 'device_type'
 }

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

@@ -0,0 +1,214 @@
+<template>
+  <el-dialog v-model="dialogFormVisible" title="节点属性" width="540">
+    <el-form :model="form" label-width="75">
+      <el-form-item label="X" prop="locationX" required>
+        <el-input v-model="form.locationX" placeholder="请输入" />
+      </el-form-item>
+      <el-form-item label="Y" prop="locationY" required>
+        <el-input v-model="form.locationY" placeholder="请输入" />
+      </el-form-item>
+      <el-form-item label="类型" prop="type" required>
+        <el-select v-model="form.type" placeholder="请选择类型" @change="typeChange">
+          <el-option label="路径点位" :value="1" />
+          <el-option label="库位点" :value="2" />
+          <el-option label="设备点" :value="3" />
+          <el-option label="停车点" :value="4" />
+          <el-option label="区域变更点" :value="5" />
+          <el-option label="等待点" :value="6" />
+        </el-select>
+      </el-form-item>
+      <div v-if="form.type !== 1 && form.type !== 6">
+        <el-form-item label="层数" prop="layersNumber" required v-if="form.type === 2">
+          <el-input-number v-model="form.layersNumber" :min="1" :max="3" />
+        </el-form-item>
+        <el-form-item label="编号" prop="id" required v-if="form.type === 3">
+          <div>
+            <el-select
+              v-model="deviceInfo.deviceType"
+              class="!w-160px"
+              clearable
+              placeholder="请选择设备类型"
+              @change="deviceTypeChange()"
+            >
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.DEVICE_TYPE)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+
+            <el-select
+              v-model="form.id"
+              class="!w-160px ml-4"
+              clearable
+              placeholder="请选择设备编号"
+            >
+              <el-option
+                v-for="item in deviceList"
+                :key="item.id"
+                :label="item.deviceNo"
+                :value="item.id"
+              />
+            </el-select>
+          </div>
+        </el-form-item>
+        <el-form-item label="库位长度" prop="length">
+          <div style="display: flex">
+            <el-input v-model="form.length" placeholder="请输入" />
+            <span class="ml-2">cm</span>
+          </div>
+        </el-form-item>
+        <el-form-item label="库位宽度" prop="width">
+          <div style="display: flex">
+            <el-input v-model="form.width" placeholder="请输入" />
+            <span class="ml-2">cm</span>
+          </div>
+        </el-form-item>
+        <el-form-item label="库位方向" prop="direction">
+          <el-select
+            v-model="form.direction"
+            placeholder="请选择库位方向"
+            @change="directionChange"
+          >
+            <el-option label="单向" :value="1" />
+            <el-option label="双向" :value="2" />
+            <el-option label="三向" :value="3" />
+            <el-option label="四向" :value="4" />
+          </el-select>
+        </el-form-item>
+        <div v-if="form.direction !== 1">
+          <el-form-item label="进入方向" prop="inDirection">
+            <el-select v-model="form.inDirection" placeholder="请选择进入方向">
+              <el-option label="尾入" :value="0" />
+              <el-option label="头入" :value="1" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="离开方向" prop="outDirection">
+            <el-select v-model="form.outDirection" placeholder="请选择离开方向">
+              <el-option label="尾出" :value="0" />
+              <el-option label="头出" :value="1" />
+            </el-select>
+          </el-form-item>
+        </div>
+      </div>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="submit"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as MapApi from '@/api/map/map'
+
+const dialogFormVisible = ref(false)
+const message = useMessage() // 消息弹窗
+
+const props = defineProps({
+  positionMapId: {
+    type: String,
+    default: () => ''
+  }
+})
+
+const form = ref({
+  locationX: undefined,
+  locationY: undefined,
+  type: 1,
+  layersNumber: 1, //层数
+  length: undefined, //长度
+  width: undefined, //宽度
+  direction: 1, //方向
+  inDirection: undefined,
+  outDirection: undefined,
+  list: []
+})
+
+const rules = reactive({
+  locationX: [{ required: true, message: '请输入X', trigger: 'blur' }],
+  locationY: [{ required: true, message: '请输入Y', trigger: 'blur' }],
+  type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
+  direction: [{ required: true, message: '请输入层数', trigger: 'blur' }],
+  id: [{ required: true, message: '请选择设备编号', trigger: 'blur' }]
+})
+
+const emit = defineEmits(['submitNodeSuccess'])
+const submit = () => {
+  if (form.value.type === 1 || form.value.type === 6) {
+    form.value.dataJson = ''
+  } else if (form.value.type === 2) {
+    //在这边把数据处理好
+    let list = []
+    for (let index = 0; index < form.value.layersNumber; index++) {
+      list.push({
+        locationWide: form.value.width || undefined,
+        locationDeep: form.value.length || undefined,
+        direction: form.value.direction || undefined, //方向
+        inDirection: form.value.inDirection || undefined, //进入方向
+        outDirection: form.value.outDirection || undefined, //离开方向
+        locationStorey: index + 1 //层数
+      })
+    }
+    form.value.dataJson = JSON.stringify(list)
+  } else {
+    let obj = {
+      id: form.value.id || undefined,
+      mapId: props.positionMapId,
+      locationWide: form.value.width || undefined,
+      locationDeep: form.value.length || undefined,
+      direction: form.value.direction || undefined, //方向
+      inDirection: form.value.inDirection || undefined, //进入方向
+      outDirection: form.value.outDirection || undefined //离开方向
+    }
+    form.value.dataJson = JSON.stringify(obj)
+  }
+  console.log(form.value, '保存')
+  emit('submitNodeSuccess', form.value)
+  dialogFormVisible.value = false
+}
+
+const open = (item) => {
+  form.value = item
+  form.value.locationX = item.x
+  form.value.locationY = item.y
+  form.value.type = item.type || 1
+  dialogFormVisible.value = true
+}
+
+//类型改变
+const typeChange = () => {
+  if (form.value.type === 1 || form.value.type === 6) {
+    form.value.layersNumber = undefined
+    form.value.dataJson = ''
+  } else {
+  }
+}
+//方向改变
+const directionChange = (e) => {
+  if (e === 1) {
+    form.value.inDirection = undefined
+    form.value.outDirection = undefined
+  }
+}
+
+//获取设备信息
+const deviceInfo = ref({
+  positionMapId: props.positionMapId,
+  deviceType: ''
+})
+const deviceList = ref([])
+const getDeviceList = async () => {
+  deviceList.value = await MapApi.getDeviceInformationList(deviceInfo.value)
+}
+const deviceTypeChange = () => {
+  getDeviceList()
+}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>

src/views/mapPage/realTimeMap/editMap.vue

@@ -2,14 +2,18 @@
   <div>
     <ContentWrap>
       <div>
-        <span @click="backPreviousStep">撤销</span>
+        <el-button type="primary" @click="saveMap" :disabled="formLoading"> 保存 </el-button>
-        <span @click="backNextStep">重做</span>
+        <el-button type="primary" @click="backPreviousStep" :disabled="formLoading">
+          撤销
+        </el-button>
+        <el-button type="primary" @click="backNextStep" :disabled="formLoading"> 重做 </el-button>
+        <el-button type="primary" @click="drawNodes" :disabled="formLoading"> 绘制节点 </el-button>
       </div>
     </ContentWrap>
     <div class="map-box" ref="imgWrap" @mousewheel.prevent="rollImg" style="overflow: hidden">
       <div class="map-box-inner" ref="image" @mousedown.prevent="moveImg">
-        <img :src="imgUrl" class="map-box-img" id="mapBg" />
+        <img :src="imgBgObj.imgUrl" class="map-box-img" id="mapBg" />
-        <div class="map-box-inner-dot">
+        <div class="map-box-inner-dot" @click="mapClick">
           <VueDragResizeRotate
             v-for="(item, index) in allHistoryList[currentIndex]"
             :key="index"
@@ -30,26 +34,49 @@
             :lockAspectRatio="item.lockAspectRatio"
           >
             <div class="sdiv">
-              <img :src="item.img" alt="" style="width: 100%; height: 100%" />
+              <img
+                v-if="item.labelType === 'icon'"
+                :src="item.img"
+                alt=""
+                style="width: 100%; height: 100%"
+              />
+              <div
+                v-if="item.labelType === 'node'"
+                style="width: 100%; height: 100%; background-color: #000; border-radius: 50%"
+              ></div>
             </div>
           </VueDragResizeRotate>
           <!-- 文档 https://github.com/a7650/vue3-draggable-resizable/blob/main/docs/document_zh.md#resizable -->
         </div>
       </div>
     </div>
+
+    <editNodeProperties
+      ref="editNodePropertiesRef"
+      :positionMapId="imgBgObj.positionMapId"
+      @submitNodeSuccess="submitNodeSuccess"
+    />
   </div>
 </template>
 
 <script setup>
 import { ref, defineComponent, reactive, nextTick, onMounted } from 'vue'
+import editNodeProperties from './components/editNodeProperties.vue'
 import * as MapApi from '@/api/map/map'
 
 defineOptions({ name: 'editMapPageRealTimeMap' })
+
 const message = useMessage() // 消息弹窗
+const formLoading = ref(false)
+
 const allHistoryList = ref([]) //全部的历史记录
-const currentIndex = ref(0)
+const currentIndex = ref(0) //用于记录是哪条历史记录的
-const imgUrl = ref('') //地图背景
+const currentItemIndex = ref(0) //用于记录是在编辑那个具体的节点、图标等
-const imgList = [] //所有的图标的列表
+const imgBgObj = reactive({
+  imgUrl: '',
+  positionMapId: ''
+}) //地图背景
+const imgList = ref([]) //所有的图标的列表
 
 const list = ref([])
 //获取地图点位
@@ -78,34 +105,42 @@ const getMapData = async (item) => {
   })
 
   let base64Url = 'data:image/png;base64,'
-  imgUrl.value = data
+  imgBgObj.imgUrl = data
+  imgBgObj.positionMapId = item.id
 }
 
 // 缩放停止
 const resizeEnd = (x, y, w, h, item, index) => {
   console.log('缩放')
-  item.x = x
+  imgList.value[index].x = x
-  item.y = y
+  imgList.value[index].y = y
-  item.w = w
+  imgList.value[index].w = w
-  item.h = h
+  imgList.value[index].h = h
   addEditHistory()
 }
 // 拖拽停止
-const dragEnd = (x, y, item, i) => {
+const dragEnd = (x, y, item, index) => {
   console.log('拖拽')
   if (x === item.x && y === item.y) return
-  item.x = x
+  imgList.value[index].x = x
-  item.y = y
+  imgList.value[index].y = y
   addEditHistory()
 }
 // 旋转
-const rotateEnd = (degree, item, i) => {
+const rotateEnd = (angle, item, index) => {
   console.log('旋转')
+  imgList.value[index].angle = angle
   addEditHistory()
 }
+
 //选中
-const activatedHandle = (item, i) => {
+const editNodePropertiesRef = ref()
+const activatedHandle = (item, index) => {
   console.log('选中', item)
+  currentItemIndex.value = index
+  if (item.labelType === 'node') {
+    editNodePropertiesRef.value.open(item)
+  }
 }
 //非选中
 const deactivatedHandle = () => {
@@ -114,8 +149,15 @@ const deactivatedHandle = () => {
 
 //添加历史记录
 const addEditHistory = () => {
-  currentIndex.value++
+  //要判断是不是在最新的记录上修改 如果不是 要把currentIndex之后的记录都删掉 保持当前修改是最新的
-  allHistoryList.value.push(imgList.value)
+  if (currentIndex.value !== allHistoryList.value.length - 1) {
+    allHistoryList.value = allHistoryList.value.splice(0, currentIndex.value)
+    currentIndex.value++
+    allHistoryList.value.push(JSON.parse(JSON.stringify(imgList.value)))
+  } else {
+    currentIndex.value++
+    allHistoryList.value.push(JSON.parse(JSON.stringify(imgList.value)))
+  }
   console.log(allHistoryList.value, 'allHistoryList')
 }
 
@@ -137,6 +179,72 @@ const backNextStep = () => {
     message.warning('没了老铁')
   }
 }
+//绘制节点
+const toolTypeIndex = ref(0)
+const cursorType = ref('')
+const drawNodes = () => {
+  if (toolTypeIndex.value === 1) {
+    toolTypeIndex.value = 0
+  } else {
+    toolTypeIndex.value = 1
+  }
+}
+//地图点击
+const mapClick = (e) => {
+  if (toolTypeIndex.value === 1) {
+    //绘制节点
+    imgList.value.push({
+      x: e.offsetX,
+      y: e.offsetY,
+      h: 16,
+      w: 16,
+      angle: 0,
+      draggable: false,
+      resizable: false,
+      rotatable: false,
+      img: '',
+      labelType: 'node'
+    })
+    console.log(imgList.value)
+    currentIndex.value++
+    allHistoryList.value.push(JSON.parse(JSON.stringify(imgList.value)))
+  }
+}
+//保存地图
+const saveMap = async () => {
+  //节点的保存
+  await saveNodeList()
+}
+//节点的保存
+const saveNodeList = async () => {
+  formLoading.value = true
+
+  let list = allHistoryList.value[currentIndex.value].filter((item) => {
+    return item.labelType === 'node'
+  })
+
+  list.forEach((item, index) => {
+    item.locationX = item.locationX || item.x
+    item.locationY = item.locationY || item.y
+    item.type = item.type || 1
+    if (item.type === 1) {
+      item.dataJson = ''
+    } else {
+      item.dataJson = item.dataJson
+    }
+  })
+
+  try {
+    await MapApi.batchSaveOrEditOrDelMapItem(imgBgObj.positionMapId, list)
+    message.success('创建成功')
+  } finally {
+    formLoading.value = false
+  }
+}
+//编辑节点成功
+const submitNodeSuccess = (item) => {
+  allHistoryList.value[currentIndex.value][currentItemIndex.value] = item
+}
 
 onMounted(() => {
   imgList.value = [
@@ -149,7 +257,8 @@ onMounted(() => {
       draggable: true,
       resizable: true,
       rotatable: true,
-      img: 'https://sys.znkjfw.com/imgs/process/%E8%AF%B7%E5%81%87.png'
+      img: 'https://sys.znkjfw.com/imgs/process/%E8%AF%B7%E5%81%87.png',
+      labelType: 'icon'
     },
     {
       x: 454.4,
@@ -160,10 +269,11 @@ onMounted(() => {
       draggable: true,
       resizable: true,
       rotatable: true,
-      img: 'https://sys.znkjfw.com/imgs/process/%E8%AF%B7%E5%81%87.png'
+      img: 'https://sys.znkjfw.com/imgs/process/%E8%AF%B7%E5%81%87.png',
+      labelType: 'icon'
     }
   ]
-  allHistoryList.value[0] = imgList.value
+  allHistoryList.value[0] = JSON.parse(JSON.stringify(imgList.value))
 
   getList()
 })
@@ -176,6 +286,7 @@ onMounted(() => {
   .map-box-inner {
     position: relative;
     width: 100%;
+
     .map-box-img {
       width: 100%;
       height: auto;
@@ -186,6 +297,11 @@ onMounted(() => {
       left: 0;
       top: 0;
       bottom: 0;
+      background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
+        linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+      background-size:
+        20px 20px,
+        20px 20px;
     }
   }
 }