From e742405735a862ba5f393581390bbdd7fa30c0ef Mon Sep 17 00:00:00 2001
From: yyy <2605810609@qq.com>
Date: Thu, 20 Mar 2025 08:59:13 +0800
Subject: [PATCH] =?UTF-8?q?bug=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../itemAreaManagementDialog.vue              |  56 ++++++-
 .../lineLibraryManagementDialog.vue           |  47 +++++-
 src/views/mapPage/realTimeMap/editMap.vue     | 111 ++++++++------
 src/views/mapPage/realTimeMap/test.vue        | 145 ++++++++++++------
 4 files changed, 260 insertions(+), 99 deletions(-)

diff --git a/src/views/mapPage/realTimeMap/components-tool/itemAreaManagementDialog.vue b/src/views/mapPage/realTimeMap/components-tool/itemAreaManagementDialog.vue
index 229b8336..02bfc38c 100644
--- a/src/views/mapPage/realTimeMap/components-tool/itemAreaManagementDialog.vue
+++ b/src/views/mapPage/realTimeMap/components-tool/itemAreaManagementDialog.vue
@@ -1,8 +1,8 @@
 <template>
   <Dialog
     v-model="dialogFormVisible"
-    title="区域管理"
-    width="600"
+    title="物料区域管理"
+    width="660"
     class="item-area-management-dialog"
     @close="dialogClose"
   >
@@ -12,11 +12,12 @@
       :header-cell-style="{ backgroundColor: '#EBF1FF', color: '#0D162A', padding: '13px 0' }"
       v-loading="loading"
     >
-      <el-table-column type="index" width="50" align="center" />
-      <el-table-column prop="areaName" label="库区名称" align="center" />
-      <el-table-column prop="skuInfo" label="库区说明" align="center" />
-      <el-table-column label="操作" align="center" width="100">
+      <el-table-column type="index" label="序号" width="80" align="center" />
+      <el-table-column prop="skuInfo" label="物料区域名称" align="center" />
+      <el-table-column prop="areaName" label="物料名称" align="center" />
+      <el-table-column label="操作" align="center" width="140">
         <template #default="scope">
+          <el-button size="small" type="primary" @click="handleEdit(scope.row)"> 编辑 </el-button>
           <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
             删除
           </el-button>
@@ -34,6 +35,23 @@
       />
     </div>
   </Dialog>
+
+  <el-dialog v-model="editDialogFormVisible" title="编辑" width="400">
+    <el-form :model="editForm" label-width="110" :rules="editRules" ref="editFormEl">
+      <el-form-item label="物料区域名称" prop="skuInfo" required>
+        <el-input v-model="editForm.skuInfo" />
+      </el-form-item>
+      <el-form-item label="物料名称" prop="areaName" required>
+        <el-input v-model="editForm.areaName" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="editDialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="editSubmit"> 确定 </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup>
@@ -93,6 +111,32 @@ const handleDelete = async (id) => {
   } catch {}
 }
 
+//编辑
+const editForm = ref({
+  skuInfo: '',
+  areaName: ''
+})
+const editDialogFormVisible = ref(false)
+const handleEdit = (row) => {
+  editDialogFormVisible.value = true
+  editForm.value = row
+}
+const editRules = reactive({
+  skuInfo: [{ required: true, message: '请输入物料区域名称', trigger: 'blur' }],
+  areaName: [{ required: true, message: '请输入物料名称', trigger: 'blur' }]
+})
+const editFormEl = ref()
+const editSubmit = async () => {
+  await editFormEl.value.validate(async (valid, fields) => {
+    if (valid) {
+      await MapApi.createOrEditOrDelHouseArea(editForm.value)
+      await getWareHouseList()
+      editDialogFormVisible.value = false
+      message.success('编辑成功')
+    }
+  })
+}
+
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 </script>
 
diff --git a/src/views/mapPage/realTimeMap/components-tool/lineLibraryManagementDialog.vue b/src/views/mapPage/realTimeMap/components-tool/lineLibraryManagementDialog.vue
index 390373b6..2ab40a0a 100644
--- a/src/views/mapPage/realTimeMap/components-tool/lineLibraryManagementDialog.vue
+++ b/src/views/mapPage/realTimeMap/components-tool/lineLibraryManagementDialog.vue
@@ -2,7 +2,7 @@
   <Dialog
     v-model="dialogFormVisible"
     title="线库管理"
-    width="600"
+    width="660"
     class="line-library-management-dialog"
     @close="dialogClose"
   >
@@ -12,10 +12,11 @@
       :header-cell-style="{ backgroundColor: '#EBF1FF', color: '#0D162A', padding: '13px 0' }"
       v-loading="loading"
     >
-      <el-table-column type="index" width="50" align="center" />
-      <el-table-column prop="laneName" label="巷道名称" align="center" />
+      <el-table-column type="index" label="序号" width="80" align="center" />
+      <el-table-column prop="laneName" label="线库名称" align="center" />
       <el-table-column label="操作" align="center">
         <template #default="scope">
+          <el-button size="small" type="primary" @click="handleEdit(scope.row)"> 编辑 </el-button>
           <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
             删除
           </el-button>
@@ -33,6 +34,20 @@
       />
     </div>
   </Dialog>
+
+  <el-dialog v-model="editDialogFormVisible" title="编辑" width="400">
+    <el-form :model="editForm" :rules="editRules" ref="editFormEl">
+      <el-form-item label="线库名称" prop="laneName" required>
+        <el-input v-model="editForm.laneName" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="editDialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="editSubmit"> 确定 </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup>
@@ -83,7 +98,7 @@ const getLineLibraryList = async () => {
 const handleDelete = async (id) => {
   try {
     // 删除的二次确认
-    await message.delConfirm('请确认是否删除该物料区域？')
+    await message.delConfirm('请确认是否删除该线库？')
     // 发起删除
     await MapApi.deleteWareLaneArea(id)
     message.success('删除成功')
@@ -92,6 +107,30 @@ const handleDelete = async (id) => {
   } catch {}
 }
 
+//编辑
+const editForm = ref({
+  laneName: ''
+})
+const editDialogFormVisible = ref(false)
+const handleEdit = (row) => {
+  editDialogFormVisible.value = true
+  editForm.value = row
+}
+const editRules = reactive({
+  laneName: [{ required: true, message: '请输入线库名称', trigger: 'blur' }]
+})
+const editFormEl = ref()
+const editSubmit = async () => {
+  await editFormEl.value.validate(async (valid, fields) => {
+    if (valid) {
+      await MapApi.createOrEditOrDelHouseLane(editForm.value)
+      await getLineLibraryList()
+      editDialogFormVisible.value = false
+      message.success('编辑成功')
+    }
+  })
+}
+
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 </script>
 
diff --git a/src/views/mapPage/realTimeMap/editMap.vue b/src/views/mapPage/realTimeMap/editMap.vue
index d44122ba..a268c131 100644
--- a/src/views/mapPage/realTimeMap/editMap.vue
+++ b/src/views/mapPage/realTimeMap/editMap.vue
@@ -605,35 +605,18 @@
 
         <!-- 测距 绘制点和连线 -->
         <template v-if="state.measureDistancesPoints.length > 0">
+          <!-- 测距的线 -->
+          <div v-if="state.measureDistancesPoints.length === 2" :style="rangingLineStyle"></div>
+          <!-- 显示距离信息 -->
+          <div v-if="state.measureDistancesNum !== null" :style="rangingTextStyle">
+            {{ state.measureDistancesNum.toFixed(2) }}米
+          </div>
+          <!-- 测距的点 -->
           <div
             v-for="(point, index) in state.measureDistancesPoints"
             :key="index"
-            :style="{
-              position: 'absolute',
-              left: `${point.x - 3}px`,
-              top: `${point.y - 3}px`,
-              width: '6px',
-              height: '6px',
-              backgroundColor: '#00329F',
-              borderRadius: '50%'
-            }"
+            :style="getRangingPointStyle(point)"
           ></div>
-          <div
-            v-if="state.measureDistancesPoints.length === 2"
-            :style="{
-              position: 'absolute',
-              left: `${state.measureDistancesPoints[0].x}px`,
-              top: `${state.measureDistancesPoints[0].y}px`,
-              width: `${computedLineWidth}px`,
-              height: '2px',
-              backgroundColor: '#00329F',
-              transform: `rotate(${computedLineAngle}deg)`,
-              transformOrigin: '0 0',
-              textAlign: 'center'
-            }"
-          >
-            距离：{{ state.measureDistancesNum.toFixed(2) }}米</div
-          >
         </template>
 
         <!-- 文字输入区域 -->
@@ -2318,28 +2301,68 @@ const editMapRouteDialogSubmit = (form) => {
   addEditHistory() //重新监听键盘事件
 }
 //测距相关
-// 计算两点之间的距离
-const calculateDistance = (point1, point2) => {
-  const dx = point2.x - point1.x
-  const dy = point2.y - point1.y
-  return Math.sqrt(dx * dx + dy * dy)
-}
-// 计算连线的角度
-const computedLineAngle = computed(() => {
+// 计算连线的样式
+const rangingLineStyle = computed(() => {
   if (state.measureDistancesPoints.length === 2) {
-    const dx = state.measureDistancesPoints[1].x - state.measureDistancesPoints[0].x
-    const dy = state.measureDistancesPoints[1].y - state.measureDistancesPoints[0].y
-    return Math.atan2(dy, dx) * (180 / Math.PI)
+    const [point1, point2] = state.measureDistancesPoints
+    const length = Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2))
+    const angle = (Math.atan2(point2.y - point1.y, point2.x - point1.x) * 180) / Math.PI
+    return {
+      position: 'absolute',
+      left: `${point1.x}px`,
+      top: `${point1.y}px`,
+      width: `${length}px`,
+      height: '2px',
+      backgroundColor: 'red',
+      transform: `rotate(${angle}deg)`,
+      transformOrigin: '0 0'
+    }
   }
-  return 0
+  return {}
 })
 
-// 计算连线的长度
-const computedLineWidth = computed(() => {
+// 计算距离信息的样式（显示在连线中间，并根据角度调整文字方向）
+const rangingTextStyle = computed(() => {
   if (state.measureDistancesPoints.length === 2) {
-    return calculateDistance(state.measureDistancesPoints[0], state.measureDistancesPoints[1])
+    const [point1, point2] = state.measureDistancesPoints
+    const midX = (point1.x + point2.x) / 2
+    const midY = (point1.y + point2.y) / 2
+    const angle = (Math.atan2(point2.y - point1.y, point2.x - point1.x) * 180) / Math.PI
+
+    // 调整文字方向，使其始终易于阅读
+    let textRotation = 0
+    if (angle > 90 || angle < -90) {
+      textRotation = angle + 180 // 翻转文字方向
+    } else {
+      textRotation = angle
+    }
+
+    return {
+      position: 'absolute',
+      left: `${midX}px`,
+      top: `${midY}px`,
+      transform: `translate(-50%, -50%) rotate(${textRotation}deg)`,
+      backgroundColor: 'rgba(255, 255, 255, 0.8)',
+      padding: '2px',
+      borderRadius: '4px',
+      fontSize: '12px',
+      color: 'black',
+      whiteSpace: 'nowrap', // 防止文字换行
+      pointerEvents: 'none' // 防止文字遮挡点击事件
+    }
   }
-  return 0
+  return {}
+})
+
+// 计算点的样式
+const getRangingPointStyle = (point) => ({
+  position: 'absolute',
+  left: `${point.x - 4}px`,
+  top: `${point.y - 4}px`,
+  width: '8px',
+  height: '8px',
+  backgroundColor: 'blue',
+  borderRadius: '50%'
 })
 
 //计算路线的距离
@@ -2411,9 +2434,9 @@ const measureDistancesClick = (event) => {
     state.measureDistancesPoints.push({ x: offsetX, y: offsetY })
     if (state.measureDistancesPoints.length === 2) {
       // 计算两点之间的距离
-      let distancesNum = calculateDistance(
-        state.measureDistancesPoints[0],
-        state.measureDistancesPoints[1]
+      const [point1, point2] = state.measureDistancesPoints
+      let distancesNum = Math.sqrt(
+        Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2)
       )
       state.measureDistancesNum = distancesNum * Number(imgBgObj.resolution)
     }
diff --git a/src/views/mapPage/realTimeMap/test.vue b/src/views/mapPage/realTimeMap/test.vue
index 95a8eaca..697e0388 100644
--- a/src/views/mapPage/realTimeMap/test.vue
+++ b/src/views/mapPage/realTimeMap/test.vue
@@ -1,60 +1,115 @@
 <template>
-  <div>
-    <button @click="scale *= 1.1">放大</button>
-    <button @click="scale /= 1.1">缩小</button>
-    <div
-      ref="containerRef"
-      :style="{ transform: `scale(${scale})` }"
-      @mousemove="handleMouseMove"
-      class="scalable-container"
-    >
-      <div :style="{ left: `${mouseX}px`, top: `${mouseY}px` }" class="cursor"></div>
+  <div @click="handleClick" style="position: relative; width: 100%; height: 100vh">
+    <!-- 画线 -->
+    <div v-if="state.measureDistancesPoints.length === 2" :style="rangingLineStyle"></div>
+
+    <!-- 显示距离信息 -->
+    <div v-if="state.measureDistancesNum !== null" :style="rangingTextStyle">
+      距离: {{ state.measureDistancesNum.toFixed(2) }} 像素
     </div>
+
+    <!-- 显示点 -->
+    <div
+      v-for="(point, index) in state.measureDistancesPoints"
+      :key="index"
+      :style="getRangingPointStyle(point)"
+    ></div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed } from 'vue'
 
-const containerRef = ref(null)
-const scale = ref(1)
-const mouseX = ref(0)
-const mouseY = ref(0)
+const state = reactive({
+  measureDistancesPoints: [],
+  measureDistancesNum: null
+})
 
-const handleMouseMove = (event) => {
-  const rect = containerRef.value.getBoundingClientRect()
-  const offsetX = event.clientX - rect.left
-  const offsetY = event.clientY - rect.top
+// 处理点击事件
+const handleClick = (event) => {
+  if (state.measureDistancesPoints.length === 2) {
+    // 如果已经有两个点，清空信息
+    state.measureDistancesPoints = []
+    state.measureDistancesNum = null
+  } else {
+    // 添加当前点击的点
+    state.measureDistancesPoints.push({ x: event.clientX, y: event.clientY })
 
-  // 转换鼠标坐标
-  mouseX.value = offsetX / scale.value
-  mouseY.value = offsetY / scale.value
+    // 当有两个点时，计算距离
+    if (state.measureDistancesPoints.length === 2) {
+      const [point1, point2] = state.measureDistancesPoints
+      state.measureDistancesNum = Math.sqrt(
+        Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2)
+      )
+    }
+  }
 }
 
-onMounted(() => {
-  // 初始化鼠标位置
-  const rect = containerRef.value.getBoundingClientRect()
-  mouseX.value = rect.width / 2
-  mouseY.value = rect.height / 2
+// 计算连线的样式
+const rangingLineStyle = computed(() => {
+  if (state.measureDistancesPoints.length === 2) {
+    const [point1, point2] = state.measureDistancesPoints
+    const length = Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2))
+    const angle = (Math.atan2(point2.y - point1.y, point2.x - point1.x) * 180) / Math.PI
+    return {
+      position: 'absolute',
+      left: `${point1.x}px`,
+      top: `${point1.y}px`,
+      width: `${length}px`,
+      height: '2px',
+      backgroundColor: 'red',
+      transform: `rotate(${angle}deg)`,
+      transformOrigin: '0 0'
+    }
+  }
+  return {}
+})
+
+// 计算距离信息的样式（显示在连线中间，并根据角度调整文字方向）
+const rangingTextStyle = computed(() => {
+  if (state.measureDistancesPoints.length === 2) {
+    const [point1, point2] = state.measureDistancesPoints
+    const midX = (point1.x + point2.x) / 2
+    const midY = (point1.y + point2.y) / 2
+    const angle = (Math.atan2(point2.y - point1.y, point2.x - point1.x) * 180) / Math.PI
+
+    // 调整文字方向，使其始终易于阅读
+    let textRotation = 0
+    if (angle > 90 || angle < -90) {
+      textRotation = angle + 180 // 翻转文字方向
+    } else {
+      textRotation = angle
+    }
+
+    return {
+      position: 'absolute',
+      left: `${midX}px`,
+      top: `${midY}px`,
+      transform: `translate(-50%, -50%) rotate(${textRotation}deg)`,
+      backgroundColor: 'rgba(255, 255, 255, 0.8)',
+      padding: '4px 8px',
+      borderRadius: '4px',
+      fontSize: '14px',
+      color: 'black',
+      whiteSpace: 'nowrap', // 防止文字换行
+      pointerEvents: 'none' // 防止文字遮挡点击事件
+    }
+  }
+  return {}
+})
+
+// 计算点的样式
+const getRangingPointStyle = (point) => ({
+  position: 'absolute',
+  left: `${point.x - 5}px`,
+  top: `${point.y - 5}px`,
+  width: '10px',
+  height: '10px',
+  backgroundColor: 'blue',
+  borderRadius: '50%'
 })
 </script>
 
-<style scoped>
-.scalable-container {
-  position: relative;
-  width: 200px;
-  height: 200px;
-  border: 1px solid #ccc;
-  margin-top: 20px;
-  transform-origin: top left;
-  transition: transform 0.3s;
-}
-
-.cursor {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background-color: red;
-  border-radius: 50%;
-}
+<style>
+/* 你可以在这里添加一些样式 */
 </style>