兼容分辨率

.env.development

@@ -2,6 +2,6 @@
 ENV = 'development'
 
 # base api
-# VUE_APP_BASE_API = 'http://zk.li-ai.com.cn:8080/api'
-VUE_APP_BASE_API = 'https://53670u39m2.goho.co/api'
+VUE_APP_BASE_API = 'http://zk.li-ai.com.cn:8080/api'
+# VUE_APP_BASE_API = 'http://192.168.0.124:8080/api'
 VUE_APP_WS = 'ws://zk.li-ai.com.cn:8080/ws'

package.json

@@ -26,10 +26,13 @@
     "js-cookie": "2.2.0",
     "jsonlint": "1.6.3",
     "jszip": "3.2.1",
+    "lib-flexible": "^0.3.2",
     "moment": "^2.29.4",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "postcss-px2rem": "^0.3.0",
+    "px2rem-loader": "^0.1.9",
     "screenfull": "4.2.0",
     "script-loader": "0.7.2",
     "sortablejs": "1.8.4",

src/layout/components/Sidebar.vue

@@ -1,73 +1,103 @@
 <template>
-    <div class="siderbar-contaiter">
-        <div v-for="(item, index) in this.permission_routes[5].children" :key="index">
-            <router-link :to="item.path" class="routerlink" :class="[$route.name===item.name?'isactive':'']">
-                <img :src="$route.name===item.name?require(`./assets/i${index+1}-active.png`):require(`./assets/i${index+1}.png`)">
-                <span>{{item.meta.title}}</span>
-            </router-link>
-        </div>
+  <div class="siderbar-contaiter">
+    <div
+      v-for="(item, index) in this.permission_routes[5].children"
+      :key="index"
+    >
+      <router-link
+        :to="item.path"
+        class="routerlink"
+        :class="[$route.name === item.name ? 'isactive' : '']"
+      >
+        <img
+          :src="
+            $route.name === item.name
+              ? require(`./assets/i${index + 1}-active.png`)
+              : require(`./assets/i${index + 1}.png`)
+          "
+        />
+        <span>{{ item.meta.title }}</span>
+      </router-link>
     </div>
+  </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
 export default {
-    name:'Sidebar',
-    computed: {
+  name: "Sidebar",
+  computed: {
     ...mapGetters(["permission_routes"]),
   },
-  mounted(){
-
-  }
-}
+  mounted() {},
+};
 </script>
 
 <style lang="scss" scoped>
-    .siderbar-contaiter{
-        width: 90px!important;
-        height: 100%;
-        padding: 0 5px;
-        box-sizing: border-box;
-        overflow: hidden;
-        .routerlink{
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 16px;
-            width: 80px;
-            height: 80px;
-            align-items: center;
-            justify-content:space-evenly;
-            img{
-                width: 24px;
-                height: 24px;
-                
-            }
-            span{
-                width: 100%;
-                text-align: center;
-                font-size: 14px;
-                font-weight: 500;
-                color: #9AA6BB;
-            }
-        }
-        .isactive{
-            background-color: #636C97;
-            border-radius: 8px;
-            span{
-                font-weight: 500;
-                color: #FFFFFF;
-            }  
-        }
-        .routerlink:hover{
-            width: 80px;
-            height: 80px;
-            border-radius: 8px;
-            margin-bottom: 16px;
-            background-color: #1C263A;
-            box-sizing:border-box;
-        }
-        .isactive:hover{
-            background-color: #636C97;
-        }
+.siderbar-contaiter {
+  width: 90px !important;
+  height: 100%;
+  padding: 0 5px;
+  box-sizing: border-box;
+  overflow: hidden;
+  .routerlink {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 16px;
+    width: 80px;
+    height: 80px;
+    align-items: center;
+    justify-content: space-evenly;
+    img {
+      width: 24px;
+      height: 24px;
+    }
+    span {
+      width: 100%;
+      text-align: center;
+      font-size: 14px;
+      font-weight: 500;
+      color: #9aa6bb;
+    }
+  }
+  .isactive {
+    background-color: #636c97;
+    border-radius: 8px;
+    span {
+      font-weight: 500;
+      color: #ffffff;
+    }
+  }
+  .routerlink:hover {
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    background-color: #1c263a;
+    box-sizing: border-box;
+  }
+  .isactive:hover {
+    background-color: #636c97;
+  }
+}
+@media screen and (max-width: 1400px) {
+  .siderbar-contaiter {
+    .routerlink {
+      span {
+        transform: scale(0.8);
+        width: calc(100% + 60px);
+      }
+    }
+  }
+}
+@media screen and(max-width:1279px) {
+  .siderbar-contaiter {
+    .routerlink {
+      span {
+        transform: scale(0.7);
+        width: calc(100% + 60px);
+      }
     }
+  }
+}
 </style>

src/main.js

@@ -27,6 +27,8 @@ Object.keys(filters).forEach(key => {
 })
 Vue.prototype.$moment = moment;
 Vue.config.productionTip = false
+//引入flexible
+import './utils/flexible.js'
 new Vue({
   el: '#app',
   router,

src/styles/element-ui.scss

@@ -345,6 +345,7 @@
     .el-dialog__header{
       background: url('../assets/onlinet.png') no-repeat top;
       border-bottom: #2d3448 solid 1px;
+      background-size: contain;
       padding-left: 0px;
       .el-dialog__title{
         color: white;
@@ -359,6 +360,7 @@
     }
     .el-dialog__footer{
       background: url('../assets/onlineb.png') no-repeat bottom;
+      background-size: contain;
     }
     .el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close{
       color: white;
@@ -409,6 +411,7 @@
       background: url('../assets/roletop.png') no-repeat top;
       border-bottom: #2d3448 solid 1px;
       padding-left: 0px;
+      background-size: contain;
       .el-dialog__title{
         color: white;
         width: 110px;
@@ -422,6 +425,7 @@
     }
     .el-dialog__footer{
       background: url('../assets/roleb.png') no-repeat bottom;
+      background-size: contain;
     }
     .el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close{
       color: white;

src/utils/flexible.js

@@ -0,0 +1,125 @@
+
+;(function(win, lib) {
+    var doc = win.document;
+    var docEl = doc.documentElement;
+    var metaEl = doc.querySelector('meta[name="viewport"]');
+    var flexibleEl = doc.querySelector('meta[name="flexible"]');
+    var dpr = 0;
+    var scale = 0;
+    var tid;
+    var flexible = lib.flexible || (lib.flexible = {});
+
+    if (metaEl) {
+        console.warn('将根据已有的meta标签来设置缩放比例');
+        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
+        if (match) {
+            scale = parseFloat(match[1]);
+            dpr = parseInt(1 / scale);
+        }
+    } else if (flexibleEl) {
+        var content = flexibleEl.getAttribute('content');
+        if (content) {
+            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
+            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
+            if (initialDpr) {
+                dpr = parseFloat(initialDpr[1]);
+                scale = parseFloat((1 / dpr).toFixed(2));
+            }
+            if (maximumDpr) {
+                dpr = parseFloat(maximumDpr[1]);
+                scale = parseFloat((1 / dpr).toFixed(2));
+            }
+        }
+    }
+
+    if (!dpr && !scale) {
+        var isAndroid = win.navigator.appVersion.match(/android/gi);
+        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
+        var devicePixelRatio = win.devicePixelRatio;
+        if (isIPhone) {
+            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
+            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
+                dpr = 3;
+            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
+                dpr = 2;
+            } else {
+                dpr = 1;
+            }
+        } else {
+            // 其他设备下，仍旧使用1倍的方案
+            dpr = 1;
+        }
+        scale = 1 / dpr;
+    }
+
+    docEl.setAttribute('data-dpr', dpr);
+    if (!metaEl) {
+        metaEl = doc.createElement('meta');
+        metaEl.setAttribute('name', 'viewport');
+        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
+        if (docEl.firstElementChild) {
+            docEl.firstElementChild.appendChild(metaEl);
+        } else {
+            var wrap = doc.createElement('div');
+            wrap.appendChild(metaEl);
+            doc.write(wrap.innerHTML);
+        }
+    }
+
+    function refreshRem(){
+        var width = docEl.getBoundingClientRect().width;
+        // if (width / dpr > 540) {
+        //     width = 540 * dpr;
+        // }
+        if (width / dpr > 1920) {
+            width = 1920 * dpr;
+        }
+        if(rem < 12){
+            rem = 12
+        }
+        //把屏幕分成24等份-->例如1920的话 1920/24=80px   则 1rem = 80px
+        var rem = width / 24;
+        docEl.style.fontSize = rem + 'px';
+        flexible.rem = win.rem = rem;
+    }
+
+    win.addEventListener('resize', function() {
+        clearTimeout(tid);
+        tid = setTimeout(refreshRem, 300);
+    }, false);
+    win.addEventListener('pageshow', function(e) {
+        if (e.persisted) {
+            clearTimeout(tid);
+            tid = setTimeout(refreshRem, 300);
+        }
+    }, false);
+
+    if (doc.readyState === 'complete') {
+        doc.body.style.fontSize = 12 * dpr + 'px';
+    } else {
+        doc.addEventListener('DOMContentLoaded', function(e) {
+            doc.body.style.fontSize = 12 * dpr + 'px';
+        }, false);
+    }
+
+
+    refreshRem();
+
+    flexible.dpr = win.dpr = dpr;
+    flexible.refreshRem = refreshRem;
+    flexible.rem2px = function(d) {
+        var val = parseFloat(d) * this.rem;
+        if (typeof d === 'string' && d.match(/rem$/)) {
+            val += 'px';
+        }
+        return val;
+    }
+    flexible.px2rem = function(d) {
+        var val = parseFloat(d) / this.rem;
+        if (typeof d === 'string' && d.match(/px$/)) {
+            val += 'rem';
+        }
+        return val;
+    }
+
+})(window, window['lib'] || (window['lib'] = {}));

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

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="communication">
-            <div><img src="../assets/cangwei.png" />{{storeCode}}号仓位</div>
+            <div><img src="../assets/cangwei.png" /><span class="storeCode_num">{{storeCode}}号仓位</span></div>
             <div :class="statustext[1]">{{statustext[0]}}</div>
         </div>
         <div class="battery-number">

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

@@ -17,7 +17,7 @@
                 <BatteryInfo :num="minCellVoltage" unit="V" text="最低单体电压"></BatteryInfo>
                 <BatteryInfo :num="soh" unit="%" text="SOH"></BatteryInfo>
                 <div class="info-right">
-                    <img src="../assets/s1.png">{{StateNum}}
+                    <img src="../assets/s1.png"><span class="text">{{StateNum}}</span>
                 </div>
             </div>
             <div class="battery-charger">
@@ -35,7 +35,7 @@
                     <BatteryInfo :num="chargerInfoVo.chgVoltage" unit="V" text="充电电压"></BatteryInfo>
                     <BatteryInfo :num="chargerInfoVo.chgCapacity" unit="kwh" text="充电电量"></BatteryInfo>
                     <div class="info-right" :style="chargerColor">
-                        <img :src="require('../assets/'+`s${chargerState[0]}`+'.png')">{{chargerState[1]}}
+                        <img :src="require('../assets/'+`s${chargerState[0]}`+'.png')"><span>{{chargerState[1]}}</span>
                     </div>
                 </div>
                 <img src="../assets/nodata.png" class="nodata" v-show="!chargerInfoVo.chargerCode">
@@ -168,9 +168,10 @@ export default {
                 min-height: 228px;
                 .nodata{
                     position: relative;
-                    left: 40%;
+                    left: calc(50% - 33px);
                     margin-top: 6vh;
-                    
+                    width: 66px;
+                    height: 66px;
                 }
             }
         }

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

@@ -306,7 +306,7 @@ export default {
 
 .name {
   color: white;
-  font-size: 1.2rem;
+  font-size: 20px;
   font-weight: 600;
   text-shadow: 0 0 3px #1753ce, 0 0 4px #1753ce, 0 0 3px #1753ce, 0 0 3px #1753ce;
   margin-left: -4.2%;
@@ -327,7 +327,7 @@ export default {
 
 .statement {
   color: #324264;
-  font-size: 0.6rem;
+  font-size: 14px;
   margin: 0 8px;
   font-weight: 600;
   padding-top: 9px;

src/views/equipment-monitoring/index.scss

@@ -1,196 +1,643 @@
 .main-box {
+  display: flex;
+  flex-direction: column;
+  padding: 15px 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+  .box-first {
     display: flex;
-    flex-direction: column;
-    padding:15px 20px;
-    overflow: hidden;
-    box-sizing: border-box;
-    .box-first {
-        display: flex;
-        flex-direction: row;
+    flex-direction: row;
 
-        .machine {
-            width: 400px;
-            text-align: center;
-        }
+    .machine {
+      width: 400px;
+      text-align: center;
+      img {
+        width: 343px;
+        height: 236px;
+      }
+    }
 
-        .machine-right {
-            flex: 1;
+    .machine-right {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      background: #111827;
+      height: 100%;
+      padding-bottom: 20px;
+
+      .machine-bottom {
+        padding: 0 30px;
+        margin-top: 28px;
+        ul {
+          display: flex;
+          list-style-type: none;
+          padding: 0;
+          margin: 0;
+          span {
+            color: #82879d;
+            font-size: 18px;
+            font-weight: 600;
+          }
+          li {
             display: flex;
             flex-direction: column;
-            background: #111827;
-            height: 100%;
-            padding-bottom: 20px;
-
-            .machine-bottom {
-                padding: 0 30px;
-                margin-top: 28px;
-                ul {
-                    display: flex;
-                    list-style-type: none;
-                    padding: 0;
-                    margin: 0;
-                    span {
-                        color: #82879d;
-                        font-size: 18px;
-                        font-weight: 600;
-                    }
-                    li {
-                        display: flex;
-                        flex-direction: column;
-                    }
-
-                    li:first-child {
-                        width: 32%;
-
-                        .status {
-                            display: flex;
-                            margin-top: 35px;
-
-                            .status-list {
-                                display: flex;
-                                flex-direction: column;
-                                padding-right: 40px;
-
-                                .staus-info {
-                                    display: flex;
-                                    margin-top: 16px;
-                                    justify-content: space-between;
-                                    width: 58px;
-                                    .infoimg {
-                                        width: 17px;
-                                        height: 17px;
-                                        background-image: url('./assets/default.png');
-                                    }
-
-                                    .infotext {
-                                        font-size: 16px;
-                                        font-weight: 500;
-                                        color: #636c97;
-                                    }
-
-                                    .active {
-                                        color: white;
-                                        font-weight: 400;
-                                    }
-                                }
-                            }
-                        }
-
-                    }
-
-                    li:nth-child(2) {
-                        flex: 1;
-
-                        .signal-status {
-                            display: flex;
-                            margin-top: 35px;
-
-                            .signal-status-list {
-                                display: flex;
-                                flex-direction: column;
-                                padding-right: 45px;
-
-                                .signal-icon {
-                                    position: relative;
-
-                                    img:last-child {
-                                        position: absolute;
-                                        right: 8px;
-                                        bottom: 0;
-                                    }
-                                }
-
-                                .signal-text {
-                                    margin-top: 10px;
-                                    font-size: 16px;
-                                    font-weight: 500;
-                                    color: #636c97;
-                                }
-                            }
-                        }
-                    }
-
-                    li:nth-child(3) {
-                        width: 16%;
-                    }
-                    .speed {
-                        display: flex;
-                        flex-direction: column;
-                        color: #596189;
-                        font-size: 16px;
-                        font-weight: 600;
-                        margin-top: 13px;
-                        justify-content: space-between;
-                        p {
-                            margin: 0;
-                            padding: 0;
-                            margin-top: 8px;
-                            font {
-                                color: white;
-                            }
-
-                            em {
-                                font-style: normal;
-                                color: #323858;
-                                font-size: 14px;
-                            }
-                        }
-
-                        
-                    }
-                    li:last-child {
-                        width: 10%;
-
-                        .times {
-                            color: #596189;
-                            font-size: 16px;
-                            font-weight: 600;
-                            margin-top: 28px;
-                            font{
-                                color: white;
-                                font-size: 14px;
-                            };
-                        }
-                        .times:last-child{
-                            margin-top: 20px;
-                        }
-                    }
+          }
+
+          li:first-child {
+            width: 32%;
+
+            .status {
+              display: flex;
+              margin-top: 35px;
+
+              .status-list {
+                display: flex;
+                flex-direction: column;
+                padding-right: 40px;
+
+                .staus-info {
+                  display: flex;
+                  margin-top: 16px;
+                  justify-content: space-between;
+                  width: 58px;
+                  .infoimg {
+                    width: 17px;
+                    height: 17px;
+                    background-image: url("./assets/default.png");
+                  }
+
+                  .infotext {
+                    font-size: 16px;
+                    font-weight: 500;
+                    color: #636c97;
+                  }
+
+                  .active {
+                    color: white;
+                    font-weight: 400;
+                  }
                 }
+              }
             }
-        }
-    }
-    .box-second{
-        display: flex;
-        flex-direction: column;
-        background-color: #111827;
-        .storage-bottom {
-            display: flex;
-            padding: 20px;
-            overflow: hidden;
-            .storagebox{
-                width: 100%;
+          }
+
+          li:nth-child(2) {
+            flex: 1;
+
+            .signal-status {
+              display: flex;
+              margin-top: 35px;
+
+              .signal-status-list {
                 display: flex;
+                flex-direction: column;
+                padding-right: 45px;
+
+                .signal-icon {
+                  position: relative;
+
+                  img:last-child {
+                    position: absolute;
+                    right: 8px;
+                    bottom: 0;
+                  }
+                }
+
+                .signal-text {
+                  margin-top: 10px;
+                  font-size: 16px;
+                  font-weight: 500;
+                  color: #636c97;
+                }
+              }
             }
-        }
-        .storage-page{
-            text-align: right;
-            color: #fff;
-            padding-right: 30px;
-            font-size: 13px;
-            padding-bottom: 10px;
-            span{
-                padding: 0 6px;
+          }
+
+          li:nth-child(3) {
+            width: 16%;
+          }
+          .speed {
+            display: flex;
+            flex-direction: column;
+            color: #596189;
+            font-size: 16px;
+            font-weight: 600;
+            margin-top: 13px;
+            justify-content: space-between;
+            p {
+              margin: 0;
+              padding: 0;
+              margin-top: 8px;
+              font {
+                color: white;
+              }
+
+              em {
+                font-style: normal;
+                color: #323858;
+                font-size: 14px;
+              }
             }
-            a{
-                margin-right: 10px;
+          }
+          li:last-child {
+            width: 10%;
+
+            .times {
+              color: #596189;
+              font-size: 16px;
+              font-weight: 600;
+              margin-top: 28px;
+              font {
+                color: white;
+                font-size: 14px;
+              }
             }
-            a.active{
-                color: #1890ff;
-                border: #1890ff solid 1px;
-                background-color: #111827;
-                padding:0 4px;
-                text-align: center;
+            .times:last-child {
+              margin-top: 20px;
             }
+          }
         }
+      }
+    }
+  }
+  .box-second {
+    display: flex;
+    flex-direction: column;
+    background-color: #111827;
+    .storage-bottom {
+      display: flex;
+      padding: 20px;
+      overflow: hidden;
+      .storagebox {
+        width: 100%;
+        display: flex;
+      }
+    }
+    .storage-page {
+      text-align: right;
+      color: #fff;
+      padding-right: 30px;
+      font-size: 13px;
+      padding-bottom: 10px;
+      span {
+        padding: 0 6px;
+      }
+      a {
+        margin-right: 10px;
+      }
+      a.active {
+        color: #1890ff;
+        border: #1890ff solid 1px;
+        background-color: #111827;
+        padding: 0 4px;
+        text-align: center;
+      }
+    }
+  }
+}
+@media screen and(max-width:1800px) and(min-width:1400px) {
+  .main-box .box-first .machine-right .machine-bottom ul li:last-child {
+    width: 16%;
+  }
+  .main-box
+    .box-first
+    .machine-right
+    .machine-bottom
+    ul
+    li:first-child
+    .status
+    .status-list
+    img {
+    width: 45px;
+  }
+  .main-box
+    .box-first
+    .machine-right
+    .machine-bottom
+    ul
+    li:first-child
+    .status
+    .status-list
+    .staus-info
+    .infoimg {
+    width: 25px;
+    background-repeat: no-repeat;
+    height: 25px;
+    margin-top: -3px;
+    img {
+      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
+    .machine-bottom
+    ul
+    li:first-child
+    .status
+    .status-list
+    .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
+    .machine-bottom
+    ul
+    li:nth-child(2)
+    .signal-status
+    .signal-status-list {
+    padding-right: 30px;
+  }
+  .container {
+    div:first-child {
+      .communication {
+      
+        img {
+          top: -1px;
+          position: relative;
+          margin-right: 2px;
+        }
+        .battery_title {
+          img {
+            position: relative;
+            top: 2px;
+            margin-right: 2px;
+          }
+          p{
+            margin-top: 1px;
+          }
+        }
+        div:first-child img {
+          width: 28px;
+          height: 28px;
+        }
+      }
+    }
+  }
+  .storage-item .container .battery-info .info-right {
+    font-size: 12px !important;
+    display: flex;
+    position: relative;
+    span {
+      white-space: nowrap;
+      transform: scale(0.9);
+      position: absolute;
+      left: 25px;
+    }
+    .text {
+      left: 30px;
+      top: -1px;
+    }
+  }
+}
+@media screen and(max-width:1400px) and(min-width:1279px) {
+  .main-box .box-first .machine-right .machine-bottom ul li:last-child {
+    width: 16%;
+  }
+  .main-box
+    .box-first
+    .machine-right
+    .machine-bottom
+    ul
+    li:first-child
+    .status
+    .status-list
+    .staus-info {
+    width: 0.775rem;
+  }
+  .main-box
+    .box-first
+    .machine-right
+    .machine-bottom
+    ul
+    li:first-child
+    .status
+    .status-list
+    img {
+    width: 45px;
+  }
+  .main-box
+    .box-first
+    .machine-right
+    .machine-bottom
+    ul
+    li:first-child
+    .status
+    .status-list
+    .staus-info
+    .infoimg {
+    width: 18px;
+    background-repeat: no-repeat;
+    height: 18px;
+    margin-top: -1px;
+    background-size: contain;
+    img {
+      width: 20px;
+    }
+  }
+  .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;
+          margin-right: 2px;
+        }
+        .battery_title {
+          img {
+            position: relative;
+            top: 2px;
+            margin-right: 2px;
+          }
+        }
+        div:first-child img {
+          width: 28px;
+          height: 28px;
+        }
+      }
+    }
+  }
+  .storage-item .container .battery-info .info-right {
+    font-size: 12px !important;
+    display: flex;
+    position: relative;
+    span {
+      white-space: nowrap;
+      transform: scale(0.8);
+      position: absolute;
+      left: 18px;
+    }
+    .text {
+      left: 30px;
+      top: -1px;
+    }
+  }
+}
+@media screen and(max-width:1279px) {
+  .main-box .box-first .machine-right .machine-bottom ul li:last-child {
+    width: 16%;
+  }
+  .main-box
+    .box-first
+    .machine-right
+    .machine-bottom
+    ul
+    li:first-child
+    .status
+    .status-list
+    img {
+    width: 45px;
+  }
+  .main-box
+    .box-first
+    .machine-right
+    .machine-bottom
+    ul
+    li:first-child
+    .status
+    .status-list {
+    padding-right: 15px;
+    align-items: center;
+  }
+  .main-box
+    .box-first
+    .machine-right
+    .machine-bottom
+    ul
+    li:first-child
+    .status
+    .status-list
+    .staus-info {
+    white-space: nowrap;
+    text-align: center;
+    width: 70px;
+    .infoimg {
+      width: 20px;
+      background-repeat: no-repeat;
+      height: 20px;
+      margin-top: 2px;
+      background-size: contain;
+      margin-right: 5px;
+      img {
+        width: 20px;
+        height: 20px;
+        position: relative;
+        top: -2px;
+      }
+    }
+  }
+  .main-box .box-first .machine-right .machine-bottom ul .speed p {
+    white-space: nowrap;
+    transform: scale(0.85);
+    margin-top: 2px;
+    position: relative;
+    left: -6px;
+  }
+  .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:first-child
+    .status
+    .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;
+    }
+  }
+  .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.8);
+    }
+  }
+  .container {
+    div:first-child {
+      .communication {
+      
+        img {
+          top: -2px;
+          position: relative;
+          margin-right: 2px;
+        }
+        .battery_title {
+          img {
+            position: relative;
+            top: 2px;
+            margin-right: 2px;
+          }
+        }
+        div:first-child img {
+          width: 28px;
+          height: 28px;
+        }
+      }
+    }
+  }
+  .storage-item .container .battery-info .info-right {
+    font-size: 12px !important;
+    display: flex;
+    position: relative;
+    span {
+      white-space: nowrap;
+      transform: scale(0.68);
+      position: absolute;
+      left: 2px;
+    }
+    .text {
+      left: 30px;
+      top: -1px;
+    }
+  }
+  .communication .battery_title .first p {
+    white-space: nowrap;
+    transform: scale(0.8);
+  }
+  .storage-item .container {
+    // span{
+    //   transform: scale(0.8);
+    // }
+    .info-left .info-text {
+      transform: scale(0.8);
+    }
+    .info-left .info-electric {
+      div:first-child {
+        transform: scale(0.8);
+      }
+    }
+  }
+  .power .power-text {
+    span {
+      transform: scale(0.8);
+    }
+  }
+  .battery-number {
+    span {
+      transform: scale(0.8);
+    }
+  }
+  .communication {
+    div:nth-child(2) {
+      transform: scale(0.8);
+    }
+    div {
+      .storeCode_num {
+        transform: scale(0.8);
+        display: inline-block;
+      }
     }
-}
+  }
+}

src/views/manage-log/battery-charger.vue

@@ -1,359 +1,417 @@
 <template>
-    <div class="charge-box">
-      <div class="charge-tools">
-        <el-form :inline="true" :model="queryParams">
-          <el-form-item label="日志范围：" style="margin-left: 35px">
-            <el-select 
-              multiple
-              v-model="robotValue" 
-              clearable 
-              placeholder="请选择"
-              @change="changeSelect"
-              collapse-tags
-              @remove-tag="removeTag"
-            >
-              <el-option label="全选" value="全选" @click.native="selectAll"></el-option>
-              <el-option
-                v-for="item in logOptions"
-                :key="item.alarmCode"
-                :label="item.alarmName"
-                :value="item.alarmCode"
-              />
-            </el-select>
-          </el-form-item>
-          
-          <el-form-item label="充电机ID：" style="margin-left: 35px">
-          <el-select v-model="queryParams.deviceNo" clearable placeholder="请选择">
+  <div class="charge-box">
+    <div class="charge-tools">
+      <el-form :inline="true" :model="queryParams">
+        <el-form-item label="日志范围：" style="margin-left: 35px">
+          <el-select
+            multiple
+            v-model="robotValue"
+            clearable
+            placeholder="请选择"
+            @change="changeSelect"
+            collapse-tags
+            @remove-tag="removeTag"
+          >
+            <el-option
+              label="全选"
+              value="全选"
+              @click.native="selectAll"
+            ></el-option>
+            <el-option
+              v-for="item in logOptions"
+              :key="item.alarmCode"
+              :label="item.alarmName"
+              :value="item.alarmCode"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="充电机ID：" style="margin-left: 35px">
+          <el-select
+            v-model="queryParams.deviceNo"
+            clearable
+            placeholder="请选择"
+          >
             <el-option
               v-for="item in chargerArr"
               :key="item.value"
-              :label="item+'号充电机'"
+              :label="item + '号充电机'"
               :value="item"
             />
           </el-select>
         </el-form-item>
 
-          <el-form-item label="时间范围:" style="margin-left: 50px">
-            <el-date-picker
-              v-model="dateTime"
-              class="times"
-              type="datetimerange"
-              range-separator="至"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-              format="yyyy-MM-dd HH:mm:ss"
-            />
-          </el-form-item>
-  
-          <el-form-item>
-            <el-button type="primary" class="serch actve" @click="handleQuery">查询</el-button>
-            <el-button type="primary" class="serch" @click="resetForm">重置</el-button>
-          </el-form-item>
-  
-        </el-form>
-      </div>
-  
-      <div class="charge-table">
-        <div class="charge-table-top">
-          <el-button type="primary" class="daochu" @click="chargeExport">导出结果</el-button>
-        </div>
-        <div class="charge-table-bottom">
-          <el-table
-            :data="datalist"
-            :header-cell-style="{
-              background: '#1d283e',
-              borderColor: '#2f3c86',
-              height: '36px',
-              lineHeight: '36px',
-              color:'white',
-              fontSize: '15px',
-            }"
-            stripe
-            fit
-            :height="tableheight"
-            style="width: 100%"
-            ref="tblist"
-            v-loading="loading"
+        <el-form-item label="时间范围:" style="margin-left: 50px">
+          <el-date-picker
+            v-model="dateTime"
+            class="times"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            format="yyyy-MM-dd HH:mm:ss"
+          />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" class="serch actve" @click="handleQuery"
+            >查询</el-button
           >
+          <el-button type="primary" class="serch" @click="resetForm"
+            >重置</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="charge-table">
+      <div class="charge-table-top">
+        <el-button type="primary" class="daochu" @click="chargeExport"
+          >导出结果</el-button
+        >
+      </div>
+      <div class="charge-table-bottom">
+        <el-table
+          :data="datalist"
+          :header-cell-style="{
+            background: '#1d283e',
+            borderColor: '#2f3c86',
+            height: '36px',
+            lineHeight: '36px',
+            color: 'white',
+            fontSize: '15px',
+          }"
+          stripe
+          fit
+          :height="tableheight"
+          style="width: 100%"
+          ref="tblist"
+          v-loading="loading"
+        >
           <el-table-column
+            v-if="logOptions.length > 0"
             prop="time"
             label="发生时间"
             fixed
-            width="150">
+            width="150"
+          >
           </el-table-column>
           <el-table-column
+            v-if="logOptions.length > 0"
             prop="deviceNo"
             label="充电机ID"
             fixed
-            width="150">
+            width="150"
+          >
           </el-table-column>
-          <el-table-column v-for="log in logheader" :key="log.alarmCode" :label="log.alarmName" :render-header="labelHead">
+          <el-table-column
+            v-for="log in logheader"
+            :key="log.alarmCode"
+            :label="log.alarmName"
+            :render-header="labelHead"
+          >
             <template slot-scope="scope">
               {{ scope.row[log.alarmId] }}
             </template>
           </el-table-column>
-          </el-table>
-        </div>
-        <div class="pageblock">
-          <el-pagination
-            :current-page="queryParams.page"
-            :page-sizes="[10, 20, 30, 40]"
-            :page-size="queryParams.pageSize"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="total"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          />
-        </div>
+        </el-table>
       </div>
-      <!--导出弹窗-->
-      <div class="rolemanage chargeshow">
-        <el-dialog
-          title="生成导出任务"
-          :visible.sync="dialogExportVisible"
-          :destroy-on-close="true"
-        >
-          <div class="setExport">
-            <el-form :model="ruleForm" :rules="rules" ref="ExportForm">
-              <el-form-item label="任务名称" prop="exportName">
-                <el-input v-model="ruleForm.exportName" placeholder="请输入任务名称"></el-input>
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" @click="AddExport">生成</el-button>
-              </el-form-item>
-            </el-form>
-            <div class="descript">说明：导出任务生成后，你可以在数据导出列表中进行查询和下载</div>
-          </div>
-        </el-dialog>
+      <div class="pageblock">
+        <el-pagination
+          :current-page="queryParams.page"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="queryParams.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
       </div>
-      <!--导出弹窗结束-->
     </div>
-  </template>
-  
-  <script>
-  import './log.scss'
-  import { getChargeCode } from '@/api/records'
-  import { chargerModel,chargerList,exportFile } from '@/api/log'
-  export default {
-    name: 'BatteryCharger',
-    components: {},
-    data() {
-      return {
-        // 查询时间数组
-        dateTime: '',
-        // 充电机ID下拉列表
-        chargerArr: null,
-        // 数据列表
-        datalist: [],
-        // 查询参数
-        queryParams: {
-          page: 1, // 当前页
-          pageSize: 10, // 每页条数
-          deviceNo: undefined, // 充电机ID
-          endTime: undefined, // 电池编号
-          signals: undefined, // 排序字段
-          startTime: undefined,// 排序方式
-          sort:1
-        },
-        total: 0, // 总条数，
-        tableheight: 0, // 表格高度设置
-        dialogExportVisible: false, // 弹窗显示
-        checked: false,
-        indeterminate: false,
-        robotValue:'',
-        logOptions: [],
-        logheader:[],
-        heightTimer:false,
-        loading: false,
-        ruleForm:{
-          exportName:undefined,
-        },
-        rules:{
-          exportName: [
-              { required: true, message: '请输入任务名称', trigger: 'blur' },
-              { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
-            ],
-        }
+    <!--导出弹窗-->
+    <div class="rolemanage chargeshow">
+      <el-dialog
+        title="生成导出任务"
+        :visible.sync="dialogExportVisible"
+        :destroy-on-close="true"
+      >
+        <div class="setExport">
+          <el-form :model="ruleForm" :rules="rules" ref="ExportForm">
+            <el-form-item label="任务名称" prop="exportName">
+              <el-input
+                v-model="ruleForm.exportName"
+                placeholder="请输入任务名称"
+              ></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="AddExport">生成</el-button>
+            </el-form-item>
+          </el-form>
+          <div class="descript">
+            说明：导出任务生成后，你可以在数据导出列表中进行查询和下载
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+    <!--导出弹窗结束-->
+  </div>
+</template>
+
+<script>
+import "./log.scss";
+import { getChargeCode } from "@/api/records";
+import { chargerModel, chargerList, exportFile } from "@/api/log";
+export default {
+  name: "BatteryCharger",
+  components: {},
+  data() {
+    return {
+      // 查询时间数组
+      dateTime: "",
+      // 充电机ID下拉列表
+      chargerArr: null,
+      // 数据列表
+      datalist: [],
+      // 查询参数
+      queryParams: {
+        page: 1, // 当前页
+        pageSize: 10, // 每页条数
+        deviceNo: undefined, // 充电机ID
+        endTime: undefined, // 电池编号
+        signals: undefined, // 排序字段
+        startTime: undefined, // 排序方式
+        sort: 1,
+      },
+      total: 0, // 总条数，
+      tableheight: 0, // 表格高度设置
+      dialogExportVisible: false, // 弹窗显示
+      checked: false,
+      indeterminate: false,
+      robotValue: "",
+      logOptions: [],
+      logheader: [],
+      heightTimer: false,
+      loading: false,
+      ruleForm: {
+        exportName: undefined,
+      },
+      rules: {
+        exportName: [
+          { required: true, message: "请输入任务名称", trigger: "blur" },
+          {
+            min: 2,
+            max: 20,
+            message: "长度在 2 到 20 个字符",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  watch: {
+    tableheight(val) {
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      if (!this.heightTimer) {
+        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
+        this.screenHeight = val;
+        this.heightTimer = true;
+        setTimeout(function () {
+          this.heightTimer = false;
+        }, 400);
       }
     },
-    watch: {
-      tableheight(val) {
-        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
-        if (!this.heightTimer) {
-          // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
-          this.screenHeight = val
-          this.heightTimer = true
-          setTimeout(function() {
-            this.heightTimer = false
-          }, 400)
-        }
+  },
+  mounted() {
+    this.getChargeCode();
+    this.onLoadHeight();
+    this.changeWindow();
+    this.getLogModel();
+    this.getchargerList();
+  },
+  methods: {
+    labelHead(h, { column, index }) {
+      let l = column.label.length;
+      let f = 20;
+      if (l <= 3) {
+        f = 30;
       }
+      column.minWidth = f * l;
+      return h("div", { class: "table-head", style: { minWidth: "100%" } }, [
+        column.label,
+      ]);
     },
-    mounted() {
-      this.getChargeCode()
-      this.onLoadHeight()
-      this.changeWindow()
-      this.getLogModel()
-      this.getchargerList()
+    /* 设置初始视窗高度*/
+    onLoadHeight() {
+      this.$nextTick(() => {
+        this.tableheight = document.body.clientHeight - 370;
+      });
     },
-    methods: {
-      labelHead(h,{column,index}){
-        let l = column.label.length
-        let f = 20
-        if(l <= 3){
-          f = 30
-        }
-        column.minWidth = f*l 
-        return h('div',{class:'table-head',style:{minWidth:'100%'}},[column.label])
-      },
-      /* 设置初始视窗高度*/
-      onLoadHeight() {
+    /* 设置窗口变化高度*/
+    changeWindow() {
+      window.onresize = () => {
+        return (() => {
+          this.tableheight = document.body.clientHeight - 370;
+        })();
+      };
+    },
+    // 获取充电机ID
+    getChargeCode() {
+      getChargeCode().then((res) => {
+        this.chargerArr = res.data;
+      });
+    },
+    selectAll() {
+      if (this.robotValue.length < this.logOptions.length) {
+        this.robotValue = [];
+        this.logOptions.map((item) => {
+          this.robotValue.push(item.alarmCode);
+        });
+        this.robotValue.unshift("全选");
+      } else {
+        this.robotValue = [];
+      }
+    },
+    changeSelect(val) {
+      if (!val.includes("全选") && val.length === this.logOptions.length) {
+        this.robotValue.unshift("全选");
+      } else if (
+        val.includes("全选") &&
+        val.length - 1 < this.logOptions.length
+      ) {
+        this.robotValue = this.robotValue.filter((item) => {
+          return item !== "全选";
+        });
+      }
+    },
+    removeTag(val) {
+      if (val === "全选") {
+        this.robotValue = [];
+      }
+    },
+    //获取充电机日志列表
+    getchargerList() {
+      this.loading = true;
+      chargerList(this.queryParams).then((res) => {
+        this.datalist = res.data.list;
+        this.total = res.data.total;
         this.$nextTick(() => {
-          this.tableheight = document.body.clientHeight - 460
-        })
-      },
-      /* 设置窗口变化高度*/
-      changeWindow() {
-        window.onresize = () => {
-          return (() => {
-            this.tableheight = document.body.clientHeight - 460
-          })()
-        }
-      },
-      // 获取充电机ID
-      getChargeCode() {
-        getChargeCode().then(res => {
-          this.chargerArr = res.data
-        })
-      },
-      selectAll() {
-        if (this.robotValue.length < this.logOptions.length) {
-          this.robotValue = [];
-          this.logOptions.map((item) => {
-            this.robotValue.push(item.alarmCode);
-          });
-          this.robotValue.unshift("全选");
-        } else {
-          this.robotValue = [];
-        }
-      },
-      changeSelect(val) {
-        if (!val.includes("全选") && val.length === this.logOptions.length) {
-          this.robotValue.unshift("全选");
-        } else if (val.includes("全选") && val.length - 1 < this.logOptions.length) {
-          this.robotValue = this.robotValue.filter((item) => {
-            return item !== "全选";
-          });
-        }
-      },
-      removeTag(val) {
-        if (val === "全选") {
-          this.robotValue = [];
+          this.$refs.tblist.doLayout();
+        });
+        this.loading = false;
+      });
+    },
+    //获取日志数据字典
+    getLogModel() {
+      chargerModel().then((res) => {
+        this.logOptions = res.data;
+        this.logheader = res.data;
+        this.$nextTick(() => {
+          this.$refs.tblist.doLayout();
+        });
+      });
+    },
+    /** 分页下一页 */
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val;
+      this.getchargerList();
+    },
+    /** 分页选择页数 */
+    handleCurrentChange(val) {
+      this.queryParams.page = val;
+      this.getchargerList();
+    },
+    // 搜索
+    handleQuery() {
+      if (
+        this.dateTime ||
+        this.robotValue.length > 0 ||
+        this.queryParams.deviceNo != undefined
+      ) {
+        if (this.dateTime) {
+          this.queryParams.startTime = this.$moment(this.dateTime[0]).format(
+            "YYYY-MM-DD HH:mm:ss"
+          );
+          this.queryParams.endTime = this.$moment(this.dateTime[1]).format(
+            "YYYY-MM-DD HH:mm:ss"
+          );
         }
-      },
-      //获取充电机日志列表
-      getchargerList(){
-        this.loading=true;
-        chargerList(this.queryParams).then( res =>{
-          this.datalist= res.data.list
-          this.total=res.data.total
-          this.$nextTick(()=>{
-            this.$refs.tblist.doLayout();
-          })
-          this.loading=false;
-        })
-      },
-      //获取日志数据字典
-      getLogModel(){
-        chargerModel().then( res =>{
-          this.logOptions= res.data
-          this.logheader=res.data
-          this.$nextTick(()=>{
-            this.$refs.tblist.doLayout();
-          })
-        })
-      },
-      /** 分页下一页 */
-      handleSizeChange(val) {
-        this.queryParams.pageSize = val
-        this.getchargerList()
-      },
-      /** 分页选择页数 */
-      handleCurrentChange(val) {
-        this.queryParams.page = val
-        this.getchargerList()
-      },
-      // 搜索
-      handleQuery() {
-        if(this.dateTime || this.robotValue.length > 0 || this.queryParams.deviceNo != undefined){
-          if (this.dateTime) {
-            this.queryParams.startTime = this.$moment(this.dateTime[0]).format('YYYY-MM-DD HH:mm:ss')
-            this.queryParams.endTime = this.$moment(this.dateTime[1]).format('YYYY-MM-DD HH:mm:ss')
-          }
-          if(this.robotValue.length > 0){
-            this.queryParams.signals=this.robotValue
-            let differenceABSet = Array.from(new Set([...this.logOptions].filter(x => this.robotValue.includes(x.alarmCode))));
-            this.logheader=differenceABSet
-          }
-          this.getchargerList()
-        }else{
-          this.$message({
-            message: "请选择查询条件！",
-            type: "warning",
-            duration: 1000,
-            offset: 20,
-          });
+        if (this.robotValue.length > 0) {
+          this.queryParams.signals = this.robotValue;
+          let differenceABSet = Array.from(
+            new Set(
+              [...this.logOptions].filter((x) =>
+                this.robotValue.includes(x.alarmCode)
+              )
+            )
+          );
+          this.logheader = differenceABSet;
         }
-      },
-      // 搜索重置
-      resetForm() {
-        this.queryParams.startTime = undefined
-        this.queryParams.endTime = undefined
-        this.queryParams.signals = undefined
-        this.queryParams.deviceNo = undefined
-        this.dateTime = ''
-        this.robotValue = ''
-        this.queryParams.page = 1
-        this.queryParams.pageSize = 10
-        this.getchargerList()
-        this.getLogModel()
-      },
-      // 导出结果
-      chargeExport() {
-        this.dialogExportVisible=true
-      },
-      //生成报表
-      AddExport(){
-        this.$refs.ExportForm.validate((valid) => {
-            if (valid) {
-              let addParams={
-                exportName:this.ruleForm.exportName,
-                signals:this.robotValue,
-                deviceNo:this.queryParams.deviceNo,
-                startTime:this.queryParams.startTime,
-                endTime:this.queryParams.endTime,
-                exportLogType:2
-              }
-              exportFile(addParams).then( res =>{
-                console.log(res)
-                if(res.code === 0){
-                  this.dialogExportVisible = false;
-                  this.$router.push({path:"/manage-log/data-export"})
-                }else{
-                  this.$message({
-                    message: res.msg,
-                    type: "warning",
-                    duration: 1000,
-                    offset: 20,
-                  });
-                }
-              })
+        this.getchargerList();
+      } else {
+        this.$message({
+          message: "请选择查询条件！",
+          type: "warning",
+          duration: 1000,
+          offset: 20,
+        });
+      }
+    },
+    // 搜索重置
+    resetForm() {
+      this.queryParams.startTime = undefined;
+      this.queryParams.endTime = undefined;
+      this.queryParams.signals = undefined;
+      this.queryParams.deviceNo = undefined;
+      this.dateTime = "";
+      this.robotValue = "";
+      this.queryParams.page = 1;
+      this.queryParams.pageSize = 10;
+      this.getchargerList();
+      this.getLogModel();
+    },
+    // 导出结果
+    chargeExport() {
+      this.dialogExportVisible = true;
+    },
+    //生成报表
+    AddExport() {
+      this.$refs.ExportForm.validate((valid) => {
+        if (valid) {
+          let addParams = {
+            exportName: this.ruleForm.exportName,
+            signals: this.robotValue,
+            deviceNo: this.queryParams.deviceNo,
+            startTime: this.queryParams.startTime,
+            endTime: this.queryParams.endTime,
+            exportLogType: 2,
+          };
+          exportFile(addParams).then((res) => {
+            console.log(res);
+            if (res.code === 0) {
+              this.dialogExportVisible = false;
+              this.$router.push({ path: "/manage-log/data-export" });
             } else {
-              return false;
+              this.$message({
+                message: res.msg,
+                type: "warning",
+                duration: 1000,
+                offset: 20,
+              });
             }
           });
-      }
-    }
-  }
-  </script>
-  
+        } else {
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+::v-deep .el-table__fixed {
+  height: calc(100% - 10px) !important;
+}
+::v-deep .el-table th.is-leaf{
+  font-size: 15px !important;
+}
+</style>

src/views/manage-log/bms.vue

@@ -1,346 +1,400 @@
 <template>
-    <div class="charge-box">
-      <div class="charge-tools">
-        <el-form :inline="true" :model="queryParams">
-          <el-form-item label="日志范围：" style="margin-left: 35px">
-            <el-select 
-              multiple
-              v-model="robotValue" 
-              clearable 
-              placeholder="请选择"
-              @change="changeSelect"
-              collapse-tags
-              @remove-tag="removeTag"
-            >
-              <el-option label="全选" value="全选" @click.native="selectAll"></el-option>
-              <el-option
-                v-for="item in logOptions"
-                :key="item.alarmCode"
-                :label="item.alarmName"
-                :value="item.alarmCode"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="电池编号:" style="margin-left: 50px;">
-            <el-input v-model.trim="queryParams.sn" placeholder="请输入电池编号" clearable />
-          </el-form-item>
-          <el-form-item label="时间范围:" style="margin-left: 50px">
-            <el-date-picker
-              v-model="dateTime"
-              class="times"
-              type="datetimerange"
-              range-separator="至"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-              format="yyyy-MM-dd HH:mm:ss"
+  <div class="charge-box">
+    <div class="charge-tools">
+      <el-form :inline="true" :model="queryParams">
+        <el-form-item label="日志范围：" style="margin-left: 35px">
+          <el-select
+            multiple
+            v-model="robotValue"
+            clearable
+            placeholder="请选择"
+            @change="changeSelect"
+            collapse-tags
+            @remove-tag="removeTag"
+          >
+            <el-option
+              label="全选"
+              value="全选"
+              @click.native="selectAll"
+            ></el-option>
+            <el-option
+              v-for="item in logOptions"
+              :key="item.alarmCode"
+              :label="item.alarmName"
+              :value="item.alarmCode"
             />
-          </el-form-item>
-  
-          <el-form-item>
-            <el-button type="primary" class="serch actve" @click="handleQuery">查询</el-button>
-            <el-button type="primary" class="serch" @click="resetForm">重置</el-button>
-          </el-form-item>
-  
-        </el-form>
-      </div>
-  
-      <div class="charge-table">
-        <div class="charge-table-top">
-          <el-button type="primary" class="daochu" @click="chargeExport">导出结果</el-button>
-        </div>
-        <div class="charge-table-bottom">
-          <el-table
-            :data="datalist"
-            :header-cell-style="{
-              background: '#1d283e',
-              borderColor: '#2f3c86',
-              height: '36px',
-              lineHeight: '36px',
-              color:'white',
-              fontSize: '15px',
-            }"
-            stripe
-            fit
-            :height="tableheight"
-            style="width: 100%"
-            ref="tblist"
+          </el-select>
+        </el-form-item>
+        <el-form-item label="电池编号:" style="margin-left: 50px">
+          <el-input
+            v-model.trim="queryParams.sn"
+            placeholder="请输入电池编号"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="时间范围:" style="margin-left: 50px">
+          <el-date-picker
+            v-model="dateTime"
+            class="times"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            format="yyyy-MM-dd HH:mm:ss"
+          />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" class="serch actve" @click="handleQuery"
+            >查询</el-button
           >
+          <el-button type="primary" class="serch" @click="resetForm"
+            >重置</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="charge-table">
+      <div class="charge-table-top">
+        <el-button type="primary" class="daochu" @click="chargeExport"
+          >导出结果</el-button
+        >
+      </div>
+      <div class="charge-table-bottom">
+        <el-table
+          :data="datalist"
+          :header-cell-style="{
+            background: '#1d283e',
+            borderColor: '#2f3c86',
+            height: '36px',
+            lineHeight: '36px',
+            color: 'white',
+            fontSize: '15px',
+          }"
+          stripe
+          fit
+          :height="tableheight"
+          style="width: 100%"
+          ref="tblist"
+        >
           <el-table-column
+            v-if="logOptions.length > 0"
             prop="time"
             label="发生时间"
             fixed
-            width="150">
+            width="150"
+          >
           </el-table-column>
           <el-table-column
+            v-if="logOptions.length > 0"
             prop="sn"
             label="电池编号"
             fixed
-            width="150">
+            width="150"
+          >
           </el-table-column>
-          <el-table-column v-for="log in logheader" :key="log.alarmCode" :label="log.alarmName" :render-header="labelHead">
+          <el-table-column
+            v-for="log in logheader"
+            :key="log.alarmCode"
+            :label="log.alarmName"
+            :render-header="labelHead"
+          >
             <template slot-scope="scope">
               {{ scope.row[log.alarmId] }}
             </template>
           </el-table-column>
-          </el-table>
-        </div>
-        <div class="pageblock">
-          <el-pagination
-            :current-page="queryParams.page"
-            :page-sizes="[10, 20, 30, 40]"
-            :page-size="queryParams.pageSize"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="total"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          />
-        </div>
+        </el-table>
       </div>
-      <!--导出弹窗-->
-      <div class="rolemanage chargeshow">
-        <el-dialog
-          title="生成导出任务"
-          :visible.sync="dialogExportVisible"
-          :destroy-on-close="true"
-        >
-          <div class="setExport">
-            <el-form :model="ruleForm" :rules="rules" ref="ExportForm">
-              <el-form-item label="任务名称" prop="exportName">
-                <el-input v-model="ruleForm.exportName" placeholder="请输入任务名称"></el-input>
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" @click="AddExport">生成</el-button>
-              </el-form-item>
-            </el-form>
-            <div class="descript">说明：导出任务生成后，你可以在数据导出列表中进行查询和下载</div>
-          </div>
-        </el-dialog>
+      <div class="pageblock">
+        <el-pagination
+          :current-page="queryParams.page"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="queryParams.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
       </div>
-      <!--导出弹窗结束-->
     </div>
-  </template>
-  
-  <script>
-  import './log.scss'
-  import { BmsModel,bmsList,exportFile } from '@/api/log'
-  export default {
-    name: 'Bms',
-    components: {},
-    data() {
-      return {
-        // 查询时间数组
-        dateTime: '',
-        // 充电机ID下拉列表
-        chargerArr: null,
-        // 数据列表
-        datalist: [],
-        // 查询参数
-        queryParams: {
-          page: 1, // 当前页
-          pageSize: 10, // 每页条数
-          deviceNo: undefined, 
-          endTime: undefined, // 电池编号
-          signals: undefined, // 排序字段
-          startTime: undefined,// 排序方式
-          sn:undefined,
-          sort:1
-        },
-        total: 0, // 总条数，
-        tableheight: 0, // 表格高度设置
-        dialogExportVisible: false, // 弹窗显示
-        checked: false,
-        indeterminate: false,
-        robotValue:'',
-        logOptions: [],
-        logheader:[],
-        heightTimer:false,
-        loading: false,
-        ruleForm:{
-          exportName:undefined,
-        },
-        rules:{
-          exportName: [
-              { required: true, message: '请输入任务名称', trigger: 'blur' },
-              { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
-            ],
-        }
+    <!--导出弹窗-->
+    <div class="rolemanage chargeshow">
+      <el-dialog
+        title="生成导出任务"
+        :visible.sync="dialogExportVisible"
+        :destroy-on-close="true"
+      >
+        <div class="setExport">
+          <el-form :model="ruleForm" :rules="rules" ref="ExportForm">
+            <el-form-item label="任务名称" prop="exportName">
+              <el-input
+                v-model="ruleForm.exportName"
+                placeholder="请输入任务名称"
+              ></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="AddExport">生成</el-button>
+            </el-form-item>
+          </el-form>
+          <div class="descript">
+            说明：导出任务生成后，你可以在数据导出列表中进行查询和下载
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+    <!--导出弹窗结束-->
+  </div>
+</template>
+
+<script>
+import "./log.scss";
+import { BmsModel, bmsList, exportFile } from "@/api/log";
+export default {
+  name: "Bms",
+  components: {},
+  data() {
+    return {
+      // 查询时间数组
+      dateTime: "",
+      // 充电机ID下拉列表
+      chargerArr: null,
+      // 数据列表
+      datalist: [],
+      // 查询参数
+      queryParams: {
+        page: 1, // 当前页
+        pageSize: 10, // 每页条数
+        deviceNo: undefined,
+        endTime: undefined, // 电池编号
+        signals: undefined, // 排序字段
+        startTime: undefined, // 排序方式
+        sn: undefined,
+        sort: 1,
+      },
+      total: 0, // 总条数，
+      tableheight: 0, // 表格高度设置
+      dialogExportVisible: false, // 弹窗显示
+      checked: false,
+      indeterminate: false,
+      robotValue: "",
+      logOptions: [],
+      logheader: [],
+      heightTimer: false,
+      loading: false,
+      ruleForm: {
+        exportName: undefined,
+      },
+      rules: {
+        exportName: [
+          { required: true, message: "请输入任务名称", trigger: "blur" },
+          {
+            min: 2,
+            max: 20,
+            message: "长度在 2 到 20 个字符",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  watch: {
+    tableheight(val) {
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      if (!this.heightTimer) {
+        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
+        this.screenHeight = val;
+        this.heightTimer = true;
+        setTimeout(function () {
+          this.heightTimer = false;
+        }, 400);
       }
     },
-    watch: {
-      tableheight(val) {
-        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
-        if (!this.heightTimer) {
-          // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
-          this.screenHeight = val
-          this.heightTimer = true
-          setTimeout(function() {
-            this.heightTimer = false
-          }, 400)
-        }
+  },
+  mounted() {
+    this.onLoadHeight();
+    this.changeWindow();
+    this.getLogModel();
+    this.getrobotList();
+  },
+  methods: {
+    labelHead(h, { column, index }) {
+      let l = column.label.length;
+      let f = 20;
+      if (l <= 3) {
+        f = 30;
+      } else if (l >= 14) {
+        f = 15;
       }
+      column.minWidth = f * l;
+      return h("div", { class: "table-head", style: { minWidth: "100%" } }, [
+        column.label,
+      ]);
     },
-    mounted() {
-      this.onLoadHeight()
-      this.changeWindow()
-      this.getLogModel()
-      this.getrobotList()
+    /* 设置初始视窗高度*/
+    onLoadHeight() {
+      this.$nextTick(() => {
+        this.tableheight = document.body.clientHeight - 370;
+      });
     },
-    methods: {
-      labelHead(h,{column,index}){
-        let l = column.label.length
-        let f = 20
-        if(l <= 3){
-          f = 30
-        }else if(l >= 14){
-          f = 15
-        }
-        column.minWidth = f*l 
-        return h('div',{class:'table-head',style:{minWidth:'100%'}},[column.label])
-      },
-      /* 设置初始视窗高度*/
-      onLoadHeight() {
+    /* 设置窗口变化高度*/
+    changeWindow() {
+      window.onresize = () => {
+        return (() => {
+          this.tableheight = document.body.clientHeight - 370;
+        })();
+      };
+    },
+    selectAll() {
+      if (this.robotValue.length < this.logOptions.length) {
+        this.robotValue = [];
+        this.logOptions.map((item) => {
+          this.robotValue.push(item.alarmCode);
+        });
+        this.robotValue.unshift("全选");
+      } else {
+        this.robotValue = [];
+      }
+    },
+    changeSelect(val) {
+      if (!val.includes("全选") && val.length === this.logOptions.length) {
+        this.robotValue.unshift("全选");
+      } else if (
+        val.includes("全选") &&
+        val.length - 1 < this.logOptions.length
+      ) {
+        this.robotValue = this.robotValue.filter((item) => {
+          return item !== "全选";
+        });
+      }
+    },
+    removeTag(val) {
+      if (val === "全选") {
+        this.robotValue = [];
+      }
+    },
+    //获取BMS日志列表
+    getrobotList() {
+      this.loading = true;
+      bmsList(this.queryParams).then((res) => {
+        this.datalist = res.data.list;
+        this.total = res.data.total;
         this.$nextTick(() => {
-          this.tableheight = document.body.clientHeight - 460
-        })
-      },
-      /* 设置窗口变化高度*/
-      changeWindow() {
-        window.onresize = () => {
-          return (() => {
-            this.tableheight = document.body.clientHeight - 460
-          })()
-        }
-      },
-      selectAll() {
-        if (this.robotValue.length < this.logOptions.length) {
-          this.robotValue = [];
-          this.logOptions.map((item) => {
-            this.robotValue.push(item.alarmCode);
-          });
-          this.robotValue.unshift("全选");
-        } else {
-          this.robotValue = [];
-        }
-      },
-      changeSelect(val) {
-        if (!val.includes("全选") && val.length === this.logOptions.length) {
-          this.robotValue.unshift("全选");
-        } else if (val.includes("全选") && val.length - 1 < this.logOptions.length) {
-          this.robotValue = this.robotValue.filter((item) => {
-            return item !== "全选";
-          });
-        }
-      },
-      removeTag(val) {
-        if (val === "全选") {
-          this.robotValue = [];
+          this.$refs.tblist.doLayout();
+        });
+        this.loading = false;
+      });
+    },
+    //获取日志数据字典
+    getLogModel() {
+      BmsModel().then((res) => {
+        this.logOptions = res.data;
+        this.logheader = res.data;
+        this.$nextTick(() => {
+          this.$refs.tblist.doLayout();
+        });
+      });
+    },
+    /** 分页下一页 */
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val;
+      this.getrobotList();
+    },
+    /** 分页选择页数 */
+    handleCurrentChange(val) {
+      this.queryParams.page = val;
+      this.getrobotList();
+    },
+    // 搜索
+    handleQuery() {
+      console.log(this.queryParams.sn);
+      if (this.dateTime || this.robotValue.length > 0 || this.queryParams.sn) {
+        if (this.dateTime) {
+          this.queryParams.startTime = this.$moment(this.dateTime[0]).format(
+            "YYYY-MM-DD HH:mm:ss"
+          );
+          this.queryParams.endTime = this.$moment(this.dateTime[1]).format(
+            "YYYY-MM-DD HH:mm:ss"
+          );
         }
-      },
-      //获取BMS日志列表
-      getrobotList(){
-        this.loading=true;
-        bmsList(this.queryParams).then( res =>{
-          this.datalist= res.data.list
-          this.total=res.data.total
-          this.$nextTick(()=>{
-            this.$refs.tblist.doLayout();
-          })
-          this.loading=false
-        })
-      },
-      //获取日志数据字典
-      getLogModel(){
-        BmsModel().then( res =>{
-          this.logOptions= res.data
-          this.logheader=res.data
-          this.$nextTick(()=>{
-            this.$refs.tblist.doLayout();
-          })
-        })
-      },
-      /** 分页下一页 */
-      handleSizeChange(val) {
-        this.queryParams.pageSize = val
-        this.getrobotList()
-      },
-      /** 分页选择页数 */
-      handleCurrentChange(val) {
-        this.queryParams.page = val
-        this.getrobotList()
-      },
-      // 搜索
-      handleQuery() {
-        console.log(this.queryParams.sn)
-        if(this.dateTime || this.robotValue.length > 0 || this.queryParams.sn){
-          if (this.dateTime) {
-            this.queryParams.startTime = this.$moment(this.dateTime[0]).format('YYYY-MM-DD HH:mm:ss')
-            this.queryParams.endTime = this.$moment(this.dateTime[1]).format('YYYY-MM-DD HH:mm:ss')
-          }
-          if(this.robotValue.length > 0){
-            this.queryParams.signals=this.robotValue
-            let differenceABSet = Array.from(new Set([...this.logOptions].filter(x => this.robotValue.includes(x.alarmCode))));
-            this.logheader=differenceABSet
-          }
-          this.getrobotList()
-        }else{
-          this.$message({
-            message: "请选择查询条件！",
-            type: "warning",
-            duration: 1000,
-            offset: 20,
-          });
+        if (this.robotValue.length > 0) {
+          this.queryParams.signals = this.robotValue;
+          let differenceABSet = Array.from(
+            new Set(
+              [...this.logOptions].filter((x) =>
+                this.robotValue.includes(x.alarmCode)
+              )
+            )
+          );
+          this.logheader = differenceABSet;
         }
-      },
-      // 搜索重置
-      resetForm() {
-        this.queryParams.startTime = undefined
-        this.queryParams.endTime = undefined
-        this.queryParams.signals = undefined
-        this.queryParams.batteryNum = undefined
-        this.queryParams.sn = ''
-        this.robotValue = ''
-        this.dateTime = '';
-        this.queryParams.page = 1
-        this.queryParams.pageSize = 10
-        this.getrobotList()
-        this.getLogModel()
-      },
-      // 导出结果
-      chargeExport() {
-        this.dialogExportVisible=true
-      },
-      //生成报表
-      AddExport(){
-        this.$refs.ExportForm.validate((valid) => {
-            if (valid) {
-              let addParams={
-                exportName:this.ruleForm.exportName,
-                signals:this.robotValue,
-                sn:this.queryParams.sn,
-                startTime:this.queryParams.startTime,
-                endTime:this.queryParams.endTime,
-                exportLogType:3
-              }
-              exportFile(addParams).then( res =>{
-                console.log(res)
-                if(res.code === 0){
-                  this.dialogExportVisible = false;
-                  this.$router.push({path:"/manage-log/data-export"})
-                }else{
-                  this.$message({
-                    message: res.msg,
-                    type: "warning",
-                    duration: 1000,
-                    offset: 20,
-                  });
-                }
-              })
+        this.getrobotList();
+      } else {
+        this.$message({
+          message: "请选择查询条件！",
+          type: "warning",
+          duration: 1000,
+          offset: 20,
+        });
+      }
+    },
+    // 搜索重置
+    resetForm() {
+      this.queryParams.startTime = undefined;
+      this.queryParams.endTime = undefined;
+      this.queryParams.signals = undefined;
+      this.queryParams.batteryNum = undefined;
+      this.queryParams.sn = "";
+      this.robotValue = "";
+      this.dateTime = "";
+      this.queryParams.page = 1;
+      this.queryParams.pageSize = 10;
+      this.getrobotList();
+      this.getLogModel();
+    },
+    // 导出结果
+    chargeExport() {
+      this.dialogExportVisible = true;
+    },
+    //生成报表
+    AddExport() {
+      this.$refs.ExportForm.validate((valid) => {
+        if (valid) {
+          let addParams = {
+            exportName: this.ruleForm.exportName,
+            signals: this.robotValue,
+            sn: this.queryParams.sn,
+            startTime: this.queryParams.startTime,
+            endTime: this.queryParams.endTime,
+            exportLogType: 3,
+          };
+          exportFile(addParams).then((res) => {
+            console.log(res);
+            if (res.code === 0) {
+              this.dialogExportVisible = false;
+              this.$router.push({ path: "/manage-log/data-export" });
             } else {
-              return false;
+              this.$message({
+                message: res.msg,
+                type: "warning",
+                duration: 1000,
+                offset: 20,
+              });
             }
           });
-      }
-    }
-  }
-  </script>
-  
+        } else {
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+::v-deep .el-table__fixed {
+  height: calc(100% - 10px) !important;
+}
+::v-deep .el-table th.is-leaf{
+  font-size: 15px !important;
+}
+</style>

src/views/manage-log/data-export.vue

@@ -232,14 +232,14 @@ export default {
     /* 设置初始视窗高度*/
     onLoadHeight() {
       this.$nextTick(() => {
-        this.tableheight = document.body.clientHeight - 400;
+        this.tableheight = document.body.clientHeight - 370;
       });
     },
     /* 设置窗口变化高度*/
     changeWindow() {
       window.onresize = () => {
         return (() => {
-          this.tableheight = document.body.clientHeight - 400;
+          this.tableheight = document.body.clientHeight - 370;
         })();
       };
     },
@@ -378,3 +378,11 @@ export default {
   },
 };
 </script>
+<style scoped>
+::v-deep .el-table__fixed{
+  height: calc(100% - 10px) !important;
+}
+::v-deep .el-table th.is-leaf{
+  font-size: 15px !important;
+}
+</style>

src/views/manage-log/log.scss

@@ -148,4 +148,57 @@
         text-indent: 1em;
         font-weight: normal;
     }
+}
+@media screen and (max-width:1440px){
+    .charge-box .charge-table .charge-table-top .daochu span{
+        position: relative;
+        left: -3px;
+        top: -2px;
+    }
+    .charge-box .charge-tools .serch span{
+        position: relative;
+        left: -3px;
+        top: -2px;
+    }
+}
+@media screen and (max-width:1278px){
+    .charge-box .charge-table .charge-table-top .daochu{
+        width: 130px;
+        height: 48px;
+        span{
+            position: relative;
+            left: -3px;
+            top: -2px;
+        }
+    } 
+    .charge-box .charge-tools .serch {
+        width: 80px;
+        height: 46px;
+        span{
+            position: relative;
+            left: -3px;
+            top: -2px;
+        }
+    }
+    .charge-box .charge-tools .actve{
+        position: relative;
+        top: -1px;
+    }
+    .el-form--inline .el-form-item__content{
+        .el-select{
+            height: 46px;
+        }
+        .charge-box .charge-tools .times{
+            height: 46px;
+        }
+    }
+    .charge-box .charge-tools{
+        .el-form-item{
+            margin-left: 35px !important;
+            margin-right: 0px !important;
+        }
+        .el-form-item:last-child{
+            margin-left: 10px !important;
+        }
+    }
 }

src/views/manage-log/robot.vue

@@ -73,6 +73,7 @@
           style="width: 100%"
         >
           <el-table-column
+            v-if="logOptions.length > 0"
             prop="time"
             label="发生时间"
             fixed="left"
@@ -217,14 +218,14 @@ export default {
     /* 设置初始视窗高度*/
     onLoadHeight() {
       this.$nextTick(() => {
-        this.tableheight = document.body.clientHeight - 460;
+        this.tableheight = document.body.clientHeight - 370;
       });
     },
     /* 设置窗口变化高度*/
     changeWindow() {
       window.onresize = () => {
         return (() => {
-          this.tableheight = document.body.clientHeight - 460;
+          this.tableheight = document.body.clientHeight - 370;
         })();
       };
     },
@@ -351,9 +352,9 @@ export default {
       this.dateTime = "";
       this.queryParams.page = 1;
       this.queryParams.pageSize = 10;
-      this.queryParams.startTime = ''
-      this.queryParams.endTime = ''
-      this.getLogModel()
+      this.queryParams.startTime = "";
+      this.queryParams.endTime = "";
+      this.getLogModel();
       this.getrobotList();
     },
     // 导出弹窗显示
@@ -402,3 +403,17 @@ export default {
   },
 };
 </script>
+<style scoped>
+::v-deep .el-table__fixed {
+  height: calc(100% - 10px) !important;
+}
+::v-deep .el-table th.is-leaf{
+  font-size: 15px !important;
+}
+/* .serch{
+  min-width: 70px;
+  width: 70px; 
+  height: 40px; 
+} */
+
+</style>

vue.config.js

@@ -1,4 +1,14 @@
 'use strict'
+
+// 引入等比适配插件
+const px2rem = require('postcss-px2rem')
+ 
+// 配置基本大小
+const postcss = px2rem({
+  // 基准大小 baseSize，需要和rem.js中相同
+  remUnit: 80
+})
+
 module.exports = {
   publicPath: "/",
   outputDir: 'dist',
@@ -15,4 +25,14 @@ module.exports = {
       error: true,
     },
   },
+  css: {
+    loaderOptions: {
+      postcss: {
+        plugins: [
+          postcss
+        ]
+      }
+    }
+  }
+
 }