接口

src/config/getData.js

@@ -6,12 +6,8 @@ export const authlogin = (username, password) => post('auth/login', {
   password: password
 })
 // 建图
-export const startMapping = (na) => post('teaching/startMapping', {
+export const startMapping = (na) => post('teaching/startMapping?mapName=' + na, {})
-  mapName: na
+export const setStation = (sn) => post('teaching/setStation?stationName=' + sn, {})
-})
-export const setStation = (sn) => post('teaching/setStation', {
-  stationName: sn
-})
 export const stopMapping = () => post('teaching/stopMapping', {})
 export const getLocalMaps = () => post('teaching/getLocalMaps', {})
 export const synchronzieMap = (map) => post('teaching/synchronzieMap', {
@@ -29,8 +25,9 @@ export const queryTaskChain = () => post('api/operate/queryTaskChain', {})
 export const sendTask = (data) => post('api/operate/sendTask', {
   data: data
 })
-export const saveTask = (data) => post('api/operate/saveTask', {
+export const saveTask = (data, chain) => post('api/operate/saveTask', {
-  data: data
+  data: data,
+  chain_name: chain
 })
 export const cancelTask = () => post('api/operate/cancelTask', {})
 export const deleteTaskChain = (id) => post('api/operate/deleteTaskChain', {

src/config/websocket.js

@@ -1,5 +1,4 @@
-// import { Message } from 'element-ui'
+
-import { toast } from './utils.js'
 // import { getToken } from '@/utils/authToken' // 与后端的协商，websocket请求需要带上token参数
 let websock = null
 let messageCallback = null
@@ -37,7 +36,7 @@ function websocketclose (e) {
   // e.code === 1000  表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
   // e.code !== 1000  表示非正常关闭。
   if (e && e.code !== 1000) {
-    toast('server error')
+    this.$message.error('server error')
     errorCallback()
     // // 如果需要设置异常重连则可替换为下面的代码，自行进行测试
     // if (tryTime < 10) {
@@ -60,7 +59,7 @@ function websocketOpen (e) {
 // 初始化weosocket
 function initWebSocket () {
   if (typeof (WebSocket) === 'undefined') {
-    toast('您的浏览器不支持WebSocket，无法获取数据')
+    this.$message.error('您的浏览器不支持WebSocket，无法获取数据')
     return false
   }
   // ws请求完整地址

src/pages/modules/device.vue

@@ -58,13 +58,18 @@
         </el-row>
       </el-col>
     </el-row>
+    <save-chain v-if="saveVisible" ref="saveChain" @dataFormSubmit="dataFormSubmit"/>
     <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
   </div>
 </template>
 
 <script>
+import SaveChain from './save-chain.vue'
 import { queryStation, queryTaskChain, sendTask, saveTask, cancelTask, deleteTaskChain, updateStation } from '@config/getData.js'
 export default {
+  components: {
+    SaveChain
+  },
   data () {
     return {
       activeName: 'zdy',
@@ -82,7 +87,8 @@ export default {
       options: {
         useKbEvents: false,
         preventClickEvent: false
-      }
+      },
+      saveVisible: false
     }
   },
   mounted () {
@@ -225,18 +231,23 @@ export default {
     },
     // 保存任务
     async _saveTask () {
-      this.disabled = true
       if (!this.newData.length) {
-        this.disabled = false
         return
       }
+      this.saveVisible = true
+      this.$nextTick(() => {
+        this.$refs.saveChain.init()
+      })
+    },
+    async dataFormSubmit (data) {
+      this.disabled = true
       try {
         this.loading = this.$loading({
           lock: true,
           spinner: 'el-icon-loading',
           background: 'rgba(0, 0, 0, 0.6)'
         })
-        let res = await saveTask(this.newData)
+        let res = await saveTask(this.newData, data)
         if (res) {
           this.$message(res.message)
           this._queryStation()

src/pages/modules/save-chain.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-dialog
+    title="设置"
+    :visible.sync="dialogVisible"
+    width="50%"
+    :before-close="handleClose">
+    <el-form :model="dataForm" ref="dataForm" :rules="dataRule" size="mini">
+      <el-form-item label="任务链名称" prop="chain">
+        <el-input placeholder="请输入任务链名称" v-model="dataForm.chain" id="chain" @focus="show" data-layout="normal"></el-input>
+      </el-form-item>
+    </el-form>
+    <el-row type="flex" justify="space-around" style="margin-top: .3rem">
+      <el-col :span="7"><button class="button_control button_control_disabled" @click="exitUser"><p>{{$t('Cancel')}}</p></button></el-col>
+      <el-col :span="7"><button class="button_control" @click="dataFormSubmit"><p>{{$t('Save')}}</p></button></el-col>
+    </el-row>
+    <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      dialogVisible: false,
+      dataForm: {
+        chain: ''
+      },
+      dataRule: {
+        chain: [
+          { required: true, message: '任务链名称不能为空', trigger: 'blur' }
+        ]
+      },
+      visible: false,
+      layout: 'normal',
+      input: null,
+      options: {
+        useKbEvents: false,
+        preventClickEvent: false
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.dialogVisible = true
+      this.dataForm.chain = ''
+    },
+    exitUser () {
+      this.dialogVisible = false
+      this.visible = false
+    },
+    dataFormSubmit () {
+      if (this.dataForm.chain === '') {
+        this.$message.error('任务链名称不能为空')
+        return
+      }
+      this.dialogVisible = false
+      this.visible = false
+      this.$emit('dataFormSubmit', this.dataForm.chain)
+    },
+    handleClose (done) {
+      this.visible = false
+      done()
+    },
+    show (e) {
+      // 关闭中文keyboard
+      let arr = document.querySelectorAll('.hg-theme-default')
+      arr.forEach((ele) => {
+        ele.style.visibility = 'hidden'
+      })
+      this.input = e.target
+      this.layout = e.target.dataset.layout
+      if (!this.visible) {
+        this.visible = true
+      }
+    },
+    hide () {
+      this.visible = false
+    },
+    accept () {
+      this.hide()
+    },
+    next () {
+      let inputs = document.querySelectorAll('input')
+      let found = false;
+      [].forEach.call(inputs, (item, i) => {
+        if (!found && item === this.input && i < inputs.length - 1 && this.input.dataset.next === '1') {
+          found = true
+          this.$nextTick(() => {
+            inputs[i + 1].focus()
+          })
+        }
+      })
+      if (!found) {
+        this.input.blur()
+        this.hide()
+      }
+    }
+  }
+}
+</script>

src/pages/shells/index.vue

@@ -7,11 +7,16 @@
       <el-col :span="12">
         <el-row type="flex" justify="end" align="middle">
           <div class="state-item">自动模式</div>
-          <div class="state-item">执行中</div>
+          <div v-if="JSON.stringify(topInfo) !== '{}'" class="state-item">{{ topInfo.state }}</div>
-          <div class="relative elec-qty-wrap">
+          <div v-if="JSON.stringify(topInfo) !== '{}'" class="relative elec-qty-wrap" :class="{'elec-wraning': topInfo.batteryPower <= 40}">
-            <div class="absolute elec-qty" style="width: 50%"></div>
+            <div class="absolute elec-qty" :style="{ width: topInfo.batteryPower !== -1 ? `calc(100% - ${topInfo.batteryPower}%)` : '100%' }"></div>
             <div class="absolute elec-qty-border"></div>
-            <div class="elec-txt">50%</div>
+            <div class="elec-txt">{{topInfo.batteryPower !== -1 ? `${topInfo.batteryPower}%` : ''}}</div>
+          </div>
+          <div v-else class="relative elec-qty-wrap elec-wraning">
+            <div class="absolute elec-qty" style="width: 100%"></div>
+            <div class="absolute elec-qty-border"></div>
+            <div class="elec-txt"></div>
           </div>
           <i class="el-icon-user-solid icon-user" :style="{'color': $store.getters.userInfo === 'true' ? '#00ff29' : '#737f92'}" @click="loginModalHandle"></i>
           <i class="el-icon-s-tools icon-tools" @click="configModalHandle"></i>
@@ -40,6 +45,7 @@
 <script>
 import LoginModal from './login-modal.vue'
 import ConfigModal from './config-modal.vue'
+import { sendWebsocket, closeWebsocket } from '@/config/websocket.js'
 export default {
   components: {
     LoginModal,
@@ -47,16 +53,26 @@ export default {
   },
   data () {
     return {
+      timer: null,
+      topInfo: {},
       loginVisible: false,
       configVisible: false
     }
   },
+  created () {
+    this._queryHead()
+  },
   mounted () {
     this.checkTextOverflow()
     window.addEventListener('resize', this.checkTextOverflow)
   },
   beforeDestroy () {
     window.removeEventListener('resize', this.checkTextOverflow)
+    clearTimeout(this.timer)
+    closeWebsocket(true)
+  },
+  destroyed () {
+    clearTimeout(this.timer)
   },
   methods: {
     // 滚动区域
@@ -88,6 +104,21 @@ export default {
       this.$nextTick(() => {
         this.$refs.configModal.init()
       })
+    },
+    _queryHead () {
+      let url = this.$store.getters.baseUrl
+      url = url.substring(7)
+      let sid = this.$store.getters.userInfo === 'true' ? 1 : 2
+      sendWebsocket(`ws://${url}/webSocket/VehicleInfo/${sid}`, {}, this.wsMessage, this.wsErr)
+    },
+    wsMessage (res) {
+      clearTimeout(this.timer)
+      this.topInfo = res.data
+    },
+    wsErr () {
+      this.timer = setTimeout(() => {
+        this._queryHead()
+      }, 10000)
     }
   }
 }

src/vuex/modules/com.js

@@ -1,12 +1,12 @@
 import * as types from '../types'
 import { getStore, setStore } from '@config/utils.js'
 
-const baseUrl = process.env.NODE_ENV === 'development' ? 'http://47.98.105.245:8018' : 'http://localhost:8018'
+const baseUrl = process.env.NODE_ENV === 'development' ? 'http://localhost:8011' : 'http://localhost:8011'
 const setTime = '5000'
 const username = 'user'
 const password = '123456'
 const state = {
-  baseUrl: getStore('baseUrl') || baseUrl,
+  baseUrl: baseUrl,
   setTime: getStore('setTime') || setTime,
   defaultUsername: getStore('defaultUsername') || username,
   defaultPassword: getStore('defaultPassword') || password,