ak/zn-admin-vue3-wcs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
编辑地图生成直线改为映射到两点线段中
生成线库和区域改为前端将线库id、区域id、线库名称、区域名称等在地图保存接口传递给后端
This commit is contained in:
yyy 2025-04-02 10:28:31 +08:00
commit 2bc20f05f0
11 changed files with 591 additions and 1703 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.local
View File

@ -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.45:48080'
# VITE_BASE_URL='http://192.168.0.153:48080'
VITE_BASE_URL='http://192.168.0.45:48080'
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
VITE_UPLOAD_TYPE=server

2
src/api/infra/file/index.ts
View File

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

2
src/components/UploadFile/src/useUpload.ts
View File

@ -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'
}

5
src/views/board/allBoard/index.vue
View File

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

1121
src/views/board/allBoard/indexPage.vue
View File

File diff suppressed because it is too large Load Diff

21
src/views/board/device/index.vue
View File

@ -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-value" v-if="item.deviceLastTime !== null"
<div class="item-inner-right-msg-item-name overhide">最后通讯时间</div>
<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>

8
src/views/mapPage/locationList/index.vue
View File

@ -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">

1
src/views/mapPage/realTimeMap/components-tool/itemAreaSettingDialog.vue
View File

@ -92,6 +92,7 @@ const submitForm = async (formEl) => {
message.success('设置成功')
emit('itemAreaSettingSubmitSuccess', {
...res,
skuInfo: form.value.skuInfo,
mapItemIds: form.value.mapItemIds
})
}

1034
src/views/mapPage/realTimeMap/components/indexPage.vue
View File

File diff suppressed because it is too large Load Diff

89
src/views/mapPage/realTimeMap/editMap.vue
View File

@ -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('不能在缩小了')
}
}

7
src/views/mapPage/realTimeMap/index.vue
View File

@ -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;
}
}