兼容分辨率

src/layout/components/Navbar.vue

@@ -1,10 +1,15 @@
 <template>
   <div class="navbar">
-    <div class="left-title">重卡运维监控系统</div>
+    <div class="left-title"><img :src="zkyw" alt="" /></div>
     <div class="right-menu">
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+      <el-dropdown
+        class="avatar-container right-menu-item hover-effect"
+        trigger="click"
+      >
         <div class="avatar-wrapper">
-          <span class="el-dropdown">{{ name }}<i class="el-icon-arrow-down el-icon--right"></i></span>
+          <span class="el-dropdown"
+            >{{ name }}<i class="el-icon-arrow-down el-icon--right"></i
+          ></span>
         </div>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item divided @click.native="logout">
@@ -19,10 +24,12 @@
 <script>
 import { mapGetters } from "vuex";
 import { getsafeDays } from "@/api/statistics";
+import zkyw from "@/assets/zkyw.png";
 export default {
   components: {},
   data() {
     return {
+      zkyw: zkyw,
     };
   },
   computed: {
@@ -40,9 +47,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.el-submenu__icon-arrow{
+.el-submenu__icon-arrow {
   right: -18px;
-  top:40%;
+  top: 40%;
   font-size: 16px;
   font-weight: bold;
   transform: rotate(180deg);
@@ -64,6 +71,10 @@ export default {
     line-height: 30px;
     padding-left: 20px;
     margin-right: 35px;
+    img {
+      width: 278px;
+      height: 27px;
+    }
   }
   .left-menu {
     flex: 1;
@@ -72,41 +83,41 @@ export default {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    .iconacive{
+    .iconacive {
       display: none;
     }
-    div{
+    div {
       margin-right: 35px;
     }
-    .routerlink{
+    .routerlink {
       position: relative;
     }
-    .router-link-active{
+    .router-link-active {
       color: #91fdb9;
       position: relative;
-      text-shadow: 0px 0px 8px rgba(34,123,255,0.8);
-      .iconacive{
+      text-shadow: 0px 0px 8px rgba(34, 123, 255, 0.8);
+      .iconacive {
         display: inline;
       }
-      svg:first-child{
+      svg:first-child {
         display: none;
       }
-      .el-submenu__icon-arrow{
+      .el-submenu__icon-arrow {
         right: -20px !important;
         position: absolute;
         transform: rotate(360deg);
         color: #91fdb9;
-        top:40%
+        top: 40%;
       }
     }
-    
-    span{
+
+    span {
       font-size: 20px;
       font-weight: 600;
       padding-left: 6px;
     }
-    .router-link-active::after{
-      content: '';
+    .router-link-active::after {
+      content: "";
       display: inline-block;
       width: 0;
       height: 0;
@@ -116,9 +127,9 @@ export default {
       top: 21px;
       left: 54%;
       z-index: 0;
-      }
+    }
   }
-  .safedays{
+  .safedays {
     font-size: 18px;
     font-weight: 600;
     line-height: 40px;
@@ -133,8 +144,8 @@ export default {
     align-items: center;
     justify-content: flex-end;
     padding-right: 0.8rem;
-    
-    .warn{
+
+    .warn {
       width: 92px;
       display: flex;
       font-size: 16px;
@@ -147,37 +158,38 @@ export default {
       cursor: pointer;
       height: 39px;
     }
-    .link{
+    .link {
       width: auto;
-      justify-content:flex-start;
-      img{
-       margin-right: 3px;
-       vertical-align: middle;
+      justify-content: flex-start;
+      img {
+        margin-right: 3px;
+        vertical-align: middle;
       }
     }
-  .day-value {
-    font-size: 14px;
-    line-height: 1.2rem;
-    font-family: "微软雅黑";
-  }
-  .time-value {
-    font-size: 1.7rem;
-    padding-right: 1rem;
-    width: 125px;
-  }
-  .week-value {
-    font-size: 0.5rem;
-  }
+    .day-value {
+      font-size: 14px;
+      line-height: 1.2rem;
+      font-family: "微软雅黑";
+    }
+    .time-value {
+      font-size: 1.7rem;
+      padding-right: 1rem;
+      width: 125px;
+    }
+    .week-value {
+      font-size: 0.5rem;
+    }
   }
   .right-menu {
     height: 100%;
     line-height: 34px;
-    .el-dropdown{
+    margin-right: 20px;
+    .el-dropdown {
       font-size: 16px;
       font-weight: 400;
-      color: #FFFFFF;
-      text-shadow: 0px 0px 11px rgba(34,123,255,0.8);
-      .el-icon-arrow-down:before{
+      color: #ffffff;
+      text-shadow: 0px 0px 11px rgba(34, 123, 255, 0.8);
+      .el-icon-arrow-down:before {
         bottom: -4px;
       }
     }
@@ -187,7 +199,6 @@ export default {
 
     .right-menu-item {
       display: inline-block;
-      padding: 0 8px;
       height: 100%;
       font-size: 18px;
       color: #5a5e66;
@@ -202,22 +213,22 @@ export default {
       }
     }
   }
-  .dobusiness{
+  .dobusiness {
     margin: 0 5px;
-    .el-dropdown{
+    .el-dropdown {
       font-size: 18px;
-      text-shadow: 0px 0px 11px rgba(34,123,255,0.8);
+      text-shadow: 0px 0px 11px rgba(34, 123, 255, 0.8);
       font-weight: 400;
-      color: #9D9FA4;
+      color: #9d9fa4;
       line-height: 38px;
       cursor: pointer;
     }
   }
-  .setFile{
+  .setFile {
     padding-right: 20px;
     padding-top: 4px;
   }
-  .el-icon-arrow-down:before{
+  .el-icon-arrow-down:before {
     content: "";
     width: 0;
     height: 0;
@@ -227,10 +238,10 @@ export default {
     bottom: -2px;
     display: inline-block;
   }
-  .cutApart{
+  .cutApart {
     width: 1px;
     height: 32px;
-    background: #54616D;
+    background: #54616d;
     opacity: 1;
     margin: 0 5px;
   }

src/layout/components/Sidebar.vue

@@ -40,10 +40,10 @@ export default {
   padding: 0 5px;
   box-sizing: border-box;
   overflow: hidden;
+  margin-top: 16px;
   .routerlink {
     display: flex;
     flex-direction: column;
-    margin-bottom: 16px;
     width: 80px;
     height: 80px;
     align-items: center;
@@ -62,7 +62,6 @@ export default {
   }
   .isactive {
     background-color: #636c97;
-    border-radius: 8px;
     span {
       font-weight: 500;
       color: #ffffff;
@@ -71,8 +70,6 @@ export default {
   .routerlink:hover {
     width: 80px;
     height: 80px;
-    border-radius: 8px;
-    margin-bottom: 16px;
     background-color: #1c263a;
     box-sizing: border-box;
   }

src/styles/index.scss

@@ -195,3 +195,10 @@ aside {
   position: relative;
   overflow: hidden;
 }
+.el-pagination {
+  .el-select{
+    .el-input{
+      width: 100px;
+    }
+  }
+}

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

@@ -21,7 +21,7 @@ export default {
   display: flex;
   flex-direction: column;
   width: 46%;
-  margin-bottom: 2vh;
+  margin-bottom: 18px;
   .info-electric {
     width: 100%;
     display: flex;

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

@@ -78,21 +78,21 @@ export default {
     computed:{
         chargerState(){
             if(this.chargerInfoVo.chgState === 1){
-                return [3,' 状态：准备充电']
+                return [3,' 准备充电']
             }else if(this.chargerInfoVo.chgState === 2){
-                return [1,' 状态：充电中']
+                return [1,' 充电中']
             }else if(this.chargerInfoVo.chgState === 3){
-                return [2,' 状态：充电完成']
+                return [2,' 充电完成']
             }else if(this.chargerInfoVo.chgState === 4){
-                return [8,' 状态：启动失败']
+                return [8,' 启动失败']
             }else if(this.chargerInfoVo.chgState === 5){
-                return [6,' 状态：预约']
+                return [6,' 预约']
             }else if(this.chargerInfoVo.chgState === 6){
-                return [5,' 状态：故障']
+                return [5,' 故障']
             }else if(this.chargerInfoVo.chgState === 0){
-                return [7,' 状态：空闲']
+                return [7,' 空闲']
             }else{
-                return [4,' 状态：无法获取']
+                return [4,' 无法获取']
             }
         },
         chargerColor(){
@@ -146,6 +146,8 @@ export default {
                     border: #1b71a4 solid 1px;
                     img{
                         vertical-align: middle;
+                        width: 18px;
+                        height: 18px;
                     }
                 }
                 .info-warning{

src/views/equipment-monitoring/index.scss

@@ -44,7 +44,7 @@
           }
 
           li:first-child {
-            width: 32%;
+            width: 36%;
 
             .status {
               display: flex;
@@ -53,8 +53,16 @@
               .status-list {
                 display: flex;
                 flex-direction: column;
-                padding-right: 40px;
-
+                padding-right: 30px;
+                .robot_img{
+                  width: 58px;
+                  height: 49px;
+                }
+                .robot_code{
+                  width: 58px;
+                  height: 49px;
+                  // margin-top: -9px;
+                }
                 .staus-info {
                   display: flex;
                   margin-top: 16px;
@@ -91,15 +99,20 @@
               .signal-status-list {
                 display: flex;
                 flex-direction: column;
-                padding-right: 45px;
-
+                padding-right: 30px;
+                white-space: nowrap;
                 .signal-icon {
                   position: relative;
-
+                  img:first-child{
+                    width: 58px;
+                    height: 49px;
+                  }
                   img:last-child {
                     position: absolute;
                     right: 8px;
                     bottom: 0;
+                    width: 18px;
+                    height: 18px;
                   }
                 }
 
@@ -168,6 +181,15 @@
       display: flex;
       padding: 20px;
       overflow: hidden;
+      min-height: 685px;
+      height: calc(100vh - 410px); //740 600多
+      @media screen and(max-height:770px) and (max-width: 1400px) and (min-width:1280px) {
+        min-height: 660px;
+      }
+      @media screen and(max-height:750px) and (max-width: 1300px) and (min-width:1160px) {
+        min-height: 680px;
+      }
+      // box-sizing: border-box;
       .storagebox {
         width: 100%;
         display: flex;
@@ -195,6 +217,10 @@
     }
   }
 }
+.container div:first-child .communication div:first-child img{
+  width: 30px;
+  height: 30px;
+}
 @media screen and(max-width:1800px) and(min-width:1400px) {
   .main-box .box-first .machine-right .machine-bottom ul li:last-child {
     width: 16%;
@@ -228,17 +254,6 @@
       width: 20px;
     }
   }
-  .main-box
-    .box-first
-    .machine-right
-    .machine-bottom
-    ul
-    li:first-child
-    .status
-    .status-list:last-child
-    .staus-info {
-    margin-top: 10px;
-  }
   .main-box
     .box-first
     .machine-right
@@ -250,22 +265,6 @@
     .staus-info {
     width: 0.775rem;
   }
-  .main-box
-    .box-first
-    .machine-right
-    .machine-bottom
-    ul
-    li:nth-child(2)
-    .signal-status
-    .signal-status-list
-    .signal-icon {
-    img:first-child {
-      width: 45px;
-    }
-    img:last-child {
-      width: 20px;
-    }
-  }
   .main-box
     .box-first
     .machine-right
@@ -279,7 +278,6 @@
   .container {
     div:first-child {
       .communication {
-      
         img {
           top: -1px;
           position: relative;
@@ -291,14 +289,11 @@
             top: 2px;
             margin-right: 2px;
           }
-          p{
+          p {
             margin-top: 1px;
           }
         }
-        div:first-child img {
-          width: 28px;
-          height: 28px;
-        }
+      
       }
     }
   }
@@ -306,9 +301,13 @@
     font-size: 12px !important;
     display: flex;
     position: relative;
+    img{
+      position: absolute;
+      top: 6px;
+      left: 3px;
+    }
     span {
       white-space: nowrap;
-      transform: scale(0.9);
       position: absolute;
       left: 25px;
     }
@@ -366,52 +365,9 @@
   .main-box .box-first .machine-right {
     padding-bottom: 10px;
   }
-  .main-box
-    .box-first
-    .machine-right
-    .machine-bottom
-    ul
-    li:first-child
-    .status
-    .status-list:last-child
-    .staus-info {
-    margin-top: 8px;
-  }
-  .main-box
-    .box-first
-    .machine-right
-    .machine-bottom
-    ul
-    li:nth-child(2)
-    .signal-status
-    .signal-status-list
-    .signal-icon {
-    img:first-child {
-      width: 45px;
-    }
-    img:last-child {
-      width: 20px;
-    }
-  }
-  .main-box
-    .box-first
-    .machine-right
-    .machine-bottom
-    ul
-    li:nth-child(2)
-    .signal-status
-    .signal-status-list {
-    padding-right: 35px;
-    white-space: nowrap;
-    text-align: center;
-    .signal-text {
-      transform: scale(0.9);
-    }
-  }
   .container {
     div:first-child {
       .communication {
-      
         img {
           top: -2px;
           position: relative;
@@ -424,10 +380,6 @@
             margin-right: 2px;
           }
         }
-        div:first-child img {
-          width: 28px;
-          height: 28px;
-        }
       }
     }
   }
@@ -435,15 +387,20 @@
     font-size: 12px !important;
     display: flex;
     position: relative;
+    img{
+      position: absolute;
+      top: 8px;
+      left: 3px;
+    }
     span {
       white-space: nowrap;
-      transform: scale(0.8);
       position: absolute;
-      left: 18px;
+      left: 22px;
+      top: 1px;
     }
     .text {
       left: 30px;
-      top: -1px;
+      top: 2px;
     }
   }
 }
@@ -502,7 +459,7 @@
   }
   .main-box .box-first .machine-right .machine-bottom ul .speed p {
     white-space: nowrap;
-    transform: scale(0.85);
+    transform: scale(0.9);
     margin-top: 2px;
     position: relative;
     left: -6px;
@@ -510,17 +467,7 @@
   .main-box .box-first .machine-right {
     padding-bottom: 10px;
   }
-  .main-box
-    .box-first
-    .machine-right
-    .machine-bottom
-    ul
-    li:first-child
-    .status
-    .status-list:last-child
-    .staus-info {
-    margin-top: 8px;
-  }
+
   .main-box
     .box-first
     .machine-right
@@ -531,23 +478,7 @@
     .status-list
     .staus-info
     .infotext {
-    transform: scale(0.8);
-  }
-  .main-box
-    .box-first
-    .machine-right
-    .machine-bottom
-    ul
-    li:nth-child(2)
-    .signal-status
-    .signal-status-list
-    .signal-icon {
-    img:first-child {
-      width: 45px;
-    }
-    img:last-child {
-      width: 20px;
-    }
+    transform: scale(0.9);
   }
   .main-box
     .box-first
@@ -561,13 +492,12 @@
     white-space: nowrap;
     text-align: center;
     .signal-text {
-      transform: scale(0.8);
+      transform: scale(0.9);
     }
   }
   .container {
     div:first-child {
       .communication {
-      
         img {
           top: -2px;
           position: relative;
@@ -580,10 +510,6 @@
             margin-right: 2px;
           }
         }
-        div:first-child img {
-          width: 28px;
-          height: 28px;
-        }
       }
     }
   }
@@ -591,51 +517,54 @@
     font-size: 12px !important;
     display: flex;
     position: relative;
+    img{
+      position: absolute;
+      top: 8px;
+      left: 3px;
+    }
     span {
       white-space: nowrap;
-      transform: scale(0.68);
       position: absolute;
-      left: 2px;
+      transform: scale(0.9);
+      left: 30px;
     }
     .text {
       left: 30px;
-      top: -1px;
     }
   }
   .communication .battery_title .first p {
     white-space: nowrap;
-    transform: scale(0.8);
+    transform: scale(0.9);
+    position: relative;
+    left: -4px;
   }
   .storage-item .container {
-    // span{
-    //   transform: scale(0.8);
-    // }
     .info-left .info-text {
-      transform: scale(0.8);
+      transform: scale(0.9);
     }
     .info-left .info-electric {
       div:first-child {
-        transform: scale(0.8);
+        transform: scale(0.9);
       }
     }
   }
   .power .power-text {
     span {
-      transform: scale(0.8);
+      transform: scale(0.9);
     }
   }
   .battery-number {
     span {
-      transform: scale(0.8);
+      transform: scale(0.9);
     }
   }
   .communication {
     div:nth-child(2) {
-      transform: scale(0.8);
+      transform: scale(0.9);
     }
     div {
       .storeCode_num {
-        transform: scale(0.8);
+        transform: scale(0.9);
         display: inline-block;
       }
     }

src/views/equipment-monitoring/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="main-box">
     <div class="box-first">
-      <div class="machine"><img src="@/assets/machine.png"></div>
+      <div class="machine"><img src="@/assets/machine.png" /></div>
       <div class="machine-right">
         <sub-title name="机器人信息" statement="ROBOT INFORMATION" />
         <div class="machine-bottom">
           <ul>
-            <li>
+            <!-- <li>
               <span>机器人状态</span>
               <div class="status">
                 <div class="status-list">
@@ -62,69 +62,233 @@
                   </div>
                 </div>
               </div>
+            </li> -->
+            <li>
+              <span>机器人状态</span>
+              <div class="status">
+                <div class="status-list">
+                  <img class="robot_img"
+                    :src="
+                      robotInfoVo.robotState === 1
+                        ? require('./assets/status1-active.png')
+                        : require('./assets/status1.png')
+                    "
+                  />
+                  <div class="staus-info">
+                    <div class="infoimg">
+                      <img
+                        v-if="robotInfoVo.robotState === 1"
+                        src="./assets/success.png"
+                      />
+                    </div>
+                    <div
+                      class="infotext"
+                      :class="{ active: robotInfoVo.robotState === 1 }"
+                    >
+                      就绪
+                    </div>
+                  </div>
+                </div>
+
+                <div class="status-list">
+                  <img class="robot_img"
+                    :src="
+                      robotInfoVo.robotState === 2
+                        ? require('./assets/status2-active.png')
+                        : require('./assets/status2.png')
+                    "
+                  />
+                  <div class="staus-info">
+                    <div class="infoimg">
+                      <img class="robot_img"
+                        v-if="robotInfoVo.robotState === 2"
+                        src="./assets/yunxing.png"
+                      />
+                    </div>
+                    <div
+                      class="infotext"
+                      :class="{ active: robotInfoVo.robotState === 2 }"
+                    >
+                      运行
+                    </div>
+                  </div>
+                </div>
+                <div class="status-list">
+                  <img class="robot_code"
+                    :src="
+                      robotInfoVo.robotState === 3
+                        ? require('./assets/status3-active.png')
+                        : require('./assets/status3.png')
+                    "
+                  />
+                  <div class="staus-info">
+                    <div class="infoimg">
+                      <img
+                        v-if="robotInfoVo.robotState === 3"
+                        src="./assets/yunxing.png"
+                      />
+                    </div>
+                    <div
+                      class="infotext"
+                      :class="{ active: robotInfoVo.robotState === 3 }"
+                    >
+                      完成
+                    </div>
+                  </div>
+                </div>
+                <div class="status-list">
+                  <img class="robot_img"
+                    :src="
+                      robotInfoVo.robotState === 4
+                        ? require('./assets/status4-active.png')
+                        : require('./assets/status4.png')
+                    "
+                  />
+                  <div class="staus-info">
+                    <div class="infoimg">
+                      <img
+                        v-if="robotInfoVo.robotState === 4"
+                        src="./assets/zhongzhi.png"
+                      />
+                    </div>
+                    <div
+                      class="infotext"
+                      :class="{ active: robotInfoVo.robotState === 4 }"
+                    >
+                      故障
+                    </div>
+                  </div>
+                </div>
+                <div class="status-list">
+                  <img class="robot_code"
+                    :src="
+                      robotInfoVo.robotState === 5
+                        ? require('./assets/status5-active.png')
+                        : require('./assets/status5.png')
+                    "
+                  />
+                  <div class="staus-info">
+                    <div class="infoimg">
+                      <img
+                        v-if="robotInfoVo.robotState === 5"
+                        src="./assets/zhongzhi.png"
+                      />
+                    </div>
+                    <div
+                      class="infotext"
+                      :class="{ active: robotInfoVo.robotState === 5 }"
+                    >
+                      中止
+                    </div>
+                  </div>
+                </div>
+              </div>
             </li>
             <li>
               <span>信号状态</span>
               <div class="signal-status">
                 <div class="signal-status-list">
                   <div class="signal-icon">
-                    <img src="./assets/info1.png" width="58"><img
-                      :src="robotInfoVo.plcState ? require('./assets/signal1.png') : require('./assets/signal2.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/info5.png" width="58"><img
-                      :src="robotInfoVo.walkServo ? require('./assets/signal1.png') : require('./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>
                 <div class="signal-status-list">
                   <div class="signal-icon">
-                    <img src="./assets/info4.png" width="58"><img
-                      :src="robotInfoVo.palletServo ? require('./assets/signal1.png') : require('./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/info2.png" width="58"><img
-                      :src="robotInfoVo.liftingServo ? require('./assets/signal1.png') : require('./assets/signal2.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="robotInfoVo.rotaryServo ? require('./assets/signal1.png') : require('./assets/signal2.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>
-
             </li>
             <li>
               <span>速度</span>
               <div class="speed">
-                <p>行走：<font>{{ robotInfoVo.xAxis | numFilter }}</font> <em>m/s</em></p>
-                <p>伸缩：<font>{{ robotInfoVo.yAxis | numFilter }}</font> <em>m/s</em></p>
-                <p>举升：<font>{{ robotInfoVo.zAxis | numFilter }}</font> <em>m/s</em></p>
-                <p>旋转：<font>{{ robotInfoVo.zAxis | numFilter }}</font> <em>m/s</em></p>
+                <p>
+                  行走：<font>{{ robotInfoVo.xAxis | numFilter }}</font>
+                  <em>m/s</em>
+                </p>
+                <p>
+                  伸缩：<font>{{ robotInfoVo.yAxis | numFilter }}</font>
+                  <em>m/s</em>
+                </p>
+                <p>
+                  举升：<font>{{ robotInfoVo.zAxis | numFilter }}</font>
+                  <em>m/s</em>
+                </p>
+                <p>
+                  旋转：<font>{{ robotInfoVo.zAxis | numFilter }}</font>
+                  <em>m/s</em>
+                </p>
               </div>
             </li>
             <li>
               <span>位置</span>
               <div class="speed">
-                <p>行走：<font>{{ robotInfoVo.xAxis | numFilter }}</font> <em>mm</em></p>
-                <p>伸缩：<font>{{ robotInfoVo.yAxis | numFilter }}</font> <em>mm</em></p>
-                <p>举升：<font>{{ robotInfoVo.zAxis | numFilter }}</font> <em>mm</em></p>
-                <p>旋转：<font>{{ robotInfoVo.zAxis | numFilter }}</font> <em>mm</em></p>
+                <p>
+                  行走：<font>{{ robotInfoVo.xAxis | numFilter }}</font>
+                  <em>mm</em>
+                </p>
+                <p>
+                  伸缩：<font>{{ robotInfoVo.yAxis | numFilter }}</font>
+                  <em>mm</em>
+                </p>
+                <p>
+                  举升：<font>{{ robotInfoVo.zAxis | numFilter }}</font>
+                  <em>mm</em>
+                </p>
+                <p>
+                  旋转：<font>{{ robotInfoVo.zAxis | numFilter }}</font>
+                  <em>mm</em>
+                </p>
               </div>
             </li>
             <!-- <li>
@@ -141,13 +305,25 @@
       </div>
     </div>
     <div class="box-second">
-      <sub-title name="储充信息" statement="STORAGE AND CHARGING INFORMATION" num="8" step="1" />
-      <div class="storage-bottom" :style="{ height: screenHeight }">
-        <el-carousel indicator-position="none" arrow="never" :height="height" :autoplay="false" ref="chargerPages">
+      <sub-title
+        name="储充信息"
+        statement="STORAGE AND CHARGING INFORMATION"
+        num="8"
+        step="1"
+      />
+      <div class="storage-bottom">
+        <!-- :style="{ height: screenHeight }" -->
+        <el-carousel
+          indicator-position="none"
+          arrow="never"
+          :height="height"
+          :autoplay="false"
+          ref="chargerPages"
+        >
           <el-carousel-item :key="1" :name="pageName[0]">
             <div class="storagebox">
               <StorageInfo
-                v-for="(item,index) in storeInfoListFirst"
+                v-for="(item, index) in storeInfoListFirst"
                 :key="index"
                 :store-code="item.storeCode"
                 :com-state="item.comState"
@@ -169,7 +345,7 @@
           <el-carousel-item :key="2" :name="pageName[1]">
             <div class="storagebox">
               <StorageInfo
-                v-for="(item,index) in storeInfoListSecond"
+                v-for="(item, index) in storeInfoListSecond"
                 :key="index"
                 :store-code="item.storeCode"
                 :com-state="item.comState"
@@ -191,23 +367,23 @@
         </el-carousel>
       </div>
       <div class="storage-page">
-          <a @click="clickPrev()">&lt;</a>
-          <a @click="clickPage(pageName[0])" :class="{'active':!Isactive}">1</a>
-          <span>/</span>
-          <a @click="clickPage(pageName[1])" :class="{'active':Isactive}">2</a>
-          <a @click="clickNext()">&gt;</a>
+        <a @click="clickPrev()">&lt;</a>
+        <a @click="clickPage(pageName[0])" :class="{ active: !Isactive }">1</a>
+        <span>/</span>
+        <a @click="clickPage(pageName[1])" :class="{ active: Isactive }">2</a>
+        <a @click="clickNext()">&gt;</a>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import './index.scss'
-import SubTitle from './components/SubTitle.vue'
-import StorageInfo from './components/StorageInfo.vue'
-import { getToken } from '@/utils/auth'
+import "./index.scss";
+import SubTitle from "./components/SubTitle.vue";
+import StorageInfo from "./components/StorageInfo.vue";
+import { getToken } from "@/utils/auth";
 export default {
-  name: 'EquipmentMonitoring',
+  name: "EquipmentMonitoring",
   components: {
     SubTitle,
     StorageInfo,
@@ -215,126 +391,127 @@ export default {
   data() {
     return {
       ws: null,
-      height: '100%',
+      height: "100%",
       screenHeight: null,
       robotInfoVo: {},
       storeInfoListFirst: [], // 第一屏储充信息
       storeInfoListSecond: [], // 第二屏储充信
-      pageName:['pfirst','psecond'],
+      pageName: ["pfirst", "psecond"],
       Isactive: false,
-    }
+    };
   },
   mounted() {
-    this.onLoadHeight()
-    this.changeWindow()
+    this.onLoadHeight();
+    this.changeWindow();
     if (getToken()) {
       if (this.ws) {
-        this.ws.close()
+        this.ws.close();
       }
-      this.websocketConnect()
+      this.websocketConnect();
       // 清除定时器
-      this.clearTimerList()
+      this.clearTimerList();
       // 检测断开重连
-      this.detectWebsocketConnection()
+      this.detectWebsocketConnection();
     }
   },
   destroyed() {
-    this.websocketOnClose()
-    this.clearTimerList()
+    this.websocketOnClose();
+    this.clearTimerList();
   },
   methods: {
     //走马灯分页
-    clickPage(pageId){
-        this.$refs.chargerPages.setActiveItem(pageId)
-        this.Isactive=!this.Isactive
+    clickPage(pageId) {
+      this.$refs.chargerPages.setActiveItem(pageId);
+      this.Isactive = !this.Isactive;
     },
-    clickPrev(){
-        this.$refs.chargerPages.prev()
-        this.Isactive=!this.Isactive
+    clickPrev() {
+      this.$refs.chargerPages.prev();
+      this.Isactive = !this.Isactive;
     },
-    clickNext(){
-        this.$refs.chargerPages.next()
-        this.Isactive=!this.Isactive
+    clickNext() {
+      this.$refs.chargerPages.next();
+      this.Isactive = !this.Isactive;
     },
     // 清除定时器列表
     clearTimerList() {
       if (this.wsTimer) {
-        clearInterval(this.wsTimer)
+        clearInterval(this.wsTimer);
       }
     },
     /* 设置初始视窗高度*/
     onLoadHeight() {
       this.$nextTick(() => {
-        if (document.body.clientHeight >= 1080) {
-          this.screenHeight = '63vh'
-        } else {
-          this.screenHeight = '70vh'
-        }
-      })
+        // console.log(document.body.clientHeight,'document.body.clientHeight')
+        // if (document.body.clientHeight >= 1080) {
+        //   this.screenHeight = '63vh'
+        // } else {
+        //   this.screenHeight = '70vh'
+        // }
+      });
     },
     /* 设置窗口变化高度*/
     changeWindow() {
       window.onresize = () => {
         return (() => {
-          if (document.body.clientHeight >= 1080) {
-            this.screenHeight = '63vh'
-          } else {
-            this.screenHeight = '70vh'
-          }
-        })()
-      }
+          // if (document.body.clientHeight >= 1080) {
+          //   this.screenHeight = '63vh'
+          // } else {
+          //   this.screenHeight = '70vh'
+          // }
+        })();
+      };
     },
     websocketOnOpen() {
-      console.log('socket连接成功')
-      const wsMessage={
-        type: 'page',
-        payload: 'equipment-monitoring'
-      }
-      this.ws.send(JSON.stringify(wsMessage))
+      console.log("socket连接成功");
+      const wsMessage = {
+        type: "page",
+        payload: "equipment-monitoring",
+      };
+      this.ws.send(JSON.stringify(wsMessage));
     },
     websocketOnMessage(m) {
-      const d = JSON.parse(m.data)
-      console.log(d)
+      const d = JSON.parse(m.data);
+      console.log(d);
       if (d.robotInfoVo) {
-        this.robotInfoVo = d.robotInfoVo
+        this.robotInfoVo = d.robotInfoVo;
       }
       if (d.storeInfoList) {
-        this.storeInfoListFirst = d.storeInfoList
-        this.storeInfoListSecond = d.storeInfoList.splice(5)
+        this.storeInfoListFirst = d.storeInfoList;
+        this.storeInfoListSecond = d.storeInfoList.splice(5);
       }
     },
     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() {
-      const wstoken = getToken()
-      this.ws = new WebSocket(process.env.VUE_APP_WS+'/'+wstoken)
-      this.ws.onopen = this.websocketOnOpen
-      this.ws.onerror = this.websocketOnError
-      this.ws.onmessage = this.websocketOnMessage
-      this.ws.onclose = this.websocketOnClose
-    }
-  }
-}
+      const wstoken = getToken();
+      this.ws = new WebSocket(process.env.VUE_APP_WS + "/" + wstoken);
+      this.ws.onopen = this.websocketOnOpen;
+      this.ws.onerror = this.websocketOnError;
+      this.ws.onmessage = this.websocketOnMessage;
+      this.ws.onclose = this.websocketOnClose;
+    },
+  },
+};
 </script>
 <style lang="scss">
 .el-carousel {
-    width: 100%;
-    min-height: 100%;
-    height: auto !important;
-    ul {
-        display: none;
-    }
+  width: 100%;
+  min-height: 100%;
+  height: auto !important;
+  ul {
+    display: none;
+  }
 }
 </style>

src/views/login/index.vue

@@ -218,6 +218,8 @@ $light_gray: #eee;
     top: 25vh;
     padding-top: 80px;
     background-image: url("./assets/login.png");
+    background-repeat: no-repeat;
+    background-size: contain;
 
     .login-list {
       display: flex;
@@ -228,7 +230,6 @@ $light_gray: #eee;
       p {
         font-size: 16px;
         color: white;
-        width: 48px;
         margin: 0;
         padding: 0;
         line-height: 46px;

src/views/manage-log/log.scss

@@ -1,8 +1,8 @@
 .charge-box {
     display: flex;
-    padding: 0 35px;
+    padding: 0 20px;
     flex-direction: column;
-    margin-top: 20px;
+    margin-top: 15px;
     .charge-tools {
         height: 88px;
         background-color: #111827;
@@ -56,7 +56,7 @@
         border: #192337 solid 1px;
         width: 100%;
         min-height: 68vh;
-        margin-top: 3vh;
+        margin-top: 15px;
         display: flex;
         flex-direction: column;
 

vue.config.js

@@ -5,7 +5,7 @@ const px2rem = require('postcss-px2rem')
  
 // 配置基本大小
 const postcss = px2rem({
-  // 基准大小 baseSize，需要和rem.js中相同
+  // 基准大小 baseSize，需要和flexible.js中相同
   remUnit: 80
 })
 
@@ -13,12 +13,12 @@ module.exports = {
   publicPath: "/",
   outputDir: 'dist',
   assetsDir: 'static',
-  lintOnSave: false,
+  lintOnSave: false, // 关闭语法检查 防止不必要的语法报错
   
   productionSourceMap: false,
   devServer: {
-    host: 'localhost',
-    port: 808,
+    host: '192.168.0.76',
+    port: 8080,
     open: true,
     overlay: {
       warning: false,