引导

2025-08-20 16:48:08 +08:00
parent 5dc0b64860
commit c413f420b5
7 changed files with 165 additions and 46 deletions
--- a/package.json
+++ b/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": {
--- a/src/config/getData.js
+++ b/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', {})
--- a/src/main.js
+++ b/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

--- a/src/pages/modules/building.vue
+++ b/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
--- a/src/pages/modules/gl-map.vue
+++ b/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
--- a/src/style/common.styl
+++ b/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)
--- a/yarn.lock
+++ b/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:
-  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:
+vue@^2.6.14:
  version "2.7.16"
  resolved "https://registry.npmmirror.com/vue/-/vue-2.7.16.tgz#98c60de9def99c0e3da8dae59b304ead43b967c9"
  integrity sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==