粘贴不显示问题
This commit is contained in:
yyy
parent
982584acc7
commit
17dd7260fc
@ -229,7 +229,7 @@
|
||||
>
|
||||
<VueDragResizeRotate
|
||||
v-for="(item, index) in state.allMapPointInfo"
|
||||
:key="item.locationX"
|
||||
:key="index"
|
||||
:parent="true"
|
||||
:x="Number(item.locationX) - Number(item.locationWide) / 2"
|
||||
:y="Number(item.locationY) - Number(item.locationDeep) / 2"
|
||||
@ -1151,31 +1151,11 @@ const toolbarClick = (item) => {
|
||||
break
|
||||
case 'copy':
|
||||
//复制
|
||||
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('复制成功')
|
||||
replicationNode()
|
||||
break
|
||||
case 'paste':
|
||||
//粘贴
|
||||
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()
|
||||
pasteNode()
|
||||
break
|
||||
case 'delete':
|
||||
//删除
|
||||
@ -1303,6 +1283,43 @@ const toolbarClick = (item) => {
|
||||
}
|
||||
}
|
||||
|
||||
//复制
|
||||
const replicationNode = () => {
|
||||
let copyMapItem = state.allMapPointInfo[state.currentItemIndex]
|
||||
let locationX = Number(copyMapItem.locationX) + 20
|
||||
let locationY = Number(copyMapItem.locationY) + 20
|
||||
let actualPoint = disposeEventPoint(locationX, locationY)
|
||||
|
||||
state.copyMapItem = {
|
||||
positionMapId: copyMapItem.positionMapId,
|
||||
locationX: locationX,
|
||||
locationY: locationY,
|
||||
actualLocationX: actualPoint.actualLocationX,
|
||||
actualLocationY: actualPoint.actualLocationY,
|
||||
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,
|
||||
layerSelectionShow: copyMapItem.layerSelectionShow,
|
||||
mapImageUrl: copyMapItem.mapImageUrl,
|
||||
areaId: copyMapItem.areaId
|
||||
}
|
||||
message.success('复制成功')
|
||||
}
|
||||
//粘贴
|
||||
const pasteNode = () => {
|
||||
let copyObj = JSON.parse(JSON.stringify(state.copyMapItem))
|
||||
state.allMapPointInfo.push(copyObj)
|
||||
message.success('粘贴成功')
|
||||
addEditHistory()
|
||||
}
|
||||
|
||||
//移动工具表单提交
|
||||
const moveFormSubmit = () => {
|
||||
state.allMapPointInfo[state.currentItemIndex].locationX = Number(state.moveForm.locationX)
|
||||
@ -1318,21 +1335,23 @@ const rotationFormSubmit = () => {
|
||||
//鼠标拖动绘制节点
|
||||
// 从点开始绘制
|
||||
const startFromPoint = (index, event) => {
|
||||
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
|
||||
if (toolbarSwitchType.value === 'clickDrawRoute') {
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
//开始框选绘制
|
||||
@ -1410,20 +1429,21 @@ 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 = state.allMapPointInfo
|
||||
const endPoint = list[endPointIndex]
|
||||
|
||||
if (!endPoint.id) {
|
||||
message.warning('选择的节点未保存')
|
||||
// 重置状态
|
||||
state.startDrawPointIndex = -1 // 起始点的索引
|
||||
state.startDrawPoint = null
|
||||
state.isDrawing = false
|
||||
state.currentDrawX = 0
|
||||
state.currentDrawY = 0
|
||||
return
|
||||
}
|
||||
|
||||
const newLine = {
|
||||
startPointX: state.startDrawPoint.locationX,
|
||||
startPointY: state.startDrawPoint.locationY,
|
||||
@ -2068,42 +2088,25 @@ window.document.oncontextmenu = function () {
|
||||
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('复制成功')
|
||||
replicationNode()
|
||||
} 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()
|
||||
pasteNode()
|
||||
} else if (event.key === 'z') {
|
||||
//撤回
|
||||
backPreviousStep()
|
||||
} else if (event.key === 'y') {
|
||||
//重写
|
||||
backNextStep()
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2120,52 +2123,86 @@ onUnmounted(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.edit-map-page {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
.map-bg {
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
.map-container {
|
||||
position: relative;
|
||||
}
|
||||
.map-box-inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
// height: 85vh;
|
||||
height: calc(100vh - 140px);
|
||||
|
||||
.top-tool {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 3px;
|
||||
.top-tool-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
padding: 0 12px;
|
||||
height: 70px;
|
||||
box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 3px;
|
||||
.map-bg {
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
}
|
||||
.map-box-inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.top-tool-item {
|
||||
.top-tool {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 3px;
|
||||
.top-tool-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
padding: 0 12px;
|
||||
height: 70px;
|
||||
box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 3px;
|
||||
|
||||
.top-tool-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tool-item {
|
||||
cursor: pointer;
|
||||
width: 50px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.name {
|
||||
cursor: pointer;
|
||||
font-family:
|
||||
PingFangSC,
|
||||
PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #0d162a;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
margin: 0 12px;
|
||||
width: 1px;
|
||||
height: 47px;
|
||||
border: 1px solid #cccccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-tool-list {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 114px;
|
||||
background-color: #fff;
|
||||
z-index: 999;
|
||||
text-align: center;
|
||||
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
|
||||
|
||||
.tool-item {
|
||||
cursor: pointer;
|
||||
width: 50px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
padding: 10px;
|
||||
.name {
|
||||
cursor: pointer;
|
||||
font-family:
|
||||
PingFangSC,
|
||||
PingFang SC;
|
||||
@ -2175,121 +2212,88 @@ onUnmounted(() => {
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
margin: 0 12px;
|
||||
width: 1px;
|
||||
height: 47px;
|
||||
border: 1px solid #cccccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-tool-list {
|
||||
.input-box-class {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 114px;
|
||||
background-color: #fff;
|
||||
z-index: 999;
|
||||
text-align: center;
|
||||
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
|
||||
border: 1px solid #00329f;
|
||||
padding: 4px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.tool-item {
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
.name {
|
||||
font-family:
|
||||
PingFangSC,
|
||||
PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #0d162a;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
.selection-area-btn {
|
||||
width: 80px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.grid-show {
|
||||
// background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
|
||||
// linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
|
||||
// background-size:
|
||||
// 20px 20px,
|
||||
// 20px 20px;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: repeating-linear-gradient(
|
||||
to right,
|
||||
rgba(0, 0, 0, 0.1),
|
||||
rgba(0, 0, 0, 0.1) 1px,
|
||||
transparent 1px,
|
||||
transparent 50px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0.1),
|
||||
rgba(0, 0, 0, 0.1) 1px,
|
||||
transparent 1px,
|
||||
transparent 50px
|
||||
);
|
||||
}
|
||||
|
||||
.svg-div {
|
||||
z-index: 99999;
|
||||
|
||||
svg {
|
||||
cursor: crosshair;
|
||||
|
||||
path.selected {
|
||||
stroke: blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-box-class {
|
||||
position: absolute;
|
||||
border: 1px solid #00329f;
|
||||
padding: 4px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.selection-area-btn {
|
||||
width: 80px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.grid-show {
|
||||
// background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
|
||||
// linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
|
||||
// background-size:
|
||||
// 20px 20px,
|
||||
// 20px 20px;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: repeating-linear-gradient(
|
||||
to right,
|
||||
rgba(0, 0, 0, 0.1),
|
||||
rgba(0, 0, 0, 0.1) 1px,
|
||||
transparent 1px,
|
||||
transparent 50px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0.1),
|
||||
rgba(0, 0, 0, 0.1) 1px,
|
||||
transparent 1px,
|
||||
transparent 50px
|
||||
);
|
||||
}
|
||||
|
||||
.svg-div {
|
||||
z-index: 99999;
|
||||
|
||||
svg {
|
||||
cursor: crosshair;
|
||||
|
||||
path.selected {
|
||||
stroke: blue;
|
||||
.drop-down-menu {
|
||||
.drop-down-menu-item {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 11px 0;
|
||||
font-family:
|
||||
PingFangSC,
|
||||
PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #0d162a;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drop-down-menu {
|
||||
.drop-down-menu-item {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 11px 0;
|
||||
font-family:
|
||||
PingFangSC,
|
||||
PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #0d162a;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
.tool-active {
|
||||
background: #ebf1ff;
|
||||
border-bottom: 2px solid #1677ff;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-active {
|
||||
background: #ebf1ff;
|
||||
border-bottom: 2px solid #1677ff;
|
||||
}
|
||||
|
||||
.right-tool-active {
|
||||
background: #ebf1ff !important;
|
||||
.right-tool-active {
|
||||
background: #ebf1ff !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user