apt15e/src/pages/modules/building.vue

<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="_stopMapping"><p>建图</p></button></el-row>
    <el-dialog
      title="设置站点"
      :visible.sync="dialogVisible"
      width="50%">
      <el-form :model="dataForm" ref="dataForm" :label-width="$i18n.locale === 'en-us' ? '' : '1.1rem'" size="mini">
        <el-form-item label="站点名称" prop="point">
          <el-input v-model="dataForm.point" id="point" @focus="show" data-layout="normal"></el-input>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="space-around" style="margin-top: .3rem">
        <el-col :span="7"><button class="button_control button_control_disabled" @click="dialogVisible = false"><p>{{$t('Cancel')}}</p></button></el-col>
        <el-col :span="7"><button class="button_control" @click="_setStation"><p>{{$t('Save')}}</p></button></el-col>
      </el-row>
      <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
    </el-dialog>
  </div>
</template>

<script>
import { startMapping, setStation, stopMapping } from '@config/getData.js'
export default {
  data () {
    return {
      dialogVisible: false,
      dataForm: {
        point: ''
      },
      keyPoints: [],
      visible: false,
      layout: 'normal',
      input: null,
      options: {
        useKbEvents: false,
        preventClickEvent: false
      },
      points: [], // 存储所有点位坐标
      intervalId: null, // 用于存储定时器的 ID
      drawingPoints: true, // 是否继续绘制点位
      scale: 1, // 缩放比例
      gridColor: '#FFFFFF', // 线条颜色
      gridLineWidth: 1, // 线条宽度
      gridCellSize: 200, // 格子大小
      dotColor: '#000000', // 圆点颜色
      dotRadius: 5 // 圆点半径（直径为5px，半径为2.5px）
    }
  },
  beforeDestroy () {
    if (this.intervalId) {
      clearInterval(this.intervalId)
    }
  },
  mounted () {
    // this.drawGrid()
    this._startMapping()
  },
  methods: {
    show (e) {
      // 关闭中文keyboard
      let arr = document.querySelectorAll('.hg-theme-default')
      arr.forEach((ele) => {
        ele.style.visibility = 'hidden'
      })
      this.input = e.target
      this.layout = e.target.dataset.layout
      if (!this.visible) {
        this.visible = true
      }
    },
    hide () {
      this.visible = false
    },
    accept () {
      this.hide()
    },
    next () {
      let inputs = document.querySelectorAll('input')
      let found = false;
      [].forEach.call(inputs, (item, i) => {
        if (!found && item === this.input && i < inputs.length - 1 && this.input.dataset.next === '1') {
          found = true
          this.$nextTick(() => {
            inputs[i + 1].focus()
          })
        }
      })
      if (!found) {
        this.input.blur()
        this.hide()
      }
    },
    async _startMapping () {
      try {
        let res = await startMapping('apt_map_' + new Date().getTime())
        if (res) {
          if (res.code !== 200) {
            this.$message.error(res.message)
          }
        }
      } catch (e) {
        this.$message.error(e)
      }
    },
    addPoint () {
      this.dialogVisible = true
      this.dataForm.point = 'B' + (this.keyPoints.length + 1)
    },
    async _setStation () {
      try {
        let res = await setStation(this.dataForm.point)
        if (res) {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: res.message
            })
            this.keyPoints.push(this.dataForm.point)
          } else {
            this.$message.error(res.message)
          }
        }
        this.visible = false
      } catch (e) {
        this.$message.error(e)
        this.visible = false
      }
    },
    async _stopMapping () {
      try {
        let res = await stopMapping()
        if (res) {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: res.message
            })
          } else {
            this.$message.error(res.message)
          }
        }
      } catch (e) {
        this.$message.error(e)
      }
    },
    drawGrid () {
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      const width = canvas.width
      const height = canvas.height

      // 清空画布
      ctx.clearRect(0, 0, width, height)

      // 绘制格子
      for (let x = 0; x <= width; x += this.gridCellSize * this.scale) {
        ctx.beginPath()
        ctx.moveTo(x, 0)
        ctx.lineTo(x, height)
        ctx.strokeStyle = this.gridColor
        ctx.lineWidth = this.gridLineWidth
        ctx.stroke()
      }

      for (let y = 0; y <= height; y += this.gridCellSize * this.scale) {
        ctx.beginPath()
        ctx.moveTo(0, y)
        ctx.lineTo(width, y)
        ctx.strokeStyle = this.gridColor
        ctx.lineWidth = this.gridLineWidth
        ctx.stroke()
      }

      // 绘制圆点
      for (let x = 0; x < width; x += this.gridCellSize * this.scale) {
        for (let y = 0; y < height; y += this.gridCellSize * this.scale) {
          if (x > 0 && y > 0) {
            ctx.beginPath()
            ctx.arc(x, y, this.dotRadius, 0, Math.PI * 2)
            ctx.fillStyle = this.dotColor
            ctx.fill()
          }
        }
      }
    },
    addPoint2 () {
      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>