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

ctrl+c ctrl+v等键盘操作

Browse Source
This commit is contained in:
yyy 2025-02-22 17:41:46 +08:00
parent 59a7eea5fe
commit 1c8ea3b7e4
3 changed files with 393 additions and 317 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/mapPage/realTimeMap/components-tool/editMapRouteDialog.vue
View File

@ -127,18 +127,16 @@
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="正向限速" prop="forwardSpeedLimit" required> <el-form-item label="正向限速" prop="forwardSpeedLimit" required>
<el-input <el-slider v-model="form.forwardSpeedLimit" :min="0" :max="10" :step="0.1" />
v-model="form.forwardSpeedLimit" </el-form-item>
type="number" </el-col>
placeholder="请输入正向限速"
/> </el-form-item
></el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="反向限速" prop="reverseSpeedLimit" required> <el-form-item label="反向限速" prop="reverseSpeedLimit" required>
<el-input <el-slider
v-model="form.reverseSpeedLimit" v-model="form.reverseSpeedLimit"
type="number" :min="0"
placeholder="请输入反向限速" :max="10"
:step="0.1"
/> </el-form-item /> </el-form-item
></el-col> ></el-col>
</el-row> </el-row>

2
src/views/mapPage/realTimeMap/components-tool/map-scale-tool.vue
View File

@ -334,7 +334,7 @@ const dragCalc = (list, page, spacing, ruler, type) => {
} }
} }
//水平标尺按下鼠标 //水平标尺按下鼠标
const horizontalDragRuler = () => { const horizontalDragRuler = (e) => {
newLine('x') newLine('x')
} }
//垂直标尺按下鼠标 //垂直标尺按下鼠标

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

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