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

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 })
+}

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/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>

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/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>

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">
@@ -130,7 +143,7 @@
       >
         <VueDragResizeRotate
           v-for="(item, index) in allHistoryList[currentIndex]"
-          :key="index"
+          :key="item.locationX"
           :parent="true"
           :x="item.locationX"
           :y="item.locationY"
@@ -150,7 +163,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 +175,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 +186,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 +197,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 +208,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 +219,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 +229,7 @@
             }"
           />
           <div
-            v-if="item.type === 7"
+            v-if="item.type === 7 && item.layerSelectionShow"
             :style="{
               color: item.fontColor,
               fontSize: item.fontSize + 'px',
@@ -230,20 +243,36 @@
         <!-- 文档 https://github.com/a7650/vue3-draggable-resizable/blob/main/docs/document_zh.md#resizable -->
       </div>
 
-      <!-- 绘制框选区域 -->
+      <!-- 框选区域 -->
       <div
-        v-if="state.drawSelectionArea"
+        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`,
           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
+          zIndex: 999
         }"
       ></div>
+
       <!-- 文字输入区域 -->
       <input
         v-if="state.showInputBox"
@@ -258,6 +287,7 @@
           left: state.inputBoxStyle.locationX + 'px',
           top: state.inputBoxStyle.locationY + 'px'
         }"
+        :maxlength="30"
         class="input-box-class"
       />
     </div>
@@ -276,9 +306,20 @@
     @textFormSuccess="textFormSuccess"
   />
   <!-- 图层选择 -->
-  <layerSelectionToolDialog v-if="state.isShowLayer" ref="layerSelectionToolDialogRef" />
+  <layerSelectionToolDialog
+    v-if="state.isShowLayer"
+    ref="layerSelectionToolDialogRef"
+    @layerSelectionSuccess="layerSelectionSuccess"
+  />
   <!-- 设备弹窗选择 -->
   <equipmentToolDialog ref="equipmentToolDialogRef" :positionMapId="imgBgObj.positionMapId" />
+  <!-- 区域选择 -->
+  <itemAreaSettingDialog ref="itemAreaSettingDialogRef" :positionMapId="imgBgObj.positionMapId" />
+  <!-- 线库设置 -->
+  <lineLibrarySettingDialog
+    ref="lineLibrarySettingDialogRef"
+    :positionMapId="imgBgObj.positionMapId"
+  />
 </template>
 
 <script setup>
@@ -286,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'
@@ -293,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() //文字输入框
@@ -391,6 +436,7 @@ const mapClick = (e) => {
     //绘制节点
     allMapPointInfo.value.push({
       positionMapId: imgBgObj.positionMapId, //地图的id
+      layerSelectionShow: true,
       locationX: e.offsetX,
       locationY: e.offsetY,
       locationDeep: 16,
@@ -449,7 +495,8 @@ const handleInputEnd = () => {
       fontColor: state.inputBoxStyle.fontColor, //文字颜色
       fontFamily: state.inputBoxStyle.fontFamily, //字体类型
       fontSize: state.inputBoxStyle.fontSize,
-      dataObj: {} //存 设备点 停车点 文字
+      dataObj: {}, //存 设备点 停车点 文字
+      layerSelectionShow: true
     })
     addEditHistory()
     state.inputBoxValue = ''
@@ -523,7 +570,7 @@ const state = reactive({
       switchType: 'tools',
       name: '工具',
       icon: 'ep:briefcase',
-      isActive: false
+      isActive: true
     },
     {
       switchType: 'lineLibrary',
@@ -571,7 +618,7 @@ const state = reactive({
       switchType: 'grid',
       name: '网格',
       icon: 'ep:grid',
-      isActive: false
+      isActive: true
     },
     {
       switchType: 'larger',
@@ -624,8 +671,8 @@ const state = reactive({
       isActive: false
     }
   ],
-  isShowToolbar: false, //工具栏展示隐藏
+  isShowToolbar: true, //工具栏展示隐藏
-  isShowGrid: false, //网格展示隐藏
+  isShowGrid: true, //网格展示隐藏
   moveForm: {
     locationX: '',
     locationY: ''
@@ -635,10 +682,11 @@ const state = reactive({
   }, //旋转的表单
   copyMapItem: '', //复制的值
   cursorStyle: 'auto',
-  drawSelectionArea: false, //绘制框选区域
+  drawSelectionAreaShow: false, //绘制框选区域
+  allDrawSelectionAreaBox: [], // 所有框选区域
   drawSelectionAreaBox: { x: 0, y: 0, width: 0, height: 0 }, //绘制区域的位置，长宽
-  drawSelectionAreaStartPos: { x: 0, y: 0 }, //开始绘制的点位
+  drawSelectionStartPoint: { x: 0, y: 0 }, //开始绘制的点位
-  drawSelectionAreaSelectedPoints: [], //绘制选中的list
+  drawSelectionPointList: [], //绘制选中的list
   textFormToolShow: false, //文字表单显示隐藏
   showInputBox: false, //输入框显示隐藏
   inputBoxStyle: {
@@ -654,7 +702,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('请先选择要操作的对象')
@@ -682,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':
       // 打开
@@ -716,13 +771,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,48 +916,70 @@ 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.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.drawSelectionArea) {
+  if (state.drawSelectionAreaShow) {
-    state.drawSelectionAreaBox.width = event.offsetX - state.drawSelectionAreaStartPos.x
+    state.drawSelectionAreaBox.width = event.offsetX - state.drawSelectionStartPoint.x
-    state.drawSelectionAreaBox.height = event.offsetY - state.drawSelectionAreaStartPos.y
+    state.drawSelectionAreaBox.height = event.offsetY - state.drawSelectionStartPoint.y
   }
+  // 阻止默认行为（避免选中图片或文本）
+  event.preventDefault()
 }
 //结束框选绘制
 const endDrawSelection = () => {
   if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return
+  state.drawSelectionAreaShow = false
+  state.allDrawSelectionAreaBox.push({ ...state.drawSelectionAreaBox })
+  state.drawSelectionAreaBox = { x: 0, y: 0, width: 0, height: 0 }
+}
+//点击区域
+const clickDrawSelectionArea = () => {
   let points = allHistoryList.value[currentIndex.value]
-  state.drawSelectionArea = false
+
-  state.drawSelectionAreaSelectedPoints = points.filter((point) => {
+  state.drawSelectionPointList = []
-    return (
+  state.allDrawSelectionAreaBox.forEach((box) => {
-      point.locationX >=
+    points.forEach((point) => {
-        Math.min(
+      if (
-          state.drawSelectionAreaStartPos.x,
+        point.locationX >= box.x &&
-          state.drawSelectionAreaStartPos.x + state.drawSelectionAreaBox.width
+        point.locationX <= box.x + box.width &&
-        ) &&
+        point.locationY >= box.y &&
-      point.locationX <=
+        point.locationY <= box.y + box.height
-        Math.max(
+      ) {
-          state.drawSelectionAreaStartPos.x,
+        state.drawSelectionPointList.push(point)
-          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
-        )
-    )
     })
-  console.log(state.drawSelectionAreaSelectedPoints, '选中的')
+  })
+
+  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)
+    }
+  }
 }
 
 //获取扫描图  地图背景相关的信息
@@ -938,15 +1031,19 @@ 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)
@@ -955,7 +1052,7 @@ const getAllNodeList = async () => {
       item.draggable = true
       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 = []
@@ -964,7 +1061,7 @@ const getAllNodeList = async () => {
       item.draggable = true
       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 +1071,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 +1112,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()
 })
@@ -1136,4 +1245,9 @@ onMounted(() => {
   padding: 4px;
   outline: none;
 }
+
+.selection-area-btn {
+  width: 80px;
+  margin-left: 6px;
+}
 </style>

src/views/mapPage/realTimeMap/test.vue

@@ -1,180 +1,125 @@
 <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">
+    <img
-      <p>起点: ({{ selectedCurve.start.x }}, {{ selectedCurve.start.y }})</p>
+      v-for="(img, index) in images"
-      <p>控制点 1: ({{ selectedCurve.control1.x }}, {{ selectedCurve.control1.y }})</p>
+      :key="index"
-      <p>控制点 2: ({{ selectedCurve.control2.x }}, {{ selectedCurve.control2.y }})</p>
+      :src="img.src"
-      <p>终点: ({{ selectedCurve.end.x }}, {{ selectedCurve.end.y }})</p>
+      :style="{
-    </div>
+        position: 'absolute',
+        left: `${img.x}px`,
+        top: `${img.y}px`,
+        width: '100px',
+        height: '100px',
+        userSelect: isSelecting ? 'none' : 'auto', // 动态禁用选择
+        pointerEvents: isSelecting ? 'none' : 'auto' // 动态禁用鼠标事件
+      }"
+    />
   </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()
+    // 图片数据
-  return {
+    const images = ref([
-    x: event.clientX - rect.left,
+      { src: 'https://via.placeholder.com/100', x: 100, y: 100 },
-    y: event.clientY - rect.top
+      { src: 'https://via.placeholder.com/100', x: 300, y: 200 },
-  }
+      { src: 'https://via.placeholder.com/100', x: 500, y: 300 }
+    ])
+
+    // 框选区域
+    const selectionBox = ref({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    })
+
+    // 是否正在框选
+    const isSelecting = ref(false)
+
+    // 框选起始位置
+    const startPos = ref({ x: 0, y: 0 })
+
+    // 开始框选
+    const startSelection = (event) => {
+      isSelecting.value = true
+      startPos.value = { x: event.clientX, y: event.clientY }
+      selectionBox.value = {
+        x: event.clientX,
+        y: event.clientY,
+        width: 0,
+        height: 0
       }
 
-// 开始拖拽
+      // 阻止默认行为（避免选中图片或文本）
-const startDrag = (event, curve, target) => {
       event.preventDefault()
-  isDragging.value = true
-  selectedCurve.value = curve
-  dragTarget.value = target
     }
 
-// 鼠标按下事件
+    // 更新框选区域
-const handleMouseDown = (event) => {
+    const updateSelection = (event) => {
-  const mousePos = getMousePos(event)
+      if (!isSelecting.value) return
 
-  // 如果没有选中任何点，则创建一条新的直线
+      const currentX = event.clientX
-  if (!isDragging.value && curves.value.length === 0) {
+      const currentY = event.clientY
-    const newCurve = {
+
-      start: mousePos,
+      selectionBox.value = {
-      end: mousePos,
+        x: Math.min(startPos.value.x, currentX),
-      control1: { x: mousePos.x + 50, y: mousePos.y - 50 },
+        y: Math.min(startPos.value.y, currentY),
-      control2: { x: mousePos.x + 100, y: mousePos.y - 50 }
+        width: Math.abs(currentX - startPos.value.x),
-    }
+        height: Math.abs(currentY - startPos.value.y)
-    curves.value.push(newCurve)
-    selectedCurve.value = newCurve
-    dragTarget.value = 'end'
-    isDragging.value = true
-  }
       }
 
-// 鼠标移动事件
+      // 阻止默认行为（避免选中图片或文本）
-const handleMouseMove = (event) => {
+      event.preventDefault()
-  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 = () => {
+    const endSelection = () => {
-  isDragging.value = false
+      isSelecting.value = false
-  dragTarget.value = null
+      console.log('框选区域:', selectionBox.value)
     }
 
-// 获取曲线的路径
+    return {
-const getCurvePath = (curve) => {
+      images,
-  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}`
+      selectionBox,
+      isSelecting,
+      startSelection,
+      updateSelection,
+      endSelection
+    }
   }
-const svgClick = (item) => {
-  console.log(item)
 }
 </script>
 
 <style scoped>
-svg {
+/* 禁用用户选择 */
-  border: 1px solid #000;
+img {
-  cursor: crosshair;
+  user-select: none;
-}
+  -webkit-user-select: none;
-
+  -moz-user-select: none;
-path.selected {
+  -ms-user-select: none;
-  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>