apt15e/src/pages/modules/building.vue

<template>
  <div class="page_container">
    
    <gl-map ref="glMap"/>
    <el-row type="flex" justify="space-between">
      <el-col :span="10"><button class="button_control" :disabled="disabled" @click="addPoint"><p>打点</p></button></el-col>
      <el-col :span="14">
        <el-row type="flex" justify="end">
          <button class="button_control" @click="$router.push('/index/home')"><p>放弃建图</p></button>
          <button class="button_control" style="margin-left: 10px" :disabled="disabled" @click="stopMappingConfirm"><p>结束建图</p></button>
        </el-row>
      </el-col>
    </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="stationName">
          <el-input v-model="dataForm.stationName" id="stationName" @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>
    <transition name="custom-message" >
      <div v-if="message" class="message" :style="{'top': isTop ? '.87rem' : '.57rem', 'color': error ? '#F56C6C' : '#67C23A'}">
        <i :class="error ? 'el-icon-error' : 'el-icon-success'"></i>
        <p>{{ message }}</p>
      </div>
    </transition>
    <div v-if="showProgress" class="progress-mask">
      <!-- 进度条内容区 -->
      <div class="progress-container">
        <div class="progress_tip">{{warnTip ? '正在部署地图中...' : '正在生成地图中...'}}</div>
        <el-progress
          v-show="!warnTip" 
          :percentage="percentage" 
          :stroke-width="10"
          style="width: 300px;"
        ></el-progress>
      </div>
    </div>
  </div>
</template>

<script>
import GlMap from './gl-map.vue'
// import PointCloudMap from './point-cloud-map.vue'
// import { startMapping, stopMapping, getMappingStatus } from '../../config/mork.js'
import { startMapping, stopMapping, getMappingStatus, setStation, oneClickDeployment, abandonMapping } from '../../config/getData.js'
import { mapGetters } from 'vuex'
export default {
  name: 'ModuleBuilding',
  components: {
    GlMap,
    // PointCloudMap
  },
  beforeRouteLeave (to, from, next) {
    if (this.needsConfirmation) {
      this.$confirm('是否放弃本次建图?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          // 显示加载中状态
          this.loading = this.$loading({
            lock: true,
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.6)'
          })
          // 调用放弃建图接口
          const res = await abandonMapping()
          this.loading.close()
          if (res && res.code === 200) {
            // 接口成功，允许离开页面
            this.needsConfirmation = false // 标记无需再确认
            next()
          } else {
            // 接口返回失败，提示错误并阻止离开
            this.$message.error(res.message || '放弃建图失败，请重试')
            next(false)
          }
        } catch (error) {
          // 发生异常，提示错误并阻止离开
          this.loading.close()
          this.$message.error('操作失败：' + error.message)
          next(false)
        }
      }).catch(() => {
        next(false) // 阻止离开
      })
    } else {
      next()
    }
  },
  data () {
    return {
      needsConfirmation: true,
      mapName: '',
      dialogVisible: false,
      dataForm: {
        stationCode: '',
        stationName: ''
      },
      keyPoints: [],
      disabled: false,
      message: '', // 用于显示消息
      error: false,
      visible: false,
      layout: 'normal',
      input: null,
      options: {
        useKbEvents: false,
        preventClickEvent: false
      },
      showProgress: false,
      warnTip: false,
      percentage: 0,
      intervalId: null // 用于存储定时器ID
    }
  },
  computed: {
    ...mapGetters(['isTop'])
  },
  beforeDestroy () {
    if (this.intervalId) {
      clearTimeout(this.intervalId)
    }
  },
  created () {
    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 {
        this.loading = this.$loading({
          lock: true,
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.6)'
        })
        const now = new Date()
        const year = now.getFullYear()
        const month = String(now.getMonth() + 1).padStart(2, '0') // 月份从0开始，补0
        const day = String(now.getDate()).padStart(2, '0')
        const hours = String(now.getHours()).padStart(2, '0')
        const minutes = String(now.getMinutes()).padStart(2, '0')
        const seconds = String(now.getSeconds()).padStart(2, '0')
        this.mapName = `apt_map_${year}${month}${day}${hours}${minutes}${seconds}`
        let res = await startMapping(this.mapName)
        if (res && res.code === 200) {
          this.message = '小车正在建图中'
          this.error = false
          this.$nextTick(() => {
            this.$refs.glMap.init()
          })
        }
        this.loading.close()
      } catch (e) {
        this.message = '建图出现错误，需要重新建图'
        this.error = true
        this.loading.close()
      }
    },
    // 打点
    addPoint () {
      this.dialogVisible = true
      this.dataForm.stationCode = 'B' + (this.keyPoints.length + 1)
      this.dataForm.stationName = '工作点' + (this.keyPoints.length + 1)
    },
    // 打点->保存
    async _setStation () {
      this.disabled = true
      try {
        let res = await setStation(this.dataForm.stationName, this.dataForm.stationCode)
        if (res) {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: res.message
            })
            this.keyPoints.push(this.dataForm.stationCode)
          } else {
            this.$message.error(res.message)
          }
        }
        this.dialogVisible = false
        this.visible = false
        this.disabled = false
      } catch (e) {
        this.$message.error(e)
        this.dialogVisible = false
        this.visible = false
        this.disabled = false
      }
    },
    stopMappingConfirm () {
      this.$confirm('确定是否结束建图?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._stopMapping()
      }).catch(() => {
        this.$message({
            type: 'info',
            message: '已取消结束建图'
          })
      })
    },
    // 结束建图
    async _stopMapping () {
      this.disabled = true
      try {
        this.loading = this.$loading({
          lock: true,
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.6)'
        })
        let res = await stopMapping()
        if (res && res.code === 200) {
          this.message = ''
          this.error = false
          this.$nextTick(() => {
            this.$refs.glMap.closeWebSocket()
          })
          this._getMappingStatus()
        }
        this.disabled = false
        this.loading.close()
      } catch (e) {
        this.message = '结束建图出现错误'
        this.error = true
        this.disabled = false
        this.loading.close()
      }
    },
    // 进度条
    async _getMappingStatus () {
      try {
        let res = await getMappingStatus()
        this.showProgress = true
        this.percentage = Number(res.mapping_percent) || 0
        if (res.mapping_return === '0') {
          if (this.intervalId) clearTimeout(this.intervalId)
          this.intervalId = setTimeout(() => this._getMappingStatus(), 1000)
        }
        if (res.mapping_return === '1') {
          if (this.intervalId) clearTimeout(this.intervalId)
          this.warnTip = true
          this.percentage = 0
          this._oneClickDeployment()
        }
        if (res.mapping_return === '2') {
          if (this.intervalId) clearTimeout(this.intervalId)
          this.showProgress = false
          this.percentage = 0
          this.keyPoints = []
          this.$confirm('新建地图失败, 是否重新建图?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this._startMapping()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消建图'
            })
          })
        }
      } catch (e) {
        this.message = ''
        this.error = false
        this.keyPoints = []
        this.$confirm('新建地图失败, 是否重新建图?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this._startMapping()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消建图'
          })
        })
      }
    },
    async _oneClickDeployment () {
      try {
        let res = await oneClickDeployment(this.mapName)
        if (res && res.code === 200) {
          this.$message({
            type: 'success',
            message: res.message
          })
          this.needsConfirmation = false
          this.$router.push('/index/home')
        } else {
          this.$message.error(res.message)
        }
        this.showProgress = false
        this.warnTip = false
        this.message = ''
        this.error = false
        this.disabled = false
        this.loading.close()
      } catch (e) {
        this.showProgress = false
        this.warnTip = false
        this.$message.error(e)
        this.message = ''
        this.error = false
        this.disabled = false
        this.loading.close()
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.message
  min-width 380px
  border 1px solid #e1f3d8
  border-radius 4px
  position fixed
  left 50%
  transform translateX(-50%)
  background-color #f0f9eb
  transition opacity .3s,transform .4s
  overflow hidden
  padding 8px 15px
  z-index 2025
  display flex
  align-items center
  font-size .16rem
  list-height 1
  p
    margin-left 10px
.custom-message-enter, .custom-message-leave-to
  opacity 0
  transform translate(-50%,-100%)
.progress-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色遮罩 */
  z-index: 9999; /* 确保在最上层 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 进度条容器 */
.progress-container {
  background-color: #fff;
  padding: 30px 40px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.progress_tip {
  font-size: .2rem
  line-height: .34rem
  color: #000
  font-weight: 700
}
</style>