接口

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)
     }
   }
 }