引导

src/pages/modules/building.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="page_container">
-    
-    <gl-map ref="glMap"/>
+    <div id="v-step-1" class="map_container">
+      <gl-map ref="glMap"/>
+    </div>
     <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="10"><button id="v-step-2" 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>
+          <button id="v-step-3" class="button_control" style="margin-left: 10px" :disabled="disabled" @click="stopMappingConfirm"><p>结束建图</p></button>
         </el-row>
       </el-col>
     </el-row>
@@ -49,15 +50,14 @@
 
 <script>
 import GlMap from './gl-map.vue'
-// import PointCloudMap from './point-cloud-map.vue'
-// import { startMapping, stopMapping, getMappingStatus } from '../../config/mork.js'
+import { driver } from 'driver.js'
+import 'driver.js/dist/driver.css'
 import { startMapping, stopMapping, getMappingStatus, setStation, oneClickDeployment, abandonMapping } from '../../config/getData.js'
 import { mapGetters } from 'vuex'
 export default {
   name: 'ModuleBuilding',
   components: {
-    GlMap,
-    // PointCloudMap
+    GlMap
   },
   beforeRouteLeave (to, from, next) {
     if (this.needsConfirmation) {
@@ -100,6 +100,8 @@ export default {
   },
   data () {
     return {
+      driver: null,
+      driverActive: true,
       needsConfirmation: true,
       mapName: '',
       dialogVisible: false,
@@ -135,7 +137,78 @@ export default {
   created () {
     this._startMapping()
   },
+  mounted() {
+    // 初始化并启动引导
+    this.$nextTick(() => {
+      this.initGuide()
+    })
+  },
   methods: {
+    /* eslint-disable */
+    initGuide() {
+      const config = {
+        overlayOpacity: 0.7,
+        popoverClass: 'driverjs-theme',
+        stagePadding: 0,
+        nextBtnText: '下一步',
+        prevBtnText: '上一步',
+        doneBtnText: '完成',
+        onNextClick: (element, step) => {
+          if (step.element === '#v-step-3') {
+            this.driverActive = false
+          }
+          this.driver.moveNext()
+        },
+        onCloseClick: () => {
+          this.driverActive = false
+          this.driver.destroy()
+        },
+        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: '当前车辆扫描的周围环境，拉动车辆将开始记录行走路线',
+            side: 'left',
+            align: 'center'
+          }
+        },
+        {
+          element: '#v-step-2',
+          popover: {
+            description: '移动到工位点时，点击打点按钮记录当前车辆所在位置为工位点。',
+            side: 'top',
+            align: 'start'
+          }
+        },
+        {
+          element: '#v-step-3',
+          popover: {
+            description: '完成建图，点击结束建图按钮，等待地图自动生成。',
+            side: 'top',
+            align: 'end'
+          }
+        }
+      ];
+      this.driver = driver({
+        ...config,
+        steps
+      })
+      this.driver.drive()
+    },
     show (e) {
       // 关闭中文keyboard
       let arr = document.querySelectorAll('.hg-theme-default')
@@ -203,6 +276,7 @@ export default {
     },
     // 打点
     addPoint () {
+      if (this.driverActive) return
       this.dialogVisible = true
       this.dataForm.stationCode = 'B' + (this.keyPoints.length + 1)
       this.dataForm.stationName = '工作点' + (this.keyPoints.length + 1)
@@ -234,6 +308,7 @@ export default {
       }
     },
     stopMappingConfirm () {
+      if (this.driverActive) return
       this.$confirm('确定是否结束建图?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -360,6 +435,11 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+.map_container
+  position relative
+  width 100%
+  height calc(100% - .5rem)
+  margin-bottom .14rem
 .message
   min-width 380px
   border 1px solid #e1f3d8

src/pages/modules/gl-map.vue

@@ -457,8 +457,7 @@ export default {
 .point-cloud-map
   position relative
   width 100%
-  height calc(100% - .5rem)
-  margin-bottom .14rem
+  height 100%
   background-color rgba(4, 33, 58, 70%)
   box-shadow inset 1px 1px 7px 2px #4d9bcd
   overflow hidden