接口

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 class="relative elec-qty-wrap">
-            <div class="absolute elec-qty" style="width: 50%"></div>
+          <div v-if="JSON.stringify(topInfo) !== '{}'" class="state-item">{{ topInfo.state }}</div>
+          <div v-if="JSON.stringify(topInfo) !== '{}'" class="relative elec-qty-wrap" :class="{'elec-wraning': topInfo.batteryPower <= 40}">
+            <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)
     }
   }
 }