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

增加loading

Browse Source
This commit is contained in:
yyy 2025-07-17 14:11:03 +08:00
parent 09d2a03b9e
commit 5847c3eaa4
3 changed files with 93 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/board/carBoard/index.vue
View File

@ -960,6 +960,7 @@ input::input-placeholder {
transition: background 0.2s;
}
.popover-menu-item:hover {
background: #f5f5f5;
background-color: #f5f7fa;
color: #1677ff;
}
</style>

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

@ -310,6 +310,7 @@ import { propTypes } from '@/utils/propTypes'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import dayjs from 'dayjs'
import { throttle, debounce } from 'lodash-es'
import { ElLoading } from 'element-plus'
const message = useMessage() // 消息弹窗
@ -770,10 +771,24 @@ const getMapDownloadPng = async (mapInfo) => {
imgBgObj.imgUrl = data
//获取节点 路径等信息
await getAllNodeList()
await getAllMapRoute()
await computedRatio()
await getRobotByFloorAndAreaList()
const loading = ElLoading.service({
lock: true,
text: '地图数据加载中',
background: 'rgba(255, 255, 255, 0.7)'
})
try {
await getAllNodeList()
await getAllMapRoute()
await computedRatio()
await getRobotByFloorAndAreaList()
//关闭loading
loading.close()
} catch (error) {
loading.close()
} finally {
loading.close()
}
}
// 获取地图连线
const getAllMapRoute = async () => {

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

@ -1320,9 +1320,6 @@ const inputBoxRef = ref() //文字输入框
const message = useMessage() // 消息弹窗
// loading实例全局变量，确保在<script setup>顶层声明
let loading = null
//其他节点的样式
const nodeStyle = (item, index) => {
return {
@ -1621,11 +1618,11 @@ const mapClick = (e) => {
//新增节点
if (toolbarSwitchType.value === 'drawNodes') {
// 优化节点检查逻辑，比较一位小数
// 优化节点检查逻辑，比较整数位
const isDuplicate = state.allMapPointInfo.some(
(item) =>
Number(item.locationX).toFixed(1) === Number(x).toFixed(1) &&
Number(item.locationY).toFixed(1) === Number(y).toFixed(1)
Number(item.locationX).toFixed(0) === Number(x).toFixed(0) &&
Number(item.locationY).toFixed(0) === Number(y).toFixed(0)
)
if (!isDuplicate) {
@ -2456,8 +2453,8 @@ const equalDistanceReplicationSucceeded = (list) => {
const filteredList = list.filter((newItem) => {
const isDup = state.allMapPointInfo.some(
(item) =>
Number(item.locationX).toFixed(1) === Number(newItem.locationX).toFixed(1) &&
Number(item.locationY).toFixed(1) === Number(newItem.locationY).toFixed(1)
Number(item.locationX).toFixed(0) === Number(newItem.locationX).toFixed(0) &&
Number(item.locationY).toFixed(0) === Number(newItem.locationY).toFixed(0)
)
if (isDup) {
duplicatePoints.push(`(${newItem.locationX}, ${newItem.locationY})`)
@ -2492,11 +2489,11 @@ const generateDetectionPoint = async () => {
const newX = Number((Number(locationX) + distanceValue * Math.cos(locationYaw)).toFixed(2))
const newY = Number((Number(locationY) - distanceValue * Math.sin(locationYaw)).toFixed(2))
//先校验这个点是否存在,比较一位小数
//先校验这个点是否存在,比较整数位
const isDuplicate = state.allMapPointInfo.some(
(item) =>
Number(item.locationX).toFixed(1) === Number(newX).toFixed(1) &&
Number(item.locationY).toFixed(1) === Number(newY).toFixed(1)
Number(item.locationX).toFixed(0) === Number(newX).toFixed(0) &&
Number(item.locationY).toFixed(0) === Number(newY).toFixed(0)
)
if (!isDuplicate) {
@ -2636,8 +2633,8 @@ const pasteNode = () => {
// 检查节点是否已存在
const isDuplicate = state.allMapPointInfo.some(
(item) =>
Number(item.locationX).toFixed(1) === Number(copyObj.locationX).toFixed(1) &&
Number(item.locationY).toFixed(1) === Number(copyObj.locationY).toFixed(1)
Number(item.locationX).toFixed(0) === Number(copyObj.locationX).toFixed(0) &&
Number(item.locationY).toFixed(0) === Number(copyObj.locationY).toFixed(0)
)
if (isDuplicate) {
@ -2791,8 +2788,8 @@ const markFormSubmit = async () => {
// 检查节点是否已存在
const isDuplicate = state.allMapPointInfo.some(
(item) =>
Number(item.locationX).toFixed(1) === Number(pointPx.x).toFixed(1) &&
Number(item.locationY).toFixed(1) === Number(pointPx.y).toFixed(1)
Number(item.locationX).toFixed(0) === Number(pointPx.x).toFixed(0) &&
Number(item.locationY).toFixed(0) === Number(pointPx.y).toFixed(0)
)
if (isDuplicate) {
@ -3445,9 +3442,10 @@ const submitBatchCopyingFormSuccess = async (form) => {
// 计算新坐标的辅助函数
const calculateNewCoordinates = (x, y) => {
const newX = (Number(x) + Number(form.x)).toString()
const newY = (Number(y) + Number(form.y)).toString()
const newX = Number(x) + Number(form.x)
const newY = Number(y) + Number(form.y)
const actualPoint = disposeEventPoint(newX, newY)
return { newX, newY, actualPoint }
}
@ -3465,8 +3463,8 @@ const submitBatchCopyingFormSuccess = async (form) => {
// 检查节点是否重复
const existingNode = state.allMapPointInfo.find(
(item) =>
Number(item.locationX).toFixed(1) === Number(locationX).toFixed(1) &&
Number(item.locationY).toFixed(1) === Number(locationY).toFixed(1)
Number(item.locationX).toFixed(0) === Number(locationX).toFixed(0) &&
Number(item.locationY).toFixed(0) === Number(locationY).toFixed(0)
)
if (existingNode) {
@ -3596,10 +3594,10 @@ const submitBatchCopyingFormSuccess = async (form) => {
// 检查路线是否重复
const isDuplicate = state.mapRouteList.some(
(existingRoute) =>
Number(existingRoute.startPointX).toFixed(1) === Number(newRoute.startPointX).toFixed(1) &&
Number(existingRoute.startPointY).toFixed(1) === Number(newRoute.startPointY).toFixed(1) &&
Number(existingRoute.endPointX).toFixed(1) === Number(newRoute.endPointX).toFixed(1) &&
Number(existingRoute.endPointY).toFixed(1) === Number(newRoute.endPointY).toFixed(1)
Number(existingRoute.startPointX).toFixed(0) === Number(newRoute.startPointX).toFixed(0) &&
Number(existingRoute.startPointY).toFixed(0) === Number(newRoute.startPointY).toFixed(0) &&
Number(existingRoute.endPointX).toFixed(0) === Number(newRoute.endPointX).toFixed(0) &&
Number(existingRoute.endPointY).toFixed(0) === Number(newRoute.endPointY).toFixed(0)
)
if (isDuplicate) {
@ -3699,32 +3697,47 @@ const mapPointsToLine = (points, startPointId, endPointId) => {
if (!startPoint || !endPoint) {
message.warning('选择的点位有误')
return
return points
}
const dx = endPoint.locationX - startPoint.locationX
const dy = endPoint.locationY - startPoint.locationY
const length = Math.sqrt(dx * dx + dy * dy)
// 判断是水平线还是垂直线
const isVertical = startPoint.locationX === endPoint.locationX
const isHorizontal = startPoint.locationY === endPoint.locationY
// 如果不是严格的水平或垂直线，保持原样
if (!isVertical && !isHorizontal) {
return points
}
return points.map((point) => {
// 保持起点和终点不变
if (point.id === startPointId || point.id === endPointId) {
return point
}
const vx = point.locationX - startPoint.locationX
const vy = point.locationY - startPoint.locationY
const dotProduct = vx * dx + vy * dy
const projectionLength = dotProduct / length
// 垂直线 - 保持x坐标不变，y坐标在起点和终点之间
if (isVertical) {
const minY = Math.min(startPoint.locationY, endPoint.locationY)
const maxY = Math.max(startPoint.locationY, endPoint.locationY)
const clampedY = Math.round(Math.max(minY, Math.min(maxY, point.locationY)))
const t = Math.max(0, Math.min(1, projectionLength / length))
return {
...point,
locationX: startPoint.locationX,
locationY: clampedY
}
}
// 水平线 - 保持y坐标不变，x坐标在起点和终点之间
else {
const minX = Math.min(startPoint.locationX, endPoint.locationX)
const maxX = Math.max(startPoint.locationX, endPoint.locationX)
const clampedX = Math.round(Math.max(minX, Math.min(maxX, point.locationX)))
const newX = startPoint.locationX + t * dx
const newY = startPoint.locationY + t * dy
return {
...point,
locationX: newX,
locationY: newY
return {
...point,
locationX: clampedX,
locationY: startPoint.locationY
}
}
})
}
@ -4246,8 +4259,21 @@ const getMapData = async (mapInfo) => {
imgBgObj.imgUrl = data
//获取节点 路径等信息
await getAllNodeList()
await getAllMapRoute()
const loading = ElLoading.service({
lock: true,
text: '地图数据加载中',
background: 'rgba(255, 255, 255, 0.7)'
})
try {
await getAllNodeList()
await getAllMapRoute()
//关闭loading
loading.close()
} catch (error) {
loading.close()
} finally {
loading.close()
}
}
//获取所有的点位 处理七种类型的
const getAllNodeList = async () => {
@ -4404,6 +4430,8 @@ const saveMap = async () => {
} catch (error) {
loading.close()
message.error(error?.message || '保存失败')
} finally {
loading.close()
}
}
//节点的保存
@ -4852,22 +4880,9 @@ onBeforeRouteLeave((to, from) => {
})
onMounted(async () => {
// 页面全局loading，所有初始化接口完成后关闭
loading = ElLoading.service({
lock: true,
text: '加载中，请稍候...',
background: 'rgba(255, 255, 255, 0.7)'
})
try {
await Promise.all([getMapList(), getCheckDistance()])
} catch (e) {
// 可选：弹出错误提示
message.error(e?.message || '页面加载失败')
} finally {
setTimeout(() => {
loading.close()
}, 1000)
}
await getMapList()
await getCheckDistance()
window.addEventListener('keydown', handleKeyDown)
// 添加滚动和缩放监听