wy hai 1 ano
pai
achega
9de21eb34a

+ 1 - 1
src/layout/components/AppMain.vue

@@ -37,7 +37,7 @@ export default {
 }
 .app-main {
   /* 50= navbar  50  */
-  min-height: calc(100vh - 65px);
+  min-height: calc(100vh - 75px);
   width: 100%;
   position: relative;
   overflow: hidden;

+ 178 - 131
src/layout/components/Navbar.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="navbar">
-    <div class="left-title">重卡换电智能站控系统</div>
-    <div class="stationNo">No.{{stationNo || '—'}}</div>
+    <!-- <div class="left-title">重卡换电智能站控系统</div>
+    <div class="stationNo">No.{{ stationNo || '—' }}</div> -->
+    <img src="./assets/logo_title.png" class="logo">
     <div class="left-menu">
       <div v-for="(item, index) in PermissionList" :key="index">
         <router-link :to="item.path">
-          <span>{{item.children[0].meta.title}}</span>
+          <span>{{ item.children[0].meta.title }}</span>
         </router-link>
       </div>
     </div>
-    
+
     <div class="date-time">
       <div class="warn" @mouseover="getWarnList" @mouseout="LostWarn" @click="goToAlarm">
         <div class="is-warn">
@@ -21,11 +22,11 @@
       </div>
       <div class="link">
         <div class="is-warn">
-            <img :src='isLink?require("./assets/link.png"):require("./assets/close.png")'>
+          <img :src='isLink ? require("./assets/link.png") : require("./assets/close.png")'>
         </div>
-        <div>{{isLink?'已连接':'断开'}}</div>
+        <div>{{ isLink ? '已连接' : '断开' }}</div>
       </div>
-      <div class="safedays">安全运营 {{days}} 天</div>
+      <div class="safedays">安全运营 {{ days }} 天</div>
       <div class="time-value">
         {{ dateTime.hours }}:{{ dateTime.minutes }}:{{ dateTime.seconds }}
       </div>
@@ -65,16 +66,17 @@
         </el-dropdown-menu>
       </el-dropdown>
     </div>
-    <div class="setFile"><router-link to="/control-config/setFile"><img src="./assets/set.png" width="26" height="26"></router-link></div>
+    <div class="setFile"><router-link to="/control-config/setFile"><img src="./assets/set.png" width="26"
+          height="26"></router-link></div>
   </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
-import { getStateList,setBusiness,cloudState,getStationCode } from "@/api/statistics";
+import { getStateList, setBusiness, cloudState, getStationCode } from "@/api/statistics";
 export default {
   components: {},
-  props:['warnNum'],
+  props: ['warnNum'],
   data() {
     return {
       PermissionList: [],
@@ -87,20 +89,20 @@ export default {
         minutes: "",
         seconds: "",
       },
-      days:0,
-      isLink:undefined,
-      isBusiness:true,
-      stationNo:null,
+      days: 0,
+      isLink: undefined,
+      isBusiness: true,
+      stationNo: null,
     };
   },
   computed: {
     ...mapGetters(["name", "permission_routes"]),
   },
   mounted() {
-    setInterval(()=>{
+    setInterval(() => {
       this.timer()
     }, 1000);
-    setInterval(()=>{
+    setInterval(() => {
       this.getCloudState()
     }, 2000);
     this.menuList()
@@ -108,60 +110,60 @@ export default {
     this.getStationCode()
   },
   methods: {
-    goToAlarm(){
+    goToAlarm() {
       // this.$router.push({path:"/permission/now-alarm"})
     },
     //获取换电站编号
-    getStationCode(){
+    getStationCode() {
       getStationCode().then(res => {
-        this.stationNo=res.data
+        this.stationNo = res.data
       })
     },
     //修改营业状态
-    HandleBusiness(flag){
+    HandleBusiness(flag) {
       this.$confirm('确认修改营业状态?', '确认操作', {
         confirmButtonText: '确认',
         cancelButtonText: '取消',
         type: 'warning'
       })
-        .then(async() => {
-          const data=await setBusiness(flag)
+        .then(async () => {
+          const data = await setBusiness(flag)
           this.$message({
             type: 'success',
             message: '操作成功!'
           })
           // this.getUserlist()
           console.log(data);
-          this.isBusiness=this.isBusiness?0:1
+          this.isBusiness = this.isBusiness ? 0 : 1
         })
         .catch(err => { console.error(err) })
     },
-    getCloudState(){
-      cloudState().then(res=>{
-        this.isLink=res.data
+    getCloudState() {
+      cloudState().then(res => {
+        this.isLink = res.data
       })
     },
     //安全运行天数
-    getSafeDay(){
+    getSafeDay() {
       getStateList(1).then(res => {
-        this.days=res.data.content
+        this.days = res.data.content
       })
       // getStateList(2).then(res => {
       //   this.isBusiness=res.data.content==1?1:0
       // })
     },
-    getWarnList(){
+    getWarnList() {
       this.$emit('ShowWarn');
     },
-    LostWarn(){
+    LostWarn() {
       this.$emit('CloseWarn');
     },
     //菜单路由
-    menuList(){
-      
+    menuList() {
+
       // this.PermissionList = this.permission_routes.slice(5, 11);
-      this.PermissionList = this.permission_routes.slice(5,11);
-      console.log(this.PermissionList,'999999');
+      this.PermissionList = this.permission_routes.slice(5, 11);
+      console.log(this.PermissionList, '999999');
     },
     //当前时间
     timer() {
@@ -198,36 +200,47 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.el-submenu__icon-arrow{
+.el-submenu__icon-arrow {
   right: -18px;
-  top:30%;
+  top: 30%;
   font-size: 16px;
   font-weight: bold;
   transform: rotate(180deg);
 }
 .navbar {
-  height: 65px;
+  height: 54px;
   overflow: hidden;
   position: relative;
   display: flex;
   flex-direction: row;
   color: white;
-  padding-top: 25px;
+  padding-top: 10px;
+  // margin-top: 20px;
   justify-content: space-between;
-  border-bottom: 1px solid #2f343e;
-  .stationNo{
+  // border-bottom: 1px solid #2f343e;
+  background-color: #1E1F25;
+  width: calc(100% - 40px);
+  margin-left: 20px;
+  padding-left: 15px;
+  .logo{
+    width: 447px;
+    height: 34px;
+    margin-right: 80px;
+  }
+  .stationNo {
     padding: 0px 15px;
     height: 32px;
     background: #1C263A;
     border: 1px solid #26334C;
     font-size: 16px;
     font-weight: 500;
-    color: rgba(153,174,197,0.65);
-    text-shadow: 0px 0px 4px rgba(39,69,201,0.5);
-    line-height:32px;
+    color: rgba(153, 174, 197, 0.65);
+    text-shadow: 0px 0px 4px rgba(39, 69, 201, 0.5);
+    line-height: 32px;
     text-align: center;
     margin-right: 32px;
   }
+
   .left-title {
     font-size: 26px;
     text-align: center;
@@ -236,6 +249,7 @@ export default {
     padding-left: 20px;
     margin-right: 10px;
   }
+
   .left-menu {
     flex: 1;
     height: 100%;
@@ -243,73 +257,87 @@ export default {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    .iconacive{
+    color: #757B8C;
+
+    .iconacive {
       display: none;
     }
-    div{
+
+    div {
       margin-right: 35px;
       height: 39px;
     }
-    @media screen and (max-width: 1024px){
-      div{
+
+    @media screen and (max-width: 1024px) {
+      div {
         margin-right: 22px;
       }
-      .date-time .warn{
+
+      .date-time .warn {
         font-size: 12px;
       }
-      .safedays{
+
+      .safedays {
         font-size: 12px;
       }
     }
-    .routerlink{
+
+    .routerlink {
       position: relative;
     }
-    .router-link-active{
-      color: #91fdb9;
+
+    .router-link-active {
+      color: #fff;
       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;
       }
-      .el-icon-arrow-down:before{
+
+      .el-icon-arrow-down:before {
         content: "";
       }
     }
-    
-    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;
-      border: 6px solid transparent;
-      border-top: 6px solid #91fdb9;
+      width: 100%;
+      height: 2px;
+      background: #246CF9;
       position: absolute;
-      bottom: -15px;
-      left: 54%;
+      bottom: -16px;
+      left: 3px;
       z-index: 0;
-      }
+    }
   }
-  .safedays{
+
+  .safedays {
     font-size: 18px;
     font-weight: 600;
     line-height: 40px;
     text-align: right;
     padding-right: 15px;
   }
+
   .date-time {
     color: white;
     display: flex;
@@ -317,8 +345,8 @@ export default {
     align-items: center;
     justify-content: flex-end;
     padding-right: 5px;
-    
-    .warn{
+
+    .warn {
       width: 92px;
       display: flex;
       font-size: 16px;
@@ -330,12 +358,14 @@ export default {
       line-height: 24px;
       cursor: pointer;
       height: 39px;
-      img{
+
+      img {
         width: 20px;
         height: 20px;
       }
     }
-    .link{
+
+    .link {
       width: 86px;
       display: flex;
       align-items: center;
@@ -344,73 +374,85 @@ export default {
       line-height: 24px;
       height: 39px;
       margin-top: 3px;
-      justify-content:flex-start;
-      img{
-       margin-right: 3px;
-       vertical-align: middle;
-       width: 20px;
-       height: 20px;
+      justify-content: flex-start;
+
+      img {
+        margin-right: 3px;
+        vertical-align: middle;
+        width: 20px;
+        height: 20px;
       }
     }
-  .date-value{
-    width: 80px;
-    white-space: nowrap;
-  }
-  .day-value {
-    font-size: 14px;
-    line-height: 22px;
-    font-family: "微软雅黑";
-  }
 
-  @media screen and (max-width: 1152px){
-    .date-value{
-      width: 112px;
+    .date-value {
+      width: 80px;
+      white-space: nowrap;
     }
-    .warn{
-      width: 110px;
+
+    .day-value {
+      font-size: 14px;
+      line-height: 22px;
+      font-family: "微软雅黑";
     }
-    .time-value{
-      width: 98px !important;
+
+    @media screen and (max-width: 1152px) {
+      .date-value {
+        width: 112px;
+      }
+
+      .warn {
+        width: 110px;
+      }
+
+      .time-value {
+        width: 98px !important;
+      }
     }
-}
-  @media screen and (max-width: 1440px) {
-    .date-value{
-      padding-bottom: 8px;
+
+    @media screen and (max-width: 1440px) {
+      .date-value {
+        padding-bottom: 8px;
+      }
+    }
+
+    // @media screen and (min-width: 1281px) and (max-width: 1366px) {
+    //   .date-value{
+    //     width: 96px;
+    //   }
+    // }
+    // @media screen and (min-width: 1400px) and (max-width: 1600px) {
+    //   .date-value{
+    //     width: 92px;
+    //   }
+    // }
+    .time-value {
+      font-size: 18px;
+      width: 82px;
+      text-align: left;
+      box-sizing: border-box;
+      font-weight: bold;
+    }
+
+    .week-value {
+      font-size: 14px;
     }
   }
-  // @media screen and (min-width: 1281px) and (max-width: 1366px) {
-  //   .date-value{
-  //     width: 96px;
-  //   }
-  // }
-  // @media screen and (min-width: 1400px) and (max-width: 1600px) {
-  //   .date-value{
-  //     width: 92px;
-  //   }
-  // }
-  .time-value {
-    font-size: 18px;
-    width: 82px;
-    text-align: left;
-    box-sizing: border-box;
-    font-weight: bold;
-  }
-  .week-value {
-    font-size: 14px;
-  }
-  }
+
   .right-menu {
     height: 100%;
     line-height: 34px;
-    .el-dropdown{
+
+    .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{
+      text-shadow: 0px 0px 11px rgba(34, 123, 255, 0.8);
+
+      .el-icon-arrow-down:before {
         bottom: -4px;
       }
     }
+
     &:focus {
       outline: none;
     }
@@ -426,40 +468,45 @@ export default {
       &.hover-effect {
         cursor: pointer;
         transition: background 0.3s;
+
         &:hover {
           background: rgba(0, 0, 0, 0.025);
         }
       }
     }
   }
-  .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;
       line-height: 38px;
       cursor: pointer;
     }
   }
-  .setFile{
+
+  .setFile {
     padding-right: 20px;
     padding-top: 4px;
     width: 26px;
     height: 26px;
     box-sizing: content-box;
-    img{
+
+    img {
       width: 26px;
       height: 26px;
     }
   }
-  .cutApart{
+
+  .cutApart {
     width: 1px;
     height: 32px;
     background: #54616D;
     opacity: 1;
     margin: 0 5px;
   }
-}
-</style>
+}</style>

BIN=BIN
src/layout/components/assets/logo_title.png


+ 1 - 0
src/layout/index.vue

@@ -110,6 +110,7 @@ export default {
   position: relative;
   width: 100%;
   background:#0a101c;
+  padding-top: 20px;
   &.mobile.openSidebar {
     position: fixed;
     top: 0;

+ 22 - 22
src/styles/element-ui.scss

@@ -288,14 +288,14 @@
   color: white;
 }
 .el-pager li:hover,.el-pager li.active{
-  color: #91fdb9;
+  color: #246CF9;
 }
 .el-pagination__jump{
   color: white;
 }
-.el-pagination__editor .el-input__inner{
-  color: #91fdb9;
-}
+// .el-pagination__editor .el-input__inner{
+//   color: #246CF9;
+// }
 
 /*修改密码表单修改*/
 .frompwd{
@@ -564,29 +564,29 @@
   .el-message-box__btns{
     margin-top: 15px;
     button:first-child{
-      background-color: #181e2e;
-      color: white;
-      border-color: #414a63;
+      background-color: #282C38;
+      color: #757B8C;
+      border-color: #282C38;
       width: 70px;
       height: 36px;
       font-size: 16px;
     }
     button:first-child:hover{
-      color: #69b889;
+      color: #246CF9;
       background-color: #181e2e;
-      border-color: #69b889;
+      border-color: #246CF9;
     }
     button:last-child{
-      background-color: #91fdb9;
-      border-color: #91fdb9;
+      background-color: #246CF9;
+      border-color: #246CF9;
       color: #0d1711;
       width: 70px;
       height: 36px;
       font-size: 16px;
     }
     button:last-child:hover{
-      background-color: #69b889;
-      border-color: #69b889;
+      background-color: #246CF9;
+      border-color: #246CF9;
       color: white;
     }
   }
@@ -602,31 +602,31 @@
   padding: 0px 10px;
 }
 .exit{
-  background-color: #181e2e;
-  color: white;
-  border-color: #414a63;
+  background-color: #282C38;
+  color: #757B8C;
+  border-color: #282C38;
   font-size: 16px;
   width: 70px;
   height: 36px;
   padding: 0px 10px;
 }
 .exit:hover,.exit:focus,.reset:hover{
-  color: #69b889;
+  color: #246CF9;
   background-color: #181e2e;
-  border-color: #69b889;
+  border-color: #246CF9;
   font-size: 16px;
 }
 .save{
-  background-color: #91fdb9;
-  border-color: #91fdb9;
+  background-color: #246CF9;
+  border-color: #246CF9;
   color: #0d1711;
   font-size: 16px;
   width: 70px;
   height: 36px;
 }
 .save:hover,.save:focus{
-  background-color: #69b889;
-  border-color: #69b889;
+  background-color: #246CF9;
+  border-color: #246CF9;
   color: white;
   font-size: 16px;
 }

+ 1 - 1
src/views/Real-time-image/index.scss

@@ -1,7 +1,7 @@
 .contain {
   margin: 20px;
   width: calc(100% - 40px);
-  height: calc(100vh - 105px);
+  height: calc(100vh - 115px);
   display: flex;
   color: #fff;
   .contain-left {

+ 7 - 6
src/views/current-alarm/index.scss

@@ -2,6 +2,7 @@
     display: flex;
     padding: 0 35px;
     flex-direction: column;
+    margin-top: 20px;
     @media screen and (max-width:1152px) {
         .charge-tools{
             padding:25px 5px !important;
@@ -34,18 +35,18 @@
             font-size: 16px;
         }
         .serch:hover{
-            color: #69b889;
+            color: #246CF9;
             background-color: #181e2e;
-            border-color: #69b889;
+            border-color: #246CF9;
         }
         .actve {
-            background-color: #91fdb9;
-            color: #111827;
+            background-color: #246CF9;
+            color: #fff;
             border: none;
         }
         .actve:hover{
-            background-color: #69b889;
-            border-color: #69b889;
+            background-color: #246CF9;
+            border-color: #246CF9;
             color: white;
         }
 

+ 5 - 5
src/views/current-alarm/index.vue

@@ -53,11 +53,11 @@
           <el-table
             :data="datalist"
             :header-cell-style="{
-              background: '#1d283e',
-              borderColor: '#2f3c86',
+              background: '#282C38',
+              borderColor: '#41485B',
               height: '36px',
               lineHeight: '36px',
-              color:'white',
+              color:'#BFC1CB',
               fontSize: '16px',
             }"
             stripe
@@ -83,12 +83,12 @@
               label="告警信息"
               >
             </el-table-column>
-            <el-table-column
+            <!-- <el-table-column
               prop="beginTime"
               label="告警开始时间"
               sortable
               >
-            </el-table-column>
+            </el-table-column> -->
             <!-- <el-table-column
               prop="endTime"
               label="告警结束时间"

BIN=BIN
src/views/equipment-monitoring/assets/c1.png


BIN=BIN
src/views/equipment-monitoring/assets/cangwei.png


BIN=BIN
src/views/equipment-monitoring/assets/d5.png


BIN=BIN
src/views/equipment-monitoring/assets/s2.png


+ 2 - 1
src/views/equipment-monitoring/components/BatteryCharger.vue

@@ -107,6 +107,7 @@
             img{
                 width: 30px;
                 height: 30px;
+                margin-top: 2px;
             }
             p{
                 flex: 1;
@@ -172,7 +173,7 @@
     }
 
     .success {
-        color: #92fdb9;
+        color: #246CF9;
         text-align: right;
     }
     .warning {

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

@@ -181,7 +181,7 @@ export default {
         justify-content: space-between;
 
         em {
-            color: #87edab;
+            color: #246CF9;
             font-weight: 500;
             font-style: normal;
         }

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

@@ -413,7 +413,7 @@ export default {
                 this.chargerInfoVo.chgState === 1 ||
                 this.chargerInfoVo.chgState === 5
             ) {
-                return "background-color:rgb(20,38,50,0.9);border:#4a9dab solid 1px";
+                return "background: rgba(36,108,249,0.1);border: 1px solid rgba(36,108,249,0.6)";
             } else if (
                 this.chargerInfoVo.chgState === 2 ||
                 this.chargerInfoVo.chgState === 0
@@ -430,7 +430,7 @@ export default {
                 this.chargerInfoOneVo.chgState === 1 ||
                 this.chargerInfoOneVo.chgState === 5
             ) {
-                return "background-color:rgb(20,38,50,0.9);border:#4a9dab solid 1px";
+                return "background: rgba(36,108,249,0.1);border: 1px solid rgba(36,108,249,0.6)";
             } else if (
                 this.chargerInfoOneVo.chgState === 2 ||
                 this.chargerInfoOneVo.chgState === 0
@@ -447,7 +447,7 @@ export default {
                 this.chargerInfoTwoVo.chgState === 1 ||
                 this.chargerInfoTwoVo.chgState === 5
             ) {
-                return "background-color:rgb(20,38,50,0.9);border:#4a9dab solid 1px";
+                return "background: rgba(36,108,249,0.1);border: 1px solid rgba(36,108,249,0.6)";
             } else if (
                 this.chargerInfoTwoVo.chgState === 2 ||
                 this.chargerInfoTwoVo.chgState === 0
@@ -534,7 +534,7 @@ export default {
             }
 
             .showCodeActive {
-                background-color: #636c97;
+                background-color: #246CF9;
             }
         }
 
@@ -549,11 +549,11 @@ export default {
             }
 
             .success {
-                color: #92fdb9;
+                color: #246CF9;
             }
 
             .warning {
-                color: #ff4d4f;
+                color: #FA2256;
             }
 
             .container-code-two {
@@ -658,7 +658,7 @@ export default {
     .Plug-gun-charging {
         width: 135px;
         height: 32px;
-        background: #69b889;
+        background: #246CF9;
         text-align: center;
         line-height: 32px;
         font-size: 16px;
@@ -669,7 +669,7 @@ export default {
     }
 
     .Settings {
-        background: #636c97;
+        background: #757B8C;
         margin-left: 20px;
         cursor: pointer;
     }

+ 2 - 3
src/views/equipment-monitoring/components/SubTitle.vue

@@ -171,7 +171,6 @@ export default {
   border: 2px solid rgb(25, 34, 51);
   border-left: none;
   border-right: none;
-  padding: 2px;
 }
 
 .inner-style {
@@ -205,10 +204,10 @@ export default {
 }
 
 .storage {
-  background: #192b7d;
+  background: #1C263A;
   width: 20px;
   height: 20px;
-  color: white;
+  color: #246CF9;
   font-size: 16px;
   font-weight: 600;
   border-radius: 50%;

+ 2 - 2
src/views/equipment-monitoring/index.scss

@@ -42,7 +42,7 @@
                       display: flex;
                       flex-direction: column;
                       margin-right: 20px;
-                      background: #111827;
+                      background: #1E1F25;
                       height: 150px;
                     }
           
@@ -190,7 +190,7 @@
     .box-second{
         display: flex;
         flex-direction: column;
-        background-color: #111827;
+        background-color: #1E1F25;
         .storage-bottom {
             display: flex;
             padding: 20px;

+ 3 - 3
src/views/power-change-monitoring/index.scss

@@ -223,9 +223,9 @@ $titColor:#192233;
     padding: 15px 0px;
     font-size:15px;
     color: #C0C4CC;
-    span{
-      color: #86EDAB;
-    }
+    // span{
+    //   color: #86EDAB;
+    // }
 }
 .main{
     display: flex;