修改换电

.env.development

@@ -2,6 +2,12 @@
 ENV = 'development'
 
 # base api
+<<<<<<< HEAD
+=======
+# VUE_APP_BASE_API = 'http://192.168.3.177:8080/api'
+# VUE_APP_WS = 'ws://192.168.3.177:8080/ws'
+# VUE_APP_VIDEO = 'ws://192.168.3.177:8082/ws'
+>>>>>>> 519361243e975811d0918dee26f826ecbbae9cca
 VUE_APP_BASE_API = 'http://192.168.0.72:8080/api'
 VUE_APP_WS = 'ws://192.168.0.72:8080/ws'
 VUE_APP_VIDEO = 'ws://192.168.0.72:8082/ws'

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;

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,59 @@ 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(){
-      
-      // this.PermissionList = this.permission_routes.slice(5, 11);
+    menuList() {
 
-      this.PermissionList = this.permission_routes.slice(5,11);
+      // this.PermissionList = this.permission_routes.slice(5, 11);
+      this.PermissionList = this.permission_routes.slice(5, 11);
     },
     //当前时间
     timer() {
@@ -198,36 +199,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 +248,7 @@ export default {
     padding-left: 20px;
     margin-right: 10px;
   }
+
   .left-menu {
     flex: 1;
     height: 100%;
@@ -243,73 +256,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 +344,8 @@ export default {
     align-items: center;
     justify-content: flex-end;
     padding-right: 5px;
-    
-    .warn{
+
+    .warn {
       width: 92px;
       display: flex;
       font-size: 16px;
@@ -330,12 +357,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 +373,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 +467,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>

src/layout/index.vue

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

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;
 }

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

@@ -0,0 +1,105 @@
+.contain {
+  margin: 20px;
+  width: calc(100% - 40px);
+  height: calc(100vh - 115px);
+  display: flex;
+  color: #fff;
+  .contain-left {
+    width: 434px;
+    height: 100%;
+    background: #1e1f25;
+    position: relative;
+    .add_camera {
+      width: 394px;
+      height: 44px;
+      background: #3c4254;
+      border-radius: 4px 4px 4px 4px;
+      margin: 20px;
+      text-align: center;
+      line-height: 44px;
+      font-size: 18px;
+      color: #ffffff;
+      cursor: pointer;
+      span {
+        margin-right: 5px;
+        display: inline-block;
+      }
+    }
+    .camera-lists {
+      margin-left: 20px;
+      height: calc(100% - 200px);
+      overflow-y: auto;
+      .camera-lists-info {
+        width: 394px;
+        height: 44px;
+        line-height: 44px;
+        position: relative;
+        cursor: pointer;
+        display: flex;
+        .camera-lists-info-img {
+          width: 18px;
+          height: 18px;
+          margin-top: 13px;
+          margin-right: 10px;
+          margin-left: 15px;
+        }
+        .camera-lists-info-title {
+          font-size: 18px;
+          color: #bfc1cb;
+        }
+        .islistActive-title{
+            color: #fff;
+        }
+        .acquiesce {
+          width: 40px;
+          height: 24px;
+          background: #3c4254;
+          border-radius: 3px 3px 3px 3px;
+          font-size: 12px;
+          font-weight: 400;
+          color: #30e0a1;
+          text-align: center;
+          line-height: 24px;
+          margin-top: 10px;
+          margin-right: 10px;
+        }
+        .imgs-box{
+            display: flex;
+            position: absolute;
+            right: 20px;
+            img{
+                width: 24px;
+                height: 24px;
+                margin-top: 10px;
+            }
+            img:first-child{
+                margin-right: 10px;
+            }
+        }
+      }
+      .islistActive{
+        background-color: rgb(31, 43, 69);
+      }
+    }
+    .all-camera {
+      font-size: 16px;
+      color: #757b8c;
+      margin-left: 20px;
+      position: absolute;
+      bottom: 20px;
+      letter-spacing: 2px;
+      span {
+        color: #246cf9;
+        display: inline-block;
+        margin-left: 4px;
+        margin-right: 4px;
+      }
+    }
+  }
+  .contain-right {
+    height: 100%;
+    background: #1e1f25;
+    margin-left: 20px;
+    width: calc(100% - 454px);
+  }
+}

src/views/Real-time-image/index.vue

@@ -1,13 +1,145 @@
 <template>
-  <div>123456</div>
+    <div class="contain">
+        <div class="contain-left">
+            <sub-title name="摄像头" statement="CAMERA" />
+            <div class="add_camera" @click="addCamera">
+                <span>+</span>添加摄像头
+            </div>
+            <div class="camera-lists">
+                <div v-for="(item, index) in cameraList" :key="index" class="camera-lists-info"
+                    :class="islistActive == index ? 'islistActive' : ''" @click="activeInfo(item, index)">
+                    <img class="camera-lists-info-img"
+                        :src='islistActive == index ? require("@/assets/Frame-white.png") : require("@/assets/Frame-gray.png")'>
+                    <div v-if="islistActive == index && index == 0" class="acquiesce">默认</div>
+                    <div class="camera-lists-info-title" :class="islistActive == index ? 'islistActive-title' : ''">{{
+                        item.title }}</div>
+                    <div class="imgs-box" v-if="islistActive == index">
+                        <img src="@/assets/edit-bi.png" @click="edit(item)">
+                        <img src="@/assets/Group-del.png" @click="del(item)">
+                    </div>
+                </div>
+            </div>
+            <div class="all-camera">
+                共<span>{{ cameraList.length }}</span>个摄像头
+            </div>
+        </div>
+        <!-- 左侧结束 -->
+        <div class="contain-right">
+            <sub-title name="摄像头名称" statement="Real time imaging" />
+        </div>
+        <!-- 弹框 -->
+        <div class="rolemanage">
+            <el-dialog :title="dialogName" :visible.sync="dialogChargeVisible">
+                <div>
+                    <el-form :model="fromData" ref="ExportForm">
+                        <el-form-item label="摄像头名称:" label-width="100px">
+                            <el-input v-model="fromData.cameraName" placeholder="请输入名称"></el-input>
+                        </el-form-item>
+                        <el-form-item label="访问地址:" label-width="100px">
+                            <el-input v-model="fromData.cameraUrl" placeholder="请输入地址"></el-input>
+                        </el-form-item>
+                        <el-form-item label="默认摄像头:" label-width="100px">
+                            <el-checkbox-group v-model="fromData.default">
+                                <el-checkbox  name="default"></el-checkbox>
+                            </el-checkbox-group>
+                        </el-form-item>
+                    </el-form>
+                </div>
+                <div slot="footer" class="dialog-footer">
+                    <el-button class="exit" @click="dialogChargeVisible = false">取消</el-button>
+                    <el-button type="primary" class="save" @click="setCamera">确定</el-button>
+                </div>
+            </el-dialog>
+        </div>
+        <!-- 弹框结束 -->
+    </div>
 </template>
 
 <script>
+import "./index.scss"
+import SubTitle from "@/views/equipment-monitoring/components/SubTitle.vue";
 export default {
+    components: {
+        SubTitle
+    },
+    data() {
+        return {
+            // 摄像头列表
+            cameraList: [
+                { title: '一层工厂内部摄像头1' },
+                { title: '一层工厂内部摄像头2' },
+                { title: '一层工厂内部摄像头3' },
+                { title: '一层工厂内部摄像头4' },
+                { title: '一层工厂内部摄像头5' },
+                { title: '一层工厂内部摄像头6' },
+                { title: '一层工厂内部摄像头7' },
+                { title: '一层工厂内部摄像头1' },
+                { title: '一层工厂内部摄像头2' },
+                { title: '一层工厂内部摄像头3' },
+                { title: '一层工厂内部摄像头4' },
+                { title: '一层工厂内部摄像头5' },
+                { title: '一层工厂内部摄像头6' },
+                { title: '一层工厂内部摄像头7' },
+                { title: '一层工厂内部摄像头2' },
+                { title: '一层工厂内部摄像头3' },
+                { title: '一层工厂内部摄像头4' },
+                { title: '一层工厂内部摄像头5' },
+                { title: '一层工厂内部摄像头6' },
+                { title: '一层工厂内部摄像头7' },
+                { title: '一层工厂内部摄像头2' },
+                { title: '一层工厂内部摄像头3' },
+                { title: '一层工厂内部摄像头4' },
+                { title: '一层工厂内部摄像头5' },
+                { title: '一层工厂内部摄像头6' },
+            ],
+            // 弹窗状态
+            dialogChargeVisible: false,
+            //是否点击 根据数组下标选中 默认为第一条
+            islistActive: 0,
+            //弹窗名字
+            dialogName: '添加摄像头',
+            //弹窗表单
+            fromData: {
+                cameraName: '',
+                cameraUrl: '',
+                default: true,
+            }
+        }
+    },
+    methods: {
+        //添加摄像头
+        addCamera() {
+            this.dialogChargeVisible = true;
+            this.dialogName = '添加摄像头'
+        },
+        //修改摄像头
+        edit(item) {
+            this.dialogChargeVisible = true;
+            this.dialogName = '修改摄像头'
+        },
+        //删除摄像头
+        del(item) {
+            this.$confirm(`请确认删除？`, `确认删除`, {
+                confirmButtonText: '确认',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(async () => {
+                this.$message({
+                    type: 'success',
+                    message: '删除成功!',
+                })
 
+            }).catch(err => { console.log(err) })
+        },
+        // 点击对应摄像头
+        activeInfo(item, index) {
+            console.log(index)
+            this.islistActive = index
+        },
+        //弹窗保存
+        setCamera() {
+            this.dialogChargeVisible = false;
+        }
+    }
 }
 </script>
-
-<style>
-
-</style>

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;
         }
 

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="告警结束时间"

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 {

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;
         }

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;
     }

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%;

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;
@@ -214,6 +214,9 @@
             padding-right: 30px;
             font-size: 13px;
             padding-bottom: 10px;
+            position: absolute;
+            right: 20px;
+            margin-top: 12px;
             span{
                 padding: 0 6px;
             }

src/views/equipment-monitoring/index.vue

@@ -311,14 +311,14 @@
                 />
               </el-select>
             </el-form-item>
-            <el-form-item label="充电功率:" label-width="120px">
+            <el-form-item label="充电功率:" label-width="120px" v-if="setType != 0">
               <el-input
                 v-model="fromData.powerNum"
                 placeholder="请输入充电功率"
                 maxlength="4"
                 @input="handleEdit"
               ></el-input>
-              <span class="kwh">kWh</span>
+              <span class="kwh">{{ setType == 2 ?'%':'kWh' }}</span>
             </el-form-item>
           </el-form>
         </div>
@@ -429,8 +429,10 @@ export default {
       console.log(data, "data");
       if (data.comState == 0) {
         this.fromData.comState = "插枪充电";
+        this.fromData.arr = [ {text: "A枪",value: "0",},{text: "B枪",value: "1",}]
       } else {
         this.fromData.comState = "线束充电";
+        this.fromData.arr = [ {text: "A枪",value: "0",},]
       }
       this.fromData.cangnum = data.cangnum;
       this.dialogChargeVisible = true;
@@ -443,8 +445,10 @@ export default {
         powerNum: this.fromData.powerNum,
         powerType: this.setType,
       };
-      console.log(data, "data");
-      if (data.gunNo == "" || data.powerNum == "" || data.powerNum == "") {
+      if(data.powerType == 0){
+        data.powerNum = undefined
+      }
+      if (data.gunNo == "" || data.powerType == "" || data.powerType&&data.powerNum == "") {
         this.$message({
           type: "warning",
           message: "请填写完整!",

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

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