地图编辑
This commit is contained in:
yyy
parent
3680fcabb0
commit
2bbd29674e
@ -25,7 +25,12 @@
|
||||
required
|
||||
v-if="form.type === 2"
|
||||
>
|
||||
<el-input-number v-model="form.layersNumber" :min="1" :max="3" />
|
||||
<el-input-number
|
||||
v-model="form.layersNumber"
|
||||
:min="1"
|
||||
:max="3"
|
||||
@change="layersNumberChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="编号"
|
||||
@ -77,31 +82,33 @@
|
||||
<span class="ml-2">cm</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="库位方向" prop="direction">
|
||||
<el-select
|
||||
v-model="form.direction"
|
||||
placeholder="请选择库位方向"
|
||||
@change="directionChange"
|
||||
>
|
||||
<el-option label="单向" :value="1" />
|
||||
<el-option label="双向" :value="2" />
|
||||
<el-option label="三向" :value="3" />
|
||||
<el-option label="四向" :value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div v-if="form.direction !== 1">
|
||||
<el-form-item label="进入方向" prop="inDirection">
|
||||
<el-select v-model="form.inDirection" placeholder="请选择进入方向">
|
||||
<el-option label="尾入" :value="0" />
|
||||
<el-option label="头入" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="离开方向" prop="outDirection">
|
||||
<el-select v-model="form.outDirection" placeholder="请选择离开方向">
|
||||
<el-option label="尾出" :value="0" />
|
||||
<el-option label="头出" :value="1" />
|
||||
<div v-if="form.type === 2 || form.type === 4">
|
||||
<el-form-item label="库位方向" prop="direction">
|
||||
<el-select
|
||||
v-model="form.direction"
|
||||
placeholder="请选择库位方向"
|
||||
@change="directionChange"
|
||||
>
|
||||
<el-option label="单向" :value="1" />
|
||||
<el-option label="双向" :value="2" />
|
||||
<el-option label="三向" :value="3" />
|
||||
<el-option label="四向" :value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div v-if="form.direction !== 1">
|
||||
<el-form-item label="进入方向" prop="inDirection">
|
||||
<el-select v-model="form.inDirection" placeholder="请选择进入方向">
|
||||
<el-option label="尾入" :value="0" />
|
||||
<el-option label="头入" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="离开方向" prop="outDirection">
|
||||
<el-select v-model="form.outDirection" placeholder="请选择离开方向">
|
||||
<el-option label="尾出" :value="0" />
|
||||
<el-option label="头出" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
@ -164,20 +171,17 @@ const submit = async (formEl) => {
|
||||
form.value.dataJson = ''
|
||||
} else if (form.value.type === 2) {
|
||||
//库位点 类型为数组
|
||||
|
||||
let list = []
|
||||
for (let index = 0; index < form.value.layersNumber; index++) {
|
||||
if (
|
||||
form.value.dataList.length > 0 &&
|
||||
form.value.dataList[index] &&
|
||||
form.value.dataList[index].laneId
|
||||
form.value.dataList[index].id
|
||||
) {
|
||||
form.value.dataList[index].locationWide = form.value.locationWide
|
||||
form.value.dataList[index].locationDeep = form.value.locationDeep
|
||||
form.value.dataList[index].direction = form.value.direction //方向
|
||||
form.value.dataList[index].inDirection = form.value.inDirection //进入方向
|
||||
form.value.dataList[index].outDirection = form.value.outDirection //离开方向
|
||||
form.value.dataList[index].locationStorey = index + 1 //层数
|
||||
list.push(form.value.dataList[index])
|
||||
} else {
|
||||
form.value.dataList.push({
|
||||
list.push({
|
||||
positionMapId: props.positionMapId,
|
||||
locationWide: form.value.locationWide || undefined,
|
||||
locationDeep: form.value.locationDeep || undefined,
|
||||
@ -188,8 +192,18 @@ const submit = async (formEl) => {
|
||||
})
|
||||
}
|
||||
}
|
||||
form.value.dataList = list
|
||||
//dataJson数据
|
||||
form.value.dataJson = JSON.stringify(form.value.dataList)
|
||||
} else if (form.value.type === 3) {
|
||||
//设备
|
||||
form.value.dataObj.positionMapId = props.positionMapId
|
||||
form.value.dataObj.locationWide = form.value.locationWide
|
||||
form.value.dataObj.locationDeep = form.value.locationDeep
|
||||
form.value.dataObj.direction = form.value.direction
|
||||
form.value.dataObj.inDirection = form.value.inDirection
|
||||
form.value.dataObj.outDirection = form.value.outDirection
|
||||
form.value.dataObj.deviceType = deviceInfo.value.deviceType //设备类型
|
||||
} else {
|
||||
//类型为路径点位 区域变更点 等待点 值为对象
|
||||
form.value.dataObj.positionMapId = props.positionMapId
|
||||
@ -206,9 +220,13 @@ const submit = async (formEl) => {
|
||||
})
|
||||
}
|
||||
|
||||
//层数改变
|
||||
const layersNumberChange = (e) => {}
|
||||
|
||||
const open = (item) => {
|
||||
console.log(item)
|
||||
form.value = item
|
||||
form.value.layersNumber = item.layersNumber || 1 //初始化的时候给个1层
|
||||
form.value.layersNumber = item.dataList.length || ''
|
||||
form.value.positionMapId = props.positionMapId
|
||||
dialogFormVisible.value = true
|
||||
}
|
||||
@ -219,6 +237,12 @@ const typeChange = () => {
|
||||
form.value.layersNumber = undefined
|
||||
form.value.dataJson = ''
|
||||
}
|
||||
|
||||
if (form.value.type !== 2 && form.value.type !== 4) {
|
||||
form.value.direction = undefined
|
||||
form.value.inDirection = undefined
|
||||
form.value.outDirection = undefined
|
||||
}
|
||||
}
|
||||
//方向改变
|
||||
const directionChange = (e) => {
|
||||
|
||||
@ -18,23 +18,26 @@
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
|
||||
const emit = defineEmits(['layerSelectionSuccess'])
|
||||
|
||||
const list = ref([
|
||||
{
|
||||
labelType: 'locationPoint',
|
||||
type: 2,
|
||||
name: '库位点',
|
||||
isShow: true
|
||||
},
|
||||
{
|
||||
labelType: 'wayPoint',
|
||||
type: 5,
|
||||
name: '路径点',
|
||||
isShow: true
|
||||
},
|
||||
{
|
||||
labelType: 'devicePoint',
|
||||
type: 3,
|
||||
name: '设备点',
|
||||
isShow: true
|
||||
}
|
||||
])
|
||||
|
||||
const isUnfold = ref(true)
|
||||
|
||||
const changeUnfold = () => {
|
||||
@ -42,6 +45,8 @@ const changeUnfold = () => {
|
||||
}
|
||||
const changeSelectList = (item) => {
|
||||
item.isShow = !item.isShow
|
||||
const types = list.value.filter((item) => !item.isShow).map((item) => item.type)
|
||||
emit('layerSelectionSuccess', types)
|
||||
}
|
||||
|
||||
const open = (item) => {}
|
||||
|
||||
@ -130,7 +130,7 @@
|
||||
>
|
||||
<VueDragResizeRotate
|
||||
v-for="(item, index) in allHistoryList[currentIndex]"
|
||||
:key="index"
|
||||
:key="item.locationX"
|
||||
:parent="true"
|
||||
:x="item.locationX"
|
||||
:y="item.locationY"
|
||||
@ -150,7 +150,7 @@
|
||||
>
|
||||
<!-- 1 路径点 -->
|
||||
<div
|
||||
v-if="item.type === 1"
|
||||
v-if="item.type === 1 && item.layerSelectionShow"
|
||||
:style="{
|
||||
width: item.locationWide + 'px',
|
||||
height: item.locationDeep + 'px',
|
||||
@ -162,7 +162,7 @@
|
||||
</div>
|
||||
<!-- 2 库位点 -->
|
||||
<img
|
||||
v-if="item.type === 2"
|
||||
v-if="item.type === 2 && item.layerSelectionShow"
|
||||
src="https://api.znkjfw.com/admin-api/infra/file/4/get/库位库存_png_179_1739326653035.png"
|
||||
alt=""
|
||||
:style="{
|
||||
@ -173,7 +173,7 @@
|
||||
/>
|
||||
<!-- 3 设备点 -->
|
||||
<img
|
||||
v-if="item.type === 3"
|
||||
v-if="item.type === 3 && item.layerSelectionShow"
|
||||
src="https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png"
|
||||
alt=""
|
||||
:style="{
|
||||
@ -184,7 +184,7 @@
|
||||
/>
|
||||
<!-- 4 停车点 -->
|
||||
<img
|
||||
v-if="item.type === 4"
|
||||
v-if="item.type === 4 && item.layerSelectionShow"
|
||||
src="https://api.znkjfw.com/admin-api/infra/file/4/get/停车场-01_png_179_1739326933020.png"
|
||||
alt=""
|
||||
:style="{
|
||||
@ -195,7 +195,7 @@
|
||||
/>
|
||||
<!-- 5 区域变更点 -->
|
||||
<img
|
||||
v-if="item.type === 5"
|
||||
v-if="item.type === 5 && item.layerSelectionShow"
|
||||
src="https://api.znkjfw.com/admin-api/infra/file/4/get/区域_png_179_1739327151876.png"
|
||||
alt=""
|
||||
:style="{
|
||||
@ -206,7 +206,7 @@
|
||||
/>
|
||||
<!-- 6 等待点 -->
|
||||
<img
|
||||
v-if="item.type === 6"
|
||||
v-if="item.type === 6 && item.layerSelectionShow"
|
||||
src="https://api.znkjfw.com/admin-api/infra/file/4/get/等待点_png_179_1739326991439.png"
|
||||
alt=""
|
||||
:style="{
|
||||
@ -216,7 +216,7 @@
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
v-if="item.type === 7"
|
||||
v-if="item.type === 7 && item.layerSelectionShow"
|
||||
:style="{
|
||||
color: item.fontColor,
|
||||
fontSize: item.fontSize + 'px',
|
||||
@ -232,17 +232,18 @@
|
||||
|
||||
<!-- 绘制框选区域 -->
|
||||
<div
|
||||
v-if="state.drawSelectionArea"
|
||||
v-if="state.drawSelectionAreaSelectedPoints"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
left: `${state.drawSelectionAreaBox.x}px`,
|
||||
top: `${state.drawSelectionAreaBox.y}px`,
|
||||
width: `${state.drawSelectionAreaBox.width}px`,
|
||||
height: `${state.drawSelectionAreaBox.height}px`,
|
||||
border: '1px solid blue',
|
||||
backgroundColor: 'rgba(0, 0, 255, 0.1)',
|
||||
border: '2px dashed #007bff',
|
||||
backgroundColor: 'rgba(0, 123, 255, 0.1)',
|
||||
zIndex: 99999
|
||||
}"
|
||||
@click="clickDrawSelectionArea"
|
||||
></div>
|
||||
<!-- 文字输入区域 -->
|
||||
<input
|
||||
@ -276,7 +277,11 @@
|
||||
@textFormSuccess="textFormSuccess"
|
||||
/>
|
||||
<!-- 图层选择 -->
|
||||
<layerSelectionToolDialog v-if="state.isShowLayer" ref="layerSelectionToolDialogRef" />
|
||||
<layerSelectionToolDialog
|
||||
v-if="state.isShowLayer"
|
||||
ref="layerSelectionToolDialogRef"
|
||||
@layerSelectionSuccess="layerSelectionSuccess"
|
||||
/>
|
||||
<!-- 设备弹窗选择 -->
|
||||
<equipmentToolDialog ref="equipmentToolDialogRef" :positionMapId="imgBgObj.positionMapId" />
|
||||
</template>
|
||||
@ -391,6 +396,7 @@ const mapClick = (e) => {
|
||||
//绘制节点
|
||||
allMapPointInfo.value.push({
|
||||
positionMapId: imgBgObj.positionMapId, //地图的id
|
||||
layerSelectionShow: true,
|
||||
locationX: e.offsetX,
|
||||
locationY: e.offsetY,
|
||||
locationDeep: 16,
|
||||
@ -449,7 +455,8 @@ const handleInputEnd = () => {
|
||||
fontColor: state.inputBoxStyle.fontColor, //文字颜色
|
||||
fontFamily: state.inputBoxStyle.fontFamily, //字体类型
|
||||
fontSize: state.inputBoxStyle.fontSize,
|
||||
dataObj: {} //存 设备点 停车点 文字
|
||||
dataObj: {}, //存 设备点 停车点 文字
|
||||
layerSelectionShow: true
|
||||
})
|
||||
addEditHistory()
|
||||
state.inputBoxValue = ''
|
||||
@ -523,7 +530,7 @@ const state = reactive({
|
||||
switchType: 'tools',
|
||||
name: '工具',
|
||||
icon: 'ep:briefcase',
|
||||
isActive: false
|
||||
isActive: true
|
||||
},
|
||||
{
|
||||
switchType: 'lineLibrary',
|
||||
@ -571,7 +578,7 @@ const state = reactive({
|
||||
switchType: 'grid',
|
||||
name: '网格',
|
||||
icon: 'ep:grid',
|
||||
isActive: false
|
||||
isActive: true
|
||||
},
|
||||
{
|
||||
switchType: 'larger',
|
||||
@ -624,8 +631,8 @@ const state = reactive({
|
||||
isActive: false
|
||||
}
|
||||
],
|
||||
isShowToolbar: false, //工具栏展示隐藏
|
||||
isShowGrid: false, //网格展示隐藏
|
||||
isShowToolbar: true, //工具栏展示隐藏
|
||||
isShowGrid: true, //网格展示隐藏
|
||||
moveForm: {
|
||||
locationX: '',
|
||||
locationY: ''
|
||||
@ -635,7 +642,7 @@ const state = reactive({
|
||||
}, //旋转的表单
|
||||
copyMapItem: '', //复制的值
|
||||
cursorStyle: 'auto',
|
||||
drawSelectionArea: false, //绘制框选区域
|
||||
drawSelectionAreaShow: false, //绘制框选区域
|
||||
drawSelectionAreaBox: { x: 0, y: 0, width: 0, height: 0 }, //绘制区域的位置，长宽
|
||||
drawSelectionAreaStartPos: { x: 0, y: 0 }, //开始绘制的点位
|
||||
drawSelectionAreaSelectedPoints: [], //绘制选中的list
|
||||
@ -654,7 +661,7 @@ const state = reactive({
|
||||
const toolbarClick = (item) => {
|
||||
let type = item.switchType
|
||||
if (
|
||||
currentItemIndex.value &&
|
||||
currentItemIndex.value === -1 &&
|
||||
(type === 'move' || type === 'revolve' || type === 'copy' || type === 'delete')
|
||||
) {
|
||||
message.warning('请先选择要操作的对象')
|
||||
@ -716,13 +723,29 @@ const toolbarClick = (item) => {
|
||||
break
|
||||
case 'copy':
|
||||
//复制
|
||||
state.copyMapItem = allHistoryList.value[currentIndex.value][currentItemIndex.value]
|
||||
let copyMapItem = allHistoryList.value[currentIndex.value][currentItemIndex.value]
|
||||
state.copyMapItem = {
|
||||
positionMapId: copyMapItem.positionMapId,
|
||||
locationX: copyMapItem.locationX,
|
||||
locationY: copyMapItem.locationY,
|
||||
type: copyMapItem.type,
|
||||
dataJson: copyMapItem.dataJson || '',
|
||||
dataObj: copyMapItem.dataObj || {},
|
||||
dataList: copyMapItem.dataList || [],
|
||||
locationDeep: copyMapItem.locationDeep,
|
||||
locationWide: copyMapItem.locationWide,
|
||||
draggable: copyMapItem.draggable,
|
||||
resizable: copyMapItem.resizable,
|
||||
rotatable: copyMapItem.rotatable,
|
||||
lockAspectRatio: copyMapItem.lockAspectRatio
|
||||
}
|
||||
message.success('复制成功')
|
||||
break
|
||||
case 'paste':
|
||||
//粘贴
|
||||
let copyObj = JSON.parse(JSON.stringify(state.copyMapItem))
|
||||
copyObj.locationX = copyObj.locationX + 50
|
||||
copyObj.locationY = copyObj.locationY + 50
|
||||
copyObj.locationX = Number(copyObj.locationX) + 50
|
||||
copyObj.locationY = Number(copyObj.locationY) + 50
|
||||
allMapPointInfo.value.push(copyObj)
|
||||
addEditHistory()
|
||||
break
|
||||
@ -845,14 +868,14 @@ const rotationFormSubmit = () => {
|
||||
//开始框选绘制
|
||||
const startDrawSelection = (event) => {
|
||||
if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return
|
||||
state.drawSelectionArea = true
|
||||
state.drawSelectionAreaShow = true
|
||||
state.drawSelectionAreaStartPos = { x: event.offsetX, y: event.offsetY }
|
||||
state.drawSelectionAreaBox = { x: event.offsetX, y: event.offsetY, width: 0, height: 0 }
|
||||
}
|
||||
|
||||
const updateDrawSelection = (event) => {
|
||||
if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return
|
||||
if (state.drawSelectionArea) {
|
||||
if (state.drawSelectionAreaShow) {
|
||||
state.drawSelectionAreaBox.width = event.offsetX - state.drawSelectionAreaStartPos.x
|
||||
state.drawSelectionAreaBox.height = event.offsetY - state.drawSelectionAreaStartPos.y
|
||||
}
|
||||
@ -860,8 +883,8 @@ const updateDrawSelection = (event) => {
|
||||
//结束框选绘制
|
||||
const endDrawSelection = () => {
|
||||
if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return
|
||||
state.drawSelectionAreaShow = false
|
||||
let points = allHistoryList.value[currentIndex.value]
|
||||
state.drawSelectionArea = false
|
||||
state.drawSelectionAreaSelectedPoints = points.filter((point) => {
|
||||
return (
|
||||
point.locationX >=
|
||||
@ -886,7 +909,17 @@ const endDrawSelection = () => {
|
||||
)
|
||||
)
|
||||
})
|
||||
console.log(state.drawSelectionAreaSelectedPoints, '选中的')
|
||||
}
|
||||
//点击区域
|
||||
const clickDrawSelectionArea = () => {
|
||||
if (toolbarSwitchType.value === 'lineLibrary') {
|
||||
//线库
|
||||
}
|
||||
if (toolbarSwitchType.value === 'region') {
|
||||
//区域
|
||||
}
|
||||
|
||||
// console.log(state.drawSelectionAreaSelectedPoints, '选中的')
|
||||
}
|
||||
|
||||
//获取扫描图 地图背景相关的信息
|
||||
@ -938,33 +971,37 @@ const getAllNodeList = async () => {
|
||||
positionMapId: imgBgObj.positionMapId
|
||||
})
|
||||
list.forEach((item) => {
|
||||
item.layerSelectionShow = true //用于图层
|
||||
item.locationX = Number(item.locationX)
|
||||
item.locationY = Number(item.locationY)
|
||||
|
||||
if (item.type === 1 || item.type === 5 || item.type === 6) {
|
||||
item.dataObj = {}
|
||||
item.dataList = []
|
||||
item.locationDeep = 16
|
||||
item.locationWide = 16
|
||||
item.draggable = true
|
||||
item.draggable = false
|
||||
item.resizable = false
|
||||
item.rotatable = false
|
||||
item.lockAspectRatio = false
|
||||
item.lockAspectRatio = true
|
||||
} else if (item.type === 2) {
|
||||
//库位点
|
||||
item.dataList = JSON.parse(item.dataJson)
|
||||
item.locationDeep = item.dataList[0].locationDeep
|
||||
item.locationWide = item.dataList[0].locationWide
|
||||
item.draggable = true
|
||||
item.draggable = false
|
||||
item.resizable = false
|
||||
item.rotatable = false
|
||||
item.lockAspectRatio = false
|
||||
item.lockAspectRatio = true
|
||||
} else if (item.type === 3 || item.type === 4) {
|
||||
item.dataObj = JSON.parse(item.dataJson)
|
||||
item.dataList = []
|
||||
item.locationDeep = item.dataObj.locationDeep
|
||||
item.locationWide = item.dataObj.locationWide
|
||||
item.draggable = true
|
||||
item.draggable = false
|
||||
item.resizable = false
|
||||
item.rotatable = false
|
||||
item.lockAspectRatio = false
|
||||
item.lockAspectRatio = true
|
||||
} else if (item.type === 7) {
|
||||
item.dataObj = JSON.parse(item.dataJson)
|
||||
item.text = item.dataObj.text
|
||||
@ -974,8 +1011,8 @@ const getAllNodeList = async () => {
|
||||
item.angle = item.dataObj.angle
|
||||
item.draggable = true
|
||||
item.resizable = false
|
||||
item.rotatable = false
|
||||
item.lockAspectRatio = false
|
||||
item.rotatable = true
|
||||
item.lockAspectRatio = true
|
||||
}
|
||||
allMapPointInfo.value.push(item)
|
||||
})
|
||||
@ -1015,6 +1052,18 @@ const saveNodeList = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
//筛选图层
|
||||
const layerSelectionSuccess = (typeList) => {
|
||||
allHistoryList.value[currentIndex.value].forEach((item) => {
|
||||
// 如果 type 存在于第一个数组中，则将 layerSelectionShow 设置为 false
|
||||
if (typeList.includes(item.type)) {
|
||||
item.layerSelectionShow = false
|
||||
} else {
|
||||
item.layerSelectionShow = true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getMapList()
|
||||
})
|
||||
|
||||
@ -1,180 +1,132 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- SVG 画布 -->
|
||||
<svg
|
||||
ref="svg"
|
||||
width="500"
|
||||
height="300"
|
||||
@mousedown="handleMouseDown"
|
||||
@mousemove="handleMouseMove"
|
||||
@mouseup="handleMouseUp"
|
||||
>
|
||||
<!-- 绘制所有曲线 -->
|
||||
<path
|
||||
v-for="(curve, index) in curves"
|
||||
:key="index"
|
||||
:d="getCurvePath(curve)"
|
||||
stroke="#000"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
:class="{ selected: selectedCurve === curve }"
|
||||
@click="svgClick(curve)"
|
||||
/>
|
||||
<!-- 绘制控制点和连线 -->
|
||||
<line
|
||||
v-if="selectedCurve"
|
||||
:x1="selectedCurve.start.x"
|
||||
:y1="selectedCurve.start.y"
|
||||
:x2="selectedCurve.control1.x"
|
||||
:y2="selectedCurve.control1.y"
|
||||
stroke="gray"
|
||||
stroke-dasharray="2"
|
||||
/>
|
||||
<line
|
||||
v-if="selectedCurve"
|
||||
:x1="selectedCurve.end.x"
|
||||
:y1="selectedCurve.end.y"
|
||||
:x2="selectedCurve.control2.x"
|
||||
:y2="selectedCurve.control2.y"
|
||||
stroke="gray"
|
||||
stroke-dasharray="2"
|
||||
/>
|
||||
<!-- 绘制起点、终点和控制点 -->
|
||||
<circle
|
||||
v-for="(curve, index) in curves"
|
||||
:key="'start' + index"
|
||||
:cx="curve.start.x"
|
||||
:cy="curve.start.y"
|
||||
r="5"
|
||||
fill="red"
|
||||
@mousedown="startDrag($event, curve, 'start')"
|
||||
/>
|
||||
<circle
|
||||
v-for="(curve, index) in curves"
|
||||
:key="'end' + index"
|
||||
:cx="curve.end.x"
|
||||
:cy="curve.end.y"
|
||||
r="5"
|
||||
fill="red"
|
||||
@mousedown="startDrag($event, curve, 'end')"
|
||||
/>
|
||||
<circle
|
||||
v-if="selectedCurve"
|
||||
:cx="selectedCurve.control1.x"
|
||||
:cy="selectedCurve.control1.y"
|
||||
r="5"
|
||||
fill="green"
|
||||
@mousedown="startDrag($event, selectedCurve, 'control1')"
|
||||
/>
|
||||
<circle
|
||||
v-if="selectedCurve"
|
||||
:cx="selectedCurve.control2.x"
|
||||
:cy="selectedCurve.control2.y"
|
||||
r="5"
|
||||
fill="green"
|
||||
@mousedown="startDrag($event, selectedCurve, 'control2')"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
@mousedown="startSelection"
|
||||
@mousemove="updateSelection"
|
||||
@mouseup="endSelection"
|
||||
style="position: relative; height: 100vh; border: 1px solid #ccc"
|
||||
>
|
||||
<!-- 框选区域 -->
|
||||
<div
|
||||
v-if="isSelecting || selectionBox.width > 0"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
left: `${selectionBox.x}px`,
|
||||
top: `${selectionBox.y}px`,
|
||||
width: `${selectionBox.width}px`,
|
||||
height: `${selectionBox.height}px`,
|
||||
border: '2px dashed #007bff',
|
||||
backgroundColor: 'rgba(0, 123, 255, 0.1)'
|
||||
}"
|
||||
></div>
|
||||
|
||||
<!-- 显示控制点坐标 -->
|
||||
<div class="points" v-if="selectedCurve">
|
||||
<p>起点: ({{ selectedCurve.start.x }}, {{ selectedCurve.start.y }})</p>
|
||||
<p>控制点 1: ({{ selectedCurve.control1.x }}, {{ selectedCurve.control1.y }})</p>
|
||||
<p>控制点 2: ({{ selectedCurve.control2.x }}, {{ selectedCurve.control2.y }})</p>
|
||||
<p>终点: ({{ selectedCurve.end.x }}, {{ selectedCurve.end.y }})</p>
|
||||
</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' : 'blue',
|
||||
borderRadius: '50%'
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
const svg = ref(null) // SVG 元素的引用
|
||||
const curves = ref([]) // 存储所有曲线
|
||||
const selectedCurve = ref(null) // 当前选中的曲线
|
||||
const isDragging = ref(false) // 是否正在拖拽
|
||||
const dragTarget = ref(null) // 当前拖拽的目标（起点、终点、控制点）
|
||||
|
||||
// 获取鼠标位置
|
||||
const getMousePos = (event) => {
|
||||
const rect = svg.value.getBoundingClientRect()
|
||||
return {
|
||||
x: event.clientX - rect.left,
|
||||
y: event.clientY - rect.top
|
||||
}
|
||||
}
|
||||
export default {
|
||||
setup() {
|
||||
// 坐标数组
|
||||
const points = ref([
|
||||
{ x: 300, y: 400 },
|
||||
{ x: 400, y: 400 },
|
||||
{ x: 200, y: 360 },
|
||||
{ x: 570, y: 260 },
|
||||
{ x: 600, y: 477 }
|
||||
])
|
||||
|
||||
// 开始拖拽
|
||||
const startDrag = (event, curve, target) => {
|
||||
event.preventDefault()
|
||||
isDragging.value = true
|
||||
selectedCurve.value = curve
|
||||
dragTarget.value = target
|
||||
}
|
||||
// 框选区域
|
||||
const selectionBox = ref({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 0,
|
||||
height: 0
|
||||
})
|
||||
|
||||
// 鼠标按下事件
|
||||
const handleMouseDown = (event) => {
|
||||
const mousePos = getMousePos(event)
|
||||
// 是否正在框选
|
||||
const isSelecting = ref(false)
|
||||
|
||||
// 如果没有选中任何点，则创建一条新的直线
|
||||
if (!isDragging.value && curves.value.length === 0) {
|
||||
const newCurve = {
|
||||
start: mousePos,
|
||||
end: mousePos,
|
||||
control1: { x: mousePos.x + 50, y: mousePos.y - 50 },
|
||||
control2: { x: mousePos.x + 100, y: mousePos.y - 50 }
|
||||
// 选中的点
|
||||
const selectedPoints = ref([])
|
||||
|
||||
// 框选起始位置
|
||||
const startPos = ref({ x: 0, y: 0 })
|
||||
|
||||
// 开始框选
|
||||
const startSelection = (event) => {
|
||||
isSelecting.value = true
|
||||
startPos.value = { x: event.offsetX, y: event.offsetY }
|
||||
selectionBox.value = {
|
||||
x: event.offsetX,
|
||||
y: event.offsetY,
|
||||
width: 0,
|
||||
height: 0
|
||||
}
|
||||
}
|
||||
|
||||
// 更新框选区域
|
||||
const updateSelection = (event) => {
|
||||
if (!isSelecting.value) return
|
||||
|
||||
const offsetX = event.offsetX
|
||||
const offsetY = event.offsetY
|
||||
|
||||
selectionBox.value = {
|
||||
x: Math.min(startPos.value.x, offsetX),
|
||||
y: Math.min(startPos.value.y, offsetY),
|
||||
width: Math.abs(offsetX - startPos.value.x),
|
||||
height: Math.abs(offsetY - startPos.value.y)
|
||||
}
|
||||
}
|
||||
|
||||
// 结束框选
|
||||
const endSelection = () => {
|
||||
isSelecting.value = false
|
||||
checkSelectedPoints()
|
||||
}
|
||||
|
||||
// 判断哪些点在框选区域内
|
||||
const checkSelectedPoints = () => {
|
||||
selectedPoints.value = points.value.filter((point) => {
|
||||
return (
|
||||
point.x >= selectionBox.value.x &&
|
||||
point.x <= selectionBox.value.x + selectionBox.value.width &&
|
||||
point.y >= selectionBox.value.y &&
|
||||
point.y <= selectionBox.value.y + selectionBox.value.height
|
||||
)
|
||||
})
|
||||
|
||||
console.log('选中的点:', selectedPoints.value)
|
||||
}
|
||||
|
||||
return {
|
||||
points,
|
||||
selectionBox,
|
||||
isSelecting,
|
||||
selectedPoints,
|
||||
startSelection,
|
||||
updateSelection,
|
||||
endSelection
|
||||
}
|
||||
curves.value.push(newCurve)
|
||||
selectedCurve.value = newCurve
|
||||
dragTarget.value = 'end'
|
||||
isDragging.value = true
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标移动事件
|
||||
const handleMouseMove = (event) => {
|
||||
if (!isDragging.value || !selectedCurve.value) return
|
||||
|
||||
const mousePos = getMousePos(event)
|
||||
|
||||
// 更新拖拽的目标点
|
||||
if (dragTarget.value === 'start') {
|
||||
selectedCurve.value.start = mousePos
|
||||
} else if (dragTarget.value === 'end') {
|
||||
selectedCurve.value.end = mousePos
|
||||
} else if (dragTarget.value === 'control1') {
|
||||
selectedCurve.value.control1 = mousePos
|
||||
} else if (dragTarget.value === 'control2') {
|
||||
selectedCurve.value.control2 = mousePos
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标松开事件
|
||||
const handleMouseUp = () => {
|
||||
isDragging.value = false
|
||||
dragTarget.value = null
|
||||
}
|
||||
|
||||
// 获取曲线的路径
|
||||
const getCurvePath = (curve) => {
|
||||
return `M ${curve.start.x} ${curve.start.y} C ${curve.control1.x} ${curve.control1.y}, ${curve.control2.x} ${curve.control2.y}, ${curve.end.x} ${curve.end.y}`
|
||||
}
|
||||
const svgClick = (item) => {
|
||||
console.log(item)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
svg {
|
||||
border: 1px solid #000;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
path.selected {
|
||||
stroke: blue;
|
||||
}
|
||||
|
||||
.points {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
/* 可选：添加一些样式 */
|
||||
</style>
|
||||
|
||||
@ -18,3 +18,74 @@
|
||||
fontFamily: '' //字体类型
|
||||
}
|
||||
```
|
||||
|
||||
```
|
||||
|
||||
1.普通节点 dataJson 不传数据
|
||||
|
||||
|
||||
2.库位点 dataJson 数据格式:
|
||||
[
|
||||
{
|
||||
"id": 1881176241622024200, //库位id - 编辑的时候会有需要传过来 新增的时候没有则不传
|
||||
"laneId": 1881177420829642800, //线库id - 编辑的时候有就传过来 新增的时候没有就不传
|
||||
"laneName": "测试33", //线库名称 - 编辑的时候有就传过来 新增的时候没有就不传
|
||||
"locationX": "2", //库位坐标x轴 - 编辑的时候有就传过来 新增的时候不用传
|
||||
"locationY": "7", //库位坐标y轴 - 编辑的时候有就传过来 新增的时候不用传
|
||||
"locationWide": 10, //宽度 - 编辑的时候有就传过来 新增的时候需要传
|
||||
"locationDeep": 10, //高度 - 编辑的时候有就传过来 新增的时候需要传
|
||||
"direction": 1, //库位方向（1：单向、2：双向、3：三向、4：四向） 编辑的时候有就传过来 新增的时候需要传
|
||||
"inDirection": 1, //进入方向（0：尾入、1：头入） 编辑的时候有就传过来 新增的时候需要传
|
||||
"outDirection": 1, //离开方向（0：尾出、1：头出） 编辑的时候有就传过来 新增的时候需要传
|
||||
"locationStorey": 3, //层数 编辑的时候有就传过来 新增的时候需要传
|
||||
"mapId": 1, //地图id 编辑的时候有就传过来 新增的时候不需要传
|
||||
"mapItemId": 1881176241622024200 //地图子表id 编辑的时候有就传过来 新增的时候不需要传
|
||||
},
|
||||
{
|
||||
"id": 1881176241622024200,
|
||||
"laneId": 1881177420829642800,
|
||||
"laneName": "测试33",
|
||||
"locationX": "2",
|
||||
"locationY": "7",
|
||||
"locationWide": 10,
|
||||
"locationDeep": 10,
|
||||
"direction": 1,
|
||||
"inDirection": 1,
|
||||
"outDirection": 1,
|
||||
"locationStorey": 3,
|
||||
"mapId": 1,
|
||||
"mapItemId": 1881176241622024200
|
||||
}
|
||||
]
|
||||
|
||||
3.设备点 dataJson 数据格式:
|
||||
{
|
||||
"id": 1881176241622024200, //设备id - 新增编辑都需要传 - 根据选择的设备获取到
|
||||
"locationX": "2", //库位坐标x轴 - 编辑的时候有就传过来 新增的时候不用传
|
||||
"locationY": "7", //库位坐标y轴 - 编辑的时候有就传过来 新增的时候不用传
|
||||
"locationWide": 10, //宽度 - 编辑的时候有就传过来 新增的时候需要传
|
||||
"locationDeep": 10, //高度 - 编辑的时候有就传过来 新增的时候需要传
|
||||
"mapId": 1, //地图id 编辑的时候有就传过来 新增的时候不需要传
|
||||
"mapItemId": 1881176241622024200 //地图子表id 编辑的时候有就传过来 新增的时候不需要传
|
||||
}
|
||||
4.停车点 dataJson 数据格式:
|
||||
|
||||
{
|
||||
"id": 1881176241622024200, //停车点id - 编辑的时候会有需要传过来 新增的时候没有则不传
|
||||
"locationX": "2", //库位坐标x轴 - 编辑的时候有就传过来 新增的时候不用传
|
||||
"locationY": "7", //库位坐标y轴 - 编辑的时候有就传过来 新增的时候不用传
|
||||
"locationWide": 10, //宽度 - 编辑的时候有就传过来 新增的时候需要传
|
||||
"locationDeep": 10, //高度 - 编辑的时候有就传过来 新增的时候需要传
|
||||
"direction": 1, //库位方向（1：单向、2：双向、3：三向、4：四向） 编辑的时候有就传过来 新增的时候需要传
|
||||
"inDirection": 1, //进入方向（0：尾入、1：头入） 编辑的时候有就传过来 新增的时候需要传
|
||||
"outDirection": 1, //离开方向（0：尾出、1：头出） 编辑的时候有就传过来 新增的时候需要传
|
||||
"mapId": 1, //地图id 编辑的时候有就传过来 新增的时候不需要传
|
||||
"mapItemId": 1881176241622024200 //地图子表id 编辑的时候有就传过来 新增的时候不需要传
|
||||
},
|
||||
|
||||
5.路径点 dataJson 不传数据
|
||||
|
||||
6.等待点 dataJson 不传数据
|
||||
|
||||
|
||||
```
|
||||
|
||||
180
src/views/mapPage/realTimeMap/贝塞尔曲线demo.vue
Normal file
180
src/views/mapPage/realTimeMap/贝塞尔曲线demo.vue
Normal file
@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- SVG 画布 -->
|
||||
<svg
|
||||
ref="svg"
|
||||
width="500"
|
||||
height="300"
|
||||
@mousedown="handleMouseDown"
|
||||
@mousemove="handleMouseMove"
|
||||
@mouseup="handleMouseUp"
|
||||
>
|
||||
<!-- 绘制所有曲线 -->
|
||||
<path
|
||||
v-for="(curve, index) in curves"
|
||||
:key="index"
|
||||
:d="getCurvePath(curve)"
|
||||
stroke="#000"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
:class="{ selected: selectedCurve === curve }"
|
||||
@click="svgClick(curve)"
|
||||
/>
|
||||
<!-- 绘制控制点和连线 -->
|
||||
<line
|
||||
v-if="selectedCurve"
|
||||
:x1="selectedCurve.start.x"
|
||||
:y1="selectedCurve.start.y"
|
||||
:x2="selectedCurve.control1.x"
|
||||
:y2="selectedCurve.control1.y"
|
||||
stroke="gray"
|
||||
stroke-dasharray="2"
|
||||
/>
|
||||
<line
|
||||
v-if="selectedCurve"
|
||||
:x1="selectedCurve.end.x"
|
||||
:y1="selectedCurve.end.y"
|
||||
:x2="selectedCurve.control2.x"
|
||||
:y2="selectedCurve.control2.y"
|
||||
stroke="gray"
|
||||
stroke-dasharray="2"
|
||||
/>
|
||||
<!-- 绘制起点、终点和控制点 -->
|
||||
<circle
|
||||
v-for="(curve, index) in curves"
|
||||
:key="'start' + index"
|
||||
:cx="curve.start.x"
|
||||
:cy="curve.start.y"
|
||||
r="5"
|
||||
fill="red"
|
||||
@mousedown="startDrag($event, curve, 'start')"
|
||||
/>
|
||||
<circle
|
||||
v-for="(curve, index) in curves"
|
||||
:key="'end' + index"
|
||||
:cx="curve.end.x"
|
||||
:cy="curve.end.y"
|
||||
r="5"
|
||||
fill="red"
|
||||
@mousedown="startDrag($event, curve, 'end')"
|
||||
/>
|
||||
<circle
|
||||
v-if="selectedCurve"
|
||||
:cx="selectedCurve.control1.x"
|
||||
:cy="selectedCurve.control1.y"
|
||||
r="5"
|
||||
fill="green"
|
||||
@mousedown="startDrag($event, selectedCurve, 'control1')"
|
||||
/>
|
||||
<circle
|
||||
v-if="selectedCurve"
|
||||
:cx="selectedCurve.control2.x"
|
||||
:cy="selectedCurve.control2.y"
|
||||
r="5"
|
||||
fill="green"
|
||||
@mousedown="startDrag($event, selectedCurve, 'control2')"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<!-- 显示控制点坐标 -->
|
||||
<div class="points" v-if="selectedCurve">
|
||||
<p>起点: ({{ selectedCurve.start.x }}, {{ selectedCurve.start.y }})</p>
|
||||
<p>控制点 1: ({{ selectedCurve.control1.x }}, {{ selectedCurve.control1.y }})</p>
|
||||
<p>控制点 2: ({{ selectedCurve.control2.x }}, {{ selectedCurve.control2.y }})</p>
|
||||
<p>终点: ({{ selectedCurve.end.x }}, {{ selectedCurve.end.y }})</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const svg = ref(null) // SVG 元素的引用
|
||||
const curves = ref([]) // 存储所有曲线
|
||||
const selectedCurve = ref(null) // 当前选中的曲线
|
||||
const isDragging = ref(false) // 是否正在拖拽
|
||||
const dragTarget = ref(null) // 当前拖拽的目标（起点、终点、控制点）
|
||||
|
||||
// 获取鼠标位置
|
||||
const getMousePos = (event) => {
|
||||
const rect = svg.value.getBoundingClientRect()
|
||||
return {
|
||||
x: event.clientX - rect.left,
|
||||
y: event.clientY - rect.top
|
||||
}
|
||||
}
|
||||
|
||||
// 开始拖拽
|
||||
const startDrag = (event, curve, target) => {
|
||||
event.preventDefault()
|
||||
isDragging.value = true
|
||||
selectedCurve.value = curve
|
||||
dragTarget.value = target
|
||||
}
|
||||
|
||||
// 鼠标按下事件
|
||||
const handleMouseDown = (event) => {
|
||||
const mousePos = getMousePos(event)
|
||||
|
||||
// 如果没有选中任何点，则创建一条新的直线
|
||||
if (!isDragging.value && curves.value.length === 0) {
|
||||
const newCurve = {
|
||||
start: mousePos,
|
||||
end: mousePos,
|
||||
control1: { x: mousePos.x + 50, y: mousePos.y - 50 },
|
||||
control2: { x: mousePos.x + 100, y: mousePos.y - 50 }
|
||||
}
|
||||
curves.value.push(newCurve)
|
||||
selectedCurve.value = newCurve
|
||||
dragTarget.value = 'end'
|
||||
isDragging.value = true
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标移动事件
|
||||
const handleMouseMove = (event) => {
|
||||
if (!isDragging.value || !selectedCurve.value) return
|
||||
|
||||
const mousePos = getMousePos(event)
|
||||
|
||||
// 更新拖拽的目标点
|
||||
if (dragTarget.value === 'start') {
|
||||
selectedCurve.value.start = mousePos
|
||||
} else if (dragTarget.value === 'end') {
|
||||
selectedCurve.value.end = mousePos
|
||||
} else if (dragTarget.value === 'control1') {
|
||||
selectedCurve.value.control1 = mousePos
|
||||
} else if (dragTarget.value === 'control2') {
|
||||
selectedCurve.value.control2 = mousePos
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标松开事件
|
||||
const handleMouseUp = () => {
|
||||
isDragging.value = false
|
||||
dragTarget.value = null
|
||||
}
|
||||
|
||||
// 获取曲线的路径
|
||||
const getCurvePath = (curve) => {
|
||||
return `M ${curve.start.x} ${curve.start.y} C ${curve.control1.x} ${curve.control1.y}, ${curve.control2.x} ${curve.control2.y}, ${curve.end.x} ${curve.end.y}`
|
||||
}
|
||||
const svgClick = (item) => {
|
||||
console.log(item)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
svg {
|
||||
border: 1px solid #000;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
path.selected {
|
||||
stroke: blue;
|
||||
}
|
||||
|
||||
.points {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user