实时地图封装为通用组件 在整体看板适应看板宽度 在实时地图初始展示地图图片宽度

编辑地图生成直线改为映射到两点线段中
生成线库和区域改为前端将线库id、区域id、线库名称、区域名称等在地图保存接口传递给后端

.env.local

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

src/api/infra/file/index.ts

@@ -41,5 +41,5 @@ export const createFile = (data: any) => {
 
 // 上传文件
 export const updateFile = (data: any) => {
-  return request.upload({ url: '/infra/file/businessUploadFile', data })
+  return request.upload({ url: '/infra/file/upload', data })
 }

src/components/UploadFile/src/useUpload.ts

@@ -8,7 +8,7 @@ import axios from 'axios'
  */
 export const getUploadUrl = (): string => {
   // return import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/infra/file/upload'
-  return import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/infra/file/businessUploadFile'
+  return import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/infra/file/upload'
 }
   
 

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([])

src/views/board/device/index.vue

@@ -24,6 +24,7 @@
               v-model="queryParams.deviceNo"
               placeholder="请输入设备编号"
               @keyup.enter="getCarList"
+              clearable
             >
               <template #append>
                 <el-button :icon="'search'" @click="getCarList" />
@@ -83,11 +84,13 @@
           </div>
           <div class="item-inner-right-msg">
             <div class="item-inner-right-msg-item m-b-10">
-              <div class="item-inner-right-msg-item-name">编号</div>
+
-              <div class="item-inner-right-msg-item-value">{{ item.deviceNo || '' }}</div>
+              <div class="item-inner-right-msg-item-name ">编号</div>
+              <div class="item-inner-right-msg-item-value overhide">{{ item.deviceNo  || ''}}</div>
+
             </div>
             <div class="item-inner-right-msg-item m-b-10">
-              <div class="item-inner-right-msg-item-name">是否启用</div>
+              <div class="item-inner-right-msg-item-name overhide">是否启用</div>
               <div class="item-inner-right-msg-item-value">
                 <span v-if="item.deviceEnable == 0" style="color: #c60606">禁用</span>
                 <span v-if="item.deviceEnable == 1" style="color: #4dc606">启用</span>
@@ -100,8 +103,8 @@
               </div>
             </div>
             <div class="item-inner-right-msg-item">
-              <div class="item-inner-right-msg-item-name">最后通讯时间</div>
+              <div class="item-inner-right-msg-item-name overhide">最后通讯时间</div>
-              <div class="item-inner-right-msg-item-value" v-if="item.deviceLastTime !== null"
+              <div class="item-inner-right-msg-item-value overhide" v-if="item.deviceLastTime !== null"
                 >{{ item.deviceLastTime || '' }}
               </div>
             </div>
@@ -676,4 +679,12 @@ input::-webkit-input-placeholder {
   font-size: 13px;
   color: #a4afca;
 }
+.overhide{
+  overflow: hidden;         /* 超出部分隐藏 */
+  display: -webkit-box;     /* 使用 Flexbox 布局 */
+  -webkit-box-orient: vertical; /* 设置盒子为垂直方向排列 */
+  -webkit-line-clamp: 2;    /* 限制显示的行数 */
+  text-overflow: ellipsis;  /* 超出部分用省略号表示 */
+
+}
 </style>

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="laneName" align="center" />
-      <el-table-column label="区域号" prop="areaName" 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">

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

src/views/mapPage/realTimeMap/editMap.vue

@@ -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 dx = endPoint.locationX - startPoint.locationX
-  const dy = startPoint.locationY - endPoint.locationY
+  const dy = endPoint.locationY - startPoint.locationY
-
+  const length = Math.sqrt(dx * dx + dy * dy)
-  // 处理垂直直线的情况
-  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) {
+    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) {
+      if (state.imageChangeMultiple > 0.4) {
-        state.imageChangeMultiple -= 0.2
+        state.imageChangeMultiple -= 0.1
       } else {
+        state.imageChangeMultiple = 0.3
         message.warning('不能在缩小了')
       }
     }

src/views/mapPage/realTimeMap/index.vue

@@ -16,7 +16,7 @@
     <div class="main-content">
       <!-- <div @click="downAgv">导出zip</div> -->
       <!-- 首页 -->
-      <indexPage ref="indexPageRef" />
+      <indexPage ref="indexPageRef" :isFullScreen="false" />
     </div>
 
     <!-- 新建任务的弹窗 -->
@@ -130,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: {
@@ -196,7 +195,6 @@ onMounted(() => {
 .page {
   position: absolute;
   width: 100%;
-  height: 100%;
 
   .top-div {
     display: flex;
@@ -220,9 +218,6 @@ onMounted(() => {
   }
 
   .main-content {
-    width: 100%;
-    overflow: auto;
-    position: relative;
     margin-top: 62px;
   }
 }