接口交互

src/pages/modules/building.vue

@@ -12,18 +12,51 @@
     <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>
+    <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 // 缩放比例
+      scale: 1, // 缩放比例
+      gridColor: '#FFFFFF', // 线条颜色
+      gridLineWidth: 1, // 线条宽度
+      gridCellSize: 200, // 格子大小
+      dotColor: '#000000', // 圆点颜色
+      dotRadius: 5 // 圆点半径（直径为5px，半径为2.5px）
     }
   },
   beforeDestroy () {
@@ -31,8 +64,139 @@ export default {
       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() // 重新绘制画布