新功能

src/pages/modules/building.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="page_container">
+    <el-row type="flex" justify="space-between">
+      <el-col :span="10"><button class="button_control" @click="addPoint"><p>打点</p></button></el-col>
+      <el-col :span="14">
+        <el-row type="flex" justify="end">
+          <el-button type="primary" icon="el-icon-zoom-in" size="mini" @click="zoomIn">放大</el-button>
+          <el-button type="primary" icon="el-icon-zoom-out" size="mini" @click="zoomOut">缩小</el-button>
+        </el-row>
+      </el-col>
+    </el-row>
+    <div class="canvas-container">
+      <canvas id="canvas" ref="canvas" width="1920" height="1080"></canvas>
+    </div>
+    <el-row type="flex" justify="end"><button class="button_control" @click="connectPoints"><p>建图</p></button></el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      points: [], // 存储所有点位坐标
+      intervalId: null, // 用于存储定时器的 ID
+      drawingPoints: true, // 是否继续绘制点位
+      scale: 1 // 缩放比例
+    }
+  },
+  beforeDestroy () {
+    if (this.intervalId) {
+      clearInterval(this.intervalId)
+    }
+  },
+  methods: {
+    addPoint () {
+      this.points = [] // 清空白色点位数组
+      this.drawingPoints = true // 重新开始绘制点位
+      this.drawPoints() // 重新绘制画布
+      this.updatePoint()
+      this.intervalId = setInterval(this.updatePoint, 5000)
+    },
+    // 模拟后端提供的点位坐标
+    getNewPoint () {
+      // 随机生成新的坐标
+      const newX = Math.random() * 1920 // 假设 x 坐标范围是 0 到 1920
+      const newY = Math.random() * 1080 // 假设 y 坐标范围是 0 到 1080
+      return { x: newX, y: newY } // 返回坐标
+    },
+    // 更新点位坐标
+    updatePoint () {
+      if (!this.drawingPoints) return
+      const newPoint = this.getNewPoint() // 获取新的坐标
+      this.points.push(newPoint) // 将新坐标添加到数组中
+      this.drawPoints() // 重新绘制点位
+    },
+    // 绘制点位
+    drawPoints () {
+      const canvas = this.$refs.canvas
+      const ctx = canvas.getContext('2d')
+      ctx.clearRect(0, 0, canvas.width, canvas.height) // 清除画布
+
+      // 绘制每个点位
+      ctx.fillStyle = 'white'
+      ctx.beginPath()
+      this.points.forEach(point => {
+        ctx.moveTo(point.x, point.y)
+        ctx.arc(point.x, point.y, 10, 0, Math.PI * 2) // 绘制半径为10px的圆点
+      })
+      ctx.fill()
+    },
+    // 连接点位成一条直线
+    connectPoints () {
+      this.drawingPoints = false // 停止绘制点位
+      clearInterval(this.intervalId) // 关闭定时器
+      this.drawLine() // 绘制直线
+    },
+    drawLine () {
+      const canvas = this.$refs.canvas
+      const ctx = canvas.getContext('2d')
+      ctx.clearRect(0, 0, canvas.width, canvas.height) // 清除画布
+      // 绘制路径
+      ctx.strokeStyle = 'white'
+      ctx.lineWidth = 1
+      ctx.beginPath()
+      if (this.points.length > 0) {
+        ctx.moveTo(this.points[0].x, this.points[0].y) // 移动到第一个点
+        for (let i = 1; i < this.points.length; i++) {
+          ctx.lineTo(this.points[i].x, this.points[i].y) // 依次连接到其他点
+        }
+        ctx.stroke() // 绘制路径
+      }
+    },
+    // 放大
+    zoomIn () {
+      this.scale += 0.1
+      this.redrawCanvas()
+    },
+    // 缩小
+    zoomOut () {
+      this.scale -= 0.1
+      if (this.scale < 0.1) this.scale = 0.1 // 防止缩放到 0 或负值
+      this.redrawCanvas()
+    },
+    // 重新绘制画布
+    redrawCanvas () {
+      const canvas = this.$refs.canvas
+      canvas.style.transform = `scale(${this.scale})`
+      if (this.drawingPoints) {
+        this.drawPoints()
+      } else {
+        this.drawLine()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.canvas-container
+  height calc(100% - 1rem)
+  margin .14rem 0
+  background-color rgba(0, 19, 48, 70%)
+  box-shadow inset 1px 1px 7px 2px #4d9bcd
+  overflow hidden
+#canvas
+  width 100%
+  height 100%
+</style>