地图编辑
This commit is contained in:
yyy
parent
6da6a3fb3b
commit
e2e4c8c9b9
@ -1,33 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<ContentWrap>
|
||||
<div> </div>
|
||||
<div>
|
||||
<span @click="backPreviousStep">撤销</span>
|
||||
<span @click="backNextStep">重做</span>
|
||||
</div>
|
||||
</ContentWrap>
|
||||
<div class="map-box" ref="imgWrap" @mousewheel.prevent="rollImg" style="overflow: hidden">
|
||||
<div class="map-box-inner" ref="image" @mousedown.prevent="moveImg">
|
||||
<img src="@/assets/imgs/map.png" class="map-box-img" />
|
||||
<img :src="imgUrl" class="map-box-img" id="mapBg" />
|
||||
<div class="map-box-inner-dot">
|
||||
<VueDragResizeRotate
|
||||
v-for="(item, index) in imglist"
|
||||
:x="item.xind"
|
||||
:y="item.yind"
|
||||
v-for="(item, index) in allHistoryList[currentIndex]"
|
||||
:key="index"
|
||||
:parent="true"
|
||||
@rotating="(...args) => rotating(...args, item, index)"
|
||||
@dragging="(...args) => dragging(...args, item, index)"
|
||||
@resizing="(...args) => resizing(...args, item, index)"
|
||||
:handles="['tl', 'tr', 'bl', 'br', 'rot']"
|
||||
:rotatable="true"
|
||||
:resizable="true"
|
||||
:lockAspectRatio="true"
|
||||
:x="item.x"
|
||||
:y="item.y"
|
||||
:w="item.w"
|
||||
:h="item.h"
|
||||
:r="item.angle"
|
||||
@rotatestop="(degree) => rotateEnd(degree, item, index)"
|
||||
@dragstop="(x, y) => dragEnd(x, y, item, index)"
|
||||
@resizestop="(x, y, width, height) => resizeEnd(x, y, width, height, item, index)"
|
||||
@activated="() => activatedHandle(item, index)"
|
||||
@deactivated="deactivatedHandle"
|
||||
:draggable="item.draggable"
|
||||
:resizable="item.resizable"
|
||||
:rotatable="item.rotatable"
|
||||
:lockAspectRatio="item.lockAspectRatio"
|
||||
>
|
||||
<div class="sdiv">
|
||||
<img
|
||||
:src="'https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=%E5%A4%B4%E5%83%8F&step_word=&lid=7485741068352028048&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined©right=undefined&cs=2737564108,367317649&os=3340864790,1338694200&simid=4283020451,692828818&pn=61&rn=1&di=7445700328764211201&ln=1697&fr=&fmq=1736476621863_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=3c&objurl=https%3A%2F%2Fww4.sinaimg.cn%2Fmw690%2F007s8q6sgy1hs06lj4bqoj30rs0rsq7i.jpg&rpstart=0&rpnum=0&adpicid=0&nojc=undefined&dyTabStr=MCwxMiwzLDEsMiwxMyw3LDYsNSw5'"
|
||||
alt=""
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
<p style="position: absolute; top: 32%; left: 42%; color: white">{{ item.con }}</p>
|
||||
<img :src="item.img" alt="" style="width: 100%; height: 100%" />
|
||||
</div>
|
||||
</VueDragResizeRotate>
|
||||
<!-- 文档 https://github.com/a7650/vue3-draggable-resizable/blob/main/docs/document_zh.md#resizable -->
|
||||
@ -39,89 +42,131 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, defineComponent, reactive, nextTick, onMounted } from 'vue'
|
||||
import * as MapApi from '@/api/map/map'
|
||||
|
||||
defineOptions({ name: 'editMapPageRealTimeMap' })
|
||||
const message = useMessage() // 消息弹窗
|
||||
const allHistoryList = ref([]) //全部的历史记录
|
||||
const currentIndex = ref(0)
|
||||
const imgUrl = ref('') //地图背景
|
||||
const imgList = [] //所有的图标的列表
|
||||
|
||||
const imglist = [
|
||||
{
|
||||
id: '01',
|
||||
con: '图一',
|
||||
xind: 10,
|
||||
yind: 20,
|
||||
img: 'https://ts1.cn.mm.bing.net/th/id/R-C.5a49085e4afe4261c8994e7b2ad91842?rik=VxQQBSuFk%2f%2ftaA&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fbbs4%2f200810%2f17%2f1224206085128.jpg&ehk=QaHcMJfNlSmAGrzRh6DkCiRkBlEs9J5Tw95WfADpO9E%3d&risl=&pid=ImgRaw&r=0'
|
||||
},
|
||||
{
|
||||
id: '02',
|
||||
con: '图二',
|
||||
xind: 500,
|
||||
yind: 300,
|
||||
img: 'https://ts1.cn.mm.bing.net/th/id/R-C.4909aa42dd7c594716632b97f1f18618?rik=HMYl7AI4kVNajg&riu=http%3a%2f%2fimg.sj33.cn%2fuploads%2fallimg%2f200912%2f20091223150532446.jpg&ehk=FScUCbGto5iQGiYuMmbcfs3IQo4mwvkcqSDs%2bJrXAnU%3d&risl=&pid=ImgRaw&r=0'
|
||||
const list = ref([])
|
||||
//获取地图点位
|
||||
const getList = async () => {
|
||||
let data = await MapApi.getPositionMapGetMap()
|
||||
let mapList = []
|
||||
for (let key in data) {
|
||||
mapList.push({
|
||||
floor: key,
|
||||
children: data[key]
|
||||
})
|
||||
}
|
||||
]
|
||||
list.value = mapList
|
||||
|
||||
const elements = ref([
|
||||
{
|
||||
x: -54.4,
|
||||
y: -34.2,
|
||||
w: 100,
|
||||
h: 100,
|
||||
minWidth: 10,
|
||||
minHeight: 10,
|
||||
isDraggable: true,
|
||||
isResizable: true,
|
||||
isRotatable: true,
|
||||
rotationHandle: 'r',
|
||||
resizeHandles: ['tl', 'tc', 'tr', 'cl', 'cr', 'bl', 'bc', 'br'],
|
||||
content: '元素1'
|
||||
},
|
||||
{
|
||||
x: -30,
|
||||
y: -20,
|
||||
w: 80,
|
||||
h: 80,
|
||||
minWidth: 10,
|
||||
minHeight: 10,
|
||||
isDraggable: true,
|
||||
isResizable: true,
|
||||
isRotatable: true,
|
||||
rotationHandle: 'r',
|
||||
resizeHandles: ['tl', 'tc', 'tr', 'cl', 'cr', 'bl', 'bc', 'br'],
|
||||
content: '元素2'
|
||||
//默认取第一个
|
||||
if (data[1][1]) {
|
||||
getMapData(data[1][1])
|
||||
}
|
||||
])
|
||||
|
||||
// 添加元素的方法
|
||||
const addElement = () => {
|
||||
const newElement = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: 60,
|
||||
h: 60,
|
||||
minWidth: 10,
|
||||
minHeight: 10,
|
||||
isDraggable: true,
|
||||
isResizable: true,
|
||||
isRotatable: true,
|
||||
rotationHandle: 'r',
|
||||
resizeHandles: ['tl', 'tc', 'tr', 'cl', 'cr', 'bl', 'bc', 'br'],
|
||||
content: '新元素'
|
||||
}
|
||||
elements.value.push(newElement)
|
||||
}
|
||||
// 缩放
|
||||
const resizing = (x, y, w, h, val, i) => {
|
||||
console.log(x, y, w, h, val, i)
|
||||
|
||||
//获取扫描图
|
||||
const getMapData = async (item) => {
|
||||
let data = await MapApi.getPositionMapdDwnloadPngBase64({
|
||||
floor: item.floor,
|
||||
area: item.area
|
||||
})
|
||||
|
||||
let base64Url = 'data:image/png;base64,'
|
||||
imgUrl.value = data
|
||||
}
|
||||
|
||||
// 缩放停止
|
||||
const resizeEnd = (x, y, w, h, item, index) => {
|
||||
console.log('缩放')
|
||||
item.x = x
|
||||
item.y = y
|
||||
item.w = w
|
||||
item.h = h
|
||||
addEditHistory()
|
||||
}
|
||||
// 拖拽停止
|
||||
const dragEnd = (x, y, item, i) => {
|
||||
console.log('拖拽')
|
||||
if (x === item.x && y === item.y) return
|
||||
item.x = x
|
||||
item.y = y
|
||||
addEditHistory()
|
||||
}
|
||||
// 旋转
|
||||
const rotating = (angle, val, i) => {
|
||||
console.log(angle, val, i)
|
||||
const rotateEnd = (degree, item, i) => {
|
||||
console.log('旋转')
|
||||
addEditHistory()
|
||||
}
|
||||
// 拖拽
|
||||
const dragging = (x, y, val, i) => {
|
||||
console.log(x, y, val, i)
|
||||
//选中
|
||||
const activatedHandle = (item, i) => {
|
||||
console.log('选中', item)
|
||||
}
|
||||
//非选中
|
||||
const deactivatedHandle = () => {
|
||||
console.log('取消选中')
|
||||
}
|
||||
|
||||
onMounted(() => {})
|
||||
//添加历史记录
|
||||
const addEditHistory = () => {
|
||||
currentIndex.value++
|
||||
allHistoryList.value.push(imgList.value)
|
||||
console.log(allHistoryList.value, 'allHistoryList')
|
||||
}
|
||||
|
||||
//上一步
|
||||
const backPreviousStep = () => {
|
||||
if (currentIndex.value > 0) {
|
||||
currentIndex.value--
|
||||
console.log('撤销', allHistoryList.value[currentIndex.value])
|
||||
} else {
|
||||
message.warning('没了老铁')
|
||||
}
|
||||
}
|
||||
//下一步
|
||||
const backNextStep = () => {
|
||||
if (currentIndex.value < allHistoryList.value.length - 1) {
|
||||
currentIndex.value++
|
||||
console.log('重做', allHistoryList.value[currentIndex.value])
|
||||
} else {
|
||||
message.warning('没了老铁')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
imgList.value = [
|
||||
{
|
||||
x: 100,
|
||||
y: 100,
|
||||
h: 100,
|
||||
w: 100,
|
||||
angle: 13,
|
||||
draggable: true,
|
||||
resizable: true,
|
||||
rotatable: true,
|
||||
img: 'https://sys.znkjfw.com/imgs/process/%E8%AF%B7%E5%81%87.png'
|
||||
},
|
||||
{
|
||||
x: 454.4,
|
||||
y: 434.2,
|
||||
w: 100,
|
||||
h: 100,
|
||||
angle: 0,
|
||||
draggable: true,
|
||||
resizable: true,
|
||||
rotatable: true,
|
||||
img: 'https://sys.znkjfw.com/imgs/process/%E8%AF%B7%E5%81%87.png'
|
||||
}
|
||||
]
|
||||
allHistoryList.value[0] = imgList.value
|
||||
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user