From 677ce26b2ed5bf8a36db02c0cdf8d83610c85ddb Mon Sep 17 00:00:00 2001
From: caill <815519168@qq.com>
Date: Wed, 23 Jul 2025 20:05:03 +0800
Subject: [PATCH] map

---
 package.json                   |   1 +
 src/config/getData.js          |  26 +++
 src/images/new/agv.png         | Bin 0 -> 1612 bytes
 src/images/new/apt_map.png     | Bin 0 -> 1539 bytes
 src/pages/modules/building.vue |  24 ++-
 src/pages/modules/home.vue     |   2 +-
 src/pages/modules/map.vue      | 289 +++++++++++++++++++++++++++++++++
 src/pages/shells/index.vue     |   1 -
 src/router/index.js            |   4 +
 src/style/common.styl          |   4 +
 yarn.lock                      |   5 +
 11 files changed, 345 insertions(+), 11 deletions(-)
 create mode 100644 src/images/new/agv.png
 create mode 100644 src/images/new/apt_map.png
 create mode 100644 src/pages/modules/map.vue

diff --git a/package.json b/package.json
index 4075e3b..f938932 100644
--- a/package.json
+++ b/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",
diff --git a/src/config/getData.js b/src/config/getData.js
index 49ed52a..48931a2 100644
--- a/src/config/getData.js
+++ b/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
+}
diff --git a/src/images/new/agv.png b/src/images/new/agv.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb3117fa59c8fd87350a292280b6bf0c321d93bb
GIT binary patch
literal 1612
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
KMNUMnLSTX&hA%V#

literal 0
HcmV?d00001

diff --git a/src/images/new/apt_map.png b/src/images/new/apt_map.png
new file mode 100644
index 0000000000000000000000000000000000000000..c8c180def695a65677ea49f795ed899ca872dcb2
GIT binary patch
literal 1539
zcmcIkYfuwc6y6XB6c(EZ1~*U%;HyKl*i={<qCr3!11iEeMyZccSuu>bMVy3JgVi*M
zRh(LZx;#oP0zR+}B9*2DOt1l5r9PN|54xd7t5mEoBGJ&hMqAoxfA+`ObMM`6?mg%G
z&N&4umc@Fy^V}f_@|3(Ey%K^L7%+b~7C0$0xduRxONS&nGD*=pc(Z%k1(dDs{(fA#
zyx#rmhW2mf{8D_^d(uPW%Eo=qx12<6b#*?FOyHzKnS2tWVBj@ENNY*vI_U>sl?ict
z#RP+mL3ra-2Sjmr5`?qBi2-r^dF^o)*c%Y=^R@pcs0p!tI~9`QbMf+yHO!gTH)EUf
zbkCGQ&Ia=ycvM`}Qk^1aXtXATjTwO9ECT{e25tq0b3qVXOiXZq866Pot*T@S)@Wxl
zsjkS9Q!adxEN0N}$9JpHAX0@E3Tfk$8ejk@q`@eYPW5OB!=TI}_VU<R;wyk7zX?=O
zFxUV}Uik?;{VPat-)6NgI%wx$Dt#CeXStPMGnT%X<peU}N^x~FZvRo%;8Xd?JNODa
zXK?jaUzm-ZFFTqKBBWqyKl(9PIC+9a^9C`2G)wBb2O=!#BQy1f<sFMH+kYPO;Y`k3
z*V=N~J{fEBGi%3}i9$A3=qfL>PS15dc6&5;<jPxX3$*A3jY-kjmqP1eL_#tPg+)Hh
z*g$H3s>H2~(-#CD2+R9z3QbdM*(c2bfYj9%O<RKGNmzylyx~Ju$O4+SO<(29mk^xI
zY%DEAOqlO_VIYroVFRBmIntUr{Z+xB89<iLgb||L(GV|(^0Z!vK9Tp5HA?WhvH<Uz
zmul#%){8k9bcgK>F5K1b(p8WFf@a27V;%x>aFHV4x2FQ_^J|0iZ7Yb>5jDT7!GE$~
zVL?6@Gngr_#(8@Y5VF&83|~SROZAuD?gE;6H7<z1M0?b9nrpr0Z(Bt~5=QfmK(hZ+
zL#d7~sd`XYH=aX@aSvzV>N6foiNP7Tx>Ec(+9#!8nNL!IRyUn2$_yT}J*~cIwq$x}
z-FApZPsEWRho)P7p{x^em1kRvv;A^4LT2c|)qt9!**$Ibg+R4Xi)EfIY4s{m{S@pX
z56u?AYp(akx?dldA4Qml-8QYd>D=CXHoW&tO|mlLL5t^taHnaWUe;mxF+(ZWci7Nf
za8L8($OHMtGT8wlE!H(@=gF%F<jLS+p?!M-8<PvjQ}*#mwJpm*tMCdl9(V+f>|Xm=
z>N|4LwG1O0JJ&@MPqU{fuDNcO+^LfmK1$drx7=S3<UeO$SD}tgt6e0$Gv_?}gXi|p
z^zs`W#Vgp@M@;ELUe>Ut#w61Zjj?}M8i$_byaQFuB%Sk$esxieS7e!$R1|2uU9L08
z(1X@5V(yuAKPg4V(mCXk7v~--3vbUSXOM1z!Eu+{1mt_+Hxy%mL#)TQvwAM2KLe6l
zP8PTNdmnHg-e(J>T6)wm#I4ltg5TK8fzmrDIL!|`#KrpCmD=OV2rJy5IvZ!@)XXCL
zqXIy?b5e%#`N`!Wdw2%qoQhBG@ZN&6@OHCMBP^+kB<6{jT*jB+Ako(`wdi8&??Md7
z@~tX#t@Gc9P_^jYZHE|fbT3cnVU0EhnlPdM8e9K0zUV3V=WP4`L5fbF+HHy-mg;hJ
QV7Nn)m}SwY7jM}82k{VrAOHXW

literal 0
HcmV?d00001

diff --git a/src/pages/modules/building.vue b/src/pages/modules/building.vue
index 9917193..05b677d 100644
--- a/src/pages/modules/building.vue
+++ b/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)
diff --git a/src/pages/modules/home.vue b/src/pages/modules/home.vue
index fcd8eda..8a185a0 100644
--- a/src/pages/modules/home.vue
+++ b/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
     }
diff --git a/src/pages/modules/map.vue b/src/pages/modules/map.vue
new file mode 100644
index 0000000..a0c1505
--- /dev/null
+++ b/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>
diff --git a/src/pages/shells/index.vue b/src/pages/shells/index.vue
index d3033b1..e8de42c 100644
--- a/src/pages/shells/index.vue
+++ b/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
diff --git a/src/router/index.js b/src/router/index.js
index c3d3d9f..9bc4a4f 100644
--- a/src/router/index.js
+++ b/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
       }]
     }
   ]
diff --git a/src/style/common.styl b/src/style/common.styl
index 04931a7..1901a18 100644
--- a/src/style/common.styl
+++ b/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
diff --git a/yarn.lock b/yarn.lock
index 7ee94ec..afebb70 100644
--- a/yarn.lock
+++ b/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"