地图点位样式修改，曲线逻辑修改，引导功能修改

src/pages/modules/build/index.vue

@@ -4,14 +4,13 @@
       <gl-map ref="glMap"/>
     </div>
     <el-row type="flex" justify="space-between">
-      <el-col :span="15">
+      <el-col :span="18">
         <el-row type="flex">
           <button id="v-step-2" class="button_control" :disabled="disabled" @click="addPoint"><p>{{$t('MarkPoint')}}</p></button>
           <button class="button_control" style="margin-left: 10px" :disabled="disabled" @click="closeCloud"><p>{{cloudOff ? $t('EnablePointCloud') : $t('DisablePointCloud')}}</p></button>
           <div class="car-info">{{$t('CartPosition')}}: <span>{{ carPosition.x }}, {{carPosition.y}}</span></div>
         </el-row>
       </el-col>
-      <el-col :span="1" style="color: #fff;">{{ autoBackEnable }}, {{autoBackFinish}}</el-col>
       <el-col :span="8">
         <el-row type="flex" justify="end">
           <button class="button_control" @click="$router.push('/index/home')"><p>{{$t('AbandonMapbuild')}}</p></button>
@@ -59,18 +58,19 @@
         <button v-if="autoBackFinish === '2'" class="button_control" style="margin-top: 25px;" @click="failHandle"><p>{{$t('Confirm')}}</p></button>
       </div>
     </div>
+    <driver-modal v-if="driverVisible" ref="driverModal" @driverConfirm="driverConfirm"/>
   </div>
 </template>
 
 <script>
+import DriverModal from './driver-modal.vue'
 import GlMap from './gl-map.vue'
-import { driver } from 'driver.js'
-import 'driver.js/dist/driver.css'
 import { startMapping, stopMapping, getMappingStatus, setStation, oneClickDeployment, abandonMapping, sendAutoBack } from '@/config/getData.js'
 import { mapGetters } from 'vuex'
 export default {
   name: 'ModuleBuilding',
   components: {
+    DriverModal,
     GlMap
   },
   beforeRouteLeave (to, from, next) {
@@ -120,9 +120,8 @@ export default {
         }
     }
     return {
+      driverVisible: false,
       cloudOff: false,
-      driver: null,
-      driverActive: true,
       needsConfirmation: true,
       mapName: '',
       dialogVisible: false,
@@ -184,17 +183,22 @@ export default {
   },
   mounted() {
     // 初始化并启动引导
+    this.driverVisible = true
     this.$nextTick(() => {
-      this.initGuide()
+      this.$refs.driverModal.init()
     })
     document.addEventListener('keydown', this.handleKeydown);
   },
   methods: {
+    driverConfirm () {
+      this._startMapping()
+    },
     /* eslint-disable */
     backHandleChange(active, val) {
       if (active && val === '0') {
         this.loading = this.$loading({
           lock: true,
+          text: this.$t('systemcalculatingnotmovevehicle'),
           spinner: 'el-icon-loading',
           background: 'rgba(0, 0, 0, 0.6)'
         })
@@ -224,65 +228,6 @@ export default {
         this.stationConfirm();
       }
     },
-    initGuide() {
-      const config = {
-        // allowClose: false,
-        overlayOpacity: 0.7,
-        popoverClass: 'driverjs-theme',
-        stagePadding: 0,
-        nextBtnText: this.$t('next'),
-        prevBtnText: this.$t('previous'),
-        doneBtnText: this.$t('close'),
-        onDestroyed: () => {
-          this.driverActive = false
-          this._startMapping()
-        },
-        onPopoverRender: (popover, {config, state}) => {
-          if (state.activeIndex === 0) {
-            const popoverElement = document.querySelector('.driver-popover')
-            if (popoverElement) {
-              setTimeout(()=>{
-                popoverElement.style.top = '25%'
-                popoverElement.style.bottom = 'auto'
-                popoverElement.style.left = 'calc(2% + 0.2rem)'
-                popoverElement.style.right = 'auto'
-              }, 20)
-            }
-          }
-        }
-      }
-      const steps = [
-        {
-          element: '#v-step-1',
-          popover: {
-            description: this.$t('driverTxt1'),
-            side: 'left',
-            align: 'center'
-          }
-        },
-        {
-          element: '#v-step-2',
-          popover: {
-            description: this.$t('driverTxt2'),
-            side: 'top',
-            align: 'start'
-          }
-        },
-        {
-          element: '#v-step-3',
-          popover: {
-            description: this.$t('driverTxt3'),
-            side: 'top',
-            align: 'end'
-          }
-        }
-      ];
-      this.driver = driver({
-        ...config,
-        steps
-      })
-      this.driver.drive()
-    },
     // 开始建图
     async _startMapping () {
       try {
@@ -316,7 +261,6 @@ export default {
     },
     // 打点
     addPoint () {
-      if (this.driverActive) return
       this.dialogVisible = true
       this.dataForm.stationCode = 'B' + (this.keyPoints.length + 1)
       const na = this.$i18n.locale === 'en-us' ? 'Work point ' : '工作点'
@@ -371,7 +315,6 @@ export default {
     },
     stopMappingConfirm () {
       if (this.autoLoopEnable !== '1') return
-      if (this.driverActive) return
       this.$confirm(this.$t('sureendbuilding'), this.$t('Prompt'), {
         confirmButtonText: this.$t('Confirm'),
         cancelButtonText: this.$t('Cancel'),