map

package.json

@@ -20,6 +20,7 @@
     "babel-preset-es2015": "^6.24.1",
     "element-ui": "^2.8.2",
     "jsencrypt": "^3.3.2",
+    "lodash": "^4.17.21",
     "simple-keyboard": "^3.7.26",
     "simple-keyboard-layouts": "^3.3.34",
     "vue": "^2.5.2",

src/config/getData.js

@@ -33,3 +33,29 @@ export const updateStation = (code, st) => post('api/operate/updateStation', {
   station_code: code,
   station_name: st
 })
+
+export const imageUrl = require('../images/new/apt_map.png')
+
+// 地图
+export const fetchMapData = () => {
+  let res = {
+    code: 200,
+    message: 'success',
+    data: {
+      image: imageUrl,
+      width: 400,
+      height: 300,
+      pixelRatio: 1,
+      leftBottomCoordinate: {x: -100, y: -300}
+    }
+  }
+  return res
+}
+export const fetchPathData = () => {
+  let res = {
+    code: 200,
+    message: 'success',
+    data: [{id: 'A', x: '0', y: '-200'}, {id: 'B', x: '100', y: '-250'}]
+  }
+  return res
+}

src/pages/modules/building.vue

@@ -44,6 +44,7 @@
 import { startMapping, setStation, stopMapping, getLocalMaps, oneClickDeployment } from '@config/getData.js'
 export default {
   beforeRouteLeave (to, from, next) {
+    if (this.needsConfirmation) {
       this.$confirm('是否放弃本次建图?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -53,9 +54,13 @@ export default {
       }).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>

src/pages/shells/index.vue

@@ -131,7 +131,6 @@ export default {
   padding 0 2%
   background top center / 100% 84px url(../../images/new/header_bg_1.png) no-repeat
 .button-home
-  padding .06rem .1rem
   background linear-gradient(0deg, #E64F29, rgba(230, 79, 41, 0.5))
   border-color rgba(230, 79, 41, 0.7)
 .state-item

src/router/index.js

@@ -8,6 +8,7 @@ const Home = r => require.ensure([], () => r(require('@page/modules/home.vue')),
 const Device = r => require.ensure([], () => r(require('@page/modules/device.vue')), 'modules')
 const Warning = r => require.ensure([], () => r(require('@page/modules/warning.vue')), 'modules')
 const Building = r => require.ensure([], () => r(require('@page/modules/building.vue')), 'modules')
+const Map = r => require.ensure([], () => r(require('@page/modules/map.vue')), 'modules')
 Vue.use(VueRouter)
 
 const router = new VueRouter({
@@ -35,6 +36,9 @@ const router = new VueRouter({
       }, {
         path: 'building',
         component: Building
+      }, {
+        path: 'map',
+        component: Map
       }]
     }
   ]

src/style/common.styl

@@ -82,6 +82,10 @@
   color #fff
 .el-button
   font-size .16rem
+  padding-top 0
+  padding-bottom 0
+  height .32rem
+  line-height .32rem
 .el-dialog
   background center / 100% 100% url(../images/new/modal_bg.png) no-repeat
 .el-dialog__header

yarn.lock

@@ -5589,6 +5589,11 @@ lodash@^4.17.19:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 log-symbols@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"