10.30

src/api/equipment.js

@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+//开始换电
+export function beginSwap() {
+    return request({
+      url: '/device/beginSwap',
+      method: 'get',
+    })
+}
+//消防换仓
+export function fireStore() {
+    return request({
+      url: '/device/fireStore',
+      method: 'get',
+    })
+}
+//检修换仓
+export function mtStore() {
+    return request({
+      url: '/device/mtStore',
+      method: 'get',
+    })
+}
+//机器人复位
+export function resetRobot() {
+    return request({
+      url: '/device/resetRobot',
+      method: 'get',
+    })
+}

src/views/equipment-monitoring/components/BatteryCharger.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="communication">
-            <div><img src="../assets/cangwei.png" />{{position}}号充电机</div>
+            <div><img src="../assets/cangwei.png" />{{chargerCode}}号充电机</div>
             <div :class="statustext[1]">{{statustext[0]}}</div>
         </div>
     </div>
@@ -10,10 +10,10 @@
 <script>
     export default {
         name: "BatteryCharger",
-        props:['position','status'],
+        props:['chargerCode','comState'],
         computed:{
             statustext(){
-                if(this.status==='0'){
+                if(this.comState===1){
                     return ['通讯正常','success']
                 }else{
                     return ['通讯异常','warning']

src/views/equipment-monitoring/components/BatteryStatus.vue

@@ -1,14 +1,14 @@
 <template>
     <div>
         <div class="communication">
-            <div><img src="../assets/cangwei.png" />{{position}}号仓位</div>
+            <div><img src="../assets/cangwei.png" />{{storeCode}}号仓位</div>
             <div :class="statustext[1]">{{statustext[0]}}</div>
         </div>
         <div class="battery-number">
-            <span>电池编号</span><span>{{number}}</span>
+            <span>电池编号</span><span>{{sn}}</span>
         </div>
         <div class="percent">
-            <div><span>{{percent}}</span></div>
+            <div><span>{{5}}</span></div>
             <div>%</div>
         </div>
         <div class="line"><span></span><span></span></div>
@@ -18,7 +18,7 @@
             </div>
             <div class="power-text">
                 <span>电池电量</span>
-                <span>预计<em>{{time}}</em>后充满</span>
+                <span>预计<em>{{chgEstimatedTime}}</em>后充满</span>
             </div>
         </div>
     </div>
@@ -27,10 +27,10 @@
 <script>
 export default {
     name: "BatteryStatus",
-    props:['position','status','number','percent','time','power'],
+    props:['storeCode','comState','sn','chgEstimatedTime'],
     computed:{
         statustext(){
-            if(this.status==='0'){
+            if(this.comState===1){
                 return ['通讯正常','success']
             }else{
                 return ['通讯异常','warning']

src/views/equipment-monitoring/components/StorageInfo.vue

@@ -2,41 +2,39 @@
     <div class="storage-item">
         <div class="container">
             <BatteryStatus
-            position="1"
-            status="0"
-            number="454545454544689751512"
-            percent="5"
-            time="02时02分"
-            power="20"
+            :storeCode="storeCode"
+            :comState="comState"
+            :sn="sn"
+            :chgEstimatedTime="chgEstimatedTime"
             ></BatteryStatus>
             <div class="battery-info">
-                <BatteryInfo num="95.40" unit="A" text="电流"></BatteryInfo>
-                <BatteryInfo num="384" unit="V" text="电压"></BatteryInfo>
-                <BatteryInfo num="25" unit="℃" text="最低温度"></BatteryInfo>
-                <BatteryInfo num="25" unit="℃" text="最高温度"></BatteryInfo>
-                <BatteryInfo num="230" unit="V" text="最高单体电压"></BatteryInfo>
-                <BatteryInfo num="44.66" unit="V" text="最低单体电压"></BatteryInfo>
-                <BatteryInfo num="43" unit="%" text="SOH"></BatteryInfo>
+                <BatteryInfo :num="current" unit="A" text="电流"></BatteryInfo>
+                <BatteryInfo :num="voltage" unit="V" text="电压"></BatteryInfo>
+                <BatteryInfo :num="minTemperature" unit="℃" text="最低温度"></BatteryInfo>
+                <BatteryInfo :num="maxTemperature" unit="℃" text="最高温度"></BatteryInfo>
+                <BatteryInfo :num="maxCellVoltage" unit="V" text="最高单体电压"></BatteryInfo>
+                <BatteryInfo :num="minCellVoltage" unit="V" text="最低单体电压"></BatteryInfo>
+                <BatteryInfo :num="soh" unit="%" text="SOH"></BatteryInfo>
                 <div class="info-right">
-                    <img src="../assets/have.png">有电池
+                    <img src="../assets/have.png">{{storeState? '有电池':'空仓'}}
                 </div>
             </div>
             <div class="battery-charger">
                 <BatteryCharger
-                position="1"
-                status="0"
-                ></BatteryCharger>
-                <div class="battery-info">
-                    <BatteryInfo num="95.40" unit="A" text="需求电流"></BatteryInfo>
-                    <BatteryInfo num="384" unit="V" text="需求电压"></BatteryInfo>
-                    <BatteryInfo num="95.40" unit="A" text="充电电流"></BatteryInfo>
-                    <BatteryInfo num="93.40" unit="V" text="充电电压"></BatteryInfo>
-                    <BatteryInfo num="12.38" unit="kwh" text="充电电量"></BatteryInfo>
+                :chargerCode="chargerInfoVo.chargerCode"
+                :comState="chargerInfoVo.comState"
+                v-show="chargerInfoVo.chargerCode"></BatteryCharger>
+                <div class="battery-info" v-show="chargerInfoVo.chargerCode">
+                    <BatteryInfo :num="chargerInfoVo.demandCurrent" unit="A" text="需求电流"></BatteryInfo>
+                    <BatteryInfo :num="chargerInfoVo.demandVoltage" unit="V" text="需求电压"></BatteryInfo>
+                    <BatteryInfo :num="chargerInfoVo.chgCurrent" unit="A" text="充电电流"></BatteryInfo>
+                    <BatteryInfo :num="chargerInfoVo.chgVoltage" unit="V" text="充电电压"></BatteryInfo>
+                    <BatteryInfo :num="chargerInfoVo.chgCapacity" unit="kwh" text="充电电量"></BatteryInfo>
                     <div class="info-right">
-                        <img src="../assets/have.png">充电中
+                        <img src="../assets/have.png">{{chargerState}}
                     </div>
                 </div>
-                <img src="../assets/nodata.png" class="nodata">
+                <img src="../assets/nodata.png" class="nodata" v-show="!chargerInfoVo.chargerCode">
             </div>
         </div>
     </div>
@@ -48,6 +46,8 @@ import BatteryStatus from "./BatteryStatus.vue";
 import BatteryCharger from "./BatteryCharger.vue"
 export default {
     name:"StorageInfo",
+    props:['storeCode','comState','sn','chgEstimatedTime','current','voltage','minTemperature','maxTemperature','maxCellVoltage','minCellVoltage',
+        'soh','storeState','chargerInfoVo'],
     components: {
         BatteryInfo,
         BatteryStatus,
@@ -57,6 +57,21 @@ export default {
         return{
             
         }
+    },
+    computed:{
+        chargerState(){
+            if(this.chargerInfoVo.chgState === 1){
+                return '充电中'
+            }else if(this.chargerInfoVo.chgState === 2){
+                return '待充电'
+            }else if(this.chargerInfoVo.chgState === 3){
+                return '故障'
+            }else if(this.chargerInfoVo.chgState === 4){
+                return '充电完成'
+            }else{
+                return '无'
+            }
+        }
     }
 };
 </script >
@@ -112,7 +127,7 @@ export default {
                     position: relative;
                     left: 40%;
                     margin-top: 6vh;
-                    display: none;
+                    
                 }
             }
         }

src/views/equipment-monitoring/components/SubTitle.vue

@@ -16,24 +16,26 @@
       </div>
     </div>
     <div class="rolemanage">
-      <el-dialog :title="dialogType==='check'?'检修换仓':'消防换仓'" :visible.sync="dialogStoreVisible">
-        <el-form :model="form">
-          <el-form-item :label="dialogType==='check'?'检修仓：':'故障仓：'" :label-width="formLabelWidth">
-            <el-select v-model="form.status" :placeholder="dialogType==='check'?'请选择检修仓':'请选择故障仓'">
+      <el-dialog :title="dialogType === 'check' ? '检修换仓' : '消防换仓'" :visible.sync="dialogStoreVisible">
+        <el-form :model="StoreForm" :rules="rules" ref="StoreForm">
+          <el-form-item :label="dialogType === 'check' ? '检修仓：' : '故障仓：'" :label-width="formLabelWidth"
+            prop="currentStore">
+            <el-select v-model="StoreForm.currentStore" clearable
+              :placeholder="dialogType === 'check' ? '请选择检修仓' : '请选择故障仓'">
               <el-option label="01仓" value="1"></el-option>
-              <el-option label="02仓" value="0"></el-option>
+              <el-option label="02仓" value="2"></el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="目标仓：" :label-width="formLabelWidth">
-            <el-select v-model="form.status" placeholder="请选择目标仓">
+          <el-form-item label="目标仓：" :label-width="formLabelWidth" prop="targetStore">
+            <el-select v-model="StoreForm.targetStore" clearable placeholder="请选择目标仓">
               <el-option label="01仓" value="1"></el-option>
-              <el-option label="02仓" value="0"></el-option>
+              <el-option label="02仓" value="2"></el-option>
             </el-select>
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button @click="dialogStoreVisible = false" class="exit">取 消</el-button>
-          <el-button type="primary" @click="dialogStoreVisible = false" class="save">确 定</el-button>
+          <el-button type="primary" @click="ChangeStore('StoreForm')" class="save">确 定</el-button>
         </div>
       </el-dialog>
     </div>
@@ -41,54 +43,81 @@
 </template>
 
 <script>
-
+import { beginSwap, fireStore, mtStore, resetRobot } from '@/api/equipment'
 export default {
   name: "SubTitle",
-  props: ["name", "statement","num","step"],
-  data(){
-    return{
-      dialogType:'fire',
-      dialogStoreVisible:false,
-      form: {
-        status: '01仓',
+  props: ["name", "statement", "num", "step"],
+  data() {
+    var checkcurrentStore = (rule, value, callback) => {
+      if (!value) {
+        return callback(new Error(`请选择${this.dialogType === 'check' ? '检修仓' : '故障仓'}`));
+      } else {
+        callback()
+      }
+    };
+    var checktargetStore = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('请选择目标仓位'));
+      } else if (value === this.StoreForm.currentStore) {
+        callback(new Error(`${this.dialogType === 'check' ? '检修仓' : '故障仓'}不可与目标仓位重名`));
+      } else {
+        callback()
+      }
+    };
+    return {
+      dialogType: 'fire',
+      dialogStoreVisible: false,
+      StoreForm: {
+        currentStore: null,
+        targetStore: null,
+      },
+      rules: {
+        currentStore: [
+          { validator: checkcurrentStore, trigger: 'blur' }
+        ],
+        targetStore: [
+          { validator: checktargetStore, trigger: 'blur' }
+        ],
       },
       formLabelWidth: '120px',
     }
   },
-  methods:{
+  methods: {
+    //手动发起换电
     changePower() {
       this.$confirm('请确认站控系统手动发起换电？', '开始换电', {
         confirmButtonText: '确认',
         cancelButtonText: '取消',
         type: 'warning'
       })
-        .then(async() => {
-          await deleteRole(row.key)
-          this.rolesList.splice($index, 1)
+        .then(async () => {
+          const res = await beginSwap()
+          console.log(res)
           this.$message({
             type: 'success',
-            message: 'Delete succed!'
+            message: '操作成功!'
           })
         })
         .catch(err => { console.error(err) })
     },
+    //机器人复位
     resetMachine() {
       this.$confirm('请确认机器人复位？', '机器人复位', {
         confirmButtonText: '确认',
         cancelButtonText: '取消',
         type: 'warning'
       })
-        .then(async() => {
-          await deleteRole(row.key)
-          this.rolesList.splice($index, 1)
+        .then(async () => {
+          const res = await resetRobot()
+          console.log(res)
           this.$message({
             type: 'success',
-            message: 'Delete succed!'
+            message: '操作成功!'
           })
         })
         .catch(err => { console.error(err) })
     },
-    //检修换仓、消防换仓
+    //检修消防换仓,显示弹窗
     CheckStoreHouse() {
       this.dialogType = 'check'
       this.dialogStoreVisible = true
@@ -97,6 +126,53 @@ export default {
       this.dialogType = 'fire'
       this.dialogStoreVisible = true
     },
+    //检修换仓、消防换仓下发指令
+    ChangeStore(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          const params = this.StoreForm
+          //检修换仓
+          if (this.dialogType === 'check') {
+            mtStore(params).then(res => {
+              if (res.code === 0) {
+                this.loading = false;
+                this.dialogStoreVisible = false;
+                this.$message({
+                  type: 'success',
+                  message: '操作成功！'
+                })
+                this.resetForm()
+              } else {
+                this.loading = false;
+                return this.$message.error(res.msg);
+              }
+            })
+          }
+          //消防换仓
+          else {
+            fireStore(params).then(res => {
+              if (res.code === 0) {
+                this.loading = false;
+                this.dialogStoreVisible = false;
+                this.$message({
+                  type: 'success',
+                  message: '操作成功！'
+                })
+                this.resetForm()
+              } else {
+                this.loading = false;
+                return this.$message.error(res.msg);
+              }
+            })
+          }
+        }
+      });
+    },
+    //清空下拉仓位
+    resetForm() {
+      this.StoreForm.currentStore = null
+      this.StoreForm.targetStore = null
+    }
   }
 };
 </script>
@@ -108,6 +184,7 @@ export default {
   border-right: none;
   padding: 2px;
 }
+
 .inner-style {
   background: #121a29;
   padding: 3px;
@@ -115,26 +192,30 @@ export default {
   height: 32px;
   flex-direction: row;
 }
+
 .white-border {
   width: 28px;
   height: 18px;
   background-image: url("../assets/ico2.png");
   background-size: 100% 100%;
 }
+
 .align-center {
   display: flex;
   flex-direction: row;
   margin: 0 5px;
   align-items: center;
 }
+
 .name {
   color: white;
   font-size: 1.2rem;
   font-weight: 600;
-  text-shadow: 0 0 3px #1753ce,0 0 4px #1753ce,0 0 3px #1753ce,0 0 3px #1753ce;
+  text-shadow: 0 0 3px #1753ce, 0 0 4px #1753ce, 0 0 3px #1753ce, 0 0 3px #1753ce;
   margin-left: -4.2%;
 }
-.storage{
+
+.storage {
   background: #192b7d;
   width: 20px;
   height: 20px;
@@ -146,6 +227,7 @@ export default {
   line-height: 22px;
   margin-left: 3px;
 }
+
 .statement {
   color: #324264;
   font-size: 0.6rem;
@@ -154,7 +236,7 @@ export default {
   padding-top: 9px;
 }
 
-.exchange-store{
+.exchange-store {
   flex: 1;
   height: 32px;
   position: relative;
@@ -162,20 +244,22 @@ export default {
   display: flex;
   justify-content: flex-end;
 }
-.store-list{
+
+.store-list {
   width: 88px;
   height: 32px;
   text-align: center;
   line-height: 32px;
-  border: #414a63 solid 1px;    
-  color:#84988c;
+  border: #414a63 solid 1px;
+  color: #84988c;
   font-size: 14px;
   font-weight: 600;
   margin-right: 15px;
   cursor: pointer;
 }
-.active{
-  border: #91fdb9 solid 1px;    
-  color:#91fdb9;
+
+.active {
+  border: #91fdb9 solid 1px;
+  color: #91fdb9;
 }
 </style>

src/views/equipment-monitoring/index.vue

@@ -10,24 +10,30 @@
                             <span>机器人状态</span>
                             <div class="status">
                                 <div class="status-list">
-                                    <img src="./assets/status1-active.png" width="58">
+                                    <img :src="robotInfoVo.robotState === 1 ? require('./assets/status1-active.png') : require('./assets/status1.png')"
+                                        width="58">
                                     <div class="staus-info">
-                                        <div class="infoimg"><img src="./assets/success.png"></div>
-                                        <div class="infotext active">运行</div>
+                                        <div class="infoimg"><img src="./assets/success.png"
+                                                v-if="robotInfoVo.robotState === 1"></div>
+                                        <div class="infotext" :class="{ active: robotInfoVo.robotState === 1 }">运行</div>
                                     </div>
                                 </div>
                                 <div class="status-list">
-                                    <img src="./assets/status2.png" width="58">
+                                    <img :src="robotInfoVo.robotState === 2 ? require('./assets/status2-active.png') : require('./assets/status2.png')"
+                                        width="58">
                                     <div class="staus-info">
-                                        <div class="infoimg"><img src="./assets/warn.png"></div>
-                                        <div class="infotext">待机</div>
+                                        <div class="infoimg"><img src="./assets/warn.png"
+                                                v-if="robotInfoVo.robotState === 2"></div>
+                                        <div class="infotext" :class="{ active: robotInfoVo.robotState === 2 }">待机</div>
                                     </div>
                                 </div>
                                 <div class="status-list">
-                                    <img src="./assets/status3.png" width="58">
+                                    <img :src="robotInfoVo.robotState === 3 ? require('./assets/status3-active.png') : require('./assets/status3.png')"
+                                        width="58">
                                     <div class="staus-info">
-                                        <div class="infoimg"><img src="./assets/danger.png"></div>
-                                        <div class="infotext">故障</div>
+                                        <div class="infoimg"><img src="./assets/danger.png"
+                                                v-if="robotInfoVo.robotState === 3"></div>
+                                        <div class="infotext" :class="{ active: robotInfoVo.robotState === 3 }">故障</div>
                                     </div>
                                 </div>
                             </div>
@@ -37,31 +43,36 @@
                             <div class="signal-status">
                                 <div class="signal-status-list">
                                     <div class="signal-icon">
-                                        <img src="./assets/info1.png" width="58"><img src="./assets/signal1.png">
+                                        <img src="./assets/info1.png" width="58"><img
+                                            :src="robotInfoVo.plcState ? require('./assets/signal1.png') : require('./assets/signal2.png')">
                                     </div>
                                     <div class="signal-text">PLC通信</div>
                                 </div>
                                 <div class="signal-status-list">
                                     <div class="signal-icon">
-                                        <img src="./assets/info2.png" width="58"><img src="./assets/signal1.png">
+                                        <img src="./assets/info2.png" width="58"><img
+                                            :src="robotInfoVo.liftingServo ? require('./assets/signal1.png') : require('./assets/signal2.png')">
                                     </div>
                                     <div class="signal-text">举升伺服</div>
                                 </div>
                                 <div class="signal-status-list">
                                     <div class="signal-icon">
-                                        <img src="./assets/info3.png" width="58"><img src="./assets/signal1.png">
+                                        <img src="./assets/info3.png" width="58"><img
+                                            :src="robotInfoVo.rotaryServo ? require('./assets/signal1.png') : require('./assets/signal2.png')">
                                     </div>
                                     <div class="signal-text">旋转伺服</div>
                                 </div>
                                 <div class="signal-status-list">
                                     <div class="signal-icon">
-                                        <img src="./assets/info4.png" width="58"><img src="./assets/signal2.png">
+                                        <img src="./assets/info4.png" width="58"><img
+                                            :src="robotInfoVo.palletServo ? require('./assets/signal1.png') : require('./assets/signal2.png')">
                                     </div>
                                     <div class="signal-text">货叉伺服</div>
                                 </div>
                                 <div class="signal-status-list">
                                     <div class="signal-icon">
-                                        <img src="./assets/info5.png" width="58"><img src="./assets/signal2.png">
+                                        <img src="./assets/info5.png" width="58"><img
+                                            :src="robotInfoVo.walkServo ? require('./assets/signal1.png') : require('./assets/signal2.png')">
                                     </div>
                                     <div class="signal-text">行走伺服</div>
                                 </div>
@@ -71,42 +82,66 @@
                         <li>
                             <span>轴转速度</span>
                             <div class="speed">
-                                <p>X轴速度：<font>0.11</font> <em>m/s</em></p>
-                                <p>Y轴速度：<font>0.11</font> <em>m/s</em></p>
-                                <p>Z轴速度：<font>0.11</font> <em>m/s</em></p>
+                                <p>X轴速度：<font>{{ robotInfoVo.xAxis }}</font> <em>m/s</em></p>
+                                <p>Y轴速度：<font>{{ robotInfoVo.yAxis }}</font> <em>m/s</em></p>
+                                <p>Z轴速度：<font>{{ robotInfoVo.zAxis }}</font> <em>m/s</em></p>
                             </div>
                         </li>
                         <li>
                             <span>时间</span>
                             <div class="times">
-                                换电时间：<font>2分00秒</font>
+                                换电时间：<font>{{ robotInfoVo.swapTime }}</font>
                             </div>
                             <div class="times">
-                                剩余时间：<font>约2分00秒</font>
+                                剩余时间：<font>{{ robotInfoVo.residueTime }}</font>
                             </div>
-                        </Li>
+                        </li>
                     </ul>
                 </div>
             </div>
         </div>
         <div class="box-second">
             <sub-title name="储充信息" statement="STORAGE AND CHARGING INFORMATION" num="8" step="1"></sub-title>
-            <div class="storage-bottom" :style="{height:screenHeight}">
+            <div class="storage-bottom" :style="{ height: screenHeight }">
                 <el-carousel indicator-position="outside" :height="height" :autoplay="false">
                     <el-carousel-item>
                         <div class="storagebox">
-                            <StorageInfo></StorageInfo>
-                            <StorageInfo></StorageInfo>
-                            <StorageInfo></StorageInfo>
-                            <StorageInfo></StorageInfo>
-                            <StorageInfo></StorageInfo>
+                            <StorageInfo 
+                            v-for="(item,index) in storeInfoListFirst" :key="index"
+                            :storeCode="item.storeCode"
+                            :comState="item.comState"
+                            :sn="item.sn"
+                            :chgEstimatedTime="item.chargerInfoVo.chgEstimatedTime"
+                            :current="item.current"
+                            :voltage="item.voltage"
+                            :minTemperature="item.minTemperature"
+                            :maxTemperature="item.maxTemperature"
+                            :maxCellVoltage="item.maxCellVoltage"
+                            :minCellVoltage="item.minCellVoltage"
+                            :soh="item.soh"
+                            :storeState="item.storeState"
+                            :chargerInfoVo="item.chargerInfoVo"
+                            ></StorageInfo>
                         </div>
                     </el-carousel-item>
                     <el-carousel-item>
                         <div class="storagebox">
-                            <StorageInfo></StorageInfo>
-                            <StorageInfo></StorageInfo>
-                            <StorageInfo></StorageInfo>
+                            <StorageInfo
+                            v-for="(item,index) in storeInfoListSecond" :key="index"
+                            :storeCode="item.storeCode"
+                            :comState="item.comState"
+                            :sn="item.sn"
+                            :chgEstimatedTime="item.chargerInfoVo.chgEstimatedTime"
+                            :current="item.current"
+                            :voltage="item.voltage"
+                            :minTemperature="item.minTemperature"
+                            :maxTemperature="item.maxTemperature"
+                            :maxCellVoltage="item.maxCellVoltage"
+                            :minCellVoltage="item.minCellVoltage"
+                            :soh="item.soh"
+                            :storeState="item.storeState"
+                            :chargerInfoVo="item.chargerInfoVo"
+                            ></StorageInfo>
                         </div>
                     </el-carousel-item>
                 </el-carousel>
@@ -117,8 +152,10 @@
 
 <script>
 import "./index.scss";
+import wsUrl from "../../../vue.config.js";
 import SubTitle from "./components/SubTitle.vue";
 import StorageInfo from "./components/StorageInfo.vue";
+import { getToken} from '@/utils/auth'
 export default {
     name: "EquipmentMonitoring",
     components: {
@@ -127,37 +164,107 @@ export default {
     },
     data() {
         return {
+            ws: null,
             height: "100%",
-            screenHeight:null,
+            screenHeight: null,
+            robotInfoVo: {},
+            storeInfoListFirst: [],//第一屏储充信息
+            storeInfoListSecond: [], //第二屏储充信息
         }
     },
     mounted() {
         this.onLoadHeight()
         this.changeWindow()
+        if(getToken()){
+            if (this.ws) {
+                this.ws.close();
+            }
+            this.websocketConnect();
+            //清除定时器
+            this.clearTimerList();
+            //检测断开重连
+            this.detectWebsocketConnection();
+            //开启定时器
+            this.setTimerList();
+        }
+    },
+    destroyed() {
+        this.websocketOnClose();
+        this.clearTimerList();
     },
     methods: {
+        //定时器列表
+        setTimerList() {
+            this.exchargeTimer = setInterval(() => {
+
+            }, 5000);
+        },
+        //清除定时器列表
+        clearTimerList() {
+            if (this.exchargeTimer) {
+                clearInterval(this.exchargeTimer);
+            }
+            if (this.wsTimer) {
+                clearInterval(this.wsTimer);
+            }
+        },
         /*设置初始视窗高度*/
-      onLoadHeight() {
-        this.$nextTick(() => {
-            if(document.body.clientHeight >= 1080){
-                this.screenHeight = '65vh'
-            }else{
-                this.screenHeight = '72vh'
+        onLoadHeight() {
+            this.$nextTick(() => {
+                if (document.body.clientHeight >= 1080) {
+                    this.screenHeight = '65vh'
+                } else {
+                    this.screenHeight = '72vh'
+                }
+            });
+        },
+        /*设置窗口变化高度*/
+        changeWindow() {
+            window.onresize = () => {
+                return (() => {
+                    if (document.body.clientHeight >= 1080) {
+                        this.screenHeight = '65vh'
+                    } else {
+                        this.screenHeight = '72vh'
+                    }
+                })();
+            };
+        },
+        websocketOnOpen() {
+            console.log("socket连接成功");
+        },
+        websocketOnMessage(m) {
+            let d = JSON.parse(m.data)
+            // console.log(d)
+            if (d.robotInfoVo) {
+                this.robotInfoVo = d.robotInfoVo
             }
-        });
-      },
-      /*设置窗口变化高度*/
-      changeWindow() {
-        window.onresize = () => {
-          return (() => {
-            if(document.body.clientHeight >= 1080){
-                this.screenHeight = '65vh'
-            }else{
-                this.screenHeight = '72vh'
+            if(d.storeInfoList){
+                this.storeInfoListFirst = d.storeInfoList
+                this.storeInfoListSecond = d.storeInfoList.splice(5)
             }
-          })();
-        };
-      },
+        },
+        websocketOnError(e) {
+            console.log("socket错误", e);
+        },
+        websocketOnClose(e) {
+            console.log("socket断开", e);
+        },
+        detectWebsocketConnection() {
+            this.wsTimer = setInterval(() => {
+                if (this.ws.readyState != 1) {
+                    this.ws.close();
+                    this.websocketConnect();
+                }
+            }, 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;
+        },
     }
 };
 </script>
@@ -166,6 +273,7 @@ export default {
     width: 100%;
     min-height: 100%;
     height: auto !important;
+
     ul {
         display: none;
     }

src/views/permission/car-manage/index.vue

@@ -4,7 +4,7 @@
         <el-form :inline="true" :model="queryParams">
   
           <el-form-item label="车牌号:" style="margin-left: 25px;">
-            <el-input placeholder="请输入车牌号" v-model="queryParams.vehiclePlate" clearable></el-input>
+            <el-input placeholder="请输入车牌号" v-model.trim="queryParams.vehiclePlate" clearable></el-input>
           </el-form-item>
   
           <el-form-item label="车型:" style="margin-left: 20px;">
@@ -19,7 +19,7 @@
             </el-select>
           </el-form-item>
           <el-form-item label="司机姓名:" style="margin-left: 20px;">
-            <el-input placeholder="请输入司机姓名" v-model="queryParams.driverName" clearable></el-input>
+            <el-input placeholder="请输入司机姓名" v-model.trim="queryParams.driverName" clearable></el-input>
           </el-form-item>
           <el-form-item label="车辆状态:" style="margin-left: 20px;">
             <el-select v-model="queryParams.state" clearable placeholder="请选择状态">

src/views/permission/cartype-manage/index.vue

@@ -4,7 +4,7 @@
         <el-form :inline="true" :model="queryParams">
   
           <el-form-item label="车型名称:" style="margin-left: 35px;">
-            <el-input placeholder="请输入车型名称" v-model="queryParams.modelName" clearable></el-input>
+            <el-input placeholder="请输入车型名称" v-model.trim="queryParams.modelName" clearable></el-input>
           </el-form-item>
   
           <el-form-item label="车辆状态:" style="margin-left: 50px;">

src/views/permission/driver-manage/index.vue

@@ -4,14 +4,14 @@
         <el-form :inline="true" :model="queryParams">
   
           <el-form-item label="司机姓名:" style="margin-left: 25px;">
-            <el-input placeholder="请输入司机姓名" v-model="queryParams.driverName" clearable></el-input>
+            <el-input placeholder="请输入司机姓名" v-model.trim="queryParams.driverName" clearable></el-input>
           </el-form-item>
   
           <el-form-item label="身份证号:" style="margin-left: 20px;">
-            <el-input placeholder="请输入身份证号" v-model="queryParams.driverCardNum" clearable></el-input>
+            <el-input placeholder="请输入身份证号" v-model.trim="queryParams.driverCardNum" clearable></el-input>
           </el-form-item>
           <el-form-item label="手机号码:" style="margin-left: 20px;">
-            <el-input placeholder="请输入手机号码" v-model="queryParams.driverMobile" clearable></el-input>
+            <el-input placeholder="请输入手机号码" v-model.trim="queryParams.driverMobile" clearable></el-input>
           </el-form-item>
           <el-form-item label="车辆状态:" style="margin-left: 20px;">
             <el-select v-model="queryParams.state" clearable placeholder="请选择状态">

src/views/permission/page.vue

@@ -15,7 +15,7 @@
         </el-form-item>
 
         <el-form-item label="电池编号:" style="margin-left: 50px;">
-          <el-input placeholder="请输入电池编号" v-model="queryParams.chgSn" clearable></el-input>
+          <el-input placeholder="请输入电池编号" v-model.trim="queryParams.chgSn" clearable></el-input>
         </el-form-item>
 
         <el-form-item label="充电时间:" style="margin-left: 50px">

src/views/permission/record-alarm/index.vue

@@ -8,7 +8,7 @@
           </el-form-item>
   
           <el-form-item label="告警信息:" style="margin-left: 20px;">
-            <el-input placeholder="请输入告警信息" v-model="queryParams.info" clearable></el-input>
+            <el-input placeholder="请输入告警信息" v-model.trim="queryParams.info" clearable></el-input>
           </el-form-item>
           <el-form-item label="告警状态:" style="margin-left: 20px;">
             <el-select v-model="queryParams.state" clearable placeholder="请选择状态">

src/views/permission/role.vue

@@ -4,7 +4,7 @@
     <div class="charge-tools">
       <el-form :inline="true" ref="SerchForm">
         <el-form-item label="账号:" style="margin-left: 35px;">
-          <el-input placeholder="请输入账号" v-model="queryParams.userAccount" clearable></el-input>
+          <el-input placeholder="请输入账号" v-model.trim="queryParams.userAccount" clearable></el-input>
         </el-form-item>
 
         <el-form-item label="账号状态:" style="margin-left: 50px;">
@@ -83,7 +83,7 @@
         ref="ruleForm"
         >
           <el-form-item label="账号：" :label-width="formLabelWidth" prop="userAccount">
-            <el-input v-model="formData.userAccount" autocomplete="off" placeholder="请输入账号" :disabled="dialogType==='edit'"></el-input>
+            <el-input v-model.trim="formData.userAccount" autocomplete="off" placeholder="请输入账号" :disabled="dialogType==='edit'"></el-input>
           </el-form-item>
           <el-form-item label="密码：" :label-width="formLabelWidth" v-if="dialogType==='edit'">
             <el-button type="primary" @click="resetpwd" class="exit">重置密码</el-button>

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

@@ -1,508 +0,0 @@
-<template>
-  <div class="bin-bottom">
-    <div class="bin-carbg">
-      <img src="../assets/car1x.png" class="car" />
-      <div :class="{ 'battery-yellow': true, 'battery-tans': ischange }" v-if="BatteryOnCar">
-        <div class="battery-yellow-img">
-          <img src="../assets/yellow.png">
-        </div>
-        <div class="battery-yellow-text">
-          <p>SOC</p>
-          <p>{{ BatteryOnCar }}%</p>
-        </div>
-      </div>
-    </div>
-    <div class="bin-battery">
-      <div class="battery-list">
-        <div class="battery-listbg">
-          <div :class="ischangeDown ? 'battery-yellowlistbg battery-down' + `${batteryNumber}` : 'battery-yellowlistbg'"
-            :style="{ '--ishow': isshowNum ? 'flex' : 'none' }" v-show="!isbetteryLastLight">
-            <p>SOC</p>
-            <p>
-              <span>{{ yellowShowSoc }}%</span>
-              <span>{{ yellowShowCurr }}A</span>
-            </p>
-          </div>
-
-          <div :class="ischangeDown ? 'battery-listbg green-position' + `${batteryNumber}` : ''"
-            v-show="isbetteryLastLight">
-            <p>SOC</p>
-            <p>
-              <span>{{ yellowShowSoc }}%</span>
-              <span>{{ yellowShowCurr }}A</span>
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div class="battery-list" v-for="(item, index) in positionData" :key="index">
-        <div
-          :class="batteryNumber === index + 1 && batteryNumberStatus[index] ? 'battery-lightbg ' + `${batteryArr[index]}` : 'battery-lightbg'"
-          v-if="batteryNumberStatus[index] && batteryLightStatus">
-          <p>SOC</p>
-          <p>
-            <span>{{ batteryNumber === index + 1 && batteryNumberStatus[index] ? greenMoveSoc : item.soc }}%</span>
-            <span>{{ batteryNumber === index + 1 && batteryNumberStatus[index] ? greenMoveCurr : item.curr }}A </span>
-          </p>
-        </div>
-
-        <div class="battery-listbg">
-          <p v-show="batteryNumber !== index + 1 || batteryNumberStatus[index] === 0">SOC</p>
-          <p v-show="batteryNumber !== index + 1 || batteryNumberStatus[index] === 0">
-            <span>{{ item.soc }}%</span>
-            <span>{{ item.curr }}A </span>
-          </p>
-        </div>
-
-        <div class="battery-liststatus">
-          <img src="../assets/status0.png" v-show="item.state === 0">
-          <img src="../assets/status1.png" v-show="item.state === 1">
-          <img src="../assets/status2.png" v-show="item.state === 2">
-          <img src="../assets/status3.png" v-show="item.state === 3">
-        </div>
-      </div>
-
-
-    </div>
-    <div class="battery-num">
-      <img src="../assets/nostatus.png" v-for="(item,index) in 8" :key="index">
-    </div>
-  </div>
-</template>
-
-<script>
-/*
-    * @batteryLightStatus：控制绿电池是否亮起 
-    * @ischange：控制黄电池移动到1号仓
-    * @ischangeDown：控制将黄电池从1号仓移动到指定仓位
-    * @batteryNumber：电池编号从1开始
-    * @batteryNumberStatus：电池仓位数组的索引，即表示将几号仓位电池放入重卡,
-*/
-export default {
-  props: ["binlist", "ischange", "batteryNumber", "batteryNumberStatus",
-    "ischangeDown", "batteryLightStatus", "isshowNum", "isbetteryLastLight", "yellowisshow",
-    "yellowShowCurr", "yellowShowSoc", "positionData", "greenMoveSoc", "greenMoveCurr",
-    "BatteryOnCar","storeInfoList"
-  ],
-  data() {
-    return {
-      classArr: ["battery-yellow"],
-      showNumClassArr: ["showNum"],
-      imgArr: ["../assets/bin1x.png", "../assets/bin2x.png"],
-      LastLightimgArr: ["../assets/lightbg.png", "../assets/yellow.png"],
-      batteryArr: [
-        "batteryOne",
-        "batteryTwo",
-        "batteryThree",
-        "batteryFour",
-        "batteryFive",
-        "batterySix",
-        "batterySeven",
-      ],
-      isshow: 'none',
-    };
-  },
-  methods: {
-
-  },
-  mounted() {
-
-  },
-  // computed:{}
-};
-</script>
-
-<style lang="scss" scoped>
-.bin-bottom {
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  justify-content: space-around;
-  height: 100%;
-}
-
-.bin-carbg {
-  width: 38%;
-  position: relative;
-  padding-top: 5px;
-}
-
-.bin-carbg .car {
-  position: absolute;
-  width: 137px;
-  height: 362px;
-  left: 5%;
-}
-
-.bin-carbg .battery-yellow {
-  position: relative;
-  width: 73px;
-  top: 114px;
-  left: 27%;
-  z-index: 9999;
-}
-
-.battery-yellow .battery-yellow-img {
-  width: 73px;
-  position: absolute;
-}
-
-.battery-yellow .battery-yellow-text {
-  width: 73px;
-  display: flex;
-  position: absolute;
-  z-index: 99;
-  align-items: center;
-  font-size: 13px;
-  font-weight: 600;
-  text-align: center;
-  color: #f6bb47;
-  padding-left: 3px;
-}
-
-.battery-yellow-text p {
-  padding-left: 6px;
-}
-
-.bin-carbg .battery-tans {
-  animation: mytans 12s 1s linear forwards;
-
-}
-
-@keyframes mytans {
-  0% {
-    transform: translate(0);
-  }
-
-  100% {
-    transform: translate(117px, -110px);
-  }
-}
-
-.battery-down7 {
-  animation: downNum7 10s 1s linear forwards;
-}
-
-@keyframes downNum7 {
-  100% {
-    transform: translate(0px, 320px);
-  }
-}
-
-.battery-down6 {
-  animation: downNum6 10s 1s linear forwards;
-}
-
-@keyframes downNum6 {
-  100% {
-    transform: translate(0px, 275px);
-  }
-}
-
-.battery-down5 {
-  animation: downNum5 10s 1s linear forwards;
-}
-
-@keyframes downNum5 {
-  100% {
-    transform: translate(0px, 229px);
-  }
-}
-
-.battery-down4 {
-  animation: downNum4 10s 1s linear forwards;
-}
-
-@keyframes downNum4 {
-  100% {
-    transform: translate(0px, 183px);
-  }
-}
-
-.battery-down3 {
-  animation: downNum3 10s 1s linear forwards;
-}
-
-@keyframes downNum3 {
-  100% {
-    transform: translate(0px, 140px);
-  }
-}
-
-.battery-down2 {
-  animation: downNum2 10s 1s linear forwards;
-}
-
-@keyframes downNum2 {
-  100% {
-    transform: translate(0px, 92px);
-  }
-}
-
-.battery-down1 {
-  animation: downNum1 10s 1s linear forwards;
-}
-
-@keyframes downNum1 {
-  100% {
-    transform: translate(0px, 45px);
-  }
-}
-
-.green-position1 {
-  top: 45px;
-  position: absolute;
-  z-index: 999;
-}
-
-.green-position2 {
-  position: absolute;
-  z-index: 999;
-  top: 92px;
-}
-
-.green-position3 {
-  position: absolute;
-  z-index: 999;
-  top: 140px;
-}
-
-.green-position4 {
-  position: absolute;
-  z-index: 999;
-  top: 183px;
-}
-
-.green-position5 {
-  position: absolute;
-  z-index: 999;
-  top: 229px;
-}
-
-.green-position6 {
-  position: absolute;
-  z-index: 999;
-  top: 275px;
-}
-
-.green-position7 {
-  position: absolute;
-  z-index: 999;
-  top: 320px;
-}
-
-.bin-battery {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-around;
-  padding-left: 10px;
-  flex: 1;
-
-  .battery-list {
-    width: 98%;
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    margin-top: 5px;
-    padding-left: 2%;
-  }
-
-  .battery-list .battery-listbg {
-    width: 73px;
-    height: 36px;
-    background-image: url("../assets/statusbg.png");
-    background-size: 100% 100%;
-    display: flex;
-    font-size: 13px;
-    font-weight: 600;
-    color: #73cb95;
-  }
-
-  .battery-listbg p:first-child {
-    padding-left: 9px;
-  }
-
-  .battery-listbg p {
-    padding-top: 4px;
-    margin: 0;
-  }
-
-  .battery-list .battery-yellowlistbg {
-    width: 73px;
-    height: 36px;
-    background-image: url("../assets/yellow.png");
-    background-size: 100% 100%;
-    display: flex;
-    font-size: 13px;
-    font-weight: 600;
-    color: #f6bb47;
-    z-index: 9999;
-    display: var(--ishow);
-    position: absolute;
-  }
-
-  .battery-yellowlistbg p:first-child {
-    padding-left: 9px;
-  }
-
-  .battery-battery-yellowlistbg p {
-    margin-top: 4px;
-  }
-
-  .battery-list .battery-lightbg {
-    width: 73px;
-    height: 36px;
-    background-image: url("../assets/lightbg.png");
-    background-size: 100% 100%;
-    display: flex;
-    font-size: 12px;
-    font-weight: 600;
-    color: #233C39;
-    z-index: 999;
-    position: absolute;
-  }
-
-  .battery-lightbg p:first-child {
-    padding-left: 9px;
-  }
-
-  .battery-lightbg p {
-    margin-top: 4px;
-  }
-
-  .battery-list .battery-liststatus {
-    width: 25px;
-    height: 31px;
-    margin-top: 3px;
-    margin-left: 5px;
-  }
-
-  .battery-list .showNum {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 99;
-    right: 0px;
-    top: 0;
-    display: var(--ishow);
-  }
-
-  .batteryOne {
-    animation: batteryOnetans 8s 1s linear forwards;
-    z-index: 99;
-  }
-
-  @keyframes batteryOnetans {
-    0% {
-      transform: translate(0);
-    }
-
-    100% {
-      transform: translate(-116px, 64px);
-    }
-  }
-
-  .batteryTwo {
-    animation: batteryTwotans 8s 1s linear forwards;
-  }
-
-  @keyframes batteryTwotans {
-    0% {
-      transform: translate(0);
-    }
-
-    100% {
-      transform: translate(-116px, 19.5px);
-    }
-  }
-
-  .batteryThree {
-    animation: batteryThreetans 8s 1s linear forwards;
-  }
-
-  @keyframes batteryThreetans {
-    0% {
-      transform: translate(0);
-    }
-
-    100% {
-      transform: translate(-116px, -28.5px);
-    }
-  }
-
-  .batteryFour {
-    animation: batteryFourtans 8s 1s linear forwards;
-  }
-
-  @keyframes batteryFourtans {
-    0% {
-      transform: translate(0);
-    }
-
-    100% {
-      transform: translate(-116px, -74px);
-    }
-  }
-
-  .batteryFive {
-    animation: batteryFivetans 8s 1s linear forwards;
-  }
-
-  @keyframes batteryFivetans {
-    0% {
-      transform: translate(0);
-    }
-
-    100% {
-      transform: translate(-116px, -119px);
-    }
-  }
-
-  .batterySix {
-    animation: batterySixtans 8s 1s linear forwards;
-  }
-
-  @keyframes batterySixtans {
-    0% {
-      transform: translate(0);
-    }
-
-    100% {
-      transform: translate(-116px, -165.5px);
-    }
-  }
-
-  .batterySeven {
-    animation: batterySeventans 8s 1s linear forwards;
-  }
-
-  @keyframes batterySeventans {
-    0% {
-      transform: translate(0);
-    }
-
-    100% {
-      transform: translate(-116px, -210.5px);
-    }
-  }
-}
-
-.battery-num {
-  width: 101px;
-  flex-wrap: wrap;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 5px;
-}
-
-.battery-num img {
-  width: 101px;
-  height: 35px;
-}
-</style>

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

@@ -14,8 +14,7 @@
     </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)]">
-          
+        <div class="battery-listbg" :class="[greenBattery(index),setBatteryBg(index)]" v-if="Carconnection(index)">
           <template v-if="step >= 3 && swapCode === index">
             <p v-show="swapSoc">SOC  {{ swapSoc }}%</p>
             <p v-show="swapCurrent">{{ swapCurrent }} A</p>
@@ -46,37 +45,26 @@
 
 <script>
 /*
-    * @batteryLightStatus：控制绿电池是否亮起 
-    * @ischange：控制黄电池移动到1号仓
-    * @ischangeDown：控制将黄电池从1号仓移动到指定仓位
-    * @batteryNumber：电池编号从1开始
-    * @batteryNumberStatus：电池仓位数组的索引，即表示将几号仓位电池放入重卡,
+    * @step：动画步骤
+    * @BatteryOnCar：控制车上亏电电池是否亮起 
+    * @storeInfoList：充电仓电池列表
+    * @swapCode：换电电池编号
+    * @connectionState：车站连接状态 1已连接 0断开连接
+    * @swapCurrent：绿电池缓存电流,
+    * @swapSoc：绿电池缓存SOC,
 */
 export default {
-  props: ["binlist", "ischange", "batteryNumber", "batteryNumberStatus",
-    "ischangeDown", "batteryLightStatus", "isshowNum", "isbetteryLastLight", "yellowisshow",
-    "yellowShowCurr", "yellowShowSoc", "positionData", "greenMoveSoc", "greenMoveCurr",
-    "BatteryOnCar","storeInfoList","swapCode","connectionState","swapCurrent","swapSoc"
-  ],
+  props: ["BatteryOnCar","storeInfoList","swapCode","connectionState","swapCurrent","swapSoc","step"],
   data() {
     return {
-      classArr: ["battery-yellow"],
-      showNumClassArr: ["showNum"],
-      imgArr: ["../assets/bin1x.png", "../assets/bin2x.png"],
-      step:0
+      
     };
   },
   watch:{
-    step(val){
-      if(val === 4){
-        setTimeout(()=>{
-          Object.keys(this.yellowBattery).forEach(key => (this.yellowBattery[key] = false))
-          this.yellowBattery.yellowshow=true
-        },4000)
-      }
-    }
+    
   },
   computed:{
+    //设置黄电池动画
     yellowBattery:{
       get(){
         let cls={}
@@ -87,13 +75,29 @@ export default {
           cls['yellowAnimationOne']=true
         }else if(this.step === 3){
           cls['twostepPotion']=true
-        }else if(this.step === 4){
+        }
+        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
@@ -104,6 +108,14 @@ export default {
     },
   },
   methods: {
+    //设置车辆断开状态
+    Carconnection(index){
+      if(this.swapCode === index && this.connectionState === 0 && this.step >=3){
+        return false
+      }else{
+        return true
+      }
+    },
     //设置换电电池背景
     setBatteryBg(index){
       if(this.swapCode === index && this.step !== 5){
@@ -120,14 +132,34 @@ export default {
           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){
+        } 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
@@ -136,7 +168,6 @@ export default {
   mounted() {
    
   },
-  // computed:{}
 };
 </script>
 
@@ -168,7 +199,7 @@ export default {
   background-size: 100% 100%;
   color: #233C39;
   position: absolute;
-  z-index:9
+  z-index:99999
 }
 .yellowAnimationOne{
   animation: yellowOnestep 2s linear forwards
@@ -182,6 +213,18 @@ export default {
       transform: translate(119px, 28px);
     }
 }
+.greenAnimationZero{
+  animation: greenZerostep 2s linear forwards
+}
+@keyframes greenZerostep{
+  0%{
+      transform: translate(0);
+    }
+
+    100% {
+      transform: translate(-119px, 110px);
+    }
+}
 .greenAnimationOne{
   animation: greenOnestep 2s linear forwards
 }
@@ -206,6 +249,58 @@ export default {
       transform: translate(-119px, 18px);
     }
 }
+.greenAnimationThree{
+  animation: greenThreestep 2s linear forwards
+}
+@keyframes greenThreestep{
+  0%{
+      transform: translate(0);
+    }
+
+    100% {
+      transform: translate(-119px, -74.5px);
+    }
+}
+.greenAnimationFour{
+  animation: greenFourstep 2s linear forwards
+}
+@keyframes greenFourstep{
+  0%{
+      transform: translate(0);
+    }
+
+    100% {
+      transform: translate(-119px, -121px);
+    }
+}
+.greenAnimationFive{
+  animation: greenFivestep 2s linear forwards
+}
+@keyframes greenFivestep{
+  0%{
+      transform: translate(0);
+    }
+
+    100% {
+      transform: translate(-119px, -166px);
+    }
+}
+.greenAnimationSix{
+  animation: greenSixstep 4s linear forwards
+}
+@keyframes greenSixstep{
+  0%{
+      transform: translate(0);
+    }
+
+    100% {
+      transform: translate(-119px, -212px);
+    }
+}
+.greenStepZeroPotion{
+  left:-117px;
+  top:110px;
+}
 .greenStepOnePotion{
   left:-117px;
   top:63px;
@@ -214,7 +309,22 @@ export default {
   left:-117px;
   top:18px;
 }
-
+.greenStepThreePotion{
+  left:-117px;
+  top:-74.5px;
+}
+.greenStepFourPotion{
+  left:-117px;
+  top:-121px;
+}
+.greenStepFivePotion{
+  left:-117px;
+  top:-166px;
+}
+.greenStepSixPotion{
+  left:-117px;
+  top:-212px;
+}
 .onestepPotion{
   top: 114px;
   left: 27%;
@@ -242,9 +352,39 @@ export default {
 .yellowAnimationSwaptwo{
   transition: top 2s;
 }
+.yellowAnimationSwapthree{
+  transition: top 2s;
+}
+.yellowAnimationSwapfour{
+  transition: top 2s;
+}
+.yellowAnimationSwapfive{
+  transition: top 4s;
+}
+.yellowAnimationSwapsix{
+  transition: top 5s;
+}
 .SwaptwoPotion{
   top:96px
 }
+.SwapthreePotion{
+  top:188px
+}
+.SwapfourPotion{
+  top:233px
+}
+.SwapfivePotion{
+  top:279px
+}
+.SwapsixPotion{
+  top:325px
+}
+.yellowAnimationSwapZero{
+  transition: top 4s;
+}
+.SwapZeroPotion{
+  top:4px
+}
 .bin-bottom {
   width: 100%;
   display: flex;

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

@@ -70,28 +70,15 @@
           </ul>
           <div class="bin-info">
             <!-- 
-               * @batteryLightStatus：控制绿电池是否亮起 
-               * @ischange：控制黄电池移动到1号仓
-               * @ischangeDown：控制将黄电池从1号仓移动到指定仓位
-               * @batteryNumber：电池编号从1开始
-               * @batteryNumberStatus：电池仓位数组的索引，即表示将几号仓位电池放入重卡,
-               * @yellowisshow:控制车内黄电池显示，取值（0或1）
-               * @yellowShowCurr:控制车内黄电池显示的电流
-               * @yellowShowSoc:控制车内黄电池显示的百分比最大值：100%
-              -->
+              * @step：动画步骤
+              * @BatteryOnCar：控制车上亏电电池是否亮起 
+              * @storeInfoList：充电仓电池列表
+              * @swapCode：换电电池编号
+              * @connectionState：车站连接状态 1已连接 0断开连接
+              * @swapCurrent：绿电池缓存电流,
+              * @swapSoc：绿电池缓存SOC,
+            -->
             <BinInfomation
-              :batteryLightStatus="batteryLightStatus"
-              :isshowNum="isshowNum"
-              :yellowShowCurr="yellowShowCurr"
-              :yellowShowSoc="yellowShowSoc"
-              :ischange="ischange"
-              :ischangeDown="ischangeDown"
-              :batteryNumber="batteryNumber"
-              :greenMoveSoc="greenMoveSoc"
-              :greenMoveCurr="greenMoveCurr"
-              :isbetteryLastLight="isbetteryLastLight"
-              :positionData="positionData"
-              :batteryNumberStatus="batteryNumberStatus"
               :BatteryOnCar="swapAnimationVo.soc"
               :storeInfoList="storeInfoList"
               :swapCode="swapAnimationVo.swapCode*1"
@@ -240,7 +227,8 @@ 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 "../../utils/jsmpeg.min";
+import { getToken} from '@/utils/auth'
 export default {
   name: "PowerChangeMonitoring",
   components: {
@@ -279,35 +267,12 @@ export default {
         swapSoc: "—",
         swapCapacity: "—",
       },
-      /*电池动画开始
-       * @batteryLightStatus：控制绿电池是否亮起
-       * @ischange：控制黄电池移动到1号仓
-       * @ischangeDown：控制将黄电池从1号仓移动到指定仓位
-       * @batteryNumber：电池编号从1开始
-       * @batteryNumberStatus：电池仓位数组的索引，即表示将几号仓位电池放入重卡,
-       * @isshowNum
-       * @isbetteryLastLight:将最后的换电池充电成绿电池
-       * @greenMoveSoc:复制的绿电池数据，在动画上
-       */
-      batteryLightStatus: 0,
-      isshowNum: 0,
-      yellowisshow: 0,
-      yellowShowCurr: 0,
-      yellowShowSoc: 0,
-      ischange: 0,
-      ischangeDown: 0,
-      batteryNumber: 0,
-      greenMoveSoc: 0,
-      greenMoveCurr: 0,
-      isbetteryLastLight: 0,
-      batteryNumberStatus: [0, 0, 0, 0, 0, 0, 0],
-      positionData: [],
-      //右上角电池动画
+      //电池动画
       swapAnimationVo:{
         step:1,//动画步骤
         soc:30,//车上电池SOC
         transitCode:null,//中转仓编号
-        swapCode:2,//换电仓编号
+        swapCode:0,//换电仓编号
         connectionState:0, // 车站连接状态
         swapSoc:0, //绿电池缓存数据
         swapCurrent:0 //绿电池缓存数据
@@ -373,26 +338,28 @@ export default {
   },
   mounted() {
     //监控视频
-    const videoUrl = wsUrl.devServer.proxy["/video"].target
-    let canvas = document.getElementById("video-1");
-    console.log("JSMpeg", JSMpeg);
-    var player = new window.JSMpeg.Player(videoUrl, {
-      canvas: canvas,
-    });
-    player.play();
-    if (this.ws) {
-      this.ws.close();
+    // 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();
     }
-    this.websocketConnect();
-    //清除定时器
-    this.clearTimerList();
-    //检测断开重连
-    this.detectWebsocketConnection();
-    //开启定时器
-    this.setTimerList();
   },
   destroyed() {
     this.websocketOnClose();
+    this.clearTimerList();
   },
   computed: {
     //车辆链接状态
@@ -476,8 +443,6 @@ export default {
     },
     websocketOnMessage(m) {
       let d = JSON.parse(m.data);
-      console.log(d)
-      
       if (d.driverInfoVo) {
         this.driverInfo = d.driverInfoVo;
       }

vue.config.js

@@ -5,15 +5,7 @@ function resolve(dir) {
   return path.join(__dirname, dir)
 }
 const name = '重卡换电智能站控系统' // page title
-// All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
-  /**
-   * You will need to set publicPath if you plan to deploy your site under a sub path,
-   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
-   * then publicPath should be set to "/bar/".
-   * In most cases please use '/' !!!
-   * Detail: https://cli.vuejs.org/config/#publicpath
-   */
   publicPath: "/",
   outputDir: 'dist',
   assetsDir: 'static',
@@ -29,16 +21,13 @@ module.exports = {
     },
     proxy: {
       '/api': {
-        target: `http://192.168.1.100:8080`,
+        target: `http://192.168.2.27:8080`,
         // target: `http://172.16.12.146:8080`,
         ws: true,
         changeOrigin: true,
-        // pathRewrite: {
-        //   ['^' + process.env.VUE_APP_BASE_API]: ''
-        // }
       },
       '/ws': {
-         target: `ws://192.168.2.75:8080/ws`,
+         target: `ws://192.168.2.27:8080/ws`,
         // target: `ws://172.16.12.146:8080/ws`,
         ws: true,
         changeOrigin: true,
@@ -62,22 +51,15 @@ module.exports = {
     }
   },
   chainWebpack(config) {
-    // it can improve the speed of the first screen, it is recommended to turn on preload
-    // it can improve the speed of the first screen, it is recommended to turn on preload
     config.plugin('preload').tap(() => [
       {
         rel: 'preload',
-        // to ignore runtime.js
-        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
         fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
         include: 'initial'
       }
     ])
 
-    // when there are many pages, it will cause too many meaningless requests
     config.plugins.delete('prefetch')
-
-    // set svg-sprite-loader
     config.module
       .rule('svg')
       .exclude.add(resolve('src/icons'))
@@ -129,7 +111,6 @@ module.exports = {
                 }
               }
             })
-          // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
           config.optimization.runtimeChunk('single')
         }
       )