任务链

src/main.js

@@ -5,7 +5,7 @@ import store from './vuex/store'
 import './style/reset.css'
 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 } from 'element-ui'
+import { Row, Col, Button, Icon, Dialog, Form, FormItem, Input, Select, Option, Table, TableColumn, Tabs, TabPane, Popover, Loading, MessageBox, Message, Steps, Step } from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import './style/common.styl'
 import i18n from './i18n/i18n'
@@ -31,6 +31,8 @@ Vue.use(Tabs)
 Vue.use(TabPane)
 Vue.use(Popover)
 Vue.use(Loading)
+Vue.use(Steps)
+Vue.use(Step)
 Vue.prototype.$confirm = MessageBox.confirm
 Vue.prototype.$message = Message
 Vue.use(VueTouchKeyboard)

src/pages/modules/map.vue

@@ -172,7 +172,8 @@ export default {
       }
       return new Promise((resolve, reject) => {
         const img = new Image()
-        img.src = `${this.$store.getters.baseUrl}${this.mapData.mapImageAddress}`
+        const urlHost = process.env.VUE_APP_API_BASE_URL
+        img.src = `${urlHost}${this.mapData.mapImageAddress}`
         // img.src = this.mapData.mapImageAddress
         img.onload = () => {
           this.cachedImages.map = img

src/pages/shells/index.vue

@@ -35,7 +35,9 @@
       <router-view></router-view>
     </el-row>
     <div class="task-tips">
-      <div class="task-tips-t">A<i class="el-icon-right"></i>B<i class="el-icon-right"></i>C<i class="el-icon-right"></i>D</div>
+      <el-steps v-if="JSON.stringify(topInfo) !== '{}'" :active="currentStep" simple>
+        <el-step v-for="(e, i) in taskSeq" :key="i" :title="e" icon="el-icon-location"></el-step>
+      </el-steps>
     </div>
     <login-modal v-if="loginVisible" ref="loginModal"/>
     <config-modal v-if="configVisible" ref="configModal"/>
@@ -56,24 +58,28 @@ export default {
     return {
       timer: null,
       topInfo: {},
-      topInfo1: {
-        batteryPower: -1.0,
-        exceptionInfo: {
-          exception: ['重定位失败,检查环境或标记是否有变化.', '定位超时，尝试移动小车位置后重试.'],
-          exceptionCodes: [1, 17179869185, 1335734829057]
-        },
-        id: '1', // 车号ID
-        ip: '192.168.100.82', // 车辆IP
-        isManual: false, // 是否是手动，true是手动,false是自动
-        mapId: 39, // 地图ID
-        mapName: 'apt_map_1753078481180', // 地图名称
-        name: 'V1', // 车辆名称
-        state: '未知状态', // 车辆状态
-        stateId: 7, // 车辆状态ID
-        theta: 0.9073792099952698, // 车辆航向角
-        x: 0.004027, // 车辆x坐标
-        y: -0.001812 // 车辆y坐标
-      },
+      // topInfo: {
+      //   batteryPower: -1.0,
+      //   exceptionInfo: {
+      //     exception: ['重定位失败,检查环境或标记是否有变化.', '定位超时，尝试移动小车位置后重试.', '定位超时，尝试移动小车位置后重试.', '定位超时，尝试移动小车位置后重试.'],
+      //     exceptionCodes: [1, 17179869185, 1335734829057]
+      //   },
+      //   id: '1', // 车号ID
+      //   ip: '192.168.100.82', // 车辆IP
+      //   isManual: false, // 是否是手动，true是手动,false是自动
+      //   mapId: 39, // 地图ID
+      //   mapName: 'apt_map_1753078481180', // 地图名称
+      //   name: 'V1', // 车辆名称
+      //   state: '未知状态', // 车辆状态
+      //   stateId: 7, // 车辆状态ID
+      //   theta: 0.9073792099952698, // 车辆航向角
+      //   x: 0.004027, // 车辆x坐标
+      //   y: -0.001812, // 车辆y坐标
+      //   task_seq: 'B1-C',
+      //   task_point: 'C'
+      // },
+      taskSeq: '',
+      currentStep: 0,
       loginVisible: false,
       configVisible: false
     }
@@ -94,6 +100,9 @@ export default {
     this.checkTextOverflow()
     window.addEventListener('resize', this.checkTextOverflow)
     // this.$store.dispatch('setAgvObj', this.topInfo)
+    // this.taskSeq = this.topInfo.task_seq.split('-')
+    // const target = this.topInfo.task_point
+    // this.currentStep = this.taskSeq.findIndex(item => item === target)
   },
   beforeDestroy () {
     window.removeEventListener('resize', this.checkTextOverflow)
@@ -142,6 +151,9 @@ export default {
     wsMessage (res) {
       clearTimeout(this.timer)
       this.topInfo = res.data
+      this.taskSeq = this.topInfo.task_seq.split('-')
+      const target = this.topInfo.task_point
+      this.currentStep = this.taskSeq.findIndex(item => item === target)
       this.$store.dispatch('setAgvObj', this.topInfo)
     },
     wsErr () {
@@ -217,20 +229,22 @@ export default {
   animation none
 .icon-warning
   font-size .18rem
-  color #e6a23c
+  color #e6bb3c
+  margin-right .05rem
 .error-tips-t
   display inline-block
   font-size .16rem
-  color #e6a23c
+  color #e6bb3c
 .task-tips
+  display flex
+  align-items: center;
   position fixed
   bottom 0
   left 0
   width 100%
   height .4rem
-  line-height .4rem
   padding 0 2%
-  background linear-gradient(90deg, #1DB8FF,#1DC5E1, #27C8B0,#819269, #E46355)
+  // background linear-gradient(90deg, #1DB8FF,#1DC5E1, #27C8B0,#819269, #E46355)
 .task-tips-t
   _font(.2rem, .4rem, #fff, ,center)
 .hud_left

src/style/common.styl

@@ -200,6 +200,22 @@
   font-size .16rem
 .el-message-box__content
   font-size .14rem
+.el-steps--simple
+  width 100%
+  padding 0
+  background transparent
+.el-step__head
+  display grid
+.el-step__head.is-finish, .el-step__head.is-wait
+  color #C0C4CC
+  border-color #0059a4
+.el-step__title.is-finish, .el-step__title.is-wait
+  color #C0C4CC
+.el-step__head.is-process
+  color #17ff09
+  border-color #17ff09
+.el-step__title.is-process
+  color #17ff09
 
 // button
 .button_control