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

.env.dev

@@ -6,7 +6,7 @@ VITE_DEV=true
 # 请求路径
 # VITE_BASE_URL='http://192.168.0.66:48080'
 # VITE_BASE_URL='http://192.168.0.189:48080'
-VITE_BASE_URL='http://127.0.0.1:48080'
+VITE_BASE_URL='http://192.168.0.45:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
 VITE_UPLOAD_TYPE=server

.env.local

@@ -4,8 +4,9 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-VITE_BASE_URL='http://192.168.0.74:48080'
+# VITE_BASE_URL='http://192.168.0.74:48080'
 # VITE_BASE_URL='http://192.168.0.189:48080'
+VITE_BASE_URL='http://192.168.0.45:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
 VITE_UPLOAD_TYPE=server

src/views/mapPage/example/转换成实际坐标demo.vue

@@ -1,151 +0,0 @@
-<template>
-  <div class="map-container" ref="mapContainer">
-    <!-- 地图 -->
-    <div
-      class="map"
-      :style="{
-        backgroundImage: `url(${mapImage})`,
-        transform: `scale(${scale})`,
-        transformOrigin: '0 0',
-        width: `${mapWidth}px`,
-        height: `${mapHeight}px`
-      }"
-      @click="addLocation"
-    >
-      <!-- 库位 -->
-      <div
-        v-for="(location, index) in locations"
-        :key="index"
-        class="location"
-        :style="{
-          left: `${location.projectX}px`,
-          top: `${location.projectY}px`,
-          transform: `scale(${scale})` // 反向缩放库位图片
-        }"
-      >
-        <img src="@/assets/location-icon.png" alt="库位" />
-      </div>
-    </div>
-
-    <!-- 放大缩小按钮 -->
-    <div class="controls">
-      <button @click="zoomIn">放大</button>
-      <button @click="zoomOut">缩小</button>
-      <button @click="saveLocations">保存</button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import mapImage from '@/assets/warehouse-map.png' // 扫描图路径
-import locationIcon from '@/assets/location-icon.png' // 库位图标路径
-
-const origin = [-54.4, -34.2]
-const resolution = 0.05
-
-const mapContainer = ref(null) // 地图容器
-const scale = ref(1) // 缩放比例
-const locations = ref([]) // 库位列表
-const mapWidth = ref(0) // 地图宽度
-const mapHeight = ref(0) // 地图高度
-
-// 加载地图图片并设置初始尺寸
-onMounted(() => {
-  const img = new Image()
-  img.src = mapImage
-  img.onload = () => {
-    mapWidth.value = img.width
-    mapHeight.value = img.height
-  }
-})
-
-// 添加库位
-const addLocation = (event) => {
-  const rect = mapContainer.value.getBoundingClientRect()
-  const scrollLeft = mapContainer.value.scrollLeft // 水平滚动条偏移量
-  const scrollTop = mapContainer.value.scrollTop // 垂直滚动条偏移量
-  const devicePixelRatio = window.devicePixelRatio || 1
-
-  // 计算页面坐标（考虑设备像素比和滚动条偏移量）
-  const projectX = (event.clientX - rect.left + scrollLeft) / scale.value / devicePixelRatio
-  const projectY = (event.clientY - rect.top + scrollTop) / scale.value / devicePixelRatio
-
-  // 转换为实际坐标
-  const actualX = (projectX - origin[0]) / resolution
-  const actualY = (projectY - origin[1]) / resolution
-
-  // 添加库位
-  locations.value.push({
-    projectX,
-    projectY,
-    actualX,
-    actualY
-  })
-}
-
-// 放大
-const zoomIn = () => {
-  scale.value *= 1.2
-}
-
-// 缩小
-const zoomOut = () => {
-  scale.value /= 1.2
-}
-
-// 保存点位坐标
-const saveLocations = () => {
-  console.log(
-    '项目点位坐标：',
-    locations.value.map((loc) => ({ x: loc.projectX, y: loc.projectY }))
-  )
-  console.log(
-    '实际现场点位坐标：',
-    locations.value.map((loc) => ({ x: loc.actualX, y: loc.actualY }))
-  )
-  alert('点位坐标已保存，请查看控制台输出。')
-}
-</script>
-
-<style scoped>
-.map-container {
-  position: relative;
-  width: 100%;
-  height: 80vh;
-  overflow: auto;
-  border: 1px solid #ccc;
-}
-
-.map {
-  background-size: contain;
-  background-repeat: no-repeat;
-  position: relative;
-}
-
-.location {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-}
-
-.location img {
-  width: 100%;
-  height: 100%;
-}
-
-.controls {
-  position: fixed;
-  top: 110px;
-  right: 110px;
-  display: flex;
-  gap: 10px;
-}
-
-.controls button {
-  padding: 5px 10px;
-  font-size: 14px;
-  cursor: pointer;
-}
-</style>

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

@@ -23,8 +23,8 @@
 
   <!-- 新增设备 -->
   <Dialog v-model="addDeviceVisible" title="设备" width="586" class="equipment-form-dialog">
-    <el-form :model="deviceInfo" label-width="90">
+    <el-form :model="deviceInfo" label-width="90" ref="ruleFormRef" :rules="rules">
-      <el-form-item label="设备类型" required>
+      <el-form-item prop="deviceType" label="设备类型" required>
         <el-select
           v-model="deviceInfo.deviceType"
           class="!w-400px"
@@ -40,7 +40,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="设备编号" required>
+      <el-form-item prop="deviceInfoId" label="设备编号" required>
         <el-select
           v-model="deviceInfo.deviceInfoId"
           class="!w-400px"
@@ -127,6 +127,7 @@ const addDevice = () => {
 }
 //类型改变
 const deviceTypeChange = async () => {
+  deviceInfo.value.deviceInfoId = ''
   getAllDeviceList()
 }
 const getAllDeviceList = async () => {
@@ -136,12 +137,20 @@ const getAllDeviceList = async () => {
   })
 }
 //新增表单新增
+const ruleFormRef = ref()
+const rules = reactive({
+  deviceType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
+  deviceInfoId: [{ required: true, message: '请选择设备类型', trigger: 'change' }]
+})
 const submitAddForm = async () => {
+  await ruleFormRef.value.validate(async (valid, fields) => {
+    if (!valid) return
     deviceInfo.value.positionMapId = props.positionMapId
     await MapApi.mapBindDeviceInfo(deviceInfo.value)
     message.success('新增成功')
     addDeviceVisible.value = false
     getDeviceList()
+  })
 }
 
 const equipmentList = ref([])
@@ -159,7 +168,7 @@ const dialogClose = () => {
 const initAddForm = () => {
   deviceInfo.value.deviceInfoId = ''
   deviceInfo.value.deviceType = ''
-  getAllDeviceList()
+  allDeviceList.value = []
 }
 
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗

src/views/mapPage/realTimeMap/editMap.vue

@@ -395,8 +395,6 @@
               v-if="item.type === 7 && item.layerSelectionShow"
               :style="{
                 position: 'absolute',
-                left: item.locationX + 'px',
-                top: item.locationY + 'px',
                 color: item.fontColor,
                 fontSize: item.fontSize + 'px',
                 fontFamily: item.fontFamily,
@@ -760,10 +758,15 @@ const resizeEnd = (locationX, locationY, w, h, item, index) => {
   nextTick(() => {
     let x = Number(locationX) + Number(item.locationWidePx) / 2
     let y = Number(locationY) + Number(item.locationDeepPx) / 2
+    let width = Number(w) * imgBgObj.resolution * 100 //实际的宽高cm
+    let height = Number(h) * imgBgObj.resolution * 100
+
     let actualPoint = disposeEventPoint(x, y)
 
     state.allMapPointInfo[index].locationX = x
     state.allMapPointInfo[index].locationY = y
+    state.allMapPointInfo[index].locationWide = width
+    state.allMapPointInfo[index].locationDeep = height
     state.allMapPointInfo[index].locationWidePx = w
     state.allMapPointInfo[index].locationDeepPx = h
     state.allMapPointInfo[index].actualLocationX = actualPoint.actualLocationX
@@ -781,8 +784,8 @@ const resizeEnd = (locationX, locationY, w, h, item, index) => {
       if (item.id === route.endPointId) {
         route.endPointX = x
         route.endPointY = y
-        route.endHigh = Number(item.locationDeep)
+        route.endHigh = Number(item.locationDeepPx)
-        route.endWidth = Number(item.locationDeep)
+        route.endWidth = Number(item.locationWidePx)
         route.actualEndPointX = actualPoint.actualLocationX
         route.actualEndPointY = actualPoint.actualLocationY
       }
@@ -984,7 +987,11 @@ const handleInputEnd = () => {
       fontFamily: state.inputBoxStyle.fontFamily, //字体类型
       fontSize: state.inputBoxStyle.fontSize,
       dataObj: {}, //存 设备点 停车点 文字
-      layerSelectionShow: true
+      layerSelectionShow: true,
+      locationDeep: 20,
+      locationWide: 20,
+      locationDeepPx: 4,
+      locationWidePx: 4
     })
     addEditHistory()
     state.inputBoxValue = ''
@@ -1347,6 +1354,7 @@ const toolbarClick = async (item) => {
       break
     case 'move':
       //移动
+      console.log(state.allMapPointInfo[state.currentItemIndex])
       state.moveForm.locationX = Number(state.allMapPointInfo[state.currentItemIndex].locationX)
       state.moveForm.locationY = Number(state.allMapPointInfo[state.currentItemIndex].locationY)
       break
@@ -1696,13 +1704,11 @@ const startFromPoint = (index, event) => {
 //开始框选绘制
 const startDrawSelection = (event) => {
   if (
-    toolbarSwitchType.value !== 'createLineLibrary' &&
+    toolbarSwitchType.value === 'createLineLibrary' ||
-    toolbarSwitchType.value !== 'createRegion' &&
+    toolbarSwitchType.value === 'createRegion' ||
-    toolbarSwitchType.value !== 'drawRoute' &&
+    toolbarSwitchType.value === 'drawRoute' ||
-    toolbarSwitchType.value !== 'generateLine'
+    toolbarSwitchType.value == 'generateLine'
-  )
+  ) {
-    return
-
     const backgroundRect = mapBackgroundRef.value.getBoundingClientRect()
 
     const x = disposeEventPoints(event).x
@@ -1715,6 +1721,7 @@ const startDrawSelection = (event) => {
       state.drawSelectionAreaBox = { x: x, y: y, width: 0, height: 0 }
     }
     event.preventDefault() // 阻止默认行为（避免选中图片或文本）
+  }
 }
 // 更新框选区域
 const updateDrawSelection = (event) => {
@@ -1736,7 +1743,6 @@ const updateDrawSelection = (event) => {
       }
     }
     event.preventDefault() // 阻止默认行为（避免选中图片或文本）
-    return
   }
   if (toolbarSwitchType.value === 'clickDrawRoute') {
     // 实时绘制
@@ -1748,7 +1754,6 @@ const updateDrawSelection = (event) => {
       state.currentDrawY = y
     }
     event.preventDefault() // 阻止默认行为（避免选中图片或文本）
-    return
   }
 }
 //结束框选绘制
@@ -2468,6 +2473,8 @@ const getAllNodeList = async () => {
       item.resizable = false
       item.rotatable = true
       item.lockAspectRatio = true
+      item.locationDeep = 20
+      item.locationWide = 20
     }
 
     //要将实际的cm改成px
@@ -2515,7 +2522,20 @@ const saveMap = async () => {
 const saveNodeList = async () => {
   let list = state.allMapPointInfo
   list.forEach((item) => {
-    if (item.type === 7) {
+    if (item.type === 2) {
+      // 库位点 类型为数组
+      item.dataList.forEach((node) => {
+        node.locationDeep = item.locationDeep
+        node.locationWide = item.locationWide
+      })
+      item.dataJson = JSON.stringify(item.dataList)
+    } else if (item.type === 3 || item.type === 4) {
+      //设备类型
+      item.dataObj.locationWide = item.locationWide
+      item.dataObj.locationDeep = item.locationDeep
+      item.dataJson = JSON.stringify(item.dataObj)
+    } else if (item.type === 7) {
+      //文字类型
       item.dataObj.positionMapId = imgBgObj.positionMapId
       item.dataObj.text = item.text
       item.dataObj.fontColor = item.fontColor