地图编辑

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

@@ -25,7 +25,12 @@
           required
           v-if="form.type === 2"
         >
-          <el-input-number v-model="form.layersNumber" :min="1" :max="3" />
+          <el-input-number
+            v-model="form.layersNumber"
+            :min="1"
+            :max="3"
+            @change="layersNumberChange"
+          />
         </el-form-item>
         <el-form-item
           label="编号"
@@ -77,6 +82,7 @@
             <span class="ml-2">cm</span>
           </div>
         </el-form-item>
+        <div v-if="form.type === 2 || form.type === 4">
           <el-form-item label="库位方向" prop="direction">
             <el-select
               v-model="form.direction"
@@ -104,6 +110,7 @@
             </el-form-item>
           </div>
         </div>
+      </div>
     </el-form>
     <template #footer>
       <div class="dialog-footer">
@@ -164,20 +171,17 @@ const submit = async (formEl) => {
       form.value.dataJson = ''
     } else if (form.value.type === 2) {
       //库位点 类型为数组
+
+      let list = []
       for (let index = 0; index < form.value.layersNumber; index++) {
         if (
           form.value.dataList.length > 0 &&
           form.value.dataList[index] &&
-          form.value.dataList[index].laneId
+          form.value.dataList[index].id
         ) {
-          form.value.dataList[index].locationWide = form.value.locationWide
+          list.push(form.value.dataList[index])
-          form.value.dataList[index].locationDeep = form.value.locationDeep
-          form.value.dataList[index].direction = form.value.direction //方向
-          form.value.dataList[index].inDirection = form.value.inDirection //进入方向
-          form.value.dataList[index].outDirection = form.value.outDirection //离开方向
-          form.value.dataList[index].locationStorey = index + 1 //层数
         } else {
-          form.value.dataList.push({
+          list.push({
             positionMapId: props.positionMapId,
             locationWide: form.value.locationWide || undefined,
             locationDeep: form.value.locationDeep || undefined,
@@ -188,8 +192,18 @@ const submit = async (formEl) => {
           })
         }
       }
+      form.value.dataList = list
       //dataJson数据
       form.value.dataJson = JSON.stringify(form.value.dataList)
+    } else if (form.value.type === 3) {
+      //设备
+      form.value.dataObj.positionMapId = props.positionMapId
+      form.value.dataObj.locationWide = form.value.locationWide
+      form.value.dataObj.locationDeep = form.value.locationDeep
+      form.value.dataObj.direction = form.value.direction
+      form.value.dataObj.inDirection = form.value.inDirection
+      form.value.dataObj.outDirection = form.value.outDirection
+      form.value.dataObj.deviceType = deviceInfo.value.deviceType //设备类型
     } else {
       //类型为路径点位 区域变更点 等待点 值为对象
       form.value.dataObj.positionMapId = props.positionMapId
@@ -206,9 +220,13 @@ const submit = async (formEl) => {
   })
 }
 
+//层数改变
+const layersNumberChange = (e) => {}
+
 const open = (item) => {
+  console.log(item)
   form.value = item
-  form.value.layersNumber = item.layersNumber || 1 //初始化的时候给个1层
+  form.value.layersNumber = item.dataList.length || ''
   form.value.positionMapId = props.positionMapId
   dialogFormVisible.value = true
 }
@@ -219,6 +237,12 @@ const typeChange = () => {
     form.value.layersNumber = undefined
     form.value.dataJson = ''
   }
+
+  if (form.value.type !== 2 && form.value.type !== 4) {
+    form.value.direction = undefined
+    form.value.inDirection = undefined
+    form.value.outDirection = undefined
+  }
 }
 //方向改变
 const directionChange = (e) => {

src/views/mapPage/realTimeMap/components-tool/layerSelectionToolDialog.vue

@@ -18,23 +18,26 @@
 <script setup>
 import { reactive, ref } from 'vue'
 
+const emit = defineEmits(['layerSelectionSuccess'])
+
 const list = ref([
   {
-    labelType: 'locationPoint',
+    type: 2,
     name: '库位点',
     isShow: true
   },
   {
-    labelType: 'wayPoint',
+    type: 5,
     name: '路径点',
     isShow: true
   },
   {
-    labelType: 'devicePoint',
+    type: 3,
     name: '设备点',
     isShow: true
   }
 ])
+
 const isUnfold = ref(true)
 
 const changeUnfold = () => {
@@ -42,6 +45,8 @@ const changeUnfold = () => {
 }
 const changeSelectList = (item) => {
   item.isShow = !item.isShow
+  const types = list.value.filter((item) => !item.isShow).map((item) => item.type)
+  emit('layerSelectionSuccess', types)
 }
 
 const open = (item) => {}

src/views/mapPage/realTimeMap/editMap.vue

@@ -130,7 +130,7 @@
       >
         <VueDragResizeRotate
           v-for="(item, index) in allHistoryList[currentIndex]"
-          :key="index"
+          :key="item.locationX"
           :parent="true"
           :x="item.locationX"
           :y="item.locationY"
@@ -150,7 +150,7 @@
         >
           <!-- 1 路径点 -->
           <div
-            v-if="item.type === 1"
+            v-if="item.type === 1 && item.layerSelectionShow"
             :style="{
               width: item.locationWide + 'px',
               height: item.locationDeep + 'px',
@@ -162,7 +162,7 @@
           </div>
           <!-- 2 库位点 -->
           <img
-            v-if="item.type === 2"
+            v-if="item.type === 2 && item.layerSelectionShow"
             src="https://api.znkjfw.com/admin-api/infra/file/4/get/库位库存_png_179_1739326653035.png"
             alt=""
             :style="{
@@ -173,7 +173,7 @@
           />
           <!-- 3 设备点 -->
           <img
-            v-if="item.type === 3"
+            v-if="item.type === 3 && item.layerSelectionShow"
             src="https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png"
             alt=""
             :style="{
@@ -184,7 +184,7 @@
           />
           <!-- 4 停车点 -->
           <img
-            v-if="item.type === 4"
+            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="{
@@ -195,7 +195,7 @@
           />
           <!-- 5 区域变更点 -->
           <img
-            v-if="item.type === 5"
+            v-if="item.type === 5 && item.layerSelectionShow"
             src="https://api.znkjfw.com/admin-api/infra/file/4/get/区域_png_179_1739327151876.png"
             alt=""
             :style="{
@@ -206,7 +206,7 @@
           />
           <!-- 6 等待点 -->
           <img
-            v-if="item.type === 6"
+            v-if="item.type === 6 && item.layerSelectionShow"
             src="https://api.znkjfw.com/admin-api/infra/file/4/get/等待点_png_179_1739326991439.png"
             alt=""
             :style="{
@@ -216,7 +216,7 @@
             }"
           />
           <div
-            v-if="item.type === 7"
+            v-if="item.type === 7 && item.layerSelectionShow"
             :style="{
               color: item.fontColor,
               fontSize: item.fontSize + 'px',
@@ -232,17 +232,18 @@
 
       <!-- 绘制框选区域 -->
       <div
-        v-if="state.drawSelectionArea"
+        v-if="state.drawSelectionAreaSelectedPoints"
         :style="{
           position: 'absolute',
           left: `${state.drawSelectionAreaBox.x}px`,
           top: `${state.drawSelectionAreaBox.y}px`,
           width: `${state.drawSelectionAreaBox.width}px`,
           height: `${state.drawSelectionAreaBox.height}px`,
-          border: '1px solid blue',
+          border: '2px dashed #007bff',
-          backgroundColor: 'rgba(0, 0, 255, 0.1)',
+          backgroundColor: 'rgba(0, 123, 255, 0.1)',
           zIndex: 99999
         }"
+        @click="clickDrawSelectionArea"
       ></div>
       <!-- 文字输入区域 -->
       <input
@@ -276,7 +277,11 @@
     @textFormSuccess="textFormSuccess"
   />
   <!-- 图层选择 -->
-  <layerSelectionToolDialog v-if="state.isShowLayer" ref="layerSelectionToolDialogRef" />
+  <layerSelectionToolDialog
+    v-if="state.isShowLayer"
+    ref="layerSelectionToolDialogRef"
+    @layerSelectionSuccess="layerSelectionSuccess"
+  />
   <!-- 设备弹窗选择 -->
   <equipmentToolDialog ref="equipmentToolDialogRef" :positionMapId="imgBgObj.positionMapId" />
 </template>
@@ -391,6 +396,7 @@ const mapClick = (e) => {
     //绘制节点
     allMapPointInfo.value.push({
       positionMapId: imgBgObj.positionMapId, //地图的id
+      layerSelectionShow: true,
       locationX: e.offsetX,
       locationY: e.offsetY,
       locationDeep: 16,
@@ -449,7 +455,8 @@ const handleInputEnd = () => {
       fontColor: state.inputBoxStyle.fontColor, //文字颜色
       fontFamily: state.inputBoxStyle.fontFamily, //字体类型
       fontSize: state.inputBoxStyle.fontSize,
-      dataObj: {} //存 设备点 停车点 文字
+      dataObj: {}, //存 设备点 停车点 文字
+      layerSelectionShow: true
     })
     addEditHistory()
     state.inputBoxValue = ''
@@ -523,7 +530,7 @@ const state = reactive({
       switchType: 'tools',
       name: '工具',
       icon: 'ep:briefcase',
-      isActive: false
+      isActive: true
     },
     {
       switchType: 'lineLibrary',
@@ -571,7 +578,7 @@ const state = reactive({
       switchType: 'grid',
       name: '网格',
       icon: 'ep:grid',
-      isActive: false
+      isActive: true
     },
     {
       switchType: 'larger',
@@ -624,8 +631,8 @@ const state = reactive({
       isActive: false
     }
   ],
-  isShowToolbar: false, //工具栏展示隐藏
+  isShowToolbar: true, //工具栏展示隐藏
-  isShowGrid: false, //网格展示隐藏
+  isShowGrid: true, //网格展示隐藏
   moveForm: {
     locationX: '',
     locationY: ''
@@ -635,7 +642,7 @@ const state = reactive({
   }, //旋转的表单
   copyMapItem: '', //复制的值
   cursorStyle: 'auto',
-  drawSelectionArea: false, //绘制框选区域
+  drawSelectionAreaShow: false, //绘制框选区域
   drawSelectionAreaBox: { x: 0, y: 0, width: 0, height: 0 }, //绘制区域的位置，长宽
   drawSelectionAreaStartPos: { x: 0, y: 0 }, //开始绘制的点位
   drawSelectionAreaSelectedPoints: [], //绘制选中的list
@@ -654,7 +661,7 @@ const state = reactive({
 const toolbarClick = (item) => {
   let type = item.switchType
   if (
-    currentItemIndex.value &&
+    currentItemIndex.value === -1 &&
     (type === 'move' || type === 'revolve' || type === 'copy' || type === 'delete')
   ) {
     message.warning('请先选择要操作的对象')
@@ -716,13 +723,29 @@ const toolbarClick = (item) => {
       break
     case 'copy':
       //复制
-      state.copyMapItem = allHistoryList.value[currentIndex.value][currentItemIndex.value]
+      let copyMapItem = allHistoryList.value[currentIndex.value][currentItemIndex.value]
+      state.copyMapItem = {
+        positionMapId: copyMapItem.positionMapId,
+        locationX: copyMapItem.locationX,
+        locationY: copyMapItem.locationY,
+        type: copyMapItem.type,
+        dataJson: copyMapItem.dataJson || '',
+        dataObj: copyMapItem.dataObj || {},
+        dataList: copyMapItem.dataList || [],
+        locationDeep: copyMapItem.locationDeep,
+        locationWide: copyMapItem.locationWide,
+        draggable: copyMapItem.draggable,
+        resizable: copyMapItem.resizable,
+        rotatable: copyMapItem.rotatable,
+        lockAspectRatio: copyMapItem.lockAspectRatio
+      }
+      message.success('复制成功')
       break
     case 'paste':
       //粘贴
       let copyObj = JSON.parse(JSON.stringify(state.copyMapItem))
-      copyObj.locationX = copyObj.locationX + 50
+      copyObj.locationX = Number(copyObj.locationX) + 50
-      copyObj.locationY = copyObj.locationY + 50
+      copyObj.locationY = Number(copyObj.locationY) + 50
       allMapPointInfo.value.push(copyObj)
       addEditHistory()
       break
@@ -845,14 +868,14 @@ const rotationFormSubmit = () => {
 //开始框选绘制
 const startDrawSelection = (event) => {
   if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return
-  state.drawSelectionArea = true
+  state.drawSelectionAreaShow = true
   state.drawSelectionAreaStartPos = { x: event.offsetX, y: event.offsetY }
   state.drawSelectionAreaBox = { x: event.offsetX, y: event.offsetY, width: 0, height: 0 }
 }
 
 const updateDrawSelection = (event) => {
   if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return
-  if (state.drawSelectionArea) {
+  if (state.drawSelectionAreaShow) {
     state.drawSelectionAreaBox.width = event.offsetX - state.drawSelectionAreaStartPos.x
     state.drawSelectionAreaBox.height = event.offsetY - state.drawSelectionAreaStartPos.y
   }
@@ -860,8 +883,8 @@ const updateDrawSelection = (event) => {
 //结束框选绘制
 const endDrawSelection = () => {
   if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return
+  state.drawSelectionAreaShow = false
   let points = allHistoryList.value[currentIndex.value]
-  state.drawSelectionArea = false
   state.drawSelectionAreaSelectedPoints = points.filter((point) => {
     return (
       point.locationX >=
@@ -886,7 +909,17 @@ const endDrawSelection = () => {
         )
     )
   })
-  console.log(state.drawSelectionAreaSelectedPoints, '选中的')
+}
+//点击区域
+const clickDrawSelectionArea = () => {
+  if (toolbarSwitchType.value === 'lineLibrary') {
+    //线库
+  }
+  if (toolbarSwitchType.value === 'region') {
+    //区域
+  }
+
+  // console.log(state.drawSelectionAreaSelectedPoints, '选中的')
 }
 
 //获取扫描图  地图背景相关的信息
@@ -938,33 +971,37 @@ const getAllNodeList = async () => {
     positionMapId: imgBgObj.positionMapId
   })
   list.forEach((item) => {
+    item.layerSelectionShow = true //用于图层
+    item.locationX = Number(item.locationX)
+    item.locationY = Number(item.locationY)
+
     if (item.type === 1 || item.type === 5 || item.type === 6) {
       item.dataObj = {}
       item.dataList = []
       item.locationDeep = 16
       item.locationWide = 16
-      item.draggable = true
+      item.draggable = false
       item.resizable = false
       item.rotatable = false
-      item.lockAspectRatio = false
+      item.lockAspectRatio = true
     } else if (item.type === 2) {
       //库位点
       item.dataList = JSON.parse(item.dataJson)
       item.locationDeep = item.dataList[0].locationDeep
       item.locationWide = item.dataList[0].locationWide
-      item.draggable = true
+      item.draggable = false
       item.resizable = false
       item.rotatable = false
-      item.lockAspectRatio = false
+      item.lockAspectRatio = true
     } else if (item.type === 3 || item.type === 4) {
       item.dataObj = JSON.parse(item.dataJson)
       item.dataList = []
       item.locationDeep = item.dataObj.locationDeep
       item.locationWide = item.dataObj.locationWide
-      item.draggable = true
+      item.draggable = false
       item.resizable = false
       item.rotatable = false
-      item.lockAspectRatio = false
+      item.lockAspectRatio = true
     } else if (item.type === 7) {
       item.dataObj = JSON.parse(item.dataJson)
       item.text = item.dataObj.text
@@ -974,8 +1011,8 @@ const getAllNodeList = async () => {
       item.angle = item.dataObj.angle
       item.draggable = true
       item.resizable = false
-      item.rotatable = false
+      item.rotatable = true
-      item.lockAspectRatio = false
+      item.lockAspectRatio = true
     }
     allMapPointInfo.value.push(item)
   })
@@ -1015,6 +1052,18 @@ const saveNodeList = async () => {
   }
 }
 
+//筛选图层
+const layerSelectionSuccess = (typeList) => {
+  allHistoryList.value[currentIndex.value].forEach((item) => {
+    // 如果 type 存在于第一个数组中，则将 layerSelectionShow 设置为 false
+    if (typeList.includes(item.type)) {
+      item.layerSelectionShow = false
+    } else {
+      item.layerSelectionShow = true
+    }
+  })
+}
+
 onMounted(() => {
   getMapList()
 })

src/views/mapPage/realTimeMap/test.vue

@@ -1,180 +1,132 @@
 <template>
-  <div>
+  <div
-    <!-- SVG 画布 -->
+    @mousedown="startSelection"
-    <svg
+    @mousemove="updateSelection"
-      ref="svg"
+    @mouseup="endSelection"
-      width="500"
+    style="position: relative; height: 100vh; border: 1px solid #ccc"
-      height="300"
-      @mousedown="handleMouseDown"
-      @mousemove="handleMouseMove"
-      @mouseup="handleMouseUp"
   >
-      <!-- 绘制所有曲线 -->
+    <!-- 框选区域 -->
-      <path
+    <div
-        v-for="(curve, index) in curves"
+      v-if="isSelecting || selectionBox.width > 0"
-        :key="index"
+      :style="{
-        :d="getCurvePath(curve)"
+        position: 'absolute',
-        stroke="#000"
+        left: `${selectionBox.x}px`,
-        fill="none"
+        top: `${selectionBox.y}px`,
-        stroke-width="2"
+        width: `${selectionBox.width}px`,
-        :class="{ selected: selectedCurve === curve }"
+        height: `${selectionBox.height}px`,
-        @click="svgClick(curve)"
+        border: '2px dashed #007bff',
-      />
+        backgroundColor: 'rgba(0, 123, 255, 0.1)'
-      <!-- 绘制控制点和连线 -->
+      }"
-      <line
+    ></div>
-        v-if="selectedCurve"
-        :x1="selectedCurve.start.x"
-        :y1="selectedCurve.start.y"
-        :x2="selectedCurve.control1.x"
-        :y2="selectedCurve.control1.y"
-        stroke="gray"
-        stroke-dasharray="2"
-      />
-      <line
-        v-if="selectedCurve"
-        :x1="selectedCurve.end.x"
-        :y1="selectedCurve.end.y"
-        :x2="selectedCurve.control2.x"
-        :y2="selectedCurve.control2.y"
-        stroke="gray"
-        stroke-dasharray="2"
-      />
-      <!-- 绘制起点、终点和控制点 -->
-      <circle
-        v-for="(curve, index) in curves"
-        :key="'start' + index"
-        :cx="curve.start.x"
-        :cy="curve.start.y"
-        r="5"
-        fill="red"
-        @mousedown="startDrag($event, curve, 'start')"
-      />
-      <circle
-        v-for="(curve, index) in curves"
-        :key="'end' + index"
-        :cx="curve.end.x"
-        :cy="curve.end.y"
-        r="5"
-        fill="red"
-        @mousedown="startDrag($event, curve, 'end')"
-      />
-      <circle
-        v-if="selectedCurve"
-        :cx="selectedCurve.control1.x"
-        :cy="selectedCurve.control1.y"
-        r="5"
-        fill="green"
-        @mousedown="startDrag($event, selectedCurve, 'control1')"
-      />
-      <circle
-        v-if="selectedCurve"
-        :cx="selectedCurve.control2.x"
-        :cy="selectedCurve.control2.y"
-        r="5"
-        fill="green"
-        @mousedown="startDrag($event, selectedCurve, 'control2')"
-      />
-    </svg>
 
-    <!-- 显示控制点坐标 -->
+    <!-- 坐标点 -->
-    <div class="points" v-if="selectedCurve">
+    <div
-      <p>起点: ({{ selectedCurve.start.x }}, {{ selectedCurve.start.y }})</p>
+      v-for="(point, index) in points"
-      <p>控制点 1: ({{ selectedCurve.control1.x }}, {{ selectedCurve.control1.y }})</p>
+      :key="index"
-      <p>控制点 2: ({{ selectedCurve.control2.x }}, {{ selectedCurve.control2.y }})</p>
+      :style="{
-      <p>终点: ({{ selectedCurve.end.x }}, {{ selectedCurve.end.y }})</p>
+        position: 'absolute',
-    </div>
+        left: `${point.x}px`,
+        top: `${point.y}px`,
+        width: '10px',
+        height: '10px',
+        backgroundColor: selectedPoints.includes(point) ? 'red' : 'blue',
+        borderRadius: '50%'
+      }"
+    ></div>
   </div>
 </template>
 
-<script setup>
+<script>
 import { ref } from 'vue'
-const svg = ref(null) // SVG 元素的引用
-const curves = ref([]) // 存储所有曲线
-const selectedCurve = ref(null) // 当前选中的曲线
-const isDragging = ref(false) // 是否正在拖拽
-const dragTarget = ref(null) // 当前拖拽的目标（起点、终点、控制点）
 
-// 获取鼠标位置
+export default {
-const getMousePos = (event) => {
+  setup() {
-  const rect = svg.value.getBoundingClientRect()
+    // 坐标数组
+    const points = ref([
+      { x: 300, y: 400 },
+      { x: 400, y: 400 },
+      { x: 200, y: 360 },
+      { x: 570, y: 260 },
+      { x: 600, y: 477 }
+    ])
+
+    // 框选区域
+    const selectionBox = ref({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    })
+
+    // 是否正在框选
+    const isSelecting = ref(false)
+
+    // 选中的点
+    const selectedPoints = ref([])
+
+    // 框选起始位置
+    const startPos = ref({ x: 0, y: 0 })
+
+    // 开始框选
+    const startSelection = (event) => {
+      isSelecting.value = true
+      startPos.value = { x: event.offsetX, y: event.offsetY }
+      selectionBox.value = {
+        x: event.offsetX,
+        y: event.offsetY,
+        width: 0,
+        height: 0
+      }
+    }
+
+    // 更新框选区域
+    const updateSelection = (event) => {
+      if (!isSelecting.value) return
+
+      const offsetX = event.offsetX
+      const offsetY = event.offsetY
+
+      selectionBox.value = {
+        x: Math.min(startPos.value.x, offsetX),
+        y: Math.min(startPos.value.y, offsetY),
+        width: Math.abs(offsetX - startPos.value.x),
+        height: Math.abs(offsetY - startPos.value.y)
+      }
+    }
+
+    // 结束框选
+    const endSelection = () => {
+      isSelecting.value = false
+      checkSelectedPoints()
+    }
+
+    // 判断哪些点在框选区域内
+    const checkSelectedPoints = () => {
+      selectedPoints.value = points.value.filter((point) => {
+        return (
+          point.x >= selectionBox.value.x &&
+          point.x <= selectionBox.value.x + selectionBox.value.width &&
+          point.y >= selectionBox.value.y &&
+          point.y <= selectionBox.value.y + selectionBox.value.height
+        )
+      })
+
+      console.log('选中的点:', selectedPoints.value)
+    }
+
     return {
-    x: event.clientX - rect.left,
+      points,
-    y: event.clientY - rect.top
+      selectionBox,
+      isSelecting,
+      selectedPoints,
+      startSelection,
+      updateSelection,
+      endSelection
     }
-}
-
-// 开始拖拽
-const startDrag = (event, curve, target) => {
-  event.preventDefault()
-  isDragging.value = true
-  selectedCurve.value = curve
-  dragTarget.value = target
-}
-
-// 鼠标按下事件
-const handleMouseDown = (event) => {
-  const mousePos = getMousePos(event)
-
-  // 如果没有选中任何点，则创建一条新的直线
-  if (!isDragging.value && curves.value.length === 0) {
-    const newCurve = {
-      start: mousePos,
-      end: mousePos,
-      control1: { x: mousePos.x + 50, y: mousePos.y - 50 },
-      control2: { x: mousePos.x + 100, y: mousePos.y - 50 }
   }
-    curves.value.push(newCurve)
-    selectedCurve.value = newCurve
-    dragTarget.value = 'end'
-    isDragging.value = true
-  }
-}
-
-// 鼠标移动事件
-const handleMouseMove = (event) => {
-  if (!isDragging.value || !selectedCurve.value) return
-
-  const mousePos = getMousePos(event)
-
-  // 更新拖拽的目标点
-  if (dragTarget.value === 'start') {
-    selectedCurve.value.start = mousePos
-  } else if (dragTarget.value === 'end') {
-    selectedCurve.value.end = mousePos
-  } else if (dragTarget.value === 'control1') {
-    selectedCurve.value.control1 = mousePos
-  } else if (dragTarget.value === 'control2') {
-    selectedCurve.value.control2 = mousePos
-  }
-}
-
-// 鼠标松开事件
-const handleMouseUp = () => {
-  isDragging.value = false
-  dragTarget.value = null
-}
-
-// 获取曲线的路径
-const getCurvePath = (curve) => {
-  return `M ${curve.start.x} ${curve.start.y} C ${curve.control1.x} ${curve.control1.y}, ${curve.control2.x} ${curve.control2.y}, ${curve.end.x} ${curve.end.y}`
-}
-const svgClick = (item) => {
-  console.log(item)
 }
 </script>
 
 <style scoped>
-svg {
+/* 可选：添加一些样式 */
-  border: 1px solid #000;
-  cursor: crosshair;
-}
-
-path.selected {
-  stroke: blue;
-}
-
-.points {
-  margin-top: 10px;
-  font-size: 14px;
-}
 </style>

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

@@ -18,3 +18,74 @@
   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 不传数据
+
+
+```

src/views/mapPage/realTimeMap/贝塞尔曲线demo.vue

@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <!-- SVG 画布 -->
+    <svg
+      ref="svg"
+      width="500"
+      height="300"
+      @mousedown="handleMouseDown"
+      @mousemove="handleMouseMove"
+      @mouseup="handleMouseUp"
+    >
+      <!-- 绘制所有曲线 -->
+      <path
+        v-for="(curve, index) in curves"
+        :key="index"
+        :d="getCurvePath(curve)"
+        stroke="#000"
+        fill="none"
+        stroke-width="2"
+        :class="{ selected: selectedCurve === curve }"
+        @click="svgClick(curve)"
+      />
+      <!-- 绘制控制点和连线 -->
+      <line
+        v-if="selectedCurve"
+        :x1="selectedCurve.start.x"
+        :y1="selectedCurve.start.y"
+        :x2="selectedCurve.control1.x"
+        :y2="selectedCurve.control1.y"
+        stroke="gray"
+        stroke-dasharray="2"
+      />
+      <line
+        v-if="selectedCurve"
+        :x1="selectedCurve.end.x"
+        :y1="selectedCurve.end.y"
+        :x2="selectedCurve.control2.x"
+        :y2="selectedCurve.control2.y"
+        stroke="gray"
+        stroke-dasharray="2"
+      />
+      <!-- 绘制起点、终点和控制点 -->
+      <circle
+        v-for="(curve, index) in curves"
+        :key="'start' + index"
+        :cx="curve.start.x"
+        :cy="curve.start.y"
+        r="5"
+        fill="red"
+        @mousedown="startDrag($event, curve, 'start')"
+      />
+      <circle
+        v-for="(curve, index) in curves"
+        :key="'end' + index"
+        :cx="curve.end.x"
+        :cy="curve.end.y"
+        r="5"
+        fill="red"
+        @mousedown="startDrag($event, curve, 'end')"
+      />
+      <circle
+        v-if="selectedCurve"
+        :cx="selectedCurve.control1.x"
+        :cy="selectedCurve.control1.y"
+        r="5"
+        fill="green"
+        @mousedown="startDrag($event, selectedCurve, 'control1')"
+      />
+      <circle
+        v-if="selectedCurve"
+        :cx="selectedCurve.control2.x"
+        :cy="selectedCurve.control2.y"
+        r="5"
+        fill="green"
+        @mousedown="startDrag($event, selectedCurve, 'control2')"
+      />
+    </svg>
+
+    <!-- 显示控制点坐标 -->
+    <div class="points" v-if="selectedCurve">
+      <p>起点: ({{ selectedCurve.start.x }}, {{ selectedCurve.start.y }})</p>
+      <p>控制点 1: ({{ selectedCurve.control1.x }}, {{ selectedCurve.control1.y }})</p>
+      <p>控制点 2: ({{ selectedCurve.control2.x }}, {{ selectedCurve.control2.y }})</p>
+      <p>终点: ({{ selectedCurve.end.x }}, {{ selectedCurve.end.y }})</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const svg = ref(null) // SVG 元素的引用
+const curves = ref([]) // 存储所有曲线
+const selectedCurve = ref(null) // 当前选中的曲线
+const isDragging = ref(false) // 是否正在拖拽
+const dragTarget = ref(null) // 当前拖拽的目标（起点、终点、控制点）
+
+// 获取鼠标位置
+const getMousePos = (event) => {
+  const rect = svg.value.getBoundingClientRect()
+  return {
+    x: event.clientX - rect.left,
+    y: event.clientY - rect.top
+  }
+}
+
+// 开始拖拽
+const startDrag = (event, curve, target) => {
+  event.preventDefault()
+  isDragging.value = true
+  selectedCurve.value = curve
+  dragTarget.value = target
+}
+
+// 鼠标按下事件
+const handleMouseDown = (event) => {
+  const mousePos = getMousePos(event)
+
+  // 如果没有选中任何点，则创建一条新的直线
+  if (!isDragging.value && curves.value.length === 0) {
+    const newCurve = {
+      start: mousePos,
+      end: mousePos,
+      control1: { x: mousePos.x + 50, y: mousePos.y - 50 },
+      control2: { x: mousePos.x + 100, y: mousePos.y - 50 }
+    }
+    curves.value.push(newCurve)
+    selectedCurve.value = newCurve
+    dragTarget.value = 'end'
+    isDragging.value = true
+  }
+}
+
+// 鼠标移动事件
+const handleMouseMove = (event) => {
+  if (!isDragging.value || !selectedCurve.value) return
+
+  const mousePos = getMousePos(event)
+
+  // 更新拖拽的目标点
+  if (dragTarget.value === 'start') {
+    selectedCurve.value.start = mousePos
+  } else if (dragTarget.value === 'end') {
+    selectedCurve.value.end = mousePos
+  } else if (dragTarget.value === 'control1') {
+    selectedCurve.value.control1 = mousePos
+  } else if (dragTarget.value === 'control2') {
+    selectedCurve.value.control2 = mousePos
+  }
+}
+
+// 鼠标松开事件
+const handleMouseUp = () => {
+  isDragging.value = false
+  dragTarget.value = null
+}
+
+// 获取曲线的路径
+const getCurvePath = (curve) => {
+  return `M ${curve.start.x} ${curve.start.y} C ${curve.control1.x} ${curve.control1.y}, ${curve.control2.x} ${curve.control2.y}, ${curve.end.x} ${curve.end.y}`
+}
+const svgClick = (item) => {
+  console.log(item)
+}
+</script>
+
+<style scoped>
+svg {
+  border: 1px solid #000;
+  cursor: crosshair;
+}
+
+path.selected {
+  stroke: blue;
+}
+
+.points {
+  margin-top: 10px;
+  font-size: 14px;
+}
+</style>