动画联调

src/utils/request.js

@@ -1,12 +1,12 @@
 import axios from 'axios'
 import { Message } from 'element-ui'
 import store from '@/store'
-import { tansParams } from "@/utils/zk";
+import { tansParams } from '@/utils/zk'
 // create an axios instance
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
-  timeout: 5000 // request timeout
+  timeout: 10000 // request timeout
 })
 
 // request interceptor
@@ -15,10 +15,10 @@ service.interceptors.request.use(
   config => {
     // do something before request is sent
     if (config.method === 'get' && config.params) {
-      let url = config.url + '?' + tansParams(config.params);
-      url = url.slice(0, -1);
-      config.params = {};
-      config.url = url;
+      let url = config.url + '?' + tansParams(config.params)
+      url = url.slice(0, -1)
+      config.params = {}
+      config.url = url
     }
     if (store.getters.token) {
       // let each request carry token
@@ -32,7 +32,7 @@ service.interceptors.request.use(
     // do something with request error
     console.log(error) // for debug
     return Promise.reject(error)
-  },
+  }
 )
 
 // response interceptor
@@ -41,7 +41,7 @@ service.interceptors.response.use(
    * If you want to get http information such as headers or status
    * Please return  response => response
   */
-   
+
   /**
    * Determine the request status by custom code
    * Here is just an example
@@ -55,22 +55,21 @@ service.interceptors.response.use(
         message: res.msg || 'Error',
         type: 'error',
         duration: 5 * 1000
-      })      
+      })
     } else {
       return res
-    }
-    
+    }
   },
- 
+
   error => {
     console.log('err' + error)
-    let { message } = error;
-    if (message == "Network Error") {
-      message = "后端接口连接异常";
-    } else if (message.includes("timeout")) {
-      message = "系统接口请求超时";
-    } else if (message.includes("Request failed with status code")) {
-      message = "系统接口" + message.substr(message.length - 3) + "异常";
+    let { message } = error
+    if (message == 'Network Error') {
+      message = '后端接口连接异常'
+    } else if (message.includes('timeout')) {
+      message = '系统接口请求超时'
+    } else if (message.includes('Request failed with status code')) {
+      message = '系统接口' + message.substr(message.length - 3) + '异常'
     }
     Message({
       message: message,

src/views/power-change-monitoring/components/BinInfomation.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="bin-bottom">
     <div class="bin-carbg">
-      <img src="../assets/car1x.png" class="car" />
-      <div class="battery-yellow" :class="yellowBattery" v-if="BatteryOnCar">
+      <img src="../assets/car1x.png" class="car">
+      <div v-if="BatteryOnCar" class="battery-yellow" :class="yellowBattery">
         <div class="battery-yellow-img">
           <img src="../assets/yellow.png">
         </div>
@@ -13,8 +13,8 @@
       </div>
     </div>
     <div class="bin-battery">
-      <div class="battery-list" v-for="(item, index) in storeInfoList" :key="index">
-        <div class="battery-listbg" :class="[greenBattery(index),setBatteryBg(index)]" v-if="Carconnection(index)">
+      <div v-for="(item, index) in storeInfoList" :key="index" class="battery-list">
+        <div v-if="Carconnection(index)" class="battery-listbg" :class="[greenBattery(index),setBatteryBg(index)]">
           <template v-if="step >= 3 && swapCode === index">
             <p v-show="swapSoc">SOC  {{ swapSoc }}%</p>
             <p v-show="swapCurrent">{{ swapCurrent }} A</p>
@@ -24,21 +24,21 @@
             <p v-show="item.current">{{ item.current }} A</p>
           </template>
         </div>
-        <div class="battery-defaultcls defaultbg" v-if="swapCode === index">
-            <p v-show="item.soc && yellowBattery.yellowshow">SOC  {{ item.soc }}%</p>
-            <p v-show="item.current && yellowBattery.yellowshow">{{ item.current }} A</p>
+        <div v-if="swapCode === index" class="battery-defaultcls defaultbg">
+          <p v-show="item.soc && yellowBattery.yellowshow">SOC  {{ item.soc }}%</p>
+          <p v-show="item.current && yellowBattery.yellowshow">{{ item.current }} A</p>
         </div>
         <div class="battery-liststatus">
-          <img src="../assets/status0.png" v-show="item.chargerInfoVo.chgState === 0">
-          <img src="../assets/status1.png" v-show="item.chargerInfoVo.chgState === 1">
-          <img src="../assets/status2.png" v-show="item.chargerInfoVo.chgState === 2">
-          <img src="../assets/status3.png" v-show="item.chargerInfoVo.chgState === 3">
+          <img v-show="item.chargerInfoVo.chgState === 0" src="../assets/status0.png">
+          <img v-show="item.chargerInfoVo.chgState === 1" src="../assets/status1.png">
+          <img v-show="item.chargerInfoVo.chgState === 2" src="../assets/status2.png">
+          <img v-show="item.chargerInfoVo.chgState === 3" src="../assets/status3.png">
         </div>
       </div>
 
     </div>
     <div class="battery-num">
-      <img src="../assets/nostatus.png" v-for="(index) in 8" :key="index">
+      <img v-for="(index) in 8" :key="index" src="../assets/nostatus.png">
     </div>
   </div>
 </template>
@@ -46,7 +46,7 @@
 <script>
 /*
     * @step：动画步骤
-    * @BatteryOnCar：控制车上亏电电池是否亮起 
+    * @BatteryOnCar：控制车上亏电电池是否亮起
     * @storeInfoList：充电仓电池列表
     * @swapCode：换电电池编号
     * @connectionState：车站连接状态 1已连接 0断开连接
@@ -54,121 +54,119 @@
     * @swapSoc：绿电池缓存SOC,
 */
 export default {
-  props: ["BatteryOnCar","storeInfoList","swapCode","connectionState","swapCurrent","swapSoc","step"],
+  props: ['BatteryOnCar', 'storeInfoList', 'swapCode', 'connectionState', 'swapCurrent', 'swapSoc', 'step'],
   data() {
     return {
-      
-    };
-  },
-  watch:{
-    
+
+    }
   },
-  computed:{
-    //设置黄电池动画
-    yellowBattery:{
-      get(){
-        let cls={}
-        if(this.step === 0 || this.step === 1) {
-          cls['onestepPotion'] =true
-        }else if(this.step === 2){
-          cls['onestepPotion'] =true
-          cls['yellowAnimationOne']=true
-        }else if(this.step === 3){
-          cls['twostepPotion']=true
-        }
-        else if(this.step === 4){
-          cls['twostepPotion']=true
-          if(this.swapCode === 1){
-            cls['yellowAnimationSwapone']=true
-          }else if(this.swapCode === 2){
-            cls['SwaptwoPotion']=true
-            cls['yellowAnimationSwaptwo']=true
-          }else if(this.swapCode === 0){
-            cls['SwapZeroPotion']=true
-            cls['yellowAnimationSwapZero']=true
-          }else if(this.swapCode === 4){
-            cls['SwapthreePotion']=true
-            cls['yellowAnimationSwapthree']=true
-          }else if(this.swapCode === 5){
-            cls['SwapfourPotion']=true
-            cls['yellowAnimationSwapfour']=true
-          }else if(this.swapCode === 6){
-            cls['SwapfivePotion']=true
-            cls['yellowAnimationSwapfive']=true
-          }else if(this.swapCode === 7){
-            cls['SwapsixPotion']=true
-            cls['yellowAnimationSwapsix']=true
+  computed: {
+    // 设置黄电池动画
+    yellowBattery: {
+      get() {
+        const cls = {}
+        if (this.step === 0 || this.step === 1) {
+          cls['onestepPotion'] = true
+        } else if (this.step === 2) {
+          cls['onestepPotion'] = true
+          cls['yellowAnimationOne'] = true
+        } else if (this.step === 3) {
+          cls['twostepPotion'] = true
+        } else if (this.step === 4) {
+          cls['twostepPotion'] = true
+          if (this.swapCode === 1) {
+            cls['yellowAnimationSwapone'] = true
+          } else if (this.swapCode === 2) {
+            cls['SwaptwoPotion'] = true
+            cls['yellowAnimationSwaptwo'] = true
+          } else if (this.swapCode === 0) {
+            cls['SwapZeroPotion'] = true
+            cls['yellowAnimationSwapZero'] = true
+          } else if (this.swapCode === 4) {
+            cls['SwapthreePotion'] = true
+            cls['yellowAnimationSwapthree'] = true
+          } else if (this.swapCode === 5) {
+            cls['SwapfourPotion'] = true
+            cls['yellowAnimationSwapfour'] = true
+          } else if (this.swapCode === 6) {
+            cls['SwapfivePotion'] = true
+            cls['yellowAnimationSwapfive'] = true
+          } else if (this.swapCode === 7) {
+            cls['SwapsixPotion'] = true
+            cls['yellowAnimationSwapsix'] = true
           }
         }
         return cls
       },
-      set(val){
+      set(val) {
         return val
       }
-    },
+    }
+  },
+  watch: {
+
+  },
+  mounted() {
+
   },
   methods: {
-    //设置车辆断开状态
-    Carconnection(index){
-      if(this.swapCode === index && this.connectionState === 0 && this.step >=3){
+    // 设置车辆断开状态
+    Carconnection(index) {
+      if (this.swapCode === index && this.connectionState === 0 && this.step >= 3) {
         return false
-      }else{
+      } else {
         return true
       }
     },
-    //设置换电电池背景
-    setBatteryBg(index){
-      if(this.swapCode === index && this.step !== 5){
-          return 'lightbg'
-      }else{
+    // 设置换电电池背景
+    setBatteryBg(index) {
+      if (this.swapCode === index && this.step !== 5) {
+        return 'lightbg'
+      } else {
         return 'defaultbg'
       }
     },
-    //设置绿电池动画
-    greenBattery(index){
-      let cls={}
-      if(this.step === 3 && this.swapCode === index){
-        if(this.swapCode === 1){
-          cls['greenAnimationOne']=true
-        }else if(this.swapCode ===2){
-          cls['greenAnimationTwo']=true
-        }else if(this.swapCode ===0){
-          cls['greenAnimationZero']=true
-        }else if(this.swapCode ===4){
-          cls['greenAnimationThree']=true
-        }else if(this.swapCode ===5){
-          cls['greenAnimationFour']=true
-        }else if(this.swapCode ===6){
-          cls['greenAnimationFive']=true
-        }else if(this.swapCode ===7){
-          cls['greenAnimationSix']=true
-        }
-        
+    // 设置绿电池动画
+    greenBattery(index) {
+      const cls = {}
+      if (this.step === 3 && this.swapCode === index) {
+        if (this.swapCode === 1) {
+          cls['greenAnimationOne'] = true
+        } else if (this.swapCode === 2) {
+          cls['greenAnimationTwo'] = true
+        } else if (this.swapCode === 0) {
+          cls['greenAnimationZero'] = true
+        } else if (this.swapCode === 4) {
+          cls['greenAnimationThree'] = true
+        } else if (this.swapCode === 5) {
+          cls['greenAnimationFour'] = true
+        } else if (this.swapCode === 6) {
+          cls['greenAnimationFive'] = true
+        } else if (this.swapCode === 7) {
+          cls['greenAnimationSix'] = true
+        }
       }
-      if(this.step === 4 && this.swapCode === index){
-        if(this.swapCode === 1){
-          cls['greenStepOnePotion']=true
-        } else if(this.swapCode ===2){
-          cls['greenStepTwoPotion']=true
-        }else if(this.swapCode ===0){
-          cls['greenStepZeroPotion']=true
-        }else if(this.swapCode === 4){
-          cls['greenStepThreePotion']=true
-        }else if(this.swapCode === 5){
-          cls['greenStepFourPotion']=true
-        }else if(this.swapCode === 6){
-          cls['greenStepFivePotion']=true
-        }else if(this.swapCode === 7){
-          cls['greenStepSixPotion']=true
+      if (this.step === 4 && this.swapCode === index) {
+        if (this.swapCode === 1) {
+          cls['greenStepOnePotion'] = true
+        } else if (this.swapCode === 2) {
+          cls['greenStepTwoPotion'] = true
+        } else if (this.swapCode === 0) {
+          cls['greenStepZeroPotion'] = true
+        } else if (this.swapCode === 4) {
+          cls['greenStepThreePotion'] = true
+        } else if (this.swapCode === 5) {
+          cls['greenStepFourPotion'] = true
+        } else if (this.swapCode === 6) {
+          cls['greenStepFivePotion'] = true
+        } else if (this.swapCode === 7) {
+          cls['greenStepSixPotion'] = true
         }
       }
       return cls
     }
-  },
-  mounted() {
-   
-  },
-};
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -457,12 +455,12 @@ export default {
     width: 73px;
     height: 36px;
     display: flex;
-    font-size: 13px;
+    font-size: 12px;
     font-weight: 600;
     display: flex;
     flex-direction: column;
   }
-  
+
   .battery-listbg p:first-child,.battery-defaultcls p:first-child {
     margin-top: 4px;
   }
@@ -484,8 +482,6 @@ export default {
     position: absolute;
   }
 
-
-
   .battery-list .battery-liststatus {
     width: 25px;
     height: 31px;
@@ -507,4 +503,4 @@ export default {
   width: 101px;
   height: 35px;
 }
-</style>
+</style>

src/views/power-change-monitoring/index.vue

@@ -2,76 +2,76 @@
   <div>
     <div class="box-first">
       <div class="video-box">
-        <canvas id="video-1"></canvas>
+        <canvas id="video-1" />
       </div>
       <div class="infolist">
         <div class="userlist">
           <ul>
             <li>
-              <UserItem title="用户名信息" name="USER INFORMATION"></UserItem>
+              <UserItem title="用户名信息" name="USER INFORMATION" />
               <label>驾驶员</label>
-              <pannel-item :value="driverInfo.name"></pannel-item>
+              <pannel-item :value="driverInfo.name" />
               <label>联系方式</label>
-              <pannel-item :value="driverInfo.mobile"></pannel-item>
+              <pannel-item :value="driverInfo.mobile" />
               <label>身份证号</label>
-              <pannel-item :value="driverInfo.cardNum"></pannel-item>
+              <pannel-item :value="driverInfo.cardNum" />
               <label>所属车队</label>
-              <pannel-item :value="driverInfo.motorcade"></pannel-item>
+              <pannel-item :value="driverInfo.motorcade" />
             </li>
             <li>
-              <UserItem title="车辆信息" name="VEHICLE INFORMATION"></UserItem>
+              <UserItem title="车辆信息" name="VEHICLE INFORMATION" />
               <span>
                 <label>车辆VIN码</label><label>{{ Carlink }}</label>
               </span>
-              <pannel-item :value="vehicleInfo.vin"></pannel-item>
+              <pannel-item :value="vehicleInfo.vin" />
               <div class="carinfo">
                 <p>
                   <label>车牌号</label>
-                  <pannel-item :value="vehicleInfo.plate"></pannel-item>
+                  <pannel-item :value="vehicleInfo.plate" />
                 </p>
                 <p>
                   <label>解锁状态</label>
-                  <pannel-item :value="Carlock"></pannel-item>
+                  <pannel-item :value="Carlock" />
                 </p>
               </div>
               <div class="carinfo">
                 <p>
                   <label>累计里程 (km)</label>
-                  <pannel-item :value="vehicleInfo.mileage"></pannel-item>
+                  <pannel-item :value="vehicleInfo.mileage" />
                 </p>
                 <p>
                   <label>上电状态</label>
-                  <pannel-item :value="Carbattery"></pannel-item>
+                  <pannel-item :value="Carbattery" />
                 </p>
               </div>
 
               <label>累计换电 (次)</label>
-              <pannel-item :value="vehicleInfo.swap"></pannel-item>
+              <pannel-item :value="vehicleInfo.swap" />
             </li>
             <li>
-              <UserItem title="电池信息" name="Battery INFORMATION"></UserItem>
+              <UserItem title="电池信息" name="Battery INFORMATION" />
               <label>电池编号</label>
-              <pannel-item :value="batteryInfo.sn"></pannel-item>
+              <pannel-item :value="batteryInfo.sn" />
               <label>电池仓</label>
-              <pannel-item :value="batteryInfo.space"></pannel-item>
+              <pannel-item :value="batteryInfo.space" />
               <div class="carinfo">
                 <P>
                   <label>换电电池SOC</label>
-                  <pannel-item :value="batteryInfo.swapSoc"></pannel-item>
+                  <pannel-item :value="batteryInfo.swapSoc" />
                 </P>
                 <P>
                   <label>车辆电池SOC</label>
-                  <pannel-item :value="batteryInfo.vehSoc"></pannel-item>
+                  <pannel-item :value="batteryInfo.vehSoc" />
                 </P>
               </div>
               <label>换电量(kWh)</label>
-              <pannel-item :value="batteryInfo.space"></pannel-item>
+              <pannel-item :value="batteryInfo.space" />
             </li>
           </ul>
           <div class="bin-info">
-            <!-- 
+            <!--
               * @step：动画步骤
-              * @BatteryOnCar：控制车上亏电电池是否亮起 
+              * @BatteryOnCar：控制车上亏电电池是否亮起
               * @storeInfoList：充电仓电池列表
               * @swapCode：换电电池编号
               * @connectionState：车站连接状态 1已连接 0断开连接
@@ -79,14 +79,14 @@
               * @swapSoc：绿电池缓存SOC,
             -->
             <BinInfomation
-              :BatteryOnCar="swapAnimationVo.soc"
-              :storeInfoList="storeInfoList"
-              :swapCode="swapAnimationVo.swapCode*1"
+              :battery-on-car="swapAnimationVo.soc"
+              :store-info-list="storeInfoList"
+              :swap-code="swapAnimationVo.swapCode*1-1"
               :step="swapAnimationVo.step"
-              :connectionState="swapAnimationVo.connectionState"
-              :swapSoc="swapAnimationVo.swapSoc"
-              :swapCurrent="swapAnimationVo.swapCurrent"
-            ></BinInfomation>
+              :connection-state="swapAnimationVo.connectionState"
+              :swap-soc="swapAnimationVo.swapSoc"
+              :swap-current="swapAnimationVo.swapCurrent"
+            />
           </div>
         </div>
       </div>
@@ -95,16 +95,17 @@
       <sub-title
         name="换电业务流程"
         statement="power exchange business process"
-      ></sub-title>
+      />
       <process-symbol
         :processtext="processtext"
-        :processDone="processDone"
-      ></process-symbol>
+        :process-done="processDone"
+      />
       <div class="process-details">
-        <div class="detail" v-for="(item, index) in processDone" :key="index">
+        <div v-for="(item, index) in processDone" :key="index" class="detail">
           <span
             class="process-state"
-            :style="{color: item === true ? 'rgb(4,220,223)' : 'rgb(69,85,115)',}">
+            :style="{color: item === true ? 'rgb(4,220,223)' : 'rgb(69,85,115)',}"
+          >
             <div v-if="swapProcess.validation === null && index === 0">待验证</div>
             <div v-else-if="swapProcess.validation && index === 0">
               {{ swapProcess.validation }}
@@ -132,52 +133,52 @@
           </span>
           <quarter-change
             :percent="percent[index]"
-            :processDeg="processDeg[index]"
-            :isDone="item"
+            :process-deg="processDeg[index]"
+            :is-done="item"
             :image="processImages[index]"
-          ></quarter-change>
+          />
         </div>
       </div>
     </div>
     <div class="box-three">
       <div class="exchange-statistics">
-        <sub-title name="换电信息" statement="Power Change Details"></sub-title>
+        <sub-title name="换电信息" statement="Power Change Details" />
         <div class="statistic-boxes">
           <statistic-item
             label="今日换电次数"
             :value="swapInfo.todaySwapFreq"
             unit="次"
-          ></statistic-item>
+          />
           <statistic-item
             label="今日换电量"
             :value="swapInfo.todayCapacity"
             unit="kWh"
-          ></statistic-item>
+          />
           <statistic-item
             label="累计换电次数"
             :value="swapInfo.swapFreq"
             unit="次"
-          ></statistic-item>
+          />
           <statistic-item
             label="累计换电量"
             :value="swapInfo.capacity"
             unit="kWh"
-          ></statistic-item>
+          />
           <statistic-item
             label="当前可换电池"
             :value="swapInfo.quantity"
             unit="块"
-          ></statistic-item>
+          />
           <statistic-item
             label="今日告警数"
             :value="swapInfo.todayAlarmFreq"
             unit="次"
-          ></statistic-item>
+          />
         </div>
       </div>
 
       <div class="exchange-records">
-        <sub-title name="换电记录" statement="Exchange Records"></sub-title>
+        <sub-title name="换电记录" statement="Exchange Records" />
         <div class="exchange-details">
           <div class="header-row">
             <span class="v-plate">车牌号</span>
@@ -185,7 +186,7 @@
             <span class="v-power">换电量</span>
             <span class="v-time">换电时间</span>
           </div>
-          <div class="record-row" v-for="item in carRecord" :key="item.id">
+          <div v-for="item in carRecord" :key="item.id" class="record-row">
             <span class="v-plate">{{ item.vehiclePlate }}</span>
             <span class="v-type">{{ item.modelName }}</span>
             <span class="v-power color-blue">{{ item.swapCapacity }}</span>
@@ -195,21 +196,17 @@
       </div>
 
       <div class="gate-details">
-        <sub-title name="告警记录" statement="ALARM LOG"></sub-title>
+        <sub-title name="告警记录" statement="ALARM LOG" />
         <div class="recordlist">
           <div class="recordtilte">
-            <span>告警代码</span><span>告警设备</span><span>告警信息</span
-            ><span>告警时间</span>
+            <span>告警代码</span><span>告警设备</span><span>告警信息</span><span>告警时间</span>
           </div>
           <div
-            class="recordinfo"
             v-for="item in alarmRecordList"
             :key="item.id"
+            class="recordinfo"
           >
-            <span>{{ item.code }}</span
-            ><span>{{ item.equipment }}</span
-            ><span>{{ item.info }}</span
-            ><span>{{ item.beginTime }}</span>
+            <span>{{ item.code }}</span><span>{{ item.equipment }}</span><span>{{ item.info }}</span><span>{{ item.beginTime }}</span>
           </div>
         </div>
       </div>
@@ -218,19 +215,19 @@
 </template>
 
 <script>
-import { swapInfo, swapRecord, alarmRecord } from "@/api/powerCharge";
-import wsUrl from "../../../vue.config.js";
-import UserItem from "./components/UserItem.vue";
-import PannelItem from "./components/PannelItem.vue";
-import BinInfomation from "./components/BinInfomation.vue";
-import SubTitle from "./components/SubTitle.vue";
-import ProcessSymbol from "./components/ProcessSymbol.vue";
-import QuarterChange from "./components/QuarterChange.vue";
-import StatisticItem from "./components/StatisticItem.vue";
-import "../../utils/jsmpeg.min";
-import { getToken} from '@/utils/auth'
+import { swapInfo, swapRecord, alarmRecord } from '@/api/powerCharge'
+import wsUrl from '../../../vue.config.js'
+import UserItem from './components/UserItem.vue'
+import PannelItem from './components/PannelItem.vue'
+import BinInfomation from './components/BinInfomation.vue'
+import SubTitle from './components/SubTitle.vue'
+import ProcessSymbol from './components/ProcessSymbol.vue'
+import QuarterChange from './components/QuarterChange.vue'
+import StatisticItem from './components/StatisticItem.vue'
+import '../../utils/jsmpeg.min'
+import { getToken } from '@/utils/auth'
 export default {
-  name: "PowerChangeMonitoring",
+  name: 'PowerChangeMonitoring',
   components: {
     UserItem,
     PannelItem,
@@ -238,285 +235,291 @@ export default {
     SubTitle,
     ProcessSymbol,
     QuarterChange,
-    StatisticItem,
+    StatisticItem
   },
   data() {
     return {
       ws: null,
-      //司机信息
+      // 司机信息
       driverInfo: {
-        name: "—",
-        mobile: "—",
-        cardNum: "—",
-        motorcade: "—",
+        name: '—',
+        mobile: '—',
+        cardNum: '—',
+        motorcade: '—'
       },
-      //车辆信息开始
+      // 车辆信息开始
       vehicleInfo: {
-        vin: "—",
-        plate: "—",
-        lockState: "—",
-        mileage: "—",
-        batteryState: "—",
-        swap: "—",
-        conState: 0,
+        vin: '—',
+        plate: '—',
+        lockState: '—',
+        mileage: '—',
+        batteryState: '—',
+        swap: '—',
+        conState: 0
       },
       batteryInfo: {
-        sn: "—",
-        vehSoc: "—",
-        space: "—",
-        swapSoc: "—",
-        swapCapacity: "—",
+        sn: '—',
+        vehSoc: '—',
+        space: '—',
+        swapSoc: '—',
+        swapCapacity: '—'
       },
-      //电池动画
-      swapAnimationVo:{
-        step:1,//动画步骤
-        soc:30,//车上电池SOC
-        transitCode:null,//中转仓编号
-        swapCode:0,//换电仓编号
-        connectionState:0, // 车站连接状态
-        swapSoc:0, //绿电池缓存数据
-        swapCurrent:0 //绿电池缓存数据
+      // 电池动画
+      swapAnimationVo: {
+        step: 0, // 动画步骤
+        soc: 30, // 车上电池SOC
+        transitCode: null, // 中转仓编号
+        swapCode: 0, // 换电仓编号
+        connectionState: 0, // 车站连接状态
+        swapSoc: 0, // 绿电池缓存数据
+        swapCurrent: 0 // 绿电池缓存数据
       },
-      storeInfoList:[],//电池列表和充电机状态列表
-      //电池动画结束
-      //第二部分动画开始
-      swapProcess:{
-        //第一步
-        validation:null,
-        valPercentage:null,
+      storeInfoList: [], // 电池列表和充电机状态列表
+      // 电池动画结束
+      // 第二部分动画开始
+      swapProcess: {
+        // 第一步
+        validation: null,
+        valPercentage: null,
         valAngle: null,
-        //第二步
+        // 第二步
         apply: null,
         applyPercentage: null,
         applyAngle: null,
-        //第三步
+        // 第三步
         begin: null,
         beginPercentage: null,
         beginAngle: null,
-        //第四步
-        swap:null,
+        // 第四步
+        swap: null,
         swapPercentage: null,
         swapAngle: null,
-        //第五步
-        end:null,
-        endPercentage:null,
-        endAngle: null,
+        // 第五步
+        end: null,
+        endPercentage: null,
+        endAngle: null
       },
       processtext: [
-        "车辆验证",
-        "发起换电申请",
-        "开始换电",
-        "更换电池",
-        "换电完成",
+        '车辆验证',
+        '发起换电申请',
+        '开始换电',
+        '更换电池',
+        '换电完成'
       ],
       processImages: [
-        "yewu1.png",
-        "yewu2.png",
-        "yewu3.png",
-        "yewu4.png",
-        "yewu5.png",
+        'yewu1.png',
+        'yewu2.png',
+        'yewu3.png',
+        'yewu4.png',
+        'yewu5.png'
       ],
       processDone: [false, false, false, false, false],
       percent: [0, 0, 0, 0, 0],
       processDeg: [0, 0, 0, 0, 0],
-      //第二部分动画结束
+      // 第二部分动画结束
 
-      //换电详情
+      // 换电详情
       swapInfo: {
-        capacity: "--",
-        quantity: "--",
-        swapFreq: "--",
-        todayAlarmFreq: "--",
-        todayCapacity: "--",
-        todaySwapFreq: "--",
+        capacity: '--',
+        quantity: '--',
+        swapFreq: '--',
+        todayAlarmFreq: '--',
+        todayCapacity: '--',
+        todaySwapFreq: '--'
       },
-      //换电记录
+      // 换电记录
       carRecord: [],
-      //告警记录
-      alarmRecordList: [],
-    };
-  },
-  mounted() {
-    //监控视频
-    // const videoUrl = wsUrl.devServer.proxy["/video"].target
-    // let canvas = document.getElementById("video-1");
-    // var player = new window.JSMpeg.Player(videoUrl, {
-    //   canvas: canvas,
-    // });
-    // player.play();
-    if(getToken()){
-      if (this.ws) {
-        this.ws.close();
-      }
-      this.websocketConnect();
-      //清除定时器
-      this.clearTimerList();
-      //检测断开重连
-      this.detectWebsocketConnection();
-      //开启定时器
-      this.setTimerList();
+      // 告警记录
+      alarmRecordList: []
     }
   },
-  destroyed() {
-    this.websocketOnClose();
-    this.clearTimerList();
-  },
   computed: {
-    //车辆链接状态
+    // 车辆链接状态
     Carlink() {
-      if (this.vehicleInfo.conState != "—") {
-        return this.vehicleInfo.conState ? "已链接" : "未链接";
+      if (this.vehicleInfo.conState != '—') {
+        return this.vehicleInfo.conState ? '已链接' : '未链接'
       } else {
-        return "—";
+        return '—'
       }
     },
-    //解锁状态
+    // 解锁状态
     Carlock() {
-      if (this.vehicleInfo.lockState != "—") {
-        return this.vehicleInfo.lockState ? "已解锁" : "未解锁";
+      if (this.vehicleInfo.lockState != '—') {
+        return this.vehicleInfo.lockState ? '已解锁' : '未解锁'
       } else {
-        return "—";
+        return '—'
       }
     },
-    //上电状态
+    // 上电状态
     Carbattery() {
-      if (this.vehicleInfo.batteryState != "—") {
-        return this.vehicleInfo.batteryState ? "已下电" : "未下电";
+      if (this.vehicleInfo.batteryState != '—') {
+        return this.vehicleInfo.batteryState ? '已下电' : '未下电'
       } else {
-        return "—";
+        return '—'
       }
-    },
+    }
+  },
+  mounted() {
+    // 监控视频
+    // const videoUrl = wsUrl.devServer.proxy["/video"].target
+    // let canvas = document.getElementById("video-1");
+    // var player = new window.JSMpeg.Player(videoUrl, {
+    //   canvas: canvas,
+    // });
+    // player.play();
+    if (getToken()) {
+      if (this.ws) {
+        this.ws.close()
+      }
+      this.websocketConnect()
+      // 清除定时器
+      this.clearTimerList()
+      // 检测断开重连
+      this.detectWebsocketConnection()
+      // 开启定时器
+      this.setTimerList()
+    }
+  },
+  destroyed() {
+    this.websocketOnClose()
+    this.clearTimerList()
   },
   methods: {
-    //定时器列表
+    // 定时器列表
     setTimerList() {
-      this.exchargeInfo();
-      this.swapRecord();
-      this.alarmRecord();
+      this.exchargeInfo()
+      this.swapRecord()
+      this.alarmRecord()
       this.exchargeTimer = setInterval(() => {
-        this.exchargeInfo();
-        this.swapRecord();
-        this.alarmRecord();
-      }, 5000);
+        this.exchargeInfo()
+        this.swapRecord()
+        this.alarmRecord()
+      }, 5000)
     },
-    //清除定时器列表
+    // 清除定时器列表
     clearTimerList() {
       if (this.exchargeTimer) {
-        clearInterval(this.exchargeTimer);
+        clearInterval(this.exchargeTimer)
       }
       if (this.wsTimer) {
-        clearInterval(this.wsTimer);
+        clearInterval(this.wsTimer)
       }
     },
-    //换电信息
+    // 换电信息
     exchargeInfo() {
       swapInfo().then((rs) => {
-        this.swapInfo = rs.data;
-      });
+        this.swapInfo = rs.data
+      })
     },
-    //换电记录
+    // 换电记录
     swapRecord() {
       const params = {
         page: 1,
         pageSize: 2,
-        orderByWays: "desc",
-        orderByField: "swapBeginTime",
-      };
+        orderByWays: 'desc',
+        orderByField: 'swapBeginTime'
+      }
       swapRecord(params).then((rs) => {
-        this.carRecord = rs.data.records;
-      });
+        this.carRecord = rs.data.records
+      })
     },
-    //告警记录
+    // 告警记录
     alarmRecord() {
       const params = {
         page: 1,
         pageSize: 2,
-        orderByWays: "desc",
-        orderByField: "beginTime",
-      };
+        orderByWays: 'desc',
+        orderByField: 'beginTime'
+      }
       alarmRecord(params).then((rs) => {
-        this.alarmRecordList = rs.data.records;
-      });
+        this.alarmRecordList = rs.data.records
+      })
     },
     websocketOnOpen() {
-      console.log("socket连接成功");
+      console.log('socket连接成功')
     },
     websocketOnMessage(m) {
-      let d = JSON.parse(m.data);
+      const d = JSON.parse(m.data)
+      console.log(d)
       if (d.driverInfoVo) {
-        this.driverInfo = d.driverInfoVo;
+        this.driverInfo = d.driverInfoVo
       }
-      //车辆信息
+      // 车辆信息
       if (d.vehicleInfo) {
-        this.vehicleInfo = d.vehicleInfo;
+        this.vehicleInfo = d.vehicleInfo
       }
-      //电池信息
+      // 电池信息
       if (d.batteryInfo) {
-        this.batteryInfo = d.batteryInfo;
+        this.batteryInfo = d.batteryInfo
       }
-      //换电流程动画
-      if(d.swapProcess){
-        this.swapProcess = d.swapProcess;
-        if(this.swapProcess.valAngle){
-          this.processDone.splice(0,1,true);
-          this.percent.splice(0,1,this.swapProcess.valPercentage);
-          this.processDeg.splice(0,1,this.swapProcess.valAngle);
+      // 换电流程动画
+      if (d.swapProcess) {
+        this.swapProcess = d.swapProcess
+        if (this.swapProcess.valAngle === null) {
+          this.processDone = [false, false, false, false, false]
+          this.percent = [0, 0, 0, 0, 0]
+          this.processDeg = [0, 0, 0, 0, 0]
         }
-        if(this.swapProcess.applyAngle){
-          this.processDone.splice(1,1,true);
-          this.percent.splice(1,1,this.swapProcess.applyPercentage);
-          this.processDeg.splice(1,1,this.swapProcess.applyAngle);
+        if (this.swapProcess.valAngle) {
+          this.processDone.splice(0, 1, true)
+          this.percent.splice(0, 1, this.swapProcess.valPercentage)
+          this.processDeg.splice(0, 1, this.swapProcess.valAngle)
         }
-        if(this.swapProcess.beginAngle){
-          this.processDone.splice(2,1,true);
-          this.percent.splice(2,1,this.swapProcess.beginPercentage);
-          this.processDeg.splice(2,1,this.swapProcess.beginAngle);
+        if (this.swapProcess.applyAngle) {
+          this.processDone.splice(1, 1, true)
+          this.percent.splice(1, 1, this.swapProcess.applyPercentage)
+          this.processDeg.splice(1, 1, this.swapProcess.applyAngle)
         }
-        if(this.swapProcess.swapAngle){
-          this.processDone.splice(3,1,true);
-          this.percent.splice(3,1,this.swapProcess.swapPercentage);
-          this.processDeg.splice(3,1,this.swapProcess.swapAngle);
+        if (this.swapProcess.beginAngle) {
+          this.processDone.splice(2, 1, true)
+          this.percent.splice(2, 1, this.swapProcess.beginPercentage)
+          this.processDeg.splice(2, 1, this.swapProcess.beginAngle)
         }
-        if(this.swapProcess.endAngle){
-          this.processDone.splice(4,1,true);
-          this.percent.splice(4,1,this.swapProcess.endPercentage);
-          this.processDeg.splice(4,1,this.swapProcess.endAngle);
+        if (this.swapProcess.swapAngle) {
+          this.processDone.splice(3, 1, true)
+          this.percent.splice(3, 1, this.swapProcess.swapPercentage)
+          this.processDeg.splice(3, 1, this.swapProcess.swapAngle)
+        }
+        if (this.swapProcess.endAngle) {
+          this.processDone.splice(4, 1, true)
+          this.percent.splice(4, 1, this.swapProcess.endPercentage)
+          this.processDeg.splice(4, 1, this.swapProcess.endAngle)
         }
       }
-      //右上角电池动画
-      if(d.swapAnimationVo){
-        this.swapAnimationVo= d.swapAnimationVo;
+      // 右上角电池动画
+      if (d.swapAnimationVo) {
+        this.swapAnimationVo = d.swapAnimationVo
       }
-      if(d.storeInfoList){
-        this.storeInfoList= d.storeInfoList
-        for(let i=0;i<d.storeInfoList.length;i++){
-          this.$set(this.storeInfoList,i,d.storeInfoList[i])
+      if (d.storeInfoList) {
+        this.storeInfoList = d.storeInfoList
+        for (let i = 0; i < d.storeInfoList.length; i++) {
+          this.$set(this.storeInfoList, i, d.storeInfoList[i])
         }
       }
     },
     websocketOnError(e) {
-      console.log("socket错误", e);
+      console.log('socket错误', e)
     },
     websocketOnClose(e) {
-      console.log("socket断开", e);
+      console.log('socket断开', e)
     },
     detectWebsocketConnection() {
       this.wsTimer = setInterval(() => {
         if (this.ws.readyState != 1) {
-          this.ws.close();
-          this.websocketConnect();
+          this.ws.close()
+          this.websocketConnect()
         }
-      }, 3000);
+      }, 3000)
     },
     websocketConnect() {
-      this.ws = new WebSocket(wsUrl.devServer.proxy["/ws"].target);
-      this.ws.onopen = this.websocketOnOpen;
-      this.ws.onerror = this.websocketOnError;
-      this.ws.onmessage = this.websocketOnMessage;
-      this.ws.onclose = this.websocketOnClose;
-    },
-  },
-};
+      this.ws = new WebSocket(wsUrl.devServer.proxy['/ws'].target)
+      this.ws.onopen = this.websocketOnOpen
+      this.ws.onerror = this.websocketOnError
+      this.ws.onmessage = this.websocketOnMessage
+      this.ws.onclose = this.websocketOnClose
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -782,4 +785,4 @@ export default {
     }
   }
 }
-</style>
+</style>

vue.config.js

@@ -9,7 +9,7 @@ module.exports = {
   publicPath: "/",
   outputDir: 'dist',
   assetsDir: 'static',
-  lintOnSave: process.env.NODE_ENV === 'development',
+  lintOnSave: false,
   productionSourceMap: false,
   devServer: {
     host: 'localhost',
@@ -21,19 +21,19 @@ module.exports = {
     },
     proxy: {
       '/api': {
-        target: `http://192.168.0.63:8080`,
+        target: `http://test.hlchsw.com`,
         // target: `http://172.16.12.146:8080`,
         ws: true,
         changeOrigin: true,
       },
       '/ws': {
-         target: `ws://192.168.0.63:8080/ws`,
+         target: `ws://test.hlchsw.com/ws`,
         // target: `ws://172.16.12.146:8080/ws`,
         ws: true,
         changeOrigin: true,
       },
       '/video':{
-        target: `ws://localhost:8084/`,
+        target: `ws://test.hlchsw.com/`,
         // target: `ws://172.16.12.146:8080/ws`,
         ws: true,
         changeOrigin: true,