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

实时地图封装为通用组件在整体看板适应看板宽度在实时地图初始展示地图图片宽度
编辑地图生成直线改为映射到两点线段中生成线库和区域改为前端将线库id、区域id、线库名称、区域名称等在地图保存接口传递给后端
2025-04-02 10:28:37 +08:00 · 2025-04-02 10:28:31 +08:00 · 2025-04-01 14:36:49 +08:00 · 2025-04-01 14:22:08 +08:00
9 changed files with 699 additions and 1811 deletions
--- a/src/layout/components/AppView.vue
+++ b/src/layout/components/AppView.vue
@ -37,7 +37,9 @@ provide('reload', reload)

 <template>
  <section
-    v-if="currentRoute.name === 'editMapPageRealTimeMap'"
+    v-if="
+      currentRoute.name === 'editMapPageRealTimeMap' || currentRoute.name === 'MapPageRealTimeMap'
+    "
    :class="[
      'w-full bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
      {
--- a/src/styles/var.css
+++ b/src/styles/var.css
@ -33,12 +33,13 @@

  --top-header-hover-color: #215bd8;

-  --top-tool-height: var(--logo-height);
+  /* --top-tool-height: var(--logo-height); */
+  --top-tool-height: 60px;

  --top-tool-p-x: 0;

  /* --tags-view-height: 35px;   开启面包屑时 */
-  --tags-view-height: 16px;
+  --tags-view-height: 0px;
  /* header start */

  /* tab menu start */
--- a/src/views/board/allBoard/index.vue
+++ b/src/views/board/allBoard/index.vue
@ -152,7 +152,7 @@
          />
        </div>
        <div style="width: 100%; padding-bottom: 120px" class="map-box-allBoard">
-          <indexPage ref="indexPageRef" :isAllBoard="true" />
+          <indexPage ref="indexPageRef" :isAllBoard="true" :isFullScreen="true" />
        </div>
        <div
          style="position: fixed; bottom: 20px"
@ -314,8 +314,9 @@ import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
 import { dateFormatter } from '@/utils/formatTime'
 import * as ChartsApi from '@/api/boardCharts'
 import { DICT_TYPE, getIntDictOptions, getDictOptions } from '@/utils/dict'
-import indexPage from './indexPage.vue'
+import indexPage from '../../mapPage/realTimeMap/components/indexPage.vue'
 import * as MapApi from '@/api/map/map'
+
 const router = useRouter() // 路由对象
 const indexPageRef = ref(null)
 const typeList = ref([])
--- a/src/views/board/allBoard/indexPage.vue
+++ b/src/views/board/allBoard/indexPage.vue
--- a/src/views/mapPage/locationList/index.vue
+++ b/src/views/mapPage/locationList/index.vue
@ -36,7 +36,7 @@
          class="!w-240px"
        />
      </el-form-item>
-      <el-form-item label="线库号" prop="laneName">
+      <el-form-item label="线库名称" prop="laneName">
        <el-input
          v-model="queryParams.laneName"
          placeholder="请输入"
@ -45,7 +45,7 @@
          class="!w-240px"
        />
      </el-form-item>
-      <el-form-item label="区域号" prop="areaName">
+      <el-form-item label="区域名称" prop="areaName">
        <el-input
          v-model="queryParams.areaName"
          placeholder="请输入"
@ -83,8 +83,8 @@
    >
      <el-table-column label="序号" type="index" align="center" width="60" />
      <el-table-column label="库位号" align="center" prop="locationNo" />
-      <el-table-column label="线库号" prop="laneName" align="center" />
-      <el-table-column label="区域号" prop="areaName" align="center" />
+      <el-table-column label="线库名称" prop="laneName" align="center" />
+      <el-table-column label="区域名称" prop="areaName" align="center" />
      <el-table-column label="物料信息" prop="skuInfo" align="center" show-overflow-tooltip />
      <el-table-column label="状态" prop="locationUseStatus" align="center">
        <template #default="scope">
--- a/src/views/mapPage/realTimeMap/components-tool/itemAreaSettingDialog.vue
+++ b/src/views/mapPage/realTimeMap/components-tool/itemAreaSettingDialog.vue
@ -92,6 +92,7 @@ const submitForm = async (formEl) => {
      message.success('设置成功')
      emit('itemAreaSettingSubmitSuccess', {
        ...res,
+        skuInfo: form.value.skuInfo,
        mapItemIds: form.value.mapItemIds
      })
    }
--- a/src/views/mapPage/realTimeMap/components/indexPage.vue
+++ b/src/views/mapPage/realTimeMap/components/indexPage.vue
--- a/src/views/mapPage/realTimeMap/editMap.vue
+++ b/src/views/mapPage/realTimeMap/editMap.vue
@ -351,7 +351,7 @@
                      所属线库：{{ item.laneName }}
                    </div>
                    <div class="item-tooltip-name" v-if="item.areaId && item.areaName">
-                      所属线库：{{ item.areaName }}
+                      所属区域：{{ item.areaName }}
                    </div>
                  </div>
                  <div v-else-if="item.type === 3">
@ -1987,6 +1987,8 @@ const clickDrawSelectionArea = () => {

  // 清空框选区域
  state.allDrawSelectionAreaBox = []
+  //去重
+  state.drawSelectionPointList = deduplicateArrayById(state.drawSelectionPointList)
  //只要库位的
  let binLocation = state.drawSelectionPointList.filter((item) => item.type === 2)
  //只要路径点的
@ -2145,6 +2147,17 @@ const GenerateStraightLinesSubmit = (pointList, form) => {
  })
  addEditHistory()
 }
+//去重
+const deduplicateArrayById = (arr) => {
+  const idSet = new Set()
+  return arr.filter((item) => {
+    if (idSet.has(item.id)) {
+      return false
+    }
+    idSet.add(item.id)
+    return true
+  })
+}

 //将一个数组中的点位 按照第一个和最后一个排成一条直线
 const mapPointsToLine = (points, startPointId, endPointId) => {
@ -2156,35 +2169,61 @@ const mapPointsToLine = (points, startPointId, endPointId) => {
    return
  }

-  const dx = startPoint.locationX - endPoint.locationX
-  const dy = startPoint.locationY - endPoint.locationY
-
-  // 处理垂直直线的情况
-  if (dx === 0) {
-    return points.map((point) => {
-      if (point === endPoint || point === startPoint) {
-        return point
-      }
-      return {
-        ...point,
-        locationX: endPoint.locationX
-      }
-    })
-  }
-
-  const slope = dy / dx
-  const intercept = endPoint.locationY - slope * endPoint.locationX
+  const dx = endPoint.locationX - startPoint.locationX
+  const dy = endPoint.locationY - startPoint.locationY
+  const length = Math.sqrt(dx * dx + dy * dy)

  return points.map((point) => {
-    if (point === endPoint || point === startPoint) {
+    if (point.id === startPointId || point.id === endPointId) {
      return point
    }
-    const newY = slope * point.locationX + intercept
+
+    const vx = point.locationX - startPoint.locationX
+    const vy = point.locationY - startPoint.locationY
+    const dotProduct = vx * dx + vy * dy
+    const projectionLength = dotProduct / length
+
+    const t = Math.max(0, Math.min(1, projectionLength / length))
+
+    const newX = startPoint.locationX + t * dx
+    const newY = startPoint.locationY + t * dy
+
    return {
      ...point,
+      locationX: newX,
      locationY: newY
    }
  })
+
+  // const dx = startPoint.locationX - endPoint.locationX
+  // const dy = startPoint.locationY - endPoint.locationY
+
+  // // 处理垂直直线的情况
+  // if (dx === 0) {
+  //   return points.map((point) => {
+  //     if (point === endPoint || point === startPoint) {
+  //       return point
+  //     }
+  //     return {
+  //       ...point,
+  //       locationX: endPoint.locationX
+  //     }
+  //   })
+  // }
+
+  // const slope = dy / dx
+  // const intercept = endPoint.locationY - slope * endPoint.locationX
+
+  // return points.map((point) => {
+  //   if (point === endPoint || point === startPoint) {
+  //     return point
+  //   }
+  //   const newY = slope * point.locationX + intercept
+  //   return {
+  //     ...point,
+  //     locationY: newY
+  //   }
+  // })
 }

 //计算是不是在同一条直线的
@ -2721,6 +2760,7 @@ const itemAreaSettingSubmitSuccess = (obj) => {
      item.areaId = obj.id
      item.dataList.forEach((node) => {
        node.areaName = obj.areaName
+        node.skuInfo = obj.skuInfo
        node.areaId = obj.id
      })
    }
@ -2732,7 +2772,6 @@ const lineLibraryManagementDelete = (mapItemIds) => {
    if (mapItemIds.includes(item.id)) {
      item.laneId = undefined
      item.dataList.forEach((node) => {
-        ;``
        node.laneName = undefined
        node.laneId = undefined
      })
@ -2746,6 +2785,7 @@ const itemAreaManagementDelete = (mapItemIds) => {
      item.areaId = undefined
      item.dataList.forEach((node) => {
        node.areaName = undefined
+        node.skuInfo = undefined
        node.areaId = undefined
      })
    }
@ -2772,6 +2812,7 @@ const itemAreaManagementEdit = (obj) => {
      item.areaId = obj.id
      item.dataList.forEach((node) => {
        node.areaName = obj.areaName
+        node.skuInfo = obj.skuInfo
        node.areaId = obj.id
      })
    }
@ -2952,13 +2993,15 @@ const handleWheel = (event) => {
      if (state.imageChangeMultiple < 4) {
        state.imageChangeMultiple += 0.2
      } else {
+        state.imageChangeMultiple = 3.8
        message.warning('不能在放大了')
      }
    } else {
      //缩小
-      if (state.imageChangeMultiple > 0.2) {
-        state.imageChangeMultiple -= 0.2
+      if (state.imageChangeMultiple > 0.4) {
+        state.imageChangeMultiple -= 0.1
      } else {
+        state.imageChangeMultiple = 0.3
        message.warning('不能在缩小了')
      }
    }
@ -3028,8 +3071,7 @@ onUnmounted(() => {
  }

  .top-tool {
-    margin-top: 5px;
-    margin-bottom: 3px;
+    margin-bottom: 2px;
    .top-tool-list {
      display: flex;
      align-items: center;
--- a/src/views/mapPage/realTimeMap/index.vue
+++ b/src/views/mapPage/realTimeMap/index.vue
@ -1,29 +1,31 @@
 <template>
-  <ContentWrap>
-    <div style="display: flex; align-items: center">
+  <div class="page">
+    <div class="top-div">
      <el-cascader
        v-model="mapValue"
        :options="list"
        @change="handleChangeMap"
        style="width: 160px"
      />
-      <div style="width: 1px; height: 25px; background: #e5e5e5; margin: 0 16px"></div>
-      <el-button @click="createTask" :icon="'CirclePlus'" style="color: #536387"
-        >新建任务</el-button
-      >
-      <el-button @click="editMap" :icon="'EditPen'" style="color: #536387">地图编辑</el-button>
-      <el-button type="danger" @click="emergencyStop" :icon="'Remove'">一键急停</el-button>
+      <div class="line"></div>
+      <el-button @click="createTask" icon="CirclePlus" style="color: #536387"> 新建任务 </el-button>
+      <el-button @click="editMap" icon="EditPen" style="color: #536387">地图编辑</el-button>
+      <el-button type="danger" @click="emergencyStop" icon="Remove">一键急停</el-button>
    </div>
-  </ContentWrap>

-  <div class="main-content">
-    <!-- <div @click="downAgv">导出zip</div> -->
-    <!-- 首页 -->
-    <indexPage ref="indexPageRef" />
+    <div class="main-content">
+      <!-- <div @click="downAgv">导出zip</div> -->
+      <!-- 首页 -->
+      <indexPage ref="indexPageRef" :isFullScreen="false" />
+    </div>
+
+    <!-- 新建任务的弹窗 -->
+    <createTaskDialog
+      v-if="mapValue.length"
+      ref="createTaskDialogRef"
+      :positionMapId="mapValue[1]"
+    />
  </div>
-
-  <!-- 新建任务的弹窗 -->
-  <createTaskDialog v-if="mapValue.length" ref="createTaskDialogRef" :positionMapId="mapValue[1]" />
 </template>

 <script setup>
@ -128,7 +130,6 @@ const getList = async () => {
 const handleChangeMap = async (e) => {
  let item = findChildrenByValues(list.value, e)
  indexPageRef.value.getMapData(item)
-  console.log(item)
  router.replace({
    name: 'MapPageRealTimeMap',
    query: {
@ -191,7 +192,33 @@ onMounted(() => {
 </script>

 <style lang="scss" scoped>
-.main-content {
-  // background-color: #fff;
+.page {
+  position: absolute;
+  width: 100%;
+
+  .top-div {
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+    height: 60px;
+    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 3px;
+    background-color: #fff;
+    position: absolute;
+    z-index: 999;
+    top: 0;
+    left: 0;
+    right: 0;
+
+    .line {
+      width: 1px;
+      height: 25px;
+      background: #e5e5e5;
+      margin: 0 16px;
+    }
+  }
+
+  .main-content {
+    margin-top: 62px;
+  }
 }
 </style>
Author	SHA1	Message	Date
yyy	93477fc638	Merge branch 'xhf' of http://git.znkjfw.com/ak/zn-admin-vue3-wcs into xhf	2025-04-02 10:28:37 +08:00
yyy	2bc20f05f0	实时地图封装为通用组件在整体看板适应看板宽度在实时地图初始展示地图图片宽度编辑地图生成直线改为映射到两点线段中生成线库和区域改为前端将线库id、区域id、线库名称、区域名称等在地图保存接口传递给后端	2025-04-02 10:28:31 +08:00
yyy	77536fca2b	bug修改	2025-04-01 14:36:49 +08:00
yyy	a850adc04f	bug修改	2025-04-01 14:22:08 +08:00