接口

src/pages/modules/building.vue

@@ -12,7 +12,10 @@
     <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" :disabled="disabled" @click="_stopMapping"><p>结束建图</p></button></el-row>
+    <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="_stopMapping"><p>结束建图</p></button>
+    </el-row>
     <el-dialog
       title="设置站点"
       :visible.sync="dialogVisible"
@@ -28,15 +31,29 @@
       </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 v-if="message" class="message_wrap">
-      <div class="message">{{ message }}</div>
-    </div>
+    <transition name="custom-message">
+      <div v-if="message" class="message">
+        <i class="el-icon-success"></i>
+        <p>{{ message }}</p>
+      </div>
+    </transition>
   </div>
 </template>
 
 <script>
 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) // 阻止离开
+    })
+  },
   data () {
     return {
       mapName: '',
@@ -63,7 +80,7 @@ export default {
       clearInterval(this.intervalId)
     }
   },
-  mounted () {
+  created () {
     this._startMapping()
   },
   methods: {
@@ -104,16 +121,23 @@ export default {
     // 开始建图
     async _startMapping () {
       try {
+        this.loading = this.$loading({
+          lock: true,
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.6)'
+        })
         const getTimestamp = new Date().getTime()
         this.mapName = `apt_map_${getTimestamp}`
         let res = await startMapping(this.mapName)
-        if (res) {
-          if (res.code !== 200) {
-            this.$message.error(res.message)
-          }
+        if (res && res.code === 200) {
+          this.message = '小车正在建图中'
+        } else {
+          this.$message.error(res.message)
         }
+        this.loading.close()
       } catch (e) {
         this.$message.error(e)
+        this.loading.close()
       }
     },
     // 打点
@@ -151,24 +175,28 @@ export default {
     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) {
-          if (res.code === 200) {
-            this.$message({
-              type: 'success',
-              message: res.message
-            })
-            this.message = '正在建图，请等待。。。'
-            this.startTime = Date.now() // 记录开始时间
-            this.intervalId = setInterval(this._getLocalMaps, 3000) // 每5秒检查一次
-          } else {
-            this.$message.error(res.message)
-            this.disabled = false
-          }
+        if (res && res.code === 200) {
+          this.message = '正在建图，请等待。。。'
+          this.startTime = Date.now() // 记录开始时间
+          this._getLocalMaps()
+          this.intervalId = setInterval(this._getLocalMaps, 3000) // 每5秒检查一次
+        } else {
+          this.$message.error(res.message)
+          this.message = ''
+          this.disabled = false
+          this.loading.close()
         }
       } catch (e) {
         this.$message.error(e)
+        this.message = ''
         this.disabled = false
+        this.loading.close()
       }
     },
     async _getLocalMaps () {
@@ -191,6 +219,7 @@ export default {
               this.message = ''
               this.$message.error('建图失败，请重新建图')
               this.disabled = false
+              this.loading.close()
             }
           }
         } else {
@@ -198,33 +227,36 @@ export default {
           this.message = ''
           this.$message.error('建图失败，请重新建图')
           this.disabled = false
+          this.loading.close()
         }
       } catch (e) {
         clearInterval(this.intervalId) // 出错时停止定时器
         this.message = ''
         this.disabled = false
         this.$message.error(e)
+        this.loading.close()
       }
     },
     async _oneClickDeployment () {
       try {
         let res = await oneClickDeployment(this.mapName)
-        if (res) {
-          if (res.code === 200) {
-            this.$message({
-              type: 'success',
-              message: res.message
-            })
-          } else {
-            this.$message.error(res.message)
-          }
-          this.message = ''
-          this.disabled = false
+        if (res && res.code === 200) {
+          this.$message({
+            type: 'success',
+            message: res.message
+          })
+          this.$router.push('/index/home')
+        } else {
+          this.$message.error(res.message)
         }
+        this.message = ''
+        this.disabled = false
+        this.loading.close()
       } catch (e) {
         this.$message.error(e)
         this.message = ''
         this.disabled = false
+        this.loading.close()
       }
     },
     // 放大
@@ -252,20 +284,27 @@ export default {
 #canvas
   width 100%
   height 100%
-.message_wrap
+.message
+  min-width 380px
+  border 1px solid #e1f3d8
+  border-radius 4px
   position fixed
-  left 0
-  top 0
-  width 100%
-  height 100%
+  left 50%
+  top .87rem
+  transform translateX(-50%)
+  background-color #f0f9eb
+  transition opacity .3s,transform .4s
+  overflow hidden
+  padding 8px 15px
   z-index 2025
-  background center center / 40% auto url(../../images/new/popover.png) no-repeat
   display flex
-  justify-content center
   align-items center
-  .message
-    width 30%
-    font-size .18rem
-    list-height .2rem
-    color #fff
+  font-size .16rem
+  list-height 1
+  color #67C23A
+  p
+    margin-left 10px
+.custom-message-enter, .custom-message-leave-to
+  opacity 0
+  transform translate(-50%,-100%)
 </style>