地图编辑

src/views/mapPage/realTimeMap/editMap.vue

@@ -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"
+            v-for="(item, index) in allHistoryList[currentIndex]"
-            :x="item.xind"
-            :y="item.yind"
             :key="index"
             :parent="true"
-            @rotating="(...args) => rotating(...args, item, index)"
+            :x="item.x"
-            @dragging="(...args) => dragging(...args, item, index)"
+            :y="item.y"
-            @resizing="(...args) => resizing(...args, item, index)"
+            :w="item.w"
-            :handles="['tl', 'tr', 'bl', 'br', 'rot']"
+            :h="item.h"
-            :rotatable="true"
+            :r="item.angle"
-            :resizable="true"
+            @rotatestop="(degree) => rotateEnd(degree, item, index)"
-            :lockAspectRatio="true"
+            @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
+              <img :src="item.img" alt="" style="width: 100%; height: 100%" />
-                :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&copyright=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>
             </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 = [
+const list = ref([])
-  {
+//获取地图点位
-    id: '01',
+const getList = async () => {
-    con: '图一',
+  let data = await MapApi.getPositionMapGetMap()
-    xind: 10,
+  let mapList = []
-    yind: 20,
+  for (let key in data) {
-    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'
+    mapList.push({
-  },
+      floor: key,
-  {
+      children: data[key]
-    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'
   }
-]
+  list.value = mapList
 
-const elements = ref([
+  //默认取第一个
-  {
+  if (data[1][1]) {
-    x: -54.4,
+    getMapData(data[1][1])
-    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'
 }
-])
 
-// 添加元素的方法
+//获取扫描图
-const addElement = () => {
+const getMapData = async (item) => {
-  const newElement = {
+  let data = await MapApi.getPositionMapdDwnloadPngBase64({
-    x: 0,
+    floor: item.floor,
-    y: 0,
+    area: item.area
-    w: 60,
+  })
-    h: 60,
+
-    minWidth: 10,
+  let base64Url = 'data:image/png;base64,'
-    minHeight: 10,
+  imgUrl.value = data
-    isDraggable: true,
-    isResizable: true,
-    isRotatable: true,
-    rotationHandle: 'r',
-    resizeHandles: ['tl', 'tc', 'tr', 'cl', 'cr', 'bl', 'bc', 'br'],
-    content: '新元素'
 }
-  elements.value.push(newElement)
+
+// 缩放停止
+const resizeEnd = (x, y, w, h, item, index) => {
+  console.log('缩放')
+  item.x = x
+  item.y = y
+  item.w = w
+  item.h = h
+  addEditHistory()
 }
-// 缩放
+// 拖拽停止
-const resizing = (x, y, w, h, val, i) => {
+const dragEnd = (x, y, item, i) => {
-  console.log(x, y, w, h, val, i)
+  console.log('拖拽')
+  if (x === item.x && y === item.y) return
+  item.x = x
+  item.y = y
+  addEditHistory()
 }
 // 旋转
-const rotating = (angle, val, i) => {
+const rotateEnd = (degree, item, i) => {
-  console.log(angle, val, i)
+  console.log('旋转')
+  addEditHistory()
 }
-// 拖拽
+//选中
-const dragging = (x, y, val, i) => {
+const activatedHandle = (item, i) => {
-  console.log(x, y, val, 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>