map

src/pages/modules/building.vue

@@ -44,18 +44,23 @@
 import { startMapping, setStation, stopMapping, getLocalMaps, oneClickDeployment } from '@config/getData.js'
 export default {
   beforeRouteLeave (to, from, next) {
-    this.$confirm('是否放弃本次建图?', '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    }).then(() => {
-      next() // 允许离开
-    }).catch(() => {
-      next(false) // 阻止离开
-    })
+    if (this.needsConfirmation) {
+      this.$confirm('是否放弃本次建图?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        next() // 允许离开
+      }).catch(() => {
+        next(false) // 阻止离开
+      })
+    } else {
+      next()
+    }
   },
   data () {
     return {
+      needsConfirmation: true,
       mapName: '',
       dialogVisible: false,
       dataForm: {
@@ -245,6 +250,7 @@ export default {
             type: 'success',
             message: res.message
           })
+          this.needsConfirmation = false
           this.$router.push('/index/home')
         } else {
           this.$message.error(res.message)

src/pages/modules/home.vue

@@ -18,7 +18,7 @@ export default {
         {title: '操作', zh_title: '操作', en_title: 'Operation', router: '/index/device'},
         {title: '建图', zh_title: '建图', en_title: 'Map building', router: '/index/building'},
         {title: '取消任务', zh_title: '取消任务', en_title: 'Cancel task', router: ''},
-        {title: '地图', zh_title: '地图', en_title: 'Map', router: ''}
+        {title: '地图', zh_title: '地图', en_title: 'Map', router: '/index/map'}
       ],
       disabled: false
     }

src/pages/modules/map.vue

@@ -0,0 +1,289 @@
+
+<template>
+  <div class="page_container">
+    <div class="canvas-container">
+      <canvas id="mapCanvas" ref="mapCanvas" @wheel="handleZoom"  @click="handleCanvasClick" @touchstart="handleTouchStart" @touchmove="handleTouchMove"></canvas>
+      <el-row type="flex" justify="end" class="map_tools">
+        <el-button type="primary" :disabled="zoomPercentage === 2" icon="el-icon-minus" size="mini" style="border: 0;border-radius: 0;" @click="zoomOut"></el-button>
+        <div class="zoom_data">{{ zoomPercentage }}%</div>
+        <el-button type="primary" :disabled="zoomPercentage === 200" icon="el-icon-plus" size="mini" style="border: 0;border-radius: 0;" @click="zoomIn"></el-button>
+      </el-row>
+    </div>
+    <div
+      v-if="showPopup"
+      class="point-popup"
+      :style="popupStyle"
+      @click.stop
+    >
+      <el-row type="flex" justify="space-between" class="popup-content" style="border-bottom: 1px solid #fff;">
+        <el-col :span="10"><h3>编号</h3></el-col>
+        <el-col :span="14"><p>{{selectedPoint.id}}</p></el-col>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="popup-content">
+        <el-col :span="10"><h3>别名</h3></el-col>
+        <el-col :span="14"><p>-</p></el-col>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="popup-content">
+        <el-col :span="10"><h3>X坐标</h3></el-col>
+        <el-col :span="14"><p>{{ selectedPoint.x }}</p></el-col>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="popup-content">
+        <el-col :span="10"><h3>Y坐标</h3></el-col>
+        <el-col :span="14"><p>{{ selectedPoint.y }}</p></el-col>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="popup-content">
+        <el-col :span="10"><h3>角度值</h3></el-col>
+        <el-col :span="14"><p>0</p></el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { throttle } from 'lodash'
+import markerImage from '@images/new/agv.png'
+import { fetchMapData, fetchPathData } from '@config/getData.js'
+export default {
+  data () {
+    return {
+      scale: 1, // 缩放比例
+      canvas: null, // Canvas 元素
+      ctx: null, // Canvas 绘图上下文
+      touchStart: null, // 触摸起点
+      zoomPercentage: 100, // 当前缩放百分比
+      mapData: null, // 存储从后端获取的地图数据
+      pathData: null, // 存储从后端获取的路径数据
+      showPopup: false,
+      selectedPoint: {},
+      popupStyle: {left: '0px', top: '0px'},
+      selectedPointId: null
+
+    }
+  },
+  mounted () {
+    this._fetchMapData()
+    document.addEventListener('click', this.handleDocumentClick)
+  },
+  beforeDestroy () {
+    // 移除事件监听
+    document.removeEventListener('click', this.handleDocumentClick)
+  },
+  methods: {
+    async _fetchMapData () {
+      try {
+        let res = await fetchMapData()
+        if (res) {
+          this.mapData = res.data
+          this._fetchPathData()
+        }
+      } catch (e) {
+        this.$message.error(e)
+      }
+    },
+    async _fetchPathData () {
+      try {
+        let res = await fetchPathData()
+        this.pathData = [...res.data]
+        this.initCanvas()
+      } catch (e) {
+        this.$message.error(e)
+      }
+    },
+    initCanvas () {
+      this.canvas = this.$refs.mapCanvas
+      this.ctx = this.canvas.getContext('2d')
+      this.canvas.width = this.mapData.width
+      this.canvas.height = this.mapData.height
+      this.redrawCanvas()
+    },
+    redrawCanvas () {
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+      const img = new Image()
+      img.src = this.mapData.image
+      img.onload = () => {
+        this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height)
+        this.ctx.save()
+        this.ctx.translate(this.mapData.leftBottomCoordinate.x * -1 * this.mapData.pixelRatio, 0)
+        this.ctx.scale(1, -1)
+        this.drawPath()
+        this.drawMarkers()
+      }
+    },
+    drawPath () {
+      this.ctx.beginPath()
+      this.pathData.forEach((point, index) => {
+        const x = point.x * this.mapData.pixelRatio
+        const y = point.y * this.mapData.pixelRatio
+        if (index === 0) {
+          this.ctx.moveTo(x, y)
+        } else {
+          this.ctx.lineTo(x, y)
+        }
+      })
+      this.ctx.strokeStyle = '#009de5'
+      this.ctx.lineWidth = 3
+      this.ctx.stroke()
+    },
+    drawMarkers () {
+      const markerImg = new Image()
+      markerImg.src = markerImage
+      markerImg.onload = () => {
+        this.pathData.forEach(point => {
+          const x = point.x * this.mapData.pixelRatio
+          const y = point.y * this.mapData.pixelRatio
+          if (point.id === this.selectedPointId) {
+            this.ctx.beginPath()
+            this.ctx.arc(x, y, 10, 0, Math.PI * 2)
+            this.ctx.fillStyle = '#59ccd2'
+            this.ctx.fill()
+          } else {
+            this.ctx.drawImage(markerImg, x - 10, y - 10, 20, 20)
+          }
+          this.ctx.save()
+          this.ctx.scale(1, -1)
+          this.ctx.font = '12px Arial'
+          this.ctx.fillStyle = 'white'
+          this.ctx.textAlign = 'center'
+          this.ctx.fillText(point.id, x, -y + 25)
+          this.ctx.restore()
+        })
+      }
+    },
+    handleCanvasClick (event) {
+      const rect = this.canvas.getBoundingClientRect()
+      const mouseX = event.clientX - rect.left
+      const mouseY = event.clientY - rect.top
+      this.pathData.forEach(point => {
+        const x = (point.x - this.mapData.leftBottomCoordinate.x) * this.mapData.pixelRatio
+        const y = point.y * -1 * this.mapData.pixelRatio
+        // 检查点击位置是否在标记图片内
+        if (mouseX >= x - 10 && mouseX <= x + 10 && mouseY >= y - 10 && mouseY <= y + 10) {
+          if (this.selectedPointId === point.id) {
+            this.resetSelection()
+          } else {
+            this.selectedPointId = point.id
+            this.selectedPoint = point
+            this.showPopup = true
+            this.popupStyle = {
+              left: `${event.clientX - 40}px`,
+              top: `${event.clientY - 200}px`
+            }
+            this.initCanvas()
+            event.stopPropagation()
+          }
+        }
+      })
+    },
+    handleDocumentClick () {
+      this.resetSelection()
+    },
+    resetSelection () {
+      if (this.selectedPointId) {
+        this.selectedPointId = null
+        this.selectedPoint = null
+        this.showPopup = false
+        this.initCanvas()
+      }
+    },
+    zoom (step) {
+      this.scale = Math.min(2, Math.max(0.02, this.scale + step / 100))
+      this.zoomPercentage = Math.round(this.scale * 100)
+      this.applyTransform()
+    },
+    applyTransform () {
+      this.canvas.style.transform = `scale(${this.scale})`
+    },
+    // 鼠标滚动缩放
+    handleZoom (event) {
+      event.preventDefault()
+      const delta = event.deltaY
+      const step = delta > 0 ? -1 : 1
+      this.zoom(step)
+    },
+    // 触摸开始事件
+    handleTouchStart (event) {
+      this.touchStart = Array.from(event.touches).map(touch => ({
+        x: touch.clientX,
+        y: touch.clientY
+      }))
+    },
+    // 触摸移动事件
+    handleTouchMove (event) {
+      if (this.touchStart && this.touchStart.length === 2 && event.touches.length === 2) {
+        const startDist = this.getDistance(this.touchStart[0].x, this.touchStart[0].y, this.touchStart[1].x, this.touchStart[1].y)
+        const currentDist = this.getDistance(event.touches[0].clientX, event.touches[0].clientY, event.touches[1].clientX, event.touches[1].clientY)
+        const step = (currentDist - startDist) / startDist
+        this.zoom(step)
+      }
+      this.touchStart = Array.from(event.touches).map(touch => ({
+        x: touch.clientX,
+        y: touch.clientY
+      }))
+    },
+    // 计算两点之间的距离
+    getDistance (x1, y1, x2, y2) {
+      return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)
+    },
+    zoomIn () {
+      if (this.scale < 2) {
+        this.zoom(8) // 每次放大8%
+      }
+    },
+    zoomOut () {
+      if (this.scale > 0.02) {
+        this.zoom(-8) // 每次缩小8%
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.canvas-container
+  position relative
+  display flex
+  justify-content: center;
+  align-items: center;
+  height calc(100% - .32rem)
+  background-color rgba(4, 33, 58, 70%)
+  // background-color rgb(11 68 137 / 70%)
+  box-shadow inset 1px 1px 7px 2px #4d9bcd
+  overflow auto
+.map_tools
+  position absolute
+  top 0
+  right 0
+.zoom_data
+  width .6rem
+  font-size .16rem
+  height .32rem
+  line-height .32rem
+  color #00d9f3
+  text-align center
+  border-top 1px solid #009fde
+  border-bottom 1px solid #009fde
+.point-popup
+  position fixed
+  background rgba(0, 0, 0, 70%)
+  border 1px solid rgba(255, 255, 255, .3)
+  border-radius: 8px;
+  padding 10px
+  box-shadow 0 0px 4px 2px rgba(255,255,255,0.1)
+  z-index 100
+  min-width 180px
+  animation fadeIn 0.2s ease-out
+  h3
+    color #fff
+    font-size 16px
+    line-height 30px
+    text-align center
+  p
+    color #fff
+    font-size 16px
+    line-height 30px
+    text-align center
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(5px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+</style>