引导

package.json

@@ -10,8 +10,8 @@
   "dependencies": {
     "axios": "^1.11.0",
     "core-js": "^3.8.3",
+    "driver.js": "^1.3.6",
     "element-ui": "^2.15.14",
-    "hammerjs": "^2.0.8",
     "jsencrypt": "^3.3.2",
     "lodash": "^4.17.21",
     "pixi.js": "^8.12.0",
@@ -22,7 +22,6 @@
     "vue-i18n": "8.0.0",
     "vue-router": "3.5.2",
     "vue-touch-keyboard": "^0.3.2",
-    "vue-tour": "^2.0.0",
     "vuex": "3.6.2"
   },
   "devDependencies": {

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', {
+export const relocate = (x, y, angle) => post('teaching/relocate?x=' + x + '&y=' + y + '&angle=' + angle, {})
-  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">
-    
+    <div id="v-step-1" class="map_container">
-    <gl-map ref="glMap"/>
+      <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 { driver } from 'driver.js'
-// import { startMapping, stopMapping, getMappingStatus } from '../../config/mork.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,
+    GlMap
-    // PointCloudMap
   },
   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)
+  height 100%
-  margin-bottom .14rem
   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)

yarn.lock

@@ -1034,11 +1034,6 @@
   resolved "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.29.tgz#5a40109a1ab5f84d6fd8fc928b19f367cbe7e7b1"
   integrity sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==
 
-"@popperjs/core@^2.9.1":
-  version "2.11.8"
-  resolved "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
-  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
-
 "@sideway/address@^4.1.5":
   version "4.1.5"
   resolved "https://registry.npmmirror.com/@sideway/address/-/address-4.1.5.tgz#4bc149a0076623ced99ca8208ba780d65a99b9d5"
@@ -2837,6 +2832,11 @@ dotenv@^10.0.0:
   resolved "https://registry.npmmirror.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
   integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
 
+driver.js@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.npmmirror.com/driver.js/-/driver.js-1.3.6.tgz#de80839bb52aa77de2a53e9b4013210da8fc6793"
+  integrity sha512-g2nNuu+tWmPpuoyk3ffpT9vKhjPz4NrJzq6mkRDZIwXCrFhrKdDJ9TX5tJOBpvCTBrBYjgRQ17XlcQB15q4gMg==
+
 dunder-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
@@ -3612,11 +3612,6 @@ gzip-size@^6.0.0:
   dependencies:
     duplexer "^0.1.2"
 
-hammerjs@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.npmmirror.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
-  integrity sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==
-
 handle-thing@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmmirror.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
@@ -4122,11 +4117,6 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
-jump.js@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmmirror.com/jump.js/-/jump.js-1.0.2.tgz#e0641b47f40a38f2139c25fda0500bf28e43015a"
-  integrity sha512-oUkJJ/Y4ATU5qjkXBntCZSKctbSyS3ewe2jrLaUu/cc9jsQiAn0fnTUxQnZz3mJdDdem1Q279zrD6h3n+Cgxtg==
-
 keyv@^4.5.3:
   version "4.5.4"
   resolved "https://registry.npmmirror.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
@@ -6274,17 +6264,7 @@ vue-touch-keyboard@^0.3.2:
   dependencies:
     babel-runtime "^6.26.0"
 
-vue-tour@^2.0.0:
+vue@^2.6.14:
-  version "2.0.0"
-  resolved "https://registry.npmmirror.com/vue-tour/-/vue-tour-2.0.0.tgz#aa4489cfc9f9090ca57d3208a074010f3be8ec05"
-  integrity sha512-vhKzqdhunQ3EoO1733UxhOB389u3EKv2X8JqYhX4tIq4ilqlZtnY3azPFBYPFmnAqHn5RyZBrP2CpqSaxTs8og==
-  dependencies:
-    "@popperjs/core" "^2.9.1"
-    hash-sum "^2.0.0"
-    jump.js "^1.0.2"
-    vue "^2.6.12"
-
-vue@^2.6.12, vue@^2.6.14:
   version "2.7.16"
   resolved "https://registry.npmmirror.com/vue/-/vue-2.7.16.tgz#98c60de9def99c0e3da8dae59b304ead43b967c9"
   integrity sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==