引导

src/config/getData.js

@@ -40,10 +40,6 @@ export const getMapInfoByCode = () => get('mapInfo/getMapInfoByCode', {})
 export const queryMapAllStation = () => get('station/queryMapAllStation', {})
 export const getRouteInfo = () => get('routeInfo/getRouteInfo', {})
 // 下发任务
-export const relocate = (x, y, angle) => get('teaching/relocate', {
-  x: x,
-  y: y,
-  angle: angle
-})
+export const relocate = (x, y, angle) => post('teaching/relocate?x=' + x + '&y=' + y + '&angle=' + angle, {})
 // 关机重启
 export const rebootVehicle = () => get('vehicle/rebootVehicle', {})

src/main.js

@@ -7,8 +7,6 @@ import VueTouchKeyboard from 'vue-touch-keyboard'
 import 'vue-touch-keyboard/dist/vue-touch-keyboard.css'
 import { Row, Col, Button, Icon, Dialog, Form, FormItem, Input, Select, Option, Table, TableColumn, Tabs, TabPane, Popover, Loading, MessageBox, Message, Progress } from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-import VueTour from 'vue-tour'
-import 'vue-tour/dist/vue-tour.css'
 import './style/common.styl'
 import i18n from './i18n/i18n'
 import './config/rem.js'
@@ -36,7 +34,6 @@ Vue.use(Progress)
 Vue.prototype.$confirm = MessageBox.confirm
 Vue.prototype.$message = Message
 Vue.use(VueTouchKeyboard)
-Vue.use(VueTour)
 Vue.prototype.$post = post
 Vue.config.productionTip = false
 

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

src/style/common.styl

@@ -219,6 +219,74 @@
 .el-form-item__error
   font-size .16rem
 
+// driver
+.driver-popover.driverjs-theme {
+  background-color: #fde047;
+  color: #000;
+  padding: 40px 15px 15px 15px;
+}
+
+.driver-popover.driverjs-theme .driver-popover-title {
+  font-size: 20px;
+}
+
+.driver-popover.driverjs-theme .driver-popover-title,
+.driver-popover.driverjs-theme .driver-popover-description,
+.driver-popover.driverjs-theme .driver-popover-progress-text {
+  color: #000;
+  font-size: 18px;
+}
+
+.driver-popover.driverjs-theme button {
+  flex: 1;
+  text-align: center;
+  background-color: #000;
+  color: #ffffff;
+  border: 2px solid #000;
+  text-shadow: none;
+  font-size: 14px;
+  padding: 5px 8px;
+  border-radius: 6px;
+}
+
+.driver-popover.driverjs-theme button:hover {
+  background-color: #000;
+  color: #ffffff;
+}
+
+.driver-popover.driverjs-theme .driver-popover-navigation-btns {
+  justify-content: space-between;
+  gap: 3px;
+  font-size: 20px;
+}
+
+.driver-popover.driverjs-theme .driver-popover-close-btn {
+  font-size: 20px;
+  color: #000;
+  background-color: transparent;
+  border: 0;
+}
+
+.driver-popover.driverjs-theme .driver-popover-close-btn:hover {
+  color: #000;
+}
+
+.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
+  border-left-color: #fde047;
+}
+
+.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
+  border-right-color: #fde047;
+}
+
+.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
+  border-top-color: #fde047;
+}
+
+.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
+  border-bottom-color: #fde047;
+}
+
 // button
 .button_control
   _wh(100%, 0.36rem)