Compare commits
3 Commits
3bd363e8ac
...
74701d7fb7
| Author | SHA1 | Date | |
|---|---|---|---|
|
74701d7fb7 | ||
|
|
b2a46e7132 | ||
|
|
a82253089c |
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="edit-map-page">
|
||||
<div class="edit-map-page" @wheel="handleWheel">
|
||||
<div class="top-tool">
|
||||
<div class="top-tool-list">
|
||||
<div v-for="item in state.topToolList" :key="item.switchType" class="top-tool-item">
|
||||
@ -155,6 +155,62 @@
|
||||
>
|
||||
</div>
|
||||
</el-popover>
|
||||
<!-- 标记 -->
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
v-else-if="item.switchType === 'marker'"
|
||||
width="220"
|
||||
>
|
||||
<template #reference>
|
||||
<div
|
||||
class="tool-item"
|
||||
:class="
|
||||
toolbarSwitchType === item.switchType
|
||||
? 'tool-active'
|
||||
: item.isActive
|
||||
? 'right-tool-active'
|
||||
: ''
|
||||
"
|
||||
@click="toolbarClick(item)"
|
||||
>
|
||||
<Icon :icon="item.icon" :size="24" />
|
||||
<div class="name"> {{ item.name }} </div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 位置 -->
|
||||
<el-form :model="state.markForm" class="mt-2" label-width="68">
|
||||
<el-form-item label="标记车辆">
|
||||
<el-select
|
||||
v-model="state.markForm.macAddress"
|
||||
placeholder="请选择"
|
||||
@change="macAddressChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in state.mapMarkCarList"
|
||||
:key="item.id"
|
||||
:label="item.robotNo"
|
||||
:value="item.macAddress"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标记属性" v-if="state.markForm.markProperty">
|
||||
<el-input v-model="state.markForm.markProperty" style="width: 240px" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="原节点" v-if="state.markForm.originalNode">
|
||||
<el-input v-model="state.markForm.originalNode" style="width: 240px" disabled />
|
||||
</el-form-item>
|
||||
<div style="text-align: right">
|
||||
<el-button
|
||||
size="small"
|
||||
style="width: 64px; height: 30px; background: #00329f"
|
||||
color="#00329F"
|
||||
@click="markFormSubmit()"
|
||||
>确认</el-button
|
||||
>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-popover>
|
||||
<div
|
||||
v-else
|
||||
class="tool-item"
|
||||
@ -180,7 +236,8 @@
|
||||
(item.switchType === 'next' &&
|
||||
(toolbarSwitchType === 'createLineLibrary' ||
|
||||
toolbarSwitchType === 'createRegion' ||
|
||||
toolbarSwitchType === 'drawRoute'))
|
||||
toolbarSwitchType === 'drawRoute' ||
|
||||
toolbarSwitchType === 'generateLine'))
|
||||
"
|
||||
></div>
|
||||
<el-button
|
||||
@ -188,7 +245,8 @@
|
||||
item.switchType === 'next' &&
|
||||
(toolbarSwitchType === 'createLineLibrary' ||
|
||||
toolbarSwitchType === 'createRegion' ||
|
||||
toolbarSwitchType === 'drawRoute')
|
||||
toolbarSwitchType === 'drawRoute' ||
|
||||
toolbarSwitchType === 'generateLine')
|
||||
"
|
||||
type="danger"
|
||||
class="selection-area-btn"
|
||||
@ -269,7 +327,10 @@
|
||||
style="border: none; z-index: 999"
|
||||
>
|
||||
<!-- 节点合集 -->
|
||||
<div @mousedown="startFromPoint(index, $event)">
|
||||
<div
|
||||
@mousedown="startFromPoint(index, $event)"
|
||||
:style="{ width: item.locationWidePx + 'px', height: item.locationDeepPx + 'px' }"
|
||||
>
|
||||
<!-- 1 路径点 -->
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
@ -361,17 +422,33 @@
|
||||
:x2="Number(state.currentDrawX)"
|
||||
:y2="Number(state.currentDrawY)"
|
||||
stroke="#00329F"
|
||||
stroke-width="4"
|
||||
stroke-width="3"
|
||||
/>
|
||||
<template v-if="state.mapRouteList.length > 0">
|
||||
<template v-for="(curve, index) in state.mapRouteList" :key="index">
|
||||
<!-- 定义箭头 -->
|
||||
<defs>
|
||||
<marker id="forward-arrow" viewBox="0 0 9 9" refX="10" refY="5" orient="auto">
|
||||
<marker
|
||||
id="forward-arrow"
|
||||
viewBox="0 0 10 10"
|
||||
refX="10"
|
||||
refY="5"
|
||||
orient="auto"
|
||||
markerWidth="2"
|
||||
markerHeight="2"
|
||||
>
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
|
||||
</marker>
|
||||
<!-- 反向箭头 -->
|
||||
<marker id="backward-arrow" viewBox="0 0 9 9" refX="0" refY="5" orient="auto">
|
||||
<marker
|
||||
id="backward-arrow"
|
||||
viewBox="0 0 10 10"
|
||||
refX="0"
|
||||
refY="5"
|
||||
orient="auto"
|
||||
markerWidth="2"
|
||||
markerHeight="2"
|
||||
>
|
||||
<path d="M 10 0 L 0 5 L 10 10 z" fill="black" />
|
||||
</marker>
|
||||
</defs>
|
||||
@ -824,10 +901,10 @@ const mapClick = (e) => {
|
||||
locationY: y,
|
||||
actualLocationX: actualLocationX,
|
||||
actualLocationY: actualLocationY,
|
||||
locationDeep: 50,
|
||||
locationWide: 50,
|
||||
locationDeepPx: 10,
|
||||
locationWidePx: 10,
|
||||
locationDeep: 40,
|
||||
locationWide: 40,
|
||||
locationDeepPx: 8,
|
||||
locationWidePx: 8,
|
||||
angle: 0,
|
||||
draggable: true,
|
||||
resizable: true,
|
||||
@ -1078,17 +1155,23 @@ const state = reactive({
|
||||
icon: 'ep:semi-select',
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
switchType: 'drawRoute',
|
||||
name: '框选绘制',
|
||||
icon: 'ep:semi-select',
|
||||
isActive: false
|
||||
},
|
||||
// {
|
||||
// switchType: 'drawRoute',
|
||||
// name: '框选绘制',
|
||||
// icon: 'ep:semi-select',
|
||||
// isActive: false
|
||||
// },
|
||||
{
|
||||
switchType: 'editRoute',
|
||||
name: '编辑路线',
|
||||
icon: 'ep:semi-select',
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
switchType: 'generateLine',
|
||||
name: '生成直线',
|
||||
icon: 'ep:finished',
|
||||
isActive: false
|
||||
}
|
||||
],
|
||||
isShowToolbar: true, //工具栏展示隐藏
|
||||
@ -1138,7 +1221,14 @@ const state = reactive({
|
||||
allMapPointInfo: [], //当前页面上的所有节点的列表
|
||||
mapRouteList: [], //当前页面上所有路线的列表
|
||||
currentIndex: 0, //当前处在哪条历史记录
|
||||
currentItemIndex: -1 //当前处在哪个工具
|
||||
currentItemIndex: -1, //当前处在哪个工具
|
||||
markForm: {
|
||||
macAddress: '', // mac地址
|
||||
markProperty: '', //标记属性
|
||||
originalNode: '', //原节点
|
||||
robotNo: '' //AGV编号
|
||||
}, //标记的表单
|
||||
mapMarkCarList: [] //标记的车辆列表
|
||||
})
|
||||
|
||||
const toolbarClick = async (item) => {
|
||||
@ -1329,6 +1419,7 @@ const toolbarClick = async (item) => {
|
||||
break
|
||||
case 'marker':
|
||||
// 标记
|
||||
mapMark()
|
||||
break
|
||||
case 'grid':
|
||||
//网格
|
||||
@ -1457,6 +1548,108 @@ const rotationFormSubmit = () => {
|
||||
addEditHistory()
|
||||
}
|
||||
|
||||
//标记
|
||||
const mapMark = async () => {
|
||||
state.mapMarkCarList = await MapApi.getListByMapId(imgBgObj.positionMapId)
|
||||
|
||||
if (state.currentItemIndex != -1) {
|
||||
let item = state.allMapPointInfo[state.currentItemIndex]
|
||||
state.markForm.originalNode = `[${item.locationX},${item.locationY}]`
|
||||
if (item.type == 1) {
|
||||
state.markForm.markProperty = '路径点'
|
||||
} else if (item.type == 2) {
|
||||
state.markForm.markProperty = '库位点'
|
||||
} else if (item.type == 3) {
|
||||
state.markForm.markProperty = '设备点'
|
||||
} else if (item.type == 4) {
|
||||
state.markForm.markProperty = '停车点'
|
||||
} else if (item.type == 5) {
|
||||
state.markForm.markProperty = '区域变更点'
|
||||
} else if (item.type == 6) {
|
||||
state.markForm.markProperty = '等待点'
|
||||
}
|
||||
} else {
|
||||
state.markForm.markProperty = ''
|
||||
state.markForm.originalNode = ''
|
||||
}
|
||||
}
|
||||
//标记提交
|
||||
const macAddressChange = (e) => {
|
||||
const targetItem = state.mapMarkCarList.find((item) => item.macAddress === e)
|
||||
if (targetItem) {
|
||||
state.markForm.robotNo = targetItem.robotNo
|
||||
}
|
||||
}
|
||||
const markFormSubmit = async () => {
|
||||
if (!state.markForm.macAddress) {
|
||||
message.warning('请选择车辆')
|
||||
return
|
||||
}
|
||||
let res = await MapApi.getAGVPointInformation(state.markForm.macAddress)
|
||||
if (res) {
|
||||
let content = JSON.parse(res.content)
|
||||
let point = JSON.parse(content[state.markForm.robotNo]) //标记传过来的数据
|
||||
let pointPx = convertActualToBrowser(point.x, point.y)
|
||||
let actualPoint = disposeEventPoint(pointPx.x, pointPx.y)
|
||||
|
||||
if (state.currentItemIndex !== -1) {
|
||||
state.allMapPointInfo[state.currentItemIndex].locationX = pointPx.x
|
||||
state.allMapPointInfo[state.currentItemIndex].locationY = pointPx.y
|
||||
state.allMapPointInfo[state.currentItemIndex].actualLocationX = actualPoint.actualLocationX
|
||||
state.allMapPointInfo[state.currentItemIndex].actualLocationY = actualPoint.actualLocationY
|
||||
|
||||
//更改路线里的
|
||||
let item = state.allMapPointInfo[state.currentItemIndex]
|
||||
state.mapRouteList.forEach((route) => {
|
||||
if (item.id === route.startingPointId) {
|
||||
route.startPointX = pointPx.x
|
||||
route.startPointY = pointPx.y
|
||||
route.beginHigh = Number(item.locationDeepPx)
|
||||
route.beginWidth = Number(item.locationWidePx)
|
||||
route.actualStartPointX = actualPoint.actualLocationX
|
||||
route.actualStartPointY = actualPoint.actualLocationY
|
||||
}
|
||||
if (item.id === route.endPointId) {
|
||||
route.endPointX = pointPx.x
|
||||
route.endPointY = pointPx.y
|
||||
route.endHigh = Number(item.locationDeepPx)
|
||||
route.endWidth = Number(item.locationWidePx)
|
||||
route.actualEndPointX = actualPoint.actualLocationX
|
||||
route.actualEndPointY = actualPoint.actualLocationY
|
||||
}
|
||||
})
|
||||
|
||||
addEditHistory()
|
||||
} else {
|
||||
message.warning('未采集到该AGV点位信息')
|
||||
}
|
||||
} else {
|
||||
//新增一个节点
|
||||
state.allMapPointInfo.push({
|
||||
positionMapId: imgBgObj.positionMapId, //地图的id
|
||||
layerSelectionShow: true,
|
||||
locationX: pointPx.x,
|
||||
locationY: pointPx.y,
|
||||
actualLocationX: actualPoint.actualLocationX,
|
||||
actualLocationY: actualPoint.actualLocationY,
|
||||
locationDeep: 40,
|
||||
locationWide: 40,
|
||||
locationDeepPx: 8,
|
||||
locationWidePx: 8,
|
||||
angle: 0,
|
||||
draggable: true,
|
||||
resizable: true,
|
||||
rotatable: false,
|
||||
lockAspectRatio: false, //横纵比
|
||||
mapImageUrl: '',
|
||||
type: 1, //默认类型1 路径节点
|
||||
dataList: [], //存库位的
|
||||
dataObj: {} //存 设备点 停车点 文字
|
||||
})
|
||||
addEditHistory()
|
||||
}
|
||||
}
|
||||
|
||||
//鼠标拖动绘制节点
|
||||
// 从点开始绘制
|
||||
const startFromPoint = (index, event) => {
|
||||
@ -1482,32 +1675,33 @@ const startFromPoint = (index, event) => {
|
||||
//开始框选绘制
|
||||
const startDrawSelection = (event) => {
|
||||
if (
|
||||
toolbarSwitchType.value === 'createLineLibrary' ||
|
||||
toolbarSwitchType.value === 'createRegion' ||
|
||||
toolbarSwitchType.value === 'drawRoute'
|
||||
) {
|
||||
const backgroundRect = mapBackgroundRef.value.getBoundingClientRect()
|
||||
|
||||
const x = disposeEventPoints(event).x
|
||||
const y = disposeEventPoints(event).y
|
||||
|
||||
// 确保点击在背景区域内
|
||||
if (x >= 0 && x <= backgroundRect.width && y >= 0 && y <= backgroundRect.height) {
|
||||
state.drawSelectionAreaShow = true
|
||||
state.drawSelectionStartPoint = { x: x, y: y }
|
||||
state.drawSelectionAreaBox = { x: x, y: y, width: 0, height: 0 }
|
||||
}
|
||||
|
||||
event.preventDefault() // 阻止默认行为（避免选中图片或文本）
|
||||
toolbarSwitchType.value !== 'createLineLibrary' &&
|
||||
toolbarSwitchType.value !== 'createRegion' &&
|
||||
toolbarSwitchType.value !== 'drawRoute' &&
|
||||
toolbarSwitchType.value !== 'generateLine'
|
||||
)
|
||||
return
|
||||
|
||||
const backgroundRect = mapBackgroundRef.value.getBoundingClientRect()
|
||||
|
||||
const x = disposeEventPoints(event).x
|
||||
const y = disposeEventPoints(event).y
|
||||
|
||||
// 确保点击在背景区域内
|
||||
if (x >= 0 && x <= backgroundRect.width && y >= 0 && y <= backgroundRect.height) {
|
||||
state.drawSelectionAreaShow = true
|
||||
state.drawSelectionStartPoint = { x: x, y: y }
|
||||
state.drawSelectionAreaBox = { x: x, y: y, width: 0, height: 0 }
|
||||
}
|
||||
event.preventDefault() // 阻止默认行为（避免选中图片或文本）
|
||||
}
|
||||
// 更新框选区域
|
||||
const updateDrawSelection = (event) => {
|
||||
if (
|
||||
toolbarSwitchType.value === 'createLineLibrary' ||
|
||||
toolbarSwitchType.value === 'createRegion' ||
|
||||
toolbarSwitchType.value === 'drawRoute'
|
||||
toolbarSwitchType.value === 'drawRoute' ||
|
||||
toolbarSwitchType.value === 'generateLine'
|
||||
) {
|
||||
if (state.drawSelectionAreaShow) {
|
||||
const x = disposeEventPoints(event).x
|
||||
@ -1532,16 +1726,17 @@ const updateDrawSelection = (event) => {
|
||||
state.currentDrawX = x
|
||||
state.currentDrawY = y
|
||||
}
|
||||
event.preventDefault() // 阻止默认行为（避免选中图片或文本）
|
||||
return
|
||||
}
|
||||
event.preventDefault() // 阻止默认行为（避免选中图片或文本）
|
||||
return
|
||||
}
|
||||
//结束框选绘制
|
||||
const endDrawSelection = (event) => {
|
||||
if (
|
||||
toolbarSwitchType.value === 'createLineLibrary' ||
|
||||
toolbarSwitchType.value === 'createRegion' ||
|
||||
toolbarSwitchType.value === 'drawRoute'
|
||||
toolbarSwitchType.value === 'drawRoute' ||
|
||||
toolbarSwitchType.value === 'generateLine'
|
||||
) {
|
||||
state.drawSelectionAreaShow = false
|
||||
state.allDrawSelectionAreaBox.push({ ...state.drawSelectionAreaBox })
|
||||
@ -1636,7 +1831,6 @@ const endDrawSelection = (event) => {
|
||||
state.currentDrawX = 0
|
||||
state.currentDrawY = 0
|
||||
}
|
||||
|
||||
event.preventDefault() // 阻止默认行为（避免选中图片或文本）
|
||||
return
|
||||
}
|
||||
@ -1686,6 +1880,7 @@ const clickDrawSelectionArea = () => {
|
||||
item.id
|
||||
})
|
||||
|
||||
//线库
|
||||
if (toolbarSwitchType.value === 'createLineLibrary') {
|
||||
//线库
|
||||
if (binLocation.length < 2) {
|
||||
@ -1722,7 +1917,7 @@ const clickDrawSelectionArea = () => {
|
||||
removeEventListener() //移除监听
|
||||
itemAreaSettingDialogRef.value.open(binLocation)
|
||||
}
|
||||
|
||||
//绘制直线
|
||||
if (toolbarSwitchType.value === 'drawRoute') {
|
||||
if (routeList.length !== 2) {
|
||||
message.warning('只能选择两个路径点')
|
||||
@ -1773,6 +1968,105 @@ const clickDrawSelectionArea = () => {
|
||||
state.mapRouteList.push(curve)
|
||||
addEditHistory()
|
||||
}
|
||||
//生成直线
|
||||
if (toolbarSwitchType.value === 'generateLine') {
|
||||
if (routeList.length < 3) {
|
||||
message.warning('至少框选三个点')
|
||||
return
|
||||
}
|
||||
let isHaveId = routeList.every((item) => {
|
||||
return item.id
|
||||
})
|
||||
if (!isHaveId) {
|
||||
message.warning('您选择的路径点存在未保存的')
|
||||
return
|
||||
}
|
||||
const list = mapPointsToLine(routeList)
|
||||
const idNameMap = {}
|
||||
list.forEach((item) => {
|
||||
idNameMap[item.id] = item
|
||||
})
|
||||
// 遍历第二个数组，更新 name
|
||||
state.allMapPointInfo.forEach((item) => {
|
||||
if (idNameMap[item.id]) {
|
||||
let actualPoint = disposeEventPoint(
|
||||
idNameMap[item.id].locationX,
|
||||
idNameMap[item.id].locationY
|
||||
)
|
||||
item.locationX = idNameMap[item.id].locationX
|
||||
item.locationY = idNameMap[item.id].locationY
|
||||
item.actualLocationX = actualPoint.actualLocationX
|
||||
item.actualLocationY = actualPoint.actualLocationY
|
||||
}
|
||||
})
|
||||
console.log(state.allMapPointInfo)
|
||||
state.mapRouteList.forEach((item) => {
|
||||
if (idNameMap[item.startingPointId]) {
|
||||
let actualPoint = disposeEventPoint(
|
||||
idNameMap[item.startingPointId].locationX,
|
||||
idNameMap[item.startingPointId].locationY
|
||||
)
|
||||
item.startPointX = idNameMap[item.startingPointId].locationX
|
||||
item.startPointY = idNameMap[item.startingPointId].locationY
|
||||
item.actualStartPointX = actualPoint.actualLocationX
|
||||
item.actualStartPointY = actualPoint.actualLocationY
|
||||
}
|
||||
if (idNameMap[item.endPointId]) {
|
||||
let actualPoint = disposeEventPoint(
|
||||
idNameMap[item.endPointId].locationX,
|
||||
idNameMap[item.endPointId].locationY
|
||||
)
|
||||
item.endPointX = idNameMap[item.endPointId].locationX
|
||||
item.endPointY = idNameMap[item.endPointId].locationY
|
||||
item.actualEndPointX = actualPoint.actualLocationX
|
||||
item.actualEndPointY = actualPoint.actualLocationY
|
||||
}
|
||||
})
|
||||
addEditHistory()
|
||||
}
|
||||
}
|
||||
//将一个数组中的点位 按照第一个和最后一个排成一条直线
|
||||
const mapPointsToLine = (points) => {
|
||||
if (points.length < 2) {
|
||||
return points
|
||||
}
|
||||
// 取数组的第一项和最后一项
|
||||
const firstPoint = points[0]
|
||||
const lastPoint = points[points.length - 1]
|
||||
|
||||
// 计算直线的斜率
|
||||
const dx = lastPoint.locationX - firstPoint.locationX
|
||||
const dy = lastPoint.locationY - firstPoint.locationY
|
||||
|
||||
if (dx === 0) {
|
||||
// 垂直直线的情况
|
||||
return points.map((point, index) => {
|
||||
if (index === 0 || index === points.length - 1) {
|
||||
return point
|
||||
}
|
||||
return {
|
||||
...point,
|
||||
locationX: firstPoint.locationX,
|
||||
locationY: point.locationY
|
||||
}
|
||||
})
|
||||
}
|
||||
const slope = dy / dx
|
||||
// 计算直线的截距
|
||||
const intercept = firstPoint.locationY - slope * firstPoint.locationX
|
||||
|
||||
// 映射其他点到直线上
|
||||
return points.map((point, index) => {
|
||||
if (index === 0 || index === points.length - 1) {
|
||||
return point
|
||||
}
|
||||
const newY = slope * point.locationX + intercept
|
||||
// 考虑精度问题，这里保留三位小数
|
||||
return {
|
||||
...point,
|
||||
locationY: newY
|
||||
}
|
||||
})
|
||||
}
|
||||
//计算是不是在同一条直线的
|
||||
const isStraightLine = (binLocation) => {
|
||||
@ -2002,7 +2296,6 @@ const getMapList = async () => {
|
||||
imgBgObj.positionMapId = res.id
|
||||
imgBgObj.floor = res.floor
|
||||
imgBgObj.area = res.area
|
||||
|
||||
imgBgObj.width = yamlJson.width
|
||||
imgBgObj.height = yamlJson.height
|
||||
imgBgObj.origin = yamlJson.origin
|
||||
@ -2037,8 +2330,8 @@ const getAllNodeList = async () => {
|
||||
if (item.type === 1) {
|
||||
item.dataObj = {}
|
||||
item.dataList = []
|
||||
item.locationDeep = 50
|
||||
item.locationWide = 50
|
||||
item.locationDeep = 40
|
||||
item.locationWide = 40
|
||||
item.draggable = true
|
||||
item.resizable = false
|
||||
item.rotatable = false
|
||||
@ -2301,6 +2594,33 @@ const handleKeyDown = (event) => {
|
||||
}
|
||||
}
|
||||
|
||||
//鼠标滚轮
|
||||
const handleWheel = (event) => {
|
||||
// 判断 Ctrl 键是否被按下
|
||||
if (event.ctrlKey) {
|
||||
// 阻止默认的滚动行为
|
||||
event.preventDefault()
|
||||
|
||||
// 根据滚轮滚动方向调整缩放比例
|
||||
if (event.deltaY < 0) {
|
||||
// 向上滚动，放大
|
||||
//放大
|
||||
if (state.imageChangeMultiple < 4) {
|
||||
state.imageChangeMultiple += 0.2
|
||||
} else {
|
||||
message.warning('不能在放大了')
|
||||
}
|
||||
} else {
|
||||
//缩小
|
||||
if (state.imageChangeMultiple > 0.2) {
|
||||
state.imageChangeMultiple -= 0.2
|
||||
} else {
|
||||
message.warning('不能在缩小了')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const addEventListener = () => {
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
}
|
||||
@ -2450,8 +2770,6 @@ onUnmounted(() => {
|
||||
// 20px 20px,
|
||||
// 20px 20px;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: repeating-linear-gradient(
|
||||
to right,
|
||||
rgba(0, 0, 0, 0.1),
|
||||
|
||||
94
src/views/mapPage/example/排成直线.vue
Normal file
94
src/views/mapPage/example/排成直线.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div style="width: 600px; height: 300px; background: #dbeede; position: relative">
|
||||
<div v-for="(item, index) in points" :key="index">
|
||||
<div
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
backgroundColor: '#000',
|
||||
borderRadius: '50%',
|
||||
zIndex: 999,
|
||||
left: item.x + 'px',
|
||||
top: item.y + 'px'
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 600px; height: 300px; background: #b3dcff; position: relative">
|
||||
<div v-for="(item, index) in mappedPoints" :key="index">
|
||||
<div
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
backgroundColor: '#000',
|
||||
borderRadius: '50%',
|
||||
zIndex: 999,
|
||||
left: item.x + 'px',
|
||||
top: item.y + 'px'
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const points = ref([
|
||||
{
|
||||
x: 123.567,
|
||||
y: 178.123
|
||||
},
|
||||
{
|
||||
x: 255.567,
|
||||
y: 79.123
|
||||
},
|
||||
{
|
||||
x: 382.567,
|
||||
y: 178.123
|
||||
},
|
||||
{
|
||||
x: 481.567,
|
||||
y: 238.123
|
||||
}
|
||||
])
|
||||
|
||||
const mapPointsToLine = (points) => {
|
||||
if (points.length < 2) {
|
||||
return points
|
||||
}
|
||||
// 取数组的第一项和最后一项
|
||||
const firstPoint = points[0]
|
||||
const lastPoint = points[points.length - 1]
|
||||
|
||||
// 计算直线的斜率
|
||||
const dx = lastPoint.x - firstPoint.x
|
||||
const dy = lastPoint.y - firstPoint.y
|
||||
if (dx === 0) {
|
||||
// 垂直直线的情况
|
||||
return points.map((point, index) => {
|
||||
if (index === 0 || index === points.length - 1) {
|
||||
return point
|
||||
}
|
||||
return { x: firstPoint.x, y: point.y }
|
||||
})
|
||||
}
|
||||
const slope = dy / dx
|
||||
// 计算直线的截距
|
||||
const intercept = firstPoint.y - slope * firstPoint.x
|
||||
|
||||
// 映射其他点到直线上
|
||||
return points.map((point, index) => {
|
||||
if (index === 0 || index === points.length - 1) {
|
||||
return point
|
||||
}
|
||||
const newY = slope * point.x + intercept
|
||||
return { x: point.x, y: newY }
|
||||
})
|
||||
}
|
||||
|
||||
const mappedPoints = mapPointsToLine(points.value)
|
||||
console.log(mappedPoints)
|
||||
</script>
|
||||
@ -23,6 +23,14 @@
|
||||
>
|
||||
<el-input type="number" v-model="form.locationY" placeholder="请输入" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="弧度"
|
||||
prop="locationYaw"
|
||||
required
|
||||
:rules="{ required: true, message: '请输入弧度', trigger: 'change' }"
|
||||
>
|
||||
<el-input type="number" v-model="form.locationYaw" placeholder="请输入" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type" required>
|
||||
<el-select v-model="form.type" placeholder="请选择类型" @change="typeChange">
|
||||
<el-option label="路径点位" :value="1" />
|
||||
@ -33,6 +41,7 @@
|
||||
<el-option label="等待点" :value="6" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<div v-if="form.type === 2 || form.type === 3 || form.type === 4">
|
||||
<el-form-item
|
||||
label="层数"
|
||||
@ -172,12 +181,14 @@ const form = ref({
|
||||
dataList: [], //存库位的
|
||||
dataObj: {}, //存 设备点 停车点 文字
|
||||
positionMapId: undefined,
|
||||
deviceId: undefined
|
||||
deviceId: undefined, //设备id
|
||||
locationYaw: undefined //弧度
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
locationX: [{ required: true, message: '请输入X', trigger: 'blur' }],
|
||||
locationY: [{ required: true, message: '请输入Y', trigger: 'blur' }],
|
||||
locationYaw: [{ required: true, message: '请输入弧度', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
|
||||
layersNumber: [{ required: true, message: '请输入层数', trigger: 'blur' }],
|
||||
locationNumber: [{ required: true, message: '请输入排序', trigger: 'blur' }]
|
||||
@ -256,6 +267,7 @@ const dialogClose = () => {
|
||||
|
||||
const equipmentList = ref([]) //用过的设备列表
|
||||
const open = (item, list) => {
|
||||
console.log(item)
|
||||
form.value = item
|
||||
form.value.layersNumber = item.dataList?.length || ''
|
||||
form.value.deviceId = item?.deviceId || item?.dataObj?.id || ''
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
:style="{
|
||||
height: heightVal + 'px',
|
||||
cursor: isDrag ? 'pointer' : 'default',
|
||||
scale: isSizeRaio,
|
||||
scale: isSizeRadio,
|
||||
transformOrigin: '0 0'
|
||||
}"
|
||||
>
|
||||
@ -17,7 +17,7 @@
|
||||
ref="draggableElement"
|
||||
>
|
||||
<div class="indexpage-container-box">
|
||||
<img :src="imgUrl" alt="" class="indexpage-container-box-img" />
|
||||
<img :src="imgUrl" class="indexpage-container-box-img" />
|
||||
|
||||
<div class="indexpage-container-box-point">
|
||||
<!-- 连线 -->
|
||||
@ -27,11 +27,27 @@
|
||||
<template v-for="(item, index) in lineList" :key="index">
|
||||
<!-- 定义箭头 -->
|
||||
<defs>
|
||||
<marker id="forward-arrow" viewBox="0 0 10 10" refX="10" refY="5" orient="auto">
|
||||
<marker
|
||||
id="forward-arrow"
|
||||
viewBox="0 0 10 10"
|
||||
refX="10"
|
||||
refY="5"
|
||||
orient="auto"
|
||||
markerWidth="2"
|
||||
markerHeight="2"
|
||||
>
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
|
||||
</marker>
|
||||
<!-- 反向箭头 -->
|
||||
<marker id="backward-arrow" viewBox="0 0 10 10" refX="0" refY="5" orient="auto">
|
||||
<marker
|
||||
id="backward-arrow"
|
||||
viewBox="0 0 10 10"
|
||||
refX="0"
|
||||
refY="5"
|
||||
orient="auto"
|
||||
markerWidth="2"
|
||||
markerHeight="2"
|
||||
>
|
||||
<path d="M 10 0 L 0 5 L 10 10 z" fill="black" />
|
||||
</marker>
|
||||
</defs>
|
||||
@ -42,7 +58,7 @@
|
||||
:x2="Number(item.endPointX) * radio"
|
||||
:y2="Number(item.endPointY) * radio"
|
||||
:stroke="item.isSelect ? '#f48924' : '#00329F'"
|
||||
:stroke-width="5 * radio"
|
||||
:stroke-width="4 * radio"
|
||||
:marker-start="item.direction === 2 ? 'url(#double-arrow-start)' : ''"
|
||||
marker-end="url(#single-arrow)"
|
||||
@click="handleChooseRoute(item, index)"
|
||||
@ -51,7 +67,7 @@
|
||||
:d="getLineMidArrowPath(item)"
|
||||
stroke="none"
|
||||
fill="black"
|
||||
stroke-width="4"
|
||||
:stroke-width="4 * radio"
|
||||
:marker-start="item.direction === 2 ? 'url(#backward-arrow)' : ''"
|
||||
:marker-end="
|
||||
item.direction === 2 ? 'url(#forward-arrow)' : 'url(#forward-arrow)'
|
||||
@ -62,7 +78,7 @@
|
||||
<path
|
||||
:d="getCurvePath(item)"
|
||||
:stroke="item.isSelect ? '#f48924' : '#00329F'"
|
||||
:stroke-width="5 * radio"
|
||||
:stroke-width="4 * radio"
|
||||
fill="none"
|
||||
:marker-start="item.direction === 2 ? 'url(#backward-arrow)' : ''"
|
||||
:marker-end="
|
||||
@ -97,7 +113,6 @@
|
||||
>
|
||||
<img
|
||||
src="@/assets/imgs/indexPage/chache-4备份 7@2x.png"
|
||||
alt=""
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
</div>
|
||||
@ -107,199 +122,93 @@
|
||||
:key="index"
|
||||
:style="{
|
||||
left:
|
||||
(item.locationX - item.locationWide / 2 / nowObject.showYamlJson.resolution / 100) *
|
||||
radio +
|
||||
'px',
|
||||
(Number(item.locationX) - Number(item.locationWidePx) / 2) * Number(radio) + 'px',
|
||||
top:
|
||||
(item.locationY - item.locationDeep / 2 / nowObject.showYamlJson.resolution / 100) *
|
||||
radio +
|
||||
'px'
|
||||
(Number(item.locationY) - Number(item.locationDeepPx) / 2) * Number(radio) + 'px',
|
||||
width: Number(item.locationWidePx) * Number(radio) + 'px',
|
||||
height: Number(item.locationDeepPx) * Number(radio) + 'px'
|
||||
}"
|
||||
>
|
||||
<!-- 库位点 -->
|
||||
<div
|
||||
class="indexpage-container-box-point-item-inner"
|
||||
v-if="item.showData"
|
||||
:style="{
|
||||
width:
|
||||
(item.showData.locationWide / nowObject.showYamlJson.resolution / 100) * radio +
|
||||
'px',
|
||||
height:
|
||||
(item.showData.locationDeep / nowObject.showYamlJson.resolution / 100) * radio +
|
||||
'px'
|
||||
}"
|
||||
>
|
||||
<!-- 库位 2-->
|
||||
<div v-if="item.type == 2" style="width: 100%; height: 100%;vertical-align: top;">
|
||||
<el-popover placement="top-start" trigger="hover" width="auto">
|
||||
<template #reference>
|
||||
<img
|
||||
:src="item.imgUrl"
|
||||
alt=""
|
||||
style="width: 100%; height: 100%"
|
||||
@dblclick="storeClick(item)"
|
||||
/>
|
||||
</template>
|
||||
<div class="indexpage-container-box-point-item-inner-popover">
|
||||
<div
|
||||
class="indexpage-container-box-point-item-inner-popover-item"
|
||||
style="margin-bottom: 8px"
|
||||
>
|
||||
<div class="indexpage-container-box-point-item-inner-popover-name">
|
||||
库位名：
|
||||
</div>
|
||||
<div class="indexpage-container-box-point-item-inner-popover-value">
|
||||
{{ item.showData.locationNo || '' }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="indexpage-container-box-point-item-inner-popover-item"
|
||||
style="margin-bottom: 8px"
|
||||
>
|
||||
<div class="indexpage-container-box-point-item-inner-popover-name">
|
||||
所属线库：
|
||||
</div>
|
||||
<div class="indexpage-container-box-point-item-inner-popover-value">
|
||||
{{ item.showData.laneName || '' }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="indexpage-container-box-point-item-inner-popover-item"
|
||||
style="margin-bottom: 8px"
|
||||
>
|
||||
<div class="indexpage-container-box-point-item-inner-popover-name">
|
||||
所属区域：
|
||||
</div>
|
||||
<div class="indexpage-container-box-point-item-inner-popover-value">
|
||||
{{ item.showData.areaName || '' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<!-- 设备点 -->
|
||||
<div v-if="item.type == 3">
|
||||
<img
|
||||
:src="item.formattedData.mapImageUrl"
|
||||
alt=""
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 设备点 -->
|
||||
<div
|
||||
class="indexpage-container-box-point-item-inner"
|
||||
v-if="item.type == 3"
|
||||
:style="{
|
||||
width:
|
||||
(item.formattedData.locationWide / nowObject.showYamlJson.resolution / 100) *
|
||||
radio +
|
||||
'px',
|
||||
height:
|
||||
(item.formattedData.locationDeep / nowObject.showYamlJson.resolution / 100) *
|
||||
radio +
|
||||
'px'
|
||||
}"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
:src="
|
||||
item.formattedData.mapImageUrl
|
||||
? item.formattedData.mapImageUrl
|
||||
: 'https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png'
|
||||
"
|
||||
alt=""
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 停车点 -->
|
||||
<div
|
||||
class="indexpage-container-box-point-item-inner"
|
||||
v-if="item.type == 4"
|
||||
:style="{
|
||||
width:
|
||||
(item.formattedData.locationWide / nowObject.showYamlJson.resolution / 100) *
|
||||
radio +
|
||||
'px',
|
||||
height:
|
||||
(item.formattedData.locationDeep / nowObject.showYamlJson.resolution / 100) *
|
||||
radio +
|
||||
'px'
|
||||
}"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
:src="
|
||||
item.formattedData.mapImageUrl
|
||||
? item.formattedData.mapImageUrl
|
||||
: 'https://api.znkjfw.com/admin-api/infra/file/4/get/停车场-01_png_179_1739326933020.png'
|
||||
"
|
||||
alt=""
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 路径点 -->
|
||||
<div
|
||||
class="indexpage-container-box-point-item-inner"
|
||||
v-if="item.type == 5"
|
||||
:style="{
|
||||
width: 150 * radio + 'px',
|
||||
height: 150 * radio + 'px'
|
||||
}"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
:src="
|
||||
item.formattedData.mapImageUrl
|
||||
? item.formattedData.mapImageUrl
|
||||
: 'https://api.znkjfw.com/admin-api/infra/file/4/get/区域_png_179_1739327151876.png'
|
||||
"
|
||||
alt=""
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 等待点 -->
|
||||
<div
|
||||
class="indexpage-container-box-point-item-inner"
|
||||
v-if="item.type == 6"
|
||||
:style="{
|
||||
width: 150 * radio + 'px',
|
||||
height: 150 * radio + 'px'
|
||||
}"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
:src="
|
||||
item.formattedData.mapImageUrl
|
||||
? item.formattedData.mapImageUrl
|
||||
: 'https://api.znkjfw.com/admin-api/infra/file/4/get/等待点_png_179_1739326991439.png'
|
||||
"
|
||||
alt=""
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 普通点 -->
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="item.sortNum + ''"
|
||||
placement="top"
|
||||
v-if="item.type == 1"
|
||||
>
|
||||
<!-- 1 路径点 -->
|
||||
<el-tooltip class="box-item" effect="dark" :content="item.sortNum + ''" placement="top">
|
||||
<div
|
||||
v-if="item.type === 1"
|
||||
:style="{
|
||||
width: 10 * radio + 'px',
|
||||
height: 10 * radio + 'px',
|
||||
background: '#000',
|
||||
width: Number(item.locationWidePx) * Number(radio) + 'px',
|
||||
height: Number(item.locationDeepPx) * Number(radio) + 'px',
|
||||
backgroundColor: '#000',
|
||||
borderRadius: '50%'
|
||||
}"
|
||||
>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<!-- 库位点 -->
|
||||
<el-popover placement="top-start" trigger="hover" width="auto">
|
||||
<template #reference>
|
||||
<img
|
||||
v-if="item.showData && item.type == 2"
|
||||
:src="item.imgUrl"
|
||||
:style="nodeStyle(item, index)"
|
||||
@dblclick="storeClick(item)"
|
||||
/>
|
||||
</template>
|
||||
<div>
|
||||
<div class="indexpage-popover-item">
|
||||
<div> 库位名： </div>
|
||||
<div>
|
||||
{{ item.showData?.locationNo || '' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="indexpage-popover-item">
|
||||
<div> 所属线库： </div>
|
||||
<div>
|
||||
{{ item.showData?.laneName || '' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="indexpage-popover-item">
|
||||
<div> 所属区域： </div>
|
||||
<div>
|
||||
{{ item.showData?.areaName || '' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
<!-- 设备点 -->
|
||||
<img
|
||||
v-if="item.type == 3"
|
||||
:src="
|
||||
item.formattedData.mapImageUrl ||
|
||||
'https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png'
|
||||
"
|
||||
:style="nodeStyle(item, index)"
|
||||
/>
|
||||
<!-- 停车点 -->
|
||||
<img
|
||||
v-if="item.type == 4"
|
||||
:src="
|
||||
item.formattedData.mapImageUrl ||
|
||||
'https://api.znkjfw.com/admin-api/infra/file/4/get/停车场-01_png_179_1739326933020.png'
|
||||
"
|
||||
:style="nodeStyle(item, index)"
|
||||
/>
|
||||
<!-- 路径点 -->
|
||||
<img
|
||||
v-if="item.type == 5"
|
||||
:src="
|
||||
item.formattedData.mapImageUrl ||
|
||||
'https://api.znkjfw.com/admin-api/infra/file/4/get/区域_png_179_1739327151876.png'
|
||||
"
|
||||
:style="nodeStyle(item, index)"
|
||||
/>
|
||||
<!-- 等待点 -->
|
||||
<img
|
||||
v-if="item.type == 6"
|
||||
:src="
|
||||
item.formattedData.mapImageUrl ||
|
||||
'https://api.znkjfw.com/admin-api/infra/file/4/get/等待点_png_179_1739326991439.png'
|
||||
"
|
||||
:style="nodeStyle(item, index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -311,7 +220,7 @@
|
||||
<div
|
||||
class="affix-container-left-box-item-box"
|
||||
:style="{
|
||||
height: legendObj.legendShow ? '84px' : '0',
|
||||
height: legendObj.legendShow ? '5.25rem' : '0',
|
||||
overflow: 'hidden',
|
||||
transition: 'all 0.3s ease-in-out'
|
||||
}"
|
||||
@ -320,14 +229,12 @@
|
||||
<div class="affix-container-left-box-item-left"> 行驶路线 </div>
|
||||
<img
|
||||
src="@/assets/imgs/indexPage/yanjing_xianshi_o.png"
|
||||
alt=""
|
||||
class="affix-container-left-box-item-img"
|
||||
v-if="legendObj.driveLineShow"
|
||||
@click="changDriveLineShow"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/imgs/indexPage/yanjing_yincang_o.png"
|
||||
alt=""
|
||||
class="affix-container-left-box-item-img"
|
||||
v-if="!legendObj.driveLineShow"
|
||||
@click="changDriveLineShow"
|
||||
@ -337,14 +244,12 @@
|
||||
<div class="affix-container-left-box-item-left"> 车辆 </div>
|
||||
<img
|
||||
src="@/assets/imgs/indexPage/yanjing_xianshi_o.png"
|
||||
alt=""
|
||||
class="affix-container-left-box-item-img"
|
||||
v-if="legendObj.carShow"
|
||||
@click="changCarShow"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/imgs/indexPage/yanjing_yincang_o.png"
|
||||
alt=""
|
||||
class="affix-container-left-box-item-img"
|
||||
v-if="!legendObj.carShow"
|
||||
@click="changCarShow"
|
||||
@ -358,7 +263,6 @@
|
||||
<div class="affix-container-left-box-item-bottom-left"> 图例 </div>
|
||||
<img
|
||||
src="@/assets/imgs/indexPage/zhankai@2x.png"
|
||||
alt=""
|
||||
class="affix-container-left-box-item-bottom-img"
|
||||
:style="{
|
||||
transform: legendObj.legendShow ? 'rotate(180deg)' : 'rotate(0deg)',
|
||||
@ -373,13 +277,12 @@
|
||||
<div class="affix-container-right" v-if="!isAllBoard">
|
||||
<!-- 拖拽 -->
|
||||
<div class="affix-container-right-item" @click="changeIsDrag">
|
||||
<img src="@/assets/imgs/indexPage/编组 12.png" alt="" style="width: 100%; height: 100%" />
|
||||
<img src="@/assets/imgs/indexPage/编组 12.png" style="width: 100%; height: 100%" />
|
||||
</div>
|
||||
<!-- 放大 -->
|
||||
<div class="affix-container-right-item">
|
||||
<img
|
||||
src="@/assets/imgs/indexPage/编组 14.png"
|
||||
alt=""
|
||||
style="width: 100%; height: 100%"
|
||||
@click="changeSizeRaio(0.2)"
|
||||
/>
|
||||
@ -388,7 +291,6 @@
|
||||
<div class="affix-container-right-item">
|
||||
<img
|
||||
src="@/assets/imgs/indexPage/编组 15.png"
|
||||
alt=""
|
||||
style="width: 100%; height: 100%"
|
||||
@click="changeSizeRaio(-0.2)"
|
||||
/>
|
||||
@ -397,7 +299,6 @@
|
||||
<div class="affix-container-right-item">
|
||||
<img
|
||||
src="@/assets/imgs/indexPage/编组 22.png"
|
||||
alt=""
|
||||
style="width: 100%; height: 100%"
|
||||
@click="toggleFullScreen"
|
||||
/>
|
||||
@ -437,25 +338,32 @@ const nowObject = ref(null) // 地图当前对象 父组件传过来的
|
||||
const testCarList = ref([]) //小车数组
|
||||
const carWidth = ref(60)
|
||||
const carHeight = ref(32)
|
||||
|
||||
const nodeStyle = (item, index) => {
|
||||
return {
|
||||
verticalAlign: 'top',
|
||||
objectFit: 'cover',
|
||||
width: Number(item.locationWidePx) * Number(radio.value) + 'px',
|
||||
height: Number(item.locationDeepPx) * Number(radio.value) + 'px'
|
||||
}
|
||||
}
|
||||
|
||||
// 定义属性
|
||||
const props = defineProps({
|
||||
// 当前选中的链接
|
||||
isAllBoard: propTypes.bool.def(false)
|
||||
})
|
||||
const convertActualToBrowser = (pointX, pointY) => {
|
||||
const y1 =
|
||||
Number(nowObject.value.showYamlJson.origin[1]) +
|
||||
Number(nowObject.value.showYamlJson.height) * Number(nowObject.value.showYamlJson.resolution)
|
||||
let x = Math.max(Number(pointX) - Number(nowObject.value.showYamlJson.origin[0]), 0)
|
||||
let resolution = Number(nowObject.value.showYamlJson.resolution)
|
||||
let origin = nowObject.value.showYamlJson.origin
|
||||
|
||||
const y1 = Number(origin[1]) + Number(nowObject.value.showYamlJson.height) * resolution
|
||||
let x = Math.max(Number(pointX) - Number(origin[0]), 0)
|
||||
let y = Math.max(y1 - Number(pointY), 0)
|
||||
|
||||
return {
|
||||
x:
|
||||
x / nowObject.value.showYamlJson.resolution -
|
||||
carWidth.value / nowObject.value.showYamlJson.resolution / 100 / 2,
|
||||
y:
|
||||
y / nowObject.value.showYamlJson.resolution -
|
||||
carHeight.value / nowObject.value.showYamlJson.resolution / 100 / 2
|
||||
x: x / resolution - carWidth.value / resolution / 100 / 2,
|
||||
y: y / resolution - carHeight.value / resolution / 100 / 2
|
||||
}
|
||||
}
|
||||
//是否可以拖拽
|
||||
@ -505,12 +413,12 @@ const getCurvePath = (curve) => {
|
||||
return `M ${startPointX} ${startPointY} C ${curve.beginControlX * radio.value} ${curve.beginControlY * radio.value}, ${curve.endControlX * radio.value} ${curve.endControlY * radio.value}, ${endPointX} ${endPointY}`
|
||||
}
|
||||
//放大缩小
|
||||
const isSizeRaio = ref(1)
|
||||
const isSizeRadio = ref(1)
|
||||
const changeSizeRaio = (type) => {
|
||||
if (type < 0 && isSizeRaio.value + type <= 0) {
|
||||
if (type < 0 && isSizeRadio.value + type <= 0) {
|
||||
return
|
||||
}
|
||||
isSizeRaio.value += type
|
||||
isSizeRadio.value += type
|
||||
}
|
||||
//图层状态
|
||||
const legendObj = reactive({
|
||||
@ -616,33 +524,22 @@ const toggleFullScreen = () => {
|
||||
|
||||
//库位双击
|
||||
const storeClick = async (item) => {
|
||||
// console.log(item)
|
||||
let storeData = await MapApi.houseLocationGetByMapItemId({
|
||||
mapId: item.positionMapId,
|
||||
mapItemId: item.id
|
||||
})
|
||||
// console.log(storeData)
|
||||
storeDialogRef.value.open(JSON.parse(JSON.stringify(storeData)))
|
||||
}
|
||||
const lineList = ref([])
|
||||
const pointList = ref([])
|
||||
const getPositionMapListFun = async (positionMapId) => {
|
||||
// console.log(positionMapId)
|
||||
let data = await MapApi.getPositionMapItemList({ positionMapId: positionMapId })
|
||||
// console.log(data)
|
||||
if (data && data.length > 0) {
|
||||
data.forEach((item) => {
|
||||
// console.log(JSON.parse(item.dataJson))
|
||||
item.formattedData = item.dataJson ? JSON.parse(item.dataJson) : ''
|
||||
item.showData = item.dataJson ? JSON.parse(item.dataJson)[0] : null
|
||||
item.imgUrl = formatteTypeImg(item.type)
|
||||
})
|
||||
}
|
||||
// console.log(data)
|
||||
pointList.value = data
|
||||
pointList.value = await MapApi.getPositionMapItemList({ positionMapId: positionMapId })
|
||||
|
||||
pointList.value?.forEach((item) => {
|
||||
item.formattedData = item.dataJson ? JSON.parse(item.dataJson) : ''
|
||||
item.showData = item.dataJson ? JSON.parse(item.dataJson)[0] : null
|
||||
item.imgUrl = formatTypeImg(item.type)
|
||||
|
||||
// console.log('=======================', pointList.value)
|
||||
pointList.value.forEach((item) => {
|
||||
if (item.type === 1) {
|
||||
item.locationDeep = 40
|
||||
item.locationWide = 40
|
||||
@ -662,10 +559,25 @@ const getPositionMapListFun = async (positionMapId) => {
|
||||
item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
|
||||
item.locationDeep = item.dataObj.locationDeep
|
||||
item.locationWide = item.dataObj.locationWide
|
||||
} else if (item.type === 7) {
|
||||
}
|
||||
//要将实际的cm改成px
|
||||
if (item.locationWide && item.locationDeep) {
|
||||
let pxObj = cmConversionPx(item.locationWide, item.locationDeep)
|
||||
item.locationWidePx = pxObj.pWidth
|
||||
item.locationDeepPx = pxObj.pHeight
|
||||
}
|
||||
})
|
||||
}
|
||||
//将节点实际宽高cm转换成px
|
||||
const cmConversionPx = (cWidth, cHeight) => {
|
||||
let pWidth = Number(cWidth) / Number(nowObject.value.showYamlJson.resolution) / 100
|
||||
let pHeight = Number(cHeight) / Number(nowObject.value.showYamlJson.resolution) / 100
|
||||
return {
|
||||
pWidth,
|
||||
pHeight
|
||||
}
|
||||
}
|
||||
|
||||
const draggableElement = ref(null)
|
||||
const resetPosition = () => {
|
||||
if (draggableElement.value) {
|
||||
@ -718,7 +630,7 @@ const calculateDistanceAndAngle = (point1, point2) => {
|
||||
}
|
||||
}
|
||||
|
||||
const formatteTypeImg = (type) => {
|
||||
const formatTypeImg = (type) => {
|
||||
switch (type) {
|
||||
case 1:
|
||||
return ''
|
||||
@ -776,7 +688,7 @@ const linkWebSocket = (url) => {
|
||||
[
|
||||
h(
|
||||
'span',
|
||||
{ style: 'color: rgba(255,255,255,0.88);font-size: 14px;' },
|
||||
{ style: 'color: rgba(255,255,255,0.88);font-size: .875rem;' },
|
||||
`${JSON.parse(jsonMsg.content)}`
|
||||
),
|
||||
h(
|
||||
@ -784,7 +696,7 @@ const linkWebSocket = (url) => {
|
||||
{
|
||||
onClick: () => lookError(),
|
||||
style:
|
||||
'color: rgba(255,255,255,0.88);font-size: 14px;cursor: pointer;text-decoration-line: underline;margin-left: 32px;'
|
||||
'color: rgba(255,255,255,0.88);font-size: .875rem;cursor: pointer;text-decoration-line: underline;margin-left: 2rem;'
|
||||
},
|
||||
'详情'
|
||||
)
|
||||
@ -823,9 +735,8 @@ const getMapData = async (item) => {
|
||||
testCarList.value = []
|
||||
nowObject.value = JSON.parse(JSON.stringify(item))
|
||||
nowObject.value.showYamlJson = JSON.parse(item.yamlJson)
|
||||
let websoketUrl = `${replaceHttpWithWs(import.meta.env.VITE_BASE_URL)}/infra/ws?type=map&floor=${nowObject.value.floor}&area=${nowObject.value.area}`
|
||||
// console.log(websoketUrl)
|
||||
linkWebSocket(websoketUrl)
|
||||
let websocketUrl = `${replaceHttpWithWs(import.meta.env.VITE_BASE_URL)}/infra/ws?type=map&floor=${nowObject.value.floor}&area=${nowObject.value.area}`
|
||||
linkWebSocket(websocketUrl)
|
||||
getPositionMapListFun(nowObject.value.id)
|
||||
emit('transmitMapInfo', {
|
||||
id: item.id,
|
||||
@ -856,17 +767,14 @@ const computedRatio = () => {
|
||||
//这段代码之后会删掉 yaml会给原始宽高
|
||||
getImageSize(imgUrl.value)
|
||||
.then(({ width, height }) => {
|
||||
// console.log("原始地图的宽高",JSON.parse(nowObject.value.yamlJson))
|
||||
if (testCarList.value.length) {
|
||||
testCarList.value.forEach((item) => {
|
||||
console.log('dayin', item)
|
||||
item.originWidth = width
|
||||
item.originHeight = height
|
||||
item.origin = JSON.parse(nowObject.value.yamlJson).origin
|
||||
item.realX = convertActualToBrowser(item.data.pose2d.x, item.data.pose2d.y).x
|
||||
item.realY = convertActualToBrowser(item.data.pose2d.x, item.data.pose2d.y).y
|
||||
})
|
||||
// console.log('当前数据', testCarList.value)
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
@ -891,10 +799,8 @@ const computedRatio = () => {
|
||||
}
|
||||
})
|
||||
getImageWidth(imgUrl.value, 'height').then((res) => {
|
||||
// console.log('高', res)
|
||||
heightVal.value = res * radio.value
|
||||
})
|
||||
// console.log(width)
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -902,7 +808,6 @@ const computedRatio = () => {
|
||||
// 获取地图连线列表
|
||||
const getMapLineList = () => {
|
||||
MapApi.mapLineListGet({ positionMapId: nowObject.value.id }).then((res) => {
|
||||
// console.log(res)
|
||||
lineList.value = res
|
||||
})
|
||||
}
|
||||
@ -1047,9 +952,9 @@ onUnmounted(() => {
|
||||
}
|
||||
.indexpage-container .affix-container-top {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
height: 5rem;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
border-bottom: 0.0625rem solid #f5f5f5;
|
||||
}
|
||||
.indexpage-container-box-point {
|
||||
width: 100%;
|
||||
@ -1060,11 +965,12 @@ onUnmounted(() => {
|
||||
right: 0;
|
||||
}
|
||||
.indexpage-container-box-point-item {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
}
|
||||
.scrollbar-flex-content {
|
||||
padding: 2px 6px;
|
||||
padding: 0.125rem 0.375rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
@ -1074,11 +980,11 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 90px;
|
||||
height: 30px;
|
||||
margin: 10px 6px;
|
||||
width: 5.625rem;
|
||||
height: 1.875rem;
|
||||
margin: 0.625rem 0.375rem;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
border-radius: 0.25rem;
|
||||
background: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
position: relative;
|
||||
@ -1099,14 +1005,15 @@ onUnmounted(() => {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.indexpage-container-box-point-item-inner-popover-item {
|
||||
.indexpage-popover-item {
|
||||
display: flex;
|
||||
font-family:
|
||||
PingFangSC,
|
||||
PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
color: #0d162a;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.line-box {
|
||||
position: absolute;
|
||||
@ -1117,21 +1024,21 @@ onUnmounted(() => {
|
||||
}
|
||||
.affix-container-left {
|
||||
position: fixed;
|
||||
bottom: 26px;
|
||||
bottom: 1.625rem;
|
||||
z-index: 999;
|
||||
}
|
||||
.affix-container-left-box {
|
||||
width: 144px;
|
||||
width: 9rem;
|
||||
}
|
||||
.affix-container-left-box-item-box {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
border-bottom: 0.0625rem solid #eeeeee;
|
||||
background: #ffffff;
|
||||
}
|
||||
.affix-container-left-box-item {
|
||||
width: 100%;
|
||||
padding: 0 18px;
|
||||
height: 42px;
|
||||
padding: 0 1.125rem;
|
||||
height: 2.625rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -1141,18 +1048,18 @@ onUnmounted(() => {
|
||||
PingFangSC,
|
||||
PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
}
|
||||
.affix-container-left-box-item-img {
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 12px;
|
||||
width: 1.25rem;
|
||||
height: 0.75rem;
|
||||
}
|
||||
.affix-container-left-box-item-bottom {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
height: 2.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -1162,8 +1069,8 @@ onUnmounted(() => {
|
||||
.affix-container-left-box-item-bottom-img {
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
width: 12px;
|
||||
height: 7px;
|
||||
width: 0.75rem;
|
||||
height: 0.4375rem;
|
||||
}
|
||||
.affix-container-left-box-item-bottom-left {
|
||||
cursor: pointer;
|
||||
@ -1172,24 +1079,24 @@ onUnmounted(() => {
|
||||
PingFangSC,
|
||||
PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
color: #98a4bf;
|
||||
margin-right: 2px;
|
||||
margin-right: 0.125rem;
|
||||
}
|
||||
.affix-container-right {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
right: 40px;
|
||||
bottom: 20px;
|
||||
right: 2.5rem;
|
||||
bottom: 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.affix-container-right-item {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
margin-left: 8px;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -333,7 +333,6 @@
|
||||
>
|
||||
<!-- 1 路径点 -->
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="item.sortNum || '节点未保存'"
|
||||
placement="top"
|
||||
@ -422,7 +421,7 @@
|
||||
:x2="Number(state.currentDrawX)"
|
||||
:y2="Number(state.currentDrawY)"
|
||||
stroke="#00329F"
|
||||
stroke-width="3"
|
||||
stroke-width="4"
|
||||
/>
|
||||
<template v-if="state.mapRouteList.length > 0">
|
||||
<template v-for="(curve, index) in state.mapRouteList" :key="index">
|
||||
@ -1155,12 +1154,12 @@ const state = reactive({
|
||||
icon: 'ep:semi-select',
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
switchType: 'drawRoute',
|
||||
name: '框选绘制',
|
||||
icon: 'ep:semi-select',
|
||||
isActive: false
|
||||
},
|
||||
// {
|
||||
// switchType: 'drawRoute',
|
||||
// name: '框选绘制',
|
||||
// icon: 'ep:semi-select',
|
||||
// isActive: false
|
||||
// },
|
||||
{
|
||||
switchType: 'editRoute',
|
||||
name: '编辑路线',
|
||||
@ -2026,45 +2025,45 @@ const clickDrawSelectionArea = () => {
|
||||
}
|
||||
//将一个数组中的点位 按照第一个和最后一个排成一条直线
|
||||
const mapPointsToLine = (points) => {
|
||||
if (points.length < 2) {
|
||||
return points
|
||||
}
|
||||
// 取数组的第一项和最后一项
|
||||
const firstPoint = points[0]
|
||||
const lastPoint = points[points.length - 1]
|
||||
// 找出 locationX 最大和最小的项
|
||||
let minXPoint = points[0]
|
||||
let maxXPoint = points[0]
|
||||
points.forEach((point) => {
|
||||
if (point.locationX < minXPoint.locationX) {
|
||||
minXPoint = point
|
||||
}
|
||||
if (point.locationX > maxXPoint.locationX) {
|
||||
maxXPoint = point
|
||||
}
|
||||
})
|
||||
|
||||
// 计算直线的斜率
|
||||
const dx = lastPoint.locationX - firstPoint.locationX
|
||||
const dy = lastPoint.locationY - firstPoint.locationY
|
||||
const dx = maxXPoint.locationX - minXPoint.locationX
|
||||
const dy = maxXPoint.locationY - minXPoint.locationY
|
||||
|
||||
// 处理垂直直线的情况
|
||||
if (dx === 0) {
|
||||
// 垂直直线的情况
|
||||
return points.map((point, index) => {
|
||||
if (index === 0 || index === points.length - 1) {
|
||||
return points.map((point) => {
|
||||
if (point === minXPoint || point === maxXPoint) {
|
||||
return point
|
||||
}
|
||||
return {
|
||||
...point,
|
||||
locationX: firstPoint.locationX,
|
||||
locationY: point.locationY
|
||||
locationX: minXPoint.locationX
|
||||
}
|
||||
})
|
||||
}
|
||||
const slope = dy / dx
|
||||
// 计算直线的截距
|
||||
const intercept = firstPoint.locationY - slope * firstPoint.locationX
|
||||
|
||||
// 映射其他点到直线上
|
||||
return points.map((point, index) => {
|
||||
if (index === 0 || index === points.length - 1) {
|
||||
const slope = dy / dx
|
||||
const intercept = minXPoint.locationY - slope * minXPoint.locationX
|
||||
|
||||
return points.map((point) => {
|
||||
if (point === minXPoint || point === maxXPoint) {
|
||||
return point
|
||||
}
|
||||
const newY = slope * point.locationX + intercept
|
||||
// 考虑精度问题，这里保留三位小数
|
||||
const roundedY = parseFloat(newY.toFixed(8))
|
||||
return {
|
||||
...point,
|
||||
locationY: roundedY
|
||||
locationY: newY
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,94 +1,130 @@
|
||||
<template>
|
||||
<div style="width: 600px; height: 300px; background: #dbeede; position: relative">
|
||||
<div v-for="(item, index) in points" :key="index">
|
||||
<div
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
backgroundColor: '#000',
|
||||
borderRadius: '50%',
|
||||
zIndex: 999,
|
||||
left: item.x + 'px',
|
||||
top: item.y + 'px'
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 600px; height: 300px; background: #b3dcff; position: relative">
|
||||
<div v-for="(item, index) in mappedPoints" :key="index">
|
||||
<div
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
backgroundColor: '#000',
|
||||
borderRadius: '50%',
|
||||
zIndex: 999,
|
||||
left: item.x + 'px',
|
||||
top: item.y + 'px'
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
@mousedown="startSelection"
|
||||
@mousemove="updateSelection"
|
||||
@mouseup="endSelection"
|
||||
style="position: relative; width: 100vw; height: 100vh"
|
||||
>
|
||||
<!-- 绘制所有框选区域 -->
|
||||
<div
|
||||
v-for="(rect, index) in selectionRects"
|
||||
:key="index"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
left: `${rect.left}px`,
|
||||
top: `${rect.top}px`,
|
||||
width: `${rect.width}px`,
|
||||
height: `${rect.height}px`,
|
||||
backgroundColor: 'rgba(0, 0, 255, 0.2)',
|
||||
border: '1px solid blue'
|
||||
}"
|
||||
></div>
|
||||
|
||||
<!-- 绘制点位 -->
|
||||
<div
|
||||
v-for="(point, index) in points"
|
||||
:key="index"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
left: `${point.x}px`,
|
||||
top: `${point.y}px`,
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
backgroundColor: selectedPoints.includes(point) ? 'red' : 'green',
|
||||
borderRadius: '50%'
|
||||
}"
|
||||
></div>
|
||||
|
||||
<!-- 确认按钮 -->
|
||||
<button @click="confirmSelection" style="position: fixed; bottom: 20px; right: 20px">
|
||||
确认
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const points = ref([
|
||||
{
|
||||
x: 123.567,
|
||||
y: 178.123
|
||||
},
|
||||
{
|
||||
x: 255.567,
|
||||
y: 79.123
|
||||
},
|
||||
{
|
||||
x: 382.567,
|
||||
y: 178.123
|
||||
},
|
||||
{
|
||||
x: 481.567,
|
||||
y: 238.123
|
||||
}
|
||||
])
|
||||
export default {
|
||||
setup() {
|
||||
const points = ref([
|
||||
{ x: 10, y: 10 },
|
||||
{ x: 30, y: 100 },
|
||||
{ x: 40, y: 40 },
|
||||
{ x: 230, y: 400 },
|
||||
{ x: 750, y: 640 }
|
||||
])
|
||||
|
||||
const mapPointsToLine = (points) => {
|
||||
if (points.length < 2) {
|
||||
return points
|
||||
}
|
||||
// 取数组的第一项和最后一项
|
||||
const firstPoint = points[0]
|
||||
const lastPoint = points[points.length - 1]
|
||||
const isSelecting = ref(false)
|
||||
const startPos = ref({ x: 0, y: 0 })
|
||||
const currentRect = ref({ left: 0, top: 0, width: 0, height: 0 })
|
||||
const selectionRects = ref([]) // 存储所有框选区域
|
||||
const selectedPoints = ref([]) // 存储选中的点位
|
||||
const selectedPointsInOrder = ref([]) // 按照框选顺序存储选中的点位
|
||||
|
||||
// 计算直线的斜率
|
||||
const dx = lastPoint.x - firstPoint.x
|
||||
const dy = lastPoint.y - firstPoint.y
|
||||
if (dx === 0) {
|
||||
// 垂直直线的情况
|
||||
return points.map((point, index) => {
|
||||
if (index === 0 || index === points.length - 1) {
|
||||
return point
|
||||
}
|
||||
return { x: firstPoint.x, y: point.y }
|
||||
})
|
||||
}
|
||||
const slope = dy / dx
|
||||
// 计算直线的截距
|
||||
const intercept = firstPoint.y - slope * firstPoint.x
|
||||
|
||||
// 映射其他点到直线上
|
||||
return points.map((point, index) => {
|
||||
if (index === 0 || index === points.length - 1) {
|
||||
return point
|
||||
// 开始框选
|
||||
const startSelection = (event) => {
|
||||
isSelecting.value = true
|
||||
startPos.value = { x: event.clientX, y: event.clientY }
|
||||
currentRect.value = { left: event.clientX, top: event.clientY, width: 0, height: 0 }
|
||||
}
|
||||
const newY = slope * point.x + intercept
|
||||
return { x: point.x, y: newY }
|
||||
})
|
||||
}
|
||||
|
||||
const mappedPoints = mapPointsToLine(points.value)
|
||||
console.log(mappedPoints)
|
||||
// 更新框选区域
|
||||
const updateSelection = (event) => {
|
||||
if (isSelecting.value) {
|
||||
currentRect.value = {
|
||||
left: Math.min(startPos.value.x, event.clientX),
|
||||
top: Math.min(startPos.value.y, event.clientY),
|
||||
width: Math.abs(event.clientX - startPos.value.x),
|
||||
height: Math.abs(event.clientY - startPos.value.y)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 结束框选
|
||||
const endSelection = () => {
|
||||
if (isSelecting.value) {
|
||||
isSelecting.value = false
|
||||
selectionRects.value.push({ ...currentRect.value }) // 保存当前框选区域
|
||||
checkPointsInSelection(currentRect.value) // 检查当前框选区域内的点位
|
||||
}
|
||||
}
|
||||
|
||||
// 检查点位是否在框选区域内
|
||||
const checkPointsInSelection = (rect) => {
|
||||
points.value.forEach((point) => {
|
||||
if (
|
||||
point.x >= rect.left &&
|
||||
point.x <= rect.left + rect.width &&
|
||||
point.y >= rect.top &&
|
||||
point.y <= rect.top + rect.height &&
|
||||
!selectedPoints.value.includes(point) // 避免重复添加
|
||||
) {
|
||||
selectedPoints.value.push(point)
|
||||
selectedPointsInOrder.value.push(point) // 按照框选顺序添加
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 确认选择
|
||||
const confirmSelection = () => {
|
||||
console.log('Selected Points in Order:', selectedPointsInOrder.value)
|
||||
// 清除框选区域和选中的点位
|
||||
selectionRects.value = []
|
||||
selectedPoints.value = []
|
||||
selectedPointsInOrder.value = []
|
||||
}
|
||||
|
||||
return {
|
||||
points,
|
||||
isSelecting,
|
||||
selectionRects,
|
||||
selectedPoints,
|
||||
startSelection,
|
||||
updateSelection,
|
||||
endSelection,
|
||||
confirmSelection
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -551,13 +551,13 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div style="width: 100%; display: flex; align-items: center">
|
||||
<el-form-item
|
||||
required
|
||||
label="放货位置"
|
||||
:prop="`taskDetailList[${index}].releaseId`"
|
||||
:rules="{ required: true, message: '放货位置不能为空', trigger: 'change' }"
|
||||
>
|
||||
<el-form-item
|
||||
required
|
||||
label="放货位置"
|
||||
:prop="`taskDetailList[${index}].releaseId`"
|
||||
:rules="{ required: true, message: '放货位置不能为空', trigger: 'change' }"
|
||||
>
|
||||
<div style="width: 100%; display: flex; align-items: center">
|
||||
<el-select
|
||||
:disabled="!detailItem.releaseType"
|
||||
v-model="detailItem.releaseId"
|
||||
@ -579,15 +579,15 @@
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-icon
|
||||
class="ml-2"
|
||||
size="20"
|
||||
color="#00329F"
|
||||
@click="chooseLocation('release', detailItem, index)"
|
||||
><Location />
|
||||
</el-icon>
|
||||
</div>
|
||||
<el-icon
|
||||
class="ml-2"
|
||||
size="20"
|
||||
color="#00329F"
|
||||
@click="chooseLocation('release', detailItem, index)"
|
||||
><Location />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user