优化

src/pages/modules/building.vue

@@ -23,9 +23,9 @@
       </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">
-        <i class="el-icon-success"></i>
+    <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>
@@ -35,6 +35,7 @@
 <script>
 import GlMap from './gl-map1.vue'
 import { startMapping, setStation, stopMapping, getLocalMaps, oneClickDeployment, abandonMapping } from '../../config/getData.js'
+import { mapGetters } from 'vuex'
 export default {
   name: 'ModuleBuilding',
   components: {
@@ -90,6 +91,7 @@ export default {
       keyPoints: [],
       disabled: false,
       message: '', // 用于显示消息
+      error: false,
       intervalId: null, // 用于存储定时器ID
       startTime: null, // 用于记录开始时间
       visible: false,
@@ -101,6 +103,9 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapGetters(['isTop'])
+  },
   beforeDestroy () {
     if (this.intervalId) {
       clearInterval(this.intervalId)
@@ -157,12 +162,12 @@ export default {
         let res = await startMapping(this.mapName)
         if (res && res.code === 200) {
           this.message = '小车正在建图中'
-        } else {
-          this.$message.error(res.message)
+          this.error = false
         }
         this.loading.close()
       } catch (e) {
-        this.$message.error(e)
+        this.message = '建图出现错误，需要重新建图'
+        this.error = true
         this.loading.close()
       }
     },
@@ -209,18 +214,21 @@ export default {
         let res = await stopMapping()
         if (res && res.code === 200) {
           this.message = '正在建图，请等待。。。'
+          this.error = false
           this.startTime = Date.now() // 记录开始时间
           this._getLocalMaps()
           this.intervalId = setInterval(this._getLocalMaps, 3000) // 每5秒检查一次
         } else {
           this.$message.error(res.message)
           this.message = ''
+          this.error = false
           this.disabled = false
           this.loading.close()
         }
       } catch (e) {
         this.$message.error(e)
         this.message = ''
+        this.error = false
         this.disabled = false
         this.loading.close()
       }
@@ -243,6 +251,7 @@ export default {
             if (elapsedTime >= 60000) { // 超过1分钟
               clearInterval(this.intervalId) // 停止定时器
               this.message = ''
+              this.error = false
               this.$message.error('建图失败，请重新建图')
               this.disabled = false
               this.loading.close()
@@ -251,6 +260,7 @@ export default {
         } else {
           clearInterval(this.intervalId) // 停止定时器
           this.message = ''
+          this.error = false
           this.$message.error('建图失败，请重新建图')
           this.disabled = false
           this.loading.close()
@@ -258,6 +268,7 @@ export default {
       } catch (e) {
         clearInterval(this.intervalId) // 出错时停止定时器
         this.message = ''
+        this.error = false
         this.disabled = false
         this.$message.error(e)
         this.loading.close()
@@ -277,11 +288,13 @@ export default {
           this.$message.error(res.message)
         }
         this.message = ''
+        this.error = false
         this.disabled = false
         this.loading.close()
       } catch (e) {
         this.$message.error(e)
         this.message = ''
+        this.error = false
         this.disabled = false
         this.loading.close()
       }
@@ -308,7 +321,6 @@ export default {
   border-radius 4px
   position fixed
   left 50%
-  top .87rem
   transform translateX(-50%)
   background-color #f0f9eb
   transition opacity .3s,transform .4s
@@ -319,7 +331,6 @@ export default {
   align-items center
   font-size .16rem
   list-height 1
-  color #67C23A
   p
     margin-left 10px
 .custom-message-enter, .custom-message-leave-to