创建编辑删除仓库点位地图连线
This commit is contained in:
yyy
parent
cf90d2c457
commit
87bd656625
@ -1,6 +1,6 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
//获得任务号
|
||||
//获得获得库位
|
||||
export const getHouseLocation = async (id: number) => {
|
||||
return await request.get({ url: `/system/ware/house-location/get?id=` + id })
|
||||
}
|
||||
|
||||
@ -94,4 +94,19 @@ export const houseLocationGetByMapItemId = async (params) => {
|
||||
// 更新库位
|
||||
export const updateHouseLocation = async (data) => {
|
||||
return await request.put({ url: `/system/ware/house-location/update`, data })
|
||||
}
|
||||
}
|
||||
//创建编辑删除仓库点位地图连线
|
||||
export const createOrEditOrDelPositionMapLine = async (positionMapId, data) => {
|
||||
return await request.post({
|
||||
url: `/system/position-map-line/createOrEditOrDel?positionMapId=${positionMapId}`,
|
||||
data
|
||||
})
|
||||
}
|
||||
// 获得仓库点位地图连线
|
||||
export const getPositionMapLineById = async (id: number) => {
|
||||
return await request.get({ url: `/system/position-map-line/get?id=` + id })
|
||||
}
|
||||
// 通过地图id获取连线列表
|
||||
export const getPositionMapLineByPositionMapId = async (positionMapId: number) => {
|
||||
return await request.get({ url: `/system/position-map-line/list?positionMapId=` + positionMapId })
|
||||
}
|
||||
|
||||
@ -249,33 +249,39 @@
|
||||
<svg
|
||||
:width="imgBgObj.width"
|
||||
:height="imgBgObj.height"
|
||||
style="position: absolute; top: 0; left: 0"
|
||||
style="position: absolute; top: 0; left: 0; z-index: 9"
|
||||
>
|
||||
<path
|
||||
v-for="(curve, index) in state.mapRouteList"
|
||||
:key="index"
|
||||
:d="getCurvePath(curve)"
|
||||
:stroke="curve.isSelected ? 'red' : 'blue'"
|
||||
stroke-width="2"
|
||||
:stroke="curve.isSelected ? '#f48924' : '#00329F'"
|
||||
stroke-width="3"
|
||||
fill="none"
|
||||
@mousedown="handleEditRoute(curve)"
|
||||
@click="handleEditRoute(curve, index)"
|
||||
/>
|
||||
<line
|
||||
:x1="state.selectedCurve.startPointX"
|
||||
:y1="state.selectedCurve.startPointY"
|
||||
:x2="state.selectedCurve.beginControlX"
|
||||
:y2="state.selectedCurve.beginControlY"
|
||||
stroke="gray"
|
||||
v-for="(curve, index) in state.mapRouteList"
|
||||
:key="'start-' + index"
|
||||
:x1="curve.startPointX"
|
||||
:y1="curve.startPointY"
|
||||
:x2="curve.beginControlX"
|
||||
:y2="curve.beginControlY"
|
||||
:stroke="curve.isSelected ? '#f48924' : '#00329F'"
|
||||
stroke-dasharray="4"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<!-- 第二条控制线 -->
|
||||
<line
|
||||
:x1="state.selectedCurve.endPointX"
|
||||
:y1="state.selectedCurve.endPointY"
|
||||
:x2="state.selectedCurve.endControlX"
|
||||
:y2="state.selectedCurve.endControlY"
|
||||
stroke="gray"
|
||||
v-for="(curve, index) in state.mapRouteList"
|
||||
:key="'end-' + index"
|
||||
:x1="curve.endPointX"
|
||||
:y1="curve.endPointY"
|
||||
:x2="curve.endControlX"
|
||||
:y2="curve.endControlY"
|
||||
:stroke="curve.isSelected ? '#f48924' : '#00329F'"
|
||||
stroke-dasharray="4"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<circle
|
||||
v-for="(curve, index) in state.mapRouteList"
|
||||
@ -283,8 +289,8 @@
|
||||
:cx="curve.beginControlX"
|
||||
:cy="curve.beginControlY"
|
||||
r="5"
|
||||
fill="green"
|
||||
@mousedown="startDrag(index, 'start')"
|
||||
:fill="curve.isSelected ? '#f48924' : '#00329F'"
|
||||
@mousedown="startDrag(curve, index, 'start')"
|
||||
/>
|
||||
<circle
|
||||
v-for="(curve, index) in state.mapRouteList"
|
||||
@ -292,8 +298,8 @@
|
||||
:cx="curve.endControlX"
|
||||
:cy="curve.endControlY"
|
||||
r="5"
|
||||
fill="green"
|
||||
@mousedown="startDrag(index, 'end')"
|
||||
:fill="curve.isSelected ? '#f48924' : '#00329F'"
|
||||
@mousedown="startDrag(curve, index, 'end')"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
@ -414,6 +420,7 @@
|
||||
|
||||
<script setup>
|
||||
import JSONBigInt from 'json-bigint'
|
||||
import { ElLoading } from 'element-plus'
|
||||
import { ref, defineComponent, reactive, nextTick, onMounted } from 'vue'
|
||||
import editNodeProperties from './components-tool/editNodeProperties.vue'
|
||||
import textFormToolDialog from './components-tool/textFormToolDialog.vue'
|
||||
@ -435,7 +442,6 @@ const mapBackgroundRef = ref()
|
||||
const inputBoxRef = ref() //文字输入框
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const formLoading = ref(false)
|
||||
|
||||
const allHistoryList = ref([]) //全部的历史记录
|
||||
const currentIndex = ref(0) //用于记录是哪条历史记录的
|
||||
@ -457,7 +463,6 @@ const resizeEnd = (x, y, w, h, item, index) => {
|
||||
}
|
||||
// 拖拽停止
|
||||
const dragEnd = (x, y, item, index) => {
|
||||
console.log('拖拽')
|
||||
if (x === item.locationX && y === item.locationY) return
|
||||
allMapPointInfo.value[index].locationX = x
|
||||
allMapPointInfo.value[index].locationY = y
|
||||
@ -497,7 +502,6 @@ const addEditHistory = () => {
|
||||
currentIndex.value++
|
||||
}
|
||||
interfaceRefreshed.value = true
|
||||
console.log(allHistoryList.value, 'allHistoryList')
|
||||
}
|
||||
|
||||
//上一步
|
||||
@ -505,7 +509,6 @@ const backPreviousStep = () => {
|
||||
if (currentIndex.value > 0) {
|
||||
currentIndex.value--
|
||||
allMapPointInfo.value = allHistoryList.value[currentIndex.value]
|
||||
console.log('撤销', allHistoryList.value[currentIndex.value])
|
||||
} else {
|
||||
message.warning('没了老铁')
|
||||
}
|
||||
@ -515,7 +518,6 @@ const backNextStep = () => {
|
||||
if (currentIndex.value < allHistoryList.value.length - 1) {
|
||||
currentIndex.value++
|
||||
allMapPointInfo.value = allHistoryList.value[currentIndex.value]
|
||||
console.log('重做', allHistoryList.value[currentIndex.value])
|
||||
} else {
|
||||
message.warning('没了老铁')
|
||||
}
|
||||
@ -544,8 +546,7 @@ const mapClick = (e) => {
|
||||
dataList: [], //存库位的
|
||||
dataObj: {} //存 设备点 停车点 文字
|
||||
})
|
||||
currentIndex.value++
|
||||
allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
|
||||
addEditHistory()
|
||||
}
|
||||
//文字输入
|
||||
if (toolbarSwitchType.value === 'text') {
|
||||
@ -800,9 +801,12 @@ const state = reactive({
|
||||
imageChangeMultiple: 1, //图片放大缩小的倍数
|
||||
prohibitedOperation: false, //禁止操作 在框选测距等操作时，禁止所有拖动等操作
|
||||
mapRouteList: [], //仓库点位地图连线
|
||||
isDragging: false, // 是否正在拖拽
|
||||
currentDragTarget: '', //当前拖拽的目标（起点、终点、控制点）
|
||||
selectedCurve: '' // 当前选中的曲线
|
||||
currentDragTarget: {
|
||||
index: null,
|
||||
type: null
|
||||
}, //当前拖拽的目标（起点、终点、控制点）
|
||||
selectedCurve: '', // 当前选中的曲线
|
||||
svgZIndex: 9999
|
||||
})
|
||||
const toolbarClick = (item) => {
|
||||
let type = item.switchType
|
||||
@ -1143,6 +1147,9 @@ const clickDrawSelectionArea = () => {
|
||||
}
|
||||
|
||||
let curve = {
|
||||
isSelected: false, //是否选中
|
||||
startingPointId: routeList[0].id,
|
||||
endPointId: routeList[1].id,
|
||||
startPointX: routeList[0].locationX + routeList[0].locationWide / 2, //开始点
|
||||
startPointY: routeList[0].locationY + routeList[0].locationDeep / 2, //开始点
|
||||
endPointX: routeList[1].locationX + routeList[1].locationWide / 2, //结束点
|
||||
@ -1157,13 +1164,12 @@ const clickDrawSelectionArea = () => {
|
||||
expansionZoneRight: 0, //膨胀区域右
|
||||
method: 0, //行走方法 0.直线 1.上左曲线2.上右曲线3.下左曲线 4.下右曲线
|
||||
direction: 2, //方向 1.单向 2.双向,
|
||||
forwardSpeedLimit: '1.5', //正向限速
|
||||
reverseSpeedLimit: '0.4' // 反向限速
|
||||
forwardSpeedLimit: 1.5, //正向限速
|
||||
reverseSpeedLimit: 0.4, // 反向限速
|
||||
toward: 0
|
||||
}
|
||||
state.selectedCurve = curve
|
||||
state.mapRouteList.push(curve)
|
||||
state.currentDragTarget = 'end'
|
||||
state.isDragging = true
|
||||
}
|
||||
}
|
||||
//计算是不是在同一条直线的
|
||||
@ -1206,70 +1212,45 @@ const isStraightLine = (binLocation) => {
|
||||
}
|
||||
//三阶贝塞尔曲线
|
||||
// 开始拖拽
|
||||
const dragging = ref()
|
||||
const startDrag = (index, type) => {
|
||||
dragging.value = { index, type }
|
||||
const startDrag = (item, index, type) => {
|
||||
handleEditRoute(item, index)
|
||||
state.currentDragTarget = { index, type }
|
||||
window.addEventListener('mousemove', handleDrag)
|
||||
window.addEventListener('mouseup', endDrag)
|
||||
}
|
||||
// 处理拖动事件
|
||||
const handleDrag = (event) => {
|
||||
if (dragging.value.index !== null) {
|
||||
const curve = state.mapRouteList[dragging.value.index]
|
||||
if (dragging.value.type === 'start') {
|
||||
curve.beginControlX = event.offsetX
|
||||
curve.beginControlY = event.offsetY
|
||||
const x = disposeEventPoints(event).x
|
||||
const y = disposeEventPoints(event).y
|
||||
|
||||
if (state.currentDragTarget.index !== null) {
|
||||
const curve = state.mapRouteList[state.currentDragTarget.index]
|
||||
if (state.currentDragTarget.type === 'start') {
|
||||
curve.beginControlX = x
|
||||
curve.beginControlY = y
|
||||
} else {
|
||||
curve.endControlX = event.offsetX
|
||||
curve.endControlY = event.offsetY
|
||||
curve.endControlX = x
|
||||
curve.endControlY = y
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 结束拖动
|
||||
const endDrag = () => {
|
||||
dragging.value = { index: null, type: null }
|
||||
state.currentDragTarget = { index: null, type: null }
|
||||
window.removeEventListener('mousemove', handleDrag)
|
||||
window.removeEventListener('mouseup', endDrag)
|
||||
}
|
||||
|
||||
// 鼠标按下事件
|
||||
const handleMouseDown = (event) => {}
|
||||
|
||||
// 鼠标移动事件
|
||||
const handleMouseMove = (event) => {
|
||||
if (!state.isDragging || !state.selectedCurve) return
|
||||
|
||||
const mousePos = disposeEventPoints(event)
|
||||
|
||||
// 更新拖拽的目标点
|
||||
if (state.currentDragTarget === 'start') {
|
||||
state.selectedCurve.startPointX = mousePos.x
|
||||
state.selectedCurve.startPointY = mousePos.y
|
||||
} else if (state.currentDragTarget === 'end') {
|
||||
state.selectedCurve.endPointX = mousePos.x
|
||||
state.selectedCurve.endPointY = mousePos.y
|
||||
} else if (state.currentDragTarget === 'control1') {
|
||||
state.selectedCurve.beginControlX = mousePos.x
|
||||
state.selectedCurve.beginControlY = mousePos.y
|
||||
} else if (state.currentDragTarget === 'control2') {
|
||||
state.selectedCurve.endControlX = mousePos.x
|
||||
state.selectedCurve.endControlY = mousePos.y
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标松开事件
|
||||
const handleMouseUp = (event) => {
|
||||
state.isDragging = false
|
||||
state.currentDragTarget = null
|
||||
}
|
||||
// 获取曲线的路径
|
||||
const getCurvePath = (curve) => {
|
||||
return `M ${curve.startPointX} ${curve.startPointY} C ${curve.beginControlX} ${curve.beginControlY}, ${curve.endControlX} ${curve.endControlY}, ${curve.endPointX} ${curve.endPointY}`
|
||||
}
|
||||
//编辑路线
|
||||
const handleEditRoute = (item) => {
|
||||
console.log('Selected curve:', item)
|
||||
const handleEditRoute = (item, index) => {
|
||||
state.mapRouteList.forEach((curve, i) => {
|
||||
curve.isSelected = i === index
|
||||
})
|
||||
state.selectedCurve = item
|
||||
console.log('选中路线', item)
|
||||
}
|
||||
|
||||
//测距相关
|
||||
@ -1334,8 +1315,7 @@ const imgBgObj = reactive({
|
||||
floor: '',
|
||||
area: '',
|
||||
resolution: 0.05,
|
||||
// origin: [-54.4, -34.2]
|
||||
origin: [-10.4, 9.1]
|
||||
origin: [-54.4, -34.2]
|
||||
})
|
||||
//接收参数
|
||||
const { query } = useRoute() // 查询参数
|
||||
@ -1366,6 +1346,7 @@ const getMapData = async (mapInfo) => {
|
||||
imgBgObj.height = img.naturalHeight
|
||||
console.log(img.naturalWidth, img.naturalHeight)
|
||||
getAllNodeList()
|
||||
getAllMapRoute()
|
||||
}
|
||||
//加载图片失败
|
||||
img.onerror = () => {
|
||||
@ -1377,6 +1358,7 @@ const getAllNodeList = async () => {
|
||||
let list = await MapApi.getPositionMapItemList({
|
||||
positionMapId: imgBgObj.positionMapId
|
||||
})
|
||||
allMapPointInfo.value = []
|
||||
list.forEach((item) => {
|
||||
item.layerSelectionShow = true //用于图层
|
||||
item.locationX = Number(item.locationX)
|
||||
@ -1434,18 +1416,30 @@ const getAllNodeList = async () => {
|
||||
})
|
||||
allHistoryList.value[0] = JSON.parse(JSON.stringify(allMapPointInfo.value))
|
||||
}
|
||||
//获取所有的路线
|
||||
const getAllMapRoute = async () => {
|
||||
state.mapRouteList = await MapApi.getPositionMapLineByPositionMapId(imgBgObj.positionMapId)
|
||||
}
|
||||
|
||||
//保存地图按钮
|
||||
const saveMap = async () => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '保存中',
|
||||
background: 'rgba(255, 255, 255, 0.7)'
|
||||
})
|
||||
//节点的保存
|
||||
await saveNodeList()
|
||||
//路线的保存
|
||||
await saveMapRoute()
|
||||
//关闭loading
|
||||
loading.close()
|
||||
message.success('保存成功')
|
||||
await getAllNodeList()
|
||||
}
|
||||
//节点的保存
|
||||
const saveNodeList = async () => {
|
||||
formLoading.value = true
|
||||
let list = allHistoryList.value[currentIndex.value]
|
||||
|
||||
list.forEach((item) => {
|
||||
if (item.type === 7) {
|
||||
item.dataObj.positionMapId = imgBgObj.positionMapId
|
||||
@ -1459,13 +1453,11 @@ const saveNodeList = async () => {
|
||||
item.dataJson = JSON.stringify(item.dataObj)
|
||||
}
|
||||
})
|
||||
|
||||
try {
|
||||
await MapApi.batchSaveOrEditOrDelMapItem(imgBgObj.positionMapId, list)
|
||||
message.success('创建成功')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
await MapApi.batchSaveOrEditOrDelMapItem(imgBgObj.positionMapId, list)
|
||||
}
|
||||
//路线的保存
|
||||
const saveMapRoute = async () => {
|
||||
await MapApi.createOrEditOrDelPositionMapLine(imgBgObj.positionMapId, state.mapRouteList)
|
||||
}
|
||||
|
||||
//筛选图层
|
||||
|
||||
Loading…
Reference in New Issue
Block a user