任务中选择库位

src/views/mapPage/components/locationSelectionDialog.vue

@@ -0,0 +1,212 @@
+<template>
+  <Dialog
+    v-model="dialogFormVisible"
+    title="库区选择"
+    width="70%"
+    class="location-selection-dialog"
+  >
+    <div v-for="(item, index) in allMapPointInfo" :key="index">
+      <!-- 路径点 -->
+      <div
+        v-if="item.type === 1"
+        :style="{
+          width: item.locationWidePx + 'px',
+          height: item.locationDeepPx + 'px',
+          backgroundColor: currentItemIndex === index ? '#f48924' : '#000',
+          borderRadius: '50%',
+          zIndex: 999
+        }"
+      >
+        <!-- 2 库位点 -->
+        <img
+          v-if="item.type === 2"
+          src="https://api.znkjfw.com/admin-api/infra/file/4/get/库位库存_png_179_1739326653035.png"
+          alt=""
+          :style="{
+            width: item.locationWidePx + 'px',
+            height: item.locationDeepPx + 'px',
+            border: currentItemIndex === index ? '1px dashed #000' : 'none'
+          }"
+        />
+        <!-- 3 设备点 -->
+        <img
+          v-if="item.type === 3"
+          :src="
+            item.mapImageUrl ||
+            'https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png'
+          "
+          alt=""
+          :style="{
+            width: item.locationWidePx + 'px',
+            height: item.locationDeepPx + 'px',
+            border: currentItemIndex === index ? '1px dashed #000' : 'none'
+          }"
+        />
+        <!-- 4 停车点 -->
+        <img
+          v-if="item.type === 4"
+          src="https://api.znkjfw.com/admin-api/infra/file/4/get/停车场-01_png_179_1739326933020.png"
+          alt=""
+          :style="{
+            width: item.locationWidePx + 'px',
+            height: item.locationDeepPx + 'px',
+            border: currentItemIndex === index ? '1px dashed #000' : 'none'
+          }"
+        />
+        <!-- 5 区域变更点 -->
+        <img
+          v-if="item.type === 5"
+          src="https://api.znkjfw.com/admin-api/infra/file/4/get/区域_png_179_1739327151876.png"
+          alt=""
+          :style="{
+            width: item.locationWidePx + 'px',
+            height: item.locationDeepPx + 'px',
+            border: currentItemIndex === index ? '1px dashed #000' : 'none'
+          }"
+        />
+        <!-- 6 等待点 -->
+        <img
+          v-if="item.type === 6"
+          src="https://api.znkjfw.com/admin-api/infra/file/4/get/等待点_png_179_1739326991439.png"
+          alt=""
+          :style="{
+            width: item.locationWidePx + 'px',
+            height: item.locationDeepPx + 'px',
+            border: currentItemIndex === index ? '1px dashed #000' : 'none'
+          }"
+        />
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script setup>
+import JSONBigInt from 'json-bigint'
+import { reactive, ref } from 'vue'
+import * as MapApi from '@/api/map/map'
+
+const dialogFormVisible = ref(false) //列表的
+const message = useMessage() // 消息弹窗
+
+const props = defineProps({
+  positionMapId: {
+    type: String,
+    default: () => ''
+  }
+})
+
+const open = () => {
+  dialogFormVisible.value = true
+  imgBgObj.positionMapId = props.positionMapId
+  getAllNodeList()
+}
+
+const allMapPointInfo = ref([]) //点位信息
+const imgBgObj = reactive({
+  positionMapId: ''
+})
+
+const currentItemIndex = ref(0)
+const getAllNodeList = async () => {
+  let list = await MapApi.getPositionMapItemList({
+    positionMapId: imgBgObj.positionMapId || 5
+  })
+  allMapPointInfo.value = []
+
+  list.forEach((item) => {
+    item.layerSelectionShow = true //用于图层
+    item.locationX = Number(item.locationX)
+    item.locationY = Number(item.locationY)
+
+    if (item.type === 1) {
+      item.dataObj = {}
+      item.dataList = []
+      item.locationDeep = 50
+      item.locationWide = 50
+      item.draggable = true
+      item.resizable = false
+      item.rotatable = false
+      item.lockAspectRatio = true
+    } else if (item.type === 5 || item.type === 6) {
+      item.dataObj = {}
+      item.dataList = []
+      item.locationDeep = 150
+      item.locationWide = 150
+      item.draggable = true
+      item.resizable = false
+      item.rotatable = false
+      item.lockAspectRatio = true
+    } else if (item.type === 2) {
+      //库位点
+      item.dataList = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
+      item.locationDeep = item.dataList[0].locationDeep
+      item.locationWide = item.dataList[0].locationWide
+      item.draggable = true
+      item.resizable = true
+      item.rotatable = false
+      item.lockAspectRatio = true
+    } else if (item.type === 3) {
+      item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
+      item.dataList = []
+      item.locationDeep = item.dataObj.locationDeep
+      item.locationWide = item.dataObj.locationWide
+      item.deviceId = item.dataObj.id
+      item.mapImageUrl = item.dataObj.mapImageUrl
+      item.draggable = true
+      item.resizable = true
+      item.rotatable = false
+      item.lockAspectRatio = true
+    } else if (item.type === 4) {
+      item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
+      item.dataList = []
+      item.locationDeep = item.dataObj.locationDeep
+      item.locationWide = item.dataObj.locationWide
+      item.draggable = true
+      item.resizable = true
+      item.rotatable = false
+      item.lockAspectRatio = true
+    } else if (item.type === 7) {
+      item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
+      item.text = item.dataObj.text
+      item.fontColor = item.dataObj.fontColor
+      item.fontFamily = item.dataObj.fontFamily
+      item.fontSize = item.dataObj.fontSize
+      item.angle = item.dataObj.angle
+      item.draggable = true
+      item.resizable = false
+      item.rotatable = true
+      item.lockAspectRatio = true
+    }
+
+    //要将实际的cm改成px
+    if (item.locationWide && item.locationDeep) {
+      let pxObj = cmConversionPx(item.locationWide, item.locationDeep)
+      item.locationWidePx = pxObj.pWidth
+      item.locationDeepPx = pxObj.pHeight
+    }
+
+    allMapPointInfo.value.push(item)
+  })
+}
+//将节点实际宽高cm转换成px
+const cmConversionPx = (cWidth, cHeight) => {
+  let pWidth = Number(cWidth) / imgBgObj.resolution / 100
+  let pHeight = Number(cHeight) / imgBgObj.resolution / 100
+
+  return {
+    pWidth,
+    pHeight
+  }
+}
+getAllNodeList()
+
+// emit('addEventListener')
+const emit = defineEmits(['addEventListener'])
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
+
+<style lang="scss">
+.location-selection-dialog {
+  padding: 0px;
+}
+</style>

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

@@ -77,6 +77,7 @@
               @change="deviceChange"
             >
               <el-option
+                :disabled="item.idDisabled"
                 v-for="item in deviceList"
                 :key="item.id"
                 :label="item.deviceNo"
@@ -326,7 +327,6 @@ const directionChange = (e) => {
     form.value.outDirection = undefined
   }
 }
-
 //设备信息
 const deviceInfo = ref({
   positionMapId: '',
@@ -341,7 +341,12 @@ const getDeviceList = async () => {
   let list = await MapApi.getDeviceInformationList(deviceInfo.value)
 
   const deviceIds = equipmentList.value.map((item) => item.deviceId)
-  deviceList.value = list.filter((item) => !deviceIds.includes(item.id))
+  deviceList.value = list.map((item) => {
+    return {
+      ...item,
+      idDisabled: deviceIds.includes(item.id)
+    }
+  })
 }
 //设备类型切换
 const deviceTypeChange = () => {

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

@@ -16,32 +16,36 @@
         </el-select>
       </el-form-item>
       <el-form-item required label="取货位置" prop="taskDetailList[0].takeId">
-        <el-select
-          :disabled="!formData.taskDetailList[0].takeType"
-          v-model="formData.taskDetailList[0].takeId"
-          filterable
-          remote
-          reserve-keyword
-          placeholder="请输入取货位置"
-          :remote-method="
-            (query) => {
-              takeRemoteMethod(query, formData.taskDetailList[0])
-            }
-          "
-          :loading="loading"
-        >
-          <el-option
-            v-for="item in formData.taskDetailList[0].takeList"
-            :key="item.id"
-            :label="item.locationNo"
-            :value="item.id"
-          />
-          <template #loading>
-            <svg class="circular" viewBox="0 0 50 50">
-              <circle class="path" cx="25" cy="25" r="20" fill="none" />
-            </svg>
-          </template>
-        </el-select>
+        <div style="width: 100%; display: flex; align-items: center">
+          <el-select
+            style="width: 100%"
+            :disabled="!formData.taskDetailList[0].takeType"
+            v-model="formData.taskDetailList[0].takeId"
+            filterable
+            remote
+            reserve-keyword
+            placeholder="请输入取货位置"
+            :remote-method="
+              (query) => {
+                takeRemoteMethod(query, formData.taskDetailList[0])
+              }
+            "
+            :loading="loading"
+          >
+            <el-option
+              v-for="item in formData.taskDetailList[0].takeList"
+              :key="item.id"
+              :label="item.locationNo"
+              :value="item.id"
+            />
+            <template #loading>
+              <svg class="circular" viewBox="0 0 50 50">
+                <circle class="path" cx="25" cy="25" r="20" fill="none" />
+              </svg>
+            </template>
+          </el-select>
+          <el-icon class="ml-2" size="20" color="#00329F"><Location /></el-icon>
+        </div>
       </el-form-item>
       <el-form-item label="放货类型" prop="taskDetailList[0].releaseType" required>
         <el-select v-model="formData.taskDetailList[0].releaseType" placeholder="请选择放货类型">
@@ -51,32 +55,35 @@
         </el-select>
       </el-form-item>
       <el-form-item required label="放货位置" prop="taskDetailList[0].releaseId">
-        <el-select
-          :disabled="!formData.taskDetailList[0].releaseType"
-          v-model="formData.taskDetailList[0].releaseId"
-          filterable
-          remote
-          reserve-keyword
-          placeholder="请输入放货位置"
-          :remote-method="
-            (query) => {
-              releaseRemoteMethod(query, formData.taskDetailList[0])
-            }
-          "
-          :loading="loading"
-        >
-          <el-option
-            v-for="item in formData.taskDetailList[0].releaseList"
-            :key="item.id"
-            :label="item.locationNo"
-            :value="item.id"
-          />
-          <template #loading>
-            <svg class="circular" viewBox="0 0 50 50">
-              <circle class="path" cx="25" cy="25" r="20" fill="none" />
-            </svg>
-          </template>
-        </el-select>
+        <div style="width: 100%; display: flex; align-items: center">
+          <el-select
+            :disabled="!formData.taskDetailList[0].releaseType"
+            v-model="formData.taskDetailList[0].releaseId"
+            filterable
+            remote
+            reserve-keyword
+            placeholder="请输入放货位置"
+            :remote-method="
+              (query) => {
+                releaseRemoteMethod(query, formData.taskDetailList[0])
+              }
+            "
+            :loading="loading"
+          >
+            <el-option
+              v-for="item in formData.taskDetailList[0].releaseList"
+              :key="item.id"
+              :label="item.locationNo"
+              :value="item.id"
+            />
+            <template #loading>
+              <svg class="circular" viewBox="0 0 50 50">
+                <circle class="path" cx="25" cy="25" r="20" fill="none" />
+              </svg>
+            </template>
+          </el-select>
+          <el-icon class="ml-2" size="20" color="#00329F"><Location /></el-icon>
+        </div>
       </el-form-item>
       <el-form-item label="物料信息" prop="skuInfo">
         <el-input v-model="formData.skuInfo" placeholder="请输入物料信息" />

src/views/mapPage/taskManagement/createTask.vue

@@ -661,6 +661,8 @@
         </div>
       </el-card>
     </el-form>
+
+    <locationSelectionDialog :positionMapId="null" />
   </div>
 </template>
 
@@ -668,6 +670,7 @@
 import { reactive } from 'vue'
 import { RefreshRight, Position } from '@element-plus/icons-vue'
 import * as MapTaskAPi from '@/api/map/mapTask'
+import locationSelectionDialog from '../components/locationSelectionDialog.vue'
 
 defineOptions({ name: 'taskManagementCreateTask' })