From 2bbd29674e243e661bd4fd5c3efb662102ace822 Mon Sep 17 00:00:00 2001
From: yyy <2605810609@qq.com>
Date: Thu, 13 Feb 2025 14:31:00 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components-tool/editNodeProperties.vue    |  90 +++---
 .../layerSelectionToolDialog.vue              |  11 +-
 src/views/mapPage/realTimeMap/editMap.vue     | 117 +++++---
 src/views/mapPage/realTimeMap/test.vue        | 278 ++++++++----------
 src/views/mapPage/realTimeMap/格式.md       |  71 +++++
 .../{test copy.vue => 框选demo.vue}         |   0
 .../realTimeMap/贝塞尔曲线demo.vue       | 180 ++++++++++++
 7 files changed, 514 insertions(+), 233 deletions(-)
 rename src/views/mapPage/realTimeMap/{test copy.vue => 框选demo.vue} (100%)
 create mode 100644 src/views/mapPage/realTimeMap/贝塞尔曲线demo.vue

diff --git a/src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue b/src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue
index b1f6d311..47940317 100644
--- a/src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue
+++ b/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,31 +82,33 @@
             <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" />
+        <div v-if="form.type === 2 || form.type === 4">
+          <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>
       </div>
     </el-form>
@@ -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
-          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 //层数
+          list.push(form.value.dataList[index])
         } 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) => {
diff --git a/src/views/mapPage/realTimeMap/components-tool/layerSelectionToolDialog.vue b/src/views/mapPage/realTimeMap/components-tool/layerSelectionToolDialog.vue
index eae5e251..5e0cb797 100644
--- a/src/views/mapPage/realTimeMap/components-tool/layerSelectionToolDialog.vue
+++ b/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) => {}
diff --git a/src/views/mapPage/realTimeMap/editMap.vue b/src/views/mapPage/realTimeMap/editMap.vue
index 14912e15..7401ad51 100644
--- a/src/views/mapPage/realTimeMap/editMap.vue
+++ b/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',
-          backgroundColor: 'rgba(0, 0, 255, 0.1)',
+          border: '2px dashed #007bff',
+          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, //工具栏展示隐藏
-  isShowGrid: false, //网格展示隐藏
+  isShowToolbar: true, //工具栏展示隐藏
+  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.locationY = copyObj.locationY + 50
+      copyObj.locationX = Number(copyObj.locationX) + 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.lockAspectRatio = false
+      item.rotatable = true
+      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()
 })
diff --git a/src/views/mapPage/realTimeMap/test.vue b/src/views/mapPage/realTimeMap/test.vue
index c8fc3285..d818297b 100644
--- a/src/views/mapPage/realTimeMap/test.vue
+++ b/src/views/mapPage/realTimeMap/test.vue
@@ -1,180 +1,132 @@
 <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
+    @mousedown="startSelection"
+    @mousemove="updateSelection"
+    @mouseup="endSelection"
+    style="position: relative; height: 100vh; border: 1px solid #ccc"
+  >
+    <!-- 框选区域 -->
+    <div
+      v-if="isSelecting || selectionBox.width > 0"
+      :style="{
+        position: 'absolute',
+        left: `${selectionBox.x}px`,
+        top: `${selectionBox.y}px`,
+        width: `${selectionBox.width}px`,
+        height: `${selectionBox.height}px`,
+        border: '2px dashed #007bff',
+        backgroundColor: 'rgba(0, 123, 255, 0.1)'
+      }"
+    ></div>
 
-    <!-- 显示控制点坐标 -->
-    <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
+      v-for="(point, index) in points"
+      :key="index"
+      :style="{
+        position: 'absolute',
+        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) // 当前拖拽的目标（起点、终点、控制点）
 
-// 获取鼠标位置
-const getMousePos = (event) => {
-  const rect = svg.value.getBoundingClientRect()
-  return {
-    x: event.clientX - rect.left,
-    y: event.clientY - rect.top
-  }
-}
+export default {
+  setup() {
+    // 坐标数组
+    const points = ref([
+      { x: 300, y: 400 },
+      { x: 400, y: 400 },
+      { x: 200, y: 360 },
+      { x: 570, y: 260 },
+      { x: 600, y: 477 }
+    ])
 
-// 开始拖拽
-const startDrag = (event, curve, target) => {
-  event.preventDefault()
-  isDragging.value = true
-  selectedCurve.value = curve
-  dragTarget.value = target
-}
+    // 框选区域
+    const selectionBox = ref({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    })
 
-// 鼠标按下事件
-const handleMouseDown = (event) => {
-  const mousePos = getMousePos(event)
+    // 是否正在框选
+    const isSelecting = ref(false)
 
-  // 如果没有选中任何点，则创建一条新的直线
-  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 }
+    // 选中的点
+    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 {
+      points,
+      selectionBox,
+      isSelecting,
+      selectedPoints,
+      startSelection,
+      updateSelection,
+      endSelection
     }
-    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>
diff --git a/src/views/mapPage/realTimeMap/格式.md b/src/views/mapPage/realTimeMap/格式.md
index d051f5bc..4112e41d 100644
--- a/src/views/mapPage/realTimeMap/格式.md
+++ b/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 不传数据
+
+
+```
diff --git a/src/views/mapPage/realTimeMap/test copy.vue b/src/views/mapPage/realTimeMap/框选demo.vue
similarity index 100%
rename from src/views/mapPage/realTimeMap/test copy.vue
rename to src/views/mapPage/realTimeMap/框选demo.vue
diff --git a/src/views/mapPage/realTimeMap/贝塞尔曲线demo.vue b/src/views/mapPage/realTimeMap/贝塞尔曲线demo.vue
new file mode 100644
index 00000000..c8fc3285
--- /dev/null
+++ b/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>

From 2853959c19c954ead9da3d45b250f6e9b9e7be6c Mon Sep 17 00:00:00 2001
From: yyy <2605810609@qq.com>
Date: Thu, 13 Feb 2025 17:38:10 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.local                                    |   2 +-
 src/api/map/map.ts                            |   8 +
 .../components-tool/itemAreaSettingDialog.vue |  78 ++++++++++
 .../lineLibrarySettingDialog.vue              |  74 +++++++++
 src/views/mapPage/realTimeMap/editMap.vue     | 145 +++++++++++++-----
 src/views/mapPage/realTimeMap/test.vue        |  87 +++++------
 6 files changed, 306 insertions(+), 88 deletions(-)
 create mode 100644 src/views/mapPage/realTimeMap/components-tool/itemAreaSettingDialog.vue
 create mode 100644 src/views/mapPage/realTimeMap/components-tool/lineLibrarySettingDialog.vue

diff --git a/.env.local b/.env.local
index a3752946..f0650411 100644
--- a/.env.local
+++ b/.env.local
@@ -4,7 +4,7 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-VITE_BASE_URL='http://192.168.0.74:48080'
+VITE_BASE_URL='http://192.168.0.66:48080'
 # VITE_BASE_URL='http://192.168.0.189:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
diff --git a/src/api/map/map.ts b/src/api/map/map.ts
index d73b6813..3b0f3cec 100644
--- a/src/api/map/map.ts
+++ b/src/api/map/map.ts
@@ -79,3 +79,11 @@ export const getDeviceInformationList = async (params) => {
 export const mapBindDeviceInfo = async (data) => {
   return await request.post({ url: `/system/device/information/mapBindDeviceInfo`, data })
 }
+//创建修改删除库区
+export const createOrEditOrDelHouseArea = async (data) => {
+  return await request.post({ url: `/system/ware/house-area/createOrEditOrDel`, data })
+}
+//创建修改删除线库
+export const createOrEditOrDelHouseLane = async (data) => {
+  return await request.post({ url: `/system/ware/house-lane/createOrEditOrDel`, data })
+}
diff --git a/src/views/mapPage/realTimeMap/components-tool/itemAreaSettingDialog.vue b/src/views/mapPage/realTimeMap/components-tool/itemAreaSettingDialog.vue
new file mode 100644
index 00000000..5802d91b
--- /dev/null
+++ b/src/views/mapPage/realTimeMap/components-tool/itemAreaSettingDialog.vue
@@ -0,0 +1,78 @@
+<template>
+  <!-- 新增设备 -->
+  <Dialog
+    v-model="dialogFormVisible"
+    title="物料区域设置"
+    width="600"
+    class="equipment-form-dialog"
+  >
+    <el-form :model="form" label-width="110">
+      <el-form-item label="物料区域名称" prop="skuInfo" required>
+        <el-input v-model="form.skuInfo" placeholder="请输入物料区域名称" />
+      </el-form-item>
+      <el-form-item label="物料名称" prop="areaName" required>
+        <el-input v-model="form.areaName" placeholder="请输入物料名称" />
+      </el-form-item>
+      <el-form-item label="库位数量" prop="areaNumber">
+        <el-input v-model="form.areaNumber" :disabled="true" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitForm"> 确定 </el-button>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import * as MapApi from '@/api/map/map'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+
+const message = useMessage() // 消息弹窗
+const props = defineProps({
+  positionMapId: {
+    type: String,
+    default: () => ''
+  }
+})
+
+const dialogFormVisible = ref(false) //列表的
+
+//新增
+const form = ref({
+  positionMapId: '',
+  skuInfo: '', //物料名称
+  areaName: '', //物料区域名称
+  areaNumber: 0,
+  mapItemIds: []
+})
+
+const open = (list) => {
+  dialogFormVisible.value = true
+  form.value.mapItemIds = list.map((item) => item.id)
+  form.value.areaNumber = form.value.mapItemIds.length
+}
+
+const submitForm = async () => {
+  form.value.positionMapId = props.positionMapId
+  await MapApi.createOrEditOrDelHouseArea(form.value)
+  dialogFormVisible.value = false
+  message.success('设置成功')
+}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
+
+<style lang="scss">
+.equipment-form-dialog {
+  padding: 0px;
+
+  .el-dialog__footer {
+    padding: 0px 20px 20px 0;
+    border-top: none !important;
+  }
+}
+</style>
diff --git a/src/views/mapPage/realTimeMap/components-tool/lineLibrarySettingDialog.vue b/src/views/mapPage/realTimeMap/components-tool/lineLibrarySettingDialog.vue
new file mode 100644
index 00000000..29a11aa5
--- /dev/null
+++ b/src/views/mapPage/realTimeMap/components-tool/lineLibrarySettingDialog.vue
@@ -0,0 +1,74 @@
+<template>
+  <!-- 新增设备 -->
+  <Dialog
+    v-model="dialogFormVisible"
+    title="物料区域设置"
+    width="600"
+    class="equipment-form-dialog"
+  >
+    <el-form :model="form" label-width="110">
+      <el-form-item label="线库名称" prop="laneName" required>
+        <el-input v-model="form.laneName" placeholder="请输入线库名称" />
+      </el-form-item>
+      <el-form-item label="库位数量" prop="areaNumber" required>
+        <el-input v-model="form.areaNumber" :disabled="true" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitForm"> 确定 </el-button>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import * as MapApi from '@/api/map/map'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+
+const message = useMessage() // 消息弹窗
+const props = defineProps({
+  positionMapId: {
+    type: String,
+    default: () => ''
+  }
+})
+
+const dialogFormVisible = ref(false) //列表的
+
+//新增
+const form = ref({
+  positionMapId: '',
+  laneName: '', //线库名称
+  areaNumber: 0,
+  mapItemIds: []
+})
+
+const open = (list) => {
+  dialogFormVisible.value = true
+  form.value.mapItemIds = list.map((item) => item.id)
+  form.value.areaNumber = form.value.mapItemIds.length
+}
+
+const submitForm = async () => {
+  form.value.positionMapId = props.positionMapId
+  await MapApi.createOrEditOrDelHouseLane(form.value)
+  dialogFormVisible.value = false
+  message.success('设置成功')
+}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
+
+<style lang="scss">
+.equipment-form-dialog {
+  padding: 0px;
+
+  .el-dialog__footer {
+    padding: 0px 20px 20px 0;
+    border-top: none !important;
+  }
+}
+</style>
diff --git a/src/views/mapPage/realTimeMap/editMap.vue b/src/views/mapPage/realTimeMap/editMap.vue
index 7401ad51..5cfd7ed6 100644
--- a/src/views/mapPage/realTimeMap/editMap.vue
+++ b/src/views/mapPage/realTimeMap/editMap.vue
@@ -72,14 +72,27 @@
           <Icon :icon="item.icon" :size="24" />
           <div class="name"> {{ item.name }} </div>
         </div>
+        <!-- 分隔线 -->
         <div
           class="line"
           v-if="
             item.switchType === 'saveAs' ||
             item.switchType === 'delete' ||
-            item.switchType === 'grid'
+            item.switchType === 'grid' ||
+            (item.switchType === 'next' &&
+              (toolbarSwitchType === 'lineLibrary' || toolbarSwitchType === 'region'))
           "
         ></div>
+        <el-button
+          v-if="
+            item.switchType === 'next' &&
+            (toolbarSwitchType === 'lineLibrary' || toolbarSwitchType === 'region')
+          "
+          type="danger"
+          class="selection-area-btn"
+          @click="clickDrawSelectionArea"
+          >确定</el-button
+        >
       </div>
     </div>
     <div class="right-tool-list" v-if="state.isShowToolbar">
@@ -230,9 +243,24 @@
         <!-- 文档 https://github.com/a7650/vue3-draggable-resizable/blob/main/docs/document_zh.md#resizable -->
       </div>
 
-      <!-- 绘制框选区域 -->
+      <!-- 框选区域 -->
       <div
-        v-if="state.drawSelectionAreaSelectedPoints"
+        v-for="(box, index) in state.allDrawSelectionAreaBox"
+        :key="index"
+        :style="{
+          position: 'absolute',
+          left: `${box.x}px`,
+          top: `${box.y}px`,
+          width: `${box.width}px`,
+          height: `${box.height}px`,
+          border: '2px dashed #007bff',
+          backgroundColor: 'rgba(0, 123, 255, 0.1)',
+          zIndex: 999
+        }"
+      ></div>
+      <!-- 当前框选区域 -->
+      <div
+        v-if="state.drawSelectionAreaShow"
         :style="{
           position: 'absolute',
           left: `${state.drawSelectionAreaBox.x}px`,
@@ -241,10 +269,10 @@
           height: `${state.drawSelectionAreaBox.height}px`,
           border: '2px dashed #007bff',
           backgroundColor: 'rgba(0, 123, 255, 0.1)',
-          zIndex: 99999
+          zIndex: 999
         }"
-        @click="clickDrawSelectionArea"
       ></div>
+
       <!-- 文字输入区域 -->
       <input
         v-if="state.showInputBox"
@@ -259,6 +287,7 @@
           left: state.inputBoxStyle.locationX + 'px',
           top: state.inputBoxStyle.locationY + 'px'
         }"
+        :maxlength="30"
         class="input-box-class"
       />
     </div>
@@ -284,6 +313,13 @@
   />
   <!-- 设备弹窗选择 -->
   <equipmentToolDialog ref="equipmentToolDialogRef" :positionMapId="imgBgObj.positionMapId" />
+  <!-- 区域选择 -->
+  <itemAreaSettingDialog ref="itemAreaSettingDialogRef" :positionMapId="imgBgObj.positionMapId" />
+  <!-- 线库设置 -->
+  <lineLibrarySettingDialog
+    ref="lineLibrarySettingDialogRef"
+    :positionMapId="imgBgObj.positionMapId"
+  />
 </template>
 
 <script setup>
@@ -291,6 +327,8 @@ import { ref, defineComponent, reactive, nextTick, onMounted } from 'vue'
 import editNodeProperties from './components-tool/editNodeProperties.vue'
 import textFormToolDialog from './components-tool/textFormToolDialog.vue'
 import equipmentToolDialog from './components-tool/equipmentToolDialog.vue'
+import itemAreaSettingDialog from './components-tool/itemAreaSettingDialog.vue'
+import lineLibrarySettingDialog from './components-tool/lineLibrarySettingDialog.vue'
 import layerSelectionToolDialog from './components-tool/layerSelectionToolDialog.vue'
 
 import * as MapApi from '@/api/map/map'
@@ -298,6 +336,8 @@ import cursorCollection from './cursorCollection'
 
 defineOptions({ name: 'editMapPageRealTimeMap' })
 
+const lineLibrarySettingDialogRef = ref() //线库设置
+const itemAreaSettingDialogRef = ref() //物料区域设置
 const equipmentToolDialogRef = ref() //设备弹窗
 const textFormToolDialogRef = ref() //文字输入弹窗
 const inputBoxRef = ref() //文字输入框
@@ -643,9 +683,10 @@ const state = reactive({
   copyMapItem: '', //复制的值
   cursorStyle: 'auto',
   drawSelectionAreaShow: false, //绘制框选区域
+  allDrawSelectionAreaBox: [], // 所有框选区域
   drawSelectionAreaBox: { x: 0, y: 0, width: 0, height: 0 }, //绘制区域的位置，长宽
-  drawSelectionAreaStartPos: { x: 0, y: 0 }, //开始绘制的点位
-  drawSelectionAreaSelectedPoints: [], //绘制选中的list
+  drawSelectionStartPoint: { x: 0, y: 0 }, //开始绘制的点位
+  drawSelectionPointList: [], //绘制选中的list
   textFormToolShow: false, //文字表单显示隐藏
   showInputBox: false, //输入框显示隐藏
   inputBoxStyle: {
@@ -689,6 +730,13 @@ const toolbarClick = (item) => {
     state.inputBoxValue = ''
   }
 
+  //工具切换 不适用框选的 要把框选的信息都删掉
+  if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') {
+    state.drawSelectionAreaShow = false
+    state.allDrawSelectionAreaBox = []
+    state.drawSelectionPointList = []
+  }
+
   switch (type) {
     case 'open':
       // 打开
@@ -869,57 +917,69 @@ const rotationFormSubmit = () => {
 const startDrawSelection = (event) => {
   if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return
   state.drawSelectionAreaShow = true
-  state.drawSelectionAreaStartPos = { x: event.offsetX, y: event.offsetY }
+  state.drawSelectionStartPoint = { x: event.offsetX, y: event.offsetY }
   state.drawSelectionAreaBox = { x: event.offsetX, y: event.offsetY, width: 0, height: 0 }
+  // 阻止默认行为（避免选中图片或文本）
+  event.preventDefault()
 }
-
+// 更新框选区域
 const updateDrawSelection = (event) => {
   if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return
   if (state.drawSelectionAreaShow) {
-    state.drawSelectionAreaBox.width = event.offsetX - state.drawSelectionAreaStartPos.x
-    state.drawSelectionAreaBox.height = event.offsetY - state.drawSelectionAreaStartPos.y
+    state.drawSelectionAreaBox.width = event.offsetX - state.drawSelectionStartPoint.x
+    state.drawSelectionAreaBox.height = event.offsetY - state.drawSelectionStartPoint.y
   }
+  // 阻止默认行为（避免选中图片或文本）
+  event.preventDefault()
 }
 //结束框选绘制
 const endDrawSelection = () => {
   if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return
   state.drawSelectionAreaShow = false
-  let points = allHistoryList.value[currentIndex.value]
-  state.drawSelectionAreaSelectedPoints = points.filter((point) => {
-    return (
-      point.locationX >=
-        Math.min(
-          state.drawSelectionAreaStartPos.x,
-          state.drawSelectionAreaStartPos.x + state.drawSelectionAreaBox.width
-        ) &&
-      point.locationX <=
-        Math.max(
-          state.drawSelectionAreaStartPos.x,
-          state.drawSelectionAreaStartPos.x + state.drawSelectionAreaBox.width
-        ) &&
-      point.locationY >=
-        Math.min(
-          state.drawSelectionAreaStartPos.y,
-          state.drawSelectionAreaStartPos.y + state.drawSelectionAreaBox.height
-        ) &&
-      point.locationY <=
-        Math.max(
-          state.drawSelectionAreaStartPos.y,
-          state.drawSelectionAreaStartPos.y + state.drawSelectionAreaBox.height
-        )
-    )
-  })
+  state.allDrawSelectionAreaBox.push({ ...state.drawSelectionAreaBox })
+  state.drawSelectionAreaBox = { x: 0, y: 0, width: 0, height: 0 }
 }
 //点击区域
 const clickDrawSelectionArea = () => {
+  let points = allHistoryList.value[currentIndex.value]
+
+  state.drawSelectionPointList = []
+  state.allDrawSelectionAreaBox.forEach((box) => {
+    points.forEach((point) => {
+      if (
+        point.locationX >= box.x &&
+        point.locationX <= box.x + box.width &&
+        point.locationY >= box.y &&
+        point.locationY <= box.y + box.height
+      ) {
+        state.drawSelectionPointList.push(point)
+      }
+    })
+  })
+
+  console.log(state.drawSelectionPointList, '选中的')
+
+  // 清空框选区域
+  state.allDrawSelectionAreaBox = []
+  //只要库位的
+  let binLocation = state.drawSelectionPointList.filter((item) => item.type === 2)
+
   if (toolbarSwitchType.value === 'lineLibrary') {
     //线库
+    if (binLocation.length < 2) {
+      message.warning('至少选择两个库位')
+    } else {
+      lineLibrarySettingDialogRef.value.open(binLocation)
+    }
   }
   if (toolbarSwitchType.value === 'region') {
     //区域
+    if (binLocation.length < 1) {
+      message.warning('至少选择两个库位')
+    } else {
+      itemAreaSettingDialogRef.value.open(binLocation)
+    }
   }
-
-  // console.log(state.drawSelectionAreaSelectedPoints, '选中的')
 }
 
 //获取扫描图  地图背景相关的信息
@@ -989,7 +1049,7 @@ const getAllNodeList = async () => {
       item.dataList = JSON.parse(item.dataJson)
       item.locationDeep = item.dataList[0].locationDeep
       item.locationWide = item.dataList[0].locationWide
-      item.draggable = false
+      item.draggable = true
       item.resizable = false
       item.rotatable = false
       item.lockAspectRatio = true
@@ -998,7 +1058,7 @@ const getAllNodeList = async () => {
       item.dataList = []
       item.locationDeep = item.dataObj.locationDeep
       item.locationWide = item.dataObj.locationWide
-      item.draggable = false
+      item.draggable = true
       item.resizable = false
       item.rotatable = false
       item.lockAspectRatio = true
@@ -1185,4 +1245,9 @@ onMounted(() => {
   padding: 4px;
   outline: none;
 }
+
+.selection-area-btn {
+  width: 80px;
+  margin-left: 6px;
+}
 </style>
diff --git a/src/views/mapPage/realTimeMap/test.vue b/src/views/mapPage/realTimeMap/test.vue
index d818297b..2e2cb7ec 100644
--- a/src/views/mapPage/realTimeMap/test.vue
+++ b/src/views/mapPage/realTimeMap/test.vue
@@ -19,20 +19,21 @@
       }"
     ></div>
 
-    <!-- 坐标点 -->
-    <div
-      v-for="(point, index) in points"
+    <!-- 图片 -->
+    <img
+      v-for="(img, index) in images"
       :key="index"
+      :src="img.src"
       :style="{
         position: 'absolute',
-        left: `${point.x}px`,
-        top: `${point.y}px`,
-        width: '10px',
-        height: '10px',
-        backgroundColor: selectedPoints.includes(point) ? 'red' : 'blue',
-        borderRadius: '50%'
+        left: `${img.x}px`,
+        top: `${img.y}px`,
+        width: '100px',
+        height: '100px',
+        userSelect: isSelecting ? 'none' : 'auto', // 动态禁用选择
+        pointerEvents: isSelecting ? 'none' : 'auto' // 动态禁用鼠标事件
       }"
-    ></div>
+    />
   </div>
 </template>
 
@@ -41,13 +42,11 @@ import { ref } from 'vue'
 
 export default {
   setup() {
-    // 坐标数组
-    const points = ref([
-      { x: 300, y: 400 },
-      { x: 400, y: 400 },
-      { x: 200, y: 360 },
-      { x: 570, y: 260 },
-      { x: 600, y: 477 }
+    // 图片数据
+    const images = ref([
+      { src: 'https://via.placeholder.com/100', x: 100, y: 100 },
+      { src: 'https://via.placeholder.com/100', x: 300, y: 200 },
+      { src: 'https://via.placeholder.com/100', x: 500, y: 300 }
     ])
 
     // 框选区域
@@ -61,64 +60,52 @@ export default {
     // 是否正在框选
     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 }
+      startPos.value = { x: event.clientX, y: event.clientY }
       selectionBox.value = {
-        x: event.offsetX,
-        y: event.offsetY,
+        x: event.clientX,
+        y: event.clientY,
         width: 0,
         height: 0
       }
+
+      // 阻止默认行为（避免选中图片或文本）
+      event.preventDefault()
     }
 
     // 更新框选区域
     const updateSelection = (event) => {
       if (!isSelecting.value) return
 
-      const offsetX = event.offsetX
-      const offsetY = event.offsetY
+      const currentX = event.clientX
+      const currentY = event.clientY
 
       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)
+        x: Math.min(startPos.value.x, currentX),
+        y: Math.min(startPos.value.y, currentY),
+        width: Math.abs(currentX - startPos.value.x),
+        height: Math.abs(currentY - startPos.value.y)
       }
+
+      // 阻止默认行为（避免选中图片或文本）
+      event.preventDefault()
     }
 
     // 结束框选
     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)
+      console.log('框选区域:', selectionBox.value)
     }
 
     return {
-      points,
+      images,
       selectionBox,
       isSelecting,
-      selectedPoints,
       startSelection,
       updateSelection,
       endSelection
@@ -128,5 +115,11 @@ export default {
 </script>
 
 <style scoped>
-/* 可选：添加一些样式 */
+/* 禁用用户选择 */
+img {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
 </style>