ctrl+c ctrl+v等键盘操作
This commit is contained in:
yyy
parent
59a7eea5fe
commit
1c8ea3b7e4
@ -127,18 +127,16 @@
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="正向限速" prop="forwardSpeedLimit" required>
|
||||
<el-input
|
||||
v-model="form.forwardSpeedLimit"
|
||||
type="number"
|
||||
placeholder="请输入正向限速"
|
||||
/> </el-form-item
|
||||
></el-col>
|
||||
<el-slider v-model="form.forwardSpeedLimit" :min="0" :max="10" :step="0.1" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="反向限速" prop="reverseSpeedLimit" required>
|
||||
<el-input
|
||||
<el-slider
|
||||
v-model="form.reverseSpeedLimit"
|
||||
type="number"
|
||||
placeholder="请输入反向限速"
|
||||
:min="0"
|
||||
:max="10"
|
||||
:step="0.1"
|
||||
/> </el-form-item
|
||||
></el-col>
|
||||
</el-row>
|
||||
|
||||
@ -334,7 +334,7 @@ const dragCalc = (list, page, spacing, ruler, type) => {
|
||||
}
|
||||
}
|
||||
//水平标尺按下鼠标
|
||||
const horizontalDragRuler = () => {
|
||||
const horizontalDragRuler = (e) => {
|
||||
newLine('x')
|
||||
}
|
||||
//垂直标尺按下鼠标
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
:width="170"
|
||||
trigger="click"
|
||||
v-if="item.switchType === 'move' || item.switchType === 'revolve'"
|
||||
:disabled="currentItemIndex === -1"
|
||||
:disabled="state.currentItemIndex === -1"
|
||||
>
|
||||
<template #reference>
|
||||
<div
|
||||
@ -32,7 +32,7 @@
|
||||
<el-input v-model="state.moveForm.locationX" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Y">
|
||||
<el-input v-model="state.moveForm.y" placeholder="请输入" />
|
||||
<el-input v-model="state.moveForm.locationY" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<div style="text-align: right">
|
||||
<el-button
|
||||
@ -203,14 +203,6 @@
|
||||
</div>
|
||||
|
||||
<div class="map-container" ref="mapContainer" :style="{ cursor: state.cursorStyle }">
|
||||
<map-scale-tool
|
||||
v-if="imgBgObj.height && imgBgObj.width"
|
||||
@input="input"
|
||||
:value="presetLine"
|
||||
:step-length="50"
|
||||
:height="imgBgObj.height"
|
||||
:width="imgBgObj.width"
|
||||
>
|
||||
<div
|
||||
class="map-bg"
|
||||
:style="{
|
||||
@ -236,7 +228,7 @@
|
||||
v-if="interfaceRefreshed"
|
||||
>
|
||||
<VueDragResizeRotate
|
||||
v-for="(item, index) in allHistoryList[currentIndex]"
|
||||
v-for="(item, index) in state.allMapPointInfo"
|
||||
:key="item.locationX"
|
||||
:parent="true"
|
||||
:x="Number(item.locationX) - Number(item.locationWide) / 2"
|
||||
@ -263,7 +255,7 @@
|
||||
:style="{
|
||||
width: item.locationWide + 'px',
|
||||
height: item.locationDeep + 'px',
|
||||
backgroundColor: currentItemIndex === index ? '#f48924' : '#000',
|
||||
backgroundColor: state.currentItemIndex === index ? '#f48924' : '#000',
|
||||
borderRadius: '50%',
|
||||
zIndex: 999
|
||||
}"
|
||||
@ -277,7 +269,7 @@
|
||||
:style="{
|
||||
width: item.locationWide + 'px',
|
||||
height: item.locationDeep + 'px',
|
||||
border: currentItemIndex === index ? '1px dashed #000' : 'none'
|
||||
border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
|
||||
}"
|
||||
/>
|
||||
<!-- 3 设备点 -->
|
||||
@ -291,7 +283,7 @@
|
||||
:style="{
|
||||
width: item.locationWide + 'px',
|
||||
height: item.locationDeep + 'px',
|
||||
border: currentItemIndex === index ? '1px dashed #000' : 'none'
|
||||
border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
|
||||
}"
|
||||
/>
|
||||
<!-- 4 停车点 -->
|
||||
@ -302,7 +294,7 @@
|
||||
:style="{
|
||||
width: item.locationWide + 'px',
|
||||
height: item.locationDeep + 'px',
|
||||
border: currentItemIndex === index ? '1px dashed #000' : 'none'
|
||||
border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
|
||||
}"
|
||||
/>
|
||||
<!-- 5 区域变更点 -->
|
||||
@ -313,7 +305,7 @@
|
||||
:style="{
|
||||
width: item.locationWidee + 'px',
|
||||
height: item.locationDeep + 'px',
|
||||
border: currentItemIndex === index ? '1px dashed #000' : 'none'
|
||||
border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
|
||||
}"
|
||||
/>
|
||||
<!-- 6 等待点 -->
|
||||
@ -324,7 +316,7 @@
|
||||
:style="{
|
||||
width: item.locationWide + 'px',
|
||||
height: item.locationDeep + 'px',
|
||||
border: currentItemIndex === index ? '1px dashed #000' : 'none'
|
||||
border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
@ -333,7 +325,7 @@
|
||||
color: item.fontColor,
|
||||
fontSize: item.fontSize + 'px',
|
||||
fontFamily: item.fontFamily,
|
||||
border: currentItemIndex === index ? '1px dashed #000' : 'none'
|
||||
border: state.currentItemIndex === index ? '1px dashed #000' : 'none'
|
||||
}"
|
||||
>
|
||||
{{ item.text }}
|
||||
@ -348,7 +340,6 @@
|
||||
style="position: absolute; top: 0; left: 0; z-index: 9"
|
||||
id="svgId"
|
||||
>
|
||||
<template v-for="(curve, index) in state.mapRouteList" :key="index">
|
||||
<!-- 实时绘制当前直线 -->
|
||||
<line
|
||||
v-if="state.isDrawing && toolbarSwitchType === 'clickDrawRoute'"
|
||||
@ -359,7 +350,8 @@
|
||||
stroke="#00329F"
|
||||
stroke-width="5"
|
||||
/>
|
||||
|
||||
<template v-if="state.mapRouteList.length > 0">
|
||||
<template v-for="(curve, index) in state.mapRouteList" :key="index">
|
||||
<!-- 直线 -->
|
||||
<line
|
||||
v-if="curve.method === 0"
|
||||
@ -384,6 +376,7 @@
|
||||
/>
|
||||
<!-- 第一条控制线 -->
|
||||
<line
|
||||
v-if="state.currentDragTarget.index == index"
|
||||
:x1="Number(curve.startPointX)"
|
||||
:y1="Number(curve.startPointY)"
|
||||
:x2="curve.beginControlX"
|
||||
@ -394,6 +387,7 @@
|
||||
/>
|
||||
<!-- 第二条控制线 -->
|
||||
<line
|
||||
v-if="state.currentDragTarget.index == index"
|
||||
:x1="Number(curve.endPointX)"
|
||||
:y1="Number(curve.endPointY)"
|
||||
:x2="curve.endControlX"
|
||||
@ -403,6 +397,7 @@
|
||||
stroke-width="2"
|
||||
/>
|
||||
<circle
|
||||
v-if="state.currentDragTarget.index == index"
|
||||
id="startCircle"
|
||||
:cx="curve.beginControlX"
|
||||
:cy="curve.beginControlY"
|
||||
@ -411,6 +406,7 @@
|
||||
@mousedown="startDrag(curve, index, 'start')"
|
||||
/>
|
||||
<circle
|
||||
v-if="state.currentDragTarget.index == index"
|
||||
id="endCircle"
|
||||
:cx="curve.endControlX"
|
||||
:cy="curve.endControlY"
|
||||
@ -420,6 +416,7 @@
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
@ -505,7 +502,6 @@
|
||||
class="input-box-class"
|
||||
/>
|
||||
</div>
|
||||
</map-scale-tool>
|
||||
</div>
|
||||
|
||||
<!-- 节点编辑 -->
|
||||
@ -587,16 +583,6 @@ const inputBoxRef = ref() //文字输入框
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const allHistoryList = ref([]) //全部的历史记录
|
||||
const currentIndex = ref(0) //用于记录是哪条历史记录的
|
||||
const currentItemIndex = ref(-1) //用于记录是在编辑那个具体的节点、图标等
|
||||
const allMapPointInfo = ref([]) //所有的图标的列表
|
||||
|
||||
const presetLine = ref([])
|
||||
const input = (list) => {
|
||||
presetLine.value = list
|
||||
}
|
||||
|
||||
// 缩放停止
|
||||
const interfaceRefreshed = ref(true)
|
||||
const resizeEnd = (locationX, locationY, w, h, item, index) => {
|
||||
@ -605,10 +591,10 @@ const resizeEnd = (locationX, locationY, w, h, item, index) => {
|
||||
let x = Number(locationX) + Number(item.locationWide) / 2
|
||||
let y = Number(locationY) + Number(item.locationDeep) / 2
|
||||
|
||||
allMapPointInfo.value[index].locationX = x
|
||||
allMapPointInfo.value[index].locationY = y
|
||||
allMapPointInfo.value[index].locationWide = w
|
||||
allMapPointInfo.value[index].locationDeep = h
|
||||
state.allMapPointInfo[index].locationX = x
|
||||
state.allMapPointInfo[index].locationY = y
|
||||
state.allMapPointInfo[index].locationWide = w
|
||||
state.allMapPointInfo[index].locationDeep = h
|
||||
addEditHistory()
|
||||
|
||||
state.mapRouteList.forEach((route) => {
|
||||
@ -631,6 +617,7 @@ const resizeEnd = (locationX, locationY, w, h, item, index) => {
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 拖拽停止
|
||||
const dragEnd = (locationX, locationY, item, index) => {
|
||||
let x = Number(locationX) + Number(item.locationWide) / 2
|
||||
@ -638,10 +625,10 @@ const dragEnd = (locationX, locationY, item, index) => {
|
||||
|
||||
if (x === item.locationX && y === item.locationY) return
|
||||
let actualPoint = disposeEventPoint(x, y)
|
||||
allMapPointInfo.value[index].locationX = x
|
||||
allMapPointInfo.value[index].locationY = y
|
||||
allMapPointInfo.value[index].actualStartPointX = actualPoint.actualLocationX
|
||||
allMapPointInfo.value[index].actualStartPointY = actualPoint.actualLocationY
|
||||
state.allMapPointInfo[index].locationX = x
|
||||
state.allMapPointInfo[index].locationY = y
|
||||
state.allMapPointInfo[index].actualStartPointX = actualPoint.actualLocationX
|
||||
state.allMapPointInfo[index].actualStartPointY = actualPoint.actualLocationY
|
||||
addEditHistory()
|
||||
//更改路线里的
|
||||
state.mapRouteList.forEach((route) => {
|
||||
@ -665,26 +652,26 @@ const dragEnd = (locationX, locationY, item, index) => {
|
||||
}
|
||||
// 旋转
|
||||
const rotateEnd = (angle, item, index) => {
|
||||
allMapPointInfo.value[index].angle = angle
|
||||
state.allMapPointInfo[index].angle = angle
|
||||
addEditHistory()
|
||||
}
|
||||
|
||||
//节点选中
|
||||
const editNodePropertiesRef = ref()
|
||||
const activatedHandle = (item, index) => {
|
||||
currentItemIndex.value = index
|
||||
state.currentItemIndex = index
|
||||
|
||||
//让路线不选中
|
||||
state.selectedCurve = ''
|
||||
|
||||
if (state.currentDragTarget.index !== null) {
|
||||
if (state.mapRouteList.length > 0 && state.currentDragTarget.index !== null) {
|
||||
state.mapRouteList[state.currentDragTarget.index].isSelected = false
|
||||
state.currentDragTarget = { index: null, type: null }
|
||||
}
|
||||
|
||||
//节点编辑
|
||||
if (toolbarSwitchType.value === 'editNode') {
|
||||
let list = allHistoryList.value[currentIndex.value].filter((item) => item.type === 3)
|
||||
let list = state.allMapPointInfo.filter((item) => item.type === 3)
|
||||
editNodePropertiesRef.value.open(JSON.parse(JSON.stringify(item)), list)
|
||||
}
|
||||
}
|
||||
@ -694,31 +681,42 @@ const deactivatedHandle = () => {}
|
||||
//添加历史记录
|
||||
const addEditHistory = () => {
|
||||
//要判断是不是在最新的记录上修改 如果不是 要把currentIndex之后的记录都删掉 保持当前修改是最新的
|
||||
if (currentIndex.value !== allHistoryList.value.length - 1) {
|
||||
allHistoryList.value = allHistoryList.value.splice(0, currentIndex.value)
|
||||
currentIndex.value = allHistoryList.value.length
|
||||
allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
|
||||
if (state.currentIndex !== state.allHistoryList.length - 1) {
|
||||
state.allHistoryList = state.allHistoryList.splice(0, state.currentIndex)
|
||||
state.currentIndex = state.allHistoryList.length
|
||||
state.allHistoryList.push({
|
||||
allMapPointInfo: JSON.parse(JSON.stringify(state.allMapPointInfo)),
|
||||
mapRouteList: JSON.parse(JSON.stringify(state.mapRouteList))
|
||||
})
|
||||
} else {
|
||||
allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
|
||||
currentIndex.value++
|
||||
state.allHistoryList.push({
|
||||
allMapPointInfo: JSON.parse(JSON.stringify(state.allMapPointInfo)),
|
||||
mapRouteList: JSON.parse(JSON.stringify(state.mapRouteList))
|
||||
})
|
||||
state.currentIndex++
|
||||
}
|
||||
interfaceRefreshed.value = true
|
||||
}
|
||||
|
||||
//上一步
|
||||
const backPreviousStep = () => {
|
||||
if (currentIndex.value > 0) {
|
||||
currentIndex.value--
|
||||
allMapPointInfo.value = allHistoryList.value[currentIndex.value]
|
||||
console.log(state.currentIndex)
|
||||
console.log(state.allMapPointInfo)
|
||||
console.log(state.allHistoryList)
|
||||
if (state.currentIndex > 0) {
|
||||
state.currentIndex--
|
||||
state.allMapPointInfo = state.allHistoryList[state.currentIndex]?.allMapPointInfo || []
|
||||
state.mapRouteList = state.allHistoryList[state.currentIndex]?.mapRouteList || []
|
||||
} else {
|
||||
message.warning('没了老铁')
|
||||
}
|
||||
}
|
||||
//下一步
|
||||
const backNextStep = () => {
|
||||
if (currentIndex.value < allHistoryList.value.length - 1) {
|
||||
currentIndex.value++
|
||||
allMapPointInfo.value = allHistoryList.value[currentIndex.value]
|
||||
if (state.currentIndex < state.allHistoryList.length - 1) {
|
||||
state.currentIndex++
|
||||
state.allMapPointInfo = state.allHistoryList[state.currentIndex]?.allMapPointInfo || []
|
||||
state.mapRouteList = state.allHistoryList[state.currentIndex]?.mapRouteList || []
|
||||
} else {
|
||||
message.warning('没了老铁')
|
||||
}
|
||||
@ -733,7 +731,7 @@ const mapClick = (e) => {
|
||||
|
||||
//绘制节点
|
||||
if (toolbarSwitchType.value === 'drawNodes') {
|
||||
allMapPointInfo.value.push({
|
||||
state.allMapPointInfo.push({
|
||||
positionMapId: imgBgObj.positionMapId, //地图的id
|
||||
layerSelectionShow: true,
|
||||
locationX: x,
|
||||
@ -782,7 +780,7 @@ const textFormSuccess = (form) => {
|
||||
const handleInputEnd = () => {
|
||||
if (state.inputBoxValue) {
|
||||
state.showInputBox = false
|
||||
allMapPointInfo.value.push({
|
||||
state.allMapPointInfo.push({
|
||||
type: 7, //类型 7文字
|
||||
positionMapId: imgBgObj.positionMapId, //地图的id
|
||||
locationX: state.inputBoxStyle.locationX, //x
|
||||
@ -810,9 +808,7 @@ const handleInputEnd = () => {
|
||||
}
|
||||
//编辑节点成功
|
||||
const submitNodeSuccess = (form) => {
|
||||
allMapPointInfo.value[currentItemIndex.value] = form
|
||||
allHistoryList.value[currentIndex.value][currentItemIndex.value] = form
|
||||
|
||||
state.allMapPointInfo[state.currentItemIndex] = form
|
||||
//节点位置改变 通知路径里面的节点也改变
|
||||
state.mapRouteList.forEach((item) => {
|
||||
if (form.id === item.startingPointId) {
|
||||
@ -832,6 +828,7 @@ const submitNodeSuccess = (form) => {
|
||||
item.actualEndPointY = disposeEventPoint(form.locationX, form.locationY).actualLocationY
|
||||
}
|
||||
})
|
||||
addEditHistory()
|
||||
}
|
||||
|
||||
//工具栏点击
|
||||
@ -1036,21 +1033,26 @@ const state = reactive({
|
||||
measureDistancesNum: 0, // 存储两点之间的距离
|
||||
imageChangeMultiple: 1, //图片放大缩小的倍数
|
||||
prohibitedOperation: false, //禁止操作 在框选测距等操作时，禁止所有拖动等操作
|
||||
mapRouteList: [], //仓库点位地图连线
|
||||
currentDragTarget: {
|
||||
index: null,
|
||||
type: null
|
||||
}, //当前拖拽的目标（起点、终点、控制点）
|
||||
selectedCurve: '', // 当前选中的曲线
|
||||
startDrawPointIndex: -1, // 起始点的索引
|
||||
startDrawPoint: null,
|
||||
isDrawing: false,
|
||||
currentDrawX: 0,
|
||||
currentDrawY: 0
|
||||
startDrawPoint: null, //绘制路线开始的点
|
||||
isDrawing: false, //正在绘制
|
||||
currentDrawX: 0, //正在绘制的x轴坐标
|
||||
currentDrawY: 0, //正在绘制的y轴坐标
|
||||
allHistoryList: [], //所有的历史记录 [{allMapPointInfo:[],mapRouteList:[]}]
|
||||
allMapPointInfo: [], //当前页面上的所有节点的列表
|
||||
mapRouteList: [], //当前页面上所有路线的列表
|
||||
currentIndex: 0, //当前处在哪条历史记录
|
||||
currentItemIndex: -1 //当前处在哪个工具
|
||||
})
|
||||
|
||||
const toolbarClick = (item) => {
|
||||
let type = item.switchType
|
||||
if (currentItemIndex.value === -1 && (type === 'move' || type === 'revolve' || type === 'copy')) {
|
||||
if (state.currentItemIndex === -1 && (type === 'move' || type === 'revolve' || type === 'copy')) {
|
||||
message.warning('请先选择要操作的对象')
|
||||
return
|
||||
}
|
||||
@ -1058,7 +1060,7 @@ const toolbarClick = (item) => {
|
||||
if (
|
||||
type === 'delete' &&
|
||||
state.currentDragTarget.index === null &&
|
||||
currentItemIndex.value === -1
|
||||
state.currentItemIndex === -1
|
||||
) {
|
||||
message.warning('请先选择要操作的对象')
|
||||
return
|
||||
@ -1125,7 +1127,7 @@ const toolbarClick = (item) => {
|
||||
break
|
||||
case 'saveAs':
|
||||
//另存为 存为json文件 无法直接访问用户的文件系统 不能选择存在那个文件夹里面
|
||||
const jsonString = JSON.stringify(allHistoryList.value[currentIndex.value], null, 2)
|
||||
const jsonString = JSON.stringify(state.allHistoryList[state.currentIndex], null, 2)
|
||||
const blob = new Blob([jsonString], { type: 'application/json' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
|
||||
@ -1149,7 +1151,7 @@ const toolbarClick = (item) => {
|
||||
break
|
||||
case 'copy':
|
||||
//复制
|
||||
let copyMapItem = allHistoryList.value[currentIndex.value][currentItemIndex.value]
|
||||
let copyMapItem = state.allMapPointInfo[state.currentItemIndex]
|
||||
state.copyMapItem = {
|
||||
positionMapId: copyMapItem.positionMapId,
|
||||
locationX: copyMapItem.locationX,
|
||||
@ -1172,18 +1174,20 @@ const toolbarClick = (item) => {
|
||||
let copyObj = JSON.parse(JSON.stringify(state.copyMapItem))
|
||||
copyObj.locationX = Number(copyObj.locationX) + 50
|
||||
copyObj.locationY = Number(copyObj.locationY) + 50
|
||||
allMapPointInfo.value.push(copyObj)
|
||||
state.allMapPointInfo.push(copyObj)
|
||||
addEditHistory()
|
||||
break
|
||||
case 'delete':
|
||||
//删除
|
||||
if (currentItemIndex.value !== -1) {
|
||||
allMapPointInfo.value.splice(currentItemIndex.value, 1)
|
||||
addEditHistory()
|
||||
if (state.currentItemIndex !== -1) {
|
||||
state.allMapPointInfo.splice(state.currentItemIndex, 1)
|
||||
state.currentItemIndex = -1
|
||||
}
|
||||
if (state.currentDragTarget.index !== null) {
|
||||
state.mapRouteList.splice(state.currentDragTarget.index, 1)
|
||||
state.currentDragTarget.index = null
|
||||
}
|
||||
addEditHistory()
|
||||
break
|
||||
case 'tools':
|
||||
//工具
|
||||
@ -1256,7 +1260,7 @@ const toolbarClick = (item) => {
|
||||
case 'larger':
|
||||
//放大
|
||||
if (state.imageChangeMultiple < 3) {
|
||||
state.imageChangeMultiple *= 1.2
|
||||
state.imageChangeMultiple += 0.1
|
||||
} else {
|
||||
message.warning('不能在放大了')
|
||||
}
|
||||
@ -1264,7 +1268,7 @@ const toolbarClick = (item) => {
|
||||
case 'smaller':
|
||||
//缩小
|
||||
if (state.imageChangeMultiple > 0.3) {
|
||||
state.imageChangeMultiple *= 0.8
|
||||
state.imageChangeMultiple -= 0.1
|
||||
} else {
|
||||
message.warning('不能在缩小了')
|
||||
}
|
||||
@ -1291,7 +1295,7 @@ const toolbarClick = (item) => {
|
||||
break
|
||||
case 'equipment':
|
||||
// 设备
|
||||
let equipmentList = allHistoryList.value[currentIndex.value].filter((item) => {
|
||||
let equipmentList = state.allMapPointInfo.filter((item) => {
|
||||
return item.type === 3
|
||||
})
|
||||
equipmentToolDialogRef.value.open(equipmentList)
|
||||
@ -1301,25 +1305,35 @@ const toolbarClick = (item) => {
|
||||
|
||||
//移动工具表单提交
|
||||
const moveFormSubmit = () => {
|
||||
allHistoryList.value[currentIndex.value][currentItemIndex.value].locationX =
|
||||
state.moveForm.locationX
|
||||
allHistoryList.value[currentIndex.value][currentItemIndex.value].locationY =
|
||||
state.moveForm.locationY
|
||||
state.allMapPointInfo[state.currentItemIndex].locationX = Number(state.moveForm.locationX)
|
||||
state.allMapPointInfo[state.currentItemIndex].locationY = Number(state.moveForm.locationY)
|
||||
addEditHistory()
|
||||
}
|
||||
//旋转工具表单提交
|
||||
const rotationFormSubmit = () => {
|
||||
allHistoryList.value[currentIndex.value][currentItemIndex.value].angle = state.rotationForm.angle
|
||||
state.allMapPointInfo[state.currentItemIndex].angle = state.rotationForm.angle
|
||||
addEditHistory()
|
||||
}
|
||||
|
||||
//鼠标拖动绘制节点
|
||||
// 从点开始绘制
|
||||
const startFromPoint = (index, event) => {
|
||||
let list = allHistoryList.value[currentIndex.value]
|
||||
let list = state.allMapPointInfo
|
||||
const point = list[index]
|
||||
if (point.id) {
|
||||
state.startDrawPoint = point //开始点
|
||||
state.startDrawPointIndex = index
|
||||
state.isDrawing = true
|
||||
event.preventDefault() // 防止默认行为
|
||||
} else {
|
||||
message.warning('选择的节点未保存')
|
||||
// 重置状态
|
||||
state.startDrawPointIndex = -1 // 起始点的索引
|
||||
state.startDrawPoint = null
|
||||
state.isDrawing = false
|
||||
state.currentDrawX = 0
|
||||
state.currentDrawY = 0
|
||||
}
|
||||
}
|
||||
//开始框选绘制
|
||||
const startDrawSelection = (event) => {
|
||||
@ -1396,8 +1410,19 @@ const endDrawSelection = (event) => {
|
||||
// 找到最近的终点
|
||||
const endPointIndex = findClosestPoint(state.currentDrawX, state.currentDrawY)
|
||||
|
||||
if (!endPointIndex.id) {
|
||||
message.warning('选择的节点未保存')
|
||||
// 重置状态
|
||||
state.startDrawPointIndex = -1 // 起始点的索引
|
||||
state.startDrawPoint = null
|
||||
state.isDrawing = false
|
||||
state.currentDrawX = 0
|
||||
state.currentDrawY = 0
|
||||
return
|
||||
}
|
||||
|
||||
if (endPointIndex !== null && endPointIndex !== state.startDrawPointIndex) {
|
||||
let list = allHistoryList.value[currentIndex.value]
|
||||
let list = state.allMapPointInfo
|
||||
const endPoint = list[endPointIndex]
|
||||
const newLine = {
|
||||
startPointX: state.startDrawPoint.locationX,
|
||||
@ -1455,6 +1480,7 @@ const endDrawSelection = (event) => {
|
||||
endWidth: endPoint.locationWide, // 终点宽
|
||||
endHigh: endPoint.locationDeep // 终点高
|
||||
})
|
||||
addEditHistory()
|
||||
}
|
||||
}
|
||||
// 重置状态
|
||||
@ -1473,7 +1499,7 @@ const endDrawSelection = (event) => {
|
||||
const findClosestPoint = (x, y) => {
|
||||
let minDistance = Infinity
|
||||
let closestIndex = null
|
||||
let list = allHistoryList.value[currentIndex.value]
|
||||
let list = state.allMapPointInfo
|
||||
list.forEach((point, index) => {
|
||||
const distance = Math.sqrt((point.locationX - x) ** 2 + (point.locationY - y) ** 2)
|
||||
if (distance < minDistance && distance < point.locationWide) {
|
||||
@ -1484,10 +1510,9 @@ const findClosestPoint = (x, y) => {
|
||||
})
|
||||
return closestIndex
|
||||
}
|
||||
|
||||
//点击区域
|
||||
const clickDrawSelectionArea = () => {
|
||||
let points = allHistoryList.value[currentIndex.value]
|
||||
let points = state.allMapPointInfo
|
||||
|
||||
state.drawSelectionPointList = []
|
||||
state.allDrawSelectionAreaBox.forEach((box) => {
|
||||
@ -1511,8 +1536,6 @@ const clickDrawSelectionArea = () => {
|
||||
// let routeList = state.drawSelectionPointList.filter((item) => item.type === 1)
|
||||
let routeList = state.drawSelectionPointList
|
||||
|
||||
console.log(routeList)
|
||||
|
||||
let isHaveId = binLocation.every((item) => {
|
||||
item.id
|
||||
})
|
||||
@ -1600,6 +1623,7 @@ const clickDrawSelectionArea = () => {
|
||||
}
|
||||
state.selectedCurve = curve
|
||||
state.mapRouteList.push(curve)
|
||||
addEditHistory()
|
||||
}
|
||||
}
|
||||
//计算是不是在同一条直线的
|
||||
@ -1680,6 +1704,8 @@ const endDrag = (event) => {
|
||||
curve.actualEndControlX = actualEndControl.actualLocationX
|
||||
curve.actualEndControlY = actualEndControl.actualLocationY
|
||||
|
||||
addEditHistory()
|
||||
|
||||
state.currentDragTarget = { index: null, type: null }
|
||||
window.removeEventListener('mousemove', handleDrag)
|
||||
window.removeEventListener('mouseup', endDrag)
|
||||
@ -1710,7 +1736,7 @@ const handleChooseRoute = (item, index) => {
|
||||
state.selectedCurve = item
|
||||
state.currentDragTarget.index = index
|
||||
//让节点不选中
|
||||
currentItemIndex.value = -1
|
||||
state.currentItemIndex = -1
|
||||
}
|
||||
//编辑路线成功
|
||||
const editMapRouteDialogSubmit = (form) => {
|
||||
@ -1735,7 +1761,7 @@ const editMapRouteDialogSubmit = (form) => {
|
||||
item.actualEndPointY = disposeEventPoint(form.endPointX, form.endPointY).actualLocationY
|
||||
}
|
||||
})
|
||||
allMapPointInfo.value.forEach((item) => {
|
||||
state.allMapPointInfo.forEach((item) => {
|
||||
if (item.id === form.startingPointId) {
|
||||
item.locationX = form.startPointX
|
||||
item.locationY = form.startPointY
|
||||
@ -1749,7 +1775,8 @@ const editMapRouteDialogSubmit = (form) => {
|
||||
item.actualLocationY = disposeEventPoint(form.endPointX, form.endPointY).actualLocationX
|
||||
}
|
||||
})
|
||||
allHistoryList.value[currentIndex.value] = JSON.parse(JSON.stringify(allMapPointInfo.value))
|
||||
//增加一条历史记录
|
||||
addEditHistory()
|
||||
}
|
||||
|
||||
//测距相关
|
||||
@ -1855,9 +1882,9 @@ const getAllNodeList = async () => {
|
||||
let list = await MapApi.getPositionMapItemList({
|
||||
positionMapId: imgBgObj.positionMapId
|
||||
})
|
||||
allMapPointInfo.value = []
|
||||
allHistoryList.value = []
|
||||
currentIndex.value = 0
|
||||
state.allMapPointInfo = []
|
||||
state.allHistoryList = []
|
||||
state.currentIndex = 0
|
||||
list.forEach((item) => {
|
||||
item.layerSelectionShow = true //用于图层
|
||||
item.locationX = Number(item.locationX)
|
||||
@ -1922,13 +1949,16 @@ const getAllNodeList = async () => {
|
||||
item.rotatable = true
|
||||
item.lockAspectRatio = true
|
||||
}
|
||||
allMapPointInfo.value.push(item)
|
||||
state.allMapPointInfo.push(item)
|
||||
})
|
||||
allHistoryList.value[0] = JSON.parse(JSON.stringify(allMapPointInfo.value))
|
||||
}
|
||||
//获取所有的路线
|
||||
const getAllMapRoute = async () => {
|
||||
state.mapRouteList = await MapApi.getPositionMapLineByPositionMapId(imgBgObj.positionMapId)
|
||||
state.allHistoryList[0] = {
|
||||
allMapPointInfo: JSON.parse(JSON.stringify(state.allMapPointInfo)),
|
||||
mapRouteList: JSON.parse(JSON.stringify(state.mapRouteList))
|
||||
}
|
||||
}
|
||||
//保存地图按钮
|
||||
const saveMap = async () => {
|
||||
@ -1954,7 +1984,7 @@ const saveMap = async () => {
|
||||
}
|
||||
//节点的保存
|
||||
const saveNodeList = async () => {
|
||||
let list = allHistoryList.value[currentIndex.value]
|
||||
let list = state.allMapPointInfo
|
||||
list.forEach((item) => {
|
||||
if (item.type === 7) {
|
||||
item.dataObj.positionMapId = imgBgObj.positionMapId
|
||||
@ -1976,7 +2006,7 @@ const saveMapRoute = async () => {
|
||||
}
|
||||
//筛选图层
|
||||
const layerSelectionSuccess = (typeList) => {
|
||||
allHistoryList.value[currentIndex.value].forEach((item) => {
|
||||
state.allMapPointInfo.forEach((item) => {
|
||||
// 如果 type 存在于第一个数组中，则将 layerSelectionShow 设置为 false
|
||||
if (typeList.includes(item.type)) {
|
||||
item.layerSelectionShow = false
|
||||
@ -2013,7 +2043,6 @@ const disposeEventPoint = (x, y) => {
|
||||
const actualLocationX = Number(imgBgObj.origin[0]) + Number(x) * Number(imgBgObj.resolution)
|
||||
const actualLocationY =
|
||||
Number(imgBgObj.origin[1]) + (Number(imgBgObj.height) - Number(y)) * Number(imgBgObj.resolution)
|
||||
|
||||
return {
|
||||
actualLocationX,
|
||||
actualLocationY
|
||||
@ -2027,7 +2056,7 @@ document.onmousedown = function (e) {
|
||||
state.mapRouteList[state.currentDragTarget.index].isSelected = false
|
||||
state.currentDragTarget = { index: null, type: null }
|
||||
}
|
||||
currentItemIndex.value = -1
|
||||
state.currentItemIndex = -1
|
||||
}
|
||||
}
|
||||
// 阻止默认菜单弹出
|
||||
@ -2035,8 +2064,57 @@ window.document.oncontextmenu = function () {
|
||||
return false
|
||||
}
|
||||
|
||||
//监听键盘事件
|
||||
const handleKeyDown = (event) => {
|
||||
if (event.ctrlKey) {
|
||||
if (event.key === 'c') {
|
||||
if (state.currentItemIndex === -1) {
|
||||
message.warning('请先选择要操作的对象')
|
||||
return
|
||||
}
|
||||
let copyMapItem = state.allMapPointInfo[state.currentItemIndex]
|
||||
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('复制成功')
|
||||
} else if (event.key === 'v') {
|
||||
//粘贴
|
||||
if (!state.copyMapItem) {
|
||||
message.warning('请先复制对象')
|
||||
return
|
||||
}
|
||||
//粘贴
|
||||
let copyObj = JSON.parse(JSON.stringify(state.copyMapItem))
|
||||
copyObj.locationX = Number(copyObj.locationX) + 50
|
||||
copyObj.locationY = Number(copyObj.locationY) + 50
|
||||
state.allMapPointInfo.push(copyObj)
|
||||
addEditHistory()
|
||||
} else if (event.key === 'z') {
|
||||
//撤回
|
||||
backPreviousStep()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getMapList()
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('keydown', handleKeyDown)
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user